wisp-agents 0.14.0 → 0.16.0

package/web/js/features/automations.js

@@ -0,0 +1,305 @@
+// Automations: recipes (saved prompts) and triggers (schedules, GitHub watchers).
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { $, $$, el, icon } from '../core/dom.js';
+import { ago, whenLabel } from '../core/format.js';
+import { launch, S } from '../core/state.js';
+import { overlay, present } from '../ui/overlay.js';
+import { toast, toastError } from '../ui/toast.js';
+import { renderFeed, reveal, setFocus } from './feed.js';
+import { launchBehind } from './launcher.js';
+import { projectById } from './places.js';
+import { runnerPicker } from './runner-picker.js';
+import { agentName, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
+
+// Top bar: always one click to recipes and triggers. The badge counts triggers that are on;
+// the tooltip says what fires next.
+export async function paintAutoBtn() {
+  const btn = $('#autoBtn');
+  const on = (S.config.triggers || []).filter((t) => t.enabled);
+  const n = $('.ab-n', btn);
+  n.hidden = !on.length;
+  n.textContent = on.length;
+  btn.classList.toggle('live', !!on.length);
+  const r = S.config.recipes?.length || 0;
+  let title = `Automations: ${r} recipe${r === 1 ? '' : 's'} · ${on.length} trigger${on.length === 1 ? '' : 's'} on`;
+  if (on.length) {
+    const next = (await api('/triggers').catch(() => [])).filter((t) => t.enabled && t.nextAt).sort((a, b) => a.nextAt - b.nextAt)[0];
+    if (next) title += `\nNext: ${next.name} · ${whenLabel(next.nextAt)}`;
+  }
+  btn.title = title;
+}
+
+const TRIGGER_KINDS = [
+  { kind: 'schedule', label: 'Schedule', icon: 'clock', hint: 'On a cron schedule, local time' },
+  { kind: 'ci', label: 'CI failed', icon: 'warn', hint: 'A GitHub Actions run fails (polled with gh)' },
+  { kind: 'issues', label: 'Issue labelled', icon: 'ask', hint: 'An open issue gets a label (polled with gh)' },
+];
+const CRON_PRESETS = [
+  ['Weekdays 9:00', '0 9 * * 1-5'],
+  ['Every hour', '0 * * * *'],
+  ['Daily 18:00', '0 18 * * *'],
+  ['Mondays 8:00', '0 8 * * 1'],
+];
+export const recipeParams = (prompt) => [...new Set([...String(prompt || '').matchAll(/\{([a-zA-Z][\w-]{0,30})\}/g)].map((m) => m[1]))];
+
+const projectOptions = (selected, { any } = {}) =>
+  (any ? `<option value="">${esc(any)}</option>` : '') +
+  S.config.projects.map((p) => `<option value="${esc(p.path)}" ${p.path === selected ? 'selected' : ''}>${esc(p.name)}</option>`).join('');
+const modeOptions = (selected, { inherit } = {}) =>
+  (inherit ? `<option value="">${esc(inherit)}</option>` : '') + MODES.map((m) => `<option value="${m.id}" ${m.id === selected ? 'selected' : ''}>${m.label}</option>`).join('');
+
+export function openAutomations({ tab = 'recipes', edit = null, host } = {}) {
+  const node = el(`<div class="modal auto-modal">
+      <header><h2>Automations</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <p class="mem-lede">Recipes are prompts you send again and again; <code>{name}</code> in one becomes a field to fill in. Triggers start sessions on their own.</p>
+      <div class="mem-tabs" role="tablist"></div>
+      <div class="auto-body"></div>
+    </div>`);
+  const close = present(node, host);
+  let recipes = [];
+  let triggers = [];
+  let editing = edit; // { type: 'recipe' | 'trigger', draft }
+
+  const render = async () => {
+    [recipes, triggers] = await Promise.all([api('/recipes').catch(() => recipes), api('/triggers').catch(() => triggers)]);
+    if (!node.isConnected) return;
+    $('.mem-tabs', node).innerHTML = [
+      ['recipes', 'Recipes', recipes.length],
+      ['triggers', 'Triggers', triggers.length],
+    ].map(([k, l, n]) => `<button role="tab" data-tab="${k}" class="${tab === k ? 'on' : ''}">${l}<span>${n}</span></button>`).join('');
+    const body = $('.auto-body', node);
+    body.innerHTML = '';
+    if (editing?.type === 'recipe') body.append(recipeForm(editing.draft));
+    else if (editing?.type === 'trigger') body.append(triggerForm(editing.draft));
+    else body.innerHTML = tab === 'recipes' ? recipesView() : triggersView();
+  };
+
+  const recipesView = () =>
+    `<div class="au-list">${
+      recipes
+        .map((r) => {
+          const proj = S.config.projects.find((p) => p.path === r.cwd);
+          const tags = [r.params.length ? r.params.map((p) => `{${p}}`).join(' ') : '', proj ? proj.name : 'Any project', r.agent ? agentName(r.agent) : '', r.runs ? `${r.runs} run${r.runs > 1 ? 's' : ''}` : ''].filter(Boolean);
+          return `<div class="au-item" data-id="${r.id}">
+            <span class="mem-ico">${icon('spark')}</span>
+            <div class="au-main"><b>${esc(r.name)}</b><p>${esc(r.prompt.replace(/\s+/g, ' ').slice(0, 140))}</p><span class="au-tags">${tags.map((t) => `<i>${esc(t)}</i>`).join('')}</span></div>
+            <span class="au-acts"><button class="primary sm" data-act="run">Run</button><button class="icon-btn" data-act="schedule" title="Run it on a schedule">${icon('clock')}</button><button class="icon-btn" data-act="edit" title="Edit">${icon('pen')}</button><button class="icon-btn" data-act="delete" title="Delete">${icon('trash')}</button></span>
+          </div>`;
+        })
+        .join('') || '<p class="mem-empty">No recipes yet. Save a task you repeat, like a release checklist, a PR from a commit, or a dependency bump.</p>'
+    }</div><button class="mem-add" data-act="new">${icon('plus')}New recipe</button>
+    <p class="hint">Also from the terminal: <code>wisp recipes</code>, <code>wisp run &lt;name&gt; [values…]</code>.</p>`;
+
+  const describe = (t) => {
+    const proj = S.config.projects.find((p) => p.path === t.cwd)?.name || t.cwd.split(/[\\/]/).pop();
+    if (t.kind === 'schedule') return `<code>${esc(t.cron)}</code> in ${esc(proj)}${t.nextAt ? ` · next ${esc(whenLabel(t.nextAt))}` : ''}`;
+    const what = t.kind === 'ci' ? `failed CI${t.branch ? ` on <code>${esc(t.branch)}</code>` : ''}` : `issues labelled <code>${esc(t.label)}</code>`;
+    return `Watches ${what} in ${esc(proj)} every ${t.every} min${t.seeded ? '' : ' · first check records what is already there'}`;
+  };
+  const triggersView = () =>
+    `<div class="au-list">${
+      triggers
+        .map((t) => {
+          const k = TRIGGER_KINDS.find((x) => x.kind === t.kind);
+          const last = t.lastSessionId && S.sessions.has(t.lastSessionId) ? `<a href="#" data-session="${esc(t.lastSessionId)}">last run ${ago(t.lastRunAt)} ago</a>` : t.lastRunAt ? `last run ${ago(t.lastRunAt)} ago` : 'not run yet';
+          return `<div class="au-item ${t.enabled ? '' : 'off'}" data-id="${t.id}">
+            <span class="mem-ico">${icon(k.icon)}</span>
+            <div class="au-main"><b>${esc(t.name)}</b><p>${describe(t)}</p><span class="au-tags"><i>${esc(MODES.find((m) => m.id === t.mode)?.label || t.mode)}</i>${t.agent ? `<i>${esc(agentName(t.agent))}</i>` : ''}<i>${last}</i></span>${t.lastError ? `<p class="au-err">${icon('warn')}${esc(t.lastError)}</p>` : ''}</div>
+            <span class="au-acts"><button class="ghost xs" data-act="fire" title="${t.kind === 'schedule' ? 'Run it now' : 'Check GitHub now'}">${icon('replay')}${t.kind === 'schedule' ? 'Run now' : 'Check now'}</button><button class="switch" data-act="toggle" role="switch" aria-checked="${t.enabled}" title="On / off"></button><button class="icon-btn" data-act="edit" title="Edit">${icon('pen')}</button><button class="icon-btn" data-act="delete" title="Delete">${icon('trash')}</button></span>
+          </div>`;
+        })
+        .join('') || '<p class="mem-empty">No triggers yet. Run a recipe every weekday morning, or send an agent after every red CI run.</p>'
+    }</div><button class="mem-add" data-act="new">${icon('plus')}New trigger</button>
+    <p class="hint">Triggers run while wisp is open. GitHub watchers use your <code>gh</code> login and poll, so nothing has to reach this machine.</p>`;
+
+  // Harness · model button for a form, with "Launcher default" when no agent is set.
+  const runnerField = (draft) => {
+    const wrap = el(`<div class="au-runner"><button type="button" class="runner-btn" aria-haspopup="dialog"></button><button type="button" class="link xs" ${draft.agent ? '' : 'hidden'}>Use launcher default</button></div>`);
+    const [btn, reset] = wrap.children;
+    const paint = () => (paintRunnerBtn(btn, draft.agent, draft.model, draft.effort), (reset.hidden = !draft.agent));
+    btn.onclick = () =>
+      runnerPicker(btn, { agent: draft.agent || S.config.defaults.agent, model: draft.model, effort: draft.effort, savedModel, savedEffort, auto: true }, (a, m, e) => {
+        Object.assign(draft, { agent: a, model: m, effort: e });
+        paint();
+      });
+    reset.onclick = () => (Object.assign(draft, { agent: '', model: '', effort: '' }), paint());
+    paint();
+    return wrap;
+  };
+
+  const recipeForm = (d) => {
+    const f = el(`<form class="au-form">
+        <label><span>Name</span><input class="input" name="name" maxlength="60" placeholder="Release" spellcheck="false"></label>
+        <label class="stack"><span>Prompt <small class="muted">· <code>{version}</code> becomes a field</small></span><textarea class="textarea mono" name="prompt" rows="7" spellcheck="false" placeholder="Prepare release {version}: update CHANGELOG, README and docs/, bump package.json, tag v{version}…"></textarea></label>
+        <p class="au-params muted xs"></p>
+        <label><span>Project</span><select name="cwd">${projectOptions(d.cwd, { any: 'Any project (picked when run)' })}</select></label>
+        <label><span>Mode</span><select name="mode">${modeOptions(d.mode, { inherit: 'Launcher default' })}</select></label>
+        <div class="au-row"><span>Harness</span></div>
+        <div class="au-foot"><button type="button" class="ghost sm" data-act="cancel">Cancel</button><button class="primary sm">${d.id ? 'Save' : 'Create recipe'}</button></div>
+      </form>`);
+    $('[name="name"]', f).value = d.name || '';
+    $('[name="prompt"]', f).value = d.prompt || '';
+    $('.au-row', f).append(runnerField(d));
+    const params = () => {
+      const p = recipeParams($('[name="prompt"]', f).value);
+      $('.au-params', f).innerHTML = p.length ? `Fields when run: ${p.map((x) => `<code>{${esc(x)}}</code>`).join(' ')}` : 'No fields: it runs as written.';
+    };
+    $('[name="prompt"]', f).oninput = params;
+    params();
+    f.onsubmit = async (e) => {
+      e.preventDefault();
+      const body = { name: $('[name="name"]', f).value, prompt: $('[name="prompt"]', f).value, cwd: $('[name="cwd"]', f).value, mode: $('[name="mode"]', f).value, agent: d.agent || '', model: d.model || '', effort: d.effort || '' };
+      try {
+        await api(d.id ? `/recipes/${d.id}` : '/recipes', { method: d.id ? 'PATCH' : 'POST', body });
+        editing = null;
+        tab = 'recipes';
+        render();
+      } catch (err) {
+        toastError(err);
+      }
+    };
+    requestAnimationFrame(() => $(d.name ? '[name="prompt"]' : '[name="name"]', f)?.focus());
+    return f;
+  };
+
+  const triggerForm = (d) => {
+    d.kind ||= 'schedule';
+    const f = el(`<form class="au-form">
+        <div class="au-kinds">${TRIGGER_KINDS.map((k) => `<button type="button" data-kind="${k.kind}" class="${k.kind === d.kind ? 'on' : ''}">${icon(k.icon)}<b>${k.label}</b><small>${k.hint}</small></button>`).join('')}</div>
+        <label><span>Name</span><input class="input" name="name" maxlength="60" spellcheck="false"></label>
+        <label><span>Project</span><select name="cwd">${projectOptions(d.cwd || projectById(launch.project)?.path)}</select></label>
+        <div class="k-schedule"><label><span>When</span><input class="input mono" name="cron" spellcheck="false" placeholder="0 9 * * 1-5"></label>
+          <p class="au-presets">${CRON_PRESETS.map(([l, c]) => `<button type="button" class="lp-chip" data-cron="${c}">${l}</button>`).join('')}<span class="muted xs">minute hour day month weekday</span></p></div>
+        <div class="k-ci"><label><span>Branch</span><input class="input mono" name="branch" spellcheck="false" placeholder="Any branch (e.g. main)"></label></div>
+        <div class="k-issues"><label><span>Label</span><input class="input" name="label" spellcheck="false" placeholder="wisp"></label></div>
+        <div class="k-gh"><label><span>Check every</span><select name="every">${[2, 5, 15, 60].map((m) => `<option value="${m}" ${Number(d.every || 5) === m ? 'selected' : ''}>${m} min</option>`).join('')}</select></label></div>
+        <label><span>Run</span><select name="recipeId"><option value="">This prompt</option>${recipes.map((r) => `<option value="${r.id}" ${r.id === d.recipeId ? 'selected' : ''}>Recipe: ${esc(r.name)}</option>`).join('')}</select></label>
+        <label class="stack k-prompt"><span>Prompt <small class="muted k-vars"></small></span><textarea class="textarea mono" name="prompt" rows="6" spellcheck="false"></textarea></label>
+        <label><span>Mode</span><select name="mode">${modeOptions(d.mode || (d.kind === 'issues' ? 'plan' : 'edits'))}</select></label>
+        <div class="au-row"><span>Harness</span></div>
+        <p class="au-warn" hidden>${icon('warn')}<span>Issue text comes from GitHub: anyone who can open and label issues can steer this agent. Plan mode only reads; Full auto runs shell commands without asking.</span></p>
+        <div class="au-foot"><button type="button" class="ghost sm" data-act="cancel">Cancel</button><button class="primary sm">${d.id ? 'Save' : 'Create trigger'}</button></div>
+      </form>`);
+    for (const k of ['name', 'cron', 'branch', 'label']) $(`[name="${k}"]`, f).value = d[k] || '';
+    $('[name="prompt"]', f).value = d.prompt || '';
+    $('.au-row', f).append(runnerField(d));
+    const sync = () => {
+      for (const k of ['schedule', 'ci', 'issues']) $(`.k-${k}`, f).hidden = d.kind !== k;
+      $('.k-gh', f).hidden = d.kind === 'schedule';
+      $('.k-prompt', f).hidden = !!$('[name="recipeId"]', f).value;
+      $('.k-vars', f).innerHTML = d.kind === 'ci' ? '· <code>{name} {branch} {url} {id} {sha}</code> · empty = built-in CI prompt' : d.kind === 'issues' ? '· <code>{number} {title} {body} {url} {author}</code> · empty = built-in issue prompt' : '';
+      $('.au-warn', f).hidden = !(d.kind === 'issues' && $('[name="mode"]', f).value !== 'plan');
+      $$('.au-kinds button', f).forEach((b) => b.classList.toggle('on', b.dataset.kind === d.kind));
+    };
+    f.addEventListener('click', (e) => {
+      const k = e.target.closest('[data-kind]')?.dataset.kind;
+      if (k) {
+        if (k === 'issues' && !d.id) $('[name="mode"]', f).value = 'plan';
+        d.kind = k;
+        sync();
+      }
+      const c = e.target.closest('[data-cron]')?.dataset.cron;
+      if (c) $('[name="cron"]', f).value = c;
+    });
+    f.addEventListener('change', sync);
+    sync();
+    f.onsubmit = async (e) => {
+      e.preventDefault();
+      const v = (k) => $(`[name="${k}"]`, f).value;
+      const body = { kind: d.kind, name: v('name'), cwd: v('cwd'), cron: v('cron'), branch: v('branch'), label: v('label') || 'wisp', every: Number(v('every')), recipeId: v('recipeId'), prompt: v('recipeId') ? '' : v('prompt'), mode: v('mode'), agent: d.agent || '', model: d.model || '', effort: d.effort || '' };
+      try {
+        await api(d.id ? `/triggers/${d.id}` : '/triggers', { method: d.id ? 'PATCH' : 'POST', body });
+        editing = null;
+        tab = 'triggers';
+        render();
+      } catch (err) {
+        toastError(err);
+      }
+    };
+    return f;
+  };
+
+  node.addEventListener('click', async (e) => {
+    const t = e.target.closest('[data-tab],[data-act],[data-session]');
+    if (!t || t.closest('.au-form') && !t.dataset.act) return;
+    if (t.dataset.tab) return e.preventDefault(), (tab = t.dataset.tab), (editing = null), render();
+    if (t.dataset.session) return e.preventDefault(), close(), reveal(t.dataset.session);
+    const act = t.dataset.act;
+    if (act === 'cancel') return (editing = null), render();
+    const itemId = t.closest('.au-item')?.dataset.id;
+    if (tab === 'recipes') {
+      const r = recipes.find((x) => x.id === itemId);
+      if (act === 'new') return (editing = { type: 'recipe', draft: { cwd: projectById(launch.project)?.path || '' } }), render();
+      if (act === 'edit') return (editing = { type: 'recipe', draft: { ...r } }), render();
+      if (act === 'run') return close(), runRecipe(r);
+      if (act === 'schedule') return (tab = 'triggers'), (editing = { type: 'trigger', draft: { kind: 'schedule', name: r.name, recipeId: r.id, cwd: r.cwd || projectById(launch.project)?.path, mode: r.mode || undefined } }), render();
+      if (act === 'delete' && confirm(`Delete the recipe “${r.name}”?`)) return api(`/recipes/${r.id}`, { method: 'DELETE' }).then(render).catch(toastError);
+    } else {
+      const tr = triggers.find((x) => x.id === itemId);
+      if (act === 'new') return (editing = { type: 'trigger', draft: {} }), render();
+      if (act === 'edit') return (editing = { type: 'trigger', draft: { ...tr } }), render();
+      if (act === 'toggle') return api(`/triggers/${tr.id}`, { method: 'PATCH', body: { enabled: !tr.enabled } }).then(render).catch(toastError);
+      if (act === 'delete' && confirm(`Delete the trigger “${tr.name}”?`)) return api(`/triggers/${tr.id}`, { method: 'DELETE' }).then(render).catch(toastError);
+      if (act === 'fire') {
+        t.disabled = true;
+        try {
+          const r = await api(`/triggers/${tr.id}/run`, { method: 'POST', body: {} });
+          for (const x of r.started) S.sessions.set(x.id, x);
+          renderFeed();
+          toast(r.started.length ? `Started ${r.started.length} session${r.started.length > 1 ? 's' : ''}` : 'Nothing new to act on.');
+        } catch (err) {
+          toastError(err);
+        }
+        render();
+      }
+    }
+  });
+  bus.on('config', () => !editing && render(), { node });
+  render();
+}
+
+// Run a recipe: show it, ask for its fields (and a project, if it isn't tied to one), launch on Run.
+export function runRecipe(r) {
+  if (!r) return;
+  const needsProject = !r.cwd;
+  const node = el(`
+    <form class="modal run-modal">
+      <header><h2>${esc(r.name)}</h2><button type="button" class="icon-btn close">${icon('x')}</button></header>
+      <p class="cmp-prompt">${esc(r.prompt)}</p>
+      ${r.params.map((p) => `<label class="ship-field"><span>${esc(p)}</span><input class="input" name="p:${esc(p)}" spellcheck="false" required></label>`).join('')}
+      ${needsProject ? `<label class="ship-field"><span>Project</span><select name="cwd">${projectOptions(projectById(launch.project)?.path)}</select></label>` : ''}
+      <div class="ship-foot"><span class="muted xs">${r.agent ? `${esc(agentName(r.agent))}${r.model ? ` · ${esc(r.model)}` : ''}` : 'Launcher harness'} · ${esc(MODES.find((m) => m.id === r.mode)?.label || 'launcher mode')}</span><button class="primary sm">${icon('enter')}Run</button></div>
+    </form>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  node.onsubmit = async (e) => {
+    e.preventDefault();
+    const params = Object.fromEntries($$('input[name^="p:"]', node).map((i) => [i.name.slice(2), i.value]));
+    const d = S.config.defaults;
+    const agent = r.agent || d.agent;
+    const cwd = needsProject ? $('[name="cwd"]', node).value : r.cwd;
+    const model = r.agent ? r.model : savedModel(agent);
+    const effort = r.agent ? r.effort : savedEffort(agent, model);
+    const body = { params, cwd: needsProject ? cwd : undefined, agent, model: r.agent ? undefined : model, effort: r.agent ? undefined : effort, mode: r.mode || d.mode };
+    close();
+    try {
+      const prompt = r.prompt.replace(/\{([a-zA-Z][\w-]{0,30})\}/g, (_, k) => params[k] || ''); // as the server fills it
+      const s = await launchBehind({ prompt, cwd, runner: { agent, model, effort } }, () => api(`/recipes/${r.id}/run`, { method: 'POST', body }));
+      setFocus(s.id);
+    } catch (err) {
+      toast(`“${esc(r.name)}” didn’t start: ${esc(err.message)}`, { tone: 'bad', action: { label: 'Try again', run: () => runRecipe(r) } });
+    }
+  };
+  // Always wait for Run, even with nothing to fill in, so a click on a recipe never launches it outright.
+  requestAnimationFrame(() => ($('input, select', node) || $('button.primary', node))?.focus());
+}
+
+// A task worth repeating becomes a recipe, starting from its first prompt.
+export async function saveAsRecipe(id) {
+  const s = S.full.get(id) || (await api(`/sessions/${id}`).catch(() => null));
+  if (!s?.turns?.[0]) return;
+  openAutomations({ tab: 'recipes', edit: { type: 'recipe', draft: { name: s.title, prompt: s.turns[0].prompt, cwd: '', mode: s.mode, agent: s.agent, model: s.model, effort: s.effort } } });
+}

package/web/js/features/commands.js

@@ -0,0 +1,123 @@
+// The ⌘K palette's contents: actions on the focused session, every session, app actions, recipes
+// and project filters. palette.js draws it.
+
+import { palette } from '../palette.js';
+import { $ } from '../core/dom.js';
+import { ago, STATUS_LABEL } from '../core/format.js';
+import { S, save } from '../core/state.js';
+import { shortcuts } from '../ui/kbd.js';
+import { closeOverlay, overlay } from '../ui/overlay.js';
+import { deleteSession, rename, rerun, rollbackTurn, setArchived, takeOver, toggleDone } from './actions.js';
+import { openAutomations, recipeParams, runRecipe, saveAsRecipe } from './automations.js';
+import { compareView } from './compare.js';
+import { collapseAll, expand, feedToTop, renderFeed, reveal } from './feed.js';
+import { feedbackOn, openFeedback } from './feedback.js';
+import { focusLauncher, renderLaunchChips } from './launcher.js';
+import { openMachines } from './machines.js';
+import { openMemory } from './memory.js';
+import { openPhone } from './phone.js';
+import { openProjects, renderProjects } from './projects.js';
+import { agentName } from './runners.js';
+import { openSettings } from './settings.js';
+import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
+import { replay } from './turns.js';
+import { openUsage } from './usage.js';
+
+const STATE_LABEL = { running: 'Working', waiting: 'Asking', review: 'Review', done: 'Done' };
+
+// Run something on a session's card, expanding it first if the action needs the body.
+function withCard(id, fn, { open = false } = {}) {
+  reveal(id);
+  if (!open || S.open.has(id)) return setTimeout(fn, 50);
+  expand(id).then(fn);
+}
+
+function paletteItems() {
+  const items = [];
+  const cur = S.focus && S.sessions.get(S.focus);
+  if (cur) {
+    const id = cur.id;
+    const full = S.full.get(id);
+    const lastTurn = full?.turns?.at(-1);
+    const live = cur.state === 'running' || cur.state === 'waiting';
+    const canRollback = cur.agent !== 'wisp' && !live && (lastTurn?.changes?.length || lastTurn?.checkpoint?.commit || cur.filesChanged);
+    const rolledBack = !!lastTurn?.rolledBackAt;
+    const g = 'This wisp';
+    const sub = cur.title;
+    items.push({ group: g, label: 'Follow up', sub, icon: 'send', kbd: '/', run: () => withCard(id, () => $('.reply', S.nodes.get(id)?.card)?.focus(), { open: true }) });
+    if (!live) items.push({ group: g, label: cur.state === 'done' ? 'Move back to review' : 'Mark done', sub, icon: 'done', kbd: 'E', run: () => toggleDone(id) });
+    if (canRollback) items.push({ group: g, label: rolledBack ? 'Re-apply latest turn' : 'Restore to before latest turn', sub, icon: rolledBack ? 'rerun' : 'replay', keywords: 'rollback revert undo checkpoint restore', run: () => rollbackTurn(id, lastTurn?.id, rolledBack) });
+    if (cur.archived || !live) items.push({ group: g, label: cur.archived ? 'Unarchive' : 'Archive', sub, icon: 'archive', kbd: 'A', run: () => setArchived(id, !cur.archived) });
+    items.push({ group: g, label: 'Take over in terminal', sub, icon: 'terminal', kbd: 'T', run: () => takeOver(id) });
+    items.push({ group: g, label: 'Rerun…', sub, icon: 'rerun', kbd: '⇧R', keywords: 'retry again restart model harness', run: () => rerun(id) });
+    if (shippable(cur)) items.push({ group: g, label: shipLabel(cur), sub, icon: 'send', kbd: 'S', keywords: 'commit push pull request pr github', run: () => shipDialog(id) });
+    if (cur.pr?.state === 'OPEN') items.push({ group: g, label: `Merge PR #${cur.pr.number}…`, sub, icon: 'check', keywords: 'squash github', run: () => mergePr(id) });
+    if (cur.groupId) items.push({ group: g, label: 'Compare runs', sub, icon: 'agent', keywords: 'vs side by side harness', run: () => compareView(id) });
+    items.push({ group: g, label: 'Save as recipe…', sub, icon: 'spark', keywords: 'template reuse automation', run: () => saveAsRecipe(id) });
+    items.push({ group: g, label: 'Replay presentation', sub, icon: 'replay', kbd: 'R', run: () => withCard(id, () => replay(id), { open: true }) });
+    items.push({ group: g, label: 'Rename', sub, icon: 'pen', kbd: 'M', run: () => withCard(id, () => rename(id)) });
+    items.push({ group: g, label: 'Delete session', sub, icon: 'trash', kbd: '⌫', keywords: 'remove', run: () => deleteSession(id) });
+  }
+
+  const sessions = [...S.sessions.values()].filter((s) => !s.pending).sort((a, b) => a.archived - b.archived || b.updatedAt - a.updatedAt);
+  for (const s of sessions) {
+    const state = s.archived ? 'Archived' : s.state === 'review' ? STATUS_LABEL[s.status] || 'Review' : STATE_LABEL[s.state] || s.state;
+    items.push({
+      group: 'Wisps',
+      label: s.title,
+      sub: `${s.project} · ${state} · ${ago(s.updatedAt)}`,
+      dot: s.color,
+      keywords: [s.preview, s.live, s.question, agentName(s.agent)].filter(Boolean).join(' '),
+      // Live and unread work floats up; archived sinks.
+      rank: (s.state === 'waiting' ? 3 : 0) + (s.unread ? 2 : 0) + (s.state === 'running' ? 1 : 0) - (s.archived ? 4 : 0),
+      run: () => reveal(s.id),
+    });
+  }
+
+  const a = 'Actions';
+  items.push(
+    { group: a, label: 'New wisp', icon: 'plus', kbd: 'N', keywords: 'launch create prompt task', run: focusLauncher },
+    { group: a, label: S.showDone ? 'Hide done' : 'Show done', icon: 'done', keywords: 'toggle finished', run: () => $('#secDone .toggle-done').click() },
+    { group: a, label: S.showArchived ? 'Hide archived' : 'Show archived', icon: 'archive', keywords: 'toggle', run: () => $('#secArchived .toggle-done').click() },
+  );
+  if (S.open.size) items.push({ group: a, label: 'Collapse all', icon: 'minus', kbd: 'C', run: collapseAll });
+  items.push(
+    { group: a, label: 'Add project…', icon: 'folder', keywords: 'folder repo directory', run: () => openProjects({ focusAdd: true }) },
+    { group: a, label: 'Manage projects', icon: 'folder', keywords: 'rename color remove', run: () => openProjects() },
+    { group: a, label: 'Memory', icon: 'spark', keywords: 'learned preferences lessons retro', run: () => openMemory() },
+    { group: a, label: 'Recipes', icon: 'spark', keywords: 'automations saved prompts templates', run: () => openAutomations({ tab: 'recipes' }) },
+    { group: a, label: 'Triggers', icon: 'replay', keywords: 'automations schedule cron ci issues github', run: () => openAutomations({ tab: 'triggers' }) },
+    { group: a, label: 'Usage', icon: 'stats', keywords: 'spend cost tokens outcomes success', run: () => openUsage() },
+    { group: a, label: 'Phone', icon: 'send', keywords: 'ntfy telegram notifications mobile remote', run: () => openPhone() },
+    { group: a, label: 'Machines', icon: 'server', keywords: 'remote ssh server computer devbox cloud vm', run: () => openMachines() },
+    { group: a, label: 'Add a machine…', icon: 'server', keywords: 'remote ssh server computer connect', run: () => openMachines({ focusAdd: true }) },
+    { 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 },
+  );
+  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) }) });
+
+  const filter = (id) => () => {
+    S.filter = id;
+    save('wisp.filter', id);
+    renderProjects();
+    renderFeed();
+    feedToTop();
+    renderLaunchChips();
+  };
+  items.push({ group: 'Projects', label: 'All projects', sub: S.filter === 'all' ? 'Current filter' : '', dot: 'slate', keywords: 'filter clear', run: filter('all') });
+  for (const p of S.config.projects.slice().sort((x, y) => (y.lastUsedAt || y.addedAt) - (x.lastUsedAt || x.addedAt))) {
+    items.push({ group: 'Projects', label: p.name, sub: S.filter === p.id ? 'Current filter' : p.path, dot: p.color, keywords: `filter ${p.path}`, run: filter(p.id) });
+  }
+  return items;
+}
+
+let paletteOpen = false;
+export function openPalette() {
+  if (paletteOpen) return closeOverlay();
+  // Don't stack over another modal (settings, projects…); the palette replaces nothing.
+  if (!$('#overlay').hidden) return;
+  paletteOpen = true;
+  palette({ items: paletteItems(), overlay: (node) => overlay(node, { onClose: () => (paletteOpen = false) }) });
+}

package/web/js/features/compare.js

@@ -0,0 +1,104 @@
+// Compare: one task, several harnesses, side by side.
+
+import { countChanges, fmtDuration, renderPresentation } from '../blocks.js';
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import { $, el, icon } from '../core/dom.js';
+import { STATUS_LABEL } from '../core/format.js';
+import { S } from '../core/state.js';
+import { overlay } from '../ui/overlay.js';
+import { toast, toastError } from '../ui/toast.js';
+import { renderFeed, reveal } from './feed.js';
+import { loadSessions } from './live.js';
+import { agentName, effortLabel, harnessLogo } from './runners.js';
+import { ctxFor } from './turns.js';
+
+function turnMetrics(t) {
+  const lines = (t?.changes || []).reduce((acc, c) => {
+    const n = countChanges(c.edits);
+    return { add: acc.add + n.add, del: acc.del + n.del };
+  }, { add: 0, del: 0 });
+  const tests = (t?.presentation?.blocks || []).filter((b) => b?.type === 'tests');
+  return {
+    time: t?.endedAt ? t.endedAt - t.startedAt : null,
+    cost: t?.stats?.costUsd,
+    files: t?.changes?.length || 0,
+    ...lines,
+    tests: tests.length ? { passed: tests.reduce((a, b) => a + (Number(b.passed) || 0), 0), failed: tests.reduce((a, b) => a + (Number(b.failed) || 0), 0) } : null,
+    asks: (t?.activity || []).filter((a) => a.kind === 'ask').length,
+  };
+}
+
+export async function compareView(id) {
+  const s0 = S.sessions.get(id);
+  if (!s0?.groupId) return;
+  const group = [...S.sessions.values()].filter((x) => x.groupId === s0.groupId).sort((a, b) => a.createdAt - b.createdAt);
+  const fulls = (await Promise.all(group.map((g) => api(`/sessions/${g.id}`).catch(() => null)))).filter(Boolean);
+  const node = el(`
+    <div class="modal compare-modal">
+      <header><h2>Compare</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <p class="cmp-prompt">${esc(fulls[0]?.turns[0]?.prompt || '')}</p>
+      <div class="cmp-grid" style="--n:${fulls.length}"></div>
+    </div>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  const grid = $('.cmp-grid', node);
+  for (const f of fulls) {
+    const sum = S.sessions.get(f.id) || {};
+    const t = f.turns.at(-1);
+    const mx = turnMetrics(t);
+    const live = f.state === 'running' || f.state === 'waiting';
+    const col = el(`
+      <section class="cmp-col" data-id="${f.id}">
+        <div class="cmp-head">
+          <span class="rb-logo">${harnessLogo(f.agent)}</span>
+          <span class="cmp-who"><b>${esc(agentName(f.agent))}</b><small>${esc(f.model || 'Default model')}${f.effort ? ` · ${esc(effortLabel(f.effort))}` : ''}</small></span>
+          ${live ? `<span class="pill st-waiting"><i></i>${f.state === 'waiting' ? 'Asking' : 'Working'}</span>` : `<span class="pill st-${sum.status || 'info'}"><i></i>${STATUS_LABEL[sum.status] || 'Done'}</span>`}
+        </div>
+        <dl class="cmp-stats">
+          <div><dt>Time</dt><dd>${mx.time !== null ? fmtDuration(mx.time) : '—'}</dd></div>
+          <div><dt>Cost</dt><dd>${typeof mx.cost === 'number' ? `$${mx.cost.toFixed(2)}` : '—'}</dd></div>
+          <div><dt>Files</dt><dd>${mx.files} <span class="plus">+${mx.add}</span> <span class="minus">−${mx.del}</span></dd></div>
+          <div><dt>Tests</dt><dd>${mx.tests ? `<span class="${mx.tests.failed ? 'minus' : 'plus'}">${mx.tests.passed} ✓ ${mx.tests.failed ? `${mx.tests.failed} ✗` : ''}</span>` : '—'}</dd></div>
+          <div><dt>Asked</dt><dd>${mx.asks}</dd></div>
+        </dl>
+        <div class="cmp-body"></div>
+        <div class="cmp-foot">
+          <button class="ghost xs" data-a="open">${icon('chevron')}Open card</button>
+          <span class="grow"></span>
+          <button class="primary sm" data-a="keep" ${live ? 'disabled title="Still working"' : ''}>${icon('check')}Keep this</button>
+        </div>
+      </section>`);
+    $('.cmp-body', col).append(live ? el(`<p class="muted xs">${esc(sum.live || 'Working…')}</p>`) : renderPresentation(t?.presentation, ctxFor(f, t, false)));
+    grid.append(col);
+  }
+  grid.onclick = async (e) => {
+    const a = e.target.closest('[data-a]')?.dataset.a;
+    const keep = e.target.closest('.cmp-col')?.dataset.id;
+    if (!a || !keep) return;
+    if (a === 'open') return close(), reveal(keep);
+    const others = group.filter((g) => g.id !== keep);
+    if (!confirm(`Keep ${agentName(S.sessions.get(keep)?.agent)}'s result?\n\nThe other ${others.length === 1 ? 'run is' : `${others.length} runs are`} archived, and ${others.length === 1 ? 'its worktree is' : 'their worktrees are'} deleted with their changes.`)) return;
+    // Optimistic: the others leave the feed now; stopping and cleaning them up goes on behind.
+    for (const o of others) S.sessions.set(o.id, { ...S.sessions.get(o.id), archived: true });
+    close();
+    renderFeed();
+    reveal(keep);
+    toast(`Kept ${esc(agentName(S.sessions.get(keep)?.agent))}'s run. Ship it when you're ready.`);
+    let failed = false;
+    for (const o of others) {
+      if (o.state === 'running' || o.state === 'waiting') {
+        await api(`/sessions/${o.id}/stop`, { method: 'POST', body: {} }).catch(() => {});
+        await until(() => S.sessions.get(o.id)?.state !== 'running', 5000);
+      }
+      await api(`/sessions/${o.id}`, { method: 'PATCH', body: { archived: true, discardWorktree: true } }).catch((err) => ((failed = true), toastError(err)));
+    }
+    if (failed) loadSessions(); // show what really got archived
+  };
+}
+
+// Poll a condition for up to `ms` (used after asking the server to stop something).
+async function until(fn, ms) {
+  const end = Date.now() + ms;
+  while (Date.now() < end && !fn()) await new Promise((r) => setTimeout(r, 150));
+}