wisp-agents 0.16.0 → 0.17.0

package/server/usage.js

@@ -77,3 +77,97 @@ export function usage(sessions, { days = 30, now = Date.now(), project = () => n
     runners: sorted(byRunner),
   };
 }
+
+// Tool calls across sessions, for the agent-facing `wisp_stats` tool: how often each kind of
+// action ran (run, read, edit, search, web, …), per harness, project and day. Kinds are wisp's
+// normalized activity kinds, not the harness's own tool names. Spend and success come from usage().
+const NOT_TOOLS = new Set(['text', 'error', 'answer']);
+const tally = () => ({ calls: 0, kinds: {} });
+const count = (b, kind) => {
+  b.calls++;
+  b.kinds[kind] = (b.kinds[kind] || 0) + 1;
+};
+const ranked = (m) => [...m.values()].sort((a, b) => b.calls - a.calls);
+
+// filter: { agent, project } — agent is a harness id, project a project id or folder name.
+export function toolStats(sessions, { days = 30, now = Date.now(), project = () => null, filter = {} } = {}) {
+  const keep = sessions
+    .filter((s) => {
+      if (!filter.project) return true;
+      const p = project(s);
+      return p?.id === filter.project || (p?.name || String(s.cwd || '').split(/[\\/]/).pop()) === filter.project;
+    })
+    .map((s) => (filter.agent ? { ...s, turns: (s.turns || []).filter((t) => (t.agent || s.agent) === filter.agent) } : s));
+  const u = usage(keep, { days, now, project });
+  const since = u.since;
+
+  const total = tally();
+  const byAgent = new Map();
+  const byProject = new Map();
+  const byDay = new Map(u.daily.map((d) => [d.date, { date: d.date, ...tally() }]));
+  for (const s of keep) {
+    if (s.agent === 'wisp') continue;
+    const p = project(s);
+    for (const t of s.turns || []) {
+      if (!t.startedAt || t.startedAt < since || t.status === 'running') continue;
+      const agent = t.agent || s.agent;
+      const pk = p?.id || s.cwd;
+      if (!byAgent.has(agent)) byAgent.set(agent, { agent, ...tally() });
+      if (!byProject.has(pk)) byProject.set(pk, { id: p?.id || null, name: p?.name || String(s.cwd || '').split(/[\\/]/).pop(), ...tally() });
+      for (const a of t.activity || []) {
+        if (!a?.kind || NOT_TOOLS.has(a.kind)) continue;
+        count(total, a.kind);
+        count(byAgent.get(agent), a.kind);
+        count(byProject.get(pk), a.kind);
+        const d = byDay.get(dayKey(a.t || t.startedAt));
+        if (d) count(d, a.kind);
+      }
+    }
+  }
+  const outcome = (b) => ({ turns: b.turns, cost: b.cost, priced: b.priced, successRate: b.successRate });
+  const runs = new Map();
+  for (const r of u.runners) {
+    const b = runs.get(r.agent) || { turns: 0, done: 0, cost: 0, priced: 0 };
+    runs.set(r.agent, { turns: b.turns + r.turns, done: b.done + r.done, cost: b.cost + r.cost, priced: b.priced + r.priced });
+  }
+  const withRuns = (a) => {
+    const r = runs.get(a.agent) || { turns: 0, done: 0, cost: 0, priced: 0 };
+    return { ...a, turns: r.turns, cost: Math.round(r.cost * 10000) / 10000, priced: r.priced, successRate: r.turns ? r.done / r.turns : null };
+  };
+  const projectRuns = new Map(u.projects.map((p) => [p.id || p.name, p]));
+  return {
+    days: u.days,
+    since,
+    filter: { agent: filter.agent || null, project: filter.project || null },
+    total: { ...total, sessions: u.total.sessions, ...outcome(u.total), inputTokens: u.total.inputTokens, outputTokens: u.total.outputTokens, questions: u.total.questions },
+    kinds: Object.entries(total.kinds).map(([kind, calls]) => ({ kind, calls })).sort((a, b) => b.calls - a.calls),
+    agents: ranked(byAgent).map(withRuns),
+    projects: ranked(byProject).map((p) => ({ ...p, ...outcome(projectRuns.get(p.id || p.name) || { turns: 0, cost: 0, priced: 0, successRate: null }) })),
+    daily: [...byDay.values()],
+  };
+}
+
+// toolStats() as markdown for an agent to read.
+export function toolStatsText(st) {
+  const pct = (r) => (r === null || r === undefined ? '—' : `${Math.round(r * 100)}%`);
+  const usd = (b) => (b.priced ? `$${b.cost.toFixed(2)}${b.priced < b.turns ? ` (${b.priced}/${b.turns} turns priced)` : ''}` : '—');
+  const kinds = (k) => Object.entries(k).sort((a, b) => b[1] - a[1]).map(([n, c]) => `${n} ${c}`).join(', ') || '—';
+  const scope = [st.filter.agent && `harness ${st.filter.agent}`, st.filter.project && `project ${st.filter.project}`].filter(Boolean).join(', ');
+  const t = st.total;
+  const out = [
+    `## wisp tool stats — last ${st.days} day${st.days === 1 ? '' : 's'}${scope ? ` (${scope})` : ''}`,
+    `${t.calls} tool calls in ${t.turns} turns across ${t.sessions} sessions. Success rate ${pct(t.successRate)}, cost ${usd(t)}, ${t.questions} questions to the user, ${t.inputTokens} input / ${t.outputTokens} output tokens.`,
+    '',
+    'Kinds are wisp’s categories, not harness tool names: run = shell commands, read / edit / search = files, web = fetch and search, agent = subagents, tool = other (MCP) tools, ask = questions to the user, wait = waiting on the user or a background task.',
+  ];
+  if (!t.turns) return [...out, '', 'No finished turns in this range.'].join('\n');
+  out.push('', '### By kind', '| kind | calls | share |', '|---|---:|---:|');
+  for (const k of st.kinds) out.push(`| ${k.kind} | ${k.calls} | ${t.calls ? Math.round((k.calls / t.calls) * 100) : 0}% |`);
+  out.push('', '### By harness', '| harness | calls | turns | success | cost | top kinds |', '|---|---:|---:|---:|---:|---|');
+  for (const a of st.agents) out.push(`| ${a.agent} | ${a.calls} | ${a.turns} | ${pct(a.successRate)} | ${usd(a)} | ${kinds(a.kinds)} |`);
+  out.push('', '### By project', '| project | calls | turns | success | cost | top kinds |', '|---|---:|---:|---:|---:|---|');
+  for (const p of st.projects) out.push(`| ${p.name} | ${p.calls} | ${p.turns} | ${pct(p.successRate)} | ${usd(p)} | ${kinds(p.kinds)} |`);
+  out.push('', '### By day (days with activity)', '| day | calls | kinds |', '|---|---:|---|');
+  for (const d of st.daily.filter((d) => d.calls)) out.push(`| ${d.date} | ${d.calls} | ${kinds(d.kinds)} |`);
+  return out.join('\n');
+}

package/server/welcome.js

@@ -129,8 +129,8 @@ export function welcomeSession() {
               title: 'Permission modes (pick per launch)',
               items: [
                 { text: 'Plan — read-only, the agent proposes', done: true },
-                { text: 'Edits — the agent may change files, no shell prompts', done: true },
-                { text: 'Full auto — no permission prompts at all; use on trusted repos', done: false },
+                { text: 'Edits — the agent may change files; anything else it needs, you approve', done: true },
+                { text: 'Full auto — no permission prompts at all; the default, each task in its own worktree', done: true },
               ],
             },
             {

package/web/css/composer.css

@@ -60,3 +60,25 @@
 .c-runner.changed .rb-logo { margin-right: 4px; }
 .c-runner:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }
 .cr-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+
+/* ---------- task mentions (features/mentions.js) ---------- */
+/* In a prompt box: the textarea's own text sits over a mirror that paints a chip under each @Title. */
+.mn-wrap { position: relative; }
+.mn-wrap > textarea { position: relative; z-index: 1; }
+.mn-mirror {
+  position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; pointer-events: none;
+  border-style: solid; border-color: transparent; color: transparent;
+}
+.mn-wrap:not(.has-mn) .mn-mirror { display: none; }
+.mn-mirror mark.mn {
+  color: transparent; border-radius: 4px;
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+.launcher.docked:not(:focus-within):not(:has(.open)) .mn-wrap { flex: 1; min-width: 0; }
+/* In a sent prompt: the same chip, with the task's title; a link opens that task. */
+:is(a, span).mn {
+  padding: 0 5px; border-radius: 5px; font-weight: 500; color: var(--accent-ink); text-decoration: none;
+  background: color-mix(in srgb, var(--accent) 12%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone;
+}
+a.mn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

package/web/css/feed.css

@@ -96,6 +96,7 @@
 .it-bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; }
 .it-meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
 .it-actions { display: flex; gap: 2px; flex: none; }
+.it-done:hover { color: var(--good); }
 .it-body .earlier { display: block; margin: 4px 0 0 18px; }
 .it-dock { padding: 4px 14px 14px; }
 
@@ -206,3 +207,29 @@
 .q-own { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
 .ask-card.sent { opacity: 0.5; pointer-events: none; }
 
+/* approvals: live (paused on a tool call) and after the fact (what the permissions blocked) */
+.ask-card.perm .q-head { color: var(--warn); }
+.ask-card.perm .q-text code { font-size: 0.86em; }
+.perm-detail {
+  margin: -4px 0 12px; padding: 9px 12px; max-height: 180px; overflow: auto; border-radius: 8px;
+  background: var(--surface-2); border: 1px solid var(--line); font: 12.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word;
+}
+.ask-card.perm .opt.go { border-color: color-mix(in srgb, var(--good) 55%, var(--line-2)); }
+.ask-card.perm .opt.no { color: var(--ink-2); }
+.b-blocked {
+  padding: 14px 16px; border-radius: var(--radius); background: var(--surface);
+  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
+}
+.b-blocked.resolved { background: var(--surface-2); border-color: var(--line); }
+.b-blocked .q-head { margin-bottom: 8px; }
+.b-blocked.resolved .q-head { color: var(--muted); }
+.bl-state { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--muted); }
+.bl-state svg { width: 13px; height: 13px; }
+.bl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.bl-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
+.bl-tool { font: 500 11px var(--mono); padding: 1px 6px; border-radius: 5px; background: var(--bg-2); color: var(--ink-2); flex: none; }
+.bl-items code { font: 12.5px/1.45 var(--mono); color: var(--ink); word-break: break-all; min-width: 0; }
+.bl-items small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
+.bl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
+.bl-note { font-size: 12px; color: var(--muted); }
+

package/web/css/ship.css

@@ -53,13 +53,13 @@
 .pill.pr-merged, .pr-strip.pr-merged { --tone: #8250df; }
 .pill.pr-closed, .pr-strip.pr-closed { --tone: var(--faint); }
 .pr-strip {
-  display: flex; align-items: center; gap: 8px; margin: 0 14px 4px; padding: 5px 6px 5px 10px; border-radius: 9px;
+  display: flex; align-items: center; gap: 8px; margin: 8px 14px 4px; padding: 5px 6px 5px 10px; border-radius: 9px;
   font-size: 12.5px; background: color-mix(in srgb, var(--tone) 7%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
 }
 .pr-strip[hidden] { display: none; }
 .pr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; }
 .pr-strip.pr-pending .pr-dot { animation: pulse 1.4s ease-in-out infinite; }
-.pr-num { font-weight: 600; color: var(--ink); }
+.pr-num { font-weight: 600; color: var(--ink); white-space: nowrap; }
 .pr-line { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pr-strip .ghost .i { width: 13px; height: 13px; }
 .pr-strip .pr-merge { color: var(--good); font-weight: 500; }

package/web/index.html

@@ -42,6 +42,7 @@
       <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M12 11v6M12 7.5v.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
       <symbol id="i-warn" viewBox="0 0 24 24"><path d="M12 3.5l9.5 16.5h-19L12 3.5z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 10v4.5M12 17.2v.3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
       <symbol id="i-ask" viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 016.5 3h11A2.5 2.5 0 0120 5.5v8a2.5 2.5 0 01-2.5 2.5H10l-4.5 4v-4h0A1.5 1.5 0 014 14.5v-9z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M10 8.2a2 2 0 113 1.7c-.7.4-1 .8-1 1.6M12 13.2v.3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
+      <symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="10.5" width="14" height="9.5" rx="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M8.5 10.5V8a3.5 3.5 0 017 0v2.5M12 14.3v2" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
       <symbol id="i-pen" viewBox="0 0 24 24"><path d="M4 20l1-4L16 5l3 3L8 19l-4 1z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></symbol>
       <symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6L12 3zM18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2z" fill="currentColor"/></symbol>
       <symbol id="i-stop" viewBox="0 0 24 24"><rect x="6.5" y="6.5" width="11" height="11" rx="2" fill="currentColor"/></symbol>

package/web/js/blocks.js

@@ -788,6 +788,52 @@ R.question = (b, ctx) => {
   return node;
 };
 
+// What the turn's permissions refused. On the latest turn: Allow & retry (exactly these where the
+// harness can scope a grant, else one follow-up in Full auto) or Deny.
+R.blocked = (b, ctx) => {
+  const items = (b.items || []).filter((i) => i && typeof i === 'object');
+  const t = ctx.turn || {};
+  const scoped = !!t.blocked?.length && t.blocked.every((i) => i.rule !== undefined);
+  const open = ctx.isLatest && !t.approval && !!ctx.approve && ctx.session?.state !== 'running';
+  const state = (a) => (a === 'allowed' ? `${icon('check')}Allowed and retried` : a === 'denied' ? `${icon('x')}Denied` : '');
+  const node = el(`
+    <div class="b-blocked ${open ? '' : 'resolved'}">
+      <div class="q-head">${icon('lock')}<span>Blocked by permissions</span>${t.approval ? `<span class="bl-state">${state(t.approval)}</span>` : ''}</div>
+      <ul class="bl-items">${items
+        .map((i) => `<li><span class="bl-tool">${esc(i.tool || 'tool')}</span>${i.detail ? `<code>${esc(i.detail)}</code>` : ''}${i.why ? `<small>${inlineMd(i.why)}</small>` : ''}</li>`)
+        .join('')}</ul>
+      ${open ? `<div class="bl-foot">
+        <button class="primary sm bl-allow">${icon('check')}Allow &amp; retry</button>
+        <button class="ghost sm bl-deny">Deny</button>
+        <span class="bl-note">${scoped ? 'Allows exactly these, for the retry only.' : 'This harness can’t allow single actions, so the retry runs in Full auto (that follow-up only).'}</span>
+      </div>` : ''}
+    </div>`);
+  if (!open) return node;
+  const decide = async (allow) => {
+    // Instant: the card settles at once and goes back if the server says no.
+    const foot = node.querySelector('.bl-foot');
+    const head = node.querySelector('.q-head');
+    const tag = el(`<span class="bl-state">${state(allow ? 'allowed' : 'denied')}</span>`);
+    node.classList.add('resolved');
+    foot.hidden = true;
+    head.append(tag);
+    try {
+      await ctx.approve(allow);
+    } catch {
+      node.classList.remove('resolved');
+      foot.hidden = false;
+      tag.remove();
+    }
+  };
+  node.querySelector('.bl-allow').onclick = () => {
+    decide(true);
+  };
+  node.querySelector('.bl-deny').onclick = () => {
+    decide(false);
+  };
+  return node;
+};
+
 R.actions = (b, ctx) => {
   const items = (b.items || []).map((it, i) => (typeof it === 'string' ? { label: it, command: it, _i: i } : { ...it, _i: i }));
   const node = el(`

package/web/js/features/actions.js

@@ -15,8 +15,9 @@ import { saveAsRecipe } from './automations.js';
 import { compareView } from './compare.js';
 import { collapse, expand, handOff, renderFeed, setFocus } from './feed.js';
 import { launchBehind } from './launcher.js';
+import { copyTaskId, mentionBox } from './mentions.js';
 import { runnerPicker } from './runner-picker.js';
-import { agentName, effortsFor, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
+import { agentName, DEFAULT_MODE, effortsFor, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace } from './scroll.js';
 import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
 
@@ -143,6 +144,7 @@ export function moreMenu(id, anchor) {
   const menu = el(`
     <div class="menu" style="top:${r.bottom + 6}px;right:${innerWidth - r.right}px">
       <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
+      <button data-a="copy-id">${icon('copy')}Copy task ID</button>
       ${s.agentSessionId ? `<button data-a="copy">${icon('copy')}Copy resume command</button>` : ''}
       <button data-a="folder">${icon('folder')}Open project in editor</button>
       ${canRollback ? `<button data-a="rollback">${icon(rolledBack ? 'rerun' : 'replay')}${rolledBack ? 'Re-apply latest turn' : 'Restore to before latest turn'}</button>` : ''}
@@ -153,6 +155,7 @@ export function moreMenu(id, anchor) {
     const a = e.target.closest('button')?.dataset.a;
     close();
     if (a === 'rename') rename(id);
+    if (a === 'copy-id') copyTaskId(id);
     if (a === 'copy') {
       await tryApi(async () => {
         const { command } = await api(`/sessions/${id}/takeover`);
@@ -178,6 +181,7 @@ export function taskMenu(id, e) {
     <div class="menu task" style="top:${e.clientY}px;left:${e.clientX}px">
       ${S.open.has(id) ? `<button data-a="collapse">${icon('chevron')}Collapse${keyHint('O')}</button>` : `<button data-a="open">${icon('chevron')}Open${keyHint('O')}</button>`}
       <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
+      <button data-a="copy-id">${icon('copy')}Copy task ID</button>
       <button data-a="rerun">${icon('rerun')}Rerun…${keyHint('⇧R')}</button>
       ${shippable(s) ? `<button data-a="ship">${icon('send')}${shipLabel(s)}${keyHint('S')}</button>` : ''}
       ${s.pr?.state === 'OPEN' ? `<button data-a="merge">${icon('check')}Merge PR #${s.pr.number}…</button>` : ''}
@@ -193,6 +197,7 @@ export function taskMenu(id, e) {
     if (a === 'open') expand(id);
     if (a === 'collapse') collapse(id);
     if (a === 'rename') rename(id);
+    if (a === 'copy-id') copyTaskId(id);
     if (a === 'rerun') rerun(id);
     if (a === 'ship') shipDialog(id);
     if (a === 'merge') mergePr(id);
@@ -229,7 +234,7 @@ export async function rerun(id) {
   const models = S.agents.find((x) => x.id === agent)?.models || [];
   let model = agent === s.agent && models.some((m) => m.id === s.model) ? s.model : savedModel(agent);
   let effort = agent === s.agent && effortsFor(agent, model).includes(s.effort) ? s.effort : savedEffort(agent, model);
-  let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || 'edits';
+  let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || DEFAULT_MODE.id;
   const files = first.attachments || [];
 
   const node = el(`
@@ -249,12 +254,12 @@ export async function rerun(id) {
     </div>`);
   const close = overlay(node);
   $('.close', node).onclick = close;
-  const ta = $('.rr-prompt', node);
+  const ta = mentionBox($('.rr-prompt', node));
   ta.value = first.prompt;
   autosize(ta);
   const modeBtn = $('[data-a="mode"]', node);
   const paintMode = () => {
-    const m = MODES.find((x) => x.id === mode) || MODES[1];
+    const m = MODES.find((x) => x.id === mode) || DEFAULT_MODE;
     modeBtn.className = `mode-btn m-${m.id}`;
     modeBtn.innerHTML = `${icon(m.icon)}<span>${m.label}</span>`;
     modeBtn.title = m.hint;

package/web/js/features/automations.js

@@ -178,7 +178,7 @@ export function openAutomations({ tab = 'recipes', edit = null, host } = {}) {
         <div class="k-gh"><label><span>Check every</span><select name="every">${[2, 5, 15, 60].map((m) => `<option value="${m}" ${Number(d.every || 5) === m ? 'selected' : ''}>${m} min</option>`).join('')}</select></label></div>
         <label><span>Run</span><select name="recipeId"><option value="">This prompt</option>${recipes.map((r) => `<option value="${r.id}" ${r.id === d.recipeId ? 'selected' : ''}>Recipe: ${esc(r.name)}</option>`).join('')}</select></label>
         <label class="stack k-prompt"><span>Prompt <small class="muted k-vars"></small></span><textarea class="textarea mono" name="prompt" rows="6" spellcheck="false"></textarea></label>
-        <label><span>Mode</span><select name="mode">${modeOptions(d.mode || (d.kind === 'issues' ? 'plan' : 'edits'))}</select></label>
+        <label><span>Mode</span><select name="mode">${modeOptions(d.mode || (d.kind === 'issues' ? 'plan' : 'auto'))}</select></label>
         <div class="au-row"><span>Harness</span></div>
         <p class="au-warn" hidden>${icon('warn')}<span>Issue text comes from GitHub: anyone who can open and label issues can steer this agent. Plan mode only reads; Full auto runs shell commands without asking.</span></p>
         <div class="au-foot"><button type="button" class="ghost sm" data-act="cancel">Cancel</button><button class="primary sm">${d.id ? 'Save' : 'Create trigger'}</button></div>

package/web/js/features/compare.js

@@ -2,6 +2,7 @@
 
 import { countChanges, fmtDuration, renderPresentation } from '../blocks.js';
 import { esc } from '../md.js';
+import { mentionHtml } from '../mention-text.js';
 import { api } from '../core/api.js';
 import { $, el, icon } from '../core/dom.js';
 import { STATUS_LABEL } from '../core/format.js';
@@ -37,7 +38,7 @@ export async function compareView(id) {
   const node = el(`
     <div class="modal compare-modal">
       <header><h2>Compare</h2><button class="icon-btn close">${icon('x')}</button></header>
-      <p class="cmp-prompt">${esc(fulls[0]?.turns[0]?.prompt || '')}</p>
+      <p class="cmp-prompt">${mentionHtml(esc(fulls[0]?.turns[0]?.prompt || ''))}</p>
       <div class="cmp-grid" style="--n:${fulls.length}"></div>
     </div>`);
   const close = overlay(node);

package/web/js/features/composer.js

@@ -1,6 +1,7 @@
 // The composer at the bottom of an expanded card: follow-ups, answers, queued follow-ups.
 
 import { esc } 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';
@@ -10,9 +11,10 @@ import { toggleDone } from './actions.js';
 import { acceptFiles, attachTray, autosize } from './attachments.js';
 import { renderFeed, scheduleRefetch, setFocus } from './feed.js';
 import { feedbackCommand, isFeedback } from './feedback.js';
+import { mentionBox } from './mentions.js';
 import { placeName } from './places.js';
 import { runnerPicker } from './runner-picker.js';
-import { agentById, agentName, effortLabel, effortsFor, harnessesAt, harnessLogo, modeMenu, MODES, runnerTip, savedEffort, savedModel } from './runners.js';
+import { agentById, agentName, DEFAULT_MODE, effortLabel, effortsFor, harnessesAt, harnessLogo, modeMenu, MODES, runnerTip, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace, watching } from './scroll.js';
 import { shipDialog } from './ship.js';
 import { renderBody } from './turns.js';
@@ -47,7 +49,7 @@ export function renderDock(id) {
   dock.append(comp);
   n.tray = attachTray();
   comp.prepend(n.tray.node);
-  const ta = $('.reply', comp);
+  const ta = mentionBox($('.reply', comp));
   autosize(ta, 260);
   acceptFiles(comp, ta, n.tray);
   $('.c-attach', comp).onclick = n.tray.pick;
@@ -78,7 +80,7 @@ export function renderDock(id) {
 
 // The mode the next follow-up runs in: the session's own until the user picks another here.
 // The pick goes out with that follow-up and stays from then on.
-const replyMode = (id) => S.replyModes.get(id) || S.full.get(id)?.mode || 'edits';
+const replyMode = (id) => S.replyModes.get(id) || S.full.get(id)?.mode || DEFAULT_MODE.id;
 
 function setReplyMode(id, mode) {
   if (mode === S.full.get(id)?.mode) S.replyModes.delete(id);
@@ -88,10 +90,10 @@ function setReplyMode(id, mode) {
 
 function paintReplyMode(id, btn) {
   const s = S.full.get(id);
-  const m = MODES.find((x) => x.id === replyMode(id)) || MODES[1];
+  const m = MODES.find((x) => x.id === replyMode(id)) || DEFAULT_MODE;
   const from = s && S.replyModes.has(id) && MODES.find((x) => x.id === s.mode);
   btn.className = `mode-btn c-mode m-${m.id}${from ? ' changed' : ''}`;
-  btn.innerHTML = `${icon(m.icon)}${m.id === 'edits' && !from ? '' : `<span>${m.label}</span>`}`;
+  btn.innerHTML = `${icon(m.icon)}${m === DEFAULT_MODE && !from ? '' : `<span>${m.label}</span>`}`;
   btn.title = from
     ? `${m.label}: ${m.hint}\nYour next follow-up switches this task from ${from.label} to ${m.label}. Shift+Tab to switch`
     : `${m.label}: ${m.hint}\nPick another mode for your next follow-up. Shift+Tab to switch`;
@@ -157,7 +159,9 @@ export function updateDock(id) {
   ta.placeholder = tour
     ? 'This is the tour — launch a real wisp from the box at the top'
     : s.ask
-      ? `Answer ${name}…`
+      ? s.ask.permission
+        ? `Or tell ${name} what to do instead (denies this call)…`
+        : `Answer ${name}…`
       : s.state === 'running'
         ? queueing()
           ? `Queue a follow-up — sent when ${name} finishes`
@@ -189,7 +193,7 @@ function renderQueued(s, list, name) {
     const li = el(`
       <li class="cq">
         <span class="cq-tag">${i === 0 ? `Next · after ${esc(name)} finishes` : `Queued #${i + 1}`}${q.run ? ` · on ${esc(runnerTip(q.run.agent, q.run.model, ''))}` : ''}</span>
-        <span class="cq-text">${esc(q.text)}</span>
+        <span class="cq-text">${mentionHtml(esc(q.text), { link: false })}</span>
         <button class="att-x" title="Cancel this follow-up">${icon('x')}</button>
       </li>`);
     const cancel = () => {

package/web/js/features/launcher.js

@@ -2,6 +2,7 @@
 // machines, a project in each), on what, and shows a placeholder card until the server answers.
 
 import { esc } from '../md.js';
+import { plain } from '../mention-text.js';
 import { api } from '../core/api.js';
 import * as bus from '../core/bus.js';
 import { $, $$, el, icon } from '../core/dom.js';
@@ -14,12 +15,13 @@ import { openAutomations, recipeParams, runRecipe } from './automations.js';
 import { renderFeed } from './feed.js';
 import { feedbackCommand, isFeedback } from './feedback.js';
 import { connectMachine, offlineToast, openMachines } from './machines.js';
+import { mentionBox } from './mentions.js';
 import { askNotify } from './notify.js';
 import { MACHINE_STATE, machineById, placeName, placeOf, projectById, projectsAt, projectTitle } from './places.js';
 import { openProjects } from './projects.js';
 import { runnerPicker } from './runner-picker.js';
 import { needsSetup, nudgeSetup, renderSetup } from './setup.js';
-import { agentName, agentsAt, effortLabel, effortsFor, harnessesAt, harnessLogo, MAX_RUNNERS, modeMenu, MODES, paintRunnerBtn, runnerTip, savedEffort, savedModel } from './runners.js';
+import { agentName, agentsAt, DEFAULT_MODE, effortLabel, effortsFor, harnessesAt, harnessLogo, MAX_RUNNERS, modeMenu, MODES, paintRunnerBtn, runnerTip, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace, stage, topInset } from './scroll.js';
 import { canLead, paintTeamBtn, teamEditor } from './team.js';
 
@@ -38,7 +40,7 @@ function syncWhere() {
 
 export function renderLauncher() {
   const box = $('#launcher');
-  const mode = S.config.defaults.mode || 'edits';
+  const mode = S.config.defaults.mode || DEFAULT_MODE.id;
   const here = harnessesAt(launch.where, { auto: true });
   const chosen = here.find((a) => a.id === (S.config.defaults.agent || 'auto'));
   let agent = chosen?.available ? chosen : here.find((a) => a.available) || chosen || here[0];
@@ -63,9 +65,9 @@ export function renderLauncher() {
   renderLaunchChips();
   renderSetup();
 
-  const ta = $('#prompt', box);
+  const ta = mentionBox($('#prompt', box));
   const tray = attachTray();
-  ta.before(tray.node);
+  ta.parentNode.before(tray.node); // before the mention box's wrapper
   acceptFiles(box, ta, tray);
   autosize(ta);
   ta.value = S.drafts.get('home') || '';
@@ -88,14 +90,14 @@ export function renderLauncher() {
   $('#whereBtn', box).onclick = (e) => whereMenu(e.currentTarget);
   paintWhereBtn();
 
-  // Mode is set-and-forget, so it's one small button: just an icon on the default (Edits),
-  // spelled out when it's Plan or Full auto so you can't miss it.
+  // Mode is set-and-forget, so it's one small button: just an icon on the default (Full auto),
+  // spelled out when it's Plan or Edits so you can't miss it.
   let curMode = mode;
   const modeBtn = $('#mode', box);
   const paintMode = () => {
-    const m = MODES.find((x) => x.id === curMode) || MODES[1];
+    const m = MODES.find((x) => x.id === curMode) || DEFAULT_MODE;
     modeBtn.className = `mode-btn m-${m.id}`;
-    modeBtn.innerHTML = `${icon(m.icon)}${m.id === 'edits' ? '' : `<span>${m.label}</span>`}`;
+    modeBtn.innerHTML = `${icon(m.icon)}${m === DEFAULT_MODE ? '' : `<span>${m.label}</span>`}`;
     modeBtn.title = `${m.label}: ${m.hint}\nShift+Tab to switch`;
   };
   const setMode = (id) => {
@@ -486,7 +488,7 @@ function launchedFx(from, to) {
 let pendingSeq = 0;
 function addPending(prompt, { project: p, m }, { agent, model, effort }) {
   const id = `pending-${++pendingSeq}`;
-  const line = prompt.split('\n')[0].replace(/\s+/g, ' ');
+  const line = plain(prompt).split('\n')[0].replace(/\s+/g, ' ');
   const now = Date.now();
   S.sessions.set(id, {
     id,

package/web/js/features/mentions.js

@@ -0,0 +1,125 @@
+// Task mentions in a prompt box, the way Linear does issue links: copy a task's id (right-click a
+// card → Copy task ID), paste it into a prompt, and it shows as the task's title. The agent gets
+// the id and reads that task with wisp_session.
+//
+// A textarea can't hold chips, so the box shows `@Title` as plain text and a mirror behind it,
+// laid out exactly like the textarea, paints a chip under each mention. The ids stay on the box
+// (ta.mentions). Its `value` reads and writes the stored form, `@[Title](wisp:<id>)`, so drafts,
+// sends and restores elsewhere keep the mentions without knowing about them.
+
+import { esc } from '../md.js';
+import { el } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { toast } from '../ui/toast.js';
+import { cleanTitle, decode, encode, pastedTasks, spans } from '../mention-text.js';
+
+const NATIVE = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+// What the mirror copies from the textarea, so its text wraps on the same lines.
+const METRICS = ['font', 'letterSpacing', 'wordSpacing', 'lineHeight', 'textTransform', 'textIndent', 'tabSize', 'whiteSpace', 'overflowWrap', 'wordBreak', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'boxSizing'];
+
+export function mentionBox(ta) {
+  if (ta.mentions) return ta;
+  ta.mentions = [];
+  const wrap = el('<div class="mn-wrap"></div>');
+  const mirror = el('<div class="mn-mirror" aria-hidden="true"></div>');
+  ta.replaceWith(wrap);
+  wrap.append(mirror, ta);
+  const shown = () => NATIVE.get.call(ta);
+
+  Object.defineProperty(ta, 'value', {
+    configurable: true,
+    get: () => encode(shown(), ta.mentions),
+    set: (v) => {
+      const d = decode(v);
+      ta.mentions = d.mentions;
+      NATIVE.set.call(ta, d.text);
+      paint();
+    },
+  });
+
+  function paint() {
+    const text = shown();
+    const found = ta.mentions.length ? spans(text, ta.mentions) : [];
+    wrap.classList.toggle('has-mn', found.length > 0);
+    if (!found.length) return (mirror.textContent = '');
+    const cs = getComputedStyle(ta);
+    for (const k of METRICS) mirror.style[k] = cs[k];
+    // A scrollbar narrows the textarea's text; narrow the mirror's the same.
+    const bar = ta.offsetWidth - ta.clientWidth - parseFloat(cs.borderLeftWidth) - parseFloat(cs.borderRightWidth);
+    mirror.style.paddingRight = `${parseFloat(cs.paddingRight) + Math.max(0, bar)}px`;
+    let html = '';
+    let at = 0;
+    for (const s of found) {
+      html += `${esc(text.slice(at, s.start))}<mark class="mn">${esc(text.slice(s.start, s.end))}</mark>`;
+      at = s.end;
+    }
+    mirror.innerHTML = `${html}${esc(text.slice(at))}​`;
+    sync();
+  }
+  const sync = () => {
+    mirror.scrollTop = ta.scrollTop;
+    mirror.scrollLeft = ta.scrollLeft;
+  };
+
+  ta.addEventListener('input', paint);
+  ta.addEventListener('scroll', sync);
+  new ResizeObserver(paint).observe(ta);
+
+  ta.addEventListener('paste', (e) => {
+    if (e.clipboardData?.files?.length) return; // attachments take those
+    const ids = pastedTasks(e.clipboardData?.getData('text/plain'), (id) => S.sessions.has(id) && !S.sessions.get(id).pending);
+    if (!ids) return;
+    e.preventDefault();
+    for (const id of ids) {
+      const title = cleanTitle(S.sessions.get(id).title);
+      if (!ta.mentions.some((m) => m.id === id)) ta.mentions.push({ id, title });
+    }
+    const before = shown().slice(0, ta.selectionStart);
+    const lead = before && !/\s$/.test(before) ? ' ' : '';
+    insert(lead + ids.map((id) => `@${ta.mentions.find((m) => m.id === id).title}`).join(' ') + ' ');
+  });
+
+  // Backspace right after a mention (or Delete right before one) takes the whole mention.
+  ta.addEventListener('keydown', (e) => {
+    if ((e.key !== 'Backspace' && e.key !== 'Delete') || e.isComposing || e.altKey || e.metaKey || e.ctrlKey) return;
+    const { selectionStart: a, selectionEnd: b } = ta;
+    if (a !== b || !ta.mentions.length) return;
+    const hit = spans(shown(), ta.mentions).find((s) => (e.key === 'Backspace' ? s.end === a : s.start === a));
+    if (!hit) return;
+    e.preventDefault();
+    ta.setSelectionRange(hit.start, hit.end);
+    insert('');
+  });
+
+  // Through the editing commands, so Cmd+Z undoes it like typing.
+  function insert(text) {
+    if (!document.execCommand('insertText', false, text)) {
+      ta.setRangeText(text, ta.selectionStart, ta.selectionEnd, 'end');
+      ta.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  }
+
+  paint();
+  return ta;
+}
+
+export async function copyTaskId(id) {
+  const s = S.sessions.get(id);
+  if (!s || s.pending) return;
+  try {
+    await navigator.clipboard.writeText(id);
+    toast(`Copied the ID of <b>${esc(cleanTitle(s.title))}</b>. Paste it into a prompt to point an agent at this task.`);
+  } catch {
+    toast(`Couldn’t copy. The task ID is <code>${id}</code>`, { tone: 'bad', timeout: 8000 });
+  }
+}
+
+// Clicking a mention chip in a turn's prompt opens that task, or says it's gone.
+document.addEventListener('click', (e) => {
+  const a = e.target.closest?.('a.mn[href^="#/s/"]');
+  if (!a) return;
+  const id = a.getAttribute('href').slice(4);
+  if (S.sessions.has(id)) return; // the #/s/ route reveals it
+  e.preventDefault();
+  toast('That task is no longer in wisp.', { tone: 'bad' });
+});

package/web/js/features/notify.js

@@ -20,7 +20,7 @@ export function askNotify() {
 export function notifyFinished(s) {
   const viewing = S.open.has(s.id) && watching(s.id) && document.hasFocus();
   if (viewing) return;
-  let verb = s.state === 'waiting' ? 'has a question' : 'is ready';
+  let verb = s.state === 'waiting' ? (s.approval ? 'needs your approval' : 'has a question') : 'is ready';
   // A task run in several places (or compared) says so once, when its last run finishes.
   const runs = s.groupId ? [...S.sessions.values()].filter((x) => x.groupId === s.groupId && !x.archived) : [];
   if (runs.length > 1 && s.state !== 'waiting') {