wave-code 0.5.0 → 0.6.2

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,17 +4,17 @@ 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 { TaskManager } from "./TaskManager.js";
+import { BackgroundTaskManager } from "./BackgroundTaskManager.js";
 import { McpManager } from "./McpManager.js";
 import { RewindCommand } from "./RewindCommand.js";
+import { HelpView } from "./HelpView.js";
 import { useInputManager } from "../hooks/useInputManager.js";
 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 /help for more info)...";
 
 export const INPUT_PLACEHOLDER_TEXT_PREFIX = INPUT_PLACEHOLDER_TEXT.substring(
   0,
@@ -25,13 +25,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 +42,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,
@@ -60,6 +56,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     handleRewindSelect,
     backgroundCurrentTask,
     messages,
+    getFullMessageThread,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -83,26 +80,21 @@ export const InputBox: React.FC<InputBoxProps> = ({
     handleCancelCommandSelect,
     handleHistorySearchSelect,
     handleCancelHistorySearch,
-    // Memory type selector
-    showMemoryTypeSelector,
-    memoryMessage,
-    handleMemoryTypeSelect,
-    handleCancelMemoryTypeSelect,
     // History search
     showHistorySearch,
     historySearchQuery,
     // Task/MCP Manager
-    showTaskManager,
+    showBackgroundTaskManager,
     showMcpManager,
     showRewindManager,
-    setShowTaskManager,
+    showHelp,
+    setShowBackgroundTaskManager,
     setShowMcpManager,
     setShowRewindManager,
+    setShowHelp,
     // Permission mode
     permissionMode,
     setPermissionMode,
-    // Input history
-    setUserInputHistory,
     // Main handler
     handleInput,
     // Manager ready state
@@ -110,7 +102,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
   } = useInputManager({
     onSendMessage: sendMessage,
     onHasSlashCommand: hasSlashCommand,
-    onSaveMemory: saveMemory,
     onAbortMessage: abortMessage,
     onBackgroundCurrentTask: backgroundCurrentTask,
     onPermissionModeChange: setChatPermissionMode,
@@ -121,11 +112,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(
@@ -177,10 +163,15 @@ export const InputBox: React.FC<InputBoxProps> = ({
         messages={messages}
         onSelect={handleRewindSelectWithClose}
         onCancel={handleRewindCancel}
+        getFullMessageThread={getFullMessageThread}
       />
     );
   }
 
+  if (showHelp) {
+    return <HelpView onCancel={() => setShowHelp(false)} />;
+  }
+
   return (
     <Box flexDirection="column">
       {showFileSelector && (
@@ -210,18 +201,12 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showMemoryTypeSelector && (
-        <MemoryTypeSelector
-          message={memoryMessage}
-          onSelect={handleMemoryTypeSelect}
-          onCancel={handleCancelMemoryTypeSelect}
+      {showBackgroundTaskManager && (
+        <BackgroundTaskManager
+          onCancel={() => setShowBackgroundTaskManager(false)}
         />
       )}
 
-      {showTaskManager && (
-        <TaskManager onCancel={() => setShowTaskManager(false)} />
-      )}
-
       {showMcpManager && (
         <McpManager
           onCancel={() => setShowMcpManager(false)}
@@ -231,39 +216,42 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showTaskManager || showMcpManager || showRewindManager || (
-        <Box flexDirection="column">
-          <Box
-            borderStyle="single"
-            borderColor="gray"
-            borderLeft={false}
-            borderRight={false}
-          >
-            <Text color={isPlaceholder ? "gray" : "white"}>
-              {shouldShowCursor ? (
-                <>
-                  {beforeCursor}
-                  <Text backgroundColor="white" color="black">
-                    {atCursor}
-                  </Text>
-                  {afterCursor}
-                </>
-              ) : (
-                displayText
-              )}
-            </Text>
+      {showBackgroundTaskManager ||
+        showMcpManager ||
+        showRewindManager ||
+        showHelp || (
+          <Box flexDirection="column">
+            <Box
+              borderStyle="single"
+              borderColor="gray"
+              borderLeft={false}
+              borderRight={false}
+            >
+              <Text color={isPlaceholder ? "gray" : "white"}>
+                {shouldShowCursor ? (
+                  <>
+                    {beforeCursor}
+                    <Text backgroundColor="white" color="black">
+                      {atCursor}
+                    </Text>
+                    {afterCursor}
+                  </>
+                ) : (
+                  displayText
+                )}
+              </Text>
+            </Box>
+            <Box paddingRight={1} justifyContent="space-between" width="100%">
+              <Text color="gray">
+                Mode:{" "}
+                <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>
+                  {permissionMode}
+                </Text>{" "}
+                (Shift+Tab to cycle)
+              </Text>
+            </Box>
           </Box>
-          <Box paddingRight={1}>
-            <Text color="gray">
-              Mode:{" "}
-              <Text color={permissionMode === "plan" ? "yellow" : "cyan"}>
-                {permissionMode}
-              </Text>{" "}
-              (Shift+Tab to cycle)
-            </Text>
-          </Box>
-        </Box>
-      )}
+        )}
     </Box>
   );
 };

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";