wisp-agents 0.21.0 → 0.22.0

package/web/js/features/actions.js

@@ -17,7 +17,10 @@ import { collapse, expand, handOff, renderFeed, setFocus } from './feed.js';
 import { launchBehind } from './launcher.js';
 import { copyTaskId, mentionBox } from './mentions.js';
 import { runnerPicker } from './runner-picker.js';
-import { agentName, DEFAULT_MODE, effortsFor, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
+import { connectMachine } from './machines.js';
+import { placeMenu } from './place-menu.js';
+import { machineById, pathAt, placeName, projectById } from './places.js';
+import { agentById, agentName, DEFAULT_MODE, effortsFor, harnessesAt, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace } from './scroll.js';
 import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
 
@@ -221,15 +224,18 @@ export async function deleteSession(id) {
   });
 }
 
-// Launch the task again as a new session in the same folder: same prompt and attachments,
-// optionally edited, on whichever harness, model and thinking level you pick. The original stays.
+// Launch the task again as a new session in the same project: same prompt and attachments,
+// optionally edited, on whichever computer, harness, model and thinking level you pick. The
+// original stays. Another computer runs it in its own checkout (cloned there if need be).
 export async function rerun(id) {
   const s = S.full.get(id) || (await api(`/sessions/${id}`).catch(toastError));
   const first = s?.turns?.[0];
   if (!first?.prompt) return toast('Nothing to rerun — this session has no prompt.', { tone: 'bad' });
-  const has = (a) => S.agents.some((x) => x.id === a && x.available);
-  let agent = has(s.agent) ? s.agent : S.agents.find((x) => x.available)?.id || s.agent;
-  const models = S.agents.find((x) => x.id === agent)?.models || [];
+  let place = s.machine?.id || '';
+  const here = () => harnessesAt([place]).filter((x) => x.available);
+  const has = (a) => here().some((x) => x.id === a);
+  let agent = has(s.agent) ? s.agent : here()[0]?.id || s.agent;
+  const models = agentById(agent)?.models || [];
   let model = agent === s.agent && models.some((m) => m.id === s.model) ? s.model : savedModel(agent);
   let effort = agent === s.agent && effortsFor(agent, model).includes(s.effort) ? s.effort : savedEffort(agent, model);
   let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || DEFAULT_MODE.id;
@@ -242,13 +248,14 @@ export async function rerun(id) {
         <textarea class="rr-prompt" rows="3" spellcheck="false"></textarea>
         ${files.length ? `<div class="rr-files">${files.map((f) => `<span class="rr-file">${icon('clip')}${esc(f.name)}</span>`).join('')}</div>` : ''}
         <div class="l-bar">
+          <button class="tog-btn where-btn" data-a="place" aria-haspopup="menu" ${S.machines.length ? '' : 'hidden'}></button>
           <button class="mode-btn" data-a="mode" aria-haspopup="menu"></button>
           <button class="runner-btn" data-a="runner" title="Harness, model and thinking level" aria-haspopup="dialog"></button>
           <span class="grow"></span>
           <button class="primary sm" data-a="go">${icon('rerun')}Rerun</button>
         </div>
       </div>
-      <p class="hint">Starts a new session in <code>${esc(s.cwd)}</code>. “${esc(s.title)}” is kept as it is.</p>
+      <p class="hint rr-hint"></p>
     </div>`);
   const close = overlay(node);
   $('.close', node).onclick = close;
@@ -264,12 +271,37 @@ export async function rerun(id) {
   };
   const runnerBtn = $('[data-a="runner"]', node);
   const paintRunner = () => paintRunnerBtn(runnerBtn, agent, model, effort);
+  // Where it runs: where it ran, unless you pick another computer.
+  const placeBtn = $('[data-a="place"]', node);
+  const project = projectById(S.sessions.get(id)?.projectId);
+  const paintPlace = () => {
+    placeBtn.classList.toggle('on', !!place);
+    placeBtn.innerHTML = `${icon(place ? 'server' : 'laptop')}<span>${esc(placeName(place))}</span>${icon('chevron', 'chev')}`;
+    placeBtn.title = 'Run it on another computer';
+    const fresh = project && !pathAt(project, place);
+    $('.rr-hint', node).innerHTML = `Starts a new session in <code>${esc(project && !fresh ? pathAt(project, place) : s.cwd)}</code>${S.machines.length ? ` on <b>${esc(placeName(place))}</b>` : ''}${fresh ? `, in a checkout wisp clones there first` : ''}. “${esc(s.title)}” is kept as it is.`;
+  };
   paintMode();
   paintRunner();
+  paintPlace();
+  placeBtn.onclick = () =>
+    placeMenu(placeBtn, { title: 'Rerun on', current: place, from: s.machine?.id || '' }, (k) => {
+      place = k;
+      if (k && machineById(k)?.state === 'off') connectMachine(k);
+      // The harness has to be there too: keep it if it is, else the first one that is.
+      if (!has(agent) && here().length) {
+        agent = here()[0].id;
+        model = savedModel(agent);
+        effort = savedEffort(agent, model);
+        paintRunner();
+      }
+      paintPlace();
+      ta.focus();
+    });
   modeBtn.onclick = () => modeMenu(modeBtn, mode, (m) => ((mode = m), paintMode(), ta.focus()));
   // Picks here only apply to this rerun; the launcher's remembered defaults are left alone.
   runnerBtn.onclick = () =>
-    runnerPicker(runnerBtn, { agent, model, effort, savedModel, savedEffort, auto: true }, (a, m, e) => {
+    runnerPicker(runnerBtn, { agent, model, effort, savedModel, savedEffort, places: [place], auto: true }, (a, m, e) => {
       [agent, model, effort] = [a, m, e];
       paintRunner();
     });
@@ -279,8 +311,8 @@ export async function rerun(id) {
     if (!prompt) return ta.focus();
     close();
     try {
-      const body = { prompt, cwd: s.cwd, also: s.also?.map((a) => a.cwd), agent, mode, model, effort, attachments: files.map((f) => f.id) };
-      const next = await launchBehind({ prompt, cwd: s.cwd, runner: { agent, model, effort } }, () => api('/sessions', { method: 'POST', body }));
+      const body = { prompt, cwd: s.cwd, also: s.also?.map((a) => a.cwd), machine: place, agent, mode, model, effort, attachments: files.map((f) => f.id) };
+      const next = await launchBehind({ prompt, cwd: s.cwd, runner: { agent, model, effort }, machine: place }, () => api('/sessions', { method: 'POST', body }));
       setFocus(next.id);
     } catch (err) {
       toast(`Rerun failed: ${esc(err.message)}`, { tone: 'bad', action: { label: 'Edit again', run: () => rerun(id) } });

package/web/js/features/btw.js

@@ -0,0 +1,145 @@
+// /btw side questions on a card: "/btw did you also update the docs?" in the composer asks without
+// interrupting the run, and the answer shows on the turn it was asked during. The server answers
+// each one with a read-only run of its own (server/btw.js).
+
+import { fmtDuration } from '../blocks.js';
+import { esc, md } from '../md.js';
+import { mentionHtml } from '../mention-text.js';
+import { api } from '../core/api.js';
+import { $, $$, el, icon } from '../core/dom.js';
+import { load, S, save } from '../core/state.js';
+import { isBtw } from '../slash-text.js';
+import { toastError } from '../ui/toast.js';
+import { scheduleRefetch } from './feed.js';
+import { agentName } from './runners.js';
+
+const waiting = new Map(); // session id -> side questions sent, not yet confirmed by the server
+const gone = new Set(); // ids dismissed here, until the server has dropped them too
+let seq = 0;
+
+// Optimistic: the question is on the card at once, waiting for its answer. If the server refuses
+// it, it comes off again and restore() gives the text back.
+export async function askBtw(id, question, { attachments = [], files = [], restore } = {}) {
+  const s = S.full.get(id);
+  if (!s) return;
+  retireTip(); // they know about it now
+  const pending = { id: `pending-${++seq}`, question, status: 'running', askedAt: Date.now(), agent: s.agent, attachments: files.filter((f) => f.id).map((f) => ({ id: f.id, name: f.name, mime: f.mime })) };
+  const mine = () => waiting.get(id) || [];
+  const unwait = () => (mine().length > 1 ? waiting.set(id, mine().filter((b) => b !== pending)) : waiting.delete(id));
+  waiting.set(id, [...mine(), pending]);
+  paintBtw(id);
+  try {
+    const entry = await api(`/sessions/${id}/btw`, { method: 'POST', body: { text: question, attachments } });
+    unwait();
+    // Its node takes the real id, so it stays put instead of animating in a second time.
+    const node = $(`.btw[data-id="${pending.id}"]`, S.nodes.get(id)?.card);
+    if (node) node.dataset.id = entry.id;
+    S.nodes.get(id)?.btwSeen?.add(entry.id);
+    const cur = S.full.get(id);
+    if (cur && !cur.turns.some((t) => t.btw?.some((b) => b.id === entry.id))) (cur.turns.at(-1).btw ||= []).push(entry);
+    paintBtw(id);
+  } catch (err) {
+    unwait();
+    paintBtw(id);
+    restore?.();
+    toastError(err);
+  }
+}
+
+// The tip in a working panel, so /btw gets found: until it's been used once, or hidden with its ×.
+// Clicking it starts a /btw in the box below.
+const TIP = 'wisp.btwTipDone';
+export function btwTip(id) {
+  const s = S.full.get(id);
+  if (load(TIP, false) || !s || s.agent === 'wisp' || s.ask) return null;
+  const node = el(`
+    <span class="w-tip">
+      <button class="w-tip-go" title="Ask ${esc(agentName(s.agent))} something on the side. It keeps working, and the answer shows on this card"><span class="w-tip-k">Tip</span><code>/btw</code><span class="w-tip-t">asks without interrupting</span></button>
+      <button class="w-tip-x" title="Hide this tip" aria-label="Hide this tip">${icon('x')}</button>
+    </span>`);
+  $('.w-tip-go', node).onclick = () => {
+    const ta = $('.reply', S.nodes.get(id)?.card);
+    if (!ta) return;
+    if (!isBtw(ta.value)) ta.value = `/btw ${ta.value.trim()}`; // a draft already there becomes the question
+    ta.dispatchEvent(new Event('input'));
+    ta.focus();
+    ta.setSelectionRange(ta.value.length, ta.value.length);
+  };
+  $('.w-tip-x', node).onclick = retireTip;
+  return node;
+}
+
+function retireTip() {
+  save(TIP, true);
+  $$('.w-tip').forEach((n) => n.remove());
+}
+
+// Dismissing one that's still being answered stops its run. Gone at once; back if that fails.
+async function dismissBtw(id, btwId) {
+  gone.add(btwId);
+  paintBtw(id);
+  try {
+    await api(`/sessions/${id}/btw?item=${encodeURIComponent(btwId)}`, { method: 'DELETE' });
+    for (const t of S.full.get(id)?.turns || []) if (t.btw) t.btw = t.btw.filter((b) => b.id !== btwId);
+  } catch (err) {
+    toastError(err);
+    scheduleRefetch(id);
+  }
+  gone.delete(btwId);
+  paintBtw(id);
+}
+
+// Fill each open turn's side-question list, keeping the nodes that haven't changed: only a newly
+// asked one animates in, and an answer fades in where its "answering" line was.
+export function paintBtw(id) {
+  const s = S.full.get(id);
+  const n = S.nodes.get(id);
+  if (!s || !n?.turnNodes) return;
+  const first = !n.btwSeen; // what's already there when the card opens doesn't animate
+  n.btwSeen ||= new Set();
+  const latest = s.turns.at(-1)?.id;
+  for (const t of s.turns) {
+    const list = n.turnNodes.get(t.id)?.node.querySelector(':scope > .btw-list');
+    if (!list) continue;
+    const items = [...(t.btw || []), ...(t.id === latest ? waiting.get(id) || [] : [])].filter((b) => !gone.has(b.id));
+    const ids = new Set(items.map((b) => b.id));
+    for (const c of [...list.children]) if (!ids.has(c.dataset.id)) c.remove();
+    items.forEach((b, i) => {
+      const key = `${b.status}|${b.answer || b.error || ''}`;
+      let node = [...list.children].find((c) => c.dataset.id === b.id);
+      if (!node || node.dataset.key !== key) {
+        const next = item(s, b);
+        next.dataset.key = key;
+        if (!node && !first && !n.btwSeen.has(b.id)) next.classList.add('new');
+        if (node?.dataset.key.startsWith('running|') && b.status !== 'running') next.classList.add('landed');
+        $('.btw-x', next).onclick = () => {
+          dismissBtw(id, b.id);
+        };
+        if (node) node.replaceWith(next);
+        node = next;
+      }
+      n.btwSeen.add(b.id);
+      if (list.children[i] !== node) list.insertBefore(node, list.children[i] || null);
+    });
+  }
+}
+
+function item(s, b) {
+  const who = agentName(b.agent || s.agent);
+  const at = new Date(b.askedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const how = b.status !== 'done' ? '' : b.forked ? 'on a copy of the conversation' : 'from wisp’s record of the task';
+  const tip = [`Side question, asked ${at}`, b.answeredAt && `answered in ${fmtDuration(b.answeredAt - b.askedAt)}`, how].filter(Boolean).join(' · ');
+  const body =
+    b.status === 'running'
+      ? `<div class="btw-wait"><span class="btw-dots"><i></i><i></i><i></i></span>${esc(who)} is answering on the side · the run carries on<span class="elapsed" data-start="${b.askedAt}">${fmtDuration(Date.now() - b.askedAt)}</span></div>`
+      : b.status === 'error'
+        ? `<div class="btw-err">${icon('warn')}<span>${esc(b.error || 'No answer.')}</span></div>`
+        : `<div class="btw-a prose">${md(b.answer || '')}</div>`;
+  return el(`
+    <div class="btw st-${b.status}" data-id="${esc(b.id)}">
+      <div class="btw-q"><span class="btw-tag" title="${esc(tip)}">${icon('ask')}btw</span><span class="btw-text">${mentionHtml(esc(b.question), { link: false })}</span></div>
+      ${b.attachments?.length ? `<div class="btw-atts">${b.attachments.map((a) => `<span class="att-pill">${icon('file')}${esc(a.name)}</span>`).join('')}</div>` : ''}
+      ${body}
+      <button class="icon-btn btw-x" title="${b.status === 'running' ? 'Cancel this side question' : 'Dismiss'}">${icon('x')}</button>
+    </div>`);
+}

package/web/js/features/clones.js

@@ -33,7 +33,7 @@ const tilde = (p) => (S.config.home && p.startsWith(S.config.home) ? `~${p.slice
 // goes back to what it had picked.
 export function startClone(url, where = null) {
   const k = where || '';
-  const prev = launch.picks[k];
+  const prev = launch.picks[''];
   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.
@@ -43,13 +43,14 @@ export function startClone(url, where = null) {
     renderFeed();
     renderProjects();
   }
-  launch.picks[k] = job.id;
+  launch.picks[''] = job.id;
+  delete launch.also[''];
+  launch.project = 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;
+    if (launch.picks[''] !== job.id) return; // picked something else meanwhile
+    launch.picks[''] = id;
+    launch.project = id;
     saveLaunch();
   };
   const on = where ? ` on ${esc(machineById(where)?.name || 'the machine')}` : '';

package/web/js/features/commands.js

@@ -20,7 +20,8 @@ import { openProjects, renderProjects } from './projects.js';
 import { agentName } from './runners.js';
 import { openSettings } from './settings.js';
 import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
-import { replay } from './turns.js';
+import { transcriptOn } from './transcript.js';
+import { replay, toggleTranscript } from './turns.js';
 import { openUsage } from './usage.js';
 
 const STATE_LABEL = { running: 'Working', waiting: 'Asking', review: 'Review', done: 'Done' };
@@ -55,6 +56,7 @@ function paletteItems() {
     if (cur.groupId) items.push({ group: g, label: 'Compare runs', sub, icon: 'agent', keywords: 'vs side by side harness', run: () => compareView(id) });
     items.push({ group: g, label: 'Save as recipe…', sub, icon: 'spark', keywords: 'template reuse automation', run: () => saveAsRecipe(id) });
     items.push({ group: g, label: 'Replay presentation', sub, icon: 'replay', kbd: 'R', run: () => withCard(id, () => replay(id), { open: true }) });
+    items.push({ group: g, label: transcriptOn(id) ? 'Show the presentation' : 'Show the full transcript', sub, icon: 'transcript', kbd: 'V', keywords: 'transcript log messages steps tool calls verbose activity history', run: () => withCard(id, () => toggleTranscript(id)) });
     items.push({ group: g, label: 'Rename', sub, icon: 'pen', kbd: 'M', run: () => withCard(id, () => rename(id)) });
     items.push({ group: g, label: 'Delete session', sub, icon: 'trash', kbd: '⌫', keywords: 'remove', run: () => deleteSession(id) });
   }

package/web/js/features/composer.js

@@ -1,22 +1,28 @@
-// The composer at the bottom of an expanded card: follow-ups, answers, queued follow-ups.
+// The composer at the bottom of an expanded card: follow-ups, answers, queued follow-ups, and
+// side questions (/btw), which don't interrupt the run.
 
 import { esc } from '../md.js';
 import { mentionHtml } from '../mention-text.js';
+import { btwQuestion, isBtw } from '../slash-text.js';
 import { api } from '../core/api.js';
 import { $, el, icon } from '../core/dom.js';
-import { S } from '../core/state.js';
+import { S, saveOpen } from '../core/state.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';
-import { renderFeed, scheduleRefetch, setFocus } from './feed.js';
+import { askBtw } from './btw.js';
+import { expand, renderFeed, scheduleRefetch, setFocus } from './feed.js';
 import { feedbackCommand, isFeedback } from './feedback.js';
 import { mentionBox } from './mentions.js';
-import { placeName } from './places.js';
+import { connectMachine } from './machines.js';
+import { placeMenu } from './place-menu.js';
+import { machineById, placeName } from './places.js';
 import { runnerPicker } from './runner-picker.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 { slashMenu } from './slash.js';
 import { renderBody } from './turns.js';
 
 export function draftInto(id, text) {
@@ -39,6 +45,7 @@ export function renderDock(id) {
         <button class="icon-btn c-attach" title="Attach files">${icon('clip')}</button>
         <button class="mode-btn c-mode" aria-haspopup="menu"></button>
         <button class="c-runner" aria-haspopup="dialog"></button>
+        <button class="c-place" aria-haspopup="menu" hidden></button>
         <span class="c-hint"></span>
         <button class="ghost sm c-ship" data-a="ship" title="Commit, push and open a pull request (S)" hidden>${icon('send')}<span>Ship it</span></button>
         <button class="ghost sm c-done" data-a="done" title="Mark done (E)">${icon('done')}<span>Mark done</span></button>
@@ -50,6 +57,7 @@ export function renderDock(id) {
   n.tray = attachTray();
   comp.prepend(n.tray.node);
   const ta = mentionBox($('.reply', comp));
+  slashMenu(ta, comp);
   autosize(ta, 260);
   acceptFiles(comp, ta, n.tray);
   $('.c-attach', comp).onclick = n.tray.pick;
@@ -62,8 +70,15 @@ export function renderDock(id) {
   runnerBtn.onclick = () => {
     pickReplyRunner(id, runnerBtn);
   };
+  const placeBtn = $('.c-place', comp);
+  placeBtn.onclick = () => {
+    pickReplyPlace(id, placeBtn);
+  };
   ta.value = S.drafts.get(id) || '';
-  ta.addEventListener('input', () => S.drafts.set(id, ta.value));
+  ta.addEventListener('input', () => {
+    S.drafts.set(id, ta.value);
+    paintSide(id);
+  });
   ta.addEventListener('focus', () => setFocus(id, { scroll: false }));
   ta.addEventListener('keydown', (e) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
@@ -122,7 +137,7 @@ function pickReplyRunner(id, btn) {
   // The session's own harness offers its own model first; other harnesses their remembered one.
   const model = (a) => (a === s.agent && (agentById(a)?.models || []).some((m) => m.id === s.model) ? s.model : savedModel(a));
   const effort = (a, m) => (a === s.agent && m === s.model && effortsFor(a, m).includes(s.effort) ? s.effort : savedEffort(a, m));
-  runnerPicker(btn, { agent: cur.agent, model: cur.model, effort: cur.effort, savedModel: model, savedEffort: effort, places: [s.machine?.id || ''] }, (agent, m, e) => {
+  runnerPicker(btn, { agent: cur.agent, model: cur.model, effort: cur.effort, savedModel: model, savedEffort: effort, places: [replyPlace(id)] }, (agent, m, e) => {
     setReplyRunner(id, { agent, model: m, effort: e });
   });
 }
@@ -138,13 +153,68 @@ function paintReplyRunner(id, btn) {
   const label = run.agent === s?.agent ? model : `${harness} · ${model}`;
   btn.innerHTML = `<span class="rb-logo">${harnessLogo(run.agent)}</span>${changed ? `<span class="cr-label">${esc(label)}</span>${run.effort ? `<span class="rb-e">${esc(effortLabel(run.effort))}</span>` : ''}` : ''}`;
   const now = runnerTip(s?.agent, s?.model, s?.effort);
-  const where = s?.machine ? ` (on ${placeName(s.machine.id)})` : '';
+  const where = s?.machine || S.replyPlaces.has(id) ? ` (on ${placeName(replyPlace(id))})` : '';
   btn.title = !changed
     ? `${now}\nPick another harness or model for your next follow-up${where}`
     : run.agent !== s.agent
       ? `${runnerTip(run.agent, run.model, run.effort)}\nYour next follow-up moves this task from ${agentName(s.agent)} to ${harness}, with the conversation so far. Click to change`
       : `${runnerTip(run.agent, run.model, run.effort)}\nYour next follow-up switches from ${now}. Same conversation. Click to change`;
-  btn.hidden = !s || s.agent === 'wisp' || !!s.parentId || !harnessesAt([s.machine?.id || '']).some((a) => a.available);
+  btn.hidden = !s || s.agent === 'wisp' || !!s.parentId || !harnessesAt([replyPlace(id)]).some((a) => a.available);
+}
+
+// Where the next follow-up runs: where the task is, until the user picks another computer here.
+// Then the follow-up moves the task there, its work and history with it (server/services/move.js).
+const placeNow = (s) => s?.machine?.id || '';
+const replyPlace = (id) => (S.replyPlaces.has(id) ? S.replyPlaces.get(id) : placeNow(S.full.get(id)));
+
+function setReplyPlace(id, k) {
+  const s = S.full.get(id);
+  if (!s) return;
+  if (k === placeNow(s)) S.replyPlaces.delete(id);
+  else S.replyPlaces.set(id, k);
+  if (k && machineById(k)?.state === 'off') connectMachine(k);
+  // The harness it runs on has to be there: keep it if it is, else the first one that is.
+  const run = replyRunner(id);
+  const there = harnessesAt([k]).filter((a) => a.available);
+  if (there.length && !there.some((a) => a.id === run.agent)) {
+    const a = there[0].id;
+    const m = savedModel(a);
+    setReplyRunner(id, { agent: a, model: m, effort: savedEffort(a, m) });
+  }
+  updateDock(id);
+}
+
+function pickReplyPlace(id, btn) {
+  const s = S.full.get(id);
+  if (!s) return;
+  const busy = s.state === 'running' || s.state === 'waiting';
+  placeMenu(
+    btn,
+    {
+      title: 'Next follow-up runs on',
+      current: replyPlace(id),
+      from: placeNow(s),
+      note: 'Another computer takes the task with it: its branch, uncommitted changes and history. wisp clones the project there if it has to.',
+      locked: busy ? 'Stop the task or let it finish to move it to another computer.' : '',
+    },
+    (k) => {
+      setReplyPlace(id, k);
+      $('.reply', S.nodes.get(id)?.card)?.focus();
+    },
+  );
+}
+
+function paintReplyPlace(id, btn) {
+  const s = S.full.get(id);
+  const k = replyPlace(id);
+  const changed = !!s && S.replyPlaces.has(id);
+  btn.className = `c-place${changed ? ' changed' : ''}`;
+  btn.innerHTML = `${icon(k ? 'server' : 'laptop')}${changed ? `<span class="cr-label">${esc(placeName(k))}</span>` : ''}`;
+  btn.title = changed
+    ? `Your next follow-up moves this task from ${placeName(placeNow(s))} to ${placeName(k)}, with its work and history. Click to change`
+    : `Runs on ${placeName(k)}. Pick another computer for your next follow-up`;
+  // Only with machines to move to; subagents go where their lead is, the tour nowhere.
+  btn.hidden = !s || !S.machines.length || s.agent === 'wisp' || !!s.parentId;
 }
 
 export function updateDock(id) {
@@ -164,16 +234,19 @@ export function updateDock(id) {
         : `Answer ${name}…`
       : s.state === 'running'
         ? queueing()
-          ? `Queue a follow-up — sent when ${name} finishes`
-          : `Steer ${name} — interrupts and sends now`
-        : s.state === 'done'
-          ? next !== name
-            ? `Follow up with ${next} to reopen…`
-            : 'Follow up to reopen…'
-          : `Follow up with ${next}…`;
-  $('.c-hint', n.card).innerHTML = s.queue?.length ? `${s.queue.length} queued` : '';
+          ? `Queue a follow-up — sent when ${name} finishes. /btw asks now`
+          : `Steer ${name} — interrupts and sends now. /btw asks without interrupting`
+        : S.replyPlaces.has(id)
+          ? `Follow up on ${replyPlace(id) ? placeName(replyPlace(id)) : 'this computer'} with ${next}…`
+          : s.state === 'done'
+            ? next !== name
+              ? `Follow up with ${next} to reopen…`
+              : 'Follow up to reopen…'
+            : `Follow up with ${next}…`;
+  paintSide(id);
   paintReplyMode(id, $('.c-mode', n.card));
   paintReplyRunner(id, $('.c-runner', n.card));
+  paintReplyPlace(id, $('.c-place', n.card));
   renderQueued(s, $('.c-queued', n.card), name);
   const q = $('.c-queue', n.card);
   q.hidden = tour || s.state !== 'running';
@@ -183,6 +256,23 @@ export function updateDock(id) {
     : `Sending now: follow-ups interrupt ${name}. Click to queue them instead.`;
 }
 
+// "/btw …" in the box: a side question, so the composer says it won't interrupt anything, and the
+// mode and harness pickers (which are for the next follow-up) step back.
+function paintSide(id) {
+  const s = S.full.get(id);
+  const comp = $('.composer', S.nodes.get(id)?.card);
+  if (!s || !comp) return;
+  const side = isBtw($('.reply', comp).value);
+  const live = s.state === 'running' || s.state === 'waiting';
+  comp.classList.toggle('is-btw', side);
+  $('.send', comp).title = side ? 'Ask on the side (Enter): nothing is interrupted' : 'Send (Enter · Shift+Enter for newline)';
+  $('.c-hint', comp).innerHTML = side
+    ? `<span class="c-side">Side question</span> · ${live ? `${esc(agentName(s.agent))} keeps working` : 'no new turn'}`
+    : s.queue?.length
+      ? `${s.queue.length} queued`
+      : '';
+}
+
 // Follow-ups waiting their turn, shown above the composer so it's clear what goes out next.
 function renderQueued(s, list, name) {
   const key = (s.queue || []).map((q) => `${q.id}${q.run ? `:${q.run.agent}/${q.run.model}` : ''}`).join();
@@ -245,6 +335,21 @@ export async function sendReply(id, text) {
   text = (text || '').trim();
   if (!s || !text) return;
   const ta = n && $('.reply', n.card);
+  // A side question: answered next to the run, so nothing is interrupted, queued or switched.
+  if (isBtw(text)) {
+    const question = btwQuestion(text);
+    if (!question) return toast('Type your question after /btw, like “/btw did you update the docs too?”');
+    if (n?.tray?.busy) toast('Waiting for uploads…');
+    const attachments = n?.tray ? await n.tray.ids() : [];
+    if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
+    S.drafts.delete(id);
+    const files = n?.tray?.take() || [];
+    const restore = () => {
+      if (ta?.isConnected && !ta.value) ((ta.value = text), ta.dispatchEvent(new Event('input')));
+      n?.tray?.restore(files);
+    };
+    return askBtw(id, question, { attachments, files, restore });
+  }
   if (isFeedback(text)) {
     if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
     S.drafts.delete(id);
@@ -254,6 +359,8 @@ export async function sendReply(id, text) {
   const attachments = n?.tray ? await n.tray.ids() : [];
   const mode = S.replyModes.get(id);
   const run = S.replyRunners.get(id);
+  const place = S.replyPlaces.has(id) ? S.replyPlaces.get(id) : undefined;
+  if (place !== undefined) return moveWithReply(id, text, { attachments, mode, run, place });
   // An answer goes to the run that asked; a new mode or harness needs a new run, so that's a follow-up.
   const answering = !!s.ask && !attachments.length && !mode && !run;
   // Optimistic: the composer empties and the card goes to Working before the server answers
@@ -282,10 +389,47 @@ export async function sendReply(id, text) {
   }
 }
 
+// A follow-up on another computer: the task moves there and carries on as a new session (the old
+// one is archived). The card says it's moving at once; the new card takes its place, open.
+async function moveWithReply(id, text, { attachments, mode, run, place }) {
+  const n = S.nodes.get(id);
+  const ta = n && $('.reply', n.card);
+  if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
+  S.drafts.delete(id);
+  for (const m of [S.replyModes, S.replyRunners, S.replyPlaces]) m.delete(id);
+  const files = n?.tray?.take();
+  const undo = startOptimistic(id, text, files, { mode, run, live: `Moving to ${placeName(place)}` });
+  try {
+    const r = await api(`/sessions/${id}/reply`, { method: 'POST', body: { text, attachments, mode, ...run, machine: place } });
+    const next = r.session;
+    S.sessions.set(next.id, next);
+    const old = S.sessions.get(id);
+    if (old) S.sessions.set(id, { ...old, state: 'review', live: '', archived: true, movedTo: { id: next.id, place: placeName(place) } });
+    S.full.delete(id);
+    const wasOpen = S.open.delete(id);
+    saveOpen();
+    keepInPlace(feedAnchor(), renderFeed);
+    if (wasOpen) expand(next.id);
+    setFocus(next.id);
+    toast(`Moved to <b>${esc(place ? placeName(place) : 'this computer')}</b> with its work and history`);
+  } catch (err) {
+    undo?.();
+    if (ta?.isConnected && !ta.value) ((ta.value = text), ta.dispatchEvent(new Event('input')));
+    if (mode && !S.replyModes.has(id)) setReplyMode(id, mode);
+    if (run && !S.replyRunners.has(id)) setReplyRunner(id, run);
+    if (!S.replyPlaces.has(id)) {
+      S.replyPlaces.set(id, place);
+      updateDock(id);
+    }
+    n?.tray?.restore(files);
+    toastError(err);
+  }
+}
+
 // Show a follow-up as started right away: the card moves to Working with the prompt as a live
 // turn. Only when it will start now, not when it queues or interrupts a run already working.
 // Returns an undo for a failed send, or null when nothing changed.
-export function startOptimistic(id, text, files, { answering, mode, run }) {
+export function startOptimistic(id, text, files, { answering, mode, run, live: label }) {
   const full = S.full.get(id);
   const sum = S.sessions.get(id);
   if (!full || !sum) return null;
@@ -296,7 +440,7 @@ export function startOptimistic(id, text, files, { answering, mode, run }) {
   if (mode) turn.mode = mode;
   if (run) Object.assign(turn, run);
   const nextFull = { ...full, state: 'running', ask: null, turns: answering ? full.turns : [...full.turns, turn], ...(mode && { mode }), ...run };
-  const nextSum = { ...sum, state: 'running', live: answering ? 'Picking up your answer' : run && run.agent !== full.agent ? `Handing over to ${agentName(run.agent)}` : 'Starting up', updatedAt: now, ...(mode && { mode }), ...run };
+  const nextSum = { ...sum, state: 'running', live: label || (answering ? 'Picking up your answer' : run && run.agent !== full.agent ? `Handing over to ${agentName(run.agent)}` : 'Starting up'), updatedAt: now, ...(mode && { mode }), ...run };
   const apply = (f, sm) => {
     S.full.set(id, f);
     S.sessions.set(id, sm);

package/web/js/features/feed.js

@@ -359,7 +359,7 @@ export function collapse(id) {
   renderFeedHead(groups().needs, groups().working);
 }
 
-async function fetchFull(id) {
+export async function fetchFull(id) {
   const s = await api(`/sessions/${id}`).catch(() => null);
   if (!s) {
     S.open.delete(id);

package/web/js/features/keys.js

@@ -10,7 +10,7 @@ import { collapse, collapseAll, expand, feedIds, setFocus, toggle } from './feed
 import { focusLauncher } from './launcher.js';
 import { backToTop } from './scroll.js';
 import { shipDialog, shippable } from './ship.js';
-import { replay } from './turns.js';
+import { replay, toggleTranscript } from './turns.js';
 
 export function onKey(e) {
   // ⌘K / Ctrl+K works from anywhere, even mid-sentence in the launcher.
@@ -69,6 +69,7 @@ export function onKey(e) {
   else if (k === 'r' && e.shiftKey && id) rerun(id);
   else if (k === 's' && id && shippable(S.sessions.get(id))) shipDialog(id);
   else if (k === 'r' && id) replay(id);
+  else if (k === 'v' && id) toggleTranscript(id);
   else if (k === '/' && id) {
     e.preventDefault();
     const focusReply = () => $('.reply', S.nodes.get(id)?.card)?.focus();