snow-ai 0.2.11 → 0.2.13

package/dist/ui/components/ChatInput.js

@@ -11,18 +11,27 @@ const commands = [
     { name: 'clear', description: 'Clear chat context and conversation history' },
     { name: 'resume', description: 'Resume a conversation' },
     { name: 'mcp', description: 'Show Model Context Protocol services and tools' },
-    { name: 'yolo', description: 'Toggle unattended mode (auto-approve all tools)' },
-    { name: 'init', description: 'Analyze project and generate/update SNOW.md documentation' },
+    {
+        name: 'yolo',
+        description: 'Toggle unattended mode (auto-approve all tools)',
+    },
+    {
+        name: 'init',
+        description: 'Analyze project and generate/update SNOW.md documentation',
+    },
     { name: 'ide', description: 'Connect to VSCode editor and sync context' },
-    { name: 'compact', description: 'Compress conversation history using compact model' }
+    {
+        name: 'compact',
+        description: 'Compress conversation history using compact model',
+    },
 ];
-export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type your message...', disabled = false, chatHistory = [], onHistorySelect, yoloMode = false, contextUsage, snapshotFileCount }) {
+export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type your message...', disabled = false, chatHistory = [], onHistorySelect, yoloMode = false, contextUsage, snapshotFileCount, }) {
     const { stdout } = useStdout();
     const terminalWidth = stdout?.columns || 80;
     const uiOverhead = 8;
     const viewport = {
         width: Math.max(40, terminalWidth - uiOverhead),
-        height: 1
+        height: 1,
     };
     const [, forceUpdate] = useState({});
     const lastUpdateTime = useRef(0);
@@ -33,6 +42,18 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
         forceUpdate({});
     }, []);
     const [buffer] = useState(() => new TextBuffer(viewport, triggerUpdate));
+    // Cleanup buffer and timers on unmount
+    useEffect(() => {
+        return () => {
+            buffer.destroy();
+            if (inputTimer.current) {
+                clearTimeout(inputTimer.current);
+            }
+            if (escapeKeyTimer.current) {
+                clearTimeout(escapeKeyTimer.current);
+            }
+        };
+    }, [buffer]);
     // Command panel state
     const [showCommands, setShowCommands] = useState(false);
     const [commandSelectedIndex, setCommandSelectedIndex] = useState(0);
@@ -55,11 +76,10 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             .map((msg, index) => ({ ...msg, originalIndex: index }))
             .filter(msg => msg.role === 'user' && msg.content.trim());
         // Keep original order (oldest first, newest last) and map with display numbers
-        return userMessages
-            .map((msg, index) => ({
+        return userMessages.map((msg, index) => ({
             label: `${index + 1}. ${msg.content.slice(0, 50)}${msg.content.length > 50 ? '...' : ''}`,
             value: msg.originalIndex.toString(),
-            infoText: msg.content
+            infoText: msg.content,
         }));
     }, [chatHistory]);
     // Get filtered commands based on current input
@@ -100,7 +120,9 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             // Check if there's no space between '@' and cursor
             const afterAt = beforeCursor.slice(lastAtIndex + 1);
             if (!afterAt.includes(' ') && !afterAt.includes('\n')) {
-                if (!showFilePicker || fileQuery !== afterAt || atSymbolPosition !== lastAtIndex) {
+                if (!showFilePicker ||
+                    fileQuery !== afterAt ||
+                    atSymbolPosition !== lastAtIndex) {
                     setShowFilePicker(true);
                     setFileSelectedIndex(0);
                     setFileQuery(afterAt);
@@ -138,7 +160,8 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             buffer.setText(newText);
             // Calculate cursor position after the inserted file path + space
             // Reset cursor to beginning, then move to correct position
-            for (let i = 0; i < atSymbolPosition + filePath.length + 2; i++) { // +2 for @ and space
+            for (let i = 0; i < atSymbolPosition + filePath.length + 2; i++) {
+                // +2 for @ and space
                 if (i < buffer.getFullText().length) {
                     buffer.moveRight();
                 }
@@ -166,7 +189,7 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
     useEffect(() => {
         const newViewport = {
             width: Math.max(40, terminalWidth - uiOverhead),
-            height: 1
+            height: 1,
         };
         buffer.updateViewport(newViewport);
         triggerUpdate();
@@ -210,7 +233,8 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                 setEscapeKeyCount(0);
             }, 500);
             // Check for double escape
-            if (escapeKeyCount >= 1) { // This will be 2 after increment
+            if (escapeKeyCount >= 1) {
+                // This will be 2 after increment
                 const userMessages = getUserMessages();
                 if (userMessages.length > 0) {
                     setShowHistoryMenu(true);
@@ -240,7 +264,8 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             }
             // Enter - select history item
             if (key.return) {
-                if (userMessages.length > 0 && historySelectedIndex < userMessages.length) {
+                if (userMessages.length > 0 &&
+                    historySelectedIndex < userMessages.length) {
                     const selectedMessage = userMessages[historySelectedIndex];
                     if (selectedMessage) {
                         handleHistorySelect(selectedMessage.value);
@@ -269,12 +294,14 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             forceStateUpdate();
             return;
         }
-        // Windows: Alt+V, macOS: Option+V - Paste from clipboard (including images)
+        // Windows: Alt+V, macOS: Ctrl+V - Paste from clipboard (including images)
         // In Ink, key.meta represents:
         // - On Windows/Linux: Alt key (Meta key)
-        // - On macOS: Option key is also mapped to meta in most terminal emulators
-        // So we can use key.meta for both platforms
-        if (key.meta && input === 'v') {
+        // - On macOS: We use Ctrl+V to avoid conflict with VSCode shortcuts
+        const isPasteShortcut = process.platform === 'darwin'
+            ? key.ctrl && input === 'v'
+            : key.meta && input === 'v';
+        if (isPasteShortcut) {
             try {
                 // Try to read image from clipboard
                 if (process.platform === 'win32') {
@@ -283,7 +310,7 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                         const psScript = `Add-Type -AssemblyName System.Windows.Forms; Add-Type -AssemblyName System.Drawing; $clipboard = [System.Windows.Forms.Clipboard]::GetImage(); if ($clipboard -ne $null) { $ms = New-Object System.IO.MemoryStream; $clipboard.Save($ms, [System.Drawing.Imaging.ImageFormat]::Png); $bytes = $ms.ToArray(); $ms.Close(); [Convert]::ToBase64String($bytes) }`;
                         const base64 = execSync(`powershell -Command "${psScript}"`, {
                             encoding: 'utf-8',
-                            timeout: 5000
+                            timeout: 5000,
                         }).trim();
                         if (base64 && base64.length > 100) {
                             const dataUrl = `data:image/png;base64,${base64}`;
@@ -312,7 +339,7 @@ on error
 end try'`;
                         const hasImage = execSync(checkScript, {
                             encoding: 'utf-8',
-                            timeout: 2000
+                            timeout: 2000,
                         }).trim();
                         if (hasImage === 'hasImage') {
                             // Save clipboard image to temporary file and read it
@@ -320,12 +347,12 @@ end try'`;
                             const saveScript = `osascript -e 'set imgData to the clipboard as «class PNGf»' -e 'set fileRef to open for access POSIX file "${tmpFile}" with write permission' -e 'write imgData to fileRef' -e 'close access fileRef'`;
                             execSync(saveScript, {
                                 encoding: 'utf-8',
-                                timeout: 3000
+                                timeout: 3000,
                             });
                             // Read the file as base64
                             const base64 = execSync(`base64 -i "${tmpFile}"`, {
                                 encoding: 'utf-8',
-                                timeout: 2000
+                                timeout: 2000,
                             }).trim();
                             // Clean up temp file
                             try {
@@ -357,19 +384,19 @@ end try'`;
                     if (process.platform === 'win32') {
                         clipboardText = execSync('powershell -Command "Get-Clipboard"', {
                             encoding: 'utf-8',
-                            timeout: 2000
+                            timeout: 2000,
                         }).trim();
                     }
                     else if (process.platform === 'darwin') {
                         clipboardText = execSync('pbpaste', {
                             encoding: 'utf-8',
-                            timeout: 2000
+                            timeout: 2000,
                         }).trim();
                     }
                     else {
                         clipboardText = execSync('xclip -selection clipboard -o', {
                             encoding: 'utf-8',
-                            timeout: 2000
+                            timeout: 2000,
                         }).trim();
                     }
                     if (clipboardText) {
@@ -436,7 +463,8 @@ end try'`;
             }
             // Enter - select command
             if (key.return) {
-                if (filteredCommands.length > 0 && commandSelectedIndex < filteredCommands.length) {
+                if (filteredCommands.length > 0 &&
+                    commandSelectedIndex < filteredCommands.length) {
                     const selectedCommand = filteredCommands[commandSelectedIndex];
                     if (selectedCommand) {
                         // Execute command instead of inserting text
@@ -462,9 +490,11 @@ end try'`;
                 // 获取图片数据，但只包含占位符仍然存在的图片
                 const currentText = buffer.text; // 使用内部文本（包含占位符）
                 const allImages = buffer.getImages();
-                const validImages = allImages.filter(img => currentText.includes(img.placeholder)).map(img => ({
+                const validImages = allImages
+                    .filter(img => currentText.includes(img.placeholder))
+                    .map(img => ({
                     data: img.data,
-                    mimeType: img.mimeType
+                    mimeType: img.mimeType,
                 }));
                 buffer.setText('');
                 forceUpdate({});
@@ -548,7 +578,8 @@ end try'`;
             const displayText = buffer.text;
             const cursorPos = buffer.getCursorPosition();
             // 检查是否包含粘贴占位符或图片占位符并高亮显示
-            const hasPastePlaceholder = displayText.includes('[Paste ') && displayText.includes(' characters #');
+            const hasPastePlaceholder = displayText.includes('[Paste ') &&
+                displayText.includes(' characters #');
             const hasImagePlaceholder = displayText.includes('[image #');
             if (hasPastePlaceholder || hasImagePlaceholder) {
                 const atCursor = (() => {
@@ -571,7 +602,7 @@ end try'`;
                         cursorRendered = true;
                         const beforeCursorInPart = cpSlice(part, 0, cursorPos - partStart);
                         const afterCursorInPart = cpSlice(part, cursorPos - partStart + 1);
-                        return (React.createElement(React.Fragment, { key: partIndex }, isPlaceholder ? (React.createElement(Text, { color: isImagePlaceholder ? "magenta" : "cyan", dimColor: true },
+                        return (React.createElement(React.Fragment, { key: partIndex }, isPlaceholder ? (React.createElement(Text, { color: isImagePlaceholder ? 'magenta' : 'cyan', dimColor: true },
                             beforeCursorInPart,
                             React.createElement(Text, { backgroundColor: "white", color: "black" }, atCursor),
                             afterCursorInPart)) : (React.createElement(React.Fragment, null,
@@ -580,7 +611,7 @@ end try'`;
                             afterCursorInPart))));
                     }
                     else {
-                        return isPlaceholder ? (React.createElement(Text, { key: partIndex, color: isImagePlaceholder ? "magenta" : "cyan", dimColor: true }, part)) : (React.createElement(Text, { key: partIndex }, part));
+                        return isPlaceholder ? (React.createElement(Text, { key: partIndex, color: isImagePlaceholder ? 'magenta' : 'cyan', dimColor: true }, part)) : (React.createElement(Text, { key: partIndex }, part));
                     }
                 });
                 return (React.createElement(Text, null,
@@ -600,8 +631,8 @@ end try'`;
         }
         else {
             return (React.createElement(React.Fragment, null,
-                React.createElement(Text, { backgroundColor: disabled ? "gray" : "white", color: disabled ? "darkGray" : "black" }, ' '),
-                React.createElement(Text, { color: disabled ? "darkGray" : "gray", dimColor: true }, disabled ? 'Waiting for response...' : placeholder)));
+                React.createElement(Text, { backgroundColor: disabled ? 'gray' : 'white', color: disabled ? 'darkGray' : 'black' }, ' '),
+                React.createElement(Text, { color: disabled ? 'darkGray' : 'gray', dimColor: true }, disabled ? 'Waiting for response...' : placeholder)));
         }
     }, [buffer, disabled, placeholder]);
     return (React.createElement(Box, { flexDirection: "column", marginX: 1, key: `input-${showFilePicker ? 'picker' : 'normal'}` },
@@ -644,10 +675,21 @@ end try'`;
             React.createElement(Box, null,
                 React.createElement(FileList, { ref: fileListRef, query: fileQuery, selectedIndex: fileSelectedIndex, visible: showFilePicker, maxItems: 10, rootPath: process.cwd(), onFilteredCountChange: handleFilteredCountChange })),
             yoloMode && (React.createElement(Box, { marginTop: 1, paddingX: 1 },
-                React.createElement(Text, { color: "yellow", dimColor: true }, "\u2741  YOLO MODE ACTIVE - All tools will be auto-approved without confirmation"))),
+                React.createElement(Text, { color: "yellow", dimColor: true }, "\u2741 YOLO MODE ACTIVE - All tools will be auto-approved without confirmation"))),
             contextUsage && (React.createElement(Box, { marginTop: 1, paddingX: 1 },
                 React.createElement(Text, { color: "gray", dimColor: true }, (() => {
-                    const percentage = Math.min(100, (contextUsage.inputTokens / contextUsage.maxContextTokens) * 100);
+                    // Determine which caching system is being used
+                    const isAnthropic = (contextUsage.cacheCreationTokens || 0) > 0 ||
+                        (contextUsage.cacheReadTokens || 0) > 0;
+                    const isOpenAI = (contextUsage.cachedTokens || 0) > 0;
+                    // For Anthropic: Total = inputTokens + cacheCreationTokens + cacheReadTokens
+                    // For OpenAI: Total = inputTokens (cachedTokens are already included in inputTokens)
+                    const totalInputTokens = isAnthropic
+                        ? contextUsage.inputTokens +
+                            (contextUsage.cacheCreationTokens || 0) +
+                            (contextUsage.cacheReadTokens || 0)
+                        : contextUsage.inputTokens;
+                    const percentage = Math.min(100, (totalInputTokens / contextUsage.maxContextTokens) * 100);
                     let color;
                     if (percentage < 50)
                         color = 'green';
@@ -662,21 +704,45 @@ end try'`;
                             return `${(num / 1000).toFixed(1)}k`;
                         return num.toString();
                     };
+                    const hasCacheMetrics = isAnthropic || isOpenAI;
                     return (React.createElement(React.Fragment, null,
                         React.createElement(Text, { color: color },
                             percentage.toFixed(1),
                             "%"),
                         React.createElement(Text, null, " \u00B7 "),
-                        React.createElement(Text, { color: color }, formatNumber(contextUsage.inputTokens)),
-                        React.createElement(Text, null, " tokens")));
+                        React.createElement(Text, { color: color }, formatNumber(totalInputTokens)),
+                        React.createElement(Text, null, " tokens"),
+                        hasCacheMetrics && (React.createElement(React.Fragment, null,
+                            React.createElement(Text, null, " \u00B7 "),
+                            isAnthropic && (React.createElement(React.Fragment, null,
+                                (contextUsage.cacheReadTokens || 0) > 0 && (React.createElement(React.Fragment, null,
+                                    React.createElement(Text, { color: "cyan" },
+                                        "\u21AF",
+                                        ' ',
+                                        formatNumber(contextUsage.cacheReadTokens || 0),
+                                        ' ',
+                                        "cached"))),
+                                (contextUsage.cacheCreationTokens || 0) > 0 && (React.createElement(React.Fragment, null,
+                                    (contextUsage.cacheReadTokens || 0) > 0 && (React.createElement(Text, null, " \u00B7 ")),
+                                    React.createElement(Text, { color: "magenta" },
+                                        "\u25C6",
+                                        ' ',
+                                        formatNumber(contextUsage.cacheCreationTokens || 0),
+                                        ' ',
+                                        "new cache"))))),
+                            isOpenAI && (React.createElement(Text, { color: "cyan" },
+                                "\u21AF ",
+                                formatNumber(contextUsage.cachedTokens || 0),
+                                ' ',
+                                "cached"))))));
                 })()))),
             React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: "gray", dimColor: true }, showCommands && getFilteredCommands().length > 0
-                    ? "Type to filter commands"
+                    ? 'Type to filter commands'
                     : showFilePicker
-                        ? "Type to filter files • Tab/Enter to select • ESC to cancel"
+                        ? 'Type to filter files • Tab/Enter to select • ESC to cancel'
                         : (() => {
-                            const pasteKey = process.platform === 'darwin' ? 'Option+V' : 'Alt+V';
+                            const pasteKey = process.platform === 'darwin' ? 'Ctrl+V' : 'Alt+V';
                             return `Ctrl+L: delete to start • Ctrl+R: delete to end • ${pasteKey}: paste images • '@': files • '/': commands`;
                         })()))))));
 }

package/dist/ui/components/DiffViewer.d.ts

@@ -3,7 +3,6 @@ interface Props {
     oldContent?: string;
     newContent: string;
     filename?: string;
-    maxLines?: number;
 }
-export default function DiffViewer({ oldContent, newContent, filename, maxLines }: Props): React.JSX.Element;
+export default function DiffViewer({ oldContent, newContent, filename }: Props): React.JSX.Element;
 export {};

package/dist/ui/components/DiffViewer.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import * as Diff from 'diff';
-export default function DiffViewer({ oldContent = '', newContent, filename, maxLines = 100 }) {
+export default function DiffViewer({ oldContent = '', newContent, filename }) {
     // If no old content, show as new file creation
     const isNewFile = !oldContent || oldContent.trim() === '';
     if (isNewFile) {
-        const lines = newContent.split('\n').slice(0, maxLines);
-        const totalLines = newContent.split('\n').length;
+        const allLines = newContent.split('\n');
+        const totalLines = allLines.length;
         const lineNumberWidth = String(totalLines).length;
         return (React.createElement(Box, { flexDirection: "column" },
             React.createElement(Box, { marginBottom: 1 },
@@ -14,80 +14,80 @@ export default function DiffViewer({ oldContent = '', newContent, filename, maxL
                 filename && (React.createElement(Text, { color: "cyan" },
                     ' ',
                     filename))),
-            React.createElement(Box, { flexDirection: "column" },
-                lines.map((line, index) => (React.createElement(Box, { key: index },
-                    React.createElement(Text, { color: "gray", dimColor: true },
-                        String(index + 1).padStart(lineNumberWidth, ' '),
-                        ' '),
-                    React.createElement(Text, { color: "white", backgroundColor: "green" },
-                        "+ ",
-                        line)))),
-                totalLines > maxLines && (React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, { dimColor: true },
-                        "... ",
-                        totalLines - maxLines,
-                        " more lines"))))));
+            React.createElement(Box, { flexDirection: "column" }, allLines.map((line, index) => (React.createElement(Box, { key: index },
+                React.createElement(Text, { color: "gray", dimColor: true },
+                    String(index + 1).padStart(lineNumberWidth, ' '),
+                    " \u2502"),
+                React.createElement(Text, { color: "white", backgroundColor: "green" },
+                    "+ ",
+                    line)))))));
     }
     // Generate diff
     const diffResult = Diff.diffLines(oldContent, newContent);
-    // Calculate line numbers
+    // Calculate line numbers and build display lines
     let oldLineNum = 1;
     let newLineNum = 1;
     const totalOldLines = oldContent.split('\n').length;
     const totalNewLines = newContent.split('\n').length;
     const lineNumberWidth = Math.max(String(totalOldLines).length, String(totalNewLines).length);
+    const displayLines = [];
+    diffResult.forEach((part) => {
+        const lines = part.value.replace(/\n$/, '').split('\n');
+        lines.forEach((line) => {
+            if (part.added) {
+                displayLines.push({
+                    type: 'added',
+                    content: line,
+                    newLineNum: newLineNum++
+                });
+            }
+            else if (part.removed) {
+                displayLines.push({
+                    type: 'removed',
+                    content: line,
+                    oldLineNum: oldLineNum++
+                });
+            }
+            else {
+                displayLines.push({
+                    type: 'unchanged',
+                    content: line,
+                    oldLineNum: oldLineNum++,
+                    newLineNum: newLineNum++
+                });
+            }
+        });
+    });
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Box, { marginBottom: 1 },
             React.createElement(Text, { bold: true, color: "yellow" }, "[File Modified]"),
             filename && (React.createElement(Text, { color: "cyan" },
                 ' ',
                 filename))),
-        React.createElement(Box, { flexDirection: "column" },
-            diffResult.slice(0, maxLines).map((part, index) => {
-                const lines = part.value.replace(/\n$/, '').split('\n');
-                return lines.map((line, lineIndex) => {
-                    if (part.added) {
-                        const currentLineNum = newLineNum++;
-                        return (React.createElement(Box, { key: `${index}-${lineIndex}` },
-                            React.createElement(Text, { color: "gray", dimColor: true },
-                                ' '.repeat(lineNumberWidth),
-                                ' '),
-                            React.createElement(Text, { color: "gray", dimColor: true },
-                                String(currentLineNum).padStart(lineNumberWidth, ' '),
-                                ' '),
-                            React.createElement(Text, { color: "white", backgroundColor: "green" },
-                                "+ ",
-                                line)));
-                    }
-                    if (part.removed) {
-                        const currentLineNum = oldLineNum++;
-                        return (React.createElement(Box, { key: `${index}-${lineIndex}` },
-                            React.createElement(Text, { color: "gray", dimColor: true },
-                                String(currentLineNum).padStart(lineNumberWidth, ' '),
-                                ' '),
-                            React.createElement(Text, { color: "gray", dimColor: true },
-                                ' '.repeat(lineNumberWidth),
-                                ' '),
-                            React.createElement(Text, { color: "white", backgroundColor: "red" },
-                                "- ",
-                                line)));
-                    }
-                    // Unchanged lines
-                    const currentOldLineNum = oldLineNum++;
-                    const currentNewLineNum = newLineNum++;
-                    return (React.createElement(Box, { key: `${index}-${lineIndex}` },
-                        React.createElement(Text, { color: "gray", dimColor: true },
-                            String(currentOldLineNum).padStart(lineNumberWidth, ' '),
-                            ' '),
-                        React.createElement(Text, { color: "gray", dimColor: true },
-                            String(currentNewLineNum).padStart(lineNumberWidth, ' '),
-                            ' '),
-                        React.createElement(Text, { dimColor: true }, line)));
-                });
-            }).flat(),
-            diffResult.length > maxLines && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { dimColor: true },
-                    "... ",
-                    diffResult.length - maxLines,
-                    " more lines"))))));
+        React.createElement(Box, { flexDirection: "column" }, displayLines.map((displayLine, index) => {
+            if (displayLine.type === 'added') {
+                return (React.createElement(Box, { key: index },
+                    React.createElement(Text, { color: "gray", dimColor: true },
+                        String(displayLine.newLineNum).padStart(lineNumberWidth, ' '),
+                        " \u2502"),
+                    React.createElement(Text, { color: "white", backgroundColor: "green" },
+                        "+ ",
+                        displayLine.content)));
+            }
+            if (displayLine.type === 'removed') {
+                return (React.createElement(Box, { key: index },
+                    React.createElement(Text, { color: "gray", dimColor: true },
+                        String(displayLine.oldLineNum).padStart(lineNumberWidth, ' '),
+                        " \u2502"),
+                    React.createElement(Text, { color: "white", backgroundColor: "red" },
+                        "- ",
+                        displayLine.content)));
+            }
+            // Unchanged lines
+            return (React.createElement(Box, { key: index },
+                React.createElement(Text, { color: "gray", dimColor: true },
+                    String(displayLine.oldLineNum).padStart(lineNumberWidth, ' '),
+                    " \u2502"),
+                React.createElement(Text, { dimColor: true }, displayLine.content)));
+        }))));
 }

package/dist/ui/components/MCPInfoPanel.js

@@ -37,8 +37,7 @@ export default function MCPInfoPanel() {
         };
     }, []);
     if (isLoading) {
-        return (React.createElement(Box, { borderColor: "gray", borderStyle: "round", paddingX: 2, paddingY: 1, marginBottom: 1 },
-            React.createElement(Text, { color: "gray" }, "Loading MCP services...")));
+        return (React.createElement(Text, { color: "gray" }, "Loading MCP services..."));
     }
     if (errorMessage) {
         return (React.createElement(Box, { borderColor: "red", borderStyle: "round", paddingX: 2, paddingY: 1, marginBottom: 1 },

package/dist/ui/components/TodoTree.js

@@ -56,5 +56,5 @@ export default function TodoTree({ todos }) {
             React.createElement(Text, { bold: true, color: "cyan" }, "TODO List")),
         rootTodos.map(todo => renderTodo(todo)),
         React.createElement(Box, { marginTop: 0 },
-            React.createElement(Text, { dimColor: true, color: "gray" }, "[ ] Pending \u00B7 [~] In Progress \u00B7 [x] Completed"))));
+            React.createElement(Text, { dimColor: true, color: "gray" }, "[ ] Pending \u00B7 [x] Completed"))));
 }

package/dist/ui/components/ToolConfirmation.d.ts

@@ -1,8 +1,18 @@
 import React from 'react';
 export type ConfirmationResult = 'approve' | 'approve_always' | 'reject';
+export interface ToolCall {
+    id: string;
+    type: 'function';
+    function: {
+        name: string;
+        arguments: string;
+    };
+}
 interface Props {
     toolName: string;
+    toolArguments?: string;
+    allTools?: ToolCall[];
     onConfirm: (result: ConfirmationResult) => void;
 }
-export default function ToolConfirmation({ toolName, onConfirm }: Props): React.JSX.Element;
+export default function ToolConfirmation({ toolName, toolArguments, allTools, onConfirm }: Props): React.JSX.Element;
 export {};

package/dist/ui/components/ToolConfirmation.js

@@ -1,8 +1,60 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Box, Text } from 'ink';
 import SelectInput from 'ink-select-input';
-export default function ToolConfirmation({ toolName, onConfirm }) {
+// Helper function to format argument values with truncation
+function formatArgumentValue(value, maxLength = 100) {
+    if (value === null || value === undefined) {
+        return String(value);
+    }
+    const stringValue = typeof value === 'string' ? value : JSON.stringify(value);
+    if (stringValue.length <= maxLength) {
+        return stringValue;
+    }
+    return stringValue.substring(0, maxLength) + '...';
+}
+// Helper function to convert parsed arguments to tree display format
+function formatArgumentsAsTree(args) {
+    const keys = Object.keys(args);
+    return keys.map((key, index) => ({
+        key,
+        value: formatArgumentValue(args[key]),
+        isLast: index === keys.length - 1
+    }));
+}
+export default function ToolConfirmation({ toolName, toolArguments, allTools, onConfirm }) {
     const [hasSelected, setHasSelected] = useState(false);
+    // Parse and format tool arguments for display (single tool)
+    const formattedArgs = useMemo(() => {
+        if (!toolArguments)
+            return null;
+        try {
+            const parsed = JSON.parse(toolArguments);
+            return formatArgumentsAsTree(parsed);
+        }
+        catch {
+            return null;
+        }
+    }, [toolArguments]);
+    // Parse and format all tools arguments for display (multiple tools)
+    const formattedAllTools = useMemo(() => {
+        if (!allTools || allTools.length === 0)
+            return null;
+        return allTools.map(tool => {
+            try {
+                const parsed = JSON.parse(tool.function.arguments);
+                return {
+                    name: tool.function.name,
+                    args: formatArgumentsAsTree(parsed)
+                };
+            }
+            catch {
+                return {
+                    name: tool.function.name,
+                    args: []
+                };
+            }
+        });
+    }, [allTools]);
     const items = [
         {
             label: 'Approve (once)',
@@ -26,10 +78,38 @@ export default function ToolConfirmation({ toolName, onConfirm }) {
     return (React.createElement(Box, { flexDirection: "column", marginX: 1, marginY: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1 },
         React.createElement(Box, { marginBottom: 1 },
             React.createElement(Text, { bold: true, color: "yellow" }, "[Tool Confirmation]")),
-        React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, null,
-                "Tool: ",
-                React.createElement(Text, { bold: true, color: "cyan" }, toolName))),
+        !formattedAllTools && (React.createElement(React.Fragment, null,
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, null,
+                    "Tool: ",
+                    React.createElement(Text, { bold: true, color: "cyan" }, toolName))),
+            formattedArgs && formattedArgs.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                React.createElement(Text, { dimColor: true }, "Arguments:"),
+                formattedArgs.map((arg, index) => (React.createElement(Box, { key: index, flexDirection: "column" },
+                    React.createElement(Text, { color: "gray", dimColor: true },
+                        arg.isLast ? '└─' : '├─',
+                        " ",
+                        arg.key,
+                        ": ",
+                        React.createElement(Text, { color: "white" }, arg.value))))))))),
+        formattedAllTools && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, null,
+                    "Tools: ",
+                    React.createElement(Text, { bold: true, color: "cyan" },
+                        formattedAllTools.length,
+                        " tools in parallel"))),
+            formattedAllTools.map((tool, toolIndex) => (React.createElement(Box, { key: toolIndex, flexDirection: "column", marginBottom: toolIndex < formattedAllTools.length - 1 ? 1 : 0 },
+                React.createElement(Text, { color: "cyan", bold: true },
+                    toolIndex + 1,
+                    ". ",
+                    tool.name),
+                tool.args.length > 0 && (React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, tool.args.map((arg, argIndex) => (React.createElement(Text, { key: argIndex, color: "gray", dimColor: true },
+                    arg.isLast ? '└─' : '├─',
+                    " ",
+                    arg.key,
+                    ": ",
+                    React.createElement(Text, { color: "white" }, arg.value))))))))))),
         React.createElement(Box, { marginBottom: 1 },
             React.createElement(Text, { dimColor: true }, "Select action:")),
         !hasSelected && (React.createElement(SelectInput, { items: items, onSelect: handleSelect })),