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/__tests__/AgentCard.test.tsx

@@ -240,7 +240,7 @@ describe("AgentCard", () => {
     const { container } = renderCard(<AgentCard agent={makeAgent({ status: "waiting" })} />);
     const card = container.querySelector(".card-hover");
     expect(card?.className).toContain("border-l-2");
-    expect(card?.className).toContain("border-l-yellow-500/60");
+    expect(card?.className).toContain("border-l-status-warning/60");
   });
 
   it("should not apply active border for completed agents", () => {
@@ -267,7 +267,7 @@ describe("AgentCard", () => {
     );
     expect(screen.getByText("Waiting")).toBeInTheDocument();
     const card = container.querySelector(".card-hover");
-    expect(card?.className).toContain("border-l-yellow-500/60");
+    expect(card?.className).toContain("border-l-status-warning/60");
   });
 
   it("keeps the card badge compact: reason is tooltip-only, no inline chip", () => {

client/src/components/__tests__/DateTimePicker.test.tsx

@@ -0,0 +1,28 @@
+/**
+ * @file DateTimePicker.test.tsx
+ * @description An end-bound picker ("To") picks the very end of a day, so an
+ * event at 23:59:30 is still inside the range.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { DateTimePicker } from "../DateTimePicker";
+
+describe("DateTimePicker", () => {
+  it("endOfDay picks 23:59:59.999 of the chosen day", () => {
+    const onChange = vi.fn();
+    render(<DateTimePicker value="" onChange={onChange} endOfDay aria-label="To" />);
+    fireEvent.click(screen.getByRole("button", { name: "To" }));
+    fireEvent.click(screen.getAllByRole("button", { pressed: false })[0]!);
+    expect(onChange.mock.calls[0]![0]).toMatch(/T23:59:59\.999$/);
+  });
+
+  it("a start bound picks midnight", () => {
+    const onChange = vi.fn();
+    render(<DateTimePicker value="" onChange={onChange} aria-label="From" />);
+    fireEvent.click(screen.getByRole("button", { name: "From" }));
+    fireEvent.click(screen.getAllByRole("button", { pressed: false })[0]!);
+    expect(onChange.mock.calls[0]![0]).toMatch(/T00:00$/);
+  });
+});

client/src/components/__tests__/EventFilters.test.tsx

@@ -9,7 +9,13 @@
 
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
-import { EventFilters, EMPTY_FILTERS, isEmptyFilters } from "../EventFilters";
+import {
+  EventFilters,
+  EMPTY_FILTERS,
+  isEmptyFilters,
+  filtersFromParams,
+  filtersToParams,
+} from "../EventFilters";
 import type { EventFiltersValue } from "../EventFilters";
 import { api } from "../../lib/api";
 
@@ -82,4 +88,49 @@ describe("EventFilters", () => {
     fireEvent.click(clear);
     expect(onChange).toHaveBeenCalledWith(EMPTY_FILTERS);
   });
+
+  it("a debounced search keeps a facet toggled meanwhile (latest value, not the stale one)", async () => {
+    vi.useFakeTimers();
+    try {
+      const onChange = vi.fn();
+      const { rerender } = render(<EventFilters value={EMPTY_FILTERS} onChange={onChange} />);
+      fireEvent.change(screen.getByPlaceholderText(/search summary/i), {
+        target: { value: "curl" },
+      });
+      // The parent applies a toggle before the 300 ms elapse.
+      const toggled = { ...EMPTY_FILTERS, status: ["error"] };
+      rerender(<EventFilters value={toggled} onChange={onChange} />);
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(onChange).toHaveBeenLastCalledWith({ ...toggled, q: "curl" });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("searches sessions on the server, 20 at a time", async () => {
+    const list = vi
+      .spyOn(api.sessions, "list")
+      .mockResolvedValue({ sessions: [], total: 0, limit: 20, offset: 0 });
+    render(<EventFilters value={EMPTY_FILTERS} onChange={() => {}} sessionOptions={[]} />);
+    fireEvent.click(screen.getByRole("button", { name: /session/i }));
+    await waitFor(() => expect(list).toHaveBeenCalledWith({ q: undefined, limit: 20 }));
+    fireEvent.change(screen.getByRole("searchbox"), { target: { value: "abc" } });
+    await waitFor(() => expect(list).toHaveBeenCalledWith({ q: "abc", limit: 20 }));
+  });
+
+  it("round-trips filters through URL params, leaving other keys alone", () => {
+    const value: EventFiltersValue = {
+      ...EMPTY_FILTERS,
+      event_type: ["Stop", "PreToolUse"],
+      status: ["error"],
+      q: "curl",
+      to: "2026-01-02T23:59",
+    };
+    const params = filtersToParams(value, new URLSearchParams("tab=timeline"));
+    expect(params.get("tab")).toBe("timeline");
+    expect(filtersFromParams(params)).toEqual(value);
+    expect(filtersToParams(EMPTY_FILTERS, params).toString()).toBe("tab=timeline");
+  });
 });

client/src/components/__tests__/RouteErrorBoundary.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * @file RouteErrorBoundary.test.tsx
+ * @description The route error boundary: a failed lazy chunk (stale assets after
+ * a self-update) reloads the page once; any other error — or a second chunk
+ * failure — shows the themed Reload fallback instead of a blank app.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { RouteErrorBoundary, isChunkLoadError, reloadOnce } from "../RouteErrorBoundary";
+
+function Boom({ error }: { error: Error }): never {
+  throw error;
+}
+
+let reload: ReturnType<typeof vi.fn>;
+beforeEach(() => {
+  sessionStorage.clear();
+  reload = vi.fn();
+  vi.spyOn(console, "error").mockImplementation(() => {});
+});
+afterEach(() => vi.restoreAllMocks());
+
+describe("RouteErrorBoundary", () => {
+  it("recognises dynamic-import failures", () => {
+    expect(
+      isChunkLoadError(new TypeError("Failed to fetch dynamically imported module: /a.js"))
+    ).toBe(true);
+    expect(isChunkLoadError(Object.assign(new Error("x"), { name: "ChunkLoadError" }))).toBe(true);
+    expect(isChunkLoadError(new Error("Importing a module script failed."))).toBe(true);
+    expect(isChunkLoadError(new Error("boom"))).toBe(false);
+  });
+
+  it("reloads once on a chunk error, never twice in a row", () => {
+    expect(reloadOnce(reload)).toBe(true);
+    expect(reloadOnce(reload)).toBe(false);
+    expect(reload).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows a Reload fallback for an ordinary render error", () => {
+    render(
+      <RouteErrorBoundary reload={reload}>
+        <Boom error={new Error("boom")} />
+      </RouteErrorBoundary>
+    );
+    expect(screen.getByRole("alert")).toHaveTextContent(/something went wrong/i);
+    expect(screen.getByRole("button", { name: /reload/i })).toBeInTheDocument();
+    expect(reload).not.toHaveBeenCalled();
+  });
+
+  it("reloads on a chunk error the first time", () => {
+    render(
+      <RouteErrorBoundary reload={reload}>
+        <Boom error={new TypeError("Failed to fetch dynamically imported module: /x.js")} />
+      </RouteErrorBoundary>
+    );
+    expect(reload).toHaveBeenCalledTimes(1);
+  });
+});

client/src/components/__tests__/StatusBadge.test.tsx

@@ -64,7 +64,7 @@ describe("AgentStatusBadge", () => {
     expect(screen.getByText("Waiting")).toBeInTheDocument();
     const dot = container.querySelector(".animate-pulse-dot");
     expect(dot).toBeInTheDocument();
-    expect(container.querySelector(".bg-yellow-400")).toBeInTheDocument();
+    expect(container.querySelector(".bg-status-warning")).toBeInTheDocument();
   });
 });
 
@@ -94,7 +94,7 @@ describe("SessionStatusBadge", () => {
     expect(screen.getByText("Waiting")).toBeInTheDocument();
     const dot = container.querySelector(".animate-pulse-dot");
     expect(dot).toBeInTheDocument();
-    expect(container.querySelector(".bg-yellow-400")).toBeInTheDocument();
+    expect(container.querySelector(".bg-status-warning")).toBeInTheDocument();
   });
 });
 
@@ -135,10 +135,14 @@ describe("awaiting-reason suffix", () => {
   });
 
   it("marks urgent reasons with the hotter amber tint", () => {
-    const { container } = render(<AgentStatusBadge status="waiting" reason="notification" />);
-    expect(container.querySelector(".text-status-warning")).toBeInTheDocument();
-    const { container: calm } = render(<AgentStatusBadge status="waiting" reason="stop" />);
-    expect(calm.querySelector(".text-status-warning")).not.toBeInTheDocument();
+    render(<AgentStatusBadge status="waiting" reason="notification" />);
+    expect(screen.getByText("Needs input").closest("span.rounded-full")).toHaveClass(
+      "text-status-warning"
+    );
+    render(<AgentStatusBadge status="waiting" reason="stop" />);
+    expect(screen.getByText("Turn done").closest("span.rounded-full")).not.toHaveClass(
+      "text-status-warning"
+    );
   });
 
   it("compact mode suppresses the inline chip but keeps the hover tooltip", () => {