orquesta-cli 0.1.2

package/src/ui/components/LLMSetupWizard.tsx

@@ -0,0 +1,686 @@
+/**
+ * LLM Setup Wizard Component
+ *
+ * Displays first-time setup wizard when no LLM endpoints are configured
+ * Shows welcome screen first, then allows connecting with Orquesta token or manual setup
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import { configManager } from '../../core/config/config-manager.js';
+import { LLMClient } from '../../core/llm/llm-client.js';
+import { EndpointConfig } from '../../types/index.js';
+import { fetchOrquestaProjects, syncOrquestaConfigs } from '../../orquesta/config-sync.js';
+
+interface LLMSetupWizardProps {
+  onComplete: () => void;
+  onSkip: () => void;
+}
+
+interface FormData {
+  name: string;
+  baseUrl: string;
+  apiKey: string;
+  modelId: string;
+  modelName: string;
+  maxContextLength: string;
+}
+
+type WizardStep = 'welcome' | 'token-input' | 'project-select' | 'manual-setup';
+type FormField = 'name' | 'baseUrl' | 'apiKey' | 'modelId' | 'modelName' | 'maxContextLength' | 'buttons';
+
+interface OrquestaProject {
+  id: string;
+  name: string;
+  slug?: string;
+  description?: string;
+}
+
+export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSkip }) => {
+  // Wizard step state
+  const [step, setStep] = useState<WizardStep>('welcome');
+  const [welcomeOptionIndex, setWelcomeOptionIndex] = useState(0);
+
+  // Orquesta token state
+  const [orquestaToken, setOrquestaToken] = useState('');
+  const [isValidatingToken, setIsValidatingToken] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+
+  // Project selection state
+  const [projects, setProjects] = useState<OrquestaProject[]>([]);
+  const [organizationName, setOrganizationName] = useState('');
+  const [organizationId, setOrganizationId] = useState('');
+  const [projectIndex, setProjectIndex] = useState(0);
+  const [isSyncing, setIsSyncing] = useState(false);
+
+  // Manual setup form state
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    baseUrl: '',
+    apiKey: '',
+    modelId: '',
+    modelName: '',
+    maxContextLength: '128000',
+  });
+  const [formField, setFormField] = useState<FormField>('name');
+  const [formButtonIndex, setFormButtonIndex] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [isTesting, setIsTesting] = useState(false);
+
+  // Handle welcome screen option navigation
+  const handleWelcomeNavigation = useCallback((direction: 'up' | 'down') => {
+    setWelcomeOptionIndex((prev) => {
+      if (direction === 'up') {
+        return prev > 0 ? prev - 1 : 2;
+      } else {
+        return prev < 2 ? prev + 1 : 0;
+      }
+    });
+  }, []);
+
+  // Handle welcome screen option selection
+  const handleWelcomeSelect = useCallback(() => {
+    if (welcomeOptionIndex === 0) {
+      // "I have an Orquesta token"
+      setStep('token-input');
+    } else if (welcomeOptionIndex === 1) {
+      // "Set up manually"
+      setStep('manual-setup');
+    } else {
+      // "Skip for now"
+      onSkip();
+    }
+  }, [welcomeOptionIndex, onSkip]);
+
+  // Handle token validation
+  const handleTokenSubmit = useCallback(async () => {
+    if (!orquestaToken.trim()) {
+      setTokenError('Please enter a token');
+      return;
+    }
+
+    setIsValidatingToken(true);
+    setTokenError(null);
+
+    try {
+      // Fetch projects (this also validates the token)
+      const projectsData = await fetchOrquestaProjects(orquestaToken);
+
+      if (!projectsData) {
+        setTokenError('Invalid token or failed to fetch projects');
+        setIsValidatingToken(false);
+        return;
+      }
+
+      const { organization, projects: fetchedProjects } = projectsData;
+
+      if (fetchedProjects.length === 0) {
+        setTokenError('No projects found in organization');
+        setIsValidatingToken(false);
+        return;
+      }
+
+      // Save organization info
+      setOrganizationName(organization.name);
+      setOrganizationId(organization.id);
+      setProjects(fetchedProjects);
+
+      // If only one project, auto-select and sync
+      if (fetchedProjects.length === 1) {
+        await handleProjectSelect(fetchedProjects[0]!, organization.id, organization.name);
+      } else {
+        // Multiple projects - show selection
+        setIsValidatingToken(false);
+        setStep('project-select');
+      }
+    } catch (err) {
+      setTokenError(err instanceof Error ? err.message : 'Failed to validate token');
+      setIsValidatingToken(false);
+    }
+  }, [orquestaToken]);
+
+  // Handle project selection and sync
+  const handleProjectSelect = useCallback(async (project: OrquestaProject, orgId?: string, orgName?: string) => {
+    setIsSyncing(true);
+
+    try {
+      // Save Orquesta config
+      await configManager.setOrquestaConfig({
+        token: orquestaToken,
+        organizationId: orgId || organizationId,
+        organizationName: orgName || organizationName,
+        projectId: project.id,
+        projectName: project.name,
+        autoSync: true,
+        connectedAt: new Date().toISOString(),
+      });
+
+      // Sync configurations from Orquesta
+      const syncResult = await syncOrquestaConfigs();
+
+      if (syncResult.success && (syncResult.added > 0 || syncResult.updated > 0)) {
+        // Configs synced successfully - complete setup
+        setIsSyncing(false);
+        setIsValidatingToken(false);
+        onComplete();
+      } else if (syncResult.success) {
+        // No configs in dashboard - show manual setup
+        setIsSyncing(false);
+        setIsValidatingToken(false);
+        setStep('manual-setup');
+      } else {
+        // Sync failed but connection is saved - show manual setup
+        setIsSyncing(false);
+        setIsValidatingToken(false);
+        setStep('manual-setup');
+      }
+    } catch (err) {
+      setTokenError(err instanceof Error ? err.message : 'Failed to sync');
+      setIsSyncing(false);
+      setIsValidatingToken(false);
+    }
+  }, [orquestaToken, organizationId, organizationName, onComplete]);
+
+  // Handle form field navigation with Tab and Arrow keys
+  const handleFormNavigation = useCallback(
+    (key: { tab?: boolean; shift?: boolean; upArrow?: boolean; downArrow?: boolean }) => {
+      const fields: FormField[] = ['name', 'baseUrl', 'apiKey', 'modelId', 'modelName', 'maxContextLength', 'buttons'];
+      const currentIndex = fields.indexOf(formField);
+
+      if (key.tab) {
+        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]!);
+        }
+      }
+
+      // Arrow keys for navigation
+      if (key.upArrow) {
+        if (formField === 'buttons') {
+          // In buttons, up/down toggles between buttons
+          setFormButtonIndex((prev) => (prev === 0 ? 1 : 0));
+        } else {
+          // Move to previous field
+          const prevIndex = currentIndex > 0 ? currentIndex - 1 : fields.length - 1;
+          setFormField(fields[prevIndex]!);
+        }
+      }
+
+      if (key.downArrow) {
+        if (formField === 'buttons') {
+          // In buttons, up/down toggles between buttons
+          setFormButtonIndex((prev) => (prev === 0 ? 1 : 0));
+        } else {
+          // Move to next field
+          const nextIndex = currentIndex < fields.length - 1 ? currentIndex + 1 : 0;
+          setFormField(fields[nextIndex]!);
+        }
+      }
+    },
+    [formField]
+  );
+
+  // Handle form submit
+  const handleFormSubmit = useCallback(async () => {
+    if (formButtonIndex === 1) {
+      // Skip
+      onSkip();
+      return;
+    }
+
+    // Validate
+    if (!formData.name.trim()) {
+      setError('Name is required');
+      return;
+    }
+    if (!formData.baseUrl.trim()) {
+      setError('Base URL is required');
+      return;
+    }
+    if (!formData.modelId.trim()) {
+      setError('Model ID is required');
+      return;
+    }
+
+    // Test connection
+    setIsTesting(true);
+    setError(null);
+
+    try {
+      const result = await LLMClient.testConnection(
+        formData.baseUrl,
+        formData.apiKey,
+        formData.modelId
+      );
+
+      if (!result.success) {
+        setError(result.error || 'Connection failed');
+        setIsTesting(false);
+        // Form data is preserved - user can fix and retry
+        return;
+      }
+
+      // Save endpoint
+      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: formData.modelName || formData.modelId,
+            maxTokens: maxTokens,
+            enabled: true,
+            healthStatus: 'healthy',
+            lastHealthCheck: new Date(),
+          },
+        ],
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+
+      await configManager.createInitialEndpoint(newEndpoint);
+      setIsTesting(false);
+      onComplete();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      setIsTesting(false);
+      // Form data is preserved - user can fix and retry
+    }
+  }, [formData, formButtonIndex, onComplete, onSkip]);
+
+  // Keyboard handling
+  useInput((_inputChar, key) => {
+    // Welcome screen
+    if (step === 'welcome') {
+      if (key.upArrow) {
+        handleWelcomeNavigation('up');
+      } else if (key.downArrow) {
+        handleWelcomeNavigation('down');
+      } else if (key.return) {
+        handleWelcomeSelect();
+      }
+      return;
+    }
+
+    // Token input screen
+    if (step === 'token-input') {
+      if (key.return && !isValidatingToken) {
+        handleTokenSubmit();
+      } else if (key.escape) {
+        setStep('welcome');
+        setOrquestaToken('');
+        setTokenError(null);
+      }
+      return;
+    }
+
+    // Project selection screen
+    if (step === 'project-select') {
+      if (key.upArrow) {
+        setProjectIndex((prev) => (prev > 0 ? prev - 1 : projects.length - 1));
+      } else if (key.downArrow) {
+        setProjectIndex((prev) => (prev < projects.length - 1 ? prev + 1 : 0));
+      } else if (key.return && !isSyncing) {
+        handleProjectSelect(projects[projectIndex]!);
+      } else if (key.escape) {
+        setStep('token-input');
+      }
+      return;
+    }
+
+    // Manual setup form
+    if (step === 'manual-setup') {
+      if (key.tab) {
+        handleFormNavigation({ tab: true, shift: key.shift });
+      } else if (key.upArrow || key.downArrow) {
+        handleFormNavigation({ upArrow: key.upArrow, downArrow: key.downArrow });
+      } else if (key.return && formField === 'buttons') {
+        handleFormSubmit();
+      } else if (key.escape) {
+        setStep('welcome');
+      }
+    }
+  });
+
+  // Render Welcome Screen
+  if (step === 'welcome') {
+    return (
+      <Box flexDirection="column">
+        <Text>{' '}</Text>
+        <Text>{' '}</Text>
+
+        {/* Header */}
+        <Box borderStyle="double" borderColor="cyan" paddingX={2} marginBottom={1}>
+          <Text color="cyan" bold>
+            Welcome to Orquesta CLI!
+          </Text>
+        </Box>
+
+        {/* Description */}
+        <Box paddingX={1} marginBottom={1} flexDirection="column">
+          <Text color="white">AI-powered coding assistant with local LLM support.</Text>
+          <Text color="gray">Configure your LLM endpoint to get started.</Text>
+        </Box>
+
+        {/* Features */}
+        <Box paddingX={1} marginBottom={1} flexDirection="column">
+          <Text color="cyan">Features:</Text>
+          <Text color="gray">  • Multi-LLM support (OpenAI, Anthropic, Ollama, etc.)</Text>
+          <Text color="gray">  • Sync with Orquesta dashboard (optional)</Text>
+          <Text color="gray">  • Works offline with local models</Text>
+        </Box>
+
+        {/* Options */}
+        <Box paddingX={1} marginTop={1} flexDirection="column">
+          <Text color="yellow" bold>How would you like to set up?</Text>
+          <Text>{' '}</Text>
+          <Text
+            color={welcomeOptionIndex === 0 ? 'cyan' : undefined}
+            bold={welcomeOptionIndex === 0}
+          >
+            {welcomeOptionIndex === 0 ? '> ' : '  '}
+            🔗 I have an Orquesta token (preload configs)
+          </Text>
+          <Text
+            color={welcomeOptionIndex === 1 ? 'cyan' : undefined}
+            bold={welcomeOptionIndex === 1}
+          >
+            {welcomeOptionIndex === 1 ? '> ' : '  '}
+            ⚙️  Set up manually
+          </Text>
+          <Text
+            color={welcomeOptionIndex === 2 ? 'cyan' : undefined}
+            bold={welcomeOptionIndex === 2}
+          >
+            {welcomeOptionIndex === 2 ? '> ' : '  '}
+            ⏭️  Skip for now (configure later via /settings)
+          </Text>
+        </Box>
+
+        {/* Footer */}
+        <Box marginTop={2}>
+          <Text dimColor>↑↓: navigate | Enter: select</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Render Token Input Screen
+  if (step === 'token-input') {
+    return (
+      <Box flexDirection="column">
+        <Text>{' '}</Text>
+        <Text>{' '}</Text>
+
+        {/* Header */}
+        <Box borderStyle="double" borderColor="cyan" paddingX={2} marginBottom={1}>
+          <Text color="cyan" bold>
+            Connect to Orquesta
+          </Text>
+        </Box>
+
+        {/* Instructions */}
+        <Box paddingX={1} marginBottom={1} flexDirection="column">
+          <Text color="gray">Enter your Orquesta CLI token to sync LLM configurations.</Text>
+          <Text color="gray">Get your token from: </Text>
+          <Text color="cyan">https://orquesta.live/dashboard/orquesta-cli</Text>
+        </Box>
+
+        {/* Token Input */}
+        <Box paddingX={1} marginY={1}>
+          <Text color="yellow">Token: </Text>
+          <TextInput
+            value={orquestaToken}
+            onChange={setOrquestaToken}
+            placeholder="oclt_xxxxxxxxxxxx"
+          />
+        </Box>
+
+        {/* Error Message */}
+        {tokenError && (
+          <Box paddingX={1}>
+            <Text color="red">Error: {tokenError}</Text>
+          </Box>
+        )}
+
+        {/* Status */}
+        {isValidatingToken && (
+          <Box paddingX={1} marginTop={1}>
+            <Text color="cyan">
+              <Spinner type="dots" /> Validating token...
+            </Text>
+          </Box>
+        )}
+
+        {/* Footer */}
+        <Box marginTop={2}>
+          <Text dimColor>Enter: validate | Esc: back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Render Project Selection Screen
+  if (step === 'project-select') {
+    return (
+      <Box flexDirection="column">
+        <Text>{' '}</Text>
+        <Text>{' '}</Text>
+
+        {/* Header */}
+        <Box borderStyle="double" borderColor="cyan" paddingX={2} marginBottom={1}>
+          <Text color="cyan" bold>
+            Select Project
+          </Text>
+        </Box>
+
+        {/* Organization Info */}
+        <Box paddingX={1} marginBottom={1}>
+          <Text color="green">✓ Connected to: {organizationName}</Text>
+        </Box>
+
+        {/* Project List */}
+        <Box paddingX={1} flexDirection="column">
+          <Text color="yellow">Select a project:</Text>
+          <Text>{' '}</Text>
+          {projects.map((project, index) => (
+            <Box key={project.id} flexDirection="column">
+              <Text
+                color={projectIndex === index ? 'cyan' : undefined}
+                bold={projectIndex === index}
+              >
+                {projectIndex === index ? '> ' : '  '}
+                {project.name}
+              </Text>
+              {project.description && (
+                <Text color="gray">    {project.description}</Text>
+              )}
+            </Box>
+          ))}
+        </Box>
+
+        {/* Status */}
+        {isSyncing && (
+          <Box paddingX={1} marginTop={1}>
+            <Text color="cyan">
+              <Spinner type="dots" /> Syncing configurations...
+            </Text>
+          </Box>
+        )}
+
+        {/* Footer */}
+        <Box marginTop={2}>
+          <Text dimColor>↑↓: navigate | Enter: select | Esc: back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Render Manual Setup Form
+  return (
+    <Box flexDirection="column">
+      {/* Top spacing */}
+      <Text>{' '}</Text>
+      <Text>{' '}</Text>
+
+      {/* Header */}
+      <Box borderStyle="double" borderColor="cyan" paddingX={2} marginBottom={1}>
+        <Text color="cyan" bold>
+          Manual LLM Setup
+        </Text>
+      </Box>
+
+      {/* Description */}
+      <Box paddingX={1} marginBottom={1} flexDirection="column">
+        <Text color="gray">Configure your LLM endpoint manually.</Text>
+        {configManager.hasOrquestaConnection() && (
+          <Text color="green">✓ Connected to Orquesta (no configs found)</Text>
+        )}
+      </Box>
+
+      {/* Form */}
+      <Box borderStyle="single" borderColor="gray" paddingX={1} flexDirection="column">
+        {/* Name Field */}
+        <Box>
+          <Text color={formField === 'name' ? 'cyan' : 'yellow'}>
+            {formField === 'name' ? '> ' : '  '}Endpoint Name:
+          </Text>
+          {formField === 'name' ? (
+            <TextInput
+              value={formData.name}
+              onChange={(value) => setFormData({ ...formData, name: value })}
+              placeholder="My Local LLM"
+            />
+          ) : (
+            <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 */}
+        <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="Qwen 2.5 Coder 32B (optional)"
+            />
+          ) : (
+            <Text> {formData.modelName || '(optional)'}</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 */}
+      {error && (
+        <Box marginTop={1} paddingX={1}>
+          <Text color="red">Error: {error}</Text>
+          <Text color="gray"> (form data preserved - fix and retry)</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 ? '> ' : '  '}
+            Skip (configure later via /settings)
+          </Text>
+        </Box>
+      </Box>
+
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>↑↓/Tab: navigate fields | Enter: select button | Esc: back to welcome</Text>
+      </Box>
+    </Box>
+  );
+};