wave-code 0.14.4 → 0.15.1

package/src/components/HistorySearch.tsx

@@ -1,6 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useReducer, useEffect, useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { PromptHistoryManager, type PromptEntry } from "wave-agent-sdk";
+import {
+  selectorReducer,
+  type SelectorState,
+} from "../reducers/selectorReducer.js";
 
 export interface HistorySearchProps {
   searchQuery: string;
@@ -14,57 +18,46 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
   onCancel,
 }) => {
   const MAX_VISIBLE_ITEMS = 5;
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [state, dispatch] = useReducer(selectorReducer, {
+    selectedIndex: 0,
+    pendingDecision: null,
+  } as SelectorState);
   const [entries, setEntries] = useState<PromptEntry[]>([]);
 
-  const entriesRef = React.useRef<PromptEntry[]>([]);
-  const selectedIndexRef = React.useRef(0);
-
-  useEffect(() => {
-    entriesRef.current = entries;
-  }, [entries]);
-
-  useEffect(() => {
-    selectedIndexRef.current = selectedIndex;
-  }, [selectedIndex]);
+  const { selectedIndex, pendingDecision } = state;
 
   useEffect(() => {
     const fetchHistory = async () => {
       const results = await PromptHistoryManager.searchHistory(searchQuery);
       const limitedResults = results.slice(0, 20);
-      setEntries(limitedResults); // Limit to 20 results
-      setSelectedIndex(0);
+      setEntries(limitedResults);
+      dispatch({ type: "RESET_INDEX" });
     };
     fetchHistory();
   }, [searchQuery]);
 
-  useInput((input, key) => {
-    if (key.return) {
-      if (
-        entriesRef.current.length > 0 &&
-        selectedIndexRef.current < entriesRef.current.length
-      ) {
-        onSelect(entriesRef.current[selectedIndexRef.current]);
-      }
-      return;
-    }
+  // Handle decisions from reducer
+  useEffect(() => {
+    if (!pendingDecision) return;
 
-    if (key.escape) {
+    if (pendingDecision === "select") {
+      if (entries.length > 0 && selectedIndex < entries.length) {
+        onSelect(entries[selectedIndex]);
+      }
+    } else if (pendingDecision === "cancel") {
       onCancel();
-      return;
     }
 
-    if (key.upArrow) {
-      setSelectedIndex((prev) => Math.max(0, prev - 1));
-      return;
-    }
+    dispatch({ type: "CLEAR_DECISION" });
+  }, [pendingDecision, selectedIndex, entries, onSelect, onCancel]);
 
-    if (key.downArrow) {
-      setSelectedIndex((prev) =>
-        Math.min(entriesRef.current.length - 1, prev + 1),
-      );
-      return;
-    }
+  useInput((input, key) => {
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: entries.length - 1,
+      hasInsert: false,
+    });
   });
 
   if (entries.length === 0) {

package/src/components/InputBox.tsx

@@ -57,7 +57,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
   const {
     permissionMode: chatPermissionMode,
     setPermissionMode: setChatPermissionMode,
-    allowBypassInCycle: chatAllowBypassInCycle,
     handleRewindSelect,
     backgroundCurrentTask,
     messages,
@@ -114,7 +113,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
     // Permission mode
     permissionMode,
     setPermissionMode,
-    setAllowBypassInCycle,
     // BTW state
     btwState,
     // Main handler
@@ -138,13 +136,22 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setPermissionMode(chatPermissionMode);
   }, [chatPermissionMode, setPermissionMode]);
 
-  // Sync allowBypassInCycle from useChat to InputManager
-  useEffect(() => {
-    setAllowBypassInCycle(chatAllowBypassInCycle);
-  }, [chatAllowBypassInCycle, setAllowBypassInCycle]);
-
   // Use the InputManager's unified input handler
   useInput(async (input, key) => {
+    // These views have their own useInput handlers that handle escape and navigation.
+    // If they are active, we should skip InputBox's global input handling to avoid
+    // duplicate dispatches or state update conflicts.
+    if (
+      showRewindManager ||
+      showHelp ||
+      showStatusCommand ||
+      showPluginManager ||
+      showModelSelector ||
+      showBackgroundTaskManager ||
+      showMcpManager
+    ) {
+      return;
+    }
     await handleInput(input, key, attachedImages, clearImages);
   });
 

package/src/components/InstalledView.tsx

@@ -1,26 +1,36 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+import { selectorReducer } from "../reducers/selectorReducer.js";
 
 export const InstalledView: React.FC = () => {
   const { installedPlugins, 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(installedPlugins.length - 1, selectedIndex + 1),
-      );
-    } else if (key.return) {
+  useInput((_input, key) => {
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: installedPlugins.length - 1,
+      hasInsert: false,
+    });
+  });
+
+  useEffect(() => {
+    if (pendingDecision === "select") {
       const plugin = installedPlugins[selectedIndex];
       if (plugin) {
         actions.setSelectedId(`${plugin.name}@${plugin.marketplace}`);
         actions.setView("PLUGIN_DETAIL");
       }
+      dispatch({ type: "CLEAR_DECISION" });
     }
-  });
+  }, [pendingDecision, selectedIndex, installedPlugins, actions]);
 
   if (installedPlugins.length === 0) {
     return (

package/src/components/MarketplaceDetail.tsx

@@ -1,34 +1,47 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect, useMemo } from "react";
 import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+import { selectorReducer } from "../reducers/selectorReducer.js";
 
 export const MarketplaceDetail: React.FC = () => {
   const { state, marketplaces, actions } = usePluginManagerContext();
-  const [selectedActionIndex, setSelectedActionIndex] = useState(0);
+  const [selectorState, dispatch] = useReducer(selectorReducer, {
+    selectedIndex: 0,
+    pendingDecision: null,
+  });
+
+  const { selectedIndex: selectedActionIndex, pendingDecision } = selectorState;
 
   const marketplace = marketplaces.find((m) => m.name === state.selectedId);
 
-  const ACTIONS = [
-    {
-      id: "toggle-auto-update",
-      label: `${marketplace?.autoUpdate ? "Disable" : "Enable"} auto-update`,
-    },
-    { id: "update", label: "Update marketplace" },
-    { id: "remove", label: "Remove marketplace" },
-  ] as const;
-
-  useInput((input, key) => {
-    if (key.escape) {
-      actions.setView("MARKETPLACES");
-    } else if (key.upArrow) {
-      setSelectedActionIndex((prev) =>
-        prev > 0 ? prev - 1 : ACTIONS.length - 1,
-      );
-    } else if (key.downArrow) {
-      setSelectedActionIndex((prev) =>
-        prev < ACTIONS.length - 1 ? prev + 1 : 0,
-      );
-    } else if (key.return && marketplace && !state.isLoading) {
+  const ACTIONS = useMemo(
+    () =>
+      [
+        {
+          id: "toggle-auto-update",
+          label: `${marketplace?.autoUpdate ? "Disable" : "Enable"} auto-update`,
+        },
+        { id: "update", label: "Update marketplace" },
+        { id: "remove", label: "Remove marketplace" },
+      ] as const,
+    [marketplace?.autoUpdate],
+  );
+
+  useInput((_input, key) => {
+    if (state.isLoading && !key.escape) return;
+
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: ACTIONS.length - 1,
+      hasInsert: false,
+    });
+  });
+
+  useEffect(() => {
+    if (!pendingDecision) return;
+
+    if (pendingDecision === "select" && marketplace && !state.isLoading) {
       const action = ACTIONS[selectedActionIndex].id;
       if (action === "toggle-auto-update") {
         actions.toggleAutoUpdate(marketplace.name, !marketplace.autoUpdate);
@@ -37,8 +50,19 @@ export const MarketplaceDetail: React.FC = () => {
       } else {
         actions.removeMarketplace(marketplace.name);
       }
+    } else if (pendingDecision === "cancel") {
+      actions.setView("MARKETPLACES");
     }
-  });
+
+    dispatch({ type: "CLEAR_DECISION" });
+  }, [
+    pendingDecision,
+    selectedActionIndex,
+    marketplace,
+    state.isLoading,
+    actions,
+    ACTIONS,
+  ]);
 
   if (!marketplace) {
     return (

package/src/components/MarketplaceView.tsx

@@ -1,28 +1,43 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+import { selectorReducer } from "../reducers/selectorReducer.js";
 
 import { MarketplaceList } from "./MarketplaceList.js";
 
 export const MarketplaceView: React.FC = () => {
   const { marketplaces, 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(marketplaces.length - 1, selectedIndex + 1));
-    } else if (key.return) {
+    if (input === "a") {
+      actions.setView("ADD_MARKETPLACE");
+      return;
+    }
+
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: marketplaces.length - 1,
+      hasInsert: false,
+    });
+  });
+
+  useEffect(() => {
+    if (pendingDecision === "select") {
       const mk = marketplaces[selectedIndex];
       if (mk) {
         actions.setSelectedId(mk.name);
         actions.setView("MARKETPLACE_DETAIL");
       }
-    } else if (input === "a") {
-      actions.setView("ADD_MARKETPLACE");
+      dispatch({ type: "CLEAR_DECISION" });
     }
-  });
+  }, [pendingDecision, selectedIndex, marketplaces, actions]);
 
   return (
     <Box flexDirection="column">

package/src/components/McpManager.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import { McpServerStatus } from "wave-agent-sdk";
 import {
@@ -16,6 +16,7 @@ export interface McpManagerProps {
 const initialState: McpManagerState = {
   selectedIndex: 0,
   viewMode: "list",
+  pendingEffect: null,
 };
 
 export const McpManager: React.FC<McpManagerProps> = ({
@@ -26,6 +27,26 @@ export const McpManager: React.FC<McpManagerProps> = ({
 }) => {
   const [state, dispatch] = useReducer(mcpManagerReducer, initialState);
 
+  // Handle pending effects
+  useEffect(() => {
+    if (!state.pendingEffect) return;
+
+    const effect = state.pendingEffect;
+    dispatch({ type: "CLEAR_PENDING_EFFECT" });
+
+    switch (effect.type) {
+      case "CANCEL":
+        onCancel();
+        break;
+      case "CONNECT_SERVER":
+        onConnectServer(effect.serverName);
+        break;
+      case "DISCONNECT_SERVER":
+        onDisconnectServer(effect.serverName);
+        break;
+    }
+  }, [state.pendingEffect, onCancel, onConnectServer, onDisconnectServer]);
+
   // Dynamically calculate selectedServer based on selectedIndex and servers
   const selectedServer =
     state.viewMode === "detail" &&
@@ -64,60 +85,14 @@ export const McpManager: React.FC<McpManagerProps> = ({
     }
   };
 
-  const handleConnect = async (serverName: string) => {
-    await onConnectServer(serverName);
-  };
-
-  const handleDisconnect = async (serverName: string) => {
-    await onDisconnectServer(serverName);
-  };
-
   useInput((input, key) => {
-    if (key.return) {
-      if (state.viewMode === "list") {
-        dispatch({ type: "SET_VIEW_MODE", viewMode: "detail" });
-      }
-      return;
-    }
-
-    if (key.escape) {
-      if (state.viewMode === "detail") {
-        dispatch({ type: "SET_VIEW_MODE", viewMode: "list" });
-      } else {
-        onCancel();
-      }
-      return;
-    }
-
-    if (key.upArrow) {
-      dispatch({ type: "MOVE_UP", serverCount: servers.length });
-      return;
-    }
-
-    if (key.downArrow) {
-      dispatch({ type: "MOVE_DOWN", serverCount: servers.length });
-      return;
-    }
-
-    // Hotkeys for server actions
-    if (input === "c") {
-      const server = servers[state.selectedIndex];
-      if (
-        server &&
-        (server.status === "disconnected" || server.status === "error")
-      ) {
-        handleConnect(server.name);
-      }
-      return;
-    }
-
-    if (input === "d") {
-      const server = servers[state.selectedIndex];
-      if (server && server.status === "connected") {
-        handleDisconnect(server.name);
-      }
-      return;
-    }
+    dispatch({
+      type: "HANDLE_KEY",
+      input,
+      key,
+      serverCount: servers.length,
+      servers: servers.map((s) => ({ name: s.name, status: s.status })),
+    });
   });
 
   if (state.viewMode === "detail" && selectedServer) {

package/src/components/ModelSelector.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
+import { selectorReducer } from "../reducers/selectorReducer.js";
 
 export interface ModelSelectorProps {
   onCancel: () => void;
@@ -16,37 +17,43 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   configuredModels,
   onSelectModel,
 }) => {
-  const [selectedIndex, setSelectedIndex] = useState(() => {
-    const index = configuredModels.indexOf(currentModel);
-    return index !== -1 ? index : 0;
+  const [state, dispatch] = useReducer(selectorReducer, {
+    selectedIndex:
+      configuredModels.indexOf(currentModel) !== -1
+        ? configuredModels.indexOf(currentModel)
+        : 0,
+    pendingDecision: null,
   });
 
+  const { selectedIndex, pendingDecision } = state;
+
   useInput((_input, key) => {
-    if (key.return) {
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: configuredModels.length - 1,
+      hasInsert: false,
+    });
+  });
+
+  useEffect(() => {
+    if (pendingDecision === "select") {
       if (configuredModels.length > 0) {
         onSelectModel(configuredModels[selectedIndex]);
       }
       onCancel();
-      return;
-    }
-
-    if (key.escape) {
+      dispatch({ type: "CLEAR_DECISION" });
+    } else if (pendingDecision === "cancel") {
       onCancel();
-      return;
+      dispatch({ type: "CLEAR_DECISION" });
     }
-
-    if (key.upArrow) {
-      setSelectedIndex((prev) => Math.max(0, prev - 1));
-      return;
-    }
-
-    if (key.downArrow) {
-      setSelectedIndex((prev) =>
-        Math.min(configuredModels.length - 1, prev + 1),
-      );
-      return;
-    }
-  });
+  }, [
+    pendingDecision,
+    selectedIndex,
+    configuredModels,
+    onSelectModel,
+    onCancel,
+  ]);
 
   // Calculate visible window
   const startIndex = Math.max(

package/src/components/PluginDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer } from "react";
+import React, { useReducer, useEffect, useMemo } from "react";
 import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
 import {
@@ -18,8 +18,12 @@ export const PluginDetail: React.FC = () => {
   const [detailState, dispatch] = useReducer(pluginDetailReducer, {
     selectedScopeIndex: 0,
     selectedActionIndex: 0,
+    pendingDecision: null,
   } as PluginDetailState);
 
+  const { selectedScopeIndex, selectedActionIndex, pendingDecision } =
+    detailState;
+
   const plugin =
     discoverablePlugins.find(
       (p) => `${p.name}@${p.marketplace}` === state.selectedId,
@@ -28,34 +32,35 @@ export const PluginDetail: React.FC = () => {
       (p) => `${p.name}@${p.marketplace}` === state.selectedId,
     );
 
-  const INSTALLED_ACTIONS = [
-    { id: "update", label: "Update plugin (reinstall)" },
-    { id: "uninstall", label: "Uninstall plugin" },
-  ] as const;
+  const INSTALLED_ACTIONS = useMemo(
+    () =>
+      [
+        { id: "update", label: "Update plugin (reinstall)" },
+        { id: "uninstall", label: "Uninstall plugin" },
+      ] as const,
+    [],
+  );
 
   const isInstalledAndEnabled = plugin && "enabled" in plugin && plugin.enabled;
 
-  useInput((input, key) => {
-    if (key.escape) {
-      const isFromDiscover = discoverablePlugins.find(
-        (p) => `${p.name}@${p.marketplace}` === state.selectedId,
-      );
-      actions.setView(isFromDiscover ? "DISCOVER" : "INSTALLED");
-    } else if (key.upArrow) {
-      dispatch({
-        type: "MOVE_ACTION_UP",
-        maxIndex: INSTALLED_ACTIONS.length - 1,
-      });
-      dispatch({ type: "MOVE_SCOPE_UP", maxIndex: SCOPES.length - 1 });
-    } else if (key.downArrow) {
-      dispatch({
-        type: "MOVE_ACTION_DOWN",
-        maxIndex: INSTALLED_ACTIONS.length - 1,
-      });
-      dispatch({ type: "MOVE_SCOPE_DOWN", maxIndex: SCOPES.length - 1 });
-    } else if (key.return && plugin && !state.isLoading) {
+  useInput((_input, key) => {
+    if (state.isLoading && !key.escape) return;
+
+    dispatch({
+      type: "HANDLE_KEY",
+      key,
+      maxIndex: isInstalledAndEnabled
+        ? INSTALLED_ACTIONS.length - 1
+        : SCOPES.length - 1,
+    });
+  });
+
+  useEffect(() => {
+    if (!pendingDecision) return;
+
+    if (pendingDecision === "select" && plugin && !state.isLoading) {
       if (isInstalledAndEnabled) {
-        const action = INSTALLED_ACTIONS[detailState.selectedActionIndex].id;
+        const action = INSTALLED_ACTIONS[selectedActionIndex].id;
         if (action === "uninstall") {
           actions.uninstallPlugin(plugin.name, plugin.marketplace);
         } else {
@@ -65,11 +70,29 @@ export const PluginDetail: React.FC = () => {
         actions.installPlugin(
           plugin.name,
           plugin.marketplace,
-          SCOPES[detailState.selectedScopeIndex].id,
+          SCOPES[selectedScopeIndex].id,
         );
       }
+    } else if (pendingDecision === "cancel") {
+      const isFromDiscover = discoverablePlugins.find(
+        (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+      );
+      actions.setView(isFromDiscover ? "DISCOVER" : "INSTALLED");
     }
-  });
+
+    dispatch({ type: "CLEAR_DECISION" });
+  }, [
+    pendingDecision,
+    selectedActionIndex,
+    selectedScopeIndex,
+    plugin,
+    isInstalledAndEnabled,
+    state.isLoading,
+    discoverablePlugins,
+    state.selectedId,
+    actions,
+    INSTALLED_ACTIONS,
+  ]);
 
   if (!plugin) {
     return (