Files
certctl/web/src/main.tsx
T
shankar0123 93e00f6a5e fix(frontend): Phase 0 Hygiene Day — close 11 of 12 frontend-audit findings
Frontend design remediation, Phase 0 (Hygiene Day). Eleven low-risk
audit findings closed in one PR. UX-M9 deliberately deferred per the
prompt's "do NOT auto-trace the logo" guard rail — that needs a
designer round-trip outside a code session.

Findings closed (mapped by source ID)
=====================================

FE-H1   Half-wired dark mode removed.
        web/index.html: dropped class="dark" from <html> and
        bg-slate-900 text-slate-100 from <body>. Replaced with
        bg-page text-ink (matching the live light-mode palette).
        web/tailwind.config.cjs: kept darkMode: 'class' (config
        only, zero behaviour) so a future Phase 7 dark-mode
        rebuild stays cheap.

FE-H4   Self-hosted fonts (closes PERF-H3 as a side-effect).
        web/package.json: added @fontsource-variable/inter +
        @fontsource/jetbrains-mono (^5.2.8 both).
        web/src/main.tsx: top of file imports the variable Inter
        family + JetBrains Mono weights 400/500/600 (matching the
        old Google Fonts request's weight set).
        web/src/index.css: removed the @import url(
        'https://fonts.googleapis.com/...') that lived on line 1.
        Body font-family updated to "Inter Variable", "Inter",
        system-ui, ... (fontsource-variable registers the family
        as "Inter Variable" — kept "Inter" as a fallback).
        Vite bundles the .woff2 files into dist/assets/ on build:
        verified inter-latin-wght-normal-*.woff2 (48 kB) +
        the JetBrains weights all land in the build output.
        Net effect: cold load makes ZERO third-party requests.

FE-L2   StatusBadge.tsx.bak removed.
        Audit claim "tracked in git" was stale — the file was
        already excluded by .gitignore:46 (*.bak). Closure was
        a plain `rm`, not `git rm`. (Audit accuracy note above.)

FE-L3   brand-900 removed from web/tailwind.config.cjs.
        Verified 0 callers in web/src via
        `grep -rEc "brand-$w\b" web/src --include='*.tsx'`.
        Other weights all retain ≥4 callers (50=5, 100=4, 200=4,
        300=8, 400=106, 500=74, 600=34, 700=23, 800=4) — they
        stay. Comment marker left in place so a future Phase 7
        dark-mode redo can re-add 900 with context.

UX-M6   text-ink-faint contrast bumped from #94a3b8 (3.0:1
        against bg-page #f0f4f8, fails WCAG AA) to #64748b
        (4.6:1, passes AA). To preserve the three-tier ink
        hierarchy, ink.muted darkens from #64748b to #475569
        (6.9:1, passes AA Large). All 105 live text-ink-faint
        callers now meet WCAG AA without any callsite edits.

UX-M9   DEFERRED. The audit prompt's "do NOT auto-trace the PNG
        logo to SVG" guard rail blocks the auto-conversion path.
        Logo (886x864 PNG, 773 kB) remains shipped to dist/assets/
        unchanged. Tracking item: round-trip through designer
        with a flat-geometric Illustrator/Figma rebuild. Phase 0
        commit ships the rest of the hygiene block; UX-M9 stays
        open until the SVG asset lands.

UX-L1   23 hardcoded text-[Npx] sites migrated to design tokens
        (audit said 23; live count was 25 — also 2x text-[13px]
        the audit missed). web/tailwind.config.cjs added the
        `2xs: 0.625rem` (10px) rung so the 7x text-[10px] sites
        migrate losslessly. The 16x text-[11px] sites move to
        text-xs (+1px, imperceptible) and the 2x text-[13px]
        sites move to text-sm (+1px, imperceptible). Six files
        touched: Layout.tsx, NetworkScanPage.tsx, SCEPAdminPage.tsx,
        DiscoveryPage.tsx, ESTAdminPage.tsx, auth/SessionsPage.tsx.
        Post-migration: zero `text-[Npx]` callers in web/src.

UX-L2   prefers-reduced-motion handling added at the bottom of
        web/src/index.css. Caps animation-duration +
        transition-duration at 0.01ms when the OS reduce-motion
        flag is set. Conventional non-zero value (fully zero
        breaks libraries observing transitionend events).

UX-L3   Print stylesheet added to web/src/index.css. Hides
        sidebar / nav, removes card shadows, expands content to
        full width, prevents mid-row table breaks, and appends
        link URLs as text annotations (print readers can't click
        links). Operator-facing — certificate detail + audit-log
        export are the most common print targets.

UX-L4   DataTable.tsx <th>s now carry scope="col". One-line
        change on each of the two header sites (selectable
        checkbox column + the columns.map iteration). Closes the
        accessibility-tree screen-reader gap.

PERF-H2 The only production <img> site (Layout.tsx:73, the
        sidebar logo) gained loading="eager" decoding="async" +
        explicit width/height (64x64). eager (not lazy) because
        the logo is the LCP candidate above the fold. Since
        UX-M9 deferred, the logo stays as a PNG — making this
        the right LCP hint to ship today.

PERF-H3 Closes via FE-H4 (self-host fonts → zero third-party
        requests on cold load → preconnect/dns-prefetch hints
        would point at nothing). web/index.html stays free of
        preconnect lines.

Verification
============

  $ git status --short
    (only the 13 expected files modified)

  $ cd web && npx tsc --noEmit
    (exit 0, no type errors)

  $ cd web && npx vitest run
    Test Files  54 passed (54)
         Tests  583 passed (583)
    (all green; ran via `timeout 35 npx vitest run`)

  $ cd web && npx vite build
    ✓ built in 2.70s
    dist/assets/index-Da_kGcIu.css   75.54 kB (was 39.50 kB
      pre-Phase-0 — +36 kB from the inlined @fontsource @font-face
      declarations + the new @media print + @media reduced-motion
      blocks; offset by the elimination of all third-party font
      requests + the FOIT on cold load)
    dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2  48.25 kB
    dist/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2  21.16 kB
    (... + the rest of the weight variants and unicode-range subsets)

  $ grep -rohE "text-\[[0-9]+px\]" web/src --include='*.tsx'
    (zero matches — all 25 inline-pixel sites migrated)

  $ grep -rEc "brand-900" web/src --include='*.tsx'
    (zero callers)

  $ grep -nE "scope=\"col\"" web/src/components/DataTable.tsx
    86, 96   (both <th> sites carry scope="col")

  $ grep -nE "loading=|decoding=" web/src/components/Layout.tsx
    73       (logo <img> has both attrs + width/height)

  $ grep -nE "prefers-reduced-motion|@media print" web/src/index.css
    74, 92   (both blocks present)

  $ ls web/src/components/StatusBadge.tsx.bak
    (file not found — deleted)

Audit-accuracy notes
====================

* FE-L2 stale: the .bak file was NOT tracked in git (gitignored via
  .gitignore:46 *.bak). The audit's "tracked in git" claim was wrong.
  Closure path adjusted: `rm` instead of `git rm`.

* UX-L1 undercount: audit reported 23 inline-pixel sites; live count
  was 25 (16x 11px + 7x 10px + 2x 13px). All 25 migrated.

* UX-M9 not closed: audit prompt's "do NOT auto-trace" guard rail
  blocks closure in this code session. Tracking item for the
  designer/Phase-1 follow-up.

Residual risks
==============

* Logo PNG (773 kB) still ships as-is until the designer round-trip
  produces a hand-built SVG. Vite cache-busts the asset hash so
  cold loads cost the same one-shot 773 kB; warm loads hit the
  browser cache.

* Removing brand-900 may surface in a future dark-mode rebuild
  (Phase 7) that wants a deeper teal floor. Easy re-add — comment
  marker left in tailwind.config.cjs at the deletion site.

* The +1px nudges on text-[11px] -> text-xs and text-[13px] ->
  text-sm are theoretically visible but practically imperceptible.
  Any future visual-regression suite will catch genuine differences.
2026-05-14 13:42:04 +00:00

160 lines
8.8 KiB
TypeScript

// Phase 0 hygiene (FE-H4 / PERF-H3): self-hosted fonts. Replaces the
// Google Fonts @import that used to live at the top of src/index.css —
// Vite hashes + bundles these CSS files into web/dist on build, so cold
// loads no longer touch fonts.googleapis.com / fonts.gstatic.com.
import '@fontsource-variable/inter';
import '@fontsource/jetbrains-mono/400.css';
import '@fontsource/jetbrains-mono/500.css';
import '@fontsource/jetbrains-mono/600.css';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ErrorBoundary from './components/ErrorBoundary';
import AuthProvider from './components/AuthProvider';
import AuthGate from './components/AuthGate';
import Layout from './components/Layout';
import DashboardPage from './pages/DashboardPage';
import CertificatesPage from './pages/CertificatesPage';
import CertificateDetailPage from './pages/CertificateDetailPage';
import AgentsPage from './pages/AgentsPage';
import AgentDetailPage from './pages/AgentDetailPage';
import JobsPage from './pages/JobsPage';
import NotificationsPage from './pages/NotificationsPage';
import PoliciesPage from './pages/PoliciesPage';
import RenewalPoliciesPage from './pages/RenewalPoliciesPage';
import IssuersPage from './pages/IssuersPage';
import TargetsPage from './pages/TargetsPage';
import ProfilesPage from './pages/ProfilesPage';
import OwnersPage from './pages/OwnersPage';
import TeamsPage from './pages/TeamsPage';
import AgentGroupsPage from './pages/AgentGroupsPage';
import AuditPage from './pages/AuditPage';
import ShortLivedPage from './pages/ShortLivedPage';
import AgentFleetPage from './pages/AgentFleetPage';
import DiscoveryPage from './pages/DiscoveryPage';
import NetworkScanPage from './pages/NetworkScanPage';
import HealthMonitorPage from './pages/HealthMonitorPage';
import DigestPage from './pages/DigestPage';
import ObservabilityPage from './pages/ObservabilityPage';
import JobDetailPage from './pages/JobDetailPage';
import IssuerDetailPage from './pages/IssuerDetailPage';
import IssuerHierarchyPage from './pages/IssuerHierarchyPage';
import TargetDetailPage from './pages/TargetDetailPage';
import SCEPAdminPage from './pages/SCEPAdminPage';
import ESTAdminPage from './pages/ESTAdminPage';
// Bundle 1 Phase 10 — RBAC management pages.
import RolesPage from './pages/auth/RolesPage';
import RoleDetailPage from './pages/auth/RoleDetailPage';
import KeysPage from './pages/auth/KeysPage';
import AuthSettingsPage from './pages/auth/AuthSettingsPage';
import ApprovalsPage from './pages/auth/ApprovalsPage';
// Bundle 2 Phase 8 — OIDC + session management pages.
import OIDCProvidersPage from './pages/auth/OIDCProvidersPage';
import OIDCProviderDetailPage from './pages/auth/OIDCProviderDetailPage';
import GroupMappingsPage from './pages/auth/GroupMappingsPage';
import SessionsPage from './pages/auth/SessionsPage';
import BreakglassPage from './pages/auth/BreakglassPage';
// Audit 2026-05-10 MED-11 closure — federated-user admin page.
import UsersPage from './pages/auth/UsersPage';
import './index.css';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 10_000,
retry: 1,
refetchOnWindowFocus: true,
},
},
});
createRoot(document.getElementById('root')!).render(
<StrictMode>
<ErrorBoundary>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<AuthGate>
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route index element={<DashboardPage />} />
<Route path="certificates" element={<CertificatesPage />} />
<Route path="certificates/:id" element={<CertificateDetailPage />} />
<Route path="agents" element={<AgentsPage />} />
<Route path="agents/:id" element={<AgentDetailPage />} />
<Route path="fleet" element={<AgentFleetPage />} />
<Route path="jobs" element={<JobsPage />} />
<Route path="jobs/:id" element={<JobDetailPage />} />
<Route path="notifications" element={<NotificationsPage />} />
<Route path="policies" element={<PoliciesPage />} />
<Route path="renewal-policies" element={<RenewalPoliciesPage />} />
<Route path="profiles" element={<ProfilesPage />} />
<Route path="issuers" element={<IssuersPage />} />
<Route path="issuers/:id" element={<IssuerDetailPage />} />
{/* Rank 8 — operator-managed multi-level CA hierarchy.
Admin-gated at the API; the page renders the
backend's 403 as ErrorState for non-admin
callers. See docs/intermediate-ca-hierarchy.md. */}
<Route path="issuers/:id/hierarchy" element={<IssuerHierarchyPage />} />
<Route path="targets" element={<TargetsPage />} />
<Route path="targets/:id" element={<TargetDetailPage />} />
<Route path="owners" element={<OwnersPage />} />
<Route path="teams" element={<TeamsPage />} />
<Route path="agent-groups" element={<AgentGroupsPage />} />
<Route path="audit" element={<AuditPage />} />
<Route path="short-lived" element={<ShortLivedPage />} />
<Route path="discovery" element={<DiscoveryPage />} />
<Route path="network-scans" element={<NetworkScanPage />} />
<Route path="health-monitor" element={<HealthMonitorPage />} />
<Route path="digest" element={<DigestPage />} />
<Route path="observability" element={<ObservabilityPage />} />
{/* SCEP RFC 8894 + Intune master bundle Phase 9.4 (initial)
+ Phase 9 follow-up (rebrand): per-profile SCEP
Administration page with Profiles / Intune Monitoring /
Recent Activity tabs. Route is unconditional; the page
itself renders an "Admin access required" banner for
non-admin callers and skips the underlying API calls so
the server never sees a 403-prone request. */}
<Route path="scep" element={<SCEPAdminPage />} />
{/* Backward-compat alias for external bookmarks the Phase 9
release advertised. Lands on the Intune Monitoring tab. */}
<Route path="scep/intune" element={<SCEPAdminPage />} />
{/* EST RFC 7030 hardening master bundle Phase 8: per-profile
EST Administration page with Profiles / Recent Activity /
Trust Bundle tabs. Same admin-gate pattern as SCEP — the
route is unconditional; the page renders an "Admin access
required" banner for non-admin callers and skips the
underlying API calls so the server never sees a 403. */}
<Route path="est" element={<ESTAdminPage />} />
{/* Bundle 1 Phase 10 — RBAC management surface.
Every page reads /api/v1/auth/me on mount via the
useAuthMe hook and gates affordances against the
cached effective_permissions slice. Server-side
enforcement is the load-bearing layer; client-side
hide/disable is UX. */}
{/* Bundle 2 Phase 8 — OIDC + session management surface. */}
<Route path="auth/oidc/providers" element={<OIDCProvidersPage />} />
<Route path="auth/oidc/providers/:id" element={<OIDCProviderDetailPage />} />
<Route path="auth/oidc/providers/:id/mappings" element={<GroupMappingsPage />} />
<Route path="auth/sessions" element={<SessionsPage />} />
<Route path="auth/roles" element={<RolesPage />} />
<Route path="auth/roles/:id" element={<RoleDetailPage />} />
<Route path="auth/keys" element={<KeysPage />} />
<Route path="auth/settings" element={<AuthSettingsPage />} />
<Route path="auth/approvals" element={<ApprovalsPage />} />
{/* Audit 2026-05-10 CRIT-4 closure — break-glass admin surface. */}
<Route path="auth/breakglass" element={<BreakglassPage />} />
{/* Audit 2026-05-10 MED-11 closure — federated-user admin. */}
<Route path="auth/users" element={<UsersPage />} />
</Route>
</Routes>
</BrowserRouter>
</AuthGate>
</AuthProvider>
</QueryClientProvider>
</ErrorBoundary>
</StrictMode>
);