agent-sh 0.7.0 → 0.9.0

package/dist/extensions/tui-renderer.js

@@ -11,14 +11,13 @@
  * can subscribe to the same events.
  */
 import { highlight } from "cli-highlight";
-import { MarkdownRenderer, wrapLine } from "../utils/markdown.js";
+import { MarkdownRenderer, wrapLine, MAX_CONTENT_WIDTH } from "../utils/markdown.js";
 import { createFencedBlockTransform } from "../utils/stream-transform.js";
 import { palette as p } from "../utils/palette.js";
-import { renderToolCall, createSpinner, renderSpinnerLine, formatElapsed, } from "../utils/tool-display.js";
+import { renderToolCall, createSpinner, formatElapsed, SPINNER_FRAMES, } from "../utils/tool-display.js";
 import { renderDiff } from "../utils/diff-renderer.js";
 import { renderBoxFrame } from "../utils/box-frame.js";
 import { getSettings } from "../settings.js";
-import { StdoutWriter } from "../utils/output-writer.js";
 /** Encode a PNG buffer as a terminal inline image escape sequence. */
 function encodeImageForTerminal(data) {
     const b64 = data.toString("base64");
@@ -68,12 +67,78 @@ function createRenderState() {
     };
 }
 export default function activate(ctx) {
-    const { bus, llmClient, define } = ctx;
-    const writer = new StdoutWriter();
+    const { bus, define, compositor } = ctx;
     const s = createRenderState();
-    // Suppress all TUI output while stdout is held (overlay extensions)
-    bus.on("shell:stdout-hold", () => { writer.hold(); });
-    bus.on("shell:stdout-release", () => { writer.release(); });
+    /** Shorthand — get the current agent surface. */
+    function out() { return compositor.surface("agent"); }
+    /** Capped width for borders, tool lines, and content — keeps everything aligned. */
+    function cappedW() { return Math.min(MAX_CONTENT_WIDTH + 2, out().columns); }
+    // Gate: other extensions (e.g. overlay) can advise this to suppress
+    // TUI rendering of agent output while they own the display.
+    define("tui:should-render-agent", () => true);
+    function shouldRender() { return ctx.call("tui:should-render-agent"); }
+    // ── Advisable rendering handlers ───────────────────────────────
+    // Extensions advise these to customize how the TUI renders content.
+    // Each handler receives data and returns rendered strings.
+    define("tui:response-border", (position, width) => {
+        return `${p.dim}${p.accent}${"─".repeat(width)}${p.reset}`;
+    });
+    define("tui:response-start", () => { });
+    define("tui:response-end", (_hadToolCalls) => { });
+    define("tui:render-info", (message) => `${p.muted}${message}${p.reset}`);
+    define("tui:render-error", (message) => `${p.error}Error: ${message}${p.reset}`);
+    define("tui:render-usage", (promptTokens, completionTokens, maxTokens) => {
+        const ctxK = (promptTokens / 1000).toFixed(1);
+        const maxK = (maxTokens / 1000).toFixed(0);
+        const pct = Math.min(100, (promptTokens / maxTokens) * 100).toFixed(0);
+        return `${p.dim}⬆ ${promptTokens}  ⬇ ${completionTokens}  ctx: ${ctxK}k/${maxK}k (${pct}%)${p.reset}`;
+    });
+    define("tui:render-content-gap", (fromKind, toKind) => fromKind !== toKind ? "\n" : null);
+    define("tui:render-tool-complete", (exitCode, elapsed, summary) => {
+        const timer = elapsed ? ` ${p.dim}${elapsed}${p.reset}` : "";
+        const summaryStr = summary ? ` ${p.dim}${summary}${p.reset}` : "";
+        if (exitCode === null)
+            return `${p.muted}(timed out)${p.reset}`;
+        if (exitCode === 0)
+            return `${p.success}✓${p.reset}${summaryStr}${timer}`;
+        return `${p.error}✗ exit ${exitCode}${p.reset}${summaryStr}${timer}`;
+    });
+    define("tui:render-tool-group-summary", (count, rendered, allOk, summaries) => {
+        const mark = allOk ? `${p.success}✓${p.reset}` : `${p.error}✗${p.reset}`;
+        const summaryStr = summaries.length > 0 ? ` ${p.dim}${summaries.join(", ")}${p.reset}` : "";
+        const collapsed = count - rendered;
+        if (collapsed > 0) {
+            return `  ${p.muted}└${p.reset} ${p.dim}+${collapsed} more${p.reset} ${mark}${summaryStr}`;
+        }
+        return `  ${p.muted}└${p.reset} ${mark}${summaryStr}`;
+    });
+    define("tui:render-command-output", (line, _kind) => `${p.dim}  ${line}${p.reset}`);
+    define("tui:render-spinner", (label, frame, elapsed, hint) => {
+        const timer = elapsed ? ` ${p.dim}${elapsed}${p.reset}` : "";
+        const hintStr = hint ? ` ${p.dim}${hint}${p.reset}` : "";
+        return `${p.accent}${frame} ${label}...${p.reset}${timer}${hintStr}`;
+    });
+    define("tui:render-user-query", (query, width, modelLabel) => {
+        const contentW = width - 4;
+        let lines = [];
+        for (const raw of query.split("\n")) {
+            for (const wrapped of wrapLine(`${p.accent}${raw}${p.reset}`, contentW)) {
+                lines.push(wrapped);
+            }
+        }
+        const MAX_QUERY_LINES = 20;
+        if (lines.length > MAX_QUERY_LINES) {
+            const overflow = lines.length - MAX_QUERY_LINES;
+            lines = [...lines.slice(0, MAX_QUERY_LINES), `${p.dim}… ${overflow} more lines${p.reset}`];
+        }
+        return renderBoxFrame(lines, {
+            width,
+            style: "rounded",
+            borderColor: p.accent,
+            title: `${p.accent}${p.bold}❯${p.reset}`,
+            titleRight: modelLabel,
+        });
+    });
     // Track backend/model info for display on response border
     let backendInfo = null;
     bus.on("agent:info", (info) => { backendInfo = info; });
@@ -88,12 +153,16 @@ export default function activate(ctx) {
     });
     // ── Event subscriptions ─────────────────────────────────────
     bus.on("agent:query", (e) => {
+        if (!shouldRender())
+            return;
         s.spinnerStartTime = 0;
         showUserQuery(e.query);
         startAgentResponse();
         startThinkingSpinner();
     });
     bus.on("agent:thinking-chunk", (e) => {
+        if (!shouldRender())
+            return;
         s.thinkingPending = true;
         if (!s.isThinking) {
             s.isThinking = true;
@@ -118,6 +187,8 @@ export default function activate(ctx) {
         }
     });
     bus.on("agent:response-chunk", (e) => {
+        if (!shouldRender())
+            return;
         const { blocks } = e;
         // Inject spacing: append \n to text blocks that precede non-text blocks
         for (let i = 0; i < blocks.length; i++) {
@@ -141,7 +212,7 @@ export default function activate(ctx) {
                     break;
                 case "raw":
                     flushForRaw();
-                    writer.write(block.escape);
+                    out().write(block.escape);
                     break;
             }
         }
@@ -150,17 +221,14 @@ export default function activate(ctx) {
     let pendingUsage = null;
     bus.on("agent:usage", (e) => { pendingUsage = e; });
     bus.on("agent:response-done", () => {
+        if (!shouldRender())
+            return;
         s.isThinking = false;
         if (pendingUsage && s.renderer) {
             const { prompt_tokens, completion_tokens } = pendingUsage;
             const maxTokens = backendInfo?.contextWindow ?? 128_000;
-            // prompt_tokens of the latest call = current context usage
-            // (it includes the full conversation history)
-            const ctxK = (prompt_tokens / 1000).toFixed(1);
-            const maxK = (maxTokens / 1000).toFixed(0);
-            const pct = Math.min(100, (prompt_tokens / maxTokens) * 100).toFixed(0);
             s.renderer.writeLine("");
-            s.renderer.writeLine(`${p.dim}⬆ ${prompt_tokens}  ⬇ ${completion_tokens}  ctx: ${ctxK}k/${maxK}k (${pct}%)${p.reset}`);
+            s.renderer.writeLine(ctx.call("tui:render-usage", prompt_tokens, completion_tokens, maxTokens));
             drain();
             pendingUsage = null;
         }
@@ -173,6 +241,8 @@ export default function activate(ctx) {
     // Batch groups: kind → { total, rendered, headerShown }
     let batchGroups = new Map();
     bus.on("agent:tool-batch", (e) => {
+        if (!shouldRender())
+            return;
         fencedTransform.flush();
         finalizeToolGroup();
         batchGroups = new Map();
@@ -185,6 +255,8 @@ export default function activate(ctx) {
         }
     });
     bus.on("agent:tool-started", (e) => {
+        if (!shouldRender())
+            return;
         fencedTransform.flush();
         stopCurrentSpinner();
         s.currentToolKind = e.kind;
@@ -248,6 +320,8 @@ export default function activate(ctx) {
         }
     });
     bus.on("agent:tool-completed", (e) => {
+        if (!shouldRender())
+            return;
         s.toolExitCode = e.exitCode;
         if (e.exitCode !== 0)
             s.toolGroupAllOk = false;
@@ -265,20 +339,28 @@ export default function activate(ctx) {
             startThinkingSpinner();
         }
     });
-    bus.on("agent:tool-output-chunk", (e) => writeCommandOutput(e.chunk));
-    bus.on("agent:tool-output", () => flushCommandOutput());
+    bus.on("agent:tool-output-chunk", (e) => { if (shouldRender())
+        writeCommandOutput(e.chunk); });
+    bus.on("agent:tool-output", () => { if (shouldRender())
+        flushCommandOutput(); });
     bus.on("agent:cancelled", () => {
+        if (!shouldRender())
+            return;
         s.isThinking = false;
         stopCurrentSpinner();
         showInfo("(cancelled)");
         endAgentResponse();
     });
     bus.on("agent:processing-done", () => {
+        if (!shouldRender())
+            return;
         s.isThinking = false;
         stopCurrentSpinner();
         endAgentResponse();
     });
     bus.on("agent:error", (e) => {
+        if (!shouldRender())
+            return;
         stopCurrentSpinner();
         showCollapsedThinking();
         if (!s.renderer)
@@ -289,6 +371,8 @@ export default function activate(ctx) {
         drain();
     });
     bus.on("permission:request", (e) => {
+        if (!shouldRender())
+            return;
         stopCurrentSpinner();
         flushCommandOutput();
         if (s.renderer) {
@@ -309,6 +393,8 @@ export default function activate(ctx) {
         if (e.key === "\x14")
             toggleThinkingDisplay(); // Ctrl+T
     });
+    // Interactive tool UI — stop spinner while tool has control
+    bus.on("tool:interactive-start", () => { stopCurrentSpinner(); });
     bus.on("ui:info", (e) => {
         stopCurrentSpinner();
         showInfo(e.message);
@@ -318,25 +404,27 @@ export default function activate(ctx) {
     });
     bus.on("ui:error", (e) => showError(e.message));
     bus.on("ui:suggestion", (e) => {
-        writer.write(`${p.dim}💡 ${e.text}${p.reset}\n`);
+        compositor.surface("status").writeLine(`${p.dim}💡 ${e.text}${p.reset}`);
     });
     // ── Rendering functions ─────────────────────────────────────
     function drain() {
         if (!s.renderer)
             return;
         for (const line of s.renderer.drainLines()) {
-            writer.write(line + "\n");
+            out().write(line + "\n");
             // Track whether we just emitted a blank line (for contentGap dedup).
             // Lines from the renderer are indented ("  "), so a blank line is "  " or empty.
             lastEmittedLineBlank = line.trimEnd() === "" || line.trimEnd().replace(/\x1b\[[^m]*m/g, "").trim() === "";
         }
     }
     function startAgentResponse() {
-        s.renderer = new MarkdownRenderer(writer.columns);
+        s.renderer = new MarkdownRenderer(cappedW());
         s.hadToolCalls = false;
-        // Preserve lastContentKind across responses so text→tool gaps work
-        s.renderer.printTopBorder();
+        const border = ctx.call("tui:response-border", "top", cappedW());
+        if (border)
+            s.renderer.writeLine(border);
         drain();
+        ctx.call("tui:response-start");
     }
     /**
      * Insert an empty line when transitioning between different content kinds
@@ -345,12 +433,15 @@ export default function activate(ctx) {
      */
     let lastEmittedLineBlank = false;
     function contentGap(kind) {
-        if (s.lastContentKind && s.lastContentKind !== kind) {
-            if (s.renderer) {
-                s.renderer.flush();
-                drain();
+        if (s.lastContentKind) {
+            const gap = ctx.call("tui:render-content-gap", s.lastContentKind, kind);
+            if (gap) {
+                if (s.renderer) {
+                    s.renderer.flush();
+                    drain();
+                }
+                out().write(gap);
             }
-            writer.write("\n");
         }
         s.lastContentKind = kind;
     }
@@ -366,48 +457,18 @@ export default function activate(ctx) {
         closeToolLine();
         stopCurrentSpinner();
         if (s.renderer) {
+            ctx.call("tui:response-end", s.hadToolCalls);
             s.renderer.flush();
-            s.renderer.printBottomBorder();
+            const border = ctx.call("tui:response-border", "bottom", cappedW());
+            if (border)
+                s.renderer.writeLine(border);
             drain();
-            writer.write("\n");
+            out().write("\n");
             s.renderer = null;
         }
     }
     function showUserQuery(query) {
-        const boxW = writer.columns;
-        const contentW = boxW - 4;
-        let lines = [];
-        for (const raw of query.split("\n")) {
-            if (raw.length <= contentW) {
-                lines.push(`${p.accent}${raw}${p.reset}`);
-            }
-            else {
-                let remaining = raw;
-                while (remaining.length > contentW) {
-                    let breakAt = remaining.lastIndexOf(" ", contentW);
-                    if (breakAt <= 0)
-                        breakAt = contentW;
-                    lines.push(`${p.accent}${remaining.slice(0, breakAt)}${p.reset}`);
-                    remaining = remaining.slice(breakAt).trimStart();
-                }
-                if (remaining)
-                    lines.push(`${p.accent}${remaining}${p.reset}`);
-            }
-        }
-        // Truncate very long queries to keep the response visible
-        const MAX_QUERY_LINES = 20;
-        if (lines.length > MAX_QUERY_LINES) {
-            const overflow = lines.length - MAX_QUERY_LINES;
-            lines = [
-                ...lines.slice(0, MAX_QUERY_LINES),
-                `${p.dim}… ${overflow} more lines${p.reset}`,
-            ];
-        }
-        // Mode-specific border color and title
-        const borderColor = p.accent;
-        const title = `${p.accent}${p.bold}❯${p.reset}`;
-        // Backend/model label on the right (backend/model, highlighted)
-        const model = backendInfo?.model ?? llmClient?.model;
+        const model = backendInfo?.model;
         const backend = backendInfo?.name;
         let modelLabel;
         if (backend && model) {
@@ -419,16 +480,13 @@ export default function activate(ctx) {
         else if (backend) {
             modelLabel = `${p.bold}${backend}${p.reset}`;
         }
-        const framed = renderBoxFrame(lines, {
-            width: boxW,
-            style: "rounded",
-            borderColor,
-            title,
-            titleRight: modelLabel,
-        });
-        writer.write("\n");
-        for (const line of framed) {
-            writer.write(line + "\n");
+        const querySurface = compositor.surface("query");
+        const framed = ctx.call("tui:render-user-query", query, querySurface.columns, modelLabel);
+        if (framed.length > 0) {
+            querySurface.write("\n");
+            for (const line of framed) {
+                querySurface.writeLine(line);
+            }
         }
     }
     function writeAgentText(text) {
@@ -439,7 +497,7 @@ export default function activate(ctx) {
             s.isThinking = false;
             if (s.showThinkingText && s.renderer) {
                 s.renderer.flush();
-                const w = Math.min(80, writer.columns);
+                const w = Math.min(80, out().columns);
                 s.renderer.writeLine(`${p.dim}${"─".repeat(w)}${p.reset}`);
                 drain();
             }
@@ -478,7 +536,7 @@ export default function activate(ctx) {
         drain();
     });
     function writeCodeBlock(language, code) {
-        ctx.call("render:code-block", language, code, writer.columns);
+        ctx.call("render:code-block", language, code, cappedW());
     }
     function flushForRaw() {
         closeToolLine();
@@ -492,7 +550,7 @@ export default function activate(ctx) {
         flushForRaw();
         const escape = encodeImageForTerminal(data);
         if (escape) {
-            writer.write("  " + escape + "\n");
+            out().write("  " + escape + "\n");
         }
     });
     function writeInlineImage(data) {
@@ -520,7 +578,7 @@ export default function activate(ctx) {
     function renderDiffBody(diff, filePath, width) {
         if (diff.isIdentical)
             return [];
-        const boxW = Math.min(120, width);
+        const boxW = Math.min(120, width - 2); // -2 for writeLine indent
         const contentW = boxW - 4;
         const diffLines = renderDiff(diff, {
             width: contentW,
@@ -616,12 +674,12 @@ export default function activate(ctx) {
             locations: extra?.locations,
             rawInput: extra?.rawInput,
             displayDetail: extra?.displayDetail,
-        }, writer.columns);
+        }, cappedW());
         if (extra?.groupContinuation && lines.length > 0) {
             // Swap the colored kind icon for a muted tree connector,
             // and strip the tool name prefix — show detail only.
             const detail = extra.displayDetail || extractDetail(extra);
-            const maxW = Math.max(1, writer.columns - 6);
+            const maxW = Math.max(1, cappedW() - 6);
             const text = detail.length > maxW ? detail.slice(0, maxW - 1) + "…" : detail;
             lines[0] = detail
                 ? `${p.muted}├${p.reset} ${p.dim}${text}${p.reset}`
@@ -640,7 +698,7 @@ export default function activate(ctx) {
                 s.toolLineOpen = false;
             }
             else {
-                writer.write(`  ${batchPrefix}${lines[lines.length - 1]}`);
+                out().write(`  ${batchPrefix}${lines[lines.length - 1]}`);
                 s.toolLineOpen = true;
             }
         }
@@ -653,15 +711,9 @@ export default function activate(ctx) {
             return;
         stopCurrentSpinner();
         const elapsed = s.toolStartTime ? formatElapsed(Date.now() - s.toolStartTime) : "";
-        const timer = elapsed ? ` ${p.dim}${elapsed}${p.reset}` : "";
-        const summary = resultDisplay?.summary ? ` ${p.dim}${resultDisplay.summary}${p.reset}` : "";
-        const mark = exitCode === null
-            ? `${p.muted}(timed out)${p.reset}`
-            : exitCode === 0
-                ? `${p.success}✓${p.reset}${summary}${timer}`
-                : `${p.error}✗ exit ${exitCode}${p.reset}${summary}${timer}`;
+        const mark = ctx.call("tui:render-tool-complete", exitCode, elapsed, resultDisplay?.summary);
         if (s.toolLineOpen && s.commandOutputLineCount === 0) {
-            writer.write(` ${mark}\n`);
+            out().write(` ${mark}\n`);
             s.toolLineOpen = false;
         }
         else {
@@ -678,7 +730,7 @@ export default function activate(ctx) {
     function renderResultBody(body) {
         if (!s.renderer)
             return;
-        const lines = ctx.call("render:result-body", body, writer.columns) ?? [];
+        const lines = ctx.call("render:result-body", body, cappedW()) ?? [];
         for (const line of lines) {
             s.renderer.writeLine(line);
         }
@@ -703,8 +755,11 @@ export default function activate(ctx) {
         s.spinner = createSpinner({ startTime: s.spinnerStartTime });
         s.spinnerInterval = setInterval(() => {
             if (s.spinner) {
-                const line = renderSpinnerLine(s.spinner, s.spinnerLabel, s.spinnerOpts);
-                writer.write(`\r  ${line}\x1b[K`);
+                const frame = SPINNER_FRAMES[s.spinner.frame % SPINNER_FRAMES.length];
+                s.spinner.frame++;
+                const elapsed = formatElapsed(Date.now() - s.spinner.startTime);
+                const line = ctx.call("tui:render-spinner", s.spinnerLabel, frame, elapsed, s.spinnerOpts.hint);
+                out().write(`\r  ${line}\x1b[K`);
             }
         }, 80);
     }
@@ -714,13 +769,13 @@ export default function activate(ctx) {
             s.spinnerInterval = null;
         }
         if (s.spinner) {
-            writer.write("\r\x1b[2K");
+            out().write("\r\x1b[2K");
             s.spinner = null;
         }
     }
     function closeToolLine() {
         if (s.toolLineOpen) {
-            writer.write("\n");
+            out().write("\n");
             s.toolLineOpen = false;
         }
     }
@@ -737,20 +792,8 @@ export default function activate(ctx) {
         closeToolLine();
         if (!s.renderer)
             startAgentResponse();
-        const mark = s.toolGroupAllOk
-            ? `${p.success}✓${p.reset}`
-            : `${p.error}✗${p.reset}`;
-        const summary = s.toolGroupSummaries.length > 0
-            ? ` ${p.dim}${s.toolGroupSummaries.join(", ")}${p.reset}`
-            : "";
-        const collapsed = s.toolGroupCount - s.toolGroupRendered;
-        if (collapsed > 0) {
-            s.renderer.writeLine(`  ${p.muted}└${p.reset} ${p.dim}+${collapsed} more${p.reset} ${mark}${summary}`);
-        }
-        else {
-            // All items visible — close the tree with └ mark + summary
-            s.renderer.writeLine(`  ${p.muted}└${p.reset} ${mark}${summary}`);
-        }
+        const groupLine = ctx.call("tui:render-tool-group-summary", s.toolGroupCount, s.toolGroupRendered, s.toolGroupAllOk, s.toolGroupSummaries);
+        s.renderer.writeLine(groupLine);
         drain();
         s.toolGroupKind = undefined;
         s.toolGroupCount = 0;
@@ -758,6 +801,9 @@ export default function activate(ctx) {
         s.toolGroupRendered = 0;
         s.toolGroupSummaries = [];
     }
+    function renderCommandLine(line) {
+        return ctx.call("tui:render-command-output", line, s.currentToolKind);
+    }
     function writeCommandOutput(chunk) {
         if (!s.renderer)
             return;
@@ -770,7 +816,7 @@ export default function activate(ctx) {
         s.commandOutputBuffer = lines.pop();
         for (const line of lines) {
             if (s.commandOutputLineCount < maxLines) {
-                s.renderer.writeLine(`${p.dim}  ${line}${p.reset}`);
+                s.renderer.writeLine(renderCommandLine(line));
                 s.commandOutputLineCount++;
             }
             else {
@@ -790,7 +836,7 @@ export default function activate(ctx) {
             : getSettings().maxCommandOutputLines;
         if (s.commandOutputBuffer) {
             if (s.commandOutputLineCount < maxLines) {
-                s.renderer.writeLine(`${p.dim}  ${s.commandOutputBuffer}${p.reset}`);
+                s.renderer.writeLine(renderCommandLine(s.commandOutputBuffer));
                 s.commandOutputLineCount++;
             }
             else {
@@ -805,14 +851,22 @@ export default function activate(ctx) {
             const tail = s.commandOverflowLines.slice(-FAIL_OVERFLOW_MAX);
             const skipped = s.commandOverflowLines.length - tail.length;
             if (skipped > 0) {
-                s.renderer.writeLine(`${p.dim}  … ${skipped} lines hidden${p.reset}`);
+                s.renderer.writeLine(renderCommandLine(`… ${skipped} lines hidden`));
             }
             for (const line of tail) {
-                s.renderer.writeLine(`${p.dim}  ${line}${p.reset}`);
+                s.renderer.writeLine(renderCommandLine(line));
             }
         }
         else if (s.commandOutputOverflow > 0 && maxLines > 0) {
-            s.renderer.writeLine(`${p.dim}  … ${s.commandOutputOverflow} more lines${p.reset}`);
+            // Show last line of output so the user sees the tail (often the most useful part)
+            const tail = s.commandOverflowLines[s.commandOverflowLines.length - 1];
+            const hidden = tail ? s.commandOutputOverflow - 1 : s.commandOutputOverflow;
+            if (hidden > 0) {
+                s.renderer.writeLine(renderCommandLine(`… ${hidden} more lines`));
+            }
+            if (tail) {
+                s.renderer.writeLine(renderCommandLine(tail));
+            }
         }
         s.commandOutputOverflow = 0;
         s.commandOverflowLines = [];
@@ -829,7 +883,7 @@ export default function activate(ctx) {
         if (diff.isIdentical)
             return;
         contentGap("diff");
-        const lines = ctx.call("render:result-body", { kind: "diff", diff, filePath }, writer.columns) ?? [];
+        const lines = ctx.call("render:result-body", { kind: "diff", diff, filePath }, cappedW()) ?? [];
         if (!s.renderer)
             startAgentResponse();
         for (const line of lines) {
@@ -848,7 +902,7 @@ export default function activate(ctx) {
         }
         if (!entry.expandedLines) {
             const { filePath, diff } = entry;
-            const boxW = Math.min(120, writer.columns);
+            const boxW = Math.min(cappedW() - 2, out().columns - 2); // -2 for writeLine indent
             const contentW = boxW - 4;
             const diffLines = renderDiff(diff, {
                 width: contentW,
@@ -865,16 +919,16 @@ export default function activate(ctx) {
                 footer: [`  ${p.dim}ctrl+o to collapse${p.reset}`],
             });
         }
-        writer.write("\n");
+        out().write("\n");
         for (const line of entry.expandedLines) {
-            writer.write(line + "\n");
+            out().write(line + "\n");
         }
     }
     function showFileDiffCached(entry) {
-        const lines = ctx.call("render:result-body", { kind: "diff", diff: entry.diff, filePath: entry.filePath }, writer.columns) ?? [];
-        writer.write("\n");
+        const lines = ctx.call("render:result-body", { kind: "diff", diff: entry.diff, filePath: entry.filePath }, cappedW()) ?? [];
+        out().write("\n");
         for (const line of lines) {
-            writer.write(line + "\n");
+            out().write(line + "\n");
         }
     }
     function toggleThinkingDisplay() {
@@ -906,7 +960,7 @@ export default function activate(ctx) {
         else {
             if (s.renderer) {
                 s.renderer.flush();
-                const w = Math.min(80, writer.columns);
+                const w = Math.min(80, out().columns);
                 s.renderer.writeLine(`${p.dim}${"─".repeat(w)}${p.reset}`);
                 drain();
             }
@@ -914,9 +968,10 @@ export default function activate(ctx) {
         }
     }
     function showError(message) {
-        writer.write(`\n${p.error}Error: ${message}${p.reset}\n`);
+        const s = compositor.surface("status");
+        s.write("\n" + ctx.call("tui:render-error", message) + "\n");
     }
     function showInfo(message) {
-        writer.write(`${p.muted}${message}${p.reset}\n`);
+        compositor.surface("status").writeLine(ctx.call("tui:render-info", message));
     }
 }