pages

ui/src/App.tsx

@@ -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>
+    </>
   );
 }

ui/src/layout/AppLayout.tsx

@@ -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>
+  );
+}

ui/src/main.tsx

@@ -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>,
 );

ui/src/pages/AgentsPage.tsx

@@ -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>
+  );
+}

ui/src/pages/AlertsPage.tsx

@@ -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>
+  );
+}

ui/src/pages/AuditPage.tsx

@@ -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>
+  );
+}

ui/src/pages/CommandsPage.tsx

@@ -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>
+  );
+}

ui/src/pages/DashboardPage.tsx

@@ -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>
+  );
+}

ui/src/pages/TokensPage.tsx

@@ -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>
+  );
+}

ui/src/styles.css

@@ -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;