wisp-agents 0.18.0 → 0.21.0

package/web/index.html

@@ -47,6 +47,7 @@
       <symbol id="i-pen" viewBox="0 0 24 24"><path d="M4 20l1-4L16 5l3 3L8 19l-4 1z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></symbol>
       <symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6L12 3zM18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2z" fill="currentColor"/></symbol>
       <symbol id="i-stop" viewBox="0 0 24 24"><rect x="6.5" y="6.5" width="11" height="11" rx="2" fill="currentColor"/></symbol>
+      <symbol id="i-merge" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="6" cy="19" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="18" cy="15" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M6 7.2v9.6M6 7.2c0 4.4 4.4 7.8 9.8 7.8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
       <symbol id="i-send" viewBox="0 0 24 24"><path d="M12 19V5m-6 6l6-6 6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
       <symbol id="i-enter" viewBox="0 0 24 24"><path d="M19 5v7a3 3 0 01-3 3H5m4-4l-4 4 4 4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
       <symbol id="i-queue" viewBox="0 0 24 24"><path d="M4 6h12M4 12h12M4 18h7M17 15v6m-3-3h6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></symbol>

package/web/js/blocks.js

@@ -512,7 +512,7 @@ R.tests = (b, ctx) => {
         </svg>
         <div class="ring-label">${icon(ok ? 'check' : 'x')}</div>
         <div class="tests-text">
-          <div class="verdict">${ok ? 'All green' : `${failed} failing`}</div>
+          <div class="verdict">${ok ? 'All green' : `${failed} failing`}${b.by === 'wisp' ? `<span class="tests-by" title="wisp ran the project's tests itself after the agent finished${b.note ? `: ${esc(b.note)}` : ''}">Run by wisp</span>` : ''}</div>
           <div class="counts"><span class="pass"><b class="v" data-v="${passed}"></b> passed</span>${failed ? `<span class="fail"><b class="v" data-v="${failed}"></b> failed</span>` : ''}${skipped ? `<span class="skip"><b class="v" data-v="${skipped}"></b> skipped</span>` : ''}${b.durationMs ? `<span class="dur">${fmtDuration(b.durationMs)}</span>` : ''}</div>
           ${cmd ? `<div class="tests-cmd"><code class="cmdline">$ ${esc(cmd)}</code>${ctx.exec ? `<button class="ghost xs run-tests" title="Re-run ${esc(cmd)}">${icon('rerun')}<span>Re-run</span></button>` : ''}</div>` : ''}
         </div>

package/web/js/core/state.js

@@ -35,10 +35,12 @@ export const saveOpen = () => save('wisp.open', [...S.open]);
 export const setAgents = (list) => ((S.agents = list), save('wisp.agents', list));
 
 // Where the launcher sends a prompt: '' = this computer, else machine ids. Several run in parallel,
-// each in the project picked for it (launch.picks[place]), and show up as one task.
+// each in the project picked for it (launch.picks[place]), and show up as one task. A run can
+// work in more of that place's projects too (launch.also[place]): one agent, several folders.
 export const launch = {
   project: load('wisp.launchProject', null), // the project picked in the first place
   where: load('wisp.launchWhere', ['']),
   picks: load('wisp.launchPicks', {}),
+  also: load('wisp.launchAlso', {}),
 };
-export const saveLaunch = () => (save('wisp.launchWhere', launch.where), save('wisp.launchPicks', launch.picks), save('wisp.launchProject', launch.project));
+export const saveLaunch = () => (save('wisp.launchWhere', launch.where), save('wisp.launchPicks', launch.picks), save('wisp.launchAlso', launch.also), save('wisp.launchProject', launch.project));

package/web/js/features/actions.js

@@ -8,7 +8,7 @@ import { $, el, icon } from '../core/dom.js';
 import { S } from '../core/state.js';
 import { keyHint } from '../ui/kbd.js';
 import { overlay } from '../ui/overlay.js';
-import { popover } from '../ui/popover.js';
+import { clampToViewport, popover } from '../ui/popover.js';
 import { toast, toastError, tryApi } from '../ui/toast.js';
 import { autosize } from './attachments.js';
 import { saveAsRecipe } from './automations.js';
@@ -208,9 +208,7 @@ export function taskMenu(id, e) {
     if (a === 'delete') deleteSession(id);
   };
   const close = popover(menu);
-  const r = menu.getBoundingClientRect();
-  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
-  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+  clampToViewport(menu, e.clientX, e.clientY);
 }
 
 export async function deleteSession(id) {
@@ -281,7 +279,7 @@ export async function rerun(id) {
     if (!prompt) return ta.focus();
     close();
     try {
-      const body = { prompt, cwd: s.cwd, agent, mode, model, effort, attachments: files.map((f) => f.id) };
+      const body = { prompt, cwd: s.cwd, also: s.also?.map((a) => a.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);
     } catch (err) {

package/web/js/features/auto.js

@@ -1,15 +1,17 @@
-// Auto: what the router (server/router.js) learned about which harness and model work for you.
+// Auto: what the router (server/router.js) learned about which harness, model and thinking level work for you.
 
 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 { $, $$, el, icon } from '../core/dom.js';
 import { S } from '../core/state.js';
 import { present } from '../ui/overlay.js';
-import { toastError } from '../ui/toast.js';
+import { toast, toastError } from '../ui/toast.js';
 import { AUTO_GOALS, harnessLogo } from './runners.js';
 
-const ARM_STATE = { ready: ['Ready', 'ok'], new: ['Trying out', 'warn'], untried: ['No data yet', ''], gone: ['Not installed', 'bad'] };
+const ARM_STATE = { ready: ['Ready', 'ok'], new: ['Trying out', 'warn'], untried: ['No data yet', ''], cooling: ['At its limit', 'warn'], gone: ['Not installed', 'bad'] };
+const TIER = { 1: 'small', 2: 'everyday', 3: 'frontier' };
+const untilLabel = (t) => new Date(t).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 export async function openRouter({ host } = {}) {
   const node = el(`<div class="modal router-modal">
       <header><h2>Auto</h2><button class="icon-btn close">${icon('x')}</button></header>
@@ -23,15 +25,22 @@ export async function openRouter({ host } = {}) {
     if (!r || !node.isConnected) return;
     const arms = r.arms.filter((a) => a.state !== 'gone' || a.n);
     $('.ro-body', node).innerHTML = `
-      <p class="hint">For each task Auto estimates every harness · model’s chance of doing it well, from wisp-bench (${esc(r.priors.version)}) and then more and more from your own tasks: merged PRs, 👍 / 👎, rollbacks, follow-ups and how the run ended. It picks the best value for your goal (<b>${esc(AUTO_GOALS.find((g) => g.id === r.goal)?.label || '')}</b>), now and then trying an alternative so the estimates stay honest.</p>
-      <h4>Harness · model</h4>
+      <p class="hint">For each task Auto estimates every harness · model · thinking level’s chance of doing it well, from wisp-bench (${esc(r.priors.version)}) and then more and more from your own tasks: merged PRs, 👍 / 👎, rollbacks, follow-ups and how the run ended. It picks the best value for your goal (<b>${esc(AUTO_GOALS.find((g) => g.id === r.goal)?.label || '')}</b>), which also sets how hard it thinks: Cheap low, Balanced default or medium, Best high. Best runs frontier models only (Opus, not Sonnet or Haiku). Now and then it tries an alternative so the estimates stay honest.${r.coldStart && r.coldStart.have < r.coldStart.needed ? ` Until it has ${r.coldStart.needed} of your own outcomes (${r.coldStart.have} so far), Balanced uses everyday and frontier models only.` : ''}</p>
+      <h4>Harness · model · thinking</h4>
       <table class="us-table ro-table"><thead><tr><th></th><th>Works</th><th>Your tasks</th><th>~Cost</th><th>~Time</th><th></th></tr></thead><tbody>${arms
         .map((a) => {
           const [state, tone] = ARM_STATE[a.state] || ARM_STATE.ready;
           const types = Object.entries(a.byType).map(([t, x]) => `${t} ${pctOf(x.chance)} (${x.n})`).join(' · ');
-          return `<tr><td><span class="us-runner"><span class="model-logo">${harnessLogo(a.agent)}</span>${esc(a.label)}</span>${types ? `<small class="ro-types">${esc(types)}</small>` : ''}</td>${a.state === 'untried' ? '<td>—</td><td>—</td><td>—</td><td>—</td>' : `<td><b>${pctOf(a.chance)}</b></td><td>${a.n || '—'}</td><td>${a.usd ? `$${a.usd.toFixed(2)}` : '$0'}</td><td>${a.minutes}m</td>`}<td><span class="sx-state ${tone}"><i class="dot ${tone}"></i>${state}</span></td></tr>`;
+          return `<tr><td><span class="us-runner"><span class="model-logo">${harnessLogo(a.agent)}</span>${esc(a.label)}<i class="ro-tier t${a.tier}" title="${TIER[a.tier]} tier">${TIER[a.tier]}</i></span>${types ? `<small class="ro-types">${esc(types)}</small>` : ''}</td>${a.state === 'untried' ? '<td>—</td><td>—</td><td>—</td><td>—</td>' : `<td><b>${pctOf(a.chance)}</b></td><td>${a.n || '—'}</td><td>${a.usd ? `$${a.usd.toFixed(2)}` : '$0'}</td><td>${a.minutes}m</td>`}<td><span class="sx-state ${tone}" ${a.coolingUntil ? `title="${esc(`${a.coolingWhy || 'At its limit'} · back around ${untilLabel(a.coolingUntil)}`)}"` : ''}><i class="dot ${tone}"></i>${state}${a.coolingUntil ? ` until ${untilLabel(a.coolingUntil)}` : ''}</span></td></tr>`;
         })
         .join('')}</tbody></table>
+      <h4>Tests per project</h4>
+      <p class="hint">What wisp runs to check an Auto task. Leave it empty to use what wisp found, or type <code>off</code> to skip the check in that project.</p>
+      ${r.projects?.length
+        ? `<div class="ro-tests">${r.projects
+            .map((p) => `<label class="ro-test"><span class="us-proj c-${esc(p.color || 'slate')}"><i class="p-dot"></i>${esc(p.name)}</span><input class="input mono" data-id="${esc(p.id)}" value="${esc(p.testCommand)}" placeholder="${esc(p.detected?.command || (p.detected?.skip ? `none: ${p.detected.skip}` : 'none found'))}" spellcheck="false"></label>`)
+            .join('')}</div>`
+        : '<p class="mem-empty">Add a project to set its test command.</p>'}
       <h4>Recent picks</h4>
       ${r.recent.length
         ? `<ul class="ro-recent">${r.recent
@@ -42,6 +51,28 @@ export async function openRouter({ host } = {}) {
             .join('')}</ul>`
         : '<p class="mem-empty">Nothing yet. Launch with Auto and its picks show up here.</p>'}
       <div class="ro-foot"><button class="ghost sm danger" id="roReset">Forget what Auto learned</button><span class="hint">The wisp-bench starting point stays.</span></div>`;
+    for (const input of $$('.ro-test input', node)) {
+      let saved = input.value;
+      const save = async () => {
+        const v = input.value.trim();
+        if (v === saved) return;
+        const prev = saved;
+        saved = v;
+        try {
+          await api(`/projects/${input.dataset.id}`, { method: 'PATCH', body: { testCommand: v } });
+          toast(v ? `Auto will check with <code>${esc(v)}</code>` : 'Back to the test command wisp finds');
+        } catch (err) {
+          saved = input.value = prev;
+          toastError(err);
+        }
+      };
+      input.onblur = () => {
+        save();
+      };
+      input.onkeydown = (e) => {
+        if (e.key === 'Enter') input.blur();
+      };
+    }
     $('#roReset', node).onclick = async () => {
       if (!confirm('Forget what Auto learned from your tasks?')) return;
       await api('/router/reset', { method: 'POST', body: {} }).catch(toastError);

package/web/js/features/composer.js

@@ -5,7 +5,7 @@ import { mentionHtml } from '../mention-text.js';
 import { api } from '../core/api.js';
 import { $, el, icon } from '../core/dom.js';
 import { S } from '../core/state.js';
-import { popover } from '../ui/popover.js';
+import { clampToViewport, popover } from '../ui/popover.js';
 import { toast, toastError } from '../ui/toast.js';
 import { toggleDone } from './actions.js';
 import { acceptFiles, attachTray, autosize } from './attachments.js';
@@ -226,9 +226,7 @@ function queuedMenu(e, cancel) {
     if (a === 'cancel') cancel();
   };
   const close = popover(menu);
-  const r = menu.getBoundingClientRect();
-  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
-  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+  clampToViewport(menu, e.clientX, e.clientY);
 }
 
 // Follow-ups sent while an agent works interrupt it, unless the user flipped this on.

package/web/js/features/feed.js

@@ -9,16 +9,16 @@ import { S, save, saveOpen } from '../core/state.js';
 import { taskDone, taskMenu, toggleDone } from './actions.js';
 import { compareView } from './compare.js';
 import { renderLaunchChips } from './launcher.js';
-import { machinePill } from './places.js';
+import { inProject, machinePill, projectLabel } from './places.js';
 import { renderProjects } from './projects.js';
 import { agentName, effortLabel, harnessLogo, modelBadge } from './runners.js';
 import { scrollByPx, stage, topInset } from './scroll.js';
-import { prPill, shipPill } from './ship.js';
+import { prOf, prPill, shipPill } from './ship.js';
 import { teamStack } from './team.js';
 import { renderBody } from './turns.js';
 
 function visible(list) {
-  return S.filter === 'all' ? list : list.filter((s) => s.projectId === S.filter);
+  return S.filter === 'all' ? list : list.filter((s) => inProject(s, S.filter));
 }
 
 // Compare runs (one launch on several harnesses, sharing a groupId) are one task in the feed
@@ -208,16 +208,39 @@ function renderHead(n, s) {
     <span class="it-side">
       ${pill}
       ${s.queued ? `<span class="q-queued" title="Follow-ups queued">+${s.queued}</span>` : ''}
-      ${s.shipping ? shipPill(s) : s.pr ? prPill(s.pr, s.conflictFix) : ''}
+      ${autoPill(s)}
+      ${s.shipping ? shipPill(s) : prOf(s) ? prPill(prOf(s), s.conflictFix) : ''}
       ${s.team?.length ? teamStack(s.agent, s.team) : modelBadge(s.agent, s.model, s.effort, s.route?.switched ? null : s.route)}
       ${s.machine ? machinePill(s.machine) : ''}
-      <span class="q-proj">${esc(s.project)}</span>
+      ${projectLabel(s)}
       <span class="q-time">${ago(s.updatedAt)}</span>
       ${s.state === 'review' && !open && !s.archived ? `<button class="it-quick" data-a="quick-done" title="Mark done (E)">${icon('done')}</button>` : ''}
       ${icon('chevron', 'chev')}
     </span>`;
 }
 
+// What Auto found after the run: its own test check, the best-of-2 pick, a hand-over.
+function autoPill(s) {
+  const a = s.auto;
+  if (!a || s.pending) return '';
+  const out = [];
+  if (a.pick?.winner) out.push(`<span class="pill auto-pick" title="${esc(`wisp's pick of the two runs: ${a.pick.why}`)}">${icon('spark')}Pick</span>`);
+  if (a.escalatedTo) {
+    const to = S.sessions.get(a.escalatedTo);
+    const toName = to ? `${agentName(to.agent)}${to.model ? ` · ${to.model}` : ''}` : 'another pick';
+    const why = a.reason === 'limit' ? `${agentName(s.agent)} was at its usage limit, so wisp moved the task to ${toName}` : a.reason === 'error' ? `The run failed, so wisp handed the task to ${toName}` : `Tests still failed, so wisp handed the task to ${toName}`;
+    out.push(`<span class="pill auto-handed" title="${esc(why)}">${a.reason === 'limit' ? 'Moved on' : 'Handed on'}</span>`);
+  }
+  const c = a.check;
+  if (c && !a.busy && c.verdict !== 'skip') {
+    const n = c.newFailures || c.failed;
+    const tip = c.verdict === 'pass' ? `wisp ran ${c.command}: no new failures${c.note ? ` (${c.note})` : ''}` : c.verdict === 'fail' ? `wisp ran ${c.command}: ${n} test${n === 1 ? '' : 's'} that passed before now fail${a.repairs ? `, after ${a.repairs} repair round${a.repairs > 1 ? 's' : ''}` : ''}` : `wisp ran ${c.command}: ${c.note || "couldn't tell"}`;
+    const label = c.verdict === 'pass' ? 'Tests' : c.verdict === 'fail' ? `${n} failing` : 'Tests ?';
+    out.push(`<span class="pill auto-ck ck-${c.verdict}" title="${esc(tip)}">${icon(c.verdict === 'pass' ? 'check' : c.verdict === 'fail' ? 'x' : 'info')}${label}</span>`);
+  }
+  return out.join('');
+}
+
 // One run inside a compare task: the harness and model stand in for the title the task shows.
 function renderRunHead(n, s, { open, live, pill }) {
   const a = S.agents.find((x) => x.id === s.agent);
@@ -230,10 +253,11 @@ function renderRunHead(n, s, { open, live, pill }) {
       ${live ? `<span class="q-live ${s.state}">${esc(s.live)}</span>` : open ? '' : `<span class="it-sub">${esc(s.preview || '')}</span>`}
     </span>
     <span class="it-side">
-      ${runsOf(s).some((r) => (r.machine?.id || '') !== (s.machine?.id || '')) ? `${s.machine ? machinePill(s.machine) : `<span class="q-machine" title="Runs on this computer">${icon('laptop')}<span>This computer</span></span>`}<span class="q-proj">${esc(s.project)}</span>` : ''}
+      ${runsOf(s).some((r) => (r.machine?.id || '') !== (s.machine?.id || '')) ? `${s.machine ? machinePill(s.machine) : `<span class="q-machine" title="Runs on this computer">${icon('laptop')}<span>This computer</span></span>`}${projectLabel(s)}` : ''}
       ${live && s.state === 'running' ? `<span class="pill st-running"><i></i>Working</span>` : pill}
       ${s.queued ? `<span class="q-queued" title="Follow-ups queued">+${s.queued}</span>` : ''}
-      ${s.shipping ? shipPill(s) : s.pr ? prPill(s.pr, s.conflictFix) : ''}
+      ${autoPill(s)}
+      ${s.shipping ? shipPill(s) : prOf(s) ? prPill(prOf(s), s.conflictFix) : ''}
       <span class="q-time">${ago(s.updatedAt)}</span>
       ${icon('chevron', 'chev')}
     </span>`;
@@ -257,7 +281,13 @@ function taskItem(t) {
   g.lead = t.id;
   const finished = t.runs.filter((r) => r.state === 'review' || r.state === 'done').length;
   const places = new Set(t.runs.map((r) => r.machine?.id || '')).size;
-  const status = t.state === 'waiting' ? 'A run is asking you' : t.state === 'running' ? `${finished} of ${t.runs.length} finished${places > 1 ? ` · on ${places} machines` : ''}` : t.state === 'done' ? 'Done' : places > 1 ? `All finished on ${places} machines` : 'All finished · pick one to keep';
+  // Auto's groups say what Auto did: which run it picked, or who it handed the task to.
+  const picked = t.runs.find((r) => r.auto?.pick?.winner);
+  const handed = t.runs.find((r) => r.auto?.escalatedFrom);
+  const runName = (r) => `${agentName(r.agent)}${r.model ? ` · ${r.model}` : ''}`;
+  const how = handed?.auto?.reason === 'limit' ? 'The first harness was at its usage limit, so wisp moved it to' : handed?.auto?.reason === 'error' ? 'The first run failed, so wisp handed it to' : 'Tests failed, so wisp handed it to';
+  const autoLine = picked ? `wisp's pick: ${picked.auto.pick.why}` : handed ? `${how} ${runName(handed)}${handed.auto?.check?.verdict === 'pass' ? ' · tests pass now' : handed.auto?.check?.verdict === 'fail' ? ' · still failing' : ''}` : '';
+  const status = t.state === 'waiting' ? 'A run is asking you' : t.state === 'running' ? `${finished} of ${t.runs.length} finished${places > 1 ? ` · on ${places} machines` : ''}` : t.state === 'done' ? 'Done' : autoLine || (places > 1 ? `All finished on ${places} machines` : 'All finished · pick one to keep');
   g.card.className = `task-item c-${t.color} st-${t.state} ${t.unread ? 'unread' : ''}`;
   g.head.innerHTML = `
     <span class="q-dot ${t.state === 'running' ? 'live' : ''} ${t.state === 'waiting' ? 'waiting' : ''}"></span>
@@ -267,7 +297,7 @@ function taskItem(t) {
     </span>
     <span class="it-side">
       <button class="ghost xs" data-a="compare" title="Side by side: time, cost, changes, tests and each presentation"><b class="vs-mark">vs</b><span>Compare</span></button>
-      ${places > 1 ? '' : `<span class="q-proj">${esc(t.project)}</span>`}
+      ${places > 1 ? '' : projectLabel(t)}
       <span class="q-time">${ago(t.updatedAt)}</span>
       ${t.state === 'review' && !t.archived ? `<button class="it-quick" data-a="quick-done" title="Mark every run done">${icon('done')}</button>` : ''}
     </span>`;
@@ -364,7 +394,7 @@ export function reveal(id) {
     S.showDone = true;
     save('wisp.showDone', true);
   }
-  if (S.filter !== 'all' && S.filter !== s.projectId) {
+  if (S.filter !== 'all' && !inProject(s, S.filter)) {
     S.filter = 'all';
     save('wisp.filter', S.filter);
     renderLaunchChips();

package/web/js/features/launcher.js

@@ -31,6 +31,11 @@ import { canLead, paintTeamBtn, teamEditor } from './team.js';
 const NO_FOLDER = 'none';
 const GENERAL = { id: null, name: 'General', path: '', color: 'slate', scratch: true };
 const projectOf = (k) => (launch.picks[k] === NO_FOLDER ? GENERAL : projectById(launch.picks[k]));
+// The place's other folders for the task (launch.also), and whether a project is in it at all.
+const alsoAt = (k) => launch.also[k] || [];
+const chosen = (k, id) => id === launch.picks[k] || alsoAt(k).includes(id);
+const ownPick = (k) => projectsAt(k).some((p) => p.id === launch.picks[k]);
+const MOD = combo('').replace(/\+$/, ''); // ⌘ or Ctrl, for "⌘-click"
 // Project chips in the "in" row, at most, before the rest fold into "+N".
 const CHIPS = 5;
 
@@ -41,13 +46,23 @@ function syncWhere() {
   launch.where = launch.where.filter((k, i) => (!k || machineById(k)) && launch.where.indexOf(k) === i);
   if (!launch.where.length) launch.where = [''];
   // Filtering the feed to a project points the launcher at it (its machine joins if it wasn't picked).
+  // One that's already in the task (as its first folder or another) leaves the selection as it is.
   const f = S.filter !== 'all' && S.filter !== filterSeen && projectById(S.filter);
   filterSeen = S.filter;
   if (f) {
     if (!launch.where.includes(placeOf(f))) launch.where = [placeOf(f)];
-    launch.picks[placeOf(f)] = f.id;
+    if (!chosen(placeOf(f), f.id)) {
+      launch.picks[placeOf(f)] = f.id;
+      delete launch.also[placeOf(f)];
+    }
   } else if (projectById(launch.project) && !Object.values(launch.picks).includes(launch.project)) launch.picks[placeOf(projectById(launch.project))] ??= launch.project;
   for (const k of launch.where) if (launch.picks[k] !== NO_FOLDER && !cloneById(launch.picks[k]) && !projectsAt(k).some((p) => p.id === launch.picks[k])) launch.picks[k] = projectsAt(k)[0]?.id || null;
+  // Other folders only go with a project (not No folder or a clone), and only that place's projects.
+  for (const k of Object.keys(launch.also)) {
+    const ids = ownPick(k) ? launch.also[k].filter((id, i, a) => id !== launch.picks[k] && a.indexOf(id) === i && projectsAt(k).some((p) => p.id === id)) : [];
+    if (ids.length) launch.also[k] = ids;
+    else delete launch.also[k];
+  }
   launch.project = launch.picks[launch.where[0]] || null;
 }
 
@@ -250,7 +265,7 @@ export function renderLauncher() {
       return feedbackCommand(prompt, { restore: () => !ta.value && ((ta.value = prompt), ta.dispatchEvent(new Event('input'))) });
     }
     // One run per place picked under "Run on", each in the project picked for it.
-    const targets = launch.where.map((k) => ({ k, m: k ? machineById(k) : null, project: projectOf(k), clone: cloneById(launch.picks[k]) }));
+    const targets = launch.where.map((k) => ({ k, m: k ? machineById(k) : null, project: projectOf(k), clone: cloneById(launch.picks[k]), also: ownPick(k) ? alsoAt(k).map(projectById).filter(Boolean) : [] }));
     const unset = targets.find((t) => !t.project && !t.clone);
     if (unset) return openProjects({ focusAdd: true, machine: unset.k || null });
     const off = targets.find((t) => t.m && t.m.state !== 'online');
@@ -276,7 +291,7 @@ export function renderLauncher() {
     ta.value = '';
     S.drafts.delete('home');
     ta.dispatchEvent(new Event('input'));
-    if (S.filter !== 'all' && targets.some((t) => t.project?.scratch || t.project?.id !== S.filter)) {
+    if (S.filter !== 'all' && targets.some((t) => t.project?.scratch || (t.project?.id !== S.filter && !t.also.some((p) => p.id === S.filter)))) {
       S.filter = 'all';
       save('wisp.filter', S.filter);
     }
@@ -298,7 +313,7 @@ export function renderLauncher() {
         targets.map((t) =>
           api('/sessions', {
             method: 'POST',
-            body: { prompt, cwd: t.project.scratch ? undefined : t.project.path, scratch: t.project.scratch || undefined, machine: t.k || undefined, groupId, agent: runner.agent, mode: curMode, model: runner.model, effort: runner.effort, attachments, worktree: S.config.defaults.worktree === 'off' && !cmp.length ? false : undefined, compare: cmp.length ? cmp : undefined, subagents: team.length && canLead(runner.agent) ? team : undefined },
+            body: { prompt, cwd: t.project.scratch ? undefined : t.project.path, also: t.also.length ? t.also.map((p) => p.path) : undefined, scratch: t.project.scratch || undefined, machine: t.k || undefined, groupId, agent: runner.agent, mode: curMode, model: runner.model, effort: runner.effort, attachments, worktree: S.config.defaults.worktree === 'off' && !cmp.length ? false : undefined, compare: cmp.length ? cmp : undefined, subagents: team.length && canLead(runner.agent) ? team : undefined },
           }),
         ),
       );
@@ -374,16 +389,22 @@ export function renderLaunchChips() {
       .filter((c) => (c.where || '') === k)
       .map((c) => `<button class="lp-chip cloning ${c.id === launch.picks[k] ? 'on' : ''}" data-id="${c.id}" data-k="${k}" title="Cloning ${esc(c.label)}…"><span class="orb live"></span>${esc(c.name)}<span class="lp-note">cloning…</span></button>`)
       .join('');
-    // Tens of projects: the most recent few as chips (the pick always among them), the rest one
+    // Tens of projects: the most recent few as chips (the picks always among them), the rest one
     // search away behind "+N". fitChips() then folds more into it if the row would wrap.
     const max = multi ? 3 : CHIPS;
-    let shown = list;
-    if (list.length > max) {
-      const top = list.slice(0, max);
-      const picked = list.find((p) => p.id === launch.picks[k]);
-      shown = !picked || top.includes(picked) ? top : [...top.slice(0, -1), picked].sort((a, b) => list.indexOf(a) - list.indexOf(b));
-    }
-    const chips = cloning + shown.map((p) => `<button class="lp-chip c-${p.color} ${p.id === launch.picks[k] ? 'on' : ''}" data-id="${p.id}" data-k="${k}" title="${esc(projectTitle(p))}"><i class="p-dot"></i>${esc(p.name)}</button>`).join('');
+    const picked = list.filter((p) => chosen(k, p.id));
+    const rest = list.filter((p) => !chosen(k, p.id)).slice(0, Math.max(0, max - picked.length));
+    const shown = list.filter((p) => picked.includes(p) || rest.includes(p));
+    // A task can span several of the place's projects: ⌘-click a chip, or its + badge, to add it;
+    // the × on a picked one leaves it out again.
+    const own = ownPick(k);
+    const several = own && alsoAt(k).length > 0;
+    const badge = (p) =>
+      chosen(k, p.id)
+        ? several ? `<span class="lp-also x" data-also="${p.id}" title="Leave ${esc(p.name)} out of this task">${icon('x')}</span>` : ''
+        : own ? `<span class="lp-also" data-also="${p.id}" title="Also work in ${esc(p.name)} (${MOD}-click)">${icon('plus')}</span>` : '';
+    const tip = (p) => `${projectTitle(p)}${several && p.id === launch.picks[k] ? '\nThe agent starts here' : ''}${own && !chosen(k, p.id) ? `\n${MOD}-click to work in it too` : ''}`;
+    const chips = cloning + shown.map((p) => `<button class="lp-chip c-${p.color} ${chosen(k, p.id) ? 'on' : ''}" data-id="${p.id}" data-k="${k}" title="${esc(tip(p))}"><i class="p-dot"></i>${esc(p.name)}${badge(p)}</button>`).join('');
     const more = list.length > 1 ? `<button class="lp-chip more" data-more="${k}" data-total="${list.length}" title="All ${list.length} projects${k ? ` on ${esc(placeName(k))}` : ''}" aria-haspopup="dialog"><span class="lp-more-n"></span>${icon('search')}</button>` : '';
     const add = list.length || cloning
       ? `<button class="lp-chip add" data-add="${k}" title="Another folder${k ? ` on ${esc(placeName(k))}` : ''}">${icon('folder')}${multi || list.length > max ? '' : 'Other folder…'}</button>`
@@ -400,9 +421,21 @@ export function renderLaunchChips() {
   });
   fitRow.observe(box);
   paintScratch();
-  const pick = (k, id) => {
-    launch.picks[k] = id;
-    if (k === launch.where[0]) launch.project = id;
+  // A plain pick makes it the task's only folder; `add` (⌘-click, the + badge) adds it to the
+  // folders or takes it out. Leaving out the first folder hands its place to the next one.
+  const pick = (k, id, { add = false } = {}) => {
+    const also = alsoAt(k);
+    if (add && ownPick(k) && projectById(id)) {
+      if (id !== launch.picks[k]) launch.also[k] = also.includes(id) ? also.filter((x) => x !== id) : [...also, id];
+      else if (also.length) {
+        launch.picks[k] = also[0];
+        launch.also[k] = also.slice(1);
+      }
+    } else {
+      launch.picks[k] = id;
+      delete launch.also[k];
+    }
+    if (k === launch.where[0]) launch.project = launch.picks[k];
     saveLaunch();
     paintScratch();
     renderLaunchRecipes();
@@ -410,8 +443,9 @@ export function renderLaunchChips() {
   box.onclick = (e) => {
     const chip = e.target.closest('.lp-chip[data-id]');
     if (chip) {
-      pick(chip.dataset.k, chip.dataset.id);
-      $$(`.lp-chip[data-k="${chip.dataset.k}"]`, box).forEach((x) => x.classList.toggle('on', x === chip));
+      const k = chip.dataset.k;
+      pick(k, chip.dataset.id, { add: !!e.target.closest('[data-also]') || e.metaKey || e.ctrlKey || e.shiftKey });
+      renderLaunchChips(); // the + and × badges follow the picks
       return;
     }
     const more = e.target.closest('[data-more]');
@@ -420,6 +454,14 @@ export function renderLaunchChips() {
       return projectList(more, {
         projects: projectsAt(k),
         current: launch.picks[k],
+        // Each row's + adds it to the task (or takes it out) and leaves the list open.
+        also: ownPick(k) && {
+          has: (id) => chosen(k, id),
+          toggle: (id) => {
+            pick(k, id, { add: true });
+            renderLaunchChips();
+          },
+        },
         label: `Projects on ${placeName(k)}`,
         extras: [
           { id: NO_FOLDER, label: 'No folder', icon: 'spark' },
@@ -460,6 +502,7 @@ function fitChips(box) {
     if (launch.where.length > 1) continue;
     const wraps = () => {
       const kids = [...g.children].filter((x) => !x.hidden && x.offsetParent);
+      if (!kids.length) return false; // not laid out (a launcher painted over, or folded into the dock)
       const lin = $('.l-in', box); // "in" left alone on a line counts too
       return kids.some((x) => x.offsetTop >= kids[0].offsetTop + kids[0].offsetHeight) || (lin && kids[0].offsetTop >= lin.offsetTop + lin.offsetHeight);
     };
@@ -605,7 +648,7 @@ function launchedFx(from, to) {
 // 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 }, live = 'Starting up') {
+function addPending(prompt, { project: p, m, also = [] }, { agent, model, effort }, live = 'Starting up') {
   const id = `pending-${++pendingSeq}`;
   const line = plain(prompt).split('\n')[0].replace(/\s+/g, ' ');
   const now = Date.now();
@@ -621,6 +664,7 @@ function addPending(prompt, { project: p, m }, { agent, model, effort }, live =
     project: p.name,
     projectId: p.id,
     color: p.color || 'slate',
+    ...(also.length && { also: also.map((x) => ({ cwd: x.path, project: x.name, projectId: x.id, color: x.color, branch: '', pr: null })) }),
     state: 'running',
     live,
     createdAt: now,

package/web/js/features/live.js

@@ -7,7 +7,7 @@ import { $ } from '../core/dom.js';
 import { S, saveOpen, setAgents } from '../core/state.js';
 import { toast } from '../ui/toast.js';
 import { paintAutoBtn } from './automations.js';
-import { collapse, renderFeed, scheduleRefetch, sectionOf } from './feed.js';
+import { renderFeed, scheduleRefetch, sectionOf } from './feed.js';
 import { dropPending, renderLaunchChips } from './launcher.js';
 import { loadMachines, setMachines } from './machines.js';
 import { notifyFinished } from './notify.js';
@@ -34,12 +34,7 @@ export function connect() {
     // list and focus goes to the next one instead.
     const moved = prev && was !== sectionOf(s);
     const follow = moved && s.state !== 'done' && !s.archived && watching(s.id);
-    keepInPlace(follow ? S.nodes.get(s.id).card : feedAnchor(s.id), () => {
-      // A card left open while it worked shouldn't land in "Needs you" expanded —
-      // fold it unless the user is actually watching it.
-      if (prev?.state === 'running' && s.state !== 'running' && S.open.has(s.id) && !(watching(s.id) && document.hasFocus())) collapse(s.id);
-      renderFeed();
-    });
+    keepInPlace(follow ? S.nodes.get(s.id).card : feedAnchor(s.id), renderFeed);
     if (prev?.state !== s.state || prev?.queued !== s.queued) scheduleRefetch(s.id);
     if (JSON.stringify([prev?.pr, prev?.toShip, prev?.state, prev?.shipping]) !== JSON.stringify([s.pr, s.toShip, s.state, s.shipping])) renderPrStrip(s.id);
   });

package/web/js/features/places.js

@@ -8,6 +8,16 @@ import { S } from '../core/state.js';
 export const projectById = (id) => S.config.projects.find((p) => p.id === id);
 
 export const placeOf = (p) => p?.machine || '';
+// A task's projects: its own, then those of the other folders it works in (also).
+export const inProject = (s, id) => s.projectId === id || !!s.also?.some((a) => a.projectId === id);
+
+// The project on a card: "api + web", or "api +2" past that, each one in the tooltip.
+export function projectLabel(s) {
+  const also = s.also || [];
+  if (!also.length) return `<span class="q-proj">${esc(s.project)}</span>`;
+  const names = [s.project, ...also.map((a) => a.project)];
+  return `<span class="q-proj multi" title="${esc(`One task in ${names.length} folders: ${names.join(', ')}`)}">${esc(s.project)}<span class="q-also ${also.length === 1 ? `c-${also[0].color}` : ''}">${also.length === 1 ? `+ ${esc(also[0].project)}` : `+${also.length}`}</span></span>`;
+}
 export const placeName = (k) => (k ? machineById(k)?.name || 'machine' : 'This computer');
 export const recentFirst = (a, b) => (b.lastUsedAt || b.addedAt) - (a.lastUsedAt || a.addedAt);
 export const projectsAt = (k) => S.config.projects.filter((p) => placeOf(p) === k).sort(recentFirst);

package/web/js/features/project-list.js

@@ -6,6 +6,8 @@
 //   meta(p)   extra html after a row's name (status badges)
 //   extras    [{ id, label, icon }] fixed rows under the list (No folder, Other folder…)
 //   onPick    (id) => …, a project's id or an extra's
+//   also      { has(id), toggle(id) }: each row gets a + that adds the project to the task (✓ once
+//             it's in) without closing the list; ⌘/Ctrl/Shift+Enter does the same from the keyboard
 
 import { esc } from '../md.js';
 import { $, el, icon } from '../core/dom.js';
@@ -13,7 +15,7 @@ import { fuzzy, highlight } from '../fuzzy.js';
 import { popover } from '../ui/popover.js';
 import { projectTitle } from './places.js';
 
-export function projectList(anchor, { projects, current, meta = () => '', extras = [], onPick, label = 'Projects' }) {
+export function projectList(anchor, { projects, current, meta = () => '', extras = [], onPick, also = null, label = 'Projects' }) {
   if ($('.menu.pm')) return $('.menu.pm').close();
   const node = el(`
     <div class="menu pm" role="dialog" aria-label="${esc(label)}">
@@ -43,8 +45,10 @@ export function projectList(anchor, { projects, current, meta = () => '', extras
     list.innerHTML = hits.length
       ? hits
           .map(
-            ({ p, m }) => `<button class="pm-row c-${p.color} ${p.id === current ? 'on' : ''}" data-id="${esc(p.id)}" role="option" aria-selected="${p.id === current}" title="${esc(projectTitle(p))}">
-              <i class="p-dot"></i><span class="pm-name">${highlight(p.name, m?.idx, esc)}</span>${p.machine ? icon('server', 'pm-where') : ''}${meta(p)}<small class="pm-path">${esc(p.path.replace(/^\/(Users|home)\/[^/]+/, '~'))}</small>${icon('check', 'pm-check')}
+            ({ p, m }) => `<button class="pm-row c-${p.color} ${p.id === current ? 'on' : ''} ${also?.has(p.id) ? 'in' : ''}" data-id="${esc(p.id)}" role="option" aria-selected="${p.id === current}" title="${esc(projectTitle(p))}">
+              <i class="p-dot"></i><span class="pm-name">${highlight(p.name, m?.idx, esc)}</span>${p.machine ? icon('server', 'pm-where') : ''}${meta(p)}<small class="pm-path">${esc(p.path.replace(/^\/(Users|home)\/[^/]+/, '~'))}</small>${
+                also ? `<span class="pm-also" data-also title="${also.has(p.id) ? `Leave ${esc(p.name)} out of this task` : `Also work in ${esc(p.name)}`}">${icon(also.has(p.id) ? 'check' : 'plus')}</span>` : icon('check', 'pm-check')
+              }
             </button>`,
           )
           .join('')
@@ -57,9 +61,19 @@ export function projectList(anchor, { projects, current, meta = () => '', extras
     close();
     onPick(id);
   };
+  // Adding to the task keeps the list open, the row where it was and the search as typed.
+  const toggle = (r) => {
+    also.toggle(r.dataset.id);
+    const at = act;
+    paint();
+    mark(at, false);
+    input.focus({ preventScroll: true });
+  };
   node.onclick = (e) => {
     const r = e.target.closest('.pm-row');
-    if (r) pick(r.dataset.id);
+    if (!r) return;
+    if (also && !r.classList.contains('pm-x') && (e.target.closest('[data-also]') || e.metaKey || e.ctrlKey || e.shiftKey)) return toggle(r);
+    pick(r.dataset.id);
   };
   node.onmousemove = (e) => {
     const r = e.target.closest('.pm-row');
@@ -73,7 +87,8 @@ export function projectList(anchor, { projects, current, meta = () => '', extras
     } else if (e.key === 'Enter' && !e.isComposing) {
       e.preventDefault();
       const r = rows()[act];
-      if (r) pick(r.dataset.id);
+      if (r && also && !r.classList.contains('pm-x') && (e.metaKey || e.ctrlKey || e.shiftKey)) toggle(r);
+      else if (r) pick(r.dataset.id);
     } else if (e.key === 'Tab') close();
   };
 

package/web/js/features/projects.js

@@ -6,14 +6,14 @@ import * as bus from '../core/bus.js';
 import { $, $$, el, icon } from '../core/dom.js';
 import { launch, S, save, saveLaunch } from '../core/state.js';
 import { present } from '../ui/overlay.js';
-import { popover } from '../ui/popover.js';
+import { clampToViewport, popover } from '../ui/popover.js';
 import { toast, toastError, tryApi } from '../ui/toast.js';
 import { clones, isRepo, repoLabel, repoName, startClone } from './clones.js';
 import { feedToTop, renderFeed } from './feed.js';
 import { renderLaunchChips } from './launcher.js';
 import { loadConfig } from './live.js';
 import { connectMachine, openMachines } from './machines.js';
-import { MACHINE_STATE, machineById, placeOf, projectById, projectTitle, recentFirst } from './places.js';
+import { inProject, MACHINE_STATE, machineById, placeOf, projectById, projectTitle, recentFirst } from './places.js';
 import { projectList } from './project-list.js';
 
 // Project filter chips in the top bar before the rest fold into "+N".
@@ -23,7 +23,7 @@ let fitBar; // refits the chips when the bar's width changes
 export function renderProjects() {
   const all = [...S.sessions.values()];
   const stats = (pid) => {
-    const l = pid === 'all' ? all : all.filter((s) => s.projectId === pid);
+    const l = pid === 'all' ? all : all.filter((s) => inProject(s, pid));
     return { run: l.filter((s) => s.state === 'running').length, need: l.filter((s) => s.state === 'waiting' || (s.state === 'review' && s.unread)).length };
   };
   const badges = (id) => {
@@ -146,10 +146,7 @@ function projectMenu(id, e) {
     }
   };
   const close = popover(menu);
-  // Keep the menu on-screen when right-clicking near the window edge.
-  const r = menu.getBoundingClientRect();
-  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
-  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+  clampToViewport(menu, e.clientX, e.clientY);
 }
 
 const COLORS = ['violet', 'teal', 'amber', 'rose', 'sky', 'lime', 'orange', 'indigo'];
@@ -262,6 +259,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
   const picked = async (proj) => {
     await loadConfig();
     launch.picks[placeOf(proj)] = proj.id;
+    delete launch.also[placeOf(proj)];
     if (!launch.where.includes(placeOf(proj))) launch.where = [placeOf(proj)];
     if (placeOf(proj) === launch.where[0]) launch.project = proj.id;
     saveLaunch();
@@ -346,7 +344,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
       ? pending +
         projects
           .map((p) => {
-            const n = [...S.sessions.values()].filter((s) => s.projectId === p.id).length;
+            const n = [...S.sessions.values()].filter((s) => inProject(s, p.id)).length;
             return `<div class="prow c-${p.color}" data-id="${p.id}">
               <button class="swatch" title="Change colour"><i class="p-dot"></i></button>
               <div class="prow-main"><input class="pname" value="${esc(p.name)}"><span class="ppath">${esc(tilde(p.path))}</span></div>