swarm-ui: an egress card on the swarm page for the swarm-wide allowed domains, sharing the agent card's add form and list hook

frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx

@@ -20,7 +20,7 @@
 // refuses to remove it.
 //
 // Its state belongs to one agent: callers key it by agent name.
-import { useEffect, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
@@ -35,16 +35,12 @@ import {
   entriesFor,
   entryBody,
   entryGroups,
-  type AllowedDomain,
   type EntryGroup,
 } from "./allowed-domains.js";
+import { useAllowedDomains } from "./useAllowedDomains.js";
 import "../../ui/badge-row/BadgeRow.css";
 import "./AgentLimits.css";
 
-interface Listing {
-  entries: AllowedDomain[];
-}
-
 // What each source's badge says, and what its list holds.
 const GROUP_LABEL: Record<EntryGroup["source"], string> = {
   "swarm-wide": "swarm-wide",
@@ -64,53 +60,8 @@ function groupHelp(source: EntryGroup["source"], agent: string): string {
 }
 
 export function AllowedDomains({ agent }: { agent: string }) {
-  const [entries, setEntries] = useState<AllowedDomain[] | null>(null);
-  const [error, setError] = useState<ProblemDetails | null>(null);
-  // Bumped after an add or a removal, so the list is fetched again.
-  const [reload, setReload] = useState(0);
+  const { entries, error, busy, remove, refetch } = useAllowedDomains();
   const [adding, setAdding] = useState(false);
-  const [busy, setBusy] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      const r = await fetch(ALLOWED_DOMAINS_URL);
-      if (!r.ok) {
-        if (!cancelled) setError(await readApiError(r));
-        return;
-      }
-      const body = (await r.json()) as Listing;
-      if (cancelled) return;
-      setEntries(body.entries);
-      setError(null);
-    })().catch((e: unknown) => {
-      if (!cancelled) setError({ detail: String(e) });
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [reload]);
-
-  async function remove(entry: AllowedDomain) {
-    if (busy) return;
-    setBusy(true);
-    try {
-      const r = await fetch(ALLOWED_DOMAINS_URL, {
-        method: "DELETE",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(entry),
-      });
-      if (!r.ok) {
-        setError(await readApiError(r));
-        return;
-      }
-      setReload((n) => n + 1);
-    } catch (e: unknown) {
-      setError({ detail: String(e) });
-    } finally {
-      setBusy(false);
-    }
-  }
 
   // A list already loaded stays under a failed refetch, so a change that
   // worked is not hidden by a read that did not.
@@ -120,7 +71,7 @@ export function AllowedDomains({ agent }: { agent: string }) {
         context="the allowed domains were not read or changed"
         problem={error}
       />
-      <Button onClick={() => setReload((n) => n + 1)}>retry</Button>
+      <Button onClick={() => refetch()}>retry</Button>
     </>
   ) : null;
   if (entries === null) {
@@ -190,7 +141,7 @@ export function AllowedDomains({ agent }: { agent: string }) {
             onClose={() => setAdding(false)}
             onAdded={() => {
               setAdding(false);
-              setReload((n) => n + 1);
+              refetch();
             }}
           />
         ) : null}
@@ -199,17 +150,19 @@ export function AllowedDomains({ agent }: { agent: string }) {
   );
 }
 
-function AddForm({
+// The add form of one allowed domain: for `agent`, or for every agent. With no
+// `agent` (the swarm page) it can only add a swarm-wide entry.
+export function AddForm({
   agent,
   onClose,
   onAdded,
 }: {
-  agent: string;
+  agent?: string;
   onClose: () => void;
   onAdded: () => void;
 }) {
   const [domain, setDomain] = useState("");
-  const [forSwarm, setForSwarm] = useState(false);
+  const [forSwarm, setForSwarm] = useState(agent === undefined);
   const [busy, setBusy] = useState(false);
   const [problem, setProblem] = useState<ProblemDetails | null>(null);
 
@@ -221,7 +174,7 @@ function AddForm({
       const r = await fetch(ALLOWED_DOMAINS_URL, {
         method: "POST",
         headers: { "content-type": "application/json" },
-        body: JSON.stringify(entryBody(domain, forSwarm, agent)),
+        body: JSON.stringify(entryBody(domain, forSwarm, agent ?? "")),
       });
       if (!r.ok) {
         // The box stays as typed, so the operator can fix it and add again.
@@ -237,15 +190,25 @@ function AddForm({
   }
 
   return (
-    <Panel title={`allowed domain — ${agent}`} icon="🌐" onClose={onClose}>
+    <Panel
+      title={
+        agent === undefined
+          ? "allowed domain — swarm-wide"
+          : `allowed domain — ${agent}`
+      }
+      icon="🌐"
+      onClose={onClose}
+    >
       <p>
-        Lets {agent} reach one more name through its hive's proxy, or every
-        agent when the box below is ticked. A name needs at least two labels,
-        such as <code>github.com</code>; a leading dot, as in{" "}
-        <code>.githubusercontent.com</code>, also allows every subdomain. IP
-        addresses and wildcards are refused. A name that resolves to a private
-        address stays blocked. The entry adds to the names each hive's own
-        configuration allows. The hive reads a change within about 30 seconds.
+        {agent === undefined
+          ? "Lets every agent reach one more name through its hive's proxy."
+          : `Lets ${agent} reach one more name through its hive's proxy, or every agent when the box below is ticked.`}{" "}
+        A name needs at least two labels, such as <code>github.com</code>; a
+        leading dot, as in <code>.githubusercontent.com</code>, also allows
+        every subdomain. IP addresses and wildcards are refused. A name that
+        resolves to a private address stays blocked. The entry adds to the names
+        each hive's own configuration allows. The hive reads a change within
+        about 30 seconds.
       </p>
       <form class="ui-agent-limits-form" onSubmit={(e) => void save(e)}>
         <TextField
@@ -255,12 +218,14 @@ function AddForm({
           placeholder="e.g. github.com"
           onInput={setDomain}
         />
-        <CheckboxField
-          id="allowed-domain-swarm"
-          label="for every agent in the swarm"
-          checked={forSwarm}
-          onChange={setForSwarm}
-        />
+        {agent === undefined ? null : (
+          <CheckboxField
+            id="allowed-domain-swarm"
+            label="for every agent in the swarm"
+            checked={forSwarm}
+            onChange={setForSwarm}
+          />
+        )}
         {problem ? (
           <ApiErrorPanel context="the domain was not added" problem={problem} />
         ) : null}

frontend/packages/swarm-ui/src/agent/detail/useAllowedDomains.ts

@@ -0,0 +1,71 @@
+// The swarm's allowed-domain entries and the one change that is not a form:
+// removing an entry. Shared by an agent card's allowed domains and the swarm
+// page's egress card, which differ only in which entries they show.
+//
+// Reads `GET /api/egress/allowed-domains` (every entry) and removes one with a
+// `DELETE` carrying the entry, each answering the whole list. `refetch` reads
+// the list again, for a caller that added an entry through its own form.
+import { useEffect, useState } from "preact/hooks";
+import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
+import { ALLOWED_DOMAINS_URL, type AllowedDomain } from "./allowed-domains.js";
+
+interface Listing {
+  entries: AllowedDomain[];
+}
+
+export function useAllowedDomains() {
+  const [entries, setEntries] = useState<AllowedDomain[] | null>(null);
+  const [error, setError] = useState<ProblemDetails | null>(null);
+  // Bumped after an add or a removal, so the list is fetched again.
+  const [reload, setReload] = useState(0);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const r = await fetch(ALLOWED_DOMAINS_URL);
+      if (!r.ok) {
+        if (!cancelled) setError(await readApiError(r));
+        return;
+      }
+      const body = (await r.json()) as Listing;
+      if (cancelled) return;
+      setEntries(body.entries);
+      setError(null);
+    })().catch((e: unknown) => {
+      if (!cancelled) setError({ detail: String(e) });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [reload]);
+
+  async function remove(entry: AllowedDomain) {
+    if (busy) return;
+    setBusy(true);
+    try {
+      const r = await fetch(ALLOWED_DOMAINS_URL, {
+        method: "DELETE",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(entry),
+      });
+      if (!r.ok) {
+        setError(await readApiError(r));
+        return;
+      }
+      setReload((n) => n + 1);
+    } catch (e: unknown) {
+      setError({ detail: String(e) });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return {
+    entries,
+    error,
+    busy,
+    remove,
+    refetch: () => setReload((n) => n + 1),
+  };
+}

frontend/packages/swarm-ui/src/pages/swarm/EgressCard.tsx

@@ -0,0 +1,114 @@
+// <EgressCard> — the names every agent in the swarm may reach through its
+// hive's egress proxy: the swarm-wide allowed domains, with an add box and a
+// remove beside each. A card that starts folded and reads nothing until it is
+// opened.
+//
+// The entries are the ones of `GET /api/egress/allowed-domains` that hold for
+// every agent (an agent's own entries stay on its card). They add to the names
+// each hive's own configuration allows. An entry the controller keeps from an
+// environment or account (`derived`) is not listed here. Adding and removing
+// are the agent card's own: `AddForm` without an agent, `useAllowedDomains`.
+import { useState } from "preact/hooks";
+import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
+import { Badge } from "@hive/shared/badge.js";
+import { AddForm } from "../../agent/detail/AllowedDomains.js";
+import { useAllowedDomains } from "../../agent/detail/useAllowedDomains.js";
+import { Button } from "../../ui/button/Button.js";
+import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
+import { Dialog } from "../../ui/dialog/Dialog.js";
+import "../../agent/detail/AgentLimits.css";
+import "./SwarmPage.css";
+
+function EgressBody() {
+  const { entries, error, busy, remove, refetch } = useAllowedDomains();
+  const [adding, setAdding] = useState(false);
+
+  // A list already loaded stays under a failed refetch, so a change that
+  // worked is not hidden by a read that did not.
+  const errorPanel = error ? (
+    <>
+      <ApiErrorPanel
+        context="the allowed domains were not read or changed"
+        problem={error}
+      />
+      <Button onClick={() => refetch()}>retry</Button>
+    </>
+  ) : null;
+  if (entries === null) {
+    return (
+      errorPanel ?? (
+        <span class="ui-agent-limits-muted" role="status">
+          loading the allowed domains…
+        </span>
+      )
+    );
+  }
+
+  const swarmWide = entries.filter(
+    (e) => e.agent === undefined && e.derived !== true,
+  );
+  return (
+    <>
+      {errorPanel}
+      <p class="ui-swarm-egress-help">
+        Names every agent in the swarm may reach through its hive's proxy, on
+        top of what each hive's own configuration allows. An agent that has
+        unrestricted internet reaches any name anyway. The hive reads a change
+        within about 30 seconds.
+      </p>
+      {swarmWide.length === 0 ? (
+        <p class="ui-agent-limits-muted">none added</p>
+      ) : (
+        <ul class="ui-swarm-egress-list">
+          {swarmWide.map((e) => (
+            <li key={e.domain}>
+              <Badge value={e.domain} />{" "}
+              <Badge
+                variant="quiet"
+                value="remove"
+                title={`stop allowing ${e.domain} for every agent`}
+                disabled={busy}
+                onClick={() => void remove(e)}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+      <Badge
+        variant="quiet"
+        value="add"
+        title="allow a domain for every agent"
+        onClick={() => setAdding(true)}
+      />
+      <Dialog
+        open={adding}
+        onClose={() => setAdding(false)}
+        label="add an allowed domain"
+        plain
+      >
+        {/* Remounted per open, so a cancelled add leaves nothing behind. */}
+        {adding ? (
+          <AddForm
+            onClose={() => setAdding(false)}
+            onAdded={() => {
+              setAdding(false);
+              refetch();
+            }}
+          />
+        ) : null}
+      </Dialog>
+    </>
+  );
+}
+
+export function EgressCard() {
+  return (
+    <LazyDisclosure
+      title="egress"
+      icon="🌐"
+      hint="the domains every agent may reach through its hive's proxy"
+    >
+      <EgressBody />
+    </LazyDisclosure>
+  );
+}

frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.css

@@ -17,3 +17,15 @@
   border-radius: 0.4em;
   background: color-mix(in srgb, var(--yellow) 12%, transparent);
 }
+/* The egress card: the swarm-wide allowed domains, one per line. */
+.ui-swarm-egress-help {
+  margin: 0 0 0.75em;
+  color: var(--muted);
+}
+.ui-swarm-egress-list {
+  list-style: none;
+  margin: 0 0 0.5em;
+  padding: 0;
+  display: grid;
+  gap: 0.3em;
+}

frontend/packages/swarm-ui/src/pages/swarm/SwarmPage.tsx

@@ -1,12 +1,13 @@
 // <SwarmPage> — what belongs to the swarm as a whole rather than to one agent:
-// the hive roster and the notification router. Each is a card that starts
-// folded and reads nothing until it is opened.
+// the hive roster, the swarm-wide egress allow list and the notification router.
+// Each is a card that starts folded and reads nothing until it is opened.
 //
 // The notification router is marked beta: its card says so beside the title and
 // carries a warning banner inside.
 import { Badge } from "@hive/shared/badge.js";
 import { LazyDisclosure } from "../../ui/disclosure/LazyDisclosure.js";
 import { NotificationRouter } from "../notifications/NotificationsPage.js";
+import { EgressCard } from "./EgressCard.js";
 import { HivesCard } from "./HivesCard.js";
 import "./SwarmPage.css";
 
@@ -16,6 +17,9 @@ export function SwarmPage() {
       <div class="ui-swarm-card">
         <HivesCard />
       </div>
+      <div class="ui-swarm-card">
+        <EgressCard />
+      </div>
       <div class="ui-swarm-card">
         <LazyDisclosure
           title="notification router"