Phase 3a: shadcn init + Home/Case List view

Initialize shadcn/ui (radix-nova preset) and wire its semantic tokens
to the editorial navy/cream/gold palette so primitives inherit the
judicial voice without per-component overrides.

Replace the Phase 2 live-probe with a real dashboard: KPI tiles,
conic-gradient status donut (ported from the vanilla renderHero),
and a TanStack Table cases list with search + sort. Add useCase(n)
hook with 5s staleTime/refetchInterval to replace the old manual
polling loop when Case Detail ships next.

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

web-ui/src/app/page.tsx

@@ -1,23 +1,54 @@
+"use client";
+
 import { AppShell } from "@/components/app-shell";
-import { CasesLiveProbe } from "@/components/cases/cases-live-probe";
+import { KPICards } from "@/components/cases/kpi-cards";
+import { StatusDonut } from "@/components/cases/status-donut";
+import { CasesTable } from "@/components/cases/cases-table";
+import { Card, CardContent } from "@/components/ui/card";
+import { useCases } from "@/lib/api/cases";
 
 export default function HomePage() {
+  const { data, isPending, error } = useCases(true);
+
   return (
     <AppShell>
-      <section className="space-y-6">
-        <header className="space-y-2">
-          <h1 className="text-navy">עוזר משפטי</h1>
-          <p className="text-ink-muted text-base max-w-2xl">
-            מערכת סיוע בניסוח החלטות לוועדת ערר לתכנון ובנייה — ניהול תיקים, חיפוש
-            סמנטי, וכלי כתיבה לפי ארכיטקטורת 12 הבלוקים.
-          </p>
+      <section className="space-y-8">
+        <header className="flex items-end justify-between gap-6 flex-wrap">
+          <div className="space-y-1.5">
+            <div className="text-[0.75rem] uppercase tracking-[0.12em] text-gold-deep">
+              ועדת ערר לתכנון ובנייה · ירושלים
+            </div>
+            <h1 className="text-navy">עוזר משפטי</h1>
+            <p className="text-ink-muted text-base max-w-2xl leading-relaxed">
+              לוח בקרה לניהול תיקי ערר, ניתוח סגנון, וכתיבת החלטות לפי ארכיטקטורת
+              12 הבלוקים.
+            </p>
+          </div>
         </header>
 
-        <hr className="border-0 h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
+        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
 
-        <div className="rounded-lg bg-surface shadow-sm p-6 border border-rule">
-          <h2 className="text-navy text-xl mb-3">פאזה 2 — חיבור חי ל-API</h2>
-          <CasesLiveProbe />
+        <KPICards cases={data} loading={isPending} />
+
+        <div className="grid gap-6 lg:grid-cols-[1fr_auto]">
+          <Card className="bg-surface border-rule shadow-sm">
+            <CardContent className="px-6 py-5">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-navy text-xl mb-0">רשימת תיקים</h2>
+                <span className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted">
+                  מעודכן חי
+                </span>
+              </div>
+              <CasesTable cases={data} loading={isPending} error={error} />
+            </CardContent>
+          </Card>
+
+          <Card className="bg-surface border-rule shadow-sm lg:w-[320px]">
+            <CardContent className="px-6 py-5">
+              <h2 className="text-navy text-lg mb-4">פיזור סטטוסים</h2>
+              <StatusDonut cases={data} />
+            </CardContent>
+          </Card>
         </div>
       </section>
     </AppShell>