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

package/src/components/tool-permissions/tool-permission-ui.tsx

@@ -0,0 +1,420 @@
+import type { PermissionDecision } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import { highlight, supportsLanguage } from "cli-highlight";
+import { memo } from "react";
+
+import type { PendingToolPermission, ToolPermissionResult } from "../../providers/agent.js";
+
+import { AgentMode } from "../../components/composer/types.js";
+import { useAgentMode } from "../../context/agent-mode.js";
+import { Markdown } from "../../lib/markdown/markdown.js";
+import { CodePreview } from "../tools/shared/index.js";
+import { AskUserQuestionPermissionUI } from "./ask-user-question-permission-ui.js";
+import { DiffPreview } from "./diff-preview.js";
+import { PermissionOptions, type PermissionOption } from "./permission-options.js";
+import { PermissionPreviewHeader, dashedBorderStyle } from "./permission-preview-header.js";
+
+interface ToolPermissionUIProps {
+  pendingTool: PendingToolPermission;
+}
+
+function mapResultToDecision(result: ToolPermissionResult): PermissionDecision {
+  if (result.decision === "accept" && result.userMessage) {
+    return { type: "accept_with_message", message: result.userMessage };
+  }
+  if (result.decision === "reject" && result.userMessage) {
+    return { type: "reject_with_message", message: result.userMessage };
+  }
+  return result.decision;
+}
+
+const EditFilePermissionUI = memo(
+  ({
+    filePath,
+    originalContent,
+    newContent,
+    diffShownInEditor,
+    onResolve,
+  }: {
+    filePath: string;
+    originalContent: string;
+    newContent: string;
+    diffShownInEditor?: boolean;
+    onResolve: (decision: PermissionDecision) => void;
+  }) => {
+    const isNewFile = !originalContent;
+    const { agentMode } = useAgentMode();
+    const inPlanMode = agentMode === AgentMode.PlanMode;
+
+    const options: PermissionOption[] = [
+      { label: "Yes, apply changes", value: "accept" },
+      ...(!inPlanMode
+        ? [
+            {
+              label: "Yes, and auto-accept all edits",
+              value: "allowAlways" as const,
+              hint: "shift+tab",
+            },
+          ]
+        : []),
+      { label: "No, reject changes", value: "reject" },
+    ];
+
+    const handleSelect = (result: ToolPermissionResult) => {
+      onResolve(mapResultToDecision(result));
+    };
+
+    if (diffShownInEditor) {
+      return (
+        <View flexDirection="column">
+          <PermissionPreviewHeader
+            title={`${isNewFile ? "Create" : "Update"} file ${filePath}`}
+            subtitle="Opened changes in the editor"
+          />
+          <View flexDirection="column" paddingLeft={1}>
+            <PermissionOptions options={options} onSelect={handleSelect} />
+          </View>
+        </View>
+      );
+    }
+
+    return (
+      <View flexDirection="column">
+        <PermissionPreviewHeader title={`${isNewFile ? "Create" : "Update"} file ${filePath}`} />
+        {isNewFile ? (
+          <CodePreview filePath={filePath} content={newContent} maxLines={100} />
+        ) : (
+          <DiffPreview
+            filePath={filePath}
+            originalContent={originalContent}
+            newContent={newContent}
+            paddingLeft={1}
+          />
+        )}
+        <View
+          borderStyle={dashedBorderStyle}
+          borderBottom
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        />
+        <View flexDirection="column" paddingLeft={1}>
+          <PermissionOptions options={options} onSelect={handleSelect} />
+        </View>
+      </View>
+    );
+  },
+);
+EditFilePermissionUI.displayName = "EditFilePermissionUI";
+
+const DeleteFilePermissionUI = memo(
+  ({
+    filePath,
+    onResolve,
+  }: {
+    filePath: string;
+    onResolve: (decision: PermissionDecision) => void;
+  }) => {
+    const options: PermissionOption[] = [
+      { label: "Yes, delete file", value: "accept" },
+      { label: "No, keep file", value: "reject" },
+    ];
+
+    const handleSelect = (result: ToolPermissionResult) => {
+      onResolve(mapResultToDecision(result));
+    };
+
+    return (
+      <View flexDirection="column">
+        <PermissionPreviewHeader title={`Delete file ${filePath}`} />
+        <View flexDirection="column" paddingLeft={1} paddingY={1}>
+          <Text color="red">{filePath}</Text>
+        </View>
+        <View
+          borderStyle={dashedBorderStyle}
+          borderBottom
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        />
+        <View flexDirection="column" paddingLeft={1}>
+          <PermissionOptions options={options} onSelect={handleSelect} />
+        </View>
+      </View>
+    );
+  },
+);
+DeleteFilePermissionUI.displayName = "DeleteFilePermissionUI";
+
+const BrowserActionPermissionUI = memo(
+  ({
+    description,
+    url,
+    onResolve,
+  }: {
+    description: string;
+    url?: string;
+    onResolve: (decision: PermissionDecision) => void;
+  }) => {
+    const options: PermissionOption[] = [
+      { label: "Yes, allow action", value: "accept" },
+      { label: "No, deny action", value: "reject" },
+    ];
+
+    const handleSelect = (result: ToolPermissionResult) => {
+      onResolve(mapResultToDecision(result));
+    };
+
+    return (
+      <View flexDirection="column">
+        <PermissionPreviewHeader title={`Browser action: ${description}`} />
+        <View flexDirection="column" paddingLeft={1} paddingY={1}>
+          <Text>{description}</Text>
+          {url && <Text dimColor>URL: {url}</Text>}
+        </View>
+        <View
+          borderStyle={dashedBorderStyle}
+          borderBottom
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        />
+        <View flexDirection="column" paddingLeft={1}>
+          <PermissionOptions options={options} onSelect={handleSelect} />
+        </View>
+      </View>
+    );
+  },
+);
+BrowserActionPermissionUI.displayName = "BrowserActionPermissionUI";
+
+const RunTerminalPermissionUI = memo(
+  ({
+    command,
+    background,
+    onResolve,
+  }: {
+    command: string;
+    background: boolean;
+    onResolve: (decision: PermissionDecision) => void;
+  }) => {
+    const options: PermissionOption[] = [
+      { label: "Yes, run command", value: "accept" },
+      { label: "Yes, and auto-accept all commands", value: "allowAlways", hint: "shift+tab" },
+      { label: "No, skip command", value: "reject" },
+    ];
+
+    const handleSelect = (result: ToolPermissionResult) => {
+      onResolve(mapResultToDecision(result));
+    };
+
+    return (
+      <View flexDirection="column">
+        <PermissionPreviewHeader title="Bash command" />
+        <View flexDirection="column" paddingLeft={1} paddingY={1}>
+          <Text>
+            {supportsLanguage("bash")
+              ? (() => {
+                  try {
+                    return highlight(command, { language: "bash" });
+                  } catch {
+                    return command;
+                  }
+                })()
+              : command}
+          </Text>
+          {background && (
+            <View paddingTop={1}>
+              <Text dimColor>(Running in background)</Text>
+            </View>
+          )}
+        </View>
+        <View
+          borderStyle={dashedBorderStyle}
+          borderBottom
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        />
+        <View flexDirection="column" paddingLeft={1}>
+          <PermissionOptions
+            options={options}
+            onSelect={handleSelect}
+            inputPlaceholder="Type here to tell AbacusAI what to do differently"
+          />
+        </View>
+      </View>
+    );
+  },
+);
+RunTerminalPermissionUI.displayName = "RunTerminalPermissionUI";
+
+const GenericPermissionUI = memo(
+  ({
+    title,
+    description,
+    onResolve,
+  }: {
+    title: string;
+    description: string;
+    onResolve: (decision: PermissionDecision) => void;
+  }) => {
+    const options: PermissionOption[] = [
+      { label: "Yes, allow", value: "accept" },
+      { label: "No, deny", value: "reject" },
+    ];
+
+    const handleSelect = (result: ToolPermissionResult) => {
+      onResolve(mapResultToDecision(result));
+    };
+
+    return (
+      <View flexDirection="column">
+        <PermissionPreviewHeader title={title} />
+        <View flexDirection="column" paddingLeft={1} paddingY={1}>
+          <Text>
+            {supportsLanguage("json")
+              ? (() => {
+                  try {
+                    return highlight(description, { language: "json" });
+                  } catch {
+                    return description;
+                  }
+                })()
+              : description}
+          </Text>
+        </View>
+        <View
+          borderStyle={dashedBorderStyle}
+          borderBottom
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        />
+        <View flexDirection="column" paddingLeft={1}>
+          <PermissionOptions options={options} onSelect={handleSelect} />
+        </View>
+      </View>
+    );
+  },
+);
+GenericPermissionUI.displayName = "GenericPermissionUI";
+
+const ExitPlanModePermissionUI = memo(
+  ({
+    planFilePath,
+    planContent,
+    onResolve,
+  }: {
+    planFilePath: string;
+    planContent: string;
+    onResolve: (decision: PermissionDecision) => void;
+  }) => {
+    const options: PermissionOption[] = [
+      { label: "Yes, implement the plan (approve each edit)", value: "accept" },
+      {
+        label: "Yes, implement the plan (auto-accept all edits)",
+        value: "allowAlways",
+        hint: "shift+tab",
+      },
+      { label: "No, keep planning", value: "reject" },
+    ];
+
+    const handleSelect = (result: ToolPermissionResult) => {
+      onResolve(mapResultToDecision(result));
+    };
+
+    const truncatedPath = planFilePath.length > 60 ? `…${planFilePath.slice(-60)}` : planFilePath;
+
+    return (
+      <View flexDirection="column">
+        <PermissionPreviewHeader title={`Ready to code? Implement plan: ${truncatedPath}`} />
+        {planContent && (
+          <View flexDirection="column" paddingLeft={1} paddingY={1}>
+            <Text dimColor>Here is Abacus's plan:</Text>
+            <Markdown>{planContent}</Markdown>
+          </View>
+        )}
+        <View
+          borderStyle={dashedBorderStyle}
+          borderBottom
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        />
+        <View flexDirection="column" paddingLeft={1}>
+          <PermissionOptions
+            options={options}
+            onSelect={handleSelect}
+            inputPlaceholder="Add instructions for the implementation"
+          />
+        </View>
+      </View>
+    );
+  },
+);
+ExitPlanModePermissionUI.displayName = "ExitPlanModePermissionUI";
+
+export const ToolPermissionUI = memo(({ pendingTool }: ToolPermissionUIProps) => {
+  const { request, resolve } = pendingTool;
+
+  switch (request.type) {
+    case "edit_file":
+      return (
+        <EditFilePermissionUI
+          filePath={request.filePath}
+          originalContent={request.originalContent}
+          newContent={request.newContent}
+          diffShownInEditor={request.diffShownInEditor}
+          onResolve={resolve}
+        />
+      );
+
+    case "delete_file":
+      return <DeleteFilePermissionUI filePath={request.filePath} onResolve={resolve} />;
+
+    case "run_terminal":
+      return (
+        <RunTerminalPermissionUI
+          command={request.command}
+          background={request.background}
+          onResolve={resolve}
+        />
+      );
+
+    case "browser_action":
+      return (
+        <BrowserActionPermissionUI
+          description={request.description}
+          url={request.url}
+          onResolve={resolve}
+        />
+      );
+
+    case "generic":
+      return (
+        <GenericPermissionUI
+          title={`Tool: ${request.toolName}`}
+          description={request.inputSummary}
+          onResolve={resolve}
+        />
+      );
+
+    case "exit_plan_mode":
+      return (
+        <ExitPlanModePermissionUI
+          planFilePath={request.planFilePath}
+          planContent={request.planContent}
+          onResolve={resolve}
+        />
+      );
+
+    case "ask_user_question":
+      return <AskUserQuestionPermissionUI questions={request.questions} onResolve={resolve} />;
+
+    default:
+      return null;
+  }
+});
+ToolPermissionUI.displayName = "ToolPermissionUI";

package/src/components/tools/agent/ask-user-question.tsx

@@ -0,0 +1,107 @@
+import type { AskUserQuestionParsedData } 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, PreviewContent } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+import { coerceBoolean } from "../shared/zod-coercion.js";
+
+const AskUserQuestionParams = z.object({
+  questions: z.array(
+    z.object({
+      question: z.string(),
+      header: z.string(),
+      options: z.array(z.object({ label: z.string(), description: z.string() })),
+      multiSelect: coerceBoolean,
+    }),
+  ),
+  answers: z.record(z.string(), z.string()).optional(),
+});
+
+export const askUserQuestionTool: ToolDef<AskUserQuestionParsedData> = {
+  displayName: "AskUserQuestion",
+  getHeaderParams(_input: Record<string, unknown>): string {
+    return "";
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult,
+  ): React.ReactElement {
+    const pr = AskUserQuestionParams.safeParse(snakeToCamel(rawInput));
+    if (!pr.success) {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="AskUserQuestion" status="error" />
+          <ToolResult color="red">Invalid params</ToolResult>
+        </View>
+      );
+    }
+    const params = pr.data;
+    const questions = params.questions || [];
+    const answers = parsedResult?.data.answers ?? params.answers ?? {};
+
+    if (status === "interrupted") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="AskUserQuestion" status="interrupted" />
+          <ToolResult color="yellow">Interrupted · What should I do instead?</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "rejected") {
+      const hasAnswers = Object.keys(answers).length > 0;
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="AskUserQuestion" status={hasAnswers ? "success" : "rejected"} />
+          <ToolResult color={hasAnswers ? "green" : "yellow"}>
+            {hasAnswers ? (
+              `User answered ${Object.keys(answers).length} question${Object.keys(answers).length !== 1 ? "s" : ""}`
+            ) : parsedResult?.userNote ? (
+              <>
+                Rejected · <Text italic>"{parsedResult.userNote}"</Text>
+              </>
+            ) : (
+              "User cancelled the questions"
+            )}
+          </ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "pending" || status === "executing") {
+      return <ToolHeader name="AskUserQuestion" status="pending" showSpinner />;
+    }
+
+    const questionCount = questions.length;
+    const answerCount = Object.keys(answers).length;
+
+    return (
+      <View flexDirection="column" gap={0}>
+        <ToolHeader name="AskUserQuestion" status="success" />
+        <ToolResult>
+          Answered {questionCount} question{questionCount !== 1 ? "s" : ""}
+        </ToolResult>
+        {answerCount > 0 && (
+          <PreviewContent>
+            {Object.entries(answers).map(([key, value], index) => {
+              const questionIndex = parseInt(key.replace("question_", ""), 10);
+              const question = questions[questionIndex];
+              return (
+                <View key={index} flexDirection="column" marginBottom={1}>
+                  <Text dimColor>{question?.header || `Question ${questionIndex + 1}`}</Text>
+                  <Text color="cyan">→ {String(value)}</Text>
+                </View>
+              );
+            })}
+          </PreviewContent>
+        )}
+      </View>
+    );
+  },
+};

package/src/components/tools/agent/enter-plan-mode.tsx

@@ -0,0 +1,55 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { View, Text } from "@codellm/jar";
+import React from "react";
+
+import type { ToolDef, ToolStatus } from "../types.js";
+
+import { ToolHeader, ToolResult } from "../shared/index.js";
+
+export const enterPlanModeTool: ToolDef = {
+  displayName: "EnterPlanMode",
+  getHeaderParams(_input: Record<string, unknown>): string {
+    return "";
+  },
+  renderUI(
+    _rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    if (status === "interrupted") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="EnterPlanMode" status="interrupted" />
+          <ToolResult color="yellow">Interrupted · What should I do instead?</ToolResult>
+        </View>
+      );
+    }
+
+    if (status === "rejected") {
+      return (
+        <View flexDirection="column">
+          <ToolHeader name="EnterPlanMode" status="rejected" />
+          {parsedResult?.userNote ? (
+            <ToolResult color="yellow">
+              Rejected · <Text italic>"{parsedResult.userNote}"</Text>
+            </ToolResult>
+          ) : (
+            <ToolResult color="yellow">Rejected</ToolResult>
+          )}
+        </View>
+      );
+    }
+
+    if (status === "pending" || status === "executing") {
+      return <ToolHeader name="EnterPlanMode" status="pending" showSpinner />;
+    }
+
+    return (
+      <View flexDirection="column" gap={0}>
+        <ToolHeader name="EnterPlanMode" status="success" />
+        <ToolResult>Entered plan mode</ToolResult>
+      </View>
+    );
+  },
+};

package/src/components/tools/agent/exit-plan-mode.tsx

@@ -0,0 +1,83 @@
+import type { ParsedToolResult } from "@codellm/agent";
+
+import { AgentMode } 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 { useAgentMode } from "../../../context/agent-mode.js";
+import { ToolHeader, ToolResult, truncatePath } from "../shared/index.js";
+import { snakeToCamel } from "../shared/index.js";
+
+const ExitPlanModeParams = z.object({ planFilePath: z.string() });
+
+function ExitPlanModeUI({
+  rawInput,
+  status,
+  parsedResult,
+}: {
+  rawInput: Record<string, unknown>;
+  status: ToolStatus;
+  parsedResult?: ParsedToolResult;
+}) {
+  const { agentMode } = useAgentMode();
+  const pr = ExitPlanModeParams.safeParse(snakeToCamel(rawInput));
+  const planFilePath =
+    (pr.success ? pr.data.planFilePath : (rawInput?.planFilePath as string)) || "";
+
+  if (status === "interrupted") {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="ExitPlanMode" status="interrupted" />
+        <ToolResult color="yellow">Interrupted · What should I do instead?</ToolResult>
+      </View>
+    );
+  }
+
+  if (status === "rejected") {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="ExitPlanMode" status="rejected" />
+        {parsedResult?.userNote ? (
+          <ToolResult color="yellow">
+            Rejected · <Text italic>"{parsedResult.userNote}"</Text>
+          </ToolResult>
+        ) : (
+          <ToolResult color="yellow">Rejected</ToolResult>
+        )}
+      </View>
+    );
+  }
+
+  if (status === "pending" || status === "executing") {
+    return <ToolHeader name="ExitPlanMode" status="pending" showSpinner />;
+  }
+
+  const modeMessage =
+    agentMode === AgentMode.AcceptEdits ? "Plan approved (auto-accept mode)" : "Plan approved";
+
+  return (
+    <View flexDirection="column" gap={0}>
+      <ToolHeader name="ExitPlanMode" status="success" />
+      <ToolResult>
+        {modeMessage}: {truncatePath(planFilePath)}
+      </ToolResult>
+    </View>
+  );
+}
+
+export const exitPlanModeTool: ToolDef = {
+  displayName: "ExitPlanMode",
+  getHeaderParams(input: Record<string, unknown>): string {
+    return (input?.planFilePath as string) || "";
+  },
+  renderUI(
+    rawInput: Record<string, unknown>,
+    status: ToolStatus,
+    parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    return <ExitPlanModeUI rawInput={rawInput} status={status} parsedResult={parsedResult} />;
+  },
+};

package/src/components/tools/agent/handoff-to-main.tsx

@@ -0,0 +1,27 @@
+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 handOffToMainTool: ToolDef = {
+  displayName: "HandOff",
+  getHeaderParams(_input: Record<string, unknown>): string {
+    return "";
+  },
+  renderUI(
+    _rawInput: Record<string, unknown>,
+    _status: ToolStatus,
+    _parsedResult?: ParsedToolResult,
+  ): React.ReactElement {
+    return (
+      <View flexDirection="column">
+        <ToolHeader name="HandOff" status="success" />
+        <ToolResult>Handed off to main agent</ToolResult>
+      </View>
+    );
+  },
+};