wisp-agents 0.16.0 → 0.17.0

package/web/js/features/runners.js

@@ -9,9 +9,11 @@ import { machineById } from './places.js';
 
 export const MODES = [
   { id: 'plan', label: 'Plan', icon: 'plan', hint: 'Read-only. The agent investigates and proposes.' },
-  { id: 'edits', label: 'Edits', icon: 'pen', hint: 'May edit files. Shell commands that need approval are denied.' },
+  { id: 'edits', label: 'Edits', icon: 'pen', hint: 'May edit files. Anything else that needs approval comes to you to allow.' },
   { id: 'auto', label: 'Full auto', icon: 'spark', hint: 'No permission prompts at all. Trusted repos only.' },
 ];
+// The default: just an icon on mode buttons; the others are spelled out so you can't miss them.
+export const DEFAULT_MODE = MODES[2];
 
 export const agentName = (id) => S.agents.find((a) => a.id === id)?.name || (id === 'auto' ? 'Auto' : id === 'wisp' ? 'wisp' : id);
 

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;
+}