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/conversation/ToolCallBlock.tsx

@@ -51,6 +51,7 @@
  *
  * ----------------------------------------------------------------------------- */
 
+import i18n from "../../i18n";
 import { useState } from "react";
 import { ChevronRight, AlertCircle, FileText, CheckCircle2 } from "lucide-react";
 import type { TranscriptContent } from "../../lib/types";
@@ -107,6 +108,9 @@ function buildSummary(toolUse: TranscriptContent): string | null {
   return null;
 }
 
+/** A translated label for the tool panes (plain functions, so i18n directly). */
+const tt = (key: string) => i18n.t(`sessions:conversation.tool.${key}`);
+
 /** Render the input pane with tool-aware formatting. */
 function renderInput(toolUse: TranscriptContent) {
   const input = toolUse.input;
@@ -118,7 +122,7 @@ function renderInput(toolUse: TranscriptContent) {
       <CodeBlock
         code={String((input as { _truncated: string })._truncated)}
         lang="plain"
-        label="Input (truncated)"
+        label={tt("inputTruncated")}
       />
     );
   }
@@ -130,7 +134,7 @@ function renderInput(toolUse: TranscriptContent) {
   if (tool === "bash" && typeof obj.command === "string") {
     return (
       <div className="space-y-2">
-        <CodeBlock code={obj.command} lang="bash" label="Command" />
+        <CodeBlock code={obj.command} lang="bash" label={tt("command")} />
         {typeof obj.description === "string" && (
           <p className="text-xs text-fg-muted italic px-1">{obj.description}</p>
         )}
@@ -145,7 +149,7 @@ function renderInput(toolUse: TranscriptContent) {
         code={obj.content}
         lang={langFromPath(obj.file_path)}
         filename={obj.file_path}
-        label="New file"
+        label={tt("newFile")}
       />
     );
   }
@@ -156,19 +160,19 @@ function renderInput(toolUse: TranscriptContent) {
     return (
       <div className="space-y-2">
         <div className="flex items-center gap-1.5 text-xs text-fg-secondary">
-          <FileText className="w-3.5 h-3.5 text-violet-700 dark:text-violet-400" />
+          <FileText className="w-3.5 h-3.5 text-syntax-keyword" />
           <span className="font-mono">{obj.file_path}</span>
           {obj.replace_all === true && (
             <span className="text-[10px] uppercase tracking-wider text-status-warning/80 bg-status-warning/10 border border-status-warning/20 rounded px-1.5 py-0.5">
-              replace all
+              {tt("replaceAll")}
             </span>
           )}
         </div>
         {typeof obj.old_string === "string" && (
-          <CodeBlock code={obj.old_string} lang={lang} label="Removed" tone="danger" />
+          <CodeBlock code={obj.old_string} lang={lang} label={tt("removed")} tone="danger" />
         )}
         {typeof obj.new_string === "string" && (
-          <CodeBlock code={obj.new_string} lang={lang} label="Added" tone="success" />
+          <CodeBlock code={obj.new_string} lang={lang} label={tt("added")} tone="success" />
         )}
       </div>
     );
@@ -178,7 +182,7 @@ function renderInput(toolUse: TranscriptContent) {
   if (tool === "read" && typeof obj.file_path === "string") {
     return (
       <div className="flex items-center gap-1.5 text-xs text-fg-secondary bg-surface-4/40 border border-surface-3 rounded-md px-3 py-2">
-        <FileText className="w-3.5 h-3.5 text-sky-700 dark:text-sky-400 flex-shrink-0" />
+        <FileText className="w-3.5 h-3.5 text-syntax-builtin flex-shrink-0" />
         <span className="font-mono break-all">{obj.file_path}</span>
         {(typeof obj.offset === "number" || typeof obj.limit === "number") && (
           <span className="text-fg-muted font-mono ml-auto flex-shrink-0">
@@ -196,16 +200,16 @@ function renderInput(toolUse: TranscriptContent) {
       <div className="space-y-1.5">
         <div className="flex items-center gap-2 text-xs">
           <span className="text-fg-muted font-mono uppercase tracking-wider text-[10px]">
-            Pattern
+            {tt("pattern")}
           </span>
-          <code className="font-mono text-cyan-700 dark:text-cyan-300 bg-surface-4 border border-surface-3 rounded px-1.5 py-0.5">
+          <code className="font-mono text-syntax-property bg-surface-4 border border-surface-3 rounded px-1.5 py-0.5">
             {obj.pattern}
           </code>
         </div>
         {typeof obj.path === "string" && (
           <div className="flex items-center gap-2 text-xs">
             <span className="text-fg-muted font-mono uppercase tracking-wider text-[10px]">
-              Path
+              {tt("path")}
             </span>
             <code className="font-mono text-fg-secondary">{obj.path}</code>
           </div>
@@ -213,7 +217,7 @@ function renderInput(toolUse: TranscriptContent) {
         {typeof obj.glob === "string" && (
           <div className="flex items-center gap-2 text-xs">
             <span className="text-fg-muted font-mono uppercase tracking-wider text-[10px]">
-              Glob
+              {tt("glob")}
             </span>
             <code className="font-mono text-fg-secondary">{obj.glob}</code>
           </div>
@@ -223,17 +227,18 @@ function renderInput(toolUse: TranscriptContent) {
   }
 
   // Default: pretty JSON
-  return <CodeBlock code={JSON.stringify(obj, null, 2)} lang="json" label="Input" />;
+  return <CodeBlock code={JSON.stringify(obj, null, 2)} lang="json" label={tt("input")} />;
 }
 
 /** Render the result pane: detect diff/json/text. */
 function renderResult(toolResult: TranscriptContent, toolName: string) {
   const text = toolResult.output ?? "";
-  if (text.length === 0) return <div className="text-xs text-fg-muted italic px-1">(empty)</div>;
+  if (text.length === 0)
+    return <div className="text-xs text-fg-muted italic px-1">({tt("empty")})</div>;
 
   const isError = !!toolResult.is_error;
   const tool = toolName.toLowerCase();
-  const label = isError ? "Error" : "Output";
+  const label = isError ? tt("error") : tt("output");
 
   // Heuristics for language
   let lang = "plain";
@@ -273,6 +278,7 @@ export function ToolCallBlock({ toolUse, toolResult }: ToolCallBlockProps) {
       {/* Collapsed/expanded toggle */}
       <button
         onClick={() => setExpanded(!expanded)}
+        aria-expanded={expanded}
         className="w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-surface-3/40 transition-colors"
       >
         <ChevronRight
@@ -297,16 +303,16 @@ export function ToolCallBlock({ toolUse, toolResult }: ToolCallBlockProps) {
           {isError ? (
             <span className="inline-flex items-center gap-1 text-[10px] uppercase tracking-wider text-status-danger bg-status-danger/15 border border-status-danger/20 rounded px-1.5 py-0.5">
               <AlertCircle className="w-3 h-3" />
-              error
+              {tt("statusError")}
             </span>
           ) : hasResult ? (
             <span className="inline-flex items-center gap-1 text-[10px] uppercase tracking-wider text-status-success/80 bg-status-success/10 border border-status-success/20 rounded px-1.5 py-0.5">
               <CheckCircle2 className="w-3 h-3" />
-              ok
+              {tt("statusOk")}
             </span>
           ) : (
             <span className="text-fg-muted text-[10px] uppercase tracking-wider font-mono">
-              pending
+              {tt("statusPending")}
             </span>
           )}
         </span>