wave-code 1.0.9 → 1.1.0

package/src/components/DiffDisplay.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { Box, Text } from "ink";
 import { WRITE_TOOL_NAME, EDIT_TOOL_NAME } from "wave-agent-sdk";
+import type { Change } from "wave-agent-sdk";
 import { transformToolBlockToChanges } from "../utils/toolParameterTransforms.js";
 import { diffLines, diffWords } from "diff";
 
@@ -8,351 +9,384 @@ interface DiffDisplayProps {
   toolName?: string;
   parameters?: string;
   startLineNumber?: number;
+  /** Return the diff as an array of line elements instead of a rendered Box,
+   *  so callers can slice/scroll through the lines. */
+  asLines?: boolean;
 }
 
-export const DiffDisplay: React.FC<DiffDisplayProps> = ({
-  toolName,
-  parameters,
-  startLineNumber,
-}) => {
-  const showDiff =
-    toolName && [WRITE_TOOL_NAME, EDIT_TOOL_NAME].includes(toolName);
+// Render word-level diff between two lines of text
+const renderWordLevelDiff = (
+  oldLine: string,
+  newLine: string,
+  keyPrefix: string,
+) => {
+  try {
+    const changes = diffWords(oldLine, newLine);
 
-  // Diff detection and transformation using typed parameters
-  const changes = useMemo(() => {
-    if (!showDiff || !toolName || !parameters) return [];
-    try {
-      // Use local transformation with JSON parsing and type guards
-      return transformToolBlockToChanges(toolName, parameters, startLineNumber);
-    } catch (error) {
-      console.warn("Error transforming tool block to changes:", error);
-      return [];
-    }
-  }, [toolName, parameters, showDiff, startLineNumber]);
-
-  // Render word-level diff between two lines of text
-  const renderWordLevelDiff = (
-    oldLine: string,
-    newLine: string,
-    keyPrefix: string,
-  ) => {
-    try {
-      const changes = diffWords(oldLine, newLine);
-
-      const removedParts: React.ReactNode[] = [];
-      const addedParts: React.ReactNode[] = [];
-
-      changes.forEach((part, index) => {
-        if (part.removed) {
-          removedParts.push(
-            <Text
-              key={`removed-${keyPrefix}-${index}`}
-              color="black"
-              backgroundColor="red"
-            >
-              {part.value}
-            </Text>,
-          );
-        } else if (part.added) {
-          addedParts.push(
-            <Text
-              key={`added-${keyPrefix}-${index}`}
-              color="black"
-              backgroundColor="green"
-            >
-              {part.value}
-            </Text>,
-          );
-        } else {
-          // Unchanged parts
-          removedParts.push(
-            <Text key={`removed-unchanged-${keyPrefix}-${index}`} color="red">
-              {part.value}
-            </Text>,
-          );
-          addedParts.push(
-            <Text key={`added-unchanged-${keyPrefix}-${index}`} color="green">
-              {part.value}
-            </Text>,
-          );
-        }
-      });
+    const removedParts: React.ReactNode[] = [];
+    const addedParts: React.ReactNode[] = [];
 
-      return { removedParts, addedParts };
-    } catch (error) {
-      console.warn("Error rendering word-level diff:", error);
-      // Fallback to simple line display
-      return {
-        removedParts: [
-          <Text key={`fallback-removed-${keyPrefix}`} color="red">
-            {oldLine}
+    changes.forEach((part, index) => {
+      if (part.removed) {
+        removedParts.push(
+          <Text
+            key={`removed-${keyPrefix}-${index}`}
+            color="black"
+            backgroundColor="red"
+          >
+            {part.value}
           </Text>,
-        ],
-        addedParts: [
-          <Text key={`fallback-added-${keyPrefix}`} color="green">
-            {newLine}
+        );
+      } else if (part.added) {
+        addedParts.push(
+          <Text
+            key={`added-${keyPrefix}-${index}`}
+            color="black"
+            backgroundColor="green"
+          >
+            {part.value}
+          </Text>,
+        );
+      } else {
+        // Unchanged parts
+        removedParts.push(
+          <Text key={`removed-unchanged-${keyPrefix}-${index}`} color="red">
+            {part.value}
+          </Text>,
+        );
+        addedParts.push(
+          <Text key={`added-unchanged-${keyPrefix}-${index}`} color="green">
+            {part.value}
           </Text>,
-        ],
-      };
-    }
-  };
+        );
+      }
+    });
 
-  // Render expanded diff display
-  const renderExpandedDiff = () => {
-    try {
-      if (changes.length === 0) return null;
+    return { removedParts, addedParts };
+  } catch (error) {
+    console.warn("Error rendering word-level diff:", error);
+    // Fallback to simple line display
+    return {
+      removedParts: [
+        <Text key={`fallback-removed-${keyPrefix}`} color="red">
+          {oldLine}
+        </Text>,
+      ],
+      addedParts: [
+        <Text key={`fallback-added-${keyPrefix}`} color="green">
+          {newLine}
+        </Text>,
+      ],
+    };
+  }
+};
 
-      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);
+/**
+ * Render the diff as an array of line elements (one ReactNode per row), so
+ * callers can slice/scroll through the lines. Returns an empty array when the
+ * tool doesn't produce a diff or the content can't be parsed.
+ */
+export function buildDiffLines(changes: Change[]): React.ReactNode[] {
+  try {
+    if (changes.length === 0) return [];
 
-      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);
+    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);
 
-        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 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);
 
-      const allElements: React.ReactNode[] = [];
+      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>
+      );
+    };
 
-      changes.forEach((change, changeIndex) => {
-        try {
-          // Get line-level diff to understand the structure
-          const lineDiffs = diffLines(
-            change.oldContent || "",
-            change.newContent || "",
-          );
+    const allElements: React.ReactNode[] = [];
 
-          let oldLineNum = change.startLineNumber || 1;
-          let newLineNum = change.startLineNumber || 1;
+    changes.forEach((change, changeIndex) => {
+      try {
+        // Get line-level diff to understand the structure
+        const lineDiffs = diffLines(
+          change.oldContent || "",
+          change.newContent || "",
+        );
 
-          // Process line diffs
-          const diffElements: React.ReactNode[] = [];
-          for (let i = 0; i < lineDiffs.length; i++) {
-            const part = lineDiffs[i];
-            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();
-            }
+        let oldLineNum = change.startLineNumber || 1;
+        let newLineNum = change.startLineNumber || 1;
 
-            if (part.removed) {
-              // Look ahead for an added block
-              if (i + 1 < lineDiffs.length && lineDiffs[i + 1].added) {
-                const nextPart = lineDiffs[i + 1];
-                const addedLines = nextPart.value.split("\n");
-                if (addedLines[addedLines.length - 1] === "") {
-                  addedLines.pop();
-                }
+        // Process line diffs
+        const diffElements: React.ReactNode[] = [];
+        for (let i = 0; i < lineDiffs.length; i++) {
+          const part = lineDiffs[i];
+          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 (lines.length === addedLines.length) {
-                  // Word-level diffing
-                  lines.forEach((line, lineIndex) => {
-                    const { removedParts, addedParts } = renderWordLevelDiff(
-                      line,
-                      addedLines[lineIndex],
-                      `word-${changeIndex}-${i}-${lineIndex}`,
-                    );
-                    diffElements.push(
-                      renderLine(
-                        oldLineNum++,
-                        null,
-                        "-",
-                        removedParts,
-                        "red",
-                        `remove-${changeIndex}-${i}-${lineIndex}`,
-                      ),
-                    );
-                    diffElements.push(
-                      renderLine(
-                        null,
-                        newLineNum++,
-                        "+",
-                        addedParts,
-                        "green",
-                        `add-${changeIndex}-${i}-${lineIndex}`,
-                      ),
-                    );
-                  });
-                  i++; // Skip the added block
-                  continue;
-                }
+          if (part.removed) {
+            // Look ahead for an added block
+            if (i + 1 < lineDiffs.length && lineDiffs[i + 1].added) {
+              const nextPart = lineDiffs[i + 1];
+              const addedLines = nextPart.value.split("\n");
+              if (addedLines[addedLines.length - 1] === "") {
+                addedLines.pop();
               }
 
-              // Fallback to standard removed rendering
-              lines.forEach((line, lineIndex) => {
-                diffElements.push(
-                  renderLine(
-                    oldLineNum++,
-                    null,
-                    "-",
+              if (lines.length === addedLines.length) {
+                // Word-level diffing
+                lines.forEach((line, lineIndex) => {
+                  const { removedParts, addedParts } = renderWordLevelDiff(
                     line,
-                    "red",
-                    `remove-${changeIndex}-${i}-${lineIndex}`,
-                  ),
-                );
-              });
-            } else if (part.added) {
-              lines.forEach((line, lineIndex) => {
-                diffElements.push(
-                  renderLine(
-                    null,
-                    newLineNum++,
-                    "+",
-                    line,
-                    "green",
-                    `add-${changeIndex}-${i}-${lineIndex}`,
-                  ),
-                );
-              });
-            } else {
-              // Context lines - show unchanged content
-              const isFirstBlock = i === 0;
-              const isLastBlock = i === lineDiffs.length - 1;
+                    addedLines[lineIndex],
+                    `word-${changeIndex}-${i}-${lineIndex}`,
+                  );
+                  diffElements.push(
+                    renderLine(
+                      oldLineNum++,
+                      null,
+                      "-",
+                      removedParts,
+                      "red",
+                      `remove-${changeIndex}-${i}-${lineIndex}`,
+                    ),
+                  );
+                  diffElements.push(
+                    renderLine(
+                      null,
+                      newLineNum++,
+                      "+",
+                      addedParts,
+                      "green",
+                      `add-${changeIndex}-${i}-${lineIndex}`,
+                    ),
+                  );
+                });
+                i++; // Skip the added block
+                continue;
+              }
+            }
 
-              let linesToDisplay = lines;
-              let showEllipsisTop = false;
-              let showEllipsisBottom = false;
+            // Fallback to standard removed rendering
+            lines.forEach((line, lineIndex) => {
+              diffElements.push(
+                renderLine(
+                  oldLineNum++,
+                  null,
+                  "-",
+                  line,
+                  "red",
+                  `remove-${changeIndex}-${i}-${lineIndex}`,
+                ),
+              );
+            });
+          } else if (part.added) {
+            lines.forEach((line, lineIndex) => {
+              diffElements.push(
+                renderLine(
+                  null,
+                  newLineNum++,
+                  "+",
+                  line,
+                  "green",
+                  `add-${changeIndex}-${i}-${lineIndex}`,
+                ),
+              );
+            });
+          } else {
+            // Context lines - show unchanged content
+            const isFirstBlock = i === 0;
+            const isLastBlock = i === lineDiffs.length - 1;
 
-              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;
-                }
-              } else if (isLastBlock && !isFirstBlock) {
-                // Last block: keep first 3
-                if (lines.length > 3) {
-                  linesToDisplay = lines.slice(0, 3);
-                  showEllipsisBottom = true;
-                }
-              } else if (!isFirstBlock && !isLastBlock) {
-                // Middle block: keep first 3 and last 3
-                if (lines.length > 6) {
-                  linesToDisplay = [...lines.slice(0, 3), ...lines.slice(-3)];
-                  showEllipsisTop = false; // We'll put ellipsis in the middle
-                }
-              }
+            let linesToDisplay = lines;
+            let showEllipsisTop = false;
+            let showEllipsisBottom = false;
 
-              if (showEllipsisTop) {
-                diffElements.push(
-                  <Box key={`ellipsis-top-${changeIndex}-${i}`}>
-                    <Text color="gray">{" ".repeat(maxDigits * 2 + 2)}...</Text>
-                  </Box>,
-                );
+            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;
               }
+            } else if (isLastBlock && !isFirstBlock) {
+              // Last block: keep first 3
+              if (lines.length > 3) {
+                linesToDisplay = lines.slice(0, 3);
+                showEllipsisBottom = true;
+              }
+            } else if (!isFirstBlock && !isLastBlock) {
+              // Middle block: keep first 3 and last 3
+              if (lines.length > 6) {
+                linesToDisplay = [...lines.slice(0, 3), ...lines.slice(-3)];
+                showEllipsisTop = false; // We'll put ellipsis in the middle
+              }
+            }
 
-              linesToDisplay.forEach((line, lineIndex) => {
-                // If it's a middle block and we are at the split point
-                if (
-                  !isFirstBlock &&
-                  !isLastBlock &&
-                  lines.length > 6 &&
-                  lineIndex === 3
-                ) {
-                  const skipCount = lines.length - 6;
-                  oldLineNum += skipCount;
-                  newLineNum += skipCount;
-                  diffElements.push(
-                    <Box key={`ellipsis-mid-${changeIndex}-${i}`}>
-                      <Text color="gray">
-                        {" ".repeat(maxDigits * 2 + 2)}...
-                      </Text>
-                    </Box>,
-                  );
-                }
-
-                diffElements.push(
-                  renderLine(
-                    oldLineNum++,
-                    newLineNum++,
-                    " ",
-                    line,
-                    "white",
-                    `context-${changeIndex}-${i}-${lineIndex}`,
-                  ),
-                );
-              });
+            if (showEllipsisTop) {
+              diffElements.push(
+                <Box key={`ellipsis-top-${changeIndex}-${i}`}>
+                  <Text color="gray">{" ".repeat(maxDigits * 2 + 2)}...</Text>
+                </Box>,
+              );
+            }
 
-              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
+            linesToDisplay.forEach((line, lineIndex) => {
+              // If it's a middle block and we are at the split point
+              if (
+                !isFirstBlock &&
+                !isLastBlock &&
+                lines.length > 6 &&
+                lineIndex === 3
+              ) {
+                const skipCount = lines.length - 6;
                 oldLineNum += skipCount;
                 newLineNum += skipCount;
                 diffElements.push(
-                  <Box key={`ellipsis-bottom-${changeIndex}-${i}`}>
+                  <Box key={`ellipsis-mid-${changeIndex}-${i}`}>
                     <Text color="gray">{" ".repeat(maxDigits * 2 + 2)}...</Text>
                   </Box>,
                 );
               }
+
+              diffElements.push(
+                renderLine(
+                  oldLineNum++,
+                  newLineNum++,
+                  " ",
+                  line,
+                  "white",
+                  `context-${changeIndex}-${i}-${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}-${i}`}>
+                  <Text color="gray">{" ".repeat(maxDigits * 2 + 2)}...</Text>
+                </Box>,
+              );
             }
           }
-          allElements.push(...diffElements);
-        } catch (error) {
-          console.warn(
-            `Error rendering diff for change ${changeIndex}:`,
-            error,
-          );
-          // Fallback to simple display
-          allElements.push(
-            <Box key={`fallback-${changeIndex}`} flexDirection="column">
-              <Text color="red">-{change.oldContent || ""}</Text>
-              <Text color="green">+{change.newContent || ""}</Text>
-            </Box>,
-          );
         }
-      });
+        allElements.push(...diffElements);
+      } catch (error) {
+        console.warn(`Error rendering diff for change ${changeIndex}:`, error);
+        // Fallback to simple display
+        allElements.push(
+          <Box key={`fallback-${changeIndex}`} flexDirection="column">
+            <Text color="red">-{change.oldContent || ""}</Text>
+            <Text color="green">+{change.newContent || ""}</Text>
+          </Box>,
+        );
+      }
+    });
 
-      return <Box flexDirection="column">{allElements}</Box>;
-    } catch (error) {
-      console.warn("Error rendering expanded diff:", error);
-      return (
-        <Box>
-          <Text color="gray">Error rendering diff display</Text>
-        </Box>
-      );
-    }
-  };
+    return allElements;
+  } catch (error) {
+    console.warn("Error rendering expanded diff:", error);
+    return [
+      <Box key="diff-error">
+        <Text color="gray">Error rendering diff display</Text>
+      </Box>,
+    ];
+  }
+}
+
+/**
+ * Convenience wrapper used by both <DiffDisplay> and ConfirmationDetails:
+ * transforms the raw tool parameters into change rows (empty array when the
+ * tool doesn't produce a diff).
+ */
+export function buildDiffLinesFromParams(params: {
+  toolName?: string;
+  parameters?: string;
+  startLineNumber?: number;
+}): React.ReactNode[] {
+  const { toolName, parameters, startLineNumber } = params;
+  if (
+    !toolName ||
+    ![WRITE_TOOL_NAME, EDIT_TOOL_NAME].includes(toolName) ||
+    !parameters
+  ) {
+    return [];
+  }
+  let changes: Change[] = [];
+  try {
+    changes = transformToolBlockToChanges(
+      toolName,
+      parameters,
+      startLineNumber,
+    );
+  } catch (error) {
+    console.warn("Error transforming tool block to changes:", error);
+    return [];
+  }
+  return buildDiffLines(changes);
+}
+
+export const DiffDisplay = ({
+  toolName,
+  parameters,
+  startLineNumber,
+  asLines = false,
+}: DiffDisplayProps): React.ReactNode => {
+  const showDiff =
+    toolName && [WRITE_TOOL_NAME, EDIT_TOOL_NAME].includes(toolName);
+
+  // Diff detection and transformation using typed parameters
+  const diffLines = useMemo(
+    () => buildDiffLinesFromParams({ toolName, parameters, startLineNumber }),
+    [toolName, parameters, startLineNumber],
+  );
 
   // Don't render anything if no diff should be shown
   if (!showDiff) {
-    return null;
+    return asLines ? [] : null;
+  }
+
+  if (asLines) {
+    return diffLines;
   }
 
   return (
     <Box flexDirection="column">
       <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
-        {renderExpandedDiff()}
+        <Box flexDirection="column">{diffLines}</Box>
       </Box>
     </Box>
   );