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

package/src/components/tools/shared/index.tsx

@@ -0,0 +1,48 @@
+// components/tools/shared/index.tsx
+// Re-exports all shared UI components and utilities for tools
+
+export {
+  formatBytes,
+  formatDuration,
+  truncatePath,
+  getStatusColor,
+  BlinkingDot,
+  ToolHeader,
+  ToolResult,
+  PreviewContent,
+  parseToolResult,
+  computeExpectedFinalContentForDiff,
+  wrapLine,
+  CodePreview,
+  CondensedDiffPreview,
+  PendingToolCallIdContext,
+} from "../../../tools/utils/tool-ui-components.js";
+
+export type {
+  ToolHeaderProps,
+  ToolResultProps,
+  PreviewContentProps,
+  CodePreviewProps,
+  CondensedDiffLine,
+  CondensedDiffPreviewProps,
+} from "../../../tools/utils/tool-ui-components.js";
+
+/**
+ * Convert snake_case keys to camelCase recursively
+ */
+export function snakeToCamel(obj: unknown): unknown {
+  if (obj === null || obj === undefined || typeof obj !== "object") {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => snakeToCamel(item));
+  }
+
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
+    const camelKey = key.replace(/_([a-z])/g, (_, letter: string) => letter.toUpperCase());
+    result[camelKey] = snakeToCamel(value);
+  }
+  return result;
+}

package/src/components/tools/shared/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/src/components/tools/terminal/bash-tool-output.tsx

@@ -0,0 +1,188 @@
+import type { RunInTerminalParsedData } from "@codellm/agent";
+
+import { View, Text, useFocus, useInput } from "@codellm/jar";
+import { useState, useEffect, useMemo, useDeferredValue } from "react";
+
+import { useAgent } from "../../../hooks/use-agent.js";
+import { AgentStatus } from "../../../providers/agent.js";
+import { ToolHeader, ToolResult, PreviewContent, formatDuration } from "../shared/index.js";
+
+const MAX_LINES_PREVIEW = 7;
+const MAX_LINES_EXPANDED = 100;
+
+interface BashToolOutputProps {
+  command: string;
+  toolCallId: string;
+  executionResult?: RunInTerminalParsedData;
+}
+
+interface TruncatedOutput {
+  lines: string[];
+  isTruncated: boolean;
+  hiddenCount: number;
+}
+
+function getTruncatedOutput(
+  output: string,
+  maxLines: number,
+  isExpanded: boolean,
+): TruncatedOutput {
+  const limit = isExpanded ? MAX_LINES_EXPANDED : maxLines;
+  const lines = output.split("\n").filter(Boolean);
+  if (lines.length <= limit) {
+    return { lines, isTruncated: false, hiddenCount: 0 };
+  }
+
+  return {
+    lines: lines.slice(0, limit),
+    isTruncated: true,
+    hiddenCount: lines.length - limit,
+  };
+}
+
+function formatElapsedTime(ms: number): string {
+  const seconds = ms / 1000;
+  return `${seconds.toFixed(1)}s`;
+}
+
+export function BashToolOutput({ command, toolCallId, executionResult }: BashToolOutputProps) {
+  const { agentStatus, activeToolOutputs } = useAgent();
+  const [startTime] = useState(Date.now());
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const isExecuting =
+    !executionResult &&
+    (agentStatus === AgentStatus.Streaming || agentStatus === AgentStatus.ExecutingTool);
+
+  const streamingOutput = activeToolOutputs[toolCallId] || "";
+  const finalOutput = executionResult?.output || "";
+  const currentOutput = isExecuting ? streamingOutput : finalOutput;
+
+  const deferredOutput = useDeferredValue(currentOutput);
+  const isProcessing = currentOutput !== deferredOutput;
+
+  useEffect(() => {
+    if (isExecuting) {
+      const interval = setInterval(() => {
+        setElapsedMs(Date.now() - startTime);
+      }, 1000);
+      return () => clearInterval(interval);
+    } else if (executionResult) {
+      setElapsedMs(executionResult.duration ?? 0);
+    }
+    return () => {};
+  }, [isExecuting, startTime, executionResult]);
+
+  const { lines, isTruncated, hiddenCount } = useMemo(
+    () => getTruncatedOutput(deferredOutput, MAX_LINES_PREVIEW, isExpanded),
+    [deferredOutput, isExpanded],
+  );
+
+  const canExpand = !isExecuting && executionResult !== undefined && (isTruncated || isExpanded);
+  const { isFocused } = useFocus({
+    id: `bash-tool-${toolCallId}`,
+    isActive: canExpand,
+  });
+
+  useInput(
+    (input, key) => {
+      if (isFocused && key.ctrl && input === "o") {
+        setIsExpanded((prev) => !prev);
+      }
+    },
+    { isActive: isFocused && canExpand },
+  );
+
+  const displayCommand = command;
+  const exitCode = executionResult?.exitCode ?? 0;
+  const isError = executionResult?.status === "error" || exitCode !== 0;
+  const headerStatus = isExecuting ? "pending" : isError ? "error" : "success";
+
+  if (isExecuting && lines.length === 0) {
+    return (
+      <View flexDirection="column" gap={0}>
+        <ToolHeader
+          name="Bash"
+          params={displayCommand}
+          paramsLanguage="bash"
+          status={headerStatus}
+          showSpinner
+        />
+        <ToolResult color="gray">Running…</ToolResult>
+      </View>
+    );
+  }
+
+  if (isExecuting && lines.length > 0) {
+    const elapsedText = elapsedMs > 0 ? ` (${formatElapsedTime(elapsedMs)})` : "";
+    return (
+      <View flexDirection="column" gap={0}>
+        <ToolHeader
+          name="Bash"
+          params={displayCommand}
+          paramsLanguage="bash"
+          status={headerStatus}
+          showSpinner
+        />
+        <PreviewContent>
+          {lines.map((line, idx) => (
+            <Text key={idx}>{line}</Text>
+          ))}
+          {isTruncated && (
+            <Text dimColor>
+              … +{hiddenCount} more line{hiddenCount !== 1 ? "s" : ""}
+              {elapsedText}
+            </Text>
+          )}
+          {isProcessing && <Text dimColor>Processing output...</Text>}
+        </PreviewContent>
+      </View>
+    );
+  }
+
+  if (executionResult) {
+    const isStaleResult = !finalOutput && (executionResult.duration ?? 0) === 0;
+    const duration = formatDuration(executionResult.duration ?? 0);
+    const resultText = isStaleResult ? `exit ${exitCode}` : `exit ${exitCode} (${duration})`;
+    const hasOutput = lines.length > 0;
+
+    return (
+      <View flexDirection="column" gap={0}>
+        <ToolHeader
+          name="Bash"
+          params={displayCommand}
+          paramsLanguage="bash"
+          status={headerStatus}
+        />
+        {hasOutput && (
+          <PreviewContent>
+            {isError && (
+              <Text color="red" dimColor>
+                Error:
+              </Text>
+            )}
+            {lines.map((line, idx) => (
+              <Text key={idx} color={isError ? "red" : undefined} dimColor>
+                {line}
+              </Text>
+            ))}
+            {isTruncated && (
+              <Text dimColor>
+                … +{hiddenCount} {isExpanded ? "more " : ""}line{hiddenCount !== 1 ? "s" : ""}
+                {!isExpanded ? " (ctrl+o to expand)" : ""}
+              </Text>
+            )}
+          </PreviewContent>
+        )}
+        <ToolResult color={isError ? "red" : "gray"}>{resultText}</ToolResult>
+      </View>
+    );
+  }
+
+  return (
+    <View flexDirection="column">
+      <ToolHeader name="Bash" params={displayCommand} paramsLanguage="bash" status="pending" />
+    </View>
+  );
+}

package/src/components/tools/terminal/get-terminal-output.tsx

@@ -0,0 +1,91 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import React from "react";
+import { z } from "zod";
+
+import type { ToolDef, ToolStatus } from "../types.js";
+
+import { ToolHeader, ToolResult } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+
+const GetTerminalOutputParams = z.object({
+  id: z.string(),
+});
+
+export const getTerminalOutputTool: ToolDef = {
+  displayName: "TerminalOutput",
+
+  getHeaderParams(input: Record<string, unknown>): string {
+    try {
+      return `id: ${input?.id || ""}`;
+    } catch {
+      return "[unknown]";
+    }
+  },
+
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const parseResult = GetTerminalOutputParams.safeParse(snakeToCamel(rawInput));
+    if (!parseResult.success) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="TerminalOutput" params="" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    }
+    const params = parseResult.data;
+    const terminalIdParam = `id: ${params.id}`;
+
+    if (status === "interrupted") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="TerminalOutput" params={terminalIdParam} status="interrupted" />
+          <ToolResult color="yellow">Interrupted · What should I do instead?</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "rejected") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="TerminalOutput" params={terminalIdParam} status="rejected" />
+          {parsedResult?.userNote ? (
+            <ToolResult color="yellow">
+              Rejected · <Text italic>"{parsedResult.userNote}"</Text>
+            </ToolResult>
+          ) : (
+            <ToolResult color="yellow">Rejected</ToolResult>
+          )}
+        </View>
+      );
+    }
+
+    const isExecuting = !parsedResult && (status === "executing" || status === "pending");
+
+    if (isExecuting) {
+      return (
+        <ToolHeader name="TerminalOutput" params={terminalIdParam} status="pending" showSpinner />
+      );
+    }
+
+    if (!parsedResult) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="TerminalOutput" params={terminalIdParam} status="pending" />
+        </View>
+      );
+    }
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="TerminalOutput" params={terminalIdParam} status="success" />
+        <ToolResult>{parsedResult.summary}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/terminal/run-in-terminal.tsx

@@ -0,0 +1,131 @@
+import type { ParsedToolResult, RunInTerminalParsedData } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import React from "react";
+import { z } from "zod";
+
+import type { ToolDef, ToolStatus } from "../types.js";
+
+import { ToolHeader, ToolResult, snakeToCamel } from "../shared/index.js";
+import { coerceOptionalBoolean } from "../shared/zod-coercion.js";
+import { BashToolOutput } from "./bash-tool-output.js";
+
+const RunInTerminalParams = z.object({
+  command: z.string(),
+  explanation: z.string().optional(),
+  isBackground: coerceOptionalBoolean,
+  id: z.string().optional(),
+  interactiveMode: coerceOptionalBoolean,
+  timeout: z.coerce.number().optional(),
+});
+
+function RunInTerminalUI({
+  rawInput,
+  status,
+  parsedResult,
+}: {
+  rawInput: Record<string, unknown>;
+  status: ToolStatus;
+  parsedResult?: ParsedToolResult<RunInTerminalParsedData>;
+}) {
+  const parseResult = RunInTerminalParams.safeParse(snakeToCamel(rawInput));
+  if (!parseResult.success) {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Bash" params="" paramsLanguage="bash" status="error" />
+        <ToolResult color="red">Invalid params</ToolResult>
+      </View>
+    );
+  }
+  const params = parseResult.data;
+  const command = params.command || "";
+  const timeoutLabel = params.timeout ? ` (timeout: ${(params.timeout / 1000).toFixed(0)}s)` : "";
+
+  if (status === "interrupted") {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Bash" params={command} paramsLanguage="bash" status="interrupted" />
+        <ToolResult color="yellow">Interrupted · What should I do instead?</ToolResult>
+      </View>
+    );
+  }
+
+  if (status === "rejected") {
+    if (parsedResult?.userNote) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Bash" params={command} paramsLanguage="bash" status="rejected" />
+          <ToolResult color="yellow">
+            Rejected · <Text italic>"{parsedResult.userNote}"</Text>
+          </ToolResult>
+        </View>
+      );
+    }
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Bash" params={command} paramsLanguage="bash" status="rejected" />
+        <ToolResult color="yellow">Rejected</ToolResult>
+      </View>
+    );
+  }
+
+  if (parsedResult?.data?.timedOut) {
+    return (
+      <View flexDirection="column">
+        <ToolHeader
+          name="Bash"
+          params={`${command}${timeoutLabel}`}
+          paramsLanguage="bash"
+          status="success"
+        />
+        <ToolResult>Running in the background</ToolResult>
+      </View>
+    );
+  }
+
+  if (parsedResult?.isBackground) {
+    return (
+      <View flexDirection="column">
+        <ToolHeader
+          name="Bash"
+          params={`${command}${timeoutLabel}`}
+          paramsLanguage="bash"
+          status="success"
+        />
+        <ToolResult>{parsedResult.summary}</ToolResult>
+      </View>
+    );
+  }
+
+  // We need toolCallId here; use a best-effort id from rawInput
+  const toolCallId = (rawInput?.id as string) || "unknown";
+  const executionResult = parsedResult?.data;
+
+  return (
+    <BashToolOutput
+      command={`${command}${timeoutLabel}`}
+      toolCallId={toolCallId}
+      executionResult={executionResult}
+    />
+  );
+}
+
+export const runInTerminalTool: ToolDef<RunInTerminalParsedData> = {
+  displayName: "Bash",
+
+  getHeaderParams(input: Record<string, unknown>): string {
+    try {
+      return (input?.command || "[no command]") as string;
+    } catch {
+      return "[unknown]";
+    }
+  },
+
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult,
+  ): React.ReactElement {
+    return <RunInTerminalUI rawInput={rawInput} status={status} parsedResult={parsedResult} />;
+  },
+};

package/src/components/tools/types.ts

@@ -0,0 +1,16 @@
+// components/tools/types.ts
+import type { ParsedToolResult, ToolDisplayData } from "@codellm/agent";
+import type { ReactElement } from "react";
+
+export type ToolStatus = "pending" | "executing" | "success" | "error" | "rejected" | "interrupted";
+
+export interface ToolDef<TData = Record<string, unknown>> {
+  displayName: string;
+  getHeaderParams(input: Record<string, unknown>): string;
+  renderUI(
+    input: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult<TData>,
+    displayData?: ToolDisplayData,
+  ): ReactElement;
+}

package/src/components/tools.tsx

@@ -0,0 +1,68 @@
+import type { ParsedToolResult, ToolDisplayData } from "@codellm/agent";
+import type { ToolUseRequest, ToolUseResult } from "@codellm/api";
+
+import { View, Text } from "@codellm/jar";
+
+import { toolMap } from "./tools/index.js";
+import { ToolHeader, ToolResult } from "./tools/shared/index.js";
+
+type ToolProps<T extends ToolUseRequest> = T & {
+  result?: ToolUseResult;
+  displayData?: ToolDisplayData;
+  parsedResult?: ParsedToolResult;
+};
+
+/**
+ * Generic Tool component that uses the new toolMap.
+ * Prefers parsedResult.data (from SDK parse()) over re-parsing toolUseResult.content.
+ */
+export function Tool(tool: ToolProps<ToolUseRequest>) {
+  const def = toolMap[tool.name];
+
+  if (!def) {
+    return (
+      <View flexDirection="column">
+        <Text color="red">Unknown tool: {tool.name}</Text>
+      </View>
+    );
+  }
+
+  let status: import("./tools/types.js").ToolStatus;
+  if (tool.result?.rejected) {
+    const parsed = (() => {
+      try {
+        return JSON.parse(tool.result.content) as { reason?: string };
+      } catch {
+        return {};
+      }
+    })();
+    status = parsed.reason === "interrupted" ? "interrupted" : "rejected";
+  } else if (tool.result) {
+    status = "success";
+  } else if (tool.parsedResult?.phase === "error") {
+    status = "error";
+  } else {
+    status = "executing";
+  }
+  const input = (tool.input ?? {}) as Record<string, unknown>;
+
+  let headerParams = "";
+  try {
+    headerParams = def.getHeaderParams(input);
+  } catch {
+    // ignore
+  }
+
+  try {
+    return def.renderUI(input, status, tool.parsedResult, tool.displayData);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.error(`Error rendering tool ${tool.name}:`, errorMessage);
+    return (
+      <View flexDirection="column">
+        <ToolHeader name={def.displayName} params={headerParams} status="error" />
+        <ToolResult color="red">Error rendering tool</ToolResult>
+      </View>
+    );
+  }
+}

package/src/components/ui/__tests__/divider.test.tsx

@@ -0,0 +1,61 @@
+import { Text } from "@codellm/jar";
+import { describe, expect, it } from "vitest";
+
+import { stripAnsi } from "../../../lib/ansi.js";
+import { render, logInk } from "../../../lib/test-utils.js";
+import { Divider } from "../divider.js";
+
+describe.concurrent("Divider", () => {
+  it("should render a basic divider", () => {
+    const instance = render(<Divider />);
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(typeof output).toBe("string");
+    // The divider should contain the default divider character
+    expect(output).toContain("─");
+  });
+
+  it("should render divider with custom character", () => {
+    const instance = render(<Divider dividerChar="=" />);
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(output).toContain("=");
+  });
+
+  it("should render divider with children", () => {
+    const instance = render(
+      <Divider>
+        <Text>Title</Text>
+      </Divider>,
+    );
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    expect(output).toContain("Title");
+    // Should still have divider characters
+    expect(output).toContain("─");
+  });
+
+  it("should render divider with padding", () => {
+    const instance = render(<Divider padding={2} />);
+
+    logInk(instance);
+
+    const output = stripAnsi(instance.frames.join(""));
+
+    expect(output).toBeDefined();
+    // Padding should add spaces
+    expect(output).toContain("─");
+  });
+});