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

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

@@ -1,401 +0,0 @@
-import { View, Text } from "@codellm/jar";
-import { type Key, useInput } from "@codellm/jar";
-import process from "node:process";
-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}
-            width={process.stdout.columns - 10}
-            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;
-        }
-        if (event.key.escape) {
-          clearPlaceholders();
-          setTabPressedForInput(false);
-          onSelectRef.current({ decision: "reject" });
-          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.escape) {
-        onSelectRef.current({ decision: "reject" });
-        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 "";
-    };
-
-    const showTabHint =
-      !tabPressedForInput &&
-      currentOption &&
-      (currentOption.value === "accept" || currentOption.value === "reject");
-
-    const hasAllowAlways = filteredOptions.some((opt) => opt.value === "allowAlways");
-
-    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 flexDirection="row" marginTop={1} gap={2}>
-          {tabPressedForInput ? (
-            <>
-              <Text dimColor>enter submit</Text>
-              <Text dimColor>tab discard note</Text>
-              <Text dimColor>esc reject</Text>
-            </>
-          ) : (
-            <>
-              <Text dimColor>↑↓ navigate</Text>
-              <Text dimColor>enter select</Text>
-              {showTabHint && <Text dimColor>tab add note</Text>}
-              {hasAllowAlways && <Text dimColor>shift+tab don't ask again</Text>}
-              <Text dimColor>esc reject</Text>
-            </>
-          )}
-        </View>
-      </View>
-    );
-  },
-);
-PermissionOptions.displayName = "PermissionOptions";

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

@@ -1,57 +0,0 @@
-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";