@esso0428/pi-subagents 0.15.16 → 0.16.0

package/src/ui/ccstyle/tool-result.ts

@@ -1,11 +1,13 @@
-import { Text, truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component } from "@earendil-works/pi-tui";
+import { getLanguageFromPath, highlightCode } from "@earendil-works/pi-coding-agent";
+import { type Component, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import {
+  type DisplayConfigInput,
   renderEditDiffResult,
   renderWriteDiffResult,
-  type DisplayConfigInput,
 } from "./diff/diff-renderer.js";
+import { sanitizeAnsiForThemedOutput, sanitizeToolResultText, showMoreHintText } from "./diff/render-utils.js";
+import { MAX_HL_CHARS, shikiHighlightCache } from "./diff/shiki-highlight.js";
 import { DEFAULT_TOOL_DISPLAY_CONFIG, type PersistedDiff, type ViewerDiffConfig } from "./diff/types.js";
-import { sanitizeToolResultText, showMoreHintText } from "./diff/render-utils.js";
 
 export function toolViewportWidth(width: number): number {
   return Math.max(1, Math.floor(Number.isFinite(width) ? width : 1));
@@ -96,6 +98,97 @@ export function formatToolInputArgs(args: unknown, maxChars = 8_000): string {
   return rendered.length > maxChars ? `${rendered.slice(0, maxChars)}…` : rendered;
 }
 
+type FencedCodeRegion = {
+  bodyStart: number;
+  bodyEnd: number;
+  language?: string;
+};
+
+type OutputHighlightPlan = {
+  lines: string[];
+  code: string;
+  codeLineIndexes: number[];
+};
+
+function parseFenceOpening(line: string): { marker: string; language?: string } | undefined {
+  const match = line.match(/^\s*(`{3,}|~{3,})(?:\s*([A-Za-z][\w+.-]*))?(?:\s+.*)?\s*$/);
+  if (!match) return undefined;
+  return { marker: match[1]!, language: match[2] };
+}
+
+function isFenceClosing(line: string, marker: string): boolean {
+  const trimmed = line.trim();
+  return trimmed.length >= marker.length &&
+    trimmed[0] === marker[0] &&
+    [...trimmed].every((character) => character === marker[0]);
+}
+
+function findFencedCodeRegion(lines: readonly string[]): FencedCodeRegion | undefined {
+  for (let openingIndex = 0; openingIndex < lines.length; openingIndex++) {
+    const opening = parseFenceOpening(lines[openingIndex]!);
+    if (!opening) continue;
+    let bodyEnd = lines.length;
+    for (let index = openingIndex + 1; index < lines.length; index++) {
+      if (isFenceClosing(lines[index]!, opening.marker)) {
+        bodyEnd = index;
+        break;
+      }
+    }
+    return {
+      bodyStart: openingIndex + 1,
+      bodyEnd,
+      ...(opening.language ? { language: opening.language } : {}),
+    };
+  }
+  return undefined;
+}
+
+function pathFromToolArgs(args: unknown): string | undefined {
+  if (!args || typeof args !== "object" || Array.isArray(args)) return undefined;
+  const record = args as Record<string, unknown>;
+  const path = record.file_path ?? record.path;
+  return typeof path === "string" && path.trim() ? path : undefined;
+}
+
+/** Resolve only explicit tool/path or fenced metadata; no command/log heuristics. */
+export function resolveToolOutputLanguage(args: unknown, output: string): string | undefined {
+  const path = pathFromToolArgs(args)?.replace(/^@/, "").trim();
+  if (path) {
+    try {
+      const language = getLanguageFromPath(path);
+      if (language) return language;
+    } catch {
+      // Fall through to an explicit fence when the path mapping is unavailable.
+    }
+  }
+  const lines = output.replace(/\t/g, "   ").replace(/\n+$/, "").split("\n");
+  return findFencedCodeRegion(lines)?.language;
+}
+
+function outputHighlightPlan(output: string, language: string | undefined): OutputHighlightPlan | undefined {
+  if (!language || !output.trim() || output.length > MAX_HL_CHARS) return undefined;
+  const lines = output.replace(/\t/g, "   ").replace(/\n+$/, "").split("\n");
+  // A path language follows Pi's read renderer and applies to the complete
+  // output. A fence-only language is also highlighted as a normal code body;
+  // keeping one line-to-line mapping preserves fences and wrapping safely.
+  const codeLineIndexes = lines.map((_, index) => index);
+  const codeLines = codeLineIndexes.map((index) => sanitizeToolResultText(lines[index] ?? "").replace(/\n/g, ""));
+  const code = codeLines.join("\n");
+  if (!code || code.length > MAX_HL_CHARS) return undefined;
+  return { lines, code, codeLineIndexes };
+}
+
+function syncHighlight(code: string, language: string, fallback: readonly string[]): string[] {
+  try {
+    const highlighted = highlightCode(code, language).map(sanitizeAnsiForThemedOutput);
+    return highlighted.length === fallback.length
+      ? highlighted
+      : fallback.map((line, index) => highlighted[index] ?? line);
+  } catch {
+    return fallback.map(sanitizeAnsiForThemedOutput);
+  }
+}
+
 function hasExpandableDetail(text: string, args: unknown): boolean {
   return countLines(text) > 1 || formatToolInputArgs(args).trim().length > 0;
 }
@@ -109,6 +202,19 @@ export class ExpandedToolIoView implements Component {
   private lineSections: Array<ToolIoSection | null> = [];
   private hoveredSection: ToolIoSection | null = null;
   private showMoreRows: Partial<Record<ToolIoSection, number>> = {};
+  private readonly outputLanguage?: string;
+  private readonly invalidateCard?: () => void;
+  private outputHighlightKey: string | undefined;
+  private outputHighlightState: {
+    plan: OutputHighlightPlan;
+    fallback: string[];
+    fallbackReady: boolean;
+    shiki?: string[];
+  } | undefined;
+  private readonly onHighlightReady = (): void => {
+    this.invalidate();
+    this.invalidateCard?.();
+  };
 
   constructor(
     private input: string,
@@ -117,11 +223,56 @@ export class ExpandedToolIoView implements Component {
     private readonly maxOutputLines = DEFAULT_TOOL_DISPLAY_CONFIG.expandedPreviewMaxLines,
     private readonly maxInputLines = DEFAULT_TOOL_DISPLAY_CONFIG.expandedPreviewMaxLines,
     private readonly theme?: any,
-  ) {}
+    outputLanguage?: string,
+    invalidateCard?: () => void,
+  ) {
+    this.outputLanguage = outputLanguage;
+    this.invalidateCard = invalidateCard;
+  }
 
   getInputBody(): string { return this.input; }
   getOutputBody(): string { return this.output.trim() ? this.output : "Done"; }
 
+  private highlightedOutputLines(body: string): string[] {
+    const plainLines = body.split("\n");
+    const plan = outputHighlightPlan(body, this.outputLanguage);
+    if (!plan) return plainLines;
+
+    const key = `${this.outputLanguage ?? ""}\0${plan.code}\0${plan.lines.join("\n")}`;
+    if (this.outputHighlightKey !== key || !this.outputHighlightState) {
+      this.outputHighlightKey = key;
+      this.outputHighlightState = {
+        plan,
+        // A plain fallback lets a cache hit avoid running the synchronous
+        // highlighter again. On a miss it is replaced below before paint.
+        fallback: plan.code.split("\n"),
+        fallbackReady: false,
+      };
+    }
+
+    const state = this.outputHighlightState;
+    const shikiLines = state.shiki ?? shikiHighlightCache.get(
+      plan.code,
+      this.outputLanguage,
+      process.env.DIFF_THEME || "github-dark",
+      state.fallback,
+      this.onHighlightReady,
+    );
+    if (shikiLines) {
+      state.shiki = shikiLines.map(sanitizeAnsiForThemedOutput);
+    } else if (!state.fallbackReady) {
+      state.fallback = syncHighlight(plan.code, this.outputLanguage!, state.fallback);
+      state.fallbackReady = true;
+    }
+
+    const highlightedCode = state.shiki ?? state.fallback;
+    const lines = plan.lines.slice();
+    for (const [codeIndex, lineIndex] of plan.codeLineIndexes.entries()) {
+      lines[lineIndex] = highlightedCode[codeIndex] ?? lines[lineIndex] ?? "";
+    }
+    return lines;
+  }
+
   setHoveredSection(section: ToolIoSection | null): void {
     if (this.hoveredSection === section) return;
     this.hoveredSection = section;
@@ -160,6 +311,7 @@ export class ExpandedToolIoView implements Component {
         return;
       }
       const sources = raw.split("\n");
+      const highlighted = input ? undefined : this.highlightedOutputLines(raw);
       const wrapped: string[] = [];
       const styleInput = (line: string): string => {
         const match = line.match(/^([A-Za-z_][\w.-]*)(:\s*)(.*)$/);
@@ -167,8 +319,14 @@ export class ExpandedToolIoView implements Component {
           ? color("dim", `${match[1]}${match[2]}`) + color("muted", match[3] ?? "")
           : color("muted", line);
       };
-      for (const source of sources) {
-        const styled = input ? styleInput(source) : color(bodyColor, source);
+      for (const [index, source] of sources.entries()) {
+        const outputLine = highlighted?.[index] ?? source;
+        // Shiki/core ANSI carries the actual token colors. Do not wrap it in
+        // theme.fg(), whose closing reset would erase nested token styles.
+        const hasAnsi = /\x1b\[[0-?]*[ -/]*[@-~]/.test(outputLine);
+        const styled = input
+          ? styleInput(source)
+          : hasAnsi ? sanitizeAnsiForThemedOutput(outputLine) : color(bodyColor, outputLine);
         const lines = wrapTextWithAnsi(styled, contentWidth);
         wrapped.push(...(lines.length ? lines : [styled]));
       }
@@ -284,7 +442,17 @@ function renderFallbackResult(result: any, options: any, theme: any, context: an
     const maxLines = Number.isFinite(context?.diffConfig?.expandedPreviewMaxLines)
       ? Math.max(1, Math.floor(context.diffConfig.expandedPreviewMaxLines))
       : DEFAULT_TOOL_DISPLAY_CONFIG.expandedPreviewMaxLines;
-    return new ExpandedToolIoView(input, text, Boolean(error), maxLines, maxLines, theme);
+    const language = resolveToolOutputLanguage(context?.args, text);
+    return new ExpandedToolIoView(
+      input,
+      text,
+      Boolean(error),
+      maxLines,
+      maxLines,
+      theme,
+      language,
+      context?.invalidate,
+    );
   }
   const count = text ? text.split("\n").length : 0;
   const summary = error ? oneLine(text) || "Failed" : count ? `${count} ${count === 1 ? "line" : "lines"} returned` : "Done";

package/src/ui/conversation-role.ts

@@ -1,6 +1,6 @@
 import type { Component } from "@earendil-works/pi-tui";
-import type { ConversationBlock } from "./conversation-blocks.js";
 import type { Theme } from "./agent-widget.js";
+import type { ConversationBlock } from "./conversation-blocks.js";
 
 export type ConversationRoleTheme = Pick<Theme, "fg">;
 

package/src/ui/conversation-search.ts

@@ -105,10 +105,10 @@ export function highlightConversationLine(
 
   while (i < text.length) {
     if (text[i] === "\x1b") {
-      const escape = text.slice(i).match(ANSI_ESCAPE_RE);
-      if (escape) {
-        result += escape[0];
-        i += escape[0].length;
+      const ansiEscape = text.slice(i).match(ANSI_ESCAPE_RE);
+      if (ansiEscape) {
+        result += ansiEscape[0];
+        i += ansiEscape[0].length;
         continue;
       }
     }

package/src/ui/conversation-timeline.ts

@@ -1,26 +1,26 @@
 import * as CodingAgent from "@earendil-works/pi-coding-agent";
+import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
 import {
+  type Component,
   Markdown,
   Text,
-  type Component,
   type TUI,
   type TuiMouseEvent,
   truncateToWidth,
 } from "@earendil-works/pi-tui";
-import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
 import type { AgentRecord } from "../types.js";
 import type { Theme } from "./agent-widget.js";
+import { showMoreHintText } from "./ccstyle/diff/render-utils.js";
+import {
+  createViewerCcstyleTool,
+  type ViewerToolRenderers,
+} from "./ccstyle/tool-renderer.js";
 import {
   type ConversationBlock,
   type ConversationToolResultSnapshot,
 } from "./conversation-blocks.js";
 import { renderConversationRoleHeader } from "./conversation-role.js";
 import { stripAnsi } from "./conversation-search.js";
-import {
-  createViewerCcstyleTool,
-  type ViewerToolRenderers,
-} from "./ccstyle/tool-renderer.js";
-import { showMoreHintText } from "./ccstyle/diff/render-utils.js";
 
 export interface TimelineRenderLine {
   text: string;

package/src/ui/conversation-viewer.ts

@@ -5,20 +5,20 @@
  * blocks are formatted data, while Markdown/ANSI lines are a bounded cache.
  */
 
-import type { ExtensionAPI, ExtensionContext, AgentSession } from "@earendil-works/pi-coding-agent";
+import type { AgentSession, ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { copyToClipboard } from "@earendil-works/pi-coding-agent";
 import { type Component, Input, Key, matchesKey, type TUI, type TuiMouseEvent, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import type { AgentRecord } from "../types.js";
 import { getLifetimeTotal, getSessionContextPercent } from "../usage.js";
 import type { Theme } from "./agent-widget.js";
 import { type AgentActivity, buildInvocationTags, describeActivity, fgPreservingNestedStyles, formatDuration, formatSessionTokens, getDisplayName, getPromptModeLabel } from "./agent-widget.js";
-import { formatConversationMessages, type ConversationBlock } from "./conversation-blocks.js";
-import { ConversationTimeline, type ConversationTimelineChange, type TimelineRenderLine } from "./conversation-timeline.js";
-import { renderConversationRoleHeader } from "./conversation-role.js";
+import { createViewerCcstyleResult } from "./ccstyle/tool-result.js";
+import { type ConversationBlock, formatConversationMessages } from "./conversation-blocks.js";
 import { editLiveAssistantBlockInNvim, viewConversationBlockInNvim } from "./conversation-nvim.js";
-import { findConversationMatches, highlightConversationLine, nearestConversationMatchAfter, nearestConversationMatchBefore, stripAnsi, type ConversationMatch } from "./conversation-search.js";
+import { renderConversationRoleHeader } from "./conversation-role.js";
+import { type ConversationMatch, findConversationMatches, highlightConversationLine, nearestConversationMatchAfter, nearestConversationMatchBefore, stripAnsi } from "./conversation-search.js";
+import { ConversationTimeline, type ConversationTimelineChange, type TimelineRenderLine } from "./conversation-timeline.js";
 import { createViewerKeys, type ViewerKeybindings, type ViewerKeys } from "./viewer-keys.js";
-import { createViewerCcstyleResult } from "./ccstyle/tool-result.js";
 
 /** Base lines consumed by the overlay: borders, header, separator and footer. */
 const CHROME_LINES_BASE = 6;
@@ -569,7 +569,16 @@ export class ConversationViewer implements Component {
     this.timeline.setShowTools(this.showTools);
     this.timeline.render(width);
     const timelineSnapshot = this.timeline.getSnapshot();
-    const lines: RenderLine[] = timelineSnapshot.lines.map((line) => ({ ...line }));
+    const lines: RenderLine[] = timelineSnapshot.lines.map((line) => {
+      const rawText = typeof line?.text === "string" ? line.text : "";
+      const text = truncateToWidth(rawText, width, "", true);
+      return {
+        text,
+        plain: stripAnsi(text),
+        blockIndex: typeof line?.blockIndex === "number" ? line.blockIndex : -1,
+        ...(line?.railable ? { railable: true } : {}),
+      };
+    });
     this.cachedMessageStarts = [...timelineSnapshot.messageStarts];
     this.cachedMessageBlocks = [...timelineSnapshot.messageBlocks];
     if (this.hasFocusedBlock) {

package/src/ui/deferred-ui-refresh.ts

@@ -0,0 +1,72 @@
+/** Coalesced, deferred render requests for structural UI changes. */
+
+const DEFAULT_DELAY_MS = 50;
+const DEFAULT_MAX_WAIT_MS = 200;
+
+export interface DeferredUiRefresh {
+  /** Schedule one render request after the debounce/max-wait window. */
+  schedule(): void;
+  /** Cancel the current pending render request, if any. */
+  cancel(): void;
+  /** Cancel and permanently disable this scheduler. */
+  dispose(): void;
+}
+
+export function createDeferredUiRefresh(
+  requestRender: () => void,
+  options: {
+    delayMs?: number;
+    maxWaitMs?: number;
+    now?: () => number;
+  } = {},
+): DeferredUiRefresh {
+  const delayMs = Math.max(0, options.delayMs ?? DEFAULT_DELAY_MS);
+  const maxWaitMs = Math.max(0, options.maxWaitMs ?? DEFAULT_MAX_WAIT_MS);
+  const now = options.now ?? Date.now;
+
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let firstScheduledAt: number | undefined;
+  let disposed = false;
+
+  const clearPendingTimer = () => {
+    if (debounceTimer !== undefined) {
+      clearTimeout(debounceTimer);
+      debounceTimer = undefined;
+    }
+  };
+
+  const flush = () => {
+    // Clear all state before invoking user code. A render callback may schedule
+    // another refresh, which should begin a fresh debounce window.
+    clearPendingTimer();
+    firstScheduledAt = undefined;
+    if (disposed) return;
+    requestRender();
+  };
+
+  const schedule = () => {
+    if (disposed) return;
+
+    const current = now();
+    if (firstScheduledAt === undefined) firstScheduledAt = current;
+
+    clearPendingTimer();
+    const maxDeadline = firstScheduledAt + maxWaitMs;
+    const remainingMaxWait = Math.max(0, maxDeadline - current);
+    const wait = Math.min(delayMs, remainingMaxWait);
+    debounceTimer = setTimeout(flush, wait);
+  };
+
+  const cancel = () => {
+    clearPendingTimer();
+    firstScheduledAt = undefined;
+  };
+
+  const dispose = () => {
+    if (disposed) return;
+    cancel();
+    disposed = true;
+  };
+
+  return { schedule, cancel, dispose };
+}