# sangeeth-47/live architecture

> Architecture diagram of the GitHub repository sangeeth-47/live, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sangeeth-47/live
- Repository: https://github.com/sangeeth-47/live

## Overview

1. **Application shape**
   - This is a client-side browser app with two primary modes: **Presenter** and **Viewer**.
   - The app starts from `index.html`, with `src/js/main.js` and `src/js/app.js` acting as the JavaScript entry points for bootstrapping, routing, and mode selection.

2. **Top-level orchestration**
   - `router.js`, `view.manager.js`, `state.js`, and `config.js` form the application shell.
   - Their job is to decide which flow is active, coordinate view rendering, and share global state/config across the presenter and viewer subsystems.

3. **Domain split: presenter vs viewer**
   - The repository is intentionally split into two feature domains:
     - `src/js/presenter/*` for the session owner who shares a screen.
     - `src/js/viewer/*` for participants who request access and watch.
   - Each side has its own actions, events, store/state, service, and view/layout modules, which suggests a clean separation between control UI and watching UI.

4. **Presenter subsystem**
   - The presenter side includes `presenter.service.js`, `presenter.store.js`, `presenter.view.js`, `layout.manager.js`, and multiple section modules.
   - Presenter UI is composed of sections such as **header**, **sidebar**, **statistics**, **pending requests**, and **viewers**.
   - This side is responsible for creating a sharing session, approving viewers, monitoring session status, and displaying session metrics.

5. **Viewer subsystem**
   - The viewer side includes `viewer.service.js`, `viewer.store.js`, `viewer.state.js`, `viewer.view.js`, `viewer.layout.js`, plus actions/events modules.
   - Its responsibility is much narrower: enter/join a room, wait for approval, and render the live shared screen.
   - The viewer likely consumes state from the room/session flow and renders a simplified experience compared to the presenter dashboard.

6. **Room and sharing domain**
   - `src/js/room/*` and `src/js/sharing/*` appear to represent the business workflow for creating or joining a room and tracking access/sharing state.
   - `sharing.actions.js`, `sharing.service.js`, `sharing.store.js` likely handle room-code generation and session lifecycle.
   - `room.actions.js`, `room.service.js`, `room.store.js`, and `room.events.js` likely manage join requests, approvals, and room membership state.

7. **Realtime control plane: WebSocket**
   - `src/js/websocket/*` is the signaling/control layer used for session coordination.
   - It includes connection management, protocol/message handling, heartbeat, event routing, sender utilities, and event registration.
   - The `events/presenter.events.js` and `events/system.events.js` files imply server-pushed events are routed back into the app to update state such as pending requests, approvals, and connection health.

8. **Media plane: LiveKit**
   - `src/js/livekit/*` is the media streaming subsystem and likely carries the actual screen-share video/audio stream.
   - The presence of `livekit.connection.js`, `livekit.service.js`, `livekit.store.js`, and `livekit.actions.js` shows a dedicated integration layer around the LiveKit SDK/bundle.
   - In the architecture, WebSocket appears to handle session signaling and approval, while LiveKit handles low-latency media transport once a viewer is admitted.

9. **Event-driven application flow**
   - `eventbus.js` and the various `*.events.js` files indicate an internal pub/sub style for decoupling UI, services, and transport events.
   - Data likely flows from transport layers into stores, then into views through event notifications rather than direct cross-module calls.

10. **UI component system**
   - Reusable visual primitives live under `src/js/components/` (`button`, `badge`, `card`, `spinner`, base `component`).
   - These are consumed by presenter and viewer views/sections to keep the UI modular and consistent.

11. **Styling and layout**
   - Styles are split by concern: reset, typography, variables, layout, responsive behavior, animations, and component styles.
   - There are also dedicated style bundles for presenter and viewer screens, reinforcing that the two modes have distinct layouts and visual hierarchies.

12. **Assets and browser runtime assumptions**
   - The app is entirely browser-based and depends on modern browser screen-capture APIs, which matches the README’s browser support notes.
   - `ico/site.webmanifest` and favicon assets suggest a PWA-like shell, but the core architecture is still a single-page web application rather than a multi-page site.

13. **Likely end-to-end data flow**
   - Presenter creates a session → sharing/room logic establishes a room code → WebSocket notifies the backend/control plane → viewer submits join request → presenter approves via the presenter dashboard → viewer joins the LiveKit session → LiveKit carries the live screen stream.
   - This is the main flow to show in an architecture diagram, with WebSocket as the coordination channel and LiveKit as the media channel.

14. **State boundaries to show in a diagram**
   - Good diagram boundaries would be:
     - **App shell / routing**
     - **Presenter dashboard**
     - **Viewer experience**
     - **Room/sharing workflow**
     - **WebSocket signaling**
     - **LiveKit media streaming**
     - **Shared UI components and styling**
   - The key architectural idea is that the UI is split by role, while realtime signaling and media transport are separate infrastructure layers underneath.

Main entry points: [`src/js/presenter/presenter.view.js`](https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.view.js) (Presenter UI), [`src/js/app.js`](https://github.com/sangeeth-47/live/blob/main/src/js/app.js) (App), [`src/js/presenter/presenter.service.js`](https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.service.js) (Presenter svc), [`src/js/viewer/viewer.view.js`](https://github.com/sangeeth-47/live/blob/main/src/js/viewer/viewer.view.js) (Viewer UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App shell"]
  node_node_main(("Main<br/>bootstrap entry<br/>[main.js]"))
  node_node_app["App<br/>bootstrap/orchestrator<br/>[app.js]"]
  node_node_router["Router<br/>navigation shell<br/>[router.js]"]
  node_node_view_manager["View mgr<br/>view coordinator<br/>[view.manager.js]"]
  node_node_state[("State<br/>[state.js]")]
  node_node_config["Config<br/>[config.js]"]
end

subgraph group_group_presenter["Presenter"]
  node_node_presenter_view["Presenter UI<br/>dashboard view<br/>[presenter.view.js]"]
  node_node_presenter_service["Presenter svc<br/>presenter service"]
  node_node_presenter_store[("Presenter store<br/>presenter state<br/>[presenter.store.js]")]
  node_node_layout_manager["Layout mgr<br/>layout coordinator<br/>[layout.manager.js]"]
  node_node_sections["Sections<br/>[header.section.js]"]
end

subgraph group_group_viewer["Viewer"]
  node_node_viewer_view["Viewer UI<br/>viewer view<br/>[viewer.view.js]"]
  node_node_viewer_service["Viewer svc<br/>viewer service<br/>[viewer.service.js]"]
  node_node_viewer_state[("Viewer state<br/>[viewer.state.js]")]
end

subgraph group_group_workflow["Room & sharing"]
  node_node_room["Room<br/>membership workflow<br/>[room.service.js]"]
  node_node_sharing["Sharing<br/>session workflow<br/>[sharing.service.js]"]
end

subgraph group_group_realtime["Realtime"]
  node_node_websocket{{"WebSocket<br/>signaling plane<br/>[index.js]"}}
  node_node_livekit{{"LiveKit<br/>media plane<br/>[livekit.service.js]"}}
  node_node_eventbus(("Event bus<br/>pub/sub core<br/>[eventbus.js]"))
end

subgraph group_group_ui["Shared UI"]
  node_node_components["Components<br/>ui primitives<br/>[component.js]"]
  node_node_styles["Styles<br/>css system<br/>[app.css]"]
end

node_node_main -->|"bootstraps"| node_node_app
node_node_app -->|"routes"| node_node_router
node_node_app -->|"initializes"| node_node_state
node_node_app -->|"reads"| node_node_config
node_node_router -->|"renders"| node_node_view_manager
node_node_view_manager -->|"selects"| node_node_presenter_view
node_node_view_manager -->|"selects"| node_node_viewer_view
node_node_presenter_view -->|"uses"| node_node_layout_manager
node_node_layout_manager -->|"composes"| node_node_sections
node_node_presenter_view -->|"drives"| node_node_presenter_service
node_node_presenter_service -->|"updates"| node_node_presenter_store
node_node_viewer_view -->|"drives"| node_node_viewer_service
node_node_viewer_service -->|"updates"| node_node_viewer_state
node_node_presenter_service -->|"coordinates"| node_node_room
node_node_viewer_service -->|"joins"| node_node_room
node_node_presenter_service -->|"creates"| node_node_sharing
node_node_room -->|"signals"| node_node_websocket
node_node_sharing -->|"signals"| node_node_websocket
node_node_websocket -->|"publishes"| node_node_eventbus
node_node_eventbus -->|"notifies"| node_node_presenter_store
node_node_eventbus -->|"notifies"| node_node_viewer_state
node_node_websocket -->|"orchestrates"| node_node_livekit
node_node_livekit -->|"streams"| node_node_viewer_service
node_node_presenter_view -->|"uses"| node_node_components
node_node_viewer_view -->|"uses"| node_node_components
node_node_presenter_view -->|"styles"| node_node_styles
node_node_viewer_view -->|"styles"| node_node_styles

click node_node_main "https://github.com/sangeeth-47/live/blob/main/src/js/main.js"
click node_node_app "https://github.com/sangeeth-47/live/blob/main/src/js/app.js"
click node_node_router "https://github.com/sangeeth-47/live/blob/main/src/js/router.js"
click node_node_view_manager "https://github.com/sangeeth-47/live/blob/main/src/js/view.manager.js"
click node_node_state "https://github.com/sangeeth-47/live/blob/main/src/js/state.js"
click node_node_config "https://github.com/sangeeth-47/live/blob/main/src/js/config.js"
click node_node_presenter_view "https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.view.js"
click node_node_presenter_service "https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.service.js"
click node_node_presenter_store "https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.store.js"
click node_node_layout_manager "https://github.com/sangeeth-47/live/blob/main/src/js/presenter/layout.manager.js"
click node_node_sections "https://github.com/sangeeth-47/live/blob/main/src/js/presenter/sections/header.section.js"
click node_node_viewer_view "https://github.com/sangeeth-47/live/blob/main/src/js/viewer/viewer.view.js"
click node_node_viewer_service "https://github.com/sangeeth-47/live/blob/main/src/js/viewer/viewer.service.js"
click node_node_viewer_state "https://github.com/sangeeth-47/live/blob/main/src/js/viewer/viewer.state.js"
click node_node_room "https://github.com/sangeeth-47/live/blob/main/src/js/room/room.service.js"
click node_node_sharing "https://github.com/sangeeth-47/live/blob/main/src/js/sharing/sharing.service.js"
click node_node_websocket "https://github.com/sangeeth-47/live/blob/main/src/js/websocket/index.js"
click node_node_livekit "https://github.com/sangeeth-47/live/blob/main/src/js/livekit/livekit.service.js"
click node_node_eventbus "https://github.com/sangeeth-47/live/blob/main/src/js/eventbus.js"
click node_node_components "https://github.com/sangeeth-47/live/blob/main/src/js/components/component.js"
click node_node_styles "https://github.com/sangeeth-47/live/blob/main/src/css/app.css"

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_node_main,node_node_app,node_node_router,node_node_view_manager,node_node_state,node_node_config toneBlue
class node_node_presenter_view,node_node_presenter_service,node_node_presenter_store,node_node_layout_manager,node_node_sections toneAmber
class node_node_viewer_view,node_node_viewer_service,node_node_viewer_state toneMint
class node_node_room,node_node_sharing toneRose
class node_node_websocket,node_node_livekit,node_node_eventbus toneIndigo
class node_node_components,node_node_styles toneTeal
```

## Components

### App shell

Bootstrapping, routing, and shared application state.

- [Main](https://github.com/sangeeth-47/live/blob/main/src/js/main.js): bootstrap entry · Browser entry point that starts the app. · `src/js/main.js`
- [App](https://github.com/sangeeth-47/live/blob/main/src/js/app.js): bootstrap/orchestrator · Top-level app setup and mode wiring. · `src/js/app.js`
- [Router](https://github.com/sangeeth-47/live/blob/main/src/js/router.js): navigation shell · Selects the active flow and view. · `src/js/router.js`
- [View mgr](https://github.com/sangeeth-47/live/blob/main/src/js/view.manager.js): view coordinator · Coordinates rendering and screen switching. · `src/js/view.manager.js`
- [State](https://github.com/sangeeth-47/live/blob/main/src/js/state.js): shared state · Global application state boundary. · `src/js/state.js`
- [Config](https://github.com/sangeeth-47/live/blob/main/src/js/config.js): app config · Shared runtime configuration. · `src/js/config.js`

### Presenter

Dashboard for the session owner and moderation flow.

- [Presenter UI](https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.view.js): dashboard view · Primary presenter-facing view composition. · `src/js/presenter/presenter.view.js`
- [Presenter svc](https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.service.js): presenter service · Presenter-specific orchestration and actions. · `src/js/presenter/presenter.service.js`
- [Presenter store](https://github.com/sangeeth-47/live/blob/main/src/js/presenter/presenter.store.js): presenter state · Presenter dashboard state container. · `src/js/presenter/presenter.store.js`
- [Layout mgr](https://github.com/sangeeth-47/live/blob/main/src/js/presenter/layout.manager.js): layout coordinator · Arranges presenter sections and screen regions. · `src/js/presenter/layout.manager.js`
- [Sections](https://github.com/sangeeth-47/live/blob/main/src/js/presenter/sections/header.section.js): presenter sections · Header, sidebar, statistics, pending, and viewers panels. · `src/js/presenter/sections/header.section.js`

### Viewer

Participant experience for joining and watching.

- [Viewer UI](https://github.com/sangeeth-47/live/blob/main/src/js/viewer/viewer.view.js): viewer view · Viewer-facing screen for joining and watching. · `src/js/viewer/viewer.view.js`
- [Viewer svc](https://github.com/sangeeth-47/live/blob/main/src/js/viewer/viewer.service.js): viewer service · Viewer flow orchestration and actions. · `src/js/viewer/viewer.service.js`
- [Viewer state](https://github.com/sangeeth-47/live/blob/main/src/js/viewer/viewer.state.js): viewer state · Viewer session and access state. · `src/js/viewer/viewer.state.js`

### Room & sharing

Room lifecycle and sharing/session coordination.

- [Room](https://github.com/sangeeth-47/live/blob/main/src/js/room/room.service.js): membership workflow · Join, approve, and room membership logic. · `src/js/room/room.service.js`
- [Sharing](https://github.com/sangeeth-47/live/blob/main/src/js/sharing/sharing.service.js): session workflow · Session creation and room-code sharing flow. · `src/js/sharing/sharing.service.js`

### Realtime

Signaling and media transport layers.

- [WebSocket](https://github.com/sangeeth-47/live/blob/main/src/js/websocket/index.js): signaling plane · Connection management, protocol, heartbeat, and event routing. · `src/js/websocket/index.js`
- [LiveKit](https://github.com/sangeeth-47/live/blob/main/src/js/livekit/livekit.service.js): media plane · Screen-share media transport and session connection. · `src/js/livekit/livekit.service.js`
- [Event bus](https://github.com/sangeeth-47/live/blob/main/src/js/eventbus.js): pub/sub core · Internal event distribution across UI and services. · `src/js/eventbus.js`

### Shared UI

Reusable components and browser styling.

- [Components](https://github.com/sangeeth-47/live/blob/main/src/js/components/component.js): ui primitives · Reusable button, badge, card, and spinner controls. · `src/js/components/component.js`
- [Styles](https://github.com/sangeeth-47/live/blob/main/src/css/app.css): css system · Shared layout, components, presenter, viewer, and responsive styling. · `src/css/app.css`

## Connections

- Main → App: bootstraps · The HTML entry loads the JS app bootstrap.
- App → Router: routes · App setup delegates mode selection to the router.
- App → State: initializes · App shell seeds shared state.
- App → Config: reads · Runtime configuration is loaded during startup.
- Router → View mgr: renders · Routing chooses which view to display.
- View mgr → Presenter UI: selects · Presenter mode is mounted through the view manager.
- View mgr → Viewer UI: selects · Viewer mode is mounted through the view manager.
- Presenter UI → Layout mgr: uses · Presenter UI is arranged by the layout manager.
- Layout mgr → Sections: composes · Layout manager assembles presenter sections.
- Presenter UI → Presenter svc: drives · Presenter UI triggers presenter actions and workflows.
- Presenter svc → Presenter store: updates · Presenter actions mutate presenter state.
- Viewer UI → Viewer svc: drives · Viewer UI triggers viewer flow logic.
- Viewer svc → Viewer state: updates · Viewer service maintains viewer state.
- Presenter svc → Room: coordinates · Presenter flow manages room membership and approval.
- Viewer svc → Room: joins · Viewer flow uses room logic to request access.
- Presenter svc → Sharing: creates · Presenter flow establishes and shares sessions.
- Room → WebSocket: signals · Room lifecycle is coordinated over WebSocket.
- Sharing → WebSocket: signals · Sharing/session state is announced over WebSocket.
- WebSocket → Event bus: publishes · Transport events are fanned into the internal event bus.
- Event bus → Presenter store: notifies · Presenter state reacts to pub/sub events.
- Event bus → Viewer state: notifies · Viewer state reacts to pub/sub events.
- WebSocket → LiveKit: orchestrates · Signaling coordinates media session admission.
- LiveKit → Viewer svc: streams · Live media is consumed by the viewer experience.
- Presenter UI → Components: uses · Presenter UI is built from shared primitives.
- Viewer UI → Components: uses · Viewer UI is built from shared primitives.
- Presenter UI → Styles: styles · Presenter screens use the shared stylesheet system.
- Viewer UI → Styles: styles · Viewer screens use the shared stylesheet system.