wave-code 0.7.0 → 0.7.1

package/dist/components/DiffDisplay.js

@@ -4,7 +4,7 @@ import { Box, Text } from "ink";
 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, }) => {
+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(() => {
@@ -12,13 +12,13 @@ export const DiffDisplay = ({ 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 {
@@ -58,35 +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 {
                     // 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;
@@ -95,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;
                                 }
@@ -113,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
@@ -126,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}`));
                             }
                         }
                     });
@@ -145,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);
@@ -175,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"}

package/dist/components/HistorySearch.js

@@ -1,34 +1,33 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import { PromptHistoryManager } from "wave-agent-sdk";
 export const HistorySearch = ({ searchQuery, onSelect, onCancel, }) => {
     const MAX_VISIBLE_ITEMS = 5;
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [entries, setEntries] = useState([]);
-    const entriesRef = React.useRef([]);
-    const selectedIndexRef = React.useRef(0);
-    useEffect(() => {
-        entriesRef.current = entries;
-    }, [entries]);
-    useEffect(() => {
-        selectedIndexRef.current = selectedIndex;
-    }, [selectedIndex]);
+    const [state, setState] = useState({
+        selectedIndex: 0,
+        entries: [],
+    });
     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;
         }
         if (key.escape) {
@@ -36,14 +35,21 @@ export const HistorySearch = ({ searchQuery, onSelect, onCancel, }) => {
             return;
         }
         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 (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "yellow", borderBottom: false, borderLeft: false, borderRight: false, children: [_jsxs(Text, { color: "yellow", children: ["No history found ", searchQuery && `for "${searchQuery}"`] }), _jsx(Text, { dimColor: true, children: "Press Escape to cancel" })] }));
     }
@@ -70,6 +76,6 @@ export const HistorySearch = ({ searchQuery, onSelect, onCancel, }) => {
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "blue", borderBottom: false, borderLeft: false, borderRight: false, gap: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: "blue", bold: true, children: ["Prompt History ", searchQuery && `(filtering: "${searchQuery}")`] }) }), _jsx(Box, { flexDirection: "column", children: visibleEntries.map((entry, index) => {
                     const actualIndex = startIndex + index;
                     const isSelected = actualIndex === selectedIndex;
-                    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, children: _jsx(Text, { color: isSelected ? "black" : "white", backgroundColor: isSelected ? "blue" : undefined, wrap: "truncate-end", children: entry.prompt.replace(/\n/g, " ") }) }), isSelected && (_jsx(Box, { marginLeft: 2, flexShrink: 0, children: _jsx(Text, { color: "gray", dimColor: true, children: formatTimestamp(entry.timestamp) }) }))] }, actualIndex));
+                    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, children: _jsxs(Text, { color: isSelected ? "black" : "white", backgroundColor: isSelected ? "blue" : undefined, wrap: "truncate-end", children: [isSelected ? "> " : "  ", entry.prompt.replace(/\n/g, " ")] }) }), isSelected && (_jsx(Box, { marginLeft: 2, flexShrink: 0, children: _jsx(Text, { color: "gray", dimColor: true, children: formatTimestamp(entry.timestamp) }) }))] }, actualIndex));
                 }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Use \u2191\u2193 to navigate, Enter to select, Escape to cancel" }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/components/Markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAwID,eAAO,MAAM,QAAQ,2CAA6B,aAAa,6CAc7D,CAAC"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/components/Markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAyID,eAAO,MAAM,QAAQ,2CAA6B,aAAa,6CAc7D,CAAC"}

package/dist/components/Markdown.js

@@ -3,6 +3,7 @@ import React, { useMemo } from "react";
 import { Box, Text } from "ink";
 import { Renderer, marked } from "marked";
 import chalk from "chalk";
+import { highlightToAnsi } from "../utils/highlightUtils.js";
 const unescapeHtml = (html) => {
     return html
         .replace(/&/g, "&")
@@ -16,7 +17,8 @@ class AnsiRenderer extends Renderer {
     code({ text, lang }) {
         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`;
     }
     blockquote({ tokens }) {
         const body = this.parser.parse(tokens);

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

@@ -1 +1 @@
-{"version":3,"file":"McpManager.d.ts","sourceRoot":"","sources":["../../src/components/McpManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,eAAe,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1D,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAC9D;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkUhD,CAAC"}
+{"version":3,"file":"McpManager.d.ts","sourceRoot":"","sources":["../../src/components/McpManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,eAAe,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1D,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAC9D;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0ThD,CAAC"}

package/dist/components/McpManager.js

@@ -44,64 +44,61 @@ export const McpManager = ({ onCancel, servers, onConnectServer, onDisconnectSer
         await onDisconnectServer(serverName);
     };
     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 prevMode;
+            });
+            return;
+        }
+        if (key.escape) {
+            setViewMode((prev) => {
+                if (prev === "detail") {
+                    return "list";
                 }
-                return;
-            }
-            if (key.escape) {
                 onCancel();
-                return;
-            }
-            if (key.upArrow) {
-                setSelectedIndex(Math.max(0, selectedIndex - 1));
-                return;
-            }
-            if (key.downArrow) {
-                setSelectedIndex(Math.min(servers.length - 1, selectedIndex + 1));
-                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") {
+                return prev;
+            });
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(servers.length - 1, prev + 1));
+            return;
+        }
+        // Hotkeys for server actions
+        if (input === "c") {
+            setSelectedIndex((prev) => {
+                const server = servers[prev];
+                if (server &&
+                    (server.status === "disconnected" || server.status === "error")) {
                     handleConnect(server.name);
                 }
-                return;
-            }
-            if (input === "d" &&
-                servers.length > 0 &&
-                selectedIndex < servers.length) {
-                const server = servers[selectedIndex];
-                if (server.status === "connected") {
-                    handleDisconnect(server.name);
-                }
-                return;
-            }
+                return prev;
+            });
+            return;
         }
-        else if (viewMode === "detail") {
-            // Detail mode navigation
-            if (key.escape) {
-                setViewMode("list");
-                return;
-            }
-            if (selectedServer) {
-                if (input === "c" &&
-                    (selectedServer.status === "disconnected" ||
-                        selectedServer.status === "error")) {
-                    handleConnect(selectedServer.name);
-                    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;
         }
     });
     if (viewMode === "detail" && selectedServer) {

package/dist/components/MessageBlockItem.d.ts

@@ -0,0 +1,9 @@
+import type { Message, MessageBlock } from "wave-agent-sdk";
+export interface MessageBlockItemProps {
+    block: MessageBlock;
+    message: Message;
+    isExpanded: boolean;
+    paddingTop?: number;
+}
+export declare const MessageBlockItem: ({ block, message, isExpanded, paddingTop, }: MessageBlockItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MessageBlockItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBlockItem.d.ts","sourceRoot":"","sources":["../../src/components/MessageBlockItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ5D,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,GAAI,6CAK9B,qBAAqB,4CA4DvB,CAAC"}

package/dist/components/MessageBlockItem.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+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 const MessageBlockItem = ({ block, message, isExpanded, paddingTop = 0, }) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingTop: paddingTop, children: [block.type === "text" && block.content.trim() && (_jsxs(Box, { children: [block.customCommandContent && (_jsxs(Text, { color: "cyan", bold: true, children: ["$", " "] })), block.source === MessageSource.HOOK && (_jsxs(Text, { color: "magenta", bold: true, children: ["~", " "] })), message.role === "user" ? (_jsx(Text, { backgroundColor: "gray", color: "white", children: block.content })) : (_jsx(Markdown, { children: block.content }))] })), block.type === "error" && (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["Error: ", block.content] }) })), block.type === "command_output" && (_jsx(CommandOutputDisplay, { block: block, isExpanded: isExpanded })), block.type === "tool" && (_jsx(ToolDisplay, { block: block, isExpanded: isExpanded })), block.type === "image" && (_jsxs(Box, { children: [_jsx(Text, { color: "magenta", bold: true, children: "# Image" }), block.imageUrls && block.imageUrls.length > 0 && (_jsxs(Text, { color: "gray", dimColor: true, children: [" ", "(", block.imageUrls.length, ")"] }))] })), block.type === "compress" && (_jsx(CompressDisplay, { block: block, isExpanded: isExpanded })), block.type === "reasoning" && _jsx(ReasoningDisplay, { block: block })] }));
+};

package/dist/components/MessageList.d.ts

@@ -2,10 +2,8 @@ import React from "react";
 import type { Message } from "wave-agent-sdk";
 export interface MessageListProps {
     messages: Message[];
-    isLoading?: boolean;
-    isCommandRunning?: boolean;
     isExpanded?: boolean;
-    forceStaticLastMessage?: boolean;
+    hideDynamicBlocks?: boolean;
 }
-export declare const MessageList: React.MemoExoticComponent<({ messages, isLoading, isCommandRunning, isExpanded, forceStaticLastMessage, }: MessageListProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const MessageList: React.MemoExoticComponent<({ messages, isExpanded, hideDynamicBlocks, }: MessageListProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=MessageList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,6GAOnB,gBAAgB,6CA4EpB,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,2EAKnB,gBAAgB,6CAmFpB,CAAC"}

package/dist/components/MessageList.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text, Static } from "ink";
-import { MessageItem } from "./MessageItem.js";
-export const MessageList = React.memo(({ messages, isLoading = false, isCommandRunning = false, isExpanded = false, forceStaticLastMessage = false, }) => {
+import { MessageBlockItem } from "./MessageBlockItem.js";
+export const MessageList = React.memo(({ messages, isExpanded = false, hideDynamicBlocks = false, }) => {
     // Empty message state
     if (messages.length === 0) {
         return (_jsx(Box, { flexDirection: "column", gap: 1, children: _jsx(Box, { flexDirection: "column", paddingY: 1, children: _jsx(Text, { color: "gray", children: "Welcome to WAVE Code Assistant!" }) }) }));
@@ -13,27 +13,32 @@ export const MessageList = React.memo(({ messages, isLoading = false, isCommandR
     const displayMessages = shouldLimitMessages
         ? messages.slice(-maxExpandedMessages)
         : messages;
-    // Compute which messages to render statically vs dynamically
-    const lastMessage = displayMessages[displayMessages.length - 1];
-    const hasNonEndTool = lastMessage?.blocks.some((block) => block.type === "tool" && block.stage !== "end");
-    const hasRunningCommand = lastMessage?.blocks.some((block) => block.type === "command_output" && block.isRunning);
-    const shouldRenderLastDynamic = !forceStaticLastMessage &&
-        (isLoading || isCommandRunning || hasNonEndTool || hasRunningCommand);
-    const staticMessages = shouldRenderLastDynamic
-        ? displayMessages.slice(0, -1)
-        : displayMessages;
-    const dynamicMessages = shouldRenderLastDynamic && displayMessages.length > 0
-        ? [displayMessages[displayMessages.length - 1]]
-        : [];
-    return (_jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [_jsx(Static, { items: staticMessages, children: (message, key) => {
-                    // Get previous message
-                    const previousMessage = key > 0 ? staticMessages[key - 1] : undefined;
-                    return (_jsx(MessageItem, { message: message, shouldShowHeader: previousMessage?.role !== message.role, isExpanded: isExpanded }, key));
-                } }), dynamicMessages.map((message, index) => {
-                const messageIndex = staticMessages.length + index;
-                const previousMessage = messageIndex > 0 ? displayMessages[messageIndex - 1] : undefined;
-                return (_jsx(Box, { children: _jsx(MessageItem, { message: message, shouldShowHeader: previousMessage?.role !== message.role, isExpanded: isExpanded }) }, `dynamic-${index}`));
-            })] }));
+    // Flatten messages into blocks with metadata
+    const allBlocks = displayMessages.flatMap((message, index) => {
+        const messageIndex = shouldLimitMessages
+            ? messages.length - maxExpandedMessages + index
+            : index;
+        return message.blocks.map((block, blockIndex) => ({
+            block,
+            message,
+            isLastMessage: messageIndex === messages.length - 1,
+            // Unique key for each block to help Static component
+            key: `${message.id || messageIndex}-${blockIndex}`,
+        }));
+    });
+    // Determine which blocks are static vs dynamic
+    const blocksWithStatus = allBlocks.map((item) => {
+        const { block, isLastMessage } = item;
+        const isDynamic = isLastMessage &&
+            ((block.type === "tool" && block.stage !== "end") ||
+                (block.type === "command_output" && block.isRunning));
+        return { ...item, isDynamic };
+    });
+    const staticBlocks = blocksWithStatus.filter((b) => !b.isDynamic);
+    const dynamicBlocks = hideDynamicBlocks
+        ? []
+        : blocksWithStatus.filter((b) => b.isDynamic);
+    return (_jsxs(Box, { flexDirection: "column", paddingBottom: 1, children: [staticBlocks.length > 0 && (_jsx(Static, { items: staticBlocks, children: (item) => (_jsx(MessageBlockItem, { block: item.block, message: item.message, isExpanded: isExpanded, paddingTop: 1 }, item.key)) })), dynamicBlocks.length > 0 && (_jsx(Box, { flexDirection: "column", children: dynamicBlocks.map((item) => (_jsx(MessageBlockItem, { block: item.block, message: item.message, isExpanded: isExpanded, paddingTop: 1 }, item.key))) }))] }));
 });
 // Add display name for debugging
 MessageList.displayName = "MessageList";

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

@@ -1 +1 @@
-{"version":3,"file":"PluginDetail.d.ts","sourceRoot":"","sources":["../../src/components/PluginDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAwIhC,CAAC"}
+{"version":3,"file":"PluginDetail.d.ts","sourceRoot":"","sources":["../../src/components/PluginDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAuIhC,CAAC"}

package/dist/components/PluginDetail.js

@@ -24,36 +24,33 @@ export const PluginDetail = () => {
             actions.setView(isFromDiscover ? "DISCOVER" : "INSTALLED");
         }
         else if (key.upArrow) {
-            if (isInstalledAndEnabled) {
-                setSelectedActionIndex((prev) => prev > 0 ? prev - 1 : INSTALLED_ACTIONS.length - 1);
-            }
-            else {
-                setSelectedScopeIndex((prev) => prev > 0 ? prev - 1 : SCOPES.length - 1);
-            }
+            setSelectedActionIndex((prev) => prev > 0 ? prev - 1 : INSTALLED_ACTIONS.length - 1);
+            setSelectedScopeIndex((prev) => prev > 0 ? prev - 1 : SCOPES.length - 1);
         }
         else if (key.downArrow) {
-            if (isInstalledAndEnabled) {
-                setSelectedActionIndex((prev) => prev < INSTALLED_ACTIONS.length - 1 ? prev + 1 : 0);
-            }
-            else {
-                setSelectedScopeIndex((prev) => prev < SCOPES.length - 1 ? prev + 1 : 0);
-            }
+            setSelectedActionIndex((prev) => prev < INSTALLED_ACTIONS.length - 1 ? prev + 1 : 0);
+            setSelectedScopeIndex((prev) => prev < SCOPES.length - 1 ? prev + 1 : 0);
         }
         else if (key.return && plugin) {
             if (isInstalledAndEnabled) {
-                const action = INSTALLED_ACTIONS[selectedActionIndex].id;
-                if (action === "uninstall") {
-                    actions.uninstallPlugin(plugin.name, plugin.marketplace);
-                }
-                else {
-                    actions.updatePlugin(plugin.name, plugin.marketplace);
-                }
-                actions.setView("INSTALLED");
+                setSelectedActionIndex((prev) => {
+                    const action = INSTALLED_ACTIONS[prev].id;
+                    if (action === "uninstall") {
+                        actions.uninstallPlugin(plugin.name, plugin.marketplace);
+                    }
+                    else {
+                        actions.updatePlugin(plugin.name, plugin.marketplace);
+                    }
+                    return prev;
+                });
             }
             else {
-                actions.installPlugin(plugin.name, plugin.marketplace, SCOPES[selectedScopeIndex].id);
-                actions.setView("INSTALLED");
+                setSelectedScopeIndex((prev) => {
+                    actions.installPlugin(plugin.name, plugin.marketplace, SCOPES[prev].id);
+                    return prev;
+                });
             }
+            actions.setView("INSTALLED");
         }
     });
     if (!plugin) {