orquesta-cli 0.1.13 → 0.1.14

package/dist/ui/components/LLMSetupWizard.js

@@ -1,9 +1,75 @@
 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 { fetchOrquestaProjects, syncOrquestaConfigs } from '../../orquesta/config-sync.js';
+import { Logo } from './Logo.js';
+import { OpenRouterModelBrowser } from './OpenRouterModelBrowser.js';
+const PROVIDER_PRESETS = [
+    {
+        id: 'openrouter',
+        name: 'OpenRouter',
+        icon: '🌐',
+        baseUrl: 'https://openrouter.ai/api/v1',
+        requiresApiKey: true,
+        description: 'Access 200+ models (GPT-4, Claude, Llama, etc.)',
+    },
+    {
+        id: 'ollama',
+        name: 'Ollama (Local)',
+        icon: '🦙',
+        baseUrl: 'http://localhost:11434/v1',
+        requiresApiKey: false,
+        description: 'Run models locally with Ollama',
+    },
+    {
+        id: 'openai',
+        name: 'OpenAI',
+        icon: '🤖',
+        baseUrl: 'https://api.openai.com/v1',
+        requiresApiKey: true,
+        description: 'GPT-4, GPT-4 Turbo, GPT-3.5',
+    },
+    {
+        id: 'anthropic',
+        name: 'Anthropic',
+        icon: '🧠',
+        baseUrl: 'https://api.anthropic.com/v1',
+        requiresApiKey: true,
+        description: 'Claude 3.5 Sonnet, Claude 3 Opus',
+    },
+    {
+        id: 'deepseek',
+        name: 'DeepSeek',
+        icon: '🔍',
+        baseUrl: 'https://api.deepseek.com/v1',
+        requiresApiKey: true,
+        description: 'DeepSeek Coder, DeepSeek Chat',
+    },
+    {
+        id: 'custom',
+        name: 'Custom Endpoint',
+        icon: '⚙️',
+        baseUrl: '',
+        requiresApiKey: false,
+        description: 'Configure any OpenAI-compatible API',
+    },
+];
 export const LLMSetupWizard = ({ onComplete, onSkip }) => {
+    const [step, setStep] = useState('welcome');
+    const [welcomeOptionIndex, setWelcomeOptionIndex] = useState(0);
+    const [orquestaToken, setOrquestaToken] = useState('');
+    const [isValidatingToken, setIsValidatingToken] = useState(false);
+    const [tokenError, setTokenError] = useState(null);
+    const [projects, setProjects] = useState([]);
+    const [organizationName, setOrganizationName] = useState('');
+    const [organizationId, setOrganizationId] = useState('');
+    const [projectIndex, setProjectIndex] = useState(0);
+    const [isSyncing, setIsSyncing] = useState(false);
+    const [providerIndex, setProviderIndex] = useState(0);
+    const [selectedProvider, setSelectedProvider] = useState(null);
     const [formData, setFormData] = useState({
         name: '',
         baseUrl: '',
@@ -16,6 +82,139 @@ export const LLMSetupWizard = ({ onComplete, onSkip }) => {
     const [formButtonIndex, setFormButtonIndex] = useState(0);
     const [error, setError] = useState(null);
     const [isTesting, setIsTesting] = useState(false);
+    const handleWelcomeNavigation = useCallback((direction) => {
+        setWelcomeOptionIndex((prev) => {
+            if (direction === 'up') {
+                return prev > 0 ? prev - 1 : 2;
+            }
+            else {
+                return prev < 2 ? prev + 1 : 0;
+            }
+        });
+    }, []);
+    const handleWelcomeSelect = useCallback(() => {
+        if (welcomeOptionIndex === 0) {
+            setStep('token-input');
+        }
+        else if (welcomeOptionIndex === 1) {
+            setStep('provider-select');
+        }
+        else {
+            onSkip();
+        }
+    }, [welcomeOptionIndex, onSkip]);
+    const handleProviderSelect = useCallback((provider) => {
+        setSelectedProvider(provider);
+        if (provider.id === 'openrouter') {
+            setStep('openrouter-browse');
+        }
+        else if (provider.id === 'custom') {
+            setFormData({
+                name: '',
+                baseUrl: '',
+                apiKey: '',
+                modelId: '',
+                modelName: '',
+                maxContextLength: '128000',
+            });
+            setStep('manual-setup');
+        }
+        else {
+            setFormData({
+                name: provider.name,
+                baseUrl: provider.baseUrl,
+                apiKey: '',
+                modelId: '',
+                modelName: '',
+                maxContextLength: '128000',
+            });
+            setFormField(provider.requiresApiKey ? 'apiKey' : 'modelId');
+            setStep('manual-setup');
+        }
+    }, []);
+    const handleOpenRouterModelSelect = useCallback((model) => {
+        setFormData({
+            name: 'OpenRouter',
+            baseUrl: 'https://openrouter.ai/api/v1',
+            apiKey: '',
+            modelId: model.id,
+            modelName: model.name,
+            maxContextLength: model.contextLength.toString(),
+        });
+        setFormField('apiKey');
+        setStep('manual-setup');
+    }, []);
+    const handleTokenSubmit = useCallback(async () => {
+        if (!orquestaToken.trim()) {
+            setTokenError('Please enter a token');
+            return;
+        }
+        setIsValidatingToken(true);
+        setTokenError(null);
+        try {
+            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;
+            }
+            setOrganizationName(organization.name);
+            setOrganizationId(organization.id);
+            setProjects(fetchedProjects);
+            if (fetchedProjects.length === 1) {
+                await handleProjectSelect(fetchedProjects[0], organization.id, organization.name);
+            }
+            else {
+                setIsValidatingToken(false);
+                setStep('project-select');
+            }
+        }
+        catch (err) {
+            setTokenError(err instanceof Error ? err.message : 'Failed to validate token');
+            setIsValidatingToken(false);
+        }
+    }, [orquestaToken]);
+    const handleProjectSelect = useCallback(async (project, orgId, orgName) => {
+        setIsSyncing(true);
+        try {
+            await configManager.setOrquestaConfig({
+                token: orquestaToken,
+                organizationId: orgId || organizationId,
+                organizationName: orgName || organizationName,
+                projectId: project.id,
+                projectName: project.name,
+                autoSync: true,
+                connectedAt: new Date().toISOString(),
+            });
+            const syncResult = await syncOrquestaConfigs();
+            if (syncResult.success && (syncResult.added > 0 || syncResult.updated > 0)) {
+                setIsSyncing(false);
+                setIsValidatingToken(false);
+                onComplete();
+            }
+            else if (syncResult.success) {
+                setIsSyncing(false);
+                setIsValidatingToken(false);
+                setStep('manual-setup');
+            }
+            else {
+                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]);
     const handleFormNavigation = useCallback((key) => {
         const fields = ['name', 'baseUrl', 'apiKey', 'modelId', 'modelName', 'maxContextLength', 'buttons'];
         const currentIndex = fields.indexOf(formField);
@@ -103,16 +302,182 @@ export const LLMSetupWizard = ({ onComplete, onSkip }) => {
         }
     }, [formData, formButtonIndex, onComplete, onSkip]);
     useInput((_inputChar, key) => {
-        if (key.tab) {
-            handleFormNavigation({ tab: true, shift: key.shift });
+        if (step === 'welcome') {
+            if (key.upArrow) {
+                handleWelcomeNavigation('up');
+            }
+            else if (key.downArrow) {
+                handleWelcomeNavigation('down');
+            }
+            else if (key.return) {
+                handleWelcomeSelect();
+            }
+            return;
         }
-        else if (key.upArrow || key.downArrow) {
-            handleFormNavigation({ upArrow: key.upArrow, downArrow: key.downArrow });
+        if (step === 'token-input') {
+            if (key.return && !isValidatingToken) {
+                handleTokenSubmit();
+            }
+            else if (key.escape) {
+                setStep('welcome');
+                setOrquestaToken('');
+                setTokenError(null);
+            }
+            return;
         }
-        else if (key.return && formField === 'buttons') {
-            handleFormSubmit();
+        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;
+        }
+        if (step === 'provider-select') {
+            if (key.upArrow) {
+                setProviderIndex((prev) => (prev > 0 ? prev - 1 : PROVIDER_PRESETS.length - 1));
+            }
+            else if (key.downArrow) {
+                setProviderIndex((prev) => (prev < PROVIDER_PRESETS.length - 1 ? prev + 1 : 0));
+            }
+            else if (key.return) {
+                handleProviderSelect(PROVIDER_PRESETS[providerIndex]);
+            }
+            else if (key.escape) {
+                setStep('welcome');
+            }
+            return;
+        }
+        if (step === 'openrouter-browse') {
+            return;
+        }
+        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) {
+                if (selectedProvider) {
+                    setStep('provider-select');
+                }
+                else {
+                    setStep('welcome');
+                }
+            }
         }
     });
+    if (step === 'welcome') {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Logo, { showVersion: true, showTagline: true, animate: true }),
+            React.createElement(Text, null, ' '),
+            React.createElement(Box, { paddingX: 1, marginBottom: 1, flexDirection: "column" },
+                React.createElement(Text, { color: "white", bold: true }, "Get started with any LLM:"),
+                React.createElement(Text, { color: "gray" }, "  \u2022 OpenAI, Anthropic, DeepSeek, OpenRouter"),
+                React.createElement(Text, { color: "gray" }, "  \u2022 Local models via Ollama, vLLM, LM Studio"),
+                React.createElement(Text, { color: "gray" }, "  \u2022 Sync configs with Orquesta dashboard")),
+            React.createElement(Box, { paddingX: 1, marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, { color: "yellow", bold: true }, "How would you like to set up?"),
+                React.createElement(Text, null, ' '),
+                React.createElement(Text, { color: welcomeOptionIndex === 0 ? 'cyan' : undefined, bold: welcomeOptionIndex === 0 },
+                    welcomeOptionIndex === 0 ? '> ' : '  ',
+                    "\uD83D\uDD17 I have an Orquesta token (preload configs)"),
+                React.createElement(Text, { color: welcomeOptionIndex === 1 ? 'cyan' : undefined, bold: welcomeOptionIndex === 1 },
+                    welcomeOptionIndex === 1 ? '> ' : '  ',
+                    "\u2699\uFE0F  Set up manually"),
+                React.createElement(Text, { color: welcomeOptionIndex === 2 ? 'cyan' : undefined, bold: welcomeOptionIndex === 2 },
+                    welcomeOptionIndex === 2 ? '> ' : '  ',
+                    "\u23ED\uFE0F  Skip for now (configure later via /config)")),
+            React.createElement(Box, { marginTop: 2 },
+                React.createElement(Text, { dimColor: true }, "\u2191\u2193: navigate | Enter: select"))));
+    }
+    if (step === 'token-input') {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null, ' '),
+            React.createElement(Text, null, ' '),
+            React.createElement(Box, { borderStyle: "double", borderColor: "cyan", paddingX: 2, marginBottom: 1 },
+                React.createElement(Text, { color: "cyan", bold: true }, "Connect to Orquesta")),
+            React.createElement(Box, { paddingX: 1, marginBottom: 1, flexDirection: "column" },
+                React.createElement(Text, { color: "gray" }, "Enter your Orquesta CLI token to sync LLM configurations."),
+                React.createElement(Text, { color: "gray" }, "Get your token from: "),
+                React.createElement(Text, { color: "cyan" }, "https://orquesta.live/dashboard/orquesta-cli")),
+            React.createElement(Box, { paddingX: 1, marginY: 1 },
+                React.createElement(Text, { color: "yellow" }, "Token: "),
+                React.createElement(TextInput, { value: orquestaToken, onChange: setOrquestaToken, placeholder: "oclt_xxxxxxxxxxxx" })),
+            tokenError && (React.createElement(Box, { paddingX: 1 },
+                React.createElement(Text, { color: "red" },
+                    "Error: ",
+                    tokenError))),
+            isValidatingToken && (React.createElement(Box, { paddingX: 1, marginTop: 1 },
+                React.createElement(Text, { color: "cyan" },
+                    React.createElement(Spinner, { type: "dots" }),
+                    " Validating token..."))),
+            React.createElement(Box, { marginTop: 2 },
+                React.createElement(Text, { dimColor: true }, "Enter: validate | Esc: back"))));
+    }
+    if (step === 'project-select') {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null, ' '),
+            React.createElement(Text, null, ' '),
+            React.createElement(Box, { borderStyle: "double", borderColor: "cyan", paddingX: 2, marginBottom: 1 },
+                React.createElement(Text, { color: "cyan", bold: true }, "Select Project")),
+            React.createElement(Box, { paddingX: 1, marginBottom: 1 },
+                React.createElement(Text, { color: "green" },
+                    "\u2713 Connected to: ",
+                    organizationName)),
+            React.createElement(Box, { paddingX: 1, flexDirection: "column" },
+                React.createElement(Text, { color: "yellow" }, "Select a project:"),
+                React.createElement(Text, null, ' '),
+                projects.map((project, index) => (React.createElement(Box, { key: project.id, flexDirection: "column" },
+                    React.createElement(Text, { color: projectIndex === index ? 'cyan' : undefined, bold: projectIndex === index },
+                        projectIndex === index ? '> ' : '  ',
+                        project.name),
+                    project.description && (React.createElement(Text, { color: "gray" },
+                        "    ",
+                        project.description)))))),
+            isSyncing && (React.createElement(Box, { paddingX: 1, marginTop: 1 },
+                React.createElement(Text, { color: "cyan" },
+                    React.createElement(Spinner, { type: "dots" }),
+                    " Syncing configurations..."))),
+            React.createElement(Box, { marginTop: 2 },
+                React.createElement(Text, { dimColor: true }, "\u2191\u2193: navigate | Enter: select | Esc: back"))));
+    }
+    if (step === 'provider-select') {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null, ' '),
+            React.createElement(Text, null, ' '),
+            React.createElement(Box, { borderStyle: "double", borderColor: "cyan", paddingX: 2, marginBottom: 1 },
+                React.createElement(Text, { color: "cyan", bold: true }, "Select LLM Provider")),
+            React.createElement(Box, { paddingX: 1, marginBottom: 1 },
+                React.createElement(Text, { color: "gray" }, "Choose a provider to get started quickly:")),
+            React.createElement(Box, { paddingX: 1, flexDirection: "column" }, PROVIDER_PRESETS.map((provider, index) => (React.createElement(Box, { key: provider.id, flexDirection: "column", marginBottom: index < PROVIDER_PRESETS.length - 1 ? 1 : 0 },
+                React.createElement(Text, { color: providerIndex === index ? 'cyan' : undefined, bold: providerIndex === index },
+                    providerIndex === index ? '> ' : '  ',
+                    provider.icon,
+                    " ",
+                    provider.name),
+                React.createElement(Text, { color: "gray", dimColor: true },
+                    '    ',
+                    provider.description))))),
+            React.createElement(Box, { marginTop: 2 },
+                React.createElement(Text, { dimColor: true }, "\u2191\u2193: navigate | Enter: select | Esc: back"))));
+    }
+    if (step === 'openrouter-browse') {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null, ' '),
+            React.createElement(OpenRouterModelBrowser, { onSelect: handleOpenRouterModelSelect, onCancel: () => setStep('provider-select') })));
+    }
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Text, null, ' '),
         React.createElement(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1 },
@@ -125,7 +490,8 @@ export const LLMSetupWizard = ({ onComplete, onSkip }) => {
             React.createElement(Text, { color: "magenta", bold: true }, "\uD83C\uDFBC ORQUESTA CLI SETUP")),
         React.createElement(Box, { paddingX: 2, marginBottom: 1, flexDirection: "column", alignItems: "center" },
             React.createElement(Text, { color: "yellow", bold: true }, "Configure Your Orchestra"),
-            React.createElement(Text, { color: "gray", dimColor: true }, "Connect to your local LLM to start conducting AI-powered development")),
+            React.createElement(Text, { color: "gray", dimColor: true }, "Connect to your local LLM to start conducting AI-powered development"),
+            configManager.hasOrquestaConnection() && (React.createElement(Text, { color: "green" }, "\u2713 Connected to Orquesta (no configs found)"))),
         React.createElement(Box, { borderStyle: "round", borderColor: "magenta", paddingX: 2, paddingY: 1, flexDirection: "column" },
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Text, { color: "magenta", bold: true }, "\uD83C\uDFB9 Endpoint Configuration")),

package/dist/ui/components/Logo.d.ts

@@ -6,6 +6,8 @@ interface LogoProps {
     animate?: boolean;
     modelName?: string;
     workingDirectory?: string;
+    projectName?: string;
+    organizationName?: string;
 }
 export declare const Logo: React.FC<LogoProps>;
 interface InitStepIndicatorProps {

package/dist/ui/components/Logo.js

@@ -22,14 +22,21 @@ const ORQUESTA_TEXT = `
  ██████  ██████   ██████  ██    ██ ███████ ███████ ████████  █████
 ██    ██ ██   ██ ██    ██ ██    ██ ██      ██         ██    ██   ██
 ██    ██ ██████  ██    ██ ██    ██ █████   ███████    ██    ███████
-██    ██ ██   ██ ██    ██ ██    ██ ██           ██    ██    ██   ██
- ██████  ██   ██  ██████   ██████  ███████ ███████    ██    ██   ██
+██   ███ ██   ██ ██  █ ██ ██    ██ ██           ██    ██    ██   ██
+ ██████  ██   ██  █████ █  ██████  ███████ ███████    ██    ██   ██
 `.trim();
-export const Logo = ({ showTagline = true, modelName, workingDirectory, }) => {
+export const Logo = ({ showTagline = true, modelName, workingDirectory, projectName, organizationName, }) => {
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Box, { flexDirection: "row", alignItems: "center" },
             React.createElement(Box, { flexDirection: "column", marginRight: 1 }, BASS_CLEF.map((line, idx) => (React.createElement(Text, { key: idx, color: "cyan", bold: true }, line)))),
             React.createElement(Box, { flexDirection: "column", justifyContent: "center" }, ORQUESTA_TEXT.split('\n').map((line, idx) => (React.createElement(Text, { key: idx, color: "cyan", bold: true }, line))))),
+        projectName && (React.createElement(Box, { marginTop: 1, justifyContent: "center" },
+            React.createElement(Text, { color: "magenta", bold: true }, "\uD83D\uDCC1 Connected to: "),
+            React.createElement(Text, { color: "magentaBright", bold: true }, projectName),
+            organizationName && (React.createElement(Text, { color: "gray" },
+                " (",
+                organizationName,
+                ")")))),
         showTagline && (React.createElement(Box, { marginTop: 1 },
             React.createElement(Text, { color: "green" }, "Your AI assistant for orchestrating development with local LLMs."))),
         React.createElement(Box, { marginTop: 1 },

package/dist/ui/components/OpenRouterModelBrowser.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface OpenRouterModelBrowserProps {
+    onSelect: (model: {
+        id: string;
+        name: string;
+        contextLength: number;
+        isFree: boolean;
+    }) => void;
+    onCancel: () => void;
+}
+export declare const OpenRouterModelBrowser: React.FC<OpenRouterModelBrowserProps>;
+export {};
+//# sourceMappingURL=OpenRouterModelBrowser.d.ts.map