# uurdemir/agent-hub-ui architecture

> Architecture diagram of the GitHub repository uurdemir/agent-hub-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/uurdemir/agent-hub-ui
- Repository: https://github.com/uurdemir/agent-hub-ui

## Overview

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: [`server/index.js`](https://github.com/uurdemir/agent-hub-ui/blob/main/server/index.js) (HTTP server), [`server/reporter.js`](https://github.com/uurdemir/agent-hub-ui/blob/main/server/reporter.js) (Reporter), [`server/claude.js`](https://github.com/uurdemir/agent-hub-ui/blob/main/server/claude.js) (Claude collector), [`server/processes.js`](https://github.com/uurdemir/agent-hub-ui/blob/main/server/processes.js) (Process scanner)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_collection["Local collection"]
  node_server["HTTP server<br/>[index.js]"]
  node_collector["Claude collector<br/>[claude.js]"]
  node_transcript["Transcript parser<br/>[parse.js]"]
  node_process_scanner["Process scanner<br/>[processes.js]"]
  node_messaging["Session messaging<br/>[messaging.js]"]
end

subgraph group_dashboard["Dashboard"]
  node_activity_ui["Activity and detail UI<br/>[app.js]"]
  node_canvas_ui["Canvas view<br/>[canvas.js]"]
  node_projects_ui["Projects view<br/>[projects.js]"]
end

subgraph group_projects["Project inspection"]
  node_project_catalog["Project catalog<br/>[projects.js]"]
end

subgraph group_sharing["Remote sharing"]
  node_reporter["Reporter<br/>[reporter.js]"]
  node_share_filter["Share-level filter<br/>[share.js]"]
  node_hub["Remote hub<br/>[hub.js]"]
end

node_user(("User"))
node_browser(("Browser"))
node_claude_state[("Claude state")]
node_other_processes["Other agent processes"]
node_cli["CLI entry<br/>[agent-hub.js]"]
node_local_projects[("Claude project files")]
node_reporting_machines(("Reporting machines"))

node_user -->|"views dashboard"| node_browser
node_cli -->|"starts server"| node_server
node_server -->|"creates collector"| node_collector
node_server -->|"creates scanner"| node_process_scanner
node_server -->|"creates catalog"| node_project_catalog
node_server -->|"creates reporter"| node_reporter
node_server -->|"creates hub"| node_hub
node_server -->|"sends messages"| node_messaging
node_claude_state -->|"provides sessions"| node_collector
node_collector -->|"parses transcripts"| node_transcript
node_other_processes -->|"provides process list"| node_process_scanner
node_collector -->|"supplies activity"| node_server
node_process_scanner -->|"supplies presence"| node_server
node_server -->|"serves dashboard"| node_browser
node_browser -->|"shows timelines"| node_activity_ui
node_browser -->|"shows agent map"| node_canvas_ui
node_browser -->|"shows projects"| node_projects_ui
node_server -->|"reads project setup"| node_local_projects
node_project_catalog -->|"inspects configuration"| node_local_projects
node_reporter -->|"collects agent data"| node_collector
node_reporter -->|"collects presence"| node_process_scanner
node_reporter -->|"filters report"| node_share_filter
node_hub -->|"limits stored data"| node_share_filter
node_reporting_machines -->|"sends reports"| node_hub
node_reporter -->|"posts reports"| node_hub
node_browser -->|"requests session message"| node_server
node_server -->|"forwards message"| node_messaging
node_messaging -->|"reads session credentials"| node_claude_state

click node_cli "https://github.com/uurdemir/agent-hub-ui/blob/main/bin/agent-hub.js"
click node_server "https://github.com/uurdemir/agent-hub-ui/blob/main/server/index.js"
click node_collector "https://github.com/uurdemir/agent-hub-ui/blob/main/server/claude.js"
click node_transcript "https://github.com/uurdemir/agent-hub-ui/blob/main/server/parse.js"
click node_process_scanner "https://github.com/uurdemir/agent-hub-ui/blob/main/server/processes.js"
click node_messaging "https://github.com/uurdemir/agent-hub-ui/blob/main/server/messaging.js"
click node_activity_ui "https://github.com/uurdemir/agent-hub-ui/blob/main/public/app.js"
click node_canvas_ui "https://github.com/uurdemir/agent-hub-ui/blob/main/public/canvas.js"
click node_projects_ui "https://github.com/uurdemir/agent-hub-ui/blob/main/public/projects.js"
click node_project_catalog "https://github.com/uurdemir/agent-hub-ui/blob/main/server/projects.js"
click node_reporter "https://github.com/uurdemir/agent-hub-ui/blob/main/server/reporter.js"
click node_share_filter "https://github.com/uurdemir/agent-hub-ui/blob/main/server/share.js"
click node_hub "https://github.com/uurdemir/agent-hub-ui/blob/main/server/hub.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_server,node_collector,node_transcript,node_process_scanner,node_messaging,node_user,node_browser toneBlue
class node_activity_ui,node_canvas_ui,node_projects_ui,node_claude_state,node_local_projects toneAmber
class node_project_catalog toneMint
class node_reporter,node_share_filter,node_hub toneRose
class node_other_processes,node_reporting_machines toneIndigo
class node_cli toneTeal
```

## Components

### Local collection

- [HTTP server](https://github.com/uurdemir/agent-hub-ui/blob/main/server/index.js): `server/index.js`
- [Claude collector](https://github.com/uurdemir/agent-hub-ui/blob/main/server/claude.js): `server/claude.js`
- [Transcript parser](https://github.com/uurdemir/agent-hub-ui/blob/main/server/parse.js): `server/parse.js`
- [Process scanner](https://github.com/uurdemir/agent-hub-ui/blob/main/server/processes.js): `server/processes.js`
- [Session messaging](https://github.com/uurdemir/agent-hub-ui/blob/main/server/messaging.js): `server/messaging.js`

### Dashboard

- [Activity and detail UI](https://github.com/uurdemir/agent-hub-ui/blob/main/public/app.js): `public/app.js`
- [Canvas view](https://github.com/uurdemir/agent-hub-ui/blob/main/public/canvas.js): `public/canvas.js`
- [Projects view](https://github.com/uurdemir/agent-hub-ui/blob/main/public/projects.js): `public/projects.js`

### Project inspection

- [Project catalog](https://github.com/uurdemir/agent-hub-ui/blob/main/server/projects.js): `server/projects.js`

### Remote sharing

- [Reporter](https://github.com/uurdemir/agent-hub-ui/blob/main/server/reporter.js): `server/reporter.js`
- [Share-level filter](https://github.com/uurdemir/agent-hub-ui/blob/main/server/share.js): `server/share.js`
- [Remote hub](https://github.com/uurdemir/agent-hub-ui/blob/main/server/hub.js): `server/hub.js`

### Other components

- **User**
- **Browser**
- **Claude state**
- **Other agent processes**
- [CLI entry](https://github.com/uurdemir/agent-hub-ui/blob/main/bin/agent-hub.js): `bin/agent-hub.js`
- **Claude project files**
- **Reporting machines**

## Connections

- User → Browser: views dashboard (evidence: `README.md`)
- CLI entry → HTTP server: starts server (evidence: `bin/agent-hub.js`)
- HTTP server → Claude collector: creates collector (evidence: `server/index.js`)
- HTTP server → Process scanner: creates scanner (evidence: `server/index.js`)
- HTTP server → Project catalog: creates catalog (evidence: `server/index.js`)
- HTTP server → Reporter: creates reporter (evidence: `server/index.js`)
- HTTP server → Remote hub: creates hub (evidence: `server/index.js`)
- HTTP server → Session messaging: sends messages (evidence: `server/index.js`)
- Claude state → Claude collector: provides sessions (evidence: `server/claude.js`)
- Claude collector → Transcript parser: parses transcripts (evidence: `server/claude.js`)
- Other agent processes → Process scanner: provides process list (evidence: `server/processes.js`)
- Claude collector → HTTP server: supplies activity (evidence: `README.md`)
- Process scanner → HTTP server: supplies presence (evidence: `README.md`)
- HTTP server → Browser: serves dashboard (evidence: `server/index.js`)
- Browser → Activity and detail UI: shows timelines (evidence: `README.md`)
- Browser → Canvas view: shows agent map (evidence: `README.md`)
- Browser → Projects view: shows projects (evidence: `README.md`)
- HTTP server → Claude project files: reads project setup (evidence: `README.md`)
- Project catalog → Claude project files: inspects configuration (evidence: `server/projects.js`)
- Reporter → Claude collector: collects agent data (evidence: `server/reporter.js`)
- Reporter → Process scanner: collects presence (evidence: `server/reporter.js`)
- Reporter → Share-level filter: filters report (evidence: `server/reporter.js`)
- Remote hub → Share-level filter: limits stored data (evidence: `server/hub.js`)
- Reporting machines → Remote hub: sends reports (evidence: `README.md`)
- Reporter → Remote hub: posts reports (evidence: `README.md`)
- Browser → HTTP server: requests session message (evidence: `README.md`)
- HTTP server → Session messaging: forwards message (evidence: `server/index.js`)
- Session messaging → Claude state: reads session credentials (evidence: `server/messaging.js`)