diff --git a/frontend/packages/swarm-ui/src/App.tsx b/frontend/packages/swarm-ui/src/App.tsx index 2a33b3d7..e41820f6 100644 --- a/frontend/packages/swarm-ui/src/App.tsx +++ b/frontend/packages/swarm-ui/src/App.tsx @@ -2,8 +2,8 @@ // page component under `./pages/`; this file just maps paths to them. import { Route, Switch } from 'wouter-preact'; import { Shell } from './shell/Shell.js'; -import { AgentsPage } from './pages/AgentsPage.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'; @@ -21,7 +21,7 @@ export function App() { - + diff --git a/frontend/packages/swarm-ui/src/pages/AgentsPage.css b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css similarity index 66% rename from frontend/packages/swarm-ui/src/pages/AgentsPage.css rename to frontend/packages/swarm-ui/src/pages/CreateAgentPage.css index cbb36827..eeabde39 100644 --- a/frontend/packages/swarm-ui/src/pages/AgentsPage.css +++ b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.css @@ -1,27 +1,27 @@ -/* — the create-agent form. First form in this package, so - its input/button chrome lives here rather than in `ui/` — see the +/* — 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. */ -.agents-intro { +.create-agent-intro { margin: 0 0 1.5em; color: var(--muted); } -.agents-form { +.create-agent-form { display: flex; align-items: flex-end; gap: 0.75em; flex-wrap: wrap; } -.agents-field { +.create-agent-field { display: flex; flex-direction: column; gap: 0.3em; } -.agents-label { +.create-agent-label { font-size: 0.85em; color: var(--muted); } -.agents-input { +.create-agent-input { background: var(--bg); color: var(--fg); border: 1px solid var(--purple-dim); @@ -30,7 +30,7 @@ font: inherit; min-width: 16em; } -.agents-submit { +.create-agent-submit { background: var(--purple-dim); color: var(--fg); border: none; @@ -39,16 +39,16 @@ font: inherit; cursor: pointer; } -.agents-submit:disabled { +.create-agent-submit:disabled { opacity: 0.6; cursor: default; } -.agents-result { +.create-agent-result { margin-top: 1em; } -.agents-result-ok { +.create-agent-result-ok { color: var(--green); } -.agents-result-error { +.create-agent-result-error { color: var(--red); } diff --git a/frontend/packages/swarm-ui/src/pages/AgentsPage.tsx b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx similarity index 54% rename from frontend/packages/swarm-ui/src/pages/AgentsPage.tsx rename to frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx index c391025c..c06ae2eb 100644 --- a/frontend/packages/swarm-ui/src/pages/AgentsPage.tsx +++ b/frontend/packages/swarm-ui/src/pages/CreateAgentPage.tsx @@ -1,21 +1,30 @@ -// — 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). +// — 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 `AgentsPage.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 +// 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 './AgentsPage.css'; +import './CreateAgentPage.css'; interface CreateAgentResponse { node_id: number; @@ -33,7 +42,7 @@ type SubmitState = // 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 AgentsPage() { +export function CreateAgentPage() { const [name, setName] = useState(''); const [result, setResult] = useState({ status: 'idle' }); @@ -56,19 +65,19 @@ export function AgentsPage() { } return ( - -

+ +

Create a new agent's swarm-level identity. This only queues the job — check{' '} jobs to watch it settle.

-
-
-