Click-to-listen on the live wall + HTTP Range on /media (server-26#233)

Backend: /media/calls/{id}/audio now honours a single HTTP Range
(bytes=a-b, a-, -n) with 206 + Content-Range, 416 for unsatisfiable,
and a 200 full body (Accept-Ranges: bytes) otherwise. The body is
streamed from GCS in 512 KiB span reads (storage.audio_object_size +
download_audio_range) instead of downloading the whole object first,
so a 600 s FLAC starts after one span and seeks fetch only what they
need. HMAC check and Firestore lookup unchanged and still first.

Frontend: InlinePlayer moved to components/InlinePlayer.tsx and now
drives lib/audioQueue.ts, a useSyncExternalStore store over ONE audio
element (one call plays at a time). Wall spine rows get play buttons
and a "Play incident" queue (oldest first) with the playing row
highlighted; map path-stop popups get a play button and the playing
stop gets an accent ring; rail cards get "play latest". Playback is
gated by canPlayAudio() (BUSINESS_MODEL section 3 / Gate A hook).
Nothing plays until clicked. Spine truncation is now stated
("showing latest 30 of M", show-all toggle, count outside the loaded
window) for server-26#239.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

drb-frontend/components/CallSpineEntry.tsx

@@ -8,105 +8,15 @@
  * memorable thing per §2.4: "where was he when he said that" is answered
  * by looking, not cross-referencing timestamps.
  */
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import type { CallRecord } from "@/lib/types";
-import { c2api } from "@/lib/c2api";
+import { InlinePlayer } from "@/components/InlinePlayer";
+import { hasAudio as callHasAudio } from "@/lib/audioQueue";
 import { isKnownSeverity, SEVERITY_COLORS } from "@/lib/severity";
 
 function fmtTime(iso: string): string {
   return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
-function fmtClock(s: number): string {
-  if (!Number.isFinite(s)) return "0:00";
-  const m = Math.floor(s / 60);
-  const r = Math.floor(s % 60);
-  return `${m}:${r.toString().padStart(2, "0")}`;
-}
-
-function InlinePlayer({ callId }: { callId: string }) {
-  const [url, setUrl] = useState<string | null>(null);
-  const [error, setError] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [playing, setPlaying] = useState(false);
-  const [current, setCurrent] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  async function ensureUrl() {
-    if (url || loading) return;
-    setLoading(true);
-    try {
-      const full = await c2api.getCall(callId);
-      setUrl(full.audio_url ?? null);
-      if (!full.audio_url) setError(true);
-    } catch {
-      setError(true);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function toggle() {
-    if (!url) {
-      await ensureUrl();
-      return;
-    }
-    const el = audioRef.current;
-    if (!el) return;
-    if (playing) el.pause();
-    else el.play();
-  }
-
-  // Once the URL lands, autoplay (the click that fetched it was the play intent).
-  useEffect(() => {
-    if (url && audioRef.current) audioRef.current.play().catch(() => {});
-  }, [url]);
-
-  if (error) {
-    return <span className="text-xs text-sev-major">Audio unavailable</span>;
-  }
-
-  return (
-    <div className="flex items-center gap-2 w-full max-w-xs" onClick={(e) => e.stopPropagation()}>
-      <button
-        onClick={toggle}
-        disabled={loading}
-        className="w-6 h-6 shrink-0 rounded-full bg-accent text-white flex items-center justify-center text-[10px] disabled:opacity-50"
-        title={playing ? "Pause" : "Play"}
-      >
-        {loading ? "…" : playing ? "❚❚" : "▶"}
-      </button>
-      <input
-        type="range"
-        min={0}
-        max={duration || 0}
-        value={current}
-        onChange={(e) => {
-          const t = Number(e.target.value);
-          if (audioRef.current) audioRef.current.currentTime = t;
-          setCurrent(t);
-        }}
-        className="flex-1 h-1 accent-accent"
-        disabled={!url}
-      />
-      <span className="text-[10px] font-mono text-ink-muted tabular-nums shrink-0">
-        {fmtClock(current)}
-      </span>
-      {url && (
-        <audio
-          ref={audioRef}
-          src={url}
-          onPlay={() => setPlaying(true)}
-          onPause={() => setPlaying(false)}
-          onEnded={() => setPlaying(false)}
-          onTimeUpdate={(e) => setCurrent(e.currentTarget.currentTime)}
-          onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
-          className="hidden"
-        />
-      )}
-    </div>
-  );
-}
 
 function StopMarker({ stopNumber, color }: { stopNumber?: number; color: string }) {
   if (!stopNumber) {
@@ -132,7 +42,7 @@ export function CallSpineEntry({
   isAdmin?: boolean;
 }) {
   const [expanded, setExpanded] = useState(false);
-  const hasAudio = !!(call.audio_gcs_uri || call.audio_url);
+  const hasAudio = callHasAudio(call);
   const transcript = call.transcript_corrected || call.transcript;
   const color = isKnownSeverity(call.severity) ? SEVERITY_COLORS[call.severity] : "var(--ink-muted)";
   const substantive = !!transcript || (call.units && call.units.length > 0) || !!call.location_coords;