Skip to content

feat: Mission Control tab — live visualization of agent activity (Gource-inspired) #81

@sujayjayjay

Description

@sujayjayjay

Goal

Add a "Mission Control" tab to the dashboard that makes parallel agent activity feel alive — the viral moment where someone screen-records 8 agents autonomously building a codebase in real time.

Reference: https://www.youtube.com/watch?v=97irLVqYJCI (Overstory dashboard aesthetic)

What to build

A new /activity tab in the Next.js dashboard with three panels:

1. Live event stream (right panel)

Real-time scrolling feed of agent actions via SSE:

● ao-3  committed: "fix: add status-sync reconciler loop"     2s ago
● ao-1  pushed feat/74 → opened PR #82                       14s ago  
● ao-2  modified packages/core/src/session-manager.ts         31s ago
● ao-3  CI passing on feat/79                                  1m ago

Powered by watching git activity (new commits on worktree branches) and GitHub webhook/poll events.

2. Branch timeline (center panel)

Horizontal swimlane per agent. Commits appear as nodes on the lane as they happen. Visual diff of how far each branch has diverged from main.

main  ──────────────────────────────────────────
ao-1  ──────●─────────●──                  feat/74
ao-2  ──────────●─────────●───             feat/78  
ao-3  ──────●──────●──────────●──          feat/79

Use gitgraph.js or a lightweight D3 SVG renderer.

3. Gource-inspired agent map (left panel)

D3 force-directed canvas visualization:

  • Central node = main branch (repo)
  • Each active agent = labeled glowing node orbiting the center
  • File paths = leaf nodes that light up when touched by a commit
  • Edges pulse when an agent modifies a file
  • PR opened = arc connecting agent node back to center

Inspired by Gource (https://gource.io) but rendered entirely in browser via D3/Canvas. No native dependency.

Data sources

  • Git activity: poll git log --oneline --since=5min on each worktree every 10s
  • File changes: git diff --name-only HEAD~1 HEAD per agent's latest commit
  • PR/CI state: existing GitHub polling already in session-manager
  • SSE: extend existing /api/events endpoint with commit/push/PR event types

Why this matters for virality

The current dashboard is a static metadata table. This visualization makes the feeling of autonomous parallel work visceral — you can see files being touched in real time, branches growing, PRs opening. That's what gets screen-recorded and posted on Twitter.

Implementation notes

  • Add GitActivityPoller service that watches worktree branches for new commits
  • Emit events via the existing SSE infrastructure
  • New route: app/activity/page.tsx
  • New component: ActivityFeed, BranchTimeline, AgentMap
  • D3 and gitgraph.js can be added as dependencies to packages/web

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions