feat: M14 — Observability (dashboard charts, agent fleet, stats API, metrics, structured logging, rollback)

Backend: StatsService with 5 aggregation methods, JSON metrics endpoint, slog-based
structured logging middleware. Stats API: dashboard summary, certificates-by-status,
expiration timeline, job trends, issuance rate. 23 new backend tests.

Frontend: Recharts-powered dashboard with 4 charts (status pie, expiration heatmap,
job trends line, issuance bar), agent fleet overview page with OS/arch grouping and
version breakdown, deployment rollback buttons on version history. 7 new frontend tests.

78 API endpoints, 744+ total tests (658 Go + 86 Vitest).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/api/client.test.ts

@@ -55,6 +55,12 @@ import {
   deleteAgentGroup,
   getAgentGroupMembers,
   getHealth,
+  getDashboardSummary,
+  getCertificatesByStatus,
+  getExpirationTimeline,
+  getJobTrends,
+  getIssuanceRate,
+  getMetrics,
 } from './client';
 
 // Mock global fetch
@@ -617,6 +623,59 @@ describe('API Client', () => {
     });
   });
 
+  // ─── Stats ─────────────────────────────────────────
+
+  describe('Stats', () => {
+    it('getDashboardSummary calls /api/v1/stats/summary', async () => {
+      mockFetch.mockReturnValueOnce(mockJsonResponse({ total_certificates: 10 }));
+      const result = await getDashboardSummary();
+      expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/stats/summary');
+      expect(result.total_certificates).toBe(10);
+    });
+
+    it('getCertificatesByStatus calls /api/v1/stats/certificates-by-status', async () => {
+      mockFetch.mockReturnValueOnce(mockJsonResponse([{ status: 'Active', count: 5 }]));
+      const result = await getCertificatesByStatus();
+      expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/stats/certificates-by-status');
+      expect(result).toHaveLength(1);
+    });
+
+    it('getExpirationTimeline calls with days parameter', async () => {
+      mockFetch.mockReturnValueOnce(mockJsonResponse([]));
+      await getExpirationTimeline(60);
+      expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/stats/expiration-timeline?days=60');
+    });
+
+    it('getExpirationTimeline uses default 30 days', async () => {
+      mockFetch.mockReturnValueOnce(mockJsonResponse([]));
+      await getExpirationTimeline();
+      expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/stats/expiration-timeline?days=30');
+    });
+
+    it('getJobTrends calls with days parameter', async () => {
+      mockFetch.mockReturnValueOnce(mockJsonResponse([]));
+      await getJobTrends(14);
+      expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/stats/job-trends?days=14');
+    });
+
+    it('getIssuanceRate calls with days parameter', async () => {
+      mockFetch.mockReturnValueOnce(mockJsonResponse([]));
+      await getIssuanceRate(7);
+      expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/stats/issuance-rate?days=7');
+    });
+
+    it('getMetrics calls /api/v1/metrics', async () => {
+      mockFetch.mockReturnValueOnce(mockJsonResponse({
+        gauge: { certificate_total: 10 },
+        counter: { job_completed_total: 5 },
+        uptime: { uptime_seconds: 3600 },
+      }));
+      const result = await getMetrics();
+      expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/metrics');
+      expect(result.gauge.certificate_total).toBe(10);
+    });
+  });
+
   // ─── Health ─────────────────────────────────────────
 
   describe('Health', () => {

web/src/api/client.ts

@@ -1,4 +1,4 @@
-import type { Certificate, CertificateVersion, Agent, Job, Notification, AuditEvent, PolicyRule, PolicyViolation, Issuer, Target, CertificateProfile, Owner, Team, AgentGroup, PaginatedResponse } from './types';
+import type { Certificate, CertificateVersion, Agent, Job, Notification, AuditEvent, PolicyRule, PolicyViolation, Issuer, Target, CertificateProfile, Owner, Team, AgentGroup, PaginatedResponse, DashboardSummary, CertificateStatusCount, ExpirationBucket, JobTrendDataPoint, IssuanceRateDataPoint, MetricsResponse } from './types';
 
 const BASE = '/api/v1';
 
@@ -257,5 +257,24 @@ export const approveRenewal = (jobId: string) =>
 export const rejectRenewal = (jobId: string, reason: string) =>
   fetchJSON<{ message: string }>(`${BASE}/jobs/${jobId}/reject`, { method: 'POST', body: JSON.stringify({ reason }) });
 
+// Stats
+export const getDashboardSummary = () =>
+  fetchJSON<DashboardSummary>(`${BASE}/stats/summary`);
+
+export const getCertificatesByStatus = () =>
+  fetchJSON<CertificateStatusCount[]>(`${BASE}/stats/certificates-by-status`);
+
+export const getExpirationTimeline = (days = 30) =>
+  fetchJSON<ExpirationBucket[]>(`${BASE}/stats/expiration-timeline?days=${days}`);
+
+export const getJobTrends = (days = 30) =>
+  fetchJSON<JobTrendDataPoint[]>(`${BASE}/stats/job-trends?days=${days}`);
+
+export const getIssuanceRate = (days = 30) =>
+  fetchJSON<IssuanceRateDataPoint[]>(`${BASE}/stats/issuance-rate?days=${days}`);
+
+export const getMetrics = () =>
+  fetchJSON<MetricsResponse>(`${BASE}/metrics`);
+
 // Health
 export const getHealth = () => fetchJSON<{ status: string }>('/health');

web/src/api/types.ts

@@ -206,3 +206,62 @@ export interface PaginatedResponse<T> {
   page: number;
   per_page: number;
 }
+
+// Stats types
+export interface DashboardSummary {
+  total_certificates: number;
+  expiring_certificates: number;
+  expired_certificates: number;
+  revoked_certificates: number;
+  active_agents: number;
+  offline_agents: number;
+  total_agents: number;
+  pending_jobs: number;
+  failed_jobs: number;
+  complete_jobs: number;
+  completed_at: string;
+}
+
+export interface CertificateStatusCount {
+  status: string;
+  count: number;
+}
+
+export interface ExpirationBucket {
+  date: string;
+  count: number;
+}
+
+export interface JobTrendDataPoint {
+  date: string;
+  completed_count: number;
+  failed_count: number;
+  success_rate: number;
+}
+
+export interface IssuanceRateDataPoint {
+  date: string;
+  issued_count: number;
+}
+
+export interface MetricsResponse {
+  gauge: {
+    certificate_total: number;
+    certificate_active: number;
+    certificate_expiring_soon: number;
+    certificate_expired: number;
+    certificate_revoked: number;
+    agent_total: number;
+    agent_online: number;
+    job_pending: number;
+  };
+  counter: {
+    job_completed_total: number;
+    job_failed_total: number;
+  };
+  uptime: {
+    uptime_seconds: number;
+    server_started: string;
+    measured_at: string;
+  };
+}

web/src/components/Layout.tsx

@@ -5,6 +5,7 @@ const nav = [
   { to: '/',              label: 'Dashboard',     icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4' },
   { to: '/certificates',  label: 'Certificates',  icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
   { to: '/agents',        label: 'Agents',        icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2' },
+  { to: '/fleet',          label: 'Fleet Overview', icon: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
   { to: '/jobs',          label: 'Jobs',          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' },
   { to: '/notifications', label: 'Notifications', icon: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9' },
   { to: '/policies',      label: 'Policies',      icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },

web/src/main.tsx

@@ -22,6 +22,7 @@ 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 './index.css';
 
 const queryClient = new QueryClient({
@@ -48,6 +49,7 @@ createRoot(document.getElementById('root')!).render(
                   <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="notifications" element={<NotificationsPage />} />
                   <Route path="policies" element={<PoliciesPage />} />

web/src/pages/AgentFleetPage.tsx

@@ -0,0 +1,261 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { getAgents } from '../api/client';
+import PageHeader from '../components/PageHeader';
+import StatusBadge from '../components/StatusBadge';
+import type { Agent } from '../api/types';
+
+const OS_COLORS: Record<string, string> = {
+  linux: '#f97316',
+  darwin: '#3b82f6',
+  windows: '#8b5cf6',
+  unknown: '#64748b',
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  Online: '#10b981',
+  Offline: '#ef4444',
+  Unknown: '#64748b',
+};
+
+interface GroupedAgents {
+  os: string;
+  arch: string;
+  agents: Agent[];
+  online: number;
+  offline: number;
+}
+
+function groupAgents(agents: Agent[]): GroupedAgents[] {
+  const groups = new Map<string, GroupedAgents>();
+
+  for (const agent of agents) {
+    const os = agent.os || 'unknown';
+    const arch = agent.architecture || 'unknown';
+    const key = `${os}/${arch}`;
+
+    if (!groups.has(key)) {
+      groups.set(key, { os, arch, agents: [], online: 0, offline: 0 });
+    }
+    const group = groups.get(key)!;
+    group.agents.push(agent);
+    if (agent.status === 'Online') {
+      group.online++;
+    } else {
+      group.offline++;
+    }
+  }
+
+  return Array.from(groups.values()).sort((a, b) => b.agents.length - a.agents.length);
+}
+
+const CustomTooltip = ({ active, payload }: any) => {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="bg-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-xs shadow-lg">
+      {payload.map((entry: any, i: number) => (
+        <p key={i} style={{ color: entry.payload?.fill || entry.color }}>
+          {entry.name}: {entry.value}
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default function AgentFleetPage() {
+  const navigate = useNavigate();
+  const { data: agentsResponse, isLoading } = useQuery({
+    queryKey: ['agents'],
+    queryFn: () => getAgents(),
+    refetchInterval: 15000,
+  });
+
+  const agents = agentsResponse?.data || [];
+  const groups = groupAgents(agents);
+
+  // Summary stats
+  const totalAgents = agents.length;
+  const onlineAgents = agents.filter(a => a.status === 'Online').length;
+  const offlineAgents = totalAgents - onlineAgents;
+
+  // OS distribution for pie chart
+  const osDistribution = agents.reduce<Record<string, number>>((acc, a) => {
+    const os = a.os || 'unknown';
+    acc[os] = (acc[os] || 0) + 1;
+    return acc;
+  }, {});
+  const osPieData = Object.entries(osDistribution).map(([name, value]) => ({
+    name,
+    value,
+    fill: OS_COLORS[name.toLowerCase()] || '#64748b',
+  }));
+
+  // Status for pie chart
+  const statusPieData = [
+    { name: 'Online', value: onlineAgents, fill: STATUS_COLORS.Online },
+    { name: 'Offline', value: offlineAgents, fill: STATUS_COLORS.Offline },
+  ].filter(s => s.value > 0);
+
+  // Version distribution
+  const versionCounts = agents.reduce<Record<string, number>>((acc, a) => {
+    const v = a.version || 'unknown';
+    acc[v] = (acc[v] || 0) + 1;
+    return acc;
+  }, {});
+
+  return (
+    <>
+      <PageHeader
+        title="Agent Fleet Overview"
+        subtitle={`${totalAgents} agents — ${onlineAgents} online, ${offlineAgents} offline`}
+      />
+      <div className="flex-1 overflow-y-auto p-6 space-y-6">
+        {/* Summary Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div className="card p-5 text-center">
+            <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Agents</p>
+            <p className="text-3xl font-bold mt-2 text-blue-400">{totalAgents}</p>
+          </div>
+          <div className="card p-5 text-center">
+            <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Online</p>
+            <p className="text-3xl font-bold mt-2 text-emerald-400">{onlineAgents}</p>
+          </div>
+          <div className="card p-5 text-center">
+            <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Offline</p>
+            <p className="text-3xl font-bold mt-2 text-red-400">{offlineAgents}</p>
+          </div>
+        </div>
+
+        {/* Charts */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* OS Distribution */}
+          <div className="card p-5">
+            <h3 className="text-sm font-semibold text-slate-300 mb-4">OS Distribution</h3>
+            <div className="h-48">
+              {osPieData.length > 0 ? (
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie data={osPieData} cx="50%" cy="50%" outerRadius={70} dataKey="value" label={({ name, value }) => `${name}: ${value}`} labelLine={false}>
+                      {osPieData.map((entry, index) => (
+                        <Cell key={index} fill={entry.fill} />
+                      ))}
+                    </Pie>
+                    <Tooltip content={<CustomTooltip />} />
+                  </PieChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="h-full flex items-center justify-center text-sm text-slate-500">No data</div>
+              )}
+            </div>
+          </div>
+
+          {/* Status Distribution */}
+          <div className="card p-5">
+            <h3 className="text-sm font-semibold text-slate-300 mb-4">Status Distribution</h3>
+            <div className="h-48">
+              {statusPieData.length > 0 ? (
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie data={statusPieData} cx="50%" cy="50%" innerRadius={40} outerRadius={70} dataKey="value" label={({ name, value }) => `${name}: ${value}`} labelLine={false}>
+                      {statusPieData.map((entry, index) => (
+                        <Cell key={index} fill={entry.fill} />
+                      ))}
+                    </Pie>
+                    <Tooltip content={<CustomTooltip />} />
+                  </PieChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="h-full flex items-center justify-center text-sm text-slate-500">No data</div>
+              )}
+            </div>
+          </div>
+
+          {/* Version Breakdown */}
+          <div className="card p-5">
+            <h3 className="text-sm font-semibold text-slate-300 mb-4">Agent Versions</h3>
+            <div className="space-y-3">
+              {Object.entries(versionCounts)
+                .sort(([, a], [, b]) => b - a)
+                .map(([version, count]) => (
+                  <div key={version} className="flex items-center justify-between">
+                    <span className="text-sm text-slate-300 font-mono">{version}</span>
+                    <div className="flex items-center gap-2">
+                      <div className="w-24 bg-slate-700 rounded-full h-2">
+                        <div
+                          className="bg-blue-500 h-2 rounded-full"
+                          style={{ width: `${(count / totalAgents) * 100}%` }}
+                        />
+                      </div>
+                      <span className="text-xs text-slate-400 w-8 text-right">{count}</span>
+                    </div>
+                  </div>
+                ))}
+              {Object.keys(versionCounts).length === 0 && (
+                <p className="text-sm text-slate-500">No version data</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Environment Groups */}
+        <div>
+          <h3 className="text-sm font-semibold text-slate-300 mb-4">Fleet by Platform</h3>
+          {isLoading ? (
+            <p className="text-sm text-slate-500">Loading fleet data...</p>
+          ) : groups.length === 0 ? (
+            <p className="text-sm text-slate-500">No agents registered</p>
+          ) : (
+            <div className="space-y-4">
+              {groups.map(group => (
+                <div key={`${group.os}/${group.arch}`} className="card">
+                  <div className="px-5 py-4 border-b border-slate-700 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: OS_COLORS[group.os.toLowerCase()] || '#64748b' }}
+                      />
+                      <h4 className="text-sm font-medium text-slate-200">
+                        {group.os} / {group.arch}
+                      </h4>
+                      <span className="text-xs text-slate-500">
+                        {group.agents.length} agent{group.agents.length !== 1 ? 's' : ''}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-3 text-xs">
+                      <span className="text-emerald-400">{group.online} online</span>
+                      {group.offline > 0 && <span className="text-red-400">{group.offline} offline</span>}
+                    </div>
+                  </div>
+                  <div className="divide-y divide-slate-700/50">
+                    {group.agents.map(agent => (
+                      <div
+                        key={agent.id}
+                        onClick={() => navigate(`/agents/${agent.id}`)}
+                        className="px-5 py-3 flex items-center justify-between hover:bg-slate-700/30 cursor-pointer transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className={`w-2 h-2 rounded-full ${agent.status === 'Online' ? 'bg-emerald-400' : 'bg-red-400'}`} />
+                          <div>
+                            <div className="text-sm text-slate-200">{agent.name || agent.hostname}</div>
+                            <div className="text-xs text-slate-500">{agent.ip_address || agent.id}</div>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-4">
+                          {agent.version && (
+                            <span className="text-xs text-slate-500 font-mono">{agent.version}</span>
+                          )}
+                          <StatusBadge status={agent.status} />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

web/src/pages/CertificateDetailPage.tsx

@@ -480,15 +480,29 @@ export default function CertificateDetailPage() {
             <p className="text-sm text-slate-500">No versions yet</p>
           ) : (
             <div className="space-y-3">
-              {versions.data.map((v) => (
+              {versions.data.map((v, idx) => (
                 <div key={v.id} className="flex items-center justify-between py-2 border-b border-slate-700/50 last:border-0">
                   <div>
-                    <div className="text-sm text-slate-200">Version {v.version}</div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-slate-200">Version {v.version}</span>
+                      {idx === 0 && <span className="text-xs bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded">Current</span>}
+                    </div>
                     <div className="text-xs text-slate-500 font-mono">{v.serial_number}</div>
                   </div>
-                  <div className="text-right">
-                    <div className="text-sm text-slate-300">{formatDate(v.not_before)} — {formatDate(v.not_after)}</div>
-                    <div className="text-xs text-slate-500">{formatDateTime(v.created_at)}</div>
+                  <div className="flex items-center gap-4">
+                    <div className="text-right">
+                      <div className="text-sm text-slate-300">{formatDate(v.not_before)} — {formatDate(v.not_after)}</div>
+                      <div className="text-xs text-slate-500">{formatDateTime(v.created_at)}</div>
+                    </div>
+                    {idx > 0 && cert?.status !== 'Archived' && cert?.status !== 'Revoked' && (
+                      <button
+                        onClick={() => setShowDeploy(true)}
+                        className="text-xs text-amber-400 hover:text-amber-300 border border-amber-500/30 px-2 py-1 rounded hover:bg-amber-500/10 transition-colors"
+                        title="Redeploy this version to targets"
+                      >
+                        Rollback
+                      </button>
+                    )}
                   </div>
                 </div>
               ))}

web/src/pages/DashboardPage.tsx

@@ -1,10 +1,29 @@
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { getCertificates, getAgents, getJobs, getNotifications, getHealth } from '../api/client';
+import {
+  BarChart, Bar, LineChart, Line, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from 'recharts';
+import {
+  getCertificates, getAgents, getJobs, getNotifications, getHealth,
+  getDashboardSummary, getCertificatesByStatus, getExpirationTimeline,
+  getJobTrends, getIssuanceRate,
+} from '../api/client';
 import PageHeader from '../components/PageHeader';
 import StatusBadge from '../components/StatusBadge';
 import { daysUntil, expiryColor, formatDate } from '../api/utils';
 
+const STATUS_COLORS: Record<string, string> = {
+  Active: '#10b981',
+  Expiring: '#f59e0b',
+  Expired: '#ef4444',
+  Revoked: '#8b5cf6',
+  Pending: '#6366f1',
+  RenewalInProgress: '#3b82f6',
+  Failed: '#f43f5e',
+  Archived: '#64748b',
+};
+
 function StatCard({ label, value, icon, color }: { label: string; value: string | number; icon: string; color: string }) {
   const colorMap: Record<string, string> = {
     success: 'bg-emerald-500/10 text-emerald-400',
@@ -27,23 +46,71 @@ function StatCard({ label, value, icon, color }: { label: string; value: string
   );
 }
 
+function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="card p-5">
+      <h3 className="text-sm font-semibold text-slate-300 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-slate-800 border border-slate-600 rounded-lg px-3 py-2 text-xs shadow-lg">
+      <p className="text-slate-300 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>
+  );
+};
+
 export default function DashboardPage() {
   const navigate = useNavigate();
 
   const { data: health } = useQuery({ queryKey: ['health'], queryFn: getHealth, refetchInterval: 30000 });
+  const { data: summary } = useQuery({ queryKey: ['dashboard-summary'], queryFn: getDashboardSummary, refetchInterval: 30000 });
+  const { data: statusCounts } = useQuery({ queryKey: ['certs-by-status'], queryFn: getCertificatesByStatus, refetchInterval: 30000 });
+  const { data: expirationTimeline } = useQuery({ queryKey: ['expiration-timeline'], queryFn: () => getExpirationTimeline(90), refetchInterval: 60000 });
+  const { data: jobTrends } = useQuery({ queryKey: ['job-trends'], queryFn: () => getJobTrends(30), refetchInterval: 30000 });
+  const { data: issuanceRate } = useQuery({ queryKey: ['issuance-rate'], queryFn: () => getIssuanceRate(30), refetchInterval: 60000 });
   const { data: certs } = useQuery({ queryKey: ['certificates', {}], queryFn: () => getCertificates(), refetchInterval: 30000 });
-  const { data: agents } = useQuery({ queryKey: ['agents'], queryFn: () => getAgents(), refetchInterval: 15000 });
   const { data: jobs } = useQuery({ queryKey: ['jobs', {}], queryFn: () => getJobs(), refetchInterval: 10000 });
-  const { data: notifs } = useQuery({ queryKey: ['notifications'], queryFn: () => getNotifications() });
 
-  const totalCerts = certs?.total || 0;
-  const expiringSoon = certs?.data?.filter(c => {
-    const d = daysUntil(c.expires_at);
-    return d > 0 && d <= 30;
-  }).length || 0;
-  const expired = certs?.data?.filter(c => c.status === 'Expired' || daysUntil(c.expires_at) <= 0).length || 0;
-  const activeAgents = agents?.data?.filter(a => a.status === 'Online').length || agents?.total || 0;
-  const pendingJobs = jobs?.data?.filter(j => j.status === 'Pending' || j.status === 'Running').length || 0;
+  const totalCerts = summary?.total_certificates || 0;
+  const expiringSoon = summary?.expiring_certificates || 0;
+  const expired = summary?.expired_certificates || 0;
+  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 (
     <>
@@ -53,7 +120,7 @@ export default function DashboardPage() {
       />
       <div className="flex-1 overflow-y-auto p-6 space-y-6">
         {/* Stats */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
           <StatCard label="Total Certificates" value={totalCerts} color="info"
             icon="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
           <StatCard label="Expiring Soon" value={expiringSoon} color={expiringSoon > 0 ? 'warning' : 'success'}
@@ -62,6 +129,100 @@ export default function DashboardPage() {
             icon="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           <StatCard label="Active Agents" value={activeAgents} color="success"
             icon="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+          <StatCard label="Pending Jobs" value={pendingJobs} color={pendingJobs > 0 ? 'warning' : 'info'}
+            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 */}
+        <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 }) => `${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-slate-400">{value}</span>}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            ) : (
+              <div className="h-full flex items-center justify-center text-sm text-slate-500">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="#334155" />
+                  <XAxis dataKey="week" tick={{ fill: '#94a3b8', fontSize: 11 }} tickFormatter={formatShortDate} />
+                  <YAxis tick={{ fill: '#94a3b8', 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-slate-500">No expiration data</div>
+            )}
+          </ChartCard>
+        </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="#334155" />
+                  <XAxis dataKey="date" tick={{ fill: '#94a3b8', fontSize: 11 }} tickFormatter={formatShortDate} />
+                  <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} allowDecimals={false} />
+                  <Tooltip content={<CustomTooltip />} />
+                  <Legend formatter={(value: string) => <span className="text-xs text-slate-400">{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-slate-500">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="#334155" />
+                  <XAxis dataKey="date" tick={{ fill: '#94a3b8', fontSize: 11 }} tickFormatter={formatShortDate} />
+                  <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} allowDecimals={false} />
+                  <Tooltip content={<CustomTooltip />} />
+                  <Bar dataKey="issued_count" name="Issued" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            ) : (
+              <div className="h-full flex items-center justify-center text-sm text-slate-500">No issuance data</div>
+            )}
+          </ChartCard>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">