@abacus-ai/cli 1.106.25007 → 2.0.0-canary.0

package/src/components/tools/ide/ide-diagnostics.tsx

@@ -0,0 +1,62 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View } 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";
+
+const IdeDiagnosticsParams = z.object({
+  uri: z.string().optional(),
+});
+
+export const ideDiagnosticsTool: ToolDef = {
+  displayName: "GetDiagnostics",
+  getHeaderParams(input: Record<string, unknown>): string {
+    const uri = input?.uri as string | undefined;
+    return uri ? `for ${uri}` : "for all files";
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = IdeDiagnosticsParams.safeParse(snakeToCamel(rawInput));
+    const uri = pr.success ? pr.data.uri : undefined;
+    const displayParams = uri ? `for ${uri}` : "for all files";
+
+    const isExecuting = !parsedResult && (status === "executing" || status === "pending");
+
+    if (isExecuting) {
+      return (
+        <ToolHeader name="GetDiagnostics" params={displayParams} status="pending" showSpinner />
+      );
+    }
+
+    if (status === "error") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="GetDiagnostics" params={displayParams} status="error" />
+          <ToolResult color="red">Error getting diagnostics</ToolResult>
+        </View>
+      );
+    }
+
+    if (!parsedResult) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="GetDiagnostics" params={displayParams} status="pending" />
+        </View>
+      );
+    }
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="GetDiagnostics" params={displayParams} status="success" />
+        <ToolResult>{parsedResult.summary}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/index.ts

@@ -0,0 +1,91 @@
+import type { ToolDef } from "./types.js";
+
+// Agent tools
+import { askUserQuestionTool } from "./agent/ask-user-question.js";
+import { enterPlanModeTool } from "./agent/enter-plan-mode.js";
+import { exitPlanModeTool } from "./agent/exit-plan-mode.js";
+import { handOffToMainTool } from "./agent/handoff-to-main.js";
+import { subagentTool } from "./agent/subagent.js";
+import { todoWriteTool } from "./agent/todo-write.js";
+import { closeTabTool } from "./browser/close-tab.js";
+import { computerTool } from "./browser/computer.js";
+import { getInteractiveElementsTool } from "./browser/get-interactive-elements.js";
+import { getTabContentTool } from "./browser/get-tab-content.js";
+// Browser tools
+import { navigateToTool } from "./browser/navigate-to.js";
+import { newTabTool } from "./browser/new-tab.js";
+import { performActionTool } from "./browser/perform-action.js";
+import { refreshTabTool } from "./browser/refresh-tab.js";
+import { switchTabTool } from "./browser/switch-tab.js";
+import { deleteFileTool } from "./filesystem/delete-file.js";
+import { editTool } from "./filesystem/edit.js";
+import { listDirTool } from "./filesystem/list-dir.js";
+// Filesystem tools
+import { readFileTool } from "./filesystem/read-file.js";
+import { uploadImageTool } from "./filesystem/upload-image.js";
+// IDE tools
+import { ideDiagnosticsTool } from "./ide/ide-diagnostics.js";
+import { createMcpToolDef } from "./mcp/mcp-tool.js";
+import { fetchUrlTool } from "./search/fetch-url.js";
+import { fileSearchTool } from "./search/file-search.js";
+// Search tools
+import { grepTool } from "./search/grep.js";
+import { semanticSearchTool } from "./search/semantic-search.js";
+import { webSearchTool } from "./search/web-search.js";
+import { getTerminalOutputTool } from "./terminal/get-terminal-output.js";
+// Terminal tools
+import { runInTerminalTool } from "./terminal/run-in-terminal.js";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const toolMap: Record<string, ToolDef<any>> = {
+  // Filesystem
+  read_file: readFileTool,
+  edit: editTool,
+  list_dir: listDirTool,
+  delete_file: deleteFileTool,
+  upload_image: uploadImageTool,
+
+  // Search
+  grep: grepTool,
+  file_search: fileSearchTool,
+  semantic_search_server: semanticSearchTool,
+  web_search: webSearchTool,
+  fetch_url: fetchUrlTool,
+
+  // Terminal
+  run_in_terminal: runInTerminalTool,
+  get_terminal_output: getTerminalOutputTool,
+
+  // Browser
+  navigate_to: navigateToTool,
+  new_tab: newTabTool,
+  close_tab: closeTabTool,
+  switch_active_tab: switchTabTool,
+  refresh_tab: refreshTabTool,
+  get_tab_content: getTabContentTool,
+  computer: computerTool,
+  get_interactive_elements: getInteractiveElementsTool,
+  perform_interactive_element_action: performActionTool,
+
+  // Agent
+  ask_user_question: askUserQuestionTool,
+  enter_plan_mode: enterPlanModeTool,
+  exit_plan_mode: exitPlanModeTool,
+  subagent: subagentTool,
+  hand_off_to_main: handOffToMainTool,
+  todo_write: todoWriteTool,
+
+  // IDE
+  get_diagnostics: ideDiagnosticsTool,
+};
+
+/**
+ * Register a dynamically-discovered MCP tool by name.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function registerMCPTool(name: string, def?: ToolDef<any>): void {
+  toolMap[name] = def ?? createMcpToolDef(name);
+}
+
+export type { ToolDef } from "./types.js";
+export type { ToolStatus } from "./types.js";

package/src/components/tools/mcp/mcp-tool.tsx

@@ -0,0 +1,158 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import React from "react";
+
+import type { ToolDef, ToolStatus } from "../types.js";
+
+import { useAgent } from "../../../hooks/use-agent.js";
+import { AgentStatus } from "../../../providers/agent.js";
+import { ToolHeader, ToolResult } from "../shared/index.js";
+
+function snakeToPascalCase(str: string): string {
+  return str
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+}
+
+function MCPToolUI({
+  toolName,
+  rawInput,
+  status,
+  parsedResult,
+}: {
+  toolName: string;
+  rawInput: Record<string, unknown>;
+  status: ToolStatus;
+  parsedResult?: ParsedToolResult;
+}) {
+  const { agentStatus } = useAgent();
+  const displayName = snakeToPascalCase(toolName);
+
+  if (status === "interrupted") {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name={displayName} 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={displayName} status="rejected" />
+          <ToolResult color="yellow">
+            Rejected · <Text italic>"{parsedResult.userNote}"</Text>
+          </ToolResult>
+        </View>
+      );
+    }
+    return (
+      <View flexDirection="column">
+        <ToolHeader name={displayName} status="rejected" />
+        <ToolResult color="yellow">Rejected</ToolResult>
+      </View>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name={displayName} status="error" />
+        <ToolResult color="red">
+          {parsedResult?.errorMessage ?? parsedResult?.summary ?? "MCP tool execution failed"}
+        </ToolResult>
+      </View>
+    );
+  }
+
+  const isWaitingForPermission =
+    agentStatus === AgentStatus.WaitingForToolPermission && !parsedResult;
+  const isExecuting =
+    !parsedResult &&
+    (agentStatus === AgentStatus.Streaming || agentStatus === AgentStatus.ExecutingTool);
+  const isError = parsedResult?.phase === "error";
+
+  if (isWaitingForPermission) {
+    return (
+      <View flexDirection="row" gap={1}>
+        <Text color="yellow">●</Text>
+        <Text color="cyan">{displayName}</Text>
+      </View>
+    );
+  }
+
+  if (isExecuting) {
+    return <ToolHeader name={displayName} status="pending" showSpinner />;
+  }
+
+  if (parsedResult) {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name={displayName} status={isError ? "error" : "success"} />
+        <ToolResult color={isError ? "red" : "gray"}>
+          {isError
+            ? `Error: ${parsedResult.errorMessage ?? parsedResult.summary ?? "Tool execution failed"}`
+            : (parsedResult.summary ?? "Executed successfully")}
+        </ToolResult>
+      </View>
+    );
+  }
+
+  return (
+    <View flexDirection="column">
+      <ToolHeader name={displayName} status="pending" />
+    </View>
+  );
+}
+
+/**
+ * Create a ToolDef for a dynamically-registered MCP tool.
+ */
+export function createMcpToolDef(toolName: string): ToolDef {
+  return {
+    displayName: snakeToPascalCase(toolName),
+    getHeaderParams(_input: Record<string, unknown>): string {
+      return "";
+    },
+    renderUI(
+      rawInput: Record<string, unknown>,
+      status: ToolStatus,
+      parsedResult?: ParsedToolResult,
+    ): React.ReactElement {
+      return (
+        <MCPToolUI
+          toolName={toolName}
+          rawInput={rawInput}
+          status={status}
+          parsedResult={parsedResult}
+        />
+      );
+    },
+  };
+}
+
+/** Default MCP ToolDef used when no specific MCP tool is registered */
+export const defaultMcpTool: ToolDef = {
+  displayName: "MCPTool",
+  getHeaderParams(_input: Record<string, unknown>): string {
+    return "";
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    return (
+      <MCPToolUI
+        toolName="mcp_tool"
+        rawInput={rawInput}
+        status={status}
+        parsedResult={parsedResult}
+      />
+    );
+  },
+};

package/src/components/tools/search/fetch-url.tsx

@@ -0,0 +1,73 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View } 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";
+
+const fetchUrlSchema = z.object({
+  url: z.string(),
+});
+
+export const fetchUrlTool: ToolDef = {
+  displayName: "Fetch",
+
+  getHeaderParams(input: Record<string, unknown>): string {
+    try {
+      const url = (input?.url || "") as string;
+      return url.length > 50 ? url.substring(0, 47) + "..." : url;
+    } catch {
+      return "[unknown]";
+    }
+  },
+
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const parseResult = fetchUrlSchema.safeParse(snakeToCamel(rawInput));
+    if (!parseResult.success) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Fetch" params="" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    }
+    const params = parseResult.data;
+    const url = params.url || "";
+    const truncatedUrl = url.length > 50 ? url.substring(0, 47) + "..." : url;
+
+    if (status === "error") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Fetch" params={truncatedUrl} status="error" />
+          <ToolResult color="red">Error fetching URL</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "executing") {
+      return <ToolHeader name="Fetch" params={truncatedUrl} status="executing" showSpinner />;
+    }
+
+    if (!parsedResult) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Fetch" params={truncatedUrl} status="pending" />
+        </View>
+      );
+    }
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Fetch" params={truncatedUrl} status="success" />
+        <ToolResult>{parsedResult.summary ?? "Fetched content"}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/search/file-search.tsx

@@ -0,0 +1,78 @@
+import type { FileSearchParsedData } from "@codellm/agent";
+
+import { View } 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";
+
+const fileSearchSchema = z.object({
+  query: z.string(),
+  includePattern: z.string().optional(),
+  excludePattern: z.string().optional(),
+  explanation: z.string().optional(),
+});
+
+export const fileSearchTool: ToolDef<FileSearchParsedData> = {
+  displayName: "FileSearch",
+
+  getHeaderParams(input: Record<string, unknown>): string {
+    try {
+      const query = (input?.query || "[no pattern]") as string;
+      return `pattern: "${query}"`;
+    } catch {
+      return "[unknown]";
+    }
+  },
+
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult,
+  ): React.ReactElement {
+    const parseResult = fileSearchSchema.safeParse(snakeToCamel(rawInput));
+    if (!parseResult.success) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Search" params="" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    }
+    const params = parseResult.data;
+    const paramParts: string[] = [`pattern: "${params.query}"`];
+    if (params.includePattern) paramParts.push(`path: "${params.includePattern}"`);
+    if (params.excludePattern) paramParts.push(`exclude: "${params.excludePattern}"`);
+    const searchParams = paramParts.join(", ");
+
+    if (status === "error") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Search" params={searchParams} status="error" />
+          <ToolResult color="red">Error searching files</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "executing") {
+      return <ToolHeader name="Search" params={searchParams} status="executing" showSpinner />;
+    }
+
+    if (!parsedResult) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Search" params={searchParams} status="pending" />
+        </View>
+      );
+    }
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Search" params={searchParams} status="success" />
+        <ToolResult>{parsedResult.summary}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/search/grep.tsx

@@ -0,0 +1,90 @@
+import type { GrepParsedData } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import React from "react";
+
+import type { ToolDef, ToolStatus } from "../types.js";
+
+import { ToolHeader, ToolResult, PreviewContent } from "../shared/index.js";
+
+function buildSearchParams(input: Record<string, unknown>): string {
+  const paramParts: string[] = [];
+  const pattern = input?.pattern;
+  if (pattern) paramParts.push(`pattern: "${pattern}"`);
+  const path = input?.path;
+  if (path) paramParts.push(`path: "${path}"`);
+  const outputMode = input?.outputMode || input?.output_mode;
+  if (outputMode) paramParts.push(`outputMode: "${outputMode}"`);
+  const glob = input?.glob;
+  if (glob) paramParts.push(`glob: "${glob}"`);
+  const caseInsensitive = input?.["-i"];
+  if (caseInsensitive) paramParts.push("case-insensitive");
+  return paramParts.length > 0 ? paramParts.join(", ") : "[no pattern]";
+}
+
+export const grepTool: ToolDef<GrepParsedData> = {
+  displayName: "Search",
+
+  getHeaderParams(input: Record<string, unknown>): string {
+    try {
+      return buildSearchParams(input);
+    } catch {
+      return "[unknown]";
+    }
+  },
+
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult,
+  ): React.ReactElement {
+    const searchParams = buildSearchParams(rawInput);
+
+    if (status === "error") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Search" params={searchParams} status="error" />
+          <ToolResult color="red">Error searching content</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "executing") {
+      return <ToolHeader name="Search" params={searchParams} status="executing" showSpinner />;
+    }
+
+    if (!parsedResult) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Search" params={searchParams} status="pending" />
+        </View>
+      );
+    }
+
+    const matchesArray = parsedResult.data.matches ?? [];
+    const MAX_DISPLAY = 10;
+    const displayMatches = matchesArray.slice(0, MAX_DISPLAY);
+    const hiddenCount = matchesArray.length - displayMatches.length;
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Search" params={searchParams} status="success" />
+        <ToolResult>{parsedResult.summary}</ToolResult>
+        {matchesArray.length > 0 && (
+          <PreviewContent>
+            {displayMatches.map((match, idx) => (
+              <Text key={idx} dimColor>
+                {match}
+              </Text>
+            ))}
+            {hiddenCount > 0 && (
+              <Text dimColor>
+                … +{hiddenCount} more match{hiddenCount !== 1 ? "es" : ""}
+              </Text>
+            )}
+          </PreviewContent>
+        )}
+      </View>
+    );
+  },
+};

package/src/components/tools/search/semantic-search.tsx

@@ -0,0 +1,66 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View } 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";
+
+const semanticSearchSchema = z.object({
+  query: z.string(),
+  command: z.string().optional(),
+  explanation: z.string().optional(),
+});
+
+export const semanticSearchTool: ToolDef = {
+  displayName: "Search",
+
+  getHeaderParams(input: Record<string, unknown>): string {
+    try {
+      const query = (input?.query || "") as string;
+      return `"${query}"`;
+    } catch {
+      return "[unknown]";
+    }
+  },
+
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    _parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const parseResult = semanticSearchSchema.safeParse(snakeToCamel(rawInput));
+    if (!parseResult.success) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Search" params="" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    }
+    const params = parseResult.data;
+    const searchParams = `"${params.query}"`;
+
+    if (status === "error") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Search" params={searchParams} status="error" />
+          <ToolResult color="red">Error performing semantic search</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "executing") {
+      return <ToolHeader name="Search" params={searchParams} status="executing" showSpinner />;
+    }
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Search" params={searchParams} status="success" />
+        <ToolResult>Completed</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/search/web-search.tsx

@@ -0,0 +1,71 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View } 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";
+
+const webSearchSchema = z.object({
+  searchTerm: z.string(),
+  query: z.string().optional(),
+  explanation: z.string().optional(),
+});
+
+export const webSearchTool: ToolDef = {
+  displayName: "WebSearch",
+
+  getHeaderParams(input: Record<string, unknown>): string {
+    try {
+      const searchTerm = (input?.searchTerm ||
+        input?.search_term ||
+        input?.query ||
+        "[no query]") as string;
+      return `"${searchTerm}"`;
+    } catch {
+      return "[unknown]";
+    }
+  },
+
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    _parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const parseResult = webSearchSchema.safeParse(snakeToCamel(rawInput));
+    if (!parseResult.success) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="WebSearch" params="" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    }
+    const params = parseResult.data;
+    const searchTerm = params.searchTerm || params.query || "";
+    const truncatedTerm = searchTerm.length > 40 ? searchTerm.substring(0, 37) + "..." : searchTerm;
+    const searchParams = `"${truncatedTerm}"`;
+
+    if (status === "error") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="WebSearch" params={searchParams} status="error" />
+          <ToolResult color="red">Error performing web search</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "executing") {
+      return <ToolHeader name="WebSearch" params={searchParams} status="executing" showSpinner />;
+    }
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="WebSearch" params={searchParams} status="success" />
+        <ToolResult>Found results</ToolResult>
+      </View>
+    );
+  },
+};