swarm-ui: give Panel an optional header icon slot

Adds an `icon` prop to Panel (small emoji glyph left of the title,
aria-hidden, chosen per panel with no default) and wires it into every
current Panel caller: hives (bee), create-agent's form (robot) and info
panel (identity card, moved off the info panel's body copy where it
started as a one-off), jobs (puzzle piece), the components gallery
itself (toolbox), and the 404 page (compass). Adds a components-page
demo section and a whimsy-section pointer in the design guide.

Closes: #3508
This commit is contained in:
iris 2026-08-19 17:17:15 +02:00
commit b25aa157df
9 changed files with 49 additions and 15 deletions

View file

@ -127,7 +127,7 @@ export function CreateAgentPage() {
return (
<div class="create-agent-layout">
<div class="create-agent-form-col">
<Panel title="create agent">
<Panel title="create agent" icon="🤖">
<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.
@ -180,11 +180,11 @@ export function CreateAgentPage() {
literal behaviour (deploying the container onto the hive isn't
wired up server-side yet see this file's top comment)
mara's explicit call on this copy: read as finished, not as a
running commentary on partial implementation. */}
<Panel title="what this creates">
<p class="create-agent-info-glyph" aria-hidden="true">
🪪
</p>
running commentary on partial implementation. The 🪪 glyph that
used to sit here as body copy now lives on `Panel`'s own `icon`
prop instead it's what prompted that prop to exist at all
(see Panel.tsx's doc comment) */}
<Panel title="what this creates" icon="🪪">
<p>
Submitting this queues everything a new agent needs: a swarm-level identity, a config
repo on the forge with the operator added as a collaborator, and a container running