orquesta-cli 0.1.12

package/src/ui/TodoPanel.tsx

@@ -0,0 +1,240 @@
+/**
+ * TODO Panel Component
+ *
+ * Displays TODO list at the bottom of the screen for Plan-and-Execute mode
+ * Features:
+ * - Visual progress bar
+ * - Mini-map style progress
+ * - Time tracking per task
+ * - Token usage per task
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { TodoItem } from '../types/index.js';
+import { logger } from '../utils/logger.js';
+
+interface TodoPanelProps {
+  todos: TodoItem[];
+  currentTodoId?: string;
+  isProcessing?: boolean;
+}
+
+// Notion-style checkbox icons
+const STATUS_CONFIG = {
+  pending: { icon: '☐', color: 'gray' as const },
+  in_progress: { icon: '☐', color: 'white' as const },
+  completed: { icon: '☑', color: 'gray' as const },
+  failed: { icon: '☒', color: 'red' 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="white">{'░'.repeat(empty)}</Text>
+      <Text color="cyan"> {completed} of {total}</Text>
+    </Box>
+  );
+};
+
+
+
+/**
+ * TODO Panel Component
+ * Memoized to prevent unnecessary re-renders that cause duplicate terminal output
+ */
+export const TodoPanel: React.FC<TodoPanelProps> = React.memo(({
+  todos,
+  currentTodoId,
+  isProcessing = false,
+}) => {
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [startTime] = useState(Date.now());
+
+  // Log component lifecycle
+  useEffect(() => {
+    logger.enter('TodoPanel', {
+      todoCount: todos.length,
+      currentTodoId,
+    });
+    return () => {
+      logger.exit('TodoPanel', { todoCount: todos.length });
+    };
+  }, []);
+
+  // Update elapsed time
+  useEffect(() => {
+    if (!isProcessing) return;
+    const interval = setInterval(() => {
+      setElapsedTime(Math.floor((Date.now() - startTime) / 1000));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [isProcessing, startTime]);
+
+  // Log when todos change
+  useEffect(() => {
+    const completed = todos.filter(t => t.status === 'completed').length;
+    const inProgress = todos.filter(t => t.status === 'in_progress').length;
+
+    logger.debug('TodoPanel todos updated', {
+      total: todos.length,
+      completed,
+      inProgress,
+      currentTodoId,
+    });
+  }, [todos, currentTodoId]);
+
+  if (todos.length === 0) {
+    return null;
+  }
+
+  // Calculate stats
+  const completedCount = todos.filter(t => t.status === 'completed').length;
+
+  // Format elapsed time as mm:ss or hh:mm:ss
+  const formatElapsedTime = (seconds: number): string => {
+    const hrs = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+    if (hrs > 0) {
+      return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {/* TODO Items - Notion style */}
+      <Box flexDirection="column">
+        {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'}
+                  bold={isInProgress}
+                  dimColor={isCompleted}
+                  strikethrough={isCompleted}
+                >
+                  {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>
+          );
+        })}
+      </Box>
+
+      {/* Progress bar and time */}
+      <Box marginTop={1} justifyContent="space-between">
+        <ProgressBar completed={completedCount} total={todos.length} width={20} />
+        {isProcessing && (
+          <Text color="yellow">{formatElapsedTime(elapsedTime)}</Text>
+        )}
+      </Box>
+    </Box>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison: only re-render when todos or processing state actually changes
+  if (prevProps.isProcessing !== nextProps.isProcessing) return false;
+  if (prevProps.currentTodoId !== nextProps.currentTodoId) return false;
+  if (prevProps.todos.length !== nextProps.todos.length) return false;
+  // Deep compare todos by status and title
+  for (let i = 0; i < prevProps.todos.length; i++) {
+    const prev = prevProps.todos[i];
+    const next = nextProps.todos[i];
+    if (!prev || !next) return false;
+    if (prev.status !== next.status || prev.title !== next.title || prev.error !== next.error) {
+      return false;
+    }
+  }
+  return true; // Props are equal, skip re-render
+});
+
+/**
+ * Compact TODO Status Bar
+ * Shows inline status for space-constrained layouts
+ * Memoized to prevent unnecessary re-renders
+ */
+export const TodoStatusBar: React.FC<{ todos: TodoItem[] }> = React.memo(({ todos }) => {
+  // Log component render
+  useEffect(() => {
+    logger.debug('TodoStatusBar rendered', { todoCount: todos.length });
+  }, [todos.length]);
+
+  if (todos.length === 0) {
+    return null;
+  }
+
+  const completedCount = todos.filter(t => t.status === 'completed').length;
+  const inProgressCount = todos.filter(t => t.status === 'in_progress').length;
+  const currentTodo = todos.find(t => t.status === 'in_progress');
+  const percentage = Math.round((completedCount / todos.length) * 100);
+
+  return (
+    <Box>
+      {/* Notion-style inline progress */}
+      <Text color="greenBright">{'▓'.repeat(Math.round(percentage / 10))}</Text>
+      <Text color="white">{'░'.repeat(10 - Math.round(percentage / 10))}</Text>
+      <Text color="cyan"> {completedCount}/{todos.length}</Text>
+
+      {currentTodo && (
+        <>
+          <Text color="white"> │ </Text>
+          <Text color="blueBright">
+            <Spinner type="dots" />
+          </Text>
+          <Text color="white"> {currentTodo.title.slice(0, 30)}{currentTodo.title.length > 30 ? '...' : ''}</Text>
+        </>
+      )}
+
+      {inProgressCount === 0 && completedCount === todos.length && (
+        <>
+          <Text color="white"> │ </Text>
+          <Text color="greenBright">Done</Text>
+        </>
+      )}
+    </Box>
+  );
+});
+
+export default TodoPanel;

package/src/ui/UpdateNotification.tsx

@@ -0,0 +1,105 @@
+/**
+ * Update Notification UI Component
+ *
+ * React component for displaying update notifications in Ink
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+
+interface UpdateNotificationProps {
+  currentVersion: string;
+  latestVersion: string;
+  changelog?: string;
+  releaseDate?: string;
+  isUpdating?: boolean;
+  updateProgress?: string;
+  error?: string;
+}
+
+/**
+ * Update Notification Component
+ * Shows update availability and progress
+ */
+export const UpdateNotification: React.FC<UpdateNotificationProps> = ({
+  currentVersion,
+  latestVersion,
+  changelog,
+  releaseDate,
+  isUpdating = false,
+  updateProgress,
+  error
+}) => {
+  if (error) {
+    return (
+      <Box borderStyle="round" borderColor="red" padding={1} marginY={1}>
+        <Box flexDirection="column">
+          <Text color="red" bold>❌ Update Failed</Text>
+          <Text color="dim">{error}</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (isUpdating) {
+    return (
+      <Box borderStyle="round" borderColor="cyan" padding={1} marginY={1}>
+        <Box flexDirection="column">
+          <Box>
+            <Text color="cyan">
+              <Spinner type="dots" /> Updating...
+            </Text>
+          </Box>
+          {updateProgress && (
+            <Text color="dim">  {updateProgress}</Text>
+          )}
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box borderStyle="round" borderColor="yellow" padding={1} marginY={1}>
+      <Box flexDirection="column">
+        <Text color="yellow" bold>
+          🚀 New Version Available!
+        </Text>
+
+        <Box marginTop={1}>
+          <Text>Current Version: </Text>
+          <Text color="red">{currentVersion}</Text>
+        </Box>
+
+        <Box>
+          <Text>Latest Version:  </Text>
+          <Text color="green">{latestVersion}</Text>
+        </Box>
+
+        {releaseDate && (
+          <Box>
+            <Text>Released: </Text>
+            <Text color="dim">{new Date(releaseDate).toLocaleDateString()}</Text>
+          </Box>
+        )}
+
+        {changelog && (
+          <Box flexDirection="column" marginTop={1}>
+            <Text color="cyan" bold>📝 Changelog:</Text>
+            <Box paddingLeft={2}>
+              <Text color="dim">{changelog.split('\n').slice(0, 3).join('\n')}</Text>
+            </Box>
+          </Box>
+        )}
+
+        <Box marginTop={1}>
+          <Text color="dim" italic>
+            Press Y to update, N to skip, or S to skip this version
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default UpdateNotification;

package/src/ui/components/ActivityIndicator.tsx

@@ -0,0 +1,234 @@
+/**
+ * ActivityIndicator Component
+ *
+ * Unified component for displaying various AI activities:
+ * - Thinking/Generating
+ * - Local RAG (docs search)
+ * - Tool execution (file read/write, etc.)
+ * - Planning/Executing
+ * - Token usage and performance metrics
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { logger } from '../../utils/logger.js';
+
+// Activity types
+export type ActivityType =
+  | 'thinking'
+  | 'planning'
+  | 'executing'
+  | 'docs_search'
+  | 'file_read'
+  | 'file_write'
+  | 'file_search'
+  | 'tool_call'
+  | 'validating'
+  | 'waiting';
+
+// Activity details for display
+interface ActivityInfo {
+  icon: string;
+  label: string;
+  color: string;
+  spinnerType: 'dots' | 'line' | 'pipe' | 'star';
+}
+
+const ACTIVITY_INFO: Record<ActivityType, ActivityInfo> = {
+  thinking: { icon: '💭', label: 'Thinking', color: 'magenta', spinnerType: 'dots' },
+  planning: { icon: '💭', label: 'Thinking', color: 'blue', spinnerType: 'dots' },
+  executing: { icon: '⚡', label: 'Executing', color: 'green', spinnerType: 'line' },
+  docs_search: { icon: '📚', label: 'Searching docs', color: 'yellow', spinnerType: 'dots' },
+  file_read: { icon: '📖', label: 'Reading file', color: 'cyan', spinnerType: 'pipe' },
+  file_write: { icon: '✏️', label: 'Writing file', color: 'green', spinnerType: 'pipe' },
+  file_search: { icon: '🔍', label: 'Searching files', color: 'yellow', spinnerType: 'dots' },
+  tool_call: { icon: '🔧', label: 'Tool call', color: 'yellow', spinnerType: 'star' },
+  validating: { icon: '✓', label: 'Validating', color: 'cyan', spinnerType: 'dots' },
+  waiting: { icon: '⏳', label: 'Waiting', color: 'gray', spinnerType: 'dots' },
+};
+
+// Sub-activity for nested display
+export interface SubActivity {
+  type: ActivityType;
+  detail?: string;
+  status: 'pending' | 'running' | 'done' | 'error';
+}
+
+interface ActivityIndicatorProps {
+  activity: ActivityType;
+  startTime: number;
+  detail?: string;
+  subActivities?: SubActivity[];
+  // Token metrics
+  tokenCount?: number;
+  tokensPerSecond?: number;
+  promptTokens?: number;
+  completionTokens?: number;
+  // Model info
+  modelName?: string;
+  // For planning/executing
+  currentStep?: number;
+  totalSteps?: number;
+  stepName?: string;
+  // Latency
+  latencyMs?: number;
+}
+
+/**
+ * Format token count for display
+ */
+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`;
+}
+
+/**
+ * Mini progress bar component
+ */
+const MiniProgressBar: React.FC<{ value: number; max: number; width?: number; color?: string }> = ({
+  value,
+  max,
+  width = 10,
+  color = 'green',
+}) => {
+  const filled = Math.min(Math.round((value / max) * width), width);
+  const empty = width - filled;
+
+  return (
+    <Text>
+      <Text color={color}>{'█'.repeat(filled)}</Text>
+      <Text color="gray">{'░'.repeat(empty)}</Text>
+    </Text>
+  );
+};
+
+export const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
+  activity,
+  startTime,
+  detail,
+  subActivities = [],
+  tokenCount,
+  tokensPerSecond,
+  currentStep,
+  totalSteps,
+  stepName,
+}) => {
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+
+  // Log component lifecycle
+  useEffect(() => {
+    logger.enter('ActivityIndicator', { activity, startTime });
+    return () => {
+      logger.exit('ActivityIndicator', { activity, elapsedSeconds });
+    };
+  }, []);
+
+  // Log activity changes
+  useEffect(() => {
+    logger.flow(`Activity changed: ${activity}`);
+    logger.vars(
+      { name: 'activity', value: activity },
+      { name: 'detail', value: detail },
+      { name: 'subActivitiesCount', value: subActivities.length }
+    );
+  }, [activity, detail, subActivities.length]);
+
+  // Update elapsed time
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setElapsedSeconds(Math.floor((Date.now() - startTime) / 1000));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [startTime]);
+
+  const activityInfo = ACTIVITY_INFO[activity];
+
+  // Format time display
+  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`;
+  };
+
+  // Render progress bar for planning/executing
+  const renderProgressBar = () => {
+    if (!totalSteps || currentStep === undefined) return null;
+    const percent = Math.round((currentStep / totalSteps) * 100);
+
+    return (
+      <Box marginLeft={1}>
+        <MiniProgressBar value={currentStep} max={totalSteps} width={15} color="green" />
+        <Text color="gray"> {percent}%</Text>
+      </Box>
+    );
+  };
+
+  // Render sub-activity status icon
+  const getStatusIcon = (status: SubActivity['status']) => {
+    switch (status) {
+      case 'pending': return <Text color="gray">○</Text>;
+      case 'running': return <Text color="yellow"><Spinner type="dots" /></Text>;
+      case 'done': return <Text color="green">✓</Text>;
+      case 'error': return <Text color="red">✗</Text>;
+    }
+  };
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {/* Main activity header - minimal Notion style */}
+      <Box>
+        <Text color="blueBright">
+          <Spinner type={activityInfo.spinnerType} />
+        </Text>
+        <Text color="white" bold> {activityInfo.label}</Text>
+        <Text color="gray" dimColor> {formatTime(elapsedSeconds)}</Text>
+        {renderProgressBar()}
+      </Box>
+
+      {/* Detail line */}
+      {detail && (
+        <Box marginLeft={2}>
+          <Text color="gray" dimColor>{detail}</Text>
+        </Box>
+      )}
+
+      {/* Step info for planning/executing */}
+      {stepName && (
+        <Box marginLeft={2}>
+          <Text color="gray" dimColor>{currentStep}/{totalSteps}: {stepName}</Text>
+        </Box>
+      )}
+
+      {/* Sub-activities (e.g., tool calls during thinking) */}
+      {subActivities.length > 0 && (
+        <Box flexDirection="column" marginLeft={2}>
+          {subActivities.map((sub, idx) => {
+            const subInfo = ACTIVITY_INFO[sub.type];
+            return (
+              <Box key={idx}>
+                {getStatusIcon(sub.status)}
+                <Text color="gray" dimColor> {subInfo.label}</Text>
+                {sub.detail && <Text color="gray" dimColor>: {sub.detail}</Text>}
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      {/* Token metrics - simplified */}
+      {tokenCount !== undefined && (
+        <Box marginLeft={2}>
+          <Text color="gray" dimColor>
+            {formatTokens(tokenCount)} tokens
+            {tokensPerSecond !== undefined && tokensPerSecond > 0 && ` · ${tokensPerSecond.toFixed(0)} tok/s`}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default ActivityIndicator;

package/src/ui/components/CommandBrowser.tsx

@@ -0,0 +1,114 @@
+/**
+ * Command Browser Component
+ *
+ * Displays available slash commands with descriptions and argument hints
+ */
+
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import SelectInput from 'ink-select-input';
+import {
+  filterCommands,
+} from '../hooks/slashCommandProcessor.js';
+
+interface CommandBrowserProps {
+  partialCommand: string;
+  args: string; // Used to detect if command has arguments for hint display
+  onSelect: (command: string, shouldSubmit: boolean) => void;
+  onCancel: () => void;
+}
+
+interface SelectItem {
+  label: string;
+  value: string;
+}
+
+const COMMAND_COLUMN_WIDTH = 25;
+const MAX_VISIBLE_COMMANDS = 10;
+
+export const CommandBrowser: React.FC<CommandBrowserProps> = ({
+  partialCommand,
+  args: _args,
+  onSelect,
+  onCancel,
+}) => {
+  const commands = filterCommands(partialCommand, MAX_VISIBLE_COMMANDS);
+
+  // Convert CommandMetadata to SelectItem format
+  const items: SelectItem[] = commands.map((cmd) => {
+    const aliasText = cmd.aliases && cmd.aliases.length > 0
+      ? ` (${cmd.aliases.join(', ')})`
+      : '';
+    const commandPart = `${cmd.name}${aliasText}`;
+    // Pad to COMMAND_COLUMN_WIDTH characters for alignment
+    const paddedCommand = commandPart.padEnd(COMMAND_COLUMN_WIDTH);
+    return {
+      label: `${paddedCommand} ${cmd.description}`,
+      value: cmd.name,
+    };
+  });
+
+  // Custom keyboard handling
+  useInput((_inputChar, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    // Tab key for autocomplete (select first command, don't submit)
+    if (key.tab && items.length > 0) {
+      const firstCommand = items[0];
+      if (firstCommand) {
+        onSelect(firstCommand.value, false);
+      }
+      return;
+    }
+  });
+
+  // Handle Enter key from SelectInput (submit command)
+  const handleSelect = (item: SelectItem) => {
+    onSelect(item.value, true);
+  };
+
+  // Show argument hint if command is complete and has args hint
+  const currentCommand = commands.find((cmd) => cmd.name === `/${partialCommand}`);
+  const argsHint = currentCommand?.argsHint;
+
+  if (items.length === 0) {
+    return (
+      <Box borderStyle="single" borderColor="yellow" paddingX={1} flexDirection="column">
+        <Text color="yellow">
+          No commands found matching: /{partialCommand}
+        </Text>
+        <Text dimColor>Press ESC to cancel</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {/* Command List */}
+      <Box borderStyle="single" borderColor="cyan" paddingX={1} flexDirection="column">
+        <Box>
+          <SelectInput items={items} onSelect={handleSelect} limit={MAX_VISIBLE_COMMANDS} />
+        </Box>
+      </Box>
+
+      {/* Argument Hint (shown when command is complete and has args) */}
+      {argsHint && (
+        <Box
+          borderStyle="single"
+          borderColor="yellow"
+          paddingX={1}
+          marginTop={1}
+          flexDirection="column"
+        >
+          <Text color="yellow" bold>
+            Expected Arguments:
+          </Text>
+          <Text color="white">{argsHint}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+};