@projectservan8n/cnapse 0.5.0 → 0.5.2

package/src/components/ProviderSelector.tsx

@@ -1,69 +1,122 @@
-import React, { useState } from 'react';
+/**
+ * Provider Selector - Used in TUI for /provider command
+ * - Shows provider list with API key status
+ * - Prompts for API key if needed
+ * - Shows model list with recommendations
+ * - For Ollama: shows model availability status
+ */
+
+import React, { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
-import { getConfig, setProvider, setModel } from '../lib/config.js';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import { getConfig, setProvider, setModel, setApiKey } from '../lib/config.js';
+import { checkOllamaStatus, hasModel, OllamaStatus } from '../lib/ollama.js';
 
 interface ProviderSelectorProps {
   onClose: () => void;
   onSelect: (provider: string, model: string) => void;
 }
 
-interface ProviderOption {
+interface ModelConfig {
+  id: string;
+  name: string;
+  recommended?: boolean;
+}
+
+interface ProviderConfig {
   id: 'ollama' | 'openrouter' | 'anthropic' | 'openai';
   name: string;
   description: string;
-  defaultModel: string;
-  models: string[];
+  needsApiKey: boolean;
+  models: ModelConfig[];
 }
 
-const PROVIDERS: ProviderOption[] = [
+const PROVIDERS: ProviderConfig[] = [
   {
     id: 'ollama',
     name: 'Ollama',
-    description: 'Local AI - Free, private, no API key',
-    defaultModel: 'qwen2.5:0.5b',
-    models: ['qwen2.5:0.5b', 'qwen2.5:1.5b', 'qwen2.5:7b', 'llama3.2:1b', 'llama3.2:3b', 'mistral:7b', 'codellama:7b', 'llava:7b'],
+    description: 'Local AI - Free, private',
+    needsApiKey: false,
+    models: [
+      { id: 'qwen2.5:0.5b', name: 'Qwen 2.5 0.5B (fast)', recommended: true },
+      { id: 'qwen2.5:1.5b', name: 'Qwen 2.5 1.5B' },
+      { id: 'qwen2.5:7b', name: 'Qwen 2.5 7B (quality)' },
+      { id: 'llama3.2:1b', name: 'Llama 3.2 1B' },
+      { id: 'llama3.2:3b', name: 'Llama 3.2 3B' },
+      { id: 'codellama:7b', name: 'Code Llama 7B' },
+      { id: 'llava:7b', name: 'LLaVA 7B (vision)' },
+    ],
   },
   {
     id: 'openrouter',
     name: 'OpenRouter',
-    description: 'Many models, pay-per-use',
-    defaultModel: 'qwen/qwen-2.5-coder-32b-instruct',
+    description: 'Many models, budget-friendly',
+    needsApiKey: true,
     models: [
-      'qwen/qwen-2.5-coder-32b-instruct',
-      'anthropic/claude-3.5-sonnet',
-      'openai/gpt-4o',
-      'openai/gpt-4o-mini',
-      'google/gemini-pro-1.5',
-      'meta-llama/llama-3.1-70b-instruct',
+      { id: 'qwen/qwen-2.5-coder-32b-instruct', name: 'Qwen Coder 32B ($0.07/1M)', recommended: true },
+      { id: 'qwen/qwen-2-vl-7b-instruct', name: 'Qwen 2 VL (FREE vision)' },
+      { id: 'meta-llama/llama-3.3-70b-instruct', name: 'Llama 3.3 70B ($0.10/1M)' },
+      { id: 'google/gemini-2.0-flash-001', name: 'Gemini 2.0 Flash (free tier)' },
+      { id: 'deepseek/deepseek-chat', name: 'DeepSeek V3 ($0.14/1M)' },
     ],
   },
   {
     id: 'anthropic',
     name: 'Anthropic',
-    description: 'Claude models - Best for coding',
-    defaultModel: 'claude-3-5-sonnet-20241022',
-    models: ['claude-3-5-sonnet-20241022', 'claude-3-opus-20240229', 'claude-3-haiku-20240307'],
+    description: 'Claude - Best reasoning',
+    needsApiKey: true,
+    models: [
+      { id: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet', recommended: true },
+      { id: 'claude-3-opus-20240229', name: 'Claude 3 Opus' },
+      { id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku' },
+    ],
   },
   {
     id: 'openai',
     name: 'OpenAI',
     description: 'GPT models',
-    defaultModel: 'gpt-4o',
-    models: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'gpt-3.5-turbo'],
+    needsApiKey: true,
+    models: [
+      { id: 'gpt-4o', name: 'GPT-4o', recommended: true },
+      { id: 'gpt-4o-mini', name: 'GPT-4o Mini' },
+      { id: 'gpt-4-turbo', name: 'GPT-4 Turbo' },
+    ],
   },
 ];
 
-type SelectionMode = 'provider' | 'model';
+type Step = 'provider' | 'apiKey' | 'model' | 'ollamaError' | 'done';
 
 export function ProviderSelector({ onClose, onSelect }: ProviderSelectorProps) {
   const config = getConfig();
-  const [mode, setMode] = useState<SelectionMode>('provider');
+  const [step, setStep] = useState<Step>('provider');
   const [providerIndex, setProviderIndex] = useState(() => {
     const idx = PROVIDERS.findIndex(p => p.id === config.provider);
     return idx >= 0 ? idx : 0;
   });
   const [modelIndex, setModelIndex] = useState(0);
-  const [selectedProvider, setSelectedProvider] = useState<ProviderOption | null>(null);
+  const [apiKeyInput, setApiKeyInput] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState<ProviderConfig | null>(null);
+
+  // Ollama status
+  const [ollamaStatus, setOllamaStatus] = useState<OllamaStatus | null>(null);
+  const [checkingOllama, setCheckingOllama] = useState(false);
+
+  // Check Ollama status when selecting Ollama provider
+  useEffect(() => {
+    if (step === 'model' && selectedProvider?.id === 'ollama' && !ollamaStatus) {
+      setCheckingOllama(true);
+      checkOllamaStatus().then(status => {
+        setOllamaStatus(status);
+        setCheckingOllama(false);
+
+        // If Ollama isn't running, show error
+        if (!status.running) {
+          setStep('ollamaError');
+        }
+      });
+    }
+  }, [step, selectedProvider, ollamaStatus]);
 
   useInput((input, key) => {
     if (key.escape) {
@@ -71,7 +124,7 @@ export function ProviderSelector({ onClose, onSelect }: ProviderSelectorProps) {
       return;
     }
 
-    if (mode === 'provider') {
+    if (step === 'provider') {
       if (key.upArrow) {
         setProviderIndex(prev => (prev > 0 ? prev - 1 : PROVIDERS.length - 1));
       } else if (key.downArrow) {
@@ -79,98 +132,247 @@ export function ProviderSelector({ onClose, onSelect }: ProviderSelectorProps) {
       } else if (key.return) {
         const provider = PROVIDERS[providerIndex]!;
         setSelectedProvider(provider);
-        // Find current model index if it exists in the provider's models
-        const currentModelIdx = provider.models.findIndex(m => m === config.model);
-        setModelIndex(currentModelIdx >= 0 ? currentModelIdx : 0);
-        setMode('model');
+
+        // Find recommended or current model
+        const currentIdx = provider.models.findIndex(m => m.id === config.model);
+        const recommendedIdx = provider.models.findIndex(m => m.recommended);
+        setModelIndex(currentIdx >= 0 ? currentIdx : (recommendedIdx >= 0 ? recommendedIdx : 0));
+
+        // Check if we need API key
+        if (provider.needsApiKey) {
+          const apiKeyProvider = provider.id as 'openrouter' | 'anthropic' | 'openai';
+          if (!config.apiKeys[apiKeyProvider]) {
+            setStep('apiKey');
+          } else {
+            setStep('model');
+          }
+        } else {
+          setStep('model');
+        }
       }
-    } else if (mode === 'model' && selectedProvider) {
+    } else if (step === 'model' && selectedProvider) {
       if (key.upArrow) {
         setModelIndex(prev => (prev > 0 ? prev - 1 : selectedProvider.models.length - 1));
       } else if (key.downArrow) {
         setModelIndex(prev => (prev < selectedProvider.models.length - 1 ? prev + 1 : 0));
       } else if (key.return) {
         const model = selectedProvider.models[modelIndex]!;
-        // Save to config
+
+        // For Ollama, warn if model not available
+        if (selectedProvider.id === 'ollama' && ollamaStatus && !hasModel(ollamaStatus, model.id)) {
+          // Still allow selection, but they'll need to pull it
+        }
+
         setProvider(selectedProvider.id);
-        setModel(model);
-        onSelect(selectedProvider.id, model);
-        onClose();
+        setModel(model.id);
+        setStep('done');
+        onSelect(selectedProvider.id, model.id);
+
+        // Brief delay to show confirmation
+        setTimeout(() => onClose(), 1500);
       } else if (key.leftArrow || input === 'b') {
-        setMode('provider');
+        setStep('provider');
+        setOllamaStatus(null); // Reset Ollama status
+      }
+    } else if (step === 'ollamaError') {
+      if (key.return || input === 'b') {
+        setStep('provider');
+        setOllamaStatus(null);
       }
     }
   });
 
-  if (mode === 'provider') {
+  const handleApiKeySubmit = (value: string) => {
+    if (value.trim() && selectedProvider) {
+      setApiKey(selectedProvider.id as 'openrouter' | 'anthropic' | 'openai', value.trim());
+      setStep('model');
+    }
+  };
+
+  // Provider selection
+  if (step === 'provider') {
     return (
-      <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+      <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1} width={60}>
         <Box marginBottom={1}>
           <Text bold color="cyan">Select Provider</Text>
         </Box>
         <Box marginBottom={1}>
-          <Text color="gray">Use arrows to navigate, Enter to select, Esc to cancel</Text>
+          <Text color="gray" dimColor>Arrows to navigate, Enter to select</Text>
         </Box>
 
         {PROVIDERS.map((provider, index) => {
           const isSelected = index === providerIndex;
           const isCurrent = provider.id === config.provider;
+          const hasKey = provider.needsApiKey && provider.id !== 'ollama'
+            ? !!config.apiKeys[provider.id as 'openrouter' | 'anthropic' | 'openai']
+            : true;
 
           return (
-            <Box key={provider.id} marginY={0}>
+            <Box key={provider.id} flexDirection="column">
               <Text color={isSelected ? 'cyan' : 'white'}>
                 {isSelected ? '❯ ' : '  '}
                 {provider.name}
                 {isCurrent && <Text color="green"> (current)</Text>}
+                {provider.needsApiKey && !hasKey && <Text color="red"> (needs key)</Text>}
+                {provider.needsApiKey && hasKey && !isCurrent && <Text color="yellow"> (key saved)</Text>}
               </Text>
               {isSelected && (
-                <Text color="gray"> - {provider.description}</Text>
+                <Text color="gray">    {provider.description}</Text>
               )}
             </Box>
           );
         })}
 
-        <Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
-          <Text color="gray">
-            Current: {config.provider} / {config.model}
-          </Text>
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>Press Esc to cancel</Text>
         </Box>
       </Box>
     );
   }
 
-  // Model selection mode
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
-      <Box marginBottom={1}>
-        <Text bold color="cyan">Select Model for {selectedProvider?.name}</Text>
+  // API Key input
+  if (step === 'apiKey' && selectedProvider) {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1} width={60}>
+        <Box marginBottom={1}>
+          <Text bold color="cyan">Enter API Key</Text>
+        </Box>
+        <Text><Text color="green">✓</Text> Provider: {selectedProvider.name}</Text>
+        <Box marginTop={1} flexDirection="column">
+          <Text color="gray" dimColor>
+            {selectedProvider.id === 'openrouter' && 'Get key: openrouter.ai/keys'}
+            {selectedProvider.id === 'anthropic' && 'Get key: console.anthropic.com'}
+            {selectedProvider.id === 'openai' && 'Get key: platform.openai.com/api-keys'}
+          </Text>
+          <Box marginTop={1}>
+            <Text color="cyan">❯ </Text>
+            <TextInput
+              value={apiKeyInput}
+              onChange={setApiKeyInput}
+              onSubmit={handleApiKeySubmit}
+              mask="*"
+            />
+          </Box>
+        </Box>
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>Press Esc to cancel</Text>
+        </Box>
       </Box>
-      <Box marginBottom={1}>
-        <Text color="gray">Arrows to navigate, Enter to select, B/Left to go back</Text>
+    );
+  }
+
+  // Ollama error
+  if (step === 'ollamaError' && ollamaStatus) {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="red" padding={1} width={60}>
+        <Box marginBottom={1}>
+          <Text bold color="red">Ollama Not Available</Text>
+        </Box>
+        <Text color="red">{ollamaStatus.error}</Text>
+        <Box marginTop={1} flexDirection="column">
+          {!ollamaStatus.installed && (
+            <>
+              <Text>1. Install Ollama from https://ollama.ai</Text>
+              <Text>2. Run: ollama pull qwen2.5:0.5b</Text>
+              <Text>3. Try again</Text>
+            </>
+          )}
+          {ollamaStatus.installed && !ollamaStatus.running && (
+            <>
+              <Text>1. Start Ollama: ollama serve</Text>
+              <Text>2. Or run any model: ollama run qwen2.5:0.5b</Text>
+              <Text>3. Try again</Text>
+            </>
+          )}
+        </Box>
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>Press Enter or B to go back</Text>
+        </Box>
       </Box>
+    );
+  }
+
+  // Model selection
+  if (step === 'model' && selectedProvider) {
+    const isOllama = selectedProvider.id === 'ollama';
+
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1} width={60}>
+        <Box marginBottom={1}>
+          <Text bold color="cyan">Select Model</Text>
+        </Box>
+        <Text><Text color="green">✓</Text> Provider: {selectedProvider.name}</Text>
+
+        {isOllama && checkingOllama && (
+          <Box marginY={1}>
+            <Text color="cyan"><Spinner type="dots" /></Text>
+            <Text> Checking Ollama status...</Text>
+          </Box>
+        )}
+
+        {isOllama && ollamaStatus && ollamaStatus.running && (
+          <Text color="green">✓ Ollama running ({ollamaStatus.models.length} models installed)</Text>
+        )}
+
+        <Box marginTop={1} marginBottom={1}>
+          <Text color="gray" dimColor>Arrows to navigate, Enter to select, B to go back</Text>
+        </Box>
+
+        {selectedProvider.models.map((model, index) => {
+          const isSelected = index === modelIndex;
+          const isCurrent = model.id === config.model && selectedProvider.id === config.provider;
 
-      {selectedProvider?.models.map((model, index) => {
-        const isSelected = index === modelIndex;
-        const isCurrent = model === config.model && selectedProvider.id === config.provider;
-        const isDefault = model === selectedProvider.defaultModel;
+          // Check if Ollama model is available
+          let modelStatus = '';
+          if (isOllama && ollamaStatus) {
+            const available = hasModel(ollamaStatus, model.id);
+            modelStatus = available ? ' (installed)' : ' (not installed)';
+          }
 
-        return (
-          <Box key={model} marginY={0}>
-            <Text color={isSelected ? 'cyan' : 'white'}>
+          return (
+            <Text key={model.id} color={isSelected ? 'cyan' : 'white'}>
               {isSelected ? '❯ ' : '  '}
-              {model}
+              {model.name}
+              {model.recommended && <Text color="yellow"> *</Text>}
               {isCurrent && <Text color="green"> (current)</Text>}
-              {isDefault && !isCurrent && <Text color="yellow"> (default)</Text>}
+              {isOllama && ollamaStatus && (
+                hasModel(ollamaStatus, model.id)
+                  ? <Text color="green">{modelStatus}</Text>
+                  : <Text color="red">{modelStatus}</Text>
+              )}
             </Text>
+          );
+        })}
+
+        {isOllama && (
+          <Box marginTop={1} flexDirection="column">
+            <Text color="gray" dimColor>* = Recommended</Text>
+            {ollamaStatus && !hasModel(ollamaStatus, selectedProvider.models[modelIndex]?.id || '') && (
+              <Text color="yellow">Run: ollama pull {selectedProvider.models[modelIndex]?.id}</Text>
+            )}
           </Box>
-        );
-      })}
+        )}
+
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>Press Esc to cancel</Text>
+        </Box>
+      </Box>
+    );
+  }
 
-      <Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
-        <Text color="gray">
-          Provider: {selectedProvider?.name}
-        </Text>
+  // Done
+  if (step === 'done' && selectedProvider) {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="green" padding={1} width={60}>
+        <Text color="green" bold>Configuration Updated!</Text>
+        <Text><Text color="green">✓</Text> Provider: {selectedProvider.name}</Text>
+        <Text><Text color="green">✓</Text> Model: {selectedProvider.models[modelIndex]?.name}</Text>
+        {selectedProvider.id === 'ollama' && ollamaStatus && !hasModel(ollamaStatus, selectedProvider.models[modelIndex]?.id || '') && (
+          <Text color="yellow">Remember to run: ollama pull {selectedProvider.models[modelIndex]?.id}</Text>
+        )}
       </Box>
-    </Box>
-  );
+    );
+  }
+
+  return null;
 }

package/src/components/Setup.tsx

@@ -15,17 +15,16 @@ const PROVIDERS = [
 const DEFAULT_MODELS: Record<string, string[]> = {
   ollama: ['qwen2.5:0.5b', 'qwen2.5:7b', 'llama3.2:3b', 'codellama:7b'],
   openrouter: [
-    'qwen/qwen-2.5-coder-32b-instruct',
-    'anthropic/claude-3.5-sonnet',
-    'openai/gpt-4o',
-    'google/gemini-pro-1.5',
+    'qwen/qwen-2.5-coder-32b-instruct',  // $0.07/1M - Best value!
+    'qwen/qwen-2-vl-7b-instruct',         // FREE - Vision model
+    'meta-llama/llama-3.3-70b-instruct',  // $0.10/1M
+    'google/gemini-2.0-flash-001',        // Free tier
   ],
   anthropic: [
     'claude-3-5-sonnet-20241022',
-    'claude-3-opus-20240229',
     'claude-3-haiku-20240307',
   ],
-  openai: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'gpt-3.5-turbo'],
+  openai: ['gpt-4o-mini', 'gpt-3.5-turbo'],
 };
 
 export function Setup() {