wave-code 0.14.0 → 0.14.1

package/src/components/BackgroundTaskManager.tsx

@@ -1,18 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useReducer } from "react";
 import { Box, Text, useInput } from "ink";
 import { useChat } from "../contexts/useChat.js";
 import { getLastLines } from "wave-agent-sdk";
-
-interface Task {
-  id: string;
-  type: string;
-  description?: string;
-  status: "running" | "completed" | "failed" | "killed";
-  startTime: number;
-  exitCode?: number;
-  runtime?: number;
-  outputPath?: string;
-}
+import {
+  backgroundTaskManagerReducer,
+  type BackgroundTaskManagerState,
+} from "../reducers/backgroundTaskManagerReducer.js";
 
 export interface BackgroundTaskManagerProps {
   onCancel: () => void;
@@ -23,22 +16,23 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
 }) => {
   const { backgroundTasks, getBackgroundTaskOutput, stopBackgroundTask } =
     useChat();
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
   const MAX_VISIBLE_ITEMS = 3;
-  const [viewMode, setViewMode] = useState<"list" | "detail">("list");
-  const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
-  const [detailOutput, setDetailOutput] = useState<{
-    stdout: string;
-    stderr: string;
-    status: string;
-    outputPath?: string;
-  } | null>(null);
+
+  const [state, dispatch] = useReducer(backgroundTaskManagerReducer, {
+    tasks: [],
+    selectedIndex: 0,
+    viewMode: "list",
+    detailTaskId: null,
+    detailOutput: null,
+  } as BackgroundTaskManagerState);
+
+  const { tasks, selectedIndex, viewMode, detailTaskId, detailOutput } = state;
 
   // Convert backgroundTasks to local Task format
   useEffect(() => {
-    setTasks(
-      backgroundTasks.map((task) => ({
+    dispatch({
+      type: "SET_TASKS",
+      tasks: backgroundTasks.map((task) => ({
         id: task.id,
         type: task.type,
         description: task.description,
@@ -48,14 +42,14 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
         runtime: task.runtime,
         outputPath: task.outputPath,
       })),
-    );
+    });
   }, [backgroundTasks]);
 
   // Load detail output for selected task
   useEffect(() => {
     if (viewMode === "detail" && detailTaskId) {
       const output = getBackgroundTaskOutput(detailTaskId);
-      setDetailOutput(output);
+      dispatch({ type: "SET_DETAIL_OUTPUT", output });
     }
   }, [viewMode, detailTaskId, getBackgroundTaskOutput]);
 
@@ -91,8 +85,8 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
       if (key.return) {
         if (tasks.length > 0 && selectedIndex < tasks.length) {
           const selectedTask = tasks[selectedIndex];
-          setDetailTaskId(selectedTask.id);
-          setViewMode("detail");
+          dispatch({ type: "SET_DETAIL_TASK_ID", id: selectedTask.id });
+          dispatch({ type: "SET_VIEW_MODE", mode: "detail" });
         }
         return;
       }
@@ -103,12 +97,18 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
       }
 
       if (key.upArrow) {
-        setSelectedIndex(Math.max(0, selectedIndex - 1));
+        dispatch({
+          type: "SELECT_INDEX",
+          index: Math.max(0, selectedIndex - 1),
+        });
         return;
       }
 
       if (key.downArrow) {
-        setSelectedIndex(Math.min(tasks.length - 1, selectedIndex + 1));
+        dispatch({
+          type: "SELECT_INDEX",
+          index: Math.min(tasks.length - 1, selectedIndex + 1),
+        });
         return;
       }
 
@@ -122,9 +122,7 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
     } else if (viewMode === "detail") {
       // Detail mode navigation
       if (key.escape) {
-        setViewMode("list");
-        setDetailTaskId(null);
-        setDetailOutput(null);
+        dispatch({ type: "RESET_DETAIL" });
         return;
       }
 
@@ -141,7 +139,7 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
   if (viewMode === "detail" && detailTaskId && detailOutput) {
     const task = tasks.find((t) => t.id === detailTaskId);
     if (!task) {
-      setViewMode("list");
+      dispatch({ type: "RESET_DETAIL" });
       return null;
     }
 

package/src/components/InputBox.tsx

@@ -68,6 +68,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     currentModel,
     configuredModels,
     setModel,
+    recreateAgent,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -205,7 +206,12 @@ export const InputBox: React.FC<InputBoxProps> = ({
   }
 
   if (showPluginManager) {
-    return <PluginManagerShell onCancel={() => setShowPluginManager(false)} />;
+    return (
+      <PluginManagerShell
+        onCancel={() => setShowPluginManager(false)}
+        onPluginInstalled={recreateAgent}
+      />
+    );
   }
 
   if (showModelSelector) {

package/src/components/MarketplaceAddForm.tsx

@@ -1,53 +1,107 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useReducer } from "react";
 import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+import { marketplaceAddFormReducer } from "../reducers/marketplaceAddFormReducer.js";
+
+const SCOPES = [
+  { value: "user" as const, label: "user" },
+  { value: "project" as const, label: "project" },
+  { value: "local" as const, label: "local" },
+];
 
 export const MarketplaceAddForm: React.FC = () => {
   const { state, actions } = usePluginManagerContext();
-  const [source, setSource] = useState("");
-  const sourceRef = useRef(source);
-
-  // Keep ref in sync with state
-  useEffect(() => {
-    sourceRef.current = source;
-  }, [source]);
+  const [{ source, scopeIndex, step }, dispatch] = useReducer(
+    marketplaceAddFormReducer,
+    { source: "", scopeIndex: 0, step: "source" },
+  );
 
   useInput((input, key) => {
     if (key.escape) {
-      actions.setView("MARKETPLACES");
+      if (step === "scope") {
+        dispatch({ type: "BACK_TO_SOURCE" });
+      } else {
+        actions.setView("MARKETPLACES");
+      }
     } else if (state.isLoading) {
       return;
-    } else if (key.return) {
-      if (sourceRef.current.trim()) {
-        actions.addMarketplace(sourceRef.current.trim());
+    } else if (step === "source" && key.return) {
+      if (source.trim()) {
+        dispatch({ type: "SET_STEP", step: "scope" });
+      }
+    } else if (step === "source" && (key.backspace || key.delete)) {
+      dispatch({ type: "DELETE_CHAR" });
+    } else if (
+      step === "source" &&
+      input &&
+      !key.ctrl &&
+      !key.meta &&
+      !("alt" in key && key.alt)
+    ) {
+      dispatch({ type: "INSERT_CHAR", text: input });
+    } else if (step === "scope") {
+      if (key.upArrow) {
+        dispatch({
+          type: "SET_SCOPE_INDEX",
+          index: Math.max(0, scopeIndex - 1),
+        });
+      } else if (key.downArrow) {
+        dispatch({
+          type: "SET_SCOPE_INDEX",
+          index: Math.min(SCOPES.length - 1, scopeIndex + 1),
+        });
+      } else if (key.return) {
+        const scope = SCOPES[scopeIndex].value;
+        actions.addMarketplace(source.trim(), scope);
       }
-    } else if (key.backspace || key.delete) {
-      setSource((prev) => prev.slice(0, -1));
-    } else if (input.length === 1) {
-      setSource((prev) => prev + input);
     }
   });
 
+  if (step === "source") {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text bold color="cyan">
+          Step 1/2: Enter marketplace source
+        </Text>
+        <Box marginTop={1}>
+          <Text>Source: </Text>
+          <Text color="yellow">{source}</Text>
+          {!state.isLoading && <Text color="yellow">_</Text>}
+        </Box>
+        <Box marginTop={1}>
+          <Text dimColor>Enter to continue, Esc to cancel</Text>
+        </Box>
+      </Box>
+    );
+  }
+
   return (
     <Box flexDirection="column" padding={1}>
       <Text bold color="cyan">
-        Add Marketplace
+        Step 2/2: Select scope
       </Text>
       <Box marginTop={1}>
-        <Text>Source (URL or Path): </Text>
-        <Text color={state.isLoading ? "gray" : "yellow"}>{source}</Text>
-        {!state.isLoading && <Text color="yellow">_</Text>}
+        <Text dimColor>Source: </Text>
+        <Text dimColor>{source}</Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        {SCOPES.map((s, i) => (
+          <Text key={s.value} color={i === scopeIndex ? "yellow" : "dim"}>
+            {i === scopeIndex ? "> " : "  "}
+            {s.label}
+          </Text>
+        ))}
       </Box>
       {state.isLoading && (
         <Box marginTop={1}>
-          <Text color="yellow">⌛ Adding marketplace...</Text>
+          <Text color="yellow">Adding marketplace...</Text>
         </Box>
       )}
       <Box marginTop={1}>
         <Text dimColor>
           {state.isLoading
             ? "Please wait..."
-            : "Press Enter to add, Esc to cancel"}
+            : "Enter to confirm, \u2191/\u2193 to navigate, Esc to go back"}
         </Text>
       </Box>
     </Box>

package/src/components/MarketplaceDetail.tsx

@@ -55,6 +55,10 @@ export const MarketplaceDetail: React.FC = () => {
           {marketplace.name}
         </Text>
         {marketplace.isBuiltin && <Text dimColor> (Built-in)</Text>}
+        {marketplace.declaredScope &&
+          marketplace.declaredScope !== "builtin" && (
+            <Text dimColor> ({marketplace.declaredScope} scope)</Text>
+          )}
       </Box>
 
       <Box marginBottom={1}>

package/src/components/MarketplaceList.tsx

@@ -39,6 +39,10 @@ export const MarketplaceList: React.FC<MarketplaceListProps> = ({
                 {marketplace.isBuiltin && (
                   <Text color="yellow"> [Built-in]</Text>
                 )}
+                {marketplace.declaredScope &&
+                  marketplace.declaredScope !== "builtin" && (
+                    <Text color="magenta"> [{marketplace.declaredScope}]</Text>
+                  )}
               </Text>
             </Box>
             <Box marginLeft={4} flexDirection="column">

package/src/components/McpManager.tsx

@@ -1,6 +1,10 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useReducer } from "react";
 import { Box, Text, useInput } from "ink";
 import { McpServerStatus } from "wave-agent-sdk";
+import {
+  mcpManagerReducer,
+  type McpManagerState,
+} from "../reducers/mcpManagerReducer.js";
 
 export interface McpManagerProps {
   onCancel: () => void;
@@ -9,33 +13,25 @@ export interface McpManagerProps {
   onDisconnectServer: (serverName: string) => Promise<boolean>;
 }
 
+const initialState: McpManagerState = {
+  selectedIndex: 0,
+  viewMode: "list",
+};
+
 export const McpManager: React.FC<McpManagerProps> = ({
   onCancel,
   servers,
   onConnectServer,
   onDisconnectServer,
 }) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [viewMode, setViewMode] = useState<"list" | "detail">("list");
-
-  // Keep ref in sync with state to avoid stale closures in useInput
-  const selectedIndexRef = useRef(selectedIndex);
-  const viewModeRef = useRef(viewMode);
-
-  useEffect(() => {
-    selectedIndexRef.current = selectedIndex;
-  }, [selectedIndex]);
-
-  useEffect(() => {
-    viewModeRef.current = viewMode;
-  }, [viewMode]);
+  const [state, dispatch] = useReducer(mcpManagerReducer, initialState);
 
   // Dynamically calculate selectedServer based on selectedIndex and servers
   const selectedServer =
-    viewMode === "detail" &&
+    state.viewMode === "detail" &&
     servers.length > 0 &&
-    selectedIndex < servers.length
-      ? servers[selectedIndex]
+    state.selectedIndex < servers.length
+      ? servers[state.selectedIndex]
       : null;
 
   const formatTime = (timestamp: number): string => {
@@ -78,15 +74,15 @@ export const McpManager: React.FC<McpManagerProps> = ({
 
   useInput((input, key) => {
     if (key.return) {
-      if (viewModeRef.current === "list") {
-        setViewMode("detail");
+      if (state.viewMode === "list") {
+        dispatch({ type: "SET_VIEW_MODE", viewMode: "detail" });
       }
       return;
     }
 
     if (key.escape) {
-      if (viewModeRef.current === "detail") {
-        setViewMode("list");
+      if (state.viewMode === "detail") {
+        dispatch({ type: "SET_VIEW_MODE", viewMode: "list" });
       } else {
         onCancel();
       }
@@ -94,18 +90,18 @@ export const McpManager: React.FC<McpManagerProps> = ({
     }
 
     if (key.upArrow) {
-      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      dispatch({ type: "MOVE_UP", serverCount: servers.length });
       return;
     }
 
     if (key.downArrow) {
-      setSelectedIndex((prev) => Math.min(servers.length - 1, prev + 1));
+      dispatch({ type: "MOVE_DOWN", serverCount: servers.length });
       return;
     }
 
     // Hotkeys for server actions
     if (input === "c") {
-      const server = servers[selectedIndexRef.current];
+      const server = servers[state.selectedIndex];
       if (
         server &&
         (server.status === "disconnected" || server.status === "error")
@@ -116,7 +112,7 @@ export const McpManager: React.FC<McpManagerProps> = ({
     }
 
     if (input === "d") {
-      const server = servers[selectedIndexRef.current];
+      const server = servers[state.selectedIndex];
       if (server && server.status === "connected") {
         handleDisconnect(server.name);
       }
@@ -124,7 +120,7 @@ export const McpManager: React.FC<McpManagerProps> = ({
     }
   });
 
-  if (viewMode === "detail" && selectedServer) {
+  if (state.viewMode === "detail" && selectedServer) {
     return (
       <Box
         flexDirection="column"
@@ -273,10 +269,10 @@ export const McpManager: React.FC<McpManagerProps> = ({
       {servers.map((server, index) => (
         <Box key={server.name} flexDirection="column">
           <Text
-            color={index === selectedIndex ? "black" : "white"}
-            backgroundColor={index === selectedIndex ? "cyan" : undefined}
+            color={index === state.selectedIndex ? "black" : "white"}
+            backgroundColor={index === state.selectedIndex ? "cyan" : undefined}
           >
-            {index === selectedIndex ? "▶ " : "  "}
+            {index === state.selectedIndex ? "▶ " : "  "}
             {index + 1}.{" "}
             <Text color={getStatusColor(server.status)}>
               {getStatusIcon(server.status)}
@@ -286,7 +282,7 @@ export const McpManager: React.FC<McpManagerProps> = ({
               <Text color="green"> · {server.toolCount} tools</Text>
             )}
           </Text>
-          {index === selectedIndex && (
+          {index === state.selectedIndex && (
             <Box marginLeft={4} flexDirection="column">
               <Text color="gray" dimColor>
                 {server.config.command}
@@ -305,11 +301,11 @@ export const McpManager: React.FC<McpManagerProps> = ({
       <Box marginTop={1}>
         <Text dimColor>
           ↑/↓ to select · Enter to view ·{" "}
-          {servers[selectedIndex]?.status === "disconnected" ||
-          servers[selectedIndex]?.status === "error"
+          {servers[state.selectedIndex]?.status === "disconnected" ||
+          servers[state.selectedIndex]?.status === "error"
             ? "c to connect · "
             : ""}
-          {servers[selectedIndex]?.status === "connected"
+          {servers[state.selectedIndex]?.status === "connected"
             ? "d to disconnect · "
             : ""}
           Esc to close

package/src/components/PluginDetail.tsx

@@ -1,6 +1,10 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useReducer } from "react";
 import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+import {
+  pluginDetailReducer,
+  type PluginDetailState,
+} from "../reducers/pluginDetailReducer.js";
 
 const SCOPES = [
   { id: "project", label: "Install for all collaborators (project scope)" },
@@ -11,20 +15,10 @@ const SCOPES = [
 export const PluginDetail: React.FC = () => {
   const { state, discoverablePlugins, installedPlugins, actions } =
     usePluginManagerContext();
-  const [selectedScopeIndex, setSelectedScopeIndex] = useState(0);
-  const [selectedActionIndex, setSelectedActionIndex] = useState(0);
-
-  // Keep refs in sync with state to avoid stale closures in useInput
-  const selectedScopeIndexRef = useRef(selectedScopeIndex);
-  const selectedActionIndexRef = useRef(selectedActionIndex);
-
-  useEffect(() => {
-    selectedScopeIndexRef.current = selectedScopeIndex;
-  }, [selectedScopeIndex]);
-
-  useEffect(() => {
-    selectedActionIndexRef.current = selectedActionIndex;
-  }, [selectedActionIndex]);
+  const [detailState, dispatch] = useReducer(pluginDetailReducer, {
+    selectedScopeIndex: 0,
+    selectedActionIndex: 0,
+  } as PluginDetailState);
 
   const plugin =
     discoverablePlugins.find(
@@ -48,22 +42,20 @@ export const PluginDetail: React.FC = () => {
       );
       actions.setView(isFromDiscover ? "DISCOVER" : "INSTALLED");
     } else if (key.upArrow) {
-      setSelectedActionIndex((prev) =>
-        prev > 0 ? prev - 1 : INSTALLED_ACTIONS.length - 1,
-      );
-      setSelectedScopeIndex((prev) =>
-        prev > 0 ? prev - 1 : SCOPES.length - 1,
-      );
+      dispatch({
+        type: "MOVE_ACTION_UP",
+        maxIndex: INSTALLED_ACTIONS.length - 1,
+      });
+      dispatch({ type: "MOVE_SCOPE_UP", maxIndex: SCOPES.length - 1 });
     } else if (key.downArrow) {
-      setSelectedActionIndex((prev) =>
-        prev < INSTALLED_ACTIONS.length - 1 ? prev + 1 : 0,
-      );
-      setSelectedScopeIndex((prev) =>
-        prev < SCOPES.length - 1 ? prev + 1 : 0,
-      );
+      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) {
       if (isInstalledAndEnabled) {
-        const action = INSTALLED_ACTIONS[selectedActionIndexRef.current].id;
+        const action = INSTALLED_ACTIONS[detailState.selectedActionIndex].id;
         if (action === "uninstall") {
           actions.uninstallPlugin(plugin.name, plugin.marketplace);
         } else {
@@ -73,7 +65,7 @@ export const PluginDetail: React.FC = () => {
         actions.installPlugin(
           plugin.name,
           plugin.marketplace,
-          SCOPES[selectedScopeIndexRef.current].id,
+          SCOPES[detailState.selectedScopeIndex].id,
         );
       }
     }
@@ -121,14 +113,14 @@ export const PluginDetail: React.FC = () => {
               <Text
                 key={action.id}
                 color={
-                  index === selectedActionIndex
+                  index === detailState.selectedActionIndex
                     ? state.isLoading
                       ? "gray"
                       : "yellow"
                     : undefined
                 }
               >
-                {index === selectedActionIndex ? "> " : "  "}
+                {index === detailState.selectedActionIndex ? "> " : "  "}
                 {action.label}
               </Text>
             ))}
@@ -147,14 +139,14 @@ export const PluginDetail: React.FC = () => {
               <Text
                 key={scope.id}
                 color={
-                  index === selectedScopeIndex
+                  index === detailState.selectedScopeIndex
                     ? state.isLoading
                       ? "gray"
                       : "green"
                     : undefined
                 }
               >
-                {index === selectedScopeIndex ? "> " : "  "}
+                {index === detailState.selectedScopeIndex ? "> " : "  "}
                 {scope.label}
               </Text>
             ))}

package/src/components/PluginManagerShell.tsx

@@ -13,8 +13,9 @@ import { PluginManagerContext } from "../contexts/PluginManagerContext.js";
 export const PluginManagerShell: React.FC<{
   children?: React.ReactNode;
   onCancel?: () => void;
-}> = ({ children, onCancel }) => {
-  const pluginManager = usePluginManager();
+  onPluginInstalled?: () => void;
+}> = ({ children, onCancel, onPluginInstalled }) => {
+  const pluginManager = usePluginManager({ onPluginInstalled });
   const { state, actions, discoverablePlugins } = pluginManager;
 
   const setView = (view: ViewType) => {

package/src/components/PluginManagerTypes.ts

@@ -33,8 +33,14 @@ export interface PluginManagerContextType {
   actions: {
     setView: (view: ViewType) => void;
     setSelectedId: (id: string | null) => void;
-    addMarketplace: (source: string) => Promise<void>;
-    removeMarketplace: (name: string) => Promise<void>;
+    addMarketplace: (
+      source: string,
+      scope?: "user" | "project" | "local",
+    ) => Promise<void>;
+    removeMarketplace: (
+      name: string,
+      scope?: "user" | "project" | "local",
+    ) => Promise<void>;
     updateMarketplace: (name: string) => Promise<void>;
     installPlugin: (
       name: string,