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

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

@@ -88,7 +88,7 @@ function RefreshIntervalPickerSample() {
 
 export function ComponentsPage() {
   return (
-    <Panel title="components">
+    <Panel title="components" icon="🧰">
       <p class="components-intro">
         Every primitive in <code>src/ui/</code>, shown in each mode it supports. Sample data
         only — nothing here calls the API.
@@ -101,6 +101,11 @@ export function ComponentsPage() {
         <Sample label="without title">
           <Panel>panel body content, no title</Panel>
         </Sample>
+        <Sample label="with icon (per panel, no default — see the doc comment)">
+          <Panel title="example title" icon="✨">
+            panel body content
+          </Panel>
+        </Sample>
         <Sample label="with actions (e.g. HivesPage's refresh picker)">
           <Panel
             title="example title"

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

@@ -36,10 +36,6 @@
   flex: 1 1 0;
   min-width: 16em;
 }
-.create-agent-info-glyph {
-  margin: 0 0 0.5em;
-  font-size: 2em;
-}
 .create-agent-intro {
   margin: 0 0 1.5em;
   color: var(--muted);

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

@@ -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

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

@@ -115,6 +115,7 @@ export function HivesPage() {
   return (
     <Panel
       title="hives"
+      icon="🐝"
       actions={<RefreshIntervalPicker id="hives-refresh" value={intervalMs} onChange={setIntervalMs} />}
     >
       {error ? <ApiErrorPanel context="failed to load the hive roster" problem={error} /> : null}

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

@@ -18,7 +18,7 @@ import './JobsPage.css';
 
 export function JobsPage() {
   return (
-    <Panel title="jobs">
+    <Panel title="jobs" icon="🧩">
       <JobqRollup endpoint="/api/jobq/rollup" />
       <JobqGraph endpoint="/api/jobq/graph" />
     </Panel>