wave-code 0.4.0 → 0.6.1

package/src/components/DiffDisplay.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Box, Text, useStdout } from "ink";
+import { Box, Text } from "ink";
 import {
   WRITE_TOOL_NAME,
   EDIT_TOOL_NAME,
@@ -11,19 +11,12 @@ import { diffLines, diffWords } from "diff";
 interface DiffDisplayProps {
   toolName?: string;
   parameters?: string;
-  isExpanded?: boolean;
 }
 
 export const DiffDisplay: React.FC<DiffDisplayProps> = ({
   toolName,
   parameters,
-  isExpanded = false,
 }) => {
-  const { stdout } = useStdout();
-  const maxHeight = useMemo(() => {
-    return Math.max(5, (stdout?.rows || 24) - 20);
-  }, [stdout?.rows]);
-
   const showDiff =
     toolName &&
     [WRITE_TOOL_NAME, EDIT_TOOL_NAME, MULTI_EDIT_TOOL_NAME].includes(toolName);
@@ -107,7 +100,7 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     }
   };
 
-  // Render expanded diff display using word-level diff for all changes
+  // Render expanded diff display
   const renderExpandedDiff = () => {
     try {
       if (changes.length === 0) return null;
@@ -122,9 +115,8 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
             change.newContent || "",
           );
 
+          // Process line diffs
           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
@@ -161,7 +153,60 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
               const lines = part.value
                 .split("\n")
                 .filter((line) => line !== "");
-              lines.forEach((line, lineIndex) => {
+
+              const isFirstBlock = partIndex === 0;
+              const isLastBlock = partIndex === lineDiffs.length - 1;
+
+              let linesToDisplay = lines;
+              let showEllipsisTop = false;
+              let showEllipsisBottom = false;
+
+              if (isFirstBlock && !isLastBlock) {
+                // First block: keep last 3
+                if (lines.length > 3) {
+                  linesToDisplay = lines.slice(-3);
+                  showEllipsisTop = true;
+                }
+              } else if (isLastBlock && !isFirstBlock) {
+                // Last block: keep first 3
+                if (lines.length > 3) {
+                  linesToDisplay = lines.slice(0, 3);
+                  showEllipsisBottom = true;
+                }
+              } else if (!isFirstBlock && !isLastBlock) {
+                // Middle block: keep first 3 and last 3
+                if (lines.length > 6) {
+                  linesToDisplay = [...lines.slice(0, 3), ...lines.slice(-3)];
+                  showEllipsisTop = false; // We'll put ellipsis in the middle
+                }
+              } else if (isFirstBlock && isLastBlock) {
+                // Only one block (no changes?) - keep all or apply a general limit
+                // For now, let's keep all if it's the only block
+              }
+
+              if (showEllipsisTop) {
+                diffElements.push(
+                  <Box key={`ellipsis-top-${changeIndex}-${partIndex}`}>
+                    <Text color="gray"> ...</Text>
+                  </Box>,
+                );
+              }
+
+              linesToDisplay.forEach((line, lineIndex) => {
+                // If it's a middle block and we are at the split point
+                if (
+                  !isFirstBlock &&
+                  !isLastBlock &&
+                  lines.length > 6 &&
+                  lineIndex === 3
+                ) {
+                  diffElements.push(
+                    <Box key={`ellipsis-mid-${changeIndex}-${partIndex}`}>
+                      <Text color="gray"> ...</Text>
+                    </Box>,
+                  );
+                }
+
                 diffElements.push(
                   <Box
                     key={`context-${changeIndex}-${partIndex}-${lineIndex}`}
@@ -172,73 +217,57 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
                   </Box>,
                 );
               });
+
+              if (showEllipsisBottom) {
+                diffElements.push(
+                  <Box key={`ellipsis-bottom-${changeIndex}-${partIndex}`}>
+                    <Text color="gray"> ...</Text>
+                  </Box>,
+                );
+              }
             }
           });
 
-          // Now look for pairs of removed/added lines that can be word-diffed
-          let i = 0;
-
-          while (i < diffElements.length) {
-            const current = diffElements[i];
-            const next =
-              i + 1 < diffElements.length ? diffElements[i + 1] : null;
+          // If it's a single line change (one removed, one added), use word-level diff
+          if (
+            diffElements.length === 2 &&
+            React.isValidElement(diffElements[0]) &&
+            React.isValidElement(diffElements[1]) &&
+            typeof diffElements[0].key === "string" &&
+            diffElements[0].key.includes("remove-") &&
+            typeof diffElements[1].key === "string" &&
+            diffElements[1].key.includes("add-")
+          ) {
+            const removedText = extractTextFromElement(diffElements[0]);
+            const addedText = extractTextFromElement(diffElements[1]);
 
-            // 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}`,
-                );
-
-                allElements.push(
-                  <Box
-                    key={`word-diff-removed-${changeIndex}-${i}`}
-                    flexDirection="row"
-                  >
-                    <Text color="red">-</Text>
-                    {removedParts}
-                  </Box>,
-                );
-                allElements.push(
-                  <Box
-                    key={`word-diff-added-${changeIndex}-${i}`}
-                    flexDirection="row"
-                  >
-                    <Text color="green">+</Text>
-                    {addedParts}
-                  </Box>,
-                );
+            if (removedText && addedText) {
+              const { removedParts, addedParts } = renderWordLevelDiff(
+                removedText,
+                addedText,
+                `word-${changeIndex}`,
+              );
 
-                i += 2; // Skip the next element since we processed it
-              } else {
-                // Fallback to original elements
-                allElements.push(current);
-                i += 1;
-              }
+              allElements.push(
+                <Box
+                  key={`word-diff-removed-${changeIndex}`}
+                  flexDirection="row"
+                >
+                  <Text color="red">-</Text>
+                  {removedParts}
+                </Box>,
+              );
+              allElements.push(
+                <Box key={`word-diff-added-${changeIndex}`} flexDirection="row">
+                  <Text color="green">+</Text>
+                  {addedParts}
+                </Box>,
+              );
             } else {
-              allElements.push(current);
-              i += 1;
+              allElements.push(...diffElements);
             }
+          } else {
+            allElements.push(...diffElements);
           }
         } catch (error) {
           console.warn(
@@ -255,21 +284,7 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
         }
       });
 
-      const isTruncated = !isExpanded && allElements.length > maxHeight;
-      const displayElements = isTruncated
-        ? allElements.slice(0, maxHeight - 1)
-        : allElements;
-
-      return (
-        <Box flexDirection="column">
-          {displayElements}
-          {isTruncated && (
-            <Text color="yellow" dimColor>
-              ... (truncated {allElements.length - (maxHeight - 1)} more lines)
-            </Text>
-          )}
-        </Box>
-      );
+      return <Box flexDirection="column">{allElements}</Box>;
     } catch (error) {
       console.warn("Error rendering expanded diff:", error);
       return (
@@ -280,26 +295,6 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     }
   };
 
-  // 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;
@@ -316,3 +311,23 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     </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;
+};

package/src/components/FileSelector.tsx

@@ -52,7 +52,6 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
         borderBottom={false}
         borderLeft={false}
         borderRight={false}
-        paddingTop={1}
       >
         <Text color="yellow">📁 No files found for "{searchQuery}"</Text>
         <Text dimColor>Press Escape to cancel</Text>
@@ -91,7 +90,6 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
-      paddingTop={1}
     >
       <Text color="cyan" bold>
         📁 Select File/Directory{" "}

package/src/components/HistorySearch.tsx

@@ -13,6 +13,7 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
   onSelect,
   onCancel,
 }) => {
+  const MAX_VISIBLE_ITEMS = 5;
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [entries, setEntries] = useState<PromptEntry[]>([]);
 
@@ -30,8 +31,8 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
   useEffect(() => {
     const fetchHistory = async () => {
       const results = await PromptHistoryManager.searchHistory(searchQuery);
-      const limitedResults = results.slice(0, 10);
-      setEntries(limitedResults); // Limit to 10 results
+      const limitedResults = results.slice(0, 20);
+      setEntries(limitedResults); // Limit to 20 results
       setSelectedIndex(0);
     };
     fetchHistory();
@@ -75,7 +76,6 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
         borderBottom={false}
         borderLeft={false}
         borderRight={false}
-        paddingTop={1}
       >
         <Text color="yellow">
           No history found {searchQuery && `for "${searchQuery}"`}
@@ -102,6 +102,19 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
     }
   };
 
+  // Calculate visible window
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, entries.length - MAX_VISIBLE_ITEMS),
+    ),
+  );
+  const visibleEntries = entries.slice(
+    startIndex,
+    startIndex + MAX_VISIBLE_ITEMS,
+  );
+
   return (
     <Box
       flexDirection="column"
@@ -110,7 +123,6 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
-      paddingTop={1}
       gap={1}
     >
       <Box>
@@ -119,24 +131,36 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
         </Text>
       </Box>
 
-      {entries.map((entry, index) => (
-        <Box key={index} flexDirection="column">
-          <Text
-            color={index === selectedIndex ? "black" : "white"}
-            backgroundColor={index === selectedIndex ? "blue" : undefined}
-            wrap="truncate-end"
-          >
-            {entry.prompt.replace(/\n/g, " ")}
-          </Text>
-          {index === selectedIndex && (
-            <Box marginLeft={4}>
-              <Text color="gray" dimColor>
-                {formatTimestamp(entry.timestamp)}
-              </Text>
+      <Box flexDirection="column">
+        {visibleEntries.map((entry, index) => {
+          const actualIndex = startIndex + index;
+          const isSelected = actualIndex === selectedIndex;
+          return (
+            <Box
+              key={actualIndex}
+              flexDirection="row"
+              justifyContent="space-between"
+            >
+              <Box flexShrink={1}>
+                <Text
+                  color={isSelected ? "black" : "white"}
+                  backgroundColor={isSelected ? "blue" : undefined}
+                  wrap="truncate-end"
+                >
+                  {entry.prompt.replace(/\n/g, " ")}
+                </Text>
+              </Box>
+              {isSelected && (
+                <Box marginLeft={2} flexShrink={0}>
+                  <Text color="gray" dimColor>
+                    {formatTimestamp(entry.timestamp)}
+                  </Text>
+                </Box>
+              )}
             </Box>
-          )}
-        </Box>
-      ))}
+          );
+        })}
+      </Box>
 
       <Box>
         <Text dimColor>

package/src/components/InputBox.tsx

@@ -4,8 +4,7 @@ import { useInput } from "ink";
 import { FileSelector } from "./FileSelector.js";
 import { CommandSelector } from "./CommandSelector.js";
 import { HistorySearch } from "./HistorySearch.js";
-import { MemoryTypeSelector } from "./MemoryTypeSelector.js";
-import { BashShellManager } from "./BashShellManager.js";
+import { BackgroundTaskManager } from "./BackgroundTaskManager.js";
 import { McpManager } from "./McpManager.js";
 import { RewindCommand } from "./RewindCommand.js";
 import { useInputManager } from "../hooks/useInputManager.js";
@@ -14,7 +13,7 @@ import { useChat } from "../contexts/useChat.js";
 import type { McpServerStatus, SlashCommand } from "wave-agent-sdk";
 
 export const INPUT_PLACEHOLDER_TEXT =
-  "Type your message (use @ to reference files, / for commands, # to add memory, Ctrl+R to search history)...";
+  "Type your message (use @ to reference files, / for commands, Ctrl+R to search history, Ctrl+O to expand messages, Ctrl+T to toggle tasks)...";
 
 export const INPUT_PLACEHOLDER_TEXT_PREFIX = INPUT_PLACEHOLDER_TEXT.substring(
   0,
@@ -25,13 +24,11 @@ export interface InputBoxProps {
   isLoading?: boolean;
   isCommandRunning?: boolean;
   workdir?: string;
-  userInputHistory?: string[];
   sendMessage?: (
     message: string,
     images?: Array<{ path: string; mimeType: string }>,
   ) => void;
   abortMessage?: () => void;
-  saveMemory?: (message: string, type: "project" | "user") => Promise<void>;
   // MCP related properties
   mcpServers?: McpServerStatus[];
   connectMcpServer?: (serverName: string) => Promise<boolean>;
@@ -44,10 +41,8 @@ export interface InputBoxProps {
 export const InputBox: React.FC<InputBoxProps> = ({
   isLoading = false,
   isCommandRunning = false,
-  userInputHistory = [],
   sendMessage = () => {},
   abortMessage = () => {},
-  saveMemory = async () => {},
   mcpServers = [],
   connectMcpServer = async () => false,
   disconnectMcpServer = async () => false,
@@ -58,7 +53,9 @@ export const InputBox: React.FC<InputBoxProps> = ({
     permissionMode: chatPermissionMode,
     setPermissionMode: setChatPermissionMode,
     handleRewindSelect,
+    backgroundCurrentTask,
     messages,
+    getFullMessageThread,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -82,26 +79,19 @@ export const InputBox: React.FC<InputBoxProps> = ({
     handleCancelCommandSelect,
     handleHistorySearchSelect,
     handleCancelHistorySearch,
-    // Memory type selector
-    showMemoryTypeSelector,
-    memoryMessage,
-    handleMemoryTypeSelect,
-    handleCancelMemoryTypeSelect,
     // History search
     showHistorySearch,
     historySearchQuery,
-    // Bash/MCP Manager
-    showBashManager,
+    // Task/MCP Manager
+    showBackgroundTaskManager,
     showMcpManager,
     showRewindManager,
-    setShowBashManager,
+    setShowBackgroundTaskManager,
     setShowMcpManager,
     setShowRewindManager,
     // Permission mode
     permissionMode,
     setPermissionMode,
-    // Input history
-    setUserInputHistory,
     // Main handler
     handleInput,
     // Manager ready state
@@ -109,8 +99,8 @@ export const InputBox: React.FC<InputBoxProps> = ({
   } = useInputManager({
     onSendMessage: sendMessage,
     onHasSlashCommand: hasSlashCommand,
-    onSaveMemory: saveMemory,
     onAbortMessage: abortMessage,
+    onBackgroundCurrentTask: backgroundCurrentTask,
     onPermissionModeChange: setChatPermissionMode,
   });
 
@@ -119,11 +109,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setPermissionMode(chatPermissionMode);
   }, [chatPermissionMode, setPermissionMode]);
 
-  // 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(
@@ -175,6 +160,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
         messages={messages}
         onSelect={handleRewindSelectWithClose}
         onCancel={handleRewindCancel}
+        getFullMessageThread={getFullMessageThread}
       />
     );
   }
@@ -208,18 +194,12 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showMemoryTypeSelector && (
-        <MemoryTypeSelector
-          message={memoryMessage}
-          onSelect={handleMemoryTypeSelect}
-          onCancel={handleCancelMemoryTypeSelect}
+      {showBackgroundTaskManager && (
+        <BackgroundTaskManager
+          onCancel={() => setShowBackgroundTaskManager(false)}
         />
       )}
 
-      {showBashManager && (
-        <BashShellManager onCancel={() => setShowBashManager(false)} />
-      )}
-
       {showMcpManager && (
         <McpManager
           onCancel={() => setShowMcpManager(false)}
@@ -229,7 +209,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showBashManager || showMcpManager || showRewindManager || (
+      {showBackgroundTaskManager || showMcpManager || showRewindManager || (
         <Box flexDirection="column">
           <Box
             borderStyle="single"
@@ -251,7 +231,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
               )}
             </Text>
           </Box>
-          <Box paddingRight={1}>
+          <Box paddingRight={1} justifyContent="space-between" width="100%">
             <Text color="gray">
               Mode:{" "}
               <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>

package/src/components/LoadingIndicator.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export interface LoadingIndicatorProps {
+  isLoading?: boolean;
+  isCommandRunning?: boolean;
+  isCompressing?: boolean;
+  latestTotalTokens?: number;
+}
+
+export const LoadingIndicator = ({
+  isLoading = false,
+  isCommandRunning = false,
+  isCompressing = false,
+  latestTotalTokens = 0,
+}: LoadingIndicatorProps) => {
+  return (
+    <Box flexDirection="column">
+      {isLoading && (
+        <Box>
+          <Text color="yellow">💭 AI is thinking... </Text>
+          {latestTotalTokens > 0 && (
+            <>
+              <Text color="gray" dimColor>
+                |{" "}
+              </Text>
+              <Text color="blue" bold>
+                {latestTotalTokens.toLocaleString()}
+              </Text>
+              <Text color="gray" dimColor>
+                {" "}
+                tokens{" "}
+              </Text>
+            </>
+          )}
+          <Text color="gray" dimColor>
+            |{" "}
+          </Text>
+          <Text color="red" bold>
+            Esc
+          </Text>
+          <Text color="gray" dimColor>
+            {" "}
+            to abort
+          </Text>
+        </Box>
+      )}
+      {isCommandRunning && <Text color="blue">🚀 Command is running...</Text>}
+      {isCompressing && (
+        <Text color="magenta">🗜️ Compressing message history...</Text>
+      )}
+    </Box>
+  );
+};
+
+LoadingIndicator.displayName = "LoadingIndicator";