orquesta-cli 0.1.13 → 0.1.14

package/src/ui/components/views/ChatView.tsx

@@ -1,447 +0,0 @@
-/**
- * ChatView Component
- *
- * Renders the chat message history in the interactive mode
- * Features:
- * - Icons/emojis for message roles
- * - Markdown rendering with syntax highlighting
- * - Timestamps
- * - Message folding for long content
- * - Claude-style tool call display
- */
-
-import React, { useEffect, useState } from 'react';
-import { Box, Text } from 'ink';
-import { Message, ToolCall } from '../../../types/index.js';
-import { logger } from '../../../utils/logger.js';
-import { MarkdownRenderer } from '../MarkdownRenderer.js';
-
-// Message role icons
-const ROLE_ICONS = {
-  user: '👤',
-  assistant: '🤖',
-  system: '⚙️',
-  error: '❌',
-  tool: '🔧',
-};
-
-// Role colors
-const ROLE_COLORS = {
-  user: 'green',
-  assistant: 'cyan',
-  system: 'gray',
-  error: 'red',
-  tool: 'yellow',
-} as const;
-
-interface ChatViewProps {
-  messages: Message[];
-  currentResponse?: string;
-  maxDisplayMessages?: number;
-  showTimestamps?: boolean;
-  enableMarkdown?: boolean;
-}
-
-
-export const ChatView: React.FC<ChatViewProps> = ({
-  messages,
-  currentResponse,
-  maxDisplayMessages = 10,
-  showTimestamps = false,
-  enableMarkdown = true,
-}) => {
-  // Track message timestamps
-  const [messagesMeta, setMessagesMeta] = useState<Map<number, { timestamp: Date; folded: boolean }>>(new Map());
-
-  // Log component render
-  useEffect(() => {
-    logger.enter('ChatView', {
-      messageCount: messages.length,
-      hasCurrentResponse: !!currentResponse,
-    });
-    return () => {
-      logger.exit('ChatView', { messageCount: messages.length });
-    };
-  }, []);
-
-  // Update timestamps for new messages
-  useEffect(() => {
-    const newMeta = new Map(messagesMeta);
-    messages.forEach((_, idx) => {
-      if (!newMeta.has(idx)) {
-        newMeta.set(idx, { timestamp: new Date(), folded: false });
-      }
-    });
-    setMessagesMeta(newMeta);
-
-    logger.debug('ChatView messages updated', {
-      totalMessages: messages.length,
-      displayedMessages: Math.min(messages.length, maxDisplayMessages),
-    });
-  }, [messages.length, maxDisplayMessages]);
-
-  // Get icon and color based on message role
-  const getMessageStyle = (role: string) => {
-    switch (role) {
-      case 'user':
-        return { icon: ROLE_ICONS.user, color: ROLE_COLORS.user };
-      case 'assistant':
-        return { icon: ROLE_ICONS.assistant, color: ROLE_COLORS.assistant };
-      case 'system':
-        return { icon: ROLE_ICONS.system, color: ROLE_COLORS.system };
-      case 'error':
-        return { icon: ROLE_ICONS.error, color: ROLE_COLORS.error };
-      case 'tool':
-        return { icon: ROLE_ICONS.tool, color: ROLE_COLORS.tool };
-      default:
-        return { icon: '💬', color: 'white' as const };
-    }
-  };
-
-  // Check if content should use markdown rendering
-  const shouldRenderMarkdown = (content: string): boolean => {
-    if (!enableMarkdown) return false;
-    // Check for markdown patterns
-    return content.includes('```') ||
-           content.includes('**') ||
-           content.includes('# ') ||
-           content.includes('- ') ||
-           content.includes('`');
-  };
-
-  // Tool icons (Claude Code style)
-  const TOOL_ICONS: Record<string, string> = {
-    'read_file': '📖',
-    'Read': '📖',
-    'create_file': '📝',
-    'Create': '📝',
-    'edit_file': '✏️',
-    'Edit': '✏️',
-    'search_files': '🔍',
-    'Search': '🔍',
-    'Grep': '🔍',
-    'grep_search': '🔍',
-    'list_files': '📁',
-    'list_directory': '📁',
-    'Glob': '📁',
-    'find_files': '🔎',
-    'execute_command': '⚡',
-    'Bash': '⚡',
-  };
-
-  // Normalize tool name to display name
-  const normalizeToolName = (name: string): string => {
-    const nameMap: Record<string, string> = {
-      'read_file': 'Read',
-      'create_file': 'Create',
-      'edit_file': 'Edit',
-      'search_files': 'Search',
-      'list_files': 'List',
-      'list_directory': 'Glob',
-      'find_files': 'Find',
-      'execute_command': 'Bash',
-      'grep_search': 'Grep',
-    };
-    return nameMap[name] || name;
-  };
-
-  // Get tool icon
-  const getToolIcon = (toolName: string): string => {
-    return TOOL_ICONS[toolName] || TOOL_ICONS[normalizeToolName(toolName)] || '🔧';
-  };
-
-  // Format tool arguments for display
-  const formatToolArgs = (toolName: string, argsStr: string): string => {
-    try {
-      const args = JSON.parse(argsStr) as Record<string, unknown>;
-
-      switch (toolName) {
-        case 'read_file':
-        case 'Read':
-          return (args['path'] as string) || (args['file_path'] as string) || '';
-        case 'create_file':
-        case 'Create':
-          return (args['path'] as string) || (args['file_path'] as string) || '';
-        case 'edit_file':
-        case 'Edit':
-          return (args['path'] as string) || (args['file_path'] as string) || '';
-        case 'search_files':
-        case 'Search':
-        case 'Grep':
-        case 'grep_search': {
-          const pattern = (args['pattern'] as string) || '';
-          const glob = (args['glob'] as string) || (args['path'] as string) || '';
-          return `pattern: "${pattern}"${glob ? `, glob: "${glob}"` : ''}`;
-        }
-        case 'list_files':
-        case 'list_directory':
-        case 'Glob':
-          return (args['directory_path'] as string) || (args['pattern'] as string) || (args['path'] as string) || '.';
-        case 'find_files':
-        case 'Find':
-          return (args['pattern'] as string) || '';
-        case 'execute_command':
-        case 'Bash': {
-          const cmd = (args['command'] as string) || '';
-          return cmd.length > 50 ? cmd.substring(0, 47) + '...' : cmd;
-        }
-        default: {
-          const entries = Object.entries(args).slice(0, 2);
-          return entries.map(([k, v]) => {
-            const val = typeof v === 'string'
-              ? (v.length > 30 ? v.substring(0, 27) + '...' : v)
-              : JSON.stringify(v);
-            return `${k}: ${val}`;
-          }).join(', ');
-        }
-      }
-    } catch {
-      return argsStr.length > 50 ? argsStr.substring(0, 47) + '...' : argsStr;
-    }
-  };
-
-  // Parse edit_file result to extract diff info
-  interface EditResult {
-    action: string;
-    file: string;
-    additions: number;
-    deletions: number;
-    message: string;
-    diff?: string[];
-  }
-
-  interface CreateResult {
-    action: string;
-    file: string;
-    lines: number;
-    message: string;
-  }
-
-  // Format tool result summary
-  const formatToolResultSummary = (toolName: string, result: string): string => {
-    if (!result) return '';
-
-    // Count lines for read operations
-    if (toolName === 'read_file' || toolName === 'Read') {
-      const lines = result.split('\n').length;
-      return `Read ${lines} lines`;
-    }
-
-    // Count matches for search
-    if (['search_files', 'Search', 'Grep', 'grep_search'].includes(toolName)) {
-      const lines = result.split('\n').filter(l => l.trim()).length;
-      return `Found ${lines} matches`;
-    }
-
-    // For create_file, parse JSON result
-    if (['create_file', 'Create'].includes(toolName)) {
-      try {
-        const parsed = JSON.parse(result) as CreateResult;
-        return `Created ${parsed.file} (${parsed.lines} lines)`;
-      } catch {
-        return result;
-      }
-    }
-
-    // For edit_file, parse JSON result
-    if (['edit_file', 'Edit'].includes(toolName)) {
-      try {
-        const parsed = JSON.parse(result) as EditResult;
-        return parsed.message;
-      } catch {
-        return result;
-      }
-    }
-
-    // For browser/office/bash tools, summarize if more than 3 lines
-    if (toolName.startsWith('browser_') || toolName.startsWith('word_') ||
-        toolName.startsWith('excel_') || toolName.startsWith('powerpoint_') ||
-        toolName.startsWith('bash')) {
-      const lines = result.split('\n');
-      if (lines.length > 3) {
-        const preview = lines.slice(0, 2).join('\n');
-        return `${preview}\n... (${lines.length - 2} more lines)`;
-      }
-      return result;
-    }
-
-    // Default: show truncated first line
-    const firstLine = result.split('\n')[0] || '';
-    return firstLine.length > 60 ? firstLine.substring(0, 57) + '...' : firstLine;
-  };
-
-  // Parse and render diff from edit_file result
-  const renderDiff = (result: string): React.ReactNode => {
-    try {
-      const parsed = JSON.parse(result) as EditResult;
-      if (!parsed.diff || parsed.diff.length === 0) return null;
-
-      return (
-        <Box flexDirection="column" paddingLeft={4}>
-          {parsed.diff.map((line, idx) => {
-            // Parse line number and content
-            const match = line.match(/^(\d+)\s*([+-])\s*(.*)$/);
-            if (!match) return <Text key={idx} color="gray">{line}</Text>;
-
-            const [, lineNumStr, sign, content] = match;
-            const lineNum = lineNumStr || '';
-
-            if (sign === '+') {
-              return (
-                <Box key={idx}>
-                  <Text color="gray">{lineNum.padStart(4)} </Text>
-                  <Text color="green">+ {content}</Text>
-                </Box>
-              );
-            } else {
-              return (
-                <Box key={idx}>
-                  <Text color="gray">{lineNum.padStart(4)} </Text>
-                  <Text color="red">- {content}</Text>
-                </Box>
-              );
-            }
-          })}
-        </Box>
-      );
-    } catch {
-      return null;
-    }
-  };
-
-  // Render tool calls in Claude style with icons
-  const renderToolCalls = (toolCalls: ToolCall[], allMessages: Message[], reason?: string) => {
-    return (
-      <Box flexDirection="column" marginTop={0}>
-        {/* Show reason if present (LLM's explanation before tool calls) */}
-        {reason && (
-          <Box marginBottom={0}>
-            <Text color="gray">{reason}</Text>
-          </Box>
-        )}
-        {toolCalls.map((tc, tcIdx) => {
-          const displayName = normalizeToolName(tc.function.name);
-          const toolIcon = getToolIcon(tc.function.name);
-          const argsDisplay = formatToolArgs(tc.function.name, tc.function.arguments);
-          const isEditTool = ['edit_file', 'Edit'].includes(tc.function.name);
-
-          // Find corresponding tool result
-          const toolResult = allMessages.find(
-            m => m.role === 'tool' && m.tool_call_id === tc.id
-          );
-          const resultSummary = toolResult
-            ? formatToolResultSummary(tc.function.name, toolResult.content)
-            : '';
-
-          return (
-            <Box key={tc.id || tcIdx} flexDirection="column" marginBottom={0}>
-              {/* Tool call header: 📖 Read(src/file.ts) */}
-              <Box>
-                <Text>{toolIcon} </Text>
-                <Text color="cyan" bold>{displayName}</Text>
-                <Text color="gray">(</Text>
-                <Text color="white">{argsDisplay}</Text>
-                <Text color="gray">)</Text>
-              </Box>
-              {/* Result summary: ⎿  Read 80 lines */}
-              {resultSummary && (
-                <Box paddingLeft={2}>
-                  <Text color="gray">⎿  </Text>
-                  <Text color="gray" dimColor>{resultSummary}</Text>
-                </Box>
-              )}
-              {/* Show diff for edit_file */}
-              {isEditTool && toolResult && renderDiff(toolResult.content)}
-            </Box>
-          );
-        })}
-      </Box>
-    );
-  };
-
-  // Render message content
-  const renderContent = (content: string, role: string, timestamp?: Date) => {
-    if (role === 'assistant' && shouldRenderMarkdown(content)) {
-      return (
-        <MarkdownRenderer
-          content={content}
-          showTimestamp={showTimestamps}
-          timestamp={timestamp}
-        />
-      );
-    }
-
-    return (
-      <Box flexDirection="column">
-        {showTimestamps && timestamp && (
-          <Text color="gray" dimColor>
-            {timestamp.toLocaleTimeString('ko-KR')}
-          </Text>
-        )}
-        <Text>{content}</Text>
-      </Box>
-    );
-  };
-
-  return (
-    <Box flexDirection="column" flexGrow={1} paddingX={1} paddingY={1}>
-      {/* Existing messages (filter out system and tool messages - they should not be visible to user) */}
-      {messages.slice(-maxDisplayMessages)
-        .filter((msg) => msg.role !== 'system' && msg.role !== 'tool')
-        .map((msg, idx) => {
-        const actualIdx = messages.length - maxDisplayMessages + idx;
-        const style = getMessageStyle(msg.role);
-        const isError = msg.role === 'error';
-        const meta = messagesMeta.get(actualIdx >= 0 ? actualIdx : idx);
-        const hasToolCalls = msg.role === 'assistant' && msg.tool_calls && msg.tool_calls.length > 0;
-
-        return (
-          <Box key={idx} marginBottom={1} flexDirection="column">
-            {/* Message header with icon */}
-            <Box>
-              <Text color={isError ? 'red' : style.color}>
-                {isError ? ROLE_ICONS.error : style.icon}{' '}
-              </Text>
-              {msg.role === 'user' ? (
-                // User messages: simple text
-                <Text color={style.color}>{msg.content}</Text>
-              ) : hasToolCalls ? (
-                // Assistant message with tool calls - show reasoning + tool calls
-                <Box flexDirection="column" flexGrow={1}>
-                  {renderToolCalls(msg.tool_calls!, messages, msg.content || undefined)}
-                </Box>
-              ) : (
-                // Assistant/other messages: potentially with markdown
-                <Box flexDirection="column" flexGrow={1}>
-                  {/* Render content if exists */}
-                  {msg.content && renderContent(msg.content, msg.role, meta?.timestamp)}
-                </Box>
-              )}
-            </Box>
-          </Box>
-        );
-      })}
-
-
-      {/* Current streaming response */}
-      {currentResponse && (
-        <Box flexDirection="column">
-          <Box>
-            <Text color="cyan">
-              <Text>{ROLE_ICONS.assistant} </Text>
-            </Text>
-          </Box>
-          <Box paddingLeft={2}>
-            {shouldRenderMarkdown(currentResponse) ? (
-              <MarkdownRenderer content={currentResponse} />
-            ) : (
-              <Text color="cyan">{currentResponse}</Text>
-            )}
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export default ChatView;

package/src/ui/components/views/index.ts

@@ -1,5 +0,0 @@
-/**
- * Views barrel export
- */
-
-export { ChatView } from './ChatView.js';

package/src/ui/contexts/TokenContext.tsx

@@ -1,139 +0,0 @@
-/**
- * Token Usage Context
- *
- * Tracks token usage across the application
- * Provides real-time token counting and statistics
- */
-
-import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
-import { logger } from '../../utils/logger.js';
-
-export interface TokenUsage {
-  prompt_tokens: number;
-  completion_tokens: number;
-  total_tokens: number;
-}
-
-export interface TokenStats {
-  // Current session totals
-  sessionTotal: number;
-  sessionPrompt: number;
-  sessionCompletion: number;
-
-  // Current request
-  lastRequestTokens: number;
-  lastResponseTokens: number;
-
-  // Rate tracking
-  tokensPerSecond: number;
-  lastUpdateTime: number;
-
-  // History for averaging
-  recentRates: number[];
-}
-
-interface TokenContextValue {
-  stats: TokenStats;
-  addUsage: (usage: TokenUsage, durationMs?: number) => void;
-  resetSession: () => void;
-}
-
-const initialStats: TokenStats = {
-  sessionTotal: 0,
-  sessionPrompt: 0,
-  sessionCompletion: 0,
-  lastRequestTokens: 0,
-  lastResponseTokens: 0,
-  tokensPerSecond: 0,
-  lastUpdateTime: Date.now(),
-  recentRates: [],
-};
-
-const TokenContext = createContext<TokenContextValue | null>(null);
-
-export const TokenProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [stats, setStats] = useState<TokenStats>(initialStats);
-
-  useEffect(() => {
-    logger.debug('TokenProvider mounted');
-    return () => {
-      logger.debug('TokenProvider unmounted', { finalStats: stats });
-    };
-  }, []);
-
-  const addUsage = useCallback((usage: TokenUsage, durationMs?: number) => {
-    setStats(prev => {
-      const newSessionTotal = prev.sessionTotal + usage.total_tokens;
-      const newSessionPrompt = prev.sessionPrompt + usage.prompt_tokens;
-      const newSessionCompletion = prev.sessionCompletion + usage.completion_tokens;
-
-      // Calculate tokens per second
-      let tokensPerSecond = prev.tokensPerSecond;
-      const recentRates = [...prev.recentRates];
-
-      if (durationMs && durationMs > 0) {
-        const rate = (usage.completion_tokens / durationMs) * 1000;
-        recentRates.push(rate);
-        // Keep last 5 rates for averaging
-        if (recentRates.length > 5) {
-          recentRates.shift();
-        }
-        // Calculate average rate
-        tokensPerSecond = recentRates.reduce((a, b) => a + b, 0) / recentRates.length;
-      }
-
-      logger.debug('Token usage updated', {
-        added: usage.total_tokens,
-        sessionTotal: newSessionTotal,
-        tokensPerSecond: tokensPerSecond.toFixed(1),
-      });
-
-      return {
-        sessionTotal: newSessionTotal,
-        sessionPrompt: newSessionPrompt,
-        sessionCompletion: newSessionCompletion,
-        lastRequestTokens: usage.prompt_tokens,
-        lastResponseTokens: usage.completion_tokens,
-        tokensPerSecond,
-        lastUpdateTime: Date.now(),
-        recentRates,
-      };
-    });
-  }, []);
-
-  const resetSession = useCallback(() => {
-    logger.debug('Token stats reset');
-    setStats(initialStats);
-  }, []);
-
-  return (
-    <TokenContext.Provider value={{ stats, addUsage, resetSession }}>
-      {children}
-    </TokenContext.Provider>
-  );
-};
-
-export const useTokenStats = (): TokenContextValue => {
-  const context = useContext(TokenContext);
-  if (!context) {
-    throw new Error('useTokenStats must be used within a TokenProvider');
-  }
-  return context;
-};
-
-/**
- * Format token count for display
- */
-export function formatTokenCount(tokens: number): string {
-  if (tokens < 1000) return tokens.toString();
-  if (tokens < 1000000) return `${(tokens / 1000).toFixed(1)}k`;
-  return `${(tokens / 1000000).toFixed(2)}M`;
-}
-
-/**
- * Format tokens per second
- */
-export function formatTokenRate(rate: number): string {
-  if (rate < 1) return `${(rate * 1000).toFixed(0)}ms/tok`;
-  return `${rate.toFixed(1)} tok/s`;
-}