dashboard: reorder sections into grouped sequence

after reverting the 3-column attempt (74ba8a6), keep the single-column layout but put related sections adjacent: swarm: containers → kept-state → meta-inputs decisions: questions → approvals messages: operator-inbox → message-flow + compose this is a free improvement — the operator scrolls through one logical group at a time instead of bouncing between swarm / decisions / messages mid-page. follow-up improvements (collapsing rarely-active sections, multi-column at wide viewports done less aggressively) captured in TODO under 'Dashboard layout overhaul'.
Revert "dashboard: 3-column layout — swarm / 0per4t0r 1n / m3ss4g3s"
2026-05-16 03:54:53 +02:00 · 2026-05-16 03:54:02 +02:00 · 2026-05-16 03:49:49 +02:00
5 changed files with 132 additions and 141 deletions
--- a/TODO.md
+++ b/TODO.md
@ -57,22 +57,41 @@ Pick anything from here when relevant. Cross-cutting design notes live in
  Repro: manager calls `ask_operator`, tool result is
  `question queued (id=N)` (so the row is in sqlite), but the
  M1ND H4S QU3STI0NS section keeps showing "no pending
-  questions". Last seen with id=5. Suspected paths:
-  - `OperatorQuestions::pending()` returns Err and the
-    `unwrap_or_default()` in `api_state` hides it. Surface the
-    error (warn-log) and check.
-  - serialization: a new field in `OpQuestion` (e.g.
-    `deadline_at: Option<i64>`) deserializes wrong against an
-    old row whose columns don't match the new SELECT order →
-    `row.get(N)?` panics for that row, the whole iterator
-    errors, `pending()` returns Err. Diagnose by curl
-    `/api/state | jq '.questions'` and compare with sqlite
-    counts.
-  - dashboard JS swallows a render error. Open browser console
-    and look for exceptions during `renderQuestions`.
+  questions". Last seen with id=5. Diagnostic step landed:
+  `api_state` now warn-logs (target=`api_state`) when any of
+  its source queries fail instead of silently
+  `unwrap_or_default`-ing — next repro should print the
+  underlying error in journald and tell us whether this is
+  sqlite (likely `OperatorQuestions::pending()` row-decode
+  panic on a migrated column) or dashboard-JS-side
+  (`renderQuestions` exception). Re-investigate with the new
+  log once the bug fires.

 ## UI / UX

+- **Dashboard layout overhaul.** A 3-column attempt (swarm
+  / 0per4t0r 1n / m3ss4g3s) landed + was reverted in 74ba8a6
+  — looked worse in practice (sticky col-heads fighting the
+  banner, sub-heads too small, columns too narrow for the
+  container rows). Sections are now ordered semantically in
+  a single column (swarm bits first, then decisions, then
+  messages) which is a no-cost improvement. The bigger
+  restructure is still worth doing; next attempt should:
+  - keep current widths usable (don't crunch container
+    rows < ~36em — they have a lot inline)
+  - default the heavy-but-rare sections (kept-state, meta-
+    inputs, msg-flow history) into a collapsed `<details>`
+    so they don't dominate when empty
+  - drop the per-section banner divider lines in favour of
+    something quieter (a single border-top on the h2?)
+  - try a *masonry-ish* layout (CSS `grid-template-rows:
+    masonry` once browsers support it; or just two columns
+    where messages floats on the right at wide viewports
+    while the rest stacks left). avoid sticky headers — they
+    fought the page banner last time.
+
+
+
 - **Web UI for config repos + meta deploy log.** Browse
  per-agent proposed / applied tags
  (`proposal/* / approved/* / building/* / deployed/* /
--- a/hive-c0re/assets/app.js
+++ b/hive-c0re/assets/app.js
@ -606,6 +606,23 @@
    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' });
--- a/hive-c0re/assets/dashboard.css
+++ b/hive-c0re/assets/dashboard.css
@ -18,50 +18,11 @@ body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
-  max-width: 110em;
+  max-width: 70em;
  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;
@ -91,7 +52,7 @@ h1, h2 {
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.15em;
-  margin-top: 1em;
+  margin-top: 2em;
  text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
 }
 .divider {
--- a/hive-c0re/assets/index.html
+++ b/hive-c0re/assets/index.html
@ -17,83 +17,57 @@
    <span id="notif-status" class="meta" hidden></span>
  </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>
+  <!-- swarm: live containers, dormant state, meta input bumps that
+       affect the whole swarm. -->
+  <h2>◆ C0NTAINERS ◆</h2>
+  <div class="divider">══════════════════════════════════════════════════════════════</div>
+  <div id="containers-section">
+    <p class="meta">loading…</p>
+  </div>

-      <h3 class="sub-head">containers</h3>
-      <div id="containers-section">
-        <p class="meta">loading…</p>
-      </div>
+  <h2>◆ K3PT ST4T3 ◆</h2>
+  <div class="divider">══════════════════════════════════════════════════════════════</div>
+  <div id="tombstones-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>◆ 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>

-      <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>
+  <!-- operator decisions: things waiting on you. -->
+  <h2>◆ M1ND H4S QU3STI0NS ◆</h2>
+  <div class="divider">══════════════════════════════════════════════════════════════</div>
+  <div id="questions-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>◆ P3NDING APPR0VALS ◆</h2>
+  <div class="divider">══════════════════════════════════════════════════════════════</div>
+  <div id="approvals-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>
+  <!-- messages: broker traffic + the compose box that produces it. -->
+  <h2>◆ 0PER4T0R 1NB0X ◆</h2>
+  <div class="divider">══════════════════════════════════════════════════════════════</div>
+  <div id="inbox-section">
+    <p class="meta">loading…</p>
+  </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>
+  <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>
  </div>

  <footer>
--- a/hive-c0re/src/dashboard.rs
+++ b/hive-c0re/src/dashboard.rs
@ -239,6 +239,25 @@ struct ApprovalView {
    diff_html: Option<String>,
 }

+/// Replace silent `.unwrap_or_default()` on the data sources behind
+/// `/api/state` so that whichever query degrades surfaces in journald
+/// instead of leaving the operator staring at an empty list. The
+/// dashboard still degrades to a sensible default value; the warn
+/// is just the diagnostic breadcrumb the old code swallowed.
+fn log_default<T, E>(what: &str, result: std::result::Result<T, E>) -> T
+where
+    T: Default,
+    E: std::fmt::Debug,
+{
+    match result {
+        Ok(v) => v,
+        Err(e) => {
+            tracing::warn!(target: "api_state", source = %what, error = ?e, "snapshot source failed; using default");
+            T::default()
+        }
+    }
+}
+
 async fn api_state(headers: HeaderMap, State(state): State<AppState>) -> axum::Json<StateSnapshot> {
    let host = headers
        .get("host")
@ -246,35 +265,36 @@ async fn api_state(headers: HeaderMap, State(state): State<AppState>) -> axum::J
        .unwrap_or("localhost");
    let hostname = host.split(':').next().unwrap_or(host).to_owned();

-    let raw_containers = lifecycle::list().await.unwrap_or_default();
+    let raw_containers = log_default("nixos-container list", lifecycle::list().await);
    let current_rev = crate::auto_update::current_flake_rev(&state.coord.hyperhive_flake);
    let transient_snapshot = state.coord.transient_snapshot();
    let pending_approvals = gc_orphans(
        &state.coord,
-        state.coord.approvals.pending().unwrap_or_default(),
+        log_default("approvals.pending", state.coord.approvals.pending()),
    );

    let (containers, any_stale) =
        build_container_views(&raw_containers, current_rev.as_deref(), &transient_snapshot).await;
    let transients = build_transient_views(&raw_containers, &transient_snapshot);
    let approvals = build_approval_views(pending_approvals).await;
-    let approval_history = state
-        .coord
-        .approvals
-        .recent_resolved(30)
-        .unwrap_or_default()
-        .into_iter()
-        .map(history_view)
-        .collect();
+    let approval_history = log_default(
+        "approvals.recent_resolved",
+        state.coord.approvals.recent_resolved(30),
+    )
+    .into_iter()
+    .map(history_view)
+    .collect();
    let tombstones = build_tombstone_views(&state.coord, &containers, &transient_snapshot);
    let port_conflicts = build_port_conflicts(&containers);

-    let operator_inbox = state
-        .coord
-        .broker
-        .recent_for(hive_sh4re::OPERATOR_RECIPIENT, 50)
-        .unwrap_or_default();
-    let questions = state.coord.questions.pending().unwrap_or_default();
+    let operator_inbox = log_default(
+        "broker.recent_for(operator)",
+        state
+            .coord
+            .broker
+            .recent_for(hive_sh4re::OPERATOR_RECIPIENT, 50),
+    );
+    let questions = log_default("questions.pending", state.coord.questions.pending());

    axum::Json(StateSnapshot {
        hostname,