wave-code 0.5.0 → 0.6.0

package/dist/managers/InputManager.js

@@ -18,9 +18,6 @@ export class InputManager {
         // History search state
         this.showHistorySearch = false;
         this.historySearchQuery = "";
-        // Memory type selector state
-        this.showMemoryTypeSelector = false;
-        this.memoryMessage = "";
         // Input history state
         this.userInputHistory = [];
         this.historyIndex = -1;
@@ -37,7 +34,7 @@ export class InputManager {
         this.attachedImages = [];
         this.imageIdCounter = 1;
         // Additional UI state
-        this.showTaskManager = false;
+        this.showBackgroundTaskManager = false;
         this.showMcpManager = false;
         this.showRewindManager = false;
         // Permission mode state
@@ -220,17 +217,16 @@ export class InputManager {
                 }
                 // If not an agent command or execution failed, check local commands
                 if (!commandExecuted) {
-                    if (command === "tasks" && this.callbacks.onShowTaskManager) {
-                        this.callbacks.onShowTaskManager();
+                    if (command === "tasks") {
+                        this.setShowBackgroundTaskManager(true);
                         commandExecuted = true;
                     }
-                    else if (command === "mcp" && this.callbacks.onShowMcpManager) {
-                        this.callbacks.onShowMcpManager();
+                    else if (command === "mcp") {
+                        this.setShowMcpManager(true);
                         commandExecuted = true;
                     }
-                    else if (command === "rewind" &&
-                        this.callbacks.onShowRewindManager) {
-                        this.callbacks.onShowRewindManager();
+                    else if (command === "rewind") {
+                        this.setShowRewindManager(true);
                         commandExecuted = true;
                     }
                 }
@@ -280,29 +276,6 @@ export class InputManager {
         }
         return false;
     }
-    // Memory type selector methods
-    activateMemoryTypeSelector(message) {
-        this.showMemoryTypeSelector = true;
-        this.memoryMessage = message;
-        this.callbacks.onMemoryTypeSelectorStateChange?.(true, message);
-    }
-    async handleMemoryTypeSelect(type) {
-        const currentMessage = this.inputText.trim();
-        if (currentMessage.startsWith("#")) {
-            await this.callbacks.onSaveMemory?.(currentMessage, type);
-        }
-        // Close the selector
-        this.showMemoryTypeSelector = false;
-        this.memoryMessage = "";
-        this.callbacks.onMemoryTypeSelectorStateChange?.(false, "");
-        // Clear input box
-        this.clearInput();
-    }
-    handleCancelMemoryTypeSelect() {
-        this.showMemoryTypeSelector = false;
-        this.memoryMessage = "";
-        this.callbacks.onMemoryTypeSelectorStateChange?.(false, "");
-    }
     // Input history methods
     setUserInputHistory(history) {
         this.userInputHistory = history;
@@ -360,9 +333,6 @@ export class InputManager {
     isCommandSelectorActive() {
         return this.showCommandSelector;
     }
-    isMemoryTypeSelectorActive() {
-        return this.showMemoryTypeSelector;
-    }
     getFileSelectorState() {
         return {
             show: this.showFileSelector,
@@ -378,12 +348,6 @@ export class InputManager {
             position: this.slashPosition,
         };
     }
-    getMemoryTypeSelectorState() {
-        return {
-            show: this.showMemoryTypeSelector,
-            message: this.memoryMessage,
-        };
-    }
     // Update search queries for active selectors
     updateSearchQueriesForActiveSelectors(inputText, cursorPosition) {
         if (this.showFileSelector && this.atPosition >= 0) {
@@ -411,9 +375,6 @@ export class InputManager {
             // Only activate command selector if '/' is at the start of input
             this.activateCommandSelector(this.cursorPosition - 1);
         }
-        else if (char === "#" && this.cursorPosition === 1) {
-            // Memory message detection will be handled in submit
-        }
         else {
             // Update search queries for active selectors
             this.updateSearchQueriesForActiveSelectors(this.inputText, this.cursorPosition);
@@ -539,12 +500,12 @@ export class InputManager {
         }
     }
     // Task manager state methods
-    getShowTaskManager() {
-        return this.showTaskManager;
+    getShowBackgroundTaskManager() {
+        return this.showBackgroundTaskManager;
     }
-    setShowTaskManager(show) {
-        this.showTaskManager = show;
-        this.callbacks.onTaskManagerStateChange?.(show);
+    setShowBackgroundTaskManager(show) {
+        this.showBackgroundTaskManager = show;
+        this.callbacks.onBackgroundTaskManagerStateChange?.(show);
     }
     getShowMcpManager() {
         return this.showMcpManager;
@@ -586,13 +547,6 @@ export class InputManager {
             return;
         }
         if (this.inputText.trim()) {
-            const trimmedInput = this.inputText.trim();
-            // Check if it's a memory message (starts with # and only one line)
-            if (trimmedInput.startsWith("#") && !trimmedInput.includes("\n")) {
-                // Activate memory type selector
-                this.activateMemoryTypeSelector(trimmedInput);
-                return;
-            }
             // Extract image information
             const imageRegex = /\[Image #(\d+)\]/g;
             const matches = [...this.inputText.matchAll(imageRegex)];
@@ -773,7 +727,11 @@ export class InputManager {
             return true;
         }
         // Handle interrupt request - use Esc key to interrupt AI request or command
-        if (key.escape && (isLoading || isCommandRunning)) {
+        if (key.escape &&
+            (isLoading || isCommandRunning) &&
+            !this.showBackgroundTaskManager &&
+            !this.showMcpManager &&
+            !this.showRewindManager) {
             // Unified interrupt for AI message generation and command execution
             this.callbacks.onAbortMessage?.();
             return true;
@@ -788,16 +746,15 @@ export class InputManager {
         if (this.showFileSelector ||
             this.showCommandSelector ||
             this.showHistorySearch ||
-            this.showMemoryTypeSelector ||
-            this.showTaskManager ||
+            this.showBackgroundTaskManager ||
             this.showMcpManager ||
             this.showRewindManager) {
-            if (this.showMemoryTypeSelector ||
-                this.showTaskManager ||
+            if (this.showBackgroundTaskManager ||
                 this.showMcpManager ||
                 this.showRewindManager) {
-                // Memory type selector, task manager, MCP manager and Rewind don't need to handle input, handled by component itself
-                return false;
+                // Task manager, MCP manager and Rewind don't need to handle input, handled by component itself
+                // Return true to indicate we've "handled" it (by ignoring it) so it doesn't leak to normal input
+                return true;
             }
             if (this.showHistorySearch) {
                 if (key.escape) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -30,15 +30,14 @@
   ],
   "dependencies": {
     "chalk": "^5.6.2",
-    "cli-highlight": "^2.1.11",
     "diff": "^8.0.2",
     "glob": "^13.0.0",
-    "ink": "^6.5.1",
-    "marked": "^11.2.0",
+    "ink": "^6.7.0",
+    "marked": "^17.0.2",
     "react": "^19.2.4",
     "react-dom": "19.2.4",
     "yargs": "^17.7.2",
-    "wave-agent-sdk": "0.5.0"
+    "wave-agent-sdk": "0.6.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
@@ -60,7 +59,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "wave": "tsx src/index.ts",
+    "wave": "tsx --tsconfig tsconfig.dev.json src/index.ts",
     "build": "rimraf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "type-check": "tsc --noEmit --incremental",
     "watch": "tsc -p tsconfig.build.json --watch & tsc-alias -p tsconfig.build.json --watch",

package/src/components/{TaskManager.tsx → BackgroundTaskManager.tsx}

@@ -12,11 +12,13 @@ interface Task {
   runtime?: number;
 }
 
-export interface TaskManagerProps {
+export interface BackgroundTaskManagerProps {
   onCancel: () => void;
 }
 
-export const TaskManager: React.FC<TaskManagerProps> = ({ onCancel }) => {
+export const BackgroundTaskManager: React.FC<BackgroundTaskManagerProps> = ({
+  onCancel,
+}) => {
   const { backgroundTasks, getBackgroundTaskOutput, stopBackgroundTask } =
     useChat();
   const [tasks, setTasks] = useState<Task[]>([]);

package/src/components/ChatInterface.tsx

@@ -1,11 +1,20 @@
-import React from "react";
-import { Box } from "ink";
+import React, { useState, useCallback, useEffect } from "react";
+import { Box, useStdout } from "ink";
 import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
-import { Confirmation } from "./Confirmation.js";
+import { LoadingIndicator } from "./LoadingIndicator.js";
+import { TaskList } from "./TaskList.js";
+import { ConfirmationDetails } from "./ConfirmationDetails.js";
+import { ConfirmationSelector } from "./ConfirmationSelector.js";
+
 import { useChat } from "../contexts/useChat.js";
+import type { PermissionDecision } from "wave-agent-sdk";
 
 export const ChatInterface: React.FC = () => {
+  const { stdout } = useStdout();
+  const [isDetailsTooTall, setIsDetailsTooTall] = useState(false);
+  const [wasLastDetailsTooTall, setWasLastDetailsTooTall] = useState(0);
+
   const {
     messages,
     isLoading,
@@ -14,7 +23,6 @@ export const ChatInterface: React.FC = () => {
     isCompressing,
     sendMessage,
     abortMessage,
-    saveMemory,
     mcpServers,
     connectMcpServer,
     disconnectMcpServer,
@@ -26,35 +34,108 @@ export const ChatInterface: React.FC = () => {
     isConfirmationVisible,
     confirmingTool,
     handleConfirmationDecision,
-    handleConfirmationCancel,
+    handleConfirmationCancel: originalHandleConfirmationCancel,
     rewindId,
   } = useChat();
 
+  const [remountKey, setRemountKey] = useState(
+    String(isExpanded) + sessionId + rewindId + wasLastDetailsTooTall,
+  );
+
+  useEffect(() => {
+    const newKey =
+      String(isExpanded) + sessionId + rewindId + wasLastDetailsTooTall;
+    if (newKey !== remountKey) {
+      stdout?.write("\u001b[2J\u001b[0;0H", (err?: Error | null) => {
+        if (err) {
+          console.error("Failed to clear terminal:", err);
+        }
+        setRemountKey(newKey);
+      });
+    }
+  }, [
+    isExpanded,
+    sessionId,
+    rewindId,
+    wasLastDetailsTooTall,
+    remountKey,
+    stdout,
+  ]);
+
+  const handleHeightMeasured = useCallback(
+    (height: number) => {
+      const terminalHeight = stdout?.rows || 24;
+      if (height > terminalHeight - 10) {
+        setIsDetailsTooTall(true);
+      } else {
+        setIsDetailsTooTall(false);
+      }
+    },
+    [stdout?.rows],
+  );
+
+  const handleConfirmationCancel = useCallback(() => {
+    if (isDetailsTooTall) {
+      setWasLastDetailsTooTall((prev) => prev + 1);
+      setIsDetailsTooTall(false);
+    }
+    originalHandleConfirmationCancel();
+  }, [isDetailsTooTall, originalHandleConfirmationCancel]);
+
+  const wrappedHandleConfirmationDecision = useCallback(
+    (decision: PermissionDecision) => {
+      if (isDetailsTooTall) {
+        setWasLastDetailsTooTall((prev) => prev + 1);
+        setIsDetailsTooTall(false);
+      }
+      handleConfirmationDecision(decision);
+    },
+    [isDetailsTooTall, handleConfirmationDecision],
+  );
+
   if (!sessionId) return null;
 
   return (
-    <Box flexDirection="column" height="100%" paddingY={1} paddingRight={1}>
+    <Box flexDirection="column">
       <MessageList
         messages={messages}
         isLoading={isLoading}
         isCommandRunning={isCommandRunning}
-        isCompressing={isCompressing}
-        latestTotalTokens={latestTotalTokens}
         isExpanded={isExpanded}
-        key={String(isExpanded) + sessionId + rewindId}
+        forceStaticLastMessage={isDetailsTooTall}
+        key={remountKey}
       />
 
+      {(isLoading || isCommandRunning || isCompressing) &&
+        !isConfirmationVisible && (
+          <LoadingIndicator
+            isLoading={isLoading}
+            isCommandRunning={isCommandRunning}
+            isCompressing={isCompressing}
+            latestTotalTokens={latestTotalTokens}
+          />
+        )}
+      {!isConfirmationVisible && <TaskList />}
+
       {isConfirmationVisible && (
-        <Confirmation
-          toolName={confirmingTool!.name}
-          toolInput={confirmingTool!.input}
-          suggestedPrefix={confirmingTool!.suggestedPrefix}
-          hidePersistentOption={confirmingTool!.hidePersistentOption}
-          isExpanded={isExpanded}
-          onDecision={handleConfirmationDecision}
-          onCancel={handleConfirmationCancel}
-          onAbort={abortMessage}
-        />
+        <>
+          <ConfirmationDetails
+            toolName={confirmingTool!.name}
+            toolInput={confirmingTool!.input}
+            isExpanded={isExpanded}
+            onHeightMeasured={handleHeightMeasured}
+          />
+          <ConfirmationSelector
+            toolName={confirmingTool!.name}
+            toolInput={confirmingTool!.input}
+            suggestedPrefix={confirmingTool!.suggestedPrefix}
+            hidePersistentOption={confirmingTool!.hidePersistentOption}
+            isExpanded={isExpanded}
+            onDecision={wrappedHandleConfirmationDecision}
+            onCancel={handleConfirmationCancel}
+            onAbort={abortMessage}
+          />
+        </>
       )}
 
       {!isConfirmationVisible && !isExpanded && (
@@ -64,7 +145,6 @@ export const ChatInterface: React.FC = () => {
           userInputHistory={userInputHistory}
           sendMessage={sendMessage}
           abortMessage={abortMessage}
-          saveMemory={saveMemory}
           mcpServers={mcpServers}
           connectMcpServer={connectMcpServer}
           disconnectMcpServer={disconnectMcpServer}

package/src/components/CommandSelector.tsx

@@ -39,6 +39,7 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
   onCancel,
   commands = [], // Default to empty array
 }) => {
+  const MAX_VISIBLE_ITEMS = 3;
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   // Merge agent commands and local commands
@@ -51,6 +52,19 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       command.id.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
+  // Calculate visible window
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, filteredCommands.length - MAX_VISIBLE_ITEMS),
+    ),
+  );
+  const visibleCommands = filteredCommands.slice(
+    startIndex,
+    startIndex + MAX_VISIBLE_ITEMS,
+  );
+
   useInput((input, key) => {
     if (key.return) {
       if (
@@ -101,7 +115,6 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         borderBottom={false}
         borderLeft={false}
         borderRight={false}
-        paddingTop={1}
       >
         <Text color="yellow">No commands found for "{searchQuery}"</Text>
         <Text dimColor>Press Escape to cancel</Text>
@@ -117,7 +130,6 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
-      paddingTop={1}
       gap={1}
     >
       <Box>
@@ -126,23 +138,29 @@ export const CommandSelector: React.FC<CommandSelectorProps> = ({
         </Text>
       </Box>
 
-      {filteredCommands.map((command, index) => (
-        <Box key={command.id} flexDirection="column">
-          <Text
-            color={index === selectedIndex ? "black" : "white"}
-            backgroundColor={index === selectedIndex ? "magenta" : undefined}
-          >
-            {index === selectedIndex ? "▶ " : "  "}/{command.id}
-          </Text>
-          {index === selectedIndex && (
-            <Box marginLeft={4}>
-              <Text color="gray" dimColor>
-                {command.description}
+      <Box flexDirection="column">
+        {visibleCommands.map((command, index) => {
+          const actualIndex = startIndex + index;
+          const isSelected = actualIndex === selectedIndex;
+          return (
+            <Box key={command.id} flexDirection="column">
+              <Text
+                color={isSelected ? "black" : "white"}
+                backgroundColor={isSelected ? "magenta" : undefined}
+              >
+                {isSelected ? "▶ " : "  "}/{command.id}
               </Text>
+              {isSelected && (
+                <Box marginLeft={4}>
+                  <Text color="gray" dimColor>
+                    {command.description}
+                  </Text>
+                </Box>
+              )}
             </Box>
-          )}
-        </Box>
-      ))}
+          );
+        })}
+      </Box>
 
       <Box>
         <Text dimColor>

package/src/components/CompressDisplay.tsx

@@ -7,25 +7,16 @@ interface CompressDisplayProps {
   isExpanded?: boolean;
 }
 
-export const CompressDisplay: React.FC<CompressDisplayProps> = ({
-  block,
-  isExpanded = false,
-}) => {
+export const CompressDisplay: React.FC<CompressDisplayProps> = ({ block }) => {
   const { content } = block;
-  const MAX_LINES = 3; // Set maximum display lines for compressed content
 
-  const { displayContent, isOverflowing } = useMemo(() => {
+  const { displayContent } = useMemo(() => {
     if (!content) {
-      return { displayContent: "", isOverflowing: false };
+      return { displayContent: "" };
     }
 
-    const lines = content.split("\n");
-    const overflow = !isExpanded && lines.length > MAX_LINES;
-
-    const display = overflow ? lines.slice(0, MAX_LINES).join("\n") : content;
-
-    return { displayContent: display, isOverflowing: overflow };
-  }, [content, isExpanded]);
+    return { displayContent: content };
+  }, [content]);
 
   return (
     <Box flexDirection="column">
@@ -43,14 +34,6 @@ export const CompressDisplay: React.FC<CompressDisplayProps> = ({
           >
             <Text color="white">{displayContent}</Text>
           </Box>
-          {isOverflowing && (
-            <Box paddingLeft={2} marginTop={1}>
-              <Text color="yellow" dimColor>
-                Content truncated ({content.split("\n").length} lines total,
-                showing first {MAX_LINES} lines. Press Ctrl+O to expand.
-              </Text>
-            </Box>
-          )}
         </Box>
       )}
     </Box>

package/src/components/ConfirmationDetails.tsx

@@ -0,0 +1,108 @@
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text, useStdout, measureElement, Static } from "ink";
+import {
+  BASH_TOOL_NAME,
+  EDIT_TOOL_NAME,
+  MULTI_EDIT_TOOL_NAME,
+  DELETE_FILE_TOOL_NAME,
+  WRITE_TOOL_NAME,
+  EXIT_PLAN_MODE_TOOL_NAME,
+  ASK_USER_QUESTION_TOOL_NAME,
+} from "wave-agent-sdk";
+import { DiffDisplay } from "./DiffDisplay.js";
+import { PlanDisplay } from "./PlanDisplay.js";
+
+// Helper function to generate descriptive action text
+const getActionDescription = (
+  toolName: string,
+  toolInput?: Record<string, unknown>,
+): string => {
+  if (!toolInput) {
+    return "Execute operation";
+  }
+
+  switch (toolName) {
+    case BASH_TOOL_NAME:
+      return `Execute command: ${toolInput.command || "unknown command"}`;
+    case EDIT_TOOL_NAME:
+      return `Edit file: ${toolInput.file_path || "unknown file"}`;
+    case MULTI_EDIT_TOOL_NAME:
+      return `Edit multiple sections in: ${toolInput.file_path || "unknown file"}`;
+    case DELETE_FILE_TOOL_NAME:
+      return `Delete file: ${toolInput.target_file || "unknown file"}`;
+    case WRITE_TOOL_NAME:
+      return `Write to file: ${toolInput.file_path || "unknown file"}`;
+    case EXIT_PLAN_MODE_TOOL_NAME:
+      return "Review and approve the plan";
+    case ASK_USER_QUESTION_TOOL_NAME:
+      return "Answer questions to clarify intent";
+    default:
+      return "Execute operation";
+  }
+};
+
+export interface ConfirmationDetailsProps {
+  toolName: string;
+  toolInput?: Record<string, unknown>;
+  isExpanded?: boolean;
+  onHeightMeasured?: (height: number) => void;
+}
+
+export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
+  toolName,
+  toolInput,
+  isExpanded = false,
+  onHeightMeasured,
+}) => {
+  const { stdout } = useStdout();
+  const [isStatic, setIsStatic] = useState(false);
+  const boxRef = useRef(null);
+
+  useLayoutEffect(() => {
+    if (boxRef.current) {
+      const { height } = measureElement(boxRef.current);
+      const terminalHeight = stdout?.rows || 24;
+      if (height > terminalHeight - 10) {
+        setIsStatic(true);
+      }
+      onHeightMeasured?.(height);
+    }
+  }, [stdout?.rows, onHeightMeasured]);
+
+  const content = (
+    <Box
+      ref={boxRef}
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="yellow"
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingTop={1}
+    >
+      <Text color="yellow" bold>
+        Tool: {toolName}
+      </Text>
+      <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
+
+      <DiffDisplay toolName={toolName} parameters={JSON.stringify(toolInput)} />
+
+      {toolName !== ASK_USER_QUESTION_TOOL_NAME &&
+        toolName === EXIT_PLAN_MODE_TOOL_NAME &&
+        !!toolInput?.plan_content && (
+          <PlanDisplay
+            plan={toolInput.plan_content as string}
+            isExpanded={isExpanded}
+          />
+        )}
+    </Box>
+  );
+
+  if (isStatic) {
+    return <Static items={[1]}>{() => content}</Static>;
+  }
+
+  return content;
+};
+
+ConfirmationDetails.displayName = "ConfirmationDetails";