brownian-code 2026.2.10

package/src/components/Input.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+import { colors } from '../theme.js';
+import { useTextBuffer } from '../hooks/useTextBuffer.js';
+import { cursorHandlers } from '../utils/input-key-handlers.js';
+import { CursorText } from './CursorText.js';
+
+interface InputProps {
+  onSubmit: (value: string) => void;
+  /** Value from history navigation (null = user typing fresh input) */
+  historyValue?: string | null;
+  /** Callback when user presses up/down arrow for history navigation */
+  onHistoryNavigate?: (direction: 'up' | 'down') => void;
+  /** Called on every text change (for slash command autocomplete) */
+  onTextChange?: (text: string) => void;
+  /** Whether the command autocomplete menu is visible */
+  commandMenuVisible?: boolean;
+  /** Navigate the command menu (up/down) */
+  onCommandMenuNavigate?: (direction: 'up' | 'down') => void;
+  /** Get the currently selected command from the menu */
+  getSelectedCommand?: () => string | null;
+}
+
+export function Input({
+  onSubmit,
+  historyValue,
+  onHistoryNavigate,
+  onTextChange,
+  commandMenuVisible,
+  onCommandMenuNavigate,
+  getSelectedCommand,
+}: InputProps) {
+  const { text, cursorPosition, actions } = useTextBuffer();
+
+  // Update input buffer when history navigation changes
+  useEffect(() => {
+    if (historyValue === null) {
+      // Returned to typing mode - clear input for fresh entry
+      actions.clear();
+    } else if (historyValue !== undefined) {
+      // Navigating history - show the historical message
+      actions.setValue(historyValue);
+    }
+  }, [historyValue]);
+
+  // Notify parent of text changes
+  useEffect(() => {
+    onTextChange?.(text);
+  }, [text]);
+
+  // Handle all input
+  useInput((input, key) => {
+    const ctx = { text, cursorPosition };
+
+    // Up arrow: if command menu is visible, navigate menu; else cursor/history
+    if (key.upArrow) {
+      if (commandMenuVisible && onCommandMenuNavigate) {
+        onCommandMenuNavigate('up');
+        return;
+      }
+      const newPos = cursorHandlers.moveUp(ctx);
+      if (newPos !== null) {
+        actions.moveCursor(newPos);
+      } else if (onHistoryNavigate) {
+        onHistoryNavigate('up');
+      }
+      return;
+    }
+
+    // Down arrow: if command menu is visible, navigate menu; else cursor/history
+    if (key.downArrow) {
+      if (commandMenuVisible && onCommandMenuNavigate) {
+        onCommandMenuNavigate('down');
+        return;
+      }
+      const newPos = cursorHandlers.moveDown(ctx);
+      if (newPos !== null) {
+        actions.moveCursor(newPos);
+      } else if (onHistoryNavigate) {
+        onHistoryNavigate('down');
+      }
+      return;
+    }
+
+    // Cursor movement - left arrow (plain, no modifiers)
+    if (key.leftArrow && !key.ctrl && !key.meta) {
+      actions.moveCursor(cursorHandlers.moveLeft(ctx));
+      return;
+    }
+
+    // Cursor movement - right arrow (plain, no modifiers)
+    if (key.rightArrow && !key.ctrl && !key.meta) {
+      actions.moveCursor(cursorHandlers.moveRight(ctx));
+      return;
+    }
+
+    // Ctrl+A - move to beginning of current line
+    if (key.ctrl && input === 'a') {
+      actions.moveCursor(cursorHandlers.moveToLineStart(ctx));
+      return;
+    }
+
+    // Ctrl+E - move to end of current line
+    if (key.ctrl && input === 'e') {
+      actions.moveCursor(cursorHandlers.moveToLineEnd(ctx));
+      return;
+    }
+
+    // Option+Left (Mac) / Ctrl+Left (Windows) / Alt+B - word backward
+    if ((key.meta && key.leftArrow) || (key.ctrl && key.leftArrow) || (key.meta && input === 'b')) {
+      actions.moveCursor(cursorHandlers.moveWordBackward(ctx));
+      return;
+    }
+
+    // Option+Right (Mac) / Ctrl+Right (Windows) / Alt+F - word forward
+    if ((key.meta && key.rightArrow) || (key.ctrl && key.rightArrow) || (key.meta && input === 'f')) {
+      actions.moveCursor(cursorHandlers.moveWordForward(ctx));
+      return;
+    }
+
+    // Option+Backspace (Mac) / Ctrl+Backspace (Windows) - delete word backward
+    if ((key.meta || key.ctrl) && (key.backspace || key.delete)) {
+      actions.deleteWordBackward();
+      return;
+    }
+
+    // Handle backspace/delete - delete character before cursor
+    if (key.backspace || key.delete) {
+      actions.deleteBackward();
+      return;
+    }
+
+    // Shift+Enter - insert newline for multi-line input
+    if (key.return && key.shift) {
+      actions.insert('\n');
+      return;
+    }
+
+    // Tab - insert selected command from menu (if visible)
+    if (key.tab && commandMenuVisible && getSelectedCommand) {
+      const selected = getSelectedCommand();
+      if (selected) {
+        actions.setValue(selected + ' ', true);
+        return;
+      }
+    }
+
+    // Handle submit (plain Enter)
+    if (key.return) {
+      // If command menu is visible, insert selected command and execute
+      if (commandMenuVisible && getSelectedCommand) {
+        const selected = getSelectedCommand();
+        if (selected) {
+          actions.clear();
+          onSubmit(selected);
+          return;
+        }
+      }
+
+      const val = text.trim();
+      if (val) {
+        onSubmit(val);
+        actions.clear();
+      }
+      return;
+    }
+
+    // Handle regular character input - insert at cursor position
+    if (input && !key.ctrl && !key.meta) {
+      actions.insert(input);
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      marginBottom={1}
+      borderStyle="single"
+      borderColor={colors.mutedDark}
+      borderLeft={false}
+      borderRight={false}
+      width="100%"
+    >
+      <Box paddingX={1}>
+        <Text color={colors.primary} bold>
+          {'> '}
+        </Text>
+        <CursorText text={text} cursorPosition={cursorPosition} />
+      </Box>
+    </Box>
+  );
+}

package/src/components/Intro.test.tsx

@@ -0,0 +1,59 @@
+import { describe, test, expect, afterEach } from 'bun:test';
+import React from 'react';
+import { render, cleanup } from 'ink-testing-library';
+import { Intro } from './Intro.js';
+
+afterEach(cleanup);
+
+describe('Intro', () => {
+  test('renders Brownian Code title', () => {
+    const { lastFrame } = render(
+      React.createElement(Intro, { provider: 'anthropic', model: 'claude-sonnet-4-5' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Brownian Code');
+  });
+
+  test('renders version number', () => {
+    const { lastFrame } = render(
+      React.createElement(Intro, { provider: 'anthropic', model: 'claude-sonnet-4-5' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('v2026');
+  });
+
+  test('renders crypto research description', () => {
+    const { lastFrame } = render(
+      React.createElement(Intro, { provider: 'anthropic', model: 'claude-sonnet-4-5' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('crypto research');
+  });
+
+  test('shows model display name', () => {
+    const { lastFrame } = render(
+      React.createElement(Intro, { provider: 'anthropic', model: 'claude-sonnet-4-5' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Model:');
+  });
+
+  test('shows /model hint', () => {
+    const { lastFrame } = render(
+      React.createElement(Intro, { provider: 'anthropic', model: 'claude-sonnet-4-5' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Type /model to change');
+  });
+
+  test('contains figlet ASCII art banner', () => {
+    const { lastFrame } = render(
+      React.createElement(Intro, { provider: 'anthropic', model: 'claude-sonnet-4-5' })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('____');
+    expect(frame).toContain('/ __');
+  });
+
+
+});

package/src/components/Intro.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import figlet from 'figlet';
+import { colors } from '../theme.js';
+import packageJson from '../../package.json';
+import { getModelDisplayName } from './ModelSelector.js';
+
+interface IntroProps {
+  provider: string;
+  model: string;
+}
+
+const BANNER_LINES = figlet
+  .textSync('BROWNIAN', { font: 'Slant' as figlet.Fonts })
+  .split('\n')
+  .filter(l => l.trimEnd().length > 0);
+
+export function Intro({ provider, model }: IntroProps) {
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {BANNER_LINES.map((line, i) => (
+        <Text key={i} color={colors.primary} bold>
+          {line}
+        </Text>
+      ))}
+      <Box marginY={1} flexDirection="column">
+        <Text color={colors.muted}>Brownian Code <Text dimColor>v{packageJson.version}</Text></Text>
+        <Text>Your AI agent for crypto research.</Text>
+        <Text color={colors.muted}>
+          Model: <Text color={colors.primary}>{getModelDisplayName(model)}.</Text> Type /model to change.
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/ModelSelector.tsx

@@ -0,0 +1,288 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { colors } from '../theme.js';
+import { PROVIDERS as PROVIDER_DEFS } from '@/providers';
+
+export interface Model {
+  id: string;          // API model identifier (e.g., "claude-opus-4-6")
+  displayName: string; // Human-readable name (e.g., "Opus 4.6")
+}
+
+interface Provider {
+  displayName: string;
+  providerId: string;
+  models: Model[];
+}
+
+// UI-specific model lists per provider (presentation data only)
+const PROVIDER_MODELS: Record<string, Model[]> = {
+  openai: [
+    { id: 'gpt-5.2', displayName: 'GPT 5.2' },
+    { id: 'gpt-4.1', displayName: 'GPT 4.1' },
+  ],
+  anthropic: [
+    { id: 'claude-sonnet-4-5', displayName: 'Sonnet 4.5' },
+    { id: 'claude-opus-4-6', displayName: 'Opus 4.6' },
+  ],
+  google: [
+    { id: 'gemini-3-flash-preview', displayName: 'Gemini 3 Flash' },
+    { id: 'gemini-3-pro-preview', displayName: 'Gemini 3 Pro' },
+  ],
+  xai: [
+    { id: 'grok-4-0709', displayName: 'Grok 4' },
+    { id: 'grok-4-1-fast-reasoning', displayName: 'Grok 4.1 Fast Reasoning' },
+  ],
+  moonshot: [
+    { id: 'kimi-k2-5', displayName: 'Kimi K2.5' },
+  ],
+  deepseek: [
+    { id: 'deepseek-chat', displayName: 'DeepSeek V3' },
+    { id: 'deepseek-reasoner', displayName: 'DeepSeek R1' },
+  ],
+};
+
+// Derive the provider list from the canonical registry, attaching local model lists
+const PROVIDERS: Provider[] = PROVIDER_DEFS.map((p) => ({
+  displayName: p.displayName,
+  providerId: p.id,
+  models: PROVIDER_MODELS[p.id] ?? [],
+}));
+
+export function getModelsForProvider(providerId: string): Model[] {
+  const provider = PROVIDERS.find((p) => p.providerId === providerId);
+  return provider?.models ?? [];
+}
+
+export function getModelIdsForProvider(providerId: string): string[] {
+  return getModelsForProvider(providerId).map((m) => m.id);
+}
+
+export function getDefaultModelForProvider(providerId: string): string | undefined {
+  const models = getModelsForProvider(providerId);
+  return models[0]?.id;
+}
+
+export function getModelDisplayName(modelId: string): string {
+  // Handle prefixed model IDs (e.g., "ollama:llama3", "openrouter:anthropic/claude-3.5")
+  const normalizedId = modelId.replace(/^(ollama|openrouter):/, '');
+  
+  // Search through all providers for the model
+  for (const provider of PROVIDERS) {
+    const model = provider.models.find((m) => m.id === normalizedId || m.id === modelId);
+    if (model) {
+      return model.displayName;
+    }
+  }
+  
+  // Fallback: return the model ID as-is (for dynamic models like Ollama or OpenRouter)
+  return normalizedId;
+}
+
+interface ProviderSelectorProps {
+  provider?: string;
+  onSelect: (providerId: string | null) => void;
+}
+
+export function ProviderSelector({ provider, onSelect }: ProviderSelectorProps) {
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    if (provider) {
+      const idx = PROVIDERS.findIndex((p) => p.providerId === provider);
+      return idx >= 0 ? idx : 0;
+    }
+    return 0;
+  });
+
+  useInput((input, key) => {
+    if (key.upArrow || input === 'k') {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow || input === 'j') {
+      setSelectedIndex((prev) => Math.min(PROVIDERS.length - 1, prev + 1));
+    } else if (key.return) {
+      onSelect(PROVIDERS[selectedIndex].providerId);
+    } else if (key.escape) {
+      onSelect(null);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={colors.primary} bold>
+        Select provider
+      </Text>
+      <Text color={colors.muted}>
+        Switch between LLM providers. Applies to this session and future sessions.
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        {PROVIDERS.map((p, idx) => {
+          const isSelected = idx === selectedIndex;
+          const isCurrent = provider === p.providerId;
+          const prefix = isSelected ? '> ' : '  ';
+
+          return (
+            <Text
+              key={p.providerId}
+              color={isSelected ? colors.primaryLight : colors.primary}
+              bold={isSelected}
+            >
+              {prefix}
+              {idx + 1}. {p.displayName}
+              {isCurrent ? ' ✓' : ''}
+            </Text>
+          );
+        })}
+      </Box>
+      <Box marginTop={1}>
+        <Text color={colors.muted}>Enter to confirm · esc to exit</Text>
+      </Box>
+    </Box>
+  );
+}
+
+interface ModelSelectorProps {
+  providerId: string;
+  models: Model[];
+  currentModel?: string;
+  onSelect: (modelId: string | null) => void;
+}
+
+interface ModelInputFieldProps {
+  providerId: string;
+  currentModel?: string;
+  onSubmit: (modelId: string | null) => void;
+}
+
+export function ModelInputField({ providerId, currentModel, onSubmit }: ModelInputFieldProps) {
+  // Extract existing model name if it has the openrouter: prefix
+  const initialValue = currentModel?.startsWith('openrouter:')
+    ? currentModel.replace(/^openrouter:/, '')
+    : '';
+  
+  const [inputValue, setInputValue] = useState(initialValue);
+  
+  const provider = PROVIDERS.find((p) => p.providerId === providerId);
+  const providerName = provider?.displayName ?? providerId;
+
+  useInput((input, key) => {
+    if (key.return) {
+      const trimmed = inputValue.trim();
+      if (trimmed) {
+        onSubmit(trimmed);
+      }
+    } else if (key.escape) {
+      onSubmit(null);
+    } else if (key.backspace || key.delete) {
+      setInputValue((prev) => prev.slice(0, -1));
+    } else if (input && !key.ctrl && !key.meta) {
+      setInputValue((prev) => prev + input);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={colors.primary} bold>
+        Enter model name for {providerName}
+      </Text>
+      <Text color={colors.muted}>
+        Type or paste the model name from openrouter.ai/models
+      </Text>
+      <Box marginTop={1}>
+        <Text color={colors.primaryLight}>{'> '}</Text>
+        <Text color={colors.primary}>{inputValue}</Text>
+        <Text color={colors.primaryLight}>_</Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text color={colors.muted}>
+          Examples: anthropic/claude-3.5-sonnet, openai/gpt-4-turbo, meta-llama/llama-3-70b
+        </Text>
+      </Box>
+      <Box marginTop={1}>
+        <Text color={colors.muted}>Enter to confirm · esc to go back</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function ModelSelector({ providerId, models, currentModel, onSelect }: ModelSelectorProps) {
+  // For Ollama, the currentModel is stored with "ollama:" prefix, but models list doesn't have it
+  const normalizedCurrentModel = providerId === 'ollama' && currentModel?.startsWith('ollama:')
+    ? currentModel.replace(/^ollama:/, '')
+    : currentModel;
+
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    if (normalizedCurrentModel) {
+      const idx = models.findIndex((m) => m.id === normalizedCurrentModel);
+      return idx >= 0 ? idx : 0;
+    }
+    return 0;
+  });
+
+  const provider = PROVIDERS.find((p) => p.providerId === providerId);
+  const providerName = provider?.displayName ?? providerId;
+
+  useInput((input, key) => {
+    if (key.upArrow || input === 'k') {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow || input === 'j') {
+      setSelectedIndex((prev) => Math.min(models.length - 1, prev + 1));
+    } else if (key.return) {
+      if (models.length > 0) {
+        onSelect(models[selectedIndex].id);
+      }
+    } else if (key.escape) {
+      onSelect(null);
+    }
+  });
+
+  if (models.length === 0) {
+    return (
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={colors.primary} bold>
+          Select model for {providerName}
+        </Text>
+        <Box marginTop={1}>
+          <Text color={colors.muted}>No models available. </Text>
+          {providerId === 'ollama' && (
+            <Text color={colors.muted}>
+              Make sure Ollama is running and you have models downloaded.
+            </Text>
+          )}
+        </Box>
+        <Box marginTop={1}>
+          <Text color={colors.muted}>esc to go back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={colors.primary} bold>
+        Select model for {providerName}
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        {models.map((model, idx) => {
+          const isSelected = idx === selectedIndex;
+          const isCurrent = normalizedCurrentModel === model.id;
+          const prefix = isSelected ? '> ' : '  ';
+
+          return (
+            <Text
+              key={model.id}
+              color={isSelected ? colors.primaryLight : colors.primary}
+              bold={isSelected}
+            >
+              {prefix}
+              {idx + 1}. {model.displayName}
+              {isCurrent ? ' ✓' : ''}
+            </Text>
+          );
+        })}
+      </Box>
+      <Box marginTop={1}>
+        <Text color={colors.muted}>Enter to confirm · esc to go back</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export { PROVIDERS };

package/src/components/StatusBar.test.tsx

@@ -0,0 +1,78 @@
+import { describe, test, expect, afterEach } from 'bun:test';
+import React from 'react';
+import { render, cleanup } from 'ink-testing-library';
+import { StatusBar } from './StatusBar.js';
+
+afterEach(cleanup);
+
+describe('StatusBar', () => {
+  test('renders nothing when turnCount is 0', () => {
+    const { lastFrame } = render(
+      React.createElement(StatusBar, {
+        modelDisplayName: 'Sonnet 4.5',
+        cumulativeTokens: 0,
+        cumulativeCost: 0,
+        turnCount: 0,
+      })
+    );
+    expect(lastFrame()).toBe('');
+  });
+
+  test('renders model name, tokens, cost, and turn count', () => {
+    const { lastFrame } = render(
+      React.createElement(StatusBar, {
+        modelDisplayName: 'Sonnet 4.5',
+        cumulativeTokens: 1234,
+        cumulativeCost: 0.0042,
+        turnCount: 3,
+      })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('Sonnet 4.5');
+    expect(frame).toContain('1,234 tokens');
+    expect(frame).toContain('$0.0042');
+    expect(frame).toContain('3 turns');
+  });
+
+  test('uses singular "turn" for turnCount 1', () => {
+    const { lastFrame } = render(
+      React.createElement(StatusBar, {
+        modelDisplayName: 'GPT-5.2',
+        cumulativeTokens: 500,
+        cumulativeCost: 0.001,
+        turnCount: 1,
+      })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('1 turn');
+    expect(frame).not.toContain('1 turns');
+  });
+
+  test('shows context warning at >90%', () => {
+    const { lastFrame } = render(
+      React.createElement(StatusBar, {
+        modelDisplayName: 'Sonnet 4.5',
+        cumulativeTokens: 100000,
+        cumulativeCost: 1.5,
+        turnCount: 10,
+        contextPercentage: 95,
+      })
+    );
+    const frame = lastFrame()!;
+    expect(frame).toContain('/compact');
+  });
+
+  test('does not show context warning at 50%', () => {
+    const { lastFrame } = render(
+      React.createElement(StatusBar, {
+        modelDisplayName: 'Sonnet 4.5',
+        cumulativeTokens: 5000,
+        cumulativeCost: 0.05,
+        turnCount: 2,
+        contextPercentage: 50,
+      })
+    );
+    const frame = lastFrame()!;
+    expect(frame).not.toContain('/compact');
+  });
+});