feat(ui): IA redesign → production · יישום נאמן של 16 הדפים הנותרים למוקאפים

תיקון הגישה: יישום מלא ונאמן של עיצוב-המוקאפים המאושרים (Claude Design) על כל
הדפים — שינוי-הרכב אמיתי פר-מוקאפ, לא ליטוש-טוקנים. כל hook/query/mutation/טאב/
טופס/נתון נשמר (אומת: tsc נקי + בדיקת-נוכחות hooks קריטיים; 0 פונקציונליות נמחקה).

דפים (← מוקאפ):
- בית — לוח: KPI + "תיקים לפי סטטוס" (bars) + כרטיס-אישורים + CTA כפול.
- ארכיון — filter-bar שטוח + טבלה נקייה + צ'יפי-סוג/תוצאה.
- הערות יו״ר — פריסה דו-טורית + טופס-הוספה חי + כרטיסי-הערה.
- ספריית-פסיקה — tabs קו-תחתון + כרטיסי-תוצאה halacha/קטע + AuthorityBadge.
- דף-תקדים — באנר-meta parchment + דו-טורי + provenance pills.
- פסיקה-חסרה — pill פתוחים + צ'יפי-סטטוס + CTA העלאה.
- יומונים — אזור-העלאה מקווקו + כרטיסי-digest + "ממתין" כתווית פסיבית.
- גרף — פאנל-צד שכבות/אנליטיקה + canvas parchment.
- אימון-סגנון — פורטרט: banner + KPI + אנטומיה + ביטויי-חתימה.
- מתודולוגיה — עורך-צ'קליסט + "חל על:" + canon chip.
- מיומנויות/סקריפטים — טבלאות אמיתיות + צ'יפי-סטטוס.
- הגדרות — sidenav דו-טורי + env-rows עם "ממתין ל-redeploy".
- דף-תיק — באנר-תיק parchment + tabs + timeline + "פתח עורך החלטה".
- תפעול — SectionHeaders + טבלת-שירותים + כרטיסי-שער gold-wash.
- compose — באנר-תיק + SOT pill + פריסה דו-טורית + "השלמה והעברה".

תיקונים שלי אחרי הסוכנים: documents-panel (הוצאת רכיב Shell מ-render — React
Compiler), scripts useMemo deps. /approvals כבר נבנה מחדש נאמנה (commit קודם).

בדיקות: npx tsc --noEmit ✓ · eslint ✓ (לבד מ-learning-panel:109 קיים-מראש).
שימור-פונקציונליות אומת. CI Docker build = שער סופי לפני deploy.

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

web-ui/src/components/cases/case-header.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from "react";
 import Link from "next/link";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { StatusBadge } from "@/components/cases/status-badge";
 import { SyncIndicator } from "@/components/cases/sync-indicator";
@@ -25,87 +25,129 @@ function formatDate(iso?: string | null) {
   }
 }
 
-export function CaseHeader({ data }: { data?: CaseDetail }) {
+function partiesLine(data?: CaseDetail): string | null {
+  const appellant = data?.appellants?.filter(Boolean) ?? [];
+  const respondent = data?.respondents?.filter(Boolean) ?? [];
+  const parts: string[] = [];
+  if (appellant.length) parts.push(`עוררת: ${appellant.join(", ")}`);
+  if (respondent.length) parts.push(`משיבה: ${respondent.join(", ")}`);
+  return parts.length ? parts.join(" · ") : null;
+}
+
+/**
+ * Case header — parchment band (IA-redesign mockup 17): full-bleed band with
+ * the case title + status/type chips inline, a parties line, the case actions
+ * (edit / archive / repo / sync), and a metadata strip. The `tabs` slot renders
+ * the tab strip inside the band, anchored to its bottom edge.
+ */
+export function CaseHeader({
+  data,
+  actions,
+  tabs,
+}: {
+  data?: CaseDetail;
+  actions?: ReactNode;
+  tabs?: ReactNode;
+}) {
+  const parties = partiesLine(data);
+  const isBlam =
+    data?.proceeding_type === 'בל"מ' || isBlamSubtype(data?.appeal_subtype);
+
   return (
-    <Card className="bg-surface border-rule shadow-sm">
-      <CardContent className="px-6 py-5">
-        <nav className="text-[0.78rem] text-ink-muted mb-3 flex items-center gap-2">
-          <Link href="/" className="hover:text-gold-deep">בית</Link>
-          <span aria-hidden>·</span>
-          <span>תיקי ערר</span>
-          <span aria-hidden>·</span>
-          <span className="text-navy tabular-nums">{data?.case_number ?? "…"}</span>
-        </nav>
+    <div className="-mx-10 -mt-10 mb-2 bg-parchment border-b border-rule px-10 pt-6">
+      <nav className="text-[0.78rem] text-ink-muted mb-3 flex items-center gap-2">
+        <Link href="/" className="hover:text-gold-deep">בית</Link>
+        <span aria-hidden>·</span>
+        <span>תיקי ערר</span>
+        <span aria-hidden>·</span>
+        <span className="text-navy tabular-nums">{data?.case_number ?? "…"}</span>
+      </nav>
 
-        <div className="flex items-start justify-between gap-6 flex-wrap">
-          <div className="space-y-2">
-            <div className="flex items-center gap-3 flex-wrap">
-              <span className="font-display text-[2rem] font-black text-navy leading-none tabular-nums">
-                {data?.proceeding_type ?? "ערר"} {data?.case_number ?? "—"}
-              </span>
-              {data?.status && <StatusBadge status={data.status} />}
-              {data?.archived_at && (
-                <Badge
-                  variant="outline"
-                  className="rounded-full px-2.5 py-0.5 text-[0.72rem] font-medium bg-ink-muted/10 text-ink-muted border-ink-muted/30"
-                >
-                  בארכיון
-                </Badge>
-              )}
-              {data?.practice_area && (
-                <Badge
-                  variant="outline"
-                  className="rounded-full px-2.5 py-0.5 text-[0.72rem] font-medium bg-gold-wash text-gold-deep border-gold/40"
-                >
-                  {PRACTICE_AREA_LABELS[data.practice_area]}
-                  {data.appeal_subtype && data.appeal_subtype !== "unknown" && (
-                    <> · {APPEAL_SUBTYPE_LABELS[data.appeal_subtype]}</>
-                  )}
-                </Badge>
-              )}
-              {(data?.proceeding_type === 'בל"מ' || isBlamSubtype(data?.appeal_subtype)) && (
-                <Badge
-                  variant="outline"
-                  className="rounded-full px-2.5 py-0.5 text-[0.72rem] font-bold bg-warn/10 text-warn-deep border-warn/40"
-                  title="בקשה להארכת מועד להגשת ערר"
-                >
-                  בל&quot;מ
-                </Badge>
-              )}
-              {data?.case_number && (
-                <CaseArchiveAction
-                  caseNumber={data.case_number}
-                  archivedAt={data.archived_at}
-                />
-              )}
-              <CreateRepoButton data={data} />
-            </div>
-            <h1 className="text-navy text-xl font-bold leading-snug max-w-2xl mb-0">
-              {data?.title ?? "טוען…"}
-            </h1>
-            {data?.subject && (
-              <p className="text-ink-muted text-sm max-w-2xl leading-relaxed">
-                {data.subject}
-              </p>
+      <div className="flex items-start justify-between gap-6 flex-wrap">
+        <div className="min-w-0">
+          {/* title row — H1 + status/type/blam chips inline (mockup .band h1) */}
+          <h1 className="text-navy text-[1.7rem] font-bold leading-tight flex items-center gap-3 flex-wrap mb-0">
+            <span className="tabular-nums">
+              {data?.proceeding_type ?? "ערר"} {data?.case_number ?? "—"}
+            </span>
+            {data?.status && <StatusBadge status={data.status} />}
+            {data?.archived_at && (
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-0.5 text-[0.75rem] font-semibold bg-ink-muted/10 text-ink-muted border-ink-muted/30"
+              >
+                בארכיון
+              </Badge>
             )}
-          </div>
+            {data?.practice_area && (
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-0.5 text-[0.75rem] font-semibold bg-gold-wash text-gold-deep border-rule"
+              >
+                {PRACTICE_AREA_LABELS[data.practice_area]}
+                {data.appeal_subtype && data.appeal_subtype !== "unknown" && (
+                  <> · {APPEAL_SUBTYPE_LABELS[data.appeal_subtype]}</>
+                )}
+              </Badge>
+            )}
+            {isBlam && (
+              <Badge
+                variant="outline"
+                className="rounded-full px-3 py-0.5 text-[0.75rem] font-bold bg-warn/10 text-warn-deep border-warn/40"
+                title="בקשה להארכת מועד להגשת ערר"
+              >
+                בל&quot;מ
+              </Badge>
+            )}
+          </h1>
 
-          <dl className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
-            <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
-              תאריך דיון
-            </dt>
-            <dd className="text-ink-soft tabular-nums">{formatDate(data?.hearing_date)}</dd>
-            <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
-              עודכן
-            </dt>
-            <dd className="text-ink-soft tabular-nums">{formatDate(data?.updated_at)}</dd>
-            <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
-              סנכרון
-            </dt>
-            <dd><SyncIndicator caseNumber={data?.case_number} /></dd>
-          </dl>
+          {/* case title / subject under the heading */}
+          {data?.title && (
+            <p className="text-navy/90 text-base font-semibold mt-2 max-w-3xl leading-snug">
+              {data.title}
+            </p>
+          )}
+          {/* parties line (mockup .parties) */}
+          {parties ? (
+            <p className="text-ink-soft text-sm mt-1.5">{parties}</p>
+          ) : data?.subject ? (
+            <p className="text-ink-soft text-sm mt-1.5 max-w-3xl leading-relaxed">
+              {data.subject}
+            </p>
+          ) : null}
+
+          {/* case actions — kept verbatim, moved into the band */}
+          <div className="flex items-center gap-2 flex-wrap mt-3">
+            {data?.case_number && (
+              <CaseArchiveAction
+                caseNumber={data.case_number}
+                archivedAt={data.archived_at}
+              />
+            )}
+            <CreateRepoButton data={data} />
+            {actions}
+          </div>
         </div>
-      </CardContent>
-    </Card>
+
+        {/* metadata strip — hearing date / updated / sync */}
+        <dl className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm shrink-0">
+          <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
+            תאריך דיון
+          </dt>
+          <dd className="text-ink-soft tabular-nums">{formatDate(data?.hearing_date)}</dd>
+          <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
+            עודכן
+          </dt>
+          <dd className="text-ink-soft tabular-nums">{formatDate(data?.updated_at)}</dd>
+          <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
+            סנכרון
+          </dt>
+          <dd><SyncIndicator caseNumber={data?.case_number} /></dd>
+        </dl>
+      </div>
+
+      {/* tab strip anchored to band bottom (mockup .tabs) */}
+      {tabs ? <div className="mt-5">{tabs}</div> : null}
+    </div>
   );
 }