Frontend bucket — design docs

Owner: Agent C (round 1). Anchor directive: Andrew Kent 2026-05-10 — “front end (all the nested pages users will see on the platform)”.

This bucket covers everything a human user touches: lbzfai.com pages, the post-login application shell, the operational dashboards on the Jetson, Auth0 roles, localization, and the migration path from the current single-page Astro site to a multi-page platform.

Reading order

For a reviewer with 30 minutes, read in this order:

1. ../../business/user-personas.md — who we are building for. Spend the most time on Ronald: his adoption is the entire Phase I success metric.
2. information-architecture.md — every page on the platform, the nav graph, and the resolution of the “does lbzfai.com host the dashboard, or does it redirect to the Jetson via Tailscale” question.
3. ../../business/ronald-dashboard-ux.md — the single most important screen in the entire product. If this is wrong, the project fails.
4. ../../business/mariana-dashboard-ux.md — executive view; one number per module + one trend. Mobile-first.
5. auth0-roles-and-access.md — how five personas map onto Auth0 roles and what gets exposed on lbzfai.com vs the Jetson.
6. localization-es-co.md — Spanish-first decisions (copy, dates, sort orders, exports, error messages).
7. lbzfai-evolution-plan.md — how the current single-file Astro site grows into the multi-page platform without breaking the Cloudflare Workers + Auth0 hardcoded-fallback deploy story.

Bucket layout

docs/design/
├── business/
│   ├── README.md                       # Agent E (do not write — Agent E owns)
│   ├── README.frontend-stub.md         # short anchor for the three frontend-bucket docs that live here
│   ├── user-personas.md                # Agent C
│   ├── ronald-dashboard-ux.md          # Agent C
│   └── mariana-dashboard-ux.md         # Agent C
└── technical/
    └── frontend/
        ├── README.md                   # this file
        ├── _template.md                # design-doc template
        ├── information-architecture.md
        ├── auth0-roles-and-access.md
        ├── localization-es-co.md
        └── lbzfai-evolution-plan.md

docs/design/business/ is shared with Agent E (business + cross-cutting). Agent E owns business/README.md; Agent C drops business/README.frontend-stub.md for the three persona/UX docs that live there.

Open cross-bucket questions surfaced from this bucket

These need explicit resolution before Phase I deploy in July 2026. Each is repeated in the doc that surfaced it.

1. Where does Ronald’s dashboard render? lbzfai.com calling a Jetson API over Tailscale, or http://<jetson-tailscale-ip>:5000 directly? See information-architecture.md §“The render-location question”. Owner: Agent B (integration spec).
2. Does Mariana install Tailscale on her phone? If yes, lbzfai.com is marketing-only and the dashboard is Jetson-direct. If no, lbzfai.com must proxy data through a Cloudflare Worker. See information-architecture.md. Owner: Sophia + Mariana (UX decision); Agent B (infra decision).
3. Does ITBA see LBZF’s live data? Owner: Sophia + ITBA team; documented in auth0-roles-and-access.md.
4. Faces vs anonymized boxes in live video. Privacy + Colombian labor law. Owner: Agent E (privacy & legal); UX consequences documented in ../../business/mariana-dashboard-ux.md and ../../business/ronald-dashboard-ux.md.
5. es-CO only, or es/en bilingual? Owner: Sophia + Andrew (product); proposal in localization-es-co.md.

Conventions

• Spanish-first for everything LBZF users will read. English is acceptable for admin/dev surfaces (Sophia, Andrew, ITBA’s engineers if they prefer EN).
• Mobile-first for Mariana’s view; desktop-first for Ronald’s view (he’s at a desk in the office, occasionally tablet on the floor).
• Don’t reinvent Ronald’s workflow — the UI should look like a richer version of INDICADORES ABRIL.xlsx, not a Silicon Valley reinvention. Ronald’s adoption is failure mode #1.
• Auth0 SPA values are public-by-design. The hardcoded fallback in src/pages/index.astro stays unless replaced with a documented build-var setup; see ~/lbzfai/CLAUDE.md.
• Static-output-via-Cloudflare-Workers must keep working. public/.assetsignore must exist; output: 'static' must remain unless we explicitly migrate.

What this bucket explicitly does NOT cover

• The CV pipeline, model selection, inference path. Owned by Agent A (hardware/ML) and Agent D (ML/data).
• The Jetson Flask/FastAPI dashboard’s server-side implementation. Owned by Agent B. This bucket specifies the UX contract that the backend must satisfy.
• The SQLite schema. Owned by Agent B. See docs/technical/software.md for the v1.9 baseline.
• Business model, pricing, multi-tenancy strategy. Owned by Agent E.
• The IEEE paper. Owned by Sophia + Andrew.