refactor: restructure RBAC page to container + tab components, add CSS module

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

ui/src/pages/AgentHealth/AgentHealth.module.css

@@ -82,3 +82,99 @@
   font-weight: 600;
   color: var(--text-primary);
 }
+
+/* DetailPanel: Overview tab */
+
+.overviewContent {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 4px 0;
+}
+
+.overviewRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.detailList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.detailRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 12px;
+}
+
+.detailRow:last-child {
+  border-bottom: none;
+}
+
+.detailRow dt {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.detailRow dd {
+  margin: 0;
+  color: var(--text-primary);
+  text-align: right;
+}
+
+.metricsSection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.metricLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* DetailPanel: Performance tab */
+
+.performanceContent {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 4px 0;
+}
+
+.chartSection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chartLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.emptyChart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  background: var(--bg-surface-raised);
+  border: 1px dashed var(--border-subtle);
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  color: var(--text-muted);
+}

ui/src/pages/AgentHealth/AgentHealth.tsx

@@ -3,10 +3,12 @@ import { useParams, useNavigate } from 'react-router';
 import {
   StatCard, StatusDot, Badge, MonoText,
   GroupCard, EventFeed, Breadcrumb, Alert,
+  DetailPanel, ProgressBar, LineChart,
 } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
 import { useAgents, useAgentEvents } from '../../api/queries/agents';
 import { useRouteCatalog } from '../../api/queries/catalog';
+import { useAgentMetrics } from '../../api/queries/agent-metrics';
 
 function formatUptime(seconds?: number): string {
   if (!seconds) return '—';
@@ -29,6 +31,138 @@ function formatRelativeTime(iso?: string): string {
   return `${Math.floor(hours / 24)}d ago`;
 }
 
+function AgentOverviewContent({ agent }: { agent: any }) {
+  const { data: memMetrics } = useAgentMetrics(
+    agent.id,
+    ['jvm.memory.heap.used', 'jvm.memory.heap.max'],
+    1,
+  );
+  const { data: cpuMetrics } = useAgentMetrics(agent.id, ['jvm.cpu.process'], 1);
+
+  const cpuValue = cpuMetrics?.metrics?.['jvm.cpu.process']?.[0]?.value;
+  const heapUsed = memMetrics?.metrics?.['jvm.memory.heap.used']?.[0]?.value;
+  const heapMax = memMetrics?.metrics?.['jvm.memory.heap.max']?.[0]?.value;
+
+  const heapPercent = heapUsed != null && heapMax != null && heapMax > 0
+    ? Math.round((heapUsed / heapMax) * 100)
+    : undefined;
+  const cpuPercent = cpuValue != null ? Math.round(cpuValue * 100) : undefined;
+
+  const statusVariant: 'live' | 'stale' | 'dead' =
+    agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead';
+  const statusColor: 'success' | 'warning' | 'error' =
+    agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error';
+
+  return (
+    <div className={styles.overviewContent}>
+      <div className={styles.overviewRow}>
+        <StatusDot variant={statusVariant} />
+        <Badge label={agent.status} color={statusColor} />
+      </div>
+
+      <dl className={styles.detailList}>
+        <div className={styles.detailRow}>
+          <dt>Application</dt>
+          <dd><MonoText>{agent.group ?? '—'}</MonoText></dd>
+        </div>
+        <div className={styles.detailRow}>
+          <dt>Version</dt>
+          <dd><MonoText>{agent.version ?? '—'}</MonoText></dd>
+        </div>
+        <div className={styles.detailRow}>
+          <dt>Uptime</dt>
+          <dd>{formatUptime(agent.uptimeSeconds)}</dd>
+        </div>
+        <div className={styles.detailRow}>
+          <dt>Last Heartbeat</dt>
+          <dd>{formatRelativeTime(agent.lastHeartbeat)}</dd>
+        </div>
+        <div className={styles.detailRow}>
+          <dt>TPS</dt>
+          <dd>{agent.tps != null ? (agent.tps as number).toFixed(2) : '—'}</dd>
+        </div>
+        <div className={styles.detailRow}>
+          <dt>Error Rate</dt>
+          <dd>{agent.errorRate != null ? `${((agent.errorRate as number) * 100).toFixed(1)}%` : '—'}</dd>
+        </div>
+        <div className={styles.detailRow}>
+          <dt>Routes</dt>
+          <dd>{agent.activeRoutes ?? '—'} active / {agent.totalRoutes ?? '—'} total</dd>
+        </div>
+      </dl>
+
+      <div className={styles.metricsSection}>
+        <div className={styles.metricLabel}>
+          Heap Memory{heapUsed != null && heapMax != null
+            ? ` — ${Math.round(heapUsed / 1024 / 1024)}MB / ${Math.round(heapMax / 1024 / 1024)}MB`
+            : ''}
+        </div>
+        <ProgressBar
+          value={heapPercent}
+          variant={heapPercent == null ? 'primary' : heapPercent > 85 ? 'error' : heapPercent > 70 ? 'warning' : 'success'}
+          indeterminate={heapPercent == null}
+          size="sm"
+        />
+      </div>
+
+      <div className={styles.metricsSection}>
+        <div className={styles.metricLabel}>
+          CPU Usage{cpuPercent != null ? ` — ${cpuPercent}%` : ''}
+        </div>
+        <ProgressBar
+          value={cpuPercent}
+          variant={cpuPercent == null ? 'primary' : cpuPercent > 80 ? 'error' : cpuPercent > 60 ? 'warning' : 'success'}
+          indeterminate={cpuPercent == null}
+          size="sm"
+        />
+      </div>
+    </div>
+  );
+}
+
+function AgentPerformanceContent({ agent }: { agent: any }) {
+  const { data: tpsMetrics } = useAgentMetrics(agent.id, ['cameleer.tps'], 60);
+  const { data: errMetrics } = useAgentMetrics(agent.id, ['cameleer.error.rate'], 60);
+
+  const tpsSeries = useMemo(() => {
+    const raw = tpsMetrics?.metrics?.['cameleer.tps'] ?? [];
+    return [{
+      label: 'TPS',
+      data: raw.map((p) => ({ x: new Date(p.time), y: p.value })),
+    }];
+  }, [tpsMetrics]);
+
+  const errSeries = useMemo(() => {
+    const raw = errMetrics?.metrics?.['cameleer.error.rate'] ?? [];
+    return [{
+      label: 'Error Rate',
+      data: raw.map((p) => ({ x: new Date(p.time), y: p.value * 100 })),
+    }];
+  }, [errMetrics]);
+
+  return (
+    <div className={styles.performanceContent}>
+      <div className={styles.chartSection}>
+        <div className={styles.chartLabel}>Throughput (TPS)</div>
+        {tpsSeries[0].data.length > 0 ? (
+          <LineChart series={tpsSeries} yLabel="req/s" height={160} />
+        ) : (
+          <div className={styles.emptyChart}>No data available</div>
+        )}
+      </div>
+
+      <div className={styles.chartSection}>
+        <div className={styles.chartLabel}>Error Rate (%)</div>
+        {errSeries[0].data.length > 0 ? (
+          <LineChart series={errSeries} yLabel="%" height={160} />
+        ) : (
+          <div className={styles.emptyChart}>No data available</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export default function AgentHealth() {
   const { appId } = useParams();
   const navigate = useNavigate();
@@ -160,6 +294,26 @@ export default function AgentHealth() {
           <EventFeed events={feedEvents} maxItems={100} />
         </div>
       )}
+
+      {selectedAgent && (
+        <DetailPanel
+          open={!!selectedAgent}
+          title={selectedAgent.name ?? selectedAgent.id}
+          onClose={() => setSelectedAgent(null)}
+          tabs={[
+            {
+              label: 'Overview',
+              value: 'overview',
+              content: <AgentOverviewContent agent={selectedAgent} />,
+            },
+            {
+              label: 'Performance',
+              value: 'performance',
+              content: <AgentPerformanceContent agent={selectedAgent} />,
+            },
+          ]}
+        />
+      )}
     </div>
   );
 }