Watch your Claude agents think, branch, and build — in real time.

Quick Start  ·  Features  ·  How It Works  ·  Development

---

The Problem

When you run Claude Code agents through the Agent SDK, the work happens in a black box. You fire off a query() call and wait for a result. You can't see the chain of tool calls, the thinking steps, or the sub-agents that spawn along the way.

Agora opens the box.

It gives you a live dashboard where every agent action streams in as a node on an interactive graph. You see what the agent is reading, writing, running, and thinking — as it happens. And when you want to explore a different direction, you fork the session at any point and carry the full context forward.

---

Quick Start

npx agora-app

A local server starts and the dashboard opens in your browser. Create a session, give it a prompt, and watch the graph build itself.

Options

  -p, --port <port>   Port to run on (default: 3001)
  --cwd <dir>         Default working directory for agent sessions
  --no-open           Don't open browser automatically
  -h, --help          Show help

npx agora-app -p 8080 --cwd ~/projects/my-app

---

Features

Live Activity Graph

Every agent action appears as a color-coded node in a vertical, scrollable graph powered by React Flow. The view auto-centers on the latest activity and snaps back after manual exploration. Node Color Meaning Indigo User prompt Purple Thinking / reasoning Blue Tool call Emerald Tool result Green Agent response Red Error

Session Forking

Hover any node and click Fork from here. Agora builds a context summary of everything that happened up to that point and starts a brand-new agent session with that history. The fork appears as a linked session with a dashed border and a badge showing its origin.

This is the core workflow Agora enables: run an agent, observe, fork, explore a different path, compare results.

Sub-Agent Tracking

When Claude spawns child agents (via the Agent tool), Agora detects the task lifecycle — task_started, task_progress, task_notification — and creates a linked child session for each one. Parent and child sessions update side by side, giving you visibility into the full execution tree.

Tool Monitoring

Nine tools are tracked with dedicated labels:

Read   Write   Edit   Bash   Grep   Glob   Agent   WebSearch   WebFetch

Each tool call node shows the target — the file path, shell command, grep pattern, or search query — so you can follow the agent's reasoning without expanding every node.

Dual View

Toggle between two modes per session:

• Graph — the interactive node-and-edge visualization with zoom, pan, and animated centering
• Terminal — a chronological log with type-prefixed entries ($ prompt, # thinking, > tool call, ! error)

Expandable Details

Click any node to open a full-detail overlay showing the complete, untruncated content — useful for long tool outputs, generated code, or multi-paragraph responses.

Multi-Session Dashboard

Run as many sessions as you need. The dashboard arranges visible sessions in a responsive grid (up to 3 columns). Toggle visibility from the tab bar, send follow-up messages inline, or close sessions you're done with.

Directory Picker

When creating a session, select a working directory through an interactive file browser. This sets the cwd for the underlying Claude agent, controlling where file reads, writes, and shell commands execute.

---

How It Works

 Browser (React)                  Server (Express + WS)              Claude Agent SDK
┌──────────────┐    WebSocket    ┌──────────────────┐    query()    ┌──────────────┐
│              │ ◄────────────► │                  │ ◄──────────► │              │
│  Dashboard   │    messages     │  SessionManager  │   streaming   │  Claude Code │
│  ReactFlow   │                │                  │   messages    │              │
└──────────────┘                └──────────────────┘              └──────────────┘

1. The CLI starts an Express server that serves the built React frontend and a WebSocket endpoint.
2. Creating a session in the UI sends a WebSocket message to the server, which calls query() from the Claude Agent SDK.
3. SDK messages stream back through the WebSocket to every connected client.
4. The frontend maps each message to a typed activity node and renders it on the graph.
5. Sub-agent events (task_started, task_progress, task_notification) are detected server-side and surfaced as linked child sessions.
6. Forking builds a context summary from the parent's history and starts a fresh SDK session with that context prepended to the new prompt.

---

Development

npm install

# Frontend (Vite dev server) + backend (Express/WS) with hot reload
npm run dev

# Run tests (60 tests across 5 suites)
npm test

# Production build (frontend + server)
npm run build

# Lint
npm run lint

Project Structure

bin/
  agora.js              CLI entry point (npx)
server/
  index.ts              Express + WebSocket server, static file serving
  sessionManager.ts     Session lifecycle, SDK integration, sub-agent tracking
  messageMapper.ts      SDK message → UI activity mapping
  wsProtocol.ts         WebSocket message type definitions
  dev.ts                Dev-mode entry point
src/
  App.tsx               Root component, WebSocket URL
  components/
    Dashboard.tsx       Layout, session tabs, creation form
    SessionPanel.tsx    Session container (graph / terminal toggle)
    SessionGraph.tsx    ReactFlow graph with auto-centering
    ActivityNode.tsx    Activity node (color, tool label, fork button, message input)
    ForkOriginNode.tsx  Fork origin indicator
    DetailPanel.tsx     Full-detail overlay
    TerminalPanel.tsx   Chronological log view
    DirPicker.tsx       Filesystem browser modal
  hooks/
    useWebSocket.ts     WebSocket client with reconnection
  types/
    session.ts          Shared TypeScript types

Tech Stack

Agent SDK	@anthropic-ai/claude-agent-sdk
Server	Express 5, WebSocket (ws)
Frontend	React 18, Vite 5
Graph	React Flow (@xyflow/react)
Language	TypeScript end-to-end

---

License

MIT