wave-code 0.5.0 → 0.6.0

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 { TaskManager } from "./TaskManager.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,
@@ -31,7 +30,6 @@ export interface InputBoxProps {
     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>;
@@ -47,7 +45,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
   userInputHistory = [],
   sendMessage = () => {},
   abortMessage = () => {},
-  saveMemory = async () => {},
   mcpServers = [],
   connectMcpServer = async () => false,
   disconnectMcpServer = async () => false,
@@ -83,19 +80,14 @@ 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,
+    setShowBackgroundTaskManager,
     setShowMcpManager,
     setShowRewindManager,
     // Permission mode
@@ -110,7 +102,6 @@ export const InputBox: React.FC<InputBoxProps> = ({
   } = useInputManager({
     onSendMessage: sendMessage,
     onHasSlashCommand: hasSlashCommand,
-    onSaveMemory: saveMemory,
     onAbortMessage: abortMessage,
     onBackgroundCurrentTask: backgroundCurrentTask,
     onPermissionModeChange: setChatPermissionMode,
@@ -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,7 +216,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
-      {showTaskManager || showMcpManager || showRewindManager || (
+      {showBackgroundTaskManager || showMcpManager || showRewindManager || (
         <Box flexDirection="column">
           <Box
             borderStyle="single"
@@ -253,7 +238,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";

package/src/components/Markdown.tsx

@@ -1,7 +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";
+import { Box, Text } from "ink";
+import { Renderer, marked, type Tokens } from "marked";
+import chalk from "chalk";
 
 export interface MarkdownProps {
   children: string;
@@ -17,339 +17,142 @@ const unescapeHtml = (html: string) => {
     .replace(/'/g, "'");
 };
 
-const InlineRenderer = ({ tokens }: { tokens: Token[] }) => {
-  return (
-    <>
-      {tokens.map((token, index) => {
-        switch (token.type) {
-          case "text": {
-            const t = token as Tokens.Text;
-            if (t.tokens) {
-              return <InlineRenderer key={index} tokens={t.tokens} />;
-            }
-            return <Text key={index}>{unescapeHtml(t.text)}</Text>;
-          }
-          case "strong":
-            return (
-              <Text key={index} bold>
-                {token.tokens ? (
-                  <InlineRenderer tokens={token.tokens} />
-                ) : (
-                  unescapeHtml((token as Tokens.Strong).text)
-                )}
-              </Text>
-            );
-          case "em":
-            return (
-              <Text key={index} italic>
-                {token.tokens ? (
-                  <InlineRenderer tokens={token.tokens} />
-                ) : (
-                  unescapeHtml((token as Tokens.Em).text)
-                )}
-              </Text>
-            );
-          case "codespan":
-            return (
-              <Text key={index} color="yellow">
-                {unescapeHtml((token as Tokens.Codespan).text)}
-              </Text>
-            );
-          case "link": {
-            const t = token as Tokens.Link;
-            return (
-              <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":
-            return (
-              <Text key={index} strikethrough>
-                {token.tokens ? (
-                  <InlineRenderer tokens={token.tokens} />
-                ) : (
-                  unescapeHtml((token as Tokens.Del).text)
-                )}
-              </Text>
-            );
-          default:
-            return <Text key={index}>{token.raw}</Text>;
-        }
-      })}
-    </>
-  );
-};
-
-const TableRenderer = ({ token }: { token: Tokens.Table }) => {
-  const { stdout } = useStdout();
-  const terminalWidth = (stdout?.columns || 80) - 2;
+class AnsiRenderer extends Renderer<string> {
+  override code({ text, lang }: Tokens.Code): string {
+    const prefix = lang ? `\`\`\`${lang}` : "```";
+    const suffix = "```";
+    return `\n${chalk.gray(prefix)}\n${text}\n${chalk.gray(suffix)}\n`;
+  }
 
-  const columnWidths = useMemo(() => {
-    const numCols = token.header.length;
-    const minWidth = 5;
-    const maxColWidth = 40;
-    const widths = token.header.map((h) =>
-      Math.min(maxColWidth, Math.max(minWidth, h.text.length)),
+  override blockquote({ tokens }: Tokens.Blockquote): string {
+    const body = this.parser.parse(tokens);
+    return (
+      "\n" +
+      body
+        .trim()
+        .split("\n")
+        .map((line) => chalk.gray("> ") + line)
+        .join("\n") +
+      "\n"
     );
+  }
 
-    token.rows.forEach((row) => {
-      row.forEach((cell, i) => {
-        widths[i] = Math.min(
-          maxColWidth,
-          Math.max(widths[i] || minWidth, cell.text.length),
-        );
-      });
-    });
+  override heading({ tokens, depth }: Tokens.Heading): string {
+    const text = this.parser.parseInline(tokens);
+    const hashes = "#".repeat(depth);
+    return `\n${chalk.cyan(`${hashes} ${text}`)}\n`;
+  }
 
-    const paddedWidths = widths.map((w) => w + 2);
-    const totalWidth = paddedWidths.reduce((a, b) => a + b, 0) + numCols + 1;
+  override hr(): string {
+    return `\n${chalk.gray("─".repeat(20))}\n`;
+  }
 
-    if (totalWidth <= terminalWidth) {
-      return paddedWidths;
-    }
+  override list(token: Tokens.List): string {
+    const body = token.items
+      .map((item, i) => {
+        const text = this.listitem(item);
+        const prefix = token.ordered
+          ? chalk.gray(`${(token.start || 1) + i}. `)
+          : chalk.gray("• ");
+        const lines = text.split("\n");
+        const firstLine = prefix + lines[0];
+        const restLines = lines
+          .slice(1)
+          .filter((line) => line.length > 0)
+          .map((line) => "  " + line);
+        return [firstLine, ...restLines].join("\n") + "\n";
+      })
+      .join("");
+    return `\n${body}`;
+  }
 
-    // If table is too wide, scale down columns proportionally
-    const availableWidth = terminalWidth - numCols - 1;
-    const scaleFactor = availableWidth / (totalWidth - numCols - 1);
-    return paddedWidths.map((w) =>
-      Math.max(minWidth, Math.floor(w * scaleFactor)),
-    );
-  }, [token, terminalWidth]);
+  override listitem(item: Tokens.ListItem): string {
+    return `${this.parser.parse(item.tokens).trim()}\n`;
+  }
 
-  return (
-    <Box
-      flexDirection="column"
-      marginBottom={1}
-      borderStyle="single"
-      borderColor="gray"
-      width={columnWidths.reduce((a, b) => a + b, 0) + token.header.length + 1}
-    >
-      {/* Header */}
-      <Box
-        flexDirection="row"
-        borderStyle="single"
-        borderBottom
-        borderTop={false}
-        borderLeft={false}
-        borderRight={false}
-        borderColor="gray"
-      >
-        {token.header.map((cell, i) => (
-          <Box
-            key={i}
-            width={columnWidths[i]}
-            paddingX={1}
-            borderStyle="single"
-            borderLeft={i > 0}
-            borderRight={false}
-            borderTop={false}
-            borderBottom={false}
-            borderColor="gray"
-          >
-            <Text bold wrap="wrap">
-              <InlineRenderer tokens={cell.tokens} />
-            </Text>
-          </Box>
-        ))}
-      </Box>
-      {/* Rows */}
-      {token.rows.map((row, rowIndex) => (
-        <Box key={rowIndex} flexDirection="row">
-          {row.map((cell, i) => (
-            <Box
-              key={i}
-              width={columnWidths[i]}
-              paddingX={1}
-              borderStyle="single"
-              borderLeft={i > 0}
-              borderRight={false}
-              borderTop={false}
-              borderBottom={false}
-              borderColor="gray"
-            >
-              <Text wrap="wrap">
-                <InlineRenderer tokens={cell.tokens} />
-              </Text>
-            </Box>
-          ))}
-        </Box>
-      ))}
-    </Box>
-  );
-};
+  override checkbox({ checked }: Tokens.Checkbox): string {
+    return checked ? chalk.green("[x] ") : chalk.gray("[ ] ");
+  }
 
-const BlockRenderer = ({ tokens }: { tokens: Token[] }) => {
-  return (
-    <>
-      {tokens.map((token, index) => {
-        switch (token.type) {
-          case "heading": {
-            const t = token as Tokens.Heading;
-            return (
-              <Box key={index} marginBottom={1} flexDirection="column">
-                <Text bold color="cyan">
-                  {"#".repeat(t.depth)} <InlineRenderer tokens={t.tokens} />
-                </Text>
-              </Box>
-            );
-          }
-          case "paragraph": {
-            const t = token as Tokens.Paragraph;
-            return (
-              <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 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}
-                  flexDirection="column"
-                  paddingX={1}
-                  marginBottom={1}
-                >
-                  <Text color="gray">{opening}</Text>
-                  {highlighted && <Text>{highlighted}</Text>}
-                  <Text color="gray">{closing}</Text>
-                </Box>
-              );
-            }
-            return (
-              <Box
-                key={index}
-                flexDirection="column"
-                paddingX={1}
-                marginBottom={1}
-              >
-                <Text>{unescapeHtml(t.text)}</Text>
-              </Box>
-            );
-          }
-          case "list": {
-            const t = token as Tokens.List;
-            return (
-              <Box
-                key={index}
-                flexDirection="column"
-                marginBottom={1}
-                paddingLeft={2}
-              >
-                {t.items.map((item, i) => {
-                  const start = t.start || 1;
-                  return (
-                    <Box key={i} flexDirection="row">
-                      <Text color="gray">
-                        {t.ordered ? `${start + i}. ` : "• "}
-                      </Text>
-                      <Box flexDirection="column" flexGrow={1}>
-                        {item.tokens.map((itemToken, itemIndex) => {
-                          if (
-                            itemToken.type === "text" ||
-                            itemToken.type === "paragraph"
-                          ) {
-                            const it = itemToken as
-                              | Tokens.Text
-                              | Tokens.Paragraph;
-                            return (
-                              <Box key={itemIndex} flexDirection="row">
-                                <Text>
-                                  <InlineRenderer
-                                    tokens={it.tokens || [itemToken]}
-                                  />
-                                </Text>
-                              </Box>
-                            );
-                          }
-                          return (
-                            <BlockRenderer
-                              key={itemIndex}
-                              tokens={[itemToken]}
-                            />
-                          );
-                        })}
-                      </Box>
-                    </Box>
-                  );
-                })}
-              </Box>
-            );
-          }
-          case "blockquote": {
-            const t = token as Tokens.Blockquote;
-            return (
-              <Box
-                key={index}
-                flexDirection="column"
-                paddingLeft={2}
-                borderStyle="single"
-                borderLeft
-                borderRight={false}
-                borderTop={false}
-                borderBottom={false}
-                borderColor="gray"
-                marginBottom={1}
-              >
-                <BlockRenderer tokens={t.tokens} />
-              </Box>
-            );
-          }
-          case "hr":
-            return (
-              <Box key={index} marginBottom={1}>
-                <Text color="gray">{"─".repeat(20)}</Text>
-              </Box>
-            );
-          case "table":
-            return <TableRenderer key={index} token={token as Tokens.Table} />;
-          case "space":
-            return null;
-          default:
-            return (
-              <Box key={index} marginBottom={1}>
-                <Text>{token.raw}</Text>
-              </Box>
-            );
-        }
-      })}
-    </>
-  );
-};
+  override paragraph({ tokens }: Tokens.Paragraph): string {
+    const text = this.parser.parseInline(tokens);
+    return `\n${text}\n`;
+  }
+
+  override table(token: Tokens.Table): string {
+    const header = token.header.map((cell) => this.tablecell(cell)).join("");
+    const body = token.rows
+      .map((row) => row.map((cell) => this.tablecell(cell)).join("") + "\n")
+      .join("");
+    return `\n${header}\n${body}\n`;
+  }
+
+  override tablerow({ text }: Tokens.TableRow): string {
+    return text + "\n";
+  }
+
+  override tablecell(token: Tokens.TableCell): string {
+    const text = token.header ? chalk.bold(token.text) : token.text;
+    return text + " | ";
+  }
+
+  override strong({ tokens }: Tokens.Strong): string {
+    const text = this.parser.parseInline(tokens);
+    return chalk.bold(text);
+  }
+
+  override em({ tokens }: Tokens.Em): string {
+    const text = this.parser.parseInline(tokens);
+    return chalk.italic(text);
+  }
+
+  override codespan({ text }: Tokens.Codespan): string {
+    return chalk.yellow(text);
+  }
+
+  override br(): string {
+    return "\n";
+  }
+
+  override del({ tokens }: Tokens.Del): string {
+    const text = this.parser.parseInline(tokens);
+    return chalk.strikethrough(text);
+  }
+
+  override link({ href, tokens }: Tokens.Link): string {
+    const text = this.parser.parseInline(tokens);
+    const linkText = chalk.blue.underline(text);
+    const hrefText = chalk.gray(`(${href})`);
+    return `${linkText} ${hrefText}`;
+  }
+
+  override image({ href, tokens, text }: Tokens.Image): string {
+    const alt = this.parser.parseInline(tokens) || text;
+    return chalk.gray(`![${alt}](${href})`);
+  }
+
+  override text(token: Tokens.Text | Tokens.Escape): string {
+    return "tokens" in token && token.tokens
+      ? this.parser.parseInline(token.tokens)
+      : unescapeHtml(token.text);
+  }
+}
+
+const renderer = new AnsiRenderer();
 
-// Markdown component using custom Ink-based renderer
+// Markdown component using custom ANSI renderer
 export const Markdown = React.memo(({ children }: MarkdownProps) => {
-  const tokens = useMemo(() => marked.lexer(children), [children]);
+  const ansiContent = useMemo(() => {
+    return marked.parse(children, {
+      renderer,
+      gfm: true,
+      breaks: true,
+    }) as string;
+  }, [children]);
 
   return (
     <Box flexDirection="column">
-      <BlockRenderer tokens={tokens} />
+      <Text>{ansiContent.trim()}</Text>
     </Box>
   );
 });

package/src/components/MessageItem.tsx

@@ -4,7 +4,6 @@ import type { Message } from "wave-agent-sdk";
 import { MessageSource } from "wave-agent-sdk";
 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 { ReasoningDisplay } from "./ReasoningDisplay.js";
@@ -22,6 +21,7 @@ export const MessageItem = ({
   shouldShowHeader,
 }: MessageItemProps) => {
   if (message.blocks.length === 0) return null;
+
   return (
     <Box flexDirection="column" gap={1} marginTop={1}>
       {shouldShowHeader && (
@@ -79,8 +79,6 @@ export const MessageItem = ({
               </Box>
             )}
 
-            {block.type === "memory" && <MemoryDisplay block={block} />}
-
             {block.type === "compress" && (
               <CompressDisplay block={block} isExpanded={isExpanded} />
             )}