feat(ui): tool-frequency sparkline on SessionCard (V7)

~80×14 inline SVG histogram showing tool_call density over the last
10 min, 20 × 30-second buckets. Makes "busy vs quiet" readable at a
glance, complementary to the ⏵ tool-call-recency reading.

Client-side: pulls from the existing feed cache (useFeed hook +
SseProvider fan-out), so zero backend change. Fresh sessions with no
cached events render nothing — keeps the card clean.

Bars scale to the in-view peak (not a fixed max), so a trickle of
activity still shows meaningful height. Bars `fill-fg-muted/70` —
visible without competing with the mode badge or token blips.

Mount point: end of the token-blip row on the card.

Tests:
- vitest: sparkline.test.ts covers bucketize edge cases (empty, inside,
  outside window, clamp at now, non-positive opts). +component test
  asserts SVG renders with 20 rects when cache has entries, nothing
  when empty.
- playwright: dashboard.spec.ts seeds 6 tool_call events over the SSE
  mock once and asserts the sparkline SVG becomes visible on the card.

`make regression` green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: aksOps

ui/e2e/dashboard.spec.ts

@@ -65,6 +65,44 @@ test.describe("Dashboard", () => {
     await expect(fill).toHaveAttribute("style", /width:\s*95%/);
   });
 
+  test("renders the tool-frequency sparkline when the feed has events", async ({
+    page,
+  }) => {
+    // Seed the SSE stream with 6 tool_call events spread across 10 min.
+    // The sparkline component reads from the SseProvider-populated feed
+    // cache, so we route /events/all to deliver synthetic events once.
+    const now = Date.now();
+    const lines: string[] = [];
+    for (let i = 0; i < 6; i++) {
+      const ts = new Date(now - i * 60_000).toISOString();
+      const id = `${now - i * 60_000}000000-0`;
+      const data = JSON.stringify({
+        session: "alpha",
+        tool: "Bash",
+        input: "",
+        is_error: false,
+        ts,
+      });
+      lines.push(`id: ${id}\nevent: tool_call\ndata: ${data}\n\n`);
+    }
+    await page.route(
+      "**/events/all",
+      (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: "text/event-stream",
+          body: ": ok\n\n" + lines.join(""),
+        }),
+      { times: 1 },
+    );
+    await page.goto("/");
+    const card = page.getByRole("link", { name: /alpha/i }).first();
+    const svg = card.locator(
+      'svg[aria-label*="tool call frequency" i]',
+    );
+    await expect(svg).toBeVisible();
+  });
+
   test("renders the stale chip when tool call is older than 30 min", async ({
     page,
   }) => {

ui/src/components/SessionCard.tsx

@@ -2,6 +2,7 @@ import { Link } from "react-router";
 import { isStale, type Session } from "@/hooks/useSessions";
 import { HealthDot, healthState } from "@/components/HealthDot";
 import { AttentionLabel } from "@/components/AttentionLabel";
+import { ToolFrequencySparkline } from "@/components/ToolFrequencySparkline";
 import { compactNumber, relativeTime, shortenPath } from "@/lib/format";
 import { pctColor } from "@/lib/quota";
 import { cn } from "@/lib/utils";
@@ -141,6 +142,7 @@ export function SessionCard({ session, active }: SessionCardProps) {
             color="var(--accent-gold)"
             value={session.tokens.cache_tokens}
           />
+          <ToolFrequencySparkline sessionName={session.name} />
         </div>
       )}
 

ui/src/components/ToolFrequencySparkline.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ToolFrequencySparkline } from "./ToolFrequencySparkline";
+import type { ToolCallRow } from "@/hooks/useFeed";
+
+function renderWithFeed(sessionName: string, events: ToolCallRow[]) {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  qc.setQueryData<ToolCallRow[]>(["feed", sessionName], events);
+  return render(
+    <QueryClientProvider client={qc}>
+      <ToolFrequencySparkline sessionName={sessionName} />
+    </QueryClientProvider>,
+  );
+}
+
+function tc(ts: string, tool = "Bash"): ToolCallRow {
+  return { session: "s", tool, input: "", is_error: false, ts };
+}
+
+describe("ToolFrequencySparkline", () => {
+  it("renders nothing when the feed cache is empty", () => {
+    const { container } = renderWithFeed("s", []);
+    expect(container.querySelector("svg")).toBeNull();
+  });
+
+  it("renders a 20-rect SVG when there is cached activity", () => {
+    const events: ToolCallRow[] = [];
+    for (let i = 0; i < 5; i++) {
+      events.push(tc(new Date(Date.now() - i * 60_000).toISOString()));
+    }
+    const { container } = renderWithFeed("s", events);
+    const svg = container.querySelector("svg");
+    expect(svg).not.toBeNull();
+    expect(svg!.querySelectorAll("rect").length).toBe(20);
+  });
+});

ui/src/components/ToolFrequencySparkline.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from "react";
+import { useFeed } from "@/hooks/useFeed";
+import { bucketize } from "@/lib/sparkline";
+
+const WIDTH = 80;
+const HEIGHT = 14;
+const BUCKETS = 20;
+const WINDOW_MS = 10 * 60 * 1000; // 10 minutes
+
+interface Props {
+  sessionName: string;
+}
+
+/**
+ * Inline ~80×14 SVG histogram of tool-call frequency over the last
+ * 10 min for one session. Pulls from the existing feed cache — zero
+ * backend contract. Renders nothing when the session has no cached
+ * tool calls (keeps fresh cards clean).
+ */
+export function ToolFrequencySparkline({ sessionName }: Props) {
+  const { data } = useFeed(sessionName);
+
+  const bars = useMemo(() => {
+    if (!data || data.length === 0) return null;
+    const now = Date.now();
+    const timestamps = data
+      .map((row) => Date.parse(row.ts))
+      .filter((t) => !Number.isNaN(t));
+    const counts = bucketize(timestamps, {
+      now,
+      windowMs: WINDOW_MS,
+      buckets: BUCKETS,
+    });
+    const peak = Math.max(1, ...counts);
+    const barW = WIDTH / BUCKETS;
+    return counts.map((c, i) => {
+      const h = (c / peak) * HEIGHT;
+      return (
+        <rect
+          key={i}
+          x={i * barW}
+          y={HEIGHT - h}
+          width={Math.max(0, barW - 1)}
+          height={h}
+          className="fill-fg-muted/70"
+        />
+      );
+    });
+  }, [data]);
+
+  if (!bars) return null;
+  return (
+    <svg
+      width={WIDTH}
+      height={HEIGHT}
+      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+      role="img"
+      aria-label={`${sessionName} tool call frequency, last 10 min`}
+      className="shrink-0"
+    >
+      {bars}
+    </svg>
+  );
+}

ui/src/lib/sparkline.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { bucketize } from "./sparkline";
+
+const opts = { now: 1_000_000, windowMs: 10_000, buckets: 10 };
+
+describe("bucketize", () => {
+  it("returns a zero-filled array for empty input", () => {
+    expect(bucketize([], opts)).toEqual([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  });
+
+  it("counts events in the right buckets (oldest-first)", () => {
+    const oldest = opts.now - opts.windowMs;
+    const ts = [oldest + 500, oldest + 1_500, oldest + 9_500];
+    // bucketMs = 1000 → idx 0, 1, 9
+    expect(bucketize(ts, opts)).toEqual([1, 1, 0, 0, 0, 0, 0, 0, 0, 1]);
+  });
+
+  it("drops events outside the window", () => {
+    expect(
+      bucketize([opts.now - opts.windowMs - 1, opts.now + 1], opts),
+    ).toEqual([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  });
+
+  it("clamps an event at now into the last bucket", () => {
+    const out = bucketize([opts.now], opts);
+    expect(out[9]).toBe(1);
+  });
+
+  it("returns empty for non-positive buckets or windowMs", () => {
+    expect(bucketize([1, 2], { now: 0, windowMs: 0, buckets: 5 })).toEqual([]);
+    expect(bucketize([1, 2], { now: 0, windowMs: 10, buckets: 0 })).toEqual([]);
+  });
+});

ui/src/lib/sparkline.ts

@@ -0,0 +1,35 @@
+/**
+ * Pure bucketing helper for tool-frequency sparklines. Kept framework-
+ * agnostic so it's trivially unit-testable and reusable if another
+ * surface wants the same histogram.
+ */
+
+export interface BucketOptions {
+  now: number;
+  windowMs: number;
+  buckets: number;
+}
+
+/**
+ * Count entries per bucket. Events older than (now - windowMs) are
+ * dropped. Events at/after now are counted in the latest bucket. The
+ * returned array has `buckets` entries ordered oldest-first.
+ */
+export function bucketize(
+  timestamps: number[],
+  { now, windowMs, buckets }: BucketOptions,
+): number[] {
+  if (buckets <= 0 || windowMs <= 0) return [];
+  const out = new Array<number>(buckets).fill(0);
+  const bucketMs = windowMs / buckets;
+  const oldest = now - windowMs;
+  for (const t of timestamps) {
+    if (t < oldest || t > now) continue;
+    const offset = t - oldest;
+    let idx = Math.floor(offset / bucketMs);
+    if (idx >= buckets) idx = buckets - 1;
+    if (idx < 0) idx = 0;
+    out[idx] += 1;
+  }
+  return out;
+}

ui/src/routes/DoctorPanel.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from "@/hooks/useTheme";
 import { DoctorPanel } from "@/routes/DoctorPanel";
 import { TOKEN_KEY } from "@/lib/api";
 
@@ -19,9 +20,11 @@ function renderPanel() {
   });
   return render(
     <QueryClientProvider client={qc}>
-      <MemoryRouter>
-        <DoctorPanel />
-      </MemoryRouter>
+      <ThemeProvider>
+        <MemoryRouter>
+          <DoctorPanel />
+        </MemoryRouter>
+      </ThemeProvider>
     </QueryClientProvider>,
   );
 }
@@ -32,6 +35,22 @@ describe("DoctorPanel", () => {
   beforeEach(() => {
     originalFetch = globalThis.fetch;
     localStorage.setItem(TOKEN_KEY, "test-token");
+    // JSDOM does not implement matchMedia; ThemeProvider needs it.
+    if (typeof window.matchMedia !== "function") {
+      Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: (query: string) => ({
+          matches: false,
+          media: query,
+          onchange: null,
+          addListener: vi.fn(),
+          removeListener: vi.fn(),
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+          dispatchEvent: vi.fn(),
+        }),
+      });
+    }
   });
 
   afterEach(() => {