Title:feat(viewer): Implement Orchestrator Graph View

.gitignore

@@ -3,6 +3,9 @@ dist/
 coverage/
 node_modules/
 
+# TypeScript build cache
+*.tsbuildinfo
+
 # pnpm files
 .pnpm-store/
 .pnpm-debug.log
@@ -16,4 +19,7 @@ node_modules/
 logs/
 *.log
 
+# Vite auto-generated declaration file
+vite.config.d.ts
+
 docs/

README.md

@@ -1,16 +1,26 @@
 # @accordkit/viewer
 
-[![Part of AccordKit](https://img.shields.io/badge/AccordKit-ecosystem-00cc88?style=flat-square)](https://github.com/accordkit)
-
-> **Part of the [AccordKit](https://github.com/accordkit) ecosystem**   
-> an open, AI-agnostic tracing SDK for LLM-powered and ChatGPT-interoperable applications.  
-> AccordKit gives developers local-first observability: **no vendor lock-in, no opaque dashboards**, just clean event streams and tools that work anywhere.
-
 The AccordKit Viewer is a lightweight, pluggable trace viewer for AI tool and model observability.
 It visualizes traces, spans, messages, and tool calls in real time, with plugin slots for custom visualizations and metrics.
 
 ---
 
+## Orchestrator Graph View
+
+Automatically render your entire trace as an interactive Directed Acyclic Graph (DAG) to understand the real flow of your agent.
+
+<div align="center" style="margin: 1.5rem 0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
+  <img src="./.github/assets/viewer_graph.png" alt="AccordKit Viewer orchestrator graph screenshot" />
+</div>
+
+## Hierarchical List View
+
+A classic, indented list that's 10x clearer than a flat log, complete with latency bars, plugin support, and deep inspection.
+
+<div align="center" style="margin: 1.5rem 0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
+  <img src="./.github/assets/viewer_event_list.png" alt="AccordKit Viewer list view screenshot" />
+</div>
+
 ## Getting Started
 
 ### 1. Install dependencies
@@ -27,11 +37,19 @@ pnpm dev
 
 Then open http://localhost:5173
 
-### 3. Load sample traces
+### 3. Run the full app (with mock server)
+
+To see live streaming in action, run this command to start the Vite server and the mock SSE server.
+
+```bash
+pnpm dev:all
+```
+
+### 4. Load sample traces
 
 Inside the app, click “Load sample trace” — or provide your own .json trace exported from the AccordKit tracer SDK.
 
-### 4. Extend with your own plugin
+### 5. Extend with your own plugin
 
 ```tsx
 import { PluginProvider } from "./plugins";
@@ -51,14 +69,15 @@ export function Main() {
 
 ## ✨ Features
 
+- ⚡ Blazing Fast & 100% Local: Drag-and-drop a trace file and start exploring. No login, no backend.
+- 🧠 Orchestrator Graph View: Automatically renders your trace as an interactive xyflow DAG to understand agent flow.
+- 🔬 Hierarchical List View: A classic, indented list that correctly visualizes parent-child relationships, tool calls, and latencies.
 - 🪶 Trace and event visualization — Inspect spans, messages, tool calls, and results
-- 🌲 Nested span tree — Hierarchical span rendering with indentation and sorting
-- 🧩 Plugin slots — Extend the viewer with your own UI blocks (TopBanner, RightPanel, EventExtras)
+- 🔴 Live Streaming (SSE/WS): Connect to a live event stream (like the included mock server) and watch traces build in real-time.
+- 🧩 Extensible Plugin System: Add custom components to the UI using React slots (TopBanner, RightPanel, EventExtras).
 - ⚡ Latency and usage plugins — Example: LatencyBarPlugin shows timing and token usage
 - 🔍 Advanced filters — Filter by type, provider, model, log level, or full-text search
 - 🧠 Typed utils — Fully typed build functions (buildSpanForest, eventFilters), zero any
-- 🧪 Full test coverage — Vitest + React Testing Library for new components and utilities
-- 🔄 (coming soon) Live tail mode — Stream traces in real time via SSE/WebSocket
 
 ---
 
@@ -103,13 +122,14 @@ export function LatencyBarPlugin({ event }: { event: TracerEvent }) {
 
 ## Scripts
 
-| Command       | Description                          |
-| ------------- | ------------------------------------ |
-| `pnpm dev`    | Start the Vite dev server with HMR.  |
-| `pnpm build`  | Type-check and build for production. |
-| `pnpm test`   | Run Vitest unit/integration tests.   |
-| `pnpm lint`   | Run ESLint (TypeScript + React).     |
-| `pnpm format` | Format sources with Prettier.        |
+| Command        | Description                          |
+| -------------- | ------------------------------------ |
+| `pnpm dev`     | Start the Vite dev server with HMR.  |
+| `pnpm dev:all` | Start React and Node dev servers.    |
+| `pnpm build`   | Type-check and build for production. |
+| `pnpm test`    | Run Vitest unit/integration tests.   |
+| `pnpm lint`    | Run ESLint (TypeScript + React).     |
+| `pnpm format`  | Format sources with Prettier.        |
 
 ---
 
@@ -149,4 +169,4 @@ MIT © AccordKit Contributors
 
 ## 🤝 Contributing
 
-Issues and PRs welcome!  
+Issues and PRs welcome!

package.json

@@ -38,7 +38,9 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@accordkit/tracer": "^0.2.0",
+    "@accordkit/tracer": "0.2.1",
+    "@xyflow/react": "^12.9.2",
+    "dagre": "^0.8.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -48,6 +50,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/dagre": "^0.7.53",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@typescript-eslint/eslint-plugin": "^8.46.0",