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 {
-        try {
+        const resp = await fetch(dashboardBase + 'api/answer-question/' + id, {
-          const resp = await fetch(dashboardBase + 'api/answer-question/' + id, {
+          method: 'POST',
-            method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: 'answer=' + encodeURIComponent(answer),
-            body: 'answer=' + encodeURIComponent(answer),
+        });
-          });
+        if (resp.ok) {
-          if (resp.ok) {
+          status.textContent = 'answered ✓';
-            status.textContent = 'answered ✓';
+          refreshLooseEnds();
-            refreshLooseEnds();
+        } else {
-          } else {
+          status.textContent = 'failed: ' + (await resp.text());
-            status.textContent = 'failed: ' + (await resp.text());
+          btn.disabled = false;
-          }
-        } catch (err) {
-          status.textContent = 'failed: ' + err;
         }
-      });
+      } 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', () => {
+    btn.addEventListener('click', async () => {
-      if (!dashboardBase) { status.textContent = 'dashboard url unknown'; return; }
+      if (!dashboardBase) {
-      if (!label) { status.textContent = 'agent label unknown'; return; }
+        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 {
-        try {
+        const resp = await fetch(
-          const resp = await fetch(
+          dashboardBase + 'api/agent/' + encodeURIComponent(label) + '/mark-all-read',
-            dashboardBase + 'api/agent/' + encodeURIComponent(label) + '/mark-all-read',
+          { method: 'POST' });
-            { method: 'POST' });
+        if (resp.ok) {
-          if (resp.ok) {
+          const data = await resp.json().catch(() => ({}));
-            const data = await resp.json().catch(() => ({}));
+          const n = Number(data.marked) || 0;
-            const n = Number(data.marked) || 0;
+          status.textContent = '✓ marked ' + n + ' as read';
-            status.textContent = '✓ marked ' + n + ' as read';
+          if (typeof onCleared === 'function') onCleared();
-            if (typeof onCleared === 'function') onCleared();
+        } else {
-          } else {
+          status.textContent = 'failed: http ' + resp.status;
-            status.textContent = 'failed: http ' + resp.status;
+          btn.disabled = false;
-          }
-        } catch (err) {
-          status.textContent = 'failed: ' + err;
         }
-      });
+      } catch (err) {
+        status.textContent = 'failed: ' + err;
+        btn.disabled = false;
+      }
     });
     return el('div', { class: 'inbox-mark-all-row' }, btn, status);
   }

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.
+    const original = btn ? btn.innerHTML : '';
-    // Errors are surfaced via themedToast; the caller does not re-throw
+    if (btn) { btn.disabled = true; btn.innerHTML = '<span class="spinner">◐</span>'; }
-    // so asyncBtn's finally always runs (restoring the button).
+    try {
-    const doSubmit = async () => {
+      const resp = await fetch(f.action, {
-      let resp;
+        method: f.method || 'POST',
-      try {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        resp = await fetch(f.action, {
+        body: new URLSearchParams(new FormData(f)),
-          method: f.method || 'POST',
+        redirect: 'manual',
-          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 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();
       }
-    };
+    } catch (err) {
-    // asyncBtn guards double-submit and shows a spinner while in-flight.
+      themedToast('action failed: ' + err, { type: 'error' });
-    // When there is no submit button (unusual), fall through without a guard.
+      if (btn) { btn.disabled = false; btn.innerHTML = original; }
-    if (btn) asyncBtn(btn, doSubmit);
+    }
-    else await doSubmit();
   });
 }
 

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);
   }

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 () => {
+  if (btn) btn.disabled = true;
-    try {
+  try {
-      const resp = await fetch('/api/permissions/' + encodeURIComponent(name), { method: 'DELETE' });
+    const resp = await fetch('/api/permissions/' + encodeURIComponent(name), { method: 'DELETE' });
-      if (!resp.ok) {
+    if (!resp.ok) {
-        const text = await resp.text().catch(() => resp.status);
+      const text = await resp.text().catch(() => resp.status);
-        setSaveNote('failed to remove ' + name + ': ' + text, true);
+      setSaveNote('failed to remove ' + name + ': ' + text, true);
-        return;
+      if (btn) btn.disabled = false;
-      }
+      return;
-      // Re-fetch both sections so the stale row disappears.
-      await Promise.all([fetchAndRenderCapabilities(), fetchAndRenderToolGroups()]);
-    } catch (err) {
-      setSaveNote('failed to remove ' + name + ': ' + err, true);
     }
-  };
+  } catch (err) {
-  // asyncBtn guards double-submit; fall through without guard when there
+    setSaveNote('failed to remove ' + name + ': ' + err, true);
-  // is no button (e.g. called programmatically without a DOM context).
+    if (btn) btn.disabled = false;
-  // Return the promise so callers can await clearStaleAgent() if needed.
+    return;
-  if (btn) return asyncBtn(btn, doDelete);
+  }
-  await doDelete();
+  // Re-fetch both sections so the stale row disappears.
+  await Promise.all([fetchAndRenderCapabilities(), fetchAndRenderToolGroups()]);
 }
 
 function clearSaveStatus() {

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 () => {
+  const originalLabel = submitBtn.innerHTML;
-    try {
+  submitBtn.disabled = true;
-      const resp = await fetch('/api/schedules', {
+  submitBtn.innerHTML = '<span class="spinner">◐</span>';
-        method: 'POST',
+  try {
-        headers: { 'Content-Type': 'application/json' },
+    const resp = await fetch('/api/schedules', {
-        body: JSON.stringify(payload),
+      method: 'POST',
-      });
+      headers: { 'Content-Type': 'application/json' },
-      if (!resp.ok) {
+      body: JSON.stringify(payload),
-        const text = await resp.text().catch(() => '');
+    });
-        themedToast('schedule submit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' });
+    if (!resp.ok) {
-        return;
+      const text = await resp.text().catch(() => '');
-      }
+      themedToast('schedule submit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' });
-      // Reset carry so the next render shows an empty row.
+      return;
-      resetNewScheduleCarry();
-      await refreshSchedules();
-    } catch (err) {
-      themedToast('schedule submit failed: ' + err, { type: 'error' });
     }
-  });
+    // 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 () => {
+  const originalLabel = submitBtn ? submitBtn.textContent : '';
-    try {
+  if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'saving…'; }
-      const resp = await fetch('/api/schedules/' + encodeURIComponent(s.id), {
+  try {
-        method: 'PATCH',
+    const resp = await fetch('/api/schedules/' + encodeURIComponent(s.id), {
-        headers: { 'Content-Type': 'application/json' },
+      method: 'PATCH',
-        body: JSON.stringify(patch),
+      headers: { 'Content-Type': 'application/json' },
-      });
+      body: JSON.stringify(patch),
-      if (!resp.ok) {
+    });
-        const text = await resp.text().catch(() => '');
+    if (!resp.ok) {
-        themedToast('edit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' });
+      const text = await resp.text().catch(() => '');
-        return;
+      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' });
     }
-  };
+    editingSchedules.delete(s.id);
-  if (submitBtn) asyncBtn(submitBtn, doEdit);
+    scheduleEditCarry.delete(s.id);
-  else await doEdit();
+    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)';

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",
+    "./chrome.css": "./src/chrome.css"
-    "./forms.js": "./src/forms.js"
   },
   "files": [
     "src/"

frontend/packages/shared/src/forms.js

@@ -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 = '<span class="spinner">◐</span>';
-  return fn().finally(() => {
-    btn.disabled = false;
-    btn.innerHTML = orig;
-  });
-}