orquesta-cli 0.1.3 → 0.1.5

package/src/ui/components/LLMSetupWizard.tsx

@@ -14,6 +14,7 @@ import { LLMClient } from '../../core/llm/llm-client.js';
 import { EndpointConfig } from '../../types/index.js';
 import { fetchOrquestaProjects, syncOrquestaConfigs } from '../../orquesta/config-sync.js';
 import { Logo } from './Logo.js';
+import { OpenRouterModelBrowser } from './OpenRouterModelBrowser.js';
 
 interface LLMSetupWizardProps {
   onComplete: () => void;
@@ -29,9 +30,69 @@ interface FormData {
   maxContextLength: string;
 }
 
-type WizardStep = 'welcome' | 'token-input' | 'project-select' | 'manual-setup';
+type WizardStep = 'welcome' | 'token-input' | 'project-select' | 'provider-select' | 'openrouter-browse' | 'manual-setup';
 type FormField = 'name' | 'baseUrl' | 'apiKey' | 'modelId' | 'modelName' | 'maxContextLength' | 'buttons';
 
+interface ProviderPreset {
+  id: string;
+  name: string;
+  icon: string;
+  baseUrl: string;
+  requiresApiKey: boolean;
+  description: string;
+}
+
+const PROVIDER_PRESETS: ProviderPreset[] = [
+  {
+    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',
+  },
+];
+
 interface OrquestaProject {
   id: string;
   name: string;
@@ -56,6 +117,10 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
   const [projectIndex, setProjectIndex] = useState(0);
   const [isSyncing, setIsSyncing] = useState(false);
 
+  // Provider selection state
+  const [providerIndex, setProviderIndex] = useState(0);
+  const [selectedProvider, setSelectedProvider] = useState<ProviderPreset | null>(null);
+
   // Manual setup form state
   const [formData, setFormData] = useState<FormData>({
     name: '',
@@ -87,14 +152,61 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
       // "I have an Orquesta token"
       setStep('token-input');
     } else if (welcomeOptionIndex === 1) {
-      // "Set up manually"
-      setStep('manual-setup');
+      // "Set up manually" - go to provider selection
+      setStep('provider-select');
     } else {
       // "Skip for now"
       onSkip();
     }
   }, [welcomeOptionIndex, onSkip]);
 
+  // Handle provider selection
+  const handleProviderSelect = useCallback((provider: ProviderPreset) => {
+    setSelectedProvider(provider);
+
+    if (provider.id === 'openrouter') {
+      // Go to OpenRouter model browser
+      setStep('openrouter-browse');
+    } else if (provider.id === 'custom') {
+      // Go to full manual setup
+      setFormData({
+        name: '',
+        baseUrl: '',
+        apiKey: '',
+        modelId: '',
+        modelName: '',
+        maxContextLength: '128000',
+      });
+      setStep('manual-setup');
+    } else {
+      // Pre-fill form with provider info
+      setFormData({
+        name: provider.name,
+        baseUrl: provider.baseUrl,
+        apiKey: '',
+        modelId: '',
+        modelName: '',
+        maxContextLength: '128000',
+      });
+      setFormField(provider.requiresApiKey ? 'apiKey' : 'modelId');
+      setStep('manual-setup');
+    }
+  }, []);
+
+  // Handle OpenRouter model selection
+  const handleOpenRouterModelSelect = useCallback((model: { id: string; name: string; contextLength: number; isFree: boolean }) => {
+    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');
+  }, []);
+
   // Handle token validation
   const handleTokenSubmit = useCallback(async () => {
     if (!orquestaToken.trim()) {
@@ -339,6 +451,26 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
       return;
     }
 
+    // Provider selection screen
+    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;
+    }
+
+    // OpenRouter model browser - handled by component itself
+    if (step === 'openrouter-browse') {
+      // Component handles its own input
+      return;
+    }
+
     // Manual setup form
     if (step === 'manual-setup') {
       if (key.tab) {
@@ -348,7 +480,12 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
       } else if (key.return && formField === 'buttons') {
         handleFormSubmit();
       } else if (key.escape) {
-        setStep('welcome');
+        // Go back to provider select or welcome
+        if (selectedProvider) {
+          setStep('provider-select');
+        } else {
+          setStep('welcome');
+        }
       }
     }
   });
@@ -521,34 +658,102 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
     );
   }
 
+  // Render Provider Selection Screen
+  if (step === 'provider-select') {
+    return (
+      <Box flexDirection="column">
+        <Text>{' '}</Text>
+        <Text>{' '}</Text>
+
+        {/* Header */}
+        <Box borderStyle="double" borderColor="cyan" paddingX={2} marginBottom={1}>
+          <Text color="cyan" bold>
+            Select LLM Provider
+          </Text>
+        </Box>
+
+        {/* Instructions */}
+        <Box paddingX={1} marginBottom={1}>
+          <Text color="gray">Choose a provider to get started quickly:</Text>
+        </Box>
+
+        {/* Provider List */}
+        <Box paddingX={1} flexDirection="column">
+          {PROVIDER_PRESETS.map((provider, index) => (
+            <Box key={provider.id} flexDirection="column" marginBottom={index < PROVIDER_PRESETS.length - 1 ? 1 : 0}>
+              <Text
+                color={providerIndex === index ? 'cyan' : undefined}
+                bold={providerIndex === index}
+              >
+                {providerIndex === index ? '> ' : '  '}
+                {provider.icon} {provider.name}
+              </Text>
+              <Text color="gray" dimColor>
+                {'    '}{provider.description}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+
+        {/* Footer */}
+        <Box marginTop={2}>
+          <Text dimColor>↑↓: navigate | Enter: select | Esc: back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Render OpenRouter Model Browser
+  if (step === 'openrouter-browse') {
+    return (
+      <Box flexDirection="column">
+        <Text>{' '}</Text>
+        <OpenRouterModelBrowser
+          onSelect={handleOpenRouterModelSelect}
+          onCancel={() => setStep('provider-select')}
+        />
+      </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>
+      {/* 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={1} marginBottom={1} flexDirection="column">
-        <Text color="gray">Configure your LLM endpoint manually.</Text>
+      <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>
         {configManager.hasOrquestaConnection() && (
           <Text color="green">✓ Connected to Orquesta (no configs found)</Text>
         )}
       </Box>
 
       {/* Form */}
-      <Box borderStyle="single" borderColor="gray" paddingX={1} flexDirection="column">
+      <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' ? 'cyan' : 'yellow'}>
-            {formField === 'name' ? '> ' : '  '}Endpoint Name:
+          <Text color={formField === 'name' ? 'magenta' : 'blue'} bold={formField === 'name'}>
+            {formField === 'name' ? '♪ ' : '  '}Endpoint Name:
           </Text>
           {formField === 'name' ? (
             <TextInput
@@ -563,8 +768,8 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
 
         {/* Base URL Field */}
         <Box>
-          <Text color={formField === 'baseUrl' ? 'cyan' : 'yellow'}>
-            {formField === 'baseUrl' ? '> ' : '  '}Base URL:
+          <Text color={formField === 'baseUrl' ? 'magenta' : 'blue'} bold={formField === 'baseUrl'}>
+            {formField === 'baseUrl' ? '♪ ' : '  '}Base URL:
           </Text>
           {formField === 'baseUrl' ? (
             <TextInput
@@ -579,8 +784,8 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
 
         {/* API Key Field */}
         <Box>
-          <Text color={formField === 'apiKey' ? 'cyan' : 'yellow'}>
-            {formField === 'apiKey' ? '> ' : '  '}API Key:
+          <Text color={formField === 'apiKey' ? 'magenta' : 'blue'} bold={formField === 'apiKey'}>
+            {formField === 'apiKey' ? '♪ ' : '  '}API Key:
           </Text>
           {formField === 'apiKey' ? (
             <TextInput
@@ -595,8 +800,8 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
 
         {/* Model ID Field */}
         <Box>
-          <Text color={formField === 'modelId' ? 'cyan' : 'yellow'}>
-            {formField === 'modelId' ? '> ' : '  '}Model ID:
+          <Text color={formField === 'modelId' ? 'magenta' : 'blue'} bold={formField === 'modelId'}>
+            {formField === 'modelId' ? '♪ ' : '  '}Model ID:
           </Text>
           {formField === 'modelId' ? (
             <TextInput
@@ -611,8 +816,8 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
 
         {/* Model Name Field */}
         <Box>
-          <Text color={formField === 'modelName' ? 'cyan' : 'yellow'}>
-            {formField === 'modelName' ? '> ' : '  '}Model Name:
+          <Text color={formField === 'modelName' ? 'magenta' : 'blue'} bold={formField === 'modelName'}>
+            {formField === 'modelName' ? '♪ ' : '  '}Model Name:
           </Text>
           {formField === 'modelName' ? (
             <TextInput
@@ -627,8 +832,8 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
 
         {/* Max Context Length Field */}
         <Box>
-          <Text color={formField === 'maxContextLength' ? 'cyan' : 'yellow'}>
-            {formField === 'maxContextLength' ? '> ' : '  '}Max Context:
+          <Text color={formField === 'maxContextLength' ? 'magenta' : 'blue'} bold={formField === 'maxContextLength'}>
+            {formField === 'maxContextLength' ? '♪ ' : '  '}Max Context:
           </Text>
           {formField === 'maxContextLength' ? (
             <TextInput
@@ -644,37 +849,39 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
 
       {/* 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 marginTop={1} paddingX={2} borderStyle="round" borderColor="red">
+          <Text color="red" bold>⚠ {error}</Text>
         </Box>
       )}
 
       {/* Buttons */}
-      <Box marginTop={1} flexDirection="column" paddingX={1}>
+      <Box marginTop={2} flexDirection="column" paddingX={2}>
+        <Box marginBottom={1}>
+          <Text color="magenta" bold>🎵 Actions</Text>
+        </Box>
         <Box>
           <Text
-            color={formField === 'buttons' && formButtonIndex === 0 ? 'cyan' : undefined}
+            color={formField === 'buttons' && formButtonIndex === 0 ? 'magenta' : 'blue'}
             bold={formField === 'buttons' && formButtonIndex === 0}
           >
-            {formField === 'buttons' && formButtonIndex === 0 ? '> ' : '  '}
-            {isTesting ? 'Testing...' : 'Test & Save'}
+            {formField === 'buttons' && formButtonIndex === 0 ? '♪ ' : '  '}
+            {isTesting ? '🎼 Testing connection...' : '✓ Test & Save Configuration'}
           </Text>
         </Box>
         <Box>
           <Text
-            color={formField === 'buttons' && formButtonIndex === 1 ? 'cyan' : undefined}
+            color={formField === 'buttons' && formButtonIndex === 1 ? 'magenta' : 'blue'}
             bold={formField === 'buttons' && formButtonIndex === 1}
           >
-            {formField === 'buttons' && formButtonIndex === 1 ? '> ' : '  '}
-            Skip (configure later via /settings)
+            {formField === 'buttons' && formButtonIndex === 1 ? '♪ ' : '  '}
+            ⏭  Skip for now (configure via /settings)
           </Text>
         </Box>
       </Box>
 
       {/* Footer */}
-      <Box marginTop={1}>
-        <Text dimColor>↑↓/Tab: navigate fields | Enter: select button | Esc: back to welcome</Text>
+      <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,30 +1,40 @@
 /**
- * Logo Component
+ * Logo Component - DEXTER-style with Bass Clef
  *
- * ASCII art logo for Orquesta CLI startup screen
- * With gradient animation and typing effects
+ * Clean design inspired by DEXTER AI
  */
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Box, Text } from 'ink';
-import { createRequire } from 'module';
 
-// Get version from package.json
-const require = createRequire(import.meta.url);
-const pkg = require('../../../package.json') as { version: string };
-const VERSION = pkg.version;
-
-// ASCII Art Logo for Orquesta CLI (Conductor/Orchestra Theme)
-const LOGO_LINES = [
-  '  ╔═══╗  ',
-  '  ║ ♪ ║  ',
-  '  ╚═╦═╝  ',
-  '    ║    ',
-  '   ╱│╲   ',
+// Bass Clef - Clean minimal design with spaces
+const BASS_CLEF = [
+  '                                ',
+  '                                ',
+  '                                ',
+  '         *@#+*@@@*              ',
+  '       .@      :@@@+  @@+       ',
+  '       %@@@@-   +@@@- @@*       ',
+  '       *@@@@#   :@@@+           ',
+  '         .:     +@@@=:@@%       ',
+  '               :@@@@  *@.       ',
+  '               @@@@             ',
+  '             =@@@-              ',
+  '           .@@@-                ',
+  '         -@@=                   ',
+  '                                ',
+  '                                ',
+  '                                ',
 ];
 
-// Gradient colors - Orquesta brand colors (purple/blue theme)
-const GRADIENT_COLORS = ['magenta', 'magentaBright', 'blue', 'blueBright', 'cyan', 'magenta'] as const;
+// Big "ORQUESTA" text
+const ORQUESTA_TEXT = `
+ ██████  ██████   ██████  ██    ██ ███████ ███████ ████████  █████
+██    ██ ██   ██ ██    ██ ██    ██ ██      ██         ██    ██   ██
+██    ██ ██████  ██    ██ ██    ██ █████   ███████    ██    ███████
+██    ██ ██   ██ ██    ██ ██    ██ ██           ██    ██    ██   ██
+ ██████  ██   ██  ██████   ██████  ███████ ███████    ██    ██   ██
+`.trim();
 
 interface LogoProps {
   variant?: 'default' | 'compact' | 'animated';
@@ -36,96 +46,63 @@ interface LogoProps {
 }
 
 export const Logo: React.FC<LogoProps> = ({
-  variant: _variant = 'default',
-  showVersion = true,
   showTagline = true,
-  animate = true,
   modelName,
   workingDirectory,
 }) => {
-  // variant reserved for future use (compact, animated modes)
-  void _variant;
-  const [colorIndex, setColorIndex] = useState(0);
-  const [taglineIndex, setTaglineIndex] = useState(0);
-  const tagline = 'Orchestrating AI-Powered Development';
-
-  // Gradient color animation
-  useEffect(() => {
-    if (!animate) return;
-
-    const interval = setInterval(() => {
-      setColorIndex((prev) => (prev + 1) % GRADIENT_COLORS.length);
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, [animate]);
-
-  // Typing effect for tagline
-  useEffect(() => {
-    if (!animate || !showTagline) {
-      return undefined;
-    }
-
-    if (taglineIndex < tagline.length) {
-      const timeout = setTimeout(() => {
-        setTaglineIndex((prev) => prev + 1);
-      }, 30);
-      return () => clearTimeout(timeout);
-    }
-    return undefined;
-  }, [taglineIndex, animate, showTagline]);
-
-  // Get color for each line (gradient effect)
-  const getLineColor = (lineIndex: number): string => {
-    const colorOffset = (colorIndex + lineIndex) % GRADIENT_COLORS.length;
-    return GRADIENT_COLORS[colorOffset] ?? 'cyan';
-  };
-
   return (
-    <Box flexDirection="column" marginTop={2}>
-      {/* Logo with info on the right - Claude Code style */}
-      <Box flexDirection="row">
-        {/* Logo column */}
-        <Box flexDirection="column" marginRight={2}>
-          {LOGO_LINES.map((line, idx) => (
-            <Text key={idx} color={animate ? getLineColor(idx) : 'cyan'} bold>
-              {line}
-            </Text>
+    <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>
 
-        {/* Info column */}
+        {/* ORQUESTA text on the right */}
         <Box flexDirection="column" justifyContent="center">
-          {showVersion && (
-            <Text color="white" bold>
-              ORQUESTA CLI v{VERSION}
-            </Text>
-          )}
+          {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="yellow">
-              {modelName}
+            <Text color="gray">
+              Model: <Text color="cyan">{modelName}</Text>
             </Text>
           )}
+          {modelName && workingDirectory && <Text color="gray"> | </Text>}
           {workingDirectory && (
-            <Text color="cyan">
-              {workingDirectory}
-            </Text>
-          )}
-          {showTagline && !modelName && !workingDirectory && (
-            <Text color="blueBright" dimColor>
-              {animate ? tagline.slice(0, taglineIndex) : tagline}
-              {animate && taglineIndex < tagline.length && <Text color="white">_</Text>}
+            <Text color="gray">
+              Dir: <Text color="cyan">{workingDirectory}</Text>
             </Text>
           )}
         </Box>
-      </Box>
+      )}
     </Box>
   );
 };
 
 /**
- * Animated Init Step Indicator
- * Shows progress through initialization steps with animations
+ * Simplified Init Step Indicator
  */
 interface InitStepIndicatorProps {
   currentStep: number;
@@ -135,67 +112,12 @@ interface InitStepIndicatorProps {
 }
 
 export const InitStepIndicator: React.FC<InitStepIndicatorProps> = ({
-  currentStep,
-  totalSteps,
   stepText,
   stepIcon,
 }) => {
-  const [dotFrame, setDotFrame] = useState(0);
-  const dots = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDotFrame((prev) => (prev + 1) % dots.length);
-    }, 80);
-    return () => clearInterval(interval);
-  }, []);
-
-  // Generate step indicators
-  const renderSteps = () => {
-    const steps = [];
-    for (let i = 0; i < totalSteps; i++) {
-      let icon: string;
-      let color: string;
-
-      if (i < currentStep) {
-        // Completed
-        icon = '✓';
-        color = 'green';
-      } else if (i === currentStep) {
-        // Current (animated)
-        icon = dots[dotFrame] ?? '⠋';
-        color = 'yellow';
-      } else {
-        // Pending
-        icon = '○';
-        color = 'gray';
-      }
-
-      steps.push(
-        <Text key={i} color={color}>
-          {icon}
-        </Text>
-      );
-
-      if (i < totalSteps - 1) {
-        steps.push(
-          <Text key={`arrow-${i}`} color="gray">
-            {' → '}
-          </Text>
-        );
-      }
-    }
-    return steps;
-  };
-
   return (
-    <Box flexDirection="column" alignItems="center">
-      <Box>
-        <Text color="yellow">
-          {dots[dotFrame]} {stepIcon} {stepText}
-        </Text>
-      </Box>
-      <Box marginTop={1}>{renderSteps()}</Box>
+    <Box marginTop={1}>
+      <Text color="gray">{stepIcon} {stepText}...</Text>
     </Box>
   );
 };