wisp-agents 0.17.0 → 0.18.0

package/web/js/features/projects.js

@@ -8,11 +8,17 @@ import { launch, S, save, saveLaunch } from '../core/state.js';
 import { present } from '../ui/overlay.js';
 import { popover } from '../ui/popover.js';
 import { toast, toastError, tryApi } from '../ui/toast.js';
+import { clones, isRepo, repoLabel, repoName, startClone } from './clones.js';
 import { feedToTop, renderFeed } from './feed.js';
 import { renderLaunchChips } from './launcher.js';
 import { loadConfig } from './live.js';
 import { connectMachine, openMachines } from './machines.js';
-import { MACHINE_STATE, machineById, placeOf, projectById, projectTitle } from './places.js';
+import { MACHINE_STATE, machineById, placeOf, projectById, projectTitle, recentFirst } from './places.js';
+import { projectList } from './project-list.js';
+
+// Project filter chips in the top bar before the rest fold into "+N".
+const TOP_CHIPS = 6;
+let fitBar; // refits the chips when the bar's width changes
 
 export function renderProjects() {
   const all = [...S.sessions.values()];
@@ -20,26 +26,89 @@ export function renderProjects() {
     const l = pid === 'all' ? all : all.filter((s) => s.projectId === pid);
     return { run: l.filter((s) => s.state === 'running').length, need: l.filter((s) => s.state === 'waiting' || (s.state === 'review' && s.unread)).length };
   };
-  const chip = (id, name, color) => {
+  const badges = (id) => {
     const st = stats(id);
-    return `<button class="p-chip ${S.filter === id ? 'on' : ''} c-${color}" data-id="${id}" title="${esc(id === 'all' ? 'All projects' : projectTitle(projectById(id)))}">
-      ${id === 'all' ? '' : '<i class="p-dot"></i>'}<span>${esc(name)}</span>${projectById(id)?.machine ? icon('server', 'p-where') : ''}${st.run ? `<span class="p-run" title="${st.run} working"></span>` : ''}${st.need ? `<span class="p-need">${st.need}</span>` : ''}
+    return `${st.run ? `<span class="p-run" title="${st.run} working"></span>` : ''}${st.need ? `<span class="p-need">${st.need}</span>` : ''}`;
+  };
+  const chip = (id, name, color) => `<button class="p-chip ${S.filter === id ? 'on' : ''} c-${color}" data-id="${id}" title="${esc(id === 'all' ? 'All projects' : projectTitle(projectById(id)))}">
+      ${id === 'all' ? '' : '<i class="p-dot"></i>'}<span>${esc(name)}</span>${projectById(id)?.machine ? icon('server', 'p-where') : ''}${badges(id)}
     </button>`;
+  const list = S.config.projects.slice().sort(recentFirst);
+  // Tens of projects: the filtered one and those that need you first, then the most recent, up to
+  // TOP_CHIPS, kept in recent order so chips don't shuffle; the rest sit behind "+N".
+  const keep = new Set([
+    ...list.filter((p) => p.id === S.filter),
+    ...list.filter((p) => stats(p.id).need),
+    ...list,
+  ].slice(0, TOP_CHIPS));
+  const shown = list.filter((p) => keep.has(p));
+  $('#projects').innerHTML = `<div class="p-scroll">${chip('all', 'All', 'slate')}${shown.map((p) => chip(p.id, p.name, p.color)).join('')}</div><button class="p-chip more" id="moreProjects" title="All ${list.length} projects" aria-haspopup="dialog"><i class="p-dot" hidden></i><span class="p-more-n"></span><span class="p-need" hidden></span>${icon('chevron', 'chev')}</button><button class="p-chip add" id="manageProjects" title="Manage projects">${icon('plus')}</button>`;
+  // Keep chips whole: drop the least important ones (recent last, the filtered one never) until
+  // the rest fit, and count what's left out on "+N" with what needs you in there.
+  const fit = () => {
+    const box = $('#projects .p-scroll');
+    if (!box) return;
+    const chips = $$('.p-chip[data-id]:not([data-id="all"])', box);
+    chips.forEach((c) => (c.hidden = false));
+    const drop = [...chips].sort((a, b) => (a.dataset.id === S.filter) - (b.dataset.id === S.filter) || stats(a.dataset.id).need - stats(b.dataset.id).need || shown.findIndex((p) => p.id === b.dataset.id) - shown.findIndex((p) => p.id === a.dataset.id));
+    const more = $('#moreProjects');
+    box.hidden = false;
+    $('#manageProjects').hidden = false;
+    $('.p-dot', more).hidden = true;
+    more.classList.remove('solo', ...[...more.classList].filter((c) => c.startsWith('c-')));
+    const paint = () => {
+      const out = list.filter((p) => !chips.some((c) => !c.hidden && c.dataset.id === p.id));
+      more.hidden = !out.length;
+      $('.p-more-n', more).textContent = `+${out.length}`;
+      const need = out.reduce((n, p) => n + stats(p.id).need, 0);
+      $('.p-need', more).hidden = !need;
+      $('.p-need', more).textContent = need;
+    };
+    paint();
+    for (const c of drop) {
+      if (box.scrollWidth <= box.clientWidth) break;
+      c.hidden = true;
+      paint();
+    }
+    // Too narrow for even "All" (a phone): one chip naming the filter opens the whole list, which
+    // also has Manage projects, so + steps aside for it.
+    if (box.scrollWidth > box.clientWidth) {
+      const p = projectById(S.filter);
+      box.hidden = true;
+      $('#manageProjects').hidden = true;
+      more.hidden = false;
+      more.classList.add('solo', ...(p ? [`c-${p.color}`] : []));
+      $('.p-dot', more).hidden = !p;
+      $('.p-more-n', more).textContent = p ? p.name : 'All';
+      const need = stats(p ? p.id : 'all').need;
+      $('.p-need', more).hidden = !need;
+      $('.p-need', more).textContent = need;
+    }
   };
-  $('#projects').innerHTML = `${chip('all', 'All', 'slate')}${S.config.projects
-    .slice()
-    .sort((a, b) => (b.lastUsedAt || b.addedAt) - (a.lastUsedAt || a.addedAt))
-    .map((p) => chip(p.id, p.name, p.color))
-    .join('')}<button class="p-chip add" id="manageProjects" title="Manage projects">${icon('plus')}</button>`;
-  $$('.p-chip[data-id]').forEach((b) =>
-    b.addEventListener('click', () => {
-      S.filter = S.filter === b.dataset.id ? 'all' : b.dataset.id;
-      save('wisp.filter', S.filter);
-      renderFeed();
-      feedToTop();
-      renderLaunchChips();
-    }),
-  );
+  fit();
+  fitBar ??= new ResizeObserver(() => fitBar.fit?.());
+  fitBar.fit = fit;
+  fitBar.observe($('#projects'));
+  const setFilter = (id) => {
+    S.filter = id;
+    save('wisp.filter', S.filter);
+    renderFeed(); // repaints these chips too
+    feedToTop();
+    renderLaunchChips();
+  };
+  $$('.p-chip[data-id]').forEach((b) => b.addEventListener('click', () => setFilter(S.filter === b.dataset.id ? 'all' : b.dataset.id)));
+  $('#moreProjects').onclick = (e) =>
+    projectList(e.currentTarget, {
+      projects: list,
+      current: S.filter,
+      label: 'Filter by project',
+      meta: (p) => badges(p.id),
+      extras: [
+        ...(S.filter === 'all' ? [] : [{ id: 'all', label: 'All projects', icon: 'x' }]),
+        { id: '+manage', label: 'Manage projects…', icon: 'settings' },
+      ],
+      onPick: (id) => (id === '+manage' ? openProjects() : setFilter(id)),
+    });
   $$('.p-chip[data-id]:not([data-id="all"])').forEach((b) =>
     b.addEventListener('contextmenu', (e) => {
       e.preventDefault();
@@ -94,7 +163,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
       <div class="add-row">
         <div class="field lg mono path-input">
           ${window.wispDesktop ? `<button class="browse" title="Browse…">${icon('folder')}</button>` : icon('folder')}
-          <input id="ppath" placeholder="~/code/my-app" spellcheck="false" autocomplete="off">
+          <input id="ppath" placeholder="~/code/my-app or a GitHub URL" spellcheck="false" autocomplete="off">
           <div class="suggest" hidden></div>
         </div>
         ${window.wispDesktop ? `<button class="ghost" id="pbrowse">${icon('folder')}Browse…</button>` : ''}
@@ -102,15 +171,17 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
       </div>
       <p class="hint"></p>
       <div class="plist" id="plist"></div>
+      <div class="discover" id="ghrepos"></div>
       <div class="discover" id="discover"><h4>Found on this machine</h4><p class="muted">Looking for git repos…</p></div>
     </div>`);
-  present(node, host);
+  const close = present(node, host);
   const input = $('#ppath', node);
   const sug = $('.suggest', node);
   let where = machine && machineById(machine) ? machine : null;
   const here = () => machineById(where);
   const home = () => (where ? here()?.remote?.home : S.config.home) || '';
   const tilde = (p) => (home() && p.startsWith(home()) ? `~${p.slice(home().length)}` : p);
+  let editingCloneDir = false;
 
   const paintWhere = () => {
     const tabs = $('.where', node);
@@ -118,12 +189,59 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
       .map((m) => `<button data-w="${m.id}" class="${where === m.id ? 'on' : ''}" title="${esc(m.target)} · ${esc(MACHINE_STATE[m.state] || m.state)}">${icon('server')}${esc(m.name)}<i class="dot ${m.state === 'online' ? 'ok' : m.state === 'error' ? 'bad' : ''}"></i></button>`)
       .join('')}<i></i>${host ? '' : `<button data-w="+" title="Run agents on another computer over SSH">${icon('plus')}Machine</button>`}`;
     const m = here();
-    input.placeholder = m ? `~/code/my-app on ${m.name}` : '~/code/my-app';
+    input.placeholder = m ? `~/code/my-app or a GitHub URL, on ${m.name}` : '~/code/my-app or a GitHub URL';
     $$('#pbrowse, .browse', node).forEach((b) => (b.hidden = !!m));
-    $('.hint', node).innerHTML = m
-      ? `Folders on <b>${esc(m.name)}</b>. Agents run there, in its own worktrees; you follow along here.`
-      : 'Tip: run <code>wisp add</code> inside any folder, or launch from a terminal with <code>wisp "task"</code> — the folder is added automatically.';
+    paintHint();
   };
+  // The hint under the input follows what's typed: a repo URL says where the clone goes.
+  const paintHint = () => {
+    const m = here();
+    const hint = $('.hint', node);
+    const v = input.value.trim();
+    $('#padd', node).textContent = isRepo(v) ? 'Clone' : 'Add';
+    if (editingCloneDir) return;
+    if (isRepo(v))
+      hint.innerHTML = m
+        ? `Clones <b>${esc(repoLabel(v))}</b> on <b>${esc(m.name)}</b>. You can write the task while it clones.`
+        : `Clones <b>${esc(repoLabel(v))}</b> into <button class="link" data-a="clonedir" title="Change where repos are cloned">${esc(tilde(S.config.cloneDir || '~/code'))}/${esc(repoName(v))}</button>. You can write the task while it clones.`;
+    else
+      hint.innerHTML = m
+        ? `Folders on <b>${esc(m.name)}</b>, or a repo URL to clone there. Agents run there, in its own worktrees; you follow along here.`
+        : 'Paste a GitHub URL and wisp clones it for you. Or run <code>wisp add</code> inside any folder: it is added automatically.';
+  };
+  // Change the clone folder in place: the hint turns into a small path field.
+  $('.hint', node).addEventListener('click', (e) => {
+    if (!e.target.closest('[data-a="clonedir"]')) return;
+    editingCloneDir = true;
+    const hint = $('.hint', node);
+    hint.innerHTML = `Clone repos into <input class="clonedir mono" spellcheck="false" value="${esc(tilde(S.config.cloneDir || '~/code'))}"> <button class="link" data-a="savedir">Save</button>`;
+    const f = $('.clonedir', hint);
+    const done = async (keep) => {
+      if (!editingCloneDir) return;
+      editingCloneDir = false;
+      if (keep && f.value.trim() !== tilde(S.config.cloneDir || '')) {
+        S.config.cloneDir = f.value.trim(); // optimistic; the server answers with the resolved folder
+        await tryApi(async () => {
+          await api('/config', { method: 'PATCH', body: { defaults: { cloneDir: f.value.trim() } } });
+          await loadConfig();
+        });
+      }
+      paintHint();
+      input.focus();
+    };
+    f.onkeydown = (ev) => {
+      if (ev.key === 'Enter' || ev.key === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation(); // Escape cancels the edit, not the dialog
+        done(ev.key === 'Enter');
+      }
+    };
+    $('[data-a="savedir"]', hint).onclick = () => {
+      done(true);
+    };
+    f.focus();
+    f.select();
+  });
   $('.where', node).addEventListener('click', (e) => {
     const b = e.target.closest('[data-w]');
     if (!b) return;
@@ -135,28 +253,42 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
     sug.hidden = true;
     paintWhere();
     list();
+    github();
     discover();
     input.focus();
   });
 
+  // A new project becomes the launcher's pick for its place.
+  const picked = async (proj) => {
+    await loadConfig();
+    launch.picks[placeOf(proj)] = proj.id;
+    if (!launch.where.includes(placeOf(proj))) launch.where = [placeOf(proj)];
+    if (placeOf(proj) === launch.where[0]) launch.project = proj.id;
+    saveLaunch();
+    renderLaunchChips();
+  };
   const add = async (p) => {
+    if (isRepo(p)) return clone(p);
     try {
       const proj = await api('/projects', { method: 'POST', body: { path: p, ...(where && { machine: where }) } });
-      await loadConfig();
-      launch.picks[placeOf(proj)] = proj.id;
-      if (!launch.where.includes(placeOf(proj))) launch.where = [placeOf(proj)];
-      if (placeOf(proj) === launch.where[0]) launch.project = proj.id;
-      saveLaunch();
-      renderLaunchChips();
+      await picked(proj);
       toast(`Added <b>${esc(proj.name)}</b>${where ? ` on ${esc(here()?.name || '')}` : ''}`);
       input.value = '';
       sug.hidden = true;
+      paintHint();
       list();
       discover();
     } catch (err) {
       toastError(err);
     }
   };
+  // Clone a repo: the launcher picks it right away (cloning in the background) and the dialog
+  // closes, so the next thing is writing the task. A launch into it waits for the clone.
+  const clone = (url) => {
+    startClone(url, where);
+    close();
+    setTimeout(() => $('#prompt')?.focus(), 60);
+  };
   $('#padd', node).onclick = () => {
     if (input.value.trim()) add(input.value.trim());
   };
@@ -169,10 +301,11 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
   let sel = -1;
   let t;
   input.addEventListener('input', () => {
+    paintHint();
     clearTimeout(t);
     t = setTimeout(async () => {
       const q = input.value;
-      if (!q) return (sug.hidden = true);
+      if (!q || isRepo(q)) return (sug.hidden = true);
       const dirs = await api(`${where ? `/machines/${where}/fs` : '/fs'}?q=${encodeURIComponent(q)}`).catch(() => []);
       sel = -1;
       sug.hidden = !dirs.length;
@@ -202,8 +335,16 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
   const list = () => {
     const box = $('#plist', node);
     const projects = S.config.projects.filter((p) => (p.machine || null) === where);
-    box.innerHTML = projects.length
-      ? projects
+    const pending = clones
+      .filter((j) => j.where === where)
+      .map(
+        (j) => `<div class="prow cloning"><span class="swatch"><span class="orb live"></span></span>
+          <div class="prow-main"><b class="pname">${esc(repoName(j.url))}</b><span class="ppath">Cloning ${esc(repoLabel(j.url))}…</span></div></div>`,
+      )
+      .join('');
+    box.innerHTML = projects.length || pending
+      ? pending +
+        projects
           .map((p) => {
             const n = [...S.sessions.values()].filter((s) => s.projectId === p.id).length;
             return `<div class="prow c-${p.color}" data-id="${p.id}">
@@ -215,7 +356,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
           })
           .join('')
       : `<p class="muted">No projects ${where ? `on ${esc(here()?.name || '')} ` : ''}yet. Add a folder above, or pick one below.</p>`;
-    $$('.prow', box).forEach((row) => {
+    $$('.prow[data-id]', box).forEach((row) => {
       const id = row.dataset.id;
       const p = projectById(id);
       $('.pname', row).onchange = (e) => {
@@ -243,6 +384,40 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
     });
   };
 
+  // The user's own GitHub repos (through gh), one click to clone. Only on this computer, and
+  // hidden when gh isn't installed or signed in.
+  let ghRepos = null;
+  let ghAll = false;
+  const github = async () => {
+    const box = $('#ghrepos', node);
+    if (where) return (box.innerHTML = '');
+    box.onclick = (e) => {
+      const b = e.target.closest('[data-repo]');
+      if (b) clone(b.dataset.repo);
+      if (e.target.closest('[data-a="ghall"]')) {
+        ghAll = !ghAll;
+        github();
+      }
+    };
+    if (!ghRepos) {
+      box.innerHTML = `<h4>${icon('github')}Your GitHub repos</h4><p class="muted">Asking gh…</p>`;
+      ghRepos = await api('/projects/github').catch(() => []);
+      if (where) return (box.innerHTML = '');
+    }
+    const busy = new Set(clones.map((j) => j.label.toLowerCase()));
+    const repos = ghRepos.filter((r) => !busy.has(r.repo.toLowerCase()));
+    const more = repos.length > 6 ? `<button class="link xs" data-a="ghall">${ghAll ? 'Show fewer' : `Show all ${repos.length}`}</button>` : '';
+    box.innerHTML = repos.length
+      ? `<h4>${icon('github')}Your GitHub repos <span class="muted">· click to clone</span>${more}</h4><div class="found">${repos
+          .slice(0, ghAll ? undefined : 6)
+          .map(
+            (r) =>
+              `<button class="found-item" data-repo="${esc(r.url)}" title="${esc(r.description || r.repo)}">${icon('plus')}<b>${esc(r.repo.split('/')[1])}</b><span>${esc(r.repo.split('/')[0])}${r.private ? ' · private' : ''}${r.fork ? ' · fork' : ''}</span></button>`,
+          )
+          .join('')}</div>`
+      : '';
+  };
+
   const discover = async () => {
     const box = $('#discover', node);
     const m = here();
@@ -265,6 +440,14 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
           .join('')}</div>`
       : '';
   };
+  bus.on(
+    'clones',
+    () => {
+      list();
+      github();
+    },
+    { node },
+  );
   let wasOnline = here()?.state === 'online';
   bus.on(
     'machines',
@@ -279,6 +462,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
 
   paintWhere();
   list();
+  github();
   discover();
   if (focusAdd) setTimeout(() => input.focus(), 60);
 }

package/web/js/features/settings.js

@@ -6,7 +6,7 @@ import { api } from '../core/api.js';
 import * as bus from '../core/bus.js';
 import { $, $$, el, icon } from '../core/dom.js';
 import { money, pct } from '../core/format.js';
-import { S } from '../core/state.js';
+import { S, setAgents } from '../core/state.js';
 import { overlay } from '../ui/overlay.js';
 import { toast, toastError, tryApi } from '../ui/toast.js';
 import { openRouter } from './auto.js';
@@ -78,6 +78,7 @@ export function openSettings(opts) {
           </div>
           <div class="sx-group">
             ${row('Worktree per task', 'Each task gets its own branch from origin/main, in git repos', '<button class="switch" id="wtDefault" role="switch"></button>')}
+            ${row('Fix PR conflicts', 'When a shipped PR conflicts with its base, the task merges the base in, resolves it and pushes', '<button class="switch" id="fixConflicts" role="switch"></button>')}
           </div>
         </section>
         <section class="sx-pane" data-pane="notifications">
@@ -170,7 +171,7 @@ export function openSettings(opts) {
     btn.classList.add('busy');
     const before = new Map(S.agents.map((a) => [a.id, a]));
     try {
-      S.agents = await api('/agents/recheck', { method: 'POST', body: {} });
+      setAgents(await api('/agents/recheck', { method: 'POST', body: {} }));
       if (!node.isConnected) return;
       paintAgents();
       $('#launcher')?.placesChanged?.();
@@ -300,6 +301,19 @@ export function openSettings(opts) {
     });
     if (!saved) return;
     paintWt();
+  const fc = $('#fixConflicts', node);
+  const paintFc = () => fc.setAttribute('aria-checked', S.config.defaults.fixConflicts !== 'off');
+  fc.onclick = async () => {
+    const was = S.config.defaults.fixConflicts;
+    S.config.defaults.fixConflicts = was === 'off' ? 'on' : 'off';
+    paintFc();
+    const saved = await tryApi(() => api('/config', { method: 'PATCH', body: { defaults: { fixConflicts: S.config.defaults.fixConflicts } } }));
+    if (!saved) {
+      S.config.defaults.fixConflicts = was;
+      paintFc();
+    }
+  };
+  paintFc();
     renderLauncher();
   };
   paintWt();

package/web/js/features/setup.js

@@ -6,7 +6,7 @@ import { esc } from '../md.js';
 import { api } from '../core/api.js';
 import * as bus from '../core/bus.js';
 import { $, icon } from '../core/dom.js';
-import { launch, S } from '../core/state.js';
+import { launch, S, setAgents } from '../core/state.js';
 import { toast, toastError } from '../ui/toast.js';
 import { harnessLogo } from './runners.js';
 
@@ -25,7 +25,7 @@ export async function installHarness(id) {
   failed = '';
   bus.emit('install');
   try {
-    S.agents = await api('/agents/install', { method: 'POST', body: { id } });
+    setAgents(await api('/agents/install', { method: 'POST', body: { id } }));
     $('#launcher')?.placesChanged?.();
     toast(`<b>${esc(S.agents.find((a) => a.id === id)?.name || id)}</b> is ready: free models, no account needed. Type a task and press Enter.`, { timeout: 7000 });
     $('#prompt')?.focus();
@@ -68,7 +68,7 @@ export function renderSetup() {
     btn.disabled = true;
     btn.classList.add('busy');
     try {
-      S.agents = await api('/agents/recheck', { method: 'POST', body: {} });
+      setAgents(await api('/agents/recheck', { method: 'POST', body: {} }));
       $('#launcher')?.placesChanged?.();
       bus.emit('agents');
       if (needsSetup()) toast('Still no harness found. Install opencode here, or Claude Code, Codex, Cursor… yourself.');

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,65 @@ 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 && s.conflictFix?.step === 'failed' ? `<button class="ghost xs" data-pr="fix" title="Ask the agent to merge the base in and resolve the conflicts again">${icon('replay')}<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 === 'merge') mergePr(id);
+    if (a === 'fix') api(`/sessions/${id}/fix-conflicts`, { method: 'POST', body: {} }).catch(toastError);
   };
 }
 
+// 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 +125,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 +142,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());
 }