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

This reverts commit 74ba8a63e1.
This commit is contained in:
müde 2026-05-16 03:54:02 +02:00
parent 40938d8b54
commit fe8fb15f8f
3 changed files with 60 additions and 112 deletions

View file

@ -606,6 +606,23 @@
const root = $('approvals-section'); const root = $('approvals-section');
root.innerHTML = ''; 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 history = s.approval_history || [];
const active = localStorage.getItem(APPROVAL_TAB_KEY) || 'pending'; const active = localStorage.getItem(APPROVAL_TAB_KEY) || 'pending';
const tabs = el('div', { class: 'approval-tabs' }); const tabs = el('div', { class: 'approval-tabs' });

View file

@ -18,50 +18,11 @@ body {
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace; font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
max-width: 110em; max-width: 70em;
margin: 1.5em auto; margin: 1.5em auto;
padding: 0 1.5em; padding: 0 1.5em;
line-height: 1.6; 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 { .banner {
text-align: center; text-align: center;
margin: 0 0 1em 0; margin: 0 0 1em 0;
@ -91,7 +52,7 @@ h1, h2 {
color: var(--purple); color: var(--purple);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.15em; letter-spacing: 0.15em;
margin-top: 1em; margin-top: 2em;
text-shadow: 0 0 8px rgba(203, 166, 247, 0.4); text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
} }
.divider { .divider {

View file

@ -17,83 +17,53 @@
<span id="notif-status" class="meta" hidden></span> <span id="notif-status" class="meta" hidden></span>
</div> </div>
<div class="columns"> <h2>◆ C0NTAINERS ◆</h2>
<!-- ── SW4RM ───────────────────────────────────────────────── <div class="divider">══════════════════════════════════════════════════════════════</div>
Live + dormant agents, plus the operator-driven knobs that <div id="containers-section">
change the swarm itself: spawn-new-agent form, meta flake <p class="meta">loading…</p>
input bumps. </div>
───────────────────────────────────────────────────────────── -->
<section class="dash-col" aria-labelledby="col-swarm">
<h2 id="col-swarm" class="col-head">◆ SW4RM ◆</h2>
<h3 class="sub-head">containers</h3> <h2>◆ K3PT ST4T3 ◆</h2>
<div id="containers-section"> <div class="divider">══════════════════════════════════════════════════════════════</div>
<p class="meta">loading…</p> <div id="tombstones-section">
</div> <p class="meta">loading…</p>
</div>
<h3 class="sub-head">kept state</h3> <h2>◆ M1ND H4S QU3STI0NS ◆</h2>
<div id="tombstones-section"> <div class="divider">══════════════════════════════════════════════════════════════</div>
<p class="meta">loading…</p> <div id="questions-section">
</div> <p class="meta">loading…</p>
</div>
<h3 class="sub-head">spawn agent</h3> <h2>◆ 0PER4T0R 1NB0X ◆</h2>
<form method="POST" action="/request-spawn" class="spawnform" data-async> <div class="divider">══════════════════════════════════════════════════════════════</div>
<input name="name" <div id="inbox-section">
placeholder="new agent name (≤9 chars)" <p class="meta">loading…</p>
maxlength="9" required autocomplete="off"> </div>
<button type="submit" class="btn btn-spawn">◆ R3QU3ST SP4WN</button>
</form>
<h3 class="sub-head">update meta inputs</h3> <h2>◆ P3NDING APPR0VALS ◆</h2>
<p class="meta">checkbox per input; submitting runs <code>nix flake update</code> in <code>/meta/</code> and rebuilds affected agents (sequentially).</p> <div class="divider">══════════════════════════════════════════════════════════════</div>
<div id="meta-inputs-section"> <div id="approvals-section">
<p class="meta">loading…</p> <p class="meta">loading…</p>
</div> </div>
</section>
<!-- ── 0PER4T0R 1N ─────────────────────────────────────────── <h2>◆ M3T4 1NPUTS ◆</h2>
Things waiting on the operator to decide — questions the <div class="divider">══════════════════════════════════════════════════════════════</div>
manager surfaced via ask_operator and config-change <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>
proposals from the manager's request_apply_commit / spawn. <div id="meta-inputs-section">
───────────────────────────────────────────────────────────── --> <p class="meta">loading…</p>
<section class="dash-col" aria-labelledby="col-operator-in"> </div>
<h2 id="col-operator-in" class="col-head">◆ 0PER4T0R 1N ◆</h2>
<h3 class="sub-head">m1nd has questions</h3> <h2>◆ MESS4GE FL0W ◆</h2>
<div id="questions-section"> <div class="divider">══════════════════════════════════════════════════════════════</div>
<p class="meta">loading…</p> <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> <div id="msgflow" class="msgflow"><span class="meta">connecting…</span></div>
<div id="op-compose" class="op-compose">
<h3 class="sub-head">pending approvals</h3> <span id="op-compose-prompt" class="op-compose-prompt">@—&gt;</span>
<div id="approvals-section"> <textarea id="op-compose-input" class="op-compose-input"
<p class="meta">loading…</p> placeholder="@agent message… (enter sends, shift+enter newline, tab completes @-mention)"
</div> rows="1" autocomplete="off"></textarea>
</section> <div id="op-compose-suggest" class="op-compose-suggest" hidden></div>
<!-- ── 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> </div>
<footer> <footer>