@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/reasoning-preference.test.ts

@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createReasoningPreference, REASONING_EXPANDED_STORAGE_KEY } from "./reasoning-preference.ts";
+
+test("reasoning defaults to collapsed and only accepts the saved true value", () => {
+  for (const value of [null, "", "false", "1", "{}", "TRUE"]) {
+    assert.equal(createReasoningPreference({ getItem: () => value, setItem() {} }).getSnapshot(), false);
+  }
+  assert.equal(createReasoningPreference({ getItem: () => "true", setItem() {} }).getSnapshot(), true);
+});
+
+test("reasoning preference survives recreation and cleans up subscribers", () => {
+  const data = new Map<string, string>();
+  const storage = { getItem: (key: string) => data.get(key) ?? null, setItem: (key: string, value: string) => { data.set(key, value); } };
+  const preference = createReasoningPreference(storage);
+  const notifications: boolean[] = [];
+  const unsubscribe = preference.subscribe(() => notifications.push(preference.getSnapshot()));
+  preference.set(true);
+  preference.set(true);
+  assert.deepEqual(notifications, [true]);
+  assert.equal(data.get(REASONING_EXPANDED_STORAGE_KEY), "true");
+  assert.equal(createReasoningPreference(storage).getSnapshot(), true);
+  unsubscribe();
+  preference.set(false);
+  assert.deepEqual(notifications, [true]);
+  assert.equal(createReasoningPreference(storage).getSnapshot(), false);
+});
+
+test("blocked storage retains the setting in memory and cross-tab changes do not write back", () => {
+  let writes = 0;
+  const preference = createReasoningPreference({ getItem() { throw new Error("blocked"); }, setItem() { writes++; throw new Error("blocked"); } });
+  preference.set(true);
+  assert.equal(preference.getSnapshot(), true);
+  preference.restore(null);
+  assert.equal(preference.getSnapshot(), false);
+  preference.restore("true");
+  assert.equal(preference.getSnapshot(), true);
+  assert.equal(writes, 1);
+});

package/web/src/reasoning-preference.ts

@@ -0,0 +1,42 @@
+import { useSyncExternalStore } from "react";
+
+export const REASONING_EXPANDED_STORAGE_KEY = "claude-ide:reasoning-expanded";
+type PreferenceStorage = Pick<Storage, "getItem" | "setItem">;
+
+/** Display preference only; independent of session and transcript lifetimes. */
+export function createReasoningPreference(storage?: PreferenceStorage) {
+  let expanded = false;
+  try { expanded = storage?.getItem(REASONING_EXPANDED_STORAGE_KEY) === "true"; } catch { /* Keep the collapsed default. */ }
+  const listeners = new Set<() => void>();
+  const update = (next: boolean) => {
+    if (next === expanded) return;
+    expanded = next;
+    for (const listener of listeners) listener();
+  };
+  return {
+    getSnapshot: () => expanded,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => { listeners.delete(listener); };
+    },
+    set(next: boolean) {
+      try { storage?.setItem(REASONING_EXPANDED_STORAGE_KEY, String(next)); } catch { /* Keep a working in-memory setting. */ }
+      update(next);
+    },
+    restore(value: unknown) { update(value === "true"); },
+  };
+}
+
+let storage: PreferenceStorage | undefined;
+try { storage = typeof localStorage === "undefined" ? undefined : localStorage; } catch { /* Storage may be disabled. */ }
+const preference = createReasoningPreference(storage);
+if (typeof window !== "undefined") window.addEventListener("storage", (event) => {
+  if (event.storageArea && event.storageArea !== storage) return;
+  if (event.key === REASONING_EXPANDED_STORAGE_KEY || event.key === null) preference.restore(event.newValue);
+});
+
+export const getReasoningExpanded = preference.getSnapshot;
+export const setReasoningExpanded = preference.set;
+export function useReasoningExpanded(): boolean {
+  return useSyncExternalStore(preference.subscribe, preference.getSnapshot, () => false);
+}

package/web/src/session-confirmations.ts

@@ -0,0 +1,36 @@
+import { useConfirm } from "./components/Confirmation.tsx";
+import type { ImageInput } from "@shared/protocol.ts";
+import { sendClient } from "./live.ts";
+import { uuid } from "./uuid.ts";
+
+/** Both the context popover and /compact use the same confirmation and dispatch. */
+export function useCompactSession(projectId: string, sessionId: string) {
+  const confirm = useConfirm();
+  return async (instructions = "", images?: ImageInput[]) => {
+    if (!(await confirm({
+      title: "压缩上下文？",
+      description: `后续推理将使用压缩摘要，部分讨论细节可能不再包含在上下文中。历史对话仍保留。${instructions.trim() ? `\n\n压缩说明：${instructions.trim()}` : ""}`,
+      confirmLabel: "确认压缩",
+    })).confirmed) return false;
+    sendClient({
+      t: "send", projectId, sessionId, uuid: uuid(),
+      text: `/compact${instructions.trim() ? ` ${instructions.trim()}` : ""}`,
+      ...(images?.length ? { images } : {}),
+    });
+    return true;
+  };
+}
+
+export function useClearGoal(projectId: string, sessionId: string) {
+  const confirm = useConfirm();
+  return async (condition?: string) => {
+    if (!(await confirm({
+      title: "清除当前目标？",
+      description: `${condition ? `当前目标：${condition}。` : ""}将取消持续推进这个目标，已经完成的操作不会撤销。`,
+      confirmLabel: "清除目标",
+      danger: true,
+    })).confirmed) return false;
+    sendClient({ t: "send", projectId, sessionId, uuid: uuid(), text: "/goal clear" });
+    return true;
+  };
+}

package/web/src/stream-replay.test.ts

@@ -0,0 +1,163 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import type { LiveEvent, SdkMessageLike } from "@shared/protocol.ts";
+import { StreamingReplay, boundedReplay, compactReplayEvents, compactStreamEvents, contentBytes, displayEvent, displayMessage, SESSION_BYTES } from "@shared/message-window.ts";
+import { Transcript } from "./transcript.ts";
+import { groupTurns } from "./turns.ts";
+import { ItemViewState } from "./item-view-state.ts";
+
+const delta = (text: string, index = 0): LiveEvent => ({ k: "delta", msgId: "m", index, kind: "text", text, parent: null });
+const assistant = (uuid: string, text: string): LiveEvent => ({ k: "sdk", m: { type: "assistant", uuid, message: { id: "m", content: [{ type: "text", text }] } } });
+
+test("CACHE-002 replay restores the complete active prefix after both ring and browser count cuts", () => {
+  const streaming = new StreamingReplay();
+  const events = Array.from({ length: 6100 }, (_, i) => ({ seq: i + 1, ev: delta(`${i},`) }));
+  for (const event of events) streaming.push(event);
+  const replay = boundedReplay(events.slice(-5000), streaming.checkpoints);
+  const expected = events.map(({ ev }) => (ev as Extract<LiveEvent, { k: "delta" }>).text).join("");
+  assert.equal(replay.length, 1);
+  const transcript = new Transcript();
+  const pending = transcript.update(undefined, replay.map(({ ev }) => ev));
+  assert.equal((pending[0] as { text: string }).text, expected);
+  const final = transcript.update(undefined, [...replay.map(({ ev }) => ev), assistant("a", expected)]);
+  assert.equal(final.length, 1);
+  assert.equal(final.some((item) => "streaming" in item && item.streaming), false);
+  assert.equal((final[0] as { text: string }).text, expected);
+  const compact = compactStreamEvents(events.map(({ ev }) => ev));
+  assert.equal((compact[0] as { text: string }).text, expected);
+  assert.deepEqual(compactStreamEvents(compact), compact);
+  assert.deepEqual(compactStreamEvents([...compact, delta("next")]), compactStreamEvents([...events.map(({ ev }) => ev), delta("next")]));
+});
+
+test("CACHE-002 replayed completion UUID cannot settle a later block with identical text", () => {
+  const events = [delta("same"), assistant("first", "same"), delta("same", 1), assistant("first", "same")];
+  const compact = compactStreamEvents(events);
+  const drafts = compact.filter((ev) => ev.k === "delta");
+  assert.equal(drafts.length, 1);
+  assert.equal((drafts[0] as Extract<LiveEvent, { k: "delta" }>).index, 1);
+  const items = new Transcript().update(undefined, compact);
+  assert.equal(items.filter((item) => "streaming" in item && item.streaming).length, 1);
+});
+
+test("CACHE-002 checkpoint sequence prevents completed blocks from reviving and preserves the next active block", () => {
+  const checkpoint = { seq: 1, ev: { ...delta("same"), checkpoint: true } as LiveEvent };
+  const first = { seq: 2, ev: assistant("first", "same") };
+  assert.equal(compactReplayEvents([first], [checkpoint]).some(({ ev }) => ev.k === "delta"), false);
+  const next = { seq: 3, ev: { ...delta("same", 1), checkpoint: true } as LiveEvent };
+  const replay = compactReplayEvents([first], [next]);
+  assert.equal(replay.filter(({ ev }) => ev.k === "delta").length, 1);
+});
+
+test("CACHE-002 completion identities survive compaction and reject late fragments", () => {
+  const compact = compactStreamEvents([delta("done"), assistant("first", "done")]);
+  const late = compactStreamEvents([...compact, delta("late")]);
+  assert.equal(late.some((ev) => ev.k === "delta"), false);
+  const items = new Transcript().update(undefined, [...compact, delta("late")]);
+  assert.equal(items.some((item) => "streaming" in item && item.streaming), false);
+});
+
+test("thinking fold identity survives partial stream settlement and repeated replay compaction", () => {
+  const state = new ItemViewState();
+  const thinking: LiveEvent = { k: "delta", msgId: "api", index: 7, kind: "thinking", text: "thought", parent: "agent" };
+  const before = new Transcript({ parent: "agent" }).update(undefined, [thinking])[0]!;
+  const choice = state.write(before.key, false);
+  // Text and tool blocks need not have been streamed. The settlement list is a
+  // subset, so the block-to-stream association must survive beside that list.
+  const complete: LiveEvent = { k: "sdk", m: { type: "assistant", uuid: "frame", parent_tool_use_id: "agent", message: { id: "api", content: [
+    { type: "text", text: "unstreamed text" }, { type: "thinking", thinking: "thought" },
+    { type: "tool_use", id: "read", name: "Read", input: {} },
+  ] } } };
+  const compacted = compactStreamEvents([thinking, complete]);
+  assert.equal(compacted.length, 1);
+  assert.deepEqual(compacted[0]?.k === "sdk" && compacted[0].m._streamThinking, { 1: 7 });
+  assert.deepEqual(compactStreamEvents(compacted), compacted);
+  const displayed = compacted.map((event) => event.k === "sdk" ? { ...event, m: displayMessage(event.m, 500_000) } : event);
+  const items = new Transcript({ parent: "agent" }).update(undefined, displayed);
+  const after = items.find((item) => item.kind === "thinking")!;
+  assert.equal(after.key, "frame:1");
+  assert.equal(after.streamStateKey, before.key);
+  assert.equal(state.read(after.key, true, true, [after.streamStateKey!]), choice);
+});
+
+test("CACHE-002 cumulative checkpoint replaces an already displayed prefix without doubling it", () => {
+  const transcript = new Transcript();
+  transcript.update(undefined, [delta("hello")]);
+  const events = [delta("hello"), { ...delta("hello world"), checkpoint: true } as LiveEvent];
+  assert.equal((transcript.update(undefined, events)[0] as { text: string }).text, "hello world");
+});
+
+test("CACHE-002 oversized unfinished streams stay bounded and report preview truncation", () => {
+  const streaming = new StreamingReplay();
+  for (let i = 0; i < 20; i++) streaming.push({ seq: i, ev: delta("x".repeat(1024 * 1024)) });
+  assert.ok(contentBytes(streaming.checkpoints) < SESSION_BYTES / 2);
+  const checkpoint = streaming.checkpoints[0]!.ev as Extract<LiveEvent, { k: "delta" }>;
+  assert.equal(checkpoint.truncated, true);
+  assert.ok(checkpoint.text.startsWith("x"));
+  const items = new Transcript().update(undefined, streaming.checkpoints.map(({ ev }) => ev));
+  assert.match((items[0] as { text: string }).text, /流式预览已截断/);
+});
+
+test("CACHE-003 oversized result retains owner, failure and turn accounting", () => {
+  const message = displayMessage({ type: "result", uuid: "r", subtype: "error_during_execution", is_error: true,
+    user_message_uuids: ["u1"], total_cost_usd: 2, turn_cost_usd: 0.75, duration_ms: 4321, duration_api_ms: 1234,
+    errors: ["request failed"], result: "x".repeat(500_000) });
+  assert.deepEqual(message.user_message_uuids, ["u1"]);
+  assert.equal(message.total_cost_usd, 2);
+  assert.equal(message.duration_api_ms, 1234);
+  const history: SdkMessageLike[] = [{ type: "user", uuid: "u1", message: { content: "first" } }];
+  const items = new Transcript().update(history, [assistant("a", "answer"), { k: "user", uuid: "u2", text: "queued", ts: 1 }, { k: "sdk", m: message }]);
+  const turns = groupTurns(items, true);
+  assert.equal(turns[0]?.result?.ok, false);
+  assert.equal(turns[0]?.result?.turnCostUsd, 0.75);
+  assert.equal(turns[0]?.result?.durationMs, 4321);
+  assert.equal(turns[0]?.result?.error, "request failed");
+  assert.equal(turns[1]?.result, undefined);
+  assert.equal(turns[1]?.active, true);
+});
+
+test("CACHE-003 assistant error and task control fields survive payload abbreviation", () => {
+  const failed = displayMessage({ type: "assistant", uuid: "a", error: "authentication_failed", aborted: true,
+    message: { content: [{ type: "text", text: "failure ".repeat(100_000) }] } });
+  assert.equal(failed.aborted, true);
+  assert.equal(new Transcript().update([failed], [])[0]?.kind, "notice");
+  const task = displayMessage({ type: "system", subtype: "task_notification", task_id: "t", tool_use_id: "tu", run_id: "run",
+    status: "failed", usage: { duration_ms: 12 }, summary: "long ".repeat(100_000) });
+  assert.equal(task.task_id, "t");
+  assert.equal(task.status, "failed");
+  assert.equal(task.tool_use_id, "tu");
+  assert.deepEqual(task.usage, { duration_ms: 12 });
+});
+
+
+test("CACHE-017 oversized real shell completion settles same UUID and exposes output plus hydration", async () => {
+  const { runBang, bangMessage } = await import("../../server/bang.ts");
+  const command = "printf '%30000s' ''; printf '%30000s' '' >&2 # " + "c".repeat(90000);
+  const result = await runBang(command, process.cwd());
+  assert.equal(result.code, 0);
+  assert.equal(result.stdout.length, 30000);
+  assert.equal(result.stderr.length, 30000);
+  const full = { type: "user", uuid: "shell", message: { content: bangMessage(command, result) } };
+  const completion = displayEvent({ k: "user", uuid: "shell", text: full.message.content, ts: 2 });
+  assert.equal(completion.k, "sdk");
+  assert.ok(contentBytes(completion) < 30000);
+  const transcript = new Transcript();
+  const start: LiveEvent = { k: "bash", uuid: "shell", command, ts: 1 };
+  const events = [start, completion];
+  const items = transcript.update(undefined, events);
+  assert.equal(items.length, 1);
+  const shell = items[0]!;
+  assert.equal(shell.kind, "bash");
+  if (shell.kind !== "bash") return;
+  assert.equal(shell.running, false);
+  assert.equal(shell.stdout?.length, 2000);
+  assert.equal(shell.stderr?.length, 2000);
+  assert.equal(shell.deferred?.uuid, "shell");
+  assert.deepEqual(new Transcript().update(undefined, [...events, completion]), items);
+  const hydrated = new Transcript().update([{ ...full, _hydrated: true }], events);
+  const expanded = hydrated.find((item) => item.kind === "bash");
+  assert.equal(expanded?.kind === "bash" && expanded.stdout?.length, 30000);
+  assert.equal(expanded?.kind === "bash" && expanded.command.length, command.length);
+  const historyOnly = new Transcript().update([displayMessage(full)], []);
+  assert.equal(historyOnly[0]?.kind === "bash" && historyOnly[0].running, false);
+  assert.equal(historyOnly[0]?.deferred?.uuid, "shell");
+});

package/web/src/styles.css

@@ -0,0 +1,231 @@
+@import "tailwindcss";
+
+/* Design tokens: Claude desktop look — warm neutrals, clay accent, serif headings. */
+:root {
+  --bg: #faf9f5;
+  --surface: #ffffff;
+  --surface-2: #f0eee6;
+  --border: #e5e2d9;
+  --text: #141413;
+  --text-muted: #6b6a65;
+  --accent: #c96442;
+  --accent-hover: #b4573a;
+  --accent-text: #ffffff;
+  --danger: #b3261e;
+  --ok: #3d7a4a;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #1f1e1d;
+    --surface: #262624;
+    --surface-2: #30302e;
+    --border: #3d3d3a;
+    --text: #f5f4ed;
+    --text-muted: #a6a39b;
+    --accent: #d97757;
+    --accent-hover: #e08a6d;
+    --accent-text: #1f1e1d;
+    --danger: #f2b8b5;
+    --ok: #8fc79a;
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme="dark"] {
+  --bg: #1f1e1d;
+  --surface: #262624;
+  --surface-2: #30302e;
+  --border: #3d3d3a;
+  --text: #f5f4ed;
+  --text-muted: #a6a39b;
+  --accent: #d97757;
+  --accent-hover: #e08a6d;
+  --accent-text: #1f1e1d;
+  --danger: #f2b8b5;
+  --ok: #8fc79a;
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-2: var(--surface-2);
+  --color-border: var(--border);
+  --color-text: var(--text);
+  --color-muted: var(--text-muted);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-text: var(--accent-text);
+  --color-danger: var(--danger);
+  --color-ok: var(--ok);
+  --font-serif: "Tiempos Headline", ui-serif, Georgia, "Noto Serif SC", "Songti SC", serif;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+}
+
+h1, h2, h3 {
+  font-family: var(--font-serif);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+/* Markdown body */
+.prose-claude {
+  line-height: 1.65;
+  overflow-wrap: anywhere;
+}
+.prose-claude > * + * { margin-top: 0.75em; }
+.prose-claude h1, .prose-claude h2, .prose-claude h3 { margin-top: 1.2em; }
+.prose-claude h1 { font-size: 1.4em; }
+.prose-claude h2 { font-size: 1.25em; }
+.prose-claude h3 { font-size: 1.1em; }
+.prose-claude ul { list-style: disc; padding-left: 1.4em; }
+.prose-claude ol { list-style: decimal; padding-left: 1.4em; }
+.prose-claude li + li { margin-top: 0.25em; }
+.prose-claude a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+.prose-claude code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
+.prose-claude pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.75em 1em; overflow-x: auto; font-size: 0.85em; line-height: 1.5; }
+.prose-claude pre code { background: none; padding: 0; font-size: inherit; }
+.prose-claude blockquote { border-left: 3px solid var(--border); padding-left: 1em; color: var(--text-muted); }
+.prose-claude table { border-collapse: collapse; font-size: 0.92em; }
+.prose-claude th, .prose-claude td { border: 1px solid var(--border); padding: 0.35em 0.7em; text-align: left; }
+.prose-claude hr { border-color: var(--border); }
+.markdown-copy-block { position: relative; min-width: 0; }
+.markdown-copy-button { position: absolute; z-index: 1; top: 0.25rem; right: 0.375rem; }
+.prose-claude .markdown-code-block pre { padding-top: 2.75rem; }
+.markdown-table-block { padding-top: 2.5rem; }
+@media (hover: hover) and (pointer: fine) {
+  .markdown-copy-button { opacity: 0; }
+  .markdown-copy-block:hover > .markdown-copy-button,
+  .markdown-copy-block:focus-within > .markdown-copy-button,
+  .markdown-copy-button[data-copied] { opacity: 1; }
+}
+
+/* Local type scale for transcripts only. Large preserves the existing sizes;
+   dense output keeps a 12px floor so commands and diffs remain readable. */
+.message-transcript {
+  --message-body-size: 1rem;
+  --text-sm: 0.875rem;
+  --text-xs: 0.75rem;
+  font-size: var(--message-body-size);
+}
+.message-transcript[data-message-font-size="medium"] {
+  --message-body-size: 0.9375rem;
+  --text-sm: 0.84375rem;
+}
+.message-transcript[data-message-font-size="small"] {
+  --message-body-size: 0.875rem;
+  --text-sm: 0.8125rem;
+}
+.message-transcript .prose-claude code { font-size: max(0.75rem, 0.88em); }
+.message-transcript .prose-claude pre { font-size: max(0.75rem, 0.85em); }
+.message-transcript .prose-claude pre code { font-size: inherit; }
+
+.app-height { height: 100dvh; }
+/* Shared scrollbars cover page content and portals; utilities can still hide them. */
+@layer base {
+  :where(*) {
+    --scrollbar-thumb: color-mix(in srgb, var(--text-muted) 30%, transparent);
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
+  :where(*:hover, *:focus-within) {
+    --scrollbar-thumb: color-mix(in srgb, var(--text-muted) 50%, transparent);
+  }
+  @supports selector(::-webkit-scrollbar) {
+    /* Chromium's standard scrollbar properties otherwise override pixel sizing. */
+    :where(*) { scrollbar-width: auto; scrollbar-color: auto; }
+    :where(*)::-webkit-scrollbar { width: 8px; height: 8px; }
+    :where(*)::-webkit-scrollbar-track,
+    :where(*)::-webkit-scrollbar-corner { background: transparent; }
+    :where(*)::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb);
+      border-radius: 999px;
+    }
+    :where(*)::-webkit-scrollbar-button { display: none; }
+  }
+}
+@media (pointer: fine) {
+  .sidebar-session-list { scrollbar-gutter: stable; }
+}
+@media (min-width: 768px) {
+  .desktop-resizable-pane {
+    width: var(--pane-width);
+    min-width: var(--pane-min);
+    max-width: min(var(--pane-max), max(var(--pane-min), calc(100% - var(--pane-remaining))));
+  }
+}
+/* Floating panels leave a visible gap as well as room for notches and the home indicator. */
+.safe-overlay {
+  --overlay-gap: 0.75rem;
+  --overlay-top: max(var(--overlay-gap), env(safe-area-inset-top, 0px));
+  --overlay-bottom: max(var(--overlay-gap), env(safe-area-inset-bottom, 0px));
+  padding: var(--overlay-top) max(var(--overlay-gap), env(safe-area-inset-right, 0px)) var(--overlay-bottom) max(var(--overlay-gap), env(safe-area-inset-left, 0px));
+}
+.safe-overlay-panel { max-height: calc(100dvh - var(--overlay-top) - var(--overlay-bottom)); }
+.goal-dialog { height: min(40rem, calc(100dvh - var(--overlay-top) - var(--overlay-bottom))); }
+.safe-sheet-panel { max-height: min(70dvh, calc(100dvh - var(--overlay-top) - var(--overlay-bottom))); }
+@media (min-width: 640px) { .safe-overlay { --overlay-gap: 1rem; } }
+/* On very short screens or with the keyboard open, keep all picker controls reachable. */
+@media (max-height: 480px) {
+  .directory-picker-body { overflow-y: auto; overscroll-behavior: contain; }
+  .directory-picker-list { flex: none; height: 6rem; }
+}
+@supports (-webkit-touch-callout: none) {
+  .app-height { height: -webkit-fill-available; height: 100dvh; }
+}
+
+/* Code viewer (files page): line numbers via counters, shiki dual-theme colors. */
+.code-view {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  padding: 0.5rem 0;
+  width: max-content;
+  min-width: 100%;
+  tab-size: 4;
+}
+.code-view code { counter-reset: line; display: block; }
+.code-view .line { display: block; min-height: 1.6em; padding-right: 1rem; white-space: pre; }
+.code-view .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 3.5em;
+  margin-right: 1em;
+  padding-right: 0.5em;
+  text-align: right;
+  color: var(--text-muted);
+  opacity: 0.7;
+  user-select: none;
+}
+.code-view .line-target { background: color-mix(in srgb, var(--accent) 18%, transparent); }
+.code-view .line span { color: var(--shiki-light); }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .code-view .line span { color: var(--shiki-dark); }
+}
+:root[data-theme="dark"] .code-view .line span { color: var(--shiki-dark); }
+
+.diff-table .diff-ln {
+  width: 1%;
+  min-width: 2.5em;
+  padding: 0 0.5em;
+  text-align: right;
+  color: var(--text-muted);
+  user-select: none;
+  white-space: nowrap;
+}

package/web/src/tool-result-body.test.ts

@@ -0,0 +1,115 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import type { SdkMessageLike } from "@shared/protocol.ts";
+import { SESSION_BYTES } from "@shared/message-window.ts";
+import { boundSession, sessionWeight } from "./message-cache.ts";
+import { hydrateMessageBody, preserveHydratedBodies } from "./message-bodies.ts";
+import { buildItems, type ToolResult } from "./transcript.ts";
+
+const result = (uuid: string, entries: [string, string][], deferred = false): SdkMessageLike => ({
+  type: "user", uuid, message: { content: entries.map(([tool_use_id, content]) => ({ type: "tool_result", tool_use_id, content })) },
+  tool_use_result: { details: uuid }, ...(deferred ? { _deferred: { bytes: 500000 } } : {}),
+});
+const owner = (links: Record<string, ToolResult>): SdkMessageLike => ({
+  type: "assistant", uuid: "owner", message: { content: Object.keys(links).map((id) => ({ type: "tool_use", id, name: "Read", input: {} })) },
+  linkedToolResults: links,
+});
+const preview = (uuid: string): ToolResult => ({ content: "preview", isError: false, deferredUuid: uuid });
+const tools = (messages: SdkMessageLike[]) => buildItems(messages, []).filter((item) => item.kind === "tool");
+
+test("loaded results follow their own UUID between linked and standalone forms after the owner leaves the window", () => {
+  const linked = hydrateMessageBody(owner({ first: preview("r1") }), result("r1", [["first", "complete"]]), "r1");
+  const incoming = result("r1", [["first", "preview"]], true);
+  const moved = preserveHydratedBodies([incoming], [linked]);
+  assert.equal(moved[0]!._deferred, incoming._deferred, "unread text/image body must remain deferred");
+  assert.deepEqual((moved[0]!.linkedToolResults as Record<string, ToolResult>).first,
+    { content: "complete", isError: false, structured: { details: "r1" } });
+  assert.equal(incoming.linkedToolResults, undefined, "frozen page records must not be mutated");
+  const back = preserveHydratedBodies([owner({ first: preview("r1") })], moved);
+  assert.equal(tools(back)[0]!.result?.content, "complete");
+  assert.equal(tools([back[0]!, ...moved])[0]!.result?.content, "complete");
+});
+
+test("several hydrated result messages preserve the exact tool ID and source UUID pairing", () => {
+  let linked = owner({ first: preview("r1"), second: preview("r2"), third: preview("r2") });
+  linked = hydrateMessageBody(linked, result("r1", [["first", "full one"]]), "r1");
+  linked = hydrateMessageBody(linked, result("r2", [["second", "full two"], ["third", "full three"]]), "r2");
+  const records = preserveHydratedBodies([
+    owner({ first: preview("r1"), second: preview("r2"), third: preview("r2") }),
+    result("r1", [["first", "short one"]], true), result("r2", [["second", "short two"], ["third", "short three"]], true),
+  ], [linked]);
+  assert.deepEqual(tools(records).map((item) => item.result?.content), ["full one", "full two", "full three"]);
+  assert.deepEqual(records[0]!._hydratedToolResultUuids, { first: "r1", second: "r2", third: "r2" });
+  const wrongIdentity = preserveHydratedBodies([result("r1", [["second", "different"]], true)], [linked]);
+  assert.equal((wrongIdentity[0]!.linkedToolResults as Record<string, ToolResult>).second, undefined, "owner-level alias membership alone cannot identify a different tool result");
+  assert.equal((wrongIdentity[0]!.linkedToolResults as Record<string, ToolResult>).first?.content, "full one", "known results survive when their blocks are absent from the preview");
+});
+
+test("a partially retained tool-result record never promotes its other preview blocks to complete", () => {
+  const loaded = hydrateMessageBody(owner({ first: preview("r1") }), result("r1", [["first", "complete"]]), "r1");
+  const incoming = result("r1", [["first", "short"], ["second", "unloaded preview"]], true);
+  const moved = preserveHydratedBodies([incoming], [loaded]);
+  const calls = owner({ first: preview("r1"), second: preview("r1") });
+  const items = tools(preserveHydratedBodies([calls, ...moved], moved));
+  assert.equal(items[0]!.result?.content, "complete");
+  assert.equal(items[0]!.result?.deferredUuid, undefined);
+  assert.equal(items[1]!.result?.content, "unloaded preview");
+  assert.equal(items[1]!.result?.deferredUuid, "r1");
+});
+
+test("a standalone full hydration upgrades linked previews without retaining its original record", () => {
+  const full = { ...result("r1", [["first", "complete"]]), _hydrated: true };
+  const records = preserveHydratedBodies([owner({ first: preview("r1") })], [full]);
+  assert.equal(tools(records)[0]!.result?.content, "complete");
+});
+
+test("a different result UUID or an incoming complete result is not overwritten by an older hydrated result", () => {
+  const linked = hydrateMessageBody(owner({ first: preview("r1") }), result("r1", [["first", "old full"]]), "r1");
+  const newResult = preserveHydratedBodies([owner({ first: preview("r2") }), result("r2", [["first", "new preview"]], true)], [linked]);
+  assert.equal(tools(newResult)[0]!.result?.content, "new preview");
+  assert.equal(tools(newResult)[0]!.result?.deferredUuid, "r2");
+  const complete = preserveHydratedBodies([owner({ first: { content: "incoming complete", isError: true } })], [linked]);
+  assert.deepEqual(tools(complete)[0]!.result, { content: "incoming complete", isError: true });
+  const freshView = [owner({ first: preview("r1") }), result("r1", [["first", "fresh view"]], true)];
+  assert.equal(tools(preserveHydratedBodies(freshView, []))[0]!.result?.content, "fresh view");
+});
+
+test("projection prefers full content only for the same source result, independent of representation order", () => {
+  const linked = hydrateMessageBody(owner({ first: preview("r1") }), result("r1", [["first", "complete"]]), "r1");
+  const deferred = result("r1", [["first", "preview"]], true);
+  for (const messages of [[linked, deferred], [deferred, linked]]) assert.equal(tools(messages)[0]!.result?.content, "complete");
+  const newer = result("r2", [["first", "new result"]], true);
+  assert.equal(tools([linked, newer])[0]!.result?.content, "new result");
+});
+
+test("ordinary complete pages retain hydration provenance through a later deferred page", () => {
+  const loaded = hydrateMessageBody(owner({ first: preview("r1") }), result("r1", [["first", "complete"]]), "r1");
+  const ordinaryOwner = { ...owner({ first: { content: "complete", isError: false } }), _toolResultUuids: { first: "r1" } };
+  const second = preserveHydratedBodies([ordinaryOwner], [loaded]);
+  const third = preserveHydratedBodies([owner({ first: preview("r1") }), result("r1", [["first", "short"]], true)], second);
+  assert.equal(tools(third)[0]!.result?.content, "complete");
+  const standalone = preserveHydratedBodies([result("r1", [["first", "complete"]])], [loaded]);
+  const back = preserveHydratedBodies([owner({ first: preview("r1") })], standalone);
+  assert.equal(tools(back)[0]!.result?.content, "complete");
+  const genuinelyNew = { ...owner({ first: { content: "new complete", isError: false } }), _toolResultUuids: { first: "r2" } };
+  const fresh = preserveHydratedBodies([genuinelyNew], [loaded]);
+  assert.equal(tools(fresh)[0]!.result?.content, "new complete");
+  assert.equal(fresh[0]!._hydratedToolResultUuids, undefined);
+  assert.equal(tools(preserveHydratedBodies([owner({ first: preview("r1") })], fresh))[0]!.result?.content, "preview");
+});
+
+
+test("migrated result bodies count toward the normal budget and survive trimming their original owner", () => {
+  const text = "x".repeat(SESSION_BYTES / 5);
+  const loaded = hydrateMessageBody(owner({ first: preview("r1") }), result("r1", [["first", text]]), "r1");
+  const records = preserveHydratedBodies([owner({ first: preview("r1") }),
+    { type: "user", uuid: "padding", message: { content: "p".repeat(SESSION_BYTES / 7) } },
+    result("r1", [["first", "preview"]], true),
+  ], [loaded]);
+  const bounded = boundSession({ seq: 0, resetCount: 0, events: [], snapshot: { state: "idle", pending: [], planMode: false, crons: [], tasks: [] },
+    history: { source: "main", mode: "latest", generation: "g", request: 1, items: records } });
+  assert.ok(sessionWeight(bounded) <= SESSION_BYTES);
+  assert.equal(bounded.history!.items.some((m) => m.uuid === "owner"), false);
+  const returned = preserveHydratedBodies([owner({ first: preview("r1") })], bounded.history!.items);
+  assert.equal(tools(returned)[0]!.result?.content, text);
+});