nova-terminal-assistant 0.1.0

package/src/cli/ui/components/NovaInkApp.tsx

@@ -0,0 +1,312 @@
+// ============================================================================
+// NovaInkApp - Main Ink-based CLI application
+// ============================================================================
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { StatusBar, InputBox, MessageList, ToolCallPanel, Spinner, ThinkingBlock } from './InkComponents.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+  timestamp: Date;
+}
+
+interface ToolCall {
+  id: string;
+  name: string;
+  status: 'pending' | 'running' | 'success' | 'error';
+  duration?: number;
+}
+
+interface AppState {
+  model: string;
+  mode: 'auto' | 'plan' | 'ask';
+  contextUsage: number;
+  sessionId: string;
+  messages: Message[];
+  activeTools: ToolCall[];
+  processing: boolean;
+  thinkingContent: string;
+  showThinking: boolean;
+}
+
+interface NovaAppProps {
+  initialModel?: string;
+  initialMode?: 'auto' | 'plan' | 'ask';
+  sessionId?: string;
+  onSubmit?: (input: string) => Promise<void>;
+  onCommand?: (command: string) => Promise<void>;
+}
+
+// ============================================================================
+// Help Screen Component
+// ============================================================================
+
+const HelpScreen: React.FC<{ onDismiss: () => void }> = ({ onDismiss }) => {
+  useInput((char, key) => {
+    if (key.escape || char === 'q') {
+      onDismiss();
+    }
+  });
+  
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold color="magenta">Nova CLI - Help</Text>
+      <Text></Text>
+      
+      <Text bold>Navigation</Text>
+      <Text dimColor>  /help        Show this help</Text>
+      <Text dimColor>  /quit        Exit Nova CLI</Text>
+      <Text dimColor>  /clear       Clear conversation</Text>
+      <Text></Text>
+      
+      <Text bold>Model & Mode</Text>
+      <Text dimColor>  /model       Switch model (interactive)</Text>
+      <Text dimColor>  /mode        Cycle mode: AUTO → PLAN → ASK</Text>
+      <Text dimColor>  /status      Show session status</Text>
+      <Text></Text>
+      
+      <Text bold>Memory & Context</Text>
+      <Text dimColor>  /init        Generate NOVA.md</Text>
+      <Text dimColor>  /memory      Manage memory</Text>
+      <Text dimColor>  /compact     Toggle compact mode</Text>
+      <Text></Text>
+      
+      <Text bold>Tools & Extensions</Text>
+      <Text dimColor>  /tools       List available tools</Text>
+      <Text dimColor>  /mcp         MCP server status</Text>
+      <Text dimColor>  /skills      Available skills</Text>
+      <Text dimColor>  /ollama      Ollama status</Text>
+      <Text></Text>
+      
+      <Text bold>Shortcuts</Text>
+      <Text dimColor>  @file        Inject file content</Text>
+      <Text dimColor>  !command     Run shell command</Text>
+      <Text dimColor>  \            Multi-line input</Text>
+      <Text dimColor>  Tab          Command completion</Text>
+      <Text></Text>
+      
+      <Text dimColor>Press Escape or Q to close</Text>
+    </Box>
+  );
+};
+
+// ============================================================================
+// Mode Badge Component
+// ============================================================================
+
+const ModeBadge: React.FC<{ mode: 'auto' | 'plan' | 'ask' }> = ({ mode }) => {
+  const colors = { auto: 'green', plan: 'yellow', ask: 'cyan' };
+  const labels = { auto: 'AUTO', plan: 'PLAN', ask: 'ASK' };
+  const descriptions = {
+    auto: 'Full autonomous',
+    plan: 'Plan first',
+    ask: 'Answer only',
+  };
+  
+  return (
+    <Box>
+      <Text bold color={colors[mode]}>[{labels[mode]}]</Text>
+      <Text dimColor> {descriptions[mode]}</Text>
+    </Box>
+  );
+};
+
+// ============================================================================
+// Main NovaInkApp Component
+// ============================================================================
+
+export const NovaInkApp: React.FC<NovaAppProps> = ({
+  initialModel = 'claude-3-sonnet',
+  initialMode = 'auto',
+  sessionId,
+  onSubmit,
+  onCommand,
+}) => {
+  const { exit } = useApp();
+  const [showHelp, setShowHelp] = useState(false);
+  const [state, setState] = useState<AppState>({
+    model: initialModel,
+    mode: initialMode,
+    contextUsage: 0,
+    sessionId: sessionId || 'new',
+    messages: [],
+    activeTools: [],
+    processing: false,
+    thinkingContent: '',
+    showThinking: true,
+  });
+  
+  // Handle global keyboard shortcuts
+  useInput((char, key) => {
+    if (showHelp) {
+      if (key.escape || char === 'q') {
+        setShowHelp(false);
+      }
+      return;
+    }
+    
+    // Ctrl+C to exit
+    if (key.ctrl && char === 'c') {
+      exit();
+    }
+  });
+  
+  // Handle input submission
+  const handleSubmit = useCallback(async (input: string) => {
+    if (!input.trim()) return;
+    
+    // Handle commands
+    if (input.startsWith('/')) {
+      const command = input.slice(1).toLowerCase();
+      
+      switch (command) {
+        case 'help':
+        case 'h':
+        case '?':
+          setShowHelp(true);
+          return;
+          
+        case 'quit':
+        case 'exit':
+        case 'q':
+          exit();
+          return;
+          
+        case 'clear':
+          setState(s => ({ ...s, messages: [], contextUsage: 0 }));
+          return;
+          
+        case 'mode':
+          setState(s => ({
+            ...s,
+            mode: s.mode === 'auto' ? 'plan' : s.mode === 'plan' ? 'ask' : 'auto',
+          }));
+          return;
+          
+        case 'thinking':
+          setState(s => ({ ...s, showThinking: !s.showThinking }));
+          return;
+      }
+      
+      // Forward other commands
+      if (onCommand) {
+        await onCommand(input);
+      }
+      return;
+    }
+    
+    // Add user message
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: input,
+      timestamp: new Date(),
+    };
+    
+    setState(s => ({
+      ...s,
+      messages: [...s.messages, userMessage],
+      processing: true,
+    }));
+    
+    // Call submit handler
+    if (onSubmit) {
+      try {
+        await onSubmit(input);
+      } finally {
+        setState(s => ({ ...s, processing: false }));
+      }
+    } else {
+      // Demo mode - simulate response
+      setTimeout(() => {
+        const assistantMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          content: 'I received your message. In demo mode, this is a simulated response.',
+          timestamp: new Date(),
+        };
+        
+        setState(s => ({
+          ...s,
+          messages: [...s.messages, assistantMessage],
+          processing: false,
+          contextUsage: Math.min(100, s.contextUsage + 5),
+        }));
+      }, 1000);
+    }
+  }, [onSubmit, onCommand, exit]);
+  
+  // Render help screen
+  if (showHelp) {
+    return <HelpScreen onDismiss={() => setShowHelp(false)} />;
+  }
+  
+  return (
+    <Box flexDirection="column" height="100%">
+      {/* Status Bar */}
+      <StatusBar
+        model={state.model}
+        mode={state.mode}
+        contextUsage={state.contextUsage}
+        sessionId={state.sessionId}
+      />
+      
+      {/* Message List */}
+      <Box flexGrow={1} flexDirection="column" overflow="hidden" marginY={1}>
+        {state.messages.length === 0 ? (
+          <Box flexDirection="column" alignItems="center" justifyContent="center" height="100%">
+            <Text bold color="magenta">Nova CLI</Text>
+            <Text dimColor>AI-powered terminal assistant</Text>
+            <Text></Text>
+            <Text dimColor>Type a message or /help for commands</Text>
+          </Box>
+        ) : (
+          <MessageList messages={state.messages} />
+        )}
+        
+        {/* Thinking Block */}
+        {state.thinkingContent && state.showThinking && (
+          <ThinkingBlock content={state.thinkingContent} />
+        )}
+        
+        {/* Tool Calls */}
+        {state.activeTools.length > 0 && (
+          <ToolCallPanel tools={state.activeTools} />
+        )}
+      </Box>
+      
+      {/* Processing Indicator */}
+      {state.processing && (
+        <Box marginBottom={1}>
+          <Spinner message="Thinking..." />
+        </Box>
+      )}
+      
+      {/* Input Box */}
+      <InputBox
+        onSubmit={handleSubmit}
+        placeholder={state.processing ? 'Processing...' : 'Type a message or /help'}
+        disabled={state.processing}
+      />
+      
+      {/* Footer */}
+      <Box justifyContent="space-between" marginTop={1}>
+        <ModeBadge mode={state.mode} />
+        <Text dimColor>/help for commands | Ctrl+C to exit</Text>
+      </Box>
+    </Box>
+  );
+};
+
+// ============================================================================
+// Export
+// ============================================================================
+
+export default NovaInkApp;

package/src/cli/ui/components/ProgressBar.ts

@@ -0,0 +1,177 @@
+// ============================================================================
+// ProgressBar - Terminal progress bar component
+// ============================================================================
+
+import chalk from 'chalk';
+
+export interface ProgressBarOptions {
+  /** Total progress value (default: 100) */
+  total?: number;
+  /** Current progress value (default: 0) */
+  current?: number;
+  /** Bar width in characters (default: 40) */
+  width?: number;
+  /** Progress bar color */
+  color?: string;
+  /** Show percentage (default: true) */
+  showPercentage?: boolean;
+  /** Show value (default: true) */
+  showValue?: boolean;
+  /** Custom label */
+  label?: string;
+  /** Clear line when complete (default: false) */
+  clearOnComplete?: boolean;
+}
+
+export class ProgressBar {
+  private options: Required<ProgressBarOptions>;
+  private startTime: number;
+  private lastRender: string = '';
+
+  constructor(options: ProgressBarOptions = {}) {
+    this.options = {
+      total: options.total ?? 100,
+      current: options.current ?? 0,
+      width: options.width ?? 40,
+      color: options.color ?? '#10B981',
+      showPercentage: options.showPercentage ?? true,
+      showValue: options.showValue ?? true,
+      label: options.label ?? '',
+      clearOnComplete: options.clearOnComplete ?? false,
+    };
+    this.startTime = Date.now();
+  }
+
+  /**
+   * Update progress value
+   */
+  update(current: number): void {
+    this.options.current = Math.min(current, this.options.total);
+    this.render();
+  }
+
+  /**
+   * Increment progress by delta
+   */
+  increment(delta: number = 1): void {
+    this.options.current += delta;
+    this.options.current = Math.min(this.options.current, this.options.total);
+    this.render();
+  }
+
+  /**
+   * Set progress to 100% and optionally clear
+   */
+  complete(): void {
+    this.options.current = this.options.total;
+    this.render();
+    if (this.options.clearOnComplete) {
+      this.clear();
+    }
+  }
+
+  /**
+   * Clear the progress bar from terminal
+   */
+  clear(): void {
+    const width = process.stdout.columns || 80;
+    process.stdout.write('\r' + ' '.repeat(width - 1) + '\r');
+  }
+
+  /**
+   * Render the progress bar
+   */
+  private render(): void {
+    const { current, total, width, color, showPercentage, showValue, label } = this.options;
+    
+    const percentage = Math.min(100, Math.max(0, (current / total) * 100));
+    const filledWidth = Math.floor((percentage / 100) * width);
+    const emptyWidth = width - filledWidth;
+    
+    const colorFn = chalk.hex(color);
+    const bar = colorFn('━'.repeat(filledWidth)) + chalk.dim('─'.repeat(emptyWidth));
+    
+    let output = '\r';
+    
+    if (label) {
+      output += chalk.cyan(label) + ' ';
+    }
+    
+    output += '╭' + bar + '╮';
+    
+    if (showPercentage) {
+      output += ' ' + chalk.bold(percentage.toFixed(1) + '%');
+    }
+    
+    if (showValue) {
+      output += chalk.dim(` (${current}/${total})`);
+    }
+    
+    // Add ETA if not complete
+    if (percentage > 0 && percentage < 100) {
+      const elapsed = (Date.now() - this.startTime) / 1000;
+      const rate = current / elapsed;
+      const remaining = total - current;
+      const eta = remaining / rate;
+      
+      if (eta > 0) {
+        const minutes = Math.floor(eta / 60);
+        const seconds = Math.floor(eta % 60);
+        output += chalk.dim(` ETA: ${minutes}:${seconds.toString().padStart(2, '0')}`);
+      }
+    }
+    
+    // Prevent flickering by only updating if changed
+    if (output !== this.lastRender) {
+      process.stdout.write(output);
+      this.lastRender = output;
+    }
+  }
+}
+
+/**
+ * Create and manage multiple progress bars
+ */
+export class MultiProgressBar {
+  private bars: ProgressBar[] = [];
+  private startLine: number = 0;
+
+  constructor() {
+    this.startLine = this.getCurrentLine();
+  }
+
+  /**
+   * Add a new progress bar
+   */
+  add(options: ProgressBarOptions = {}): ProgressBar {
+    const bar = new ProgressBar(options);
+    this.bars.push(bar);
+    return bar;
+  }
+
+  /**
+   * Remove a progress bar
+   */
+  remove(bar: ProgressBar): void {
+    const index = this.bars.indexOf(bar);
+    if (index >= 0) {
+      this.bars.splice(index, 1);
+    }
+  }
+
+  /**
+   * Get current terminal line
+   */
+  private getCurrentLine(): number {
+    // This is a simplified version - in practice you'd track this manually
+    return 0;
+  }
+}
+
+// Example usage:
+// const bar = new ProgressBar({ label: 'Processing', total: 100 });
+// for (let i = 0; i <= 100; i++) {
+//   bar.update(i);
+//   await sleep(50);
+// }
+// bar.complete();