vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboard: msgflow uses shared terminal + backfill via /messages/history

Browse source
This commit is contained in:
müde 2026-05-17 11:56:29 +02:00
parent f27108aecf
commit 8c186d4fb7
5 changed files with 116 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

80
hive-c0re/assets/app.js
View file

@ -955,17 +955,19 @@
refreshState();
NOTIF.bind();
// ─── message flow SSE ───────────────────────────────────────────────────
// ─── message flow: shared terminal pane ────────────────────────────────
// Scroll, pill, backfill + SSE plumbing live in hive-fr0nt::TERMINAL_JS
// (window.HiveTerminal). What stays here is the broker-message
// renderer + the page-local side effects (banner pulse, inbox refresh
// on operator-bound traffic, OS notifications).
(() => {
const flow = $('msgflow');
if (!flow) return;
if (!flow || !window.HiveTerminal) return;
flow.innerHTML = '';
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.
// Pulse the page 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() {
@ -974,40 +976,38 @@
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 + ping
// the OS notification center.
if (m.kind === 'sent' && m.to === 'operator') {
refreshState();
NOTIF.show(
'◆ ' + m.from + ' → operator',
String(m.body || '').slice(0, 200),
// Unique-per-arrival tag so a burst stacks instead of
// overwriting itself in the OS notification center.
'hyperhive:msg:' + m.at + ':' + Math.random().toString(36).slice(2, 6),
);
}
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>' +
function renderMsg(ev, api, glyph) {
const el = api.row('msgrow ' + ev.kind, '');
el.innerHTML =
'<span class="msg-ts">' + tsFmt(ev.at) + '</span>' +
'<span class="msg-arrow">' + glyph + '</span>' +
'<span class="msg-from">' + esc(ev.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);
};
'<span class="msg-to">' + esc(ev.to) + '</span>' +
'<span class="msg-body">' + esc(ev.body) + '</span>';
}
HiveTerminal.create({
logEl: flow,
historyUrl: '/messages/history',
streamUrl: '/messages/stream',
renderers: {
sent: (ev, api) => renderMsg(ev, api, '→'),
delivered: (ev, api) => renderMsg(ev, api, '✓'),
},
onLiveEvent: (ev) => {
pulseBanner();
if (ev.kind === 'sent' && ev.to === 'operator') {
refreshState();
NOTIF.show(
'◆ ' + ev.from + ' → operator',
String(ev.body || '').slice(0, 200),
// Unique-per-arrival tag so a burst stacks instead of
// overwriting itself in the OS notification center.
'hyperhive:msg:' + ev.at + ':' + Math.random().toString(36).slice(2, 6),
);
}
},
});
})();
// ─── compose: @-mention with sticky recipient ───────────────────────────