# nersus15/kamscode-meet-web architecture > Architecture diagram of the GitHub repository nersus15/kamscode-meet-web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/nersus15/kamscode-meet-web - Repository: https://github.com/nersus15/kamscode-meet-web ## Overview This is a Vue-based browser video-meeting app. Users authenticate, browse or create rooms, join a room, and then use live video, screen sharing, participant controls, and encrypted chat. The excerpts show the app’s authentication and room-view routing, while the source index documents the room composable’s media and signaling dependencies. The README is only a Vue starter-template description, so product capabilities are inferred from the source tree and comments; unsampled implementation details and backend behavior are not verified. Main entry points: [`src/composables/useRoom.ts`](https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/useRoom.ts) (Room state), [`src/views/RoomView.vue`](https://github.com/nersus15/kamscode-meet-web/blob/main/src/views/RoomView.vue) (Meeting view), [`src/composables/chat.ts`](https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/chat.ts) (Chat state), [`src/App.vue`](https://github.com/nersus15/kamscode-meet-web/blob/main/src/App.vue) (App router) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_entry["Account and navigation"] node_app["App router
[App.vue]"] node_authscreen["Sign-in screen
[AuthScreen.vue]"] node_auth["Session state
[useAuth.ts]"] node_nav["Room navigation
[useNav.ts]"] end subgraph group_meeting["Room experience"] node_home["Room directory
[HomeScreen.vue]"] node_lobby["Room lobby
[LobbyScreen.vue]"] node_roomview["Meeting view
[RoomView.vue]"] node_roomstate["Room state
[useRoom.ts]"] node_controls["Meeting controls
[ControlBar.vue]"] node_tile["Video tile
[VideoTile.vue]"] node_filmstrip["Participant strip
[FilmStrip.vue]"] node_safety["Safety dialog
[SafetyDialog.vue]"] node_debug["Connection debug
[DebugPanel.vue]"] end subgraph group_realtime["Realtime media"] node_api["REST client
[api.ts]"] node_signaling["WebSocket signaling
[signaling.ts]"] node_publisher["Media publisher
[publisher.ts]"] node_subscriber["Media subscriber
[subscriber.ts]"] node_speaker["Speaker detection
[speaker.ts]"] node_device["Device identity
[device.ts]"] node_protocol["Message protocol
[protocol.ts]"] end subgraph group_securechat["Encrypted chat"] node_chatui["Chat panel
[ChatPanel.vue]"] node_chat["Chat state
[chat.ts]"] node_e2ee["Message encryption
[e2ee.ts]"] node_trust["Key trust
[trust.ts]"] end node_user(("Meeting user")) node_backend["Meeting API"] node_sfu["SFU service"] node_user -->|"opens"| node_app node_app -->|"loads session"| node_auth node_app -->|"shows signed out"| node_authscreen node_app -->|"shows home"| node_home node_app -->|"opens room"| node_roomview node_authscreen -->|"submits credentials"| node_auth node_auth -->|"requests session"| node_api node_api -->|"calls REST"| node_backend node_home -->|"lists rooms"| node_api node_home -->|"navigates rooms"| node_nav node_lobby -->|"joins room"| node_api node_lobby -->|"navigates rooms"| node_nav node_lobby -->|"reads room state"| node_roomstate node_roomview -->|"creates room state"| node_roomstate node_roomview -->|"shows before joining"| node_lobby node_roomview -->|"renders video"| node_tile node_roomview -->|"renders participants"| node_filmstrip node_roomview -->|"renders controls"| node_controls node_roomview -->|"renders chat"| node_chatui node_roomview -->|"opens safety dialog"| node_safety node_roomview -->|"renders debug panel"| node_debug node_controls -->|"changes room state"| node_roomstate node_tile -->|"reads tile data"| node_roomstate node_roomstate -->|"requests join ticket"| node_api node_roomstate -->|"gets device ID"| node_device node_roomstate -->|"connects and dispatches"| node_signaling node_roomstate -->|"publishes media"| node_publisher node_roomstate -->|"receives media"| node_subscriber node_roomstate -->|"detects speakers"| node_speaker node_roomstate -->|"manages chat"| node_chat node_signaling -->|"exchanges messages"| node_sfu node_publisher -->|"sends offers"| node_signaling node_subscriber -->|"negotiates streams"| node_signaling node_signaling -->|"uses message types"| node_protocol node_chatui -->|"manages messages"| node_chat node_chat -->|"encrypts and decrypts"| node_e2ee node_chat -->|"checks key trust"| node_trust node_chat -->|"uses chat messages"| node_protocol node_chat -->|"relays encrypted envelopes"| node_sfu click node_app "https://github.com/nersus15/kamscode-meet-web/blob/main/src/App.vue" click node_authscreen "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/AuthScreen.vue" click node_auth "https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/useAuth.ts" click node_nav "https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/useNav.ts" click node_home "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/HomeScreen.vue" click node_lobby "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/LobbyScreen.vue" click node_roomview "https://github.com/nersus15/kamscode-meet-web/blob/main/src/views/RoomView.vue" click node_roomstate "https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/useRoom.ts" click node_controls "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/ControlBar.vue" click node_tile "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/VideoTile.vue" click node_filmstrip "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/FilmStrip.vue" click node_safety "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/SafetyDialog.vue" click node_debug "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/DebugPanel.vue" click node_api "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/api.ts" click node_signaling "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/signaling.ts" click node_publisher "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/publisher.ts" click node_subscriber "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/subscriber.ts" click node_speaker "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/speaker.ts" click node_device "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/device.ts" click node_protocol "https://github.com/nersus15/kamscode-meet-web/blob/main/src/types/protocol.ts" click node_chatui "https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/ChatPanel.vue" click node_chat "https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/chat.ts" click node_e2ee "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/e2ee.ts" click node_trust "https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/trust.ts" 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_app,node_authscreen,node_auth,node_nav,node_user toneBlue class node_home,node_lobby,node_roomview,node_roomstate,node_controls,node_tile,node_filmstrip,node_safety,node_debug toneAmber class node_api,node_signaling,node_publisher,node_subscriber,node_speaker,node_device,node_protocol,node_backend toneMint class node_chatui,node_chat,node_e2ee,node_trust toneRose class node_sfu toneIndigo ``` ## Components ### Account and navigation - [App router](https://github.com/nersus15/kamscode-meet-web/blob/main/src/App.vue): `src/App.vue` - [Sign-in screen](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/AuthScreen.vue): `src/components/AuthScreen.vue` - [Session state](https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/useAuth.ts): `src/composables/useAuth.ts` - [Room navigation](https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/useNav.ts): `src/composables/useNav.ts` ### Room experience - [Room directory](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/HomeScreen.vue): `src/components/HomeScreen.vue` - [Room lobby](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/LobbyScreen.vue): `src/components/LobbyScreen.vue` - [Meeting view](https://github.com/nersus15/kamscode-meet-web/blob/main/src/views/RoomView.vue): `src/views/RoomView.vue` - [Room state](https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/useRoom.ts): `src/composables/useRoom.ts` - [Meeting controls](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/ControlBar.vue): `src/components/ControlBar.vue` - [Video tile](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/VideoTile.vue): `src/components/VideoTile.vue` - [Participant strip](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/FilmStrip.vue): `src/components/FilmStrip.vue` - [Safety dialog](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/SafetyDialog.vue): `src/components/SafetyDialog.vue` - [Connection debug](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/DebugPanel.vue): `src/components/DebugPanel.vue` ### Realtime media - [REST client](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/api.ts): `src/lib/api.ts` - [WebSocket signaling](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/signaling.ts): `src/lib/signaling.ts` - [Media publisher](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/publisher.ts): `src/lib/publisher.ts` - [Media subscriber](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/subscriber.ts): `src/lib/subscriber.ts` - [Speaker detection](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/speaker.ts): `src/lib/speaker.ts` - [Device identity](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/device.ts): `src/lib/device.ts` - [Message protocol](https://github.com/nersus15/kamscode-meet-web/blob/main/src/types/protocol.ts): `src/types/protocol.ts` ### Encrypted chat - [Chat panel](https://github.com/nersus15/kamscode-meet-web/blob/main/src/components/ChatPanel.vue): `src/components/ChatPanel.vue` - [Chat state](https://github.com/nersus15/kamscode-meet-web/blob/main/src/composables/chat.ts): `src/composables/chat.ts` - [Message encryption](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/e2ee.ts): `src/lib/e2ee.ts` - [Key trust](https://github.com/nersus15/kamscode-meet-web/blob/main/src/lib/trust.ts): `src/lib/trust.ts` ### Other components - **Meeting user** - **Meeting API** - **SFU service** ## Connections - Meeting user → App router: opens (evidence: `src/App.vue`) - App router → Session state: loads session (evidence: `src/App.vue`) - App router → Sign-in screen: shows signed out (evidence: `src/App.vue`) - App router → Room directory: shows home (evidence: `src/App.vue`) - App router → Meeting view: opens room (evidence: `src/App.vue`) - Sign-in screen → Session state: submits credentials (evidence: `src/components/AuthScreen.vue`) - Session state → REST client: requests session (evidence: `src/composables/useAuth.ts`) - REST client → Meeting API: calls REST (evidence: `src/lib/api.ts`) - Room directory → REST client: lists rooms (evidence: `src/components/HomeScreen.vue`) - Room directory → Room navigation: navigates rooms (evidence: `src/components/HomeScreen.vue`) - Room lobby → REST client: joins room (evidence: `src/components/LobbyScreen.vue`) - Room lobby → Room navigation: navigates rooms (evidence: `src/components/LobbyScreen.vue`) - Room lobby → Room state: reads room state (evidence: `src/components/LobbyScreen.vue`) - Meeting view → Room state: creates room state (evidence: `src/views/RoomView.vue`) - Meeting view → Room lobby: shows before joining (evidence: `src/views/RoomView.vue`) - Meeting view → Video tile: renders video (evidence: `src/views/RoomView.vue`) - Meeting view → Participant strip: renders participants (evidence: `src/views/RoomView.vue`) - Meeting view → Meeting controls: renders controls (evidence: `src/views/RoomView.vue`) - Meeting view → Chat panel: renders chat (evidence: `src/views/RoomView.vue`) - Meeting view → Safety dialog: opens safety dialog (evidence: `src/views/RoomView.vue`) - Meeting view → Connection debug: renders debug panel (evidence: `src/views/RoomView.vue`) - Meeting controls → Room state: changes room state (evidence: `src/components/ControlBar.vue`) - Video tile → Room state: reads tile data (evidence: `src/components/VideoTile.vue`) - Room state → REST client: requests join ticket (evidence: `src/composables/useRoom.ts`) - Room state → Device identity: gets device ID (evidence: `src/composables/useRoom.ts`) - Room state → WebSocket signaling: connects and dispatches (evidence: `src/composables/useRoom.ts`) - Room state → Media publisher: publishes media (evidence: `src/composables/useRoom.ts`) - Room state → Media subscriber: receives media (evidence: `src/composables/useRoom.ts`) - Room state → Speaker detection: detects speakers (evidence: `src/composables/useRoom.ts`) - Room state → Chat state: manages chat (evidence: `src/composables/useRoom.ts`) - WebSocket signaling → SFU service: exchanges messages (evidence: `src/lib/signaling.ts`) - Media publisher → WebSocket signaling: sends offers (evidence: `src/lib/publisher.ts`) - Media subscriber → WebSocket signaling: negotiates streams (evidence: `src/lib/subscriber.ts`) - WebSocket signaling → Message protocol: uses message types (evidence: `src/lib/signaling.ts`) - Chat panel → Chat state: manages messages (evidence: `src/components/ChatPanel.vue`) - Chat state → Message encryption: encrypts and decrypts (evidence: `src/composables/chat.ts`) - Chat state → Key trust: checks key trust (evidence: `src/composables/chat.ts`) - Chat state → Message protocol: uses chat messages (evidence: `src/composables/chat.ts`) - Chat state → SFU service: relays encrypted envelopes (evidence: `src/composables/chat.ts`)