orquesta-cli 0.1.12

package/src/ui/components/ProgressBar.tsx

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

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

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

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