@hheei/pi-ext-ui 0.3.0 → 0.4.1

package/dist/diff-view.js

@@ -153,9 +153,12 @@ export class DiffView {
         if (!this.#parsed.ok)
             rows.push(this.#theme.fg("warning", `! ${this.#parsed.diagnostic}`));
         for (const raw of (this.#rawText ?? "").split(/\r?\n/)) {
-            rows.push(this.#theme.fg("dim", raw));
+            const wrapped = wrapTextWithAnsi(raw, width);
+            for (const line of wrapped.length > 0 ? wrapped : [""]) {
+                rows.push(this.#theme.fg("dim", line));
+            }
         }
-        return rows.map((row) => truncateToWidth(row, width, "…"));
+        return rows;
     }
     #renderDiff(width, hunks) {
         const numberCol = numberWidth(hunks);

package/dist/extension.js

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

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { type DiffHunk, type DiffLine, type DiffSource, type DiffStats, DiffView, type DiffViewOptions, diffStats, } from "./diff-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 CollapsibleToolRendererOptions, createCollapsibleToolRendererResolver, estimateStreamingTokens, inlinePresentation, isMcpTool, type NestedCallRecord, registerCollapsibleToolRenderer, SPECIALIZED_TOOL_RENDERERS, type SpecializedToolRendererName, type ToolRenderContext, } 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,7 +1,6 @@
 export { DiffView, diffStats, } from "./diff-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 { createCollapsibleToolRendererResolver, estimateStreamingTokens, inlinePresentation, isMcpTool, registerCollapsibleToolRenderer, SPECIALIZED_TOOL_RENDERERS, } 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.js

@@ -1,4 +1,4 @@
-import { truncateToWidth, } from "@earendil-works/pi-tui";
+import { truncateToWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
 import { toContentRows, toSingleRow } from "./tool-view.js";
 /**
  * A transcript notice, not a tool execution.
@@ -38,7 +38,14 @@ function layRows(source, width) {
     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));
+    const rows = [];
+    for (const line of raw) {
+        const wrapped = wrapTextWithAnsi(line, inner);
+        for (const chunk of wrapped.length > 0 ? wrapped : [""]) {
+            rows.push(truncate(`  ${chunk}`, width));
+        }
+    }
+    return rows;
 }
 function invalidateRows(source) {
     if (source !== undefined && isComponent(source))

package/dist/nested-calls-view.js

@@ -1,5 +1,5 @@
 import { copyToClipboard as copyToSystemClipboard, getLanguageFromPath, highlightCode, } from "@earendil-works/pi-coding-agent";
-import { stripTerminalSequences, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
 import { inlinePresentation } from "./renderer.js";
 import { formatToolHeaderText, ToolView, toContentRows, transitionFoldLevel, } from "./tool-view.js";
 function truncate(text, width) {
@@ -268,15 +268,20 @@ export class NestedCallsView {
                 copyRegion: { startX: width - copySlotWidth - 1, endX: width },
             };
             if (isExpanded) {
-                const bodyLines = this.#renderChildBody(call, Math.max(1, width - 2), expansionLevel);
+                const childWidth = Math.max(1, width - 2);
+                const bodyLines = this.#renderChildBody(call, childWidth, 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,
-                        };
+                        const wrapped = wrapTextWithAnsi(bodyLine, childWidth);
+                        const chunks = wrapped.length > 0 ? wrapped : [""];
+                        for (const chunk of chunks) {
+                            const bodyLineIdx = lines.length;
+                            lines.push(truncate(`  ${chunk}`, width));
+                            this.#lineMapping[bodyLineIdx] = {
+                                callIndex: i,
+                                isHeader: false,
+                            };
+                        }
                     }
                 }
             }
@@ -343,7 +348,12 @@ export class NestedCallsView {
                 else {
                     lines = text.split("\n");
                 }
-                if (expansionLevel === 2 || lines.length <= 20) {
+                if (expansionLevel === 2) {
+                    if (lines.length <= 500)
+                        return lines;
+                    return [...lines.slice(0, 500), `... (${lines.length - 500} more lines)`];
+                }
+                if (lines.length <= 20) {
                     return lines;
                 }
                 return [...lines.slice(0, 20), `... (${lines.length - 20} more lines)`];

package/dist/payload-parser.js

@@ -125,32 +125,55 @@ export function extractSummaryArg(toolName, args) {
     const parsed = parseCallArgs(args);
     if (!parsed)
         return "";
-    for (const key of [
-        "command",
-        "query",
-        "queries",
-        "url",
-        "urls",
-        "source",
-        "claim",
-        "id",
-        "search_id",
-        "topic",
-        "path",
-        "file_path",
-        "pattern",
-        "agent",
-    ]) {
-        const val = parsed[key];
-        if (typeof val === "string" && val.trim() !== "") {
-            return stripTerminalSequences(val.trim());
+    const firstLine = (val) => {
+        if (typeof val !== "string" || val.trim() === "")
+            return "";
+        const clean = stripTerminalSequences(val.trim());
+        return clean.split("\n")[0]?.trim() ?? clean;
+    };
+    switch (toolName) {
+        case "bash":
+        case "bg_bash_spawn":
+            return firstLine(parsed.command);
+        case "read":
+        case "edit":
+        case "write": {
+            const path = typeof parsed.path === "string"
+                ? parsed.path.trim()
+                : typeof parsed.file_path === "string"
+                    ? parsed.file_path.trim()
+                    : "";
+            return stripTerminalSequences(path);
+        }
+        case "grep":
+        case "find": {
+            const pattern = typeof parsed.pattern === "string" ? parsed.pattern.trim() : "";
+            const path = typeof parsed.path === "string" ? parsed.path.trim() : "";
+            if (!pattern)
+                return path ? stripTerminalSequences(path) : "";
+            const target = path && path !== "." ? ` ${path}` : "";
+            return `${pattern}${target}`;
         }
-        if (Array.isArray(val) && val.length > 0 && typeof val[0] === "string") {
-            const first = stripTerminalSequences(val[0].trim());
-            return val.length > 1 ? `${first} (+${String(val.length - 1)})` : first;
+        case "python_eval":
+            return firstLine(parsed.code);
+        case "bg_bash_get":
+        case "bg_bash_stop":
+        case "agent_send":
+        case "agent_get":
+        case "agent_stop":
+            return typeof parsed.id === "string" ? parsed.id.trim() : "";
+        case "agent_spawn": {
+            const agent = typeof parsed.agent === "string" ? parsed.agent.trim() : "";
+            const task = firstLine(parsed.task);
+            if (agent && task)
+                return `${agent}: ${task}`;
+            return agent || task;
         }
+        case "tool_search":
+            return typeof parsed.query === "string" ? parsed.query.trim() : "";
+        default:
+            return "";
     }
-    return "";
 }
 export function extractHeavyInputCommand(toolName, args) {
     if (!isRecord(args))

package/dist/renderer.d.ts

@@ -7,9 +7,6 @@ export type ToolRenderContext = Parameters<NonNullable<ToolRenderers["renderCall
  */
 export declare const SPECIALIZED_TOOL_RENDERERS: readonly ["codemode"];
 export type SpecializedToolRendererName = (typeof SPECIALIZED_TOOL_RENDERERS)[number];
-/** Web-access tools use the shared folding shell while retaining their native body renderer. */
-export declare const WEB_ACCESS_TOOLS: readonly ["web_search", "web_fetch", "web_open"];
-export type WebAccessToolName = (typeof WEB_ACCESS_TOOLS)[number];
 export { estimateStreamingTokens, inlinePresentation, type NestedCallRecord, } from "./payload-parser.js";
 export interface CollapsibleToolRendererOptions {
     readonly tools?: readonly string[] | undefined;
@@ -18,7 +15,8 @@ export interface CollapsibleToolRendererOptions {
     readonly defaultCollapsed?: boolean | undefined;
     readonly copyToClipboard?: ((text: string) => Promise<void>) | undefined;
 }
+export declare function isMcpTool(toolName: string): boolean;
 export declare function createCollapsibleToolRendererResolver(options?: CollapsibleToolRendererOptions): ToolRendererResolver;
 /** UI factory consumed by package-owned direct renderers, independently of host resolver precedence. */
 export declare function createOptionalToolRendererFactory(pi: ExtensionAPI, options?: CollapsibleToolRendererOptions): import("@hheei/pi-ext-core").ToolRendererFactory;
-export declare function registerCollapsibleToolRenderer(pi: ExtensionAPI, options?: CollapsibleToolRendererOptions): void;
+export declare function registerCollapsibleToolRenderer(pi: ExtensionAPI, options?: CollapsibleToolRendererOptions): () => void;

package/dist/renderer.js

@@ -1,6 +1,6 @@
 import { getLanguageFromPath, highlightCode, } from "@earendil-works/pi-coding-agent";
 import { stripTerminalSequences } from "@earendil-works/pi-tui";
-import { agentResultText, getRegisteredToolPresentationProvider, getToolPresentationProvider, hasOptionalToolRenderers, } from "@hheei/pi-ext-core";
+import { agentResultText, getRegisteredToolPresentationProvider, getRegisteredToolRenderers, getToolPresentationProvider, hasOptionalToolRenderers, } from "@hheei/pi-ext-core";
 import { DiffView } from "./diff-view.js";
 import { NestedCallsView } from "./nested-calls-view.js";
 import { formatToolHeaderText, ToolView, } from "./tool-view.js";
@@ -11,18 +11,17 @@ import { getCapturedNestedCalls, recordToolExecutionEnd, recordToolExecutionStar
  * appear here.
  */
 export const SPECIALIZED_TOOL_RENDERERS = ["codemode"];
-/** Web-access tools use the shared folding shell while retaining their native body renderer. */
-export const WEB_ACCESS_TOOLS = ["web_search", "web_fetch", "web_open"];
-import { callStatsParts, estimateStreamingTokens, extractHeavyInputCommand, extractNestedCalls, extractResultText, extractSummaryArg, formatCostUsd, formatDurationMs, inlinePresentation, isRecord, resolveContainerStatus, toolPath, } from "./payload-parser.js";
+import { callStatsParts, estimateStreamingTokens, extractCodemodeHeaderFacts, extractHeavyInputCommand, extractNestedCalls, extractResultText, extractSummaryArg, formatCostUsd, formatDurationMs, inlinePresentation, isRecord, resolveContainerStatus, } from "./payload-parser.js";
 export { estimateStreamingTokens, inlinePresentation, } from "./payload-parser.js";
 const SPECIALIZED_TOOL_SET = new Set(SPECIALIZED_TOOL_RENDERERS);
-const WEB_ACCESS_TOOL_SET = new Set(WEB_ACCESS_TOOLS);
 const CALL_VIEW_STATE_KEY = "__piExtUiCallView";
 function detectCodeLanguage(toolName) {
     if (toolName === "bash")
         return "bash";
     if (toolName === "codemode")
         return "javascript";
+    if (toolName === "python_eval")
+        return "python";
     return undefined;
 }
 function createInputCodeSection(toolName, args, theme, railToken = "muted") {
@@ -46,6 +45,39 @@ function createInputCodeSection(toolName, args, theme, railToken = "muted") {
     }
     return { railToken, content: lines };
 }
+function resolveToolCallSummary(params) {
+    const { toolName, args, originalRenderCall, theme, context } = params;
+    if (toolName === "codemode") {
+        return extractCodemodeHeaderFacts(args);
+    }
+    // Tier 1: Host Native RenderCall Delegation
+    if (originalRenderCall !== undefined) {
+        try {
+            const upstreamLines = originalRenderCall(args, theme, context).render(120);
+            const firstNonEmpty = upstreamLines
+                .map((line) => stripTerminalSequences(line).trim())
+                .find((line) => line !== "");
+            if (firstNonEmpty !== undefined) {
+                if (firstNonEmpty.startsWith("$ ")) {
+                    return firstNonEmpty.slice(2).trim();
+                }
+                if (firstNonEmpty === toolName) {
+                    return "";
+                }
+                if (firstNonEmpty.startsWith(toolName) &&
+                    /^[\s(:=/[]/.test(firstNonEmpty.slice(toolName.length))) {
+                    return firstNonEmpty.slice(toolName.length).trim();
+                }
+                return firstNonEmpty;
+            }
+        }
+        catch {
+            // Upstream threw, fall through to fallback
+        }
+    }
+    // Tier 2: Contractual Fallback for built-in tools
+    return extractSummaryArg(toolName, args);
+}
 function formatArgsPreview(args) {
     if (args === undefined || args === null)
         return "";
@@ -104,6 +136,12 @@ function formatNestedCallRow(call, theme) {
             .join(" · "),
     }, theme);
 }
+export function isMcpTool(toolName) {
+    return (toolName.startsWith("mcp__") ||
+        toolName === "read_mcp_resource" ||
+        toolName === "list_mcp_resources" ||
+        toolName === "list_mcp_resource_templates");
+}
 function shouldInterceptTool(toolName, options) {
     if (options?.catchAll === true) {
         return options.match !== undefined ? options.match(toolName) : true;
@@ -115,10 +153,10 @@ function shouldInterceptTool(toolName, options) {
     if (toolList !== undefined) {
         return toolList.includes(toolName);
     }
-    return SPECIALIZED_TOOL_SET.has(toolName) || WEB_ACCESS_TOOL_SET.has(toolName);
+    return SPECIALIZED_TOOL_SET.has(toolName) || isMcpTool(toolName);
 }
 function renderGenericResult(params) {
-    const { toolName, theme, context, result, renderOptions, defaultLevel, originalRenderCall, originalRenderResult, resolvePresentation, options, } = params;
+    const { toolName, theme, context, result, renderOptions, defaultLevel, originalRenderCall, originalRenderResult, resolvePresentation, resolveNativeRenderer, options, } = params;
     const heavyCmd = extractHeavyInputCommand(toolName, context.args);
     const nestedCalls = extractNestedCalls(result);
     const captured = toolName === "codemode"
@@ -150,19 +188,15 @@ function renderGenericResult(params) {
                     ? "running"
                     : "ok";
     const summaryParts = [];
-    const argSummary = extractSummaryArg(toolName, context.args);
-    if (argSummary !== "") {
+    const argSummary = resolveToolCallSummary({
+        toolName,
+        args: context.args,
+        originalRenderCall,
+        theme,
+        context,
+    });
+    if (argSummary !== "")
         summaryParts.push(argSummary);
-    }
-    else if (originalRenderCall !== undefined && toolName !== "codemode") {
-        const upstreamLines = originalRenderCall(context.args, theme, context).render(120);
-        const firstLine = stripTerminalSequences(upstreamLines[0] ?? "").trim();
-        const stripped = firstLine.startsWith(toolName)
-            ? firstLine.slice(toolName.length).trim()
-            : firstLine;
-        if (stripped !== "")
-            summaryParts.push(stripped);
-    }
     if (isMetaTool && childCalls.length > 0) {
         const failCount = childCalls.filter((c) => Boolean(c.isError || ("status" in c && c.status === "error"))).length;
         summaryParts.push(...callStatsParts(childCalls.length, failCount));
@@ -195,9 +229,12 @@ function renderGenericResult(params) {
                                 theme: childTheme,
                                 context: childCtx,
                                 defaultLevel: childOptions.expanded ? 2 : 1,
+                                resolvePresentation,
+                                resolveNativeRenderer,
                                 options,
                             });
                         }
+                        const registered = resolveNativeRenderer?.(childName);
                         return renderGenericResult({
                             toolName: childName,
                             theme: childTheme,
@@ -205,9 +242,10 @@ function renderGenericResult(params) {
                             result: childResult,
                             renderOptions: childOptions,
                             defaultLevel: childOptions.expanded ? 2 : 1,
-                            originalRenderCall: undefined,
-                            originalRenderResult: undefined,
+                            originalRenderCall: registered?.renderCall,
+                            originalRenderResult: registered?.renderResult,
                             resolvePresentation,
+                            resolveNativeRenderer,
                             options,
                         });
                     },
@@ -231,7 +269,16 @@ function renderGenericResult(params) {
             : "success";
     // Upper room (input code) uses neutral/muted rail; lower room (output) uses toolRailToken (success/error)
     const inputSection = createInputCodeSection(toolName, context.args, theme, "muted");
-    const sections = inputSection !== undefined ? [inputSection] : [];
+    const sections = [];
+    if (inputSection !== undefined) {
+        sections.push(inputSection);
+    }
+    else {
+        const preview = formatArgsPreview(context.args);
+        if (preview !== "" && preview !== "{}") {
+            sections.push({ railToken: "muted", content: preview });
+        }
+    }
     if (toolName === "codemode") {
         // Nested tool calls belong only to collapsedRows (Level 0), hidden when expanded
         if (rawOutput !== "") {
@@ -267,36 +314,14 @@ function renderGenericResult(params) {
         sections.push({
             railToken: toolRailToken,
             content: lazyUpstreamComponent,
-            maxLines: effectiveExpanded ? Number.POSITIVE_INFINITY : 9,
+            maxLines: effectiveExpanded ? Number.POSITIVE_INFINITY : undefined,
         });
     }
     else if (rawOutput !== "") {
         const rawLines = rawOutput.split("\n");
-        let outputLines;
-        if (isError) {
-            outputLines = rawLines.map((line) => theme.fg("error", line));
-        }
-        else if (toolName === "read" || toolPath(context.args) !== "") {
-            const filePath = toolPath(context.args);
-            const lang = filePath !== "" ? getLanguageFromPath(filePath) : undefined;
-            if (lang !== undefined) {
-                try {
-                    outputLines = highlightCode(rawOutput, lang);
-                }
-                catch {
-                    outputLines = rawLines;
-                }
-            }
-            else {
-                outputLines = rawLines;
-            }
-        }
-        else if (toolName === "bash") {
-            outputLines = rawLines.map((line) => theme.fg("dim", line));
-        }
-        else {
-            outputLines = rawLines;
-        }
+        const outputLines = isError
+            ? rawLines.map((line) => theme.fg("error", line))
+            : rawLines.map((line) => theme.fg("dim", line));
         sections.push({
             railToken: toolRailToken,
             content: outputLines,
@@ -345,7 +370,7 @@ function renderGenericResult(params) {
  * pass never asks the tool to rebuild its rows.
  */
 function renderOwnedPresentation(params) {
-    const { toolName, presentation, result, theme, context, defaultLevel, options } = params;
+    const { toolName, presentation, result, theme, context, defaultLevel, resolvePresentation, resolveNativeRenderer, options, } = params;
     const isError = context.isError || result?.isError === true;
     const pending = result === undefined || context.isPartial;
     const isDiff = !isError && !pending && presentation.kind === "diff";
@@ -385,10 +410,36 @@ function renderOwnedPresentation(params) {
         }
     }
     else if (output !== "") {
-        const lines = stripTerminalSequences(output).split("\n");
+        const rawLines = stripTerminalSequences(output).split("\n");
+        let styledLines;
+        if (isError) {
+            styledLines = rawLines.map((line) => theme.fg("error", line));
+        }
+        else if (toolName === "read") {
+            const rawPath = isRecord(context.args) && typeof context.args.path === "string"
+                ? context.args.path
+                : isRecord(context.args) && typeof context.args.file_path === "string"
+                    ? context.args.file_path
+                    : "";
+            const lang = rawPath ? getLanguageFromPath(rawPath) : undefined;
+            if (lang !== undefined) {
+                try {
+                    styledLines = highlightCode(output.replace(/\t/g, "  "), lang);
+                }
+                catch {
+                    styledLines = rawLines.map((line) => theme.fg("toolOutput", line));
+                }
+            }
+            else {
+                styledLines = rawLines.map((line) => theme.fg("toolOutput", line));
+            }
+        }
+        else {
+            styledLines = rawLines.map((line) => theme.fg("toolOutput", line));
+        }
         sections.push({
             railToken,
-            content: isError ? lines.map((line) => theme.fg("error", line)) : lines,
+            content: styledLines,
         });
     }
     const duration = result === undefined ? "" : formatDurationMs(context.durationMs);
@@ -410,13 +461,68 @@ function renderOwnedPresentation(params) {
         header: { title: toolName, status, summary },
         railToken,
         // The tool owns the folded rows and their tones; the frame only sanitizes them for the host.
-        collapsedRows: presentation.collapsedRows ??
-            (isError && output !== ""
+        collapsedRows: (() => {
+            if (presentation.collapsedRows !== undefined) {
+                return presentation.collapsedRows;
+            }
+            const captured = result !== undefined
+                ? (getCapturedNestedCalls(context.toolCallId) ??
+                    (isRecord(result.details) && Array.isArray(result.details.__piExtUiCapturedCalls)
+                        ? result.details.__piExtUiCapturedCalls
+                        : undefined))
+                : undefined;
+            const nestedCalls = extractNestedCalls(result);
+            const childCalls = captured ?? nestedCalls;
+            if (childCalls.length > 0) {
+                return new NestedCallsView({
+                    calls: childCalls,
+                    theme,
+                    context,
+                    resolveChildRenderer: (childName) => ({
+                        renderResult: (childResult, childOptions, childTheme, childCtx) => {
+                            const childProvider = resolvePresentation?.(childName);
+                            if (childProvider !== undefined) {
+                                return renderOwnedPresentation({
+                                    toolName: childName,
+                                    presentation: childProvider(childCtx.args, childResult, childTheme, childCtx),
+                                    result: childResult,
+                                    theme: childTheme,
+                                    context: childCtx,
+                                    defaultLevel: childOptions.expanded ? 2 : 1,
+                                    resolvePresentation,
+                                    resolveNativeRenderer,
+                                    options,
+                                });
+                            }
+                            const registered = resolveNativeRenderer?.(childName);
+                            return renderGenericResult({
+                                toolName: childName,
+                                theme: childTheme,
+                                context: childCtx,
+                                result: childResult,
+                                renderOptions: childOptions,
+                                defaultLevel: childOptions.expanded ? 2 : 1,
+                                originalRenderCall: registered?.renderCall,
+                                originalRenderResult: registered?.renderResult,
+                                resolvePresentation,
+                                resolveNativeRenderer,
+                                options,
+                            });
+                        },
+                    }),
+                    copyToClipboard: options?.copyToClipboard,
+                    stateHolder: context.state,
+                    resolvePresentation,
+                    invalidate: () => context.invalidate(),
+                });
+            }
+            return isError && output !== ""
                 ? output
                     .split("\n")
                     .slice(0, 1)
                     .map((line) => theme.fg("error", stripTerminalSequences(line)))
-                : undefined),
+                : undefined;
+        })(),
         sections,
         copy,
         outputPad: context.outputPad,
@@ -430,7 +536,7 @@ function renderOwnedPresentation(params) {
 export function createCollapsibleToolRendererResolver(options) {
     return createRendererResolver(options);
 }
-function createRendererResolver(options, resolvePresentation) {
+function createRendererResolver(options, resolvePresentation, resolveNativeRenderer) {
     const defaultLevel = options?.defaultCollapsed === false ? 1 : 0;
     return (toolName, next) => {
         const upstream = next();
@@ -440,8 +546,9 @@ function createRendererResolver(options, resolvePresentation) {
         if (provider === undefined && !shouldInterceptTool(toolName, options)) {
             return upstream;
         }
-        const originalRenderCall = upstream?.renderCall;
-        const originalRenderResult = upstream?.renderResult;
+        const registeredNative = resolveNativeRenderer?.(toolName);
+        const originalRenderCall = upstream?.renderCall ?? registeredNative?.renderCall;
+        const originalRenderResult = upstream?.renderResult ?? registeredNative?.renderResult;
         return {
             renderShell: "self",
             renderCall(args, theme, context) {
@@ -453,6 +560,8 @@ function createRendererResolver(options, resolvePresentation) {
                         theme,
                         context: callContext,
                         defaultLevel,
+                        resolvePresentation,
+                        resolveNativeRenderer,
                         options,
                     });
                     rememberCallView(context, view);
@@ -472,14 +581,13 @@ function createRendererResolver(options, resolvePresentation) {
                     summary = tokens > 0 ? `· ${String(tokens)} tokens` : "";
                 }
                 else {
-                    summary = extractSummaryArg(toolName, args);
-                    if (summary === "" && originalRenderCall !== undefined && toolName !== "codemode") {
-                        const upstreamLines = originalRenderCall(args, theme, context).render(120);
-                        const firstLine = stripTerminalSequences(upstreamLines[0] ?? "").trim();
-                        summary = firstLine.startsWith(toolName)
-                            ? firstLine.slice(toolName.length).trim()
-                            : firstLine;
-                    }
+                    summary = resolveToolCallSummary({
+                        toolName,
+                        args,
+                        originalRenderCall,
+                        theme,
+                        context,
+                    });
                 }
                 const heavyCmd = extractHeavyInputCommand(toolName, args);
                 const sections = [];
@@ -542,6 +650,7 @@ function createRendererResolver(options, resolvePresentation) {
                         theme,
                         context: resultContext,
                         defaultLevel,
+                        resolvePresentation,
                         options,
                     });
                 }
@@ -555,6 +664,7 @@ function createRendererResolver(options, resolvePresentation) {
                     originalRenderCall,
                     originalRenderResult,
                     resolvePresentation,
+                    resolveNativeRenderer,
                     options,
                 });
             },
@@ -563,29 +673,25 @@ function createRendererResolver(options, resolvePresentation) {
 }
 /** UI factory consumed by package-owned direct renderers, independently of host resolver precedence. */
 export function createOptionalToolRendererFactory(pi, options) {
-    return (name, native) => createRendererResolver({ ...options, tools: [name] }, (toolName) => getRegisteredToolPresentationProvider(pi, toolName))(name, () => native) ?? native;
+    return (name, native) => createRendererResolver({ ...options, tools: [name] }, (toolName) => getRegisteredToolPresentationProvider(pi, toolName), (toolName) => getRegisteredToolRenderers(pi, toolName))(name, () => native) ?? native;
 }
 export function registerCollapsibleToolRenderer(pi, options) {
+    const disposers = [];
     if (typeof pi.on === "function") {
-        pi.on("tool_execution_start", (event) => {
+        const unbindStart = pi.on("tool_execution_start", (event) => {
             recordToolExecutionStart(event);
         });
-        pi.on("tool_execution_end", (event) => {
+        if (typeof unbindStart === "function")
+            disposers.push(unbindStart);
+        const unbindEnd = pi.on("tool_execution_end", (event) => {
             recordToolExecutionEnd(event);
         });
-        pi.on("tool_result", (event) => {
-            const captured = getCapturedNestedCalls(event.toolCallId);
-            if (captured && captured.length > 0) {
-                const currentDetails = isRecord(event.details) ? event.details : {};
-                return {
-                    details: {
-                        ...currentDetails,
-                        __piExtUiCapturedCalls: captured,
-                    },
-                };
-            }
-            return undefined;
-        });
+        if (typeof unbindEnd === "function")
+            disposers.push(unbindEnd);
     }
-    pi.registerToolRenderer(createRendererResolver(options, (name) => getRegisteredToolPresentationProvider(pi, name)));
+    pi.registerToolRenderer(createRendererResolver(options, (name) => getRegisteredToolPresentationProvider(pi, name), (name) => getRegisteredToolRenderers(pi, name)));
+    return () => {
+        for (const dispose of disposers)
+            dispose();
+    };
 }

package/dist/tool-view.d.ts

@@ -43,6 +43,8 @@ export interface ToolViewSpec {
 }
 /** Public composition entry point for extensions that need the shared view behavior. */
 export declare function createToolView(spec: ToolViewSpec): ToolView;
+export declare const MAX_LEVEL2_SECTION_LINES = 500;
+export declare const MAX_LEVEL2_BYTES: number;
 export declare function transitionFoldLevel(current: FoldLevel, ctrlKey: boolean): FoldLevel;
 export declare function formatStatusGlyph(status: ToolStatusKind | undefined, theme: Theme): string;
 /**

package/dist/tool-view.js

@@ -1,5 +1,6 @@
+import { Buffer } from "node:buffer";
 import { copyToClipboard as copyToSystemClipboard, } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
 export function isCollapsible(value) {
     return (typeof value === "object" &&
         value !== null &&
@@ -14,6 +15,8 @@ const FOLD_LEVEL_STATE_KEY = "__piExtUiFoldLevel";
 const COPIED_UNTIL_STATE_KEY = "__piExtUiCopiedUntil";
 const COPY_FEEDBACK_TIMER_KEY = "__piExtUiCopyTimer";
 const DEFAULT_MAX_SECTION_LINES = 9;
+export const MAX_LEVEL2_SECTION_LINES = 500;
+export const MAX_LEVEL2_BYTES = 64 * 1024;
 const DEFAULT_COPY_FEEDBACK_MS = 1200;
 function isRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -107,20 +110,97 @@ export function toContentRows(text) {
     }
     return text.replace(/\r/g, "").replace(/\t/g, "  ").split("\n");
 }
-/**
- * Resolves a row source into rows that are safe to hand to the host. A string element is one
- * caller-provided label, so `normalize` decides whether it stays a single row or becomes several. A
- * component returns rows it already laid out, so only its breaks are removed and its indentation is
- * preserved.
- */
+function truncateUtf8(str, maxBytes) {
+    const buf = Buffer.from(str, "utf8");
+    if (buf.length <= maxBytes)
+        return str;
+    let end = maxBytes;
+    while (end > 0) {
+        const b = buf[end];
+        if (b !== undefined && (b & 0xc0) === 0x80) {
+            end--;
+        }
+        else {
+            break;
+        }
+    }
+    if (end > 0) {
+        const lead = buf[end - 1];
+        if (lead !== undefined) {
+            let seqLen = 1;
+            if ((lead & 0xe0) === 0xc0)
+                seqLen = 2;
+            else if ((lead & 0xf0) === 0xe0)
+                seqLen = 3;
+            else if ((lead & 0xf8) === 0xf0)
+                seqLen = 4;
+            if (seqLen > 1 && end - 1 + seqLen > maxBytes) {
+                end = end - 1;
+            }
+        }
+    }
+    return buf.subarray(0, end).toString("utf8");
+}
 function resolveRows(source, width, normalize) {
     if (typeof source === "string") {
-        return source === "" ? [] : normalize(source);
+        if (source === "")
+            return { rows: [], isByteTruncated: false, totalBytes: 0 };
+        const totalBytes = Buffer.byteLength(source, "utf8");
+        const isByteTruncated = totalBytes > MAX_LEVEL2_BYTES;
+        const bounded = isByteTruncated ? truncateUtf8(source, MAX_LEVEL2_BYTES) : source;
+        return { rows: normalize(bounded), isByteTruncated, totalBytes };
     }
     if (Array.isArray(source)) {
-        return source.flatMap((item) => (typeof item === "string" ? normalize(item) : []));
+        const totalBytes = source.reduce((acc, item) => (typeof item === "string" ? acc + Buffer.byteLength(item, "utf8") : acc), 0);
+        const isByteTruncated = totalBytes > MAX_LEVEL2_BYTES;
+        const rows = [];
+        let currentBytes = 0;
+        for (const item of source) {
+            if (typeof item !== "string")
+                continue;
+            if (currentBytes >= MAX_LEVEL2_BYTES)
+                continue;
+            const itemBytes = Buffer.byteLength(item, "utf8");
+            if (currentBytes + itemBytes > MAX_LEVEL2_BYTES) {
+                const remaining = MAX_LEVEL2_BYTES - currentBytes;
+                if (remaining > 0) {
+                    for (const row of normalize(truncateUtf8(item, remaining)))
+                        rows.push(row);
+                }
+                currentBytes = MAX_LEVEL2_BYTES;
+            }
+            else {
+                currentBytes += itemBytes;
+                for (const row of normalize(item))
+                    rows.push(row);
+            }
+        }
+        return { rows, isByteTruncated, totalBytes };
+    }
+    const rendered = source.render(width);
+    const totalBytes = rendered.reduce((acc, row) => acc + Buffer.byteLength(row, "utf8"), 0);
+    const isByteTruncated = totalBytes > MAX_LEVEL2_BYTES;
+    const rows = [];
+    let currentBytes = 0;
+    for (const row of rendered) {
+        if (currentBytes >= MAX_LEVEL2_BYTES)
+            continue;
+        const rowBytes = Buffer.byteLength(row, "utf8");
+        if (currentBytes + rowBytes > MAX_LEVEL2_BYTES) {
+            const remaining = MAX_LEVEL2_BYTES - currentBytes;
+            if (remaining > 0) {
+                for (const norm of toContentRows(truncateUtf8(row, remaining)))
+                    rows.push(norm);
+            }
+            currentBytes = MAX_LEVEL2_BYTES;
+        }
+        else {
+            currentBytes += rowBytes;
+            for (const norm of toContentRows(row))
+                rows.push(norm);
+        }
     }
-    return source.render(width).flatMap((row) => toContentRows(row));
+    return { rows, isByteTruncated, totalBytes };
 }
 export class ToolView {
     #spec;
@@ -290,7 +370,7 @@ export class ToolView {
             if (collapsedRows !== undefined) {
                 const railColor = this.#spec.header.status === "error" ? "error" : "dim";
                 const rail = noRail ? "" : `${theme.fg(railColor, "▎")} `;
-                const rows = resolveRows(collapsedRows, innerWidth, (row) => [toSingleRow(row)]);
+                const { rows } = resolveRows(collapsedRows, innerWidth, (row) => [toSingleRow(row)]);
                 for (const row of rows) {
                     output.push(truncate(rail + row, safeWidth));
                 }
@@ -302,15 +382,34 @@ export class ToolView {
         }
         for (const section of sections) {
             const rail = noRail ? "" : `${theme.fg(section.railToken, "▎")} `;
-            const rawLines = resolveRows(section.content, innerWidth, toContentRows);
-            const cap = level === 1 ? (section.maxLines ?? DEFAULT_MAX_SECTION_LINES) : Number.POSITIVE_INFINITY;
-            const visibleLines = Number.isFinite(cap) && rawLines.length > cap ? rawLines.slice(0, cap) : rawLines;
-            const omittedCount = rawLines.length - visibleLines.length;
-            for (const line of visibleLines) {
-                output.push(truncate(rail + line, safeWidth));
+            const { rows: rawLines, isByteTruncated, totalBytes, } = resolveRows(section.content, innerWidth, toContentRows);
+            const cap = level === 1 ? (section.maxLines ?? DEFAULT_MAX_SECTION_LINES) : MAX_LEVEL2_SECTION_LINES;
+            const sectionRows = [];
+            let logicalLinesCount = 0;
+            for (const line of rawLines) {
+                const wrapped = wrapTextWithAnsi(line, innerWidth);
+                const chunks = wrapped.length > 0 ? wrapped : [""];
+                if (Number.isFinite(cap) && sectionRows.length + chunks.length > cap) {
+                    const canTake = Math.max(0, cap - sectionRows.length);
+                    for (let i = 0; i < canTake; i++) {
+                        const chunk = chunks[i];
+                        if (chunk !== undefined) {
+                            sectionRows.push(chunk);
+                        }
+                    }
+                    break;
+                }
+                sectionRows.push(...chunks);
+                logicalLinesCount++;
+            }
+            const omittedCount = rawLines.length - logicalLinesCount;
+            for (const row of sectionRows) {
+                output.push(truncate(rail + row, safeWidth));
             }
-            if (omittedCount > 0) {
-                const hint = theme.fg("dim", `… (${String(omittedCount)} more lines)`);
+            if (omittedCount > 0 || isByteTruncated) {
+                const hint = isByteTruncated
+                    ? theme.fg("dim", `… [Output truncated: showing 64KB of ${Math.round(totalBytes / 1024)}KB]`)
+                    : theme.fg("dim", `… (${String(omittedCount)} more lines)`);
                 output.push(truncate(rail + hint, safeWidth));
             }
         }

package/dist/tracker.d.ts

@@ -8,6 +8,25 @@ export interface CapturedToolCall {
     readonly durationMs?: number | undefined;
     readonly cost?: number | undefined;
 }
+export declare class ToolExecutionTracker {
+    #private;
+    recordStart(event: {
+        toolCallId: string;
+        toolName: string;
+        args: unknown;
+        parentToolCallId?: string | undefined;
+    }): void;
+    recordEnd(event: {
+        toolCallId: string;
+        toolName: string;
+        result: unknown;
+        isError: boolean;
+        durationMs?: number | undefined;
+        parentToolCallId?: string | undefined;
+    }): void;
+    getCaptured(parentToolCallId: string | undefined): readonly CapturedToolCall[] | undefined;
+    clear(): void;
+}
 export declare function recordToolExecutionStart(event: {
     toolCallId: string;
     toolName: string;

package/dist/tracker.js

@@ -1,4 +1,3 @@
-const capturedByParentId = new Map();
 const MAX_STORED_PARENTS = 200;
 const MAX_CAPTURED_PAYLOAD_CHARS = 32_768;
 function boundCapturedValue(val) {
@@ -9,73 +8,89 @@ function boundCapturedValue(val) {
     }
     return val;
 }
-export function recordToolExecutionStart(event) {
-    if (!event.parentToolCallId)
-        return;
-    let list = capturedByParentId.get(event.parentToolCallId);
-    if (!list) {
-        if (capturedByParentId.size >= MAX_STORED_PARENTS) {
-            const firstKey = capturedByParentId.keys().next().value;
-            if (firstKey !== undefined)
-                capturedByParentId.delete(firstKey);
+export class ToolExecutionTracker {
+    #capturedByParentId = new Map();
+    recordStart(event) {
+        if (!event.parentToolCallId)
+            return;
+        let list = this.#capturedByParentId.get(event.parentToolCallId);
+        if (!list) {
+            if (this.#capturedByParentId.size >= MAX_STORED_PARENTS) {
+                const firstKey = this.#capturedByParentId.keys().next().value;
+                if (firstKey !== undefined)
+                    this.#capturedByParentId.delete(firstKey);
+            }
+            list = [];
+            this.#capturedByParentId.set(event.parentToolCallId, list);
         }
-        list = [];
-        capturedByParentId.set(event.parentToolCallId, list);
-    }
-    const idx = list.findIndex((c) => c.id === event.toolCallId);
-    const entry = {
-        id: event.toolCallId,
-        toolName: event.toolName,
-        args: boundCapturedValue(event.args),
-    };
-    if (idx >= 0) {
-        list[idx] = { ...list[idx], ...entry };
-    }
-    else {
-        list.push(entry);
-    }
-}
-export function recordToolExecutionEnd(event) {
-    if (!event.parentToolCallId)
-        return;
-    let list = capturedByParentId.get(event.parentToolCallId);
-    if (!list) {
-        if (capturedByParentId.size >= MAX_STORED_PARENTS) {
-            const firstKey = capturedByParentId.keys().next().value;
-            if (firstKey !== undefined)
-                capturedByParentId.delete(firstKey);
+        const idx = list.findIndex((c) => c.id === event.toolCallId);
+        const entry = {
+            id: event.toolCallId,
+            toolName: event.toolName,
+            args: boundCapturedValue(event.args),
+        };
+        if (idx >= 0) {
+            list[idx] = { ...list[idx], ...entry };
+        }
+        else {
+            list.push(entry);
         }
-        list = [];
-        capturedByParentId.set(event.parentToolCallId, list);
     }
-    const idx = list.findIndex((c) => c.id === event.toolCallId);
-    const typedResult = event.result;
-    if (idx >= 0) {
-        const prev = list[idx];
-        if (!prev)
+    recordEnd(event) {
+        if (!event.parentToolCallId)
             return;
-        list[idx] = {
-            ...prev,
-            result: typedResult,
-            isError: event.isError,
-            durationMs: event.durationMs,
-        };
+        let list = this.#capturedByParentId.get(event.parentToolCallId);
+        if (!list) {
+            if (this.#capturedByParentId.size >= MAX_STORED_PARENTS) {
+                const firstKey = this.#capturedByParentId.keys().next().value;
+                if (firstKey !== undefined)
+                    this.#capturedByParentId.delete(firstKey);
+            }
+            list = [];
+            this.#capturedByParentId.set(event.parentToolCallId, list);
+        }
+        const idx = list.findIndex((c) => c.id === event.toolCallId);
+        const typedResult = event.result;
+        if (idx >= 0) {
+            const prev = list[idx];
+            if (!prev)
+                return;
+            list[idx] = {
+                ...prev,
+                result: typedResult,
+                isError: event.isError,
+                durationMs: event.durationMs,
+            };
+        }
+        else {
+            list.push({
+                id: event.toolCallId,
+                toolName: event.toolName,
+                result: typedResult,
+                isError: event.isError,
+                durationMs: event.durationMs,
+            });
+        }
     }
-    else {
-        list.push({
-            id: event.toolCallId,
-            toolName: event.toolName,
-            result: typedResult,
-            isError: event.isError,
-            durationMs: event.durationMs,
-        });
+    getCaptured(parentToolCallId) {
+        if (!parentToolCallId)
+            return undefined;
+        return this.#capturedByParentId.get(parentToolCallId);
     }
+    clear() {
+        this.#capturedByParentId.clear();
+    }
+}
+const defaultTracker = new ToolExecutionTracker();
+export function recordToolExecutionStart(event) {
+    defaultTracker.recordStart(event);
+}
+export function recordToolExecutionEnd(event) {
+    defaultTracker.recordEnd(event);
 }
 export function getCapturedNestedCalls(parentToolCallId) {
-    if (!parentToolCallId)
-        return undefined;
-    return capturedByParentId.get(parentToolCallId);
+    return defaultTracker.getCaptured(parentToolCallId);
 }
 export function clearCapturedNestedCalls() {
-    capturedByParentId.clear();
+    defaultTracker.clear();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hheei/pi-ext-ui",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Collapsible tool rendering frame and tool renderer pilot for Pi.",
   "type": "module",
   "main": "dist/index.js",
@@ -36,7 +36,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@hheei/pi-ext-core": "^0.5.0"
+    "@hheei/pi-ext-core": "^0.6.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": ">=1.3.0",

package/dist/turn-copy.d.ts

@@ -1,11 +0,0 @@
-export interface TurnToolCallSummary {
-    readonly toolName: string;
-    readonly commandOrArgs?: string | undefined;
-    readonly summary: string;
-}
-export interface TurnFlowData {
-    readonly userPrompt: string;
-    readonly toolCalls?: readonly TurnToolCallSummary[] | undefined;
-    readonly assistantReply: string;
-}
-export declare function formatTurnFlow(data: TurnFlowData): string;

package/dist/turn-copy.js

@@ -1,20 +0,0 @@
-import { stripTerminalSequences } from "@earendil-works/pi-tui";
-export function formatTurnFlow(data) {
-    const blocks = [];
-    const cleanUser = stripTerminalSequences(data.userPrompt).trim();
-    blocks.push(`[User]\n${cleanUser}`);
-    if (data.toolCalls !== undefined && data.toolCalls.length > 0) {
-        const toolLines = [];
-        for (const call of data.toolCalls) {
-            const header = call.commandOrArgs !== undefined && call.commandOrArgs.trim() !== ""
-                ? `${call.toolName} ${stripTerminalSequences(call.commandOrArgs).trim()}`
-                : call.toolName;
-            const detail = stripTerminalSequences(call.summary).trim();
-            toolLines.push(detail !== "" ? `${header}\n${detail}` : header);
-        }
-        blocks.push(`[Tools]\n${toolLines.join("\n\n")}`);
-    }
-    const cleanAssistant = stripTerminalSequences(data.assistantReply).trim();
-    blocks.push(`[Assistant]\n${cleanAssistant}`);
-    return blocks.join("\n\n");
-}