wisp-agents 0.2.2 → 0.4.0

package/web/js/app.js

@@ -1,5 +1,6 @@
 import { renderPresentation, icon, el, fmtDuration, copy, countChanges } from './blocks.js';
 import { esc, md } from './md.js';
+import { palette } from './palette.js';
 
 // One page: the launcher on top, every session in a feed under it. Sessions
 // expand in place; nothing navigates away.
@@ -16,6 +17,7 @@ const S = {
   agents: [],
   filter: load('wisp.filter', 'all'),
   showDone: load('wisp.showDone', false),
+  showArchived: false,
   drafts: new Map(),
 };
 
@@ -40,7 +42,8 @@ const saveOpen = () => save('wisp.open', [...S.open]);
 async function api(path, { method = 'GET', body } = {}) {
   const r = await fetch(`/api${path}`, {
     method,
-    headers: body !== undefined ? { 'content-type': 'application/json' } : {},
+    // The server only accepts JSON on non-GET requests (CSRF guard), even body-less DELETEs.
+    headers: method !== 'GET' ? { 'content-type': 'application/json' } : {},
     body: body !== undefined ? JSON.stringify(body) : undefined,
   });
   const j = await r.json().catch(() => ({}));
@@ -49,13 +52,42 @@ async function api(path, { method = 'GET', body } = {}) {
 }
 
 const MODES = [
-  { id: 'plan', label: 'Plan', hint: 'Read-only. The agent investigates and proposes.' },
-  { id: 'edits', label: 'Edits', hint: 'May edit files. Shell commands that need approval are denied.' },
-  { id: 'auto', label: 'Full auto', hint: 'No permission prompts at all. Trusted repos only.' },
+  { id: 'plan', label: 'Plan', icon: 'plan', hint: 'Read-only. The agent investigates and proposes.' },
+  { id: 'edits', label: 'Edits', icon: 'pen', hint: 'May edit files. Shell commands that need approval are denied.' },
+  { id: 'auto', label: 'Full auto', icon: 'spark', hint: 'No permission prompts at all. Trusted repos only.' },
 ];
 const KIND_ICON = { read: 'read', edit: 'pen', run: 'terminal', search: 'search', web: 'web', agent: 'agent', plan: 'plan', tool: 'tool', text: 'text', error: 'warn', ask: 'ask', answer: 'check', wait: 'ask' };
 const STATUS_LABEL = { done: 'Done', partial: 'Partial', blocked: 'Blocked', info: 'Report' };
 const agentName = (id) => S.agents.find((a) => a.id === id)?.name || (id === 'wisp' ? 'wisp' : id);
+
+// Harness logos for the request bubble, vendored from @lobehub/icons into web/logos/.
+// `mono` marks are drawn in the text colour so they work in both themes.
+const HARNESS_LOGO = {
+  claude: { file: 'claudecode-color' },
+  codex: { file: 'codex-color' },
+  opencode: { file: 'opencode', mono: true },
+  cursor: { file: 'cursor', mono: true },
+};
+function harnessLogo(agent) {
+  const l = HARNESS_LOGO[agent];
+  const src = l && `/logos/${l.file}.svg`;
+  return !l ? icon('spark') : l.mono ? `<i class="mono" style="--logo:url(${src})"></i>` : `<img src="${src}" alt="">`;
+}
+// Reasoning levels the harness accepts for a model: the model's own list (opencode variants),
+// else the harness-wide one. Empty means the harness has no knob for it.
+function effortsFor(agent, model) {
+  const a = S.agents.find((x) => x.id === agent);
+  return a?.models?.find((m) => m.id === model)?.efforts ?? a?.efforts ?? [];
+}
+const effortLabel = (e) => ({ xhigh: 'X-High' })[e] || e.charAt(0).toUpperCase() + e.slice(1);
+
+function modelBadge(agent, model, effort) {
+  if (agent === 'wisp') return '';
+  const label = (model && S.agents.find((a) => a.id === agent)?.models?.find((x) => x.id === model)?.label) || model || 'Default model';
+  const tip = `${agentName(agent)} · ${label}${effort ? ` · ${effortLabel(effort)} thinking` : ''}`;
+  const logo = harnessLogo(agent);
+  return `<span class="model-logo" data-tip="${esc(tip)}" aria-label="${esc(tip)}" tabindex="0">${logo}</span>`;
+}
 const projectById = (id) => S.config.projects.find((p) => p.id === id);
 
 function ago(t) {
@@ -84,7 +116,8 @@ function overlay(node, { onClose } = {}) {
   requestAnimationFrame(() => o.classList.add('on'));
   const close = () => {
     o.classList.remove('on');
-    setTimeout(() => ((o.hidden = true), (o.innerHTML = '')), 200);
+    // Another overlay may have replaced this one while it faded (palette → settings): leave that alone.
+    setTimeout(() => o.firstChild === node && ((o.hidden = true), (o.innerHTML = '')), 200);
     onClose?.();
   };
   o.onclick = (e) => e.target === o && close();
@@ -100,18 +133,20 @@ function visible(list) {
 }
 
 function groups() {
-  const all = visible([...S.sessions.values()]);
+  const every = visible([...S.sessions.values()]);
+  const all = every.filter((s) => !s.archived);
   const needs = all
     .filter((s) => s.state === 'review' || s.state === 'waiting')
     .sort((a, b) => (b.state === 'waiting') - (a.state === 'waiting') || b.updatedAt - a.updatedAt);
   // Working items keep launch order so the feed doesn't reshuffle on every tool call.
   const working = all.filter((s) => s.state === 'running').sort((a, b) => b.createdAt - a.createdAt);
   const done = all.filter((s) => s.state === 'done').sort((a, b) => b.updatedAt - a.updatedAt);
-  return { needs, working, done };
+  const archived = every.filter((s) => s.archived).sort((a, b) => b.updatedAt - a.updatedAt);
+  return { needs, working, done, archived };
 }
 
 function renderFeed() {
-  const { needs, working, done } = groups();
+  const { needs, working, done, archived } = groups();
   const place = (sec, list, show = true) => {
     const box = $('.f-list', sec);
     sec.hidden = !list.length;
@@ -129,12 +164,14 @@ function renderFeed() {
   place($('#secWorking'), working);
   place($('#secDone'), done.slice(0, 60), S.showDone);
   $('#secDone').classList.toggle('collapsed', !S.showDone);
+  place($('#secArchived'), archived.slice(0, 60), S.showArchived);
+  $('#secArchived').classList.toggle('collapsed', !S.showArchived);
 
   // Drop nodes for sessions that are gone or filtered out of the feed entirely.
-  const shown = new Set([...needs, ...working, ...done].map((s) => s.id));
+  const shown = new Set([...needs, ...working, ...done, ...archived].map((s) => s.id));
   for (const [id, n] of S.nodes) if (!shown.has(id)) (n.card.remove(), S.nodes.delete(id), S.full.delete(id));
 
-  const empty = !needs.length && !working.length && !done.length;
+  const empty = !needs.length && !working.length && !done.length && !archived.length;
   $('#feedEmpty').hidden = !empty;
   if (empty)
     $('#feedEmpty').innerHTML = `<div class="orb big"><i></i><i></i><i></i></div><p>${S.filter === 'all' ? 'Nothing yet. Describe a task above and send it off.' : 'Nothing in this project yet.'}</p>`;
@@ -157,13 +194,14 @@ function renderFeedHead(needs, working) {
 
 // "Collapse all" floats over the page instead of living in the flow: showing it
 // never shifts the feed, and it stays reachable deep inside a long open card.
-const collapseAllBtn = el(`<button class="collapse-all" title="Collapse all (Esc collapses the focused one)"></button>`);
+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);
-collapseAllBtn.addEventListener('click', () => [...S.open].forEach((id) => collapse(id)));
+const collapseAll = () => [...S.open].forEach((id) => collapse(id));
+collapseAllBtn.addEventListener('click', collapseAll);
 function placeCollapseAll() {
   const open = [...S.open].filter((id) => S.nodes.get(id)?.card.isConnected).length;
   collapseAllBtn.classList.toggle('on', open > 0);
-  if (open) collapseAllBtn.textContent = open > 1 ? `Collapse all · ${open}` : 'Collapse';
+  if (open) collapseAllBtn.firstChild.textContent = open > 1 ? `Collapse all · ${open}` : 'Collapse';
 }
 
 // Get (or create) the card for a summary and refresh its header.
@@ -180,6 +218,11 @@ function item(s) {
       toggle(s.id);
     });
     card.addEventListener('mousedown', () => setFocus(s.id, { scroll: false }));
+    n.head.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      setFocus(s.id, { scroll: false });
+      taskMenu(s.id, e);
+    });
     if (S.open.has(s.id)) expand(s.id, { scroll: false });
   }
   renderHead(n, s);
@@ -206,9 +249,10 @@ function renderHead(n, s) {
     <span class="it-side">
       ${pill}
       ${s.queued ? `<span class="q-queued" title="Follow-ups queued">+${s.queued}</span>` : ''}
+      ${modelBadge(s.agent, s.model, s.effort)}
       <span class="q-proj">${esc(s.project)}</span>
       <span class="q-time">${ago(s.updatedAt)}</span>
-      ${s.state === 'review' && !open ? `<button class="it-quick" data-a="quick-done" title="Mark done (E)">${icon('done')}</button>` : ''}
+      ${s.state === 'review' && !open && !s.archived ? `<button class="it-quick" data-a="quick-done" title="Mark done (E)">${icon('done')}</button>` : ''}
       ${icon('chevron', 'chev')}
     </span>`;
 }
@@ -392,14 +436,16 @@ let launchProject = load('wisp.launchProject', null);
 function renderLauncher() {
   const box = $('#launcher');
   const mode = S.config.defaults.mode || 'edits';
-  const agent = S.agents.find((a) => a.id === (S.config.defaults.agent || 'claude')) || S.agents[0];
+  const ready = S.agents.filter((a) => a.available);
+  const chosen = S.agents.find((a) => a.id === (S.config.defaults.agent || 'claude'));
+  let agent = chosen?.available ? chosen : ready[0] || chosen || S.agents[0];
   box.innerHTML = `
     <div class="l-projects"></div>
-    <textarea id="prompt" rows="2" placeholder="What should I go do? Paste screenshots, drop logs or videos…" spellcheck="false"></textarea>
+    <textarea id="prompt" rows="2" spellcheck="false"></textarea>
     <div class="l-bar">
       <button class="icon-btn" id="attach" title="Attach files">${icon('clip')}</button>
-      <div class="seg" id="mode">${MODES.map((m) => `<button data-mode="${m.id}" class="${m.id === mode ? 'on' : ''}" title="${esc(m.hint)}">${m.label}</button>`).join('')}</div>
-      <button class="model-btn" id="model" title="Model" aria-haspopup="menu"></button>
+      <button class="mode-btn" id="mode" aria-haspopup="menu"></button>
+      <button class="runner-btn" id="runner" title="Harness and model" aria-haspopup="dialog"></button>
       <span class="grow"></span>
       <button class="send" id="launch" title="Launch (Enter · Shift+Enter for newline)">${icon('enter')}</button>
     </div>`;
@@ -412,30 +458,67 @@ function renderLauncher() {
   autosize(ta);
   ta.value = S.drafts.get('home') || '';
   ta.addEventListener('input', () => S.drafts.set('home', ta.value));
+  // While focus is elsewhere, the placeholder advertises the shortcut that brings you back.
+  const hint = () => (ta.placeholder = document.activeElement === ta
+    ? 'What should I go do? Paste screenshots, drop logs or videos…'
+    : `What should I go do? Press ${combo('L')} to start typing`);
+  ta.addEventListener('focus', hint);
+  ta.addEventListener('blur', hint);
+  hint();
   $('#attach', box).onclick = tray.pick;
 
+  // Mode is set-and-forget, so it's one small button: just an icon on the default (Edits),
+  // spelled out when it's Plan or Full auto so you can't miss it.
   let curMode = mode;
-  $$('#mode button', box).forEach((b) =>
-    b.addEventListener('click', () => {
-      curMode = b.dataset.mode;
-      $$('#mode button', box).forEach((x) => x.classList.toggle('on', x === b));
-      api('/config', { method: 'PATCH', body: { defaults: { mode: curMode } } }).catch(() => {});
-    }),
-  );
-  const models = agent?.models || [{ id: '', label: 'Default' }];
-  let curModel = models.some((m) => m.id === S.config.defaults.model) ? S.config.defaults.model : models[0].id;
-  const modelBtn = $('#model', box);
-  const paintModel = () => {
-    const m = models.find((x) => x.id === curModel);
-    modelBtn.innerHTML = `${icon('spark')}<span>${esc(m.label)}</span>${icon('chevron', 'chev')}`;
-    modelBtn.classList.toggle('set', !!curModel);
+  const modeBtn = $('#mode', box);
+  const paintMode = () => {
+    const m = MODES.find((x) => x.id === curMode) || MODES[1];
+    modeBtn.className = `mode-btn m-${m.id}`;
+    modeBtn.innerHTML = `${icon(m.icon)}${m.id === 'edits' ? '' : `<span>${m.label}</span>`}`;
+    modeBtn.title = `${m.label}: ${m.hint}\nShift+Tab to switch`;
+  };
+  const setMode = (id) => {
+    curMode = id;
+    S.config.defaults.mode = id;
+    paintMode();
+    api('/config', { method: 'PATCH', body: { defaults: { mode: id } } }).catch(() => {});
   };
-  paintModel();
-  modelBtn.onclick = () =>
-    modelMenu(modelBtn, models, curModel, (id) => {
-      curModel = id;
-      paintModel();
-      api('/config', { method: 'PATCH', body: { defaults: { model: id } } }).catch(() => {});
+  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);
+  const paintRunner = () => {
+    const m = (agent?.models || []).find((x) => x.id === curModel);
+    runnerBtn.innerHTML = `<span class="rb-logo">${harnessLogo(agent?.id)}</span><span class="rb-h">${esc(agent?.name || 'No agent')}</span><span class="rb-m">${esc(m && m.id ? m.label : 'Default')}</span>${curEffort ? `<span class="rb-e">${esc(effortLabel(curEffort))}</span>` : ''}${icon('chevron', 'chev')}`;
+    runnerBtn.title = `Harness, model and thinking level${curEffort ? `\nThinking: ${effortLabel(curEffort)}` : ''}`;
+  };
+  paintRunner();
+  runnerBtn.onclick = () =>
+    runnerPicker(runnerBtn, { agent: agent?.id, model: curModel, effort: curEffort, savedModel, savedEffort }, (id, model, effort) => {
+      agent = S.agents.find((a) => a.id === id);
+      curModel = model;
+      curEffort = effort;
+      paintRunner();
+      const d = S.config.defaults;
+      const models = { ...d.models, [id]: model };
+      // A model without levels leaves the harness's saved level alone, so switching back restores it.
+      const efforts = effort || effortsFor(id, model).length ? { ...d.efforts, [id]: effort } : d.efforts;
+      Object.assign(d, { agent: id, model, models, effort, efforts });
+      api('/config', { method: 'PATCH', body: { defaults: { agent: id, model, models, effort, efforts } } }).catch(() => {});
     });
 
   const launch = async () => {
@@ -447,7 +530,7 @@ function renderLauncher() {
     btn.disabled = true;
     try {
       const attachments = await tray.ids();
-      const s = await api('/sessions', { method: 'POST', body: { prompt, cwd: project.path, agent: agent?.id || 'claude', mode: curMode, model: curModel, attachments } });
+      const s = await api('/sessions', { method: 'POST', body: { prompt, cwd: project.path, agent: agent?.id || 'claude', mode: curMode, model: curModel, effort: curEffort, attachments } });
       S.sessions.set(s.id, s);
       ta.value = '';
       S.drafts.delete('home');
@@ -473,7 +556,49 @@ function renderLauncher() {
       e.preventDefault();
       launch();
     }
+    if (e.key === 'Tab' && e.shiftKey) {
+      e.preventDefault();
+      setMode(MODES[(MODES.findIndex((m) => m.id === curMode) + 1) % MODES.length].id);
+    }
+  });
+}
+
+function modeMenu(anchor, current, pick) {
+  const open = $('.menu.mode');
+  if (open) return open.close();
+  const menu = el(`
+    <div class="menu mode" role="menu">
+      ${MODES.map((m) => `<button role="menuitemradio" aria-checked="${m.id === current}" data-mode="${m.id}" class="m-${m.id}${m.id === current ? ' on' : ''}">
+        ${icon(m.icon)}<span class="mm-text"><b>${m.label}</b><small>${esc(m.hint)}</small></span>${icon('check', 'mm-check')}
+      </button>`).join('')}
+    </div>`);
+  const close = () => (menu.remove(), anchor.classList.remove('open'), document.removeEventListener('mousedown', outside));
+  const outside = (ev) => !menu.contains(ev.target) && !anchor.contains(ev.target) && close();
+  menu.close = close;
+  setTimeout(() => document.addEventListener('mousedown', outside));
+  menu.onclick = (ev) => {
+    const b = ev.target.closest('button');
+    if (!b) return;
+    close();
+    pick(b.dataset.mode);
+    $('#prompt')?.focus();
+  };
+  menu.addEventListener('keydown', (ev) => {
+    const items = $$('button', menu);
+    const i = items.indexOf(document.activeElement);
+    if (ev.key === 'Escape') (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();
+    }
   });
+  document.body.append(menu);
+  anchor.classList.add('open');
+  const r = anchor.getBoundingClientRect();
+  const h = menu.offsetHeight;
+  menu.style.left = `${Math.max(8, Math.min(r.left, innerWidth - menu.offsetWidth - 8))}px`;
+  menu.style.top = `${r.bottom + 6 + h < innerHeight - 8 ? r.bottom + 6 : r.top - 6 - h}px`;
+  $('button.on', menu)?.focus();
 }
 
 function renderLaunchChips() {
@@ -546,9 +671,53 @@ function renderProjects() {
       renderLaunchChips();
     }),
   );
+  $$('.p-chip[data-id]:not([data-id="all"])').forEach((b) =>
+    b.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      projectMenu(b.dataset.id, e);
+    }),
+  );
   $('#manageProjects').onclick = () => openProjects();
 }
 
+function projectMenu(id, e) {
+  const p = projectById(id);
+  if (!p) return;
+  $('.menu.project')?.close();
+  const menu = el(`
+    <div class="menu project" style="top:${e.clientY}px;left:${e.clientX}px">
+      <button data-a="manage">${icon('pen')}Manage projects…</button>
+      <button data-a="delete" class="danger">${icon('trash')}Remove project</button>
+    </div>`);
+  const close = () => (menu.remove(), document.removeEventListener('mousedown', outside));
+  const outside = (ev) => !menu.contains(ev.target) && close();
+  menu.close = close;
+  setTimeout(() => document.addEventListener('mousedown', outside));
+  menu.onclick = async (ev) => {
+    const a = ev.target.closest('button')?.dataset.a;
+    close();
+    if (a === 'manage') openProjects();
+    if (a === 'delete' && confirm(`Remove “${p.name}” from wisp? Sessions and files are kept.`)) {
+      try {
+        await api(`/projects/${id}`, { method: 'DELETE' });
+      } catch (err) {
+        return toast(esc(err.message), { tone: 'bad' });
+      }
+      if (S.filter === id) {
+        S.filter = 'all';
+        save('wisp.filter', S.filter);
+      }
+      await loadConfig();
+      renderFeed();
+    }
+  };
+  document.body.append(menu);
+  // Keep the menu on-screen when right-clicking near the window edge.
+  const r = menu.getBoundingClientRect();
+  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
+  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+}
+
 // --- expanded item body ------------------------------------------------------------
 
 function ctxFor(s, turn, isLatest) {
@@ -616,6 +785,7 @@ function renderBody(id, { fresh }) {
     <span class="m">${esc(agentName(s.agent))}</span>
     <span class="m">${esc(MODES.find((m) => m.id === s.mode)?.label || s.mode)}</span>
     ${s.model ? `<span class="m">${esc(s.model)}</span>` : ''}
+    ${s.effort ? `<span class="m">${esc(effortLabel(s.effort))} thinking</span>` : ''}
     <span class="m path" title="${esc(s.cwd)}">${esc((proj?.path || s.cwd).replace(S.config.home || '', '~'))}</span>`;
   // Done lives both in the top bar and next to the composer, so it's reachable after reading.
   $$('[data-a="done"]', body).forEach((b) => {
@@ -689,7 +859,7 @@ function renderTurn(s, t, isLatest, fold) {
       <div class="ask-text ${long ? 'clamped' : ''}">${esc(t.prompt)}</div>
       ${long ? '<button class="link xs more-btn">Show all</button>' : ''}
       ${t.attachments?.length ? `<div class="ask-atts">${t.attachments.map((a) => (a.mime?.startsWith('image/') ? `<img src="/api/uploads/${a.id}" alt="${esc(a.name)}" title="${esc(a.name)}">` : `<a class="att-pill" href="/api/uploads/${a.id}" target="_blank">${icon('file')}${esc(a.name)}</a>`)).join('')}</div>` : ''}
-      <time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time>
+      <div class="ask-foot">${modelBadge(t.agent || s.agent, t.model ?? s.model, t.effort ?? s.effort)}<time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time></div>
       ${fold ? `<button class="ghost xs t-unfold" title="Collapse this exchange">${icon('chevron', 'chev')}</button>` : ''}
     </div>`);
   if (fold) ask.querySelector('.t-unfold').onclick = fold;
@@ -856,11 +1026,13 @@ function renderDock(id) {
   const dock = $('.it-dock', n.body);
   const comp = el(`
     <div class="composer">
+      <ul class="c-queued"></ul>
       <textarea class="reply" rows="1" spellcheck="false"></textarea>
       <div class="c-bar">
         <button class="icon-btn c-attach" title="Attach files">${icon('clip')}</button>
         <span class="c-hint"></span>
         <button class="ghost sm c-done" data-a="done" title="Mark done (E)">${icon('done')}<span>Mark done</span></button>
+        <button class="ghost xs c-queue" hidden>${icon('queue')}<span>Queue</span></button>
         <button class="send" title="Send (Enter · Shift+Enter for newline)">${icon('enter')}</button>
       </div>
     </div>`);
@@ -872,6 +1044,7 @@ function renderDock(id) {
   acceptFiles(comp, ta, n.tray);
   $('.c-attach', comp).onclick = n.tray.pick;
   $('.c-done', comp).onclick = () => toggleDone(id);
+  $('.c-queue', comp).onclick = toggleQueue;
   ta.value = S.drafts.get(id) || '';
   ta.addEventListener('input', () => S.drafts.set(id, ta.value));
   ta.addEventListener('focus', () => setFocus(id, { scroll: false }));
@@ -897,11 +1070,82 @@ function updateDock(id) {
     : s.ask
       ? `Answer ${name}…`
       : s.state === 'running'
-        ? `Queue a follow-up — sent when ${name} finishes`
+        ? queueing()
+          ? `Queue a follow-up — sent when ${name} finishes`
+          : `Steer ${name} — interrupts and sends now`
         : s.state === 'done'
           ? 'Follow up to reopen…'
           : `Follow up with ${name}…`;
   $('.c-hint', n.card).innerHTML = s.queue?.length ? `${s.queue.length} queued` : '';
+  renderQueued(s, $('.c-queued', n.card), name);
+  const q = $('.c-queue', n.card);
+  q.hidden = tour || s.state !== 'running';
+  q.classList.toggle('on', queueing());
+  q.title = queueing()
+    ? `Queueing: follow-ups wait until ${name} finishes. Click to send now instead.`
+    : `Sending now: follow-ups interrupt ${name}. Click to queue them instead.`;
+}
+
+// Follow-ups waiting their turn, shown above the composer so it's clear what goes out next.
+function renderQueued(s, list, name) {
+  const key = (s.queue || []).map((q) => q.id).join();
+  if (list.dataset.key === key) return;
+  list.dataset.key = key;
+  list.innerHTML = '';
+  (s.queue || []).forEach((q, i) => {
+    const li = el(`
+      <li class="cq">
+        <span class="cq-tag">${i === 0 ? `Next · after ${esc(name)} finishes` : `Queued #${i + 1}`}</span>
+        <span class="cq-text">${esc(q.text)}</span>
+        <button class="att-x" title="Cancel this follow-up">${icon('x')}</button>
+      </li>`);
+    const cancel = () => {
+      // Items queued by a wisp older than queue ids get one when wisp restarts.
+      if (!q.id) return toast('Restart wisp to cancel this follow-up.', { tone: 'bad' });
+      const short = q.text.length > 80 ? `${q.text.slice(0, 80)}…` : q.text;
+      if (!confirm(`Cancel this queued follow-up?\n\n“${short}”`)) return;
+      api(`/sessions/${s.id}/queue?item=${encodeURIComponent(q.id)}`, { method: 'DELETE' }).catch((err) => toast(esc(err.message), { tone: 'bad' }));
+    };
+    $('.att-x', li).onclick = cancel;
+    li.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      queuedMenu(e, cancel);
+    });
+    list.append(li);
+  });
+}
+
+// Right-click on a queued follow-up.
+function queuedMenu(e, cancel) {
+  $('.menu.queued')?.close();
+  const menu = el(`
+    <div class="menu queued" style="top:${e.clientY}px;left:${e.clientX}px">
+      <button data-a="cancel" class="danger">${icon('x')}Cancel follow-up</button>
+    </div>`);
+  const close = () => (menu.remove(), document.removeEventListener('mousedown', outside));
+  const outside = (ev) => !menu.contains(ev.target) && close();
+  menu.close = close;
+  setTimeout(() => document.addEventListener('mousedown', outside));
+  menu.onclick = (ev) => {
+    const a = ev.target.closest('button')?.dataset.a;
+    close();
+    if (a === 'cancel') cancel();
+  };
+  document.body.append(menu);
+  const r = menu.getBoundingClientRect();
+  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
+  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+}
+
+// Follow-ups sent while an agent works interrupt it, unless the user flipped this on.
+const queueing = () => S.config?.defaults?.followUp === 'queue';
+
+async function toggleQueue() {
+  const followUp = queueing() ? 'now' : 'queue';
+  S.config.defaults.followUp = followUp;
+  S.nodes.forEach((_, id) => updateDock(id));
+  await api('/config', { method: 'PATCH', body: { defaults: { followUp } } }).catch((err) => toast(esc(err.message), { tone: 'bad' }));
 }
 
 async function sendReply(id, text) {
@@ -914,12 +1158,13 @@ async function sendReply(id, text) {
   try {
     const r = s.ask && !attachments.length
       ? await api(`/sessions/${id}/answer`, { method: 'POST', body: { text } })
-      : await api(`/sessions/${id}/reply`, { method: 'POST', body: { text, attachments } });
+      : await api(`/sessions/${id}/reply`, { method: 'POST', body: { text, attachments, queue: queueing() } });
     const ta = n && $('.reply', n.card);
     if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
     S.drafts.delete(id);
     n?.tray?.clear();
-    if (r.queued) toast('Queued — it goes out as soon as the agent finishes.');
+    if (r.queued)
+      toast(r.ahead ? `Queued behind ${r.ahead} earlier follow-up${r.ahead > 1 ? 's' : ''} — they go out first, in order.` : 'Queued — it goes out as soon as the agent finishes.');
   } catch (err) {
     toast(esc(err.message), { tone: 'bad' });
   }
@@ -975,51 +1220,202 @@ function rename(id) {
   title.onblur = () => done(true);
 }
 
-function modelMenu(anchor, models, current, pick) {
-  const open = $('.menu.models');
+// One popover for all three choices: harnesses on the left, the focused harness's models on the
+// right, and its thinking levels underneath. Clicking (or arrowing to) a harness previews its
+// models; picking a model commits harness + model, picking a thinking level commits it in place.
+function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort }, pick) {
+  const open = $('.picker');
   if (open) return open.close();
+  let focusAgent = S.agents.find((a) => a.id === agent && a.available) ? agent : S.agents.find((a) => a.available)?.id;
+
   const r = anchor.getBoundingClientRect();
-  const below = r.bottom + 60 * models.length + 20 < innerHeight;
-  const menu = el(`
-    <div class="menu models" role="menu" style="left:${r.left}px;${below ? `top:${r.bottom + 6}px` : `bottom:${innerHeight - r.top + 6}px`}">
-      ${models
-        .map(
-          (m) => `<button role="menuitemradio" aria-checked="${m.id === current}" data-id="${esc(m.id)}" class="${m.id === current ? 'on' : ''}">
-            <span class="mm-text"><b>${esc(m.label)}</b>${m.hint ? `<small>${esc(m.hint)}</small>` : ''}</span>${icon('check', 'mm-check')}
-          </button>`,
-        )
-        .join('')}
+  const width = Math.min(580, innerWidth - 24);
+  // Stay inside the launcher card when there's room, else inside the window.
+  const box = anchor.closest('.launcher')?.getBoundingClientRect();
+  const right = Math.min(innerWidth - 12, box && box.width >= width ? box.right : innerWidth - 12);
+  const left = Math.max(12, Math.min(r.left, right - width));
+  const below = r.bottom + 440 < innerHeight;
+  const node = el(`
+    <div class="picker" role="dialog" aria-label="Harness, model and thinking level" style="left:${left}px;width:${width}px;${below ? `top:${r.bottom + 6}px` : `bottom:${innerHeight - r.top + 6}px`}">
+      <div class="pk-side" role="listbox" aria-label="Harness">
+        <div class="pk-head">Harness</div>
+        ${S.agents
+          .map(
+            (a) => `<button class="pk-h${a.available ? '' : ' off'}" role="option" data-id="${esc(a.id)}" ${a.available ? '' : 'disabled'}>
+              <span class="pk-logo">${harnessLogo(a.id)}</span>
+              <span class="pk-text"><b>${esc(a.name)}</b><small>${esc(a.available ? `${(a.models || []).length > 1 ? `${a.models.length - 1} models` : 'Default model'}` : 'Not installed')}</small></span>
+              ${a.id === agent ? '<span class="pk-dot" title="In use"></span>' : ''}
+            </button>`,
+          )
+          .join('')}
+      </div>
+      <div class="pk-main">
+        <label class="pk-search">${icon('search')}<input spellcheck="false" autocomplete="off"></label>
+        <div class="pk-list" role="listbox" aria-label="Model"></div>
+        <div class="pk-effort" role="radiogroup" aria-label="Thinking level"></div>
+      </div>
     </div>`);
-  const items = $$('button', menu);
+  const input = $('.pk-search input', node);
+  const list = $('.pk-list', node);
+  const sideRows = $$('.pk-h', node);
+  const seg = $('.pk-effort', node);
+  const modelOf = (id) => (id === agent ? model : savedModel(id));
+  const effortOf = (id) => (id === agent ? effort : savedEffort(id, modelOf(id)));
+
+  const paintEffort = () => {
+    const levels = effortsFor(focusAgent, modelOf(focusAgent));
+    const current = effortOf(focusAgent);
+    seg.hidden = !levels.length;
+    seg.innerHTML = `<span class="pk-ehead">Thinking</span><span class="pk-seg">${['', ...levels]
+      .map((e) => `<button role="radio" aria-checked="${e === current}" class="${e === current ? 'on' : ''}" data-e="${esc(e)}" title="${e ? `${esc(effortLabel(e))} reasoning effort` : 'Whatever the harness is set to'}">${esc(e ? effortLabel(e) : 'Default')}</button>`)
+      .join('')}</span>`;
+  };
+  const chooseEffort = (e) => {
+    const m = modelOf(focusAgent);
+    if (focusAgent === agent && e === effort) return;
+    if (focusAgent !== agent) {
+      $$('.pk-dot', node).forEach((d) => d.remove());
+      sideRows.find((b) => b.dataset.id === focusAgent)?.insertAdjacentHTML('beforeend', '<span class="pk-dot" title="In use"></span>');
+    }
+    agent = focusAgent;
+    model = m;
+    effort = e;
+    pick(agent, model, effort);
+    paintEffort();
+    $(`button[data-e="${CSS.escape(e)}"]`, seg)?.focus();
+  };
+
+  const paintModels = () => {
+    const a = S.agents.find((x) => x.id === focusAgent);
+    sideRows.forEach((b) => b.classList.toggle('on', b.dataset.id === focusAgent));
+    const models = a?.models || [{ id: '', label: 'Default' }];
+    const current = focusAgent === agent ? model : savedModel(focusAgent);
+    input.placeholder = `Search ${a?.name || ''} models`;
+    $('.pk-search', node).hidden = models.length <= 6;
+    // opencode-style ids (provider/model) group by provider.
+    const groups = new Map();
+    for (const m of models) {
+      const g = m.id && m.id.includes('/') ? m.hint || '' : '';
+      if (!groups.has(g)) groups.set(g, []);
+      groups.get(g).push(m);
+    }
+    list.innerHTML = [...groups]
+      .map(
+        ([g, ms]) =>
+          `<div class="pk-group">${g ? `<div class="pk-ghead">${esc(g)}</div>` : ''}${ms
+            .map(
+              (m) => `<button class="pk-m${m.id === current ? ' on' : ''}" role="option" aria-selected="${m.id === current}" data-id="${esc(m.id)}">
+                <span class="pk-text"><b>${esc(m.id ? m.label : 'Default')}</b><small>${esc(m.id ? (m.hint && m.hint !== g ? m.hint : '') : m.hint || `Whatever ${a?.name} is set to`)}</small></span>${icon('check', 'pk-check')}
+              </button>`,
+            )
+            .join('')}</div>`,
+      )
+      .join('') + '<div class="pk-empty" hidden>No models match</div>';
+    filter();
+    paintEffort();
+  };
+  const rows = () => $$('.pk-m', list).filter((b) => !b.hidden);
+  const filter = () => {
+    const q = input.value.trim().toLowerCase();
+    for (const b of $$('.pk-m', list)) b.hidden = !!q && !`${b.dataset.id} ${b.textContent}`.toLowerCase().includes(q);
+    for (const g of $$('.pk-group', list)) g.hidden = !$$('.pk-m', g).some((b) => !b.hidden);
+    $('.pk-empty', list).hidden = rows().length > 0;
+  };
+  const focusModels = () => {
+    const rs = rows();
+    const target = rs.find((b) => b.classList.contains('on')) || rs[0];
+    target?.focus();
+    target?.scrollIntoView({ block: 'nearest' });
+  };
+  const preview = (id, { focus } = {}) => {
+    if (id !== focusAgent) {
+      focusAgent = id;
+      input.value = '';
+      paintModels();
+    }
+    if (focus) sideRows.find((b) => b.dataset.id === id)?.focus();
+  };
+
   const close = () => {
-    menu.remove();
+    node.remove();
     anchor.classList.remove('open');
     document.removeEventListener('mousedown', outside);
     document.removeEventListener('keydown', keys, true);
   };
-  menu.close = close;
-  const outside = (e) => !menu.contains(e.target) && !anchor.contains(e.target) && close();
-  const keys = (e) => {
+  node.close = close;
+  const choose = (m) => {
+    close();
+    anchor.focus();
+    // Carry the thinking level over when the new model accepts it, else fall back to the saved one.
+    const cur = effortOf(focusAgent);
+    const e = effortsFor(focusAgent, m).includes(cur) ? cur : savedEffort(focusAgent, m);
+    if (focusAgent !== agent || m !== model || e !== effort) pick(focusAgent, m, e);
+  };
+  const outside = (e) => !node.contains(e.target) && !anchor.contains(e.target) && close();
+  const step = (items, d) => {
+    if (!items.length) return;
     const i = items.indexOf(document.activeElement);
-    if (e.key === 'Escape') (e.preventDefault(), e.stopPropagation(), close(), anchor.focus());
-    else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    const next = items[i < 0 ? (d > 0 ? 0 : items.length - 1) : (i + d + items.length) % items.length];
+    next.focus();
+    next.scrollIntoView({ block: 'nearest' });
+    return next;
+  };
+  const keys = (e) => {
+    const inSide = sideRows.includes(document.activeElement);
+    const live = sideRows.filter((b) => !b.disabled);
+    const segBtns = $$('button', seg);
+    const inSeg = segBtns.includes(document.activeElement);
+    if (e.key === 'Escape') return e.preventDefault(), e.stopPropagation(), close(), anchor.focus();
+    // Tab hops from the model list to the thinking levels and back; anywhere else it leaves.
+    if (e.key === 'Tab' && !seg.hidden && (inSeg ? e.shiftKey : !e.shiftKey && !inSide)) {
+      e.preventDefault();
+      return inSeg ? focusModels() : (segBtns.find((b) => b.classList.contains('on')) || segBtns[0]).focus();
+    }
+    if (e.key === 'Tab') return close();
+    if (inSeg && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      e.preventDefault();
+      e.stopPropagation();
+      return step(segBtns, e.key === 'ArrowRight' ? 1 : -1);
+    }
+    if (inSeg && e.key === 'ArrowUp') return e.preventDefault(), focusModels();
+    if (inSeg && (e.key === 'Enter' || e.key === ' ')) return e.preventDefault(), chooseEffort(document.activeElement.dataset.e);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
       e.preventDefault();
       e.stopPropagation();
-      items[(i +(e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length].focus();
-    } else if (e.key === 'Tab') close();
+      const d = e.key === 'ArrowDown' ? 1 : -1;
+      if (inSide) preview(step(live, d)?.dataset.id);
+      else step(rows(), d);
+    } else if (e.key === 'ArrowLeft' && document.activeElement !== input) {
+      e.preventDefault();
+      preview(focusAgent, { focus: true });
+    } else if ((e.key === 'ArrowRight' || e.key === 'Enter') && inSide) {
+      e.preventDefault();
+      focusModels();
+    } else if (e.key === 'Enter' && document.activeElement === input && rows()[0]) {
+      e.preventDefault();
+      choose(rows()[0].dataset.id);
+    } else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !$('.pk-search', node).hidden && document.activeElement !== input) {
+      input.focus(); // type-to-search from anywhere in the picker
+    }
   };
-  menu.onclick = (e) => {
-    const b = e.target.closest('button');
-    if (!b) return;
-    close();
-    anchor.focus();
-    if (b.dataset.id !== current) pick(b.dataset.id);
+  sideRows.forEach((b) => (b.onclick = () => preview(b.dataset.id)));
+  list.onclick = (e) => {
+    const b = e.target.closest('.pk-m');
+    if (b) choose(b.dataset.id);
   };
+  input.oninput = filter;
+  seg.onclick = (e) => {
+    const b = e.target.closest('button[data-e]');
+    if (b) chooseEffort(b.dataset.e);
+  };
+
+  paintModels();
   setTimeout(() => document.addEventListener('mousedown', outside));
   document.addEventListener('keydown', keys, true);
-  document.body.append(menu);
+  document.body.append(node);
   anchor.classList.add('open');
-  (items.find((b) => b.classList.contains('on')) || items[0]).focus();
+  focusModels(); // scrolls the current model into view…
+  if (!$('.pk-search', node).hidden) input.focus({ preventScroll: true }); // …then search is ready to type
 }
 
 function moreMenu(id, anchor) {
@@ -1028,10 +1424,11 @@ function moreMenu(id, anchor) {
   const r = anchor.getBoundingClientRect();
   const menu = el(`
     <div class="menu" style="top:${r.bottom + 6}px;right:${innerWidth - r.right}px">
-      <button data-a="rename">${icon('pen')}Rename</button>
+      <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
       ${s.agentSessionId ? `<button data-a="copy">${icon('copy')}Copy resume command</button>` : ''}
       <button data-a="folder">${icon('folder')}Open project in editor</button>
-      <button data-a="delete" class="danger">${icon('trash')}Delete session</button>
+      ${s.archived ? `<button data-a="unarchive">${icon('archive')}Unarchive${keyHint('A')}</button>` : s.state !== 'running' && s.state !== 'waiting' ? `<button data-a="archive">${icon('archive')}Archive${keyHint('A')}</button>` : ''}
+      <button data-a="delete" class="danger">${icon('trash')}Delete session${keyHint('⌫')}</button>
     </div>`);
   const close = () => (menu.remove(), document.removeEventListener('mousedown', outside));
   const outside = (e) => !menu.contains(e.target) && close();
@@ -1046,11 +1443,65 @@ function moreMenu(id, anchor) {
       toast('Copied resume command');
     }
     if (a === 'folder') openInEditor(s, '.');
-    if (a === 'delete' && confirm('Delete this session from wisp? (The agent’s own history is kept.)')) {
-      await api(`/sessions/${id}`, { method: 'DELETE' });
-    }
+    if (a === 'archive' || a === 'unarchive') setArchived(id, a === 'archive');
+    if (a === 'delete') deleteSession(id);
+  };
+  document.body.append(menu);
+}
+
+// Right-click on a feed item.
+function taskMenu(id, e) {
+  const s = S.sessions.get(id);
+  if (!s) return;
+  $('.menu.task')?.close();
+  const busy = s.state === 'running' || s.state === 'waiting';
+  const menu = el(`
+    <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>
+      ${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>
+    </div>`);
+  const close = () => (menu.remove(), document.removeEventListener('mousedown', outside));
+  const outside = (ev) => !menu.contains(ev.target) && close();
+  menu.close = close;
+  setTimeout(() => document.addEventListener('mousedown', outside));
+  menu.onclick = async (ev) => {
+    const a = ev.target.closest('button')?.dataset.a;
+    close();
+    if (a === 'open') expand(id);
+    if (a === 'collapse') collapse(id);
+    if (a === 'rename') rename(id);
+    if (a === 'done') toggleDone(id);
+    if (a === 'archive' || a === 'unarchive') setArchived(id, a === 'archive');
+    if (a === 'delete') deleteSession(id);
   };
   document.body.append(menu);
+  const r = menu.getBoundingClientRect();
+  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
+  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+}
+
+// The keyboard shortcut for a menu item, shown at its right edge. Menus act on the
+// focused card, so the key does the same thing as the click.
+const keyHint = (k) => `<kbd class="menu-kbd">${k}</kbd>`;
+
+async function deleteSession(id) {
+  if (!confirm('Delete this session from wisp? (The agent’s own history is kept.)')) return;
+  await api(`/sessions/${id}`, { method: 'DELETE' }).catch((err) => toast(esc(err.message), { tone: 'bad' }));
+}
+
+async function setArchived(id, archived) {
+  try {
+    await api(`/sessions/${id}`, { method: 'PATCH', body: { archived } });
+  } catch (err) {
+    return toast(esc(err.message), { tone: 'bad' });
+  }
+  if (archived) {
+    if (S.open.has(id)) collapse(id);
+    toast('Archived', { action: { label: 'Undo', run: () => setArchived(id, false) } });
+  }
 }
 
 function replay(id) {
@@ -1084,7 +1535,8 @@ function openInEditor(s, p, line) {
 function reveal(id) {
   const s = S.sessions.get(id);
   if (!s) return;
-  if (s.state === 'done' && !S.showDone) {
+  if (s.archived) S.showArchived = true;
+  else if (s.state === 'done' && !S.showDone) {
     S.showDone = true;
     save('wisp.showDone', true);
   }
@@ -1248,10 +1700,10 @@ function openSettings() {
         <select name="terminal">${(S.config.terminals || []).map((t) => `<option value="${t.id}" ${(d.terminal || 'auto') === t.id ? 'selected' : ''}>${t.label}</option>`).join('')}</select></label>
       <label class="custom-term" ${d.terminal === 'custom' ? '' : 'hidden'}><span>Terminal command</span>
         <input name="terminalCommand" value="${esc(d.terminalCommand || '')}" placeholder="alacritty --working-directory {cwd} -e {cmd}" spellcheck="false"></label>
-      <label><span>Notifications</span><button class="ghost sm" id="notif">${'Notification' in window && Notification.permission === 'granted' ? 'Enabled' : 'Enable'}</button></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="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">More harnesses (Codex, opencode…) plug in via <code>server/adapters</code>.</p></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>
     </div>`);
   const close = overlay(node);
   $('.close', node).onclick = close;
@@ -1262,35 +1714,152 @@ function openSettings() {
     await api('/config', { method: 'PATCH', body: { defaults: { [name]: value } } });
     await loadConfig();
   });
-  $('#notif', node).onclick = async (e) => {
-    if (!('Notification' in window)) return;
-    const p = await Notification.requestPermission();
-    e.target.textContent = p === 'granted' ? 'Enabled' : 'Blocked in browser';
+  // The switch shows wisp's own on/off preference; the browser permission can only be
+  // granted from here, never revoked, so it surfaces as a hint when it blocks the switch.
+  const sw = $('#notif', node);
+  const paint = () => {
+    const perm = 'Notification' in window ? Notification.permission : 'unsupported';
+    const on = notifyOn();
+    sw.setAttribute('aria-checked', on);
+    sw.disabled = perm === 'denied' || perm === 'unsupported';
+    $('.notif-hint', node).textContent =
+      perm === 'denied' ? 'Blocked — allow notifications for this site in your browser' : perm === 'unsupported' ? 'Not supported here' : on ? 'On' : 'Off';
+  };
+  sw.onclick = async () => {
+    let want = !notifyOn();
+    if (want && Notification.permission !== 'granted') want = (await Notification.requestPermission()) === 'granted';
+    await api('/config', { method: 'PATCH', body: { defaults: { notify: want ? 'on' : 'off' } } });
+    await loadConfig();
+    paint();
   };
+  paint();
 }
 
 function shortcuts() {
   const rows = [
-    ['N', 'New wisp (focus the launcher)'],
+    [combo('K'), 'Search & commands'],
+    [`N · ${combo('L')}`, 'New wisp (focus the launcher)'],
     ['J / K', 'Next / previous item'],
     ['O / ↵', 'Expand / collapse item'],
     ['/', 'Follow up on item'],
     ['E', 'Mark done & go to next'],
+    ['A', 'Archive / unarchive'],
+    ['M', 'Rename item'],
+    ['⌫', 'Delete item'],
     ['T', 'Take over in terminal'],
     ['R', 'Replay presentation'],
     ['1–9', 'Pick an answer when asked'],
     ['↵', 'Launch / send'],
     ['⇧↵', 'New line'],
+    ['C', 'Collapse all'],
     ['Esc', 'Close / collapse'],
   ];
   const node = el(`<div class="modal keys-modal"><header><h2>Shortcuts</h2></header>${rows.map(([k, l]) => `<div class="krow"><kbd>${k}</kbd><span>${l}</span></div>`).join('')}</div>`);
   overlay(node);
 }
 
+// --- command palette ------------------------------------------------------------------
+
+const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
+// How a modifier shortcut reads on this OS: "⌘L" on macOS, "Ctrl+L" on Windows/Linux.
+const combo = (k) => (IS_MAC ? `⌘${k}` : `Ctrl+${k}`);
+// ⌘ on macOS, Ctrl elsewhere (AltGr on Windows reports Ctrl+Alt, so Alt is excluded). Falls back to
+// the physical key on non-Latin layouts, where e.key is e.g. "д" for the L key.
+const modKey = (e, k) =>
+  (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey &&
+  (e.key.toLowerCase() === k || (!/^[a-z]$/i.test(e.key) && e.code === `Key${k.toUpperCase()}`));
+const STATE_LABEL = { running: 'Working', waiting: 'Asking', review: 'Review', done: 'Done' };
+
+function focusLauncher() {
+  stage.scrollTo({ top: 0, behavior: 'smooth' });
+  $('#prompt')?.focus({ preventScroll: true });
+}
+
+// Run something on a session's card, expanding it first if the action needs the body.
+function withCard(id, fn, { open = false } = {}) {
+  reveal(id);
+  if (!open || S.open.has(id)) return setTimeout(fn, 50);
+  expand(id).then(fn);
+}
+
+function paletteItems() {
+  const items = [];
+  const cur = S.focus && S.sessions.get(S.focus);
+  if (cur) {
+    const id = cur.id;
+    const live = cur.state === 'running' || cur.state === 'waiting';
+    const g = 'This wisp';
+    const sub = cur.title;
+    items.push({ group: g, label: 'Follow up', sub, icon: 'send', kbd: '/', run: () => withCard(id, () => $('.reply', S.nodes.get(id)?.card)?.focus(), { open: true }) });
+    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: '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) });
+  }
+
+  const sessions = [...S.sessions.values()].sort((a, b) => a.archived - b.archived || b.updatedAt - a.updatedAt);
+  for (const s of sessions) {
+    const state = s.archived ? 'Archived' : s.state === 'review' ? STATUS_LABEL[s.status] || 'Review' : STATE_LABEL[s.state] || s.state;
+    items.push({
+      group: 'Wisps',
+      label: s.title,
+      sub: `${s.project} · ${state} · ${ago(s.updatedAt)}`,
+      dot: s.color,
+      keywords: [s.preview, s.live, s.question, agentName(s.agent)].filter(Boolean).join(' '),
+      // Live and unread work floats up; archived sinks.
+      rank: (s.state === 'waiting' ? 3 : 0) + (s.unread ? 2 : 0) + (s.state === 'running' ? 1 : 0) - (s.archived ? 4 : 0),
+      run: () => reveal(s.id),
+    });
+  }
+
+  const a = 'Actions';
+  items.push(
+    { group: a, label: 'New wisp', icon: 'plus', kbd: 'N', keywords: 'launch create prompt task', run: focusLauncher },
+    { group: a, label: S.showDone ? 'Hide done' : 'Show done', icon: 'done', keywords: 'toggle finished', run: () => $('#secDone .toggle-done').click() },
+    { group: a, label: S.showArchived ? 'Hide archived' : 'Show archived', icon: 'archive', keywords: 'toggle', run: () => $('#secArchived .toggle-done').click() },
+  );
+  if (S.open.size) items.push({ group: a, label: 'Collapse all', icon: 'minus', kbd: 'C', run: collapseAll });
+  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: 'Keyboard shortcuts', icon: 'info', kbd: '?', keywords: 'keys help hotkeys', run: shortcuts },
+  );
+
+  const filter = (id) => () => {
+    S.filter = id;
+    save('wisp.filter', id);
+    renderProjects();
+    renderFeed();
+    renderLaunchChips();
+  };
+  items.push({ group: 'Projects', label: 'All projects', sub: S.filter === 'all' ? 'Current filter' : '', dot: 'slate', keywords: 'filter clear', run: filter('all') });
+  for (const p of S.config.projects.slice().sort((x, y) => (y.lastUsedAt || y.addedAt) - (x.lastUsedAt || x.addedAt))) {
+    items.push({ group: 'Projects', label: p.name, sub: S.filter === p.id ? 'Current filter' : p.path, dot: p.color, keywords: `filter ${p.path}`, run: filter(p.id) });
+  }
+  return items;
+}
+
+let paletteOpen = false;
+function openPalette() {
+  if (paletteOpen) return closeOverlay();
+  // Don't stack over another modal (settings, projects…); the palette replaces nothing.
+  if (!$('#overlay').hidden) return;
+  paletteOpen = true;
+  palette({ items: paletteItems(), overlay: (node) => overlay(node, { onClose: () => (paletteOpen = false) }) });
+}
+
 // --- notifications -----------------------------------------------------------------------
 
+// On unless turned off in settings, and only if the browser lets us.
+function notifyOn() {
+  return S.config.defaults.notify !== 'off' && 'Notification' in window && Notification.permission === 'granted';
+}
+
 function askNotify() {
-  if ('Notification' in window && Notification.permission === 'default') Notification.requestPermission();
+  if (S.config.defaults.notify !== 'off' && 'Notification' in window && Notification.permission === 'default') Notification.requestPermission();
 }
 
 function notifyFinished(s) {
@@ -1299,7 +1868,7 @@ function notifyFinished(s) {
   if (viewing) return;
   const verb = s.state === 'waiting' ? 'has a question' : 'is ready';
   toast(`${icon(s.state === 'waiting' ? 'ask' : 'spark')} <b>${esc(s.title)}</b> ${verb}`, { action: { label: 'Open', run: () => reveal(s.id) }, timeout: 7000 });
-  if ('Notification' in window && Notification.permission === 'granted' && !document.hasFocus()) {
+  if (notifyOn() && !document.hasFocus()) {
     const note = new Notification(`${s.project}: ${s.title}`, { body: s.state === 'waiting' ? s.question : s.preview || 'Ready for review', icon: '/favicon.svg', tag: s.id });
     note.onclick = () => (window.focus(), reveal(s.id));
   }
@@ -1313,6 +1882,10 @@ function connect() {
     const s = JSON.parse(e.data);
     const prev = S.sessions.get(s.id);
     S.sessions.set(s.id, s);
+    // A card left open while it worked shouldn't land in "Needs you" expanded —
+    // 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);
     renderFeed();
     if (prev?.state !== s.state || prev?.queued !== s.queued) scheduleRefetch(s.id);
   });
@@ -1346,19 +1919,22 @@ async function loadConfig() {
   renderLaunchChips();
 }
 
-function renderAgentStatus() {
-  const a = S.agents[0];
-  $('#agentStatus').innerHTML = a
-    ? `<span class="dot ${a.available ? 'ok' : 'bad'}"></span>${esc(a.name)}`
-    : '';
-  $('#agentStatus').title = a ? a.version || a.error || '' : '';
-}
-
 // --- keyboard ---------------------------------------------------------------------------
 
 const feedIds = () => $$('#feed .item').map((x) => x.dataset.id);
 
 document.addEventListener('keydown', (e) => {
+  // ⌘K / Ctrl+K works from anywhere, even mid-sentence in the launcher.
+  if (modKey(e, 'k')) {
+    e.preventDefault();
+    return openPalette();
+  }
+  // ⌘L / Ctrl+L jumps to the launcher from anywhere, including another composer.
+  if (modKey(e, 'l')) {
+    e.preventDefault();
+    if (!$('#overlay').hidden) closeOverlay();
+    return focusLauncher();
+  }
   const typing = e.target.closest('input, textarea, select, [contenteditable="true"]');
   if (e.key === 'Escape') {
     if (!$('#overlay').hidden) return closeOverlay();
@@ -1371,8 +1947,7 @@ document.addEventListener('keydown', (e) => {
   const id = S.focus && S.nodes.has(S.focus) ? S.focus : null;
   if (k === 'n') {
     e.preventDefault();
-    stage.scrollTo({ top: 0, behavior: 'smooth' });
-    $('#prompt')?.focus({ preventScroll: true });
+    focusLauncher();
   } else if (k === 'j' || k === 'k') {
     const ids = feedIds();
     if (!ids.length) return;
@@ -1383,7 +1958,18 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     toggle(id);
   } else if (k === 'e' && id) toggleDone(id);
-  else if (k === 't' && id) takeOver(id);
+  else if (k === 'a' && id) {
+    const s = S.sessions.get(id);
+    if (s && (s.archived || (s.state !== 'running' && s.state !== 'waiting'))) setArchived(id, !s.archived);
+  }
+  else if (k === 'c' && S.open.size) collapseAll();
+  else if (k === 'm' && id) {
+    e.preventDefault();
+    rename(id);
+  } else if ((k === 'delete' || k === 'backspace') && id) {
+    e.preventDefault();
+    deleteSession(id);
+  } else if (k === 't' && id) takeOver(id);
   else if (k === 'r' && id) replay(id);
   else if (k === '/' && id) {
     e.preventDefault();
@@ -1399,11 +1985,18 @@ document.addEventListener('keydown', (e) => {
 });
 
 $('#settingsBtn').onclick = openSettings;
+$('#searchBtn').onclick = openPalette;
+$('#searchBtn').title = `Search (${combo('K')})`;
+$('#searchBtn .mod-k').textContent = combo('K');
 $('#secDone .toggle-done').onclick = () => {
   S.showDone = !S.showDone;
   save('wisp.showDone', S.showDone);
   renderFeed();
 };
+$('#secArchived .toggle-done').onclick = () => {
+  S.showArchived = !S.showArchived;
+  renderFeed();
+};
 
 // elapsed timers + "ago" stamps
 setInterval(() => {
@@ -1444,7 +2037,6 @@ window.addEventListener('focus', () => {
 
 (async () => {
   [S.agents] = await Promise.all([api('/agents').catch(() => []), loadConfig(), loadSessions()]);
-  renderAgentStatus();
   renderLauncher();
   connect();
   route();