@crouton-kit/crouter 0.3.70 → 0.3.78

package/dist/clients/attach/canvas-panels.js

@@ -1,8 +1,7 @@
 // canvas-panels.ts — the subscribed-node panel for `crtr surface attach` (Unit Q).
 //
-// Native implementation of canvas-nav.ts's BASE chrome (renderBase), reading
-// through the CanvasSource seam so the viewer chrome and graph overlay share the
-// same canvas read authority. Produces the two line stacks the viewer paints
+// Reads through the CanvasSource seam so the viewer chrome and graph overlay
+// share the same canvas read authority. Produces the two line stacks the viewer paints
 // into Containers around the editor:
 //   managers  → ABOVE the editor: this node's manager (its first subscriber).
 //   reports   → BELOW the editor: this node's live reports (active|idle

package/dist/clients/attach/chat-view.d.ts

@@ -28,9 +28,10 @@ export declare class ChatView {
     private readonly tui;
     /** The chat scroll area handed in by the attach command. */
     private readonly container;
-    /** Activity/status area, pinned as the LAST child of `container` (mirrors pi's
-     *  statusContainer sitting directly below chatContainer). Holds the working
-     *  spinner / compaction+retry loaders. */
+    /** Settled history is cached independently from the live status area so picker
+     *  navigation does not re-render a long conversation on every key repeat. */
+    private readonly historyContainer;
+    /** Activity/status area below history. Holds working/compaction/retry loaders. */
     private readonly statusContainer;
     private readonly cwd;
     private readonly showImages;
@@ -54,8 +55,6 @@ export declare class ChatView {
     private bashComponent;
     /** The single active activity loader (working/compaction/retry), if any. */
     private activityLoader;
-    /** While true, `append` skips re-pinning the status container (bulk rebuild). */
-    private bulkMode;
     /** 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. */
@@ -91,15 +90,15 @@ export declare class ChatView {
     private addMessageToChat;
     /** Tool component with native viewer renderers for crouter-owned tool output. */
     private makeToolComponent;
-    /** Append a child while keeping the activity/status area pinned to the bottom. */
+    /** Append conversation content above the independent live status area. */
     private append;
     /** 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. */
     private renderWidth;
-    /** Number of chat children excluding the pinned status container. */
+    /** Number of rendered conversation components. */
     private chatChildCount;
-    /** Clear all chat content and re-pin an empty status container. */
+    /** Clear all chat content. */
     private resetChat;
     private makeLoader;
     /** Swap the single active activity indicator (working/compaction/retry). */

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

@@ -27,6 +27,7 @@ import { CRTR_OUTPUT_CUSTOM_TYPE, CrtrOutputMessageComponent, createCrtrBashTool
 import { CRTR_CYCLE_DIVIDER_CUSTOM_TYPE } from '../../core/runtime/session-cycles.js';
 import { SITUATIONAL_CONTEXT_CUSTOM_TYPE } from '../../core/runtime/situational-context.js';
 import { transformMessageMermaid } from './mermaid-render.js';
+import { createCrtrEditToolDefinition } from './edit-diff-render.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). */
@@ -51,13 +52,56 @@ function isExpandable(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 {
+    cachedWidth;
+    cachedLines;
+    volatile = false;
+    markDirty() {
+        this.cachedLines = undefined;
+    }
+    setVolatile(value) {
+        this.volatile = value;
+        if (value)
+            this.markDirty();
+    }
+    addChild(component) {
+        super.addChild(component);
+        this.markDirty();
+    }
+    removeChild(component) {
+        super.removeChild(component);
+        this.markDirty();
+    }
+    clear() {
+        super.clear();
+        this.markDirty();
+    }
+    invalidate() {
+        super.invalidate();
+        this.markDirty();
+    }
+    render(width) {
+        if (!this.volatile && this.cachedLines !== undefined && this.cachedWidth === width)
+            return this.cachedLines;
+        const lines = super.render(width);
+        if (!this.volatile) {
+            this.cachedWidth = width;
+            this.cachedLines = lines;
+        }
+        return lines;
+    }
+}
 export class ChatView {
     tui;
     /** The chat scroll area handed in by the attach command. */
     container;
-    /** Activity/status area, pinned as the LAST child of `container` (mirrors pi's
-     *  statusContainer sitting directly below chatContainer). Holds the working
-     *  spinner / compaction+retry loaders. */
+    /** 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();
     cwd;
     showImages;
@@ -81,8 +125,6 @@ export class ChatView {
     bashComponent;
     /** The single active activity loader (working/compaction/retry), if any. */
     activityLoader;
-    /** While true, `append` skips re-pinning the status container (bulk rebuild). */
-    bulkMode = false;
     /** 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. */
@@ -100,6 +142,7 @@ export class ChatView {
         this.spinnerStyle = opts.palette?.active ?? defaultSpinnerStyle;
         this.dimStyle = opts.palette?.muted ?? defaultDimStyle;
         this.errorStyle = opts.palette?.error ?? defaultErrorStyle;
+        this.container.addChild(this.historyContainer);
         this.container.addChild(this.statusContainer);
     }
     // -------------------------------------------------------------------------
@@ -115,69 +158,58 @@ export class ChatView {
         const renderedPendingTools = new Map();
         const messages = snapshot.messages;
         const lastIndex = messages.length - 1;
-        // Rebuild in bulk: detach the pinned status area, append children directly,
-        // re-pin ONCE at the end. Keeps the rebuild O(N) instead of O(N²) re-pins for
-        // a long transcript (see `append`).
-        this.container.removeChild(this.statusContainer);
-        this.bulkMode = true;
-        try {
-            for (let i = 0; i < messages.length; i++) {
-                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;
-                    // 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, getMarkdownTheme(), this.hiddenThinkingLabel);
-                        this.append(this.streamingComponent);
-                        this.streamingComponent.updateContent(message);
+        for (let i = 0; i < messages.length; i++) {
+            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;
+                // 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, getMarkdownTheme(), this.hiddenThinkingLabel);
+                    this.append(this.streamingComponent);
+                    this.streamingComponent.updateContent(message);
+                }
+                else {
+                    this.addMessageToChat(message);
+                }
+                for (const content of this.assistantToolCalls(message)) {
+                    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'
+                            ? 'Operation aborted'
+                            : (message.errorMessage ?? 'Error');
+                        component.updateResult({ content: [{ type: 'text', text: errorMessage }], isError: true });
                     }
                     else {
-                        this.addMessageToChat(message);
-                    }
-                    for (const content of this.assistantToolCalls(message)) {
-                        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'
-                                ? 'Operation aborted'
-                                : (message.errorMessage ?? 'Error');
-                            component.updateResult({ content: [{ type: 'text', text: errorMessage }], isError: true });
-                        }
-                        else {
-                            renderedPendingTools.set(content.id, component);
-                        }
-                    }
-                }
-                else if (message.role === 'toolResult') {
-                    const component = renderedPendingTools.get(message.toolCallId);
-                    if (component) {
-                        component.updateResult(message);
-                        renderedPendingTools.delete(message.toolCallId);
+                        renderedPendingTools.set(content.id, component);
                     }
                 }
-                else {
-                    this.addMessageToChat(message);
+            }
+            else if (message.role === 'toolResult') {
+                const component = renderedPendingTools.get(message.toolCallId);
+                if (component) {
+                    component.updateResult(message);
+                    renderedPendingTools.delete(message.toolCallId);
                 }
             }
-        }
-        finally {
-            this.bulkMode = false;
-            this.container.addChild(this.statusContainer);
+            else {
+                this.addMessageToChat(message);
+            }
         }
         for (const [id, component] of renderedPendingTools) {
             this.pendingTools.set(id, component);
@@ -185,6 +217,7 @@ export class ChatView {
         // 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.
+        this.historyContainer.setVolatile(snapshot.state.isStreaming);
         if (snapshot.state.isStreaming)
             this.setActivity(this.makeLoader('Working...'));
         this.tui.requestRender();
@@ -205,10 +238,11 @@ export class ChatView {
      *  the caller can surface a notice. */
     toggleToolsExpanded() {
         this.toolOutputExpanded = !this.toolOutputExpanded;
-        for (const child of this.container.children) {
+        for (const child of this.historyContainer.children) {
             if (isExpandable(child))
                 child.setExpanded(this.toolOutputExpanded);
         }
+        this.historyContainer.markDirty();
         this.tui.requestRender();
         return this.toolOutputExpanded;
     }
@@ -217,10 +251,11 @@ export class ChatView {
      *  the container, so the loop covers it too). Returns the new HIDDEN state. */
     toggleThinking() {
         this.hideThinking = !this.hideThinking;
-        for (const child of this.container.children) {
+        for (const child of this.historyContainer.children) {
             if (child instanceof AssistantMessageComponent)
                 child.setHideThinkingBlock(this.hideThinking);
         }
+        this.historyContainer.markDirty();
         this.tui.requestRender();
         return this.hideThinking;
     }
@@ -232,16 +267,18 @@ export class ChatView {
         switch (event.type) {
             case 'agent_start': {
                 this.pendingTools.clear();
+                this.historyContainer.setVolatile(true);
                 this.setActivity(this.makeLoader('Working...'));
                 break;
             }
             case 'agent_end': {
                 // Drop a dangling streaming component (e.g. aborted before message_end).
                 if (this.streamingComponent) {
-                    this.container.removeChild(this.streamingComponent);
+                    this.historyContainer.removeChild(this.streamingComponent);
                     this.streamingComponent = undefined;
                 }
                 this.pendingTools.clear();
+                this.historyContainer.setVolatile(false);
                 this.setActivity(undefined);
                 break;
             }
@@ -393,6 +430,7 @@ export class ChatView {
             default:
                 break;
         }
+        this.historyContainer.markDirty();
         this.tui.requestRender();
     }
     // -------------------------------------------------------------------------
@@ -404,16 +442,20 @@ export class ChatView {
     bashStart(command, excludeFromContext) {
         const component = new BashExecutionComponent(command, this.tui, excludeFromContext);
         this.bashComponent = component;
+        this.historyContainer.setVolatile(true);
         this.append(component);
         this.tui.requestRender();
     }
     bashOutput(chunk) {
         this.bashComponent?.appendOutput(chunk);
+        this.historyContainer.markDirty();
         this.tui.requestRender();
     }
     bashEnd(result) {
         this.bashComponent?.setComplete(result.exitCode, result.cancelled, result.truncated ? { truncated: true } : undefined, result.fullOutputPath);
         this.bashComponent = undefined;
+        this.historyContainer.setVolatile(false);
+        this.historyContainer.markDirty();
         this.tui.requestRender();
     }
     // -------------------------------------------------------------------------
@@ -524,20 +566,18 @@ export class ChatView {
     // -------------------------------------------------------------------------
     /** Tool component with native viewer renderers for crouter-owned tool output. */
     makeToolComponent(name, id, args) {
-        const toolDefinition = name === 'bash' ? createCrtrBashToolDefinition(args) : undefined;
+        const toolDefinition = name === 'bash'
+            ? createCrtrBashToolDefinition(args)
+            : name === 'edit'
+                ? createCrtrEditToolDefinition(this.cwd)
+                : undefined;
         const component = new ToolExecutionComponent(name, id, args, { showImages: this.showImages, imageWidthCells: this.imageWidthCells }, toolDefinition, this.tui, this.cwd);
         component.setExpanded(this.toolOutputExpanded);
         return component;
     }
-    /** Append a child while keeping the activity/status area pinned to the bottom. */
+    /** Append conversation content above the independent live status area. */
     append(child) {
-        if (this.bulkMode) {
-            this.container.addChild(child);
-            return;
-        }
-        this.container.removeChild(this.statusContainer);
-        this.container.addChild(child);
-        this.container.addChild(this.statusContainer);
+        this.historyContainer.addChild(child);
     }
     /** Approximate render width for inline mermaid diagrams. Only affects
      *  termrender's trailing padding (stripped in the transform), so the terminal
@@ -545,18 +585,18 @@ export class ChatView {
     renderWidth() {
         return Math.max(40, process.stdout.columns ?? 80);
     }
-    /** Number of chat children excluding the pinned status container. */
+    /** Number of rendered conversation components. */
     chatChildCount() {
-        return this.container.children.filter((c) => c !== this.statusContainer).length;
+        return this.historyContainer.children.length;
     }
-    /** Clear all chat content and re-pin an empty status container. */
+    /** Clear all chat content. */
     resetChat() {
         this.setActivity(undefined);
         this.streamingComponent = undefined;
         this.pendingTools.clear();
         this.lastAssistantText = undefined;
-        this.container.clear();
-        this.container.addChild(this.statusContainer);
+        this.historyContainer.setVolatile(false);
+        this.historyContainer.clear();
     }
     makeLoader(message) {
         return new Loader(this.tui, this.spinnerStyle, this.dimStyle, message);

package/dist/clients/attach/edit-diff-render.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Attach-viewer tool definition for `edit`: pi's builtin definition drives
+ * all state (preview computation, header, success/error bg), then the diff
+ * body is re-skinned Claude-Code-style after every render pass.
+ */
+export declare function createCrtrEditToolDefinition(cwd: string): unknown;

package/dist/clients/attach/edit-diff-render.js

@@ -0,0 +1,263 @@
+// edit-diff-render.ts — Claude-Code-style diff rendering for the attach viewer.
+//
+// pi's builtin edit renderer (core/tools/edit.js → renderDiff) paints diff
+// lines with colored FOREGROUND text plus inverse-video on changed tokens.
+// This module re-skins that body the way Claude Code renders diffs: every
+// added line gets a full-width tinted green BACKGROUND, every removed line a
+// full-width tinted red background, with the changed span inside a 1↔1 line
+// modification emphasized in a brighter tint of the same color.
+//
+// We deliberately keep pi's builtin edit definition as the engine — it owns
+// the async preview computation (computeEditsDiff keyed off ctx.state) and
+// the header/status-bg lifecycle — and only swap the rendered diff body.
+// The raw diff string lives on the call component (`preview.diff`), so no
+// ANSI re-parsing of pi's output is ever needed.
+import { createEditToolDefinition } from '@earendil-works/pi-coding-agent';
+import { Container, Spacer, Text } from '@earendil-works/pi-tui';
+const FALLBACK_ADDED = { r: 181, g: 189, b: 104 }; // pi dark green
+const FALLBACK_REMOVED = { r: 204, g: 102, b: 102 }; // pi dark red
+const FALLBACK_CARD_BG = { r: 40, g: 50, b: 40 }; // pi dark toolSuccessBg
+/** Standard xterm-256 palette → rgb (cube + grayscale ramps; 16 base approximated). */
+function xterm256ToRgb(n) {
+    if (n < 16) {
+        const base = [
+            [0, 0, 0], [205, 0, 0], [0, 205, 0], [205, 205, 0],
+            [0, 0, 238], [205, 0, 205], [0, 205, 205], [229, 229, 229],
+            [127, 127, 127], [255, 0, 0], [0, 255, 0], [255, 255, 0],
+            [92, 92, 255], [255, 0, 255], [0, 255, 255], [255, 255, 255],
+        ];
+        const [r, g, b] = base[n] ?? [128, 128, 128];
+        return { r, g, b };
+    }
+    if (n < 232) {
+        const i = n - 16;
+        const steps = [0, 95, 135, 175, 215, 255];
+        return { r: steps[Math.floor(i / 36) % 6], g: steps[Math.floor(i / 6) % 6], b: steps[i % 6] };
+    }
+    const v = 8 + (n - 232) * 10;
+    return { r: v, g: v, b: v };
+}
+/** rgb → nearest xterm-256 cube/gray index (for non-truecolor terminals). */
+function rgbTo256(c) {
+    const toCube = (v) => (v < 48 ? 0 : v < 115 ? 1 : Math.min(5, Math.floor((v - 35) / 40)));
+    const steps = [0, 95, 135, 175, 215, 255];
+    const cr = toCube(c.r);
+    const cg = toCube(c.g);
+    const cb = toCube(c.b);
+    const cubeIdx = 16 + 36 * cr + 6 * cg + cb;
+    const cube = { r: steps[cr], g: steps[cg], b: steps[cb] };
+    const gray = Math.max(0, Math.min(23, Math.round((((c.r + c.g + c.b) / 3) - 8) / 10)));
+    const grayIdx = 232 + gray;
+    const grayRgb = xterm256ToRgb(grayIdx);
+    const dist = (a, b) => (a.r - b.r) ** 2 + (a.g - b.g) ** 2 + (a.b - b.b) ** 2;
+    return dist(c, cube) <= dist(c, grayRgb) ? cubeIdx : grayIdx;
+}
+/** Parse the rgb out of a theme SGR open code (`38/48;2;r;g;b` or `38/48;5;n`). */
+function parseAnsiRgb(ansi) {
+    const truecolor = ansi.match(/\x1b\[[34]8;2;(\d+);(\d+);(\d+)m/);
+    if (truecolor)
+        return { r: Number(truecolor[1]), g: Number(truecolor[2]), b: Number(truecolor[3]) };
+    const indexed = ansi.match(/\x1b\[[34]8;5;(\d+)m/);
+    if (indexed)
+        return xterm256ToRgb(Number(indexed[1]));
+    return undefined;
+}
+function mix(a, b, t) {
+    return {
+        r: Math.round(a.r * t + b.r * (1 - t)),
+        g: Math.round(a.g * t + b.g * (1 - t)),
+        b: Math.round(a.b * t + b.b * (1 - t)),
+    };
+}
+function bgOpen(c, mode) {
+    if (mode === 'truecolor')
+        return `\x1b[48;2;${c.r};${c.g};${c.b}m`;
+    return `\x1b[48;5;${rgbTo256(c)}m`;
+}
+function themeFgRgb(theme, name, fallback) {
+    try {
+        return parseAnsiRgb(theme.getFgAnsi(name)) ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function themeBgRgb(theme, name, fallback) {
+    try {
+        return parseAnsiRgb(theme.getBgAnsi(name)) ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+// ---------------------------------------------------------------------------
+// Diff body rendering
+// ---------------------------------------------------------------------------
+/** pi's display-diff line format: "+123 content" / "-123 content" / " 123 content". */
+function parseDiffLine(line) {
+    const match = line.match(/^([+-\s])(\s*\d*)\s(.*)$/);
+    if (!match)
+        return null;
+    return { prefix: match[1], lineNum: match[2], content: match[3] };
+}
+function replaceTabs(text) {
+    return text.replace(/\t/g, '   ');
+}
+/** Common prefix/suffix char-span diff for a single-line 1↔1 modification. */
+function changedSpans(oldS, newS) {
+    const maxP = Math.min(oldS.length, newS.length);
+    let p = 0;
+    while (p < maxP && oldS[p] === newS[p])
+        p++;
+    let s = 0;
+    while (s < maxP - p && oldS[oldS.length - 1 - s] === newS[newS.length - 1 - s])
+        s++;
+    return { old: [p, oldS.length - s], new: [p, newS.length - s] };
+}
+/** Wrap the changed span in a brighter tint, restoring the line tint after. */
+function emphasize(content, span, emphOpen, lineOpen) {
+    const [start, end] = span;
+    if (end <= start)
+        return content;
+    return content.slice(0, start) + emphOpen + content.slice(start, end) + lineOpen + content.slice(end);
+}
+/**
+ * Build the Claude-Code-style diff body: one full-width background-tinted
+ * Text per added/removed line (continuation lines of a wrapped long line keep
+ * the tint, exactly like Claude Code), plain context lines in between.
+ *
+ * `restoreBg` is the SGR that must follow each tinted line so the host Box's
+ * own background resumes on its right padding column (a bare `\x1b[49m` would
+ * punch a default-bg notch into the card edge).
+ */
+function buildDiffBody(diffText, theme, restoreBg) {
+    const mode = theme.getColorMode();
+    const cardBg = themeBgRgb(theme, 'toolSuccessBg', FALLBACK_CARD_BG);
+    const addedFg = themeFgRgb(theme, 'toolDiffAdded', FALLBACK_ADDED);
+    const removedFg = themeFgRgb(theme, 'toolDiffRemoved', FALLBACK_REMOVED);
+    const addedLineBg = bgOpen(mix(addedFg, cardBg, 0.24), mode);
+    const addedEmphBg = bgOpen(mix(addedFg, cardBg, 0.48), mode);
+    const removedLineBg = bgOpen(mix(removedFg, cardBg, 0.24), mode);
+    const removedEmphBg = bgOpen(mix(removedFg, cardBg, 0.48), mode);
+    const container = new Container();
+    const pushLine = (styled, lineBg) => {
+        const bgFn = lineBg === undefined ? undefined : (padded) => lineBg + padded + restoreBg;
+        container.addChild(new Text(styled, 0, 0, bgFn));
+    };
+    const pushRemoved = (lineNum, content) => {
+        pushLine(`${theme.fg('toolDiffRemoved', `-${lineNum}`)} ${content}`, removedLineBg);
+    };
+    const pushAdded = (lineNum, content) => {
+        pushLine(`${theme.fg('toolDiffAdded', `+${lineNum}`)} ${content}`, addedLineBg);
+    };
+    const lines = diffText.split('\n');
+    let i = 0;
+    while (i < lines.length) {
+        const parsed = parseDiffLine(lines[i]);
+        if (!parsed) {
+            pushLine(theme.fg('toolDiffContext', lines[i]));
+            i++;
+            continue;
+        }
+        if (parsed.prefix === '-') {
+            const removed = [];
+            while (i < lines.length) {
+                const p = parseDiffLine(lines[i]);
+                if (!p || p.prefix !== '-')
+                    break;
+                removed.push({ lineNum: p.lineNum, content: replaceTabs(p.content) });
+                i++;
+            }
+            const added = [];
+            while (i < lines.length) {
+                const p = parseDiffLine(lines[i]);
+                if (!p || p.prefix !== '+')
+                    break;
+                added.push({ lineNum: p.lineNum, content: replaceTabs(p.content) });
+                i++;
+            }
+            // Single-line modification → emphasize the changed span in a brighter tint.
+            if (removed.length === 1 && added.length === 1) {
+                const spans = changedSpans(removed[0].content, added[0].content);
+                pushRemoved(removed[0].lineNum, emphasize(removed[0].content, spans.old, removedEmphBg, removedLineBg));
+                pushAdded(added[0].lineNum, emphasize(added[0].content, spans.new, addedEmphBg, addedLineBg));
+            }
+            else {
+                for (const line of removed)
+                    pushRemoved(line.lineNum, line.content);
+                for (const line of added)
+                    pushAdded(line.lineNum, line.content);
+            }
+        }
+        else if (parsed.prefix === '+') {
+            pushAdded(parsed.lineNum, replaceTabs(parsed.content));
+            i++;
+        }
+        else {
+            pushLine(theme.fg('toolDiffContext', ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+            i++;
+        }
+    }
+    return container;
+}
+// ---------------------------------------------------------------------------
+// Tool definition wrapper
+// ---------------------------------------------------------------------------
+/** Replace the pi-rendered diff body inside the edit call Box (children:
+ *  [header, Spacer, body]) with the full-background rendering. No-op when
+ *  there is no successful preview (header-only or error states keep pi's
+ *  rendering untouched). */
+function restyleEditCallBox(box, theme) {
+    const preview = box.preview;
+    if (!preview || 'error' in preview || box.children.length < 2)
+        return;
+    const header = box.children[0];
+    box.clear();
+    box.addChild(header);
+    box.addChild(new Spacer(1));
+    // With a successful preview the edit card bg is always toolSuccessBg
+    // (mirrors pi's getEditHeaderBg), so tinted lines restore to that color.
+    box.addChild(buildDiffBody(preview.diff, theme, theme.getBgAnsi('toolSuccessBg')));
+}
+/**
+ * Attach-viewer tool definition for `edit`: pi's builtin definition drives
+ * all state (preview computation, header, success/error bg), then the diff
+ * body is re-skinned Claude-Code-style after every render pass.
+ */
+export function createCrtrEditToolDefinition(cwd) {
+    const builtin = createEditToolDefinition(cwd);
+    return {
+        name: 'edit',
+        label: 'edit',
+        description: 'Render edit diffs with full-line backgrounds in the attach viewer.',
+        parameters: {},
+        renderShell: 'self',
+        renderCall(args, theme, context) {
+            const component = builtin.renderCall(args, theme, context);
+            const callBox = context.state.callComponent;
+            if (callBox)
+                restyleEditCallBox(callBox, theme);
+            return component;
+        },
+        renderResult(result, options, theme, context) {
+            const component = builtin.renderResult(result, options, theme, context);
+            const callBox = context.state.callComponent;
+            if (callBox) {
+                // builtin renderResult re-ran buildEditCallComponent (pi styling) —
+                // restyle the refreshed body.
+                restyleEditCallBox(callBox, theme);
+                return component;
+            }
+            // Fallback path (no call box state, e.g. a bare result replay): render
+            // the result diff standalone. No host Box here, so restore to default bg.
+            const resultDiff = result?.details?.diff;
+            if (!context.isError && typeof resultDiff === 'string') {
+                const container = new Container();
+                container.addChild(new Spacer(1));
+                container.addChild(buildDiffBody(resultDiff, theme, '\x1b[49m'));
+                return container;
+            }
+            return component;
+        },
+    };
+}