feat: add vendor tenant metrics dashboard

Fleet overview page at /vendor/metrics showing per-tenant operational
metrics (agents, CPU, heap, HTTP requests, ingestion drops, uptime).
Queries each tenant's server via the new POST /api/v1/admin/server-metrics/query
REST API instead of direct ClickHouse access, supporting future per-tenant
CH instances.

Backend: TenantMetricsService fires 11 metric queries per tenant
concurrently over a 5-minute window, assembles into a summary snapshot.
ServerApiClient.queryServerMetrics() handles the M2M authenticated POST.

Frontend: VendorMetricsPage with KPI strip (fleet totals) and per-tenant
table with color-coded badges and heap usage bars. Auto-refreshes every 60s.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/api/vendor-hooks.ts

@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from './client';
-import type { VendorTenantSummary, VendorTenantDetail, CreateTenantRequest, TenantResponse, LicenseResponse, AuditLogPage, AuditLogFilters } from '../types/api';
+import type { VendorTenantSummary, VendorTenantDetail, CreateTenantRequest, TenantResponse, LicenseResponse, AuditLogPage, AuditLogFilters, TenantMetricsEntry } from '../types/api';
 
 export function useVendorTenants() {
   return useQuery<VendorTenantSummary[]>({
@@ -179,3 +179,13 @@ export function useInfraChDetail(tenantId: string) {
     enabled: !!tenantId,
   });
 }
+
+// --- Tenant Metrics ---
+
+export function useTenantMetrics() {
+  return useQuery<TenantMetricsEntry[]>({
+    queryKey: ['vendor', 'metrics'],
+    queryFn: () => api.get('/vendor/metrics'),
+    refetchInterval: 60_000,
+  });
+}

ui/src/components/Layout.tsx

@@ -109,6 +109,14 @@ export function Layout() {
           >
             Certificates
           </div>
+          <div
+            style={{ padding: '6px 12px 6px 36px', fontSize: 13, cursor: 'pointer',
+              fontWeight: isActive(location, '/vendor/metrics') ? 600 : 400,
+              color: isActive(location, '/vendor/metrics') ? 'var(--amber)' : 'var(--text-muted)' }}
+            onClick={() => navigate('/vendor/metrics')}
+          >
+            Metrics
+          </div>
           <div
             style={{ padding: '6px 12px 6px 36px', fontSize: 13, cursor: 'pointer',
               fontWeight: isActive(location, '/vendor/infrastructure') ? 600 : 400,

ui/src/pages/vendor/VendorMetricsPage.tsx

@@ -0,0 +1,194 @@
+import { Card, KpiStrip, Spinner, Badge } from '@cameleer/design-system';
+import { Activity } from 'lucide-react';
+import { useTenantMetrics } from '../../api/vendor-hooks';
+import { useNavigate } from 'react-router';
+import type { TenantMetricsEntry, MetricsSummary } from '../../types/api';
+import { tierColor } from '../../utils/tier';
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
+  return `${(n / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+function formatUptime(seconds: number): string {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (d > 0) return `${d}d ${h}h`;
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+function formatPct(v: number): string {
+  return `${(v * 100).toFixed(1)}%`;
+}
+
+function formatRate(v: number): string {
+  if (v === 0) return '0';
+  if (v < 0.1) return v.toFixed(3);
+  if (v < 10) return v.toFixed(1);
+  return Math.round(v).toLocaleString();
+}
+
+const thStyle: React.CSSProperties = {
+  textAlign: 'left',
+  padding: '8px 16px',
+  fontSize: 11,
+  fontWeight: 600,
+  color: 'var(--text-muted)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+  borderBottom: '1px solid var(--border)',
+};
+
+const tdStyle: React.CSSProperties = {
+  padding: '10px 16px',
+  fontSize: 13,
+  borderBottom: '1px solid var(--border)',
+  fontVariantNumeric: 'tabular-nums',
+};
+
+function AgentsBadges({ m }: { m: MetricsSummary }) {
+  const { live, stale, dead } = m.agents;
+  return (
+    <span style={{ display: 'inline-flex', gap: 6 }}>
+      <Badge label={`${live} live`} color="success" />
+      {stale > 0 && <Badge label={`${stale} stale`} color="warning" />}
+      {dead > 0 && <Badge label={`${dead} dead`} color="error" />}
+    </span>
+  );
+}
+
+function HeapBar({ used, max }: { used: number; max: number }) {
+  const pct = max > 0 ? (used / max) * 100 : 0;
+  const color = pct > 85 ? 'var(--error, #ef4444)' : pct > 70 ? 'var(--warning, #f59e0b)' : 'var(--success, #22c55e)';
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <div style={{ width: 60, height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
+        <div style={{ width: `${pct}%`, height: '100%', borderRadius: 3, background: color }} />
+      </div>
+      <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+        {formatBytes(used)} / {formatBytes(max)}
+      </span>
+    </div>
+  );
+}
+
+function DropsBadge({ rate }: { rate: number }) {
+  if (rate === 0) return <span style={{ color: 'var(--text-muted)' }}>0</span>;
+  return <Badge label={`${formatRate(rate)}/min`} color="error" />;
+}
+
+function TenantRow({ entry, onClick }: { entry: TenantMetricsEntry; onClick: () => void }) {
+  const m = entry.metrics;
+  const notRunning = entry.serverState !== 'RUNNING';
+
+  return (
+    <tr style={{ cursor: 'pointer' }} onClick={onClick}>
+      <td style={tdStyle}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontWeight: 500 }}>{entry.tenantName}</span>
+          <Badge label={entry.tier} color={tierColor(entry.tier)} />
+        </div>
+      </td>
+      {notRunning || !m ? (
+        <td colSpan={6} style={{ ...tdStyle, color: 'var(--text-muted)', textAlign: 'center' }}>
+          {notRunning ? `Server ${entry.serverState.toLowerCase()}` : 'No metrics available'}
+        </td>
+      ) : (
+        <>
+          <td style={tdStyle}><AgentsBadges m={m} /></td>
+          <td style={{ ...tdStyle, textAlign: 'right' }}>{formatPct(m.server.cpuUsage)}</td>
+          <td style={tdStyle}><HeapBar used={m.server.heapUsedBytes} max={m.server.heapMaxBytes} /></td>
+          <td style={{ ...tdStyle, textAlign: 'right' }}>{formatRate(m.http.requestsPerMinute)}/min</td>
+          <td style={{ ...tdStyle, textAlign: 'center' }}><DropsBadge rate={m.ingestion.dropsPerMinute} /></td>
+          <td style={{ ...tdStyle, textAlign: 'right', color: 'var(--text-muted)' }}>{formatUptime(m.server.uptimeSeconds)}</td>
+        </>
+      )}
+    </tr>
+  );
+}
+
+function FleetKpis({ entries }: { entries: TenantMetricsEntry[] }) {
+  const withMetrics = entries.filter((e) => e.metrics != null);
+  const totalAgentsLive = withMetrics.reduce((s, e) => s + (e.metrics!.agents.live), 0);
+  const totalAgentsDead = withMetrics.reduce((s, e) => s + (e.metrics!.agents.dead), 0);
+  const totalDrops = withMetrics.reduce((s, e) => s + (e.metrics!.ingestion.dropsPerMinute), 0);
+  const running = entries.filter((e) => e.serverState === 'RUNNING').length;
+  const avgCpu = withMetrics.length > 0
+    ? withMetrics.reduce((s, e) => s + e.metrics!.server.cpuUsage, 0) / withMetrics.length
+    : 0;
+
+  return (
+    <KpiStrip
+      items={[
+        { label: 'Tenants Running', value: `${running} / ${entries.length}` },
+        { label: 'Total Agents Live', value: String(totalAgentsLive) },
+        { label: 'Dead Agents', value: String(totalAgentsDead) },
+        { label: 'Avg CPU', value: formatPct(avgCpu) },
+        { label: 'Ingestion Drops', value: totalDrops === 0 ? '0' : `${formatRate(totalDrops)}/min` },
+      ]}
+    />
+  );
+}
+
+export function VendorMetricsPage() {
+  const { data, isLoading, isError } = useTenantMetrics();
+  const navigate = useNavigate();
+
+  return (
+    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 1200 }}>
+      <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Tenant Metrics</h1>
+
+      <Card>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
+          <Activity size={18} style={{ color: 'var(--amber)' }} />
+          <h2 style={{ margin: 0, fontSize: '1rem', fontWeight: 600 }}>Fleet Overview</h2>
+          {isLoading && <Spinner size="sm" />}
+          {isError && <span style={{ fontSize: 13, color: 'var(--error, #ef4444)' }}>Failed to load</span>}
+        </div>
+
+        {data && (
+          <>
+            <div style={{ padding: '4px 20px' }}>
+              <FleetKpis entries={data} />
+            </div>
+
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr>
+                  <th style={thStyle}>Tenant</th>
+                  <th style={thStyle}>Agents</th>
+                  <th style={{ ...thStyle, textAlign: 'right' }}>CPU</th>
+                  <th style={thStyle}>Heap</th>
+                  <th style={{ ...thStyle, textAlign: 'right' }}>HTTP Req</th>
+                  <th style={{ ...thStyle, textAlign: 'center' }}>Drops</th>
+                  <th style={{ ...thStyle, textAlign: 'right' }}>Uptime</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} style={{ ...tdStyle, color: 'var(--text-muted)', textAlign: 'center' }}>
+                      No tenants found
+                    </td>
+                  </tr>
+                ) : (
+                  data.map((entry) => (
+                    <TenantRow
+                      key={entry.tenantId}
+                      entry={entry}
+                      onClick={() => navigate(`/vendor/tenants/${entry.tenantId}`)}
+                    />
+                  ))
+                )}
+              </tbody>
+            </table>
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}

ui/src/router.tsx

@@ -14,6 +14,7 @@ import { TenantDetailPage } from './pages/vendor/TenantDetailPage';
 import { VendorAuditPage } from './pages/vendor/VendorAuditPage';
 import { CertificatesPage } from './pages/vendor/CertificatesPage';
 import { InfrastructurePage } from './pages/vendor/InfrastructurePage';
+import { VendorMetricsPage } from './pages/vendor/VendorMetricsPage';
 import { TenantDashboardPage } from './pages/tenant/TenantDashboardPage';
 import { TenantLicensePage } from './pages/tenant/TenantLicensePage';
 import { SsoPage } from './pages/tenant/SsoPage';
@@ -82,6 +83,11 @@ export function AppRouter() {
                 <CertificatesPage />
               </RequireScope>
             } />
+            <Route path="/vendor/metrics" element={
+              <RequireScope scope="platform:admin" fallback={<Navigate to="/tenant" replace />}>
+                <VendorMetricsPage />
+              </RequireScope>
+            } />
             <Route path="/vendor/infrastructure" element={
               <RequireScope scope="platform:admin" fallback={<Navigate to="/tenant" replace />}>
                 <InfrastructurePage />

ui/src/types/api.ts

@@ -155,3 +155,48 @@ export interface AuditLogFilters {
   page?: number;
   size?: number;
 }
+
+// Tenant metrics (from server /api/v1/admin/metrics/summary)
+export interface AgentMetrics {
+  live: number;
+  stale: number;
+  dead: number;
+  shutdown: number;
+}
+
+export interface IngestionMetrics {
+  bufferDepth: number;
+  dropsPerMinute: number;
+}
+
+export interface ServerMetrics {
+  cpuUsage: number;
+  heapUsedBytes: number;
+  heapMaxBytes: number;
+  uptimeSeconds: number;
+  threadCount: number;
+}
+
+export interface HttpMetrics {
+  requestsPerMinute: number;
+  errorRate: number;
+}
+
+export interface MetricsSummary {
+  collectedAt: string;
+  agents: AgentMetrics;
+  ingestion: IngestionMetrics;
+  server: ServerMetrics;
+  http: HttpMetrics;
+  authFailuresPerMinute: number;
+}
+
+export interface TenantMetricsEntry {
+  tenantId: string;
+  tenantName: string;
+  slug: string;
+  tier: string;
+  status: string;
+  serverState: string;
+  metrics: MetricsSummary | null;
+}