Add genlocke lineage tracking with aligned timeline view

Implement read-only lineage view that traces Pokemon across genlocke legs
via existing transfer records. Backend walks transfer chains to build
lineage entries; frontend renders them as cards with a column-aligned
timeline grid so leg dots line up vertically across all lineages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/GenlockeDetail.tsx

@@ -1,7 +1,7 @@
 import { Link, useParams } from 'react-router-dom'
 import { useGenlocke } from '../hooks/useGenlockes'
 import { usePokemonFamilies } from '../hooks/usePokemon'
-import { GenlockeGraveyard, StatCard, RuleBadges } from '../components'
+import { GenlockeGraveyard, GenlockeLineage, StatCard, RuleBadges } from '../components'
 import type { GenlockeLegDetail, RetiredPokemon, RunStatus } from '../types'
 import { useMemo, useState } from 'react'
 
@@ -87,6 +87,7 @@ export function GenlockeDetail() {
   const { data: familiesData } = usePokemonFamilies()
 
   const [showGraveyard, setShowGraveyard] = useState(false)
+  const [showLineage, setShowLineage] = useState(false)
 
   const activeLeg = useMemo(() => {
     if (!genlocke) return null
@@ -297,9 +298,12 @@ export function GenlockeDetail() {
             Graveyard
           </button>
           <button
-            disabled
-            className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-lg font-medium cursor-not-allowed"
-            title="Coming soon"
+            onClick={() => setShowLineage((v) => !v)}
+            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+              showLineage
+                ? 'bg-blue-600 text-white hover:bg-blue-700'
+                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
+            }`}
           >
             Lineage
           </button>
@@ -315,6 +319,16 @@ export function GenlockeDetail() {
           <GenlockeGraveyard genlockeId={id} />
         </section>
       )}
+
+      {/* Lineage */}
+      {showLineage && (
+        <section>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+            Pokemon Lineages
+          </h2>
+          <GenlockeLineage genlockeId={id} />
+        </section>
+      )}
     </div>
   )
 }