Frontend redesign chunk 7: incident detail rebuild

Rewrite app/incidents/[id]/page.tsx to UI_REDESIGN.md §5.2. Header is now
type glyph + SeverityMark + active/resolved chip + a 27px title, with
elapsed time, path length (haversine sum over geocoded calls) and call
count as a single subline. Summary is promoted out of the old tab into a
first-class prose block (16.5px/1.58) — it's the artifact the product
sells, so it gets the best position instead of competing with Units/
Details behind a click. Units/Details tabs are gone; On scene / Cleared
render directly from units_active/units_cleared (chunk 3), Vehicles below.

New components/CallSpineEntry.tsx replaces CallRow for this page (CallRow
stays for the Archive table until chunk 12): time-ordered entries with a
numbered stop marker that matches the map's path stops via the same
sort-by-started_at-over-geocoded-calls index MapView's IncidentPathLayer
uses — the "shared index" from §2.4. Includes an inline play/scrub audio
player (lazy-fetches the signed URL on first play, same pattern CallRow
already used), transcript in sans prose instead of a font-mono <pre>, unit/
cleared-unit chips, and a paginating "N earlier calls" control. Thin/
status-only calls collapse to one line.

The incident map keeps the location_coords guard and now passes `calls`
through to MapView so its path polyline (chunk 5) renders here too.

Per UI_REDESIGN.md chunk 7.

drb-frontend/app/incidents/[id]/page.tsx

@@ -1,276 +1,255 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useMemo, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
 import { useIncident } from "@/lib/useIncidents";
 import { useCallsByIncident } from "@/lib/useCalls";
-import { useSystems } from "@/lib/useSystems";
 import { useAuth } from "@/components/AuthProvider";
-import { CallRow } from "@/components/CallRow";
+import { CallSpineEntry } from "@/components/CallSpineEntry";
 import { c2api } from "@/lib/c2api";
-import type { IncidentRecord } from "@/lib/types";
-import { TypeBadge } from "@/components/IncidentBadges";
-import { severityBadge } from "@/lib/severity";
+import { TypeGlyph } from "@/components/marks/TypeGlyph";
+import { SeverityMark } from "@/components/marks/SeverityMark";
+import { isKnownSeverity } from "@/lib/severity";
+import { Button } from "@/components/ui/Button";
+import type { CallRecord } from "@/lib/types";
 
 const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
 
-function StatusBadge({ status }: { status: IncidentRecord["status"] }) {
-  return (
-    <span className={`text-xs px-2 py-0.5 rounded-full font-mono ${
-      status === "active" ? "bg-green-900 text-green-300" : "bg-gray-800 text-gray-400"
-    }`}>
-      {status}
-    </span>
-  );
+const EARLIER_PAGE_SIZE = 8;
+
+function haversineKm(a: { lat: number; lng: number }, b: { lat: number; lng: number }): number {
+  const R = 6371;
+  const dLat = ((b.lat - a.lat) * Math.PI) / 180;
+  const dLng = ((b.lng - a.lng) * Math.PI) / 180;
+  const s =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos((a.lat * Math.PI) / 180) * Math.cos((b.lat * Math.PI) / 180) * Math.sin(dLng / 2) ** 2;
+  return R * 2 * Math.atan2(Math.sqrt(s), Math.sqrt(1 - s));
 }
 
-type Tab = "summary" | "units" | "details";
+function elapsedLabel(startedAt: string, active: boolean, updatedAt: string): string {
+  const start = new Date(startedAt).getTime();
+  const end = active ? Date.now() : new Date(updatedAt).getTime();
+  const mins = Math.max(0, Math.round((end - start) / 60000));
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  return `${hrs}h ${mins % 60}m`;
+}
 
 export default function IncidentDetailPage() {
   const params = useParams();
-  const id     = params.id as string;
+  const id = params.id as string;
   const router = useRouter();
 
-  const { incident, loading }            = useIncident(id);
+  const { incident, loading } = useIncident(id);
   const { calls, loading: callsLoading } = useCallsByIncident(id);
-  const { systems }                      = useSystems();
-  const { isAdmin }                      = useAuth();
+  const { isAdmin } = useAuth();
 
-  const [tab, setTab]                 = useState<Tab>("summary");
   const [summarizing, setSummarizing] = useState(false);
-  const [resolving, setResolving]     = useState(false);
+  const [resolving, setResolving] = useState(false);
+  const [earlierShown, setEarlierShown] = useState(EARLIER_PAGE_SIZE);
 
-  const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));
+  // Same ordering/filtering MapView's IncidentPathLayer uses, so the stop
+  // number shown on a spine entry matches the number on its map marker.
+  const geocodedCalls = useMemo(
+    () =>
+      calls
+        .filter((c): c is CallRecord & { location_coords: { lat: number; lng: number } } => !!c.location_coords)
+        .slice()
+        .sort((a, b) => a.started_at.localeCompare(b.started_at)),
+    [calls]
+  );
+  const stopNumberByCallId = useMemo(() => {
+    const m = new Map<string, number>();
+    geocodedCalls.forEach((c, i) => m.set(c.call_id, i + 1));
+    return m;
+  }, [geocodedCalls]);
+
+  const pathLengthKm = useMemo(() => {
+    let total = 0;
+    for (let i = 1; i < geocodedCalls.length; i++) {
+      total += haversineKm(geocodedCalls[i - 1].location_coords!, geocodedCalls[i].location_coords!);
+    }
+    return total;
+  }, [geocodedCalls]);
+
+  const newestFirst = useMemo(
+    () => calls.slice().sort((a, b) => b.started_at.localeCompare(a.started_at)),
+    [calls]
+  );
 
   async function handleResolve() {
     setResolving(true);
     try { await c2api.updateIncident(id, { status: "resolved" }); }
     catch (e) { console.error(e); }
-    finally   { setResolving(false); }
+    finally { setResolving(false); }
   }
 
   async function handleSummarize() {
     setSummarizing(true);
     try { await c2api.summarizeIncident(id); }
     catch (e) { console.error(e); }
-    finally   { setSummarizing(false); }
+    finally { setSummarizing(false); }
   }
 
-  if (loading)   return <p className="text-gray-500 text-sm font-mono p-6">Loading…</p>;
-  if (!incident) return <p className="text-gray-500 text-sm font-mono p-6">Incident not found.</p>;
+  if (loading) return <p className="text-ink-muted text-sm p-6">Loading…</p>;
+  if (!incident) return <p className="text-ink-muted text-sm p-6">Incident not found.</p>;
 
   const displayTags = incident.tags.filter((t) => t !== "auto-generated");
+  const unitsActive = incident.units_active ?? incident.units ?? [];
+  const unitsCleared = incident.units_cleared ?? [];
+  const active = incident.status === "active";
+
+  const visible = newestFirst.slice(0, earlierShown);
+  const remaining = newestFirst.length - visible.length;
 
   return (
     <div className="space-y-4">
-      {/* Back */}
       <button
         onClick={() => router.back()}
-        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors"
+        className="text-xs text-ink-muted hover:text-ink-2 transition-colors"
       >
         ← Incidents
       </button>
 
-      {/* Header */}
+      {/* Header — glyph, severity chip, status, title at 27px, elapsed/path/count */}
       <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
-        <div className="flex flex-col gap-1.5">
+        <div className="flex flex-col gap-1.5 min-w-0">
           <div className="flex items-center gap-2 flex-wrap">
-            <TypeBadge type={incident.type} />
-            <StatusBadge status={incident.status} />
-            {severityBadge(incident.severity)}
+            <TypeGlyph type={incident.type} size={20} className="text-ink-2" />
+            {isKnownSeverity(incident.severity) && <SeverityMark severity={incident.severity} showLabel size="md" />}
+            <span className={`text-xs px-2 py-0.5 rounded-full ${active ? "bg-accent/15 text-accent" : "bg-raised text-ink-2"}`}>
+              {active ? "Active" : "Resolved"}
+            </span>
           </div>
-          <h1 className="text-lg sm:text-xl font-bold text-white font-mono leading-snug">
+          <h1 className="text-[27px] font-semibold text-ink leading-tight">
             {incident.title ?? "Incident"}
           </h1>
+          <p className="text-xs text-ink-muted font-mono">
+            {elapsedLabel(incident.started_at, active, incident.updated_at)} elapsed
+            {pathLengthKm > 0 && <> · {pathLengthKm.toFixed(1)} km path</>}
+            {" · "}{incident.call_ids.length} call{incident.call_ids.length !== 1 ? "s" : ""}
+          </p>
         </div>
         {isAdmin && (
           <div className="flex gap-2 shrink-0 flex-wrap">
-            <button
-              onClick={handleSummarize}
-              disabled={summarizing}
-              className="text-xs bg-indigo-700 hover:bg-indigo-600 disabled:opacity-50 text-white px-3 py-1.5 rounded-lg transition-colors"
-            >
+            <Button variant="secondary" size="sm" onClick={handleSummarize} disabled={summarizing}>
               {summarizing ? "Generating…" : "Regenerate summary"}
-            </button>
-            {incident.status === "active" && (
-              <button
-                onClick={handleResolve}
-                disabled={resolving}
-                className="text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-50 text-gray-300 px-3 py-1.5 rounded-lg transition-colors"
-              >
-                {resolving ? "Resolving…" : "Resolve"}
-              </button>
+            </Button>
+            {active && (
+              <Button variant="secondary" size="sm" onClick={handleResolve} disabled={resolving}>
+                {resolving ? "Resolving…" : "Mark resolved"}
+              </Button>
             )}
           </div>
         )}
       </div>
 
-      {/* Tags */}
       {displayTags.length > 0 && (
         <div className="flex flex-wrap gap-1">
           {displayTags.map((t) => (
-            <span key={t} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded-full">
-              {t}
-            </span>
+            <span key={t} className="text-xs bg-raised text-ink-2 px-2 py-0.5 rounded-full">{t}</span>
           ))}
         </div>
       )}
 
-      {/* Map */}
-      {incident.location_coords && (
-        <div style={{ height: "280px" }}>
-          <MapView nodes={[]} activeCalls={[]} incidents={[incident]} />
-        </div>
-      )}
+      {/* Two columns: 828 / 612 per UI_REDESIGN.md §5.2 */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-5">
+        {/* Left */}
+        <div className="lg:col-span-3 space-y-4">
+          {incident.location_coords && (
+            <div style={{ height: "352px" }} className="rounded-xl overflow-hidden border border-line">
+              <MapView nodes={[]} activeCalls={[]} incidents={[incident]} calls={calls} />
+            </div>
+          )}
 
-      {/* Two-panel body */}
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
-
-        {/* Left: tabs — Summary / Units / Details */}
-        <div className="lg:col-span-2 bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col">
-          {/* Tab bar */}
-          <div className="flex border-b border-gray-800 shrink-0">
-            {(["summary", "units", "details"] as Tab[]).map((t) => (
-              <button
-                key={t}
-                onClick={() => setTab(t)}
-                className={`flex-1 px-4 py-2.5 text-xs font-mono capitalize transition-colors ${
-                  tab === t
-                    ? "text-white border-b-2 border-indigo-500 bg-gray-800/40"
-                    : "text-gray-500 hover:text-gray-300"
-                }`}
-              >
-                {t}
-              </button>
-            ))}
-          </div>
-
-          {/* Tab content */}
-          <div className="p-4 flex-1 overflow-y-auto">
-            {tab === "summary" && (
-              incident.summary ? (
-                <p className="text-sm text-gray-300 leading-relaxed">{incident.summary}</p>
-              ) : (
-                <p className="text-sm text-gray-600 font-mono italic">
-                  No summary yet.{" "}
-                  {isAdmin && (
-                    <button
-                      onClick={handleSummarize}
-                      disabled={summarizing}
-                      className="text-indigo-400 hover:text-indigo-300 not-italic transition-colors"
-                    >
-                      Generate now
-                    </button>
-                  )}
-                </p>
-              )
-            )}
-
-            {tab === "units" && (
-              <div className="space-y-4">
-                <div>
-                  <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Units</p>
-                  {incident.units?.length > 0 ? (
-                    <div className="flex flex-wrap gap-1">
-                      {incident.units.map((u) => (
-                        <span key={u} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded font-mono">{u}</span>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-xs text-gray-600 font-mono italic">None extracted.</p>
-                  )}
-                </div>
-                <div>
-                  <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Vehicles</p>
-                  {incident.vehicles?.length > 0 ? (
-                    <div className="flex flex-wrap gap-1">
-                      {incident.vehicles.map((v) => (
-                        <span key={v} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded font-mono">{v}</span>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-xs text-gray-600 font-mono italic">None extracted.</p>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {tab === "details" && (
-              <div className="space-y-3 text-xs font-mono">
-                {incident.location && (
-                  <div>
-                    <p className="text-gray-500 uppercase tracking-wider mb-1">Location</p>
-                    <p className="text-gray-300">{incident.location}</p>
-                  </div>
+          {/* Summary — first, in prose. Not a tab. */}
+          <div>
+            {incident.summary ? (
+              <p className="text-[16.5px] text-ink leading-[1.58]">{incident.summary}</p>
+            ) : (
+              <p className="text-sm text-ink-muted italic">
+                No summary yet.{" "}
+                {isAdmin && (
+                  <button onClick={handleSummarize} disabled={summarizing} className="text-accent not-italic hover:underline">
+                    Generate now
+                  </button>
                 )}
-                <div>
-                  <p className="text-gray-500 uppercase tracking-wider mb-1">Started</p>
-                  <p className="text-gray-300">{new Date(incident.started_at).toLocaleString()}</p>
-                </div>
-                <div>
-                  <p className="text-gray-500 uppercase tracking-wider mb-1">Last activity</p>
-                  <p className="text-gray-300">{new Date(incident.updated_at).toLocaleString()}</p>
-                </div>
-                {incident.talkgroup_ids?.length > 0 && (
-                  <div>
-                    <p className="text-gray-500 uppercase tracking-wider mb-1">Talkgroups</p>
-                    <p className="text-gray-300">{incident.talkgroup_ids.join(", ")}</p>
-                  </div>
-                )}
-                {incident.severity && (
-                  <div>
-                    <p className="text-gray-500 uppercase tracking-wider mb-1">Severity</p>
-                    <p className="text-gray-300 capitalize">{incident.severity}</p>
-                  </div>
-                )}
-                <div>
-                  <p className="text-gray-500 uppercase tracking-wider mb-1">Total calls</p>
-                  <p className="text-gray-300">{incident.call_ids.length}</p>
-                </div>
-              </div>
+              </p>
             )}
           </div>
-        </div>
 
-        {/* Right: calls */}
-        <div className="lg:col-span-3">
-          <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">
-            Calls ({calls.length})
-          </p>
-          {callsLoading ? (
-            <p className="text-gray-600 text-sm font-mono">Loading…</p>
-          ) : calls.length === 0 ? (
-            <p className="text-gray-600 text-sm font-mono">No calls linked yet.</p>
-          ) : (
-            <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
-                    <th className="px-4 py-2 text-left">Time</th>
-                    <th className="px-4 py-2 text-left">Talkgroup</th>
-                    <th className="px-4 py-2 text-left hidden sm:table-cell">System</th>
-                    <th className="px-4 py-2 text-left hidden sm:table-cell">Node</th>
-                    <th className="px-4 py-2 text-left">Duration</th>
-                    <th className="px-4 py-2 text-left">Audio</th>
-                    <th className="px-4 py-2"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {calls.map((c) => (
-                    <CallRow
-                      key={c.call_id}
-                      call={c}
-                      systemName={systemMap[c.system_id ?? ""]?.name}
-                      isAdmin={isAdmin}
-                    />
+          {/* On scene / Cleared */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-xs text-ink-muted uppercase tracking-wide mb-2">On scene</p>
+              {unitsActive.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {unitsActive.map((u) => (
+                    <span key={u} className="text-xs bg-raised text-ink-2 px-2 py-0.5 rounded font-mono">{u}</span>
                   ))}
-                </tbody>
-              </table>
+                </div>
+              ) : (
+                <p className="text-xs text-ink-muted italic">None extracted.</p>
+              )}
+            </div>
+            <div>
+              <p className="text-xs text-ink-muted uppercase tracking-wide mb-2">Cleared</p>
+              {unitsCleared.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {unitsCleared.map((u) => (
+                    <span key={u} className="text-xs bg-transparent border border-line text-ink-muted px-2 py-0.5 rounded font-mono line-through">{u}</span>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-ink-muted italic">None yet.</p>
+              )}
+            </div>
+          </div>
+
+          {incident.vehicles?.length > 0 && (
+            <div>
+              <p className="text-xs text-ink-muted uppercase tracking-wide mb-2">Vehicles</p>
+              <div className="flex flex-wrap gap-1">
+                {incident.vehicles.map((v) => (
+                  <span key={v} className="text-xs bg-raised text-ink-2 px-2 py-0.5 rounded font-mono">{v}</span>
+                ))}
+              </div>
             </div>
           )}
         </div>
 
+        {/* Right — the call spine */}
+        <div className="lg:col-span-2">
+          <p className="text-xs text-ink-muted uppercase tracking-wide mb-1">
+            Calls ({calls.length})
+          </p>
+          {callsLoading ? (
+            <p className="text-ink-muted text-sm">Loading…</p>
+          ) : calls.length === 0 ? (
+            <p className="text-ink-muted text-sm">No calls linked yet.</p>
+          ) : (
+            <div>
+              {visible.map((c) => (
+                <CallSpineEntry
+                  key={c.call_id}
+                  call={c}
+                  stopNumber={stopNumberByCallId.get(c.call_id)}
+                  isAdmin={isAdmin}
+                />
+              ))}
+              {remaining > 0 && (
+                <button
+                  onClick={() => setEarlierShown((n) => n + EARLIER_PAGE_SIZE)}
+                  className="text-xs text-accent hover:underline mt-2"
+                >
+                  {remaining} earlier call{remaining !== 1 ? "s" : ""}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );