wave-code 0.8.4 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "0.8.4",
+  "version": "0.9.1",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -39,7 +39,7 @@
     "react": "^19.2.4",
     "react-dom": "19.2.4",
     "yargs": "^17.7.2",
-    "wave-agent-sdk": "0.8.4"
+    "wave-agent-sdk": "0.9.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",

package/src/components/ChatInterface.tsx

@@ -4,6 +4,7 @@ import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
 import { LoadingIndicator } from "./LoadingIndicator.js";
 import { TaskList } from "./TaskList.js";
+import { QueuedMessageList } from "./QueuedMessageList.js";
 import { ConfirmationDetails } from "./ConfirmationDetails.js";
 import { ConfirmationSelector } from "./ConfirmationSelector.js";
 
@@ -14,6 +15,7 @@ export const ChatInterface: React.FC = () => {
   const { stdout } = useStdout();
   const [detailsHeight, setDetailsHeight] = useState(0);
   const [selectorHeight, setSelectorHeight] = useState(0);
+  const [dynamicBlocksHeight, setDynamicBlocksHeight] = useState(0);
   const [isConfirmationTooTall, setIsConfirmationTooTall] = useState(false);
 
   const {
@@ -51,15 +53,36 @@ export const ChatInterface: React.FC = () => {
     setSelectorHeight(height);
   }, []);
 
+  const handleDynamicBlocksHeightMeasured = useCallback((height: number) => {
+    setDynamicBlocksHeight(height);
+  }, []);
+
   useLayoutEffect(() => {
+    if (!isConfirmationVisible) {
+      setIsConfirmationTooTall(false);
+      setDetailsHeight(0);
+      setSelectorHeight(0);
+      setDynamicBlocksHeight(0);
+      return;
+    }
+
+    if (isConfirmationTooTall) {
+      return;
+    }
+
     const terminalHeight = stdout?.rows || 24;
-    const totalHeight = detailsHeight + selectorHeight;
+    const totalHeight = detailsHeight + selectorHeight + dynamicBlocksHeight;
     if (totalHeight > terminalHeight) {
       setIsConfirmationTooTall(true);
-    } else {
-      setIsConfirmationTooTall(false);
     }
-  }, [detailsHeight, selectorHeight, stdout?.rows]);
+  }, [
+    detailsHeight,
+    selectorHeight,
+    dynamicBlocksHeight,
+    stdout?.rows,
+    isConfirmationVisible,
+    isConfirmationTooTall,
+  ]);
 
   const handleConfirmationCancel = useCallback(() => {
     if (isConfirmationTooTall) {
@@ -99,6 +122,7 @@ export const ChatInterface: React.FC = () => {
         version={version}
         workdir={workdir}
         model={model}
+        onDynamicBlocksHeightMeasured={handleDynamicBlocksHeightMeasured}
       />
 
       {(isLoading || isCommandRunning || isCompressing) &&
@@ -137,17 +161,20 @@ export const ChatInterface: React.FC = () => {
       )}
 
       {!isConfirmationVisible && !isExpanded && (
-        <InputBox
-          isLoading={isLoading}
-          isCommandRunning={isCommandRunning}
-          sendMessage={sendMessage}
-          abortMessage={abortMessage}
-          mcpServers={mcpServers}
-          connectMcpServer={connectMcpServer}
-          disconnectMcpServer={disconnectMcpServer}
-          slashCommands={slashCommands}
-          hasSlashCommand={hasSlashCommand}
-        />
+        <>
+          <QueuedMessageList />
+          <InputBox
+            isLoading={isLoading}
+            isCommandRunning={isCommandRunning}
+            sendMessage={sendMessage}
+            abortMessage={abortMessage}
+            mcpServers={mcpServers}
+            connectMcpServer={connectMcpServer}
+            disconnectMcpServer={disconnectMcpServer}
+            slashCommands={slashCommands}
+            hasSlashCommand={hasSlashCommand}
+          />
+        </>
       )}
     </Box>
   );

package/src/components/FileSelector.tsx

@@ -7,6 +7,7 @@ export { type FileItem } from "wave-agent-sdk";
 export interface FileSelectorProps {
   files: FileItem[];
   searchQuery: string;
+  isLoading?: boolean;
   onSelect: (filePath: string) => void;
   onCancel: () => void;
 }
@@ -14,6 +15,7 @@ export interface FileSelectorProps {
 export const FileSelector: React.FC<FileSelectorProps> = ({
   files,
   searchQuery,
+  isLoading = false,
   onSelect,
   onCancel,
 }) => {
@@ -48,13 +50,21 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
       <Box
         flexDirection="column"
         borderStyle="single"
-        borderColor="yellow"
+        borderColor={isLoading ? "cyan" : "yellow"}
         borderBottom={false}
         borderLeft={false}
         borderRight={false}
       >
-        <Text color="yellow">No files found for "{searchQuery}"</Text>
-        <Text dimColor>Press Escape to cancel</Text>
+        {isLoading ? (
+          <Text color="cyan" bold>
+            Select File/Directory...
+          </Text>
+        ) : (
+          <>
+            <Text color="yellow">No files found for "{searchQuery}"</Text>
+            <Text dimColor>Press Escape to cancel</Text>
+          </>
+        )}
       </Box>
     );
   }

package/src/components/HelpView.tsx

@@ -64,6 +64,7 @@ export const HelpView: React.FC<HelpViewProps> = ({
     { key: "Ctrl+T", description: "Toggle task list" },
     { key: "Ctrl+B", description: "Background current task" },
     { key: "Ctrl+V", description: "Paste image" },
+    { key: "Ctrl+J", description: "Newline" },
     { key: "Shift+Tab", description: "Cycle permission mode" },
     {
       key: "Esc",

package/src/components/HistorySearch.tsx

@@ -4,7 +4,7 @@ import { PromptHistoryManager, type PromptEntry } from "wave-agent-sdk";
 
 export interface HistorySearchProps {
   searchQuery: string;
-  onSelect: (prompt: string) => void;
+  onSelect: (entry: PromptEntry) => void;
   onCancel: () => void;
 }
 
@@ -44,7 +44,7 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
         entriesRef.current.length > 0 &&
         selectedIndexRef.current < entriesRef.current.length
       ) {
-        onSelect(entriesRef.current[selectedIndexRef.current].prompt);
+        onSelect(entriesRef.current[selectedIndexRef.current]);
       }
       return;
     }

package/src/components/InputBox.tsx

@@ -41,8 +41,6 @@ export interface InputBoxProps {
 }
 
 export const InputBox: React.FC<InputBoxProps> = ({
-  isLoading = false,
-  isCommandRunning = false,
   sendMessage = () => {},
   abortMessage = () => {},
   mcpServers = [],
@@ -59,6 +57,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     messages,
     getFullMessageThread,
     clearMessages,
+    sessionId,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -72,6 +71,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showFileSelector,
     filteredFiles,
     fileSearchQuery: searchQuery,
+    isFileSearching,
     handleFileSelect,
     handleCancelFileSelect,
     // Command selector
@@ -110,6 +110,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     onBackgroundCurrentTask: backgroundCurrentTask,
     onPermissionModeChange: setChatPermissionMode,
     onClearMessages: clearMessages,
+    sessionId,
   });
 
   // Sync permission mode from useChat to InputManager
@@ -119,14 +120,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
 
   // Use the InputManager's unified input handler
   useInput(async (input, key) => {
-    await handleInput(
-      input,
-      key,
-      attachedImages,
-      isLoading,
-      isCommandRunning,
-      clearImages,
-    );
+    await handleInput(input, key, attachedImages, clearImages);
   });
 
   const handleRewindCancel = () => {
@@ -138,6 +132,9 @@ export const InputBox: React.FC<InputBoxProps> = ({
   const isPlaceholder = !inputText;
   const placeholderText = INPUT_PLACEHOLDER_TEXT;
 
+  const isShellCommand =
+    inputText?.startsWith("!") && !inputText.includes("\n");
+
   // handleCommandSelectorInsert is already memoized in useInputManager, no need to wrap again
 
   // Split text into three parts: before cursor, cursor position, after cursor
@@ -189,6 +186,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
         <FileSelector
           files={filteredFiles}
           searchQuery={searchQuery}
+          isLoading={isFileSearching}
           onSelect={handleFileSelect}
           onCancel={handleCancelFileSelect}
         />
@@ -254,13 +252,19 @@ export const InputBox: React.FC<InputBoxProps> = ({
               </Text>
             </Box>
             <Box paddingRight={1} justifyContent="space-between" width="100%">
-              <Text color="gray">
-                Mode:{" "}
-                <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>
-                  {permissionMode}
-                </Text>{" "}
-                (Shift+Tab to cycle)
-              </Text>
+              {isShellCommand ? (
+                <Text color="gray">
+                  Shell: <Text color="yellow">Run shell command</Text>
+                </Text>
+              ) : (
+                <Text color="gray">
+                  Mode:{" "}
+                  <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>
+                    {permissionMode}
+                  </Text>{" "}
+                  (Shift+Tab to cycle)
+                </Text>
+              )}
             </Box>
           </Box>
         )}

package/src/components/MessageBlockItem.tsx

@@ -35,8 +35,11 @@ export const MessageBlockItem = ({
               ~{" "}
             </Text>
           )}
-          {message.role === "user" ? (
-            <Text backgroundColor="gray" color="white">
+          {message.role === "user" || isExpanded ? (
+            <Text
+              backgroundColor={message.role === "user" ? "gray" : undefined}
+              color="white"
+            >
               {block.content}
             </Text>
           ) : (
@@ -77,7 +80,9 @@ export const MessageBlockItem = ({
         <CompressDisplay block={block} isExpanded={isExpanded} />
       )}
 
-      {block.type === "reasoning" && <ReasoningDisplay block={block} />}
+      {block.type === "reasoning" && (
+        <ReasoningDisplay block={block} isExpanded={isExpanded} />
+      )}
     </Box>
   );
 };

package/src/components/MessageList.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useLayoutEffect, useRef } from "react";
 import os from "os";
-import { Box, Text, Static } from "ink";
+import { Box, Text, Static, measureElement } from "ink";
 import type { Message } from "wave-agent-sdk";
 import { MessageBlockItem } from "./MessageBlockItem.js";
 
@@ -11,6 +11,7 @@ export interface MessageListProps {
   version?: string;
   workdir?: string;
   model?: string;
+  onDynamicBlocksHeightMeasured?: (height: number) => void;
 }
 
 export const MessageList = React.memo(
@@ -21,6 +22,7 @@ export const MessageList = React.memo(
     version,
     workdir,
     model,
+    onDynamicBlocksHeightMeasured,
   }: MessageListProps) => {
     const welcomeMessage = (
       <Box flexDirection="column" paddingTop={1}>
@@ -72,6 +74,17 @@ export const MessageList = React.memo(
     const staticBlocks = blocksWithStatus.filter((b) => !b.isDynamic);
     const dynamicBlocks = blocksWithStatus.filter((b) => b.isDynamic);
 
+    const dynamicBlocksRef = useRef(null);
+
+    useLayoutEffect(() => {
+      if (dynamicBlocksRef.current) {
+        const { height } = measureElement(dynamicBlocksRef.current);
+        onDynamicBlocksHeightMeasured?.(height);
+      } else {
+        onDynamicBlocksHeightMeasured?.(0);
+      }
+    }, [dynamicBlocks, isExpanded, onDynamicBlocksHeightMeasured]);
+
     const staticItems = [
       { isWelcome: true, key: "welcome", block: undefined, message: undefined },
       ...staticBlocks.map((b) => ({ ...b, isWelcome: false })),
@@ -105,7 +118,7 @@ export const MessageList = React.memo(
 
         {/* Dynamic blocks */}
         {dynamicBlocks.length > 0 && (
-          <Box flexDirection="column">
+          <Box ref={dynamicBlocksRef} flexDirection="column">
             {dynamicBlocks.map((item) => (
               <MessageBlockItem
                 key={item.key}

package/src/components/QueuedMessageList.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useChat } from "../contexts/useChat.js";
+import { Box, Text } from "ink";
+
+export const QueuedMessageList: React.FC = () => {
+  const { queuedMessages = [] } = useChat();
+
+  if (queuedMessages.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column">
+      {queuedMessages.map((msg, index) => {
+        const content = msg.content.trim();
+        const hasImages = msg.images && msg.images.length > 0;
+        const displayText = content || (hasImages ? "[Images]" : "");
+
+        return (
+          <Box key={index}>
+            <Text color="gray" italic>
+              {displayText.length > 60
+                ? `${displayText.substring(0, 57)}...`
+                : displayText}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/ReasoningDisplay.tsx

@@ -1,14 +1,16 @@
 import React from "react";
-import { Box } from "ink";
+import { Box, Text } from "ink";
 import type { ReasoningBlock } from "wave-agent-sdk";
 import { Markdown } from "./Markdown.js";
 
 interface ReasoningDisplayProps {
   block: ReasoningBlock;
+  isExpanded?: boolean;
 }
 
 export const ReasoningDisplay: React.FC<ReasoningDisplayProps> = ({
   block,
+  isExpanded = false,
 }) => {
   const { content } = block;
 
@@ -26,7 +28,11 @@ export const ReasoningDisplay: React.FC<ReasoningDisplayProps> = ({
       paddingLeft={1}
     >
       <Box flexDirection="column">
-        <Markdown>{content}</Markdown>
+        {isExpanded ? (
+          <Text color="white">{content}</Text>
+        ) : (
+          <Markdown>{content}</Markdown>
+        )}
       </Box>
     </Box>
   );

package/src/components/ToolDisplay.tsx

@@ -129,8 +129,8 @@ export const ToolDisplay: React.FC<ToolDisplayProps> = ({
         </Box>
       )}
 
-      {/* Diff display - only show after tool execution completes and was successful */}
-      {stage === "end" && success && (
+      {/* Diff display - only show after tool execution completes and was successful, and NOT in expanded mode */}
+      {!isExpanded && stage === "end" && success && (
         <DiffDisplay
           toolName={name}
           parameters={parameters}

package/src/contexts/useChat.tsx

@@ -37,6 +37,10 @@ export interface ChatContextType {
   isExpanded: boolean;
   isTaskListVisible: boolean;
   setIsTaskListVisible: (visible: boolean) => void;
+  queuedMessages: Array<{
+    content: string;
+    images?: Array<{ path: string; mimeType: string }>;
+  }>;
   // AI functionality
   sessionId: string;
   sendMessage: (
@@ -139,6 +143,13 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
   const [isTaskListVisible, setIsTaskListVisible] = useState(true);
 
+  const [queuedMessages, setQueuedMessages] = useState<
+    Array<{
+      content: string;
+      images?: Array<{ path: string; mimeType: string }>;
+    }>
+  >([]);
+
   // AI State
   const [messages, setMessages] = useState<Message[]>([]);
 
@@ -393,6 +404,11 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
       if (!hasTextContent && !hasImageAttachments) return;
 
+      if (isLoading || isCommandRunning) {
+        setQueuedMessages((prev) => [...prev, { content, images }]);
+        return;
+      }
+
       try {
         // Handle bash mode - check if it's a bash command (starts with ! and only one line)
         if (content.startsWith("!") && !content.includes("\n")) {
@@ -432,15 +448,26 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
         // Loading state will be automatically updated by the useEffect that watches messages
       }
     },
-    [],
+    [isLoading, isCommandRunning],
   );
 
+  // Process queued messages when idle
+  useEffect(() => {
+    if (!isLoading && !isCommandRunning && queuedMessages.length > 0) {
+      const nextMessage = queuedMessages[0];
+      setQueuedMessages((prev) => prev.slice(1));
+      sendMessage(nextMessage.content, nextMessage.images);
+    }
+  }, [isLoading, isCommandRunning, queuedMessages, sendMessage]);
+
   // Unified interrupt method, interrupt both AI messages and command execution
   const abortMessage = useCallback(() => {
+    setQueuedMessages([]);
     agentRef.current?.abortMessage();
   }, []);
 
   const clearMessages = useCallback(() => {
+    setQueuedMessages([]);
     agentRef.current?.clearMessages();
   }, []);
 
@@ -604,6 +631,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     isExpanded,
     isTaskListVisible,
     setIsTaskListVisible,
+    queuedMessages,
     sessionId,
     sendMessage,
     abortMessage,

package/src/hooks/useInputManager.ts

@@ -5,7 +5,11 @@ import {
   initialState,
   InputManagerCallbacks,
 } from "../managers/inputReducer.js";
-import { searchFiles as searchFilesUtil, PermissionMode } from "wave-agent-sdk";
+import {
+  searchFiles as searchFilesUtil,
+  PermissionMode,
+  PromptEntry,
+} from "wave-agent-sdk";
 import * as handlers from "../managers/inputHandlers.js";
 
 export const useInputManager = (
@@ -37,10 +41,10 @@ export const useInputManager = (
   // Handle debounced file search
   useEffect(() => {
     if (state.showFileSelector) {
-      const debounceDelay = parseInt(
-        process.env.FILE_SELECTOR_DEBOUNCE_MS || "300",
-        10,
-      );
+      const debounceDelay =
+        state.fileSearchQuery === ""
+          ? 0
+          : parseInt(process.env.FILE_SELECTOR_DEBOUNCE_MS || "300", 10);
       const timer = setTimeout(async () => {
         try {
           const fileItems = await searchFilesUtil(state.fileSearchQuery);
@@ -68,7 +72,7 @@ export const useInputManager = (
         );
         dispatch({ type: "COMPRESS_AND_INSERT_TEXT", payload: processedInput });
         dispatch({ type: "END_PASTE" });
-        callbacksRef.current.onResetHistoryNavigation?.();
+        dispatch({ type: "RESET_HISTORY_NAVIGATION" });
       }, pasteDebounceDelay);
       return () => clearTimeout(timer);
     }
@@ -204,14 +208,16 @@ export const useInputManager = (
   const handleCommandInsert = useCallback((command: string) => {
     const currentState = stateRef.current;
     if (currentState.slashPosition >= 0) {
+      const wordEnd = handlers.getWordEnd(
+        currentState.inputText,
+        currentState.slashPosition,
+      );
       const beforeSlash = currentState.inputText.substring(
         0,
         currentState.slashPosition,
       );
-      const afterQuery = currentState.inputText.substring(
-        currentState.cursorPosition,
-      );
-      const newInput = beforeSlash + `/${command} ` + afterQuery;
+      const afterWord = currentState.inputText.substring(wordEnd);
+      const newInput = beforeSlash + `/${command} ` + afterWord;
       const newCursorPosition = beforeSlash.length + command.length + 2;
 
       dispatch({ type: "SET_INPUT_TEXT", payload: newInput });
@@ -245,24 +251,16 @@ export const useInputManager = (
     );
   }, []);
 
-  const handleHistorySearchSelect = useCallback((prompt: string) => {
-    dispatch({ type: "SET_INPUT_TEXT", payload: prompt });
-    dispatch({ type: "SET_CURSOR_POSITION", payload: prompt.length });
-    dispatch({ type: "CANCEL_HISTORY_SEARCH" });
+  const handleHistorySearchSelect = useCallback((entry: PromptEntry) => {
+    dispatch({ type: "SELECT_HISTORY_ENTRY", payload: entry });
   }, []);
 
   const handleCancelHistorySearch = useCallback(() => {
     dispatch({ type: "CANCEL_HISTORY_SEARCH" });
   }, []);
 
-  const handleSpecialCharInput = useCallback((char: string) => {
-    handlers.handleSpecialCharInput(
-      stateRef.current,
-      dispatch,
-      char,
-      stateRef.current.cursorPosition,
-      stateRef.current.inputText,
-    );
+  const processSelectorInput = useCallback((char: string) => {
+    handlers.processSelectorInput(stateRef.current, dispatch, char);
   }, []);
 
   const setInputText = useCallback((text: string) => {
@@ -326,15 +324,11 @@ export const useInputManager = (
   const handleSubmit = useCallback(
     async (
       attachedImages: Array<{ id: number; path: string; mimeType: string }>,
-      isLoading: boolean = false,
-      isCommandRunning: boolean = false,
     ) => {
       await handlers.handleSubmit(
         stateRef.current,
         dispatch,
         callbacksRef.current,
-        isLoading,
-        isCommandRunning,
         attachedImages,
       );
     },
@@ -357,8 +351,6 @@ export const useInputManager = (
       input: string,
       key: Key,
       attachedImages: Array<{ id: number; path: string; mimeType: string }>,
-      isLoading: boolean = false,
-      isCommandRunning: boolean = false,
       clearImages?: () => void,
     ) => {
       return await handlers.handleInput(
@@ -367,8 +359,6 @@ export const useInputManager = (
         callbacksRef.current,
         input,
         key,
-        isLoading,
-        isCommandRunning,
         clearImages,
       );
     },
@@ -382,6 +372,7 @@ export const useInputManager = (
     showFileSelector: state.showFileSelector,
     filteredFiles: state.filteredFiles,
     fileSearchQuery: state.fileSearchQuery,
+    isFileSearching: state.isFileSearching,
     atPosition: state.atPosition,
     showCommandSelector: state.showCommandSelector,
     commandSearchQuery: state.commandSearchQuery,
@@ -424,7 +415,7 @@ export const useInputManager = (
     handleCancelHistorySearch,
 
     // Special handling
-    handleSpecialCharInput,
+    processSelectorInput,
 
     // Bash/MCP Manager
     setShowBackgroundTaskManager,