feat(ui): WS6 — party accordion, full-width compose, status-hero overview (#206)

שלושת שינויי-ה-UI של WS6 לפי המוקאפים המאושרים (25b/03b/18b, X17):

1. טאב "טיעונים" (legal-arguments-panel) — אקורדיון ברמת-הצד, סגור
   כברירת-מחדל (type="multiple" ללא defaultValue). כל trigger מציג
   שם-צד + תת-כותרת + באדג'-מונה. בתוך כל צד נשמר הקיבוץ-לפי-קדימות
   והאקורדיון הפנימי ברמת-הטיעון.

2. טאב "עמדות וטענות" (compose) — רוחב-דף מלא: בוטל ה-grid 1fr/320px,
   ראיל "מסמכי התיק" הוסר (DocumentsPanel בסקירה הוא הבעלים היחיד)
   ועבר לפס-מסמכים מתקפל למעלה (סגור כברירת-מחדל). כרטיסי-הסוגיות
   2-up. פסיקה-מצורפת ושערי-הייצוא/העלאה שומרו (relocate, לא remove).
   מפת-StatusChip המקבילה הוסרה → StatusBadge המשותף (G2).

3. סטטוס רק בסקירה (overview) — StatusHero חדש (stepper אופקי + chip
   שלב-נוכחי + שינוי-סטטוס ידני + meta-strip), הבעלים היחיד של
   הסטטוס. WorkflowTimeline/StatusChanger/AgentStatusWidget ירדו משאר
   הטאבים; הטאבים האחרים רוחב-מלא. StatusBadge read-only נשאר ב-H1.

Invariants: INV-IA1 (בעלים-יחיד לסטטוס=hero), INV-IA3/G10 (כל שער-אנוש
נשמר במקום אחד — שינוי-סטטוס בסקירה, ייצוא/העלאה ב-compose),
INV-IA4 (compose=מרחב-עבודה ממוקד-משימה רוחב-מלא), INV-IA6 (מפת-סטטוסים
progressive-disclosure), INV-UI7/UI8, G2 (StatusBadge משותף, אין
מפת-סטטוס מקבילה).

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

web-ui/src/app/cases/[caseNumber]/page.tsx

@@ -9,26 +9,18 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { CaseHeader } from "@/components/cases/case-header";
 import { CaseEditDialog } from "@/components/cases/case-edit-dialog";
-import { WorkflowTimeline } from "@/components/cases/workflow-timeline";
-import { StatusGuide } from "@/components/cases/status-guide";
-import { StatusChanger } from "@/components/cases/status-changer";
+import { StatusHero } from "@/components/cases/status-hero";
 import { DocumentsPanel } from "@/components/cases/documents-panel";
 import { DraftsPanel } from "@/components/cases/drafts-panel";
 import { DecisionBlocksPanel } from "@/components/cases/decision-blocks-panel";
 import { LegalArgumentsPanel } from "@/components/cases/legal-arguments-panel";
 import { AgentActivityFeed } from "@/components/cases/agent-activity-feed";
 import { AgentActivityPreview } from "@/components/cases/agent-activity-preview";
-import { AgentStatusWidget } from "@/components/cases/agent-status-widget";
 import { UploadSheet } from "@/components/documents/upload-sheet";
-import { expectedOutcomes } from "@/lib/schemas/case";
 import { useCase, useStartWorkflow } from "@/lib/api/cases";
 import { toast } from "sonner";
 import { Play, Loader2 } from "lucide-react";
 
-const EXPECTED_OUTCOME_LABELS: Record<string, string> = Object.fromEntries(
-  expectedOutcomes.map((o) => [o.value, o.label]),
-);
-
 /*
  * Next 16 breaking change: route params are now a Promise.
  * The `use()` hook unwraps them inside a client component.
@@ -42,9 +34,6 @@ export default function CaseDetailPage({
   const { data, isPending, error, refetch } = useCase(caseNumber);
   const startWorkflow = useStartWorkflow(caseNumber);
   const canStartWorkflow = data?.status === "new" || data?.status === "documents_ready";
-  const expectedOutcomeLabel = data?.expected_outcome
-    ? EXPECTED_OUTCOME_LABELS[data.expected_outcome] ?? data.expected_outcome
-    : null;
 
   // Only take over the whole page when there is NO data to show. A transient
   // 5xx on the 5s background refetch must not blow away an already-loaded page.
@@ -138,73 +127,52 @@ export default function CaseDetailPage({
           <CaseHeader data={data} actions={bandActions} tabs={tabsList} />
         )}
 
-        {/* two-column wrap — main tab content (1fr) + rail (340px) */}
-        <div className="grid gap-6 lg:grid-cols-[1fr_340px] items-start mt-6">
-          <div className="min-w-0">
-            <TabsContent value="overview" className="mt-0 space-y-5">
+        {/* full-width tab content — status lives ONLY in the overview hero
+            (mockup 18b); the other tabs lose the status rail entirely (INV-IA1). */}
+        <div className="min-w-0 mt-6">
+          <TabsContent value="overview" className="mt-0 space-y-6">
+            {/* ★ STATUS HERO — the single home for case status (INV-IA1/INV-UI7) */}
+            <StatusHero caseNumber={caseNumber} data={data} />
+
+            {/* documents + agents two-column below the hero (mockup 18b) */}
+            <div className="grid gap-6 lg:grid-cols-2 items-start">
               <DocumentsPanel data={data} />
-
               <AgentActivityPreview caseNumber={caseNumber} />
-              {/* decision-editor CTA moved to the band actions (visible on all tabs) */}
-            </TabsContent>
+            </div>
+            {/* decision-editor CTA moved to the band actions (visible on all tabs) */}
+          </TabsContent>
 
-            <TabsContent value="arguments" className="mt-0">
-              <Card className="bg-surface border-rule shadow-sm">
-                <CardContent className="px-6 py-5">
-                  <LegalArgumentsPanel caseNumber={caseNumber} />
-                </CardContent>
-              </Card>
-            </TabsContent>
-
-            <TabsContent value="decision" className="mt-0">
-              <Card className="bg-surface border-rule shadow-sm">
-                <CardContent className="px-6 py-5">
-                  <DecisionBlocksPanel caseNumber={caseNumber} />
-                </CardContent>
-              </Card>
-            </TabsContent>
-
-            <TabsContent value="drafts" className="mt-0">
-              <Card className="bg-surface border-rule shadow-sm">
-                <CardContent className="px-6 py-5">
-                  <DraftsPanel caseNumber={caseNumber} status={data?.status} />
-                </CardContent>
-              </Card>
-            </TabsContent>
-
-            <TabsContent value="agents" className="mt-0">
-              <Card className="bg-surface border-rule shadow-sm">
-                <CardContent className="px-6 py-5">
-                  <AgentActivityFeed caseNumber={caseNumber} />
-                </CardContent>
-              </Card>
-            </TabsContent>
-          </div>
-
-          {/* rail — status timeline + status controls (mockup .rail) */}
-          <div className="space-y-5">
-            <Card className="bg-surface border-rule shadow-sm overflow-hidden p-0 h-fit">
-              <div className="px-5 py-3.5 border-b border-rule-soft bg-parchment text-[0.92rem] font-semibold text-navy">
-                סטטוס התיק
-              </div>
-              <CardContent className="px-5 py-4 space-y-4">
-                <AgentStatusWidget caseNumber={caseNumber} />
-                <WorkflowTimeline status={data?.status} />
-                {expectedOutcomeLabel && (
-                  <div className="border-t border-rule-soft pt-3">
-                    <dl className="flex justify-between items-center text-sm">
-                      <dt className="text-ink-muted">תוצאה צפויה</dt>
-                      <dd className="rounded-full bg-warn-bg text-warn text-[0.75rem] font-semibold px-3 py-0.5">
-                        {expectedOutcomeLabel}
-                      </dd>
-                    </dl>
-                  </div>
-                )}
-                <StatusChanger caseNumber={caseNumber} currentStatus={data?.status} />
-                <StatusGuide />
+          <TabsContent value="arguments" className="mt-0">
+            <Card className="bg-surface border-rule shadow-sm">
+              <CardContent className="px-6 py-5">
+                <LegalArgumentsPanel caseNumber={caseNumber} />
               </CardContent>
             </Card>
-          </div>
+          </TabsContent>
+
+          <TabsContent value="decision" className="mt-0">
+            <Card className="bg-surface border-rule shadow-sm">
+              <CardContent className="px-6 py-5">
+                <DecisionBlocksPanel caseNumber={caseNumber} />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="drafts" className="mt-0">
+            <Card className="bg-surface border-rule shadow-sm">
+              <CardContent className="px-6 py-5">
+                <DraftsPanel caseNumber={caseNumber} status={data?.status} />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="agents" className="mt-0">
+            <Card className="bg-surface border-rule shadow-sm">
+              <CardContent className="px-6 py-5">
+                <AgentActivityFeed caseNumber={caseNumber} />
+              </CardContent>
+            </Card>
+          </TabsContent>
         </div>
       </Tabs>
     </AppShell>