2 Commits

Author	SHA1	Message	Date
shankar0123	9ce2d8ca8f	feat(frontend): Phase 4 Loading + Perceived Performance — close UX-M1 + FE-M5 + PERF-M1 + P-H3 + partial FE-M3 / P-M2 ... Closes the Phase 4 batch from cowork/frontend-design-audit.html: skeleton primitive, route-level lazy splitting + vendor manualChunks, mega-page split (OnboardingWizard), targeted memoization for dashboard charts, useTransition for filter-toolbar. ═════════════════════════ AUDIT VERIFICATION ═════════════════════════ Confirmed facts from the live repo before implementing (not the audit's stamped numbers — those drifted): • Pre-Phase-4 index-*.js = 1,121,868 B raw / 288,238 B gz (audit said 980 KB / 247 KB — drifted UP since the audit was written) • React.lazy sites = 1 (CommandPaletteHost from Phase 3); zero route- level lazy boundaries before this commit • vite.config.ts had NO rollupOptions.output.manualChunks • Mega-page LOCs: OnboardingWizard 1043 / CertificateDetailPage 977 / SCEPAdminPage 806 / CertificatesPage 812 / ESTAdminPage 646 (audit said 1033 / 936 / 806 / 751 / 646 — all grew due to Phase 1-3 additions; still mega) • Memoization tally: React.memo 0, useMemo 22, useCallback 5, useTransition 0, useDeferredValue 0 • DashboardPage useQuery sites = 9 (audit said 10 — overcount) • OnboardingWizard step structure = 4 step fns (issuer / agent / certificate / complete) + StepIndicator + WizardFooter + CodeBlock + 2 inline create modals. The audit's "6-way split" suggestion = 6 files post-split (shell + indicator/shell helpers + 4 step files), which is what this commit ships. ═════════════════════════════ CLOSURES ═══════════════════════════════ UX-M1 — Skeleton primitive (web/src/components/Skeleton.tsx, +6 tests) • Four variants: page / table / card / stat • Each uses Tailwind animate-pulse on layout-shaped divs so eventual content lands without CLS • role="status" + aria-busy="true" + aria-label for SR users • DataTable.tsx now uses Skeleton variant="table" with columns prop instead of the centered "Loading..." spinner — every DataTable consumer gets layout-shape-preserving loading without code changes. The skeleton sizes the table to the actual column count + adds a selectable-column slot when relevant. FE-M5 + SCALE-H1 — route-level code split + vendor manualChunks • main.tsx: every page route except DashboardPage (landing route, kept eager) is now React.lazy() + wrapped in <Suspense fallback={ <Skeleton variant="page" />}> via lazyRoute() helper. 35 lazy routes total. • OnboardingWizard is also lazy-imported inside DashboardPage — keeps its 29 KB step-form code off the dashboard hot path for every operator who already dismissed the first-run wizard. • vite.config.ts: rollupOptions.output.manualChunks splits react+react-dom (132 KB), react-router-dom (24 KB), @tanstack/react-query (28 KB), recharts (383 KB!), and lucide-react (16 KB) into named vendor chunks. Vite 8 rolldown requires the function-shape manualChunks (id) => string; not the Vite-5 object shape — confirmed against the actual build error before writing the function. Bundle profile (raw / gz): pre-Phase-4 single index-*.js = 1,121,868 / 288,238 post-Phase-4 index-*.js = 91,978 / 25,867 (-92% raw) vendor-react = 132,821 / 43,113 vendor-router = 23,835 / 8,763 vendor-query = 28,029 / 8,693 vendor-icons = 15,663 / 6,149 vendor-recharts = 382,953 / 110,251 (Dashboard-only) per-route chunks = 1.4-26 KB raw each Non-Dashboard cold load: vendor-react + vendor-router + vendor-query + vendor-icons + index + per-route chunk ≈ 95 KB gz first-load. Dashboard cold load adds vendor-recharts (110 KB gz) on demand. Audit target was <100 KB gz first-load for non-Dashboard routes — hit. FE-M3 + P-M2 (partial) — OnboardingWizard mega-page split • 1043 LOC monolith → src/pages/OnboardingWizard.tsx (100 LOC shell) + src/pages/onboarding/{types.ts, StepShell.tsx, IssuerStep.tsx, AgentStep.tsx, CertificateStep.tsx, CompleteStep.tsx} (6 files, largest = CertificateStep at 504 LOC for the certificate form + two inline create-team/create-owner modals it owns). • Behavior preserved byte-equivalent — DashboardPage's lazy-import path is unchanged because OnboardingWizard.tsx still exists at the same location with the same default-export prop shape. • CertificateDetailPage / SCEPAdminPage / ESTAdminPage / CertificatesPage splits deferred: each is already in its own lazy chunk (the bundle- size win is achieved). Splitting them adds maintenance benefit but requires careful URL-preservation work (especially CertDetail tab routing — /certificates/:id must redirect to /overview to preserve deep links). Documented as Phase 4 follow-up; not blocking on this closure. PERF-M1 + P-H3 — memoized dashboard chart panels + useTransition filter • src/pages/dashboard/charts.tsx — 4 React.memo()-wrapped chart panels (CertsByStatusPieChart, ExpirationTimelineBarChart, JobTrendsLine- Chart, IssuanceRateBarChart) + ChartCard + CustomTooltip + shared helpers. Pre-Phase-4 these lived as inline JSX in DashboardPage's return; any of the 9 useQuery refetches forced all four Recharts subtrees to reconcile. Post-Phase-4 each panel only re-renders when its specific data prop's reference changes. • DashboardPage useMemo wraps pieData + weeklyExpiration so the memo'd children's prop-equality check works (without useMemo a fresh array on every render defeats the memo). • Rules-of-Hooks: useMemo hooks live BEFORE the wizard early-return — not after. (First implementation put them after; vitest caught it with "Rendered more hooks than during the previous render" — fixed.) • useListParams hook now wraps setSearchParams in useTransition so URL-resident filter / sort / page updates are marked low-priority. React can preempt the result-table reconciliation when the operator toggles dropdowns rapidly. Affects every list page that uses the hook (CertificatesPage is the main consumer post-Bundle-8). ═══════════════════════════ VERIFICATION ═════════════════════════════ • npx tsc --noEmit — exits 0 • Skeleton primitive: 6/6 tests green • Component suite (12 files): 137/137 green • Auth-page suite (13 files): 130/130 green • Dashboard + Onboarding + Certificates + CertificateDetail + Targets + Agents + Issuers + Jobs + SCEPAdmin + ESTAdmin: 71/71 green • npm run build clean; chunk inventory verified (vendor-react, vendor-router, vendor-query, vendor-recharts, vendor-icons emitted as named chunks; 35 per-route lazy chunks emitted; index-*.js shrunk to 91.66 KB raw / 25.92 KB gz). ═══════════════════════════ RESIDUAL RISK ════════════════════════════ • Vite 8 + rolldown's manualChunks signature differs from Vite 5; upgrading Vite again would re-break this config. Comment in vite.config.ts pins the function-shape requirement. • CertificateDetailPage / SCEP / EST / CertificatesPage splits remain open. Mega-LOC files but already lazy-chunked, so deferring is safe. • Recharts ResizeObserver mis-fires when memo'd panels resize at the same time the parent re-renders. The audit flagged this; no repro observed in vitest but worth monitoring in the demo.	2026-05-14 16:14:24 +00:00
shankar0123	1c3a83c4ba	fix(bundle-8): Frontend Hardening — 2 audit findings closed + 3 partial ... Closes Audit-2026-04-25 L-015 (Low) and L-019 (Low) — both verified-already-clean at HEAD; new CI regression guards prevent regression. Partial closures for M-009, M-010, M-026 — Bundle 8 ships the helpers + contract tests + a soft CI budget guard, defers the long-tail per-page migrations to a new tracker ID M-029. What changed - web/src/utils/safeHtml.ts (NEW) — sanitizeHtml() chokepoint for any future code that genuinely needs dangerouslySetInnerHTML. Bundle-8 placeholder body throws — DOMPurify dependency is the activation procedure documented in the file header. - web/src/components/ExternalLink.tsx (NEW) — single chokepoint for target="_blank" anchors. Hardcodes rel="noopener noreferrer". - web/src/hooks/useListParams.ts (NEW) — URL-state hook for filter / sort / pagination state on list pages. Canonicalises the existing DashboardPage useSearchParams pattern. Per-page migrations of the ~14 remaining list pages tracked as M-029. - web/src/hooks/useTrackedMutation.ts (NEW) — useMutation wrapper enforcing the M-009 invalidation contract via discriminated-union type: caller MUST declare invalidates: QueryKey[] OR invalidates: 'noop' + noopReason: string. - 4 new Vitest test files — full unit coverage for ExternalLink (target/rel preservation), safeHtml (placeholder throws + activation hint), useListParams (URL contract / defaults / filter-resets-page), useTrackedMutation (invalidate-then-onSuccess / noop variant). - .github/workflows/ci.yml — three new regression guards: Bundle-8 / L-015: greps for any target="_blank" outside ExternalLink that lacks rel="noopener noreferrer"; clean at HEAD. Bundle-8 / L-019: greps for any dangerouslySetInnerHTML outside safeHtml.ts; clean at HEAD (0 sites). Bundle-8 / M-009: SOFT budget guard — useMutation sites must not exceed invalidation sites + 5. At HEAD: 61 mutations vs 82 invalidations + 5 = 87 budget. Stricter per-site enforcement tracked as M-029. Verification at HEAD - web/src/ target=_blank sites: 3 (all in OnboardingWizard.tsx) — all three already carry rel="noopener noreferrer". L-015 closed. - web/src/ dangerouslySetInnerHTML sites: 0. L-019 closed. - useMutation sites: 61 / invalidateQueries: 82 (M-009 budget healthy) Per-finding mapping - L-015 closed (CWE-1022) — verified-already-clean + ExternalLink component + CI grep guard. - L-019 closed (CWE-79) — verified-already-clean + safeHtml chokepoint + CI grep guard. - M-009 partial — useTrackedMutation wrapper authored; soft CI budget guard. Migrating the 56 existing useMutation sites to the wrapper tracked as M-029. - M-010 partial — useListParams hook authored + tested. Per-page migration of the ~14 list pages tracked as M-029. - M-026 partial — bundle-prompt called for XSS-hardening tests on the T-1 deferred allowlist of 14 pages. Bundle 8 ships the testing pattern via the new helpers but does NOT execute the per-page migrations — tracked as M-029. NOT addressed in this bundle (deferred to M-029) - Migrating existing 56 useMutation sites to useTrackedMutation - Migrating ~14 list pages from local useState to useListParams - Adding XSS-hardening tests to the 14 T-1-deferred pages Verification - npx tsc --noEmit → clean - npx vitest run on the 4 new Bundle-8 test files → 15/15 pass - L-015 grep guard simulation → clean - L-019 grep guard simulation → clean - M-009 budget simulation → 61 ≤ 87 (clean) - go vet ./... → clean (no backend changes) - python3 yaml.safe_load(api/openapi.yaml) → clean - python3 yaml.safe_load(.github/workflows/ci.yml) → clean Backwards compatibility - All 4 new helper files are additive; no existing call sites were modified. Existing list pages keep their useState pagination until M-029 ships per-page migrations. Bundle 8 of the 2026-04-25 comprehensive audit. Per-page migration backlog tracked as new audit finding M-029.	2026-04-26 15:10:32 +00:00