wisp-agents 0.17.0 → 0.20.0

package/web/js/features/ship.js

@@ -7,26 +7,42 @@ import { S } from '../core/state.js';
 import { overlay } from '../ui/overlay.js';
 import { toast, toastError } from '../ui/toast.js';
 
-const prTone = (pr) =>
-  pr.state === 'MERGED' ? 'merged' : pr.state === 'CLOSED' ? 'closed' : pr.checks?.fail ? 'fail' : pr.checks?.pending ? 'pending' : pr.review === 'CHANGES_REQUESTED' ? 'fail' : 'pass';
+// fix: the session's conflictFix ({ step, why }) while wisp resolves the PR's merge conflicts itself.
+const fixing = (fix) => fix?.step === 'fixing' || fix?.step === 'pushing';
+const prTone = (pr, fix) =>
+  pr.state === 'MERGED' ? 'merged' : pr.state === 'CLOSED' ? 'closed' : pr.conflict ? (fixing(fix) ? 'pending' : 'fail') : pr.checks?.fail ? 'fail' : pr.checks?.pending ? 'pending' : pr.review === 'CHANGES_REQUESTED' ? 'fail' : 'pass';
 const REVIEW = { APPROVED: 'Approved', CHANGES_REQUESTED: 'Changes requested', REVIEW_REQUIRED: 'Review required' };
-function prLine(pr) {
+function prLine(pr, fix) {
+  if (pr.state === 'OPEN' && (pr.conflict || fixing(fix))) {
+    const what = fix?.step === 'pushing' ? 'Pushing the conflict fix' : fixing(fix) ? 'Fixing merge conflicts' : fix?.step === 'failed' ? `Conflicts not fixed: ${fix.why}` : 'Merge conflicts';
+    return `Open · ${what}`;
+  }
   const c = pr.checks || {};
   const checks = c.fail ? `${c.fail} check${c.fail > 1 ? 's' : ''} failing` : c.pending ? `${c.pending} check${c.pending > 1 ? 's' : ''} running` : c.pass ? `${c.pass} check${c.pass > 1 ? 's' : ''} passed` : 'No checks';
   const state = pr.state === 'MERGED' ? 'Merged' : pr.state === 'CLOSED' ? 'Closed' : pr.draft ? 'Draft' : 'Open';
   return [state, pr.state === 'OPEN' ? checks : '', pr.state === 'OPEN' ? REVIEW[pr.review] : ''].filter(Boolean).join(' · ');
 }
 
+// A ship in flight, per session: { steps, step, update, route, error, values }. The dialog closes
+// on confirm and the card follows along here (the server sends the live stage as `shipping`);
+// a failure stays on the card with Retry, which reopens the dialog with what was typed.
+const ships = new Map();
+const STEP_LABEL = { commit: 'Commit', push: 'Push', pr: 'Open PR' };
+const STEP_DOING = { commit: 'Committing', push: 'Pushing', pr: 'Opening the PR' };
+const shipping = (s) => !!(s?.shipping || (ships.has(s?.id) && !ships.get(s.id).error));
+
 // Ship it only makes sense on a finished worktree task with something to ship: uncommitted
 // changes, or commits its open PR (or a new one) doesn't have yet. Unchecked yet: assume it might.
 export function shippable(s) {
-  if (!s?.branch || s.agent === 'wisp' || s.state === 'running' || s.state === 'waiting' || s.pr?.state === 'MERGED') return false;
+  if (!s?.branch || s.agent === 'wisp' || s.state === 'running' || s.state === 'waiting' || s.pr?.state === 'MERGED' || shipping(s)) return false;
   const t = s.toShip;
   return !t || !!(t.dirty || (s.pr?.state === 'OPEN' ? t.unpushed : t.ahead));
 }
 export const shipLabel = (s) => (s.pr?.state === 'OPEN' ? `Push to PR #${s.pr.number}` : 'Ship it…');
 
-export const prPill = (pr) => `<span class="pill pr pr-${prTone(pr)}" title="PR #${pr.number}: ${esc(prLine(pr))}"><i></i>#${pr.number}</span>`;
+export const shipPill = (s) => (s.shipping ? `<span class="pill ship-pill" title="Shipping: ${esc(STEP_DOING[s.shipping.step] || 'Starting')}…"><i></i>Shipping</span>` : '');
+
+export const prPill = (pr, fix) => `<span class="pill pr pr-${prTone(pr, fix)}" title="PR #${pr.number}: ${esc(prLine(pr, fix))}"><i></i>#${pr.number}</span>`;
 
 // The PR row under a card's bar; reads the live summary, so polled check results show up.
 export function renderPrStrip(id) {
@@ -39,25 +55,92 @@ export function renderPrStrip(id) {
     b.hidden = !shippable(s);
     $('span', b).textContent = pr?.state === 'OPEN' ? `Push to #${pr.number}` : pr ? 'Ship again' : 'Ship it';
   });
+  // Started here, or elsewhere (another tab, the API): the server's stage moves the track along.
+  const run = ships.get(id) || (s.shipping && { steps: s.shipping.update ? ['push', 'pr'] : ['commit', 'push', 'pr'], step: 'push' });
+  if (run && STEP_LABEL[s.shipping?.step] && !run.error) run.step = s.shipping.step;
+  if (run) return renderShipRun(node, id, run);
+  const landed = node.classList.contains('ship-run') && !node.classList.contains('failed');
   node.hidden = !pr;
   if (!pr) return;
-  const tone = prTone(pr);
-  node.className = `pr-strip pr-${tone}`;
+  const tone = prTone(pr, s.conflictFix);
+  node.className = `pr-strip pr-${tone}${landed ? ' landed' : ''}`;
   node.innerHTML = `
     <span class="pr-dot"></span>
     <a href="${esc(pr.url)}" target="_blank" class="pr-num">PR #${pr.number}</a>
-    <span class="pr-line">${esc(prLine(pr))}</span>
+    <span class="pr-line">${esc(prLine(pr, s.conflictFix))}</span>
     <span class="grow"></span>
+    ${pr.state === 'OPEN' && pr.conflict && !fixing(s.conflictFix) && s.state !== 'running' ? `<button class="ghost xs pr-fix" data-pr="fix" title="Send the task a follow-up to merge the base in and resolve the conflicts; wisp pushes the fix to the PR">${icon('merge')}<span>Fix conflicts</span></button>` : ''}
     ${pr.state === 'OPEN' ? `<button class="ghost xs" data-pr="refresh" title="Check now (wisp also checks every minute)">${icon('replay')}</button>` : ''}
     <a class="ghost xs" href="${esc(pr.url)}" target="_blank">${icon('external')}<span>GitHub</span></a>
-    ${pr.state === 'OPEN' ? `<button class="ghost xs pr-merge" data-pr="merge" title="Squash-merge, then fast-forward your local ${esc(s.branch ? 'base branch' : 'checkout')}">${icon('check')}<span>Merge</span></button>` : ''}`;
+    ${pr.state === 'OPEN' && !pr.conflict ? `<button class="ghost xs pr-merge" data-pr="merge" title="Squash-merge, then fast-forward your local ${esc(s.branch ? 'base branch' : 'checkout')}">${icon('check')}<span>Merge</span></button>` : ''}`;
   node.onclick = (e) => {
     const a = e.target.closest('[data-pr]')?.dataset.pr;
-    if (a === 'refresh') api(`/sessions/${id}/pr`, { method: 'POST', body: {} }).catch(toastError);
+    if (a === 'refresh') refreshPr(id, e.target.closest('[data-pr]'));
     if (a === 'merge') mergePr(id);
+    if (a === 'fix') fixPr(id);
   };
 }
 
+// Check now: the button spins at once and stops when the answer (pushed as a summary) is in.
+function refreshPr(id, btn) {
+  btn.classList.add('busy');
+  btn.disabled = true;
+  api(`/sessions/${id}/pr`, { method: 'POST', body: {} })
+    .catch(toastError)
+    .finally(() => {
+      btn.classList.remove('busy');
+      btn.disabled = false;
+    });
+}
+
+// Fix conflicts: the row flips to "Fixing merge conflicts" at once; a refusal puts it back.
+function fixPr(id) {
+  const s = S.sessions.get(id);
+  if (!s) return;
+  const was = s.conflictFix;
+  s.conflictFix = { ...was, step: 'fixing', why: '' };
+  renderPrStrip(id);
+  api(`/sessions/${id}/fix-conflicts`, { method: 'POST', body: {} }).catch((err) => {
+    const now = S.sessions.get(id);
+    if (now?.conflictFix?.step === 'fixing') now.conflictFix = was;
+    renderPrStrip(id);
+    toastError(err);
+  });
+}
+
+// The in-flight row: the stages as a track that fills in as the server reports them. Built once
+// and updated in place, so its entry animation and shimmer don't restart with every summary.
+function renderShipRun(node, id, run) {
+  const at = Math.max(run.steps.indexOf(run.step), 0);
+  if (!node.classList.contains('ship-run') || node.dataset.steps !== run.steps.join()) {
+    node.dataset.steps = run.steps.join();
+    node.innerHTML = `
+      <span class="ship-icon">${icon('send')}</span>
+      <span class="ship-what"></span>
+      <ol class="ship-track">${run.steps.map((k) => `<li data-step="${k}"><i>${icon('check')}</i><span>${STEP_LABEL[k]}</span></li>`).join('')}</ol>
+      <span class="grow"></span>
+      <span class="ship-acts"></span>
+      <span class="ship-bar"></span>`;
+    node.onclick = (e) => {
+      const a = e.target.closest('[data-ship]')?.dataset.ship;
+      if (a === 'retry') shipDialog(id);
+      if (a === 'dismiss') {
+        ships.delete(id);
+        renderPrStrip(id);
+      }
+    };
+  }
+  const failed = !!run.error;
+  node.hidden = false;
+  node.className = `pr-strip ship-run${failed ? ' failed pr-fail' : ''}`;
+  node.title = failed ? run.error : '';
+  $$('.ship-track li', node).forEach((li, i) => (li.className = i < at ? 'done' : i === at ? (failed ? 'bad' : 'now') : ''));
+  const what = failed ? `Ship failed at ${STEP_LABEL[run.steps[at]] || 'start'}: <span class="ship-err">${esc(run.error)}</span>` : `${STEP_DOING[run.steps[at]]}<span class="dots"></span>`;
+  if ($('.ship-what', node).innerHTML !== what) $('.ship-what', node).innerHTML = what;
+  const acts = failed ? `<button class="ghost xs" data-ship="retry">${icon('replay')}<span>Retry</span></button><button class="ghost xs" data-ship="dismiss" title="Dismiss">${icon('x')}</button>` : '';
+  if ($('.ship-acts', node).innerHTML !== acts) $('.ship-acts', node).innerHTML = acts;
+}
+
 export async function shipDialog(id) {
   const s = S.sessions.get(id);
   if (!s) return;
@@ -69,6 +152,7 @@ export async function shipDialog(id) {
     return toastError(err);
   }
   const open = info.pr?.state === 'OPEN';
+  const typed = ships.get(id)?.values; // a failed ship's message, back for Retry
   const nothing = !info.dirty && !info.ahead;
   const node = el(`
     <div class="modal ship-modal">
@@ -85,23 +169,42 @@ export async function shipDialog(id) {
   $('.close', node).onclick = close;
   const title = $('[name="title"]', node);
   const body = $('[name="body"]', node);
-  if (title) title.value = info.title;
-  if (body) body.value = info.body;
-  const go = async () => {
-    const btn = $('[data-a="go"]', node);
-    btn.disabled = true;
-    btn.lastChild.textContent = 'Shipping…';
-    try {
-      const pr = await api(`/sessions/${id}/ship`, { method: 'POST', body: { title: title?.value || info.title, body: body?.value ?? info.body, draft: !!$('[name="draft"]', node)?.checked } });
-      close();
-      toast(`${icon('branch')} ${open ? 'Pushed to' : 'Opened'} <b>PR #${pr.number}</b>`, { action: { label: 'Open', run: () => window.open(pr.url, '_blank') }, timeout: 8000 });
-    } catch (err) {
-      btn.disabled = false;
-      btn.lastChild.textContent = open ? 'Commit & push' : 'Commit, push & open PR';
-      toastError(err, { timeout: 10_000 });
+  if (title) title.value = typed?.title || info.title;
+  if (body) body.value = typed?.body ?? info.body;
+  if (typed?.draft && $('[name="draft"]', node)) $('[name="draft"]', node).checked = true;
+  // Confirm closes the dialog at once; the card's PR row shows the stages, then the PR itself.
+  const go = () => {
+    if (title && !title.value.trim()) {
+      title.focus();
+      return toast('A commit message is required.', { tone: 'bad' });
     }
+    const values = { title: title?.value || info.title, body: body?.value ?? info.body, draft: !!$('[name="draft"]', node)?.checked };
+    close();
+    ships.set(id, { steps: [...(info.dirty ? ['commit'] : []), 'push', 'pr'], step: info.dirty ? 'commit' : 'push', update: open, values });
+    renderPrStrip(id);
+    const strip = S.nodes.get(id)?.body?.querySelector('.pr-strip');
+    if (strip && !strip.hidden) strip.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    api(`/sessions/${id}/ship`, { method: 'POST', body: values }).then(
+      (pr) => {
+        const s = S.sessions.get(id);
+        // Everything just went up: no Push to #n until the server's recheck finds something new.
+        if (s) S.sessions.set(id, { ...s, pr: { ...s.pr, ...pr }, shipping: null, toShip: s.toShip && { ...s.toShip, dirty: 0, unpushed: 0 } });
+        ships.delete(id);
+        renderPrStrip(id);
+        toast(`${icon('branch')} ${open ? 'Pushed to' : 'Opened'} <b>PR #${pr.number}</b>`, { action: { label: 'Open', run: () => window.open(pr.url, '_blank') }, timeout: 8000 });
+      },
+      (err) => {
+        if (ships.has(id)) ships.get(id).error = err.message;
+        const s = S.sessions.get(id);
+        if (s) S.sessions.set(id, { ...s, shipping: null });
+        renderPrStrip(id);
+        toastError(err, { timeout: 10_000 });
+      },
+    );
+  };
+  $('[data-a="go"]', node).onclick = () => {
+    go();
   };
-  $('[data-a="go"]', node).onclick = go;
   requestAnimationFrame(() => (title || $('[data-a="go"]', node)).focus());
 }
 

package/web/js/features/turns.js

@@ -19,7 +19,7 @@ import { scrollByPx, watching } from './scroll.js';
 import { renderPrStrip, shipDialog } from './ship.js';
 import { copiesOf, memberLabel, renderSubs, subKey, teamLiveHtml, teamSize } from './team.js';
 
-const KIND_ICON = { 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' };
+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' };
 
 export function ctxFor(s, turn, isLatest) {
   return {
@@ -169,7 +169,7 @@ function renderFoldedTurn(t, unfold) {
     <article class="turn folded" data-turn="${t.id}">
       <button class="t-fold" title="Show this exchange">
         ${icon('chevron', 'chev')}
-        <span class="t-prompt">${mentionHtml(esc(t.prompt.replace(/\s+/g, ' ')), { link: false })}</span>
+        <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>' : ''}
         ${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>
@@ -194,7 +194,8 @@ function renderTurn(s, t, isLatest, fold) {
   const cp = t.checkpoint;
   const cpLabel = cp?.head ? `${cp.branch ? `${cp.branch}@` : ''}${cp.head.slice(0, 7)}${cp.dirty ? '*' : ''}` : '';
   const ask = el(`
-    <div class="ask">
+    <div class="ask${t.by === 'wisp' ? ' by-wisp' : ''}">
+      ${t.by === 'wisp' ? `<div class="ask-by">${icon('spark')}Sent by wisp after its test run</div>` : ''}
       <div class="ask-text ${long ? 'clamped' : ''}">${mentionHtml(esc(t.prompt))}</div>
       ${long ? '<button class="link xs more-btn">Show all</button>' : ''}
       ${t.attachments?.length ? `<div class="ask-atts">${t.attachments.map((a) => (a.mime?.startsWith('image/') ? `<img src="/api/uploads/${a.id}" alt="${esc(a.name)}" title="${esc(a.name)}">` : `<a class="att-pill" href="/api/uploads/${a.id}" target="_blank">${icon('file')}${esc(a.name)}</a>`)).join('')}</div>` : ''}

package/web/js/ui/popover.js

@@ -50,3 +50,13 @@ export function popover(node, { anchor, keep, capture = false, onClose } = {}) {
   document.body.append(node);
   return close;
 }
+
+// Keep a right-click menu at the pointer but on-screen near the window edges. Reads offset
+// sizes: the menu's pop-in animation starts scaled down, so its bounding box is too small
+// on the first frame and the last items would end up below the fold.
+export function clampToViewport(node, x, y) {
+  const w = node.offsetWidth;
+  const h = node.offsetHeight;
+  node.style.left = `${Math.max(8, Math.min(x, innerWidth - w - 8))}px`;
+  node.style.top = `${Math.max(8, Math.min(y, innerHeight - h - 8))}px`;
+}