@thoth-agents/pi-thoth-theme 0.0.0-stage → 0.1.0

package/src/tools/find.ts

@@ -0,0 +1,227 @@
+import type {
+  AgentToolResult,
+  Theme,
+  ToolRenderResultOptions,
+} from '@earendil-works/pi-coding-agent';
+import { truncateToWidth } from '@earendil-works/pi-tui';
+import { toolFooter } from '../render-kit/index.ts';
+import type { ThemeConfig } from '../shared/config.ts';
+import { icon as semanticIcon, statusIcon } from '../shared/icons.ts';
+import { getToolBorderTone } from './border.ts';
+import {
+  createComponent,
+  escapeControlCharacters,
+  getRawResultText,
+  renderBox,
+  splitResultNotice,
+} from './box.ts';
+import { getFileIcon, getToolIcon } from './file-icons.ts';
+import {
+  formatDisplayPath,
+  hasToolResult,
+  isFramedContext,
+  renderFrameBottom,
+  renderFrameRow,
+  renderFrameTop,
+} from './frame.ts';
+import { type ElapsedRenderContext, syncElapsedTicker } from './ticker.ts';
+
+const COLLAPSED_ENTRY_LIMIT = 8;
+
+interface FindArgs {
+  pattern?: string;
+  path?: string;
+}
+
+interface FindContext extends ElapsedRenderContext {
+  cwd?: string;
+  lastComponent?: { invalidate?: () => void };
+  state?: {
+    hasResult?: boolean;
+    callComponent?: { invalidate?: () => void };
+    [key: string]: unknown;
+  };
+  toolCallId?: string;
+}
+
+function parseFindOutput(
+  text: string,
+  details: unknown,
+): { entries: string[]; notices: string[] } {
+  const output = splitResultNotice(text, details, 'find');
+  return {
+    entries: output.text.split('\n').filter((line) => line.length > 0),
+    notices: output.notices,
+  };
+}
+
+export function createCustomFindTool(cwd: string, config: ThemeConfig) {
+  return {
+    renderShell: 'self' as const,
+    renderCall(rawArgs: unknown, theme: Theme, context: FindContext) {
+      syncElapsedTicker(context);
+      const args = (rawArgs ?? {}) as FindArgs;
+      const pattern = escapeControlCharacters(String(args.pattern ?? '*'));
+      const rawPath = String(args.path ?? '.');
+      const searchPath = escapeControlCharacters(
+        formatDisplayPath(rawPath, context?.cwd ?? cwd),
+      );
+      const icon = getToolIcon('search', config.icons);
+      const borderTone = getToolBorderTone(context);
+
+      const comp = createComponent((width: number) => {
+        const safeWidth = Math.max(0, width);
+        const footer =
+          context?.executionStarted && context.isPartial
+            ? toolFooter(theme, { status: 'running', context }, config.icons)
+            : undefined;
+        const title = `${theme.fg('accent', icon)} ${theme.bold ? theme.bold(theme.fg('toolTitle', 'Find')) : theme.fg('toolTitle', 'Find')} ${theme.fg('syntaxString', `"${pattern}"`)} ${theme.fg('dim', 'in')} ${theme.fg('text', searchPath)}`;
+
+        if (!isFramedContext(context)) {
+          return renderBox(theme, [], safeWidth, {
+            title,
+            footer,
+            isError: borderTone === 'error',
+            isSuccess: borderTone === 'success',
+          });
+        }
+
+        if (hasToolResult(context)) {
+          return renderFrameTop(theme, title, safeWidth, borderTone);
+        }
+
+        return [
+          ...renderFrameTop(theme, title, safeWidth, borderTone),
+          ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+        ];
+      });
+
+      if (context?.state) {
+        context.state.callComponent = comp;
+      }
+      return comp;
+    },
+
+    renderResult(
+      result: AgentToolResult<unknown>,
+      options: ToolRenderResultOptions,
+      theme: Theme,
+      context: FindContext,
+    ) {
+      if (context?.state) {
+        context.state.hasResult = true;
+        if (
+          context.state.callComponent &&
+          typeof context.state.callComponent.invalidate === 'function'
+        ) {
+          context.state.callComponent.invalidate();
+        }
+      }
+      if (
+        context?.lastComponent &&
+        typeof context.lastComponent.invalidate === 'function'
+      ) {
+        context.lastComponent.invalidate();
+      }
+
+      const isErr = Boolean(context?.isError);
+      const status = options?.isPartial
+        ? 'running'
+        : isErr
+          ? 'failed'
+          : 'completed';
+      const footerOptions = {
+        status,
+        context: { ...context, isPartial: options?.isPartial },
+      } as const;
+      syncElapsedTicker(footerOptions.context);
+      const borderTone = getToolBorderTone({
+        isError: isErr,
+        isPartial: options?.isPartial,
+      });
+      const textOutput = getRawResultText(result);
+
+      if (isErr) {
+        return createComponent((width: number) => {
+          const safeWidth = Math.max(0, width);
+          const footer = toolFooter(theme, footerOptions, config.icons);
+          const errText = `${theme.fg('error', `${statusIcon('warning', config.icons)} `)}${theme.fg('error', escapeControlCharacters(textOutput || 'Find failed'))}`;
+          if (!isFramedContext(context)) {
+            return [
+              truncateToWidth(errText, safeWidth),
+              ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+            ];
+          }
+          return [
+            ...renderFrameRow(theme, errText, safeWidth, borderTone),
+            ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+          ];
+        });
+      }
+
+      const { entries, notices } = parseFindOutput(textOutput, result.details);
+      const total = entries.length;
+
+      return createComponent((width: number) => {
+        const safeWidth = Math.max(0, width);
+        const footer = toolFooter(theme, footerOptions, config.icons);
+        if (safeWidth === 0) return [];
+        if (total === 0 && notices.length === 0) {
+          if (!isFramedContext(context)) {
+            return [
+              truncateToWidth(theme.fg('dim', 'no matches found'), safeWidth),
+              ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+            ];
+          }
+          return [
+            ...renderFrameRow(
+              theme,
+              theme.fg('dim', 'no matches found'),
+              safeWidth,
+              borderTone,
+            ),
+            ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+          ];
+        }
+
+        const rawLines: string[] = [];
+        const visible = options?.expanded
+          ? entries
+          : entries.slice(0, COLLAPSED_ENTRY_LIMIT);
+        const remaining = total - visible.length;
+
+        for (let i = 0; i < visible.length; i++) {
+          const entry = visible[i];
+          const isLast = i === visible.length - 1 && remaining === 0;
+          const branch = isLast ? '└─' : '├─';
+          const icon = getFileIcon(entry, config.icons);
+          const line = `${theme.fg('dim', branch)} ${theme.fg('accent', icon)} ${theme.fg('toolOutput', escapeControlCharacters(entry))}`;
+          rawLines.push(line);
+        }
+
+        if (remaining > 0) {
+          const more = `${theme.fg('dim', '└─')} ${theme.fg('dim', `${semanticIcon('ellipsis', config.icons)} ${remaining} more matches ${semanticIcon('separator', config.icons)} ctrl+o to expand`)}`;
+          rawLines.push(more);
+        }
+
+        for (const notice of notices) {
+          rawLines.push(theme.fg('warning', notice));
+        }
+
+        if (!isFramedContext(context)) {
+          return [
+            ...rawLines.map((line) => truncateToWidth(`  ${line}`, safeWidth)),
+            ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+          ];
+        }
+
+        return [
+          ...rawLines.flatMap((line) =>
+            renderFrameRow(theme, line, safeWidth, borderTone),
+          ),
+          ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+        ];
+      });
+    },
+  };
+}

package/src/tools/frame.ts

@@ -0,0 +1,166 @@
+import { relative, resolve } from 'node:path';
+import type { Theme } from '@earendil-works/pi-coding-agent';
+import { truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
+import type { BorderTone } from './border.ts';
+
+export const FRAME_HORIZONTAL = '─';
+export const FRAME_VERTICAL = '│';
+export const FRAME_ROUND_TOP_LEFT = '╭';
+export const FRAME_ROUND_TOP_RIGHT = '╮';
+export const FRAME_ROUND_BOTTOM_LEFT = '╰';
+export const FRAME_ROUND_BOTTOM_RIGHT = '╯';
+export const FRAME_DIVIDER_LEFT = '├';
+export const FRAME_DIVIDER_RIGHT = '┤';
+
+export function formatDisplayPath(targetPath: string, cwd?: string): string {
+  if (!targetPath) return '';
+  if (!cwd) return targetPath;
+  try {
+    const absTarget = resolve(cwd, targetPath);
+    const absCwd = resolve(cwd);
+    const rel = relative(absCwd, absTarget);
+    if (
+      !rel.startsWith('..') &&
+      !rel.startsWith('/') &&
+      !/^[A-Za-z]:/.test(rel)
+    ) {
+      // Inside cwd. Normalize to forward slashes for clean unified display.
+      return rel.replace(/\\/g, '/') || '.';
+    }
+  } catch {
+    // ignore resolution error
+  }
+  return targetPath;
+}
+
+export function hasToolResult(context?: {
+  isError?: boolean;
+  state?: { hasResult?: boolean; [key: string]: unknown };
+}): boolean {
+  if (!context) return false;
+  return Boolean(context.state?.hasResult);
+}
+
+export function isFramedContext(context?: {
+  toolCallId?: string;
+  state?: { hasResult?: boolean; [key: string]: unknown };
+}): boolean {
+  if (!context) return false;
+  return Boolean(context.toolCallId || context.state);
+}
+
+export function renderFrameTop(
+  theme: Pick<Theme, 'fg'>,
+  title: string,
+  width: number,
+  borderColor: BorderTone = 'accent',
+): string[] {
+  const safeWidth = Math.max(0, Math.floor(width));
+
+  if (safeWidth <= 0) return [];
+  if (safeWidth <= 4) {
+    return [truncateToWidth(title, safeWidth)];
+  }
+
+  const innerWidth = Math.max(1, safeWidth - 2);
+  const rawTitle = ` ${title} `;
+  const maxTitleWidth = Math.max(1, innerWidth - 4);
+  const fitTitle =
+    visibleWidth(rawTitle) > maxTitleWidth
+      ? ` ${truncateToWidth(title, Math.max(1, maxTitleWidth - 2))} `
+      : rawTitle;
+  const titleWidth = visibleWidth(fitTitle);
+  const remainingDashes = Math.max(1, innerWidth - 2 - titleWidth);
+  const top = `${theme.fg(borderColor, `${FRAME_ROUND_TOP_LEFT}${FRAME_HORIZONTAL}${FRAME_HORIZONTAL}`)}${fitTitle}${theme.fg(
+    borderColor,
+    `${FRAME_HORIZONTAL.repeat(remainingDashes)}${FRAME_ROUND_TOP_RIGHT}`,
+  )}`;
+  return [truncateToWidth(top, safeWidth)];
+}
+
+export function renderFrameRow(
+  theme: Pick<Theme, 'fg'>,
+  line: string,
+  width: number,
+  borderColor: BorderTone = 'accent',
+): string[] {
+  const safeWidth = Math.max(0, Math.floor(width));
+
+  if (safeWidth <= 0) return [];
+  if (safeWidth <= 4) {
+    return [truncateToWidth(line, safeWidth)];
+  }
+
+  const innerWidth = Math.max(1, safeWidth - 2);
+  const contentWidth = Math.max(1, innerWidth - 2);
+  const truncated = truncateToWidth(line, contentWidth);
+  const pad = Math.max(0, contentWidth - visibleWidth(truncated));
+  const framed = `${theme.fg(borderColor, `${FRAME_VERTICAL} `)}${truncated}${' '.repeat(pad)}${theme.fg(borderColor, ` ${FRAME_VERTICAL}`)}`;
+  return [truncateToWidth(framed, safeWidth)];
+}
+
+export function renderFrameDivider(
+  theme: Pick<Theme, 'fg'>,
+  title: string,
+  width: number,
+  borderColor: BorderTone = 'accent',
+): string[] {
+  const safeWidth = Math.max(0, Math.floor(width));
+
+  if (safeWidth <= 0) return [];
+  if (safeWidth <= 4) {
+    return [truncateToWidth(title, safeWidth)];
+  }
+
+  const innerWidth = Math.max(1, safeWidth - 2);
+  const rawTitle = ` ${title} `;
+  const maxTitleWidth = Math.max(1, innerWidth - 4);
+  const fitTitle =
+    visibleWidth(rawTitle) > maxTitleWidth
+      ? ` ${truncateToWidth(title, Math.max(1, maxTitleWidth - 2))} `
+      : rawTitle;
+  const titleWidth = visibleWidth(fitTitle);
+  const remainingDashes = Math.max(1, innerWidth - 2 - titleWidth);
+  const divider = `${theme.fg(borderColor, `${FRAME_DIVIDER_LEFT}${FRAME_HORIZONTAL}${FRAME_HORIZONTAL}`)}${theme.fg('dim', fitTitle)}${theme.fg(
+    borderColor,
+    `${FRAME_HORIZONTAL.repeat(remainingDashes)}${FRAME_DIVIDER_RIGHT}`,
+  )}`;
+  return [truncateToWidth(divider, safeWidth)];
+}
+
+export function renderFrameBottom(
+  theme: Pick<Theme, 'fg'>,
+  footer: string | undefined,
+  width: number,
+  borderColor: BorderTone = 'accent',
+): string[] {
+  const safeWidth = Math.max(0, Math.floor(width));
+
+  if (safeWidth <= 0) return [];
+  if (safeWidth <= 4) {
+    return footer ? [truncateToWidth(footer, safeWidth)] : [];
+  }
+
+  const innerWidth = Math.max(1, safeWidth - 2);
+  if (footer) {
+    const rawFooter = ` ${footer} `;
+    const maxFooterWidth = Math.max(1, innerWidth - 4);
+    const fitFooter =
+      visibleWidth(rawFooter) > maxFooterWidth
+        ? ` ${truncateToWidth(footer, Math.max(1, maxFooterWidth - 2))} `
+        : rawFooter;
+    const footerWidth = visibleWidth(fitFooter);
+    const remainingDashes = Math.max(1, innerWidth - 2 - footerWidth);
+    const bottom = `${theme.fg(borderColor, `${FRAME_ROUND_BOTTOM_LEFT}${FRAME_HORIZONTAL}${FRAME_HORIZONTAL}`)}${fitFooter}${theme.fg(
+      borderColor,
+      `${FRAME_HORIZONTAL.repeat(remainingDashes)}${FRAME_ROUND_BOTTOM_RIGHT}`,
+    )}`;
+    return [truncateToWidth(bottom, safeWidth)];
+  }
+
+  const bottom = `${theme.fg(
+    borderColor,
+    `${FRAME_ROUND_BOTTOM_LEFT}${FRAME_HORIZONTAL.repeat(innerWidth)}${FRAME_ROUND_BOTTOM_RIGHT}`,
+  )}`;
+  return [truncateToWidth(bottom, safeWidth)];
+}

package/src/tools/generic.ts

@@ -0,0 +1,195 @@
+import type {
+  AgentToolResult,
+  Theme,
+  ToolRenderers,
+  ToolRenderResultOptions,
+} from '@earendil-works/pi-coding-agent';
+import { toolFooter } from '../render-kit/index.ts';
+import type { IconMode, ThemeConfig } from '../shared/config.ts';
+import { icon as semanticIcon } from '../shared/icons.ts';
+import { getToolBorderTone } from './border.ts';
+import {
+  createComponent,
+  escapeControlCharacters,
+  getResultText,
+  hasImageContent,
+} from './box.ts';
+import {
+  hasToolResult,
+  renderFrameBottom,
+  renderFrameRow,
+  renderFrameTop,
+} from './frame.ts';
+import {
+  type ElapsedRenderContext,
+  type ElapsedRenderState,
+  syncElapsedTicker,
+} from './ticker.ts';
+
+const COLLAPSED_OUTPUT_LINES = 8;
+const MAX_ARGS_SUMMARY_LENGTH = 500;
+const NESTED_KEYS_SHOWN = 4;
+
+interface GenericContext extends ElapsedRenderContext {
+  lastComponent?: { invalidate?: () => void };
+  state?: ElapsedRenderState & {
+    hasResult?: boolean;
+    callComponent?: { invalidate?: () => void };
+  };
+}
+
+function formatValue(value: unknown): string {
+  if (typeof value === 'string') return JSON.stringify(value) ?? '""';
+  try {
+    return JSON.stringify(value) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function summarizeValue(value: unknown, mode: IconMode): string {
+  if (Array.isArray(value)) return `[${value.length} items]`;
+  if (value !== null && typeof value === 'object') {
+    const keys = Object.keys(value);
+    const shown = keys.slice(0, NESTED_KEYS_SHOWN).join(', ');
+    return `{${keys.length > NESTED_KEYS_SHOWN ? `${shown}, ${semanticIcon('ellipsis', mode)}` : shown}}`;
+  }
+  return formatValue(value);
+}
+
+/** Pretty-print JSON object/array text; anything else is returned unchanged. */
+function prettifyJson(text: string): string {
+  const trimmed = text.trim();
+  const first = trimmed[0];
+  if (first !== '{' && first !== '[') return text;
+  try {
+    return JSON.stringify(JSON.parse(trimmed), null, 2);
+  } catch {
+    return text;
+  }
+}
+
+/** One-line `key=value` summary; escaping happens at the display boundary. */
+export function summarizeArgs(args: unknown, mode: IconMode = 'nerd'): string {
+  if (args === undefined || args === null) return '';
+  let summary: string;
+  if (typeof args === 'object' && !Array.isArray(args)) {
+    summary = Object.entries(args as Record<string, unknown>)
+      .map(([key, value]) => `${key}=${summarizeValue(value, mode)}`)
+      .join(' ');
+  } else {
+    summary = formatValue(args);
+  }
+  return escapeControlCharacters(summary.slice(0, MAX_ARGS_SUMMARY_LENGTH));
+}
+
+/** Generic frame for tools that provide no renderer of their own. */
+export function createGenericTool(
+  toolName: string,
+  config: ThemeConfig,
+): ToolRenderers {
+  const toolIcon = semanticIcon('tool', config.icons);
+  const name = escapeControlCharacters(toolName);
+
+  return {
+    renderShell: 'self' as const,
+    renderCall(rawArgs: unknown, theme: Theme, context: GenericContext) {
+      syncElapsedTicker(context);
+      const borderTone = context?.isPartial
+        ? 'accent'
+        : getToolBorderTone(context);
+      const argsSummary = summarizeArgs(rawArgs, config.icons);
+
+      const comp = createComponent((width: number) => {
+        const footer =
+          context?.executionStarted && context.isPartial
+            ? toolFooter(theme, { status: 'running', context }, config.icons)
+            : undefined;
+        const title = `${theme.fg('accent', toolIcon)} ${theme.bold ? theme.bold(theme.fg('toolTitle', name)) : theme.fg('toolTitle', name)}`;
+        const lines = [
+          ...renderFrameTop(theme, title, width, borderTone),
+          ...(argsSummary
+            ? renderFrameRow(
+                theme,
+                theme.fg('dim', argsSummary),
+                width,
+                borderTone,
+              )
+            : []),
+        ];
+        if (hasToolResult(context)) return lines;
+        return [
+          ...lines,
+          ...renderFrameBottom(theme, footer, width, borderTone),
+        ];
+      });
+
+      if (context?.state) context.state.callComponent = comp;
+      return comp;
+    },
+
+    renderResult(
+      result: AgentToolResult<unknown>,
+      options: ToolRenderResultOptions,
+      theme: Theme,
+      context: GenericContext,
+    ) {
+      if (context?.state) {
+        context.state.hasResult = true;
+        context.state.callComponent?.invalidate?.();
+      }
+      context?.lastComponent?.invalidate?.();
+
+      const isErr = Boolean(context?.isError);
+      const isPartial = Boolean(options?.isPartial);
+      const borderTone = isPartial
+        ? 'accent'
+        : getToolBorderTone({ isError: isErr, isPartial });
+      syncElapsedTicker({ ...context, isPartial });
+      const text = prettifyJson(getResultText(result));
+      const allLines = text ? text.split('\n') : [];
+      const lineCount = allLines.length;
+      const hasImage = hasImageContent(result);
+
+      return createComponent((width: number) => {
+        const footer = toolFooter(
+          theme,
+          {
+            status: isPartial ? 'running' : isErr ? 'failed' : 'completed',
+            context: { ...context, isPartial },
+            summary: `${lineCount} ${lineCount === 1 ? 'line' : 'lines'}`,
+          },
+          config.icons,
+        );
+
+        const visible = options?.expanded
+          ? allLines
+          : allLines.slice(0, COLLAPSED_OUTPUT_LINES);
+        const body = visible.map((line) => {
+          const sanitized = escapeControlCharacters(line);
+          return isErr
+            ? theme.fg('error', sanitized)
+            : theme.fg('toolOutput', sanitized);
+        });
+        if (!options?.expanded && allLines.length > COLLAPSED_OUTPUT_LINES) {
+          body.push(
+            theme.fg(
+              'dim',
+              `${semanticIcon('ellipsis', config.icons)} ${allLines.length - COLLAPSED_OUTPUT_LINES} more lines ${semanticIcon('separator', config.icons)} ctrl+o to expand`,
+            ),
+          );
+        }
+        if (body.length === 0 && !hasImage) {
+          body.push(theme.fg('dim', '(no output)'));
+        }
+
+        return [
+          ...body.flatMap((line) =>
+            renderFrameRow(theme, line, width, borderTone),
+          ),
+          ...renderFrameBottom(theme, footer, width, borderTone),
+        ];
+      });
+    },
+  };
+}