brownian-code 2026.2.10

package/src/components/AnswerBox.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+import { formatResponse } from '../utils/markdown-table.js';
+
+interface AnswerBoxProps {
+  stream?: AsyncGenerator<string>;
+  text?: string;
+  onStart?: () => void;
+  onComplete?: (answer: string) => void;
+}
+
+export const AnswerBox = React.memo(function AnswerBox({ stream, text, onStart, onComplete }: AnswerBoxProps) {
+  const [content, setContent] = useState(text || '');
+  const [isStreaming, setIsStreaming] = useState(!!stream);
+
+  // Store callbacks in refs to avoid effect re-runs when references change
+  const onStartRef = useRef(onStart);
+  const onCompleteRef = useRef(onComplete);
+  onStartRef.current = onStart;
+  onCompleteRef.current = onComplete;
+
+  // Sync content with text prop when not streaming (used by V2 CLI)
+  useEffect(() => {
+    if (!stream && text !== undefined) {
+      setContent(text);
+    }
+  }, [stream, text]);
+
+  useEffect(() => {
+    if (!stream) return;
+
+    let collected = text || '';
+    let started = false;
+    
+    (async () => {
+      try {
+        for await (const chunk of stream) {
+          if (!started && chunk.trim()) {
+            started = true;
+            onStartRef.current?.();
+          }
+          collected += chunk;
+          setContent(collected);
+        }
+      } finally {
+        setIsStreaming(false);
+        onCompleteRef.current?.(collected);
+      }
+    })();
+  }, [stream, text]);
+
+  // Apply pre-render formatting (tables, bold)
+  const displayContent = useMemo(() => formatResponse(content), [content]);
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color={colors.muted}>⏺ </Text>
+        <Text>
+          {displayContent}
+          {isStreaming && '▌'}
+        </Text>
+      </Box>
+    </Box>
+  );
+});
+
+interface UserQueryProps {
+  query: string;
+}
+
+export function UserQuery({ query }: UserQueryProps) {
+  return (
+    <Box marginTop={1} paddingRight={2}>
+      <Text color={colors.white} backgroundColor={colors.mutedDark}>
+        {'>'} {query}{' '}
+      </Text>
+    </Box>
+  );
+}

package/src/components/ApiKeyPrompt.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { colors } from '../theme.js';
+
+interface ApiKeyConfirmProps {
+  providerName: string;
+  onConfirm: (wantsToSet: boolean) => void;
+}
+
+export function ApiKeyConfirm({ providerName, onConfirm }: ApiKeyConfirmProps) {
+  useInput((input) => {
+    const key = input.toLowerCase();
+    if (key === 'y') {
+      onConfirm(true);
+    } else if (key === 'n') {
+      onConfirm(false);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={colors.primary} bold>
+        Set API Key
+      </Text>
+      <Text>
+        Would you like to set your {providerName} API key? <Text color={colors.muted}>(y/n)</Text>
+      </Text>
+    </Box>
+  );
+}
+
+interface ApiKeyInputProps {
+  providerName: string;
+  apiKeyName: string;
+  onSubmit: (apiKey: string | null) => void;
+}
+
+export function ApiKeyInput({ providerName, apiKeyName, onSubmit }: ApiKeyInputProps) {
+  const [value, setValue] = useState('');
+
+  useInput((input, key) => {
+    if (key.return) {
+      onSubmit(value.trim() || null);
+    } else if (key.escape) {
+      onSubmit(null);
+    } else if (key.backspace || key.delete) {
+      setValue((prev) => prev.slice(0, -1));
+    } else if (input && !key.ctrl && !key.meta) {
+      setValue((prev) => prev + input);
+    }
+  });
+
+  // Mask the API key for display
+  const maskedValue = value.length > 0 ? '*'.repeat(value.length) : '';
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={colors.primary} bold>
+        Enter {providerName} API Key
+      </Text>
+      <Text color={colors.muted}>
+        ({apiKeyName})
+      </Text>
+      <Box marginTop={1}>
+        <Text color={colors.primary}>{'> '}</Text>
+        <Text>{maskedValue}</Text>
+        <Text color={colors.muted}>█</Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color={colors.muted}>Enter to confirm · Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+}
+

package/src/components/CommandMenu.test.tsx

@@ -0,0 +1,64 @@
+import { describe, test, expect, afterEach } from 'bun:test';
+import React from 'react';
+import { render, cleanup } from 'ink-testing-library';
+import { CommandMenu } from './CommandMenu.js';
+import type { CommandDef } from '../commands/types.js';
+
+afterEach(cleanup);
+
+const testCommands: CommandDef[] = [
+  { name: 'help', description: 'Show help', type: 'local', execute: () => {} },
+  { name: 'clear', description: 'Clear history', type: 'local', execute: () => {} },
+  { name: 'model', description: 'Switch model', type: 'local', execute: () => {} },
+];
+
+describe('CommandMenu', () => {
+  test('renders nothing when commands list is empty', () => {
+    const { lastFrame } = render(
+      React.createElement(CommandMenu, { commands: [], selectedIndex: 0 })
+    );
+    expect(lastFrame()).toBe('');
+  });
+
+  test('renders all commands', () => {
+    const { lastFrame } = render(
+      React.createElement(CommandMenu, { commands: testCommands, selectedIndex: 0 })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('/help');
+    expect(frame).toContain('/clear');
+    expect(frame).toContain('/model');
+  });
+
+  test('shows descriptions', () => {
+    const { lastFrame } = render(
+      React.createElement(CommandMenu, { commands: testCommands, selectedIndex: 0 })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Show help');
+    expect(frame).toContain('Clear history');
+  });
+
+  test('highlights selected command with indicator', () => {
+    const { lastFrame } = render(
+      React.createElement(CommandMenu, { commands: testCommands, selectedIndex: 1 })
+    );
+    const frame = lastFrame()!;
+    // Selected item (index 1 = /clear) should have the selection indicator
+    const lines = frame.split('\n');
+    // Find the line with /clear
+    const clearLine = lines.find(l => l.includes('/clear'));
+    expect(clearLine).toContain('❯');
+  });
+
+  test('shows argHint when present', () => {
+    const cmdsWithHint: CommandDef[] = [
+      { name: 'history', description: 'Show history', argHint: '[search term]', type: 'local', execute: () => {} },
+    ];
+    const { lastFrame } = render(
+      React.createElement(CommandMenu, { commands: cmdsWithHint, selectedIndex: 0 })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('[search term]');
+  });
+});

package/src/components/CommandMenu.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+import type { CommandDef } from '../commands/types.js';
+
+interface CommandMenuProps {
+  /** Filtered command list to display */
+  commands: CommandDef[];
+  /** Currently selected index */
+  selectedIndex: number;
+}
+
+export function CommandMenu({ commands, selectedIndex }: CommandMenuProps) {
+  if (commands.length === 0) return null;
+
+  return (
+    <Box flexDirection="column" marginLeft={3} marginBottom={0}>
+      {commands.map((cmd, i) => {
+        const isSelected = i === selectedIndex;
+        return (
+          <Box key={cmd.name}>
+            <Text
+              color={isSelected ? colors.primary : colors.muted}
+              bold={isSelected}
+            >
+              {isSelected ? '❯ ' : '  '}
+              {'/' + cmd.name}
+            </Text>
+            {cmd.argHint && (
+              <Text color={colors.mutedDark}>{' ' + cmd.argHint}</Text>
+            )}
+            <Text color={colors.mutedDark}>{'  ' + cmd.description}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/CursorText.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Text } from 'ink';
+import chalk from 'chalk';
+
+interface CursorTextProps {
+  /** The text content to display */
+  text: string;
+  /** Current cursor position (0-indexed) */
+  cursorPosition: number;
+}
+
+/**
+ * Renders text with a block cursor at the specified position.
+ * Uses a single Text element with inline ANSI styling to ensure proper
+ * text wrapping across multiple terminal lines.
+ * - When cursor is within text, the character at cursor position is highlighted (inverse)
+ * - When cursor is at end, displays a block cursor (inverse space)
+ * - When cursor is on a newline, displays an inverse space at end of line, then the newline
+ */
+export function CursorText({ text, cursorPosition }: CursorTextProps) {
+  const beforeCursor = text.slice(0, cursorPosition);
+  const charAtCursor = cursorPosition < text.length ? text[cursorPosition] : null;
+
+  // If cursor is on a newline, display an inverse space at end of line
+  // then include the newline for proper line break rendering
+  const atCursor = charAtCursor === '\n' || charAtCursor === null ? ' ' : charAtCursor;
+
+  // If cursor is on newline, we need to include the newline after the inverse space
+  const afterCursor =
+    charAtCursor === '\n'
+      ? '\n' + text.slice(cursorPosition + 1)
+      : text.slice(cursorPosition + 1);
+
+  // Build a single string with ANSI escape codes for the cursor
+  // This ensures text wraps correctly across terminal lines
+  let displayText = beforeCursor + chalk.inverse(atCursor) + afterCursor;
+
+  // Indent all lines after the first to align with the "> " prompt offset
+  const indent = '  ';
+  displayText = displayText.replace(/\n/g, '\n' + indent);
+
+  return <Text>{displayText}</Text>;
+}

package/src/components/DebugPanel.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useDebugLogs } from '../hooks/useDebugLogs.js';
+import { colors } from '../theme.js';
+import type { LogLevel } from '../utils/logger.js';
+
+const levelColors: Record<LogLevel, string> = {
+  debug: colors.mutedDark,
+  info: colors.info,
+  warn: colors.warning,
+  error: colors.error,
+};
+
+interface DebugPanelProps {
+  maxLines?: number;
+  show?: boolean;
+}
+
+export function DebugPanel({ maxLines = 10, show = true }: DebugPanelProps) {
+  const logs = useDebugLogs();
+
+  if (!show || logs.length === 0) return null;
+
+  const displayLogs = logs.slice(-maxLines);
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={colors.mutedDark}
+      paddingX={1}
+      marginTop={1}
+    >
+      <Text color={colors.mutedDark} dimColor>─ Debug ─</Text>
+      {displayLogs.map(entry => (
+        <Box key={entry.id}>
+          <Text color={levelColors[entry.level]}>
+            [{entry.level.toUpperCase().padEnd(5)}]
+          </Text>
+          <Text> {entry.message}</Text>
+          {entry.data !== undefined && (
+            <Text color={colors.mutedDark}> {JSON.stringify(entry.data)}</Text>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}

package/src/components/ErrorBox.test.tsx

@@ -0,0 +1,58 @@
+import { describe, test, expect, afterEach } from 'bun:test';
+import React from 'react';
+import { render, cleanup } from 'ink-testing-library';
+import { ErrorBox } from './ErrorBox.js';
+
+afterEach(cleanup);
+
+describe('ErrorBox', () => {
+  test('renders error message', () => {
+    const { lastFrame } = render(
+      React.createElement(ErrorBox, { error: 'Something went wrong' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Something went wrong');
+  });
+
+  test('shows correct category for rate limit error', () => {
+    const { lastFrame } = render(
+      React.createElement(ErrorBox, { error: 'Rate limit exceeded' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Rate Limit');
+  });
+
+  test('shows suggestions for rate limit error', () => {
+    const { lastFrame } = render(
+      React.createElement(ErrorBox, { error: 'Rate limit exceeded' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Suggestions');
+    expect(frame).toContain('Wait');
+  });
+
+  test('shows correct category for auth error', () => {
+    const { lastFrame } = render(
+      React.createElement(ErrorBox, { error: 'Unauthorized: invalid API key' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Authentication Error');
+  });
+
+  test('shows suggestions for network error', () => {
+    const { lastFrame } = render(
+      React.createElement(ErrorBox, { error: 'connect ECONNREFUSED 127.0.0.1:11434' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Network Error');
+    expect(frame).toContain('connection');
+  });
+
+  test('shows Unknown Error for unrecognized errors', () => {
+    const { lastFrame } = render(
+      React.createElement(ErrorBox, { error: 'xyzzy foobar unknown' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Unknown Error');
+  });
+});

package/src/components/ErrorBox.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+import { classifyError } from '../utils/error-classifier.js';
+
+interface ErrorBoxProps {
+  error: string;
+}
+
+export function ErrorBox({ error }: ErrorBoxProps) {
+  const { category, suggestions } = classifyError(error);
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color={colors.error} bold>  {category}: <Text color={colors.error}>{error}</Text></Text>
+      {suggestions.length > 0 && (
+        <Box flexDirection="column" marginLeft={2} marginTop={0}>
+          <Text color={colors.muted} dimColor>  Suggestions:</Text>
+          {suggestions.map((s, i) => (
+            <Text key={i} color={colors.muted}>  · {s}</Text>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/HelpView.test.tsx

@@ -0,0 +1,70 @@
+import { describe, test, expect, afterEach } from 'bun:test';
+import React from 'react';
+import { render, cleanup } from 'ink-testing-library';
+import { HelpView, ShortcutsView } from './HelpView.js';
+import { registerBuiltinCommands } from '../commands/builtin.js';
+
+// Ensure commands are registered before tests
+registerBuiltinCommands();
+
+afterEach(cleanup);
+
+describe('HelpView', () => {
+  test('renders Commands section', () => {
+    const { lastFrame } = render(React.createElement(HelpView));
+    const frame = lastFrame()!;
+    expect(frame).toContain('Commands');
+  });
+
+  test('shows all registered visible commands', () => {
+    const { lastFrame } = render(React.createElement(HelpView));
+    const frame = lastFrame()!;
+    expect(frame).toContain('/help');
+    expect(frame).toContain('/clear');
+    expect(frame).toContain('/model');
+    expect(frame).toContain('/debug');
+    expect(frame).toContain('/cost');
+    expect(frame).toContain('/history');
+    expect(frame).toContain('/export');
+    expect(frame).toContain('/compact');
+  });
+
+  test('renders Keyboard Shortcuts section', () => {
+    const { lastFrame } = render(React.createElement(HelpView));
+    const frame = lastFrame()!;
+    expect(frame).toContain('Keyboard Shortcuts');
+  });
+
+  test('shows common keyboard shortcuts', () => {
+    const { lastFrame } = render(React.createElement(HelpView));
+    const frame = lastFrame()!;
+    expect(frame).toContain('Esc');
+    expect(frame).toContain('Ctrl+C');
+    expect(frame).toContain('Shift+Enter');
+    expect(frame).toContain('Ctrl+D');
+  });
+
+  test('shows tip about typing /', () => {
+    const { lastFrame } = render(React.createElement(HelpView));
+    const frame = lastFrame()!;
+    expect(frame).toContain('Type / to see available commands');
+  });
+});
+
+describe('ShortcutsView', () => {
+  test('renders Keyboard Shortcuts header', () => {
+    const { lastFrame } = render(React.createElement(ShortcutsView));
+    const frame = lastFrame()!;
+    expect(frame).toContain('Keyboard Shortcuts');
+  });
+
+  test('shows all shortcuts', () => {
+    const { lastFrame } = render(React.createElement(ShortcutsView));
+    const frame = lastFrame()!;
+    expect(frame).toContain('Esc');
+    expect(frame).toContain('Cancel');
+    expect(frame).toContain('Up/Down');
+    expect(frame).toContain('Ctrl+A');
+    expect(frame).toContain('Ctrl+E');
+  });
+});

package/src/components/HelpView.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+import { commandRegistry } from '../commands/registry.js';
+
+const KEYBOARD_SHORTCUTS = [
+  { keys: 'Esc', description: 'Cancel/interrupt agent' },
+  { keys: 'Ctrl+C', description: 'Cancel or exit' },
+  { keys: 'Shift+Enter', description: 'New line (multi-line input)' },
+  { keys: 'Up/Down', description: 'Navigate input history' },
+  { keys: 'Ctrl+A / Ctrl+E', description: 'Start/end of line' },
+  { keys: 'Opt+Left/Right', description: 'Word navigation' },
+  { keys: 'Opt+Backspace', description: 'Delete word' },
+  { keys: 'Ctrl+D', description: 'Toggle debug panel' },
+];
+
+export function HelpView() {
+  const commands = commandRegistry.getVisible();
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text color={colors.primary} bold>Commands</Text>
+      <Box flexDirection="column" marginLeft={2} marginBottom={1}>
+        {commands.map(cmd => (
+          <Box key={cmd.name}>
+            <Text color={colors.accent}>{'/' + cmd.name.padEnd(12)}</Text>
+            <Text color={colors.muted}>{cmd.description}</Text>
+          </Box>
+        ))}
+      </Box>
+
+      <Text color={colors.primary} bold>Keyboard Shortcuts</Text>
+      <Box flexDirection="column" marginLeft={2} marginBottom={1}>
+        {KEYBOARD_SHORTCUTS.map(s => (
+          <Box key={s.keys}>
+            <Text color={colors.accent}>{s.keys.padEnd(20)}</Text>
+            <Text color={colors.muted}>{s.description}</Text>
+          </Box>
+        ))}
+      </Box>
+
+      <Text color={colors.muted}>Type / to see available commands</Text>
+    </Box>
+  );
+}
+
+export function ShortcutsView() {
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text color={colors.primary} bold>Keyboard Shortcuts</Text>
+      <Box flexDirection="column" marginLeft={2}>
+        {KEYBOARD_SHORTCUTS.map(s => (
+          <Box key={s.keys}>
+            <Text color={colors.accent}>{s.keys.padEnd(20)}</Text>
+            <Text color={colors.muted}>{s.description}</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/components/HistoryItemView.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+import { EventListView } from './AgentEventView.js';
+import type { DisplayEvent } from './AgentEventView.js';
+import { AnswerBox } from './AnswerBox.js';
+import type { TokenUsage } from '../agent/types.js';
+
+/**
+ * Format duration in milliseconds to human-readable string
+ * e.g., "1m 31s", "45s", "500ms"
+ */
+function formatDuration(ms: number): string {
+  // Show milliseconds for sub-second durations
+  if (ms < 1000) {
+    return `${Math.round(ms)}ms`;
+  }
+  
+  const totalSeconds = Math.round(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  
+  if (minutes === 0) {
+    return `${seconds}s`;
+  }
+  
+  return `${minutes}m ${seconds}s`;
+}
+
+/**
+ * Format performance stats into a single string
+ */
+function formatPerformanceStats(
+  duration?: number,
+  tokenUsage?: TokenUsage,
+  tokensPerSecond?: number
+): string {
+  const parts: string[] = [];
+  if (duration !== undefined) parts.push(formatDuration(duration));
+  if (tokenUsage) parts.push(`${tokenUsage.totalTokens.toLocaleString()} tokens`);
+  if (tokensPerSecond !== undefined) parts.push(`(${tokensPerSecond.toFixed(1)} tok/s)`);
+  return parts.join(' · ');
+}
+
+export type HistoryItemStatus = 'processing' | 'complete' | 'error' | 'interrupted';
+
+export interface HistoryItem {
+  id: string;
+  query: string;
+  events: DisplayEvent[];
+  answer: string;
+  status: HistoryItemStatus;
+  activeToolId?: string;
+  /** Timestamp when this query started processing */
+  startTime?: number;
+  /** Total duration in milliseconds (set when complete) */
+  duration?: number;
+  /** Token usage statistics */
+  tokenUsage?: TokenUsage;
+  /** Tokens per second throughput */
+  tokensPerSecond?: number;
+}
+
+interface HistoryItemViewProps {
+  item: HistoryItem;
+}
+
+export function HistoryItemView({ item }: HistoryItemViewProps) {
+  // Add spacing after completed items, but not during processing
+  const isComplete = item.status === 'complete' || item.status === 'error' || item.status === 'interrupted';
+  
+  return (
+    <Box flexDirection="column" marginBottom={isComplete ? 1 : 0}>
+      {/* Query */}
+      <Box>
+        <Text color={colors.muted} backgroundColor={colors.queryBg}>{'❯ '}</Text>
+        <Text color={colors.white} backgroundColor={colors.queryBg}>{`${item.query} `}</Text>
+      </Box>
+            
+      {/* Interrupted indicator */}
+      {item.status === 'interrupted' && (
+        <Box marginLeft={2}>
+          <Text color={colors.muted}>⎿  Interrupted · What should Brownian do instead?</Text>
+        </Box>
+      )}
+      
+      {/* Events (tool calls, thinking) */}
+      <EventListView 
+        events={item.events} 
+        activeToolId={item.status === 'processing' ? item.activeToolId : undefined}
+      />
+      
+      {/* Answer - only show if we have one */}
+      {item.answer && (
+        <Box>
+          <AnswerBox text={item.answer} />
+        </Box>
+      )}
+      
+      {/* Performance stats - only show when token data is present */}
+      {item.status === 'complete' && item.tokenUsage && (
+        <Box marginTop={1}>
+          <Text color={colors.muted}>✻ {formatPerformanceStats(item.duration, item.tokenUsage, item.tokensPerSecond)}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}