refactor(frontend): align LoginPage and DataPage on DA v2 (#72 #73 #74)

[vgtray]

Summary

Pivots the two remaining legacy pages (LoginPage + DataPage) onto the operator-calm v2 design system and resolves three M6.3 follow-ups in one pass.

Changes

LoginPage — full v2 rebuild

• Tokens-only (Inter sentence-case, --ds-radius-md 10px, --ds-accent + --ds-accent-ring focus ring, --ds-bg-{base,surface,elevated} hierarchy). No decorative shadow.
• AriaMark + wordmark + ThemeToggle in the top bar — theme-switching available before auth (no first-surface flash).
• Inputs: h-9, bg elevated, border → focus → 2px accent ring. autocomplete set (username / current-password), useId pairs htmlFor, aria-describedby, aria-busy, role="alert" on error.
• Redirect fixed (M6.3 follow-up — LoginPage redirects to /data, realign to /control-room #72) — reads location.state.from.pathname first (respects RequireAuth memory), falls back to /control-room. No more hardcoded /data.
• Credentials demo guarded (LoginPage — guard hardcoded default credentials behind import.meta.env.DEV #74) — import.meta.env.DEV gates both the prefill (useState("") in prod) and the seed hint footer. Vite strips the literals in prod bundle (grep 'admin123' dist/assets/index-*.js → empty).

DataPage — debug viewer, v2 skin

• All queries, sections, and logic preserved — purely visual swap.
• Legacy classes replaced:
  • bg-slate-* / bg-white → var(--ds-bg-*)
  • text-slate-* → var(--ds-fg-*)
  • text-red-* / bg-red-* → --ds-status-critical (with color-mix tints)
  • border-slate-* → --ds-border
  • rounded-lg → --ds-radius-md
  • decorative shadow → removed
• Legacy <Section> / <StatusBadge> → DS primitives (Card + SectionHeader + Badge).
• Sentence-case everywhere. Mono reserved to numerics (tabular-nums) per §3.3.
• Header aligned with TopBar (h-14, same tokens) — AriaMark + wordmark + ThemeToggle + user info + logout.
• Off-DS sweep clean (LoginPage — refactor off-DS classes to tokens (~43 occurrences) #73) — grep -nE "(bg-slate|text-slate|bg-white|bg-red|text-red|#[0-9a-fA-F]{3,6})" src/pages/{LoginPage,DataPage}.tsx returns 0 occurrences.

Architecture

• No changes to RequireAuth.tsx — it already passes state={{ from: location }}; LoginPage now reads it.
• Zero new deps.

Acceptance

• /login uses DS v2 tokens (no raw slate classes)
• /data uses DS v2 tokens (no raw slate classes)
• Post-login redirects to /control-room (or the from state if present)
• Prod build strips demo credentials and seed hint
• Dark mode + light mode both render correctly on both pages
• ThemeToggle accessible before auth

Test plan

# Sync and run the app in Docker (only path where login proxy works)
git fetch
git checkout refactor/login-data-v2-cleanup
git pull
make up  # or: docker compose up -d

# Test in browser at http://localhost:5173

Visual checks (both dark and light via ThemeToggle on /login):

1. /login — card centered, tokens v2 (no white card on light bg), AriaMark + wordmark at top, ThemeToggle top-right, inputs with focus ring on tab, no visible shadow, seed-hint footer visible (DEV mode only).
2. Login success → lands on /control-room (not /data).
3. Direct nav to /data while logged out → bounces to /login, then post-auth → lands back on /data (respects from state).
4. /data — sentence-case, cards with hairlines, sentence-case OEE chips, logbook with --ds-border-strong rail, no raw slate anywhere.

Prod bundle check (optional):

cd frontend && npm run build
grep -oE "admin123|Dev seed|operator123|viewer123" dist/assets/index-*.js
# → expected: empty (credentials elided by Vite DCE)

Gates (all green):

• npm run typecheck
• npm run build (465 kB / 146 kB gz)
• npm run check (Biome, 35 files, 0 errors)

Follow-ups opened on this PR

None — this PR resolves all 3 outstanding M6.3 follow-ups.

Closes #72
Closes #73
Closes #74

[Copilot]

Pull request overview

Refactors the remaining legacy frontend pages (LoginPage, DataPage) to use the DA v2 design system tokens/components, while also fixing post-login redirect behavior and gating demo credentials in production builds.

Changes:

• Rebuilds /login UI with v2 tokens/components (TopBar branding + ThemeToggle, updated form styling/accessibility attributes).
• Updates login redirect to respect location.state.from and default to /control-room instead of /data.
• Reskins /data with design-system primitives (Card, SectionHeader, Badge) while preserving existing query logic.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
frontend/src/pages/LoginPage.tsx	v2 design rebuild; redirect logic updated; demo credentials gated by import.meta.env.DEV.
frontend/src/pages/DataPage.tsx	v2 visual swap using DS primitives/components; keeps existing data-fetching logic intact.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.