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

package/src/tools/box.ts

@@ -0,0 +1,258 @@
+import {
+  type AgentToolResult,
+  DEFAULT_MAX_BYTES,
+  type FindToolDetails,
+  formatSize,
+  type GrepToolDetails,
+  type LsToolDetails,
+  type Theme,
+} from '@earendil-works/pi-coding-agent';
+import {
+  type Component,
+  truncateToWidth,
+  visibleWidth,
+} from '@earendil-works/pi-tui';
+import { cachedComponent } from '../shared/cache.ts';
+import { type BorderState, getBorderTone } from './border.ts';
+
+export const BOX_HORIZONTAL = '─';
+export const BOX_VERTICAL = '│';
+export const BOX_ROUND_TOP_LEFT = '╭';
+export const BOX_ROUND_TOP_RIGHT = '╮';
+export const BOX_ROUND_BOTTOM_LEFT = '╰';
+export const BOX_ROUND_BOTTOM_RIGHT = '╯';
+export const BOX_DIVIDER_LEFT = '├';
+export const BOX_DIVIDER_RIGHT = '┤';
+
+export function getRawResultText(
+  result: AgentToolResult<unknown> | undefined,
+): string {
+  if (!result || !result.content || !Array.isArray(result.content)) return '';
+  return result.content
+    .filter(
+      (block) => block && typeof block === 'object' && block.type === 'text',
+    )
+    .map((block) => String(block.text ?? ''))
+    .join('\n');
+}
+
+export function getResultText(
+  result: AgentToolResult<unknown> | undefined,
+): string {
+  // Retain the existing CR/CRLF normalization for read/bash/edit/write.
+  // Listing/search parsers use getRawResultText: CR can be filename data.
+  return getRawResultText(result).replace(/\r/g, '');
+}
+
+export function escapeControlCharacters(text: string): string {
+  // Display C0 data and DEL as Unicode control pictures (CR → ␍, ESC → ␛,
+  // DEL → ␡), except tabs; C1 controls, which have no pictures, as `\xNN`.
+  // Escape only at display boundaries, before styling: SDK row splitting on LF
+  // and parsing retain the original data, without terminal injection.
+  let escaped = '';
+  for (const character of text) {
+    const code = character.charCodeAt(0);
+    if (code < 0x20 && character !== '\t') {
+      escaped += String.fromCharCode(0x2400 + code);
+    } else if (code === 0x7f) {
+      escaped += '\u2421';
+    } else if (code >= 0x80 && code <= 0x9f) {
+      escaped += `\\x${code.toString(16)}`;
+    } else {
+      escaped += character;
+    }
+  }
+  return escaped;
+}
+
+/**
+ * Strip 7-bit and 8-bit ANSI SGR (Select Graphic Rendition) styling sequences.
+ * Preserves non-SGR sequences and control characters.
+ */
+export function stripSgr(text: string): string {
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: intentional SGR escape matching
+  return text.replace(/(?:\x1b\[|\x9b)[0-9;:]*m/g, '');
+}
+
+/**
+ * Escape an output row for shell tools (bash/powershell):
+ * strips SGR sequences so color codes do not bleed or display as ␛[...m,
+ * while escaping other control characters to prevent terminal injection.
+ */
+export function escapeOutputRow(text: string): string {
+  return escapeControlCharacters(stripSgr(text));
+}
+
+export function hasImageContent(
+  result: AgentToolResult<unknown> | undefined,
+): boolean {
+  if (!result || !result.content || !Array.isArray(result.content))
+    return false;
+  return result.content.some(
+    (block) => block && typeof block === 'object' && block.type === 'image',
+  );
+}
+
+export function countLines(text: string): number {
+  if (!text) return 0;
+  return text.replace(/\r/g, '').replace(/\n+$/, '').split('\n').length;
+}
+
+export interface BoxOptions extends BorderState {
+  title?: string;
+  footer?: string;
+}
+
+// The SDK appends one exact, metadata-backed notice after a blank line.
+// Never inspect individual data lines for notice-like words or brackets.
+export function splitResultNotice(
+  text: string,
+  details: unknown,
+  tool: 'ls' | 'find' | 'grep',
+): { text: string; notices: string[] } {
+  if (!details || typeof details !== 'object') return { text, notices: [] };
+  const metadata = details as LsToolDetails & FindToolDetails & GrepToolDetails;
+  let limitNotices = [''];
+  if (tool === 'ls' && typeof metadata.entryLimitReached === 'number') {
+    const limit = metadata.entryLimitReached;
+    limitNotices = [
+      `${limit} entries limit reached. Use limit=${limit * 2} for more`,
+    ];
+  } else if (
+    tool === 'find' &&
+    typeof metadata.resultLimitReached === 'number'
+  ) {
+    const limit = metadata.resultLimitReached;
+    limitNotices = [
+      `${limit} results limit reached. Use limit=${limit * 2} for more, or refine pattern`,
+      // SDK custom glob operations use the shorter variant.
+      `${limit} results limit reached`,
+    ];
+  } else if (
+    tool === 'grep' &&
+    typeof metadata.matchLimitReached === 'number'
+  ) {
+    const limit = metadata.matchLimitReached;
+    limitNotices = [
+      `${limit} matches limit reached. Use limit=${limit * 2} for more, or refine pattern`,
+    ];
+  }
+  const commonNotices: string[] = [];
+  if (metadata.truncation?.truncated === true) {
+    commonNotices.push(`${formatSize(DEFAULT_MAX_BYTES)} limit reached`);
+  }
+  if (tool === 'grep' && metadata.linesTruncated === true) {
+    // The installed SDK's GREP_MAX_LINE_LENGTH is 500 (not publicly exported).
+    commonNotices.push(
+      'Some lines truncated to 500 chars. Use read tool to see full lines',
+    );
+  }
+  for (const limitNotice of limitNotices) {
+    const notice = [limitNotice, ...commonNotices].filter(Boolean).join('. ');
+    if (!notice) continue;
+    const appendix = `[${notice}]`;
+    const suffix = `\n\n${appendix}`;
+    if (text.endsWith(suffix)) {
+      return { text: text.slice(0, -suffix.length), notices: [appendix] };
+    }
+  }
+  return { text, notices: [] };
+}
+
+function truncateBoxLine(line: string, limit: number): string {
+  // Only fitting printable ASCII is guaranteed byte-preserving. ANSI and
+  // graphemes must retain every SDK truncation pass, even if they appear to fit.
+  return line.length <= limit && !/[^\x20-\x7e]/.test(line)
+    ? line
+    : truncateToWidth(line, limit);
+}
+
+export function renderBox(
+  theme: Pick<Theme, 'fg'>,
+  bodyLines: string[],
+  width: number,
+  options: BoxOptions = {},
+): string[] {
+  const safeWidth = Math.max(0, Math.floor(width));
+  const borderColor = getBorderTone(options);
+
+  if (safeWidth <= 0) {
+    return [];
+  }
+
+  if (safeWidth <= 4) {
+    const raw = [options.title, ...bodyLines, options.footer].filter(
+      (l): l is string => typeof l === 'string' && l.length > 0,
+    );
+    const lines = raw.length > 0 ? raw : bodyLines;
+    return lines.map((l) => truncateBoxLine(l, safeWidth));
+  }
+
+  const result: string[] = [];
+  const innerWidth = Math.max(1, safeWidth - 2);
+
+  // Header / Top border
+  if (options.title) {
+    const rawTitle = ` ${options.title} `;
+    const maxTitleWidth = Math.max(1, innerWidth - 4);
+    const fitTitle =
+      visibleWidth(rawTitle) > maxTitleWidth
+        ? ` ${truncateToWidth(options.title, Math.max(1, maxTitleWidth - 2))} `
+        : rawTitle;
+    const titleWidth = visibleWidth(fitTitle);
+    const remainingDashes = Math.max(1, innerWidth - 2 - titleWidth);
+    const top = `${theme.fg(borderColor, `${BOX_ROUND_TOP_LEFT}${BOX_HORIZONTAL}${BOX_HORIZONTAL}`)}${fitTitle}${theme.fg(
+      borderColor,
+      `${BOX_HORIZONTAL.repeat(remainingDashes)}${BOX_ROUND_TOP_RIGHT}`,
+    )}`;
+    result.push(truncateToWidth(top, safeWidth));
+  } else {
+    const top = `${theme.fg(borderColor, `${BOX_ROUND_TOP_LEFT}${BOX_HORIZONTAL.repeat(innerWidth)}${BOX_ROUND_TOP_RIGHT}`)}`;
+    result.push(truncateToWidth(top, safeWidth));
+  }
+
+  // Body lines
+  const contentWidth = Math.max(1, innerWidth - 2);
+  for (const line of bodyLines) {
+    const truncated = truncateBoxLine(line, contentWidth);
+    const pad = Math.max(0, contentWidth - visibleWidth(truncated));
+    const framed = `${theme.fg(borderColor, `${BOX_VERTICAL} `)}${truncated}${' '.repeat(pad)}${theme.fg(borderColor, ` ${BOX_VERTICAL}`)}`;
+    result.push(truncateBoxLine(framed, safeWidth));
+  }
+
+  // Footer / Bottom border
+  if (options.footer) {
+    const rawFooter = ` ${options.footer} `;
+    const maxFooterWidth = Math.max(1, innerWidth - 4);
+    const fitFooter =
+      visibleWidth(rawFooter) > maxFooterWidth
+        ? ` ${truncateToWidth(options.footer, Math.max(1, maxFooterWidth - 2))} `
+        : rawFooter;
+    const footerWidth = visibleWidth(fitFooter);
+    const remainingDashes = Math.max(1, innerWidth - 2 - footerWidth);
+    const bottom = `${theme.fg(borderColor, `${BOX_ROUND_BOTTOM_LEFT}${BOX_HORIZONTAL}${BOX_HORIZONTAL}`)}${fitFooter}${theme.fg(
+      borderColor,
+      `${BOX_HORIZONTAL.repeat(remainingDashes)}${BOX_ROUND_BOTTOM_RIGHT}`,
+    )}`;
+    result.push(truncateToWidth(bottom, safeWidth));
+  } else {
+    const bottom = `${theme.fg(
+      borderColor,
+      `${BOX_ROUND_BOTTOM_LEFT}${BOX_HORIZONTAL.repeat(innerWidth)}${BOX_ROUND_BOTTOM_RIGHT}`,
+    )}`;
+    result.push(truncateToWidth(bottom, safeWidth));
+  }
+
+  return result.map((l) => truncateBoxLine(l, safeWidth));
+}
+
+export function createComponent(
+  renderFn: (width: number) => string[],
+): Component {
+  return cachedComponent((width) => {
+    const safeWidth = Math.max(0, Math.floor(width));
+    if (safeWidth <= 0) return [];
+    const lines = renderFn(safeWidth);
+    return lines.map((line) => truncateToWidth(line, safeWidth));
+  });
+}

package/src/tools/edit.ts

@@ -0,0 +1,228 @@
+import type {
+  AgentToolResult,
+  Theme,
+  ToolRenderResultOptions,
+} from '@earendil-works/pi-coding-agent';
+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, getResultText } from './box.ts';
+import { getFileIcon, getToolIcon } from './file-icons.ts';
+import {
+  formatDisplayPath,
+  hasToolResult,
+  renderFrameBottom,
+  renderFrameRow,
+  renderFrameTop,
+} from './frame.ts';
+import { type ElapsedRenderContext, syncElapsedTicker } from './ticker.ts';
+
+const COLLAPSED_DIFF_LINES = 6;
+
+interface EditArgs {
+  path?: string;
+  file_path?: string;
+}
+
+interface EditContext extends ElapsedRenderContext {
+  cwd?: string;
+  lastComponent?: { invalidate?: () => void };
+  state?: {
+    hasResult?: boolean;
+    callComponent?: { invalidate?: () => void };
+    [key: string]: unknown;
+  };
+}
+
+interface EditDetails {
+  diff?: string;
+}
+
+function parseDiffStats(diffText: string): {
+  additions: number;
+  removals: number;
+} {
+  let additions = 0;
+  let removals = 0;
+  const lines = diffText.split('\n');
+
+  for (const line of lines) {
+    if (line.startsWith('+++') || line.startsWith('---')) continue;
+    if (line.startsWith('+')) additions++;
+    else if (line.startsWith('-')) removals++;
+  }
+
+  return { additions, removals };
+}
+
+function colorDiffLine(line: string, theme: Theme): string {
+  if (
+    line.startsWith('+++') ||
+    line.startsWith('---') ||
+    line.startsWith('@@')
+  ) {
+    return theme.fg('dim', line);
+  }
+  if (line.startsWith('+')) {
+    return theme.fg('toolDiffAdded', line);
+  }
+  if (line.startsWith('-')) {
+    return theme.fg('toolDiffRemoved', line);
+  }
+  return theme.fg('toolDiffContext', line);
+}
+
+export function createCustomEditTool(cwd: string, config: ThemeConfig) {
+  return {
+    renderShell: 'self' as const,
+    renderCall(rawArgs: unknown, theme: Theme, context: EditContext) {
+      syncElapsedTicker(context);
+      const args = (rawArgs ?? {}) as EditArgs;
+      const rawPath = String(args.path ?? args.file_path ?? '');
+      const filePath = formatDisplayPath(rawPath, context?.cwd ?? cwd);
+      const icon = getFileIcon(filePath, config.icons);
+      const editIcon = getToolIcon('edit', 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', editIcon)} ${theme.bold ? theme.bold(theme.fg('toolTitle', 'Edit')) : theme.fg('toolTitle', 'Edit')} ${theme.fg('accent', icon)} ${theme.fg('text', filePath)}`;
+
+        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: EditContext,
+    ) {
+      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 details = result.details as EditDetails | undefined;
+      const diffText = details?.diff ?? getResultText(result);
+
+      if (isErr) {
+        return createComponent((width: number) => {
+          const safeWidth = Math.max(0, width);
+          const errText = `${theme.fg('error', `${statusIcon('warning', config.icons)} `)}${theme.fg('error', diffText || 'Edit failed')}`;
+          return [
+            ...renderFrameRow(theme, errText, safeWidth, borderTone),
+            ...renderFrameBottom(
+              theme,
+              toolFooter(theme, footerOptions, config.icons),
+              safeWidth,
+              borderTone,
+            ),
+          ];
+        });
+      }
+
+      const { additions, removals } = parseDiffStats(diffText);
+      const diffLines = diffText ? diffText.split('\n') : [];
+
+      return createComponent((width: number) => {
+        const safeWidth = Math.max(0, width);
+        const addedStr =
+          additions > 0
+            ? theme.fg('toolDiffAdded', `+${additions}`)
+            : theme.fg('dim', '+0');
+        const removedStr =
+          removals > 0
+            ? theme.fg('toolDiffRemoved', `-${removals}`)
+            : theme.fg('dim', '-0');
+        const footer = toolFooter(
+          theme,
+          {
+            ...footerOptions,
+            summary: [`${addedStr} ${removedStr}`, '1 file'],
+          },
+          config.icons,
+        );
+
+        if (diffLines.length === 0) {
+          return [
+            ...renderFrameRow(
+              theme,
+              theme.fg('dim', '(no changes)'),
+              safeWidth,
+              borderTone,
+            ),
+            ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+          ];
+        }
+
+        const visibleLines = options?.expanded
+          ? diffLines
+          : diffLines.slice(0, COLLAPSED_DIFF_LINES);
+        const bodyLines: string[] = visibleLines.map((l) =>
+          colorDiffLine(l, theme),
+        );
+
+        if (!options?.expanded && diffLines.length > COLLAPSED_DIFF_LINES) {
+          const remaining = diffLines.length - COLLAPSED_DIFF_LINES;
+          bodyLines.push(
+            theme.fg(
+              'dim',
+              `${semanticIcon('ellipsis', config.icons)} ${remaining} more lines ${semanticIcon('separator', config.icons)} ctrl+o to expand`,
+            ),
+          );
+        }
+
+        return [
+          ...bodyLines.flatMap((l) =>
+            renderFrameRow(theme, l, safeWidth, borderTone),
+          ),
+          ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+        ];
+      });
+    },
+  };
+}

package/src/tools/file-icons.ts

@@ -0,0 +1,139 @@
+import { basename, extname } from 'node:path';
+import type { IconMode } from '../shared/config.ts';
+import { icon } from '../shared/icons.ts';
+
+const NERD_FILE_ICONS: Record<string, string> = {
+  ts: '\ue628',
+  tsx: '\ue7ba',
+  js: '\ue74e',
+  jsx: '\ue7ba',
+  mjs: '\ue74e',
+  cjs: '\ue74e',
+  py: '\ue73c',
+  rs: '\ue7a8',
+  go: '\ue724',
+  java: '\ue738',
+  c: '\ue61e',
+  cpp: '\ue61d',
+  h: '\ue61e',
+  hpp: '\ue61d',
+  cs: '\ue648',
+  html: '\ue736',
+  htm: '\ue736',
+  css: '\ue749',
+  scss: '\ue749',
+  sass: '\ue749',
+  less: '\ue749',
+  vue: '\ue6a0',
+  svelte: '\ue697',
+  json: '\ue60b',
+  yaml: '\ue6a8',
+  yml: '\ue6a8',
+  toml: '\ue6b2',
+  xml: '\ue619',
+  md: '\ue73e',
+  mdx: '\ue73e',
+  sql: '\ue706',
+  sh: '\ue795',
+  bash: '\ue795',
+  zsh: '\ue795',
+  ps1: '\ue70f',
+  psm1: '\ue70f',
+  lua: '\ue620',
+  php: '\ue73d',
+  dart: '\ue798',
+  png: '\uf1c5',
+  jpg: '\uf1c5',
+  jpeg: '\uf1c5',
+  svg: '\uf1c5',
+  webp: '\uf1c5',
+  gif: '\uf1c5',
+  lock: '\uf023',
+  env: '\ue615',
+  dockerfile: '\ue7b0',
+};
+
+const NERD_NAME_ICONS: Record<string, string> = {
+  'package.json': '\ue71e',
+  'package-lock.json': '\ue71e',
+  'tsconfig.json': '\ue628',
+  '.gitignore': '\ue702',
+  '.gitattributes': '\ue702',
+  '.env': '\ue615',
+  dockerfile: '\ue7b0',
+  makefile: '\ue615',
+  'readme.md': '\ue73e',
+  license: '\ue60a',
+};
+
+const ASCII_FILE_ICONS: Record<string, string> = {
+  ts: '[ts]',
+  tsx: '[ts]',
+  js: '[js]',
+  jsx: '[js]',
+  mjs: '[js]',
+  cjs: '[js]',
+  py: '[py]',
+  rs: '[rs]',
+  go: '[go]',
+  json: '{ }',
+  yaml: '{ }',
+  yml: '{ }',
+  toml: '{ }',
+  xml: '< >',
+  md: '[md]',
+  mdx: '[md]',
+  html: '< >',
+  htm: '< >',
+  css: '{ }',
+  sh: '$',
+  bash: '$',
+  zsh: '$',
+  ps1: 'PS',
+  psm1: 'PS',
+  png: '[img]',
+  jpg: '[img]',
+  jpeg: '[img]',
+  svg: '[img]',
+  gif: '[img]',
+  webp: '[img]',
+  lock: '[lock]',
+  env: '[env]',
+};
+
+export function getFileIcon(filePath: string, mode: IconMode): string {
+  if (filePath.endsWith('/') || filePath.endsWith('\\')) {
+    return icon('folder', mode);
+  }
+
+  const name = basename(filePath).toLowerCase();
+  const ext = extname(name).replace(/^\./, '').toLowerCase();
+
+  if (mode === 'ascii') {
+    if (ASCII_FILE_ICONS[ext]) return ASCII_FILE_ICONS[ext];
+    return icon('file', mode);
+  }
+
+  if (NERD_NAME_ICONS[name]) return NERD_NAME_ICONS[name];
+  if (NERD_FILE_ICONS[ext]) return NERD_FILE_ICONS[ext];
+  return icon('file', mode);
+}
+
+export function getDirIcon(mode: IconMode): string {
+  return icon('folder', mode);
+}
+
+export function getToolIcon(
+  tool:
+    | 'read'
+    | 'write'
+    | 'edit'
+    | 'bash'
+    | 'powershell'
+    | 'search'
+    | 'folder'
+    | 'file',
+  mode: IconMode,
+): string {
+  return icon(tool, mode);
+}