pages

2026-04-12 02:41:36 +07:00
parent 6e91d0b599
commit 34e40e8c0d
13 changed files with 399 additions and 132 deletions
@@ -11,7 +11,8 @@
    },
    "dependencies": {
        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.28.0"
    },
    "devDependencies": {
        "@types/node": "^22.10.2",
@@ -14,6 +14,9 @@ importers:
      react-dom:
        specifier: ^18.3.1
        version: 18.3.1([email protected])
+      react-router-dom:
+        specifier: ^6.28.0
+        version: 6.30.3([email protected]([email protected]))([email protected])
    devDependencies:
      '@types/node':
        specifier: ^22.10.2
@@ -276,6 +279,10 @@ packages:
  '@jridgewell/[email protected]':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

+  '@remix-run/[email protected]':
+    resolution: {integrity: sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==}
+    engines: {node: '>=14.0.0'}
+
  '@rolldown/[email protected]':
    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}

@@ -313,79 +320,66 @@ packages:
    resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==}
    cpu: [loong64]
    os: [linux]
-    libc: [musl]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==}
    cpu: [ppc64]
    os: [linux]
-    libc: [musl]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/[email protected]':
    resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==}
@@ -551,6 +545,19 @@ packages:
    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
    engines: {node: '>=0.10.0'}

+  [email protected]:
+    resolution: {integrity: sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  [email protected]:
+    resolution: {integrity: sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+
  [email protected]:
    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
    engines: {node: '>=0.10.0'}
@@ -821,6 +828,8 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

+  '@remix-run/[email protected]': {}
+
  '@rolldown/[email protected]': {}

  '@rollup/[email protected]':
@@ -1043,6 +1052,18 @@ snapshots:

  [email protected]: {}

+  [email protected]([email protected]([email protected]))([email protected]):
+    dependencies:
+      '@remix-run/router': 1.23.2
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+      react-router: 6.30.3([email protected])
+
+  [email protected]([email protected]):
+    dependencies:
+      '@remix-run/router': 1.23.2
+      react: 18.3.1
+
  [email protected]:
    dependencies:
      loose-envify: 1.4.0
@@ -1,16 +1,23 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+
 import {
  type Agent,
  type Alert,
  type AlertTransition,
  type AuditEvent,
-  type CommandKind,
  fetchAgents,
-  fetchAlerts,
  fetchAlertHistory,
+  fetchAlerts,
  fetchAudit,
-  runCommand,
 } from "@/api";
+import { AppLayout } from "@/layout/AppLayout";
+import { AgentsPage } from "@/pages/AgentsPage";
+import { AlertsPage } from "@/pages/AlertsPage";
+import { AuditPage } from "@/pages/AuditPage";
+import { CommandsPage } from "@/pages/CommandsPage";
+import { DashboardPage } from "@/pages/DashboardPage";
+import { TokensPage } from "@/pages/TokensPage";

 type LoadState = "idle" | "loading" | "ready" | "error";

@@ -19,32 +26,28 @@ export function App() {
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [history, setHistory] = useState<AlertTransition[]>([]);
  const [audit, setAudit] = useState<AuditEvent[]>([]);
-
-  const [agentId, setAgentId] = useState("");
-  const [kind, setKind] = useState<CommandKind>("devs");
-  const [query, setQuery] = useState("");
-  const [commandOut, setCommandOut] = useState("Select agent and run a command");
+  const [selectedAgentId, setSelectedAgentId] = useState("");

  const [state, setState] = useState<LoadState>("idle");
-  const [error, setError] = useState<string>("");
-
-  const connectedCount = useMemo(() => agents.filter((a) => a.connected).length, [agents]);
+  const [error, setError] = useState("");

  async function loadAll() {
    setState("loading");
    setError("");
    try {
-      const [a, al, h, au] = await Promise.all([
+      const [nextAgents, nextAlerts, nextHistory, nextAudit] = await Promise.all([
        fetchAgents(),
        fetchAlerts(),
        fetchAlertHistory(20),
        fetchAudit(30),
      ]);
-      setAgents(a);
-      setAlerts(al);
-      setHistory(h);
-      setAudit(au);
-      if (!agentId && a[0]) setAgentId(a[0].agent_id);
+      setAgents(nextAgents);
+      setAlerts(nextAlerts);
+      setHistory(nextHistory);
+      setAudit(nextAudit);
+      if (!selectedAgentId && nextAgents[0]) {
+        setSelectedAgentId(nextAgents[0].agent_id);
+      }
      setState("ready");
    } catch (err) {
      setState("error");
@@ -52,6 +55,12 @@ export function App() {
    }
  }

+  async function refreshAlertsAndHistory() {
+    const [nextAlerts, nextHistory] = await Promise.all([fetchAlerts(), fetchAlertHistory(20)]);
+    setAlerts(nextAlerts);
+    setHistory(nextHistory);
+  }
+
  useEffect(() => {
    void loadAll();
  }, []);
@@ -59,6 +68,7 @@ export function App() {
  useEffect(() => {
    const wsUrl = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/api/v1/control/alerts/ws`;
    const ws = new WebSocket(wsUrl);
+
    ws.onmessage = (evt) => {
      try {
        const payload = JSON.parse(String(evt.data)) as {
@@ -68,111 +78,76 @@ export function App() {
        if (payload.alerts) setAlerts(payload.alerts);
        if (payload.recent_transitions) setHistory(payload.recent_transitions);
      } catch {
-        // Keep stream parse failures isolated from primary UI state.
+        // Ignore malformed stream payloads and keep current UI state.
      }
    };
+
    ws.onerror = () => {
-      // Poll fallback while stream is down.
      const id = window.setInterval(() => {
-        void fetchAlerts().then(setAlerts).catch(() => undefined);
+        void refreshAlertsAndHistory().catch(() => undefined);
      }, 8000);
      ws.onclose = () => window.clearInterval(id);
    };
+
    return () => ws.close();
  }, []);

-  async function onRunCommand(e: React.FormEvent) {
-    e.preventDefault();
-    if (!agentId) return;
-
-    setCommandOut("Running...");
-    try {
-      const out = await runCommand(agentId, kind, query.trim());
-      setCommandOut(JSON.stringify(out, null, 2));
-      const au = await fetchAudit(30);
-      setAudit(au);
-    } catch (err) {
-      setCommandOut(String(err));
-    }
-  }
-
  return (
-    <div className="app">
-      <header className="topbar">
-        <div>
-          <h1>Wakey Operator UI</h1>
-          <p>Fast ops surface for agents, commands, audits, and alerts</p>
-        </div>
-        <div className={`pill ${state}`}>
-          {state === "ready" ? "Ready" : state === "loading" ? "Loading" : state === "error" ? "Error" : "Idle"}
-        </div>
-      </header>
-
+    <>
      {error && <pre className="error">{error}</pre>}
-
-      <section className="stats">
-        <div className="card stat"><h3>Agents</h3><strong>{agents.length}</strong></div>
-        <div className="card stat"><h3>Connected</h3><strong>{connectedCount}</strong></div>
-        <div className="card stat"><h3>Active Alerts</h3><strong>{alerts.length}</strong></div>
-        <div className="card stat"><h3>Transitions</h3><strong>{history.length}</strong></div>
-      </section>
-
-      <main className="grid">
-        <section className="card">
-          <div className="row-head"><h2>Agents</h2><button onClick={() => void loadAll()}>Refresh</button></div>
-          <div className="list">
-            {agents.map((a) => (
-              <button key={a.agent_id} className={`row ${agentId === a.agent_id ? "selected" : ""}`} onClick={() => setAgentId(a.agent_id)}>
-                <span>{a.agent_id}</span>
-                <span>{a.connected ? "connected" : "offline"}</span>
-              </button>
-            ))}
-            {!agents.length && <div className="empty">No agents found</div>}
-          </div>
-        </section>
-
-        <section className="card">
-          <h2>Command Runner</h2>
-          <form className="form" onSubmit={onRunCommand}>
-            <label>Agent ID<input value={agentId} onChange={(e) => setAgentId(e.target.value)} required /></label>
-            <label>Command
-              <select value={kind} onChange={(e) => setKind(e.target.value as CommandKind)}>
-                <option value="devs">devs</option>
-                <option value="status">status</option>
-                <option value="leases">leases</option>
-                <option value="inventory">inventory</option>
-                <option value="wake">wake</option>
-              </select>
-            </label>
-            <label>Query<input value={query} onChange={(e) => setQuery(e.target.value)} /></label>
-            <button type="submit">Run command</button>
-          </form>
-          <pre className="output">{commandOut}</pre>
-        </section>
-
-        <section className="card">
-          <div className="row-head"><h2>Active Alerts</h2><button onClick={() => void fetchAlerts().then(setAlerts)}>Refresh</button></div>
-          <div className="list">
-            {alerts.map((a) => (
-              <div key={a.alert_id} className="row plain">
-                <span>{a.kind}{a.agent_id ? ` (${a.agent_id})` : ""}</span>
-                <span>{a.severity}</span>
-              </div>
-            ))}
-            {!alerts.length && <div className="empty">No active alerts</div>}
-          </div>
-        </section>
-
-        <section className="card">
-          <h2>Alert Transitions</h2>
-          <pre className="output small">{JSON.stringify(history, null, 2)}</pre>
-        </section>
-
-        <section className="card span-2">
-          <div className="row-head"><h2>Recent Audit</h2><button onClick={() => void fetchAudit(30).then(setAudit)}>Refresh</button></div>
-          <pre className="output">{JSON.stringify(audit, null, 2)}</pre>
-        </section>
-      </main>
-    </div>
+      <Routes>
+        <Route path="/" element={<AppLayout />}>
+          <Route
+            index
+            element={
+              <DashboardPage
+                agents={agents}
+                alerts={alerts}
+                transitions={history}
+                loading={state === "loading"}
+                onRefresh={loadAll}
+              />
+            }
+          />
+          <Route
+            path="agents"
+            element={
+              <AgentsPage
+                agents={agents}
+                selectedAgentId={selectedAgentId}
+                onSelectAgent={setSelectedAgentId}
+              />
+            }
+          />
+          <Route
+            path="commands"
+            element={
+              <CommandsPage
+                agents={agents}
+                selectedAgentId={selectedAgentId}
+                onSelectAgent={setSelectedAgentId}
+                onAfterCommand={loadAll}
+              />
+            }
+          />
+          <Route
+            path="audit"
+            element={<AuditPage events={audit} onRefresh={() => fetchAudit(30).then(setAudit)} />}
+          />
+          <Route
+            path="alerts"
+            element={
+              <AlertsPage
+                alerts={alerts}
+                transitions={history}
+                onRefresh={refreshAlertsAndHistory}
+              />
+            }
+          />
+          <Route path="tokens" element={<TokensPage />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Route>
+      </Routes>
+    </>
  );
 }
@@ -0,0 +1,40 @@
+import { NavLink, Outlet } from "react-router-dom";
+
+const navItems = [
+  ["/", "Dashboard"],
+  ["/agents", "Agents"],
+  ["/commands", "Commands"],
+  ["/audit", "Audit"],
+  ["/alerts", "Alerts"],
+  ["/tokens", "Tokens"],
+] as const;
+
+export function AppLayout() {
+  return (
+    <div className="app">
+      <header className="topbar">
+        <div>
+          <h1>Wakey Operator UI</h1>
+          <p>Control-plane operations, audits, and live alerts</p>
+        </div>
+      </header>
+
+      <nav className="tabs">
+        {navItems.map(([to, label]) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={to === "/"}
+            className={({ isActive }) => `tab ${isActive ? "active" : ""}`}
+          >
+            {label}
+          </NavLink>
+        ))}
+      </nav>
+
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
@@ -1,10 +1,13 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import { App } from "@/App";
 import "./styles.css";

 createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
-    <App />
+    <BrowserRouter basename="/ui">
+      <App />
+    </BrowserRouter>
  </React.StrictMode>,
 );
@@ -0,0 +1,28 @@
+import type { Agent } from "@/api";
+
+type Props = {
+  agents: Agent[];
+  selectedAgentId: string;
+  onSelectAgent: (agentId: string) => void;
+};
+
+export function AgentsPage({ agents, selectedAgentId, onSelectAgent }: Props) {
+  return (
+    <section className="card">
+      <h2>Agents</h2>
+      <div className="list">
+        {agents.map((agent) => (
+          <button
+            key={agent.agent_id}
+            className={`row ${selectedAgentId === agent.agent_id ? "selected" : ""}`}
+            onClick={() => onSelectAgent(agent.agent_id)}
+          >
+            <span>{agent.agent_id}</span>
+            <span>{agent.connected ? "connected" : "offline"}</span>
+          </button>
+        ))}
+        {!agents.length && <div className="empty">No agents enrolled</div>}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,34 @@
+import type { Alert, AlertTransition } from "@/api";
+
+type Props = {
+  alerts: Alert[];
+  transitions: AlertTransition[];
+  onRefresh: () => Promise<void>;
+};
+
+export function AlertsPage({ alerts, transitions, onRefresh }: Props) {
+  return (
+    <section className="two-col">
+      <div className="card">
+        <div className="row-head">
+          <h2>Active Alerts</h2>
+          <button onClick={() => void onRefresh()}>Refresh</button>
+        </div>
+        <div className="list">
+          {alerts.map((alert) => (
+            <div className="row plain" key={alert.alert_id}>
+              <span>{alert.kind}{alert.agent_id ? ` (${alert.agent_id})` : ""}</span>
+              <span>{alert.severity}</span>
+            </div>
+          ))}
+          {!alerts.length && <div className="empty">No active alerts</div>}
+        </div>
+      </div>
+
+      <div className="card">
+        <h2>Transition History</h2>
+        <pre className="output small">{JSON.stringify(transitions, null, 2)}</pre>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,18 @@
+import type { AuditEvent } from "@/api";
+
+type Props = {
+  events: AuditEvent[];
+  onRefresh: () => Promise<void>;
+};
+
+export function AuditPage({ events, onRefresh }: Props) {
+  return (
+    <section className="card span-full">
+      <div className="row-head">
+        <h2>Recent Audit Events</h2>
+        <button onClick={() => void onRefresh()}>Refresh</button>
+      </div>
+      <pre className="output">{JSON.stringify(events, null, 2)}</pre>
+    </section>
+  );
+}
@@ -0,0 +1,68 @@
+import { useState } from "react";
+
+import { runCommand, type Agent, type CommandKind } from "@/api";
+
+type Props = {
+  agents: Agent[];
+  selectedAgentId: string;
+  onSelectAgent: (agentId: string) => void;
+  onAfterCommand?: () => Promise<void>;
+};
+
+export function CommandsPage({ agents, selectedAgentId, onSelectAgent, onAfterCommand }: Props) {
+  const [kind, setKind] = useState<CommandKind>("devs");
+  const [query, setQuery] = useState("");
+  const [output, setOutput] = useState("Select agent and run a command");
+  const [running, setRunning] = useState(false);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedAgentId) return;
+    setRunning(true);
+    setOutput("Running...");
+    try {
+      const out = await runCommand(selectedAgentId, kind, query.trim());
+      setOutput(JSON.stringify(out, null, 2));
+      if (onAfterCommand) await onAfterCommand();
+    } catch (err) {
+      setOutput(String(err));
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  return (
+    <section className="card">
+      <h2>Command Runner</h2>
+      <form className="form" onSubmit={submit}>
+        <label>
+          Agent
+          <select value={selectedAgentId} onChange={(e) => onSelectAgent(e.target.value)} required>
+            <option value="" disabled>Select agent</option>
+            {agents.map((agent) => (
+              <option key={agent.agent_id} value={agent.agent_id}>
+                {agent.agent_id} ({agent.connected ? "connected" : "offline"})
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          Command
+          <select value={kind} onChange={(e) => setKind(e.target.value as CommandKind)}>
+            <option value="devs">devs</option>
+            <option value="status">status</option>
+            <option value="leases">leases</option>
+            <option value="inventory">inventory</option>
+            <option value="wake">wake</option>
+          </select>
+        </label>
+        <label>
+          Query
+          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="optional" />
+        </label>
+        <button type="submit" disabled={running || !selectedAgentId}>{running ? "Running..." : "Run command"}</button>
+      </form>
+      <pre className="output">{output}</pre>
+    </section>
+  );
+}
@@ -0,0 +1,30 @@
+import type { Agent, Alert, AlertTransition } from "@/api";
+
+type Props = {
+  agents: Agent[];
+  alerts: Alert[];
+  transitions: AlertTransition[];
+  loading: boolean;
+  onRefresh: () => void;
+};
+
+export function DashboardPage({ agents, alerts, transitions, loading, onRefresh }: Props) {
+  const connected = agents.filter((a) => a.connected).length;
+  return (
+    <section className="card-grid">
+      <div className="card stat"><h3>Agents</h3><strong>{agents.length}</strong></div>
+      <div className="card stat"><h3>Connected</h3><strong>{connected}</strong></div>
+      <div className="card stat"><h3>Active Alerts</h3><strong>{alerts.length}</strong></div>
+      <div className="card stat"><h3>Transitions</h3><strong>{transitions.length}</strong></div>
+      <div className="card span-full">
+        <div className="row-head">
+          <h2>Overview</h2>
+          <button onClick={onRefresh} disabled={loading}>{loading ? "Refreshing..." : "Refresh"}</button>
+        </div>
+        <p className="muted">
+          Use tabs to run commands, inspect audits, and monitor alerts in real time.
+        </p>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,10 @@
+export function TokensPage() {
+  return (
+    <section className="card">
+      <h2>Tokens</h2>
+      <p className="muted">
+        Token operations UI is the next increment. Backend endpoints are already available for issue/list/revoke.
+      </p>
+    </section>
+  );
+}
@@ -25,6 +25,27 @@ body {
 .topbar h1 { margin: 0; }
 .topbar p { margin: 0.35rem 0 0; color: var(--muted); }

+.tabs {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.8rem;
+}
+
+.tab {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0.35rem 0.65rem;
+  text-decoration: none;
+  color: var(--muted);
+  background: #0b1528;
+}
+
+.tab.active {
+  color: var(--text);
+  border-color: #6b84ad;
+}
+
 .pill {
  border: 1px solid var(--line);
  border-radius: 999px;
@@ -41,6 +62,12 @@ body {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 1rem;
 }
+
+.card-grid {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
 .stat h3 { margin: 0; color: var(--muted); font-weight: 500; }
 .stat strong { font-size: 1.5rem; }

@@ -49,6 +76,12 @@ body {
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
 }
+
+.two-col {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
+}
 .card {
  border: 1px solid var(--line);
  border-radius: 12px;
@@ -56,7 +89,9 @@ body {
  padding: 0.8rem;
 }
 .span-2 { grid-column: 1 / -1; }
+.span-full { grid-column: 1 / -1; }
 .row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
+.muted { color: var(--muted); }

 button, input, select {
  border-radius: 8px;
@@ -17,11 +17,15 @@ function sourcemapEnabled(): boolean {

 export default defineConfig({
  plugins: [
-    react({
-      babel: {
-        plugins: ["babel-plugin-react-compiler"],
-      },
-    }),
+    react(
+      process.env.UI_REACT_COMPILER === "1"
+        ? {
+            babel: {
+              plugins: ["babel-plugin-react-compiler"],
+            },
+          }
+        : undefined,
+    ),
  ],
  base: "/ui/",
  resolve: {