dexto 1.3.0 → 1.5.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, { color: "gray", 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, { color: "gray", children: [' ', "(", filteredTools.length, " tools: ", filteredInternalCount, " internal,", ' ', filteredMcpCount, " MCP)"] })] }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", 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, { color: "gray", children: '─'.repeat(Math.min(60, columns - 2)) }) }), filteredTools.length === 0 ? (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", 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, { color: "gray", children: [" (", tool.serverName, ")"] })] }, tool.name));
+            })), filteredTools.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: _jsxs(Text, { color: "gray", 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: "cyan", bold: true, children: line.text }));
+        case 'source':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: "Source: " }), _jsx(Text, { color: line.source === 'internal' ? 'magenta' : 'blue', children: line.source === 'internal' ? 'Internal' : 'MCP' }), line.serverName && _jsxs(Text, { color: "gray", children: [" (server: ", line.serverName, ")"] })] }));
+        case 'empty':
+            return _jsx(Text, { children: " " });
+        case 'header':
+            return _jsx(Text, { color: "gray", 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: "cyan", children: line.name }), _jsxs(Text, { color: "gray", children: [" (", line.paramType, ")"] }), line.required && _jsx(Text, { color: "red", children: " *required" })] }));
+        case 'param-desc':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "gray", children: line.text })] }));
+        case 'param-enum':
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: "gray", 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, { color: "gray", 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, { color: "gray", children: '─'.repeat(Math.min(60, columns - 2)) }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", 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, { color: "gray", 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/overlays/custom-model-wizard/LocalModelWizard.d.ts

@@ -0,0 +1,25 @@
+/**
+ * LocalModelWizard Component
+ * Specialized wizard for adding local GGUF models with:
+ * - Registry model selection with download support
+ * - Custom GGUF file path option
+ * - Download progress display
+ */
+import React from 'react';
+import type { Key } from '../../../hooks/useInputOrchestrator.js';
+import { type CustomModel } from '@dexto/agent-management';
+interface LocalModelWizardProps {
+    isVisible: boolean;
+    onComplete: (model: CustomModel) => void;
+    onClose: () => void;
+}
+export interface LocalModelWizardHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Specialized wizard for local GGUF model setup.
+ * Similar UX to CLI setup flow but in Ink.
+ */
+declare const LocalModelWizard: React.ForwardRefExoticComponent<LocalModelWizardProps & React.RefAttributes<LocalModelWizardHandle>>;
+export default LocalModelWizard;
+//# sourceMappingURL=LocalModelWizard.d.ts.map

package/dist/cli/ink-cli/components/overlays/custom-model-wizard/LocalModelWizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalModelWizard.d.ts","sourceRoot":"","sources":["../../../../../../src/cli/ink-cli/components/overlays/custom-model-wizard/LocalModelWizard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA4E,MAAM,OAAO,CAAC;AAKjG,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EASH,KAAK,WAAW,EACnB,MAAM,yBAAyB,CAAC;AAqBjC,UAAU,qBAAqB;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAaD;;;GAGG;AACH,QAAA,MAAM,gBAAgB,sGA4/BrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}