orquesta-cli 0.1.13 → 0.1.14

package/src/ui/components/ProgressBar.tsx

@@ -1,51 +0,0 @@
-/**
- * Progress Bar Component
- *
- * Displays a visual progress bar for task completion
- */
-
-import React from 'react';
-import { Box, Text } from 'ink';
-import chalk from 'chalk';
-
-export interface ProgressBarProps {
-  current: number;
-  total: number;
-  label?: string;
-  width?: number;
-  showPercentage?: boolean;
-}
-
-export const ProgressBar: React.FC<ProgressBarProps> = ({
-  current,
-  total,
-  label,
-  width = 40,
-  showPercentage = true,
-}) => {
-  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
-  const filledWidth = Math.round((width * current) / total);
-  const emptyWidth = width - filledWidth;
-
-  const filledBar = '█'.repeat(filledWidth);
-  const emptyBar = '░'.repeat(emptyWidth);
-
-  return (
-    <Box flexDirection="column">
-      {label && (
-        <Box marginBottom={0}>
-          <Text>{label}</Text>
-        </Box>
-      )}
-      <Box>
-        <Text>
-          {chalk.greenBright(filledBar)}
-          {chalk.white(emptyBar)}
-          {showPercentage && (
-            <Text color="cyan"> {percentage}% ({current}/{total})</Text>
-          )}
-        </Text>
-      </Box>
-    </Box>
-  );
-};

package/src/ui/components/StatusBar.tsx

@@ -1,302 +0,0 @@
-/**
- * StatusBar Component
- *
- * Bottom status bar showing:
- * - Session info (message count, token total)
- * - Context usage bar
- * - Current time
- * - Keyboard shortcuts
- */
-
-import React, { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
-import { logger } from '../../utils/logger.js';
-
-export interface StatusBarProps {
-  // Model and endpoint
-  model?: string;
-  endpoint?: string;
-  // Working directory
-  workingDirectory?: string;
-  // Status
-  status?: 'idle' | 'thinking' | 'executing' | 'error';
-  message?: string;
-  // Session info
-  messageCount?: number;
-  sessionTokens?: number;
-  // Context usage
-  contextUsage?: {
-    current: number;
-    max: number;
-  };
-  // Context remaining percentage for auto-compact indicator
-  contextRemainingPercent?: number;
-  // TODO status
-  todoCount?: number;
-  todoCompleted?: number;
-  // Health status
-  healthStatus?: 'healthy' | 'unhealthy' | 'checking' | 'unknown';
-  // Claude Code style execution status
-  currentActivity?: string;  // Current activity updated by LLM (e.g., "Analyzing files", "Writing code")
-  sessionElapsedSeconds?: number;  // Session elapsed time
-}
-
-/**
- * Format token count
- */
-function formatTokens(count: number): string {
-  if (count < 1000) return count.toString();
-  if (count < 1000000) return `${(count / 1000).toFixed(1)}k`;
-  return `${(count / 1000000).toFixed(2)}M`;
-}
-
-/**
- * Clock component with live time
- */
-const Clock: React.FC = () => {
-  const [time, setTime] = useState(new Date());
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(new Date());
-    }, 1000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Text color="gray">
-      {time.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}
-    </Text>
-  );
-};
-
-/**
- * Animated star component - pulses between large and small
- */
-const AnimatedStar: React.FC = () => {
-  const [phase, setPhase] = useState(0);
-
-  // Animation phases: ✶ (large) → ✷ (medium) → ✸ (small) → ✷ → ✶
-  const stars = ['✶', '✷', '✸', '✷'];
-  const colors = ['magentaBright', 'magenta', 'gray', 'magenta'] as const;
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setPhase(p => (p + 1) % stars.length);
-    }, 300); // 300ms per phase = ~1.2s full cycle
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Text color={colors[phase]} bold>
-      {stars[phase]}{' '}
-    </Text>
-  );
-};
-
-/**
- * Context usage mini bar
- */
-const ContextMiniBar: React.FC<{ current: number; max: number }> = ({ current, max }) => {
-  const percentage = Math.min(Math.round((current / max) * 100), 100);
-  const barWidth = 8;
-  const filled = Math.round((percentage / 100) * barWidth);
-  const empty = barWidth - filled;
-
-  // Color based on usage
-  let color: string;
-  if (percentage < 50) color = 'green';
-  else if (percentage < 75) color = 'yellow';
-  else if (percentage < 90) color = 'red';
-  else color = 'redBright';
-
-  return (
-    <Box>
-      <Text color={color}>{'█'.repeat(filled)}</Text>
-      <Text color="gray">{'░'.repeat(empty)}</Text>
-      <Text color={color}> {percentage}%</Text>
-    </Box>
-  );
-};
-
-/**
- * Format elapsed time (Claude Code style)
- */
-function formatElapsedTime(seconds: number): string {
-  if (seconds < 60) {
-    return `${seconds}s`;
-  }
-  const mins = Math.floor(seconds / 60);
-  const secs = seconds % 60;
-  return `${mins}m ${secs}s`;
-}
-
-export const StatusBar: React.FC<StatusBarProps> = ({
-  model,
-  endpoint: _endpoint,
-  workingDirectory,
-  status = 'idle',
-  message: _message,
-  messageCount = 0,
-  sessionTokens = 0,
-  contextUsage,
-  contextRemainingPercent,
-  todoCount,
-  todoCompleted,
-  healthStatus,
-  currentActivity,
-  sessionElapsedSeconds,
-}) => {
-  // endpoint and message reserved for future enhanced display
-  void _endpoint;
-  void _message;
-  useEffect(() => {
-    logger.debug('StatusBar rendered', {
-      status,
-      messageCount,
-      sessionTokens,
-    });
-  }, [status, messageCount, sessionTokens]);
-
-  // Health indicator
-  const getHealthIcon = () => {
-    switch (healthStatus) {
-      case 'healthy': return <Text color="green">●</Text>;
-      case 'unhealthy': return <Text color="red">●</Text>;
-      case 'checking': return <Text color="yellow">◐</Text>;
-      default: return <Text color="gray">○</Text>;
-    }
-  };
-
-  // Status indicator
-  const getStatusIndicator = () => {
-    switch (status) {
-      case 'thinking':
-        return <Text color="yellow">● THINK</Text>;
-      case 'executing':
-        return <Text color="green">● EXEC</Text>;
-      case 'error':
-        return <Text color="red">● ERR</Text>;
-      default:
-        return <Text color="gray">○ IDLE</Text>;
-    }
-  };
-
-  // Claude Code style: "✶ ~ doing… (esc to interrupt · 2m 7s · ↑ 3.6k tokens)"
-  const isActive = status === 'thinking' || status === 'executing';
-
-  // Show Claude Code style status bar when executing
-  if (isActive && currentActivity) {
-    return (
-      <Box justifyContent="space-between" paddingX={1}>
-        <Box>
-          <AnimatedStar />
-          <Text color="white">{currentActivity}… </Text>
-          <Text color="gray">(esc to interrupt</Text>
-          {sessionElapsedSeconds !== undefined && (
-            <Text color="gray"> · {formatElapsedTime(sessionElapsedSeconds)}</Text>
-          )}
-          {sessionTokens > 0 && (
-            <Text color="gray"> · ↑ {formatTokens(sessionTokens)} tokens</Text>
-          )}
-          <Text color="gray">)</Text>
-        </Box>
-
-        {/* Right: Model */}
-        <Box>
-          {model && <Text color="cyan">{model.slice(0, 15)}</Text>}
-        </Box>
-      </Box>
-    );
-  }
-
-  // Context remaining indicator color
-  const getContextColor = (percent: number): string => {
-    if (percent > 50) return 'green';
-    if (percent > 20) return 'yellow';
-    return 'red';
-  };
-
-  // Default status bar (idle, error, etc.)
-  return (
-    <Box justifyContent="space-between" paddingX={1}>
-      {/* Left section: Context remaining, Health, Status, Model */}
-      <Box>
-        {/* Context remaining indicator (for auto-compact) */}
-        {contextRemainingPercent !== undefined && (
-          <>
-            <Text color={getContextColor(contextRemainingPercent)}>
-              Context {contextRemainingPercent}%
-            </Text>
-            <Text color="gray"> | </Text>
-          </>
-        )}
-
-        {getHealthIcon()}
-        <Text> </Text>
-        {getStatusIndicator()}
-
-        {/* Model name */}
-        {model && (
-          <>
-            <Text color="gray"> | </Text>
-            <Text color="cyan">{model.slice(0, 15)}</Text>
-          </>
-        )}
-
-        {/* Working directory */}
-        {workingDirectory && (
-          <>
-            <Text color="gray"> | </Text>
-            <Text color="gray">{workingDirectory}</Text>
-          </>
-        )}
-      </Box>
-
-      {/* Center section: Stats */}
-      <Box>
-        {/* Message count */}
-        {messageCount > 0 && (
-          <Box marginRight={2}>
-            <Text color="gray">💬 {messageCount}</Text>
-          </Box>
-        )}
-
-        {/* Session tokens */}
-        {sessionTokens > 0 && (
-          <Box marginRight={2}>
-            <Text color="cyan">⚡ {formatTokens(sessionTokens)}</Text>
-          </Box>
-        )}
-
-        {/* Context usage */}
-        {contextUsage && contextUsage.current > 0 && (
-          <Box marginRight={2}>
-            <Text color="gray">CTX </Text>
-            <ContextMiniBar current={contextUsage.current} max={contextUsage.max} />
-          </Box>
-        )}
-
-        {/* TODO mini status */}
-        {todoCount !== undefined && todoCount > 0 && (
-          <Box>
-            <Text color="gray">TODO </Text>
-            <Text color="green">{todoCompleted || 0}</Text>
-            <Text color="gray">/{todoCount}</Text>
-          </Box>
-        )}
-      </Box>
-
-      {/* Right section: Shortcuts and time */}
-      <Box>
-        <Text color="gray" dimColor>
-          /help
-        </Text>
-        <Text color="gray"> | </Text>
-        <Clock />
-      </Box>
-    </Box>
-  );
-};
-
-export default StatusBar;

package/src/ui/components/ThinkingIndicator.tsx

@@ -1,120 +0,0 @@
-/**
- * ThinkingIndicator Component
- *
- * Displays AI thinking/processing status with detailed information
- * Similar to Claude Code's thinking indicator
- */
-
-import React, { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-import { logger } from '../../utils/logger.js';
-
-export type ThinkingPhase =
-  | 'analyzing'
-  | 'planning'
-  | 'generating'
-  | 'executing'
-  | 'validating'
-  | 'tool_calling'
-  | 'waiting';
-
-interface ThinkingIndicatorProps {
-  phase: ThinkingPhase;
-  startTime: number;
-  currentStep?: string;
-  totalSteps?: number;
-  completedSteps?: number;
-  tokenCount?: number;
-  modelName?: string;
-}
-
-const PHASE_INFO: Record<ThinkingPhase, { icon: string; label: string; color: string }> = {
-  analyzing: { icon: '🔍', label: 'Analyzing', color: 'yellow' },
-  planning: { icon: '💭', label: 'Thinking', color: 'blue' },
-  generating: { icon: '✨', label: 'Generating', color: 'magenta' },
-  executing: { icon: '⚡', label: 'Executing', color: 'green' },
-  validating: { icon: '✓', label: 'Validating', color: 'cyan' },
-  tool_calling: { icon: '🔧', label: 'Tool Call', color: 'yellow' },
-  waiting: { icon: '⏳', label: 'Waiting', color: 'gray' },
-};
-
-export const ThinkingIndicator: React.FC<ThinkingIndicatorProps> = ({
-  phase,
-  startTime,
-  currentStep,
-  totalSteps,
-  completedSteps,
-}) => {
-  const [elapsedSeconds, setElapsedSeconds] = useState(0);
-
-  // Log component mount
-  useEffect(() => {
-    logger.enter('ThinkingIndicator', { phase, startTime });
-    return () => {
-      logger.exit('ThinkingIndicator', { phase, elapsedSeconds });
-    };
-  }, []);
-
-  // Log phase changes
-  useEffect(() => {
-    logger.flow(`ThinkingIndicator phase changed: ${phase}`);
-    logger.vars(
-      { name: 'phase', value: phase },
-      { name: 'currentStep', value: currentStep },
-      { name: 'completedSteps', value: completedSteps },
-      { name: 'totalSteps', value: totalSteps }
-    );
-  }, [phase, currentStep, completedSteps, totalSteps]);
-
-  // Update elapsed time every second
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const elapsed = Math.floor((Date.now() - startTime) / 1000);
-      setElapsedSeconds(elapsed);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [startTime]);
-
-  const phaseInfo = PHASE_INFO[phase];
-
-  // Format elapsed time
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}s`;
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}m ${secs}s`;
-  };
-
-  return (
-    <Box flexDirection="column" paddingX={1}>
-      {/* Main indicator - minimal Notion style */}
-      <Box>
-        <Text color="blueBright">
-          <Spinner type="dots" />
-        </Text>
-        <Text color="white" bold> {phaseInfo.label}</Text>
-        <Text color="gray" dimColor> {formatTime(elapsedSeconds)}</Text>
-      </Box>
-
-      {/* Current step info */}
-      {currentStep && (
-        <Box marginLeft={2}>
-          <Text color="gray" dimColor>{currentStep}</Text>
-        </Box>
-      )}
-
-      {/* Progress bar */}
-      {totalSteps && completedSteps !== undefined && (
-        <Box marginLeft={2}>
-          <Text color="greenBright">{'▓'.repeat(Math.round((completedSteps / totalSteps) * 15))}</Text>
-          <Text color="gray" dimColor>{'░'.repeat(15 - Math.round((completedSteps / totalSteps) * 15))}</Text>
-          <Text color="gray" dimColor> {completedSteps}/{totalSteps}</Text>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export default ThinkingIndicator;

package/src/ui/components/TodoListView.tsx

@@ -1,140 +0,0 @@
-/**
- * TODO List View Component
- *
- * Displays TODO items with status indicators and progress bar
- */
-
-import React, { useEffect } from 'react';
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-import { TodoItem } from '../../types/index.js';
-import { logger } from '../../utils/logger.js';
-
-export interface TodoListViewProps {
-  todos: TodoItem[];
-  title?: string;
-  showDescription?: boolean;
-  showProgressBar?: boolean;
-}
-
-// Notion-style checkbox icons
-const STATUS_CONFIG = {
-  completed: { icon: '☑', color: 'gray' as const },
-  in_progress: { icon: '☐', color: 'white' as const },
-  failed: { icon: '☒', color: 'red' as const },
-  pending: { icon: '☐', color: 'gray' as const },
-};
-
-// Notion-style slim progress bar
-const ProgressBar: React.FC<{ completed: number; total: number; width?: number }> = ({
-  completed,
-  total,
-  width = 20,
-}) => {
-  const filled = total > 0 ? Math.round((completed / total) * width) : 0;
-  const empty = width - filled;
-
-  return (
-    <Box>
-      <Text color="greenBright">{'▓'.repeat(filled)}</Text>
-      <Text color="gray" dimColor>{'░'.repeat(empty)}</Text>
-      <Text color="gray" dimColor> {completed} of {total}</Text>
-    </Box>
-  );
-};
-
-export const TodoListView: React.FC<TodoListViewProps> = ({
-  todos,
-  showProgressBar = true,
-}) => {
-  // Log component lifecycle
-  useEffect(() => {
-    logger.enter('TodoListView', {
-      todoCount: todos.length,
-      showProgressBar,
-    });
-    return () => {
-      logger.exit('TodoListView', { todoCount: todos.length });
-    };
-  }, []);
-
-  // Log when todos change
-  useEffect(() => {
-    const completed = todos.filter(t => t.status === 'completed').length;
-    const inProgress = todos.filter(t => t.status === 'in_progress').length;
-    const failed = todos.filter(t => t.status === 'failed').length;
-
-    logger.debug('TodoListView todos updated', {
-      total: todos.length,
-      completed,
-      inProgress,
-      failed,
-    });
-  }, [todos]);
-
-  const completedCount = todos.filter(t => t.status === 'completed').length;
-  const totalCount = todos.length;
-
-  if (totalCount === 0) {
-    return null;
-  }
-
-  return (
-    <Box flexDirection="column" paddingX={1}>
-      {/* TODO Items - Notion style */}
-      {todos.map((todo) => {
-        const config = STATUS_CONFIG[todo.status] || STATUS_CONFIG.pending;
-        const isInProgress = todo.status === 'in_progress';
-        const isCompleted = todo.status === 'completed';
-
-        return (
-          <Box key={todo.id} flexDirection="column">
-            <Box>
-              {/* Checkbox icon */}
-              <Box width={2}>
-                {isInProgress ? (
-                  <Text color="blueBright">
-                    <Spinner type="dots2" />
-                  </Text>
-                ) : (
-                  <Text color={config.color}>{config.icon}</Text>
-                )}
-              </Box>
-
-              {/* Task title */}
-              <Text
-                color={isCompleted ? 'gray' : isInProgress ? 'white' : 'gray'}
-                dimColor={isCompleted}
-                strikethrough={isCompleted}
-                bold={isInProgress}
-              >
-                {todo.title}
-              </Text>
-
-              {/* Current indicator */}
-              {isInProgress && (
-                <Text color="blueBright"> ←</Text>
-              )}
-            </Box>
-
-            {/* Error message */}
-            {todo.error && (
-              <Box marginLeft={2}>
-                <Text color="red" dimColor>⚠ {todo.error}</Text>
-              </Box>
-            )}
-          </Box>
-        );
-      })}
-
-      {/* Progress bar at bottom */}
-      {showProgressBar && (
-        <Box marginTop={1}>
-          <ProgressBar completed={completedCount} total={totalCount} width={20} />
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export default TodoListView;