wave-code 0.0.4 → 0.0.6

package/src/components/DiffViewer.tsx

@@ -5,7 +5,7 @@ import type { DiffBlock } from "wave-agent-sdk";
 
 interface DiffViewerProps {
   block: DiffBlock;
-  isExpanded?: boolean;
+  isStatic?: boolean;
 }
 
 // Render word-level diff
@@ -48,7 +48,7 @@ const renderWordLevelDiff = (removedLine: string, addedLine: string) => {
 
 export const DiffViewer: React.FC<DiffViewerProps> = ({
   block,
-  isExpanded = false,
+  isStatic = true,
 }) => {
   const { diffResult } = block;
 
@@ -246,21 +246,22 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     // Handle remaining deleted lines at the end
     flushPendingLines();
 
-    // Only limit displayed lines in collapsed state
-    if (!isExpanded) {
-      const MAX_DISPLAY_LINES = 50;
-      if (lines.length > MAX_DISPLAY_LINES) {
-        const truncatedLines = lines.slice(0, MAX_DISPLAY_LINES);
-        truncatedLines.push({
-          content: `... (${lines.length - MAX_DISPLAY_LINES} more lines truncated, press Ctrl+O to expand)`,
-          type: "separator",
-        });
-        return truncatedLines;
-      }
+    return lines;
+  }, [diffResult]);
+
+  // Truncate to last 10 lines for non-static items
+  const displayLines = useMemo(() => {
+    if (isStatic) {
+      return diffLines;
     }
 
-    return lines;
-  }, [diffResult, isExpanded]);
+    const MAX_LINES = 10;
+    if (diffLines.length <= MAX_LINES) {
+      return diffLines;
+    }
+
+    return diffLines.slice(-MAX_LINES);
+  }, [diffLines, isStatic]);
 
   if (!diffResult || diffResult.length === 0) {
     return (
@@ -270,11 +271,12 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     );
   }
 
+  // Show traditional diff view
   return (
     <Box flexDirection="column">
       <Box flexDirection="column">
         <Box flexDirection="column">
-          {diffLines.map((line, index) => {
+          {displayLines.map((line, index) => {
             // If has word-level diff, render special effects
             if (line.wordDiff) {
               const prefix = line.type === "removed" ? "- " : "+ ";

package/src/components/FileSelector.tsx

@@ -22,7 +22,7 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   useInput((input, key) => {
-    if (key.return) {
+    if (key.return || key.tab) {
       if (files.length > 0 && selectedIndex < files.length) {
         onSelect(files[selectedIndex].path);
       }
@@ -126,7 +126,7 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
 
       <Box marginTop={1}>
         <Text dimColor>
-          Use ↑↓ to navigate, Enter to select, Escape to cancel
+          Use ↑↓ to navigate, Enter/Tab to select, Escape to cancel
         </Text>
         <Text dimColor>
           File {selectedIndex + 1} of {files.length}

package/src/components/InputBox.tsx

@@ -1,19 +1,14 @@
-import React, { useState, useCallback } from "react";
+import React, { useEffect, useMemo } 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 =
@@ -58,172 +53,83 @@ export const InputBox: React.FC<InputBoxProps> = ({
   slashCommands = [],
   hasSlashCommand = () => false,
 }) => {
-  // 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
+  // Get current working directory - memoized to avoid repeated process.cwd() calls
+  const currentWorkdir = useMemo(() => workdir || process.cwd(), [workdir]);
+
+  // 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,
-    handleFileSelect: handleFileSelectorSelect,
+    fileSearchQuery: searchQuery,
+    handleFileSelect,
     handleCancelFileSelect,
-    updateSearchQuery,
-    checkForAtDeletion,
-    atPosition,
-  } = useFileSelector();
-
-  // Command selector functionality
-  const {
+    // Command selector
     showCommandSelector,
     commandSearchQuery,
-    activateCommandSelector,
-    handleCommandSelect: handleCommandSelectorSelect,
-    handleCommandInsert: handleCommandSelectorInsert,
+    handleCommandSelect,
+    handleCommandInsert,
     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,
+    handleBashHistorySelect,
     handleCancelBashHistorySelect,
-    updateBashHistorySearchQuery,
-    checkForExclamationDeletion,
-    exclamationPosition,
-  } = useBashHistorySelector();
-
-  // Memory type selector functionality
-  const {
+    // Memory type selector
     showMemoryTypeSelector,
     memoryMessage,
-    activateMemoryTypeSelector,
-    handleMemoryTypeSelect: handleMemoryTypeSelectorSelect,
+    handleMemoryTypeSelect,
     handleCancelMemoryTypeSelect,
-  } = useMemoryTypeSelector();
+    // Bash/MCP Manager
+    showBashManager,
+    showMcpManager,
+    setShowBashManager,
+    setShowMcpManager,
+    // Input history
+    setUserInputHistory,
+    // Complex handlers combining multiple operations
+    handleBashHistoryExecuteAndSend,
+    // Main handler
+    handleInput,
+    // Manager ready state
+    isManagerReady,
+  } = useInputManager({
+    onSendMessage: sendMessage,
+    onHasSlashCommand: hasSlashCommand,
+    onSaveMemory: saveMemory,
+    onAbortMessage: abortMessage,
+  });
 
-  // Input history functionality
-  const { resetHistoryNavigation, navigateHistory } = useInputHistory({
-    userInputHistory,
+  // Set user input history when it changes
+  useEffect(() => {
+    setUserInputHistory(userInputHistory);
+  }, [userInputHistory, setUserInputHistory]);
+
+  // Use the InputManager's unified input handler
+  useInput(async (input, key) => {
+    await handleInput(
+      input,
+      key,
+      attachedImages,
+      isLoading,
+      isCommandRunning,
+      clearImages,
+    );
   });
 
-  // Image management functionality (includes clipboard paste)
-  const { attachedImages, clearImages, handlePasteImage } =
-    useImageManager(insertTextAtCursor);
+  // These methods are already memoized in useInputManager, no need to wrap again
 
-  // 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,
-  });
+  // These methods are already memoized in useInputManager and combine multiple operations
 
   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,
-      inputText,
-      cursorPosition,
-      setInputText,
-      setCursorPosition,
-    ],
-  );
+  // handleCommandSelectorInsert is already memoized in useInputManager, no need to wrap again
 
   // Split text into three parts: before cursor, cursor position, after cursor
   const displayText = isPlaceholder ? placeholderText : inputText;
@@ -235,8 +141,13 @@ export const InputBox: React.FC<InputBoxProps> = ({
   // Always show cursor, allow user to continue input during loading
   const shouldShowCursor = true;
 
+  // Only show the Box after InputManager is created on first mount
+  if (!isManagerReady) {
+    return null;
+  }
+
   return (
-    <Box flexDirection="column" width={"100%"}>
+    <Box flexDirection="column">
       {showFileSelector && (
         <FileSelector
           files={filteredFiles}
@@ -261,7 +172,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
           searchQuery={bashHistorySearchQuery}
           workdir={currentWorkdir}
           onSelect={handleBashHistorySelect}
-          onExecute={keyboardHandleBashHistoryExecute}
+          onExecute={handleBashHistoryExecuteAndSend}
           onCancel={handleCancelBashHistorySelect}
         />
       )}
@@ -288,21 +199,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/Markdown.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+import { Text } from "ink";
+import { marked } from "marked";
+import TerminalRenderer from "marked-terminal";
+
+export interface MarkdownProps {
+  children: string;
+}
+
+// Markdown component using marked-terminal with proper unescape option
+export const Markdown = React.memo(({ children }: MarkdownProps) => {
+  const result = useMemo(() => {
+    // Configure marked with TerminalRenderer using default options
+    marked.setOptions({
+      renderer: new TerminalRenderer({
+        // Use official unescape option to handle HTML entities
+        unescape: true,
+      }),
+    });
+
+    const output = marked(children);
+    return typeof output === "string" ? output.trim() : "";
+  }, [children]);
+
+  return <Text>{result}</Text>;
+});
+
+// Add display name for debugging
+Markdown.displayName = "Markdown";

package/src/components/MessageItem.tsx

@@ -0,0 +1,104 @@
+import React 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";
+import { MemoryDisplay } from "./MemoryDisplay.js";
+import { CompressDisplay } from "./CompressDisplay.js";
+import { SubagentBlock } from "./SubagentBlock.js";
+import { Markdown } from "./Markdown.js";
+
+export interface MessageItemProps {
+  message: Message;
+  isExpanded: boolean;
+  shouldShowHeader: boolean;
+  isStatic?: boolean;
+}
+
+export const MessageItem = ({
+  message,
+  isExpanded,
+  shouldShowHeader,
+  isStatic = true,
+}: MessageItemProps) => {
+  if (message.blocks.length === 0) return null;
+  return (
+    <Box flexDirection="column" gap={1} marginTop={1}>
+      {shouldShowHeader && (
+        <Box>
+          <Text color={message.role === "user" ? "cyan" : "green"} bold>
+            {message.role === "user" ? "👤 You" : "🤖 Assistant"}
+          </Text>
+        </Box>
+      )}
+
+      <Box flexDirection="column" gap={1}>
+        {message.blocks.map((block, blockIndex) => (
+          <Box key={blockIndex}>
+            {block.type === "text" && block.content.trim() && (
+              <Box>
+                {block.customCommandContent && (
+                  <Text color="cyan" bold>
+                    ⚡{" "}
+                  </Text>
+                )}
+                {block.source === MessageSource.HOOK && (
+                  <Text color="magenta" bold>
+                    🔗{" "}
+                  </Text>
+                )}
+                {isStatic ? (
+                  <Markdown>{block.content}</Markdown>
+                ) : (
+                  <Text>{block.content.split("\n").slice(-10).join("\n")}</Text>
+                )}
+              </Box>
+            )}
+
+            {block.type === "error" && (
+              <Box>
+                <Text color="red">❌ Error: {block.content}</Text>
+              </Box>
+            )}
+
+            {block.type === "diff" && (
+              <DiffViewer block={block} isStatic={isStatic} />
+            )}
+
+            {block.type === "command_output" && (
+              <CommandOutputDisplay block={block} isExpanded={isExpanded} />
+            )}
+
+            {block.type === "tool" && (
+              <ToolResultDisplay block={block} isExpanded={isExpanded} />
+            )}
+
+            {block.type === "image" && (
+              <Box>
+                <Text color="magenta" bold>
+                  📷 Image
+                </Text>
+                {block.imageUrls && block.imageUrls.length > 0 && (
+                  <Text color="gray" dimColor>
+                    {" "}
+                    ({block.imageUrls.length})
+                  </Text>
+                )}
+              </Box>
+            )}
+
+            {block.type === "memory" && <MemoryDisplay block={block} />}
+
+            {block.type === "compress" && (
+              <CompressDisplay block={block} isExpanded={isExpanded} />
+            )}
+
+            {block.type === "subagent" && <SubagentBlock block={block} />}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};