wisp-agents 0.24.0 → 0.25.0

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

package/web/js/features/slash.js

@@ -5,6 +5,7 @@ import { esc } from '../md.js';
 import { el } from '../core/dom.js';
 import { SLASH, slashMatches } from '../slash-text.js';
 import { feedbackOn } from './feedback.js';
+import { activeSpells } from './spells.js';
 
 // Register before the box's own Enter handler: picking a command must not send it.
 export function slashMenu(ta, host) {
@@ -13,7 +14,7 @@ export function slashMenu(ta, host) {
   let items = [];
   let sel = 0;
   let closed = false; // Esc: hidden until the text changes
-  const commands = () => SLASH.filter((c) => c.name !== 'feedback' || feedbackOn());
+  const commands = () => [...SLASH.filter((c) => c.name !== 'feedback' || feedbackOn()), ...activeSpells().flatMap((s) => (s.slash || []).map((c) => ({ name: c.name, args: c.args || '', hint: c.hint || `From ${s.name}` })))];
   const paint = () => {
     const next = !closed && document.activeElement === ta ? slashMatches(ta.value, commands()) : [];
     if (next.map((c) => c.name).join() !== items.map((c) => c.name).join()) sel = 0;

package/web/js/features/spell-actions.js

@@ -0,0 +1,64 @@
+// What spell buttons do to tasks, through the same functions the rest of the page uses. Loaded on
+// first use, so spells.js doesn't import half the app.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import { $, el, icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { overlay } from '../ui/overlay.js';
+import { toast } from '../ui/toast.js';
+import { setArchived, toggleDone } from './actions.js';
+import { recipeParams, runRecipe } from './automations.js';
+import { sendReply } from './composer.js';
+import { shipDialog } from './ship.js';
+
+// A follow-up: through the card's box when it's open (optimistic, like typing it), else straight to the API.
+export async function sendTo(id, text) {
+  if (S.full.has(id) && S.nodes.get(id)?.body) return sendReply(id, text);
+  await api(`/sessions/${id}/reply`, { method: 'POST', body: { text } });
+  toast('Sent');
+}
+
+const project = () => S.config.projects.find((p) => p.id === S.filter) || null;
+
+export async function launchTask(v, s) {
+  const cwd = v.cwd || s?.cwd || project()?.path || '';
+  const out = await api('/sessions', { method: 'POST', body: { prompt: v.prompt, ...(cwd ? { cwd } : { scratch: true }), agent: v.agent || undefined, model: v.model || undefined, effort: v.effort || undefined, mode: v.mode || undefined } });
+  toast(`Started <b>${esc(out.title)}</b>`);
+}
+
+// Rerun a task as a new one (its first request unless the spell gives a prompt), on another harness.
+export async function rerunOn(s, v) {
+  const full = S.full.get(s.id) || (await api(`/sessions/${s.id}`));
+  const prompt = v.prompt || full.turns?.[0]?.prompt || s.title;
+  const out = await api('/sessions', { method: 'POST', body: { prompt, cwd: s.scratch ? undefined : s.cwd, scratch: s.scratch || undefined, agent: v.agent || undefined, model: v.model ?? undefined, effort: v.effort || undefined, mode: v.mode || undefined } });
+  toast(`Started <b>${esc(out.title)}</b> on ${esc(out.agent)}`);
+}
+
+export function recipe(name) {
+  const loose = (x) => String(x).toLowerCase().replace(/[^a-z0-9]+/g, '');
+  const r = (S.config.recipes || []).find((x) => x.id === name || loose(x.name) === loose(name));
+  if (!r) throw new Error(`No recipe named ${name}`);
+  runRecipe({ ...r, params: recipeParams(r.prompt) });
+}
+
+export const ship = (id) => shipDialog(id);
+export const done = (id) => toggleDone(id);
+export const archive = (id) => setArchived(id, true);
+
+export async function exec(id, command) {
+  const out = await api(`/sessions/${id}/exec`, { method: 'POST', body: { command, key: `spell:${command}` } });
+  const ok = out.exitCode === 0;
+  toast(`${icon(ok ? 'check' : 'x')} <code>${esc(command)}</code> ${ok ? 'finished' : `exited ${esc(out.exitCode)}`}`, {
+    tone: ok ? '' : 'bad',
+    action: {
+      label: 'Output',
+      run: () => {
+        const node = el(`<div class="modal sp-panel"><header><h2>${icon('terminal')} ${esc(command)}</h2><button class="icon-btn close">${icon('x')}</button></header><pre class="code sp-out"><code>${esc(out.output || '(no output)')}</code></pre></div>`);
+        const close = overlay(node);
+        $('.close', node).onclick = close;
+      },
+    },
+    timeout: 8000,
+  });
+}