feat(precedents): add /precedents/[id] read-only detail page

Global search rows linked to /precedents/<case_law_id> but no route
existed, so clicking a result hit a Next 404 and React threw hydration
error #418. New page reads /api/precedent-library/{id} and shows
metadata, summary/headnote/key_quote, subject tags, and the full
halachot roll-up. "ערוך פרטים" opens the existing PrecedentEditSheet
(no duplicate edit UX).

Extracted ExtractedHalachotSection + ReviewStatusPill from the edit
sheet into a shared component so both surfaces render the same block.

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

web-ui/src/app/precedents/[id]/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { use, useState } from "react";
+import Link from "next/link";
+import { Pencil } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { usePrecedent } from "@/lib/api/precedent-library";
+import { PrecedentEditSheet } from "@/components/precedents/precedent-edit-sheet";
+import { ExtractedHalachotSection } from "@/components/precedents/extracted-halachot";
+
+const PRACTICE_AREA_LABELS: Record<string, string> = {
+  rishuy_uvniya: "רישוי ובנייה",
+  betterment_levy: "היטל השבחה",
+  compensation_197: "פיצויים (197)",
+};
+
+const SOURCE_TYPE_LABELS: Record<string, string> = {
+  court_ruling: "פסק דין",
+  appeals_committee: "ועדת ערר",
+};
+
+/* Next 16 breaking change: route params are now a Promise.
+ * The `use()` hook unwraps them inside a client component. */
+export default function PrecedentDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const [editing, setEditing] = useState(false);
+  const { data, isPending, error } = usePrecedent(id);
+
+  return (
+    <AppShell>
+      <section className="space-y-6" dir="rtl">
+        <header>
+          <nav className="text-[0.78rem] text-ink-muted mb-1">
+            <Link href="/" className="hover:text-gold-deep">בית</Link>
+            <span aria-hidden> · </span>
+            <Link href="/precedents" className="hover:text-gold-deep">ספריית פסיקה</Link>
+            <span aria-hidden> · </span>
+            <span className="text-navy">פרטי פסיקה</span>
+          </nav>
+        </header>
+
+        {error ? (
+          <Card className="bg-danger-bg border-danger/40">
+            <CardContent className="px-6 py-6 text-center space-y-3">
+              <p className="text-danger font-semibold">שגיאה בטעינת הפסיקה</p>
+              <p className="text-sm text-ink-muted">{error.message}</p>
+              <Button asChild variant="outline">
+                <Link href="/precedents">חזרה לספרייה</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        ) : isPending || !data ? (
+          <div className="space-y-3">
+            {[...Array(5)].map((_, i) => <Skeleton key={i} className="h-16 w-full" />)}
+          </div>
+        ) : (
+          <>
+            <Card className="bg-surface border-rule shadow-sm">
+              <CardContent className="px-6 py-5 space-y-4">
+                <div className="flex items-start justify-between gap-3 flex-wrap">
+                  <div className="min-w-0 flex-1">
+                    <h1 className="text-navy text-2xl font-semibold mb-1 leading-tight">
+                      {data.case_name || "—"}
+                    </h1>
+                    <div className="text-ink-muted text-sm font-mono" dir="ltr">
+                      {data.case_number}
+                    </div>
+                  </div>
+                  <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
+                    <Pencil className="w-3.5 h-3.5 me-1" /> ערוך פרטים
+                  </Button>
+                </div>
+
+                <div className="flex items-center gap-2 flex-wrap">
+                  {data.practice_area ? (
+                    <Badge variant="outline" className="text-[0.7rem]">
+                      {PRACTICE_AREA_LABELS[data.practice_area] ?? data.practice_area}
+                    </Badge>
+                  ) : null}
+                  {data.source_type ? (
+                    <Badge variant="outline" className="text-[0.7rem]">
+                      {SOURCE_TYPE_LABELS[data.source_type] ?? data.source_type}
+                    </Badge>
+                  ) : null}
+                  {data.precedent_level ? (
+                    <Badge variant="outline" className="text-[0.7rem]">
+                      {data.precedent_level}
+                    </Badge>
+                  ) : null}
+                  {data.is_binding ? (
+                    <Badge
+                      variant="outline"
+                      className="text-[0.7rem] bg-gold-wash text-gold-deep border-gold/40"
+                    >
+                      הלכה מחייבת
+                    </Badge>
+                  ) : null}
+                  {data.court ? (
+                    <span className="text-[0.78rem] text-ink-muted">{data.court}</span>
+                  ) : null}
+                  {data.date ? (
+                    <span className="text-[0.78rem] text-ink-muted tabular-nums" dir="ltr">
+                      {data.date.slice(0, 10)}
+                    </span>
+                  ) : null}
+                </div>
+
+                {data.headnote ? (
+                  <div>
+                    <h3 className="text-navy text-sm font-semibold m-0 mb-1">Headnote</h3>
+                    <p className="text-ink-soft text-sm leading-relaxed m-0">
+                      {data.headnote}
+                    </p>
+                  </div>
+                ) : null}
+
+                {data.summary ? (
+                  <div>
+                    <h3 className="text-navy text-sm font-semibold m-0 mb-1">תקציר</h3>
+                    <p className="text-ink-soft text-sm leading-relaxed m-0 whitespace-pre-line">
+                      {data.summary}
+                    </p>
+                  </div>
+                ) : null}
+
+                {(data as { key_quote?: string }).key_quote ? (
+                  <div>
+                    <h3 className="text-navy text-sm font-semibold m-0 mb-1">ציטוט מרכזי</h3>
+                    <blockquote className="text-ink-soft text-sm leading-relaxed border-r-2 border-gold pr-3 m-0">
+                      {(data as { key_quote?: string }).key_quote}
+                    </blockquote>
+                  </div>
+                ) : null}
+
+                {data.subject_tags?.length ? (
+                  <div className="flex items-center gap-1 flex-wrap pt-1">
+                    {data.subject_tags.map((t) => (
+                      <Badge key={t} variant="outline" className="text-[0.65rem]">
+                        {t}
+                      </Badge>
+                    ))}
+                  </div>
+                ) : null}
+              </CardContent>
+            </Card>
+
+            <Card className="bg-surface border-rule shadow-sm">
+              <CardContent className="px-6 py-5">
+                <ExtractedHalachotSection halachot={data.halachot ?? []} />
+              </CardContent>
+            </Card>
+          </>
+        )}
+
+        <PrecedentEditSheet
+          caseLawId={editing ? id : null}
+          onOpenChange={(open) => setEditing(open)}
+        />
+      </section>
+    </AppShell>
+  );
+}

web-ui/src/components/precedents/extracted-halachot.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import type { Halacha } from "@/lib/api/precedent-library";
+
+const RULE_TYPE_LABELS: Record<string, string> = {
+  binding: "הלכה מחייבת",
+  interpretive: "פרשני",
+  procedural: "פרוצדורלי",
+  obiter: "אמרת אגב",
+  application: "יישום הלכה",
+  persuasive: "משכנע",
+};
+
+type StatusFilter = "all" | "approved" | "pending" | "rejected";
+
+export function ReviewStatusPill({ status }: { status: Halacha["review_status"] }) {
+  if (status === "approved" || status === "published") {
+    return (
+      <Badge
+        variant="outline"
+        className="text-[0.65rem] bg-gold-wash text-gold-deep border-gold/40"
+      >
+        מאושרת
+      </Badge>
+    );
+  }
+  if (status === "pending_review") {
+    return (
+      <Badge
+        variant="outline"
+        className="text-[0.65rem] bg-rule-soft text-ink-muted"
+      >
+        ממתינה
+      </Badge>
+    );
+  }
+  return (
+    <Badge
+      variant="outline"
+      className="text-[0.65rem] bg-danger-bg text-danger border-danger/40"
+    >
+      נדחתה
+    </Badge>
+  );
+}
+
+/* Read-only roll-up of every halacha extracted from a precedent —
+ * approved + pending + rejected. The "ממתין לאישור" tab only surfaces
+ * pending items globally; this section is the per-case view. To act on
+ * an item (approve / edit / reject), go to the review tab — keeping the
+ * surfaces separated avoids duplicate review UX in two places. */
+export function ExtractedHalachotSection({ halachot }: { halachot: Halacha[] }) {
+  const [filter, setFilter] = useState<StatusFilter>("all");
+
+  const counts = useMemo(() => {
+    const c = { all: halachot.length, approved: 0, pending: 0, rejected: 0 };
+    for (const h of halachot) {
+      if (h.review_status === "approved" || h.review_status === "published") {
+        c.approved++;
+      } else if (h.review_status === "pending_review") {
+        c.pending++;
+      } else if (h.review_status === "rejected") {
+        c.rejected++;
+      }
+    }
+    return c;
+  }, [halachot]);
+
+  const sorted = useMemo(() => {
+    const matches = (h: Halacha) => {
+      if (filter === "all") return true;
+      if (filter === "approved") {
+        return h.review_status === "approved" || h.review_status === "published";
+      }
+      if (filter === "pending") return h.review_status === "pending_review";
+      return h.review_status === "rejected";
+    };
+    return halachot
+      .filter(matches)
+      .sort((a, b) => a.halacha_index - b.halacha_index);
+  }, [halachot, filter]);
+
+  if (!halachot.length) {
+    return (
+      <div className="rounded-lg border border-rule bg-rule-soft/40 p-4 text-center text-ink-muted text-sm">
+        עדיין לא חולצו הלכות מהפסיקה הזו.
+      </div>
+    );
+  }
+
+  const tabs: { key: StatusFilter; label: string; count: number }[] = [
+    { key: "all", label: "הכל", count: counts.all },
+    { key: "approved", label: "מאושרות", count: counts.approved },
+    { key: "pending", label: "ממתינות", count: counts.pending },
+    { key: "rejected", label: "נדחו", count: counts.rejected },
+  ];
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2 flex-wrap">
+        <h3 className="text-navy text-base font-semibold m-0">
+          הלכות שחולצו ({counts.all})
+        </h3>
+        <div className="flex items-center gap-1 flex-wrap" role="tablist">
+          {tabs.map((t) => {
+            const active = filter === t.key;
+            return (
+              <button
+                key={t.key}
+                type="button"
+                role="tab"
+                aria-selected={active}
+                onClick={() => setFilter(t.key)}
+                className={`text-[0.78rem] px-2.5 py-1 rounded border transition-colors tabular-nums ${
+                  active
+                    ? "bg-navy text-parchment border-navy"
+                    : "bg-surface text-ink-muted border-rule hover:bg-rule-soft"
+                }`}
+              >
+                {t.label} ({t.count})
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {!sorted.length ? (
+        <div className="text-center text-ink-muted text-sm py-6">
+          אין הלכות בקטגוריה זו.
+        </div>
+      ) : (
+        <ol className="space-y-3 list-none ps-0 m-0">
+          {sorted.map((h) => (
+            <li
+              key={h.id}
+              className="rounded-lg border border-rule bg-surface p-3 space-y-2"
+            >
+              <div className="flex items-start gap-2 flex-wrap">
+                <span className="text-[0.7rem] text-ink-muted tabular-nums font-mono">
+                  #{h.halacha_index}
+                </span>
+                <ReviewStatusPill status={h.review_status} />
+                <Badge variant="outline" className="text-[0.65rem]">
+                  {RULE_TYPE_LABELS[h.rule_type] ?? h.rule_type}
+                </Badge>
+                <Badge variant="outline" className="text-[0.65rem] tabular-nums">
+                  ביטחון {h.confidence.toFixed(2)}
+                </Badge>
+                {h.page_reference ? (
+                  <span className="text-[0.7rem] text-ink-muted ms-auto">
+                    {h.page_reference}
+                  </span>
+                ) : null}
+              </div>
+
+              <p
+                className="text-navy font-medium text-sm leading-relaxed m-0"
+                dir="rtl"
+              >
+                {h.rule_statement}
+              </p>
+
+              {h.reasoning_summary ? (
+                <p
+                  className="text-ink-soft text-[0.82rem] leading-relaxed m-0"
+                  dir="rtl"
+                >
+                  <span className="text-ink-muted text-[0.7rem]">היגיון: </span>
+                  {h.reasoning_summary}
+                </p>
+              ) : null}
+
+              {h.supporting_quote ? (
+                <blockquote
+                  className="text-ink-soft text-[0.82rem] leading-relaxed border-r-2 border-gold pr-3 m-0"
+                  dir="rtl"
+                >
+                  &ldquo;{h.supporting_quote}&rdquo;
+                </blockquote>
+              ) : null}
+
+              {h.subject_tags?.length ? (
+                <div className="flex items-center gap-1 flex-wrap pt-1">
+                  {h.subject_tags.map((t) => (
+                    <Badge key={t} variant="outline" className="text-[0.65rem]">
+                      {t}
+                    </Badge>
+                  ))}
+                </div>
+              ) : null}
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}

web-ui/src/components/precedents/precedent-edit-sheet.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { Save, Sparkles } from "lucide-react";
 import { toast } from "sonner";
 import {
   Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription,
 } from "@/components/ui/sheet";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -19,207 +18,13 @@ import {
   usePrecedent,
   useUpdatePrecedent,
   useRequestMetadataExtraction,
-  type Halacha,
   type PracticeArea,
   type SourceType,
 } from "@/lib/api/precedent-library";
 import {
   PRACTICE_AREAS, PRECEDENT_LEVELS, SOURCE_TYPES,
 } from "./practice-area";
-
-const RULE_TYPE_LABELS: Record<string, string> = {
-  binding: "הלכה מחייבת",
-  interpretive: "פרשני",
-  procedural: "פרוצדורלי",
-  obiter: "אמרת אגב",
-  application: "יישום הלכה",
-  persuasive: "משכנע",
-};
-
-type StatusFilter = "all" | "approved" | "pending" | "rejected";
-
-function ReviewStatusPill({ status }: { status: Halacha["review_status"] }) {
-  if (status === "approved" || status === "published") {
-    return (
-      <Badge
-        variant="outline"
-        className="text-[0.65rem] bg-gold-wash text-gold-deep border-gold/40"
-      >
-        מאושרת
-      </Badge>
-    );
-  }
-  if (status === "pending_review") {
-    return (
-      <Badge
-        variant="outline"
-        className="text-[0.65rem] bg-rule-soft text-ink-muted"
-      >
-        ממתינה
-      </Badge>
-    );
-  }
-  return (
-    <Badge
-      variant="outline"
-      className="text-[0.65rem] bg-danger-bg text-danger border-danger/40"
-    >
-      נדחתה
-    </Badge>
-  );
-}
-
-/* Read-only roll-up of every halacha extracted from this precedent —
- * approved + pending + rejected. The "ממתין לאישור" tab only surfaces
- * pending items globally; this section is the per-case view. To act on
- * an item (approve / edit / reject), go to the review tab — keeping the
- * surfaces separated avoids duplicate review UX in two places. */
-function ExtractedHalachotSection({ halachot }: { halachot: Halacha[] }) {
-  const [filter, setFilter] = useState<StatusFilter>("all");
-
-  const counts = useMemo(() => {
-    const c = { all: halachot.length, approved: 0, pending: 0, rejected: 0 };
-    for (const h of halachot) {
-      if (h.review_status === "approved" || h.review_status === "published") {
-        c.approved++;
-      } else if (h.review_status === "pending_review") {
-        c.pending++;
-      } else if (h.review_status === "rejected") {
-        c.rejected++;
-      }
-    }
-    return c;
-  }, [halachot]);
-
-  const sorted = useMemo(() => {
-    const matches = (h: Halacha) => {
-      if (filter === "all") return true;
-      if (filter === "approved") {
-        return h.review_status === "approved" || h.review_status === "published";
-      }
-      if (filter === "pending") return h.review_status === "pending_review";
-      return h.review_status === "rejected";
-    };
-    return halachot
-      .filter(matches)
-      .sort((a, b) => a.halacha_index - b.halacha_index);
-  }, [halachot, filter]);
-
-  if (!halachot.length) {
-    return (
-      <div className="rounded-lg border border-rule bg-rule-soft/40 p-4 text-center text-ink-muted text-sm">
-        עדיין לא חולצו הלכות מהפסיקה הזו.
-      </div>
-    );
-  }
-
-  const tabs: { key: StatusFilter; label: string; count: number }[] = [
-    { key: "all", label: "הכל", count: counts.all },
-    { key: "approved", label: "מאושרות", count: counts.approved },
-    { key: "pending", label: "ממתינות", count: counts.pending },
-    { key: "rejected", label: "נדחו", count: counts.rejected },
-  ];
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between gap-2 flex-wrap">
-        <h3 className="text-navy text-base font-semibold m-0">
-          הלכות שחולצו ({counts.all})
-        </h3>
-        <div className="flex items-center gap-1 flex-wrap" role="tablist">
-          {tabs.map((t) => {
-            const active = filter === t.key;
-            return (
-              <button
-                key={t.key}
-                type="button"
-                role="tab"
-                aria-selected={active}
-                onClick={() => setFilter(t.key)}
-                className={`text-[0.78rem] px-2.5 py-1 rounded border transition-colors tabular-nums ${
-                  active
-                    ? "bg-navy text-parchment border-navy"
-                    : "bg-surface text-ink-muted border-rule hover:bg-rule-soft"
-                }`}
-              >
-                {t.label} ({t.count})
-              </button>
-            );
-          })}
-        </div>
-      </div>
-
-      {!sorted.length ? (
-        <div className="text-center text-ink-muted text-sm py-6">
-          אין הלכות בקטגוריה זו.
-        </div>
-      ) : (
-        <ol className="space-y-3 list-none ps-0 m-0">
-          {sorted.map((h) => (
-            <li
-              key={h.id}
-              className="rounded-lg border border-rule bg-surface p-3 space-y-2"
-            >
-              <div className="flex items-start gap-2 flex-wrap">
-                <span className="text-[0.7rem] text-ink-muted tabular-nums font-mono">
-                  #{h.halacha_index}
-                </span>
-                <ReviewStatusPill status={h.review_status} />
-                <Badge variant="outline" className="text-[0.65rem]">
-                  {RULE_TYPE_LABELS[h.rule_type] ?? h.rule_type}
-                </Badge>
-                <Badge variant="outline" className="text-[0.65rem] tabular-nums">
-                  ביטחון {h.confidence.toFixed(2)}
-                </Badge>
-                {h.page_reference ? (
-                  <span className="text-[0.7rem] text-ink-muted ms-auto">
-                    {h.page_reference}
-                  </span>
-                ) : null}
-              </div>
-
-              <p
-                className="text-navy font-medium text-sm leading-relaxed m-0"
-                dir="rtl"
-              >
-                {h.rule_statement}
-              </p>
-
-              {h.reasoning_summary ? (
-                <p
-                  className="text-ink-soft text-[0.82rem] leading-relaxed m-0"
-                  dir="rtl"
-                >
-                  <span className="text-ink-muted text-[0.7rem]">היגיון: </span>
-                  {h.reasoning_summary}
-                </p>
-              ) : null}
-
-              {h.supporting_quote ? (
-                <blockquote
-                  className="text-ink-soft text-[0.82rem] leading-relaxed border-r-2 border-gold pr-3 m-0"
-                  dir="rtl"
-                >
-                  &ldquo;{h.supporting_quote}&rdquo;
-                </blockquote>
-              ) : null}
-
-              {h.subject_tags?.length ? (
-                <div className="flex items-center gap-1 flex-wrap pt-1">
-                  {h.subject_tags.map((t) => (
-                    <Badge key={t} variant="outline" className="text-[0.65rem]">
-                      {t}
-                    </Badge>
-                  ))}
-                </div>
-              ) : null}
-            </li>
-          ))}
-        </ol>
-      )}
-    </div>
-  );
-}
+import { ExtractedHalachotSection } from "./extracted-halachot";
 
 type Props = {
   caseLawId: string | null;