Function ThinkingToggle

src/components/ThinkingToggle.tsx:17–115

({ currentValue, onSelect, onCancel, isMidConversation }: Props)

};

export function ThinkingToggle({ currentValue, onSelect, onCancel, isMidConversation }: Props): React.ReactNode {
  const exitState = useExitOnCtrlCDWithKeybindings();
  const [confirmationPending, setConfirmationPending] = useState<boolean | null>(null);

  const options = [
    {
      value: 'true',
      label: 'Enabled',
      description: 'Claude will think before responding',
    },
    {
      value: 'false',
      label: 'Disabled',
      description: 'Claude will respond without extended thinking',
    },
  ];

  // Use configurable keybinding for ESC to cancel/go back
  useKeybinding(
    'confirm:no',
    () => {
      if (confirmationPending !== null) {
        setConfirmationPending(null);
      } else {
        onCancel?.();
      }
    },
    { context: 'Confirmation' },
  );

  // Use configurable keybinding for Enter to confirm in confirmation mode
  useKeybinding(
    'confirm:yes',
    () => {
      if (confirmationPending !== null) {
        onSelect(confirmationPending);
      }
    },
    { context: 'Confirmation', isActive: confirmationPending !== null },
  );

  function handleSelectChange(value: string): void {
    const selected = value === 'true';
    if (isMidConversation && selected !== currentValue) {
      setConfirmationPending(selected);
    } else {
      onSelect(selected);
    }
  }

  return (
    <Pane color="permission">
      <Box flexDirection="column">
        <Box marginBottom={1} flexDirection="column">
          <Text color="remember" bold>
            Toggle thinking mode
          </Text>
          <Text dimColor>Enable or disable thinking for this session.</Text>