wisp-agents 0.17.0 → 0.20.0

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/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/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

@@ -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,8 @@ 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) : ''}
+      ${autoPill(s)}
+      ${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>
@@ -218,6 +219,28 @@ function renderHead(n, s) {
     </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);
@@ -233,7 +256,8 @@ 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) : ''}
+      ${autoPill(s)}
+      ${s.shipping ? shipPill(s) : s.pr ? prPill(s.pr, 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>

package/web/js/features/launcher.js

@@ -12,12 +12,14 @@ 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';
@@ -25,16 +27,27 @@ import { agentName, agentsAt, DEFAULT_MODE, effortLabel, effortsFor, harnessesAt
 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;
 }
 
@@ -44,6 +57,12 @@ export function renderLauncher() {
   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>
@@ -79,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) => {
@@ -230,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);
@@ -250,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);
     }
@@ -264,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 },
           }),
         ),
       );
@@ -291,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;
@@ -321,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;
@@ -332,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]');
@@ -358,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');
@@ -486,7 +605,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 }) {
+function addPending(prompt, { project: p, m }, { agent, model, effort }, live = 'Starting up') {
   const id = `pending-${++pendingSeq}`;
   const line = plain(prompt).split('\n')[0].replace(/\s+/g, ' ');
   const now = Date.now();
@@ -498,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,10 +4,10 @@ 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';
+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,14 +34,9 @@ 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]) !== 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 +61,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');
   });