wave-code 0.7.0 → 0.7.2

package/src/components/ConfirmationSelector.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text, useInput, useStdout, measureElement } from "ink";
 import type { PermissionDecision, AskUserQuestionInput } from "wave-agent-sdk";
 import {
   BASH_TOOL_NAME,
@@ -25,10 +25,11 @@ export interface ConfirmationSelectorProps {
   onDecision: (decision: PermissionDecision) => void;
   onCancel: () => void;
   onAbort: () => void;
+  onHeightMeasured?: (height: number) => void;
 }
 
 interface ConfirmationState {
-  selectedOption: "allow" | "auto" | "alternative";
+  selectedOption: "clear" | "auto" | "allow" | "alternative";
   alternativeText: string;
   alternativeCursorPosition: number;
   hasUserInput: boolean;
@@ -43,30 +44,41 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
   onDecision,
   onCancel,
   onAbort,
+  onHeightMeasured,
 }) => {
+  const { stdout } = useStdout();
+  const boxRef = useRef(null);
+
+  useLayoutEffect(() => {
+    if (boxRef.current) {
+      const { height } = measureElement(boxRef.current);
+      onHeightMeasured?.(height);
+    }
+  }, [stdout?.rows, onHeightMeasured, toolName, toolInput, isExpanded]);
+
   const [state, setState] = useState<ConfirmationState>({
-    selectedOption: "allow",
+    selectedOption: toolName === EXIT_PLAN_MODE_TOOL_NAME ? "clear" : "allow",
     alternativeText: "",
     alternativeCursorPosition: 0,
     hasUserInput: false,
   });
 
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-  const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
-  const [selectedOptionIndices, setSelectedOptionIndices] = useState<
-    Set<number>
-  >(new Set());
-  const [userAnswers, setUserAnswers] = useState<Record<string, string>>({});
-  const [otherText, setOtherText] = useState("");
-  const [otherCursorPosition, setOtherCursorPosition] = useState(0);
+  const [questionState, setQuestionState] = useState({
+    currentQuestionIndex: 0,
+    selectedOptionIndex: 0,
+    selectedOptionIndices: new Set<number>(),
+    userAnswers: {} as Record<string, string>,
+    otherText: "",
+    otherCursorPosition: 0,
+  });
 
   const questions =
     (toolInput as unknown as AskUserQuestionInput)?.questions || [];
-  const currentQuestion = questions[currentQuestionIndex];
+  const currentQuestion = questions[questionState.currentQuestionIndex];
 
   const getAutoOptionText = () => {
     if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
-      return "Yes, and auto-accept edits";
+      return "Yes, auto-accept edits";
     }
     if (toolName === BASH_TOOL_NAME) {
       if (suggestedPrefix) {
@@ -88,112 +100,156 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
       if (!currentQuestion) return;
       const options = [...currentQuestion.options, { label: "Other" }];
       const isMultiSelect = currentQuestion.multiSelect;
-      const isOtherFocused = selectedOptionIndex === options.length - 1;
 
       if (key.return) {
-        let answer = "";
-        if (isMultiSelect) {
-          const selectedLabels = Array.from(selectedOptionIndices)
-            .filter((i) => i < currentQuestion.options.length)
-            .map((i) => currentQuestion.options[i].label);
-          const isOtherChecked = selectedOptionIndices.has(options.length - 1);
-          if (isOtherChecked && otherText.trim()) {
-            selectedLabels.push(otherText.trim());
+        setQuestionState((prev) => {
+          const isOtherFocused =
+            prev.selectedOptionIndex === options.length - 1;
+          let answer = "";
+          if (isMultiSelect) {
+            const selectedLabels = Array.from(prev.selectedOptionIndices)
+              .filter((i) => i < currentQuestion.options.length)
+              .map((i) => currentQuestion.options[i].label);
+            const isOtherChecked = prev.selectedOptionIndices.has(
+              options.length - 1,
+            );
+            if (isOtherChecked && prev.otherText.trim()) {
+              selectedLabels.push(prev.otherText.trim());
+            }
+            answer = selectedLabels.join(", ");
+          } else {
+            if (isOtherFocused) {
+              answer = prev.otherText.trim();
+            } else {
+              answer = options[prev.selectedOptionIndex].label;
+            }
           }
-          answer = selectedLabels.join(", ");
-        } else {
-          if (isOtherFocused) {
-            answer = otherText.trim();
+
+          if (!answer) return prev;
+
+          const newAnswers = {
+            ...prev.userAnswers,
+            [currentQuestion.question]: answer,
+          };
+
+          if (prev.currentQuestionIndex < questions.length - 1) {
+            return {
+              ...prev,
+              currentQuestionIndex: prev.currentQuestionIndex + 1,
+              selectedOptionIndex: 0,
+              selectedOptionIndices: new Set(),
+              userAnswers: newAnswers,
+              otherText: "",
+              otherCursorPosition: 0,
+            };
           } else {
-            answer = options[selectedOptionIndex].label;
+            onDecision({
+              behavior: "allow",
+              message: JSON.stringify(newAnswers),
+            });
+            return {
+              ...prev,
+              userAnswers: newAnswers,
+            };
           }
-        }
-        if (!answer) return;
-        const newAnswers = {
-          ...userAnswers,
-          [currentQuestion.question]: answer,
-        };
-        setUserAnswers(newAnswers);
-        if (currentQuestionIndex < questions.length - 1) {
-          setCurrentQuestionIndex(currentQuestionIndex + 1);
-          setSelectedOptionIndex(0);
-          setSelectedOptionIndices(new Set());
-          setOtherText("");
-          setOtherCursorPosition(0);
-        } else {
-          onDecision({
-            behavior: "allow",
-            message: JSON.stringify(newAnswers),
-          });
-        }
+        });
         return;
       }
 
       if (input === " ") {
-        if (
-          isMultiSelect &&
-          (!isOtherFocused || !selectedOptionIndices.has(selectedOptionIndex))
-        ) {
-          setSelectedOptionIndices((prev) => {
-            const next = new Set(prev);
-            if (next.has(selectedOptionIndex)) next.delete(selectedOptionIndex);
-            else next.add(selectedOptionIndex);
-            return next;
-          });
-          return;
-        }
-        if (!isOtherFocused) return;
+        setQuestionState((prev) => {
+          const isOtherFocused =
+            prev.selectedOptionIndex === options.length - 1;
+          if (
+            isMultiSelect &&
+            (!isOtherFocused ||
+              !prev.selectedOptionIndices.has(prev.selectedOptionIndex))
+          ) {
+            const nextIndices = new Set(prev.selectedOptionIndices);
+            if (nextIndices.has(prev.selectedOptionIndex))
+              nextIndices.delete(prev.selectedOptionIndex);
+            else nextIndices.add(prev.selectedOptionIndex);
+            return {
+              ...prev,
+              selectedOptionIndices: nextIndices,
+            };
+          }
+          return prev;
+        });
+        // If it's other and focused, we don't return here, allowing the input handler below to handle it
       }
 
       if (key.upArrow) {
-        if (selectedOptionIndex > 0)
-          setSelectedOptionIndex(selectedOptionIndex - 1);
+        setQuestionState((prev) => ({
+          ...prev,
+          selectedOptionIndex: Math.max(0, prev.selectedOptionIndex - 1),
+        }));
         return;
       }
       if (key.downArrow) {
-        if (selectedOptionIndex < options.length - 1)
-          setSelectedOptionIndex(selectedOptionIndex + 1);
+        setQuestionState((prev) => ({
+          ...prev,
+          selectedOptionIndex: Math.min(
+            options.length - 1,
+            prev.selectedOptionIndex + 1,
+          ),
+        }));
         return;
       }
 
-      if (isOtherFocused) {
-        if (key.leftArrow) {
-          setOtherCursorPosition((prev) => Math.max(0, prev - 1));
-          return;
-        }
-        if (key.rightArrow) {
-          setOtherCursorPosition((prev) =>
-            Math.min(otherText.length, prev + 1),
-          );
-          return;
-        }
-        if (key.backspace || key.delete) {
-          if (otherCursorPosition > 0) {
-            setOtherText(
-              (prev) =>
-                prev.slice(0, otherCursorPosition - 1) +
-                prev.slice(otherCursorPosition),
-            );
-            setOtherCursorPosition((prev) => prev - 1);
+      setQuestionState((prev) => {
+        const isOtherFocused = prev.selectedOptionIndex === options.length - 1;
+        if (isOtherFocused) {
+          if (key.leftArrow) {
+            return {
+              ...prev,
+              otherCursorPosition: Math.max(0, prev.otherCursorPosition - 1),
+            };
+          }
+          if (key.rightArrow) {
+            return {
+              ...prev,
+              otherCursorPosition: Math.min(
+                prev.otherText.length,
+                prev.otherCursorPosition + 1,
+              ),
+            };
+          }
+          if (key.backspace || key.delete) {
+            if (prev.otherCursorPosition > 0) {
+              return {
+                ...prev,
+                otherText:
+                  prev.otherText.slice(0, prev.otherCursorPosition - 1) +
+                  prev.otherText.slice(prev.otherCursorPosition),
+                otherCursorPosition: prev.otherCursorPosition - 1,
+              };
+            }
+          }
+          if (input && !key.ctrl && !key.meta) {
+            return {
+              ...prev,
+              otherText:
+                prev.otherText.slice(0, prev.otherCursorPosition) +
+                input +
+                prev.otherText.slice(prev.otherCursorPosition),
+              otherCursorPosition: prev.otherCursorPosition + input.length,
+            };
           }
-          return;
-        }
-        if (input && !key.ctrl && !key.meta) {
-          setOtherText(
-            (prev) =>
-              prev.slice(0, otherCursorPosition) +
-              input +
-              prev.slice(otherCursorPosition),
-          );
-          setOtherCursorPosition((prev) => prev + input.length);
-          return;
         }
-      }
+        return prev;
+      });
       return;
     }
 
     if (key.return) {
-      if (state.selectedOption === "allow") {
+      if (state.selectedOption === "clear") {
+        onDecision({
+          behavior: "allow",
+          newPermissionMode: "acceptEdits",
+          clearContext: true,
+        });
+      } else if (state.selectedOption === "allow") {
         if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
           onDecision({ behavior: "allow", newPermissionMode: "default" });
         } else {
@@ -237,31 +293,31 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
       }
     }
 
+    const availableOptions: ConfirmationState["selectedOption"][] = [];
+    if (toolName === EXIT_PLAN_MODE_TOOL_NAME) availableOptions.push("clear");
+    availableOptions.push("allow");
+    if (!hidePersistentOption) availableOptions.push("auto");
+    availableOptions.push("alternative");
+
     if (key.upArrow) {
-      setState((prev) => {
-        if (prev.selectedOption === "alternative")
-          return {
-            ...prev,
-            selectedOption: hidePersistentOption ? "allow" : "auto",
-          };
-        if (prev.selectedOption === "auto")
-          return { ...prev, selectedOption: "allow" };
-        return prev;
-      });
+      const currentIndex = availableOptions.indexOf(state.selectedOption);
+      if (currentIndex > 0) {
+        setState((prev) => ({
+          ...prev,
+          selectedOption: availableOptions[currentIndex - 1],
+        }));
+      }
       return;
     }
 
     if (key.downArrow) {
-      setState((prev) => {
-        if (prev.selectedOption === "allow")
-          return {
-            ...prev,
-            selectedOption: hidePersistentOption ? "alternative" : "auto",
-          };
-        if (prev.selectedOption === "auto")
-          return { ...prev, selectedOption: "alternative" };
-        return prev;
-      });
+      const currentIndex = availableOptions.indexOf(state.selectedOption);
+      if (currentIndex < availableOptions.length - 1) {
+        setState((prev) => ({
+          ...prev,
+          selectedOption: availableOptions[currentIndex + 1],
+        }));
+      }
       return;
     }
 
@@ -303,12 +359,12 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     }
   });
 
-  const placeholderText = "Type here to tell Wave what to do differently";
+  const placeholderText = "Type here to tell Wave what to change";
   const showPlaceholder =
     state.selectedOption === "alternative" && !state.hasUserInput;
 
   return (
-    <Box flexDirection="column">
+    <Box ref={boxRef} flexDirection="column">
       {toolName === ASK_USER_QUESTION_TOOL_NAME &&
         currentQuestion &&
         !isExpanded && (
@@ -324,9 +380,10 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
             <Box flexDirection="column">
               {[...currentQuestion.options, { label: "Other" }].map(
                 (option, index) => {
-                  const isSelected = selectedOptionIndex === index;
+                  const isSelected =
+                    questionState.selectedOptionIndex === index;
                   const isChecked = currentQuestion.multiSelect
-                    ? selectedOptionIndices.has(index)
+                    ? questionState.selectedOptionIndices.has(index)
                     : isSelected;
                   const isOther = index === currentQuestion.options.length;
                   return (
@@ -346,13 +403,20 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
                         {isOther && isSelected && (
                           <Text>
                             :{" "}
-                            {otherText ? (
+                            {questionState.otherText ? (
                               <>
-                                {otherText.slice(0, otherCursorPosition)}
+                                {questionState.otherText.slice(
+                                  0,
+                                  questionState.otherCursorPosition,
+                                )}
                                 <Text backgroundColor="white" color="black">
-                                  {otherText[otherCursorPosition] || " "}
+                                  {questionState.otherText[
+                                    questionState.otherCursorPosition
+                                  ] || " "}
                                 </Text>
-                                {otherText.slice(otherCursorPosition + 1)}
+                                {questionState.otherText.slice(
+                                  questionState.otherCursorPosition + 1,
+                                )}
                               </>
                             ) : (
                               <Text color="gray" dimColor>
@@ -369,7 +433,8 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
             </Box>
             <Box marginTop={1}>
               <Text dimColor>
-                Question {currentQuestionIndex + 1} of {questions.length} •
+                Question {questionState.currentQuestionIndex + 1} of{" "}
+                {questions.length} •
                 {currentQuestion.multiSelect ? " Space to toggle •" : ""} Use ↑↓
                 to navigate • Enter to confirm
               </Text>
@@ -383,6 +448,20 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
             <Text>Do you want to proceed?</Text>
           </Box>
           <Box marginTop={1} flexDirection="column">
+            {toolName === EXIT_PLAN_MODE_TOOL_NAME && (
+              <Box key="clear-option">
+                <Text
+                  color={state.selectedOption === "clear" ? "black" : "white"}
+                  backgroundColor={
+                    state.selectedOption === "clear" ? "yellow" : undefined
+                  }
+                  bold={state.selectedOption === "clear"}
+                >
+                  {state.selectedOption === "clear" ? "> " : "  "}
+                  Yes, clear context and auto-accept edits
+                </Text>
+              </Box>
+            )}
             <Box key="allow-option">
               <Text
                 color={state.selectedOption === "allow" ? "black" : "white"}
@@ -393,8 +472,8 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
               >
                 {state.selectedOption === "allow" ? "> " : "  "}
                 {toolName === EXIT_PLAN_MODE_TOOL_NAME
-                  ? "Yes, proceed with default mode"
-                  : "Yes"}
+                  ? "Yes, manually approve edits"
+                  : "Yes, proceed"}
               </Text>
             </Box>
             {!hidePersistentOption && (
@@ -444,7 +523,7 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
                         )}
                       </>
                     ) : (
-                      "Type here to tell Wave what to do differently"
+                      "Type here to tell Wave what to change"
                     )}
                   </Text>
                 )}