@north-light/crouter 0.3.154

package/dist/clients/attach/render/chat-view.js

@@ -0,0 +1,946 @@
+// render/chat-view.ts — the render half of `crtr surface attach` (Phase 4, T5).
+//
+// A direct port of pi's `InteractiveMode.handleEvent()`
+// (interactive-mode.js:2169-2462) + its rebuild path
+// (`addMessageToChat`/`renderSessionContext`, :2483-2648) that DRIVES pi's own
+// exported TUI components rather than reimplementing them. The viewer never
+// spawns pi and never opens the session — it only consumes the relayed
+// `AgentSessionEvent` stream + the `welcome` snapshot over `view.sock`.
+//
+// Ownership boundary: ChatView owns the chat scroll `Container` it is handed,
+// plus an activity/status area pinned to the bottom of that container (working
+// spinner, compaction/retry indicators, inline status/error lines). It does NOT
+// own the editor, the footer, or the terminal title — those are chrome laid out
+// by the attach command (T7). Events that only affect that chrome
+// (queue_update / session_info_changed / thinking_level_changed) are forwarded
+// to the optional `onFooterEvent` sink instead of rendered here.
+//
+// Custom-tool rendering: extensions run in the broker, so the viewer generally
+// has no extension `ToolDefinition`. The viewer supplies native renderers only
+// for crouter-owned message/tool types it understands; other extension
+// `renderCall`/`renderResult` hooks degrade to the default ToolExecutionComponent
+// path while builtin tools, diffs, and partial-result streaming keep working.
+import { Container, Loader, Spacer, Text } from '@earendil-works/pi-tui';
+import { AssistantMessageComponent, BashExecutionComponent, BranchSummaryMessageComponent, CompactionSummaryMessageComponent, CustomMessageComponent, parseSkillBlock, SkillInvocationMessageComponent, ToolExecutionComponent, UserMessageComponent, } from '@earendil-works/pi-coding-agent';
+import { attachMarkdownTheme } from '../config.js';
+import { ContextMessageComponent } from './context-message.js';
+import { CRTR_OUTPUT_CUSTOM_TYPE, CrtrOutputMessageComponent, createCrtrBashToolDefinition, } from './crtr-output.js';
+import { CRTR_CYCLE_DIVIDER_CUSTOM_TYPE } from '../../../core/runtime/session-cycles.js';
+import { SITUATIONAL_CONTEXT_CUSTOM_TYPE } from '../../../core/runtime/situational-context.js';
+import { transformMessageDiagrams } from './diagram.js';
+import { styleAttachMarkdownHeadings, styleAttachMessageMarkdown, styleAttachSummaryMarkdown, } from './markdown-headings.js';
+import { createCrtrEditToolDefinition } from './edit-diff.js';
+import { ringCompletionBell } from '../chrome/completion-bell.js';
+import { extractFilePaths } from '../visible-paths.js';
+import { FrozenHistoryComponent, keepWhenCondensed, liveRegionStart } from './frozen-history.js';
+import { readConfig } from '../../../core/config.js';
+import { DEFAULT_CONDENSED_HISTORY, DEFAULT_LIVE_CYCLES } from '../../../types.js';
+/** customType stamped on the injected `<crtr-context>` bearings block (mirrors
+ *  CONTEXT_INTRO_CUSTOM_TYPE in canvas-context-intro.ts — kept as a local literal
+ *  so the viewer never imports the in-process extension). */
+const CONTEXT_INTRO_CUSTOM_TYPE = 'crtr-context';
+/** Theme-derived chrome colors (spinner / dim / error) are supplied by the
+ *  attach command via `ChatViewOptions.palette` (built from the live theme in
+ *  config.ts). pi does not re-export the raw `theme` instance, so when no
+ *  palette is passed (ChatView used standalone) these defaults stand in: a faint
+ *  dim and ANSI red, matching the palette's own fallbacks. The message components
+ *  use the attach Markdown theme, which preserves the user's pi theme while making
+ *  fenced code visually distinct. */
+const defaultSpinnerStyle = (s) => `\x1b[2m${s}\x1b[22m`;
+const defaultDimStyle = (s) => `\x1b[2m${s}\x1b[22m`;
+/** How many catch-up messages `applySnapshot` builds between event-loop yields.
+ *  Keeps large non-streaming snapshots from monopolizing the main thread so
+ *  queued keystrokes are serviced during construction. */
+const SNAPSHOT_YIELD_EVERY = 50;
+/** The user's `live_cycles` setting — how many trailing refresh-yield cycles the
+ *  transcript renders at full fidelity. Read per ChatView (i.e. per attach), so
+ *  `crtr sys config set live_cycles --value N` takes effect on the next attach
+ *  without a daemon restart. A missing/unreadable config falls back to the
+ *  shipped default. */
+function readLiveCycles() {
+    try {
+        return readConfig('user').live_cycles;
+    }
+    catch {
+        return DEFAULT_LIVE_CYCLES;
+    }
+}
+/** The user's `condensed_history` setting — which messages of an already-condensed
+ *  cycle still render (the cycle dividers always do). Read per attach, like
+ *  `live_cycles`. */
+function readCondensedHistory() {
+    try {
+        return readConfig('user').condensed_history;
+    }
+    catch {
+        return DEFAULT_CONDENSED_HISTORY;
+    }
+}
+/** A component supports the Ctrl+O global tool-output toggle. Mirrors pi's
+ *  `isExpandable` duck-type (interactive-mode.js): any rendered child carrying a
+ *  `setExpanded(boolean)` method — tool executions, custom/compaction/branch/skill
+ *  message components — participates; everything else (the status container, plain
+ *  text, assistant/user bubbles) is skipped. */
+function isExpandable(obj) {
+    return (typeof obj === 'object' &&
+        obj !== null &&
+        'setExpanded' in obj &&
+        typeof obj.setExpanded === 'function');
+}
+const defaultErrorStyle = (s) => `\x1b[31m${s}\x1b[39m`;
+/** Keep settled conversation history out of picker/editor render hot paths. The
+ *  root TUI still compares the cached lines, but it no longer re-renders every
+ *  markdown/tool component for each repeated navigation key. */
+class RenderCacheContainer extends Container {
+    childCache = new Map();
+    markDirty(component) {
+        if (component)
+            this.childCache.delete(component);
+        else
+            this.childCache.clear();
+    }
+    removeChild(component) {
+        super.removeChild(component);
+        this.childCache.delete(component);
+    }
+    clear() {
+        super.clear();
+        this.childCache.clear();
+    }
+    invalidate() {
+        super.invalidate();
+        this.childCache.clear();
+    }
+    render(width) {
+        const lines = [];
+        for (const child of this.children) {
+            let cached = this.childCache.get(child);
+            if (!cached || cached.width !== width) {
+                cached = { width, lines: child.render(width) };
+                this.childCache.set(child, cached);
+            }
+            lines.push(...cached.lines);
+        }
+        return lines;
+    }
+}
+export class ChatView {
+    tui;
+    /** The chat scroll area handed in by the attach command. */
+    container;
+    /** Settled history is cached independently from the live status area so picker
+     *  navigation does not re-render a long conversation on every key repeat. */
+    historyContainer = new RenderCacheContainer();
+    /** Activity/status area below history. Holds working/compaction/retry loaders. */
+    statusContainer = new Container();
+    /** Where `append()` puts a component. Normally `historyContainer`; retargeted to
+     *  a scratch container while a frozen block is being built, so the very same
+     *  message-rendering path serves both. */
+    appendTarget = this.historyContainer;
+    /** Trailing cycles kept at full fidelity (config `live_cycles`). */
+    liveCycles;
+    /** Messages kept from a condensed cycle (config `condensed_history`). */
+    condensedHistory;
+    cwd;
+    showImages;
+    imageWidthCells;
+    hideThinking;
+    hiddenThinkingLabel;
+    toolOutputExpanded;
+    onFooterEvent;
+    /** Theme-derived colorizers for the activity/status area. */
+    spinnerStyle;
+    dimStyle;
+    errorStyle;
+    /** Bold accent for the expanded crtr-context label. */
+    labelStyle = (s) => `\x1b[1m${s}\x1b[22m`;
+    /** The assistant message component currently being streamed (between
+     *  message_start and message_end for an assistant turn). */
+    streamingComponent;
+    /** Tool-call id → its execution component, for the duration of the call. */
+    pendingTools = new Map();
+    /** The `!` bash component currently streaming (between bash_start and bash_end). */
+    bashComponent;
+    /** The single active activity loader (working/compaction/retry), if any. */
+    activityLoader;
+    // -- Single-writer snapshot ordering -------------------------------------
+    // A non-streaming catch-up yields to the event loop mid-build (so queued stdin
+    // drains), which opens a window where later broker frames could otherwise
+    // mutate a half-rebuilt transcript. These three fields make the ChatView a
+    // single ordered writer: applySnapshot is the only thing that mutates the
+    // view while a build is in flight, live frames are deferred and replayed in
+    // wire order once it finishes, and a newer welcome always supersedes an older
+    // build. See applySnapshot / deferIfBuilding.
+    /** True while applySnapshot is mid-build; live broker frames defer instead of
+     *  mutating the partially-rebuilt view. */
+    applyingSnapshot = false;
+    /** Bumped on every applySnapshot. A build suspended at a yield compares this
+     *  after resuming and abandons itself when a newer welcome has bumped it, so
+     *  the newest welcome wins and stale state never overwrites the live view. */
+    snapshotGeneration = 0;
+    /** Live frames captured during an in-flight build (bound closures that re-run
+     *  the original entry point), replayed in order when the build completes and
+     *  dropped when a newer welcome supersedes the build. */
+    deferredFrames = [];
+    /** Text of the most recent assistant message, kept current from the welcome
+     *  snapshot AND the live event stream so `/copy` (getLastAssistantText) works
+     *  whether the message arrived before or after attach. */
+    lastAssistantText;
+    /** Recent transcript text, oldest → newest, for the file-review path picker. */
+    transcriptTexts = [];
+    /** Existing file paths found anywhere in the rendered transcript, newest first. */
+    transcriptFilePaths = [];
+    constructor(tui, container, opts = {}) {
+        this.tui = tui;
+        this.container = container;
+        this.cwd = opts.cwd ?? process.cwd();
+        this.showImages = opts.showImages ?? true;
+        this.imageWidthCells = opts.imageWidthCells ?? 60;
+        this.hideThinking = opts.hideThinking ?? false;
+        this.hiddenThinkingLabel = opts.hiddenThinkingLabel ?? 'Thinking...';
+        this.toolOutputExpanded = opts.toolOutputExpanded ?? false;
+        this.liveCycles = opts.liveCycles ?? readLiveCycles();
+        this.condensedHistory = opts.condensedHistory ?? readCondensedHistory();
+        this.onFooterEvent = opts.onFooterEvent;
+        this.spinnerStyle = opts.palette?.active ?? defaultSpinnerStyle;
+        this.dimStyle = opts.palette?.muted ?? defaultDimStyle;
+        this.errorStyle = opts.palette?.error ?? defaultErrorStyle;
+        // Banner sits above history and OUTSIDE it, so resetChat() (which clears only
+        // historyContainer) never wipes it — it persists across every welcome snapshot.
+        if (opts.banner && opts.banner.length > 0) {
+            const b = new Container();
+            b.addChild(new Spacer(1));
+            for (const line of opts.banner)
+                b.addChild(new Text(line, 1, 0));
+            b.addChild(new Spacer(1));
+            this.container.addChild(b);
+        }
+        this.container.addChild(this.historyContainer);
+        this.container.addChild(this.statusContainer);
+    }
+    // -------------------------------------------------------------------------
+    // Catch-up: render the welcome snapshot, then live events resume.
+    // -------------------------------------------------------------------------
+    /** Render the full message history from a `welcome` snapshot. Ports pi's
+     *  `renderSessionContext` (interactive-mode.js:2553): assistant messages spawn
+     *  tool-execution components matched to their toolResult messages; everything
+     *  else routes through `addMessageToChat`. The TUI's differential renderer +
+     *  reflow-on-resize is automatic — no scrollback reconstruction needed. */
+    async applySnapshot(snapshot) {
+        // Open a new build generation. Any older build still suspended at a yield
+        // abandons itself when it resumes (generation check below), and live frames
+        // that were deferred against the transcript we are about to discard are
+        // dropped — a newer welcome always wins.
+        const generation = ++this.snapshotGeneration;
+        this.applyingSnapshot = true;
+        this.deferredFrames.length = 0;
+        this.resetChat();
+        const renderedPendingTools = new Map();
+        const messages = snapshot.messages;
+        const lastIndex = messages.length - 1;
+        // Cycles older than the trailing `live_cycles` are condensed to prose and
+        // frozen into one flat line block BEFORE the live region is built, so the loop
+        // below only ever constructs components for the cycles you are actually
+        // working in. `liveStart` is 0 — condense nothing — until the node has yielded
+        // past the configured window, so a fresh node renders exactly as it always did.
+        const liveStart = liveRegionStart(messages, this.liveCycles);
+        if (liveStart > 0) {
+            const frozen = await this.buildFrozenBlock(messages.slice(0, liveStart), generation);
+            if (generation !== this.snapshotGeneration)
+                return;
+            if (frozen)
+                this.append(frozen);
+        }
+        for (let i = liveStart; i < messages.length; i++) {
+            // Yield to the event loop every SNAPSHOT_YIELD_EVERY messages so queued
+            // stdin drains (keystrokes are handled instead of bursting after a long
+            // catch-up) while a big transcript constructs. Skipped for a STREAMING
+            // snapshot: its in-flight tail + pending tools must be bound before any
+            // relayed message_update/message_end lands, so it builds synchronously
+            // (no await → no broker frame can interleave and freeze the live bubble).
+            if (!snapshot.state.isStreaming &&
+                i > liveStart &&
+                (i - liveStart) % SNAPSHOT_YIELD_EVERY === 0) {
+                await new Promise((resolve) => setImmediate(resolve));
+                // A newer welcome arrived while we were suspended — abandon this stale
+                // build without touching the view (or the gate) it no longer owns.
+                if (generation !== this.snapshotGeneration)
+                    return;
+            }
+            const message = messages[i];
+            if (message.role === 'assistant') {
+                // Keep the `/copy` source current from the catch-up transcript too, not
+                // only the live stream (you usually attach AFTER the last reply landed).
+                const text = this.userMessageText(message);
+                if (text.trim()) {
+                    this.lastAssistantText = text;
+                    this.pushTranscriptText(text);
+                }
+                // If the snapshot caught an IN-FLIGHT assistant turn (state.isStreaming
+                // and this is the trailing, non-terminal assistant message), bind it as
+                // the live streaming component so the relayed message_update/message_end
+                // frames that follow `welcome` land on it. Otherwise the in-flight
+                // message would freeze at its snapshot value until the next turn — the
+                // common case, since you typically attach to a node that is working.
+                const isStreamingTail = i === lastIndex &&
+                    snapshot.state.isStreaming &&
+                    message.stopReason !== 'aborted' &&
+                    message.stopReason !== 'error';
+                if (isStreamingTail) {
+                    this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinking, attachMarkdownTheme(), this.hiddenThinkingLabel);
+                    this.append(this.streamingComponent);
+                    this.streamingComponent.updateContent(styleAttachMessageMarkdown(message));
+                }
+                else {
+                    this.addMessageToChat(message);
+                }
+                for (const content of this.assistantToolCalls(message)) {
+                    this.pushTranscriptValue(content.arguments);
+                    const component = this.makeToolComponent(content.name, content.id, content.arguments);
+                    this.append(component);
+                    // (isStreamingTail is never aborted/error, so its tools fall through to
+                    //  renderedPendingTools → pendingTools, where live tool events find them.)
+                    if (message.stopReason === 'aborted' || message.stopReason === 'error') {
+                        const errorMessage = message.stopReason === 'aborted'
+                            ? 'Interrupted'
+                            : (message.errorMessage ?? 'Error');
+                        component.updateResult({ content: [{ type: 'text', text: errorMessage }], isError: true });
+                    }
+                    else {
+                        renderedPendingTools.set(content.id, component);
+                    }
+                }
+            }
+            else if (message.role === 'toolResult') {
+                this.pushTranscriptText(this.userMessageText(message));
+                const component = renderedPendingTools.get(message.toolCallId);
+                if (component) {
+                    component.updateResult(message);
+                    this.historyContainer.markDirty(component);
+                    renderedPendingTools.delete(message.toolCallId);
+                }
+            }
+            else {
+                this.addMessageToChat(message);
+            }
+        }
+        for (const [id, component] of renderedPendingTools) {
+            this.pendingTools.set(id, component);
+        }
+        // If we attached mid-turn, the `agent_start` that spins up the working loader
+        // already fired before we connected — restore it from the snapshot's streaming
+        // state so an actively-working node shows the spinner right away.
+        if (snapshot.state.isStreaming)
+            this.setActivity(this.makeLoader('Working...'));
+        this.tui.requestRender();
+        // Build complete and still current (a mismatch would have returned above):
+        // open the gate and replay, in wire order, any live frames that arrived
+        // during construction so they land on the finished transcript.
+        this.applyingSnapshot = false;
+        this.replayDeferredFrames();
+    }
+    /**
+     * Render the condensed form of the already-finished cycles ONCE and hand back a
+     * frozen line block (or undefined when nothing survived condensation).
+     *
+     * Reuses `addMessageToChat` verbatim by retargeting `append()` at a scratch
+     * container, so condensed history is styled exactly like live history — the same
+     * renderer, with the tool traffic filtered out and the result flattened to text.
+     * Yields on the same cadence as the live build so a very long history still lets
+     * queued keystrokes through, and abandons itself when a newer welcome supersedes
+     * this generation.
+     */
+    async buildFrozenBlock(messages, generation) {
+        const scratch = new Container();
+        const previousTarget = this.appendTarget;
+        this.appendTarget = scratch;
+        try {
+            let built = 0;
+            for (const message of messages) {
+                if (!keepWhenCondensed(message, this.condensedHistory))
+                    continue;
+                if (built > 0 && built % SNAPSHOT_YIELD_EVERY === 0) {
+                    await new Promise((resolve) => setImmediate(resolve));
+                    if (generation !== this.snapshotGeneration)
+                        return undefined;
+                }
+                built++;
+                // Condensed prose still feeds the @-path picker; `lastAssistantText` (the
+                // `/copy` source) deliberately does not — the live region always holds the
+                // newest reply.
+                this.pushTranscriptText(this.userMessageText(message));
+                this.addMessageToChat(message);
+            }
+        }
+        finally {
+            this.appendTarget = previousTarget;
+        }
+        const width = this.renderWidth();
+        const lines = scratch.render(width);
+        scratch.clear();
+        return lines.length > 0 ? new FrozenHistoryComponent(lines, width) : undefined;
+    }
+    /** Defer a live broker frame when a snapshot build is in flight. Returns true
+     *  (and enqueues the replay closure) while building so the caller returns
+     *  without mutating the half-rebuilt view; false when the caller may proceed.
+     *  This is the single-writer gate every live-frame entry point passes through. */
+    deferIfBuilding(replay) {
+        if (!this.applyingSnapshot)
+            return false;
+        this.deferredFrames.push(replay);
+        return true;
+    }
+    /** Replay deferred live frames in wire order. The gate is already open, so each
+     *  closure re-enters its entry point and dispatches immediately. */
+    replayDeferredFrames() {
+        const frames = this.deferredFrames.splice(0);
+        for (const replay of frames)
+            replay();
+    }
+    /** Clear live turn state after the broker reports completion or the viewer observes dormancy. */
+    settleRun() {
+        if (this.streamingComponent) {
+            this.historyContainer.removeChild(this.streamingComponent);
+            this.streamingComponent = undefined;
+        }
+        this.pendingTools.clear();
+        this.setActivity(undefined);
+        this.settleBashComponent();
+    }
+    /** Stop any spinning activity loader. A one-shot `crtr surface attach` process lets its
+     *  timers die with the process, but if T7 reuses a ChatView across reconnects in
+     *  one process it should call this on detach to avoid a leaked interval. */
+    dispose() {
+        this.settleRun();
+    }
+    // -------------------------------------------------------------------------
+    // Global display toggles (Ctrl+O / Ctrl+T), driven by the input controller.
+    // Pure client-side render state — no broker round-trip — ported from pi's
+    // `setToolsExpanded` / `toggleThinkingBlockVisibility`.
+    // -------------------------------------------------------------------------
+    /** Ctrl+O / app.tools.expand — flip global tool-output expansion and apply it to
+     *  every rendered component that supports it. Returns the new expanded state so
+     *  the caller can surface a notice. Condensed cycles hold no tool components and
+     *  are frozen as text, so they are unaffected by design. */
+    toggleToolsExpanded() {
+        this.toolOutputExpanded = !this.toolOutputExpanded;
+        for (const child of this.historyContainer.children) {
+            if (isExpandable(child))
+                child.setExpanded(this.toolOutputExpanded);
+        }
+        this.historyContainer.markDirty();
+        this.tui.requestRender();
+        return this.toolOutputExpanded;
+    }
+    /** Ctrl+T / app.thinking.toggle — flip thinking-block visibility and apply it to
+     *  every assistant message (the in-flight streaming bubble is itself a child of
+     *  the container, so the loop covers it too). Returns the new HIDDEN state. */
+    toggleThinking() {
+        this.hideThinking = !this.hideThinking;
+        for (const child of this.historyContainer.children) {
+            if (child instanceof AssistantMessageComponent)
+                child.setHideThinkingBlock(this.hideThinking);
+        }
+        this.historyContainer.markDirty();
+        this.tui.requestRender();
+        return this.hideThinking;
+    }
+    // -------------------------------------------------------------------------
+    // Live stream: the 15-of-17-case handleEvent port (turn_start/turn_end no-op,
+    // exactly as interactive pi falls through default for those two).
+    // -------------------------------------------------------------------------
+    handleEvent(event) {
+        // Order behind an in-flight catch-up: a live turn that starts while a large
+        // welcome is still building is replayed after it, never interleaved into it.
+        if (this.deferIfBuilding(() => this.handleEvent(event)))
+            return;
+        switch (event.type) {
+            case 'agent_start': {
+                this.pendingTools.clear();
+                this.setActivity(this.makeLoader('Working...'));
+                break;
+            }
+            case 'agent_end': {
+                this.settleRun();
+                // The node you're watching just finished its turn and handed control
+                // back — ring the completion bell (the Claude-Code Stop-hook ding).
+                // Best-effort/detached; gated on the `completion_bell` config setting.
+                // Only ever reached inside a live viewer pane, so a headless/background
+                // node (no ChatView) is always silent.
+                ringCompletionBell();
+                break;
+            }
+            // The whole run has truly settled (after any recovery/continuations). This
+            // is the broker's canonical turn-over signal and is always relayed, so use
+            // it as a safety net to clear a lingering activity loader: a missed or
+            // abnormal `agent_end` would otherwise leave a dormant, between-wakes node
+            // showing a frozen `Working…` spinner. No bell here — `agent_end` already
+            // rang it on the normal path; this only cleans up display state.
+            case 'agent_settled': {
+                this.settleRun();
+                break;
+            }
+            case 'message_start': {
+                if (event.message.role === 'custom' || event.message.role === 'user') {
+                    this.addMessageToChat(event.message);
+                }
+                else if (event.message.role === 'assistant') {
+                    this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinking, attachMarkdownTheme(), this.hiddenThinkingLabel);
+                    this.append(this.streamingComponent);
+                    this.streamingComponent.updateContent(styleAttachMessageMarkdown(event.message));
+                }
+                break;
+            }
+            case 'message_update': {
+                if (this.streamingComponent && event.message.role === 'assistant') {
+                    // Render any ALREADY-COMPLETE diagram fence to a diagram mid-stream
+                    // (transformMessageDiagrams only matches closed fences and is memoized,
+                    // so an unclosed fence still streaming stays raw and settles later).
+                    // This makes a diagram pop the instant its closing ``` arrives instead
+                    // of waiting for message_end — noticeable when more text follows it.
+                    const updated = styleAttachMessageMarkdown(transformMessageDiagrams(event.message, this.renderWidth()));
+                    this.streamingComponent.updateContent(updated);
+                    this.historyContainer.markDirty(this.streamingComponent);
+                    for (const content of this.assistantToolCalls(event.message)) {
+                        this.pushTranscriptValue(content.arguments);
+                        const existing = this.pendingTools.get(content.id);
+                        if (existing) {
+                            existing.updateArgs(content.arguments);
+                            this.historyContainer.markDirty(existing);
+                        }
+                        else {
+                            const component = this.makeToolComponent(content.name, content.id, content.arguments);
+                            this.append(component);
+                            this.pendingTools.set(content.id, component);
+                        }
+                    }
+                }
+                break;
+            }
+            case 'message_end': {
+                if (event.message.role !== 'assistant')
+                    break;
+                // Stash the completed reply's text for `/copy` (skip aborted/error turns,
+                // whose text is partial or absent).
+                if (event.message.stopReason !== 'aborted' && event.message.stopReason !== 'error') {
+                    const text = this.userMessageText(event.message);
+                    if (text.trim()) {
+                        this.lastAssistantText = text;
+                        this.pushTranscriptText(text);
+                    }
+                }
+                if (this.streamingComponent) {
+                    const stopReason = event.message.stopReason;
+                    let errorMessage = event.message.errorMessage;
+                    // An aborted turn is a user interrupt (Esc). The provider tends to
+                    // attach its own generic text ("Request was aborted."), so override it
+                    // outright — don't gate on the absence of an errorMessage — with a
+                    // plain, human label.
+                    if (stopReason === 'aborted') {
+                        errorMessage = 'Interrupted';
+                        // Surface the abort on the assistant bubble itself, mirroring pi
+                        // (interactive-mode.js:2280 sets streamingMessage.errorMessage before
+                        // updateContent) so the rendered message shows the annotation.
+                        event.message.errorMessage = errorMessage;
+                    }
+                    // Render every supported complete diagram fence in the settled reply
+                    // before it reaches the markdown renderer (no-op when absent).
+                    const finalMessage = styleAttachMessageMarkdown(transformMessageDiagrams(event.message, this.renderWidth()));
+                    this.streamingComponent.updateContent(finalMessage);
+                    if (stopReason === 'aborted' || stopReason === 'error') {
+                        const text = errorMessage ?? 'Error';
+                        for (const component of this.pendingTools.values()) {
+                            component.updateResult({ content: [{ type: 'text', text }], isError: true });
+                            this.historyContainer.markDirty(component);
+                        }
+                        this.pendingTools.clear();
+                    }
+                    else {
+                        // Args complete → trigger diff computation for edit tools.
+                        for (const component of this.pendingTools.values()) {
+                            component.setArgsComplete();
+                            this.historyContainer.markDirty(component);
+                        }
+                    }
+                    this.historyContainer.markDirty(this.streamingComponent);
+                    this.streamingComponent = undefined;
+                }
+                break;
+            }
+            case 'tool_execution_start': {
+                this.pushTranscriptValue(event.args);
+                let component = this.pendingTools.get(event.toolCallId);
+                if (!component) {
+                    component = this.makeToolComponent(event.toolName, event.toolCallId, event.args);
+                    this.append(component);
+                    this.pendingTools.set(event.toolCallId, component);
+                }
+                component.markExecutionStarted();
+                this.historyContainer.markDirty(component);
+                break;
+            }
+            case 'tool_execution_update': {
+                this.pushTranscriptValue(event.partialResult);
+                const component = this.pendingTools.get(event.toolCallId);
+                if (component) {
+                    component.updateResult({ ...event.partialResult, isError: false }, true);
+                    this.historyContainer.markDirty(component);
+                }
+                break;
+            }
+            case 'tool_execution_end': {
+                this.pushTranscriptValue(event.result);
+                const component = this.pendingTools.get(event.toolCallId);
+                if (component) {
+                    component.updateResult({ ...event.result, isError: event.isError });
+                    this.pendingTools.delete(event.toolCallId);
+                    this.historyContainer.markDirty(component);
+                }
+                break;
+            }
+            case 'compaction_start': {
+                const label = event.reason === 'manual' ? 'Compacting context...' : 'Auto-compacting...';
+                this.setActivity(this.makeLoader(label));
+                break;
+            }
+            case 'compaction_end': {
+                this.setActivity(undefined);
+                if (event.aborted) {
+                    this.showStatus(event.reason === 'manual' ? 'Compaction cancelled' : 'Auto-compaction cancelled');
+                }
+                else if (event.result) {
+                    // 0.78.1 divergence from the §3.2 sketch: `compaction_end` carries only
+                    // the CompactionResult (summary + tokensBefore), NOT the post-compaction
+                    // message list — so the viewer cannot clear+rebuild the transcript the
+                    // way in-process pi does (it rebuilds from its own SessionManager). We
+                    // append the compaction summary marker instead and KEEP the
+                    // pre-compaction scrollback for the rest of this attach session; a fresh
+                    // re-attach gets the already-compacted history via `welcome`. (Reported
+                    // in T5's final.)
+                    this.addMessageToChat({
+                        role: 'compactionSummary',
+                        summary: event.result.summary,
+                        tokensBefore: event.result.tokensBefore,
+                        timestamp: Date.now(),
+                    });
+                }
+                else if (event.errorMessage) {
+                    this.showError(event.errorMessage);
+                }
+                break;
+            }
+            case 'auto_retry_start': {
+                const seconds = Math.ceil(event.delayMs / 1000);
+                this.setActivity(this.makeLoader(`Retrying (${event.attempt}/${event.maxAttempts}) in ${seconds}s...`));
+                break;
+            }
+            case 'auto_retry_end': {
+                this.setActivity(undefined);
+                if (!event.success) {
+                    this.showError(`Retry failed after ${event.attempt} attempts: ${event.finalError ?? 'Unknown error'}`);
+                }
+                break;
+            }
+            // Footer/header-only — ChatView owns no footer; forward to the sink.
+            case 'queue_update':
+            case 'session_info_changed':
+            case 'thinking_level_changed':
+                this.onFooterEvent?.(event);
+                break;
+            // turn_start / turn_end — interactive pi ignores these (falls through
+            // default); the viewer does too.
+            default:
+                break;
+        }
+        // No unconditional markDirty here: appends/removes invalidate through
+        // RenderCacheContainer, and branches that mutate a child in place explicitly
+        // mark it dirty. Activity-only events leave settled history cached while the
+        // independent status loader animates.
+        this.tui.requestRender();
+    }
+    // -------------------------------------------------------------------------
+    // `!` bash live stream (broker bash_start/bash_output/bash_end frames). Mirrors
+    // pi interactive mode's `!` handling: create the component on start, stream
+    // chunks into it, mark complete on end. The persisted `bashExecution` message
+    // also rides the next snapshot, so this only drives the LIVE view.
+    // -------------------------------------------------------------------------
+    bashStart(command, excludeFromContext) {
+        if (this.deferIfBuilding(() => this.bashStart(command, excludeFromContext)))
+            return;
+        this.settleBashComponent();
+        let component;
+        component = new BashExecutionComponent(command, this.componentTui(() => component), excludeFromContext);
+        this.bashComponent = component;
+        this.append(component);
+        this.tui.requestRender();
+    }
+    bashOutput(chunk) {
+        if (this.deferIfBuilding(() => this.bashOutput(chunk)))
+            return;
+        this.pushTranscriptText(chunk);
+        if (this.bashComponent) {
+            this.bashComponent.appendOutput(chunk);
+            this.historyContainer.markDirty(this.bashComponent);
+        }
+        this.tui.requestRender();
+    }
+    bashEnd(result) {
+        if (this.deferIfBuilding(() => this.bashEnd(result)))
+            return;
+        this.settleBashComponent(result);
+        this.tui.requestRender();
+    }
+    // -------------------------------------------------------------------------
+    // Rebuild path (ports addMessageToChat, interactive-mode.js:2483).
+    // -------------------------------------------------------------------------
+    addMessageToChat(message) {
+        switch (message.role) {
+            case 'bashExecution': {
+                this.pushTranscriptText(message.output ?? '');
+                const component = new BashExecutionComponent(message.command, this.tui, message.excludeFromContext);
+                if (message.output)
+                    component.appendOutput(message.output);
+                component.setComplete(message.exitCode, message.cancelled, 
+                // pi's interactive mode passes a minimal `{truncated:true}` marker here
+                // (interactive-mode.js:2489) where the typed param is the full
+                // TruncationResult; the snapshot message only carries the boolean, so we
+                // mirror pi and cast.
+                message.truncated ? { truncated: true } : undefined, message.fullOutputPath);
+                this.append(component);
+                break;
+            }
+            case 'custom': {
+                if (message.display) {
+                    this.pushTranscriptText(this.userMessageText(message));
+                    // The <crtr-context> bearings block folds to a one-liner under Ctrl+O
+                    // (the broker runs its renderer extension, so reimplement it natively).
+                    if (message.customType === CONTEXT_INTRO_CUSTOM_TYPE) {
+                        this.append(new ContextMessageComponent(this.userMessageText(message), this.toolOutputExpanded, this.dimStyle, 
+                        // Bold + active accent, so the [crtr context] label reads as a
+                        // distinct color against the dim rest of the line.
+                        (s) => this.spinnerStyle(this.labelStyle(s))));
+                        break;
+                    }
+                    // The hidden ambient `<situational-context>` update (canvas-inbox-watcher's
+                    // ~non-birth wake path). Rendered collapsed exactly like `crtr-context`
+                    // (same component, distinct label) so an existing-node ambient update is
+                    // never more prominent in the transcript than the bearings block it rides
+                    // alongside on fresh birth — the LLM sees the full content either way; only
+                    // the viewer's display treatment differs.
+                    if (message.customType === SITUATIONAL_CONTEXT_CUSTOM_TYPE) {
+                        this.append(new ContextMessageComponent(this.userMessageText(message), this.toolOutputExpanded, this.dimStyle, (s) => this.spinnerStyle(this.labelStyle(s)), 'situational context', ' ambient context update — ctrl+o to expand'));
+                        break;
+                    }
+                    if (message.customType === CRTR_OUTPUT_CUSTOM_TYPE) {
+                        this.append(new CrtrOutputMessageComponent(this.userMessageText(message), this.toolOutputExpanded, this.crtrOutputTheme()));
+                        break;
+                    }
+                    // A refresh-yield cycle boundary (session-cycles.ts, synthetic — never
+                    // persisted): render as a dim rule rather than the generic custom-
+                    // message card, so scrolling through a multi-cycle node's full history
+                    // reads as one conversation with clear seams between cycles.
+                    if (message.customType === CRTR_CYCLE_DIVIDER_CUSTOM_TYPE) {
+                        this.append(new Spacer(1));
+                        this.append(new Text(this.dimStyle(`── ${this.userMessageText(message)} ──`), 1, 0));
+                        this.append(new Spacer(1));
+                        break;
+                    }
+                    const component = new CustomMessageComponent(styleAttachMessageMarkdown(message), undefined, attachMarkdownTheme());
+                    component.setExpanded(this.toolOutputExpanded);
+                    this.append(component);
+                }
+                break;
+            }
+            case 'compactionSummary': {
+                this.append(new Spacer(1));
+                const component = new CompactionSummaryMessageComponent(styleAttachSummaryMarkdown(message), attachMarkdownTheme());
+                component.setExpanded(this.toolOutputExpanded);
+                this.append(component);
+                break;
+            }
+            case 'branchSummary': {
+                this.append(new Spacer(1));
+                const component = new BranchSummaryMessageComponent(styleAttachSummaryMarkdown(message), attachMarkdownTheme());
+                component.setExpanded(this.toolOutputExpanded);
+                this.append(component);
+                break;
+            }
+            case 'user': {
+                const textContent = this.userMessageText(message);
+                if (!textContent)
+                    break;
+                this.pushTranscriptText(textContent);
+                if (this.chatChildCount() > 0)
+                    this.append(new Spacer(1));
+                const skillBlock = parseSkillBlock(textContent);
+                if (skillBlock) {
+                    const component = new SkillInvocationMessageComponent({ ...skillBlock, content: styleAttachMarkdownHeadings(skillBlock.content) }, attachMarkdownTheme());
+                    component.setExpanded(this.toolOutputExpanded);
+                    this.append(component);
+                    if (skillBlock.userMessage) {
+                        this.append(new UserMessageComponent(styleAttachMarkdownHeadings(skillBlock.userMessage), attachMarkdownTheme()));
+                    }
+                }
+                else {
+                    this.append(new UserMessageComponent(styleAttachMarkdownHeadings(textContent), attachMarkdownTheme()));
+                }
+                break;
+            }
+            case 'assistant': {
+                // Settled history message — render its supported diagram fences inline too.
+                this.append(new AssistantMessageComponent(styleAttachMessageMarkdown(transformMessageDiagrams(message, this.renderWidth())), this.hideThinking, attachMarkdownTheme(), this.hiddenThinkingLabel));
+                break;
+            }
+            // toolResult is rendered inline with its tool call (handled in applySnapshot).
+            default:
+                break;
+        }
+    }
+    // -------------------------------------------------------------------------
+    // Helpers
+    // -------------------------------------------------------------------------
+    /** Tool component with native viewer renderers for crouter-owned tool output. */
+    makeToolComponent(name, id, args) {
+        const toolDefinition = name === 'bash'
+            ? createCrtrBashToolDefinition(args)
+            : name === 'edit'
+                ? createCrtrEditToolDefinition(this.cwd)
+                : undefined;
+        let component;
+        component = new ToolExecutionComponent(name, id, args, { showImages: this.showImages, imageWidthCells: this.imageWidthCells }, toolDefinition, this.componentTui(() => component), this.cwd);
+        component.setExpanded(this.toolOutputExpanded);
+        return component;
+    }
+    /** Append conversation content above the independent live status area — or into
+     *  the scratch container while a frozen block is under construction. */
+    append(child) {
+        this.appendTarget.addChild(child);
+    }
+    /** Approximate render width for inline mermaid diagrams. Only affects
+     *  termrender's trailing padding (stripped in the transform), so the terminal
+     *  column count is close enough without threading the live pane width here. */
+    renderWidth() {
+        return Math.max(40, process.stdout.columns ?? 80);
+    }
+    /** Number of rendered conversation components in the container currently being
+     *  appended to (history, or the frozen block's scratch container). */
+    chatChildCount() {
+        return this.appendTarget.children.length;
+    }
+    /** Clear all chat content. */
+    resetChat() {
+        this.setActivity(undefined);
+        this.settleBashComponent();
+        this.streamingComponent = undefined;
+        this.pendingTools.clear();
+        this.lastAssistantText = undefined;
+        this.transcriptTexts.length = 0;
+        this.transcriptFilePaths.length = 0;
+        this.historyContainer.clear();
+    }
+    makeLoader(message) {
+        return new Loader(this.tui, this.spinnerStyle, this.dimStyle, message);
+    }
+    /** Let a self-updating history child invalidate only its own cached lines. */
+    componentTui(component) {
+        return {
+            requestRender: (force) => {
+                this.historyContainer.markDirty(component());
+                this.tui.requestRender(force);
+            },
+            terminal: this.tui.terminal,
+        };
+    }
+    /** Complete and release the live bash component before ChatView gives up ownership. */
+    settleBashComponent(result) {
+        if (!this.bashComponent)
+            return;
+        const component = this.bashComponent;
+        component.setComplete(result?.exitCode, result?.cancelled ?? true, result?.truncated ? { truncated: true } : undefined, result?.fullOutputPath);
+        this.historyContainer.markDirty(component);
+        this.bashComponent = undefined;
+    }
+    /** Swap the single active activity indicator (working/compaction/retry). */
+    setActivity(loader) {
+        this.activityLoader?.stop();
+        this.statusContainer.clear();
+        this.activityLoader = loader;
+        if (loader)
+            this.statusContainer.addChild(loader);
+    }
+    showStatus(message) {
+        this.append(new Spacer(1));
+        this.append(new Text(this.dimStyle(message), 1, 0));
+    }
+    showError(message) {
+        this.append(new Spacer(1));
+        this.append(new Text(this.errorStyle(message), 1, 0));
+    }
+    crtrOutputTheme() {
+        return {
+            fg: (name, text) => {
+                if (name === 'error')
+                    return this.errorStyle(text);
+                if (name === 'warning' || name === 'accent' || name === 'toolTitle' || name === 'success')
+                    return this.spinnerStyle(text);
+                if (name === 'muted')
+                    return this.dimStyle(text);
+                return text;
+            },
+            bg: (_name, text) => text,
+            bold: (text) => this.labelStyle(text),
+        };
+    }
+    /** Extract the tool-call content items from an assistant message. */
+    assistantToolCalls(message) {
+        const content = message.content;
+        if (!Array.isArray(content))
+            return [];
+        return content.filter((c) => typeof c === 'object' && c !== null && c.type === 'toolCall');
+    }
+    /** Existing file paths from the rendered transcript, newest first. */
+    getTranscriptFilePathsNewestFirst() {
+        return [...this.transcriptFilePaths];
+    }
+    /** The text of the most recent assistant message, for `/copy`. Undefined when
+     *  no assistant message has been seen (or it had no text content). */
+    getLastAssistantText() {
+        const t = this.lastAssistantText?.trim();
+        return t ? t : undefined;
+    }
+    pushTranscriptText(text) {
+        const trimmed = text.trim();
+        if (trimmed === '')
+            return;
+        this.transcriptTexts.push(trimmed.slice(0, 8 * 1024));
+        if (this.transcriptTexts.length > 200)
+            this.transcriptTexts.splice(0, this.transcriptTexts.length - 200);
+        const paths = extractFilePaths([trimmed], this.cwd);
+        if (paths.length === 0)
+            return;
+        const next = [...paths, ...this.transcriptFilePaths.filter((path) => !paths.includes(path))].slice(0, 50);
+        this.transcriptFilePaths.splice(0, this.transcriptFilePaths.length, ...next);
+    }
+    pushTranscriptValue(value) {
+        try {
+            const text = typeof value === 'string' ? value : JSON.stringify(value);
+            if (typeof text === 'string')
+                this.pushTranscriptText(text);
+        }
+        catch {
+            // Tool payloads that cannot serialize are not transcript text.
+        }
+    }
+    /** Concatenate the text blocks of a user message (string or content array). */
+    userMessageText(message) {
+        const content = message.content;
+        if (typeof content === 'string')
+            return content;
+        if (!Array.isArray(content))
+            return '';
+        return content
+            .filter((c) => typeof c === 'object' && c !== null && c.type === 'text')
+            .map((c) => c.text)
+            .join('');
+    }
+}