Runtime Dashboard

1. Overview

The TURN Runtime Dashboard provides live visualization of agent orchestration—agents playing music in real-time. It renders TURN scores as they execute, showing tracks (agent lanes), measures (turns), events (cognition and data flow), and the playhead moving through time.

Design goals: immediate "wow factor" visualizing the symphony of agents at work, real-time WebSocket-driven updates with sub-second latency, debugging utility where clicking any symbol reveals details and traces, visual pattern recognition for bottlenecks and cost spikes, and an intuitive musical metaphor with playhead and dynamics.

2. Dashboard Layout

┌─────────────────────────────────────────────────────────────────────┐
│  TURN.dev — Live Agent Orchestra                       ▶ Playing   │
│  Session: sess_abc123 | Score: cortex-ensemble v1.0                │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  HEADER                                                            │
│  𝄞 [RequirementAtom → CodeAtom]     ♯security_review   8/100K💭   │
│                                                                     │
│  TRACKS                            MEASURES (TURNS)                │
│                        │ T1  │ T2  │ T3  │ T4  │ T5  │ T6  │▌     │
│  ┌────────────────────┼─────┼─────┼─────┼─────┼─────┼─────┤      │
│  │ Scouts (3)    ○○○  │ ●●● │ ·   │ ●●  │ ·   │ ●●● │ ·   │      │
│  │ Lookouts (2)  ○○   │ ●●  │ ·   │ ·   │ ·   │ ·   │ ·   │      │
│  │ Speculators   ○○○○ │ ·   │ ●●●●│ ·   │ ●●● │ ·   │ ●●●●│      │
│  │ ▶ Main Agent  ◉    │ ·   │ ◉💭 │ ◉   │ ◉💭 │ ◉   │ ◉💭 │▌← ACTIVE
│  │ Validators (3)○○○  │ ·   │ ·   │ ●●● │ ·   │ ●●● │ ·   │      │
│  │ Scribes (2)   ○○   │ ·   │ ·   │ ●   │ ·   │ ●●  │ ·   │      │
│  │ Librarians (1)○    │ ·   │ ·   │ ·   │ ●   │ ·   │ ·   │      │
│  └────────────────────┴─────┴─────┴─────┴─────┴─────┴─────┘      │
│                                                                     │
│  RESOURCES                                                        │
│  Context: [████████████████░░░░░░░░░░░░░░] 53%  │  53,421 tokens  │
│  Budget:  [██████░░░░░░░░░░░░░░░░░░░░░░░░] 21%  │  $4.21 / $20    │
│  Tokens:  [████████████░░░░░░░░░░░░░░░░░░] 42%  │  42,156 / 100K  │
│                                                                     │
│  FLYWHEEL                                                         │
│  ⟳ 4 observations → 1 constraint proposal (pending review)        │
│                                                                     │
│  ♪ Turn 6: "Implementing authentication middleware"                │
│  🎼 Composer: RequirementAtom#req_auth  🎭 Conductor: sess_abc123 │
│  ⏱  Duration: 4m 23s | Est. remaining: ~6 min                     │
└─────────────────────────────────────────────────────────────────────┘

Score Header

Displays the clef (atoms in scope), key signature (active constraints), and time signature (turn budget, token budget, thinking enabled). This mirrors a musical score header, giving operators immediate context about the session's configuration and limits.

Tracks & Measures

Each track is a horizontal lane representing an agent archetype (scouts, main, validators, etc.). Measures are vertical columns representing turns. The intersection shows the event—what that archetype did during that turn. A vertical playhead line marks the current turn, advancing in real-time.

Resource Meters

Three progress bars showing context window usage (percentage and token count), budget consumption (spent vs. limit in USD), and total token usage against the session's token budget. Colors shift from green to yellow to red as resources deplete.

Flywheel Status

Shows the learning loop in action: how many observations have been captured, how many constraint proposals have been generated, and the most recent trigger fire. This provides immediate visibility into the system's autonomous learning.

Now Playing

Musical metadata for the current session: what task is being worked on (♪), which requirement originated it (Composer), which session is conducting it (Conductor), and elapsed/estimated timing.

3. Color Scheme

Track visual states: idle (gray dots), active helpers (blue filled circles, pulsing), active main (orange ring, pulsing), thinking (purple glow around orange), success (green checkmark), failed (red X), warning (yellow triangle).

4. Interactive Features

Event Detail Panel

Clicking any event symbol opens a detail panel showing the track, turn, beat, and symbol type, timing (start, end, duration), resources consumed (tokens in/out, thinking tokens, cost), model used and temperature, and an excerpt of the agent's thinking with links to full thinking, traces, and logs.

Track Expansion

Expanding a track reveals individual agent instances. For example, expanding "Scouts (3)" shows Scout A (decisions), Scout B (constraints), and Scout C (code) as separate sublanes, each with their own activity pattern across measures.

Data Flow Hover

Hovering over data flow arrows shows the path: which query was executed, how many atoms were returned, the payload size, and query duration in milliseconds. Links to view the full query and results are provided inline.

Trigger Animation

When a trigger fires, an animated overlay appears showing the trigger name, the observation that triggered it, confidence score, and the actuator chain with status indicators (completed, in-progress, pending) for each actuator.

5. WebSocket Protocol

The dashboard connects to a WebSocket endpoint for real-time event streaming:

const ws = new WebSocket(`wss://adamas.local/events/session/${sessionId}`);

Event types delivered over the connection:

The backend subscribes to NATS subjects matching adamas.session.{sessionId}.> and forwards relevant events to the WebSocket client, with heartbeat messages every second to maintain the connection.

6. Component Architecture

The React component tree mirrors the dashboard layout:

<TurnDashboard>
  ├── <ScoreHeader>
  │   ├── <ClefDisplay atoms={atomsInScope} />
  │   ├── <KeySignature constraints={activeConstraints} />
  │   └── <TimeSignature budget={tokenBudget} />
  │
  ├── <ScoreBody>
  │   ├── <TrackList>
  │   │   └── <Track>
  │   │       ├── <TrackLabel name tier instanceCount />
  │   │       └── <TrackMeasures>
  │   │           └── <Measure>
  │   │               └── <Event>
  │   │                   ├── <CognitionSymbol />
  │   │                   ├── <DataFlowArrow />
  │   │                   └── <TriggerIndicator />
  │   └── <Playhead position={currentTurn} />
  │
  ├── <ResourceMeters>
  │   ├── <ContextMeter />
  │   ├── <BudgetMeter />
  │   └── <TokenMeter />
  │
  ├── <FlywheelStatus>
  │   ├── <ObservationCounter />
  │   ├── <ConstraintCounter />
  │   └── <TriggerHistory />
  │
  └── <NowPlaying>
      ├── <CurrentTask />
      ├── <ComposerInfo />
      ├── <ConductorInfo />
      └── <TimingInfo />

State management uses Zustand for performant real-time updates. The dashboard state tracks session metadata, playback status, track states (idle/active/completed/failed per track), measures with event history, resource consumption, flywheel counters, and the currently selected event for the detail panel.

7. Playback Controls

[⏮] [⏪] [▶/⏸] [⏩] [⏭]    │────●────────│    1x ▼    🔊
                            ↑ timeline scrubber

Turn: 6/20    Time: 4:23 / ~10:00    [Live] [History]

Three playback modes: Live (real-time streaming, playhead follows current turn), History (browse completed sessions, scrub through timeline), and Paused (stop at current position, inspect state). Speed controls range from 0.25× slow motion for debugging through 1× real-time to 4× fast forward in history mode.

8. Responsive Design

On mobile, the dashboard switches to a compact view: a condensed track grid showing abbreviated archetype names (Sc, Lo, Sp, Ma, Va) with current-turn symbols, simplified resource bars, current task summary, and minimal playback controls. The full score view with horizontal scrolling is preserved for tablet and desktop.

9. API Endpoints

A GraphQL alternative is also available with Query types for session, score, and pattern lookups, and a Subscription type for real-time session events—useful for custom dashboard integrations.

10. Technology Stack

11. Implementation Phases