fix(frontend): finish the token migration — raw grey classes -> theme tokens

UI_REDESIGN chunk 4 was never finished: 39 app/component files still used
raw Tailwind greys, kept readable in light mode only by the !important
override sheet. In dark mode text-gray-600 is ~2.3:1 on surface, and the
light override maps it to #94a3b8 (~2.6:1 on white) — unreadable in both.

Mechanical mapping (886 classes): gray-100/200 -> ink, 300/400 -> ink-2,
500/600/700 -> ink-muted, bg 950/900/800 -> page/surface/raised,
border 800 -> line, 700/600 -> line-strong, plus hover/divide/placeholder.
Alpha suffixes kept (tokens are color-mix, so /60 works). bg-gray-700,
text-white and marketing pages left alone. text-[9px] -> text-[10px].

Frontend unverified: no Node on the authoring box (#207).

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

drb-frontend/components/admin/ReplayTab.tsx

@@ -24,9 +24,9 @@ const MODES: { key: ReplayMode; label: string; help: string }[] = [
 const SIGNAL_RESOLVES = ["units_cleared", "llm_closure", "reassignment", "children_resolved"];
 
 const input =
-  "bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500";
+  "bg-raised border border-line-strong rounded-lg px-3 py-1.5 text-white text-sm font-mono focus:outline-none focus:border-indigo-500";
 const btn =
-  "bg-gray-800 hover:bg-gray-700 disabled:opacity-50 border border-gray-700 text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors";
+  "bg-raised hover:bg-gray-700 disabled:opacity-50 border border-line-strong text-white text-sm font-mono px-4 py-1.5 rounded-lg transition-colors";
 
 function toLocalInput(d: Date): string {
   const pad = (n: number) => String(n).padStart(2, "0");
@@ -88,18 +88,18 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
   const canStart = est && !est.truncated && est.calls > 0 && !busy && (mode !== "reuse" || sourceRun);
 
   return (
-    <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-4">
+    <div className="bg-surface border border-line rounded-xl p-4 space-y-4">
       <div className="flex flex-wrap items-end gap-4">
         <div>
-          <label className="text-xs text-gray-400 block mb-1">From</label>
+          <label className="text-xs text-ink-2 block mb-1">From</label>
           <input type="datetime-local" value={from} max={to} onChange={(e) => setFrom(e.target.value)} className={input} />
         </div>
         <div>
-          <label className="text-xs text-gray-400 block mb-1">To</label>
+          <label className="text-xs text-ink-2 block mb-1">To</label>
           <input type="datetime-local" value={to} min={from} onChange={(e) => setTo(e.target.value)} className={input} />
         </div>
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Label</label>
+          <label className="text-xs text-ink-2 block mb-1">Label</label>
           <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="what changed?" className={`${input} w-56`} />
         </div>
       </div>
@@ -109,14 +109,14 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
           <label key={m.key} className="flex items-start gap-2 text-sm font-mono cursor-pointer">
             <input type="radio" checked={mode === m.key} onChange={() => setMode(m.key)} className="mt-1" />
             <span className="text-white">{m.label}</span>
-            <span className="text-gray-500 text-xs mt-0.5">{m.help}</span>
+            <span className="text-ink-muted text-xs mt-0.5">{m.help}</span>
           </label>
         ))}
       </div>
 
       {mode === "reuse" && (
         <div>
-          <label className="text-xs text-gray-400 block mb-1">Reuse extraction from</label>
+          <label className="text-xs text-ink-2 block mb-1">Reuse extraction from</label>
           <select value={sourceRun} onChange={(e) => setSourceRun(e.target.value)} className={input}>
             <option value="">— pick a finished run —</option>
             {sources.map((r) => (
@@ -125,15 +125,15 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
               </option>
             ))}
           </select>
-          <p className="text-xs text-gray-500 mt-1">Set the range to match that run; calls outside it are skipped.</p>
+          <p className="text-xs text-ink-muted mt-1">Set the range to match that run; calls outside it are skipped.</p>
         </div>
       )}
 
       {systems.length > 1 && (
         <div className="flex flex-wrap gap-3">
-          <span className="text-xs text-gray-400">Systems (none = all):</span>
+          <span className="text-xs text-ink-2">Systems (none = all):</span>
           {systems.map((s) => (
-            <label key={s.system_id} className="flex items-center gap-1 text-xs font-mono text-gray-300 cursor-pointer">
+            <label key={s.system_id} className="flex items-center gap-1 text-xs font-mono text-ink-2 cursor-pointer">
               <input type="checkbox" checked={systemIds.includes(s.system_id)} onChange={() => toggleSystem(s.system_id)} />
               {s.name}
             </label>
@@ -154,7 +154,7 @@ function NewRunForm({ runs, busy, onStarted }: { runs: ReplayRun[]; busy: boolea
       </div>
 
       {est && (
-        <p className="text-sm font-mono text-gray-300">
+        <p className="text-sm font-mono text-ink-2">
           {est.truncated ? (
             <span className="text-red-400">More than {est.max_calls} calls — narrow the range.</span>
           ) : (
@@ -193,15 +193,15 @@ function RunsTable({
     onChanged();
   }
 
-  if (!runs.length) return <p className="text-sm text-gray-500 font-mono">No runs yet.</p>;
+  if (!runs.length) return <p className="text-sm text-ink-muted font-mono">No runs yet.</p>;
 
-  const th = "text-left text-xs text-gray-500 font-normal px-2 py-1.5 whitespace-nowrap";
+  const th = "text-left text-xs text-ink-muted font-normal px-2 py-1.5 whitespace-nowrap";
   const td = "px-2 py-1.5 whitespace-nowrap";
   return (
     <div className="overflow-x-auto">
       <table className="w-full text-sm font-mono">
         <thead>
-          <tr className="border-b border-gray-800">
+          <tr className="border-b border-line">
             <th className={th}>Run</th>
             <th className={th}>Range</th>
             <th className={th}>Status</th>
@@ -222,13 +222,13 @@ function RunsTable({
               <tr
                 key={r.run_id}
                 onClick={() => onSelect(r.run_id)}
-                className={`border-b border-gray-800/60 cursor-pointer ${selected === r.run_id ? "bg-gray-800/60" : "hover:bg-gray-900"}`}
+                className={`border-b border-line/60 cursor-pointer ${selected === r.run_id ? "bg-raised/60" : "hover:bg-raised"}`}
               >
                 <td className={td}>
                   <div className="text-white">{r.label || r.run_id}</div>
-                  <div className="text-xs text-gray-500">{r.mode} · {r.git_sha?.slice(0, 7)} · {fmtTime(r.created_at)}</div>
+                  <div className="text-xs text-ink-muted">{r.mode} · {r.git_sha?.slice(0, 7)} · {fmtTime(r.created_at)}</div>
                 </td>
-                <td className={`${td} text-xs text-gray-400`}>{fmtTime(r.date_from)} → {fmtTime(r.date_to)}</td>
+                <td className={`${td} text-xs text-ink-2`}>{fmtTime(r.date_from)} → {fmtTime(r.date_to)}</td>
                 <td className={td}>
                   {running ? (
                     <span className="text-amber-400">{r.progress.done}/{r.progress.total}</span>
@@ -245,7 +245,7 @@ function RunsTable({
                     <>
                       <span className="text-green-400">{sum(m.resolved_via, SIGNAL_RESOLVES)}</span>
                       {" / "}
-                      <span className="text-gray-400">{m.resolved_via.idle_timeout ?? 0}</span>
+                      <span className="text-ink-2">{m.resolved_via.idle_timeout ?? 0}</span>
                     </>
                   ) : "—"}
                 </td>
@@ -255,7 +255,7 @@ function RunsTable({
                   {running ? (
                     <button onClick={() => cancel(r.run_id)} className="text-xs text-amber-400 hover:text-amber-300">cancel</button>
                   ) : (
-                    <button onClick={() => remove(r.run_id)} className="text-xs text-gray-500 hover:text-red-400">delete</button>
+                    <button onClick={() => remove(r.run_id)} className="text-xs text-ink-muted hover:text-red-400">delete</button>
                   )}
                 </td>
               </tr>
@@ -278,21 +278,21 @@ function CallLine({ call }: { call: ReplayCallRow }) {
     } catch { /* audio is a convenience */ }
   }
   return (
-    <div className="py-1.5 border-t border-gray-800/60 text-xs font-mono">
-      <div className="flex flex-wrap gap-2 text-gray-500">
+    <div className="py-1.5 border-t border-line/60 text-xs font-mono">
+      <div className="flex flex-wrap gap-2 text-ink-muted">
         <span>{fmtTime(call.started_at)}</span>
         <span>{call.talkgroup_name}</span>
         {call.corr_path.map((p, i) => <span key={i} className="text-indigo-400">{p}</span>)}
         {call.units?.length ? <span>units {call.units.join(", ")}</span> : null}
         {call.cleared_units?.length ? <span className="text-green-400">cleared {call.cleared_units.join(", ")}</span> : null}
-        {call.skip_reason && <span className="text-gray-600">{call.skip_reason}</span>}
+        {call.skip_reason && <span className="text-ink-muted">{call.skip_reason}</span>}
         {audio ? (
           <audio src={audio} controls autoPlay className="h-6" />
         ) : (
-          <button onClick={play} className="text-gray-400 hover:text-white">▶ audio</button>
+          <button onClick={play} className="text-ink-2 hover:text-white">▶ audio</button>
         )}
       </div>
-      <div className="text-gray-200 mt-0.5">{call.transcript || <span className="text-gray-600">(no transcript)</span>}</div>
+      <div className="text-ink mt-0.5">{call.transcript || <span className="text-ink-muted">(no transcript)</span>}</div>
     </div>
   );
 }
@@ -301,13 +301,13 @@ function IncidentCard({ inc }: { inc: ReplayIncident }) {
   const [open, setOpen] = useState(false);
   const signal = inc.resolved_via && SIGNAL_RESOLVES.includes(inc.resolved_via);
   return (
-    <div className="bg-gray-900 border border-gray-800 rounded-lg px-3 py-2">
+    <div className="bg-surface border border-line rounded-lg px-3 py-2">
       <button onClick={() => setOpen(!open)} className="w-full text-left flex flex-wrap items-center gap-x-3 gap-y-1 text-sm font-mono">
-        <span className="text-gray-500">{open ? "▾" : "▸"}</span>
+        <span className="text-ink-muted">{open ? "▾" : "▸"}</span>
         <span className="text-white">{inc.title || inc.incident_id}</span>
-        <span className="text-gray-500 text-xs">{inc.calls.length} call{inc.calls.length !== 1 ? "s" : ""}</span>
-        <span className="text-gray-500 text-xs">{fmtTime(inc.started_at)} → {fmtTime(inc.resolved_at)}</span>
-        <span className={`text-xs ${signal ? "text-green-400" : "text-gray-500"}`}>{inc.resolved_via ?? inc.status}</span>
+        <span className="text-ink-muted text-xs">{inc.calls.length} call{inc.calls.length !== 1 ? "s" : ""}</span>
+        <span className="text-ink-muted text-xs">{fmtTime(inc.started_at)} → {fmtTime(inc.resolved_at)}</span>
+        <span className={`text-xs ${signal ? "text-green-400" : "text-ink-muted"}`}>{inc.resolved_via ?? inc.status}</span>
         {inc.location_coords && <span className="text-xs text-indigo-400">📍 {inc.location}</span>}
       </button>
       {open && <div className="mt-2">{inc.calls.map((c) => <CallLine key={c.call_id} call={c} />)}</div>}
@@ -347,22 +347,22 @@ function RunDetail({ run }: { run: ReplayRun }) {
             ["With units cleared", m.incidents_with_units_cleared],
             ["With map pin", m.incidents_with_coords],
           ].map(([k, v]) => (
-            <div key={k as string} className="bg-gray-900 border border-gray-800 rounded-lg p-2">
-              <div className="text-gray-500">{k}</div>
+            <div key={k as string} className="bg-surface border border-line rounded-lg p-2">
+              <div className="text-ink-muted">{k}</div>
               <div className="text-white text-base">{v}</div>
             </div>
           ))}
         </div>
       )}
       {m && (
-        <p className="text-xs font-mono text-gray-500">
+        <p className="text-xs font-mono text-ink-muted">
           resolved: {Object.entries(m.resolved_via).map(([k, v]) => `${k} ${v}`).join(" · ")}
           <br />
           paths: {Object.entries(m.corr_path).map(([k, v]) => `${k} ${v}`).join(" · ")}
         </p>
       )}
       {m?.gemini_usage && Object.keys(m.gemini_usage).length > 0 && (
-        <p className="text-xs font-mono text-gray-500">
+        <p className="text-xs font-mono text-ink-muted">
           Gemini tokens:{" "}
           {Object.entries(m.gemini_usage)
             .map(([k, u]) => `${k} ${u.calls} calls, in ${u.in.toLocaleString()} / out ${u.out.toLocaleString()} / thinking ${u.thinking.toLocaleString()}`)
@@ -380,7 +380,7 @@ function RunDetail({ run }: { run: ReplayRun }) {
           {run.errors.map((e, i) => <div key={i}>{e}</div>)}
         </details>
       )}
-      {run.status === "running" && <p className="text-sm text-gray-500 font-mono">Incidents appear when the run finishes.</p>}
+      {run.status === "running" && <p className="text-sm text-ink-muted font-mono">Incidents appear when the run finishes.</p>}
       {error && <p className="text-red-400 text-sm font-mono">{error}</p>}
       {data && (
         <>
@@ -389,20 +389,20 @@ function RunDetail({ run }: { run: ReplayRun }) {
               <button
                 key={f}
                 onClick={() => setFilter(f)}
-                className={`px-3 py-1 rounded-md ${filter === f ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"}`}
+                className={`px-3 py-1 rounded-md ${filter === f ? "bg-raised text-white" : "text-ink-muted hover:text-ink"}`}
               >
                 {f === "all" ? `All (${data.incidents.length})` : f === "multi" ? "Multi-call" : "Single-call"}
               </button>
             ))}
             <button
               onClick={() => setShowOrphans(!showOrphans)}
-              className={`px-3 py-1 rounded-md ${showOrphans ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"}`}
+              className={`px-3 py-1 rounded-md ${showOrphans ? "bg-raised text-white" : "text-ink-muted hover:text-ink"}`}
             >
               Orphans ({data.orphans.length})
             </button>
           </div>
           {showOrphans ? (
-            <div className="bg-gray-900 border border-gray-800 rounded-lg px-3 py-2">
+            <div className="bg-surface border border-line rounded-lg px-3 py-2">
               {data.orphans.map((c) => <CallLine key={c.call_id} call={c} />)}
             </div>
           ) : (
@@ -443,7 +443,7 @@ export function ReplayTab() {
 
   return (
     <div className="space-y-5">
-      <p className="text-xs text-gray-500 font-mono">
+      <p className="text-xs text-ink-muted font-mono">
         Re-run the pipeline over a past time range, in the calls&apos; original order, into a sandbox — live incidents are never
         touched. Replay the same range after each change and compare the rows below. A run starts with no incidents
         open, so its first ~90 minutes split more than live did — compare runs over the same range, not a run against live.