Frontend UX, mobile/PWA and performance overhaul

[Serph91P]

Goal

Overhaul the StreamVault frontend incrementally into a consistent, touch-safe, accessible, performant desktop/mobile/PWA experience without a framework rewrite or feature loss.

Audited baseline

Audit base: develop at 0375667104c9c27523703fea0e6fc6a3c2e26fd0.

Confirmed findings:

• Global mobile swipe navigation installs duplicate touch listeners on the main content area.
• Streamer cards combine a full-card link, custom scroll suppression, a 500 ms long-press action menu and capture-phase click suppression.
• Stream-history rows are too compressed, especially on mobile. The mobile outer row measured about 34 px while the clickable compact area measured about 48 px, with no semantic keyboard contract.
• Several controls and text links miss the 44 px product target-size standard.
• Dark mode has contrast failures in streamer detail and videos.
• The build runs type-check and Vite in parallel against dist, which can leave emitted dist/src files.
• Settings bypasses the mock/API abstraction in several paths and produces six console errors in the production mock.
• Two conflicting PWA manifests are linked at runtime.
• The live-player route contains a 589 kB minified chunk and measured mobile Lighthouse performance 90 with LCP 3.3 s.
• There are no committed frontend unit or Playwright regression suites.

Positive baseline:

• Core routes showed no document-level horizontal overflow at 1440, 768, 390 and 360 px.
• Mobile dashboard Lighthouse measured 98 performance, 95 accessibility and 100 best practices in the local production mock.
• Desktop streamer detail measured 100/100/100.
• The service worker and offline shell work in the production mock.

Delivery slices

1. Deterministic frontend build and automated UX baseline.
2. Touch, pointer and scroll stabilization.
3. Enforced UI primitives, typography, spacing and hit-target standards.
4. Streamer overview and stream-history redesign.
5. Remaining views, forms, dialogs and responsive shell alignment.
6. API, store, polling, listener and mock-contract consolidation.
7. CSS, bundle and PWA optimization.
8. Cross-platform final acceptance.

Each slice must be delivered as a separate reviewable Draft PR against develop. Later slices must start from the then-current develop; they must not be stacked blindly on an unmerged predecessor.

Global acceptance criteria

• Scrolling on cards never navigates, expands, opens actions, vibrates or shows a press effect.
• Primary and icon controls meet the 44 px default target and 48 px mobile target unless an explicit documented exception applies.
• Streamer and stream-history layouts are readable and comfortably spaced on desktop and mobile.
• Core flows retain feature parity.
• Axe has no serious or critical findings on the agreed route/theme matrix.
• No document-level horizontal overflow exists at 360, 390, 768, 1024 and 1440 px.
• Mock mode and real API paths follow the same frontend service contracts.
• No owned listener, timer or reconnect loop survives unmount.
• The build is deterministic and never emits dist/src source output.
• Bundle, CSS and PWA budgets are enforced in CI.
• Android Chrome/PWA, iOS Safari/PWA, Windows Edge/Chrome, macOS Safari and Linux Firefox/Chrome receive explicit acceptance evidence.

Execution policy

Use TDD where practical, keep one writer per file scope, preserve unrelated work and use isolated worktrees. Review and security gates must inspect an immutable PR head in clean detached checkouts. Do not merge, release or deploy without separate authorization.

All soft effort limits are lifted for this program. Correctness, migration safety, compatibility and complete verification take priority. Hard runtime, security, single-writer, review and authorization boundaries remain in force.

[Serph91P]

PR 1 of the frontend overhaul was implemented and merged via #829 at merge commit ddb750594683a7d1f417324451643e6988db71b7.

Delivered: deterministic non-emitting frontend type checks, reproducible build-output validation, Vitest and Playwright UX baselines, and CI coverage for desktop/mobile Chromium. Exact-head technical and security gates passed before merge.

This initiative remains open for PR 2 through PR 8; next is touch, pointer, and scroll stabilization.

[Serph91P]

PR 2 of the frontend overhaul was implemented and merged via #830 at merge commit cca7637637f450fa2f1dc8d62905c9729e345d96.

Delivered: removal of global route swipe and StreamerCard long-press/click-suppression paths, explicit 48/44 px card controls, inert background pans, reduced-motion and haptic-free ripple behavior, plus deterministic unit and Chromium CDP gesture regression coverage. Exact-head technical and security gates passed before merge.

This initiative remains open for PR 3 through PR 8; next is enforced UI primitives, typography, spacing and hit-target standards.

[Serph91P]

PR 3 merged: #831 (001dc663).

This slice introduced shared accessible interaction tokens and BaseIconButton, standardized 44/48 px control targets and focus/reduced-motion behavior, fixed core dark/light contrast and native filter controls, added Axe coverage, and ratcheted inherited UI debt to the exact 112/31/8 baseline. Fresh immutable review approved ce92c12f; all 17 exact-head checks passed.

Issue #828 remains open for PR 4 and later slices.

[Serph91P]

Performance follow-up audit for PR 7

Provisional evidence is bound to 80777dec58b5564e4abc8d736e374aa7f1eeb931 and must be remeasured after the dependency remediation and PR 6 merge. This audit was read-only; no source was changed.

• The useWebSocket dynamic import in auth is ineffective because the same module is already statically rooted by the realtime store and shell/navigation consumers. PR 6 owns the lifecycle/ownership correction and removal of the build diagnostic. It is not a bundle-size claim.
• LivePlayerView is route-lazy, but it statically imports full hls.js and currently emits about 589.38 kB minified / 183.89 kB gzip. PR 7 will test native HLS first and load full hls.js only for the fallback path. The light build is not accepted without a real media capability matrix because it removes alternate audio, subtitles, DRM and codec support.
• The installed hls.js ESM build does not embed its transmuxer worker. enableWorker: true without a worker path therefore needs explicit verification. PR 7 will evaluate a version-locked, same-origin worker asset with fallback tests; no CDN dependency.
• The generated service worker has 92 manifest entries but only 82 unique URLs and about 2,650 KiB unique raw payload. Current major shares are icons 26.46%, LivePlayer JS/CSS 22.46%, global CSS 11.12% and Settings JS/CSS 8.97%.
• Two inconsistent manifests are linked. Ten icon URLs are duplicated in the generated precache. Both files declared as 512x512 icons are physically only 192x192. browserconfig.xml also advertises a notification polling endpoint that does not exist, while a Google Fonts runtime-cache rule has no matching font request.
• Global CSS is 301.79 kB raw / 37.75 kB gzip. Settings CSS is 135.38 kB raw / 13.29 kB gzip, and all seven settings panels are statically bundled although only one is rendered. PR 7 will use coverage and selector ownership before removing or splitting CSS, then evaluate an accessible async panel registry.
• Vite 8 already enables code splitting. No fake codeSplitting: true, warning-limit increase, file-size-based precache policy or incompatible dependency override will be used.

Package-level alternatives

• Remove optional vite-plugin-vue-devtools and its incompatible nested inspection/RPC chain in PR fix(frontend): remediate dependency audit #835. It is development-only; use browser Vue DevTools or evaluate Vite 8's official @vitejs/devtools integration separately if build analysis is actually needed.
• Remove the unused direct esbuild package and its npm 12 script approval in PR fix(frontend): remediate dependency audit #835. Vite 8 defaults to Oxc and Lightning CSS here, so no replacement package is required. An isolated candidate probe passed clean npm 12 install, type-check, build-output validation and all 49 unit tests without it.
• Evaluate sass-embedded instead of plain sass in PR 7. Vite officially recommends it for best preprocessor performance. Five alternating warm builds measured median Vite time 2.36 s versus 1.36 s, a 42.37 percent reduction, with all 22 CSS outputs byte-identical. Adoption remains gated on a clean bounded lock update, zero pending scripts and Linux/Windows/macOS resolution because a mechanical legacy-lock switch leaves optional Sass/Parcel entries behind.
• Do not directly override or replace transitive source-map and glob under Workbox merely to remove deprecation output. Wait for a compatible upstream workbox-build / vite-plugin-pwa path while retaining PWA behavior.

PR 7 remains the approved bundle, HLS, CSS and PWA implementation slice. Its order is: RED output budgets, HLS boundary/worker, PWA manifest and asset policy, Settings async boundary, package/compiler evaluation, then evidence-based CSS cleanup. PR 8 remains cross-platform and physical-device acceptance.

[Serph91P]

Updated frontend modernization delivery scope

The current full modernization specification continues this issue from develop at c679a1b577e04ccbca1c19689ab19d92f5a214d1 on refactor/frontend-modernization.

For this continuation, use small reviewable Conventional Commits on that branch and one final PR targeting develop, replacing the previous separate-PR slice sequence. Begin with a fresh complete route/API/state/responsive inventory and reproducible baseline before production refactoring; preserve already merged improvements.

The implementation includes shared tokens and responsive primitives, one overlay/shell/session/realtime ownership model, route-by-route modernization, accessible stored/live players, PWA updates/cache safety, measured performance, blocking automated checks, local real-backend/HLS integration, and rollout/rollback documentation. Preserve existing backend contracts, cookie authentication, routes, WebSocket events and preferences. Required reflow starts at 320 CSS pixels, ordinary nonoverlapping touch targets at 44x44 and preferred primary/icon targets at 48x48. Cover Chromium, WebKit and Firefox, portrait/landscape and light/dark themes; do not equate emulation with physical-device or native-OS acceptance.

The initial baseline and executable regression-harness phase is now in progress. Each implementation phase receives independent review before the next builds on it. Previous paused/uncommitted lifecycle work stays preserved and is not treated as accepted implementation. Backend modernization and recording-provider changes are not part of this branch.

This is not an audit-only delivery. Issue completion requires the full modernization and verified PR handoff; no merge, release or deployment is authorized by this continuation.