brownian-code 2026.2.10

package/src/components/StatusBar.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+import { formatCost } from '../utils/cost-calculator.js';
+
+interface StatusBarProps {
+  modelDisplayName: string;
+  cumulativeTokens: number;
+  cumulativeCost: number;
+  turnCount: number;
+  contextPercentage?: number;
+}
+
+export function StatusBar({
+  modelDisplayName,
+  cumulativeTokens,
+  cumulativeCost,
+  turnCount,
+  contextPercentage,
+}: StatusBarProps) {
+  // Don't show until there's something to display
+  if (turnCount === 0) return null;
+
+  // Token count color based on context usage
+  let tokenColor: string = colors.muted;
+  let contextWarning = '';
+  if (contextPercentage !== undefined) {
+    if (contextPercentage > 90) {
+      tokenColor = colors.error;
+      contextWarning = ' (use /compact)';
+    } else if (contextPercentage > 70) {
+      tokenColor = colors.warning;
+    }
+  }
+
+  const parts = [
+    modelDisplayName,
+    `${cumulativeTokens.toLocaleString()} tokens`,
+    formatCost(cumulativeCost),
+    `${turnCount} ${turnCount === 1 ? 'turn' : 'turns'}`,
+  ];
+
+  return (
+    <Box>
+      <Text color={colors.mutedDark}>{'┄ '}</Text>
+      <Text color={colors.muted}>{parts[0]}</Text>
+      <Text color={colors.mutedDark}>{' · '}</Text>
+      <Text color={tokenColor}>{parts[1]}{contextWarning}</Text>
+      <Text color={colors.mutedDark}>{' · '}</Text>
+      <Text color={colors.muted}>{parts[2]}</Text>
+      <Text color={colors.mutedDark}>{' · '}</Text>
+      <Text color={colors.muted}>{parts[3]}</Text>
+      <Text color={colors.mutedDark}>{' ┄'}</Text>
+    </Box>
+  );
+}

package/src/components/WorkingIndicator.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { colors } from '../theme.js';
+import { getRandomThinkingVerb } from '../utils/thinking-verbs.js';
+
+/**
+ * Renders text with a shine effect that sweeps left-to-right
+ */
+function ShineText({ text, color, shineColor }: { text: string; color: string; shineColor: string }) {
+  const [shinePos, setShinePos] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  
+  useEffect(() => {
+    if (isPaused) {
+      // Wait 2 seconds before restarting the shine
+      const timeout = setTimeout(() => {
+        setShinePos(0);
+        setIsPaused(false);
+      }, 2000);
+      return () => clearTimeout(timeout);
+    }
+    
+    const interval = setInterval(() => {
+      setShinePos((prev) => {
+        const next = prev + 1;
+        if (next >= text.length) {
+          setIsPaused(true);
+          return prev; // Keep at end position until pause completes
+        }
+        return next;
+      });
+    }, 60);
+    
+    return () => clearInterval(interval);
+  }, [isPaused, text.length]);
+  
+  // Memoize the rendered parts for performance
+  const parts = useMemo(() => {
+    const result: React.ReactNode[] = [];
+    for (let i = 0; i < text.length; i++) {
+      // Highlight characters within 1.25 of shine position (~2.5 char width)
+      const isShine = !isPaused && Math.abs(i - shinePos) < 1.25;
+      result.push(
+        <Text key={i} color={isShine ? shineColor : color}>
+          {text[i]}
+        </Text>
+      );
+    }
+    return result;
+  }, [text, shinePos, isPaused, color, shineColor]);
+  
+  return <>{parts}</>;
+}
+
+export type WorkingState = 
+  | { status: 'idle' }
+  | { status: 'thinking' }
+  | { status: 'tool'; toolName: string }
+  | { status: 'answering'; startTime: number };
+
+interface WorkingIndicatorProps {
+  state: WorkingState;
+}
+
+/**
+ * Persistent status indicator shown above the input box while agent is working
+ */
+export function WorkingIndicator({ state }: WorkingIndicatorProps) {
+  const [elapsed, setElapsed] = useState(0);
+  const [thinkingVerb, setThinkingVerb] = useState(getRandomThinkingVerb);
+  const prevStatusRef = useRef<WorkingState['status']>('idle');
+  
+  // Pick a new random verb when transitioning into thinking/tool state
+  useEffect(() => {
+    const isThinking = state.status === 'thinking' || state.status === 'tool';
+    const wasThinking = prevStatusRef.current === 'thinking' || prevStatusRef.current === 'tool';
+    
+    if (isThinking && !wasThinking) {
+      setThinkingVerb(getRandomThinkingVerb());
+    }
+    
+    prevStatusRef.current = state.status;
+  }, [state.status]);
+  
+  // Track elapsed time only when answering
+  useEffect(() => {
+    if (state.status !== 'answering') {
+      setElapsed(0);
+      return;
+    }
+    
+    const startTime = state.startTime;
+    setElapsed(Math.floor((Date.now() - startTime) / 1000));
+    
+    const interval = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startTime) / 1000));
+    }, 1000);
+    
+    return () => clearInterval(interval);
+  }, [state]);
+  
+  if (state.status === 'idle') {
+    return null;
+  }
+  
+  let statusWord: string;
+  let suffixEnd: string;
+  switch (state.status) {
+    case 'thinking':
+    case 'tool':
+      statusWord = `${thinkingVerb}...`;
+      suffixEnd = ' to interrupt)';
+      break;
+    case 'answering':
+      statusWord = 'Answering';
+      suffixEnd = ` to interrupt)`;
+      break;
+  }
+  
+  return (
+    <Box>
+      <Text color={colors.primary}>
+        <Spinner type="dots" />
+      </Text>
+      <Text color={colors.primary}> </Text>
+      <ShineText text={statusWord} color={colors.primary} shineColor={colors.primaryLight} />
+      <Text color={colors.muted}> (</Text>
+      <Text color={colors.muted} bold>esc</Text>
+      <Text color={colors.muted}>{suffixEnd}</Text>
+    </Box>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,23 @@
+export { Intro } from './Intro.js';
+export { Input } from './Input.js';
+export { CursorText } from './CursorText.js';
+export { AnswerBox } from './AnswerBox.js';
+export { ProviderSelector, ModelSelector, PROVIDERS, getModelsForProvider, getDefaultModelForProvider } from './ModelSelector.js';
+export { ApiKeyConfirm, ApiKeyInput } from './ApiKeyPrompt.js';
+export { DebugPanel } from './DebugPanel.js';
+
+// V2 components
+export { EventListView } from './AgentEventView.js';
+export type { DisplayEvent } from './AgentEventView.js';
+
+export { WorkingIndicator } from './WorkingIndicator.js';
+export type { WorkingState } from './WorkingIndicator.js';
+
+export { HistoryItemView } from './HistoryItemView.js';
+export type { HistoryItem } from './HistoryItemView.js';
+
+// UI enhancement components
+export { StatusBar } from './StatusBar.js';
+export { CommandMenu } from './CommandMenu.js';
+export { HelpView, ShortcutsView } from './HelpView.js';
+export { ErrorBox } from './ErrorBox.js';

package/src/e2e/agent-flow.test.ts

@@ -0,0 +1,378 @@
+/**
+ * End-to-end integration tests for the agent flow.
+ * Tests the complete event sequence with mocked LLM + tools.
+ */
+import { describe, test, expect, mock, beforeAll, afterAll, beforeEach } from 'bun:test';
+import { createMockAIMessage, createMockTool, createTempDir } from '../test-utils/mocks.js';
+import type { AgentEvent, DoneEvent, ToolEndEvent, ToolErrorEvent, ContextClearedEvent } from '../agent/types.js';
+
+// ---------------------------------------------------------------------------
+// Mock all external dependencies
+// ---------------------------------------------------------------------------
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mockCallLlm = mock(async (): Promise<any> => ({
+  response: 'default',
+  usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+}));
+
+mock.module('../model/llm.js', () => ({
+  callLlm: mockCallLlm,
+  DEFAULT_MODEL: 'claude-sonnet-4-5',
+}));
+
+const testTools = {
+  search: createMockTool('search', (args) => {
+    return JSON.stringify({ query: args.query, result: 'BTC $65,000, ETH $3,500' });
+  }),
+  api: createMockTool('api', (args) => {
+    return JSON.stringify({ endpoint: args.endpoint, data: { price: 65000 } });
+  }),
+  broken: createMockTool('broken', () => {
+    throw new Error('Connection timeout');
+  }),
+  slow: createMockTool('slow', async () => {
+    await new Promise(r => setTimeout(r, 10));
+    return 'slow result';
+  }),
+  bigdata: createMockTool('bigdata', () => {
+    // Returns a huge result to trigger context clearing
+    return 'x'.repeat(200_000);
+  }),
+};
+
+const mockGetTools = mock(() => Object.values(testTools));
+
+mock.module('../tools/registry.js', () => ({
+  getTools: mockGetTools,
+  buildToolDescriptions: () => 'Test tool descriptions',
+}));
+
+mock.module('../agent/prompts.js', () => ({
+  buildSystemPrompt: () => 'Test system prompt.',
+  buildIterationPrompt: (query: string, results: string) => `Query: ${query}\nResults: ${results}`,
+  buildFinalAnswerPrompt: (query: string, context: string) => `Answer: ${query}\nContext: ${context}`,
+  DEFAULT_SYSTEM_PROMPT: 'Default test prompt.',
+}));
+
+mock.module('../utils/tool-description.js', () => ({
+  getToolDescription: (name: string) => name,
+}));
+
+mock.module('../skills/index.js', () => ({
+  discoverSkills: () => [],
+  buildSkillMetadataSection: () => '',
+}));
+
+const { Agent } = await import('../agent/agent.js');
+
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+
+let originalCwd: string;
+let cleanup: () => void;
+
+beforeAll(() => {
+  originalCwd = process.cwd();
+  const tmp = createTempDir();
+  cleanup = tmp.cleanup;
+  process.chdir(tmp.path);
+});
+
+afterAll(() => {
+  process.chdir(originalCwd);
+  cleanup();
+});
+
+beforeEach(() => {
+  mockCallLlm.mockClear();
+  mockGetTools.mockClear();
+  mockGetTools.mockReturnValue(Object.values(testTools));
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+async function collectEvents(query: string, config = {}): Promise<AgentEvent[]> {
+  const agent = Agent.create({ model: 'claude-sonnet-4-5', ...config });
+  const events: AgentEvent[] = [];
+  for await (const event of agent.run(query)) {
+    events.push(event);
+  }
+  return events;
+}
+
+function findEvent<T extends AgentEvent>(events: AgentEvent[], type: string): T | undefined {
+  return events.find(e => e.type === type) as T | undefined;
+}
+
+function findAllEvents<T extends AgentEvent>(events: AgentEvent[], type: string): T[] {
+  return events.filter(e => e.type === type) as T[];
+}
+
+// ---------------------------------------------------------------------------
+// Test: Complete price lookup flow
+// ---------------------------------------------------------------------------
+
+describe('E2E: price lookup flow', () => {
+  test('query → tool_call → tool_end → final answer', async () => {
+    // Step 1: LLM decides to search
+    mockCallLlm.mockResolvedValueOnce({
+      response: createMockAIMessage('Searching for price data', [
+        { name: 'search', args: { query: 'BTC price' } },
+      ]),
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+    // Step 2: LLM sees results, decides to answer
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'I have the data.',
+      usage: { inputTokens: 200, outputTokens: 50, totalTokens: 250 },
+    });
+    // Step 3: Final answer generation
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'BTC is currently at $65,000.',
+      usage: { inputTokens: 150, outputTokens: 80, totalTokens: 230 },
+    });
+
+    const events = await collectEvents('What is the BTC price?');
+
+    // Verify event sequence
+    const types = events.map(e => e.type);
+    expect(types).toContain('thinking');
+    expect(types).toContain('tool_start');
+    expect(types).toContain('tool_end');
+    expect(types).toContain('answer_start');
+    expect(types).toContain('done');
+
+    // Verify tool_start comes before tool_end
+    const startIdx = types.indexOf('tool_start');
+    const endIdx = types.indexOf('tool_end');
+    expect(startIdx).toBeLessThan(endIdx);
+
+    // Verify answer_start comes before done
+    const answerIdx = types.indexOf('answer_start');
+    const doneIdx = types.indexOf('done');
+    expect(answerIdx).toBeLessThan(doneIdx);
+
+    // Verify done event
+    const done = findEvent<DoneEvent>(events, 'done')!;
+    expect(done.answer).toBe('BTC is currently at $65,000.');
+    expect(done.toolCalls.length).toBe(1);
+    expect(done.toolCalls[0].tool).toBe('search');
+    expect(done.iterations).toBeGreaterThanOrEqual(1);
+    expect(done.tokenUsage).toBeDefined();
+    expect(done.tokenUsage!.totalTokens).toBe(630); // 150+250+230
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test: Tool error recovery
+// ---------------------------------------------------------------------------
+
+describe('E2E: tool error recovery', () => {
+  test('first tool fails → second tool works → answer produced', async () => {
+    // LLM calls the broken tool
+    mockCallLlm.mockResolvedValueOnce({
+      response: createMockAIMessage('', [
+        { name: 'broken', args: {} },
+      ]),
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+    // LLM sees error, tries different tool
+    mockCallLlm.mockResolvedValueOnce({
+      response: createMockAIMessage('Let me try a different approach', [
+        { name: 'search', args: { query: 'BTC' } },
+      ]),
+      usage: { inputTokens: 200, outputTokens: 50, totalTokens: 250 },
+    });
+    // LLM generates answer
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'Got the data now.',
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+    // Final answer
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'Despite initial error, BTC is $65k.',
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+
+    const events = await collectEvents('BTC with error recovery');
+
+    const types = events.map(e => e.type);
+    expect(types).toContain('tool_error');
+    expect(types).toContain('done');
+
+    const error = findEvent<ToolErrorEvent>(events, 'tool_error')!;
+    expect(error.error).toContain('Connection timeout');
+
+    const done = findEvent<DoneEvent>(events, 'done')!;
+    expect(done.answer).toBeDefined();
+    expect(done.toolCalls.length).toBe(2); // broken + search
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test: Multi-tool flow
+// ---------------------------------------------------------------------------
+
+describe('E2E: multi-tool flow', () => {
+  test('LLM requests multiple tools → all execute → comprehensive answer', async () => {
+    // LLM requests two tools at once
+    mockCallLlm.mockResolvedValueOnce({
+      response: createMockAIMessage('Gathering data from multiple sources', [
+        { name: 'search', args: { query: 'BTC price' } },
+        { name: 'api', args: { endpoint: 'market-data' } },
+      ]),
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+    // LLM generates answer
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'All data gathered.',
+      usage: { inputTokens: 200, outputTokens: 100, totalTokens: 300 },
+    });
+    // Final answer
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'BTC: $65k, market looks strong.',
+      usage: { inputTokens: 150, outputTokens: 80, totalTokens: 230 },
+    });
+
+    const events = await collectEvents('Full market overview');
+
+    const toolEnds = findAllEvents<ToolEndEvent>(events, 'tool_end');
+    expect(toolEnds.length).toBe(2);
+
+    const toolNames = toolEnds.map(e => e.tool);
+    expect(toolNames).toContain('search');
+    expect(toolNames).toContain('api');
+
+    const done = findEvent<DoneEvent>(events, 'done')!;
+    expect(done.toolCalls.length).toBe(2);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test: Direct answer (no tools needed)
+// ---------------------------------------------------------------------------
+
+describe('E2E: direct answer', () => {
+  test('greeting → direct response, no tool calls', async () => {
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'Hello! I can help with crypto research.',
+      usage: { inputTokens: 50, outputTokens: 30, totalTokens: 80 },
+    });
+
+    const events = await collectEvents('Hello');
+
+    const types = events.map(e => e.type);
+    expect(types).not.toContain('tool_start');
+    expect(types).toContain('done');
+
+    const done = findEvent<DoneEvent>(events, 'done')!;
+    expect(done.answer).toBe('Hello! I can help with crypto research.');
+    expect(done.toolCalls.length).toBe(0);
+    expect(done.iterations).toBe(1);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test: Max iterations with final answer
+// ---------------------------------------------------------------------------
+
+describe('E2E: max iterations', () => {
+  test('always calls tools → stops at limit → still produces answer', async () => {
+    let callNum = 0;
+    mockCallLlm.mockImplementation(async () => {
+      callNum++;
+      if (callNum <= 3) {
+        return {
+          response: createMockAIMessage('', [
+            { name: 'search', args: { query: `attempt-${callNum}` } },
+          ]),
+          usage: { inputTokens: 50, outputTokens: 25, totalTokens: 75 },
+        };
+      }
+      return {
+        response: 'Final answer after iterations.',
+        usage: { inputTokens: 50, outputTokens: 25, totalTokens: 75 },
+      };
+    });
+
+    const events = await collectEvents('looping query', { maxIterations: 3 });
+
+    const done = findEvent<DoneEvent>(events, 'done')!;
+    expect(done.iterations).toBe(3);
+    expect(done.answer).toBeDefined();
+    // Should have tool calls from all 3 iterations
+    expect(done.toolCalls.length).toBe(3);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test: Context overflow → truncation → answer still works
+// ---------------------------------------------------------------------------
+
+describe('E2E: context overflow', () => {
+  test('large tool results → context_cleared event → answer produced', async () => {
+    mockGetTools.mockReturnValue([testTools.bigdata, testTools.search]);
+
+    // LLM calls bigdata tool (returns 200K chars)
+    mockCallLlm.mockResolvedValueOnce({
+      response: createMockAIMessage('', [
+        { name: 'bigdata', args: {} },
+      ]),
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+    // After context check, LLM gives answer
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'Data analyzed.',
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+    // Final answer
+    mockCallLlm.mockResolvedValueOnce({
+      response: 'Based on the large dataset analysis...',
+      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+    });
+
+    const events = await collectEvents('analyze big data');
+
+    const done = findEvent<DoneEvent>(events, 'done')!;
+    expect(done.answer).toBeDefined();
+    // The bigdata result (200K chars) gets truncated to 50K by scratchpad
+    // Whether context_cleared fires depends on estimated token count vs threshold
+    // The key assertion is that the flow completes successfully
+    expect(done.toolCalls.length).toBeGreaterThanOrEqual(1);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test: Tool limit warnings
+// ---------------------------------------------------------------------------
+
+describe('E2E: tool limit warnings', () => {
+  test('repeated tool calls generate tool_limit events', async () => {
+    let callNum = 0;
+    mockCallLlm.mockImplementation(async () => {
+      callNum++;
+      if (callNum <= 4) {
+        return {
+          response: createMockAIMessage('', [
+            { name: 'search', args: { query: `search-${callNum}` } },
+          ]),
+          usage: { inputTokens: 50, outputTokens: 25, totalTokens: 75 },
+        };
+      }
+      return {
+        response: 'Done with repeated searches.',
+        usage: { inputTokens: 50, outputTokens: 25, totalTokens: 75 },
+      };
+    });
+
+    const events = await collectEvents('repeated searches', { maxIterations: 5 });
+
+    const limitEvents = findAllEvents(events, 'tool_limit');
+    // After 3 calls (default limit), warnings should appear
+    expect(limitEvents.length).toBeGreaterThanOrEqual(1);
+  });
+});