orquesta-cli 0.1.12

package/src/ui/components/LLMSetupWizard.tsx

@@ -0,0 +1,333 @@
+/**
+ * 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

@@ -0,0 +1,125 @@
+/**
+ * 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;