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/api/queries/agent-metrics.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import { config } from '../../config';
+import { useAuthStore } from '../../auth/auth-store';
+
+export function useAgentMetrics(agentId: string | null, names: string[], buckets = 60) {
+  return useQuery({
+    queryKey: ['agent-metrics', agentId, names.join(','), buckets],
+    queryFn: async () => {
+      const token = useAuthStore.getState().accessToken;
+      const params = new URLSearchParams({
+        names: names.join(','),
+        buckets: String(buckets),
+      });
+      const res = await fetch(`${config.apiBaseUrl}/agents/${agentId}/metrics?${params}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'X-Cameleer-Protocol-Version': '1',
+        },
+      });
+      if (!res.ok) throw new Error(`${res.status}`);
+      return res.json() as Promise<{ metrics: Record<string, Array<{ time: string; value: number }>> }>;
+    },
+    enabled: !!agentId && names.length > 0,
+    refetchInterval: 30_000,
+  });
+}