From 46a6fc36d89ff64aa55a7efe714dcedf42e2c56b Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Wed, 21 Oct 2026 20:58:54 +0200
Subject: [PATCH] swarm-ui: say when the hive or permission list failed to
 load, and name the permissions group

---
 .../swarm-ui/src/pages/CreateAgentForm.tsx    | 12 +++++++----
 .../swarm-ui/src/ui/form-field/FormField.tsx  | 21 +++++++++++++++----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
index cb3c1f18..4fce32cc 100644
--- a/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
+++ b/frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
@@ -309,7 +309,9 @@ export function CreateAgentForm({
               disabled={!hivesReady}
               placeholder={
                 !hives
-                  ? "loading…"
+                  ? hivesError
+                    ? "could not load hives"
+                    : "loading…"
                   : hives.length === 0
                     ? "no hives configured"
                     : "select a hive"
@@ -340,8 +342,8 @@ export function CreateAgentForm({
                 )}
               </>
             )}
-            <FormField label="permissions" htmlFor="agent-permissions">
-              <div id="agent-permissions">
+            <FormField label="permissions" labelId="agent-permissions-label">
+              <div role="group" aria-labelledby="agent-permissions-label">
                 {catalogue ? (
                   <MultiselectFilterOptions
                     options={catalogue.all}
@@ -349,7 +351,9 @@ export function CreateAgentForm({
                     onToggle={(v) => setSelected((s) => togglePermission(s, v))}
                   />
                 ) : (
-                  <span>loading…</span>
+                  <span>
+                    {catalogueError ? "could not load permissions" : "loading…"}
+                  </span>
                 )}
               </div>
             </FormField>
diff --git a/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx b/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx
index b93f9587..dc6db9e2 100644
--- a/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx
+++ b/frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx
@@ -4,23 +4,36 @@
 // don't each reinvent the label/spacing chrome; a bare labelled `<div>`
 // wrapper has no independent identity worth a `/components` entry of
 // its own.
+//
+// A control a `<label for>` can name (input, select, textarea) passes
+// `htmlFor`. A group of controls (a checkbox set) has no single element to
+// point at: it passes `labelId` instead and puts `role="group"` with
+// `aria-labelledby` on the group.
 import type { ComponentChildren } from "preact";
 import "./FormField.css";
 
 export function FormField({
   label,
   htmlFor,
+  labelId,
   children,
 }: {
   label: string;
-  htmlFor: string;
+  htmlFor?: string;
+  labelId?: string;
   children: ComponentChildren;
 }) {
   return (
     <div class="ui-form-field">
-      <label class="ui-form-field-label" for={htmlFor}>
-        {label}
-      </label>
+      {htmlFor !== undefined ? (
+        <label class="ui-form-field-label" for={htmlFor}>
+          {label}
+        </label>
+      ) : (
+        <span class="ui-form-field-label" id={labelId}>
+          {label}
+        </span>
+      )}
       {children}
     </div>
   );