Interactive visualizations for multi-agent chat logs
Turn AutoGen and Claude Code conversation traces into temporal graphs you can explore, replay, and analyze.
Agent network with temporal "ghost trail" edges — current interactions highlighted, history fades
Tree layout showing tool calls, sub-agents, and execution flow
Sequential conversation flow for turn-by-turn analysis
git clone https://github.com/CH-chuan/CommuGraph.git
cd CommuGraph
npm install
npm run dev| Framework | File Type | Notes |
|---|---|---|
| AutoGen | .jsonl / .json |
Single file with sender, recipient, message, timestamp |
| Claude Code | .jsonl |
v2.0.64+ logs, supports sub-agent files |
- Temporal playback — Step through interactions with timeline controls
- Ghost trail edges — Current/recent/history states with visual fade
- Cross-view highlighting — Click chat message to highlight graph node
- Sub-agent exploration — Expand nested agent sessions
- Session metrics — Density, centrality, communication patterns
Schema Details
JSONL format where each line is one message:
{"sender": "User", "recipient": "Manager", "message": "...", "timestamp": 1234567890}Required fields: sender, recipient, message, timestamp
Tested against v2.0.64. Features:
- Topological ordering via UUID parent-child chain
- Phantom branch pruning (handles duplicate user messages)
- Context compaction tracking
API Reference
| Endpoint | Method | Description |
|---|---|---|
/api/upload |
POST | Upload log file |
/api/frameworks |
GET | List supported parsers |
/api/sessions |
GET | List all sessions |
/api/graph/[id] |
GET | Get graph snapshot (?step=N for time slice) |
/api/graph/[id]/metrics |
GET | Get graph metrics |
/api/graph/[id]/info |
GET | Get session info |
/api/graph/[id]/annotations |
GET | Get annotation records |
/api/graph/[id]/workflow |
GET | Get workflow data |
/api/session/[id] |
DELETE | Delete session |
Architecture
Unified Next.js 15 monolith — all frontend and backend in TypeScript.
src/
├── app/ # App Router + API Routes
├── components/ # React components (graph, workflow, chat, ui)
├── lib/ # Parsers, services, graph algorithms
├── hooks/ # Data fetching, timeline playback
├── context/ # Global UI state
└── types/ # TypeScript definitions
Core concept: Time-aware edges store Interaction objects with timestamps and step indices, enabling temporal playback and pattern detection.
Tech Stack
| Component | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Graph Visualization | React Flow (@xyflow/react) |
| State Management | TanStack Query + React Context |
| Validation | Zod |
| Styling | Tailwind CSS |
| UI Components | shadcn/ui |
npm run lint # ESLint
npm run build # Type checkingMIT