brownian-code 2026.2.10

package/src/agent/types.ts

@@ -0,0 +1,137 @@
+/**
+ * Agent configuration
+ */
+export interface AgentConfig {
+  /** Model to use for LLM calls (e.g., 'gpt-5.2', 'claude-sonnet-4-20250514') */
+  model?: string;
+  /** Model provider (e.g., 'openai', 'anthropic', 'google', 'ollama') */
+  modelProvider?: string;
+  /** Maximum agent loop iterations (default: 10) */
+  maxIterations?: number;
+  /** AbortSignal for cancelling agent execution */
+  signal?: AbortSignal;
+}
+
+/**
+ * Message in conversation history
+ */
+export interface Message {
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+}
+
+// ============================================================================
+// Agent Events (for real-time streaming UI)
+// ============================================================================
+
+/**
+ * Agent is processing/thinking
+ */
+export interface ThinkingEvent {
+  type: 'thinking';
+  message: string;
+}
+
+/**
+ * Tool execution started
+ */
+export interface ToolStartEvent {
+  type: 'tool_start';
+  tool: string;
+  args: Record<string, unknown>;
+}
+
+/**
+ * Tool execution completed successfully
+ */
+export interface ToolEndEvent {
+  type: 'tool_end';
+  tool: string;
+  args: Record<string, unknown>;
+  result: string;
+  duration: number;
+}
+
+/**
+ * Tool execution failed
+ */
+export interface ToolErrorEvent {
+  type: 'tool_error';
+  tool: string;
+  error: string;
+}
+
+/**
+ * Mid-execution progress update from a subagent tool
+ */
+export interface ToolProgressEvent {
+  type: 'tool_progress';
+  tool: string;
+  message: string;
+}
+
+/**
+ * Tool call warning due to approaching/exceeding suggested limits
+ */
+export interface ToolLimitEvent {
+  type: 'tool_limit';
+  tool: string;
+  /** Warning message about tool usage limits */
+  warning?: string;
+  /** Whether the tool call was blocked (always false - we only warn, never block) */
+  blocked: boolean;
+}
+
+/**
+ * Context was cleared due to exceeding token threshold (Anthropic-style)
+ */
+export interface ContextClearedEvent {
+  type: 'context_cleared';
+  /** Number of tool results that were cleared from context */
+  clearedCount: number;
+  /** Number of most recent tool results that were kept */
+  keptCount: number;
+}
+
+/**
+ * Final answer generation started
+ */
+export interface AnswerStartEvent {
+  type: 'answer_start';
+}
+
+/**
+ * Token usage statistics
+ */
+export interface TokenUsage {
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+}
+
+/**
+ * Agent completed with final result
+ */
+export interface DoneEvent {
+  type: 'done';
+  answer: string;
+  toolCalls: Array<{ tool: string; args: Record<string, unknown>; result: string }>;
+  iterations: number;
+  totalTime: number;
+  tokenUsage?: TokenUsage;
+  tokensPerSecond?: number;
+}
+
+/**
+ * Union type for all agent events
+ */
+export type AgentEvent =
+  | ThinkingEvent
+  | ToolStartEvent
+  | ToolProgressEvent
+  | ToolEndEvent
+  | ToolErrorEvent
+  | ToolLimitEvent
+  | ContextClearedEvent
+  | AnswerStartEvent
+  | DoneEvent;

package/src/cli.tsx

@@ -0,0 +1,385 @@
+#!/usr/bin/env bun
+/**
+ * CLI - Real-time agentic loop interface
+ * Shows tool calls and progress in Claude Code style
+ */
+import React, { useCallback, useRef, useState } from 'react';
+import { Box, Static, Text, useApp, useInput } from 'ink';
+import { config } from 'dotenv';
+
+import { Input } from './components/Input.js';
+import { Intro } from './components/Intro.js';
+import { ProviderSelector, ModelSelector, ModelInputField } from './components/ModelSelector.js';
+import { ApiKeyConfirm, ApiKeyInput } from './components/ApiKeyPrompt.js';
+import { DebugPanel } from './components/DebugPanel.js';
+import { HistoryItemView, WorkingIndicator, type HistoryItem } from './components/index.js';
+import { StatusBar } from './components/StatusBar.js';
+import { CommandMenu } from './components/CommandMenu.js';
+import { ErrorBox } from './components/ErrorBox.js';
+import { getApiKeyNameForProvider, getProviderDisplayName } from './utils/env.js';
+import { getModelDisplayName } from './components/ModelSelector.js';
+import { getSetting, setSetting } from './utils/config.js';
+
+import { useModelSelection } from './hooks/useModelSelection.js';
+import { useAgentRunner } from './hooks/useAgentRunner.js';
+import { useInputHistory } from './hooks/useInputHistory.js';
+import { getContextWindow } from './utils/tokens.js';
+
+import { registerBuiltinCommands } from './commands/builtin.js';
+import { commandRegistry, parseCommand, executeCommand } from './commands/registry.js';
+import type { CommandContext } from './commands/types.js';
+import type { CommandDef } from './commands/types.js';
+
+// Load environment variables
+config({ quiet: true });
+
+// Register all builtin commands on startup
+registerBuiltinCommands();
+
+export function CLI() {
+  const { exit } = useApp();
+
+  // Debug panel state
+  const [showDebug, setShowDebug] = useState(() => getSetting('showDebug', false));
+
+  // Command autocomplete state
+  const [commandMenuVisible, setCommandMenuVisible] = useState(false);
+  const [commandMenuItems, setCommandMenuItems] = useState<CommandDef[]>([]);
+  const [commandMenuIndex, setCommandMenuIndex] = useState(0);
+
+  // Command JSX output (for commands that render components like /help)
+  const [commandOutput, setCommandOutput] = useState<React.ReactNode | null>(null);
+
+  // Ref to hold setError - avoids TDZ issue since useModelSelection needs to call
+  // setError but useAgentRunner (which provides setError) depends on useModelSelection's outputs
+  const setErrorRef = useRef<((error: string | null) => void) | null>(null);
+
+  // Model selection state and handlers
+  const {
+    selectionState,
+    provider,
+    model,
+    inMemoryChatHistoryRef,
+    startSelection,
+    cancelSelection,
+    handleProviderSelect,
+    handleModelSelect,
+    handleModelInputSubmit,
+    handleApiKeyConfirm,
+    handleApiKeySubmit,
+    isInSelectionFlow,
+  } = useModelSelection((errorMsg) => setErrorRef.current?.(errorMsg));
+
+  // Agent execution state and handlers
+  const {
+    history,
+    workingState,
+    error,
+    isProcessing,
+    cumulativeTokens,
+    cumulativeCost,
+    turnCount,
+    runQuery,
+    runCompactQuery,
+    cancelExecution,
+    setError,
+    clearHistory,
+  } = useAgentRunner({ model, modelProvider: provider, maxIterations: 10 }, inMemoryChatHistoryRef);
+
+  // Assign setError to ref so useModelSelection's callback can access it
+  setErrorRef.current = setError;
+
+  // Input history for up/down arrow navigation
+  const {
+    historyValue,
+    navigateUp,
+    navigateDown,
+    saveMessage,
+    updateAgentResponse,
+    resetNavigation,
+  } = useInputHistory();
+
+  // Toggle debug panel
+  const toggleDebug = useCallback(() => {
+    setShowDebug(prev => {
+      const next = !prev;
+      setSetting('showDebug', next);
+      return next;
+    });
+  }, []);
+
+  // Build command context
+  const getCommandContext = useCallback((): CommandContext => ({
+    provider,
+    model,
+    history,
+    inMemoryChatHistoryRef,
+    setError,
+    clearHistory,
+    startSelection,
+    toggleDebug,
+    showDebug,
+    cumulativeTokens,
+    cumulativeCost,
+    turnCount,
+    runCompactQuery,
+  }), [provider, model, history, inMemoryChatHistoryRef, setError, clearHistory, startSelection, toggleDebug, showDebug, cumulativeTokens, cumulativeCost, turnCount, runCompactQuery]);
+
+  // Handle history navigation from Input component
+  const handleHistoryNavigate = useCallback((direction: 'up' | 'down') => {
+    if (direction === 'up') {
+      navigateUp();
+    } else {
+      navigateDown();
+    }
+  }, [navigateUp, navigateDown]);
+
+  // Handle slash command input changes (for autocomplete)
+  const handleSlashChange = useCallback((text: string) => {
+    if (text.startsWith('/') && text.length >= 1) {
+      const prefix = text.slice(1); // Remove the "/"
+      const matches = prefix.length === 0
+        ? commandRegistry.getVisible()
+        : commandRegistry.search(prefix);
+      setCommandMenuItems(matches);
+      setCommandMenuIndex(0);
+      setCommandMenuVisible(matches.length > 0);
+    } else {
+      setCommandMenuVisible(false);
+    }
+  }, []);
+
+  // Handle command menu navigation
+  const handleCommandMenuNavigate = useCallback((direction: 'up' | 'down') => {
+    setCommandMenuIndex(prev => {
+      if (direction === 'up') {
+        return prev > 0 ? prev - 1 : commandMenuItems.length - 1;
+      }
+      return prev < commandMenuItems.length - 1 ? prev + 1 : 0;
+    });
+  }, [commandMenuItems.length]);
+
+  // Get selected command from menu
+  const getSelectedCommand = useCallback((): string | null => {
+    if (!commandMenuVisible || commandMenuItems.length === 0) return null;
+    return '/' + commandMenuItems[commandMenuIndex].name;
+  }, [commandMenuVisible, commandMenuItems, commandMenuIndex]);
+
+  // Handle user input submission
+  const handleSubmit = useCallback(async (query: string) => {
+    // Clear any previous command output
+    setCommandOutput(null);
+
+    // Handle exit
+    if (query.toLowerCase() === 'exit' || query.toLowerCase() === 'quit') {
+      console.log('Goodbye!');
+      exit();
+      return;
+    }
+
+    // Handle slash commands
+    const parsed = parseCommand(query);
+    if (parsed) {
+      // Dismiss autocomplete menu
+      setCommandMenuVisible(false);
+
+      const cmd = commandRegistry.get(parsed.name);
+      if (!cmd) {
+        setError(`Unknown command: /${parsed.name}. Type /help for available commands.`);
+        return;
+      }
+
+      try {
+        const result = await executeCommand(parsed.name, parsed.args, getCommandContext());
+        if (result !== undefined && result !== null) {
+          if (typeof result === 'string') {
+            // Show as a text message in history
+            setCommandOutput(
+              <Box marginBottom={1}>
+                <Text color="#a6a6a6">{result}</Text>
+              </Box>
+            );
+          } else {
+            // Render as JSX (React component)
+            setCommandOutput(result);
+          }
+        }
+      } catch (e) {
+        setError(`Command error: ${e instanceof Error ? e.message : String(e)}`);
+      }
+      return;
+    }
+
+    // Ignore if not idle (processing or in selection flow)
+    if (isInSelectionFlow() || workingState.status !== 'idle') return;
+
+    // Save user message to history immediately and reset navigation
+    await saveMessage(query);
+    resetNavigation();
+
+    // Run query and save agent response when complete
+    const result = await runQuery(query);
+    if (result?.answer) {
+      await updateAgentResponse(result.answer);
+    }
+  }, [exit, getCommandContext, isInSelectionFlow, workingState.status, runQuery, saveMessage, updateAgentResponse, resetNavigation, setError]);
+
+  // Handle keyboard shortcuts
+  useInput((input, key) => {
+    // Escape key - cancel selection flows or running agent, or dismiss command menu
+    if (key.escape) {
+      if (commandMenuVisible) {
+        setCommandMenuVisible(false);
+        return;
+      }
+      if (isInSelectionFlow()) {
+        cancelSelection();
+        return;
+      }
+      if (isProcessing) {
+        cancelExecution();
+        return;
+      }
+    }
+
+    // Ctrl+D - toggle debug panel
+    if (key.ctrl && input === 'd') {
+      toggleDebug();
+      return;
+    }
+
+    // Ctrl+C - cancel or exit
+    if (key.ctrl && input === 'c') {
+      if (isInSelectionFlow()) {
+        cancelSelection();
+      } else if (isProcessing) {
+        cancelExecution();
+      } else {
+        console.log('\nGoodbye!');
+        exit();
+      }
+    }
+  });
+
+  // Render selection screens
+  const { appState, pendingProvider, pendingModels } = selectionState;
+
+  if (appState === 'provider_select') {
+    return (
+      <Box flexDirection="column">
+        <ProviderSelector provider={provider} onSelect={handleProviderSelect} />
+      </Box>
+    );
+  }
+
+  if (appState === 'model_select' && pendingProvider) {
+    return (
+      <Box flexDirection="column">
+        <ModelSelector
+          providerId={pendingProvider}
+          models={pendingModels}
+          currentModel={provider === pendingProvider ? model : undefined}
+          onSelect={handleModelSelect}
+        />
+      </Box>
+    );
+  }
+
+  if (appState === 'model_input' && pendingProvider) {
+    return (
+      <Box flexDirection="column">
+        <ModelInputField
+          providerId={pendingProvider}
+          currentModel={provider === pendingProvider ? model : undefined}
+          onSubmit={handleModelInputSubmit}
+        />
+      </Box>
+    );
+  }
+
+  if (appState === 'api_key_confirm' && pendingProvider) {
+    return (
+      <Box flexDirection="column">
+        <ApiKeyConfirm
+          providerName={getProviderDisplayName(pendingProvider)}
+          onConfirm={handleApiKeyConfirm}
+        />
+      </Box>
+    );
+  }
+
+  if (appState === 'api_key_input' && pendingProvider) {
+    const apiKeyName = getApiKeyNameForProvider(pendingProvider) || '';
+    return (
+      <Box flexDirection="column">
+        <ApiKeyInput
+          providerName={getProviderDisplayName(pendingProvider)}
+          apiKeyName={apiKeyName}
+          onSubmit={handleApiKeySubmit}
+        />
+      </Box>
+    );
+  }
+
+  // Main chat interface
+  return (
+    <Box flexDirection="column">
+      {/* Intro + completed history — written once to scrollback, never re-rendered */}
+      <Static items={[{ id: '__intro__' } as { id: string }, ...history.filter(item => item.status !== 'processing')]}>
+        {(item) => item.id === '__intro__'
+          ? <Intro key="__intro__" provider={provider} model={model} />
+          : <HistoryItemView key={item.id} item={item as HistoryItem} />
+        }
+      </Static>
+
+      {/* Active (processing) item — dynamic, repainted on updates */}
+      {history.length > 0 && history[history.length - 1].status === 'processing' && (
+        <HistoryItemView key={history[history.length - 1].id} item={history[history.length - 1]} />
+      )}
+
+      {/* Command output (from slash commands like /help) */}
+      {commandOutput}
+
+      {/* Error display */}
+      {error && <ErrorBox error={error} />}
+
+      {/* Working indicator - only show when processing */}
+      {isProcessing && <WorkingIndicator state={workingState} />}
+
+      {/* Status bar */}
+      <StatusBar
+        modelDisplayName={getModelDisplayName(model)}
+        cumulativeTokens={cumulativeTokens}
+        cumulativeCost={cumulativeCost}
+        turnCount={turnCount}
+        contextPercentage={getContextWindow(model) > 0
+          ? Math.round((cumulativeTokens / getContextWindow(model)) * 100)
+          : undefined}
+      />
+
+      {/* Command autocomplete menu */}
+      {commandMenuVisible && (
+        <CommandMenu
+          commands={commandMenuItems}
+          selectedIndex={commandMenuIndex}
+        />
+      )}
+
+      {/* Input */}
+      <Box marginTop={turnCount === 0 && !commandOutput ? 1 : 0}>
+        <Input
+          onSubmit={handleSubmit}
+          historyValue={historyValue}
+          onHistoryNavigate={handleHistoryNavigate}
+          onTextChange={handleSlashChange}
+          commandMenuVisible={commandMenuVisible}
+          onCommandMenuNavigate={handleCommandMenuNavigate}
+          getSelectedCommand={getSelectedCommand}
+        />
+      </Box>
+
+      {/* Debug Panel */}
+      <DebugPanel maxLines={8} show={showDebug} />
+    </Box>
+  );
+}