pi-pretty-tui 0.2.8 → 0.3.0

package/extensions/nested-tools.ts

@@ -53,11 +53,24 @@ const compactArgs = (value: string): string => {
 export class NestedTools {
   private calls = new Map<string, NestedCall>();
   private incomplete = new Set<string>();
+  private renderCache = new Map<string, {
+    width: number; theme: any; palette: string; args: any; result: any;
+    expanded: boolean; partial: boolean; label: string; rootDetails: boolean;
+    projection: { lines: string[]; actions: Map<number, string> };
+  }>();
+  private countCache = new Map<string, number>();
+  private invalidateRender(rootId?: string) {
+    if (rootId) this.renderCache.delete(rootId);
+    else this.renderCache.clear();
+    this.countCache.clear();
+  }
+
   // Local overrides can close one disclosure even after global expansion.
   private expanded = new Map<string, boolean>();
-  clearExpansion() { this.expanded.clear(); }
+  clearExpansion() { this.expanded.clear(); this.invalidateRender(); }
   clear() { this.calls.clear(); this.incomplete.clear(); this.clearExpansion(); }
   toggle(key: string, globallyExpanded = false) {
+    this.invalidateRender(this.calls.has(key) ? this.root(key) : key.replace(/:(?:script|output)$/, ""));
     this.expanded.set(key, !(this.expanded.get(key) ?? globallyExpanded));
   }
   private isExpanded(key: string, globallyExpanded: boolean): boolean {
@@ -74,15 +87,21 @@ export class NestedTools {
     return [...this.calls.values()].filter((call) => call.parentId === parentId);
   }
   count(rootId: string): number {
-    return [...this.calls.values()].filter((call) => this.root(call.id) === rootId).length;
+    const cached = this.countCache.get(rootId);
+    if (cached !== undefined) return cached;
+    const count = [...this.calls.values()].filter((call) => this.root(call.id) === rootId).length;
+    this.countCache.set(rootId, count);
+    return count;
   }
   start(event: any) {
     if (!event.parentToolCallId || this.calls.has(event.toolCallId)) return;
     const rootId = this.root(event.parentToolCallId);
+    this.invalidateRender(rootId);
     if (this.count(rootId) >= NESTED_LIMITS.calls) { this.incomplete.add(rootId); return; }
     const args = argsText(event.args);
     const argsTruncated = args.length >= NESTED_LIMITS.args;
     if (argsTruncated) this.incomplete.add(rootId);
+    this.countCache.clear();
     this.calls.set(event.toolCallId, {
       id: event.toolCallId, parentId: event.parentToolCallId, name: bounded(String(event.toolName ?? "tool"), 256),
       args, argsTruncated, status: "running", startedAt: Date.now(),
@@ -91,6 +110,7 @@ export class NestedTools {
   update(event: any, finished = false) {
     const call = this.calls.get(event.toolCallId);
     if (!call) return;
+    this.invalidateRender(this.root(call.id));
     const text = resultText(finished ? event.result : event.partialResult);
     const rootId = this.root(call.id);
     const otherSize = [...this.calls.values()].filter((other) => other.id !== call.id && this.root(other.id) === rootId)
@@ -105,6 +125,7 @@ export class NestedTools {
     }
   }
   finish(rootId: string): boolean {
+    this.invalidateRender(rootId);
     let changed = false;
     for (const call of this.calls.values()) {
       if (this.root(call.id) === rootId && call.status === "running") {
@@ -124,6 +145,7 @@ export class NestedTools {
       records = records.calls;
     }
     if (!Array.isArray(records)) return;
+    this.invalidateRender(rootId);
     for (const record of records) {
       if (typeof record?.id !== "string" || typeof record?.name !== "string" || record.id.endsWith("/?")) continue;
       const existing = this.calls.get(record.id);
@@ -137,6 +159,7 @@ export class NestedTools {
       const slash = record.id.lastIndexOf("/");
       const candidate = record.id.slice(0, slash);
       const parentId = this.calls.has(candidate) ? candidate : rootId;
+      this.countCache.clear();
       this.calls.set(record.id, {
         id: record.id, parentId, name: bounded(record.name, 256),
         args: typeof record.args === "string" ? recordedArgs(record.args) : record.argumentsBytes !== undefined ? "[Arguments omitted by Pi]" : argsText(record.arguments),
@@ -172,6 +195,7 @@ export class NestedTools {
   }
   restore(data: any) {
     if (data?.version !== 1 || typeof data.rootId !== "string" || !Array.isArray(data.calls)) return;
+    this.invalidateRender(data.rootId);
     // Snapshot entries originate locally; still validate and bound every field.
     let budget = NESTED_LIMITS.total;
     for (const call of data.calls.slice(0, NESTED_LIMITS.calls)) {
@@ -186,13 +210,24 @@ export class NestedTools {
     }
     if (data.incomplete) this.incomplete.add(data.rootId);
   }
-  render(owner: any, width: number, theme: any): { lines: string[]; actions: Map<number, string> } {
+  render(owner: any, width: number, theme: any, options: { rootDetails?: boolean } = {}): { lines: string[]; actions: Map<number, string> } {
     const rootId = owner.toolCallId;
+    // Timer ticks and scrolling do not change tool content. Reuse wrapped
+    // detail rows and hit regions until data, layout, expansion or colors change.
+    const palette = ["dim", "muted", "text", "success", "error", "warning", "mdLink", "toolOutput"]
+      .map((role) => theme.fg(role, "x")).join("|") + theme.bold("x");
+    const expanded = Boolean(owner.expanded);
+    const partial = Boolean(owner.isPartial);
+    const rootDetails = options.rootDetails !== false;
+    const label = owner.toolDefinition?.label ?? owner.toolName;
+    const cached = this.renderCache.get(rootId);
+    if (cached && cached.width === width && cached.theme === theme && cached.palette === palette &&
+      cached.args === owner.args && cached.result === owner.result && cached.expanded === expanded &&
+      cached.partial === partial && cached.label === label && cached.rootDetails === rootDetails) return cached.projection;
     const actions = new Map<number, string>();
     const count = this.count(rootId);
     const failed = [...this.calls.values()].filter((call) => this.root(call.id) === rootId && call.status === "error").length;
     const color = owner.result?.isError ? "error" : owner.result && !owner.isPartial ? "success" : "dim";
-    const label = owner.toolDefinition?.label ?? owner.toolName;
     const lines = [theme.fg(color, "● ") + theme.fg("text", theme.bold(label)) +
       theme.fg("muted", `(${count} nested ${count === 1 ? "call" : "calls"}${failed ? ` · ${failed} failed` : ""})`)];
     const detail = (text: string, prefix: string, action?: string) => {
@@ -210,7 +245,13 @@ export class NestedTools {
       }
       if (safeText(text).length > NESTED_LIMITS.output) push(theme.fg("dim", prefix + "[Preview truncated]"));
     };
-    const items = this.children(rootId);
+    const childLists = new Map<string, NestedCall[]>();
+    for (const call of this.calls.values()) {
+      const siblings = childLists.get(call.parentId) ?? [];
+      siblings.push(call);
+      childLists.set(call.parentId, siblings);
+    }
+    const items = childLists.get(rootId) ?? [];
     const visit = (call: NestedCall, indent: string, last: boolean, depth: number) => {
       const prefix = indent + (last ? "└─ " : "├─ ");
       const continuation = indent + (last ? "   " : "│  ");
@@ -218,7 +259,7 @@ export class NestedTools {
       const callColor = call.status === "ok" ? "success" : call.status === "error" ? "error" : call.status === "running" ? "dim" : "muted";
       actions.set(lines.length, call.id);
       const duration = call.durationMs === undefined ? "" : ` · ${call.durationMs < 1000 ? `${Math.round(call.durationMs)}ms` : `${(call.durationMs / 1000).toFixed(1)}s`}`;
-      const descendants = this.children(call.id);
+      const descendants = childLists.get(call.id) ?? [];
       lines.push(theme.fg("dim", prefix) + theme.fg(callColor, icon + " ") + theme.fg("text", theme.bold(call.name)) + theme.fg("muted", `(${compactArgs(call.args)})${duration}`));
       const expanded = this.isExpanded(call.id, Boolean(owner.expanded));
       const first = call.output?.split("\n").find((line) => line.trim());
@@ -235,17 +276,22 @@ export class NestedTools {
       else if (descendants.length) detail("[Deeper calls omitted]", continuation);
     };
     const code = typeof owner.args?.code === "string" ? owner.args.code : undefined;
-    if (code) {
+    if (code && options.rootDetails !== false) {
       const key = `${rootId}:script`;
       actions.set(lines.length, key); lines.push(theme.fg("dim", "  ├─ ") + theme.fg("mdLink", "[Script]"));
       if (this.isExpanded(key, Boolean(owner.expanded))) detail(code, "  │  ", key);
     }
-    items.forEach((call) => visit(call, "  ", false, 0));
-    const key = `${rootId}:output`;
-    actions.set(lines.length, key);
-    lines.push(theme.fg("dim", "  └─ ") + theme.fg("mdLink", code ? "[Script output]" : "[Output]"));
-    if (this.isExpanded(key, Boolean(owner.expanded))) detail(resultText(owner.result) || (owner.isPartial || !owner.result ? "Running…" : "No text output"), "     ", key);
+    items.forEach((call, index) => visit(call, "  ", options.rootDetails === false && index === items.length - 1, 0));
+    if (options.rootDetails !== false) {
+      const key = `${rootId}:output`;
+      actions.set(lines.length, key);
+      lines.push(theme.fg("dim", "  └─ ") + theme.fg("mdLink", code ? "[Script output]" : "[Output]"));
+      if (this.isExpanded(key, Boolean(owner.expanded))) detail(resultText(owner.result) || (owner.isPartial || !owner.result ? "Running…" : "No text output"), "     ", key);
+    }
     if (this.incomplete.has(rootId)) lines.push(theme.fg("warning", "  [Nested call record is incomplete or truncated]"));
-    return { lines: lines.map((line) => truncateToWidth(line, Math.max(1, width), "…")), actions };
+    const projection = { lines: lines.map((line) => truncateToWidth(line, Math.max(1, width), "…")), actions };
+    this.renderCache.set(rootId, { width, theme, palette, args: owner.args, result: owner.result,
+      expanded, partial, label, rootDetails, projection });
+    return projection;
   }
 }

package/extensions/shell-highlight.ts

@@ -0,0 +1,36 @@
+import { highlightCode } from "@earendil-works/pi-coding-agent";
+import { stripTerminalSequences } from "@earendil-works/pi-tui";
+
+/** Shell highlighting only changes ANSI styling, never the command text. */
+export function highlightShellCommand(command: string, theme: any, state: any): string {
+  const palette = ["syntaxComment", "syntaxKeyword", "syntaxFunction", "syntaxVariable", "syntaxString",
+    "syntaxNumber", "syntaxType", "syntaxOperator", "syntaxPunctuation"]
+    .map((role) => theme.fg(role, "x")).join("|");
+  const cached = state.prettyShellHighlight;
+  if (cached?.command === command && cached.palette === palette) return cached.text;
+  const highlighted = highlightCode(command, "bash").join("\n");
+  const text = stripTerminalSequences(highlighted) === command ? highlighted : command;
+  state.prettyShellHighlight = { command, palette, text };
+  return text;
+}
+
+/** Style Pi's native shell Text through its component contract, not instanceof:
+ * bundled/global/local Pi runtimes can carry distinct Text constructors. */
+export function highlightNativeShellCall(owner: any, theme: any): void {
+  if (owner.toolName !== "bash") return;
+  const command = owner.args?.command;
+  const component = owner.callRendererComponent;
+  if (typeof command !== "string" || !command || typeof component?.text !== "string" ||
+    typeof component?.setText !== "function") return;
+  const state = owner.rendererState ??= {};
+  const previous = state.prettyShellCall;
+  const original = previous?.component === component && previous.command === command &&
+    previous.styled === component.text ? previous.original : component.text;
+  const promptStart = original.indexOf("$ " + command);
+  if (promptStart < 0) return;
+  const start = promptStart + 2;
+  const highlighted = highlightShellCommand(command, theme, state);
+  const text = original.slice(0, start) + highlighted + original.slice(start + command.length);
+  state.prettyShellCall = { component, command, original, styled: text };
+  if (text !== component.text) component.setText(text);
+}

package/extensions/thought-presentation.ts

@@ -0,0 +1,38 @@
+import { Markdown, truncateToWidth } from "@earendil-works/pi-tui";
+
+/** Thought content is independent of activity grouping and mode defaults. */
+export class ThoughtPresentation {
+  private cache = new WeakMap<object, {
+    text: string; theme: any; palette: string; markdownTheme: any; component: Markdown;
+    width?: number; lines?: string[];
+  }>();
+
+  header(label: string, width: number, theme: any): string {
+    return truncateToWidth(
+      theme.fg("mdLink", "● ") + theme.fg("text", theme.bold(label)),
+      Math.max(1, width), "…",
+    );
+  }
+
+  details(owner: any, text: string, theme: any, contentWidth: number): string[] {
+    const palette = ["dim", "muted", "mdHeading", "mdCode", "mdCodeBlock", "mdLink"]
+      .map((role) => theme.fg(role, "x")).join("|");
+    let detail = this.cache.get(owner);
+    if (!detail || detail.text !== text || detail.theme !== theme || detail.palette !== palette || detail.markdownTheme !== owner.markdownTheme) {
+      detail = {
+        text, theme, palette, markdownTheme: owner.markdownTheme,
+        component: new Markdown(text, 0, 0, owner.markdownTheme, {
+          color: (line: string) => theme.fg("muted", line), italic: true,
+        }),
+      };
+      this.cache.set(owner, detail);
+    }
+    if (detail.width === contentWidth && detail.lines) return detail.lines;
+    const lines = detail.component.render(Math.max(1, contentWidth));
+    detail.width = contentWidth;
+    detail.lines = lines.map((line, index) =>
+      theme.fg("dim", index === lines.length - 1 ? "  └ " : "  │ ") + line,
+    );
+    return detail.lines;
+  }
+}

package/extensions/tool-presentation.ts

@@ -0,0 +1,286 @@
+import { highlightNativeShellCall } from "./shell-highlight.js";
+import { isNativeImageRow, stripAnsiBackgrounds } from "./ansi-style.js";
+import { cardMargin, frameNativeRows, frameNativeToolRows, nativeFrameWidth } from "./full-frame.js";
+import { Spacer, Text, sliceByColumn, stripTerminalSequences, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { NestedTools } from "./nested-tools.js";
+
+// Tool content and hit regions are independent of activity grouping. The host
+// decides whether to decorate this projection with a clean activity tree.
+export const SPECIALIZED_TOOL_NAMES = new Set(["read", "bash", "edit", "write", "grep", "find", "ls"]);
+export const isThirdPartyTool = (owner: any): boolean =>
+  !SPECIALIZED_TOOL_NAMES.has(owner.toolName) || owner.toolDefinition?.renderShell !== "self";
+
+export const toolLabel = (toolName: string, label?: string): string => label || toolName;
+
+const conciseThirdPartyArgs = (args: any): string => {
+  if (!args || typeof args !== "object" || Array.isArray(args)) return "";
+  const sensitive = /(?:token|secret|password|authorization|credential|api[_-]?key)/iu;
+  const preferred = ["path", "query", "url", "offset", "id"];
+  const entries = Object.entries(args)
+    .filter(([key, value]) => !sensitive.test(key) && ["string", "number", "boolean"].includes(typeof value))
+    .sort(([left], [right]) => {
+      const leftRank = preferred.indexOf(left);
+      const rightRank = preferred.indexOf(right);
+      return (leftRank < 0 ? preferred.length : leftRank) -
+        (rightRank < 0 ? preferred.length : rightRank);
+    })
+    .slice(0, 2)
+    .map(([key, value]) => {
+      const safeValue = String(value)
+        .replace(/(https?:\/\/)[^\s/@:]+:[^\s/@]+@/giu, "$1…:…@")
+        .replace(/([?&](?:token|secret|password|api[_-]?key)=)[^&\s]+/giu, "$1…");
+      const rendered = truncateToWidth(safeValue, 36, "…");
+      return `${key}=${rendered}`;
+    });
+  return entries.join(" · ");
+};
+
+const thirdPartyResultSummary = (component: any): string => {
+  const detailsError = component.result?.details?.error;
+  const firstText = component.result?.content?.find(
+    (item: any) => item?.type === "text" && typeof item.text === "string" && item.text.length > 0,
+  )?.text;
+  const text = String(typeof detailsError === "string" ? detailsError : firstText ?? "");
+  const boundedText = text.slice(0, 512);
+  const newline = boundedText.indexOf("\n");
+  const boundedFirstLine = boundedText.slice(0, newline < 0 ? boundedText.length : newline);
+  const firstLine = stripTerminalSequences(boundedFirstLine).trim();
+  if (firstLine) return truncateToWidth(firstLine, 72, "…");
+  if (component.result) return component.result.isError ? "Failed" : "Done";
+  return component.executionStarted ? "Running…" : "Pending";
+};
+
+export const renderThirdPartyCompact = (component: any, width: number, theme: any): string[] => {
+  const label = toolLabel(component.toolName, component.toolDefinition?.label);
+  const args = conciseThirdPartyArgs(component.args);
+  const dotColor = component.result?.isError
+    ? "error"
+    : component.result && !component.isPartial
+      ? "success"
+      : "dim";
+  const title = theme.fg(dotColor, "● ") +
+    theme.fg("text", theme.bold(label)) +
+    (args ? theme.fg("muted", `(${args})`) : "");
+  const result = thirdPartyResultSummary(component);
+  const resultColor = component.result?.isError ? "error" : "muted";
+  return [
+    truncateToWidth(title, Math.max(1, width), "…"),
+    theme.fg(resultColor, truncateToWidth(`  └ ${result}`, Math.max(1, width), "…")),
+  ];
+};
+
+export type ToolProjection = {
+  lines: string[];
+  actions: Map<number, string>;
+  toggleRows: Set<number>;
+  // Coordinates of the original renderer inside the projection. sourceY
+  // accounts for Pi's spacer, removed only by compact/clean presentation.
+  native?: { x: number; y: number; width: number; height: number; sourceY: number };
+  sourceRows?: Map<number, number>;
+};
+
+// Native shell/codemode timers are distinct final renderer components. Locate
+// that component, never a matching line in user output, before moving it.
+const nativeTimerRegion = (owner: any, resultStart: number, contentWidth: number, width: number, rows: string[]) => {
+  if (!["bash", "powershell", "codemode"].includes(owner.toolName)) return undefined;
+  const state = owner.rendererState?.nativeFull?.state ?? owner.rendererState;
+  if (typeof state?.startedAt !== "number" && typeof state?.endedAt !== "number") return undefined;
+  const children: any[] | undefined = owner.resultRendererComponent?.children;
+  if (!children?.length) return undefined;
+  const tail = children[children.length - 1];
+  if (!(tail instanceof Text) || typeof (tail as any).text !== "string") return undefined;
+  const label = stripTerminalSequences((tail as any).text).trim();
+  if (!/^(?:Took|Elapsed) \d+(?:\.\d+)?[smh](?: \d+(?:\.\d+)?[smh])*$/.test(label) || visibleWidth(label) + 6 > width) return undefined;
+  let first = children.length - 1;
+  if (children[first - 1] instanceof Spacer) first--;
+  const height = (items: any[]) => items.reduce((sum, item) => sum + item.render(contentWidth).length, 0);
+  const start = resultStart + height(children.slice(0, first));
+  const end = resultStart + height(children);
+  if (rows.slice(start, end).map(stripTerminalSequences).join("\n").trim() !== label) return undefined;
+  return { label, start, end };
+};
+
+function renderToolContent(
+  owner: any,
+  width: number,
+  theme: any,
+  options: {
+    mode: "full" | "compact";
+    nested: NestedTools;
+    nestedExpanded: boolean;
+    panels?: boolean;
+    cardTitle?: string;
+    renderNative: (width: number) => string[];
+  },
+): ToolProjection | undefined {
+  const actions = new Map<number, string>();
+  const toggleRows = new Set<number>();
+  if (options.mode === "full") {
+    const innerWidth = nativeFrameWidth(width);
+    highlightNativeShellCall(owner, theme);
+    const nativeLines = options.renderNative(innerWidth);
+    if (!nativeLines.length) return { lines: [], actions, toggleRows };
+    const self = owner.toolDefinition?.renderShell === "self";
+    const shell = self ? owner.selfRenderContainer : owner.contentBox;
+    const call = shell?.children?.[0];
+    const callWidth = self ? innerWidth : Math.max(1, innerWidth - (owner.outputPad ?? 1) * 2);
+    const callStart = self ? 1 : 2;
+    const callHeight = call?.render(callWidth).length ?? 0;
+    const resultBoundaries: number[] = [];
+    if (!owner.toolDefinition && typeof owner.formatToolExecution === "function") {
+      // Unknown historical tools use Pi's generic Text component. Measure the
+      // native prefix rather than reconstructing or parsing the displayed args.
+      const output = owner.getTextOutput();
+      const formatted = owner.formatToolExecution();
+      if (output && formatted.endsWith("\n" + output)) {
+        const prefix = formatted.slice(0, -output.length - 1);
+        const resultY = new Text(prefix, owner.outputPad ?? 1, 1).render(innerWidth).length;
+        resultBoundaries.push(resultY);
+      } else if (owner.imageComponents?.length && owner.contentText) {
+        // With image display enabled, the generic text output may be empty;
+        // the native image spacers and payload follow the generic text region.
+        resultBoundaries.push(1 + owner.contentText.render(innerWidth).length);
+      }
+    }
+    // Native edit puts its authoritative diff in the call component so a
+    // pre-execution preview can update in place. Split the displayed rows at
+    // that region without rebuilding or duplicating its content.
+    const preview = owner.callRendererComponent;
+    if ((typeof preview?.preview?.diff === "string" || typeof preview?.preview?.error === "string") && preview.children?.length >= 3) {
+      const previewWidth = Math.max(1, callWidth - (preview.paddingX ?? 0) * 2);
+      const diffStart = callStart + (preview.paddingY ?? 0) +
+        preview.children.slice(0, 2).reduce((sum: number, child: any) => sum + child.render(previewWidth).length, 0);
+      resultBoundaries.push(diffStart);
+    }
+    if (owner.result && shell?.children?.length > 1) {
+      const resultStart = callStart + callHeight;
+      if (resultStart < nativeLines.length) resultBoundaries.push(resultStart);
+    }
+    // Only split a real result. Native edit previews before execution stay in
+    // the call card; empty/collapsed results must not create an empty card.
+    const timer = nativeTimerRegion(owner, callStart + callHeight, callWidth, width - cardMargin(width) * 2, nativeLines);
+    const sourceIndexes = nativeLines.map((_, y) => y).filter((y) => !timer || y < timer.start || y >= timer.end);
+    const displayed = sourceIndexes.map((y) => nativeLines[y]);
+    const candidates = owner.result ? resultBoundaries.sort((a, b) => a - b)
+      .map((start) => sourceIndexes.findIndex((y) => y >= start)) : [];
+    const resultStart = candidates.find((start) => start > 0 && start < displayed.length &&
+      displayed.slice(start).some((line) => stripTerminalSequences(line).trim() ||
+        line.includes("\x1b_G") || line.includes("\x1b]1337;File=")));
+    const frame = frameNativeToolRows(
+      options.cardTitle ?? toolLabel(owner.toolName, owner.toolDefinition?.label), displayed, width, theme,
+      resultStart, owner.result?.isError ? "error" : owner.isPartial ? "muted" : "success", owner, timer?.label,
+    );
+    const sourceRows = new Map([...frame.sourceRows].map(([y, original]) => [y, sourceIndexes[original]]));
+    if (timer) sourceRows.set(frame.lines.length - 1, timer.start);
+    return {
+      lines: frame.lines, actions, toggleRows, sourceRows,
+      native: { x: frame.inset, y: 0, width: innerWidth, height: nativeLines.length, sourceY: 0 },
+    };
+  }
+  if (options.nested.count(owner.toolCallId) > 0) {
+    return { ...options.nested.render({ ...owner, expanded: options.nestedExpanded }, width, theme), toggleRows };
+  }
+  if (!isThirdPartyTool(owner)) return undefined;
+  const summary = renderThirdPartyCompact(owner, width, theme);
+  toggleRows.add(0);
+  if (!owner.expanded) {
+    toggleRows.add(1);
+    return { lines: summary, actions, toggleRows };
+  }
+  const prefix = "  │ ";
+  const nativeWidth = Math.max(1, width - visibleWidth(prefix));
+  const nativeLines = options.renderNative(nativeWidth);
+  const sourceY = nativeLines[0] === "" ? 1 : 0;
+  const content = nativeLines.slice(sourceY);
+  return {
+    lines: [summary[0], ...content.map((line, i) => isNativeImageRow(line) ? line :
+      truncateToWidth(
+        theme.fg("dim", i === content.length - 1 ? "  └ " : prefix) + stripAnsiBackgrounds(line),
+        Math.max(1, width), "",
+      ))],
+    actions, toggleRows,
+    native: { x: visibleWidth(prefix), y: 1, width: nativeWidth, height: content.length, sourceY },
+  };
+}
+
+/** Compact shares panel geometry with full, retaining its concise projection. */
+export function renderToolProjection(
+  owner: any, width: number, theme: any,
+  options: Parameters<typeof renderToolContent>[3],
+): ToolProjection | undefined {
+  if (options.mode === "full" || options.panels === false) return renderToolContent(owner, width, theme, options);
+  if (owner.expanded && !options.nested.count(owner.toolCallId)) {
+    const projection = renderToolContent(owner, width, theme, { ...options, mode: "full", cardTitle: `${toolLabel(owner.toolName, owner.toolDefinition?.label)} ▾` });
+    if (projection) {
+      projection.toggleRows.add(0);
+      if (width < 8) projection.lines = projection.lines.map((line) => isNativeImageRow(line) ? line : truncateToWidth(line, Math.max(1, width), ""));
+    }
+    return projection;
+  }
+  const innerWidth = nativeFrameWidth(width);
+  let content = renderToolContent(owner, innerWidth, theme, options);
+  if (!content) {
+    const raw = options.renderNative(innerWidth);
+    if (!raw.length) return { lines: [], actions: new Map(), toggleRows: new Set() };
+    const sourceY = raw[0] === "" ? 1 : 0;
+    content = { lines: raw.slice(sourceY), actions: new Map(), toggleRows: new Set(),
+      native: { x: 0, y: 0, width: innerWidth, height: raw.length - sourceY, sourceY } };
+  }
+  const sections = new Map<number, { label: string; color: string }>();
+  const native = content.native;
+  if (native && owner.result && owner.expanded) {
+    const self = owner.toolDefinition?.renderShell === "self";
+    const call = (self ? owner.selfRenderContainer : owner.contentBox)?.children?.[0];
+    if (call) {
+      const callWidth = self ? native.width : Math.max(1, native.width - (owner.outputPad ?? 1) * 2);
+      const start = native.y + (self ? 1 : 2) + call.render(callWidth).length - native.sourceY;
+      if (start < content.lines.length) sections.set(start, { label: "Output", color: owner.result.isError ? "error" : "success" });
+    }
+  }
+  const color = owner.result?.isError ? "error" : owner.result && !owner.isPartial ? "success" : "accent";
+  const duration = !owner.isPartial && Number.isFinite(owner.result?.durationMs) ? owner.result.durationMs : undefined;
+  const seconds = duration === undefined ? undefined : Math.max(0, duration) / 1000;
+  const footer = seconds === undefined ? "" : seconds < 60 ? `Took ${seconds.toFixed(1)}s`
+    : seconds < 3600 ? `Took ${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`
+    : `Took ${Math.floor(seconds / 3600)}h ${Math.floor(seconds / 60) % 60}m ${Math.floor(seconds % 60)}s`;
+  const body = content.lines.slice();
+  if (!owner.expanded && body.length) {
+    const label = toolLabel(owner.toolName, owner.toolDefinition?.label);
+    const plain = stripTerminalSequences(body[0]);
+    const prefix = `● ${label}(`;
+    if (plain.startsWith(prefix) && plain.endsWith(")")) {
+      const start = visibleWidth(prefix);
+      body[0] = (owner.toolName === "bash" ? theme.fg("toolTitle", "$ ") : "") +
+        sliceByColumn(body[0], start, Math.max(0, visibleWidth(plain) - start - 1));
+    } else if (plain === `● ${label}`) {
+      body[0] = theme.fg("muted", "No arguments");
+    }
+    for (let row = 1; row < body.length; row++) {
+      const result = /^(\s*└\s*)/.exec(stripTerminalSequences(body[row]));
+      if (result) {
+        const prefixWidth = visibleWidth(result[1]);
+        const status = owner.result?.isError ? "✕ " : owner.result && !owner.isPartial ? "✓ " : "· ";
+        body[row] = theme.fg(color === "accent" ? "dim" : color, status) +
+          sliceByColumn(body[row], prefixWidth, Math.max(0, visibleWidth(body[row]) - prefixWidth));
+        break;
+      }
+    }
+  }
+  const collapsible = !options.nested.count(owner.toolCallId);
+  const title = toolLabel(owner.toolName, owner.toolDefinition?.label) + (collapsible ? ` ${owner.expanded ? "▾" : "▸"}` : "");
+  const frame = frameNativeRows(title, body, width, theme,
+    sections, owner, color, footer, color, color === "error" ? "toolErrorBg" : "toolPendingBg");
+  const actions = new Map<number, string>();
+  const toggleRows = new Set<number>();
+  const sourceRows = new Map<number, number>();
+  for (const [y, source] of frame.sourceRows) {
+    const action = content.actions.get(source);
+    if (action) actions.set(y, action);
+    if (content.toggleRows.has(source)) toggleRows.add(y);
+    if (native && source >= native.y && source < native.y + native.height) sourceRows.set(y, source - native.y + native.sourceY);
+  }
+  if (!options.nested.count(owner.toolCallId)) toggleRows.add(0);
+  const lines = width < 8 ? frame.lines.map((line) => isNativeImageRow(line) ? line : truncateToWidth(line, Math.max(1, width), "")) : frame.lines;
+  return { lines, actions, toggleRows, sourceRows: native ? sourceRows : undefined,
+    native: native ? { ...native, x: frame.inset + native.x, y: 0 } : undefined };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "A beautiful, polished TUI for the Pi coding agent",
   "license": "MIT",
   "author": "Kainan Yang <ykn0309@whu.edu.cn>",
@@ -39,8 +39,8 @@
     "@earendil-works/pi-tui": "*"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "1.1.0",
-    "@earendil-works/pi-tui": "1.1.0",
+    "@earendil-works/pi-coding-agent": "1.3.0",
+    "@earendil-works/pi-tui": "1.3.0",
     "@types/node": "^24.0.0",
     "jiti": "^2.7.0",
     "typescript": "^5.9.0"