wave-code 0.0.6 → 0.0.10

package/src/components/Markdown.tsx

@@ -1,28 +1,341 @@
 import React, { useMemo } from "react";
-import { Text } from "ink";
-import { marked } from "marked";
-import TerminalRenderer from "marked-terminal";
+import { Box, Text, useStdout } from "ink";
+import { marked, type Token, type Tokens } from "marked";
 
 export interface MarkdownProps {
   children: string;
 }
 
-// Markdown component using marked-terminal with proper unescape option
-export const Markdown = React.memo(({ children }: MarkdownProps) => {
-  const result = useMemo(() => {
-    // Configure marked with TerminalRenderer using default options
-    marked.setOptions({
-      renderer: new TerminalRenderer({
-        // Use official unescape option to handle HTML entities
-        unescape: true,
-      }),
+const unescapeHtml = (html: string) => {
+  return html
+    .replace(/&/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/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":
+            return (
+              <Text key={index} color="blue" underline>
+                {token.tokens ? (
+                  <InlineRenderer tokens={token.tokens} />
+                ) : (
+                  unescapeHtml((token as Tokens.Link).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;
+
+  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)),
+    );
+
+    token.rows.forEach((row) => {
+      row.forEach((cell, i) => {
+        widths[i] = Math.min(
+          maxColWidth,
+          Math.max(widths[i] || minWidth, cell.text.length),
+        );
+      });
     });
 
-    const output = marked(children);
-    return typeof output === "string" ? output.trim() : "";
-  }, [children]);
+    const paddedWidths = widths.map((w) => w + 2);
+    const totalWidth = paddedWidths.reduce((a, b) => a + b, 0) + numCols + 1;
+
+    if (totalWidth <= terminalWidth) {
+      return paddedWidths;
+    }
+
+    // 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]);
+
+  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>
+  );
+};
+
+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"
+                flexWrap="wrap"
+              >
+                <InlineRenderer tokens={t.tokens} />
+              </Box>
+            );
+          }
+          case "code": {
+            const t = token as Tokens.Code;
+            if (t.lang !== undefined) {
+              const lines = token.raw.replace(/\n$/, "").split("\n");
+              const opening = lines[0];
+              const closing = lines[lines.length - 1];
+              const content = lines.slice(1, -1).join("\n");
+              return (
+                <Box
+                  key={index}
+                  flexDirection="column"
+                  paddingX={1}
+                  marginBottom={1}
+                >
+                  <Text color="gray">{opening}</Text>
+                  {content && <Text>{content}</Text>}
+                  <Text color="gray">{closing}</Text>
+                </Box>
+              );
+            }
+            return (
+              <Box
+                key={index}
+                flexDirection="column"
+                paddingX={1}
+                marginBottom={1}
+              >
+                <Text>{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"
+                                flexWrap="wrap"
+                              >
+                                <InlineRenderer
+                                  tokens={it.tokens || [itemToken]}
+                                />
+                              </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>
+            );
+        }
+      })}
+    </>
+  );
+};
+
+// Markdown component using custom Ink-based renderer
+export const Markdown = React.memo(({ children }: MarkdownProps) => {
+  const tokens = useMemo(() => marked.lexer(children), [children]);
 
-  return <Text>{result}</Text>;
+  return (
+    <Box flexDirection="column">
+      <BlockRenderer tokens={tokens} />
+    </Box>
+  );
 });
 
 // Add display name for debugging

package/src/components/MemoryDisplay.tsx

@@ -25,7 +25,7 @@ export const MemoryDisplay: React.FC<MemoryDisplayProps> = ({ block }) => {
     if (!isSuccess) return null;
 
     if (memoryType === "user") {
-      return `Memory saved to ${storagePath || "user-memory.md"}`;
+      return `Memory saved to ${storagePath || "AGENTS.md"}`;
     } else {
       return `Memory saved to ${storagePath || "AGENTS.md"}`;
     }

package/src/components/MessageItem.tsx

@@ -2,26 +2,24 @@ import React from "react";
 import { Box, Text } from "ink";
 import type { Message } from "wave-agent-sdk";
 import { MessageSource } from "wave-agent-sdk";
-import { DiffViewer } from "./DiffViewer.js";
 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";
 import { Markdown } from "./Markdown.js";
 
 export interface MessageItemProps {
   message: Message;
   isExpanded: boolean;
   shouldShowHeader: boolean;
-  isStatic?: boolean;
 }
 
 export const MessageItem = ({
   message,
   isExpanded,
   shouldShowHeader,
-  isStatic = true,
 }: MessageItemProps) => {
   if (message.blocks.length === 0) return null;
   return (
@@ -49,11 +47,7 @@ export const MessageItem = ({
                     🔗{" "}
                   </Text>
                 )}
-                {isStatic ? (
-                  <Markdown>{block.content}</Markdown>
-                ) : (
-                  <Text>{block.content.split("\n").slice(-10).join("\n")}</Text>
-                )}
+                <Markdown>{block.content}</Markdown>
               </Box>
             )}
 
@@ -63,10 +57,6 @@ export const MessageItem = ({
               </Box>
             )}
 
-            {block.type === "diff" && (
-              <DiffViewer block={block} isStatic={isStatic} />
-            )}
-
             {block.type === "command_output" && (
               <CommandOutputDisplay block={block} isExpanded={isExpanded} />
             )}
@@ -96,6 +86,8 @@ export const MessageItem = ({
             )}
 
             {block.type === "subagent" && <SubagentBlock block={block} />}
+
+            {block.type === "reasoning" && <ReasoningDisplay block={block} />}
           </Box>
         ))}
       </Box>

package/src/components/MessageList.tsx

@@ -75,7 +75,6 @@ export const MessageList = React.memo(
                 message={message}
                 shouldShowHeader={previousMessage?.role !== message.role}
                 isExpanded={isExpanded}
-                isStatic={true}
               />
             );
           }}
@@ -92,7 +91,6 @@ export const MessageList = React.memo(
                 message={message}
                 shouldShowHeader={previousMessage?.role !== message.role}
                 isExpanded={isExpanded}
-                isStatic={false}
               />
             </Box>
           );

package/src/components/ReasoningDisplay.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Box } from "ink";
+import type { ReasoningBlock } from "wave-agent-sdk";
+import { Markdown } from "./Markdown.js";
+
+interface ReasoningDisplayProps {
+  block: ReasoningBlock;
+}
+
+export const ReasoningDisplay: React.FC<ReasoningDisplayProps> = ({
+  block,
+}) => {
+  const { content } = block;
+
+  if (!content || !content.trim()) {
+    return null;
+  }
+
+  return (
+    <Box
+      borderRight={false}
+      borderTop={false}
+      borderBottom={false}
+      borderStyle="classic"
+      borderColor="blue"
+      paddingLeft={1}
+    >
+      <Box flexDirection="column">
+        <Markdown>{content}</Markdown>
+      </Box>
+    </Box>
+  );
+};

package/src/components/ToolResultDisplay.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
 import type { ToolBlock } from "wave-agent-sdk";
+import { DiffDisplay } from "./DiffDisplay.js";
 
 interface ToolResultDisplayProps {
   block: ToolBlock;
@@ -133,6 +134,9 @@ export const ToolResultDisplay: React.FC<ToolResultDisplayProps> = ({
           </Text>
         </Box>
       )}
+
+      {/* Diff display - handled by DiffDisplay component */}
+      <DiffDisplay toolBlock={block} />
     </Box>
   );
 };