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.

web/src/pages/DashboardPage.tsx

@@ -1,12 +1,8 @@
-import { useEffect, useState } from 'react';
+import { Suspense, lazy, useEffect, useMemo, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTrackedMutation } from '../hooks/useTrackedMutation';
 import { STALE_TIME } from '../api/queryConstants';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import {
-  BarChart, Bar, LineChart, Line, PieChart, Pie, Cell,
-  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
-} from 'recharts';
 import {
   getCertificates, getJobs, getHealth,
   getDashboardSummary, getCertificatesByStatus, getExpirationTimeline,
@@ -14,8 +10,24 @@ import {
 } from '../api/client';
 import PageHeader from '../components/PageHeader';
 import StatusBadge from '../components/StatusBadge';
+import Skeleton from '../components/Skeleton';
 import { daysUntil, expiryColor, formatDate } from '../api/utils';
-import OnboardingWizard from './OnboardingWizard';
+// Phase 4 closure (PERF-M1 + P-H3): memo-wrapped chart panels so a query
+// refetch in one tile doesn't force every Recharts subtree to reconcile.
+// See pages/dashboard/charts.tsx for the equality model.
+import {
+  CertsByStatusPieChart,
+  ExpirationTimelineBarChart,
+  JobTrendsLineChart,
+  IssuanceRateBarChart,
+  type PieDatum,
+  type WeeklyExpirationDatum,
+} from './dashboard/charts';
+// Phase 4 closure (FE-M5): OnboardingWizard is 1043 LOC + only renders
+// on first-run dashboards (one-time dismiss persisted to localStorage).
+// Lazy-loading the wizard keeps its step-form code off the hot path for
+// every dashboard load after the operator dismisses it once.
+const OnboardingWizard = lazy(() => import('./OnboardingWizard'));
 
 // Convert PascalCase status like "RenewalInProgress" to "Renewal In Progress"
 const formatStatus = (s: string) => s.replace(/([a-z])([A-Z])/g, '$1 $2');
@@ -54,30 +66,9 @@ function StatCard({ label, value, icon, color }: { label: string; value: string
   );
 }
 
-function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
-      <h3 className="text-sm font-semibold text-ink-muted mb-4">{title}</h3>
-      <div className="h-64">
-        {children}
-      </div>
-    </div>
-  );
-}
-
-const CustomTooltip = ({ active, payload, label }: any) => {
-  if (!active || !payload?.length) return null;
-  return (
-    <div className="bg-surface border border-surface-border rounded px-3 py-2 text-xs shadow-lg">
-      <p className="text-ink mb-1">{label}</p>
-      {payload.map((entry: any, i: number) => (
-        <p key={i} style={{ color: entry.color }}>
-          {entry.name}: {typeof entry.value === 'number' && entry.name?.includes('rate') ? `${entry.value.toFixed(1)}%` : entry.value}
-        </p>
-      ))}
-    </div>
-  );
-};
+// ChartCard + CustomTooltip + formatShortDate moved to
+// pages/dashboard/charts.tsx (Phase 4 PERF-M1 closure) where they live
+// alongside the memo-wrapped chart panels that consume them.
 
 function DigestCard() {
   const [previewHtml, setPreviewHtml] = useState<string | null>(null);
@@ -266,6 +257,35 @@ export default function DashboardPage() {
     refetchOnWindowFocus: true, staleTime: STALE_TIME.REAL_TIME,
   });
 
+  // Prepare pie chart data — memoized so the reference is stable across
+  // re-renders that didn't change statusCounts. Without this useMemo the
+  // chart's React.memo prop-equality check fails on every dashboard
+  // re-render (fresh array every time) and the perf win evaporates.
+  //
+  // Hooks must be called unconditionally on every render path (Rules of
+  // Hooks), so these live BEFORE the wizard early-return below — never
+  // after it.
+  const pieData = useMemo<PieDatum[]>(() => (
+    (statusCounts || []).filter(s => s.count > 0).map(s => ({
+      name: s.status,
+      value: s.count,
+      fill: STATUS_COLORS[s.status] || '#64748b',
+    }))
+  ), [statusCounts]);
+
+  // Format expiration heatmap for display — aggregate weekly for 90 days.
+  // Same useMemo reasoning as pieData above.
+  const weeklyExpiration = useMemo<WeeklyExpirationDatum[]>(() => (
+    (expirationTimeline || []).reduce<WeeklyExpirationDatum[]>((acc, bucket, i) => {
+      const weekIdx = Math.floor(i / 7);
+      if (!acc[weekIdx]) {
+        acc[weekIdx] = { week: bucket.date, count: 0 };
+      }
+      acc[weekIdx].count += bucket.count;
+      return acc;
+    }, [])
+  ), [expirationTimeline]);
+
   // Detect first-run ONCE: no user-configured issuers AND no certificates.
   // Auto-seeded env var issuers (source="env") don't count — they exist on every fresh boot.
   // Once showWizard latches true, it stays true until the user dismisses.
@@ -282,17 +302,19 @@ export default function DashboardPage() {
 
   if ((showWizard && !onboardingDismissed) || forceOnboarding) {
     return (
-      <OnboardingWizard onDismiss={() => {
-        try { localStorage.setItem('certctl:onboarding-dismissed', 'true'); } catch { /* noop */ }
-        setOnboardingDismissed(true);
-        setShowWizard(false);
-        // Strip ?onboarding=1 so page refresh doesn't relaunch the wizard
-        if (searchParams.has('onboarding')) {
-          const next = new URLSearchParams(searchParams);
-          next.delete('onboarding');
-          setSearchParams(next, { replace: true });
-        }
-      }} />
+      <Suspense fallback={<Skeleton variant="page" ariaLabel="Loading onboarding wizard" />}>
+        <OnboardingWizard onDismiss={() => {
+          try { localStorage.setItem('certctl:onboarding-dismissed', 'true'); } catch { /* noop */ }
+          setOnboardingDismissed(true);
+          setShowWizard(false);
+          // Strip ?onboarding=1 so page refresh doesn't relaunch the wizard
+          if (searchParams.has('onboarding')) {
+            const next = new URLSearchParams(searchParams);
+            next.delete('onboarding');
+            setSearchParams(next, { replace: true });
+          }
+        }} />
+      </Suspense>
     );
   }
 
@@ -302,29 +324,6 @@ export default function DashboardPage() {
   const activeAgents = summary?.active_agents || 0;
   const pendingJobs = summary?.pending_jobs || 0;
 
-  // Prepare pie chart data
-  const pieData = (statusCounts || []).filter(s => s.count > 0).map(s => ({
-    name: s.status,
-    value: s.count,
-    fill: STATUS_COLORS[s.status] || '#64748b',
-  }));
-
-  // Format expiration heatmap for display — aggregate weekly for 90 days
-  const weeklyExpiration = (expirationTimeline || []).reduce<{ week: string; count: number }[]>((acc, bucket, i) => {
-    const weekIdx = Math.floor(i / 7);
-    if (!acc[weekIdx]) {
-      acc[weekIdx] = { week: bucket.date, count: 0 };
-    }
-    acc[weekIdx].count += bucket.count;
-    return acc;
-  }, []);
-
-  // Format dates for x-axis labels
-  const formatShortDate = (dateStr: string) => {
-    const d = new Date(dateStr + 'T00:00:00');
-    return `${d.getMonth() + 1}/${d.getDate()}`;
-  };
-
   return (
     <>
       <PageHeader
@@ -346,96 +345,19 @@ export default function DashboardPage() {
             icon="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
         </div>
 
-        {/* Charts Row 1 */}
+        {/* Charts Row 1 — memo-wrapped panels from pages/dashboard/charts.tsx
+            (Phase 4 PERF-M1). Each panel re-renders only when its own data
+            ref changes, so a refetch on one tile doesn't reconcile the
+            other three Recharts subtrees. */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Certificates by Status (Pie) */}
-          <ChartCard title="Certificates by Status">
-            {pieData.length > 0 ? (
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
-                  <Pie
-                    data={pieData}
-                    cx="50%"
-                    cy="50%"
-                    innerRadius={60}
-                    outerRadius={90}
-                    paddingAngle={2}
-                    dataKey="value"
-                    label={({ name, value }) => `${formatStatus(name || '')}: ${value}`}
-                    labelLine={false}
-                  >
-                    {pieData.map((entry, index) => (
-                      <Cell key={index} fill={entry.fill} />
-                    ))}
-                  </Pie>
-                  <Tooltip content={<CustomTooltip />} />
-                  <Legend
-                    verticalAlign="bottom"
-                    height={36}
-                    formatter={(value: string) => <span className="text-xs text-ink-muted">{formatStatus(value)}</span>}
-                  />
-                </PieChart>
-              </ResponsiveContainer>
-            ) : (
-              <div className="h-full flex items-center justify-center text-sm text-ink-faint">No certificate data</div>
-            )}
-          </ChartCard>
-
-          {/* Expiration Heatmap (Bar chart by week) */}
-          <ChartCard title="Expiration Timeline (Next 90 Days)">
-            {weeklyExpiration.length > 0 ? (
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={weeklyExpiration}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-                  <XAxis dataKey="week" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={formatShortDate} />
-                  <YAxis tick={{ fill: '#64748b', fontSize: 11 }} allowDecimals={false} />
-                  <Tooltip content={<CustomTooltip />} />
-                  <Bar dataKey="count" name="Expiring certs" fill="#f59e0b" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            ) : (
-              <div className="h-full flex items-center justify-center text-sm text-ink-faint">No expiration data</div>
-            )}
-          </ChartCard>
+          <CertsByStatusPieChart data={pieData} />
+          <ExpirationTimelineBarChart data={weeklyExpiration} />
         </div>
 
         {/* Charts Row 2 */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Job Trends (Line chart) */}
-          <ChartCard title="Job Success/Failure Trends (30 Days)">
-            {(jobTrends || []).length > 0 ? (
-              <ResponsiveContainer width="100%" height="100%">
-                <LineChart data={jobTrends}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-                  <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={formatShortDate} />
-                  <YAxis tick={{ fill: '#64748b', fontSize: 11 }} allowDecimals={false} />
-                  <Tooltip content={<CustomTooltip />} />
-                  <Legend formatter={(value: string) => <span className="text-xs text-ink-muted">{value}</span>} />
-                  <Line type="monotone" dataKey="completed_count" name="Completed" stroke="#10b981" strokeWidth={2} dot={false} />
-                  <Line type="monotone" dataKey="failed_count" name="Failed" stroke="#ef4444" strokeWidth={2} dot={false} />
-                </LineChart>
-              </ResponsiveContainer>
-            ) : (
-              <div className="h-full flex items-center justify-center text-sm text-ink-faint">No job trend data</div>
-            )}
-          </ChartCard>
-
-          {/* Issuance Rate (Bar chart) */}
-          <ChartCard title="Certificate Issuance Rate (30 Days)">
-            {(issuanceRate || []).length > 0 ? (
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={issuanceRate}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-                  <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={formatShortDate} />
-                  <YAxis tick={{ fill: '#64748b', fontSize: 11 }} allowDecimals={false} />
-                  <Tooltip content={<CustomTooltip />} />
-                  <Bar dataKey="issued_count" name="Issued" fill="#2ea88f" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            ) : (
-              <div className="h-full flex items-center justify-center text-sm text-ink-faint">No issuance data</div>
-            )}
-          </ChartCard>
+          <JobTrendsLineChart data={jobTrends || []} />
+          <IssuanceRateBarChart data={issuanceRate || []} />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">

web/src/pages/dashboard/charts.tsx

@@ -0,0 +1,207 @@
+// Phase 4 closure (PERF-M1 + P-H3): memoized dashboard chart panels.
+//
+// Pre-Phase-4 the four chart panels lived as inline JSX inside
+// DashboardPage's return statement. DashboardPage has 9 useQuery hooks
+// (health / summary / issuers / statusCounts / expirationTimeline /
+// jobTrends / issuanceRate / certs / jobs) and each refetch — including
+// the per-tab refocus refetches the Phase 2 work narrowed but didn't
+// eliminate for the live-tile cohort — forced React to re-evaluate every
+// chart's JSX subtree, including the Recharts ResponsiveContainer
+// reconciliation that the library uses under the hood (~10-50 ms each
+// for charts with non-trivial data).
+//
+// Post-Phase-4 each chart is its own React.memo-wrapped component. When
+// only `summary` updates, the four chart panels skip re-render entirely
+// because their `data` prop didn't change. When `jobTrends` updates,
+// only `JobTrendsLineChart` re-renders; the other three panels skip.
+//
+// React.memo's default equality is referential (Object.is). The parent
+// DashboardPage passes the query result's `.data` arrays directly — TanStack
+// Query returns a stable reference until the underlying data actually
+// changes (it caches via queryKey), so referential equality is the
+// correct check for this layer. No custom areEqual function needed.
+
+import { memo } from 'react';
+import {
+  BarChart, Bar, LineChart, Line, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from 'recharts';
+
+// ─── Shared helpers ──────────────────────────────────────
+
+/** PascalCase → space-separated for display ("RenewalInProgress" → "Renewal In Progress"). */
+const formatStatus = (s: string) => s.replace(/([a-z])([A-Z])/g, '$1 $2');
+
+/** "2026-05-10" → "5/10" for compact x-axis labels. */
+const formatShortDate = (dateStr: string) => {
+  const d = new Date(dateStr + 'T00:00:00');
+  return `${d.getMonth() + 1}/${d.getDate()}`;
+};
+
+interface TooltipPayloadEntry {
+  color?: string;
+  name?: string;
+  value?: number | string;
+}
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: TooltipPayloadEntry[];
+  label?: string;
+}
+
+const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="bg-surface border border-surface-border rounded px-3 py-2 text-xs shadow-lg">
+      <p className="text-ink mb-1">{label}</p>
+      {payload.map((entry, i) => (
+        <p key={i} style={{ color: entry.color }}>
+          {entry.name}: {typeof entry.value === 'number' && entry.name?.includes('rate') ? `${entry.value.toFixed(1)}%` : entry.value}
+        </p>
+      ))}
+    </div>
+  );
+};
+
+interface ChartCardProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function ChartCard({ title, children }: ChartCardProps) {
+  return (
+    <div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
+      <h3 className="text-sm font-semibold text-ink-muted mb-4">{title}</h3>
+      <div className="h-64">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ─── Memoized chart panels ───────────────────────────────
+
+export interface PieDatum {
+  name: string;
+  value: number;
+  fill: string;
+}
+
+/** Certificates-by-Status pie chart. Re-renders only when `data` ref changes. */
+export const CertsByStatusPieChart = memo(function CertsByStatusPieChart({ data }: { data: PieDatum[] }) {
+  return (
+    <ChartCard title="Certificates by Status">
+      {data.length > 0 ? (
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              innerRadius={60}
+              outerRadius={90}
+              paddingAngle={2}
+              dataKey="value"
+              label={({ name, value }) => `${formatStatus(name || '')}: ${value}`}
+              labelLine={false}
+            >
+              {data.map((entry, index) => (
+                <Cell key={index} fill={entry.fill} />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltip />} />
+            <Legend
+              verticalAlign="bottom"
+              height={36}
+              formatter={(value: string) => <span className="text-xs text-ink-muted">{formatStatus(value)}</span>}
+            />
+          </PieChart>
+        </ResponsiveContainer>
+      ) : (
+        <div className="h-full flex items-center justify-center text-sm text-ink-faint">No certificate data</div>
+      )}
+    </ChartCard>
+  );
+});
+
+export interface WeeklyExpirationDatum {
+  week: string;
+  count: number;
+}
+
+/** Expiration Heatmap bar chart. Re-renders only when `data` ref changes. */
+export const ExpirationTimelineBarChart = memo(function ExpirationTimelineBarChart({ data }: { data: WeeklyExpirationDatum[] }) {
+  return (
+    <ChartCard title="Expiration Timeline (Next 90 Days)">
+      {data.length > 0 ? (
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+            <XAxis dataKey="week" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={formatShortDate} />
+            <YAxis tick={{ fill: '#64748b', fontSize: 11 }} allowDecimals={false} />
+            <Tooltip content={<CustomTooltip />} />
+            <Bar dataKey="count" name="Expiring certs" fill="#f59e0b" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <div className="h-full flex items-center justify-center text-sm text-ink-faint">No expiration data</div>
+      )}
+    </ChartCard>
+  );
+});
+
+export interface JobTrendDatum {
+  date: string;
+  completed_count: number;
+  failed_count: number;
+}
+
+/** Job Success/Failure trend line chart. Re-renders only when `data` ref changes. */
+export const JobTrendsLineChart = memo(function JobTrendsLineChart({ data }: { data: JobTrendDatum[] }) {
+  return (
+    <ChartCard title="Job Success/Failure Trends (30 Days)">
+      {data.length > 0 ? (
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={formatShortDate} />
+            <YAxis tick={{ fill: '#64748b', fontSize: 11 }} allowDecimals={false} />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend formatter={(value: string) => <span className="text-xs text-ink-muted">{value}</span>} />
+            <Line type="monotone" dataKey="completed_count" name="Completed" stroke="#10b981" strokeWidth={2} dot={false} />
+            <Line type="monotone" dataKey="failed_count" name="Failed" stroke="#ef4444" strokeWidth={2} dot={false} />
+          </LineChart>
+        </ResponsiveContainer>
+      ) : (
+        <div className="h-full flex items-center justify-center text-sm text-ink-faint">No job trend data</div>
+      )}
+    </ChartCard>
+  );
+});
+
+export interface IssuanceRateDatum {
+  date: string;
+  issued_count: number;
+}
+
+/** Certificate Issuance Rate bar chart. Re-renders only when `data` ref changes. */
+export const IssuanceRateBarChart = memo(function IssuanceRateBarChart({ data }: { data: IssuanceRateDatum[] }) {
+  return (
+    <ChartCard title="Certificate Issuance Rate (30 Days)">
+      {data.length > 0 ? (
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickFormatter={formatShortDate} />
+            <YAxis tick={{ fill: '#64748b', fontSize: 11 }} allowDecimals={false} />
+            <Tooltip content={<CustomTooltip />} />
+            <Bar dataKey="issued_count" name="Issued" fill="#2ea88f" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <div className="h-full flex items-center justify-center text-sm text-ink-faint">No issuance data</div>
+      )}
+    </ChartCard>
+  );
+});

web/src/pages/onboarding/AgentStep.tsx

@@ -0,0 +1,141 @@
+// Phase 4 closure (FE-M3): OnboardingWizard mega-page split — Step 2.
+// Deploy a certctl Agent. Behavior preserved byte-equivalent from the
+// pre-split src/pages/OnboardingWizard.tsx lines 282-408.
+//
+// Note: this step keeps Phase 2's TQ-H1 closure intact — the agents
+// poll runs every 5s ONLY until the first agent registers, then the
+// v5-functional refetchInterval flips to false and the poll stops.
+
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { STALE_TIME } from '../../api/queryConstants';
+import { getAgents, getApiKey } from '../../api/client';
+import { CodeBlock, WizardFooter } from './StepShell';
+
+export default function AgentStep({ onNext, onSkip }: { onNext: () => void; onSkip: () => void }) {
+  const [activeTab, setActiveTab] = useState<'linux' | 'macos' | 'docker'>('linux');
+
+  const apiKey = getApiKey() || '<your-api-key>';
+  const serverUrl = typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.hostname}:8443` : 'http://localhost:8443';
+
+  // Phase 2 TQ-H1 closure: poll every 5s ONLY until the first agent
+  // registers, then stop. v5 functional refetchInterval returns false
+  // (or 0) to disable. Pre-fix this polled forever; once the wizard
+  // succeeded the next user landed in a state with a 5-second cadence
+  // hitting /api/v1/agents indefinitely until they reloaded the tab.
+  // Now: as soon as agents.length > 0, the interval flips to false
+  // and the poll stops.
+  const { data: agents } = useQuery({
+    queryKey: ['agents'],
+    queryFn: () => getAgents(),
+    refetchInterval: (query) =>
+      (query.state.data?.data?.length ?? 0) > 0 ? false : 5_000,
+    refetchOnWindowFocus: true,
+    staleTime: STALE_TIME.REAL_TIME,
+  });
+
+  const agentList = agents?.data || [];
+  const hasAgents = agentList.length > 0;
+
+  const tabs = [
+    { key: 'linux' as const, label: 'Linux' },
+    { key: 'macos' as const, label: 'macOS' },
+    { key: 'docker' as const, label: 'Docker' },
+  ];
+
+  const commands: Record<string, { code: string; label: string }> = {
+    linux: {
+      label: 'Install via shell script (systemd service)',
+      code: `# Non-interactive install (recommended for curl | bash):
+curl -sSL https://raw.githubusercontent.com/certctl-io/certctl/master/install-agent.sh \\
+  | sudo bash -s -- \\
+      --server-url ${serverUrl} \\
+      --api-key ${apiKey}
+
+# The script downloads the agent binary, writes /etc/certctl/agent.env,
+# installs /etc/systemd/system/certctl-agent.service, and starts it.
+# Check status with: sudo systemctl status certctl-agent`,
+    },
+    macos: {
+      label: 'Install via shell script (launchd service)',
+      code: `# Non-interactive install (recommended for curl | bash):
+curl -sSL https://raw.githubusercontent.com/certctl-io/certctl/master/install-agent.sh \\
+  | bash -s -- \\
+      --server-url ${serverUrl} \\
+      --api-key ${apiKey}
+
+# The script writes ~/.certctl/agent.env and loads
+# ~/Library/LaunchAgents/com.certctl.agent.plist.
+# Check status with: launchctl list | grep certctl`,
+    },
+    docker: {
+      label: 'Run as Docker container',
+      code: `docker run -d --name certctl-agent \\
+  -e CERTCTL_SERVER_URL=${serverUrl} \\
+  -e CERTCTL_API_KEY=${apiKey} \\
+  ghcr.io/certctl-io/certctl-agent:latest`,
+    },
+  };
+
+  return (
+    <div>
+      <h2 className="text-lg font-semibold text-ink mb-1">Deploy a certctl Agent</h2>
+      <p className="text-sm text-ink-muted mb-6">
+        Agents run on your infrastructure to manage certificates, generate keys, and deploy to targets.
+        Install one now or skip to do it later.
+      </p>
+
+      {/* OS Tabs */}
+      <div className="flex gap-1 mb-4 bg-surface-border/30 rounded-lg p-1 w-fit">
+        {tabs.map(t => (
+          <button
+            key={t.key}
+            onClick={() => setActiveTab(t.key)}
+            className={`px-4 py-1.5 text-sm rounded-md transition-colors ${
+              activeTab === t.key
+                ? 'bg-surface text-ink font-medium shadow-sm'
+                : 'text-ink-muted hover:text-ink'
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <CodeBlock code={commands[activeTab].code} label={commands[activeTab].label} />
+
+      {/* Agent detection */}
+      <div className="mt-6 p-4 border border-surface-border rounded-lg">
+        <div className="flex items-center gap-3">
+          {hasAgents ? (
+            <>
+              <div className="w-3 h-3 rounded-full bg-emerald-500" />
+              <div>
+                <div className="text-sm font-medium text-emerald-700">
+                  {agentList.length} agent{agentList.length !== 1 ? 's' : ''} detected
+                </div>
+                <div className="text-xs text-ink-muted mt-0.5">
+                  {agentList.slice(0, 3).map(a => a.name || a.id).join(', ')}
+                  {agentList.length > 3 && ` and ${agentList.length - 3} more`}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="w-3 h-3 rounded-full bg-amber-400 animate-pulse" />
+              <div className="text-sm text-ink-muted">
+                Waiting for an agent to connect... <span className="text-xs">(polling every 5s)</span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <WizardFooter
+        onSkip={onSkip}
+        onNext={onNext}
+        nextLabel={hasAgents ? 'Next: Add Certificate' : 'Next: Add Certificate'}
+      />
+    </div>
+  );
+}

web/src/pages/onboarding/CertificateStep.tsx

@@ -0,0 +1,504 @@
+// Phase 4 closure (FE-M3): OnboardingWizard mega-page split — Step 3.
+// Add a Certificate. Behavior preserved byte-equivalent from the
+// pre-split src/pages/OnboardingWizard.tsx lines 414-897 (CertificateStep
+// + the two inline modals it owns — CreateTeamModalInline and
+// CreateOwnerModalInline). The inline modals live in this file because
+// they are tightly coupled to the certificate form (they're invoked
+// from inline "+ New team / + New owner" affordances), so splitting
+// them into their own file would just add an import edge for zero
+// reuse outside this step.
+
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import { useTrackedMutation } from '../../hooks/useTrackedMutation';
+import {
+  getIssuers, getAgents, getProfiles, getOwners, getTeams, getRenewalPolicies,
+  createCertificate, triggerRenewal, createTeam, createOwner,
+} from '../../api/client';
+import { WizardFooter } from './StepShell';
+
+// Inline CreateTeamModal — mirrors TeamsPage.tsx CreateTeamModal pattern.
+// Used inside CertificateStep so users can create a team without leaving the wizard.
+function CreateTeamModalInline({ isOpen, onClose, onCreated }: {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreated: (teamId: string) => void;
+}) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [error, setError] = useState('');
+
+  const mutation = useTrackedMutation({
+    mutationFn: () => createTeam({ name: name.trim(), description: description.trim() }),
+    invalidates: [['teams']],
+    onSuccess: (team) => {
+      setName('');
+      setDescription('');
+      setError('');
+      onCreated(team.id);
+      onClose();
+    },
+    onError: (err: Error) => setError(err.message),
+  });
+
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-surface border border-surface-border rounded p-5 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
+        <h2 className="text-lg font-semibold text-ink mb-4">Create Team</h2>
+        {error && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>}
+        <form onSubmit={(e) => { e.preventDefault(); if (!name.trim()) return; mutation.mutate(); }} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-ink mb-2">
+              Name <span className="text-red-600">*</span>
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder="Platform Engineering"
+              autoFocus
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-ink mb-2">
+              Description <span className="text-xs text-ink-muted font-normal">(optional)</span>
+            </label>
+            <textarea
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              rows={3}
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+            />
+          </div>
+          <div className="flex gap-2 pt-2">
+            <button
+              type="submit"
+              disabled={mutation.isPending || !name.trim()}
+              className="flex-1 btn btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {mutation.isPending ? 'Creating...' : 'Create Team'}
+            </button>
+            <button type="button" onClick={onClose} className="flex-1 btn btn-ghost">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// Inline CreateOwnerModal — mirrors OwnersPage.tsx CreateOwnerModal pattern.
+// Used inside CertificateStep so users can create an owner without leaving the wizard.
+function CreateOwnerModalInline({ isOpen, onClose, onCreated, teams }: {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreated: (ownerId: string) => void;
+  teams: { id: string; name: string }[];
+}) {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [teamId, setTeamId] = useState('');
+  const [error, setError] = useState('');
+
+  const mutation = useTrackedMutation({
+    mutationFn: () => createOwner({
+      name: name.trim(),
+      email: email.trim(),
+      team_id: teamId || undefined,
+    }),
+    invalidates: [['owners']],
+    onSuccess: (owner) => {
+      setName('');
+      setEmail('');
+      setTeamId('');
+      setError('');
+      onCreated(owner.id);
+      onClose();
+    },
+    onError: (err: Error) => setError(err.message),
+  });
+
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-surface border border-surface-border rounded p-5 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
+        <h2 className="text-lg font-semibold text-ink mb-4">Create Owner</h2>
+        {error && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!name.trim() || !email.trim()) return;
+            mutation.mutate();
+          }}
+          className="space-y-4"
+        >
+          <div>
+            <label className="block text-sm font-medium text-ink mb-2">
+              Name <span className="text-red-600">*</span>
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder="Alice Chen"
+              autoFocus
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-ink mb-2">
+              Email <span className="text-red-600">*</span>
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="alice@example.com"
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-ink mb-2">
+              Team <span className="text-xs text-ink-muted font-normal">(optional)</span>
+            </label>
+            <select
+              value={teamId}
+              onChange={e => setTeamId(e.target.value)}
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink focus:outline-none focus:border-brand-500 transition-colors"
+            >
+              <option value="">Unassigned</option>
+              {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+            </select>
+          </div>
+          <div className="flex gap-2 pt-2">
+            <button
+              type="submit"
+              disabled={mutation.isPending || !name.trim() || !email.trim()}
+              className="flex-1 btn btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {mutation.isPending ? 'Creating...' : 'Create Owner'}
+            </button>
+            <button type="button" onClick={onClose} className="flex-1 btn btn-ghost">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function CertificateStep({ onNext, onSkip, createdIssuerId }: {
+  onNext: (certName?: string) => void;
+  onSkip: () => void;
+  createdIssuerId: string | null;
+}) {
+  const [name, setName] = useState('');
+  const [commonName, setCommonName] = useState('');
+  const [sans, setSans] = useState('');
+  const [issuerId, setIssuerId] = useState(createdIssuerId || '');
+  const [profileId, setProfileId] = useState('');
+  const [ownerId, setOwnerId] = useState('');
+  const [teamId, setTeamId] = useState('');
+  const [renewalPolicyId, setRenewalPolicyId] = useState('');
+  const [error, setError] = useState('');
+  const [created, setCreated] = useState(false);
+
+  // Inline-create modals so users never have to leave the wizard (UX-001).
+  const [teamModalOpen, setTeamModalOpen] = useState(false);
+  const [ownerModalOpen, setOwnerModalOpen] = useState(false);
+
+  // C-001: the server requires name, common_name, issuer_id, owner_id,
+  // team_id, and renewal_policy_id (handler in
+  // internal/api/handler/certificates.go + ManagedCertificate.required in
+  // api/openapi.yaml). The wizard must collect the same six fields so that
+  // "Issue Certificate" doesn't 400 at the API boundary.
+  const { data: issuers } = useQuery({ queryKey: ['issuers'], queryFn: () => getIssuers() });
+  const { data: profiles } = useQuery({ queryKey: ['profiles'], queryFn: () => getProfiles() });
+  const { data: agents } = useQuery({ queryKey: ['agents'], queryFn: () => getAgents() });
+  const { data: owners } = useQuery({ queryKey: ['owners'], queryFn: () => getOwners({ per_page: '500' }) });
+  const { data: teams } = useQuery({ queryKey: ['teams'], queryFn: () => getTeams({ per_page: '500' }) });
+  // G-1: bind renewal_policy_id dropdown to /api/v1/renewal-policies (rp-* IDs
+  // from the renewal_policies table). Previously populated from getPolicies()
+  // which returned compliance rules (pol-* IDs) and violated the FK
+  // managed_certificates.renewal_policy_id → renewal_policies(id) on submit.
+  const { data: policies } = useQuery({ queryKey: ['renewal-policies'], queryFn: () => getRenewalPolicies(1, 500) });
+
+  const hasAgents = (agents?.data?.length ?? 0) > 0;
+
+  const createMutation = useTrackedMutation({
+    mutationFn: async () => {
+      const sanList = sans.split(',').map(s => s.trim()).filter(Boolean);
+      const cert = await createCertificate({
+        name,
+        common_name: commonName,
+        sans: sanList,
+        issuer_id: issuerId,
+        certificate_profile_id: profileId || undefined,
+        owner_id: ownerId,
+        team_id: teamId,
+        renewal_policy_id: renewalPolicyId,
+        environment: 'production',
+      });
+      // Trigger issuance
+      await triggerRenewal(cert.id);
+      return cert;
+    },
+    invalidates: [['certificates'], ['dashboard-summary']],
+    onSuccess: (cert) => {
+      setCreated(true);
+      setTimeout(() => onNext(cert.common_name), 1500);
+    },
+    onError: (err: Error) => setError(err.message),
+  });
+
+  if (created) {
+    return (
+      <div>
+        <h2 className="text-lg font-semibold text-ink mb-2">Certificate Requested</h2>
+        <div className="bg-emerald-50 border border-emerald-200 rounded p-4">
+          <div className="flex items-center gap-2">
+            <svg className="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span className="text-sm font-medium text-emerald-700">
+              Certificate for {commonName} has been requested. Moving to summary...
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h2 className="text-lg font-semibold text-ink mb-1">Add a Certificate</h2>
+      <p className="text-sm text-ink-muted mb-6">
+        Issue your first certificate, or skip this step and explore the dashboard.
+      </p>
+
+      <div className="space-y-5">
+        <div>
+          <label className="block text-sm font-medium text-ink mb-2">
+            Name <span className="text-red-600">*</span>
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder="API Production Cert"
+            className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-ink mb-2">
+            Common Name <span className="text-red-600">*</span>
+          </label>
+          <input
+            type="text"
+            value={commonName}
+            onChange={e => setCommonName(e.target.value)}
+            placeholder="example.com"
+            className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-ink mb-2">
+            Subject Alternative Names <span className="text-xs text-ink-muted font-normal">(comma-separated)</span>
+          </label>
+          <input
+            type="text"
+            value={sans}
+            onChange={e => setSans(e.target.value)}
+            placeholder="www.example.com, api.example.com"
+            className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-ink mb-2">
+              Issuer <span className="text-red-600">*</span>
+            </label>
+            <select
+              value={issuerId}
+              onChange={e => setIssuerId(e.target.value)}
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink focus:outline-none focus:border-brand-500 transition-colors"
+            >
+              <option value="">Select issuer...</option>
+              {issuers?.data?.map(iss => (
+                <option key={iss.id} value={iss.id}>{iss.name} ({iss.type})</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-ink mb-2">
+              Profile <span className="text-xs text-ink-muted font-normal">(optional)</span>
+            </label>
+            <select
+              value={profileId}
+              onChange={e => setProfileId(e.target.value)}
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink focus:outline-none focus:border-brand-500 transition-colors"
+            >
+              <option value="">Default</option>
+              {profiles?.data?.map(p => (
+                <option key={p.id} value={p.id}>{p.name}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label className="block text-sm font-medium text-ink">
+                Owner <span className="text-red-600">*</span>
+              </label>
+              <button
+                type="button"
+                onClick={() => setOwnerModalOpen(true)}
+                className="text-xs text-brand-600 hover:text-brand-700 hover:underline"
+              >
+                + New owner
+              </button>
+            </div>
+            <select
+              value={ownerId}
+              onChange={e => setOwnerId(e.target.value)}
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink focus:outline-none focus:border-brand-500 transition-colors"
+            >
+              <option value="">Select owner...</option>
+              {owners?.data?.map(o => (
+                <option key={o.id} value={o.id}>
+                  {o.name}{o.email ? ` (${o.email})` : ''}
+                </option>
+              ))}
+            </select>
+            {(owners?.data?.length ?? 0) === 0 && (
+              <p className="mt-1 text-xs text-ink-muted">
+                No owners yet —{' '}
+                <button
+                  type="button"
+                  onClick={() => setOwnerModalOpen(true)}
+                  className="underline hover:text-ink"
+                >
+                  create one now
+                </button>
+                .
+              </p>
+            )}
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label className="block text-sm font-medium text-ink">
+                Team <span className="text-red-600">*</span>
+              </label>
+              <button
+                type="button"
+                onClick={() => setTeamModalOpen(true)}
+                className="text-xs text-brand-600 hover:text-brand-700 hover:underline"
+              >
+                + New team
+              </button>
+            </div>
+            <select
+              value={teamId}
+              onChange={e => setTeamId(e.target.value)}
+              className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink focus:outline-none focus:border-brand-500 transition-colors"
+            >
+              <option value="">Select team...</option>
+              {teams?.data?.map(t => (
+                <option key={t.id} value={t.id}>{t.name}</option>
+              ))}
+            </select>
+            {(teams?.data?.length ?? 0) === 0 && (
+              <p className="mt-1 text-xs text-ink-muted">
+                No teams yet —{' '}
+                <button
+                  type="button"
+                  onClick={() => setTeamModalOpen(true)}
+                  className="underline hover:text-ink"
+                >
+                  create one now
+                </button>
+                .
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-ink mb-2">
+            Renewal Policy <span className="text-red-600">*</span>
+          </label>
+          <select
+            value={renewalPolicyId}
+            onChange={e => setRenewalPolicyId(e.target.value)}
+            className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink focus:outline-none focus:border-brand-500 transition-colors"
+          >
+            <option value="">Select renewal policy...</option>
+            {policies?.data?.map(p => (
+              <option key={p.id} value={p.id}>{p.name}</option>
+            ))}
+          </select>
+          {(policies?.data?.length ?? 0) === 0 && (
+            <p className="mt-1 text-xs text-ink-muted">
+              No renewal policies yet — create one from the <Link to="/policies" className="underline hover:text-ink">Policies page</Link> first, then return here.
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Discovery hint */}
+      {hasAgents && (
+        <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded text-sm text-blue-700">
+          <span className="font-medium">Already have certificates on disk?</span>{' '}
+          Visit the <Link to="/discovery" className="underline hover:text-blue-900">Discovery page</Link> to
+          import and manage existing certificates found by your agents.
+        </div>
+      )}
+      {!hasAgents && (
+        <div className="mt-6 p-4 bg-gray-50 border border-gray-200 rounded text-sm text-ink-muted">
+          <span className="font-medium">Tip:</span> Deploy an agent with{' '}
+          <code className="bg-gray-200 px-1 rounded text-xs">CERTCTL_DISCOVERY_DIRS=/etc/ssl/certs</code>{' '}
+          to automatically discover existing certificates on your infrastructure.
+        </div>
+      )}
+
+      {error && (
+        <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>
+      )}
+
+      <WizardFooter
+        onSkip={onSkip}
+        onNext={() => createMutation.mutate()}
+        nextLabel={createMutation.isPending ? 'Creating...' : 'Issue Certificate'}
+        nextDisabled={
+          !name ||
+          !commonName ||
+          !issuerId ||
+          !ownerId ||
+          !teamId ||
+          !renewalPolicyId ||
+          createMutation.isPending
+        }
+      />
+
+      <CreateTeamModalInline
+        isOpen={teamModalOpen}
+        onClose={() => setTeamModalOpen(false)}
+        onCreated={(id) => setTeamId(id)}
+      />
+      <CreateOwnerModalInline
+        isOpen={ownerModalOpen}
+        onClose={() => setOwnerModalOpen(false)}
+        onCreated={(id) => setOwnerId(id)}
+        teams={(teams?.data ?? []).map(t => ({ id: t.id, name: t.name }))}
+      />
+    </div>
+  );
+}

web/src/pages/onboarding/CompleteStep.tsx

@@ -0,0 +1,82 @@
+// Phase 4 closure (FE-M3): OnboardingWizard mega-page split — Step 4.
+// Summary + "You're all set!" review screen. Behavior preserved
+// byte-equivalent from the pre-split OnboardingWizard.tsx lines 901-975.
+
+import { useQuery } from '@tanstack/react-query';
+import { getIssuers, getAgents } from '../../api/client';
+
+export default function CompleteStep({ onFinish, issuerName, certName }: {
+  onFinish: () => void;
+  issuerName: string | null;
+  certName: string | null;
+}) {
+  const { data: issuers } = useQuery({ queryKey: ['issuers'], queryFn: () => getIssuers() });
+  const { data: agents } = useQuery({ queryKey: ['agents'], queryFn: () => getAgents() });
+
+  const issuerCount = issuers?.data?.length ?? 0;
+  const agentCount = agents?.data?.length ?? 0;
+
+  return (
+    <div className="text-center py-8">
+      <div className="w-16 h-16 mx-auto mb-6 bg-emerald-100 rounded-full flex items-center justify-center">
+        <svg className="w-8 h-8 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+
+      <h2 className="text-xl font-semibold text-ink mb-2">You're all set!</h2>
+      <p className="text-sm text-ink-muted mb-8 max-w-md mx-auto">
+        certctl is ready to manage your certificate lifecycle. Here's what's configured:
+      </p>
+
+      {/* Summary */}
+      <div className="max-w-sm mx-auto mb-8 space-y-3 text-left">
+        <div className="flex items-center gap-3 p-3 bg-surface border border-surface-border rounded">
+          <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${issuerCount > 0 ? 'bg-emerald-100 text-emerald-600' : 'bg-gray-100 text-gray-400'}`}>
+            {issuerCount > 0 ? (
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
+            ) : '—'}
+          </div>
+          <div className="text-sm">
+            <span className="font-medium text-ink">
+              {issuerCount > 0 ? `${issuerCount} issuer${issuerCount !== 1 ? 's' : ''} configured` : 'No issuers configured'}
+            </span>
+            {issuerName && <span className="text-ink-muted ml-1">({issuerName})</span>}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 p-3 bg-surface border border-surface-border rounded">
+          <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${agentCount > 0 ? 'bg-emerald-100 text-emerald-600' : 'bg-gray-100 text-gray-400'}`}>
+            {agentCount > 0 ? (
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
+            ) : '—'}
+          </div>
+          <span className="text-sm font-medium text-ink">
+            {agentCount > 0 ? `${agentCount} agent${agentCount !== 1 ? 's' : ''} connected` : 'No agents deployed yet'}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-3 p-3 bg-surface border border-surface-border rounded">
+          <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${certName ? 'bg-emerald-100 text-emerald-600' : 'bg-gray-100 text-gray-400'}`}>
+            {certName ? (
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
+            ) : '—'}
+          </div>
+          <span className="text-sm font-medium text-ink">
+            {certName ? `Certificate requested: ${certName}` : 'No certificates added yet'}
+          </span>
+        </div>
+      </div>
+
+      <button onClick={onFinish} className="btn btn-primary text-sm px-8 mb-6">
+        Go to Dashboard
+      </button>
+
+      <div className="flex justify-center gap-6 text-xs">
+        <a href="https://github.com/certctl-io/certctl/blob/master/docs/quickstart.md" target="_blank" rel="noopener noreferrer" className="text-accent hover:text-accent-bright">Quickstart Guide</a>
+        <a href="https://github.com/certctl-io/certctl/blob/master/docs/architecture.md" target="_blank" rel="noopener noreferrer" className="text-accent hover:text-accent-bright">Architecture</a>
+        <a href="https://github.com/certctl-io/certctl/blob/master/docs/connectors.md" target="_blank" rel="noopener noreferrer" className="text-accent hover:text-accent-bright">Connectors</a>
+      </div>
+    </div>
+  );
+}

web/src/pages/onboarding/IssuerStep.tsx

@@ -0,0 +1,179 @@
+// Phase 4 closure (FE-M3): OnboardingWizard mega-page split — Step 1.
+// Connect a Certificate Authority. Behavior preserved byte-equivalent
+// from the pre-split src/pages/OnboardingWizard.tsx lines 112-278.
+
+import { useState } from 'react';
+import { useTrackedMutation } from '../../hooks/useTrackedMutation';
+import { createIssuer, testIssuerConnection } from '../../api/client';
+import { issuerTypes, type IssuerTypeConfig } from '../../config/issuerTypes';
+import ConfigForm from '../../components/issuer/ConfigForm';
+import type { Issuer } from '../../api/types';
+import { WizardFooter } from './StepShell';
+
+export default function IssuerStep({ onNext, onSkip, onIssuerCreated }: {
+  onNext: () => void;
+  onSkip: () => void;
+  onIssuerCreated: (issuer: Issuer) => void;
+}) {
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+  const [configValues, setConfigValues] = useState<Record<string, unknown>>({});
+  const [issuerName, setIssuerName] = useState('');
+
+  // Pre-populate default values when a type is selected (matches IssuersPage behavior)
+  function handleTypeSelect(typeId: string) {
+    setSelectedType(typeId);
+    const tc = issuerTypes.find(t => t.id === typeId);
+    const defaults: Record<string, unknown> = {};
+    tc?.configFields.forEach(f => { if (f.defaultValue !== undefined) defaults[f.key] = f.defaultValue; });
+    setConfigValues(defaults);
+  }
+  const [error, setError] = useState('');
+  const [testResult, setTestResult] = useState<{ ok: boolean; msg: string } | null>(null);
+  const [createdIssuer, setCreatedIssuer] = useState<Issuer | null>(null);
+
+  const typeConfig = selectedType ? issuerTypes.find(t => t.id === selectedType) : null;
+
+  const createMutation = useTrackedMutation({
+    mutationFn: () => createIssuer({
+      name: issuerName || `${typeConfig?.name || selectedType} Issuer`,
+      type: selectedType!,
+      config: configValues as Record<string, unknown>,
+    }),
+    invalidates: [['issuers']],
+    onSuccess: (issuer) => {
+      setCreatedIssuer(issuer);
+      onIssuerCreated(issuer);
+      setError('');
+    },
+    onError: (err: Error) => setError(err.message),
+  });
+
+  // testIssuerConnection updates last_tested_at server-side; refresh the
+  // issuers list so the timestamp + status columns reflect the new probe.
+  // The local setTestResult banner still surfaces the immediate pass/fail.
+  const testMutation = useTrackedMutation({
+    mutationFn: () => testIssuerConnection(createdIssuer!.id),
+    invalidates: [['issuers']],
+    onSuccess: () => setTestResult({ ok: true, msg: 'Connection successful' }),
+    onError: (err: Error) => setTestResult({ ok: false, msg: err.message }),
+  });
+
+  // After issuer is created successfully
+  if (createdIssuer) {
+    return (
+      <div>
+        <h2 className="text-lg font-semibold text-ink mb-2">CA Connected</h2>
+        <div className="bg-emerald-50 border border-emerald-200 rounded p-4 mb-4">
+          <div className="flex items-center gap-2">
+            <svg className="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span className="text-sm font-medium text-emerald-700">
+              {createdIssuer.name} ({typeConfig?.name}) created successfully
+            </span>
+          </div>
+        </div>
+
+        {!testResult && (
+          <button
+            onClick={() => testMutation.mutate()}
+            disabled={testMutation.isPending}
+            className="btn btn-secondary text-sm mb-4"
+          >
+            {testMutation.isPending ? 'Testing...' : 'Test Connection'}
+          </button>
+        )}
+
+        {testResult?.ok && (
+          <div className="bg-emerald-50 border border-emerald-200 rounded p-3 mb-4 text-sm text-emerald-700">
+            Connection test passed.
+          </div>
+        )}
+        {testResult && !testResult.ok && (
+          <div className="bg-red-50 border border-red-200 rounded p-3 mb-4 text-sm text-red-700">
+            Connection test failed: {testResult.msg}
+          </div>
+        )}
+
+        <WizardFooter onNext={onNext} nextLabel="Next: Deploy Agent" showSkip={false} />
+      </div>
+    );
+  }
+
+  // Type selection
+  if (!selectedType) {
+    return (
+      <div>
+        <h2 className="text-lg font-semibold text-ink mb-1">Connect a Certificate Authority</h2>
+        <p className="text-sm text-ink-muted mb-6">
+          Choose a CA to issue and manage certificates. You can add more later from the Issuers page.
+        </p>
+        <div className="grid grid-cols-2 gap-4">
+          {issuerTypes.filter(t => !t.comingSoon).map((type: IssuerTypeConfig) => (
+            <button
+              key={type.id}
+              onClick={() => handleTypeSelect(type.id)}
+              className="p-4 border border-surface-border rounded-lg hover:border-brand-500 hover:bg-surface-muted transition-all text-left"
+            >
+              <div className="flex items-center gap-2">
+                <span className="text-lg">{type.icon}</span>
+                <span className="font-medium text-ink">{type.name}</span>
+              </div>
+              <div className="text-xs text-ink-muted mt-1">{type.description}</div>
+            </button>
+          ))}
+        </div>
+        <WizardFooter onSkip={onSkip} />
+      </div>
+    );
+  }
+
+  // Config form for selected type
+  const requiredFields = typeConfig?.configFields.filter(f => f.required) || [];
+  const allRequiredFilled = requiredFields.every(f => configValues[f.key]);
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-1">
+        <button onClick={() => { setSelectedType(null); setConfigValues({}); setIssuerName(''); setError(''); }}
+          className="text-ink-muted hover:text-ink transition-colors">
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <h2 className="text-lg font-semibold text-ink">
+          Configure {typeConfig?.name}
+        </h2>
+      </div>
+      <p className="text-sm text-ink-muted mb-6">{typeConfig?.description}</p>
+
+      <div className="mb-5">
+        <label className="block text-sm font-medium text-ink mb-2">Display Name</label>
+        <input
+          type="text"
+          value={issuerName}
+          onChange={e => setIssuerName(e.target.value)}
+          placeholder={`${typeConfig?.name || ''} Issuer`}
+          className="w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors"
+        />
+      </div>
+
+      <ConfigForm
+        fields={typeConfig?.configFields || []}
+        values={configValues}
+        onChange={(key, val) => setConfigValues(prev => ({ ...prev, [key]: val }))}
+      />
+
+      {error && (
+        <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>
+      )}
+
+      <WizardFooter
+        onSkip={onSkip}
+        onNext={() => createMutation.mutate()}
+        nextLabel={createMutation.isPending ? 'Creating...' : 'Create Issuer'}
+        nextDisabled={!allRequiredFilled || createMutation.isPending}
+      />
+    </div>
+  );
+}

web/src/pages/onboarding/StepShell.tsx

@@ -0,0 +1,91 @@
+// Phase 4 closure (FE-M3): OnboardingWizard mega-page split.
+// Shared shell helpers used by every step:
+//   • StepIndicator — the top progress strip ("Connect a CA → Deploy Agent → …")
+//   • WizardFooter  — the bottom Skip / Continue bar
+//   • CodeBlock     — copyable install-command box (AgentStep, also reusable)
+//
+// Behavior copied byte-equivalent from the pre-split OnboardingWizard.tsx
+// so the existing E2E vitest + the operator's muscle memory don't drift.
+
+import { useState } from 'react';
+import { STEPS, type WizardStep } from './types';
+
+export function CodeBlock({ code, label }: { code: string; label?: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <div className="relative">
+      {label && <div className="text-xs text-ink-muted mb-1 font-medium">{label}</div>}
+      <pre className="bg-gray-900 text-gray-100 rounded p-4 text-sm font-mono overflow-x-auto whitespace-pre-wrap">
+        {code}
+      </pre>
+      <button
+        onClick={() => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
+        className="absolute top-2 right-2 px-2 py-1 bg-gray-700 hover:bg-gray-600 text-gray-300 text-xs rounded transition-colors"
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  );
+}
+
+export function StepIndicator({ steps, current }: { steps: typeof STEPS; current: WizardStep }) {
+  const currentIdx = steps.findIndex(s => s.key === current);
+  return (
+    <div className="flex items-center justify-center gap-2 mb-8">
+      {steps.map((s, i) => {
+        const isCompleted = i < currentIdx;
+        const isCurrent = s.key === current;
+        return (
+          <div key={s.key} className="flex items-center gap-2">
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-colors ${
+              isCompleted ? 'bg-emerald-500 text-white' :
+              isCurrent ? 'bg-accent text-white' :
+              'bg-surface-border text-ink-muted'
+            }`}>
+              {isCompleted ? (
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              ) : i + 1}
+            </div>
+            <span className={`text-xs font-medium hidden sm:inline ${isCurrent ? 'text-ink' : 'text-ink-muted'}`}>
+              {s.label}
+            </span>
+            {i < steps.length - 1 && (
+              <div className={`w-8 h-0.5 ${i < currentIdx ? 'bg-emerald-500' : 'bg-surface-border'}`} />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function WizardFooter({ onSkip, onNext, nextLabel, nextDisabled, showSkip = true }: {
+  onSkip?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  nextDisabled?: boolean;
+  showSkip?: boolean;
+}) {
+  return (
+    <div className="flex justify-between items-center pt-6 border-t border-surface-border mt-6">
+      <div>
+        {showSkip && onSkip && (
+          <button onClick={onSkip} className="text-sm text-ink-muted hover:text-ink transition-colors">
+            Skip this step
+          </button>
+        )}
+      </div>
+      {onNext && (
+        <button
+          onClick={onNext}
+          disabled={nextDisabled}
+          className="btn btn-primary disabled:opacity-50"
+        >
+          {nextLabel || 'Continue'}
+        </button>
+      )}
+    </div>
+  );
+}

web/src/pages/onboarding/types.ts

@@ -0,0 +1,13 @@
+// Phase 4 closure (FE-M3): OnboardingWizard mega-page split.
+// Shared types + the canonical step ordering, factored out so each
+// step component imports the type without taking a dependency on the
+// shell.
+
+export type WizardStep = 'issuer' | 'agent' | 'certificate' | 'complete';
+
+export const STEPS: { key: WizardStep; label: string }[] = [
+  { key: 'issuer',      label: 'Connect a CA' },
+  { key: 'agent',       label: 'Deploy Agent' },
+  { key: 'certificate', label: 'Add Certificate' },
+  { key: 'complete',    label: 'Done' },
+];