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/components/training/corpus-panel.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCorpus, useDeleteCorpusEntry, type CorpusDecision } from "@/lib/api/training";
+
+/*
+ * Corpus tab: table of all decisions currently in the style corpus, with a
+ * single destructive action (remove from corpus). Uses browser confirm() for
+ * the confirmation — a full shadcn AlertDialog would be overkill for an
+ * admin-only destructive action with a server-side safety net.
+ */
+
+function formatChars(n: number) {
+  return `${(n / 1000).toFixed(1)}K`;
+}
+
+function formatDate(iso: string) {
+  if (!iso) return "—";
+  try {
+    return new Date(iso).toLocaleDateString("he-IL");
+  } catch {
+    return iso;
+  }
+}
+
+function Row({ item }: { item: CorpusDecision }) {
+  const del = useDeleteCorpusEntry();
+  const onDelete = async () => {
+    if (!window.confirm(`למחוק את החלטה ${item.decision_number} מהקורפוס?`)) return;
+    try {
+      await del.mutateAsync(item.id);
+      toast.success("נמחק מהקורפוס");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "שגיאה במחיקה");
+    }
+  };
+
+  return (
+    <TableRow className="border-rule hover:bg-gold-wash/30">
+      <TableCell className="font-semibold text-navy tabular-nums">
+        {item.decision_number || "—"}
+      </TableCell>
+      <TableCell className="text-ink-muted tabular-nums">
+        {formatDate(item.decision_date)}
+      </TableCell>
+      <TableCell>
+        {item.subject_categories.length === 0 ? (
+          <span className="text-ink-light">—</span>
+        ) : (
+          <div className="flex flex-wrap gap-1">
+            {item.subject_categories.map((s) => (
+              <Badge
+                key={s}
+                variant="outline"
+                className="text-[0.7rem] bg-gold-wash text-gold-deep border-gold/40"
+              >
+                {s}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </TableCell>
+      <TableCell className="text-ink-soft tabular-nums">
+        {formatChars(item.chars)}
+      </TableCell>
+      <TableCell className="text-ink-muted tabular-nums text-[0.78rem]">
+        {formatDate(item.created_at)}
+      </TableCell>
+      <TableCell className="text-end">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onDelete}
+          disabled={del.isPending}
+          className="text-danger hover:text-danger hover:bg-danger-bg"
+        >
+          <Trash2 className="w-4 h-4" />
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function CorpusPanel() {
+  const { data, isPending, error } = useCorpus();
+
+  if (error) {
+    return (
+      <div className="rounded bg-danger-bg border border-danger/40 px-6 py-5 text-danger text-center">
+        {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border border-rule bg-surface shadow-sm overflow-hidden">
+      <Table>
+        <TableHeader className="bg-rule-soft/60">
+          <TableRow className="border-rule">
+            <TableHead className="text-navy text-right">מס׳ החלטה</TableHead>
+            <TableHead className="text-navy text-right">תאריך</TableHead>
+            <TableHead className="text-navy text-right">נושאים</TableHead>
+            <TableHead className="text-navy text-right">תווים</TableHead>
+            <TableHead className="text-navy text-right">נוסף בתאריך</TableHead>
+            <TableHead className="text-navy" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {isPending ? (
+            [...Array(4)].map((_, i) => (
+              <TableRow key={i} className="border-rule">
+                {[...Array(6)].map((_, j) => (
+                  <TableCell key={j}>
+                    <Skeleton className="h-4 w-24" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : data?.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={6} className="text-center text-ink-muted py-12">
+                הקורפוס ריק
+              </TableCell>
+            </TableRow>
+          ) : (
+            data?.map((item) => <Row key={item.id} item={item} />)
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}