wisp-agents 0.15.0 → 0.17.0

package/web/js/features/settings.js

@@ -0,0 +1,390 @@
+// Settings: 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.
+
+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 { money, pct } from '../core/format.js';
+import { S } from '../core/state.js';
+import { overlay } from '../ui/overlay.js';
+import { toast, toastError, tryApi } from '../ui/toast.js';
+import { openRouter } from './auto.js';
+import { openAutomations } from './automations.js';
+import { renderLauncher } from './launcher.js';
+import { loadConfig } from './live.js';
+import { openMachines } from './machines.js';
+import { memorySummary, openMemory, setLearning } from './memory.js';
+import { notifyOn } from './notify.js';
+import { openPhone, phoneSummary } from './phone.js';
+import { machinesSummary } from './places.js';
+import { AUTO_GOALS, harnessLogo } from './runners.js';
+import { INSTALLABLE, installHarness, isInstalling } from './setup.js';
+import { openUsage } from './usage.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.
+const SETTINGS_PANES = [
+  { id: 'general', label: 'General', icon: 'settings', lede: 'Where files open, where you take over, and how tasks start.' },
+  { id: 'notifications', label: 'Notifications', icon: 'bolt', lede: 'Hear about questions and finished tasks, here or on your phone.' },
+  { id: 'agents', label: 'Agents', icon: 'agent', lede: 'The harnesses wisp found on this machine. Pick one next to the model in the launcher.' },
+  { id: 'auto', label: 'Auto', icon: 'spark', lede: 'wisp picks the harness and model for each task, and learns from how it went.' },
+  { 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: '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.' },
+];
+let settingsPane = 'general';
+
+// What a re-check turned up: harnesses found or gone, and model lists that grew or shrank.
+function recheckSummary(before, after) {
+  const count = (a) => (a?.models || []).filter((m) => m.id).length;
+  const notes = [];
+  for (const a of after) {
+    const was = before.get(a.id);
+    if (a.available && !was?.available) notes.push(`<b>${esc(a.name)}</b> found`);
+    else if (!a.available && was?.available) notes.push(`<b>${esc(a.name)}</b> not found`);
+    else if (a.available && count(a) !== count(was)) {
+      const d = count(a) - count(was);
+      notes.push(`<b>${esc(a.name)}</b> ${d > 0 ? '+' : '−'}${Math.abs(d)} model${Math.abs(d) === 1 ? '' : 's'}`);
+    } else if (a.available && a.version !== was?.version) notes.push(`<b>${esc(a.name)}</b> updated`);
+  }
+  return notes.length ? notes.join(' · ') : 'Up to date: nothing new';
+}
+
+export function openSettings(opts) {
+  if (SETTINGS_PANES.some((p) => p.id === opts?.pane)) settingsPane = opts.pane;
+  const d = S.config.defaults;
+  // A row: name and a line of explanation on the left, the control on the right.
+  const row = (name, desc, control, cls = '') => `<div class="sx-row ${cls}"><div class="sx-text"><b>${name}</b>${desc ? `<small>${desc}</small>` : ''}</div><div class="sx-ctl">${control}</div></div>`;
+  const missing = S.agents.filter((a) => !a.available).length;
+  const node = el(`
+    <div class="modal settings-modal sx">
+      <nav class="sx-nav" role="tablist" aria-orientation="vertical">
+        <h2>Settings</h2>
+        ${SETTINGS_PANES.map((p) => `<button role="tab" data-pane="${p.id}">${icon(p.icon)}<span>${p.label}</span>${p.id === 'agents' && missing ? `<i class="dot bad" title="${missing} not found"></i>` : ''}</button>`).join('')}
+      </nav>
+      <div class="sx-main">
+        <header><div><h3 class="sx-title"></h3><p class="sx-lede"></p></div><button class="icon-btn close">${icon('x')}</button></header>
+        <section class="sx-pane" data-pane="general">
+          <div class="sx-group">
+            ${row('Open files in', 'File links in cards and diffs', `<select name="editor">${[['vscode', 'VS Code'], ['cursor', 'Cursor'], ['windsurf', 'Windsurf'], ['zed', 'Zed'], ['idea', 'JetBrains'], ['none', 'Copy path']]
+              .map(([v, l]) => `<option value="${v}" ${d.editor === v || (!d.editor && v === 'vscode') ? 'selected' : ''}>${l}</option>`)
+              .join('')}</select>`)}
+            ${row('Take over in', 'The terminal a session opens in when you take it over', `<select name="terminal">${(S.config.terminals || []).map((t) => `<option value="${t.id}" ${(d.terminal || 'auto') === t.id ? 'selected' : ''}>${t.label}</option>`).join('')}</select>`)}
+            <div class="sx-row custom-term" ${d.terminal === 'custom' ? '' : 'hidden'}><div class="sx-text"><b>Terminal command</b><small><code>{cwd}</code> and <code>{cmd}</code> are filled in</small></div>
+              <div class="sx-ctl"><input class="input mono" name="terminalCommand" value="${esc(d.terminalCommand || '')}" placeholder="alacritty --working-directory {cwd} -e {cmd}" spellcheck="false"></div></div>
+          </div>
+          <div class="sx-group">
+            ${row('Worktree per task', 'Each task gets its own branch from origin/main, in git repos', '<button class="switch" id="wtDefault" role="switch"></button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="notifications">
+          <div class="sx-group">
+            ${row('Desktop notifications', '<span class="notif-hint"></span>', '<button class="switch" id="notif" role="switch"></button>')}
+          </div>
+          <div class="sx-group">
+            ${row('Phone', '<span class="phone-hint">ntfy or Telegram: answer questions from your phone</span>', '<button class="ghost sm" id="openPhone">Set up</button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="agents">
+          <div class="sx-group sx-agents"></div>
+          <div class="sx-group">
+            ${row('Installed something new?', '<span class="recheck-hint"></span>', `<button class="ghost sm" id="recheck">${icon('replay')}Re-check</button>`)}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="auto">
+          <div class="sx-group">
+            ${row('Goal', 'What Auto optimises for. Also in the launcher, next to Auto', `<span class="pk-seg ro-goal">${AUTO_GOALS.map((g) => `<button data-goal="${g.id}" title="${esc(g.hint)}">${g.label}</button>`).join('')}</span>`)}
+            ${row('Try new models', 'A new model or harness gets a few tasks that aren’t marked important before Auto relies on it', '<button class="switch" id="roExplore" role="switch"></button>')}
+            ${row('Harnesses it may use', 'Leave all off to let Auto use every one you have', '<span class="ro-allowed"></span>')}
+          </div>
+          <div class="sx-group">
+            ${row('What it learned', '<span class="ro-hint"></span>', '<button class="ghost sm" id="openRouter">Open</button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="machines">
+          <div class="sx-group">
+            ${row('Machines', '<span class="machines-hint"></span>', '<button class="ghost sm" id="openMachines">Manage</button>')}
+          </div>
+          <p class="hint">Also in the top bar, and in Projects: add folders on a machine, then launch there like anywhere else.</p>
+        </section>
+        <section class="sx-pane" data-pane="memory">
+          <div class="sx-group">
+            ${row('Learn from sessions', 'A short retro after each session keeps preferences and lessons', '<button class="switch" id="learn" role="switch"></button>')}
+            ${row('Remembered', '<span class="learn-hint"></span>', '<button class="ghost sm" id="openMemory">Open memory</button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="automations">
+          <div class="sx-group">
+            ${row('Recipes', '<span class="recipe-hint"></span>', '<button class="ghost sm" data-auto="recipes">Manage</button>')}
+            ${row('Triggers', '<span class="trigger-hint"></span>', '<button class="ghost sm" data-auto="triggers">Manage</button>')}
+          </div>
+        </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>
+        </section>
+        <section class="sx-pane" data-pane="privacy">
+          <div class="sx-group">
+            ${row('Anonymous usage stats', '<span class="tele-hint"></span>', '<button class="switch" id="tele" role="switch"></button>')}
+          </div>
+          <p class="hint">Agent, model, status, timings and scrubbed errors only.</p>
+        </section>
+      </div>
+    </div>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  const paintAgents = () => {
+    $('.sx-agents', node).innerHTML = S.agents.length
+      ? S.agents.map((a) => {
+        const n = (a.models || []).filter((m) => m.id).length;
+        // opencode: wisp can install it (free models, no account), so its row offers that.
+        const canInstall = !a.available && INSTALLABLE.has(a.id);
+        const busy = isInstalling(a.id);
+        const desc = a.available
+          ? [a.version, n && `${n} model${n === 1 ? '' : 's'}`].filter(Boolean).join(' · ')
+          : busy ? 'Installing into ~/.wisp/tools…' : canInstall ? 'Install it here: free models, no account needed' : `Install the ${a.name} CLI and sign in, then re-check`;
+        const install = canInstall ? `<button class="ghost sm" data-install="${esc(a.id)}" ${busy ? 'disabled' : ''}>${busy ? 'Installing…' : 'Install'}</button>` : '';
+        return row(`<span class="model-logo">${harnessLogo(a.id)}</span>${esc(a.name)}`, esc(desc), `${install}<span class="sx-state ${a.available ? 'ok' : 'bad'}" ${a.error ? `title="${esc(a.error)}"` : ''}><i class="dot ${a.available ? 'ok' : 'bad'}"></i>${a.available ? 'Ready' : 'Not found'}</span>`);
+      }).join('')
+      : '<div class="sx-row"><div class="it-loading"><span class="orb tiny"></span>Looking for harnesses…</div></div>';
+    const missing = S.agents.filter((a) => !a.available).length;
+    const dot = $('.sx-nav [data-pane="agents"] .dot', node);
+    if (dot && !missing) dot.remove();
+    if (!dot && missing) $('.sx-nav [data-pane="agents"]', node).insertAdjacentHTML('beforeend', `<i class="dot bad" title="${missing} not found"></i>`);
+    const online = S.machines.filter((m) => m.state === 'online').length;
+    $('.recheck-hint', node).textContent = `After installing a CLI, signing in or adding a provider, look for harnesses and models again${online ? `, here and on ${online} machine${online === 1 ? '' : 's'}` : ''}`;
+  };
+  paintAgents();
+  bus.on('agents', paintAgents, { node });
+  bus.on('install', paintAgents, { node });
+  $('.sx-agents', node).onclick = (e) => {
+    const b = e.target.closest('[data-install]');
+    if (b) installHarness(b.dataset.install);
+  };
+  $('#recheck', node).onclick = async (e) => {
+    const btn = e.currentTarget;
+    btn.disabled = true;
+    btn.classList.add('busy');
+    const before = new Map(S.agents.map((a) => [a.id, a]));
+    try {
+      S.agents = await api('/agents/recheck', { method: 'POST', body: {} });
+      if (!node.isConnected) return;
+      paintAgents();
+      $('#launcher')?.placesChanged?.();
+      toast(recheckSummary(before, S.agents));
+    } catch (err) {
+      toastError(err);
+    } finally {
+      btn.disabled = false;
+      btn.classList.remove('busy');
+    }
+  };
+  const pick = (id, focus = false) => {
+    settingsPane = id;
+    const p = SETTINGS_PANES.find((x) => x.id === id);
+    $$('.sx-nav [data-pane]', node).forEach((b) => {
+      const on = b.dataset.pane === id;
+      b.setAttribute('aria-selected', on);
+      b.tabIndex = on ? 0 : -1;
+      if (on && focus) b.focus();
+    });
+    $$('.sx-pane', node).forEach((s) => (s.hidden = s.dataset.pane !== id));
+    $('.sx-title', node).textContent = p.label;
+    $('.sx-lede', node).textContent = p.lede;
+    $('.sx-main', node).scrollTop = 0;
+  };
+  // Memory, Automations, Usage and Phone open in the main area, next to the sidebar, with a
+  // way back to the section they came from. Leaving one goes back; only the X closes Settings.
+  const main = $('.sx-main', node);
+  const leave = () => {
+    const v = $('.sx-main > .embedded', node);
+    if (!v) return;
+    v.remove();
+    $('.sx-main > header', node).hidden = false;
+    paintHints();
+  };
+  const show = (id, focus) => (leave(), pick(id, focus));
+  const host = (pane) => (view) => {
+    show(pane);
+    view.classList.add('embedded');
+    const back = el(`<button class="ghost sm sx-back">${icon('back')}Back</button>`);
+    back.onclick = () => show(pane);
+    $('header', view).prepend(back);
+    $('.close', view).onclick = close;
+    $('.sx-main > header', node).hidden = true;
+    $$('.sx-pane', node).forEach((s) => (s.hidden = true));
+    main.append(view);
+    main.scrollTop = 0;
+    return close;
+  };
+  $('.sx-nav', node).onclick = (e) => {
+    const b = e.target.closest('[data-pane]');
+    if (b) show(b.dataset.pane);
+  };
+  $('.sx-nav', node).onkeydown = (e) => {
+    const step = { ArrowDown: 1, ArrowUp: -1 }[e.key];
+    if (!step) return;
+    e.preventDefault();
+    const i = SETTINGS_PANES.findIndex((p) => p.id === settingsPane);
+    show(SETTINGS_PANES[(i + step + SETTINGS_PANES.length) % SETTINGS_PANES.length].id, true);
+  };
+  show(settingsPane);
+  node.addEventListener('change', async (e) => {
+    const { name, value } = e.target;
+    if (!name || e.target.closest('.embedded')) return; // a nested view's own form
+    if (name === 'terminal') $('.custom-term', node).hidden = value !== 'custom';
+    await tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { [name]: value } } });
+      await loadConfig();
+    });
+  });
+  // The switch shows wisp's own on/off preference; the browser permission can only be
+  // granted from here, never revoked, so it surfaces as a hint when it blocks the switch.
+  const sw = $('#notif', node);
+  const paint = () => {
+    const perm = 'Notification' in window ? Notification.permission : 'unsupported';
+    const on = notifyOn();
+    sw.setAttribute('aria-checked', on);
+    sw.disabled = perm === 'denied' || perm === 'unsupported';
+    $('.notif-hint', node).textContent =
+      perm === 'denied' ? 'Blocked — allow notifications for this site in your browser' : perm === 'unsupported' ? 'Not supported here' : on ? 'On' : 'Off';
+  };
+  sw.onclick = async () => {
+    let want = !notifyOn();
+    if (want && Notification.permission !== 'granted') want = (await Notification.requestPermission()) === 'granted';
+    await tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { notify: want ? 'on' : 'off' } } });
+      await loadConfig();
+    });
+    paint();
+  };
+  paint();
+  // Agent, model, status, timings and scrubbed errors only; never prompts, paths or code.
+  const tele = $('#tele', node);
+  const paintTele = () => {
+    const t = S.config.telemetry || {};
+    tele.setAttribute('aria-checked', !!t.enabled);
+    tele.disabled = !t.available;
+    $('.tele-hint', node).textContent = !t.available ? 'Off (DO_NOT_TRACK, WISP_TELEMETRY=0 or CI)' : 'No prompts, paths or code';
+  };
+  tele.onclick = async () => {
+    await tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { telemetry: S.config.telemetry?.enabled ? 'off' : 'on' } } });
+      await loadConfig();
+    });
+    paintTele();
+  };
+  paintTele();
+  // Memory: one line here (on/off and a summary); the lists and retros live in their own view.
+  const learn = $('#learn', node);
+  const paintLearn = async () => {
+    learn.setAttribute('aria-checked', S.config.defaults.learn !== 'off');
+    $('.learn-hint', node).textContent = memorySummary(await api('/preferences').catch(() => null));
+  };
+  learn.onclick = async () => {
+    await tryApi(() => setLearning(S.config.defaults.learn === 'off'));
+    paintLearn();
+  };
+  bus.on('preferences', paintLearn, { node });
+  // One line each; their lists and charts live in their own views.
+  const wt = $('#wtDefault', node);
+  const paintWt = () => wt.setAttribute('aria-checked', S.config.defaults.worktree !== 'off');
+  wt.onclick = async () => {
+    const saved = await tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { worktree: S.config.defaults.worktree === 'off' ? 'on' : 'off' } } });
+      await loadConfig();
+      return true;
+    });
+    if (!saved) return;
+    paintWt();
+    renderLauncher();
+  };
+  paintWt();
+  // Auto: goal, exploring and allowed harnesses here; the full record in its own view.
+  const paintAuto = async () => {
+    const r = await api('/router').catch(() => null);
+    if (!r || !node.isConnected) return;
+    $$('.ro-goal button', node).forEach((b) => b.classList.toggle('on', b.dataset.goal === r.goal));
+    $('#roExplore', node).setAttribute('aria-checked', r.settings.explore);
+    const allowed = r.settings.allowed || [];
+    $('.ro-allowed', node).innerHTML = S.agents
+      .filter((a) => a.available)
+      .map((a) => `<button class="chip-tog${allowed.includes(a.id) ? ' on' : ''}" data-id="${esc(a.id)}" aria-pressed="${allowed.includes(a.id)}" title="${esc(a.name)}"><span class="model-logo">${harnessLogo(a.id)}</span>${esc(a.name)}</button>`)
+      .join('');
+    $('.ro-hint', node).textContent = r.learned
+      ? `${r.learned} task${r.learned === 1 ? '' : 's'} learned from · ${r.arms.filter((a) => a.state !== 'gone').length} harness · model pairs`
+      : `Nothing of yours yet · starting from wisp-bench (${r.priors.version})`;
+  };
+  const patchAuto = async (body) => {
+    try {
+      await api('/router', { method: 'PATCH', body });
+      await loadConfig();
+      renderLauncher();
+    } catch (err) {
+      toastError(err);
+    }
+    paintAuto();
+  };
+  $('.ro-goal', node).onclick = (e) => {
+    const b = e.target.closest('[data-goal]');
+    if (b) {
+      $$('.ro-goal button', node).forEach((x) => x.classList.toggle('on', x === b));
+      patchAuto({ goal: b.dataset.goal });
+    }
+  };
+  $('#roExplore', node).onclick = (e) => {
+    const on = e.currentTarget.getAttribute('aria-checked') !== 'true';
+    e.currentTarget.setAttribute('aria-checked', on);
+    patchAuto({ explore: on });
+  };
+  $('.ro-allowed', node).onclick = (e) => {
+    const b = e.target.closest('[data-id]');
+    if (!b) return;
+    b.classList.toggle('on');
+    b.setAttribute('aria-pressed', b.classList.contains('on'));
+    patchAuto({ allowed: $$('.ro-allowed .on', node).map((x) => x.dataset.id) });
+  };
+  bus.on('router', paintAuto, { node });
+
+  // The one-line summaries; painted again on the way back from a view that may have changed them.
+  const paintHints = () => {
+    const r = S.config.recipes?.length || 0;
+    const all = S.config.triggers || [];
+    const t = all.filter((x) => x.enabled).length;
+    $('.recipe-hint', node).textContent = r ? `${r} saved prompt${r === 1 ? '' : 's'}` : 'None yet · save a prompt you run often';
+    $('.trigger-hint', node).textContent = all.length ? `${t} of ${all.length} on` : 'None yet · run a recipe on a schedule, CI failure or new issue';
+    api('/usage?days=7')
+      .then((u) => {
+        const x = u.total;
+        $('.sx-usage', node).innerHTML = `
+          <div><span>Spend</span><b>${x.priced ? money(x.cost) : '—'}</b></div>
+          <div><span>Turns</span><b>${x.turns}</b></div>
+          <div><span>Worked</span><b>${pct(x.successRate)}</b></div>
+          <div><span>Questions</span><b>${x.questions}</b></div>`;
+      })
+      .catch(() => ($('.sx-usage', node).innerHTML = ''));
+    $('.machines-hint', node).textContent = machinesSummary();
+    api('/remote').then((x) => ($('.phone-hint', node).textContent = phoneSummary(x) === 'Off' ? 'ntfy or Telegram: answer questions from your phone' : phoneSummary(x))).catch(() => {});
+    paintLearn();
+    paintAuto();
+  };
+  paintHints();
+  bus.on('machines', () => ($('.machines-hint', node).textContent = machinesSummary()), { node });
+  $('#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') })));
+  $('#openUsage', node).onclick = () => openUsage({ days: 7, host: host('usage') });
+  $('#openPhone', node).onclick = () => openPhone({ host: host('notifications') });
+  $('#openMachines', node).onclick = () => openMachines({ host: host('machines') });
+}
+
+// Say once that anonymous stats are on, with a way out.
+export function telemetryNotice() {
+  if (!S.config.telemetry?.enabled || S.config.defaults.telemetryNotice === 'seen') return;
+  S.config.defaults.telemetryNotice = 'seen';
+  api('/config', { method: 'PATCH', body: { defaults: { telemetryNotice: 'seen' } } }).catch(() => {});
+  toast('wisp sends anonymous usage stats and error reports. No prompts, paths or code.', { timeout: 10_000, action: { label: 'Settings', run: () => openSettings({ pane: 'privacy' }) } });
+}

package/web/js/features/setup.js

@@ -0,0 +1,94 @@
+// No harness on this computer yet: the launcher offers to install opencode (its free models need
+// no account), so a first run goes from `npx wisp-agents` to a working task in one click.
+// Settings → Agents uses the same install.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { $, icon } from '../core/dom.js';
+import { launch, S } from '../core/state.js';
+import { toast, toastError } from '../ui/toast.js';
+import { harnessLogo } from './runners.js';
+
+// What wisp can install itself (server/services/install.js).
+export const INSTALLABLE = new Set(['opencode']);
+
+let installing = null; // the running install's id
+let failed = ''; // the last install's error, shown in the strip until the next try
+
+export const isInstalling = (id) => installing === id;
+
+// Installs, then swaps in the new harness list. One at a time; the server waits for npm.
+export async function installHarness(id) {
+  if (installing) return;
+  installing = id;
+  failed = '';
+  bus.emit('install');
+  try {
+    S.agents = await api('/agents/install', { method: 'POST', body: { id } });
+    $('#launcher')?.placesChanged?.();
+    toast(`<b>${esc(S.agents.find((a) => a.id === id)?.name || id)}</b> is ready: free models, no account needed. Type a task and press Enter.`, { timeout: 7000 });
+    $('#prompt')?.focus();
+  } catch (err) {
+    failed = err.message;
+    toastError(err);
+  } finally {
+    installing = null;
+    bus.emit('agents');
+    bus.emit('install');
+  }
+}
+
+// The launch would have nowhere to run: this computer is picked and has no harness. Unknown
+// until the first detection is back (an empty list), so a slow start doesn't flash the strip.
+export const needsSetup = () => launch.where.includes('') && S.agents.length > 0 && !S.agents.some((a) => a.available);
+
+export function renderSetup() {
+  const box = $('#launcher .l-setup');
+  if (!box) return;
+  box.hidden = !needsSetup();
+  if (box.hidden) return;
+  const busy = isInstalling('opencode');
+  box.classList.toggle('busy', busy);
+  const line = busy
+    ? 'Installing opencode into ~/.wisp/tools… usually under a minute'
+    : failed
+      ? `Couldn’t install it: ${failed}`
+      : 'No coding agent here yet. opencode runs free models, no account needed.';
+  box.innerHTML = `
+    <span class="model-logo">${harnessLogo('opencode')}</span>
+    <span class="ls-text ${failed && !busy ? 'bad' : ''}" title="${esc(line)}">${esc(line)}</span>
+    <button class="icon-btn ls-recheck" title="Installed one yourself? Look again" ${busy ? 'disabled' : ''}>${icon('replay')}</button>
+    <button class="primary sm ls-install" ${busy ? 'disabled' : ''}>${busy ? '<span class="ls-spin"></span>Installing…' : failed ? 'Try again' : 'Install opencode'}</button>`;
+  $('.ls-install', box).onclick = () => {
+    installHarness('opencode');
+  };
+  $('.ls-recheck', box).onclick = async (e) => {
+    const btn = e.currentTarget;
+    btn.disabled = true;
+    btn.classList.add('busy');
+    try {
+      S.agents = await api('/agents/recheck', { method: 'POST', body: {} });
+      $('#launcher')?.placesChanged?.();
+      bus.emit('agents');
+      if (needsSetup()) toast('Still no harness found. Install opencode here, or Claude Code, Codex, Cursor… yourself.');
+    } catch (err) {
+      toastError(err);
+    } finally {
+      btn.disabled = false;
+      btn.classList.remove('busy');
+    }
+  };
+}
+
+// Enter with nowhere to run: point at the strip instead of sending a launch that can only fail.
+export function nudgeSetup() {
+  const box = $('#launcher .l-setup');
+  if (!box) return;
+  box.classList.remove('nudge');
+  void box.offsetWidth; // restart the animation
+  box.classList.add('nudge'); // focus stays in the box: a second Enter mustn't start an install
+}
+
+bus.on('agents', renderSetup);
+bus.on('install', renderSetup);

package/web/js/features/ship.js

@@ -0,0 +1,122 @@
+// Ship it: worktree → commit → PR → checks → merge.
+
+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, toastError } from '../ui/toast.js';
+
+const prTone = (pr) =>
+  pr.state === 'MERGED' ? 'merged' : pr.state === 'CLOSED' ? 'closed' : pr.checks?.fail ? 'fail' : pr.checks?.pending ? 'pending' : pr.review === 'CHANGES_REQUESTED' ? 'fail' : 'pass';
+const REVIEW = { APPROVED: 'Approved', CHANGES_REQUESTED: 'Changes requested', REVIEW_REQUIRED: 'Review required' };
+function prLine(pr) {
+  const c = pr.checks || {};
+  const checks = c.fail ? `${c.fail} check${c.fail > 1 ? 's' : ''} failing` : c.pending ? `${c.pending} check${c.pending > 1 ? 's' : ''} running` : c.pass ? `${c.pass} check${c.pass > 1 ? 's' : ''} passed` : 'No checks';
+  const state = pr.state === 'MERGED' ? 'Merged' : pr.state === 'CLOSED' ? 'Closed' : pr.draft ? 'Draft' : 'Open';
+  return [state, pr.state === 'OPEN' ? checks : '', pr.state === 'OPEN' ? REVIEW[pr.review] : ''].filter(Boolean).join(' · ');
+}
+
+// Ship it only makes sense on a finished worktree task with something to ship: uncommitted
+// changes, or commits its open PR (or a new one) doesn't have yet. Unchecked yet: assume it might.
+export function shippable(s) {
+  if (!s?.branch || s.agent === 'wisp' || s.state === 'running' || s.state === 'waiting' || s.pr?.state === 'MERGED') return false;
+  const t = s.toShip;
+  return !t || !!(t.dirty || (s.pr?.state === 'OPEN' ? t.unpushed : t.ahead));
+}
+export const shipLabel = (s) => (s.pr?.state === 'OPEN' ? `Push to PR #${s.pr.number}` : 'Ship it…');
+
+export const prPill = (pr) => `<span class="pill pr pr-${prTone(pr)}" title="PR #${pr.number}: ${esc(prLine(pr))}"><i></i>#${pr.number}</span>`;
+
+// The PR row under a card's bar; reads the live summary, so polled check results show up.
+export function renderPrStrip(id) {
+  const n = S.nodes.get(id);
+  const node = n?.body && $('.pr-strip', n.body);
+  const s = S.sessions.get(id);
+  if (!node || !s) return;
+  const pr = s.pr;
+  $$('[data-a="ship"]', n.body).forEach((b) => {
+    b.hidden = !shippable(s);
+    $('span', b).textContent = pr?.state === 'OPEN' ? `Push to #${pr.number}` : pr ? 'Ship again' : 'Ship it';
+  });
+  node.hidden = !pr;
+  if (!pr) return;
+  const tone = prTone(pr);
+  node.className = `pr-strip pr-${tone}`;
+  node.innerHTML = `
+    <span class="pr-dot"></span>
+    <a href="${esc(pr.url)}" target="_blank" class="pr-num">PR #${pr.number}</a>
+    <span class="pr-line">${esc(prLine(pr))}</span>
+    <span class="grow"></span>
+    ${pr.state === 'OPEN' ? `<button class="ghost xs" data-pr="refresh" title="Check now (wisp also checks every minute)">${icon('replay')}</button>` : ''}
+    <a class="ghost xs" href="${esc(pr.url)}" target="_blank">${icon('external')}<span>GitHub</span></a>
+    ${pr.state === 'OPEN' ? `<button class="ghost xs pr-merge" data-pr="merge" title="Squash-merge, then fast-forward your local ${esc(s.branch ? 'base branch' : 'checkout')}">${icon('check')}<span>Merge</span></button>` : ''}`;
+  node.onclick = (e) => {
+    const a = e.target.closest('[data-pr]')?.dataset.pr;
+    if (a === 'refresh') api(`/sessions/${id}/pr`, { method: 'POST', body: {} }).catch(toastError);
+    if (a === 'merge') mergePr(id);
+  };
+}
+
+export async function shipDialog(id) {
+  const s = S.sessions.get(id);
+  if (!s) return;
+  if (s.state === 'running' || s.state === 'waiting') return toast('Still working: let it finish first.');
+  let info;
+  try {
+    info = await api(`/sessions/${id}/ship`);
+  } catch (err) {
+    return toastError(err);
+  }
+  const open = info.pr?.state === 'OPEN';
+  const nothing = !info.dirty && !info.ahead;
+  const node = el(`
+    <div class="modal ship-modal">
+      <header><h2>${open ? `Push to PR #${info.pr.number}` : 'Ship it'}</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <p class="ship-route">${icon('branch')}<code>${esc(info.branch)}</code>${icon('arrow')}<code>${esc(info.remote || 'no remote')}/${esc(info.base)}</code>
+        <span class="muted">${info.dirty ? `${info.dirty} uncommitted change${info.dirty > 1 ? 's' : ''}` : 'Nothing uncommitted'} · ${info.ahead} commit${info.ahead === 1 ? '' : 's'} on the branch</span></p>
+      ${info.dirty ? `<label class="ship-field"><span>Commit message${open ? '' : ' · PR title'}</span><input class="input" name="title" spellcheck="false" maxlength="100"></label>` : ''}
+      ${open ? '' : `<label class="ship-field"><span>Pull request description</span><textarea class="textarea mono" name="body" rows="9" spellcheck="false"></textarea></label>
+      <label class="check ship-check"><input type="checkbox" name="draft"> Open as a draft</label>`}
+      ${!info.remote ? '<p class="hint bad">This repo has no <code>origin</code> remote, so there is nowhere to push.</p>' : nothing ? '<p class="hint">Nothing to ship yet: the branch has no changes.</p>' : ''}
+      <div class="ship-foot"><span class="muted xs">Runs <code>git commit</code>, <code>git push</code>${open ? '' : ' and <code>gh pr create</code>'} in the worktree.</span><button class="primary sm" data-a="go" ${nothing || !info.remote ? 'disabled' : ''}>${icon('send')}${open ? 'Commit & push' : 'Commit, push & open PR'}</button></div>
+    </div>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  const title = $('[name="title"]', node);
+  const body = $('[name="body"]', node);
+  if (title) title.value = info.title;
+  if (body) body.value = info.body;
+  const go = async () => {
+    const btn = $('[data-a="go"]', node);
+    btn.disabled = true;
+    btn.lastChild.textContent = 'Shipping…';
+    try {
+      const pr = await api(`/sessions/${id}/ship`, { method: 'POST', body: { title: title?.value || info.title, body: body?.value ?? info.body, draft: !!$('[name="draft"]', node)?.checked } });
+      close();
+      toast(`${icon('branch')} ${open ? 'Pushed to' : 'Opened'} <b>PR #${pr.number}</b>`, { action: { label: 'Open', run: () => window.open(pr.url, '_blank') }, timeout: 8000 });
+    } catch (err) {
+      btn.disabled = false;
+      btn.lastChild.textContent = open ? 'Commit & push' : 'Commit, push & open PR';
+      toastError(err, { timeout: 10_000 });
+    }
+  };
+  $('[data-a="go"]', node).onclick = go;
+  requestAnimationFrame(() => (title || $('[data-a="go"]', node)).focus());
+}
+
+export async function mergePr(id) {
+  const s = S.sessions.get(id);
+  const pr = s?.pr;
+  if (!pr || pr.state !== 'OPEN') return;
+  const c = pr.checks || {};
+  const warn = c.fail ? `\n\n⚠ ${c.fail} check${c.fail > 1 ? 's are' : ' is'} failing.` : c.pending ? `\n\n⚠ ${c.pending} check${c.pending > 1 ? 's are' : ' is'} still running.` : '';
+  if (!confirm(`Squash-merge PR #${pr.number}${pr.draft ? ' (marks it ready first)' : ''}, then fast-forward your local base branch and remove the worktree?${warn}`)) return;
+  toast(`Merging PR #${pr.number}…`);
+  try {
+    const r = await api(`/sessions/${id}/merge`, { method: 'POST', body: {} });
+    toast(`${icon('check')} Merged <b>PR #${r.pr.number}</b>. ${esc(r.sync.text)}`, { tone: r.sync.ok ? '' : 'bad', timeout: 10_000 });
+  } catch (err) {
+    toastError(err, { timeout: 12_000 });
+  }
+}