toolpack-cli 0.1.0-SNAPSHOT

package/dist/components/Markdown.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Text, Box } from 'ink';
+import { marked } from 'marked';
+export function Markdown({ children }) {
+    let tokens;
+    try {
+        tokens = marked.lexer(children);
+    }
+    catch {
+        // If lexer fails, fall back to plain text
+        return _jsx(Text, { children: children });
+    }
+    return _jsx(Box, { flexDirection: "column", children: renderTokens(tokens) });
+}
+function renderTokens(tokens) {
+    return tokens.map((token, i) => renderToken(token, i));
+}
+function renderToken(token, key) {
+    try {
+        switch (token.type) {
+            case 'paragraph':
+                return (_jsx(Box, { marginBottom: 1, flexDirection: "row", flexWrap: "wrap", children: renderInlineTokens(token.tokens ?? []) }, key));
+            case 'heading':
+                return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: extractPlainText(token.tokens ?? [], token.text) }) }, key));
+            case 'code':
+                return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, paddingX: 1, borderStyle: "round", borderColor: "gray", children: [token.lang ? (_jsx(Text, { color: "gray", dimColor: true, children: token.lang })) : null, _jsx(Text, { color: "yellowBright", children: token.text })] }, key));
+            case 'list':
+                return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: (token.items ?? []).map((item, j) => {
+                        const itemTokens = item.tokens ?? [];
+                        // Separate inline (text/paragraph) from block-level (nested lists, code, etc.)
+                        const inlineTokens = itemTokens.filter((t) => t.type === 'text' || t.type === 'paragraph');
+                        const blockTokens = itemTokens.filter((t) => t.type !== 'text' && t.type !== 'paragraph');
+                        return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "gray", children: token.ordered ? `${j + 1}. ` : '• ' }), renderListItemContent(inlineTokens)] }), blockTokens.length > 0 && (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: blockTokens.map((bt, k) => renderToken(bt, k)) }))] }, j));
+                    }) }, key));
+            case 'blockquote':
+                return (_jsxs(Box, { marginBottom: 1, flexDirection: "row", paddingLeft: 1, children: [_jsx(Text, { color: "gray", children: "\u2502 " }), _jsx(Box, { flexDirection: "column", children: renderTokens(token.tokens ?? []) })] }, key));
+            case 'hr':
+                return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", children: '─'.repeat(40) }) }, key));
+            case 'space':
+                return null;
+            default:
+                // Fallback: try inline tokens if available
+                if (token.tokens && token.tokens.length > 0) {
+                    return (_jsx(Box, { marginBottom: 1, flexDirection: "row", flexWrap: "wrap", children: renderInlineTokens(token.tokens) }, key));
+                }
+                return (_jsx(Box, { children: _jsx(Text, { children: token.text || token.raw }) }, key));
+        }
+    }
+    catch {
+        // If any token fails to render, show raw text as fallback
+        return (_jsx(Box, { children: _jsx(Text, { children: token.text || token.raw }) }, key));
+    }
+}
+/**
+ * List items contain nested tokens with type "text" (NOT "paragraph").
+ * These text tokens can themselves have nested inline tokens (bold, code, etc).
+ * We need to unwrap them so the bullet stays aligned with the formatted content.
+ */
+function renderListItemContent(tokens) {
+    return tokens.map((token, i) => {
+        // List items wrap their content in either "text" or "paragraph" tokens
+        if (token.type === 'paragraph' || token.type === 'text') {
+            if (token.tokens && token.tokens.length > 0) {
+                return (_jsx(React.Fragment, { children: renderInlineTokens(token.tokens) }, i));
+            }
+            return _jsx(Text, { children: token.text }, i);
+        }
+        // Nested lists, code blocks, etc.
+        return renderToken(token, i);
+    });
+}
+/**
+ * Renders inline tokens: text, bold, italic, code, links, etc.
+ * Uses token.text (parsed content) instead of token.raw (includes markdown syntax).
+ */
+function renderInlineTokens(tokens) {
+    return tokens.map((token, i) => {
+        try {
+            switch (token.type) {
+                case 'text':
+                    // Text tokens can contain nested children (e.g. bold inside text)
+                    if (token.tokens && token.tokens.length > 0) {
+                        return _jsx(Text, { children: renderInlineTokens(token.tokens) }, i);
+                    }
+                    return _jsx(Text, { children: token.text }, i);
+                case 'strong':
+                    if (token.tokens && token.tokens.length > 0) {
+                        return (_jsx(Text, { bold: true, color: "whiteBright", children: renderInlineTokens(token.tokens) }, i));
+                    }
+                    return (_jsx(Text, { bold: true, color: "whiteBright", children: token.text }, i));
+                case 'em':
+                    if (token.tokens && token.tokens.length > 0) {
+                        return (_jsx(Text, { italic: true, color: "white", children: renderInlineTokens(token.tokens) }, i));
+                    }
+                    return (_jsx(Text, { italic: true, color: "white", children: token.text }, i));
+                case 'codespan':
+                    return (_jsx(Text, { color: "yellow", backgroundColor: "#333333", children: ` ${token.text} ` }, i));
+                case 'link':
+                    return (_jsx(Text, { color: "blueBright", underline: true, children: token.text }, i));
+                case 'escape':
+                    return _jsx(Text, { children: token.text }, i);
+                case 'br':
+                    return _jsx(Text, { children: '\n' }, i);
+                default:
+                    return _jsx(Text, { children: token.text || token.raw }, i);
+            }
+        }
+        catch {
+            return _jsx(Text, { children: token.text || token.raw }, i);
+        }
+    });
+}
+/**
+ * Extract plain text from inline tokens for headings.
+ */
+function extractPlainText(tokens, fallback) {
+    if (tokens.length === 0)
+        return fallback;
+    return tokens.map(t => t.text || t.raw).join('');
+}

package/dist/components/ProviderBar.d.ts

@@ -0,0 +1,12 @@
+interface ProviderBarProps {
+    isFocused: boolean;
+    focusedIndex: number;
+    showModeSelect: boolean;
+    setShowModeSelect: (val: boolean) => void;
+    showModelSelect: boolean;
+    setShowModelSelect: (val: boolean) => void;
+    showHistorySelect: boolean;
+    setShowHistorySelect: (val: boolean) => void;
+}
+export declare function ProviderBar({ isFocused, focusedIndex, showModeSelect, setShowModeSelect, showModelSelect, setShowModelSelect, showHistorySelect, setShowHistorySelect, }: ProviderBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ProviderBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../theme/ThemeContext.js';
+import { useToolpack } from '../context/ToolpackContext.js';
+export function ProviderBar({ isFocused, focusedIndex, showModeSelect, setShowModeSelect, showModelSelect, setShowModelSelect, showHistorySelect, setShowHistorySelect, }) {
+    const { theme } = useTheme();
+    const { activeMode, activeModel, models } = useToolpack();
+    useInput((_, key) => {
+        if (!isFocused)
+            return;
+        if (key.return && focusedIndex === 1) {
+            setShowModeSelect(!showModeSelect);
+        }
+        else if (key.return && focusedIndex === 2) {
+            setShowModelSelect(!showModelSelect);
+        }
+        else if (key.return && focusedIndex === 3) {
+            setShowHistorySelect(!showHistorySelect);
+        }
+    }, {
+        isActive: isFocused &&
+            (focusedIndex === 1 || focusedIndex === 2 || focusedIndex === 3),
+    });
+    const modeLabel = activeMode ? activeMode.displayName : 'All';
+    // Find the matching label for the activeModel key
+    const currentModelObj = models.find(m => m.value === activeModel);
+    const modelLabel = currentModelObj ? currentModelObj.label : activeModel;
+    const modeBgColor = isFocused && focusedIndex === 1 ? theme.colors.highlight : undefined;
+    const modelBgColor = isFocused && focusedIndex === 2 ? theme.colors.highlight : undefined;
+    const historyBgColor = isFocused && focusedIndex === 3 ? theme.colors.highlight : undefined;
+    return (_jsxs(Box, { width: "100%", paddingLeft: 1, paddingRight: 1, marginTop: 1, children: [_jsxs(Box, { gap: 4, flexGrow: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.secondary, children: "Mode: " }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: modeBgColor, color: theme.colors.primary, children: modeLabel }) })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.secondary, children: "Model: " }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: modelBgColor, color: theme.colors.primary, children: modelLabel }) })] })] }), _jsx(Box, { children: _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: historyBgColor, color: theme.colors.primary, children: "History" }) }) })] }));
+}

package/dist/components/ShimmerText.d.ts

@@ -0,0 +1,8 @@
+interface ShimmerTextProps {
+    text: string;
+    baseColor?: string;
+    brightColor?: string;
+    speed?: number;
+}
+export declare function ShimmerText({ text, baseColor, brightColor, speed, }: ShimmerTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ShimmerText.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Text } from 'ink';
+export function ShimmerText({ text, baseColor = '#6b7280', brightColor = '#3b82f6', speed = 150, }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setActiveIndex(prev => (prev + 1) % text.length);
+        }, speed);
+        return () => clearInterval(interval);
+    }, [text.length, speed]);
+    return (_jsx(Text, { children: text.split('').map((char, idx) => {
+            // Calculate distance from active index (circular)
+            const distance = Math.min(Math.abs(idx - activeIndex), text.length - Math.abs(idx - activeIndex));
+            // Bright if within 3 characters of active index
+            const isBright = distance <= 1;
+            const color = isBright ? brightColor : baseColor;
+            return (_jsx(Text, { color: color, children: char }, idx));
+        }) }));
+}

package/dist/components/ToolLogPopup.d.ts

@@ -0,0 +1,7 @@
+import type { ToolCallEntry } from '../context/ConversationContext.js';
+interface ToolLogPopupProps {
+    toolCalls: ToolCallEntry[];
+    onClose: () => void;
+}
+export declare function ToolLogPopup({ toolCalls, onClose }: ToolLogPopupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ToolLogPopup.js

@@ -0,0 +1,87 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Modal } from './common/Modal.js';
+import { useTheme } from '../theme/ThemeContext.js';
+export function ToolLogPopup({ toolCalls, onClose }) {
+    const { theme } = useTheme();
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Calculate total lines for all tool calls
+    const calculateTotalLines = () => {
+        let total = 0;
+        toolCalls.forEach(toolCall => {
+            total += 3; // Header + spacing
+            total += 2; // Arguments section
+            if (toolCall.result)
+                total += 2; // Result section
+            if (toolCall.error)
+                total += 2; // Error section
+            total += 2; // Divider + spacing
+        });
+        return total;
+    };
+    const totalLines = calculateTotalLines();
+    const visibleLines = 20; // Visible content area height
+    const maxScroll = Math.max(0, totalLines - visibleLines);
+    // Scroll handlers
+    useInput((_, key) => {
+        if (key.downArrow || key.pageDown) {
+            setScrollOffset(prev => Math.min(maxScroll, prev + (key.pageDown ? 5 : 1)));
+        }
+        else if (key.upArrow || key.pageUp) {
+            setScrollOffset(prev => Math.max(0, prev - (key.pageUp ? 5 : 1)));
+        }
+    }, { isActive: true });
+    const formatTimestamp = (timestamp) => {
+        const now = Date.now();
+        const diff = now - timestamp;
+        const seconds = Math.floor(diff / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        if (seconds < 60)
+            return `${seconds}s ago`;
+        if (minutes < 60)
+            return `${minutes}m ago`;
+        if (hours < 24)
+            return `${hours}h ago`;
+        return new Date(timestamp).toLocaleString();
+    };
+    // Render tool calls as lines
+    const renderLines = [];
+    toolCalls.forEach((toolCall, idx) => {
+        const truncateText = (text, maxLen) => {
+            if (text.length <= maxLen)
+                return text;
+            return text.slice(0, maxLen) + '...';
+        };
+        // Header line
+        renderLines.push(`#${idx + 1} ${toolCall.name} • ${formatTimestamp(toolCall.timestamp)} • ${toolCall.status}`);
+        renderLines.push('');
+        // Arguments
+        renderLines.push('  Arguments:');
+        renderLines.push(`    ${truncateText(JSON.stringify(toolCall.arguments), 200)}`);
+        // Result
+        if (toolCall.result) {
+            renderLines.push('  Result:');
+            const resultLines = truncateText(toolCall.result, 500).split('\n');
+            resultLines.forEach(line => {
+                renderLines.push(`    ${line}`);
+            });
+        }
+        // Error
+        if (toolCall.error) {
+            renderLines.push('  Error:');
+            renderLines.push(`    ${truncateText(toolCall.error, 200)}`);
+        }
+        // Divider
+        if (idx < toolCalls.length - 1) {
+            renderLines.push('');
+            renderLines.push('─'.repeat(80));
+            renderLines.push('');
+        }
+    });
+    const visibleContent = renderLines.slice(scrollOffset, scrollOffset + visibleLines);
+    const canScrollUp = scrollOffset > 0;
+    const canScrollDown = scrollOffset < maxScroll;
+    return (_jsx(Modal, { title: "Tool Execution Log", width: 90, height: 30, onClose: onClose, children: _jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(Box, { marginBottom: 1, paddingX: 2, children: _jsxs(Text, { color: theme.colors.textSecondary, children: ["Total tool calls: ", toolCalls.length, totalLines > visibleLines && (_jsxs(Text, { color: theme.colors.textSecondary, children: [' • ', "Line ", scrollOffset + 1, "-", Math.min(scrollOffset + visibleLines, totalLines), " of", ' ', totalLines] }))] }) }), canScrollUp && (_jsx(Box, { paddingX: 2, marginBottom: 1, children: _jsx(Text, { color: "#fbbf24", children: "\u25B2 More above \u25B2" }) })), _jsx(Box, { flexDirection: "column", paddingX: 2, height: visibleLines, children: visibleContent.map((line, idx) => (_jsx(Box, { children: _jsx(Text, { color: theme.colors.text, children: line }) }, idx))) }), canScrollDown && (_jsx(Box, { paddingX: 2, marginTop: 1, children: _jsx(Text, { color: "#fbbf24", children: "\u25BC More below \u25BC" }) })), _jsx(Box, { marginTop: 1, paddingTop: 1, borderTop: true, borderColor: theme.colors.border, paddingX: 2, children: _jsxs(Text, { color: theme.colors.textSecondary, children: [_jsx(Text, { color: "#fbbf24", bold: true, children: "\u2191/\u2193 PgUp/PgDn" }), _jsx(Text, { children: " :Scroll | " }), _jsx(Text, { color: "#fbbf24", bold: true, children: "Esc" }), _jsx(Text, { children: " :Close" })] }) })] }) }));
+}

package/dist/components/common/HistorySelect.d.ts

@@ -0,0 +1,6 @@
+interface HistorySelectProps {
+    onSelect: (id: string, label: string) => void;
+    onClose: () => void;
+}
+export declare function HistorySelect({ onSelect, onClose }: HistorySelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/common/HistorySelect.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useTheme } from '../../theme/ThemeContext.js';
+import { useConversation } from '../../context/ConversationContext.js';
+import { Modal } from './Modal.js';
+export function HistorySelect({ onSelect, onClose }) {
+    const { theme } = useTheme();
+    const { history } = useConversation();
+    const [search, setSearch] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isSearchFocused, setIsSearchFocused] = useState(true);
+    // Filter history entries by search query
+    const filtered = history.filter(entry => entry.label.toLowerCase().includes(search.toLowerCase()));
+    // Height calculations:
+    // Modal chrome (borders + padding + title space) = 6 lines
+    // Search Box (borders + padding + margin) = 4 lines
+    // List = visibleItems lines
+    const visibleItems = Math.max(1, Math.min(filtered.length, 6)); // At least 1 for the empty state
+    const modalHeight = 6 + 4 + visibleItems;
+    useInput((_, key) => {
+        if (isSearchFocused) {
+            if (key.downArrow || key.tab) {
+                setIsSearchFocused(false);
+                setSelectedIndex(0);
+            }
+            return;
+        }
+        // List navigation
+        if (key.upArrow) {
+            if (selectedIndex === 0) {
+                setIsSearchFocused(true);
+            }
+            else {
+                setSelectedIndex(prev => Math.max(0, prev - 1));
+            }
+        }
+        else if (key.downArrow) {
+            setSelectedIndex(prev => Math.min(filtered.length - 1, prev + 1));
+        }
+        else if (key.return) {
+            const entry = filtered[selectedIndex];
+            if (entry)
+                onSelect(entry.id, entry.label);
+        }
+    }, { isActive: true });
+    return (_jsxs(Modal, { title: "History", height: modalHeight, width: 60, onClose: onClose, children: [_jsxs(Box, { marginBottom: 1, borderStyle: "single", borderColor: isSearchFocused ? theme.colors.primary : theme.colors.border, paddingX: 1, children: [_jsx(Text, { color: theme.colors.textMuted, children: '🔍 ' }), _jsx(TextInput, { value: search, onChange: val => {
+                            setSearch(val);
+                            setSelectedIndex(0);
+                        }, placeholder: "Search history...", focus: isSearchFocused })] }), _jsx(Box, { flexDirection: "column", children: filtered.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, children: " No entries found." })) : (filtered.slice(0, 6).map((entry, index) => {
+                    const isSelected = !isSearchFocused && index === selectedIndex;
+                    return (_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { backgroundColor: isSelected ? theme.colors.highlight : undefined, color: isSelected ? theme.colors.text : theme.colors.textSecondary, children: [isSelected ? '❯ ' : '  ', entry.label.length > 40
+                                        ? entry.label.slice(0, 37) + '...'
+                                        : entry.label] }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", entry.timestamp] })] }, entry.id));
+                })) })] }));
+}

package/dist/components/common/Modal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ModalProps {
+    title: string;
+    width?: number;
+    height: number;
+    children: React.ReactNode;
+    onClose?: () => void;
+}
+export declare function Modal({ title, width, height, children, onClose, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/common/Modal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useStdout, useInput } from 'ink';
+import { useTheme } from '../../theme/ThemeContext.js';
+export function Modal({ title, width = 50, height, children, onClose, }) {
+    const { stdout } = useStdout();
+    const { theme } = useTheme();
+    useInput((_, key) => {
+        if (key.escape && onClose) {
+            onClose();
+        }
+    }, { isActive: true });
+    return (_jsx(Box, { position: "absolute", width: stdout.columns, height: stdout.rows, justifyContent: "center", alignItems: "center", children: _jsxs(Box, { position: "relative", width: width, height: height, children: [_jsx(Box, { position: "absolute", width: width, height: height, flexDirection: "column", children: Array.from({ length: height }).map((_, i) => (_jsx(Text, { backgroundColor: theme.colors.bg, children: ' '.repeat(width) }, i))) }), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 2, paddingY: 1, width: width, height: height, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.text, children: title }), _jsx(Box, { gap: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: "esc [x]" }) })] }), children] })] }) }));
+}

package/dist/components/common/ModeSelect.d.ts

@@ -0,0 +1,6 @@
+interface ModeSelectProps {
+    onSelect: (mode: string) => void;
+    onClose: () => void;
+}
+export declare function ModeSelect({ onSelect, onClose }: ModeSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/common/ModeSelect.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SelectInput from 'ink-select-input';
+import { useToolpack } from '../../context/ToolpackContext.js';
+import { Modal } from './Modal.js';
+export function ModeSelect({ onSelect, onClose }) {
+    const { modes } = useToolpack();
+    const items = modes.map(m => ({
+        label: m.displayName || m.name,
+        value: m.name,
+    }));
+    const height = 6 + items.length;
+    return (_jsx(Modal, { title: "Select Mode", height: height, onClose: onClose, children: _jsx(SelectInput, { items: items, onSelect: item => onSelect(item.value) }) }));
+}

package/dist/components/common/ModelSelect.d.ts

@@ -0,0 +1,9 @@
+interface ModelSelectProps {
+    onSelect: (model: {
+        value: string;
+        provider?: string;
+    }) => void;
+    onClose: () => void;
+}
+export declare function ModelSelect({ onSelect, onClose }: ModelSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/common/ModelSelect.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import SelectInput from 'ink-select-input';
+import { useToolpack } from '../../context/ToolpackContext.js';
+import { Modal } from './Modal.js';
+export function ModelSelect({ onSelect, onClose }) {
+    const { setModel, modelCategories, loadingModels } = useToolpack();
+    if (loadingModels) {
+        return (_jsx(Modal, { title: "Select Model", height: 6, onClose: onClose, children: _jsx(Text, { color: "yellow", children: "Loading available models..." }) }));
+    }
+    if (modelCategories.length === 0) {
+        return (_jsx(Modal, { title: "Select Model", height: 6, onClose: onClose, children: _jsx(Text, { color: "red", children: "No models available. Please check provider configuration." }) }));
+    }
+    const items = [];
+    modelCategories.forEach(c => {
+        items.push({
+            label: `--- ${c.displayName} ---`,
+            value: `__category_${c.provider}`,
+            key: `cat_${c.provider}`,
+        });
+        c.models.forEach((m, idx) => {
+            // Add indicator if model doesn't support tools
+            const toolIndicator = m.capabilities?.toolCalling ? '' : ' [no tools]';
+            items.push({
+                label: `  ${m.label}${toolIndicator}`,
+                value: m.value,
+                provider: c.provider,
+                capabilities: m.capabilities,
+                key: `${c.provider}_${m.value}_${idx}`,
+            });
+        });
+    });
+    const height = 6 + Math.min(items.length, 20); // cap height to 20 items max
+    return (_jsx(Modal, { title: "Select Model", height: height, onClose: onClose, children: _jsx(SelectInput, { items: items, limit: 18, onSelect: (item) => {
+                if (item.value.startsWith('__category_'))
+                    return; // Ignore headers
+                const modelObj = {
+                    value: item.value,
+                    provider: item.provider,
+                    capabilities: item.capabilities,
+                };
+                setModel(modelObj);
+                onSelect(modelObj);
+            } }) }));
+}

package/dist/context/ConversationContext.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import type { ToolCallEntry } from '../services/db.js';
+export interface HistoryEntry {
+    id: string;
+    label: string;
+    timestamp: string;
+}
+export interface Message {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp: Date;
+    toolCalls?: ToolCallEntry[];
+}
+export type { ToolCallEntry };
+export interface Conversation {
+    id: string;
+    title: string;
+    mode?: string;
+    model?: string;
+    messages: Message[];
+    createdAt: Date;
+    updatedAt: Date;
+}
+interface ConversationContextType {
+    history: HistoryEntry[];
+    activeConversation: Conversation | null;
+    createConversation: (title: string, mode?: string, model?: string) => void;
+    loadConversation: (id: string) => {
+        mode?: string;
+        model?: string;
+    };
+    addMessage: (role: 'user' | 'assistant' | 'system', content: string, toolCalls?: ToolCallEntry[]) => void;
+    clearHistory: () => void;
+    reloadHistory: () => void;
+    screen: 'home' | 'chat' | 'settings';
+    setScreen: (screen: 'home' | 'chat' | 'settings') => void;
+    pendingPrompt: string | null;
+    setPendingPrompt: (val: string | null) => void;
+}
+export declare function ConversationProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useConversation(): ConversationContextType;

package/dist/context/ConversationContext.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect } from 'react';
+import * as dbManager from '../services/db.js';
+const ConversationContext = createContext(undefined);
+export function ConversationProvider({ children }) {
+    const [history, setHistory] = useState([]);
+    const [activeConversation, setActiveConversation] = useState(null);
+    const [screen, setScreen] = useState('home');
+    const [pendingPrompt, setPendingPrompt] = useState(null);
+    const reloadHistory = () => {
+        try {
+            const dbConvs = dbManager.getConversations();
+            setHistory(dbConvs.map(c => ({
+                id: c.id,
+                label: c.title,
+                timestamp: new Date(c.createdAt).toLocaleString(),
+            })));
+        }
+        catch (e) {
+            console.error('Failed to load history', e);
+        }
+    };
+    useEffect(() => {
+        reloadHistory();
+    }, []);
+    const createConversation = (title, mode, model) => {
+        const dbConv = dbManager.createConversation(title, mode, model);
+        const newConversation = {
+            id: dbConv.id,
+            title: dbConv.title,
+            mode: dbConv.mode,
+            model: dbConv.model,
+            messages: [],
+            createdAt: new Date(dbConv.createdAt),
+            updatedAt: new Date(dbConv.createdAt),
+        };
+        setActiveConversation(newConversation);
+        reloadHistory();
+        setPendingPrompt(title);
+        setScreen('chat');
+    };
+    const loadConversation = (id) => {
+        const dbMsgs = dbManager.getMessages(id);
+        const dbConvs = dbManager.getConversations();
+        const info = dbConvs.find(c => c.id === id);
+        if (!info)
+            return {};
+        const messages = dbMsgs.map(m => ({
+            id: m.id,
+            role: m.role,
+            content: m.content,
+            timestamp: new Date(m.createdAt),
+            toolCalls: m.toolCalls,
+        }));
+        setActiveConversation({
+            id: info.id,
+            title: info.title,
+            mode: info.mode,
+            model: info.model,
+            createdAt: new Date(info.createdAt),
+            updatedAt: new Date(),
+            messages,
+        });
+        setScreen('chat');
+        // Return mode and model so caller can restore them
+        return { mode: info.mode, model: info.model };
+    };
+    const addMessage = (role, content, toolCalls) => {
+        if (!activeConversation)
+            return;
+        const dbMsg = dbManager.saveMessage(activeConversation.id, role, content, toolCalls);
+        const newMessage = {
+            id: dbMsg.id,
+            role: dbMsg.role,
+            content: dbMsg.content,
+            timestamp: new Date(dbMsg.createdAt),
+            toolCalls: dbMsg.toolCalls,
+        };
+        setActiveConversation(prev => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                messages: [...prev.messages, newMessage],
+                updatedAt: new Date(dbMsg.createdAt),
+            };
+        });
+    };
+    const clearHistory = () => {
+        setActiveConversation(null);
+        setScreen('home');
+    };
+    return (_jsx(ConversationContext.Provider, { value: {
+            history,
+            activeConversation,
+            createConversation,
+            loadConversation,
+            addMessage,
+            clearHistory,
+            reloadHistory,
+            screen,
+            setScreen,
+            pendingPrompt,
+            setPendingPrompt,
+        }, children: children }));
+}
+export function useConversation() {
+    const context = useContext(ConversationContext);
+    if (!context) {
+        throw new Error('useConversation must be used within a ConversationProvider');
+    }
+    return context;
+}