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/workflow-timeline.tsx

@@ -38,11 +38,7 @@ export function WorkflowTimeline({ status }: { status?: CaseStatus }) {
   const currentIdx = phaseIndexOf(status);
 
   return (
-    <ol className="relative space-y-4">
-      <div
-        className="absolute top-2 bottom-2 right-[11px] w-px bg-rule"
-        aria-hidden
-      />
+    <ol className="relative">
       {PHASES.map((phase, i) => {
         const state =
           currentIdx === -1 ? "pending"
@@ -51,9 +47,9 @@ export function WorkflowTimeline({ status }: { status?: CaseStatus }) {
           : "pending";
 
         const dotTone =
-          state === "done"    ? "bg-success border-success"
-          : state === "current" ? "bg-gold border-gold shadow-[0_0_0_4px_color-mix(in_oklab,var(--color-gold)_20%,transparent)]"
-          : "bg-surface border-rule";
+          state === "done"    ? "bg-success [box-shadow:0_0_0_1px_var(--color-success)]"
+          : state === "current" ? "bg-gold [box-shadow:0_0_0_1px_var(--color-gold)]"
+          : "bg-rule";
 
         const labelTone =
           state === "done"    ? "text-ink-soft"
@@ -66,34 +62,55 @@ export function WorkflowTimeline({ status }: { status?: CaseStatus }) {
           : "text-ink-muted/50";
 
         const PhaseIcon = phase.icon;
-        const StatusIcon = status ? STATUS_ICONS[status] : null;
+        const isLast = i === PHASES.length - 1;
 
         return (
-          <li key={phase.key} className="relative flex items-start gap-3 ps-7">
+          <li
+            key={phase.key}
+            className="relative flex items-center gap-3 py-2"
+          >
+            {/* connector line below the dot (mockup .tl .line) */}
+            {!isLast && (
+              <span
+                className="absolute top-[26px] w-px h-[20px] bg-rule"
+                style={{ insetInlineStart: "5px" }}
+                aria-hidden
+              />
+            )}
             <span
-              className={`absolute right-[5px] top-1 inline-block w-3 h-3 rounded-full border-2 ${dotTone}`}
+              className={`inline-block w-[11px] h-[11px] rounded-full border-2 border-surface shrink-0 ${dotTone}`}
               aria-hidden
             />
-            <div className="flex flex-col gap-0.5">
-              <span className={`text-sm flex items-center gap-1.5 ${labelTone}`}>
+            <div className="flex items-center gap-2 grow min-w-0">
+              <span className={`text-[0.84rem] flex items-center gap-1.5 ${labelTone}`}>
                 <PhaseIcon className={`w-3.5 h-3.5 shrink-0 ${iconTone}`} />
                 {phase.label}
               </span>
-              {state === "current" && status && (
-                <span className="text-[0.72rem] text-gold-deep flex items-center gap-1">
-                  {StatusIcon && <StatusIcon className="w-3 h-3 shrink-0" />}
-                  {STATUS_LABELS[status]}
-                </span>
-              )}
-              {state === "current" && status && STATUS_DESCRIPTIONS[status] && (
-                <span className="text-[0.65rem] text-ink-muted leading-snug mt-0.5">
-                  {STATUS_DESCRIPTIONS[status]}
-                </span>
-              )}
+              <span className="ms-auto text-[0.72rem] text-ink-muted tabular-nums shrink-0">
+                {state === "current" ? "כעת" : state === "done" ? "✓" : "—"}
+              </span>
             </div>
           </li>
         );
       })}
+      {/* current micro-status detail under the active phase */}
+      {currentIdx !== -1 && status && (
+        <li className="ps-[26px] pt-1">
+          <span className="text-[0.72rem] text-gold-deep flex items-center gap-1">
+            {STATUS_ICONS[status] &&
+              (() => {
+                const Icon = STATUS_ICONS[status];
+                return <Icon className="w-3 h-3 shrink-0" />;
+              })()}
+            {STATUS_LABELS[status]}
+          </span>
+          {STATUS_DESCRIPTIONS[status] && (
+            <span className="block text-[0.65rem] text-ink-muted leading-snug mt-0.5">
+              {STATUS_DESCRIPTIONS[status]}
+            </span>
+          )}
+        </li>
+      )}
     </ol>
   );
 }