refactor(web): shared ConfirmDialog, FormControls, and Modal a11y

Extract reusable confirm/modal shells and bordered form controls, adopt them across list pages and editors, and improve icon-button labels plus KvPage keyboard rows.

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/web/src/components/AuthEditorModal.jsx

@@ -6,6 +6,7 @@ import {
   useHttpPages,
   useUpsertHttpAuth,
 } from "../api/hooks.js";
+import { FormInput, FormSelect } from "./FormControls.jsx";
 
 function emptyCred(source = "literal") {
   return { source, value: "", kv: "", namespace: "", secret: "" };
@@ -120,15 +121,15 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
     <div className="space-y-3 rounded-box border border-base-300 p-3">
       <p className="text-sm font-medium">{label}</p>
       <Field label="Source">
-        <select
+        <FormSelect
-          className="select select-bordered w-full"
+          className="w-full"
           value={cred.source}
           onChange={(e) => onChange({ ...cred, source: e.target.value, keep: false })}
         >
           <option value="literal">Plain text</option>
           <option value="kv">From KV</option>
           <option value="secret">From secret</option>
-        </select>
+        </FormSelect>
       </Field>
       {cred.source === "literal" ? (
         <Field
@@ -140,9 +141,9 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
           }
         >
           <div className="flex w-full gap-1">
-            <input
+            <FormInput
               type={masked && !show ? "password" : "text"}
-              className="input input-bordered w-full font-mono"
+              className="w-full font-mono"
               value={cred.value}
               onChange={(e) => onChange({ ...cred, value: e.target.value, keep: false })}
               placeholder={
@@ -168,16 +169,16 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
       {cred.source === "kv" ? (
         <>
           <Field label="Namespace (optional)">
-            <input
+            <FormInput
-              className="input input-bordered w-full font-mono"
+              className="w-full font-mono"
               placeholder="namespace"
               value={cred.namespace}
               onChange={(e) => onChange({ ...cred, namespace: e.target.value })}
             />
           </Field>
           <Field label="Key">
-            <input
+            <FormInput
-              className="input input-bordered w-full font-mono"
+              className="w-full font-mono"
               placeholder="key"
               value={cred.kv}
               onChange={(e) => onChange({ ...cred, kv: e.target.value })}
@@ -191,8 +192,8 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
           label="Secret name"
           hint="Encrypted secret — value is never shown here. Manage it on the Secrets page."
         >
-          <input
+          <FormInput
-            className="input input-bordered w-full font-mono"
+            className="w-full font-mono"
             placeholder="secret name"
             value={cred.secret}
             onChange={(e) => onChange({ ...cred, secret: e.target.value })}
@@ -297,8 +298,8 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
         ) : (
           <form className="mt-3 space-y-4" onSubmit={onSubmit}>
             <Field label="Name">
-              <input
+              <FormInput
-                className="input input-bordered w-full font-mono"
+                className="w-full font-mono"
                 value={form.name}
                 onChange={(e) => setForm({ ...form, name: e.target.value })}
                 required
@@ -308,15 +309,15 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
             </Field>
 
             <Field label="Type">
-              <select
+              <FormSelect
-                className="select select-bordered w-full"
+                className="w-full"
                 value={form.type}
                 onChange={(e) => setForm({ ...form, type: e.target.value })}
               >
                 <option value="bearer">bearer</option>
                 <option value="basic">basic</option>
                 <option value="header">header</option>
-              </select>
+              </FormSelect>
             </Field>
 
             {form.type === "bearer" ? (
@@ -345,8 +346,8 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
             {form.type === "header" ? (
               <>
                 <Field label="Header name">
-                  <input
+                  <FormInput
-                    className="input input-bordered w-full font-mono"
+                    className="w-full font-mono"
                     value={form.header}
                     onChange={(e) => setForm({ ...form, header: e.target.value })}
                     required
@@ -362,9 +363,9 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
             ) : null}
 
             <Field label="Unauthorized status (optional)">
-              <input
+              <FormInput
                 type="number"
-                className="input input-bordered w-full"
+                className="w-full"
                 value={form.unauthorized_status}
                 onChange={(e) => setForm({ ...form, unauthorized_status: e.target.value })}
                 min={100}
@@ -374,8 +375,8 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
             </Field>
 
             <Field label="Unauthorized response page (optional)">
-              <select
+              <FormSelect
-                className="select select-bordered w-full"
+                className="w-full"
                 value={form.unauthorized_response}
                 onChange={(e) => setForm({ ...form, unauthorized_response: e.target.value })}
               >
@@ -385,7 +386,7 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
                     {p.name}
                   </option>
                 ))}
-              </select>
+              </FormSelect>
             </Field>
 
             {upsert.isError ? (

packages/web/src/components/ConfirmDialog.jsx

@@ -0,0 +1,55 @@
+import { Modal } from "./Modal.jsx";
+
+/**
+ * Shared confirm / delete dialog.
+ *
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {string} props.title
+ * @param {import("react").ReactNode} [props.message]
+ * @param {string} [props.confirmLabel]
+ * @param {string} [props.confirmClass]
+ * @param {boolean} [props.loading]
+ * @param {boolean} [props.pending] alias for loading
+ * @param {boolean} [props.confirmDisabled]
+ * @param {import("react").ReactNode} [props.error]
+ * @param {() => void} props.onCancel
+ * @param {() => void} props.onConfirm
+ */
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = "Delete",
+  confirmClass = "btn-error",
+  loading,
+  pending,
+  confirmDisabled = false,
+  error,
+  onCancel,
+  onConfirm,
+}) {
+  const busy = Boolean(loading ?? pending);
+
+  return (
+    <Modal open={open} onClose={onCancel} boxClassName="max-w-md" aria-label={title}>
+      <h3 className="font-bold">{title}</h3>
+      {message ? <div className="mt-2 text-sm opacity-70">{message}</div> : null}
+      {error ? <p className="text-error text-sm mt-2">{error}</p> : null}
+      <div className="modal-action">
+        <button type="button" className="btn btn-ghost" onClick={onCancel} disabled={busy}>
+          Cancel
+        </button>
+        <button
+          type="button"
+          className={`btn ${confirmClass}`}
+          disabled={busy || confirmDisabled}
+          onClick={onConfirm}
+        >
+          {busy ? <span className="loading loading-spinner loading-xs" /> : null}
+          {confirmLabel}
+        </button>
+      </div>
+    </Modal>
+  );
+}

packages/web/src/components/FormControls.jsx

@@ -0,0 +1,27 @@
+/**
+ * Shared DaisyUI form controls — always bordered + sm.
+ */
+
+import { forwardRef } from "react";
+
+export const FormInput = forwardRef(function FormInput({ className = "", ...props }, ref) {
+  return <input ref={ref} className={`input input-bordered input-sm ${className}`.trim()} {...props} />;
+});
+
+export const FormSelect = forwardRef(function FormSelect({ className = "", children, ...props }, ref) {
+  return (
+    <select ref={ref} className={`select select-bordered select-sm ${className}`.trim()} {...props}>
+      {children}
+    </select>
+  );
+});
+
+export const FormTextarea = forwardRef(function FormTextarea({ className = "", ...props }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      className={`textarea textarea-bordered textarea-sm ${className}`.trim()}
+      {...props}
+    />
+  );
+});

packages/web/src/components/Modal.jsx

@@ -0,0 +1,85 @@
+import { useEffect, useId, useRef } from "react";
+
+/**
+ * DaisyUI modal shell with Escape, labeled backdrop close, and a light focus trap.
+ *
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {() => void} props.onClose
+ * @param {import("react").ReactNode} props.children
+ * @param {string} [props.boxClassName]
+ * @param {string} [props["aria-labelledby"]]
+ * @param {string} [props["aria-label"]]
+ */
+export function Modal({
+  open,
+  onClose,
+  children,
+  boxClassName = "",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel,
+}) {
+  const boxRef = useRef(/** @type {HTMLDivElement | null} */ (null));
+  const fallbackId = useId();
+  const labelledBy = ariaLabelledBy || (ariaLabel ? undefined : fallbackId);
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const box = boxRef.current;
+    const previous = /** @type {HTMLElement | null} */ (document.activeElement);
+
+    function focusables() {
+      if (!box) return [];
+      return [
+        ...box.querySelectorAll(
+          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        ),
+      ].filter((el) => el instanceof HTMLElement && !el.hasAttribute("disabled"));
+    }
+
+    const first = focusables()[0];
+    first?.focus();
+
+    function onKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !box) return;
+      const items = focusables();
+      if (items.length === 0) return;
+      const firstEl = items[0];
+      const lastEl = items[items.length - 1];
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault();
+        lastEl.focus();
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault();
+        firstEl.focus();
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      previous?.focus?.();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <dialog className="modal modal-open" aria-modal="true" aria-labelledby={labelledBy} aria-label={ariaLabel}>
+      <div ref={boxRef} className={`modal-box ${boxClassName}`.trim()} id={ariaLabelledBy ? undefined : fallbackId}>
+        {children}
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" aria-label="Close dialog" onClick={onClose}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}

packages/web/src/components/ProfileEditorModal.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { errorMessage } from "../api/client.js";
 import { useOwners, useScripts, useUpsertProfile } from "../api/hooks.js";
+import { FormInput, FormSelect } from "./FormControls.jsx";
 import { ConfigFields } from "./workflow/ConfigFields.jsx";
 
 /**
@@ -83,8 +84,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
               <label className="form-control w-full">
                 <span className="label py-0 text-sm">Owner</span>
                 {owners.length > 0 ? (
-                  <select
+                  <FormSelect
-                    className="select w-full"
+                    className="w-full"
                     value={form.owner}
                     onChange={(e) => setForm({ ...form, owner: e.target.value })}
                     required
@@ -94,10 +95,10 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
                         {o}
                       </option>
                     ))}
-                  </select>
+                  </FormSelect>
                 ) : (
-                  <input
+                  <FormInput
-                    className="input w-full"
+                    className="w-full"
                     value={form.owner}
                     onChange={(e) => setForm({ ...form, owner: e.target.value })}
                     required
@@ -106,8 +107,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
               </label>
               <label className="form-control w-full">
                 <span className="label py-0 text-sm">Name</span>
-                <input
+                <FormInput
-                  className="input w-full font-mono"
+                  className="w-full font-mono"
                   value={form.name}
                   onChange={(e) => setForm({ ...form, name: e.target.value })}
                   required
@@ -127,8 +128,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
           )}
           <label className="form-control w-full">
             <span className="label py-0 text-sm">Script</span>
-            <select
+            <FormSelect
-              className="select w-full font-mono"
+              className="w-full font-mono"
               value={form.script}
               onChange={(e) => {
                 setForm({ ...form, script: e.target.value });
@@ -148,7 +149,7 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
               {form.script && !scripts.some((s) => (typeof s === "string" ? s : s.name) === form.script) ? (
                 <option value={form.script}>{form.script}</option>
               ) : null}
-            </select>
+            </FormSelect>
           </label>
           {scriptChanged && usageCount > 0 ? (
             <p className="text-warning text-sm">
@@ -159,8 +160,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
           ) : null}
           <label className="form-control w-full">
             <span className="label py-0 text-sm">Description</span>
-            <input
+            <FormInput
-              className="input w-full"
+              className="w-full"
               value={form.description}
               onChange={(e) => setForm({ ...form, description: e.target.value })}
               maxLength={500}

packages/web/src/components/SecretEditorModal.jsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { errorMessage } from "../api/client.js";
 import { useOwners, useUpsertSecret } from "../api/hooks.js";
+import { FormInput, FormSelect } from "./FormControls.jsx";
+import { Modal } from "./Modal.jsx";
 
 /**
  * Add / replace an encrypted secret.
@@ -43,8 +45,7 @@ export function SecretEditorModal({
   const title = mode === "add" ? "New secret" : `Replace ${form.owner}/${form.name}`;
 
   return (
-    <dialog className="modal modal-open">
+    <Modal open onClose={onClose} boxClassName="max-w-md" aria-label={title}>
-      <div className="modal-box max-w-md">
       <h3 className="font-bold">{title}</h3>
       <form className="mt-3 space-y-2" onSubmit={onSubmit}>
         {mode === "add" ? (
@@ -52,8 +53,8 @@ export function SecretEditorModal({
             <label className="form-control w-full">
               <span className="label py-0 text-sm">Owner</span>
               {owners.length > 0 ? (
-                  <select
+                <FormSelect
-                    className="select w-full"
+                  className="w-full"
                   value={form.owner}
                   onChange={(e) => setForm({ ...form, owner: e.target.value })}
                   required
@@ -64,10 +65,10 @@ export function SecretEditorModal({
                       {o}
                     </option>
                   ))}
-                  </select>
+                </FormSelect>
               ) : (
-                  <input
+                <FormInput
-                    className="input w-full"
+                  className="w-full"
                   value={form.owner}
                   onChange={(e) => setForm({ ...form, owner: e.target.value })}
                   required
@@ -77,8 +78,8 @@ export function SecretEditorModal({
             </label>
             <label className="form-control w-full">
               <span className="label py-0 text-sm">Name</span>
-                <input
+              <FormInput
-                  className="input w-full font-mono"
+                className="w-full font-mono"
                 value={form.name}
                 onChange={(e) => setForm({ ...form, name: e.target.value })}
                 required
@@ -90,9 +91,9 @@ export function SecretEditorModal({
         ) : null}
         <label className="form-control w-full">
           <span className="label py-0 text-sm">Value</span>
-            <input
+          <FormInput
             type="password"
-              className="input w-full"
+            className="w-full"
             value={form.value}
             onChange={(e) => setForm({ ...form, value: e.target.value })}
             required
@@ -116,12 +117,6 @@ export function SecretEditorModal({
           </button>
         </div>
       </form>
-      </div>
+    </Modal>
-      <form method="dialog" className="modal-backdrop">
-        <button type="button" onClick={onClose}>
-          close
-        </button>
-      </form>
-    </dialog>
   );
 }

packages/web/src/components/UserEditorModal.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { errorMessage } from "../api/client.js";
 import { useCreateUser, useUpdateUser } from "../api/hooks.js";
+import { FormInput, FormSelect } from "./FormControls.jsx";
 
 /**
  * Add / edit a local user.
@@ -61,8 +62,8 @@ export function UserEditorModal({ mode, user, onClose, onSaved }) {
           {mode === "add" ? (
             <label className="form-control w-full">
               <span className="label py-0 text-sm">Username</span>
-              <input
+              <FormInput
-                className="input w-full"
+                className="w-full"
                 value={form.username}
                 onChange={(e) => setForm({ ...form, username: e.target.value })}
                 required
@@ -73,9 +74,9 @@ export function UserEditorModal({ mode, user, onClose, onSaved }) {
             <span className="label py-0 text-sm">
               {mode === "add" ? "Password" : "New password"}
             </span>
-            <input
+            <FormInput
               type="password"
-              className="input w-full"
+              className="w-full"
               value={form.password}
               onChange={(e) => setForm({ ...form, password: e.target.value })}
               required={mode === "add"}
@@ -85,14 +86,14 @@ export function UserEditorModal({ mode, user, onClose, onSaved }) {
           </label>
           <label className="form-control w-full">
             <span className="label py-0 text-sm">Role</span>
-            <select
+            <FormSelect
-              className="select w-full"
+              className="w-full"
               value={form.role}
               onChange={(e) => setForm({ ...form, role: e.target.value })}
             >
               <option value="operator">operator</option>
               <option value="admin">admin</option>
-            </select>
+            </FormSelect>
           </label>
           {mutation.isError ? (
             <p className="text-error text-sm">{errorMessage(mutation.error)}</p>

packages/web/src/components/VariableEditorModal.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { errorMessage } from "../api/client.js";
 import { useOwners, useUpsertVariable } from "../api/hooks.js";
+import { FormInput, FormSelect, FormTextarea } from "./FormControls.jsx";
 
 const TYPES = ["string", "number", "boolean"];
 
@@ -83,8 +84,8 @@ export function VariableEditorModal({
               <label className="form-control w-full">
                 <span className="label py-0 text-sm">Owner</span>
                 {owners.length > 0 ? (
-                  <select
+                  <FormSelect
-                    className="select w-full"
+                    className="w-full"
                     value={form.owner}
                     onChange={(e) => setForm({ ...form, owner: e.target.value })}
                     required
@@ -95,10 +96,10 @@ export function VariableEditorModal({
                         {o}
                       </option>
                     ))}
-                  </select>
+                  </FormSelect>
                 ) : (
-                  <input
+                  <FormInput
-                    className="input w-full"
+                    className="w-full"
                     value={form.owner}
                     onChange={(e) => setForm({ ...form, owner: e.target.value })}
                     required
@@ -108,8 +109,8 @@ export function VariableEditorModal({
               </label>
               <label className="form-control w-full">
                 <span className="label py-0 text-sm">Name</span>
-                <input
+                <FormInput
-                  className="input w-full font-mono"
+                  className="w-full font-mono"
                   value={form.name}
                   onChange={(e) => setForm({ ...form, name: e.target.value })}
                   required
@@ -121,8 +122,8 @@ export function VariableEditorModal({
           ) : null}
           <label className="form-control w-full">
             <span className="label py-0 text-sm">Type</span>
-            <select
+            <FormSelect
-              className="select w-full"
+              className="w-full"
               value={form.type}
               onChange={(e) => onTypeChange(e.target.value)}
             >
@@ -131,31 +132,31 @@ export function VariableEditorModal({
                   {t}
                 </option>
               ))}
-            </select>
+            </FormSelect>
           </label>
           <label className="form-control w-full">
             <span className="label py-0 text-sm">Value</span>
             {form.type === "boolean" ? (
-              <select
+              <FormSelect
-                className="select w-full"
+                className="w-full"
                 value={form.value === true ? "true" : "false"}
                 onChange={(e) => setForm({ ...form, value: e.target.value === "true" })}
               >
                 <option value="true">true</option>
                 <option value="false">false</option>
-              </select>
+              </FormSelect>
             ) : form.type === "number" ? (
-              <input
+              <FormInput
                 type="number"
-                className="input w-full font-mono"
+                className="w-full font-mono"
                 value={form.value}
                 onChange={(e) => setForm({ ...form, value: e.target.value })}
                 required
                 step="any"
               />
             ) : (
-              <textarea
+              <FormTextarea
-                className="textarea w-full font-mono min-h-24"
+                className="w-full font-mono min-h-24"
                 value={form.value}
                 onChange={(e) => setForm({ ...form, value: e.target.value })}
                 spellCheck={false}

packages/web/src/components/workflow/AddScriptDialog.jsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { useProfiles, useScripts } from "../../api/hooks.js";
+import { FormInput } from "../FormControls.jsx";
 import { ScriptIcon } from "../ScriptIcon.jsx";
 import { scriptTags } from "../../lib/script.js";
 
@@ -66,8 +67,8 @@ export function AddScriptDialog({ open, onClose, onPick, owner }) {
             Profiles
           </button>
         </div>
-        <input
+        <FormInput
-          className="input input-sm w-full mt-3"
+          className="w-full mt-3"
           placeholder={tab === "profiles" ? "Search profiles" : "Search scripts"}
           value={q}
           onChange={(e) => setQ(e.target.value)}

packages/web/src/components/workflow/ConfigFields.jsx

@@ -4,6 +4,7 @@ import { LuEye, LuEyeOff, LuExternalLink, LuPlus, LuTrash2 } from "react-icons/l
 import { useVariables } from "../../api/hooks.js";
 import { triggerDestinations } from "../../lib/workflow-doc.js";
 import { prettyJson } from "../../lib/script.js";
+import { FormInput, FormSelect, FormTextarea } from "../FormControls.jsx";
 import { FieldLabel } from "./FieldHelp.jsx";
 
 const MULTILINE_KEYS = new Set(["expression", "jsonata"]);
@@ -197,8 +198,8 @@ function EditableText({ value, onCommit, className = "", placeholder = "…", di
   }
 
   return (
-    <input
+    <FormInput
-      className={`input input-sm w-full ${className}`}
+      className={`w-full ${className}`.trim()}
       value={draft}
       autoFocus
       onChange={(e) => setDraft(e.target.value)}
@@ -239,8 +240,8 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
     const current = value === undefined || value === null ? fallback : value;
     const known = options.some((o) => o.value === current);
     return (
-      <select
+      <FormSelect
-        className="select select-sm w-full"
+        className="w-full"
         value={current === undefined || current === null ? "" : String(current)}
         onChange={(e) => {
           const next = e.target.value;
@@ -262,7 +263,7 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
         {known || current === "" || current == null ? null : (
           <option value={String(current)}>{String(current)}</option>
         )}
-      </select>
+      </FormSelect>
     );
   }
 
@@ -280,9 +281,9 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
 
   if (type === "number") {
     return (
-      <input
+      <FormInput
         type="number"
-        className="input input-sm w-full"
+        className="w-full"
         value={value ?? ""}
         disabled={disabled}
         onChange={(e) => {
@@ -329,8 +330,8 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
   const multiline = MULTILINE_KEYS.has(fieldKey) || str.includes("\n");
   if (multiline) {
     return (
-      <textarea
+      <FormTextarea
-        className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
+        className="w-full min-h-24 font-mono text-xs"
         value={str}
         disabled={disabled}
         onChange={(e) => onChange(e.target.value)}
@@ -347,8 +348,8 @@ function JsonOrTextArea({ text, onCommit, disabled }) {
     setDraft(text);
   }, [text]);
   return (
-    <textarea
+    <FormTextarea
-      className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
+      className="w-full min-h-24 font-mono text-xs"
       value={draft}
       disabled={disabled}
       onChange={(e) => setDraft(e.target.value)}
@@ -441,8 +442,8 @@ function WorkflowNamePicker({ value, onChange, workflows, owner, excludeFile, di
 
   return (
     <div className="space-y-1">
-      <select
+      <FormSelect
-        className="select select-sm w-full"
+        className="w-full"
         value={selectValue}
         disabled={disabled}
         onChange={(e) => {
@@ -464,10 +465,10 @@ function WorkflowNamePicker({ value, onChange, workflows, owner, excludeFile, di
           </option>
         ))}
         <option value="__custom__">Custom…</option>
-      </select>
+      </FormSelect>
       {selectValue === "__custom__" ? (
-        <input
+        <FormInput
-          className="input input-sm w-full font-mono"
+          className="w-full font-mono"
           value={value}
           disabled={disabled}
           onChange={(e) => onChange(e.target.value)}

packages/web/src/components/workflow/ScriptCard.jsx

@@ -5,6 +5,7 @@ import { LuChevronDown, LuGripVertical, LuMaximize2, LuMinimize2, LuPlay, LuTras
 import { useDryRunScript, useScript } from "../../api/hooks.js";
 import { errorMessage } from "../../api/client.js";
 import { CodeEditor } from "../CodeEditor.jsx";
+import { FormInput, FormSelect, FormTextarea } from "../FormControls.jsx";
 import { LogViewer } from "../LogViewer.jsx";
 import { StatusBadge } from "../../lib/format.jsx";
 import { contextFromMeta, prettyJson } from "../../lib/script.js";
@@ -178,8 +179,8 @@ export function ScriptCard({
                   required
                   description="JSONata evaluated against ctx (data, context, config). Result becomes the next step's data."
                 />
-                <textarea
+                <FormTextarea
-                  className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
+                  className="w-full min-h-24 font-mono text-xs"
                   value={step.expression ?? ""}
                   disabled={disabled}
                   onChange={(e) => onChange({ ...step, expression: e.target.value })}
@@ -204,8 +205,8 @@ export function ScriptCard({
               <div className="collapse-content space-y-2">
                 <label className="form-control">
                   <span className="label py-0 text-sm">id</span>
-                  <input
+                  <FormInput
-                    className={`input input-sm font-mono ${duplicateId ? "input-error" : ""}`}
+                    className={`font-mono ${duplicateId ? "input-error" : ""}`}
                     value={step.id ?? ""}
                     disabled={disabled}
                     onChange={(e) => onChange({ ...step, id: e.target.value })}
@@ -223,8 +224,8 @@ export function ScriptCard({
                 />
                 <label className="form-control">
                   <span className="label py-0 text-sm">when</span>
-                  <input
+                  <FormInput
-                    className="input input-sm w-full font-mono"
+                    className="w-full font-mono"
                     value={step.when ?? ""}
                     disabled={disabled || Boolean(step.needs)}
                     onChange={(e) => onChange({ ...step, when: e.target.value })}
@@ -265,8 +266,7 @@ function NeedsEditor({ step, otherSteps, disabled, onChange }) {
   return (
     <div className="space-y-1">
       <span className="label py-0 text-sm">needs</span>
-      <select
+      <FormSelect
-        className="select select-sm"
         value={mode}
         disabled={disabled}
         onChange={(e) => setMode(e.target.value)}
@@ -274,7 +274,7 @@ function NeedsEditor({ step, otherSteps, disabled, onChange }) {
         <option value="none">None (trigger data / previous output)</option>
         <option value="list">List of step ids</option>
         <option value="map">Map alias → step id</option>
-      </select>
+      </FormSelect>
       {mode === "list" ? (
         <div className="flex flex-wrap gap-2 pt-1">
           {ids.length === 0 ? (
@@ -324,8 +324,8 @@ function NeedsMap({ needs, ids, disabled, onChange }) {
     <div className="space-y-1">
       {entries.map(([alias, from]) => (
         <div key={alias} className="flex gap-1">
-          <input
+          <FormInput
-            className="input input-sm font-mono w-28"
+            className="font-mono w-28"
             value={alias}
             disabled={disabled}
             onChange={(e) => {
@@ -336,8 +336,8 @@ function NeedsMap({ needs, ids, disabled, onChange }) {
               onChange(next);
             }}
           />
-          <select
+          <FormSelect
-            className="select select-sm flex-1"
+            className="flex-1"
             value={from}
             disabled={disabled}
             onChange={(e) => onChange({ ...needs, [alias]: e.target.value })}
@@ -348,7 +348,7 @@ function NeedsMap({ needs, ids, disabled, onChange }) {
                 {id}
               </option>
             ))}
-          </select>
+          </FormSelect>
           <button
             type="button"
             className="btn btn-ghost btn-xs"

packages/web/src/components/workflow/TriggerCard.jsx

@@ -5,6 +5,7 @@ import { CSS } from "@dnd-kit/utilities";
 import cronstrue from "cronstrue";
 import { namespacedPath, HTTP_METHODS, triggerDestinations } from "../../lib/workflow-doc.js";
 import { CRON_CUSTOM, CRON_PRESETS, matchCronPreset, scheduleForPreset } from "../../lib/cron-presets.js";
+import { FormInput, FormSelect } from "../FormControls.jsx";
 
 export function TriggerCard({
   trigger,
@@ -169,8 +170,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
   return (
     <div className="space-y-3">
       <Field label="Method">
-        <select
+        <FormSelect
-          className="select select-bordered select-sm w-full"
+          className="w-full"
           value={trigger.method || "POST"}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, method: e.target.value })}
@@ -183,12 +184,12 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
           {HTTP_METHODS.includes(trigger.method || "POST") ? null : (
             <option value={trigger.method}>{trigger.method}</option>
           )}
-        </select>
+        </FormSelect>
       </Field>
 
       <Field label="Path">
-        <input
+        <FormInput
-          className="input input-bordered input-sm w-full font-mono"
+          className="w-full font-mono"
           value={trigger.path ?? ""}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, path: e.target.value })}
@@ -198,8 +199,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
 
       <Field label="URL">
         <div className="flex w-full items-center gap-1">
-          <input
+          <FormInput
-            className="input input-bordered input-sm w-full font-mono opacity-80"
+            className="w-full font-mono opacity-80"
             value={url}
             readOnly
             tabIndex={-1}
@@ -224,8 +225,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
       />
 
       <Field label="Response page">
-        <select
+        <FormSelect
-          className="select select-bordered select-sm w-full"
+          className="w-full"
           value={trigger.response ?? ""}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, response: e.target.value })}
@@ -239,7 +240,7 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
           {trigger.response && !pages.some((p) => p.name === trigger.response) ? (
             <option value={trigger.response}>{trigger.response}</option>
           ) : null}
-        </select>
+        </FormSelect>
       </Field>
 
       <FailureAlertFields
@@ -343,10 +344,10 @@ function AuthPicker({ auths, selectedIds, inlineCount, disabled, onChange }) {
 
       <div className="relative w-full">
         <div className="join w-full">
-          <input
+          <FormInput
             ref={inputRef}
             type="search"
-            className="input input-bordered input-sm join-item w-full min-w-0"
+            className="join-item w-full min-w-0"
             placeholder={auths.length === 0 ? "No auth profiles yet" : "Add auth…"}
             value={query}
             disabled={disabled || auths.length === 0}
@@ -424,8 +425,7 @@ function CronFields({ trigger, disabled, onChange, alertDestinations }) {
     <div className="space-y-2">
       <label className="form-control">
         <span className="label py-0 text-sm">Preset</span>
-        <select
+        <FormSelect
-          className="select select-sm"
           value={preset}
           disabled={disabled}
           onChange={(e) => {
@@ -441,12 +441,12 @@ function CronFields({ trigger, disabled, onChange, alertDestinations }) {
             </option>
           ))}
           <option value={CRON_CUSTOM}>Custom</option>
-        </select>
+        </FormSelect>
       </label>
       <label className="form-control">
         <span className="label py-0 text-sm">Schedule</span>
-        <input
+        <FormInput
-          className="input input-sm font-mono"
+          className="font-mono"
           value={trigger.schedule ?? ""}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, schedule: e.target.value })}
@@ -473,8 +473,8 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
     <div className="space-y-3 border-t border-base-300 pt-3">
       <p className="text-sm font-medium opacity-80">Failure alert</p>
       <Field label="Consecutive failures">
-        <input
+        <FormInput
-          className="input input-bordered input-sm w-full"
+          className="w-full"
           type="number"
           min="1"
           step="1"
@@ -496,8 +496,8 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
           </>
         }
       >
-        <select
+        <FormSelect
-          className="select select-bordered select-sm w-full"
+          className="w-full"
           value={trigger.onFailureWorkflow ?? ""}
           disabled={disabled}
           onChange={(e) => onChange({ ...trigger, onFailureWorkflow: e.target.value })}
@@ -514,7 +514,7 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
           ) ? (
             <option value={trigger.onFailureWorkflow}>{trigger.onFailureWorkflow}</option>
           ) : null}
-        </select>
+        </FormSelect>
       </Field>
     </div>
   );

packages/web/src/components/workflow/WorkflowHistoryPanel.jsx

@@ -12,7 +12,7 @@ import {
   isSaveWarningsError,
   saveWarningsFromError,
 } from "./SaveWorkflowWarningsDialog.jsx";
-import { ConfirmDialog } from "./WorkflowRevisionBanner.jsx";
+import { ConfirmDialog } from "../ConfirmDialog.jsx";
 
 function reasonLabel(reason, meta) {
   if (reason === "duplicated" && meta?.from) return `duplicated from ${meta.from}`;
@@ -127,6 +127,7 @@ export function WorkflowHistoryPanel({
                       type="button"
                       className="btn btn-ghost btn-xs shrink-0"
                       title="Revert to this revision"
+                      aria-label="Revert to this revision"
                       disabled={revert.isPending}
                       onClick={(e) => {
                         e.stopPropagation();
@@ -152,6 +153,7 @@ export function WorkflowHistoryPanel({
           title={`Revert to revision #${confirmRev.revision}?`}
           message={`This replaces the live workflow with revision #${confirmRev.revision} from ${formatTime(confirmRev.created_at)} and creates a new revision.`}
           confirmLabel="Revert"
+          confirmClass="btn-warning"
           pending={revert.isPending}
           onCancel={() => setConfirmRevision(null)}
           onConfirm={() => doRevert(confirmRev.revision, false)}

packages/web/src/components/workflow/WorkflowRevisionBanner.jsx

@@ -4,52 +4,13 @@ import { errorMessage } from "../../api/client.js";
 import { useRevertWorkflowRevision } from "../../api/hooks.js";
 import { formatTime } from "../../lib/format.jsx";
 import { useNotifications } from "../../notifications.jsx";
+import { ConfirmDialog } from "../ConfirmDialog.jsx";
 import {
   SaveWorkflowWarningsDialog,
   isSaveWarningsError,
   saveWarningsFromError,
 } from "./SaveWorkflowWarningsDialog.jsx";
 
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  confirmLabel,
-  confirmClass = "btn-warning",
-  pending,
-  onCancel,
-  onConfirm,
-}) {
-  if (!open) return null;
-  return (
-    <dialog className="modal modal-open">
-      <div className="modal-box max-w-md">
-        <h3 className="font-bold">{title}</h3>
-        <p className="mt-2 text-sm opacity-70">{message}</p>
-        <div className="modal-action">
-          <button type="button" className="btn btn-ghost" onClick={onCancel}>
-            Cancel
-          </button>
-          <button
-            type="button"
-            className={`btn ${confirmClass}`}
-            disabled={pending}
-            onClick={onConfirm}
-          >
-            {pending ? <span className="loading loading-spinner loading-xs" /> : null}
-            {confirmLabel}
-          </button>
-        </div>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button type="button" onClick={onCancel}>
-          close
-        </button>
-      </form>
-    </dialog>
-  );
-}
-
 export function WorkflowRevisionBanner({
   owner,
   file,
@@ -110,6 +71,7 @@ export function WorkflowRevisionBanner({
         title={`Revert to revision #${revision}?`}
         message={`This replaces the live workflow with revision #${revision} from ${formatTime(createdAt)} and creates a new revision.`}
         confirmLabel="Revert"
+        confirmClass="btn-warning"
         pending={revert.isPending}
         onCancel={() => setConfirmOpen(false)}
         onConfirm={() => doRevert(false)}
@@ -125,5 +87,3 @@ export function WorkflowRevisionBanner({
     </>
   );
 }
-
-export { ConfirmDialog };

packages/web/src/components/workflow/WorkflowVisualEditor.jsx

@@ -4,6 +4,7 @@ import { useHttpAuths, useHttpPages, useProfiles, useScripts, useWorkflows } fro
 import { dataFromInputMeta, firstInputMeta } from "../../lib/script.js";
 import { workflowToFlowchart } from "../../lib/workflow-mermaid.js";
 import { parseWorkflowYaml, stringifyWorkflowDoc } from "../../lib/workflow-doc.js";
+import { FormInput, FormTextarea } from "../FormControls.jsx";
 import { ScriptsTab } from "./ScriptsTab.jsx";
 import { TriggersTab } from "./TriggersTab.jsx";
 import { YamlTab } from "./YamlTab.jsx";
@@ -119,8 +120,8 @@ export function WorkflowVisualEditor({
     <>
       <div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
         {extraChrome}
-        <input
+        <FormInput
-          className="input input-sm sm:max-w-xs"
+          className="sm:max-w-xs"
           placeholder="name"
           value={displayDoc?.name ?? ""}
           disabled={visualDisabled}
@@ -130,8 +131,8 @@ export function WorkflowVisualEditor({
             })
           }
         />
-        <textarea
+        <FormTextarea
-          className="textarea textarea-sm min-h-10 w-full sm:max-w-md"
+          className="min-h-10 w-full sm:max-w-md"
           placeholder="description"
           rows={1}
           value={displayDoc?.description ?? ""}

packages/web/src/pages/AuthProfilesPage.jsx

@@ -8,6 +8,7 @@ import {
   useHttpAuths,
 } from "../api/hooks.js";
 import { AuthEditorModal } from "../components/AuthEditorModal.jsx";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { formatTime } from "../lib/format.jsx";
 
 function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
@@ -66,7 +67,7 @@ function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
         type="button"
         className="btn btn-ghost btn-xs btn-square"
         title={shown ? "Hide" : "Reveal"}
-        aria-label={shown ? "Hide value" : "Reveal value"}
+        aria-label={shown ? "Hide" : "Reveal"}
         disabled={loading}
         onClick={(e) => {
           e.stopPropagation();
@@ -241,6 +242,7 @@ export function AuthProfilesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
+                      aria-label="Edit"
                       onClick={() => navigate(`/auth/${encodeURIComponent(a.name)}/edit`)}
                     >
                       <LuPencil className="size-4" />
@@ -249,6 +251,7 @@ export function AuthProfilesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
                       title="Delete"
+                      aria-label="Delete"
                       onClick={() => setConfirmDelete(a)}
                     >
                       <LuTrash2 className="size-4" />
@@ -278,39 +281,17 @@ export function AuthProfilesPage() {
         />
       ) : null}
 
-      {confirmDelete ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmDelete)}
-          <div className="modal-box">
+        title={confirmDelete ? `Delete ${confirmDelete.name}?` : ""}
-            <h3 className="font-bold">Delete {confirmDelete.name}?</h3>
+        message="Workflows that reference this profile will fail auth until updated."
-            <p className="text-sm mt-2">
+        error={del.isError ? errorMessage(del.error) : null}
-              Workflows that reference this profile will fail auth until updated.
+        loading={del.isPending}
-            </p>
+        onCancel={() => setConfirmDelete(null)}
-            {del.isError ? (
+        onConfirm={() =>
-              <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
-            ) : null}
-            <div className="modal-action">
-              <button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={del.isPending}
-                onClick={() =>
           del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
         }
-              >
+      />
-                Delete
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/BackupPage.jsx

@@ -5,6 +5,7 @@ import {
   useDownloadWorkflowBackup,
   useRestoreWorkflowBackup,
 } from "../api/hooks.js";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { useNotifications } from "../notifications.jsx";
 
 export function BackupPage() {
@@ -120,40 +121,23 @@ export function BackupPage() {
         </div>
       </section>
 
-      {pendingFile ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(pendingFile)}
-          <div className="modal-box">
+        title="Replace with this backup?"
-            <h3 className="font-bold">Replace with this backup?</h3>
+        message={
-            <p className="mt-2 text-sm opacity-70">
+          pendingFile ? (
+            <>
               Current workflows and plugins will be deleted, then{" "}
-              <span className="font-mono">{pendingFile.name}</span> will be
+              <span className="font-mono">{pendingFile.name}</span> will be restored. This cannot
-              restored. This cannot be undone from this page.
+              be undone from this page.
-            </p>
+            </>
-            <div className="modal-action">
+          ) : null
-              <button
+        }
-                type="button"
+        confirmLabel="Replace"
-                className="btn btn-ghost"
+        loading={restoreBackup.isPending}
-                onClick={() => setPendingFile(null)}
+        onCancel={() => setPendingFile(null)}
-              >
+        onConfirm={() => restore(pendingFile, "replace")}
-                Cancel
+      />
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={restoreBackup.isPending}
-                onClick={() => restore(pendingFile, "replace")}
-              >
-                Replace
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setPendingFile(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/KvPage.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useKv, useKvNamespaces } from "../api/hooks.js";
+import { FormSelect } from "../components/FormControls.jsx";
 import { formatTime } from "../lib/format.jsx";
 
 const PAGE_SIZE = 50;
@@ -48,8 +49,8 @@ export function KvPage() {
     <div className="space-y-4">
       <h1 className="text-xl font-semibold">KV</h1>
       <div className="flex flex-col sm:flex-row gap-2">
-        <select
+        <FormSelect
-          className="select select-sm w-full sm:max-w-xs"
+          className="w-full sm:max-w-xs"
           value={namespace}
           onChange={(e) => update("namespace", e.target.value)}
         >
@@ -59,7 +60,7 @@ export function KvPage() {
               {ns}
             </option>
           ))}
-        </select>
+        </FormSelect>
         <input
           className="input input-sm w-full sm:max-w-sm"
           placeholder="search key or value"
@@ -93,6 +94,15 @@ export function KvPage() {
                       key={id}
                       className="hover cursor-pointer"
                       onClick={() => setExpanded(open ? null : id)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          setExpanded(open ? null : id);
+                        }
+                      }}
+                      role="button"
+                      tabIndex={0}
+                      aria-expanded={open}
                     >
                       <td className="font-mono text-xs align-top">{item.namespace}</td>
                       <td className="font-mono text-xs align-top">{item.key}</td>

packages/web/src/pages/ProfilesPage.jsx

@@ -3,6 +3,8 @@ import { useLocation, useNavigate, useParams, useSearchParams } from "react-rout
 import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
 import { useDeleteProfile, useOwners, useProfileUsage, useProfiles } from "../api/hooks.js";
+import { FormSelect } from "../components/FormControls.jsx";
+import { Modal } from "../components/Modal.jsx";
 import { ProfileEditorModal } from "../components/ProfileEditorModal.jsx";
 import { ScriptIcon } from "../components/ScriptIcon.jsx";
 import { formatTime } from "../lib/format.jsx";
@@ -129,8 +131,7 @@ export function ProfilesPage() {
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
         <h1 className="text-xl font-semibold">Profiles</h1>
         <div className="flex gap-2">
-          <select
+          <FormSelect
-            className="select select-sm"
             value={ownerFilter}
             onChange={(e) => {
               setOwnerFilter(e.target.value);
@@ -149,7 +150,7 @@ export function ProfilesPage() {
                 {o}
               </option>
             ))}
-          </select>
+          </FormSelect>
           <button
             type="button"
             className="btn btn-primary btn-sm"
@@ -224,6 +225,7 @@ export function ProfilesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
+                      aria-label="Edit"
                       onClick={() =>
                         navigate(
                           `/profiles/${encodeURIComponent(row.owner)}/${encodeURIComponent(row.name)}/edit`,
@@ -237,6 +239,7 @@ export function ProfilesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
                       title="Delete"
+                      aria-label="Delete"
                       onClick={() => setConfirmDelete({ ...row, force: false })}
                     >
                       <LuTrash2 className="size-4" />
@@ -281,13 +284,11 @@ function DeleteProfileDialog({ profile, del, onClose }) {
   const usage = useProfileUsage(profile.id, true);
   const usages = usage.data ?? [];
   const used = usages.length > 0;
+  const title = `Delete ${profile.owner}/${profile.name}?`;
 
   return (
-    <dialog className="modal modal-open">
+    <Modal open onClose={onClose} boxClassName="max-w-md" aria-label={title}>
-      <div className="modal-box">
+      <h3 className="font-bold">{title}</h3>
-        <h3 className="font-bold">
-          Delete {profile.owner}/{profile.name}?
-        </h3>
       {usage.isLoading ? (
         <p className="text-sm mt-2 opacity-70">Checking workflow usage…</p>
       ) : used ? (
@@ -335,12 +336,6 @@ function DeleteProfileDialog({ profile, del, onClose }) {
           </button>
         )}
       </div>
-      </div>
+    </Modal>
-      <form method="dialog" className="modal-backdrop">
-        <button type="button" onClick={onClose}>
-          close
-        </button>
-      </form>
-    </dialog>
   );
 }

packages/web/src/pages/ResponsesPage.jsx

@@ -6,6 +6,7 @@ import {
   useHttpPages,
   useUpsertHttpPage,
 } from "../api/hooks.js";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { formatTime } from "../lib/format.jsx";
 
 const emptyForm = {
@@ -116,6 +117,7 @@ export function ResponsesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
+                      aria-label="Edit"
                       onClick={() => openEdit(p)}
                     >
                       <LuPencil className="size-4" />
@@ -124,6 +126,7 @@ export function ResponsesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
                       title={p.system ? "System pages cannot be deleted" : "Delete"}
+                      aria-label={p.system ? "System pages cannot be deleted" : "Delete"}
                       disabled={p.system}
                       onClick={() => setConfirmDelete(p)}
                     >
@@ -227,39 +230,18 @@ export function ResponsesPage() {
         </form>
       ) : null}
 
-      {confirmDelete ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmDelete)}
-          <div className="modal-box">
+        title={confirmDelete ? `Delete ${confirmDelete.name}?` : ""}
-            <h3 className="font-bold">Delete {confirmDelete.name}?</h3>
+        message="Workflows that reference this page will fail validation on next save."
-            <p className="text-sm mt-2">
+        error={del.isError ? errorMessage(del.error) : null}
-              Workflows that reference this page will fail validation on next save.
+        loading={del.isPending}
-            </p>
+        confirmDisabled={Boolean(confirmDelete?.system)}
-            {del.isError ? (
+        onCancel={() => setConfirmDelete(null)}
-              <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
+        onConfirm={() =>
-            ) : null}
-            <div className="modal-action">
-              <button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={del.isPending || confirmDelete.system}
-                onClick={() =>
           del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
         }
-              >
+      />
-                Delete
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/ScriptsPage.jsx

@@ -8,6 +8,7 @@ import {
   useInstallPlugin,
   useScripts,
 } from "../api/hooks.js";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { ScriptIcon } from "../components/ScriptIcon.jsx";
 import { TagBadge } from "../components/TagBadge.jsx";
 import { scriptTags } from "../lib/script.js";
@@ -156,6 +157,7 @@ export function ScriptsPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Dry run"
+                      aria-label="Dry run"
                       onClick={() =>
                         navigate(`/scripts/${encodeURIComponent(name)}/dry-run`)
                       }
@@ -167,6 +169,7 @@ export function ScriptsPage() {
                         type="button"
                         className="btn btn-ghost btn-xs"
                         title="Fork"
+                        aria-label="Fork"
                         onClick={() => {
                           setForkFor(name);
                           setForkId(
@@ -183,6 +186,7 @@ export function ScriptsPage() {
                         to={`/scripts/${encodeURIComponent(name)}/edit`}
                         className="btn btn-ghost btn-xs"
                         title="Edit"
+                        aria-label="Edit"
                       >
                         <LuPencil className="size-4" />
                       </Link>
@@ -192,6 +196,7 @@ export function ScriptsPage() {
                         type="button"
                         className="btn btn-ghost btn-xs text-error"
                         title="Delete"
+                        aria-label="Delete"
                         onClick={() => setConfirmDelete(name)}
                       >
                         <LuTrash2 className="size-4" />
@@ -259,43 +264,19 @@ export function ScriptsPage() {
         </dialog>
       ) : null}
 
-      {confirmDelete ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmDelete)}
-          <div className="modal-box">
+        title={confirmDelete ? `Delete ${confirmDelete}?` : ""}
-            <h3 className="font-semibold">Delete {confirmDelete}?</h3>
+        message="This uninstalls the plugin."
-            <p className="text-sm opacity-70 py-2">This uninstalls the plugin.</p>
+        error={del.isError ? errorMessage(del.error) : null}
-            {del.isError ? (
+        loading={del.isPending}
-              <p className="text-error text-sm">{errorMessage(del.error)}</p>
+        onCancel={() => setConfirmDelete(null)}
-            ) : null}
+        onConfirm={() =>
-            <div className="modal-action">
-              <button
-                type="button"
-                className="btn btn-ghost btn-sm"
-                onClick={() => setConfirmDelete(null)}
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error btn-sm"
-                disabled={del.isPending}
-                onClick={() =>
           del.mutate(confirmDelete, {
             onSuccess: () => setConfirmDelete(null),
           })
         }
-              >
+      />
-                Delete
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/SecretsPage.jsx

@@ -3,6 +3,8 @@ import { useLocation, useNavigate, useParams, useSearchParams } from "react-rout
 import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
 import { useDeleteSecret, useOwners, useSecrets } from "../api/hooks.js";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
+import { FormSelect } from "../components/FormControls.jsx";
 import { SecretEditorModal } from "../components/SecretEditorModal.jsx";
 import { formatTime } from "../lib/format.jsx";
 
@@ -81,8 +83,7 @@ export function SecretsPage() {
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
         <h1 className="text-xl font-semibold">Secrets</h1>
         <div className="flex gap-2">
-          <select
+          <FormSelect
-            className="select select-sm"
             value={ownerFilter}
             onChange={(e) => {
               setOwnerFilter(e.target.value);
@@ -101,7 +102,7 @@ export function SecretsPage() {
                 {o}
               </option>
             ))}
-          </select>
+          </FormSelect>
           <button
             type="button"
             className="btn btn-primary btn-sm"
@@ -154,6 +155,7 @@ export function SecretsPage() {
                         type="button"
                         className="btn btn-ghost btn-xs"
                         title="Replace value"
+                        aria-label="Replace value"
                         onClick={() =>
                           navigate(
                             `/secrets/${encodeURIComponent(s.owner)}/${encodeURIComponent(s.name)}/edit`,
@@ -166,6 +168,7 @@ export function SecretsPage() {
                         type="button"
                         className="btn btn-ghost btn-xs text-error"
                         title="Delete"
+                        aria-label="Delete"
                         onClick={() => setConfirmDelete(s)}
                       >
                         <LuTrash2 className="size-4" />
@@ -190,41 +193,17 @@ export function SecretsPage() {
         />
       ) : null}
 
-      {confirmDelete ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmDelete)}
-          <div className="modal-box">
+        title={confirmDelete ? `Delete ${confirmDelete.owner}/${confirmDelete.name}?` : ""}
-            <h3 className="font-bold">
+        message="This cannot be undone. Workflows that retrieve this name will fail."
-              Delete {confirmDelete.owner}/{confirmDelete.name}?
+        error={del.isError ? errorMessage(del.error) : null}
-            </h3>
+        loading={del.isPending}
-            <p className="text-sm mt-2">
+        onCancel={() => setConfirmDelete(null)}
-              This cannot be undone. Workflows that retrieve this name will fail.
+        onConfirm={() =>
-            </p>
-            {del.isError ? (
-              <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
-            ) : null}
-            <div className="modal-action">
-              <button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={del.isPending}
-                onClick={() =>
           del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
         }
-              >
+      />
-                Delete
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/UsersPage.jsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
 import { useDeleteUser, useUsers } from "../api/hooks.js";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { UserEditorModal } from "../components/UserEditorModal.jsx";
 
 export function UsersPage() {
@@ -88,6 +89,7 @@ export function UsersPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
+                      aria-label="Edit"
                       onClick={() =>
                         navigate(`/users/${encodeURIComponent(u.username)}/edit`)
                       }
@@ -98,6 +100,7 @@ export function UsersPage() {
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
                       title="Delete"
+                      aria-label="Delete"
                       onClick={() => setConfirmDelete(u)}
                     >
                       <LuTrash2 className="size-4" />
@@ -118,36 +121,16 @@ export function UsersPage() {
         />
       ) : null}
 
-      {confirmDelete ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmDelete)}
-          <div className="modal-box">
+        title={confirmDelete ? `Delete ${confirmDelete.username}?` : ""}
-            <h3 className="font-bold">Delete {confirmDelete.username}?</h3>
+        error={del.isError ? errorMessage(del.error) : null}
-            {del.isError ? (
+        loading={del.isPending}
-              <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
+        onCancel={() => setConfirmDelete(null)}
-            ) : null}
+        onConfirm={() =>
-            <div className="modal-action">
-              <button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={del.isPending}
-                onClick={() =>
           del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
         }
-              >
+      />
-                Delete
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/VariablesPage.jsx

@@ -3,6 +3,8 @@ import { useLocation, useNavigate, useParams, useSearchParams } from "react-rout
 import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
 import { useDeleteVariable, useOwners, useVariables } from "../api/hooks.js";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
+import { FormSelect } from "../components/FormControls.jsx";
 import { VariableEditorModal } from "../components/VariableEditorModal.jsx";
 import { formatTime } from "../lib/format.jsx";
 
@@ -110,8 +112,7 @@ export function VariablesPage() {
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
         <h1 className="text-xl font-semibold">Variables</h1>
         <div className="flex gap-2">
-          <select
+          <FormSelect
-            className="select select-sm"
             value={ownerFilter}
             onChange={(e) => {
               setOwnerFilter(e.target.value);
@@ -130,7 +131,7 @@ export function VariablesPage() {
                 {o}
               </option>
             ))}
-          </select>
+          </FormSelect>
           <button
             type="button"
             className="btn btn-primary btn-sm"
@@ -192,6 +193,7 @@ export function VariablesPage() {
                         type="button"
                         className="btn btn-ghost btn-xs"
                         title="Edit"
+                        aria-label="Edit"
                         onClick={() =>
                           navigate(
                             `/variables/${encodeURIComponent(row.owner)}/${encodeURIComponent(row.name)}/edit`,
@@ -204,6 +206,7 @@ export function VariablesPage() {
                         type="button"
                         className="btn btn-ghost btn-xs text-error"
                         title="Delete"
+                        aria-label="Delete"
                         onClick={() => setConfirmDelete(row)}
                       >
                         <LuTrash2 className="size-4" />
@@ -228,41 +231,21 @@ export function VariablesPage() {
         />
       ) : null}
 
-      {confirmDelete ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmDelete)}
-          <div className="modal-box">
+        title={confirmDelete ? `Delete ${confirmDelete.owner}/${confirmDelete.name}?` : ""}
-            <h3 className="font-bold">
+        message={
-              Delete {confirmDelete.owner}/{confirmDelete.name}?
+          confirmDelete
-            </h3>
+            ? `This cannot be undone. Workflows that reference $VAR_${confirmDelete.name} will fail.`
-            <p className="text-sm mt-2">
+            : ""
-              This cannot be undone. Workflows that reference $VAR_{confirmDelete.name} will fail.
+        }
-            </p>
+        error={del.isError ? errorMessage(del.error) : null}
-            {del.isError ? (
+        loading={del.isPending}
-              <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
+        onCancel={() => setConfirmDelete(null)}
-            ) : null}
+        onConfirm={() =>
-            <div className="modal-action">
-              <button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={del.isPending}
-                onClick={() =>
           del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
         }
-              >
+      />
-                Delete
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/WorkflowEditPage.jsx

@@ -20,10 +20,8 @@ import {
   saveErrorMessage,
   saveWarningsFromError,
 } from "../components/workflow/SaveWorkflowWarningsDialog.jsx";
-import {
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
-  ConfirmDialog,
+import { WorkflowRevisionBanner } from "../components/workflow/WorkflowRevisionBanner.jsx";
-  WorkflowRevisionBanner,
-} from "../components/workflow/WorkflowRevisionBanner.jsx";
 import { NEW_WORKFLOW_YAML, parseWorkflowYaml } from "../lib/workflow-doc.js";
 import { useNotifications } from "../notifications.jsx";
 
@@ -465,6 +463,7 @@ export function WorkflowEditPage() {
           title="Discard unsaved changes?"
           message="You have unsaved edits. Switching versions will discard them."
           confirmLabel="Discard"
+          confirmClass="btn-warning"
           pending={false}
           onCancel={() => setDiscardConfirm(null)}
           onConfirm={() => {

packages/web/src/pages/WorkflowTrashPage.jsx

@@ -7,6 +7,7 @@ import {
   useRestoreWorkflowTrash,
   useWorkflowTrash,
 } from "../api/hooks.js";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { formatTime } from "../lib/format.jsx";
 import { useNotifications } from "../notifications.jsx";
 
@@ -87,6 +88,7 @@ export function WorkflowTrashPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Restore"
+                      aria-label="Restore"
                       disabled={restore.isPending}
                       onClick={() =>
                         restore.mutate(item.id, {
@@ -105,6 +107,7 @@ export function WorkflowTrashPage() {
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
                       title="Delete permanently"
+                      aria-label="Delete permanently"
                       onClick={() => setConfirmPurge(item)}
                     >
                       <LuTrash2 className="size-4" />
@@ -117,27 +120,18 @@ export function WorkflowTrashPage() {
         </div>
       )}
 
-      {confirmPurge ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmPurge)}
-          <div className="modal-box">
+        title="Delete permanently?"
-            <h3 className="font-bold">Delete permanently?</h3>
+        message={
-            <p className="mt-2 text-sm">
+          confirmPurge
-              {confirmPurge.name ?? confirmPurge.file} ({confirmPurge.owner}/{confirmPurge.file})
+            ? `${confirmPurge.name ?? confirmPurge.file} (${confirmPurge.owner}/${confirmPurge.file}) will be removed forever, including revision history.`
-              will be removed forever, including revision history.
+            : ""
-            </p>
+        }
-            <div className="modal-action">
+        confirmLabel="Delete forever"
-              <button
+        loading={purge.isPending}
-                type="button"
+        onCancel={() => setConfirmPurge(null)}
-                className="btn btn-ghost"
+        onConfirm={() =>
-                onClick={() => setConfirmPurge(null)}
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={purge.isPending}
-                onClick={() =>
           purge.mutate(confirmPurge.id, {
             onSuccess: () => {
               notify.success("Permanently deleted");
@@ -145,18 +139,7 @@ export function WorkflowTrashPage() {
             },
           })
         }
-              >
+      />
-                Delete forever
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmPurge(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }

packages/web/src/pages/WorkflowsPage.jsx

@@ -10,6 +10,7 @@ import {
   useWorkflows,
 } from "../api/hooks.js";
 import { DuplicateWorkflowDialog } from "../components/DuplicateWorkflowDialog.jsx";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
 import { formatTime, WorkflowStatusBadge } from "../lib/format.jsx";
 
@@ -80,6 +81,7 @@ export function WorkflowsPage() {
             type="button"
             className="btn btn-ghost btn-sm"
             title="Reregister workflows"
+            aria-label="Reregister workflows"
             disabled={reregister.isPending}
             onClick={() => reregister.mutate()}
           >
@@ -153,7 +155,11 @@ export function WorkflowsPage() {
                   <td className="whitespace-nowrap">{formatTime(w.lastInvokedAt)}</td>
                   <td>{w.invocationCount}</td>
                   <td className="text-right whitespace-nowrap">
-                    <label className="inline-flex items-center mr-1" title={w.enabled ? "Disable" : "Enable"}>
+                    <label
+                      className="inline-flex items-center mr-1"
+                      title={w.enabled ? "Disable" : "Enable"}
+                      aria-label={w.enabled ? "Disable" : "Enable"}
+                    >
                       <input
                         type="checkbox"
                         className="toggle toggle-success toggle-xs"
@@ -172,6 +178,7 @@ export function WorkflowsPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Run"
+                      aria-label="Run"
                       disabled={Boolean(w.loadError) || runningKey === w.key}
                       onClick={() => onRun(w)}
                     >
@@ -184,6 +191,7 @@ export function WorkflowsPage() {
                     <Link
                       className="btn btn-ghost btn-xs"
                       title="Events"
+                      aria-label="Events"
                       to={`/events?workflow=${encodeURIComponent(w.key)}`}
                     >
                       <LuActivity className="size-4" />
@@ -191,6 +199,7 @@ export function WorkflowsPage() {
                     <Link
                       className="btn btn-ghost btn-xs"
                       title="Edit"
+                      aria-label="Edit"
                       to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
                     >
                       <LuPencil className="size-4" />
@@ -199,6 +208,7 @@ export function WorkflowsPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Duplicate"
+                      aria-label="Duplicate"
                       disabled={Boolean(w.loadError)}
                       onClick={() => setDuplicateSource(w)}
                     >
@@ -208,6 +218,7 @@ export function WorkflowsPage() {
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
                       title="Move to trash"
+                      aria-label="Move to trash"
                       onClick={() => setConfirmDelete(w)}
                     >
                       <LuTrash2 className="size-4" />
@@ -233,43 +244,21 @@ export function WorkflowsPage() {
         />
       ) : null}
 
-      {confirmDelete ? (
+      <ConfirmDialog
-        <dialog className="modal modal-open">
+        open={Boolean(confirmDelete)}
-          <div className="modal-box">
+        title={confirmDelete ? `Move ${confirmDelete.key} to trash?` : ""}
-            <h3 className="font-bold">Move {confirmDelete.key} to trash?</h3>
+        message="The workflow is removed from the list but kept in trash for 7 days. Revision history is preserved."
-            <p className="mt-2 text-sm opacity-70">
+        confirmLabel="Move to trash"
-              The workflow is removed from the list but kept in trash for 7 days. Revision history
+        error={del.isError ? errorMessage(del.error) : null}
-              is preserved.
+        loading={del.isPending}
-            </p>
+        onCancel={() => setConfirmDelete(null)}
-            {del.isError ? (
+        onConfirm={() =>
-              <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
-            ) : null}
-            <div className="modal-action">
-              <button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={del.isPending}
-                onClick={() =>
           del.mutate(
             { owner: confirmDelete.owner, file: confirmDelete.file },
             { onSuccess: () => setConfirmDelete(null) },
           )
         }
-              >
+      />
-                Move to trash
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
     </div>
   );
 }