wisp-agents 0.6.0 → 0.7.0

package/web/js/app.js

@@ -197,7 +197,29 @@ function renderFeedHead(needs, working) {
 // never shifts the feed, and it stays reachable deep inside a long open card.
 const collapseAllBtn = el(`<button class="collapse-all" title="Collapse all (C) · Esc collapses the focused one"><span></span><kbd>C</kbd></button>`);
 document.body.append(collapseAllBtn);
-const collapseAll = () => [...S.open].forEach((id) => collapse(id));
+// Collapsing shrinks everything above the reader, which would leave them staring
+// at unrelated cards far down the feed. Keep the card they were reading in view.
+const collapseAll = () => {
+  const anchor = readingCard();
+  [...S.open].forEach((id) => collapse(id));
+  if (!anchor) return;
+  setFocus(anchor, { scroll: false });
+  const card = S.nodes.get(anchor)?.card;
+  if (card?.isConnected) card.scrollIntoView({ block: 'center' });
+};
+// The open card covering the most of the viewport; the focused one breaks ties.
+function readingCard() {
+  let best = null;
+  let bestArea = 0;
+  for (const id of S.open) {
+    const card = S.nodes.get(id)?.card;
+    if (!card?.isConnected) continue;
+    const r = card.getBoundingClientRect();
+    const seen = Math.min(r.bottom, innerHeight) - Math.max(r.top, 0) + (id === S.focus ? 1 : 0);
+    if (seen > bestArea) (best = id), (bestArea = seen);
+  }
+  return best || (S.open.has(S.focus) ? S.focus : null);
+}
 collapseAllBtn.addEventListener('click', collapseAll);
 function placeCollapseAll() {
   const open = [...S.open].filter((id) => S.nodes.get(id)?.card.isConnected).length;
@@ -434,6 +456,20 @@ function autosize(ta, max = 340) {
 
 let launchProject = load('wisp.launchProject', null);
 
+// The model is remembered per harness (ids aren't portable between them).
+function savedModel(id) {
+  const d = S.config.defaults;
+  const want = d.models?.[id] ?? (id === d.agent ? d.model : '');
+  const models = S.agents.find((a) => a.id === id)?.models || [];
+  return models.some((m) => m.id === want) ? want : '';
+}
+// Thinking level too, and only if the chosen model still accepts it.
+function savedEffort(id, model) {
+  const d = S.config.defaults;
+  const want = d.efforts?.[id] ?? (id === d.agent ? d.effort : '');
+  return effortsFor(id, model).includes(want) ? want : '';
+}
+
 function renderLauncher() {
   const box = $('#launcher');
   const mode = S.config.defaults.mode || 'edits';
@@ -486,19 +522,6 @@ function renderLauncher() {
   };
   paintMode();
   modeBtn.onclick = () => modeMenu(modeBtn, curMode, setMode);
-  // The model is remembered per harness (ids aren't portable between them).
-  const savedModel = (id) => {
-    const d = S.config.defaults;
-    const want = d.models?.[id] ?? (id === d.agent ? d.model : '');
-    const models = S.agents.find((a) => a.id === id)?.models || [];
-    return models.some((m) => m.id === want) ? want : '';
-  };
-  // Thinking level too, and only if the chosen model still accepts it.
-  const savedEffort = (id, model) => {
-    const d = S.config.defaults;
-    const want = d.efforts?.[id] ?? (id === d.agent ? d.effort : '');
-    return effortsFor(id, model).includes(want) ? want : '';
-  };
   let curModel = savedModel(agent?.id);
   let curEffort = savedEffort(agent?.id, curModel);
   const runnerBtn = $('#runner', box);
@@ -587,7 +610,7 @@ function modeMenu(anchor, current, pick) {
   menu.addEventListener('keydown', (ev) => {
     const items = $$('button', menu);
     const i = items.indexOf(document.activeElement);
-    if (ev.key === 'Escape') (close(), anchor.focus());
+    if (ev.key === 'Escape') (ev.stopPropagation(), close(), anchor.focus());
     else if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
       ev.preventDefault();
       items[(i + (ev.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length].focus();
@@ -1473,6 +1496,7 @@ function taskMenu(id, e) {
     <div class="menu task" style="top:${e.clientY}px;left:${e.clientX}px">
       ${S.open.has(id) ? `<button data-a="collapse">${icon('chevron')}Collapse${keyHint('O')}</button>` : `<button data-a="open">${icon('chevron')}Open${keyHint('O')}</button>`}
       <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
+      <button data-a="rerun">${icon('rerun')}Rerun…${keyHint('⇧R')}</button>
       ${busy || s.archived ? '' : `<button data-a="done">${icon('done')}${s.state === 'done' ? 'Reopen' : 'Mark done'}${keyHint('E')}</button>`}
       ${s.archived ? `<button data-a="unarchive">${icon('archive')}Unarchive${keyHint('A')}</button>` : busy ? '' : `<button data-a="archive">${icon('archive')}Archive${keyHint('A')}</button>`}
       <button data-a="delete" class="danger">${icon('trash')}Delete session${keyHint('⌫')}</button>
@@ -1487,6 +1511,7 @@ function taskMenu(id, e) {
     if (a === 'open') expand(id);
     if (a === 'collapse') collapse(id);
     if (a === 'rename') rename(id);
+    if (a === 'rerun') rerun(id);
     if (a === 'done') toggleDone(id);
     if (a === 'archive' || a === 'unarchive') setArchived(id, a === 'archive');
     if (a === 'delete') deleteSession(id);
@@ -1506,6 +1531,96 @@ async function deleteSession(id) {
   await api(`/sessions/${id}`, { method: 'DELETE' }).catch((err) => toast(esc(err.message), { tone: 'bad' }));
 }
 
+// Launch the task again as a new session in the same folder: same prompt and attachments,
+// optionally edited, on whichever harness, model and thinking level you pick. The original stays.
+async function rerun(id) {
+  const s = S.full.get(id) || (await api(`/sessions/${id}`).catch((err) => toast(esc(err.message), { tone: 'bad' })));
+  const first = s?.turns?.[0];
+  if (!first?.prompt) return toast('Nothing to rerun — this session has no prompt.', { tone: 'bad' });
+  const has = (a) => S.agents.some((x) => x.id === a && x.available);
+  let agent = has(s.agent) ? s.agent : S.agents.find((x) => x.available)?.id || s.agent;
+  const models = S.agents.find((x) => x.id === agent)?.models || [];
+  let model = agent === s.agent && models.some((m) => m.id === s.model) ? s.model : savedModel(agent);
+  let effort = agent === s.agent && effortsFor(agent, model).includes(s.effort) ? s.effort : savedEffort(agent, model);
+  let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || 'edits';
+  const files = first.attachments || [];
+
+  const node = el(`
+    <div class="modal rerun-modal">
+      <header><h2>Rerun task</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <div class="rr-box">
+        <textarea class="rr-prompt" rows="3" spellcheck="false"></textarea>
+        ${files.length ? `<div class="rr-files">${files.map((f) => `<span class="rr-file">${icon('clip')}${esc(f.name)}</span>`).join('')}</div>` : ''}
+        <div class="l-bar">
+          <button class="mode-btn" data-a="mode" aria-haspopup="menu"></button>
+          <button class="runner-btn" data-a="runner" title="Harness, model and thinking level" aria-haspopup="dialog"></button>
+          <span class="grow"></span>
+          <button class="primary sm" data-a="go">${icon('rerun')}Rerun</button>
+        </div>
+      </div>
+      <p class="hint">Starts a new session in <code>${esc(s.cwd)}</code>. “${esc(s.title)}” is kept as it is.</p>
+    </div>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  const ta = $('.rr-prompt', node);
+  ta.value = first.prompt;
+  autosize(ta);
+  const modeBtn = $('[data-a="mode"]', node);
+  const paintMode = () => {
+    const m = MODES.find((x) => x.id === mode) || MODES[1];
+    modeBtn.className = `mode-btn m-${m.id}`;
+    modeBtn.innerHTML = `${icon(m.icon)}<span>${m.label}</span>`;
+    modeBtn.title = m.hint;
+  };
+  const runnerBtn = $('[data-a="runner"]', node);
+  const paintRunner = () => {
+    const a = S.agents.find((x) => x.id === agent);
+    const m = (a?.models || []).find((x) => x.id === model);
+    runnerBtn.innerHTML = `<span class="rb-logo">${harnessLogo(agent)}</span><span class="rb-h">${esc(a?.name || agentName(agent))}</span><span class="rb-m">${esc(m && m.id ? m.label : 'Default')}</span>${effort ? `<span class="rb-e">${esc(effortLabel(effort))}</span>` : ''}${icon('chevron', 'chev')}`;
+  };
+  paintMode();
+  paintRunner();
+  modeBtn.onclick = () => modeMenu(modeBtn, mode, (m) => ((mode = m), paintMode(), ta.focus()));
+  // Picks here only apply to this rerun; the launcher's remembered defaults are left alone.
+  runnerBtn.onclick = () =>
+    runnerPicker(runnerBtn, { agent, model, effort, savedModel, savedEffort }, (a, m, e) => {
+      [agent, model, effort] = [a, m, e];
+      paintRunner();
+    });
+
+  const go = async () => {
+    const prompt = ta.value.trim();
+    if (!prompt) return ta.focus();
+    const btn = $('[data-a="go"]', node);
+    btn.disabled = true;
+    try {
+      const next = await api('/sessions', { method: 'POST', body: { prompt, cwd: s.cwd, agent, mode, model, effort, attachments: files.map((f) => f.id) } });
+      S.sessions.set(next.id, next);
+      close();
+      if (S.filter !== 'all' && S.filter !== next.projectId) {
+        S.filter = 'all';
+        save('wisp.filter', S.filter);
+      }
+      renderFeed();
+      setFocus(next.id);
+      toast(`Rerunning on ${esc(agentName(agent))}`);
+    } catch (err) {
+      btn.disabled = false;
+      toast(esc(err.message), { tone: 'bad' });
+    }
+  };
+  $('[data-a="go"]', node).onclick = go;
+  ta.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) (e.preventDefault(), go());
+    if (e.key === 'Tab' && e.shiftKey) {
+      e.preventDefault();
+      mode = MODES[(MODES.findIndex((m) => m.id === mode) + 1) % MODES.length].id;
+      paintMode();
+    }
+  });
+  requestAnimationFrame(() => (ta.focus(), ta.setSelectionRange(ta.value.length, ta.value.length)));
+}
+
 async function setArchived(id, archived) {
   try {
     await api(`/sessions/${id}`, { method: 'PATCH', body: { archived } });
@@ -1716,6 +1831,7 @@ function openSettings() {
         <input name="terminalCommand" value="${esc(d.terminalCommand || '')}" placeholder="alacritty --working-directory {cwd} -e {cmd}" spellcheck="false"></label>
       <div class="setting"><span>Desktop notifications</span><span class="notif-hint muted xs"></span><button class="switch" id="notif" role="switch"></button></div>
       <div class="setting"><span>Anonymous usage stats</span><span class="tele-hint muted xs"></span><button class="switch" id="tele" role="switch"></button></div>
+      <div class="setting"><span>Memory</span><span class="learn-hint muted xs"></span><button class="ghost xs" id="openMemory">Open</button><button class="switch" id="learn" role="switch"></button></div>
       <div class="agents">${S.agents
         .map((a) => `<div class="agent-row"><span class="dot ${a.available ? 'ok' : 'bad'}"></span><b>${esc(a.name)}</b><span class="muted">${esc(a.available ? a.version : a.error || 'not found')}</span></div>`)
         .join('')}<p class="muted xs">Pick the agent next to the model in the launcher. Others plug in via <code>server/adapters</code>.</p></div>
@@ -1762,6 +1878,160 @@ function openSettings() {
     paintTele();
   };
   paintTele();
+  // Memory: one line here (on/off and a summary); the lists and retros live in their own view.
+  const learn = $('#learn', node);
+  const paintLearn = async () => {
+    learn.setAttribute('aria-checked', S.config.defaults.learn !== 'off');
+    $('.learn-hint', node).textContent = memorySummary(await api('/preferences').catch(() => null));
+  };
+  learn.onclick = async () => {
+    await setLearning(S.config.defaults.learn === 'off');
+    paintLearn();
+  };
+  $('#openMemory', node).onclick = () => openMemory();
+  node.paintLearn = paintLearn;
+  paintLearn();
+}
+
+// --- memory: what the background retros learned ---------------------------------------------
+
+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;
+const projectName = (p) => S.config.projects.find((x) => x.path === p)?.name || String(p || '').split(/[\\/]/).pop();
+
+async function setLearning(on) {
+  await api('/config', { method: 'PATCH', body: { defaults: { learn: on ? 'on' : 'off' } } });
+  await loadConfig();
+}
+
+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)}` : ''}`;
+}
+
+function openMemory({ tab = 'global' } = {}) {
+  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 = overlay(node);
+  $('.close', node).onclick = close;
+  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(launchProject);
+    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((err) => toast(esc(err.message), { tone: 'bad' }));
+    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 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 setLearning(!data?.enabled), render());
+  node.refresh = () => !editing && render();
+  render();
 }
 
 // Say once that anonymous stats are on, with a way out.
@@ -1785,6 +2055,7 @@ function shortcuts() {
     ['⌫', 'Delete item'],
     ['T', 'Take over in terminal'],
     ['R', 'Replay presentation'],
+    ['⇧R', 'Rerun with another harness, model or thinking level'],
     ['1–9', 'Pick an answer when asked'],
     ['↵', 'Launch / send'],
     ['⇧↵', 'New line'],
@@ -1831,6 +2102,7 @@ function paletteItems() {
     if (!live) items.push({ group: g, label: cur.state === 'done' ? 'Move back to review' : 'Mark done', sub, icon: 'done', kbd: 'E', run: () => toggleDone(id) });
     if (cur.archived || !live) items.push({ group: g, label: cur.archived ? 'Unarchive' : 'Archive', sub, icon: 'archive', kbd: 'A', run: () => setArchived(id, !cur.archived) });
     items.push({ group: g, label: 'Take over in terminal', sub, icon: 'terminal', kbd: 'T', run: () => takeOver(id) });
+    items.push({ group: g, label: 'Rerun…', sub, icon: 'rerun', kbd: '⇧R', keywords: 'retry again restart model harness', run: () => rerun(id) });
     items.push({ group: g, label: 'Replay presentation', sub, icon: 'replay', kbd: 'R', run: () => withCard(id, () => replay(id), { open: true }) });
     items.push({ group: g, label: 'Rename', sub, icon: 'pen', kbd: 'M', run: () => withCard(id, () => rename(id)) });
     items.push({ group: g, label: 'Delete session', sub, icon: 'trash', kbd: '⌫', keywords: 'remove', run: () => deleteSession(id) });
@@ -1861,7 +2133,8 @@ function paletteItems() {
   items.push(
     { group: a, label: 'Add project…', icon: 'folder', keywords: 'folder repo directory', run: () => openProjects({ focusAdd: true }) },
     { group: a, label: 'Manage projects', icon: 'folder', keywords: 'rename color remove', run: () => openProjects() },
-    { group: a, label: 'Settings', icon: 'settings', keywords: 'preferences editor terminal notifications', run: openSettings },
+    { group: a, label: 'Memory', icon: 'spark', keywords: 'learned preferences lessons retro', run: () => openMemory() },
+    { group: a, label: 'Settings', icon: 'settings', keywords: 'preferences lessons learn retro editor terminal notifications', run: openSettings },
     { group: a, label: 'Keyboard shortcuts', icon: 'info', kbd: '?', keywords: 'keys help hotkeys', run: shortcuts },
   );
 
@@ -1923,7 +2196,13 @@ function connect() {
     // fold it unless the user is actually watching it.
     const n = S.nodes.get(s.id);
     if (prev?.state === 'running' && s.state !== 'running' && S.open.has(s.id) && !(n && isInView(n.card) && document.hasFocus())) collapse(s.id);
+    // A state change moves the card to another section (a follow-up sends it from
+    // "Needs you" to "Working"). If the user is looking at it, follow it there
+    // instead of leaving them on whatever slid into its place. (Marking done
+    // moves focus to the next item on purpose, so that case is left alone.)
+    const pin = prev && prev.state !== s.state && s.state !== 'done' && n?.card.isConnected && isInView(n.card) ? n.card.getBoundingClientRect().top : null;
     renderFeed();
+    if (pin !== null && n.card.isConnected) stage.scrollTop += n.card.getBoundingClientRect().top - pin;
     if (prev?.state !== s.state || prev?.queued !== s.queued) scheduleRefetch(s.id);
   });
   es.addEventListener('activity', (e) => onActivity(JSON.parse(e.data)));
@@ -1938,7 +2217,12 @@ function connect() {
     renderFeed();
   });
   es.addEventListener('config', () => loadConfig());
-  es.addEventListener('hello', () => loadSessions());
+  es.addEventListener('update', (e) => renderUpdate(JSON.parse(e.data)));
+  es.addEventListener('preferences', () => {
+    $('.memory-modal')?.refresh();
+    $('.settings-modal')?.paintLearn?.();
+  });
+  es.addEventListener('hello', () => (loadSessions(), loadUpdate())); // also after sleep/reconnect
 }
 
 async function loadSessions() {
@@ -1956,6 +2240,48 @@ async function loadConfig() {
   renderLaunchChips();
 }
 
+// --- updates ----------------------------------------------------------------------------
+
+// The server polls npm; when a newer wisp-agents is out, a pill appears next to Search.
+let update = null;
+const loadUpdate = () => api('/update').then(renderUpdate).catch(() => {});
+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`;
+}
+
+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 fetch('/api/health').then((r) => r.json()).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);
+}
+
 // --- keyboard ---------------------------------------------------------------------------
 
 const feedIds = () => $$('#feed .item').map((x) => x.dataset.id);
@@ -1976,7 +2302,10 @@ document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
     if (!$('#overlay').hidden) return closeOverlay();
     if (typing) return e.target.blur();
-    if (S.focus && S.open.has(S.focus)) collapse(S.focus);
+    if (S.focus && S.open.has(S.focus)) {
+      collapse(S.focus);
+      S.nodes.get(S.focus)?.card.scrollIntoView({ block: 'nearest' });
+    }
     return;
   }
   if (typing || e.metaKey || e.ctrlKey || e.altKey || !$('#overlay').hidden) return;
@@ -2007,6 +2336,7 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     deleteSession(id);
   } else if (k === 't' && id) takeOver(id);
+  else if (k === 'r' && e.shiftKey && id) rerun(id);
   else if (k === 'r' && id) replay(id);
   else if (k === '/' && id) {
     e.preventDefault();
@@ -2023,6 +2353,7 @@ document.addEventListener('keydown', (e) => {
 
 $('#settingsBtn').onclick = openSettings;
 $('#searchBtn').onclick = openPalette;
+$('#updateBtn').onclick = installUpdate;
 $('#searchBtn').title = `Search (${combo('K')})`;
 $('#searchBtn .mod-k').textContent = combo('K');
 $('#secDone .toggle-done').onclick = () => {
@@ -2069,6 +2400,7 @@ function route() {
 
 window.addEventListener('hashchange', route);
 window.addEventListener('focus', () => {
+  loadUpdate();
   for (const id of S.open) if (S.sessions.get(id)?.unread) scheduleRefetch(id);
 });