@abacus-ai/cli 1.106.25008 → 2.0.0-canary.1

package/src/tools/utils/tool-ui-components.tsx

@@ -0,0 +1,649 @@
+import { View, Text } from "@codellm/jar";
+import { renderMermaidAscii } from "beautiful-mermaid";
+import { highlight, supportsLanguage } from "cli-highlight";
+import { structuredPatch } from "diff";
+import { extname } from "path";
+import React, { useEffect, useState, useMemo, createContext, use } from "react";
+
+import type { ToolStatus } from "../types.js";
+
+import { useTheme } from "../../theme/index.js";
+
+/**
+ * Context for the currently pending tool call ID (awaiting permission).
+ * Provided at top level; consumed by ToolHeader to suppress blinking.
+ */
+export const PendingToolCallIdContext = createContext<string | null>(null);
+
+/**
+ * Diff line type for condensed diff preview
+ */
+export interface CondensedDiffLine {
+  type: "added" | "removed" | "unchanged";
+  content: string;
+  lineNumber: number;
+}
+
+/**
+ * Format bytes for display
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)}KB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+
+/**
+ * Format duration in milliseconds for display
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+/**
+ * Truncate long file paths for display
+ */
+export function truncatePath(path: string, maxLen: number = 50): string {
+  if (path.length <= maxLen) {
+    return path;
+  }
+  const parts = path.split("/");
+  if (parts.length === 1) {
+    return path.length > maxLen ? `...${path.slice(-maxLen + 3)}` : path;
+  }
+  const filename = parts[parts.length - 1];
+  const remaining = maxLen - filename.length - 3;
+  if (remaining < 0) {
+    return `...${filename.slice(-maxLen + 3)}`;
+  }
+  const prefix = parts.slice(0, -1).join("/");
+  if (prefix.length <= remaining) {
+    return path;
+  }
+  return `...${prefix.slice(-remaining)}/${filename}`;
+}
+
+/**
+ * Get color for tool status
+ */
+export function getStatusColor(status: ToolStatus): string {
+  switch (status) {
+    case "success":
+      return "green";
+    case "error":
+      return "red";
+    case "rejected":
+    case "interrupted":
+      return "yellow";
+    case "pending":
+    case "executing":
+    default:
+      return "white";
+  }
+}
+
+/**
+ * Blinking dot animation for pending status - grey fade effect
+ */
+export function BlinkingDot() {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVisible((prev) => !prev);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Text color="gray" dimColor={!visible}>
+      ●
+    </Text>
+  );
+}
+
+/**
+ * Tool header component - displays tool name, params, and status
+ */
+export interface ToolHeaderProps {
+  name: string;
+  params?: string;
+  status?: ToolStatus;
+  showSpinner?: boolean;
+  /** When true, shows a static yellow ◌ instead of blinking dot (permission wait state) */
+  isAwaitingPermission?: boolean;
+  /** Tool call ID — used to check against PendingToolCallIdContext for auto awaiting-permission detection */
+  toolCallId?: string;
+  /** When set, syntax-highlight params using this language via cli-highlight */
+  paramsLanguage?: string;
+}
+
+export function ToolHeader({
+  name,
+  params,
+  status = "pending",
+  showSpinner,
+  isAwaitingPermission,
+  toolCallId,
+  paramsLanguage,
+}: ToolHeaderProps) {
+  const color = getStatusColor(status);
+
+  // Auto-detect awaiting permission via context:
+  // When a tool call ID matches the pending permission, or when showSpinner is true
+  // and there's any pending permission (only one at a time), show static indicator.
+  const pendingToolCallId = use(PendingToolCallIdContext);
+  const awaiting =
+    isAwaitingPermission ??
+    (pendingToolCallId != null &&
+      ((toolCallId != null && toolCallId === pendingToolCallId) ||
+        (toolCallId == null && showSpinner)));
+
+  let indicator: React.ReactNode;
+  if (awaiting) {
+    indicator = <Text color="yellow">◌</Text>;
+  } else if (showSpinner) {
+    indicator = <BlinkingDot />;
+  } else {
+    indicator = <Text color={color}>⏺</Text>;
+  }
+
+  let paramsContent: React.ReactNode = null;
+  if (params) {
+    let highlighted = params;
+    if (paramsLanguage && supportsLanguage(paramsLanguage)) {
+      try {
+        highlighted = highlight(params, { language: paramsLanguage });
+      } catch {
+        // fallback to plain text
+      }
+    }
+    paramsContent = paramsLanguage ? (
+      <Text>({highlighted})</Text>
+    ) : (
+      <Text dimColor>({params})</Text>
+    );
+  }
+
+  return (
+    <View flexDirection="row" alignItems="center" gap={1}>
+      {indicator}
+      <Text color="cyan">{name}</Text>
+      {paramsContent}
+    </View>
+  );
+}
+
+/**
+ * Tool result component - displays tool output with indentation
+ */
+export interface ToolResultProps {
+  children: React.ReactNode;
+  color?: string;
+  indent?: number;
+}
+
+export function ToolResult({ children, color = "gray", indent = 2 }: ToolResultProps) {
+  return (
+    <View marginLeft={indent} flexDirection="row" alignItems="flex-start" gap={1}>
+      <Text color={color} dimColor>
+        ⎿
+      </Text>
+      <Text color={color} dimColor>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+/**
+ * Wrapper for preview content areas (diffs, code blocks, terminal output).
+ * Provides consistent indentation below the result line.
+ */
+export interface PreviewContentProps {
+  children: React.ReactNode;
+  indent?: number;
+}
+
+export function PreviewContent({ children, indent = 4 }: PreviewContentProps) {
+  return (
+    <View flexDirection="column" paddingLeft={indent}>
+      {children}
+    </View>
+  );
+}
+
+/**
+ * Parse tool result from JSON string
+ */
+export function parseToolResult(content: string): any {
+  try {
+    const parsed = JSON.parse(content);
+    if (typeof parsed !== "object" || parsed === null) {
+      return { output: content, type: "text" };
+    }
+    return parsed;
+  } catch {
+    const jsonMatch = content.match(/```(?:json)?\s*\n?([\s\S]*?)\n?```/);
+    if (jsonMatch && jsonMatch[1]) {
+      try {
+        const parsed = JSON.parse(jsonMatch[1].trim());
+        if (typeof parsed !== "object" || parsed === null) {
+          return { output: jsonMatch[1].trim(), type: "text" };
+        }
+        return parsed;
+      } catch {
+        return { output: jsonMatch[1].trim(), type: "text" };
+      }
+    }
+    return { output: content, type: "text" };
+  }
+}
+
+/**
+ * Compute expected final content after edit operation
+ * Used for diff preview
+ */
+export function computeExpectedFinalContentForDiff(
+  currentContent: string,
+  codeEdit: string,
+  overwriteFile: boolean,
+  startLine?: number,
+  endLine?: number,
+  instructions?: string,
+): string {
+  if (overwriteFile) {
+    return codeEdit;
+  }
+
+  if (startLine !== undefined && endLine !== undefined) {
+    const lines = currentContent.split("\n");
+    const totalLines = lines.length;
+    const validStartLine = Math.max(1, Math.min(startLine, totalLines));
+    const validEndLine = Math.max(validStartLine, Math.min(endLine, totalLines));
+
+    const beforeLines = lines.slice(0, validStartLine - 1);
+    const afterLines = lines.slice(validEndLine);
+    const newLines = codeEdit.split("\n");
+
+    return [...beforeLines, ...newLines, ...afterLines].join("\n");
+  }
+
+  if (instructions) {
+    return currentContent + "\n" + codeEdit;
+  }
+
+  const codeEditLines = codeEdit.split("\n");
+  const currentLines = currentContent.split("\n");
+
+  if (codeEditLines.length >= currentLines.length * 0.8) {
+    return codeEdit;
+  }
+
+  if (currentContent.includes(codeEdit)) {
+    return currentContent;
+  }
+
+  return currentContent + "\n" + codeEdit;
+}
+
+/**
+ * Wrap long lines for terminal display
+ */
+export function wrapLine(content: string, maxWidth: number, lineNumberWidth: number): string[] {
+  if (!content) return [""];
+
+  // Account for line number, gutter (` - ` or ` + `), and some margin
+  const availableWidth = maxWidth - lineNumberWidth - 4 - 2; // 4 for gutter, 2 for margins
+
+  if (content.length <= availableWidth) {
+    return [content];
+  }
+
+  const wrapped: string[] = [];
+  let remaining = content;
+
+  while (remaining.length > 0) {
+    if (remaining.length <= availableWidth) {
+      wrapped.push(remaining);
+      break;
+    }
+
+    // Try to break at a space near the limit
+    let breakPoint = remaining.lastIndexOf(" ", availableWidth);
+    if (breakPoint === -1 || breakPoint < availableWidth * 0.5) {
+      breakPoint = availableWidth;
+    }
+
+    wrapped.push(remaining.slice(0, breakPoint));
+    remaining = remaining.slice(breakPoint).trimStart();
+  }
+
+  return wrapped;
+}
+
+/**
+ * Get language from file extension for syntax highlighting
+ */
+function getLanguageFromPath(filePath: string): string | undefined {
+  const ext = extname(filePath).toLowerCase().slice(1);
+  const langMap: Record<string, string> = {
+    ts: "typescript",
+    tsx: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    py: "python",
+    rb: "ruby",
+    rs: "rust",
+    go: "go",
+    java: "java",
+    c: "c",
+    cpp: "cpp",
+    h: "c",
+    hpp: "cpp",
+    cs: "csharp",
+    php: "php",
+    swift: "swift",
+    kt: "kotlin",
+    scala: "scala",
+    sh: "bash",
+    bash: "bash",
+    zsh: "bash",
+    json: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    xml: "xml",
+    html: "html",
+    css: "css",
+    scss: "scss",
+    less: "less",
+    sql: "sql",
+    md: "markdown",
+    markdown: "markdown",
+    txt: "plaintext",
+    mmd: "mermaid",
+    mermaid: "mermaid",
+  };
+  return langMap[ext];
+}
+
+/**
+ * Try to render mermaid diagram as ASCII art
+ * Returns null if parsing fails
+ */
+function tryRenderMermaid(content: string): string | null {
+  try {
+    return renderMermaidAscii(content);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Code preview component for new files
+ * Shows syntax-highlighted code block with line numbers
+ */
+export interface CodePreviewProps {
+  content: string;
+  filePath?: string;
+  /** First line number to display (1-based). Defaults to 1. */
+  startLine?: number;
+  maxLines?: number;
+  dimmed?: boolean;
+}
+
+export function CodePreview({
+  content,
+  filePath,
+  startLine = 1,
+  maxLines = 4,
+  dimmed = false,
+}: CodePreviewProps) {
+  const { displayContent, totalLines, hasMore, displayLineCount } = useMemo(() => {
+    const allLines = content.split("\n");
+    const total = allLines.length;
+    const lines = allLines.slice(0, maxLines);
+    return {
+      displayContent: lines.join("\n"),
+      displayLineCount: lines.length,
+      totalLines: total,
+      hasMore: total > maxLines,
+    };
+  }, [content, maxLines]);
+
+  const highlightedContent = useMemo(() => {
+    if (!displayContent) return displayContent;
+
+    const language = filePath ? getLanguageFromPath(filePath) : undefined;
+
+    // Try to render mermaid diagrams as ASCII art
+    if (language === "mermaid") {
+      const mermaidOutput = tryRenderMermaid(content);
+      if (mermaidOutput !== null) {
+        return mermaidOutput;
+      }
+      // If mermaid parsing fails, fall through to regular rendering
+    }
+
+    if (language && supportsLanguage(language)) {
+      try {
+        return highlight(displayContent, { language });
+      } catch {
+        // Fallback to plain text
+      }
+    }
+    return displayContent;
+  }, [displayContent, filePath, content]);
+
+  if (!displayContent) {
+    return null;
+  }
+
+  const lastLineNum = startLine + totalLines - 1;
+  const maxLineNumWidth = lastLineNum.toString().length;
+  const lines = highlightedContent.split("\n");
+
+  return (
+    <View flexDirection="column">
+      {lines.map((line, idx) => {
+        const lineNum = startLine + idx;
+        const paddedNum = String(lineNum).padStart(maxLineNumWidth, " ");
+        return (
+          <Text key={idx} dimColor={dimmed}>
+            <Text dimColor>{paddedNum} │ </Text>
+            {line}
+          </Text>
+        );
+      })}
+      {hasMore && <Text dimColor> ... {totalLines - displayLineCount} more lines</Text>}
+    </View>
+  );
+}
+
+/**
+ * Highlight full file content and return per-line highlighted strings.
+ * Highlights the whole file (not per-line) to preserve multi-line syntax context.
+ * Returns plain split lines if language is unsupported or highlight throws.
+ */
+export function highlightLines(content: string, filePath: string): string[] {
+  const language = getLanguageFromPath(filePath);
+  if (language && language !== "mermaid" && supportsLanguage(language)) {
+    try {
+      return highlight(content, { language }).split("\n");
+    } catch {}
+  }
+  return content.split("\n");
+}
+
+/**
+ * Condensed diff preview component
+ * Shows a limited number of changed lines with context
+ */
+export interface CondensedDiffPreviewProps {
+  originalContent: string;
+  newContent: string;
+  filePath?: string;
+  maxLines?: number;
+  dimmed?: boolean;
+}
+
+export function CondensedDiffPreview({
+  originalContent,
+  newContent,
+  filePath,
+  maxLines = 4,
+  dimmed = false,
+}: CondensedDiffPreviewProps) {
+  const { colors } = useTheme();
+
+  const { diffLines, addedCount, removedCount, highlightedOrigLines, highlightedNewLines } =
+    useMemo(() => {
+      const hlOrig = filePath ? highlightLines(originalContent, filePath) : null;
+      const hlNew = filePath ? highlightLines(newContent, filePath) : null;
+
+      const patch = structuredPatch(
+        "file",
+        "file",
+        originalContent,
+        newContent,
+        undefined,
+        undefined,
+        { context: 1 },
+      );
+      const lines: CondensedDiffLine[] = [];
+      let added = 0;
+      let removed = 0;
+
+      for (const hunk of patch.hunks) {
+        let oldLineNum = hunk.oldStart;
+        let newLineNum = hunk.newStart;
+
+        for (const line of hunk.lines) {
+          if (lines.length >= maxLines) break;
+
+          const prefix = line[0];
+          const content = line.slice(1);
+
+          if (prefix === "+") {
+            lines.push({ type: "added", content, lineNumber: newLineNum++ });
+            added++;
+          } else if (prefix === "-") {
+            lines.push({ type: "removed", content, lineNumber: oldLineNum++ });
+            removed++;
+          } else {
+            lines.push({ type: "unchanged", content, lineNumber: oldLineNum });
+            oldLineNum++;
+            newLineNum++;
+          }
+        }
+        if (lines.length >= maxLines) break;
+      }
+
+      return {
+        diffLines: lines.slice(0, maxLines),
+        addedCount: added,
+        removedCount: removed,
+        highlightedOrigLines: hlOrig,
+        highlightedNewLines: hlNew,
+      };
+    }, [originalContent, newContent, filePath, maxLines]);
+
+  if (diffLines.length === 0) {
+    return null;
+  }
+
+  const maxLineNumWidth = Math.max(...diffLines.map((l) => l.lineNumber)).toString().length;
+
+  // Build summary text
+  const summaryParts = [];
+  if (addedCount > 0) summaryParts.push(`+${addedCount}`);
+  if (removedCount > 0) summaryParts.push(`-${removedCount}`);
+  const summary = summaryParts.join(" ");
+
+  return (
+    <View flexDirection="column" paddingLeft={1}>
+      {summary && (
+        <View marginBottom={0}>
+          <Text dimColor>{summary} lines</Text>
+        </View>
+      )}
+      {diffLines.map((line, idx) => {
+        const paddedNum = String(line.lineNumber).padStart(maxLineNumWidth, " ");
+        // Pick syntax-highlighted content when available
+        const hlContent =
+          line.type === "removed"
+            ? (highlightedOrigLines?.[line.lineNumber - 1] ?? line.content)
+            : line.type === "added"
+              ? (highlightedNewLines?.[line.lineNumber - 1] ?? line.content)
+              : (highlightedOrigLines?.[line.lineNumber - 1] ?? line.content);
+
+        if (line.type === "removed") {
+          return (
+            <View key={idx} flexDirection="row" backgroundColor={colors.diffRemoved}>
+              <Text
+                backgroundColor={colors.diffRemoved}
+                color={colors.diffRemovedText}
+                dimColor={dimmed}
+              >
+                {paddedNum} -{" "}
+              </Text>
+              <View flexShrink={1}>
+                <Text
+                  backgroundColor={colors.diffRemoved}
+                  color={colors.diffRemovedText}
+                  dimColor={dimmed}
+                  wrap="wrap"
+                >
+                  {hlContent}
+                </Text>
+              </View>
+            </View>
+          );
+        }
+
+        if (line.type === "added") {
+          return (
+            <View key={idx} flexDirection="row" backgroundColor={colors.diffAdded}>
+              <Text
+                backgroundColor={colors.diffAdded}
+                color={colors.diffAddedText}
+                dimColor={dimmed}
+              >
+                {paddedNum} +{" "}
+              </Text>
+              <View flexShrink={1}>
+                <Text
+                  backgroundColor={colors.diffAdded}
+                  color={colors.diffAddedText}
+                  dimColor={dimmed}
+                  wrap="wrap"
+                >
+                  {hlContent}
+                </Text>
+              </View>
+            </View>
+          );
+        }
+
+        return (
+          <View key={idx} flexDirection="row">
+            <Text dimColor>{paddedNum} </Text>
+            <View flexShrink={1}>
+              <Text dimColor wrap="wrap">
+                {hlContent}
+              </Text>
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/tools/utils/zod-coercion.ts

@@ -0,0 +1,35 @@
+import { z } from "zod";
+
+function normalizeNumberInput(value: unknown): unknown {
+  if (typeof value !== "string") {
+    return value;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return Number.NaN;
+  }
+
+  return Number(trimmed);
+}
+
+function normalizeBooleanInput(value: unknown): unknown {
+  if (typeof value !== "string") {
+    return value;
+  }
+
+  const normalized = value.trim().toLowerCase();
+  if (["true", "1", "yes", "y"].includes(normalized)) {
+    return true;
+  }
+  if (["false", "0", "no", "n"].includes(normalized)) {
+    return false;
+  }
+
+  return value;
+}
+
+export const coerceNumber = z.preprocess(normalizeNumberInput, z.number());
+export const coerceOptionalNumber = z.preprocess(normalizeNumberInput, z.number().optional());
+export const coerceBoolean = z.preprocess(normalizeBooleanInput, z.boolean());
+export const coerceOptionalBoolean = z.preprocess(normalizeBooleanInput, z.boolean().optional());

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.test.json"
+    }
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/package.json": ["./package.json"]
+    }
+  }
+}