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

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

@@ -0,0 +1,375 @@
+import { View, Text } from "@codellm/jar";
+import { type Key, useInput } from "@codellm/jar";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { ToolPermissionDecision, ToolPermissionResult } from "../../providers/agent.js";
+
+import { TextBuffer } from "../../lib/text-buffer.js";
+import { Input, InputKeyDownEvent } from "../ui/input.js";
+
+export interface PermissionOption {
+  label: string;
+  value: ToolPermissionDecision | "input";
+  hint?: string;
+}
+
+interface PermissionOptionsProps {
+  options: PermissionOption[];
+  onSelect: (result: ToolPermissionResult) => void;
+  inputPlaceholder?: string;
+}
+
+interface PermissionOptionItemProps {
+  option: PermissionOption;
+  index: number;
+  isSelected: boolean;
+  showAsInput: boolean;
+  inputPlaceholder: string;
+  inputPrefix?: string;
+  inputBufferRef: React.RefObject<TextBuffer | null>;
+  onInputSubmit: (value: string) => void;
+  onInputKeyDown: (event: InputKeyDownEvent) => void;
+}
+
+const PermissionOptionItem = memo(
+  ({
+    option,
+    index,
+    isSelected,
+    showAsInput,
+    inputPlaceholder,
+    inputPrefix,
+    inputBufferRef,
+    onInputSubmit,
+    onInputKeyDown,
+  }: PermissionOptionItemProps) => {
+    if (showAsInput) {
+      return (
+        <View flexDirection="row">
+          <Text color="cyan">{"❯ "}</Text>
+          <Text>{`${index + 1}. ${inputPrefix || ""}`}</Text>
+          <Input
+            ref={inputBufferRef}
+            placeholder={inputPlaceholder}
+            onSubmit={onInputSubmit}
+            onKeyDown={onInputKeyDown}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View flexDirection="row">
+        <Text color={isSelected ? "cyan" : undefined}>{isSelected ? "❯ " : "  "}</Text>
+        <Text color={isSelected ? undefined : "gray"}>
+          {`${index + 1}. ${option.label}`}
+          {option.hint && <Text dimColor> ({option.hint})</Text>}
+        </Text>
+      </View>
+    );
+  },
+);
+PermissionOptionItem.displayName = "PermissionOptionItem";
+
+export const PermissionOptions = memo(
+  ({ options, onSelect, inputPlaceholder = "and tell AbacusAI" }: PermissionOptionsProps) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [tabPressedForInput, setTabPressedForInput] = useState(false);
+    const inputBufferRef = useRef<TextBuffer | null>(null);
+
+    // Expand paste placeholders via the TextBuffer (which owns the placeholder map)
+    const expandPlaceholders = useCallback(
+      (text: string) => inputBufferRef.current?.getExpandedText(text) ?? text,
+      [],
+    );
+    // No-op: TextBuffer clears its own pastedContent on setText("")
+    const clearPlaceholders = useCallback(() => {}, []);
+
+    // Store messages for accept and reject options separately
+    const acceptMessageRef = useRef<string>("");
+    const rejectMessageRef = useRef<string>("");
+
+    // Filter out any 'input' options from the options list - memoize to prevent unnecessary re-renders
+    const filteredOptions = useMemo(
+      () => options.filter((opt) => opt.value !== "input"),
+      [options],
+    );
+    const isInputMode = tabPressedForInput;
+
+    const selectedIndexRef = useRef(selectedIndex);
+    selectedIndexRef.current = selectedIndex;
+
+    const optionsLengthRef = useRef(filteredOptions.length);
+    optionsLengthRef.current = filteredOptions.length;
+
+    const isInputModeRef = useRef(isInputMode);
+    isInputModeRef.current = isInputMode;
+
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+
+    const optionsRef = useRef(filteredOptions);
+    optionsRef.current = filteredOptions;
+
+    const handleSelect = useCallback(() => {
+      const option = optionsRef.current[selectedIndexRef.current];
+      if (!option) return;
+
+      // If in input mode, submit with user message
+      if (isInputModeRef.current) {
+        const inputText = inputBufferRef.current?.text?.trim();
+        if (inputText) {
+          // Expand placeholders before submitting
+          const expandedText = expandPlaceholders(inputText);
+          // Determine if it's accept or reject based on the selected option
+          const decision: ToolPermissionDecision = option.value === "accept" ? "accept" : "reject";
+          onSelectRef.current({ decision, userMessage: expandedText });
+          clearPlaceholders();
+        }
+      } else {
+        // Since we filtered out 'input' options, this should only be ToolPermissionDecision
+        if (option.value !== "input") {
+          onSelectRef.current({ decision: option.value });
+        }
+      }
+    }, [expandPlaceholders, clearPlaceholders]);
+
+    const handleSelectRef = useRef(handleSelect);
+    handleSelectRef.current = handleSelect;
+
+    const handleInputSubmit = useCallback(
+      (value: string) => {
+        if (value.trim()) {
+          const option = optionsRef.current[selectedIndexRef.current];
+          // Expand placeholders before submitting
+          const expandedValue = expandPlaceholders(value.trim());
+          // Determine if it's accept or reject based on the selected option
+          const decision = option?.value === "accept" ? "accept" : "reject";
+          onSelectRef.current({ decision, userMessage: expandedValue });
+          clearPlaceholders();
+        }
+      },
+      [expandPlaceholders, clearPlaceholders],
+    );
+
+    const handleInputKeyDown = useCallback(
+      (event: InputKeyDownEvent) => {
+        if (event.key.upArrow || event.key.downArrow) {
+          // Save the current input text before switching
+          const currentOption = optionsRef.current[selectedIndexRef.current];
+          const currentText = inputBufferRef.current?.text || "";
+
+          if (currentOption?.value === "accept") {
+            acceptMessageRef.current = currentText;
+          } else if (currentOption?.value === "reject") {
+            rejectMessageRef.current = currentText;
+          }
+
+          // Exit input mode and move selection
+          setTabPressedForInput(false);
+
+          if (event.key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+          } else {
+            setSelectedIndex((prev) => Math.min(optionsLengthRef.current - 1, prev + 1));
+          }
+
+          event.preventDefault();
+          return;
+        }
+        if (event.key.tab) {
+          // Tab in input mode should clear the saved message and exit input mode
+          const currentOption = optionsRef.current[selectedIndexRef.current];
+
+          // Clear the saved message for this option (reset to empty string)
+          if (currentOption?.value === "accept") {
+            acceptMessageRef.current = "";
+          } else if (currentOption?.value === "reject") {
+            rejectMessageRef.current = "";
+          }
+
+          // Clear paste placeholders when exiting input mode
+          clearPlaceholders();
+          setTabPressedForInput(false);
+          event.preventDefault();
+          return;
+        }
+      },
+      [clearPlaceholders],
+    );
+
+    const keypressHandler = useCallback((_input: string, key: Key) => {
+      if (isInputModeRef.current) return;
+
+      if (key.upArrow) {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setSelectedIndex((prev) => Math.min(optionsLengthRef.current - 1, prev + 1));
+        return;
+      }
+      if (key.tab && key.shift) {
+        // Shift+Tab: Find and select the 'allowAlways' option
+        const allowAlwaysIndex = optionsRef.current.findIndex((opt) => opt.value === "allowAlways");
+        if (allowAlwaysIndex !== -1) {
+          setSelectedIndex(allowAlwaysIndex);
+          // Submit immediately
+          setTimeout(() => {
+            onSelectRef.current({ decision: "allowAlways" });
+          }, 0);
+        }
+        return;
+      }
+      if (key.tab) {
+        const option = optionsRef.current[selectedIndexRef.current];
+        // Only allow Tab for 'accept' and 'reject' options, not for 'allowAlways' or 'background'
+        if (option && (option.value === "accept" || option.value === "reject")) {
+          setTabPressedForInput(true);
+
+          // Load the previously saved message for this option
+          const savedMessage =
+            option.value === "accept" ? acceptMessageRef.current : rejectMessageRef.current;
+
+          // Set the saved message to the input buffer after a short delay
+          // to ensure the input is mounted
+          setTimeout(() => {
+            if (inputBufferRef.current && savedMessage) {
+              inputBufferRef.current.setText(savedMessage);
+            }
+          }, 0);
+        }
+        return;
+      }
+      if (key.return) {
+        handleSelectRef.current();
+        return;
+      }
+    }, []);
+
+    useInput(keypressHandler, { isActive: true });
+
+    // Auto-enter input mode when selecting an option that has a saved message
+    useEffect(() => {
+      const currentOption = filteredOptions[selectedIndex];
+      if (!currentOption) return;
+
+      // Only proceed if option supports input (accept or reject)
+      if (currentOption.value !== "accept" && currentOption.value !== "reject") return;
+
+      // Check if this option has a saved message
+      const savedMessage =
+        currentOption.value === "accept" ? acceptMessageRef.current : rejectMessageRef.current;
+
+      // If there's a saved message and we're not already in input mode, enter it
+      if (savedMessage && !tabPressedForInput) {
+        setTabPressedForInput(true);
+      }
+    }, [selectedIndex, filteredOptions, tabPressedForInput]);
+
+    // Track if input mode was just entered (to prevent overwriting user input on re-renders)
+    const justEnteredInputModeRef = useRef(false);
+
+    // Set flag when entering input mode
+    useEffect(() => {
+      if (tabPressedForInput) {
+        justEnteredInputModeRef.current = true;
+      }
+    }, [tabPressedForInput]);
+
+    // Restore saved message when entering input mode - only once when first entering
+    useEffect(() => {
+      if (!tabPressedForInput || !justEnteredInputModeRef.current) return;
+
+      const currentOption = filteredOptions[selectedIndex];
+      if (!currentOption) return;
+
+      // Get the saved message for the current option
+      const savedMessage =
+        currentOption.value === "accept"
+          ? acceptMessageRef.current
+          : currentOption.value === "reject"
+            ? rejectMessageRef.current
+            : "";
+
+      // Set the saved message after a short delay to ensure input is mounted
+      // Only if the input is empty (to avoid overwriting user input)
+      if (savedMessage) {
+        setTimeout(() => {
+          if (inputBufferRef.current && inputBufferRef.current.text === "") {
+            inputBufferRef.current.setText(savedMessage);
+            justEnteredInputModeRef.current = false; // Clear flag after restoring
+          } else {
+            justEnteredInputModeRef.current = false; // Clear flag anyway
+          }
+        }, 0);
+      } else {
+        justEnteredInputModeRef.current = false; // Clear flag if no saved message
+      }
+    }, [tabPressedForInput, selectedIndex, filteredOptions]);
+
+    // Determine which option to show as input when Tab is pressed
+    const currentOption = filteredOptions[selectedIndex];
+    const showAsInputForOption = tabPressedForInput && currentOption;
+
+    // Compute the label prefix when showing input
+    const getOptionPrefix = (option: PermissionOption): string => {
+      if (option.value === "accept") {
+        return "Yes, ";
+      } else if (option.value === "reject") {
+        return "No, ";
+      }
+      return "";
+    };
+
+    // Show "Tab to add additional instructions" hint when:
+    // - Not in input mode
+    // - Current option is accept or reject (supports Tab input)
+    const showTabHint =
+      !tabPressedForInput &&
+      currentOption &&
+      (currentOption.value === "accept" || currentOption.value === "reject");
+
+    return (
+      <View flexDirection="column">
+        {filteredOptions.map((option, index) => {
+          const isSelected = index === selectedIndex;
+          const showAsInput = showAsInputForOption && isSelected;
+
+          // Get the saved message for this option
+          const savedMessage =
+            option.value === "accept"
+              ? acceptMessageRef.current
+              : option.value === "reject"
+                ? rejectMessageRef.current
+                : "";
+
+          // Create a display option with the saved message appended if not in input mode
+          const displayOption =
+            !showAsInput && savedMessage
+              ? { ...option, label: `${option.label}, ${savedMessage}` }
+              : option;
+
+          return (
+            <PermissionOptionItem
+              key={index}
+              option={displayOption}
+              index={index}
+              isSelected={isSelected}
+              showAsInput={showAsInput}
+              inputPrefix={getOptionPrefix(option)}
+              inputPlaceholder={inputPlaceholder}
+              inputBufferRef={inputBufferRef}
+              onInputSubmit={handleInputSubmit}
+              onInputKeyDown={handleInputKeyDown}
+            />
+          );
+        })}
+        <View marginTop={1}>
+          <Text dimColor>{showTabHint ? "Tab to add additional instructions" : ""}</Text>
+        </View>
+      </View>
+    );
+  },
+);
+PermissionOptions.displayName = "PermissionOptions";

package/src/components/tool-permissions/permission-preview-header.tsx

@@ -0,0 +1,57 @@
+import type { BoxStyle } from "cli-boxes";
+
+import { View, Text } from "@codellm/jar";
+import { memo } from "react";
+
+interface PermissionPreviewHeaderProps {
+  title: string;
+  subtitle?: string;
+}
+
+const EMPTY = "";
+
+export const solidBorderStyle: BoxStyle = {
+  topLeft: EMPTY,
+  top: "─",
+  topRight: EMPTY,
+  left: EMPTY,
+  right: EMPTY,
+  bottomLeft: EMPTY,
+  bottom: "─",
+  bottomRight: EMPTY,
+};
+
+export const dashedBorderStyle: BoxStyle = {
+  topLeft: EMPTY,
+  top: "╌",
+  topRight: EMPTY,
+  left: EMPTY,
+  right: EMPTY,
+  bottomLeft: EMPTY,
+  bottom: "╌",
+  bottomRight: EMPTY,
+};
+
+export const PermissionPreviewHeader = memo(({ title, subtitle }: PermissionPreviewHeaderProps) => {
+  return (
+    <View flexDirection="column">
+      <View
+        borderStyle={solidBorderStyle}
+        borderBottom
+        borderTop={false}
+        borderLeft={false}
+        borderRight={false}
+      />
+      <Text> {title}</Text>
+      {subtitle && <Text dimColor> {subtitle}</Text>}
+      <View
+        borderStyle={dashedBorderStyle}
+        borderBottom
+        borderTop={false}
+        borderLeft={false}
+        borderRight={false}
+      />
+    </View>
+  );
+});
+PermissionPreviewHeader.displayName = "PermissionPreviewHeader";