otherwise-cli 0.1.0

package/src/ui/components/ToolExecution.jsx

@@ -0,0 +1,714 @@
+/**
+ * ToolExecution components
+ * Display tool calls with their status, progress, and results
+ * Enhanced with animations, diff views, and compact/expanded modes
+ * 
+ * Responsive: adapts borders and content width to terminal size
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { 
+  getToolIcon, 
+  formatToolName, 
+  getPrimaryArg, 
+  isStreamingTool,
+  isHiddenTool,
+  formatDuration,
+  formatSize,
+  responsiveTruncate,
+} from '../utils/formatters.js';
+import { ToolState } from '../hooks/useChatState.js';
+import { useTerminal } from '../context/TerminalContext.jsx';
+
+/**
+ * Gradient colors for animated spinner
+ */
+const SPINNER_GRADIENT = ['#f59e0b', '#fbbf24', '#fcd34d', '#fbbf24'];
+
+/**
+ * Spinner frames
+ */
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+/**
+ * Animated tool status icon
+ */
+function ToolStatusIcon({ status, animate = true }) {
+  const [frame, setFrame] = useState(0);
+  const [colorIndex, setColorIndex] = useState(0);
+  const [successAnim, setSuccessAnim] = useState(0);
+  
+  const isRunning = status === ToolState.RUNNING || status === ToolState.STREAMING;
+  
+  // Spinner animation
+  useEffect(() => {
+    if (!isRunning || !animate) return;
+    
+    const spinTimer = setInterval(() => {
+      setFrame(f => (f + 1) % SPINNER_FRAMES.length);
+    }, 80);
+    
+    const colorTimer = setInterval(() => {
+      setColorIndex(c => (c + 1) % SPINNER_GRADIENT.length);
+    }, 150);
+    
+    return () => {
+      clearInterval(spinTimer);
+      clearInterval(colorTimer);
+    };
+  }, [isRunning, animate]);
+  
+  // Success animation (checkmark appears with brief highlight)
+  useEffect(() => {
+    if (status !== ToolState.COMPLETE) return;
+    
+    setSuccessAnim(0);
+    const steps = [1, 2, 3];
+    let step = 0;
+    
+    const timer = setInterval(() => {
+      if (step < steps.length) {
+        setSuccessAnim(steps[step]);
+        step++;
+      } else {
+        clearInterval(timer);
+      }
+    }, 100);
+    
+    return () => clearInterval(timer);
+  }, [status]);
+  
+  switch (status) {
+    case ToolState.RUNNING:
+    case ToolState.STREAMING:
+      return (
+        <Text color={SPINNER_GRADIENT[colorIndex]} bold>
+          {SPINNER_FRAMES[frame]}
+        </Text>
+      );
+    case ToolState.COMPLETE:
+      const successColor = successAnim < 3 ? '#4ade80' : '#22c55e';
+      return <Text color={successColor} bold>✓</Text>;
+    case ToolState.ERROR:
+      return <Text color="#ef4444" bold>✗</Text>;
+    case ToolState.PREPARING:
+      return <Text color="#f59e0b">◐</Text>;
+    default:
+      return <Text dimColor>○</Text>;
+  }
+}
+
+/**
+ * Tool header line (icon + name + path + status) with animation
+ * Responsive: truncates path based on available width
+ */
+export function ToolHeader({ name, args, status, duration, compact = false, maxArgWidth = null }) {
+  const icon = getToolIcon(name);
+  const displayName = formatToolName(name);
+  const rawPrimaryArg = getPrimaryArg(name, args);
+  
+  // Truncate argument based on max width if provided
+  const primaryArg = maxArgWidth && rawPrimaryArg 
+    ? responsiveTruncate(rawPrimaryArg, maxArgWidth)
+    : rawPrimaryArg;
+  
+  const isRunning = status === ToolState.RUNNING || status === ToolState.STREAMING;
+  
+  if (compact) {
+    return (
+      <Box>
+        <ToolStatusIcon status={status} />
+        <Text> {icon} </Text>
+        <Text color="#06b6d4">{displayName}</Text>
+        {duration != null && duration > 0 && <Text dimColor> {duration}ms</Text>}
+      </Box>
+    );
+  }
+  
+  return (
+    <Box>
+      <Text color="#374151">│</Text>
+      <Text> {icon} </Text>
+      <Text color="#06b6d4" bold>{displayName}</Text>
+      {primaryArg && (
+        <Text color="#9ca3af" wrap="truncate"> {primaryArg}</Text>
+      )}
+      <Text>  </Text>
+      <ToolStatusIcon status={status} />
+      {isRunning && isStreamingTool(name) && (
+        <Text color="#f59e0b"> writing...</Text>
+      )}
+      {duration && duration > 50 && (
+        <Text dimColor> {duration}ms</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Animated progress bar with gradient
+ */
+export function AnimatedProgressBar({ 
+  progress, // 0-100
+  width = 20, 
+  showPercent = true,
+  color = '#22c55e',
+  animate = true,
+}) {
+  const [shimmerOffset, setShimmerOffset] = useState(0);
+  
+  useEffect(() => {
+    if (!animate || progress >= 100) return;
+    
+    const timer = setInterval(() => {
+      setShimmerOffset(o => (o + 1) % width);
+    }, 100);
+    
+    return () => clearInterval(timer);
+  }, [animate, progress, width]);
+  
+  const filled = Math.round((progress / 100) * width);
+  const empty = width - filled;
+  
+  // Create bar with shimmer effect
+  const bar = [];
+  for (let i = 0; i < filled; i++) {
+    const isShimmer = animate && i === shimmerOffset && progress < 100;
+    bar.push(
+      <Text key={i} color={isShimmer ? '#86efac' : color}>█</Text>
+    );
+  }
+  for (let i = 0; i < empty; i++) {
+    bar.push(<Text key={filled + i} color="#374151">░</Text>);
+  }
+  
+  return (
+    <Box>
+      {bar}
+      {showPercent && (
+        <Text dimColor> {Math.round(progress)}%</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Streaming progress bar for file writes
+ */
+export function StreamingProgress({ content, maxWidth = 25, targetLines = 50 }) {
+  if (!content) return null;
+  
+  const lineCount = (content.match(/\n/g) || []).length + 1;
+  const progress = Math.min((lineCount / targetLines) * 100, 100);
+  
+  return (
+    <Box marginLeft={3}>
+      <Text color="#374151">├─ </Text>
+      <AnimatedProgressBar progress={progress} width={maxWidth} showPercent={false} />
+      <Text dimColor> {lineCount} lines</Text>
+    </Box>
+  );
+}
+
+/**
+ * File diff view for edit operations
+ */
+export function DiffView({ oldContent, newContent, maxLines = 10 }) {
+  const lines = useMemo(() => {
+    if (!oldContent && !newContent) return [];
+    
+    const oldLines = (oldContent || '').split('\n');
+    const newLines = (newContent || '').split('\n');
+    
+    const result = [];
+    const maxLen = Math.max(oldLines.length, newLines.length);
+    
+    for (let i = 0; i < Math.min(maxLen, maxLines); i++) {
+      const oldLine = oldLines[i];
+      const newLine = newLines[i];
+      
+      if (oldLine === newLine) {
+        result.push({ type: 'same', content: newLine || '' });
+      } else if (oldLine && !newLine) {
+        result.push({ type: 'removed', content: oldLine });
+      } else if (!oldLine && newLine) {
+        result.push({ type: 'added', content: newLine });
+      } else {
+        result.push({ type: 'removed', content: oldLine });
+        result.push({ type: 'added', content: newLine });
+      }
+    }
+    
+    if (maxLen > maxLines) {
+      result.push({ type: 'info', content: `... ${maxLen - maxLines} more lines` });
+    }
+    
+    return result;
+  }, [oldContent, newContent, maxLines]);
+  
+  return (
+    <Box flexDirection="column" marginLeft={3}>
+      {lines.map((line, i) => {
+        let prefix, color;
+        switch (line.type) {
+          case 'added':
+            prefix = '+';
+            color = '#22c55e';
+            break;
+          case 'removed':
+            prefix = '-';
+            color = '#ef4444';
+            break;
+          case 'info':
+            prefix = ' ';
+            color = '#6b7280';
+            break;
+          default:
+            prefix = ' ';
+            color = '#9ca3af';
+        }
+        
+        return (
+          <Box key={i}>
+            <Text color={color}>{prefix} {line.content}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/**
+ * Directory tree view for list_dir results
+ */
+export function DirectoryTree({ items, maxItems = 15 }) {
+  if (!items || !Array.isArray(items)) return null;
+  
+  const displayItems = items.slice(0, maxItems);
+  const hasMore = items.length > maxItems;
+  
+  return (
+    <Box flexDirection="column" marginLeft={3}>
+      {displayItems.map((item, i) => {
+        const isLast = i === displayItems.length - 1 && !hasMore;
+        const prefix = isLast ? '└─' : '├─';
+        const icon = item.isDirectory ? '📁' : '📄';
+        const color = item.isDirectory ? '#fbbf24' : '#9ca3af';
+        
+        return (
+          <Box key={i}>
+            <Text color="#374151">{prefix} </Text>
+            <Text>{icon} </Text>
+            <Text color={color}>{item.name}</Text>
+            {item.size != null && item.size > 0 && !item.isDirectory && (
+              <Text dimColor> ({formatSize(item.size)})</Text>
+            )}
+          </Box>
+        );
+      })}
+      {hasMore && (
+        <Box>
+          <Text color="#374151">└─ </Text>
+          <Text dimColor>... {items.length - maxItems} more items</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Shell output with syntax highlighting
+ */
+export function ShellOutput({ output, exitCode, maxLines = 15 }) {
+  const lines = (output || '').split('\n').filter(l => l.trim());
+  const displayLines = lines.slice(0, maxLines);
+  const hasMore = lines.length > maxLines;
+  
+  const isError = exitCode && exitCode !== 0;
+  
+  return (
+    <Box flexDirection="column" marginLeft={3}>
+      {displayLines.map((line, i) => {
+        // Highlight errors
+        const isErrorLine = line.toLowerCase().includes('error') || 
+                           line.toLowerCase().includes('failed') ||
+                           line.startsWith('!');
+        
+        return (
+          <Box key={i}>
+            <Text color="#374151">│ </Text>
+            <Text color={isErrorLine ? '#ef4444' : '#9ca3af'}>{line}</Text>
+          </Box>
+        );
+      })}
+      {hasMore && (
+        <Box>
+          <Text color="#374151">│ </Text>
+          <Text dimColor>... {lines.length - maxLines} more lines</Text>
+        </Box>
+      )}
+      {exitCode !== undefined && (
+        <Box>
+          <Text color="#374151">└─ </Text>
+          <Text color={isError ? '#ef4444' : '#22c55e'}>
+            exit {exitCode}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Tool result display with intelligent formatting
+ */
+export function ToolResult({ name, result, maxLines = 10, expanded = false }) {
+  const [isExpanded, setIsExpanded] = useState(expanded);
+  
+  if (!result) {
+    return (
+      <Box marginLeft={3}>
+        <Text color="#374151">└─ </Text>
+        <Text dimColor>(no output)</Text>
+      </Box>
+    );
+  }
+  
+  // Handle specific tool types
+  if (name === 'list_dir' || name === 'list_directory' || name === 'read_dir') {
+    if (Array.isArray(result) || (result.items && Array.isArray(result.items))) {
+      return <DirectoryTree items={result.items || result} maxItems={maxLines} />;
+    }
+  }
+  
+  if (name === 'shell' || name === 'run_command' || name === 'execute_command') {
+    return <ShellOutput output={result.output || result} exitCode={result.exitCode} maxLines={maxLines} />;
+  }
+  
+  // Handle string results
+  if (typeof result === 'string') {
+    const lines = result.split('\n');
+    const displayLines = isExpanded ? lines : lines.slice(0, maxLines);
+    const hasMore = lines.length > maxLines;
+    
+    return (
+      <Box flexDirection="column" marginLeft={3}>
+        {displayLines.map((line, i) => {
+          const isLast = i === displayLines.length - 1 && !hasMore;
+          return (
+            <Box key={i}>
+              <Text color="#374151">{isLast ? '└─' : '├─'} </Text>
+              <Text color="#9ca3af">{line}</Text>
+            </Box>
+          );
+        })}
+        {hasMore && !isExpanded && (
+          <Box>
+            <Text color="#374151">└─ </Text>
+            <Text dimColor>... {lines.length - maxLines} more lines</Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+  
+  // Handle object results
+  if (typeof result === 'object') {
+    if (result.error) {
+      return (
+        <Box marginLeft={3}>
+          <Text color="#374151">└─ </Text>
+          <Text color="#ef4444">Error: {result.error}</Text>
+        </Box>
+      );
+    }
+    
+    if (result.success !== undefined) {
+      return (
+        <Box marginLeft={3}>
+          <Text color="#374151">└─ </Text>
+          <Text color={result.success ? '#22c55e' : '#ef4444'}>
+            {result.success ? '✓ Success' : '✗ Failed'}
+          </Text>
+          {result.message && <Text color="#9ca3af">: {result.message}</Text>}
+        </Box>
+      );
+    }
+    
+    // Handle file content
+    if (result.content !== undefined) {
+      const lines = result.content.split('\n');
+      const displayLines = lines.slice(0, maxLines);
+      
+      return (
+        <Box flexDirection="column" marginLeft={3}>
+          {result.path && (
+            <Box>
+              <Text color="#374151">├─ </Text>
+              <Text dimColor>{result.path}</Text>
+              {result.lineCount != null && result.lineCount > 0 && <Text dimColor> ({result.lineCount} lines)</Text>}
+            </Box>
+          )}
+          {displayLines.map((line, i) => {
+            const lineNum = String(i + 1).padStart(3, ' ');
+            return (
+              <Box key={i}>
+                <Text color="#374151">│ </Text>
+                <Text color="#4b5563">{lineNum} │ </Text>
+                <Text color="#9ca3af">{line}</Text>
+              </Box>
+            );
+          })}
+          {lines.length > maxLines && (
+            <Box>
+              <Text color="#374151">└─ </Text>
+              <Text dimColor>... {lines.length - maxLines} more lines</Text>
+            </Box>
+          )}
+        </Box>
+      );
+    }
+    
+    // Generic object display
+    const json = JSON.stringify(result, null, 2);
+    const lines = json.split('\n').slice(0, maxLines);
+    
+    return (
+      <Box flexDirection="column" marginLeft={3}>
+        {lines.map((line, i) => (
+          <Box key={i}>
+            <Text color="#374151">{i === lines.length - 1 ? '└─' : '├─'} </Text>
+            <Text color="#9ca3af">{line}</Text>
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+  
+  return null;
+}
+
+/**
+ * Tool error display with styling
+ */
+export function ToolError({ error, suggestion = '' }) {
+  const errorMsg = error?.startsWith?.('Error:') 
+    ? error.slice(6).trim() 
+    : error;
+  
+  return (
+    <Box flexDirection="column" marginLeft={3}>
+      <Box>
+        <Text color="#374151">└─ </Text>
+        <Text color="#ef4444" bold>✗ </Text>
+        <Text color="#ef4444">{errorMsg}</Text>
+      </Box>
+      {suggestion && (
+        <Box marginLeft={3}>
+          <Text dimColor>💡 {suggestion}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Collapsible tool execution component
+ */
+export function CollapsibleToolExecution({ tool, defaultExpanded = true }) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  
+  // Skip hidden tools
+  if (isHiddenTool(tool.name)) {
+    return null;
+  }
+  
+  const duration = tool.endTime && tool.startTime 
+    ? tool.endTime - tool.startTime 
+    : null;
+  
+  const isStreaming = tool.status === ToolState.STREAMING;
+  const isComplete = tool.status === ToolState.COMPLETE;
+  const hasError = tool.status === ToolState.ERROR;
+  const hasOutput = isComplete && tool.result;
+  
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="#374151">{isExpanded ? '▼' : '▶'} </Text>
+        <ToolHeader 
+          name={tool.name}
+          args={tool.args}
+          status={tool.status}
+          duration={isComplete ? duration : null}
+          compact={!isExpanded}
+        />
+      </Box>
+      
+      {isExpanded && (
+        <>
+          {/* Streaming progress for file writes */}
+          {isStreaming && isStreamingTool(tool.name) && (
+            <StreamingProgress content={tool.streamingContent} />
+          )}
+          
+          {/* Result display */}
+          {hasOutput && (
+            <ToolResult name={tool.name} result={tool.result} />
+          )}
+          
+          {/* Error display */}
+          {hasError && tool.error && (
+            <ToolError error={tool.error} />
+          )}
+        </>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Complete tool execution component
+ * Responsive: adapts border width and content to terminal size
+ */
+export function ToolExecution({ tool, compact = false, showBorder = true }) {
+  const { uiWidth, contentWidth, isNarrow, useCompactMode } = useTerminal();
+  
+  // Skip hidden tools
+  if (isHiddenTool(tool.name)) {
+    return null;
+  }
+  
+  const duration = tool.endTime && tool.startTime 
+    ? tool.endTime - tool.startTime 
+    : null;
+  
+  const isStreaming = tool.status === ToolState.STREAMING;
+  const isComplete = tool.status === ToolState.COMPLETE;
+  const hasError = tool.status === ToolState.ERROR;
+  
+  // Use compact mode on very narrow terminals or when explicitly requested
+  if (compact || useCompactMode) {
+    return (
+      <Box>
+        <ToolHeader 
+          name={tool.name}
+          args={tool.args}
+          status={tool.status}
+          duration={isComplete ? duration : null}
+          compact={true}
+        />
+      </Box>
+    );
+  }
+  
+  // Calculate responsive border width
+  const borderWidth = Math.min(uiWidth, 50);
+  
+  // Calculate max arg width (leave room for icon, name, status)
+  const maxArgWidth = isNarrow ? 20 : Math.max(20, contentWidth - 40);
+  
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {showBorder && (
+        <Box>
+          <Text color="#374151">┌{'─'.repeat(borderWidth)}</Text>
+        </Box>
+      )}
+      
+      <ToolHeader 
+        name={tool.name}
+        args={tool.args}
+        status={tool.status}
+        duration={isComplete ? duration : null}
+        maxArgWidth={maxArgWidth}
+      />
+      
+      {/* Streaming progress for file writes */}
+      {isStreaming && isStreamingTool(tool.name) && (
+        <StreamingProgress content={tool.streamingContent} maxWidth={Math.min(25, borderWidth - 10)} />
+      )}
+      
+      {/* Result display */}
+      {isComplete && tool.result && (
+        <ToolResult name={tool.name} result={tool.result} maxLines={isNarrow ? 5 : 10} />
+      )}
+      
+      {/* Error display */}
+      {hasError && tool.error && (
+        <ToolError error={tool.error} />
+      )}
+      
+      {showBorder && (
+        <Box>
+          <Text color="#374151">└{'─'.repeat(borderWidth)}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Tool list summary with icons
+ */
+export function ToolSummary({ tools, showDetails = false }) {
+  const toolList = Object.values(tools);
+  if (toolList.length === 0) return null;
+  
+  const completed = toolList.filter(t => t.status === ToolState.COMPLETE).length;
+  const errored = toolList.filter(t => t.status === ToolState.ERROR).length;
+  const running = toolList.filter(t => t.status === ToolState.RUNNING || t.status === ToolState.STREAMING).length;
+  
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text dimColor>🔧 </Text>
+        <Text color="#9ca3af">
+          {toolList.length} tool{toolList.length !== 1 ? 's' : ''}
+        </Text>
+        {completed > 0 && (
+          <Text color="#22c55e"> ({completed} ✓)</Text>
+        )}
+        {running > 0 && (
+          <Text color="#f59e0b"> ({running} running)</Text>
+        )}
+        {errored > 0 && (
+          <Text color="#ef4444"> ({errored} failed)</Text>
+        )}
+      </Box>
+      
+      {showDetails && (
+        <Box flexDirection="column" marginLeft={3}>
+          {toolList.map((tool, i) => (
+            <Box key={tool.id || i}>
+              <ToolStatusIcon status={tool.status} />
+              <Text dimColor> {getToolIcon(tool.name)} {formatToolName(tool.name)}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Compact tool list (all on one line)
+ */
+export function CompactToolList({ tools }) {
+  const toolList = Object.values(tools);
+  if (toolList.length === 0) return null;
+  
+  return (
+    <Box>
+      {toolList.map((tool, i) => (
+        <Box key={tool.id || i} marginRight={1}>
+          <ToolStatusIcon status={tool.status} />
+          <Text> {getToolIcon(tool.name)}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export default ToolExecution;