Add genlocke admin panel with CRUD endpoints and UI

Backend: PATCH/DELETE genlocke, POST/DELETE legs with order
re-numbering. Frontend: admin list page with status filter,
detail page with inline editing, legs table, and stats display.

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

frontend/src/pages/admin/AdminGenlockes.tsx

@@ -0,0 +1,107 @@
+import { useState, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { AdminTable, type Column } from '../../components/admin/AdminTable'
+import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
+import { useGenlockes } from '../../hooks/useGenlockes'
+import { useDeleteGenlocke } from '../../hooks/useAdmin'
+import type { GenlockeListItem } from '../../types/game'
+
+export function AdminGenlockes() {
+  const { data: genlockes = [], isLoading } = useGenlockes()
+  const deleteGenlocke = useDeleteGenlocke()
+  const navigate = useNavigate()
+
+  const [deleting, setDeleting] = useState<GenlockeListItem | null>(null)
+  const [statusFilter, setStatusFilter] = useState('')
+
+  const filtered = useMemo(() => {
+    if (!statusFilter) return genlockes
+    return genlockes.filter((g) => g.status === statusFilter)
+  }, [genlockes, statusFilter])
+
+  const columns: Column<GenlockeListItem>[] = [
+    { header: 'Name', accessor: (g) => g.name, sortKey: (g) => g.name },
+    {
+      header: 'Status',
+      accessor: (g) => (
+        <span
+          className={
+            g.status === 'active'
+              ? 'text-green-600 dark:text-green-400'
+              : g.status === 'completed'
+                ? 'text-blue-600 dark:text-blue-400'
+                : 'text-red-600 dark:text-red-400'
+          }
+        >
+          {g.status}
+        </span>
+      ),
+      sortKey: (g) => g.status,
+    },
+    {
+      header: 'Legs',
+      accessor: (g) => `${g.completedLegs} / ${g.totalLegs}`,
+      sortKey: (g) => g.totalLegs,
+    },
+    {
+      header: 'Created',
+      accessor: (g) => new Date(g.createdAt).toLocaleDateString(),
+      sortKey: (g) => g.createdAt,
+    },
+  ]
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-semibold">Genlockes</h2>
+      </div>
+
+      <div className="mb-4 flex items-center gap-4">
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value)}
+          className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+        >
+          <option value="">All statuses</option>
+          <option value="active">Active</option>
+          <option value="completed">Completed</option>
+          <option value="failed">Failed</option>
+        </select>
+        {statusFilter && (
+          <button
+            onClick={() => setStatusFilter('')}
+            className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          >
+            Clear filters
+          </button>
+        )}
+        <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+          {filtered.length} genlockes
+        </span>
+      </div>
+
+      <AdminTable
+        columns={columns}
+        data={filtered}
+        isLoading={isLoading}
+        emptyMessage="No genlockes found."
+        keyFn={(g) => g.id}
+        onRowClick={(g) => navigate(`/admin/genlockes/${g.id}`)}
+      />
+
+      {deleting && (
+        <DeleteConfirmModal
+          title={`Delete "${deleting.name}"?`}
+          message="This will permanently delete the genlocke. Linked runs will be preserved but detached."
+          onConfirm={() =>
+            deleteGenlocke.mutate(deleting.id, {
+              onSuccess: () => setDeleting(null),
+            })
+          }
+          onCancel={() => setDeleting(null)}
+          isDeleting={deleteGenlocke.isPending}
+        />
+      )}
+    </div>
+  )
+}