# t3rr8us-p4nk/mousetrap architecture

> Architecture diagram of the GitHub repository t3rr8us-p4nk/mousetrap, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/t3rr8us-p4nk/mousetrap
- Repository: https://github.com/t3rr8us-p4nk/mousetrap

## Overview

Mouse Trap is a Vue/Capacitor device-information collector paired with a Firebase-backed admin console. On startup, the client gathers device, battery, location, SIM, network and conditional Wi-Fi data, writes it under the device ID, and listens for a browser-opening command. An administrator can browse device records, inspect their reported details and update that command. README capabilities inform the collection and display branches; sampled code supports the specific calls shown. Notifications are mentioned in the admin home screen but no implementation is evidenced here.

Main entry points: [`client_app/src/components/Home.vue`](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/components/Home.vue) (Device Collector), [`admin_app/src/assets/db/firebase.js`](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/assets/db/firebase.js) (Admin Firebase), [`admin_app/src/main.js`](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/main.js) (Admin Entry), [`admin_app/src/components/views/dashboard/dashboard.vue`](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/views/dashboard/dashboard.vue) (Device List)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client Collection"]
  node_client_entry["Client Entry<br/>[main.js]"]
  node_client_app["Client Shell<br/>[App.vue]"]
  node_collector["Device Collector<br/>[Home.vue]"]
end

subgraph group_firebase["Firebase State"]
  node_firebase_client["Client Firebase<br/>[firebase.js]"]
  node_device_store[("Device Records")]
  node_firebase_admin["Admin Firebase<br/>[firebase.js]"]
end

subgraph group_admin["Admin Console"]
  node_admin_entry["Admin Entry<br/>[main.js]"]
  node_admin_shell["Admin Shell<br/>[App.vue]"]
  node_admin_index["Admin View Host<br/>[index.vue]"]
  node_admin_routes["Admin Router<br/>[index.js]"]
  node_admin_home["Admin Home<br/>[Home.vue]"]
  node_device_list["Device List<br/>[dashboard.vue]"]
  node_device_detail["Device Detail &amp; Command"]
end

subgraph group_integrations["Device Integrations"]
  node_device_api["Device &amp; Battery"]
  node_geo_api["Geolocation"]
  node_network_api["Network Status"]
  node_sim_api["SIM Information"]
  node_wifi_api["Wi-Fi Information"]
  node_browser_api["Browser"]
end

node_device_user(("Device User"))
node_admin_user(("Administrator"))

node_device_user -->|"opens"| node_client_entry
node_client_entry -->|"mounts"| node_client_app
node_client_app -->|"renders"| node_collector
node_collector -->|"reads info"| node_device_api
node_collector -->|"reads location"| node_geo_api
node_collector -->|"reads status"| node_network_api
node_collector -->|"reads SIM"| node_sim_api
node_collector -->|"reads Wi-Fi"| node_wifi_api
node_collector -->|"writes and listens"| node_firebase_client
node_firebase_client -->|"reads/writes"| node_device_store
node_device_store -->|"syncs records"| node_firebase_admin
node_firebase_admin -->|"provides records"| node_device_list
node_firebase_admin -->|"provides record"| node_device_detail
node_device_detail -->|"updates command"| node_firebase_admin
node_collector -->|"opens command URL"| node_browser_api
node_admin_user -->|"opens"| node_admin_entry
node_admin_entry -->|"mounts"| node_admin_shell
node_admin_entry -->|"installs"| node_admin_routes
node_admin_shell -->|"renders"| node_admin_index
node_admin_index -->|"hosts routed views"| node_admin_routes
node_admin_user -->|"browses devices"| node_device_list
node_device_list -->|"selects device"| node_device_detail

click node_client_entry "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/main.js"
click node_client_app "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/App.vue"
click node_collector "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/components/Home.vue"
click node_firebase_client "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/assets/db/firebase.js"
click node_admin_entry "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/main.js"
click node_admin_shell "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/App.vue"
click node_admin_index "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/index.vue"
click node_admin_routes "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/assets/routes/index.js"
click node_admin_home "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/views/Home.vue"
click node_device_list "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/views/dashboard/dashboard.vue"
click node_device_detail "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/views/dashboard/deviceDashboard.vue"
click node_firebase_admin "https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/assets/db/firebase.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_client_entry,node_client_app,node_collector,node_device_user toneBlue
class node_firebase_client,node_device_store,node_firebase_admin toneAmber
class node_admin_entry,node_admin_shell,node_admin_index,node_admin_routes,node_admin_home,node_device_list,node_device_detail toneMint
class node_device_api,node_geo_api,node_network_api,node_sim_api,node_wifi_api,node_browser_api toneRose
class node_admin_user toneIndigo
```

## Components

### Client Collection

- [Client Entry](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/main.js): `client_app/src/main.js`
- [Client Shell](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/App.vue): `client_app/src/App.vue`
- [Device Collector](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/components/Home.vue): `client_app/src/components/Home.vue`

### Firebase State

- [Client Firebase](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/client_app/src/assets/db/firebase.js): `client_app/src/assets/db/firebase.js`
- **Device Records**
- [Admin Firebase](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/assets/db/firebase.js): `admin_app/src/assets/db/firebase.js`

### Admin Console

- [Admin Entry](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/main.js): `admin_app/src/main.js`
- [Admin Shell](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/App.vue): `admin_app/src/App.vue`
- [Admin View Host](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/index.vue): `admin_app/src/components/index.vue`
- [Admin Router](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/assets/routes/index.js): `admin_app/src/assets/routes/index.js`
- [Admin Home](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/views/Home.vue): `admin_app/src/components/views/Home.vue`
- [Device List](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/views/dashboard/dashboard.vue): `admin_app/src/components/views/dashboard/dashboard.vue`
- [Device Detail & Command](https://github.com/t3rr8us-p4nk/mousetrap/blob/main/admin_app/src/components/views/dashboard/deviceDashboard.vue): `admin_app/src/components/views/dashboard/deviceDashboard.vue`

### Device Integrations

- **Device & Battery**
- **Geolocation**
- **Network Status**
- **SIM Information**
- **Wi-Fi Information**
- **Browser**

### Other components

- **Device User**
- **Administrator**

## Connections

- Device User → Client Entry: opens
- Client Entry → Client Shell: mounts
- Client Shell → Device Collector: renders
- Device Collector → Device & Battery: reads info
- Device Collector → Geolocation: reads location
- Device Collector → Network Status: reads status
- Device Collector → SIM Information: reads SIM
- Device Collector → Wi-Fi Information: reads Wi-Fi
- Device Collector → Client Firebase: writes and listens
- Client Firebase → Device Records: reads/writes
- Device Records → Admin Firebase: syncs records
- Admin Firebase → Device List: provides records
- Admin Firebase → Device Detail & Command: provides record
- Device Detail & Command → Admin Firebase: updates command
- Device Collector → Browser: opens command URL
- Administrator → Admin Entry: opens
- Admin Entry → Admin Shell: mounts
- Admin Entry → Admin Router: installs
- Admin Shell → Admin View Host: renders
- Admin View Host → Admin Router: hosts routed views
- Administrator → Device List: browses devices
- Device List → Device Detail & Command: selects device