Dashboard UI

Summary

The GoLiveBro (formerly Telemy) web presence consists of two main frontend surfaces: a landing page and a dashboard SPA, both hosted on Cloudflare Pages at telemyapp.com. The landing page was designed in W1 (2026-03-23) as a typography-driven, dark-by-default product page with the real dock UI running on simulated data as the interactive hero element. Beta signups are stored in Cloudflare KV. The dashboard was designed in W2 (2026-03-24) as a Preact SPA at /dashboard with hash routing across Account, Linked Accounts, and Plan & Usage pages, with Billing and Remote Control planned for future phases.

A full signup/registration flow was designed on 2026-04-01 to wire end-to-end user onboarding: register, verify email via Resend (Go SDK, free tier 3K emails/month), auto-login on verification, and redirect to dashboard. The flow also added password reset email delivery, a resend-verification endpoint, and dedicated CF Pages for /verify-email (with auto-login via session cookie) and /reset-password. All auth pages share the same JetBrains Mono + DM Sans design language with System/Dark/Light theme toggle.

Deployment uses Cloudflare Pages with Pages Functions for auth gating, BFF proxy, and OAuth callbacks. The Go API backend runs on a VPS (Advin) deployed via Docker. DNS routes telemyapp.com via CNAME to telemyapp.pages.dev. Pages Function environment variables include TELEMY_OPERATOR_PASSWORD, TELEMY_OPERATOR_SESSION_SECRET, AEGIS_API_BASE_URL, and AEGIS_PLUGIN_LOGIN_COMPLETE_KEY.

Timeline

  • 2026-03-23: W1 landing page design approved. Interactive dock demo as hero, beta signup via KV, operator auth wall gating. 7-task implementation plan created.
  • 2026-03-24: W2 dashboard design approved. Preact SPA with 5-page vision (Account, Linked Accounts, Plan/Usage shipped in W2; Billing and Remote Control deferred).
  • 2026-03-25: W2 dashboard implementation plan finalized. 13 tasks across 5 phases (Backend endpoints, Shell, Pages, Polish, Deploy). ~18 new files, ~5 modified.
  • 2026-04-01: Signup registration flow design and implementation plan approved. 9 tasks covering Resend integration, auto-login on verification, CF Pages for verify-email and reset-password, resend-verification endpoint.

Current State

The web platform has four frontend surfaces: landing page (dock demo + beta signup), dashboard SPA (Account, Linked Accounts, Plan & Usage), and standalone auth pages (verify-email, reset-password, signup, forgot-password, login). All share a unified design system with JetBrains Mono headings, DM Sans body text, orange accent color (#f97316 dark / ea580c light), and System/Dark/Light theme toggle persisted to localStorage under the key “telemy-theme”.

The dashboard uses Preact (~3KB) with client-side hash routing. Auth is gated by Pages Function middleware checking session cookies. User data is injected as window.__telemyUser on the server side. The API client in dashboard/lib/api.js handles JWT from localStorage and 401 redirects. OAuth account linking uses a popup flow where the callback page postMessages back to the dashboard opener.

Backend endpoints supporting the dashboard: PATCH /api/v1/auth/profile (display name), POST /api/v1/auth/change-password, DELETE /api/v1/auth/link/{provider} (unlink), POST /api/v1/auth/resend-verification, plus the existing session and OAuth endpoints.

Email delivery uses Resend Go SDK v2 with config vars TELEMY_RESEND_API_KEY, TELEMY_EMAIL_FROM (default: “Telemy noreply@telemyapp.com”), and TELEMY_BASE_URL (default: https://telemyapp.com). Email service is optional; if RESEND_API_KEY is empty, email calls are silently skipped with a log warning.

Deploy commands: CF Pages from web/ via npx wrangler pages deploy . --project-name=golivebro --branch=main. API binary via cross-compile + SCP to Advin VPS.

Key Decisions

  • 2026-03-23: Dock-as-hero design. The real dock React components running on useSimulatedState() are the landing page centerpiece, not screenshots or mockups. Visitors interact with the actual product.
  • 2026-03-23: Cloudflare KV for beta signups over D1 or email forwarding. Chosen for simplicity; exportable anytime via wrangler.
  • 2026-03-23: Operator auth wall on landing page until ready to go public. Removal requires only bypassing the session check on the index route.
  • 2026-03-24: Preact over React for dashboard. ~3KB bundle size, same JSX API via preact/compat aliases in esbuild.
  • 2026-03-24: Client-side hash routing over server-side routing. Single HTML page, no Pages Function routing needed for page transitions.
  • 2026-03-24: JetBrains Mono for headings (instrument panel feel) + DM Sans for body. Technical utilitarian aesthetic, not generic SaaS.
  • 2026-03-24: OAuth popup flow (Google-style) over redirect flow for account linking. Dashboard stays open, postMessage communicates completion.
  • 2026-04-01: Resend for transactional email over alternatives. Go SDK, free tier sufficient (3K/month), simple API.
  • 2026-04-01: Auto-login on email verification. After verifying, backend creates an auth session and returns JWT + refresh token so the CF page can set a session cookie and redirect to /dashboard without requiring a separate login step.
  • 2026-04-01: Enumeration-safe responses on all public auth endpoints (resend-verification, forgot-password). Always return success regardless of whether the account exists.

Gotchas & Known Issues

  • Dock bundles (glb-dock*.js, dock-demo.js) still reference telemyapp paths. Blocked until OBS plugin repo is migrated.
  • web/meta.json esbuild metafile contains old telemyapp paths. Same blocker.
  • Stripe env vars (GLB_STRIPE_*) not yet configured on production. Billing webhooks return “not configured” until set.
  • The dashboard build command requires node_modules from the telemyapp dock-preview directory (NODE_PATH=../telemyapp/dock-preview/node_modules).
  • Verify-email and reset-password pages call the backend API directly (not via BFF proxy) because they are pre-auth flows with no session cookie.
  • Password change form only shown if user has a password (email signup users). OAuth-only users see “account uses OAuth only” error.
  • The landing page operator auth wall uses env vars TELEMY_OPERATOR_PASSWORD and TELEMY_OPERATOR_SESSION_SECRET that are still Telemy-prefixed.
  • Deploy must happen from inside web/ for Cloudflare Pages Functions to compile correctly.

Open Questions

  • When will the operator auth wall be removed from the landing page to go public?
  • Billing page (W2b) blocked on Stripe migration (previously LemonSqueezy). When will GLB_STRIPE_* env vars be configured on production?
  • Remote Control page (W2c) requires WebSocket or SSE endpoint on control plane plus plugin polling for remote commands. No timeline set.
  • Email change flow, magic link login, and Resend webhook integration (bounce/complaint tracking) are explicitly out of scope. When will these be revisited?
  • Dashboard link in landing page header was planned in W2 Task D1. Is the landing page nav updated to include Docs, Status, Dashboard links?

Sources