wisp-agents 0.24.1 → 0.25.0

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();

package/web/js/features/launcher.js

@@ -27,6 +27,8 @@ import { needsSetup, nudgeSetup, renderSetup } from './setup.js';
 import { agentName, agentsAt, DEFAULT_MODE, effortLabel, effortsFor, harnessesAt, harnessLogo, MAX_RUNNERS, modeMenu, MODES, paintRunnerBtn, runnerTip, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace, stage, topInset } from './scroll.js';
 import { canLead, paintTeamBtn, teamEditor } from './team.js';
+import { activeSpells, launcherParts, runAction, spellProp } from './spells.js';
+import { cast } from './spell-ui.js';
 
 // "No folder": a general ask with no project. The server gives it an empty scratch directory.
 const NO_FOLDER = 'none';
@@ -72,6 +74,19 @@ function syncWhere() {
   launch.project = storedPick() || null;
 }
 
+// A spell's slash command at the start of `text`: { spell, cmd, args } or null.
+export function spellSlash(text) {
+  const m = /^\/([a-z][a-z0-9-]*)(?:\s+([\s\S]*))?$/i.exec(String(text || '').trim());
+  if (!m) return null;
+  for (const spell of activeSpells()) {
+    const cmd = (spell.slash || []).find((c) => c.name === m[1].toLowerCase());
+    if (cmd) return { spell, cmd, args: (m[2] || '').trim() };
+  }
+  return null;
+}
+
+bus.on('spells:launcher', () => $('#launcher:not(.skel)') && renderLauncher());
+
 export function renderLauncher() {
   const box = $('#launcher');
   const mode = S.config.defaults.mode || DEFAULT_MODE.id;
@@ -104,18 +119,19 @@ export function renderLauncher() {
     <div class="l-recipes"></div>`;
   renderLaunchChips();
   renderSetup();
+  launcherParts(box); // what spells add to the prompt box
 
   const ta = mentionBox($('#prompt', box));
   const tray = attachTray();
   ta.parentNode.before(tray.node); // before the mention box's wrapper
   acceptFiles(box, ta, tray);
-  autosize(ta);
+  autosize(ta, (spellProp('launcher.input', 'maxRows') || 0) * 24 || undefined);
   ta.value = S.drafts.get('home') || '';
   ta.addEventListener('input', () => (S.drafts.set('home', ta.value), paintSaveRecipe()));
   // While focus is elsewhere, the placeholder advertises the shortcut that brings you back.
-  const hint = () => (ta.placeholder = document.activeElement === ta
+  const hint = () => (ta.placeholder = spellProp('launcher.input', 'placeholder') || (document.activeElement === ta
     ? 'What should I go do? Paste screenshots, drop logs or videos…'
-    : `What should I go do? Press ${combo('L')} to start typing`);
+    : `What should I go do? Press ${combo('L')} to start typing`));
   ta.addEventListener('focus', hint);
   ta.addEventListener('blur', hint);
   hint();
@@ -247,8 +263,7 @@ export function renderLauncher() {
     });
   });
   paintCompare();
-  runnerBtn.onclick = () =>
-    runnerPicker(runnerBtn, { agent: agent?.id, model: curModel, effort: curEffort, savedModel, savedEffort, places: launch.where, auto: true }, (id, model, effort) => {
+  const pickRun = (id, model, effort) => {
       agent = harnessesAt(launch.where, { auto: true }).find((a) => a.id === id);
       curModel = model;
       curEffort = effort;
@@ -260,11 +275,38 @@ export function renderLauncher() {
       const efforts = effort || effortsFor(id, model).length ? { ...d.efforts, [id]: effort } : d.efforts;
       Object.assign(d, { agent: id, model, models, effort, efforts });
       api('/config', { method: 'PATCH', body: { defaults: { agent: id, model, models, effort, efforts } } }).catch(() => {});
-    });
+  };
+  runnerBtn.onclick = () => runnerPicker(runnerBtn, { agent: agent?.id, model: curModel, effort: curEffort, savedModel, savedEffort, places: launch.where, auto: true }, pickRun);
+  // Spells: set the pickers (setLaunch), or launch once with other settings (launchWith).
+  box.spellSet = (v) => {
+    if (v.agent && harnessesAt(launch.where, { auto: true }).some((a) => a.id === v.agent)) pickRun(v.agent, v.model ?? savedModel(v.agent), v.effort ?? savedEffort(v.agent, v.model ?? savedModel(v.agent)));
+    else if (v.agent) toast(`${esc(agentName(v.agent))} isn’t installed here`, { tone: 'bad' });
+    if (v.mode) setMode(v.mode);
+  };
+  box.spellLaunch = (v) => go(v);
 
-  const go = async () => {
+  // over: a spell's launchWith ({ agent, model, effort, mode, text }) for this one launch.
+  const go = async (over = null) => {
+    if (over && !(over instanceof Event) && over.text && !ta.value.trim().startsWith(over.text)) ta.value = `${over.text}${ta.value.trim() ? `\n\n${ta.value.trim()}` : ''}`;
+    if (over instanceof Event) over = null;
     const prompt = ta.value.trim();
     if (!prompt) return ta.focus();
+    // /spell <what to change>: cast a spell instead of starting a task.
+    const spellAsk = /^\/spell(?:\s+|$)([\s\S]*)$/i.exec(prompt);
+    if (spellAsk) {
+      if (!spellAsk[1].trim()) return toast('Say what to change after /spell, like “/spell a floating button that opens my PRs”');
+      ta.value = '';
+      S.drafts.delete('home');
+      ta.dispatchEvent(new Event('input'));
+      return cast(spellAsk[1]).catch((err) => (toastError(err), (ta.value = prompt), ta.dispatchEvent(new Event('input'))));
+    }
+    // A spell's slash command, typed in the prompt box.
+    const slash = spellSlash(prompt);
+    if (slash) {
+      ta.value = '';
+      ta.dispatchEvent(new Event('input'));
+      return runAction(slash.spell, slash.cmd.do, { args: slash.args, input: ta });
+    }
     if (isFeedback(prompt)) {
       ta.value = '';
       ta.dispatchEvent(new Event('input'));
@@ -277,7 +319,7 @@ export function renderLauncher() {
     const off = targets.find((t) => t.m && t.m.state !== 'online');
     if (off) return offlineToast(off.k);
     if (needsSetup()) return nudgeSetup();
-    const wanted = [agent?.id, ...compare.map((c) => c.agent)].filter((id) => id !== 'auto'); // Auto picks from what's there
+    const wanted = [over?.agent || agent?.id, ...compare.map((c) => c.agent)].filter((id) => id !== 'auto'); // Auto picks from what's there
     for (const t of targets) {
       const list = agentsAt(t.k);
       const missing = list && wanted.find((id) => !list.some((x) => x.id === id && x.available));
@@ -290,7 +332,8 @@ export function renderLauncher() {
     const attachments = await tray.ids();
     const files = tray.take();
     const cmp = compare;
-    const runner = { agent: agent?.id || 'claude', model: curModel, effort: curEffort };
+    const runner = over?.agent ? { agent: over.agent, model: over.model ?? savedModel(over.agent), effort: over.effort ?? '' } : { agent: agent?.id || 'claude', model: curModel, effort: curEffort };
+    const launchMode = over?.mode || curMode;
     // A repo still cloning gets a stand-in project; its card says so until the clone lands.
     const fetching = (t) => t.k && [t.project, ...t.also].some((p) => p && !p.scratch && !pathAt(p, t.k)); // not on that machine yet
     const pending = targets.map((t) => addPending(prompt, t.project ? t : { ...t, project: { id: t.clone.id, name: t.clone.name, path: '', color: 'slate' } }, runner, t.clone ? `Cloning ${t.clone.label}` : fetching(t) ? `Cloning ${t.project.name} on ${placeName(t.k)}` : undefined));
@@ -320,7 +363,7 @@ export function renderLauncher() {
         targets.map((t) =>
           api('/sessions', {
             method: 'POST',
-            body: { prompt, cwd: t.project.scratch ? undefined : t.project.path, also: t.also.length ? t.also.map((p) => p.path) : undefined, scratch: t.project.scratch || undefined, machine: t.k, groupId, agent: runner.agent, mode: curMode, model: runner.model, effort: runner.effort, attachments, worktree: S.config.defaults.worktree === 'off' && !cmp.length ? false : undefined, compare: cmp.length ? cmp : undefined, subagents: team.length && canLead(runner.agent) ? team : undefined },
+            body: { prompt, cwd: t.project.scratch ? undefined : t.project.path, also: t.also.length ? t.also.map((p) => p.path) : undefined, scratch: t.project.scratch || undefined, machine: t.k, groupId, agent: runner.agent, mode: launchMode, model: runner.model, effort: runner.effort, attachments, worktree: S.config.defaults.worktree === 'off' && !cmp.length ? false : undefined, compare: cmp.length ? cmp : undefined, subagents: team.length && canLead(runner.agent) ? team : undefined },
           }),
         ),
       );
@@ -347,7 +390,9 @@ export function renderLauncher() {
       tray.restore(files);
     }
   };
-  $('#launch', box).onclick = go;
+  $('#launch', box).onclick = () => {
+    go();
+  };
   // Picking other places (or a machine coming online) changes which harnesses exist: keep the
   // pick if one of them still has it, else move to one that's installed there.
   box.placesChanged = () => {

package/web/js/features/live.js

@@ -17,6 +17,7 @@ import { openSettings } from './settings.js';
 import { renderPrStrip } from './ship.js';
 import { onChildSummary } from './team.js';
 import { onActivity } from './turns.js';
+import { applySpells, spellEvent } from './spells.js';
 import { loadUpdate, renderUpdate } from './update.js';
 
 export function connect() {
@@ -37,10 +38,16 @@ export function connect() {
     keepInPlace(follow ? S.nodes.get(s.id).card : feedAnchor(s.id), renderFeed);
     if (prev?.state !== s.state || prev?.queued !== s.queued) scheduleRefetch(s.id);
     if (JSON.stringify([prev?.pr, prev?.toShip, prev?.state, prev?.shipping]) !== JSON.stringify([s.pr, s.toShip, s.state, s.shipping])) renderPrStrip(s.id);
+    if (prev?.state !== s.state || prev?.pr?.state !== s.pr?.state) spellEvent('summary');
   });
   es.addEventListener('activity', (e) => onActivity(JSON.parse(e.data)));
   es.addEventListener('turn', (e) => scheduleRefetch(JSON.parse(e.data).sessionId));
-  es.addEventListener('finished', (e) => notifyFinished(JSON.parse(e.data).session));
+  es.addEventListener('finished', (e) => (notifyFinished(JSON.parse(e.data).session), spellEvent('finished')));
+  // A spell hook's notify, from the server.
+  es.addEventListener('spell', (e) => {
+    const m = JSON.parse(e.data);
+    if (m.toast) toast(`<b>${esc(m.spell)}</b> · ${esc(m.toast)}`);
+  });
   es.addEventListener('removed', (e) => {
     const { id } = JSON.parse(e.data);
     S.sessions.delete(id);
@@ -80,6 +87,7 @@ export async function loadSessions() {
 
 export async function loadConfig() {
   S.config = await api('/config');
+  applySpells();
   renderProjects();
   renderLaunchChips();
   paintAutoBtn();

package/web/js/features/settings.js

@@ -23,6 +23,7 @@ import { copySetupCommand, INSTALLABLE, installHarness, isInstalling, setupComma
 import { clearPicks } from './transcript.js';
 import { repaintViews } from './turns.js';
 import { openUsage } from './usage.js';
+import { spellsPane } from './spell-ui.js';
 
 // A sidebar of sections and one pane at a time, like every other app's settings. Big lists
 // (memory, automations, usage history) keep their own views; a pane only summarises and links.
@@ -34,6 +35,7 @@ const SETTINGS_PANES = [
   { id: 'machines', label: 'Machines', icon: 'server', lede: 'Other computers that run agents for you, over SSH.' },
   { id: 'memory', label: 'Memory', icon: 'spark', lede: "Learned from your sessions and added to every agent's prompt. What you ask always wins." },
   { id: 'automations', label: 'Automations', icon: 'play', lede: 'Saved prompts, and the triggers that launch them for you.' },
+  { id: 'spells', label: 'Spells', icon: 'spark', lede: 'Changes to wisp itself: buttons, panels, blocks, looks and behaviour. Cast one, or add one a colleague sent.' },
   { id: 'usage', label: 'Usage', icon: 'stats', lede: 'Spend and outcomes over the last 7 days.' },
   { id: 'privacy', label: 'Privacy', icon: 'info', lede: 'What wisp sends about itself. Never prompts, paths or code.' },
 ];
@@ -135,6 +137,7 @@ export function openSettings(opts) {
             ${row('Triggers', '<span class="trigger-hint"></span>', '<button class="ghost sm" data-auto="triggers">Manage</button>')}
           </div>
         </section>
+        <section class="sx-pane sp-pane" data-pane="spells"></section>
         <section class="sx-pane" data-pane="usage">
           <div class="us-tiles sx-usage"><div class="it-loading"><span class="orb tiny"></span>Adding it up…</div></div>
           <div class="sx-group">${row('Charts and breakdowns', 'Per day, per project and per harness · model', '<button class="ghost sm" id="openUsage">Open usage</button>')}</div>
@@ -149,6 +152,7 @@ export function openSettings(opts) {
     </div>`);
   const close = overlay(node);
   $('.close', node).onclick = close;
+  spellsPane($('[data-pane="spells"].sx-pane', node));
   const paintAgents = () => {
     $('.sx-agents', node).innerHTML = S.agents.length
       ? S.agents.map((a) => {
@@ -441,6 +445,23 @@ export function openSettings(opts) {
   $('#openRouter', node).onclick = () => openRouter({ host: host('auto') });
   $('#openMemory', node).onclick = () => openMemory({ host: host('memory') });
   $$('[data-auto]', node).forEach((b) => (b.onclick = () => openAutomations({ tab: b.dataset.auto, host: host('automations') })));
+  // Settings a spell sets are locked while it's on: the row says which spell, and links to Spells.
+  const LOCKABLE = { transcript: '#txDefault', worktree: '#wtDefault', fixConflicts: '#fixConflicts', learn: '#learn', editor: 'select[name="editor"]', notify: '#notif' };
+  const paintLocks = () => {
+    for (const n of $$('.sp-lock', node)) n.remove();
+    for (const [key, sel] of Object.entries(LOCKABLE)) {
+      const ctl = $(sel, node);
+      if (!ctl) continue;
+      const by = S.config.lockedBy?.[key];
+      ctl.disabled = !!by;
+      if (by) $('.sx-text', ctl.closest('.sx-row'))?.insertAdjacentHTML('beforeend', `<small class="sp-lock">${icon('spark')}Set by the spell <b>${esc(by.name)}</b> · <button class="link xs" data-pane-go="spells">Spells</button></small>`);
+    }
+  };
+  paintLocks();
+  bus.on('config', paintLocks, { node });
+  node.addEventListener('click', (e) => {
+    if (e.target.closest('[data-pane-go]')) show(e.target.closest('[data-pane-go]').dataset.paneGo);
+  });
   $('#openUsage', node).onclick = () => openUsage({ days: 7, host: host('usage') });
   $('#openPhone', node).onclick = () => openPhone({ host: host('notifications') });
   $('#openMachines', node).onclick = () => openMachines({ host: host('machines') });