wave-code 0.0.16 → 0.0.17

package/src/components/Confirmation.tsx

@@ -1,6 +1,17 @@
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
-import type { PermissionDecision } from "wave-agent-sdk";
+import type { PermissionDecision, AskUserQuestionInput } from "wave-agent-sdk";
+import {
+  BASH_TOOL_NAME,
+  EDIT_TOOL_NAME,
+  MULTI_EDIT_TOOL_NAME,
+  DELETE_FILE_TOOL_NAME,
+  WRITE_TOOL_NAME,
+  EXIT_PLAN_MODE_TOOL_NAME,
+  ASK_USER_QUESTION_TOOL_NAME,
+} from "wave-agent-sdk";
+import { DiffDisplay } from "./DiffDisplay.js";
+import { PlanDisplay } from "./PlanDisplay.js";
 
 // Helper function to generate descriptive action text
 const getActionDescription = (
@@ -12,26 +23,40 @@ const getActionDescription = (
   }
 
   switch (toolName) {
-    case "Bash":
+    case BASH_TOOL_NAME:
       return `Execute command: ${toolInput.command || "unknown command"}`;
-    case "Edit":
+    case EDIT_TOOL_NAME:
       return `Edit file: ${toolInput.file_path || "unknown file"}`;
-    case "MultiEdit":
+    case MULTI_EDIT_TOOL_NAME:
       return `Edit multiple sections in: ${toolInput.file_path || "unknown file"}`;
-    case "Delete":
+    case DELETE_FILE_TOOL_NAME:
       return `Delete file: ${toolInput.target_file || "unknown file"}`;
-    case "Write":
+    case WRITE_TOOL_NAME:
       return `Write to file: ${toolInput.file_path || "unknown file"}`;
+    case EXIT_PLAN_MODE_TOOL_NAME:
+      return "Review and approve the plan";
+    case ASK_USER_QUESTION_TOOL_NAME:
+      return "Answer questions to clarify intent";
     default:
       return "Execute operation";
   }
 };
 
+const getHeaderColor = (header: string) => {
+  const colors = ["red", "green", "blue", "magenta", "cyan"] as const;
+  let hash = 0;
+  for (let i = 0; i < header.length; i++) {
+    hash = header.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+};
+
 export interface ConfirmationProps {
   toolName: string;
   toolInput?: Record<string, unknown>;
   suggestedPrefix?: string;
   hidePersistentOption?: boolean;
+  isExpanded?: boolean;
   onDecision: (decision: PermissionDecision) => void;
   onCancel: () => void;
   onAbort: () => void;
@@ -48,6 +73,7 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
   toolInput,
   suggestedPrefix,
   hidePersistentOption,
+  isExpanded = false,
   onDecision,
   onCancel,
   onAbort,
@@ -58,8 +84,24 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
     hasUserInput: false,
   });
 
+  // Specialized state for AskUserQuestion
+  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 questions =
+    (toolInput as unknown as AskUserQuestionInput)?.questions || [];
+  const currentQuestion = questions[currentQuestionIndex];
+
   const getAutoOptionText = () => {
-    if (toolName === "Bash") {
+    if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
+      return "Yes, and auto-accept edits";
+    }
+    if (toolName === BASH_TOOL_NAME) {
       if (suggestedPrefix) {
         return `Yes, and don't ask again for: ${suggestedPrefix}`;
       }
@@ -76,12 +118,116 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       return;
     }
 
+    if (toolName === ASK_USER_QUESTION_TOOL_NAME) {
+      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());
+          }
+          answer = selectedLabels.join(", ");
+        } else {
+          if (isOtherFocused) {
+            answer = otherText.trim();
+          } else {
+            answer = options[selectedOptionIndex].label;
+          }
+        }
+
+        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("");
+        } else {
+          // All questions answered
+          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;
+        }
+        // If isOtherFocused is true, fall through to handle space as text input
+      }
+
+      if (key.upArrow) {
+        if (selectedOptionIndex > 0) {
+          setSelectedOptionIndex(selectedOptionIndex - 1);
+        }
+        return;
+      }
+
+      if (key.downArrow) {
+        if (selectedOptionIndex < options.length - 1) {
+          setSelectedOptionIndex(selectedOptionIndex + 1);
+        }
+        return;
+      }
+
+      if (isOtherFocused) {
+        if (key.backspace || key.delete) {
+          setOtherText((prev) => prev.slice(0, -1));
+        } else if (input && !key.ctrl && !key.meta) {
+          setOtherText((prev) => prev + input);
+        }
+        return;
+      }
+
+      return;
+    }
+
     // Handle Enter to confirm selection
     if (key.return) {
       if (state.selectedOption === "allow") {
-        onDecision({ behavior: "allow" });
+        if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
+          onDecision({ behavior: "allow", newPermissionMode: "default" });
+        } else {
+          onDecision({ behavior: "allow" });
+        }
       } else if (state.selectedOption === "auto") {
-        if (toolName === "Bash") {
+        if (toolName === BASH_TOOL_NAME) {
           const rule = suggestedPrefix
             ? `Bash(${suggestedPrefix}:*)`
             : `Bash(${toolInput?.command})`;
@@ -107,41 +253,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       return;
     }
 
-    // Handle numeric keys for quick selection (only if not typing in alternative)
-    if (state.selectedOption !== "alternative" || !state.hasUserInput) {
-      if (input === "1") {
-        onDecision({ behavior: "allow" });
-        return;
-      }
-      if (input === "2") {
-        if (!hidePersistentOption) {
-          if (toolName === "Bash") {
-            const rule = suggestedPrefix
-              ? `Bash(${suggestedPrefix}:*)`
-              : `Bash(${toolInput?.command})`;
-            onDecision({
-              behavior: "allow",
-              newPermissionRule: rule,
-            });
-          } else {
-            onDecision({
-              behavior: "allow",
-              newPermissionMode: "acceptEdits",
-            });
-          }
-          return;
-        } else {
-          // If auto option is hidden, '2' selects alternative
-          setState((prev) => ({ ...prev, selectedOption: "alternative" }));
-          return;
-        }
-      }
-      if (input === "3" && !hidePersistentOption) {
-        setState((prev) => ({ ...prev, selectedOption: "alternative" }));
-        return;
-      }
-    }
-
     // Handle arrow keys for navigation
     if (key.upArrow) {
       setState((prev) => {
@@ -208,79 +319,174 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       flexDirection="column"
       borderStyle="single"
       borderColor="yellow"
-      padding={1}
-      marginBottom={1}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingTop={1}
     >
       <Text color="yellow" bold>
         Tool: {toolName}
       </Text>
       <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
 
-      <Box marginTop={1}>
-        <Text>Do you want to proceed?</Text>
-      </Box>
-
-      <Box marginTop={1} flexDirection="column">
-        {/* Option 1: Yes */}
-        <Box key="allow-option">
-          <Text
-            color={state.selectedOption === "allow" ? "black" : "white"}
-            backgroundColor={
-              state.selectedOption === "allow" ? "yellow" : undefined
-            }
-            bold={state.selectedOption === "allow"}
-          >
-            {state.selectedOption === "allow" ? "> " : "  "}1. Yes
-          </Text>
-        </Box>
-
-        {/* Option 2: Auto-accept/Persistent */}
-        {!hidePersistentOption && (
-          <Box key="auto-option">
-            <Text
-              color={state.selectedOption === "auto" ? "black" : "white"}
-              backgroundColor={
-                state.selectedOption === "auto" ? "yellow" : undefined
-              }
-              bold={state.selectedOption === "auto"}
-            >
-              {state.selectedOption === "auto" ? "> " : "  "}2.{" "}
-              {getAutoOptionText()}
-            </Text>
+      <DiffDisplay
+        toolName={toolName}
+        parameters={JSON.stringify(toolInput)}
+        isExpanded={isExpanded}
+      />
+
+      {toolName === ASK_USER_QUESTION_TOOL_NAME &&
+        currentQuestion &&
+        !isExpanded && (
+          <Box flexDirection="column" marginTop={1}>
+            <Box marginBottom={1}>
+              <Box
+                backgroundColor={getHeaderColor(currentQuestion.header)}
+                paddingX={1}
+                marginRight={1}
+              >
+                <Text color="black" bold>
+                  {currentQuestion.header.slice(0, 12).toUpperCase()}
+                </Text>
+              </Box>
+              <Text bold>{currentQuestion.question}</Text>
+            </Box>
+
+            <Box flexDirection="column">
+              {(() => {
+                const isMultiSelect = !!currentQuestion.multiSelect;
+                return [...currentQuestion.options, { label: "Other" }].map(
+                  (option, index) => {
+                    const isSelected = selectedOptionIndex === index;
+                    const isChecked = isMultiSelect
+                      ? selectedOptionIndices.has(index)
+                      : isSelected;
+                    const isOther = index === currentQuestion.options.length;
+                    const isRecommended = !isOther && option.isRecommended;
+
+                    return (
+                      <Box key={index}>
+                        <Text
+                          color={isSelected ? "black" : "white"}
+                          backgroundColor={isSelected ? "yellow" : undefined}
+                        >
+                          {isSelected ? "> " : "  "}
+                          {isMultiSelect ? (isChecked ? "[x] " : "[ ] ") : ""}
+                          {option.label}
+                          {isRecommended && (
+                            <Text color="green" bold>
+                              {" "}
+                              (Recommended)
+                            </Text>
+                          )}
+                          {option.description ? ` - ${option.description}` : ""}
+                          {isOther && isSelected && (
+                            <Text>
+                              :{" "}
+                              {otherText || (
+                                <Text color="gray" dimColor>
+                                  [Type your answer...]
+                                </Text>
+                              )}
+                            </Text>
+                          )}
+                        </Text>
+                      </Box>
+                    );
+                  },
+                );
+              })()}
+            </Box>
+
+            <Box marginTop={1}>
+              <Text dimColor>
+                Question {currentQuestionIndex + 1} of {questions.length} •
+                {currentQuestion.multiSelect ? " Space to toggle •" : ""} Use ↑↓
+                to navigate • Enter to confirm
+              </Text>
+            </Box>
           </Box>
         )}
 
-        {/* Option 3: Alternative */}
-        <Box key="alternative-option">
-          <Text
-            color={state.selectedOption === "alternative" ? "black" : "white"}
-            backgroundColor={
-              state.selectedOption === "alternative" ? "yellow" : undefined
-            }
-            bold={state.selectedOption === "alternative"}
-          >
-            {state.selectedOption === "alternative" ? "> " : "  "}
-            {hidePersistentOption ? "2. " : "3. "}
-            {showPlaceholder ? (
-              <Text color="gray" dimColor>
-                {placeholderText}
-              </Text>
-            ) : (
-              <Text>
-                {state.alternativeText ||
-                  "Type here to tell Wave what to do differently"}
+      {toolName !== ASK_USER_QUESTION_TOOL_NAME &&
+        toolName === EXIT_PLAN_MODE_TOOL_NAME &&
+        !!toolInput?.plan_content && (
+          <PlanDisplay
+            plan={toolInput.plan_content as string}
+            isExpanded={isExpanded}
+          />
+        )}
+
+      {toolName !== ASK_USER_QUESTION_TOOL_NAME && !isExpanded && (
+        <>
+          <Box marginTop={1}>
+            <Text>Do you want to proceed?</Text>
+          </Box>
+
+          <Box marginTop={1} flexDirection="column">
+            {/* Option 1: Yes */}
+            <Box key="allow-option">
+              <Text
+                color={state.selectedOption === "allow" ? "black" : "white"}
+                backgroundColor={
+                  state.selectedOption === "allow" ? "yellow" : undefined
+                }
+                bold={state.selectedOption === "allow"}
+              >
+                {state.selectedOption === "allow" ? "> " : "  "}
+                {toolName === EXIT_PLAN_MODE_TOOL_NAME
+                  ? "Yes, proceed with default mode"
+                  : "Yes"}
               </Text>
+            </Box>
+
+            {/* Option 2: Auto-accept/Persistent */}
+            {!hidePersistentOption && (
+              <Box key="auto-option">
+                <Text
+                  color={state.selectedOption === "auto" ? "black" : "white"}
+                  backgroundColor={
+                    state.selectedOption === "auto" ? "yellow" : undefined
+                  }
+                  bold={state.selectedOption === "auto"}
+                >
+                  {state.selectedOption === "auto" ? "> " : "  "}
+                  {getAutoOptionText()}
+                </Text>
+              </Box>
             )}
-          </Text>
-        </Box>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text dimColor>
-          Use ↑↓ or 1-{hidePersistentOption ? "2" : "3"} to navigate • ESC to
-          cancel
-        </Text>
-      </Box>
+
+            {/* Option 3: Alternative */}
+            <Box key="alternative-option">
+              <Text
+                color={
+                  state.selectedOption === "alternative" ? "black" : "white"
+                }
+                backgroundColor={
+                  state.selectedOption === "alternative" ? "yellow" : undefined
+                }
+                bold={state.selectedOption === "alternative"}
+              >
+                {state.selectedOption === "alternative" ? "> " : "  "}
+                {showPlaceholder ? (
+                  <Text color="gray" dimColor>
+                    {placeholderText}
+                  </Text>
+                ) : (
+                  <Text>
+                    {state.alternativeText ||
+                      "Type here to tell Wave what to do differently"}
+                  </Text>
+                )}
+              </Text>
+            </Box>
+          </Box>
+
+          <Box marginTop={1}>
+            <Text dimColor>Use ↑↓ to navigate • ESC to cancel</Text>
+          </Box>
+        </>
+      )}
     </Box>
   );
 };