Add genlocke list and detail pages

Add GET /genlockes and GET /genlockes/{id} endpoints with aggregate
encounter/death stats per leg, and a frontend list page at /genlockes
plus a detail page at /genlockes/:genlockeId showing progress timeline,
cumulative stats, configuration, retired families, and quick actions.
Update nav link to point to the list page instead of /genlockes/new.

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

frontend/src/pages/GenlockeList.tsx

@@ -0,0 +1,93 @@
+import { Link } from 'react-router-dom'
+import { useGenlockes } from '../hooks/useGenlockes'
+import type { RunStatus } from '../types'
+
+const statusStyles: Record<RunStatus, string> = {
+  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  completed:
+    'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+}
+
+export function GenlockeList() {
+  const { data: genlockes, isLoading, error } = useGenlockes()
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+          Your Genlockes
+        </h1>
+        <Link
+          to="/genlockes/new"
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+        >
+          Start New Genlocke
+        </Link>
+      </div>
+
+      {isLoading && (
+        <div className="flex items-center justify-center py-12">
+          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
+          Failed to load genlockes. Please try again.
+        </div>
+      )}
+
+      {genlockes && genlockes.length === 0 && (
+        <div className="text-center py-16">
+          <p className="text-lg text-gray-500 dark:text-gray-400 mb-4">
+            No genlockes yet. Start your first Generation Locke!
+          </p>
+          <Link
+            to="/genlockes/new"
+            className="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+          >
+            Start New Genlocke
+          </Link>
+        </div>
+      )}
+
+      {genlockes && genlockes.length > 0 && (
+        <div className="space-y-3">
+          {genlockes.map((g) => (
+            <Link
+              key={g.id}
+              to={`/genlockes/${g.id}`}
+              className="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow p-4"
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                    {g.name}
+                  </h2>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {g.currentLegOrder !== null
+                      ? `Leg ${g.currentLegOrder} / ${g.totalLegs}`
+                      : `${g.completedLegs} / ${g.totalLegs} legs completed`}
+                    {' \u00b7 '}
+                    Started{' '}
+                    {new Date(g.createdAt).toLocaleDateString(undefined, {
+                      year: 'numeric',
+                      month: 'short',
+                      day: 'numeric',
+                    })}
+                  </p>
+                </div>
+                <span
+                  className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${statusStyles[g.status]}`}
+                >
+                  {g.status}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}