Function ApiKeyInput

packages/cli/src/ui/components/ApiKeyInput.tsx:19–136

({
  onSubmit,
  onCancel,
  errorMessage,
}: ApiKeyInputProps)

}

export function ApiKeyInput({
  onSubmit,
  onCancel,
  errorMessage,
}: ApiKeyInputProps): React.JSX.Element {
  const [input, setInput] = useState('');
  const [localError, setLocalError] = useState<string | null>(null);

  const validateApiKey = useCallback((key: string): string | null => {
    if (!key.trim()) {
      return 'API key cannot be empty';
    }
    if (!key.startsWith('sk-or-v1-')) {
      return 'Invalid API key format. OpenRouter API keys start with "sk-or-v1-"';
    }
    if (key.length < 20) {
      return 'API key appears to be too short';
    }
    return null;
  }, []);

  const handleSubmit = useCallback(() => {
    const trimmedInput = input.trim();
    const validationError = validateApiKey(trimmedInput);

    if (validationError) {
      setLocalError(validationError);
      return;
    }

    setLocalError(null);
    onSubmit(trimmedInput);
  }, [input, validateApiKey, onSubmit]);

  useKeypress(
    (key) => {
      // Clear error on any key press except enter/escape
      if (key.name !== 'return' && key.name !== 'escape' && localError) {
        setLocalError(null);
      }

      if (key.name === 'return') {
        handleSubmit();
        return;
      }

      if (key.name === 'escape') {
        onCancel();
        return;
      }

      if (key.name === 'backspace' || key.name === 'delete') {
        setInput((prev) => prev.slice(0, -1));
        return;
      }

      // Handle ctrl+c
      if (key.ctrl && key.name === 'c') {