wisp-agents 0.16.0 → 0.18.0

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());
 }
 

package/web/js/features/turns.js

@@ -2,18 +2,19 @@
 // and older ones folded.
 
 import { countChanges, fmtDuration, renderPresentation } from '../blocks.js';
-import { esc, md } from '../md.js';
+import { esc, inlineMd, md } from '../md.js';
+import { mentionHtml } from '../mention-text.js';
 import { api } from '../core/api.js';
 import { $, $$, el, icon } from '../core/dom.js';
 import { S } from '../core/state.js';
 import { overlay } from '../ui/overlay.js';
 import { toastError } from '../ui/toast.js';
-import { execAction, moreMenu, openInEditor, revertFile, rollbackTurn, takeOver } from './actions.js';
+import { execAction, moreMenu, openInEditor, revertFile, rollbackTurn, takeOver, toggleDone } from './actions.js';
 import { draftInto, renderDock, sendReply, startOptimistic, updateDock } from './composer.js';
 import { scheduleRefetch } from './feed.js';
 import { feedbackOn, rateTurn, whyForm } from './feedback.js';
 import { projectById } from './places.js';
-import { agentName, effortLabel, modelBadge, MODES } from './runners.js';
+import { agentName, DEFAULT_MODE, effortLabel, modelBadge, MODES } from './runners.js';
 import { scrollByPx, watching } from './scroll.js';
 import { renderPrStrip, shipDialog } from './ship.js';
 import { copiesOf, memberLabel, renderSubs, subKey, teamLiveHtml, teamSize } from './team.js';
@@ -32,9 +33,24 @@ export function ctxFor(s, turn, isLatest) {
     zoom: (src) => overlay(el(`<img class="lightbox" src="${esc(src)}">`)),
     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),
   };
 }
 
+// The "Blocked by permissions" card's buttons. Allow starts the retry, so the card goes to
+// Working at once; a refusal rolls that back and shows why.
+async function approveBlocked(s, turn, allow) {
+  const undo = allow ? startOptimistic(s.id, 'Allow & retry what was blocked', null, {}) : null;
+  try {
+    await api(`/sessions/${s.id}/approve`, { method: 'POST', body: { turnId: turn.id, allow } });
+    if (undo) scheduleRefetch(s.id);
+  } catch (err) {
+    undo?.();
+    toastError(err);
+    throw err;
+  }
+}
+
 // Older turns render as one-line folded rows; past this many they hide behind "Show earlier".
 const VISIBLE_TURNS = 8;
 
@@ -54,12 +70,13 @@ export function renderBody(id, { fresh }) {
             <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>
+            <button class="ghost xs it-done" data-a="done" title="Mark done (E)" hidden>${icon('done')}<span>Mark done</span></button>
             <button class="ghost xs" data-a="more" title="More">${icon('dots')}</button>
           </div>
         </div>
-        <div class="pr-strip" hidden></div>
         <button class="link xs earlier" hidden></button>
         <div class="turns"></div>
+        <div class="pr-strip" hidden></div>
         <div class="it-dock"></div>
       </div>`);
     n.body ? n.body.replaceWith(body) : n.card.append(body);
@@ -69,6 +86,7 @@ export function renderBody(id, { fresh }) {
       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'));
     });
     $('.earlier', body).onclick = () => ((n.showAll = true), renderBody(id, { fresh: false }));
@@ -77,19 +95,20 @@ export function renderBody(id, { fresh }) {
 
   const body = n.body;
   const proj = projectById(summary.projectId);
-  // The head already shows the harness, model and project, the task head has Compare, and Done
-  // sits by the composer. This bar only says how the run was set up: a mode worth noticing
-  // (Plan or Full auto, as on the launcher), the branch, and what launched it.
+  // 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.
   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.id !== 'edits' ? `<span class="m mode m-${mode.id}" title="${esc(mode.hint)}">${icon(mode.icon)}${esc(mode.label)}</span>` : ''}
+    ${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.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.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 sits in the top bar and again next to the composer, so it's there after reading the result.
+  // Ship and Done sit in the top bar and again next to the composer, so they're there on opening the
+  // card and after reading the result. The PR row sits right above the composer for the same reason.
   renderPrStrip(id);
   $$('[data-a="done"]', body).forEach((b) => {
     b.classList.toggle('on', s.state === 'done');
@@ -121,7 +140,7 @@ 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.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)}`;
     const prev = n.turnNodes.get(t.id);
     let node = prev?.node;
     if (!prev || prev.key !== key) {
@@ -150,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">${esc(t.prompt.replace(/\s+/g, ' '))}</span>
+        <span class="t-prompt">${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>
@@ -176,7 +195,7 @@ function renderTurn(s, t, isLatest, fold) {
   const cpLabel = cp?.head ? `${cp.branch ? `${cp.branch}@` : ''}${cp.head.slice(0, 7)}${cp.dirty ? '*' : ''}` : '';
   const ask = el(`
     <div class="ask">
-      <div class="ask-text ${long ? 'clamped' : ''}">${esc(t.prompt)}</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>` : ''}
       <div class="ask-foot">
@@ -264,7 +283,19 @@ function actItem(a) {
 
 function renderAskCard(s) {
   const a = s.ask;
-  const node = el(`
+  const p = a.permission;
+  // A live approval: the agent is paused on a tool call its permissions don't allow by themselves.
+  const node = p
+    ? el(`
+    <div class="ask-card perm">
+      <div class="q-head">${icon('lock')}<span>Needs your approval</span></div>
+      <p class="q-text">${inlineMd(a.question)}</p>
+      ${p.detail && !a.question.includes(p.detail) ? `<pre class="perm-detail">${esc(p.detail)}</pre>` : ''}
+      ${a.context ? `<p class="q-context">${esc(a.context)}</p>` : ''}
+      <div class="q-opts">${a.options.map((o, i) => `<button class="opt ${i === 0 ? 'go' : i === a.options.length - 1 ? 'no' : ''}" data-i="${i}"><span class="k">${i + 1}</span>${esc(o)}</button>`).join('')}</div>
+      <form class="q-own"><input class="input" placeholder="Or say what to do instead (denies this call)…"><button class="ghost sm">Send</button></form>
+    </div>`)
+    : el(`
     <div class="ask-card">
       <div class="q-head">${icon('ask')}<span>Needs your call</span></div>
       <p class="q-text">${esc(a.question)}</p>

package/web/js/mention-text.js

@@ -0,0 +1,59 @@
+// Task mentions in prompts, without the DOM. A prompt stores one as `@[Title](wisp:<id>)`; the
+// prompt box shows `@Title` and keeps the ids aside (mentions = [{ id, title }]). The server reads
+// the same form (server/mentions.js).
+
+export const MENTION = /@\[([^\]\n]{1,200})\]\(wisp:([a-z0-9]{6,40})\)/g;
+
+// Titles go inside [...], so no ] or newlines.
+export const cleanTitle = (t) => String(t || 'Untitled task').replace(/[\]\n\r]+/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 120) || 'Untitled task';
+
+// Stored form → what the box shows, plus the mentions in it.
+export function decode(text = '') {
+  const mentions = [];
+  const shown = String(text).replace(MENTION, (_, title, id) => {
+    if (!mentions.some((m) => m.id === id)) mentions.push({ id, title });
+    return `@${title}`;
+  });
+  return { text: shown, mentions };
+}
+
+// Where each mention sits in the shown text: every `@Title` of a known mention, longest titles
+// first so one title that starts another doesn't steal it. Sorted, non-overlapping.
+export function spans(text = '', mentions = []) {
+  const out = [];
+  for (const m of [...mentions].sort((a, b) => b.title.length - a.title.length)) {
+    const needle = `@${m.title}`;
+    for (let i = text.indexOf(needle); i !== -1; i = text.indexOf(needle, i + needle.length)) {
+      const end = i + needle.length;
+      if (!out.some((s) => i < s.end && end > s.start)) out.push({ start: i, end, id: m.id, title: m.title });
+    }
+  }
+  return out.sort((a, b) => a.start - b.start);
+}
+
+// Shown text → stored form. A mention the user edited into something else is just text again.
+export function encode(text = '', mentions = []) {
+  let out = '';
+  let at = 0;
+  for (const s of spans(text, mentions)) {
+    out += text.slice(at, s.start) + `@[${s.title}](wisp:${s.id})`;
+    at = s.end;
+  }
+  return out + text.slice(at);
+}
+
+// For people: titles, no ids (card titles while a launch is pending).
+export const plain = (text = '') => String(text).replace(MENTION, '@$1');
+
+// Already-escaped HTML of a stored prompt → mentions as chips. link: chips open the task.
+export const mentionHtml = (html, { link = true } = {}) =>
+  html.replace(MENTION, (_, title, id) => (link ? `<a class="mn" href="#/s/${id}" title="Open this task">@${title}</a>` : `<span class="mn">@${title}</span>`));
+
+// Pasted text that is only task references (ids, `wisp:<id>`, `#/s/<id>` links), each a task
+// `known(id)` finds → those ids; anything else → null (pasted as ordinary text).
+export function pastedTasks(text, known) {
+  const parts = String(text || '').trim().split(/\s+/).filter(Boolean);
+  if (!parts.length || parts.length > 10) return null;
+  const ids = parts.map((p) => (p.match(/^(?:wisp:)?([a-f0-9]{12})$/) || p.match(/#\/s\/([a-z0-9]{6,40})\/?$/))?.[1]);
+  return ids.every((id) => id && known(id)) ? [...new Set(ids)] : null;
+}