dashboard: 3-column layout — swarm / 0per4t0r 1n / m3ss4g3s

regroups the 7 stacked sections into three semantic columns
backed by a CSS grid (single column under 1400px, 3 columns
above). column headers are sticky so vertical scrolling
inside a column doesn't lose context.

- SW4RM (left, slightly wider): containers + kept-state +
  spawn-agent form + meta-input update form. all
  swarm-mutating operator knobs live here.
- 0PER4T0R 1N (middle): mind-questions + pending approvals.
  the two things waiting on operator action.
- M3SS4G3S (right): operator-inbox + msg-flow tail + the
  @-mention compose box. broker traffic in one place.

spawn form moves out of renderApprovals into static HTML
under sw4rm; renderApprovals no longer injects it.

cosmetic: per-section h2/divider replaced with smaller cyan
sub-heads + a dashed underline so each column reads as one
cohesive unit instead of seven competing banners. body
max-width grows 70em → 110em to actually use the new
horizontal real estate.

hive-c0re/assets/app.js

@@ -606,23 +606,6 @@
     const root = $('approvals-section');
     root.innerHTML = '';
 
-    // Spawn request form: submitting it queues a Spawn approval that
-    // lands in this same list, so the form belongs here rather than on
-    // the containers list (the agent doesn't exist yet).
-    const spawn = el('form', {
-      method: 'POST', action: '/request-spawn',
-      class: 'spawnform', 'data-async': '',
-    });
-    spawn.append(
-      el('input', {
-        name: 'name',
-        placeholder: 'new agent name (≤9 chars)',
-        maxlength: '9', required: '', autocomplete: 'off',
-      }),
-      el('button', { type: 'submit', class: 'btn btn-spawn' }, '◆ R3QU3ST SP4WN'),
-    );
-    root.append(spawn);
-
     const history = s.approval_history || [];
     const active = localStorage.getItem(APPROVAL_TAB_KEY) || 'pending';
     const tabs = el('div', { class: 'approval-tabs' });

hive-c0re/assets/dashboard.css

@@ -18,11 +18,50 @@ body {
   background: var(--bg);
   color: var(--fg);
   font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
-  max-width: 70em;
+  max-width: 110em;
   margin: 1.5em auto;
   padding: 0 1.5em;
   line-height: 1.6;
 }
+.columns {
+  display: grid;
+  gap: 1.4em;
+  margin-top: 1em;
+}
+@media (min-width: 1400px) {
+  .columns {
+    grid-template-columns: 1.1fr 1fr 1fr;
+    align-items: start;
+  }
+}
+.dash-col {
+  min-width: 0; /* lets grid children shrink instead of overflowing */
+}
+.col-head {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: rgba(30, 30, 46, 0.92);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  margin: 0 0 0.6em;
+  padding: 0.3em 0.5em;
+  font-size: 1em;
+  border-bottom: 1px solid var(--purple-dim);
+}
+.sub-head {
+  color: var(--cyan);
+  font-size: 0.85em;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 1.6em 0 0.4em;
+  padding-bottom: 0.15em;
+  border-bottom: 1px dashed var(--border, var(--purple-dim));
+  text-shadow: 0 0 6px rgba(137, 220, 235, 0.35);
+}
+.dash-col .sub-head:first-of-type {
+  margin-top: 0.4em;
+}
 .banner {
   text-align: center;
   margin: 0 0 1em 0;
@@ -52,7 +91,7 @@ h1, h2 {
   color: var(--purple);
   text-transform: uppercase;
   letter-spacing: 0.15em;
-  margin-top: 2em;
+  margin-top: 1em;
   text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
 }
 .divider {

hive-c0re/assets/index.html

@@ -17,53 +17,83 @@
     <span id="notif-status" class="meta" hidden></span>
   </div>
 
-  <h2>◆ C0NTAINERS ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-  <div id="containers-section">
-    <p class="meta">loading…</p>
-  </div>
+  <div class="columns">
+    <!-- ── SW4RM ─────────────────────────────────────────────────
+         Live + dormant agents, plus the operator-driven knobs that
+         change the swarm itself: spawn-new-agent form, meta flake
+         input bumps.
+    ───────────────────────────────────────────────────────────── -->
+    <section class="dash-col" aria-labelledby="col-swarm">
+      <h2 id="col-swarm" class="col-head">◆ SW4RM ◆</h2>
 
-  <h2>◆ K3PT ST4T3 ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-  <div id="tombstones-section">
-    <p class="meta">loading…</p>
-  </div>
+      <h3 class="sub-head">containers</h3>
+      <div id="containers-section">
+        <p class="meta">loading…</p>
+      </div>
 
-  <h2>◆ M1ND H4S QU3STI0NS ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-  <div id="questions-section">
-    <p class="meta">loading…</p>
-  </div>
+      <h3 class="sub-head">kept state</h3>
+      <div id="tombstones-section">
+        <p class="meta">loading…</p>
+      </div>
 
-  <h2>◆ 0PER4T0R 1NB0X ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-  <div id="inbox-section">
-    <p class="meta">loading…</p>
-  </div>
+      <h3 class="sub-head">spawn agent</h3>
+      <form method="POST" action="/request-spawn" class="spawnform" data-async>
+        <input name="name"
+               placeholder="new agent name (≤9 chars)"
+               maxlength="9" required autocomplete="off">
+        <button type="submit" class="btn btn-spawn">◆ R3QU3ST SP4WN</button>
+      </form>
 
-  <h2>◆ P3NDING APPR0VALS ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-  <div id="approvals-section">
-    <p class="meta">loading…</p>
-  </div>
+      <h3 class="sub-head">update meta inputs</h3>
+      <p class="meta">checkbox per input; submitting runs <code>nix flake update</code> in <code>/meta/</code> and rebuilds affected agents (sequentially).</p>
+      <div id="meta-inputs-section">
+        <p class="meta">loading…</p>
+      </div>
+    </section>
 
-  <h2>◆ M3T4 1NPUTS ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-  <p class="meta">select inputs to <code>nix flake update</code> in <code>/meta/</code>. selected agents rebuild in sequence after the lock bump; manager learns each outcome via the usual <code>rebuilt</code> system event.</p>
-  <div id="meta-inputs-section">
-    <p class="meta">loading…</p>
-  </div>
+    <!-- ── 0PER4T0R 1N ───────────────────────────────────────────
+         Things waiting on the operator to decide — questions the
+         manager surfaced via ask_operator and config-change
+         proposals from the manager's request_apply_commit / spawn.
+    ───────────────────────────────────────────────────────────── -->
+    <section class="dash-col" aria-labelledby="col-operator-in">
+      <h2 id="col-operator-in" class="col-head">◆ 0PER4T0R 1N ◆</h2>
 
-  <h2>◆ MESS4GE FL0W ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-  <p class="meta">live tail — newest at the top. tap on every <code>send</code> / <code>recv</code> through the broker. compose below: <code>@name</code> picks the recipient (sticky until you @ someone else); <code>tab</code> completes.</p>
-  <div id="msgflow" class="msgflow"><span class="meta">connecting…</span></div>
-  <div id="op-compose" class="op-compose">
-    <span id="op-compose-prompt" class="op-compose-prompt">@—&gt;</span>
-    <textarea id="op-compose-input" class="op-compose-input"
-              placeholder="@agent message…  (enter sends, shift+enter newline, tab completes @-mention)"
-              rows="1" autocomplete="off"></textarea>
-    <div id="op-compose-suggest" class="op-compose-suggest" hidden></div>
+      <h3 class="sub-head">m1nd has questions</h3>
+      <div id="questions-section">
+        <p class="meta">loading…</p>
+      </div>
+
+      <h3 class="sub-head">pending approvals</h3>
+      <div id="approvals-section">
+        <p class="meta">loading…</p>
+      </div>
+    </section>
+
+    <!-- ── M3SS4G3S ──────────────────────────────────────────────
+         Broker traffic: the operator's inbox (messages addressed
+         to `operator`) and the live message flow tail. Compose
+         box at the bottom — @name picks the recipient, sticky.
+    ───────────────────────────────────────────────────────────── -->
+    <section class="dash-col" aria-labelledby="col-messages">
+      <h2 id="col-messages" class="col-head">◆ M3SS4G3S ◆</h2>
+
+      <h3 class="sub-head">operator inbox</h3>
+      <div id="inbox-section">
+        <p class="meta">loading…</p>
+      </div>
+
+      <h3 class="sub-head">message flow</h3>
+      <p class="meta">live tail — newest at the top; each row is one broker event. compose below: <code>@name</code> picks the recipient (sticky until you @ someone else); <code>tab</code> completes.</p>
+      <div id="msgflow" class="msgflow"><span class="meta">connecting…</span></div>
+      <div id="op-compose" class="op-compose">
+        <span id="op-compose-prompt" class="op-compose-prompt">@—&gt;</span>
+        <textarea id="op-compose-input" class="op-compose-input"
+                  placeholder="@agent message…  (enter sends, shift+enter newline, tab completes @-mention)"
+                  rows="1" autocomplete="off"></textarea>
+        <div id="op-compose-suggest" class="op-compose-suggest" hidden></div>
+      </div>
+    </section>
   </div>
 
   <footer>