diff --git a/frontend/packages/agent/src/app.js b/frontend/packages/agent/src/app.js index 71a38068..5790915b 100644 --- a/frontend/packages/agent/src/app.js +++ b/frontend/packages/agent/src/app.js @@ -3,7 +3,6 @@ // actions (send / login/* / dashboard rebuild). import { create as termCreate, linkify as termLinkify } from '@hive/shared/terminal.js'; -import { asyncBtn } from '@hive/shared/forms.js'; import { marked } from 'marked'; import DOMPurify from 'dompurify'; @@ -1052,28 +1051,29 @@ window.marked = marked; const ta = el('textarea', { rows: '2', placeholder: 'answer as operator…' }); const btn = el('button', { type: 'button' }, 'send answer'); const status = el('span', { class: 'answer-status' }); - btn.addEventListener('click', () => { + btn.addEventListener('click', async () => { const answer = ta.value.trim(); if (!answer) { status.textContent = 'answer required'; return; } if (!dashboardBase) { status.textContent = 'dashboard url unknown'; return; } + btn.disabled = true; status.textContent = 'sending…'; - asyncBtn(btn, async () => { - try { - const resp = await fetch(dashboardBase + 'api/answer-question/' + id, { - method: 'POST', - headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: 'answer=' + encodeURIComponent(answer), - }); - if (resp.ok) { - status.textContent = 'answered ✓'; - refreshLooseEnds(); - } else { - status.textContent = 'failed: ' + (await resp.text()); - } - } catch (err) { - status.textContent = 'failed: ' + err; + try { + const resp = await fetch(dashboardBase + 'api/answer-question/' + id, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: 'answer=' + encodeURIComponent(answer), + }); + if (resp.ok) { + status.textContent = 'answered ✓'; + refreshLooseEnds(); + } else { + status.textContent = 'failed: ' + (await resp.text()); + btn.disabled = false; } - }); + } catch (err) { + status.textContent = 'failed: ' + err; + btn.disabled = false; + } }); wrap.append(ta, btn, status); return wrap; @@ -1094,31 +1094,38 @@ window.marked = marked; + 'history shown here is the most-recent-N regardless of state, ' + 'so the list itself stays visible.', }, '✓ mark all read'); - btn.addEventListener('click', () => { - if (!dashboardBase) { status.textContent = 'dashboard url unknown'; return; } - if (!label) { status.textContent = 'agent label unknown'; return; } + btn.addEventListener('click', async () => { + if (!dashboardBase) { + status.textContent = 'dashboard url unknown'; + return; + } + if (!label) { + status.textContent = 'agent label unknown'; + return; + } if (!window.confirm( `mark every queued message for ${label} as read? ` + `the message history shown stays; only the unread queue is drained.` )) return; + btn.disabled = true; status.textContent = 'clearing…'; - asyncBtn(btn, async () => { - try { - const resp = await fetch( - dashboardBase + 'api/agent/' + encodeURIComponent(label) + '/mark-all-read', - { method: 'POST' }); - if (resp.ok) { - const data = await resp.json().catch(() => ({})); - const n = Number(data.marked) || 0; - status.textContent = '✓ marked ' + n + ' as read'; - if (typeof onCleared === 'function') onCleared(); - } else { - status.textContent = 'failed: http ' + resp.status; - } - } catch (err) { - status.textContent = 'failed: ' + err; + try { + const resp = await fetch( + dashboardBase + 'api/agent/' + encodeURIComponent(label) + '/mark-all-read', + { method: 'POST' }); + if (resp.ok) { + const data = await resp.json().catch(() => ({})); + const n = Number(data.marked) || 0; + status.textContent = '✓ marked ' + n + ' as read'; + if (typeof onCleared === 'function') onCleared(); + } else { + status.textContent = 'failed: http ' + resp.status; + btn.disabled = false; } - }); + } catch (err) { + status.textContent = 'failed: ' + err; + btn.disabled = false; + } }); return el('div', { class: 'inbox-mark-all-row' }, btn, status); } diff --git a/frontend/packages/dashboard/src/common.js b/frontend/packages/dashboard/src/common.js index 7b6dff74..d1ef70e8 100644 --- a/frontend/packages/dashboard/src/common.js +++ b/frontend/packages/dashboard/src/common.js @@ -4,7 +4,6 @@ // infrastructure for the side panel. import { linkify as termLinkify } from '@hive/shared/terminal.js'; -import { asyncBtn } from '@hive/shared/forms.js'; import DOMPurify from 'dompurify'; // Themed dialog/toast helpers (modal.js imports `el` back from here — a safe // deferred cycle: neither side uses the other at module-init time, only inside @@ -81,39 +80,35 @@ export function bindAsyncForms(onSuccess) { input.value = ans; } const btn = f.querySelector('button[type="submit"], button:not([type]), .btn-inline'); - // Inner action: POST, clear inputs, call onSuccess. - // Errors are surfaced via themedToast; the caller does not re-throw - // so asyncBtn's finally always runs (restoring the button). - const doSubmit = async () => { - let resp; - try { - resp = await fetch(f.action, { - method: f.method || 'POST', - headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: new URLSearchParams(new FormData(f)), - redirect: 'manual', - }); - } catch (err) { - themedToast('action failed: ' + err, { type: 'error' }); - return; - } + const original = btn ? btn.innerHTML : ''; + if (btn) { btn.disabled = true; btn.innerHTML = ''; } + try { + const resp = await fetch(f.action, { + method: f.method || 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: new URLSearchParams(new FormData(f)), + redirect: 'manual', + }); const ok = resp.ok || resp.type === 'opaqueredirect' || (resp.status >= 200 && resp.status < 400); if (!ok) { const text = await resp.text().catch(() => ''); themedToast('action failed: ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' }); + if (btn) { btn.disabled = false; btn.innerHTML = original; } return; } + // Re-enable the button — the refresh rebuilds most lists but skips + // forms that didn't change, so without this the spinner sticks. + if (btn) { btn.disabled = false; btn.innerHTML = original; } // Clear text inputs whose value was just submitted. f.querySelectorAll('input[type="text"], input:not([type]), textarea').forEach((i) => { i.value = ''; }); if (!f.hasAttribute('data-no-refresh') && typeof onSuccess === 'function') { onSuccess(); } - }; - // asyncBtn guards double-submit and shows a spinner while in-flight. - // When there is no submit button (unusual), fall through without a guard. - if (btn) asyncBtn(btn, doSubmit); - else await doSubmit(); + } catch (err) { + themedToast('action failed: ' + err, { type: 'error' }); + if (btn) { btn.disabled = false; btn.innerHTML = original; } + } }); } diff --git a/frontend/packages/dashboard/src/core.js b/frontend/packages/dashboard/src/core.js index 75059976..90f41c5d 100644 --- a/frontend/packages/dashboard/src/core.js +++ b/frontend/packages/dashboard/src/core.js @@ -11,7 +11,6 @@ // own copy of the tombstones state. import { $, el, form, openStream, initServerWarnings, bindAsyncForms } from './common.js'; -import { asyncBtn } from '@hive/shared/forms.js'; import { createTabStrip } from '@hive/shared/tabs.js'; // ─── derived state (own copies; this bundle has its own runtime) ────────── @@ -105,7 +104,8 @@ function renderStalePerms(root, ghosts) { class: 'btn btn-destroy', title: 'remove explicit capability and tool-group entries for ' + name, }, '✕ clear perms'); - btn.addEventListener('click', () => asyncBtn(btn, async () => { + btn.addEventListener('click', async () => { + btn.disabled = true; errP.hidden = true; try { const resp = await fetch('/api/permissions/' + encodeURIComponent(name), { method: 'DELETE' }); @@ -113,14 +113,17 @@ function renderStalePerms(root, ghosts) { const msg = await resp.text().catch(() => String(resp.status)); errP.textContent = 'failed to clear perms for ' + name + ': ' + msg; errP.hidden = false; + btn.disabled = false; return; } - await fetchAndRenderStalePerms(); } catch (err) { errP.textContent = 'failed to clear perms for ' + name + ': ' + err; errP.hidden = false; + btn.disabled = false; + return; } - })); + await fetchAndRenderStalePerms(); + }); li.append(btn); ul.append(li); } diff --git a/frontend/packages/dashboard/src/permissions.js b/frontend/packages/dashboard/src/permissions.js index 02f6eb10..edca22ea 100644 --- a/frontend/packages/dashboard/src/permissions.js +++ b/frontend/packages/dashboard/src/permissions.js @@ -23,7 +23,6 @@ import { $, el } from './common.js'; import { containersState } from './state.js'; -import { asyncBtn } from '@hive/shared/forms.js'; // ── SSE re-render guards ──────────────────────────────────────────── // Skip the live re-render when the operator has unsaved edits in that @@ -326,28 +325,27 @@ function updateSaveBar() { // agent isn't in the live container list. Re-fetches both tables after // the delete so the row disappears immediately. async function clearStaleAgent(name, sectionRoot) { + // Disable the row's remove button while the request is in flight to + // prevent a double-submit. const btn = sectionRoot ? sectionRoot.querySelector(`[data-agent="${CSS.escape(name)}"] .perm-remove-btn`) : null; - const doDelete = async () => { - try { - const resp = await fetch('/api/permissions/' + encodeURIComponent(name), { method: 'DELETE' }); - if (!resp.ok) { - const text = await resp.text().catch(() => resp.status); - setSaveNote('failed to remove ' + name + ': ' + text, true); - return; - } - // Re-fetch both sections so the stale row disappears. - await Promise.all([fetchAndRenderCapabilities(), fetchAndRenderToolGroups()]); - } catch (err) { - setSaveNote('failed to remove ' + name + ': ' + err, true); + if (btn) btn.disabled = true; + try { + const resp = await fetch('/api/permissions/' + encodeURIComponent(name), { method: 'DELETE' }); + if (!resp.ok) { + const text = await resp.text().catch(() => resp.status); + setSaveNote('failed to remove ' + name + ': ' + text, true); + if (btn) btn.disabled = false; + return; } - }; - // asyncBtn guards double-submit; fall through without guard when there - // is no button (e.g. called programmatically without a DOM context). - // Return the promise so callers can await clearStaleAgent() if needed. - if (btn) return asyncBtn(btn, doDelete); - await doDelete(); + } catch (err) { + setSaveNote('failed to remove ' + name + ': ' + err, true); + if (btn) btn.disabled = false; + return; + } + // Re-fetch both sections so the stale row disappears. + await Promise.all([fetchAndRenderCapabilities(), fetchAndRenderToolGroups()]); } function clearSaveStatus() { diff --git a/frontend/packages/dashboard/src/schedules.js b/frontend/packages/dashboard/src/schedules.js index 21b7aed2..48ceb5ab 100644 --- a/frontend/packages/dashboard/src/schedules.js +++ b/frontend/packages/dashboard/src/schedules.js @@ -15,7 +15,6 @@ import { $, el, appendLinkified } from './common.js'; import { themedConfirm, themedToast } from './modal.js'; import { paintAtomic, epochSec, fmtAgo, fmtDuration } from './util.js'; import { containersState } from './state.js'; -import { asyncBtn } from '@hive/shared/forms.js'; export async function refreshReminders() { const liveRoot = $('reminders-section'); @@ -566,25 +565,29 @@ async function submitNewScheduleInline(tr, submitBtn) { if (interval_seconds != null) payload.interval_seconds = interval_seconds; if (description) payload.description = description; - asyncBtn(submitBtn, async () => { - try { - const resp = await fetch('/api/schedules', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload), - }); - if (!resp.ok) { - const text = await resp.text().catch(() => ''); - themedToast('schedule submit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' }); - return; - } - // Reset carry so the next render shows an empty row. - resetNewScheduleCarry(); - await refreshSchedules(); - } catch (err) { - themedToast('schedule submit failed: ' + err, { type: 'error' }); + const originalLabel = submitBtn.innerHTML; + submitBtn.disabled = true; + submitBtn.innerHTML = ''; + try { + const resp = await fetch('/api/schedules', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload), + }); + if (!resp.ok) { + const text = await resp.text().catch(() => ''); + themedToast('schedule submit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' }); + return; } - }); + // Reset carry so the next render shows an empty row. + resetNewScheduleCarry(); + await refreshSchedules(); + } catch (err) { + themedToast('schedule submit failed: ' + err, { type: 'error' }); + } finally { + submitBtn.disabled = false; + submitBtn.innerHTML = originalLabel; + } } // The set of agent columns in the schedules table: operator + root // (manager) first, then live containers (sorted), then any extra names @@ -982,27 +985,27 @@ async function submitEditSchedule(originalSchedule, form_) { } const submitBtn = form_.querySelector('button[type="submit"]'); - const doEdit = async () => { - try { - const resp = await fetch('/api/schedules/' + encodeURIComponent(s.id), { - method: 'PATCH', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(patch), - }); - if (!resp.ok) { - const text = await resp.text().catch(() => ''); - themedToast('edit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' }); - return; - } - editingSchedules.delete(s.id); - scheduleEditCarry.delete(s.id); - await refreshSchedules(); - } catch (err) { - themedToast('edit failed: ' + err, { type: 'error' }); + const originalLabel = submitBtn ? submitBtn.textContent : ''; + if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'saving…'; } + try { + const resp = await fetch('/api/schedules/' + encodeURIComponent(s.id), { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(patch), + }); + if (!resp.ok) { + const text = await resp.text().catch(() => ''); + themedToast('edit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' }); + return; } - }; - if (submitBtn) asyncBtn(submitBtn, doEdit); - else await doEdit(); + editingSchedules.delete(s.id); + scheduleEditCarry.delete(s.id); + await refreshSchedules(); + } catch (err) { + themedToast('edit failed: ' + err, { type: 'error' }); + } finally { + if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = originalLabel; } + } } async function fireScheduleNow(id, isOneShot, targets, btn) { const targetList = targets.length ? targets.join(', ') : '(no active targets)'; diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json index b3a1e8ab..26a7106f 100644 --- a/frontend/packages/shared/package.json +++ b/frontend/packages/shared/package.json @@ -14,8 +14,7 @@ "./theme.css": "./src/theme.css", "./base.css": "./src/base.css", "./terminal.css": "./src/terminal.css", - "./chrome.css": "./src/chrome.css", - "./forms.js": "./src/forms.js" + "./chrome.css": "./src/chrome.css" }, "files": [ "src/" diff --git a/frontend/packages/shared/src/forms.js b/frontend/packages/shared/src/forms.js deleted file mode 100644 index a68cf694..00000000 --- a/frontend/packages/shared/src/forms.js +++ /dev/null @@ -1,36 +0,0 @@ -// Shared async-button primitive. Used by both the dashboard and the -// per-agent UI for any button that triggers a network action. -// -// `asyncBtn(btn, fn)` — the single reusable component: -// 1. Guards double-click: returns immediately if `btn` is already -// disabled (prevents a second identical request from firing). -// 2. Saves `btn.innerHTML` and replaces it with a spinner during the -// async operation. -// 3. Re-enables the button and restores the original content when `fn` -// resolves or rejects (via `finally`), so callers don't need -// save/restore boilerplate. -// -// Usage: -// btn.addEventListener('click', () => asyncBtn(btn, async () => { -// const resp = await fetch('/api/...'); -// if (!resp.ok) throw new Error(await resp.text()); -// // handle success -// })); -// -// Error handling: `asyncBtn` restores the button on any thrown error / -// rejected promise but does NOT surface the error — callers must catch -// and display it themselves (via `themedToast`, `alert`, a status span, -// etc.) inside `fn` without re-throwing. `fn` must not let errors escape -// unhandled: `asyncBtn` returns the `fn().finally(...)` promise so -// callers can optionally chain `.catch` or `await`, but does not add its -// own catch — an unhandled rejection from `fn` will propagate normally. -export function asyncBtn(btn, fn) { - if (btn.disabled) return; // double-click guard - const orig = btn.innerHTML; - btn.disabled = true; - btn.innerHTML = ''; - return fn().finally(() => { - btn.disabled = false; - btn.innerHTML = orig; - }); -}