dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/components/modes/StaticCLI.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StaticCLI - Static pattern rendering mode
+ *
+ * Uses Ink's Static component for copy-friendly terminal output.
+ * Features:
+ * - Static component for finalized messages (rendered to terminal scrollback)
+ * - Native terminal scrolling and text selection
+ * - No mouse event interception
+ * - Simpler, more compatible with traditional terminal workflows
+ *
+ * Architecture:
+ * - `messages` = finalized messages → rendered in <Static> (permanent output)
+ * - `pendingMessages` = streaming/in-progress → rendered dynamically (redrawn)
+ * This prevents duplicate output when streaming completes.
+ */
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { Box, Static, Text, useStdout } from 'ink';
+// ANSI escape sequence to clear terminal (equivalent to ansiEscapes.clearTerminal)
+const CLEAR_TERMINAL = '\x1B[2J\x1B[3J\x1B[H';
+// Hooks
+import { useCLIState } from '../../hooks/useCLIState.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+// Components
+import { Header } from '../chat/Header.js';
+import { MessageItem } from '../chat/MessageItem.js';
+import { QueuedMessagesDisplay } from '../chat/QueuedMessagesDisplay.js';
+import { StatusBar } from '../StatusBar.js';
+import { HistorySearchBar } from '../HistorySearchBar.js';
+import { Footer } from '../Footer.js';
+// Containers
+import { InputContainer } from '../../containers/InputContainer.js';
+import { OverlayContainer } from '../../containers/OverlayContainer.js';
+export function StaticCLI({ agent, initialSessionId, startupInfo, useStreaming = true, }) {
+    // Use shared CLI state (no keyboard scroll in Static mode)
+    const { messages, setMessages, pendingMessages, setPendingMessages, dequeuedBuffer, setDequeuedBuffer, queuedMessages, setQueuedMessages, ui, setUi, input, setInput, session, setSession, approval, setApproval, approvalQueue, setApprovalQueue, inputService, buffer, overlayContainerRef, visibleMessages, } = useCLIState({
+        agent,
+        initialSessionId,
+        startupInfo,
+        // No keyboard scroll handler - let terminal handle scrollback
+    });
+    // Terminal resize handling - clear and re-render Static content
+    const { write: stdoutWrite } = useStdout();
+    const { columns: terminalWidth } = useTerminalSize();
+    const [staticRemountKey, setStaticRemountKey] = useState(0);
+    const isInitialMount = useRef(true);
+    // Ref to InputContainer for programmatic submit
+    const inputContainerRef = useRef(null);
+    // Compute whether history search has a match (for HistorySearchBar indicator)
+    const historySearchHasMatch = useMemo(() => {
+        if (!ui.historySearch.isActive || !ui.historySearch.query)
+            return false;
+        const query = ui.historySearch.query.toLowerCase();
+        return input.history.some((item) => item.toLowerCase().includes(query));
+    }, [ui.historySearch.isActive, ui.historySearch.query, input.history]);
+    // Callback for OverlayContainer to submit prompt commands through InputContainer
+    const handleSubmitPromptCommand = useCallback(async (commandText) => {
+        try {
+            await inputContainerRef.current?.submit(commandText);
+        }
+        catch (error) {
+            agent.logger.error(`StaticCLI.handleSubmitPromptCommand failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }, [agent]);
+    // Function to refresh static content (clear terminal and force re-render)
+    const refreshStatic = useCallback(() => {
+        stdoutWrite(CLEAR_TERMINAL);
+        setStaticRemountKey((prev) => prev + 1);
+    }, [stdoutWrite]);
+    // Handle terminal resize - debounced refresh of static content
+    useEffect(() => {
+        // Skip initial mount to avoid unnecessary clear on startup
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+        // Debounce resize handling (300ms)
+        const handler = setTimeout(() => {
+            refreshStatic();
+        }, 300);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [terminalWidth, refreshStatic]);
+    // Pre-render static items as JSX elements (Gemini pattern)
+    // Header + finalized messages go in <Static> (rendered once, permanent)
+    const staticItems = useMemo(() => {
+        const items = [
+            _jsx(Header, { modelName: session.modelName, sessionId: session.id || undefined, hasActiveSession: session.hasActiveSession, startupInfo: startupInfo }, "header"),
+            ...visibleMessages.map((msg) => _jsx(MessageItem, { message: msg }, msg.id)),
+        ];
+        return items;
+    }, [visibleMessages, session.modelName, session.id, session.hasActiveSession, startupInfo]);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => item }, staticRemountKey), pendingMessages.map((message) => (_jsx(MessageItem, { message: message }, message.id))), dequeuedBuffer.map((message) => (_jsx(MessageItem, { message: message }, message.id))), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(StatusBar, { agent: agent, isProcessing: ui.isProcessing, isThinking: ui.isThinking, approvalQueueCount: approvalQueue.length, copyModeEnabled: ui.copyModeEnabled, isAwaitingApproval: approval !== null }), _jsx(QueuedMessagesDisplay, { messages: queuedMessages }), _jsx(InputContainer, { ref: inputContainerRef, buffer: buffer, input: input, ui: ui, session: session, approval: approval, queuedMessages: queuedMessages, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setPendingMessages: setPendingMessages, setDequeuedBuffer: setDequeuedBuffer, setQueuedMessages: setQueuedMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, agent: agent, inputService: inputService, useStreaming: useStreaming }), _jsx(OverlayContainer, { ref: overlayContainerRef, ui: ui, input: input, session: session, approval: approval, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, agent: agent, inputService: inputService, buffer: buffer, refreshStatic: refreshStatic, onSubmitPromptCommand: handleSubmitPromptCommand }), ui.exitWarningShown && (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: "yellowBright", bold: true, children: "\u26A0 Press Ctrl+C again to exit" }), _jsx(Text, { color: "gray", children: " (or press any key to cancel)" })] })), _jsx(Footer, { modelName: session.modelName, cwd: process.cwd(), autoApproveEdits: ui.autoApproveEdits }), ui.historySearch.isActive && (_jsx(HistorySearchBar, { query: ui.historySearch.query, hasMatch: historySearchHasMatch }))] })] }));
+}

package/dist/cli/ink-cli/components/modes/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CLI Rendering Modes
+ *
+ * Two rendering modes are available:
+ * - AlternateBufferCLI: VirtualizedList with mouse scroll, keyboard scroll, copy mode
+ * - StaticCLI: Static pattern with native terminal scrollback and selection
+ */
+export { AlternateBufferCLI } from './AlternateBufferCLI.js';
+export { StaticCLI } from './StaticCLI.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/cli/ink-cli/components/modes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/modes/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/cli/ink-cli/components/modes/index.js

@@ -0,0 +1,9 @@
+/**
+ * CLI Rendering Modes
+ *
+ * Two rendering modes are available:
+ * - AlternateBufferCLI: VirtualizedList with mouse scroll, keyboard scroll, copy mode
+ * - StaticCLI: Static pattern with native terminal scrollback and selection
+ */
+export { AlternateBufferCLI } from './AlternateBufferCLI.js';
+export { StaticCLI } from './StaticCLI.js';

package/dist/cli/ink-cli/components/overlays/ApiKeyInput.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ApiKeyInput Component
+ * Interactive overlay for entering API keys when switching to a provider without one
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+import type { LLMProvider } from '@dexto/core';
+export interface ApiKeyInputProps {
+    isVisible: boolean;
+    provider: LLMProvider;
+    onSaved: (meta: {
+        provider: LLMProvider;
+        envVar: string;
+    }) => void;
+    onClose: () => void;
+}
+export interface ApiKeyInputHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * API key input overlay - prompts user for API key when switching to a provider
+ * that doesn't have a configured key
+ */
+declare const ApiKeyInput: React.ForwardRefExoticComponent<ApiKeyInputProps & React.RefAttributes<ApiKeyInputHandle>>;
+export default ApiKeyInput;
+//# sourceMappingURL=ApiKeyInput.d.ts.map

package/dist/cli/ink-cli/components/overlays/ApiKeyInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiKeyInput.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/ApiKeyInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA4E,MAAM,OAAO,CAAC;AAEjG,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS/C,MAAM,WAAW,gBAAgB;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,WAAW,CAAC;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,4FA+Jf,CAAC;AAEH,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,92 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ApiKeyInput Component
+ * Interactive overlay for entering API keys when switching to a provider without one
+ */
+import { useState, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { getPrimaryApiKeyEnvVar, saveProviderApiKey } from '@dexto/agent-management';
+import { applyLayeredEnvironmentLoading } from '../../../../utils/env.js';
+import { getProviderDisplayName, isValidApiKeyFormat, getProviderInstructions, } from '../../../utils/provider-setup.js';
+/**
+ * API key input overlay - prompts user for API key when switching to a provider
+ * that doesn't have a configured key
+ */
+const ApiKeyInput = forwardRef(function ApiKeyInput({ isVisible, provider, onSaved, onClose }, ref) {
+    const [apiKey, setApiKey] = useState('');
+    const [error, setError] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    // Reset when becoming visible or provider changes
+    useEffect(() => {
+        if (isVisible) {
+            setApiKey('');
+            setError(null);
+            setIsSaving(false);
+        }
+    }, [isVisible, provider]);
+    const handleSubmit = useCallback(async () => {
+        const trimmedKey = apiKey.trim();
+        // Validate
+        if (!trimmedKey) {
+            setError('API key is required');
+            return;
+        }
+        if (!isValidApiKeyFormat(trimmedKey, provider)) {
+            setError(`Invalid ${getProviderDisplayName(provider)} API key format`);
+            return;
+        }
+        setError(null);
+        setIsSaving(true);
+        try {
+            const meta = await saveProviderApiKey(provider, trimmedKey, process.cwd());
+            // Reload environment variables so the key is available
+            await applyLayeredEnvironmentLoading();
+            onSaved({ provider, envVar: meta.envVar });
+        }
+        catch (err) {
+            setError(`Failed to save: ${err instanceof Error ? err.message : String(err)}`);
+            setIsSaving(false);
+        }
+    }, [apiKey, provider, onSaved]);
+    // Handle keyboard input
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            if (!isVisible || isSaving)
+                return false;
+            // Escape to close
+            if (key.escape) {
+                onClose();
+                return true;
+            }
+            // Enter to submit
+            if (key.return) {
+                void handleSubmit();
+                return true;
+            }
+            // Backspace
+            if (key.backspace || key.delete) {
+                setApiKey((prev) => prev.slice(0, -1));
+                setError(null);
+                return true;
+            }
+            // Regular character input
+            if (input && !key.ctrl && !key.meta) {
+                setApiKey((prev) => prev + input);
+                setError(null);
+                return true;
+            }
+            return false;
+        },
+    }), [isVisible, isSaving, onClose, handleSubmit]);
+    if (!isVisible)
+        return null;
+    const providerName = getProviderDisplayName(provider);
+    const envVar = getPrimaryApiKeyEnvVar(provider);
+    const instructions = getProviderInstructions(provider);
+    // Mask the API key for display (show first 4 and last 4 chars)
+    const maskedKey = apiKey.length > 8
+        ? `${apiKey.slice(0, 4)}${'*'.repeat(Math.min(apiKey.length - 8, 20))}${apiKey.slice(-4)}`
+        : '*'.repeat(apiKey.length);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["API Key Required for ", providerName] }) }), instructions && (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsx(Text, { color: "gray", children: instructions.content }) })), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "gray", children: "This key will be saved to " }), _jsx(Text, { color: "yellowBright", children: envVar }), _jsx(Text, { color: "gray", children: " in your .env file" })] }), _jsx(Box, { flexDirection: "column", children: _jsxs(Text, { bold: true, children: ["Enter your ", providerName, " API key:"] }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: "> " }), _jsx(Text, { children: maskedKey }), !isSaving && _jsx(Text, { color: "cyan", children: "_" })] }), isSaving && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellowBright", children: "Saving API key..." }) })), error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: error }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Enter to save \u2022 Esc to cancel" }) })] }));
+});
+export default ApiKeyInput;

package/dist/cli/ink-cli/components/overlays/CustomModelWizard.d.ts

@@ -0,0 +1,29 @@
+/**
+ * CustomModelWizard Component
+ * Multi-step wizard for adding custom models (openai-compatible, openrouter, litellm, glama, bedrock)
+ *
+ * Architecture:
+ * - Provider configs centralized in ./custom-model-wizard/provider-config.ts
+ * - Shared UI components in ./custom-model-wizard/shared/
+ * - This file is the orchestrator - handles state, navigation, and keyboard input
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+import { type CustomModel } from '@dexto/agent-management';
+interface CustomModelWizardProps {
+    isVisible: boolean;
+    onComplete: (model: CustomModel) => void;
+    onClose: () => void;
+    /** Optional model to edit - if provided, form will be pre-populated */
+    initialModel?: CustomModel | null;
+}
+export interface CustomModelWizardHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Multi-step wizard for custom model configuration.
+ * Uses data-driven provider configs instead of scattered conditionals.
+ */
+declare const CustomModelWizard: React.ForwardRefExoticComponent<CustomModelWizardProps & React.RefAttributes<CustomModelWizardHandle>>;
+export default CustomModelWizard;
+//# sourceMappingURL=CustomModelWizard.d.ts.map

package/dist/cli/ink-cli/components/overlays/CustomModelWizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomModelWizard.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/CustomModelWizard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAIH,KAAK,WAAW,EAMnB,MAAM,yBAAyB,CAAC;AAmBjC,UAAU,sBAAsB;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uEAAuE;IACvE,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;;GAGG;AACH,QAAA,MAAM,iBAAiB,wGAqXtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,286 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CustomModelWizard Component
+ * Multi-step wizard for adding custom models (openai-compatible, openrouter, litellm, glama, bedrock)
+ *
+ * Architecture:
+ * - Provider configs centralized in ./custom-model-wizard/provider-config.ts
+ * - Shared UI components in ./custom-model-wizard/shared/
+ * - This file is the orchestrator - handles state, navigation, and keyboard input
+ */
+import { useState, useEffect, forwardRef, useImperativeHandle, useCallback, useRef, } from 'react';
+import { Box, Text } from 'ink';
+import { saveCustomModel, deleteCustomModel, CUSTOM_MODEL_PROVIDERS, saveProviderApiKey, getProviderKeyStatus, resolveApiKeyForProvider, determineApiKeyStorage, } from '@dexto/agent-management';
+import { logger } from '@dexto/core';
+// Import from new modular architecture
+import { getProviderConfig, getAvailableProviders, runAsyncValidation, } from './custom-model-wizard/provider-config.js';
+import { ProviderSelector, WizardStepInput, SetupInfoBanner, ApiKeyStep, } from './custom-model-wizard/shared/index.js';
+import LocalModelWizard from './custom-model-wizard/LocalModelWizard.js';
+/**
+ * Multi-step wizard for custom model configuration.
+ * Uses data-driven provider configs instead of scattered conditionals.
+ */
+const CustomModelWizard = forwardRef(function CustomModelWizard({ isVisible, onComplete, onClose, initialModel }, ref) {
+    // Provider selection (step 0) then wizard steps
+    const [selectedProvider, setSelectedProvider] = useState(null);
+    const [providerIndex, setProviderIndex] = useState(0);
+    const [currentStep, setCurrentStep] = useState(0);
+    const [values, setValues] = useState({});
+    const [currentInput, setCurrentInput] = useState('');
+    const [error, setError] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [isValidating, setIsValidating] = useState(false);
+    // Track original name when editing (to handle renames)
+    const [originalName, setOriginalName] = useState(null);
+    const isEditing = initialModel !== null && initialModel !== undefined;
+    // Ref for LocalModelWizard (specialized wizard for 'local' provider)
+    const localModelWizardRef = useRef(null);
+    // Get provider config (data-driven, no conditionals)
+    const providerConfig = selectedProvider ? getProviderConfig(selectedProvider) : null;
+    const wizardSteps = providerConfig?.steps ?? [];
+    const currentStepConfig = wizardSteps[currentStep];
+    // Reset when becoming visible
+    useEffect(() => {
+        if (isVisible) {
+            if (initialModel) {
+                // Editing mode - pre-populate from initialModel
+                const provider = initialModel.provider ?? 'openai-compatible';
+                setSelectedProvider(provider);
+                setOriginalName(initialModel.name);
+                setValues({
+                    name: initialModel.name,
+                    baseURL: initialModel.baseURL ?? '',
+                    displayName: initialModel.displayName ?? '',
+                    maxInputTokens: initialModel.maxInputTokens?.toString() ?? '',
+                    apiKey: initialModel.apiKey ?? '',
+                });
+                setCurrentStep(0);
+                setCurrentInput(initialModel.name);
+                setProviderIndex(CUSTOM_MODEL_PROVIDERS.indexOf(provider));
+            }
+            else {
+                // Adding mode - reset everything
+                setSelectedProvider(null);
+                setOriginalName(null);
+                setProviderIndex(0);
+                setCurrentStep(0);
+                setValues({});
+                setCurrentInput('');
+            }
+            setError(null);
+            setIsSaving(false);
+            setIsValidating(false);
+        }
+    }, [isVisible, initialModel]);
+    const handleProviderSelect = useCallback(() => {
+        const provider = CUSTOM_MODEL_PROVIDERS[providerIndex];
+        if (provider) {
+            setSelectedProvider(provider);
+            setCurrentStep(0);
+            setCurrentInput('');
+            setError(null);
+        }
+    }, [providerIndex]);
+    const handleNext = useCallback(async () => {
+        if (!currentStepConfig || !selectedProvider || isSaving || isValidating)
+            return;
+        const value = currentInput.trim();
+        // Sync validation
+        if (currentStepConfig.validate) {
+            const validationError = currentStepConfig.validate(value);
+            if (validationError) {
+                setError(validationError);
+                return;
+            }
+        }
+        else if (currentStepConfig.required && !value) {
+            setError(`${currentStepConfig.label} is required`);
+            return;
+        }
+        // Async validation (data-driven - no provider-specific conditionals)
+        const asyncError = await (async () => {
+            setIsValidating(true);
+            setError(null);
+            try {
+                return await runAsyncValidation(selectedProvider, currentStepConfig.field, value);
+            }
+            finally {
+                setIsValidating(false);
+            }
+        })();
+        if (asyncError) {
+            setError(asyncError);
+            return;
+        }
+        // Save value
+        const newValues = { ...values, [currentStepConfig.field]: value };
+        setValues(newValues);
+        setError(null);
+        setCurrentInput('');
+        // Check if we're done
+        if (currentStep >= wizardSteps.length - 1) {
+            await saveModel(newValues);
+        }
+        else {
+            const nextStep = currentStep + 1;
+            setCurrentStep(nextStep);
+            // Pre-populate next step from stored values (for edit mode)
+            const nextStepConfig = wizardSteps[nextStep];
+            const nextValue = nextStepConfig ? newValues[nextStepConfig.field] : undefined;
+            setCurrentInput(nextValue ?? '');
+        }
+    }, [
+        currentInput,
+        currentStep,
+        currentStepConfig,
+        isSaving,
+        isValidating,
+        selectedProvider,
+        values,
+        wizardSteps,
+    ]);
+    /**
+     * Build and save the model using provider config's buildModel function.
+     */
+    const saveModel = useCallback(async (finalValues) => {
+        if (!selectedProvider || !providerConfig)
+            return;
+        // Build model using provider config (no conditionals!)
+        const model = providerConfig.buildModel(finalValues, selectedProvider);
+        // Handle API key storage
+        const userEnteredKey = finalValues.apiKey?.trim();
+        const providerKeyStatus = getProviderKeyStatus(selectedProvider);
+        const existingProviderKey = resolveApiKeyForProvider(selectedProvider);
+        const keyStorage = determineApiKeyStorage(selectedProvider, userEnteredKey, providerKeyStatus.hasApiKey, existingProviderKey);
+        if (keyStorage.saveToProviderEnvVar && userEnteredKey) {
+            try {
+                await saveProviderApiKey(selectedProvider, userEnteredKey, process.cwd());
+            }
+            catch (err) {
+                logger.warn(`Failed to save provider API key: ${err instanceof Error ? err.message : 'Unknown error'}`);
+                // Fall back to per-model storage
+                keyStorage.saveAsPerModel = true;
+            }
+        }
+        if (keyStorage.saveAsPerModel && userEnteredKey) {
+            model.apiKey = userEnteredKey;
+        }
+        // Save to storage
+        setIsSaving(true);
+        try {
+            // If editing and name changed, delete the old model first
+            if (originalName && originalName !== model.name) {
+                try {
+                    await deleteCustomModel(originalName);
+                }
+                catch (err) {
+                    // Log but continue - old model might already be deleted
+                    logger.warn(`Failed to delete old model "${originalName}" during rename: ${err instanceof Error ? err.message : String(err)}`);
+                }
+            }
+            await saveCustomModel(model);
+            onComplete(model);
+        }
+        catch (err) {
+            logger.error(`Failed to save custom model: ${err instanceof Error ? err.message : 'Unknown error'}`);
+            setError(`Failed to save: ${err instanceof Error ? err.message : 'Unknown error'}`);
+            setIsSaving(false);
+        }
+    }, [selectedProvider, providerConfig, originalName, onComplete]);
+    const handleBack = useCallback(() => {
+        if (currentStep > 0) {
+            setCurrentStep(currentStep - 1);
+            // Restore previous value
+            const prevStep = wizardSteps[currentStep - 1];
+            if (prevStep) {
+                setCurrentInput(values[prevStep.field] || '');
+            }
+            setError(null);
+        }
+        else if (selectedProvider) {
+            // Go back to provider selection
+            setSelectedProvider(null);
+            setError(null);
+        }
+        else {
+            onClose();
+        }
+    }, [currentStep, onClose, selectedProvider, values, wizardSteps]);
+    // Handle keyboard input
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            if (!isVisible || isSaving || isValidating)
+                return false;
+            // Delegate to LocalModelWizard when local provider is selected
+            if (selectedProvider === 'local' && localModelWizardRef.current) {
+                return localModelWizardRef.current.handleInput(input, key);
+            }
+            // Escape to go back/close
+            if (key.escape) {
+                handleBack();
+                return true;
+            }
+            // Provider selection mode
+            if (!selectedProvider) {
+                const providers = getAvailableProviders();
+                if (key.upArrow) {
+                    setProviderIndex((prev) => prev > 0 ? prev - 1 : providers.length - 1);
+                    return true;
+                }
+                if (key.downArrow) {
+                    setProviderIndex((prev) => prev < providers.length - 1 ? prev + 1 : 0);
+                    return true;
+                }
+                if (key.return) {
+                    handleProviderSelect();
+                    return true;
+                }
+                return true; // Consume all input during provider selection
+            }
+            // Wizard step mode
+            if (key.return) {
+                void handleNext();
+                return true;
+            }
+            // Backspace
+            if (key.backspace || key.delete) {
+                setCurrentInput((prev) => prev.slice(0, -1));
+                setError(null);
+                return true;
+            }
+            // Regular character input
+            if (input && !key.ctrl && !key.meta) {
+                setCurrentInput((prev) => prev + input);
+                setError(null);
+                return true;
+            }
+            return false;
+        },
+    }), [
+        isVisible,
+        isSaving,
+        isValidating,
+        handleBack,
+        handleNext,
+        handleProviderSelect,
+        selectedProvider,
+    ]);
+    if (!isVisible)
+        return null;
+    // Provider selection screen (using shared component)
+    if (!selectedProvider) {
+        return _jsx(ProviderSelector, { selectedIndex: providerIndex, isEditing: isEditing });
+    }
+    // Local provider uses specialized wizard with download support
+    if (selectedProvider === 'local') {
+        return (_jsx(LocalModelWizard, { ref: localModelWizardRef, isVisible: isVisible, onComplete: onComplete, onClose: () => {
+                // Go back to provider selection instead of closing completely
+                setSelectedProvider(null);
+            } }));
+    }
+    // Wizard steps screen for other providers
+    if (!currentStepConfig || !providerConfig)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, marginTop: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "green", children: isEditing ? 'Edit Custom Model' : 'Add Custom Model' }), _jsxs(Text, { color: "gray", children: [' ', "(", providerConfig.displayName, ") Step ", currentStep + 1, "/", wizardSteps.length] })] }), providerConfig.setupInfo && currentStep === 0 && (_jsx(SetupInfoBanner, { title: providerConfig.setupInfo.title, description: providerConfig.setupInfo.description, docsUrl: providerConfig.setupInfo.docsUrl })), _jsx(WizardStepInput, { step: currentStepConfig, currentInput: currentInput, error: error, isValidating: isValidating, isSaving: isSaving, additionalContent: currentStepConfig.field === 'apiKey' ? (_jsx(ApiKeyStep, { provider: selectedProvider })) : undefined }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["Enter to continue \u2022 Esc to", ' ', currentStep > 0 ? 'go back' : 'back to provider'] }) })] }));
+});
+export default CustomModelWizard;

package/dist/cli/ink-cli/components/overlays/LogLevelSelector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * LogLevelSelector Component
+ * Interactive selector for changing log level
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+import type { DextoAgent } from '@dexto/core';
+interface LogLevelSelectorProps {
+    isVisible: boolean;
+    onSelect: (level: string) => void;
+    onClose: () => void;
+    agent: DextoAgent;
+}
+export interface LogLevelSelectorHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Log level selector - thin wrapper around BaseSelector
+ */
+declare const LogLevelSelector: React.ForwardRefExoticComponent<LogLevelSelectorProps & React.RefAttributes<LogLevelSelectorHandle>>;
+export default LogLevelSelector;
+//# sourceMappingURL=LogLevelSelector.d.ts.map

package/dist/cli/ink-cli/components/overlays/LogLevelSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogLevelSelector.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/LogLevelSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,UAAU,qBAAqB;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAkBD;;GAEG;AACH,QAAA,MAAM,gBAAgB,sGAyFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,59 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * LogLevelSelector Component
+ * Interactive selector for changing log level
+ */
+import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { Box, Text } from 'ink';
+import { BaseSelector } from '../base/BaseSelector.js';
+// Log levels matching DextoLogger's supported levels
+const LOG_LEVELS = [
+    { level: 'error', description: 'Errors only', icon: '❌' },
+    { level: 'warn', description: 'Warnings and above', icon: '⚠️' },
+    { level: 'info', description: 'Info and above (default)', icon: 'ℹ️' },
+    { level: 'debug', description: 'Debug information', icon: '🔍' },
+    { level: 'silly', description: 'Everything (most verbose)', icon: '🔬' },
+];
+/**
+ * Log level selector - thin wrapper around BaseSelector
+ */
+const LogLevelSelector = forwardRef(function LogLevelSelector({ isVisible, onSelect, onClose, agent }, ref) {
+    const baseSelectorRef = useRef(null);
+    // Forward handleInput to BaseSelector
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            return baseSelectorRef.current?.handleInput(input, key) ?? false;
+        },
+    }), []);
+    const [levels, setLevels] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [logFilePath, setLogFilePath] = useState(null);
+    // Build levels list with current indicator
+    useEffect(() => {
+        if (!isVisible) {
+            setLogFilePath(null);
+            return;
+        }
+        // Get current level from agent's logger (shared across all child loggers)
+        const currentLevel = agent.logger.getLevel();
+        const levelList = LOG_LEVELS.map((l) => ({
+            ...l,
+            isCurrent: l.level === currentLevel,
+        }));
+        setLevels(levelList);
+        setLogFilePath(agent.logger.getLogFilePath());
+        // Set initial selection to current level
+        const currentIndex = levelList.findIndex((l) => l.isCurrent);
+        if (currentIndex >= 0) {
+            setSelectedIndex(currentIndex);
+        }
+    }, [isVisible, agent]);
+    // Format level item for display
+    const formatItem = (option, isSelected) => (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [option.icon, " "] }), _jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: option.level }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: [" - ", option.description] }), option.isCurrent && (_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: [' ', "\u2190 Current"] }))] }));
+    // Handle selection
+    const handleSelect = (option) => {
+        onSelect(option.level);
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(BaseSelector, { ref: baseSelectorRef, items: levels, isVisible: isVisible, isLoading: false, selectedIndex: selectedIndex, onSelectIndex: setSelectedIndex, onSelect: handleSelect, onClose: onClose, formatItem: formatItem, title: "Select Log Level", borderColor: "yellowBright", emptyMessage: "No log levels available" }), logFilePath && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["\uD83D\uDCC1 Log file: ", logFilePath] }) }))] }));
+});
+export default LogLevelSelector;