How uurdemir/agent-hub-ui works
Agent Hub is a local dashboard for monitoring coding-agent activity, with optional messaging, project inspection, and multi-machine reporting. The main flow is: the server gathers Claude sessions and other-agent process presence, parses session transcripts into events, and serves updates to the browser’s activity, detail, and Canvas views. Project configuration is exposed separately; optional reporting filters local data before sending it to an authenticated hub. Edges reflect excerpts or README statements; the unexcerpted UI/API wiring is not inferred.
Main entry points: index.js HTTP server · reporter.js Reporter · claude.js Claude collector · processes.js Process scanner
Components 19
Local collection
- HTTP server
server/index.js - Claude collector
server/claude.js - Transcript parser
server/parse.js - Process scanner
server/processes.js - Session messaging
server/messaging.js
Dashboard
- Activity and detail UI
public/app.js - Canvas view
public/canvas.js - Projects view
public/projects.js
Project inspection
- Project catalog
server/projects.js
Remote sharing
- Reporter
server/reporter.js - Share-level filter
server/share.js - Remote hub
server/hub.js
Other components
- User
- Browser
- Claude state
- Other agent processes
- CLI entry
bin/agent-hub.js - Claude project files
- Reporting machines
Connections 28
- User → Browser: views dashboard
README.md - CLI entry → HTTP server: starts server
bin/agent-hub.js - HTTP server → Claude collector: creates collector
server/index.js - HTTP server → Process scanner: creates scanner
server/index.js - HTTP server → Project catalog: creates catalog
server/index.js - HTTP server → Reporter: creates reporter
server/index.js - HTTP server → Remote hub: creates hub
server/index.js - HTTP server → Session messaging: sends messages
server/index.js - Claude state → Claude collector: provides sessions
server/claude.js - Claude collector → Transcript parser: parses transcripts
server/claude.js - Other agent processes → Process scanner: provides process list
server/processes.js - Claude collector → HTTP server: supplies activity
README.md - Process scanner → HTTP server: supplies presence
README.md - HTTP server → Browser: serves dashboard
server/index.js - Browser → Activity and detail UI: shows timelines
README.md - Browser → Canvas view: shows agent map
README.md - Browser → Projects view: shows projects
README.md - HTTP server → Claude project files: reads project setup
README.md - Project catalog → Claude project files: inspects configuration
server/projects.js - Reporter → Claude collector: collects agent data
server/reporter.js - Reporter → Process scanner: collects presence
server/reporter.js - Reporter → Share-level filter: filters report
server/reporter.js - Remote hub → Share-level filter: limits stored data
server/hub.js - Reporting machines → Remote hub: sends reports
README.md - Reporter → Remote hub: posts reports
README.md - Browser → HTTP server: requests session message
README.md - HTTP server → Session messaging: forwards message
server/index.js - Session messaging → Claude state: reads session credentials
server/messaging.js