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

package/src/components/tools/agent/todo-write.tsx

@@ -0,0 +1,104 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import React, { useCallback } from "react";
+import { z } from "zod";
+
+import type { ToolDef, ToolStatus } from "../types.js";
+
+import { ToolHeader, ToolResult, PreviewContent } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+
+const TodoWriteParams = z.object({
+  todos: z.preprocess(
+    (val) => {
+      if (val === undefined || val === null) return [];
+      if (typeof val === "string") {
+        try {
+          const parsed = JSON.parse(val);
+          return Array.isArray(parsed) ? parsed : [];
+        } catch {
+          return [];
+        }
+      }
+      if (Array.isArray(val)) return val;
+      return [];
+    },
+    z.array(
+      z.object({
+        content: z.string(),
+        status: z.enum(["pending", "in_progress", "completed", "cancelled"]),
+        id: z.string().optional(),
+      }),
+    ),
+  ),
+});
+
+function TodoWriteUI({
+  rawInput,
+  parsedResult,
+}: {
+  rawInput: Record<string, unknown>;
+  parsedResult?: ParsedToolResult;
+}) {
+  const pr = TodoWriteParams.safeParse(snakeToCamel(rawInput));
+  const todos = pr.success ? pr.data.todos : [];
+
+  const getStatusIcon = useCallback((status: string) => {
+    switch (status) {
+      case "completed":
+        return "[x]";
+      case "in_progress":
+        return "[>]";
+      default:
+        return "[ ]";
+    }
+  }, []);
+
+  const getStatusColor = useCallback((status: string) => {
+    switch (status) {
+      case "completed":
+        return "green";
+      case "in_progress":
+        return "blue";
+      default:
+        return "gray";
+    }
+  }, []);
+
+  return (
+    <View flexDirection="column" gap={0}>
+      <ToolHeader name="TodoWrite" status="success" />
+      {parsedResult?.summary && <ToolResult>{parsedResult.summary}</ToolResult>}
+      {todos.length > 0 && (
+        <PreviewContent>
+          {todos.map((todo, index) => (
+            <View key={index} flexDirection="row" alignItems="center" gap={1}>
+              <Text color={getStatusColor(todo.status)}>{getStatusIcon(todo.status)}</Text>
+              <Text
+                color={todo.status === "completed" ? "gray" : undefined}
+                dimColor={todo.status === "completed"}
+              >
+                {todo.content}
+              </Text>
+            </View>
+          ))}
+        </PreviewContent>
+      )}
+    </View>
+  );
+}
+
+export const todoWriteTool: ToolDef = {
+  displayName: "TodoWrite",
+  getHeaderParams(_input: Record<string, unknown>): string {
+    return "";
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    _status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    return <TodoWriteUI rawInput={rawInput} parsedResult={parsedResult} />;
+  },
+};

package/src/components/tools/browser/close-tab.tsx

@@ -0,0 +1,58 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+import { coerceNumber } from "../shared/zod-coercion.js";
+
+const CloseTabParams = z.object({ id: coerceNumber });
+
+export const closeTabTool: ToolDef = {
+  displayName: "CloseTab",
+  getHeaderParams(input: Record<string, unknown>): string {
+    return `id: ${input?.id ?? ""}`;
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = CloseTabParams.safeParse(snakeToCamel(rawInput));
+    if (!pr.success)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="CloseTab" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    const tabId = pr.data.id;
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return <ToolHeader name="CloseTab" params={`id: ${tabId}`} status="pending" showSpinner />;
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="CloseTab" params={`id: ${tabId}`} status="pending" />
+        </View>
+      );
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="CloseTab" params={`id: ${tabId}`} status="error" />
+          <ToolResult color="red">Error closing tab</ToolResult>
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="CloseTab" params={`id: ${tabId}`} status="success" />
+        <ToolResult>Closed</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/computer.tsx

@@ -0,0 +1,70 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+import { coerceNumber, coerceOptionalNumber } from "../shared/zod-coercion.js";
+
+const ComputerParams = z.object({
+  action: z.enum([
+    "key",
+    "type",
+    "mouse_move",
+    "left_click",
+    "left_click_drag",
+    "right_click",
+    "middle_click",
+    "double_click",
+    "screenshot",
+    "cursor_position",
+  ]),
+  coordinate: z.tuple([coerceNumber, coerceNumber]).optional(),
+  startCoordinate: z.tuple([coerceNumber, coerceNumber]).optional(),
+  duration: coerceOptionalNumber,
+  text: z.string().optional(),
+  scrollAmount: coerceOptionalNumber,
+  scrollDirection: z.enum(["up", "down", "left", "right"]).optional(),
+});
+
+export const computerTool: ToolDef = {
+  displayName: "Computer",
+  getHeaderParams(input: Record<string, unknown>): string {
+    return (input?.action || "action") as string;
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = ComputerParams.safeParse(snakeToCamel(rawInput));
+    const action = (pr.success ? pr.data.action : rawInput?.action || "action") as string;
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return <ToolHeader name="Computer" params={action} status="executing" showSpinner />;
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Computer" params={action} status="error" />
+          <ToolResult color="red">Error performing computer action</ToolResult>
+        </View>
+      );
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Computer" params={action} status="pending" />
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Computer" params={action} status="success" />
+        <ToolResult>Performed {action}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/get-interactive-elements.tsx

@@ -0,0 +1,54 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+import { coerceOptionalNumber } from "../shared/zod-coercion.js";
+
+const GetInteractiveElementsParams = z.object({ id: coerceOptionalNumber });
+
+export const getInteractiveElementsTool: ToolDef = {
+  displayName: "GetElements",
+  getHeaderParams(input: Record<string, unknown>): string {
+    return input?.id !== undefined ? `id: ${input.id}` : "";
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = GetInteractiveElementsParams.safeParse(snakeToCamel(rawInput));
+    const displayParams = pr.success && pr.data.id !== undefined ? `id: ${pr.data.id}` : undefined;
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return (
+        <ToolHeader name="GetElements" params={displayParams} status="executing" showSpinner />
+      );
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="GetElements" params={displayParams} status="error" />
+          <ToolResult color="red">Error: Failed to get interactive elements</ToolResult>
+        </View>
+      );
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="GetElements" params={displayParams} status="pending" />
+        </View>
+      );
+
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="GetElements" params={displayParams} status="success" />
+        <ToolResult>{parsedResult.summary ?? "Found elements"}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/get-tab-content.tsx

@@ -0,0 +1,51 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+import { coerceOptionalNumber } from "../shared/zod-coercion.js";
+
+const GetTabContentParams = z.object({ id: coerceOptionalNumber });
+
+export const getTabContentTool: ToolDef = {
+  displayName: "GetContent",
+  getHeaderParams(input: Record<string, unknown>): string {
+    return input?.id !== undefined ? `id: ${input.id}` : "";
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = GetTabContentParams.safeParse(snakeToCamel(rawInput));
+    const displayParams = pr.success && pr.data.id !== undefined ? `id: ${pr.data.id}` : undefined;
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return <ToolHeader name="GetContent" params={displayParams} status="executing" showSpinner />;
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="GetContent" params={displayParams} status="error" />
+          <ToolResult color="red">Error: Failed to get tab content</ToolResult>
+        </View>
+      );
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="GetContent" params={displayParams} status="pending" />
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="GetContent" params={displayParams} status="success" />
+        <ToolResult>{parsedResult.summary ?? "Got content"}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/navigate-to.tsx

@@ -0,0 +1,59 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+
+const NavigateToParams = z.object({ url: z.string() });
+
+export const navigateToTool: ToolDef = {
+  displayName: "Navigate",
+  getHeaderParams(input: Record<string, unknown>): string {
+    const url = (input?.url || "") as string;
+    return url.length > 50 ? url.substring(0, 47) + "..." : url;
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = NavigateToParams.safeParse(snakeToCamel(rawInput));
+    if (!pr.success)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Navigate" params="" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    const url = pr.data.url || "";
+    const truncatedUrl = url.length > 50 ? url.substring(0, 47) + "..." : url;
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return <ToolHeader name="Navigate" params={truncatedUrl} status="executing" showSpinner />;
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Navigate" params={truncatedUrl} status="error" />
+          <ToolResult color="red">Error navigating to URL</ToolResult>
+        </View>
+      );
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Navigate" params={truncatedUrl} status="pending" />
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Navigate" params={truncatedUrl} status="success" />
+        <ToolResult>Navigated</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/new-tab.tsx

@@ -0,0 +1,60 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+
+const NewTabParams = z.object({ url: z.string().optional() });
+
+export const newTabTool: ToolDef = {
+  displayName: "NewTab",
+  getHeaderParams(input: Record<string, unknown>): string {
+    const url = (input?.url || "") as string;
+    return url.length > 40 ? url.substring(0, 37) + "..." : url;
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = NewTabParams.safeParse(snakeToCamel(rawInput));
+    if (!pr.success)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="NewTab" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    const url = pr.data.url || "";
+    const truncatedUrl = url.length > 40 ? url.substring(0, 37) + "..." : url;
+    const displayParam = truncatedUrl || undefined;
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return <ToolHeader name="NewTab" params={displayParam} status="executing" showSpinner />;
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="NewTab" params={displayParam} status="error" />
+          <ToolResult color="red">Error opening new tab</ToolResult>
+        </View>
+      );
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="NewTab" params={displayParam} status="pending" />
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="NewTab" params={displayParam} status="success" />
+        <ToolResult>{parsedResult.summary ?? "Opened tab"}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/perform-action.tsx

@@ -0,0 +1,63 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+import { coerceOptionalNumber } from "../shared/zod-coercion.js";
+
+const PerformActionParams = z.object({
+  id: z.string(),
+  action: z.enum(["click", "type", "hover", "scroll", "focus", "select"]),
+  text: z.string().optional(),
+  scroll_direction: z.enum(["up", "down", "left", "right"]).optional(),
+  scroll_amount: coerceOptionalNumber,
+  held_keys: z.string().optional(),
+  tab_id: coerceOptionalNumber,
+});
+
+export const performActionTool: ToolDef = {
+  displayName: "PerformAction",
+  getHeaderParams(input: Record<string, unknown>): string {
+    const elementId = String(input?.id || "").substring(0, 20);
+    return `id: ${elementId}`;
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = PerformActionParams.safeParse(snakeToCamel(rawInput));
+    const action = (pr.success ? pr.data.action : rawInput?.action || "action") as string;
+    const elementId = String(rawInput?.id || "").substring(0, 20);
+    const displayParams = `id: ${elementId}`;
+    const actionName = action.charAt(0).toUpperCase() + action.slice(1);
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return <ToolHeader name={actionName} params={displayParams} status="executing" showSpinner />;
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name={actionName} params={displayParams} status="error" />
+          <ToolResult color="red">Error performing action</ToolResult>
+        </View>
+      );
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name={actionName} params={displayParams} status="pending" />
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name={actionName} params={displayParams} status="success" />
+        <ToolResult>Performed {action}</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/refresh-tab.tsx

@@ -0,0 +1,43 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View } from "@codellm/jar";
+import React from "react";
+
+import type { ToolDef, ToolStatus } from "../types.js";
+
+import { ToolHeader, ToolResult } from "../shared/index.js";
+
+export const refreshTabTool: ToolDef = {
+  displayName: "Refresh",
+  getHeaderParams(_input: Record<string, unknown>): string {
+    return "";
+  },
+  renderUI(
+    _rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting) return <ToolHeader name="Refresh" status="pending" showSpinner />;
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Refresh" status="pending" />
+        </View>
+      );
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="Refresh" status="error" />
+          <ToolResult color="red">Error refreshing tab</ToolResult>
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="Refresh" status="success" />
+        <ToolResult>Refreshed</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/browser/switch-tab.tsx

@@ -0,0 +1,58 @@
+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 } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+import { coerceNumber } from "../shared/zod-coercion.js";
+
+const SwitchTabParams = z.object({ id: coerceNumber });
+
+export const switchTabTool: ToolDef = {
+  displayName: "SwitchTab",
+  getHeaderParams(input: Record<string, unknown>): string {
+    return `id: ${input?.id ?? ""}`;
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    const pr = SwitchTabParams.safeParse(snakeToCamel(rawInput));
+    if (!pr.success)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="SwitchTab" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    const tabId = pr.data.id;
+    const isExecuting = !parsedResult && status === "executing";
+
+    if (isExecuting)
+      return <ToolHeader name="SwitchTab" params={`id: ${tabId}`} status="executing" showSpinner />;
+    if (status === "error")
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="SwitchTab" params={`id: ${tabId}`} status="error" />
+          <ToolResult color="red">Error switching tab</ToolResult>
+        </View>
+      );
+    if (!parsedResult)
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="SwitchTab" params={`id: ${tabId}`} status="pending" />
+        </View>
+      );
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="SwitchTab" params={`id: ${tabId}`} status="success" />
+        <ToolResult>Switched to tab {tabId}</ToolResult>
+      </View>
+    );
+  },
+};