let the operator set, replace and remove an agent's backend env from the swarm ui

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

@@ -1,5 +1,5 @@
 // <LinkAccountMenu> — one "link account" badge that opens a `Dropdown` with
-// the three kinds of account an agent can be linked to, in place of one
+// the kinds of account and credential an agent can be linked to, in place of one
 // badge per kind: three side-by-side badges were wider than the detail
 // panel and spilled out of it. Presentational only, same split as
 // `WantedMenu`: the caller owns what each selection opens.
@@ -8,12 +8,13 @@ import { Badge } from "@hive/shared/badge.js";
 import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
 import { LinkIcon } from "@hive/shared/icons.js";
 
-export type LinkKind = "matrix" | "forge" | "github";
+export type LinkKind = "matrix" | "forge" | "github" | "backend";
 
 const OPTIONS: DropdownOption[] = [
   { value: "matrix", label: "matrix account" },
   { value: "forge", label: "forge account" },
   { value: "github", label: "github account" },
+  { value: "backend", label: "API-key environment" },
 ];
 
 export function LinkAccountMenu({
@@ -40,7 +41,7 @@ export function LinkAccountMenu({
         disabled={!hasHive}
         title={
           hasHive
-            ? `link a matrix, forge or github account to ${agent}`
+            ? `link a matrix, forge or github account, or set the API-key environment, for ${agent}`
             : "no hive on record for this agent — nothing to link against"
         }
       />

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

@@ -18,7 +18,7 @@ import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
 import { accountKindLabel } from "./account-kind.js";
 import "./LinkedAccounts.css";
 
-type AccountKind = "matrix" | "forgejo" | "github";
+type AccountKind = "matrix" | "forgejo" | "github" | "backend";
 
 // Mirrors `linked_accounts::LinkedAccount`.
 interface LinkedAccount {
@@ -38,6 +38,8 @@ function accountUrl(hive: string, agent: string, a: LinkedAccount): string {
       return `${base}/forge-accounts/${encodeURIComponent(a.name)}`;
     case "github":
       return `${base}/github-account`;
+    case "backend":
+      return `${base}/backend-env`;
   }
 }
 

frontend/packages/swarm-ui/src/agent/roster/AgentActions.tsx

@@ -17,6 +17,7 @@ import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
 import { LinkMatrixAccountForm } from "../../pages/LinkMatrixAccountForm.js";
 import { LinkForgeAccountForm } from "../../pages/LinkForgeAccountForm.js";
+import { LinkBackendEnvForm } from "../../pages/LinkBackendEnvForm.js";
 import { LinkGithubAccountForm } from "../../pages/LinkGithubAccountForm.js";
 import type { AgentRow } from "../AgentTypes.js";
 import type { LinkKind } from "../detail/LinkAccountMenu.js";
@@ -96,6 +97,7 @@ export function useAgentActions(
   const [matrixTarget, setMatrixTarget] = useState<AgentRow | null>(null);
   const [forgeTarget, setForgeTarget] = useState<AgentRow | null>(null);
   const [githubTarget, setGithubTarget] = useState<AgentRow | null>(null);
+  const [backendTarget, setBackendTarget] = useState<AgentRow | null>(null);
   const [linkVersion, setLinkVersion] = useState(0);
 
   const linkClosed = () => setLinkVersion((v) => v + 1);
@@ -111,6 +113,10 @@ export function useAgentActions(
     setGithubTarget(null);
     linkClosed();
   };
+  const closeBackend = () => {
+    setBackendTarget(null);
+    linkClosed();
+  };
 
   // The one PUT every wanted-state selection ends at, whether or not it went
   // through a `ConfirmDialog` first: PUT a new `wanted` declaration, track
@@ -213,6 +219,20 @@ export function useAgentActions(
           />
         ) : null}
       </Dialog>
+      <Dialog
+        open={backendTarget !== null}
+        onClose={closeBackend}
+        label="set the API-key environment"
+        plain
+      >
+        {backendTarget?.hive ? (
+          <LinkBackendEnvForm
+            hive={backendTarget.hive}
+            agent={backendTarget.name}
+            onClose={closeBackend}
+          />
+        ) : null}
+      </Dialog>
       <ConfirmDialog
         open={confirmTarget !== null}
         label={confirmTarget ? CONFIRM_COPY[confirmTarget.state].label : ""}
@@ -259,7 +279,8 @@ export function useAgentActions(
     openLink: (row, kind) => {
       if (kind === "matrix") setMatrixTarget(row);
       else if (kind === "forge") setForgeTarget(row);
-      else setGithubTarget(row);
+      else if (kind === "github") setGithubTarget(row);
+      else setBackendTarget(row);
     },
     dialogs,
   };

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

@@ -0,0 +1,130 @@
+// <LinkBackendEnvForm> — writes an agent's backend environment (the text of
+// a systemd `EnvironmentFile`) into the swarm secret store, or removes it.
+// PUTs and DELETEs `/api/hives/{hive}/agents/{agent}/backend-env` — 204 on
+// success, 400/404/500 as `problem+json`, shown via `ApiErrorPanel` like
+// `LinkGithubAccountForm`.
+//
+// A blind set: no route hands the text back, so the box never starts with the
+// stored value. A save replaces whatever is stored. Whether one is stored
+// shows on the agent panel (`LinkedAccounts`).
+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 { Panel } from "../ui/panel/Panel.js";
+import { TextAreaField } from "../ui/text-area-field/TextAreaField.js";
+import { Button } from "../ui/button/Button.js";
+import "./LinkMatrixAccountForm.css";
+
+type SubmitState =
+  | { status: "idle" }
+  | { status: "submitting" }
+  | { status: "done"; message: string }
+  | { status: "error"; problem: ProblemDetails };
+
+// A swarm-controller without the route answers 404 with no problem body.
+const NO_ROUTE =
+  "this swarm-controller has no backend-env route, or nothing is stored";
+
+export function LinkBackendEnvForm({
+  hive,
+  agent,
+  onClose,
+}: {
+  hive: string;
+  agent: string;
+  onClose?: () => void;
+}) {
+  const [env, setEnv] = useState("");
+  const [result, setResult] = useState<SubmitState>({ status: "idle" });
+
+  async function send(method: "PUT" | "DELETE", done: string) {
+    setResult({ status: "submitting" });
+    try {
+      const r = await fetch(
+        `/api/hives/${encodeURIComponent(hive)}/agents/${encodeURIComponent(agent)}/backend-env`,
+        method === "PUT"
+          ? {
+              method,
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ env }),
+            }
+          : { method },
+      );
+      if (!r.ok) {
+        const problem = await readApiError(r);
+        setResult({
+          status: "error",
+          problem:
+            r.status === 404 && !problem.detail
+              ? { detail: NO_ROUTE }
+              : problem,
+        });
+        return;
+      }
+      setResult({ status: "done", message: done });
+      // The store holds the text; nothing here needs it.
+      setEnv("");
+    } catch (err) {
+      setResult({ status: "error", problem: { detail: String(err) } });
+    }
+  }
+
+  function save(e: Event) {
+    e.preventDefault();
+    void send("PUT", "stored the API-key environment for");
+  }
+
+  const busy = result.status === "submitting";
+  return (
+    <Panel
+      title={`set the API-key environment — ${agent}`}
+      icon="🔗"
+      onClose={onClose}
+    >
+      <p>
+        Writes <code>NAME=VALUE</code> lines (for example{" "}
+        <code>ANTHROPIC_API_KEY</code> and <code>ANTHROPIC_BASE_URL</code>) to
+        the swarm secret store. Saving replaces whatever is stored, including
+        text the agent wrote itself. The agent fetches it within two minutes and
+        loads it at its next restart; it wins over the agent's{" "}
+        <code>backendEnvironmentFile</code>. Remove deletes the stored text; an
+        agent whose <code>backendEnvironmentFile</code> has content stores that
+        file again.
+      </p>
+      <form class="link-matrix-account-form" onSubmit={save}>
+        <TextAreaField
+          id="backend-env-text"
+          label="environment file text"
+          value={env}
+          required
+          rows={6}
+          placeholder="ANTHROPIC_API_KEY=…"
+          onInput={setEnv}
+        />
+        <Button variant="primary" type="submit" disabled={busy}>
+          {busy ? "saving…" : "save"}
+        </Button>
+        <Button
+          type="button"
+          disabled={busy}
+          onClick={() =>
+            void send("DELETE", "removed the API-key environment for")
+          }
+        >
+          remove
+        </Button>
+      </form>
+      {result.status === "done" && (
+        <p class="link-matrix-account-result-ok">
+          {result.message} <strong>{agent}</strong>
+        </p>
+      )}
+      {result.status === "error" && (
+        <ApiErrorPanel
+          context="failed to update the API-key environment"
+          problem={result.problem}
+        />
+      )}
+    </Panel>
+  );
+}

frontend/packages/swarm-ui/test/account-kind.test.mjs

@@ -12,4 +12,5 @@ test("a forgejo account is called a forge account, like the link menu does", ()
 test("the other kinds keep their names", () => {
   assert.equal(accountKindLabel("matrix"), "matrix");
   assert.equal(accountKindLabel("github"), "github");
+  assert.equal(accountKindLabel("backend"), "backend");
 });