wisp-agents 0.15.0 → 0.17.0

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
+}

package/web/js/features/runners.js

@@ -0,0 +1,163 @@
+// 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. Anything else that needs approval comes to you to allow.' },
+  { id: 'auto', label: 'Full auto', icon: 'spark', hint: 'No permission prompts at all. Trusted repos only.' },
+];
+// The default: just an icon on mode buttons; the others are spelled out so you can't miss them.
+export const DEFAULT_MODE = MODES[2];
+
+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;
+}