wave-code 0.5.0 → 0.6.2

package/src/components/{Confirmation.tsx → ConfirmationSelector.tsx}

@@ -3,44 +3,9 @@ import { Box, Text, useInput } from "ink";
 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 = (
-  toolName: string,
-  toolInput?: Record<string, unknown>,
-): string => {
-  if (!toolInput) {
-    return "Execute operation";
-  }
-
-  switch (toolName) {
-    case BASH_TOOL_NAME:
-      return `Execute command: ${toolInput.command || "unknown command"}`;
-    case EDIT_TOOL_NAME:
-      return `Edit file: ${toolInput.file_path || "unknown file"}`;
-    case MULTI_EDIT_TOOL_NAME:
-      return `Edit multiple sections in: ${toolInput.file_path || "unknown file"}`;
-    case DELETE_FILE_TOOL_NAME:
-      return `Delete file: ${toolInput.target_file || "unknown file"}`;
-    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;
@@ -51,7 +16,7 @@ const getHeaderColor = (header: string) => {
   return colors[Math.abs(hash) % colors.length];
 };
 
-export interface ConfirmationProps {
+export interface ConfirmationSelectorProps {
   toolName: string;
   toolInput?: Record<string, unknown>;
   suggestedPrefix?: string;
@@ -66,10 +31,10 @@ interface ConfirmationState {
   selectedOption: "allow" | "auto" | "alternative";
   alternativeText: string;
   alternativeCursorPosition: number;
-  hasUserInput: boolean; // to hide placeholder
+  hasUserInput: boolean;
 }
 
-export const Confirmation: React.FC<ConfirmationProps> = ({
+export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
   toolName,
   toolInput,
   suggestedPrefix,
@@ -86,7 +51,6 @@ 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<
@@ -114,7 +78,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
   };
 
   useInput((input, key) => {
-    // Handle ESC to cancel and abort
     if (key.escape) {
       onCancel();
       onAbort();
@@ -123,10 +86,8 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
 
     if (toolName === ASK_USER_QUESTION_TOOL_NAME) {
       if (!currentQuestion) return;
-
       const options = [...currentQuestion.options, { label: "Other" }];
-      const isMultiSelect = !!currentQuestion.multiSelect;
-
+      const isMultiSelect = currentQuestion.multiSelect;
       const isOtherFocused = selectedOptionIndex === options.length - 1;
 
       if (key.return) {
@@ -135,7 +96,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
           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());
@@ -148,15 +108,12 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
             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);
@@ -164,7 +121,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
           setOtherText("");
           setOtherCursorPosition(0);
         } else {
-          // All questions answered
           onDecision({
             behavior: "allow",
             message: JSON.stringify(newAnswers),
@@ -180,33 +136,23 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
         ) {
           setSelectedOptionIndices((prev) => {
             const next = new Set(prev);
-            if (next.has(selectedOptionIndex)) {
-              next.delete(selectedOptionIndex);
-            } else {
-              next.add(selectedOptionIndex);
-            }
+            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 (!isOtherFocused) return;
       }
 
       if (key.upArrow) {
-        if (selectedOptionIndex > 0) {
+        if (selectedOptionIndex > 0)
           setSelectedOptionIndex(selectedOptionIndex - 1);
-        }
         return;
       }
-
       if (key.downArrow) {
-        if (selectedOptionIndex < options.length - 1) {
+        if (selectedOptionIndex < options.length - 1)
           setSelectedOptionIndex(selectedOptionIndex + 1);
-        }
         return;
       }
 
@@ -223,34 +169,29 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
         }
         if (key.backspace || key.delete) {
           if (otherCursorPosition > 0) {
-            setOtherText((prev) => {
-              const next =
+            setOtherText(
+              (prev) =>
                 prev.slice(0, otherCursorPosition - 1) +
-                prev.slice(otherCursorPosition);
-              return next;
-            });
+                prev.slice(otherCursorPosition),
+            );
             setOtherCursorPosition((prev) => prev - 1);
           }
           return;
         }
         if (input && !key.ctrl && !key.meta) {
-          setOtherText((prev) => {
-            const next =
+          setOtherText(
+            (prev) =>
               prev.slice(0, otherCursorPosition) +
               input +
-              prev.slice(otherCursorPosition);
-            return next;
-          });
+              prev.slice(otherCursorPosition),
+          );
           setOtherCursorPosition((prev) => prev + input.length);
           return;
         }
-        return;
       }
-
       return;
     }
 
-    // Handle Enter to confirm selection
     if (key.return) {
       if (state.selectedOption === "allow") {
         if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
@@ -263,24 +204,12 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
           const rule = suggestedPrefix
             ? `Bash(${suggestedPrefix}*)`
             : `Bash(${toolInput?.command})`;
-          onDecision({
-            behavior: "allow",
-            newPermissionRule: rule,
-          });
+          onDecision({ behavior: "allow", newPermissionRule: rule });
         } else {
-          onDecision({
-            behavior: "allow",
-            newPermissionMode: "acceptEdits",
-          });
-        }
-      } else {
-        // For alternative option, require text input
-        if (state.alternativeText.trim()) {
-          onDecision({
-            behavior: "deny",
-            message: state.alternativeText.trim(),
-          });
+          onDecision({ behavior: "allow", newPermissionMode: "acceptEdits" });
         }
+      } else if (state.alternativeText.trim()) {
+        onDecision({ behavior: "deny", message: state.alternativeText.trim() });
       }
       return;
     }
@@ -308,15 +237,13 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       }
     }
 
-    // Handle arrow keys for navigation
     if (key.upArrow) {
       setState((prev) => {
-        if (prev.selectedOption === "alternative") {
+        if (prev.selectedOption === "alternative")
           return {
             ...prev,
             selectedOption: hidePersistentOption ? "allow" : "auto",
           };
-        }
         if (prev.selectedOption === "auto")
           return { ...prev, selectedOption: "allow" };
         return prev;
@@ -326,12 +253,11 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
 
     if (key.downArrow) {
       setState((prev) => {
-        if (prev.selectedOption === "allow") {
+        if (prev.selectedOption === "allow")
           return {
             ...prev,
             selectedOption: hidePersistentOption ? "alternative" : "auto",
           };
-        }
         if (prev.selectedOption === "auto")
           return { ...prev, selectedOption: "alternative" };
         return prev;
@@ -339,9 +265,7 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       return;
     }
 
-    // Handle text input for alternative option
     if (input && !key.ctrl && !key.meta && !("alt" in key && key.alt)) {
-      // Focus on alternative option when user starts typing
       setState((prev) => {
         const nextText =
           prev.alternativeText.slice(0, prev.alternativeCursorPosition) +
@@ -359,7 +283,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
       return;
     }
 
-    // Handle backspace and delete
     if (key.backspace || key.delete) {
       setState((prev) => {
         if (prev.alternativeCursorPosition > 0) {
@@ -385,93 +308,65 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
     state.selectedOption === "alternative" && !state.hasUserInput;
 
   return (
-    <Box
-      flexDirection="column"
-      borderStyle="single"
-      borderColor="yellow"
-      borderBottom={false}
-      borderLeft={false}
-      borderRight={false}
-      paddingTop={1}
-    >
-      <Text color="yellow" bold>
-        Tool: {toolName}
-      </Text>
-      <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
-
-      <DiffDisplay toolName={toolName} parameters={JSON.stringify(toolInput)} />
-
+    <Box flexDirection="column">
       {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>
+              <Text color={getHeaderColor(currentQuestion.header)} bold>
+                {currentQuestion.header.slice(0, 12).toUpperCase()}
+              </Text>
+              <Box marginLeft={1}>
+                <Text bold>{currentQuestion.question}</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 ? (
-                                <>
-                                  {otherText.slice(0, otherCursorPosition)}
-                                  <Text backgroundColor="white" color="black">
-                                    {otherText[otherCursorPosition] || " "}
-                                  </Text>
-                                  {otherText.slice(otherCursorPosition + 1)}
-                                </>
-                              ) : (
-                                <Text color="gray" dimColor>
-                                  [Type your answer...]
+              {[...currentQuestion.options, { label: "Other" }].map(
+                (option, index) => {
+                  const isSelected = selectedOptionIndex === index;
+                  const isChecked = currentQuestion.multiSelect
+                    ? selectedOptionIndices.has(index)
+                    : isSelected;
+                  const isOther = index === currentQuestion.options.length;
+                  return (
+                    <Box key={index}>
+                      <Text
+                        color={isSelected ? "black" : "white"}
+                        backgroundColor={isSelected ? "yellow" : undefined}
+                      >
+                        {isSelected ? "> " : "  "}
+                        {currentQuestion.multiSelect
+                          ? isChecked
+                            ? "[x] "
+                            : "[ ] "
+                          : ""}
+                        {option.label}
+                        {option.description ? ` - ${option.description}` : ""}
+                        {isOther && isSelected && (
+                          <Text>
+                            :{" "}
+                            {otherText ? (
+                              <>
+                                {otherText.slice(0, otherCursorPosition)}
+                                <Text backgroundColor="white" color="black">
+                                  {otherText[otherCursorPosition] || " "}
                                 </Text>
-                              )}
-                            </Text>
-                          )}
-                        </Text>
-                      </Box>
-                    );
-                  },
-                );
-              })()}
+                                {otherText.slice(otherCursorPosition + 1)}
+                              </>
+                            ) : (
+                              <Text color="gray" dimColor>
+                                [Type your answer...]
+                              </Text>
+                            )}
+                          </Text>
+                        )}
+                      </Text>
+                    </Box>
+                  );
+                },
+              )}
             </Box>
-
             <Box marginTop={1}>
               <Text dimColor>
                 Question {currentQuestionIndex + 1} of {questions.length} •
@@ -482,23 +377,12 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
           </Box>
         )}
 
-      {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"}
@@ -513,8 +397,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
                   : "Yes"}
               </Text>
             </Box>
-
-            {/* Option 2: Auto-accept/Persistent */}
             {!hidePersistentOption && (
               <Box key="auto-option">
                 <Text
@@ -529,8 +411,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
                 </Text>
               </Box>
             )}
-
-            {/* Option 3: Alternative */}
             <Box key="alternative-option">
               <Text
                 color={
@@ -571,7 +451,6 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
               </Text>
             </Box>
           </Box>
-
           <Box marginTop={1}>
             <Text dimColor>Use ↑↓ to navigate • ESC to cancel</Text>
           </Box>
@@ -580,3 +459,5 @@ export const Confirmation: React.FC<ConfirmationProps> = ({
     </Box>
   );
 };
+
+ConfirmationSelector.displayName = "ConfirmationSelector";

package/src/components/DiffDisplay.tsx

@@ -109,6 +109,15 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
 
       changes.forEach((change, changeIndex) => {
         try {
+          // Add ellipsis between non-contiguous edits in MultiEdit
+          if (toolName === MULTI_EDIT_TOOL_NAME && changeIndex > 0) {
+            allElements.push(
+              <Box key={`multi-edit-separator-${changeIndex}`}>
+                <Text color="gray">...</Text>
+              </Box>,
+            );
+          }
+
           // Get line-level diff to understand the structure
           const lineDiffs = diffLines(
             change.oldContent || "",
@@ -153,7 +162,60 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
               const lines = part.value
                 .split("\n")
                 .filter((line) => line !== "");
-              lines.forEach((line, lineIndex) => {
+
+              const isFirstBlock = partIndex === 0;
+              const isLastBlock = partIndex === lineDiffs.length - 1;
+
+              let linesToDisplay = lines;
+              let showEllipsisTop = false;
+              let showEllipsisBottom = false;
+
+              if (isFirstBlock && !isLastBlock) {
+                // First block: keep last 3
+                if (lines.length > 3) {
+                  linesToDisplay = lines.slice(-3);
+                  showEllipsisTop = true;
+                }
+              } else if (isLastBlock && !isFirstBlock) {
+                // Last block: keep first 3
+                if (lines.length > 3) {
+                  linesToDisplay = lines.slice(0, 3);
+                  showEllipsisBottom = true;
+                }
+              } else if (!isFirstBlock && !isLastBlock) {
+                // Middle block: keep first 3 and last 3
+                if (lines.length > 6) {
+                  linesToDisplay = [...lines.slice(0, 3), ...lines.slice(-3)];
+                  showEllipsisTop = false; // We'll put ellipsis in the middle
+                }
+              } else if (isFirstBlock && isLastBlock) {
+                // Only one block (no changes?) - keep all or apply a general limit
+                // For now, let's keep all if it's the only block
+              }
+
+              if (showEllipsisTop) {
+                diffElements.push(
+                  <Box key={`ellipsis-top-${changeIndex}-${partIndex}`}>
+                    <Text color="gray"> ...</Text>
+                  </Box>,
+                );
+              }
+
+              linesToDisplay.forEach((line, lineIndex) => {
+                // If it's a middle block and we are at the split point
+                if (
+                  !isFirstBlock &&
+                  !isLastBlock &&
+                  lines.length > 6 &&
+                  lineIndex === 3
+                ) {
+                  diffElements.push(
+                    <Box key={`ellipsis-mid-${changeIndex}-${partIndex}`}>
+                      <Text color="gray"> ...</Text>
+                    </Box>,
+                  );
+                }
+
                 diffElements.push(
                   <Box
                     key={`context-${changeIndex}-${partIndex}-${lineIndex}`}
@@ -164,6 +226,14 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
                   </Box>,
                 );
               });
+
+              if (showEllipsisBottom) {
+                diffElements.push(
+                  <Box key={`ellipsis-bottom-${changeIndex}-${partIndex}`}>
+                    <Text color="gray"> ...</Text>
+                  </Box>,
+                );
+              }
             }
           });
 

package/src/components/FileSelector.tsx

@@ -52,7 +52,6 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
         borderBottom={false}
         borderLeft={false}
         borderRight={false}
-        paddingTop={1}
       >
         <Text color="yellow">📁 No files found for "{searchQuery}"</Text>
         <Text dimColor>Press Escape to cancel</Text>
@@ -91,7 +90,6 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
-      paddingTop={1}
     >
       <Text color="cyan" bold>
         📁 Select File/Directory{" "}

package/src/components/HelpView.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+
+export interface HelpViewProps {
+  onCancel: () => void;
+}
+
+export const HelpView: React.FC<HelpViewProps> = ({ onCancel }) => {
+  useInput((_, key) => {
+    if (key.escape || key.return) {
+      onCancel();
+    }
+  });
+
+  const helpItems = [
+    { key: "@", description: "Reference files" },
+    { key: "/", description: "Commands" },
+    { key: "Ctrl+R", description: "Search history" },
+    { key: "Ctrl+O", description: "Expand/collapse messages" },
+    { key: "Ctrl+T", description: "Toggle task list" },
+    { key: "Ctrl+B", description: "Background current task" },
+    { key: "Ctrl+V", description: "Paste image" },
+    { key: "Shift+Tab", description: "Cycle permission mode" },
+    {
+      key: "Esc",
+      description: "Interrupt AI or command / Cancel selector / Close help",
+    },
+  ];
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="cyan"
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color="cyan" bold underline>
+          Help & Key Bindings
+        </Text>
+      </Box>
+
+      {helpItems.map((item, index) => (
+        <Box key={index}>
+          <Box width={20}>
+            <Text color="yellow">{item.key}</Text>
+          </Box>
+          <Text color="white">{item.description}</Text>
+        </Box>
+      ))}
+
+      <Box marginTop={1}>
+        <Text dimColor>Press Esc or Enter to close</Text>
+      </Box>
+    </Box>
+  );
+};