diff --git a/coding-agent/webui/app/src/App.test.tsx b/coding-agent/webui/app/src/App.test.tsx
index 95fd5b761..15b0848d4 100644
--- a/coding-agent/webui/app/src/App.test.tsx
+++ b/coding-agent/webui/app/src/App.test.tsx
@@ -642,7 +642,10 @@ describe("App session switching", () => {
                 arguments: { cmd: "pwd" },
               },
             },
-            created_at: "2026-06-12T00:00:00Z",
+            // Live-streamed prompt: created_at must be "now" so the approval
+            // countdown deadline (created_at + timeout_seconds) is not already
+            // expired when the card mounts.
+            created_at: new Date().toISOString(),
           };
           return new Response(
             new ReadableStream({
@@ -897,6 +900,8 @@ describe("App session switching", () => {
 
     fireEvent.click(await screen.findByRole("button", { name: /model-memory/i }));
     await screen.findByText("idle");
+    // The memory panel lives in the right rail now; open it to observe state.
+    fireEvent.click(screen.getByRole("button", { name: "Toggle memory panel" }));
     // loadSession's refreshMemory (seq 1) is now in flight.
     await waitFor(() => expect(refreshRuns).toHaveLength(1));
 
@@ -947,6 +952,7 @@ describe("App session switching", () => {
     render(<App />);
 
     fireEvent.click(await screen.findByRole("button", { name: /model-broken/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Toggle memory panel" }));
 
     expect(await screen.findByText("restore failed")).toBeTruthy();
     expect(await screen.findByText(/memory load failed/)).toBeTruthy();
@@ -1211,3 +1217,1045 @@ describe("provider model list", () => {
     expect(datalistValues()).toEqual(["kimi-for-coding", "k3", "deepseek-chat"]);
   });
 });
+
+describe("right rail", () => {
+  beforeEach(() => {
+    const storage = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+      clear: () => storage.clear(),
+      removeItem: (key: string) => storage.delete(key),
+    });
+    Element.prototype.scrollIntoView = vi.fn();
+    localStorage.setItem(
+      "coding-agent-webui-config",
+      JSON.stringify({ baseUrl: "http://127.0.0.1:18080", apiKey: "" }),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  const stubRailFetch = (active: ReturnType<typeof session>) => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [active] }));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}`)) {
+          return Promise.resolve(jsonResponse(active));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: active.session_id, runs: [] }));
+        }
+        if (url.includes(`/sessions/${active.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/workspace/diff`)) {
+          return Promise.resolve(
+            jsonResponse({ session_id: active.session_id, files: [], additions: 0, deletions: 0 }),
+          );
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/workspace/patch`)) {
+          return Promise.resolve(
+            jsonResponse({ session_id: active.session_id, format: "unified_diff", patch: "" }),
+          );
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+  };
+
+  it("opens, switches, and collapses rail panels", async () => {
+    const active = session("session-rail-0001", "model-rail");
+    stubRailFetch(active);
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-rail/i }));
+    await screen.findByText("idle");
+
+    const memoryToggle = screen.getByRole("button", { name: "Toggle memory panel" });
+    const diffToggle = screen.getByRole("button", { name: "Toggle diff panel" });
+
+    // Open memory panel.
+    fireEvent.click(memoryToggle);
+    expect(await screen.findByText("Recall hits")).toBeTruthy();
+    expect(memoryToggle.getAttribute("aria-pressed")).toBe("true");
+
+    // Switch to diff: memory closes, diff opens (fetched on demand).
+    fireEvent.click(diffToggle);
+    expect(await screen.findByText(/Workspace diff/)).toBeTruthy();
+    expect(screen.queryByText("Recall hits")).toBeNull();
+    expect(diffToggle.getAttribute("aria-pressed")).toBe("true");
+    expect(memoryToggle.getAttribute("aria-pressed")).toBe("false");
+
+    // Clicking the active icon collapses the panel.
+    fireEvent.click(diffToggle);
+    expect(screen.queryByText(/Workspace diff/)).toBeNull();
+    expect(diffToggle.getAttribute("aria-pressed")).toBe("false");
+  });
+
+  it("shows a placeholder instead of panels when there is no active session", async () => {
+    const active = session("session-rail-0002", "model-rail");
+    stubRailFetch(active);
+
+    render(<App />);
+    await screen.findByRole("button", { name: /model-rail/i });
+
+    fireEvent.click(screen.getByRole("button", { name: "Toggle memory panel" }));
+    expect(await screen.findByText("No active session")).toBeTruthy();
+  });
+
+  it("collapses and restores the sidebar via the header toggle", async () => {
+    const active = session("session-rail-0003", "model-rail");
+    stubRailFetch(active);
+
+    render(<App />);
+    await screen.findByRole("button", { name: /model-rail/i });
+
+    const sidebar = screen.getByLabelText("Sessions");
+    expect(sidebar.className).not.toContain("hidden");
+
+    fireEvent.click(screen.getByRole("button", { name: "toggle sidebar" }));
+    expect(sidebar.className).toContain("hidden");
+
+    fireEvent.click(screen.getByRole("button", { name: "toggle sidebar" }));
+    expect(sidebar.className).not.toContain("hidden");
+  });
+
+  it("starts with the sidebar closed on small screens", async () => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({
+        matches: true,
+        media: "(max-width: 767px)",
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    );
+    const active = session("session-rail-0004", "model-rail");
+    stubRailFetch(active);
+
+    render(<App />);
+    await screen.findByRole("button", { name: /model-rail/i });
+
+    expect(screen.getByLabelText("Sessions").className).toContain("hidden");
+  });
+});
+
+describe("session result refresh", () => {
+  beforeEach(() => {
+    const storage = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+      clear: () => storage.clear(),
+      removeItem: (key: string) => storage.delete(key),
+    });
+    Element.prototype.scrollIntoView = vi.fn();
+    localStorage.setItem(
+      "coding-agent-webui-config",
+      JSON.stringify({ baseUrl: "http://127.0.0.1:18080", apiKey: "" }),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("retries an empty terminal result after the prompt stream closes", async () => {
+    const active = session("session-result-retry-0001", "model-result");
+    let resultCalls = 0;
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [active] }));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}`)) {
+          return Promise.resolve(jsonResponse(active));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: active.session_id, runs: [] }));
+        }
+        if (url.includes(`/sessions/${active.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/result`)) {
+          resultCalls += 1;
+          const visible = resultCalls >= 3;
+          return Promise.resolve(
+            jsonResponse({
+              session_id: active.session_id,
+              status: "failed",
+              turn_status: "failed",
+              turn_id: "turn-result",
+              workspace_id: null,
+              origin: null,
+              provider_name: "test",
+              model_name: active.model_name,
+              final_answer: null,
+              verification_summary: null,
+              failure_details: visible ? "delayed failure details" : null,
+            }),
+          );
+        }
+        if (url.includes(`/sessions/${active.session_id}/prompt?event_format=display`)) {
+          return Promise.resolve(new Response("", { status: 200 }));
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-result/i }));
+    await screen.findByText("idle");
+    fireEvent.change(screen.getByPlaceholderText(/ask the agent/i), {
+      target: { value: "run" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+
+    expect(await screen.findByText("delayed failure details")).toBeTruthy();
+    expect(resultCalls).toBe(3);
+  });
+});
+
+
+describe("thinking toggle", () => {
+  beforeEach(() => {
+    const storage = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+      clear: () => storage.clear(),
+      removeItem: (key: string) => storage.delete(key),
+    });
+    Element.prototype.scrollIntoView = vi.fn();
+    localStorage.setItem(
+      "coding-agent-webui-config",
+      JSON.stringify({ baseUrl: "http://127.0.0.1:18080", apiKey: "" }),
+    );
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [] }));
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("defaults to showing thinking and persists the toggle", async () => {
+    render(<App />);
+
+    const btn = screen.getByRole("button", { name: "toggle thinking" });
+    expect(btn.getAttribute("aria-pressed")).toBe("true");
+
+    fireEvent.click(btn);
+    expect(btn.getAttribute("aria-pressed")).toBe("false");
+    expect(localStorage.getItem("coding-agent-webui-show-thinking")).toBe("0");
+
+    fireEvent.click(btn);
+    expect(btn.getAttribute("aria-pressed")).toBe("true");
+    expect(localStorage.getItem("coding-agent-webui-show-thinking")).toBe("1");
+  });
+});
+
+describe("approval scope", () => {
+  beforeEach(() => {
+    const storage = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+      clear: () => storage.clear(),
+      removeItem: (key: string) => storage.delete(key),
+    });
+    Element.prototype.scrollIntoView = vi.fn();
+    localStorage.setItem(
+      "coding-agent-webui-config",
+      JSON.stringify({ baseUrl: "http://127.0.0.1:18080", apiKey: "", approval: "auto" }),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("sends scope=session when choosing always allow", async () => {
+    const active = session("session-approval-0002", "model-approval");
+    let approveBody: Record<string, unknown> | null = null;
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return jsonResponse({ sessions: [active] });
+        }
+        if (url.endsWith(`/sessions/${active.session_id}`)) {
+          return jsonResponse(active);
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/runs`)) {
+          return jsonResponse({ session_id: active.session_id, runs: [] });
+        }
+        if (url.includes(`/sessions/${active.session_id}/prompt?event_format=display`)) {
+          const payload = {
+            source_event_id: "event-approval",
+            run_id: "run-approval",
+            sequence: 1,
+            display_kind: "approval_prompt",
+            payload: {
+              agent_id: "",
+              request_id: "approval-9",
+              timeout_seconds: 60,
+              tool_call: {
+                call_id: "call-1",
+                tool_name: "bash",
+                arguments: { cmd: "pwd" },
+              },
+            },
+            // Live-streamed prompt: created_at must be "now" so the approval
+            // countdown deadline (created_at + timeout_seconds) is not already
+            // expired when the card mounts.
+            created_at: new Date().toISOString(),
+          };
+          return new Response(
+            new ReadableStream({
+              start(controller) {
+                controller.enqueue(
+                  new TextEncoder().encode(
+                    `event: approval_prompt\ndata: ${JSON.stringify(payload)}\n\n`,
+                  ),
+                );
+                controller.close();
+              },
+            }),
+            { status: 200, headers: { "Content-Type": "text/event-stream" } },
+          );
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/approve`)) {
+          approveBody = JSON.parse(String(init?.body)) as Record<string, unknown>;
+          return jsonResponse({
+            status: "approved",
+            request_id: "approval-9",
+            decision: "approved",
+          });
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-approval/i }));
+    await screen.findByText("idle");
+    fireEvent.change(screen.getByPlaceholderText(/ask the agent/i), {
+      target: { value: "run a tool" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+
+    expect(await screen.findByText("Approval Required")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Always allow (this session)" }));
+
+    await waitFor(() =>
+      expect(approveBody).toEqual({
+        request_id: "approval-9",
+        approved: true,
+        feedback: null,
+        scope: "session",
+      }),
+    );
+    expect(screen.getByText("→ approved")).toBeTruthy();
+  });
+});
+
+describe("session settings panel", () => {
+  beforeEach(() => {
+    const storage = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+      clear: () => storage.clear(),
+      removeItem: (key: string) => storage.delete(key),
+    });
+    Element.prototype.scrollIntoView = vi.fn();
+    localStorage.setItem(
+      "coding-agent-webui-config",
+      JSON.stringify({ baseUrl: "http://127.0.0.1:18080", apiKey: "", approval: "auto" }),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("patches runtime config when session settings change", async () => {
+    const active = session("session-settings-0001", "model-settings");
+    const patches: Array<{ method: string | undefined; body: Record<string, unknown> }> = [];
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [active] }));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/runtime-config`)) {
+          const body = JSON.parse(String(init?.body)) as Record<string, unknown>;
+          patches.push({
+            method: init?.method,
+            body,
+          });
+          return Promise.resolve(
+            jsonResponse({
+              session_id: active.session_id,
+              provider_name: (body.provider as string | undefined) ?? active.provider_name,
+              model_name: (body.model as string | undefined) ?? active.model_name,
+              base_url: null,
+            }),
+          );
+        }
+        if (url.endsWith(`/sessions/${active.session_id}`)) {
+          return Promise.resolve(jsonResponse(active));
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: active.session_id, runs: [] }));
+        }
+        if (url.includes(`/sessions/${active.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-settings/i }));
+    await screen.findByText("idle");
+    fireEvent.click(screen.getByRole("button", { name: "Toggle settings panel" }));
+    expect(await screen.findByText("Session settings")).toBeTruthy();
+
+    fireEvent.change(screen.getByTitle("session approval policy"), {
+      target: { value: "yolo" },
+    });
+    await waitFor(() =>
+      expect(patches).toContainEqual({ method: "PATCH", body: { approval: "yolo" } }),
+    );
+    // Approval changes also update the persisted new-session default.
+    expect(
+      (JSON.parse(localStorage.getItem("coding-agent-webui-config") ?? "{}") as { approval?: string })
+        .approval,
+    ).toBe("yolo");
+
+    fireEvent.change(screen.getByTitle("thinking effort"), {
+      target: { value: "high" },
+    });
+    await waitFor(() =>
+      expect(patches).toContainEqual({
+        method: "PATCH",
+        body: { thinking: { enabled: true, effort: "high" } },
+      }),
+    );
+
+    fireEvent.change(screen.getByTitle("session model"), {
+      target: { value: "model-override" },
+    });
+    fireEvent.blur(screen.getByTitle("session model"));
+    await waitFor(() =>
+      expect(patches).toContainEqual({ method: "PATCH", body: { model: "model-override" } }),
+    );
+
+    expect(await screen.findByText("Saved")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Toggle settings panel" }));
+    fireEvent.click(screen.getByRole("button", { name: "Toggle settings panel" }));
+    expect((await screen.findByTitle("session model") as HTMLInputElement).value).toBe(
+      "model-override",
+    );
+  });
+
+  it("keeps queued settings updates bound to their originating session", async () => {
+    const first = session("session-settings-0002", "model-settings-a");
+    const second = session("session-settings-0003", "model-settings-b");
+    const firstPatch = deferred<Response>();
+    const patchUrls: string[] = [];
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [first, second] }));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/runtime-config`)) {
+          patchUrls.push(url);
+          if (patchUrls.length === 1) return firstPatch.promise;
+          return Promise.resolve(
+            jsonResponse({
+              session_id: first.session_id,
+              provider_name: first.provider_name,
+              model_name: first.model_name,
+              base_url: null,
+            }),
+          );
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/runtime-config`)) {
+          patchUrls.push(url);
+          return Promise.resolve(
+            jsonResponse({
+              session_id: second.session_id,
+              provider_name: second.provider_name,
+              model_name: second.model_name,
+              base_url: null,
+            }),
+          );
+        }
+        if (url.endsWith(`/sessions/${first.session_id}`)) {
+          return Promise.resolve(jsonResponse(first));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}`)) {
+          return Promise.resolve(jsonResponse(second));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: first.session_id, runs: [] }));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: second.session_id, runs: [] }));
+        }
+        if (url.includes(`/sessions/${first.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        if (url.includes(`/sessions/${second.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        throw new Error(`unexpected fetch ${url} ${init?.method ?? "GET"}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-settings-a/i }));
+    await screen.findByText("idle");
+    fireEvent.click(screen.getByRole("button", { name: "Toggle settings panel" }));
+    const approval = await screen.findByTitle("session approval policy");
+
+    fireEvent.change(approval, { target: { value: "yolo" } });
+    await waitFor(() => expect(patchUrls).toHaveLength(1));
+    fireEvent.change(approval, { target: { value: "interactive" } });
+
+    fireEvent.click(screen.getByRole("button", { name: /model-settings-b/i }));
+    await screen.findByText("idle");
+
+    firstPatch.resolve(
+      jsonResponse({
+        session_id: first.session_id,
+        provider_name: first.provider_name,
+        model_name: first.model_name,
+        base_url: null,
+      }),
+    );
+
+    await waitFor(() => expect(patchUrls).toHaveLength(2));
+    expect(patchUrls).toEqual([
+      expect.stringContaining(`/sessions/${first.session_id}/runtime-config`),
+      expect.stringContaining(`/sessions/${first.session_id}/runtime-config`),
+    ]);
+  });
+
+  it("shows a placeholder when there is no active session", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [] }));
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Toggle settings panel" }));
+    expect(await screen.findByText("No active session")).toBeTruthy();
+  });
+});
+
+describe("P2 race guards", () => {
+  beforeEach(() => {
+    const storage = new Map<string, string>();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+      clear: () => storage.clear(),
+      removeItem: (key: string) => storage.delete(key),
+    });
+    Element.prototype.scrollIntoView = vi.fn();
+    localStorage.setItem(
+      "coding-agent-webui-config",
+      JSON.stringify({
+        baseUrl: "http://127.0.0.1:18080",
+        apiKey: "",
+        repoPath: "",
+        approval: "auto",
+      }),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("applies only the active session's diff when fetches resolve out of order", async () => {
+    const first = session("session-diff-0001", "model-diff-a");
+    const second = session("session-diff-0002", "model-diff-b");
+    const diffA = deferred<Response>();
+    const diffB = deferred<Response>();
+    const patchA = deferred<Response>();
+    const patchB = deferred<Response>();
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [first, second] }));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}`)) {
+          return Promise.resolve(jsonResponse(first));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}`)) {
+          return Promise.resolve(jsonResponse(second));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: first.session_id, runs: [] }));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: second.session_id, runs: [] }));
+        }
+        if (url.includes(`/sessions/${first.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        if (url.includes(`/sessions/${second.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/workspace/diff`)) {
+          return diffA.promise;
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/workspace/diff`)) {
+          return diffB.promise;
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/workspace/patch`)) {
+          return patchA.promise;
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/workspace/patch`)) {
+          return patchB.promise;
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-diff-a/i }));
+    await screen.findByText("idle");
+    // Open the diff panel in session A; its fetch stays in flight.
+    fireEvent.click(screen.getByRole("button", { name: "Toggle diff panel" }));
+
+    // Switch to session B before A's fetch resolves, then open its diff panel.
+    fireEvent.click(screen.getByRole("button", { name: /model-diff-b/i }));
+    await screen.findByText("idle");
+    fireEvent.click(screen.getByRole("button", { name: "Toggle diff panel" }));
+
+    // B's diff resolves first and applies.
+    diffB.resolve(
+      jsonResponse({
+        session_id: second.session_id,
+        files: [{ path: "b-file.ts", status: "modified", additions: 1, deletions: 0 }],
+        additions: 1,
+        deletions: 0,
+      }),
+    );
+    patchB.resolve(
+      jsonResponse({ session_id: second.session_id, format: "unified_diff", patch: "" }),
+    );
+    expect(await screen.findByText("b-file.ts")).toBeTruthy();
+
+    // A's stale fetch resolves last and must not clobber B's panel.
+    diffA.resolve(
+      jsonResponse({
+        session_id: first.session_id,
+        files: [{ path: "a-file.ts", status: "modified", additions: 9, deletions: 9 }],
+        additions: 9,
+        deletions: 9,
+      }),
+    );
+    patchA.resolve(
+      jsonResponse({ session_id: first.session_id, format: "unified_diff", patch: "" }),
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(screen.getByText("b-file.ts")).toBeTruthy();
+    expect(screen.queryByText("a-file.ts")).toBeNull();
+  });
+
+  it("does not reopen the checkpoints panel when the session changes mid-restore", async () => {
+    const first = session("session-restore-0001", "model-restore-a", { checkpoint_count: 1 });
+    const second = session("session-restore-0002", "model-restore-b");
+    const checkpoint = {
+      checkpoint_id: "cp-1",
+      tape_id: "tape-1",
+      session_id: first.session_id,
+      entry_count: 3,
+      window_start: 0,
+      created_at: "2026-06-12T00:00:00Z",
+      label: "before-refactor",
+    };
+    const reloadSummary = deferred<Response>();
+    let firstSummaryCalls = 0;
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [first, second] }));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/checkpoints`)) {
+          return Promise.resolve(jsonResponse({ checkpoints: [checkpoint] }));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/checkpoints/cp-1/restore`)) {
+          return Promise.resolve(jsonResponse({}));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}`)) {
+          firstSummaryCalls += 1;
+          // The reload after restore stays in flight until we switch sessions.
+          if (firstSummaryCalls > 1) return reloadSummary.promise;
+          return Promise.resolve(jsonResponse(first));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}`)) {
+          return Promise.resolve(jsonResponse(second));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: first.session_id, runs: [] }));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: second.session_id, runs: [] }));
+        }
+        if (url.includes(`/sessions/${first.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        if (url.includes(`/sessions/${second.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-restore-a/i }));
+    await screen.findByText("idle");
+
+    // Open the checkpoints panel and restore the checkpoint.
+    fireEvent.click(screen.getByRole("button", { name: "Toggle checkpoints panel" }));
+    expect(await screen.findByText("before-refactor")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+    fireEvent.click(screen.getByRole("button", { name: "Confirm restore" }));
+
+    // The restore triggers a reload of session A that is still in flight.
+    await waitFor(() => expect(firstSummaryCalls).toBe(2));
+
+    // Switch to session B before A's reload resolves.
+    fireEvent.click(screen.getByRole("button", { name: /model-restore-b/i }));
+    await screen.findByText("idle");
+
+    // A's stale reload resolves now; it must not reopen the checkpoints panel.
+    reloadSummary.resolve(jsonResponse(first));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(screen.queryByText(/Checkpoints ·/)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Toggle checkpoints panel" }).getAttribute("aria-pressed"),
+    ).toBe("false");
+  });
+
+  it("does not reload the new active session when an old checkpoint restore finishes", async () => {
+    const first = session("session-restore-0003", "model-restore-c", { checkpoint_count: 1 });
+    const second = session("session-restore-0004", "model-restore-d");
+    const restoreResponse = deferred<Response>();
+    let secondSummaryCalls = 0;
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return Promise.resolve(jsonResponse({ sessions: [first, second] }));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/checkpoints`)) {
+          return Promise.resolve(
+            jsonResponse({
+              checkpoints: [
+                {
+                  checkpoint_id: "cp-2",
+                  tape_id: "tape-2",
+                  session_id: first.session_id,
+                  entry_count: 4,
+                  window_start: 0,
+                  created_at: "2026-06-12T00:00:00Z",
+                  label: "before-switch",
+                },
+              ],
+            }),
+          );
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/checkpoints/cp-2/restore`)) {
+          return restoreResponse.promise;
+        }
+        if (url.endsWith(`/sessions/${first.session_id}`)) {
+          return Promise.resolve(jsonResponse(first));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}`)) {
+          secondSummaryCalls += 1;
+          return Promise.resolve(jsonResponse(second));
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: first.session_id, runs: [] }));
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/runs`)) {
+          return Promise.resolve(jsonResponse({ session_id: second.session_id, runs: [] }));
+        }
+        if (url.includes(`/sessions/${first.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        if (url.includes(`/sessions/${second.session_id}/memory/reviews`)) {
+          return Promise.resolve(jsonResponse([]));
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-restore-c/i }));
+    await screen.findByText("idle");
+    fireEvent.click(screen.getByRole("button", { name: "Toggle checkpoints panel" }));
+    expect(await screen.findByText("before-switch")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+    fireEvent.click(screen.getByRole("button", { name: "Confirm restore" }));
+
+    fireEvent.click(screen.getByRole("button", { name: /model-restore-d/i }));
+    await screen.findByText("idle");
+    expect(secondSummaryCalls).toBe(1);
+
+    restoreResponse.resolve(jsonResponse({ status: "restored" }));
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Toggle checkpoints panel" }).getAttribute(
+          "aria-pressed",
+        ),
+      ).toBe("false"),
+    );
+    expect(secondSummaryCalls).toBe(1);
+  });
+
+  it("rolls back the optimistic resolve when posting an approval fails", async () => {
+    const active = session("session-approval-fail", "model-approval-fail");
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return jsonResponse({ sessions: [active] });
+        }
+        if (url.endsWith(`/sessions/${active.session_id}`)) {
+          return jsonResponse(active);
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/runs`)) {
+          return jsonResponse({ session_id: active.session_id, runs: [] });
+        }
+        if (url.includes(`/sessions/${active.session_id}/memory/reviews`)) {
+          return jsonResponse([]);
+        }
+        if (url.includes(`/sessions/${active.session_id}/prompt?event_format=display`)) {
+          const payload = {
+            source_event_id: "event-approval",
+            run_id: "run-approval",
+            sequence: 1,
+            display_kind: "approval_prompt",
+            payload: {
+              agent_id: "",
+              request_id: "approval-1",
+              timeout_seconds: 60,
+              tool_call: {
+                call_id: "call-1",
+                tool_name: "bash",
+                arguments: { cmd: "pwd" },
+              },
+            },
+            // Live-streamed prompt: created_at must be "now" so the approval
+            // countdown deadline is not already expired when the card mounts.
+            created_at: new Date().toISOString(),
+          };
+          return new Response(
+            new ReadableStream({
+              start(controller) {
+                controller.enqueue(
+                  new TextEncoder().encode(
+                    `event: approval_prompt\ndata: ${JSON.stringify(payload)}\n\n`,
+                  ),
+                );
+                controller.close();
+              },
+            }),
+            { status: 200, headers: { "Content-Type": "text/event-stream" } },
+          );
+        }
+        if (url.endsWith(`/sessions/${active.session_id}/approve`)) {
+          return new Response("boom", { status: 500 });
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-approval-fail/i }));
+    await screen.findByText("idle");
+    fireEvent.change(screen.getByPlaceholderText(/ask the agent/i), {
+      target: { value: "run a tool" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+
+    expect(await screen.findByText("Approval Required")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Approve" }));
+
+    // The failure is surfaced and the optimistic "approved" state is rolled
+    // back so the card becomes actionable again.
+    expect(await screen.findByText(/approve failed/)).toBeTruthy();
+    expect(screen.queryByText("→ approved")).toBeNull();
+    expect(screen.getByRole("button", { name: "Approve" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Deny" })).toBeTruthy();
+  });
+
+  it("does not write an old session's approval failure into the new session", async () => {
+    const first = session("session-approval-fail-a", "model-approval-a");
+    const second = session("session-approval-fail-b", "model-approval-b");
+    const approvalResponse = deferred<Response>();
+
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.endsWith("/sessions")) {
+          return jsonResponse({ sessions: [first, second] });
+        }
+        if (url.endsWith(`/sessions/${first.session_id}`)) {
+          return jsonResponse(first);
+        }
+        if (url.endsWith(`/sessions/${second.session_id}`)) {
+          return jsonResponse(second);
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/runs`)) {
+          return jsonResponse({ session_id: first.session_id, runs: [] });
+        }
+        if (url.endsWith(`/sessions/${second.session_id}/runs`)) {
+          return jsonResponse({ session_id: second.session_id, runs: [] });
+        }
+        if (url.includes(`/sessions/${first.session_id}/memory/reviews`)) {
+          return jsonResponse([]);
+        }
+        if (url.includes(`/sessions/${second.session_id}/memory/reviews`)) {
+          return jsonResponse([]);
+        }
+        if (url.includes(`/sessions/${first.session_id}/prompt?event_format=display`)) {
+          const payload = {
+            source_event_id: "event-approval-stale",
+            run_id: "run-approval-stale",
+            sequence: 1,
+            display_kind: "approval_prompt",
+            payload: {
+              agent_id: "",
+              request_id: "approval-stale",
+              timeout_seconds: 60,
+              tool_call: {
+                call_id: "call-stale",
+                tool_name: "bash",
+                arguments: { cmd: "pwd" },
+              },
+            },
+            created_at: new Date().toISOString(),
+          };
+          return new Response(
+            new ReadableStream({
+              start(controller) {
+                controller.enqueue(
+                  new TextEncoder().encode(
+                    `event: approval_prompt\ndata: ${JSON.stringify(payload)}\n\n`,
+                  ),
+                );
+                controller.close();
+              },
+            }),
+            { status: 200, headers: { "Content-Type": "text/event-stream" } },
+          );
+        }
+        if (url.endsWith(`/sessions/${first.session_id}/approve`)) {
+          return approvalResponse.promise;
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<App />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /model-approval-a/i }));
+    await screen.findByText("idle");
+    fireEvent.change(screen.getByPlaceholderText(/ask the agent/i), {
+      target: { value: "run a tool" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    expect(await screen.findByText("Approval Required")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Approve" }));
+
+    fireEvent.click(screen.getByRole("button", { name: /model-approval-b/i }));
+    await screen.findByText("idle");
+
+    approvalResponse.resolve(new Response("boom", { status: 500 }));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(screen.queryByText(/approve failed/)).toBeNull();
+  });
+});
diff --git a/coding-agent/webui/app/src/App.tsx b/coding-agent/webui/app/src/App.tsx
index 714160af7..0cf868a34 100644
--- a/coding-agent/webui/app/src/App.tsx
+++ b/coding-agent/webui/app/src/App.tsx
@@ -1,13 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AgentClient } from "./lib/api";
+import { AgentClient, type RuntimeConfigPatch } from "./lib/api";
 import type {
   ApprovalPolicy,
+  ApprovalScope,
   ContextPackItem,
   DisplayEventEnvelope,
   DisplayStreamEvent,
   FinalResultPayload,
   MemoryReviewRecord,
   ProgressPayload,
+  SessionResult,
   SessionSummary,
   WorkspaceDiff,
   WorkspacePatch,
@@ -26,9 +28,15 @@ import Composer from "./components/Composer";
 import SessionList from "./components/SessionList";
 import DiffPanel from "./components/DiffPanel";
 import MemoryPanel, { extractRecallHits } from "./components/MemoryPanel";
+import RightRail, { type RailPanel } from "./components/RightRail";
+import SettingsPanel from "./components/SettingsPanel";
+import CheckpointsPanel from "./components/CheckpointsPanel";
+import ResultPanel, { hasResultContent } from "./components/ResultPanel";
 
 const LS_KEY = "coding-agent-webui-config";
 const THEME_LS_KEY = "coding-agent-webui-theme";
+const THINKING_LS_KEY = "coding-agent-webui-show-thinking";
+const RESULT_RETRY_DELAYS_MS = [0, 250, 500, 1_000, 2_000, 4_000] as const;
 type Theme = "dark" | "light";
 type Config = {
   baseUrl: string;
@@ -73,6 +81,21 @@ function loadTheme(): Theme {
   }
 }
 
+function loadShowThinking(): boolean {
+  try {
+    return localStorage.getItem(THINKING_LS_KEY) !== "0";
+  } catch {
+    return true;
+  }
+}
+
+function initialSidebarOpen(): boolean {
+  return (
+    typeof window.matchMedia !== "function" ||
+    !window.matchMedia("(max-width: 767px)").matches
+  );
+}
+
 export default function App() {
   const [config, setConfig] = useState<Config>(loadConfig);
   const [theme, setTheme] = useState<Theme>(loadTheme);
@@ -95,10 +118,16 @@ export default function App() {
     memories: MemoryReviewRecord[];
     error: string | null;
   } | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(initialSidebarOpen);
+  const [railPanel, setRailPanel] = useState<RailPanel>(null);
+  const [showThinking, setShowThinking] = useState<boolean>(loadShowThinking);
+  const [resultState, setResultState] = useState<SessionResult | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const followAbortRef = useRef<AbortController | null>(null);
   const loadSeqRef = useRef(0);
   const memorySeqRef = useRef(0);
+  const resultSeqRef = useRef(0);
+  const diffSeqRef = useRef(0);
   const activeSessionRef = useRef<string | null>(null);
   const sessionLoadingRef = useRef(false);
 
@@ -120,6 +149,17 @@ export default function App() {
     setTheme((t) => (t === "dark" ? "light" : "dark"));
   }, []);
 
+  const toggleThinking = useCallback(() => {
+    setShowThinking((v) => {
+      try {
+        localStorage.setItem(THINKING_LS_KEY, v ? "0" : "1");
+      } catch {
+        /* ignore */
+      }
+      return !v;
+    });
+  }, []);
+
   const patchConfig = useCallback((p: Partial<Config>) => {
     setConfig((c) => {
       const next = { ...c, ...p };
@@ -130,20 +170,29 @@ export default function App() {
       }
       return next;
     });
-    const activeSessionId = activeSessionRef.current;
-    if (p.approval !== undefined && activeSessionId) {
-      void client.updateRuntimeConfig(activeSessionId, { approval: p.approval }).catch((e) => {
-        setItems((prev) => [
-          ...prev,
-          {
-            id: `e${Date.now()}`,
-            kind: "error",
-            text: `approval policy update failed: ${msg(e)}`,
-          },
-        ]);
-      });
-    }
-  }, [client]);
+  }, []);
+
+  // Per-session runtime settings (model/provider/thinking/approval). Approval
+  // changes also update the persisted new-session default.
+  const updateSessionRuntime = useCallback(
+    async (id: string, patch: RuntimeConfigPatch) => {
+      const updated = await client.updateRuntimeConfig(id, patch);
+      setSessions((current) =>
+        current.map((entry) => {
+          if (entry.session_id !== id) return entry;
+          return {
+            ...entry,
+            provider_name:
+              patch.provider !== undefined ? updated.provider_name : entry.provider_name,
+            model_name: patch.model !== undefined ? updated.model_name : entry.model_name,
+            base_url: patch.baseUrl !== undefined ? updated.base_url : entry.base_url,
+          };
+        }),
+      );
+      if (patch.approval !== undefined) patchConfig({ approval: patch.approval });
+    },
+    [client, patchConfig],
+  );
 
   const setSessionLoadingState = useCallback((value: boolean) => {
     sessionLoadingRef.current = value;
@@ -190,6 +239,27 @@ export default function App() {
     }
   }, [client]);
 
+  // Session result (final_answer / verification / failure). Same seq-guard
+  // pattern as refreshMemory; failures just keep the previous result hidden.
+  const refreshResult = useCallback(async (id: string, retryEmpty = false) => {
+    if (activeSessionRef.current !== id) return;
+    const resultSeq = ++resultSeqRef.current;
+    const delays = retryEmpty ? RESULT_RETRY_DELAYS_MS : RESULT_RETRY_DELAYS_MS.slice(0, 1);
+    for (const delay of delays) {
+      if (delay > 0) await new Promise((resolve) => setTimeout(resolve, delay));
+      if (activeSessionRef.current !== id || resultSeqRef.current !== resultSeq) return;
+      try {
+        const result = await client.result(id);
+        if (activeSessionRef.current !== id || resultSeqRef.current !== resultSeq) return;
+        setResultState(result);
+        if (hasResultContent(result)) return;
+      } catch {
+        // A failed refresh keeps the previous result rather than clobbering it.
+        return;
+      }
+    }
+  }, [client]);
+
   useEffect(() => {
     void refreshSessions();
     // Config edits can pass through incomplete URLs; refresh explicitly after edits.
@@ -228,6 +298,8 @@ export default function App() {
       setItems([]);
       setDiffState(null);
       setMemoryState(null);
+      setResultState(null);
+      setRailPanel(null);
       setStatus("idle");
       void refreshSessions();
       void refreshMemory(id);
@@ -263,6 +335,8 @@ export default function App() {
         setItems([]);
         setDiffState(null);
         setMemoryState(null);
+        setResultState(null);
+        setRailPanel(null);
         setStreaming(false);
         setSessionLoadingState(false);
         setStatus("no session");
@@ -300,8 +374,9 @@ export default function App() {
       if (followAbortRef.current === ctrl) followAbortRef.current = null;
       void refreshSessions();
       void refreshMemory(id);
+      void refreshResult(id);
     }
-  }, [client, refreshSessions, refreshMemory]);
+  }, [client, refreshSessions, refreshMemory, refreshResult]);
 
   const loadSession = useCallback(async (id: string) => {
     const loadSeq = loadSeqRef.current + 1;
@@ -318,6 +393,8 @@ export default function App() {
     setItems([]);
     setDiffState(null);
     setMemoryState(null);
+    setResultState(null);
+    setRailPanel(null);
     setStatus("loading history…");
     try {
       const [summary, events] = await Promise.all([
@@ -331,6 +408,7 @@ export default function App() {
       setItems(replayEvents([], events));
       setStatus(summary.turn_in_progress ? "reconnected" : "idle");
       void refreshMemory(id);
+      void refreshResult(id);
       if (summary.turn_in_progress) void followSession(id);
     } catch (e) {
       if (loadSeqRef.current !== loadSeq || activeSessionRef.current !== id) return;
@@ -347,7 +425,7 @@ export default function App() {
       // shows an error (or recovered data) instead of loading forever.
       void refreshMemory(id);
     }
-  }, [client, followSession, refreshMemory, setSessionLoadingState]);
+  }, [client, followSession, refreshMemory, refreshResult, setSessionLoadingState]);
 
   async function reconcileSession(id: string, errorText: string) {
     try {
@@ -422,21 +500,37 @@ export default function App() {
         abortRef.current = null;
       }
       void refreshSessions();
-      if (activeSessionRef.current === sessionId) void refreshMemory(sessionId);
+      if (activeSessionRef.current === sessionId) {
+        void refreshMemory(sessionId);
+        // The stream can close just before terminal result details are durable.
+        void refreshResult(sessionId, true);
+      }
     }
-  }, [client, prompt, sessionId, sessionMode, streaming, refreshSessions, refreshMemory]);
+  }, [client, prompt, sessionId, sessionMode, streaming, refreshSessions, refreshMemory, refreshResult]);
 
   const onApprove = useCallback(
-    async (requestId: string, approved: boolean, feedback: string) => {
+    async (
+      requestId: string,
+      approved: boolean,
+      feedback: string,
+      scope: ApprovalScope,
+    ) => {
       if (!sessionId) return;
+      const approvalSessionId = sessionId;
       setItems((prev) =>
         resolveApproval(prev, requestId, approved ? "approved" : "denied"),
       );
       try {
-        await client.approve(sessionId, requestId, approved, feedback);
+        await client.approve(approvalSessionId, requestId, approved, feedback, scope);
       } catch (e) {
+        if (activeSessionRef.current !== approvalSessionId) return;
         setItems((prev) => [
-          ...prev,
+          // Roll back the optimistic resolve so the card is actionable again.
+          ...prev.map((it) =>
+            it.kind === "approval" && it.requestId === requestId
+              ? { ...it, resolved: undefined }
+              : it,
+          ),
           {
             id: `e${Date.now()}`,
             kind: "error",
@@ -450,6 +544,10 @@ export default function App() {
 
   const showDiff = useCallback(async () => {
     if (!sessionId) return;
+    // Skip work for sessions that are no longer active, and let only the
+    // latest fetch apply. Same seq-guard pattern as refreshMemory/refreshResult.
+    if (activeSessionRef.current !== sessionId) return;
+    const diffSeq = ++diffSeqRef.current;
     try {
       const d = await client.diff(sessionId);
       let patch: WorkspacePatch | null = null;
@@ -458,8 +556,10 @@ export default function App() {
       } catch {
         patch = null;
       }
+      if (activeSessionRef.current !== sessionId || diffSeqRef.current !== diffSeq) return;
       setDiffState({ diff: d, patch });
     } catch (e) {
+      if (activeSessionRef.current !== sessionId || diffSeqRef.current !== diffSeq) return;
       setItems((prev) => [
         ...prev,
         {
@@ -476,56 +576,161 @@ export default function App() {
     if (sessionId) void client.cancel(sessionId);
   }, [client, sessionId]);
 
+  const toggleRail = useCallback(
+    (panel: Exclude<RailPanel, null>) => {
+      if (railPanel === panel) {
+        setRailPanel(null);
+        return;
+      }
+      setRailPanel(panel);
+      // The diff is fetched on demand when its panel opens; memory data is
+      // kept fresh by the normal session lifecycle.
+      if (panel === "diff") void showDiff();
+    },
+    [railPanel, showDiff],
+  );
+
+  // After a checkpoint restore, replay the restored session through the same
+  // load path used for session select, then reopen the checkpoints panel.
+  const reloadAfterRestore = useCallback(async (id: string) => {
+    if (activeSessionRef.current !== id) return;
+    await loadSession(id);
+    // loadSession no-ops when the user switched sessions mid-restore; don't
+    // reopen the checkpoints panel for a session that is no longer active.
+    if (activeSessionRef.current !== id) return;
+    setRailPanel("checkpoints");
+  }, [loadSession]);
+
+  const selectSession = useCallback(
+    (id: string) => {
+      // On small screens the sidebar is an overlay; close it after picking.
+      if (
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(max-width: 767px)").matches
+      ) {
+        setSidebarOpen(false);
+      }
+      void loadSession(id);
+    },
+    [loadSession],
+  );
+
+  const activeSession = useMemo(
+    () => sessions.find((s) => s.session_id === sessionId) ?? null,
+    [sessions, sessionId],
+  );
+
   return (
-    <div className="flex h-screen flex-col">
-      <Header
-        config={config}
-        onConfigChange={patchConfig}
+    <div className="flex h-screen w-full overflow-hidden">
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-30 bg-black/50 md:hidden"
+          aria-hidden
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+      <SessionList
+        sessions={sessions}
+        activeSessionId={sessionId}
+        loading={sessionsLoading}
+        error={sessionsError}
+        open={sidebarOpen}
+        onRefresh={refreshSessions}
+        onSelect={selectSession}
+        onDelete={deleteSession}
         onNewSession={newSession}
-        onShowDiff={showDiff}
-        sessionId={sessionId}
-        status={status}
-        client={client}
-        theme={theme}
-        onToggleTheme={toggleTheme}
       />
-      <div className="min-h-0 flex flex-1 flex-col md:flex-row">
-        <SessionList
-          sessions={sessions}
-          activeSessionId={sessionId}
-          loading={sessionsLoading}
-          error={sessionsError}
-          onRefresh={refreshSessions}
-          onSelect={loadSession}
-          onDelete={deleteSession}
+      <div className="mr-11 flex min-w-0 flex-1 flex-col md:mr-0">
+        <Header
+          config={config}
+          onConfigChange={patchConfig}
+          onNewSession={newSession}
+          onToggleSidebar={() => setSidebarOpen((v) => !v)}
+          sessionId={sessionId}
+          status={status}
+          client={client}
+          theme={theme}
+          onToggleTheme={toggleTheme}
+          showThinking={showThinking}
+          onToggleThinking={toggleThinking}
         />
-        <main className="flex min-w-0 flex-1 flex-col">
-          <Timeline items={items} onApprove={onApprove} />
-          {diffState && (
+        <main className="flex min-h-0 flex-1 flex-col">
+          {resultState && hasResultContent(resultState) && (
+            <ResultPanel key={sessionId ?? "none"} result={resultState} />
+          )}
+          <Timeline items={items} onApprove={onApprove} showThinking={showThinking} />
+          <Composer
+            prompt={prompt}
+            onPromptChange={setPrompt}
+            onSend={send}
+            onCancel={cancel}
+            disabled={!sessionId || streaming || sessionLoading}
+            streaming={streaming}
+          />
+        </main>
+      </div>
+      <RightRail panel={railPanel} onToggle={toggleRail}>
+        {railPanel === "diff" ? (
+          diffState ? (
             <DiffPanel
               diff={diffState.diff}
               patch={diffState.patch}
-              onClose={() => setDiffState(null)}
+              onClose={() => {
+                setDiffState(null);
+                setRailPanel(null);
+              }}
             />
-          )}
-          {sessionId && (
+          ) : (
+            <RailPlaceholder text={sessionId ? "Loading diff…" : "No active session"} />
+          )
+        ) : railPanel === "memory" ? (
+          sessionId ? (
             <MemoryPanel
               hits={memoryState?.hits ?? []}
               memories={memoryState?.memories ?? []}
               loading={memoryState === null}
               error={memoryState?.error ?? null}
+              client={client}
+              sessionId={sessionId}
+              onReviewsChanged={() => void refreshMemory(sessionId)}
             />
-          )}
-        </main>
-      </div>
-      <Composer
-        prompt={prompt}
-        onPromptChange={setPrompt}
-        onSend={send}
-        onCancel={cancel}
-        disabled={!sessionId || streaming || sessionLoading}
-        streaming={streaming}
-      />
+          ) : (
+            <RailPlaceholder text="No active session" />
+          )
+        ) : railPanel === "checkpoints" ? (
+          sessionId ? (
+            <CheckpointsPanel
+              key={sessionId}
+              client={client}
+              sessionId={sessionId}
+              onRestored={() => reloadAfterRestore(sessionId)}
+              onCaptured={() => void refreshSessions()}
+            />
+          ) : (
+            <RailPlaceholder text="No active session" />
+          )
+        ) : railPanel === "settings" ? (
+          sessionId ? (
+            <SettingsPanel
+              key={sessionId}
+              sessionId={sessionId}
+              providerName={activeSession?.provider_name ?? null}
+              modelName={activeSession?.model_name ?? null}
+              onUpdate={(patch) => updateSessionRuntime(sessionId, patch)}
+            />
+          ) : (
+            <RailPlaceholder text="No active session" />
+          )
+        ) : null}
+      </RightRail>
+    </div>
+  );
+}
+
+function RailPlaceholder({ text }: { text: string }) {
+  return (
+    <div className="flex h-full items-center justify-center px-4 text-sm text-muted">
+      {text}
     </div>
   );
 }
diff --git a/coding-agent/webui/app/src/components/CheckpointsPanel.test.tsx b/coding-agent/webui/app/src/components/CheckpointsPanel.test.tsx
new file mode 100644
index 000000000..94cfb03e8
--- /dev/null
+++ b/coding-agent/webui/app/src/components/CheckpointsPanel.test.tsx
@@ -0,0 +1,145 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AgentClient } from "../lib/api";
+import CheckpointsPanel from "./CheckpointsPanel";
+import type { CheckpointMetadata } from "../lib/types";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const checkpoint = (overrides: Partial<CheckpointMetadata> = {}): CheckpointMetadata => ({
+  checkpoint_id: "ckpt-0001",
+  tape_id: "tape-1",
+  session_id: "s1",
+  entry_count: 12,
+  window_start: 0,
+  created_at: "2026-06-12T10:00:00Z",
+  label: "before refactor",
+  ...overrides,
+});
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+const client = new AgentClient({ baseUrl: "http://127.0.0.1:18080" });
+
+function stubFetch(handlers: {
+  list: () => CheckpointMetadata[];
+  onCapture?: (body: Record<string, unknown>) => void;
+  onRestore?: (checkpointId: string) => void;
+}) {
+  const calls: string[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input);
+      if (url.includes("/checkpoints/") && url.endsWith("/restore") && init?.method === "POST") {
+        const checkpointId = url.split("/checkpoints/")[1].replace(/\/restore$/, "");
+        calls.push(`restore:${checkpointId}`);
+        handlers.onRestore?.(checkpointId);
+        return Promise.resolve(
+          jsonResponse({ status: "restored", session_id: "s1", checkpoint_id: checkpointId }),
+        );
+      }
+      if (url.endsWith("/sessions/s1/checkpoints") && init?.method === "POST") {
+        calls.push("capture");
+        handlers.onCapture?.(JSON.parse(String(init.body)) as Record<string, unknown>);
+        return Promise.resolve(jsonResponse(checkpoint({ checkpoint_id: "ckpt-0002" })));
+      }
+      if (url.endsWith("/sessions/s1/checkpoints")) {
+        calls.push("list");
+        return Promise.resolve(jsonResponse({ checkpoints: handlers.list() }));
+      }
+      throw new Error(`unexpected fetch ${url}`);
+    }),
+  );
+  return calls;
+}
+
+describe("CheckpointsPanel", () => {
+  it("lists checkpoints with label, id, and entry count", async () => {
+    stubFetch({ list: () => [checkpoint()] });
+
+    render(<CheckpointsPanel client={client} sessionId="s1" onRestored={() => undefined} />);
+
+    expect(await screen.findByText("before refactor")).toBeTruthy();
+    expect(screen.getByText(/ckpt-0001 · 12 entries/)).toBeTruthy();
+    expect(screen.getByText("Checkpoints · 1")).toBeTruthy();
+  });
+
+  it("creates a checkpoint with an optional label and refreshes the list", async () => {
+    const captured: Array<Record<string, unknown>> = [];
+    const items: CheckpointMetadata[] = [];
+    const onCaptured = vi.fn();
+    const calls = stubFetch({
+      list: () => items,
+      onCapture: (body) => {
+        captured.push(body);
+        items.push(checkpoint({ checkpoint_id: "ckpt-0002", label: body.label as string }));
+      },
+    });
+
+    render(
+      <CheckpointsPanel
+        client={client}
+        sessionId="s1"
+        onRestored={() => undefined}
+        onCaptured={onCaptured}
+      />,
+    );
+
+    expect(await screen.findByText("No checkpoints")).toBeTruthy();
+    fireEvent.change(screen.getByLabelText("checkpoint label"), {
+      target: { value: "pre-migration" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Create checkpoint" }));
+
+    await waitFor(() => expect(captured).toEqual([{ label: "pre-migration" }]));
+    expect(await screen.findByText("pre-migration")).toBeTruthy();
+    expect(onCaptured).toHaveBeenCalledTimes(1);
+    expect(calls.filter((c) => c === "list")).toHaveLength(2);
+  });
+
+  it("requires confirmation before restoring and reloads via onRestored", async () => {
+    const restored: string[] = [];
+    const onRestored = vi.fn();
+    stubFetch({ list: () => [checkpoint()], onRestore: (id) => restored.push(id) });
+
+    render(<CheckpointsPanel client={client} sessionId="s1" onRestored={onRestored} />);
+
+    expect(await screen.findByText("before refactor")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+
+    // Confirm step states the exact restore boundary before anything is posted.
+    expect(screen.getByText(/rewinds session history and runtime settings/i)).toBeTruthy();
+    expect(screen.getByText(/workspace files are not restored/i)).toBeTruthy();
+    expect(restored).toHaveLength(0);
+
+    fireEvent.click(screen.getByRole("button", { name: "Confirm restore" }));
+
+    await waitFor(() => expect(restored).toEqual(["ckpt-0001"]));
+    await waitFor(() => expect(onRestored).toHaveBeenCalledTimes(1));
+  });
+
+  it("cancelling the confirm step posts nothing", async () => {
+    const restored: string[] = [];
+    stubFetch({ list: () => [checkpoint()], onRestore: (id) => restored.push(id) });
+
+    render(<CheckpointsPanel client={client} sessionId="s1" onRestored={() => undefined} />);
+
+    expect(await screen.findByText("before refactor")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(screen.queryByText(/workspace files are not restored/i)).toBeNull();
+    expect(restored).toHaveLength(0);
+    expect(screen.getByRole("button", { name: "Restore" })).toBeTruthy();
+  });
+});
diff --git a/coding-agent/webui/app/src/components/CheckpointsPanel.tsx b/coding-agent/webui/app/src/components/CheckpointsPanel.tsx
new file mode 100644
index 000000000..102f635f2
--- /dev/null
+++ b/coding-agent/webui/app/src/components/CheckpointsPanel.tsx
@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { AgentClient } from "../lib/api";
+import type { CheckpointMetadata } from "../lib/types";
+
+interface Props {
+  client: AgentClient;
+  sessionId: string;
+  // Called after a successful restore so the app can reload session state.
+  onRestored: () => void | Promise<void>;
+  // Called after a successful capture so the sidebar badge can refresh.
+  onCaptured?: () => void;
+}
+
+// Checkpoint capture/restore panel
+// (POST/GET /sessions/{id}/checkpoints, POST .../{checkpoint_id}/restore).
+export default function CheckpointsPanel({ client, sessionId, onRestored, onCaptured }: Props) {
+  const [checkpoints, setCheckpoints] = useState<CheckpointMetadata[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [label, setLabel] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [confirmingId, setConfirmingId] = useState<string | null>(null);
+  const [restoringId, setRestoringId] = useState<string | null>(null);
+  const seqRef = useRef(0);
+
+  const load = useCallback(async () => {
+    const seq = ++seqRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const list = await client.listCheckpoints(sessionId);
+      if (seqRef.current !== seq) return;
+      setCheckpoints(list);
+      setLoading(false);
+    } catch (e) {
+      if (seqRef.current !== seq) return;
+      setLoading(false);
+      setError(`checkpoints load failed: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  }, [client, sessionId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const create = async () => {
+    setCreating(true);
+    setError(null);
+    try {
+      await client.captureCheckpoint(sessionId, label);
+      setLabel("");
+      await load();
+      onCaptured?.();
+    } catch (e) {
+      setError(`checkpoint failed: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const restore = async (checkpointId: string) => {
+    setRestoringId(checkpointId);
+    setError(null);
+    try {
+      await client.restoreCheckpoint(sessionId, checkpointId);
+      setConfirmingId(null);
+      await onRestored();
+    } catch (e) {
+      setConfirmingId(null);
+      setError(`restore failed: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setRestoringId(null);
+    }
+  };
+
+  return (
+    <section className="flex h-full min-h-0 flex-col bg-surface-1">
+      <div className="flex items-center justify-between border-b border-border px-4 py-2">
+        <div className="text-sm font-semibold text-fg">
+          Checkpoints · {checkpoints.length}
+        </div>
+        {error && <div className="text-xs text-err">{error}</div>}
+      </div>
+      <div className="flex items-center gap-2 border-b border-border px-4 py-2">
+        <input
+          className="min-w-0 flex-1 rounded-md border border-border bg-surface-0 px-2 py-1 text-xs text-fg placeholder:text-muted focus:border-accent focus:outline-none"
+          placeholder="label (optional)"
+          aria-label="checkpoint label"
+          value={label}
+          onChange={(e) => setLabel(e.target.value)}
+        />
+        <button
+          className="shrink-0 rounded-md border border-border px-2 py-1 text-xs text-fg transition-colors hover:border-border-active disabled:opacity-40"
+          disabled={creating}
+          onClick={() => void create()}
+        >
+          {creating ? "Creating…" : "Create checkpoint"}
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto">
+        {loading ? (
+          <div className="px-4 py-3 text-sm text-muted">Loading checkpoints…</div>
+        ) : checkpoints.length === 0 ? (
+          <div className="px-4 py-3 text-sm text-muted">No checkpoints</div>
+        ) : (
+          checkpoints.map((checkpoint) => (
+            <div key={checkpoint.checkpoint_id} className="border-b border-border px-4 py-2 text-xs">
+              <div className="flex items-center gap-2">
+                <span
+                  className="min-w-0 flex-1 truncate font-mono text-fg"
+                  title={checkpoint.checkpoint_id}
+                >
+                  {checkpoint.label?.trim() || checkpoint.checkpoint_id}
+                </span>
+                <span className="shrink-0 text-muted">{formatTime(checkpoint.created_at)}</span>
+                {confirmingId !== checkpoint.checkpoint_id && (
+                  <button
+                    className="shrink-0 rounded-md border border-border px-2 py-0.5 text-[11px] text-fg transition-colors hover:border-border-active disabled:opacity-40"
+                    disabled={restoringId !== null}
+                    onClick={() => setConfirmingId(checkpoint.checkpoint_id)}
+                  >
+                    Restore
+                  </button>
+                )}
+              </div>
+              <div className="mt-0.5 truncate font-mono text-muted">
+                {checkpoint.checkpoint_id} · {checkpoint.entry_count}{" "}
+                {checkpoint.entry_count === 1 ? "entry" : "entries"}
+              </div>
+              {confirmingId === checkpoint.checkpoint_id && (
+                <div className="mt-2 rounded-md border border-warn/40 bg-warn/5 px-2 py-1.5">
+                  <div className="text-[11px] text-warn">
+                    Restore rewinds session history and runtime settings to this checkpoint.
+                    Workspace files are not restored; inspect or save the workspace diff first.
+                  </div>
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <button
+                      className="rounded-md border border-warn/40 px-2 py-0.5 text-[11px] font-medium text-warn transition-colors hover:bg-warn/10 disabled:opacity-40"
+                      disabled={restoringId !== null}
+                      onClick={() => void restore(checkpoint.checkpoint_id)}
+                    >
+                      {restoringId === checkpoint.checkpoint_id
+                        ? "Restoring…"
+                        : "Confirm restore"}
+                    </button>
+                    <button
+                      className="rounded-md border border-border px-2 py-0.5 text-[11px] text-muted transition-colors hover:text-fg disabled:opacity-40"
+                      disabled={restoringId !== null}
+                      onClick={() => setConfirmingId(null)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
+
+function formatTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
diff --git a/coding-agent/webui/app/src/components/Composer.tsx b/coding-agent/webui/app/src/components/Composer.tsx
index cf8e1ff7b..0e5be3555 100644
--- a/coding-agent/webui/app/src/components/Composer.tsx
+++ b/coding-agent/webui/app/src/components/Composer.tsx
@@ -16,9 +16,9 @@ export default function Composer({
   streaming,
 }: Props) {
   return (
-    <footer className="flex items-end gap-3 border-t border-border bg-surface-1 px-4 py-3">
+    <footer className="flex min-w-0 items-end gap-2 border-t border-border bg-surface-1 px-2 py-3 sm:gap-3 sm:px-4">
       <textarea
-        className="min-h-[48px] flex-1 resize-none rounded-xl border border-border bg-surface-0 px-4 py-2.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none"
+        className="min-h-[48px] min-w-0 flex-1 resize-none rounded-xl border border-border bg-surface-0 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none sm:px-4"
         placeholder="Ask the agent…  (Enter to send, Shift+Enter for newline)"
         value={prompt}
         onChange={(e) => onPromptChange(e.target.value)}
@@ -30,14 +30,14 @@ export default function Composer({
         }}
       />
       <button
-        className="rounded-xl bg-accent px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-hover disabled:opacity-40"
+        className="rounded-xl bg-accent px-3 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-hover disabled:opacity-40 sm:px-5"
         disabled={disabled}
         onClick={onSend}
       >
         Send
       </button>
       <button
-        className="rounded-xl border border-border px-5 py-2.5 text-sm text-fg transition-colors hover:border-border-active disabled:opacity-40"
+        className="rounded-xl border border-border px-3 py-2.5 text-sm text-fg transition-colors hover:border-border-active disabled:opacity-40 sm:px-5"
         disabled={!streaming}
         onClick={onCancel}
       >
diff --git a/coding-agent/webui/app/src/components/DiffPanel.tsx b/coding-agent/webui/app/src/components/DiffPanel.tsx
index 3d5b4a31c..5df34da73 100644
--- a/coding-agent/webui/app/src/components/DiffPanel.tsx
+++ b/coding-agent/webui/app/src/components/DiffPanel.tsx
@@ -8,7 +8,7 @@ interface Props {
 
 export default function DiffPanel({ diff, patch, onClose }: Props) {
   return (
-    <section className="border-t border-border bg-surface-1">
+    <section className="flex h-full min-h-0 flex-col bg-surface-1">
       <div className="flex items-center justify-between border-b border-border px-4 py-2">
         <div className="text-sm font-semibold text-fg">
           Workspace diff · +{diff.additions} -{diff.deletions}
@@ -20,8 +20,8 @@ export default function DiffPanel({ diff, patch, onClose }: Props) {
           Close
         </button>
       </div>
-      <div className="grid max-h-80 overflow-hidden md:grid-cols-[18rem_minmax(0,1fr)]">
-        <div className="overflow-auto border-b border-border md:border-r md:border-b-0">
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="max-h-[40%] overflow-auto border-b border-border">
           {diff.files.length === 0 ? (
             <div className="px-4 py-3 text-sm text-muted">No changes</div>
           ) : (
@@ -31,7 +31,7 @@ export default function DiffPanel({ diff, patch, onClose }: Props) {
                 className="grid grid-cols-[4.5rem_1fr] gap-2 border-b border-border px-4 py-2 text-xs"
               >
                 <span className={statusColor(file.status)}>{file.status}</span>
-                <span className="truncate text-fg" title={file.path}>
+                <span className="truncate font-mono text-fg" title={file.path}>
                   {file.path}
                 </span>
                 <span className="text-muted">
@@ -44,7 +44,7 @@ export default function DiffPanel({ diff, patch, onClose }: Props) {
             ))
           )}
         </div>
-        <pre className="overflow-auto bg-surface-0 px-4 py-3 text-xs leading-relaxed">
+        <pre className="min-h-0 flex-1 overflow-auto bg-surface-0 px-4 py-3 text-xs leading-relaxed">
           {patch?.patch
             ? patch.patch.split("\n").map((line, index) => (
                 <div key={`${index}:${line}`} className={lineColor(line)}>
diff --git a/coding-agent/webui/app/src/components/Header.tsx b/coding-agent/webui/app/src/components/Header.tsx
index ab450f790..8459ebf96 100644
--- a/coding-agent/webui/app/src/components/Header.tsx
+++ b/coding-agent/webui/app/src/components/Header.tsx
@@ -12,7 +12,7 @@ interface Config {
 }
 
 // Mirrors ProviderName in src/coding_agent/server/schemas.py.
-const PROVIDERS = [
+export const PROVIDERS = [
   "openai",
   "anthropic",
   "copilot",
@@ -31,24 +31,28 @@ interface Props {
   config: Config;
   onConfigChange: (patch: Partial<Config>) => void;
   onNewSession: () => void;
-  onShowDiff: () => void;
+  onToggleSidebar: () => void;
   sessionId: string | null;
   status: string;
   client: AgentClient;
   theme: "dark" | "light";
   onToggleTheme: () => void;
+  showThinking: boolean;
+  onToggleThinking: () => void;
 }
 
 export default function Header({
   config,
   onConfigChange,
   onNewSession,
-  onShowDiff,
+  onToggleSidebar,
   sessionId,
   status,
   client,
   theme,
   onToggleTheme,
+  showThinking,
+  onToggleThinking,
 }: Props) {
   // Live model ids for the selected provider; null = use MODEL_PRESETS.
   const [liveModels, setLiveModels] = useState<string[] | null>(null);
@@ -78,65 +82,70 @@ export default function Header({
   const modelOptions = liveModels ?? MODEL_PRESETS;
 
   return (
-    <header className="flex flex-wrap items-center gap-2 border-b border-border bg-surface-1 px-4 py-2.5">
+    <header className="flex min-w-0 flex-wrap items-center gap-2 border-b border-border bg-surface-1 px-3 py-2.5 sm:px-4">
+      <button
+        type="button"
+        className="rounded-lg border border-border px-2.5 py-1.5 text-sm text-fg transition-colors hover:border-border-active"
+        onClick={onToggleSidebar}
+        aria-label="toggle sidebar"
+        title="Toggle sidebar"
+      >
+        ☰
+      </button>
       <input
-        className="w-48 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none"
+        className="min-w-0 flex-1 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none sm:w-48 sm:flex-none"
         value={config.baseUrl}
         title="Server base URL"
         onChange={(e) => onConfigChange({ baseUrl: e.target.value })}
       />
       <input
-        className="w-36 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none"
+        className="w-full rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none sm:w-36"
         type="password"
         placeholder="X-API-Key"
         value={config.apiKey}
         onChange={(e) => onConfigChange({ apiKey: e.target.value })}
       />
       <input
-        className="w-52 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none"
+        className="w-full rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none sm:w-52"
         placeholder="repo path (optional)"
         value={config.repoPath}
         onChange={(e) => onConfigChange({ repoPath: e.target.value })}
       />
-      <select
-        className="rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg focus:border-accent focus:outline-none"
-        value={config.provider}
-        title="provider"
-        onChange={(e) => onConfigChange({ provider: e.target.value })}
+      <div
+        className="grid w-full min-w-0 grid-cols-1 gap-1.5 sm:flex sm:w-auto sm:flex-nowrap sm:items-center"
+        title="Defaults applied when creating a new session (per-session overrides live in the Settings panel)"
       >
-        <option value="">server default</option>
-        {PROVIDERS.map((p) => (
-          <option key={p} value={p}>
-            {p}
-          </option>
-        ))}
-      </select>
-      <input
-        className="w-44 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none disabled:opacity-40"
-        list="model-options"
-        placeholder="model (e.g. kimi-for-coding)"
-        title="model"
-        value={config.model}
-        disabled={!config.provider}
-        onChange={(e) => onConfigChange({ model: e.target.value })}
-      />
-      <datalist id="model-options">
-        {modelOptions.map((m) => (
-          <option key={m} value={m} />
-        ))}
-      </datalist>
-      <select
-        className="rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg focus:border-accent focus:outline-none"
-        value={config.approval}
-        title="approval policy"
-        onChange={(e) =>
-          onConfigChange({ approval: e.target.value as ApprovalPolicy })
-        }
-      >
-        <option value="auto">auto</option>
-        <option value="interactive">interactive</option>
-        <option value="yolo">yolo</option>
-      </select>
+        <span className="text-[10px] font-medium tracking-wide text-muted uppercase">
+          new session defaults
+        </span>
+        <select
+          className="w-full min-w-0 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg focus:border-accent focus:outline-none sm:w-auto"
+          value={config.provider}
+          title="provider"
+          onChange={(e) => onConfigChange({ provider: e.target.value })}
+        >
+          <option value="">server default</option>
+          {PROVIDERS.map((p) => (
+            <option key={p} value={p}>
+              {p}
+            </option>
+          ))}
+        </select>
+        <input
+          className="w-full min-w-0 rounded-lg border border-border bg-surface-0 px-3 py-1.5 font-mono text-sm text-fg placeholder:text-muted focus:border-accent focus:outline-none disabled:opacity-40 sm:w-44"
+          list="model-options"
+          placeholder="model (e.g. kimi-for-coding)"
+          title="model"
+          value={config.model}
+          disabled={!config.provider}
+          onChange={(e) => onConfigChange({ model: e.target.value })}
+        />
+        <datalist id="model-options">
+          {modelOptions.map((m) => (
+            <option key={m} value={m} />
+          ))}
+        </datalist>
+      </div>
       <button
         className="rounded-lg bg-accent px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-accent-hover"
         onClick={onNewSession}
@@ -144,11 +153,18 @@ export default function Header({
         New session
       </button>
       <button
-        className="rounded-lg border border-border px-4 py-1.5 text-sm text-fg transition-colors hover:border-border-active disabled:opacity-40"
-        disabled={!sessionId}
-        onClick={onShowDiff}
+        type="button"
+        className={`rounded-lg border px-3 py-1.5 text-sm transition-colors ${
+          showThinking
+            ? "border-accent/50 text-accent"
+            : "border-border text-muted hover:border-border-active"
+        }`}
+        onClick={onToggleThinking}
+        aria-label="toggle thinking"
+        aria-pressed={showThinking}
+        title={showThinking ? "Hide thinking blocks" : "Show thinking blocks"}
       >
-        Diff
+        💭
       </button>
       <button
         type="button"
@@ -159,7 +175,7 @@ export default function Header({
       >
         {theme === "dark" ? "☀️" : "🌙"}
       </button>
-      <span className="ml-auto text-xs text-muted">
+      <span className="ml-auto w-full max-w-full truncate text-right text-xs text-muted sm:w-auto">
         {sessionId ? status : "no session"}
       </span>
     </header>
diff --git a/coding-agent/webui/app/src/components/MemoryPanel.tsx b/coding-agent/webui/app/src/components/MemoryPanel.tsx
index dde906763..b8241c320 100644
--- a/coding-agent/webui/app/src/components/MemoryPanel.tsx
+++ b/coding-agent/webui/app/src/components/MemoryPanel.tsx
@@ -1,15 +1,22 @@
+import type { AgentClient } from "../lib/api";
 import type {
   ContextPack,
   ContextPackItem,
   MemoryReviewRecord,
   RuntimeRun,
 } from "../lib/types";
+import ReviewQueue from "./ReviewQueue";
 
 interface Props {
   hits: ContextPackItem[];
   memories: MemoryReviewRecord[];
   loading: boolean;
   error: string | null;
+  // When provided, the static accepted list is replaced by the interactive
+  // review queue (status tabs + accept/reject transitions).
+  client?: AgentClient;
+  sessionId?: string;
+  onReviewsChanged?: () => void;
 }
 
 // Flatten every run's metadata.context_pack sections into a single hit list.
@@ -29,9 +36,17 @@ export function extractRecallHits(runs: RuntimeRun[]): ContextPackItem[] {
   return hits;
 }
 
-export default function MemoryPanel({ hits, memories, loading, error }: Props) {
+export default function MemoryPanel({
+  hits,
+  memories,
+  loading,
+  error,
+  client,
+  sessionId,
+  onReviewsChanged,
+}: Props) {
   return (
-    <section className="border-t border-border bg-surface-1">
+    <section className="flex h-full min-h-0 flex-col bg-surface-1">
       <div className="flex items-center justify-between border-b border-border px-4 py-2">
         <div className="text-sm font-semibold text-fg">
           Memory · {hits.length} recall {hits.length === 1 ? "hit" : "hits"} ·{" "}
@@ -39,8 +54,8 @@ export default function MemoryPanel({ hits, memories, loading, error }: Props) {
         </div>
         {error && <div className="text-xs text-err">{error}</div>}
       </div>
-      <div className="grid max-h-80 overflow-hidden md:grid-cols-2">
-        <div className="overflow-auto border-b border-border md:border-r md:border-b-0">
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="flex min-h-0 flex-1 flex-col overflow-auto border-b border-border">
           <div className="border-b border-border px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted">
             Recall hits
           </div>
@@ -70,7 +85,10 @@ export default function MemoryPanel({ hits, memories, loading, error }: Props) {
             ))
           )}
         </div>
-        <div className="overflow-auto">
+        {client && sessionId && onReviewsChanged && (
+          <ReviewQueue client={client} sessionId={sessionId} onChanged={onReviewsChanged} />
+        )}
+        <div className="flex min-h-0 flex-1 flex-col overflow-auto">
           <div className="border-b border-border px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted">
             Accepted memories
           </div>
diff --git a/coding-agent/webui/app/src/components/ResultPanel.test.tsx b/coding-agent/webui/app/src/components/ResultPanel.test.tsx
new file mode 100644
index 000000000..f9b749dac
--- /dev/null
+++ b/coding-agent/webui/app/src/components/ResultPanel.test.tsx
@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import ResultPanel, { hasResultContent } from "./ResultPanel";
+import type { SessionResult } from "../lib/types";
+
+afterEach(cleanup);
+
+const result = (overrides: Partial<SessionResult> = {}): SessionResult => ({
+  session_id: "s1",
+  status: "completed",
+  turn_status: "idle",
+  provider_name: "kimi-code",
+  model_name: "kimi-for-coding",
+  final_answer: "All **58 tests** pass.",
+  verification_summary: "vitest + tsc green",
+  failure_details: null,
+  ...overrides,
+});
+
+describe("ResultPanel", () => {
+  it("renders the final answer as markdown with verification summary", () => {
+    render(<ResultPanel result={result()} />);
+
+    expect(screen.getByText("Session result")).toBeTruthy();
+    // Markdown: bold segments render as <strong>.
+    expect(screen.getByText("58 tests").tagName).toBe("STRONG");
+    expect(screen.getByText(/vitest \+ tsc green/)).toBeTruthy();
+    expect(screen.getByText("kimi-code / kimi-for-coding")).toBeTruthy();
+  });
+
+  it("renders failure details with error styling", () => {
+    render(
+      <ResultPanel
+        result={result({ status: "failed", failure_details: "step 12: bash exited 1" })}
+      />,
+    );
+
+    const failure = screen.getByText("step 12: bash exited 1");
+    expect(failure.className).toContain("text-err");
+  });
+
+  it("collapses and expands via the header", () => {
+    render(<ResultPanel result={result()} />);
+
+    const toggle = screen.getByRole("button", { name: /session result/i });
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    fireEvent.click(toggle);
+
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByText(/58 tests/)).toBeNull();
+
+    fireEvent.click(toggle);
+    expect(screen.getByText("58 tests")).toBeTruthy();
+  });
+});
+
+describe("hasResultContent", () => {
+  it("is false when every content field is empty", () => {
+    expect(
+      hasResultContent(
+        result({ final_answer: null, verification_summary: null, failure_details: null }),
+      ),
+    ).toBe(false);
+    expect(
+      hasResultContent(result({ final_answer: "  ", verification_summary: "", failure_details: null })),
+    ).toBe(false);
+  });
+
+  it("is true when any content field is present", () => {
+    expect(
+      hasResultContent(result({ final_answer: null, failure_details: "boom" })),
+    ).toBe(true);
+  });
+});
diff --git a/coding-agent/webui/app/src/components/ResultPanel.tsx b/coding-agent/webui/app/src/components/ResultPanel.tsx
new file mode 100644
index 000000000..d9c4da83b
--- /dev/null
+++ b/coding-agent/webui/app/src/components/ResultPanel.tsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import type { SessionResult } from "../lib/types";
+
+interface Props {
+  result: SessionResult;
+}
+
+// True when GET /sessions/{id}/result has anything worth showing.
+export function hasResultContent(result: SessionResult): boolean {
+  return Boolean(
+    result.final_answer?.trim() ||
+      result.verification_summary?.trim() ||
+      result.failure_details?.trim(),
+  );
+}
+
+// Collapsible session result block pinned above the timeline.
+export default function ResultPanel({ result }: Props) {
+  const [open, setOpen] = useState(true);
+  const failed = Boolean(result.failure_details?.trim());
+  const meta = [result.provider_name, result.model_name].filter(Boolean).join(" / ");
+
+  return (
+    <div className="shrink-0 border-b border-border bg-surface-1 px-4 py-2 lg:px-8">
+      <div className="mx-auto max-w-3xl">
+        <button
+          type="button"
+          className="flex w-full items-center gap-2 text-left"
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span
+            className={`h-2 w-2 shrink-0 rounded-full ${failed ? "bg-err" : result.status === "completed" ? "bg-ok" : "bg-muted"}`}
+            title={`status: ${result.status}`}
+          />
+          <span className="text-xs font-semibold tracking-wide text-fg uppercase">
+            Session result
+          </span>
+          <span className="text-[11px] text-muted">{result.status}</span>
+          {meta && <span className="truncate font-mono text-[11px] text-muted">{meta}</span>}
+          <span className="ml-auto shrink-0 text-[10px] text-muted" aria-hidden>
+            {open ? "▾" : "▸"}
+          </span>
+        </button>
+        {open && (
+          <div className="mt-2 flex flex-col gap-2 pb-1">
+            {result.final_answer?.trim() && (
+              <div className="prose-webui text-sm leading-relaxed">
+                <ReactMarkdown>{result.final_answer}</ReactMarkdown>
+              </div>
+            )}
+            {result.verification_summary?.trim() && (
+              <div className="rounded-lg border border-border bg-surface-0 px-3 py-2 text-xs text-fg/80">
+                <span className="mr-1.5 font-semibold text-muted uppercase">verification</span>
+                {result.verification_summary}
+              </div>
+            )}
+            {result.failure_details?.trim() && (
+              <div className="rounded-lg border border-err/40 bg-err/5 px-3 py-2 text-xs whitespace-pre-wrap text-err">
+                {result.failure_details}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/coding-agent/webui/app/src/components/ReviewQueue.test.tsx b/coding-agent/webui/app/src/components/ReviewQueue.test.tsx
new file mode 100644
index 000000000..1e314304b
--- /dev/null
+++ b/coding-agent/webui/app/src/components/ReviewQueue.test.tsx
@@ -0,0 +1,240 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AgentClient } from "../lib/api";
+import ReviewQueue from "./ReviewQueue";
+import type { MemoryReviewRecord } from "../lib/types";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const record = (overrides: Partial<MemoryReviewRecord> = {}): MemoryReviewRecord => ({
+  candidate_id: "cand-1",
+  status: "candidate",
+  review_reason: null,
+  kind: "fact",
+  title: "Project uses uv",
+  summary: "The project standardizes on uv for dependency management.",
+  scope: "project",
+  tags: ["python"],
+  confidence: 0.92,
+  topic_id: null,
+  session_id: "s1",
+  tape_id: null,
+  ...overrides,
+});
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+const client = new AgentClient({ baseUrl: "http://127.0.0.1:18080" });
+
+function stubFetch(handlers: {
+  lists: Record<string, MemoryReviewRecord[]>;
+  onPost?: (candidateId: string, body: Record<string, unknown>) => void;
+}) {
+  const listCalls: string[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input);
+      if (init?.method === "POST" && url.includes("/memory/reviews/")) {
+        const candidateId = url.split("/memory/reviews/")[1];
+        handlers.onPost?.(candidateId, JSON.parse(String(init.body)) as Record<string, unknown>);
+        return Promise.resolve(jsonResponse({ candidate_id: candidateId, status: "accepted" }));
+      }
+      if (url.includes("/memory/reviews")) {
+        const status = new URL(url).searchParams.get("status") ?? "";
+        listCalls.push(status);
+        return Promise.resolve(jsonResponse(handlers.lists[status] ?? []));
+      }
+      throw new Error(`unexpected fetch ${url}`);
+    }),
+  );
+  return listCalls;
+}
+
+describe("ReviewQueue", () => {
+  it("defaults to candidates and accepts a candidate, then refreshes the list", async () => {
+    const posted: Array<{ candidateId: string; body: Record<string, unknown> }> = [];
+    const onChanged = vi.fn();
+    const lists: Record<string, MemoryReviewRecord[]> = { candidate: [record()] };
+    const listCalls = stubFetch({
+      lists,
+      onPost: (candidateId, body) => {
+        posted.push({ candidateId, body });
+        lists.candidate = [];
+      },
+    });
+
+    render(<ReviewQueue client={client} sessionId="s1" onChanged={onChanged} />);
+    fireEvent.click(screen.getByRole("button", { name: /review queue/i }));
+
+    expect(await screen.findByText("Project uses uv")).toBeTruthy();
+    expect(screen.getByRole("tab", { name: "Candidates" }).getAttribute("aria-selected")).toBe(
+      "true",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Accept" }));
+
+    await waitFor(() => expect(posted).toHaveLength(1));
+    expect(posted[0]).toEqual({
+      candidateId: "cand-1",
+      body: { status: "accepted", reason: null },
+    });
+    await waitFor(() => expect(onChanged).toHaveBeenCalledTimes(1));
+    // The candidate list was refetched after the transition and is now empty.
+    await waitFor(() => expect(listCalls.filter((s) => s === "candidate").length).toBe(2));
+    expect(await screen.findByText("No candidates memories")).toBeTruthy();
+    expect(screen.queryByText("Project uses uv")).toBeNull();
+  });
+
+  it("rejects a candidate with an optional reason via the inline prompt", async () => {
+    const posted: Array<{ candidateId: string; body: Record<string, unknown> }> = [];
+    const onChanged = vi.fn();
+    const lists: Record<string, MemoryReviewRecord[]> = { candidate: [record()] };
+    stubFetch({
+      lists,
+      onPost: (candidateId, body) => {
+        posted.push({ candidateId, body });
+        lists.candidate = [];
+      },
+    });
+
+    render(<ReviewQueue client={client} sessionId="s1" onChanged={onChanged} />);
+    fireEvent.click(screen.getByRole("button", { name: /review queue/i }));
+
+    expect(await screen.findByText("Project uses uv")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Reject" }));
+    expect(screen.queryByText("Project uses uv")).toBeTruthy();
+    expect(posted).toHaveLength(0);
+
+    fireEvent.change(screen.getByLabelText("reject reason"), {
+      target: { value: "outdated advice" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm reject" }));
+
+    await waitFor(() => expect(posted).toHaveLength(1));
+    expect(posted[0]).toEqual({
+      candidateId: "cand-1",
+      body: { status: "rejected", reason: "outdated advice" },
+    });
+    await waitFor(() => expect(onChanged).toHaveBeenCalledTimes(1));
+    expect(await screen.findByText("No candidates memories")).toBeTruthy();
+  });
+
+  it("cancelling the inline reject prompt posts nothing", async () => {
+    const onChanged = vi.fn();
+    stubFetch({ lists: { candidate: [record()] } });
+
+    render(<ReviewQueue client={client} sessionId="s1" onChanged={onChanged} />);
+    fireEvent.click(screen.getByRole("button", { name: /review queue/i }));
+
+    expect(await screen.findByText("Project uses uv")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Reject" }));
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(screen.queryByLabelText("reject reason")).toBeNull();
+    expect(onChanged).not.toHaveBeenCalled();
+    expect(screen.getByText("Project uses uv")).toBeTruthy();
+  });
+
+  it("falls back to the accepted tab when no candidates exist", async () => {
+    const listCalls = stubFetch({
+      lists: {
+        candidate: [],
+        accepted: [record({ candidate_id: "cand-9", status: "accepted", title: "Kept memory" })],
+      },
+    });
+
+    render(<ReviewQueue client={client} sessionId="s1" onChanged={() => undefined} />);
+    fireEvent.click(screen.getByRole("button", { name: /review queue/i }));
+
+    expect(await screen.findByText("Kept memory")).toBeTruthy();
+    expect(screen.getByRole("tab", { name: "Accepted" }).getAttribute("aria-selected")).toBe(
+      "true",
+    );
+    expect(listCalls).toEqual(["candidate", "accepted"]);
+  });
+
+  it("loads the selected status when switching tabs", async () => {
+    const listCalls = stubFetch({
+      lists: {
+        candidate: [record()],
+        rejected: [
+          record({
+            candidate_id: "cand-7",
+            status: "rejected",
+            title: "Dropped memory",
+            review_reason: "stale",
+          }),
+        ],
+      },
+    });
+
+    render(<ReviewQueue client={client} sessionId="s1" onChanged={() => undefined} />);
+    fireEvent.click(screen.getByRole("button", { name: /review queue/i }));
+
+    expect(await screen.findByText("Project uses uv")).toBeTruthy();
+    fireEvent.click(screen.getByRole("tab", { name: "Rejected" }));
+
+    expect(await screen.findByText("Dropped memory")).toBeTruthy();
+    expect(screen.getByText("reason: stale")).toBeTruthy();
+    // Rejected rows carry no accept/reject actions.
+    expect(screen.queryByRole("button", { name: "Accept" })).toBeNull();
+    expect(listCalls).toEqual(["candidate", "rejected"]);
+  });
+
+  it("refreshes the current tab, not the stale one, when the user switches tabs mid-transition", async () => {
+    let resolvePost: (() => void) | null = null;
+    const lists: Record<string, MemoryReviewRecord[]> = {
+      candidate: [record()],
+      accepted: [record({ candidate_id: "cand-2", status: "accepted", title: "Kept memory" })],
+    };
+    const listCalls: string[] = [];
+    vi.stubGlobal(
+      "fetch",
+      vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        if (init?.method === "POST" && url.includes("/memory/reviews/")) {
+          return new Promise<Response>((resolve) => {
+            resolvePost = () =>
+              resolve(jsonResponse({ candidate_id: "cand-1", status: "accepted" }));
+          });
+        }
+        if (url.includes("/memory/reviews")) {
+          const status = new URL(url).searchParams.get("status") ?? "";
+          listCalls.push(status);
+          return Promise.resolve(jsonResponse(lists[status] ?? []));
+        }
+        throw new Error(`unexpected fetch ${url}`);
+      }),
+    );
+
+    render(<ReviewQueue client={client} sessionId="s1" onChanged={() => undefined} />);
+    fireEvent.click(screen.getByRole("button", { name: /review queue/i }));
+    expect(await screen.findByText("Project uses uv")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Accept" }));
+    // Switch tabs while the transition POST is still in flight.
+    fireEvent.click(screen.getByRole("tab", { name: "Accepted" }));
+    expect(await screen.findByText("Kept memory")).toBeTruthy();
+
+    expect(resolvePost).not.toBeNull();
+    await act(async () => {
+      resolvePost!();
+    });
+
+    // The post-transition reload targeted the accepted tab, and the stale
+    // candidate list never overwrote the accepted records.
+    await waitFor(() => expect(listCalls[listCalls.length - 1]).toBe("accepted"));
+    expect(screen.getByText("Kept memory")).toBeTruthy();
+    expect(screen.queryByText("Project uses uv")).toBeNull();
+  });
+});
diff --git a/coding-agent/webui/app/src/components/ReviewQueue.tsx b/coding-agent/webui/app/src/components/ReviewQueue.tsx
new file mode 100644
index 000000000..5c6ec2898
--- /dev/null
+++ b/coding-agent/webui/app/src/components/ReviewQueue.tsx
@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { AgentClient } from "../lib/api";
+import type { MemoryReviewRecord } from "../lib/types";
+
+type ReviewStatus = "candidate" | "accepted" | "rejected" | "archived";
+
+const TABS: Array<{ id: ReviewStatus; label: string }> = [
+  { id: "candidate", label: "Candidates" },
+  { id: "accepted", label: "Accepted" },
+  { id: "rejected", label: "Rejected" },
+  { id: "archived", label: "Archived" },
+];
+
+interface Props {
+  client: AgentClient;
+  sessionId: string;
+  // Called after a transition so the parent can refresh its accepted list.
+  onChanged: () => void;
+}
+
+// Reviewed-memory curation queue (GET/POST /sessions/{id}/memory/reviews).
+// Collapsed by default; the first expand loads candidates (or accepted when
+// no candidates exist) so a passive panel open costs no extra requests.
+export default function ReviewQueue({ client, sessionId, onChanged }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const [tab, setTab] = useState<ReviewStatus>("candidate");
+  const [records, setRecords] = useState<MemoryReviewRecord[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [rejectingId, setRejectingId] = useState<string | null>(null);
+  const [reason, setReason] = useState("");
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const seqRef = useRef(0);
+  const initializedRef = useRef(false);
+  // Mirror of `tab` for async callbacks: a transition started on one tab must
+  // reload whatever tab is current when its POST finishes, not the stale one.
+  const tabRef = useRef<ReviewStatus>(tab);
+
+  const load = useCallback(
+    async (status: ReviewStatus): Promise<MemoryReviewRecord[] | null> => {
+      const seq = ++seqRef.current;
+      setLoading(true);
+      setError(null);
+      try {
+        const list = await client.listMemoryReviews(sessionId, status);
+        if (seqRef.current !== seq) return null;
+        setRecords(list);
+        setLoading(false);
+        return list;
+      } catch (e) {
+        if (seqRef.current !== seq) return null;
+        setRecords([]);
+        setLoading(false);
+        setError(`reviews load failed: ${e instanceof Error ? e.message : String(e)}`);
+        return null;
+      }
+    },
+    [client, sessionId],
+  );
+
+  // Initial load on first expand: candidates win; fall back to accepted when
+  // none exist.
+  useEffect(() => {
+    if (!expanded || initializedRef.current) return;
+    initializedRef.current = true;
+    let cancelled = false;
+    void (async () => {
+      const candidates = await load("candidate");
+      if (cancelled || candidates === null) return;
+      if (candidates.length === 0) {
+        tabRef.current = "accepted";
+        setTab("accepted");
+        await load("accepted");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [expanded, load]);
+
+  const selectTab = (status: ReviewStatus) => {
+    if (status === tab) return;
+    tabRef.current = status;
+    setTab(status);
+    setRejectingId(null);
+    setReason("");
+    void load(status);
+  };
+
+  const transition = async (
+    candidateId: string,
+    status: "accepted" | "rejected",
+    reasonText?: string,
+  ) => {
+    setBusyId(candidateId);
+    setError(null);
+    try {
+      await client.transitionMemoryReview(sessionId, candidateId, status, reasonText);
+      setRejectingId(null);
+      setReason("");
+      // Reload the tab that is current now — the user may have switched tabs
+      // while the POST was in flight.
+      await load(tabRef.current);
+      onChanged();
+    } catch (e) {
+      setError(`review update failed: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  return (
+    <div
+      className={
+        expanded
+          ? "flex min-h-0 flex-1 flex-col overflow-auto border-b border-border"
+          : "shrink-0 border-b border-border"
+      }
+    >
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 px-4 py-1.5 text-left text-xs font-semibold uppercase tracking-wide text-muted transition-colors hover:text-fg"
+        aria-expanded={expanded}
+        onClick={() => setExpanded((v) => !v)}
+      >
+        <span aria-hidden>{expanded ? "▾" : "▸"}</span>
+        Review queue
+      </button>
+      {expanded && (
+        <>
+      <div
+        className="flex items-center gap-1 border-b border-border px-3 py-1.5"
+        role="tablist"
+        aria-label="Memory review status"
+      >
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            role="tab"
+            aria-selected={tab === t.id}
+            className={`rounded-md px-2 py-1 text-xs transition-colors ${
+              tab === t.id
+                ? "bg-accent/15 font-medium text-accent"
+                : "text-muted hover:bg-surface-2 hover:text-fg"
+            }`}
+            onClick={() => selectTab(t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+      {error && (
+        <div className="border-b border-err/30 bg-err/5 px-4 py-1.5 text-xs text-err">
+          {error}
+        </div>
+      )}
+      {loading ? (
+        <div className="px-4 py-3 text-sm text-muted">Loading reviews…</div>
+      ) : records.length === 0 ? (
+        <div className="px-4 py-3 text-sm text-muted">
+          No {TABS.find((t) => t.id === tab)?.label.toLowerCase()} memories
+        </div>
+      ) : (
+        records.map((record) => (
+          <ReviewRow
+            key={record.candidate_id}
+            record={record}
+            actionable={tab === "candidate"}
+            busy={busyId === record.candidate_id}
+            rejecting={rejectingId === record.candidate_id}
+            reason={rejectingId === record.candidate_id ? reason : ""}
+            onReasonChange={setReason}
+            onAccept={() => void transition(record.candidate_id, "accepted")}
+            onRejectStart={() => {
+              setRejectingId(record.candidate_id);
+              setReason("");
+            }}
+            onRejectConfirm={() => void transition(record.candidate_id, "rejected", reason)}
+            onRejectCancel={() => {
+              setRejectingId(null);
+              setReason("");
+            }}
+          />
+        ))
+      )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function ReviewRow({
+  record,
+  actionable,
+  busy,
+  rejecting,
+  reason,
+  onReasonChange,
+  onAccept,
+  onRejectStart,
+  onRejectConfirm,
+  onRejectCancel,
+}: {
+  record: MemoryReviewRecord;
+  actionable: boolean;
+  busy: boolean;
+  rejecting: boolean;
+  reason: string;
+  onReasonChange: (value: string) => void;
+  onAccept: () => void;
+  onRejectStart: () => void;
+  onRejectConfirm: () => void;
+  onRejectCancel: () => void;
+}) {
+  return (
+    <div className="border-b border-border px-4 py-2 text-xs">
+      <div className="flex items-center gap-2">
+        <span className="min-w-0 flex-1 truncate font-medium text-fg" title={record.title}>
+          {record.title}
+        </span>
+        <span className="rounded-full border border-border px-1.5 py-0.5 text-accent">
+          {record.kind}
+        </span>
+        <span className="text-muted">conf {record.confidence.toFixed(2)}</span>
+      </div>
+      <div className="mt-0.5 text-fg/75">{record.summary}</div>
+      {record.review_reason && (
+        <div className="mt-0.5 text-muted">reason: {record.review_reason}</div>
+      )}
+      {record.tags.length > 0 && (
+        <div className="mt-1 flex flex-wrap gap-1">
+          {record.tags.map((tag) => (
+            <span key={tag} className="rounded-full bg-surface-0 px-1.5 py-0.5 text-muted">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+      {actionable && !rejecting && (
+        <div className="mt-2 flex items-center gap-2">
+          <button
+            className="rounded-md border border-ok/40 px-2 py-0.5 text-[11px] font-medium text-ok transition-colors hover:bg-ok/10 disabled:opacity-40"
+            disabled={busy}
+            onClick={onAccept}
+          >
+            Accept
+          </button>
+          <button
+            className="rounded-md border border-err/40 px-2 py-0.5 text-[11px] font-medium text-err transition-colors hover:bg-err/10 disabled:opacity-40"
+            disabled={busy}
+            onClick={onRejectStart}
+          >
+            Reject
+          </button>
+        </div>
+      )}
+      {actionable && rejecting && (
+        <div className="mt-2 flex flex-wrap items-center gap-2">
+          <input
+            className="min-w-32 flex-1 rounded-md border border-border bg-surface-0 px-2 py-1 text-xs text-fg placeholder:text-muted focus:border-accent focus:outline-none"
+            placeholder="reason (optional)"
+            aria-label="reject reason"
+            value={reason}
+            onChange={(e) => onReasonChange(e.target.value)}
+          />
+          <button
+            className="rounded-md border border-err/40 px-2 py-0.5 text-[11px] font-medium text-err transition-colors hover:bg-err/10 disabled:opacity-40"
+            disabled={busy}
+            onClick={onRejectConfirm}
+          >
+            Confirm reject
+          </button>
+          <button
+            className="rounded-md border border-border px-2 py-0.5 text-[11px] text-muted transition-colors hover:text-fg disabled:opacity-40"
+            disabled={busy}
+            onClick={onRejectCancel}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/coding-agent/webui/app/src/components/RightRail.tsx b/coding-agent/webui/app/src/components/RightRail.tsx
new file mode 100644
index 000000000..70f8f4a3b
--- /dev/null
+++ b/coding-agent/webui/app/src/components/RightRail.tsx
@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+
+export type RailPanel = "diff" | "memory" | "checkpoints" | "settings" | null;
+
+interface Props {
+  panel: RailPanel;
+  onToggle: (panel: Exclude<RailPanel, null>) => void;
+  children: ReactNode;
+}
+
+// Vertical icon strip plus one expandable panel. Below md the panel becomes
+// an overlay drawer pinned left of the icon strip; on md+ it expands inline.
+export default function RightRail({ panel, onToggle, children }: Props) {
+  return (
+    <>
+      {panel && (
+        <div
+          className="fixed inset-0 z-30 bg-black/50 md:hidden"
+          aria-hidden
+          onClick={() => onToggle(panel)}
+        />
+      )}
+      {panel && (
+        <aside
+          className="fixed inset-y-0 right-11 z-40 flex w-[min(380px,calc(100vw-2.75rem))] flex-col border-l border-border bg-surface-1 md:static md:z-auto md:w-[380px] md:shrink-0"
+          aria-label={`${panel} panel`}
+        >
+          {children}
+        </aside>
+      )}
+      <nav
+        className="fixed inset-y-0 right-0 z-40 flex w-11 shrink-0 flex-col items-center gap-1 border-l border-border bg-surface-1 py-2 md:static md:z-auto"
+        aria-label="Workspace panels"
+      >
+        <RailButton
+          label="diff"
+          active={panel === "diff"}
+          onClick={() => onToggle("diff")}
+          icon={
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="h-4 w-4">
+              <path d="M3 3.5h10" />
+              <path d="M3 8h6.5" />
+              <path d="M3 12.5h10" />
+            </svg>
+          }
+        />
+        <RailButton
+          label="memory"
+          active={panel === "memory"}
+          onClick={() => onToggle("memory")}
+          icon={
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" className="h-4 w-4">
+              <ellipse cx="8" cy="4" rx="5" ry="2" />
+              <path d="M3 4v8c0 1.1 2.2 2 5 2s5-.9 5-2V4" />
+              <path d="M3 8c0 1.1 2.2 2 5 2s5-.9 5-2" />
+            </svg>
+          }
+        />
+        <RailButton
+          label="checkpoints"
+          active={panel === "checkpoints"}
+          onClick={() => onToggle("checkpoints")}
+          icon={
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+              <path d="M4 1.5h8v13l-4-3-4 3z" />
+            </svg>
+          }
+        />
+        <RailButton
+          label="settings"
+          active={panel === "settings"}
+          onClick={() => onToggle("settings")}
+          icon={
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" className="h-4 w-4">
+              <circle cx="8" cy="8" r="2" />
+              <path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.4 3.4l1.4 1.4M11.2 11.2l1.4 1.4M12.6 3.4l-1.4 1.4M4.8 11.2l-1.4 1.4" />
+            </svg>
+          }
+        />
+      </nav>
+    </>
+  );
+}
+
+function RailButton({
+  label,
+  active,
+  onClick,
+  icon,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  icon: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={`flex h-8 w-8 items-center justify-center rounded-md transition-colors ${
+        active ? "bg-accent/15 text-accent" : "text-muted hover:bg-surface-2 hover:text-fg"
+      }`}
+      aria-label={`Toggle ${label} panel`}
+      aria-pressed={active}
+      title={`${active ? "Close" : "Open"} ${label} panel`}
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  );
+}
diff --git a/coding-agent/webui/app/src/components/SessionList.test.tsx b/coding-agent/webui/app/src/components/SessionList.test.tsx
new file mode 100644
index 000000000..85e8fe4cf
--- /dev/null
+++ b/coding-agent/webui/app/src/components/SessionList.test.tsx
@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import SessionList from "./SessionList";
+import type { SessionSummary } from "../lib/types";
+
+afterEach(cleanup);
+
+const session = (
+  id: string,
+  overrides: Partial<SessionSummary> = {},
+): SessionSummary => ({
+  session_id: id,
+  id,
+  status: "completed",
+  turn_status: "idle",
+  turn_id: null,
+  created_at: "2026-06-12T00:00:00Z",
+  updated_at: "2026-06-12T00:00:00Z",
+  last_activity: "2026-06-12T00:00:00Z",
+  turn_in_progress: false,
+  pending_approval: false,
+  provider_name: "test",
+  model_name: "model-x",
+  base_url: null,
+  max_steps: 12,
+  origin: null,
+  default_run_target: {},
+  workspace_id: null,
+  resumable: true,
+  last_run_id: null,
+  last_run_status: null,
+  last_interrupted_run_id: null,
+  resume_from_event_id: null,
+  checkpoint_count: 0,
+  latest_checkpoint_id: null,
+  latest_checkpoint_label: null,
+  ...overrides,
+});
+
+function renderList(sessions: SessionSummary[]) {
+  return render(
+    <SessionList
+      sessions={sessions}
+      activeSessionId={null}
+      loading={false}
+      error={null}
+      open
+      onRefresh={() => undefined}
+      onSelect={() => undefined}
+      onDelete={() => undefined}
+      onNewSession={() => undefined}
+    />,
+  );
+}
+
+describe("SessionList status dots", () => {
+  it("maps session states to dot color semantics", () => {
+    renderList([
+      session("session-running-0001", { status: "running" }),
+      session("session-pending-0001", { status: "waiting_approval", pending_approval: true }),
+      session("session-failed-0001", { status: "failed" }),
+      session("session-done-0001", { status: "completed" }),
+    ]);
+
+    const running = screen.getByTitle("status: running");
+    expect(running.className).toContain("bg-accent");
+    expect(running.className).toContain("animate-pulse");
+
+    expect(screen.getByTitle("status: pending").className).toContain("bg-warn");
+    expect(screen.getByTitle("status: failed").className).toContain("bg-err");
+    expect(screen.getByTitle("status: idle").className).toContain("bg-muted");
+  });
+});
+
+describe("SessionList checkpoint badge", () => {
+  it("shows the badge only when checkpoint_count is positive", () => {
+    renderList([
+      session("session-with-ckpt-01", { checkpoint_count: 3 }),
+      session("session-no-ckpt-0001"),
+    ]);
+
+    expect(screen.getByText("⎘ 3")).toBeTruthy();
+    expect(screen.queryByText("⎘ 0")).toBeNull();
+  });
+});
diff --git a/coding-agent/webui/app/src/components/SessionList.tsx b/coding-agent/webui/app/src/components/SessionList.tsx
index 5a3246730..0d7365feb 100644
--- a/coding-agent/webui/app/src/components/SessionList.tsx
+++ b/coding-agent/webui/app/src/components/SessionList.tsx
@@ -5,9 +5,11 @@ interface Props {
   activeSessionId: string | null;
   loading: boolean;
   error: string | null;
+  open: boolean;
   onRefresh: () => void;
   onSelect: (sessionId: string) => void;
   onDelete: (sessionId: string) => void;
+  onNewSession: () => void;
 }
 
 export default function SessionList({
@@ -15,23 +17,38 @@ export default function SessionList({
   activeSessionId,
   loading,
   error,
+  open,
   onRefresh,
   onSelect,
   onDelete,
+  onNewSession,
 }: Props) {
   return (
-    <aside className="flex w-full flex-col border-r border-border bg-surface-1 md:w-72">
+    <aside
+      className={`fixed inset-y-0 left-0 z-40 w-[260px] shrink-0 flex-col border-r border-border bg-surface-1 md:static md:z-auto ${
+        open ? "flex" : "hidden"
+      }`}
+      aria-label="Sessions"
+    >
       <div className="flex items-center justify-between border-b border-border px-3 py-2.5">
         <div className="text-xs font-semibold tracking-wide text-muted uppercase">
           Sessions
         </div>
-        <button
-          className="rounded-md border border-border px-2 py-1 text-xs text-fg transition-colors hover:border-border-active disabled:opacity-40"
-          disabled={loading}
-          onClick={onRefresh}
-        >
-          Refresh
-        </button>
+        <div className="flex items-center gap-1.5">
+          <button
+            className="rounded-md border border-border px-2 py-1 text-xs text-fg transition-colors hover:border-border-active"
+            onClick={onNewSession}
+          >
+            + New
+          </button>
+          <button
+            className="rounded-md border border-border px-2 py-1 text-xs text-fg transition-colors hover:border-border-active disabled:opacity-40"
+            disabled={loading}
+            onClick={onRefresh}
+          >
+            Refresh
+          </button>
+        </div>
       </div>
       {error && (
         <div className="border-b border-err/30 bg-err/5 px-3 py-2 text-xs text-err">
@@ -75,21 +92,29 @@ function SessionRow({
       }`}
     >
       <button
-        className="block min-w-0 flex-1 px-3 py-3 text-left"
+        className="block min-w-0 flex-1 px-3 py-2.5 text-left"
         onClick={() => onSelect(session.session_id)}
       >
         <div className="flex items-center gap-2">
           <StatusDot status={session.status} pending={session.pending_approval} />
-          <span className="truncate text-sm font-medium text-fg">
+          <span className="truncate font-mono text-sm font-medium text-fg">
             {shortId(session.session_id)}
           </span>
+          {session.checkpoint_count > 0 && (
+            <span
+              className="shrink-0 rounded border border-border px-1 py-0.5 text-[10px] leading-none text-muted"
+              title={`${session.checkpoint_count} checkpoint${session.checkpoint_count === 1 ? "" : "s"}`}
+            >
+              ⎘ {session.checkpoint_count}
+            </span>
+          )}
           {session.turn_in_progress && (
-            <span className="rounded bg-warn/10 px-1.5 py-0.5 text-[10px] font-medium text-warn">
+            <span className="shrink-0 rounded bg-accent/10 px-1.5 py-0.5 text-[10px] font-medium text-accent">
               running
             </span>
           )}
         </div>
-        <div className="mt-1 truncate text-xs text-muted">
+        <div className="mt-1 truncate font-mono text-xs text-muted">
           {formatModel(session)}
         </div>
         <div className="mt-1 text-[11px] text-muted">
@@ -113,6 +138,15 @@ function formatModel(session: SessionSummary) {
   return parts.length ? parts.join(" / ") : "model ?";
 }
 
+type StatusSemantic = "running" | "pending" | "failed" | "idle";
+
+function statusSemantic(status: SessionSummary["status"], pending: boolean): StatusSemantic {
+  if (pending) return "pending";
+  if (status === "failed") return "failed";
+  if (status === "running" || status === "waiting_approval") return "running";
+  return "idle";
+}
+
 function StatusDot({
   status,
   pending,
@@ -120,16 +154,21 @@ function StatusDot({
   status: SessionSummary["status"];
   pending: boolean;
 }) {
-  const color = pending
-    ? "bg-warn"
-    : status === "failed"
-      ? "bg-err"
-      : status === "running"
-        ? "bg-accent"
-        : status === "completed"
-          ? "bg-ok"
+  const semantic = statusSemantic(status, pending);
+  const color =
+    semantic === "pending"
+      ? "bg-warn"
+      : semantic === "failed"
+        ? "bg-err"
+        : semantic === "running"
+          ? "bg-accent animate-pulse"
           : "bg-muted";
-  return <span className={`h-2 w-2 shrink-0 rounded-full ${color}`} />;
+  return (
+    <span
+      className={`h-2 w-2 shrink-0 rounded-full ${color}`}
+      title={`status: ${semantic}`}
+    />
+  );
 }
 
 function shortId(id: string) {
diff --git a/coding-agent/webui/app/src/components/SettingsPanel.test.tsx b/coding-agent/webui/app/src/components/SettingsPanel.test.tsx
new file mode 100644
index 000000000..d19111cde
--- /dev/null
+++ b/coding-agent/webui/app/src/components/SettingsPanel.test.tsx
@@ -0,0 +1,120 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { RuntimeConfigPatch } from "../lib/api";
+import SettingsPanel from "./SettingsPanel";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function renderPanel(onUpdate: (patch: RuntimeConfigPatch) => Promise<void>) {
+  return render(
+    <SettingsPanel
+      sessionId="s1"
+      providerName="kimi"
+      modelName="kimi-for-coding"
+      onUpdate={onUpdate}
+    />,
+  );
+}
+
+describe("SettingsPanel", () => {
+  it("marks the thinking initial values as defaults, not the session's config", () => {
+    renderPanel(() => Promise.resolve());
+    expect(
+      screen.getByText(/Initial values are defaults, not read from this session/),
+    ).toBeTruthy();
+  });
+
+  it("does not present the new-session approval default as current session state", () => {
+    renderPanel(() => Promise.resolve());
+    expect((screen.getByTitle("session approval policy") as HTMLSelectElement).value).toBe("");
+    expect(
+      screen.getByText(
+        /current policy is not exposed by the server/i,
+      ),
+    ).toBeTruthy();
+  });
+
+  it("sends the user's last-known enabled state when only the effort changes", async () => {
+    const onUpdate = vi.fn(() => Promise.resolve());
+    renderPanel(onUpdate);
+
+    // Turn thinking off first, then change only the effort.
+    fireEvent.click(screen.getByTitle("thinking enabled"));
+    await waitFor(() =>
+      expect(onUpdate).toHaveBeenLastCalledWith({
+        thinking: { enabled: false, effort: "medium" },
+      }),
+    );
+
+    fireEvent.change(screen.getByTitle("thinking effort"), { target: { value: "high" } });
+    await waitFor(() =>
+      expect(onUpdate).toHaveBeenLastCalledWith({
+        thinking: { enabled: false, effort: "high" },
+      }),
+    );
+    expect(onUpdate).toHaveBeenCalledTimes(2);
+  });
+
+  it("serializes patches per field and never lets a stale success hide a later failure", async () => {
+    const deferreds: Array<{ resolve: () => void; reject: (e: Error) => void }> = [];
+    const onUpdate = vi.fn(
+      () =>
+        new Promise<void>((resolve, reject) => {
+          deferreds.push({ resolve, reject });
+        }),
+    );
+    renderPanel(onUpdate);
+
+    const select = screen.getByTitle("session approval policy");
+    fireEvent.change(select, { target: { value: "yolo" } });
+    await waitFor(() => expect(onUpdate).toHaveBeenCalledTimes(1));
+    expect(onUpdate).toHaveBeenLastCalledWith({ approval: "yolo" });
+
+    // A second change to the same control must queue behind the in-flight one.
+    fireEvent.change(select, { target: { value: "interactive" } });
+    await act(async () => undefined);
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      deferreds[0].resolve();
+    });
+    await waitFor(() => expect(onUpdate).toHaveBeenCalledTimes(2));
+    expect(onUpdate).toHaveBeenLastCalledWith({ approval: "interactive" });
+    expect(await screen.findByText("Saved")).toBeTruthy();
+
+    // The later apply fails: its error feedback must win.
+    await act(async () => {
+      deferreds[1].reject(new Error("boom"));
+    });
+    expect(await screen.findByText("save failed: boom")).toBeTruthy();
+    expect(screen.queryByText("Saved")).toBeNull();
+  });
+
+  it("does not serialize different fields against each other", async () => {
+    const deferreds: Array<{ resolve: () => void; reject: (e: Error) => void }> = [];
+    const onUpdate = vi.fn(
+      () =>
+        new Promise<void>((resolve, reject) => {
+          deferreds.push({ resolve, reject });
+        }),
+    );
+    renderPanel(onUpdate);
+
+    fireEvent.change(screen.getByTitle("session approval policy"), {
+      target: { value: "yolo" },
+    });
+    await waitFor(() => expect(onUpdate).toHaveBeenCalledTimes(1));
+
+    // A different field applies immediately despite the pending approval patch.
+    fireEvent.change(screen.getByTitle("thinking effort"), { target: { value: "low" } });
+    await waitFor(() => expect(onUpdate).toHaveBeenCalledTimes(2));
+    expect(onUpdate).toHaveBeenLastCalledWith({
+      thinking: { enabled: true, effort: "low" },
+    });
+  });
+});
diff --git a/coding-agent/webui/app/src/components/SettingsPanel.tsx b/coding-agent/webui/app/src/components/SettingsPanel.tsx
new file mode 100644
index 000000000..de2e61d43
--- /dev/null
+++ b/coding-agent/webui/app/src/components/SettingsPanel.tsx
@@ -0,0 +1,196 @@
+import { useEffect, useRef, useState } from "react";
+import type { RuntimeConfigPatch } from "../lib/api";
+import type { ApprovalPolicy, ThinkingEffort } from "../lib/types";
+import { PROVIDERS } from "./Header";
+
+interface Props {
+  sessionId: string;
+  providerName: string | null;
+  modelName: string | null;
+  onUpdate: (patch: RuntimeConfigPatch) => Promise<void>;
+}
+
+type Feedback = { kind: "saved" | "error"; text: string } | null;
+
+const inputCls =
+  "w-full rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-sm text-fg focus:border-accent focus:outline-none";
+
+// Per-session runtime settings (PATCH /sessions/{id}/runtime-config). These
+// are distinct from the header's new-session defaults.
+export default function SettingsPanel({
+  sessionId,
+  providerName,
+  modelName,
+  onUpdate,
+}: Props) {
+  const [provider, setProvider] = useState(providerName ?? "");
+  const [model, setModel] = useState(modelName ?? "");
+  // The server does not report the session's current thinking config, so
+  // these start at the schema defaults and afterwards track what the user
+  // last applied (see the caption in the thinking section below).
+  const [thinkingEnabled, setThinkingEnabled] = useState(true);
+  const [thinkingEffort, setThinkingEffort] = useState<ThinkingEffort>("medium");
+  const [feedback, setFeedback] = useState<Feedback>(null);
+  const feedbackTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (feedbackTimer.current) clearTimeout(feedbackTimer.current);
+    };
+  }, []);
+
+  type ApplyField = "provider" | "model" | "thinking" | "approval";
+  // Per-field promise chains: rapid changes to the same control are applied
+  // in order, so a stale success can never overwrite a later failure's
+  // feedback (or reach the server out of order).
+  const applyChains = useRef<Partial<Record<ApplyField, Promise<void>>>>({});
+
+  const apply = (field: ApplyField, patch: RuntimeConfigPatch) => {
+    const next = (applyChains.current[field] ?? Promise.resolve())
+      .then(() => onUpdate(patch))
+      .then(() => showFeedback({ kind: "saved", text: "Saved" }))
+      .catch((e) =>
+        showFeedback({
+          kind: "error",
+          text: `save failed: ${e instanceof Error ? e.message : String(e)}`,
+        }),
+      );
+    applyChains.current[field] = next;
+  };
+
+  const showFeedback = (next: NonNullable<Feedback>) => {
+    setFeedback(next);
+    if (feedbackTimer.current) clearTimeout(feedbackTimer.current);
+    feedbackTimer.current = setTimeout(() => setFeedback(null), 2500);
+  };
+
+  // The server replaces the whole thinking object (ThinkingConfigSchema fills
+  // omitted keys with defaults), so always send both fields using the user's
+  // last-known enabled state.
+  const applyThinking = (enabled: boolean, effort: ThinkingEffort) => {
+    setThinkingEnabled(enabled);
+    setThinkingEffort(effort);
+    apply("thinking", { thinking: { enabled, effort } });
+  };
+
+  const providerOptions = [
+    ...new Set([provider, ...PROVIDERS].filter((p) => p.trim())),
+  ];
+
+  return (
+    <section
+      className="flex h-full min-h-0 flex-col bg-surface-1"
+      aria-label={`settings for session ${sessionId}`}
+    >
+      <div className="flex items-center justify-between border-b border-border px-4 py-2">
+        <div className="text-sm font-semibold text-fg">Session settings</div>
+        {feedback && (
+          <div
+            className={`text-xs ${feedback.kind === "saved" ? "text-ok" : "text-err"}`}
+            role="status"
+          >
+            {feedback.text}
+          </div>
+        )}
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto px-4 py-3">
+        <p className="text-[11px] leading-relaxed text-muted">
+          Runtime settings for the current session, applied immediately.
+          Defaults for new sessions live in the header.
+        </p>
+        <label className="flex flex-col gap-1 text-xs text-muted">
+          Provider
+          <select
+            className={inputCls}
+            value={provider}
+            title="session provider"
+            onChange={(e) => {
+              setProvider(e.target.value);
+              if (e.target.value) apply("provider", { provider: e.target.value });
+            }}
+          >
+            {!provider && (
+              <option value="" disabled>
+                select provider
+              </option>
+            )}
+            {providerOptions.map((p) => (
+              <option key={p} value={p}>
+                {p}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="flex flex-col gap-1 text-xs text-muted">
+          Model
+          <input
+            className={`${inputCls} font-mono`}
+            value={model}
+            title="session model"
+            placeholder="model (e.g. kimi-for-coding)"
+            onChange={(e) => setModel(e.target.value)}
+            onBlur={() => {
+              const next = model.trim();
+              if (next && next !== (modelName ?? "")) apply("model", { model: next });
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+            }}
+          />
+        </label>
+        <div className="flex flex-col gap-2">
+          <label className="flex items-center gap-2 text-xs text-muted">
+            <input
+              type="checkbox"
+              checked={thinkingEnabled}
+              title="thinking enabled"
+              onChange={(e) => applyThinking(e.target.checked, thinkingEffort)}
+            />
+            Thinking
+          </label>
+          <label className="flex flex-col gap-1 text-xs text-muted">
+            Effort
+            <select
+              className={inputCls}
+              value={thinkingEffort}
+              title="thinking effort"
+              disabled={!thinkingEnabled}
+              onChange={(e) =>
+                applyThinking(thinkingEnabled, e.target.value as ThinkingEffort)
+              }
+            >
+              <option value="low">low</option>
+              <option value="medium">medium</option>
+              <option value="high">high</option>
+            </select>
+          </label>
+          <p className="text-[11px] leading-relaxed text-muted">
+            Initial values are defaults, not read from this session — the server
+            does not report its current thinking config. Changing either control
+            saves both.
+          </p>
+        </div>
+        <label className="flex flex-col gap-1 text-xs text-muted">
+          Approval policy
+          <select
+            className={inputCls}
+            value=""
+            title="session approval policy"
+            onChange={(e) => apply("approval", { approval: e.target.value as ApprovalPolicy })}
+          >
+            <option value="" disabled>
+              select policy to apply
+            </option>
+            <option value="auto">auto</option>
+            <option value="interactive">interactive</option>
+            <option value="yolo">yolo</option>
+          </select>
+        </label>
+        <p className="text-[11px] leading-relaxed text-muted">
+          The current policy is not exposed by the server. Selecting a policy
+          applies it immediately and also saves it as the default for new sessions.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/coding-agent/webui/app/src/components/Timeline.test.tsx b/coding-agent/webui/app/src/components/Timeline.test.tsx
new file mode 100644
index 000000000..1d9efef91
--- /dev/null
+++ b/coding-agent/webui/app/src/components/Timeline.test.tsx
@@ -0,0 +1,255 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import Timeline from "./Timeline";
+import type { TimelineItem } from "../lib/timeline";
+
+type ToolItem = Extract<TimelineItem, { kind: "tool" }>;
+
+const tool = (
+  id: string,
+  toolName: string,
+  args: Record<string, unknown>,
+  extra: Partial<ToolItem> = {},
+): ToolItem => ({
+  id,
+  kind: "tool",
+  agentId: "",
+  callId: id,
+  toolName,
+  args,
+  ...extra,
+});
+
+const noop = vi.fn();
+
+beforeEach(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+describe("tool-call cards", () => {
+  it("groups consecutive tool calls under a collapsible count header", () => {
+    const items: TimelineItem[] = [
+      { id: "u1", kind: "user", text: "go" },
+      tool("t1", "read_file", { path: "src/a.ts" }),
+      tool("t2", "write_file", { path: "src/b.ts" }),
+      tool("t3", "bash", { cmd: "npm test" }),
+      { id: "a1", kind: "assistant", agentId: "", text: "done" },
+    ];
+    render(<Timeline items={items} onApprove={noop} showThinking />);
+
+    const header = screen.getByRole("button", { name: /3 tool calls/ });
+    expect(header.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByText("read_file")).toBeTruthy();
+    expect(screen.getByText("bash")).toBeTruthy();
+
+    fireEvent.click(header);
+    expect(header.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByText("read_file")).toBeNull();
+    expect(screen.queryByText("bash")).toBeNull();
+
+    fireEvent.click(header);
+    expect(screen.getByText("read_file")).toBeTruthy();
+  });
+
+  it("does not group tool calls separated by assistant text", () => {
+    const items: TimelineItem[] = [
+      tool("t1", "read_file", { path: "src/a.ts" }),
+      { id: "a1", kind: "assistant", agentId: "", text: "note" },
+      tool("t2", "bash", { cmd: "pwd" }),
+    ];
+    render(<Timeline items={items} onApprove={noop} showThinking />);
+
+    expect(screen.queryByText(/tool calls/)).toBeNull();
+    expect(screen.getByText("read_file")).toBeTruthy();
+    expect(screen.getByText("bash")).toBeTruthy();
+  });
+
+  it("keeps card output collapsed until expanded, with summary and duration", () => {
+    const items: TimelineItem[] = [
+      tool("t1", "bash", { cmd: "npm test" }, {
+        result: "ok",
+        startedAt: "2026-06-12T00:00:00Z",
+        finishedAt: "2026-06-12T00:00:02.500Z",
+      }),
+    ];
+    render(<Timeline items={items} onApprove={noop} showThinking />);
+
+    // Summary and duration on the collapsed header; output hidden.
+    expect(screen.getByText("npm test")).toBeTruthy();
+    expect(screen.getByText("2.5s")).toBeTruthy();
+    expect(screen.queryByText("ok")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /bash/ }));
+    expect(screen.getByText("ok")).toBeTruthy();
+  });
+
+  it("shows a running indicator while the result is pending", () => {
+    const items: TimelineItem[] = [tool("t1", "bash", { cmd: "sleep 5" })];
+    render(<Timeline items={items} onApprove={noop} showThinking />);
+
+    expect(screen.getByTitle("running")).toBeTruthy();
+  });
+
+  it("tags cards from non-root agents as subagent", () => {
+    const items: TimelineItem[] = [
+      tool("t1", "bash", { cmd: "pwd" }, { agentId: "worker-1" }),
+    ];
+    render(<Timeline items={items} onApprove={noop} showThinking />);
+
+    expect(screen.getByText("subagent")).toBeTruthy();
+    expect(screen.getByText("[worker-1]")).toBeTruthy();
+  });
+});
+
+describe("thinking visibility", () => {
+  const items: TimelineItem[] = [
+    { id: "th1", kind: "thinking", agentId: "", text: "reasoning…" },
+    { id: "a1", kind: "assistant", agentId: "", text: "answer" },
+  ];
+
+  it("shows thinking blocks by default", () => {
+    render(<Timeline items={items} onApprove={noop} showThinking />);
+    expect(screen.getByText("reasoning…")).toBeTruthy();
+  });
+
+  it("hides thinking blocks when showThinking is false", () => {
+    render(<Timeline items={items} onApprove={noop} showThinking={false} />);
+    expect(screen.queryByText("reasoning…")).toBeNull();
+    expect(screen.getByText("answer")).toBeTruthy();
+  });
+});
+
+describe("approval card", () => {
+  const approval = (extra: Partial<Extract<TimelineItem, { kind: "approval" }>> = {}) =>
+    ({
+      id: "ap1",
+      kind: "approval",
+      agentId: "",
+      requestId: "req-1",
+      toolName: "bash",
+      args: { cmd: "rm -rf build" },
+      ...extra,
+    }) as TimelineItem;
+
+  it("sends scope=session for always allow", () => {
+    const onApprove = vi.fn();
+    render(
+      <Timeline
+        items={[approval({ timeoutSeconds: 120 })]}
+        onApprove={onApprove}
+        showThinking
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Always allow (this session)" }));
+    expect(onApprove).toHaveBeenCalledWith("req-1", true, "", "session");
+  });
+
+  it("sends scope=once for approve and deny", () => {
+    const onApprove = vi.fn();
+    render(
+      <Timeline
+        items={[approval({ timeoutSeconds: 120 })]}
+        onApprove={onApprove}
+        showThinking
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Approve" }));
+    expect(onApprove).toHaveBeenCalledWith("req-1", true, "", "once");
+    fireEvent.click(screen.getByRole("button", { name: "Deny" }));
+    expect(onApprove).toHaveBeenCalledWith("req-1", false, "", "once");
+  });
+
+  it("counts down and shows a timed-out state on expiry", () => {
+    vi.useFakeTimers();
+    render(
+      <Timeline
+        items={[approval({ timeoutSeconds: 2 })]}
+        onApprove={noop}
+        showThinking
+      />,
+    );
+
+    expect(screen.getByText("0:02")).toBeTruthy();
+    act(() => vi.advanceTimersByTime(1000));
+    expect(screen.getByText("0:01")).toBeTruthy();
+    act(() => vi.advanceTimersByTime(1000));
+
+    expect(screen.getByText(/timed out/)).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Approve" })).toBeNull();
+  });
+
+  it("shows the timed-out state immediately for a replayed prompt past its deadline", () => {
+    // Prompt created long ago: the server already auto-denied on timeout, so
+    // the countdown must not restart from the full value on replay.
+    render(
+      <Timeline
+        items={[
+          approval({
+            timeoutSeconds: 30,
+            promptedAt: "2020-01-01T00:00:00Z",
+          }),
+        ]}
+        onApprove={noop}
+        showThinking
+      />,
+    );
+
+    expect(screen.getByText(/timed out/)).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Approve" })).toBeNull();
+  });
+
+  it("counts down from promptedAt, not from mount", () => {
+    // Prompt created 10s ago with a 30s timeout: reopening the session shows
+    // ~20s remaining, not the full 30s.
+    render(
+      <Timeline
+        items={[
+          approval({
+            timeoutSeconds: 30,
+            promptedAt: new Date(Date.now() - 10_000).toISOString(),
+          }),
+        ]}
+        onApprove={noop}
+        showThinking
+      />,
+    );
+
+    expect(screen.getByText("0:20")).toBeTruthy();
+  });
+
+  it("reflects wall-clock jumps, not just timer ticks", () => {
+    // Background-tab throttling: the interval may lag, but the remaining time
+    // is recomputed from Date.now() against the stored deadline.
+    vi.useFakeTimers();
+    render(
+      <Timeline
+        items={[
+          approval({
+            timeoutSeconds: 90,
+            promptedAt: new Date().toISOString(),
+          }),
+        ]}
+        onApprove={noop}
+        showThinking
+      />,
+    );
+
+    expect(screen.getByText("1:30")).toBeTruthy();
+    // Jump the wall clock 60s ahead, then let one (late) tick fire.
+    act(() => {
+      vi.setSystemTime(Date.now() + 60_000);
+      vi.advanceTimersByTime(1000);
+    });
+    expect(screen.getByText("0:29")).toBeTruthy();
+  });
+});
diff --git a/coding-agent/webui/app/src/components/Timeline.tsx b/coding-agent/webui/app/src/components/Timeline.tsx
index 407fae0e6..47d662577 100644
--- a/coding-agent/webui/app/src/components/Timeline.tsx
+++ b/coding-agent/webui/app/src/components/Timeline.tsx
@@ -1,24 +1,70 @@
 import { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
-import type { TimelineItem } from "../lib/timeline";
+import { toolArgSummary, toolDuration, type TimelineItem } from "../lib/timeline";
+import type { ApprovalScope } from "../lib/types";
 
 interface Props {
   items: TimelineItem[];
-  onApprove: (requestId: string, approved: boolean, feedback: string) => void;
+  onApprove: (
+    requestId: string,
+    approved: boolean,
+    feedback: string,
+    scope: ApprovalScope,
+  ) => void;
+  showThinking: boolean;
 }
 
-export default function Timeline({ items, onApprove }: Props) {
+type ToolItem = Extract<TimelineItem, { kind: "tool" }>;
+type TimelineNode =
+  | TimelineItem
+  | { id: string; kind: "toolGroup"; tools: ToolItem[] };
+
+// Fold runs of consecutive tool items (>= 2) into a single group node; lone
+// tool calls stay standalone.
+function groupToolItems(items: TimelineItem[]): TimelineNode[] {
+  const nodes: TimelineNode[] = [];
+  let run: ToolItem[] = [];
+  const flush = () => {
+    if (run.length >= 2) {
+      nodes.push({ id: `g-${run[0].id}`, kind: "toolGroup", tools: run });
+    } else {
+      nodes.push(...run);
+    }
+    run = [];
+  };
+  for (const it of items) {
+    if (it.kind === "tool") {
+      run.push(it);
+    } else {
+      flush();
+      nodes.push(it);
+    }
+  }
+  flush();
+  return nodes;
+}
+
+export default function Timeline({ items, onApprove, showThinking }: Props) {
   const endRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     endRef.current?.scrollIntoView({ behavior: "auto" });
   }, [items]);
 
+  const visible = showThinking
+    ? items
+    : items.filter((it) => it.kind !== "thinking");
+  const nodes = groupToolItems(visible);
+
   return (
     <div className="flex-1 overflow-auto px-4 py-5 lg:px-8">
       <div className="mx-auto flex max-w-3xl flex-col gap-3">
-        {items.map((it) => (
-          <Item key={it.id} item={it} onApprove={onApprove} />
-        ))}
+        {nodes.map((node) =>
+          node.kind === "toolGroup" ? (
+            <ToolGroup key={node.id} tools={node.tools} />
+          ) : (
+            <Item key={node.id} item={node} onApprove={onApprove} />
+          ),
+        )}
         <div ref={endRef} />
       </div>
     </div>
@@ -26,9 +72,15 @@ export default function Timeline({ items, onApprove }: Props) {
 }
 
 function Agent({ id }: { id: string }) {
-  return id ? (
-    <span className="mr-1 text-[11px] font-medium text-accent">[{id}]</span>
-  ) : null;
+  if (!id) return null;
+  return (
+    <>
+      <span className="mr-1 text-[11px] font-medium text-accent">[{id}]</span>
+      <span className="mr-1 rounded-full border border-accent/40 px-1.5 py-px text-[10px] font-medium text-accent">
+        subagent
+      </span>
+    </>
+  );
 }
 
 function Item({
@@ -70,26 +122,7 @@ function Item({
         </div>
       );
     case "tool":
-      return (
-        <div className="overflow-hidden rounded-xl border border-warn/40 bg-surface-1">
-          <div className="flex items-center gap-2 border-b border-warn/20 bg-warn/5 px-4 py-2">
-            <Agent id={item.agentId} />
-            <span className="text-sm font-semibold text-warn">
-              ⚡ {item.toolName}
-            </span>
-          </div>
-          <pre className="max-h-60 overflow-auto bg-surface-0 px-4 py-3 text-xs leading-relaxed text-fg/80">
-            {JSON.stringify(item.args, null, 2)}
-          </pre>
-          {item.result !== undefined && (
-            <pre
-              className={`max-h-60 overflow-auto border-t border-border px-4 py-3 text-xs leading-relaxed ${item.isError ? "text-err" : "text-fg/70"}`}
-            >
-              {item.result}
-            </pre>
-          )}
-        </div>
-      );
+      return <ToolCard item={item} />;
     case "approval":
       return <ApprovalCard item={item} onApprove={onApprove} />;
     case "turnEnd":
@@ -113,6 +146,97 @@ function Item({
   }
 }
 
+function ToolGroup({ tools }: { tools: ToolItem[] }) {
+  const [open, setOpen] = useState(true);
+  const running = tools.filter((t) => t.result === undefined).length;
+  return (
+    <div className="overflow-hidden rounded-xl border border-border/60 bg-surface-2/40">
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] font-medium tracking-wide text-muted uppercase transition-colors hover:text-fg"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span aria-hidden>{open ? "▾" : "▸"}</span>
+        <span>
+          {tools.length} tool call{tools.length === 1 ? "" : "s"}
+        </span>
+        {running > 0 && (
+          <span className="text-accent normal-case">· {running} running</span>
+        )}
+      </button>
+      {open && (
+        <div className="flex flex-col gap-1.5 px-2 pb-2">
+          {tools.map((t) => (
+            <ToolCard key={t.id} item={t} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ToolCard({ item }: { item: ToolItem }) {
+  const [expanded, setExpanded] = useState(false);
+  const running = item.result === undefined;
+  const summary = toolArgSummary(item.toolName, item.args);
+  const duration = toolDuration(item);
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-surface-1">
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-surface-2/60"
+        aria-expanded={expanded}
+        onClick={() => setExpanded((v) => !v)}
+      >
+        {running ? (
+          <span
+            className="h-2 w-2 shrink-0 animate-pulse rounded-full bg-accent"
+            title="running"
+          />
+        ) : item.isError ? (
+          <span className="shrink-0 text-xs text-err" title="failed">
+            ✗
+          </span>
+        ) : (
+          <span className="shrink-0 text-xs text-ok" title="done">
+            ✓
+          </span>
+        )}
+        <Agent id={item.agentId} />
+        <span className="shrink-0 text-xs font-semibold text-fg">
+          {item.toolName}
+        </span>
+        {summary && (
+          <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-muted">
+            {summary}
+          </span>
+        )}
+        {duration && (
+          <span className="shrink-0 text-[11px] text-muted">{duration}</span>
+        )}
+        <span className="shrink-0 text-[10px] text-muted" aria-hidden>
+          {expanded ? "▾" : "▸"}
+        </span>
+      </button>
+      {expanded && (
+        <div className="border-t border-border/60">
+          <pre className="max-h-60 overflow-auto bg-surface-0 px-3 py-2 text-xs leading-relaxed text-fg/80">
+            {JSON.stringify(item.args, null, 2)}
+          </pre>
+          {item.result !== undefined && (
+            <pre
+              className={`max-h-60 overflow-auto border-t border-border px-3 py-2 text-xs leading-relaxed ${item.isError ? "text-err" : "text-fg/70"}`}
+            >
+              {item.result}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function MarkdownText({ text }: { text: string }) {
   return (
     <div className="prose-webui text-sm leading-relaxed">
@@ -121,6 +245,12 @@ function MarkdownText({ text }: { text: string }) {
   );
 }
 
+function formatClock(totalSeconds: number): string {
+  const m = Math.floor(totalSeconds / 60);
+  const s = totalSeconds % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
 function ApprovalCard({
   item,
   onApprove,
@@ -129,13 +259,49 @@ function ApprovalCard({
   onApprove: Props["onApprove"];
 }) {
   const [feedback, setFeedback] = useState("");
-  const done = !!item.resolved;
+  // Deadline (ms epoch) mirroring the server-side auto-deny: the server counts
+  // from the prompt's created_at, not from when this card mounts, so a
+  // replayed or reopened prompt does not restart the countdown. Items without
+  // a promptedAt (defensive fallback) count from mount.
+  const [deadline] = useState<number | null>(() => {
+    if (item.timeoutSeconds === undefined) return null;
+    const start = item.promptedAt ? new Date(item.promptedAt).getTime() : NaN;
+    const base = Number.isFinite(start) ? start : Date.now();
+    return base + item.timeoutSeconds * 1000;
+  });
+  const computeRemaining = () =>
+    deadline === null
+      ? null
+      : Math.max(0, Math.ceil((deadline - Date.now()) / 1000));
+  const [remaining, setRemaining] = useState<number | null>(computeRemaining);
+  const timedOut = remaining !== null && remaining <= 0;
+  const done = !!item.resolved || timedOut;
+
+  // Recompute from the wall clock each tick instead of decrementing, so
+  // background-tab timer throttling cannot lag the countdown behind the
+  // server deadline.
+  useEffect(() => {
+    if (done || deadline === null) return;
+    const tick = () => setRemaining(computeRemaining());
+    const timer = setInterval(tick, 1000);
+    document.addEventListener("visibilitychange", tick);
+    return () => {
+      clearInterval(timer);
+      document.removeEventListener("visibilitychange", tick);
+    };
+  }, [done, deadline]);
+
   return (
     <div className="overflow-hidden rounded-xl border border-err/40 bg-surface-1">
-      <div className="border-b border-err/20 bg-err/5 px-4 py-2">
+      <div className="flex items-center justify-between border-b border-err/20 bg-err/5 px-4 py-2">
         <span className="text-[11px] font-semibold tracking-wide text-err uppercase">
           Approval Required
         </span>
+        {!done && remaining !== null && (
+          <span className="font-mono text-[11px] text-err/80">
+            {formatClock(remaining)}
+          </span>
+        )}
       </div>
       <div className="px-4 py-3">
         <Agent id={item.agentId} />
@@ -144,23 +310,32 @@ function ApprovalCard({
           {JSON.stringify(item.args, null, 2)}
         </pre>
         {done ? (
-          <div className="mt-3 text-xs text-muted">→ {item.resolved}</div>
+          <div className="mt-3 text-xs text-muted">
+            → {timedOut && !item.resolved ? "timed out (auto-denied)" : item.resolved}
+          </div>
         ) : (
-          <div className="mt-3 flex items-center gap-2">
+          <div className="mt-3 flex flex-wrap items-center gap-2">
             <button
               className="rounded-lg bg-ok/90 px-4 py-1.5 text-xs font-medium text-white transition-colors hover:bg-ok"
-              onClick={() => onApprove(item.requestId, true, feedback)}
+              onClick={() => onApprove(item.requestId, true, feedback, "once")}
             >
               Approve
             </button>
+            <button
+              className="rounded-lg border border-ok/40 px-4 py-1.5 text-xs font-medium text-ok transition-colors hover:bg-ok/10"
+              title="Approve and auto-approve this tool for the rest of the session"
+              onClick={() => onApprove(item.requestId, true, feedback, "session")}
+            >
+              Always allow (this session)
+            </button>
             <button
               className="rounded-lg border border-err/40 px-4 py-1.5 text-xs font-medium text-err transition-colors hover:bg-err/10"
-              onClick={() => onApprove(item.requestId, false, feedback)}
+              onClick={() => onApprove(item.requestId, false, feedback, "once")}
             >
               Deny
             </button>
             <input
-              className="flex-1 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-xs text-fg placeholder:text-muted focus:border-accent focus:outline-none"
+              className="min-w-32 flex-1 rounded-lg border border-border bg-surface-0 px-3 py-1.5 text-xs text-fg placeholder:text-muted focus:border-accent focus:outline-none"
               placeholder="feedback (optional)"
               value={feedback}
               onChange={(e) => setFeedback(e.target.value)}
diff --git a/coding-agent/webui/app/src/index.css b/coding-agent/webui/app/src/index.css
index f242ffac1..e1d469655 100644
--- a/coding-agent/webui/app/src/index.css
+++ b/coding-agent/webui/app/src/index.css
@@ -1,30 +1,31 @@
 @import "tailwindcss";
 
 @theme {
-  --color-surface-0: #0a0c10;
-  --color-surface-1: #12141a;
-  --color-surface-2: #1a1d26;
-  --color-border: #2a2e3a;
-  --color-border-active: #3d4355;
-  --color-fg: #e4e6ea;
-  --color-muted: #7c829a;
+  --color-surface-0: #0f1011;
+  --color-surface-1: #131417;
+  --color-surface-2: #16181d;
+  --color-border: #26282e;
+  --color-border-active: #3a3d47;
+  --color-fg: #e3e5e9;
+  --color-muted: #7d8189;
   --color-accent: #5b8def;
   --color-accent-hover: #6e9cf5;
   --color-ok: #3fb950;
   --color-err: #f85149;
   --color-warn: #d29922;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
 /* Light theme overrides the same custom properties; applied when
    <html data-theme="light"> is set (default is dark). */
 :root[data-theme="light"] {
-  --color-surface-0: #f5f6f8;
+  --color-surface-0: #f6f7f8;
   --color-surface-1: #ffffff;
-  --color-surface-2: #e9ecf1;
-  --color-border: #d3d7de;
-  --color-border-active: #9aa3b2;
-  --color-fg: #1c1f27;
-  --color-muted: #5f6678;
+  --color-surface-2: #eef0f2;
+  --color-border: #e0e2e6;
+  --color-border-active: #b9bec7;
+  --color-fg: #1d2026;
+  --color-muted: #62676f;
   --color-accent: #2f6bd8;
   --color-accent-hover: #255cb8;
   --color-ok: #1a7f37;
diff --git a/coding-agent/webui/app/src/lib/api.ts b/coding-agent/webui/app/src/lib/api.ts
index 730827eb7..a5f89c80a 100644
--- a/coding-agent/webui/app/src/lib/api.ts
+++ b/coding-agent/webui/app/src/lib/api.ts
@@ -2,16 +2,36 @@ import { parseSSE } from "./sse";
 import type {
   ApprovalPolicy,
   ApprovalScope,
+  CheckpointMetadata,
   DisplayStreamEvent,
   MemoryReviewRecord,
+  MemoryReviewTransitionStatus,
   ProviderModels,
   RuntimeRun,
   SessionSummary,
   SessionResult,
+  ThinkingConfig,
   WorkspaceDiff,
   WorkspacePatch,
 } from "./types";
 
+// PATCH /sessions/{id}/runtime-config — omitted fields stay unchanged.
+// Mirrors RuntimeConfigUpdateRequest in src/coding_agent/server/schemas.py.
+export interface RuntimeConfigPatch {
+  model?: string;
+  provider?: string;
+  baseUrl?: string;
+  approval?: ApprovalPolicy;
+  thinking?: ThinkingConfig;
+}
+
+export interface RuntimeConfigUpdateResponse {
+  session_id: string;
+  provider_name: string | null;
+  model_name: string | null;
+  base_url: string | null;
+}
+
 export interface ClientConfig {
   baseUrl: string;
   apiKey?: string;
@@ -62,17 +82,23 @@ export class AgentClient {
 
   async updateRuntimeConfig(
     sessionId: string,
-    opts: { approval?: ApprovalPolicy },
-  ): Promise<void> {
+    opts: RuntimeConfigPatch,
+  ): Promise<RuntimeConfigUpdateResponse> {
     const body: Record<string, unknown> = {};
+    if (opts.model !== undefined) body.model = opts.model;
+    if (opts.provider !== undefined) body.provider = opts.provider;
+    if (opts.baseUrl !== undefined) body.base_url = opts.baseUrl;
     if (opts.approval !== undefined) body.approval = opts.approval;
-    await this.check(
+    if (opts.thinking !== undefined) body.thinking = opts.thinking;
+    return (
+      await this.check(
       await fetch(this.url(`/sessions/${sessionId}/runtime-config`), {
-        method: "POST",
+        method: "PATCH",
         headers: this.headers(true),
         body: JSON.stringify(body),
       }),
-    );
+      )
+    ).json();
   }
 
   async listSessions(): Promise<SessionSummary[]> {
@@ -220,6 +246,63 @@ export class AgentClient {
     return Array.isArray(data) ? (data as MemoryReviewRecord[]) : [];
   }
 
+  // POST /sessions/{id}/memory/reviews/{candidate_id} — accept/reject/archive.
+  // reason must be null or non-empty (schema: min_length 1).
+  async transitionMemoryReview(
+    sessionId: string,
+    candidateId: string,
+    status: MemoryReviewTransitionStatus,
+    reason?: string,
+  ): Promise<void> {
+    const trimmed = reason?.trim();
+    await this.check(
+      await fetch(
+        this.url(`/sessions/${sessionId}/memory/reviews/${encodeURIComponent(candidateId)}`),
+        {
+          method: "POST",
+          headers: this.headers(true),
+          body: JSON.stringify({ status, reason: trimmed ? trimmed : null }),
+        },
+      ),
+    );
+  }
+
+  async listCheckpoints(sessionId: string): Promise<CheckpointMetadata[]> {
+    const data = await (
+      await this.check(
+        await fetch(this.url(`/sessions/${sessionId}/checkpoints`), {
+          headers: this.headers(),
+        }),
+      )
+    ).json() as { checkpoints: CheckpointMetadata[] };
+    return Array.isArray(data.checkpoints) ? data.checkpoints : [];
+  }
+
+  async captureCheckpoint(sessionId: string, label?: string): Promise<CheckpointMetadata> {
+    const trimmed = label?.trim();
+    return (
+      await this.check(
+        await fetch(this.url(`/sessions/${sessionId}/checkpoints`), {
+          method: "POST",
+          headers: this.headers(true),
+          body: JSON.stringify(trimmed ? { label: trimmed } : {}),
+        }),
+      )
+    ).json();
+  }
+
+  // Restore rewinds session history/runtime config; workspace files are unchanged.
+  async restoreCheckpoint(sessionId: string, checkpointId: string): Promise<void> {
+    await this.check(
+      await fetch(
+        this.url(
+          `/sessions/${sessionId}/checkpoints/${encodeURIComponent(checkpointId)}/restore`,
+        ),
+        { method: "POST", headers: this.headers() },
+      ),
+    );
+  }
+
   // GET /providers/{provider}/models. Unknown providers return 422 (throws);
   // provider-side failures return 200 with source="unavailable" and models=[].
   async listProviderModels(provider: string, signal?: AbortSignal): Promise<ProviderModels> {
diff --git a/coding-agent/webui/app/src/lib/timeline.test.ts b/coding-agent/webui/app/src/lib/timeline.test.ts
index 25b04fe11..48435bc24 100644
--- a/coding-agent/webui/app/src/lib/timeline.test.ts
+++ b/coding-agent/webui/app/src/lib/timeline.test.ts
@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vitest";
 import type { DisplayStreamEvent } from "./types";
-import { applyEvent, replayEvents, type TimelineItem } from "./timeline";
+import {
+  applyEvent,
+  replayEvents,
+  toolArgSummary,
+  toolDuration,
+  type TimelineItem,
+} from "./timeline";
 
 const withoutIds = (items: TimelineItem[]) =>
   items.map(({ id: _id, ...item }) => item);
@@ -9,6 +15,7 @@ const displayEvent = (
   event: DisplayStreamEvent["event"],
   payload: Record<string, unknown>,
   sequence: number,
+  createdAt = "2026-06-12T00:00:00Z",
 ): DisplayStreamEvent => ({
   event,
   data: {
@@ -17,7 +24,7 @@ const displayEvent = (
     sequence,
     display_kind: event,
     payload,
-    created_at: "2026-06-12T00:00:00Z",
+    created_at: createdAt,
   },
 } as DisplayStreamEvent);
 
@@ -27,7 +34,7 @@ describe("replayEvents", () => {
       displayEvent("assistant_text_delta", { agent_id: "", content: "hello " }, 1),
       displayEvent("assistant_text_delta", { agent_id: "", content: "world" }, 2),
       displayEvent("tool_call", { agent_id: "", call_id: "call-1", tool_name: "bash", arguments: { cmd: "pwd" } }, 3),
-      displayEvent("tool_result", { agent_id: "", call_id: "call-1", tool_name: "bash", display_result: "/repo", is_error: false }, 4),
+      displayEvent("tool_result", { agent_id: "", call_id: "call-1", tool_name: "bash", display_result: "/repo", is_error: false }, 4, "2026-06-12T00:00:02.500Z"),
       displayEvent("final_result", { agent_id: "", turn_id: "turn-1", completion_status: "completed" }, 5),
     ];
 
@@ -35,6 +42,15 @@ describe("replayEvents", () => {
     const streamed = events.reduce(applyEvent, seed);
 
     expect(withoutIds(replayEvents(seed, events))).toEqual(withoutIds(streamed));
+
+    const toolItem = replayEvents(seed, events).find((it) => it.kind === "tool");
+    expect(toolItem).toMatchObject({
+      kind: "tool",
+      callId: "call-1",
+      toolName: "bash",
+      startedAt: "2026-06-12T00:00:00Z",
+      finishedAt: "2026-06-12T00:00:02.500Z",
+    });
   });
 
   it("marks approval prompts resolved when replaying approval results", () => {
@@ -45,6 +61,7 @@ describe("replayEvents", () => {
           agent_id: "",
           request_id: "approval-1",
           tool_call: { call_id: "call-1", tool_name: "bash", arguments: { cmd: "pwd" } },
+          timeout_seconds: 30,
         },
         1,
       ),
@@ -58,6 +75,8 @@ describe("replayEvents", () => {
         requestId: "approval-1",
         toolName: "bash",
         args: { cmd: "pwd" },
+        timeoutSeconds: 30,
+        promptedAt: "2026-06-12T00:00:00Z",
         resolved: "approved",
       },
     ]);
@@ -84,7 +103,47 @@ describe("replayEvents", () => {
         requestId: "approval-1",
         toolName: "bash",
         args: { cmd: "pwd" },
+        promptedAt: "2026-06-12T00:00:00Z",
       },
     ]);
   });
 });
+
+
+describe("toolArgSummary", () => {
+  it("prefers path-like and command-like arguments", () => {
+    expect(toolArgSummary("read_file", { path: "src/a.ts", limit: 10 })).toBe("src/a.ts");
+    expect(toolArgSummary("bash", { cmd: "npm test" })).toBe("npm test");
+  });
+
+  it("falls back to the first scalar argument and collapses whitespace", () => {
+    expect(toolArgSummary("grep", { pattern: "foo  bar\nbaz" })).toBe("foo bar baz");
+    expect(toolArgSummary("custom", { limit: 42 })).toBe("42");
+  });
+
+  it("truncates long values to one line", () => {
+    const summary = toolArgSummary("bash", { cmd: "x".repeat(200) });
+    expect(summary.length).toBe(80);
+    expect(summary.endsWith("…")).toBe(true);
+  });
+
+  it("returns empty string when no scalar argument exists", () => {
+    expect(toolArgSummary("noop", { nested: { a: 1 } })).toBe("");
+  });
+});
+
+describe("toolDuration", () => {
+  it("derives a duration from call/result timestamps", () => {
+    expect(
+      toolDuration({
+        startedAt: "2026-06-12T00:00:00Z",
+        finishedAt: "2026-06-12T00:00:02.500Z",
+      }),
+    ).toBe("2.5s");
+  });
+
+  it("returns null when timestamps are missing", () => {
+    expect(toolDuration({ startedAt: "2026-06-12T00:00:00Z" })).toBeNull();
+    expect(toolDuration({})).toBeNull();
+  });
+});
diff --git a/coding-agent/webui/app/src/lib/timeline.ts b/coding-agent/webui/app/src/lib/timeline.ts
index aa1b526ee..616ccbfde 100644
--- a/coding-agent/webui/app/src/lib/timeline.ts
+++ b/coding-agent/webui/app/src/lib/timeline.ts
@@ -24,6 +24,8 @@ export type TimelineItem =
       args: Record<string, unknown>;
       result?: string;
       isError?: boolean;
+      startedAt?: string;
+      finishedAt?: string;
     }
   | {
       id: string;
@@ -32,6 +34,8 @@ export type TimelineItem =
       requestId: string;
       toolName: string;
       args: Record<string, unknown>;
+      timeoutSeconds?: number;
+      promptedAt?: string;
       resolved?: "approved" | "denied";
     }
   | { id: string; kind: "turnEnd"; status: string }
@@ -112,6 +116,7 @@ export function applyEvent(
           callId: d.call_id ?? envelope.source_event_id,
           toolName: d.tool_name ?? "",
           args: d.arguments ?? {},
+          startedAt: envelope.created_at,
         },
       ];
     }
@@ -120,7 +125,7 @@ export function applyEvent(
       const d = envelope.payload;
       return items.map((it) =>
         it.kind === "tool" && it.callId === d.call_id
-          ? { ...it, result: resultText(d), isError: d.is_error }
+          ? { ...it, result: resultText(d), isError: d.is_error, finishedAt: envelope.created_at }
           : it,
       );
     }
@@ -136,6 +141,8 @@ export function applyEvent(
           requestId: d.request_id ?? envelope.source_event_id,
           toolName: d.tool_call?.tool_name ?? "",
           args: d.tool_call?.arguments ?? {},
+          timeoutSeconds: d.timeout_seconds,
+          promptedAt: envelope.created_at,
         },
       ];
     }
@@ -184,3 +191,64 @@ export function isRootTurnEnd(ev: DisplayStreamEvent): boolean {
     !envelope.payload.agent_id
   );
 }
+
+const SUMMARY_KEYS = [
+  "path",
+  "file_path",
+  "filePath",
+  "filename",
+  "cmd",
+  "command",
+  "pattern",
+  "query",
+  "url",
+  "goal",
+  "prompt",
+];
+
+// One-line argument summary for tool cards: prefer well-known path/command
+// keys, fall back to the first scalar argument, truncated to one line.
+export function toolArgSummary(
+  _toolName: string,
+  args: Record<string, unknown>,
+): string {
+  let raw: string | null = null;
+  for (const key of SUMMARY_KEYS) {
+    const v = args[key];
+    if (typeof v === "string" && v.trim()) {
+      raw = v;
+      break;
+    }
+  }
+  if (raw === null) {
+    for (const v of Object.values(args)) {
+      if (typeof v === "string" && v.trim()) {
+        raw = v;
+        break;
+      }
+      if (typeof v === "number" || typeof v === "boolean") {
+        raw = String(v);
+        break;
+      }
+    }
+  }
+  if (raw === null) return "";
+  const oneLine = raw.replace(/\s+/g, " ").trim();
+  return oneLine.length > 80 ? `${oneLine.slice(0, 79)}…` : oneLine;
+}
+
+// Duration between tool_call and tool_result timestamps, e.g. "1.2s".
+// Returns null when either timestamp is missing or unparseable.
+export function toolDuration(item: {
+  startedAt?: string;
+  finishedAt?: string;
+}): string | null {
+  if (!item.startedAt || !item.finishedAt) return null;
+  const ms = new Date(item.finishedAt).getTime() - new Date(item.startedAt).getTime();
+  if (!Number.isFinite(ms) || ms < 0) return null;
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const m = Math.floor(ms / 60_000);
+  const s = Math.round((ms % 60_000) / 1000);
+  return `${m}m${s}s`;
+}
diff --git a/coding-agent/webui/app/src/lib/types.ts b/coding-agent/webui/app/src/lib/types.ts
index 6afc008e7..5528090ee 100644
--- a/coding-agent/webui/app/src/lib/types.ts
+++ b/coding-agent/webui/app/src/lib/types.ts
@@ -121,6 +121,13 @@ export type DisplayStreamEvent =
 export type ApprovalPolicy = "auto" | "interactive" | "yolo";
 export type ApprovalScope = "once" | "session";
 
+// Mirrors ThinkingConfigSchema in src/coding_agent/server/schemas.py.
+export type ThinkingEffort = "low" | "medium" | "high";
+export interface ThinkingConfig {
+  enabled: boolean;
+  effort: ThinkingEffort;
+}
+
 export interface SessionSummary {
   session_id: string;
   id: string;
@@ -203,11 +210,28 @@ export interface ContextPack {
 export interface SessionResult {
   session_id: string;
   status: string;
+  turn_status?: string;
+  turn_id?: string | null;
+  provider_name?: string | null;
+  model_name?: string | null;
   final_answer: string | null;
   verification_summary: string | null;
   failure_details: string | null;
 }
 
+// POST /sessions/{id}/memory/reviews/{candidate_id} — target statuses.
+export type MemoryReviewTransitionStatus = "accepted" | "rejected" | "archived";
+
+export interface CheckpointMetadata {
+  checkpoint_id: string;
+  tape_id: string;
+  session_id: string | null;
+  entry_count: number;
+  window_start: number;
+  created_at: string;
+  label: string | null;
+}
+
 export interface DiffFile {
   path: string;
   status: "added" | "modified" | "deleted" | "renamed" | "binary" | "unknown";