pi-one-ui 0.1.1

package/extensions/transcript/renderer/tool/diff/diff-component.ts

@@ -0,0 +1,112 @@
+import {
+  DEFAULT_TOOL_DISPLAY_CONFIG,
+  type DiffIndicatorMode,
+  type ToolDisplayConfig,
+} from "../../../../app/config/renderer.ts";
+import type { DiffPresentationMode } from "./diff-presentation.ts";
+import { RICH_DIFF_COMPONENT } from "../../../../tools/patch-keys.ts";
+export { RICH_DIFF_COMPONENT };
+
+/** Snapshot or live getter — panel changes must apply on the next paint. */
+export type DisplayConfigInput = ToolDisplayConfig | (() => ToolDisplayConfig);
+
+export interface DiffRenderOptions {
+  expanded: boolean;
+  filePath?: string;
+  previousContent?: string;
+  fileExistedBeforeWrite?: boolean;
+  headerLabel?: string;
+  /** Live hover state for the collapsed hint row (muted → text on hover). */
+  isHovered?: () => boolean;
+  invalidate?: () => void;
+}
+
+export function isRichDiffComponent(value: unknown): boolean {
+  return Boolean(
+    value &&
+      typeof value === "object" &&
+      (value as Record<symbol, unknown>)[RICH_DIFF_COMPONENT] === true,
+  );
+}
+
+export function resolveLiveDisplayConfig(
+  input: DisplayConfigInput,
+): ToolDisplayConfig {
+  return typeof input === "function" ? input() : input;
+}
+
+/** Cache key fragment so indicator/wrap/limits invalidate without host recreate. */
+export function displayConfigCacheKey(config: ToolDisplayConfig): string {
+  return [
+    config.diffViewMode,
+    config.diffIndicatorMode,
+    String(config.diffSplitMinWidth),
+    String(config.editDiffCollapsedLines),
+    String(config.writeDiffCollapsedLines),
+    config.diffWordWrap ? "1" : "0",
+    String(config.expandedPreviewMaxLines),
+  ].join(":");
+}
+
+export function resolveDiffIndicatorMode(
+  config: Partial<Pick<ToolDisplayConfig, "diffIndicatorMode">>,
+): DiffIndicatorMode {
+  return (
+    config.diffIndicatorMode ?? DEFAULT_TOOL_DISPLAY_CONFIG.diffIndicatorMode
+  );
+}
+
+export function createDiffRenderCache() {
+  let cachedWidth: number | undefined;
+  let cachedExpanded: boolean | undefined;
+  let cachedMode: DiffPresentationMode | undefined;
+  let cachedConfigKey: string | undefined;
+  let cachedHovered: boolean | undefined;
+  let cachedLines: string[] | undefined;
+
+  return {
+    get(
+      width: number,
+      expanded: boolean,
+      mode: DiffPresentationMode,
+      configKey: string,
+      hovered: boolean,
+    ): string[] | undefined {
+      if (
+        cachedLines &&
+        cachedWidth === width &&
+        cachedExpanded === expanded &&
+        cachedMode === mode &&
+        cachedConfigKey === configKey &&
+        cachedHovered === hovered
+      ) {
+        return cachedLines;
+      }
+      return undefined;
+    },
+    set(
+      width: number,
+      expanded: boolean,
+      mode: DiffPresentationMode,
+      configKey: string,
+      hovered: boolean,
+      lines: string[],
+    ): string[] {
+      cachedWidth = width;
+      cachedExpanded = expanded;
+      cachedMode = mode;
+      cachedConfigKey = configKey;
+      cachedHovered = hovered;
+      cachedLines = lines;
+      return lines;
+    },
+    invalidate(): void {
+      cachedWidth = undefined;
+      cachedExpanded = undefined;
+      cachedMode = undefined;
+      cachedConfigKey = undefined;
+      cachedHovered = undefined;
+      cachedLines = undefined;
+    },
+  };
+}

package/extensions/transcript/renderer/tool/diff/diff-edit-render.ts

@@ -0,0 +1,255 @@
+import { Text, type Component } from "@earendil-works/pi-tui";
+import type { EditToolDetails } from "@earendil-works/pi-coding-agent";
+import { sanitizeToolResultText } from "../../../../tools/tool-result-sanitize.ts";
+import {
+  getLineNumberWidth,
+  parseDiff,
+  type ParsedDiff,
+} from "./diff-parse.ts";
+import { buildInlineHighlightMap, buildSplitRows } from "./diff-inline.ts";
+import { resolveDiffPalette, type DiffTheme } from "./diff-palette.ts";
+import {
+  createCodeLineHighlighter,
+  resolveLanguageFromPath,
+} from "./diff-highlight.ts";
+import {
+  canRenderSplitLayout,
+  renderCompact,
+  renderSplit,
+  renderUnified,
+  type DiffRenderContext,
+} from "./diff-layout.ts";
+import {
+  renderDiffFrameLine,
+  renderHeaderRows,
+  renderSingleDiffRow,
+} from "./diff-header.ts";
+import {
+  applyLineLimit,
+  clampDiffLinesToWidth,
+  resolveDiffDisplayLimit,
+  resolveDiffProcessBudget,
+  takeEntriesForLineBudget,
+  takeSplitRowsForBudget,
+} from "./diff-limits.ts";
+import {
+  RICH_DIFF_COMPONENT,
+  createDiffRenderCache,
+  displayConfigCacheKey,
+  resolveDiffIndicatorMode,
+  resolveLiveDisplayConfig,
+  type DiffRenderOptions,
+  type DisplayConfigInput,
+} from "./diff-component.ts";
+import {
+  buildDiffSummaryText,
+  normalizeDiffRenderWidth,
+  resolveDiffPresentationMode,
+} from "./diff-presentation.ts";
+
+function safeGetDiff(details: unknown): string {
+  if (!details || typeof details !== "object") {
+    return "";
+  }
+  const typed = details as Partial<EditToolDetails>;
+  return typeof typed.diff === "string" ? typed.diff : "";
+}
+
+/**
+ * edit 变更行统计（compact 单行 `(+A -D)` 用）：复用现有 parser，diff 文件头不计入。
+ * 无 diff 或解析失败时返回 undefined，不把未知状态误报为零变更。
+ */
+export function countEditDiffStats(
+  details: unknown,
+): { added: number; removed: number } | undefined {
+  const diffText = sanitizeToolResultText(safeGetDiff(details));
+  if (!diffText.trim()) return undefined;
+  try {
+    const parsed = parseDiff(diffText);
+    return { added: parsed.stats.added, removed: parsed.stats.removed };
+  } catch {
+    return undefined;
+  }
+}
+
+export function renderEditDiffResult(
+  details: unknown,
+  options: DiffRenderOptions,
+  config: DisplayConfigInput,
+  theme: DiffTheme,
+  fallbackText: string,
+): Component {
+  const diffText = sanitizeToolResultText(safeGetDiff(details));
+  const safeFallbackText = sanitizeToolResultText(fallbackText);
+  if (!diffText.trim()) {
+    if (!safeFallbackText.trim()) {
+      return new Text(
+        theme.fg("muted", "↳ edit completed (no diff payload)"),
+        0,
+        0,
+      );
+    }
+    return new Text(theme.fg("toolOutput", safeFallbackText), 0, 0);
+  }
+
+  let parsed: ParsedDiff;
+  try {
+    parsed = parseDiff(diffText);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return new Text(
+      theme.fg("warning", `↳ unable to render diff: ${message}`),
+      0,
+      0,
+    );
+  }
+
+  if (parsed.entries.length === 0) {
+    return new Text(theme.fg("muted", "↳ no diff data"), 0, 0);
+  }
+
+  const splitRows = buildSplitRows(parsed.entries);
+  const showHashlineAnchors =
+    options.expanded === true &&
+    parsed.entries.some(
+      (entry) => entry.kind === "line" && !!entry.hashlineAnchorContent,
+    );
+  const lineNumberWidth = getLineNumberWidth(
+    parsed.entries,
+    showHashlineAnchors,
+  );
+  const palette = resolveDiffPalette(theme);
+  // Rich diffs use ccstyle's self shell. Keep the panel transparent so the
+  // separator cannot leak toolSuccessBg across the entire new column.
+  const containerBgAnsi = undefined;
+  const language = resolveLanguageFromPath(options.filePath);
+  const cache = createDiffRenderCache();
+  const highlightLine = createCodeLineHighlighter(
+    language,
+    theme,
+    parsed.entries,
+    () => {
+      cache.invalidate();
+      options.invalidate?.();
+    },
+  );
+
+  return {
+    [RICH_DIFF_COMPONENT]: true,
+    render(width: number): string[] {
+      // Live config: panel can change indicator/wrap/limits after this component is created.
+      const live = resolveLiveDisplayConfig(config);
+      const wordWrap = live.diffWordWrap;
+      const indicatorMode = resolveDiffIndicatorMode(live);
+      const configKey = displayConfigCacheKey(live);
+      const safeWidth = normalizeDiffRenderWidth(width);
+      const mode = resolveDiffPresentationMode(
+        live,
+        safeWidth,
+        canRenderSplitLayout(safeWidth),
+      );
+      const hovered = options.isHovered?.() ?? false;
+      const cached = cache.get(
+        safeWidth,
+        options.expanded,
+        mode,
+        configKey,
+        hovered,
+      );
+      if (cached) {
+        return cached;
+      }
+
+      if (mode === "summary") {
+        return cache.set(
+          safeWidth,
+          options.expanded,
+          mode,
+          configKey,
+          hovered,
+          clampDiffLinesToWidth(
+            renderSingleDiffRow(
+              buildDiffSummaryText(parsed.stats, safeWidth),
+              "toolOutput",
+              safeWidth,
+              theme,
+            ),
+            safeWidth,
+          ),
+        );
+      }
+
+      const headerRows = renderHeaderRows(parsed.stats, mode, safeWidth, theme);
+      const displayLimit = resolveDiffDisplayLimit(
+        options.expanded,
+        live.editDiffCollapsedLines,
+        live.expandedPreviewMaxLines,
+      );
+      const processBudget = resolveDiffProcessBudget(displayLimit, wordWrap);
+      // Only highlight/render a prefix that can fill the display limit; full-diff
+      // LCS + syntax highlight on thousands of hidden lines is pure waste when collapsed.
+      const entryBudget = takeEntriesForLineBudget(
+        parsed.entries,
+        processBudget,
+      );
+      const splitBudget = takeSplitRowsForBudget(splitRows, processBudget);
+      const inlineHighlights = buildInlineHighlightMap(splitBudget.rows);
+      const renderCtx: DiffRenderContext = {
+        width: safeWidth,
+        theme,
+        inlineHighlights,
+        palette,
+        highlightLine,
+        containerBgAnsi,
+        wordWrap,
+        indicatorMode,
+        showHashlineAnchors,
+      };
+      const bodyRows =
+        mode === "split"
+          ? renderSplit(splitBudget.rows, renderCtx, lineNumberWidth)
+          : mode === "compact"
+            ? renderCompact(entryBudget.entries, renderCtx)
+            : renderUnified(entryBudget.entries, renderCtx, lineNumberWidth);
+      const unprocessedLogicalRows =
+        mode === "split"
+          ? Math.max(0, splitBudget.totalRows - splitBudget.processedRows)
+          : Math.max(
+              0,
+              entryBudget.totalLineEntries - entryBudget.processedLineEntries,
+            );
+      const bodyWithLimit = applyLineLimit(
+        bodyRows,
+        safeWidth,
+        options.expanded,
+        live.editDiffCollapsedLines,
+        live.expandedPreviewMaxLines,
+        parsed.stats.hunks,
+        theme,
+        unprocessedLogicalRows,
+        hovered,
+      );
+      const frame = renderDiffFrameLine(safeWidth, theme);
+      const renderedLines =
+        mode === "unified"
+          ? [
+              ...headerRows.map((row) => row.text),
+              frame,
+              ...bodyWithLimit,
+              frame,
+            ]
+          : [...headerRows.map((row) => row.text), ...bodyWithLimit];
+
+      const clampedLines = clampDiffLinesToWidth(renderedLines, safeWidth);
+      return cache.set(
+        safeWidth,
+        options.expanded,
+        mode,
+        configKey,
+        hovered,
+        clampedLines,
+      );
+    },
+    invalidate: cache.invalidate,
+  } as Component;
+}

package/extensions/transcript/renderer/tool/diff/diff-header.ts

@@ -0,0 +1,184 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { sanitizeAnsiForThemedOutput } from "./ansi-utils.ts";
+import { normalizeCodeWhitespace, wrapToWidth } from "./diff-text.ts";
+import {
+  emphasis,
+  stabilizeBackgroundResets,
+  type DiffTheme,
+} from "./diff-palette.ts";
+import { clampDiffLineToWidth } from "./diff-limits.ts";
+import type { DiffMetaEntry, DiffStats } from "./diff-parse.ts";
+import type { DiffPresentationMode } from "./diff-presentation.ts";
+import type { RenderedRow } from "./diff-layout.ts";
+
+export function formatMetaEntryRows(
+  entry: DiffMetaEntry,
+  width: number,
+  theme: DiffTheme,
+  wordWrap: boolean,
+): RenderedRow[] {
+  const normalized = sanitizeAnsiForThemedOutput(
+    normalizeCodeWhitespace(entry.raw),
+  );
+  const lines = wordWrap
+    ? wrapToWidth(normalized, width, true)
+    : [truncateToWidth(normalized, width)];
+
+  const mapColor = (line: string): string => {
+    if (entry.kind === "hunk") {
+      return stabilizeBackgroundResets(theme.fg("accent", line));
+    }
+    if (entry.kind === "file") {
+      return stabilizeBackgroundResets(theme.fg("muted", line));
+    }
+    return stabilizeBackgroundResets(theme.fg("toolDiffContext", line));
+  };
+
+  return lines.map((line) => ({
+    text: mapColor(line),
+    hunkIndex: entry.kind === "file" ? null : entry.hunkIndex || null,
+  }));
+}
+
+function renderDiffStatBar(
+  stats: DiffStats,
+  width: number,
+  theme: DiffTheme,
+): string | null {
+  const totalChanges = stats.added + stats.removed;
+  if (totalChanges === 0 || width < 20) {
+    return null;
+  }
+
+  const barSlots = Math.max(8, Math.min(24, Math.floor(width / 12)));
+  let addedSlots = Math.max(
+    0,
+    Math.min(barSlots, Math.round((stats.added / totalChanges) * barSlots)),
+  );
+  if (stats.added > 0 && addedSlots === 0) {
+    addedSlots = 1;
+  }
+  if (stats.removed > 0 && addedSlots >= barSlots) {
+    addedSlots = barSlots - 1;
+  }
+  const removedSlots = Math.max(0, barSlots - addedSlots);
+
+  const addedBar =
+    addedSlots > 0 ? theme.fg("toolDiffAdded", "━".repeat(addedSlots)) : "";
+  const removedBar =
+    removedSlots > 0
+      ? theme.fg("toolDiffRemoved", "━".repeat(removedSlots))
+      : "";
+  return stabilizeBackgroundResets(
+    `${theme.fg("dim", "[")}${addedBar}${removedBar}${theme.fg("dim", "]")}`,
+  );
+}
+
+function buildDiffSummaryBasePieces(
+  stats: DiffStats,
+  theme: DiffTheme,
+): string[] {
+  return [
+    theme.fg("toolOutput", `↳ ${emphasis(theme, "diff")}`),
+    theme.fg("toolDiffAdded", `+${stats.added}`),
+    theme.fg("toolDiffRemoved", `-${stats.removed}`),
+  ];
+}
+
+export function renderHeaderRows(
+  stats: DiffStats,
+  mode: Exclude<DiffPresentationMode, "summary">,
+  width: number,
+  theme: DiffTheme,
+): RenderedRow[] {
+  if (mode === "compact") {
+    const summary = buildDiffSummaryBasePieces(stats, theme).join(" ");
+    return [
+      {
+        text: stabilizeBackgroundResets(truncateToWidth(summary, width)),
+        hunkIndex: null,
+      },
+    ];
+  }
+
+  const summaryPieces = [
+    ...buildDiffSummaryBasePieces(stats, theme),
+    theme.fg("muted", mode),
+  ];
+
+  const summary = summaryPieces.join(
+    mode === "split" ? " " : theme.fg("muted", " • "),
+  );
+  const meter = renderDiffStatBar(stats, width, theme);
+  if (!meter) {
+    return [
+      {
+        text: stabilizeBackgroundResets(truncateToWidth(summary, width)),
+        hunkIndex: null,
+      },
+    ];
+  }
+
+  const meterSeparator = " ";
+  const meterWidth = visibleWidth(meterSeparator) + visibleWidth(meter);
+  if (meterWidth >= width) {
+    return [
+      {
+        text: stabilizeBackgroundResets(truncateToWidth(summary, width)),
+        hunkIndex: null,
+      },
+    ];
+  }
+
+  const summaryWidth = Math.max(0, width - meterWidth);
+  const fittedSummary = truncateToWidth(summary, summaryWidth);
+  return [
+    {
+      text: stabilizeBackgroundResets(
+        `${fittedSummary}${meterSeparator}${meter}`,
+      ),
+      hunkIndex: null,
+    },
+  ];
+}
+
+export function renderDiffFrameLine(width: number, theme: DiffTheme): string {
+  const frameWidth = Math.max(0, width);
+  if (frameWidth === 0) {
+    return "";
+  }
+  return stabilizeBackgroundResets(theme.fg("dim", "─".repeat(frameWidth)));
+}
+
+export function renderSingleDiffRow(
+  text: string,
+  color: string,
+  width: number,
+  theme: DiffTheme,
+): string[] {
+  if (width <= 0) {
+    return [""];
+  }
+  return [
+    clampDiffLineToWidth(
+      stabilizeBackgroundResets(theme.fg(color, text)),
+      width,
+    ),
+  ];
+}
+
+export function renderWriteHeader(
+  wasOverwrite: boolean,
+  width: number,
+  theme: DiffTheme,
+  headerLabel?: string,
+): string {
+  const actionLabel =
+    headerLabel?.trim() || (wasOverwrite ? "overwritten" : "created");
+  return stabilizeBackgroundResets(
+    truncateToWidth(
+      theme.fg("toolOutput", `↳ ${emphasis(theme, actionLabel)}`),
+      width,
+    ),
+  );
+}

package/extensions/transcript/renderer/tool/diff/diff-highlight.ts

@@ -0,0 +1,131 @@
+import {
+  getLanguageFromPath,
+  highlightCode,
+} from "@earendil-works/pi-coding-agent";
+import { sanitizeAnsiForThemedOutput } from "./ansi-utils.ts";
+import { sanitizeToolResultText } from "../../../../tools/tool-result-sanitize.ts";
+import { MAX_HL_CHARS, shikiHighlightCache } from "./shiki-highlight.ts";
+import { normalizeCodeWhitespace } from "./diff-text.ts";
+import {
+  applyInlineSpanHighlight,
+  getLineBackground,
+  resolveShikiTheme,
+  type DiffPalette,
+  type DiffTheme,
+} from "./diff-palette.ts";
+import type { DiffLineEntry, ParsedDiffEntry } from "./diff-parse.ts";
+import type { DiffSpan } from "./diff-inline.ts";
+
+export type CodeLineHighlighter = (
+  line: string,
+  entry: DiffLineEntry,
+) => string;
+
+function cleanCodeLine(line: string): string {
+  return sanitizeToolResultText(line).replace(/\n/g, "");
+}
+
+export function shouldHighlightCodeBlock(code: string): boolean {
+  return code.length <= MAX_HL_CHARS;
+}
+
+export function resolveLanguageFromPath(
+  rawPath: string | undefined,
+): string | undefined {
+  if (!rawPath || !rawPath.trim()) {
+    return undefined;
+  }
+  const normalizedPath = rawPath.replace(/^@/, "").trim();
+  if (!normalizedPath) {
+    return undefined;
+  }
+  try {
+    return getLanguageFromPath(normalizedPath);
+  } catch {
+    return undefined;
+  }
+}
+
+export function createCodeLineHighlighter(
+  language: string | undefined,
+  theme: DiffTheme,
+  entries: readonly ParsedDiffEntry[],
+  invalidate?: () => void,
+): CodeLineHighlighter {
+  const codeEntries = entries.filter(
+    (entry): entry is DiffLineEntry => entry.kind === "line",
+  );
+  const cleanLines = codeEntries.map((entry) =>
+    cleanCodeLine(normalizeCodeWhitespace(entry.content)),
+  );
+  const code = cleanLines.join("\n");
+  const shouldHighlight = !!language && shouldHighlightCodeBlock(code);
+  const fallbackLines = shouldHighlight
+    ? (() => {
+        try {
+          return highlightCode(code, language).map(sanitizeAnsiForThemedOutput);
+        } catch {
+          return cleanLines.map(sanitizeAnsiForThemedOutput);
+        }
+      })()
+    : cleanLines.map(sanitizeAnsiForThemedOutput);
+  const fallbackByEntry = new WeakMap(
+    codeEntries.map((entry, index) => [
+      entry,
+      fallbackLines[index] ?? cleanLines[index] ?? "",
+    ]),
+  );
+  if (!shouldHighlight)
+    return (_line, entry) => fallbackByEntry.get(entry) ?? "";
+
+  const shikiTheme = resolveShikiTheme(theme);
+  let highlightedByEntry: WeakMap<DiffLineEntry, string> | undefined;
+  const resolveHighlighted = () => {
+    if (highlightedByEntry) return;
+    const highlighted = shikiHighlightCache.get(
+      code,
+      language,
+      shikiTheme,
+      fallbackLines,
+      invalidate,
+    );
+    if (highlighted) {
+      highlightedByEntry = new WeakMap(
+        codeEntries.map((entry, index) => [
+          entry,
+          sanitizeAnsiForThemedOutput(
+            highlighted[index] ?? fallbackByEntry.get(entry) ?? "",
+          ),
+        ]),
+      );
+    }
+  };
+  resolveHighlighted();
+  return (_line, entry) => {
+    resolveHighlighted();
+    return highlightedByEntry?.get(entry) ?? fallbackByEntry.get(entry) ?? "";
+  };
+}
+
+export function highlightDiffLine(
+  codeText: string,
+  entry: DiffLineEntry,
+  inlineHighlights: WeakMap<DiffLineEntry, DiffSpan[]>,
+  palette: DiffPalette,
+  highlightLine: CodeLineHighlighter,
+  containerBgAnsi: string | undefined,
+): { highlighted: string; rowBg: string | undefined } {
+  const syntaxHighlighted = highlightLine(codeText, entry);
+  const rowBg = getLineBackground(entry.lineKind, palette, false);
+  const emphasisBg = getLineBackground(entry.lineKind, palette, true);
+  const inlineSpans = inlineHighlights.get(entry) ?? [];
+  const highlighted = applyInlineSpanHighlight(
+    codeText,
+    syntaxHighlighted,
+    inlineSpans,
+    emphasisBg,
+    rowBg,
+    containerBgAnsi,
+  );
+  return { highlighted, rowBg };
+}