feat(chat): cache timer for Claude Code subscription models

Per-step and per-turn timers for the gaps between model requests (the
Claude prompt cache expires after 5 min idle). A step gap runs live under
the executing tools from step-complete until its last tool result (or the
next step's output), then is stamped on that step's metrics line beside
its cache badge. A turn gap runs live on the turn's metrics line from
done/error until the next message is sent, then is stamped there. Counts
m:ss up to 10 min, then '10+ min'; colour tracks the 5-min TTL.

Gated on claude/<model>. Pure reducer in core/metrics/cache-timer.ts;
the turn gap is seeded from an idle conversation's lastActivityAt so it
survives a reload. Stamps are in-memory only.

14 files changed, 1176 insertions, 4 deletions

diff --git a/src/app/store.svelte.ts b/src/app/store.svelte.ts
index a3bc226..fafd4d7 100644
--- a/src/app/store.svelte.ts
+++ b/src/app/store.svelte.ts
@@ -1474,6 +1474,8 @@ export function createAppStore(opts?: CreateAppStoreOptions): AppStore {
           const model = conv.model ?? activeModel;
           const store = createChatFor(conv.id, model, conv.workspaceId);
           chatStores.set(conv.id, store);
+          // Seed the cache timer's turn gap (only an idle conversation is waiting on the user).
+          if (conv.status === "idle") store.noteLastActivity(conv.lastActivityAt);
           void store.load();
           subscribeChat(conv.id);
           tabsStore.openTab({
@@ -1492,6 +1494,11 @@ export function createAppStore(opts?: CreateAppStoreOptions): AppStore {
           // authoritative conversation record is the source of truth, so a
           // differing tab workspace is corrected here.
           tabsStore.setTitle(conv.id, conv.title);
+          // Seed the cache timer's turn gap from the backend (a tab restored
+          // from localStorage at boot has no live `done` to go by). Only an
+          // idle conversation is waiting on the user.
+          if (conv.status === "idle")
+            chatStores.get(conv.id)?.noteLastActivity(conv.lastActivityAt);
           const tab = tabsStore.tabs.find((t) => t.conversationId === conv.id);
           if (tab?.workspaceId !== conv.workspaceId) {
             tabsStore.setWorkspaceId(conv.id, conv.workspaceId);
diff --git a/src/app/store.test.ts b/src/app/store.test.ts
index 89e418e..675fa64 100644
--- a/src/app/store.test.ts
+++ b/src/app/store.test.ts
@@ -855,6 +855,54 @@ describe("createAppStore", () => {
     store.dispose();
   });
 
+  it("fetchOpenConversations seeds the chat store's cache-timer turn gap from an idle conversation's lastActivityAt", async () => {
+    const ws = fakeSocket();
+    const fetchImpl: typeof fetch = async (input: string | URL | Request): Promise<Response> => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+      if (url.includes("/conversations?status=")) {
+        return new Response(
+          JSON.stringify({
+            conversations: [
+              {
+                id: "conv-seed",
+                createdAt: 1000,
+                lastActivityAt: 7777,
+                title: "Seed conv",
+                status: "idle",
+                workspaceId: "default",
+                model: "claude/claude-opus-4-6",
+              },
+            ],
+          }),
+          { status: 200 },
+        );
+      }
+      if (url.endsWith("/metrics")) {
+        return new Response(JSON.stringify({ turns: [] }), { status: 200 });
+      }
+      return new Response(JSON.stringify({ chunks: [], latestSeq: 0 }), { status: 200 });
+    };
+
+    const store = createAppStore({
+      socketFactory: () => ws,
+      fetchImpl,
+      localStorage: createFakeStorage(),
+    });
+    ws.resolveOpen();
+
+    await vi.waitFor(() => {
+      expect(store.tabs.some((t) => t.conversationId === "conv-seed")).toBe(true);
+    });
+    store.selectTab("conv-seed");
+    expect(store.activeChat.cacheTimer.running).toEqual({
+      kind: "turn",
+      turnId: null,
+      startedAt: 7777,
+    });
+
+    store.dispose();
+  });
+
   it("conversation.open WS message carrying a model stamps the tab with it", async () => {
     const ws = fakeSocket();
     const store = createAppStore({
diff --git a/src/app/views/ChatPane.svelte b/src/app/views/ChatPane.svelte
index 636cd7c..31e719e 100644
--- a/src/app/views/ChatPane.svelte
+++ b/src/app/views/ChatPane.svelte
@@ -7,13 +7,18 @@
    * preservation, the ScrollToBottom affordance, and the empty-state
    * watermark. Keyed on the active conversation exactly like today's ChatView.
    */
-  import { ChatView } from "../../features/chat";
+  import { ChatView, isClaudeSubscriptionModel } from "../../features/chat";
   import { createSmartScrollController, ScrollToBottom } from "../../features/smart-scroll";
   import { preserveViewportAcross, type AppViewPorts } from "../view-ports";
 
   let { ports }: { ports: AppViewPorts } = $props();
   const store = $derived(ports.store);
 
+  // Cache timer: Claude Code subscription models only (5-minute prompt-cache expiry).
+  const cacheTimer = $derived(
+    isClaudeSubscriptionModel(store.activeModel) ? store.activeChat.cacheTimer : null,
+  );
+
   // One controller owns the chat scroll region; the effects below feed it the
   // edges (identical to the App.svelte wiring this moved out of).
   const smartScroll = createSmartScrollController();
@@ -81,6 +86,7 @@
           thinkingKeyBase={store.activeChat.thinkingKeyBase}
           providerRetry={store.activeChat.providerRetry}
           apiBaseUrl={store.httpBase}
+          {cacheTimer}
         />
       {/key}
     </div>
diff --git a/src/core/metrics/cache-timer.test.ts b/src/core/metrics/cache-timer.test.ts
new file mode 100644
index 0000000..e55eff4
--- /dev/null
+++ b/src/core/metrics/cache-timer.test.ts
@@ -0,0 +1,344 @@
+import type { AgentEvent, StepId, TurnMetrics } from "@dispatch/wire";
+import { describe, expect, it } from "vitest";
+import type { RenderGroup } from "../chunks";
+import {
+  CACHE_TIMER_MAX_MS,
+  CACHE_TTL_MS,
+  type CacheTimerState,
+  foldCacheTimerEvent,
+  initialCacheTimerState,
+  lastTurnRowIndex,
+  seedTurnGap,
+  stopTurnGap,
+  viewCacheTimer,
+} from "./cache-timer";
+import type { MetricsRow } from "./types";
+
+const SEC = 1000;
+const MIN = 60 * SEC;
+const C = "conv";
+
+const ev = {
+  turnStart: (turnId: string): AgentEvent => ({ type: "turn-start", conversationId: C, turnId }),
+  userMessage: (turnId: string): AgentEvent => ({
+    type: "user-message",
+    conversationId: C,
+    turnId,
+    text: "hi",
+  }),
+  text: (turnId: string): AgentEvent => ({
+    type: "text-delta",
+    conversationId: C,
+    turnId,
+    delta: "x",
+  }),
+  call: (turnId: string, stepId: string, toolCallId: string): AgentEvent => ({
+    type: "tool-call",
+    conversationId: C,
+    turnId,
+    stepId: stepId as StepId,
+    toolCallId,
+    toolName: "t",
+    input: {},
+  }),
+  result: (
+    turnId: string,
+    stepId: string,
+    toolCallId: string,
+    durationMs?: number,
+  ): AgentEvent => ({
+    type: "tool-result",
+    conversationId: C,
+    turnId,
+    stepId: stepId as StepId,
+    toolCallId,
+    toolName: "t",
+    content: "ok",
+    isError: false,
+    ...(durationMs !== undefined ? { durationMs } : {}),
+  }),
+  stepComplete: (turnId: string, stepId: string): AgentEvent => ({
+    type: "step-complete",
+    conversationId: C,
+    turnId,
+    stepId: stepId as StepId,
+  }),
+  usage: (turnId: string, stepId: string): AgentEvent => ({
+    type: "usage",
+    conversationId: C,
+    turnId,
+    stepId: stepId as StepId,
+    usage: { inputTokens: 1, outputTokens: 1 },
+  }),
+  done: (turnId: string): AgentEvent => ({
+    type: "done",
+    conversationId: C,
+    turnId,
+    reason: "end-turn",
+  }),
+  error: (turnId: string): AgentEvent => ({
+    type: "error",
+    conversationId: C,
+    turnId,
+    message: "boom",
+  }),
+};
+
+const noTurn = () => undefined;
+
+/** Fold `[time, event]` pairs from the initial state. */
+function run(
+  steps: readonly (readonly [number, AgentEvent])[],
+  start: CacheTimerState = initialCacheTimerState(),
+  lastTurnId: () => string | undefined = noTurn,
+): CacheTimerState {
+  return steps.reduce((s, [at, e]) => foldCacheTimerEvent(s, e, at, lastTurnId), start);
+}
+
+describe("foldCacheTimerEvent — step gaps", () => {
+  it("runs from step-complete while tools execute, and stamps when the last result returns", () => {
+    const s1 = run([
+      [0, ev.turnStart("t1")],
+      [100, ev.call("t1", "t1#0", "a")],
+      [110, ev.call("t1", "t1#0", "b")],
+      [1_000, ev.stepComplete("t1", "t1#0")],
+    ]);
+    expect(s1.running).toMatchObject({
+      kind: "step",
+      stepId: "t1#0",
+      startedAt: 1_000,
+      toolCount: 2,
+    });
+
+    const s2 = run([[4_000, ev.result("t1", "t1#0", "a")]], s1);
+    expect(s2.running?.kind).toBe("step"); // still waiting on "b"
+    expect(s2.stepStamps.size).toBe(0);
+
+    const s3 = run([[13_000, ev.result("t1", "t1#0", "b")]], s2);
+    expect(s3.running).toBeNull();
+    expect(s3.stepStamps.get("t1#0")).toBe(12_000);
+  });
+
+  it("stamps each step of a multi-step turn separately", () => {
+    const s = run([
+      [0, ev.call("t1", "t1#0", "a")],
+      [1_000, ev.stepComplete("t1", "t1#0")],
+      [3_000, ev.result("t1", "t1#0", "a")],
+      [5_000, ev.call("t1", "t1#1", "b")],
+      [6_000, ev.stepComplete("t1", "t1#1")],
+      [66_000, ev.result("t1", "t1#1", "b")],
+    ]);
+    expect(s.stepStamps.get("t1#0")).toBe(2_000);
+    expect(s.stepStamps.get("t1#1")).toBe(60_000);
+  });
+
+  it("uses the backend tool duration when it exceeds the wall clock (late-join replay burst)", () => {
+    const s = run([
+      [5_000, ev.call("t1", "t1#0", "a")],
+      [5_000, ev.stepComplete("t1", "t1#0")],
+      [5_000, ev.result("t1", "t1#0", "a", 42_000)],
+    ]);
+    expect(s.stepStamps.get("t1#0")).toBe(42_000);
+  });
+
+  it("stops at the next step's output when a result never matched (fallback)", () => {
+    const s = run([
+      [0, ev.call("t1", "t1#0", "a")],
+      [1_000, ev.stepComplete("t1", "t1#0")],
+      [9_000, ev.text("t1")],
+    ]);
+    expect(s.running).toBeNull();
+    expect(s.stepStamps.get("t1#0")).toBe(8_000);
+  });
+
+  it("stops on a tool-call or usage from a DIFFERENT step, not its own", () => {
+    const base = run([
+      [0, ev.call("t1", "t1#0", "a")],
+      [1_000, ev.stepComplete("t1", "t1#0")],
+    ]);
+    expect(run([[2_000, ev.usage("t1", "t1#0")]], base).running?.kind).toBe("step");
+    expect(run([[3_000, ev.usage("t1", "t1#1")]], base).stepStamps.get("t1#0")).toBe(2_000);
+    expect(run([[4_000, ev.call("t1", "t1#1", "z")]], base).stepStamps.get("t1#0")).toBe(3_000);
+  });
+
+  it("discards a step with no tool calls (the final step of a turn)", () => {
+    const s = run([
+      [1_000, ev.stepComplete("t1", "t1#0")],
+      [1_050, ev.done("t1")],
+    ]);
+    expect(s.stepStamps.size).toBe(0);
+    expect(s.running).toEqual({ kind: "turn", turnId: "t1", startedAt: 1_050 });
+  });
+
+  it("stamps a step whose tools were still running when the turn ended (stopped)", () => {
+    const s = run([
+      [0, ev.call("t1", "t1#0", "a")],
+      [1_000, ev.stepComplete("t1", "t1#0")],
+      [21_000, ev.done("t1")],
+    ]);
+    expect(s.stepStamps.get("t1#0")).toBe(20_000);
+    expect(s.running?.kind).toBe("turn");
+  });
+});
+
+describe("foldCacheTimerEvent — turn gaps", () => {
+  it("starts at done and is stamped on that turn when the next turn starts", () => {
+    const s = run([
+      [1_000, ev.done("t1")],
+      [91_000, ev.userMessage("t2")],
+      [91_500, ev.turnStart("t2")],
+    ]);
+    expect(s.running).toBeNull();
+    expect(s.turnStamps.get("t1")).toBe(90_000);
+  });
+
+  it("an error also ends the turn", () => {
+    expect(run([[7, ev.error("t1")]]).running).toEqual({
+      kind: "turn",
+      turnId: "t1",
+      startedAt: 7,
+    });
+  });
+
+  it("stopTurnGap stamps on a local send", () => {
+    const s = stopTurnGap(run([[1_000, ev.done("t1")]]), 4_000, noTurn);
+    expect(s.running).toBeNull();
+    expect(s.turnStamps.get("t1")).toBe(3_000);
+  });
+
+  it("stopTurnGap is a no-op while a step gap runs", () => {
+    const base = run([
+      [0, ev.call("t1", "t1#0", "a")],
+      [1_000, ev.stepComplete("t1", "t1#0")],
+    ]);
+    expect(stopTurnGap(base, 2_000, noTurn)).toBe(base);
+  });
+});
+
+describe("seedTurnGap", () => {
+  it("seeds a turn gap with no turnId, stamped on the most recent turn when stopped", () => {
+    const seeded = seedTurnGap(initialCacheTimerState(), 1_000);
+    expect(seeded.running).toEqual({ kind: "turn", turnId: null, startedAt: 1_000 });
+    const s = stopTurnGap(seeded, 61_000, () => "t9");
+    expect(s.turnStamps.get("t9")).toBe(60_000);
+  });
+
+  it("drops a seeded gap when the most recent turn is unknown", () => {
+    const s = stopTurnGap(seedTurnGap(initialCacheTimerState(), 1_000), 2_000, noTurn);
+    expect(s.running).toBeNull();
+    expect(s.turnStamps.size).toBe(0);
+  });
+
+  it("keeps the later start, never overrides a step gap, ignores non-finite", () => {
+    const live = run([[5_000, ev.done("t1")]]);
+    expect(seedTurnGap(live, 4_000).running).toEqual({
+      kind: "turn",
+      turnId: "t1",
+      startedAt: 5_000,
+    });
+    expect(seedTurnGap(live, 6_000).running).toEqual({
+      kind: "turn",
+      turnId: "t1",
+      startedAt: 6_000,
+    });
+    const step = run([
+      [0, ev.call("t1", "t1#0", "a")],
+      [1_000, ev.stepComplete("t1", "t1#0")],
+    ]);
+    expect(seedTurnGap(step, 9_000)).toBe(step);
+    expect(seedTurnGap(initialCacheTimerState(), Number.NaN).running).toBeNull();
+  });
+});
+
+describe("viewCacheTimer", () => {
+  it("formats m:ss up to 10 minutes", () => {
+    expect(viewCacheTimer(0).label).toBe("0:00");
+    expect(viewCacheTimer(9 * SEC + 999).label).toBe("0:09");
+    expect(viewCacheTimer(MIN + 5 * SEC).label).toBe("1:05");
+    expect(viewCacheTimer(5 * MIN + 30 * SEC).label).toBe("5:30");
+    expect(viewCacheTimer(9 * MIN + 59 * SEC).label).toBe("9:59");
+    expect(viewCacheTimer(9 * MIN + 59 * SEC).capped).toBe(false);
+  });
+
+  it("reads '10+ min' and is capped at and past 10 minutes", () => {
+    expect(viewCacheTimer(CACHE_TIMER_MAX_MS)).toEqual({
+      label: "10+ min",
+      level: "error",
+      capped: true,
+    });
+    expect(viewCacheTimer(3 * 60 * MIN).label).toBe("10+ min");
+  });
+
+  it("colours by the 5-minute cache TTL", () => {
+    expect(viewCacheTimer(3 * MIN + 59 * SEC).level).toBe("success");
+    expect(viewCacheTimer(4 * MIN).level).toBe("warning");
+    expect(viewCacheTimer(CACHE_TTL_MS).level).toBe("error");
+    expect(viewCacheTimer(7 * MIN).level).toBe("error");
+  });
+
+  it("clamps negative / non-finite elapsed (clock skew) to 0:00", () => {
+    expect(viewCacheTimer(-5 * SEC).label).toBe("0:00");
+    expect(viewCacheTimer(Number.NaN).label).toBe("0:00");
+  });
+});
+
+function userRow(text = "hi"): MetricsRow {
+  const group: RenderGroup = {
+    kind: "single",
+    chunk: { seq: null, role: "user", chunk: { type: "text", text }, provisional: true },
+  };
+  return { kind: "group", group };
+}
+
+function assistantRow(turnId: string): MetricsRow {
+  const group: RenderGroup = {
+    kind: "single",
+    chunk: {
+      seq: 1,
+      role: "assistant",
+      chunk: { type: "text", text: "ok" },
+      provisional: false,
+      turnId,
+    },
+  };
+  return { kind: "group", group };
+}
+
+function turnRow(turnId: string, turnNumber: number): MetricsRow {
+  const usage = { inputTokens: 10, outputTokens: 5 };
+  const turn: TurnMetrics = { turnId, usage, steps: [{ stepId: `${turnId}#0` as StepId, usage }] };
+  return {
+    kind: "turn-metrics",
+    turn,
+    turnNumber,
+    cumulativeUsage: usage,
+    prevLastStepUsage: null,
+  };
+}
+
+describe("lastTurnRowIndex", () => {
+  it("picks the LAST turn-metrics row", () => {
+    const rows = [
+      userRow(),
+      assistantRow("t1"),
+      turnRow("t1", 1),
+      userRow(),
+      assistantRow("t2"),
+      turnRow("t2", 2),
+    ];
+    expect(lastTurnRowIndex(rows)).toBe(5);
+  });
+
+  it("is null once a user message follows the last turn", () => {
+    expect(lastTurnRowIndex([userRow(), turnRow("t1", 1), userRow("next")])).toBeNull();
+  });
+
+  it("skips trailing non-user rows after the turn row", () => {
+    expect(lastTurnRowIndex([userRow(), turnRow("t1", 1), assistantRow("t1")])).toBe(1);
+  });
+
+  it("is null with no turn-metrics rows", () => {
+    expect(lastTurnRowIndex([])).toBeNull();
+    expect(lastTurnRowIndex([userRow(), assistantRow("t1")])).toBeNull();
+  });
+});
diff --git a/src/core/metrics/cache-timer.ts b/src/core/metrics/cache-timer.ts
new file mode 100644
index 0000000..66d5fac
--- /dev/null
+++ b/src/core/metrics/cache-timer.ts
@@ -0,0 +1,285 @@
+import type { AgentEvent } from "@dispatch/wire";
+import type { MetricsRow } from "./types";
+
+/**
+ * Pure core for the **cache timer** — how long the prompt cache has sat idle
+ * between model requests. Anthropic's prompt cache (as used by the Claude Code
+ * subscription) expires 5 minutes after its last hit, so the gaps BETWEEN
+ * requests decide whether the next request reads from cache:
+ *
+ * - **step gap**: a step (one LLM round-trip) finished and its tools are
+ *   executing. Starts at `step-complete`; stops when the step's last tool
+ *   result arrives (the next request fires right after) or, failing that, when
+ *   anything from the next step shows up. Its final value is **stamped** on
+ *   that step (keyed by `stepId`).
+ * - **turn gap**: the turn ended (`done` / `error`) and the conversation is
+ *   waiting on the user. Stops when a new message is sent (locally, or a
+ *   `user-message` / `turn-start` from another client) and is stamped on that
+ *   turn (keyed by `turnId`).
+ *
+ * At most ONE gap runs at a time (`running`). Zero DOM, zero clock: every fold
+ * takes the current time as an argument.
+ */
+
+/** Prompt-cache time-to-live: 5 minutes (drives the badge colour). */
+export const CACHE_TTL_MS = 5 * 60 * 1000;
+
+/** The timer counts up to this, then reads "10+ min". */
+export const CACHE_TIMER_MAX_MS = 10 * 60 * 1000;
+
+/** Within this much of the TTL the timer warns (colour only). */
+const WARN_AT_MS = CACHE_TTL_MS - 60 * 1000;
+
+/** A step gap in progress: the step's tools are executing. */
+export interface RunningStepGap {
+  readonly kind: "step";
+  readonly turnId: string;
+  readonly stepId: string;
+  /** Epoch ms the step completed. */
+  readonly startedAt: number;
+  /** How many tool calls the step made (`0` → nothing to show; never stamped). */
+  readonly toolCount: number;
+  /** Tool calls still awaiting their result. */
+  readonly pending: ReadonlySet<string>;
+  /** Longest backend-reported tool `durationMs` seen so far for this step. */
+  readonly maxToolMs: number;
+}
+
+/** A turn gap in progress: the turn ended and nothing has been sent since. */
+export interface RunningTurnGap {
+  readonly kind: "turn";
+  /**
+   * The turn that ended, or `null` when seeded from the backend's
+   * `lastActivityAt` after a reload (no live `done` seen) — then it belongs to
+   * the most recent turn, resolved positionally / via `lastTurnId` on stop.
+   */
+  readonly turnId: string | null;
+  /** Epoch ms the turn ended. */
+  readonly startedAt: number;
+}
+
+export type RunningGap = RunningStepGap | RunningTurnGap;
+
+export interface CacheTimerState {
+  readonly running: RunningGap | null;
+  /** Stamped step gaps: `stepId` → elapsed ms. */
+  readonly stepStamps: ReadonlyMap<string, number>;
+  /** Stamped turn gaps: `turnId` → elapsed ms. */
+  readonly turnStamps: ReadonlyMap<string, number>;
+  /** Tool calls seen per step in the CURRENT turn (`stepId` → call ids). */
+  readonly calls: ReadonlyMap<string, ReadonlySet<string>>;
+  /** Tool results seen per step in the CURRENT turn (`stepId` → call ids). */
+  readonly results: ReadonlyMap<string, ReadonlySet<string>>;
+  /** Longest tool `durationMs` per step in the CURRENT turn. */
+  readonly toolMs: ReadonlyMap<string, number>;
+}
+
+export function initialCacheTimerState(): CacheTimerState {
+  return {
+    running: null,
+    stepStamps: new Map(),
+    turnStamps: new Map(),
+    calls: new Map(),
+    results: new Map(),
+    toolMs: new Map(),
+  };
+}
+
+function addTo(
+  map: ReadonlyMap<string, ReadonlySet<string>>,
+  key: string,
+  value: string,
+): ReadonlyMap<string, ReadonlySet<string>> {
+  const next = new Map(map);
+  next.set(key, new Set([...(map.get(key) ?? []), value]));
+  return next;
+}
+
+function withEntry(map: ReadonlyMap<string, number>, key: string, value: number) {
+  const next = new Map(map);
+  next.set(key, value);
+  return next;
+}
+
+/**
+ * Stop the running STEP gap (if any). A step that made tool calls is stamped
+ * with `max(wall-clock elapsed, longest backend tool duration)` — the backend
+ * figure keeps a late-join replay (whole step delivered in one burst, ~0
+ * elapsed) honest. A step with no tool calls is discarded.
+ */
+function stopStep(state: CacheTimerState, now: number): CacheTimerState {
+  const r = state.running;
+  if (r === null || r.kind !== "step") return state;
+  if (r.toolCount === 0) return { ...state, running: null };
+  const elapsed = Math.max(0, now - r.startedAt, r.maxToolMs);
+  return { ...state, running: null, stepStamps: withEntry(state.stepStamps, r.stepId, elapsed) };
+}
+
+/**
+ * Stop the running TURN gap (if any) and stamp it on its turn. A seeded gap
+ * (`turnId === null`) is stamped on `lastTurnId()` — the most recent turn's
+ * id — or dropped when that is unknown.
+ */
+export function stopTurnGap(
+  state: CacheTimerState,
+  now: number,
+  lastTurnId: () => string | undefined,
+): CacheTimerState {
+  const r = state.running;
+  if (r === null || r.kind !== "turn") return state;
+  const turnId = r.turnId ?? lastTurnId();
+  if (turnId === undefined) return { ...state, running: null };
+  const elapsed = Math.max(0, now - r.startedAt);
+  return { ...state, running: null, turnStamps: withEntry(state.turnStamps, turnId, elapsed) };
+}
+
+/** A turn ended: close any step gap, forget the turn's tool bookkeeping, start the turn gap. */
+function endTurn(state: CacheTimerState, turnId: string, now: number): CacheTimerState {
+  const s = stopStep(state, now);
+  return {
+    ...s,
+    running: { kind: "turn", turnId, startedAt: now },
+    calls: new Map(),
+    results: new Map(),
+    toolMs: new Map(),
+  };
+}
+
+/**
+ * Fold one live event into the cache-timer state at time `now`. `lastTurnId`
+ * resolves a seeded turn gap's turn when a new turn starts (see
+ * `stopTurnGap`); it is only called in that case.
+ */
+export function foldCacheTimerEvent(
+  state: CacheTimerState,
+  event: AgentEvent,
+  now: number,
+  lastTurnId: () => string | undefined,
+): CacheTimerState {
+  const r = state.running;
+  switch (event.type) {
+    case "user-message":
+    case "turn-start":
+      // A new turn is starting — the user (here or elsewhere) sent a message.
+      return stopTurnGap(state, now, lastTurnId);
+
+    case "tool-call": {
+      // A call from a DIFFERENT step means the next step is already streaming.
+      const s = r?.kind === "step" && r.stepId !== event.stepId ? stopStep(state, now) : state;
+      return { ...s, calls: addTo(s.calls, event.stepId, event.toolCallId) };
+    }
+
+    case "tool-result": {
+      const results = addTo(state.results, event.stepId, event.toolCallId);
+      const dur = event.durationMs ?? 0;
+      const toolMs =
+        dur > (state.toolMs.get(event.stepId) ?? 0)
+          ? withEntry(state.toolMs, event.stepId, dur)
+          : state.toolMs;
+      let s: CacheTimerState = { ...state, results, toolMs };
+      if (r?.kind === "step" && r.stepId === event.stepId) {
+        const pending = new Set(r.pending);
+        pending.delete(event.toolCallId);
+        s = { ...s, running: { ...r, pending, maxToolMs: Math.max(r.maxToolMs, dur) } };
+        // Every tool of the step has returned → the next request fires now.
+        if (pending.size === 0) s = stopStep(s, now);
+      }
+      return s;
+    }
+
+    case "step-complete": {
+      const s = stopStep(stopTurnGap(state, now, lastTurnId), now);
+      const calls = s.calls.get(event.stepId) ?? new Set<string>();
+      const done = s.results.get(event.stepId) ?? new Set<string>();
+      const pending = new Set([...calls].filter((id) => !done.has(id)));
+      return {
+        ...s,
+        running: {
+          kind: "step",
+          turnId: event.turnId,
+          stepId: event.stepId,
+          startedAt: now,
+          toolCount: calls.size,
+          pending,
+          maxToolMs: s.toolMs.get(event.stepId) ?? 0,
+        },
+      };
+    }
+
+    case "text-delta":
+    case "reasoning-delta":
+    case "provider-retry":
+      // Output (or a retry) from the next request: the gap is over.
+      return r?.kind === "step" ? stopStep(state, now) : state;
+
+    case "usage":
+      return r?.kind === "step" && event.stepId !== undefined && event.stepId !== r.stepId
+        ? stopStep(state, now)
+        : state;
+
+    case "done":
+    case "error":
+      return endTurn(state, event.turnId, now);
+
+    default:
+      return state;
+  }
+}
+
+/**
+ * Seed a turn gap from an authoritative "last activity" timestamp (the
+ * backend's `lastActivityAt`, for a conversation that is idle — e.g. after a
+ * reload, when no live `done` was seen). Never overrides a running step gap;
+ * a running turn gap keeps the LATER start. Non-finite input is ignored.
+ */
+export function seedTurnGap(state: CacheTimerState, at: number): CacheTimerState {
+  if (!Number.isFinite(at)) return state;
+  const r = state.running;
+  if (r === null) return { ...state, running: { kind: "turn", turnId: null, startedAt: at } };
+  if (r.kind === "turn" && at > r.startedAt) return { ...state, running: { ...r, startedAt: at } };
+  return state;
+}
+
+// ── View ──────────────────────────────────────────────────────────────────────
+
+/** Formatted cache-timer view: label + colour severity + capped flag. */
+export interface CacheTimerView {
+  /** `"m:ss"` up to 10 minutes, then `"10+ min"`. */
+  readonly label: string;
+  /** Colour by the 5-minute cache TTL (maps to DaisyUI `badge-{level}`). */
+  readonly level: "success" | "warning" | "error";
+  /** Whether the 10-minute display cap was reached (a live timer may stop ticking). */
+  readonly capped: boolean;
+}
+
+/**
+ * Build the view for `elapsedMs`. Colour tracks the cache TTL: success under
+ * 4 min, warning in the last minute, error once the cache has likely expired.
+ * Negative / non-finite elapsed (clock skew) clamps to `0:00`.
+ */
+export function viewCacheTimer(elapsedMs: number): CacheTimerView {
+  const ms = Number.isFinite(elapsedMs) && elapsedMs > 0 ? elapsedMs : 0;
+  const level = ms >= CACHE_TTL_MS ? "error" : ms >= WARN_AT_MS ? "warning" : "success";
+  if (ms >= CACHE_TIMER_MAX_MS) return { label: "10+ min", level, capped: true };
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return { label: `${minutes}:${seconds.toString().padStart(2, "0")}`, level, capped: false };
+}
+
+/**
+ * Index of the most recent turn's metrics row — the LAST `turn-metrics` row,
+ * provided no user message follows it. Where a SEEDED turn gap (no `turnId`)
+ * renders. `null` when there is no such row.
+ */
+export function lastTurnRowIndex(rows: readonly MetricsRow[]): number | null {
+  for (let i = rows.length - 1; i >= 0; i--) {
+    const row = rows[i];
+    if (row === undefined) continue;
+    if (row.kind === "turn-metrics") return i;
+    if (row.kind === "group" && row.group.kind === "single" && row.group.chunk.role === "user") {
+      return null;
+    }
+  }
+  return null;
+}
diff --git a/src/core/metrics/index.ts b/src/core/metrics/index.ts
index d3c9669..d9df7f5 100644
--- a/src/core/metrics/index.ts
+++ b/src/core/metrics/index.ts
@@ -1,4 +1,19 @@
 export {
+  CACHE_TIMER_MAX_MS,
+  CACHE_TTL_MS,
+  type CacheTimerState,
+  type CacheTimerView,
+  foldCacheTimerEvent,
+  initialCacheTimerState,
+  lastTurnRowIndex,
+  type RunningGap,
+  type RunningStepGap,
+  type RunningTurnGap,
+  seedTurnGap,
+  stopTurnGap,
+  viewCacheTimer,
+} from "./cache-timer";
+export {
   type ContextUsage,
   computeCachePct,
   computeContextUsage,
diff --git a/src/features/chat/index.ts b/src/features/chat/index.ts
index 59da39b..fec2cdb 100644
--- a/src/features/chat/index.ts
+++ b/src/features/chat/index.ts
@@ -8,6 +8,8 @@ export { groupRenderedChunks, resolveImageUrl, viewProviderRetry } from "../../c
 export type { TurnMetricsEntry } from "../../core/metrics";
 export type { NamedAgentLike, NamedAgentSnapshotLike } from "./model-select";
 export {
+  CLAUDE_SUBSCRIPTION_KEY,
+  isClaudeSubscriptionModel,
   isNamedAgentSelection,
   isNumberedOpenCode,
   isVisionModel,
diff --git a/src/features/chat/model-select.test.ts b/src/features/chat/model-select.test.ts
index 57de11d..523f1d8 100644
--- a/src/features/chat/model-select.test.ts
+++ b/src/features/chat/model-select.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  isClaudeSubscriptionModel,
   isNamedAgentSelection,
   isVisionModel,
   joinModelName,
@@ -192,3 +193,23 @@ describe("named-agent provider helpers", () => {
     expect(namedAgentSelectionLabel("Coding")).toBe("Named Agents -> Coding");
   });
 });
+
+describe("isClaudeSubscriptionModel", () => {
+  it("is true for claude/<model> (the Claude Code subscription credential)", () => {
+    expect(isClaudeSubscriptionModel("claude/claude-opus-4-6")).toBe(true);
+    expect(isClaudeSubscriptionModel("claude/claude-sonnet-4-6")).toBe(true);
+  });
+
+  it("is false for Claude models served through other credentials", () => {
+    expect(isClaudeSubscriptionModel("opencode-1/claude-sonnet-4.5")).toBe(false);
+    expect(isClaudeSubscriptionModel("openrouter/anthropic/claude-opus-4")).toBe(false);
+    expect(isClaudeSubscriptionModel("openai/gpt-4o")).toBe(false);
+  });
+
+  it("is false for a bare key, a lookalike key, or undefined", () => {
+    expect(isClaudeSubscriptionModel("claude")).toBe(false);
+    expect(isClaudeSubscriptionModel("claude/")).toBe(false);
+    expect(isClaudeSubscriptionModel("claude-2/claude-opus-4-6")).toBe(false);
+    expect(isClaudeSubscriptionModel(undefined)).toBe(false);
+  });
+});
diff --git a/src/features/chat/model-select.ts b/src/features/chat/model-select.ts
index 6f198f3..bebad2c 100644
--- a/src/features/chat/model-select.ts
+++ b/src/features/chat/model-select.ts
@@ -63,6 +63,25 @@ export function isNumberedOpenCode(id: string): boolean {
 }
 
 /**
+ * The credential key of the Claude Code subscription (the external Claude
+ * extension — `auth-claude` + `provider-anthropic`). The backend registers it
+ * under `DISPATCH_CLAUDE_CREDENTIAL`, default `"claude"`, so its models arrive
+ * as `claude/<model>`.
+ */
+export const CLAUDE_SUBSCRIPTION_KEY = "claude";
+
+/**
+ * True iff `full` is a model served through the Claude Code subscription
+ * (`claude/<model>`). Gates the cache timer (that subscription's prompt cache
+ * expires after 5 minutes). A bare key with no model is not a model.
+ */
+export function isClaudeSubscriptionModel(full: string | undefined): boolean {
+  if (full === undefined) return false;
+  const { key, model } = splitModelName(full);
+  return key === CLAUDE_SUBSCRIPTION_KEY && model !== "";
+}
+
+/**
  * A friendly human label for a model key/provider id: `opencode-<n>` →
  * "OpenCode #<n>"; any other id is returned unchanged. The RAW id is still what
  * gets selected/persisted — this only affects display.
diff --git a/src/features/chat/store.svelte.ts b/src/features/chat/store.svelte.ts
index 7f8e113..01ad9f9 100644
--- a/src/features/chat/store.svelte.ts
+++ b/src/features/chat/store.svelte.ts
@@ -25,13 +25,17 @@ import {
   unloadCount,
   windowTranscript,
 } from "../../core/chunks";
-import type { MetricsState, TurnMetricsEntry } from "../../core/metrics";
+import type { CacheTimerState, MetricsState, TurnMetricsEntry } from "../../core/metrics";
 import {
   applyDurableMetrics,
+  foldCacheTimerEvent,
   foldMetricsEvent,
+  initialCacheTimerState,
   initialMetricsState,
+  seedTurnGap,
   selectCurrentContextSize,
   selectOrderedTurnMetrics,
+  stopTurnGap,
 } from "../../core/metrics";
 import type { ConversationCache } from "../conversation-cache";
 import type { NamedAgentSelectionSnapshot } from "../named-agents";
@@ -78,6 +82,8 @@ export interface ChatStoreDependencies {
    * folded synchronously (the original behavior; used by tests).
    */
   readonly scheduleFlush?: (flush: () => void) => void;
+  /** Wall clock (epoch ms) — times the cache-timer gaps. Absent → `Date.now`. */
+  readonly now?: () => number;
 }
 
 export interface ChatStore {
@@ -122,6 +128,20 @@ export interface ChatStore {
    * a trim (see `TranscriptState.hiddenThinkingCount`).
    */
   readonly thinkingKeyBase: number;
+  /**
+   * The cache timer (see `core/metrics/cache-timer.ts`): the running gap
+   * between model requests (a step's tools executing, or the wait after a turn
+   * ended) plus the stamped durations of finished gaps, keyed by `stepId` /
+   * `turnId`. Timed with the local clock from live events; in-memory only (a
+   * reload keeps just a turn gap seeded via `noteLastActivity`).
+   */
+  readonly cacheTimer: CacheTimerState;
+  /**
+   * Seed the turn gap from an authoritative activity timestamp (the
+   * conversation list's `lastActivityAt`) — call only for an IDLE conversation.
+   * Ignored while a turn is generating; a running turn gap keeps the later start.
+   */
+  noteLastActivity(at: number): void;
   handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void;
   /**
    * Send a user message (start a turn via `chat.send`). Optimistically echoes
@@ -200,8 +220,16 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
   let _error = $state<string | null>(null);
   let _model = $state<string | undefined>(deps.model);
   let _namedAgent = $state<NamedAgentSelectionSnapshot | null>(null);
+  let cacheTimer = $state<CacheTimerState>(initialCacheTimerState());
+  const now = deps.now ?? Date.now;
   let disposed = false;
 
+  /** The most recent turn's id (resolves a seeded turn gap when it is stamped). */
+  function lastTurnIdOf(m: MetricsState): string | undefined {
+    const entries = selectOrderedTurnMetrics(m);
+    return entries[entries.length - 1]?.turnId;
+  }
+
   let chatLimit = normalizeChatLimit(deps.chatLimit);
 
   // Memoized projections, keyed by state-object identity (the reducers are
@@ -242,14 +270,19 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
     let m = metrics;
     let sealed = false;
     let failed = false;
+    let c = cacheTimer;
+    const at = now();
     for (const event of events) {
       t = foldEvent(t, event);
       m = foldMetricsEvent(m, event);
+      const mNow = m;
+      c = foldCacheTimerEvent(c, event, at, () => lastTurnIdOf(mNow));
       if (t.sealedTurnId !== null) sealed = true;
       else if (event.type === "error") failed = true;
     }
     transcript = t;
     metrics = m;
+    cacheTimer = c;
     maybeTrim();
     if (sealed) {
       void syncTail();
@@ -390,6 +423,14 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
     get thinkingKeyBase(): number {
       return transcript.hiddenThinkingCount;
     },
+    get cacheTimer(): CacheTimerState {
+      return cacheTimer;
+    },
+
+    noteLastActivity(at: number): void {
+      if (selectGenerating(transcript)) return;
+      cacheTimer = seedTurnGap(cacheTimer, at);
+    },
 
     handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void {
       if (msg.type === "chat.error") {
@@ -415,6 +456,8 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
 
     send(text: string, images?: readonly ImageInput[]): void {
       flushEvents();
+      // Sending ends the wait since the last turn: stamp it on that turn.
+      cacheTimer = stopTurnGap(cacheTimer, now(), () => lastTurnIdOf(metrics));
       transcript = appendUserMessage(transcript, text, images);
       maybeTrim();
       const msg: ChatSendMessage = {
diff --git a/src/features/chat/store.test.ts b/src/features/chat/store.test.ts
index f9b4b38..8604107 100644
--- a/src/features/chat/store.test.ts
+++ b/src/features/chat/store.test.ts
@@ -1789,3 +1789,106 @@ describe("createChatStore — batched delta application (scheduleFlush)", () =>
     expect(store.chunks).toHaveLength(0);
   });
 });
+
+describe("createChatStore — cacheTimer", () => {
+  function makeStore(now: () => number) {
+    return createChatStore({
+      conversationId: CONV_ID,
+      transport: createFakeTransport().impl,
+      historySync: createFakeHistorySync().impl,
+      metricsSync: createFakeMetricsSync().impl,
+      cache: createFakeCache().impl,
+      now,
+    });
+  }
+  const call = (stepId: string, toolCallId: string) =>
+    deltaEvent({
+      type: "tool-call",
+      conversationId: CONV_ID,
+      turnId: "t1",
+      stepId: stepId as StepId,
+      toolCallId,
+      toolName: "read_file",
+      input: {},
+    });
+  const result = (stepId: string, toolCallId: string) =>
+    deltaEvent({
+      type: "tool-result",
+      conversationId: CONV_ID,
+      turnId: "t1",
+      stepId: stepId as StepId,
+      toolCallId,
+      toolName: "read_file",
+      content: "ok",
+      isError: false,
+    });
+  const stepComplete = (stepId: string) =>
+    deltaEvent({
+      type: "step-complete",
+      conversationId: CONV_ID,
+      turnId: "t1",
+      stepId: stepId as StepId,
+    });
+  const done = (turnId: string) =>
+    deltaEvent({ type: "done", conversationId: CONV_ID, turnId, reason: "end-turn" });
+
+  it("is idle until something happens", () => {
+    const store = makeStore(() => 1000);
+    expect(store.cacheTimer.running).toBeNull();
+    store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" }));
+    expect(store.cacheTimer.running).toBeNull();
+    store.dispose();
+  });
+
+  it("times a step's tool execution with the injected clock and stamps it", () => {
+    let clock = 0;
+    const store = makeStore(() => clock);
+    store.handleDelta(call("t1#0", "a"));
+    clock = 1_000;
+    store.handleDelta(stepComplete("t1#0"));
+    expect(store.cacheTimer.running).toMatchObject({ kind: "step", startedAt: 1_000 });
+    clock = 31_000;
+    store.handleDelta(result("t1#0", "a"));
+    expect(store.cacheTimer.running).toBeNull();
+    expect(store.cacheTimer.stepStamps.get("t1#0")).toBe(30_000);
+    store.dispose();
+  });
+
+  it("starts a turn gap on done and stamps it on send", () => {
+    let clock = 5_000;
+    const store = makeStore(() => clock);
+    store.handleDelta(done("t1"));
+    expect(store.cacheTimer.running).toEqual({ kind: "turn", turnId: "t1", startedAt: 5_000 });
+    clock = 125_000;
+    store.send("next");
+    expect(store.cacheTimer.running).toBeNull();
+    expect(store.cacheTimer.turnStamps.get("t1")).toBe(120_000);
+    store.dispose();
+  });
+
+  it("ignores another conversation's events", () => {
+    const store = makeStore(() => 5_000);
+    store.handleDelta(
+      deltaEvent({ type: "done", conversationId: "other", turnId: "t1", reason: "end-turn" }),
+    );
+    expect(store.cacheTimer.running).toBeNull();
+    store.dispose();
+  });
+
+  it("noteLastActivity seeds a turn gap, keeps the later start, and is ignored while generating", () => {
+    const store = makeStore(() => 5_000);
+    store.noteLastActivity(3_000);
+    expect(store.cacheTimer.running).toEqual({ kind: "turn", turnId: null, startedAt: 3_000 });
+    store.handleDelta(done("t1"));
+    expect(store.cacheTimer.running).toEqual({ kind: "turn", turnId: "t1", startedAt: 5_000 });
+    store.noteLastActivity(4_000); // an older seed never rewinds it
+    expect(store.cacheTimer.running).toMatchObject({ startedAt: 5_000 });
+    store.dispose();
+
+    const busy = makeStore(() => 5_000);
+    busy.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t2" }));
+    busy.noteLastActivity(4_000);
+    expect(busy.cacheTimer.running).toBeNull();
+    busy.dispose();
+  });
+});
diff --git a/src/features/chat/ui.test.ts b/src/features/chat/ui.test.ts
index 91585e2..6b7176d 100644
--- a/src/features/chat/ui.test.ts
+++ b/src/features/chat/ui.test.ts
@@ -3,7 +3,11 @@ import { render, screen, within } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import type { RenderedChunk } from "../../core/chunks";
-import type { TurnMetricsEntry } from "../../core/metrics";
+import {
+  type CacheTimerState,
+  initialCacheTimerState,
+  type TurnMetricsEntry,
+} from "../../core/metrics";
 import type { ConvertedJpeg } from "./adapter/image-encode";
 import ChatView from "./ui/ChatView.svelte";
 import Composer from "./ui/Composer.svelte";
@@ -1542,3 +1546,160 @@ describe("ReasoningEffortSelector", () => {
     });
   });
 });
+
+describe("ChatView — cache timer", () => {
+  const usage = { inputTokens: 1000, outputTokens: 10, cacheReadTokens: 900 };
+  function step(stepId: string) {
+    return { stepId: stepId as StepId, usage, decodeMs: 100 };
+  }
+  function turn(turnId: string, stepIds: string[] = [`${turnId}#0`]): TurnMetricsEntry {
+    const steps = stepIds.map(step);
+    return { turnId, steps, total: { turnId, usage, steps } };
+  }
+  function exchange(turnId: string, base: number): RenderedChunk[] {
+    return [
+      {
+        seq: base,
+        role: "user",
+        chunk: { type: "text", text: `q-${turnId}` },
+        provisional: false,
+        turnId,
+      },
+      {
+        seq: base + 1,
+        role: "assistant",
+        chunk: { type: "text", text: `a-${turnId}` },
+        provisional: false,
+        turnId,
+      },
+    ];
+  }
+  function toolChunk(turnId: string, stepId: string, seq: number): RenderedChunk {
+    return {
+      seq,
+      role: "assistant",
+      chunk: {
+        type: "tool-call",
+        toolCallId: `call-${stepId}`,
+        toolName: "read_file",
+        input: {},
+        stepId: stepId as StepId,
+      },
+      provisional: false,
+      turnId,
+    };
+  }
+  function state(partial: Partial<CacheTimerState>): CacheTimerState {
+    return { ...initialCacheTimerState(), ...partial };
+  }
+
+  it("renders nothing when the feature is off (cacheTimer null)", () => {
+    render(ChatView, { props: { chunks: exchange("t1", 1), turnMetrics: [turn("t1")] } });
+    expect(screen.queryByTestId("cache-timer-live")).toBeNull();
+    expect(screen.queryByTestId("cache-timer-stamp")).toBeNull();
+  });
+
+  it("shows a live timer under executing tools, counting up to 10+ min", async () => {
+    vi.useFakeTimers();
+    try {
+      const chunks = [exchange("t1", 1)[0] as RenderedChunk, toolChunk("t1", "t1#0", 2)];
+      render(ChatView, {
+        props: {
+          chunks,
+          turnMetrics: [{ turnId: "t1", steps: [step("t1#0")], total: null }],
+          cacheTimer: state({
+            running: {
+              kind: "step",
+              turnId: "t1",
+              stepId: "t1#0",
+              startedAt: Date.now(),
+              toolCount: 1,
+              pending: new Set(["call-t1#0"]),
+              maxToolMs: 0,
+            },
+          }),
+        },
+      });
+      const row = screen.getByTestId("cache-timer-tools");
+      expect(row).toHaveTextContent(/Running tools/);
+      expect(screen.getByTestId("cache-timer-live")).toHaveTextContent("0:00");
+      await vi.advanceTimersByTimeAsync(5 * 60_000 + 30_000);
+      expect(screen.getByTestId("cache-timer-live")).toHaveTextContent("5:30");
+      await vi.advanceTimersByTimeAsync(5 * 60_000);
+      expect(screen.getByTestId("cache-timer-live")).toHaveTextContent("10+ min");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("hides the live tools row for a step with no tool calls", () => {
+    render(ChatView, {
+      props: {
+        chunks: exchange("t1", 1),
+        turnMetrics: [{ turnId: "t1", steps: [step("t1#0")], total: null }],
+        cacheTimer: state({
+          running: {
+            kind: "step",
+            turnId: "t1",
+            stepId: "t1#0",
+            startedAt: Date.now(),
+            toolCount: 0,
+            pending: new Set(),
+            maxToolMs: 0,
+          },
+        }),
+      },
+    });
+    expect(screen.queryByTestId("cache-timer-tools")).toBeNull();
+  });
+
+  it("stamps a finished step gap on that step's line, next to its cache badge", () => {
+    const chunks = [exchange("t1", 1)[0] as RenderedChunk, toolChunk("t1", "t1#0", 2)];
+    render(ChatView, {
+      props: {
+        chunks,
+        turnMetrics: [{ turnId: "t1", steps: [step("t1#0")], total: null }],
+        cacheTimer: state({ stepStamps: new Map([["t1#0", 65_000]]) }),
+      },
+    });
+    const stamp = screen.getByTestId("cache-timer-stamp");
+    expect(stamp).toHaveTextContent("1:05");
+    // Same line as the step's cache badge.
+    expect(stamp.parentElement).toContainElement(screen.getByTestId("step-cache-badge"));
+    expect(screen.queryByTestId("cache-timer-tools")).toBeNull();
+  });
+
+  it("runs a turn gap live on that turn's row, and shows stamps on earlier turns", () => {
+    render(ChatView, {
+      props: {
+        chunks: [...exchange("t1", 1), ...exchange("t2", 3)],
+        turnMetrics: [turn("t1"), turn("t2")],
+        cacheTimer: state({
+          running: { kind: "turn", turnId: "t2", startedAt: Date.now() },
+          turnStamps: new Map([["t1", 11 * 60_000]]),
+        }),
+      },
+    });
+    const live = screen.getByTestId("cache-timer-live");
+    expect(live.closest(".chat-bubble")).toHaveTextContent(/turn 2/);
+    const stamp = screen.getByTestId("cache-timer-stamp");
+    expect(stamp).toHaveTextContent("10+ min");
+    expect(stamp.closest(".chat-bubble")).toHaveTextContent(/turn 1/);
+  });
+
+  it("puts a SEEDED turn gap (no turnId) on the most recent turn's row", () => {
+    render(ChatView, {
+      props: {
+        chunks: [...exchange("t1", 1), ...exchange("t2", 3)],
+        turnMetrics: [turn("t1"), turn("t2")],
+        cacheTimer: state({
+          running: { kind: "turn", turnId: null, startedAt: Date.now() - 2 * 60_000 },
+        }),
+      },
+    });
+    const badges = screen.getAllByTestId("cache-timer-live");
+    expect(badges).toHaveLength(1);
+    expect(badges[0]).toHaveTextContent("2:00");
+    expect(badges[0]?.closest(".chat-bubble")).toHaveTextContent(/turn 2/);
+  });
+});
diff --git a/src/features/chat/ui/CacheTimerBadge.svelte b/src/features/chat/ui/CacheTimerBadge.svelte
new file mode 100644
index 0000000..e5abed5
--- /dev/null
+++ b/src/features/chat/ui/CacheTimerBadge.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  /**
+   * One cache-timer badge. LIVE when given `since` (counts up from that epoch
+   * ms, ticking once a second, and stops ticking at the 10-minute cap); STAMPED
+   * when given `elapsedMs` (a finished gap — static). Formatting lives in
+   * `core/metrics` (`viewCacheTimer`). Owning the tick here means only this
+   * badge re-renders each second, not the transcript.
+   */
+  import { untrack } from "svelte";
+  import { CACHE_TIMER_MAX_MS, viewCacheTimer } from "../../../core/metrics";
+
+  let {
+    since,
+    elapsedMs,
+    now = Date.now,
+  }: {
+    /** Live: epoch ms the gap started. */
+    since?: number;
+    /** Stamped: the gap's final duration (wins over `since`). */
+    elapsedMs?: number;
+    /** Wall clock (injected for tests). */
+    now?: () => number;
+  } = $props();
+
+  // Initial read only (the effect below keeps it current while live).
+  let current = $state(untrack(() => now()));
+
+  $effect(() => {
+    if (elapsedMs !== undefined || since === undefined) return;
+    const start = since;
+    current = now();
+    if (current - start >= CACHE_TIMER_MAX_MS) return;
+    const id = setInterval(() => {
+      current = now();
+      if (current - start >= CACHE_TIMER_MAX_MS) clearInterval(id);
+    }, 1000);
+    return () => clearInterval(id);
+  });
+
+  const badgeClass = {
+    success: "badge-success",
+    warning: "badge-warning",
+    error: "badge-error",
+  } as const;
+
+  const live = $derived(elapsedMs === undefined);
+  const view = $derived(viewCacheTimer(elapsedMs ?? current - (since ?? current)));
+</script>
+
+<span
+  class="badge badge-sm gap-1 font-mono tabular-nums {badgeClass[view.level]}"
+  class:badge-outline={!live}
+  title={live
+    ? "Cache timer (running): time since the last model request. The Claude prompt cache expires after 5 minutes idle."
+    : "Cache timer (stopped): how long the cache sat idle before the next request. The Claude prompt cache expires after 5 minutes idle."}
+  data-testid={live ? "cache-timer-live" : "cache-timer-stamp"}
+  ><span aria-hidden="true">⏱</span>{view.label}</span
+>
diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte
index 18fea7c..e641791 100644
--- a/src/features/chat/ui/ChatView.svelte
+++ b/src/features/chat/ui/ChatView.svelte
@@ -2,7 +2,9 @@
   import type { TurnProviderRetryEvent } from "@dispatch/wire";
   import { groupRenderedChunks, resolveImageUrl, type RenderedChunk, viewProviderRetry } from "../index";
   import {
+    type CacheTimerState,
     interleaveTurnMetrics,
+    lastTurnRowIndex,
     viewCacheRate,
     viewExpectedCache,
     viewStepMetrics,
@@ -10,6 +12,7 @@
     type TurnMetricsEntry,
   } from "../../../core/metrics";
   import { Markdown } from "../../markdown";
+  import CacheTimerBadge from "./CacheTimerBadge.svelte";
   import LazyCollapse from "./LazyCollapse.svelte";
   import ToolCard from "./ToolCard.svelte";
 
@@ -27,6 +30,7 @@
     thinkingKeyBase = 0,
     providerRetry = null,
     apiBaseUrl = "",
+    cacheTimer = null,
   }: {
     chunks: readonly RenderedChunk[];
     turnMetrics?: readonly TurnMetricsEntry[];
@@ -55,6 +59,14 @@
      * "" (root-relative — a browser resolves `/images/…` against its origin).
      */
     apiBaseUrl?: string;
+    /**
+     * The cache timer (gaps between model requests): a running step gap shows
+     * live at the bottom (under the executing tools), a running turn gap live
+     * on that turn's metrics row; finished gaps are stamped on their step /
+     * turn metrics line. `null` (the default) hides it entirely — the caller
+     * gates on the model.
+     */
+    cacheTimer?: CacheTimerState | null;
   } = $props();
 
   // True while a show-earlier page-in is awaited (disables the button).
@@ -74,6 +86,31 @@
 
   const rows = $derived(interleaveTurnMetrics(groups, turnMetrics));
 
+  // A SEEDED turn gap (no turnId — e.g. after a reload) renders on the most
+  // recent turn's row (when no user message follows it).
+  const seededTurnRow = $derived(
+    cacheTimer?.running?.kind === "turn" && cacheTimer.running.turnId === null
+      ? lastTurnRowIndex(rows)
+      : null,
+  );
+
+  /** Start of the running turn gap if it belongs on this turn row, else undefined. */
+  function liveTurnSince(turnId: string, rowIndex: number): number | undefined {
+    const r = cacheTimer?.running;
+    if (r?.kind !== "turn") return undefined;
+    if (r.turnId === turnId || (r.turnId === null && rowIndex === seededTurnRow)) {
+      return r.startedAt;
+    }
+    return undefined;
+  }
+
+  // A running step gap with tool calls → the live timer under the executing tools.
+  const liveStepGap = $derived(
+    cacheTimer?.running?.kind === "step" && cacheTimer.running.toolCount > 0
+      ? cacheTimer.running
+      : null,
+  );
+
   // Tool cards use toolCallId keys across pending/result/seal and orphan page-in.
   // Stable per-row keys. Thinking blocks get an ordinal key (`think<n>`) that
   // survives the provisional→committed (seq null → seq N) transition, so the
@@ -180,13 +217,14 @@
       </button>
     </div>
   {/if}
-  {#each keyedRows as { row, key } (key)}
+  {#each keyedRows as { row, key }, i (key)}
     <!-- `.chat-row`: content-visibility:auto — the browser skips layout/paint
          for rows outside the viewport (see app.css). -->
     <div class="chat-row">
     {#if row.kind === "step-metrics"}
       {@const sv = viewStepMetrics(row.step, row.index)}
       {@const stepCache = viewCacheRate(row.step.usage)}
+      {@const stepStamp = cacheTimer?.stepStamps.get(row.step.stepId)}
       <div class="chat chat-start">
         <div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
           <div class="flex flex-wrap items-center gap-x-1 text-xs">
@@ -203,6 +241,9 @@
               class="badge badge-xs {badgeClass[stepCache.level]}"
               data-testid="step-cache-badge">{stepCache.pct}%</span
             >
+            {#if stepStamp !== undefined}
+              <CacheTimerBadge elapsedMs={stepStamp} />
+            {/if}
           </div>
         </div>
       </div>
@@ -211,6 +252,8 @@
       {@const lastCache = viewCacheRate(row.turn.usage)}
       {@const chatCache = viewCacheRate(row.cumulativeUsage)}
       {@const retention = viewExpectedCache(row.turn.steps[0]?.usage, row.prevLastStepUsage)}
+      {@const turnLive = liveTurnSince(row.turn.turnId, i)}
+      {@const turnStamp = cacheTimer?.turnStamps.get(row.turn.turnId)}
       <div class="chat chat-start">
         <div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
           <div class="flex flex-col gap-1 text-xs">
@@ -236,6 +279,11 @@
                   <span class="badge badge-sm {badgeClass[retention.level]}">{retention.pct}%</span>
                 </span>
               {/if}
+              {#if turnLive !== undefined}
+                <CacheTimerBadge since={turnLive} />
+              {:else if turnStamp !== undefined}
+                <CacheTimerBadge elapsedMs={turnStamp} />
+              {/if}
             </div>
           </div>
         </div>
@@ -252,6 +300,18 @@
     {/if}
     </div>
   {/each}
+  {#if liveStepGap}
+    <!-- Live cache timer while the last step's tools execute; stamped onto that
+         step's metrics line once they return (or the next step starts). -->
+    <div class="chat chat-start">
+      <div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
+        <div class="flex items-center gap-1 text-xs" data-testid="cache-timer-tools">
+          <span class="opacity-70">Running tools</span>
+          <CacheTimerBadge since={liveStepGap.startedAt} />
+        </div>
+      </div>
+    </div>
+  {/if}
   {#if providerRetry}
     {@const rv = viewProviderRetry(providerRetry)}
     <!-- Transient yellow warning: a provider error is being retried with backoff.