orquesta-cli 0.1.13 → 0.1.15

package/src/ui/components/LLMSetupWizard.tsx

@@ -1,333 +0,0 @@
-/**
- * LLM Setup Wizard Component
- *
- * Displays first-time setup wizard when no LLM endpoints are configured
- */
-
-import React, { useState, useCallback } from 'react';
-import { Box, Text, useInput } from 'ink';
-import TextInput from 'ink-text-input';
-import { configManager } from '../../core/config/config-manager.js';
-import { LLMClient } from '../../core/llm/llm-client.js';
-import { EndpointConfig } from '../../types/index.js';
-
-interface LLMSetupWizardProps {
-  onComplete: () => void;
-  onSkip: () => void;
-}
-
-interface FormData {
-  name: string;
-  baseUrl: string;
-  apiKey: string;
-  modelId: string;
-  modelName: string;
-  maxContextLength: string;
-}
-
-type FormField = 'name' | 'baseUrl' | 'apiKey' | 'modelId' | 'modelName' | 'maxContextLength' | 'buttons';
-
-export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSkip }) => {
-  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 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);
-        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);
-    }
-  }, [formData, formButtonIndex, onComplete, onSkip]);
-
-  // Keyboard handling
-  useInput((_inputChar, key) => {
-    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();
-    }
-  });
-
-  return (
-    <Box flexDirection="column">
-      {/* Top spacing */}
-      <Text>{' '}</Text>
-
-      {/* Orquesta Logo & Header */}
-      <Box flexDirection="column" alignItems="center" marginBottom={1}>
-        <Text color="magenta" bold>  ╔═══╗</Text>
-        <Text color="magenta" bold>  ║ ♪ ║   </Text>
-        <Text color="blue" bold>  ╚═╦═╝</Text>
-        <Text color="blue" bold>    ║</Text>
-        <Text color="cyan" bold>   ╱│╲</Text>
-      </Box>
-
-      <Box justifyContent="center" marginBottom={1}>
-        <Text color="magenta" bold>🎼 ORQUESTA CLI SETUP</Text>
-      </Box>
-
-      {/* Description */}
-      <Box paddingX={2} marginBottom={1} flexDirection="column" alignItems="center">
-        <Text color="yellow" bold>Configure Your Orchestra</Text>
-        <Text color="gray" dimColor>Connect to your local LLM to start conducting AI-powered development</Text>
-      </Box>
-
-      {/* Form */}
-      <Box borderStyle="round" borderColor="magenta" paddingX={2} paddingY={1} flexDirection="column">
-        <Box marginBottom={1}>
-          <Text color="magenta" bold>🎹 Endpoint Configuration</Text>
-        </Box>
-
-        {/* Name Field */}
-        <Box>
-          <Text color={formField === 'name' ? 'magenta' : 'blue'} bold={formField === 'name'}>
-            {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' ? 'magenta' : 'blue'} bold={formField === 'baseUrl'}>
-            {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' ? 'magenta' : 'blue'} bold={formField === 'apiKey'}>
-            {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' ? 'magenta' : 'blue'} bold={formField === 'modelId'}>
-            {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' ? 'magenta' : 'blue'} bold={formField === 'modelName'}>
-            {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' ? 'magenta' : 'blue'} bold={formField === 'maxContextLength'}>
-            {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={2} borderStyle="round" borderColor="red">
-          <Text color="red" bold>⚠ {error}</Text>
-        </Box>
-      )}
-
-      {/* Buttons */}
-      <Box marginTop={2} flexDirection="column" paddingX={2}>
-        <Box marginBottom={1}>
-          <Text color="magenta" bold>🎵 Actions</Text>
-        </Box>
-        <Box>
-          <Text
-            color={formField === 'buttons' && formButtonIndex === 0 ? 'magenta' : 'blue'}
-            bold={formField === 'buttons' && formButtonIndex === 0}
-          >
-            {formField === 'buttons' && formButtonIndex === 0 ? '♪ ' : '  '}
-            {isTesting ? '🎼 Testing connection...' : '✓ Test & Save Configuration'}
-          </Text>
-        </Box>
-        <Box>
-          <Text
-            color={formField === 'buttons' && formButtonIndex === 1 ? 'magenta' : 'blue'}
-            bold={formField === 'buttons' && formButtonIndex === 1}
-          >
-            {formField === 'buttons' && formButtonIndex === 1 ? '♪ ' : '  '}
-            ⏭  Skip for now (configure via /settings)
-          </Text>
-        </Box>
-      </Box>
-
-      {/* Footer */}
-      <Box marginTop={1} paddingX={2}>
-        <Text color="cyan" dimColor>↑↓ Navigate | Tab Next | Shift+Tab Prev | Enter Select</Text>
-      </Box>
-    </Box>
-  );
-};

package/src/ui/components/Logo.tsx

@@ -1,125 +0,0 @@
-/**
- * Logo Component - DEXTER-style with Bass Clef
- *
- * Clean design inspired by DEXTER AI
- */
-
-import React from 'react';
-import { Box, Text } from 'ink';
-
-// Bass Clef - Clean minimal design with spaces
-const BASS_CLEF = [
-  '                                ',
-  '                                ',
-  '                                ',
-  '         *@#+*@@@*              ',
-  '       .@      :@@@+  @@+       ',
-  '       %@@@@-   +@@@- @@*       ',
-  '       *@@@@#   :@@@+           ',
-  '         .:     +@@@=:@@%       ',
-  '               :@@@@  *@.       ',
-  '               @@@@             ',
-  '             =@@@-              ',
-  '           .@@@-                ',
-  '         -@@=                   ',
-  '                                ',
-  '                                ',
-  '                                ',
-];
-
-// Big "ORQUESTA" text
-const ORQUESTA_TEXT = `
- ██████  ██████   ██████  ██    ██ ███████ ███████ ████████  █████
-██    ██ ██   ██ ██    ██ ██    ██ ██      ██         ██    ██   ██
-██    ██ ██████  ██    ██ ██    ██ █████   ███████    ██    ███████
-██    ██ ██   ██ ██    ██ ██    ██ ██           ██    ██    ██   ██
- ██████  ██   ██  ██████   ██████  ███████ ███████    ██    ██   ██
-`.trim();
-
-interface LogoProps {
-  variant?: 'default' | 'compact' | 'animated';
-  showVersion?: boolean;
-  showTagline?: boolean;
-  animate?: boolean;
-  modelName?: string;
-  workingDirectory?: string;
-}
-
-export const Logo: React.FC<LogoProps> = ({
-  showTagline = true,
-  modelName,
-  workingDirectory,
-}) => {
-  return (
-    <Box flexDirection="column">
-      {/* Bass Clef Symbol + ORQUESTA text logo */}
-      <Box flexDirection="row" alignItems="center">
-        {/* Bass Clef on the left */}
-        <Box flexDirection="column" marginRight={1}>
-          {BASS_CLEF.map((line, idx) => (
-            <Text key={idx} color="cyan" bold>{line}</Text>
-          ))}
-        </Box>
-
-        {/* ORQUESTA text on the right */}
-        <Box flexDirection="column" justifyContent="center">
-          {ORQUESTA_TEXT.split('\n').map((line, idx) => (
-            <Text key={idx} color="cyan" bold>{line}</Text>
-          ))}
-        </Box>
-      </Box>
-
-      {/* Tagline */}
-      {showTagline && (
-        <Box marginTop={1}>
-          <Text color="green">Your AI assistant for orchestrating development with local LLMs.</Text>
-        </Box>
-      )}
-
-      {/* Instructions */}
-      <Box marginTop={1}>
-        <Text color="gray">Press Ctrl+C to quit. Type /model to change model. Type /help for commands.</Text>
-      </Box>
-
-      {/* Model & Directory info (compact) */}
-      {(modelName || workingDirectory) && (
-        <Box marginTop={1}>
-          {modelName && (
-            <Text color="gray">
-              Model: <Text color="cyan">{modelName}</Text>
-            </Text>
-          )}
-          {modelName && workingDirectory && <Text color="gray"> | </Text>}
-          {workingDirectory && (
-            <Text color="gray">
-              Dir: <Text color="cyan">{workingDirectory}</Text>
-            </Text>
-          )}
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-/**
- * Simplified Init Step Indicator
- */
-interface InitStepIndicatorProps {
-  currentStep: number;
-  totalSteps: number;
-  stepText: string;
-  stepIcon: string;
-}
-
-export const InitStepIndicator: React.FC<InitStepIndicatorProps> = ({
-  stepText,
-  stepIcon,
-}) => {
-  return (
-    <Box marginTop={1}>
-      <Text color="gray">{stepIcon} {stepText}...</Text>
-    </Box>
-  );
-};
-
-export default Logo;