wisp-agents 0.24.0 → 0.25.0

package/server/update.js

@@ -1,8 +1,9 @@
 // Update check: polls the npm registry for a newer wisp-agents and, when asked, installs it and
 // relaunches wisp. How depends on how this copy was installed:
-//   global  npm install -g wisp-agents@latest, then rerun bin/wisp.js from the same folder
+//   global  npm install -g wisp-agents@latest (also what install.sh does), then rerun bin/wisp.js
 //   npx     nothing to install: relaunch through `npx -y wisp-agents@latest`
-//   git     a clone: we only tell you to pull
+//   brew    brew upgrade m0xoo/tap/wisp-agents, then rerun it from the keg's opt/ link
+//   git     a clone of the repo, i.e. working on wisp itself: never offers an update
 // Opt out with WISP_UPDATE_CHECK=0.
 
 import { spawn } from 'node:child_process';
@@ -16,6 +17,9 @@ const PKG = JSON.parse(fs.readFileSync(path.join(ROOT, 'package.json'), 'utf8'))
 const REGISTRY = `https://registry.npmjs.org/${PKG.name}/latest`;
 const DAY = 24 * 3600_000;
 const TICK = 30 * 60_000; // timers stall while the machine sleeps, so poll the wall clock instead
+const TAP = 'm0xoo/tap/wisp-agents';
+// <prefix>/Cellar/wisp-agents/<version>/libexec/lib/node_modules/wisp-agents
+const CELLAR = /^(.*)[\\/]Cellar[\\/]wisp-agents[\\/]/;
 
 export function newer(a, b) {
   const p = (v) => String(v).replace(/^v/, '').split(/[-+]/)[0].split('.').map(Number);
@@ -25,20 +29,23 @@ export function newer(a, b) {
 }
 
 export function installMethod(root = ROOT) {
+  if (CELLAR.test(root)) return 'brew';
   if (fs.existsSync(path.join(root, '.git'))) return 'git';
   if (/[\\/]_npx[\\/]/.test(root)) return 'npx';
   return 'global';
 }
 
 export class Updater {
-  constructor({ port, onChange = () => {}, env = process.env, fetch = globalThis.fetch, now = Date.now } = {}) {
+  constructor({ port, onChange = () => {}, env = process.env, fetch = globalThis.fetch, now = Date.now, root = ROOT } = {}) {
     this.port = port;
     this.onChange = onChange;
     this.fetch = fetch;
     this.now = now;
     this.checkedAt = -Infinity;
-    this.enabled = !/^(0|false|no|off)$/i.test(env.WISP_UPDATE_CHECK || '') && !env.CI;
-    this.method = installMethod();
+    this.root = root;
+    this.method = installMethod(root);
+    this.brew = root.match(CELLAR)?.[1]; // Homebrew's prefix, e.g. /opt/homebrew
+    this.enabled = this.method !== 'git' && !/^(0|false|no|off)$/i.test(env.WISP_UPDATE_CHECK || '') && !env.CI;
     this.state = { current: PKG.version, latest: null, available: false, method: this.method, status: 'idle', error: null };
   }
 
@@ -60,9 +67,20 @@ export class Updater {
   }
 
   view() {
-    const s = this.state;
-    const command = { global: `npm install -g ${PKG.name}@latest`, npx: `npx -y ${PKG.name}@latest`, git: 'git pull' }[s.method];
-    return { ...s, command, auto: s.method !== 'git' };
+    return { ...this.state, command: this.command() };
+  }
+
+  // What installs the latest version; shown to copy if it fails. A clone has none.
+  command() {
+    if (this.method === 'brew') return `${JSON.stringify(path.join(this.brew, 'bin', 'brew'))} upgrade ${TAP}`;
+    return { global: `npm install -g ${PKG.name}@latest`, npx: `npx -y ${PKG.name}@latest` }[this.method];
+  }
+
+  // Where the updated copy lives: the same folder, except Homebrew puts each version in its own
+  // keg and keeps opt/wisp-agents pointing at the current one.
+  home() {
+    if (this.method !== 'brew') return this.root;
+    return path.join(this.brew, 'opt', 'wisp-agents', 'libexec', 'lib', 'node_modules', PKG.name);
   }
 
   async check() {
@@ -71,20 +89,28 @@ export class Updater {
       const r = await this.fetch(REGISTRY, { headers: { accept: 'application/json' }, signal: AbortSignal.timeout(10_000) });
       if (!r.ok) return this.view();
       const { version } = await r.json();
-      const available = newer(version, PKG.version);
+      const available = this.method !== 'git' && newer(version, PKG.version);
       if (version !== this.state.latest || available !== this.state.available) this.set({ latest: version, available });
     } catch {} // offline: try again next round
     return this.view();
   }
 
-  // Installs (global) then hands off to a detached helper that waits for this server's port to
-  // free up and starts the new version. The caller shuts this process down.
+  // Installs (npm or brew; npx fetches on relaunch) then hands off to a detached helper that waits
+  // for this server's port to free up and starts the new version. The caller shuts this process down.
   async install() {
-    if (this.method === 'git') throw bad('This is a git checkout: run `git pull` to update.');
+    if (this.method === 'git') throw bad('This copy of wisp is a git clone, so it does not update itself.');
     if (this.state.status === 'installing') throw bad('Already updating.', 409);
     this.set({ status: 'installing', error: null });
     try {
-      if (this.method === 'global') await run(`npm install -g ${PKG.name}@latest`);
+      if (this.method !== 'npx') {
+        // Old kegs stay until brew's own periodic cleanup: this process still runs from one.
+        await run(this.command(), this.method === 'brew' ? { HOMEBREW_NO_INSTALL_CLEANUP: '1' } : {});
+        // Relaunching a copy that didn't change would leave the UI waiting for a version that never comes.
+        const got = installedVersion(this.home());
+        if (!newer(got, PKG.version)) {
+          throw bad(this.method === 'brew' ? `Homebrew doesn't have wisp ${this.state.latest} yet. Try again later.` : `npm installed wisp somewhere else: this copy is still ${got || PKG.version}.`);
+        }
+      }
     } catch (err) {
       this.set({ status: 'idle', error: err.message });
       throw err;
@@ -97,13 +123,21 @@ export class Updater {
   relaunchCommand(electron = !!process.versions.electron) {
     const args = `${electron ? '' : ' --browser --no-open'} --port ${this.port}`; // desktop: reopen the app; browser: keep the tab
     const node = JSON.stringify(electron ? 'node' : process.execPath);
-    return this.method === 'npx' ? `npx -y ${PKG.name}@latest${args}` : `${node} ${JSON.stringify(path.join(ROOT, 'bin', 'wisp.js'))}${args}`;
+    return this.method === 'npx' ? `npx -y ${PKG.name}@latest${args}` : `${node} ${JSON.stringify(path.join(this.home(), 'bin', 'wisp.js'))}${args}`;
+  }
+}
+
+function installedVersion(dir) {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(dir, 'package.json'), 'utf8')).version;
+  } catch {
+    return null;
   }
 }
 
-function run(cmd) {
+function run(cmd, env = {}) {
   return new Promise((resolve, reject) => {
-    const child = spawn(cmd, { shell: true, stdio: ['ignore', 'ignore', 'pipe'], env: withoutElectronNode() });
+    const child = spawn(cmd, { shell: true, stdio: ['ignore', 'ignore', 'pipe'], env: { ...withoutElectronNode(), ...env } });
     let err = '';
     child.stderr.on('data', (d) => (err = (err + d).slice(-2000)));
     child.on('error', reject);

package/web/css/feed.css

@@ -1,6 +1,6 @@
 /* ---------- feed ---------- */
 .feed-head { display: flex; align-items: center; gap: 14px; min-height: 22px; margin: 26px 0 10px; padding: 0 4px; font-size: 13px; }
-.feed-head[hidden] + .feed { margin-top: 26px; }
+.feed-head[hidden] ~ .feed { margin-top: 26px; }
 .hs { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
 .hs i { width: 7px; height: 7px; border-radius: 50%; }
 .hs.working i { background: var(--accent); animation: pulse 1.6s infinite; }

package/web/css/spells.css

@@ -0,0 +1,205 @@
+/* Spells: what spells add to wisp (slots, panels, blocks), and Settings → Spells. Plain 1px neutral
+   borders like the panels next to them. */
+
+.sp-sandbox { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
+
+/* top bar */
+.sp-top { display: contents; }
+.sp-btn .sp-n, .sp-fab .sp-n, .sp-qr .sp-n { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; font-size: 10.5px; font-weight: 600; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
+.sp-btn .i { width: 14px; height: 14px; }
+
+/* floating buttons */
+.sp-float {
+  position: fixed; right: 22px; bottom: 22px; z-index: 30; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.sp-float.left { right: auto; left: 22px; align-items: flex-start; }
+.sp-float[hidden] { display: none; }
+.sp-fab {
+  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 13px; border-radius: 21px;
+  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
+  font-size: 13.5px; font-weight: 500; transition: translate 0.15s var(--ease), color 0.15s, border-color 0.15s;
+  animation: sp-in 0.25s var(--ease);
+}
+.sp-fab .i { width: 16px; height: 16px; }
+.sp-fab:hover { color: var(--ink); border-color: var(--faint); translate: 0 -2px; }
+.sp-fab.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
+.sp-fab:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }
+@keyframes sp-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
+.sp-fan { display: flex; flex-direction: column-reverse; align-items: inherit; gap: 8px; }
+.sp-fan-items { display: none; flex-direction: column-reverse; align-items: inherit; gap: 8px; }
+.sp-fan.open .sp-fan-items { display: flex; }
+.sp-fan.open .sp-fan-btn { color: var(--ink); border-color: var(--faint); }
+body:has(.launcher.docked:is(:focus-within, :has(.open))) .sp-float { bottom: 96px; }
+
+/* card head chips and hover buttons */
+.sp-chip {
+  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; white-space: nowrap;
+  color: var(--muted); background: var(--bg-2); border: 1px solid var(--line);
+}
+.sp-chip .i { width: 12px; height: 12px; }
+.sp-chip.tone-good { color: var(--good); }
+.sp-chip.tone-bad { color: var(--bad); }
+.sp-chip.tone-warn { color: var(--warn); }
+.sp-chip.tone-info { color: var(--info); }
+button.sp-chip:hover { border-color: var(--line-2); color: var(--ink); }
+.sp-quick:hover { color: var(--accent); }
+
+/* prompt box and follow-up box */
+.sp-lbar, .sp-cbar { display: inline-flex; align-items: center; gap: 6px; }
+.sp-lbar:empty, .sp-cbar:empty { display: none; }
+.sp-lchips, .sp-cchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 2px 0; }
+.sp-cchips { padding: 0 0 8px; }
+.sp-cchips[hidden] { display: none; }
+.sp-qr {
+  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px;
+  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); transition: border-color 0.15s, color 0.15s;
+  text-align: left; max-width: 100%;
+}
+.sp-qr .i { width: 13px; height: 13px; }
+.sp-qr:hover { border-color: var(--line-2); color: var(--ink); }
+
+/* panels: in cards, above the feed, and as dialogs */
+.sp-card { display: grid; gap: 10px; padding: 12px 14px 0; }
+.sp-card[hidden] { display: none; }
+.sp-cpanel, .sp-feed { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
+.sp-cpanel > header, .sp-feed > header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
+.sp-cpanel > header .i, .sp-feed > header .i { width: 14px; height: 14px; color: var(--muted); }
+.sp-by { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--faint); }
+.sp-by .i { width: 12px; height: 12px; }
+.sp-cpanel-body, .sp-feed-body { padding: 12px; }
+.sp-cpanel-body .presentation, .sp-feed-body .presentation, .sp-panel-body .presentation, .sp-pv-body .presentation, .sp-block .presentation { gap: 10px; }
+.sp-feedtop { display: grid; gap: 12px; margin: 14px 0; }
+.sp-feedtop[hidden] { display: none; }
+.sp-panel { width: min(720px, 100%); }
+.sp-panel header { gap: 10px; }
+.sp-panel header h2 { display: flex; align-items: center; gap: 8px; margin-right: auto; }
+.sp-panel header h2 .i { width: 18px; height: 18px; color: var(--muted); }
+.sp-panel .sp-by { margin-left: 0; }
+.sp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); max-height: none; border-radius: 0; border-width: 0 0 0 1px; }
+.sp-out { max-height: 60vh; overflow: auto; white-space: pre-wrap; }
+.sp-error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; font-size: 13px; color: var(--bad); background: var(--del-bg); }
+.sp-error .i { flex: none; width: 15px; height: 15px; margin-top: 1px; }
+.sp-empty { margin: 0; color: var(--faint); font-size: 13px; }
+
+/* blocks spells add to reports */
+.sp-off { padding: 10px 12px; }
+.sp-off-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
+.sp-off-head .i { width: 14px; height: 14px; }
+.sp-off-head .link { margin-left: auto; }
+.sp-off pre { margin: 10px 0 0; }
+
+/* the spell block in a Cast a spell report */
+.b-spell { padding: 14px 16px; display: grid; gap: 10px; }
+.sp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
+.sp-head > .i { width: 17px; height: 17px; color: var(--accent); }
+.sp-ver { font: 500 11.5px var(--mono); color: var(--faint); }
+.sp-state { margin-left: auto; }
+.sp-on { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--good); background: var(--add-bg); }
+.sp-desc { margin: 0; color: var(--ink-2); font-size: 13.5px; }
+.sp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
+.sp-lines li { display: flex; gap: 8px; align-items: flex-start; }
+.sp-lines li .i { flex: none; width: 13px; height: 13px; margin-top: 3px; color: var(--good); }
+.sp-lines li.bad, .sp-lines li.bad .i { color: var(--bad); }
+.sp-lines li.warn .i { color: var(--warn); }
+.sp-preview { display: grid; gap: 10px; }
+.sp-preview:empty { display: none; }
+.sp-pv-btns { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
+.sp-pv { display: grid; gap: 5px; justify-items: start; }
+.sp-pv small, .sp-pv-panel small { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
+.sp-pv .sp-fab { animation: none; box-shadow: none; }
+.sp-pv .sp-quick { opacity: 1; margin: 0; }
+.sp-pv > span:not(small) { pointer-events: none; }
+.sp-pv-panel { display: grid; gap: 6px; }
+.sp-pv-body { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
+.sp-pv-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
+.sp-pv-note .i { width: 13px; height: 13px; color: var(--accent); }
+.sp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
+.sp-acts .i { width: 14px; height: 14px; }
+.sp-json { margin: 0; max-height: 360px; overflow: auto; }
+
+/* how risky */
+.sp-kind { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font: 600 11px var(--sans); letter-spacing: 0.01em; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); vertical-align: 1px; }
+.sp-kind.k-acts { color: var(--info); }
+.sp-kind.k-reads { color: var(--ink-2); }
+.sp-kind.k-runs { color: var(--warn); }
+
+/* trying a spell */
+.sp-try {
+  position: fixed; left: 50%; top: 70px; translate: -50% 0; z-index: 60; display: flex; align-items: center; gap: 10px;
+  padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); font-size: 13.5px;
+  animation: sp-in 0.25s var(--ease);
+}
+.sp-try > .i { width: 15px; height: 15px; color: var(--accent); }
+
+/* cast, review and Settings → Spells */
+.sp-cast { display: grid; gap: 12px; }
+.sp-cast header, .sp-review header { margin-bottom: 0; }
+.sp-cast h2, .sp-review h2 { display: flex; align-items: center; gap: 8px; }
+.sp-cast h2 .i, .sp-review h2 .i { width: 18px; height: 18px; color: var(--accent); }
+.sp-cast footer, .sp-review footer, .sp-confirm footer { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
+.sp-cast footer .hint { margin-right: auto; }
+.sp-review { display: grid; gap: 12px; }
+.sp-review p { margin: 0; }
+.sp-review .grow { flex: 1; }
+.sp-review-kind { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
+.sp-review details pre { max-height: 300px; overflow: auto; }
+.sp-confirm { display: grid; gap: 12px; }
+.sp-confirm p { margin: 0; }
+.sp-examples { display: flex; flex-wrap: wrap; gap: 6px; }
+/* a long example wraps inside its chip instead of spilling over the next one */
+.sp-examples .sp-qr { height: auto; min-height: 26px; padding-block: 3px; line-height: 1.4; }
+.sp-castbox { display: grid; gap: 10px; padding-bottom: 14px; }
+.sp-castbox > .sp-examples { padding: 0 14px; }
+.sp-castrow { display: flex; gap: 8px; align-items: center; padding: 0 14px 14px; }
+.sp-castrow:has(.textarea) { align-items: flex-start; }
+.sp-castrow .textarea { min-height: 56px; }
+/* the cast box: the launcher's prompt in small, the send button in a bar under the text */
+.sp-prompt {
+  margin: 0 14px; padding: 8px 10px 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface);
+  box-shadow: var(--shadow-1); cursor: text; transition: box-shadow 0.15s, border-color 0.15s;
+}
+.sp-prompt:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 0 0 3px var(--accent-soft); }
+.sp-prompt textarea {
+  display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; padding: 6px 4px;
+  font-size: 15px; line-height: 1.55; color: var(--ink); min-height: 56px;
+}
+.sp-prompt textarea::placeholder { color: var(--faint); }
+.sp-pbar { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
+.sp-pbar .grow { flex: 1; }
+.sp-pin { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); }
+.sp-pin .i { width: 13px; height: 13px; color: var(--accent); }
+.sp-castrow .primary, .sp-castrow .ghost { flex: none; }
+.sp-row .sx-text details { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
+.sp-row .sx-text summary { cursor: pointer; width: max-content; }
+.sp-row .sp-lines { margin-top: 6px; }
+.sp-row .sx-ctl { display: flex; align-items: center; gap: 4px; }
+.sp-row.broken b { color: var(--bad); }
+.sp-none { display: flex; gap: 12px; align-items: center; padding: 16px 4px; color: var(--muted); }
+.sp-none > .i { width: 20px; height: 20px; color: var(--accent); }
+.sp-none p { margin: 2px 0 0; font-size: 13px; }
+.sp-foot .link { vertical-align: baseline; }
+.sp-lock { display: flex !important; align-items: center; gap: 5px; margin-top: 3px; color: var(--accent-ink) !important; }
+.sp-lock .i { width: 12px; height: 12px; }
+.menu .sp-menu { display: flex; align-items: center; gap: 9px; width: 100%; }
+
+/* card density */
+body.sp-compact #feed .it-head { padding-top: 7px; padding-bottom: 7px; }
+body.sp-compact #feed .it-sub { display: none; }
+body.sp-compact #feed .f-list { gap: 6px; }
+body.sp-comfy #feed .it-head { padding-top: 15px; padding-bottom: 15px; }
+
+@media (max-width: 640px) {
+  .sp-float { right: 14px; bottom: 14px; }
+  .sp-fab { height: 40px; padding: 0 12px; }
+  .sp-fab .sp-fab-l { display: none; }
+  .sp-fan.open .sp-fab-l { display: inline; }
+  .sp-try { left: 12px; right: 12px; translate: none; top: 62px; }
+  .sp-castrow { flex-direction: column; align-items: stretch; }
+  /* bar buttons fold to their icon (a button without one keeps its label) */
+  .sp-lbar .sp-btn:has(.i) > span, .sp-cbar .sp-btn:has(.i) > span { display: none; }
+  .sp-lbar .sp-btn, .sp-cbar .sp-btn { padding: 0 7px; }
+}
+
+/* the floating stack moves up while the Collapse button is out */
+body:has(.collapse-all.on) .sp-float:not(.left) { bottom: 76px; }

package/web/index.html

@@ -23,6 +23,7 @@
   <link rel="stylesheet" href="/css/subagents.css">
   <link rel="stylesheet" href="/css/auto.css">
   <link rel="stylesheet" href="/css/transcript.css">
+  <link rel="stylesheet" href="/css/spells.css">
 </head>
 <body>
   <svg width="0" height="0" style="position:absolute" aria-hidden="true">
@@ -98,6 +99,7 @@
       <button class="auto-btn" id="autoBtn" title="Automations: recipes and triggers">
         <svg class="i"><use href="#i-bolt"/></svg><span>Automations</span><b class="ab-n" hidden></b>
       </button>
+      <div class="sp-top" id="spTop"></div>
       <button class="search-btn" id="searchBtn" title="Search">
         <svg class="i"><use href="#i-search"/></svg><span>Search</span><kbd class="mod-k"></kbd>
       </button>
@@ -117,6 +119,7 @@
         </section>
       </div>
       <div class="feed-head" id="feedHead"></div>
+      <div class="sp-feedtop" id="spFeedTop" hidden></div>
       <div class="feed" id="feed">
         <section class="f-group needs" id="secNeeds" hidden><h4>Needs you<span class="n"></span></h4><div class="f-list"></div></section>
         <section class="f-group working" id="secWorking" hidden><h4>Working<span class="n"></span></h4><div class="f-list"></div></section>
@@ -131,6 +134,7 @@
     <svg class="i"><use href="#i-send"/></svg><kbd>U</kbd>
   </button>
   <div class="drag-strip"></div>
+  <div class="sp-float" id="spFloat" hidden></div>
   <div class="overlay" id="overlay" hidden></div>
   <div class="toasts" id="toasts"></div>
 

package/web/js/app.js

@@ -19,6 +19,8 @@ import { onKey } from './features/keys.js';
 import { backToTop, onScroll, stage } from './features/scroll.js';
 import { openSettings, telemetryNotice } from './features/settings.js';
 import { installUpdate, loadUpdate } from './features/update.js';
+import { routeSpell } from './features/spell-ui.js';
+import './features/spells.js';
 
 document.addEventListener('keydown', onKey);
 stage.addEventListener('scroll', onScroll, { passive: true });
@@ -58,6 +60,7 @@ if (/Electron/.test(navigator.userAgent)) document.body.classList.add('electron'
 
 // #/s/<id> still works (notifications, CLI): it reveals that item in the feed.
 function route() {
+  if (routeSpell()) return; // #/spell?src=…: a shared spell to review
   const m = location.hash.match(/^#\/s\/(\w+)/);
   if (!m) return;
   history.replaceState(null, '', '#/');

package/web/js/blocks.js

@@ -930,6 +930,12 @@ R.unknown = (b) => el(`<div class="b-code card"><div class="code-head"><span cla
 
 // --- public -----------------------------------------------------------------
 
+// Block types defined elsewhere: spells (features/spells.js) register the `spell` block and draw
+// the types spells add through the fallback, before R.unknown.
+export const registerBlock = (type, fn) => (R[type] = fn);
+let fallback = () => null;
+export const setBlockFallback = (fn) => (fallback = fn);
+
 export function renderPresentation(presentation, ctx) {
   const wrap = document.createElement('div');
   wrap.className = 'presentation';
@@ -939,7 +945,7 @@ export function renderPresentation(presentation, ctx) {
     const delay = reduced() ? 0 : Math.min(i, 10) * 110;
     let node;
     try {
-      node = (R[b.type] || R.unknown)(b, { ...ctx, delay });
+      node = R[b.type] ? R[b.type](b, { ...ctx, delay }) : fallback(b, { ...ctx, delay }) || R.unknown(b);
     } catch (err) {
       console.error('block failed', b, err);
       node = R.unknown(b);

package/web/js/features/actions.js

@@ -23,6 +23,7 @@ import { machineById, pathAt, placeName, projectById } from './places.js';
 import { agentById, agentName, DEFAULT_MODE, effortsFor, harnessesAt, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace } from './scroll.js';
 import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
+import { slotHtml } from './spells.js';
 
 export async function toggleDone(id) {
   const s = S.sessions.get(id);
@@ -192,9 +193,11 @@ export function taskMenu(id, e) {
       <button data-a="recipe">${icon('spark')}Save as recipe…</button>
       ${busy || s.archived ? '' : `<button data-a="done">${icon('done')}${s.state === 'done' ? 'Reopen' : 'Mark done'}${keyHint('E')}</button>`}
       ${s.archived ? `<button data-a="unarchive">${icon('archive')}Unarchive${keyHint('A')}</button>` : busy ? '' : `<button data-a="archive">${icon('archive')}Archive${keyHint('A')}</button>`}
+      ${slotHtml('card.menu', s).replace(/class="ghost sm sp-btn"/g, 'class="sp-menu"').replace(/<button /g, `<button data-task="${s.id}" `)}
       <button data-a="delete" class="danger">${icon('trash')}Delete session${keyHint('⌫')}</button>
     </div>`);
   menu.onclick = async (ev) => {
+    if (ev.target.closest('[data-sp]')) return close();
     const a = ev.target.closest('button')?.dataset.a;
     close();
     if (a === 'open') expand(id);

package/web/js/features/commands.js

@@ -23,6 +23,8 @@ import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
 import { transcriptOn } from './transcript.js';
 import { replay, toggleTranscript } from './turns.js';
 import { openUsage } from './usage.js';
+import { activeSpells, runAction } from './spells.js';
+import { openCast } from './spell-ui.js';
 
 const STATE_LABEL = { running: 'Working', waiting: 'Asking', review: 'Review', done: 'Done' };
 
@@ -96,6 +98,15 @@ function paletteItems() {
     { group: a, label: 'Settings', icon: 'settings', keywords: 'preferences lessons learn retro editor terminal notifications', run: openSettings },
     { group: a, label: 'Keyboard shortcuts', icon: 'info', kbd: '?', keywords: 'keys help hotkeys', run: shortcuts },
   );
+  items.push(
+    { group: a, label: 'Cast a spell…', icon: 'spark', keywords: 'spell customize change wisp add button panel block theme plugin extension mod', run: () => openCast() },
+    { group: a, label: 'Spells', icon: 'spark', keywords: 'spells installed manage import export share customize', run: () => openSettings({ pane: 'spells' }) },
+  );
+  // What spells add to ⌘K: their commands, and their buttons for the palette slot.
+  for (const spell of activeSpells()) {
+    const cmds = [...(spell.commands || []), ...(spell.buttons || []).filter((b) => b.slot === 'palette')];
+    for (const c of cmds) items.push({ group: 'Spells', label: c.label, sub: spell.name, icon: c.icon || 'spark', kbd: c.key ? c.key.replace(/^shift\+/i, '⇧').toUpperCase() : undefined, keywords: `spell ${c.keywords || ''}`, run: () => runAction(spell, c.do, { session: S.focus }) });
+  }
   if (feedbackOn()) items.push({ group: a, label: 'Send feedback…', icon: 'thumb-up', keywords: 'feedback bug report idea suggestion thumbs contact team', run: () => openFeedback() });
 
   for (const r of S.config.recipes || []) items.push({ group: 'Recipes', label: `Run: ${r.name}`, sub: r.prompt.replace(/\s+/g, ' ').slice(0, 80), icon: 'spark', keywords: `recipe ${r.prompt}`, run: () => runRecipe({ ...r, params: recipeParams(r.prompt) }) });

package/web/js/features/composer.js

@@ -24,6 +24,8 @@ import { feedAnchor, keepInPlace, watching } from './scroll.js';
 import { shipDialog } from './ship.js';
 import { slashMenu } from './slash.js';
 import { renderBody } from './turns.js';
+import { paintCard, runAction, spellProp } from './spells.js';
+import { spellSlash } from './launcher.js';
 
 export function draftInto(id, text) {
   const ta = $('.reply', S.nodes.get(id)?.card);
@@ -91,6 +93,7 @@ export function renderDock(id) {
     }
   });
   $('.send', comp).onclick = () => sendReply(id, ta.value);
+  paintCard(id); // what spells add to the box and the card
 }
 
 // The mode the next follow-up runs in: the session's own until the user picks another here.
@@ -243,6 +246,8 @@ export function updateDock(id) {
               ? `Follow up with ${next} to reopen…`
               : 'Follow up to reopen…'
             : `Follow up with ${next}…`;
+  const spellPh = spellProp('composer.input', 'placeholder');
+  if (spellPh && !tour && !s.ask) ta.placeholder = spellPh;
   paintSide(id);
   paintReplyMode(id, $('.c-mode', n.card));
   paintReplyRunner(id, $('.c-runner', n.card));
@@ -335,6 +340,13 @@ export async function sendReply(id, text) {
   text = (text || '').trim();
   if (!s || !text) return;
   const ta = n && $('.reply', n.card);
+  // A spell's slash command: it does its thing on this task instead of being sent.
+  const slash = !isBtw(text) && spellSlash(text);
+  if (slash) {
+    if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
+    S.drafts.delete(id);
+    return runAction(slash.spell, slash.cmd.do, { session: id, args: slash.args, input: ta });
+  }
   // A side question: answered next to the run, so nothing is interrupted, queued or switched.
   if (isBtw(text)) {
     const question = btwQuestion(text);

package/web/js/features/feed.js

@@ -16,6 +16,7 @@ import { scrollByPx, stage, topInset } from './scroll.js';
 import { prOf, prPill, shipPill } from './ship.js';
 import { teamStack } from './team.js';
 import { renderBody } from './turns.js';
+import { slotHtml } from './spells.js';
 
 function visible(list) {
   return S.filter === 'all' ? list : list.filter((s) => inProject(s, S.filter));
@@ -247,7 +248,9 @@ function renderHead(n, s) {
       ${s.team?.length ? teamStack(s.agent, s.team) : modelBadge(s.agent, s.model, s.effort, s.route?.switched ? null : s.route)}
       ${s.machine ? machinePill(s.machine) : ''}
       ${projectLabel(s)}
+      ${s.pending ? '' : slotHtml('card.head', s)}
       <span class="q-time">${ago(s.updatedAt)}</span>
+      ${s.pending ? '' : slotHtml('card.hover', s)}
       ${s.state === 'review' && !open && !s.archived ? `<button class="it-quick" data-a="quick-done" title="Mark done (E)">${icon('done')}</button>` : ''}
       ${icon('chevron', 'chev')}
     </span>`;

package/web/js/features/keys.js

@@ -11,6 +11,10 @@ import { focusLauncher } from './launcher.js';
 import { backToTop } from './scroll.js';
 import { shipDialog, shippable } from './ship.js';
 import { replay, toggleTranscript } from './turns.js';
+import { activeSpells, runAction } from './spells.js';
+
+// Keys wisp uses itself (with or without Shift), which spells can't claim.
+const BUILT_IN = new Set(['n', 'j', 'k', 'o', 'enter', 'e', 'a', 'c', 'u', 'home', 'm', 'delete', 'backspace', 't', 'shift+r', 's', 'r', 'v', '/', '?', 'shift+?', 'escape', ...'123456789'.split('')]);
 
 export function onKey(e) {
   // ⌘K / Ctrl+K works from anywhere, even mid-sentence in the launcher.
@@ -37,6 +41,17 @@ export function onKey(e) {
   if (typing || e.metaKey || e.ctrlKey || e.altKey || !$('#overlay').hidden) return;
   const k = e.key.toLowerCase();
   const id = S.focus && S.nodes.has(S.focus) ? S.focus : null;
+  // A spell's key (only keys wisp doesn't use itself: spells can't take over built-in ones).
+  const combo = `${e.shiftKey ? 'shift+' : ''}${k}`;
+  if (!BUILT_IN.has(combo)) {
+    for (const spell of activeSpells()) {
+      const c = [...(spell.commands || []), ...(spell.buttons || [])].find((x) => x.key && x.key.toLowerCase() === combo);
+      if (c) {
+        e.preventDefault();
+        return runAction(spell, c.do, { session: id });
+      }
+    }
+  }
   if (k === 'n') {
     e.preventDefault();
     focusLauncher();