cli-jaw 2.17.38 → 2.17.39

package/public/js/features/activity-live.ts

@@ -0,0 +1,330 @@
+import type { RuntimeEvent, RuntimeItemStatus } from '../../../src/shared/runtime-contract.js';
+import type { ActivityIdentity } from '../../../src/shared/presentation.js';
+import { activityKey, createActivityState, type ActivityState } from '../../../src/shared/activity-state.js';
+import { ActivityReplay, type ActivityRestoreOptions } from '../../../src/shared/activity-replay.js';
+import type { SavedActivityAnswer } from '../../../src/shared/activity-read.js';
+import { createActivityChoices, createActivityView, type ActivityChoices } from './activity-view.js';
+import { getMessageScope, replaceCachedAnswer } from './idb-cache.js';
+
+/** Legacy host actions are injected so this owner cannot join the renderer SCC. */
+export interface ActivityHost {
+    currentMessage(): HTMLElement | null;
+    useMessage(message: HTMLElement): void;
+    createMessage(): HTMLElement;
+    reconcileMessage(id: string, update: (message: HTMLElement) => void): boolean;
+    replaceAnswer(message: HTMLElement, text: string): void;
+    inspectTrace(runId: string, sessionId: string): void;
+    closeTrace?(): void;
+    evicted?(message: HTMLElement): void;
+}
+let host: ActivityHost;
+export function configureLiveActivityHost(next: ActivityHost): void { host = next; }
+
+export class ActivityCapacityError extends Error {
+    constructor() { super('activity_capacity'); }
+}
+const MAX_TURNS = 16;
+type TerminalStatus = Exclude<RuntimeItemStatus, 'running'> | 'finished';
+export interface LiveActivityTurn {
+    model: ActivityState;
+    choices: ActivityChoices;
+    message: HTMLElement;
+    view: ReturnType<typeof createActivityView>;
+    degraded: boolean;
+    recordingGap: boolean;
+    canonicalTerminal: boolean;
+    terminalStatus?: TerminalStatus;
+    answerSource?: 'canonical' | 'compatibility' | 'saved' | 'unavailable';
+    cacheScope: string;
+}
+const turns = new Map<string, LiveActivityTurn>();
+const choicesByTurn = new Map<string, ActivityChoices>();
+interface PendingAnswer extends ActivityIdentity {
+    runId: string; message: HTMLElement; messageId: string; cacheScope: string; corrected: boolean;
+}
+const pendingAnswers = new Map<string, PendingAnswer>();
+const replay = new ActivityReplay(model => {
+    const turn = turns.get(activityKey(model.identity));
+    if (turn) { turn.model = model; render(turn); }
+}, canRelease, releaseRank);
+let identity: ActivityIdentity | null = null;
+let transportHealthy = true;
+
+function canRelease(model: ActivityState): boolean {
+    const message = turns.get(activityKey(model.identity))?.message;
+    return !message?.contains(message.ownerDocument.activeElement);
+}
+function releaseRank(model: ActivityState): number {
+    return turns.get(activityKey(model.identity))?.message.isConnected ? 1 : 0;
+}
+
+export function setActivityTransportHealthy(healthy: boolean): void {
+    transportHealthy = healthy;
+    for (const turn of turns.values()) render(turn);
+}
+
+export function closeActivityTrace(): void { host.closeTrace?.(); }
+export function isCurrentActivityMessage(message: HTMLElement): boolean { return host.currentMessage() === message; }
+
+function releaseTurn(key: string, turn: LiveActivityTurn): void {
+    turn.view.dispose();
+    delete turn.message.dataset['activityKey']; delete turn.message.dataset['activityLive'];
+    turns.delete(key); replay.turns.delete(key);
+    host.evicted?.(turn.message);
+}
+
+export function clearLiveActivity(): void {
+    for (const turn of turns.values()) {
+        turn.view.dispose();
+        delete turn.message.dataset['activityKey'];
+        delete turn.message.dataset['activityLive'];
+    }
+    turns.clear();
+    replay.reset(); choicesByTurn.clear(); pendingAnswers.clear();
+    identity = null;
+}
+
+export function setLiveActivityIdentity(next: ActivityIdentity | null): void {
+    if (identity && next && (identity.sessionId !== next.sessionId || identity.scope !== next.scope)) clearLiveActivity();
+    // Retain the last known pair while disconnected, but admission is owned by ws.
+    if (next) identity = { ...next };
+}
+
+export function findLiveActivity(runId: string): LiveActivityTurn | undefined {
+    for (const turn of turns.values()) if (turn.model.identity.runId === runId) return turn;
+    return undefined;
+}
+
+function render(turn: LiveActivityTurn): void {
+    const status = turn.model.end?.status ?? turn.terminalStatus;
+    turn.degraded = turn.recordingGap || (!turn.model.end && !turn.canonicalTerminal && !!turn.terminalStatus);
+    turn.message.dataset['activityLive'] = status || turn.message.dataset['activitySaved'] === 'true' ? 'false' : 'true';
+    turn.view.render(turn.model, { ...(status ? { status } : {}), degraded: turn.degraded,
+        connectionUnavailable: !status && (!transportHealthy || turn.model.identity.scope !== identity?.scope) });
+}
+
+function makeRoom(): boolean {
+    if (turns.size < MAX_TURNS) return true;
+    const candidate = [...turns].filter(([, turn]) => (turn.model.end || turn.terminalStatus) && canRelease(turn.model))
+        .sort(([, a], [, b]) => releaseRank(a.model) - releaseRank(b.model))[0];
+    if (!candidate) return false;
+    // Keep full answers and explicit choices; only disposable preview data leaves.
+    releaseTurn(candidate[0], candidate[1]); return true;
+}
+
+function choicesFor(key: string): ActivityChoices | null {
+    const existing = choicesByTurn.get(key);
+    if (existing) return existing;
+    if (choicesByTurn.size >= 64) {
+        const unused = [...choicesByTurn].find(([, value]) => !value.open && value.items.size === 0);
+        if (!unused) return null;
+        choicesByTurn.delete(unused[0]);
+    }
+    const choices = createActivityChoices();
+    choicesByTurn.set(key, choices);
+    return choices;
+}
+
+function bindModel(model: ActivityState, message: HTMLElement): LiveActivityTurn | null {
+    const key = activityKey(model.identity);
+    if (!turns.has(key) && !makeRoom()) return null;
+    const choices = choicesFor(key);
+    if (!choices) return null;
+    message.dataset['activityKey'] = key;
+    message.dataset['traceRunId'] = model.identity.runId;
+    message.dataset['activitySession'] = model.identity.sessionId;
+    message.dataset['messageSessionId'] = model.identity.sessionId;
+    const body = message.querySelector<HTMLElement>('.agent-body');
+    if (!body) return null;
+    message.querySelector('.activity-turn')?.remove();
+    const view = createActivityView(body, choices, current => {
+        host.inspectTrace(current.identity.runId, current.identity.sessionId);
+    });
+    const turn: LiveActivityTurn = { model, choices, message, view, degraded: false, recordingGap: false,
+        canonicalTerminal: !!model.end, cacheScope: getMessageScope() };
+    turns.set(key, turn);
+    replay.turns.set(key, model);
+    render(turn);
+    return turn;
+}
+
+/** The caller validates the event and the server-captured session/scope first. */
+export function ingestLiveActivity(event: RuntimeEvent, reuseCurrent = true): LiveActivityTurn | null {
+    if (!identity || identity.sessionId !== event.sessionId || identity.scope !== event.scope) return null;
+    const key = activityKey(event);
+    const existingRun = findLiveActivity(event.runId);
+    if (existingRun && activityKey(existingRun.model.identity) !== key) return null;
+    let turn = turns.get(key);
+    if (!turn) {
+        const seed = replay.turns.get(key);
+        if (seed && (seed.end || event.seq <= seed.seq)) return null;
+        if (!choicesFor(key) || !makeRoom()) throw new ActivityCapacityError();
+        const current = host.currentMessage();
+        const canReuse = reuseCurrent && current?.isConnected
+            && (!current.dataset['activityKey'] || current.dataset['activityKey'] === key);
+        const message = canReuse ? current : host.createMessage();
+        const model = replay.turns.get(key) ?? createActivityState(event);
+        turn = bindModel(model, message) ?? undefined;
+        if (!turn) return null;
+        turn.recordingGap = event.kind !== 'turn-start';
+        host.useMessage(message);
+    }
+    try {
+        if (!replay.live(event)) return null;
+    } catch (error) {
+        if (!turn.recordingGap) console.warn('[activity] live replay unavailable', error);
+        turn.recordingGap = true;
+    }
+    if (event.kind === 'turn-end') { turn.canonicalTerminal = true; turn.terminalStatus = event.status; }
+    render(turn);
+    return turn;
+}
+
+/** Compatibility finality is a view state, never a fabricated journal event. */
+export function settleLiveActivity(runId: string | null, status: TerminalStatus = 'finished'): void {
+    if (!runId) return;
+    replay.markSettled(runId);
+    const turn = findLiveActivity(runId);
+    if (!turn) return;
+    if (!turn.model.end) turn.terminalStatus = status;
+    render(turn);
+}
+
+/** An ended owned host may have no recorded model; retain only answer provenance. */
+export function settleModelFreeUnavailableAnswer(value: Omit<PendingAnswer, 'messageId' | 'corrected'>): void {
+    const messageId = value.message.dataset['messageId'];
+    if (!messageId || host.currentMessage() !== value.message || findLiveActivity(value.runId)
+        || value.message.dataset['traceRunId'] !== value.runId
+        || value.message.dataset['messageSessionId'] !== value.sessionId) return;
+    if (pendingAnswers.size >= 64) pendingAnswers.delete(pendingAnswers.keys().next().value!);
+    pendingAnswers.set(value.runId, { ...value, messageId, corrected: false });
+    value.message.dataset['activityAnswerPending'] = 'true';
+}
+
+export function hasModelFreeAnswerReceipt(runId: string): boolean { return pendingAnswers.has(runId); }
+
+export function reconcileModelFreePublicAnswer(value: ActivityIdentity & { runId: string; text: string }): boolean {
+    const pending = pendingAnswers.get(value.runId);
+    if (!pending || pending.corrected || pending.sessionId !== value.sessionId || pending.scope !== value.scope) return false;
+    let replaced = false;
+    const update = (message: HTMLElement) => {
+        if (message.dataset['messageId'] !== pending.messageId || message.dataset['traceRunId'] !== value.runId
+            || message.dataset['messageSessionId'] !== value.sessionId
+            || message.dataset['activityAnswerPending'] !== 'true') return;
+        host.replaceAnswer(message, value.text);
+        delete message.dataset['activityAnswerPending']; replaced = true;
+    };
+    if (!host.reconcileMessage(pending.messageId, update) && pending.message.isConnected) update(pending.message);
+    if (!replaced) return false;
+    pending.corrected = true;
+    void replaceCachedAnswer(value.runId, value.text, pending.cacheScope, value.sessionId);
+    return true;
+}
+
+/** Compatibility text keeps its original provenance after a canonical-first render. */
+export function reconcileLiveActivityAnswer(runId: string, text: string): void {
+    const turn = findLiveActivity(runId);
+    if (!turn || (turn.answerSource !== 'canonical' && turn.answerSource !== 'unavailable')) return;
+    const messageId = turn.message.dataset['messageId'];
+    let replaced = false;
+    const update = (message: HTMLElement) => {
+        if (message.dataset['traceRunId'] !== runId
+            || message.dataset['activityKey'] !== activityKey(turn.model.identity)) return;
+        rebindLiveActivity(runId, message);
+        host.replaceAnswer(message, text);
+        replaced = true;
+    };
+    if (!messageId || !host.reconcileMessage(messageId, update)) update(turn.message);
+    if (!replaced) return;
+    turn.answerSource = 'compatibility';
+    void replaceCachedAnswer(runId, text, turn.cacheScope, turn.model.identity.sessionId);
+}
+
+/** Caller has resolved the exact saved MESSAGE and settled any current lifecycle. */
+export function reconcileSavedActivityAnswer(message: HTMLElement, saved: SavedActivityAnswer, cacheScope: string): boolean {
+    if (host.currentMessage() === message) return false;
+    const runId = saved.trace_run_id;
+    let replaced = false;
+    const update = (target: HTMLElement) => {
+        if (target.dataset['traceRunId'] !== runId || target.dataset['messageSessionId'] !== saved.session_id
+            || (target.dataset['serverMessageId'] && target.dataset['serverMessageId'] !== String(saved.id))) return;
+        rebindLiveActivity(runId, target);
+        host.replaceAnswer(target, saved.content);
+        target.dataset['serverMessageId'] = String(saved.id); target.dataset['activitySaved'] = 'true';
+        delete target.dataset['activityAnswerPending'];
+        const pending = pendingAnswers.get(runId);
+        if (pending && pending.messageId === target.dataset['messageId'] && pending.sessionId === saved.session_id) pending.corrected = true;
+        const turn = findLiveActivity(runId);
+        if (turn?.message === target) { turn.answerSource = 'saved'; render(turn); }
+        replaced = true;
+    };
+    const messageId = message.dataset['messageId'];
+    if (!messageId || !host.reconcileMessage(messageId, update)) update(message);
+    if (replaced) void replaceCachedAnswer(runId, saved.content, cacheScope, saved.session_id, saved.id);
+    return replaced;
+}
+
+export function degradeLiveActivity(runId: string): void {
+    const turn = findLiveActivity(runId);
+    if (turn) { turn.recordingGap = true; render(turn); }
+}
+
+export function rebindLiveActivity(runId: string, message: HTMLElement): void {
+    const turn = findLiveActivity(runId);
+    if (!turn || (turn.message === message && message.contains(turn.view.element))) return;
+    turn.view.dispose();
+    message.querySelector('.activity-turn')?.remove();
+    const body = message.querySelector<HTMLElement>('.agent-body');
+    if (!body) return;
+    message.dataset['activityKey'] = activityKey(turn.model.identity);
+    message.dataset['traceRunId'] = runId;
+    message.dataset['activitySession'] = turn.model.identity.sessionId;
+    message.dataset['messageSessionId'] = turn.model.identity.sessionId;
+    turn.message = message;
+    turn.view = createActivityView(body, turn.choices, model => {
+        host.inspectTrace(runId, model.identity.sessionId);
+    });
+    render(turn);
+}
+
+export async function restoreLiveActivity(read: (signal: AbortSignal) => Promise<readonly RuntimeEvent[]>, options?: ActivityRestoreOptions): Promise<void> {
+    try { await replay.restore(read, options); }
+    finally { for (const [key, turn] of turns) if (!replay.turns.has(key)) releaseTurn(key, turn); }
+}
+
+export function mountHistoryActivity(message: HTMLElement, runId: string): LiveActivityTurn | null {
+    const existing = findLiveActivity(runId);
+    if (existing) { rebindLiveActivity(runId, message); return existing; }
+    const model = [...replay.turns.values()].find(value => value.identity.runId === runId);
+    return model ? bindModel(model, message) : null;
+}
+
+export function recycleActivityHost(message: HTMLElement): void {
+    const turn = turns.get(message.dataset['activityKey'] ?? '');
+    if (turn?.message === message) turn.view.dispose();
+}
+
+export function setActivityReadHealth(runId: string, incomplete: boolean): void {
+    const turn = findLiveActivity(runId);
+    if (turn) { turn.recordingGap = incomplete; render(turn); }
+}
+
+/** Virtual scroll recreates DOM; reconnect retained disclosure choices to its rows. */
+export function remountLiveActivity(root: ParentNode): void {
+    for (const message of root.querySelectorAll<HTMLElement>('.msg-agent[data-activity-key], .activity-recorded-run[data-activity-key]')) {
+        // Transcript markup is not a host registry. A copied key inside an
+        // answer must never transfer the retained view away from its real row.
+        if (message.parentElement?.closest('.msg-agent, .activity-recorded-run')) continue;
+        const turn = turns.get(message.dataset['activityKey']!);
+        if (!turn) {
+            message.querySelector('.activity-turn')?.remove();
+            delete message.dataset['activityKey'];
+            delete message.dataset['activityLive'];
+            continue;
+        }
+        if (message.dataset['traceRunId'] !== turn.model.identity.runId
+            || message.dataset['messageSessionId'] !== turn.model.identity.sessionId
+            || message.dataset['messageId'] !== turn.message.dataset['messageId']) continue;
+        rebindLiveActivity(turn.model.identity.runId, message);
+    }
+}

package/public/js/features/activity-view.ts

@@ -0,0 +1,218 @@
+import {
+    activityEntryLabel, activityEntryText, activityStatus, type ActivityState,
+} from '../../../src/shared/activity-state.js';
+import type { RuntimeItemStatus } from '../../../src/shared/runtime-contract.js';
+
+export interface ActivityChoices {
+    open: boolean;
+    items: Map<string, boolean>;
+    page: number | null;
+}
+
+const MAX_CHOICES = 128;
+const PAGE_SIZE = 40;
+const PREVIEW_CHARS = 3000;
+
+export const createActivityChoices = (): ActivityChoices => ({ open: false, items: new Map(), page: null });
+
+export function rememberActivityChoice(choices: ActivityChoices, id: string, open: boolean): boolean {
+    // Closed is the default; saturation never evicts an existing explicit choice.
+    if (!open) { choices.items.delete(id); return true; }
+    if (!choices.items.has(id) && choices.items.size >= MAX_CHOICES) return false;
+    choices.items.set(id, true);
+    return true;
+}
+
+export interface ActivityDisplayStatus {
+    status?: RuntimeItemStatus | 'finished';
+    degraded?: boolean;
+    connectionUnavailable?: boolean;
+}
+
+export function createActivityView(
+    host: HTMLElement,
+    choices: ActivityChoices,
+    inspectHistory?: (state: ActivityState) => void,
+) {
+    const doc = host.ownerDocument;
+    function element<K extends keyof HTMLElementTagNameMap>(tag: K, className: string) {
+        const node = doc.createElement(tag);
+        node.className = className;
+        return node;
+    }
+    function button(label: string, className: string) {
+        const node = element('button', className);
+        node.type = 'button';
+        node.textContent = label;
+        return node;
+    }
+    function text(node: HTMLElement, value: string): void {
+        if (node.textContent !== value) node.textContent = value;
+    }
+
+    const root = element('section', 'activity-turn');
+    root.setAttribute('aria-label', 'Turn activity');
+    const status = element('p', 'activity-status');
+    status.setAttribute('role', 'status');
+    status.setAttribute('aria-live', 'polite');
+    status.setAttribute('aria-atomic', 'true');
+    const disclosure = element('details', 'activity-disclosure');
+    const summary = element('summary', 'activity-summary');
+    const list = element('div', 'activity-list');
+    const empty = element('p', 'activity-empty');
+    empty.textContent = 'No activity recorded';
+    const nav = element('nav', 'activity-pages');
+    nav.setAttribute('aria-label', 'Activity pages');
+    const previous = button('Earlier activity', 'activity-previous');
+    const next = button('Later activity', 'activity-next');
+    const position = element('span', 'activity-page-position');
+    nav.append(previous, position, next);
+    disclosure.append(summary, empty, list, nav);
+    const error = element('p', 'activity-error');
+    const degraded = element('p', 'activity-degraded');
+    const connection = element('p', 'activity-connection'); connection.hidden = true;
+    const omitted = element('p', 'activity-omitted');
+    const choiceNotice = element('p', 'activity-choice-notice');
+    choiceNotice.setAttribute('role', 'status');
+    const requests = element('p', 'activity-requests');
+    for (const notice of [error, degraded, omitted, choiceNotice, requests]) notice.hidden = true;
+    root.append(status, error, disclosure, degraded, connection, omitted, choiceNotice, requests);
+    const historyButton = inspectHistory ? button('Inspect retained activity', 'activity-trace') : null;
+    if (historyButton) {
+        historyButton.setAttribute('aria-label', 'Inspect retained activity in Trace');
+        root.append(historyButton);
+    }
+    // The existing message and its copy/widget actions retain full answer ownership.
+    host.insertBefore(root, host.querySelector(':scope > .msg-content'));
+
+    let current: ActivityState | null = null;
+    let display: ActivityDisplayStatus = {};
+    let displayedPage = 0;
+    let disposed = false;
+    let choicesFull = false;
+    const nodes = new Map<string, HTMLDetailsElement>();
+
+    function updateChoiceNotice(): void {
+        choiceNotice.hidden = !choicesFull;
+        text(choiceNotice, choicesFull
+            ? '128 details are remembered open. Close one before opening another; existing choices are preserved.' : '');
+    }
+    function saveItem(id: string, node: HTMLDetailsElement): void {
+        if (disposed || nodes.get(id) !== node || node.open === (choices.items.get(id) === true)) return;
+        if (!rememberActivityChoice(choices, id, node.open)) {
+            node.open = false;
+            choicesFull = true;
+        } else {
+            choicesFull = false;
+            if (node.open && choices.page === null) choices.page = displayedPage;
+        }
+        updateChoiceNotice();
+    }
+    function saveChoices(): void {
+        // Native toggle is queued. Capture synchronous open changes before recycle/end.
+        choices.open = disclosure.open;
+        for (const [id, node] of nodes) saveItem(id, node);
+    }
+
+    disclosure.open = choices.open;
+    disclosure.ontoggle = () => { if (!disposed) choices.open = disclosure.open; };
+    if (historyButton) historyButton.onclick = () => { if (current && !disposed) inspectHistory?.(current); };
+    function changePage(offset: number, clicked: HTMLButtonElement, opposite: HTMLButtonElement): void {
+        if (!current || disposed) return;
+        saveChoices();
+        const last = Math.max(0, Math.ceil(current.entries.size / PAGE_SIZE) - 1);
+        choices.page = Math.max(0, Math.min(last, displayedPage + offset));
+        render(current, display);
+        const target = nav.hidden || !disclosure.open ? summary
+            : !clicked.disabled ? clicked : !opposite.disabled ? opposite : summary;
+        target.focus({ preventScroll: true });
+    }
+    previous.onclick = () => changePage(-1, previous, next);
+    next.onclick = () => changePage(1, next, previous);
+
+    function render(model: ActivityState, displayStatus: ActivityDisplayStatus = {}): void {
+        if (disposed) return;
+        saveChoices();
+        current = model;
+        display = { ...displayStatus };
+        const phase = display.status ?? activityStatus(model);
+        root.dataset['status'] = phase;
+        root.dataset['degraded'] = String(display.degraded === true);
+        const label = phase === 'running' ? 'Working' : phase === 'finished' ? 'Finished' : phase === 'done' ? 'Complete'
+            : phase === 'stopped' ? 'Stopped' : 'Failed';
+        text(status, label);
+        const errorSummary = phase === 'error' && model.end?.status === 'error' ? model.end.error ?? '' : '';
+        text(error, errorSummary);
+        error.hidden = !errorSummary;
+        const count = `${model.entries.size} retained preview${model.entries.size === 1 ? '' : 's'}`;
+        text(summary, model.latestAction ? `Activity: ${model.latestAction} (${count})` : `Activity (${count})`);
+        text(degraded, display.degraded ? 'Activity is incomplete. Some runtime updates were not received.' : '');
+        degraded.hidden = !display.degraded;
+        text(connection, display.connectionUnavailable ? 'Live activity updates are unavailable. Retained activity can be refreshed separately.' : '');
+        connection.hidden = !display.connectionUnavailable;
+        const loss = model.omitted;
+        const entries = [...model.entries.values()];
+        const limited = !!(loss.entries || loss.textChars || loss.requests || loss.finalChars)
+            || entries.some(entry => activityEntryText(entry).length > PREVIEW_CHARS);
+        text(omitted, limited
+            ? 'Preview is limited. Some activity, text or request notices are omitted.' : '');
+        omitted.hidden = !limited;
+        const hasRequests = !!(model.requests.size || loss.requests);
+        text(requests, hasRequests ? 'Request notices recorded; see live Requests controls for current requests.' : '');
+        requests.hidden = !hasRequests;
+
+        const last = Math.max(0, Math.ceil(entries.length / PAGE_SIZE) - 1);
+        displayedPage = choices.page === null ? last : Math.max(0, Math.min(last, Math.floor(choices.page)));
+        const visible = entries.slice(displayedPage * PAGE_SIZE, (displayedPage + 1) * PAGE_SIZE);
+        const wanted = new Set(visible.map(entry => entry.itemId));
+        const focused = doc.activeElement;
+        let focusedRowRemoved = false;
+        for (const [id, node] of nodes) {
+            if (!wanted.has(id)) {
+                if (node.contains(focused)) focusedRowRemoved = true;
+                node.ontoggle = null;
+                node.remove();
+                nodes.delete(id);
+            }
+        }
+        for (const [index, entry] of visible.entries()) {
+            let node = nodes.get(entry.itemId);
+            if (!node) {
+                node = element('details', 'activity-item');
+                node.dataset['activityItemId'] = entry.itemId;
+                node.append(element('summary', 'activity-item-summary'), element('pre', 'activity-item-text'));
+                node.open = choices.items.get(entry.itemId) === true;
+                const itemNode = node;
+                node.ontoggle = () => saveItem(entry.itemId, itemNode);
+                nodes.set(entry.itemId, node);
+            }
+            text(node.querySelector('summary')!, activityEntryLabel(entry));
+            const full = activityEntryText(entry);
+            text(node.querySelector('pre')!, full.length > PREVIEW_CHARS
+                ? `${full.slice(0, PREVIEW_CHARS)}\n[Preview limited; some text is omitted]` : full);
+            // Leave existing nodes in place so streamed replacements preserve focus.
+            if (list.children[index] !== node) list.insertBefore(node, list.children[index] ?? null);
+        }
+        empty.hidden = entries.length !== 0;
+        previous.disabled = displayedPage === 0;
+        next.disabled = displayedPage >= last;
+        text(position, entries.length ? `${displayedPage + 1} / ${last + 1}` : '0 / 0');
+        nav.hidden = entries.length <= PAGE_SIZE;
+        updateChoiceNotice();
+        if (focusedRowRemoved) summary.focus({ preventScroll: true });
+    }
+
+    function dispose(): void {
+        if (disposed) return;
+        saveChoices();
+        disposed = true;
+        disclosure.ontoggle = null;
+        previous.onclick = next.onclick = null;
+        if (historyButton) historyButton.onclick = null;
+        for (const node of nodes.values()) node.ontoggle = null;
+        nodes.clear();
+        current = null;
+        root.remove();
+    }
+    return { element: root, render, dispose };
+}

package/public/js/features/chat-messages.ts

@@ -144,10 +144,19 @@ export function addMessage(role: string, text: string, cli?: string | null): HTM
         if (!vs.active && !isStreamingPlaceholder && container) {
             const msgCount = container.querySelectorAll('.msg').length;
             if (msgCount >= VS_THRESHOLD) {
-                container.querySelectorAll('.msg').forEach(el => {
-                    if (el.classList.contains('msg-agent')) normalizeAgentToolBlocks(el as HTMLElement);
-                    vs.addItem(generateId(), el.outerHTML);
-                });
+                // A server event can create the live row before the user's echo.
+                // Bootstrap only settled history: keep the exact owned live DOM
+                // and its stream/Activity references outside VS until finalization.
+                const live = state.currentAgentDiv?.parentElement === container ? state.currentAgentDiv : null;
+                live?.remove();
+                try {
+                    container.querySelectorAll('.msg').forEach(el => {
+                        if (el.classList.contains('msg-agent')) normalizeAgentToolBlocks(el as HTMLElement);
+                        vs.addItem(generateId(), el.outerHTML);
+                    });
+                } finally {
+                    if (live) container.appendChild(live);
+                }
                 vs.onPostRender = (viewport: HTMLElement) => {
                     activateWidgets(viewport);
                     hydrateElicitationBlocks(viewport);

package/public/js/features/idb-cache.ts

@@ -26,6 +26,8 @@ export interface CachedMessage {
     timestamp: number;
     cli?: string | null;
     tool_log?: string | null;
+    trace_run_id?: string | null;
+    session_id?: string;
     scope?: string;
 }
 
@@ -105,7 +107,8 @@ async function evictStaleScopes(db: IDBDatabase): Promise<void> {
     }
 }
 
-export async function cacheMessages(messages: CachedMessage[]): Promise<void> {
+export async function cacheMessages(messages: CachedMessage[], scope?: string): Promise<void> {
+    const targetScope = scope ?? currentScope;
     try {
         // Guard: never wipe the cache with an empty array — only a deliberate
         // clearCache() call should empty the store. This prevents data loss when
@@ -120,7 +123,6 @@ export async function cacheMessages(messages: CachedMessage[]): Promise<void> {
         // here erased every other scope's offline fallback on each load, while
         // reads stay scoped via getScopedMessages(). Delete-then-add runs in
         // one transaction, so the scope swap stays atomic.
-        const targetScope = currentScope || 'default';
         const cursorReq = store.index('scope').openCursor(IDBKeyRange.only(targetScope));
         cursorReq.onsuccess = () => {
             const cursor = cursorReq.result;
@@ -136,6 +138,8 @@ export async function cacheMessages(messages: CachedMessage[]): Promise<void> {
                     content: msg.content,
                     cli: msg.cli ?? null,
                     tool_log: msg.tool_log ?? null,
+                    ...(msg.trace_run_id === undefined ? {} : { trace_run_id: msg.trace_run_id }),
+                    ...(msg.session_id === undefined ? {} : { session_id: msg.session_id }),
                     timestamp: msg.timestamp || Date.now(),
                     scope: targetScope,
                 });
@@ -176,6 +180,7 @@ export async function appendCachedMessage(role: string, content: string): Promis
 }
 
 export async function upsertMessage(msg: CachedMessage): Promise<void> {
+    const scope = msg.scope ?? currentScope;
     try {
         const db = await openDB();
         const tx = db.transaction(STORE, 'readwrite');
@@ -185,8 +190,10 @@ export async function upsertMessage(msg: CachedMessage): Promise<void> {
             content: msg.content,
             cli: msg.cli ?? null,
             tool_log: msg.tool_log ?? null,
+            trace_run_id: msg.trace_run_id ?? null,
+            ...(msg.session_id === undefined ? {} : { session_id: msg.session_id }),
             timestamp: msg.timestamp || Date.now(),
-            scope: currentScope,
+            scope,
         });
         await new Promise<void>((resolve, reject) => {
             tx.oncomplete = () => resolve();
@@ -197,6 +204,33 @@ export async function upsertMessage(msg: CachedMessage): Promise<void> {
     }
 }
 
+/** Correct existing answers only; explicit chat/DB identity must match stored ownership. */
+export async function replaceCachedAnswer(runId: string, content: string, scope: string, sessionId?: string, messageId?: number): Promise<void> {
+    const savedMessageId = messageId !== undefined && Number.isSafeInteger(messageId) && messageId > 0 ? messageId : undefined;
+    try {
+        const db = await openDB();
+        const tx = db.transaction(STORE, 'readwrite');
+        const request = tx.objectStore(STORE).index('scope').openCursor(IDBKeyRange.only(scope));
+        request.onsuccess = () => {
+            const cursor = request.result;
+            if (!cursor) return;
+            const row = cursor.value as CachedMessage;
+            if (row.scope === scope && row.role === 'assistant' && row.trace_run_id === runId
+                && (sessionId === undefined || row.session_id === sessionId)
+                && (savedMessageId === undefined || row.message_id == null || row.message_id === savedMessageId)) {
+                cursor.update({ ...row, content,
+                    ...(savedMessageId === undefined ? {} : { message_id: savedMessageId }),
+                });
+            }
+            cursor.continue();
+        };
+        await new Promise<void>((resolve, reject) => {
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+        });
+    } catch (error) { console.warn('[idb-cache] replaceCachedAnswer failed:', error); }
+}
+
 export async function getScopedMessages(scope?: string): Promise<CachedMessage[]> {
     try {
         const db = await openDB();