Dashboard (apps/dashboard/react)

The customer-facing UI. A Vite + React SPA that runs in three modes:

1. a standalone SPA / kiosk on port 80,
2. a Home Assistant side-panel (loaded via a custom-element launcher), and
3. a device mapper (deep-linked with ?mapper=1).

It controls devices through the edge agent and reads live entity state from Home Assistant over WebSocket.

• Workspace: apps/dashboard/react  ·  package name: @signapps/dashboard-react
• Build tool: Vite (two configs — the SPA and the launcher element)

Tech stack

Concern	Choice
Build	Vite (vite.config.ts + vite.launcher.config.ts)
UI	React 19, Tamagui (@signapps/ui, @signapps/dashboard)
HA integration	home-assistant-js-websocket

Usage

Run in dev

pnpm dev:dashboard-react     # vite, port 5174

Dev proxies (vite.config.ts) expect Home Assistant and the edge agent running locally:

Path	Proxied to
/api	http://127.0.0.1:8123 (Home Assistant core)
/edge-agent	http://127.0.0.1:18080 (edge agent)
/config.json	HA local/signapps-dashboard/config.json

Build

pnpm --filter @signapps/dashboard-react run build

Runs tsc -b, then vite build (SPA), then vite build --config vite.launcher.config.ts (launcher). Outputs to home-assistant/dist/www/signapps-dashboard/:

• index.html + assets/ — the SPA
• signapps-launcher.js — the Home Assistant custom-element launcher

The build version is injected from the DASHBOARD_RELEASE_TAG env var (set by CI) as __SIGNAPPS_DASHBOARD_VERSION__.

Deploy

Released via git tag dashboard/v<semver> → GitHub Actions builds the artifact and publishes it to Cloudflare R2 + the API. See Releases & deploys → Dashboard.

Runtime structure

• main.tsx restores the session (from localStorage/cookies), then renders the login page or the authenticated dashboard. It loads the dashboard config from the edge agent (GET /api/dashboard).
• launcher.ts defines two web components — signapps-react (dashboard) and signapps-device-mapping (mapper) — sets an ha_ingress cookie with the HA token, and redirects into the standalone SPA with deep-link support.
• Two tokens drive access: edgeAgentToken (edge-agent API) and haAccessToken (Home Assistant), both auto-refreshed before expiry.

Device mapper

/?mapper=1 opens a full-screen UI for mapping unmapped devices to Home Assistant entities. It's reachable from the HA sidebar "Device Mapping" entry and auto-opens when devices need mapping. It uses only the edge agent (no HA gate).