wisp-agents 0.14.0 → 0.16.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/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' ? '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));
+  }
+}

package/web/js/features/phone.js

@@ -0,0 +1,124 @@
+// Phone: questions and finished tasks over ntfy or Telegram, answered from there.
+
+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 { toast, toastError } from '../ui/toast.js';
+import { placeName, recentFirst } from './places.js';
+
+export function phoneSummary(r) {
+  if (!r) return '';
+  const on = [r.ntfy.enabled && r.ntfy.topic && 'ntfy', r.telegram.enabled && r.telegram.linked && 'Telegram'].filter(Boolean);
+  return on.length ? `${on.join(' + ')} · ${r.events.map((e) => (e === 'waiting' ? 'questions' : 'finished')).join(' & ')}` : 'Off';
+}
+
+export async function openPhone({ host } = {}) {
+  const node = el(`<div class="modal phone-modal">
+      <header><h2>Phone</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <p class="mem-lede">Get questions and finished tasks on your phone, and answer from there. wisp polls both services, so nothing needs to reach this machine. They receive titles, summaries and questions (with their context), never code or diffs.</p>
+      <div class="ph-body"></div>
+    </div>`);
+  const close = present(node, host);
+  let r;
+  const put = async (patch) => {
+    try {
+      r = await api('/remote', { method: 'PUT', body: patch });
+      paint();
+    } catch (err) {
+      toastError(err);
+    }
+  };
+  const status = (st) => (!st ? '' : st.ok ? `<span class="ph-ok">${icon('check')}Working</span>` : `<span class="ph-bad">${icon('warn')}${esc(st.error || 'Failed')}</span>`);
+  const paint = () => {
+    const tg = r.telegram;
+    const projects = S.config.projects || [];
+    const lastUsed = [...projects].sort(recentFirst)[0];
+    $('.ph-body', node).innerHTML = `
+      <div class="settings-modal ph-sec">
+        <div class="setting"><span>Send me</span>
+          <label class="check"><input type="checkbox" data-ev="waiting" ${r.events.includes('waiting') ? 'checked' : ''}> Questions</label>
+          <label class="check"><input type="checkbox" data-ev="finished" ${r.events.includes('finished') ? 'checked' : ''}> Finished tasks</label></div>
+      </div>
+      <section class="ph-sec">
+        <h4>ntfy <span class="muted xs">· tap a button on the notification to answer</span>${status(r.status.ntfy)}<button class="switch" data-sw="ntfy" role="switch" aria-checked="${r.ntfy.enabled}"></button></h4>
+        <div class="settings-modal">
+          <label><span>Topic</span><input class="input mono" data-ntfy="topic" value="${esc(r.ntfy.topic)}" placeholder="wisp-…" spellcheck="false"></label>
+          <label><span>Server</span><input class="input mono" data-ntfy="server" value="${esc(r.ntfy.server)}" spellcheck="false"></label>
+          <label><span>Access token</span><input class="input mono" data-ntfy="token" value="${esc(r.ntfy.token)}" placeholder="Only for protected topics" spellcheck="false" type="password"></label>
+        </div>
+        <p class="hint">Install the ntfy app and subscribe to the topic. Anyone who knows the topic name can read it, so keep it long and random; answers are signed, so nobody else can send them.</p>
+      </section>
+      <section class="ph-sec">
+        <h4>Telegram <span class="muted xs">· buttons, or reply to a message in your own words</span>${status(r.status.telegram)}<button class="switch" data-sw="telegram" role="switch" aria-checked="${tg.enabled}"></button></h4>
+        <div class="settings-modal">
+          <label><span>Bot token</span><input class="input mono" data-tg="token" value="${esc(tg.token)}" placeholder="123456:ABC… from @BotFather" spellcheck="false" type="password"></label>
+        </div>
+        <p class="hint">${
+          tg.linked
+            ? `${icon('check')} Linked to <b>${esc(tg.chatName || 'your chat')}</b>. <button class="link xs" data-act="unlink">Unlink</button>`
+            : tg.token && tg.enabled
+              ? `Now send <code>/link ${esc(tg.linkCode)}</code> to your bot. Only the chat that sends this code gets linked.`
+              : 'Create a bot with @BotFather, paste its token here and switch Telegram on.'
+        }</p>
+        ${
+          tg.linked
+            ? `<div class="ph-start">
+          <div class="ph-row"><span class="grow">Start tasks from Telegram</span><button class="switch" data-sw="tgStart" role="switch" aria-checked="${tg.allowStart}"></button></div>
+          ${
+            tg.allowStart
+              ? `<div class="settings-modal"><label><span>Default project</span><select class="input" data-tg="project">
+              <option value="">Last used${lastUsed ? ` (${esc(lastUsed.name)})` : ''}</option>
+              ${projects.map((p) => `<option value="${esc(p.id)}" ${p.id === tg.project ? 'selected' : ''}>${esc(p.name)}${p.machine ? ` · ${esc(placeName(p.machine))}` : ''}</option>`).join('')}
+            </select></label></div>
+          <p class="hint">Send <code>/new fix the flaky login test</code> to start a task in the default project, or <code>/new @${esc(projects[0]?.name || 'project')} …</code> to pick one; <code>/projects</code> lists them. Tasks use the launcher's harness, model and mode. Only your linked chat can start them.</p>`
+              : '<p class="hint">Off: the bot only answers and follows up on tasks you started here.</p>'
+          }
+        </div>`
+            : ''
+        }
+      </section>
+      <div class="ship-foot"><span class="grow"></span><button class="ghost sm" data-act="test">${icon('send')}Send a test</button></div>`;
+  };
+  node.addEventListener('change', (e) => {
+    const t = e.target;
+    if (t.dataset.ev) put({ events: $$('[data-ev]', node).filter((x) => x.checked).map((x) => x.dataset.ev) });
+    if (t.dataset.ntfy) put({ ntfy: { ...r.ntfy, [t.dataset.ntfy]: t.value.trim() } });
+    if (t.dataset.tg === 'token') put({ telegram: { enabled: r.telegram.enabled, token: t.value.trim() } });
+    if (t.dataset.tg === 'project') put({ telegram: { project: t.value } });
+  });
+  node.addEventListener('click', async (e) => {
+    const sw = e.target.closest('[data-sw]')?.dataset.sw;
+    if (sw === 'ntfy') {
+      // A fresh random topic the first time, so it isn't guessable.
+      const topic = r.ntfy.topic || `wisp-${crypto.getRandomValues(new Uint32Array(2)).join('').slice(0, 14)}`;
+      return put({ ntfy: { ...r.ntfy, enabled: !r.ntfy.enabled, topic } });
+    }
+    if (sw === 'telegram') return put({ telegram: { enabled: !r.telegram.enabled, token: r.telegram.token } });
+    if (sw === 'tgStart') return put({ telegram: { allowStart: !r.telegram.allowStart } });
+    const act = e.target.closest('[data-act]')?.dataset.act;
+    if (act === 'unlink') return put({ telegram: { enabled: r.telegram.enabled, token: r.telegram.token, unlink: true } });
+    if (act === 'test') {
+      try {
+        r = await api('/remote/test', { method: 'POST', body: {} });
+        paint();
+        toast('Test sent');
+      } catch (err) {
+        toastError(err);
+      }
+    }
+  });
+  bus.on(
+    'remote',
+    async () => {
+      if (node.contains(document.activeElement) && document.activeElement.matches('input')) return; // don't clobber typing
+      r = await api('/remote').catch(() => r);
+      if (r && node.isConnected) paint();
+    },
+    { node },
+  );
+  r = await api('/remote').catch((err) => (toastError(err), null));
+  if (r) paint();
+}