pi-ui-extend 0.1.26 → 0.1.27

package/dist/app/icons.d.ts

@@ -25,6 +25,9 @@ declare const NERD_FONT_ICONS: {
     readonly thinkingExpanded: "󰌵";
     readonly stopCircle: "󰙥";
     readonly timerSand: "󰔟";
+    readonly toolBodyEnd: "└";
+    readonly toolBodyGutter: "│";
+    readonly toolPreviewTruncated: "⊞";
     readonly down: "󰁅";
 };
 export type AppIconName = keyof typeof NERD_FONT_ICONS;

package/dist/app/icons.js

@@ -31,6 +31,9 @@ const NERD_FONT_ICONS = {
     thinkingExpanded: "\u{f0335}",
     stopCircle: "\u{f0665}",
     timerSand: "\u{f051f}",
+    toolBodyEnd: "└",
+    toolBodyGutter: "│",
+    toolPreviewTruncated: "⊞",
     down: "\u{f0045}",
 };
 const FALLBACK_ICONS = {
@@ -58,6 +61,9 @@ const FALLBACK_ICONS = {
     thinkingExpanded: ">",
     stopCircle: "■",
     timerSand: "⏳",
+    toolBodyEnd: "`",
+    toolBodyGutter: "|",
+    toolPreviewTruncated: "+",
     down: "v",
 };
 export const APP_ICON_THEMES = {

package/dist/app/rendering/conversation-tool-renderer.js

@@ -42,7 +42,7 @@ export function renderConversationToolEntry(entry, width, options) {
         collapsedBody: display.collapsedBody,
         expandedText: display.expandedText,
         syntaxHighlight: display.syntaxHighlight,
-    }, rule, width, options.colors, { superCompact: Boolean(options.superCompactTools) });
+    }, rule, width, options.colors, { superCompact: Boolean(options.superCompactTools), showGutter: true });
     return attachImageClickTargets(lines, entry.id, entry.images, { foreground: options.colors.info, underline: true });
 }
 export function renderThinkingEntry(entry, width, options) {
@@ -63,7 +63,7 @@ export function renderThinkingEntry(entry, width, options) {
         expandedText: compactExpandedText || "(empty)",
         bodyWrap: "word",
         syntaxHighlight: compactExpandedText ? markdownSyntaxHighlightsForText(compactExpandedText) : undefined,
-    }, rule, width, options.colors, { superCompact: Boolean(options.superCompactTools && !forceExpanded), backgroundOverride: options.colors.thinkingMessageBackground, skipHeaderBackground: true });
+    }, rule, width, options.colors, { superCompact: Boolean(options.superCompactTools && !forceExpanded), backgroundOverride: options.colors.thinkingMessageBackground, skipHeaderBackground: true, showGutter: false });
 }
 function trimTrailingBlankLines(text) {
     return text.replace(/(?:\r?\n[ \t]*)+$/u, "");
@@ -88,7 +88,7 @@ function renderTodoToolEntry(entry, width, options) {
         output: body,
         collapsedBody: body,
         expandedText: body,
-    }, rule, width, options.colors, { superCompact: Boolean(options.superCompactTools) });
+    }, rule, width, options.colors, { superCompact: Boolean(options.superCompactTools), showGutter: true });
 }
 function todoDetailsText(details) {
     const lines = [];

package/dist/app/rendering/tool-block-renderer.d.ts

@@ -25,5 +25,6 @@ export type ToolBlockRenderOptions = {
     superCompact?: boolean;
     backgroundOverride?: string;
     skipHeaderBackground?: boolean;
+    showGutter?: boolean;
 };
 export declare function renderToolBlock(entry: ToolBlockEntry, rule: ResolvedToolRule, width: number, colors: Theme["colors"], options?: ToolBlockRenderOptions): RenderedLine[];

package/dist/app/rendering/tool-block-renderer.js

@@ -1,7 +1,17 @@
 import { resolveColor } from "../../config.js";
 import { expandTabs, sliceByDisplayWidth, stringDisplayWidth, wrapDisplayLineByWords } from "../../terminal-width.js";
 import { alertIconPrefixLength, hasToolLspDiagnosticsAfterMutation, lspDiagnosticSeverityForLine, sanitizeText, toolStatusIcon, toolStatusIconColor, wrapLine } from "./render-text.js";
-const TRUNCATED_PREVIEW_MARKER = "▶ ";
+import { APP_ICONS } from "../icons.js";
+const TOOL_BODY_PREFIX = "  ";
+function truncatedPreviewMarker() {
+    return `${APP_ICONS.toolPreviewTruncated} `;
+}
+function toolBodyGutterPrefix() {
+    return `${APP_ICONS.toolBodyGutter} `;
+}
+function toolBodyEndPrefix() {
+    return `${APP_ICONS.toolBodyEnd} `;
+}
 export function renderToolBlock(entry, rule, width, colors, options = {}) {
     if (rule.hidden)
         return [];
@@ -19,6 +29,7 @@ export function renderToolBlock(entry, rule, width, colors, options = {}) {
     const headerArgsWidth = width - stringDisplayWidth(headerPrefix) - 1;
     const clippedHeaderArgs = headerArgsWidth > 0 ? sliceByDisplayWidth(headerArgs, headerArgsWidth) : "";
     const target = { kind: "tool", id: entry.id };
+    const showGutter = options.showGutter ?? true;
     const header = clippedHeaderArgs ? `${headerPrefix} ${clippedHeaderArgs}` : headerPrefix;
     const headerArgsStart = clippedHeaderArgs ? headerPrefix.length + 1 : header.length;
     const headerLine = {
@@ -34,7 +45,7 @@ export function renderToolBlock(entry, rule, width, colors, options = {}) {
     };
     const headerLines = [headerLine];
     if (expanded) {
-        headerLines.push(...renderToolBodyLines(entry.expandedText, width, target, toolOutputColor, entry.bodyStyle, colors, entry.syntaxHighlight, entry.bodyWrap, hasLspDiagnostics, entry.bodyLineStyles, entry.preserveAnsi));
+        headerLines.push(...renderToolBodyLines(entry.expandedText, width, target, toolOutputColor, entry.bodyStyle, colors, entry.syntaxHighlight, entry.bodyWrap, hasLspDiagnostics, entry.bodyLineStyles, entry.preserveAnsi, showGutter));
         if (options.skipHeaderBackground && headerLines.length > 1) {
             applyBackground(headerLines.slice(1));
         }
@@ -49,7 +60,7 @@ export function renderToolBlock(entry, rule, width, colors, options = {}) {
     if (!body || rule.previewLines === 0)
         return headerLines;
     if (!options.superCompact) {
-        headerLines.push(...renderCollapsedPreviewLines(entry, body, rule, width, target, toolOutputColor, colors, hasLspDiagnostics));
+        headerLines.push(...renderCollapsedPreviewLines(entry, body, rule, width, target, toolOutputColor, colors, hasLspDiagnostics, showGutter));
         applyBackground(headerLines);
         return headerLines;
     }
@@ -60,13 +71,14 @@ export function renderToolBlock(entry, rule, width, colors, options = {}) {
     const availablePreviewWidth = width - stringDisplayWidth(header) - stringDisplayWidth(separator);
     if (availablePreviewWidth <= 0)
         return headerLines;
-    const previewText = preview.overflow ? `${TRUNCATED_PREVIEW_MARKER}${preview.text}` : preview.text;
+    const markerPrefix = truncatedPreviewMarker();
+    const previewText = preview.overflow ? `${markerPrefix}${preview.text}` : preview.text;
     const clippedPreview = sliceByDisplayWidth(previewText, availablePreviewWidth);
     if (!clippedPreview)
         return headerLines;
     headerLine.text = `${header}${separator}${clippedPreview}`;
     const previewStart = header.length + separator.length;
-    const previewTextStart = previewStart + (preview.overflow ? TRUNCATED_PREVIEW_MARKER.length : 0);
+    const previewTextStart = previewStart + (preview.overflow ? markerPrefix.length : 0);
     headerLine.segments = [
         ...(headerLine.segments ?? []),
         ...(preview.overflow ? [{ start: previewStart, end: previewStart + 1, foreground: colors.statusDotBase }] : []),
@@ -74,8 +86,8 @@ export function renderToolBlock(entry, rule, width, colors, options = {}) {
     ];
     return headerLines;
 }
-function renderCollapsedPreviewLines(entry, body, rule, width, target, color, colors, hasLspDiagnostics) {
-    const allLines = renderToolBodyLines(body, width, target, color, entry.bodyStyle, colors, undefined, entry.bodyWrap, hasLspDiagnostics, entry.bodyLineStyles, entry.preserveAnsi);
+function renderCollapsedPreviewLines(entry, body, rule, width, target, color, colors, hasLspDiagnostics, showGutter) {
+    const allLines = renderToolBodyLines(body, width, target, color, entry.bodyStyle, colors, undefined, entry.bodyWrap, hasLspDiagnostics, entry.bodyLineStyles, entry.preserveAnsi, showGutter);
     if (rule.previewLines >= allLines.length)
         return allLines;
     const previewLines = rule.direction === "tail" ? allLines.slice(-rule.previewLines) : allLines.slice(0, rule.previewLines);
@@ -92,20 +104,33 @@ function markTruncatedPreviewLine(lines, direction, markerColor) {
     if (lines.length === 0)
         return lines;
     const markerIndex = direction === "tail" ? 0 : lines.length - 1;
+    const gutterPrefix = toolBodyGutterPrefix();
+    const markerPrefix = truncatedPreviewMarker();
     return lines.map((line, index) => {
         if (index !== markerIndex)
             return line;
+        const text = line.text.startsWith(gutterPrefix)
+            ? `${markerPrefix}${line.text.slice(gutterPrefix.length)}`
+            : line.text.startsWith(TOOL_BODY_PREFIX)
+                ? `${markerPrefix}${line.text.slice(TOOL_BODY_PREFIX.length)}`
+                : `${markerPrefix}${line.text}`;
+        const existingSegments = (line.segments ?? []).filter((segment) => !(segment.start === 0 && segment.end === 1 && segment.foreground === markerColor));
         return {
             ...line,
-            text: line.text.startsWith("  ") ? `${TRUNCATED_PREVIEW_MARKER}${line.text.slice(2)}` : `${TRUNCATED_PREVIEW_MARKER}${line.text}`,
-            segments: [{ start: 0, end: 1, foreground: markerColor }, ...(line.segments ?? [])],
+            text,
+            segments: [{ start: 0, end: 1, foreground: markerColor }, ...existingSegments],
         };
     });
 }
-function renderToolBodyLines(text, width, target, color, style, colors, syntaxHighlight, bodyWrap = "char", hasLspDiagnostics = false, bodyLineStyles, preserveAnsi = false) {
-    const bodyWidth = Math.max(1, width - 2);
+function renderToolBodyLines(text, width, target, color, style, colors, syntaxHighlight, bodyWrap = "char", hasLspDiagnostics = false, bodyLineStyles, preserveAnsi = false, showGutter = false) {
+    const displayPrefix = showGutter ? toolBodyGutterPrefix() : TOOL_BODY_PREFIX;
+    const prefixWidth = stringDisplayWidth(displayPrefix);
+    const bodyWidth = Math.max(1, width - prefixWidth);
     const lines = [];
     const wrapBodyLine = bodyWrap === "word" ? wrapDisplayLineByWords : wrapLine;
+    const gutterSegment = showGutter
+        ? { start: 0, end: 1, foreground: colors.statusDotBase }
+        : undefined;
     for (const [rawLineIndex, rawLine] of sanitizeToolBodyText(text, preserveAnsi).split("\n").entries()) {
         const ansiLine = preserveAnsi ? ansiStyledLine(rawLine) : undefined;
         const displayLine = ansiLine?.text ?? rawLine;
@@ -118,37 +143,67 @@ function renderToolBodyLines(text, width, target, color, style, colors, syntaxHi
             : wrapBodyLine(displayLine, bodyWidth).map((wrapped) => ({ text: wrapped, segments: [] }));
         for (const [wrapIndex, wrapped] of wrappedLines.entries()) {
             const line = {
-                text: `  ${wrapped.text}`,
-                copyText: `  ${wrapped.text}`,
+                text: `${displayPrefix}${wrapped.text}`,
+                copyText: `${TOOL_BODY_PREFIX}${wrapped.text}`,
                 ...(wrapIndex < wrappedLines.length - 1 ? { continuesOnNextLine: true } : {}),
                 target,
                 colorOverride: color,
             };
             if (diffStyle) {
-                const segment = { start: 2, end: line.text.length, foreground: diffStyle.foreground };
+                const segment = { start: displayPrefix.length, end: line.text.length, foreground: diffStyle.foreground };
                 if (diffStyle.bold != null)
                     segment.bold = diffStyle.bold;
-                line.segments = [segment];
+                line.segments = gutterSegment ? [gutterSegment, segment] : [segment];
             }
             else if (lspDiagnosticStyle?.kind === "alert" && wrapIndex === 0) {
-                line.segments = [{ start: 2, end: 2 + lspDiagnosticStyle.length, foreground: colors.warning, bold: true }];
+                line.segments = [
+                    ...(gutterSegment ? [gutterSegment] : []),
+                    { start: displayPrefix.length, end: displayPrefix.length + lspDiagnosticStyle.length, foreground: colors.warning, bold: true },
+                ];
             }
             else if (lspDiagnosticStyle?.kind === "severity") {
-                line.segments = [{ start: 2, end: line.text.length, foreground: lspDiagnosticStyle.foreground }];
+                line.segments = [
+                    ...(gutterSegment ? [gutterSegment] : []),
+                    { start: displayPrefix.length, end: line.text.length, foreground: lspDiagnosticStyle.foreground },
+                ];
             }
-            else if (bodyLineStyle && line.text.length > 2) {
-                line.segments = [{ start: 2, end: line.text.length, ...bodyLineStyle }];
+            else if (bodyLineStyle && line.text.length > displayPrefix.length) {
+                line.segments = [
+                    ...(gutterSegment ? [gutterSegment] : []),
+                    { start: displayPrefix.length, end: line.text.length, ...bodyLineStyle },
+                ];
             }
             else if (lineSyntaxHighlight) {
                 const rawStart = wrapIndex === 0 ? lineSyntaxHighlight.startColumn ?? 0 : 0;
-                line.syntaxHighlight = { language: lineSyntaxHighlight.language, start: Math.min(line.text.length, 2 + rawStart) };
+                line.syntaxHighlight = { language: lineSyntaxHighlight.language, start: Math.min(line.text.length, displayPrefix.length + rawStart) };
+                if (gutterSegment)
+                    line.segments = [gutterSegment];
             }
             else if (wrapped.segments.length > 0) {
-                line.segments = wrapped.segments.map((segment) => ({ ...segment, start: segment.start + 2, end: segment.end + 2 }));
+                line.segments = [
+                    ...(gutterSegment ? [gutterSegment] : []),
+                    ...wrapped.segments.map((segment) => ({
+                        ...segment,
+                        start: segment.start + displayPrefix.length,
+                        end: segment.end + displayPrefix.length,
+                    })),
+                ];
+            }
+            else if (gutterSegment) {
+                line.segments = [gutterSegment];
             }
             lines.push(line);
         }
     }
+    if (showGutter && lines.length > 0) {
+        const lastLine = lines.at(-1);
+        if (!lastLine)
+            return lines;
+        const gutterPrefix = toolBodyGutterPrefix();
+        if (lastLine.text.startsWith(gutterPrefix)) {
+            lastLine.text = `${toolBodyEndPrefix()}${lastLine.text.slice(gutterPrefix.length)}`;
+        }
+    }
     return lines;
 }
 const ANSI_STANDARD_COLORS = ["#000000", "#cd3131", "#0dbc79", "#e5e510", "#2472c8", "#bc3fbc", "#11a8cd", "#e5e5e5"];

package/dist/app/screen/mouse-controller.d.ts

@@ -124,6 +124,7 @@ export declare class AppMouseController {
     private renderedConversationFrame;
     constructor(host: AppMouseControllerHost, popupMenus: AppPopupMenuController, popupActions: AppPopupActionController, scrollController: AppScrollController, commandController: AppCommandController);
     handleMouse(event: MouseEvent): void;
+    private toolTargetContainsEvent;
     activeClickFlash(): ClickFlash | undefined;
     consumeClickFlashDirty(): boolean;
     private withClickFlash;
@@ -133,6 +134,7 @@ export declare class AppMouseController {
     private clickFlashForEvent;
     private clickFlashForRegion;
     private clickFlashRegionForEvent;
+    private toolClickFlashRegionForEvent;
     private normalizedClickFlashRegion;
     private inputClickFlashRegionForEvent;
     private imageTargetAt;

package/dist/app/screen/mouse-controller.js

@@ -7,6 +7,7 @@ import { sliceByDisplayColumns, stringDisplayWidth } from "../../terminal-width.
 import { formatDcpStatsToast } from "../rendering/dcp-stats.js";
 import { detectFileLinks } from "./file-links.js";
 import { openFileLink as openDetectedFileLink } from "./file-link-opener.js";
+import { APP_ICONS } from "../icons.js";
 const CLICK_FLASH_MS = 100;
 const LOST_MOUSE_RELEASE_SETTLE_MS = 180;
 export class AppMouseController {
@@ -151,6 +152,8 @@ export class AppMouseController {
             return;
         }
         if (target?.kind === "tool") {
+            if (!this.toolTargetContainsEvent(event))
+                return;
             const entry = this.host.findEntry(target.id);
             if (entry?.kind === "tool" || entry?.kind === "thinking" || entry?.kind === "shell") {
                 entry.expanded = !entry.expanded;
@@ -159,6 +162,16 @@ export class AppMouseController {
             }
         }
     }
+    toolTargetContainsEvent(event) {
+        const text = this.renderedRowTexts.get(event.y) ?? "";
+        const gutter = toolGutterGlyphForLine(text);
+        if (gutter) {
+            const gutterWidth = Math.max(1, stringDisplayWidth(gutter));
+            return event.x >= 1 && event.x < 1 + gutterWidth;
+        }
+        const bounds = nonBlankLineBounds(text, event.x);
+        return event.x >= bounds.startColumn && event.x < bounds.endColumn;
+    }
     activeClickFlash() {
         return this.clickFlash;
     }
@@ -230,7 +243,10 @@ export class AppMouseController {
         const statusTarget = this.statusTargetAt(event);
         if (statusTarget)
             return statusTarget;
-        const toastTarget = this.renderedTargets.get(event.y);
+        const target = this.renderedTargets.get(event.y);
+        if (target?.kind === "tool")
+            return this.toolClickFlashRegionForEvent(event);
+        const toastTarget = target;
         if (toastTarget?.kind === "toast" && toastTargetContainsEvent(toastTarget, event)) {
             return {
                 y: event.y,
@@ -244,6 +260,19 @@ export class AppMouseController {
         }
         return undefined;
     }
+    toolClickFlashRegionForEvent(event) {
+        const text = this.renderedRowTexts.get(event.y) ?? "";
+        const gutter = toolGutterGlyphForLine(text);
+        if (gutter) {
+            const gutterWidth = Math.max(1, stringDisplayWidth(gutter));
+            const region = { y: event.y, startColumn: 1, endColumn: 1 + gutterWidth };
+            return event.x >= region.startColumn && event.x < region.endColumn ? region : undefined;
+        }
+        const bounds = nonBlankLineBounds(text, event.x);
+        return event.x >= bounds.startColumn && event.x < bounds.endColumn
+            ? { y: event.y, startColumn: bounds.startColumn, endColumn: bounds.endColumn }
+            : undefined;
+    }
     normalizedClickFlashRegion(region) {
         const columns = Math.max(1, this.host.terminalColumns());
         const y = Math.max(1, region.y);
@@ -995,6 +1024,13 @@ function nonBlankLineBounds(text, fallbackColumn) {
         ? { startColumn: fallbackColumn, endColumn: fallbackColumn + 1 }
         : { startColumn, endColumn };
 }
+function toolGutterGlyphForLine(text) {
+    for (const glyph of [APP_ICONS.toolBodyGutter, APP_ICONS.toolBodyEnd, APP_ICONS.toolPreviewTruncated]) {
+        if (text.startsWith(`${glyph} `))
+            return glyph;
+    }
+    return undefined;
+}
 function displayCellAtColumn(text, column) {
     if (column < 1)
         return " ";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-ui-extend",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "private": false,
   "type": "module",
   "bin": {