Rig Pocket: phone status page and ntfy notifier for OpenRig
Installable PWA showing rigs, seats (working, idle, waiting for an answer), queue items and recent commits; seat screens with replies; push through ntfy. Reads state through the rig CLI only, Python standard library, no build step, styled entirely with the shared weirsoe-theme. Claude-Session: https://claude.ai/code/session_01QhLkBGEip8wQdaZ54z4AqJ
This commit is contained in:
Asger Geel Weirsøe
+146
@@ -0,0 +1,146 @@
|
||||
// Rig Pocket: one page, two views (#/ overview, #/seat/<name> screen + reply). Plain DOM, no build.
|
||||
const $ = (tag, attrs = {}, ...kids) => {
|
||||
const el = document.createElement(tag);
|
||||
for (const [k, v] of Object.entries(attrs)) {
|
||||
if (k === 'class') el.className = v;
|
||||
else if (k.startsWith('on')) el.addEventListener(k.slice(2), v);
|
||||
else el.setAttribute(k, v);
|
||||
}
|
||||
for (const kid of kids.flat()) if (kid != null) el.append(kid.nodeType ? kid : String(kid));
|
||||
return el;
|
||||
};
|
||||
|
||||
const ago = (iso) => {
|
||||
if (!iso) return '';
|
||||
const s = Math.max(0, (Date.now() - new Date(typeof iso === 'number' ? iso * 1000 : iso)) / 1000);
|
||||
if (s < 60) return `${Math.round(s)} s`;
|
||||
if (s < 3600) return `${Math.round(s / 60)} min`;
|
||||
if (s < 86400) return `${Math.round(s / 3600)} t`;
|
||||
return `${Math.round(s / 86400)} d`;
|
||||
};
|
||||
|
||||
const seatTag = (s) => {
|
||||
if (s.waiting) return $('span', { class: 'wt-tag wt-tag--warn' }, 'venter på svar');
|
||||
if (s.status && s.status !== 'running') return $('span', { class: 'wt-tag wt-tag--bad' }, s.status);
|
||||
if (s.activity === 'running' || s.activity === 'working') return $('span', { class: 'wt-tag wt-tag--accent' }, 'arbejder');
|
||||
return $('span', { class: 'wt-tag' }, 'ledig');
|
||||
};
|
||||
|
||||
const QSTATE = { 'in-progress': 'wt-tag--accent', blocked: '', parked: '', done: 'wt-tag--good', failed: 'wt-tag--bad' };
|
||||
|
||||
let snap = null;
|
||||
let timer = null;
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const r = await fetch('api/status', { cache: 'no-store' });
|
||||
snap = await r.json();
|
||||
render();
|
||||
} catch (e) {
|
||||
document.getElementById('updated').textContent = 'offline';
|
||||
}
|
||||
}
|
||||
|
||||
function overview() {
|
||||
const view = [];
|
||||
const waiting = snap.rigs.flatMap((r) => r.seats.filter((s) => s.waiting));
|
||||
if (waiting.length) {
|
||||
view.push($('section', { class: 'wt-card wt-card--raised wt-stack' },
|
||||
$('h2', { class: 'wt-card-title' }, 'Venter på dig'),
|
||||
waiting.map((s) => $('a', { class: 'wt-row wt-row--between', href: `#/seat/${s.name}` }, s.name, seatTag(s)))));
|
||||
}
|
||||
|
||||
for (const r of snap.rigs) {
|
||||
view.push($('section', { class: 'wt-card wt-stack' },
|
||||
$('div', { class: 'wt-row wt-row--between' },
|
||||
$('h2', { class: 'wt-card-title' }, r.name),
|
||||
$('span', { class: 'wt-muted' }, `${r.status} · ${r.uptime}`)),
|
||||
r.seats.map((s) => $('a', { class: 'wt-row wt-row--between', href: `#/seat/${s.name}` },
|
||||
$('span', {}, s.name.split('@')[0]),
|
||||
$('span', { class: 'wt-row' },
|
||||
s.work ? $('span', { class: 'wt-muted' }, `${s.work} opg.`) : null,
|
||||
$('span', { class: 'wt-muted' }, ago(s.lastActivity)),
|
||||
seatTag(s))))));
|
||||
}
|
||||
|
||||
const open = snap.queue.filter((q) => !['done', 'closed', 'canceled'].includes(q.state) && q.summary);
|
||||
const done = snap.queue.filter((q) => q.state === 'done' && q.summary).slice(0, 6);
|
||||
if (open.length || done.length) {
|
||||
view.push($('section', { class: 'wt-card wt-stack' },
|
||||
$('h2', { class: 'wt-card-title' }, 'Opgaver'),
|
||||
[...open, ...done].map((q) => $('div', { class: 'wt-stack' },
|
||||
$('div', { class: 'wt-row wt-row--between' },
|
||||
$('span', { class: `wt-tag ${QSTATE[q.state] || ''}` }, q.state),
|
||||
$('span', { class: 'wt-muted' }, `${q.dest} · ${ago(q.updated)}`)),
|
||||
$('span', {}, q.summary)))));
|
||||
}
|
||||
|
||||
for (const repo of snap.repos) {
|
||||
if (!repo.commits.length) continue;
|
||||
view.push($('section', { class: 'wt-card wt-stack' },
|
||||
$('h2', { class: 'wt-card-title' }, repo.name),
|
||||
repo.commits.slice(0, 8).map((c) => $('div', {},
|
||||
$('div', { class: 'wt-row wt-row--between' },
|
||||
$('code', {}, c.short), $('span', { class: 'wt-muted' }, ago(c.when))),
|
||||
$('span', {}, c.subject)))));
|
||||
}
|
||||
return view;
|
||||
}
|
||||
|
||||
async function send(seat, payload) {
|
||||
const r = await fetch('api/send', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-Rig-Pocket': '1' },
|
||||
body: JSON.stringify({ seat, ...payload }),
|
||||
});
|
||||
return r.ok;
|
||||
}
|
||||
|
||||
function seatView(name) {
|
||||
const s = snap.rigs.flatMap((r) => r.seats).find((x) => x.name === name);
|
||||
const pre = $('pre', { class: 'wt-pre' }, 'Henter skærm…');
|
||||
const refresh = async () => {
|
||||
const r = await fetch(`api/capture/${encodeURIComponent(name)}`, { cache: 'no-store' });
|
||||
pre.textContent = r.ok ? (await r.json()).screen : 'Ukendt agent';
|
||||
pre.scrollTop = pre.scrollHeight;
|
||||
};
|
||||
refresh();
|
||||
clearInterval(timer);
|
||||
timer = setInterval(refresh, 5000);
|
||||
|
||||
const input = $('textarea', { class: 'wt-input', rows: '3', placeholder: `Skriv til ${name}…` });
|
||||
const status = $('span', { class: 'wt-muted' });
|
||||
const doSend = async (payload) => {
|
||||
status.textContent = 'Sender…';
|
||||
status.textContent = (await send(name, payload)) ? 'Sendt' : 'Fejl';
|
||||
setTimeout(refresh, 1200);
|
||||
};
|
||||
return [
|
||||
$('a', { href: '#/', class: 'wt-muted' }, '← Oversigt'),
|
||||
$('div', { class: 'wt-row wt-row--between' }, $('h2', {}, name), s ? seatTag(s) : null),
|
||||
pre,
|
||||
s && s.waiting ? $('div', { class: 'wt-row' },
|
||||
$('span', { class: 'wt-muted' }, 'Svar på prompten:'),
|
||||
['1', '2', '3'].map((k) => $('button', { class: 'wt-btn', onclick: () => doSend({ key: k }) }, k))) : null,
|
||||
$('div', { class: 'wt-stack' }, input,
|
||||
$('div', { class: 'wt-row wt-row--between' }, status,
|
||||
$('button', { class: 'wt-btn wt-btn--primary', onclick: () => { if (input.value.trim()) { doSend({ text: input.value }); input.value = ''; } } }, 'Send'))),
|
||||
];
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (!snap) return;
|
||||
document.getElementById('updated').textContent = ago(snap.updated);
|
||||
const m = location.hash.match(/^#\/seat\/(.+)$/);
|
||||
const view = document.getElementById('view');
|
||||
// keep the open seat view (and anything typed) while the overview data refreshes
|
||||
if (m && view.dataset.seat === m[1]) return;
|
||||
view.dataset.seat = m ? m[1] : '';
|
||||
if (!m) clearInterval(timer);
|
||||
view.replaceChildren(...(m ? seatView(decodeURIComponent(m[1])) : overview()).filter(Boolean));
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', render);
|
||||
document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
|
||||
load();
|
||||
setInterval(load, 15000);
|
||||
Reference in New Issue
Block a user