wisp-agents 0.9.0 → 0.11.0

package/web/js/app.js

@@ -64,6 +64,28 @@ const MODES = [
 const KIND_ICON = { read: 'read', edit: 'pen', run: 'terminal', search: 'search', web: 'web', agent: 'agent', plan: 'plan', tool: 'tool', text: 'text', error: 'warn', ask: 'ask', answer: 'check', wait: 'ask' };
 const STATUS_LABEL = { done: 'Done', partial: 'Partial', blocked: 'Blocked', info: 'Report' };
 const agentName = (id) => S.agents.find((a) => a.id === id)?.name || (id === 'wisp' ? 'wisp' : id);
+// Harness lists per place: '' is this computer, else a machine (what it reported when it came online).
+const agentsAt = (k) => (k ? (machineById(k)?.state === 'online' && machineById(k).remote?.agents) || null : S.agents);
+// A harness's models and levels: this computer's if it's installed here, else the first machine's that has it.
+function agentById(id) {
+  const local = S.agents.find((a) => a.id === id);
+  if (local?.available) return local;
+  return S.machines.map((m) => agentsAt(m.id)?.find((a) => a.id === id && a.available)).find(Boolean) || local;
+}
+// The harnesses you can pick for the places under "Run on": installed on any of them counts (a union).
+// `missing` names the picked places that don't have it. Machines not online yet don't count.
+function harnessesAt(places) {
+  const known = places.map((k) => [k, agentsAt(k)]).filter(([, l]) => l);
+  if (!known.length) known.push(['', S.agents]);
+  const ids = [...new Set([...S.agents, ...known.flatMap(([, l]) => l)].map((a) => a.id))];
+  return ids
+    .map((id) => {
+      const hits = known.filter(([, l]) => l.some((a) => a.id === id && a.available));
+      const base = hits.length ? hits[0][1].find((a) => a.id === id) : S.agents.find((a) => a.id === id) || known.flatMap(([, l]) => l).find((a) => a.id === id);
+      return { ...base, available: hits.length > 0, missing: hits.length ? known.filter((x) => !hits.includes(x)).map(([k]) => k) : [] };
+    })
+    .filter((a) => a.available || S.agents.some((x) => x.id === a.id));
+}
 
 // Harness logos for the request bubble, vendored from @lobehub/icons into web/logos/.
 // `mono` marks are drawn in the text colour so they work in both themes.
@@ -83,14 +105,14 @@ function harnessLogo(agent) {
 // Reasoning levels the harness accepts for a model: the model's own list (opencode variants),
 // else the harness-wide one. Empty means the harness has no knob for it.
 function effortsFor(agent, model) {
-  const a = S.agents.find((x) => x.id === agent);
+  const a = agentById(agent);
   return a?.models?.find((m) => m.id === model)?.efforts ?? a?.efforts ?? [];
 }
 const effortLabel = (e) => ({ xhigh: 'X-High' })[e] || e.charAt(0).toUpperCase() + e.slice(1);
 
 function modelBadge(agent, model, effort) {
   if (agent === 'wisp') return '';
-  const label = (model && S.agents.find((a) => a.id === agent)?.models?.find((x) => x.id === model)?.label) || model || 'Default model';
+  const label = (model && agentById(agent)?.models?.find((x) => x.id === model)?.label) || model || 'Default model';
   const tip = `${agentName(agent)} · ${label}${effort ? ` · ${effortLabel(effort)} thinking` : ''}`;
   const logo = harnessLogo(agent);
   return `<span class="model-logo" data-tip="${esc(tip)}" aria-label="${esc(tip)}" tabindex="0">${logo}</span>`;
@@ -294,14 +316,17 @@ function item(s) {
     n = { card, head: $('.it-head', card), body: null, turnNodes: new Map(), tray: null, showAll: false, unfolded: new Set(), latestTurn: null };
     S.nodes.set(s.id, n);
     n.head.addEventListener('click', (e) => {
-      if (n.head.querySelector('[contenteditable="true"]')) return;
+      if (s.pending || n.head.querySelector('[contenteditable="true"]')) return;
       if (e.target.closest('[data-a="quick-done"]')) return toggleDone(s.id);
       setFocus(s.id);
       toggle(s.id);
     });
-    card.addEventListener('mousedown', () => setFocus(s.id, { scroll: false }));
+    card.addEventListener('mousedown', () => {
+      if (!s.pending) setFocus(s.id, { scroll: false });
+    });
     n.head.addEventListener('contextmenu', (e) => {
       e.preventDefault();
+      if (s.pending) return;
       setFocus(s.id, { scroll: false });
       taskMenu(s.id, e);
     });
@@ -322,7 +347,7 @@ function renderHead(n, s) {
         ? `<span class="pill st-${s.status}"><i></i>${STATUS_LABEL[s.status] || 'Done'}</span>`
         : '';
   if (runsOf(s).length > 1) return renderRunHead(n, s, { open, live, pill });
-  n.card.className = `item c-${s.color} st-${s.state} ${s.unread ? 'unread' : ''} ${open ? 'open' : ''} ${S.focus === s.id ? 'focused' : ''}`;
+  n.card.className = `item ${s.pending ? 'pending' : ''} c-${s.color} st-${s.state} ${s.unread ? 'unread' : ''} ${open ? 'open' : ''} ${S.focus === s.id ? 'focused' : ''}`;
   n.head.innerHTML = `
     <span class="q-dot ${s.state === 'running' ? 'live' : ''} ${s.state === 'waiting' ? 'waiting' : ''}"></span>
     <span class="it-main">
@@ -528,6 +553,17 @@ function attachTray() {
       items.length = 0;
       render();
     },
+    // Empty the tray for an optimistic send, and put the files back if the send fails.
+    take() {
+      const list = items.splice(0);
+      render();
+      return list;
+    },
+    restore(list) {
+      if (!list?.length) return;
+      items.unshift(...list);
+      render();
+    },
     get busy() {
       return items.some((i) => i.status === 'uploading');
     },
@@ -606,7 +642,7 @@ function syncWhere() {
 function savedModel(id) {
   const d = S.config.defaults;
   const want = d.models?.[id] ?? (id === d.agent ? d.model : '');
-  const models = S.agents.find((a) => a.id === id)?.models || [];
+  const models = agentById(id)?.models || [];
   return models.some((m) => m.id === want) ? want : '';
 }
 // Thinking level too, and only if the chosen model still accepts it.
@@ -619,21 +655,21 @@ function savedEffort(id, model) {
 function renderLauncher() {
   const box = $('#launcher');
   const mode = S.config.defaults.mode || 'edits';
-  const ready = S.agents.filter((a) => a.available);
-  const chosen = S.agents.find((a) => a.id === (S.config.defaults.agent || 'claude'));
-  let agent = chosen?.available ? chosen : ready[0] || chosen || S.agents[0];
+  const here = harnessesAt(launchWhere);
+  const chosen = here.find((a) => a.id === (S.config.defaults.agent || 'claude'));
+  let agent = chosen?.available ? chosen : here.find((a) => a.available) || chosen || here[0];
   box.innerHTML = `
     <div class="l-projects"></div>
     <textarea id="prompt" rows="2" spellcheck="false"></textarea>
     <div class="l-bar">
       <button class="icon-btn" id="attach" title="Attach files">${icon('clip')}</button>
+      <button class="tog-btn where-btn" id="whereBtn" aria-haspopup="menu"></button>
       <button class="mode-btn" id="mode" aria-haspopup="menu"></button>
       <div class="runners">
         <button class="runner-btn" id="runner" title="Harness and model" aria-haspopup="dialog"></button>
         <button class="vs-btn" id="compareBtn" aria-pressed="false"><span>vs</span>${icon('x')}</button>
         <button class="runner-btn" id="runner2" title="Second harness to compare with" aria-haspopup="dialog" hidden></button>
       </div>
-      <button class="tog-btn where-btn" id="whereBtn" aria-haspopup="menu"></button>
       <button class="tog-btn team-btn" id="teamBtn" aria-haspopup="dialog"></button>
       <span class="grow"></span>
       <button class="tog-btn" id="wtBtn"></button>
@@ -719,7 +755,7 @@ function renderLauncher() {
   const paintTeam = () => paintTeamBtn(teamBtn, team, teamPreset, agent?.id);
   paintTeam();
   teamBtn.onclick = () =>
-    teamEditor(teamBtn, { lead: agent?.id, team, presetId: teamPreset }, (members, preset) => {
+    teamEditor(teamBtn, { lead: agent?.id, team, presetId: teamPreset, places: launchWhere }, (members, preset) => {
       if (JSON.stringify([members, preset]) === JSON.stringify([team, teamPreset])) return;
       team = members;
       teamPreset = preset;
@@ -743,19 +779,19 @@ function renderLauncher() {
   vsBtn.onclick = () => {
     if (compare) compare = null;
     else {
-      const other = S.agents.find((a) => a.available && a.id !== agent?.id) || agent;
+      const other = harnessesAt(launchWhere).find((a) => a.available && a.id !== agent?.id) || agent;
       compare = { agent: other?.id, model: savedModel(other?.id), effort: savedEffort(other?.id, savedModel(other?.id)) };
     }
     paintCompare();
   };
   runner2.onclick = () =>
-    runnerPicker(runner2, { ...compare, savedModel, savedEffort }, (id, model, effort) => {
+    runnerPicker(runner2, { ...compare, savedModel, savedEffort, places: launchWhere }, (id, model, effort) => {
       compare = { agent: id, model, effort };
       paintCompare();
     });
   runnerBtn.onclick = () =>
-    runnerPicker(runnerBtn, { agent: agent?.id, model: curModel, effort: curEffort, savedModel, savedEffort }, (id, model, effort) => {
-      agent = S.agents.find((a) => a.id === id);
+    runnerPicker(runnerBtn, { agent: agent?.id, model: curModel, effort: curEffort, savedModel, savedEffort, places: launchWhere }, (id, model, effort) => {
+      agent = harnessesAt(launchWhere).find((a) => a.id === id);
       curModel = model;
       curEffort = effort;
       paintRunner();
@@ -779,21 +815,39 @@ function renderLauncher() {
     if (off) return offlineToast(off.k);
     const wanted = [agent?.id, ...(compare ? [compare.agent] : [])];
     for (const t of targets) {
-      const missing = t.m?.remote?.agents && wanted.find((id) => !t.m.remote.agents.some((x) => x.id === id && x.available));
-      if (missing) return toast(`${esc(agentName(missing))} isn’t installed on <b>${esc(t.m.name)}</b>`, { tone: 'bad' });
+      const list = agentsAt(t.k);
+      const missing = list && wanted.find((id) => !list.some((x) => x.id === id && x.available));
+      if (missing) return toast(`${esc(agentName(missing))} isn’t installed on <b>${esc(placeName(t.k))}</b>`, { tone: 'bad' });
     }
     const btn = $('#launch', box);
-    btn.disabled = true;
-    btn.classList.add('busy'); // a fetch and fresh worktrees can take a second or two
+    // Optimistic: wait only for uploads, then empty the box and show the task in Working at
+    // once. Fetching and making worktrees can take a few seconds; the real card replaces the
+    // placeholder when the server has it. On failure the prompt and files come back.
+    const attachments = await tray.ids();
+    const files = tray.take();
+    const cmp = compare;
+    const runner = { agent: agent?.id || 'claude', model: curModel, effort: curEffort };
+    const pending = targets.map((t) => addPending(prompt, t, runner));
+    if (compare) (compare = null), paintCompare();
+    ta.value = '';
+    S.drafts.delete('home');
+    ta.dispatchEvent(new Event('input'));
+    if (S.filter !== 'all' && targets.some((t) => t.project.id !== S.filter)) {
+      S.filter = 'all';
+      save('wisp.filter', S.filter);
+    }
+    renderFeed();
+    const ghost = S.nodes.get(pending[0])?.card;
+    showLaunched(btn, ghost);
+    ta.focus();
     try {
-      const attachments = await tray.ids();
       // Several places: one shared groupId, so the runs land as one task with a row each.
       const groupId = targets.length > 1 ? [...crypto.getRandomValues(new Uint8Array(6))].map((b) => b.toString(16).padStart(2, '0')).join('') : undefined;
       const results = await Promise.allSettled(
         targets.map((t) =>
           api('/sessions', {
             method: 'POST',
-            body: { prompt, cwd: t.project.path, machine: t.k || undefined, groupId, agent: agent?.id || 'claude', mode: curMode, model: curModel, effort: curEffort, attachments, worktree: S.config.defaults.worktree === 'off' && !compare ? false : undefined, compare: compare ? [compare] : undefined, subagents: team.length && canLead(agent?.id) ? team : undefined },
+            body: { prompt, cwd: t.project.path, machine: t.k || undefined, groupId, agent: runner.agent, mode: curMode, model: runner.model, effort: runner.effort, attachments, worktree: S.config.defaults.worktree === 'off' && !cmp ? false : undefined, compare: cmp ? [cmp] : undefined, subagents: team.length && canLead(runner.agent) ? team : undefined },
           }),
         ),
       );
@@ -801,31 +855,36 @@ function renderLauncher() {
         if (r.status === 'rejected') toast(`${esc(placeName(targets[i].k))}: ${esc(r.reason.message)}`, { tone: 'bad' });
       });
       const started = results.filter((r) => r.status === 'fulfilled').map((r) => r.value);
-      if (!started.length) return;
+      for (const id of pending) S.sessions.delete(id);
       for (const x of started.flatMap((y) => y.group || [y])) S.sessions.set(x.id, x);
-      const s = started[0];
-      if (compare) (compare = null), paintCompare();
-      ta.value = '';
-      S.drafts.delete('home');
-      tray.clear();
-      ta.dispatchEvent(new Event('input'));
-      if (S.filter !== 'all' && (started.length > 1 || S.filter !== s.projectId)) {
-        S.filter = 'all';
-        save('wisp.filter', S.filter);
+      keepInPlace(feedAnchor(), renderFeed);
+      if (!started.length) {
+        if (!ta.value) ((ta.value = prompt), ta.dispatchEvent(new Event('input')));
+        tray.restore(files);
+        if (cmp && !compare) (compare = cmp), paintCompare();
+        return;
       }
-      renderFeed();
-      const card = S.nodes.get(s.id)?.card;
-      showLaunched(btn, card?.closest('.task-item') || card);
       askNotify();
     } catch (err) {
+      for (const id of pending) S.sessions.delete(id);
+      renderFeed();
       toast(esc(err.message), { tone: 'bad' });
-    } finally {
-      btn.disabled = false;
-      btn.classList.remove('busy');
-      ta.focus();
     }
   };
   $('#launch', box).onclick = launch;
+  // 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 = () => {
+    const here = harnessesAt(launchWhere);
+    if (!agent || here.find((a) => a.id === agent.id)?.available) return paintRunner();
+    const next = here.find((a) => a.id === S.config.defaults.agent && a.available) || here.find((a) => a.available);
+    if (!next) return paintRunner();
+    agent = next;
+    curModel = savedModel(agent.id);
+    curEffort = savedEffort(agent.id, curModel);
+    paintRunner();
+    paintTeam();
+  };
   ta.addEventListener('keydown', (e) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
       e.preventDefault();
@@ -840,7 +899,7 @@ function renderLauncher() {
 
 // The harness · model · thinking button, as in the launcher. agent '' reads "Launcher default".
 function paintRunnerBtn(btn, agentId, model, effort) {
-  const a = S.agents.find((x) => x.id === agentId);
+  const a = agentById(agentId);
   const m = (a?.models || []).find((x) => x.id === model);
   btn.innerHTML = agentId
     ? `<span class="rb-logo">${harnessLogo(agentId)}</span><span class="rb-h">${esc(a?.name || agentName(agentId))}</span><span class="rb-m">${esc(m && m.id ? m.label : 'Default')}</span>${effort ? `<span class="rb-e">${esc(effortLabel(effort))}</span>` : ''}${icon('chevron', 'chev')}`
@@ -856,9 +915,9 @@ const MAX_COPIES = 5; // parallel copies of one row
 const MAX_INSTANCES = 12; // copies across the team
 const copiesOf = (m) => Math.max(1, m.count || 1);
 const teamSize = (team) => team.reduce((n, m) => n + copiesOf(m), 0);
-const canLead = (id) => S.agents.find((a) => a.id === id)?.delegates !== false;
+const canLead = (id) => agentById(id)?.delegates !== false;
 const memberLabel = (m) => {
-  const a = S.agents.find((x) => x.id === m.agent);
+  const a = agentById(m.agent);
   const model = (m.model && a?.models?.find((x) => x.id === m.model)?.label) || m.model || 'Default model';
   return `${a?.name || agentName(m.agent)} · ${model}${m.effort ? ` · ${effortLabel(m.effort)}` : ''}`;
 };
@@ -905,7 +964,7 @@ function paintTeamBtn(btn, team, presetId, lead) {
       : `${agentName(lead)} can't delegate (wisp can't give it tools), so this launch runs without subagents`;
 }
 
-function teamEditor(anchor, { lead, team, presetId }, onChange) {
+function teamEditor(anchor, { lead, team, presetId, places }, onChange) {
   const open = $('.team-pop');
   if (open) return open.close();
   let members = team.map((m) => ({ ...m }));
@@ -969,7 +1028,8 @@ function teamEditor(anchor, { lead, team, presetId }, onChange) {
   const add = () => {
     if (members.length >= MAX_TEAM || teamSize(members) >= MAX_INSTANCES) return;
     const used = new Set([lead, ...members.map((m) => m.agent)]);
-    const a = S.agents.find((x) => x.available && !used.has(x.id)) || S.agents.find((x) => x.available && x.id !== lead) || S.agents.find((x) => x.available);
+    const pool = places ? harnessesAt(places) : S.agents;
+    const a = pool.find((x) => x.available && !used.has(x.id)) || pool.find((x) => x.available && x.id !== lead) || pool.find((x) => x.available);
     if (!a) return toast('No harness is installed.', { tone: 'bad' });
     const model = savedModel(a.id);
     members.push({ name: '', agent: a.id, model, effort: savedEffort(a.id, model), use: '', count: 1 });
@@ -1072,7 +1132,7 @@ function teamEditor(anchor, { lead, team, presetId }, onChange) {
     const rb = e.target.closest('.tp-runner');
     if (rb) {
       const m = members[i];
-      runnerPicker(rb, { agent: m.agent, model: m.model, effort: m.effort, savedModel, savedEffort }, (agent, model, effort) => {
+      runnerPicker(rb, { agent: m.agent, model: m.model, effort: m.effort, savedModel, savedEffort, places }, (agent, model, effort) => {
         Object.assign(m, { agent, model, effort });
         paintList();
         commit();
@@ -1349,6 +1409,7 @@ function whereMenu(anchor) {
     // A machine picked while disconnected starts connecting; you asked to run there.
     for (const k of launchWhere) if (k && machineById(k)?.state === 'off') connectMachine(k);
     renderLaunchChips();
+    $('#launcher')?.placesChanged?.();
     paint();
     saveWhere();
   };
@@ -1467,6 +1528,65 @@ function launchedFx(from, to) {
   ).onfinish = () => w.remove();
 }
 
+// A launch the server hasn't answered yet: a placeholder summary that shows in Working as a
+// "Starting up" card. It can't be opened; the real card takes its place.
+let pendingSeq = 0;
+function addPending(prompt, { project: p, m }, { agent, model, effort }) {
+  const id = `pending-${++pendingSeq}`;
+  const line = prompt.split('\n')[0].replace(/\s+/g, ' ');
+  const now = Date.now();
+  S.sessions.set(id, {
+    id,
+    pending: true,
+    title: line.length > 64 ? `${line.slice(0, 63)}…` : line,
+    agent,
+    model,
+    effort,
+    cwd: p.path,
+    project: p.name,
+    projectId: p.id,
+    color: p.color || 'slate',
+    state: 'running',
+    live: 'Starting up',
+    createdAt: now,
+    updatedAt: now,
+    machine: m ? { id: m.id, name: m.name, target: m.target } : null,
+  });
+  return id;
+}
+
+// A launch from a dialog (rerun, recipes): the dialog closes and a placeholder shows in Working
+// at once; the real session replaces it, or it disappears and the error is thrown on.
+async function launchBehind({ prompt, cwd, runner }, request) {
+  const sum = S.config.projects.find((p) => p.path === cwd);
+  const project = sum || { path: cwd, name: cwd.split('/').filter(Boolean).pop() || cwd, id: null, color: 'slate' };
+  const ghost = addPending(prompt, { project, m: project.machine ? machineById(project.machine) : null }, runner);
+  if (S.filter !== 'all' && S.filter !== project.id) {
+    S.filter = 'all';
+    save('wisp.filter', S.filter);
+  }
+  renderFeed();
+  const card = S.nodes.get(ghost)?.card;
+  if (card) (card.scrollIntoView({ block: 'nearest', behavior: 'smooth' }), card.classList.add('arrived'), setTimeout(() => card.classList.remove('arrived'), 1600));
+  try {
+    const s = await request();
+    S.sessions.delete(ghost);
+    for (const x of s.group || [s]) S.sessions.set(x.id, x);
+    keepInPlace(feedAnchor(), renderFeed);
+    return s;
+  } catch (err) {
+    S.sessions.delete(ghost);
+    renderFeed();
+    throw err;
+  }
+}
+
+// The real session showed up (live events can beat the launch response): drop its placeholder.
+function dropPending(s) {
+  if (s.pending || s.parentId) return;
+  for (const x of S.sessions.values()) if (x.pending && x.projectId === s.projectId) return S.sessions.delete(x.id);
+}
+
 // A new card lands in Working, below everything in "Needs you", so it's often off-screen. Scroll
 // it into view (just enough) and flash it; the flying wisp only plays when the card is already
 // on screen, since the launcher it starts from may scroll away or fold into the dock.
@@ -1633,7 +1753,6 @@ function renderBody(id, { fresh }) {
     ${s.origin ? `<span class="m" title="Launched by a ${esc(s.origin.kind)}">${icon(s.origin.kind === 'trigger' ? 'replay' : 'spark')}${esc(s.origin.name)}</span>` : ''}`;
   const live = s.state === 'running' || s.state === 'waiting';
   // Ship sits in the top bar and again next to the composer, so it's there after reading the result.
-  $$('[data-a="ship"]', body).forEach((b) => (b.hidden = !s.worktree || live || s.agent === 'wisp' || s.pr?.state === 'MERGED'));
   renderPrStrip(id);
   $$('[data-a="done"]', body).forEach((b) => {
     b.classList.toggle('on', s.state === 'done');
@@ -1808,8 +1927,18 @@ function renderWorking(s, t) {
     .filter((a) => a.kind !== 'text')
     .slice(-5)
     .forEach((a) => ticker.prepend(actItem(a)));
-  $('.stop', node).onclick = async () => {
-    await api(`/sessions/${s.id}/stop`, { method: 'POST', body: {} }).catch((e) => toast(esc(e.message), { tone: 'bad' }));
+  $('.stop', node).onclick = async (e) => {
+    // Shows at once; the run winds down and the live update replaces this panel.
+    const btn = e.currentTarget;
+    btn.disabled = true;
+    btn.lastChild.textContent = 'Stopping…';
+    $('.w-status b', node).textContent = `Stopping ${agentName(s.agent)}…`;
+    await api(`/sessions/${s.id}/stop`, { method: 'POST', body: {} }).catch((err) => {
+      btn.disabled = false;
+      btn.lastChild.textContent = 'Stop';
+      $('.w-status b', node).textContent = `${agentName(s.agent)} is working`;
+      toast(esc(err.message), { tone: 'bad' });
+    });
   };
   $('.peek', node).onclick = (e) => {
     const log = $('.log', node);
@@ -1837,7 +1966,15 @@ function renderAskCard(s) {
   const answer = async (text) => {
     if (!text.trim()) return;
     node.classList.add('sent');
-    await api(`/sessions/${s.id}/answer`, { method: 'POST', body: { text } }).catch((e) => toast(esc(e.message), { tone: 'bad' }));
+    const undo = startOptimistic(s.id, text, null, { answering: true });
+    try {
+      await api(`/sessions/${s.id}/answer`, { method: 'POST', body: { text } });
+      if (undo) scheduleRefetch(s.id);
+    } catch (e) {
+      node.classList.remove('sent');
+      undo?.();
+      toast(esc(e.message), { tone: 'bad' });
+    }
   };
   node.addEventListener('click', (e) => {
     const b = e.target.closest('.opt');
@@ -2064,21 +2201,58 @@ async function sendReply(id, text) {
   if (!s || !text) return;
   if (n?.tray?.busy) toast('Waiting for uploads…');
   const attachments = n?.tray ? await n.tray.ids() : [];
+  const answering = !!s.ask && !attachments.length;
+  // Optimistic: the composer empties and the card goes to Working before the server answers
+  // (it may first have to bring back an archived worktree, or reach another machine).
+  const ta = n && $('.reply', n.card);
+  if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
+  S.drafts.delete(id);
+  const files = n?.tray?.take();
+  const undo = startOptimistic(id, text, files, { answering });
   try {
-    const r = s.ask && !attachments.length
+    const r = answering
       ? await api(`/sessions/${id}/answer`, { method: 'POST', body: { text } })
       : await api(`/sessions/${id}/reply`, { method: 'POST', body: { text, attachments, queue: queueing() } });
-    const ta = n && $('.reply', n.card);
-    if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
-    S.drafts.delete(id);
-    n?.tray?.clear();
+    if (undo) scheduleRefetch(id); // the summary that follows says "running" too, so it won't refetch by itself
     if (r.queued)
       toast(r.ahead ? `Queued behind ${r.ahead} earlier follow-up${r.ahead > 1 ? 's' : ''} — they go out first, in order.` : 'Queued — it goes out as soon as the agent finishes.');
   } catch (err) {
+    undo?.();
+    // Give the message back, unless the user has already started typing another one.
+    if (ta?.isConnected && !ta.value) ((ta.value = text), ta.dispatchEvent(new Event('input')));
+    n?.tray?.restore(files);
     toast(esc(err.message), { tone: 'bad' });
   }
 }
 
+// Show a follow-up as started right away: the card moves to Working with the prompt as a live
+// turn. Only when it will start now, not when it queues or interrupts a run already working.
+// Returns an undo for a failed send, or null when nothing changed.
+function startOptimistic(id, text, files, { answering }) {
+  const full = S.full.get(id);
+  const sum = S.sessions.get(id);
+  if (!full || !sum) return null;
+  const live = full.state === 'running' || full.state === 'waiting';
+  if (live && !answering) return null;
+  const now = Date.now();
+  const turn = { id: `pending-${now}`, prompt: text, status: 'running', startedAt: now, activity: [], attachments: (files || []).filter((f) => f.id).map((f) => ({ id: f.id, name: f.name, mime: f.mime })) };
+  const nextFull = { ...full, state: 'running', ask: null, turns: answering ? full.turns : [...full.turns, turn] };
+  const nextSum = { ...sum, state: 'running', live: answering ? 'Picking up your answer' : 'Starting up', updatedAt: now };
+  const apply = (f, sm) => {
+    S.full.set(id, f);
+    S.sessions.set(id, sm);
+    const card = S.nodes.get(id)?.card;
+    keepInPlace(watching(id) ? card : feedAnchor(id), renderFeed);
+    renderBody(id, { fresh: false });
+  };
+  apply(nextFull, nextSum);
+  return () => {
+    // A live update may already have replaced the guess; only roll back what is still ours.
+    if (S.full.get(id) !== nextFull || S.sessions.get(id) !== nextSum) return scheduleRefetch(id);
+    apply(full, sum);
+  };
+}
+
 // --- item actions ------------------------------------------------------------------
 
 async function toggleDone(id) {
@@ -2086,23 +2260,48 @@ async function toggleDone(id) {
   if (!s) return;
   if (s.state === 'running' || s.state === 'waiting') return toast('Still working — stop it first or let it finish.');
   const next = s.state === 'done' ? 'review' : 'done';
-  const leave = next === 'done' && handOff(id); // measured before the live update moves the card
-  await api(`/sessions/${id}`, { method: 'PATCH', body: { state: next } });
-  if (leave) {
-    leave(() => S.sessions.set(id, { ...S.sessions.get(id), state: 'done' }));
-    toast(`Marked done`, { action: { label: 'Undo', run: () => api(`/sessions/${id}`, { method: 'PATCH', body: { state: 'review' } }) } });
+  // Optimistic: the card moves now; a failed save puts it back.
+  move(id, { ...s, state: next }, next === 'done');
+  if (next === 'done') toast(`Marked done`, { action: { label: 'Undo', run: () => toggleDone(id) } });
+  try {
+    await api(`/sessions/${id}`, { method: 'PATCH', body: { state: next } });
+  } catch (err) {
+    revertSummary(id, s);
+    toast(esc(err.message), { tone: 'bad' });
   }
 }
 
+// Apply a summary change locally before the server confirms it. Leaving the list (done, archived)
+// hands focus to the next card; coming back just re-renders around the reader.
+function move(id, next, leaving) {
+  if (leaving) return handOff(id)(() => S.sessions.set(id, next));
+  S.sessions.set(id, next);
+  keepInPlace(feedAnchor(id), renderFeed);
+}
+
+// Put back a summary changed optimistically, unless a live update has replaced it since.
+function revertSummary(id, prev) {
+  const cur = S.sessions.get(id);
+  if (cur && cur.updatedAt > prev.updatedAt) return;
+  S.sessions.set(id, prev);
+  keepInPlace(feedAnchor(id), renderFeed);
+}
+
 // Every finished run of a compare task at once, with one toast to undo them all.
 async function taskDone(ids) {
   if (!ids.length) return;
   const card = S.nodes.get(ids[0])?.card.closest('.task-item');
   const next = card?.nextElementSibling?.querySelector('.item')?.dataset.id || card?.nextElementSibling?.dataset.id;
-  const set = (state) => Promise.all(ids.map((id) => api(`/sessions/${id}`, { method: 'PATCH', body: { state } })));
-  await set('done').catch((err) => toast(esc(err.message), { tone: 'bad' }));
-  for (const id of ids) S.sessions.set(id, { ...S.sessions.get(id), state: 'done' });
-  renderFeed();
+  const set = (state) => {
+    const prev = ids.map((id) => S.sessions.get(id));
+    for (const id of ids) S.sessions.set(id, { ...S.sessions.get(id), state });
+    renderFeed();
+    Promise.all(ids.map((id) => api(`/sessions/${id}`, { method: 'PATCH', body: { state } }))).catch((err) => {
+      prev.forEach((p, i) => p && revertSummary(ids[i], p));
+      toast(esc(err.message), { tone: 'bad' });
+    });
+  };
+  set('done');
   if (next && S.nodes.has(next)) setFocus(next);
   toast(`Marked ${ids.length} runs done`, { action: { label: 'Undo', run: () => set('review') } });
 }
@@ -2183,10 +2382,17 @@ function rename(id) {
 // One popover for all three choices: harnesses on the left, the focused harness's models on the
 // right, and its thinking levels underneath. Clicking (or arrowing to) a harness previews its
 // models; picking a model commits harness + model, picking a thinking level commits it in place.
-function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort }, pick) {
+// places: the "Run on" picks, so the list is what's installed there rather than only on this computer.
+function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort, places }, pick) {
   const open = $('.picker');
   if (open) return open.close();
-  let focusAgent = S.agents.find((a) => a.id === agent && a.available) ? agent : S.agents.find((a) => a.available)?.id;
+  const agents = places ? harnessesAt(places) : S.agents;
+  const sub = (a) => {
+    if (!a.available) return places?.length > 1 || places?.[0] ? 'Not installed there' : 'Not installed';
+    const models = (a.models || []).length > 1 ? `${a.models.length - 1} models` : 'Default model';
+    return a.missing?.length ? `Not on ${a.missing.map(placeName).join(', ')}` : models;
+  };
+  let focusAgent = agents.find((a) => a.id === agent && a.available) ? agent : agents.find((a) => a.available)?.id;
 
   const r = anchor.getBoundingClientRect();
   const width = Math.min(580, innerWidth - 24);
@@ -2199,11 +2405,11 @@ function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort },
     <div class="picker" role="dialog" aria-label="Harness, model and thinking level" style="left:${left}px;width:${width}px;${below ? `top:${r.bottom + 6}px` : `bottom:${innerHeight - r.top + 6}px`}">
       <div class="pk-side" role="listbox" aria-label="Harness">
         <div class="pk-head">Harness</div>
-        ${S.agents
+        ${agents
           .map(
             (a) => `<button class="pk-h${a.available ? '' : ' off'}" role="option" data-id="${esc(a.id)}" ${a.available ? '' : 'disabled'}>
               <span class="pk-logo">${harnessLogo(a.id)}</span>
-              <span class="pk-text"><b>${esc(a.name)}</b><small>${esc(a.available ? `${(a.models || []).length > 1 ? `${a.models.length - 1} models` : 'Default model'}` : 'Not installed')}</small></span>
+              <span class="pk-text"><b>${esc(a.name)}</b><small${a.missing?.length ? ' class="warn"' : ''}>${esc(sub(a))}</small></span>
               ${a.id === agent ? '<span class="pk-dot" title="In use"></span>' : ''}
             </button>`,
           )
@@ -2247,7 +2453,7 @@ function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort },
   };
 
   const paintModels = () => {
-    const a = S.agents.find((x) => x.id === focusAgent);
+    const a = agents.find((x) => x.id === focusAgent);
     sideRows.forEach((b) => b.classList.toggle('on', b.dataset.id === focusAgent));
     const models = a?.models || [{ id: '', label: 'Default' }];
     const current = focusAgent === agent ? model : savedModel(focusAgent);
@@ -2438,7 +2644,7 @@ function taskMenu(id, e) {
       ${S.open.has(id) ? `<button data-a="collapse">${icon('chevron')}Collapse${keyHint('O')}</button>` : `<button data-a="open">${icon('chevron')}Open${keyHint('O')}</button>`}
       <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
       <button data-a="rerun">${icon('rerun')}Rerun…${keyHint('⇧R')}</button>
-      ${s.branch && !busy && s.pr?.state !== 'MERGED' ? `<button data-a="ship">${icon('send')}${s.pr?.state === 'OPEN' ? `Push to PR #${s.pr.number}` : 'Ship it…'}${keyHint('S')}</button>` : ''}
+      ${shippable(s) ? `<button data-a="ship">${icon('send')}${shipLabel(s)}${keyHint('S')}</button>` : ''}
       ${s.pr?.state === 'OPEN' ? `<button data-a="merge">${icon('check')}Merge PR #${s.pr.number}…</button>` : ''}
       ${s.groupId ? `<button data-a="compare"><b class="vs-mark">vs</b>Compare runs</button>` : ''}
       <button data-a="recipe">${icon('spark')}Save as recipe…</button>
@@ -2477,9 +2683,12 @@ const keyHint = (k) => `<kbd class="menu-kbd">${k}</kbd>`;
 
 async function deleteSession(id) {
   if (!confirm('Delete this session from wisp? (The agent’s own history is kept.)')) return;
-  const leave = handOff(id);
-  const ok = await api(`/sessions/${id}`, { method: 'DELETE' }).then(() => true, (err) => toast(esc(err.message), { tone: 'bad' }));
-  if (ok) leave(() => S.sessions.delete(id));
+  const prev = S.sessions.get(id);
+  handOff(id)(() => S.sessions.delete(id));
+  await api(`/sessions/${id}`, { method: 'DELETE' }).catch((err) => {
+    if (prev && !S.sessions.has(id)) (S.sessions.set(id, prev), keepInPlace(feedAnchor(id), renderFeed));
+    toast(esc(err.message), { tone: 'bad' });
+  });
 }
 
 // Launch the task again as a new session in the same folder: same prompt and attachments,
@@ -2538,22 +2747,13 @@ async function rerun(id) {
   const go = async () => {
     const prompt = ta.value.trim();
     if (!prompt) return ta.focus();
-    const btn = $('[data-a="go"]', node);
-    btn.disabled = true;
+    close();
     try {
-      const next = await api('/sessions', { method: 'POST', body: { prompt, cwd: s.cwd, agent, mode, model, effort, attachments: files.map((f) => f.id) } });
-      S.sessions.set(next.id, next);
-      close();
-      if (S.filter !== 'all' && S.filter !== next.projectId) {
-        S.filter = 'all';
-        save('wisp.filter', S.filter);
-      }
-      renderFeed();
+      const body = { prompt, cwd: s.cwd, agent, mode, model, effort, attachments: files.map((f) => f.id) };
+      const next = await launchBehind({ prompt, cwd: s.cwd, runner: { agent, model, effort } }, () => api('/sessions', { method: 'POST', body }));
       setFocus(next.id);
-      toast(`Rerunning on ${esc(agentName(agent))}`);
     } catch (err) {
-      btn.disabled = false;
-      toast(esc(err.message), { tone: 'bad' });
+      toast(`Rerun failed: ${esc(err.message)}`, { tone: 'bad', action: { label: 'Edit again', run: () => rerun(id) } });
     }
   };
   $('[data-a="go"]', node).onclick = go;
@@ -2569,15 +2769,16 @@ async function rerun(id) {
 }
 
 async function setArchived(id, archived) {
-  const leave = archived && handOff(id);
+  const prev = S.sessions.get(id);
+  if (!prev) return;
+  // Optimistic: the card leaves (or comes back) now; a failed save puts it back.
+  move(id, { ...prev, archived }, archived);
+  if (archived) toast('Archived', { action: { label: 'Undo', run: () => setArchived(id, false) } });
   try {
     await api(`/sessions/${id}`, { method: 'PATCH', body: { archived } });
   } catch (err) {
-    return toast(esc(err.message), { tone: 'bad' });
-  }
-  if (leave) {
-    leave(() => S.sessions.set(id, { ...S.sessions.get(id), archived: true }));
-    toast('Archived', { action: { label: 'Undo', run: () => setArchived(id, false) } });
+    revertSummary(id, prev);
+    toast(esc(err.message), { tone: 'bad' });
   }
 }
 
@@ -2837,6 +3038,15 @@ function prLine(pr) {
   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.
+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));
+}
+const shipLabel = (s) => (s.pr?.state === 'OPEN' ? `Push to PR #${s.pr.number}` : 'Ship it…');
+
 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.
@@ -2846,7 +3056,10 @@ function renderPrStrip(id) {
   const s = S.sessions.get(id);
   if (!node || !s) return;
   const pr = s.pr;
-  $$('[data-a="ship"] span', n.body).forEach((b) => (b.textContent = pr?.state === 'OPEN' ? `Push to #${pr.number}` : pr ? 'Ship again' : 'Ship it'));
+  $$('[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);
@@ -2997,16 +3210,21 @@ async function compareView(id) {
     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) => toast(esc(err.message), { tone: 'bad' }));
+      await api(`/sessions/${o.id}`, { method: 'PATCH', body: { archived: true, discardWorktree: true } }).catch((err) => ((failed = true), toast(esc(err.message), { tone: 'bad' })));
     }
-    close();
-    reveal(keep);
-    toast(`Kept ${esc(agentName(S.sessions.get(keep)?.agent))}'s run. Ship it when you're ready.`);
+    if (failed) loadSessions(); // show what really got archived
   };
 }
 
@@ -3271,18 +3489,17 @@ function runRecipe(r) {
     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 s = await api(`/recipes/${r.id}/run`, {
-        method: 'POST',
-        body: { params, cwd: needsProject ? $('[name="cwd"]', node).value : undefined, agent, model: r.agent ? undefined : savedModel(agent), effort: r.agent ? undefined : savedEffort(agent, savedModel(agent)), mode: r.mode || d.mode },
-      });
-      S.sessions.set(s.id, s);
-      close();
-      renderFeed();
+      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);
-      toast(`Running “${esc(r.name)}”`);
     } catch (err) {
-      toast(esc(err.message), { tone: 'bad' });
+      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.
@@ -3489,6 +3706,7 @@ function setMachines(list) {
   S.machines = list;
   paintMachinesBtn();
   renderLaunchChips();
+  $('#launcher')?.placesChanged?.();
   renderProjects();
   $('.machines-modal')?.refresh();
   $('.projects-modal')?.refresh?.();
@@ -3539,14 +3757,31 @@ function openMachines({ host, focusAdd = false } = {}) {
   const close = present(node, host);
   const body = $('.mc-body', node);
   let editing = null; // machine id whose form is open, '' = a new one, null = closed
-  let hosts = [];
-  api('/machines/ssh-hosts')
+  let hosts = []; // found on this computer: ~/.ssh/config, Tailscale peers, ~/.ssh/known_hosts
+  api('/machines/discover')
     .then((h) => {
       hosts = h;
+      const slot = $('.mc-found-slot', node);
+      if (slot) slot.innerHTML = found();
       const dl = $('#sshHosts', node);
-      if (dl) dl.innerHTML = hosts.map((x) => `<option value="${esc(x.host)}">${esc([x.user, x.hostname].filter(Boolean).join('@'))}</option>`).join('');
+      if (dl) dl.innerHTML = datalist();
     })
     .catch(() => {});
+  const datalist = () => hosts.map((x) => `<option value="${esc(x.target)}">${esc(x.detail || '')}</option>`).join('');
+  const SOURCE = { 'ssh-config': '~/.ssh/config', tailscale: 'Tailscale', 'known-hosts': 'You’ve SSHed here before' };
+  // Hosts not added yet, one click from a filled-in form.
+  const found = () => {
+    const added = new Set(S.machines.map((m) => m.target));
+    const list = hosts.filter((x) => !added.has(x.target));
+    if (!list.length) return '';
+    return `<div class="mc-found"><h4>Found on this computer</h4><div class="mc-found-list">${list
+      .slice(0, 12)
+      .map(
+        (x) =>
+          `<button type="button" class="lp-chip${x.online === false ? ' off' : ''}" data-a="pick" data-target="${esc(x.target)}" data-name="${esc(x.name)}" title="${esc([SOURCE[x.source], x.target, x.detail].filter(Boolean).join(' · '))}">${icon('server')}${esc(x.name)}${x.online !== undefined ? `<i class="mc-fdot"></i>` : ''}</button>`,
+      )
+      .join('')}</div></div>`;
+  };
 
   // Projects on a machine open here, with a way back.
   const sub = (view) => {
@@ -3596,7 +3831,7 @@ function openMachines({ host, focusAdd = false } = {}) {
       </div>
       ${
         st === 'online'
-          ? `<div class="mc-meta"><span>wisp ${esc(m.remote?.version || '')}</span>${ready.length ? `<span class="mc-agents">${ready.map((a) => `<span class="model-logo" title="${esc(a.name)} ${esc(a.version || '')}">${harnessLogo(a.id)}</span>`).join('')}</span>` : '<span class="bad">no harnesses found</span>'}${m.working ? `<span>${m.working} working</span>` : ''}</div>`
+          ? `<div class="mc-meta"><span>wisp ${esc(m.remote?.version || '')}</span>${m.outdated ? `<button class="ghost xs mc-update" data-a="update" title="Restart wisp on ${esc(m.name)} as ${esc(m.outdated)}">${icon('rerun')}Update to ${esc(m.outdated)}</button>` : ''}${ready.length ? `<span class="mc-agents">${ready.map((a) => `<span class="model-logo" title="${esc(a.name)} ${esc(a.version || '')}">${harnessLogo(a.id)}</span>`).join('')}</span>` : '<span class="bad">no harnesses found</span>'}${m.working ? `<span>${m.working} working</span>` : ''}</div>`
           : ''
       }
       ${busy || st === 'error' ? steps(m) : ''}
@@ -3630,8 +3865,10 @@ function openMachines({ host, focusAdd = false } = {}) {
     const add = $('.mc-add', node);
     // The form for a new machine: open when there are none yet, else behind a button.
     if (!S.machines.length || editing === '') {
-      if (!$('form[data-id=""]', add)) add.innerHTML = `<h4>${S.machines.length ? 'Add another machine' : 'Add your first machine'}</h4>${form(null)}<datalist id="sshHosts">${hosts.map((x) => `<option value="${esc(x.host)}">${esc([x.user, x.hostname].filter(Boolean).join('@'))}</option>`).join('')}</datalist>`;
-    } else add.innerHTML = `<button class="lp-chip add mc-new" data-a="new">${icon('plus')}Add a machine</button><datalist id="sshHosts">${hosts.map((x) => `<option value="${esc(x.host)}"></option>`).join('')}</datalist>`;
+      // Keep a half-filled form; only the suggestions above it change.
+      if ($('form[data-id=""]', add)) $('.mc-found-slot', add).innerHTML = found();
+      else add.innerHTML = `<div class="mc-found-slot">${found()}</div><h4>${S.machines.length ? 'Add another machine' : 'Add your first machine'}</h4>${form(null)}<datalist id="sshHosts">${datalist()}</datalist>`;
+    } else add.innerHTML = `<div class="mc-found-slot">${found()}</div><button class="lp-chip add mc-new" data-a="new">${icon('plus')}Add a machine</button><datalist id="sshHosts">${datalist()}</datalist>`;
   };
 
   const menu = (m, anchor) => {
@@ -3667,8 +3904,9 @@ function openMachines({ host, focusAdd = false } = {}) {
         paint();
         $(`.mc[data-id="${m.id}"] input[name="target"]`, node)?.focus();
       }
-      if (a === 'restart') {
-        if (m.working && !confirm(`${m.working} agent${m.working === 1 ? ' is' : 's are'} working on ${m.name}. Restarting wisp there stops ${m.working === 1 ? 'it' : 'them'}. Restart?`)) return;
+      if (a === 'restart' || a === 'update') {
+        const verb = a === 'update' ? `Updating wisp there to ${m.outdated}` : 'Restarting wisp there';
+        if (m.working && !confirm(`${m.working} agent${m.working === 1 ? ' is' : 's are'} working on ${m.name}. ${verb} stops ${m.working === 1 ? 'it' : 'them'}. ${a === 'update' ? 'Update' : 'Restart'}?`)) return;
         await api(`/machines/${m.id}/stop`, { method: 'POST', body: { restart: true } });
       }
       if (a === 'stop') {
@@ -3703,6 +3941,16 @@ function openMachines({ host, focusAdd = false } = {}) {
       $('.mc-add input[name="target"]', node)?.focus();
       return;
     }
+    if (a === 'pick') {
+      // Fill in the form; connecting still waits for the button.
+      editing = '';
+      paint();
+      const f = $('.mc-add form[data-id=""]', node);
+      f.target.value = b.dataset.target;
+      f.name.value = b.dataset.name;
+      $('button[type="submit"]', f).focus();
+      return;
+    }
     if (a === 'cancel') {
       editing = null;
       paint();
@@ -3718,8 +3966,8 @@ function openMachines({ host, focusAdd = false } = {}) {
   node.addEventListener('input', (e) => {
     if (e.target.name !== 'target') return;
     const name = $('input[name="name"]', e.target.form);
-    const h = hosts.find((x) => x.host === e.target.value.trim());
-    name.placeholder = (h?.host || e.target.value.trim().replace(/^.*@/, '')).slice(0, 40) || 'devbox';
+    const h = hosts.find((x) => x.target === e.target.value.trim());
+    name.placeholder = (h?.name || e.target.value.trim().replace(/^.*@/, '')).slice(0, 40) || 'devbox';
   });
   node.addEventListener('submit', async (e) => {
     e.preventDefault();
@@ -4201,7 +4449,7 @@ function paletteItems() {
     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 (cur.branch && !live && cur.pr?.state !== 'MERGED') items.push({ group: g, label: cur.pr?.state === 'OPEN' ? `Push to PR #${cur.pr.number}` : 'Ship it…', sub, icon: 'send', kbd: 'S', keywords: 'commit push pull request pr github', run: () => shipDialog(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) });
@@ -4210,7 +4458,7 @@ function paletteItems() {
     items.push({ group: g, label: 'Delete session', sub, icon: 'trash', kbd: '⌫', keywords: 'remove', run: () => deleteSession(id) });
   }
 
-  const sessions = [...S.sessions.values()].sort((a, b) => a.archived - b.archived || b.updatedAt - a.updatedAt);
+  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({
@@ -4296,7 +4544,7 @@ function notifyFinished(s) {
   }
   toast(`${icon(s.state === 'waiting' ? 'ask' : 'spark')} <b>${esc(s.title)}</b> ${verb}`, { action: { label: 'Open', run: () => reveal(s.id) }, timeout: 7000 });
   if (notifyOn() && !document.hasFocus()) {
-    const note = new Notification(`${s.project}: ${s.title}`, { body: s.state === 'waiting' ? s.question : s.preview || 'Ready for review', icon: '/favicon.svg', tag: s.id });
+    const note = new Notification(`${s.project}: ${s.title}`, { body: s.state === 'waiting' ? s.question : s.preview || 'Ready for review', icon: '/apple-touch-icon.png', tag: s.id });
     note.onclick = () => (window.focus(), reveal(s.id));
   }
 }
@@ -4309,6 +4557,7 @@ function connect() {
     const s = JSON.parse(e.data);
     if (s.parentId) return onChildSummary(s); // a subagent: lives inside its lead's card
     const prev = S.sessions.get(s.id);
+    if (!prev) dropPending(s);
     const was = prev && sectionOf(prev); // before the update: a compare task's section depends on all its runs
     S.sessions.set(s.id, s);
     // A section change moves the card (a follow-up sends it from "Needs you" to "Working").
@@ -4324,7 +4573,7 @@ function connect() {
       renderFeed();
     });
     if (prev?.state !== s.state || prev?.queued !== s.queued) scheduleRefetch(s.id);
-    if (JSON.stringify(prev?.pr) !== JSON.stringify(s.pr)) renderPrStrip(s.id);
+    if (JSON.stringify([prev?.pr, prev?.toShip, prev?.state]) !== JSON.stringify([s.pr, s.toShip, s.state])) renderPrStrip(s.id);
   });
   es.addEventListener('activity', (e) => onActivity(JSON.parse(e.data)));
   es.addEventListener('turn', (e) => scheduleRefetch(JSON.parse(e.data).sessionId));
@@ -4408,7 +4657,7 @@ async function installUpdate() {
 
 // --- keyboard ---------------------------------------------------------------------------
 
-const feedIds = () => $$('#feed .item').map((x) => x.dataset.id);
+const feedIds = () => $$('#feed .item:not(.pending)').map((x) => x.dataset.id);
 // The user takes a card out of its list (done, archive, delete). The next card — the one below,
 // or the one above at the end of the list — gets focus and lands where the old one sat, so
 // triage continues on the same spot. Call before the request, while the card is still laid
@@ -4486,7 +4735,7 @@ document.addEventListener('keydown', (e) => {
     deleteSession(id);
   } else if (k === 't' && id) takeOver(id);
   else if (k === 'r' && e.shiftKey && id) rerun(id);
-  else if (k === 's' && id && S.sessions.get(id)?.branch) shipDialog(id);
+  else if (k === 's' && id && shippable(S.sessions.get(id))) shipDialog(id);
   else if (k === 'r' && id) replay(id);
   else if (k === '/' && id) {
     e.preventDefault();