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/app/training/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { AppShell } from "@/components/app-shell";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StyleReportPanel } from "@/components/training/style-report-panel";
+import { CorpusPanel } from "@/components/training/corpus-panel";
+import { ComparePanel } from "@/components/training/compare-panel";
+
+export default function TrainingPage() {
+  return (
+    <AppShell>
+      <section className="space-y-6">
+        <header>
+          <nav className="text-[0.78rem] text-ink-muted mb-1">
+            <Link href="/" className="hover:text-gold-deep">בית</Link>
+            <span aria-hidden> · </span>
+            <span className="text-navy">אימון סגנון</span>
+          </nav>
+          <h1 className="text-navy mb-0">הפורטרט הסגנוני של דפנה</h1>
+          <p className="text-ink-muted text-sm mt-1 max-w-2xl">
+            לוח בקרה של קורפוס האימון — סטטיסטיקות, אנטומיית החלטה ממוצעת,
+            ביטויי חתימה, וכלי השוואה בין שתי החלטות.
+          </p>
+        </header>
+
+        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
+
+        <Card className="bg-surface border-rule shadow-sm">
+          <CardContent className="px-6 py-5">
+            <Tabs defaultValue="report" dir="rtl">
+              <TabsList className="bg-rule-soft/60">
+                <TabsTrigger value="report">פורטרט סגנון</TabsTrigger>
+                <TabsTrigger value="corpus">קורפוס</TabsTrigger>
+                <TabsTrigger value="compare">השוואה</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="report" className="mt-5">
+                <StyleReportPanel />
+              </TabsContent>
+
+              <TabsContent value="corpus" className="mt-5">
+                <CorpusPanel />
+              </TabsContent>
+
+              <TabsContent value="compare" className="mt-5">
+                <ComparePanel />
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      </section>
+    </AppShell>
+  );
+}