Frontend Wiring

How the 36-engine cognitive loop connects to React. MindProvider creates the entire brain, hooks subscribe to its state, and panels render the streams for the user to observe.

MindProvider

src/components/mind-provider.tsx

PROVIDES: MindContext + ConversationIdContext

CREATES:

CognitiveLoop (singleton) with all 36 engines

SignalBus (pub/sub backbone)

SelfStateManager (6D state + drives)

ThoughtBridge (Claude integration)

BodyBridge (Body HAL integration)

LIFECYCLE:

1. Mount: create CognitiveLoop, SignalBus, SelfStateManager

2. Mount: create ThoughtBridge + BodyBridge

3. Mount: restore persisted state from IndexedDB

4. Mount: start cognitive loop (requestAnimationFrame)

5. Unmount: stop loop, cleanup bridges

Hooks

useMind()→ MindSnapshot

Full brain state: engines, signals, selfState

Returns the complete snapshot of all 36 engines, recent signals, and current 6D self-state. Backed by useSyncExternalStore for efficient React re-rendering. Updates every 3rd frame or when there is cognitive activity.

useSelfState()→ SelfState

6D emotional state (valence, arousal, confidence, energy, social, curiosity)

Subscribes to self-state changes. Values update via EMA (damping 0.35) with breathing oscillation on arousal. Includes drive pulse outputs.

useStream()→ StreamEntry[]

Consciousness stream (last 20 thoughts)

Returns the most recent 20 consciousness stream entries. Each entry has a flavor (wandering, emotional, memory, curiosity, reflection, urge, metacognitive), timestamp, and intensity (0-1).

useEngineStatus(id)→ EngineSnapshot | undefined

Single engine: status, tickCount, debugInfo

Targeted subscription for a single engine. Returns its current status, tick count, last tick time, and engine-specific debug information.

UI Panels

Stream Panelstream-panel.tsx

Displays consciousness stream entries with flavor colors

Input Panelinput-panel.tsx

Text input + speech-to-text toggle

Voice Panelvoice-panel.tsx

Streaming voice output display with waveform

Conversation Panelconversation-panel.tsx

Chat history with ThoughtBridge responses

Brain Mapbrain-map.tsx

SVG visualization of all 36 engines + signal flows

Engine Inspectorengine-inspector.tsx

Debug info per engine (tick count, last signal, state)

Signal Logsignal-log.tsx

Recent signals with priority coloring and timestamps

Thought Tracethought-trace.tsx

Decision tracing: why the arbiter chose this response

Self-State Timelineself-state-timeline.tsx

6D state history graph over time

React Data Flow

MindProvider (mount)
  ├── CognitiveLoop
  │   ├── 36 Engines (tick at own rates)
  │   ├── SignalBus (pub/sub)
  │   └── SelfStateManager (6D + drives)
  ├── ThoughtBridge
  │   ├── listens: 'thought' signals
  │   ├── calls: /api/mind/think-stream
  │   └── emits: 'claude-response' signals
  └── BodyBridge
      ├── listens: 'body-intent' signals
      ├── calls: /api/body/execute
      └── polls: /api/body/tasks (2s interval)

React Tree
  └── MindContext.Provider
      ├── useMind()          → full snapshot
      ├── useSelfState()     → 6D state
      ├── useStream()        → consciousness
      └── useEngineStatus()  → per-engine

  useSyncExternalStore binds loop → React
  Updates: every 3rd frame OR on activity

Example: Grieving User Flow

User: "I'm grieving"

1.  TextInput     → emit 'text-input' (arousal +0.03, social +0.05)
2.  Perception    → salience: 0.9 (emotional keywords) → emit 'perception-result'
3.  EmotionInfer  → regex: grief (valence:-0.6, arousal:-0.3) → 'emotion-detected'
4.  PersonState   → update 12D state for user
5.  Attention     → passes threshold → emit 'attention-focus'
6.  Binder        → fuse text + memory + emotion → 'bound-representation'
7.  Arbiter       → needsClaude=true, gather empathic+tom+memories
8.  Arbiter       → emit 'thought' with ActionDecision context
9.  ThoughtBridge → POST /api/mind/think-stream
10. System Prompt → "User is experiencing grief. Be gentle. Do NOT redirect."
11. Claude        → empathetic response + SHIFT: {valence:-0.2, social:+0.15}
12. ThoughtBridge → parse shift, emit 'claude-response'
13. Arbiter       → apply shift to selfState, emit 'voice-output'
14. Voice         → TTS: warm, measured tone
15. Expression    → empathetic facial expression
16. MemoryWrite   → significance 0.7 → persist
17. Persistence   → save selfState to IndexedDB