otherwise-cli 0.1.0

package/src/ui/components/App.jsx

@@ -0,0 +1,687 @@
+/**
+ * App component - Root component for the Ink-based CLI
+ * Clean, minimal design with fixed header
+ * 
+ * Features responsive rendering that adapts to terminal window size changes
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import open from 'open';
+
+// Components
+import { MessageList, GenerationStats } from './MessageList.jsx';
+import { StreamingResponse } from './StreamingResponse.jsx';
+import { PromptInput } from './PromptInput.jsx';
+import { FilePicker } from './FilePicker.jsx';
+import { ModelSelector } from './ModelSelector.jsx';
+import { HelpPanel } from './HelpPanel.jsx';
+import { HistoryPanel } from './HistoryPanel.jsx';
+import { BrowserSelect } from './BrowserSelect.jsx';
+// ThinkingIndicator components used in StreamingResponse
+
+// Hooks
+import { useWebSocket, ConnectionState } from '../hooks/useWebSocket.js';
+import { useChatState, GenerationState } from '../hooks/useChatState.js';
+import { useFileAttachments } from '../hooks/useFileAttachments.js';
+import { useCommands, CommandAction } from '../hooks/useCommands.js';
+import { useNotifications, notifyGenerationComplete } from '../hooks/useNotifications.js';
+
+// Context for responsive terminal rendering
+import { TerminalProvider, useTerminal } from '../context/TerminalContext.jsx';
+
+// Utils
+import { config } from '../../config.js';
+import { getFriendlyModelName } from '../utils/formatters.js';
+
+/**
+ * View states for the app
+ */
+const View = {
+  CHAT: 'chat',
+  FILE_PICKER: 'file_picker',
+  MODEL_SELECTOR: 'model_selector',
+  HELP: 'help',
+  HISTORY: 'history',
+  BROWSER_SELECT: 'browser_select',
+};
+
+/**
+ * Fixed header component - always visible at top
+ * Uses simple text instead of Box borders to avoid Ink re-render bugs
+ * Responsive: adapts to narrow terminals by hiding less important info
+ */
+const FixedHeader = React.memo(function FixedHeader({ chatTitle, chatId, model, connectionState, serverUrl, isRemoteMode }) {
+  const { isNarrow, useCompactMode } = useTerminal();
+  const modelName = getFriendlyModelName(model);
+  const isConnected = connectionState === ConnectionState.CONNECTED;
+  const isConnecting = connectionState === ConnectionState.CONNECTING;
+  
+  // Determine model icon
+  let modelIcon = '🤖';
+  if (model?.includes('claude')) modelIcon = '🟣';
+  else if (model?.includes('gpt') || model?.includes('o1') || model?.includes('o3')) modelIcon = '🟢';
+  else if (model?.includes('gemini')) modelIcon = '🔵';
+  else if (model?.includes('grok')) modelIcon = '⚫';
+  else if (model?.includes('llama') || model?.includes('ollama')) modelIcon = '🦙';
+  
+  const title = chatTitle || (chatId ? `Chat #${chatId}` : '✨ New Chat');
+  const statusColor = isConnected ? '#22c55e' : (isConnecting ? '#f59e0b' : '#ef4444');
+  
+  // Compact status for narrow terminals
+  const statusText = useCompactMode 
+    ? (isConnected ? '●' : '○')
+    : (isConnecting ? '◐ Connecting' : (isConnected ? '● Connected' : '○ Disconnected'));
+  
+  // Very compact mode: just title and status dot
+  if (useCompactMode) {
+    return (
+      <Box marginBottom={1}>
+        <Text color="#06b6d4" bold wrap="truncate">{title}</Text>
+        {isRemoteMode && <Text dimColor> </Text>}
+        {isRemoteMode && <Text color="#f59e0b">Remote</Text>}
+        <Text dimColor> </Text>
+        <Text color={statusColor}>{statusText}</Text>
+      </Box>
+    );
+  }
+  
+  // Narrow mode: hide model name, keep icon
+  if (isNarrow) {
+    return (
+      <Box marginBottom={1}>
+        <Text color="#06b6d4" bold wrap="truncate">{title}</Text>
+        {isRemoteMode && <Text dimColor>  </Text>}
+        {isRemoteMode && <Text color="#f59e0b">Remote</Text>}
+        <Text dimColor>  </Text>
+        <Text>{modelIcon}</Text>
+        <Text dimColor>  </Text>
+        <Text color={statusColor}>{statusText}</Text>
+      </Box>
+    );
+  }
+  
+  // Full header for normal/wide terminals
+  return (
+    <Box marginBottom={1}>
+      <Text color="#06b6d4" bold>{title}</Text>
+      {isRemoteMode && <Text dimColor>  ·  </Text>}
+      {isRemoteMode && <Text color="#f59e0b">Remote</Text>}
+      <Text dimColor>  ·  </Text>
+      <Text>{modelIcon} </Text>
+      <Text color="#a855f7">{modelName}</Text>
+      <Text dimColor>  ·  </Text>
+      <Text color={statusColor}>{statusText}</Text>
+    </Box>
+  );
+});
+
+/**
+ * Simple welcome/tips shown on empty chat
+ * Memoized to prevent re-renders
+ */
+const QuickTips = React.memo(function QuickTips() {
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      <Text dimColor>
+        Type a message to start • <Text color="#06b6d4">@</Text> attach files • <Text color="#06b6d4">/help</Text> commands
+      </Text>
+    </Box>
+  );
+});
+
+/**
+ * Status toast component
+ * Memoized to prevent re-renders
+ */
+const StatusToast = React.memo(function StatusToast({ message, type }) {
+  if (!message) return null;
+  
+  const colors = {
+    success: '#22c55e',
+    error: '#ef4444',
+    info: '#3b82f6',
+  };
+  const icons = {
+    success: '✓',
+    error: '✗',
+    info: 'ℹ',
+  };
+  
+  return (
+    <Box marginY={1}>
+      <Text color={colors[type] || colors.info}>
+        {icons[type] || icons.info} {message}
+      </Text>
+    </Box>
+  );
+});
+
+/**
+ * Inner App component - contains all app logic
+ * Wrapped by AppWithProvider to ensure TerminalProvider context is available
+ */
+function AppInner({ serverUrl = 'http://localhost:3000', showBanner = true, isRemoteMode = false }) {
+  const { exit } = useApp();
+  const { contentWidth, useCompactMode } = useTerminal();
+  
+  // View state
+  const [currentView, setCurrentView] = useState(View.CHAT);
+  const [statusMessage, setStatusMessage] = useState(null);
+  const [statusType, setStatusType] = useState('info');
+
+  // Show browser selection on first load when not configured (CLI TUI only)
+  const hasCheckedBrowserRef = React.useRef(false);
+  useEffect(() => {
+    if (hasCheckedBrowserRef.current) return;
+    hasCheckedBrowserRef.current = true;
+    const channel = config.get('browserChannel');
+    if (channel == null || channel === '') {
+      setCurrentView(View.BROWSER_SELECT);
+    }
+  }, []);
+  
+  // Generation tracking for notifications
+  const generationStartTime = useRef(null);
+  
+  // Initialize hooks
+  const chatState = useChatState({
+    initialModel: config.get('model') || 'claude-sonnet-4-20250514',
+  });
+  
+  const fileAttachments = useFileAttachments(serverUrl);
+  const commands = useCommands();
+  const notifications = useNotifications({
+    enabled: true,
+    minDuration: 30000,
+  });
+  
+  // When remote frontend selects a chat, try to load it from local server (if it exists)
+  const loadChatByIdIfExists = useCallback((chatId) => {
+    if (!chatId) return;
+    fetch(`${serverUrl}/api/chats/${chatId}`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((chat) => {
+        if (chat && !chat.error && chatState.loadChat) {
+          chatState.loadChat({
+            id: chat.id,
+            title: chat.title,
+            messages: (chat.messages || []).map((m) => ({
+              id: m.id,
+              role: m.role,
+              content: m.content,
+              timestamp: m.created_at || m.timestamp,
+            })),
+          });
+        }
+      })
+      .catch(() => {});
+  }, [serverUrl, chatState.loadChat]);
+
+  // WebSocket connection with message handling
+  const ws = useWebSocket(serverUrl, {
+    autoConnect: true,
+    autoReconnect: true,
+    onMessage: useCallback((message) => {
+      chatState.processMessage(message);
+      if (message.type === 'chat_selected' && message.chatId != null) {
+        loadChatByIdIfExists(message.chatId);
+      }
+      // Track generation completion for notifications
+      if (message.type === 'done' && generationStartTime.current) {
+        const duration = Date.now() - generationStartTime.current;
+        notifyGenerationComplete(message, duration, notifications.notify);
+        generationStartTime.current = null;
+      }
+    }, [chatState.processMessage, loadChatByIdIfExists, notifications.notify]),
+    onConnect: useCallback(() => {
+      // Silent - header shows connection status
+    }, []),
+    onDisconnect: useCallback(() => {
+      // Silent - header shows connection status
+      // Only show error if we were actively generating
+    }, []),
+    onError: useCallback(() => {
+      // Silent - connection issues handled by auto-reconnect
+    }, []),
+  });
+  
+  // Helper to show status messages
+  const showStatus = useCallback((message, type = 'info') => {
+    setStatusMessage(message);
+    setStatusType(type);
+  }, []);
+  
+  // Clear status message after delay
+  useEffect(() => {
+    if (statusMessage) {
+      const timer = setTimeout(() => setStatusMessage(null), 2500);
+      return () => clearTimeout(timer);
+    }
+  }, [statusMessage]);
+  
+  // Handle sending a message
+  const handleSendMessage = useCallback(async (content) => {
+    if (!ws.isConnected) {
+      showStatus('Not connected to server', 'error');
+      return;
+    }
+    
+    if (chatState.isGenerating) {
+      showStatus('Already generating. Press Ctrl+C to stop.', 'info');
+      return;
+    }
+    
+    // Check for commands
+    if (commands.isCommand(content)) {
+      const { command, args } = commands.parse(content);
+      const result = commands.execute(command, args);
+      
+      await handleCommandResult(result);
+      return;
+    }
+    
+    // Prepend pending RAG mention if there is one
+    let messageContent = content;
+    if (pendingRagMention) {
+      // Only prepend if not already mentioned in the content
+      if (!content.toLowerCase().includes(`@${pendingRagMention.toLowerCase()}`)) {
+        messageContent = `@${pendingRagMention} ${content}`;
+      }
+      setPendingRagMention(null); // Clear the pending mention
+    }
+    
+    // Build message with file context
+    const fileContext = fileAttachments.buildContext();
+    const fullContent = fileContext 
+      ? `${messageContent}\n\n--- Attached Files/Folders ---\n${fileContext}`
+      : messageContent;
+    
+    // Add user message to display (with RAG mention if applicable)
+    chatState.addUserMessage(messageContent);
+    
+    // Track generation start time for notifications
+    generationStartTime.current = Date.now();
+    notifications.startTask('generation');
+    
+    // Start generation
+    chatState.startGeneration();
+    
+    // Send via WebSocket
+    const success = ws.sendChatMessage({
+      chatId: chatState.currentChatId,
+      content: fullContent,
+      model: chatState.currentModel,
+      systemMessage: config.get('systemMessage') || '',
+      maxTokens: config.get('maxTokens') || 8192,
+    });
+    
+    if (!success) {
+      showStatus('Failed to send message', 'error');
+      chatState.handleError('Failed to send message');
+      generationStartTime.current = null;
+    }
+    
+    // Clear file attachments after sending
+    fileAttachments.clear();
+  }, [ws, chatState, fileAttachments, commands, notifications, showStatus]);
+  
+  // Handle command results
+  const handleCommandResult = useCallback(async (result) => {
+    switch (result.action) {
+      case CommandAction.EXIT:
+        exit();
+        break;
+      
+      case CommandAction.NEW_CHAT:
+        // Clear the terminal screen
+        process.stdout.write('\x1b[2J\x1b[H');
+        chatState.newChat();
+        ws.selectChat(null);
+        break;
+      
+      case CommandAction.SHOW_HELP:
+        setCurrentView(View.HELP);
+        break;
+      
+      case CommandAction.SHOW_HISTORY:
+        setCurrentView(View.HISTORY);
+        break;
+      
+      case CommandAction.OPEN_FILE_PICKER:
+        setCurrentView(View.FILE_PICKER);
+        break;
+      
+      case CommandAction.OPEN_MODEL_SELECTOR:
+        setCurrentView(View.MODEL_SELECTOR);
+        break;
+      
+      case CommandAction.OPEN_BROWSER_SELECT:
+        setCurrentView(View.BROWSER_SELECT);
+        break;
+      
+      case CommandAction.CLEAR_FILES:
+        fileAttachments.clear();
+        showStatus('Files cleared', 'success');
+        break;
+      
+      case CommandAction.SET_MODEL:
+        if (result.data?.modelName) {
+          chatState.setCurrentModel(result.data.modelName);
+          config.set('model', result.data.modelName);
+          // Broadcast model change to other clients
+          ws.send({ type: 'select_model', model: result.data.modelName });
+          showStatus(`Model: ${result.data.modelName}`, 'success');
+        }
+        break;
+      
+      case CommandAction.OPEN_BROWSER:
+        try {
+          const chatId = chatState.currentChatId;
+          const url = chatId
+            ? `${serverUrl}?chat=${encodeURIComponent(String(chatId))}`
+            : serverUrl;
+          await open(url);
+          showStatus(chatId ? 'Opened browser to current chat' : 'Opened browser', 'success');
+        } catch (err) {
+          showStatus('Failed to open browser', 'error');
+        }
+        break;
+      
+      case CommandAction.CLEAR_SCREEN:
+        setStatusMessage(null);
+        break;
+      
+      case CommandAction.SHOW_STATUS:
+        showStatus(`${serverUrl}`, 'info');
+        break;
+      
+      case CommandAction.UNKNOWN:
+        if (result.error) {
+          showStatus(result.error, 'error');
+        }
+        break;
+      
+      default:
+        if (result.error) {
+          showStatus(result.error, 'error');
+        }
+    }
+  }, [chatState, fileAttachments, ws, serverUrl, exit, showStatus]);
+  
+  // Store pending RAG mention to add to next message
+  const [pendingRagMention, setPendingRagMention] = useState(null);
+  
+  // Handle file selection from picker
+  const handleFileSelect = useCallback(async (selection) => {
+    setCurrentView(View.CHAT);
+    
+    // Clear the terminal screen for a fresh start
+    process.stdout.write('\x1b[2J\x1b[H');
+    
+    // Handle RAG document selection
+    if (selection.isRagDocument) {
+      setPendingRagMention(selection.name);
+      showStatus(`📚 @${selection.name} ready - type your question`, 'success');
+      return;
+    }
+    
+    if (selection.isFolder) {
+      // Remove trailing slash if present for consistent path handling
+      const folderPath = selection.path.replace(/\/$/, '');
+      const result = await fileAttachments.attachFolder(folderPath);
+      if (result) {
+        const stats = `${result.fileCount} files, ${result.lineCount?.toLocaleString() || 0} lines`;
+        showStatus(`📁 Attached: ${result.name}/ (${stats})`, 'success');
+      } else {
+        showStatus(`Failed to attach folder: ${selection.path}`, 'error');
+      }
+    } else {
+      const result = await fileAttachments.attachFile(selection.path);
+      if (result) {
+        showStatus(`📄 Attached: ${result.name} (${result.lineCount?.toLocaleString() || 0} lines)`, 'success');
+      } else {
+        showStatus(`Failed to attach file: ${selection.path}`, 'error');
+      }
+    }
+  }, [fileAttachments, showStatus]);
+  
+  // Handle model selection
+  const handleModelSelect = useCallback((model) => {
+    setCurrentView(View.CHAT);
+    chatState.setCurrentModel(model.id);
+    config.set('model', model.id);
+    // Broadcast model change to other clients
+    ws.send({ type: 'select_model', model: model.id });
+    setStatusMessage(`Switched to ${model.name}`);
+  }, [chatState, ws]);
+  
+  // Handle @ trigger for file picker
+  const handleAtTrigger = useCallback(() => {
+    setCurrentView(View.FILE_PICKER);
+  }, []);
+  
+  // Global keyboard shortcuts
+  useInput((input, key) => {
+    // Ctrl+C to stop generation or exit
+    if (key.ctrl && input === 'c') {
+      if (chatState.isGenerating) {
+        // Send stop to server (with or without chatId)
+        const success = ws.sendStop(chatState.currentChatId);
+        if (success) {
+          showStatus('Stopping...', 'info');
+        } else {
+          // If WebSocket send failed, manually reset state
+          showStatus('Stopped', 'info');
+        }
+      } else {
+        // Not generating - exit the app
+        exit();
+      }
+      return;
+    }
+    
+    // Ctrl+D to always exit
+    if (key.ctrl && input === 'd') {
+      exit();
+      return;
+    }
+    
+    // Escape to close overlays or stop generation
+    if (key.escape) {
+      if (chatState.isGenerating) {
+        // Escape also stops generation
+        ws.sendStop(chatState.currentChatId);
+        showStatus('Stopping...', 'info');
+      } else if (currentView !== View.CHAT) {
+        setCurrentView(View.CHAT);
+      }
+      return;
+    }
+  });
+  
+  // Determine if input should be disabled
+  const inputDisabled = chatState.isGenerating || currentView !== View.CHAT;
+  
+  // Memoize message list to prevent re-renders during typing
+  const messageListMemo = useMemo(() => (
+    <MessageList messages={chatState.messages} />
+  ), [chatState.messages]);
+  
+  // Memoize streaming response
+  const streamingResponseMemo = useMemo(() => (
+    <StreamingResponse
+      generationState={chatState.generationState}
+      thinkingContent={chatState.thinkingContent}
+      thinkingStartTime={chatState.thinkingStartTime}
+      streamingContent={chatState.streamingContent}
+      tools={chatState.tools}
+    />
+  ), [chatState.generationState, chatState.thinkingContent, chatState.thinkingStartTime, chatState.streamingContent, chatState.tools]);
+  
+  // Memoize stats display
+  const statsDisplay = useMemo(() => {
+    if (chatState.lastStats && chatState.generationState === GenerationState.IDLE) {
+      return <GenerationStats stats={chatState.lastStats} />;
+    }
+    return null;
+  }, [chatState.lastStats, chatState.generationState]);
+  
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {/* Fixed header - always visible */}
+      <FixedHeader
+        chatTitle={chatState.currentChatTitle}
+        chatId={chatState.currentChatId}
+        model={chatState.currentModel}
+        connectionState={ws.connectionState}
+        serverUrl={serverUrl}
+        isRemoteMode={isRemoteMode}
+      />
+      
+      {/* Status toast */}
+      <StatusToast message={statusMessage} type={statusType} />
+      
+      {/* Main content area */}
+      {currentView === View.CHAT && (
+        <Box flexDirection="column" flexGrow={1}>
+          {/* Quick tips for empty chat */}
+          {chatState.messages.length === 0 && !chatState.isGenerating && (
+            <QuickTips />
+          )}
+          
+          {/* Message history */}
+          {messageListMemo}
+          
+          {/* Streaming response */}
+          {streamingResponseMemo}
+          
+          {/* Stats after generation */}
+          {statsDisplay}
+          
+          {/* Pending RAG mention indicator */}
+          {pendingRagMention && (
+            <Box marginTop={1}>
+              <Text color="#10b981">📚 @{pendingRagMention}</Text>
+              <Text dimColor> will be added to your message</Text>
+            </Box>
+          )}
+          
+          {/* Input area */}
+          <Box marginTop={1}>
+            <PromptInput
+              onSubmit={handleSendMessage}
+              onAtTrigger={handleAtTrigger}
+              disabled={inputDisabled}
+              attachedFiles={fileAttachments.files}
+              onDetachFile={fileAttachments.detach}
+              placeholder={chatState.isGenerating ? 'Generating...' : (pendingRagMention ? `Ask about @${pendingRagMention}...` : '')}
+              showTokenEstimate={false}
+              enableHistory={true}
+            />
+          </Box>
+        </Box>
+      )}
+      
+      {/* File picker overlay */}
+      {currentView === View.FILE_PICKER && (
+        <FilePicker
+          serverUrl={serverUrl}
+          onSelect={handleFileSelect}
+          onCancel={() => setCurrentView(View.CHAT)}
+          isVisible={true}
+        />
+      )}
+      
+      {/* Model selector overlay */}
+      {currentView === View.MODEL_SELECTOR && (
+        <ModelSelector
+          currentModel={chatState.currentModel}
+          onSelect={handleModelSelect}
+          onCancel={() => setCurrentView(View.CHAT)}
+          isVisible={true}
+        />
+      )}
+      
+      {/* Help overlay */}
+      {currentView === View.HELP && (
+        <HelpPanel
+          onClose={() => setCurrentView(View.CHAT)}
+          isVisible={true}
+        />
+      )}
+      
+      {/* Browser select overlay (when not configured) */}
+      {currentView === View.BROWSER_SELECT && (
+        <BrowserSelect
+          serverUrl={serverUrl}
+          onSelect={() => {
+            setCurrentView(View.CHAT);
+            showStatus('Browser saved', 'success');
+          }}
+          onCancel={() => setCurrentView(View.CHAT)}
+          isVisible={true}
+        />
+      )}
+
+      {/* History overlay */}
+      {currentView === View.HISTORY && (
+        <HistoryPanel
+          serverUrl={serverUrl}
+          onSelect={async (chat) => {
+            setCurrentView(View.CHAT);
+            showStatus('Loading chat...', 'info');
+            
+            try {
+              // Fetch messages for this chat
+              const response = await fetch(`${serverUrl}/api/chats/${chat.id}/messages`);
+              if (response.ok) {
+                const messages = await response.json();
+                // Get last 2 messages to show context
+                const lastMessages = messages.slice(-2).map(msg => ({
+                  id: msg.id || `msg-${Date.now()}-${Math.random()}`,
+                  role: msg.role,
+                  content: msg.content,
+                  timestamp: msg.created_at || msg.timestamp,
+                }));
+                
+                chatState.loadChat({
+                  ...chat,
+                  messages: lastMessages,
+                });
+                ws.selectChat(chat.id);
+                showStatus(`Loaded: ${chat.title || `Chat #${chat.id}`}`, 'success');
+              } else {
+                // Load without messages if fetch fails
+                chatState.loadChat(chat);
+                ws.selectChat(chat.id);
+                showStatus(`Loaded: ${chat.title || `Chat #${chat.id}`}`, 'success');
+              }
+            } catch (err) {
+              // Load without messages if fetch fails
+              chatState.loadChat(chat);
+              ws.selectChat(chat.id);
+              showStatus(`Loaded: ${chat.title || `Chat #${chat.id}`}`, 'success');
+            }
+          }}
+          onClose={() => setCurrentView(View.CHAT)}
+          isVisible={true}
+        />
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Main App component wrapped with TerminalProvider
+ * This ensures all child components have access to responsive terminal dimensions
+ */
+export function App(props) {
+  return (
+    <TerminalProvider>
+      <AppInner {...props} />
+    </TerminalProvider>
+  );
+}
+
+export default App;