1 Commits

Author	SHA1	Message	Date
shankar0123	aa1c12ae2d	feat(web): Phase 9 — backend-coupled + page-specific closures (5 shipped, 2 deferred) ... Closes the frontend-design-audit Phase 9 batch — the audit's "backend-coupled or page-specific" tier. Five findings ship; two defer to follow-ups that need backend handler work. Shipped: PERF-M2 — Build-time version + hidden sourcemaps • vite.config.ts: `sourcemap: 'hidden'` (was `false`). Maps emit to dist/ but are NOT referenced by JS, so browsers don't fetch them. The maps stay available for Sentry-class upload at release time. Comment-block above the build config documents the tradeoff so a future operator doesn't re-flip to `false` without realising they're losing release-time debuggability. • `__APP_VERSION__` build-time `define` reads `web/package.json` `version` so ErrorBoundary can stamp the build into telemetry payloads (was previously hardcoded `'dev'`). FE-L1 — ErrorBoundary copy-trace + telemetry gate • 50 → 185 LOC rewrite of web/src/components/ErrorBoundary.tsx. • componentDidCatch now POSTs an ErrorPayload (build version, UA, href, timestamp, error name + message + stack, componentStack) to `VITE_ERROR_TELEMETRY_URL` IF that env var is set at build time. Uses navigator.sendBeacon (page-unload- safe) → falls back to fetch + keepalive. Unset = no POST, no console-error spam. • Operator-facing "Copy details" button writes the same payload as JSON to the clipboard (navigator.clipboard API → execCommand fallback for older browsers). A `<details>` block (collapsed by default) shows the stack + componentStack inline so the operator can grok the failure without leaving the page. • Two new data-testid hooks (`error-boundary-reload`, `error-boundary-copy`) for QA + future Playwright coverage. • web/src/components/ErrorBoundary.test.tsx — 5 vitest specs: no-error pass-through, error fallback structure, copy payload shape, details collapsed-by-default, NO telemetry POST when URL is unset. cleanup() between tests + console.error silenced via the React-error-handling pattern. UX-M8 — DataTable density toggle (opt-in via tableId) • Density type ('compact' | 'comfortable' | 'spacious') + per- density cell/header class maps. Default 'comfortable' matches the existing px-4 py-3 padding so all callers see byte- identical layout until they opt in. • DataTableProps gains optional `tableId` + `density` props. Pages that pass `tableId` get a 3-button DensityToggle (Compact / Cozy / Spacious) rendered above the table; the selection persists to localStorage at `certctl:table-density:<tableId>`. No tableId = no toggle = no behavioral change for the 17 other tables. • Hardcoded `px-4 py-3` replaced with the `cellCls` / `headerCls` lookup against the active density. Three Tailwind permutations cover compact (px-3 py-1.5), comfortable (px-4 py-3), spacious (px-5 py-5). UX-M7 (lever) — CI guard against new raw `<table>` regressions • scripts/ci-guards/no-raw-table.sh: counts `<table` tags in `web/src/**/*.tsx` (production only, tests excluded) outside the canonical primitives (DataTable.tsx + Skeleton.tsx) and fails CI if the count climbs above baseline. `--strict` mode rejects any raw table once the backlog clears. • Baseline pinned at 17 (the current count of page-level raw tables — verified via the same grep the guard uses). Every page migration to <DataTable> drops the baseline by 1; new pages MUST route through <DataTable>. • No representative migrations in this commit (operator decision: ship the lever first, migrations as follow-up PRs). • Pairs with the existing CI guard suite (no-unbound-label, no-raw-toLocaleString, no-eager-issuer-deletes, etc.) — same baseline-locked pattern. FE-M2 — Desktop-only banner (operator chose path a: 2026-05-14) • web/src/components/DesktopOnlyBanner.tsx: fixed top bar at viewports < 1024px (Tailwind `lg` breakpoint, below which the sidebar + content layout starts visibly cramping). Amber "Desktop-only: certctl is designed for viewports ≥ 1024px" notice with a Dismiss button that persists to localStorage (`certctl:desktop-only-banner-dismissed`). • web/src/index.css: `.desktop-only-banner` is `display: none` by default and `display: flex` inside the `@media (max-width: 1023px)` block. CSS-gated visibility, not React state — the banner mounts always but only renders visibly on narrow viewports. • web/src/main.tsx: mounts the banner inside ErrorBoundary, above QueryClientProvider, so it survives any provider failure that breaks the rest of the tree. • Operator-stated rationale (recorded in DesktopOnlyBanner.tsx header comment): the audit flagged 29 partial sm:/md:/lg: responsive classes that suggest mobile support which isn't actually shipped. Rather than rip out the partials (zero benefit at desktop widths) or ship full mobile (1+ sprint of QA + ongoing maintenance), this ships an honest signal — "we don't promise mobile" — that doesn't claim support that isn't there. The partials stay (no benefit to ripping out; they may help if the decision reverses). Deferred: P-H2 — AuditPage server-side time filters Requires backend changes to internal/api/handler/audit.go + service + repository: ListAuditEvents currently accepts only page/per_page/category. Adds `since` / `until` ISO-8601 params (UTC), pushes the timestamp predicate into the SQL query, surfaces them in OpenAPI + MCP. Queued as a backend- first follow-up bundle. P-M1 — DiscoveryPage in-flight scan panel Out of scope for the frontend remediation pass; needs a websocket / SSE channel from internal/service/discovery.go to the frontend (current poll-and-render UI works against the existing endpoint set). Queued. Verification: • npx tsc --noEmit — exits 0 • npx vitest run ErrorBoundary StatusBadge — 80/80 passed • npm run build — ✓ built in 3.11s • bash scripts/ci-guards/no-raw-table.sh — Raw <table> tags outside DataTable + Skeleton — current: 17, baseline: 17 • Bundle shapes unchanged from Phase 4 (91.66 KB raw / 25.92 KB gz initial chunk); the ErrorBoundary rewrite adds ~5 KB to index. Falsifiable proof for the next CI run: • Frontend Build job's `npm ci` step completes (Hotfix #9 settled the Storybook peer conflict). • New no-raw-table.sh guard exits 0 with current=17 baseline=17. • All 34 CI guards (was 33, +1 for no-raw-table) pass. Per-finding closure entries land in frontend-design-audit.html in the follow-up commit (audit HTML update).	2026-05-14 18:27:18 +00:00