orquesta-cli 0.1.13 → 0.1.15

package/src/ui/TodoPanel.tsx

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

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

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

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