otherwise-cli 0.1.0

package/src/ui/components/HistoryPanel.jsx

@@ -0,0 +1,158 @@
+/**
+ * HistoryPanel component
+ * Displays recent chat history
+ * 
+ * Responsive: adapts to terminal size
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useTerminal } from '../context/TerminalContext.jsx';
+import { responsiveTruncate } from '../utils/formatters.js';
+
+/**
+ * Chat item display
+ * Responsive: truncates title based on available width
+ */
+function ChatItem({ chat, index, isSelected, onSelect, maxTitleLength = 40 }) {
+  const rawTitle = chat.title || `Chat #${chat.id}`;
+  const title = responsiveTruncate(rawTitle, maxTitleLength);
+  // Handle both snake_case (from API) and camelCase date fields
+  const dateStr = chat.updated_at || chat.updatedAt || chat.created_at || chat.createdAt;
+  const date = dateStr ? new Date(dateStr).toLocaleDateString() : '';
+  
+  return (
+    <Box>
+      <Text color={isSelected ? '#06b6d4' : '#6b7280'}>
+        {isSelected ? '❯ ' : '  '}
+      </Text>
+      <Text color={isSelected ? '#06b6d4' : undefined} bold={isSelected} wrap="truncate">
+        {index + 1}. {title}
+      </Text>
+      {date && <Text dimColor>  ({date})</Text>}
+    </Box>
+  );
+}
+
+/**
+ * HistoryPanel component
+ * Responsive: adapts visible items and title length to terminal size
+ */
+export function HistoryPanel({ serverUrl, onSelect, onClose, isVisible = true }) {
+  const { rows, columns, isNarrow } = useTerminal();
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  
+  // Responsive: adjust visible items and title length
+  const maxVisible = Math.max(5, Math.min(15, rows - 8));
+  const maxTitleLength = Math.max(20, columns - 25);
+  
+  // Fetch chat history on mount
+  useEffect(() => {
+    if (!isVisible) return;
+    
+    const fetchHistory = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch(`${serverUrl}/api/chats`);
+        if (response.ok) {
+          const data = await response.json();
+          // API returns array directly, not wrapped in { chats: [...] }
+          const chatList = Array.isArray(data) ? data : (data.chats || []);
+          // Sort by most recent first
+          chatList.sort((a, b) => {
+            const dateA = new Date(a.updated_at || a.created_at || 0);
+            const dateB = new Date(b.updated_at || b.created_at || 0);
+            return dateB - dateA;
+          });
+          setChats(chatList);
+        } else {
+          setError('Failed to load history');
+        }
+      } catch (err) {
+        setError('Could not connect to server');
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    fetchHistory();
+  }, [serverUrl, isVisible]);
+  
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (!isVisible) return;
+    
+    if (key.escape || input === 'q') {
+      onClose?.();
+      return;
+    }
+    
+    if (key.upArrow) {
+      setSelectedIndex(i => Math.max(0, i - 1));
+      return;
+    }
+    
+    if (key.downArrow) {
+      setSelectedIndex(i => Math.min(chats.length - 1, i + 1));
+      return;
+    }
+    
+    if (key.return && chats.length > 0) {
+      onSelect?.(chats[selectedIndex]);
+      return;
+    }
+  }, { isActive: isVisible });
+  
+  if (!isVisible) return null;
+  
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text color="cyan" bold>Recent Chats</Text>
+      </Box>
+      
+      {loading && (
+        <Text dimColor>Loading...</Text>
+      )}
+      
+      {error && (
+        <Text color="red">{error}</Text>
+      )}
+      
+      {!loading && !error && chats.length === 0 && (
+        <Text dimColor>No chat history yet</Text>
+      )}
+      
+      {!loading && !error && chats.length > 0 && (
+        <Box flexDirection="column">
+          {chats.slice(0, maxVisible).map((chat, index) => (
+            <ChatItem
+              key={chat.id}
+              chat={chat}
+              index={index}
+              isSelected={index === selectedIndex}
+              onSelect={() => onSelect?.(chat)}
+              maxTitleLength={maxTitleLength}
+            />
+          ))}
+          {chats.length > maxVisible && (
+            <Text dimColor>  ... {chats.length - maxVisible} more</Text>
+          )}
+        </Box>
+      )}
+      
+      <Box marginTop={1}>
+        {isNarrow ? (
+          <Text dimColor>↑↓ Enter Esc</Text>
+        ) : (
+          <Text dimColor>↑↓ navigate • Enter select • Esc close</Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default HistoryPanel;

package/src/ui/components/MessageList.jsx

@@ -0,0 +1,235 @@
+/**
+ * MessageList component
+ * Displays completed chat messages in a scrolling list
+ * 
+ * Responsive: adapts text rendering and dividers to terminal width
+ */
+
+import React, { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { renderMarkdown } from '../utils/markdown.js';
+import { MessageRole, ToolState } from '../hooks/useChatState.js';
+import { getToolIcon, formatToolName, getPrimaryArg } from '../utils/formatters.js';
+import { useTerminal } from '../context/TerminalContext.jsx';
+
+/**
+ * User message component
+ */
+export function UserMessage({ content, source = null }) {
+  // Determine label based on source
+  const isFromWeb = source === 'web';
+  const label = isFromWeb ? 'You (web)' : 'You';
+  
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="#a855f7" bold>{label}</Text>
+        <Text color="#a855f7" bold>:</Text>
+      </Box>
+      <Box marginLeft={0}>
+        <Text>{content}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Inline tool display component - compact representation of tool calls
+ */
+export function InlineTool({ tool }) {
+  const icon = getToolIcon(tool.name);
+  const displayName = formatToolName(tool.name);
+  const primaryArg = getPrimaryArg(tool.name, tool.args);
+  
+  const isComplete = tool.status === ToolState.COMPLETE;
+  const hasError = tool.status === ToolState.ERROR;
+  
+  // Determine status indicator
+  let statusIcon, statusColor;
+  if (hasError) {
+    statusIcon = '✗';
+    statusColor = '#ef4444';
+  } else if (isComplete) {
+    statusIcon = '✓';
+    statusColor = '#22c55e';
+  } else {
+    statusIcon = '•';
+    statusColor = '#f59e0b';
+  }
+  
+  return (
+    <Box marginLeft={2} marginBottom={1}>
+      <Text color={statusColor}>{statusIcon} </Text>
+      <Text>{icon} </Text>
+      <Text color="#06b6d4">{displayName}</Text>
+      {primaryArg && (
+        <Text color="#9ca3af"> {primaryArg}</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Inline tools list
+ */
+export function InlineToolsList({ tools }) {
+  if (!tools || tools.length === 0) return null;
+  
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {tools.map((tool, i) => (
+        <InlineTool key={tool.id || `tool-${i}`} tool={tool} />
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * Assistant message component
+ * Layout matches StreamingText for consistent rendering
+ * Responsive: uses terminal width for markdown rendering
+ */
+export function AssistantMessage({ content, model = null, tools = null }) {
+  const { textWidth } = useTerminal();
+  
+  // Render markdown to terminal format with responsive width
+  const rendered = useMemo(() => {
+    if (!content) return null;
+    try {
+      return renderMarkdown(content, textWidth);
+    } catch {
+      return content;
+    }
+  }, [content, textWidth]);
+  
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="green" bold>Otherwise:</Text>
+      </Box>
+      
+      {/* Show tools if present */}
+      {tools && tools.length > 0 && (
+        <InlineToolsList tools={tools} />
+      )}
+      
+      {/* Show content if present */}
+      {rendered && (
+        <Box marginLeft={0}>
+          <Text wrap="wrap">{rendered}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * System message component
+ */
+export function SystemMessage({ content }) {
+  return (
+    <Box marginBottom={1}>
+      <Text dimColor italic>System: {content}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Single message renderer
+ */
+export function Message({ message }) {
+  switch (message.role) {
+    case MessageRole.USER:
+      return <UserMessage content={message.content} source={message.source} />;
+    case MessageRole.ASSISTANT:
+      return (
+        <AssistantMessage 
+          content={message.content} 
+          model={message.model}
+          tools={message.tools}
+        />
+      );
+    case MessageRole.SYSTEM:
+      return <SystemMessage content={message.content} />;
+    default:
+      return null;
+  }
+}
+
+/**
+ * MessageList component
+ * Renders all messages in order
+ */
+export function MessageList({ messages }) {
+  if (!messages || messages.length === 0) {
+    return null;
+  }
+  
+  return (
+    <Box flexDirection="column">
+      {messages.map((message, index) => (
+        <Box key={message.id || `msg-${index}`} flexDirection="column">
+          <Message message={message} />
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * Divider between messages or sections
+ * Responsive: uses terminal width for divider
+ */
+export function MessageDivider({ char = '─' }) {
+  const { uiWidth } = useTerminal();
+  const width = Math.min(uiWidth, 60);
+  
+  return (
+    <Box marginY={1}>
+      <Text dimColor>{char.repeat(width)}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Stats display (shown after generation completes)
+ * Responsive: adapts line width to terminal size
+ */
+export function GenerationStats({ stats }) {
+  const { uiWidth, isNarrow } = useTerminal();
+  
+  if (!stats) return null;
+  
+  const parts = [];
+  
+  if (stats.numTokens) {
+    parts.push(`${stats.numTokens} tok`);
+  }
+  
+  if (stats.tps) {
+    parts.push(`${Math.round(stats.tps)} tok/s`);
+  }
+  
+  // Only show model on wider terminals
+  if (stats.model && !isNarrow) {
+    // Import would be circular, just use the model ID
+    parts.push(stats.model.split('-').slice(0, 2).join(' '));
+  }
+  
+  if (stats.finishReason && stats.finishReason !== 'STOP' && stats.finishReason !== 'stop') {
+    parts.push(stats.finishReason.toLowerCase());
+  }
+  
+  const content = parts.join(' · ');
+  const targetWidth = Math.min(uiWidth, 60);
+  const padding = Math.max(0, Math.floor((targetWidth - content.length - 2) / 2));
+  const line = '─'.repeat(padding);
+  
+  return (
+    <Box justifyContent="center" marginY={1}>
+      <Text dimColor>{line} {content} {line}</Text>
+    </Box>
+  );
+}
+
+export default MessageList;

package/src/ui/components/ModelSelector.jsx

@@ -0,0 +1,304 @@
+/**
+ * ModelSelector component
+ * Interactive model selector using Ink
+ * 
+ * Responsive: adapts to terminal height
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useFocus } from 'ink';
+import { getFriendlyModelName } from '../utils/formatters.js';
+import { config } from '../../config.js';
+import { MODEL_DATA } from '../../models.js';
+import { useTerminal } from '../context/TerminalContext.jsx';
+
+/**
+ * Provider icons
+ */
+const PROVIDER_ICONS = {
+  anthropic: '🟣',
+  openai: '🟢',
+  google: '🔵',
+  xai: '⚫',
+  openrouter: '🔀',
+  ollama: '🦙',
+};
+
+/**
+ * Model item display
+ */
+function ModelItem({ model, isSelected, isCurrent }) {
+  const prefix = isSelected ? '❯ ' : '  ';
+  
+  let nameDisplay;
+  if (isSelected) {
+    nameDisplay = <Text color="cyan" bold>{model.name}</Text>;
+  } else if (isCurrent) {
+    nameDisplay = <Text color="green">{model.name}</Text>;
+  } else {
+    nameDisplay = <Text>{model.name}</Text>;
+  }
+  
+  // Feature indicators
+  const features = [];
+  if (model.type?.includes('reasoning')) features.push('⚡');
+  if (model.type?.includes('web-search')) features.push('🔍');
+  if (model.type?.includes('image-generation')) features.push('🎨');
+  
+  return (
+    <Box>
+      <Text color={isSelected ? 'cyan' : undefined}>{prefix}</Text>
+      {nameDisplay}
+      {isCurrent && <Text color="green"> ✓</Text>}
+      {features.length > 0 && <Text> {features.join('')}</Text>}
+      {model.size != null && model.size > 0 && <Text dimColor> {(model.size / 1e9).toFixed(1)}GB</Text>}
+    </Box>
+  );
+}
+
+/**
+ * Provider header
+ */
+function ProviderHeader({ name, icon, hasKey }) {
+  return (
+    <Box marginTop={1}>
+      <Text>{icon} </Text>
+      <Text bold>{name}</Text>
+      {!hasKey && <Text color="red"> (no key)</Text>}
+    </Box>
+  );
+}
+
+/**
+ * ModelSelector component
+ * Responsive: adapts visible items to terminal height
+ */
+export function ModelSelector({
+  currentModel,
+  onSelect,
+  onCancel,
+  isVisible = true,
+}) {
+  const { rows, isNarrow } = useTerminal();
+  const [models, setModels] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [ollamaModels, setOllamaModels] = useState([]);
+  const [ollamaAvailable, setOllamaAvailable] = useState(false);
+  
+  // Responsive: adjust visible items based on terminal height
+  const maxVisible = Math.max(5, Math.min(15, rows - 8));
+  const { isFocused } = useFocus({ autoFocus: true, isActive: isVisible });
+  
+  // Load available models
+  useEffect(() => {
+    if (!isVisible) return;
+    
+    const loadModels = async () => {
+      const apiKeys = config.get('apiKeys') || {};
+      const loadedModels = [];
+      
+      // Provider configurations (static models)
+      const providers = [
+        { key: 'anthropic', name: 'Anthropic', models: MODEL_DATA.apiModels.anthropic },
+        { key: 'openai', name: 'OpenAI', models: MODEL_DATA.apiModels.openai },
+        { key: 'google', name: 'Google', models: MODEL_DATA.apiModels.google },
+        { key: 'xai', name: 'xAI', models: MODEL_DATA.apiModels.xai },
+      ];
+      
+      for (const provider of providers) {
+        if (apiKeys[provider.key]) {
+          for (const model of provider.models) {
+            loadedModels.push({
+              id: model.id,
+              name: model.name,
+              provider: provider.name,
+              providerKey: provider.key,
+              type: model.type,
+              maxTokens: model.maxTokens,
+            });
+          }
+        }
+      }
+      
+      // Try to load OpenRouter models (dynamic)
+      if (apiKeys.openrouter) {
+        try {
+          const { fetchOpenRouterModels } = await import('../../inference/openrouter.js');
+          const orModels = await fetchOpenRouterModels(apiKeys.openrouter);
+          for (const model of orModels) {
+            loadedModels.push({
+              id: model.id,
+              name: model.name,
+              provider: 'OpenRouter',
+              providerKey: 'openrouter',
+              type: model.type,
+              maxTokens: model.maxTokens,
+            });
+          }
+        } catch (err) {
+          // OpenRouter fetch failed, continue without
+        }
+      }
+      
+      // Try to load Ollama models
+      try {
+        const ollamaUrl = config.get('ollamaUrl') || 'http://localhost:11434';
+        const response = await fetch(`${ollamaUrl}/api/tags`, { 
+          signal: AbortSignal.timeout(2000) 
+        });
+        
+        if (response.ok) {
+          const data = await response.json();
+          const ollama = (data.models || []).map(m => ({
+            id: `ollama:${m.name}`,
+            name: m.name,
+            provider: 'Ollama',
+            providerKey: 'ollama',
+            size: m.size,
+          }));
+          setOllamaModels(ollama);
+          setOllamaAvailable(true);
+          loadedModels.push(...ollama);
+        }
+      } catch (err) {
+        setOllamaAvailable(false);
+      }
+      
+      setModels(loadedModels);
+      
+      // Find current model index
+      const currentIndex = loadedModels.findIndex(m => m.id === currentModel);
+      if (currentIndex >= 0) {
+        setSelectedIndex(currentIndex);
+      }
+    };
+    
+    loadModels();
+  }, [isVisible, currentModel]);
+  
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (!isVisible || !isFocused) return;
+    
+    // Navigation
+    if (key.upArrow || input === 'k') {
+      setSelectedIndex(prev => Math.max(0, prev - 1));
+      return;
+    }
+    
+    if (key.downArrow || input === 'j') {
+      setSelectedIndex(prev => Math.min(models.length - 1, prev + 1));
+      return;
+    }
+    
+    // Page up/down
+    if (key.pageUp) {
+      setSelectedIndex(prev => Math.max(0, prev - maxVisible));
+      return;
+    }
+    
+    if (key.pageDown) {
+      setSelectedIndex(prev => Math.min(models.length - 1, prev + maxVisible));
+      return;
+    }
+    
+    // Select
+    if (key.return || input === ' ') {
+      const selected = models[selectedIndex];
+      if (selected) {
+        onSelect?.(selected);
+      }
+      return;
+    }
+    
+    // Cancel
+    if (key.escape || input === 'q') {
+      onCancel?.();
+      return;
+    }
+  }, { isActive: isVisible && isFocused });
+  
+  // Adjust scroll offset
+  useEffect(() => {
+    if (selectedIndex < scrollOffset) {
+      setScrollOffset(selectedIndex);
+    } else if (selectedIndex >= scrollOffset + maxVisible) {
+      setScrollOffset(selectedIndex - maxVisible + 1);
+    }
+  }, [selectedIndex, scrollOffset]);
+  
+  if (!isVisible) return null;
+  
+  // Group models by provider for display
+  const visibleModels = models.slice(scrollOffset, scrollOffset + maxVisible);
+  
+  // Track current provider for headers
+  let currentProvider = null;
+  
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+      {/* Header - responsive hints */}
+      <Box marginBottom={1}>
+        <Text color="cyan" bold>Select Model</Text>
+        {isNarrow ? (
+          <Text dimColor> (↑↓ Enter Esc)</Text>
+        ) : (
+          <Text dimColor> (↑/↓ navigate, Enter select, Esc cancel)</Text>
+        )}
+      </Box>
+      
+      {/* Scroll up indicator */}
+      {scrollOffset > 0 && (
+        <Box>
+          <Text dimColor>  ↑ more models above...</Text>
+        </Box>
+      )}
+      
+      {/* Model list */}
+      {models.length === 0 ? (
+        <Box>
+          <Text color="yellow">No models available.</Text>
+          <Text dimColor> Configure API keys or start Ollama.</Text>
+        </Box>
+      ) : (
+        visibleModels.map((model, i) => {
+          const actualIndex = scrollOffset + i;
+          const showProvider = model.provider !== currentProvider;
+          currentProvider = model.provider;
+          
+          return (
+            <Box key={model.id} flexDirection="column">
+              {showProvider && (
+                <ProviderHeader 
+                  name={model.provider}
+                  icon={PROVIDER_ICONS[model.providerKey] || '●'}
+                  hasKey={true}
+                />
+              )}
+              <ModelItem 
+                model={model}
+                isSelected={selectedIndex === actualIndex}
+                isCurrent={model.id === currentModel}
+              />
+            </Box>
+          );
+        })
+      )}
+      
+      {/* Scroll down indicator */}
+      {scrollOffset + maxVisible < models.length && (
+        <Box>
+          <Text dimColor>  ↓ more models below...</Text>
+        </Box>
+      )}
+      
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>{models.length} models available</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export default ModelSelector;