wisp-agents 0.16.0 → 0.18.0

package/web/js/features/clones.js

@@ -0,0 +1,79 @@
+// Repos being cloned. Clone in the Projects dialog hands the repo off here and the dialog closes:
+// the launcher picks it at once (a spinner chip) so you can write the task while it clones, and a
+// launch into it waits for the clone. Success swaps the chip for the real project.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { launch, S, save, saveLaunch } from '../core/state.js';
+import { toast } from '../ui/toast.js';
+import { renderFeed } from './feed.js';
+import { renderLaunchChips } from './launcher.js';
+import { loadConfig } from './live.js';
+import { machineById, projectById } from './places.js';
+import { renderProjects } from './projects.js';
+
+// A pasted repo URL, which the server clones (server/git.js parseRepo has the full rules), vs a path.
+export const isRepo = (s) => /^((https?|ssh|git):\/\/|[\w.-]+@[\w.-]+:|(www\.)?github\.com\/)/i.test(String(s).trim());
+export const repoLabel = (s) =>
+  String(s)
+    .trim()
+    .replace(/^((https?|ssh):\/\/)?([\w.-]+@)?(www\.)?github\.com[/:]([^/]+\/[^/#?]+).*$/i, '$5')
+    .replace(/\.git$|\/+$/i, '');
+export const repoName = (s) => repoLabel(s).split(/[/:]/).pop();
+
+export const clones = []; // { id, url, where, name, label, promise }
+export const cloneById = (id) => clones.find((c) => c.id === id);
+let seq = 0;
+
+const tilde = (p) => (S.config.home && p.startsWith(S.config.home) ? `~${p.slice(S.config.home.length)}` : p);
+
+// Start cloning `url` on `where` (a machine id, or null for this computer) and point the launcher
+// at it. job.promise resolves with the project, or rejects (already toasted) and the launcher
+// goes back to what it had picked.
+export function startClone(url, where = null) {
+  const k = where || '';
+  const prev = launch.picks[k];
+  const job = { id: `clone-${++seq}`, url, where: where || null, name: repoName(url), label: repoLabel(url) };
+  clones.push(job);
+  // A feed filtered to another project would pull the launcher back to that project.
+  if (S.filter !== 'all') {
+    S.filter = 'all';
+    save('wisp.filter', S.filter);
+    renderFeed();
+    renderProjects();
+  }
+  launch.picks[k] = job.id;
+  if (!launch.where.includes(k)) launch.where = [k];
+  if (k === launch.where[0]) launch.project = job.id;
+  const repick = (id) => {
+    if (launch.picks[k] !== job.id) return; // picked something else meanwhile
+    launch.picks[k] = id;
+    if (k === launch.where[0]) launch.project = id;
+    saveLaunch();
+  };
+  const on = where ? ` on ${esc(machineById(where)?.name || 'the machine')}` : '';
+  job.promise = api('/projects', { method: 'POST', body: { repo: url, ...(where && { machine: where }) } })
+    .then(
+      async (proj) => {
+        await loadConfig();
+        repick(proj.id);
+        toast(proj.cloned?.existed ? `<b>${esc(proj.name)}</b> was already cloned at ${esc(tilde(proj.path))}: added it` : `Cloned <b>${esc(proj.name)}</b>${on}${where ? '' : ` into ${esc(tilde(proj.path))}`}`);
+        return proj;
+      },
+      (err) => {
+        repick(projectById(prev) ? prev : null);
+        toast(esc(err.message), { tone: 'bad', timeout: 8000 });
+        throw Object.assign(err, { shown: true });
+      },
+    )
+    .finally(() => {
+      clones.splice(clones.indexOf(job), 1);
+      renderLaunchChips();
+      bus.emit('clones');
+    });
+  job.promise.catch(() => {}); // the launcher or dialog may not be waiting on it
+  renderLaunchChips();
+  bus.emit('clones');
+  return job;
+}

package/web/js/features/compare.js

@@ -2,6 +2,7 @@
 
 import { countChanges, fmtDuration, renderPresentation } from '../blocks.js';
 import { esc } from '../md.js';
+import { mentionHtml } from '../mention-text.js';
 import { api } from '../core/api.js';
 import { $, el, icon } from '../core/dom.js';
 import { STATUS_LABEL } from '../core/format.js';
@@ -37,7 +38,7 @@ export async function compareView(id) {
   const node = el(`
     <div class="modal compare-modal">
       <header><h2>Compare</h2><button class="icon-btn close">${icon('x')}</button></header>
-      <p class="cmp-prompt">${esc(fulls[0]?.turns[0]?.prompt || '')}</p>
+      <p class="cmp-prompt">${mentionHtml(esc(fulls[0]?.turns[0]?.prompt || ''))}</p>
       <div class="cmp-grid" style="--n:${fulls.length}"></div>
     </div>`);
   const close = overlay(node);

package/web/js/features/composer.js

@@ -1,6 +1,7 @@
 // The composer at the bottom of an expanded card: follow-ups, answers, queued follow-ups.
 
 import { esc } from '../md.js';
+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';
@@ -10,9 +11,10 @@ import { toggleDone } from './actions.js';
 import { acceptFiles, attachTray, autosize } from './attachments.js';
 import { renderFeed, scheduleRefetch, setFocus } from './feed.js';
 import { feedbackCommand, isFeedback } from './feedback.js';
+import { mentionBox } from './mentions.js';
 import { placeName } from './places.js';
 import { runnerPicker } from './runner-picker.js';
-import { agentById, agentName, effortLabel, effortsFor, harnessesAt, harnessLogo, modeMenu, MODES, runnerTip, savedEffort, savedModel } from './runners.js';
+import { agentById, agentName, DEFAULT_MODE, effortLabel, effortsFor, harnessesAt, harnessLogo, modeMenu, MODES, runnerTip, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace, watching } from './scroll.js';
 import { shipDialog } from './ship.js';
 import { renderBody } from './turns.js';
@@ -47,7 +49,7 @@ export function renderDock(id) {
   dock.append(comp);
   n.tray = attachTray();
   comp.prepend(n.tray.node);
-  const ta = $('.reply', comp);
+  const ta = mentionBox($('.reply', comp));
   autosize(ta, 260);
   acceptFiles(comp, ta, n.tray);
   $('.c-attach', comp).onclick = n.tray.pick;
@@ -78,7 +80,7 @@ export function renderDock(id) {
 
 // The mode the next follow-up runs in: the session's own until the user picks another here.
 // The pick goes out with that follow-up and stays from then on.
-const replyMode = (id) => S.replyModes.get(id) || S.full.get(id)?.mode || 'edits';
+const replyMode = (id) => S.replyModes.get(id) || S.full.get(id)?.mode || DEFAULT_MODE.id;
 
 function setReplyMode(id, mode) {
   if (mode === S.full.get(id)?.mode) S.replyModes.delete(id);
@@ -88,10 +90,10 @@ function setReplyMode(id, mode) {
 
 function paintReplyMode(id, btn) {
   const s = S.full.get(id);
-  const m = MODES.find((x) => x.id === replyMode(id)) || MODES[1];
+  const m = MODES.find((x) => x.id === replyMode(id)) || DEFAULT_MODE;
   const from = s && S.replyModes.has(id) && MODES.find((x) => x.id === s.mode);
   btn.className = `mode-btn c-mode m-${m.id}${from ? ' changed' : ''}`;
-  btn.innerHTML = `${icon(m.icon)}${m.id === 'edits' && !from ? '' : `<span>${m.label}</span>`}`;
+  btn.innerHTML = `${icon(m.icon)}${m === DEFAULT_MODE && !from ? '' : `<span>${m.label}</span>`}`;
   btn.title = from
     ? `${m.label}: ${m.hint}\nYour next follow-up switches this task from ${from.label} to ${m.label}. Shift+Tab to switch`
     : `${m.label}: ${m.hint}\nPick another mode for your next follow-up. Shift+Tab to switch`;
@@ -157,7 +159,9 @@ export function updateDock(id) {
   ta.placeholder = tour
     ? 'This is the tour — launch a real wisp from the box at the top'
     : s.ask
-      ? `Answer ${name}…`
+      ? s.ask.permission
+        ? `Or tell ${name} what to do instead (denies this call)…`
+        : `Answer ${name}…`
       : s.state === 'running'
         ? queueing()
           ? `Queue a follow-up — sent when ${name} finishes`
@@ -189,7 +193,7 @@ function renderQueued(s, list, name) {
     const li = el(`
       <li class="cq">
         <span class="cq-tag">${i === 0 ? `Next · after ${esc(name)} finishes` : `Queued #${i + 1}`}${q.run ? ` · on ${esc(runnerTip(q.run.agent, q.run.model, ''))}` : ''}</span>
-        <span class="cq-text">${esc(q.text)}</span>
+        <span class="cq-text">${mentionHtml(esc(q.text), { link: false })}</span>
         <button class="att-x" title="Cancel this follow-up">${icon('x')}</button>
       </li>`);
     const cancel = () => {

package/web/js/features/feed.js

@@ -13,7 +13,7 @@ import { machinePill } 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 } from './ship.js';
+import { prPill, shipPill } from './ship.js';
 import { teamStack } from './team.js';
 import { renderBody } from './turns.js';
 
@@ -208,7 +208,7 @@ function renderHead(n, s) {
     <span class="it-side">
       ${pill}
       ${s.queued ? `<span class="q-queued" title="Follow-ups queued">+${s.queued}</span>` : ''}
-      ${s.pr ? prPill(s.pr) : ''}
+      ${s.shipping ? shipPill(s) : s.pr ? prPill(s.pr, 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>
@@ -233,7 +233,7 @@ function renderRunHead(n, s, { open, live, pill }) {
       ${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>` : ''}
       ${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.pr ? prPill(s.pr) : ''}
+      ${s.shipping ? shipPill(s) : s.pr ? prPill(s.pr, s.conflictFix) : ''}
       <span class="q-time">${ago(s.updatedAt)}</span>
       ${icon('chevron', 'chev')}
     </span>`;

package/web/js/features/launcher.js

@@ -2,6 +2,7 @@
 // machines, a project in each), on what, and shows a placeholder card until the server answers.
 
 import { esc } from '../md.js';
+import { plain } from '../mention-text.js';
 import { api } from '../core/api.js';
 import * as bus from '../core/bus.js';
 import { $, $$, el, icon } from '../core/dom.js';
@@ -11,37 +12,57 @@ import { popover } from '../ui/popover.js';
 import { toast, toastError } from '../ui/toast.js';
 import { acceptFiles, attachTray, autosize } from './attachments.js';
 import { openAutomations, recipeParams, runRecipe } from './automations.js';
+import { cloneById, clones } from './clones.js';
 import { renderFeed } from './feed.js';
 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 { projectList } from './project-list.js';
 import { openProjects } from './projects.js';
 import { runnerPicker } from './runner-picker.js';
 import { needsSetup, nudgeSetup, renderSetup } from './setup.js';
-import { agentName, agentsAt, effortLabel, effortsFor, harnessesAt, harnessLogo, MAX_RUNNERS, modeMenu, MODES, paintRunnerBtn, runnerTip, savedEffort, savedModel } from './runners.js';
+import { agentName, agentsAt, DEFAULT_MODE, effortLabel, effortsFor, harnessesAt, harnessLogo, MAX_RUNNERS, modeMenu, MODES, paintRunnerBtn, runnerTip, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace, stage, topInset } from './scroll.js';
 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]));
+// Project chips in the "in" row, at most, before the rest fold into "+N".
+const CHIPS = 5;
+
+// Only a change of feed filter moves the launcher, so a "No folder" pick survives re-renders.
+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).
-  const f = S.filter !== 'all' && projectById(S.filter);
+  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 (!projectsAt(k).some((p) => p.id === launch.picks[k])) launch.picks[k] = projectsAt(k)[0]?.id || null;
+  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;
 }
 
 export function renderLauncher() {
   const box = $('#launcher');
-  const mode = S.config.defaults.mode || 'edits';
+  const mode = S.config.defaults.mode || DEFAULT_MODE.id;
   const here = harnessesAt(launch.where, { auto: true });
   const chosen = here.find((a) => a.id === (S.config.defaults.agent || 'auto'));
   let agent = chosen?.available ? chosen : here.find((a) => a.available) || chosen || here[0];
+  // Rendered over what's there (index.html's first paint, or fresh settings or harnesses): what
+  // was typed, and the caret if you're typing, carry over.
+  const old = $('#prompt', box);
+  const typing = old && document.activeElement === old && [old.selectionStart, old.selectionEnd];
+  if (old) S.drafts.set('home', old.value);
+  box.classList.remove('skel');
   box.innerHTML = `
     <div class="l-projects"></div>
     <div class="l-setup" hidden></div>
@@ -63,9 +84,9 @@ export function renderLauncher() {
   renderLaunchChips();
   renderSetup();
 
-  const ta = $('#prompt', box);
+  const ta = mentionBox($('#prompt', box));
   const tray = attachTray();
-  ta.before(tray.node);
+  ta.parentNode.before(tray.node); // before the mention box's wrapper
   acceptFiles(box, ta, tray);
   autosize(ta);
   ta.value = S.drafts.get('home') || '';
@@ -77,6 +98,7 @@ export function renderLauncher() {
   ta.addEventListener('focus', hint);
   ta.addEventListener('blur', hint);
   hint();
+  if (typing) (ta.focus(), ta.setSelectionRange(...typing));
   // Docked and folded to one line, a click anywhere on it opens it up for typing. A property, not
   // a listener: the launcher re-renders in place, and each render would add another.
   box.onmousedown = (e) => {
@@ -88,14 +110,14 @@ export function renderLauncher() {
   $('#whereBtn', box).onclick = (e) => whereMenu(e.currentTarget);
   paintWhereBtn();
 
-  // Mode is set-and-forget, so it's one small button: just an icon on the default (Edits),
-  // spelled out when it's Plan or Full auto so you can't miss it.
+  // Mode is set-and-forget, so it's one small button: just an icon on the default (Full auto),
+  // spelled out when it's Plan or Edits so you can't miss it.
   let curMode = mode;
   const modeBtn = $('#mode', box);
   const paintMode = () => {
-    const m = MODES.find((x) => x.id === curMode) || MODES[1];
+    const m = MODES.find((x) => x.id === curMode) || DEFAULT_MODE;
     modeBtn.className = `mode-btn m-${m.id}`;
-    modeBtn.innerHTML = `${icon(m.icon)}${m.id === 'edits' ? '' : `<span>${m.label}</span>`}`;
+    modeBtn.innerHTML = `${icon(m.icon)}${m === DEFAULT_MODE ? '' : `<span>${m.label}</span>`}`;
     modeBtn.title = `${m.label}: ${m.hint}\nShift+Tab to switch`;
   };
   const setMode = (id) => {
@@ -228,8 +250,8 @@ 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: projectById(launch.picks[k]) }));
-    const unset = targets.find((t) => !t.project);
+    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 });
     const off = targets.find((t) => t.m && t.m.state !== 'online');
     if (off) return offlineToast(off.k);
@@ -248,12 +270,13 @@ export function renderLauncher() {
     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));
+    // 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}`));
     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.id !== S.filter)) {
+    if (S.filter !== 'all' && targets.some((t) => t.project?.scratch || t.project?.id !== S.filter)) {
       S.filter = 'all';
       save('wisp.filter', S.filter);
     }
@@ -262,13 +285,20 @@ export function renderLauncher() {
     showLaunched(btn, ghost);
     ta.focus();
     try {
+      for (const [i, t] of targets.entries()) {
+        if (!t.clone) continue;
+        const p = (t.project = await t.clone.promise);
+        // Now a real project, so the live session can replace the card (dropPending).
+        const card = S.sessions.get(pending[i]);
+        if (card) Object.assign(card, { projectId: p.id, project: p.name, cwd: p.path, color: p.color, live: 'Starting up' }), renderFeed();
+      }
       // 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: 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, 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 },
           }),
         ),
       );
@@ -289,7 +319,10 @@ export function renderLauncher() {
     } catch (err) {
       for (const id of pending) S.sessions.delete(id);
       renderFeed();
-      toastError(err);
+      if (!err.shown) return toastError(err);
+      // The clone failed (its toast says why): the task goes back in the box.
+      if (!ta.value) ((ta.value = prompt), ta.dispatchEvent(new Event('input')));
+      tray.restore(files);
     }
   };
   $('#launch', box).onclick = go;
@@ -319,6 +352,12 @@ export function renderLauncher() {
   });
 }
 
+// No folder everywhere picked: 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);
+}
+
 export function renderLaunchChips() {
   const box = $('#launcher .l-projects');
   if (!box) return;
@@ -330,23 +369,70 @@ export function renderLaunchChips() {
     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>` : '';
-    const chips = list.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 add = list.length
-      ? `<button class="lp-chip add" data-add="${k}" title="Another folder${k ? ` on ${esc(placeName(k))}` : ''}">${icon('folder')}${multi ? '' : 'Other folder…'}</button>`
-      : `<button class="lp-chip add" data-add="${k}">${icon('folder')}${k ? `Pick a project on ${esc(placeName(k))}…` : 'Choose a project folder…'}</button>`;
-    return `<span class="lp-group">${label}${chips}${add}</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>`;
   };
   box.innerHTML = `<span class="l-in">in</span>${launch.where.map(group).join('')}`;
+  fitChips(box);
+  fitRow ??= new ResizeObserver(([e]) => {
+    if (e.contentRect.width === fitRow.w) return; // its own folding only changes the height
+    fitRow.w = e.contentRect.width;
+    fitChips(e.target);
+  });
+  fitRow.observe(box);
+  paintScratch();
+  const pick = (k, id) => {
+    launch.picks[k] = id;
+    if (k === launch.where[0]) launch.project = id;
+    saveLaunch();
+    paintScratch();
+    renderLaunchRecipes();
+  };
   box.onclick = (e) => {
     const chip = e.target.closest('.lp-chip[data-id]');
     if (chip) {
-      launch.picks[chip.dataset.k] = chip.dataset.id;
-      if (chip.dataset.k === launch.where[0]) launch.project = chip.dataset.id;
-      saveLaunch();
+      pick(chip.dataset.k, chip.dataset.id);
       $$(`.lp-chip[data-k="${chip.dataset.k}"]`, box).forEach((x) => x.classList.toggle('on', x === chip));
-      renderLaunchRecipes();
       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)}`,
+        extras: [
+          { id: NO_FOLDER, label: 'No folder', icon: 'spark' },
+          { id: '+add', label: k ? `Another folder on ${placeName(k)}…` : 'Other folder…', icon: 'folder' },
+        ],
+        onPick: (id) => {
+          if (id === '+add') return openProjects({ focusAdd: true, machine: k || null });
+          pick(k, id);
+          renderLaunchChips(); // the pick joins the chips
+          $('#prompt')?.focus();
+        },
+      });
+    }
     const add = e.target.closest('[data-add]');
     if (add) openProjects({ focusAdd: true, machine: add.dataset.add || null });
     const conn = e.target.closest('[data-connect]');
@@ -356,6 +442,41 @@ export function renderLaunchChips() {
   paintWhereBtn();
 }
 
+// One row, however many projects: on a single place, the least recent chips (never the pick, and
+// at least one) fold into "+N" until the row stops wrapping. "+N" counts what isn't a chip.
+let fitRow;
+function fitChips(box) {
+  for (const g of $$('.lp-group', box)) {
+    const chips = $$('.lp-chip[data-id]:not(.none):not(.cloning)', g);
+    const more = $('.lp-chip.more', g);
+    chips.forEach((c) => (c.hidden = false));
+    const paint = () => {
+      const n = Number(more?.dataset.total) - chips.filter((c) => !c.hidden).length;
+      if (!more) return;
+      more.hidden = !n;
+      $('.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);
+      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);
+    };
+    for (const c of chips.filter((x) => !x.classList.contains('on')).reverse()) {
+      if (!wraps() || chips.filter((x) => !x.hidden).length <= 1) break;
+      c.hidden = true;
+      paint();
+    }
+    // "+1" is no shorter than the one chip it would stand for: keep the chip, let the row wrap.
+    const folded = chips.filter((c) => c.hidden);
+    if (folded.length && Number(more?.dataset.total) - chips.length + folded.length === 1) {
+      folded.forEach((c) => (c.hidden = false));
+      paint();
+    }
+  }
+}
+
 // "Run on": this computer and/or machines. The button says where; its menu picks one or several.
 function paintWhereBtn() {
   const b = $('#whereBtn');
@@ -484,9 +605,9 @@ 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 }) {
+function addPending(prompt, { project: p, m }, { agent, model, effort }, live = 'Starting up') {
   const id = `pending-${++pendingSeq}`;
-  const line = prompt.split('\n')[0].replace(/\s+/g, ' ');
+  const line = plain(prompt).split('\n')[0].replace(/\s+/g, ' ');
   const now = Date.now();
   S.sessions.set(id, {
     id,
@@ -496,11 +617,12 @@ function addPending(prompt, { project: p, m }, { agent, model, effort }) {
     model,
     effort,
     cwd: p.path,
+    scratch: p.scratch,
     project: p.name,
     projectId: p.id,
     color: p.color || 'slate',
     state: 'running',
-    live: 'Starting up',
+    live,
     createdAt: now,
     updatedAt: now,
     machine: m ? { id: m.id, name: m.name, target: m.target } : null,

package/web/js/features/live.js

@@ -4,7 +4,7 @@ import { esc } from '../md.js';
 import { api } from '../core/api.js';
 import * as bus from '../core/bus.js';
 import { $ } from '../core/dom.js';
-import { S, saveOpen } from '../core/state.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';
@@ -41,7 +41,7 @@ export function connect() {
       renderFeed();
     });
     if (prev?.state !== s.state || prev?.queued !== s.queued) scheduleRefetch(s.id);
-    if (JSON.stringify([prev?.pr, prev?.toShip, prev?.state]) !== JSON.stringify([s.pr, s.toShip, s.state])) renderPrStrip(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);
   });
   es.addEventListener('activity', (e) => onActivity(JSON.parse(e.data)));
   es.addEventListener('turn', (e) => scheduleRefetch(JSON.parse(e.data).sessionId));
@@ -66,7 +66,7 @@ export function connect() {
   });
   // A harness was installed from wisp (maybe in another tab): fetch the new list.
   es.addEventListener('agents', async () => {
-    S.agents = await api('/agents').catch(() => S.agents);
+    setAgents(await api('/agents').catch(() => S.agents));
     $('#launcher')?.placesChanged?.();
     bus.emit('agents');
   });