feat(dashboard): lazy routes, Needs-you strip, URL state, exact numbers

- Workspace, SettingsHub, SessionDetail and the Workflow sub-tab are lazy
  (main bundle 2,166 kB -> ~920 kB), wrapped in RouteErrorBoundary: a stale
  chunk after a self-update reloads once (vite:preloadError too), any other
  error shows a Reload panel instead of a blank page.
- Live refresh: lib/throttle.ts + hooks/useLiveRefresh.ts replace trailing
  debounces that froze under a steady event stream; refresh skips hidden
  tabs and refetches after a WebSocket reconnect. Monitor loads only while
  shown, with one batched GET /api/agents?session_ids= instead of N+1; a
  failing endpoint is an inline error, not a blank Dashboard.
- NeedsYouStrip on Monitor and above Analytics. Tabs, filters, page, sort
  and search live in the URL (Dashboard, Sessions, Activity, SessionDetail).
- Sessions: tool / workspace / date-range filters, CSV/JSON export
  (formula-neutralised), focusable row links, Open in workspace (the dead
  /run links are gone), stale responses dropped, error + Retry.
- Fixes: "NaNs" durations, 30/7-day charts skipping idle days, weekday
  labels west of UTC (now averages), cache hit rate denominator, billable
  tokens vs cache reads, exact tool-call counts, "To" date = end of day,
  invalid ?from= no longer throws, recent list no longer shrinks to 15,
  stable message keys, transcript switch races.
- Light-theme-unreadable bg-black code panels and dark-only DAG fills use
  tokens; status configs and chart colours use theme tokens; Health tab
  and other literals translated.
- Server (additive): GET /api/agents?session_ids=, GET /api/sessions
  awaiting=1&from=&to=, stats tool_call_count/distinct_tool_count, event
  rows carry session/agent labels.

client/src/components/event-views/primitives.tsx

@@ -137,8 +137,8 @@ export function CopyButton({ text }: { text: string }) {
 
 export function Terminal({ command, description }: { command: string; description?: string }) {
   return (
-    <div className="relative bg-black/70 border border-border rounded font-mono text-[11px] overflow-hidden">
-      <div className="flex items-center justify-between px-3 py-1 border-b border-border bg-black/40">
+    <div className="relative bg-surface-0 border border-border rounded font-mono text-[11px] overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-1 border-b border-border bg-surface-1">
         <span className="text-fg-muted text-[10px] uppercase tracking-wide">terminal</span>
         <CopyButton text={command} />
       </div>
@@ -207,8 +207,8 @@ function OutputBlock({
 }) {
   const color = variant === "err" ? "text-status-danger" : "text-fg-secondary";
   return (
-    <div className="relative bg-black/70 border border-border rounded font-mono text-[11px] overflow-hidden">
-      <div className="flex items-center justify-between px-3 py-1 border-b border-border bg-black/40">
+    <div className="relative bg-surface-0 border border-border rounded font-mono text-[11px] overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-1 border-b border-border bg-surface-1">
         <span className="text-fg-muted text-[10px] uppercase tracking-wide">{label}</span>
         <CopyButton text={text} />
       </div>
@@ -234,9 +234,9 @@ export function LineNumberedCode({
 }) {
   const lines = text.split(/\r?\n/);
   return (
-    <div className="relative bg-black/70 border border-border rounded font-mono text-[11px] overflow-hidden">
+    <div className="relative bg-surface-0 border border-border rounded font-mono text-[11px] overflow-hidden">
       {label && (
-        <div className="flex items-center justify-between px-3 py-1 border-b border-border bg-black/40">
+        <div className="flex items-center justify-between px-3 py-1 border-b border-border bg-surface-1">
           <span className="text-fg-muted text-[10px] uppercase tracking-wide">{label}</span>
           <CopyButton text={text} />
         </div>
@@ -246,7 +246,7 @@ export function LineNumberedCode({
           <tbody>
             {lines.map((line, i) => (
               <tr key={i}>
-                <td className="px-2 text-right text-fg-muted select-none bg-black/40 border-r border-border align-top">
+                <td className="px-2 text-right text-fg-muted select-none bg-surface-1 border-r border-border align-top">
                   {i + startLine}
                 </td>
                 <td className="px-3 text-fg-secondary whitespace-pre-wrap break-words">{line}</td>
@@ -274,7 +274,7 @@ export function UnifiedDiff({ hunks }: { hunks: DiffHunk[] }) {
     return <p className="text-[11px] text-fg-muted italic">no diff</p>;
   }
   return (
-    <div className="relative bg-black/70 border border-border rounded font-mono text-[11px] overflow-hidden">
+    <div className="relative bg-surface-0 border border-border rounded font-mono text-[11px] overflow-hidden">
       <div className="overflow-auto max-h-96">
         {hunks.map((hunk, i) => (
           <HunkView key={i} hunk={hunk} />