@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/turns.test.ts

@@ -0,0 +1,338 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { defaultTurnCollapsed, groupTurns, visibleTurnItems, turnRebases, rebaseTurnRow, rebaseTurnFolds, setTurnFold, type TurnFold } from "./turns.ts";
+import type { Item } from "./transcript.ts";
+
+const user = (key: string, text = key): Item => ({ kind: "user", key, text, images: 0 });
+const text = (key: string): Item => ({ kind: "text", key, text: key });
+const result = (key: string, userMessageIds?: string[]): Item => ({ kind: "result", key, ok: true, subtype: "success", userMessageIds });
+const choice = (collapsed: boolean, revision: number): TurnFold => ({ collapsed, revision });
+
+test("history without result records groups by prompt and preserves every item in order", () => {
+  const items = [user("u1"), text("a1"), user("u2"), text("a2")];
+  const turns = groupTurns(items, false);
+  assert.deepEqual(turns.map((turn) => turn.key), ["u1", "u2"]);
+  assert.deepEqual(turns.flatMap((turn) => turn.items), items);
+});
+
+test("SDK results never merge input boundaries even when one run consumes several inputs", () => {
+  const items: Item[] = [user("u1"), { kind: "thinking", key: "think", text: "thought" }, { kind: "tool", key: "tool", id: "tool", name: "Read", input: {} }, user("u2"), text("reply"), result("r", ["u1", "u2"])];
+  const turns = groupTurns(items, false);
+  assert.equal(turns.length, 2);
+  assert.deepEqual(turns.map((turn) => turn.key), ["u1", "u2"]);
+  assert.ok(turns.every(defaultTurnCollapsed));
+  assert.equal(turns[0]!.result, undefined);
+  assert.equal(turns[1]!.result?.key, "r");
+  assert.deepEqual(turns.flatMap((turn) => turn.items), items);
+});
+
+test("consecutive queued inputs stay together when an earlier result arrives between them", () => {
+  const items = [user("A"), text("reply-A"), user("B"), result("rA", ["A"]), user("C"), user("D"), text("reply-BCD"), result("rBCD", ["B", "C", "D"])];
+  const turns = groupTurns(items, false);
+  assert.deepEqual(turns.map((turn) => turn.key), ["A", "B"]);
+  assert.deepEqual(turns[0]!.items.map((item) => item.key), ["A", "reply-A", "rA"]);
+  assert.deepEqual(turns[1]!.items.map((item) => item.key), ["B", "C", "D", "reply-BCD", "rBCD"]);
+  assert.equal(new Set(turns.flatMap((turn) => turn.items)).size, items.length);
+});
+
+test("a result for A cannot complete or steal queued B and C", () => {
+  const items = [user("A"), text("reply-A"), user("B"), user("C"), result("rA", ["A"])];
+  const turns = groupTurns(items, true);
+  assert.deepEqual(turns.map((turn) => [turn.key, turn.active]), [["A", false], ["B", true]]);
+  assert.deepEqual(turns[1]!.items.map((item) => item.key), ["B", "C"]);
+  assert.equal(turns[1]!.result, undefined);
+});
+
+test("a still-running foreground tool stays open while consecutive later inputs show queued", () => {
+  const bash: Item = { kind: "tool", key: "bash", id: "bash", name: "Bash", input: { command: "long command" } };
+  const turns = groupTurns([user("A"), bash, user("B"), user("C")], true);
+  assert.deepEqual(turns.map((turn) => [turn.key, turn.active, turn.queued]), [["A", true, false], ["B", true, true]]);
+  assert.ok(turns.every((turn) => !defaultTurnCollapsed(turn)));
+});
+
+test("a new input after agent content starts another turn, but adjacent inputs do not", () => {
+  const turns = groupTurns([user("A"), text("reply-A"), user("B"), user("C"), text("reply-BC"), user("D")], true);
+  assert.deepEqual(turns.map((turn) => turn.items.filter((item) => item.kind === "user").map((item) => item.key)), [["A"], ["B", "C"], ["D"]]);
+});
+
+test("startup errors without result records stay expanded and expose failure metadata", () => {
+  const turns = groupTurns([{ kind: "notice", key: "error", tone: "error", text: "SDK 启动失败" }], false);
+  assert.equal(turns[0]!.summary, "执行失败");
+  assert.equal(turns[0]!.error, "SDK 启动失败");
+  assert.equal(defaultTurnCollapsed(turns[0]!), false);
+});
+
+test("failed results remain visible while successful completion still folds automatically", () => {
+  const failure: Item = { kind: "result", key: "failed", ok: false, subtype: "error_during_execution", error: "命令失败", userMessageIds: ["A"] };
+  const turns = groupTurns([user("A"), text("reply-A"), failure, user("B"), text("reply-B"), result("ok", ["B"])], false);
+  assert.equal(turns[0]!.error, "命令失败");
+  assert.equal(defaultTurnCollapsed(turns[0]!), false);
+  assert.equal(defaultTurnCollapsed(turns[1]!), true);
+});
+
+test("older history stays separate from the live turn, and only the unfinished tail is active", () => {
+  const items = [user("old"), text("old-reply"), user("live"), text("live-reply"), result("r", ["live"]), user("next"), text("streaming")];
+  const turns = groupTurns(items, true);
+  assert.deepEqual(turns.map((turn) => [turn.key, turn.active]), [["old", false], ["live", false], ["next", true]]);
+  assert.deepEqual(turns.flatMap((turn) => turn.items), items);
+});
+
+test("consecutive inputs and images are kept within one turn without SDK prompt IDs", () => {
+  const image: Item = { kind: "user", key: "image", text: "", images: 1 };
+  const turns = groupTurns([image, user("second"), text("reply"), result("r")], false);
+  assert.equal(turns.length, 1);
+  assert.equal(turns[0]!.summary, "图片输入");
+  assert.equal(turns[0]!.items.length, 4);
+});
+
+test("queued speech can supply a turn preview when earlier inputs contain only playback metadata", () => {
+  const metadata = user("playback", '<unheard_text reason="用户打断讲话">旧回复。</unheard_text>');
+  const speech = user("voice", "<asr-recognized-text>请查看下载的文件。</asr-recognized-text>");
+  const items = [metadata, speech, user("next", "后续排队输入")];
+  const turns = groupTurns(items, true);
+  assert.equal(turns.length, 1);
+  assert.equal(turns[0]!.summary, "请查看下载的文件。");
+  assert.deepEqual(turns[0]!.items, items, "preview selection cannot change queued input grouping or content");
+});
+
+test("background turns without prompts and empty transcripts remain visible and valid", () => {
+  const items = [text("background"), result("r"), text("next")];
+  const turns = groupTurns(items, true);
+  assert.equal(turns.length, 2);
+  assert.equal(turns[0]!.summary, "后台调用");
+  assert.equal(turns[1]!.active, true);
+  assert.deepEqual(groupTurns([], true), []);
+});
+
+test("default completed folds preserve all final-frame text blocks once with their original identities", () => {
+  for (const withResult of [false, true]) {
+    for (let blocks = 1; blocks <= 4; blocks++) {
+      // Colons in a frame key must not split the reply at an arbitrary block.
+      const reply = Array.from({ length: blocks }, (_, index) => text(`final:frame:${index + 1}`));
+      const items: Item[] = [user("u"), text("commentary:0"),
+        { kind: "tool", key: "tool", id: "tool", name: "Read", input: {}, result: { content: "file", isError: false } },
+        text("previous-frame:0"), ...reply, ...(withResult ? [result("r", ["u"])] : [])];
+      const turn = groupTurns(items, false)[0]!;
+      assert.equal(defaultTurnCollapsed(turn), true);
+      const visible = visibleTurnItems(turn);
+      assert.deepEqual(visible, reply);
+      visible.forEach((item, index) => assert.equal(item, reply[index]));
+      assert.equal(new Set(visible.map((item) => item.key)).size, reply.length);
+      // Expanded rows use the same input sequence, without appending a second
+      // copy of the preview. This is shared by normal and virtual rendering.
+      assert.equal(visibleTurnItems(turn, false), turn.items);
+      assert.equal(new Set(visibleTurnItems(turn, false).map((item) => item.key)).size, items.length);
+      assert.deepEqual(visibleTurnItems(turn, true), []);
+    }
+  }
+});
+
+test("completed folds never promote commentary when the final output is not settled assistant text", () => {
+  const tails: Item[] = [
+    { kind: "tool", key: "tool", id: "tool", name: "Read", input: {}, result: { content: "file", isError: false } },
+    { kind: "thinking", key: "thinking", text: "still reasoning" },
+    { kind: "notice", key: "notice", tone: "info", text: "notice" },
+    { kind: "local", key: "local", text: "local output" },
+    { kind: "bash", key: "bash", command: "ls", stdout: "file", running: false },
+    { kind: "text", key: "draft-msg:1", text: "unfinished", streaming: true },
+  ];
+  for (const tail of tails) {
+    for (const withResult of [false, true]) {
+      const turn = groupTurns([user("u"), text("commentary:0"), tail, ...(withResult ? [result("r")] : [])], false)[0]!;
+      assert.deepEqual(visibleTurnItems(turn), [], tail.kind);
+      assert.equal(visibleTurnItems(turn, false), turn.items);
+    }
+  }
+  for (const items of [[user("u")], [result("r")]]) {
+    assert.deepEqual(visibleTurnItems(groupTurns(items, false)[0]!), []);
+  }
+});
+
+test("a same-frame tool or thinking block bounds the final text suffix", () => {
+  for (const boundary of [
+    { kind: "thinking", key: "frame:1", text: "thinking" } as Item,
+    { kind: "tool", key: "tool", id: "tool", name: "Read", input: {} } as Item,
+  ]) {
+    const reply = [text("frame:2"), text("frame:3")];
+    const turn = groupTurns([user("u"), text("frame:0"), boundary, ...reply, result("r")], false)[0]!;
+    assert.deepEqual(visibleTurnItems(turn), reply);
+  }
+});
+
+test("completion keeps the final reply visible while automatic and explicit folds follow the lifecycle", () => {
+  const reply = [text("reply:0"), text("reply:1")];
+  const items: Item[] = [user("u"), { kind: "thinking", key: "thought", text: "thinking" }, ...reply];
+  const active = groupTurns(items, true)[0]!;
+  assert.equal(visibleTurnItems(active), active.items);
+  const completed = groupTurns([...items, result("r", ["u"])], true)[0]!;
+  assert.equal(completed.active, false);
+  assert.deepEqual(visibleTurnItems(completed), reply);
+  for (const turn of [active, completed]) {
+    assert.equal(visibleTurnItems(turn, false), turn.items);
+    assert.deepEqual(visibleTurnItems(turn, true), []);
+  }
+  const failed = groupTurns([...items, { kind: "result", key: "failed", ok: false, subtype: "error_during_execution", error: "failed", userMessageIds: ["u"] }], false)[0]!;
+  assert.equal(visibleTurnItems(failed), failed.items);
+  assert.deepEqual(visibleTurnItems(failed, true), []);
+});
+
+test("the latest turn stays expanded after completion while a manual fold hides the whole turn", () => {
+  const items: Item[] = [user("u"), { kind: "thinking", key: "thought", text: "thinking" }, text("reply:0")];
+  const active = groupTurns(items, true, true)[0]!;
+  const completedItems = [...items, result("r", ["u"])];
+  for (const running of [true, false]) {
+    const completed = groupTurns(completedItems, running, true)[0]!;
+    assert.equal(completed.active, false);
+    assert.equal(defaultTurnCollapsed(completed), false);
+    assert.equal(visibleTurnItems(completed), completed.items);
+    assert.deepEqual(visibleTurnItems(completed, true), [], "the latest manual fold hides the final reply too");
+  }
+  assert.equal(visibleTurnItems(active), active.items);
+
+  const next = groupTurns([...completedItems, user("next")], true, true);
+  assert.equal(defaultTurnCollapsed(next[0]!), true, "the previous turn follows the usual default once a new turn begins");
+  assert.equal(visibleTurnItems(next[0]!, false), next[0]!.items, "manual expansion remains honored");
+  assert.equal(defaultTurnCollapsed(next[1]!), false);
+
+  const olderWindow = groupTurns(completedItems, false, false)[0]!;
+  assert.equal(defaultTurnCollapsed(olderWindow), true, "an older page's last visible turn is not the conversation tail");
+  assert.deepEqual(visibleTurnItems(olderWindow).map((item) => item.key), ["reply:0"]);
+  assert.deepEqual(groupTurns([], false, true), []);
+});
+
+test("a manual fold hides the latest turn with and without a final text", () => {
+  // A trailing reply would survive a default fold; only the explicit branch hides it.
+  const withReply = groupTurns([user("u"), text("reply:0"), result("r")], false, true)[0]!;
+  assert.deepEqual(visibleTurnItems(withReply, true), []);
+
+  const tool: Item = { kind: "tool", key: "tool", id: "tool", name: "Read", input: {} };
+  const latest = groupTurns([user("u"), tool, result("r")], false, true)[0]!;
+  assert.deepEqual(visibleTurnItems(latest, true), []);
+
+  const promptOnly = groupTurns([user("only")], false, true)[0]!;
+  assert.deepEqual(visibleTurnItems(promptOnly, true), []);
+
+  const older = groupTurns([user("u"), tool, result("r")], false, false)[0]!;
+  assert.deepEqual(visibleTurnItems(older, true), [], "older manual folds may still hide a non-text tail");
+});
+
+test("default final replies have a collapsible body even while the process is folded", () => {
+  for (const length of [100, 10_000]) {
+    const reply: Item = { kind: "text", key: "reply:0", text: "x".repeat(length) };
+    const completed = groupTurns([user("u"), reply, result("r")], false)[0]!;
+    assert.equal(defaultTurnCollapsed(completed), true);
+    // Both normal and virtual row owners and the floating-collapse guard use
+    // visible body length, independently of the header's process-fold state.
+    assert.ok(visibleTurnItems(completed).length > 0);
+    assert.equal(visibleTurnItems(completed)[0]!.key, reply.key);
+    assert.equal(visibleTurnItems(completed, true).length, 0);
+    assert.ok(visibleTurnItems(completed, false).length > 0);
+  }
+  const toolOnly = groupTurns([user("u"), { kind: "tool", key: "tool", id: "tool", name: "Read", input: {} }, result("r")], false)[0]!;
+  assert.equal(visibleTurnItems(toolOnly).length, 0);
+});
+
+
+test("prepending a partial turn carries explicit folds and header anchors to its prompt", () => {
+  const previous = groupTurns([text("a5"), text("a6")], false);
+  const current = groupTurns([user("older"), text("old-reply"), result("old-result"), user("prompt"), text("a5"), text("a6")], false);
+  const rebases = turnRebases(previous, current);
+  assert.equal(rebases.get("a5"), "prompt");
+  for (const collapsed of [false, true]) {
+    const value = choice(collapsed, 1);
+    const folds = rebaseTurnFolds(new Map([["main:a5", value], ["agent:a5", choice(!collapsed, 2)]]), "main", rebases);
+    assert.equal(folds.get("main:prompt"), value);
+    assert.equal(folds.get("agent:prompt"), undefined);
+  }
+  // Both normal DOM lookup and virtual index lookup use the same rebase; focus
+  // and pixel offset stay on the original anchor object at the call site.
+  assert.equal(rebaseTurnRow("turn-a5", rebases), "turn-prompt");
+  assert.equal(rebaseTurnRow("changes-a5", rebases), "changes-prompt");
+  assert.equal(rebaseTurnRow("a6", rebases), "a6");
+  const newer = choice(true, 2);
+  assert.equal(rebaseTurnFolds(new Map([["main:a5", choice(false, 1)], ["main:prompt", newer]]), "main", rebases).get("main:prompt"), newer);
+});
+
+test("CACHE-021 latest explicit choice survives page round trips and migration chains", () => {
+  let folds = new Map([["view:tail", choice(true, 1)]]);
+  folds = rebaseTurnFolds(folds, "view", new Map([["tail", "prompt"]]));
+  const opened = choice(false, 2);
+  folds = setTurnFold(folds, "view", "view:prompt", opened);
+  folds = rebaseTurnFolds(folds, "view", new Map([["prompt", "tail"]]));
+  assert.equal(folds.get("view:tail"), opened);
+  folds = rebaseTurnFolds(folds, "view", new Map([["tail", "middle"]]));
+  const closed = choice(true, 3);
+  folds = setTurnFold(folds, "view", "view:middle", closed);
+  folds = rebaseTurnFolds(folds, "view", new Map([["middle", "prompt"]]));
+  folds = rebaseTurnFolds(folds, "view", new Map([["prompt", "tail"]]));
+  assert.equal(folds.get("view:tail"), closed);
+  assert.ok(folds.has("view:prompt") && folds.has("view:middle"));
+});
+
+test("an explicit action updates all known aliases before leaving the component", () => {
+  for (const initial of [new Map<string, TurnFold>(), new Map([["view:tail", choice(false, 1)]])]) {
+    let folds = rebaseTurnFolds(initial, "view", new Map([["tail", "prompt"]]));
+    const closed = choice(true, 2);
+    folds = setTurnFold(folds, "view", "view:prompt", closed);
+    // Remounting at the tail has no previous turns and therefore no rebases.
+    assert.equal(rebaseTurnFolds(folds, "view", new Map()).get("view:tail"), closed);
+    assert.equal(folds.get("view:prompt"), closed);
+  }
+});
+
+test("aliases do not acquire fake recency, and merged turns choose the latest explicit action", () => {
+  for (const pairs of [[["a", "merged"], ["b", "merged"]], [["b", "merged"], ["a", "merged"]]] as const) {
+    const newer = choice(false, 2);
+    let folds = new Map([["view:a", choice(true, 1)], ["view:b", newer], ["other:merged", choice(true, 99)]]);
+    folds = rebaseTurnFolds(folds, "view", new Map([["a", "alias"]]));
+    assert.equal(folds.get("view:alias")?.revision, 1);
+    folds = rebaseTurnFolds(folds, "view", new Map(pairs.map(([from, to]) => [from === "a" ? "alias" : from, to])));
+    assert.equal(folds.get("view:merged"), newer);
+    assert.equal(folds.get("other:merged")?.revision, 99);
+    const closed = choice(true, 3);
+    folds = setTurnFold(folds, "view", "view:merged", closed);
+    for (const alias of ["a", "b", "alias", "merged"]) assert.equal(folds.get(`view:${alias}`), closed);
+    assert.equal(folds.get("other:merged")?.revision, 99);
+  }
+});
+
+test("alias relationships stay inside the bounded fold cache", () => {
+  let folds = new Map<string, TurnFold>();
+  for (let index = 0; index < 7500; index++) folds.set(`view:${index}`, choice(false, index + 1));
+  const rebased = rebaseTurnFolds(folds, "view", new Map([["0", "alias"]]));
+  assert.equal(folds.size, 7500, "rebasing does not mutate the prior state");
+  assert.equal(rebased.size, 7500);
+  assert.equal(rebased.has("view:0"), false);
+  folds = setTurnFold(rebased, "view", "view:alias", choice(true, 8000));
+  assert.equal(folds.size, 7500);
+  assert.equal(folds.has("view:0"), false, "updating an alias never resurrects evicted keys");
+});
+
+test("at the fold budget, successive merges keep one cache order and the latest alias choice", () => {
+  const older = choice(true, 1);
+  const newer = choice(false, 2);
+  const unrelated = choice(true, 99);
+  let saved = new Map<string, TurnFold>([["view:a", older], ["view:b", newer], ["other:unchanged", unrelated], ["view:b-alias", newer]]);
+  for (let index = 4; index < 7500; index++) saved.set(`view:unrelated-${index}`, { revision: 0 });
+  let local = new Map(saved);
+  const commit = (rebases: [string, string][]) => {
+    // MessageList commits once to the saved cache and adopts its exact snapshot.
+    saved = rebaseTurnFolds(saved, "view", new Map(rebases));
+    local = saved;
+  };
+  commit([["a", "b"]]);
+  commit([["unrelated-4", "new-alias"]]);
+  assert.equal(saved.size, 7500);
+  assert.equal(saved.has("view:a"), false);
+  assert.equal(saved.get("other:unchanged"), unrelated);
+  assert.equal(saved.has("view:b"), true);
+  const chosen = choice(true, 3);
+  saved = setTurnFold(saved, "view", "view:b", chosen);
+  local = saved;
+  assert.equal(local.get("view:b-alias"), chosen);
+  assert.equal(new Map(saved).get("view:b-alias"), chosen, "remount sees the same latest choice");
+  assert.deepEqual([...local], [...saved]);
+  assert.equal(saved.size, 7500);
+  assert.equal(saved.has("view:a"), false, "choosing a retained alias does not restore an evicted one");
+  assert.equal(saved.get("other:unchanged"), unrelated);
+});

package/web/src/turns.ts

@@ -0,0 +1,178 @@
+import type { Item } from "./transcript.ts";
+import { userTextSummary } from "./user-text.ts";
+
+export type TranscriptTurn = {
+  key: string;
+  items: Item[];
+  summary: string;
+  result?: Extract<Item, { kind: "result" }>;
+  active: boolean;
+  queued: boolean;
+  latest?: boolean;
+  error?: string;
+};
+
+/** Input boundaries define UI turns; SDK results update their owners without regrouping inputs. */
+export function groupTurns(items: Item[], active: boolean, atLatest = false): TranscriptTurn[] {
+  const turns: TranscriptTurn[] = [];
+  const prompts = new Map<string, TranscriptTurn>();
+  const completed = new Set<TranscriptTurn>();
+  const replied = new Set<TranscriptTurn>();
+  const summarized = new Set<TranscriptTurn>();
+  let current: TranscriptTurn | undefined;
+  for (const item of items) {
+    if (item.kind === "result") {
+      const owners = new Set((item.userMessageIds ?? []).map((id) => prompts.get(id)).filter((turn) => turn !== undefined));
+      // One SDK run may consume several UI turns. Keep one fee/result row, on
+      // the latest consumed input, and never close a still-queued later input.
+      const owner = turns.findLast((turn) => owners.has(turn)) ?? current;
+      if (owner) {
+        if (!owners.size) owners.add(owner);
+        for (const turn of owners) {
+          completed.add(turn);
+          turn.error = item.ok ? undefined : item.error || "本轮执行失败";
+        }
+        owner.result = item;
+        owner.items.push(item);
+        continue;
+      }
+    }
+    if (!current || (item.kind === "user" ? replied.has(current) || completed.has(current) : completed.has(current))) {
+      current = { key: item.key, items: [], summary: "后台调用", active: false, queued: false };
+      turns.push(current);
+    }
+    current.items.push(item);
+    if (item.kind === "user") {
+      if (!summarized.has(current)) {
+        const summary = userTextSummary(item.text);
+        if (summary) {
+          current.summary = summary.slice(0, 120);
+          summarized.add(current);
+        } else if (item.images) {
+          current.summary = "图片输入";
+          summarized.add(current);
+        }
+        else if (current.items.length === 1) current.summary = "会话输入";
+      }
+      prompts.set(item.key, current);
+    } else if (item.kind === "result") {
+      current.result = item;
+      current.error = item.ok ? undefined : item.error || "本轮执行失败";
+      completed.add(current);
+    } else {
+      replied.add(current);
+      if (item.kind === "notice" && item.tone === "error") {
+        current.error = item.text;
+        if (!current.items.some((other) => other.kind === "user")) current.summary = "执行失败";
+      }
+    }
+  }
+  if (active) {
+    // A foreground tool can still be running above newer queued inputs.
+    const executing = turns.findLast((turn) => !completed.has(turn) && turn.items.some((item) =>
+      ((item.kind === "text" || item.kind === "thinking") && item.streaming)
+      || (item.kind === "tool" && !item.result && (!item.task || item.task.status === "running"))));
+    const start = executing ? turns.indexOf(executing) : turns.length - 1;
+    for (let index = start; index >= 0 && index < turns.length; index++) {
+      const turn = turns[index]!;
+      if (completed.has(turn) || turn.error) continue;
+      turn.active = true;
+      turn.queued = index > start && !replied.has(turn);
+    }
+  }
+  // Only the real conversation tail stays open after completion. An older
+  // history page's last visible turn is not necessarily the latest turn.
+  if (atLatest && turns.length) turns[turns.length - 1]!.latest = true;
+  return turns;
+}
+
+export function defaultTurnCollapsed(turn: TranscriptTurn): boolean {
+  return !turn.active && !turn.latest && !turn.error;
+}
+
+/** Default folds hide the process but retain the final assistant reply. An
+ * explicit fold always hides the whole turn, including the latest reply.
+ * Return original items so row/annotation identities stay the same when the
+ * process is expanded. */
+export function visibleTurnItems(turn: TranscriptTurn, folded?: boolean): Item[] {
+  const collapsed = folded ?? defaultTurnCollapsed(turn);
+  if (!collapsed) return turn.items;
+  if (folded === true) return [];
+  return trailingReply(turn);
+}
+
+/** The trailing text suffix of a turn, with result footers skipped. */
+function trailingReply(turn: TranscriptTurn): Item[] {
+  let end = turn.items.length;
+  while (end && turn.items[end - 1]!.kind === "result") end--;
+  const last = turn.items[end - 1];
+  // Do not pull an earlier commentary forward after a tool-only completion,
+  // notice, or unfinished draft. Result rows are the only footer to skip.
+  if (last?.kind !== "text" || last.streaming) return [];
+  let start = end - 1;
+  // Transcript text keys are `${frameUuid}:${blockIndex}`. A reply can contain
+  // several text blocks; keep its entire trailing text suffix, not just one.
+  const frame = /^(.*):\d+$/.exec(last.key)?.[1];
+  while (frame && start > 0) {
+    const item = turn.items[start - 1]!;
+    if (item.kind !== "text" || item.streaming || /^(.*):\d+$/.exec(item.key)?.[1] !== frame) break;
+    start--;
+  }
+  return turn.items.slice(start, end);
+}
+
+/** A paged window can start inside a turn. Match its surviving items when an
+ * earlier prompt arrives so explicit folds and header anchors follow that turn. */
+export function turnRebases(previous: TranscriptTurn[], current: TranscriptTurn[]): Map<string, string> {
+  const owners = new Map(current.flatMap((turn) => turn.items.map((item) => [item.key, turn.key] as const)));
+  const rebases = new Map<string, string>();
+  for (const turn of previous) {
+    const next = turn.items.map((item) => owners.get(item.key)).find((key) => key !== undefined);
+    if (next && next !== turn.key) rebases.set(turn.key, next);
+  }
+  return rebases;
+}
+
+export function rebaseTurnRow(key: string, rebases: ReadonlyMap<string, string>): string {
+  for (const prefix of ["turn-", "changes-", "running-"]) {
+    if (key.startsWith(prefix)) return prefix + (rebases.get(key.slice(prefix.length)) ?? key.slice(prefix.length));
+  }
+  return key;
+}
+
+/** Aliases retain the revision of the user's choice. Creating an alias is not a
+ * new choice: a later merge must still prefer the most recent explicit action. */
+export type TurnFold = { collapsed?: boolean; revision: number };
+
+/** All known aliases share one choice object, including default-only aliases.
+ * Update the whole group before a view unmounts; a remount may start at any alias. */
+export function setTurnFold(folds: Map<string, TurnFold>, namespace: string, key: string, choice: TurnFold): Map<string, TurnFold> {
+  const previous = folds.get(key);
+  const next = new Map(folds);
+  if (previous) for (const [alias, value] of folds) {
+    if (alias.startsWith(`${namespace}:`) && value === previous) next.set(alias, choice);
+  }
+  next.delete(key); next.set(key, choice);
+  while (next.size > 7500) next.delete(next.keys().next().value!);
+  return next;
+}
+
+export function rebaseTurnFolds(folds: Map<string, TurnFold>, namespace: string, rebases: ReadonlyMap<string, string>): Map<string, TurnFold> {
+  let next = folds;
+  for (const [oldKey, newKey] of rebases) {
+    const old = `${namespace}:${oldKey}`;
+    const key = `${namespace}:${newKey}`;
+    const value = next.get(old);
+    const target = next.get(key);
+    if (value && value === target) continue;
+    const winner = value && target ? value.revision > target.revision ? value : target : value ?? target ?? { revision: 0 };
+    if (next === folds) next = new Map(folds);
+    for (const [alias, choice] of next) {
+      if (alias.startsWith(`${namespace}:`) && (choice === value || choice === target)) next.set(alias, winner);
+    }
+    next.set(old, winner); next.set(key, winner);
+  }
+  if (next.size > 7500 && next === folds) next = new Map(folds);
+  while (next.size > 7500) next.delete(next.keys().next().value!);
+  return next;
+}

package/web/src/ui/Button.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+
+export function cx(...parts: (string | false | null | undefined)[]) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "outline-danger";
+export type ButtonSize = "sm" | "md";
+
+/** Shared control geometry: every button, select trigger and input uses these heights. */
+export const CONTROL = {
+  sm: "h-8 md:h-7 px-2.5 text-xs gap-1.5",
+  md: "h-10 md:h-8 px-3 text-sm gap-2",
+} as const;
+
+const VARIANT: Record<ButtonVariant, string> = {
+  primary: "bg-accent text-accent-text hover:bg-accent-hover border border-transparent shadow-sm",
+  secondary: "bg-surface text-text border border-border hover:bg-surface-2 hover:border-muted/40",
+  ghost: "text-muted hover:text-text hover:bg-surface-2 border border-transparent",
+  danger: "bg-danger text-bg border border-transparent hover:opacity-90",
+  "outline-danger": "text-danger border border-border bg-surface hover:border-danger/60 hover:bg-danger/5",
+};
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: ReactNode;
+  /** Square, icon-only button. */
+  iconOnly?: boolean;
+  loading?: boolean;
+};
+
+export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
+  { variant = "secondary", size = "md", icon, iconOnly, loading, className, children, disabled, type = "button", ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      disabled={disabled || loading}
+      className={cx(
+        "inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors [&>svg]:shrink-0",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:pointer-events-none disabled:opacity-45",
+        CONTROL[size],
+        iconOnly && (size === "sm" ? "w-8 px-0! md:w-7" : "w-10 px-0! md:w-8"),
+        VARIANT[variant],
+        className,
+      )}
+      {...rest}
+    >
+      {loading ? <Spinner /> : icon}
+      {children}
+    </button>
+  );
+});
+
+export function Spinner({ className }: { className?: string }) {
+  return <span className={cx("inline-block size-3.5 animate-spin rounded-full border-2 border-current border-t-transparent", className)} aria-hidden />;
+}