wisp-agents 0.15.0 → 0.16.0

package/web/js/features/turns.js

@@ -0,0 +1,401 @@
+// An expanded card's body: its turns (prompt, live progress or presentation, trail), newest open
+// and older ones folded.
+
+import { countChanges, fmtDuration, renderPresentation } from '../blocks.js';
+import { esc, md } from '../md.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 { 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 { scrollByPx, watching } from './scroll.js';
+import { renderPrStrip, shipDialog } from './ship.js';
+import { copiesOf, memberLabel, renderSubs, subKey, teamLiveHtml, teamSize } from './team.js';
+
+const KIND_ICON = { read: 'read', edit: 'pen', run: 'terminal', search: 'search', web: 'web', agent: 'agent', plan: 'plan', tool: 'tool', text: 'text', error: 'warn', ask: 'ask', answer: 'check', wait: 'ask', background: 'clock' };
+
+export function ctxFor(s, turn, isLatest) {
+  return {
+    session: s,
+    turn,
+    isLatest,
+    reply: (text) => sendReply(s.id, text),
+    draft: (text) => draftInto(s.id, text),
+    openFile: (p, line) => openInEditor(s, p, line),
+    fileUrl: (p) => `/api/sessions/${s.id}/file?path=${encodeURIComponent(p)}`,
+    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),
+  };
+}
+
+// Older turns render as one-line folded rows; past this many they hide behind "Show earlier".
+const VISIBLE_TURNS = 8;
+
+export function renderBody(id, { fresh }) {
+  const s = S.full.get(id);
+  const n = S.nodes.get(id);
+  if (!s || !n) return;
+  const summary = S.sessions.get(id) || {};
+
+  if (fresh || !n.body?.querySelector('.turns')) {
+    n.turnNodes.clear();
+    const body = el(`
+      <div class="it-body">
+        <div class="it-bar">
+          <div class="it-meta"></div>
+          <div class="it-actions">
+            <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" 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="it-dock"></div>
+      </div>`);
+    n.body ? n.body.replaceWith(body) : n.card.append(body);
+    n.body = body;
+    $('.it-bar', body).addEventListener('click', (e) => {
+      const a = e.target.closest('[data-a]')?.dataset.a;
+      if (a === 'replay') replay(id);
+      if (a === 'takeover') takeOver(id);
+      if (a === 'ship') shipDialog(id);
+      if (a === 'more') moreMenu(id, e.target.closest('button'));
+    });
+    $('.earlier', body).onclick = () => ((n.showAll = true), renderBody(id, { fresh: false }));
+    renderDock(id);
+  }
+
+  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.
+  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>` : ''}
+    ${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.
+  renderPrStrip(id);
+  $$('[data-a="done"]', body).forEach((b) => {
+    b.classList.toggle('on', s.state === 'done');
+    b.hidden = s.state === 'running' || s.state === 'waiting';
+    $('span', b).textContent = s.state === 'done' ? 'Reopen' : 'Mark done';
+  });
+  $('[data-a="takeover"]', body).hidden = !s.agentSessionId;
+
+  // Turns: keep nodes whose content hasn't changed so animations don't replay.
+  const turnsEl = $('.turns', body);
+  const turns = n.showAll ? s.turns : s.turns.slice(-VISIBLE_TURNS);
+  const hiddenCount = s.turns.length - turns.length;
+  const earlier = $('.earlier', body);
+  earlier.hidden = !hiddenCount;
+  earlier.textContent = `Show ${hiddenCount} earlier turn${hiddenCount === 1 ? '' : 's'}`;
+  // A new turn re-folds everything older, so the latest exchange is what's open by default.
+  const latestId = s.turns.at(-1)?.id;
+  const newTurn = n.latestTurn !== latestId;
+  if (newTurn) (n.unfolded.clear(), (n.latestTurn = latestId));
+  // Folding the last answer when a follow-up starts can take a screen or more out of the card
+  // above the composer. Hold the composer still, so the new exchange lands where the user was
+  // typing instead of the whole card sliding off the top of the screen.
+  const watched = watching(id);
+  const dock = watched && newTurn && !fresh ? $('.it-dock', body) : null;
+  const dockTop = dock?.getBoundingClientRect().top;
+  const keep = new Set();
+  let firstNew = null;
+  turns.forEach((t, i) => {
+    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 prev = n.turnNodes.get(t.id);
+    let node = prev?.node;
+    if (!prev || prev.key !== key) {
+      const toggle = () => (n.unfolded.has(t.id) ? n.unfolded.delete(t.id) : n.unfolded.add(t.id), renderBody(id, { fresh: false }));
+      node = folded ? renderFoldedTurn(t, toggle) : renderTurn(s, t, isLatest, isLatest ? null : toggle);
+      if (prev) prev.node.replaceWith(node);
+      if (!prev && !fresh && !folded) firstNew ??= node;
+      if (prev && prev.status === 'running' && t.status !== 'running') firstNew ??= node;
+      n.turnNodes.set(t.id, { key, node, status: t.status });
+    }
+    keep.add(t.id);
+    // Place the turn without re-inserting a node that's already here: re-parenting restarts its
+    // CSS animations, so a refetch would replay the whole card's entrance.
+    if (turnsEl.children[i] !== node) turnsEl.insertBefore(node, turnsEl.children[i] || null);
+  });
+  for (const [tid, v] of n.turnNodes) if (!keep.has(tid)) (v.node.remove(), n.turnNodes.delete(tid));
+
+  updateDock(id);
+  if (dock?.isConnected) scrollByPx(dock.getBoundingClientRect().top - dockTop);
+  if (firstNew && watched) requestAnimationFrame(() => firstNew.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+}
+
+function renderFoldedTurn(t, unfold) {
+  const hero = t.presentation?.blocks?.find((b) => b.type === 'hero');
+  const node = el(`
+    <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>
+        ${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>
+      </button>
+    </article>`);
+  $('.t-fold', node).onclick = unfold;
+  return node;
+}
+
+// A follow-up that switched the mode says so, next to the model it ran on.
+function modeSwitch(s, t) {
+  const i = s.turns.indexOf(t);
+  const prev = s.turns.slice(0, i).findLast((x) => x.mode)?.mode;
+  const m = t.mode && prev && t.mode !== prev && MODES.find((x) => x.id === t.mode);
+  return m ? `<span class="t-mode m-${m.id}" title="Switched from ${esc(MODES.find((x) => x.id === prev)?.label || prev)} to ${m.label} for this follow-up">${icon(m.icon)}${m.label}</span>` : '';
+}
+
+// `fold` is set for older turns the user unfolded, so they can tuck them away again.
+function renderTurn(s, t, isLatest, fold) {
+  const node = el(`<article class="turn ${t.rolledBackAt ? 'is-rolled-back' : ''}" data-turn="${t.id}"></article>`);
+  const long = t.prompt.length > 360 || t.prompt.split('\n').length > 5;
+  const cp = t.checkpoint;
+  const cpLabel = cp?.head ? `${cp.branch ? `${cp.branch}@` : ''}${cp.head.slice(0, 7)}${cp.dirty ? '*' : ''}` : '';
+  const ask = el(`
+    <div class="ask">
+      <div class="ask-text ${long ? 'clamped' : ''}">${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">
+        ${modelBadge(t.agent || s.agent, t.model ?? s.model, t.effort ?? s.effort)}
+        ${modeSwitch(s, t)}
+        <time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time>
+        ${cpLabel ? `<span class="cp-sha" title="Git checkpoint before this turn (${esc(cp.head)}${cp.dirty ? ' + uncommitted changes' : ''})">${icon('branch')}${esc(cpLabel)}</span>` : ''}
+        ${t.rolledBackAt ? '<span class="rev-tag">Rolled back</span>' : ''}
+      </div>
+      ${fold ? `<button class="ghost xs t-unfold" title="Collapse this exchange">${icon('chevron', 'chev')}</button>` : ''}
+    </div>`);
+  if (fold) ask.querySelector('.t-unfold').onclick = fold;
+  ask.querySelector('.more-btn')?.addEventListener('click', (e) => {
+    ask.querySelector('.ask-text').classList.toggle('clamped');
+    e.target.textContent = ask.querySelector('.ask-text').classList.contains('clamped') ? 'Show all' : 'Show less';
+  });
+  ask.querySelectorAll('.ask-atts img').forEach((img) => img.addEventListener('click', () => overlay(el(`<img class="lightbox" src="${img.src}">`))));
+  node.append(ask);
+
+  if (t.status === 'running') {
+    node.append(renderWorking(s, t));
+  } else {
+    node.append(renderPresentation(t.presentation, ctxFor(s, t, isLatest)));
+    const subs = renderSubs(s, t);
+    if (subs) node.append(subs);
+    node.append(renderTrail(s, t));
+  }
+  return node;
+}
+
+function renderWorking(s, t) {
+  const waiting = !!s.ask;
+  const node = el(`
+    <div class="w-panel ${waiting ? 'waiting' : ''}">
+      <div class="w-orb"><div class="orb live"><i></i><i></i><i></i></div></div>
+      <div class="w-body">
+        <div class="w-status">
+          <b>${waiting ? `${esc(agentName(s.agent))} is waiting for you` : `${esc(agentName(s.agent))} is working`}</b>
+          <span class="elapsed" data-start="${t.startedAt}">${fmtDuration(Date.now() - t.startedAt)}</span>
+          <span class="w-count">${t.activity.filter((a) => a.kind !== 'text').length} actions</span>
+        </div>
+        <div class="ask-slot"></div>
+        ${teamLiveHtml(s, t)}
+        <ul class="ticker"></ul>
+        <div class="w-actions">
+          <button class="link xs peek">Show all activity</button>
+          ${s.queue?.length ? `<span class="w-queued">${s.queue.length} follow-up${s.queue.length > 1 ? 's' : ''} queued</span>` : ''}
+          <span class="grow"></span>
+          <button class="ghost sm danger stop">${icon('stop')}Stop</button>
+        </div>
+        <ul class="log" hidden></ul>
+      </div>
+    </div>`);
+  if (waiting) $('.ask-slot', node).append(renderAskCard(s));
+  const ticker = $('.ticker', node);
+  t.activity
+    .filter((a) => a.kind !== 'text')
+    .slice(-5)
+    .forEach((a) => ticker.prepend(actItem(a)));
+  $('.stop', node).onclick = async (e) => {
+    // Shows at once; the run winds down and the live update replaces this panel.
+    const btn = e.currentTarget;
+    btn.disabled = true;
+    btn.lastChild.textContent = 'Stopping…';
+    $('.w-status b', node).textContent = `Stopping ${agentName(s.agent)}…`;
+    await api(`/sessions/${s.id}/stop`, { method: 'POST', body: {} }).catch((err) => {
+      btn.disabled = false;
+      btn.lastChild.textContent = 'Stop';
+      $('.w-status b', node).textContent = `${agentName(s.agent)} is working`;
+      toastError(err);
+    });
+  };
+  $('.peek', node).onclick = (e) => {
+    const log = $('.log', node);
+    log.hidden = !log.hidden;
+    e.target.textContent = log.hidden ? 'Show all activity' : 'Hide activity';
+    if (!log.hidden) log.innerHTML = t.activity.map((a) => actItem(a).outerHTML).join('');
+  };
+  return node;
+}
+
+function actItem(a) {
+  return el(`<li class="act k-${a.kind}">${icon(KIND_ICON[a.kind] || 'tool')}<span>${esc(a.label || '')}</span></li>`);
+}
+
+function renderAskCard(s) {
+  const a = s.ask;
+  const node = 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>
+      ${a.context ? `<div class="prose q-context">${md(a.context)}</div>` : ''}
+      ${a.options?.length ? `<div class="q-opts">${a.options.map((o, i) => `<button class="opt" data-i="${i}"><span class="k">${i + 1}</span>${esc(o)}</button>`).join('')}</div>` : ''}
+      <form class="q-own"><input class="input" placeholder="${a.options?.length ? 'Or answer in your own words…' : 'Your answer…'}"><button class="primary sm">Answer</button></form>
+    </div>`);
+  const answer = async (text) => {
+    if (!text.trim()) return;
+    node.classList.add('sent');
+    const undo = startOptimistic(s.id, text, null, { answering: true });
+    try {
+      await api(`/sessions/${s.id}/answer`, { method: 'POST', body: { text } });
+      if (undo) scheduleRefetch(s.id);
+    } catch (e) {
+      node.classList.remove('sent');
+      undo?.();
+      toastError(e);
+    }
+  };
+  node.addEventListener('click', (e) => {
+    const b = e.target.closest('.opt');
+    if (b) answer(a.options[b.dataset.i]);
+  });
+  $('form', node).onsubmit = (e) => (e.preventDefault(), answer($('input', node).value));
+  return node;
+}
+
+function renderTrail(s, t) {
+  const acts = t.activity || [];
+  const count = (k) => acts.filter((a) => a.kind === k).length;
+  const parts = [
+    ['read', 'read', count('read')],
+    ['pen', 'edited', count('edit')],
+    ['terminal', 'ran', count('run')],
+    ['search', 'searched', count('search')],
+    ['web', 'web', count('web')],
+  ].filter((p) => p[2]);
+  const totals = (t.changes || []).reduce((acc, c) => {
+    const n = countChanges(c.edits);
+    return { add: acc.add + n.add, del: acc.del + n.del };
+  }, { add: 0, del: 0 });
+  const st = t.stats || {};
+  const canRollback = s.agent !== 'wisp' && s.state !== 'running' && (t.changes?.length || t.checkpoint?.commit);
+  const rolledBack = !!t.rolledBackAt;
+  const rated = t.feedback?.rating;
+  const node = el(`
+    <div class="trail">
+      <div class="trail-bar">
+        ${acts.length ? `<button class="tb-acts" data-tab="activity" title="Show activity">${parts.length ? parts.map(([ic, l, n]) => `<span class="tb" title="${n} ${l}">${icon(ic)}${n}</span>`).join('') : 'Activity'}</button>` : ''}
+        ${t.endedAt ? `<span class="tb">${fmtDuration(t.endedAt - t.startedAt)}</span>` : ''}
+        ${st.costUsd ? `<span class="tb">$${st.costUsd.toFixed(2)}</span>` : ''}
+        <span class="grow"></span>
+        ${t.changes?.length ? `<button class="link xs" data-tab="changes">${t.changes.length} file${t.changes.length > 1 ? 's' : ''} <span class="plus">+${totals.add}</span> <span class="minus">−${totals.del}</span></button>` : ''}
+        <span class="tb-tools">
+          ${t.presentation?.notes ? `<button class="tb-btn" data-tab="notes" title="Agent notes" aria-label="Agent notes">${icon('text')}</button>` : ''}
+          ${canRollback ? (rolledBack
+            ? `<button class="link xs cp-rollback rolled-back" data-a="rollback" title="Re-apply changes from this turn">${icon('rerun')}Re-apply</button>`
+            : `<button class="tb-btn cp-rollback" data-a="rollback" title="Restore working tree to before this turn${t.checkpoint?.head ? ` (${t.checkpoint.head.slice(0, 7)})` : ''}" aria-label="Restore to before this turn">${icon('replay')}</button>`) : ''}
+          ${feedbackOn() ? `<span class="rate ${rated ? 'rated' : ''}">${['up', 'down'].map((r) => `<button class="rate-btn ${rated === r ? 'on' : ''}" data-rate="${r}" title="${r === 'up' ? 'Good result' : 'Bad result'}: tell the wisp team" aria-pressed="${rated === r}">${icon(`thumb-${r}`)}</button>`).join('')}</span>` : ''}
+        </span>
+      </div>
+      <div class="trail-body" hidden></div>
+    </div>`);
+  const body = $('.trail-body', node);
+  let open = null;
+  node.addEventListener('click', (e) => {
+    if (e.target.closest('[data-a="rollback"]')) {
+      return rollbackTurn(s.id, t.id, rolledBack);
+    }
+    const rb = e.target.closest('[data-rate]');
+    if (rb) {
+      const next = t.feedback?.rating === rb.dataset.rate ? null : rb.dataset.rate;
+      rateTurn(s, t, node, next);
+      if (next !== 'down' && open === 'rate') ((open = null), (body.hidden = true));
+      if (next === 'down') {
+        open = 'rate';
+        $$('[data-tab]', node).forEach((x) => x.classList.remove('on'));
+        body.hidden = false;
+        body.innerHTML = '';
+        body.append(whyForm(s, t, () => ((open = null), (body.hidden = true))));
+      }
+      return;
+    }
+    const b = e.target.closest('[data-tab]');
+    if (!b) return;
+    const tab = b.dataset.tab;
+    $$('[data-tab]', node).forEach((x) => x.classList.toggle('on', x === b && open !== tab));
+    if (open === tab) {
+      open = null;
+      body.hidden = true;
+      return;
+    }
+    open = tab;
+    body.hidden = false;
+    body.innerHTML = '';
+    if (tab === 'activity') body.append(el(`<ul class="log">${acts.map((a) => actItem(a).outerHTML).join('')}</ul>`));
+    if (tab === 'notes') body.append(el(`<div class="prose">${md(t.presentation.notes)}</div>`));
+    if (tab === 'changes') {
+      body.append(renderPresentation({ blocks: t.changes.map((c) => ({ type: 'diff', file: c.file })) }, ctxFor(s, t, false)));
+    }
+  });
+  return node;
+}
+
+// Live activity without re-rendering the whole turn.
+export function onActivity({ sessionId, turnId, item }) {
+  const s = S.full.get(sessionId);
+  if (!s) return;
+  const turn = s.turns.find((t) => t.id === turnId);
+  if (turn && !turn.activity.includes(item)) turn.activity.push(item);
+  const node = S.nodes.get(sessionId)?.turnNodes.get(turnId)?.node;
+  if (!node || item.kind === 'text') return;
+  const ticker = $('.ticker', node);
+  if (ticker) {
+    const li = actItem(item);
+    li.classList.add('new');
+    ticker.prepend(li);
+    while (ticker.children.length > 5) ticker.lastElementChild.remove();
+  }
+  const log = $('.log', node);
+  if (log && !log.hidden) log.append(actItem(item));
+  const c = $('.w-count', node);
+  if (c && turn) c.textContent = `${turn.activity.filter((a) => a.kind !== 'text').length} actions`;
+}
+
+export function replay(id) {
+  const n = S.nodes.get(id);
+  if (!n?.body) return;
+  for (const v of n.turnNodes.values()) v.node.remove();
+  n.turnNodes.clear();
+  renderBody(id, { fresh: false });
+  $('.turns', n.body).lastElementChild?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+}

package/web/js/features/update.js

@@ -0,0 +1,48 @@
+// Self-update: the server polls npm; when a newer wisp-agents is out, a pill appears next to Search.
+
+import { copy } from '../blocks.js';
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import { $ } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { toast } from '../ui/toast.js';
+
+// The server polls npm; when a newer wisp-agents is out, a pill appears next to Search.
+let update = null;
+export const loadUpdate = () => api('/update').then(renderUpdate).catch(() => {});
+export function renderUpdate(u) {
+  update = u;
+  const b = $('#updateBtn');
+  const busy = u.status === 'installing' || u.status === 'restarting';
+  b.hidden = !u.available && !busy;
+  b.disabled = busy;
+  b.classList.toggle('busy', busy);
+  b.querySelector('span').textContent = u.status === 'installing' ? 'Updating…' : u.status === 'restarting' ? 'Restarting…' : `Update to ${u.latest}`;
+  b.title = u.auto ? `wisp ${u.current} → ${u.latest}: install and restart` : `wisp ${u.latest} is out. Run \`${u.command}\` to update`;
+}
+
+export async function installUpdate() {
+  if (!update?.available) return;
+  if (!update.auto) return toast(`wisp <b>${esc(update.latest)}</b> is out. Run <code>${esc(update.command)}</code>`, { action: { label: 'Copy', run: () => copy(update.command) }, timeout: 8000 });
+  const post = (force) => api('/update', { method: 'POST', body: { force } });
+  try {
+    await post(false).catch(async (err) => {
+      const running = [...S.sessions.values()].filter((s) => s.state === 'running' || s.state === 'waiting').length;
+      if (err.message !== 'agents are running') throw err;
+      if (!confirm(`Update to wisp ${update.latest} and restart? ${running || 'Some'} running agent${running === 1 ? '' : 's'} will be stopped.`)) throw null;
+      return post(true);
+    });
+  } catch (err) {
+    if (err) toast(esc(err.message), { tone: 'bad', timeout: 10_000, action: { label: 'Copy command', run: () => copy(update.command) } });
+    return;
+  }
+  renderUpdate({ ...update, status: 'restarting' });
+  // The server exits and a new one takes the port: reload once it answers with the new version.
+  const from = update.current;
+  const t0 = Date.now();
+  const poll = setInterval(async () => {
+    const h = await api('/health').catch(() => null);
+    if (h?.version && h.version !== from) return clearInterval(poll), location.reload();
+    if (Date.now() - t0 > 120_000) clearInterval(poll), toast('wisp did not come back. Start it again from your terminal.', { tone: 'bad', timeout: 15_000 });
+  }, 1000);
+}

package/web/js/features/usage.js

@@ -0,0 +1,75 @@
+// Usage: spend and outcomes.
+
+import { fmtDuration } from '../blocks.js';
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import { $, $$, el, icon } from '../core/dom.js';
+import { money, pct } from '../core/format.js';
+import { present } from '../ui/overlay.js';
+import { toastError } from '../ui/toast.js';
+import { agentName, harnessLogo } from './runners.js';
+
+export async function openUsage({ days = 30, host } = {}) {
+  const node = el(`<div class="modal usage-modal">
+      <header><h2>Usage</h2><div class="mem-tabs us-range">${[7, 30, 90].map((d) => `<button data-days="${d}">${d} days</button>`).join('')}</div><button class="icon-btn close">${icon('x')}</button></header>
+      <div class="us-body"><div class="it-loading"><span class="orb tiny"></span>Adding it up…</div></div>
+    </div>`);
+  const close = present(node, host);
+  const render = async () => {
+    $$('.us-range button', node).forEach((b) => b.classList.toggle('on', Number(b.dataset.days) === days));
+    const u = await api(`/usage?days=${days}`).catch((err) => (toastError(err), null));
+    if (!u || !node.isConnected) return;
+    const t = u.total;
+    const unpriced = t.turns - t.priced;
+    // Cost when any harness reports it, else turns: one measure per chart, never two axes.
+    const byCost = t.priced > 0;
+    const val = (d) => (byCost ? d.cost : d.turns);
+    const max = Math.max(...u.daily.map(val), 0) || 1;
+    const fmtDay = (k) => new Date(`${k}T12:00:00`).toLocaleDateString([], { month: 'short', day: 'numeric' });
+    const table = (rows, label) =>
+      rows.length
+        ? `<table class="us-table"><thead><tr><th></th><th>Spend</th><th>Turns</th><th>Worked</th><th>Asked</th><th>Avg time</th></tr></thead><tbody>${rows
+            .map((r) => `<tr><td>${label(r)}</td><td>${r.priced ? money(r.cost) : '—'}</td><td>${r.turns}</td><td>${pct(r.successRate)}</td><td>${r.questions}</td><td>${fmtDuration(r.avgMs)}</td></tr>`)
+            .join('')}</tbody></table>`
+        : '<p class="mem-empty">Nothing in this range.</p>';
+    $('.us-body', node).innerHTML = `
+      <div class="us-tiles">
+        <div><span>Spend</span><b>${byCost ? money(t.cost) : '—'}</b><small>${unpriced ? `${unpriced} turn${unpriced > 1 ? 's' : ''} without a price` : 'all turns priced'}</small></div>
+        <div><span>Turns</span><b>${t.turns}</b><small>in ${t.sessions} session${t.sessions === 1 ? '' : 's'}</small></div>
+        <div><span>Worked</span><b>${pct(t.successRate)}</b><small>finished, not partial or blocked</small></div>
+        <div><span>Questions</span><b>${t.questions}</b><small>times an agent needed you</small></div>
+      </div>
+      <h4>${byCost ? 'Spend per day' : 'Turns per day'}</h4>
+      <div class="us-chart" role="img" aria-label="${byCost ? 'Spend' : 'Turns'} per day">${u.daily
+        .map((d) => `<div class="us-bar" data-tip="${esc(fmtDay(d.date))}: ${byCost ? money(d.cost) : ''}${byCost ? ' · ' : ''}${d.turns} turn${d.turns === 1 ? '' : 's'}"><i style="height:${val(d) ? Math.max(2, (val(d) / max) * 100) : 0}%"></i></div>`)
+        .join('')}</div>
+      <div class="us-axis"><span>${esc(fmtDay(u.daily[0].date))}</span><span>${byCost ? `max ${money(max)}/day` : `max ${max}/day`}</span><span>today</span></div>
+      <h4>By project</h4>${table(u.projects, (r) => `<span class="us-proj c-${esc(r.color)}"><i class="p-dot"></i>${esc(r.name)}</span>`)}
+      <h4>By harness · model</h4>${table(u.runners, (r) => `<span class="us-runner"><span class="model-logo">${harnessLogo(r.agent)}</span>${esc(agentName(r.agent))} · ${esc(r.model || 'default')}</span>`)}
+      ${unpriced ? '<p class="hint">Codex, Cursor and Antigravity report tokens but not cost, so their turns count in turns and outcomes but not in spend.</p>' : ''}`;
+  };
+  // One floating tooltip for the bars (they are too thin to label).
+  const tip = el('<div class="us-tip" hidden></div>');
+  node.append(tip);
+  node.addEventListener('mousemove', (e) => {
+    const b = e.target.closest('.us-bar');
+    tip.hidden = !b;
+    if (!b) return;
+    tip.textContent = b.dataset.tip;
+    const r = b.getBoundingClientRect();
+    const m = node.getBoundingClientRect();
+    tip.style.left = `${Math.min(r.left - m.left + r.width / 2, m.width - 90)}px`;
+    tip.style.top = `${r.top - m.top + node.scrollTop - 6}px`;
+  });
+  node.addEventListener('mouseleave', () => (tip.hidden = true));
+  $('.us-range', node).onclick = (e) => {
+    const d = Number(e.target.closest('[data-days]')?.dataset.days);
+    if (d) (days = d), render();
+  };
+  render();
+}
+
+function usageSummary(u) {
+  if (!u) return '';
+  return u.total.turns ? `${u.total.priced ? `${money(u.total.cost)} · ` : ''}${u.total.turns} turns · ${pct(u.total.successRate)} worked, last 7 days` : 'Nothing in the last 7 days';
+}

package/web/js/ui/kbd.js

@@ -0,0 +1,46 @@
+// Keyboard shortcuts as they read on this OS, how they're matched, and the dialog that lists them.
+
+import { el } from '../core/dom.js';
+import { overlay } from './overlay.js';
+
+// The keyboard shortcut for a menu item, shown at its right edge. Menus act on the
+// focused card, so the key does the same thing as the click.
+export const keyHint = (k) => `<kbd class="menu-kbd">${k}</kbd>`;
+
+export function shortcuts() {
+  const rows = [
+    [combo('K'), 'Search & commands'],
+    [`N · ${combo('L')}`, 'New wisp (focus the launcher)'],
+    ['J / K', 'Next / previous item'],
+    ['O / ↵', 'Expand / collapse item'],
+    ['/', 'Follow up on item'],
+    ['E', 'Mark done & go to next'],
+    ['A', 'Archive / unarchive'],
+    ['M', 'Rename item'],
+    ['⌫', 'Delete item'],
+    ['T', 'Take over in terminal'],
+    ['R', 'Replay presentation'],
+    ['⇧R', 'Rerun with another harness, model or thinking level'],
+    ['S', 'Ship it: commit, push and open a PR (worktree tasks)'],
+    ['1–9', 'Pick an answer when asked'],
+    ['↵', 'Launch / send'],
+    ['⇧↵', 'New line'],
+    ['/feedback', 'Send feedback to the wisp team (in any prompt box)'],
+    ['C', 'Collapse all'],
+    ['U', 'Back to top'],
+    ['Esc', 'Close / collapse'],
+  ];
+  const node = el(`<div class="modal keys-modal"><header><h2>Shortcuts</h2></header>${rows.map(([k, l]) => `<div class="krow"><kbd>${k}</kbd><span>${l}</span></div>`).join('')}</div>`);
+  overlay(node);
+}
+
+const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
+
+// How a modifier shortcut reads on this OS: "⌘L" on macOS, "Ctrl+L" on Windows/Linux.
+export const combo = (k) => (IS_MAC ? `⌘${k}` : `Ctrl+${k}`);
+
+// ⌘ on macOS, Ctrl elsewhere (AltGr on Windows reports Ctrl+Alt, so Alt is excluded). Falls back to
+// the physical key on non-Latin layouts, where e.key is e.g. "д" for the L key.
+export const modKey = (e, k) =>
+  (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey &&
+  (e.key.toLowerCase() === k || (!/^[a-z]$/i.test(e.key) && e.code === `Key${k.toUpperCase()}`));

package/web/js/ui/overlay.js

@@ -0,0 +1,38 @@
+import { $ } from '../core/dom.js';
+import { sweep } from '../core/bus.js';
+
+// The one modal layer (#overlay). Opening a dialog replaces whatever it showed.
+export function overlay(node, { onClose } = {}) {
+  const o = $('#overlay');
+  o.innerHTML = '';
+  o.append(node);
+  o.hidden = false;
+  requestAnimationFrame(() => o.classList.add('on'));
+  const close = () => {
+    o.classList.remove('on');
+    // Another overlay may have replaced this one while it faded (palette → settings): leave that alone.
+    setTimeout(() => {
+      if (o.firstChild === node) (o.hidden = true), (o.innerHTML = '');
+      sweep();
+    }, 200);
+    onClose?.();
+  };
+  // A block body: an on* handler that returns false cancels the click, which would stop every
+  // submit button inside the dialog from submitting its form.
+  o.onclick = (e) => {
+    if (e.target === o) close();
+  };
+  o.close = close;
+  return close;
+}
+
+export const closeOverlay = () => !$('#overlay').hidden && $('#overlay').close?.();
+
+// A view opens as its own dialog, or inside another one (Settings) that hands it a host.
+// Returns what closes it for good: the whole overlay either way.
+export function present(node, host) {
+  if (host) return host(node);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  return close;
+}