wave-code 0.4.0 → 0.6.1

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,334 +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") {
-                            const it = itemToken as Tokens.Text;
-                            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} />
             )}

package/src/components/MessageList.tsx

@@ -7,9 +7,8 @@ export interface MessageListProps {
   messages: Message[];
   isLoading?: boolean;
   isCommandRunning?: boolean;
-  isCompressing?: boolean;
-  latestTotalTokens?: number;
   isExpanded?: boolean;
+  forceStaticLastMessage?: boolean;
 }
 
 export const MessageList = React.memo(
@@ -17,15 +16,16 @@ export const MessageList = React.memo(
     messages,
     isLoading = false,
     isCommandRunning = false,
-    isCompressing = false,
-    latestTotalTokens = 0,
     isExpanded = false,
+    forceStaticLastMessage = false,
   }: MessageListProps) => {
     // Empty message state
     if (messages.length === 0) {
       return (
-        <Box flexDirection="column" paddingY={1}>
-          <Text color="gray">Welcome to WAVE Code Assistant!</Text>
+        <Box flexDirection="column" gap={1}>
+          <Box flexDirection="column" paddingY={1}>
+            <Text color="gray">Welcome to WAVE Code Assistant!</Text>
+          </Box>
         </Box>
       );
     }
@@ -42,7 +42,8 @@ export const MessageList = React.memo(
       : 0;
 
     // Compute which messages to render statically vs dynamically
-    const shouldRenderLastDynamic = isLoading || isCommandRunning;
+    const shouldRenderLastDynamic =
+      !forceStaticLastMessage && (isLoading || isCommandRunning);
     const staticMessages = shouldRenderLastDynamic
       ? displayMessages.slice(0, -1)
       : displayMessages;
@@ -52,7 +53,7 @@ export const MessageList = React.memo(
         : [];
 
     return (
-      <Box flexDirection="column" gap={1}>
+      <Box flexDirection="column" gap={1} paddingBottom={1}>
         {/* Show omitted message count when limiting */}
         {omittedCount > 0 && (
           <Box>
@@ -86,7 +87,7 @@ export const MessageList = React.memo(
           const previousMessage =
             messageIndex > 0 ? displayMessages[messageIndex - 1] : undefined;
           return (
-            <Box key={`dynamic-${index}`} marginTop={-1}>
+            <Box key={`dynamic-${index}`}>
               <MessageItem
                 message={message}
                 shouldShowHeader={previousMessage?.role !== message.role}
@@ -95,64 +96,6 @@ export const MessageList = React.memo(
             </Box>
           );
         })}
-
-        {(isLoading || isCommandRunning || isCompressing) && (
-          <Box flexDirection="column" gap={1}>
-            {isLoading && (
-              <Box>
-                <Text color="yellow">💭 AI is thinking... </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>
-        )}
-
-        {/* Bottom info and shortcut key hints */}
-        {messages.length > 0 && (
-          <Box>
-            <Box justifyContent="space-between" width="100%">
-              <Box>
-                <Text color="gray">
-                  Messages {messages.length}
-                  {latestTotalTokens > 0 && (
-                    <>
-                      <Text color="gray" dimColor>
-                        {" "}
-                        |{" "}
-                      </Text>
-                      <Text color="blue" bold>
-                        {latestTotalTokens.toLocaleString()}
-                      </Text>
-                      <Text color="gray" dimColor>
-                        {" "}
-                        tokens
-                      </Text>
-                    </>
-                  )}
-                </Text>
-              </Box>
-              <Text color="gray" dimColor>
-                <Text color="cyan">Ctrl+O</Text> Toggle{" "}
-                {isExpanded ? "Collapse" : "Expand"}
-              </Text>
-            </Box>
-          </Box>
-        )}
       </Box>
     );
   },

package/src/components/PlanDisplay.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
-import { Box, Text, useStdout } from "ink";
+import React from "react";
+import { Box } from "ink";
 import { Markdown } from "./Markdown.js";
 
 interface PlanDisplayProps {
@@ -7,39 +7,11 @@ interface PlanDisplayProps {
   isExpanded?: boolean;
 }
 
-export const PlanDisplay: React.FC<PlanDisplayProps> = ({
-  plan,
-  isExpanded = false,
-}) => {
-  const { stdout } = useStdout();
-  const maxHeight = useMemo(() => {
-    // Similar to DiffDisplay.tsx maxHeight calculation
-    return Math.max(5, (stdout?.rows || 24) - 20);
-  }, [stdout?.rows]);
-
-  const lines = useMemo(() => plan.split("\n"), [plan]);
-  const isOverflowing = !isExpanded && lines.length > maxHeight;
-
+export const PlanDisplay: React.FC<PlanDisplayProps> = ({ plan }) => {
   return (
     <Box flexDirection="column" marginTop={1}>
-      <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
-        <Text color="cyan" bold>
-          Plan Content:
-        </Text>
-        <Box
-          flexDirection="column"
-          height={isOverflowing ? maxHeight : undefined}
-          overflow="hidden"
-        >
-          <Markdown>{plan}</Markdown>
-        </Box>
-        {isOverflowing && (
-          <Box marginTop={1}>
-            <Text color="yellow" dimColor>
-              ... (plan truncated, {lines.length} lines total)
-            </Text>
-          </Box>
-        )}
+      <Box flexDirection="column">
+        <Markdown>{plan}</Markdown>
       </Box>
     </Box>
   );

package/src/components/PluginDetail.tsx

@@ -23,8 +23,8 @@ export const PluginDetail: React.FC = () => {
     );
 
   const INSTALLED_ACTIONS = [
-    { id: "uninstall", label: "Uninstall plugin" },
     { id: "update", label: "Update plugin (reinstall)" },
+    { id: "uninstall", label: "Uninstall plugin" },
   ] as const;
 
   const isInstalledAndEnabled = plugin && "enabled" in plugin && plugin.enabled;