feat: migrate UI to @cameleer/design-system, add backend endpoints

Backend:
- Add agent_events table (V5) and lifecycle event recording
- Add route catalog endpoint (GET /routes/catalog)
- Add route metrics endpoint (GET /routes/metrics)
- Add agent events endpoint (GET /agents/events-log)
- Enrich AgentInstanceResponse with tps, errorRate, activeRoutes, uptimeSeconds
- Add TimescaleDB retention/compression policies (V6)

Frontend:
- Replace custom Mission Control UI with @cameleer/design-system components
- Rebuild all pages: Dashboard, ExchangeDetail, RoutesMetrics, AgentHealth,
  AgentInstance, RBAC, AuditLog, OIDC, DatabaseAdmin, OpenSearchAdmin, Swagger
- New LayoutShell with design system AppShell, Sidebar, TopBar, CommandPalette
- Consume design system from Gitea npm registry (@cameleer/design-system@0.0.1)
- Add .npmrc for scoped registry, update Dockerfile with REGISTRY_TOKEN arg

CI:
- Pass REGISTRY_TOKEN build-arg to UI Docker build step

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

ui/src/pages/Routes/RoutesMetrics.tsx

@@ -0,0 +1,105 @@
+import { useMemo } from 'react';
+import { useParams } from 'react-router';
+import {
+  StatCard, Sparkline, MonoText, Badge,
+  DataTable, AreaChart, LineChart, BarChart,
+} from '@cameleer/design-system';
+import type { Column } from '@cameleer/design-system';
+import { useRouteMetrics } from '../../api/queries/catalog';
+import { useExecutionStats, useStatsTimeseries } from '../../api/queries/executions';
+import { useGlobalFilters } from '@cameleer/design-system';
+
+interface RouteRow {
+  id: string;
+  routeId: string;
+  appId: string;
+  exchangeCount: number;
+  successRate: number;
+  avgDurationMs: number;
+  p99DurationMs: number;
+  errorRate: number;
+  throughputPerSec: number;
+  sparkline: number[];
+}
+
+export default function RoutesMetrics() {
+  const { appId, routeId } = useParams();
+  const { timeRange } = useGlobalFilters();
+  const timeFrom = timeRange.start.toISOString();
+  const timeTo = timeRange.end.toISOString();
+
+  const { data: metrics } = useRouteMetrics(timeFrom, timeTo, appId);
+  const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId);
+  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId);
+
+  const rows: RouteRow[] = useMemo(() =>
+    (metrics || []).map((m: any) => ({
+      id: `${m.appId}/${m.routeId}`,
+      ...m,
+    })),
+    [metrics],
+  );
+
+  const sparklineData = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => b.totalCount as number),
+    [timeseries],
+  );
+
+  const chartData = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => ({
+      time: new Date(b.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      throughput: b.totalCount,
+      latency: b.avgDurationMs,
+      errors: b.failedCount,
+      successRate: b.totalCount > 0 ? ((b.totalCount - b.failedCount) / b.totalCount) * 100 : 100,
+    })),
+    [timeseries],
+  );
+
+  const columns: Column<RouteRow>[] = [
+    { key: 'routeId', header: 'Route', render: (v) => <MonoText size="sm">{String(v)}</MonoText> },
+    { key: 'appId', header: 'App', render: (v) => <Badge label={String(v)} color="auto" /> },
+    { key: 'exchangeCount', header: 'Exchanges', sortable: true },
+    {
+      key: 'successRate', header: 'Success', sortable: true,
+      render: (v) => `${((v as number) * 100).toFixed(1)}%`,
+    },
+    { key: 'avgDurationMs', header: 'Avg Duration', sortable: true, render: (v) => `${(v as number).toFixed(0)}ms` },
+    { key: 'p99DurationMs', header: 'P99', sortable: true, render: (v) => `${(v as number).toFixed(0)}ms` },
+    {
+      key: 'errorRate', header: 'Error Rate', sortable: true,
+      render: (v) => <span style={{ color: (v as number) > 0.05 ? 'var(--error)' : undefined }}>{((v as number) * 100).toFixed(1)}%</span>,
+    },
+    {
+      key: 'sparkline', header: 'Trend', width: '80px',
+      render: (v) => <Sparkline data={v as number[]} />,
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <StatCard label="Total Throughput" value={stats?.totalCount ?? 0} sparkline={sparklineData} />
+        <StatCard label="Error Rate" value={stats?.totalCount ? `${(((stats.failedCount ?? 0) / stats.totalCount) * 100).toFixed(1)}%` : '0%'} accent="error" />
+        <StatCard label="P99 Latency" value={`${stats?.p99DurationMs ?? 0}ms`} accent="warning" />
+        <StatCard label="Success Rate" value={stats?.totalCount ? `${(((stats.totalCount - (stats.failedCount ?? 0)) / stats.totalCount) * 100).toFixed(1)}%` : '100%'} accent="success" />
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={rows}
+        sortable
+        pageSize={20}
+      />
+
+      {chartData.length > 0 && (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1.5rem' }}>
+          <AreaChart series={[{ label: 'Throughput', data: chartData.map((d: any, i: number) => ({ x: i, y: d.throughput })) }]} height={200} />
+          <LineChart series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]} height={200} />
+          <BarChart series={[{ label: 'Errors', data: chartData.map((d: any) => ({ x: d.time as string, y: d.errors })) }]} height={200} />
+          <AreaChart series={[{ label: 'Success Rate', data: chartData.map((d: any, i: number) => ({ x: i, y: d.successRate })) }]} height={200} />
+        </div>
+      )}
+    </div>
+  );
+}