feat(ui): IA redesign → production · /home pending-approvals card + Claude Design gate (2/17)

- /home: כרטיס "מה ממתין להכרעתך" ב-aside (מצביע INV-IA1 ל-/approvals; usePendingApprovals,
  ללא מונה-מתחרה) — תואם מוקאפ 04-home המאושר.
- web-ui/AGENTS.md: §"שער-עיצוב חובה — Claude Design קודם" — כל יצירת/שינוי עמוד-UI
  עוברת קודם דרך פרויקט Claude Design "עוזר משפטי — IA Redesign (X17)"
  (7a85b323-d880-4b6d-bac5-d4aa396fe93c) לאישור, ורק אז מוטמע (הנחיית חיים).

בדיקה: npx tsc --noEmit ✓.

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

web-ui/src/app/page.tsx

@@ -10,9 +10,13 @@ import { CasesTable } from "@/components/cases/cases-table";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useCases, type Case } from "@/lib/api/cases";
+import { usePendingApprovals } from "@/lib/api/chair";
 
 export default function HomePage() {
   const { data, isPending, error } = useCases(true);
+  // INV-IA1 pointer: surface the single approvals aggregate on the dashboard,
+  // deep-linking to /approvals (the owner) — never a competing client counter.
+  const { data: approvals } = usePendingApprovals();
 
   const { permits, levies } = useMemo(() => {
     const permits: Case[] = [];
@@ -99,6 +103,39 @@ export default function HomePage() {
           </div>
 
           <aside className="space-y-6 lg:sticky lg:top-6 lg:self-start">
+            {approvals && approvals.total_pending > 0 ? (
+              <Card className="bg-gold-wash border-gold/40 shadow-sm">
+                <CardContent className="px-6 py-5">
+                  <div className="flex items-center justify-between gap-3 mb-3">
+                    <h2 className="text-navy text-lg mb-0">מה ממתין להכרעתך</h2>
+                    <span className="text-2xl font-semibold text-gold-deep leading-none tabular-nums">
+                      {approvals.total_pending}
+                    </span>
+                  </div>
+                  <ul className="space-y-1.5 mb-4">
+                    {approvals.categories
+                      .filter((c) => c.count > 0)
+                      .map((c) => (
+                        <li
+                          key={c.key}
+                          className="flex items-center justify-between gap-2 text-[0.85rem] text-ink-soft"
+                        >
+                          <span>{c.label}</span>
+                          <span className="text-navy font-semibold tabular-nums">{c.count}</span>
+                        </li>
+                      ))}
+                  </ul>
+                  <Button
+                    asChild
+                    size="sm"
+                    className="bg-gold text-white hover:bg-gold-deep border-transparent w-full"
+                  >
+                    <Link href="/approvals">למרכז האישורים ←</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ) : null}
+
             <Card className="bg-surface border-rule shadow-sm">
               <CardContent className="px-6 py-5">
                 <h2 className="text-navy text-lg mb-4">פיזור סטטוסים</h2>