pi-pretty-tui 0.3.3 → 0.3.4

package/extensions/edit-diff.ts

@@ -0,0 +1,103 @@
+import { getLanguageFromPath, highlightCode } from "@earendil-works/pi-coding-agent";
+import { sliceByColumn, visibleWidth } from "@earendil-works/pi-tui";
+
+type Range = [number, number];
+type Row = { marker: string; number?: string; text: string; styled: string; changes: Range[] };
+const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const graphemes = (text: string) => Array.from(segmenter.segment(text), part => part.segment);
+
+// Bounded grapheme LCS: long/unrelated lines fall back to highlighting their
+// changed middle. Neither path splits emoji, combining marks or surrogate pairs.
+function changedRanges(before: string, after: string): [Range[], Range[]] {
+  const a = graphemes(before), b = graphemes(after);
+  let start = 0;
+  while (start < a.length && start < b.length && a[start] === b[start]) start++;
+  let endA = a.length, endB = b.length;
+  while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) { endA--; endB--; }
+  const removed: Range[] = [], added: Range[] = [];
+  const range = (parts: string[], from: number, to: number): Range =>
+    [visibleWidth(parts.slice(0, from).join("")), visibleWidth(parts.slice(0, to).join(""))];
+  const n = endA - start, m = endB - start;
+  if (!n || !m || n * m > 65536) {
+    if (n) removed.push(range(a, start, endA));
+    if (m) added.push(range(b, start, endB));
+    return [removed, added];
+  }
+  const matrix = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--)
+    matrix[i][j] = a[start + i] === b[start + j] ? matrix[i + 1][j + 1] + 1 : Math.max(matrix[i + 1][j], matrix[i][j + 1]);
+  let i = 0, j = 0;
+  while (i < n || j < m) {
+    if (i < n && j < m && a[start + i] === b[start + j]) { i++; j++; }
+    else if (i < n && (j === m || matrix[i + 1][j] >= matrix[i][j + 1])) {
+      removed.push(range(a, start + i, start + i + 1));
+      i++;
+    } else {
+      added.push(range(b, start + j, start + j + 1));
+      j++;
+    }
+  }
+  const merge = (ranges: Range[]) => ranges.reduce<Range[]>((result, next) => {
+    const previous = result[result.length - 1];
+    if (previous && previous[1] === next[0]) previous[1] = next[1];
+    else result.push(next);
+    return result;
+  }, []);
+  return [merge(removed), merge(added)];
+}
+
+export function editDiffLayout(theme: any, diff: string, path?: string) {
+  const rows: Row[] = diff.split("\n").map(line => {
+    const match = /^([ +\-]) *(\d+) (.*)$/.exec(line);
+    const marker = match?.[1] ?? (line.startsWith("+") && !line.startsWith("+++") ? "+" : line.startsWith("-") && !line.startsWith("---") ? "-" : " ");
+    const text = (match ? match[3] : /^\s+\.\.\.$/.test(line) ? "..." : line).replace(/\t/g, "   ");
+    return { marker, number: match?.[2], text, styled: text, changes: [] };
+  });
+  // Highlight old/new snippets separately so removed code cannot corrupt the
+  // syntax state of the new side. Keep all highlighting in the host's theme.
+  const language = path ? getLanguageFromPath(path) : undefined;
+  for (const excluded of ["+", "-"]) {
+    const side = rows.filter(row => row.marker !== excluded);
+    let styled: string[];
+    try { styled = highlightCode(side.map(row => row.text).join("\n"), language); }
+    catch { styled = side.map(row => row.text); }
+    side.forEach((row, index) => {
+      if (row.marker !== " " || excluded === "+") row.styled = styled[index] ?? row.text;
+    });
+  }
+  for (let index = 0; index < rows.length;) {
+    if (rows[index].marker !== "-") { index++; continue; }
+    const removed: Row[] = [], added: Row[] = [];
+    while (rows[index]?.marker === "-") removed.push(rows[index++]);
+    while (rows[index]?.marker === "+") added.push(rows[index++]);
+    // Do not guess a line pairing when a replacement changes the line count.
+    if (removed.length === added.length) removed.forEach((row, i) => {
+      [row.changes, added[i].changes] = changedRanges(row.text, added[i].text);
+    });
+  }
+  const numberWidth = rows.reduce((width, row) => Math.max(width, row.number?.length ?? 0), 1);
+  let index = 0;
+  return (_line: string) => {
+    const row = rows[index++];
+    const color = row.marker === "+" ? "toolDiffAdded" : row.marker === "-" ? "toolDiffRemoved" : "toolDiffContext";
+    const background = row.marker === "+" ? "toolSuccessBg" : row.marker === "-" ? "toolErrorBg" : undefined;
+    const paint = (text: string) => background && theme.bg ? theme.bg(background, text) : text;
+    const width = visibleWidth(row.text);
+    let content = "", cursor = 0;
+    for (const [start, end] of row.changes) {
+      content += sliceByColumn(row.styled, cursor, start - cursor);
+      const changed = sliceByColumn(row.styled, start, end - start);
+      // Underline + bold preserve syntax foreground colors, unlike inverse.
+      content += theme.underline ? theme.underline(theme.bold(changed)) : theme.bold(changed);
+      cursor = end;
+    }
+    content += sliceByColumn(row.styled, cursor, Math.max(0, width - cursor));
+    const gutter = row.number ? `${row.number.padStart(numberWidth)} ${row.marker} ` : " ".repeat(numberWidth + 3);
+    return {
+      prefix: paint(theme.fg(color, gutter)),
+      continuation: paint(" ".repeat(numberWidth + 3)),
+      content,
+      background: background ? paint : undefined,
+    };
+  };
+}

package/extensions/index.ts

@@ -8,6 +8,7 @@ import {
   type InlineToken,
 } from "./markdown-emphasis.js";
 import { gapRowsAfterBlock, renderSpacedList } from "./markdown-spacing.js";
+import { editDiffLayout } from "./edit-diff.js";
 import { ThoughtPresentation } from "./thought-presentation.js";
 import { isThirdPartyTool, renderToolProjection, THIRD_PARTY_TOOL, toolLabel, type ToolProjection } from "./tool-presentation.js";
 import { NestedTools, NESTED_SNAPSHOT_ENTRY } from "./nested-tools.js";
@@ -196,14 +197,14 @@ export default function prettyTui(pi: ExtensionAPI) {
   let latestActivityStatusGeneration = 0;
   const renderLatestActivityStatus = (status: LatestActivityStatus, width: number, theme: any): string => {
     const severity = status.severity ?? "status";
-    const icon = severity === "error" ? "✕" : severity === "success" ? "✓" : "◇";
+    const icon = severity === "error" ? "✕ " : severity === "success" ? "✓ " : "";
     const color = severity === "error"
       ? "error"
       : severity === "success"
         ? "success"
         : "dim";
     const detail = status.detail?.trim() ? ` — ${status.detail.trim()}` : "";
-    return truncateToWidth(` ${theme.fg(color, `${icon} ${status.title}`)}${theme.fg("dim", detail)}`, Math.max(1, width), "…");
+    return truncateToWidth(` ${theme.fg(color, `${icon}${status.title}`)}${theme.fg("dim", detail)}`, Math.max(1, width), "…");
   };
   const refreshLatestActivityWidget = () => {
     if (!currentExtensionUi?.setWidget) return;
@@ -642,7 +643,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     );
   };
 
-  const renderStandaloneError = (member: ActivityMember, width: number, component?: any): string[] => {
+  const renderStandaloneAlert = (member: ActivityMember, width: number, component?: any): string[] => {
     const run = component && renderMode !== "full" ? errorRun(component) : { hidden: false, count: 1, compact: false };
     if (component) errorDisclosureRows.delete(component);
     if (run.hidden) return [];
@@ -656,7 +657,9 @@ export default function prettyTui(pi: ExtensionAPI) {
       const prefix = heading + (content ? theme.fg("dim", " · ") : "");
       const text = prefix + theme.fg("muted", content) + (count > 1 ? theme.fg("dim", component && expandedErrorRuns.has(component) ? " [Collapse]" : ` [×${count}]`) : "");
       // Wrap rather than truncate; all original detail lines remain accessible.
-      const continuation = " ".repeat(Math.min(visibleWidth(prefix), Math.max(0, Math.floor(width / 3))));
+      // A single-line notification can be entirely its title. Indenting by
+      // that title's length wastes most of the viewport on every continuation.
+      const continuation = " ".repeat(Math.min(2, Math.max(0, width - 1)));
       const rows: string[] = [];
       for (const line of text.split("\n")) {
         const wrapped = wrapTextWithAnsi(line, Math.max(1, width - visibleWidth(continuation)));
@@ -686,8 +689,8 @@ export default function prettyTui(pi: ExtensionAPI) {
   };
 
   const renderPendingActivityUpdate = (member: ActivityMember, width: number, component?: any): string[] => {
-    if (member.updateSeverity === "error" && member.updateTitle !== "Response truncated") {
-      return renderStandaloneError(member, width, component);
+    if (member.updateSeverity === "error" || member.updateSeverity === "warning") {
+      return renderStandaloneAlert(member, width, component);
     }
     const theme = defaultActivityTheme();
     const title = truncateToWidth(member.updateTitle ?? "Update", Math.max(1, width - 2), "…");
@@ -2797,6 +2800,8 @@ export default function prettyTui(pi: ExtensionAPI) {
     prefix: DisplayValue;
     continuation?: DisplayValue;
     content: DisplayValue;
+    singleLine?: boolean;
+    background?: (text: string) => string;
   };
 
   /**
@@ -2810,14 +2815,21 @@ export default function prettyTui(pi: ExtensionAPI) {
       for (const row of rows) {
         const prefix = typeof row.prefix === "function" ? row.prefix() : row.prefix;
         const content = typeof row.content === "function" ? row.content() : row.content;
+        if (row.singleLine) {
+          const inline = content.replace(/\r\n|\r|\n/g, " ");
+          rendered.push(truncateToWidth(prefix + inline, Math.max(1, width), "…"));
+          continue;
+        }
         const rawContinuation = row.continuation ?? " ".repeat(visibleWidth(prefix));
         const continuation = typeof rawContinuation === "function" ? rawContinuation() : rawContinuation;
         const prefixWidth = Math.max(visibleWidth(prefix), visibleWidth(continuation));
         const contentWidth = Math.max(1, width - prefixWidth);
         const wrapped = wrapTextWithAnsi(content || " ", contentWidth);
 
-        rendered.push(prefix + (wrapped[0] ?? ""));
-        for (const line of wrapped.slice(1)) rendered.push(continuation + line);
+        const paint = (line: string) => row.background
+          ? row.background(line + " ".repeat(Math.max(0, contentWidth - visibleWidth(line)))) : line;
+        rendered.push(prefix + paint(wrapped[0] ?? ""));
+        for (const line of wrapped.slice(1)) rendered.push(continuation + paint(line));
       }
 
       return rendered;
@@ -2830,7 +2842,8 @@ export default function prettyTui(pi: ExtensionAPI) {
     context.state.compactToolStatus = status;
   };
 
-  const callRow = (theme: any, name: string, detail: string, state: any): DisplayRow => ({
+  const callRow = (theme: any, name: string, detail: string, state: any, expanded = false): DisplayRow => ({
+    singleLine: renderMode === "clean" && !expanded,
     prefix: () => {
       const status = (state.compactToolStatus ?? "running") as ToolStatus;
       const color = status === "success" ? "success" : status === "error" ? "error" : "dim";
@@ -2841,12 +2854,12 @@ export default function prettyTui(pi: ExtensionAPI) {
     content: renderMode === "compact" ? theme.fg("muted", detail) :
       theme.fg("text", theme.bold(name)) +
       theme.fg("dim", "(") +
-      theme.fg("muted", detail) +
+      theme.fg(renderMode === "clean" && expanded ? "text" : "muted", detail) +
       theme.fg("dim", ")"),
   });
 
-  const call = (theme: any, name: string, detail: string, state: any) =>
-    block([callRow(theme, name, detail, state)]);
+  const call = (theme: any, name: string, detail: string, state: any, expanded = false) =>
+    block([callRow(theme, name, detail, state, expanded)]);
 
   const writeCall = (theme: any, name: string, path: string, content: string, expanded: boolean, state: any) => {
     const lines = content.replace(/\t/g, "    ").split("\n");
@@ -2856,7 +2869,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     const shown = lines.slice(0, expanded ? total : 10);
     const remaining = total - shown.length;
     const rows: DisplayRow[] = [
-      callRow(theme, name, `${path} · ${total} ${total === 1 ? "line" : "lines"}`, state),
+      callRow(theme, name, `${path} · ${total} ${total === 1 ? "line" : "lines"}`, state, expanded),
     ];
 
     for (let index = 0; index < shown.length; index++) {
@@ -2879,28 +2892,6 @@ export default function prettyTui(pi: ExtensionAPI) {
     return block(rows);
   };
 
-  // Pi diffs encode the marker before the padded line number. Move it into
-  // its own column and keep the whole gutter out of content word wrapping.
-  const editDiffLayout = (theme: any, diff: string): ((line: string) => DisplayRow) => {
-    const parse = (line: string) => /^([ +\-]) *(\d+) (.*)$/.exec(line);
-    const numberWidth = diff.split("\n").reduce((width, line) => Math.max(width, parse(line)?.[2].length ?? 0), 1);
-    const gutterWidth = numberWidth + 3;
-    return (line) => {
-      const match = parse(line);
-      const marker = match?.[1] ?? (
-        line.startsWith("+") && !line.startsWith("+++") ? "+" :
-        line.startsWith("-") && !line.startsWith("---") ? "-" : " "
-      );
-      const color = marker === "+" ? "toolDiffAdded" : marker === "-" ? "toolDiffRemoved" : "toolDiffContext";
-      const gutter = match ? `${match[2].padStart(numberWidth)} ${marker} ` : " ".repeat(gutterWidth);
-      return {
-        prefix: theme.fg(color, gutter),
-        continuation: " ".repeat(gutterWidth),
-        content: theme.fg(color, match ? match[3] : /^\s+\.\.\.$/.test(line) ? "..." : line),
-      };
-    };
-  };
-
   const result = (
     theme: any,
     summary: string,
@@ -2929,6 +2920,7 @@ export default function prettyTui(pi: ExtensionAPI) {
           prefix: theme.fg("dim", isLast ? "   └ " : "   │ ") + (layout?.prefix ?? ""),
           continuation: (isLast ? "     " : theme.fg("dim", "   │ ")) + (layout?.continuation ?? ""),
           content: layout?.content ?? outputStyle(shown[index] || " "),
+          background: layout?.background,
         });
       }
       if (omitted > 0) {
@@ -4536,7 +4528,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     renderCall(args: any, theme: any, context: any) {
       if (hideCleanTool(context.toolCallId, context.expanded, context.executionStarted)) return cleanToolCall(theme, readLabel, context.toolCallId);
       const range = readLineRange(args.offset, args.limit);
-      return call(theme, readLabel, `${args.path}${range}`, context.state);
+      return call(theme, readLabel, `${args.path}${range}`, context.state, context.expanded);
     },
     renderResult(toolResult: any, options: any, theme: any, context: any) {
       const output = textContent(toolResult);
@@ -4572,9 +4564,9 @@ export default function prettyTui(pi: ExtensionAPI) {
         const detail = omitted > 0
           ? `${firstLine} … (${omitted} more ${omitted === 1 ? "line" : "lines"})`
           : firstLine;
-        return call(theme, bashLabel, detail, context.state);
+        return call(theme, bashLabel, detail, context.state, context.expanded);
       }
-      return call(theme, bashLabel, command, context.state);
+      return call(theme, bashLabel, command, context.state, context.expanded);
     },
     renderResult(toolResult: any, options: any, theme: any, context: any) {
       const output = textContent(toolResult);
@@ -4616,7 +4608,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     renderCall(args: any, theme: any, context: any) {
       if (hideCleanTool(context.toolCallId, context.expanded, context.executionStarted)) return cleanToolCall(theme, editLabel, context.toolCallId);
       const count = Array.isArray(args.edits) ? ` · ${args.edits.length} changes` : "";
-      return call(theme, editLabel, `${args.path}${count}`, context.state);
+      return call(theme, editLabel, `${args.path}${count}`, context.state, context.expanded);
     },
     renderResult(toolResult: any, options: any, theme: any, context: any) {
       const output = textContent(toolResult);
@@ -4646,7 +4638,7 @@ export default function prettyTui(pi: ExtensionAPI) {
           if (line.startsWith("-") && !line.startsWith("---")) return theme.fg("toolDiffRemoved", line);
           return theme.fg("toolDiffContext", line);
         },
-        !failed && diff ? editDiffLayout(theme, diff) : undefined,
+        !failed && diff ? editDiffLayout(theme, diff, context.args?.path) : undefined,
       );
     },
   } as any);
@@ -4664,7 +4656,7 @@ export default function prettyTui(pi: ExtensionAPI) {
         const lines = content.replace(/\t/g, "    ").split("\n");
         while (lines.length > 0 && lines[lines.length - 1] === "") lines.pop();
         const total = lines.length;
-        return call(theme, writeLabel, `${path} · ${total} ${total === 1 ? "line" : "lines"}`, context.state);
+        return call(theme, writeLabel, `${path} · ${total} ${total === 1 ? "line" : "lines"}`, context.state, context.expanded);
       }
       return writeCall(theme, writeLabel, path, content, context.expanded, context.state);
     },
@@ -4692,7 +4684,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       if (hideCleanTool(context.toolCallId, context.expanded, context.executionStarted)) return cleanToolCall(theme, grepLabel, context.toolCallId);
       const where = args.path ? ` · ${args.path}` : "";
       const glob = args.glob ? ` · ${args.glob}` : "";
-      return call(theme, grepLabel, `${args.pattern}${where}${glob}`, context.state);
+      return call(theme, grepLabel, `${args.pattern}${where}${glob}`, context.state, context.expanded);
     },
     renderResult(toolResult: any, options: any, theme: any, context: any) {
       const output = textContent(toolResult);
@@ -4711,7 +4703,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     renderShell: "self",
     renderCall(args: any, theme: any, context: any) {
       if (hideCleanTool(context.toolCallId, context.expanded, context.executionStarted)) return cleanToolCall(theme, findLabel, context.toolCallId);
-      return call(theme, findLabel, `${args.pattern}${args.path ? ` · ${args.path}` : ""}`, context.state);
+      return call(theme, findLabel, `${args.pattern}${args.path ? ` · ${args.path}` : ""}`, context.state, context.expanded);
     },
     renderResult(toolResult: any, options: any, theme: any, context: any) {
       const output = textContent(toolResult);
@@ -4730,7 +4722,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     renderShell: "self",
     renderCall(args: any, theme: any, context: any) {
       if (hideCleanTool(context.toolCallId, context.expanded, context.executionStarted)) return cleanToolCall(theme, lsLabel, context.toolCallId);
-      return call(theme, lsLabel, args.path ?? ".", context.state);
+      return call(theme, lsLabel, args.path ?? ".", context.state, context.expanded);
     },
     renderResult(toolResult: any, options: any, theme: any, context: any) {
       const output = textContent(toolResult);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A beautiful, polished TUI for the Pi coding agent",
   "license": "MIT",
   "author": "Kainan Yang <ykn0309@whu.edu.cn>",