@circuitwall/jarela 2.4.0 → 2.5.0

package/components/chat/ToolList.tsx

@@ -434,83 +434,87 @@ function ToolCallCard({ group, startedAt }: { group: ToolCallGroup; startedAt: n
   const transcriptSteps = group.steps.length > 0 ? group.steps : delegateTranscript?.steps ?? stepsFromResult(displayedResult);
   return (
     <div className="min-w-0 max-w-full">
-      <MetaRow fullWidth onClick={() => setOpen((v) => !v)} expanded={open}>
-        <CollapseChevron open={open} size={9} className="text-fg-faint/70" />
-        <ToolIcon toolName={group.name} />
-        <span className="font-medium text-fg-muted shrink-0">{group.name}</span>
-        <span
-          className="relative truncate text-fg-faint font-normal flex-1 min-w-0"
-          title={summaryTitle || undefined}
-          style={{
-            // Fade the tail of the args summary into the surface so the
-            // status pills + progress bar on the right stay legible even
-            // when the args fill the available space.
-            WebkitMaskImage:
-              "linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%)",
-            maskImage:
-              "linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%)",
-          }}
-        >
-          {summary}
-        </span>
-        {group.status === "async" && (
-          <Badge
-            tone="info"
-            className="uppercase tracking-wide"
-            title="running in the background"
-          >
-            bg
-          </Badge>
-        )}
-        {codexJob?.status === "running" && (
-          <Badge tone="info" className="uppercase tracking-wide" title="Codex job is updating live">
-            live
-          </Badge>
-        )}
-        {codexJob?.status === "running" && (
-          <button
-            type="button"
-            onClick={(event) => { event.stopPropagation(); void cancelCodexJob(); }}
-            className="control-tap shrink-0 text-fg-faint hover:text-rose-600 dark:hover:text-rose-300"
-            title="Cancel Codex task"
-            aria-label="Cancel Codex task"
-          >
-            <X size={12} />
-          </button>
-        )}
-        {group.readByAgent && (
-          <Badge
-            tone="neutral"
-            className="uppercase tracking-wide"
-            title="agent read the background result"
-          >
-            read
-          </Badge>
-        )}
-        {isToolResultRefEnvelope(group.result) && (
-          <Badge
-            tone="info"
-            className="uppercase tracking-wide"
-            title="large result is shown as a preview with a file reference"
-          >
-            preview
-          </Badge>
-        )}
-        {delegateTranscript?.awaitingUserAnswers && (
-          <Badge
-            tone="warning"
-            className="uppercase tracking-wide"
-            title="Claude asked design questions and is waiting for the user"
+      <MetaRow fullWidth onClick={() => setOpen((v) => !v)} expanded={open} className="flex-wrap">
+        <span className="flex min-w-0 flex-1 basis-40 items-center gap-1.5">
+          <CollapseChevron open={open} size={9} className="text-fg-faint/70" />
+          <ToolIcon toolName={group.name} />
+          <span className="min-w-0 max-w-[50%] truncate font-medium text-fg-muted" title={group.name}>{group.name}</span>
+          <span
+            className="relative truncate text-fg-faint font-normal flex-1 min-w-0"
+            title={summaryTitle || undefined}
+            style={{
+              // Fade the tail of the args summary into the surface so the
+              // status pills + progress bar on the right stay legible even
+              // when the args fill the available space.
+              WebkitMaskImage:
+                "linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%)",
+              maskImage:
+                "linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%)",
+            }}
           >
-            asks
-          </Badge>
-        )}
-        <StatusIndicator
-          status={group.status}
-          deadlineMs={group.deadlineMs}
-          startedAt={startedAt}
-          stepCount={transcriptSteps.length}
-        />
+            {summary}
+          </span>
+        </span>
+        <span className="ml-auto flex max-w-full flex-wrap items-center gap-1.5">
+          {group.status === "async" && (
+            <Badge
+              tone="info"
+              className="uppercase tracking-wide"
+              title="running in the background"
+            >
+              bg
+            </Badge>
+          )}
+          {codexJob?.status === "running" && (
+            <Badge tone="info" className="uppercase tracking-wide" title="Codex job is updating live">
+              live
+            </Badge>
+          )}
+          {codexJob?.status === "running" && (
+            <button
+              type="button"
+              onClick={(event) => { event.stopPropagation(); void cancelCodexJob(); }}
+              className="control-tap shrink-0 text-fg-faint hover:text-rose-600 dark:hover:text-rose-300"
+              title="Cancel Codex task"
+              aria-label="Cancel Codex task"
+            >
+              <X size={12} />
+            </button>
+          )}
+          {group.readByAgent && (
+            <Badge
+              tone="neutral"
+              className="uppercase tracking-wide"
+              title="agent read the background result"
+            >
+              read
+            </Badge>
+          )}
+          {isToolResultRefEnvelope(group.result) && (
+            <Badge
+              tone="info"
+              className="uppercase tracking-wide"
+              title="large result is shown as a preview with a file reference"
+            >
+              preview
+            </Badge>
+          )}
+          {delegateTranscript?.awaitingUserAnswers && (
+            <Badge
+              tone="warning"
+              className="uppercase tracking-wide"
+              title="Claude asked design questions and is waiting for the user"
+            >
+              asks
+            </Badge>
+          )}
+          <StatusIndicator
+            status={group.status}
+            deadlineMs={group.deadlineMs}
+            startedAt={startedAt}
+            stepCount={transcriptSteps.length}
+          />
+        </span>
       </MetaRow>
       {delegateTranscript ? (
         <DelegateTurnCards
@@ -526,7 +530,7 @@ function ToolCallCard({ group, startedAt }: { group: ToolCallGroup; startedAt: n
         <LiveTranscript steps={transcriptSteps} />
       )}
       {open && (
-        <div className="mt-0.5 rounded border border-border/40 bg-surface-2/30 px-2 py-1.5 space-y-1.5 text-[10px]">
+        <div className="mt-0.5 min-w-0 rounded border border-border/40 bg-surface-2/30 px-2 py-1.5 space-y-1.5 text-[10px] [overflow-wrap:anywhere]">
           <WorkflowProgressDetails group={group} />
           {!hasWorkflowView(group) && (<>
           {hasVisibleArgs(group.args) ? (
@@ -1073,16 +1077,16 @@ function DetailSection({
     <div className="min-w-0">
       <div className="text-[10px] uppercase tracking-wide text-fg-faint mb-0.5">{label}</div>
       {kvEntries ? (
-        <dl className={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-0.5 text-[11px] font-mono ${toneClass}`}>
+        <dl className={`grid grid-cols-[fit-content(35%)_minmax(0,1fr)] gap-x-2 gap-y-0.5 text-[11px] font-mono ${toneClass}`}>
           {kvEntries.map(([k, v]) => (
             <div key={k} className="contents">
-              <dt className="text-fg-faint">{k}</dt>
-              <dd className="min-w-0 break-words whitespace-pre-wrap">{renderKvValue(v)}</dd>
+              <dt className="min-w-0 text-fg-faint">{k}</dt>
+              <dd className="min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]">{renderKvValue(v)}</dd>
             </div>
           ))}
         </dl>
       ) : (
-        <pre className={`text-[11px] font-mono whitespace-pre-wrap break-words max-w-full ${toneClass}`}>
+        <pre className={`text-[11px] font-mono whitespace-pre-wrap [overflow-wrap:anywhere] max-w-full ${toneClass}`}>
           {formatPayload(value)}
         </pre>
       )}
@@ -1198,11 +1202,11 @@ function renderKvValue(v: unknown): ReactNode {
     const entries = Object.entries(obj).filter(([k]) => !HIDDEN_ARG_KEYS.has(k));
     if (entries.length === 0) return <span className="text-fg-faint">{"{}"}</span>;
     return (
-      <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-0.5">
+      <dl className="grid grid-cols-[fit-content(35%)_minmax(0,1fr)] gap-x-2 gap-y-0.5">
         {entries.map(([k, vv]) => (
           <div key={k} className="contents">
-            <dt className="text-fg-faint">{k}</dt>
-            <dd className="min-w-0 break-words whitespace-pre-wrap">{renderKvValue(vv)}</dd>
+            <dt className="min-w-0 text-fg-faint">{k}</dt>
+            <dd className="min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]">{renderKvValue(vv)}</dd>
           </div>
         ))}
       </dl>

package/components/chat/useThreadActivity.test.tsx

@@ -9,7 +9,7 @@ vi.mock("@/api/client", () => ({
   api: {
     threads: {
       activity: (...args: unknown[]) => mocks.activity(...args),
-      get: (...args: unknown[]) => mocks.getThread(...args),
+      metadata: (...args: unknown[]) => mocks.getThread(...args),
     },
   },
 }));
@@ -87,7 +87,7 @@ describe("useThreadActivity", () => {
     expect(meta.setCompactionPending).toHaveBeenCalledWith(true);
     expect(meta.setManualCompactionPending).toHaveBeenCalledWith(true);
     await tick(1_500);
-    expect(mocks.getThread).toHaveBeenCalledWith("t1", { limit: 1 });
+    expect(mocks.getThread).toHaveBeenCalledWith("t1");
     expect(meta.setManualCompactionPending).toHaveBeenLastCalledWith(false);
   });
 

package/components/chat/useThreadActivity.ts

@@ -73,9 +73,9 @@ export function useThreadActivity({ threadId, attach, isLive, lastSettledAt, met
         // pull the new boundary and recap.
         d.metaApplier.setCompactionPending?.(false);
         d.metaApplier.setManualCompactionPending?.(false);
-        api.threads.get(threadId, { limit: 1 })
+        api.threads.metadata(threadId)
           .then((meta) => { if (!cancelled) applyThreadMeta(deps.current.metaApplier, meta); })
-          .catch(() => { /* next poll retries */ });
+          .catch((err) => { if (!cancelled) console.error("activity metadata refresh failed", err); });
       }
 
       schedule(next.busy ? BUSY_POLL_MS : IDLE_POLL_MS);

package/components/chat/useThreadData.ts

@@ -110,7 +110,7 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
     setCompactionPending(false);
     setManualCompactionPending(false);
     setContextWindowTokens(null);
-    api.threads.get(threadId).then((d) => {
+    api.threads.get(threadId, { startup: true }).then((d) => {
       if (cancelled) return;
       setMessages(d.messages);
       setHasMore(d.has_more);
@@ -163,35 +163,6 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
     }
   }, [threadId]);
 
-  useEffect(() => {
-    if (!threadId) return;
-    const summaryFresh = hotSinceSeq !== null && warmSummaryBeforeSeq === hotSinceSeq;
-    const summaryStale = warmSummaryPending && hotSinceSeq !== null && !summaryFresh;
-    if (!summaryStale && !compactionPending && !manualCompactionPending) {
-      if (warmSummaryPending && hotSinceSeq !== null && summaryFresh) setWarmSummaryPending(false);
-      return;
-    }
-    let cancelled = false;
-    const timer = window.setInterval(() => {
-      void api.threads.get(threadId).then((d) => {
-        if (cancelled) return;
-        applyThreadMeta(metaApplier, d);
-        const refreshedSummaryIsFresh = d.hot_since_seq != null
-          && d.warm_summary_before_seq === d.hot_since_seq;
-        if (!d.hot_since_seq || refreshedSummaryIsFresh) {
-          setWarmSummaryPending(false);
-        }
-      }).catch((err) => {
-        if (!cancelled) console.error("warm summary refresh poll failed", err);
-      });
-    }, 1600);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadId, warmSummaryPending, compactionPending, manualCompactionPending, hotSince, hotSinceSeq, warmSummaryBefore, warmSummaryBeforeSeq]);
-
   const loadOlder = useCallback(async () => {
     if (!threadId || loadingMore || !hasMore || messages.length === 0) return;
     setLoadingMore(true);

package/components/chat/useThreadMetadataPolling.test.tsx

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({ metadata: vi.fn() }));
+vi.mock("@/api/client", () => ({ api: { threads: { metadata: mocks.metadata } } }));
+const { useThreadMetadataPolling } = await import("./useThreadMetadataPolling");
+
+function applier() {
+  return {
+    setHotSince: vi.fn(), setHotSinceSeq: vi.fn(), setWarmSummary: vi.fn(),
+    setWarmSummaryBefore: vi.fn(), setWarmSummaryBeforeSeq: vi.fn(),
+    setWarmSummaryComputedAt: vi.fn(), setWarmSummarySourceMessages: vi.fn(),
+    setWarmSummarySourceChars: vi.fn(), setContextWindowTokens: vi.fn(),
+    setWarmSummaryPending: vi.fn(), setCompactionPending: vi.fn(),
+  };
+}
+
+async function advance(ms: number) {
+  await act(async () => { await vi.advanceTimersByTimeAsync(ms); });
+}
+
+describe("thread metadata polling", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mocks.metadata.mockReset().mockResolvedValue({ hot_since_seq: 4, warm_summary_before_seq: 4 });
+    Object.defineProperty(document, "hidden", { configurable: true, value: false });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    Reflect.deleteProperty(document, "hidden");
+  });
+
+  it("uses metadata reads and stops when disabled", async () => {
+    const meta = applier();
+    const { rerender } = renderHook(({ enabled }) => useThreadMetadataPolling("t1", enabled, meta),
+      { initialProps: { enabled: true } });
+    await advance(1600);
+    expect(mocks.metadata).toHaveBeenCalledWith("t1", expect.any(AbortSignal));
+    expect(meta.setHotSinceSeq).toHaveBeenCalledWith(4);
+    expect(meta.setWarmSummaryPending).toHaveBeenCalledWith(false);
+    rerender({ enabled: false });
+    await advance(5000);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+  });
+
+  it("waits for each response before scheduling another read", async () => {
+    let resolve!: (value: object) => void;
+    mocks.metadata.mockReturnValueOnce(new Promise((r) => { resolve = r; }));
+    renderHook(() => useThreadMetadataPolling("t1", true, applier()));
+    await advance(8000);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    await act(async () => resolve({}));
+    await advance(1599);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    await advance(1);
+    expect(mocks.metadata).toHaveBeenCalledTimes(2);
+  });
+
+  it("pauses while hidden and refreshes immediately on visibility", async () => {
+    Object.defineProperty(document, "hidden", { configurable: true, value: true });
+    renderHook(() => useThreadMetadataPolling("t1", true, applier()));
+    await advance(5000);
+    expect(mocks.metadata).not.toHaveBeenCalled();
+    Object.defineProperty(document, "hidden", { configurable: true, value: false });
+    await act(async () => document.dispatchEvent(new Event("visibilitychange")));
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not overlap an in-flight read when the page becomes visible again", async () => {
+    let resolve!: (value: object) => void;
+    mocks.metadata.mockReturnValueOnce(new Promise((r) => { resolve = r; }));
+    const { unmount } = renderHook(() => useThreadMetadataPolling("t1", true, applier()));
+    await advance(1600);
+    Object.defineProperty(document, "hidden", { configurable: true, value: true });
+    await act(async () => document.dispatchEvent(new Event("visibilitychange")));
+    Object.defineProperty(document, "hidden", { configurable: true, value: false });
+    await act(async () => document.dispatchEvent(new Event("visibilitychange")));
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    await act(async () => resolve({}));
+    await advance(1600);
+    expect(mocks.metadata).toHaveBeenCalledTimes(2);
+    unmount();
+  });
+
+  it("uses the latest metadata setters without restarting the polling timer", async () => {
+    const first = applier();
+    const second = applier();
+    const { rerender } = renderHook(({ meta }) => useThreadMetadataPolling("t1", true, meta),
+      { initialProps: { meta: first } });
+    await advance(800);
+    rerender({ meta: second });
+    await advance(800);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    expect(first.setHotSinceSeq).not.toHaveBeenCalled();
+    expect(second.setHotSinceSeq).toHaveBeenCalledWith(4);
+  });
+
+  it("aborts and ignores stale responses after switching threads", async () => {
+    let resolve!: (value: object) => void;
+    mocks.metadata.mockReturnValueOnce(new Promise((r) => { resolve = r; }));
+    const meta = applier();
+    const { rerender } = renderHook(({ id }) => useThreadMetadataPolling(id, true, meta),
+      { initialProps: { id: "t1" } });
+    await advance(1600);
+    const signal = mocks.metadata.mock.calls[0][1] as AbortSignal;
+    rerender({ id: "t2" });
+    expect(signal.aborted).toBe(true);
+    await act(async () => resolve({ hot_since_seq: 99 }));
+    expect(meta.setHotSinceSeq).not.toHaveBeenCalled();
+    await advance(1600);
+    expect(mocks.metadata).toHaveBeenLastCalledWith("t2", expect.any(AbortSignal));
+  });
+
+  it("logs failures and retries without replacing metadata with defaults", async () => {
+    const error = new Error("offline");
+    mocks.metadata.mockRejectedValueOnce(error);
+    const log = vi.spyOn(console, "error").mockImplementation(() => {});
+    const meta = applier();
+    renderHook(() => useThreadMetadataPolling("t1", true, meta));
+    await advance(1600);
+    expect(log).toHaveBeenCalledWith("thread metadata refresh failed", error);
+    expect(meta.setHotSinceSeq).not.toHaveBeenCalled();
+    await advance(1600);
+    expect(meta.setHotSinceSeq).toHaveBeenCalledWith(4);
+  });
+});

package/components/chat/useThreadMetadataPolling.ts

@@ -0,0 +1,50 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { api } from "@/api/client";
+import { applyThreadMeta, type ThreadMetaApplier } from "./chat-helpers";
+
+export function useThreadMetadataPolling(
+  threadId: string | null,
+  enabled: boolean,
+  metaApplier: ThreadMetaApplier,
+) {
+  const metaRef = useRef(metaApplier);
+  metaRef.current = metaApplier;
+
+  useEffect(() => {
+    if (!threadId || !enabled) return;
+    const targetThreadId = threadId;
+    let cancelled = false;
+    let inFlight = false;
+    let timer: number | undefined;
+    const controller = new AbortController();
+    const schedule = () => {
+      if (!cancelled && !document.hidden) timer = window.setTimeout(tick, 1600);
+    };
+    async function tick() {
+      if (cancelled || inFlight || document.hidden) return;
+      inFlight = true;
+      try {
+        const metadata = await api.threads.metadata(targetThreadId, controller.signal);
+        if (!cancelled) applyThreadMeta(metaRef.current, metadata);
+      } catch (err) {
+        if (!cancelled) console.error("thread metadata refresh failed", err);
+      } finally {
+        inFlight = false;
+        schedule();
+      }
+    }
+    const onVisibilityChange = () => {
+      window.clearTimeout(timer);
+      if (!document.hidden) void tick();
+    };
+    schedule();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      cancelled = true;
+      controller.abort();
+      window.clearTimeout(timer);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [threadId, enabled]);
+}

package/components/chat/useUserProfileAndAgent.test.tsx

@@ -0,0 +1,31 @@
+// @vitest-environment jsdom
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+import { useUserProfileAndAgent } from "./useUserProfileAndAgent";
+
+const { getAgent, getProfile } = vi.hoisted(() => ({
+  getAgent: vi.fn(),
+  getProfile: vi.fn(),
+}));
+vi.mock("@/api/client", () => ({
+  api: { agents: { get: getAgent }, profile: { get: getProfile } },
+}));
+
+it("warms startup reads and ignores an agent response after switching agents", async () => {
+  let resolveOld!: (config: { id: string }) => void;
+  getProfile.mockResolvedValue({ name: "Test user" });
+  getAgent.mockImplementation((id: string) => id === "old"
+    ? new Promise((resolve) => { resolveOld = resolve; })
+    : Promise.resolve({ id }));
+  const { result, rerender } = renderHook(
+    ({ id }) => useUserProfileAndAgent(id),
+    { initialProps: { id: "old" } },
+  );
+  rerender({ id: "new" });
+  await waitFor(() => expect(result.current.agentConfig?.id).toBe("new"));
+  await act(async () => resolveOld({ id: "old" }));
+  expect(result.current.agentConfig?.id).toBe("new");
+  expect(result.current.agentConfigLoading).toBe(false);
+  expect(getProfile).toHaveBeenCalledWith({ startup: true });
+  expect(getAgent).toHaveBeenCalledWith("new", { startup: true });
+});

package/components/chat/useUserProfileAndAgent.ts

@@ -18,7 +18,12 @@ export function useUserProfileAndAgent(agentId: string | null): Result {
 
   useEffect(() => {
     setProfileLoading(true);
-    api.profile.get().then(setUserProfile).catch(console.error).finally(() => setProfileLoading(false));
+    let cancelled = false;
+    api.profile.get({ startup: true })
+      .then((profile) => { if (!cancelled) setUserProfile(profile); })
+      .catch((error) => { if (!cancelled) console.error(error); })
+      .finally(() => { if (!cancelled) setProfileLoading(false); });
+    return () => { cancelled = true; };
   }, []);
 
   useEffect(() => {
@@ -27,8 +32,14 @@ export function useUserProfileAndAgent(agentId: string | null): Result {
       setAgentConfigLoading(false);
       return;
     }
+    let cancelled = false;
+    setAgentConfig(null);
     setAgentConfigLoading(true);
-    api.agents.get(agentId).then(setAgentConfig).catch(console.error).finally(() => setAgentConfigLoading(false));
+    api.agents.get(agentId, { startup: true })
+      .then((config) => { if (!cancelled) setAgentConfig(config); })
+      .catch((error) => { if (!cancelled) console.error(error); })
+      .finally(() => { if (!cancelled) setAgentConfigLoading(false); });
+    return () => { cancelled = true; };
   }, [agentId]);
 
   return { userProfile, profileLoading, agentConfig, agentConfigLoading };

package/components/dashboard/DashboardPanel.tsx

@@ -54,7 +54,7 @@ export function DashboardPanel() {
   return (
     <div className="relative h-full overflow-y-auto p-4 md:p-6 space-y-4">
       <div className="mx-auto max-w-7xl space-y-4">
-        <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="dashboard-atmosphere pointer-events-none absolute inset-0 overflow-hidden">
           <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-cyan-500/10 blur-3xl" />
           <div className="absolute top-64 -left-24 w-80 h-80 rounded-full bg-emerald-500/10 blur-3xl" />
         </div>

package/components/dashboard/Series.tsx

@@ -15,6 +15,7 @@ export function InteractiveTokenChart({ series, selectedDay, onSelectDay }: Toke
   const [barsReady, setBarsReady] = useState(false);
   const maxTotal = series.reduce((max, p) => Math.max(max, p.input_tokens_est + p.output_tokens_est), 0);
   const active = hovered != null ? series[hovered] : null;
+  const labelInterval = Math.max(1, Math.ceil(series.length / 7));
   const animationSignature = series.map((s) => `${s.day}:${s.input_tokens_est}:${s.output_tokens_est}`).join("|");
 
   useEffect(() => {
@@ -30,29 +31,35 @@ export function InteractiveTokenChart({ series, selectedDay, onSelectDay }: Toke
   return (
     <div>
       <div className="relative h-48 rounded-xl bg-[var(--bg-primary)]/35 p-2">
+        <div className="h-full overflow-x-auto overscroll-x-contain">
+          <div className="h-full flex items-end gap-1 pt-5" style={{ minWidth: `${series.length * 18}px` }}>
+            {series.map((point, idx) => (
+              <TokenBar
+                key={point.day}
+                point={point}
+                idx={idx}
+                maxTotal={maxTotal}
+                barsReady={barsReady}
+                hovered={hovered === idx}
+                selected={selectedDay === point.day}
+                showDateLabel={idx % labelInterval === 0 || idx === series.length - 1}
+                onHover={setHovered}
+                onSelectDay={onSelectDay}
+              />
+            ))}
+          </div>
+        </div>
         <div
-          className={`absolute right-2 top-2 inline-flex h-6 items-center gap-1.5 rounded-full px-2.5 text-[10px] tracking-wide transition-opacity ${
+          className={`pointer-events-none absolute right-2 top-2 inline-flex h-6 items-center gap-1.5 rounded-full px-2.5 text-[10px] tracking-wide transition-opacity ${
             active ? "bg-[var(--bg-secondary)]/85 text-[var(--text-primary)] opacity-100" : "text-[var(--text-secondary)] opacity-60"
           }`}
         >
-          {active
-            ? `${active.day} · ${formatInt(active.input_tokens_est + active.output_tokens_est)} tokens`
-            : "hover bars for details"}
-        </div>
-        <div className="h-full flex items-end gap-1 pt-5">
-          {series.map((point, idx) => (
-            <TokenBar
-              key={point.day}
-              point={point}
-              idx={idx}
-              maxTotal={maxTotal}
-              barsReady={barsReady}
-              hovered={hovered === idx}
-              selected={selectedDay === point.day}
-              onHover={setHovered}
-              onSelectDay={onSelectDay}
-            />
-          ))}
+          {active ? `${active.day} · ${formatInt(active.input_tokens_est + active.output_tokens_est)} tokens` : (
+            <>
+              <span className="hidden sm:inline">hover bars for details</span>
+              <span className="sm:hidden">tap bars; swipe for dates</span>
+            </>
+          )}
         </div>
       </div>
       <TokenChartLegend active={active} />
@@ -67,11 +74,12 @@ interface TokenBarProps {
   barsReady: boolean;
   hovered: boolean;
   selected: boolean;
+  showDateLabel: boolean;
   onHover: (i: number | null) => void;
   onSelectDay?: (day: string) => void;
 }
 
-function TokenBar({ point, idx, maxTotal, barsReady, hovered, selected, onHover, onSelectDay }: TokenBarProps) {
+function TokenBar({ point, idx, maxTotal, barsReady, hovered, selected, showDateLabel, onHover, onSelectDay }: TokenBarProps) {
   const total = point.input_tokens_est + point.output_tokens_est;
   const hasData = total > 0;
   const totalHeight = hasData && maxTotal > 0 ? Math.max(4, Math.round((total / maxTotal) * 150)) : 0;
@@ -152,7 +160,12 @@ function TokenBar({ point, idx, maxTotal, barsReady, hovered, selected, onHover,
         ) : null}
       </div>
       <span className={`mt-1 text-[10px] truncate w-full text-center ${hasData ? "text-[var(--text-secondary)]" : "text-[var(--text-secondary)]/50"}`}>
-        {point.day.slice(5)}
+        {showDateLabel && (
+          <>
+            <span className="hidden sm:inline">{point.day.slice(5)}</span>
+            <span className="sm:hidden">{point.day.slice(8)}</span>
+          </>
+        )}
       </span>
     </div>
   );

package/components/dashboard/SummaryCards.tsx

@@ -17,7 +17,7 @@ export function SummaryStrip({ data, currencyInfo, windowTokenTotal, activeDays,
   const cacheHitPct = (data.summary.cache_hit_rate * 100).toFixed(1);
   const hasCacheStats = data.summary.cache_read_tokens > 0;
   return (
-    <div className={`relative grid gap-2 ${hasCacheStats ? "md:grid-cols-5" : "md:grid-cols-4"}`}>
+    <div className={`relative grid grid-cols-2 gap-2 ${hasCacheStats ? "md:grid-cols-5" : "md:grid-cols-4"}`}>
       <InsightChip
         label="Window tokens"
         value={formatInt(windowTokenTotal)}