React + Vite frontend with a component registry (feature parity) #5

leora · 2026-10-08T19:49:52+08:00

leora commented

2026-10-08 19:49:52 +08:00

Rewrites the frontend as a React 19 + Vite 7 + TypeScript single-page app with full feature parity. The Python server and API are unchanged apart from serving the build.

Stack / structure

web/: Vite + React + TS (strict). src/components/registry.tsx maps every UI action type to a component (PANELS: show_hero, show_cards, show_compare, show_listing_form, show_checkout, show_cash_meetup, show_receipt) or a side effect (EFFECTS: set_theme, toast, clear_panel).
src/theme/engine.ts: straight TS port of theme.js (CSS variables, scrim, protected --p-bg/--p-ink, fonts, scoped customCss in @layer user, localStorage am_theme_v1). React renders copy and section order/visibility from the same theme. @layer base, user, protected; is declared first in index.html, so the layer order can't depend on bundle injection order.
server.py: / serves static/dist/index.html (503 frontend_not_built with a hint if missing). The traversal check is tightened to STATIC + os.sep. market/ is untouched, and /agent.json and /openapi.json are byte-identical to main.
Build choice: static/dist is git-ignored. deploy.sh runs npm ci && npm run build from the committed lockfile before stopping the old server, so a failed build keeps the current version up. Added an optional AM_EXTRA_ENV for offline (fake-model) test runs.
README: frontend structure, build/deploy, and "Adding a UI component" (server allowlist/schema/hydrate, then component, registry entry, test).

Tests (staging :8795, fake/mock model only, no real model calls)

test_theme.py 19/19, llm_proxy_check.sh 10/10
e2e_http.py 24/24 (new: SPA shell + built bundle served)
browser_e2e.js 14/14 (new: mounted in #root, compare bar, chat close/reopen)
theme_check.js 25/25 (new: persists across reload, hostile stored theme keeps guardrails, results un-hidden for panels, Reset look button)
new fake_model_browser.sh 10/10: model badge and chat-mode text, fallback badge text, quota badge, rate-limit toast, server-sanitised model set_theme

The real-model theme check is still pending until the free quota resets.

Rewrites the frontend as a React 19 + Vite 7 + TypeScript single-page app with full feature parity. The Python server and API are unchanged apart from serving the build. **Stack / structure** - `web/`: Vite + React + TS (strict). `src/components/registry.tsx` maps every UI action type to a component (`PANELS`: show_hero, show_cards, show_compare, show_listing_form, show_checkout, show_cash_meetup, show_receipt) or a side effect (`EFFECTS`: set_theme, toast, clear_panel). - `src/theme/engine.ts`: straight TS port of theme.js (CSS variables, scrim, protected `--p-bg/--p-ink`, fonts, scoped customCss in `@layer user`, localStorage `am_theme_v1`). React renders copy and section order/visibility from the same theme. `@layer base, user, protected;` is declared first in index.html, so the layer order can't depend on bundle injection order. - `server.py`: `/` serves `static/dist/index.html` (503 `frontend_not_built` with a hint if missing). The traversal check is tightened to `STATIC + os.sep`. `market/` is untouched, and `/agent.json` and `/openapi.json` are byte-identical to main. - Build choice: `static/dist` is git-ignored. `deploy.sh` runs `npm ci && npm run build` from the committed lockfile **before** stopping the old server, so a failed build keeps the current version up. Added an optional `AM_EXTRA_ENV` for offline (fake-model) test runs. - README: frontend structure, build/deploy, and "Adding a UI component" (server allowlist/schema/hydrate, then component, registry entry, test). **Tests (staging :8795, fake/mock model only, no real model calls)** - test_theme.py 19/19, llm_proxy_check.sh 10/10 - e2e_http.py 24/24 (new: SPA shell + built bundle served) - browser_e2e.js 14/14 (new: mounted in #root, compare bar, chat close/reopen) - theme_check.js 25/25 (new: persists across reload, hostile stored theme keeps guardrails, results un-hidden for panels, Reset look button) - new fake_model_browser.sh 10/10: model badge and chat-mode text, fallback badge text, quota badge, rate-limit toast, server-sanitised model set_theme The real-model theme check is still pending until the free quota resets.

leora added 3 commits 2026-10-08 19:49:52 +08:00

React + Vite frontend (WIP): component registry, theme engine port, server serves static/dist, deploy builds e62c9af423

Tests for the React DOM: SPA shell + bundle, compare bar, chat popup, persistence, hostile stored theme, fake-model browser suite; deploy AM_EXTRA_ENV b30f8ef1e2

README: React frontend structure, build/deploy, adding a component; theme_check fail-closed customCss check 89f18c27ef

leora merged commit ec64d2e32c into main

2026-10-08 19:49:55 +08:00

leora referenced this issue from a commit

2026-10-08 19:49:57 +08:00

Merge pull request 'React + Vite frontend with a component registry (feature parity)' (#5) from feat/react-frontend into main

Sign in to join this conversation.