Rename the whole project from CommGate to gsmnode and re-skin every surface onto the new signal-green + ink design system (Space Grotesk / IBM Plex Sans / JetBrains Mono, flat surfaces, two-arrow routing mark, lowercase gsm+node wordmark). - Web App + API panel: rewrite token layer, gn-* utilities, data-gsm-theme, new logo/favicon assets; both builds verified. - Phone App (Flutter): green theme, new mark/wordmark widgets, adaptive launcher icons; rename Android applicationId/package to app.gsmnode.phone; bump AGP to 8.6.0 and google_fonts to 8.1.0; debug APK build verified. - API Server (Go): panel routes, User-Agent, health service id, branding. - Home Assistant Plugin: rename integration domain sms_gateway to gsmnode (folder, DOMAIN, services, entity ids, classes); py_compile verified. - Update all READMEs; add .gitignore (excludes Design/, build artifacts). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3.1 KiB
gsmnode — Web App
Browser console for the gateway: a Vue 3 + Tailwind SPA served by a small Go
backend-for-frontend (BFF). Styled with the gsmnode design system
(../Design/SMS Gateway logo design/): signal-green #2E9E6B on ink, Space
Grotesk (display) · IBM Plex Sans (body) · JetBrains Mono (code/labels), Lucide
icons, and a persisted light/dark toggle (localStorage key gsmnode-theme,
data-gsm-theme attribute). The BFF serves the built SPA and reverse-proxies
/api/* to the API Server, so the browser is always same-origin and all data
access still flows through the API Server.
Browser ─► Web App BFF (:8090) ──/api/*──► API Server (:8080) ─► PocketBase
└── serves embedded Vue SPA
Layout
server/ Go BFF: embeds web/dist, proxies /api -> API_BASE
main.go
.env.example
dist/ built SPA (generated; embedded at compile time)
web/ Vue 3 + Vite + Tailwind v4 source
src/
api.js fetch wrapper (bearer token, same-origin /api)
store/auth.js login state
router.js routes + auth guard
views/ Login, Devices, Send, Messages, Inbox, Webhooks
Requirements
- Node 18+ and Go 1.26+
- A running API Server (see
../API Server)
Develop
Two terminals:
# terminal 1 — API Server (see ../API Server/README.md)
cd "../API Server"; ./scripts/Run-ApiServer.ps1
# terminal 2 — Vite dev server with hot reload (proxies /api -> :8080)
cd web; npm install; npm run dev # http://localhost:5173
Build & run (production-style)
./server/Run-WebApp.ps1 # builds frontend, then serves on :8090
# or manually:
cd web; npm run build # outputs to ../server/dist
cd ../server; go run . # http://localhost:8090
Config (server/.env, copy from .env.example):
| Variable | Purpose | Default |
|---|---|---|
WEB_ADDR |
Listen address | :8090 |
API_BASE |
API Server base URL | http://localhost:8080 |
Pages
- Login — authenticates via
/api/auth/login, stores the JWT. Includes an editable Server settings section (like the phone app): enter an API Server URL to point the browser directly at any server (uses the server's CORS), or leave it blank to use this site's built-in BFF proxy. The choice is remembered inlocalStorage. - Devices — list/remove your registered phones, see online status & last seen.
- Send SMS — queue an outbound message (multiple numbers, pick device/SIM).
- Call — remotely tell a device to place an outbound phone call.
- Messages — outbound history with live status (
Pending→…→Delivered/Failed), filterable. - Inbox — incoming messages received by your devices.
- Webhooks — register/delete callbacks for
sms:received|sent|delivered|failed.
The header shows a live API Server status indicator (green/red dot) that polls
/api/health every 10s against the configured server, with latency on hover.
Log in with the user you created via ../API Server/scripts/create-user.mjs.