wave-code 0.0.3 → 0.0.5

package/src/components/InputBox.tsx

@@ -1,19 +1,14 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { Box, Text } from "ink";
+import { useInput } from "ink";
 import { FileSelector } from "./FileSelector.js";
 import { CommandSelector } from "./CommandSelector.js";
 import { BashHistorySelector } from "./BashHistorySelector.js";
 import { MemoryTypeSelector } from "./MemoryTypeSelector.js";
 import { BashShellManager } from "./BashShellManager.js";
 import { McpManager } from "./McpManager.js";
-import { useInputState } from "../hooks/useInputState.js";
-import { useFileSelector } from "../hooks/useFileSelector.js";
-import { useCommandSelector } from "../hooks/useCommandSelector.js";
-import { useBashHistorySelector } from "../hooks/useBashHistorySelector.js";
-import { useMemoryTypeSelector } from "../hooks/useMemoryTypeSelector.js";
-import { useInputHistory } from "../hooks/useInputHistory.js";
-import { useInputKeyboardHandler } from "../hooks/useInputKeyboardHandler.js";
-import { useImageManager } from "../hooks/useImageManager.js";
+import { useInputManager } from "../hooks/useInputManager.js";
+
 import type { McpServerStatus, SlashCommand } from "wave-agent-sdk";
 
 export const INPUT_PLACEHOLDER_TEXT =
@@ -60,169 +55,137 @@ export const InputBox: React.FC<InputBoxProps> = ({
 }) => {
   // Get current working directory
   const currentWorkdir = workdir || process.cwd();
-  // Bash shell manager state
-  const [showBashManager, setShowBashManager] = useState(false);
-  // MCP manager state
-  const [showMcpManager, setShowMcpManager] = useState(false);
-  // Basic input state
+
+  // Simple history navigation reset function
+  const resetHistoryNavigation = useCallback(() => {
+    // This will be handled by InputManager through callbacks
+  }, []);
+
+  // Input manager with all input state and functionality (including images)
   const {
     inputText,
-    setInputText,
     cursorPosition,
-    setCursorPosition,
-    insertTextAtCursor,
-    deleteCharAtCursor,
     clearInput,
-    moveCursorLeft,
-    moveCursorRight,
-    moveCursorToStart,
-    moveCursorToEnd,
-  } = useInputState();
-
-  // File selector functionality
-  const {
+    // Image management
+    attachedImages,
+    clearImages,
+    // File selector
     showFileSelector,
     filteredFiles,
-    searchQuery,
-    activateFileSelector,
+    fileSearchQuery: searchQuery,
     handleFileSelect: handleFileSelectorSelect,
     handleCancelFileSelect,
-    updateSearchQuery,
-    checkForAtDeletion,
-    atPosition,
-  } = useFileSelector();
-
-  // Command selector functionality
-  const {
+    // Command selector
     showCommandSelector,
     commandSearchQuery,
-    activateCommandSelector,
     handleCommandSelect: handleCommandSelectorSelect,
     handleCommandInsert: handleCommandSelectorInsert,
     handleCancelCommandSelect,
-    updateCommandSearchQuery,
-    checkForSlashDeletion,
-    slashPosition,
-  } = useCommandSelector({
-    onShowBashManager: () => setShowBashManager(true),
-    onShowMcpManager: () => setShowMcpManager(true),
-    sendMessage: async (content: string) => {
-      await sendMessage(content);
-    },
-    hasSlashCommand,
-  });
-
-  // Bash history selector functionality
-  const {
+    // Bash history selector
     showBashHistorySelector,
     bashHistorySearchQuery,
-    activateBashHistorySelector,
     handleBashHistorySelect: handleBashHistorySelectorSelect,
     handleBashHistoryExecute,
     handleCancelBashHistorySelect,
-    updateBashHistorySearchQuery,
-    checkForExclamationDeletion,
-    exclamationPosition,
-  } = useBashHistorySelector();
-
-  // Memory type selector functionality
-  const {
+    // Memory type selector
     showMemoryTypeSelector,
     memoryMessage,
-    activateMemoryTypeSelector,
     handleMemoryTypeSelect: handleMemoryTypeSelectorSelect,
     handleCancelMemoryTypeSelect,
-  } = useMemoryTypeSelector();
-
-  // Input history functionality
-  const { resetHistoryNavigation, navigateHistory } = useInputHistory({
-    userInputHistory,
+    // Bash/MCP Manager
+    showBashManager,
+    showMcpManager,
+    setShowBashManager,
+    setShowMcpManager,
+    // Input history
+    setUserInputHistory,
+    // Main handler
+    handleInput,
+  } = useInputManager({
+    onShowBashManager: () => setShowBashManager(true),
+    onShowMcpManager: () => setShowMcpManager(true),
+    onSendMessage: sendMessage,
+    onHasSlashCommand: hasSlashCommand,
+    onSaveMemory: saveMemory,
+    onAbortMessage: abortMessage,
+    onResetHistoryNavigation: resetHistoryNavigation,
   });
 
-  // Image management functionality (includes clipboard paste)
-  const { attachedImages, clearImages, handlePasteImage } =
-    useImageManager(insertTextAtCursor);
+  // Set user input history when it changes
+  useEffect(() => {
+    setUserInputHistory(userInputHistory);
+  }, [userInputHistory, setUserInputHistory]);
 
-  // Keyboard handling
-  const {
-    handleFileSelect,
-    handleCommandSelect,
-    handleBashHistorySelect,
-    handleBashHistoryExecute: keyboardHandleBashHistoryExecute,
-    handleMemoryTypeSelect,
-  } = useInputKeyboardHandler({
-    inputText,
-    setInputText,
-    cursorPosition,
-    setCursorPosition,
-    moveCursorLeft,
-    moveCursorRight,
-    moveCursorToStart,
-    moveCursorToEnd,
-    deleteCharAtCursor,
-    insertTextAtCursor,
-    clearInput,
-    resetHistoryNavigation,
-    navigateHistory,
-    handlePasteImage,
-    attachedImages,
-    clearImages,
-    showFileSelector,
-    activateFileSelector,
-    handleFileSelect: handleFileSelectorSelect,
-    handleCancelFileSelect,
-    updateSearchQuery,
-    checkForAtDeletion,
-    atPosition,
-    showCommandSelector,
-    activateCommandSelector,
-    handleCommandSelect: handleCommandSelectorSelect,
-    handleCommandInsert: handleCommandSelectorInsert,
-    handleCancelCommandSelect,
-    updateCommandSearchQuery,
-    checkForSlashDeletion,
-    slashPosition,
-    showBashHistorySelector,
-    activateBashHistorySelector,
-    handleBashHistorySelect: handleBashHistorySelectorSelect,
-    handleBashHistoryExecute,
-    handleCancelBashHistorySelect,
-    updateBashHistorySearchQuery,
-    checkForExclamationDeletion,
-    exclamationPosition,
-    showMemoryTypeSelector,
-    activateMemoryTypeSelector,
-    handleMemoryTypeSelect: handleMemoryTypeSelectorSelect,
-    showBashManager,
-    showMcpManager,
-    isCommandRunning,
-    isLoading,
-    sendMessage,
-    abortMessage,
-    saveMemory,
+  // Use the InputManager's unified input handler
+  useInput(async (input, key) => {
+    await handleInput(
+      input,
+      key,
+      attachedImages,
+      isLoading,
+      isCommandRunning,
+      clearImages,
+    );
   });
 
+  // Handler functions for keyboard events
+  const handleFileSelect = useCallback(
+    (filePath: string) => {
+      handleFileSelectorSelect(filePath);
+    },
+    [handleFileSelectorSelect],
+  );
+
+  const handleCommandSelect = useCallback(
+    (command: string) => {
+      handleCommandSelectorSelect(command);
+    },
+    [handleCommandSelectorSelect],
+  );
+
+  const handleBashHistorySelect = useCallback(
+    (command: string) => {
+      handleBashHistorySelectorSelect(command);
+    },
+    [handleBashHistorySelectorSelect],
+  );
+
+  const keyboardHandleBashHistoryExecute = useCallback(
+    (command: string) => {
+      const commandToExecute = handleBashHistoryExecute(command);
+      // Clear input box and execute command, ensure command starts with !
+      const bashCommand = commandToExecute.startsWith("!")
+        ? commandToExecute
+        : `!${commandToExecute}`;
+      clearInput();
+      sendMessage(bashCommand);
+    },
+    [handleBashHistoryExecute, clearInput, sendMessage],
+  );
+
+  const handleMemoryTypeSelect = useCallback(
+    async (type: "project" | "user") => {
+      const currentMessage = inputText.trim();
+      if (currentMessage.startsWith("#")) {
+        await saveMemory(currentMessage, type);
+      }
+      // Call the handler function to close the selector
+      handleMemoryTypeSelectorSelect(type);
+      // Clear input box
+      clearInput();
+    },
+    [inputText, saveMemory, handleMemoryTypeSelectorSelect, clearInput],
+  );
+
   const isPlaceholder = !inputText;
   const placeholderText = INPUT_PLACEHOLDER_TEXT;
 
   // Create adapter function for CommandSelector
   const handleCommandInsert = useCallback(
     (command: string) => {
-      const result = handleCommandSelectorInsert(
-        command,
-        inputText,
-        cursorPosition,
-      );
-      setInputText(result.newInput);
-      setCursorPosition(result.newCursorPosition);
+      handleCommandSelectorInsert(command);
     },
-    [
-      handleCommandSelectorInsert,
-      inputText,
-      cursorPosition,
-      setInputText,
-      setCursorPosition,
-    ],
+    [handleCommandSelectorInsert],
   );
 
   // Split text into three parts: before cursor, cursor position, after cursor
@@ -288,21 +251,19 @@ export const InputBox: React.FC<InputBoxProps> = ({
       )}
       {showBashManager || showMcpManager || (
         <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          <Box width="100%" flexDirection="row" justifyContent="space-between">
-            <Text color={isPlaceholder ? "gray" : "white"}>
-              {shouldShowCursor ? (
-                <>
-                  {beforeCursor}
-                  <Text backgroundColor="white" color="black">
-                    {atCursor}
-                  </Text>
-                  {afterCursor}
-                </>
-              ) : (
-                displayText
-              )}
-            </Text>
-          </Box>
+          <Text color={isPlaceholder ? "gray" : "white"}>
+            {shouldShowCursor ? (
+              <>
+                {beforeCursor}
+                <Text backgroundColor="white" color="black">
+                  {atCursor}
+                </Text>
+                {afterCursor}
+              </>
+            ) : (
+              displayText
+            )}
+          </Text>
         </Box>
       )}
     </Box>

package/src/components/MemoryDisplay.tsx

@@ -27,7 +27,7 @@ export const MemoryDisplay: React.FC<MemoryDisplayProps> = ({ block }) => {
     if (memoryType === "user") {
       return `Memory saved to ${storagePath || "user-memory.md"}`;
     } else {
-      return `Memory saved to ${storagePath || "WAVE.md"}`;
+      return `Memory saved to ${storagePath || "AGENTS.md"}`;
     }
   };
 

package/src/components/MemoryTypeSelector.tsx

@@ -18,7 +18,7 @@ export const MemoryTypeSelector: React.FC<MemoryTypeSelectorProps> = ({
     {
       type: "project" as const,
       label: "Project Memory",
-      description: "Save to current project (WAVE.md)",
+      description: "Save to current project (AGENTS.md)",
     },
     {
       type: "user" as const,

package/src/components/MessageList.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { Box, Text } from "ink";
 import type { Message } from "wave-agent-sdk";
+import { MessageSource } from "wave-agent-sdk";
 import { DiffViewer } from "./DiffViewer.js";
 import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
 import { ToolResultDisplay } from "./ToolResultDisplay.js";
@@ -42,7 +43,19 @@ const renderMessageItem = (
           <Box key={blockIndex}>
             {block.type === "text" && block.content.trim() && (
               <Box>
-                <Text>{block.content}</Text>
+                <Text>
+                  {block.customCommandContent && (
+                    <Text color="cyan" bold>
+                      ⚡{" "}
+                    </Text>
+                  )}
+                  {block.source === MessageSource.HOOK && (
+                    <Text color="magenta" bold>
+                      🔗{" "}
+                    </Text>
+                  )}
+                  {block.content}
+                </Text>
               </Box>
             )}
 
@@ -84,15 +97,6 @@ const renderMessageItem = (
               <CompressDisplay block={block} isExpanded={isExpanded} />
             )}
 
-            {block.type === "custom_command" && (
-              <Box>
-                <Text color="cyan" bold>
-                  ⚡
-                </Text>
-                <Text>{block.originalInput || `/${block.commandName}`}</Text>
-              </Box>
-            )}
-
             {block.type === "subagent" && (
               <SubagentBlock block={block} isExpanded={isExpanded} />
             )}

package/src/components/SubagentBlock.tsx

@@ -4,7 +4,7 @@ import type {
   SubagentBlock as SubagentBlockType,
   Message,
   MessageBlock,
-} from "wave-agent-sdk/src/types.js";
+} from "wave-agent-sdk";
 import { ToolResultDisplay } from "./ToolResultDisplay.js";
 
 // Component to render individual message blocks
@@ -17,9 +17,20 @@ const MessageBlockRenderer: React.FC<MessageBlockRendererProps> = ({
   block,
   isExpanded,
 }) => {
+  const truncateText = (text: string, maxLines: number): string => {
+    const lines = text.split("\n");
+    if (lines.length <= maxLines) {
+      return text;
+    }
+    return lines.slice(0, maxLines).join("\n") + "\n...";
+  };
+
   switch (block.type) {
-    case "text":
-      return <Text>{block.content}</Text>;
+    case "text": {
+      const maxLines = isExpanded ? 50 : 10;
+      const truncatedContent = truncateText(block.content, maxLines);
+      return <Text>{truncatedContent}</Text>;
+    }
 
     case "error":
       return <Text color="red">❌ Error: {block.content}</Text>;

package/src/components/ToolResultDisplay.tsx

@@ -78,7 +78,7 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
       </Box>
 
       {/* Display shortResult in collapsed state */}
-      {!isExpanded && shortResult && (
+      {!isExpanded && shortResult && !error && (
         <Box
           paddingLeft={2}
           borderLeft

package/src/contexts/useChat.tsx

@@ -13,9 +13,11 @@ import type {
   McpServerStatus,
   BackgroundShell,
   SlashCommand,
+  Usage,
 } from "wave-agent-sdk";
 import { Agent, AgentCallbacks } from "wave-agent-sdk";
 import { logger } from "../utils/logger.js";
+import { displayUsageSummary } from "../utils/usageSummary.js";
 
 // Main Chat Context
 export interface ChatContextType {
@@ -49,6 +51,8 @@ export interface ChatContextType {
   // Slash Command functionality
   slashCommands: SlashCommand[];
   hasSlashCommand: (commandId: string) => boolean;
+  // Usage tracking
+  usages: Usage[];
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -91,6 +95,9 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
   // Command state
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
 
+  // Usage tracking state
+  const [usages, setUsages] = useState<Usage[]>([]);
+
   const agentRef = useRef<Agent | null>(null);
 
   // Listen for Ctrl+O hotkey to toggle collapse/expand state
@@ -125,6 +132,9 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
         onShellsChange: (shells) => {
           setBackgroundShells([...shells]);
         },
+        onUsagesChange: (newUsages) => {
+          setUsages([...newUsages]);
+        },
       };
 
       try {
@@ -153,6 +163,9 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
         // Get initial commands
         const agentSlashCommands = agent.getSlashCommands?.() || [];
         setSlashCommands(agentSlashCommands);
+
+        // Get initial usages
+        setUsages(agent.usages);
       } catch (error) {
         console.error("Failed to initialize AI manager:", error);
       }
@@ -165,6 +178,15 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
   useEffect(() => {
     return () => {
       if (agentRef.current) {
+        try {
+          // Display usage summary before cleanup
+          const usages = agentRef.current.usages;
+          const sessionFilePath = agentRef.current.sessionFilePath;
+          displayUsageSummary(usages, sessionFilePath);
+        } catch {
+          // Silently ignore usage summary errors during cleanup
+        }
+
         agentRef.current.destroy();
       }
     };
@@ -292,6 +314,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
     killBackgroundShell,
     slashCommands,
     hasSlashCommand,
+    usages,
   };
 
   return (