wave-code 0.7.0 → 0.7.1

package/src/components/DiffDisplay.tsx

@@ -7,11 +7,13 @@ import { diffLines, diffWords } from "diff";
 interface DiffDisplayProps {
   toolName?: string;
   parameters?: string;
+  startLineNumber?: number;
 }
 
 export const DiffDisplay: React.FC<DiffDisplayProps> = ({
   toolName,
   parameters,
+  startLineNumber,
 }) => {
   const showDiff =
     toolName && [WRITE_TOOL_NAME, EDIT_TOOL_NAME].includes(toolName);
@@ -21,12 +23,12 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     if (!showDiff || !toolName || !parameters) return [];
     try {
       // Use local transformation with JSON parsing and type guards
-      return transformToolBlockToChanges(toolName, parameters);
+      return transformToolBlockToChanges(toolName, parameters, startLineNumber);
     } catch (error) {
       console.warn("Error transforming tool block to changes:", error);
       return [];
     }
-  }, [toolName, parameters, showDiff]);
+  }, [toolName, parameters, showDiff, startLineNumber]);
 
   // Render word-level diff between two lines of text
   const renderWordLevelDiff = (
@@ -100,6 +102,43 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
     try {
       if (changes.length === 0) return null;
 
+      const maxLineNum = changes.reduce((max, change) => {
+        const oldLines = (change.oldContent || "").split("\n").length;
+        const newLines = (change.newContent || "").split("\n").length;
+        const start = change.startLineNumber || 1;
+        // For Edit tool, the diff might show context lines before/after the change.
+        // The startLineNumber is the line where old_string starts.
+        // diffLines will include context lines if they are part of the change object.
+        // However, our transformEditParameters currently only puts old_string/new_string.
+        // If we ever support context lines in the Change object, we need to be careful.
+        return Math.max(max, start + oldLines, start + newLines);
+      }, 0);
+      const maxDigits = Math.max(2, maxLineNum.toString().length);
+
+      const renderLine = (
+        oldLineNum: number | null,
+        newLineNum: number | null,
+        prefix: string,
+        content: React.ReactNode,
+        color: string,
+        key: string,
+      ) => {
+        const formatNum = (num: number | null) =>
+          num === null
+            ? " ".repeat(maxDigits)
+            : num.toString().padStart(maxDigits);
+
+        return (
+          <Box key={key} flexDirection="row">
+            <Text color="gray">{formatNum(oldLineNum)} </Text>
+            <Text color="gray">{formatNum(newLineNum)} </Text>
+            <Text color="gray">| </Text>
+            <Text color={color}>{prefix}</Text>
+            <Text color={color}>{content}</Text>
+          </Box>
+        );
+      };
+
       const allElements: React.ReactNode[] = [];
 
       changes.forEach((change, changeIndex) => {
@@ -110,45 +149,46 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
             change.newContent || "",
           );
 
+          let oldLineNum = change.startLineNumber || 1;
+          let newLineNum = change.startLineNumber || 1;
+
           // Process line diffs
           const diffElements: React.ReactNode[] = [];
           lineDiffs.forEach((part, partIndex) => {
+            const lines = part.value.split("\n");
+            // diffLines might return a trailing empty string if the content ends with a newline
+            if (lines[lines.length - 1] === "") {
+              lines.pop();
+            }
+
             if (part.added) {
-              const lines = part.value
-                .split("\n")
-                .filter((line) => line !== "");
               lines.forEach((line, lineIndex) => {
                 diffElements.push(
-                  <Box
-                    key={`add-${changeIndex}-${partIndex}-${lineIndex}`}
-                    flexDirection="row"
-                  >
-                    <Text color="green">+</Text>
-                    <Text color="green">{line}</Text>
-                  </Box>,
+                  renderLine(
+                    null,
+                    newLineNum++,
+                    "+",
+                    line,
+                    "green",
+                    `add-${changeIndex}-${partIndex}-${lineIndex}`,
+                  ),
                 );
               });
             } else if (part.removed) {
-              const lines = part.value
-                .split("\n")
-                .filter((line) => line !== "");
               lines.forEach((line, lineIndex) => {
                 diffElements.push(
-                  <Box
-                    key={`remove-${changeIndex}-${partIndex}-${lineIndex}`}
-                    flexDirection="row"
-                  >
-                    <Text color="red">-</Text>
-                    <Text color="red">{line}</Text>
-                  </Box>,
+                  renderLine(
+                    oldLineNum++,
+                    null,
+                    "-",
+                    line,
+                    "red",
+                    `remove-${changeIndex}-${partIndex}-${lineIndex}`,
+                  ),
                 );
               });
             } else {
               // Context lines - show unchanged content
-              const lines = part.value
-                .split("\n")
-                .filter((line) => line !== "");
-
               const isFirstBlock = partIndex === 0;
               const isLastBlock = partIndex === lineDiffs.length - 1;
 
@@ -159,6 +199,9 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
               if (isFirstBlock && !isLastBlock) {
                 // First block: keep last 3
                 if (lines.length > 3) {
+                  const skipCount = lines.length - 3;
+                  oldLineNum += skipCount;
+                  newLineNum += skipCount;
                   linesToDisplay = lines.slice(-3);
                   showEllipsisTop = true;
                 }
@@ -174,15 +217,12 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
                   linesToDisplay = [...lines.slice(0, 3), ...lines.slice(-3)];
                   showEllipsisTop = false; // We'll put ellipsis in the middle
                 }
-              } else if (isFirstBlock && isLastBlock) {
-                // Only one block (no changes?) - keep all or apply a general limit
-                // For now, let's keep all if it's the only block
               }
 
               if (showEllipsisTop) {
                 diffElements.push(
                   <Box key={`ellipsis-top-${changeIndex}-${partIndex}`}>
-                    <Text color="gray"> ...</Text>
+                    <Text color="gray">{" ".repeat(maxDigits * 2 + 2)}...</Text>
                   </Box>,
                 );
               }
@@ -195,28 +235,39 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
                   lines.length > 6 &&
                   lineIndex === 3
                 ) {
+                  const skipCount = lines.length - 6;
+                  oldLineNum += skipCount;
+                  newLineNum += skipCount;
                   diffElements.push(
                     <Box key={`ellipsis-mid-${changeIndex}-${partIndex}`}>
-                      <Text color="gray"> ...</Text>
+                      <Text color="gray">
+                        {" ".repeat(maxDigits * 2 + 2)}...
+                      </Text>
                     </Box>,
                   );
                 }
 
                 diffElements.push(
-                  <Box
-                    key={`context-${changeIndex}-${partIndex}-${lineIndex}`}
-                    flexDirection="row"
-                  >
-                    <Text color="white"> </Text>
-                    <Text color="white">{line}</Text>
-                  </Box>,
+                  renderLine(
+                    oldLineNum++,
+                    newLineNum++,
+                    " ",
+                    line,
+                    "white",
+                    `context-${changeIndex}-${partIndex}-${lineIndex}`,
+                  ),
                 );
               });
 
               if (showEllipsisBottom) {
+                const skipCount = lines.length - linesToDisplay.length;
+                // We don't increment oldLineNum/newLineNum here because they are already incremented in the loop
+                // But we need to account for the lines we skipped at the end of this block
+                oldLineNum += skipCount;
+                newLineNum += skipCount;
                 diffElements.push(
                   <Box key={`ellipsis-bottom-${changeIndex}-${partIndex}`}>
-                    <Text color="gray"> ...</Text>
+                    <Text color="gray">{" ".repeat(maxDigits * 2 + 2)}...</Text>
                   </Box>,
                 );
               }
@@ -235,6 +286,8 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
           ) {
             const removedText = extractTextFromElement(diffElements[0]);
             const addedText = extractTextFromElement(diffElements[1]);
+            const oldLineNumVal = extractOldLineNumFromElement(diffElements[0]);
+            const newLineNumVal = extractNewLineNumFromElement(diffElements[1]);
 
             if (removedText && addedText) {
               const { removedParts, addedParts } = renderWordLevelDiff(
@@ -244,19 +297,24 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
               );
 
               allElements.push(
-                <Box
-                  key={`word-diff-removed-${changeIndex}`}
-                  flexDirection="row"
-                >
-                  <Text color="red">-</Text>
-                  {removedParts}
-                </Box>,
+                renderLine(
+                  oldLineNumVal,
+                  null,
+                  "-",
+                  removedParts,
+                  "red",
+                  `word-diff-removed-${changeIndex}`,
+                ),
               );
               allElements.push(
-                <Box key={`word-diff-added-${changeIndex}`} flexDirection="row">
-                  <Text color="green">+</Text>
-                  {addedParts}
-                </Box>,
+                renderLine(
+                  null,
+                  newLineNumVal,
+                  "+",
+                  addedParts,
+                  "green",
+                  `word-diff-added-${changeIndex}`,
+                ),
               );
             } else {
               allElements.push(...diffElements);
@@ -298,9 +356,6 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
   return (
     <Box flexDirection="column">
       <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
-        <Text color="cyan" bold>
-          Diff:
-        </Text>
         {renderExpandedDiff()}
       </Box>
     </Box>
@@ -312,16 +367,64 @@ const extractTextFromElement = (element: React.ReactNode): string | null => {
   if (!React.isValidElement(element)) return null;
 
   // Navigate through Box -> Text structure
+  // Our new structure is: Box -> Text (old), Text (new), Text (|), Text (prefix), Text (content)
+  const children = (
+    element.props as unknown as { children?: React.ReactNode[] }
+  ).children;
+  if (Array.isArray(children) && children.length >= 5) {
+    const textElement = children[4]; // Fifth child should be the Text with content
+    if (React.isValidElement(textElement)) {
+      const textChildren = (textElement.props as Record<string, unknown>)
+        .children;
+      return Array.isArray(textChildren)
+        ? textChildren.join("")
+        : String(textChildren || "");
+    }
+  }
+  return null;
+};
+
+const extractOldLineNumFromElement = (
+  element: React.ReactNode,
+): number | null => {
+  if (!React.isValidElement(element)) return null;
+  const children = (
+    element.props as unknown as { children?: React.ReactNode[] }
+  ).children;
+  if (Array.isArray(children) && children.length >= 1) {
+    const textElement = children[0];
+    if (React.isValidElement(textElement)) {
+      const textChildren = (textElement.props as Record<string, unknown>)
+        .children;
+      const val = (
+        Array.isArray(textChildren)
+          ? textChildren.join("")
+          : String(textChildren || "")
+      ).trim();
+      return val ? parseInt(val, 10) : null;
+    }
+  }
+  return null;
+};
+
+const extractNewLineNumFromElement = (
+  element: React.ReactNode,
+): number | null => {
+  if (!React.isValidElement(element)) return null;
   const children = (
     element.props as unknown as { children?: React.ReactNode[] }
   ).children;
   if (Array.isArray(children) && children.length >= 2) {
-    const textElement = children[1]; // Second child should be the Text with content
-    if (
-      React.isValidElement(textElement) &&
-      (textElement.props as unknown as { children?: string }).children
-    ) {
-      return (textElement.props as unknown as { children: string }).children;
+    const textElement = children[1];
+    if (React.isValidElement(textElement)) {
+      const textChildren = (textElement.props as Record<string, unknown>)
+        .children;
+      const val = (
+        Array.isArray(textChildren)
+          ? textChildren.join("")
+          : String(textChildren || "")
+      ).trim();
+      return val ? parseInt(val, 10) : null;
     }
   }
   return null;

package/src/components/HistorySearch.tsx

@@ -14,38 +14,34 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
   onCancel,
 }) => {
   const MAX_VISIBLE_ITEMS = 5;
-  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]);
+  const [state, setState] = useState({
+    selectedIndex: 0,
+    entries: [] as PromptEntry[],
+  });
 
   useEffect(() => {
     const fetchHistory = async () => {
       const results = await PromptHistoryManager.searchHistory(searchQuery);
       const limitedResults = results.slice(0, 20);
-      setEntries(limitedResults); // Limit to 20 results
-      setSelectedIndex(0);
+      setState({
+        entries: limitedResults,
+        selectedIndex: 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);
-      }
+      setState((prev) => {
+        if (
+          prev.entries.length > 0 &&
+          prev.selectedIndex < prev.entries.length
+        ) {
+          onSelect(prev.entries[prev.selectedIndex].prompt);
+        }
+        return prev;
+      });
       return;
     }
 
@@ -55,18 +51,27 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
     }
 
     if (key.upArrow) {
-      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      setState((prev) => ({
+        ...prev,
+        selectedIndex: Math.max(0, prev.selectedIndex - 1),
+      }));
       return;
     }
 
     if (key.downArrow) {
-      setSelectedIndex((prev) =>
-        Math.min(entriesRef.current.length - 1, prev + 1),
-      );
+      setState((prev) => ({
+        ...prev,
+        selectedIndex: Math.min(
+          prev.entries.length - 1,
+          prev.selectedIndex + 1,
+        ),
+      }));
       return;
     }
   });
 
+  const { entries, selectedIndex } = state;
+
   if (entries.length === 0) {
     return (
       <Box
@@ -147,6 +152,7 @@ export const HistorySearch: React.FC<HistorySearchProps> = ({
                   backgroundColor={isSelected ? "blue" : undefined}
                   wrap="truncate-end"
                 >
+                  {isSelected ? "> " : "  "}
                   {entry.prompt.replace(/\n/g, " ")}
                 </Text>
               </Box>

package/src/components/Markdown.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import { Box, Text } from "ink";
 import { Renderer, marked, type Tokens } from "marked";
 import chalk from "chalk";
+import { highlightToAnsi } from "../utils/highlightUtils.js";
 
 export interface MarkdownProps {
   children: string;
@@ -21,7 +22,8 @@ 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 highlighted = highlightToAnsi(text, lang);
+    return `\n${chalk.gray(prefix)}\n${highlighted}\n${chalk.gray(suffix)}\n`;
   }
 
   override blockquote({ tokens }: Tokens.Blockquote): string {

package/src/components/McpManager.tsx

@@ -65,76 +65,68 @@ export const McpManager: React.FC<McpManagerProps> = ({
   };
 
   useInput((input, key) => {
-    if (viewMode === "list") {
-      // List mode navigation
-      if (key.return) {
-        if (servers.length > 0 && selectedIndex < servers.length) {
-          setViewMode("detail");
+    if (key.return) {
+      setViewMode((prevMode) => {
+        if (prevMode === "list") {
+          setSelectedIndex((prevIndex) => {
+            if (servers.length > 0 && prevIndex < servers.length) {
+              // We can't call setViewMode here because we're already in a setViewMode call
+              // But we can return the new mode from the outer setViewMode
+            }
+            return prevIndex;
+          });
+          return "detail";
         }
-        return;
-      }
+        return prevMode;
+      });
+      return;
+    }
 
-      if (key.escape) {
+    if (key.escape) {
+      setViewMode((prev) => {
+        if (prev === "detail") {
+          return "list";
+        }
         onCancel();
-        return;
-      }
-
-      if (key.upArrow) {
-        setSelectedIndex(Math.max(0, selectedIndex - 1));
-        return;
-      }
-
-      if (key.downArrow) {
-        setSelectedIndex(Math.min(servers.length - 1, selectedIndex + 1));
-        return;
-      }
+        return prev;
+      });
+      return;
+    }
 
-      // Hotkeys for server actions
-      if (
-        input === "c" &&
-        servers.length > 0 &&
-        selectedIndex < servers.length
-      ) {
-        const server = servers[selectedIndex];
-        if (server.status === "disconnected" || server.status === "error") {
-          handleConnect(server.name);
-        }
-        return;
-      }
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      return;
+    }
 
-      if (
-        input === "d" &&
-        servers.length > 0 &&
-        selectedIndex < servers.length
-      ) {
-        const server = servers[selectedIndex];
-        if (server.status === "connected") {
-          handleDisconnect(server.name);
-        }
-        return;
-      }
-    } else if (viewMode === "detail") {
-      // Detail mode navigation
-      if (key.escape) {
-        setViewMode("list");
-        return;
-      }
+    if (key.downArrow) {
+      setSelectedIndex((prev) => Math.min(servers.length - 1, prev + 1));
+      return;
+    }
 
-      if (selectedServer) {
+    // Hotkeys for server actions
+    if (input === "c") {
+      setSelectedIndex((prev) => {
+        const server = servers[prev];
         if (
-          input === "c" &&
-          (selectedServer.status === "disconnected" ||
-            selectedServer.status === "error")
+          server &&
+          (server.status === "disconnected" || server.status === "error")
         ) {
-          handleConnect(selectedServer.name);
-          return;
+          handleConnect(server.name);
         }
+        return prev;
+      });
+      return;
+    }
 
-        if (input === "d" && selectedServer.status === "connected") {
-          handleDisconnect(selectedServer.name);
-          return;
+    if (input === "d") {
+      setSelectedIndex((prev) => {
+        const server = servers[prev];
+        if (server && server.status === "connected") {
+          handleDisconnect(server.name);
         }
-      }
+        return prev;
+      });
+      return;
     }
   });
 

package/src/components/MessageBlockItem.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Message, MessageBlock } from "wave-agent-sdk";
+import { MessageSource } from "wave-agent-sdk";
+import { CommandOutputDisplay } from "./CommandOutputDisplay.js";
+import { ToolDisplay } from "./ToolDisplay.js";
+import { CompressDisplay } from "./CompressDisplay.js";
+import { ReasoningDisplay } from "./ReasoningDisplay.js";
+import { Markdown } from "./Markdown.js";
+
+export interface MessageBlockItemProps {
+  block: MessageBlock;
+  message: Message;
+  isExpanded: boolean;
+  paddingTop?: number;
+}
+
+export const MessageBlockItem = ({
+  block,
+  message,
+  isExpanded,
+  paddingTop = 0,
+}: MessageBlockItemProps) => {
+  return (
+    <Box flexDirection="column" paddingTop={paddingTop}>
+      {block.type === "text" && block.content.trim() && (
+        <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>
+          )}
+        </Box>
+      )}
+
+      {block.type === "error" && (
+        <Box>
+          <Text color="red">Error: {block.content}</Text>
+        </Box>
+      )}
+
+      {block.type === "command_output" && (
+        <CommandOutputDisplay block={block} isExpanded={isExpanded} />
+      )}
+
+      {block.type === "tool" && (
+        <ToolDisplay block={block} isExpanded={isExpanded} />
+      )}
+
+      {block.type === "image" && (
+        <Box>
+          <Text color="magenta" bold>
+            # Image
+          </Text>
+          {block.imageUrls && block.imageUrls.length > 0 && (
+            <Text color="gray" dimColor>
+              {" "}
+              ({block.imageUrls.length})
+            </Text>
+          )}
+        </Box>
+      )}
+
+      {block.type === "compress" && (
+        <CompressDisplay block={block} isExpanded={isExpanded} />
+      )}
+
+      {block.type === "reasoning" && <ReasoningDisplay block={block} />}
+    </Box>
+  );
+};