hyperhive/frontend/packages/shared/src/forms.js

// Shared async-form primitives. Used by both the dashboard and the
// per-agent UI for any button/form that triggers a network action.
// Two pieces: `asyncBtn` (below) is the low-level per-button primitive;
// `bindAsyncForms` (further down) is the page-level `data-async` form
// submit interceptor built on top of it + the themed dialogs in
// `modal.js`.
//
// `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;
  });
}

// Page-level submit interceptor for `data-async` forms — the pattern every
// dashboard/agent action button uses (meta-update, spawn, cancel, purge,
// rebuild, …). Without this a `data-async` form POSTs natively and the
// browser navigates to the bare `ok` response page. Each page that renders
// such forms must call this once at boot. `onSuccess` runs after a
// successful submit unless the form opts out with `data-no-refresh` (forms
// whose mutation arrives faster via an SSE event).
//
// Confirmation (`data-confirm`) and free-text prompts (`data-prompt` /
// `data-prompt-field`) are surfaced via the themed dialogs in `modal.js`
// rather than native `confirm()`/`prompt()`, and errors via `themedToast`
// rather than `alert()`, so every page gets the same in-theme experience.
import { themedConfirm, themedPrompt, themedToast } from "./modal.js";

export function bindAsyncForms(onSuccess) {
  document.addEventListener("submit", async (e) => {
    const f = e.target;
    if (!(f instanceof HTMLFormElement) || !f.hasAttribute("data-async"))
      return;
    e.preventDefault();
    if (
      f.dataset.confirm &&
      !(await themedConfirm({ message: f.dataset.confirm }))
    )
      return;
    if (f.dataset.prompt) {
      const ans = await themedPrompt({ message: f.dataset.prompt });
      if (ans === null) return; // operator hit Cancel
      // Drop into a hidden input named after `data-prompt-field` (or
      // 'note' by default) so the value rides along on the POST.
      const field = f.dataset.promptField || "note";
      let input = f.querySelector(`input[name="${field}"]`);
      if (!input) {
        input = document.createElement("input");
        input.type = "hidden";
        input.name = field;
        f.append(input);
      }
      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 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" },
        );
        return;
      }
      // 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();
  });
}