wisp-agents 0.15.0 → 0.17.0

package/web/js/features/machines.js

@@ -0,0 +1,313 @@
+// Machines: other computers, over SSH. A machine runs its own wisp; this one signs in over SSH,
+// tunnels to it and shows its sessions as <id>@<machine>. Projects can live on a machine; launching
+// in one runs the agent there.
+
+import { copy } from '../blocks.js';
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { $, el, icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { present } from '../ui/overlay.js';
+import { popover } from '../ui/popover.js';
+import { toast, toastError, tryApi } from '../ui/toast.js';
+import { renderLaunchChips } from './launcher.js';
+import { loadConfig, loadSessions } from './live.js';
+import { MACHINE_STATE, machineById, machinesSummary } from './places.js';
+import { openProjects, renderProjects } from './projects.js';
+import { harnessLogo } from './runners.js';
+
+export const loadMachines = () => api('/machines').then(setMachines).catch(() => {});
+export function setMachines(list) {
+  const was = new Map(S.machines.map((m) => [m.id, m.state === 'online']));
+  S.machines = list;
+  paintMachinesBtn();
+  renderLaunchChips();
+  $('#launcher')?.placesChanged?.();
+  renderProjects();
+  bus.emit('machines');
+  // Coming online lists its sessions; going offline greys their cards.
+  if (list.some((m) => (was.get(m.id) || false) !== (m.state === 'online'))) loadSessions();
+}
+
+function paintMachinesBtn() {
+  const b = $('#machinesBtn');
+  if (!b) return;
+  const on = S.machines.filter((m) => m.state === 'online').length;
+  const trouble = S.machines.some((m) => m.state === 'error' || m.state === 'reconnecting');
+  b.classList.toggle('live', on > 0);
+  b.classList.toggle('trouble', trouble);
+  const n = $('.ab-n', b);
+  n.hidden = !on;
+  n.textContent = on;
+  b.title = S.machines.length ? `Machines: ${machinesSummary()}` : 'Machines: run agents on another computer over SSH';
+}
+
+export function connectMachine(id) {
+  return tryApi(() => api(`/machines/${id}/connect`, { method: 'POST', body: {} }));
+}
+
+export function offlineToast(id) {
+  const m = machineById(id);
+  if (m?.state === 'connecting' || m?.state === 'reconnecting') return toast(`Still connecting to <b>${esc(m.name)}</b>…`);
+  toast(`<b>${esc(m?.name || 'That machine')}</b> isn’t connected`, { tone: 'bad', action: { label: 'Connect', run: () => connectMachine(id) } });
+}
+
+const STEP_ICON = { done: 'check', fail: 'x', warn: 'warn', run: '', pending: '' };
+
+export function openMachines({ host, focusAdd = false } = {}) {
+  const node = el(`<div class="modal machines-modal">
+      <header><h2>Machines</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <div class="mc-body">
+        <p class="mem-lede">Run agents on your other computers: a dev box, a GPU server, a cloud VM. wisp signs in over SSH, starts itself there and tunnels back, so worktrees, diffs and Ship it work as usual, and agents keep going when this computer sleeps.</p>
+        <div class="mc-list"></div>
+        <section class="mc-add"></section>
+      </div>
+    </div>`);
+  const close = present(node, host);
+  const body = $('.mc-body', node);
+  let editing = null; // machine id whose form is open, '' = a new one, null = closed
+  let hosts = []; // found on this computer: ~/.ssh/config, Tailscale peers, ~/.ssh/known_hosts
+  api('/machines/discover')
+    .then((h) => {
+      hosts = h;
+      const slot = $('.mc-found-slot', node);
+      if (slot) slot.innerHTML = found();
+      const dl = $('#sshHosts', node);
+      if (dl) dl.innerHTML = datalist();
+    })
+    .catch(() => {});
+  const datalist = () => hosts.map((x) => `<option value="${esc(x.target)}">${esc(x.detail || '')}</option>`).join('');
+  const SOURCE = { 'ssh-config': '~/.ssh/config', tailscale: 'Tailscale', 'known-hosts': 'You’ve SSHed here before' };
+  // Hosts not added yet, one click from a filled-in form.
+  const found = () => {
+    const added = new Set(S.machines.map((m) => m.target));
+    const list = hosts.filter((x) => !added.has(x.target));
+    if (!list.length) return '';
+    return `<div class="mc-found"><h4>Found on this computer</h4><div class="mc-found-list">${list
+      .slice(0, 12)
+      .map(
+        (x) =>
+          `<button type="button" class="lp-chip${x.online === false ? ' off' : ''}" data-a="pick" data-target="${esc(x.target)}" data-name="${esc(x.name)}" title="${esc([SOURCE[x.source], x.target, x.detail].filter(Boolean).join(' · '))}">${icon('server')}${esc(x.name)}${x.online !== undefined ? `<i class="mc-fdot"></i>` : ''}</button>`,
+      )
+      .join('')}</div></div>`;
+  };
+
+  // Projects on a machine open here, with a way back.
+  const sub = (view) => {
+    const head = $(':scope > header', node);
+    body.hidden = true;
+    head.hidden = true;
+    view.classList.add('embedded');
+    const back = el(`<button class="ghost sm sx-back">${icon('back')}Back</button>`);
+    back.onclick = () => {
+      view.remove();
+      body.hidden = false;
+      head.hidden = false;
+      paint();
+    };
+    $('header', view).prepend(back);
+    $('.close', view).onclick = close;
+    node.append(view);
+    return close;
+  };
+
+  const steps = (m) => `<ol class="mc-steps">${m.steps
+    .map((st) => `<li class="s-${st.status}"><span class="mc-si">${STEP_ICON[st.status] ? icon(STEP_ICON[st.status]) : ''}</span><b>${esc(st.label)}</b>${st.detail ? `<small>${esc(st.detail)}</small>` : ''}</li>`)
+    .join('')}</ol>`;
+  const trouble = (m) => `<div class="mc-hint ${m.state === 'reconnecting' ? 'soft' : ''}">
+      <p><b>${esc(m.state === 'reconnecting' ? `${m.error || 'Connection lost.'} Trying again${m.attempt > 1 ? ` (attempt ${m.attempt})` : ''}…` : m.error)}</b></p>
+      ${m.hint?.text ? `<p>${esc(m.hint.text)}</p>` : ''}
+      ${m.hint?.command ? `<div class="mc-cmd"><code>${esc(m.hint.command)}</code><button class="ghost xs" data-a="copy" data-cmd="${esc(m.hint.command)}" title="Copy">${icon('copy')}</button></div>` : ''}
+      ${m.stale ? `<button class="ghost sm" data-a="restart">${icon('rerun')}Restart wisp there</button>` : ''}
+      ${m.log.length ? `<details class="mc-log"><summary>Log</summary><pre>${esc(m.log.join('\n'))}</pre></details>` : ''}
+    </div>`;
+  const projects = (m) => {
+    const list = S.config.projects.filter((p) => p.machine === m.id);
+    return `<div class="mc-projects">${list.map((p) => `<span class="lp-chip c-${p.color}" title="${esc(p.path)}"><i class="p-dot"></i>${esc(p.name)}</span>`).join('')}
+      <button class="lp-chip add" data-a="projects">${icon(list.length ? 'plus' : 'folder')}${list.length ? 'Add' : 'Pick projects on it…'}</button></div>`;
+  };
+  const card = (m) => {
+    const st = m.state;
+    const busy = st === 'connecting' || st === 'reconnecting';
+    const ready = (m.remote?.agents || []).filter((a) => a.available);
+    return `<div class="mc st-${st}" data-id="${m.id}">
+      <div class="mc-head">
+        <span class="mc-icon">${icon('server')}<i class="mc-dot"></i></span>
+        <div class="mc-title"><b>${esc(m.name)}</b><span>${esc(m.target)}${m.port !== 4477 ? ` · port ${m.port}` : ''}</span></div>
+        <span class="mc-state">${MACHINE_STATE[st] || st}</span>
+        ${st === 'online' || busy ? `<button class="ghost sm" data-a="disconnect">${busy ? 'Cancel' : 'Disconnect'}</button>` : `<button class="primary sm" data-a="connect">${st === 'error' ? 'Try again' : 'Connect'}</button>`}
+        <button class="icon-btn" data-a="menu" title="More">${icon('dots')}</button>
+      </div>
+      ${
+        st === 'online'
+          ? `<div class="mc-meta"><span>wisp ${esc(m.remote?.version || '')}</span>${m.outdated ? `<button class="ghost xs mc-update" data-a="update" title="Restart wisp on ${esc(m.name)} as ${esc(m.outdated)}">${icon('rerun')}Update to ${esc(m.outdated)}</button>` : ''}${ready.length ? `<span class="mc-agents">${ready.map((a) => `<span class="model-logo" title="${esc(a.name)} ${esc(a.version || '')}">${harnessLogo(a.id)}</span>`).join('')}</span>` : '<span class="bad">no harnesses found</span>'}${m.working ? `<span>${m.working} working</span>` : ''}</div>`
+          : ''
+      }
+      ${busy || st === 'error' ? steps(m) : ''}
+      ${(st === 'error' || st === 'reconnecting') && m.error ? trouble(m) : ''}
+      ${st === 'online' || m.projects ? projects(m) : ''}
+      ${editing === m.id ? `<div class="mc-edit">${form(m)}</div>` : ''}
+    </div>`;
+  };
+  const form = (m) => `<form class="mc-form" data-id="${m?.id || ''}">
+      <div class="mc-row">
+        <label class="mc-field grow"><span>SSH host</span><input class="input mono" name="target" list="sshHosts" placeholder="me@devbox, 10.0.0.5, or a Host from ~/.ssh/config" spellcheck="false" autocomplete="off" autocapitalize="off" value="${esc(m?.target || '')}" required></label>
+        <label class="mc-field"><span>Name</span><input class="input" name="name" placeholder="${esc(m?.name || 'devbox')}" value="${esc(m?.name || '')}" spellcheck="false"></label>
+      </div>
+      <details class="mc-adv" ${m && (m.port !== 4477 || m.command) ? 'open' : ''}><summary>Advanced</summary>
+        <div class="mc-row">
+          <label class="mc-field"><span>wisp’s port there</span><input class="input mono" name="port" type="number" min="1" max="65535" value="${m?.port || 4477}"></label>
+          <label class="mc-field grow"><span>Start command</span><input class="input mono" name="command" placeholder="${esc(S.machines[0]?.defaultCommand || 'npx -y wisp-agents@<this version>')}" value="${esc(m?.command || '')}" spellcheck="false"></label>
+        </div>
+        <label class="check mc-check"><input type="checkbox" name="autoConnect" ${m?.autoConnect === false ? '' : 'checked'}> Connect when wisp starts</label>
+      </details>
+      <div class="mc-foot">
+        <p class="hint">${m ? 'Changing the host, port or command reconnects.' : 'Uses your SSH keys, agent and ~/.ssh/config; wisp never asks for a password. The machine needs Node.js 20+ and the harness CLIs, signed in.'}</p>
+        ${editing !== null && (m || S.machines.length) ? '<button type="button" class="ghost sm" data-a="cancel">Cancel</button>' : ''}
+        <button class="primary sm" type="submit">${m ? 'Save' : `${icon('server')}Connect`}</button>
+      </div>
+    </form>`;
+
+  const paint = () => {
+    if (!node.isConnected && !host) return;
+    $('.mc-list', node).innerHTML = S.machines.map(card).join('');
+    const add = $('.mc-add', node);
+    // The form for a new machine: open when there are none yet, else behind a button.
+    if (!S.machines.length || editing === '') {
+      // Keep a half-filled form; only the suggestions above it change.
+      if ($('form[data-id=""]', add)) $('.mc-found-slot', add).innerHTML = found();
+      else add.innerHTML = `<div class="mc-found-slot">${found()}</div><h4>${S.machines.length ? 'Add another machine' : 'Add your first machine'}</h4>${form(null)}<datalist id="sshHosts">${datalist()}</datalist>`;
+    } else add.innerHTML = `<div class="mc-found-slot">${found()}</div><button class="lp-chip add mc-new" data-a="new">${icon('plus')}Add a machine</button><datalist id="sshHosts">${datalist()}</datalist>`;
+  };
+
+  const menu = (m, anchor) => {
+    $('.menu.machine')?.close();
+    const r = anchor.getBoundingClientRect();
+    const box = el(`<div class="menu machine" style="top:${r.bottom + 4}px;left:${Math.max(8, r.right - 230)}px">
+        <button data-m="edit">${icon('pen')}Edit…</button>
+        <button data-m="projects">${icon('folder')}Projects on it…</button>
+        ${m.state === 'online' ? `<button data-m="restart">${icon('rerun')}Restart wisp there</button><button data-m="stop" class="danger">${icon('stop')}Stop wisp there</button>` : ''}
+        <button data-m="remove" class="danger">${icon('trash')}Remove machine</button>
+      </div>`);
+    box.onclick = (ev) => {
+      const a = ev.target.closest('button')?.dataset.m;
+      shut();
+      if (a) act(a, m);
+    };
+    const shut = popover(box);
+  };
+
+  const act = async (a, m) => {
+    try {
+      if (a === 'connect') await api(`/machines/${m.id}/connect`, { method: 'POST', body: {} });
+      if (a === 'disconnect') await api(`/machines/${m.id}/disconnect`, { method: 'POST', body: {} });
+      if (a === 'projects') openProjects({ machine: m.id, host: sub, focusAdd: true });
+      if (a === 'edit') {
+        editing = m.id;
+        paint();
+        $(`.mc[data-id="${m.id}"] input[name="target"]`, node)?.focus();
+      }
+      if (a === 'restart' || a === 'update') {
+        const verb = a === 'update' ? `Updating wisp there to ${m.outdated}` : 'Restarting wisp there';
+        if (m.working && !confirm(`${m.working} agent${m.working === 1 ? ' is' : 's are'} working on ${m.name}. ${verb} stops ${m.working === 1 ? 'it' : 'them'}. ${a === 'update' ? 'Update' : 'Restart'}?`)) return;
+        await api(`/machines/${m.id}/stop`, { method: 'POST', body: { restart: true } });
+      }
+      if (a === 'stop') {
+        if (!confirm(`Stop wisp on ${m.name}? ${m.working ? `${m.working} working agent${m.working === 1 ? '' : 's'} stop too. ` : ''}Its sessions stay there for next time.`)) return;
+        await api(`/machines/${m.id}/stop`, { method: 'POST', body: {} });
+        toast(`Stopped wisp on <b>${esc(m.name)}</b>`);
+      }
+      if (a === 'remove') {
+        if (!confirm(`Remove ${m.name} from wisp? Its projects leave the launcher. Nothing on the machine is touched, and wisp keeps running there until you stop it.`)) return;
+        await api(`/machines/${m.id}`, { method: 'DELETE' });
+        await loadConfig();
+        await loadMachines();
+      }
+    } catch (err) {
+      toastError(err);
+    }
+  };
+
+  node.addEventListener('click', async (e) => {
+    const b = e.target.closest('[data-a]');
+    if (!b || !body.contains(b)) return;
+    const a = b.dataset.a;
+    const m = machineById(b.closest('.mc')?.dataset.id);
+    if (a === 'copy') {
+      copy(b.dataset.cmd);
+      toast('Copied. Run it in a terminal, then connect again.');
+      return;
+    }
+    if (a === 'new') {
+      editing = '';
+      paint();
+      $('.mc-add input[name="target"]', node)?.focus();
+      return;
+    }
+    if (a === 'pick') {
+      // Fill in the form; connecting still waits for the button.
+      editing = '';
+      paint();
+      const f = $('.mc-add form[data-id=""]', node);
+      f.target.value = b.dataset.target;
+      f.name.value = b.dataset.name;
+      $('button[type="submit"]', f).focus();
+      return;
+    }
+    if (a === 'cancel') {
+      editing = null;
+      paint();
+      return;
+    }
+    if (a === 'menu' && m) {
+      menu(m, b);
+      return;
+    }
+    if (m) act(a, m);
+  });
+  // The name follows the host until you type one.
+  node.addEventListener('input', (e) => {
+    if (e.target.name !== 'target') return;
+    const name = $('input[name="name"]', e.target.form);
+    const h = hosts.find((x) => x.target === e.target.value.trim());
+    name.placeholder = (h?.name || e.target.value.trim().replace(/^.*@/, '')).slice(0, 40) || 'devbox';
+  });
+  node.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const f = e.target;
+    const id = f.dataset.id;
+    const v = Object.fromEntries(new FormData(f));
+    const payload = { target: v.target.trim(), name: v.name.trim(), port: Number(v.port) || 4477, command: v.command.trim(), autoConnect: !!v.autoConnect };
+    const btn = $('button[type="submit"]', f);
+    btn.disabled = true;
+    try {
+      if (id) await api(`/machines/${id}`, { method: 'PATCH', body: payload });
+      else await api('/machines', { method: 'POST', body: payload });
+      editing = null;
+      await loadMachines();
+      paint();
+    } catch (err) {
+      toastError(err);
+    } finally {
+      btn.disabled = false;
+    }
+  });
+  bus.on(
+    'machines',
+    () => {
+      // Don't clobber a half-typed form: repaint the cards only.
+      const typing = node.contains(document.activeElement) && document.activeElement.matches('input, select');
+      if (typing && editing !== null && editing !== '') return;
+      if (typing) $('.mc-list', node).innerHTML = S.machines.map(card).join('');
+      else paint();
+    },
+    { node },
+  );
+  paint();
+  if (focusAdd && S.machines.length) {
+    editing = '';
+    paint();
+  }
+  if (focusAdd || !S.machines.length) setTimeout(() => $('.mc-add input[name="target"]', node)?.focus(), 60);
+}

package/web/js/features/memory.js

@@ -0,0 +1,154 @@
+// Memory: what the background retros learned, as preferences and lessons per project.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { $, el, icon } from '../core/dom.js';
+import { ago } from '../core/format.js';
+import { launch, S } from '../core/state.js';
+import { present } from '../ui/overlay.js';
+import { toastError, tryApi } from '../ui/toast.js';
+import { reveal } from './feed.js';
+import { loadConfig } from './live.js';
+import { projectById, projectName } from './places.js';
+import { agentName } from './runners.js';
+
+const MEM_KINDS = [
+  { kind: 'preferences', label: 'Preferences', one: 'preference', icon: 'spark', hint: 'How you like agents to work', empty: 'Corrections and “always / never” asks from your sessions land here.' },
+  { kind: 'lessons', label: 'Lessons', one: 'lesson', icon: 'check', hint: 'A mistake an agent made, and the way that worked', empty: 'When an agent hits a wall and finds the fix, the fix lands here.' },
+];
+const MEM_CAP = 10;
+const memCount = (x) => x.preferences.length + x.lessons.length;
+
+export async function setLearning(on) {
+  await api('/config', { method: 'PATCH', body: { defaults: { learn: on ? 'on' : 'off' } } });
+  await loadConfig();
+}
+
+export function memorySummary(data) {
+  if (!data) return '';
+  if (!data.enabled) return 'Off · nothing learned or applied';
+  const n = memCount(data.global) + data.projects.reduce((a, p) => a + memCount(p), 0);
+  const last = data.history[0];
+  if (data.running) return `Retro running · ${n} remembered`;
+  return `${n ? `${n} remembered` : 'Nothing yet'}${last ? ` · last retro ${ago(last.at)}` : ''}`;
+}
+
+export function openMemory({ tab = 'global', host } = {}) {
+  const node = el(`<div class="modal memory-modal">
+      <header><h2>Memory</h2><span class="mem-live"></span><button class="switch" id="memOn" role="switch" title="Learn from sessions"></button><button class="icon-btn close">${icon('x')}</button></header>
+      <p class="mem-lede">Learned from your sessions and added to every agent's prompt. What you ask always wins.</p>
+      <div class="mem-tabs" role="tablist"></div>
+      <div class="mem-body"></div>
+    </div>`);
+  const close = present(node, host);
+  let data;
+  let editing = null; // { scope, kind, index } (index -1 = adding)
+
+  const render = async () => {
+    data = (await api('/preferences').catch(() => null)) || data;
+    if (!data || !node.isConnected) return;
+    // Projects with something learned, plus the one picked in the launcher so you can add to it.
+    const current = projectById(launch.project);
+    const projects = data.projects.filter((p) => memCount(p) || p.path === current?.path);
+    if (current && !projects.some((p) => p.path === current.path)) projects.push({ path: current.path, name: current.name, preferences: [], lessons: [] });
+    const scopes = [{ scope: 'global', name: 'Everywhere', ...data.global }, ...projects.map((p) => ({ scope: p.path, ...p }))];
+    if (tab !== 'retros' && !scopes.some((x) => x.scope === tab)) tab = 'global';
+    $('#memOn', node).setAttribute('aria-checked', data.enabled);
+    $('.mem-live', node).innerHTML = data.running ? `<span class="orb live"></span>Retro running` : data.enabled ? '' : 'Off';
+    $('.mem-tabs', node).innerHTML =
+      scopes.map((x) => `<button role="tab" data-tab="${esc(x.scope)}" class="${tab === x.scope ? 'on' : ''}" title="${esc(x.scope === 'global' ? 'Applies in every project' : x.scope.replace(S.config.home, '~'))}">${esc(x.name)}<span>${memCount(x)}</span></button>`).join('') +
+      `<i></i><button role="tab" data-tab="retros" class="${tab === 'retros' ? 'on' : ''}">Retros<span>${data.history.length}</span></button>`;
+    const body = $('.mem-body', node);
+    body.classList.toggle('off', !data.enabled);
+    const banner = data.enabled ? '' : `<div class="mem-off">${icon('info')}<span>Memory is off: no retros run, and nothing below reaches your agents.</span><button class="ghost xs" data-act="on">Turn on</button></div>`;
+    body.innerHTML = banner + (tab === 'retros' ? retrosView() : scopeView(scopes.find((x) => x.scope === tab)));
+    const input = $('.mem-edit input', body);
+    if (input) input.focus(), input.setSelectionRange(input.value.length, input.value.length);
+  };
+
+  // Which retro added an item, if it's still in the log.
+  const origin = (scope, kind, text) => data.history.find((h) => h.added?.some((a) => a.text === text && a.kind === kind && (a.scope === 'global') === (scope === 'global')));
+
+  const scopeView = (x) => {
+    const chars = [...(x.scope === 'global' ? [] : [...data.global.preferences, ...data.global.lessons]), ...x.preferences, ...x.lessons].reduce((a, t) => a + t.length + 3, 0);
+    const budget = x.scope === 'global' ? `Added to every prompt · about ${Math.ceil(chars / 4)} tokens` : `Added to prompts in ${esc(x.name)}, with Everywhere · about ${Math.ceil(chars / 4)} tokens`;
+    return `<p class="mem-budget muted xs">${budget}</p>` + MEM_KINDS.map((k) => {
+      const items = x[k.kind];
+      const row = (t, i) => {
+        if (editing && editing.scope === x.scope && editing.kind === k.kind && editing.index === i) return editRow(t, k);
+        const o = origin(x.scope, k.kind, t);
+        return `<div class="mem-item" data-i="${i}"><span class="mem-ico">${icon(k.icon)}</span><div class="mem-main"><p>${esc(t)}</p>${o ? `<span class="mem-src">${o.sessionId && S.sessions.has(o.sessionId) ? `<a href="#" data-session="${esc(o.sessionId)}">${esc(o.title || 'session')}</a>` : esc(o.title || 'a session')} · ${ago(o.at)}</span>` : ''}</div>
+          <span class="mem-acts"><button class="icon-btn" data-act="edit" title="Edit">${icon('pen')}</button><button class="icon-btn" data-act="forget" title="Forget">${icon('trash')}</button></span></div>`;
+      };
+      const adding = editing && editing.scope === x.scope && editing.kind === k.kind && editing.index === -1;
+      return `<section class="mem-sec" data-scope="${esc(x.scope)}" data-kind="${k.kind}">
+        <h4>${k.label}<span class="muted xs">${k.hint}</span><em class="${items.length >= MEM_CAP ? 'full' : ''}" title="At most ${MEM_CAP}; a retro drops the least useful when full">${items.length}/${MEM_CAP}</em></h4>
+        ${items.map(row).join('') || (adding ? '' : `<p class="mem-empty">${k.empty}</p>`)}
+        ${adding ? editRow('', k) : `<button class="mem-add" data-act="add">${icon('plus')}Add a ${k.one}</button>`}
+      </section>`;
+    }).join('');
+  };
+  const editRow = (t, k) => `<div class="mem-item mem-edit"><span class="mem-ico">${icon(k.icon)}</span><input value="${esc(t)}" maxlength="180" spellcheck="false" placeholder="One short sentence, e.g. “Run tests with node --test”"><span class="muted xs">↵ save · esc cancel</span></div>`;
+
+  const retrosView = () => {
+    const live = data.running ? `<div class="tl running"><span class="tl-dot"><span class="orb live"></span></span><div class="tl-main"><div class="tl-head"><b>${esc(data.running.title || 'session')}</b><span class="muted xs">now</span></div><p class="muted xs">Reading ${data.running.turns} turn${data.running.turns === 1 ? '' : 's'} with ${esc(agentName(data.running.agent))}…</p></div></div>` : '';
+    const where = (a) => `<span class="tl-tag">${a.scope === 'global' ? 'everywhere' : 'project'} · ${a.kind === 'lessons' ? 'lesson' : 'preference'}</span>`;
+    const entries = data.history.map((h) => {
+      const status = h.status || 'learned';
+      const lines =
+        status === 'failed' ? `<p class="tl-err">${esc(h.error || 'The retro run failed.')}</p>`
+        : status === 'nothing' ? '<p class="muted xs">Nothing new worth remembering.</p>'
+        : [...h.added.map((a) => `<p class="tl-add">${esc(a.text ?? a)} ${a.kind ? where(a) : ''}</p>`), ...h.removed.map((a) => `<p class="tl-del"><s>${esc(a.text ?? a)}</s> ${a.kind ? where(a) : ''}</p>`)].join('');
+      const title = S.sessions.has(h.sessionId) ? `<a href="#" data-session="${esc(h.sessionId)}">${esc(h.title || 'session')}</a>` : esc(h.title || 'session');
+      return `<div class="tl ${status}"><span class="tl-dot"></span><div class="tl-main"><div class="tl-head"><b>${title}</b>${h.project ? `<span class="muted xs">${esc(projectName(h.project))}</span>` : ''}<span class="muted xs">${ago(h.at)}</span></div>${lines}</div></div>`;
+    });
+    return live + entries.join('') || `<p class="mem-empty">No retros yet. One runs 90 s after a session finishes, or as soon as you mark it done or archive it.</p>`;
+  };
+
+  const save = async (scope, kind, items) => {
+    await api('/preferences', { method: 'PUT', body: { scope, kind, items } }).catch(toastError);
+    editing = null;
+    await render();
+  };
+  const commit = (input) => {
+    if (!editing) return;
+    const { scope, kind, index } = editing;
+    editing = null; // Enter then blur must not save twice
+    const list = ((scope === 'global' ? data.global : data.projects.find((p) => p.path === scope)) || { [kind]: [] })[kind].slice();
+    const v = input.value.trim();
+    if (index === -1) v ? list.push(v) : null;
+    else v ? (list[index] = v) : list.splice(index, 1);
+    save(scope, kind, list);
+  };
+
+  node.addEventListener('click', async (e) => {
+    const t = e.target.closest('[data-tab],[data-act],[data-session]');
+    if (!t) return;
+    e.preventDefault();
+    if (t.dataset.tab) return (tab = t.dataset.tab), (editing = null), render();
+    if (t.dataset.session) return close(), reveal(t.dataset.session);
+    const act = t.dataset.act;
+    if (act === 'on') return tryApi(() => setLearning(true)).then(render);
+    const sec = t.closest('.mem-sec');
+    const { scope, kind } = sec.dataset;
+    const index = Number(t.closest('.mem-item')?.dataset.i ?? -1);
+    if (act === 'add' || act === 'edit') return (editing = { scope, kind, index }), render();
+    if (act === 'forget') {
+      const list = (scope === 'global' ? data.global : data.projects.find((p) => p.path === scope))[kind].filter((_, i) => i !== index);
+      return save(scope, kind, list);
+    }
+  });
+  node.addEventListener('keydown', (e) => {
+    if (!e.target.matches('.mem-edit input')) return;
+    if (e.key === 'Enter') e.preventDefault(), commit(e.target);
+    if (e.key === 'Escape') e.preventDefault(), e.stopPropagation(), (editing = null), render();
+  });
+  node.addEventListener('focusout', (e) => e.target.matches('.mem-edit input') && editing && commit(e.target));
+  $('#memOn', node).onclick = async () => {
+    await tryApi(() => setLearning(!data?.enabled));
+    render();
+  };
+  bus.on('preferences', () => !editing && render(), { node });
+  render();
+}

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

@@ -0,0 +1,36 @@
+// Notifications when a task finishes or asks: a toast, and a desktop notification when the window
+// isn't focused.
+
+import { esc } from '../md.js';
+import { icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { toast } from '../ui/toast.js';
+import { reveal } from './feed.js';
+import { watching } from './scroll.js';
+
+// On unless turned off in settings, and only if the browser lets us.
+export function notifyOn() {
+  return S.config.defaults.notify !== 'off' && 'Notification' in window && Notification.permission === 'granted';
+}
+
+export function askNotify() {
+  if (S.config.defaults.notify !== 'off' && 'Notification' in window && Notification.permission === 'default') Notification.requestPermission();
+}
+
+export function notifyFinished(s) {
+  const viewing = S.open.has(s.id) && watching(s.id) && document.hasFocus();
+  if (viewing) return;
+  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') {
+    if (runs.some((x) => x.id !== s.id && x.state === 'running')) return;
+    const places = new Set(runs.map((x) => x.machine?.id || '')).size;
+    verb = places > 1 ? `is ready on ${places} machines` : `is ready (${runs.length} runs)`;
+  }
+  toast(`${icon(s.state === 'waiting' ? 'ask' : 'spark')} <b>${esc(s.title)}</b> ${verb}`, { action: { label: 'Open', run: () => reveal(s.id) }, timeout: 7000 });
+  if (notifyOn() && !document.hasFocus()) {
+    const note = new Notification(`${s.project}: ${s.title}`, { body: s.state === 'waiting' ? s.question : s.preview || 'Ready for review', icon: '/apple-touch-icon.png', tag: s.id });
+    note.onclick = () => (window.focus(), reveal(s.id));
+  }
+}