@qduc/term2 0.7.2 → 0.8.0

package/dist/hooks/use-provider-selection.js

@@ -0,0 +1,691 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useInputContext } from '../context/InputContext.js';
+import { useSelection } from './use-selection.js';
+import { PROVIDER_TYPES, loadProviderItems as loadProviderItemsFromService, saveProvider as saveProviderToService, deleteCustomProvider as deleteCustomProviderFromService, validateWizardName, validateWizardUrl, isProviderBuiltIn, getProviderLabel, } from '../providers/provider-service.js';
+const DELETE_CONFIRM_DEFAULT_INDEX = 1;
+export const useProviderSelection = (settingsService) => {
+    const { mode, setMode, setInput } = useInputContext();
+    const [phase, setPhase] = useState('list');
+    const [items, setItems] = useState([]);
+    const [draft, setDraft] = useState(null);
+    const [editingOriginalName, setEditingOriginalName] = useState(null);
+    const [editingField, setEditingField] = useState(null);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [discardFromPhase, setDiscardFromPhase] = useState(null);
+    const [draftModified, setDraftModified] = useState(false);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [reorderList, setReorderList] = useState([]);
+    const activeItems = useMemo(() => {
+        switch (phase) {
+            case 'list':
+                return [
+                    ...items.map((i) => ({
+                        kind: 'provider',
+                        id: i.id,
+                        label: i.label,
+                        isActive: i.isActive,
+                        isCustom: i.isCustom,
+                    })),
+                    { kind: 'add-provider', label: 'Add Custom Provider' },
+                    { kind: 'action', label: 'Reorder Providers' },
+                ];
+            case 'wizard_type':
+                return PROVIDER_TYPES.map((type) => ({ kind: 'type', label: type }));
+            case 'edit_fields': {
+                if (!draft)
+                    return [];
+                const isEditingBuiltIn = editingOriginalName ? isProviderBuiltIn(editingOriginalName) : false;
+                if (isEditingBuiltIn) {
+                    return [
+                        { kind: 'field', label: `Name: ${draft.name || '<empty>'} (Built-in)`, fieldKey: 'name' },
+                        { kind: 'field', label: `Type: ${draft.type || '<empty>'} (Built-in)`, fieldKey: 'type' },
+                        {
+                            kind: 'field',
+                            label: 'API Key',
+                            detail: draft.apiKey ? '********' : '<empty>',
+                            fieldKey: 'apiKey',
+                        },
+                        { kind: 'action', label: 'Save Changes' },
+                        { kind: 'action', label: 'Cancel' },
+                    ];
+                }
+                return [
+                    { kind: 'field', label: `Name: ${draft.name || '<empty>'}`, fieldKey: 'name' },
+                    { kind: 'field', label: `Type: ${draft.type || '<empty>'}`, fieldKey: 'type' },
+                    {
+                        kind: 'field',
+                        label: 'Base URL',
+                        detail: draft.baseUrl || '<empty>',
+                        fieldKey: 'baseUrl',
+                    },
+                    {
+                        kind: 'field',
+                        label: 'API Key',
+                        detail: draft.apiKey ? '********' : '<empty>',
+                        fieldKey: 'apiKey',
+                    },
+                    { kind: 'action', label: 'Save Changes' },
+                    { kind: 'action', label: 'Cancel' },
+                ];
+            }
+            case 'confirm_discard':
+                return [
+                    { kind: 'action', label: 'Yes, discard changes', tone: 'destructive' },
+                    { kind: 'action', label: 'No, keep editing' },
+                ];
+            case 'confirm_delete':
+                return [
+                    { kind: 'action', label: 'Yes, delete this provider', tone: 'destructive' },
+                    { kind: 'action', label: 'No, keep it' },
+                ];
+            case 'reorder':
+                return [
+                    ...reorderList.map((id) => ({
+                        kind: 'reorder-item',
+                        id,
+                        label: getProviderLabel(id) ?? id,
+                    })),
+                ];
+            default:
+                return [];
+        }
+    }, [phase, items, draft, editingOriginalName, reorderList]);
+    const checkIsInactive = useCallback((item) => {
+        return item.kind === 'provider' && item.id === 'codex';
+    }, []);
+    const { selectedIndex, setSelectedIndex, moveUp: selectionMoveUp, moveDown: selectionMoveDown, } = useSelection(activeItems, {
+        isInactive: checkIsInactive,
+    });
+    // Reset scrollOffset when phase changes
+    useEffect(() => {
+        setScrollOffset(0);
+    }, [phase]);
+    // Sync scrollOffset with selectedIndex
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex >= scrollOffset + 10) {
+            setScrollOffset(selectedIndex - 10 + 1);
+        }
+    }, [selectedIndex, scrollOffset]);
+    const isOpen = mode === 'provider_selection';
+    // Load provider items from service
+    const loadProviderList = useCallback(() => {
+        setItems(loadProviderItemsFromService(settingsService));
+    }, [settingsService]);
+    // Sync list of providers on open
+    useEffect(() => {
+        if (isOpen) {
+            loadProviderList();
+            setPhase('list');
+            setSelectedIndex(0);
+            setDraft(null);
+            setEditingOriginalName(null);
+            setEditingField(null);
+            setErrorMessage(null);
+            setFieldErrors({});
+            setDiscardFromPhase(null);
+            setDraftModified(false);
+        }
+    }, [isOpen, loadProviderList]);
+    const open = useCallback(() => {
+        setMode('provider_selection');
+    }, [setMode]);
+    const close = useCallback(() => {
+        if (mode === 'provider_selection') {
+            setMode('text');
+        }
+    }, [mode, setMode]);
+    // Key navigation handlers
+    const moveUp = useCallback(() => {
+        selectionMoveUp();
+    }, [selectionMoveUp]);
+    const moveDown = useCallback(() => {
+        selectionMoveDown();
+    }, [selectionMoveDown]);
+    const getListCount = () => {
+        return activeItems.length;
+    };
+    const saveDraft = useCallback(() => {
+        if (!draft)
+            return;
+        setErrorMessage(null);
+        setFieldErrors({});
+        const result = saveProviderToService(settingsService, draft, editingOriginalName);
+        if (!result.success) {
+            if (result.errorMessage)
+                setErrorMessage(result.errorMessage);
+            if (result.fieldErrors)
+                setFieldErrors(result.fieldErrors);
+            return;
+        }
+        loadProviderList();
+        setPhase('list');
+        setSelectedIndex(0);
+        setDraft(null);
+        setEditingOriginalName(null);
+        setFieldErrors({});
+    }, [draft, editingOriginalName, settingsService, loadProviderList]);
+    const selectItem = useCallback(() => {
+        const listCount = getListCount();
+        if (listCount === 0)
+            return;
+        const index = Math.min(selectedIndex, listCount - 1);
+        if (phase === 'list') {
+            if (index === items.length) {
+                // "Add Custom Provider" selected
+                setFieldErrors({});
+                setDiscardFromPhase(null);
+                setDraftModified(false);
+                setDraft({
+                    name: '',
+                    type: 'openai-compatible',
+                    baseUrl: '',
+                    apiKey: '',
+                });
+                setPhase('wizard_name');
+                setSelectedIndex(0);
+                setInput('');
+            }
+            else if (index === items.length + 1) {
+                // "Reorder Providers" selected
+                const providerOrder = settingsService.get('providerOrder') ?? [];
+                const allIds = items.map((i) => i.id);
+                const orderedIds = providerOrder.length > 0
+                    ? (() => {
+                        const orderIndex = new Map();
+                        providerOrder.forEach((id, idx) => orderIndex.set(id, idx));
+                        return [...allIds].sort((a, b) => {
+                            const aI = orderIndex.get(a);
+                            const bI = orderIndex.get(b);
+                            if (aI !== undefined && bI !== undefined)
+                                return aI - bI;
+                            if (aI !== undefined)
+                                return -1;
+                            if (bI !== undefined)
+                                return 1;
+                            return 0;
+                        });
+                    })()
+                    : allIds;
+                setReorderList(orderedIds);
+                setPhase('reorder');
+                setSelectedIndex(0);
+            }
+            else {
+                // Provider selected
+                const provider = items[index];
+                if (provider.isCustom) {
+                    setFieldErrors({});
+                    setDiscardFromPhase(null);
+                    setDraftModified(false);
+                    // Edit custom provider directly
+                    const list = settingsService.get('providers') || [];
+                    const found = list.find((p) => p && p.name === provider.id);
+                    if (found) {
+                        setDraft({
+                            name: found.name,
+                            type: found.type || 'openai-compatible',
+                            baseUrl: found.baseUrl || '',
+                            apiKey: found.apiKey || '',
+                        });
+                    }
+                    else {
+                        setDraft({
+                            name: provider.id,
+                            type: 'openai-compatible',
+                            baseUrl: '',
+                            apiKey: '',
+                        });
+                    }
+                    setEditingOriginalName(found ? found.name : null);
+                    setFieldErrors({});
+                    setPhase('edit_fields');
+                    setSelectedIndex(0);
+                    setInput('');
+                }
+                else if (provider.id !== 'codex') {
+                    // Allow editing apiKey for built-in providers (except Codex)
+                    setFieldErrors({});
+                    setDiscardFromPhase(null);
+                    setDraftModified(false);
+                    const storedKey = settingsService.get(`agent.${provider.id}.apiKey`) || '';
+                    setDraft({
+                        name: provider.label,
+                        type: provider.id,
+                        apiKey: storedKey,
+                    });
+                    setEditingOriginalName(provider.id);
+                    setPhase('edit_fields');
+                    setSelectedIndex(2);
+                    setInput('');
+                }
+            }
+        }
+        else if (phase === 'wizard_type') {
+            const selectedType = PROVIDER_TYPES[index];
+            if (draft) {
+                setDraft({ ...draft, type: selectedType });
+                setDraftModified(true);
+                if (editingField) {
+                    // We were editing from edit_fields
+                    setFieldErrors({});
+                    setDraftModified(false);
+                    setPhase('edit_fields');
+                    setSelectedIndex(1); // select the Type row
+                    setEditingField(null);
+                }
+                else {
+                    // Normal add wizard flow: type -> url
+                    setPhase('wizard_url');
+                    setSelectedIndex(0);
+                }
+            }
+        }
+        else if (phase === 'edit_fields') {
+            if (!draft)
+                return;
+            const isEditingBuiltIn = editingOriginalName ? isProviderBuiltIn(editingOriginalName) : false;
+            if (isEditingBuiltIn) {
+                if (index === 2) {
+                    // Edit API Key
+                    setEditingField('apiKey');
+                    setDraftModified(false);
+                    setPhase('wizard_key');
+                    setInput(draft.apiKey || '');
+                }
+                else if (index === 3) {
+                    // Save Changes
+                    saveDraft();
+                }
+                else if (index === 4) {
+                    // Cancel
+                    setPhase('list');
+                    setSelectedIndex(0);
+                    setDraft(null);
+                    setEditingOriginalName(null);
+                    setFieldErrors({});
+                    setInput('');
+                }
+            }
+            else {
+                if (index === 0) {
+                    // Edit Name
+                    setEditingField('name');
+                    setDraftModified(false);
+                    setPhase('wizard_name');
+                    setInput(draft.name || '');
+                }
+                else if (index === 1) {
+                    // Edit Type
+                    setEditingField('type');
+                    setDraftModified(false);
+                    setPhase('wizard_type');
+                    setSelectedIndex(PROVIDER_TYPES.indexOf(draft.type));
+                    setInput('');
+                }
+                else if (index === 2) {
+                    // Edit Base URL
+                    setEditingField('baseUrl');
+                    setDraftModified(false);
+                    setPhase('wizard_url');
+                    setInput(draft.baseUrl || '');
+                }
+                else if (index === 3) {
+                    // Edit API Key
+                    setEditingField('apiKey');
+                    setDraftModified(false);
+                    setPhase('wizard_key');
+                    setInput(draft.apiKey || '');
+                }
+                else if (index === 4) {
+                    // Save Changes
+                    saveDraft();
+                }
+                else {
+                    // Cancel
+                    setPhase('list');
+                    setSelectedIndex(0);
+                    setDraft(null);
+                    setFieldErrors({});
+                    setInput('');
+                }
+            }
+        }
+        else if (phase === 'reorder') {
+            // Enter saves the current order
+            settingsService.setPersistent('providerOrder', reorderList);
+            setPhase('list');
+            setSelectedIndex(0);
+            setReorderList([]);
+        }
+        else if (phase === 'confirm_discard') {
+            if (index === 0) {
+                setDraftModified(false);
+                const isEditingBuiltIn = editingOriginalName ? isProviderBuiltIn(editingOriginalName) : false;
+                if (discardFromPhase === 'wizard_name') {
+                    if (editingField !== null) {
+                        setPhase('edit_fields');
+                        setSelectedIndex(0);
+                        setEditingField(null);
+                    }
+                    else {
+                        setPhase('list');
+                        setSelectedIndex(0);
+                        setDraft(null);
+                        setEditingOriginalName(null);
+                    }
+                }
+                else if (discardFromPhase === 'wizard_type') {
+                    if (editingField !== null) {
+                        setPhase('edit_fields');
+                        setSelectedIndex(1);
+                        setEditingField(null);
+                    }
+                    else {
+                        setPhase('wizard_name');
+                        setSelectedIndex(0);
+                    }
+                }
+                else if (discardFromPhase === 'wizard_url') {
+                    if (editingField !== null) {
+                        setPhase('edit_fields');
+                        setSelectedIndex(2);
+                        setEditingField(null);
+                    }
+                    else {
+                        setPhase('wizard_type');
+                        setSelectedIndex(0);
+                    }
+                }
+                else if (discardFromPhase === 'wizard_key') {
+                    if (editingField !== null) {
+                        setPhase('edit_fields');
+                        setSelectedIndex(isEditingBuiltIn ? 2 : 3);
+                        setEditingField(null);
+                    }
+                    else {
+                        setPhase('wizard_url');
+                        setSelectedIndex(0);
+                    }
+                }
+                setDiscardFromPhase(null);
+                setFieldErrors({});
+            }
+            else {
+                setPhase(discardFromPhase);
+                setSelectedIndex(0);
+                setDiscardFromPhase(null);
+            }
+        }
+        else if (phase === 'confirm_delete') {
+            if (index === 0) {
+                // Yes, delete
+                if (editingOriginalName) {
+                    deleteCustomProviderFromService(settingsService, editingOriginalName);
+                    loadProviderList();
+                }
+                setPhase('list');
+                setSelectedIndex(0);
+                setEditingOriginalName(null);
+            }
+            else {
+                // No, keep
+                setPhase('list');
+                setSelectedIndex(0);
+                setEditingOriginalName(null);
+            }
+        }
+    }, [
+        phase,
+        selectedIndex,
+        items,
+        editingOriginalName,
+        draft,
+        editingField,
+        discardFromPhase,
+        settingsService,
+        loadProviderList,
+        setInput,
+        reorderList,
+        saveDraft,
+    ]);
+    const goBack = useCallback(() => {
+        setErrorMessage(null);
+        setInput('');
+        if (phase === 'list') {
+            close();
+        }
+        else if ((phase === 'wizard_name' || phase === 'wizard_type' || phase === 'wizard_url' || phase === 'wizard_key') &&
+            draftModified) {
+            setDiscardFromPhase(phase);
+            setPhase('confirm_discard');
+            setSelectedIndex(DELETE_CONFIRM_DEFAULT_INDEX);
+        }
+        else if (phase === 'wizard_name') {
+            if (editingField) {
+                setPhase('edit_fields');
+                setSelectedIndex(0);
+                setEditingField(null);
+            }
+            else {
+                setPhase('list');
+                setSelectedIndex(0);
+            }
+        }
+        else if (phase === 'wizard_type') {
+            if (editingField) {
+                setPhase('edit_fields');
+                setSelectedIndex(1);
+                setEditingField(null);
+            }
+            else {
+                setPhase('wizard_name');
+                setSelectedIndex(0);
+            }
+        }
+        else if (phase === 'wizard_url') {
+            if (editingField) {
+                setPhase('edit_fields');
+                setSelectedIndex(2);
+                setEditingField(null);
+            }
+            else {
+                setPhase('wizard_type');
+                setSelectedIndex(0);
+            }
+        }
+        else if (phase === 'wizard_key') {
+            if (editingField) {
+                setPhase('edit_fields');
+                const isEditingBuiltIn = editingOriginalName ? isProviderBuiltIn(editingOriginalName) : false;
+                setSelectedIndex(isEditingBuiltIn ? 2 : 3);
+                setEditingField(null);
+            }
+            else {
+                setPhase('wizard_url');
+                setSelectedIndex(0);
+            }
+        }
+        else if (phase === 'edit_fields') {
+            setFieldErrors({});
+            setPhase('list');
+            setSelectedIndex(0);
+            setDraft(null);
+            setEditingOriginalName(null);
+        }
+        else if (phase === 'reorder') {
+            setPhase('list');
+            setSelectedIndex(0);
+            setReorderList([]);
+        }
+        else if (phase === 'confirm_delete') {
+            setPhase('list');
+            setSelectedIndex(0);
+            setEditingOriginalName(null);
+        }
+        else if (phase === 'confirm_discard') {
+            if (discardFromPhase) {
+                setPhase(discardFromPhase);
+                setSelectedIndex(0);
+            }
+            setDiscardFromPhase(null);
+        }
+    }, [phase, editingField, close, draftModified, discardFromPhase, draft, setInput]);
+    // Handler for text input submissions from app.tsx wizard manager
+    const handleTextInputSubmit = useCallback((value) => {
+        setErrorMessage(null);
+        const val = value.trim();
+        if (phase === 'wizard_name') {
+            const nameValidation = validateWizardName(val, settingsService, editingField !== null, editingOriginalName ?? undefined);
+            if (!nameValidation.valid) {
+                setErrorMessage(nameValidation.errorMessage);
+                return false;
+            }
+            if (draft) {
+                const updatedDraft = { ...draft, name: val };
+                setDraft(updatedDraft);
+                setDraftModified(true);
+                if (editingField) {
+                    setFieldErrors({});
+                    setDraftModified(false);
+                    setPhase('edit_fields');
+                    setSelectedIndex(0);
+                    setEditingField(null);
+                }
+                else {
+                    setPhase('wizard_type');
+                    setSelectedIndex(0);
+                }
+            }
+            setInput('');
+            return true;
+        }
+        if (phase === 'wizard_url') {
+            const type = draft?.type || 'openai-compatible';
+            const urlValidation = validateWizardUrl(val, type);
+            if (!urlValidation.valid) {
+                setErrorMessage(urlValidation.errorMessage);
+                return false;
+            }
+            if (draft) {
+                const updatedDraft = { ...draft, baseUrl: val || undefined };
+                setDraft(updatedDraft);
+                setDraftModified(true);
+                if (editingField) {
+                    setFieldErrors({});
+                    setDraftModified(false);
+                    setPhase('edit_fields');
+                    setSelectedIndex(2);
+                    setEditingField(null);
+                }
+                else {
+                    setPhase('wizard_key');
+                    setSelectedIndex(0);
+                }
+            }
+            setInput('');
+            return true;
+        }
+        if (phase === 'wizard_key') {
+            if (draft) {
+                const updatedDraft = { ...draft, apiKey: val || undefined };
+                setDraft(updatedDraft);
+                setDraftModified(true);
+                const isEditingBuiltIn = editingOriginalName ? isProviderBuiltIn(editingOriginalName) : false;
+                if (editingField) {
+                    setFieldErrors({});
+                    setDraftModified(false);
+                    setPhase('edit_fields');
+                    setSelectedIndex(isEditingBuiltIn ? 2 : 3);
+                    setEditingField(null);
+                }
+                else {
+                    // Wizard complete, go to fields overview before saving
+                    setPhase('edit_fields');
+                    setSelectedIndex(isEditingBuiltIn ? 3 : 4); // focus Save changes button
+                    setFieldErrors({});
+                    setDraftModified(false);
+                }
+            }
+            setInput('');
+            return true;
+        }
+        return false;
+    }, [phase, draft, editingField, editingOriginalName, settingsService, setInput]);
+    const requestDelete = useCallback(() => {
+        if (phase !== 'list')
+            return;
+        const index = Math.min(selectedIndex, items.length - 1);
+        if (index < 0 || index >= items.length)
+            return;
+        const provider = items[index];
+        if (!provider.isCustom)
+            return; // only custom providers can be deleted
+        setEditingOriginalName(provider.id);
+        setPhase('confirm_delete');
+        setSelectedIndex(DELETE_CONFIRM_DEFAULT_INDEX); // default to 'No' for safety
+    }, [phase, selectedIndex, items]);
+    const getActiveItems = useCallback(() => activeItems, [activeItems]);
+    const saveProviderOrder = useCallback(() => {
+        settingsService.setPersistent('providerOrder', reorderList);
+        setPhase('list');
+        setSelectedIndex(0);
+        setReorderList([]);
+    }, [settingsService, reorderList]);
+    const moveProviderUp = useCallback(() => {
+        if (phase !== 'reorder')
+            return;
+        const idx = selectedIndex;
+        if (idx <= 0)
+            return;
+        setReorderList((prev) => {
+            const next = [...prev];
+            [next[idx - 1], next[idx]] = [next[idx], next[idx - 1]];
+            return next;
+        });
+        selectionMoveUp();
+    }, [phase, selectedIndex, selectionMoveUp]);
+    const moveProviderDown = useCallback(() => {
+        if (phase !== 'reorder')
+            return;
+        const idx = selectedIndex;
+        if (idx >= reorderList.length - 1)
+            return;
+        setReorderList((prev) => {
+            const next = [...prev];
+            [next[idx], next[idx + 1]] = [next[idx + 1], next[idx]];
+            return next;
+        });
+        selectionMoveDown();
+    }, [phase, selectedIndex, reorderList.length, selectionMoveDown]);
+    const selectedProviderName = editingOriginalName ?? undefined;
+    return {
+        isOpen,
+        phase,
+        items,
+        selectedIndex,
+        scrollOffset,
+        draft,
+        errorMessage,
+        fieldErrors,
+        draftModified,
+        discardFromPhase,
+        selectedProviderName,
+        open,
+        close,
+        moveUp,
+        moveDown,
+        selectItem,
+        goBack,
+        requestDelete,
+        getActiveItems,
+        handleTextInputSubmit,
+        saveProviderOrder,
+        moveProviderUp,
+        moveProviderDown,
+    };
+};
+//# sourceMappingURL=use-provider-selection.js.map