otherwise-cli 0.1.0

package/src/ui/components/PromptInput.jsx

@@ -0,0 +1,515 @@
+/**
+ * PromptInput component
+ * Text input with @ detection, history, autocomplete, and multi-line support
+ * Uses a custom input implementation to avoid re-render issues with ink-text-input
+ */
+
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { FileType } from '../hooks/useFileAttachments.js';
+import { COMMANDS } from '../hooks/useCommands.js';
+
+/**
+ * Estimate token count from text (rough approximation)
+ * ~4 characters per token for English text
+ */
+function estimateTokens(text) {
+  if (!text) return 0;
+  return Math.ceil(text.length / 4);
+}
+
+/**
+ * Format token count for display
+ */
+function formatTokenEstimate(tokens) {
+  if (tokens < 1000) return `~${tokens} tokens`;
+  return `~${(tokens / 1000).toFixed(1)}k tokens`;
+}
+
+/**
+ * File chip display for attached files with animation
+ */
+export function FileChip({ file, onRemove, isNew = false }) {
+  const [highlight, setHighlight] = useState(isNew);
+  const icon = file.type === FileType.FOLDER ? '📁' : '📄';
+  const info = file.type === FileType.FOLDER 
+    ? `${file.fileCount} files`
+    : `${file.lineCount} lines`;
+  
+  // Flash effect for newly attached files
+  useEffect(() => {
+    if (!isNew) return;
+    const timer = setTimeout(() => setHighlight(false), 500);
+    return () => clearTimeout(timer);
+  }, [isNew]);
+  
+  const bgColor = highlight ? '#1e3a5f' : undefined;
+  
+  return (
+    <Box>
+      <Text color="#374151">├─ </Text>
+      <Text>{icon} </Text>
+      <Text color={highlight ? '#60a5fa' : '#06b6d4'} bold={highlight}>
+        {file.name || file.path.split('/').pop()}
+      </Text>
+      <Text dimColor> ({info})</Text>
+      {onRemove && (
+        <Text color="#6b7280"> ×</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * File chips container with summary
+ */
+export function FileChips({ files, onRemove }) {
+  if (!files || files.length === 0) return null;
+  
+  const totalLines = files.reduce((sum, f) => sum + (f.lineCount || 0), 0);
+  const tokenEstimate = files.reduce((sum, f) => {
+    return sum + estimateTokens(f.content || '');
+  }, 0);
+  
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="#374151">╭─ </Text>
+        <Text color="#06b6d4" bold>📎 Attached Context</Text>
+        <Text dimColor> ({files.length} item{files.length !== 1 ? 's' : ''}, {totalLines.toLocaleString()} lines)</Text>
+      </Box>
+      {files.map((file, index) => (
+        <FileChip 
+          key={file.path || index} 
+          file={file} 
+          onRemove={onRemove ? () => onRemove(file.path) : null}
+        />
+      ))}
+      <Box>
+        <Text color="#374151">╰─ </Text>
+        <Text dimColor>{formatTokenEstimate(tokenEstimate)}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Command autocomplete suggestions
+ * Memoized to prevent unnecessary re-renders
+ */
+const CommandAutocomplete = React.memo(function CommandAutocomplete({ input, onSelect }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  
+  const suggestions = useMemo(() => {
+    if (!input.startsWith('/') || input.length > 15) return [];
+    
+    const query = input.slice(1).toLowerCase();
+    
+    return Object.entries(COMMANDS)
+      .filter(([name, cmd]) => {
+        return name.startsWith(query) || 
+               cmd.aliases.some(a => a.startsWith(query));
+      })
+      .slice(0, 5)
+      .map(([name, cmd]) => ({
+        name,
+        usage: cmd.usage,
+        description: cmd.description,
+      }));
+  }, [input]);
+  
+  const hasSuggestions = suggestions.length > 0;
+  
+  // Only listen for input when there are suggestions
+  useInput((inp, key) => {
+    if (key.upArrow) {
+      setSelectedIndex(i => Math.max(0, i - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(i => Math.min(suggestions.length - 1, i + 1));
+    } else if (key.tab) {
+      onSelect?.(suggestions[selectedIndex]);
+    }
+  }, { isActive: hasSuggestions });
+  
+  if (!hasSuggestions) return null;
+  
+  return (
+    <Box flexDirection="column" marginLeft={5} marginBottom={1}>
+      <Box>
+        <Text color="#374151">╭─ </Text>
+        <Text dimColor>Commands</Text>
+      </Box>
+      {suggestions.map((cmd, i) => (
+        <Box key={cmd.name}>
+          <Text color="#374151">│ </Text>
+          <Text color={i === selectedIndex ? '#06b6d4' : '#6b7280'}>
+            {i === selectedIndex ? '❯ ' : '  '}
+          </Text>
+          <Text color={i === selectedIndex ? '#06b6d4' : '#9ca3af'} bold={i === selectedIndex}>
+            {cmd.usage}
+          </Text>
+          <Text dimColor> - {cmd.description}</Text>
+        </Box>
+      ))}
+      <Box>
+        <Text color="#374151">╰─ </Text>
+        <Text dimColor>Tab to complete</Text>
+      </Box>
+    </Box>
+  );
+});
+
+/**
+ * Input history hook
+ */
+export function useInputHistory(maxSize = 50) {
+  const [history, setHistory] = useState([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [tempInput, setTempInput] = useState('');
+  
+  const addToHistory = useCallback((input) => {
+    if (!input.trim()) return;
+    
+    setHistory(prev => {
+      // Remove duplicates and add to front
+      const filtered = prev.filter(h => h !== input);
+      return [input, ...filtered].slice(0, maxSize);
+    });
+    setHistoryIndex(-1);
+  }, [maxSize]);
+  
+  const navigateHistory = useCallback((direction, currentInput) => {
+    if (history.length === 0) return currentInput;
+    
+    let newIndex = historyIndex;
+    
+    if (direction === 'up') {
+      if (historyIndex === -1) {
+        setTempInput(currentInput);
+      }
+      newIndex = Math.min(historyIndex + 1, history.length - 1);
+    } else if (direction === 'down') {
+      newIndex = Math.max(historyIndex - 1, -1);
+    }
+    
+    setHistoryIndex(newIndex);
+    
+    if (newIndex === -1) {
+      return tempInput;
+    }
+    return history[newIndex];
+  }, [history, historyIndex, tempInput]);
+  
+  const resetNavigation = useCallback(() => {
+    setHistoryIndex(-1);
+    setTempInput('');
+  }, []);
+  
+  return {
+    history,
+    historyIndex,
+    addToHistory,
+    navigateHistory,
+    resetNavigation,
+    isNavigating: historyIndex !== -1,
+  };
+}
+
+/**
+ * Token estimate display
+ */
+export function TokenEstimate({ text, attachedFiles = [] }) {
+  const textTokens = estimateTokens(text);
+  const fileTokens = attachedFiles.reduce((sum, f) => {
+    return sum + estimateTokens(f.content || '');
+  }, 0);
+  const totalTokens = textTokens + fileTokens;
+  
+  if (totalTokens < 10) return null;
+  
+  // Color based on token count
+  let color = '#6b7280';
+  if (totalTokens > 4000) color = '#f59e0b';
+  if (totalTokens > 8000) color = '#ef4444';
+  
+  return (
+    <Box>
+      <Text color={color}>{formatTokenEstimate(totalTokens)}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Multi-line input indicator
+ */
+export function MultilineIndicator({ lineCount }) {
+  if (lineCount <= 1) return null;
+  
+  return (
+    <Box marginLeft={5}>
+      <Text dimColor>({lineCount} lines)</Text>
+    </Box>
+  );
+}
+
+/**
+ * Blinking cursor component
+ */
+function BlinkingCursor() {
+  const [visible, setVisible] = useState(true);
+  
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setVisible(v => !v);
+    }, 530); // Standard cursor blink rate
+    return () => clearInterval(timer);
+  }, []);
+  
+  return <Text color="#a855f7">{visible ? '▋' : ' '}</Text>;
+}
+
+/**
+ * Simple display component for the input value (no internal state updates)
+ */
+const InputDisplay = React.memo(function InputDisplay({ value, placeholder, showCursor }) {
+  return (
+    <Text>
+      {value ? (
+        <Text>{value}</Text>
+      ) : (
+        <Text dimColor>{placeholder}</Text>
+      )}
+      {showCursor && <BlinkingCursor />}
+    </Text>
+  );
+});
+
+/**
+ * Main prompt input component with history, autocomplete, and token estimation
+ * Uses a single useInput hook with batched updates to avoid re-render issues
+ */
+export const PromptInput = React.memo(function PromptInput({
+  onSubmit,
+  onAtTrigger,
+  placeholder = 'Type your message...',
+  disabled = false,
+  attachedFiles = [],
+  onDetachFile,
+  showTokenEstimate = true,
+  enableHistory = true,
+}) {
+  // Use ref for the actual input buffer to avoid re-renders on every keystroke
+  const inputBuffer = useRef('');
+  // Display value is updated less frequently (batched)
+  const [displayValue, setDisplayValue] = useState('');
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
+  const pendingUpdate = useRef(false);
+  
+  // Input history
+  const { 
+    addToHistory, 
+    navigateHistory, 
+    resetNavigation,
+    isNavigating,
+  } = useInputHistory();
+  
+  // Schedule a batched display update
+  const scheduleDisplayUpdate = useCallback(() => {
+    if (pendingUpdate.current) return;
+    pendingUpdate.current = true;
+    
+    // Batch updates to reduce re-renders
+    setTimeout(() => {
+      pendingUpdate.current = false;
+      const currentValue = inputBuffer.current;
+      setDisplayValue(currentValue);
+      // Update autocomplete state
+      setShowAutocomplete(currentValue.startsWith('/') && currentValue.length > 1);
+    }, 50); // ~20fps for display updates
+  }, []);
+  
+  // Handle command autocomplete selection
+  const handleAutocompleteSelect = useCallback((cmd) => {
+    // Complete to just the command name + space if it has arguments
+    // This way /model completes to "/model " not "/model [model-name]"
+    const hasArgs = cmd.usage.includes('[') || cmd.usage.includes('<');
+    const completedValue = hasArgs ? `/${cmd.name} ` : `/${cmd.name}`;
+    
+    inputBuffer.current = completedValue;
+    setDisplayValue(completedValue);
+    setShowAutocomplete(false);
+  }, []);
+  
+  // Single useInput hook for ALL keyboard handling
+  useInput((input, key) => {
+    if (disabled) return;
+    
+    // Submit on enter
+    if (key.return) {
+      const value = inputBuffer.current.trim();
+      if (!value) return;
+      
+      // Add to history
+      if (enableHistory) {
+        addToHistory(inputBuffer.current);
+      }
+      
+      onSubmit?.(inputBuffer.current);
+      inputBuffer.current = '';
+      setDisplayValue('');
+      setShowAutocomplete(false);
+      resetNavigation();
+      return;
+    }
+    
+    // History navigation with up/down arrows (only when autocomplete not showing)
+    if (enableHistory && !showAutocomplete && (key.upArrow || key.downArrow)) {
+      const direction = key.upArrow ? 'up' : 'down';
+      const newValue = navigateHistory(direction, inputBuffer.current);
+      inputBuffer.current = newValue;
+      setDisplayValue(newValue);
+      return;
+    }
+    
+    // Tab to trigger file picker (if not in autocomplete)
+    if (key.tab && !showAutocomplete && onAtTrigger) {
+      onAtTrigger();
+      return;
+    }
+    
+    // Escape to clear input
+    if (key.escape) {
+      inputBuffer.current = '';
+      setDisplayValue('');
+      setShowAutocomplete(false);
+      resetNavigation();
+      return;
+    }
+    
+    // Skip other control keys
+    if (key.ctrl || key.meta) {
+      return;
+    }
+    
+    // Backspace/delete
+    if (key.backspace || key.delete) {
+      if (inputBuffer.current.length > 0) {
+        inputBuffer.current = inputBuffer.current.slice(0, -1);
+        if (isNavigating) resetNavigation();
+        scheduleDisplayUpdate();
+      }
+      return;
+    }
+    
+    // Regular character input
+    if (input) {
+      // Check for @ trigger
+      if (input === '@' && onAtTrigger) {
+        onAtTrigger();
+        return;
+      }
+      
+      inputBuffer.current += input;
+      if (isNavigating) resetNavigation();
+      scheduleDisplayUpdate();
+    }
+  }, { isActive: !disabled });
+  
+  return (
+    <Box flexDirection="column">
+      {/* Attached files display - simplified */}
+      {attachedFiles.length > 0 && (
+        <Box marginBottom={1}>
+          <Text dimColor>📎 </Text>
+          {attachedFiles.map((f, i) => (
+            <Text key={f.path || i}>
+              <Text color="#06b6d4">{f.name || f.path.split('/').pop()}</Text>
+              {i < attachedFiles.length - 1 && <Text dimColor>, </Text>}
+            </Text>
+          ))}
+        </Box>
+      )}
+      
+      {/* Command autocomplete */}
+      {showAutocomplete && (
+        <CommandAutocomplete 
+          input={displayValue} 
+          onSelect={handleAutocompleteSelect}
+        />
+      )}
+      
+      {/* Simple input line */}
+      <Box>
+        <Text color="#a855f7" bold>❯ </Text>
+        {disabled ? (
+          <Box>
+            <Text dimColor>{placeholder}</Text>
+            {placeholder === 'Generating...' && (
+              <Text color="#6b7280"> (Ctrl+C to stop)</Text>
+            )}
+          </Box>
+        ) : (
+          <InputDisplay
+            value={displayValue}
+            placeholder={placeholder}
+            showCursor={true}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+/**
+ * Simple prompt with just "You: " prefix
+ */
+export function SimplePrompt({ children }) {
+  return (
+    <Box>
+      <Text color="#a855f7" bold>You: </Text>
+      {children}
+    </Box>
+  );
+}
+
+/**
+ * Typing indicator (for when AI is processing)
+ */
+export function TypingIndicator({ text = 'AI is thinking' }) {
+  const [dots, setDots] = useState(0);
+  
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDots(d => (d + 1) % 4);
+    }, 300);
+    return () => clearInterval(timer);
+  }, []);
+  
+  return (
+    <Box>
+      <Text dimColor>{text}</Text>
+      <Text dimColor>{'.'.repeat(dots)}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Quick action buttons hint
+ */
+export function QuickActions() {
+  return (
+    <Box marginTop={1}>
+      <Text color="#374151">[</Text>
+      <Text color="#06b6d4">Enter</Text>
+      <Text color="#374151">] send  [</Text>
+      <Text color="#06b6d4">@</Text>
+      <Text color="#374151">] attach  [</Text>
+      <Text color="#06b6d4">/help</Text>
+      <Text color="#374151">] commands  [</Text>
+      <Text color="#06b6d4">Ctrl+C</Text>
+      <Text color="#374151">] stop</Text>
+    </Box>
+  );
+}
+
+export default PromptInput;

package/src/ui/components/StreamingResponse.jsx

@@ -0,0 +1,134 @@
+/**
+ * StreamingResponse component
+ * Displays the current streaming response from the assistant
+ * This component updates live as new content arrives
+ * 
+ * Responsive: adapts text rendering to terminal width
+ */
+
+import React, { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { ThinkingIndicator, CompletedThinking } from './ThinkingIndicator.jsx';
+import { ToolExecution } from './ToolExecution.jsx';
+import { GenerationState } from '../hooks/useChatState.js';
+import { renderMarkdown } from '../utils/markdown.js';
+import { useTerminal } from '../context/TerminalContext.jsx';
+
+/**
+ * StreamingText component
+ * Displays streaming text content with assistant prefix
+ * Renders markdown for consistent formatting with completed messages
+ * Responsive: uses terminal width for markdown rendering
+ */
+export function StreamingText({ content, showPrefix = true }) {
+  const { textWidth } = useTerminal();
+  
+  if (!content) return null;
+  
+  // Render markdown for consistent display with completed messages
+  // Use textWidth from terminal context for responsive rendering
+  const rendered = useMemo(() => {
+    try {
+      return renderMarkdown(content, textWidth);
+    } catch {
+      return content;
+    }
+  }, [content, textWidth]);
+  
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {showPrefix && (
+        <Box>
+          <Text color="green" bold>Otherwise:</Text>
+        </Box>
+      )}
+      <Box marginLeft={0}>
+        <Text wrap="wrap">{rendered}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * StreamingResponse component
+ * Orchestrates the display of thinking, tools, and text
+ */
+export function StreamingResponse({
+  generationState,
+  thinkingContent,
+  thinkingStartTime,
+  streamingContent,
+  tools,
+  remoteSuffix = null,
+}) {
+  const isThinking = generationState === GenerationState.THINKING;
+  const isGenerating = generationState === GenerationState.GENERATING;
+  const isToolExecuting = generationState === GenerationState.TOOL_EXECUTING;
+  
+  // Nothing to show if idle
+  if (generationState === GenerationState.IDLE) {
+    return null;
+  }
+  
+  // Calculate thinking stats for completed thinking summary
+  const thinkingChars = thinkingContent?.length || 0;
+  const thinkingElapsed = thinkingStartTime ? Date.now() - thinkingStartTime : 0;
+  
+  // Determine if we should show completed thinking summary
+  // (show when we've moved past thinking to generating/tools)
+  const showThinkingSummary = !isThinking && thinkingChars > 0;
+  
+  // Get active tools
+  const activeTools = tools ? Object.values(tools) : [];
+  
+  return (
+    <Box flexDirection="column">
+      {/* Thinking indicator (shown during thinking phase) */}
+      {isThinking && (
+        <ThinkingIndicator
+          charCount={thinkingChars}
+          startTime={thinkingStartTime}
+          suffix={remoteSuffix}
+        />
+      )}
+      
+      {/* Completed thinking summary */}
+      {showThinkingSummary && (
+        <CompletedThinking charCount={thinkingChars} elapsed={thinkingElapsed} />
+      )}
+      
+      {/* Tool executions */}
+      {activeTools.length > 0 && (
+        <Box flexDirection="column">
+          {activeTools.map(tool => (
+            <ToolExecution key={tool.id} tool={tool} />
+          ))}
+        </Box>
+      )}
+      
+      {/* Streaming text content */}
+      {streamingContent && (
+        <StreamingText 
+          content={streamingContent} 
+          showPrefix={!isToolExecuting || activeTools.length === 0}
+        />
+      )}
+      
+      {/* Error state */}
+      {generationState === GenerationState.ERROR && (
+        <Box>
+          <Text color="red">✗ Generation error</Text>
+        </Box>
+      )}
+      
+      {/* Stopped state */}
+      {generationState === GenerationState.STOPPED && (
+        <Box>
+          <Text color="yellow">⚠ Generation stopped</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default StreamingResponse;