wave-code 0.13.6 → 0.14.1

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/MessageList.tsx

@@ -43,23 +43,19 @@ export const MessageList = React.memo(
           b.stage === "streaming" ||
           b.stage === "start")) ||
       (b.type === "bang" && b.stage === "running") ||
-      (b.type === "reasoning" && b.stage === "streaming");
+      (b.type === "reasoning" && b.stage === "streaming") ||
+      (b.type === "text" && b.stage === "streaming");
 
     // Flatten messages into blocks with metadata
-    // Filter out streaming text blocks to avoid frequent height changes,
-    // but allow streaming reasoning blocks (rendered as truncated gray text)
+    // Include streaming text blocks (rendered as truncated gray text)
     const allBlocks = visibleMessages.flatMap((message, messageIndex) => {
-      return message.blocks
-        .filter(
-          (block) => !(block.type === "text" && block.stage === "streaming"),
-        )
-        .map((block, blockIndex) => ({
-          block,
-          message,
-          messageIndex,
-          // Unique key for each block to help Static component
-          key: `${message.id}-${blockIndex}`,
-        }));
+      return message.blocks.map((block, blockIndex) => ({
+        block,
+        message,
+        messageIndex,
+        // Unique key for each block to help Static component
+        key: `${message.id}-${blockIndex}`,
+      }));
     });
 
     // Find message indices that have any running/streaming block

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,

package/src/components/TaskNotificationMessage.tsx

@@ -20,7 +20,7 @@ export const TaskNotificationMessage = ({
   return (
     <Box flexDirection="column">
       <Box>
-        <Text color={color}>● </Text>
+        <Text color={color}>◆ </Text>
         <Text color="white">{block.summary}</Text>
       </Box>
     </Box>

package/src/contexts/useChat.tsx

@@ -117,6 +117,8 @@ export interface ChatContextType {
   workingDirectory: string;
   version?: string;
   workdir?: string;
+  // Agent recreation (e.g. after plugin install)
+  recreateAgent: () => void;
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -332,8 +334,11 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   );
 
   // Initialize AI manager
-  useEffect(() => {
-    const initializeAgent = async () => {
+  const initializeAgent = useCallback(
+    async (restoreSessionIdOverride?: string) => {
+      const effectiveRestoreSessionId =
+        restoreSessionIdOverride ?? restoreSessionId;
+
       const callbacks: AgentCallbacks = {
         onMessagesChange: () => {
           throttledSetMessages();
@@ -400,7 +405,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
         const agent = await Agent.create({
           callbacks,
-          restoreSessionId,
+          restoreSessionId: effectiveRestoreSessionId,
           continueLastSession,
           logger,
           permissionMode:
@@ -442,25 +447,53 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       } catch (error) {
         console.error("Failed to initialize AI manager:", error);
       }
-    };
+    },
+    [
+      restoreSessionId,
+      continueLastSession,
+      bypassPermissions,
+      showConfirmation,
+      pluginDirs,
+      tools,
+      allowedTools,
+      disallowedTools,
+      workdir,
+      worktreeSession,
+      model,
+      initialPermissionMode,
+      throttledSetMessages,
+      throttledSetTokens,
+    ],
+  );
 
+  // Recreate agent (e.g. after plugin install) — destroys current agent and reinitializes
+  const recreateAgent = useCallback(() => {
+    const currentSessionId = agentRef.current?.sessionId;
+    if (agentRef.current) {
+      try {
+        agentRef.current.destroy();
+      } catch {
+        // Ignore destroy errors
+      }
+    }
+    agentRef.current = null;
+    setMessages([]);
+    setMcpServers([]);
+    setSlashCommands([]);
+    setSessionId("");
+    setIsLoading(false);
+    setlatestTotalTokens(0);
+    setIsCommandRunning(false);
+    setIsCompressing(false);
+    if (currentSessionId) {
+      initializeAgent(currentSessionId);
+    }
+  }, [initializeAgent]);
+
+  // Run initial agent creation
+  useEffect(() => {
     initializeAgent();
-  }, [
-    restoreSessionId,
-    continueLastSession,
-    bypassPermissions,
-    showConfirmation,
-    pluginDirs,
-    tools,
-    allowedTools,
-    disallowedTools,
-    workdir,
-    worktreeSession,
-    model,
-    initialPermissionMode,
-    throttledSetMessages,
-    throttledSetTokens,
-  ]);
+  }, [initializeAgent]);
 
   // Cleanup on unmount
   useEffect(() => {
@@ -613,6 +646,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     if (currentConfirmation) {
       currentConfirmation.reject();
     }
+    agentRef.current?.abortMessage();
     hideConfirmation();
   }, [currentConfirmation, hideConfirmation]);
 
@@ -697,10 +731,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     }
 
     // Handle ESC key to cancel confirmation
-    if (key.escape) {
-      if (isConfirmationVisible) {
-        handleConfirmationCancel();
-      }
+    if (key.escape && isConfirmationVisible) {
+      handleConfirmationCancel();
     }
   });
 
@@ -752,6 +784,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     workingDirectory,
     version,
     workdir,
+    recreateAgent,
   };
 
   return (