swarm-ui: fill create-agent's empty column with an explanatory panel

mara's follow-up on the field-alignment fix: narrowing the form panel
left a lot of bare space next to it, and asked for something that
fills it while helping a new user understand what the page does.

Adds a second panel beside the form (stacks under it on a narrow
viewport) explaining the job chain '/api/agents' actually queues:
an authelia identity, then a forge config repo — no container exists
yet after this page, and deploying one onto the chosen hive is a
separate step that isn't wired up server-side.

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

@@ -1,21 +1,42 @@
 /* <CreateAgentPage> — the create-agent form. Input/button chrome now
    comes from the shared `ui/` form kit (`TextField`/`SelectField`/
    `Button`); this file only owns the page's own layout + copy. Column,
-   not row: with a second field (hive) added, a row layout put fields of
+   not row inside the form itself: with a second field (hive) added, a
-   different natural widths on one baseline and looked misaligned —
+   row layout put fields of different natural widths on one baseline and
-   mara: "make it a col". Reuses the same base16 slots (../theme.css)
+   looked misaligned — mara: "make it a col". Reuses the same base16
-   every other component draws from.
+   slots (../theme.css) every other component draws from.
 
-   `.create-agent-page` caps the panel's own width: `Panel` has no width
+   `.create-agent-page` caps the whole layout's width: `Panel` has no
-   opinion of its own, so left unconstrained it filled `.shell-body`'s
+   width opinion of its own, so left unconstrained a single form panel
-   full 60em column — a lot of bare panel to the right of a ~16em-wide
+   filled `.shell-body`'s full 60em column — a lot of bare panel to the
-   form, the "weird empty space" mara flagged alongside the field
+   right of a ~16em-wide form, the "weird empty space" mara flagged
-   misalignment. 24em roughly matches the fields' own 16em cap
+   alongside the original field misalignment. The follow-up ask was to
-   (../ui/form-field/FormField.css) plus the panel's 1em body padding on
+   fill that space with something that explains the page rather than
-   each side and a little breathing room, so the panel reads as sized to
+   just narrowing it further — `.create-agent-layout` puts the form
-   its content instead of to the page column. */
+   beside a second, explanatory panel instead. `.create-agent-form-col`
+   keeps the same ~24em cap the single-panel version had (fields' own
+   16em cap, ../ui/form-field/FormField.css, plus body padding and a
+   little breathing room); `.create-agent-info-col` takes the rest of
+   the row and wraps under the form on a narrow viewport (`flex-wrap`,
+   no separate media query needed). */
 .create-agent-page {
-  max-width: 24em;
+  max-width: 44em;
+}
+.create-agent-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 1.5em;
+}
+.create-agent-form-col {
+  flex: 0 1 24em;
+}
+.create-agent-info-col {
+  flex: 1 1 16em;
+}
+.create-agent-info-glyph {
+  margin: 0 0 0.5em;
+  font-size: 2em;
 }
 .create-agent-intro {
   margin: 0 0 1.5em;

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

@@ -126,12 +126,16 @@ export function CreateAgentPage() {
 
   return (
     <div class="create-agent-page">
+      <div class="create-agent-layout">
+        <div class="create-agent-form-col">
           <Panel title="create agent">
             <p class="create-agent-intro">
               Create a new agent's swarm-level identity. This only queues the job — check{' '}
               <Link href="/jobs">jobs</Link> to watch it settle.
             </p>
-        {hivesError && <ApiErrorPanel context="failed to load the hive list" problem={hivesError} />}
+            {hivesError && (
+              <ApiErrorPanel context="failed to load the hive list" problem={hivesError} />
+            )}
             <form class="create-agent-form" onSubmit={submit}>
               <TextField
                 id="agent-name"
@@ -154,7 +158,11 @@ export function CreateAgentPage() {
                   !hives ? 'loading…' : hives.length === 0 ? 'no hives configured' : 'select a hive'
                 }
               />
-          <Button variant="primary" type="submit" disabled={result.status === 'submitting' || !hivesReady}>
+              <Button
+                variant="primary"
+                type="submit"
+                disabled={result.status === 'submitting' || !hivesReady}
+              >
                 {result.status === 'submitting' ? 'creating…' : 'create'}
               </Button>
             </form>
@@ -168,5 +176,21 @@ export function CreateAgentPage() {
             )}
           </Panel>
         </div>
+        <div class="create-agent-info-col">
+          <Panel title="what this creates">
+            <p class="create-agent-info-glyph" aria-hidden="true">
+              🪪
+            </p>
+            <p>
+              This queues a small chain of jobs, not a running agent: first an authelia identity
+              at the swarm level, then a config repo on the forge with the operator added as a
+              collaborator. It reserves everything an agent needs before any container exists —
+              actually deploying one onto the hive you pick above is a separate step that isn't
+              wired up yet.
+            </p>
+          </Panel>
+        </div>
+      </div>
+    </div>
   );
 }