extract dashboard + agent CSS/JS to assets/ (include_str!)

hive-c0re/assets/async_forms.js

@@ -0,0 +1,38 @@
+// Generic async submit + spinner for any `<form data-async>`.
+// Replaces the standard form-POST navigation: button shows a spinner during
+// the request, `data-confirm` runs first (skips the action if cancelled),
+// page reloads on success so the new state is reflected.
+(() => {
+  document.querySelectorAll('form[data-async]').forEach(form => {
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      if (form.dataset.confirm && !confirm(form.dataset.confirm)) return;
+      const btn = form.querySelector('button[type="submit"], button:not([type]), .btn-inline');
+      const original = btn ? btn.innerHTML : '';
+      if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = '<span class="spinner">◐</span>';
+      }
+      try {
+        const resp = await fetch(form.action, {
+          method: form.method || 'POST',
+          body: new FormData(form),
+          redirect: 'manual',
+        });
+        const ok = resp.ok
+          || resp.type === 'opaqueredirect'
+          || (resp.status >= 200 && resp.status < 400);
+        if (!ok) {
+          const text = await resp.text().catch(() => '');
+          alert('action failed: ' + resp.status + (text ? '\n\n' + text : ''));
+          if (btn) { btn.disabled = false; btn.innerHTML = original; }
+          return;
+        }
+        window.location.reload();
+      } catch (err) {
+        alert('action failed: ' + err);
+        if (btn) { btn.disabled = false; btn.innerHTML = original; }
+      }
+    });
+  });
+})();

hive-c0re/assets/dashboard.css

@@ -0,0 +1,209 @@
+:root {
+  --bg: #0a0014;
+  --bg-elev: #18002a;
+  --fg: #e0d4ff;
+  --muted: #6c5c8c;
+  --purple: #cc66ff;
+  --purple-dim: #4a1a6a;
+  --cyan: #00ffff;
+  --pink: #ff3399;
+  --amber: #ffaa00;
+  --green: #00ff88;
+  --red: #ff4466;
+  --border: #2a0a4a;
+}
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
+  max-width: 70em;
+  margin: 1.5em auto;
+  padding: 0 1.5em;
+  line-height: 1.6;
+}
+.banner {
+  color: var(--purple);
+  text-align: center;
+  margin: 0 0 1em 0;
+  font-size: 0.95em;
+  text-shadow: 0 0 6px rgba(204, 102, 255, 0.5);
+  overflow-x: auto;
+}
+h1, h2 {
+  color: var(--purple);
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  margin-top: 2em;
+  text-shadow: 0 0 8px rgba(204, 102, 255, 0.4);
+}
+.divider {
+  color: var(--purple-dim);
+  overflow: hidden;
+  white-space: nowrap;
+  margin-bottom: 0.5em;
+}
+ul { list-style: none; padding-left: 0; }
+li { padding: 0.5em 0; }
+.glyph { color: var(--purple); margin-right: 0.5em; }
+a {
+  color: var(--cyan);
+  text-decoration: none;
+  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
+  font-weight: bold;
+}
+a:hover {
+  color: #fff;
+  text-shadow: 0 0 12px rgba(0, 255, 255, 0.9);
+}
+.role {
+  display: inline-block;
+  margin-left: 0.4em;
+  padding: 0.05em 0.5em;
+  border: 1px solid;
+  border-radius: 2px;
+  font-size: 0.8em;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.role-m1nd { color: var(--pink); border-color: var(--pink); background: rgba(255, 51, 153, 0.1); }
+.role-ag3nt { color: var(--amber); border-color: var(--amber); background: rgba(255, 170, 0, 0.1); }
+.meta { color: var(--muted); font-size: 0.85em; margin-left: 0.4em; }
+.id { color: var(--pink); font-weight: bold; margin-right: 0.4em; }
+.agent { color: var(--amber); font-weight: bold; margin-right: 0.6em; }
+.empty { color: var(--muted); font-style: italic; }
+code {
+  color: var(--amber);
+  background: var(--bg-elev);
+  padding: 0.1em 0.4em;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  font-size: 0.9em;
+}
+.approvals .row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em; }
+.approvals form.inline { display: inline; margin-left: 0.4em; }
+ul form.inline { display: inline-block; }
+.btn {
+  font-family: inherit;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  background: transparent;
+  border: 1px solid;
+  padding: 0.25em 0.8em;
+  cursor: pointer;
+  text-shadow: 0 0 4px currentColor;
+}
+.btn:hover { background: rgba(255,255,255,0.05); text-shadow: 0 0 12px currentColor; }
+.btn-approve { color: var(--green); border-color: var(--green); }
+.btn-deny { color: var(--red); border-color: var(--red); }
+.btn-destroy { color: var(--red); border-color: var(--red); font-size: 0.75em; padding: 0.15em 0.5em; margin-left: 0.6em; }
+.btn-rebuild { color: var(--amber); border-color: var(--amber); font-size: 0.75em; padding: 0.15em 0.5em; margin-left: 0.6em; }
+.btn-talk { color: var(--cyan); border-color: var(--cyan); }
+.btn-spawn { color: var(--amber); border-color: var(--amber); }
+.spawnform { display: flex; gap: 0.6em; align-items: stretch; margin: 0.5em 0; }
+.spawnform input {
+  font-family: inherit;
+  font-size: 1em;
+  background: var(--bg-elev);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  padding: 0.4em 0.6em;
+  flex: 1;
+}
+.spawnform input::placeholder { color: var(--muted); }
+.spawnform input:focus { outline: 1px solid var(--purple); }
+.role-pending { color: var(--amber); border-color: var(--amber); }
+.btn-inline {
+  font-family: inherit;
+  background: transparent;
+  cursor: pointer;
+  margin-left: 0.4em;
+}
+.btn-inline:hover { background: rgba(255, 184, 77, 0.1); }
+.kind {
+  display: inline-block;
+  margin-left: 0.4em;
+  padding: 0.05em 0.5em;
+  border: 1px solid var(--purple-dim);
+  color: var(--purple-dim);
+  border-radius: 2px;
+  font-size: 0.75em;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.kind-spawn { color: var(--amber); border-color: var(--amber); }
+.spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+  color: var(--amber);
+}
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+.talkform {
+  display: flex;
+  gap: 0.6em;
+  align-items: stretch;
+  margin-top: 0.5em;
+}
+.talkform select, .talkform input {
+  font-family: inherit;
+  font-size: 1em;
+  background: var(--bg-elev);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  padding: 0.4em 0.6em;
+}
+.talkform select { color: var(--amber); }
+.talkform input { flex: 1; }
+.talkform input::placeholder { color: var(--muted); }
+.talkform input:focus, .talkform select:focus { outline: 1px solid var(--purple); }
+details { margin-top: 0.5em; }
+summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+summary:hover { color: var(--purple); }
+.diff {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  padding: 0.8em;
+  margin-top: 0.4em;
+  overflow-x: auto;
+  font-size: 0.85em;
+  line-height: 1.4;
+  color: var(--muted);
+  white-space: pre;
+}
+.diff span { display: block; }
+.diff .diff-add  { color: var(--green); }
+.diff .diff-del  { color: var(--red); }
+.diff .diff-hunk { color: var(--cyan); }
+.diff .diff-file { color: var(--purple); font-weight: bold; }
+.diff .diff-ctx  { color: var(--fg); }
+.msgflow {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  padding: 0.8em;
+  font-size: 0.85em;
+  line-height: 1.5;
+  max-height: 32em;
+  overflow-y: auto;
+}
+.msgrow { display: grid; grid-template-columns: auto auto auto auto auto 1fr; gap: 0.6em; align-items: baseline; padding: 0.1em 0; }
+.msgrow.sent .msg-arrow { color: var(--cyan); }
+.msgrow.delivered .msg-arrow { color: var(--green); }
+.msg-ts { color: var(--muted); font-size: 0.85em; }
+.msg-arrow { font-weight: bold; }
+.msg-from { color: var(--amber); }
+.msg-sep { color: var(--muted); }
+.msg-to { color: var(--pink); }
+.msg-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
+footer {
+  margin-top: 4em;
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.9em;
+}
+footer a { color: var(--purple); }

hive-c0re/assets/msg_flow.js

@@ -0,0 +1,30 @@
+(() => {
+  const flow = document.getElementById('msgflow');
+  if (!flow) return;
+  flow.innerHTML = '';
+  const es = new EventSource('/messages/stream');
+  const MAX_ROWS = 200;
+  const tsFmt = (n) => new Date(n * 1000).toISOString().slice(11, 19);
+  const esc = (s) => s.replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
+  es.onmessage = (e) => {
+    let m;
+    try { m = JSON.parse(e.data); } catch { return; }
+    const row = document.createElement('div');
+    row.className = 'msgrow ' + m.kind;
+    const kind = m.kind === 'sent' ? '→' : '✓';
+    row.innerHTML =
+      '<span class="msg-ts">' + tsFmt(m.at) + '</span>' +
+      '<span class="msg-arrow">' + kind + '</span>' +
+      '<span class="msg-from">' + esc(m.from) + '</span>' +
+      '<span class="msg-sep">→</span>' +
+      '<span class="msg-to">' + esc(m.to) + '</span>' +
+      '<span class="msg-body">' + esc(m.body) + '</span>';
+    flow.insertBefore(row, flow.firstChild);
+    while (flow.childNodes.length > MAX_ROWS) flow.removeChild(flow.lastChild);
+  };
+  es.onerror = () => {
+    flow.insertBefore(Object.assign(document.createElement('div'), {
+      className: 'msgrow meta', textContent: '[connection lost — retrying]'
+    }), flow.firstChild);
+  };
+})();