Vue SPA: demo mode support

pyr0ball commented

2026-03-24 12:19:53 -07:00

Owner

Context

The Streamlit app has full demo mode support (DEMO_MODE=true): pre-seeded read-only data, LLM blocked, no auth required. The Vue SPA currently has none of this.

At present, sync_ui_cookie() in ui_switcher.py explicitly blocks Vue navigation in demo mode (added 2026-03-24) so Caddy never routes demo visitors to the Vue container. The demo instance correctly stays on Streamlit.

This ticket tracks adding first-class demo mode support to the Vue SPA so that demo.circuitforge.tech/peregrine can eventually serve the Vue experience.

Required work

Backend

Expose a /api/demo-mode or similar endpoint (or embed in /api/session) that signals demo: true to the SPA
Alternatively: bake VITE_DEMO_MODE=true as a build-time env var into the demo Docker image (compose.demo.yml)

Vue SPA

Detect demo mode (runtime API call or build-time env)
Skip auth flow — bypass login/session checks, serve pre-seeded data directly
Make all write operations no-ops or show a "Demo — changes not saved" toast
Display a persistent demo mode banner so visitors know it is not a live account
Block any LLM-trigger actions (cover letter gen, research, etc.) with a "Not available in demo" message

Infra

Remove the sync_ui_cookie() demo guard in ui_switcher.py once the Vue SPA handles demo mode natively
Update compose.demo.yml to build/pull the Vue SPA image with demo mode enabled
Verify Caddy routing: prgn_ui=vue cookie on the demo subdomain routes to the demo Vue container (may need a separate nginx/vue container for demo vs. cloud)

Out of scope

Local mode — Vue SPA already works in local dev via PEREGRINE_VUE_URL env var and direct port access. No additional work needed.

Notes

Pre-seeded demo data lives in demo/config/ and demo/data/ — the Vue SPA will need to read from the same Streamlit backend APIs (which already gate on DEMO_MODE) or have its own data fixtures.
Consider whether demo Vue needs its own Docker container or can share the cloud Vue container with a runtime flag.

## Context The Streamlit app has full demo mode support (`DEMO_MODE=true`): pre-seeded read-only data, LLM blocked, no auth required. The Vue SPA currently has none of this. At present, `sync_ui_cookie()` in `ui_switcher.py` explicitly blocks Vue navigation in demo mode (added 2026-03-24) so Caddy never routes demo visitors to the Vue container. The demo instance correctly stays on Streamlit. This ticket tracks adding first-class demo mode support to the Vue SPA so that `demo.circuitforge.tech/peregrine` can eventually serve the Vue experience. ## Required work ### Backend - [ ] Expose a `/api/demo-mode` or similar endpoint (or embed in `/api/session`) that signals `demo: true` to the SPA - [ ] Alternatively: bake `VITE_DEMO_MODE=true` as a build-time env var into the demo Docker image (`compose.demo.yml`) ### Vue SPA - [ ] Detect demo mode (runtime API call or build-time env) - [ ] Skip auth flow — bypass login/session checks, serve pre-seeded data directly - [ ] Make all write operations no-ops or show a "Demo — changes not saved" toast - [ ] Display a persistent demo mode banner so visitors know it is not a live account - [ ] Block any LLM-trigger actions (cover letter gen, research, etc.) with a "Not available in demo" message ### Infra - [ ] Remove the `sync_ui_cookie()` demo guard in `ui_switcher.py` once the Vue SPA handles demo mode natively - [ ] Update `compose.demo.yml` to build/pull the Vue SPA image with demo mode enabled - [ ] Verify Caddy routing: `prgn_ui=vue` cookie on the demo subdomain routes to the demo Vue container (may need a separate nginx/vue container for demo vs. cloud) ## Out of scope - **Local mode** — Vue SPA already works in local dev via `PEREGRINE_VUE_URL` env var and direct port access. No additional work needed. ## Notes - Pre-seeded demo data lives in `demo/config/` and `demo/data/` — the Vue SPA will need to read from the same Streamlit backend APIs (which already gate on `DEMO_MODE`) or have its own data fixtures. - Consider whether demo Vue needs its own Docker container or can share the cloud Vue container with a runtime flag.