wave-code 0.5.0 → 0.6.2

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

@@ -3,10 +3,8 @@ import { Box, Text } from "ink";
 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 { ToolDisplay } from "./ToolDisplay.js";
 import { CompressDisplay } from "./CompressDisplay.js";
-import { SubagentBlock } from "./SubagentBlock.js";
 import { ReasoningDisplay } from "./ReasoningDisplay.js";
 import { Markdown } from "./Markdown.js";
 
@@ -16,22 +14,11 @@ export interface MessageItemProps {
   shouldShowHeader: boolean;
 }
 
-export const MessageItem = ({
-  message,
-  isExpanded,
-  shouldShowHeader,
-}: MessageItemProps) => {
+export const MessageItem = ({ message, isExpanded }: MessageItemProps) => {
   if (message.blocks.length === 0) return null;
+
   return (
     <Box flexDirection="column" gap={1} marginTop={1}>
-      {shouldShowHeader && (
-        <Box>
-          <Text color={message.role === "user" ? "cyan" : "green"} bold>
-            {message.role === "user" ? "👤 You" : "🤖 Assistant"}
-          </Text>
-        </Box>
-      )}
-
       <Box flexDirection="column" gap={1}>
         {message.blocks.map((block, blockIndex) => (
           <Box key={blockIndex}>
@@ -39,15 +26,21 @@ export const MessageItem = ({
               <Box>
                 {block.customCommandContent && (
                   <Text color="cyan" bold>
-                    ⚡{" "}
+                    ⚡
                   </Text>
                 )}
                 {block.source === MessageSource.HOOK && (
                   <Text color="magenta" bold>
-                    🔗{" "}
+                    🔗
+                  </Text>
+                )}
+                {message.role === "user" ? (
+                  <Text backgroundColor="gray" color="white">
+                    {block.content}
                   </Text>
+                ) : (
+                  <Markdown>{block.content}</Markdown>
                 )}
-                <Markdown>{block.content}</Markdown>
               </Box>
             )}
 
@@ -62,7 +55,7 @@ export const MessageItem = ({
             )}
 
             {block.type === "tool" && (
-              <ToolResultDisplay block={block} isExpanded={isExpanded} />
+              <ToolDisplay block={block} isExpanded={isExpanded} />
             )}
 
             {block.type === "image" && (
@@ -79,14 +72,10 @@ export const MessageItem = ({
               </Box>
             )}
 
-            {block.type === "memory" && <MemoryDisplay block={block} />}
-
             {block.type === "compress" && (
               <CompressDisplay block={block} isExpanded={isExpanded} />
             )}
 
-            {block.type === "subagent" && <SubagentBlock block={block} />}
-
             {block.type === "reasoning" && <ReasoningDisplay block={block} />}
           </Box>
         ))}