wisp-agents 0.20.0 → 0.22.0

package/web/js/features/turns.js

@@ -10,16 +10,16 @@ import { S } from '../core/state.js';
 import { overlay } from '../ui/overlay.js';
 import { toastError } from '../ui/toast.js';
 import { execAction, moreMenu, openInEditor, revertFile, rollbackTurn, takeOver, toggleDone } from './actions.js';
+import { btwTip, paintBtw } from './btw.js';
 import { draftInto, renderDock, sendReply, startOptimistic, updateDock } from './composer.js';
-import { scheduleRefetch } from './feed.js';
+import { expand, fetchFull, renderFeed, scheduleRefetch, setFocus } from './feed.js';
 import { feedbackOn, rateTurn, whyForm } from './feedback.js';
 import { projectById } from './places.js';
 import { agentName, DEFAULT_MODE, effortLabel, modelBadge, MODES } from './runners.js';
-import { scrollByPx, watching } from './scroll.js';
+import { scrollByPx, topInset, watching } from './scroll.js';
 import { renderPrStrip, shipDialog } from './ship.js';
 import { copiesOf, memberLabel, renderSubs, subKey, teamLiveHtml, teamSize } from './team.js';
-
-const KIND_ICON = { check: 'check', read: 'read', edit: 'pen', run: 'terminal', search: 'search', web: 'web', agent: 'agent', plan: 'plan', tool: 'tool', text: 'text', error: 'warn', ask: 'ask', answer: 'check', wait: 'ask', background: 'clock' };
+import { appendStep, KIND_ICON, pickView, renderLiveTranscript, renderTranscript, sameStep, transcriptOn, updateStep } from './transcript.js';
 
 export function ctxFor(s, turn, isLatest) {
   return {
@@ -34,6 +34,7 @@ export function ctxFor(s, turn, isLatest) {
     revertFile: (file, restore) => revertFile(s.id, turn.id, file, restore),
     exec: (command, key) => execAction(s.id, turn.id, command, key),
     approve: (allow) => approveBlocked(s, turn, allow),
+    refresh: () => fetchFull(s.id).then(() => S.full.get(s.id)),
   };
 }
 
@@ -67,6 +68,7 @@ export function renderBody(id, { fresh }) {
         <div class="it-bar">
           <div class="it-meta"></div>
           <div class="it-actions">
+            <button class="ghost xs tx-toggle" data-a="transcript" aria-pressed="false">${icon('transcript')}<span>Transcript</span></button>
             <button class="ghost xs" data-a="replay" title="Replay presentation (R)">${icon('replay')}</button>
             <button class="ghost xs" data-a="takeover" title="Take over in your terminal (T)">${icon('terminal')}</button>
             <button class="ghost xs" data-a="ship" title="Commit, push and open a pull request (S)" hidden>${icon('send')}<span>Ship it</span></button>
@@ -83,11 +85,13 @@ export function renderBody(id, { fresh }) {
     n.body = body;
     $('.it-bar', body).addEventListener('click', (e) => {
       const a = e.target.closest('[data-a]')?.dataset.a;
+      if (a === 'transcript') toggleTranscript(id);
       if (a === 'replay') replay(id);
       if (a === 'takeover') takeOver(id);
       if (a === 'ship') shipDialog(id);
       if (a === 'done') toggleDone(id);
       if (a === 'more') moreMenu(id, e.target.closest('button'));
+      if (a === 'moved') openMoved(S.full.get(id)?.movedTo?.id);
     });
     $('.earlier', body).onclick = () => ((n.showAll = true), renderBody(id, { fresh: false }));
     renderDock(id);
@@ -97,14 +101,17 @@ export function renderBody(id, { fresh }) {
   const proj = projectById(summary.projectId);
   // The head already shows the harness, model and project, and the task head has Compare. This bar
   // says how the run was set up: a mode worth noticing (Plan or Edits, as on the launcher), the
-  // branch, and what launched it.
+  // branch, the other folders it works in, and what launched it.
   const mode = MODES.find((m) => m.id === s.mode);
   const where = (proj?.path || s.cwd).replace(S.config.home || '', '~');
   $('.it-meta', body).title = [agentName(s.agent), s.model, s.effort && `${effortLabel(s.effort)} thinking`, mode?.label, where].filter(Boolean).join(' · ');
   $('.it-meta', body).innerHTML = `
     ${mode && mode !== DEFAULT_MODE ? `<span class="m mode m-${mode.id}" title="${esc(mode.hint)}">${icon(mode.icon)}${esc(mode.label)}</span>` : ''}
     ${s.worktree ? `<span class="m branch" title="Worktree: ${esc(s.worktree.path)}\nFrom ${esc(s.worktree.baseRef)}">${icon('branch')}${esc(s.worktree.branch)}</span>` : ''}
+    ${(s.also || []).map((a, i) => `<span class="m also c-${summary.also?.[i]?.color || 'slate'}" title="${esc(`Also works in ${a.cwd}${a.worktree ? `\nWorktree: ${a.worktree.path}\nBranch ${a.worktree.branch}, from ${a.worktree.baseRef}` : ''}`)}"><i class="p-dot"></i>${esc(summary.also?.[i]?.project || a.cwd.split(/[\\/]/).pop())}</span>`).join('')}
     ${s.subagents?.length ? `<span class="m team-m" title="${esc(s.subagents.map((m) => `@${m.name}${copiesOf(m) > 1 ? ` ×${copiesOf(m)}` : ''}: ${memberLabel(m)}${m.use ? ` — ${m.use}` : ''}`).join('\n'))}">${icon('agent')}${teamSize(s.subagents)} subagent${teamSize(s.subagents) > 1 ? 's' : ''}</span>` : ''}
+    ${s.moved?.from ? `<span class="m" title="${esc(`This task ran on ${s.moved.from} before it moved here, with its work and history`)}">${icon('server')}From ${esc(s.moved.from)}</span>` : ''}
+    ${s.movedTo?.id ? `<button class="m moved-to" data-a="moved" title="This task carries on as a new session on ${esc(s.movedTo.place)}">${icon('server')}Continues on ${esc(s.movedTo.place)}</button>` : ''}
     ${s.origin ? `<span class="m" title="${s.origin.kind === 'telegram' ? 'Started from Telegram' : `Launched by a ${esc(s.origin.kind)}`}">${icon({ trigger: 'replay', telegram: 'send' }[s.origin.kind] || 'spark')}${esc(s.origin.name)}</span>` : ''}`;
   const live = s.state === 'running' || s.state === 'waiting';
   // Ship and Done sit in the top bar and again next to the composer, so they're there on opening the
@@ -116,6 +123,11 @@ export function renderBody(id, { fresh }) {
     $('span', b).textContent = s.state === 'done' ? 'Reopen' : 'Mark done';
   });
   $('[data-a="takeover"]', body).hidden = !s.agentSessionId;
+  const tx = transcriptOn(id);
+  const txBtn = $('[data-a="transcript"]', body);
+  txBtn.classList.toggle('on', tx);
+  txBtn.setAttribute('aria-pressed', tx);
+  txBtn.title = tx ? 'Back to the presentation (V)' : 'Full transcript: every message and step (V)';
 
   // Turns: keep nodes whose content hasn't changed so animations don't replay.
   const turnsEl = $('.turns', body);
@@ -140,12 +152,12 @@ export function renderBody(id, { fresh }) {
     const isLatest = t.id === latestId;
     const folded = !isLatest && !n.unfolded.has(t.id);
     const revKey = `${t.rolledBackAt || 0}:${(t.changes || []).map((c) => (c.reverted ? 1 : 0)).join('')}`;
-    const key = `${t.status}|${isLatest}|${folded}|${revKey}|${t.approval || ''}|${t.status === 'running' ? (s.ask?.id || '') + s.queue?.length : ''}|${subKey(s, t)}`;
+    const key = `${t.status}|${isLatest}|${folded}|${revKey}|${t.approval || ''}|${t.status === 'running' ? (s.ask?.id || '') + s.queue?.length : ''}|${subKey(s, t)}|${tx}`;
     const prev = n.turnNodes.get(t.id);
     let node = prev?.node;
     if (!prev || prev.key !== key) {
       const toggle = () => (n.unfolded.has(t.id) ? n.unfolded.delete(t.id) : n.unfolded.add(t.id), renderBody(id, { fresh: false }));
-      node = folded ? renderFoldedTurn(t, toggle) : renderTurn(s, t, isLatest, isLatest ? null : toggle);
+      node = folded ? renderFoldedTurn(t, toggle) : renderTurn(s, t, isLatest, isLatest ? null : toggle, tx);
       if (prev) prev.node.replaceWith(node);
       if (!prev && !fresh && !folded) firstNew ??= node;
       if (prev && prev.status === 'running' && t.status !== 'running') firstNew ??= node;
@@ -157,10 +169,45 @@ export function renderBody(id, { fresh }) {
     if (turnsEl.children[i] !== node) turnsEl.insertBefore(node, turnsEl.children[i] || null);
   });
   for (const [tid, v] of n.turnNodes) if (!keep.has(tid)) (v.node.remove(), n.turnNodes.delete(tid));
+  paintBtw(id); // side questions update in place, so they don't re-render their turn
 
   updateDock(id);
   if (dock?.isConnected) scrollByPx(dock.getBoundingClientRect().top - dockTop);
-  if (firstNew && watched) requestAnimationFrame(() => firstNew.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+  // A transcript was being read at its tail: its result lands right there, so show that, not the prompt.
+  const landing = firstNew && tx ? $('.tx-end', firstNew) || firstNew : firstNew;
+  if (landing && watched) requestAnimationFrame(() => landing.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+}
+
+// The full transcript or the presentation, for one card. The turn being read keeps its place: its
+// prompt stays where it was on screen, or comes back into view if it had scrolled off the top.
+export function toggleTranscript(id) {
+  const n = S.nodes.get(id);
+  pickView(id, !transcriptOn(id));
+  if (!S.open.has(id)) return expand(id);
+  if (!n?.body?.querySelector('.turns')) return;
+  const turns = [...n.body.querySelectorAll('.turn:not(.folded)')];
+  const mid = innerHeight / 2;
+  const reading = turns.find((x) => { const r = x.getBoundingClientRect(); return r.top <= mid && r.bottom >= mid; }) || turns.at(-1);
+  const tid = reading?.dataset.turn;
+  const before = reading && $('.ask', reading)?.getBoundingClientRect().top;
+  renderBody(id, { fresh: false });
+  const ask = tid && $(`.turn[data-turn="${tid}"] .ask`, n.body);
+  if (!ask || before === undefined) return;
+  if (before < topInset()) ask.scrollIntoView({ block: 'start', behavior: 'smooth' });
+  else scrollByPx(ask.getBoundingClientRect().top - before);
+}
+
+// After the setting changes: every open card follows it.
+export function repaintViews() {
+  for (const id of S.open) if (S.full.has(id)) renderBody(id, { fresh: false });
+}
+
+// The session a moved task carries on in: shown, opened and focused (archived ones stay hidden).
+function openMoved(next) {
+  if (!next || !S.sessions.has(next)) return;
+  renderFeed();
+  expand(next);
+  setFocus(next);
 }
 
 function renderFoldedTurn(t, unfold) {
@@ -171,6 +218,7 @@ function renderFoldedTurn(t, unfold) {
         ${icon('chevron', 'chev')}
         <span class="t-prompt">${t.by === 'wisp' ? '<b class="t-by">wisp</b> ' : ''}${mentionHtml(esc(t.prompt.replace(/\s+/g, ' ')), { link: false })}</span>
         ${t.rolledBackAt ? '<span class="rev-tag">Rolled back</span>' : ''}
+        ${t.moved ? `<span class="t-moved" title="${esc(`Ran on ${t.moved}`)}">${icon('server')}${esc(t.moved)}</span>` : ''}
         ${hero?.title ? `<span class="t-result">${esc(hero.title)}</span>` : ''}
         <time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time>
       </button>
@@ -187,8 +235,9 @@ function modeSwitch(s, t) {
   return m ? `<span class="t-mode m-${m.id}" title="Switched from ${esc(MODES.find((x) => x.id === prev)?.label || prev)} to ${m.label} for this follow-up">${icon(m.icon)}${m.label}</span>` : '';
 }
 
-// `fold` is set for older turns the user unfolded, so they can tuck them away again.
-function renderTurn(s, t, isLatest, fold) {
+// `fold` is set for older turns the user unfolded, so they can tuck them away again. `tx`: the card
+// shows the full transcript.
+function renderTurn(s, t, isLatest, fold, tx) {
   const node = el(`<article class="turn ${t.rolledBackAt ? 'is-rolled-back' : ''}" data-turn="${t.id}"></article>`);
   const long = t.prompt.length > 360 || t.prompt.split('\n').length > 5;
   const cp = t.checkpoint;
@@ -202,6 +251,7 @@ function renderTurn(s, t, isLatest, fold) {
       <div class="ask-foot">
         ${modelBadge(t.agent || s.agent, t.model ?? s.model, t.effort ?? s.effort)}
         ${modeSwitch(s, t)}
+        ${t.moved ? `<span class="t-moved" title="${esc(`Ran on ${t.moved}, before the task moved`)}">${icon('server')}${esc(t.moved)}</span>` : ''}
         <time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time>
         ${cpLabel ? `<span class="cp-sha" title="Git checkpoint before this turn (${esc(cp.head)}${cp.dirty ? ' + uncommitted changes' : ''})">${icon('branch')}${esc(cpLabel)}</span>` : ''}
         ${t.rolledBackAt ? '<span class="rev-tag">Rolled back</span>' : ''}
@@ -217,20 +267,25 @@ function renderTurn(s, t, isLatest, fold) {
   node.append(ask);
 
   if (t.status === 'running') {
-    node.append(renderWorking(s, t));
+    if (tx) node.append(renderLiveTranscript(s, t, ctxFor(s, t, isLatest)));
+    node.append(renderWorking(s, t, tx));
   } else {
-    node.append(renderPresentation(t.presentation, ctxFor(s, t, isLatest)));
+    const ctx = ctxFor(s, t, isLatest);
+    node.append(tx ? renderTranscript(s, t, ctx) : renderPresentation(t.presentation, ctx));
     const subs = renderSubs(s, t);
     if (subs) node.append(subs);
-    node.append(renderTrail(s, t));
+    node.append(renderTrail(s, t, tx));
   }
+  node.append(el('<div class="btw-list"></div>')); // side questions asked during this turn (btw.js)
   return node;
 }
 
-function renderWorking(s, t) {
+// The live panel. With the transcript on, the steps are already on the timeline above it, so it
+// keeps only the status, the question, the team and Stop.
+function renderWorking(s, t, tx) {
   const waiting = !!s.ask;
   const node = el(`
-    <div class="w-panel ${waiting ? 'waiting' : ''}">
+    <div class="w-panel ${waiting ? 'waiting' : ''} ${tx ? 'tx-panel' : ''}">
       <div class="w-orb"><div class="orb live"><i></i><i></i><i></i></div></div>
       <div class="w-body">
         <div class="w-status">
@@ -240,9 +295,9 @@ function renderWorking(s, t) {
         </div>
         <div class="ask-slot"></div>
         ${teamLiveHtml(s, t)}
-        <ul class="ticker"></ul>
+        ${tx ? '' : '<ul class="ticker"></ul>'}
         <div class="w-actions">
-          <button class="link xs peek">Show all activity</button>
+          ${tx ? '' : '<button class="link xs peek">Show all activity</button>'}
           ${s.queue?.length ? `<span class="w-queued">${s.queue.length} follow-up${s.queue.length > 1 ? 's' : ''} queued</span>` : ''}
           <span class="grow"></span>
           <button class="ghost sm danger stop">${icon('stop')}Stop</button>
@@ -251,11 +306,16 @@ function renderWorking(s, t) {
       </div>
     </div>`);
   if (waiting) $('.ask-slot', node).append(renderAskCard(s));
+  // The /btw tip goes after Show all activity. The transcript's panel has none: it leads the row with Stop.
+  const tip = btwTip(s.id);
+  if (tip && tx) $('.w-actions', node).prepend(tip);
+  else if (tip) $('.peek', node).after(tip);
   const ticker = $('.ticker', node);
-  t.activity
-    .filter((a) => a.kind !== 'text')
-    .slice(-5)
-    .forEach((a) => ticker.prepend(actItem(a)));
+  if (ticker)
+    t.activity
+      .filter((a) => a.kind !== 'text')
+      .slice(-5)
+      .forEach((a) => ticker.prepend(actItem(a)));
   $('.stop', node).onclick = async (e) => {
     // Shows at once; the run winds down and the live update replaces this panel.
     const btn = e.currentTarget;
@@ -269,7 +329,7 @@ function renderWorking(s, t) {
       toastError(err);
     });
   };
-  $('.peek', node).onclick = (e) => {
+  if (!tx) $('.peek', node).onclick = (e) => {
     const log = $('.log', node);
     log.hidden = !log.hidden;
     e.target.textContent = log.hidden ? 'Show all activity' : 'Hide activity';
@@ -278,8 +338,10 @@ function renderWorking(s, t) {
   return node;
 }
 
+// A line in the ticker and the activity log. A message (kept whole for the transcript) shows its start.
 function actItem(a) {
-  return el(`<li class="act k-${a.kind}">${icon(KIND_ICON[a.kind] || 'tool')}<span>${esc(a.label || '')}</span></li>`);
+  const label = a.kind === 'text' && a.label?.length > 400 ? `${a.label.slice(0, 400)}…` : a.label || '';
+  return el(`<li class="act k-${a.kind}">${icon(KIND_ICON[a.kind] || 'tool')}<span>${esc(label)}</span></li>`);
 }
 
 function renderAskCard(s) {
@@ -325,7 +387,9 @@ function renderAskCard(s) {
   return node;
 }
 
-function renderTrail(s, t) {
+// Under a finished turn. With the transcript showing, its steps and the agent's notes are already on
+// the page, so the bar drops those two.
+function renderTrail(s, t, tx) {
   const acts = t.activity || [];
   const count = (k) => acts.filter((a) => a.kind === k).length;
   const parts = [
@@ -346,13 +410,13 @@ function renderTrail(s, t) {
   const node = el(`
     <div class="trail">
       <div class="trail-bar">
-        ${acts.length ? `<button class="tb-acts" data-tab="activity" title="Show activity">${parts.length ? parts.map(([ic, l, n]) => `<span class="tb" title="${n} ${l}">${icon(ic)}${n}</span>`).join('') : 'Activity'}</button>` : ''}
+        ${acts.length && !tx ? `<button class="tb-acts" data-tab="activity" title="Show activity">${parts.length ? parts.map(([ic, l, n]) => `<span class="tb" title="${n} ${l}">${icon(ic)}${n}</span>`).join('') : 'Activity'}</button>` : ''}
         ${t.endedAt ? `<span class="tb">${fmtDuration(t.endedAt - t.startedAt)}</span>` : ''}
         ${st.costUsd ? `<span class="tb">$${st.costUsd.toFixed(2)}</span>` : ''}
         <span class="grow"></span>
         ${t.changes?.length ? `<button class="link xs" data-tab="changes">${t.changes.length} file${t.changes.length > 1 ? 's' : ''} <span class="plus">+${totals.add}</span> <span class="minus">−${totals.del}</span></button>` : ''}
         <span class="tb-tools">
-          ${t.presentation?.notes ? `<button class="tb-btn" data-tab="notes" title="Agent notes" aria-label="Agent notes">${icon('text')}</button>` : ''}
+          ${t.presentation?.notes && !tx ? `<button class="tb-btn" data-tab="notes" title="Agent notes" aria-label="Agent notes">${icon('text')}</button>` : ''}
           ${canRollback ? (rolledBack
             ? `<button class="link xs cp-rollback rolled-back" data-a="rollback" title="Re-apply changes from this turn">${icon('rerun')}Re-apply</button>`
             : `<button class="tb-btn cp-rollback" data-a="rollback" title="Restore working tree to before this turn${t.checkpoint?.head ? ` (${t.checkpoint.head.slice(0, 7)})` : ''}" aria-label="Restore to before this turn">${icon('replay')}</button>`) : ''}
@@ -402,13 +466,21 @@ function renderTrail(s, t) {
   return node;
 }
 
-// Live activity without re-rendering the whole turn.
-export function onActivity({ sessionId, turnId, item }) {
+// Live activity without re-rendering the whole turn. `update`: a step already shown changed (its
+// output came in).
+export function onActivity({ sessionId, turnId, item, update }) {
   const s = S.full.get(sessionId);
   if (!s) return;
   const turn = s.turns.find((t) => t.id === turnId);
-  if (turn && !turn.activity.includes(item)) turn.activity.push(item);
   const node = S.nodes.get(sessionId)?.turnNodes.get(turnId)?.node;
+  if (update) {
+    const known = turn?.activity.findLast((a) => sameStep(a, item));
+    if (known) Object.assign(known, item);
+    if (node) updateStep(node, item, turn);
+    return;
+  }
+  if (turn && !turn.activity.includes(item)) turn.activity.push(item);
+  if (node && turn) appendStep(node, item, turn, scrollByPx);
   if (!node || item.kind === 'text') return;
   const ticker = $('.ticker', node);
   if (ticker) {

package/web/js/slash-text.js

@@ -0,0 +1,22 @@
+// Slash commands in a follow-up box, DOM-free: what the / menu offers and how a message reads as
+// one. The server knows /btw too (server/btw.js), so the CLI and the phone can use it.
+
+export const SLASH = [
+  { name: 'btw', args: 'question', hint: 'Ask on the side. The agent keeps working' },
+  { name: 'feedback', args: 'note', hint: 'Tell the wisp team what works or breaks', bare: true }, // alone: opens the dialog
+];
+
+const BTW_CMD = /^\/btw(?:\s+|$)/i;
+export const isBtw = (text) => BTW_CMD.test(String(text || '').trimStart());
+
+// The question in "/btw did you …" ('' for a bare /btw), or null when the text isn't a /btw.
+export function btwQuestion(text) {
+  const t = String(text || '').trim();
+  return BTW_CMD.test(t) ? t.replace(BTW_CMD, '').trim() : null;
+}
+
+// The commands a half-typed "/b" could be. Only while the box holds nothing but the command.
+export function slashMatches(text, list = SLASH) {
+  const m = /^\/([a-z]*)$/i.exec(String(text || ''));
+  return m ? list.filter((c) => c.name.startsWith(m[1].toLowerCase())) : [];
+}

package/web/js/ui/kbd.js

@@ -20,6 +20,7 @@ export function shortcuts() {
     ['⌫', 'Delete item'],
     ['T', 'Take over in terminal'],
     ['R', 'Replay presentation'],
+    ['V', 'Full transcript / presentation'],
     ['⇧R', 'Rerun with another harness, model or thinking level'],
     ['S', 'Ship it: commit, push and open a PR (worktree tasks)'],
     ['1–9', 'Pick an answer when asked'],