Phase 5: secondary screens (diagnostics, skills, training)

Port the remaining read views from the vanilla UI to Next.js:

- /diagnostics — system health snapshot (DB connected, table counts,
  active tasks, failed and stuck documents). Uses the existing
  /api/system/diagnostics payload with a 10s refetchInterval so the
  page self-updates while the user watches.
- /skills — Paperclip skill inventory with sync status (DB-only,
  disk-only, synced, not-synced) as a card grid driven by
  /api/admin/skills.
- /training — Dafna's style portrait as three tabs on one page:
  * Report: corpus KPIs + CSS conic-gradient subject donut
    (SubjectDonut ported from index.html renderHero) + horizontal
    anatomy bars + top-12 signature phrases.
  * Corpus: TanStack Table of style_corpus rows with an inline
    delete mutation (useDeleteCorpusEntry invalidates both the
    corpus list and the style report so KPIs update).
  * Compare: two-decision selector backed by /api/training/compare,
    side-by-side panels plus shared / only-A / only-B pattern
    lists.

New API modules: lib/api/system.ts, lib/api/skills.ts,
lib/api/training.ts. All three use TanStack Query with staleTime
profiles tuned per endpoint (10s for diagnostics, 30s for skills,
60s for training reports).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web-ui/src/lib/api/skills.ts

@@ -0,0 +1,30 @@
+/**
+ * Paperclip skills — listing + sync actions.
+ *
+ * Skills live in Paperclip's database (separate from the main legal-ai DB)
+ * and are exposed via /api/admin/skills. The UI just needs read access for
+ * Phase 5; install/sync/delete mutations can follow in Phase 6.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { apiRequest } from "./client";
+
+export type Skill = {
+  slug: string;
+  name: string;
+  db_markdown_chars: number;
+  file_inventory: Array<{ path: string; size?: number }> | null;
+  updated_at: string | null;
+  disk_exists: boolean;
+  disk_skill_md_bytes: number | null;
+  not_in_db?: boolean;
+};
+
+export function useSkills() {
+  return useQuery({
+    queryKey: ["skills", "list"] as const,
+    queryFn: ({ signal }) =>
+      apiRequest<Skill[]>("/api/admin/skills", { signal }),
+    staleTime: 30_000,
+  });
+}