wisp-agents 0.15.0 → 0.17.0

package/web/js/ui/kbd.js

@@ -0,0 +1,46 @@
+// Keyboard shortcuts as they read on this OS, how they're matched, and the dialog that lists them.
+
+import { el } from '../core/dom.js';
+import { overlay } from './overlay.js';
+
+// The keyboard shortcut for a menu item, shown at its right edge. Menus act on the
+// focused card, so the key does the same thing as the click.
+export const keyHint = (k) => `<kbd class="menu-kbd">${k}</kbd>`;
+
+export function shortcuts() {
+  const rows = [
+    [combo('K'), 'Search & commands'],
+    [`N · ${combo('L')}`, 'New wisp (focus the launcher)'],
+    ['J / K', 'Next / previous item'],
+    ['O / ↵', 'Expand / collapse item'],
+    ['/', 'Follow up on item'],
+    ['E', 'Mark done & go to next'],
+    ['A', 'Archive / unarchive'],
+    ['M', 'Rename item'],
+    ['⌫', 'Delete item'],
+    ['T', 'Take over in terminal'],
+    ['R', 'Replay presentation'],
+    ['⇧R', 'Rerun with another harness, model or thinking level'],
+    ['S', 'Ship it: commit, push and open a PR (worktree tasks)'],
+    ['1–9', 'Pick an answer when asked'],
+    ['↵', 'Launch / send'],
+    ['⇧↵', 'New line'],
+    ['/feedback', 'Send feedback to the wisp team (in any prompt box)'],
+    ['C', 'Collapse all'],
+    ['U', 'Back to top'],
+    ['Esc', 'Close / collapse'],
+  ];
+  const node = el(`<div class="modal keys-modal"><header><h2>Shortcuts</h2></header>${rows.map(([k, l]) => `<div class="krow"><kbd>${k}</kbd><span>${l}</span></div>`).join('')}</div>`);
+  overlay(node);
+}
+
+const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
+
+// How a modifier shortcut reads on this OS: "⌘L" on macOS, "Ctrl+L" on Windows/Linux.
+export const combo = (k) => (IS_MAC ? `⌘${k}` : `Ctrl+${k}`);
+
+// ⌘ on macOS, Ctrl elsewhere (AltGr on Windows reports Ctrl+Alt, so Alt is excluded). Falls back to
+// the physical key on non-Latin layouts, where e.key is e.g. "д" for the L key.
+export const modKey = (e, k) =>
+  (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey &&
+  (e.key.toLowerCase() === k || (!/^[a-z]$/i.test(e.key) && e.code === `Key${k.toUpperCase()}`));

package/web/js/ui/overlay.js

@@ -0,0 +1,38 @@
+import { $ } from '../core/dom.js';
+import { sweep } from '../core/bus.js';
+
+// The one modal layer (#overlay). Opening a dialog replaces whatever it showed.
+export function overlay(node, { onClose } = {}) {
+  const o = $('#overlay');
+  o.innerHTML = '';
+  o.append(node);
+  o.hidden = false;
+  requestAnimationFrame(() => o.classList.add('on'));
+  const close = () => {
+    o.classList.remove('on');
+    // Another overlay may have replaced this one while it faded (palette → settings): leave that alone.
+    setTimeout(() => {
+      if (o.firstChild === node) (o.hidden = true), (o.innerHTML = '');
+      sweep();
+    }, 200);
+    onClose?.();
+  };
+  // A block body: an on* handler that returns false cancels the click, which would stop every
+  // submit button inside the dialog from submitting its form.
+  o.onclick = (e) => {
+    if (e.target === o) close();
+  };
+  o.close = close;
+  return close;
+}
+
+export const closeOverlay = () => !$('#overlay').hidden && $('#overlay').close?.();
+
+// A view opens as its own dialog, or inside another one (Settings) that hands it a host.
+// Returns what closes it for good: the whole overlay either way.
+export function present(node, host) {
+  if (host) return host(node);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  return close;
+}

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