wave-code 0.7.1 → 0.8.0

package/src/components/BackgroundTaskManager.tsx

@@ -85,14 +85,11 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
     if (viewMode === "list") {
       // List mode navigation
       if (key.return) {
-        setSelectedIndex((prev) => {
-          if (tasks.length > 0 && prev < tasks.length) {
-            const selectedTask = tasks[prev];
-            setDetailTaskId(selectedTask.id);
-            setViewMode("detail");
-          }
-          return prev;
-        });
+        if (tasks.length > 0 && selectedIndex < tasks.length) {
+          const selectedTask = tasks[selectedIndex];
+          setDetailTaskId(selectedTask.id);
+          setViewMode("detail");
+        }
         return;
       }
 
@@ -102,25 +99,20 @@ export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
       }
 
       if (key.upArrow) {
-        setSelectedIndex((prev) => Math.max(0, prev - 1));
+        setSelectedIndex(Math.max(0, selectedIndex - 1));
         return;
       }
 
       if (key.downArrow) {
-        setSelectedIndex((prev) => Math.min(tasks.length - 1, prev + 1));
+        setSelectedIndex(Math.min(tasks.length - 1, selectedIndex + 1));
         return;
       }
 
-      if (input === "k") {
-        setSelectedIndex((prev) => {
-          if (tasks.length > 0 && prev < tasks.length) {
-            const selectedTask = tasks[prev];
-            if (selectedTask.status === "running") {
-              stopTask(selectedTask.id);
-            }
-          }
-          return prev;
-        });
+      if (input === "k" && tasks.length > 0 && selectedIndex < tasks.length) {
+        const selectedTask = tasks[selectedIndex];
+        if (selectedTask.status === "running") {
+          stopTask(selectedTask.id);
+        }
         return;
       }
     } else if (viewMode === "detail") {

package/src/components/{CommandOutputDisplay.tsx → BangDisplay.tsx}

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Box, Text } from "ink";
-import type { CommandOutputBlock } from "wave-agent-sdk";
+import type { BangBlock } from "wave-agent-sdk";
 
-interface CommandOutputDisplayProps {
-  block: CommandOutputBlock;
+interface BangDisplayProps {
+  block: BangBlock;
   isExpanded?: boolean;
 }
 
-export const CommandOutputDisplay: React.FC<CommandOutputDisplayProps> = ({
+export const BangDisplay: React.FC<BangDisplayProps> = ({
   block,
   isExpanded = false,
 }) => {

package/src/components/ChatInterface.tsx

@@ -36,8 +36,13 @@ export const ChatInterface: React.FC = () => {
     handleConfirmationDecision,
     handleConfirmationCancel: originalHandleConfirmationCancel,
     setWasLastDetailsTooTall,
+    version,
+    workdir,
+    getModelConfig,
   } = useChat();
 
+  const model = getModelConfig().model;
+
   const handleDetailsHeightMeasured = useCallback((height: number) => {
     setDetailsHeight(height);
   }, []);
@@ -91,6 +96,9 @@ export const ChatInterface: React.FC = () => {
         messages={messages}
         isExpanded={isExpanded}
         hideDynamicBlocks={isConfirmationVisible}
+        version={version}
+        workdir={workdir}
+        model={model}
       />
 
       {(isLoading || isCommandRunning || isCompressing) &&

package/src/components/CommandSelector.tsx

@@ -3,6 +3,12 @@ import { Box, Text, useInput } from "ink";
 import type { SlashCommand } from "wave-agent-sdk";
 
 const AVAILABLE_COMMANDS: SlashCommand[] = [
+  {
+    id: "clear",
+    name: "clear",
+    description: "Clear the chat session and terminal",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
   {
     id: "tasks",
     name: "tasks",
@@ -28,6 +34,12 @@ const AVAILABLE_COMMANDS: SlashCommand[] = [
     description: "Show help and key bindings",
     handler: () => {}, // Handler here won't be used, actual processing is in the hook
   },
+  {
+    id: "status",
+    name: "status",
+    description: "Show agent status and configuration",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
 ];
 
 export interface CommandSelectorProps {
@@ -48,8 +60,13 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
   const MAX_VISIBLE_ITEMS = 3;
   const [selectedIndex, setSelectedIndex] = useState(0);
 
+  // Reset selected index when search query changes
+  React.useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery]);
+
   // Merge agent commands and local commands
-  const allCommands = [...commands, ...AVAILABLE_COMMANDS];
+  const allCommands = [...AVAILABLE_COMMANDS, ...commands];
 
   // Filter command list
   const filteredCommands = allCommands.filter(

package/src/components/ConfirmationSelector.tsx

@@ -70,6 +70,15 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     userAnswers: {} as Record<string, string>,
     otherText: "",
     otherCursorPosition: 0,
+    savedStates: {} as Record<
+      number,
+      {
+        selectedOptionIndex: number;
+        selectedOptionIndices: Set<number>;
+        otherText: string;
+        otherCursorPosition: number;
+      }
+    >,
   });
 
   const questions =
@@ -133,23 +142,75 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
           };
 
           if (prev.currentQuestionIndex < questions.length - 1) {
-            return {
-              ...prev,
-              currentQuestionIndex: prev.currentQuestionIndex + 1,
+            const nextIndex = prev.currentQuestionIndex + 1;
+            const savedStates = {
+              ...prev.savedStates,
+              [prev.currentQuestionIndex]: {
+                selectedOptionIndex: prev.selectedOptionIndex,
+                selectedOptionIndices: prev.selectedOptionIndices,
+                otherText: prev.otherText,
+                otherCursorPosition: prev.otherCursorPosition,
+              },
+            };
+
+            const nextState = savedStates[nextIndex] || {
               selectedOptionIndex: 0,
-              selectedOptionIndices: new Set(),
-              userAnswers: newAnswers,
+              selectedOptionIndices: new Set<number>(),
               otherText: "",
               otherCursorPosition: 0,
             };
+
+            return {
+              ...prev,
+              currentQuestionIndex: nextIndex,
+              ...nextState,
+              userAnswers: newAnswers,
+              savedStates,
+            };
           } else {
+            const finalAnswers = { ...newAnswers };
+            // Also collect from savedStates for any questions that were skipped via Tab
+            for (const [idxStr, s] of Object.entries(prev.savedStates)) {
+              const idx = parseInt(idxStr);
+              const q = questions[idx];
+              if (q && !finalAnswers[q.question]) {
+                const opts = [...q.options, { label: "Other" }];
+                let a = "";
+                if (q.multiSelect) {
+                  const selectedLabels = Array.from(s.selectedOptionIndices)
+                    .filter((i) => i < q.options.length)
+                    .map((i) => q.options[i].label);
+                  const isOtherChecked = s.selectedOptionIndices.has(
+                    opts.length - 1,
+                  );
+                  if (isOtherChecked && s.otherText.trim()) {
+                    selectedLabels.push(s.otherText.trim());
+                  }
+                  a = selectedLabels.join(", ");
+                } else {
+                  if (s.selectedOptionIndex === opts.length - 1) {
+                    a = s.otherText.trim();
+                  } else {
+                    a = opts[s.selectedOptionIndex].label;
+                  }
+                }
+                if (a) finalAnswers[q.question] = a;
+              }
+            }
+
+            // Only submit if all questions have been answered
+            const allAnswered = questions.every(
+              (q) => finalAnswers[q.question],
+            );
+            if (!allAnswered) return prev;
+
             onDecision({
               behavior: "allow",
-              message: JSON.stringify(newAnswers),
+              message: JSON.stringify(finalAnswers),
             });
             return {
               ...prev,
-              userAnswers: newAnswers,
+              userAnswers: finalAnswers,
             };
           }
         });
@@ -196,6 +257,41 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
         }));
         return;
       }
+      if (key.tab) {
+        setQuestionState((prev) => {
+          const direction = key.shift ? -1 : 1;
+          let nextIndex = prev.currentQuestionIndex + direction;
+          if (nextIndex < 0) nextIndex = questions.length - 1;
+          if (nextIndex >= questions.length) nextIndex = 0;
+
+          if (nextIndex === prev.currentQuestionIndex) return prev;
+
+          const savedStates = {
+            ...prev.savedStates,
+            [prev.currentQuestionIndex]: {
+              selectedOptionIndex: prev.selectedOptionIndex,
+              selectedOptionIndices: prev.selectedOptionIndices,
+              otherText: prev.otherText,
+              otherCursorPosition: prev.otherCursorPosition,
+            },
+          };
+
+          const nextState = savedStates[nextIndex] || {
+            selectedOptionIndex: 0,
+            selectedOptionIndices: new Set<number>(),
+            otherText: "",
+            otherCursorPosition: 0,
+          };
+
+          return {
+            ...prev,
+            currentQuestionIndex: nextIndex,
+            ...nextState,
+            savedStates,
+          };
+        });
+        return;
+      }
 
       setQuestionState((prev) => {
         const isOtherFocused = prev.selectedOptionIndex === options.length - 1;
@@ -321,6 +417,19 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
       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;
+      setState((prev) => ({
+        ...prev,
+        selectedOption: availableOptions[nextIndex],
+      }));
+      return;
+    }
+
     if (input && !key.ctrl && !key.meta && !("alt" in key && key.alt)) {
       setState((prev) => {
         const nextText =
@@ -436,7 +545,7 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
                 Question {questionState.currentQuestionIndex + 1} of{" "}
                 {questions.length} •
                 {currentQuestion.multiSelect ? " Space to toggle •" : ""} Use ↑↓
-                to navigate • Enter to confirm
+                or Tab to navigate • Enter to confirm
               </Text>
             </Box>
           </Box>
@@ -531,7 +640,7 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
             </Box>
           </Box>
           <Box marginTop={1}>
-            <Text dimColor>Use ↑↓ to navigate • ESC to cancel</Text>
+            <Text dimColor>Use ↑↓ or Tab to navigate • ESC to cancel</Text>
           </Box>
         </>
       )}

package/src/components/HelpView.tsx

@@ -21,6 +21,8 @@ export const HelpView: React.FC<HelpViewProps> = ({ onCancel }) => {
     { key: "Ctrl+B", description: "Background current task" },
     { key: "Ctrl+V", description: "Paste image" },
     { key: "Shift+Tab", description: "Cycle permission mode" },
+    { key: "/status", description: "Show agent status and configuration" },
+    { key: "/clear", description: "Clear the chat session and terminal" },
     {
       key: "Esc",
       description: "Interrupt AI or command / Cancel selector / Close help",

package/src/components/HistorySearch.tsx

@@ -14,34 +14,38 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
   onCancel,
 }) => {
   const MAX_VISIBLE_ITEMS = 5;
-  const [state, setState] = useState({
-    selectedIndex: 0,
-    entries: [] as PromptEntry[],
-  });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  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]);
 
   useEffect(() => {
     const fetchHistory = async () => {
       const results = await PromptHistoryManager.searchHistory(searchQuery);
       const limitedResults = results.slice(0, 20);
-      setState({
-        entries: limitedResults,
-        selectedIndex: 0,
-      });
+      setEntries(limitedResults); // Limit to 20 results
+      setSelectedIndex(0);
     };
     fetchHistory();
   }, [searchQuery]);
 
   useInput((input, key) => {
     if (key.return) {
-      setState((prev) => {
-        if (
-          prev.entries.length > 0 &&
-          prev.selectedIndex < prev.entries.length
-        ) {
-          onSelect(prev.entries[prev.selectedIndex].prompt);
-        }
-        return prev;
-      });
+      if (
+        entriesRef.current.length > 0 &&
+        selectedIndexRef.current < entriesRef.current.length
+      ) {
+        onSelect(entriesRef.current[selectedIndexRef.current].prompt);
+      }
       return;
     }
 
@@ -51,27 +55,18 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
     }
 
     if (key.upArrow) {
-      setState((prev) => ({
-        ...prev,
-        selectedIndex: Math.max(0, prev.selectedIndex - 1),
-      }));
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
       return;
     }
 
     if (key.downArrow) {
-      setState((prev) => ({
-        ...prev,
-        selectedIndex: Math.min(
-          prev.entries.length - 1,
-          prev.selectedIndex + 1,
-        ),
-      }));
+      setSelectedIndex((prev) =>
+        Math.min(entriesRef.current.length - 1, prev + 1),
+      );
       return;
     }
   });
 
-  const { entries, selectedIndex } = state;
-
   if (entries.length === 0) {
     return (
       <Box

package/src/components/InputBox.tsx

@@ -8,6 +8,7 @@ import { BackgroundTaskManager } from "./BackgroundTaskManager.js";
 import { McpManager } from "./McpManager.js";
 import { RewindCommand } from "./RewindCommand.js";
 import { HelpView } from "./HelpView.js";
+import { StatusCommand } from "./StatusCommand.js";
 import { useInputManager } from "../hooks/useInputManager.js";
 import { useChat } from "../contexts/useChat.js";
 
@@ -57,6 +58,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     backgroundCurrentTask,
     messages,
     getFullMessageThread,
+    clearMessages,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -88,10 +90,12 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showMcpManager,
     showRewindManager,
     showHelp,
+    showStatusCommand,
     setShowBackgroundTaskManager,
     setShowMcpManager,
     setShowRewindManager,
     setShowHelp,
+    setShowStatusCommand,
     // Permission mode
     permissionMode,
     setPermissionMode,
@@ -105,6 +109,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     onAbortMessage: abortMessage,
     onBackgroundCurrentTask: backgroundCurrentTask,
     onPermissionModeChange: setChatPermissionMode,
+    onClearMessages: clearMessages,
   });
 
   // Sync permission mode from useChat to InputManager
@@ -172,6 +177,10 @@ export const InputBox: React.FC<InputBoxProps> = ({
     return <HelpView onCancel={() => setShowHelp(false)} />;
   }
 
+  if (showStatusCommand) {
+    return <StatusCommand onCancel={() => setShowStatusCommand(false)} />;
+  }
+
   return (
     <Box flexDirection="column">
       {showFileSelector && (
@@ -219,7 +228,8 @@ export const InputBox: React.FC<InputBoxProps> = ({
       {showBackgroundTaskManager ||
         showMcpManager ||
         showRewindManager ||
-        showHelp || (
+        showHelp ||
+        showStatusCommand || (
           <Box flexDirection="column">
             <Box
               borderStyle="single"

package/src/components/MarketplaceAddForm.tsx

@@ -3,17 +3,21 @@ import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
 
 export const MarketplaceAddForm: React.FC = () => {
-  const { actions } = usePluginManagerContext();
+  const { state, actions } = usePluginManagerContext();
   const [source, setSource] = useState("");
 
   useInput((input, key) => {
     if (key.escape) {
       actions.setView("MARKETPLACES");
+    } else if (state.isLoading) {
+      return;
     } else if (key.return) {
-      if (source.trim()) {
-        actions.addMarketplace(source.trim());
-        actions.setView("MARKETPLACES");
-      }
+      setSource((prev) => {
+        if (prev.trim()) {
+          actions.addMarketplace(prev.trim());
+        }
+        return prev;
+      });
     } else if (key.backspace || key.delete) {
       setSource((prev) => prev.slice(0, -1));
     } else if (input.length === 1) {
@@ -28,11 +32,20 @@ export const MarketplaceAddForm: React.FC = () => {
       </Text>
       <Box marginTop={1}>
         <Text>Source (URL or Path): </Text>
-        <Text color="yellow">{source}</Text>
-        <Text color="yellow">_</Text>
+        <Text color={state.isLoading ? "gray" : "yellow"}>{source}</Text>
+        {!state.isLoading && <Text color="yellow">_</Text>}
       </Box>
+      {state.isLoading && (
+        <Box marginTop={1}>
+          <Text color="yellow">⌛ Adding marketplace...</Text>
+        </Box>
+      )}
       <Box marginTop={1}>
-        <Text dimColor>Press Enter to add, Esc to cancel</Text>
+        <Text dimColor>
+          {state.isLoading
+            ? "Please wait..."
+            : "Press Enter to add, Esc to cancel"}
+        </Text>
       </Box>
     </Box>
   );

package/src/components/MarketplaceDetail.tsx

@@ -24,14 +24,13 @@ export const MarketplaceDetail: React.FC = () => {
       setSelectedActionIndex((prev) =>
         prev < ACTIONS.length - 1 ? prev + 1 : 0,
       );
-    } else if (key.return && marketplace) {
+    } else if (key.return && marketplace && !state.isLoading) {
       const action = ACTIONS[selectedActionIndex].id;
       if (action === "update") {
         actions.updateMarketplace(marketplace.name);
       } else {
         actions.removeMarketplace(marketplace.name);
       }
-      actions.setView("MARKETPLACES");
     }
   });
 
@@ -56,19 +55,35 @@ export const MarketplaceDetail: React.FC = () => {
         <Text>Source: {JSON.stringify(marketplace.source)}</Text>
       </Box>
 
+      {state.isLoading && (
+        <Box marginBottom={1}>
+          <Text color="yellow">⌛ Processing operation...</Text>
+        </Box>
+      )}
+
       <Box marginTop={1} flexDirection="column">
         <Text bold>Marketplace Actions:</Text>
         {ACTIONS.map((action, index) => (
           <Text
             key={action.id}
-            color={index === selectedActionIndex ? "yellow" : undefined}
+            color={
+              index === selectedActionIndex
+                ? state.isLoading
+                  ? "gray"
+                  : "yellow"
+                : undefined
+            }
           >
             {index === selectedActionIndex ? "> " : "  "}
             {action.label}
           </Text>
         ))}
         <Box marginTop={1}>
-          <Text dimColor>Use ↑/↓ to select, Enter to confirm</Text>
+          <Text dimColor>
+            {state.isLoading
+              ? "Please wait..."
+              : "Use ↑/↓ to select, Enter to confirm"}
+          </Text>
         </Box>
         <Box marginTop={1}>
           <Text dimColor>Press Esc to go back</Text>

package/src/components/MessageBlockItem.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Text } from "ink";
 import type { Message, MessageBlock } from "wave-agent-sdk";
 import { MessageSource } from "wave-agent-sdk";
-import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
+import { BangDisplay } from "./BangDisplay.js";
 import { ToolDisplay } from "./ToolDisplay.js";
 import { CompressDisplay } from "./CompressDisplay.js";
 import { ReasoningDisplay } from "./ReasoningDisplay.js";
@@ -51,8 +51,8 @@ export const MessageBlockItem = ({
         </Box>
       )}
 
-      {block.type === "command_output" && (
-        <CommandOutputDisplay block={block} isExpanded={isExpanded} />
+      {block.type === "bang" && (
+        <BangDisplay block={block} isExpanded={isExpanded} />
       )}
 
       {block.type === "tool" && (