@hheei/pi-ext-ui 0.1.0 → 0.2.1

package/README.md

@@ -5,3 +5,5 @@ Pi UI primitives and a small set of specialized tool renderers.
 `pi-ext-ui` owns the visual result, not tool execution. Its default resolver only handles tools with an explicit specialized renderer (`edit`, `read`, `write`, `apply_patch`, `eval`, and `codemode`). Other tools remain on Pi's native renderer. Extensions can opt into the shared visual API with `createToolView`, `ToolView`, and `DiffView`, or explicitly add a tool through resolver options.
 
 The shared view API owns fold levels, compact sections, status glyphs, copy feedback, and width-safe rendering. It does not read files, execute tools, infer outcomes, or import a concrete extension.
+
+Background Bash and subagent tools own their display formats through ext-core `ToolPresentation` providers. This resolver consumes those providers automatically, including nested codemode calls, and adds shared folding and copy controls. Without `pi-ext-ui`, the same tools retain native Pi renderers. No direct dependency on `pi-ext-ui` is required by the tool extensions.

package/dist/extension.js

@@ -1,4 +1,15 @@
-import { registerCollapsibleToolRenderer } from "./renderer.js";
+import { messageViewPoint, registerExtensionHook, registerExtensionLifecycle, toolRendererPoint, } from "@hheei/pi-ext-core";
+import { createMessageView } from "./message-view.js";
+import { createOptionalToolRendererFactory, registerCollapsibleToolRenderer } from "./renderer.js";
 export default function (pi) {
     registerCollapsibleToolRenderer(pi);
+    registerExtensionLifecycle(pi, {
+        key: "@hheei/pi-ext-ui",
+        start(context) {
+            const toolRenderers = registerExtensionHook(pi, toolRendererPoint, createOptionalToolRendererFactory(pi));
+            context.resources.add("tool-renderer", () => toolRenderers.dispose());
+            const handle = registerExtensionHook(context.pi, messageViewPoint, createMessageView);
+            context.resources.add("message-view", () => handle.dispose());
+        },
+    });
 }

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { type DiffHunk, type DiffLine, type DiffSource, type DiffStats, DiffView, type DiffViewOptions, diffStats, } from "./diff-view.js";
-export { type CollapsibleToolRendererOptions, createCollapsibleToolRendererResolver, estimateStreamingTokens, type NestedCallRecord, registerCollapsibleToolRenderer, SPECIALIZED_TOOL_RENDERERS, type SpecializedToolRendererName, type ToolRenderContext, WEB_ACCESS_TOOLS, type WebAccessToolName, } from "./renderer.js";
-export { CollapsibleToolFrame, type CollapsibleToolFrameOptions, createToolView, type FoldLevel, type RailColorToken, type RailSection, type ToolStatusKind, ToolView, type ToolViewCopySpec, type ToolViewHeaderSpec, type ToolViewSpec, transitionFoldLevel, } from "./tool-view.js";
+export { createMessageView, type MessageRows, type MessageTone, MessageView, type MessageViewHeader, type MessageViewSpec, } from "./message-view.js";
+export { extractChildToolCopyText, NestedCallsView, type NestedCallsViewProps, } from "./nested-calls-view.js";
+export { type CollapsibleToolRendererOptions, createCollapsibleToolRendererResolver, estimateStreamingTokens, inlinePresentation, type NestedCallRecord, registerCollapsibleToolRenderer, SPECIALIZED_TOOL_RENDERERS, type SpecializedToolRendererName, type ToolRenderContext, WEB_ACCESS_TOOLS, type WebAccessToolName, } from "./renderer.js";
+export { type Collapsible, createToolView, type FoldLevel, formatStatusGlyph, formatToolHeaderText, isCollapsible, type RailColorToken, type RailSection, type ToolStatusKind, ToolView, type ToolViewCopySpec, type ToolViewHeaderSpec, type ToolViewSpec, transitionFoldLevel, } from "./tool-view.js";
+export { type CapturedToolCall, clearCapturedNestedCalls, getCapturedNestedCalls, recordToolExecutionEnd, recordToolExecutionStart, } from "./tracker.js";
 export { formatTurnFlow, type TurnFlowData, type TurnToolCallSummary, } from "./turn-copy.js";

package/dist/index.js

@@ -1,4 +1,7 @@
 export { DiffView, diffStats, } from "./diff-view.js";
-export { createCollapsibleToolRendererResolver, estimateStreamingTokens, registerCollapsibleToolRenderer, SPECIALIZED_TOOL_RENDERERS, WEB_ACCESS_TOOLS, } from "./renderer.js";
-export { CollapsibleToolFrame, createToolView, ToolView, transitionFoldLevel, } from "./tool-view.js";
+export { createMessageView, MessageView, } from "./message-view.js";
+export { extractChildToolCopyText, NestedCallsView, } from "./nested-calls-view.js";
+export { createCollapsibleToolRendererResolver, estimateStreamingTokens, inlinePresentation, registerCollapsibleToolRenderer, SPECIALIZED_TOOL_RENDERERS, WEB_ACCESS_TOOLS, } from "./renderer.js";
+export { createToolView, formatStatusGlyph, formatToolHeaderText, isCollapsible, ToolView, transitionFoldLevel, } from "./tool-view.js";
+export { clearCapturedNestedCalls, getCapturedNestedCalls, recordToolExecutionEnd, recordToolExecutionStart, } from "./tracker.js";
 export { formatTurnFlow, } from "./turn-copy.js";

package/dist/message-view.d.ts

@@ -0,0 +1,15 @@
+import { type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
+import type { MessageViewSpec } from "@hheei/pi-ext-core";
+export type { MessageRows, MessageTone, MessageViewHeader, MessageViewSpec, } from "@hheei/pi-ext-core";
+export declare function createMessageView(spec: MessageViewSpec): MessageView;
+export declare class MessageView implements Component {
+    #private;
+    constructor(spec: MessageViewSpec);
+    get expandable(): boolean;
+    /** What the user sees. Host ctrl+o wins over the remembered collapse. */
+    get expanded(): boolean;
+    toggle(): void;
+    render(width: number): string[];
+    invalidate(): void;
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+}

package/dist/message-view.js

@@ -0,0 +1,130 @@
+import { truncateToWidth, } from "@earendil-works/pi-tui";
+import { toContentRows, toSingleRow } from "./tool-view.js";
+/**
+ * A transcript notice, not a tool execution.
+ *
+ * ToolView owns status, copy, rails, and the three-level fold. A message is a kind plus a
+ * summary, optional preview lines, and a body that opens in one step. Expansion is remembered
+ * on `stateHolder` by identity, so a host rebuild does not write a field into a session entry.
+ */
+const expansion = new WeakMap();
+const truncate = (text, width) => truncateToWidth(text, width, "…");
+function remembered(holder, fallback) {
+    if (holder === undefined)
+        return fallback;
+    return expansion.get(holder) ?? fallback;
+}
+function remember(holder, value) {
+    if (holder === undefined)
+        return;
+    expansion.set(holder, value);
+}
+function hasRows(source) {
+    if (source === undefined)
+        return false;
+    if (typeof source === "string")
+        return source.trim() !== "";
+    if (Array.isArray(source))
+        return source.some((line) => line.trim() !== "");
+    return true;
+}
+function isComponent(source) {
+    return typeof source !== "string" && !Array.isArray(source);
+}
+function layRows(source, width) {
+    if (source === undefined || !hasRows(source))
+        return [];
+    const inner = Math.max(1, width - 2);
+    const raw = isComponent(source)
+        ? source.render(inner).flatMap((line) => toContentRows(line))
+        : (typeof source === "string" ? [source] : source).flatMap((line) => toContentRows(line));
+    return raw.map((line) => truncate(`  ${line}`, width));
+}
+function invalidateRows(source) {
+    if (source !== undefined && isComponent(source))
+        source.invalidate();
+}
+export function createMessageView(spec) {
+    return new MessageView(spec);
+}
+export class MessageView {
+    #spec;
+    #localExpanded;
+    #lastWidth = 80;
+    #lastHeight = 0;
+    #cache;
+    constructor(spec) {
+        this.#spec = spec;
+        this.#localExpanded = remembered(spec.stateHolder, spec.defaultExpanded === true);
+    }
+    get expandable() {
+        return hasRows(this.#spec.body);
+    }
+    /** What the user sees. Host ctrl+o wins over the remembered collapse. */
+    get expanded() {
+        return this.expandable && (this.#spec.forcedExpanded === true || this.#localExpanded);
+    }
+    toggle() {
+        if (!this.expandable)
+            return;
+        const next = !this.expanded;
+        this.#localExpanded = next;
+        remember(this.#spec.stateHolder, next);
+        this.#cache = undefined;
+        this.#spec.invalidate?.();
+    }
+    render(width) {
+        const expanded = this.expanded;
+        if (this.#cache !== undefined &&
+            this.#cache.width === width &&
+            this.#cache.expanded === expanded) {
+            return this.#cache.lines;
+        }
+        const pad = Math.max(0, this.#spec.outputPad ?? 0);
+        const safeWidth = Math.max(1, width - pad * 2);
+        this.#lastWidth = width;
+        const leftPad = pad > 0 ? " ".repeat(pad) : "";
+        const lines = [
+            this.#header(safeWidth, expanded),
+            ...layRows(this.#spec.preview, safeWidth),
+            ...(expanded ? layRows(this.#spec.body, safeWidth) : []),
+        ].map((line) => (leftPad === "" ? line : `${leftPad}${line}`));
+        this.#lastHeight = lines.length;
+        this.#cache = { width, expanded, lines };
+        return lines;
+    }
+    invalidate() {
+        this.#cache = undefined;
+        invalidateRows(this.#spec.preview);
+        invalidateRows(this.#spec.body);
+    }
+    handleMouse(event) {
+        if (!this.expandable ||
+            event.type === "wheel" ||
+            event.type !== "click" ||
+            event.button !== "left") {
+            return undefined;
+        }
+        const effectiveWidth = event.width > 0 ? event.width : this.#lastWidth;
+        const pad = Math.max(0, this.#spec.outputPad ?? 0);
+        const innerX = event.x - pad;
+        const innerWidth = Math.max(1, effectiveWidth - pad * 2);
+        if (innerX < 0 || innerX >= innerWidth)
+            return undefined;
+        if (this.#lastHeight > 0 && (event.y < 0 || event.y >= this.#lastHeight))
+            return undefined;
+        if (event.y !== 0)
+            return undefined;
+        this.toggle();
+        return { handled: true, render: true };
+    }
+    #header(width, expanded) {
+        const { theme, header } = this.#spec;
+        const kind = theme.fg("dim", toSingleRow(header.kind));
+        const summaryRaw = header.summary === undefined ? "" : toSingleRow(header.summary);
+        const summary = summaryRaw === "" ? "" : theme.fg(header.tone ?? "dim", summaryRaw);
+        const label = summary === "" ? kind : `${kind}${theme.fg("dim", " · ")}${summary}`;
+        const pin = this.expandable ? `${theme.fg("dim", expanded ? "▾" : "▸")} ` : "";
+        return truncate(`${pin}${label}`, width);
+    }
+}

package/dist/nested-calls-view.d.ts

@@ -0,0 +1,28 @@
+import { type Theme, type ToolRenderers } from "@earendil-works/pi-coding-agent";
+import { type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
+import type { ToolPresentationProvider } from "@hheei/pi-ext-core";
+import { type NestedCallRecord, type ToolRenderContext } from "./renderer.js";
+import { type Collapsible } from "./tool-view.js";
+import type { CapturedToolCall } from "./tracker.js";
+export declare function extractChildToolCopyText(call: CapturedToolCall | NestedCallRecord, full?: boolean): string;
+export interface NestedCallsViewProps {
+    readonly resolvePresentation?: ((toolName: string) => ToolPresentationProvider | undefined) | undefined;
+    readonly calls: readonly (CapturedToolCall | NestedCallRecord)[];
+    readonly theme: Theme;
+    readonly context: ToolRenderContext;
+    readonly resolveChildRenderer?: ((toolName: string) => ToolRenderers | undefined) | undefined;
+    readonly copyToClipboard?: ((text: string) => Promise<void>) | undefined;
+    readonly stateHolder?: Record<string, unknown> | undefined;
+    readonly invalidate?: (() => void) | undefined;
+}
+export declare const NESTED_CALLS_EXPANDED_KEY = "__pi_ext_ui_nested_expanded__";
+export declare const NESTED_CALLS_COPIED_KEY = "__pi_ext_ui_nested_copied__";
+export declare class NestedCallsView implements Component, Collapsible {
+    #private;
+    constructor(props: NestedCallsViewProps);
+    render(width: number): string[];
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    dispose(): void;
+    collapseAll(): void;
+    invalidate(): void;
+}

package/dist/nested-calls-view.js

@@ -0,0 +1,405 @@
+import { copyToClipboard as copyToSystemClipboard, getLanguageFromPath, highlightCode, } from "@earendil-works/pi-coding-agent";
+import { stripTerminalSequences, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { inlinePresentation } from "./renderer.js";
+import { formatToolHeaderText, ToolView, toContentRows, transitionFoldLevel, } from "./tool-view.js";
+function truncate(text, width) {
+    return truncateToWidth(text, Math.max(1, width));
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+export function extractChildToolCopyText(call, full) {
+    const toolName = "toolName" in call ? call.toolName : call.name;
+    const result = "result" in call ? call.result : undefined;
+    const args = "args" in call ? call.args : undefined;
+    if (toolName === "write" && isRecord(args) && typeof args.content === "string") {
+        return args.content;
+    }
+    const heavyCommand = toolName === "bash" && isRecord(args) && typeof args.command === "string"
+        ? args.command
+        : toolName === "codemode" && isRecord(args) && typeof args.code === "string"
+            ? args.code
+            : undefined;
+    if (heavyCommand !== undefined && heavyCommand.trim() !== "") {
+        if (full !== true)
+            return heavyCommand;
+        const output = resultText(result);
+        return output === undefined ? heavyCommand : `${heavyCommand}\n---\n${output}`;
+    }
+    if (result && Array.isArray(result.content)) {
+        const texts = result.content
+            .filter((c) => isRecord(c) && c.type === "text" && typeof c.text === "string")
+            .map((c) => c.text);
+        if (texts.length > 0)
+            return texts.join("\n");
+    }
+    if (args !== undefined) {
+        if (typeof args === "string")
+            return args;
+        try {
+            return JSON.stringify(args, null, 2);
+        }
+        catch {
+            return String(args);
+        }
+    }
+    if ("summary" in call && typeof call.summary === "string") {
+        return call.summary;
+    }
+    return "";
+}
+function resultText(result) {
+    if (result === undefined || !Array.isArray(result.content))
+        return undefined;
+    const texts = result.content
+        .filter((c) => isRecord(c) && c.type === "text" && typeof c.text === "string")
+        .map((c) => c.text);
+    return texts.length === 0 ? undefined : texts.join("\n");
+}
+function formatDuration(ms) {
+    if (ms === undefined || !Number.isFinite(ms))
+        return "";
+    return ms < 1000 ? `${String(Math.round(ms))}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+export const NESTED_CALLS_EXPANDED_KEY = "__pi_ext_ui_nested_expanded__";
+export const NESTED_CALLS_COPIED_KEY = "__pi_ext_ui_nested_copied__";
+export class NestedCallsView {
+    #props;
+    #inMemoryLevels = new Map();
+    #copiedIndex = undefined;
+    #copiedTimer = undefined;
+    #lineMapping = [];
+    #renderCache;
+    constructor(props) {
+        this.#props = props;
+        const state = props.stateHolder;
+        if (state !== undefined) {
+            const stored = state[NESTED_CALLS_EXPANDED_KEY];
+            if (isRecord(stored)) {
+                for (const [k, v] of Object.entries(stored)) {
+                    const idx = Number(k);
+                    if (!Number.isNaN(idx) && (v === 1 || v === 2)) {
+                        this.#inMemoryLevels.set(idx, v);
+                    }
+                }
+            }
+            else if (Array.isArray(stored)) {
+                for (const item of stored) {
+                    if (typeof item === "number") {
+                        this.#inMemoryLevels.set(item, 1);
+                    }
+                }
+            }
+            const copiedState = state[NESTED_CALLS_COPIED_KEY];
+            if (isRecord(copiedState) &&
+                typeof copiedState.index === "number" &&
+                typeof copiedState.until === "number") {
+                const remaining = copiedState.until - Date.now();
+                if (remaining > 0) {
+                    this.#copiedIndex = copiedState.index;
+                    this.#copiedTimer = setTimeout(() => {
+                        this.#copiedIndex = undefined;
+                        this.#renderCache = undefined;
+                        const s = this.#props.stateHolder;
+                        if (s !== undefined) {
+                            delete s[NESTED_CALLS_COPIED_KEY];
+                        }
+                        this.#props.invalidate?.();
+                    }, remaining);
+                    this.#copiedTimer.unref?.();
+                }
+                else {
+                    delete state[NESTED_CALLS_COPIED_KEY];
+                }
+            }
+        }
+    }
+    #getExpansionLevel(index) {
+        const state = this.#props.stateHolder;
+        if (state !== undefined) {
+            const stored = state[NESTED_CALLS_EXPANDED_KEY];
+            if (isRecord(stored)) {
+                const val = stored[String(index)];
+                if (val === 1 || val === 2)
+                    return val;
+            }
+            else if (Array.isArray(stored)) {
+                if (stored.includes(index))
+                    return 1;
+            }
+        }
+        return this.#inMemoryLevels.get(index) ?? 0;
+    }
+    #getLevelsKey() {
+        const parts = [];
+        for (let i = 0; i < this.#props.calls.length; i++) {
+            const level = this.#getExpansionLevel(i);
+            if (level !== 0)
+                parts.push(`${i}:${level}`);
+        }
+        return parts.join(",");
+    }
+    #setExpansionLevel(index, level) {
+        if (level === 0) {
+            this.#inMemoryLevels.delete(index);
+        }
+        else {
+            this.#inMemoryLevels.set(index, level);
+        }
+        this.#renderCache = undefined;
+        const state = this.#props.stateHolder;
+        if (state !== undefined) {
+            const record = {};
+            for (const [k, v] of this.#inMemoryLevels.entries()) {
+                record[String(k)] = v;
+            }
+            state[NESTED_CALLS_EXPANDED_KEY] = record;
+        }
+    }
+    /**
+     * The render context of one nested call. A nested call has no host-mounted component, so its
+     * context is the parent's with the child's own args, id, duration and failure state.
+     */
+    #callContext(call) {
+        const { context } = this.#props;
+        const toolCallId = "toolCallId" in call && typeof call.toolCallId === "string"
+            ? call.toolCallId
+            : context.toolCallId;
+        return {
+            ...context,
+            args: "args" in call ? call.args : undefined,
+            toolCallId,
+            durationMs: call.durationMs,
+            isError: Boolean(call.isError || ("status" in call && call.status === "error")),
+            isPartial: false,
+            argsComplete: true,
+        };
+    }
+    #triggerCopy(callIndex, full) {
+        const call = this.#props.calls[callIndex];
+        if (!call)
+            return;
+        const provider = this.#props.resolvePresentation?.(call.toolName);
+        const presentation = provider?.("args" in call ? call.args : undefined, "result" in call ? call.result : undefined, this.#props.theme, this.#callContext(call));
+        const text = stripTerminalSequences((full ? presentation?.copy?.full : presentation?.copy?.primary) ??
+            extractChildToolCopyText(call, full));
+        if (!text)
+            return;
+        const writeClip = this.#props.copyToClipboard ?? copyToSystemClipboard;
+        void writeClip(text).catch(() => { });
+        const durationMs = 1500;
+        const until = Date.now() + durationMs;
+        this.#copiedIndex = callIndex;
+        this.#renderCache = undefined;
+        const state = this.#props.stateHolder;
+        if (state !== undefined) {
+            state[NESTED_CALLS_COPIED_KEY] = {
+                index: callIndex,
+                until,
+            };
+        }
+        if (this.#copiedTimer !== undefined) {
+            clearTimeout(this.#copiedTimer);
+        }
+        this.#copiedTimer = setTimeout(() => {
+            this.#copiedIndex = undefined;
+            this.#renderCache = undefined;
+            const s = this.#props.stateHolder;
+            if (s !== undefined) {
+                delete s[NESTED_CALLS_COPIED_KEY];
+            }
+            this.#props.invalidate?.();
+        }, durationMs);
+        this.#copiedTimer.unref?.();
+        this.#props.invalidate?.();
+    }
+    render(width) {
+        const safeWidth = Math.max(1, width);
+        const levelsKey = this.#getLevelsKey();
+        if (this.#renderCache !== undefined &&
+            this.#renderCache.width === safeWidth &&
+            this.#renderCache.copiedIndex === this.#copiedIndex &&
+            this.#renderCache.levelsKey === levelsKey) {
+            this.#lineMapping = this.#renderCache.lineMapping;
+            return this.#renderCache.lines;
+        }
+        this.#lineMapping = [];
+        const { calls, theme } = this.#props;
+        const lines = [];
+        const rightMargin = 1;
+        for (let i = 0; i < calls.length; i++) {
+            const call = calls[i];
+            if (!call)
+                continue;
+            const toolName = "toolName" in call ? call.toolName : call.name;
+            const isError = Boolean(call.isError || ("status" in call && call.status === "error"));
+            const isRunning = ("status" in call && call.status === "running") ||
+                (!("status" in call) && call.result === undefined);
+            const expansionLevel = this.#getExpansionLevel(i);
+            const isExpanded = expansionLevel !== 0;
+            const rawSummary = "summary" in call ? call.summary : undefined;
+            const rawArgs = "args" in call ? call.args : undefined;
+            const inline = inlinePresentation(toolName, rawArgs ?? rawSummary, "result" in call ? call.result?.details : undefined, isError);
+            const argText = typeof rawArgs === "string" ? rawArgs : typeof rawSummary === "string" ? rawSummary : "";
+            const provider = this.#props.resolvePresentation?.(toolName);
+            const presentation = provider?.(rawArgs, "result" in call ? call.result : undefined, theme, this.#callContext(call));
+            // The child row is the child's own header minus the fold pin, so it carries the same token
+            // assignment as the row the same call would draw at top level.
+            const childSummary = stripTerminalSequences(presentation?.summary ?? inline?.summary ?? argText);
+            const duration = formatDuration(call.durationMs);
+            const leftContent = formatToolHeaderText({
+                status: isRunning ? "running" : isError ? "error" : "ok",
+                title: toolName,
+                summary: [childSummary, duration].filter(Boolean).join(" · "),
+            }, theme);
+            const isCopied = this.#copiedIndex === i;
+            const copyIcon = isCopied ? theme.fg("success", "✓") : theme.fg("dim", "󰆏");
+            const copySlotWidth = 2 + rightMargin;
+            const maxLeft = Math.max(1, width - copySlotWidth);
+            const truncatedLeft = truncate(leftContent, maxLeft);
+            const leftVis = visibleWidth(truncatedLeft);
+            const gap = " ".repeat(Math.max(1, width - leftVis - rightMargin - 1));
+            const headerLine = truncate(truncatedLeft + gap + copyIcon + " ".repeat(rightMargin), width);
+            const headerLineIdx = lines.length;
+            lines.push(headerLine);
+            this.#lineMapping[headerLineIdx] = {
+                callIndex: i,
+                isHeader: true,
+                copyRegion: { startX: width - copySlotWidth - 1, endX: width },
+            };
+            if (isExpanded) {
+                const bodyLines = this.#renderChildBody(call, Math.max(1, width - 2), expansionLevel);
+                for (const rawLine of bodyLines) {
+                    for (const bodyLine of toContentRows(rawLine)) {
+                        const bodyLineIdx = lines.length;
+                        lines.push(truncate(`  ${bodyLine}`, width));
+                        this.#lineMapping[bodyLineIdx] = {
+                            callIndex: i,
+                            isHeader: false,
+                        };
+                    }
+                }
+            }
+        }
+        this.#renderCache = {
+            width: safeWidth,
+            copiedIndex: this.#copiedIndex,
+            levelsKey,
+            lines,
+            lineMapping: this.#lineMapping,
+        };
+        return lines;
+    }
+    #renderChildBody(call, width, expansionLevel = 1) {
+        const { theme, resolveChildRenderer } = this.#props;
+        const toolName = "toolName" in call ? call.toolName : call.name;
+        const result = "result" in call ? call.result : undefined;
+        const args = "args" in call ? call.args : undefined;
+        if (result && resolveChildRenderer) {
+            const renderer = resolveChildRenderer(toolName);
+            if (renderer?.renderResult) {
+                try {
+                    const childContext = {
+                        ...this.#callContext(call),
+                        state: undefined,
+                    };
+                    const comp = renderer.renderResult(result, { expanded: expansionLevel === 2, isPartial: false }, theme, childContext);
+                    if (comp instanceof ToolView) {
+                        comp.setFoldLevel(expansionLevel);
+                        // Render body cleanly via deep headless interface without outer rail or header row
+                        return comp.renderBody(width, { noRail: true });
+                    }
+                    return comp.render(width);
+                }
+                catch {
+                    // Fall through to plain text extraction on renderer failure
+                }
+            }
+        }
+        // Fallback rendering
+        if (result && Array.isArray(result.content)) {
+            const text = result.content
+                .filter((c) => isRecord(c) && c.type === "text" && typeof c.text === "string")
+                .map((c) => c.text)
+                .join("\n")
+                .trim();
+            if (text) {
+                let lines;
+                const filePath = typeof args === "object" &&
+                    args !== null &&
+                    "path" in args &&
+                    typeof args.path === "string"
+                    ? args.path
+                    : "";
+                const lang = filePath ? getLanguageFromPath(filePath) : undefined;
+                if (lang) {
+                    try {
+                        lines = highlightCode(text, lang);
+                    }
+                    catch {
+                        lines = text.split("\n");
+                    }
+                }
+                else {
+                    lines = text.split("\n");
+                }
+                if (expansionLevel === 2 || lines.length <= 20) {
+                    return lines;
+                }
+                return [...lines.slice(0, 20), `... (${lines.length - 20} more lines)`];
+            }
+        }
+        if ("error" in call && typeof call.error === "string" && call.error) {
+            return call.error.split("\n").map((l) => theme.fg("error", l));
+        }
+        if (args !== undefined) {
+            const text = typeof args === "string" ? args : JSON.stringify(args, null, 2);
+            return text.split("\n").map((l) => theme.fg("dim", l));
+        }
+        return [theme.fg("dim", "(no output)")];
+    }
+    handleMouse(event) {
+        if (event.type !== "click" || event.button !== "left")
+            return undefined;
+        const mapping = this.#lineMapping[event.y];
+        if (!mapping)
+            return { handled: true };
+        if (mapping.isHeader) {
+            if (mapping.copyRegion && event.x >= mapping.copyRegion.startX) {
+                this.#triggerCopy(mapping.callIndex, event.shift === true);
+                return { handled: true, render: true };
+            }
+            const isCtrl = event.ctrl === true;
+            const currentLevel = this.#getExpansionLevel(mapping.callIndex);
+            const nextLevel = transitionFoldLevel(currentLevel, isCtrl);
+            this.#setExpansionLevel(mapping.callIndex, nextLevel);
+            this.#props.invalidate?.();
+            return { handled: true, render: true };
+        }
+        return { handled: true };
+    }
+    dispose() {
+        if (this.#copiedTimer !== undefined) {
+            clearTimeout(this.#copiedTimer);
+            this.#copiedTimer = undefined;
+        }
+        this.#renderCache = undefined;
+    }
+    collapseAll() {
+        if (this.#copiedTimer !== undefined) {
+            clearTimeout(this.#copiedTimer);
+            this.#copiedTimer = undefined;
+        }
+        this.#inMemoryLevels.clear();
+        const state = this.#props.stateHolder;
+        if (state !== undefined) {
+            state[NESTED_CALLS_EXPANDED_KEY] = {};
+        }
+        this.#lineMapping = [];
+        this.#renderCache = undefined;
+    }
+    invalidate() {
+        this.#lineMapping = [];
+        this.#renderCache = undefined;
+    }
+}