wisp-agents 0.14.0 → 0.16.0

package/web/js/features/places.js

@@ -0,0 +1,38 @@
+// Projects and machines: the places a task can run. A project is a folder, on this computer or on a
+// machine (another computer running its own wisp, reached over SSH).
+
+import { esc } from '../md.js';
+import { icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+
+export const projectById = (id) => S.config.projects.find((p) => p.id === id);
+
+export const placeOf = (p) => p?.machine || '';
+export const placeName = (k) => (k ? machineById(k)?.name || 'machine' : 'This computer');
+export const recentFirst = (a, b) => (b.lastUsedAt || b.addedAt) - (a.lastUsedAt || a.addedAt);
+export const projectsAt = (k) => S.config.projects.filter((p) => placeOf(p) === k).sort(recentFirst);
+
+// A machine runs its own wisp; this one signs in over SSH, tunnels to it and shows its sessions
+// as <id>@<machine>. Projects can live on a machine; launching in one runs the agent there.
+export const machineById = (id) => S.machines.find((m) => m.id === id);
+const machineOnline = (id) => machineById(id)?.state === 'online';
+export const MACHINE_STATE = { online: 'Online', connecting: 'Connecting…', reconnecting: 'Reconnecting…', error: 'Couldn’t connect', off: 'Not connected' };
+export const projectTitle = (p) => {
+  if (!p) return '';
+  const m = p.machine && machineById(p.machine);
+  return m ? `${p.path} on ${m.name}${m.state === 'online' ? '' : ' (not connected)'}` : p.path;
+};
+
+export function machinePill(mt) {
+  const on = machineOnline(mt.id);
+  return `<span class="q-machine ${on ? '' : 'off'}" title="Runs on ${esc(mt.name)} (${esc(mt.target)})${on ? '' : ' · not connected'}">${icon('server')}<span>${esc(mt.name)}</span></span>`;
+}
+
+export function machinesSummary() {
+  const n = S.machines.length;
+  if (!n) return 'None yet · run agents on another computer over SSH';
+  const on = S.machines.filter((m) => m.state === 'online').length;
+  return `${n} machine${n === 1 ? '' : 's'} · ${on ? `${on} online` : 'none online'}`;
+}
+
+export const projectName = (p) => S.config.projects.find((x) => x.path === p)?.name || String(p || '').split(/[\\/]/).pop();

package/web/js/features/projects.js

@@ -0,0 +1,284 @@
+// Projects: the filter chips in the top bar and the dialog that adds, renames and removes them.
+
+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 { launch, S, save, saveLaunch } from '../core/state.js';
+import { present } from '../ui/overlay.js';
+import { popover } from '../ui/popover.js';
+import { toast, toastError, tryApi } from '../ui/toast.js';
+import { feedToTop, renderFeed } from './feed.js';
+import { renderLaunchChips } from './launcher.js';
+import { loadConfig } from './live.js';
+import { connectMachine, openMachines } from './machines.js';
+import { MACHINE_STATE, machineById, placeOf, projectById, projectTitle } from './places.js';
+
+export function renderProjects() {
+  const all = [...S.sessions.values()];
+  const stats = (pid) => {
+    const l = pid === 'all' ? all : all.filter((s) => s.projectId === pid);
+    return { run: l.filter((s) => s.state === 'running').length, need: l.filter((s) => s.state === 'waiting' || (s.state === 'review' && s.unread)).length };
+  };
+  const chip = (id, name, color) => {
+    const st = stats(id);
+    return `<button class="p-chip ${S.filter === id ? 'on' : ''} c-${color}" data-id="${id}" title="${esc(id === 'all' ? 'All projects' : projectTitle(projectById(id)))}">
+      ${id === 'all' ? '' : '<i class="p-dot"></i>'}<span>${esc(name)}</span>${projectById(id)?.machine ? icon('server', 'p-where') : ''}${st.run ? `<span class="p-run" title="${st.run} working"></span>` : ''}${st.need ? `<span class="p-need">${st.need}</span>` : ''}
+    </button>`;
+  };
+  $('#projects').innerHTML = `${chip('all', 'All', 'slate')}${S.config.projects
+    .slice()
+    .sort((a, b) => (b.lastUsedAt || b.addedAt) - (a.lastUsedAt || a.addedAt))
+    .map((p) => chip(p.id, p.name, p.color))
+    .join('')}<button class="p-chip add" id="manageProjects" title="Manage projects">${icon('plus')}</button>`;
+  $$('.p-chip[data-id]').forEach((b) =>
+    b.addEventListener('click', () => {
+      S.filter = S.filter === b.dataset.id ? 'all' : b.dataset.id;
+      save('wisp.filter', S.filter);
+      renderFeed();
+      feedToTop();
+      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>`);
+  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 toastError(err);
+      }
+      if (S.filter === id) {
+        S.filter = 'all';
+        save('wisp.filter', S.filter);
+      }
+      await loadConfig();
+      renderFeed();
+    }
+  };
+  const close = popover(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`;
+}
+
+const COLORS = ['violet', 'teal', 'amber', 'rose', 'sky', 'lime', 'orange', 'indigo'];
+
+// where: a machine id to add folders on that computer (server/machines.js), else this one.
+export async function openProjects({ focusAdd = false, machine = null, host } = {}) {
+  const node = el(`
+    <div class="modal projects-modal">
+      <header><h2>Projects</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <div class="mem-tabs where"></div>
+      <div class="add-row">
+        <div class="field lg mono path-input">
+          ${window.wispDesktop ? `<button class="browse" title="Browse…">${icon('folder')}</button>` : icon('folder')}
+          <input id="ppath" placeholder="~/code/my-app" spellcheck="false" autocomplete="off">
+          <div class="suggest" hidden></div>
+        </div>
+        ${window.wispDesktop ? `<button class="ghost" id="pbrowse">${icon('folder')}Browse…</button>` : ''}
+        <button class="primary" id="padd">Add</button>
+      </div>
+      <p class="hint"></p>
+      <div class="plist" id="plist"></div>
+      <div class="discover" id="discover"><h4>Found on this machine</h4><p class="muted">Looking for git repos…</p></div>
+    </div>`);
+  present(node, host);
+  const input = $('#ppath', node);
+  const sug = $('.suggest', node);
+  let where = machine && machineById(machine) ? machine : null;
+  const here = () => machineById(where);
+  const home = () => (where ? here()?.remote?.home : S.config.home) || '';
+  const tilde = (p) => (home() && p.startsWith(home()) ? `~${p.slice(home().length)}` : p);
+
+  const paintWhere = () => {
+    const tabs = $('.where', node);
+    tabs.innerHTML = `<button data-w="" class="${where ? '' : 'on'}">${icon('folder')}This computer</button>${S.machines
+      .map((m) => `<button data-w="${m.id}" class="${where === m.id ? 'on' : ''}" title="${esc(m.target)} · ${esc(MACHINE_STATE[m.state] || m.state)}">${icon('server')}${esc(m.name)}<i class="dot ${m.state === 'online' ? 'ok' : m.state === 'error' ? 'bad' : ''}"></i></button>`)
+      .join('')}<i></i>${host ? '' : `<button data-w="+" title="Run agents on another computer over SSH">${icon('plus')}Machine</button>`}`;
+    const m = here();
+    input.placeholder = m ? `~/code/my-app on ${m.name}` : '~/code/my-app';
+    $$('#pbrowse, .browse', node).forEach((b) => (b.hidden = !!m));
+    $('.hint', node).innerHTML = m
+      ? `Folders on <b>${esc(m.name)}</b>. Agents run there, in its own worktrees; you follow along here.`
+      : 'Tip: run <code>wisp add</code> inside any folder, or launch from a terminal with <code>wisp "task"</code> — the folder is added automatically.';
+  };
+  $('.where', node).addEventListener('click', (e) => {
+    const b = e.target.closest('[data-w]');
+    if (!b) return;
+    if (b.dataset.w === '+') {
+      openMachines({ focusAdd: true });
+      return;
+    }
+    where = b.dataset.w || null;
+    sug.hidden = true;
+    paintWhere();
+    list();
+    discover();
+    input.focus();
+  });
+
+  const add = async (p) => {
+    try {
+      const proj = await api('/projects', { method: 'POST', body: { path: p, ...(where && { machine: where }) } });
+      await loadConfig();
+      launch.picks[placeOf(proj)] = proj.id;
+      if (!launch.where.includes(placeOf(proj))) launch.where = [placeOf(proj)];
+      if (placeOf(proj) === launch.where[0]) launch.project = proj.id;
+      saveLaunch();
+      renderLaunchChips();
+      toast(`Added <b>${esc(proj.name)}</b>${where ? ` on ${esc(here()?.name || '')}` : ''}`);
+      input.value = '';
+      sug.hidden = true;
+      list();
+      discover();
+    } catch (err) {
+      toastError(err);
+    }
+  };
+  $('#padd', node).onclick = () => {
+    if (input.value.trim()) add(input.value.trim());
+  };
+  const browse = async () => {
+    const dir = await window.wispDesktop.pickFolder();
+    if (dir) add(dir);
+  };
+  $$('#pbrowse, .browse', node).forEach((b) => (b.onclick = browse));
+
+  let sel = -1;
+  let t;
+  input.addEventListener('input', () => {
+    clearTimeout(t);
+    t = setTimeout(async () => {
+      const q = input.value;
+      if (!q) return (sug.hidden = true);
+      const dirs = await api(`${where ? `/machines/${where}/fs` : '/fs'}?q=${encodeURIComponent(q)}`).catch(() => []);
+      sel = -1;
+      sug.hidden = !dirs.length;
+      sug.innerHTML = dirs.map((d) => `<button data-p="${esc(d)}">${esc(tilde(d))}</button>`).join('');
+    }, 120);
+  });
+  input.addEventListener('keydown', (e) => {
+    const opts = $$('button', sug);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      sel = (sel + (e.key === 'ArrowDown' ? 1 : -1) + opts.length) % opts.length;
+      opts.forEach((o, i) => o.classList.toggle('on', i === sel));
+    } else if (e.key === 'Tab' && opts.length) {
+      e.preventDefault();
+      input.value = tilde(opts[Math.max(0, sel)].dataset.p + '/');
+      input.dispatchEvent(new Event('input'));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      add(sel >= 0 ? opts[sel].dataset.p : input.value.trim());
+    }
+  });
+  sug.addEventListener('click', (e) => {
+    const b = e.target.closest('button');
+    if (b) add(b.dataset.p);
+  });
+
+  const list = () => {
+    const box = $('#plist', node);
+    const projects = S.config.projects.filter((p) => (p.machine || null) === where);
+    box.innerHTML = projects.length
+      ? projects
+          .map((p) => {
+            const n = [...S.sessions.values()].filter((s) => s.projectId === p.id).length;
+            return `<div class="prow c-${p.color}" data-id="${p.id}">
+              <button class="swatch" title="Change colour"><i class="p-dot"></i></button>
+              <div class="prow-main"><input class="pname" value="${esc(p.name)}"><span class="ppath">${esc(tilde(p.path))}</span></div>
+              <span class="pcount">${n} session${n === 1 ? '' : 's'}</span>
+              <button class="icon-btn premove" title="Remove from wisp (files untouched)">${icon('trash')}</button>
+            </div>`;
+          })
+          .join('')
+      : `<p class="muted">No projects ${where ? `on ${esc(here()?.name || '')} ` : ''}yet. Add a folder above, or pick one below.</p>`;
+    $$('.prow', box).forEach((row) => {
+      const id = row.dataset.id;
+      const p = projectById(id);
+      $('.pname', row).onchange = (e) => {
+        tryApi(async () => {
+          await api(`/projects/${id}`, { method: 'PATCH', body: { name: e.target.value } });
+          await loadConfig();
+        });
+      };
+      $('.swatch', row).onclick = () => {
+        const color = COLORS[(COLORS.indexOf(p.color) + 1) % COLORS.length];
+        tryApi(async () => {
+          await api(`/projects/${id}`, { method: 'PATCH', body: { color } });
+          await loadConfig();
+          list();
+        });
+      };
+      $('.premove', row).onclick = async () => {
+        if (!confirm(`Remove “${p.name}” from wisp? Sessions and files are kept.`)) return;
+        await tryApi(async () => {
+          await api(`/projects/${id}`, { method: 'DELETE' });
+          await loadConfig();
+          list();
+        });
+      };
+    });
+  };
+
+  const discover = async () => {
+    const box = $('#discover', node);
+    const m = here();
+    const at = where;
+    box.onclick = (e) => {
+      const b = e.target.closest('.found-item');
+      if (b) add(b.dataset.p);
+      if (e.target.closest('[data-a="connect"]')) connectMachine(at);
+    };
+    if (m && m.state !== 'online') {
+      box.innerHTML = `<p class="muted">${esc(m.name)} is ${m.state === 'connecting' || m.state === 'reconnecting' ? 'connecting…' : `offline. <button class="link" data-a="connect">Connect</button>`}</p>`;
+      return;
+    }
+    box.innerHTML = `<h4>Found on ${m ? esc(m.name) : 'this machine'}</h4><p class="muted">Looking for git repos…</p>`;
+    const found = await api(m ? `/machines/${m.id}/discover` : '/projects/discover').catch(() => []);
+    if (where !== at) return; // switched tabs meanwhile
+    box.innerHTML = found.length
+      ? `<h4>Found on ${m ? esc(m.name) : 'this machine'} <span class="muted">· git repos</span></h4><div class="found">${found
+          .map((f) => `<button class="found-item" data-p="${esc(f.path)}">${icon('plus')}<b>${esc(f.name)}</b><span>${esc(tilde(f.path).replace(/\/[^/]+$/, ''))}</span></button>`)
+          .join('')}</div>`
+      : '';
+  };
+  let wasOnline = here()?.state === 'online';
+  bus.on(
+    'machines',
+    () => {
+      paintWhere();
+      const online = here()?.state === 'online';
+      if (online !== wasOnline) discover();
+      wasOnline = online;
+    },
+    { node },
+  );
+
+  paintWhere();
+  list();
+  discover();
+  if (focusAdd) setTimeout(() => input.focus(), 60);
+}

package/web/js/features/runner-picker.js

@@ -0,0 +1,233 @@
+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 { placeName } from './places.js';
+import { AUTO, AUTO_GOALS, effortLabel, effortsFor, harnessesAt, harnessLogo } from './runners.js';
+import { openSettings } from './settings.js';
+
+// 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.
+// places: the "Run on" picks, so the list is what's installed there rather than only on this computer.
+export 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, { 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;
+  };
+  let focusAgent = agents.find((a) => a.id === agent && a.available) ? agent : agents.find((a) => a.available)?.id;
+
+  const r = anchor.getBoundingClientRect();
+  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>
+        ${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${a.missing?.length ? ' class="warn"' : ''}>${esc(sub(a))}</small></span>
+              ${a.id === agent ? '<span class="pk-dot" title="In use"></span>' : ''}
+            </button>`,
+          )
+          .join('')}
+      </div>
+      <div class="pk-main">
+        <label class="field 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 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 markInUse = (id) => {
+    $$('.pk-dot', node).forEach((d) => d.remove());
+    sideRows.find((b) => b.dataset.id === id)?.insertAdjacentHTML('beforeend', '<span class="pk-dot" title="In use"></span>');
+  };
+  const chooseEffort = (e) => {
+    const m = modelOf(focusAgent);
+    if (focusAgent === agent && e === effort) return;
+    if (focusAgent !== agent) markInUse(focusAgent);
+    agent = focusAgent;
+    model = m;
+    effort = e;
+    pick(agent, model, effort);
+    paintEffort();
+    $(`button[data-e="${CSS.escape(e)}"]`, seg)?.focus();
+  };
+
+  const paintModels = () => {
+    const a = 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`;
+    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();
+    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();
+  };
+
+  // Picking a harness applies it straight away with the model and level it shows as selected.
+  const useAgent = (id) => {
+    preview(id);
+    if (id === agent) return;
+    markInUse(id);
+    agent = id;
+    model = savedModel(id);
+    effort = savedEffort(id, model);
+    pick(agent, model, effort);
+  };
+
+  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 step = (items, d) => {
+    if (!items.length) return;
+    const i = items.indexOf(document.activeElement);
+    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);
+    // 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();
+      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();
+      if (e.key === 'Enter') useAgent(focusAgent);
+      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
+    }
+  };
+  sideRows.forEach((b) => (b.onclick = () => useAgent(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();
+  const close = popover(node, {
+    anchor,
+    onClose: () => {
+      anchor.classList.remove('open');
+      document.removeEventListener('keydown', keys, true);
+    },
+  });
+  document.addEventListener('keydown', keys, true);
+  anchor.classList.add('open');
+  focusModels(); // scrolls the current model into view…
+  if (!$('.pk-search', node).hidden) input.focus({ preventScroll: true }); // …then search is ready to type
+}