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>

.taskmaster/tasks/tasks.json

@@ -848,12 +848,13 @@
         "description": "Port the remaining 5 views. Use TanStack Table for training corpus and diagnostics lists. Port any charts/visualizations from current index.html. Plan: ~/.claude/plans/joyful-marinating-sutton.md.",
         "details": "See full plan at ~/.claude/plans/joyful-marinating-sutton.md for architecture, critical files, risks, and open questions. This task is phase 5 of 7 in the legal-ai UI rewrite from vanilla HTML to Next.js 15 + shadcn/ui.",
         "testStrategy": "Feature parity with old legal-ai/web/static/index.html across all 10 views.",
-        "status": "pending",
+        "status": "in-progress",
         "dependencies": [
           "86"
         ],
         "priority": "medium",
-        "subtasks": []
+        "subtasks": [],
+        "updatedAt": "2026-04-11T17:28:06.562Z"
       },
       {
         "id": "88",
@@ -887,20 +888,20 @@
         "description": "Add practice_area + appeal_subtype to the wizard, types, schema, case header, and cases table. Gap identified after backend commit 26d09d6 (multi-tenant axis) — new Next.js UI has zero integration while vanilla UI is fully wired. Plan: ~/.claude/plans/woolly-cooking-graham.md",
         "details": "",
         "testStrategy": "",
-        "status": "in-progress",
+        "status": "done",
         "dependencies": [
           "86"
         ],
         "priority": "high",
         "subtasks": [],
-        "updatedAt": "2026-04-11T17:13:13.931Z"
+        "updatedAt": "2026-04-11T17:15:57.831Z"
       }
     ],
     "metadata": {
       "version": "1.0.0",
-      "lastModified": "2026-04-11T17:13:13.932Z",
+      "lastModified": "2026-04-11T17:28:06.563Z",
       "taskCount": 59,
-      "completedCount": 53,
+      "completedCount": 54,
       "tags": [
         "master"
       ]

web-ui/src/app/diagnostics/page.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import Link from "next/link";
+import { AlertTriangle, CheckCircle2, Clock, Database } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useDiagnostics, type DiagDoc } from "@/lib/api/system";
+
+const TABLE_LABELS: Record<string, string> = {
+  cases: "תיקים",
+  documents: "מסמכים",
+  document_chunks: "chunks",
+  style_corpus: "קורפוס סגנון",
+  style_patterns: "דפוסי סגנון",
+};
+
+function formatRelativeTime(iso: string | null) {
+  if (!iso) return "—";
+  const then = new Date(iso);
+  const diffMs = Date.now() - then.getTime();
+  const min = Math.floor(diffMs / 60000);
+  if (min < 1) return "עכשיו";
+  if (min < 60) return `לפני ${min} דקות`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `לפני ${hr} שעות`;
+  const days = Math.floor(hr / 24);
+  if (days < 30) return `לפני ${days} ימים`;
+  return then.toLocaleDateString("he-IL");
+}
+
+function DocRow({ doc, tone }: { doc: DiagDoc; tone: "danger" | "warn" }) {
+  const cls =
+    tone === "danger" ? "bg-danger-bg/60 border-danger/30" : "bg-warn-bg/60 border-warn/30";
+  return (
+    <li
+      className={`rounded border px-3 py-2 flex items-center gap-3 text-sm ${cls}`}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="text-ink font-medium truncate" title={doc.title}>
+          {doc.title || "(ללא כותרת)"}
+        </div>
+        <div className="text-[0.72rem] text-ink-muted flex gap-3 mt-0.5">
+          {doc.case_number && (
+            <Link href={`/cases/${doc.case_number}`} className="hover:text-gold-deep">
+              ערר {doc.case_number}
+            </Link>
+          )}
+          <span>{formatRelativeTime(doc.created_at)}</span>
+        </div>
+      </div>
+      <Badge variant="outline" className="text-[0.7rem]">{doc.status}</Badge>
+    </li>
+  );
+}
+
+export default function DiagnosticsPage() {
+  const { data, isPending, error } = useDiagnostics();
+
+  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">
+            מצב ה-DB, מסמכים שנכשלו או תקועים, ומשימות רקע פעילות. מתעדכן כל 10
+            שניות.
+          </p>
+        </header>
+
+        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
+
+        {error ? (
+          <Card className="bg-danger-bg border-danger/40">
+            <CardContent className="px-6 py-6 text-center text-danger">
+              {error.message}
+            </CardContent>
+          </Card>
+        ) : (
+          <>
+            {/* DB status + table counts */}
+            <div className="grid gap-4 md:grid-cols-[240px_1fr]">
+              <Card className="bg-surface border-rule shadow-sm">
+                <CardContent className="px-5 py-4 flex flex-col items-start gap-2">
+                  <div className="flex items-center gap-2 text-ink-muted text-[0.72rem] uppercase tracking-wider">
+                    <Database className="w-3.5 h-3.5" />
+                    מצב DB
+                  </div>
+                  {isPending ? (
+                    <Skeleton className="h-6 w-24" />
+                  ) : data?.db_ok ? (
+                    <div className="flex items-center gap-2 text-success font-semibold">
+                      <CheckCircle2 className="w-5 h-5" />
+                      <span>מחובר</span>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2 text-danger font-semibold">
+                      <AlertTriangle className="w-5 h-5" />
+                      <span>מנותק</span>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card className="bg-surface border-rule shadow-sm">
+                <CardContent className="px-5 py-4">
+                  <div className="text-ink-muted text-[0.72rem] uppercase tracking-wider mb-3">
+                    ספירת טבלאות
+                  </div>
+                  <dl className="grid grid-cols-2 md:grid-cols-5 gap-y-2 gap-x-4">
+                    {Object.keys(TABLE_LABELS).map((key) => (
+                      <div key={key} className="space-y-0.5">
+                        <dt className="text-[0.72rem] text-ink-muted">
+                          {TABLE_LABELS[key]}
+                        </dt>
+                        <dd className="font-display font-bold text-navy text-xl tabular-nums">
+                          {isPending ? "—" : (data?.tables[key] ?? "—")}
+                        </dd>
+                      </div>
+                    ))}
+                  </dl>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Active tasks */}
+            <Card className="bg-surface border-rule shadow-sm">
+              <CardContent className="px-6 py-5">
+                <h2 className="text-navy text-lg mb-3 flex items-center gap-2">
+                  <Clock className="w-4 h-4" />
+                  משימות רקע פעילות
+                  <Badge variant="outline" className="text-[0.7rem] tabular-nums">
+                    {data?.active_tasks.length ?? 0}
+                  </Badge>
+                </h2>
+                {isPending ? (
+                  <Skeleton className="h-16 w-full" />
+                ) : data?.active_tasks.length === 0 ? (
+                  <p className="text-ink-muted text-sm">אין משימות פעילות</p>
+                ) : (
+                  <ul className="space-y-2">
+                    {data?.active_tasks.map((t) => (
+                      <li
+                        key={t.task_id}
+                        className="flex items-center gap-3 text-sm rounded bg-rule-soft/60 border border-rule px-3 py-2"
+                      >
+                        <span className="flex-1 text-ink truncate">
+                          {t.filename || t.task_id}
+                        </span>
+                        <Badge variant="outline" className="text-[0.7rem]">
+                          {t.step || t.status}
+                        </Badge>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Failed + stuck docs */}
+            <div className="grid gap-4 md:grid-cols-2">
+              <Card className="bg-surface border-rule shadow-sm">
+                <CardContent className="px-6 py-5">
+                  <h2 className="text-danger text-lg mb-3 flex items-center gap-2">
+                    <AlertTriangle className="w-4 h-4" />
+                    מסמכים שנכשלו
+                    <Badge variant="outline" className="text-[0.7rem] tabular-nums">
+                      {data?.failed_documents.length ?? 0}
+                    </Badge>
+                  </h2>
+                  {isPending ? (
+                    <Skeleton className="h-20 w-full" />
+                  ) : data?.failed_documents.length === 0 ? (
+                    <p className="text-ink-muted text-sm">אין כשלונות</p>
+                  ) : (
+                    <ul className="space-y-2">
+                      {data?.failed_documents.map((d) => (
+                        <DocRow key={d.id} doc={d} tone="danger" />
+                      ))}
+                    </ul>
+                  )}
+                </CardContent>
+              </Card>
+
+              <Card className="bg-surface border-rule shadow-sm">
+                <CardContent className="px-6 py-5">
+                  <h2 className="text-warn text-lg mb-3 flex items-center gap-2">
+                    <Clock className="w-4 h-4" />
+                    תקועים (&gt; 10 דק׳)
+                    <Badge variant="outline" className="text-[0.7rem] tabular-nums">
+                      {data?.stuck_documents.length ?? 0}
+                    </Badge>
+                  </h2>
+                  {isPending ? (
+                    <Skeleton className="h-20 w-full" />
+                  ) : data?.stuck_documents.length === 0 ? (
+                    <p className="text-ink-muted text-sm">אין מסמכים תקועים</p>
+                  ) : (
+                    <ul className="space-y-2">
+                      {data?.stuck_documents.map((d) => (
+                        <DocRow key={d.id} doc={d} tone="warn" />
+                      ))}
+                    </ul>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+          </>
+        )}
+      </section>
+    </AppShell>
+  );
+}

web-ui/src/app/skills/page.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import Link from "next/link";
+import { Plug, HardDrive, Database, FileText } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useSkills, type Skill } from "@/lib/api/skills";
+
+function formatSize(bytes: number | null) {
+  if (bytes == null) return "—";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function statusBadge(s: Skill) {
+  if (s.not_in_db) {
+    return <Badge variant="outline" className="bg-warn-bg text-warn border-warn/40">לא סונכרן</Badge>;
+  }
+  if (s.db_markdown_chars > 0 && s.disk_exists) {
+    return <Badge variant="outline" className="bg-success-bg text-success border-success/40">מסונכרן</Badge>;
+  }
+  if (s.db_markdown_chars > 0) {
+    return <Badge variant="outline" className="bg-info-bg text-info border-info/40">DB בלבד</Badge>;
+  }
+  return <Badge variant="outline">לא ידוע</Badge>;
+}
+
+function SkillCard({ skill }: { skill: Skill }) {
+  const fileCount = skill.file_inventory?.length ?? 0;
+  return (
+    <Card className="bg-surface border-rule shadow-sm hover:shadow-md transition-shadow">
+      <CardContent className="px-5 py-4">
+        <div className="flex items-start justify-between gap-3 mb-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <Plug className="w-4 h-4 text-gold-deep shrink-0" />
+            <div className="min-w-0">
+              <h3 className="text-navy font-semibold text-base mb-0 truncate">
+                {skill.name || skill.slug}
+              </h3>
+              <code className="text-[0.72rem] text-ink-muted tabular-nums">
+                {skill.slug}
+              </code>
+            </div>
+          </div>
+          {statusBadge(skill)}
+        </div>
+        <dl className="grid grid-cols-3 gap-2 text-[0.72rem] text-ink-muted mt-3">
+          <div className="flex items-center gap-1">
+            <FileText className="w-3 h-3" />
+            <span className="tabular-nums">{fileCount}</span>
+            <span>קבצים</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Database className="w-3 h-3" />
+            <span className="tabular-nums">
+              {(skill.db_markdown_chars / 1000).toFixed(1)}K
+            </span>
+            <span>תווים</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <HardDrive className="w-3 h-3" />
+            <span className="tabular-nums">
+              {formatSize(skill.disk_skill_md_bytes)}
+            </span>
+          </div>
+        </dl>
+        {skill.updated_at && (
+          <p className="text-[0.7rem] text-ink-light mt-2">
+            עודכן: {new Date(skill.updated_at).toLocaleDateString("he-IL")}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function SkillsPage() {
+  const { data, isPending, error } = useSkills();
+
+  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">מיומנויות Paperclip</h1>
+          <p className="text-ink-muted text-sm mt-1 max-w-2xl">
+            רשימת ה-skills המותקנים במערכת Paperclip ומצב הסנכרון שלהם בין ה-DB
+            לדיסק.
+          </p>
+        </header>
+
+        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
+
+        {error ? (
+          <Card className="bg-danger-bg border-danger/40">
+            <CardContent className="px-6 py-6 text-center text-danger">
+              {error.message}
+            </CardContent>
+          </Card>
+        ) : isPending ? (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {[...Array(6)].map((_, i) => (
+              <Skeleton key={i} className="h-32 w-full rounded-lg" />
+            ))}
+          </div>
+        ) : data?.length === 0 ? (
+          <Card className="bg-surface border-rule">
+            <CardContent className="px-6 py-12 text-center text-ink-muted">
+              <div className="text-gold text-3xl mb-2" aria-hidden>❦</div>
+              אין skills מותקנים
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {data?.map((s) => <SkillCard key={s.slug} skill={s} />)}
+          </div>
+        )}
+      </section>
+    </AppShell>
+  );
+}

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>
+  );
+}

web-ui/src/components/training/compare-panel.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  useCorpus, useCompare, type CompareSide, type PatternEntry,
+} from "@/lib/api/training";
+
+/*
+ * Compare two decisions from the style corpus side-by-side. Uses the
+ * training/compare endpoint which already does the heavy lifting (pattern
+ * extraction, section stats, shared/unique pattern sets). Our job is
+ * layout: two columns of metadata + section bars, plus a third "shared"
+ * section listing patterns that appear in both.
+ */
+
+function SideColumn({ side }: { side: CompareSide }) {
+  return (
+    <Card className="bg-surface border-rule shadow-sm">
+      <CardContent className="px-5 py-4 space-y-3">
+        <header>
+          <h3 className="text-navy text-lg mb-0 tabular-nums">
+            {side.decision_number || "—"}
+          </h3>
+          <p className="text-[0.78rem] text-ink-muted tabular-nums">
+            {side.decision_date || "—"} · {(side.chars / 1000).toFixed(1)}K תווים
+          </p>
+        </header>
+        {side.subjects.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {side.subjects.map((s) => (
+              <Badge
+                key={s}
+                variant="outline"
+                className="text-[0.7rem] bg-gold-wash text-gold-deep border-gold/40"
+              >
+                {s}
+              </Badge>
+            ))}
+          </div>
+        )}
+        {side.sections.length > 0 && (
+          <div>
+            <h4 className="text-[0.72rem] uppercase tracking-wider text-gold-deep font-semibold mb-1.5">
+              חלוקה לחלקים
+            </h4>
+            <ul className="space-y-1 text-[0.78rem]">
+              {side.sections.map((sec) => (
+                <li key={sec.type} className="flex items-center justify-between gap-2">
+                  <span className="text-ink-soft truncate">{sec.type}</span>
+                  <span className="text-ink-muted tabular-nums shrink-0">
+                    {(sec.chars / 1000).toFixed(1)}K
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        <p className="text-[0.78rem] text-ink-muted">
+          דפוסי סגנון שנמצאו: <span className="text-navy font-semibold tabular-nums">{side.patterns_count}</span>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function PatternList({
+  title,
+  items,
+  tone,
+}: {
+  title: string;
+  items: PatternEntry[];
+  tone: "shared" | "a" | "b";
+}) {
+  const toneClass =
+    tone === "shared"
+      ? "bg-success-bg border-success/40"
+      : tone === "a"
+        ? "bg-info-bg border-info/40"
+        : "bg-gold-wash border-gold/40";
+  const toneHeading =
+    tone === "shared"
+      ? "text-success"
+      : tone === "a"
+        ? "text-info"
+        : "text-gold-deep";
+
+  return (
+    <Card className={`${toneClass} shadow-sm`}>
+      <CardContent className="px-5 py-4">
+        <h4 className={`${toneHeading} text-sm font-semibold mb-3 flex items-center gap-2`}>
+          {title}
+          <span className="text-[0.7rem] tabular-nums opacity-70">{items.length}</span>
+        </h4>
+        {items.length === 0 ? (
+          <p className="text-ink-muted text-[0.78rem]">—</p>
+        ) : (
+          <ul className="space-y-1.5 text-[0.78rem] max-h-60 overflow-y-auto">
+            {items.slice(0, 20).map((p) => (
+              <li key={p.id} className="text-ink leading-relaxed">
+                {p.text}
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ComparePanel() {
+  const { data: corpus, isPending } = useCorpus();
+  const [a, setA] = useState<string | null>(null);
+  const [b, setB] = useState<string | null>(null);
+  const cmp = useCompare(a, b);
+
+  return (
+    <div className="space-y-6">
+      <Card className="bg-surface border-rule shadow-sm">
+        <CardContent className="px-5 py-4">
+          <h3 className="text-navy text-base mb-3">בחר שתי החלטות להשוואה</h3>
+          <div className="grid gap-3 md:grid-cols-2">
+            {(["a", "b"] as const).map((slot) => (
+              <div key={slot}>
+                <label className="block text-[0.78rem] font-medium text-navy mb-1">
+                  {slot === "a" ? "החלטה א" : "החלטה ב"}
+                </label>
+                <Select
+                  disabled={isPending}
+                  value={(slot === "a" ? a : b) ?? ""}
+                  onValueChange={(v) => (slot === "a" ? setA(v) : setB(v))}
+                  dir="rtl"
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={isPending ? "טוען…" : "בחר החלטה"} />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-[300px]">
+                    {corpus?.map((c) => (
+                      <SelectItem key={c.id} value={c.id}>
+                        {c.decision_number || "—"}
+                        {c.decision_date ? ` · ${c.decision_date}` : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {a && b && a === b && (
+        <p className="text-ink-muted text-sm text-center">בחר שתי החלטות שונות</p>
+      )}
+
+      {cmp.error && (
+        <Card className="bg-danger-bg border-danger/40">
+          <CardContent className="px-6 py-5 text-danger text-center">
+            {cmp.error.message}
+          </CardContent>
+        </Card>
+      )}
+
+      {cmp.isPending && a && b && a !== b && (
+        <Skeleton className="h-60 w-full" />
+      )}
+
+      {cmp.data && (
+        <>
+          <div className="grid gap-4 md:grid-cols-2">
+            <SideColumn side={cmp.data.a} />
+            <SideColumn side={cmp.data.b} />
+          </div>
+          <div className="grid gap-4 md:grid-cols-3">
+            <PatternList title="דפוסים משותפים" items={cmp.data.shared} tone="shared" />
+            <PatternList title="רק בהחלטה א" items={cmp.data.only_a} tone="a" />
+            <PatternList title="רק בהחלטה ב" items={cmp.data.only_b} tone="b" />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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>
+  );
+}

web-ui/src/components/training/style-report-panel.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { SubjectDonut } from "@/components/training/subject-donut";
+import { useStyleReport } from "@/lib/api/training";
+
+function KPICard({
+  label,
+  value,
+  caption,
+}: {
+  label: string;
+  value: string;
+  caption?: string;
+}) {
+  return (
+    <Card className="bg-surface border-rule shadow-sm">
+      <CardContent className="px-5 py-4 flex flex-col gap-0.5">
+        <span className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted">
+          {label}
+        </span>
+        <span className="font-display text-[2rem] font-black leading-none text-navy">
+          {value}
+        </span>
+        {caption && (
+          <span className="text-[0.78rem] text-ink-muted mt-1">{caption}</span>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function StyleReportPanel() {
+  const { data, isPending, error } = useStyleReport();
+
+  if (error) {
+    return (
+      <Card className="bg-danger-bg border-danger/40">
+        <CardContent className="px-6 py-5 text-center text-danger">
+          {error.message}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isPending || !data) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+  }
+
+  const c = data.corpus;
+  const dateRange =
+    c.date_range[0] && c.date_range[1]
+      ? `${c.date_range[0]} – ${c.date_range[1]}`
+      : undefined;
+  const total = c.decision_count;
+  const totalSubjects = c.subject_distribution.reduce((a, b) => a + b.count, 0);
+
+  return (
+    <div className="space-y-6">
+      {/* Headline */}
+      <Card className="bg-gold-wash border-gold/40 shadow-sm">
+        <CardContent className="px-6 py-4">
+          <p className="font-display text-gold-deep text-lg font-semibold leading-snug">
+            ★ {c.headline}
+          </p>
+        </CardContent>
+      </Card>
+
+      {/* KPIs */}
+      <div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
+        <KPICard label="החלטות בקורפוס" value={String(c.decision_count)} />
+        <KPICard
+          label="סך תווים"
+          value={`${(c.total_chars / 1000).toFixed(0)}K`}
+        />
+        <KPICard
+          label="ממוצע להחלטה"
+          value={`${(c.avg_chars / 1000).toFixed(1)}K`}
+        />
+        <KPICard
+          label="דפוסי סגנון"
+          value={String(data.signature_phrases.items.length)}
+          caption={`מתוך ${data.contribution.total_patterns} שחולצו`}
+        />
+      </div>
+
+      {/* Subjects + anatomy */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card className="bg-surface border-rule shadow-sm">
+          <CardContent className="px-6 py-5">
+            <h3 className="text-navy text-lg mb-4">פיזור נושאים</h3>
+            <SubjectDonut
+              segments={c.subject_distribution}
+              total={totalSubjects}
+            />
+            {dateRange && (
+              <p className="text-[0.72rem] text-ink-muted mt-4">
+                טווח תאריכים: {dateRange}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="bg-surface border-rule shadow-sm">
+          <CardContent className="px-6 py-5">
+            <h3 className="text-navy text-lg mb-1">אנטומיה של החלטה ממוצעת</h3>
+            {data.anatomy.headline && (
+              <p className="text-[0.78rem] text-gold-deep mb-4">
+                {data.anatomy.headline}
+              </p>
+            )}
+            {data.anatomy.sections.length === 0 ? (
+              <p className="text-ink-muted text-sm">אין נתונים על מבנה</p>
+            ) : (
+              <ul className="space-y-2.5">
+                {data.anatomy.sections.map((s) => {
+                  const pct = Math.round(s.pct * 100);
+                  return (
+                    <li key={s.type} className="space-y-1">
+                      <div className="flex items-center justify-between text-[0.78rem]">
+                        <span className="text-ink-soft font-medium">
+                          {s.label}
+                        </span>
+                        <span className="text-ink-muted tabular-nums">
+                          {pct}% · {s.avg_chars.toLocaleString()} תווים
+                        </span>
+                      </div>
+                      <div className="h-2 rounded bg-rule-soft overflow-hidden">
+                        <div
+                          className="h-full bg-gradient-to-l from-gold to-gold-deep"
+                          style={{ width: `${pct}%` }}
+                        />
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Signature phrases */}
+      <Card className="bg-surface border-rule shadow-sm">
+        <CardContent className="px-6 py-5">
+          <h3 className="text-navy text-lg mb-1">ביטויי חתימה</h3>
+          {data.signature_phrases.headline && (
+            <p className="text-[0.78rem] text-gold-deep mb-4">
+              {data.signature_phrases.headline}
+            </p>
+          )}
+          {data.signature_phrases.items.length === 0 ? (
+            <p className="text-ink-muted text-sm">אין ביטויים שחולצו עדיין</p>
+          ) : (
+            <ol className="space-y-2">
+              {data.signature_phrases.items.slice(0, 12).map((p, i) => (
+                <li
+                  key={`${p.type}-${i}`}
+                  className="flex items-start gap-3 rounded border border-rule bg-parchment/40 px-3 py-2"
+                >
+                  <span className="text-[0.7rem] text-ink-muted tabular-nums shrink-0 mt-0.5">
+                    #{i + 1}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-ink leading-relaxed text-sm">{p.text}</p>
+                    {p.context && (
+                      <p className="text-[0.7rem] text-ink-muted mt-0.5">
+                        {p.context}
+                      </p>
+                    )}
+                  </div>
+                  <span
+                    className="
+                      shrink-0 text-[0.72rem] rounded-full
+                      bg-gold-wash text-gold-deep border border-gold/40
+                      px-2 py-0.5 tabular-nums
+                    "
+                  >
+                    ×{p.frequency}
+                  </span>
+                </li>
+              ))}
+            </ol>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

web-ui/src/components/training/subject-donut.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+/*
+ * Corpus subject-distribution donut.
+ *
+ * Pure CSS conic-gradient — same recipe as the cases StatusDonut, but
+ * uses a palette-of-gold instead of a status-tone palette. Ported from
+ * legal-ai/web/static/index.html `renderHero`.
+ */
+
+const DONUT_COLORS = [
+  "var(--color-navy)",
+  "var(--color-gold)",
+  "var(--color-info)",
+  "var(--color-warn)",
+  "var(--color-success)",
+  "var(--color-ink-muted)",
+  "var(--color-gold-deep)",
+];
+
+export function SubjectDonut({
+  segments,
+  total,
+}: {
+  segments: Array<{ label: string; count: number }>;
+  total: number;
+}) {
+  let pct = 0;
+  const parts = segments.map((s, i) => {
+    const start = total === 0 ? 0 : (pct / total) * 360;
+    pct += s.count;
+    const end = total === 0 ? 360 : (pct / total) * 360;
+    return { ...s, start, end, color: DONUT_COLORS[i % DONUT_COLORS.length] };
+  });
+
+  const background =
+    total === 0
+      ? "conic-gradient(var(--color-rule-soft) 0deg 360deg)"
+      : `conic-gradient(${parts
+          .map((p) => `${p.color} ${p.start}deg ${p.end}deg`)
+          .join(", ")})`;
+
+  return (
+    <div className="flex items-center gap-6">
+      <div
+        className="relative w-[140px] h-[140px] rounded-full shadow-sm shrink-0"
+        style={{ background }}
+        aria-label="פיזור נושאים בקורפוס"
+      >
+        <div className="absolute inset-[18px] bg-surface rounded-full flex flex-col items-center justify-center">
+          <span className="font-display text-2xl font-black text-navy leading-none">
+            {total}
+          </span>
+          <span className="text-[0.7rem] text-ink-muted mt-1">החלטות</span>
+        </div>
+      </div>
+
+      <ul className="flex flex-col gap-1.5 text-sm min-w-0">
+        {parts.map((p) => (
+          <li key={p.label} className="flex items-center gap-2">
+            <span
+              className="inline-block w-2.5 h-2.5 rounded-full shrink-0"
+              style={{ background: p.color }}
+            />
+            <span className="text-ink-soft truncate">{p.label}</span>
+            <span className="text-ink-muted tabular-nums ms-1">{p.count}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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,
+  });
+}

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

@@ -0,0 +1,42 @@
+/**
+ * System-level hooks: diagnostics + active task snapshot.
+ *
+ * The vanilla UI polled /api/system/diagnostics and /api/system/tasks on
+ * an interval. We replace the polling with TanStack Query's refetchInterval
+ * — same effect, but participates in the shared cache and survives route
+ * transitions without setting up its own setInterval bookkeeping.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { apiRequest } from "./client";
+
+export type DiagDoc = {
+  id: string;
+  title: string;
+  status: string;
+  case_number: string;
+  created_at: string | null;
+};
+
+export type Diagnostics = {
+  db_ok: boolean;
+  tables: Record<string, number | null>;
+  failed_documents: DiagDoc[];
+  stuck_documents: DiagDoc[];
+  active_tasks: Array<{
+    task_id: string;
+    filename: string;
+    status: string;
+    step: string;
+  }>;
+};
+
+export function useDiagnostics() {
+  return useQuery({
+    queryKey: ["system", "diagnostics"] as const,
+    queryFn: ({ signal }) =>
+      apiRequest<Diagnostics>("/api/system/diagnostics", { signal }),
+    refetchInterval: 10_000,
+    staleTime: 5_000,
+  });
+}

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

@@ -0,0 +1,151 @@
+/**
+ * Training / style corpus hooks.
+ *
+ * Endpoints touched (all under /api/training/):
+ *   - GET /style-report → the dashboard payload (corpus stats + anatomy
+ *     + signature phrases + per-decision contribution)
+ *   - GET /corpus → flat list of decisions for the corpus tab / compare tool
+ *   - GET /compare?a=UUID&b=UUID → side-by-side comparison
+ *   - DELETE /corpus/{id} → remove a decision from the corpus
+ */
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiRequest } from "./client";
+
+export type StyleReport = {
+  corpus: {
+    decision_count: number;
+    total_chars: number;
+    avg_chars: number;
+    date_range: [string | null, string | null];
+    decisions: Array<{
+      number: string;
+      date: string;
+      chars: number;
+      subjects: string[];
+    }>;
+    subject_distribution: Array<{ label: string; count: number }>;
+    headline: string;
+  };
+  anatomy: {
+    sections: Array<{
+      type: string;
+      label: string;
+      avg_chars: number;
+      pct: number;
+      coverage: number;
+    }>;
+    total_coverage: number;
+    headline: string;
+  };
+  signature_phrases: {
+    items: Array<{
+      type: string;
+      text: string;
+      context: string;
+      frequency: number;
+      examples: string[];
+    }>;
+    total_decisions: number;
+    top_display: string;
+    headline: string;
+  };
+  contribution: {
+    growth_curve: Array<{
+      decision_number: string;
+      date: string;
+      cumulative: number;
+    }>;
+    decision_contributions: unknown[];
+    total_patterns: number;
+    headline: string;
+  };
+};
+
+export type CorpusDecision = {
+  id: string;
+  decision_number: string;
+  decision_date: string;
+  subject_categories: string[];
+  chars: number;
+  created_at: string;
+};
+
+export type CompareResult = {
+  a: CompareSide;
+  b: CompareSide;
+  shared: PatternEntry[];
+  only_a: PatternEntry[];
+  only_b: PatternEntry[];
+};
+
+export type CompareSide = {
+  id: string;
+  decision_number: string;
+  decision_date: string;
+  chars: number;
+  subjects: string[];
+  sections: Array<{ type: string; chars: number }>;
+  patterns_count: number;
+};
+
+export type PatternEntry = {
+  id: string;
+  type: string;
+  text: string;
+  context: string;
+};
+
+export const trainingKeys = {
+  all: ["training"] as const,
+  report: () => [...trainingKeys.all, "style-report"] as const,
+  corpus: () => [...trainingKeys.all, "corpus"] as const,
+  compare: (a: string, b: string) =>
+    [...trainingKeys.all, "compare", a, b] as const,
+};
+
+export function useStyleReport() {
+  return useQuery({
+    queryKey: trainingKeys.report(),
+    queryFn: ({ signal }) =>
+      apiRequest<StyleReport>("/api/training/style-report", { signal }),
+    staleTime: 60_000,
+  });
+}
+
+export function useCorpus() {
+  return useQuery({
+    queryKey: trainingKeys.corpus(),
+    queryFn: ({ signal }) =>
+      apiRequest<CorpusDecision[]>("/api/training/corpus", { signal }),
+    staleTime: 60_000,
+  });
+}
+
+export function useCompare(a: string | null, b: string | null) {
+  return useQuery({
+    queryKey: trainingKeys.compare(a ?? "", b ?? ""),
+    queryFn: ({ signal }) =>
+      apiRequest<CompareResult>(
+        `/api/training/compare?a=${encodeURIComponent(a!)}&b=${encodeURIComponent(b!)}`,
+        { signal },
+      ),
+    enabled: Boolean(a && b && a !== b),
+    staleTime: Infinity,
+  });
+}
+
+export function useDeleteCorpusEntry() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiRequest<{ deleted: boolean }>(
+        `/api/training/corpus/${encodeURIComponent(id)}`,
+        { method: "DELETE" },
+      ),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: trainingKeys.corpus() });
+      qc.invalidateQueries({ queryKey: trainingKeys.report() });
+    },
+  });
+}