swarm-ui: move create-agent page off /agents, rename to CreateAgentPage

mara: the route should reflect creating an agent, and stay separate
from a future agent list page. Renamed AgentsPage -> CreateAgentPage
(file, component, css classes) and moved the route from /agents to
/create-agent - flat, not /agents/new, since index.html's relative
asset links only resolve correctly one path segment deep (filed
separately as a real bug, not fixed here). Leaves the bare /agents
path free for a future roster page.

frontend/packages/swarm-ui/src/App.tsx

@@ -3,6 +3,7 @@
 import { Route, Switch } from 'wouter-preact';
 import { Shell } from './shell/Shell.js';
 import { ComponentsPage } from './pages/ComponentsPage.js';
+import { CreateAgentPage } from './pages/CreateAgentPage.js';
 import { JobsPage } from './pages/JobsPage.js';
 import { OverviewPage } from './pages/OverviewPage.js';
 import { Panel } from './ui/panel/Panel.js';
@@ -20,6 +21,7 @@ export function App() {
     <Shell>
       <Switch>
         <Route path="/" component={OverviewPage} />
+        <Route path="/create-agent" component={CreateAgentPage} />
         <Route path="/jobs" component={JobsPage} />
         <Route path="/components" component={ComponentsPage} />
         <Route component={NotFound} />

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

@@ -0,0 +1,54 @@
+/* <CreateAgentPage> — the create-agent form. First form in this package,
+   so its input/button chrome lives here rather than in `ui/` — see the
+   component's own comment for why. Reuses the same base16 slots
+   (../theme.css) every other component draws from. */
+.create-agent-intro {
+  margin: 0 0 1.5em;
+  color: var(--muted);
+}
+.create-agent-form {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.75em;
+  flex-wrap: wrap;
+}
+.create-agent-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+}
+.create-agent-label {
+  font-size: 0.85em;
+  color: var(--muted);
+}
+.create-agent-input {
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--purple-dim);
+  border-radius: 0.3em;
+  padding: 0.4em 0.6em;
+  font: inherit;
+  min-width: 16em;
+}
+.create-agent-submit {
+  background: var(--purple-dim);
+  color: var(--fg);
+  border: none;
+  border-radius: 0.3em;
+  padding: 0.5em 1.2em;
+  font: inherit;
+  cursor: pointer;
+}
+.create-agent-submit:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.create-agent-result {
+  margin-top: 1em;
+}
+.create-agent-result-ok {
+  color: var(--green);
+}
+.create-agent-result-error {
+  color: var(--red);
+}

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

@@ -0,0 +1,105 @@
+// <CreateAgentPage> — minimal agent creation form, POSTs to
+// swarm-controller's `POST /api/agents`. That endpoint only queues a
+// `CreateIdentity` job and returns its node id — the identity isn't
+// guaranteed to exist yet when this page gets a response — so this
+// page shows the queued confirmation and links to the Jobs page to
+// watch it settle, rather than duplicating JobqGraph's per-node
+// polling here. Scope matches the originating issue exactly: name
+// field only, no forge/deploy options (those aren't wired server-side
+// yet either).
+//
+// Lives at `/create-agent`, not `/agents` — a future agent *roster*
+// (listing existing agents) is the natural owner of the bare `/agents`
+// path, and this creation form is a distinct action from that list,
+// not a variant of it. Flat, not `/agents/new`: `index.html`'s asset
+// links are relative (`static/main.js`), which only resolve correctly
+// one path segment deep — a real bug, filed separately rather than
+// fixed here, but reason enough to avoid a nested route today.
+//
+// First real form in this package — no shared form kit exists yet, so
+// the input/button styling below is scoped to `CreateAgentPage.css`
+// rather than promoted into `ui/`. Promote the day a second page needs
+// one, same "don't build ahead of a second caller" rule `Panel`'s own
+// comment states.
+import { useState } from 'preact/hooks';
+import { Link } from 'wouter-preact';
+import { Panel } from '../ui/panel/Panel.js';
+import './CreateAgentPage.css';
+
+interface CreateAgentResponse {
+  node_id: number;
+}
+
+type SubmitState =
+  | { status: 'idle' }
+  | { status: 'submitting' }
+  | { status: 'done'; nodeId: number }
+  | { status: 'error'; message: string };
+
+// Client-side mirror of `hive_types::Ident` (1-63 chars of `[a-z0-9-]`) —
+// a `pattern` hint only, not a substitute for the server's own
+// validation; a name this rejects would fail server-side anyway, so
+// catching it before a round-trip is a pure UX win, not a new gate.
+const NAME_PATTERN = '[a-z0-9-]{1,63}';
+
+export function CreateAgentPage() {
+  const [name, setName] = useState('');
+  const [result, setResult] = useState<SubmitState>({ status: 'idle' });
+
+  async function submit(e: Event) {
+    e.preventDefault();
+    setResult({ status: 'submitting' });
+    try {
+      const r = await fetch('/api/agents', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name }),
+      });
+      if (!r.ok) throw new Error((await r.text()) || `http ${r.status}`);
+      const data = (await r.json()) as CreateAgentResponse;
+      setResult({ status: 'done', nodeId: data.node_id });
+      setName('');
+    } catch (err) {
+      setResult({ status: 'error', message: String(err) });
+    }
+  }
+
+  return (
+    <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>
+      <form class="create-agent-form" onSubmit={submit}>
+        <div class="create-agent-field">
+          <label class="create-agent-label" for="agent-name">
+            agent name
+          </label>
+          <input
+            id="agent-name"
+            class="create-agent-input"
+            type="text"
+            value={name}
+            pattern={NAME_PATTERN}
+            title="1-63 chars: lowercase letters, digits, hyphens"
+            required
+            onInput={(e) => setName(e.currentTarget.value)}
+          />
+        </div>
+        <button class="create-agent-submit" type="submit" disabled={result.status === 'submitting'}>
+          {result.status === 'submitting' ? 'creating…' : 'create'}
+        </button>
+      </form>
+      {result.status === 'done' && (
+        <p class="create-agent-result create-agent-result-ok">
+          queued as job node #{result.nodeId} — <Link href="/jobs">watch it in jobs</Link>
+        </p>
+      )}
+      {result.status === 'error' && (
+        <p class="create-agent-result create-agent-result-error">
+          failed to queue: {result.message}
+        </p>
+      )}
+    </Panel>
+  );
+}

frontend/packages/swarm-ui/src/shell/Shell.tsx

@@ -19,6 +19,7 @@ import './Shell.css';
 
 const NAV_ITEMS: { href: string; label: string }[] = [
   { href: '/', label: 'overview' },
+  { href: '/create-agent', label: 'new agent' },
   { href: '/jobs', label: 'jobs' },
   { href: '/components', label: 'components' },
 ];