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

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