feat: misc tool alignment (#137)

src/cli/components/EnterPlanModeDialog.tsx

@@ -0,0 +1,80 @@
+import { Box, Text, useInput } from "ink";
+import { memo, useState } from "react";
+import { colors } from "./colors";
+
+type Props = {
+  onApprove: () => void;
+  onReject: () => void;
+};
+
+export const EnterPlanModeDialog = memo(({ onApprove, onReject }: Props) => {
+  const [selectedOption, setSelectedOption] = useState(0);
+
+  const options = [
+    { label: "Yes, enter plan mode", action: onApprove },
+    { label: "No, start implementing now", action: onReject },
+  ];
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedOption((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setSelectedOption((prev) => Math.min(options.length - 1, prev + 1));
+    } else if (key.return) {
+      options[selectedOption]?.action();
+    } else if (input === "1") {
+      onApprove();
+    } else if (input === "2") {
+      onReject();
+    }
+  });
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      <Box marginBottom={1}>
+        <Text color={colors.approval.header} bold>
+          Enter plan mode?
+        </Text>
+      </Box>
+
+      <Box marginBottom={1} flexDirection="column">
+        <Text>
+          Letta wants to enter plan mode to explore and design an implementation
+          approach.
+        </Text>
+        <Text> </Text>
+        <Text>In plan mode, Letta will:</Text>
+        <Text> • Explore the codebase thoroughly</Text>
+        <Text> • Identify existing patterns</Text>
+        <Text> • Design an implementation strategy</Text>
+        <Text> • Present a plan for your approval</Text>
+        <Text> </Text>
+        <Text dimColor>
+          No code changes will be made until you approve the plan.
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {options.map((option, index) => {
+          const isSelected = index === selectedOption;
+          const color = isSelected ? colors.approval.header : undefined;
+
+          return (
+            <Box key={option.label} flexDirection="row">
+              <Box width={2} flexShrink={0}>
+                <Text color={color}>{isSelected ? ">" : " "}</Text>
+              </Box>
+              <Box flexGrow={1}>
+                <Text color={color} bold={isSelected}>
+                  {index + 1}. {option.label}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+});
+
+EnterPlanModeDialog.displayName = "EnterPlanModeDialog";

src/cli/components/InputRich.tsx

@@ -110,6 +110,7 @@ export function Input({
 
   // Handle escape key for interrupt (when streaming) or double-escape-to-clear (when not)
   useInput((_input, key) => {
+    if (!visible) return;
     if (key.escape) {
       // When streaming, use Esc to interrupt
       if (streaming && onInterrupt && !interruptRequested) {
@@ -138,6 +139,7 @@ export function Input({
 
   // Handle CTRL-C for double-ctrl-c-to-exit
   useInput((input, key) => {
+    if (!visible) return;
     if (input === "c" && key.ctrl) {
       if (ctrlCPressed) {
         // Second CTRL-C - call onExit callback which handles stats and exit
@@ -156,6 +158,7 @@ export function Input({
 
   // Handle Shift+Tab for permission mode cycling
   useInput((_input, key) => {
+    if (!visible) return;
     if (key.shift && key.tab) {
       // Cycle through permission modes
       const modes: PermissionMode[] = [
@@ -181,6 +184,7 @@ export function Input({
 
   // Handle up/down arrow keys for wrapped text navigation and command history
   useInput((_input, key) => {
+    if (!visible) return;
     // Don't interfere with autocomplete navigation
     if (isAutocompleteActive) {
       return;

src/cli/components/QuestionDialog.tsx

@@ -0,0 +1,217 @@
+import { Box, Text, useInput } from "ink";
+import { memo, useState } from "react";
+import { colors } from "./colors";
+import { PasteAwareTextInput } from "./PasteAwareTextInput";
+
+interface QuestionOption {
+  label: string;
+  description: string;
+}
+
+interface Question {
+  question: string;
+  header: string;
+  options: QuestionOption[];
+  multiSelect: boolean;
+}
+
+type Props = {
+  questions: Question[];
+  onSubmit: (answers: Record<string, string>) => void;
+};
+
+export const QuestionDialog = memo(({ questions, onSubmit }: Props) => {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [selectedOption, setSelectedOption] = useState(0);
+  const [isOtherMode, setIsOtherMode] = useState(false);
+  const [otherText, setOtherText] = useState("");
+  const [selectedMulti, setSelectedMulti] = useState<Set<number>>(new Set());
+
+  const currentQuestion = questions[currentQuestionIndex];
+  const optionsWithOther = currentQuestion
+    ? [
+        ...currentQuestion.options,
+        { label: "Other", description: "Provide a custom response" },
+      ]
+    : [];
+
+  const handleSubmitAnswer = (answer: string) => {
+    if (!currentQuestion) return;
+    const newAnswers = {
+      ...answers,
+      [currentQuestion.question]: answer,
+    };
+    setAnswers(newAnswers);
+
+    if (currentQuestionIndex < questions.length - 1) {
+      setCurrentQuestionIndex(currentQuestionIndex + 1);
+      setSelectedOption(0);
+      setIsOtherMode(false);
+      setOtherText("");
+      setSelectedMulti(new Set());
+    } else {
+      onSubmit(newAnswers);
+    }
+  };
+
+  useInput((input, key) => {
+    if (!currentQuestion) return;
+
+    if (isOtherMode) {
+      if (key.escape) {
+        setIsOtherMode(false);
+        setOtherText("");
+      }
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedOption((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setSelectedOption((prev) =>
+        Math.min(optionsWithOther.length - 1, prev + 1),
+      );
+    } else if (key.return) {
+      if (currentQuestion.multiSelect) {
+        if (selectedOption === optionsWithOther.length - 1) {
+          setIsOtherMode(true);
+        } else if (selectedMulti.size > 0) {
+          const selectedLabels = Array.from(selectedMulti)
+            .map((i) => optionsWithOther[i]?.label)
+            .filter(Boolean)
+            .join(", ");
+          handleSubmitAnswer(selectedLabels);
+        }
+      } else {
+        if (selectedOption === optionsWithOther.length - 1) {
+          setIsOtherMode(true);
+        } else {
+          handleSubmitAnswer(optionsWithOther[selectedOption]?.label || "");
+        }
+      }
+    } else if (input === " " && currentQuestion.multiSelect) {
+      if (selectedOption < optionsWithOther.length - 1) {
+        setSelectedMulti((prev) => {
+          const newSet = new Set(prev);
+          if (newSet.has(selectedOption)) {
+            newSet.delete(selectedOption);
+          } else {
+            newSet.add(selectedOption);
+          }
+          return newSet;
+        });
+      }
+    } else if (input >= "1" && input <= "9") {
+      const optionIndex = Number.parseInt(input, 10) - 1;
+      if (optionIndex < optionsWithOther.length) {
+        if (currentQuestion.multiSelect) {
+          if (optionIndex < optionsWithOther.length - 1) {
+            setSelectedMulti((prev) => {
+              const newSet = new Set(prev);
+              if (newSet.has(optionIndex)) {
+                newSet.delete(optionIndex);
+              } else {
+                newSet.add(optionIndex);
+              }
+              return newSet;
+            });
+          }
+        } else {
+          if (optionIndex === optionsWithOther.length - 1) {
+            setIsOtherMode(true);
+          } else {
+            handleSubmitAnswer(optionsWithOther[optionIndex]?.label || "");
+          }
+        }
+      }
+    }
+  });
+
+  const handleOtherSubmit = (text: string) => {
+    handleSubmitAnswer(text);
+  };
+
+  if (!currentQuestion) return null;
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      <Box marginBottom={1}>
+        <Text color={colors.approval.header}>
+          <Text bold>[{currentQuestion.header}]</Text>{" "}
+          {currentQuestion.question}
+        </Text>
+      </Box>
+
+      {questions.length > 1 && (
+        <Box marginBottom={1}>
+          <Text dimColor>
+            Question {currentQuestionIndex + 1} of {questions.length}
+          </Text>
+        </Box>
+      )}
+
+      {isOtherMode ? (
+        <Box flexDirection="column">
+          <Text dimColor>Type your response (Esc to cancel):</Text>
+          <Box marginTop={1}>
+            <Text color={colors.approval.header}>&gt; </Text>
+            <PasteAwareTextInput
+              value={otherText}
+              onChange={setOtherText}
+              onSubmit={handleOtherSubmit}
+            />
+          </Box>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {optionsWithOther.map((option, index) => {
+            const isSelected = index === selectedOption;
+            const isChecked = selectedMulti.has(index);
+            const color = isSelected ? colors.approval.header : undefined;
+
+            return (
+              <Box
+                key={option.label}
+                flexDirection="column"
+                marginBottom={index < optionsWithOther.length - 1 ? 1 : 0}
+              >
+                <Box flexDirection="row">
+                  <Box width={2} flexShrink={0}>
+                    <Text color={color}>{isSelected ? ">" : " "}</Text>
+                  </Box>
+                  {currentQuestion.multiSelect &&
+                    index < optionsWithOther.length - 1 && (
+                      <Box width={4} flexShrink={0}>
+                        <Text color={color}>[{isChecked ? "x" : " "}]</Text>
+                      </Box>
+                    )}
+                  <Box flexGrow={1}>
+                    <Text color={color} bold={isSelected}>
+                      {index + 1}. {option.label}
+                    </Text>
+                  </Box>
+                </Box>
+                {option.description && (
+                  <Box paddingLeft={currentQuestion.multiSelect ? 6 : 2}>
+                    <Text dimColor>{option.description}</Text>
+                  </Box>
+                )}
+              </Box>
+            );
+          })}
+
+          <Box marginTop={1}>
+            <Text dimColor>
+              {currentQuestion.multiSelect
+                ? "Space to toggle, Enter to confirm selection"
+                : `Enter to select, or type 1-${optionsWithOther.length}`}
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+QuestionDialog.displayName = "QuestionDialog";

src/cli/components/ToolCallMessageRich.tsx

@@ -62,6 +62,7 @@ export const ToolCallMessage = memo(({ line }: { line: ToolCallLine }) => {
   else if (displayName === "ls") displayName = "LS";
   else if (displayName === "todo_write") displayName = "TODO";
   else if (displayName === "TodoWrite") displayName = "TODO";
+  else if (displayName === "EnterPlanMode") displayName = "Planning";
   else if (displayName === "ExitPlanMode") displayName = "Planning";
   // Codex toolset
   else if (displayName === "update_plan") displayName = "Plan";