wave-code 0.0.5 → 0.0.8

package/src/components/DiffDisplay.tsx

@@ -0,0 +1,300 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { transformToolBlockToChanges } from "../utils/toolParameterTransforms.js";
+import { diffLines, diffWords } from "diff";
+import type { ToolBlock } from "wave-agent-sdk";
+
+interface DiffDisplayProps {
+  toolBlock: ToolBlock;
+}
+
+export const DiffDisplay: React.FC<DiffDisplayProps> = ({ toolBlock }) => {
+  const showDiff =
+    ["running", "end"].includes(toolBlock.stage) &&
+    toolBlock.name &&
+    ["Write", "Edit", "MultiEdit"].includes(toolBlock.name);
+
+  // Diff detection and transformation using typed parameters
+  const changes = useMemo(() => {
+    if (!showDiff || !toolBlock.name || !toolBlock.parameters) return [];
+    try {
+      // Use local transformation with JSON parsing and type guards
+      return transformToolBlockToChanges(toolBlock.name, toolBlock.parameters);
+    } catch (error) {
+      console.warn("Error transforming tool block to changes:", error);
+      return [];
+    }
+  }, [toolBlock.name, toolBlock.parameters, showDiff]);
+
+  // Render word-level diff between two lines of text
+  const renderWordLevelDiff = (
+    oldLine: string,
+    newLine: string,
+    keyPrefix: string,
+  ) => {
+    try {
+      const changes = diffWords(oldLine, newLine);
+
+      const removedParts: React.ReactNode[] = [];
+      const addedParts: React.ReactNode[] = [];
+
+      changes.forEach((part, index) => {
+        if (part.removed) {
+          removedParts.push(
+            <Text
+              key={`removed-${keyPrefix}-${index}`}
+              color="black"
+              backgroundColor="red"
+            >
+              {part.value}
+            </Text>,
+          );
+        } else if (part.added) {
+          addedParts.push(
+            <Text
+              key={`added-${keyPrefix}-${index}`}
+              color="black"
+              backgroundColor="green"
+            >
+              {part.value}
+            </Text>,
+          );
+        } else {
+          // Unchanged parts
+          removedParts.push(
+            <Text key={`removed-unchanged-${keyPrefix}-${index}`} color="red">
+              {part.value}
+            </Text>,
+          );
+          addedParts.push(
+            <Text key={`added-unchanged-${keyPrefix}-${index}`} color="green">
+              {part.value}
+            </Text>,
+          );
+        }
+      });
+
+      return { removedParts, addedParts };
+    } catch (error) {
+      console.warn("Error rendering word-level diff:", error);
+      // Fallback to simple line display
+      return {
+        removedParts: [
+          <Text key={`fallback-removed-${keyPrefix}`} color="red">
+            {oldLine}
+          </Text>,
+        ],
+        addedParts: [
+          <Text key={`fallback-added-${keyPrefix}`} color="green">
+            {newLine}
+          </Text>,
+        ],
+      };
+    }
+  };
+
+  // Render expanded diff display using word-level diff for all changes
+  const renderExpandedDiff = () => {
+    try {
+      if (changes.length === 0) return null;
+
+      return (
+        <Box flexDirection="column">
+          {changes.map((change, changeIndex) => {
+            try {
+              // Get line-level diff to understand the structure
+              const lineDiffs = diffLines(
+                change.oldContent || "",
+                change.newContent || "",
+              );
+
+              const diffElements: React.ReactNode[] = [];
+
+              // Process line diffs and apply word-level diff to changed lines
+              lineDiffs.forEach((part, partIndex) => {
+                if (part.added) {
+                  const lines = part.value
+                    .split("\n")
+                    .filter((line) => line !== "");
+                  lines.forEach((line, lineIndex) => {
+                    diffElements.push(
+                      <Box
+                        key={`add-${changeIndex}-${partIndex}-${lineIndex}`}
+                        flexDirection="row"
+                      >
+                        <Text color="green">+</Text>
+                        <Text color="green">{line}</Text>
+                      </Box>,
+                    );
+                  });
+                } else if (part.removed) {
+                  const lines = part.value
+                    .split("\n")
+                    .filter((line) => line !== "");
+                  lines.forEach((line, lineIndex) => {
+                    diffElements.push(
+                      <Box
+                        key={`remove-${changeIndex}-${partIndex}-${lineIndex}`}
+                        flexDirection="row"
+                      >
+                        <Text color="red">-</Text>
+                        <Text color="red">{line}</Text>
+                      </Box>,
+                    );
+                  });
+                } else {
+                  // Context lines - show unchanged content
+                  const lines = part.value
+                    .split("\n")
+                    .filter((line) => line !== "");
+                  lines.forEach((line, lineIndex) => {
+                    diffElements.push(
+                      <Box
+                        key={`context-${changeIndex}-${partIndex}-${lineIndex}`}
+                        flexDirection="row"
+                      >
+                        <Text color="white"> </Text>
+                        <Text color="white">{line}</Text>
+                      </Box>,
+                    );
+                  });
+                }
+              });
+
+              // Now look for pairs of removed/added lines that can be word-diffed
+              const processedElements: React.ReactNode[] = [];
+              let i = 0;
+
+              while (i < diffElements.length) {
+                const current = diffElements[i];
+                const next =
+                  i + 1 < diffElements.length ? diffElements[i + 1] : null;
+
+                // Check if we have a removed line followed by an added line
+                const currentKey = React.isValidElement(current)
+                  ? current.key
+                  : "";
+                const nextKey = React.isValidElement(next) ? next.key : "";
+
+                const isCurrentRemoved =
+                  typeof currentKey === "string" &&
+                  currentKey.includes("remove-");
+                const isNextAdded =
+                  typeof nextKey === "string" && nextKey.includes("add-");
+
+                if (
+                  isCurrentRemoved &&
+                  isNextAdded &&
+                  React.isValidElement(current) &&
+                  React.isValidElement(next)
+                ) {
+                  // Extract the text content from the removed and added lines
+                  const removedText = extractTextFromElement(current);
+                  const addedText = extractTextFromElement(next);
+
+                  if (removedText && addedText) {
+                    // Apply word-level diff
+                    const { removedParts, addedParts } = renderWordLevelDiff(
+                      removedText,
+                      addedText,
+                      `word-${changeIndex}-${i}`,
+                    );
+
+                    processedElements.push(
+                      <Box
+                        key={`word-diff-removed-${changeIndex}-${i}`}
+                        flexDirection="row"
+                      >
+                        <Text color="red">-</Text>
+                        {removedParts}
+                      </Box>,
+                    );
+                    processedElements.push(
+                      <Box
+                        key={`word-diff-added-${changeIndex}-${i}`}
+                        flexDirection="row"
+                      >
+                        <Text color="green">+</Text>
+                        {addedParts}
+                      </Box>,
+                    );
+
+                    i += 2; // Skip the next element since we processed it
+                  } else {
+                    // Fallback to original elements
+                    processedElements.push(current);
+                    i += 1;
+                  }
+                } else {
+                  processedElements.push(current);
+                  i += 1;
+                }
+              }
+
+              return (
+                <Box key={changeIndex} flexDirection="column">
+                  {processedElements}
+                </Box>
+              );
+            } catch (error) {
+              console.warn(
+                `Error rendering diff for change ${changeIndex}:`,
+                error,
+              );
+              // Fallback to simple display
+              return (
+                <Box key={changeIndex} flexDirection="column">
+                  <Text color="red">-{change.oldContent || ""}</Text>
+                  <Text color="green">+{change.newContent || ""}</Text>
+                </Box>
+              );
+            }
+          })}
+        </Box>
+      );
+    } catch (error) {
+      console.warn("Error rendering expanded diff:", error);
+      return (
+        <Box>
+          <Text color="gray">Error rendering diff display</Text>
+        </Box>
+      );
+    }
+  };
+
+  // Helper function to extract text content from a React element
+  const extractTextFromElement = (element: React.ReactNode): string | null => {
+    if (!React.isValidElement(element)) return null;
+
+    // Navigate through Box -> Text structure
+    const children = (
+      element.props as unknown as { children?: React.ReactNode[] }
+    ).children;
+    if (Array.isArray(children) && children.length >= 2) {
+      const textElement = children[1]; // Second child should be the Text with content
+      if (
+        React.isValidElement(textElement) &&
+        (textElement.props as unknown as { children?: string }).children
+      ) {
+        return (textElement.props as unknown as { children: string }).children;
+      }
+    }
+    return null;
+  };
+
+  // Don't render anything if no diff should be shown
+  if (!showDiff) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
+        <Text color="cyan" bold>
+          Diff:
+        </Text>
+        {renderExpandedDiff()}
+      </Box>
+    </Box>
+  );
+};

package/src/components/FileSelector.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
+import type { FileItem } from "wave-agent-sdk";
 
-export interface FileItem {
-  path: string;
-  type: "file" | "directory";
-}
+export { type FileItem } from "wave-agent-sdk";
 
 export interface FileSelectorProps {
   files: FileItem[];
@@ -22,7 +20,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 +124,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,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Box, Text } from "ink";
 import { useInput } from "ink";
 import { FileSelector } from "./FileSelector.js";
@@ -8,6 +8,7 @@ import { MemoryTypeSelector } from "./MemoryTypeSelector.js";
 import { BashShellManager } from "./BashShellManager.js";
 import { McpManager } from "./McpManager.js";
 import { useInputManager } from "../hooks/useInputManager.js";
+import { useChat } from "../contexts/useChat.js";
 
 import type { McpServerStatus, SlashCommand } from "wave-agent-sdk";
 
@@ -53,19 +54,18 @@ export const InputBox: React.FC<InputBoxProps> = ({
   slashCommands = [],
   hasSlashCommand = () => false,
 }) => {
-  // Get current working directory
-  const currentWorkdir = workdir || process.cwd();
+  // Get current working directory - memoized to avoid repeated process.cwd() calls
+  const currentWorkdir = useMemo(() => workdir || process.cwd(), [workdir]);
 
-  // Simple history navigation reset function
-  const resetHistoryNavigation = useCallback(() => {
-    // This will be handled by InputManager through callbacks
-  }, []);
+  const {
+    permissionMode: chatPermissionMode,
+    setPermissionMode: setChatPermissionMode,
+  } = useChat();
 
   // Input manager with all input state and functionality (including images)
   const {
     inputText,
     cursorPosition,
-    clearInput,
     // Image management
     attachedImages,
     clearImages,
@@ -73,44 +73,53 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showFileSelector,
     filteredFiles,
     fileSearchQuery: searchQuery,
-    handleFileSelect: handleFileSelectorSelect,
+    handleFileSelect,
     handleCancelFileSelect,
     // Command selector
     showCommandSelector,
     commandSearchQuery,
-    handleCommandSelect: handleCommandSelectorSelect,
-    handleCommandInsert: handleCommandSelectorInsert,
+    handleCommandSelect,
+    handleCommandInsert,
     handleCancelCommandSelect,
     // Bash history selector
     showBashHistorySelector,
     bashHistorySearchQuery,
-    handleBashHistorySelect: handleBashHistorySelectorSelect,
-    handleBashHistoryExecute,
+    handleBashHistorySelect,
     handleCancelBashHistorySelect,
     // Memory type selector
     showMemoryTypeSelector,
     memoryMessage,
-    handleMemoryTypeSelect: handleMemoryTypeSelectorSelect,
+    handleMemoryTypeSelect,
     handleCancelMemoryTypeSelect,
     // Bash/MCP Manager
     showBashManager,
     showMcpManager,
     setShowBashManager,
     setShowMcpManager,
+    // Permission mode
+    permissionMode,
+    setPermissionMode,
     // Input history
     setUserInputHistory,
+    // Complex handlers combining multiple operations
+    handleBashHistoryExecuteAndSend,
     // Main handler
     handleInput,
+    // Manager ready state
+    isManagerReady,
   } = useInputManager({
-    onShowBashManager: () => setShowBashManager(true),
-    onShowMcpManager: () => setShowMcpManager(true),
     onSendMessage: sendMessage,
     onHasSlashCommand: hasSlashCommand,
     onSaveMemory: saveMemory,
     onAbortMessage: abortMessage,
-    onResetHistoryNavigation: resetHistoryNavigation,
+    onPermissionModeChange: setChatPermissionMode,
   });
 
+  // Sync permission mode from useChat to InputManager
+  useEffect(() => {
+    setPermissionMode(chatPermissionMode);
+  }, [chatPermissionMode, setPermissionMode]);
+
   // Set user input history when it changes
   useEffect(() => {
     setUserInputHistory(userInputHistory);
@@ -128,65 +137,14 @@ export const InputBox: React.FC<InputBoxProps> = ({
     );
   });
 
-  // Handler functions for keyboard events
-  const handleFileSelect = useCallback(
-    (filePath: string) => {
-      handleFileSelectorSelect(filePath);
-    },
-    [handleFileSelectorSelect],
-  );
+  // These methods are already memoized in useInputManager, no need to wrap again
 
-  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],
-  );
+  // 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) => {
-      handleCommandSelectorInsert(command);
-    },
-    [handleCommandSelectorInsert],
-  );
+  // 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;
@@ -198,8 +156,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}
@@ -224,7 +187,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
           searchQuery={bashHistorySearchQuery}
           workdir={currentWorkdir}
           onSelect={handleBashHistorySelect}
-          onExecute={keyboardHandleBashHistoryExecute}
+          onExecute={handleBashHistoryExecuteAndSend}
           onCancel={handleCancelBashHistorySelect}
         />
       )}
@@ -250,20 +213,28 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
       {showBashManager || showMcpManager || (
-        <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          <Text color={isPlaceholder ? "gray" : "white"}>
-            {shouldShowCursor ? (
-              <>
-                {beforeCursor}
-                <Text backgroundColor="white" color="black">
-                  {atCursor}
-                </Text>
-                {afterCursor}
-              </>
-            ) : (
-              displayText
-            )}
-          </Text>
+        <Box flexDirection="column">
+          <Box borderStyle="single" borderColor="gray" paddingX={1}>
+            <Text color={isPlaceholder ? "gray" : "white"}>
+              {shouldShowCursor ? (
+                <>
+                  {beforeCursor}
+                  <Text backgroundColor="white" color="black">
+                    {atCursor}
+                  </Text>
+                  {afterCursor}
+                </>
+              ) : (
+                displayText
+              )}
+            </Text>
+          </Box>
+          <Box paddingX={1}>
+            <Text color="gray">
+              Mode: <Text color="cyan">{permissionMode}</Text> (Shift+Tab to
+              cycle)
+            </Text>
+          </Box>
         </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/MemoryDisplay.tsx

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