wisp-agents 0.15.0 → 0.16.0

package/web/js/ui/popover.js

@@ -0,0 +1,52 @@
+// Menus and popovers floating over the page. A mousedown anywhere else closes them; the button
+// that opened one (`anchor`) doesn't count, so clicking it again can toggle. Escape closes the
+// newest one, wherever focus is, and puts focus back on its anchor. Callers build and position
+// the node; this appends it and owns closing.
+//
+//   anchor   the button that opened it
+//   keep     selector for other floating parts (a picker it opened) whose clicks keep it open
+//   capture  watch for outside clicks in the capture phase
+//   onClose  runs once it's gone
+//
+// Returns close, which is also set as node.close.
+
+const stack = []; // open popovers, newest last
+
+document.addEventListener(
+  'keydown',
+  (e) => {
+    if (e.key !== 'Escape' || !stack.length) return;
+    // Only the newest: a picker opened from the subagents popover closes alone. Nothing behind it
+    // (the page's own Escape, which collapses the focused card) sees the key.
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    const top = stack.at(-1);
+    top.close();
+    top.anchor?.focus();
+  },
+  true,
+);
+
+export function popover(node, { anchor, keep, capture = false, onClose } = {}) {
+  let open = true;
+  const outside = (e) => {
+    if (node.contains(e.target) || anchor?.contains(e.target) || (keep && e.target.closest?.(keep))) return;
+    close();
+  };
+  const entry = { close, anchor };
+  function close() {
+    if (!open) return;
+    open = false;
+    clearTimeout(arm);
+    stack.splice(stack.indexOf(entry), 1);
+    node.remove();
+    document.removeEventListener('mousedown', outside, capture);
+    onClose?.();
+  }
+  // Not yet: the mousedown that opened it is still going on.
+  const arm = setTimeout(() => document.addEventListener('mousedown', outside, capture));
+  stack.push(entry);
+  node.close = close;
+  document.body.append(node);
+  return close;
+}

package/web/js/ui/toast.js

@@ -0,0 +1,23 @@
+import { $, el } from '../core/dom.js';
+import { esc } from '../md.js';
+
+export function toast(html, { tone = '', action, timeout = 4200 } = {}) {
+  const t = el(`<div class="toast ${tone}"><span>${html}</span>${action ? `<button class="link">${esc(action.label)}</button>` : ''}</div>`);
+  if (action) t.querySelector('button').onclick = () => (action.run(), t.remove());
+  $('#toasts').append(t);
+  setTimeout(() => t.classList.add('out'), timeout);
+  setTimeout(() => t.remove(), timeout + 400);
+}
+
+// An error (usually the server refusing something) as a red toast.
+export const toastError = (err, opts) => toast(esc(err.message), { tone: 'bad', ...opts });
+
+// Run an action that talks to the server; a failure shows as a red toast instead of throwing.
+// Resolves to what `fn` returns, or undefined when it failed.
+export async function tryApi(fn, opts) {
+  try {
+    return await fn();
+  } catch (err) {
+    toastError(err, opts);
+  }
+}