otherwise-cli 0.1.0

package/src/ui/components/Header.jsx

@@ -0,0 +1,444 @@
+/**
+ * Header component
+ * Displays the app banner, connection status, and current model
+ * Features typewriter animation and gradient effects
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { getFriendlyModelName } from '../utils/formatters.js';
+import { ConnectionState } from '../hooks/useWebSocket.js';
+
+/**
+ * ASCII art banner for Otherwise (as array of lines for animation)
+ */
+const BANNER_LINES = [
+  ' ██████╗ ████████╗██╗  ██╗███████╗██████╗ ██╗    ██╗██╗███████╗███████╗',
+  '██╔═══██╗╚══██╔══╝██║  ██║██╔════╝██╔══██╗██║    ██║██║██╔════╝██╔════╝',
+  '██║   ██║   ██║   ███████║█████╗  ██████╔╝██║ █╗ ██║██║███████╗█████╗  ',
+  '██║   ██║   ██║   ██╔══██║██╔══╝  ██╔══██╗██║███╗██║██║╚════██║██╔══╝  ',
+  '╚██████╔╝   ██║   ██║  ██║███████╗██║  ██║╚███╔███╔╝██║███████║███████╗',
+  ' ╚═════╝    ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝ ╚══╝╚══╝ ╚═╝╚══════╝╚══════╝',
+];
+
+const TAGLINE = '        Your AI that lives on your computer';
+
+/**
+ * Gradient colors for banner
+ */
+const BANNER_GRADIENT = [
+  '#22d3ee', // Cyan 400
+  '#06b6d4', // Cyan 500
+  '#0891b2', // Cyan 600
+  '#0e7490', // Cyan 700
+  '#155e75', // Cyan 800
+];
+
+/**
+ * Animated banner with typewriter effect
+ */
+export function AnimatedBanner({ animate = true, speed = 15 }) {
+  const [visibleLines, setVisibleLines] = useState(animate ? 0 : BANNER_LINES.length);
+  const [visibleChars, setVisibleChars] = useState(animate ? 0 : 1000);
+  const [taglineVisible, setTaglineVisible] = useState(!animate);
+  const [colorOffset, setColorOffset] = useState(0);
+  
+  // Typewriter effect for banner lines
+  useEffect(() => {
+    if (!animate) return;
+    
+    // Reveal lines one by one
+    if (visibleLines < BANNER_LINES.length) {
+      const timer = setTimeout(() => {
+        setVisibleLines(v => v + 1);
+      }, speed * 5);
+      return () => clearTimeout(timer);
+    }
+    
+    // Then reveal characters within each line
+    const totalChars = BANNER_LINES.join('').length;
+    if (visibleChars < totalChars) {
+      const timer = setTimeout(() => {
+        setVisibleChars(v => Math.min(v + 5, totalChars));
+      }, speed);
+      return () => clearTimeout(timer);
+    }
+    
+    // Finally show tagline
+    if (!taglineVisible) {
+      const timer = setTimeout(() => {
+        setTaglineVisible(true);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [animate, visibleLines, visibleChars, taglineVisible, speed]);
+  
+  // Color cycling for shimmer effect
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setColorOffset(o => (o + 1) % BANNER_GRADIENT.length);
+    }, 200);
+    return () => clearInterval(timer);
+  }, []);
+  
+  // Calculate which characters are visible
+  const getLineContent = (lineIndex) => {
+    if (lineIndex >= visibleLines) return '';
+    
+    const line = BANNER_LINES[lineIndex];
+    let charsBefore = 0;
+    for (let i = 0; i < lineIndex; i++) {
+      charsBefore += BANNER_LINES[i].length;
+    }
+    
+    const charsToShow = Math.max(0, visibleChars - charsBefore);
+    return line.substring(0, Math.min(charsToShow, line.length));
+  };
+  
+  return (
+    <Box flexDirection="column">
+      {BANNER_LINES.map((line, i) => {
+        const content = getLineContent(i);
+        const color = BANNER_GRADIENT[(i + colorOffset) % BANNER_GRADIENT.length];
+        
+        return (
+          <Text key={i} color={color}>
+            {content}
+            {content.length < line.length && content.length > 0 && (
+              <Text color="#ffffff">▌</Text>
+            )}
+          </Text>
+        );
+      })}
+      {taglineVisible && (
+        <TaglineText text={TAGLINE} animate={animate} />
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Tagline with fade-in effect
+ */
+function TaglineText({ text, animate }) {
+  const [opacity, setOpacity] = useState(animate ? 0 : 1);
+  
+  useEffect(() => {
+    if (!animate) return;
+    
+    const steps = [0.3, 0.6, 0.8, 1];
+    let step = 0;
+    
+    const timer = setInterval(() => {
+      if (step < steps.length) {
+        setOpacity(steps[step]);
+        step++;
+      } else {
+        clearInterval(timer);
+      }
+    }, 80);
+    
+    return () => clearInterval(timer);
+  }, [animate]);
+  
+  const color = opacity < 0.5 ? '#4b5563' : opacity < 1 ? '#6b7280' : '#9ca3af';
+  
+  return <Text color={color}>{text}</Text>;
+}
+
+/**
+ * Simple banner (no animation)
+ */
+export function Banner() {
+  return (
+    <Box flexDirection="column">
+      {BANNER_LINES.map((line, i) => (
+        <Text key={i} color="cyan">{line}</Text>
+      ))}
+      <Text dimColor>{TAGLINE}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Animated connection dot
+ */
+function ConnectionDot({ state }) {
+  const [frame, setFrame] = useState(0);
+  const isAnimating = state === ConnectionState.CONNECTING || state === ConnectionState.RECONNECTING;
+  
+  // Pulsing animation for connecting states
+  const pulseFrames = ['○', '◔', '◑', '◕', '●', '◕', '◑', '◔'];
+  
+  useEffect(() => {
+    if (!isAnimating) return;
+    
+    const timer = setInterval(() => {
+      setFrame(f => (f + 1) % pulseFrames.length);
+    }, 150);
+    
+    return () => clearInterval(timer);
+  }, [isAnimating]);
+  
+  let icon, color;
+  
+  switch (state) {
+    case ConnectionState.CONNECTED:
+      icon = '●';
+      color = '#22c55e';
+      break;
+    case ConnectionState.CONNECTING:
+    case ConnectionState.RECONNECTING:
+      icon = pulseFrames[frame];
+      color = '#f59e0b';
+      break;
+    case ConnectionState.ERROR:
+      icon = '✗';
+      color = '#ef4444';
+      break;
+    default:
+      icon = '○';
+      color = '#ef4444';
+  }
+  
+  return <Text color={color}>{icon}</Text>;
+}
+
+/**
+ * Connection status indicator with animation
+ */
+export function ConnectionStatus({ connectionState, serverUrl, compact = false }) {
+  const [showSuccess, setShowSuccess] = useState(false);
+  
+  // Flash success animation when connected
+  useEffect(() => {
+    if (connectionState === ConnectionState.CONNECTED) {
+      setShowSuccess(true);
+      const timer = setTimeout(() => setShowSuccess(false), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [connectionState]);
+  
+  let statusText;
+  let statusColor;
+  
+  switch (connectionState) {
+    case ConnectionState.CONNECTED:
+      statusText = showSuccess ? 'Connected!' : 'Connected';
+      statusColor = '#22c55e';
+      break;
+    case ConnectionState.CONNECTING:
+      statusText = 'Connecting';
+      statusColor = '#f59e0b';
+      break;
+    case ConnectionState.RECONNECTING:
+      statusText = 'Reconnecting';
+      statusColor = '#f59e0b';
+      break;
+    case ConnectionState.ERROR:
+      statusText = 'Error';
+      statusColor = '#ef4444';
+      break;
+    default:
+      statusText = 'Disconnected';
+      statusColor = '#ef4444';
+  }
+  
+  if (compact) {
+    return <ConnectionDot state={connectionState} />;
+  }
+  
+  return (
+    <Box>
+      <ConnectionDot state={connectionState} />
+      <Text color={statusColor}> {statusText}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Model indicator with icon
+ */
+export function ModelIndicator({ model, showLabel = true }) {
+  const displayName = getFriendlyModelName(model);
+  
+  // Determine provider icon
+  let icon = '🤖';
+  if (model?.includes('claude') || model?.includes('anthropic')) {
+    icon = '🟣';
+  } else if (model?.includes('gpt') || model?.includes('openai') || model?.includes('o1') || model?.includes('o3')) {
+    icon = '🟢';
+  } else if (model?.includes('gemini') || model?.includes('google')) {
+    icon = '🔵';
+  } else if (model?.includes('grok') || model?.includes('xai')) {
+    icon = '⚫';
+  } else if (model?.includes('ollama') || model?.includes('llama') || model?.includes('mistral')) {
+    icon = '🦙';
+  }
+  
+  return (
+    <Box>
+      <Text>{icon} </Text>
+      {showLabel && <Text dimColor>Model: </Text>}
+      <Text color="#a855f7">{displayName}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Chat title indicator with animation
+ */
+export function ChatTitle({ title, chatId, isNew = false }) {
+  const [blink, setBlink] = useState(true);
+  
+  // Blinking cursor for new chat
+  useEffect(() => {
+    if (!isNew && chatId) return;
+    
+    const timer = setInterval(() => {
+      setBlink(b => !b);
+    }, 500);
+    
+    return () => clearInterval(timer);
+  }, [isNew, chatId]);
+  
+  if (!chatId) {
+    return (
+      <Box>
+        <Text color="#06b6d4">✨ New chat</Text>
+        {blink && <Text color="#06b6d4">▌</Text>}
+      </Box>
+    );
+  }
+  
+  return (
+    <Box>
+      <Text color="#06b6d4">💬 </Text>
+      <Text color="cyan" bold>{title || `Chat #${chatId}`}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Divider line with optional label
+ */
+export function Divider({ label = '', char = '─', width = 50, color = '#4b5563' }) {
+  if (!label) {
+    return <Text color={color}>{char.repeat(width)}</Text>;
+  }
+  
+  const labelWidth = label.length + 2;
+  const sideWidth = Math.floor((width - labelWidth) / 2);
+  
+  return (
+    <Box>
+      <Text color={color}>{char.repeat(sideWidth)} </Text>
+      <Text dimColor>{label}</Text>
+      <Text color={color}> {char.repeat(sideWidth)}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Main Header component
+ */
+export function Header({ 
+  connectionState, 
+  serverUrl, 
+  model, 
+  chatTitle, 
+  chatId,
+  showBanner = false,
+  animateBanner = true,
+}) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {showBanner && (
+        animateBanner 
+          ? <AnimatedBanner animate={true} /> 
+          : <Banner />
+      )}
+      
+      <Box marginTop={showBanner ? 1 : 0}>
+        <Text color="#374151">╭</Text>
+        <Text color="#374151">{'─'.repeat(70)}</Text>
+        <Text color="#374151">╮</Text>
+      </Box>
+      
+      <Box justifyContent="space-between" paddingX={1}>
+        <ChatTitle title={chatTitle} chatId={chatId} />
+        <Box>
+          <ModelIndicator model={model} showLabel={false} />
+          <Text dimColor> │ </Text>
+          <ConnectionStatus connectionState={connectionState} compact={false} />
+        </Box>
+      </Box>
+      
+      <Box>
+        <Text color="#374151">╰</Text>
+        <Text color="#374151">{'─'.repeat(70)}</Text>
+        <Text color="#374151">╯</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Compact status bar (alternative to full header)
+ */
+export function StatusBar({ 
+  chatTitle, 
+  chatId, 
+  model, 
+  connectionState,
+  showBorder = false,
+}) {
+  const modelName = getFriendlyModelName(model);
+  
+  const content = (
+    <Box paddingX={showBorder ? 1 : 0}>
+      <Text color="cyan">{chatTitle || (chatId ? `Chat #${chatId}` : '✨ New')}</Text>
+      <Text dimColor> · </Text>
+      <Text color="#a855f7">{modelName}</Text>
+      <Text dimColor> · </Text>
+      <ConnectionStatus connectionState={connectionState} compact={true} />
+    </Box>
+  );
+  
+  if (!showBorder) return content;
+  
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color="#374151">╭{'─'.repeat(60)}╮</Text>
+      </Box>
+      {content}
+      <Box>
+        <Text color="#374151">╰{'─'.repeat(60)}╯</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Welcome message for new users
+ */
+export function WelcomeMessage() {
+  return (
+    <Box flexDirection="column" marginY={1} paddingX={2}>
+      <Box borderStyle="round" borderColor="#374151" paddingX={2} paddingY={1}>
+        <Box flexDirection="column">
+          <Text color="#06b6d4" bold>Welcome to Otherwise! 👋</Text>
+          <Text> </Text>
+          <Text>Quick tips:</Text>
+          <Text dimColor>  • Type your message and press Enter to send</Text>
+          <Text dimColor>  • Use @ to attach files for context</Text>
+          <Text dimColor>  • Type /help for all commands</Text>
+          <Text dimColor>  • Press Ctrl+C to stop generation</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default Header;

package/src/ui/components/HelpPanel.jsx

@@ -0,0 +1,173 @@
+/**
+ * HelpPanel component
+ * Displays available commands and keyboard shortcuts
+ * 
+ * Responsive: adapts to terminal width for optimal display
+ */
+
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { COMMANDS } from '../hooks/useCommands.js';
+import { useTerminal } from '../context/TerminalContext.jsx';
+
+/**
+ * Command item display
+ */
+function CommandItem({ name, usage, description, aliases }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="yellow">{usage}</Text>
+        {aliases.length > 0 && (
+          <Text dimColor> ({aliases.join(', ')})</Text>
+        )}
+      </Box>
+      <Box marginLeft={2}>
+        <Text dimColor>{description}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Section header
+ */
+function SectionHeader({ title }) {
+  return (
+    <Box marginTop={1} marginBottom={1}>
+      <Text color="cyan" bold>{title}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Keyboard shortcut item
+ * Responsive: adjusts key column width based on terminal size
+ */
+function ShortcutItem({ keys, description, keyWidth = 20 }) {
+  return (
+    <Box>
+      <Box width={keyWidth}>
+        <Text color="yellow">{keys}</Text>
+      </Box>
+      <Text dimColor wrap="truncate">{description}</Text>
+    </Box>
+  );
+}
+
+/**
+ * HelpPanel component
+ * Responsive: adapts panel width and content layout to terminal size
+ */
+export function HelpPanel({ onClose, isVisible = true }) {
+  const { columns, isNarrow, useCompactMode } = useTerminal();
+  
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (!isVisible) return;
+    
+    // Any key closes help
+    if (key.escape || key.return || input === 'q' || input === '?') {
+      onClose?.();
+    }
+  }, { isActive: isVisible });
+  
+  if (!isVisible) return null;
+  
+  // Calculate responsive panel width
+  // Leave some margin on sides, cap at 70 for readability
+  const panelWidth = Math.min(70, Math.max(40, columns - 4));
+  const keyWidth = isNarrow ? 12 : 20;
+  
+  // Compact mode: show minimal help
+  if (useCompactMode) {
+    return (
+      <Box 
+        flexDirection="column" 
+        borderStyle="single" 
+        borderColor="cyan" 
+        padding={1}
+        width={panelWidth}
+      >
+        <Box justifyContent="center" marginBottom={1}>
+          <Text color="cyan" bold>Help</Text>
+        </Box>
+        
+        <Text dimColor>/help - commands</Text>
+        <Text dimColor>/new - new chat</Text>
+        <Text dimColor>/model - change model</Text>
+        <Text dimColor>@ - attach file</Text>
+        <Text dimColor>Ctrl+C - stop/exit</Text>
+        
+        <Box marginTop={1} justifyContent="center">
+          <Text dimColor>Any key to close</Text>
+        </Box>
+      </Box>
+    );
+  }
+  
+  return (
+    <Box 
+      flexDirection="column" 
+      borderStyle="round" 
+      borderColor="cyan" 
+      padding={1}
+      width={panelWidth}
+    >
+      <Box justifyContent="center" marginBottom={1}>
+        <Text color="cyan" bold>Otherwise CLI Help</Text>
+      </Box>
+      
+      <SectionHeader title="Commands" />
+      
+      {Object.entries(COMMANDS).map(([name, cmd]) => (
+        <CommandItem 
+          key={name}
+          name={name}
+          usage={cmd.usage}
+          description={isNarrow ? cmd.description.slice(0, 30) + (cmd.description.length > 30 ? '…' : '') : cmd.description}
+          aliases={isNarrow ? [] : cmd.aliases}
+        />
+      ))}
+      
+      <SectionHeader title="File Attachments" />
+      
+      <Box flexDirection="column" marginBottom={1}>
+        <Box>
+          <Text color="yellow">@</Text>
+          <Text dimColor> or </Text>
+          <Text color="yellow">/attach</Text>
+          <Text dimColor>  Open file picker</Text>
+        </Box>
+        {!isNarrow && (
+          <>
+            <Box marginLeft={2}>
+              <Text dimColor>↑↓ navigate • Enter select/enter folder</Text>
+            </Box>
+            <Box marginLeft={2}>
+              <Text dimColor>Tab attach folder contents • Backspace go up</Text>
+            </Box>
+            <Box marginLeft={2}>
+              <Text dimColor>Type to filter • Esc cancel</Text>
+            </Box>
+          </>
+        )}
+      </Box>
+      
+      <SectionHeader title="Keyboard Shortcuts" />
+      
+      <ShortcutItem keys="Ctrl+C" description="Stop generation or exit" keyWidth={keyWidth} />
+      <ShortcutItem keys="Ctrl+D" description="Exit" keyWidth={keyWidth} />
+      <ShortcutItem keys="Tab" description="Open file picker" keyWidth={keyWidth} />
+      <ShortcutItem keys="↑ / ↓" description="Navigate lists" keyWidth={keyWidth} />
+      <ShortcutItem keys="Enter" description="Submit / Select" keyWidth={keyWidth} />
+      <ShortcutItem keys="Escape" description="Cancel / Close" keyWidth={keyWidth} />
+      
+      <Box marginTop={2} justifyContent="center">
+        <Text dimColor>Press any key to close</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export default HelpPanel;