wave-code 0.2.0 → 0.4.0

package/src/components/DiscoverView.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Box, useInput } from "ink";
+import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+import { PluginList } from "./PluginList.js";
+
+export const DiscoverView: React.FC = () => {
+  const { discoverablePlugins, actions } = usePluginManagerContext();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(
+        Math.min(discoverablePlugins.length - 1, selectedIndex + 1),
+      );
+    } else if (key.return) {
+      const plugin = discoverablePlugins[selectedIndex];
+      if (plugin) {
+        actions.setSelectedId(`${plugin.name}@${plugin.marketplace}`);
+        actions.setView("PLUGIN_DETAIL");
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <PluginList plugins={discoverablePlugins} selectedIndex={selectedIndex} />
+    </Box>
+  );
+};

package/src/components/FileSelector.tsx

@@ -131,7 +131,7 @@ export const FileSelector: React.FC<FileSelectorProps> = ({
           Use ↑↓ to navigate, Enter/Tab to select, Escape to cancel
         </Text>
         <Text dimColor>
-          File {selectedIndex + 1} of {files.length}
+          , File {selectedIndex + 1} of {files.length}
         </Text>
       </Box>
     </Box>

package/src/components/HistorySearch.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { PromptHistoryManager, type PromptEntry } from "wave-agent-sdk";
+
+export interface HistorySearchProps {
+  searchQuery: string;
+  onSelect: (prompt: string) => void;
+  onCancel: () => void;
+}
+
+export const HistorySearch: React.FC<HistorySearchProps> = ({
+  searchQuery,
+  onSelect,
+  onCancel,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [entries, setEntries] = useState<PromptEntry[]>([]);
+
+  const entriesRef = React.useRef<PromptEntry[]>([]);
+  const selectedIndexRef = React.useRef(0);
+
+  useEffect(() => {
+    entriesRef.current = entries;
+  }, [entries]);
+
+  useEffect(() => {
+    selectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    const fetchHistory = async () => {
+      const results = await PromptHistoryManager.searchHistory(searchQuery);
+      const limitedResults = results.slice(0, 10);
+      setEntries(limitedResults); // Limit to 10 results
+      setSelectedIndex(0);
+    };
+    fetchHistory();
+  }, [searchQuery]);
+
+  useInput((input, key) => {
+    if (key.return) {
+      if (
+        entriesRef.current.length > 0 &&
+        selectedIndexRef.current < entriesRef.current.length
+      ) {
+        onSelect(entriesRef.current[selectedIndexRef.current].prompt);
+      }
+      return;
+    }
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex((prev) =>
+        Math.min(entriesRef.current.length - 1, prev + 1),
+      );
+      return;
+    }
+  });
+
+  if (entries.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="yellow"
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+        paddingTop={1}
+      >
+        <Text color="yellow">
+          No history found {searchQuery && `for "${searchQuery}"`}
+        </Text>
+        <Text dimColor>Press Escape to cancel</Text>
+      </Box>
+    );
+  }
+
+  const formatTimestamp = (timestamp: number): string => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffDays > 0) {
+      return `${diffDays}d ago`;
+    } else if (diffHours > 0) {
+      return `${diffHours}h ago`;
+    } else {
+      const diffMinutes = Math.floor(diffMs / (1000 * 60));
+      return diffMinutes > 0 ? `${diffMinutes}m ago` : "just now";
+    }
+  };
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="blue"
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingTop={1}
+      gap={1}
+    >
+      <Box>
+        <Text color="blue" bold>
+          Prompt History {searchQuery && `(filtering: "${searchQuery}")`}
+        </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>
+          )}
+        </Box>
+      ))}
+
+      <Box>
+        <Text dimColor>
+          Use ↑↓ to navigate, Enter to select, Escape to cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/InputBox.tsx

@@ -1,19 +1,20 @@
-import React, { useEffect, useMemo } from "react";
+import React, { 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 { HistorySearch } from "./HistorySearch.js";
 import { MemoryTypeSelector } from "./MemoryTypeSelector.js";
 import { BashShellManager } from "./BashShellManager.js";
 import { McpManager } from "./McpManager.js";
+import { RewindCommand } from "./RewindCommand.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, ! for bash history, # to add memory)...";
+  "Type your message (use @ to reference files, / for commands, # to add memory, Ctrl+R to search history)...";
 
 export const INPUT_PLACEHOLDER_TEXT_PREFIX = INPUT_PLACEHOLDER_TEXT.substring(
   0,
@@ -43,7 +44,6 @@ export interface InputBoxProps {
 export const InputBox: React.FC<InputBoxProps> = ({
   isLoading = false,
   isCommandRunning = false,
-  workdir,
   userInputHistory = [],
   sendMessage = () => {},
   abortMessage = () => {},
@@ -54,12 +54,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
   slashCommands = [],
   hasSlashCommand = () => false,
 }) => {
-  // Get current working directory - memoized to avoid repeated process.cwd() calls
-  const currentWorkdir = useMemo(() => workdir || process.cwd(), [workdir]);
-
   const {
     permissionMode: chatPermissionMode,
     setPermissionMode: setChatPermissionMode,
+    handleRewindSelect,
+    messages,
   } = useChat();
 
   // Input manager with all input state and functionality (including images)
@@ -81,29 +80,28 @@ export const InputBox: React.FC<InputBoxProps> = ({
     handleCommandSelect,
     handleCommandInsert,
     handleCancelCommandSelect,
-    // Bash history selector
-    showBashHistorySelector,
-    bashHistorySearchQuery,
-    handleBashHistorySelect,
-    handleCancelBashHistorySelect,
+    handleHistorySearchSelect,
+    handleCancelHistorySearch,
     // Memory type selector
     showMemoryTypeSelector,
     memoryMessage,
     handleMemoryTypeSelect,
     handleCancelMemoryTypeSelect,
+    // History search
+    showHistorySearch,
+    historySearchQuery,
     // Bash/MCP Manager
     showBashManager,
     showMcpManager,
+    showRewindManager,
     setShowBashManager,
     setShowMcpManager,
+    setShowRewindManager,
     // Permission mode
     permissionMode,
     setPermissionMode,
     // Input history
     setUserInputHistory,
-    // Complex handlers combining multiple operations
-    handleBashHistoryExecuteAndSend,
-    handleBashHistoryDelete,
     // Main handler
     handleInput,
     // Manager ready state
@@ -138,9 +136,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
     );
   });
 
-  // These methods are already memoized in useInputManager, no need to wrap again
-
-  // These methods are already memoized in useInputManager and combine multiple operations
+  const handleRewindCancel = () => {
+    if (setShowRewindManager) {
+      setShowRewindManager(false);
+    }
+  };
 
   const isPlaceholder = !inputText;
   const placeholderText = INPUT_PLACEHOLDER_TEXT;
@@ -154,7 +154,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     cursorPosition < displayText.length ? displayText[cursorPosition] : " ";
   const afterCursor = displayText.substring(cursorPosition + 1);
 
-  // Always show cursor, allow user to continue input during loading
+  // Always show cursor, allow user to continue input during memory mode
   const shouldShowCursor = true;
 
   // Only show the Box after InputManager is created on first mount
@@ -162,6 +162,23 @@ export const InputBox: React.FC<InputBoxProps> = ({
     return null;
   }
 
+  const handleRewindSelectWithClose = async (index: number) => {
+    if (setShowRewindManager) {
+      setShowRewindManager(false);
+    }
+    await handleRewindSelect(index);
+  };
+
+  if (showRewindManager) {
+    return (
+      <RewindCommand
+        messages={messages}
+        onSelect={handleRewindSelectWithClose}
+        onCancel={handleRewindCancel}
+      />
+    );
+  }
+
   return (
     <Box flexDirection="column">
       {showFileSelector && (
@@ -183,14 +200,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showBashHistorySelector && (
-        <BashHistorySelector
-          searchQuery={bashHistorySearchQuery}
-          workdir={currentWorkdir}
-          onSelect={handleBashHistorySelect}
-          onExecute={handleBashHistoryExecuteAndSend}
-          onDelete={handleBashHistoryDelete}
-          onCancel={handleCancelBashHistorySelect}
+      {showHistorySearch && (
+        <HistorySearch
+          searchQuery={historySearchQuery}
+          onSelect={handleHistorySearchSelect}
+          onCancel={handleCancelHistorySearch}
         />
       )}
 
@@ -214,7 +228,8 @@ export const InputBox: React.FC<InputBoxProps> = ({
           onDisconnectServer={disconnectMcpServer}
         />
       )}
-      {showBashManager || showMcpManager || (
+
+      {showBashManager || showMcpManager || showRewindManager || (
         <Box flexDirection="column">
           <Box
             borderStyle="single"

package/src/components/InstalledView.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+
+export const InstalledView: React.FC = () => {
+  const { installedPlugins, actions } = usePluginManagerContext();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(
+        Math.min(installedPlugins.length - 1, selectedIndex + 1),
+      );
+    } else if (key.return) {
+      const plugin = installedPlugins[selectedIndex];
+      if (plugin) {
+        actions.setSelectedId(`${plugin.name}@${plugin.marketplace}`);
+        actions.setView("PLUGIN_DETAIL");
+      }
+    }
+  });
+
+  if (installedPlugins.length === 0) {
+    return (
+      <Box padding={1}>
+        <Text dimColor>No plugins installed.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {installedPlugins.map((plugin, index) => {
+        const isSelected = index === selectedIndex;
+        return (
+          <Box
+            key={`${plugin.name}@${plugin.marketplace}`}
+            flexDirection="column"
+            marginBottom={1}
+          >
+            <Box>
+              <Text color={isSelected ? "cyan" : undefined}>
+                {isSelected ? "> " : "  "}
+                <Text bold>{plugin.name}</Text>
+                <Text dimColor> @{plugin.marketplace}</Text>
+                {plugin.scope && <Text color="gray"> ({plugin.scope})</Text>}
+              </Text>
+            </Box>
+            {isSelected && (
+              <Box marginLeft={4}>
+                <Text dimColor>Press Enter for actions</Text>
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/Markdown.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { Box, Text, useStdout } from "ink";
 import { marked, type Token, type Tokens } from "marked";
+import { highlight } from "cli-highlight";
 
 export interface MarkdownProps {
   children: string;
@@ -12,7 +13,8 @@ const unescapeHtml = (html: string) => {
     .replace(/&lt;/g, "<")
     .replace(/&gt;/g, ">")
     .replace(/&quot;/g, '"')
-    .replace(/&#39;/g, "'");
+    .replace(/&#39;/g, "'")
+    .replace(/&apos;/g, "'");
 };
 
 const InlineRenderer = ({ tokens }: { tokens: Token[] }) => {
@@ -53,16 +55,21 @@ const InlineRenderer = ({ tokens }: { tokens: Token[] }) => {
                 {unescapeHtml((token as Tokens.Codespan).text)}
               </Text>
             );
-          case "link":
+          case "link": {
+            const t = token as Tokens.Link;
             return (
-              <Text key={index} color="blue" underline>
-                {token.tokens ? (
-                  <InlineRenderer tokens={token.tokens} />
-                ) : (
-                  unescapeHtml((token as Tokens.Link).text)
-                )}
+              <Text key={index}>
+                <Text color="blue" underline>
+                  {t.tokens ? (
+                    <InlineRenderer tokens={t.tokens} />
+                  ) : (
+                    unescapeHtml(t.text)
+                  )}
+                </Text>
+                <Text color="gray"> ({t.href})</Text>
               </Text>
             );
+          }
           case "br":
             return <Text key={index}>{"\n"}</Text>;
           case "del":
@@ -199,23 +206,29 @@ const BlockRenderer = ({ tokens }: { tokens: Token[] }) => {
           case "paragraph": {
             const t = token as Tokens.Paragraph;
             return (
-              <Box
-                key={index}
-                marginBottom={1}
-                flexDirection="row"
-                flexWrap="wrap"
-              >
-                <InlineRenderer tokens={t.tokens} />
+              <Box key={index} marginBottom={1} flexDirection="row">
+                <Text>
+                  <InlineRenderer tokens={t.tokens} />
+                </Text>
               </Box>
             );
           }
           case "code": {
             const t = token as Tokens.Code;
             if (t.lang !== undefined) {
-              const lines = token.raw.replace(/\n$/, "").split("\n");
+              const raw = token.raw.endsWith("\n")
+                ? token.raw.slice(0, -1)
+                : token.raw;
+              const lines = raw.split("\n");
               const opening = lines[0];
               const closing = lines[lines.length - 1];
               const content = lines.slice(1, -1).join("\n");
+              const highlighted = content
+                ? highlight(unescapeHtml(content), {
+                    language: t.lang,
+                    ignoreIllegals: true,
+                  })
+                : "";
               return (
                 <Box
                   key={index}
@@ -224,7 +237,7 @@ const BlockRenderer = ({ tokens }: { tokens: Token[] }) => {
                   marginBottom={1}
                 >
                   <Text color="gray">{opening}</Text>
-                  {content && <Text>{content}</Text>}
+                  {highlighted && <Text>{highlighted}</Text>}
                   <Text color="gray">{closing}</Text>
                 </Box>
               );
@@ -236,7 +249,7 @@ const BlockRenderer = ({ tokens }: { tokens: Token[] }) => {
                 paddingX={1}
                 marginBottom={1}
               >
-                <Text>{t.text}</Text>
+                <Text>{unescapeHtml(t.text)}</Text>
               </Box>
             );
           }
@@ -261,14 +274,12 @@ const BlockRenderer = ({ tokens }: { tokens: Token[] }) => {
                           if (itemToken.type === "text") {
                             const it = itemToken as Tokens.Text;
                             return (
-                              <Box
-                                key={itemIndex}
-                                flexDirection="row"
-                                flexWrap="wrap"
-                              >
-                                <InlineRenderer
-                                  tokens={it.tokens || [itemToken]}
-                                />
+                              <Box key={itemIndex} flexDirection="row">
+                                <Text>
+                                  <InlineRenderer
+                                    tokens={it.tokens || [itemToken]}
+                                  />
+                                </Text>
                               </Box>
                             );
                           }

package/src/components/MarketplaceAddForm.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+
+export const MarketplaceAddForm: React.FC = () => {
+  const { actions } = usePluginManagerContext();
+  const [source, setSource] = useState("");
+
+  useInput((input, key) => {
+    if (key.escape) {
+      actions.setView("MARKETPLACES");
+    } else if (key.return) {
+      if (source.trim()) {
+        actions.addMarketplace(source.trim());
+        actions.setView("MARKETPLACES");
+      }
+    } else if (key.backspace || key.delete) {
+      setSource((prev) => prev.slice(0, -1));
+    } else if (input.length === 1) {
+      setSource((prev) => prev + input);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold color="cyan">
+        Add Marketplace
+      </Text>
+      <Box marginTop={1}>
+        <Text>Source (URL or Path): </Text>
+        <Text color="yellow">{source}</Text>
+        <Text color="yellow">_</Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Press Enter to add, Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/MarketplaceDetail.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+
+export const MarketplaceDetail: React.FC = () => {
+  const { state, marketplaces, actions } = usePluginManagerContext();
+  const [selectedActionIndex, setSelectedActionIndex] = useState(0);
+
+  const marketplace = marketplaces.find((m) => m.name === state.selectedId);
+
+  const ACTIONS = [
+    { id: "update", label: "Update marketplace" },
+    { id: "remove", label: "Remove marketplace" },
+  ] as const;
+
+  useInput((input, key) => {
+    if (key.escape) {
+      actions.setView("MARKETPLACES");
+    } else if (key.upArrow) {
+      setSelectedActionIndex((prev) =>
+        prev > 0 ? prev - 1 : ACTIONS.length - 1,
+      );
+    } else if (key.downArrow) {
+      setSelectedActionIndex((prev) =>
+        prev < ACTIONS.length - 1 ? prev + 1 : 0,
+      );
+    } else if (key.return && marketplace) {
+      const action = ACTIONS[selectedActionIndex].id;
+      if (action === "update") {
+        actions.updateMarketplace(marketplace.name);
+      } else {
+        actions.removeMarketplace(marketplace.name);
+      }
+      actions.setView("MARKETPLACES");
+    }
+  });
+
+  if (!marketplace) {
+    return (
+      <Box>
+        <Text color="red">Marketplace not found.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          {marketplace.name}
+        </Text>
+        {marketplace.isBuiltin && <Text dimColor> (Built-in)</Text>}
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text>Source: {JSON.stringify(marketplace.source)}</Text>
+      </Box>
+
+      <Box marginTop={1} flexDirection="column">
+        <Text bold>Marketplace Actions:</Text>
+        {ACTIONS.map((action, index) => (
+          <Text
+            key={action.id}
+            color={index === selectedActionIndex ? "yellow" : undefined}
+          >
+            {index === selectedActionIndex ? "> " : "  "}
+            {action.label}
+          </Text>
+        ))}
+        <Box marginTop={1}>
+          <Text dimColor>Use ↑/↓ to select, Enter to confirm</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text dimColor>Press Esc to go back</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};