orquesta-cli 0.1.4 → 0.1.6

package/src/ui/PlanExecuteView.tsx

@@ -34,8 +34,13 @@ export const PlanExecuteView: React.FC<PlanExecuteViewProps> = ({
     <Box flexDirection="column" padding={1}>
       {/* Title */}
       <Box marginBottom={1} justifyContent="center">
-        <Text bold color="cyan">
-          ====== Orquesta CLI Plan-and-Execute Mode ======
+        <Text bold color="magenta">
+          🎼 ══════ ORQUESTA CLI ══════ 🎼
+        </Text>
+      </Box>
+      <Box marginBottom={1} justifyContent="center">
+        <Text color="blue" dimColor>
+          Orchestrating AI-Powered Development
         </Text>
       </Box>
 
@@ -66,15 +71,15 @@ export const PlanExecuteView: React.FC<PlanExecuteViewProps> = ({
           {currentTodo ? (
             <Box
               borderStyle="round"
-              borderColor="yellow"
+              borderColor="magenta"
               padding={1}
               flexDirection="column"
             >
-              <Text bold color="yellow">Current Task:</Text>
+              <Text bold color="magenta">♪ Current Task:</Text>
               <Text>{currentTodo.title}</Text>
               <Box marginTop={1}>
                 <Text color="gray">Status: </Text>
-                <Text color={currentTodo.status === 'in_progress' ? 'yellow' : 'green'}>
+                <Text color={currentTodo.status === 'in_progress' ? 'magenta' : 'green'}>
                   {currentTodo.status}
                 </Text>
               </Box>
@@ -88,7 +93,7 @@ export const PlanExecuteView: React.FC<PlanExecuteViewProps> = ({
               alignItems="center"
             >
               <Text bold color="green">
-                All tasks completed!
+                🎉 All tasks completed!
               </Text>
             </Box>
           )}

package/src/ui/TodoPanel.tsx

@@ -195,7 +195,7 @@ export const TodoPanel: React.FC<TodoPanelProps> = React.memo(({
  * Shows inline status for space-constrained layouts
  * Memoized to prevent unnecessary re-renders
  */
-export const TodoStatusBar: React.FC<{ todos: TodoItem[] }> = React.memo(({ todos }) => {
+export const TodoStatusBar: React.FC<{ todos: TodoItem[]; projectName?: string }> = React.memo(({ todos, projectName }) => {
   // Log component render
   useEffect(() => {
     logger.debug('TodoStatusBar rendered', { todoCount: todos.length });
@@ -212,6 +212,14 @@ export const TodoStatusBar: React.FC<{ todos: TodoItem[] }> = React.memo(({ todo
 
   return (
     <Box>
+      {/* Project name (if connected to Orquesta) */}
+      {projectName && (
+        <>
+          <Text color="magenta">📁 {projectName}</Text>
+          <Text color="white"> │ </Text>
+        </>
+      )}
+
       {/* Notion-style inline progress */}
       <Text color="greenBright">{'▓'.repeat(Math.round(percentage / 10))}</Text>
       <Text color="white">{'░'.repeat(10 - Math.round(percentage / 10))}</Text>

package/src/ui/components/LLMSetupWizard.tsx

@@ -721,29 +721,39 @@ export const LLMSetupWizard: React.FC<LLMSetupWizardProps> = ({ onComplete, onSk
     <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
@@ -758,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
@@ -774,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
@@ -790,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
@@ -806,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
@@ -822,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
@@ -839,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>
   );
 };