📄 AI Streaming Simulator

CodeMirror

2 min read

🤖 AI Streaming Simulator Cheat Sheet

🌐 Domain: wiki.comi.loca.zone | 🎯 Purpose: Live AI streaming & multi-agent diff simulation inside CodeMirror.

🏗️ Architecture

[Keymap: Mod-K] ──> (Effect: startAiSession)
                          │
                          ▼
                  [aiStreamField] ──(State updates)──> [aiStreamPlugin]
                          │                                   │ (renders)
                          ▼                                   ▼
              [Multi-Agent Simulator] ───────────────> [AIBlockWidget] (UI/Diffs)

🧠 State Management: aiStreamField (StateField<AIState>)

interface AIState {
  isActive: boolean;
  activeAgent: 'Planner' | 'Coder' | 'Reviewer' | null;
  streamContent: string;
  diffs: Array<{ type: 'add' | 'remove' | 'unchanged'; text: string }>;
  widgetPos: number | null;
}

⚡ State Effects:

  • startAiSession(pos: number): Spawns widget.
  • setAiStreamChunk(chunk: string): Appends streamed text.
  • setAiAgentPhase(phase: 'Planner' | 'Coder' | 'Reviewer'): Swaps agent state.
  • commitAiSession(): Writes changes to doc + closes widget.
  • cancelAiSession(): Discards changes + closes widget.

🎨 Rendering: aiStreamPlugin & AIBlockWidget

  • aiStreamPlugin (ViewPlugin): Subscribes to aiStreamField updates; injects/re-positions decoration widget at state.widgetPos.
  • AIBlockWidget (WidgetType):
    • Renders Copilot-style (Mod+K) inline block.
    • Colors diffs dynamically (🟢 Green = add | 🔴 Red = remove).
    • Displays real-time typing indicators per agent phase.

⚡ Execution Pipeline

  1. Trigger: User presses Mod-K ➡️ dispatches startAiSession.
  2. Context Harvest: Resolves syntax node at cursor to build prompt context: 
    const contextNode = syntaxTree(view.state).resolveInner(pos);
  3. Agent Simulation (runSimulatedAi):
    • Phase 1: Planner 📋 (High-level plan stream).
    • Phase 2: Coder 💻 (Streams code characters + diffs via recursive setTimeout loop).
    • Phase 3: Reviewer 🔍 (Validation step before automatic or manual commit).

💾 State & History Stores

📜 Global History (useAiHistoryStore - Zustand)

  • Storage: LocalStorage (comi-ai-history) via persist middleware.
  • Schema (AiHistoryEntry): { id, timestamp, prompt, result, modelInfo }.
  • Actions: addHistoryEntry(entry), clearHistory().

⚙️ Editor Config Store

  • State: showAiStream: boolean.
  • Actions: toggleAiStream().

⚠️ Key Caveats & Overrides

  • UI Clash Prevention: Render simulator stream output below the current line (prevents overlap with inline grey ghost text/Tab-completions).
  • Vim Keymaps: Bindings configured to preempt standard default keymaps.

Backlinks

Graph View