wisp-agents 0.12.0 → 0.14.0

package/web/js/app.js

@@ -21,6 +21,7 @@ const S = {
   showDone: load('wisp.showDone', false),
   showArchived: false,
   drafts: new Map(),
+  replyModes: new Map(), // session id → the mode its next follow-up switches to
 };
 
 const $ = (s, root = document) => root.querySelector(s);
@@ -61,20 +62,30 @@ const MODES = [
   { 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 KIND_ICON = { read: 'read', edit: 'pen', run: 'terminal', search: 'search', web: 'web', agent: 'agent', plan: 'plan', tool: 'tool', text: 'text', error: 'warn', ask: 'ask', answer: 'check', wait: 'ask', background: 'clock' };
 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);
+const agentName = (id) => S.agents.find((a) => a.id === id)?.name || (id === 'auto' ? 'Auto' : id === 'wisp' ? 'wisp' : id);
+// Auto: not a CLI but wisp's router (server/router.js), which picks harness and model per task.
+// Its "models" are the goal it optimises for; there are no thinking levels to pick.
+const AUTO_GOALS = [
+  { id: 'balanced', label: 'Balanced', hint: 'Best result per dollar' },
+  { id: 'cheap', label: 'Cheap', hint: 'Lowest cost that still gets it done' },
+  { id: 'best', label: 'Best', hint: 'Best result; cost only breaks ties' },
+];
+const AUTO = { id: 'auto', name: 'Auto', available: true, delegates: true, models: AUTO_GOALS, efforts: [], hint: 'wisp picks the harness and model from what worked before' };
 // Harness lists per place: '' is this computer, else a machine (what it reported when it came online).
 const agentsAt = (k) => (k ? (machineById(k)?.state === 'online' && machineById(k).remote?.agents) || null : S.agents);
 // A harness's models and levels: this computer's if it's installed here, else the first machine's that has it.
 function agentById(id) {
+  if (id === 'auto') return AUTO;
   const local = S.agents.find((a) => a.id === id);
   if (local?.available) return local;
   return S.machines.map((m) => agentsAt(m.id)?.find((a) => a.id === id && a.available)).find(Boolean) || local;
 }
 // The harnesses you can pick for the places under "Run on": installed on any of them counts (a union).
 // `missing` names the picked places that don't have it. Machines not online yet don't count.
-function harnessesAt(places) {
+function harnessesAt(places, { auto = false } = {}) {
+  if (auto) return [AUTO, ...harnessesAt(places)];
   const known = places.map((k) => [k, agentsAt(k)]).filter(([, l]) => l);
   if (!known.length) known.push(['', S.agents]);
   const ids = [...new Set([...S.agents, ...known.flatMap(([, l]) => l)].map((a) => a.id))];
@@ -98,6 +109,7 @@ const HARNESS_LOGO = {
   grok: { file: 'grok', mono: true },
 };
 function harnessLogo(agent) {
+  if (agent === 'auto') return `<i class="auto-mark">${icon('spark')}</i>`;
   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="">`;
@@ -110,12 +122,19 @@ function effortsFor(agent, model) {
 }
 const effortLabel = (e) => ({ xhigh: 'X-High' })[e] || e.charAt(0).toUpperCase() + e.slice(1);
 
-function modelBadge(agent, model, effort) {
+function modelBadge(agent, model, effort, route) {
   if (agent === 'wisp') return '';
   const label = (model && agentById(agent)?.models?.find((x) => x.id === model)?.label) || model || 'Default model';
-  const tip = `${agentName(agent)} · ${label}${effort ? ` · ${effortLabel(effort)} thinking` : ''}`;
+  const tip = route ? routeTip(route) : `${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>`;
+  return `<span class="model-logo${route ? ' routed' : ''}" data-tip="${esc(tip)}" aria-label="${esc(tip)}" tabindex="0">${logo}</span>`;
+}
+// Why Auto picked what it picked, in one line.
+function routeTip(r) {
+  const goal = AUTO_GOALS.find((g) => g.id === r.goal)?.label || 'Balanced';
+  const record = r.n ? `${Math.round(r.chance * 100)}% on your ${r.type} tasks (${r.n})` : `${Math.round(r.chance * 100)}% expected on ${r.type} tasks`;
+  const why = r.trying ? 'new model, trying it out' : r.explored ? 'trying an alternative to learn' : record;
+  return `Auto · ${goal} → ${r.label} · ${why}${r.usd ? ` · ~$${r.usd.toFixed(2)}` : ''}`;
 }
 const projectById = (id) => S.config.projects.find((p) => p.id === id);
 
@@ -358,7 +377,7 @@ function renderHead(n, s) {
       ${pill}
       ${s.queued ? `<span class="q-queued" title="Follow-ups queued">+${s.queued}</span>` : ''}
       ${s.pr ? prPill(s.pr) : ''}
-      ${s.team?.length ? teamStack(s.agent, s.team) : modelBadge(s.agent, s.model, s.effort)}
+      ${s.team?.length ? teamStack(s.agent, s.team) : modelBadge(s.agent, s.model, s.effort, s.route)}
       ${s.machine ? machinePill(s.machine) : ''}
       <span class="q-proj">${esc(s.project)}</span>
       <span class="q-time">${ago(s.updatedAt)}</span>
@@ -641,6 +660,7 @@ function syncWhere() {
 // The model is remembered per harness (ids aren't portable between them).
 function savedModel(id) {
   const d = S.config.defaults;
+  if (id === 'auto') return AUTO_GOALS.some((g) => g.id === d.models?.auto) ? d.models.auto : 'balanced';
   const want = d.models?.[id] ?? (id === d.agent ? d.model : '');
   const models = agentById(id)?.models || [];
   return models.some((m) => m.id === want) ? want : '';
@@ -655,8 +675,8 @@ function savedEffort(id, model) {
 function renderLauncher() {
   const box = $('#launcher');
   const mode = S.config.defaults.mode || 'edits';
-  const here = harnessesAt(launchWhere);
-  const chosen = here.find((a) => a.id === (S.config.defaults.agent || 'claude'));
+  const here = harnessesAt(launchWhere, { auto: true });
+  const chosen = here.find((a) => a.id === (S.config.defaults.agent || 'auto'));
   let agent = chosen?.available ? chosen : here.find((a) => a.available) || chosen || here[0];
   box.innerHTML = `
     <div class="l-projects"></div>
@@ -667,8 +687,7 @@ function renderLauncher() {
       <button class="mode-btn" id="mode" aria-haspopup="menu"></button>
       <div class="runners">
         <button class="runner-btn" id="runner" title="Harness and model" aria-haspopup="dialog"></button>
-        <button class="vs-btn" id="compareBtn" aria-pressed="false"><span>vs</span>${icon('x')}</button>
-        <button class="runner-btn" id="runner2" title="Second harness to compare with" aria-haspopup="dialog" hidden></button>
+        <button class="vs-btn vs-add" id="compareBtn"><span>vs</span>${icon('plus')}</button>
       </div>
       <button class="tog-btn team-btn" id="teamBtn" aria-haspopup="dialog"></button>
       <span class="grow"></span>
@@ -726,9 +745,8 @@ function renderLauncher() {
   const runnerBtn = $('#runner', box);
   const paintRunner = () => {
     paintRunnerBtn(runnerBtn, agent?.id, curModel, curEffort);
-    runnerBtn.title = `Harness, model and thinking level${curEffort ? `\nThinking: ${effortLabel(curEffort)}` : ''}`;
+    runnerBtn.title = compare.length ? runnerTip(agent?.id, curModel, curEffort) : `Harness, model and thinking level${curEffort ? `\nThinking: ${effortLabel(curEffort)}` : ''}`;
   };
-  paintRunner();
 
   // Worktree: each launch gets a fresh branch from the remote's default branch (git repos only).
   const wtBtn = $('#wtBtn', box);
@@ -764,34 +782,64 @@ function renderLauncher() {
       api('/config', { method: 'PATCH', body: { defaults: { subagents: team, teamPreset } } }).catch(() => {});
     });
 
-  // Compare: a second harness gets the same task; picks here don't touch the launcher defaults.
-  let compare = null;
+  // Compare: more harnesses get the same task (up to MAX_RUNNERS in all); picks here don't touch
+  // the launcher defaults. Each extra sits behind a "vs" that removes it; the button at the end
+  // adds the next one. Past two, the pill folds the names away and keeps the logos.
+  let compare = [];
   const vsBtn = $('#compareBtn', box);
-  const runner2 = $('#runner2', box);
+  const runners = vsBtn.parentElement;
   const paintCompare = () => {
-    vsBtn.parentElement.classList.toggle('cmp', !!compare);
-    vsBtn.setAttribute('aria-pressed', String(!!compare));
-    vsBtn.title = compare ? 'Stop comparing' : 'Compare: run the same task on a second harness, side by side';
-    runner2.hidden = !compare;
-    if (compare) paintRunnerBtn(runner2, compare.agent, compare.model, compare.effort);
+    const n = compare.length;
+    runners.classList.toggle('cmp', n > 0);
+    runners.classList.toggle('many', n > 1);
+    for (const x of $$('.cmp-x', runners)) x.remove();
+    compare.forEach((c, i) => {
+      const name = agentName(c.agent);
+      const del = el(`<button class="vs-btn vs-del cmp-x" data-i="${i}" title="Remove ${esc(name)} from the comparison" aria-label="Remove ${esc(name)}"><span>vs</span>${icon('x')}</button>`);
+      const btn = el(`<button class="runner-btn cmp-x" data-i="${i}" aria-haspopup="dialog"></button>`);
+      paintRunnerBtn(btn, c.agent, c.model, c.effort);
+      btn.title = runnerTip(c.agent, c.model, c.effort);
+      vsBtn.before(del, btn);
+    });
+    vsBtn.hidden = n >= MAX_RUNNERS - 1;
+    vsBtn.title = n ? `Add another harness (up to ${MAX_RUNNERS} side by side)` : 'Compare: run the same task on another harness, side by side';
+    paintRunner(); // its tooltip spells everything out once the names fold away
   };
-  paintCompare();
   vsBtn.onclick = () => {
-    if (compare) compare = null;
-    else {
-      const other = harnessesAt(launchWhere).find((a) => a.available && a.id !== agent?.id) || agent;
-      compare = { agent: other?.id, model: savedModel(other?.id), effort: savedEffort(other?.id, savedModel(other?.id)) };
-    }
+    // The next harness nobody in the pill uses yet; once they're all in, another copy of the lead.
+    const used = new Set([agent?.id, ...compare.map((c) => c.agent)]);
+    const here = harnessesAt(launchWhere).filter((a) => a.available);
+    const next = here.find((a) => !used.has(a.id)) || agent;
+    const model = savedModel(next?.id);
+    compare = [...compare, { agent: next?.id, model, effort: savedEffort(next?.id, model) }];
     paintCompare();
+    // Its "vs" lands right under the pointer: it can't remove anything until the pointer has left.
+    const fresh = $$('.vs-del', runners).at(-1);
+    fresh?.classList.add('fresh');
+    fresh?.addEventListener('pointerleave', () => fresh.classList.remove('fresh'), { once: true });
+    // Straight into picking it when it's a repeat, since that's rarely the one you want.
+    if (used.has(next?.id)) $$('.runner-btn.cmp-x', runners).at(-1)?.click();
   };
-  runner2.onclick = () =>
-    runnerPicker(runner2, { ...compare, savedModel, savedEffort, places: launchWhere }, (id, model, effort) => {
-      compare = { agent: id, model, effort };
+  runners.addEventListener('click', (e) => {
+    const x = e.target.closest('.cmp-x');
+    if (!x) return;
+    const i = Number(x.dataset.i);
+    if (x.classList.contains('vs-del')) {
+      if (x.classList.contains('fresh')) return;
+      compare = compare.filter((_, k) => k !== i);
+      paintCompare();
+      (compare.length ? $$('.vs-del', runners)[Math.min(i, compare.length - 1)] : vsBtn).focus();
+      return;
+    }
+    runnerPicker(x, { ...compare[i], savedModel, savedEffort, places: launchWhere }, (id, model, effort) => {
+      compare = compare.map((c, k) => (k === i ? { agent: id, model, effort } : c));
       paintCompare();
     });
+  });
+  paintCompare();
   runnerBtn.onclick = () =>
-    runnerPicker(runnerBtn, { agent: agent?.id, model: curModel, effort: curEffort, savedModel, savedEffort, places: launchWhere }, (id, model, effort) => {
-      agent = harnessesAt(launchWhere).find((a) => a.id === id);
+    runnerPicker(runnerBtn, { agent: agent?.id, model: curModel, effort: curEffort, savedModel, savedEffort, places: launchWhere, auto: true }, (id, model, effort) => {
+      agent = harnessesAt(launchWhere, { auto: true }).find((a) => a.id === id);
       curModel = model;
       curEffort = effort;
       paintRunner();
@@ -807,13 +855,18 @@ function renderLauncher() {
   const launch = async () => {
     const prompt = ta.value.trim();
     if (!prompt) return ta.focus();
+    if (isFeedback(prompt)) {
+      ta.value = '';
+      ta.dispatchEvent(new Event('input'));
+      return feedbackCommand(prompt, { restore: () => !ta.value && ((ta.value = prompt), ta.dispatchEvent(new Event('input'))) });
+    }
     // One run per place picked under "Run on", each in the project picked for it.
     const targets = launchWhere.map((k) => ({ k, m: k ? machineById(k) : null, project: projectById(launchPicks[k]) }));
     const unset = targets.find((t) => !t.project);
     if (unset) return openProjects({ focusAdd: true, machine: unset.k || null });
     const off = targets.find((t) => t.m && t.m.state !== 'online');
     if (off) return offlineToast(off.k);
-    const wanted = [agent?.id, ...(compare ? [compare.agent] : [])];
+    const wanted = [agent?.id, ...compare.map((c) => c.agent)].filter((id) => id !== 'auto'); // Auto picks from what's there
     for (const t of targets) {
       const list = agentsAt(t.k);
       const missing = list && wanted.find((id) => !list.some((x) => x.id === id && x.available));
@@ -828,7 +881,7 @@ function renderLauncher() {
     const cmp = compare;
     const runner = { agent: agent?.id || 'claude', model: curModel, effort: curEffort };
     const pending = targets.map((t) => addPending(prompt, t, runner));
-    if (compare) (compare = null), paintCompare();
+    if (cmp.length) (compare = []), paintCompare();
     ta.value = '';
     S.drafts.delete('home');
     ta.dispatchEvent(new Event('input'));
@@ -847,7 +900,7 @@ function renderLauncher() {
         targets.map((t) =>
           api('/sessions', {
             method: 'POST',
-            body: { prompt, cwd: t.project.path, machine: t.k || undefined, groupId, agent: runner.agent, mode: curMode, model: runner.model, effort: runner.effort, attachments, worktree: S.config.defaults.worktree === 'off' && !cmp ? false : undefined, compare: cmp ? [cmp] : undefined, subagents: team.length && canLead(runner.agent) ? team : undefined },
+            body: { prompt, cwd: t.project.path, machine: t.k || undefined, groupId, agent: runner.agent, mode: curMode, model: runner.model, effort: runner.effort, attachments, worktree: S.config.defaults.worktree === 'off' && !cmp.length ? false : undefined, compare: cmp.length ? cmp : undefined, subagents: team.length && canLead(runner.agent) ? team : undefined },
           }),
         ),
       );
@@ -861,7 +914,7 @@ function renderLauncher() {
       if (!started.length) {
         if (!ta.value) ((ta.value = prompt), ta.dispatchEvent(new Event('input')));
         tray.restore(files);
-        if (cmp && !compare) (compare = cmp), paintCompare();
+        if (cmp.length && !compare.length) (compare = cmp), paintCompare();
         return;
       }
       askNotify();
@@ -875,7 +928,7 @@ function renderLauncher() {
   // Picking other places (or a machine coming online) changes which harnesses exist: keep the
   // pick if one of them still has it, else move to one that's installed there.
   box.placesChanged = () => {
-    const here = harnessesAt(launchWhere);
+    const here = harnessesAt(launchWhere, { auto: true }); // Auto works anywhere: it picks from what's there
     if (!agent || here.find((a) => a.id === agent.id)?.available) return paintRunner();
     const next = here.find((a) => a.id === S.config.defaults.agent && a.available) || here.find((a) => a.available);
     if (!next) return paintRunner();
@@ -897,6 +950,15 @@ function renderLauncher() {
   });
 }
 
+// One launch runs on at most this many harnesses side by side (the server's MAX_COMPARE).
+const MAX_RUNNERS = 4;
+// A runner button's tooltip, for when the pill is too full to show names.
+function runnerTip(agentId, model, effort) {
+  const a = agentById(agentId);
+  const m = (a?.models || []).find((x) => x.id === model);
+  return [a?.name || agentName(agentId), m?.label || model || 'Default model', effort && effortLabel(effort)].filter(Boolean).join(' · ');
+}
+
 // The harness · model · thinking button, as in the launcher. agent '' reads "Launcher default".
 function paintRunnerBtn(btn, agentId, model, effort) {
   const a = agentById(agentId);
@@ -1132,7 +1194,7 @@ function teamEditor(anchor, { lead, team, presetId, places }, onChange) {
     const rb = e.target.closest('.tp-runner');
     if (rb) {
       const m = members[i];
-      runnerPicker(rb, { agent: m.agent, model: m.model, effort: m.effort, savedModel, savedEffort, places }, (agent, model, effort) => {
+      runnerPicker(rb, { agent: m.agent, model: m.model, effort: m.effort, savedModel, savedEffort, places, auto: true }, (agent, model, effort) => {
         Object.assign(m, { agent, model, effort });
         paintList();
         commit();
@@ -1313,7 +1375,7 @@ function modeMenu(anchor, current, pick) {
     if (!b) return;
     close();
     pick(b.dataset.mode);
-    $('#prompt')?.focus();
+    if (anchor.id === 'mode') $('#prompt')?.focus();
   };
   menu.addEventListener('keydown', (ev) => {
     const items = $$('button', menu);
@@ -1750,7 +1812,7 @@ function renderBody(id, { fresh }) {
     ${mode && mode.id !== 'edits' ? `<span class="m mode m-${mode.id}" title="${esc(mode.hint)}">${icon(mode.icon)}${esc(mode.label)}</span>` : ''}
     ${s.worktree ? `<span class="m branch" title="Worktree: ${esc(s.worktree.path)}\nFrom ${esc(s.worktree.baseRef)}">${icon('branch')}${esc(s.worktree.branch)}</span>` : ''}
     ${s.subagents?.length ? `<span class="m team-m" title="${esc(s.subagents.map((m) => `@${m.name}${copiesOf(m) > 1 ? ` ×${copiesOf(m)}` : ''}: ${memberLabel(m)}${m.use ? ` — ${m.use}` : ''}`).join('\n'))}">${icon('agent')}${teamSize(s.subagents)} subagent${teamSize(s.subagents) > 1 ? 's' : ''}</span>` : ''}
-    ${s.origin ? `<span class="m" title="Launched by a ${esc(s.origin.kind)}">${icon(s.origin.kind === 'trigger' ? 'replay' : 'spark')}${esc(s.origin.name)}</span>` : ''}`;
+    ${s.origin ? `<span class="m" title="${s.origin.kind === 'telegram' ? 'Started from Telegram' : `Launched by a ${esc(s.origin.kind)}`}">${icon({ trigger: 'replay', telegram: 'send' }[s.origin.kind] || 'spark')}${esc(s.origin.name)}</span>` : ''}`;
   const live = s.state === 'running' || s.state === 'waiting';
   // Ship sits in the top bar and again next to the composer, so it's there after reading the result.
   renderPrStrip(id);
@@ -1770,7 +1832,14 @@ function renderBody(id, { fresh }) {
   earlier.textContent = `Show ${hiddenCount} earlier turn${hiddenCount === 1 ? '' : 's'}`;
   // A new turn re-folds everything older, so the latest exchange is what's open by default.
   const latestId = s.turns.at(-1)?.id;
-  if (n.latestTurn !== latestId) (n.unfolded.clear(), (n.latestTurn = latestId));
+  const newTurn = n.latestTurn !== latestId;
+  if (newTurn) (n.unfolded.clear(), (n.latestTurn = latestId));
+  // Folding the last answer when a follow-up starts can take a screen or more out of the card
+  // above the composer. Hold the composer still, so the new exchange lands where the user was
+  // typing instead of the whole card sliding off the top of the screen.
+  const watched = watching(id);
+  const dock = watched && newTurn && !fresh ? $('.it-dock', body) : null;
+  const dockTop = dock?.getBoundingClientRect().top;
   const keep = new Set();
   let firstNew = null;
   turns.forEach((t) => {
@@ -1794,7 +1863,8 @@ function renderBody(id, { fresh }) {
   for (const [tid, v] of n.turnNodes) if (!keep.has(tid)) (v.node.remove(), n.turnNodes.delete(tid));
 
   updateDock(id);
-  if (firstNew && watching(id)) requestAnimationFrame(() => firstNew.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+  if (dock?.isConnected) scrollByPx(dock.getBoundingClientRect().top - dockTop);
+  if (firstNew && watched) requestAnimationFrame(() => firstNew.scrollIntoView({ behavior: 'smooth', block: 'start' }));
 }
 
 // Whether the user is reading a card, not just catching its edge at the top or bottom of the
@@ -1860,6 +1930,14 @@ function renderFoldedTurn(t, unfold) {
   return node;
 }
 
+// A follow-up that switched the mode says so, next to the model it ran on.
+function modeSwitch(s, t) {
+  const i = s.turns.indexOf(t);
+  const prev = s.turns.slice(0, i).findLast((x) => x.mode)?.mode;
+  const m = t.mode && prev && t.mode !== prev && MODES.find((x) => x.id === t.mode);
+  return m ? `<span class="t-mode m-${m.id}" title="Switched from ${esc(MODES.find((x) => x.id === prev)?.label || prev)} to ${m.label} for this follow-up">${icon(m.icon)}${m.label}</span>` : '';
+}
+
 // `fold` is set for older turns the user unfolded, so they can tuck them away again.
 function renderTurn(s, t, isLatest, fold) {
   const node = el(`<article class="turn ${t.rolledBackAt ? 'is-rolled-back' : ''}" data-turn="${t.id}"></article>`);
@@ -1873,6 +1951,7 @@ function renderTurn(s, t, isLatest, fold) {
       ${t.attachments?.length ? `<div class="ask-atts">${t.attachments.map((a) => (a.mime?.startsWith('image/') ? `<img src="/api/uploads/${a.id}" alt="${esc(a.name)}" title="${esc(a.name)}">` : `<a class="att-pill" href="/api/uploads/${a.id}" target="_blank">${icon('file')}${esc(a.name)}</a>`)).join('')}</div>` : ''}
       <div class="ask-foot">
         ${modelBadge(t.agent || s.agent, t.model ?? s.model, t.effort ?? s.effort)}
+        ${modeSwitch(s, t)}
         <time>${new Date(t.startedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</time>
         ${cpLabel ? `<span class="cp-sha" title="Git checkpoint before this turn (${esc(cp.head)}${cp.dirty ? ' + uncommitted changes' : ''})">${icon('branch')}${esc(cpLabel)}</span>` : ''}
         ${t.rolledBackAt ? '<span class="rev-tag">Rolled back</span>' : ''}
@@ -2001,6 +2080,7 @@ function renderTrail(s, t) {
   const st = t.stats || {};
   const canRollback = s.agent !== 'wisp' && s.state !== 'running' && (t.changes?.length || t.checkpoint?.commit);
   const rolledBack = !!t.rolledBackAt;
+  const rated = t.feedback?.rating;
   const node = el(`
     <div class="trail">
       <div class="trail-bar">
@@ -2012,6 +2092,7 @@ function renderTrail(s, t) {
         ${t.changes?.length ? `<button class="link xs" data-tab="changes">${t.changes.length} file${t.changes.length > 1 ? 's' : ''} <span class="plus">+${totals.add}</span> <span class="minus">−${totals.del}</span></button>` : ''}
         ${acts.length ? `<button class="link xs" data-tab="activity">Activity</button>` : ''}
         ${t.presentation?.notes ? `<button class="link xs" data-tab="notes">Agent notes</button>` : ''}
+        ${feedbackOn() ? `<span class="rate ${rated ? 'rated' : ''}">${['up', 'down'].map((r) => `<button class="rate-btn ${rated === r ? 'on' : ''}" data-rate="${r}" title="${r === 'up' ? 'Good result' : 'Bad result'}: tell the wisp team" aria-pressed="${rated === r}">${icon(`thumb-${r}`)}</button>`).join('')}</span>` : ''}
       </div>
       <div class="trail-body" hidden></div>
     </div>`);
@@ -2021,6 +2102,20 @@ function renderTrail(s, t) {
     if (e.target.closest('[data-a="rollback"]')) {
       return rollbackTurn(s.id, t.id, rolledBack);
     }
+    const rb = e.target.closest('[data-rate]');
+    if (rb) {
+      const next = t.feedback?.rating === rb.dataset.rate ? null : rb.dataset.rate;
+      rateTurn(s, t, node, next);
+      if (next !== 'down' && open === 'rate') ((open = null), (body.hidden = true));
+      if (next === 'down') {
+        open = 'rate';
+        $$('[data-tab]', node).forEach((x) => x.classList.remove('on'));
+        body.hidden = false;
+        body.innerHTML = '';
+        body.append(whyForm(s, t, () => ((open = null), (body.hidden = true))));
+      }
+      return;
+    }
     const b = e.target.closest('[data-tab]');
     if (!b) return;
     const tab = b.dataset.tab;
@@ -2074,6 +2169,7 @@ function renderDock(id) {
       <textarea class="reply" rows="1" spellcheck="false"></textarea>
       <div class="c-bar">
         <button class="icon-btn c-attach" title="Attach files">${icon('clip')}</button>
+        <button class="mode-btn c-mode" aria-haspopup="menu"></button>
         <span class="c-hint"></span>
         <button class="ghost sm c-ship" data-a="ship" title="Commit, push and open a pull request (S)" hidden>${icon('send')}<span>Ship it</span></button>
         <button class="ghost sm c-done" data-a="done" title="Mark done (E)">${icon('done')}<span>Mark done</span></button>
@@ -2091,6 +2187,8 @@ function renderDock(id) {
   $('.c-done', comp).onclick = () => toggleDone(id);
   $('.c-ship', comp).onclick = () => shipDialog(id);
   $('.c-queue', comp).onclick = toggleQueue;
+  const modeBtn = $('.c-mode', comp);
+  modeBtn.onclick = () => modeMenu(modeBtn, replyMode(id), (m) => (setReplyMode(id, m), ta.focus()));
   ta.value = S.drafts.get(id) || '';
   ta.addEventListener('input', () => S.drafts.set(id, ta.value));
   ta.addEventListener('focus', () => setFocus(id, { scroll: false }));
@@ -2099,10 +2197,37 @@ function renderDock(id) {
       e.preventDefault();
       sendReply(id, ta.value);
     }
+    if (e.key === 'Tab' && e.shiftKey) {
+      e.preventDefault();
+      setReplyMode(id, MODES[(MODES.findIndex((m) => m.id === replyMode(id)) + 1) % MODES.length].id);
+    }
   });
   $('.send', comp).onclick = () => sendReply(id, ta.value);
 }
 
+// The mode the next follow-up runs in: the session's own until the user picks another here.
+// The pick goes out with that follow-up and stays from then on.
+const replyMode = (id) => S.replyModes.get(id) || S.full.get(id)?.mode || 'edits';
+
+function setReplyMode(id, mode) {
+  if (mode === S.full.get(id)?.mode) S.replyModes.delete(id);
+  else S.replyModes.set(id, mode);
+  updateDock(id);
+}
+
+function paintReplyMode(id, btn) {
+  const s = S.full.get(id);
+  const m = MODES.find((x) => x.id === replyMode(id)) || MODES[1];
+  const from = s && S.replyModes.has(id) && MODES.find((x) => x.id === s.mode);
+  btn.className = `mode-btn c-mode m-${m.id}${from ? ' changed' : ''}`;
+  btn.innerHTML = `${icon(m.icon)}${m.id === 'edits' && !from ? '' : `<span>${m.label}</span>`}`;
+  btn.title = from
+    ? `${m.label}: ${m.hint}\nYour next follow-up switches this task from ${from.label} to ${m.label}. Shift+Tab to switch`
+    : `${m.label}: ${m.hint}\nPick another mode for your next follow-up. Shift+Tab to switch`;
+  // Subagents run in their lead's mode; the tour has nothing to run.
+  btn.hidden = !s || s.agent === 'wisp' || !!s.parentId;
+}
+
 function updateDock(id) {
   const s = S.full.get(id);
   const n = S.nodes.get(id);
@@ -2123,6 +2248,7 @@ function updateDock(id) {
           ? 'Follow up to reopen…'
           : `Follow up with ${name}…`;
   $('.c-hint', n.card).innerHTML = s.queue?.length ? `${s.queue.length} queued` : '';
+  paintReplyMode(id, $('.c-mode', n.card));
   renderQueued(s, $('.c-queued', n.card), name);
   const q = $('.c-queue', n.card);
   q.hidden = tour || s.state !== 'running';
@@ -2199,20 +2325,28 @@ async function sendReply(id, text) {
   const n = S.nodes.get(id);
   text = (text || '').trim();
   if (!s || !text) return;
+  const ta = n && $('.reply', n.card);
+  if (isFeedback(text)) {
+    if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
+    S.drafts.delete(id);
+    return feedbackCommand(text, { sessionId: id, restore: () => ta?.isConnected && !ta.value && ((ta.value = text), ta.dispatchEvent(new Event('input'))) });
+  }
   if (n?.tray?.busy) toast('Waiting for uploads…');
   const attachments = n?.tray ? await n.tray.ids() : [];
-  const answering = !!s.ask && !attachments.length;
+  const mode = S.replyModes.get(id);
+  // An answer goes to the run that asked; a new mode needs a new run, so that's a follow-up.
+  const answering = !!s.ask && !attachments.length && !mode;
   // Optimistic: the composer empties and the card goes to Working before the server answers
   // (it may first have to bring back an archived worktree, or reach another machine).
-  const ta = n && $('.reply', n.card);
   if (ta) ((ta.value = ''), ta.dispatchEvent(new Event('input')));
   S.drafts.delete(id);
+  S.replyModes.delete(id);
   const files = n?.tray?.take();
-  const undo = startOptimistic(id, text, files, { answering });
+  const undo = startOptimistic(id, text, files, { answering, mode });
   try {
     const r = answering
       ? await api(`/sessions/${id}/answer`, { method: 'POST', body: { text } })
-      : await api(`/sessions/${id}/reply`, { method: 'POST', body: { text, attachments, queue: queueing() } });
+      : await api(`/sessions/${id}/reply`, { method: 'POST', body: { text, attachments, queue: queueing(), mode } });
     if (undo) scheduleRefetch(id); // the summary that follows says "running" too, so it won't refetch by itself
     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.');
@@ -2220,6 +2354,7 @@ async function sendReply(id, text) {
     undo?.();
     // Give the message back, unless the user has already started typing another one.
     if (ta?.isConnected && !ta.value) ((ta.value = text), ta.dispatchEvent(new Event('input')));
+    if (mode && !S.replyModes.has(id)) setReplyMode(id, mode);
     n?.tray?.restore(files);
     toast(esc(err.message), { tone: 'bad' });
   }
@@ -2228,7 +2363,7 @@ async function sendReply(id, text) {
 // Show a follow-up as started right away: the card moves to Working with the prompt as a live
 // turn. Only when it will start now, not when it queues or interrupts a run already working.
 // Returns an undo for a failed send, or null when nothing changed.
-function startOptimistic(id, text, files, { answering }) {
+function startOptimistic(id, text, files, { answering, mode }) {
   const full = S.full.get(id);
   const sum = S.sessions.get(id);
   if (!full || !sum) return null;
@@ -2236,8 +2371,9 @@ function startOptimistic(id, text, files, { answering }) {
   if (live && !answering) return null;
   const now = Date.now();
   const turn = { id: `pending-${now}`, prompt: text, status: 'running', startedAt: now, activity: [], attachments: (files || []).filter((f) => f.id).map((f) => ({ id: f.id, name: f.name, mime: f.mime })) };
-  const nextFull = { ...full, state: 'running', ask: null, turns: answering ? full.turns : [...full.turns, turn] };
-  const nextSum = { ...sum, state: 'running', live: answering ? 'Picking up your answer' : 'Starting up', updatedAt: now };
+  if (mode) turn.mode = mode;
+  const nextFull = { ...full, state: 'running', ask: null, turns: answering ? full.turns : [...full.turns, turn], ...(mode && { mode }) };
+  const nextSum = { ...sum, state: 'running', live: answering ? 'Picking up your answer' : 'Starting up', updatedAt: now, ...(mode && { mode }) };
   const apply = (f, sm) => {
     S.full.set(id, f);
     S.sessions.set(id, sm);
@@ -2383,11 +2519,12 @@ function rename(id) {
 // 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.
 // places: the "Run on" picks, so the list is what's installed there rather than only on this computer.
-function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort, places }, pick) {
+function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort, places, auto = false }, pick) {
   const open = $('.picker');
   if (open) return open.close();
-  const agents = places ? harnessesAt(places) : S.agents;
+  const agents = places ? harnessesAt(places, { auto }) : auto ? [AUTO, ...S.agents] : S.agents;
   const sub = (a) => {
+    if (a.id === 'auto') return 'Picks harness and model for you';
     if (!a.available) return places?.length > 1 || places?.[0] ? 'Not installed there' : 'Not installed';
     const models = (a.models || []).length > 1 ? `${a.models.length - 1} models` : 'Default model';
     return a.missing?.length ? `Not on ${a.missing.map(placeName).join(', ')}` : models;
@@ -2458,6 +2595,17 @@ function runnerPicker(anchor, { agent, model, effort, savedModel, savedEffort, p
     const models = a?.models || [{ id: '', label: 'Default' }];
     const current = focusAgent === agent ? model : savedModel(focusAgent);
     input.placeholder = `Search ${a?.name || ''} models`;
+    if (a?.id === 'auto') {
+      list.innerHTML = `<div class="pk-group"><div class="pk-ghead">Goal</div>${AUTO_GOALS.map((g) => `<button class="pk-m${g.id === current ? ' on' : ''}" role="option" aria-selected="${g.id === current}" data-id="${g.id}"><span class="pk-text"><b>${g.label}</b><small>${g.hint}</small></span>${icon('check', 'pk-check')}</button>`).join('')}</div><p class="pk-note">wisp picks the harness and model for each task from what worked before, and learns from how it went. ${'<a href="#" class="pk-auto-more">How Auto picks</a>'}</p><div class="pk-empty" hidden>No models match</div>`;
+      $('.pk-search', node).hidden = true;
+      $('.pk-auto-more', list).onclick = (e) => {
+        e.preventDefault();
+        close();
+        openSettings({ pane: 'auto' });
+      };
+      paintEffort();
+      return;
+    }
     $('.pk-search', node).hidden = models.length <= 6;
     // opencode-style ids (provider/model) group by provider.
     const groups = new Map();
@@ -2739,7 +2887,7 @@ async function rerun(id) {
   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) => {
+    runnerPicker(runnerBtn, { agent, model, effort, savedModel, savedEffort, auto: true }, (a, m, e) => {
       [agent, model, effort] = [a, m, e];
       paintRunner();
     });
@@ -3330,7 +3478,7 @@ function openAutomations({ tab = 'recipes', edit = null, host } = {}) {
     const [btn, reset] = wrap.children;
     const paint = () => (paintRunnerBtn(btn, draft.agent, draft.model, draft.effort), (reset.hidden = !draft.agent));
     btn.onclick = () =>
-      runnerPicker(btn, { agent: draft.agent || S.config.defaults.agent, model: draft.model, effort: draft.effort, savedModel, savedEffort }, (a, m, e) => {
+      runnerPicker(btn, { agent: draft.agent || S.config.defaults.agent, model: draft.model, effort: draft.effort, savedModel, savedEffort, auto: true }, (a, m, e) => {
         Object.assign(draft, { agent: a, model: m, effort: e });
         paint();
       });
@@ -3610,6 +3758,8 @@ async function openPhone({ host } = {}) {
   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>
@@ -3637,6 +3787,22 @@ async function openPhone({ host } = {}) {
               ? `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>`;
   };
@@ -3644,7 +3810,8 @@ async function openPhone({ host } = {}) {
     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) put({ telegram: { enabled: r.telegram.enabled, token: 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;
@@ -3654,6 +3821,7 @@ async function openPhone({ host } = {}) {
       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') {
@@ -4012,6 +4180,7 @@ const SETTINGS_PANES = [
   { id: 'general', label: 'General', icon: 'settings', lede: 'Where files open, where you take over, and how tasks start.' },
   { id: 'notifications', label: 'Notifications', icon: 'bolt', lede: 'Hear about questions and finished tasks, here or on your phone.' },
   { id: 'agents', label: 'Agents', icon: 'agent', lede: 'The harnesses wisp found on this machine. Pick one next to the model in the launcher.' },
+  { id: 'auto', label: 'Auto', icon: 'spark', lede: 'wisp picks the harness and model for each task, and learns from how it went.' },
   { id: 'machines', label: 'Machines', icon: 'server', lede: 'Other computers that run agents for you, over SSH.' },
   { id: 'memory', label: 'Memory', icon: 'spark', lede: "Learned from your sessions and added to every agent's prompt. What you ask always wins." },
   { id: 'automations', label: 'Automations', icon: 'play', lede: 'Saved prompts, and the triggers that launch them for you.' },
@@ -4077,6 +4246,16 @@ function openSettings(opts) {
             ${row('Installed something new?', '<span class="recheck-hint"></span>', `<button class="ghost sm" id="recheck">${icon('replay')}Re-check</button>`)}
           </div>
         </section>
+        <section class="sx-pane" data-pane="auto">
+          <div class="sx-group">
+            ${row('Goal', 'What Auto optimises for. Also in the launcher, next to Auto', `<span class="pk-seg ro-goal">${AUTO_GOALS.map((g) => `<button data-goal="${g.id}" title="${esc(g.hint)}">${g.label}</button>`).join('')}</span>`)}
+            ${row('Try new models', 'A new model or harness gets a few tasks that aren’t marked important before Auto relies on it', '<button class="switch" id="roExplore" role="switch"></button>')}
+            ${row('Harnesses it may use', 'Leave all off to let Auto use every one you have', '<span class="ro-allowed"></span>')}
+          </div>
+          <div class="sx-group">
+            ${row('What it learned', '<span class="ro-hint"></span>', '<button class="ghost sm" id="openRouter">Open</button>')}
+          </div>
+        </section>
         <section class="sx-pane" data-pane="machines">
           <div class="sx-group">
             ${row('Machines', '<span class="machines-hint"></span>', '<button class="ghost sm" id="openMachines">Manage</button>')}
@@ -4255,6 +4434,52 @@ function openSettings(opts) {
     renderLauncher();
   };
   paintWt();
+  // Auto: goal, exploring and allowed harnesses here; the full record in its own view.
+  const paintAuto = async () => {
+    const r = await api('/router').catch(() => null);
+    if (!r || !node.isConnected) return;
+    $$('.ro-goal button', node).forEach((b) => b.classList.toggle('on', b.dataset.goal === r.goal));
+    $('#roExplore', node).setAttribute('aria-checked', r.settings.explore);
+    const allowed = r.settings.allowed || [];
+    $('.ro-allowed', node).innerHTML = S.agents
+      .filter((a) => a.available)
+      .map((a) => `<button class="chip-tog${allowed.includes(a.id) ? ' on' : ''}" data-id="${esc(a.id)}" aria-pressed="${allowed.includes(a.id)}" title="${esc(a.name)}"><span class="model-logo">${harnessLogo(a.id)}</span>${esc(a.name)}</button>`)
+      .join('');
+    $('.ro-hint', node).textContent = r.learned
+      ? `${r.learned} task${r.learned === 1 ? '' : 's'} learned from · ${r.arms.filter((a) => a.state !== 'gone').length} harness · model pairs`
+      : `Nothing of yours yet · starting from wisp-bench (${r.priors.version})`;
+  };
+  const patchAuto = async (body) => {
+    try {
+      await api('/router', { method: 'PATCH', body });
+      await loadConfig();
+      renderLauncher();
+    } catch (err) {
+      toast(esc(err.message), { tone: 'bad' });
+    }
+    paintAuto();
+  };
+  $('.ro-goal', node).onclick = (e) => {
+    const b = e.target.closest('[data-goal]');
+    if (b) {
+      $$('.ro-goal button', node).forEach((x) => x.classList.toggle('on', x === b));
+      patchAuto({ goal: b.dataset.goal });
+    }
+  };
+  $('#roExplore', node).onclick = (e) => {
+    const on = e.currentTarget.getAttribute('aria-checked') !== 'true';
+    e.currentTarget.setAttribute('aria-checked', on);
+    patchAuto({ explore: on });
+  };
+  $('.ro-allowed', node).onclick = (e) => {
+    const b = e.target.closest('[data-id]');
+    if (!b) return;
+    b.classList.toggle('on');
+    b.setAttribute('aria-pressed', b.classList.contains('on'));
+    patchAuto({ allowed: $$('.ro-allowed .on', node).map((x) => x.dataset.id) });
+  };
+  node.paintAuto = paintAuto;
+
   // The one-line summaries; painted again on the way back from a view that may have changed them.
   const paintHints = () => {
     const r = S.config.recipes?.length || 0;
@@ -4275,8 +4500,10 @@ function openSettings(opts) {
     $('.machines-hint', node).textContent = machinesSummary();
     api('/remote').then((x) => ($('.phone-hint', node).textContent = phoneSummary(x) === 'Off' ? 'ntfy or Telegram: answer questions from your phone' : phoneSummary(x))).catch(() => {});
     paintLearn();
+    paintAuto();
   };
   paintHints();
+  $('#openRouter', node).onclick = () => openRouter({ host: host('auto') });
   $('#openMemory', node).onclick = () => openMemory({ host: host('memory') });
   $$('[data-auto]', node).forEach((b) => (b.onclick = () => openAutomations({ tab: b.dataset.auto, host: host('automations') })));
   $('#openUsage', node).onclick = () => openUsage({ days: 7, host: host('usage') });
@@ -4284,6 +4511,52 @@ function openSettings(opts) {
   $('#openMachines', node).onclick = () => openMachines({ host: host('machines') });
 }
 
+// --- Auto: what the router learned ---------------------------------------------------------
+
+const ARM_STATE = { ready: ['Ready', 'ok'], new: ['Trying out', 'warn'], untried: ['No data yet', ''], gone: ['Not installed', 'bad'] };
+async function openRouter({ host } = {}) {
+  const node = el(`<div class="modal router-modal">
+      <header><h2>Auto</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <div class="ro-body"><div class="it-loading"><span class="orb tiny"></span>Loading…</div></div>
+    </div>`);
+  const close = present(node, host);
+  const pctOf = (x) => `${Math.round(x * 100)}%`;
+  const outcome = (r) => (r === null ? '<span class="dim">waiting</span>' : r >= 0.9 ? '<span class="ok">worked</span>' : r >= 0.5 ? '<span>finished</span>' : r >= 0.25 ? '<span class="warn">partly</span>' : '<span class="bad">didn’t work</span>');
+  const render = async () => {
+    const r = await api('/router').catch((err) => (toast(esc(err.message), { tone: 'bad' }), null));
+    if (!r || !node.isConnected) return;
+    const arms = r.arms.filter((a) => a.state !== 'gone' || a.n);
+    $('.ro-body', node).innerHTML = `
+      <p class="hint">For each task Auto estimates every harness · model’s chance of doing it well, from wisp-bench (${esc(r.priors.version)}) and then more and more from your own tasks: merged PRs, 👍 / 👎, rollbacks, follow-ups and how the run ended. It picks the best value for your goal (<b>${esc(AUTO_GOALS.find((g) => g.id === r.goal)?.label || '')}</b>), now and then trying an alternative so the estimates stay honest.</p>
+      <h4>Harness · model</h4>
+      <table class="us-table ro-table"><thead><tr><th></th><th>Works</th><th>Your tasks</th><th>~Cost</th><th>~Time</th><th></th></tr></thead><tbody>${arms
+        .map((a) => {
+          const [state, tone] = ARM_STATE[a.state] || ARM_STATE.ready;
+          const types = Object.entries(a.byType).map(([t, x]) => `${t} ${pctOf(x.chance)} (${x.n})`).join(' · ');
+          return `<tr><td><span class="us-runner"><span class="model-logo">${harnessLogo(a.agent)}</span>${esc(a.label)}</span>${types ? `<small class="ro-types">${esc(types)}</small>` : ''}</td>${a.state === 'untried' ? '<td>—</td><td>—</td><td>—</td><td>—</td>' : `<td><b>${pctOf(a.chance)}</b></td><td>${a.n || '—'}</td><td>${a.usd ? `$${a.usd.toFixed(2)}` : '$0'}</td><td>${a.minutes}m</td>`}<td><span class="sx-state ${tone}"><i class="dot ${tone}"></i>${state}</span></td></tr>`;
+        })
+        .join('')}</tbody></table>
+      <h4>Recent picks</h4>
+      ${r.recent.length
+        ? `<ul class="ro-recent">${r.recent
+            .map((x) => {
+              const s = S.sessions.get(x.id);
+              return `<li><span class="model-logo">${harnessLogo(x.key.split(':')[0])}</span><span class="ro-title">${esc(s?.title || 'Task')}</span><small>${esc(x.label)} · ${esc(x.type)}${x.trying ? ' · trying' : x.explored ? ' · exploring' : ''}</small>${outcome(x.r)}</li>`;
+            })
+            .join('')}</ul>`
+        : '<p class="mem-empty">Nothing yet. Launch with Auto and its picks show up here.</p>'}
+      <div class="ro-foot"><button class="ghost sm danger" id="roReset">Forget what Auto learned</button><span class="hint">The wisp-bench starting point stays.</span></div>`;
+    $('#roReset', node).onclick = async () => {
+      if (!confirm('Forget what Auto learned from your tasks?')) return;
+      await api('/router/reset', { method: 'POST', body: {} }).catch((err) => toast(esc(err.message), { tone: 'bad' }));
+      render();
+    };
+  };
+  node.refresh = render;
+  render();
+  return close;
+}
+
 // --- memory: what the background retros learned ---------------------------------------------
 
 const MEM_KINDS = [
@@ -4450,6 +4723,7 @@ function shortcuts() {
     ['1–9', 'Pick an answer when asked'],
     ['↵', 'Launch / send'],
     ['⇧↵', 'New line'],
+    ['/feedback', 'Send feedback to the wisp team (in any prompt box)'],
     ['C', 'Collapse all'],
     ['U', 'Back to top'],
     ['Esc', 'Close / collapse'],
@@ -4458,6 +4732,129 @@ function shortcuts() {
   overlay(node);
 }
 
+// --- feedback ---------------------------------------------------------------------------
+// Three ways in, none of them taking room: thumbs at the end of a turn's trail, "/feedback …" in
+// any prompt box, and "Send feedback" in ⌘K. It all goes to the wisp team (PostHog), with the
+// run's harness, model and status but never the prompt or the result.
+
+const feedbackOn = () => S.config?.feedback !== false;
+const FEEDBACK_CMD = /^\/feedback(?:\s|$)/i;
+const isFeedback = (text) => FEEDBACK_CMD.test(text);
+const THANKS = 'Thanks! Sent to the wisp team.';
+
+// The box is already empty; `restore` puts the text back if the server refuses it.
+function feedbackCommand(text, { sessionId, restore } = {}) {
+  if (!feedbackOn()) return (restore?.(), toast('Feedback is turned off on this install.', { tone: 'bad' }));
+  const note = text.replace(FEEDBACK_CMD, '').trim();
+  if (!note) return openFeedback({ sessionId });
+  postFeedback({ text: note, sessionId, source: 'command' }, { onFail: restore });
+}
+
+// Optimistic: thanks at once. Offline, the server keeps it and sends it later.
+function postFeedback(body, { onFail, quiet = false } = {}) {
+  if (!quiet) toast(THANKS);
+  return api('/feedback', { method: 'POST', body })
+    .then((r) => {
+      if (!r.sent && r.available !== false) toast('Saved: it goes out once wisp is back online.');
+    })
+    .catch((err) => {
+      onFail?.();
+      toast(esc(err.message), { tone: 'bad' });
+    });
+}
+
+function paintRate(node, rating) {
+  $('.rate', node)?.classList.toggle('rated', !!rating);
+  $$('[data-rate]', node).forEach((b) => {
+    b.classList.toggle('on', b.dataset.rate === rating);
+    b.setAttribute('aria-pressed', b.dataset.rate === rating);
+  });
+}
+
+function rateTurn(s, t, node, rating) {
+  const prev = t.feedback;
+  t.feedback = rating ? { rating, at: Date.now() } : undefined;
+  paintRate(node, rating);
+  if (rating === 'up') {
+    const tip = $('.rate', node);
+    tip.classList.remove('thanked');
+    void tip.offsetWidth; // restart the animation
+    tip.classList.add('thanked');
+  }
+  postFeedback({ rating, sessionId: s.id, turnId: t.id, source: 'turn' }, {
+    quiet: true,
+    onFail: () => ((t.feedback = prev), paintRate(node, prev?.rating)),
+  });
+}
+
+// After 👎: one optional line on what went wrong. The rating is already sent.
+function whyForm(s, t, close) {
+  const f = el(`
+    <form class="why">
+      <textarea class="textarea" rows="2" placeholder="What went wrong? Optional, goes to the wisp team" maxlength="4000"></textarea>
+      <div class="why-foot"><span class="muted xs">Sent with the harness and model, not your prompt or code.</span><button type="button" class="link xs" data-a="skip">Skip</button><button class="primary xs">Send</button></div>
+    </form>`);
+  const ta = $('textarea', f);
+  f.onsubmit = (e) => {
+    e.preventDefault();
+    const text = ta.value.trim();
+    if (!text) return close();
+    close();
+    postFeedback({ rating: 'down', text, sessionId: s.id, turnId: t.id, source: 'turn' }, { onFail: () => openFeedback({ sessionId: s.id, text, rating: 'down' }) });
+  };
+  ta.onkeydown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) (e.preventDefault(), f.requestSubmit());
+    if (e.key === 'Escape') (e.stopPropagation(), close());
+  };
+  $('[data-a="skip"]', f).onclick = () => {
+    close();
+    toast(THANKS);
+  };
+  requestAnimationFrame(() => ta.focus());
+  return f;
+}
+
+function openFeedback({ sessionId, text = '', rating = null } = {}) {
+  if (!feedbackOn()) return toast('Feedback is turned off on this install.', { tone: 'bad' });
+  const node = el(`
+    <form class="modal fb-modal">
+      <header><h2>Send feedback</h2><button type="button" class="icon-btn close">${icon('x')}</button></header>
+      <div class="fb-rate"><span>How is wisp working for you?</span>
+        ${['up', 'down'].map((r) => `<button type="button" class="rate-btn" data-rate="${r}" aria-pressed="false" title="${r === 'up' ? 'Good' : 'Not good'}">${icon(`thumb-${r}`)}</button>`).join('')}
+      </div>
+      <textarea class="textarea" name="text" rows="5" maxlength="4000" placeholder="What works, what breaks, what you wish it did…"></textarea>
+      <div class="ship-foot"><span class="muted xs">Goes to the wisp team with your wisp version and OS. Not your code or prompts. Tip: type <code>/feedback …</code> in any prompt box.</span><button class="primary sm" data-a="send">${icon('send')}Send</button></div>
+    </form>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  const ta = $('textarea', node);
+  const send = $('[data-a="send"]', node);
+  ta.value = text;
+  const paint = () => {
+    paintRate(node, rating);
+    send.disabled = !rating && !ta.value.trim();
+  };
+  $$('[data-rate]', node).forEach((b) => {
+    b.onclick = () => {
+      rating = rating === b.dataset.rate ? null : b.dataset.rate;
+      paint();
+    };
+  });
+  ta.oninput = paint;
+  ta.onkeydown = (e) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) (e.preventDefault(), node.requestSubmit());
+  };
+  node.onsubmit = (e) => {
+    e.preventDefault();
+    const note = ta.value.trim();
+    if (!rating && !note) return;
+    close();
+    postFeedback({ rating: rating || undefined, text: note, sessionId, source: 'dialog' }, { onFail: () => openFeedback({ sessionId, text: note, rating }) });
+  };
+  paint();
+  requestAnimationFrame(() => ta.focus());
+}
+
 // --- command palette ------------------------------------------------------------------
 
 const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
@@ -4545,6 +4942,7 @@ function paletteItems() {
     { 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 },
   );
+  if (feedbackOn()) items.push({ group: a, label: 'Send feedback…', icon: 'thumb-up', keywords: 'feedback bug report idea suggestion thumbs contact team', run: () => openFeedback() });
 
   for (const r of S.config.recipes || []) items.push({ group: 'Recipes', label: `Run: ${r.name}`, sub: r.prompt.replace(/\s+/g, ' ').slice(0, 80), icon: 'spark', keywords: `recipe ${r.prompt}`, run: () => runRecipe({ ...r, params: recipeParams(r.prompt) }) });
 
@@ -4642,6 +5040,13 @@ function connect() {
   es.addEventListener('remote', () => $('.phone-modal')?.refresh());
   es.addEventListener('machines', (e) => setMachines(JSON.parse(e.data)));
   es.addEventListener('update', (e) => renderUpdate(JSON.parse(e.data)));
+  // A new harness or model Auto can use: it gets a few tasks before Auto relies on it.
+  es.addEventListener('router', (e) => {
+    const { added = [] } = JSON.parse(e.data || '{}');
+    $('.router-modal')?.refresh();
+    $('.settings-modal')?.paintAuto?.();
+    if (added.length) toast(`New for Auto: <b>${added.map((a) => esc(a.label)).join('</b>, <b>')}</b>${added.some((a) => a.state === 'new') ? ' · it will try it on a few tasks' : ''}`, { action: { label: 'Auto settings', run: () => openSettings({ pane: 'auto' }) }, timeout: 8000 });
+  });
   es.addEventListener('preferences', () => {
     $('.memory-modal')?.refresh();
     $('.settings-modal')?.paintLearn?.();