agent ui: input lives in terminal section, banner shimmer on activity

agent page restructure:
- send form moves into the terminal panel as a prompt-style row beneath
  the live tail (status line stays above so it still reads as a header).
- live panel + prompt share a single bordered 'terminal-wrap' box.
- harness-alive / login-state status lines drop their decorative ascii
  bookends; just a leading dot/glyph remains.
- banner gradient is now a real css gradient with a shimmer animation
  toggled by an .active class. turn_start adds it, turn_end removes it.
  dashboard side mirrors this: each broker sse event nudges a 4s
  shimmer window.
- dashboard container rows drop their static ▓█▓▒░ / ▒░▒░░ glyph
  prefixes; the role chips already disambiguate m1nd vs ag3nt.
- empty-state placeholders drop the ▓ bookends.

terminal pre-fill: hive-ag3nt::events::Bus grows a 500-event ring
buffer; new GET /events/history endpoint returns it. The agent JS
fetches history before opening the SSE stream so opening the page mid-
turn shows the last N events instead of a blank panel. The replay
walks turn_start/turn_end pairs to seed the banner-active state
correctly if a turn was still open.

hive-ag3nt/assets/agent.css

@@ -21,12 +21,29 @@ body {
   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(203, 166, 247, 0.55), 0 0 14px rgba(203, 166, 247, 0.25);
   overflow-x: auto;
+  background: linear-gradient(
+    90deg,
+    var(--purple-dim) 0%,
+    var(--purple) 50%,
+    var(--purple-dim) 100%
+  );
+  background-size: 200% 100%;
+  background-position: 50% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 0 6px rgba(203, 166, 247, 0.45));
+}
+.banner.active {
+  animation: banner-shimmer 1.8s linear infinite;
+}
+@keyframes banner-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -100% 0; }
 }
 h2, h3 {
   color: var(--purple);
@@ -34,12 +51,6 @@ h2, h3 {
   letter-spacing: 0.15em;
   text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
 }
-.divider {
-  color: var(--purple-dim);
-  overflow: hidden;
-  white-space: nowrap;
-  margin-bottom: 0.5em;
-}
 .meta { color: var(--muted); font-size: 0.85em; }
 .status-online { color: var(--green); text-shadow: 0 0 6px rgba(166, 227, 161, 0.55); }
 .status-needs-login { color: var(--amber); text-shadow: 0 0 6px rgba(250, 179, 135, 0.55); }
@@ -113,20 +124,59 @@ pre.diff {
   word-break: break-all;
   max-height: 30em;
 }
-/* Terminal-ish look for the live panel. Crust as bg (almost-black),
+/* Terminal-ish wrapper holding the live output + prompt input as one
-   slightly inset, mauve phosphor glow. */
+   unit. Crust as bg (almost-black), slightly inset, mauve phosphor glow. */
-.live.terminal {
+.terminal-wrap {
   background: #11111b;
   border: 1px solid var(--purple-dim);
   box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7);
   border-radius: 4px;
-  padding: 0.8em 1em;
-  overflow-y: auto;
-  max-height: 32em;
   font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
   font-size: 0.92em;
   color: #cdd6f4;
+  margin-top: 0.6em;
 }
+.live.terminal {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0.8em 1em 0.4em;
+  overflow-y: auto;
+  max-height: 32em;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+.term-input { padding: 0.4em 1em 0.8em; }
+.term-input .sendform-term {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  border-top: 1px dashed var(--purple-dim);
+  padding-top: 0.5em;
+}
+.term-input .prompt {
+  color: var(--green);
+  text-shadow: 0 0 6px rgba(166, 227, 161, 0.6);
+  user-select: none;
+  flex: 0 0 auto;
+}
+.term-input input {
+  flex: 1;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 1em;
+  padding: 0.2em 0;
+  caret-color: var(--green);
+}
+.term-input input::placeholder { color: var(--muted); }
+.term-input .submit-hint { color: var(--muted); font-size: 0.8em; flex: 0 0 auto; }
+.term-input.disabled .prompt { color: var(--muted); text-shadow: none; }
+.term-input.disabled input { color: var(--muted); }
 .live {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid var(--purple-dim);

hive-ag3nt/assets/app.js

@@ -82,29 +82,15 @@
     document.title = `${label} // hyperhive`;
   }
 
-  function renderOnline(label, root) {
+  function renderOnline(_label, root) {
     root.append(
-      el('p', { class: 'status-online' }, '▓█▓▒░ harness alive — turn loop running ▓█▓▒░'),
+      el('p', { class: 'status-online' }, '● harness alive — turn loop running'),
     );
-    const form = el('form', {
-      action: '/send', method: 'POST', class: 'sendform', 'data-async': '',
-    });
-    form.append(
-      el('input', {
-        name: 'body', placeholder: `message ${label} as operator…`,
-        required: '', autocomplete: 'off',
-      }),
-      el('button', { type: 'submit', class: 'btn btn-send' }, '◆ S3ND'),
-    );
-    root.append(form);
-    root.append(el('p', { class: 'meta', html:
-      'enqueued with <code>from: operator</code> on this agent\'s inbox; the next turn picks it up.',
-    }));
   }
 
   function renderNeedsLoginIdle(root) {
     root.append(
-      el('p', { class: 'status-needs-login' }, '▓█▓▒░ NEEDS L0G1N ▓█▓▒░'),
+      el('p', { class: 'status-needs-login' }, '◌ NEEDS L0G1N'),
       el('p', { html:
         'No Claude session in <code>~/.claude/</code>. The harness is up but the turn loop is paused until you log in.',
       }),
@@ -122,7 +108,7 @@
   }
 
   function renderLoginInProgress(s, root) {
-    root.append(el('p', { class: 'status-needs-login' }, '▓█▓▒░ L0G1N 1N PR0GRESS ▓█▓▒░'));
+    root.append(el('p', { class: 'status-needs-login' }, '◌ L0G1N 1N PR0GRESS'));
     if (s.url) {
       const link = el('a', {
         href: s.url, target: '_blank', rel: 'noreferrer',
@@ -168,12 +154,56 @@
   let lastStatus = null;
   let lastOutputLen = -1;
   let pollTimer = null;
+  let termInputRendered = false;
+
+  function renderTermInput(label, online) {
+    const slot = $('term-input');
+    if (!slot) return;
+    if (!termInputRendered) {
+      slot.innerHTML = '';
+      const form = el('form', {
+        action: '/send', method: 'POST',
+        class: 'sendform-term', 'data-async': '',
+      });
+      form.append(
+        el('span', { class: 'prompt' }, 'operator@' + label + ' ▸'),
+        el('input', {
+          name: 'body', placeholder: 'message ' + label + '…',
+          required: '', autocomplete: 'off',
+        }),
+        el('span', { class: 'submit-hint' }, 'enter ↵'),
+      );
+      slot.append(form);
+      termInputRendered = true;
+    }
+    slot.classList.toggle('disabled', !online);
+    const input = slot.querySelector('input');
+    if (input) input.disabled = !online;
+  }
+
+  // Track banner activity by reference-counting in-flight turns. A turn
+  // can begin while the previous turn_end is still in the pipeline (rare
+  // but happens on tight wake cycles), so we count rather than toggle.
+  let activeTurns = 0;
+  function setBannerActive(on) {
+    const banner = $('banner');
+    if (!banner) return;
+    if (on) {
+      activeTurns += 1;
+      banner.classList.add('active');
+    } else {
+      activeTurns = Math.max(0, activeTurns - 1);
+      if (activeTurns === 0) banner.classList.remove('active');
+    }
+  }
+
   async function refreshState() {
     try {
       const resp = await fetch('/api/state');
       if (!resp.ok) throw new Error('http ' + resp.status);
       const s = await resp.json();
       if (!headerSet) { setHeader(s.label, s.dashboard_port); headerSet = true; }
+      renderTermInput(s.label, s.status === 'online');
       // Skip the re-render if nothing structurally changed. The most
       // common case is `online` polling itself — without this guard, the
       // operator's <input value> gets clobbered every cycle.
@@ -315,8 +345,10 @@
       }
       row('sys', '· ' + trim(JSON.stringify(v), 200));
     }
-    function handle(ev) {
+    function handle(ev, opts) {
+      const fromHistory = !!(opts && opts.fromHistory);
       if (ev.kind === 'turn_start') {
+        if (!fromHistory) setBannerActive(true);
         const block = row('turn-start', '◆ TURN ← ' + ev.from);
         if (ev.unread > 0) {
           const badge = document.createElement('span');
@@ -331,11 +363,12 @@
         return;
       }
       if (ev.kind === 'turn_end') {
+        if (!fromHistory) setBannerActive(false);
         const cls = ev.ok ? 'turn-end-ok' : 'turn-end-fail';
         row(cls, (ev.ok ? '✓' : '✗') + ' turn ' + (ev.ok ? 'ok' : 'fail') + (ev.note ? ' — ' + ev.note : ''));
         // Login may have just landed (or session re-enters Online). Pull
         // fresh state so the form view reflects it.
-        refreshState();
+        if (!fromHistory) refreshState();
         return;
       }
       if (ev.kind === 'note') {
@@ -349,16 +382,44 @@
       }
       row('note', JSON.stringify(ev));
     }
-    const es = new EventSource('/events/stream');
+
-    es.onopen = () => setPlaceholder('(connected — waiting for events)');
+    // Backfill the last N events before subscribing live. Walk through
-    es.onmessage = (e) => {
+    // turn_start/turn_end to leave the banner-active counter in the right
-      try { handle(JSON.parse(e.data)); }
+    // state: if the history's last turn never closed, we *do* want the
-      catch (err) { row('note', '[parse err] ' + e.data); }
+    // banner shimmer to be on. fromHistory=true on the replay; we apply
-    };
+    // the final activity state in one pass at the end.
-    es.onerror = () => {
+    async function backfill() {
-      if (es.readyState === EventSource.CONNECTING) setPlaceholder('(reconnecting…)');
+      try {
-      else row('note', '[disconnected]');
+        const resp = await fetch('/events/history');
-    };
+        if (!resp.ok) return;
+        const events = await resp.json();
+        let openTurns = 0;
+        for (const ev of events) {
+          handle(ev, { fromHistory: true });
+          if (ev.kind === 'turn_start') openTurns += 1;
+          else if (ev.kind === 'turn_end') openTurns = Math.max(0, openTurns - 1);
+        }
+        for (let i = 0; i < openTurns; i++) setBannerActive(true);
+        if (events.length) row('note', '─── live (older above) ───');
+        else setPlaceholder('(connected — waiting for events)');
+      } catch (err) {
+        // Best effort; SSE will catch up.
+        console.warn('history backfill failed', err);
+      }
+    }
+
+    backfill().then(() => {
+      const es = new EventSource('/events/stream');
+      es.onopen = () => { /* no placeholder — backfill already painted */ };
+      es.onmessage = (e) => {
+        try { handle(JSON.parse(e.data)); }
+        catch (err) { row('note', '[parse err] ' + e.data); }
+      };
+      es.onerror = () => {
+        if (es.readyState === EventSource.CONNECTING) row('note', '[reconnecting…]');
+        else row('note', '[disconnected]');
+      };
+    });
   })();
 
   // Avoid unused-var lint while keeping `escText` available for future use.

hive-ag3nt/assets/index.html

@@ -8,15 +8,16 @@
 <body>
   <pre class="banner" id="banner">░▒▓█▓▒░  …  ░▒▓█▓▒░  hyperhive ag3nt  ░▒▓█▓▒░</pre>
   <h2 id="title">◆ … ◆</h2>
-  <div class="divider">══════════════════════════════════════════════════════════════</div>
-
-  <h3>live</h3>
-  <div id="live" class="live terminal"><div class="meta">connecting…</div></div>
 
   <div id="status">
     <p class="meta">loading…</p>
   </div>
 
+  <div class="terminal-wrap">
+    <div id="live" class="live terminal"><div class="meta">connecting…</div></div>
+    <div id="term-input" class="term-input"></div>
+  </div>
+
   <script src="/static/app.js" defer></script>
 </body>
 </html>

hive-ag3nt/src/events.rs

@@ -8,12 +8,17 @@
 //! future events; the dashboard JS deals with the cold-start case by
 //! showing "connecting…" until the first event arrives.
 
-use std::sync::Arc;
+use std::collections::VecDeque;
+use std::sync::{Arc, Mutex};
 
 use serde::{Deserialize, Serialize};
 use tokio::sync::broadcast;
 
 const CHANNEL_CAPACITY: usize = 256;
+/// Max `LiveEvent`s the `Bus` keeps in its ring buffer. The web UI fetches
+/// this on page load to backfill the terminal so the operator sees the
+/// last turn(s) without having to wait for the next one.
+const HISTORY_CAPACITY: usize = 500;
 
 /// One row of the agent's live stream. Serialised to JSON for SSE delivery.
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -43,16 +48,27 @@ pub enum LiveEvent {
 #[derive(Clone)]
 pub struct Bus {
     tx: Arc<broadcast::Sender<LiveEvent>>,
+    history: Arc<Mutex<VecDeque<LiveEvent>>>,
 }
 
 impl Bus {
     #[must_use]
     pub fn new() -> Self {
         let (tx, _) = broadcast::channel(CHANNEL_CAPACITY);
-        Self { tx: Arc::new(tx) }
+        Self {
+            tx: Arc::new(tx),
+            history: Arc::new(Mutex::new(VecDeque::with_capacity(HISTORY_CAPACITY))),
+        }
     }
 
     pub fn emit(&self, event: LiveEvent) {
+        {
+            let mut h = self.history.lock().unwrap();
+            if h.len() == HISTORY_CAPACITY {
+                h.pop_front();
+            }
+            h.push_back(event.clone());
+        }
         // Lagged subscribers drop events — fine; the UI is a tail, not a log.
         let _ = self.tx.send(event);
     }
@@ -60,6 +76,13 @@ impl Bus {
     pub fn subscribe(&self) -> broadcast::Receiver<LiveEvent> {
         self.tx.subscribe()
     }
+
+    /// Snapshot of the in-memory event ring buffer, oldest first. Drives the
+    /// terminal pre-fill when the operator opens the agent page.
+    #[must_use]
+    pub fn history(&self) -> Vec<LiveEvent> {
+        self.history.lock().unwrap().iter().cloned().collect()
+    }
 }
 
 impl Default for Bus {

hive-ag3nt/src/web_ui.rs

@@ -74,6 +74,7 @@ pub async fn serve(
         .route("/static/app.js", get(serve_app_js))
         .route("/api/state", get(api_state))
         .route("/events/stream", get(events_stream))
+        .route("/events/history", get(events_history))
         .route("/send", post(post_send))
         .route("/login/start", post(post_login_start))
         .route("/login/code", post(post_login_code))
@@ -206,6 +207,12 @@ async fn post_send(State(state): State<AppState>, Form(form): Form<SendForm>) ->
     }
 }
 
+async fn events_history(
+    State(state): State<AppState>,
+) -> axum::Json<Vec<crate::events::LiveEvent>> {
+    axum::Json(state.bus.history())
+}
+
 async fn events_stream(
     State(state): State<AppState>,
 ) -> Sse<impl Stream<Item = Result<Event, Infallible>>> {

hive-c0re/assets/app.js

@@ -114,7 +114,7 @@
     }
 
     if (!s.containers.length && !s.transients.length) {
-      root.append(el('p', { class: 'empty' }, '▓ no managed containers ▓'));
+      root.append(el('p', { class: 'empty' }, 'no managed containers'));
       return;
     }
 
@@ -123,8 +123,6 @@
       const url = `http://${s.hostname}:${c.port}/`;
       const li = el('li');
       li.append(
-        el('span', { class: 'glyph' }, c.is_manager ? '▓█▓▒░' : '▒░▒░░'),
-        ' ',
         el('a', { href: url }, c.name),
         ' ',
         el('span', { class: c.is_manager ? 'role role-m1nd' : 'role role-ag3nt' },
@@ -180,7 +178,7 @@
     const root = $('questions-section');
     root.innerHTML = '';
     if (!s.questions || !s.questions.length) {
-      root.append(el('p', { class: 'empty' }, '▓ no pending questions ▓'));
+      root.append(el('p', { class: 'empty' }, 'no pending questions'));
       return;
     }
     const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19);
@@ -223,7 +221,7 @@
     const root = $('inbox-section');
     root.innerHTML = '';
     if (!s.operator_inbox || !s.operator_inbox.length) {
-      root.append(el('p', { class: 'empty' }, '▓ no messages ▓'));
+      root.append(el('p', { class: 'empty' }, 'no messages'));
       return;
     }
     const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19);
@@ -245,7 +243,7 @@
     const root = $('approvals-section');
     root.innerHTML = '';
     if (!s.approvals.length) {
-      root.append(el('p', { class: 'empty' }, '▓ queue empty ▓'));
+      root.append(el('p', { class: 'empty' }, 'queue empty'));
       return;
     }
     const ul = el('ul', { class: 'approvals' });
@@ -321,9 +319,21 @@
     const es = new EventSource('/messages/stream');
     const MAX_ROWS = 200;
     const tsFmt = (n) => new Date(n * 1000).toISOString().slice(11, 19);
+    // Animate the banner whenever a broker event lands. Each event nudges
+    // the shimmer window; if traffic stops, the class falls off after the
+    // grace timer.
+    const banner = document.querySelector('.banner');
+    let bannerOffTimer = null;
+    function pulseBanner() {
+      if (!banner) return;
+      banner.classList.add('active');
+      if (bannerOffTimer) clearTimeout(bannerOffTimer);
+      bannerOffTimer = setTimeout(() => banner.classList.remove('active'), 4000);
+    }
     es.onmessage = (e) => {
       let m;
       try { m = JSON.parse(e.data); } catch { return; }
+      pulseBanner();
       // Live-update the inbox when claude sends to operator.
       if (m.kind === 'sent' && m.to === 'operator') refreshState();
       const row = document.createElement('div');

hive-c0re/assets/dashboard.css

@@ -24,12 +24,29 @@ body {
   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(203, 166, 247, 0.55), 0 0 14px rgba(203, 166, 247, 0.25);
   overflow-x: auto;
+  background: linear-gradient(
+    90deg,
+    var(--purple-dim) 0%,
+    var(--purple) 50%,
+    var(--purple-dim) 100%
+  );
+  background-size: 200% 100%;
+  background-position: 50% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 0 6px rgba(203, 166, 247, 0.45));
+}
+.banner.active {
+  animation: banner-shimmer 1.8s linear infinite;
+}
+@keyframes banner-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -100% 0; }
 }
 h1, h2 {
   color: var(--purple);