wave-code 0.6.5 → 0.7.1

package/dist/components/ConfirmationSelector.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { Box, Text, useInput } from "ink";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text, useInput, useStdout, measureElement } from "ink";
 import { BASH_TOOL_NAME, EXIT_PLAN_MODE_TOOL_NAME, ASK_USER_QUESTION_TOOL_NAME, } from "wave-agent-sdk";
 const getHeaderColor = (header) => {
     const colors = ["red", "green", "blue", "magenta", "cyan"];
@@ -10,24 +10,34 @@ const getHeaderColor = (header) => {
     }
     return colors[Math.abs(hash) % colors.length];
 };
-export const ConfirmationSelector = ({ toolName, toolInput, suggestedPrefix, hidePersistentOption, isExpanded = false, onDecision, onCancel, onAbort, }) => {
+export const ConfirmationSelector = ({ toolName, toolInput, suggestedPrefix, hidePersistentOption, isExpanded = false, onDecision, onCancel, onAbort, onHeightMeasured, }) => {
+    const { stdout } = useStdout();
+    const boxRef = useRef(null);
+    useLayoutEffect(() => {
+        if (boxRef.current) {
+            const { height } = measureElement(boxRef.current);
+            onHeightMeasured?.(height);
+        }
+    }, [stdout?.rows, onHeightMeasured, toolName, toolInput, isExpanded]);
     const [state, setState] = useState({
-        selectedOption: "allow",
+        selectedOption: toolName === EXIT_PLAN_MODE_TOOL_NAME ? "clear" : "allow",
         alternativeText: "",
         alternativeCursorPosition: 0,
         hasUserInput: false,
     });
-    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-    const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
-    const [selectedOptionIndices, setSelectedOptionIndices] = useState(new Set());
-    const [userAnswers, setUserAnswers] = useState({});
-    const [otherText, setOtherText] = useState("");
-    const [otherCursorPosition, setOtherCursorPosition] = useState(0);
+    const [questionState, setQuestionState] = useState({
+        currentQuestionIndex: 0,
+        selectedOptionIndex: 0,
+        selectedOptionIndices: new Set(),
+        userAnswers: {},
+        otherText: "",
+        otherCursorPosition: 0,
+    });
     const questions = toolInput?.questions || [];
-    const currentQuestion = questions[currentQuestionIndex];
+    const currentQuestion = questions[questionState.currentQuestionIndex];
     const getAutoOptionText = () => {
         if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
-            return "Yes, and auto-accept edits";
+            return "Yes, auto-accept edits";
         }
         if (toolName === BASH_TOOL_NAME) {
             if (suggestedPrefix) {
@@ -48,104 +58,140 @@ export const ConfirmationSelector = ({ toolName, toolInput, suggestedPrefix, hid
                 return;
             const options = [...currentQuestion.options, { label: "Other" }];
             const isMultiSelect = currentQuestion.multiSelect;
-            const isOtherFocused = selectedOptionIndex === options.length - 1;
             if (key.return) {
-                let answer = "";
-                if (isMultiSelect) {
-                    const selectedLabels = Array.from(selectedOptionIndices)
-                        .filter((i) => i < currentQuestion.options.length)
-                        .map((i) => currentQuestion.options[i].label);
-                    const isOtherChecked = selectedOptionIndices.has(options.length - 1);
-                    if (isOtherChecked && otherText.trim()) {
-                        selectedLabels.push(otherText.trim());
+                setQuestionState((prev) => {
+                    const isOtherFocused = prev.selectedOptionIndex === options.length - 1;
+                    let answer = "";
+                    if (isMultiSelect) {
+                        const selectedLabels = Array.from(prev.selectedOptionIndices)
+                            .filter((i) => i < currentQuestion.options.length)
+                            .map((i) => currentQuestion.options[i].label);
+                        const isOtherChecked = prev.selectedOptionIndices.has(options.length - 1);
+                        if (isOtherChecked && prev.otherText.trim()) {
+                            selectedLabels.push(prev.otherText.trim());
+                        }
+                        answer = selectedLabels.join(", ");
                     }
-                    answer = selectedLabels.join(", ");
-                }
-                else {
-                    if (isOtherFocused) {
-                        answer = otherText.trim();
+                    else {
+                        if (isOtherFocused) {
+                            answer = prev.otherText.trim();
+                        }
+                        else {
+                            answer = options[prev.selectedOptionIndex].label;
+                        }
+                    }
+                    if (!answer)
+                        return prev;
+                    const newAnswers = {
+                        ...prev.userAnswers,
+                        [currentQuestion.question]: answer,
+                    };
+                    if (prev.currentQuestionIndex < questions.length - 1) {
+                        return {
+                            ...prev,
+                            currentQuestionIndex: prev.currentQuestionIndex + 1,
+                            selectedOptionIndex: 0,
+                            selectedOptionIndices: new Set(),
+                            userAnswers: newAnswers,
+                            otherText: "",
+                            otherCursorPosition: 0,
+                        };
                     }
                     else {
-                        answer = options[selectedOptionIndex].label;
+                        onDecision({
+                            behavior: "allow",
+                            message: JSON.stringify(newAnswers),
+                        });
+                        return {
+                            ...prev,
+                            userAnswers: newAnswers,
+                        };
                     }
-                }
-                if (!answer)
-                    return;
-                const newAnswers = {
-                    ...userAnswers,
-                    [currentQuestion.question]: answer,
-                };
-                setUserAnswers(newAnswers);
-                if (currentQuestionIndex < questions.length - 1) {
-                    setCurrentQuestionIndex(currentQuestionIndex + 1);
-                    setSelectedOptionIndex(0);
-                    setSelectedOptionIndices(new Set());
-                    setOtherText("");
-                    setOtherCursorPosition(0);
-                }
-                else {
-                    onDecision({
-                        behavior: "allow",
-                        message: JSON.stringify(newAnswers),
-                    });
-                }
+                });
                 return;
             }
             if (input === " ") {
-                if (isMultiSelect &&
-                    (!isOtherFocused || !selectedOptionIndices.has(selectedOptionIndex))) {
-                    setSelectedOptionIndices((prev) => {
-                        const next = new Set(prev);
-                        if (next.has(selectedOptionIndex))
-                            next.delete(selectedOptionIndex);
+                setQuestionState((prev) => {
+                    const isOtherFocused = prev.selectedOptionIndex === options.length - 1;
+                    if (isMultiSelect &&
+                        (!isOtherFocused ||
+                            !prev.selectedOptionIndices.has(prev.selectedOptionIndex))) {
+                        const nextIndices = new Set(prev.selectedOptionIndices);
+                        if (nextIndices.has(prev.selectedOptionIndex))
+                            nextIndices.delete(prev.selectedOptionIndex);
                         else
-                            next.add(selectedOptionIndex);
-                        return next;
-                    });
-                    return;
-                }
-                if (!isOtherFocused)
-                    return;
+                            nextIndices.add(prev.selectedOptionIndex);
+                        return {
+                            ...prev,
+                            selectedOptionIndices: nextIndices,
+                        };
+                    }
+                    return prev;
+                });
+                // If it's other and focused, we don't return here, allowing the input handler below to handle it
             }
             if (key.upArrow) {
-                if (selectedOptionIndex > 0)
-                    setSelectedOptionIndex(selectedOptionIndex - 1);
+                setQuestionState((prev) => ({
+                    ...prev,
+                    selectedOptionIndex: Math.max(0, prev.selectedOptionIndex - 1),
+                }));
                 return;
             }
             if (key.downArrow) {
-                if (selectedOptionIndex < options.length - 1)
-                    setSelectedOptionIndex(selectedOptionIndex + 1);
+                setQuestionState((prev) => ({
+                    ...prev,
+                    selectedOptionIndex: Math.min(options.length - 1, prev.selectedOptionIndex + 1),
+                }));
                 return;
             }
-            if (isOtherFocused) {
-                if (key.leftArrow) {
-                    setOtherCursorPosition((prev) => Math.max(0, prev - 1));
-                    return;
-                }
-                if (key.rightArrow) {
-                    setOtherCursorPosition((prev) => Math.min(otherText.length, prev + 1));
-                    return;
-                }
-                if (key.backspace || key.delete) {
-                    if (otherCursorPosition > 0) {
-                        setOtherText((prev) => prev.slice(0, otherCursorPosition - 1) +
-                            prev.slice(otherCursorPosition));
-                        setOtherCursorPosition((prev) => prev - 1);
+            setQuestionState((prev) => {
+                const isOtherFocused = prev.selectedOptionIndex === options.length - 1;
+                if (isOtherFocused) {
+                    if (key.leftArrow) {
+                        return {
+                            ...prev,
+                            otherCursorPosition: Math.max(0, prev.otherCursorPosition - 1),
+                        };
+                    }
+                    if (key.rightArrow) {
+                        return {
+                            ...prev,
+                            otherCursorPosition: Math.min(prev.otherText.length, prev.otherCursorPosition + 1),
+                        };
+                    }
+                    if (key.backspace || key.delete) {
+                        if (prev.otherCursorPosition > 0) {
+                            return {
+                                ...prev,
+                                otherText: prev.otherText.slice(0, prev.otherCursorPosition - 1) +
+                                    prev.otherText.slice(prev.otherCursorPosition),
+                                otherCursorPosition: prev.otherCursorPosition - 1,
+                            };
+                        }
+                    }
+                    if (input && !key.ctrl && !key.meta) {
+                        return {
+                            ...prev,
+                            otherText: prev.otherText.slice(0, prev.otherCursorPosition) +
+                                input +
+                                prev.otherText.slice(prev.otherCursorPosition),
+                            otherCursorPosition: prev.otherCursorPosition + input.length,
+                        };
                     }
-                    return;
-                }
-                if (input && !key.ctrl && !key.meta) {
-                    setOtherText((prev) => prev.slice(0, otherCursorPosition) +
-                        input +
-                        prev.slice(otherCursorPosition));
-                    setOtherCursorPosition((prev) => prev + input.length);
-                    return;
                 }
-            }
+                return prev;
+            });
             return;
         }
         if (key.return) {
-            if (state.selectedOption === "allow") {
+            if (state.selectedOption === "clear") {
+                onDecision({
+                    behavior: "allow",
+                    newPermissionMode: "acceptEdits",
+                    clearContext: true,
+                });
+            }
+            else if (state.selectedOption === "allow") {
                 if (toolName === EXIT_PLAN_MODE_TOOL_NAME) {
                     onDecision({ behavior: "allow", newPermissionMode: "default" });
                 }
@@ -185,30 +231,31 @@ export const ConfirmationSelector = ({ toolName, toolInput, suggestedPrefix, hid
                 return;
             }
         }
+        const availableOptions = [];
+        if (toolName === EXIT_PLAN_MODE_TOOL_NAME)
+            availableOptions.push("clear");
+        availableOptions.push("allow");
+        if (!hidePersistentOption)
+            availableOptions.push("auto");
+        availableOptions.push("alternative");
         if (key.upArrow) {
-            setState((prev) => {
-                if (prev.selectedOption === "alternative")
-                    return {
-                        ...prev,
-                        selectedOption: hidePersistentOption ? "allow" : "auto",
-                    };
-                if (prev.selectedOption === "auto")
-                    return { ...prev, selectedOption: "allow" };
-                return prev;
-            });
+            const currentIndex = availableOptions.indexOf(state.selectedOption);
+            if (currentIndex > 0) {
+                setState((prev) => ({
+                    ...prev,
+                    selectedOption: availableOptions[currentIndex - 1],
+                }));
+            }
             return;
         }
         if (key.downArrow) {
-            setState((prev) => {
-                if (prev.selectedOption === "allow")
-                    return {
-                        ...prev,
-                        selectedOption: hidePersistentOption ? "alternative" : "auto",
-                    };
-                if (prev.selectedOption === "auto")
-                    return { ...prev, selectedOption: "alternative" };
-                return prev;
-            });
+            const currentIndex = availableOptions.indexOf(state.selectedOption);
+            if (currentIndex < availableOptions.length - 1) {
+                setState((prev) => ({
+                    ...prev,
+                    selectedOption: availableOptions[currentIndex + 1],
+                }));
+            }
             return;
         }
         if (input && !key.ctrl && !key.meta && !("alt" in key && key.alt)) {
@@ -244,23 +291,23 @@ export const ConfirmationSelector = ({ toolName, toolInput, suggestedPrefix, hid
             return;
         }
     });
-    const placeholderText = "Type here to tell Wave what to do differently";
+    const placeholderText = "Type here to tell Wave what to change";
     const showPlaceholder = state.selectedOption === "alternative" && !state.hasUserInput;
-    return (_jsxs(Box, { flexDirection: "column", children: [toolName === ASK_USER_QUESTION_TOOL_NAME &&
+    return (_jsxs(Box, { ref: boxRef, flexDirection: "column", children: [toolName === ASK_USER_QUESTION_TOOL_NAME &&
                 currentQuestion &&
                 !isExpanded && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: getHeaderColor(currentQuestion.header), bold: true, children: currentQuestion.header.slice(0, 12).toUpperCase() }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { bold: true, children: currentQuestion.question }) })] }), _jsx(Box, { flexDirection: "column", children: [...currentQuestion.options, { label: "Other" }].map((option, index) => {
-                            const isSelected = selectedOptionIndex === index;
+                            const isSelected = questionState.selectedOptionIndex === index;
                             const isChecked = currentQuestion.multiSelect
-                                ? selectedOptionIndices.has(index)
+                                ? questionState.selectedOptionIndices.has(index)
                                 : isSelected;
                             const isOther = index === currentQuestion.options.length;
                             return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? "black" : "white", backgroundColor: isSelected ? "yellow" : undefined, children: [isSelected ? "> " : "  ", currentQuestion.multiSelect
                                             ? isChecked
                                                 ? "[x] "
                                                 : "[ ] "
-                                            : "", option.label, option.description ? ` - ${option.description}` : "", isOther && isSelected && (_jsxs(Text, { children: [":", " ", otherText ? (_jsxs(_Fragment, { children: [otherText.slice(0, otherCursorPosition), _jsx(Text, { backgroundColor: "white", color: "black", children: otherText[otherCursorPosition] || " " }), otherText.slice(otherCursorPosition + 1)] })) : (_jsx(Text, { color: "gray", dimColor: true, children: "[Type your answer...]" }))] }))] }) }, index));
-                        }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Question ", currentQuestionIndex + 1, " of ", questions.length, " \u2022", currentQuestion.multiSelect ? " Space to toggle •" : "", " Use \u2191\u2193 to navigate \u2022 Enter to confirm"] }) })] })), toolName !== ASK_USER_QUESTION_TOOL_NAME && !isExpanded && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: "Do you want to proceed?" }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { color: state.selectedOption === "allow" ? "black" : "white", backgroundColor: state.selectedOption === "allow" ? "yellow" : undefined, bold: state.selectedOption === "allow", children: [state.selectedOption === "allow" ? "> " : "  ", toolName === EXIT_PLAN_MODE_TOOL_NAME
-                                            ? "Yes, proceed with default mode"
-                                            : "Yes"] }) }, "allow-option"), !hidePersistentOption && (_jsx(Box, { children: _jsxs(Text, { color: state.selectedOption === "auto" ? "black" : "white", backgroundColor: state.selectedOption === "auto" ? "yellow" : undefined, bold: state.selectedOption === "auto", children: [state.selectedOption === "auto" ? "> " : "  ", getAutoOptionText()] }) }, "auto-option")), _jsx(Box, { children: _jsxs(Text, { color: state.selectedOption === "alternative" ? "black" : "white", backgroundColor: state.selectedOption === "alternative" ? "yellow" : undefined, bold: state.selectedOption === "alternative", children: [state.selectedOption === "alternative" ? "> " : "  ", showPlaceholder ? (_jsx(Text, { color: "gray", dimColor: true, children: placeholderText })) : (_jsx(Text, { children: state.alternativeText ? (_jsxs(_Fragment, { children: [state.alternativeText.slice(0, state.alternativeCursorPosition), _jsx(Text, { backgroundColor: "white", color: "black", children: state.alternativeText[state.alternativeCursorPosition] || " " }), state.alternativeText.slice(state.alternativeCursorPosition + 1)] })) : ("Type here to tell Wave what to do differently") }))] }) }, "alternative-option")] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Use \u2191\u2193 to navigate \u2022 ESC to cancel" }) })] }))] }));
+                                            : "", option.label, option.description ? ` - ${option.description}` : "", isOther && isSelected && (_jsxs(Text, { children: [":", " ", questionState.otherText ? (_jsxs(_Fragment, { children: [questionState.otherText.slice(0, questionState.otherCursorPosition), _jsx(Text, { backgroundColor: "white", color: "black", children: questionState.otherText[questionState.otherCursorPosition] || " " }), questionState.otherText.slice(questionState.otherCursorPosition + 1)] })) : (_jsx(Text, { color: "gray", dimColor: true, children: "[Type your answer...]" }))] }))] }) }, index));
+                        }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Question ", questionState.currentQuestionIndex + 1, " of", " ", questions.length, " \u2022", currentQuestion.multiSelect ? " Space to toggle •" : "", " Use \u2191\u2193 to navigate \u2022 Enter to confirm"] }) })] })), toolName !== ASK_USER_QUESTION_TOOL_NAME && !isExpanded && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: "Do you want to proceed?" }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [toolName === EXIT_PLAN_MODE_TOOL_NAME && (_jsx(Box, { children: _jsxs(Text, { color: state.selectedOption === "clear" ? "black" : "white", backgroundColor: state.selectedOption === "clear" ? "yellow" : undefined, bold: state.selectedOption === "clear", children: [state.selectedOption === "clear" ? "> " : "  ", "Yes, clear context and auto-accept edits"] }) }, "clear-option")), _jsx(Box, { children: _jsxs(Text, { color: state.selectedOption === "allow" ? "black" : "white", backgroundColor: state.selectedOption === "allow" ? "yellow" : undefined, bold: state.selectedOption === "allow", children: [state.selectedOption === "allow" ? "> " : "  ", toolName === EXIT_PLAN_MODE_TOOL_NAME
+                                            ? "Yes, manually approve edits"
+                                            : "Yes, proceed"] }) }, "allow-option"), !hidePersistentOption && (_jsx(Box, { children: _jsxs(Text, { color: state.selectedOption === "auto" ? "black" : "white", backgroundColor: state.selectedOption === "auto" ? "yellow" : undefined, bold: state.selectedOption === "auto", children: [state.selectedOption === "auto" ? "> " : "  ", getAutoOptionText()] }) }, "auto-option")), _jsx(Box, { children: _jsxs(Text, { color: state.selectedOption === "alternative" ? "black" : "white", backgroundColor: state.selectedOption === "alternative" ? "yellow" : undefined, bold: state.selectedOption === "alternative", children: [state.selectedOption === "alternative" ? "> " : "  ", showPlaceholder ? (_jsx(Text, { color: "gray", dimColor: true, children: placeholderText })) : (_jsx(Text, { children: state.alternativeText ? (_jsxs(_Fragment, { children: [state.alternativeText.slice(0, state.alternativeCursorPosition), _jsx(Text, { backgroundColor: "white", color: "black", children: state.alternativeText[state.alternativeCursorPosition] || " " }), state.alternativeText.slice(state.alternativeCursorPosition + 1)] })) : ("Type here to tell Wave what to change") }))] }) }, "alternative-option")] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Use \u2191\u2193 to navigate \u2022 ESC to cancel" }) })] }))] }));
 };
 ConfirmationSelector.displayName = "ConfirmationSelector";

package/dist/components/DiffDisplay.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface DiffDisplayProps {
     toolName?: string;
     parameters?: string;
+    startLineNumber?: number;
 }
 export declare const DiffDisplay: React.FC<DiffDisplayProps>;
 export {};

package/dist/components/DiffDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiffDisplay.d.ts","sourceRoot":"","sources":["../../src/components/DiffDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAUvC,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkTlD,CAAC"}
+{"version":3,"file":"DiffDisplay.d.ts","sourceRoot":"","sources":["../../src/components/DiffDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8VlD,CAAC"}

package/dist/components/DiffDisplay.js

@@ -1,25 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from "react";
 import { Box, Text } from "ink";
-import { WRITE_TOOL_NAME, EDIT_TOOL_NAME, MULTI_EDIT_TOOL_NAME, } from "wave-agent-sdk";
+import { WRITE_TOOL_NAME, EDIT_TOOL_NAME } from "wave-agent-sdk";
 import { transformToolBlockToChanges } from "../utils/toolParameterTransforms.js";
 import { diffLines, diffWords } from "diff";
-export const DiffDisplay = ({ toolName, parameters, }) => {
-    const showDiff = toolName &&
-        [WRITE_TOOL_NAME, EDIT_TOOL_NAME, MULTI_EDIT_TOOL_NAME].includes(toolName);
+export const DiffDisplay = ({ toolName, parameters, startLineNumber, }) => {
+    const showDiff = toolName && [WRITE_TOOL_NAME, EDIT_TOOL_NAME].includes(toolName);
     // 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);
+            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 = (oldLine, newLine, keyPrefix) => {
         try {
@@ -59,39 +58,51 @@ export const DiffDisplay = ({ toolName, parameters, }) => {
         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, newLineNum, prefix, content, color, key) => {
+                const formatNum = (num) => num === null
+                    ? " ".repeat(maxDigits)
+                    : num.toString().padStart(maxDigits);
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "gray", children: [formatNum(oldLineNum), " "] }), _jsxs(Text, { color: "gray", children: [formatNum(newLineNum), " "] }), _jsx(Text, { color: "gray", children: "| " }), _jsx(Text, { color: color, children: prefix }), _jsx(Text, { color: color, children: content })] }, key));
+            };
             const allElements = [];
             changes.forEach((change, changeIndex) => {
                 try {
-                    // Add ellipsis between non-contiguous edits in MultiEdit
-                    if (toolName === MULTI_EDIT_TOOL_NAME && changeIndex > 0) {
-                        allElements.push(_jsx(Box, { children: _jsx(Text, { color: "gray", children: "..." }) }, `multi-edit-separator-${changeIndex}`));
-                    }
                     // Get line-level diff to understand the structure
                     const lineDiffs = diffLines(change.oldContent || "", change.newContent || "");
+                    let oldLineNum = change.startLineNumber || 1;
+                    let newLineNum = change.startLineNumber || 1;
                     // Process line diffs
                     const diffElements = [];
                     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(_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "green", children: "+" }), _jsx(Text, { color: "green", children: line })] }, `add-${changeIndex}-${partIndex}-${lineIndex}`));
+                                diffElements.push(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(_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "red", children: "-" }), _jsx(Text, { color: "red", children: line })] }, `remove-${changeIndex}-${partIndex}-${lineIndex}`));
+                                diffElements.push(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;
                             let linesToDisplay = lines;
@@ -100,6 +111,9 @@ export const DiffDisplay = ({ toolName, parameters, }) => {
                             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;
                                 }
@@ -118,12 +132,8 @@ export const DiffDisplay = ({ toolName, parameters, }) => {
                                     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(_jsx(Box, { children: _jsx(Text, { color: "gray", children: " ..." }) }, `ellipsis-top-${changeIndex}-${partIndex}`));
+                                diffElements.push(_jsx(Box, { children: _jsxs(Text, { color: "gray", children: [" ".repeat(maxDigits * 2 + 2), "..."] }) }, `ellipsis-top-${changeIndex}-${partIndex}`));
                             }
                             linesToDisplay.forEach((line, lineIndex) => {
                                 // If it's a middle block and we are at the split point
@@ -131,12 +141,20 @@ export const DiffDisplay = ({ toolName, parameters, }) => {
                                     !isLastBlock &&
                                     lines.length > 6 &&
                                     lineIndex === 3) {
-                                    diffElements.push(_jsx(Box, { children: _jsx(Text, { color: "gray", children: " ..." }) }, `ellipsis-mid-${changeIndex}-${partIndex}`));
+                                    const skipCount = lines.length - 6;
+                                    oldLineNum += skipCount;
+                                    newLineNum += skipCount;
+                                    diffElements.push(_jsx(Box, { children: _jsxs(Text, { color: "gray", children: [" ".repeat(maxDigits * 2 + 2), "..."] }) }, `ellipsis-mid-${changeIndex}-${partIndex}`));
                                 }
-                                diffElements.push(_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "white", children: " " }), _jsx(Text, { color: "white", children: line })] }, `context-${changeIndex}-${partIndex}-${lineIndex}`));
+                                diffElements.push(renderLine(oldLineNum++, newLineNum++, " ", line, "white", `context-${changeIndex}-${partIndex}-${lineIndex}`));
                             });
                             if (showEllipsisBottom) {
-                                diffElements.push(_jsx(Box, { children: _jsx(Text, { color: "gray", children: " ..." }) }, `ellipsis-bottom-${changeIndex}-${partIndex}`));
+                                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(_jsx(Box, { children: _jsxs(Text, { color: "gray", children: [" ".repeat(maxDigits * 2 + 2), "..."] }) }, `ellipsis-bottom-${changeIndex}-${partIndex}`));
                             }
                         }
                     });
@@ -150,10 +168,12 @@ export const DiffDisplay = ({ toolName, parameters, }) => {
                         diffElements[1].key.includes("add-")) {
                         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(removedText, addedText, `word-${changeIndex}`);
-                            allElements.push(_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "red", children: "-" }), removedParts] }, `word-diff-removed-${changeIndex}`));
-                            allElements.push(_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "green", children: "+" }), addedParts] }, `word-diff-added-${changeIndex}`));
+                            allElements.push(renderLine(oldLineNumVal, null, "-", removedParts, "red", `word-diff-removed-${changeIndex}`));
+                            allElements.push(renderLine(null, newLineNumVal, "+", addedParts, "green", `word-diff-added-${changeIndex}`));
                         }
                         else {
                             allElements.push(...diffElements);
@@ -180,19 +200,57 @@ export const DiffDisplay = ({ toolName, parameters, }) => {
     if (!showDiff) {
         return null;
     }
-    return (_jsx(Box, { flexDirection: "column", children: _jsxs(Box, { paddingLeft: 2, borderLeft: true, borderColor: "cyan", flexDirection: "column", children: [_jsx(Text, { color: "cyan", bold: true, children: "Diff:" }), renderExpandedDiff()] }) }));
+    return (_jsx(Box, { flexDirection: "column", children: _jsx(Box, { paddingLeft: 2, borderLeft: true, borderColor: "cyan", flexDirection: "column", children: renderExpandedDiff() }) }));
 };
 // Helper function to extract text content from a React element
 const extractTextFromElement = (element) => {
     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.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
+                .children;
+            return Array.isArray(textChildren)
+                ? textChildren.join("")
+                : String(textChildren || "");
+        }
+    }
+    return null;
+};
+const extractOldLineNumFromElement = (element) => {
+    if (!React.isValidElement(element))
+        return null;
+    const children = element.props.children;
+    if (Array.isArray(children) && children.length >= 1) {
+        const textElement = children[0];
+        if (React.isValidElement(textElement)) {
+            const textChildren = textElement.props
+                .children;
+            const val = (Array.isArray(textChildren)
+                ? textChildren.join("")
+                : String(textChildren || "")).trim();
+            return val ? parseInt(val, 10) : null;
+        }
+    }
+    return null;
+};
+const extractNewLineNumFromElement = (element) => {
+    if (!React.isValidElement(element))
+        return null;
     const children = element.props.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.children) {
-            return textElement.props.children;
+        const textElement = children[1];
+        if (React.isValidElement(textElement)) {
+            const textChildren = textElement.props
+                .children;
+            const val = (Array.isArray(textChildren)
+                ? textChildren.join("")
+                : String(textChildren || "")).trim();
+            return val ? parseInt(val, 10) : null;
         }
     }
     return null;

package/dist/components/HistorySearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HistorySearch.d.ts","sourceRoot":"","sources":["../../src/components/HistorySearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiKtD,CAAC"}
+{"version":3,"file":"HistorySearch.d.ts","sourceRoot":"","sources":["../../src/components/HistorySearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuKtD,CAAC"}