@projectservan8n/cnapse 0.5.0 → 0.5.1

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',
+    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', recommended: true },
+      { id: 'anthropic/claude-3.5-sonnet', name: 'Claude 3.5 Sonnet' },
+      { id: 'openai/gpt-4o', name: 'GPT-4o' },
+      { id: 'openai/gpt-4o-mini', name: 'GPT-4o Mini' },
+      { id: 'google/gemini-pro-1.5', name: 'Gemini Pro 1.5' },
     ],
   },
   {
     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/index.tsx

@@ -6,85 +6,94 @@ import { setApiKey, setProvider, setModel, getConfig } from './lib/config.js';
 
 const args = process.argv.slice(2);
 
-// Handle CLI commands
-if (args.length > 0) {
-  const command = args[0];
-
-  switch (command) {
-    case 'auth': {
-      const provider = args[1] as 'openrouter' | 'anthropic' | 'openai';
-      const key = args[2];
-
-      if (!provider || !key) {
-        console.log('Usage: cnapse auth <provider> <api-key>');
-        console.log('Providers: openrouter, anthropic, openai');
-        process.exit(1);
-      }
+async function main() {
+  // Handle CLI commands
+  if (args.length > 0) {
+    const command = args[0];
+
+    switch (command) {
+      case 'auth': {
+        const provider = args[1] as 'openrouter' | 'anthropic' | 'openai';
+        const key = args[2];
 
-      if (!['openrouter', 'anthropic', 'openai'].includes(provider)) {
-        console.log(`Invalid provider: ${provider}`);
-        console.log('Valid providers: openrouter, anthropic, openai');
-        process.exit(1);
-      }
+        if (!provider || !key) {
+          console.log('Usage: cnapse auth <provider> <api-key>');
+          console.log('Providers: openrouter, anthropic, openai');
+          process.exit(1);
+        }
 
-      setApiKey(provider, key);
-      console.log(`✓ ${provider} API key saved`);
-      process.exit(0);
-    }
+        if (!['openrouter', 'anthropic', 'openai'].includes(provider)) {
+          console.log(`Invalid provider: ${provider}`);
+          console.log('Valid providers: openrouter, anthropic, openai');
+          process.exit(1);
+        }
 
-    case 'config': {
-      const subcommand = args[1];
+        setApiKey(provider, key);
+        console.log(`✓ ${provider} API key saved`);
+        process.exit(0);
+      }
 
-      if (subcommand === 'set') {
-        const key = args[2];
-        const value = args[3];
+      case 'config': {
+        const subcommand = args[1];
+
+        // Interactive config TUI if no subcommand
+        if (!subcommand) {
+          const { ConfigUI } = await import('./components/ConfigUI.js');
+          render(<ConfigUI />);
+          return; // Don't render App
+        }
 
-        if (key === 'provider') {
-          if (!['openrouter', 'ollama', 'anthropic', 'openai'].includes(value!)) {
-            console.log('Valid providers: openrouter, ollama, anthropic, openai');
-            process.exit(1);
+        if (subcommand === 'set') {
+          const key = args[2];
+          const value = args[3];
+
+          if (key === 'provider') {
+            if (!['openrouter', 'ollama', 'anthropic', 'openai'].includes(value!)) {
+              console.log('Valid providers: openrouter, ollama, anthropic, openai');
+              process.exit(1);
+            }
+            setProvider(value as any);
+            console.log(`✓ Provider set to: ${value}`);
+          } else if (key === 'model') {
+            setModel(value!);
+            console.log(`✓ Model set to: ${value}`);
+          } else {
+            console.log('Usage: cnapse config set <provider|model> <value>');
           }
-          setProvider(value as any);
-          console.log(`✓ Provider set to: ${value}`);
-        } else if (key === 'model') {
-          setModel(value!);
-          console.log(`✓ Model set to: ${value}`);
-        } else {
-          console.log('Usage: cnapse config set <provider|model> <value>');
+          process.exit(0);
         }
-        process.exit(0);
-      }
 
-      if (subcommand === 'show' || !subcommand) {
-        const config = getConfig();
-        console.log('\nC-napse Configuration:');
-        console.log(`  Provider: ${config.provider}`);
-        console.log(`  Model: ${config.model}`);
-        console.log(`  Ollama Host: ${config.ollamaHost}`);
-        console.log(`  API Keys configured:`);
-        console.log(`    - OpenRouter: ${config.apiKeys.openrouter ? '✓' : '✗'}`);
-        console.log(`    - Anthropic: ${config.apiKeys.anthropic ? '✓' : '✗'}`);
-        console.log(`    - OpenAI: ${config.apiKeys.openai ? '✓' : '✗'}`);
-        console.log('');
-        process.exit(0);
-      }
+        if (subcommand === 'show') {
+          const config = getConfig();
+          console.log('\nC-napse Configuration:');
+          console.log(`  Provider: ${config.provider}`);
+          console.log(`  Model: ${config.model}`);
+          console.log(`  Ollama Host: ${config.ollamaHost}`);
+          console.log(`  API Keys configured:`);
+          console.log(`    - OpenRouter: ${config.apiKeys.openrouter ? '✓' : '✗'}`);
+          console.log(`    - Anthropic: ${config.apiKeys.anthropic ? '✓' : '✗'}`);
+          console.log(`    - OpenAI: ${config.apiKeys.openai ? '✓' : '✗'}`);
+          console.log('');
+          process.exit(0);
+        }
 
-      console.log('Usage: cnapse config [show|set <key> <value>]');
-      process.exit(1);
-    }
+        console.log('Usage: cnapse config [show|set <key> <value>]');
+        process.exit(1);
+      }
 
-    case 'help':
-    case '--help':
-    case '-h': {
-      console.log(`
+      case 'help':
+      case '--help':
+      case '-h': {
+        console.log(`
 C-napse - Autonomous PC Intelligence
 
 Usage:
   cnapse                     Start interactive chat
   cnapse init                Interactive setup wizard
-  cnapse auth <provider> <key>  Set API key
-  cnapse config              Show configuration
+  cnapse config              Interactive configuration
+  cnapse config show         Show current configuration
   cnapse config set <k> <v>  Set config value
+  cnapse auth <provider> <key>  Set API key
   cnapse help                Show this help
 
 Providers:
@@ -95,36 +104,39 @@ Providers:
 
 Quick Start:
   cnapse init                # Interactive setup
+  cnapse config              # Change provider/model
 
 Manual Setup:
   cnapse auth openrouter sk-or-xxxxx
   cnapse config set provider openrouter
   cnapse config set model qwen/qwen-2.5-coder-32b-instruct
 `);
-      process.exit(0);
-    }
+        process.exit(0);
+      }
 
-    case 'version':
-    case '--version':
-    case '-v': {
-      console.log('cnapse v0.2.0');
-      process.exit(0);
-    }
+      case 'version':
+      case '--version':
+      case '-v': {
+        console.log('cnapse v0.5.0');
+        process.exit(0);
+      }
 
-    case 'init': {
-      // Interactive setup with Ink UI
-      const { Setup } = await import('./components/Setup.js');
-      render(<Setup />);
-      process.exit(0);
-    }
+      case 'init': {
+        // Interactive setup with Ink UI
+        const { Setup } = await import('./components/Setup.js');
+        render(<Setup />);
+        return; // Don't render App
+      }
 
-    default: {
-      // Treat as a direct question
-      // For now, just start the app
-      break;
+      default: {
+        // Unknown command - start app anyway
+        break;
+      }
     }
   }
+
+  // Start interactive TUI
+  render(<App />);
 }
 
-// Start interactive TUI
-render(<App />);
+main();