@esso0428/pi-subagents 0.15.5 → 0.15.7

package/src/ui/conversation-search.ts

@@ -0,0 +1,161 @@
+/** Search and highlighting helpers for rendered conversation lines. */
+
+/** A substring match in a rendered line's plain-text representation. */
+export type ConversationMatch = {
+  lineIdx: number;
+  col: number;
+  len: number;
+};
+
+type ConversationLine = { plain: string };
+
+type HighlightMatch = ConversationMatch & { current?: boolean };
+
+function isSmartcaseInsensitive(query: string): boolean {
+  return query === query.toLowerCase();
+}
+
+/**
+ * Remove ANSI CSI/OSC control sequences from a string.
+ *
+ * This deliberately follows the escape-sequence grammar used by the terminal
+ * renderer, rather than stripping only colour codes: hyperlinks and other
+ * styled output must not affect plain-text search columns either.
+ */
+export function stripAnsi(text: string): string {
+  let result = "";
+  let i = 0;
+
+  while (i < text.length) {
+    if (text[i] !== "\x1b") {
+      result += text[i];
+      i++;
+      continue;
+    }
+
+    const match = text.slice(i).match(ANSI_ESCAPE_RE);
+    if (match) {
+      i += match[0].length;
+      continue;
+    }
+
+    // An incomplete escape sequence has no visible representation. This also
+    // prevents a malformed trailing escape from leaking into search text.
+    if (i + 1 < text.length) {
+      i += 2;
+    } else {
+      i++;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Find all non-overlapping substring matches using smartcase semantics.
+ * Lowercase queries match case-insensitively; queries containing uppercase
+ * characters match case-sensitively.
+ */
+export function findConversationMatches(
+  lines: ConversationLine[],
+  query: string,
+): ConversationMatch[] {
+  if (!query) return [];
+
+  const matches: ConversationMatch[] = [];
+  const caseInsensitive = isSmartcaseInsensitive(query);
+  const needle = caseInsensitive ? query.toLowerCase() : query;
+
+  for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+    const plain = lines[lineIdx]?.plain ?? "";
+    const haystack = caseInsensitive ? plain.toLowerCase() : plain;
+    let position = 0;
+
+    while (position < haystack.length) {
+      const col = haystack.indexOf(needle, position);
+      if (col === -1) break;
+      matches.push({ lineIdx, col, len: query.length });
+      position = col + Math.max(1, query.length);
+    }
+  }
+
+  return matches;
+}
+
+/**
+ * Inject match backgrounds into an ANSI-styled line without counting escape
+ * sequences as plain-text columns. Existing foreground/style sequences are
+ * copied verbatim, so syntax highlighting remains intact.
+ */
+export function highlightConversationLine(
+  text: string,
+  matches: HighlightMatch[],
+  openMatch: string,
+  openCurrent: string,
+  close: string,
+): string {
+  if (matches.length === 0) return text;
+
+  const sorted = [...matches].sort((a, b) => a.col - b.col);
+  let result = "";
+  let plainCol = 0;
+  let i = 0;
+  let active: HighlightMatch | null = null;
+  let nextIdx = 0;
+
+  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;
+        continue;
+      }
+    }
+
+    if (!active && nextIdx < sorted.length && plainCol >= sorted[nextIdx].col) {
+      active = sorted[nextIdx];
+      result += active.current ? openCurrent : openMatch;
+    }
+
+    result += text[i];
+    plainCol++;
+    i++;
+
+    if (active && plainCol >= active.col + active.len) {
+      result += close;
+      active = null;
+      nextIdx++;
+    }
+  }
+
+  if (active) result += close;
+  return result;
+}
+
+/** Find the first match at or after a line, wrapping to the first match. */
+export function nearestConversationMatchAfter(
+  matches: ConversationMatch[],
+  lineIdx: number,
+): number {
+  if (matches.length === 0) return -1;
+  for (let i = 0; i < matches.length; i++) {
+    if (matches[i].lineIdx >= lineIdx) return i;
+  }
+  return 0;
+}
+
+/** Find the last match at or before a line, wrapping to the last match. */
+export function nearestConversationMatchBefore(
+  matches: ConversationMatch[],
+  lineIdx: number,
+): number {
+  if (matches.length === 0) return -1;
+  for (let i = matches.length - 1; i >= 0; i--) {
+    if (matches[i].lineIdx <= lineIdx) return i;
+  }
+  return matches.length - 1;
+}
+
+/** ANSI CSI/OSC sequences emitted by the TUI renderer. */
+const ANSI_ESCAPE_RE = /^(?:\x1b\][^\x07]*(?:\x07|\x1b\\)|\x1b(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~]))/;

package/src/ui/conversation-timeline.ts

@@ -0,0 +1,315 @@
+import * as CodingAgent from "@earendil-works/pi-coding-agent";
+import {
+  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 {
+  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";
+
+export interface TimelineRenderLine {
+  text: string;
+  plain: string;
+  blockIndex: number;
+  railable?: boolean;
+}
+
+export interface TimelineToolSpan {
+  toolCallId: string;
+  startLine: number;
+  height: number;
+}
+
+export interface ConversationTimelineSnapshot {
+  lines: TimelineRenderLine[];
+  messageStarts: number[];
+  messageBlocks: ConversationBlock[];
+  interactiveToolIds: string[];
+  toolSpans: TimelineToolSpan[];
+}
+
+export interface ConversationTimelineOptions {
+  cwd?: string;
+  record?: AgentRecord;
+  onChange?: () => void;
+}
+
+function safeWidth(width: number): number {
+  return Math.max(1, Math.floor(Number.isFinite(width) ? width : 1));
+}
+
+function resultContent(result: ConversationToolResultSnapshot): Array<Record<string, unknown>> {
+  if (Array.isArray(result.content)) return result.content as Array<Record<string, unknown>>;
+  if (typeof result.content === "string") return [{ type: "text", text: result.content }];
+  return [];
+}
+
+function fallbackToolLines(block: ConversationBlock, width: number, expanded = false): string[] {
+  const summary = block.toolLine || block.fullText || block.toolName || "tool";
+  const output = block.toolResult
+    ? block.toolResult.content
+    : undefined;
+  const outputText = typeof output === "string"
+    ? output
+    : Array.isArray(output)
+      ? output.filter((item: any) => item?.type === "text").map((item: any) => String(item.text ?? "")).join("\n")
+      : "";
+  const outputLines = outputText.split(/\r?\n/);
+  const displayOutput = expanded || outputLines.length <= 4
+    ? outputLines
+    : [...outputLines.slice(0, 4), `… (${outputLines.length - 4} more lines · Enter to expand)`];
+  const body = outputText ? [summary, ...displayOutput].join("\n") : summary;
+  return body.split(/\r?\n/).map((line) => truncateToWidth(line, width, ""));
+}
+
+function applyToolComponentState(component: any, block: ConversationBlock, expanded: boolean): void {
+  component.updateArgs?.(block.args ?? block.toolArguments ?? {});
+  component.setArgsComplete?.();
+  if (block.result ?? block.toolResult) {
+    const result = (block.result ?? block.toolResult)!;
+    component.updateResult?.({
+      content: resultContent(result),
+      details: result.details,
+      isError: result.isError === true,
+    }, false);
+  }
+  component.setExpanded?.(expanded);
+}
+
+function createToolComponent(
+  block: ConversationBlock,
+  tui: TUI,
+  cwd: string,
+  expanded: boolean,
+): Component | undefined {
+  const Constructor = (CodingAgent as any).ToolExecutionComponent as (new (...args: any[]) => Component) | undefined;
+  if (typeof Constructor !== "function" || !block.toolName || !block.toolCallId) return undefined;
+
+  try {
+    const renderer = createViewerCcstyleTool(block.toolName) as ViewerToolRenderers;
+    const component = new Constructor(
+      block.toolName,
+      block.toolCallId,
+      block.args ?? block.toolArguments ?? {},
+      { showImages: false },
+      renderer,
+      tui,
+      cwd,
+    ) as any;
+    component.markExecutionStarted?.();
+    applyToolComponentState(component, block, expanded);
+    return component;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Component-aware, snapshot-driven conversation timeline.
+ * ToolExecutionComponent state is rebuilt from normalized blocks when a call id
+ * first appears and then reused; history never needs a live session, spinner,
+ * stream, or process handle.
+ */
+export class ConversationTimeline implements Component {
+  private blocks: ConversationBlock[] = [];
+  private showTools = true;
+  private focusedToolCallId: string | undefined;
+  private expandedTools = new Set<string>();
+  private toolComponents = new Map<string, Component & { handleMouse?: (event: TuiMouseEvent) => unknown }>();
+  private snapshot: ConversationTimelineSnapshot = {
+    lines: [],
+    messageStarts: [],
+    messageBlocks: [],
+    interactiveToolIds: [],
+    toolSpans: [],
+  };
+  private lastWidth = 0;
+
+  constructor(
+    private readonly tui: TUI,
+    private readonly theme: Theme,
+    private readonly options: ConversationTimelineOptions = {},
+  ) {}
+
+  setBlocks(blocks: readonly ConversationBlock[]): void {
+    this.blocks = [...blocks];
+    const ids = new Set(this.blocks.filter((block) => block.kind === "tool" && block.toolCallId).map((block) => block.toolCallId!));
+    if (this.focusedToolCallId && !ids.has(this.focusedToolCallId)) this.focusedToolCallId = undefined;
+    for (const id of this.expandedTools) if (!ids.has(id)) this.expandedTools.delete(id);
+    for (const id of this.toolComponents.keys()) if (!ids.has(id)) this.toolComponents.delete(id);
+    this.invalidate();
+  }
+
+  setShowTools(show: boolean): void {
+    if (this.showTools === show) return;
+    this.showTools = show;
+    if (!show) this.focusedToolCallId = undefined;
+    this.invalidate();
+  }
+
+  getShowTools(): boolean {
+    return this.showTools;
+  }
+
+  setFocusedToolCallId(id: string | undefined): void {
+    this.focusedToolCallId = id;
+    this.invalidate();
+  }
+
+  getFocusedToolCallId(): string | undefined {
+    return this.focusedToolCallId;
+  }
+
+  getSnapshot(): ConversationTimelineSnapshot {
+    if (this.lastWidth <= 0) this.render(80);
+    return this.snapshot;
+  }
+
+  moveFocus(direction: 1 | -1): boolean {
+    const ids = this.getSnapshot().interactiveToolIds;
+    if (ids.length === 0) return false;
+    const current = this.focusedToolCallId ? ids.indexOf(this.focusedToolCallId) : -1;
+    const next = current < 0
+      ? direction > 0 ? 0 : ids.length - 1
+      : (current + direction + ids.length) % ids.length;
+    this.focusedToolCallId = ids[next];
+    this.invalidate();
+    this.options.onChange?.();
+    return true;
+  }
+
+  toggleFocusedTool(): boolean {
+    const id = this.focusedToolCallId;
+    if (!id) return false;
+    if (this.expandedTools.has(id)) this.expandedTools.delete(id);
+    else this.expandedTools.add(id);
+    this.invalidate();
+    this.options.onChange?.();
+    return true;
+  }
+
+  isToolFocused(): boolean {
+    return this.focusedToolCallId !== undefined;
+  }
+
+  render(width: number): string[] {
+    const requestedWidth = safeWidth(width);
+    const lines: TimelineRenderLine[] = [];
+    const messageStarts: number[] = [];
+    const messageBlocks: ConversationBlock[] = [];
+    const interactiveToolIds: string[] = [];
+    const toolSpans: TimelineToolSpan[] = [];
+    const visibleBlocks = this.blocks.filter((block) => this.showTools || block.kind !== "tool");
+
+    if (visibleBlocks.length === 0) {
+      const text = this.blocks.length === 0 ? "(waiting for first message...)" : "(tools hidden)";
+      lines.push({ text: this.theme.fg("dim", text), plain: text, blockIndex: -1 });
+    }
+
+    for (const block of visibleBlocks) {
+      const blockIndex = this.blocks.indexOf(block);
+      if (lines.length > 0) {
+        const separator = this.theme.fg("border", "   " + "─ ".repeat(Math.max(1, Math.floor((requestedWidth - 6) / 2))).trimEnd());
+        lines.push({ text: truncateToWidth(separator, requestedWidth), plain: stripAnsi(separator), blockIndex });
+      }
+
+      const headerLine = ` ${renderConversationRoleHeader(block, this.theme)}`;
+      messageStarts.push(lines.length);
+      messageBlocks.push(block);
+      lines.push({ text: truncateToWidth(headerLine, requestedWidth), plain: stripAnsi(headerLine), blockIndex, railable: true });
+
+      if (block.kind === "tool") {
+        const id = block.toolCallId;
+        if (id) interactiveToolIds.push(id);
+        let component: (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
+        if (id) {
+          const existing = this.toolComponents.get(id);
+          if (existing) {
+            applyToolComponentState(existing, block, this.expandedTools.has(id));
+            component = existing;
+          } else {
+            component = createToolComponent(block, this.tui, this.options.cwd ?? process.cwd(), this.expandedTools.has(id)) as (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
+            if (component) this.toolComponents.set(id, component);
+          }
+        }
+        let rendered: string[];
+        try {
+          rendered = component?.render(requestedWidth) ?? fallbackToolLines(block, requestedWidth, id ? this.expandedTools.has(id) : false);
+        } catch {
+          // Pi's interactive theme is a capability, not a viewer dependency;
+          // test hosts and older Pi versions can lack its initialized theme.
+          rendered = fallbackToolLines(block, requestedWidth, id ? this.expandedTools.has(id) : false);
+        }
+        for (const line of rendered) {
+          lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
+        }
+        if (id) toolSpans.push({ toolCallId: id, startLine: messageStarts[messageStarts.length - 1], height: lines.length - messageStarts[messageStarts.length - 1] });
+        continue;
+      }
+
+      try {
+        const markdown = new Markdown(block.markdown || "∅", 2, 0, getMarkdownTheme(), {
+          color: (text) => this.theme.fg(block.role === "meta" ? "muted" : "text", text),
+        });
+        for (const line of markdown.render(requestedWidth)) {
+          lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
+        }
+      } catch {
+        try {
+          for (const line of new Text(block.markdown || "∅").render(requestedWidth)) {
+            lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
+          }
+        } catch {
+          for (const line of (block.markdown || "∅").split("\n")) {
+            lines.push({ text: truncateToWidth(line, requestedWidth), plain: line, blockIndex, railable: true });
+          }
+        }
+      }
+    }
+
+    this.lastWidth = requestedWidth;
+    this.snapshot = { lines, messageStarts, messageBlocks, interactiveToolIds, toolSpans };
+    return lines.map((line) => line.text);
+  }
+
+  handleMouse(event: TuiMouseEvent): { handled?: boolean; render?: boolean } | undefined {
+    if (event.type !== "click" && event.type !== "press") return undefined;
+    const span = this.snapshot.toolSpans.find((candidate) => event.y >= candidate.startLine && event.y < candidate.startLine + candidate.height);
+    if (!span) return undefined;
+    this.focusedToolCallId = span.toolCallId;
+    const component = this.toolComponents.get(span.toolCallId);
+    try {
+      // Keep Pi's normalized mouse contract in the component tree. The local
+      // role header occupies the first row; ToolExecutionComponent receives
+      // the remaining card-relative coordinate.
+      component?.handleMouse?.({ ...event, y: event.y - span.startLine, height: span.height });
+    } catch {
+      // A missing/older Pi mouse implementation must not break the viewer.
+    }
+    this.expandedTools.has(span.toolCallId)
+      ? this.expandedTools.delete(span.toolCallId)
+      : this.expandedTools.add(span.toolCallId);
+    this.invalidate();
+    this.options.onChange?.();
+    return { handled: true, render: true };
+  }
+
+  invalidate(): void {
+    this.lastWidth = 0;
+    this.snapshot = { lines: [], messageStarts: [], messageBlocks: [], interactiveToolIds: [], toolSpans: [] };
+  }
+}