@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/message-cache.test.ts

@@ -0,0 +1,208 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import type { LiveEvent, SdkMessageLike } from "@shared/protocol.ts";
+import { MESSAGE_LIMIT, SESSION_BYTES, SESSION_LIMIT, TOTAL_BYTES, boundedReplay, displayEvent } from "@shared/message-window.ts";
+import { boundSession, boundSessions, browsingBase, compactEvents, edgeMessage, mergePage, sessionWeight } from "./message-cache.ts";
+import type { SessionLive } from "./live-merge.ts";
+import { Transcript } from "./transcript.ts";
+
+const msg = (id: number, text = "hello"): SdkMessageLike => ({ type: "user", uuid: `u${id}`, message: { content: text } });
+const event = (id: number, text?: string): LiveEvent => ({ k: "sdk", m: msg(id, text) });
+const session = (events: LiveEvent[] = []): SessionLive => ({ seq: events.length, resetCount: 1, snapshot: { state: "running", pending: [], planMode: false, tasks: [], crons: [] }, events });
+
+test("history and live replay share the 1,500-record cap", () => {
+  const s = session(Array.from({ length: 1400 }, (_, i) => event(i + 100)));
+  s.history = { ...mergePage(undefined, { items: Array.from({ length: 300 }, (_, i) => msg(i)), generation: "g" }, "latest", 1), source: "main" };
+  const next = boundSession(s);
+  assert.ok(next.history!.items.length + next.events.length <= MESSAGE_LIMIT);
+  assert.equal(next.history!.items[0]!.uuid, "u0");
+  assert.equal(next.evicted, true);
+});
+
+test("a long running turn reaches a stable payload and count ceiling", () => {
+  let s = session();
+  for (let batch = 0; batch < 8; batch++) {
+    s = boundSession({ ...s, events: [...s.events, ...Array.from({ length: 500 }, (_, i) => event(batch * 500 + i, "x".repeat(20_000)))] });
+    assert.ok(sessionWeight(s) <= SESSION_BYTES);
+    assert.ok(s.events.length <= MESSAGE_LIMIT);
+  }
+  assert.equal((s.events.at(-1) as Extract<LiveEvent, { k: "sdk" }>).m.uuid, "u3999");
+});
+
+test("ordinary window eviction preserves the full active streaming checkpoint", () => {
+  const s = boundSession(session([
+    { k: "delta", msgId: "active", index: 0, parent: null, kind: "text", text: "prefix " },
+    ...Array.from({ length: MESSAGE_LIMIT + 100 }, (_, i) => event(i)),
+    { k: "delta", msgId: "active", index: 0, parent: null, kind: "text", text: "suffix" },
+  ]));
+  assert.ok(s.events.length <= MESSAGE_LIMIT);
+  assert.ok(sessionWeight(s) <= SESSION_BYTES);
+  const draft = new Transcript().update(undefined, s.events).find((i) => i.key === "draft-active:0");
+  assert.equal(draft?.kind, "text");
+  assert.equal(draft && "text" in draft ? draft.text : undefined, "prefix suffix");
+});
+
+test("LRU releases the sixth session and obeys the global byte budget", () => {
+  const sessions = Object.fromEntries(Array.from({ length: 7 }, (_, i) => [String(i), { ...session([event(i)]), accessed: i }]));
+  const next = boundSessions(sessions, new Set(["0"]));
+  assert.equal(Object.keys(next).length, SESSION_LIMIT);
+  assert.ok(next["0"]);
+  assert.equal(next["1"], undefined);
+  assert.equal(next["2"], undefined);
+  const large = Object.fromEntries(Array.from({ length: 5 }, (_, i) => [String(i), boundSession({ ...session([event(i, "x".repeat(17_000_000))]), accessed: i })]));
+  const bounded = boundSessions(large, new Set(["4"]));
+  assert.ok(Object.values(bounded).reduce((n, s) => n + sessionWeight(s), 0) <= TOTAL_BYTES);
+});
+
+test("older browsing keeps its reading edge while newer paging advances after the window fills", () => {
+  const items = Array.from({ length: 1600 }, (_, i) => msg(i));
+  const page = { items, generation: "g" };
+  const older = boundSession({ ...session(Array.from({ length: 750 }, (_, i) => event(2000 + i))), history: mergePage(undefined, page, "older", 1) });
+  assert.equal(older.history!.items[0]!.uuid, "u0");
+  assert.equal(older.history!.newer, "trimmed");
+  const newer = boundSession({ ...session(), history: mergePage(undefined, page, "newer", 2) });
+  assert.equal(newer.history!.items.at(-1)!.uuid, "u1599");
+  assert.equal(newer.history!.older, "trimmed");
+});
+
+test("compacted deltas preserve settlement, result order and release old Transcript references", () => {
+  const events: LiveEvent[] = [
+    { k: "delta", msgId: "m", index: 0, kind: "text", text: "he", parent: null },
+    { k: "delta", msgId: "m", index: 0, kind: "text", text: "llo", parent: null },
+    { k: "sdk", m: { type: "assistant", uuid: "a", message: { id: "m", content: [{ type: "text", text: "hello" }] } } },
+    { k: "sdk", m: { type: "result", uuid: "r", subtype: "success" } },
+  ];
+  const t = new Transcript();
+  const before = t.update(undefined, events);
+  const after = t.update(undefined, compactEvents(events));
+  assert.deepEqual(after, before);
+  const rebuilt = t.update([msg(10)], []);
+  assert.deepEqual(rebuilt.map((i) => i.key), ["u10"]);
+});
+
+test("reconnect replay cannot bypass the client window and preserves event seq", () => {
+  const events = Array.from({ length: 5000 }, (_, i) => ({ seq: i + 1, ev: event(i) }));
+  const bounded = boundedReplay(events);
+  assert.equal(bounded.length, MESSAGE_LIMIT);
+  assert.equal(bounded[0]!.seq, 3501);
+  assert.equal(bounded.at(-1)!.seq, 5000);
+});
+
+test("history edge follows overlapping replay order rather than the recent REST page", () => {
+  const s = session([event(1), event(2), event(3), event(4)]);
+  s.history = { ...mergePage(undefined, { items: [msg(3), msg(4)], generation: "g" }, "latest", 1), source: "main" };
+  assert.equal(edgeMessage(s, "first"), "u1");
+  s.events = [event(4), event(5)];
+  assert.equal(edgeMessage(s, "first"), "u3");
+});
+
+test("main history edges skip subagent replay UUIDs before and after the overlap", () => {
+  const subagent = (id: number): LiveEvent => ({ k: "sdk", m: { ...msg(id), parent_tool_use_id: "agent-tool" } });
+  const s = session([subagent(0), event(1), event(2), subagent(3)]);
+  s.history = { ...mergePage(undefined, { items: [msg(2)], generation: "g" }, "latest", 1), source: "main" };
+  assert.equal(edgeMessage(s, "first"), "u1");
+  assert.equal(edgeMessage(s, "last"), "u2");
+  assert.deepEqual(browsingBase(s)!.items.map((m) => m.uuid), ["u1", "u2"]);
+  s.history = { ...s.history, source: "agent", items: [msg(10), msg(11)] };
+  assert.equal(edgeMessage(s, "first"), "u10");
+  assert.equal(edgeMessage(s, "last"), "u11");
+});
+
+test("a full parent replay cannot evict the currently displayed older subagent", () => {
+  for (const text of ["hello", "x".repeat(40_000)]) {
+    const s = session(Array.from({ length: MESSAGE_LIMIT }, (_, i) => event(i, text)));
+    s.history = { ...mergePage(undefined, { items: [msg(-1, "old agent transcript")], generation: "g" }, "latest", 1), source: "older-agent" };
+    const next = boundSession(s);
+    assert.equal(next.history!.items[0]!.uuid, "u-1");
+    assert.ok(next.history!.items.length + next.events.length <= MESSAGE_LIMIT);
+    assert.ok(sessionWeight(next) <= SESSION_BYTES);
+    assert.equal(new Transcript({ parent: "older-agent-tool" }).update(next.history!.items, next.events)[0]?.key, "u-1");
+  }
+});
+
+test("large live attachments become hydratable previews without changing their identity", () => {
+  const ev = displayEvent({ k: "user", uuid: "image", text: "hello", ts: 1, imageData: [{ mediaType: "image/jpeg", data: "x".repeat(500_000) }] });
+  assert.equal(ev.k, "sdk");
+  if (ev.k === "sdk") {
+    assert.equal(ev.m.uuid, "image");
+    assert.ok(ev.m._deferred);
+    assert.ok(JSON.stringify(ev).length < 10_000);
+  }
+});
+
+test("entering history preserves the records between the replay edge and REST page", () => {
+  const s = session(Array.from({ length: 500 }, (_, i) => event(i + 100)));
+  s.history = { ...mergePage(undefined, { items: Array.from({ length: 100 }, (_, i) => msg(i + 500)), generation: "g" }, "latest", 1), source: "main" };
+  const merged = mergePage(browsingBase(s), { items: Array.from({ length: 100 }, (_, i) => msg(i)), generation: "g" }, "older", 2);
+  assert.deepEqual(merged.items.map((m) => m.uuid), Array.from({ length: 600 }, (_, i) => `u${i}`));
+});
+
+test("deferred completed blocks settle their full streaming preview", () => {
+  const items = new Transcript().update(undefined, [
+    { k: "delta", msgId: "m", index: 0, kind: "text", text: "x".repeat(5000), parent: null },
+    { k: "sdk", m: { type: "assistant", uuid: "a", _deferred: { bytes: 500_000 }, message: { id: "m", content: [{ type: "text", text: "x".repeat(2000) }] } } },
+  ]);
+  assert.equal(items.length, 1);
+  assert.equal(items[0]?.deferred?.uuid, "a");
+  assert.equal(items.some((i) => "streaming" in i && i.streaming), false);
+});
+
+test("history and replay show a shared compaction marker only once", () => {
+  const marker: SdkMessageLike = { type: "system", subtype: "compact_boundary", uuid: "b" };
+  const items = new Transcript().update([msg(1), marker, msg(2)], [{ k: "sdk", m: marker }]);
+  assert.equal(items.filter((i) => i.key === "compact-b").length, 1);
+});
+
+
+test("child replay cannot starve visible main history", () => {
+  const s = session(Array.from({ length: MESSAGE_LIMIT }, (_, i) => ({ k: "sdk", m: { ...msg(i, "x".repeat(40_000)), parent_tool_use_id: "child" } })));
+  s.history = { ...mergePage(undefined, { items: [msg(-1)], generation: "g" }, "latest", 1), source: "main" };
+  const next = boundSession(s);
+  assert.equal(next.history!.items[0]!.uuid, "u-1");
+  assert.ok(new Transcript().update(next.history!.items, next.events).some((i) => i.key === "u-1"));
+  assert.ok(sessionWeight(next) <= SESSION_BYTES);
+});
+
+test("explicit historical detail survives either retained edge and a full replay", () => {
+  for (const direction of ["older", "newer"] as const) {
+    const target = { ...msg(100, "x".repeat(12_000_000)), _hydrated: true };
+    const s = session(Array.from({ length: 1200 }, (_, i) => event(i + 2000, "x".repeat(20_000))));
+    s.history = mergePage(undefined, { items: [...Array.from({ length: 100 }, (_, i) => msg(i)), target, ...Array.from({ length: 100 }, (_, i) => msg(i + 101))], generation: "g" }, direction, 1);
+    const next = boundSession(s, { protectedMessage: target.uuid });
+    assert.ok(next.history!.items.includes(target));
+    assert.ok(sessionWeight(next) <= SESSION_BYTES);
+    assert.ok(next.events.length + next.history!.items.length <= MESSAGE_LIMIT);
+  }
+});
+
+test("explicit detail retains live attribution and active checkpoints or rejects", () => {
+  const target = { ...msg(1, "x".repeat(12_000_000)), _hydrated: true, parent_tool_use_id: "child" };
+  const checkpoint: LiveEvent = { k: "delta", msgId: "active", parent: null, index: 0, kind: "text", text: "prefix", checkpoint: true };
+  const s = session([{ k: "sdk", m: target }, ...Array.from({ length: 1500 }, (_, i) => event(i + 2)), checkpoint]);
+  const next = boundSession(s, { protectedMessage: target.uuid });
+  assert.ok(next.events.some((e) => e.k === "sdk" && e.m === target));
+  assert.ok(next.events.some((e) => e.k === "delta" && e.text === "prefix"));
+  assert.ok(sessionWeight(next) <= SESSION_BYTES);
+  assert.throws(() => boundSession(session([{ k: "sdk", m: { ...msg(1, "x".repeat(SESSION_BYTES)), _hydrated: true } }]), { protectedMessage: "u1" }), /cannot fit/);
+  assert.throws(() => boundSession(session(), { protectedMessage: "missing" }), /cannot fit/);
+});
+
+test("freezing visible history retains system records once in replay order", () => {
+  const local: SdkMessageLike = { type: "system", subtype: "local_command", uuid: "local", content: "command output" };
+  const compact: SdkMessageLike = { type: "system", subtype: "compact_boundary", uuid: "compact" };
+  const s = session([event(1), { k: "sdk", m: local }, { k: "sdk", m: compact }, event(2), event(3)]);
+  s.history = { ...mergePage(undefined, { items: [msg(3)], generation: "g" }, "latest", 1), source: "main" };
+  const frozen = browsingBase(s)!;
+  assert.deepEqual(frozen.items.map((m) => m.uuid), ["u1", "local", "compact", "u2", "u3"]);
+  const before = new Transcript().update(s.history.items, s.events);
+  const after = new Transcript().update(frozen.items, []);
+  assert.deepEqual(after, before);
+});
+
+
+test("freezing a UUID-less system record does not copy its replay prefix twice", () => {
+  const system: SdkMessageLike = { type: "system", subtype: "compact_boundary" };
+  const s = session([event(1), { k: "sdk", m: system }, event(2)]);
+  s.history = { ...mergePage(undefined, { items: [msg(2)], generation: "g" }, "latest", 1), source: "main" };
+  assert.equal(browsingBase(s)!.items.filter((m) => m === system).length, 1);
+});

package/web/src/message-cache.ts

@@ -0,0 +1,158 @@
+import type { HistoryPage, LiveEvent, SdkMessageLike } from "@shared/protocol.ts";
+import { MESSAGE_LIMIT, SESSION_BYTES, SESSION_LIMIT, TOTAL_BYTES, compactStreamEvents, contentBytes, displayEvent, eventUuid } from "@shared/message-window.ts";
+import type { SessionLive } from "./live-merge.ts";
+import { matchesMessageTarget } from "./message-bodies.ts";
+import { mergeAgentOwners, retainAgentOwners } from "./agent-owners.ts";
+
+export type HistoryWindow = HistoryPage & { source?: string; retain?: "older" | "newer"; mode: "latest" | "history"; loading?: boolean; error?: string; request: number };
+
+/** State is already in the snapshot; stream checkpoints remain safe to trim. */
+export function compactEvents(events: LiveEvent[]): LiveEvent[] {
+  return compactStreamEvents(events
+    .filter((e) => !["settings", "state", "pending", "resolved", "tasks", "agent_tasks", "crons"].includes(e.k))
+    .map(displayEvent));
+}
+
+export function messageUuid(ev: LiveEvent): string | undefined {
+  if (ev.k === "sdk" && (ev.m.parent_tool_use_id || ev.m.type !== "user" && ev.m.type !== "assistant")) return undefined;
+  return eventUuid(ev);
+}
+
+const weights = new WeakMap<object, number>();
+export function weight(value: object): number {
+  let size = weights.get(value);
+  if (size === undefined) { size = contentBytes(value); weights.set(value, size); }
+  return size;
+}
+
+export function sessionWeight(s: SessionLive): number {
+  return s.events.reduce((n, e) => n + weight(e), 0) + (s.history?.items.reduce((n, m) => n + weight(m), 0) ?? 0);
+}
+
+/** Both history pages and live replay share one budget; neither can retain a hidden full transcript. */
+export type MessageBudget = { protectedMessage?: string; protectedMessages?: string[] };
+
+/** Protect one explicit detail request for this budget pass. Reject an unretainable
+ * target rather than reporting success with its preview/body already discarded. */
+export function boundSession(s: SessionLive, budget: MessageBudget = {}): SessionLive {
+  const owners = mergeAgentOwners(s.agentOwners, s.events, s.snapshot.agentTasks);
+  let events = s.events;
+  let history = s.history;
+  let bytes = events.reduce((n, e) => n + weight(e), 0);
+  const historical = history?.mode === "history";
+  // The displayed main OR agent file can be older than unrelated replay.
+  // Reserve room for its visible records even while following the live tail.
+  const reserveHistory = !!history?.items.length;
+  const targets = new Set([...(budget.protectedMessages ?? []), ...(budget.protectedMessage ? [budget.protectedMessage] : [])]);
+  const protectMessage = (m: SdkMessageLike) => [...targets].some((uuid) => matchesMessageTarget(m, uuid));
+  const protectedHistory = history?.items.filter(protectMessage) ?? [];
+  const protectedHistoryBytes = protectedHistory.reduce((n, m) => n + weight(m), 0);
+  const protectedEvent = (e: LiveEvent) => e.k === "sdk" ? protectMessage(e.m) : targets.has(eventUuid(e) ?? "");
+  const targetEventsBytes = events.filter(protectedEvent).reduce((n, e) => n + weight(e), 0);
+  const eventLimit = Math.min(MESSAGE_LIMIT - protectedHistory.length, Math.max(reserveHistory ? MESSAGE_LIMIT / 2 : MESSAGE_LIMIT, events.filter(protectedEvent).length));
+  const eventBudget = Math.min(SESSION_BYTES - protectedHistoryBytes, Math.max(reserveHistory ? SESSION_BYTES / 2 : SESSION_BYTES, targetEventsBytes));
+  if (events.length > eventLimit || bytes > eventBudget) {
+    events = compactEvents(events);
+    bytes = events.reduce((n, e) => n + weight(e), 0);
+  }
+  // Compaction places cumulative active stream checkpoints at the tail. Keep
+  // those checkpoints alongside the explicitly requested body or reject it.
+  const keepEvent = (e: LiveEvent) => protectedEvent(e) || targets.size > 0 && e.k === "delta" && !!e.checkpoint;
+  let removed = 0;
+  const retainedEvents = events.filter((e) => {
+    if (events.length - removed <= eventLimit && bytes <= eventBudget || keepEvent(e)) return true;
+    bytes -= weight(e); removed++; return false;
+  });
+  let evicted = s.evicted || removed > 0;
+  if (removed) events = retainedEvents;
+  if (history) {
+    let items = history.items;
+    let size = items.reduce((n, m) => n + weight(m), 0);
+    let from = 0;
+    let to = items.length;
+    while (from < to && (to - from + events.length > MESSAGE_LIMIT || size + bytes > SESSION_BYTES)) {
+      // Keep the older edge while reading backwards, the newer edge for the live view.
+      const protectFirst = protectMessage(items[from]!);
+      const protectLast = protectMessage(items[to - 1]!);
+      if (protectFirst && protectLast) break;
+      if (protectFirst || historical && history.retain === "older" && !protectLast) size -= weight(items[--to]!);
+      else size -= weight(items[from++]!);
+    }
+    if (from || to < items.length) {
+      items = items.slice(from, to);
+      history = { ...history, items, older: from ? "trimmed" : history.older, newer: to < history.items.length ? "trimmed" : history.newer };
+      evicted = true;
+    }
+  }
+  if (targets.size && (
+    events.length + (history?.items.length ?? 0) > MESSAGE_LIMIT
+    || bytes + (history?.items.reduce((n, m) => n + weight(m), 0) ?? 0) > SESSION_BYTES
+    || [...targets].some((uuid) => !events.some((e) => e.k === "sdk" ? matchesMessageTarget(e.m, uuid) : eventUuid(e) === uuid) && !history?.items.some((m) => matchesMessageTarget(m, uuid)))
+  )) throw new Error("Requested message cannot fit in the message window");
+  const agentOwners = retainAgentOwners(owners, events, s.snapshot.agentTasks);
+  const sameOwners = Object.keys(agentOwners).length === Object.keys(s.agentOwners ?? {}).length
+    && Object.entries(agentOwners).every(([owner, agent]) => s.agentOwners?.[owner] === agent);
+  return events === s.events && history === s.history && evicted === s.evicted && sameOwners ? s : { ...s, events, history, evicted, agentOwners };
+}
+
+export function boundSessions(sessions: Record<string, SessionLive>, protectedIds: ReadonlySet<string>): Record<string, SessionLive> {
+  const entries = Object.entries(sessions).sort((a, b) => (a[1].accessed ?? 0) - (b[1].accessed ?? 0));
+  let count = entries.length;
+  let bytes = entries.reduce((n, [, s]) => n + sessionWeight(s), 0);
+  let next = sessions;
+  for (const [id, s] of entries) {
+    if (count <= SESSION_LIMIT && bytes <= TOTAL_BYTES) break;
+    if (protectedIds.has(id)) continue;
+    if (next === sessions) next = { ...sessions };
+    delete next[id]; count--; bytes -= sessionWeight(s);
+  }
+  return next;
+}
+
+export function mergePage(current: HistoryWindow | undefined, page: HistoryPage, direction: "latest" | "older" | "newer", request: number): HistoryWindow {
+  const same = current?.generation === page.generation && direction !== "latest";
+  const incoming = direction === "older" ? [...page.items, ...(same ? current!.items : [])] : [...(same ? current!.items : []), ...page.items];
+  const seen = new Set<string>();
+  const items = incoming.filter((m) => !m.uuid || !seen.has(m.uuid) && !!seen.add(m.uuid));
+  // Page cursors are replaced with the retained edge UUID when the cache trims a page.
+  return { items, generation: page.generation, retain: direction === "older" ? "older" : "newer", mode: direction === "latest" ? "latest" : "history", request,
+    older: direction === "newer" && same ? current!.older : page.older,
+    newer: direction === "older" && same ? current!.newer : page.newer };
+}
+
+export function edgeMessage(s: SessionLive, edge: "first" | "last"): string | undefined {
+  const historyIds = s.history?.items.map((m) => m.uuid).filter((id): id is string => !!id) ?? [];
+  if (s.history?.mode === "history" || s.history?.source && s.history.source !== "main") return edge === "first" ? historyIds[0] : historyIds.at(-1);
+  const eventIds = s.events.map(messageUuid).filter((id): id is string => !!id);
+  const overlap = eventIds.findIndex((id) => historyIds.includes(id));
+  const prefix = overlap > 0 ? eventIds.slice(0, overlap) : historyIds.length ? [] : eventIds;
+  const ids = [...new Set([...prefix, ...historyIds, ...eventIds])];
+  return edge === "first" ? ids[0] : ids.at(-1);
+}
+
+/** Freeze the displayed recent records before entering history mode, avoiding a gap
+ * between older replay-only messages and the more recent REST page. */
+export function browsingBase(s: SessionLive): HistoryWindow | undefined {
+  const history = s.history;
+  if (!history || history.mode === "history" || history.source && history.source !== "main") return history;
+  const live: SdkMessageLike[] = [];
+  for (const ev of s.events) {
+    if (ev.k === "sdk" && (ev.m.type === "user" || ev.m.type === "assistant" || ev.m.type === "system" && ["compact_boundary", "local_command"].includes(ev.m.subtype ?? "")) && !ev.m.parent_tool_use_id) live.push(ev.m);
+    else if (ev.k === "user") live.push({ type: "user", uuid: ev.uuid, timestamp: new Date(ev.ts).toISOString(), ...(ev.scheduled ? { scheduled: true } : {}), message: { content: [
+      ...(ev.imageData ?? []).map((img) => ({ type: "image", source: { media_type: img.mediaType, data: img.data } })),
+      { type: "text", text: ev.text },
+    ] } });
+  }
+  const ids = new Set(history.items.map((m) => m.uuid));
+  const overlap = live.findIndex((m) => ids.has(m.uuid));
+  const prefix = overlap > 0 ? live.slice(0, overlap) : history.items.length ? [] : live;
+  const seen = new Set<string>();
+  const records = new Set<SdkMessageLike>();
+  const items = [...prefix, ...history.items, ...live].filter((m) => {
+    if (records.has(m) || m.uuid && seen.has(m.uuid)) return false;
+    records.add(m);
+    if (m.uuid) seen.add(m.uuid);
+    return true;
+  });
+  return { ...history, items };
+}

package/web/src/message-font-size.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createMessageFontPreference, MESSAGE_FONT_STORAGE_KEY, parseMessageFontSize } from "./message-font-size.ts";
+
+test("message font defaults to the current large size and rejects invalid stored values", () => {
+  for (const saved of [null, "", "huge", "{\"size\":\"small\"}"]) {
+    assert.equal(createMessageFontPreference({ getItem: () => saved, setItem() {} }).getSnapshot(), "large");
+  }
+  assert.equal(parseMessageFontSize("small"), "small");
+  assert.equal(parseMessageFontSize("medium"), "medium");
+});
+
+test("choice persists across preference recreation and captures readers before notifying them", () => {
+  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 = createMessageFontPreference(storage);
+  const events: string[] = [];
+  const unsubscribe = preference.subscribe(() => events.push(`render:${preference.getSnapshot()}`), () => events.push(`anchor:${preference.getSnapshot()}`));
+  preference.set("small");
+  assert.deepEqual(events, ["anchor:large", "render:small"]);
+  assert.equal(data.get(MESSAGE_FONT_STORAGE_KEY), "small");
+  assert.equal(createMessageFontPreference(storage).getSnapshot(), "small");
+  preference.set("small");
+  assert.equal(events.length, 2, "same size does not invalidate transcript measurements");
+  unsubscribe();
+  preference.set("medium");
+  assert.equal(events.length, 2, "unmounted readers are not retained");
+});
+
+test("unavailable storage keeps a working in-memory preference, and cross-tab restore does not rewrite storage", () => {
+  let writes = 0;
+  const preference = createMessageFontPreference({ getItem() { throw new Error("blocked"); }, setItem() { writes++; throw new Error("blocked"); } });
+  assert.equal(preference.getSnapshot(), "large");
+  preference.set("medium");
+  assert.equal(preference.getSnapshot(), "medium");
+  preference.restore("small");
+  assert.equal(preference.getSnapshot(), "small");
+  preference.restore(null);
+  assert.equal(preference.getSnapshot(), "large");
+  assert.equal(writes, 1);
+});

package/web/src/message-font-size.ts

@@ -0,0 +1,57 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+export type MessageFontSize = "small" | "medium" | "large";
+export const MESSAGE_FONT_STORAGE_KEY = "claude-ide:message-font-size";
+export const MESSAGE_FONT_OPTIONS: { value: MessageFontSize; label: string; bodyRem: number }[] = [
+  { value: "small", label: "小", bodyRem: 0.875 },
+  { value: "medium", label: "中", bodyRem: 0.9375 },
+  { value: "large", label: "大", bodyRem: 1 },
+];
+
+type FontStorage = Pick<Storage, "getItem" | "setItem">;
+
+export function parseMessageFontSize(value: unknown): MessageFontSize {
+  return value === "small" || value === "medium" ? value : "large";
+}
+
+/** A shared local preference, independent of session mounts and transcript caches. */
+export function createMessageFontPreference(storage?: FontStorage) {
+  let size: MessageFontSize = "large";
+  try { size = parseMessageFontSize(storage?.getItem(MESSAGE_FONT_STORAGE_KEY)); } catch { /* Use the existing large text. */ }
+  const subscriptions = new Set<{ notify: () => void; beforeChange?: () => void }>();
+  const update = (next: MessageFontSize) => {
+    if (next === size) return;
+    // Readers record their row position before React applies the new line heights.
+    for (const subscription of subscriptions) subscription.beforeChange?.();
+    size = next;
+    for (const subscription of subscriptions) subscription.notify();
+  };
+  return {
+    getSnapshot: () => size,
+    subscribe(notify: () => void, beforeChange?: () => void) {
+      const subscription = { notify, beforeChange };
+      subscriptions.add(subscription);
+      return () => { subscriptions.delete(subscription); };
+    },
+    set(next: MessageFontSize) {
+      try { storage?.setItem(MESSAGE_FONT_STORAGE_KEY, next); } catch { /* Keep the in-memory preference. */ }
+      update(next);
+    },
+    restore(value: unknown) { update(parseMessageFontSize(value)); },
+  };
+}
+
+let storage: FontStorage | undefined;
+try { storage = typeof localStorage === "undefined" ? undefined : localStorage; } catch { /* Storage may be disabled. */ }
+const preference = createMessageFontPreference(storage);
+if (typeof window !== "undefined") window.addEventListener("storage", (event) => {
+  if (event.storageArea && event.storageArea !== storage) return;
+  if (event.key === MESSAGE_FONT_STORAGE_KEY || event.key === null) preference.restore(event.newValue);
+});
+
+export const setMessageFontSize = preference.set;
+
+export function useMessageFontSize(beforeChange?: () => void): MessageFontSize {
+  const subscribe = useCallback((notify: () => void) => preference.subscribe(notify, beforeChange), [beforeChange]);
+  return useSyncExternalStore(subscribe, preference.getSnapshot, () => "large");
+}

package/web/src/message-time.test.ts

@@ -0,0 +1,32 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { formatMessageTime, isNewMessageTime } from "./message-time.ts";
+
+test("message times keep a machine-readable timestamp and add the date when needed", () => {
+  const now = new Date(2026, 9, 22, 12, 0, 0).getTime();
+  const sameDay = new Date(2026, 9, 22, 9, 5, 0).getTime();
+  const older = new Date(2025, 0, 2, 3, 4, 0).getTime();
+
+  const recent = formatMessageTime(sameDay, now);
+  assert.ok(recent);
+  assert.equal(recent.dateTime, new Date(sameDay).toISOString());
+  assert.equal(recent.lines.length, 1, "same-day messages show only the time");
+  assert.ok(recent.lines[0]!.length > 0);
+  assert.ok(recent.title.length > 0);
+
+  const past = formatMessageTime(older, now);
+  assert.ok(past);
+  assert.equal(past.lines.length, 2, "older messages stack the date above the time");
+  assert.match(past.lines[0]!, /25/);
+  assert.match(past.title, /2025/);
+
+  assert.equal(formatMessageTime(undefined), undefined);
+  assert.equal(formatMessageTime(Number.NaN), undefined);
+});
+
+test("only the first item of a message run gets a time label", () => {
+  assert.equal(isNewMessageTime(1000, undefined), true);
+  assert.equal(isNewMessageTime(1000, 1000), false, "blocks from one message share its timestamp");
+  assert.equal(isNewMessageTime(1001, 1000), true);
+  assert.equal(isNewMessageTime(undefined, 1000), false);
+});

package/web/src/message-time.ts

@@ -0,0 +1,26 @@
+/** Small, local-time label for a message row. Recent messages show HH:MM; older
+ * ones stack the date above it so the narrow left gutter does not clip it. */
+const timeFormat = new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" });
+const monthDayFormat = new Intl.DateTimeFormat(undefined, { month: "2-digit", day: "2-digit" });
+// Two-digit years keep the gutter narrow; the full year stays in the title.
+const yearMonthDayFormat = new Intl.DateTimeFormat(undefined, { year: "2-digit", month: "2-digit", day: "2-digit" });
+const fullFormat = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "medium" });
+
+/** Consecutive items of one SDK message share its timestamp; label the run once. */
+export function isNewMessageTime(ts: number | undefined, previousTs: number | undefined): boolean {
+  return ts !== undefined && ts !== previousTs;
+}
+
+export function formatMessageTime(ts: number | undefined, now = Date.now()): { lines: string[]; title: string; dateTime: string } | undefined {
+  if (ts === undefined || !Number.isFinite(ts)) return undefined;
+  const date = new Date(ts);
+  if (Number.isNaN(date.getTime())) return undefined;
+  const current = new Date(now);
+  const sameDay = date.getFullYear() === current.getFullYear()
+    && date.getMonth() === current.getMonth()
+    && date.getDate() === current.getDate();
+  const sameYear = date.getFullYear() === current.getFullYear();
+  const time = timeFormat.format(date);
+  const day = sameDay ? undefined : (sameYear ? monthDayFormat : yearMonthDayFormat).format(date);
+  return { lines: day ? [day, time] : [time], title: fullFormat.format(date), dateTime: date.toISOString() };
+}

package/web/src/notify.ts

@@ -0,0 +1,132 @@
+import { create } from "zustand";
+import { currentPushSubscription } from "./pwa.ts";
+
+/**
+ * In-page notifications: what the app shows while a page is open, independent of Web Push.
+ * Main thread calls notifyInPage() when a session finishes or starts waiting for the user.
+ */
+
+export type NotifyKind = "done" | "attention" | "error";
+export type NotifyKinds = Record<NotifyKind, boolean>;
+export const NOTIFY_KIND_LABELS: Record<NotifyKind, string> = {
+  done: "会话完成",
+  attention: "等待处理（提问、计划审批）",
+  error: "出错",
+};
+
+export type InPageNotice = {
+  kind: NotifyKind;
+  title: string;
+  body?: string;
+  /** Same-origin path to open on click, e.g. /p/<pid>/s/<sid>. */
+  url?: string;
+  /** Same tag replaces the previous toast / system notification. */
+  tag?: string;
+};
+
+// ---------- per-device preferences ----------
+
+const KINDS_KEY = "cide.notify.kinds";
+const ALL_ON: NotifyKinds = { done: true, attention: true, error: true };
+
+export function getNotifyKinds(): NotifyKinds {
+  try {
+    const v = JSON.parse(localStorage.getItem(KINDS_KEY) ?? "null") as Partial<NotifyKinds> | null;
+    return { ...ALL_ON, ...(v ?? {}) };
+  } catch {
+    return ALL_ON;
+  }
+}
+
+export function setNotifyKinds(kinds: NotifyKinds): void {
+  try {
+    localStorage.setItem(KINDS_KEY, JSON.stringify(kinds));
+  } catch {
+    // private mode: keep defaults
+  }
+}
+
+// ---------- toasts ----------
+
+export type Toast = InPageNotice & { id: number };
+
+export const useToasts = create<{ toasts: Toast[] }>(() => ({ toasts: [] }));
+
+let nextId = 1;
+const timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+export function dismissToast(id: number) {
+  clearTimeout(timers.get(id));
+  timers.delete(id);
+  useToasts.setState((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }));
+}
+
+export function showToast(n: InPageNotice, ms = 8000): number {
+  const id = nextId++;
+  useToasts.setState((s) => ({
+    toasts: [...s.toasts.filter((t) => !(n.tag && t.tag === n.tag)), { ...n, id }].slice(-4),
+  }));
+  timers.set(
+    id,
+    setTimeout(() => dismissToast(id), ms),
+  );
+  return id;
+}
+
+// ---------- navigation from notifications ----------
+
+let navigate: ((url: string) => void) | undefined;
+
+/** Installed by <NotificationToasts/> (inside the router) so clicks navigate without a reload. */
+export function setNotifyNavigator(fn: ((url: string) => void) | undefined) {
+  navigate = fn;
+}
+
+export function openNoticeUrl(url: string | undefined) {
+  if (!url) return;
+  if (navigate) navigate(url);
+  else location.assign(url);
+}
+
+// ---------- entry point ----------
+
+export type NotifyOutcome = "off" | "toast" | "system" | "push";
+
+/**
+ * Show a notification for this page.
+ * - Page in front: a toast.
+ * - Page in background with a push subscription: nothing — the server's Web Push covers it.
+ * - Page in background, notification permission granted: a system notification.
+ * - Otherwise: a toast, seen when the user comes back.
+ * `force` ignores the per-kind switches (used by the "test" button).
+ */
+export async function notifyInPage(n: InPageNotice, opts: { force?: boolean } = {}): Promise<NotifyOutcome> {
+  if (!opts.force && !getNotifyKinds()[n.kind]) return "off";
+  const inFront = document.visibilityState === "visible" && document.hasFocus();
+  if (inFront) {
+    showToast(n);
+    return "toast";
+  }
+  if (!opts.force && (await currentPushSubscription())) return "push";
+  if ("Notification" in window && Notification.permission === "granted") {
+    try {
+      const reg = "serviceWorker" in navigator ? await navigator.serviceWorker.getRegistration() : undefined;
+      const options: NotificationOptions = { body: n.body ?? "", tag: n.tag, icon: "/icons/icon-192.png", data: { url: n.url ?? "/" } };
+      if (reg) {
+        await reg.showNotification(n.title, options);
+      } else {
+        const sys = new Notification(n.title, options);
+        sys.onclick = () => {
+          window.focus();
+          openNoticeUrl(n.url);
+          sys.close();
+        };
+      }
+      return "system";
+    } catch {
+      // e.g. Android Chrome forbids `new Notification()`; fall through to a toast
+    }
+  }
+  showToast(n, 30_000);
+  return "toast";
+}