orquesta-cli 0.1.12 → 0.1.14

package/src/ui/components/dialogs/SettingsDialog.tsx

@@ -1,939 +0,0 @@
-/**
- * Settings Browser Component
- *
- * Displays settings menu for interactive selection
- */
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { Box, Text, useInput } from 'ink';
-import TextInput from 'ink-text-input';
-import SelectInput from 'ink-select-input';
-import { PlanningMode } from '../../../core/slash-command-handler.js';
-import { configManager } from '../../../core/config/config-manager.js';
-import { sessionManager } from '../../../core/session/session-manager.js';
-import { LLMClient } from '../../../core/llm/llm-client.js';
-import { EndpointConfig } from '../../../types/index.js';
-
-interface SettingsBrowserProps {
-  currentPlanningMode: PlanningMode;
-  onPlanningModeChange: (mode: PlanningMode) => void;
-  onClose: () => void;
-}
-
-interface SelectItem {
-  label: string;
-  value: string;
-}
-
-interface SystemStatus {
-  version: string;
-  sessionId: string;
-  workingDir: string;
-  endpointUrl: string;
-  llmModel: string;
-}
-
-interface EndpointHealthStatus {
-  endpointId: string;
-  modelId: string;
-  healthy: boolean;
-  latency?: number;
-  error?: string;
-}
-
-interface LLMFormData {
-  name: string;
-  baseUrl: string;
-  apiKey: string;
-  modelId: string;
-  modelName: string;
-  maxContextLength: string;
-}
-
-type SettingsView =
-  | 'main'
-  | 'status'
-  | 'planning-mode'
-  | 'llms'
-  | 'llm-add'
-  | 'llm-detail'
-  | 'llm-edit'
-  | 'llm-delete-confirm';
-
-type FormField = 'name' | 'baseUrl' | 'apiKey' | 'modelId' | 'modelName' | 'maxContextLength' | 'buttons';
-
-export const SettingsBrowser: React.FC<SettingsBrowserProps> = ({
-  currentPlanningMode: _currentPlanningMode, // Kept for backward compatibility but not used (always auto)
-  onPlanningModeChange: _onPlanningModeChange, // Kept for backward compatibility but not used
-  onClose,
-}) => {
-  // Note: currentPlanningMode and onPlanningModeChange are kept for interface compatibility
-  // but are not used since planning mode is always 'auto'
-  void _currentPlanningMode;
-  void _onPlanningModeChange;
-  const [view, setView] = useState<SettingsView>('main');
-  const [systemStatus, setSystemStatus] = useState<SystemStatus | null>(null);
-
-  // LLMs state
-  const [endpoints, setEndpoints] = useState<EndpointConfig[]>([]);
-  const [healthStatus, setHealthStatus] = useState<EndpointHealthStatus[]>([]);
-  const [isHealthChecking, setIsHealthChecking] = useState(false);
-  const [selectedEndpoint, setSelectedEndpoint] = useState<EndpointConfig | null>(null);
-
-  // Form state
-  const [formData, setFormData] = useState<LLMFormData>({
-    name: '',
-    baseUrl: '',
-    apiKey: '',
-    modelId: '',
-    modelName: '',
-    maxContextLength: '128000',
-  });
-  const [formField, setFormField] = useState<FormField>('name');
-  const [formButtonIndex, setFormButtonIndex] = useState(0);
-  const [formError, setFormError] = useState<string | null>(null);
-  const [isTesting, setIsTesting] = useState(false);
-
-  // Load endpoints
-  const loadEndpoints = useCallback(() => {
-    setEndpoints(configManager.getAllEndpoints());
-  }, []);
-
-  // Run health check
-  const runHealthCheck = useCallback(async () => {
-    setIsHealthChecking(true);
-    try {
-      const results = await LLMClient.healthCheckAll();
-      const statusList: EndpointHealthStatus[] = [];
-
-      for (const [endpointId, modelResults] of results) {
-        for (const result of modelResults) {
-          statusList.push({
-            endpointId,
-            modelId: result.modelId,
-            healthy: result.healthy,
-            latency: result.latency,
-            error: result.error,
-          });
-        }
-      }
-
-      setHealthStatus(statusList);
-
-      // Update config with health status
-      await configManager.updateAllHealthStatus(results);
-    } catch {
-      // Ignore health check errors
-    } finally {
-      setIsHealthChecking(false);
-    }
-  }, []);
-
-  // Load system status when status view is shown
-  useEffect(() => {
-    if (view === 'status') {
-      const loadStatus = async () => {
-        const endpoint = configManager.getCurrentEndpoint();
-        const model = configManager.getCurrentModel();
-        const cwd = process.cwd();
-
-        // Read package.json for version
-        let version = '0.1.0';
-        try {
-          const { readFile } = await import('fs/promises');
-          const { fileURLToPath } = await import('url');
-          const { dirname, join } = await import('path');
-          const __filename = fileURLToPath(import.meta.url);
-          const __dirname = dirname(__filename);
-          const packageJsonPath = join(__dirname, '../../../package.json');
-          const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf-8'));
-          version = packageJson.version;
-        } catch {
-          // Use default version
-        }
-
-        setSystemStatus({
-          version,
-          sessionId: sessionManager.getCurrentSessionId() || 'No active session',
-          workingDir: cwd,
-          endpointUrl: endpoint?.baseUrl || 'Not configured',
-          llmModel: model ? `${model.name} (${model.id})` : 'Not configured',
-        });
-      };
-
-      loadStatus();
-    }
-  }, [view]);
-
-  // Load endpoints and run health check when LLMs view is shown
-  useEffect(() => {
-    if (view === 'llms') {
-      loadEndpoints();
-      runHealthCheck();
-    }
-  }, [view, loadEndpoints, runHealthCheck]);
-
-  // Get health status for endpoint
-  const getEndpointHealth = useCallback(
-    (endpointId: string): 'healthy' | 'degraded' | 'unhealthy' | 'unknown' => {
-      const statuses = healthStatus.filter((s) => s.endpointId === endpointId);
-      if (statuses.length === 0) return 'unknown';
-
-      const healthyCount = statuses.filter((s) => s.healthy).length;
-      if (healthyCount === statuses.length) return 'healthy';
-      if (healthyCount > 0) return 'degraded';
-      return 'unhealthy';
-    },
-    [healthStatus]
-  );
-
-  // Get health icon
-  const getHealthIcon = (status: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'): string => {
-    switch (status) {
-      case 'healthy':
-        return '✓';
-      case 'degraded':
-        return '⚠';
-      case 'unhealthy':
-        return '✗';
-      default:
-        return '?';
-    }
-  };
-
-  // Get health color
-  const getHealthColor = (
-    status: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
-  ): string => {
-    switch (status) {
-      case 'healthy':
-        return 'green';
-      case 'degraded':
-        return 'yellow';
-      case 'unhealthy':
-        return 'red';
-      default:
-        return 'gray';
-    }
-  };
-
-  // Handle form field navigation with Tab, Arrow keys, and Enter
-  const handleFormNavigation = useCallback(
-    (key: { tab?: boolean; shift?: boolean; return?: boolean; upArrow?: boolean; downArrow?: boolean }) => {
-      const fields: FormField[] = ['name', 'baseUrl', 'apiKey', 'modelId', 'modelName', 'maxContextLength', 'buttons'];
-      const currentIndex = fields.indexOf(formField);
-
-      // Tab or Enter to move to next field (except on buttons where Enter submits)
-      if (key.tab || (key.return && formField !== 'buttons')) {
-        if (key.shift) {
-          // Previous field
-          const prevIndex = currentIndex > 0 ? currentIndex - 1 : fields.length - 1;
-          setFormField(fields[prevIndex]!);
-        } else {
-          // Next field
-          const nextIndex = currentIndex < fields.length - 1 ? currentIndex + 1 : 0;
-          setFormField(fields[nextIndex]!);
-        }
-        return true; // Handled
-      }
-
-      // Arrow keys for navigation
-      if (key.upArrow) {
-        const prevIndex = currentIndex > 0 ? currentIndex - 1 : fields.length - 1;
-        if (formField === 'buttons') {
-          // In buttons, up/down toggles between buttons
-          setFormButtonIndex((prev) => (prev === 0 ? 1 : 0));
-        } else {
-          setFormField(fields[prevIndex]!);
-        }
-        return true;
-      }
-
-      if (key.downArrow) {
-        const nextIndex = currentIndex < fields.length - 1 ? currentIndex + 1 : 0;
-        if (formField === 'buttons') {
-          // In buttons, up/down toggles between buttons
-          setFormButtonIndex((prev) => (prev === 0 ? 1 : 0));
-        } else {
-          setFormField(fields[nextIndex]!);
-        }
-        return true;
-      }
-
-      return false;
-    },
-    [formField]
-  );
-
-  // Handle form submit
-  const handleFormSubmit = useCallback(async () => {
-    if (formButtonIndex === 1) {
-      // Cancel
-      setView('llms');
-      return;
-    }
-
-    // Validate
-    if (!formData.name.trim()) {
-      setFormError('Name is required');
-      return;
-    }
-    if (!formData.baseUrl.trim()) {
-      setFormError('Base URL is required');
-      return;
-    }
-    if (!formData.modelId.trim()) {
-      setFormError('Model ID is required');
-      return;
-    }
-
-    // Check for duplicate: same provider name AND same model ID
-    const isDuplicate = endpoints.some((ep) => {
-      // Skip the current endpoint when editing
-      if (view === 'llm-edit' && selectedEndpoint && ep.id === selectedEndpoint.id) {
-        return false;
-      }
-      // Check if provider name AND model ID both match
-      return ep.name === formData.name.trim() && ep.models.some((m) => m.id === formData.modelId.trim());
-    });
-
-    if (isDuplicate) {
-      setFormError(`Duplicate: Provider "${formData.name}" with Model ID "${formData.modelId}" already exists`);
-      return;
-    }
-
-    // Test connection
-    setIsTesting(true);
-    setFormError(null);
-
-    try {
-      const result = await LLMClient.testConnection(
-        formData.baseUrl,
-        formData.apiKey,
-        formData.modelId
-      );
-
-      if (!result.success) {
-        setFormError(result.error || 'Connection failed');
-        setIsTesting(false);
-        return;
-      }
-
-      // Save endpoint
-      const modelDisplayName = formData.modelName.trim() || formData.modelId;
-      const maxTokens = parseInt(formData.maxContextLength, 10) || 128000;
-      const newEndpoint: EndpointConfig = {
-        id: `ep-${Date.now()}`,
-        name: formData.name,
-        baseUrl: formData.baseUrl,
-        apiKey: formData.apiKey || undefined,
-        models: [
-          {
-            id: formData.modelId,
-            name: modelDisplayName,
-            maxTokens: maxTokens,
-            enabled: true,
-            healthStatus: 'healthy',
-            lastHealthCheck: new Date(),
-          },
-        ],
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      };
-
-      if (view === 'llm-edit' && selectedEndpoint) {
-        // Update existing
-        await configManager.updateEndpoint(selectedEndpoint.id, {
-          name: formData.name,
-          baseUrl: formData.baseUrl,
-          apiKey: formData.apiKey || undefined,
-          models: [
-            {
-              id: formData.modelId,
-              name: modelDisplayName,
-              maxTokens: maxTokens,
-              enabled: true,
-              healthStatus: 'healthy',
-              lastHealthCheck: new Date(),
-            },
-          ],
-        });
-      } else {
-        // Add new
-        await configManager.addEndpoint(newEndpoint);
-
-        // If this is the first endpoint, set it as current
-        if (endpoints.length === 0) {
-          await configManager.setCurrentEndpoint(newEndpoint.id);
-        }
-      }
-
-      setIsTesting(false);
-      setView('llms');
-      loadEndpoints();
-    } catch (error) {
-      setFormError(error instanceof Error ? error.message : 'Unknown error');
-      setIsTesting(false);
-    }
-  }, [formData, formButtonIndex, view, selectedEndpoint, endpoints.length, loadEndpoints]);
-
-  // Custom keyboard handling
-  useInput((_inputChar, key) => {
-    if (key.escape) {
-      if (view === 'llm-add' || view === 'llm-edit') {
-        setView('llms');
-        setFormError(null);
-      } else if (view === 'llm-detail' || view === 'llm-delete-confirm') {
-        setView('llms');
-      } else if (view === 'llms' || view === 'planning-mode' || view === 'status') {
-        setView('main');
-      } else {
-        onClose();
-      }
-      return;
-    }
-
-    // Form navigation for add/edit views
-    if (view === 'llm-add' || view === 'llm-edit') {
-      // Handle Tab, Arrow keys, and Enter for navigation
-      if (key.tab || key.upArrow || key.downArrow) {
-        handleFormNavigation({
-          tab: key.tab,
-          shift: key.shift,
-          upArrow: key.upArrow,
-          downArrow: key.downArrow
-        });
-        return;
-      }
-
-      // Enter key handling
-      if (key.return) {
-        if (formField === 'buttons') {
-          // Submit form when on buttons
-          handleFormSubmit();
-        } else {
-          // Move to next field when on text inputs
-          handleFormNavigation({ return: true });
-        }
-        return;
-      }
-    }
-  });
-
-  // Main menu items (Planning Mode removed - always auto)
-  const mainMenuItems: SelectItem[] = [
-    {
-      label: '0. Status',
-      value: 'status',
-    },
-    {
-      label: '1. LLMs',
-      value: 'llms',
-    },
-  ];
-
-  // Planning mode options - kept for backward compatibility but not used
-  // Planning mode is always 'auto'
-  const planningModeItems: SelectItem[] = [
-    {
-      label: 'auto ✓',
-      value: 'auto',
-    },
-  ];
-
-  // LLMs menu items
-  const llmsMenuItems: SelectItem[] = [
-    { label: '+ Add new endpoint...', value: 'add' },
-    ...endpoints.map((ep) => {
-      const health = getEndpointHealth(ep.id);
-      const icon = getHealthIcon(health);
-      const currentEndpoint = configManager.getCurrentEndpoint();
-      const isCurrent = currentEndpoint?.id === ep.id;
-      const modelName = ep.models[0]?.id || ep.models[0]?.name || 'unknown';
-      return {
-        label: `  ${modelName} (${ep.name})${isCurrent ? ' *' : ''} ${icon}`,
-        value: ep.id,
-      };
-    }),
-  ];
-
-  // Detail menu items
-  const detailMenuItems: SelectItem[] = [
-    { label: 'Edit', value: 'edit' },
-    { label: 'Delete', value: 'delete' },
-    { label: 'Set as Current', value: 'set-current' },
-    { label: 'Refresh Health', value: 'refresh' },
-  ];
-
-  // Delete confirm items
-  const deleteConfirmItems: SelectItem[] = [
-    { label: 'Yes, delete', value: 'confirm' },
-    { label: 'Cancel', value: 'cancel' },
-  ];
-
-  // Handle main menu selection
-  const handleMainSelect = (item: SelectItem) => {
-    if (item.value === 'status') {
-      setView('status');
-    } else if (item.value === 'llms') {
-      setView('llms');
-    }
-  };
-
-  // Handle planning mode selection (kept for backward compatibility but not used)
-  // Planning mode is always 'auto'
-  const handlePlanningModeSelect = (_item: SelectItem) => {
-    // No-op: planning mode is always 'auto'
-    onClose();
-  };
-
-  // Handle LLMs menu selection
-  const handleLLMsSelect = (item: SelectItem) => {
-    if (item.value === 'add') {
-      setFormData({ name: '', baseUrl: '', apiKey: '', modelId: '', modelName: '', maxContextLength: '128000' });
-      setFormField('name');
-      setFormButtonIndex(0);
-      setFormError(null);
-      setView('llm-add');
-    } else {
-      const endpoint = endpoints.find((ep) => ep.id === item.value);
-      if (endpoint) {
-        setSelectedEndpoint(endpoint);
-        setView('llm-detail');
-      }
-    }
-  };
-
-  // Handle detail menu selection
-  const handleDetailSelect = async (item: SelectItem) => {
-    if (!selectedEndpoint) return;
-
-    switch (item.value) {
-      case 'edit':
-        setFormData({
-          name: selectedEndpoint.name,
-          baseUrl: selectedEndpoint.baseUrl,
-          apiKey: selectedEndpoint.apiKey || '',
-          modelId: selectedEndpoint.models[0]?.id || '',
-          modelName: selectedEndpoint.models[0]?.name || '',
-          maxContextLength: String(selectedEndpoint.models[0]?.maxTokens || 128000),
-        });
-        setFormField('name');
-        setFormButtonIndex(0);
-        setFormError(null);
-        setView('llm-edit');
-        break;
-      case 'delete':
-        setView('llm-delete-confirm');
-        break;
-      case 'set-current':
-        await configManager.setCurrentEndpoint(selectedEndpoint.id);
-        setView('llms');
-        loadEndpoints();
-        break;
-      case 'refresh':
-        await runHealthCheck();
-        break;
-    }
-  };
-
-  // Handle delete confirm
-  const handleDeleteConfirm = async (item: SelectItem) => {
-    if (item.value === 'confirm' && selectedEndpoint) {
-      await configManager.removeEndpoint(selectedEndpoint.id);
-      setSelectedEndpoint(null);
-      setView('llms');
-      loadEndpoints();
-    } else {
-      setView('llm-detail');
-    }
-  };
-
-  // Main settings menu view
-  if (view === 'main') {
-    return (
-      <Box flexDirection="column">
-        {/* Header */}
-        <Box borderStyle="single" borderColor="cyan" paddingX={1} marginBottom={1}>
-          <Text color="cyan" bold>
-            Settings
-          </Text>
-        </Box>
-
-        {/* Menu List */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          <SelectInput items={mainMenuItems} onSelect={handleMainSelect} />
-        </Box>
-
-        {/* Footer */}
-        <Box marginTop={1}>
-          <Text dimColor>↑↓: move | Enter: select | ESC: close</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // Status view
-  if (view === 'status') {
-    return (
-      <Box flexDirection="column">
-        {/* Header */}
-        <Box borderStyle="single" borderColor="cyan" paddingX={1} marginBottom={1}>
-          <Text color="cyan" bold>
-            Settings &gt; Status
-          </Text>
-        </Box>
-
-        {/* Status Information */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1} flexDirection="column">
-          {systemStatus ? (
-            <>
-              <Box>
-                <Text color="yellow">Version: </Text>
-                <Text>{systemStatus.version}</Text>
-              </Box>
-              <Box>
-                <Text color="yellow">Session ID: </Text>
-                <Text>{systemStatus.sessionId}</Text>
-              </Box>
-              <Box>
-                <Text color="yellow">Working Dir: </Text>
-                <Text>{systemStatus.workingDir}</Text>
-              </Box>
-              <Box>
-                <Text color="yellow">Endpoint URL: </Text>
-                <Text>{systemStatus.endpointUrl}</Text>
-              </Box>
-              <Box>
-                <Text color="yellow">LLM Model: </Text>
-                <Text>{systemStatus.llmModel}</Text>
-              </Box>
-            </>
-          ) : (
-            <Text color="gray">Loading status...</Text>
-          )}
-        </Box>
-
-        {/* Footer */}
-        <Box marginTop={1}>
-          <Text dimColor>ESC: back</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // Planning mode selection view
-  if (view === 'planning-mode') {
-    return (
-      <Box flexDirection="column">
-        {/* Header */}
-        <Box borderStyle="single" borderColor="cyan" paddingX={1} marginBottom={1}>
-          <Text color="cyan" bold>
-            Settings &gt; Planning Mode
-          </Text>
-        </Box>
-
-        {/* Description */}
-        <Box paddingX={1} marginBottom={1}>
-          <Text color="gray">Select the planning mode for task execution:</Text>
-        </Box>
-
-        {/* Mode descriptions */}
-        <Box paddingX={1} marginBottom={1} flexDirection="column">
-          <Text color="yellow">• planning: </Text>
-          <Text color="gray"> Always create TODO list before execution</Text>
-          <Text color="yellow">• no-planning: </Text>
-          <Text color="gray"> Execute directly without planning</Text>
-          <Text color="yellow">• auto: </Text>
-          <Text color="gray"> Automatically decide based on task complexity</Text>
-        </Box>
-
-        {/* Options List */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          <SelectInput items={planningModeItems} onSelect={handlePlanningModeSelect} />
-        </Box>
-
-        {/* Footer */}
-        <Box marginTop={1}>
-          <Text dimColor>↑↓: move | Enter: select | ESC: back</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // LLMs list view
-  if (view === 'llms') {
-    return (
-      <Box flexDirection="column">
-        {/* Header */}
-        <Box borderStyle="single" borderColor="cyan" paddingX={1} marginBottom={1}>
-          <Text color="cyan" bold>
-            Settings &gt; LLM Endpoints
-          </Text>
-          {isHealthChecking && (
-            <Text color="yellow"> (checking health...)</Text>
-          )}
-        </Box>
-
-        {/* Endpoints List */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          {endpoints.length === 0 && !llmsMenuItems.find((i) => i.value === 'add') ? (
-            <Text color="gray">No endpoints configured</Text>
-          ) : (
-            <SelectInput items={llmsMenuItems} onSelect={handleLLMsSelect} />
-          )}
-        </Box>
-
-        {/* Health Legend */}
-        <Box marginTop={1} paddingX={1}>
-          <Text color="green">✓ healthy </Text>
-          <Text color="yellow">⚠ degraded </Text>
-          <Text color="red">✗ unhealthy</Text>
-        </Box>
-
-        {/* Footer */}
-        <Box marginTop={1}>
-          <Text dimColor>↑↓: move | Enter: select | ESC: back</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // LLM Detail view
-  if (view === 'llm-detail' && selectedEndpoint) {
-    const health = getEndpointHealth(selectedEndpoint.id);
-    const healthColor = getHealthColor(health);
-    const healthIcon = getHealthIcon(health);
-    const modelStatus = healthStatus.find(
-      (s) => s.endpointId === selectedEndpoint.id
-    );
-
-    return (
-      <Box flexDirection="column">
-        {/* Header */}
-        <Box borderStyle="single" borderColor="cyan" paddingX={1} marginBottom={1}>
-          <Text color="cyan" bold>
-            {selectedEndpoint.name}
-          </Text>
-          <Text> </Text>
-          <Text color={healthColor}>{healthIcon} {health}</Text>
-        </Box>
-
-        {/* Endpoint Info */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1} flexDirection="column" marginBottom={1}>
-          <Box>
-            <Text color="yellow">URL: </Text>
-            <Text>{selectedEndpoint.baseUrl}</Text>
-          </Box>
-          <Box>
-            <Text color="yellow">Model: </Text>
-            <Text>{selectedEndpoint.models[0]?.id || 'N/A'}</Text>
-          </Box>
-          <Box>
-            <Text color="yellow">API Key: </Text>
-            <Text>{selectedEndpoint.apiKey ? '••••••••' : '(not set)'}</Text>
-          </Box>
-          {modelStatus?.latency && (
-            <Box>
-              <Text color="yellow">Latency: </Text>
-              <Text>{modelStatus.latency}ms</Text>
-            </Box>
-          )}
-        </Box>
-
-        {/* Actions */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          <SelectInput items={detailMenuItems} onSelect={handleDetailSelect} />
-        </Box>
-
-        {/* Footer */}
-        <Box marginTop={1}>
-          <Text dimColor>↑↓: move | Enter: select | ESC: back</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // Delete confirm view
-  if (view === 'llm-delete-confirm' && selectedEndpoint) {
-    return (
-      <Box flexDirection="column">
-        {/* Header */}
-        <Box borderStyle="single" borderColor="red" paddingX={1} marginBottom={1}>
-          <Text color="red" bold>
-            Delete Endpoint
-          </Text>
-        </Box>
-
-        {/* Confirmation */}
-        <Box paddingX={1} marginBottom={1}>
-          <Text>
-            Are you sure you want to delete <Text color="yellow">{selectedEndpoint.name}</Text>?
-          </Text>
-        </Box>
-
-        {/* Options */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1}>
-          <SelectInput items={deleteConfirmItems} onSelect={handleDeleteConfirm} />
-        </Box>
-
-        {/* Footer */}
-        <Box marginTop={1}>
-          <Text dimColor>↑↓: move | Enter: select | ESC: cancel</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // LLM Add/Edit form view
-  if (view === 'llm-add' || view === 'llm-edit') {
-    const isEdit = view === 'llm-edit';
-
-    return (
-      <Box flexDirection="column">
-        {/* Header */}
-        <Box borderStyle="single" borderColor="cyan" paddingX={1} marginBottom={1}>
-          <Text color="cyan" bold>
-            {isEdit ? 'Edit Endpoint' : 'Add New Endpoint'}
-          </Text>
-        </Box>
-
-        {/* Form */}
-        <Box borderStyle="single" borderColor="gray" paddingX={1} flexDirection="column">
-          {/* Name Field */}
-          <Box>
-            <Text color={formField === 'name' ? 'cyan' : 'yellow'}>
-              {formField === 'name' ? '> ' : '  '}Name:
-            </Text>
-            {formField === 'name' ? (
-              <TextInput
-                value={formData.name}
-                onChange={(value) => setFormData({ ...formData, name: value })}
-                placeholder="My LLM Endpoint"
-              />
-            ) : (
-              <Text>{formData.name || '(empty)'}</Text>
-            )}
-          </Box>
-
-          {/* Base URL Field */}
-          <Box>
-            <Text color={formField === 'baseUrl' ? 'cyan' : 'yellow'}>
-              {formField === 'baseUrl' ? '> ' : '  '}Base URL:
-            </Text>
-            {formField === 'baseUrl' ? (
-              <TextInput
-                value={formData.baseUrl}
-                onChange={(value) => setFormData({ ...formData, baseUrl: value })}
-                placeholder="http://localhost:11434/v1"
-              />
-            ) : (
-              <Text>{formData.baseUrl || '(empty)'}</Text>
-            )}
-          </Box>
-
-          {/* API Key Field */}
-          <Box>
-            <Text color={formField === 'apiKey' ? 'cyan' : 'yellow'}>
-              {formField === 'apiKey' ? '> ' : '  '}API Key:
-            </Text>
-            {formField === 'apiKey' ? (
-              <TextInput
-                value={formData.apiKey}
-                onChange={(value) => setFormData({ ...formData, apiKey: value })}
-                placeholder="(optional)"
-              />
-            ) : (
-              <Text>{formData.apiKey ? '••••••••' : '(optional)'}</Text>
-            )}
-          </Box>
-
-          {/* Model ID Field */}
-          <Box>
-            <Text color={formField === 'modelId' ? 'cyan' : 'yellow'}>
-              {formField === 'modelId' ? '> ' : '  '}Model ID:
-            </Text>
-            {formField === 'modelId' ? (
-              <TextInput
-                value={formData.modelId}
-                onChange={(value) => setFormData({ ...formData, modelId: value })}
-                placeholder="qwen2.5-coder:32b"
-              />
-            ) : (
-              <Text>{formData.modelId || '(empty)'}</Text>
-            )}
-          </Box>
-
-          {/* Model Name Field (Display Name) */}
-          <Box>
-            <Text color={formField === 'modelName' ? 'cyan' : 'yellow'}>
-              {formField === 'modelName' ? '> ' : '  '}Model Name:
-            </Text>
-            {formField === 'modelName' ? (
-              <TextInput
-                value={formData.modelName}
-                onChange={(value) => setFormData({ ...formData, modelName: value })}
-                placeholder="(optional, defaults to Model ID)"
-              />
-            ) : (
-              <Text>{formData.modelName || '(uses Model ID)'}</Text>
-            )}
-          </Box>
-
-          {/* Max Context Length Field */}
-          <Box>
-            <Text color={formField === 'maxContextLength' ? 'cyan' : 'yellow'}>
-              {formField === 'maxContextLength' ? '> ' : '  '}Max Context:
-            </Text>
-            {formField === 'maxContextLength' ? (
-              <TextInput
-                value={formData.maxContextLength}
-                onChange={(value) => setFormData({ ...formData, maxContextLength: value.replace(/[^0-9]/g, '') })}
-                placeholder="128000"
-              />
-            ) : (
-              <Text>{formData.maxContextLength || '128000'}</Text>
-            )}
-          </Box>
-        </Box>
-
-        {/* Error Message */}
-        {formError && (
-          <Box marginTop={1} paddingX={1}>
-            <Text color="red">Error: {formError}</Text>
-          </Box>
-        )}
-
-        {/* Buttons */}
-        <Box marginTop={1} flexDirection="column" paddingX={1}>
-          <Box>
-            <Text
-              color={formField === 'buttons' && formButtonIndex === 0 ? 'cyan' : undefined}
-              bold={formField === 'buttons' && formButtonIndex === 0}
-            >
-              {formField === 'buttons' && formButtonIndex === 0 ? '> ' : '  '}
-              {isTesting ? 'Testing...' : 'Test & Save'}
-            </Text>
-          </Box>
-          <Box>
-            <Text
-              color={formField === 'buttons' && formButtonIndex === 1 ? 'cyan' : undefined}
-              bold={formField === 'buttons' && formButtonIndex === 1}
-            >
-              {formField === 'buttons' && formButtonIndex === 1 ? '> ' : '  '}
-              Cancel
-            </Text>
-          </Box>
-        </Box>
-
-        {/* Footer */}
-        <Box marginTop={1}>
-          <Text dimColor>↑↓/Tab: move | Enter: next/submit | ESC: cancel</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  // Fallback
-  return null;
-};