wave-code 0.14.4 → 0.15.1

package/src/components/CommandSelector.tsx

@@ -1,14 +1,18 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import type { SlashCommand } from "wave-agent-sdk";
 import { AVAILABLE_COMMANDS } from "../constants/commands.js";
+import {
+  selectorReducer,
+  type SelectorState,
+} from "../reducers/selectorReducer.js";
 
 export interface CommandSelectorProps {
   searchQuery: string;
   onSelect: (command: string) => void;
-  onInsert?: (command: string) => void; // New: Tab key to insert command into input box
+  onInsert?: (command: string) => void;
   onCancel: () => void;
-  commands?: SlashCommand[]; // New optional command list parameter
+  commands?: SlashCommand[];
 }
 
 export const CommandSelector: React.FC<CommandSelectorProps> = ({
@@ -16,14 +20,19 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
   onSelect,
   onInsert,
   onCancel,
-  commands = [], // Default to empty array
+  commands = [],
 }) => {
   const MAX_VISIBLE_ITEMS = 3;
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [state, dispatch] = useReducer(selectorReducer, {
+    selectedIndex: 0,
+    pendingDecision: null,
+  } as SelectorState);
+
+  const { selectedIndex, pendingDecision } = state;
 
   // Reset selected index when search query changes
-  React.useEffect(() => {
-    setSelectedIndex(0);
+  useEffect(() => {
+    dispatch({ type: "RESET_INDEX" });
   }, [searchQuery]);
 
   // Merge agent commands and local commands
@@ -36,58 +45,58 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       command.id.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
-  // Calculate visible window
-  const startIndex = Math.max(
-    0,
-    Math.min(
-      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
-      Math.max(0, filteredCommands.length - MAX_VISIBLE_ITEMS),
-    ),
-  );
-  const visibleCommands = filteredCommands.slice(
-    startIndex,
-    startIndex + MAX_VISIBLE_ITEMS,
-  );
+  // Handle decisions from reducer
+  useEffect(() => {
+    if (!pendingDecision) return;
 
-  useInput((input, key) => {
-    if (key.return) {
+    if (pendingDecision === "select") {
       if (
         filteredCommands.length > 0 &&
         selectedIndex < filteredCommands.length
       ) {
-        const selectedCommand = filteredCommands[selectedIndex].id;
-        onSelect(selectedCommand);
+        onSelect(filteredCommands[selectedIndex].id);
       }
-      return;
-    }
-
-    if (key.tab && onInsert) {
+    } else if (pendingDecision === "insert" && onInsert) {
       if (
         filteredCommands.length > 0 &&
         selectedIndex < filteredCommands.length
       ) {
-        const selectedCommand = filteredCommands[selectedIndex].id;
-        onInsert(selectedCommand);
+        onInsert(filteredCommands[selectedIndex].id);
       }
-      return;
-    }
-
-    if (key.escape) {
+    } else if (pendingDecision === "cancel") {
       onCancel();
-      return;
     }
 
-    if (key.upArrow) {
-      setSelectedIndex(Math.max(0, selectedIndex - 1));
-      return;
-    }
+    dispatch({ type: "CLEAR_DECISION" });
+  }, [
+    pendingDecision,
+    selectedIndex,
+    filteredCommands,
+    onSelect,
+    onInsert,
+    onCancel,
+  ]);
 
-    if (key.downArrow) {
-      setSelectedIndex(
-        Math.min(filteredCommands.length - 1, selectedIndex + 1),
-      );
-      return;
-    }
+  // Calculate visible window
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, filteredCommands.length - MAX_VISIBLE_ITEMS),
+    ),
+  );
+  const visibleCommands = filteredCommands.slice(
+    startIndex,
+    startIndex + MAX_VISIBLE_ITEMS,
+  );
+
+  useInput((input, key) => {
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: filteredCommands.length - 1,
+      hasInsert: !!onInsert,
+    });
   });
 
   if (filteredCommands.length === 0) {

package/src/components/ConfirmationSelector.tsx

@@ -7,10 +7,7 @@ import {
   ENTER_PLAN_MODE_TOOL_NAME,
   ASK_USER_QUESTION_TOOL_NAME,
 } from "wave-agent-sdk";
-import {
-  confirmationReducer,
-  type ConfirmationState,
-} from "../reducers/confirmationReducer.js";
+import { confirmationReducer } from "../reducers/confirmationReducer.js";
 import { questionReducer } from "../reducers/questionReducer.js";
 
 const getHeaderColor = (header: string) => {
@@ -67,12 +64,14 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
   useEffect(() => {
     if (state.decision) {
       onDecision(state.decision);
+      dispatch({ type: "CLEAR_DECISION" });
     }
   }, [state.decision, onDecision]);
 
   useEffect(() => {
     if (questionState.decision) {
       onDecision(questionState.decision);
+      questionDispatch({ type: "CLEAR_DECISION" });
     }
   }, [questionState.decision, onDecision]);
 
@@ -105,206 +104,23 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     }
 
     if (toolName === ASK_USER_QUESTION_TOOL_NAME) {
-      if (!currentQuestion) return;
-      const options = [...currentQuestion.options, { label: "Other" }];
-      const isMultiSelect = currentQuestion.multiSelect;
-
-      if (key.return) {
-        questionDispatch({
-          type: "CONFIRM_ANSWER",
-          currentQuestion,
-          options,
-          isMultiSelect: !!isMultiSelect,
-          questions,
-        });
-        return;
-      }
-
-      if (input === " ") {
-        const isOtherFocused =
-          questionState.selectedOptionIndex === options.length - 1;
-        if (
-          isMultiSelect &&
-          (!isOtherFocused ||
-            !questionState.selectedOptionIndices.has(
-              questionState.selectedOptionIndex,
-            ))
-        ) {
-          questionDispatch({
-            type: "TOGGLE_MULTI_SELECT",
-            optionsLength: options.length,
-          });
-          return;
-        }
-        // If it's other and focused, we don't return here, allowing the input handler below to handle it
-      }
-
-      if (key.upArrow) {
-        questionDispatch({
-          type: "MOVE_OPTION_UP",
-          maxIndex: options.length - 1,
-        });
-        return;
-      }
-      if (key.downArrow) {
-        questionDispatch({
-          type: "MOVE_OPTION_DOWN",
-          maxIndex: options.length - 1,
-        });
-        return;
-      }
-      if (key.tab) {
-        questionDispatch({
-          type: "CYCLE_QUESTION",
-          shift: key.shift,
-          questionCount: questions.length,
-        });
-        return;
-      }
-
-      // Always dispatch Other actions unconditionally; the reducer checks
-      // isOtherFocused from the latest state, so this works correctly even
-      // when inputs are batched before React re-renders.
-      if (key.leftArrow) {
-        questionDispatch({
-          type: "MOVE_OTHER_LEFT",
-          optionsLength: options.length,
-        });
-        return;
-      }
-      if (key.rightArrow) {
-        questionDispatch({
-          type: "MOVE_OTHER_RIGHT",
-          optionsLength: options.length,
-        });
-        return;
-      }
-      if (key.backspace || key.delete) {
-        questionDispatch({
-          type: "DELETE_OTHER",
-          optionsLength: options.length,
-        });
-        return;
-      }
-      if (input && !key.ctrl && !key.meta) {
-        questionDispatch({
-          type: "INSERT_OTHER",
-          text: input,
-          optionsLength: options.length,
-        });
-        return;
-      }
-      return;
-    }
-
-    if (key.return) {
-      let decision: PermissionDecision | null = null;
-      if (state.selectedOption === "clear") {
-        decision = {
-          behavior: "allow",
-          newPermissionMode: "acceptEdits",
-          clearContext: true,
-        };
-      } else if (state.selectedOption === "allow") {
-        if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
-          decision = { behavior: "allow", newPermissionMode: "default" };
-        } else if (toolName === ENTER_PLAN_MODE_TOOL_NAME) {
-          decision = { behavior: "allow", newPermissionMode: "plan" };
-        } else {
-          decision = { behavior: "allow" };
-        }
-      } else if (state.selectedOption === "auto") {
-        if (toolName === BASH_TOOL_NAME) {
-          const command = (toolInput?.command as string) || "";
-          if (command.trim().startsWith("mkdir")) {
-            decision = { behavior: "allow", newPermissionMode: "acceptEdits" };
-          } else {
-            const rule = suggestedPrefix
-              ? `Bash(${suggestedPrefix})`
-              : `Bash(${toolInput?.command})`;
-            decision = { behavior: "allow", newPermissionRule: rule };
-          }
-        } else if (toolName === ENTER_PLAN_MODE_TOOL_NAME) {
-          decision = { behavior: "allow", newPermissionMode: "plan" };
-        } else if (toolName.startsWith("mcp__")) {
-          decision = { behavior: "allow", newPermissionRule: toolName };
-        } else {
-          decision = { behavior: "allow", newPermissionMode: "acceptEdits" };
-        }
-      } else if (state.alternativeText.trim()) {
-        decision = { behavior: "deny", message: state.alternativeText.trim() };
-      } else if (toolName === ENTER_PLAN_MODE_TOOL_NAME) {
-        decision = {
-          behavior: "deny",
-          message: "User chose not to enter plan mode",
-        };
-      }
-      if (decision) {
-        dispatch({ type: "CONFIRM", decision });
-      }
-      return;
-    }
-
-    if (state.selectedOption === "alternative") {
-      if (key.leftArrow) {
-        dispatch({ type: "MOVE_CURSOR_LEFT" });
-        return;
-      }
-      if (key.rightArrow) {
-        dispatch({ type: "MOVE_CURSOR_RIGHT" });
-        return;
-      }
-    }
-
-    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) {
-      const currentIndex = availableOptions.indexOf(state.selectedOption);
-      if (currentIndex > 0) {
-        dispatch({
-          type: "SELECT_OPTION",
-          option: availableOptions[currentIndex - 1],
-        });
-      }
-      return;
-    }
-
-    if (key.downArrow) {
-      const currentIndex = availableOptions.indexOf(state.selectedOption);
-      if (currentIndex < availableOptions.length - 1) {
-        dispatch({
-          type: "SELECT_OPTION",
-          option: availableOptions[currentIndex + 1],
-        });
-      }
-      return;
-    }
-
-    if (key.tab) {
-      const currentIndex = availableOptions.indexOf(state.selectedOption);
-      const direction = key.shift ? -1 : 1;
-      let nextIndex = currentIndex + direction;
-      if (nextIndex < 0) nextIndex = availableOptions.length - 1;
-      if (nextIndex >= availableOptions.length) nextIndex = 0;
+      questionDispatch({
+        type: "HANDLE_KEY",
+        input,
+        key,
+        currentQuestion,
+        questions,
+      });
+    } else {
       dispatch({
-        type: "SELECT_OPTION",
-        option: availableOptions[nextIndex],
+        type: "HANDLE_KEY",
+        input,
+        key,
+        toolName,
+        toolInput,
+        suggestedPrefix,
+        hidePersistentOption,
       });
-      return;
-    }
-
-    if (input && !key.ctrl && !key.meta && !("alt" in key && key.alt)) {
-      dispatch({ type: "INSERT_TEXT", text: input });
-      return;
-    }
-
-    if (key.backspace || key.delete) {
-      dispatch({ type: "BACKSPACE" });
-      return;
     }
   });
 

package/src/components/DiscoverView.tsx

@@ -1,27 +1,37 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
 import { PluginList } from "./PluginList.js";
+import { selectorReducer } from "../reducers/selectorReducer.js";
 
 export const DiscoverView: React.FC = () => {
   const { discoverablePlugins, actions } = usePluginManagerContext();
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [state, dispatch] = useReducer(selectorReducer, {
+    selectedIndex: 0,
+    pendingDecision: null,
+  });
+
+  const { selectedIndex, pendingDecision } = state;
 
-  useInput((input, key) => {
-    if (key.upArrow) {
-      setSelectedIndex(Math.max(0, selectedIndex - 1));
-    } else if (key.downArrow) {
-      setSelectedIndex(
-        Math.min(discoverablePlugins.length - 1, selectedIndex + 1),
-      );
-    } else if (key.return) {
+  useInput((_input, key) => {
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: discoverablePlugins.length - 1,
+      hasInsert: false,
+    });
+  });
+
+  useEffect(() => {
+    if (pendingDecision === "select") {
       const plugin = discoverablePlugins[selectedIndex];
       if (plugin) {
         actions.setSelectedId(`${plugin.name}@${plugin.marketplace}`);
         actions.setView("PLUGIN_DETAIL");
       }
+      dispatch({ type: "CLEAR_DECISION" });
     }
-  });
+  }, [pendingDecision, selectedIndex, discoverablePlugins, actions]);
 
   return (
     <Box flexDirection="column">

package/src/components/FileSelector.tsx

@@ -1,6 +1,10 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import type { FileItem } from "wave-agent-sdk";
+import {
+  selectorReducer,
+  type SelectorState,
+} from "../reducers/selectorReducer.js";
 
 export { type FileItem } from "wave-agent-sdk";
 
@@ -19,30 +23,40 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
   onSelect,
   onCancel,
 }) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [state, dispatch] = useReducer(selectorReducer, {
+    selectedIndex: 0,
+    pendingDecision: null,
+  } as SelectorState);
 
-  useInput((input, key) => {
-    if (key.return || key.tab) {
+  const { selectedIndex, pendingDecision } = state;
+
+  // Reset selected index when files change
+  useEffect(() => {
+    dispatch({ type: "RESET_INDEX" });
+  }, [files]);
+
+  // Handle decisions from reducer
+  useEffect(() => {
+    if (!pendingDecision) return;
+
+    if (pendingDecision === "select" || pendingDecision === "insert") {
       if (files.length > 0 && selectedIndex < files.length) {
         onSelect(files[selectedIndex].path);
       }
-      return;
-    }
-
-    if (key.escape) {
+    } else if (pendingDecision === "cancel") {
       onCancel();
-      return;
     }
 
-    if (key.upArrow) {
-      setSelectedIndex(Math.max(0, selectedIndex - 1));
-      return;
-    }
+    dispatch({ type: "CLEAR_DECISION" });
+  }, [pendingDecision, selectedIndex, files, onSelect, onCancel]);
 
-    if (key.downArrow) {
-      setSelectedIndex(Math.min(files.length - 1, selectedIndex + 1));
-      return;
-    }
+  useInput((input, key) => {
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: files.length - 1,
+      hasInsert: true, // For FileSelector, Tab is also select
+    });
   });
 
   if (files.length === 0) {
@@ -72,24 +86,15 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
   const maxDisplay = 5;
 
   // Calculate display window start and end positions
-  const getDisplayWindow = () => {
-    const startIndex = Math.max(
-      0,
-      Math.min(
-        selectedIndex - Math.floor(maxDisplay / 2),
-        Math.max(0, files.length - maxDisplay),
-      ),
-    );
-    const endIndex = Math.min(files.length, startIndex + maxDisplay);
-
-    return {
-      startIndex,
-      endIndex,
-      displayFiles: files.slice(startIndex, endIndex),
-    };
-  };
-
-  const { startIndex, displayFiles } = getDisplayWindow();
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(maxDisplay / 2),
+      Math.max(0, files.length - maxDisplay),
+    ),
+  );
+  const endIndex = Math.min(files.length, startIndex + maxDisplay);
+  const displayFiles = files.slice(startIndex, endIndex);
 
   return (
     <Box

package/src/components/HelpView.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import type { SlashCommand } from "wave-agent-sdk";
 import { AVAILABLE_COMMANDS } from "../constants/commands.js";
+import { helpSelectorReducer } from "../reducers/helpSelectorReducer.js";
 
 export interface HelpViewProps {
   onCancel: () => void;
@@ -12,10 +13,6 @@ export const HelpView: React.FC<HelpViewProps> = ({
   onCancel,
   commands = [],
 }) => {
-  const [activeTab, setActiveTab] = useState<
-    "general" | "commands" | "custom-commands"
-  >("general");
-  const [selectedIndex, setSelectedIndex] = useState(0);
   const MAX_VISIBLE_ITEMS = 10;
 
   const tabs: ("general" | "commands" | "custom-commands")[] = [
@@ -26,33 +23,45 @@ export const HelpView: React.FC<HelpViewProps> = ({
     tabs.push("custom-commands");
   }
 
-  useInput((_, key) => {
-    if (key.escape) {
+  const [state, dispatch] = useReducer(helpSelectorReducer, {
+    selectedIndex: 0,
+    activeTab: "general",
+    pendingDecision: null,
+  });
+
+  const { selectedIndex, activeTab, pendingDecision } = state;
+
+  // Handle decisions from reducer
+  useEffect(() => {
+    if (pendingDecision === "cancel") {
       onCancel();
-      return;
+      dispatch({ type: "CLEAR_DECISION" });
     }
+  }, [pendingDecision, onCancel]);
 
-    if (key.tab) {
-      setActiveTab((prev) => {
-        const currentIndex = tabs.indexOf(prev);
-        const nextIndex = (currentIndex + 1) % tabs.length;
-        return tabs[nextIndex];
-      });
-      setSelectedIndex(0);
-      return;
-    }
+  const currentCommands =
+    activeTab === "commands" ? AVAILABLE_COMMANDS : commands;
 
-    if (activeTab === "commands" || activeTab === "custom-commands") {
-      const currentCommands =
-        activeTab === "commands" ? AVAILABLE_COMMANDS : commands;
-      if (key.upArrow) {
-        setSelectedIndex((prev) => Math.max(0, prev - 1));
-      } else if (key.downArrow) {
-        setSelectedIndex((prev) =>
-          Math.min(currentCommands.length - 1, prev + 1),
-        );
-      }
-    }
+  // Calculate visible window for commands
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, currentCommands.length - MAX_VISIBLE_ITEMS),
+    ),
+  );
+  const visibleCommands = currentCommands.slice(
+    startIndex,
+    startIndex + MAX_VISIBLE_ITEMS,
+  );
+
+  useInput((_, key) => {
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: activeTab === "general" ? 0 : currentCommands.length - 1,
+      tabs,
+    });
   });
 
   const helpItems = [
@@ -72,21 +81,6 @@ export const HelpView: React.FC<HelpViewProps> = ({
     },
   ];
 
-  // Calculate visible window for commands
-  const currentCommands =
-    activeTab === "commands" ? AVAILABLE_COMMANDS : commands;
-  const startIndex = Math.max(
-    0,
-    Math.min(
-      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
-      Math.max(0, currentCommands.length - MAX_VISIBLE_ITEMS),
-    ),
-  );
-  const visibleCommands = currentCommands.slice(
-    startIndex,
-    startIndex + MAX_VISIBLE_ITEMS,
-  );
-
   const footerText = [
     "Tab switch",
     activeTab !== "general" && "↑↓ navigate",