delete agent flow

ui/src/App.tsx

@@ -10,6 +10,7 @@ import {
   fetchAlertHistory,
   fetchAlerts,
   fetchAudit,
+  revokeAgent,
 } from "@/api";
 import { AppLayout } from "@/layout/AppLayout";
 import { AgentsPage } from "@/pages/AgentsPage";
@@ -47,7 +48,12 @@ export function App() {
       setAlerts(nextAlerts);
       setHistory(nextHistory);
       setAudit(nextAudit);
-      if (!selectedAgentId && nextAgents[0]) {
+      if (!nextAgents.length) {
+        setSelectedAgentId("");
+      } else if (
+        !selectedAgentId ||
+        !nextAgents.some((agent) => agent.agent_id === selectedAgentId)
+      ) {
         setSelectedAgentId(nextAgents[0].agent_id);
       }
       setState("ready");
@@ -57,6 +63,12 @@ export function App() {
     }
   }
 
+  async function onRevokeAgent(agentId: string): Promise<boolean> {
+    const result = await revokeAgent(agentId);
+    await loadAll();
+    return result.revoked;
+  }
+
   async function refreshAlertsAndHistory() {
     const [nextAlerts, nextHistory] = await Promise.all([
       fetchAlerts(),
@@ -132,6 +144,7 @@ export function App() {
                 agents={agents}
                 selectedAgentId={selectedAgentId}
                 onSelectAgent={setSelectedAgentId}
+                onRevokeAgent={onRevokeAgent}
               />
             }
           />

ui/src/api.ts

@@ -57,6 +57,11 @@ export type RevokeEnrollTokenResponse = {
   revoked: boolean;
 };
 
+export type RevokeAgentResponse = {
+  agent_id: string;
+  revoked: boolean;
+};
+
 async function request<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(path, {
     ...init,
@@ -123,6 +128,13 @@ export function revokeEnrollToken(
   );
 }
 
+export function revokeAgent(agentId: string): Promise<RevokeAgentResponse> {
+  return request<RevokeAgentResponse>(
+    `/api/v1/control/agents/${encodeURIComponent(agentId)}`,
+    { method: "DELETE" },
+  );
+}
+
 export function runCommand(
   agentId: string,
   kind: CommandKind,

ui/src/pages/AgentsPage.tsx

@@ -1,35 +1,79 @@
 import type { Agent } from "@/api";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useState } from "react";
 
 type Props = {
   agents: Agent[];
   selectedAgentId: string;
   onSelectAgent: (agentId: string) => void;
+  onRevokeAgent: (agentId: string) => Promise<boolean>;
 };
 
-export function AgentsPage({ agents, selectedAgentId, onSelectAgent }: Props) {
+export function AgentsPage({
+  agents,
+  selectedAgentId,
+  onSelectAgent,
+  onRevokeAgent,
+}: Props) {
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState("");
+  const [error, setError] = useState("");
+
+  async function onRevoke(agentId: string) {
+    if (!window.confirm(`Revoke agent credentials for ${agentId}?`)) {
+      return;
+    }
+    setBusy(true);
+    setStatus("");
+    setError("");
+    try {
+      const revoked = await onRevokeAgent(agentId);
+      setStatus(
+        revoked ? `Revoked ${agentId}` : `${agentId} was already absent`,
+      );
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <Card>
       <CardHeader>
         <CardTitle>Agents</CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="space-y-3">
         <div className="grid gap-2">
           {agents.map((agent) => (
-            <Button
+            <div
+              className="flex items-start justify-between gap-3 rounded-md border bg-card px-3 py-2"
               key={agent.agent_id}
-              variant={
-                selectedAgentId === agent.agent_id ? "secondary" : "outline"
-              }
-              className="flex h-auto w-full items-center justify-between px-3 py-2 text-left"
-              onClick={() => onSelectAgent(agent.agent_id)}
             >
-              <span>{agent.agent_id}</span>
-              <span className="text-xs text-muted-foreground">
-                {agent.connected ? "connected" : "offline"}
-              </span>
-            </Button>
+              <Button
+                variant={
+                  selectedAgentId === agent.agent_id ? "secondary" : "outline"
+                }
+                className="flex h-auto flex-1 items-center justify-between px-3 py-2 text-left"
+                onClick={() => onSelectAgent(agent.agent_id)}
+                disabled={busy}
+              >
+                <span>{agent.agent_id}</span>
+                <span className="text-xs text-muted-foreground">
+                  {agent.connected ? "connected" : "offline"}
+                </span>
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="shrink-0 border-destructive/50 text-destructive hover:bg-destructive/10"
+                onClick={() => void onRevoke(agent.agent_id)}
+                disabled={busy}
+              >
+                Revoke
+              </Button>
+            </div>
           ))}
           {!agents.length && (
             <div className="px-1 py-2 text-sm text-muted-foreground">
@@ -37,6 +81,16 @@ export function AgentsPage({ agents, selectedAgentId, onSelectAgent }: Props) {
             </div>
           )}
         </div>
+        {status && (
+          <pre className="max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 text-xs">
+            {status}
+          </pre>
+        )}
+        {error && (
+          <pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
+            {error}
+          </pre>
+        )}
       </CardContent>
     </Card>
   );