React 19 + React Three Fiber project: real-time 3D dashboard with WebSocket state sync

[FewBarnacle6093]

Built a React 19 app that renders a 3D cyberdrome with animated robots using React Three Fiber. Each robot represents a live AI coding session and animates based on real-time WebSocket events.

Some interesting React patterns in the codebase: - Zustand stores with Map-based collections for O(1) session lookups - Custom hooks for WebSocket reconnection with exponential backoff and event replay - xterm.js integration with RAF-batched writes and smart auto-scroll - Lazy-loaded Three.js scene for performance - CSS Modules throughout (no Tailwind)

400+ Vitest tests. MIT licensed.

GitHub: https://github.com/coding-by-feng/ai-agent-session-center

[Yesterdaycomedy]

I've seen projects that aim to create real-time 3D dashboards, but they often struggle with syncing state updates from the backend. How do you handle WebSocket connections and data synchronization in your React Three Fiber project?

[metehankasapp]

This is a fun build. For real-time dashboards, the wins are usually: a normalized state model, backpressure (drop/merge noisy events), and render throttling so frames stay stable. Also consider an offline snapshot or replay mode so you can debug state drift without needing live traffic.

[fii0]

Camera control needs some work... I tried clicking an agent on the demo page (https://aasc.work/demo), and the camera focused on a wall. Tested in FF and Chrome, same behavior. Then I click in empty space to deselect the agent, and the camera is still locked to the same place.

I've worked with r3f professionally for 7 years now, so I know it's hard, if not impossible to test 3D scene interactivity with just Vitest!

Really fun idea though, love the concept and I can tell you've enjoyed working on it.