wisp-agents 0.20.0 → 0.22.0

package/web/js/features/launcher.js

@@ -1,5 +1,6 @@
 // The launcher: the box on top where tasks start. It picks where they run (this computer and/or
-// machines, a project in each), on what, and shows a placeholder card until the server answers.
+// machines), in which project (any of them runs anywhere), on what, and shows a placeholder card
+// until the server answers.
 
 import { esc } from '../md.js';
 import { plain } from '../mention-text.js';
@@ -18,7 +19,7 @@ import { feedbackCommand, isFeedback } from './feedback.js';
 import { connectMachine, offlineToast, openMachines } from './machines.js';
 import { mentionBox } from './mentions.js';
 import { askNotify } from './notify.js';
-import { MACHINE_STATE, machineById, placeName, placeOf, projectById, projectsAt, projectTitle } from './places.js';
+import { MACHINE_STATE, machineById, pathAt, placeName, placeOf, placesOf, projectById, projects, projectTitle } from './places.js';
 import { projectList } from './project-list.js';
 import { openProjects } from './projects.js';
 import { runnerPicker } from './runner-picker.js';
@@ -30,7 +31,17 @@ import { canLead, paintTeamBtn, teamEditor } from './team.js';
 // "No folder": a general ask with no project. The server gives it an empty scratch directory.
 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]));
+// One pick for every place the task runs on (launch.picks[''], see core/state.js): the project,
+// or No folder, or a repo still cloning; and the task's other folders (launch.also['']).
+// Nothing to pick (no projects yet) runs in No folder; the stored pick stays null, so the first
+// project to show up takes over (syncWhere).
+const storedPick = () => launch.picks[''];
+const pickId = () => storedPick() || NO_FOLDER;
+const projectOf = () => (pickId() === NO_FOLDER ? GENERAL : projectById(pickId()));
+const alsoIds = () => launch.also[''] || [];
+const chosen = (id) => id === pickId() || alsoIds().includes(id);
+const ownPick = () => !!projectById(pickId());
+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;
 
@@ -40,15 +51,25 @@ let filterSeen = null;
 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).
+  // Picks saved per place, from before every project ran everywhere: the first place's carries on.
+  if (!('' in launch.picks) && launch.picks[launch.where[0]]) launch.picks[''] = launch.picks[launch.where[0]];
+  if (!launch.also[''] && launch.also[launch.where[0]]) launch.also[''] = launch.also[launch.where[0]];
+  for (const k of Object.keys(launch.picks)) if (k) delete launch.picks[k];
+  for (const k of Object.keys(launch.also)) if (k) delete launch.also[k];
+  // Filtering the feed to a project points the launcher at it. 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;
-  } 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;
-  launch.project = launch.picks[launch.where[0]] || null;
+  if (f && !chosen(f.id)) {
+    launch.picks[''] = f.id;
+    delete launch.also[''];
+  } else if (!storedPick() && projectById(launch.project)) launch.picks[''] = launch.project;
+  if (storedPick() !== NO_FOLDER && !cloneById(storedPick()) && !projectById(storedPick())) launch.picks[''] = projects()[0]?.id || null;
+  // Other folders only go with a project (not No folder or a clone).
+  const ids = ownPick() ? alsoIds().filter((id, i, a) => id !== pickId() && a.indexOf(id) === i && projectById(id)) : [];
+  if (ids.length) launch.also[''] = ids;
+  else delete launch.also[''];
+  launch.project = storedPick() || null;
 }
 
 export function renderLauncher() {
@@ -249,10 +270,10 @@ export function renderLauncher() {
       ta.dispatchEvent(new Event('input'));
       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 unset = targets.find((t) => !t.project && !t.clone);
-    if (unset) return openProjects({ focusAdd: true, machine: unset.k || null });
+    // One run per place picked under "Run on", all in the picked project: a place that has no
+    // checkout of it yet gets one first (the server clones it there).
+    const targets = launch.where.map((k) => ({ k, m: k ? machineById(k) : null, project: projectOf(), clone: cloneById(pickId()), also: ownPick() ? alsoIds().map(projectById).filter(Boolean) : [] }));
+    if (!targets[0].project && !targets[0].clone) return openProjects({ focusAdd: true });
     const off = targets.find((t) => t.m && t.m.state !== 'online');
     if (off) return offlineToast(off.k);
     if (needsSetup()) return nudgeSetup();
@@ -271,12 +292,13 @@ export function renderLauncher() {
     const cmp = compare;
     const runner = { agent: agent?.id || 'claude', model: curModel, effort: curEffort };
     // A repo still cloning gets a stand-in project; its card says so until the clone lands.
-    const pending = targets.map((t) => addPending(prompt, t.project ? t : { ...t, project: { id: t.clone.id, name: t.clone.name, path: '', color: 'slate' } }, runner, t.clone && `Cloning ${t.clone.label}`));
+    const fetching = (t) => t.k && [t.project, ...t.also].some((p) => p && !p.scratch && !pathAt(p, t.k)); // not on that machine yet
+    const pending = targets.map((t) => addPending(prompt, t.project ? t : { ...t, project: { id: t.clone.id, name: t.clone.name, path: '', color: 'slate' } }, runner, t.clone ? `Cloning ${t.clone.label}` : fetching(t) ? `Cloning ${t.project.name} on ${placeName(t.k)}` : undefined));
     if (cmp.length) (compare = []), paintCompare();
     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 +320,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, 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 },
           }),
         ),
       );
@@ -352,46 +374,56 @@ export function renderLauncher() {
   });
 }
 
-// No folder everywhere picked: no git repo, so no worktree either; the toggle would only mislead.
+// No folder: no git repo, so no worktree either; the toggle would only mislead.
 function paintScratch() {
   const wt = $('#launcher #wtBtn');
-  if (wt) wt.hidden = launch.where.every((k) => launch.picks[k] === NO_FOLDER);
+  if (wt) wt.hidden = pickId() === NO_FOLDER;
 }
 
 export function renderLaunchChips() {
   const box = $('#launcher .l-projects');
   if (!box) return;
   syncWhere();
-  const multi = launch.where.length > 1;
-  // One group per place: its name (unless it's only this computer), its projects, a way to add one.
-  const group = (k) => {
-    const m = k && machineById(k);
-    const list = projectsAt(k);
-    const off = m && m.state !== 'online';
-    const label = k || multi ? `<span class="lp-gl ${off ? 'off' : ''}" title="${esc(k ? `${m?.target} · ${MACHINE_STATE[m?.state] || ''}` : 'This computer')}">${icon(k ? 'server' : 'laptop')}${esc(placeName(k))}${off ? `<button class="link xs" data-connect="${k}">${m.state === 'connecting' || m.state === 'reconnecting' ? 'connecting…' : 'Connect'}</button>` : ''}</span>` : '';
-    // A repo still cloning: picked, with a spinner, until the real project replaces it.
-    const cloning = clones
-      .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
-    // 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 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>`
-      : `<button class="lp-chip add" data-add="${k}">${icon('folder')}${k ? `Pick a project on ${esc(placeName(k))}…` : 'Choose a folder…'}</button>`;
-    const none = `<button class="lp-chip none ${launch.picks[k] === NO_FOLDER ? 'on' : ''}" data-id="${NO_FOLDER}" data-k="${k}" title="No folder: a general ask, with no project and no worktree. The agent gets an empty scratch directory.">${icon('spark')}<span>No folder</span></button>`;
-    return `<span class="lp-group">${label}${chips}${more}${none}${add}</span>`;
+  const list = projects();
+  const pick = pickId();
+  // A machine picked under "Run on" but not connected: it says so, with a way to connect.
+  const offline = launch.where
+    .map(machineById)
+    .filter((m) => m && m.state !== 'online')
+    .map((m) => `<span class="lp-gl off" title="${esc(`${m.target} · ${MACHINE_STATE[m.state] || ''}`)}">${icon('server')}${esc(m.name)}<button class="link xs" data-connect="${m.id}">${m.state === 'connecting' || m.state === 'reconnecting' ? 'connecting…' : 'Connect'}</button></span>`)
+    .join('');
+  // A repo still cloning: picked, with a spinner, until the real project replaces it.
+  const cloning = clones
+    .map((c) => `<button class="lp-chip cloning ${c.id === pick ? 'on' : ''}" data-id="${c.id}" title="Cloning ${esc(c.label)}${c.where ? ` on ${esc(placeName(c.where))}` : ''}…"><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 picks always among them), the rest one
+  // search away behind "+N". fitChips() then folds more into it if the row would wrap.
+  const picked = list.filter((p) => chosen(p.id));
+  const rest = list.filter((p) => !chosen(p.id)).slice(0, Math.max(0, CHIPS - picked.length));
+  const shown = list.filter((p) => picked.includes(p) || rest.includes(p));
+  // A task can span several projects: ⌘-click a chip, or its + badge, to add it; the × on a
+  // picked one leaves it out again.
+  const own = ownPick();
+  const several = own && alsoIds().length > 0;
+  const badge = (p) =>
+    chosen(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>` : '';
+  // Machines picked that have no checkout of it yet: the first run there clones it.
+  const missing = (p) => launch.where.filter((k) => k && !pathAt(p, k)).map(placeName);
+  const tip = (p) => {
+    const m = missing(p);
+    return `${projectTitle(p)}${m.length ? `\nwisp clones it on ${m.join(', ')} for this task` : ''}${several && p.id === pick ? '\nThe agent starts here' : ''}${own && !chosen(p.id) ? `\n${MOD}-click to work in it too` : ''}`;
   };
-  box.innerHTML = `<span class="l-in">in</span>${launch.where.map(group).join('')}`;
+  const chips = cloning + shown.map((p) => `<button class="lp-chip c-${p.color} ${chosen(p.id) ? 'on' : ''}" data-id="${p.id}" 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="1" data-total="${list.length}" title="All ${list.length} projects" aria-haspopup="dialog"><span class="lp-more-n"></span>${icon('search')}</button>` : '';
+  // Another folder goes on the one machine picked, if that's all it runs on.
+  const addOn = launch.where.length === 1 ? launch.where[0] : '';
+  const add = list.length || cloning
+    ? `<button class="lp-chip add" data-add="${addOn}" title="Another folder${addOn ? ` on ${esc(placeName(addOn))}` : ''}">${icon('folder')}${list.length > CHIPS ? '' : 'Other folder…'}</button>`
+    : `<button class="lp-chip add" data-add="${addOn}">${icon('folder')}${addOn ? `Pick a project on ${esc(placeName(addOn))}…` : 'Choose a folder…'}</button>`;
+  const none = `<button class="lp-chip none ${pick === NO_FOLDER ? 'on' : ''}" data-id="${NO_FOLDER}" title="No folder: a general ask, with no project and no worktree. The agent gets an empty scratch directory.">${icon('spark')}<span>No folder</span></button>`;
+  box.innerHTML = `<span class="l-in">in</span><span class="lp-group">${chips}${more}${none}${add}${offline}</span>`;
   fitChips(box);
   fitRow ??= new ResizeObserver(([e]) => {
     if (e.contentRect.width === fitRow.w) return; // its own folding only changes the height
@@ -400,9 +432,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 choose = (id, { add = false } = {}) => {
+    const also = alsoIds();
+    if (add && ownPick() && projectById(id)) {
+      if (id !== pickId()) launch.also[''] = also.includes(id) ? also.filter((x) => x !== id) : [...also, id];
+      else if (also.length) {
+        launch.picks[''] = also[0];
+        launch.also[''] = also.slice(1);
+      }
+    } else {
+      launch.picks[''] = id;
+      delete launch.also[''];
+    }
+    launch.project = storedPick();
     saveLaunch();
     paintScratch();
     renderLaunchRecipes();
@@ -410,24 +454,31 @@ 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));
+      choose(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]');
     if (more) {
-      const k = more.dataset.more;
       return projectList(more, {
-        projects: projectsAt(k),
-        current: launch.picks[k],
-        label: `Projects on ${placeName(k)}`,
+        projects: projects(),
+        current: pickId(),
+        // Each row's + adds it to the task (or takes it out) and leaves the list open.
+        also: ownPick() && {
+          has: (id) => chosen(id),
+          toggle: (id) => {
+            choose(id, { add: true });
+            renderLaunchChips();
+          },
+        },
+        label: 'Projects',
         extras: [
           { id: NO_FOLDER, label: 'No folder', icon: 'spark' },
-          { id: '+add', label: k ? `Another folder on ${placeName(k)}…` : 'Other folder…', icon: 'folder' },
+          { id: '+add', label: addOn ? `Another folder on ${placeName(addOn)}…` : 'Other folder…', icon: 'folder' },
         ],
         onPick: (id) => {
-          if (id === '+add') return openProjects({ focusAdd: true, machine: k || null });
-          pick(k, id);
+          if (id === '+add') return openProjects({ focusAdd: true, machine: addOn || null });
+          choose(id);
           renderLaunchChips(); // the pick joins the chips
           $('#prompt')?.focus();
         },
@@ -457,9 +508,9 @@ function fitChips(box) {
       $('.lp-more-n', more).textContent = `+${n}`;
     };
     paint();
-    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);
     };
@@ -500,12 +551,12 @@ function whereMenu(anchor) {
       return `<button class="wm-row ${on ? 'on' : ''}" data-k="${k}" role="menuitemcheckbox" aria-checked="${on}">
         <span class="wm-check">${icon('check')}</span>
         <span class="wm-icon">${icon(k ? 'server' : 'laptop')}${m ? `<i class="dot ${st === 'online' ? 'ok' : st === 'error' ? 'bad' : ''}"></i>` : ''}</span>
-        <span class="wm-name"><b>${esc(placeName(k))}</b><small>${m ? esc(st === 'online' ? m.target : `${m.target} · ${MACHINE_STATE[st]}`) : `${projectsAt('').length} project${projectsAt('').length === 1 ? '' : 's'}`}</small></span>
+        <span class="wm-name"><b>${esc(placeName(k))}</b><small>${m ? esc(st === 'online' ? m.target : `${m.target} · ${MACHINE_STATE[st]}`) : 'Where wisp runs'}</small></span>
         ${m && st === 'online' && ready.length ? `<span class="wm-agents">${ready.map((a) => `<span class="model-logo">${harnessLogo(a.id)}</span>`).join('')}</span>` : ''}
         <span class="wm-only" data-only="${k}" title="Only here">only</span>
       </button>`;
     };
-    box.innerHTML = `<div class="wm-h">Run on <small>pick several to run in parallel</small></div>
+    box.innerHTML = `<div class="wm-h">Run on <small>pick several to run in parallel · any project runs anywhere</small></div>
       ${row('', null)}${S.machines.map((m) => row(m.id, m)).join('')}
       <div class="wm-sep"></div>
       <button data-a="add">${icon('plus')}${S.machines.length ? 'Add a machine…' : 'Add a machine to run on another computer…'}</button>
@@ -605,7 +656,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 +672,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,
@@ -632,10 +684,12 @@ function addPending(prompt, { project: p, m }, { agent, model, effort }, live =
 
 // 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.
-export async function launchBehind({ prompt, cwd, runner }, request) {
-  const sum = S.config.projects.find((p) => p.path === cwd);
+// machine: where it runs ('' = this computer), else where the folder is.
+export async function launchBehind({ prompt, cwd, runner, machine }, request) {
+  const sum = S.config.projects.find((p) => placesOf(p).some((k) => pathAt(p, k) === 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);
+  const k = machine ?? placeOf(project);
+  const ghost = addPending(prompt, { project, m: k ? machineById(k) : null }, runner, k && sum && !pathAt(sum, k) ? `Cloning ${sum.name} on ${placeName(k)}` : undefined);
   if (S.filter !== 'all' && S.filter !== project.id) {
     S.filter = 'all';
     save('wisp.filter', S.filter);

package/web/js/features/place-menu.js

@@ -0,0 +1,44 @@
+// "Runs on" for one task: pick this computer or a machine for a follow-up or a rerun. The
+// launcher's own menu (several places at once) is whereMenu in launcher.js.
+
+import { esc } from '../md.js';
+import * as bus from '../core/bus.js';
+import { $, el, icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { popover } from '../ui/popover.js';
+import { MACHINE_STATE, machineById, placeName } from './places.js';
+
+// One place for a follow-up or a rerun: this computer or a machine. from: where the task is now.
+// locked: why it can't move right now (a running task), shown instead of a choice.
+export function placeMenu(anchor, { title, current, from, note = '', locked = '' }, pick) {
+  if ($('.menu.place-menu')) return $('.menu.place-menu').close();
+  const box = el(`<div class="menu where-menu place-menu" role="menu"></div>`);
+  const paint = () => {
+    const row = (k) => {
+      const m = k ? machineById(k) : null;
+      const st = m ? m.state : 'online';
+      const on = k === current;
+      const sub = k === from ? 'Where it is now' : m ? (st === 'online' ? m.target : `${m.target} · ${MACHINE_STATE[st]}`) : 'Where wisp runs';
+      return `<button class="wm-row ${on ? 'on' : ''}" data-k="${k}" role="menuitemradio" aria-checked="${on}" ${locked && k !== from ? 'disabled' : ''}>
+        <span class="wm-check">${icon('check')}</span>
+        <span class="wm-icon">${icon(k ? 'server' : 'laptop')}${m ? `<i class="dot ${st === 'online' ? 'ok' : st === 'error' ? 'bad' : ''}"></i>` : ''}</span>
+        <span class="wm-name"><b>${esc(placeName(k))}</b><small>${esc(sub)}</small></span>
+      </button>`;
+    };
+    box.innerHTML = `<div class="wm-h">${esc(title)}</div>${locked || note ? `<p class="wm-note ${locked ? 'warn' : ''}">${esc(locked || note)}</p>` : ''}${row('')}${S.machines.map((m) => row(m.id)).join('')}`;
+  };
+  box.onclick = (e) => {
+    const r = e.target.closest('.wm-row:not([disabled])');
+    if (!r) return;
+    shut();
+    pick(r.dataset.k);
+  };
+  paint();
+  const shut = popover(box, { anchor, onClose: () => anchor.setAttribute('aria-expanded', 'false') });
+  bus.on('machines', paint, { node: box });
+  anchor.setAttribute('aria-expanded', 'true');
+  const r = anchor.getBoundingClientRect();
+  const h = box.offsetHeight;
+  box.style.left = `${Math.max(8, Math.min(r.left, innerWidth - box.offsetWidth - 8))}px`;
+  box.style.top = `${r.bottom + 6 + h > innerHeight - 8 ? Math.max(8, r.top - h - 6) : r.bottom + 6}px`;
+}

package/web/js/features/places.js

@@ -1,5 +1,6 @@
-// Projects and machines: the places a task can run. A project is a folder, on this computer or on a
-// machine (another computer running its own wisp, reached over SSH).
+// Projects and machines: the places a task can run. A project is one repo, and runs on every place:
+// it was added on one (path, machine), and wisp clones it onto the others the first time a task
+// runs there (copies: { [machine id | 'here']: path }; server/services/places.js).
 
 import { esc } from '../md.js';
 import { icon } from '../core/dom.js';
@@ -8,19 +9,38 @@ 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);
+// Every project, on every place: one that isn't on a place yet gets cloned there on first use.
+export const projects = () => [...S.config.projects].sort(recentFirst);
+// The project's folder on place k, or '' when wisp still has to put it there.
+export const pathAt = (p, k) => (placeOf(p) === k ? p.path : p?.copies?.[k || 'here'] || '');
+// The places that have a checkout of it: where it was added first.
+export const placesOf = (p) => (p ? [placeOf(p), ...Object.keys(p.copies || {}).map((k) => (k === 'here' ? '' : k))].filter((k, i, a) => a.indexOf(k) === i && (!k || machineById(k))) : []);
 
 // A machine runs its own wisp; this one signs in over SSH, tunnels to it and shows its sessions
-// as <id>@<machine>. Projects can live on a machine; launching in one runs the agent there.
+// as <id>@<machine>. Any project runs there; the launch clones it there first if it has to.
 export const machineById = (id) => S.machines.find((m) => m.id === id);
 const machineOnline = (id) => machineById(id)?.state === 'online';
 export const MACHINE_STATE = { online: 'Online', connecting: 'Connecting…', reconnecting: 'Reconnecting…', error: 'Couldn’t connect', off: 'Not connected' };
+// Where it is: "~/code/app", "on devbox: /srv/app", plus the other places that have it.
 export const projectTitle = (p) => {
   if (!p) return '';
+  const tilde = (x) => (S.config.home && x.startsWith(S.config.home) ? `~${x.slice(S.config.home.length)}` : x);
   const m = p.machine && machineById(p.machine);
-  return m ? `${p.path} on ${m.name}${m.state === 'online' ? '' : ' (not connected)'}` : p.path;
+  const first = m ? `${p.path} on ${m.name}${m.state === 'online' ? '' : ' (not connected)'}` : tilde(p.path);
+  const also = placesOf(p).slice(1).map(placeName);
+  return also.length ? `${first}\nAlso checked out on ${also.join(', ')}` : first;
 };
 
 export function machinePill(mt) {

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

@@ -13,7 +13,7 @@ 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, pathAt, placeName, placesOf, 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) => {
@@ -203,8 +203,8 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
         : `Clones <b>${esc(repoLabel(v))}</b> into <button class="link" data-a="clonedir" title="Change where repos are cloned">${esc(tilde(S.config.cloneDir || '~/code'))}/${esc(repoName(v))}</button>. You can write the task while it clones.`;
     else
       hint.innerHTML = m
-        ? `Folders on <b>${esc(m.name)}</b>, or a repo URL to clone there. Agents run there, in its own worktrees; you follow along here.`
-        : 'Paste a GitHub URL and wisp clones it for you. Or run <code>wisp add</code> inside any folder: it is added automatically.';
+        ? `Folders on <b>${esc(m.name)}</b>, or a repo URL to clone there. You don’t need to add a project here that you already have: every project runs on ${esc(m.name)}, and wisp clones it there the first time.`
+        : `Paste a GitHub URL and wisp clones it for you. Or run <code>wisp add</code> inside any folder: it is added automatically.${S.machines.length ? ' Projects run on your machines too: wisp clones them there when a task needs it.' : ''}`;
   };
   // Change the clone folder in place: the hint turns into a small path field.
   $('.hint', node).addEventListener('click', (e) => {
@@ -255,12 +255,13 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
     input.focus();
   });
 
-  // A new project becomes the launcher's pick for its place.
+  // A new project becomes the launcher's pick; added on a machine, the task runs there.
   const picked = async (proj) => {
     await loadConfig();
-    launch.picks[placeOf(proj)] = proj.id;
-    if (!launch.where.includes(placeOf(proj))) launch.where = [placeOf(proj)];
-    if (placeOf(proj) === launch.where[0]) launch.project = proj.id;
+    launch.picks[''] = proj.id;
+    delete launch.also[''];
+    launch.project = proj.id;
+    if (!launch.where.includes(where || '')) launch.where = [where || ''];
     saveLaunch();
     renderLaunchChips();
   };
@@ -331,9 +332,9 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
 
   const list = () => {
     const box = $('#plist', node);
-    const projects = S.config.projects.filter((p) => (p.machine || null) === where);
+    // Every project, wherever it was added: each runs on every place. Its row says where it's checked out.
+    const projects = [...S.config.projects].sort(recentFirst);
     const pending = clones
-      .filter((j) => j.where === where)
       .map(
         (j) => `<div class="prow cloning"><span class="swatch"><span class="orb live"></span></span>
           <div class="prow-main"><b class="pname">${esc(repoName(j.url))}</b><span class="ppath">Cloning ${esc(repoLabel(j.url))}…</span></div></div>`,
@@ -343,16 +344,18 @@ 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;
+            const at = placesOf(p);
+            const spots = at.map((k) => `<span class="pplace" title="${esc(k ? `${pathAt(p, k)} on ${placeName(k)}` : pathAt(p, k))}">${icon(k ? 'server' : 'laptop')}${esc(placeName(k))}</span>`).join('');
             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>
+              <div class="prow-main"><input class="pname" value="${esc(p.name)}"><span class="ppath">${S.machines.length ? spots : esc(tilde(p.path))}</span></div>
               <span class="pcount">${n} session${n === 1 ? '' : 's'}</span>
               <button class="icon-btn premove" title="Remove from wisp (files untouched)">${icon('trash')}</button>
             </div>`;
           })
           .join('')
-      : `<p class="muted">No projects ${where ? `on ${esc(here()?.name || '')} ` : ''}yet. Add a folder above, or pick one below.</p>`;
+      : `<p class="muted">No projects yet. Add a folder above, or pick one below.</p>`;
     $$('.prow[data-id]', box).forEach((row) => {
       const id = row.dataset.id;
       const p = projectById(id);