dexto 1.3.0 → 1.4.0

package/dist/cli/ink-cli/components/overlays/ToolBrowser.js

@@ -0,0 +1,400 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ToolBrowser Component
+ * Interactive browser for exploring available tools
+ * Features:
+ * - Search/filter tools by name
+ * - View tool details (description, schema)
+ * - Shows source (MCP server or Internal)
+ */
+import { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, } from 'react';
+import { Box, Text } from 'ink';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { writeToClipboard } from '../../utils/clipboardUtils.js';
+const MAX_VISIBLE_ITEMS = 12;
+const MAX_DETAIL_LINES = 15;
+/**
+ * Tool browser with search and detail views
+ */
+const ToolBrowser = forwardRef(function ToolBrowser({ isVisible, onClose, agent }, ref) {
+    const { columns, rows } = useTerminalSize();
+    const [tools, setTools] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [viewMode, setViewMode] = useState('list');
+    const [selectedTool, setSelectedTool] = useState(null);
+    const [detailScrollOffset, setDetailScrollOffset] = useState(0);
+    const [copyFeedback, setCopyFeedback] = useState(null);
+    const selectedIndexRef = useRef(selectedIndex);
+    const viewModeRef = useRef(viewMode);
+    const detailScrollOffsetRef = useRef(detailScrollOffset);
+    const detailMaxScrollOffsetRef = useRef(0);
+    const selectedToolRef = useRef(null);
+    // Keep refs in sync
+    selectedIndexRef.current = selectedIndex;
+    viewModeRef.current = viewMode;
+    detailScrollOffsetRef.current = detailScrollOffset;
+    selectedToolRef.current = selectedTool;
+    // Fetch tools from agent
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        let cancelled = false;
+        setIsLoading(true);
+        setSearchQuery('');
+        setSelectedIndex(0);
+        setScrollOffset(0);
+        setViewMode('list');
+        setSelectedTool(null);
+        const fetchTools = async () => {
+            try {
+                const [allTools, mcpTools] = await Promise.all([
+                    agent.getAllTools(),
+                    agent.getAllMcpTools(),
+                ]);
+                const toolList = [];
+                const mcpToolNames = new Set(Object.keys(mcpTools));
+                for (const [toolName, toolInfo] of Object.entries(allTools)) {
+                    const isMcpTool = mcpToolNames.has(toolName) || toolName.startsWith('mcp--');
+                    // Extract server name from MCP tool name (format: mcp--serverName--toolName)
+                    let serverName;
+                    if (toolName.startsWith('mcp--')) {
+                        const parts = toolName.split('--');
+                        if (parts.length >= 2) {
+                            serverName = parts[1];
+                        }
+                    }
+                    toolList.push({
+                        name: toolName,
+                        description: toolInfo.description || 'No description available',
+                        source: isMcpTool ? 'mcp' : 'internal',
+                        serverName,
+                        inputSchema: toolInfo.parameters,
+                    });
+                }
+                // Sort: internal tools first, then MCP tools
+                toolList.sort((a, b) => {
+                    if (a.source !== b.source) {
+                        return a.source === 'internal' ? -1 : 1;
+                    }
+                    return a.name.localeCompare(b.name);
+                });
+                if (!cancelled) {
+                    setTools(toolList);
+                    setIsLoading(false);
+                }
+            }
+            catch (error) {
+                if (!cancelled) {
+                    setTools([]);
+                    setIsLoading(false);
+                }
+            }
+        };
+        void fetchTools();
+        return () => {
+            cancelled = true;
+        };
+    }, [isVisible, agent]);
+    // Filter tools based on search query
+    const filteredTools = useMemo(() => {
+        if (!searchQuery.trim()) {
+            return tools;
+        }
+        const query = searchQuery.toLowerCase();
+        return tools.filter((tool) => {
+            const name = tool.name.toLowerCase();
+            const desc = tool.description.toLowerCase();
+            const server = (tool.serverName || '').toLowerCase();
+            return name.includes(query) || desc.includes(query) || server.includes(query);
+        });
+    }, [tools, searchQuery]);
+    // Adjust selected index when filter changes
+    useEffect(() => {
+        if (selectedIndex >= filteredTools.length) {
+            setSelectedIndex(Math.max(0, filteredTools.length - 1));
+        }
+    }, [filteredTools.length, selectedIndex]);
+    // Calculate scroll offset
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex >= scrollOffset + MAX_VISIBLE_ITEMS) {
+            setScrollOffset(selectedIndex - MAX_VISIBLE_ITEMS + 1);
+        }
+    }, [selectedIndex, scrollOffset]);
+    // Handle showing tool details
+    const showToolDetails = (tool) => {
+        setSelectedTool(tool);
+        setViewMode('detail');
+        setDetailScrollOffset(0);
+    };
+    // Handle going back to list
+    const goBackToList = () => {
+        setViewMode('list');
+        setSelectedTool(null);
+    };
+    // Expose handleInput method via ref
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            if (!isVisible)
+                return false;
+            // In detail view (use ref to get latest value)
+            if (viewModeRef.current === 'detail') {
+                if (key.escape || key.backspace || key.delete) {
+                    goBackToList();
+                    return true;
+                }
+                // Handle scrolling in detail view - check refs before setState to avoid flicker
+                if (key.upArrow) {
+                    if (detailScrollOffsetRef.current > 0) {
+                        setDetailScrollOffset((prev) => prev - 1);
+                    }
+                    return true;
+                }
+                if (key.downArrow) {
+                    if (detailScrollOffsetRef.current < detailMaxScrollOffsetRef.current) {
+                        setDetailScrollOffset((prev) => prev + 1);
+                    }
+                    return true;
+                }
+                // Copy schema to clipboard
+                if (input === 'c' || input === 'C') {
+                    const tool = selectedToolRef.current;
+                    if (tool) {
+                        const schema = {
+                            type: 'function',
+                            name: tool.name,
+                            description: tool.description,
+                            parameters: tool.inputSchema || {},
+                        };
+                        void writeToClipboard(JSON.stringify(schema, null, 2)).then((success) => {
+                            setCopyFeedback(success ? 'Copied!' : 'Copy failed');
+                            setTimeout(() => setCopyFeedback(null), 1500);
+                        });
+                    }
+                    return true;
+                }
+                return true; // Consume all input in detail view
+            }
+            // In list view
+            // Escape closes
+            if (key.escape) {
+                onClose();
+                return true;
+            }
+            // Handle character input for search
+            if (input && !key.return && !key.upArrow && !key.downArrow && !key.tab) {
+                // Backspace
+                if (key.backspace || key.delete) {
+                    setSearchQuery((prev) => prev.slice(0, -1));
+                    return true;
+                }
+                // Regular character - add to search
+                if (input.length === 1 && input.charCodeAt(0) >= 32) {
+                    setSearchQuery((prev) => prev + input);
+                    setSelectedIndex(0);
+                    setScrollOffset(0);
+                    return true;
+                }
+            }
+            // Backspace when no other input
+            if (key.backspace || key.delete) {
+                setSearchQuery((prev) => prev.slice(0, -1));
+                return true;
+            }
+            const itemsLength = filteredTools.length;
+            if (itemsLength === 0)
+                return false;
+            if (key.upArrow) {
+                const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
+                setSelectedIndex(nextIndex);
+                selectedIndexRef.current = nextIndex;
+                return true;
+            }
+            if (key.downArrow) {
+                const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
+                setSelectedIndex(nextIndex);
+                selectedIndexRef.current = nextIndex;
+                return true;
+            }
+            if (key.return && itemsLength > 0) {
+                const tool = filteredTools[selectedIndexRef.current];
+                if (tool) {
+                    showToolDetails(tool);
+                    return true;
+                }
+            }
+            return false;
+        },
+    }), [isVisible, filteredTools, onClose, viewMode]);
+    if (!isVisible)
+        return null;
+    if (isLoading) {
+        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: "Loading tools..." }) }));
+    }
+    // Detail view
+    if (viewMode === 'detail' && selectedTool) {
+        // Calculate max visible lines based on terminal height
+        const maxVisibleLines = Math.min(18, Math.max(5, rows - 6)); // Cap at 18 to reduce flicker
+        return (_jsx(ToolDetailView, { tool: selectedTool, columns: columns, scrollOffset: detailScrollOffset, maxVisibleLines: maxVisibleLines, maxScrollOffsetRef: detailMaxScrollOffsetRef, copyFeedback: copyFeedback }));
+    }
+    // List view
+    const visibleTools = filteredTools.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS);
+    // Show counts based on filtered results, not total
+    const filteredInternalCount = filteredTools.filter((t) => t.source === 'internal').length;
+    const filteredMcpCount = filteredTools.filter((t) => t.source === 'mcp').length;
+    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsxs(Box, { paddingX: 0, paddingY: 0, children: [_jsx(Text, { color: "cyan", bold: true, children: "Tool Browser" }), _jsxs(Text, { dimColor: true, children: [' ', "(", filteredTools.length, " tools: ", filteredInternalCount, " internal,", ' ', filteredMcpCount, " MCP)"] })] }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate, Enter view details, Esc close" }) }), _jsxs(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Search: " }), _jsx(Text, { color: searchQuery ? 'white' : 'gray', children: searchQuery || 'Type to filter...' }), _jsx(Text, { color: "cyan", children: "\u258C" })] }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: '─'.repeat(Math.min(60, columns - 2)) }) }), filteredTools.length === 0 ? (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: "No tools match your search" }) })) : (visibleTools.map((tool, visibleIndex) => {
+                const actualIndex = scrollOffset + visibleIndex;
+                const isSelected = actualIndex === selectedIndex;
+                return (_jsxs(Box, { paddingX: 0, paddingY: 0, children: [_jsx(Text, { color: isSelected ? 'cyan' : 'white', children: isSelected ? '▶ ' : '  ' }), _jsx(Text, { color: isSelected ? 'cyan' : 'white', bold: isSelected, children: truncateText(tool.name, 35) }), _jsxs(Text, { color: tool.source === 'internal' ? 'magenta' : 'blue', children: [' ', "[", tool.source === 'internal' ? 'Internal' : 'MCP', "]"] }), tool.serverName && _jsxs(Text, { dimColor: true, children: [" (", tool.serverName, ")"] })] }, tool.name));
+            })), filteredTools.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [scrollOffset > 0 ? '↑ more above' : '', scrollOffset > 0 && scrollOffset + MAX_VISIBLE_ITEMS < filteredTools.length
+                            ? ' | '
+                            : '', scrollOffset + MAX_VISIBLE_ITEMS < filteredTools.length
+                            ? '↓ more below'
+                            : ''] }) }))] }));
+});
+/**
+ * Build detail line data for a tool (plain data, not React elements)
+ */
+function buildDetailLineData(tool, maxWidth) {
+    const lines = [];
+    // Tool name
+    lines.push({ type: 'title', text: tool.name });
+    // Source
+    lines.push({ type: 'source', source: tool.source, serverName: tool.serverName });
+    // Empty line before description
+    lines.push({ type: 'empty' });
+    // Description header
+    lines.push({ type: 'header', text: 'Description:' });
+    // Description content (wrapped)
+    const descriptionLines = wrapText(tool.description, maxWidth - 2).split('\n');
+    for (const descLine of descriptionLines) {
+        lines.push({ type: 'description', text: descLine });
+    }
+    // Parameters section
+    if (tool.inputSchema) {
+        const properties = tool.inputSchema.properties;
+        const required = tool.inputSchema.required || [];
+        if (properties && Object.keys(properties).length > 0) {
+            // Empty line before parameters
+            lines.push({ type: 'empty' });
+            // Parameters header
+            lines.push({ type: 'header', text: 'Parameters:' });
+            // Each parameter
+            for (const [propName, propSchema] of Object.entries(properties)) {
+                const paramType = propSchema.type || 'any';
+                const description = propSchema.description;
+                const isRequired = required.includes(propName);
+                const enumValues = propSchema.enum;
+                // Parameter name line
+                lines.push({
+                    type: 'param-name',
+                    name: propName,
+                    paramType,
+                    required: isRequired,
+                });
+                // Parameter description (wrapped)
+                if (description) {
+                    const paramDescLines = wrapText(description, maxWidth - 6).split('\n');
+                    for (const paramDescLine of paramDescLines) {
+                        lines.push({ type: 'param-desc', text: paramDescLine });
+                    }
+                }
+                // Enum values
+                if (enumValues) {
+                    lines.push({ type: 'param-enum', values: enumValues });
+                }
+                // Empty line between parameters
+                lines.push({ type: 'empty' });
+            }
+        }
+        else {
+            // Empty line before "no parameters"
+            lines.push({ type: 'empty' });
+            lines.push({ type: 'param-desc', text: 'No parameters' });
+        }
+    }
+    return lines;
+}
+/**
+ * Render a single detail line from data
+ */
+function renderDetailLine(line, index) {
+    switch (line.type) {
+        case 'title':
+            return (_jsx(Text, { color: "yellow", bold: true, children: line.text }));
+        case 'source':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "Source: " }), _jsx(Text, { color: line.source === 'internal' ? 'magenta' : 'blue', children: line.source === 'internal' ? 'Internal' : 'MCP' }), line.serverName && _jsxs(Text, { dimColor: true, children: [" (server: ", line.serverName, ")"] })] }));
+        case 'empty':
+            return _jsx(Text, { children: " " });
+        case 'header':
+            return _jsx(Text, { dimColor: true, children: line.text });
+        case 'description':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { children: line.text })] }));
+        case 'param-name':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "yellow", children: line.name }), _jsxs(Text, { dimColor: true, children: [" (", line.paramType, ")"] }), line.required && _jsx(Text, { color: "red", children: " *required" })] }));
+        case 'param-desc':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: line.text })] }));
+        case 'param-enum':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { dimColor: true, children: ["Allowed: ", line.values.join(' | ')] })] }));
+    }
+}
+/**
+ * Tool detail view component with scrolling support
+ */
+function ToolDetailView({ tool, columns, scrollOffset, maxVisibleLines, maxScrollOffsetRef, copyFeedback, }) {
+    const maxWidth = Math.min(80, columns - 4);
+    // Build plain data for lines (memoized)
+    const lineData = useMemo(() => buildDetailLineData(tool, maxWidth), [tool, maxWidth]);
+    // Calculate visible range and update max scroll offset ref
+    const totalLines = lineData.length;
+    const maxScrollOffset = Math.max(0, totalLines - maxVisibleLines);
+    maxScrollOffsetRef.current = maxScrollOffset;
+    const clampedOffset = Math.min(scrollOffset, maxScrollOffset);
+    // Calculate scroll indicators
+    const hasMoreAbove = clampedOffset > 0;
+    const hasMoreBelow = clampedOffset + maxVisibleLines < totalLines;
+    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsxs(Box, { paddingX: 0, paddingY: 0, children: [_jsx(Text, { color: "cyan", bold: true, children: "Tool Details" }), _jsx(Text, { dimColor: true, children: " - \u2191\u2193 scroll, c copy schema, Esc back" }), copyFeedback && (_jsxs(Text, { color: "green", bold: true, children: [' ', copyFeedback] }))] }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: '─'.repeat(Math.min(60, columns - 2)) }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: hasMoreAbove ? `↑ ${clampedOffset} more above` : ' ' }) }), Array.from({ length: maxVisibleLines }, (_, i) => {
+                const absoluteIndex = clampedOffset + i;
+                const line = lineData[absoluteIndex];
+                return (_jsx(Box, { paddingX: 0, paddingY: 0, children: line ? renderDetailLine(line, absoluteIndex) : _jsx(Text, { children: " " }) }, i));
+            }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { dimColor: true, children: hasMoreBelow
+                        ? `↓ ${totalLines - clampedOffset - maxVisibleLines} more below`
+                        : ' ' }) })] }));
+}
+/**
+ * Truncate text to max length with ellipsis
+ */
+function truncateText(text, maxLength) {
+    if (text.length <= maxLength)
+        return text;
+    return text.slice(0, maxLength - 1) + '…';
+}
+/**
+ * Wrap text to fit within max width
+ */
+function wrapText(text, maxWidth) {
+    if (text.length <= maxWidth)
+        return text;
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+    for (const word of words) {
+        if (currentLine.length + word.length + 1 <= maxWidth) {
+            currentLine += (currentLine ? ' ' : '') + word;
+        }
+        else {
+            if (currentLine)
+                lines.push(currentLine);
+            currentLine = word;
+        }
+    }
+    if (currentLine)
+        lines.push(currentLine);
+    return lines.join('\n');
+}
+export default ToolBrowser;

package/dist/cli/ink-cli/components/renderers/DiffRenderer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DiffRenderer Component
+ *
+ * Renders unified diff output with colored lines and line numbers.
+ * Used for edit_file and write_file (overwrite) tool results in message list.
+ * Matches the approval preview UX style.
+ */
+import type { DiffDisplayData } from '@dexto/core';
+interface DiffRendererProps {
+    /** Diff display data from tool result */
+    data: DiffDisplayData;
+    /** Maximum lines to display before truncating */
+    maxLines?: number;
+}
+/**
+ * Renders unified diff with colored lines, line numbers, and word-level highlighting.
+ * Matches the approval preview UX style. No truncation by default.
+ */
+export declare function DiffRenderer({ data, maxLines }: DiffRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DiffRenderer.d.ts.map

package/dist/cli/ink-cli/components/renderers/DiffRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/renderers/DiffRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAWnD,UAAU,iBAAiB;IACvB,yCAAyC;IACzC,IAAI,EAAE,eAAe,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAmB,EAAE,EAAE,iBAAiB,2CAkH5E"}

package/dist/cli/ink-cli/components/renderers/DiffRenderer.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DiffRenderer Component
+ *
+ * Renders unified diff output with colored lines and line numbers.
+ * Used for edit_file and write_file (overwrite) tool results in message list.
+ * Matches the approval preview UX style.
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { makeRelativePath } from '../../utils/messageFormatting.js';
+import { parseUnifiedDiff, findLinePairs, computeWordDiff, getLineNumWidth, DiffLine, HunkSeparator, } from './diff-shared.js';
+/**
+ * Renders unified diff with colored lines, line numbers, and word-level highlighting.
+ * Matches the approval preview UX style. No truncation by default.
+ */
+export function DiffRenderer({ data, maxLines = Infinity }) {
+    const { unified, filename, additions, deletions } = data;
+    const hunks = parseUnifiedDiff(unified);
+    // Calculate max line number for width
+    let maxLineNum = 1;
+    for (const hunk of hunks) {
+        for (const line of hunk.lines) {
+            maxLineNum = Math.max(maxLineNum, line.lineNum);
+        }
+    }
+    const lineNumWidth = getLineNumWidth(maxLineNum);
+    // Find line pairs for word-level diff
+    const allLinePairs = hunks.map((hunk) => findLinePairs(hunk.lines));
+    // Count total display lines and apply truncation
+    let totalLines = 0;
+    for (const hunk of hunks) {
+        totalLines += hunk.lines.length;
+    }
+    const shouldTruncate = totalLines > maxLines;
+    let linesRendered = 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: '  ⎿ ' }), _jsx(Text, { children: makeRelativePath(filename) }), _jsxs(Text, { color: "green", children: [" +", additions] }), _jsxs(Text, { color: "red", children: [" -", deletions] })] }), _jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [hunks.map((hunk, hunkIndex) => {
+                        if (shouldTruncate && linesRendered >= maxLines) {
+                            return null;
+                        }
+                        const linePairs = allLinePairs[hunkIndex];
+                        const processedIndices = new Set();
+                        return (_jsxs(React.Fragment, { children: [hunkIndex > 0 && _jsx(HunkSeparator, {}), hunk.lines.map((line, lineIndex) => {
+                                    if (shouldTruncate && linesRendered >= maxLines) {
+                                        return null;
+                                    }
+                                    if (processedIndices.has(lineIndex)) {
+                                        return null;
+                                    }
+                                    const pair = linePairs.get(lineIndex);
+                                    if (pair) {
+                                        processedIndices.add(lineIndex + 1);
+                                        if (shouldTruncate && linesRendered + 2 > maxLines) {
+                                            linesRendered = maxLines;
+                                            return null;
+                                        }
+                                        linesRendered += 2;
+                                        const { oldParts, newParts } = computeWordDiff(pair.del.content, pair.add.content);
+                                        return (_jsxs(React.Fragment, { children: [_jsx(DiffLine, { type: "deletion", lineNum: pair.del.lineNum, lineNumWidth: lineNumWidth, content: pair.del.content, wordDiffParts: oldParts }), _jsx(DiffLine, { type: "addition", lineNum: pair.add.lineNum, lineNumWidth: lineNumWidth, content: pair.add.content, wordDiffParts: newParts })] }, lineIndex));
+                                    }
+                                    linesRendered++;
+                                    return (_jsx(DiffLine, { type: line.type, lineNum: line.lineNum, lineNumWidth: lineNumWidth, content: line.content }, lineIndex));
+                                })] }, hunkIndex));
+                    }), shouldTruncate && _jsxs(Text, { dimColor: true, children: ["... +", totalLines - maxLines, " lines"] })] })] }));
+}

package/dist/cli/ink-cli/components/renderers/FilePreviewRenderer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * File Preview Renderers
+ *
+ * Preview renderers for edit_file and write_file approval prompts.
+ * - DiffPreview: for edit_file and write_file (overwrite)
+ * - CreateFilePreview: for write_file (new file)
+ */
+import type { DiffDisplayData, FileDisplayData } from '@dexto/core';
+interface DiffPreviewProps {
+    data: DiffDisplayData;
+    /** Header text: "Edit file" or "Overwrite file" */
+    headerType: 'edit' | 'overwrite';
+}
+/**
+ * Enhanced diff preview for edit_file and write_file (overwrite) approval
+ * Shows full diff with line backgrounds, hunk collapsing, and word-level highlighting
+ */
+export declare function DiffPreview({ data, headerType }: DiffPreviewProps): import("react/jsx-runtime").JSX.Element;
+interface CreateFilePreviewProps {
+    data: FileDisplayData;
+}
+/**
+ * Preview for write_file (new file creation)
+ * Shows full file content with line numbers, white text
+ */
+export declare function CreateFilePreview({ data }: CreateFilePreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilePreviewRenderer.d.ts.map

package/dist/cli/ink-cli/components/renderers/FilePreviewRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePreviewRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/renderers/FilePreviewRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAgBpE,UAAU,gBAAgB;IACtB,IAAI,EAAE,eAAe,CAAC;IACtB,mDAAmD;IACnD,UAAU,EAAE,MAAM,GAAG,WAAW,CAAC;CACpC;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CAiGjE;AAMD,UAAU,sBAAsB;IAC5B,IAAI,EAAE,eAAe,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE,sBAAsB,2CAoDjE"}

package/dist/cli/ink-cli/components/renderers/FilePreviewRenderer.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * File Preview Renderers
+ *
+ * Preview renderers for edit_file and write_file approval prompts.
+ * - DiffPreview: for edit_file and write_file (overwrite)
+ * - CreateFilePreview: for write_file (new file)
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { makeRelativePath } from '../../utils/messageFormatting.js';
+import { parseUnifiedDiff, findLinePairs, computeWordDiff, getLineNumWidth, formatLineNum, DiffLine, HunkSeparator, } from './diff-shared.js';
+/**
+ * Enhanced diff preview for edit_file and write_file (overwrite) approval
+ * Shows full diff with line backgrounds, hunk collapsing, and word-level highlighting
+ */
+export function DiffPreview({ data, headerType }) {
+    const { unified, filename } = data;
+    const hunks = parseUnifiedDiff(unified);
+    // Calculate max line number for width
+    let maxLineNum = 1;
+    for (const hunk of hunks) {
+        for (const line of hunk.lines) {
+            maxLineNum = Math.max(maxLineNum, line.lineNum);
+        }
+    }
+    const lineNumWidth = getLineNumWidth(maxLineNum);
+    // Find line pairs for word-level diff
+    const allLinePairs = hunks.map((hunk) => findLinePairs(hunk.lines));
+    const headerText = headerType === 'edit' ? 'Edit file' : 'Overwrite file';
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "cyan", bold: true, children: headerText }) }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsx(Box, { marginBottom: 0, children: _jsx(Text, { children: makeRelativePath(filename) }) }), hunks.map((hunk, hunkIndex) => {
+                        const linePairs = allLinePairs[hunkIndex];
+                        const processedIndices = new Set();
+                        return (_jsxs(React.Fragment, { children: [hunkIndex > 0 && _jsx(HunkSeparator, {}), hunk.lines.map((line, lineIndex) => {
+                                    // Skip if already processed as part of a pair
+                                    if (processedIndices.has(lineIndex)) {
+                                        return null;
+                                    }
+                                    // Check if this is part of a deletion/addition pair
+                                    const pair = linePairs.get(lineIndex);
+                                    if (pair) {
+                                        // Mark the addition line as processed
+                                        processedIndices.add(lineIndex + 1);
+                                        // Compute word-level diff
+                                        const { oldParts, newParts } = computeWordDiff(pair.del.content, pair.add.content);
+                                        return (_jsxs(React.Fragment, { children: [_jsx(DiffLine, { type: "deletion", lineNum: pair.del.lineNum, lineNumWidth: lineNumWidth, content: pair.del.content, wordDiffParts: oldParts }), _jsx(DiffLine, { type: "addition", lineNum: pair.add.lineNum, lineNumWidth: lineNumWidth, content: pair.add.content, wordDiffParts: newParts })] }, lineIndex));
+                                    }
+                                    // Regular line (no word-level diff)
+                                    return (_jsx(DiffLine, { type: line.type, lineNum: line.lineNum, lineNumWidth: lineNumWidth, content: line.content }, lineIndex));
+                                })] }, hunkIndex));
+                    })] })] }));
+}
+/**
+ * Preview for write_file (new file creation)
+ * Shows full file content with line numbers, white text
+ */
+export function CreateFilePreview({ data }) {
+    const { path, content, lineCount } = data;
+    if (!content) {
+        // Fallback if content not provided
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "cyan", bold: true, children: "Create file" }) }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { children: makeRelativePath(path) }), lineCount && _jsxs(Text, { dimColor: true, children: [lineCount, " lines"] })] })] }));
+    }
+    const lines = content.split('\n');
+    const lineNumWidth = getLineNumWidth(lines.length);
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "cyan", bold: true, children: "Create file" }) }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsx(Box, { marginBottom: 0, children: _jsx(Text, { children: makeRelativePath(path) }) }), lines.map((line, index) => (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: formatLineNum(index + 1, lineNumWidth) }), _jsxs(Text, { children: ['   ', line] })] }, index)))] })] }));
+}

package/dist/cli/ink-cli/components/renderers/FileRenderer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * FileRenderer Component
+ *
+ * Renders file operation status.
+ * - Read: "Read N lines"
+ * - Write/Create: "Wrote N lines to filename"
+ */
+import type { FileDisplayData } from '@dexto/core';
+interface FileRendererProps {
+    /** File display data from tool result */
+    data: FileDisplayData;
+}
+/**
+ * Renders file operation status.
+ * Uses ⎿ character for continuation lines.
+ */
+export declare function FileRenderer({ data }: FileRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FileRenderer.d.ts.map

package/dist/cli/ink-cli/components/renderers/FileRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/renderers/FileRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,UAAU,iBAAiB;IACvB,yCAAyC;IACzC,IAAI,EAAE,eAAe,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAoCvD"}

package/dist/cli/ink-cli/components/renderers/FileRenderer.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+/**
+ * Renders file operation status.
+ * Uses ⎿ character for continuation lines.
+ */
+export function FileRenderer({ data }) {
+    const { operation, lineCount } = data;
+    // Format based on operation type
+    if (operation === 'read') {
+        // Format: "Read N lines"
+        const lineText = lineCount !== undefined ? `${lineCount} lines` : 'file';
+        return (_jsxs(Text, { dimColor: true, children: ['  ⎿ ', "Read ", lineText] }));
+    }
+    // For write/create operations
+    if (operation === 'write' || operation === 'create') {
+        const lineText = lineCount !== undefined ? `${lineCount} lines` : 'content';
+        return (_jsxs(Text, { dimColor: true, children: ['  ⎿ ', "Wrote ", lineText] }));
+    }
+    // Delete operation
+    if (operation === 'delete') {
+        return _jsxs(Text, { dimColor: true, children: ['  ⎿ ', "Deleted file"] });
+    }
+    // Fallback
+    return (_jsxs(Text, { dimColor: true, children: ['  ⎿ ', operation] }));
+}