wisp-agents 0.14.0 → 0.16.0

package/web/js/features/runners.js

@@ -0,0 +1,161 @@
+// How a task runs: the harness (a coding-agent CLI, or Auto), its model and thinking level, and
+// the permission mode. Shared by the launcher, follow-ups, reruns, recipes and subagents.
+
+import { esc } from '../md.js';
+import { $, $$, el, icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { popover } from '../ui/popover.js';
+import { machineById } from './places.js';
+
+export const MODES = [
+  { 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.' },
+];
+
+export 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.
+export 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' },
+];
+export 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).
+export 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.
+export 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.
+export 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))];
+  return ids
+    .map((id) => {
+      const hits = known.filter(([, l]) => l.some((a) => a.id === id && a.available));
+      const base = hits.length ? hits[0][1].find((a) => a.id === id) : S.agents.find((a) => a.id === id) || known.flatMap(([, l]) => l).find((a) => a.id === id);
+      return { ...base, available: hits.length > 0, missing: hits.length ? known.filter((x) => !hits.includes(x)).map(([k]) => k) : [] };
+    })
+    .filter((a) => a.available || S.agents.some((x) => x.id === a.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 },
+  antigravity: { file: 'antigravity-color' },
+  grok: { file: 'grok', mono: true },
+};
+export 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="">`;
+}
+
+// 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.
+export function effortsFor(agent, model) {
+  const a = agentById(agent);
+  return a?.models?.find((m) => m.id === model)?.efforts ?? a?.efforts ?? [];
+}
+export const effortLabel = (e) => ({ xhigh: 'X-High' })[e] || e.charAt(0).toUpperCase() + e.slice(1);
+
+export 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 = route ? routeTip(route) : `${agentName(agent)} · ${label}${effort ? ` · ${effortLabel(effort)} thinking` : ''}`;
+  const logo = harnessLogo(agent);
+  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)}` : ''}`;
+}
+
+// The model is remembered per harness (ids aren't portable between them).
+export 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 : '';
+}
+
+// Thinking level too, and only if the chosen model still accepts it.
+export function savedEffort(id, model) {
+  const d = S.config.defaults;
+  const want = d.efforts?.[id] ?? (id === d.agent ? d.effort : '');
+  return effortsFor(id, model).includes(want) ? want : '';
+}
+
+// One launch runs on at most this many harnesses side by side (the server's MAX_COMPARE).
+export const MAX_RUNNERS = 4;
+
+// A runner button's tooltip, for when the pill is too full to show names.
+export 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".
+export function paintRunnerBtn(btn, agentId, model, effort) {
+  const a = agentById(agentId);
+  const m = (a?.models || []).find((x) => x.id === model);
+  btn.innerHTML = agentId
+    ? `<span class="rb-logo">${harnessLogo(agentId)}</span><span class="rb-h">${esc(a?.name || agentName(agentId))}</span><span class="rb-m">${esc(m && m.id ? m.label : 'Default')}</span>${effort ? `<span class="rb-e">${esc(effortLabel(effort))}</span>` : ''}${icon('chevron', 'chev')}`
+    : `<span class="rb-logo">${icon('spark')}</span><span class="rb-h">Launcher default</span>${icon('chevron', 'chev')}`;
+}
+
+export 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>`);
+  menu.onclick = (ev) => {
+    const b = ev.target.closest('button');
+    if (!b) return;
+    close();
+    pick(b.dataset.mode);
+    if (anchor.id === 'mode') $('#prompt')?.focus();
+  };
+  menu.addEventListener('keydown', (ev) => {
+    const items = $$('button', menu);
+    const i = items.indexOf(document.activeElement);
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      ev.preventDefault();
+      items[(i + (ev.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length].focus();
+    }
+  });
+  const close = popover(menu, { anchor, onClose: () => anchor.classList.remove('open') });
+  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();
+}

package/web/js/features/scroll.js

@@ -0,0 +1,75 @@
+// The page scrolls inside #stage, under a sticky top bar and the launcher, which docks there once
+// it scrolls away. Everything that moves the page on a card's behalf goes through here.
+
+import { $, $$ } from '../core/dom.js';
+import { S } from '../core/state.js';
+
+export const stage = $('#stage');
+
+// How much of the feed the sticky top bar and docked launcher cover: the stage's scroll-padding-top,
+// which scrollIntoView already honours, so hand-placed cards line up with scrolled-to ones.
+export const topInset = () => parseFloat(getComputedStyle(stage).scrollPaddingTop) || 0;
+
+// Whether the user is reading a card, not just catching its edge at the top or bottom of the
+// screen: it crosses the middle of the viewport, or it's focused and a fair share of it shows.
+// Anything that moves the page on a card's behalf asks this first.
+export function watching(id) {
+  const card = S.nodes.get(id)?.card;
+  if (!card?.isConnected) return false;
+  const r = card.getBoundingClientRect();
+  const mid = innerHeight / 2;
+  if (r.top <= mid && r.bottom >= mid) return true;
+  const shown = Math.min(r.bottom, innerHeight) - Math.max(r.top, 0);
+  return S.focus === id && shown >= Math.min(r.height, innerHeight) / 3;
+}
+
+// Run a DOM change without moving `card` on screen. The browser's own scroll anchoring misses
+// cards that are moved between lists, so feed re-renders do this explicitly.
+export function keepInPlace(card, change) {
+  const top = card?.isConnected ? card.getBoundingClientRect().top : null;
+  change();
+  if (top !== null && card.isConnected) scrollByPx(card.getBoundingClientRect().top - top);
+}
+
+// Any write to scrollTop cancels a smooth scroll in flight (j/k, Open, a launch), so only
+// write when there's an actual shift to undo.
+export function scrollByPx(dy) {
+  if (Math.abs(dy) >= 1) stage.scrollTop += dy;
+}
+
+// The card to hold still while the feed changes around it: the first one showing under the top
+// bar and docked launcher, skipping `id` (the card that's changing). None at the very top of the page, where new
+// cards should push the list down, or when `id` itself is the top card on screen: then the next
+// one should slide up into its place.
+export function feedAnchor(id) {
+  if (stage.scrollTop < 1) return null;
+  const moving = id && S.nodes.get(id)?.card;
+  const inset = topInset();
+  for (const card of $$('#feed .item')) {
+    const r = card.getBoundingClientRect();
+    if (r.bottom > inset) return card === moving ? null : card;
+  }
+  return null;
+}
+
+const toTop = $('#toTop');
+
+// Once the launcher scrolls under the top bar it docks there, folded to one line. The slot keeps
+// its full height in the feed so docking never shifts what you're reading.
+const launchSlot = $('#launchSlot');
+const dockLauncher = () => {
+  const box = $('#launcher');
+  const gone = launchSlot.getBoundingClientRect().bottom < $('#topbar').offsetHeight;
+  if (gone === box.classList.contains('docked')) return;
+  launchSlot.style.height = gone ? `${box.offsetHeight}px` : '';
+  box.classList.toggle('docked', gone);
+};
+
+export const backToTop = () => stage.scrollTo({ top: 0, behavior: 'smooth' });
+
+// Sticky top bar gets a hairline once the page scrolls; "back to top" shows after a screen's worth.
+export function onScroll() {
+  $('#topbar').classList.toggle('scrolled', stage.scrollTop > 4);
+  dockLauncher();
+  toTop.hidden = stage.scrollTop < stage.clientHeight * 0.75;
+}

package/web/js/features/settings.js

@@ -0,0 +1,390 @@
+// Settings: a sidebar of sections and one pane at a time, like every other app's settings. Big lists
+// (memory, automations, usage history) keep their own views; a pane only summarises and links.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { $, $$, el, icon } from '../core/dom.js';
+import { money, pct } from '../core/format.js';
+import { S } from '../core/state.js';
+import { overlay } from '../ui/overlay.js';
+import { toast, toastError, tryApi } from '../ui/toast.js';
+import { openRouter } from './auto.js';
+import { openAutomations } from './automations.js';
+import { renderLauncher } from './launcher.js';
+import { loadConfig } from './live.js';
+import { openMachines } from './machines.js';
+import { memorySummary, openMemory, setLearning } from './memory.js';
+import { notifyOn } from './notify.js';
+import { openPhone, phoneSummary } from './phone.js';
+import { machinesSummary } from './places.js';
+import { AUTO_GOALS, harnessLogo } from './runners.js';
+import { INSTALLABLE, installHarness, isInstalling } from './setup.js';
+import { openUsage } from './usage.js';
+
+// A sidebar of sections and one pane at a time, like every other app's settings. Big lists
+// (memory, automations, usage history) keep their own views; a pane only summarises and links.
+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.' },
+  { id: 'usage', label: 'Usage', icon: 'stats', lede: 'Spend and outcomes over the last 7 days.' },
+  { id: 'privacy', label: 'Privacy', icon: 'info', lede: 'What wisp sends about itself. Never prompts, paths or code.' },
+];
+let settingsPane = 'general';
+
+// What a re-check turned up: harnesses found or gone, and model lists that grew or shrank.
+function recheckSummary(before, after) {
+  const count = (a) => (a?.models || []).filter((m) => m.id).length;
+  const notes = [];
+  for (const a of after) {
+    const was = before.get(a.id);
+    if (a.available && !was?.available) notes.push(`<b>${esc(a.name)}</b> found`);
+    else if (!a.available && was?.available) notes.push(`<b>${esc(a.name)}</b> not found`);
+    else if (a.available && count(a) !== count(was)) {
+      const d = count(a) - count(was);
+      notes.push(`<b>${esc(a.name)}</b> ${d > 0 ? '+' : '−'}${Math.abs(d)} model${Math.abs(d) === 1 ? '' : 's'}`);
+    } else if (a.available && a.version !== was?.version) notes.push(`<b>${esc(a.name)}</b> updated`);
+  }
+  return notes.length ? notes.join(' · ') : 'Up to date: nothing new';
+}
+
+export function openSettings(opts) {
+  if (SETTINGS_PANES.some((p) => p.id === opts?.pane)) settingsPane = opts.pane;
+  const d = S.config.defaults;
+  // A row: name and a line of explanation on the left, the control on the right.
+  const row = (name, desc, control, cls = '') => `<div class="sx-row ${cls}"><div class="sx-text"><b>${name}</b>${desc ? `<small>${desc}</small>` : ''}</div><div class="sx-ctl">${control}</div></div>`;
+  const missing = S.agents.filter((a) => !a.available).length;
+  const node = el(`
+    <div class="modal settings-modal sx">
+      <nav class="sx-nav" role="tablist" aria-orientation="vertical">
+        <h2>Settings</h2>
+        ${SETTINGS_PANES.map((p) => `<button role="tab" data-pane="${p.id}">${icon(p.icon)}<span>${p.label}</span>${p.id === 'agents' && missing ? `<i class="dot bad" title="${missing} not found"></i>` : ''}</button>`).join('')}
+      </nav>
+      <div class="sx-main">
+        <header><div><h3 class="sx-title"></h3><p class="sx-lede"></p></div><button class="icon-btn close">${icon('x')}</button></header>
+        <section class="sx-pane" data-pane="general">
+          <div class="sx-group">
+            ${row('Open files in', 'File links in cards and diffs', `<select name="editor">${[['vscode', 'VS Code'], ['cursor', 'Cursor'], ['windsurf', 'Windsurf'], ['zed', 'Zed'], ['idea', 'JetBrains'], ['none', 'Copy path']]
+              .map(([v, l]) => `<option value="${v}" ${d.editor === v || (!d.editor && v === 'vscode') ? 'selected' : ''}>${l}</option>`)
+              .join('')}</select>`)}
+            ${row('Take over in', 'The terminal a session opens in when you take it over', `<select name="terminal">${(S.config.terminals || []).map((t) => `<option value="${t.id}" ${(d.terminal || 'auto') === t.id ? 'selected' : ''}>${t.label}</option>`).join('')}</select>`)}
+            <div class="sx-row custom-term" ${d.terminal === 'custom' ? '' : 'hidden'}><div class="sx-text"><b>Terminal command</b><small><code>{cwd}</code> and <code>{cmd}</code> are filled in</small></div>
+              <div class="sx-ctl"><input class="input mono" name="terminalCommand" value="${esc(d.terminalCommand || '')}" placeholder="alacritty --working-directory {cwd} -e {cmd}" spellcheck="false"></div></div>
+          </div>
+          <div class="sx-group">
+            ${row('Worktree per task', 'Each task gets its own branch from origin/main, in git repos', '<button class="switch" id="wtDefault" role="switch"></button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="notifications">
+          <div class="sx-group">
+            ${row('Desktop notifications', '<span class="notif-hint"></span>', '<button class="switch" id="notif" role="switch"></button>')}
+          </div>
+          <div class="sx-group">
+            ${row('Phone', '<span class="phone-hint">ntfy or Telegram: answer questions from your phone</span>', '<button class="ghost sm" id="openPhone">Set up</button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="agents">
+          <div class="sx-group sx-agents"></div>
+          <div class="sx-group">
+            ${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>')}
+          </div>
+          <p class="hint">Also in the top bar, and in Projects: add folders on a machine, then launch there like anywhere else.</p>
+        </section>
+        <section class="sx-pane" data-pane="memory">
+          <div class="sx-group">
+            ${row('Learn from sessions', 'A short retro after each session keeps preferences and lessons', '<button class="switch" id="learn" role="switch"></button>')}
+            ${row('Remembered', '<span class="learn-hint"></span>', '<button class="ghost sm" id="openMemory">Open memory</button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="automations">
+          <div class="sx-group">
+            ${row('Recipes', '<span class="recipe-hint"></span>', '<button class="ghost sm" data-auto="recipes">Manage</button>')}
+            ${row('Triggers', '<span class="trigger-hint"></span>', '<button class="ghost sm" data-auto="triggers">Manage</button>')}
+          </div>
+        </section>
+        <section class="sx-pane" data-pane="usage">
+          <div class="us-tiles sx-usage"><div class="it-loading"><span class="orb tiny"></span>Adding it up…</div></div>
+          <div class="sx-group">${row('Charts and breakdowns', 'Per day, per project and per harness · model', '<button class="ghost sm" id="openUsage">Open usage</button>')}</div>
+        </section>
+        <section class="sx-pane" data-pane="privacy">
+          <div class="sx-group">
+            ${row('Anonymous usage stats', '<span class="tele-hint"></span>', '<button class="switch" id="tele" role="switch"></button>')}
+          </div>
+          <p class="hint">Agent, model, status, timings and scrubbed errors only.</p>
+        </section>
+      </div>
+    </div>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  const paintAgents = () => {
+    $('.sx-agents', node).innerHTML = S.agents.length
+      ? S.agents.map((a) => {
+        const n = (a.models || []).filter((m) => m.id).length;
+        // opencode: wisp can install it (free models, no account), so its row offers that.
+        const canInstall = !a.available && INSTALLABLE.has(a.id);
+        const busy = isInstalling(a.id);
+        const desc = a.available
+          ? [a.version, n && `${n} model${n === 1 ? '' : 's'}`].filter(Boolean).join(' · ')
+          : busy ? 'Installing into ~/.wisp/tools…' : canInstall ? 'Install it here: free models, no account needed' : `Install the ${a.name} CLI and sign in, then re-check`;
+        const install = canInstall ? `<button class="ghost sm" data-install="${esc(a.id)}" ${busy ? 'disabled' : ''}>${busy ? 'Installing…' : 'Install'}</button>` : '';
+        return row(`<span class="model-logo">${harnessLogo(a.id)}</span>${esc(a.name)}`, esc(desc), `${install}<span class="sx-state ${a.available ? 'ok' : 'bad'}" ${a.error ? `title="${esc(a.error)}"` : ''}><i class="dot ${a.available ? 'ok' : 'bad'}"></i>${a.available ? 'Ready' : 'Not found'}</span>`);
+      }).join('')
+      : '<div class="sx-row"><div class="it-loading"><span class="orb tiny"></span>Looking for harnesses…</div></div>';
+    const missing = S.agents.filter((a) => !a.available).length;
+    const dot = $('.sx-nav [data-pane="agents"] .dot', node);
+    if (dot && !missing) dot.remove();
+    if (!dot && missing) $('.sx-nav [data-pane="agents"]', node).insertAdjacentHTML('beforeend', `<i class="dot bad" title="${missing} not found"></i>`);
+    const online = S.machines.filter((m) => m.state === 'online').length;
+    $('.recheck-hint', node).textContent = `After installing a CLI, signing in or adding a provider, look for harnesses and models again${online ? `, here and on ${online} machine${online === 1 ? '' : 's'}` : ''}`;
+  };
+  paintAgents();
+  bus.on('agents', paintAgents, { node });
+  bus.on('install', paintAgents, { node });
+  $('.sx-agents', node).onclick = (e) => {
+    const b = e.target.closest('[data-install]');
+    if (b) installHarness(b.dataset.install);
+  };
+  $('#recheck', node).onclick = async (e) => {
+    const btn = e.currentTarget;
+    btn.disabled = true;
+    btn.classList.add('busy');
+    const before = new Map(S.agents.map((a) => [a.id, a]));
+    try {
+      S.agents = await api('/agents/recheck', { method: 'POST', body: {} });
+      if (!node.isConnected) return;
+      paintAgents();
+      $('#launcher')?.placesChanged?.();
+      toast(recheckSummary(before, S.agents));
+    } catch (err) {
+      toastError(err);
+    } finally {
+      btn.disabled = false;
+      btn.classList.remove('busy');
+    }
+  };
+  const pick = (id, focus = false) => {
+    settingsPane = id;
+    const p = SETTINGS_PANES.find((x) => x.id === id);
+    $$('.sx-nav [data-pane]', node).forEach((b) => {
+      const on = b.dataset.pane === id;
+      b.setAttribute('aria-selected', on);
+      b.tabIndex = on ? 0 : -1;
+      if (on && focus) b.focus();
+    });
+    $$('.sx-pane', node).forEach((s) => (s.hidden = s.dataset.pane !== id));
+    $('.sx-title', node).textContent = p.label;
+    $('.sx-lede', node).textContent = p.lede;
+    $('.sx-main', node).scrollTop = 0;
+  };
+  // Memory, Automations, Usage and Phone open in the main area, next to the sidebar, with a
+  // way back to the section they came from. Leaving one goes back; only the X closes Settings.
+  const main = $('.sx-main', node);
+  const leave = () => {
+    const v = $('.sx-main > .embedded', node);
+    if (!v) return;
+    v.remove();
+    $('.sx-main > header', node).hidden = false;
+    paintHints();
+  };
+  const show = (id, focus) => (leave(), pick(id, focus));
+  const host = (pane) => (view) => {
+    show(pane);
+    view.classList.add('embedded');
+    const back = el(`<button class="ghost sm sx-back">${icon('back')}Back</button>`);
+    back.onclick = () => show(pane);
+    $('header', view).prepend(back);
+    $('.close', view).onclick = close;
+    $('.sx-main > header', node).hidden = true;
+    $$('.sx-pane', node).forEach((s) => (s.hidden = true));
+    main.append(view);
+    main.scrollTop = 0;
+    return close;
+  };
+  $('.sx-nav', node).onclick = (e) => {
+    const b = e.target.closest('[data-pane]');
+    if (b) show(b.dataset.pane);
+  };
+  $('.sx-nav', node).onkeydown = (e) => {
+    const step = { ArrowDown: 1, ArrowUp: -1 }[e.key];
+    if (!step) return;
+    e.preventDefault();
+    const i = SETTINGS_PANES.findIndex((p) => p.id === settingsPane);
+    show(SETTINGS_PANES[(i + step + SETTINGS_PANES.length) % SETTINGS_PANES.length].id, true);
+  };
+  show(settingsPane);
+  node.addEventListener('change', async (e) => {
+    const { name, value } = e.target;
+    if (!name || e.target.closest('.embedded')) return; // a nested view's own form
+    if (name === 'terminal') $('.custom-term', node).hidden = value !== 'custom';
+    await tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { [name]: value } } });
+      await loadConfig();
+    });
+  });
+  // 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 tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { notify: want ? 'on' : 'off' } } });
+      await loadConfig();
+    });
+    paint();
+  };
+  paint();
+  // Agent, model, status, timings and scrubbed errors only; never prompts, paths or code.
+  const tele = $('#tele', node);
+  const paintTele = () => {
+    const t = S.config.telemetry || {};
+    tele.setAttribute('aria-checked', !!t.enabled);
+    tele.disabled = !t.available;
+    $('.tele-hint', node).textContent = !t.available ? 'Off (DO_NOT_TRACK, WISP_TELEMETRY=0 or CI)' : 'No prompts, paths or code';
+  };
+  tele.onclick = async () => {
+    await tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { telemetry: S.config.telemetry?.enabled ? 'off' : 'on' } } });
+      await loadConfig();
+    });
+    paintTele();
+  };
+  paintTele();
+  // Memory: one line here (on/off and a summary); the lists and retros live in their own view.
+  const learn = $('#learn', node);
+  const paintLearn = async () => {
+    learn.setAttribute('aria-checked', S.config.defaults.learn !== 'off');
+    $('.learn-hint', node).textContent = memorySummary(await api('/preferences').catch(() => null));
+  };
+  learn.onclick = async () => {
+    await tryApi(() => setLearning(S.config.defaults.learn === 'off'));
+    paintLearn();
+  };
+  bus.on('preferences', paintLearn, { node });
+  // One line each; their lists and charts live in their own views.
+  const wt = $('#wtDefault', node);
+  const paintWt = () => wt.setAttribute('aria-checked', S.config.defaults.worktree !== 'off');
+  wt.onclick = async () => {
+    const saved = await tryApi(async () => {
+      await api('/config', { method: 'PATCH', body: { defaults: { worktree: S.config.defaults.worktree === 'off' ? 'on' : 'off' } } });
+      await loadConfig();
+      return true;
+    });
+    if (!saved) return;
+    paintWt();
+    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) {
+      toastError(err);
+    }
+    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) });
+  };
+  bus.on('router', paintAuto, { node });
+
+  // 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;
+    const all = S.config.triggers || [];
+    const t = all.filter((x) => x.enabled).length;
+    $('.recipe-hint', node).textContent = r ? `${r} saved prompt${r === 1 ? '' : 's'}` : 'None yet · save a prompt you run often';
+    $('.trigger-hint', node).textContent = all.length ? `${t} of ${all.length} on` : 'None yet · run a recipe on a schedule, CI failure or new issue';
+    api('/usage?days=7')
+      .then((u) => {
+        const x = u.total;
+        $('.sx-usage', node).innerHTML = `
+          <div><span>Spend</span><b>${x.priced ? money(x.cost) : '—'}</b></div>
+          <div><span>Turns</span><b>${x.turns}</b></div>
+          <div><span>Worked</span><b>${pct(x.successRate)}</b></div>
+          <div><span>Questions</span><b>${x.questions}</b></div>`;
+      })
+      .catch(() => ($('.sx-usage', node).innerHTML = ''));
+    $('.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();
+  bus.on('machines', () => ($('.machines-hint', node).textContent = machinesSummary()), { node });
+  $('#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') });
+  $('#openPhone', node).onclick = () => openPhone({ host: host('notifications') });
+  $('#openMachines', node).onclick = () => openMachines({ host: host('machines') });
+}
+
+// Say once that anonymous stats are on, with a way out.
+export function telemetryNotice() {
+  if (!S.config.telemetry?.enabled || S.config.defaults.telemetryNotice === 'seen') return;
+  S.config.defaults.telemetryNotice = 'seen';
+  api('/config', { method: 'PATCH', body: { defaults: { telemetryNotice: 'seen' } } }).catch(() => {});
+  toast('wisp sends anonymous usage stats and error reports. No prompts, paths or code.', { timeout: 10_000, action: { label: 'Settings', run: () => openSettings({ pane: 'privacy' }) } });
+}