wisp-agents 0.14.0 → 0.16.0

package/web/js/core/api.js

@@ -0,0 +1,25 @@
+// The wisp HTTP API (server/routes/). A failed request throws with the server's message.
+
+export async function api(path, { method = 'GET', body } = {}) {
+  const r = await fetch(`/api${path}`, {
+    method,
+    // The server only accepts JSON on non-GET requests (CSRF guard), even body-less DELETEs.
+    headers: method !== 'GET' ? { 'content-type': 'application/json' } : {},
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  const j = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error(j.error || r.statusText);
+  return j;
+}
+
+// An attachment: the raw bytes, with its name and type in the query. Resolves to { id }.
+export async function upload(file, { name, type }) {
+  const r = await fetch(`/api/uploads?name=${encodeURIComponent(name)}&type=${encodeURIComponent(type)}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/octet-stream' },
+    body: file,
+  });
+  const j = await r.json();
+  if (!r.ok) throw new Error(j.error);
+  return j;
+}

package/web/js/core/bus.js

@@ -0,0 +1,28 @@
+// A small event bus. Live server events (features/live.js) are published here, and open views
+// subscribe instead of being looked up in the DOM and poked. A subscription tied to a node ends
+// once that node has left the page, so a closed dialog stops listening.
+//
+// Events: agents, config, install, machines, preferences, remote, router.
+
+const subs = new Map(); // type -> Set<{ fn, node }>
+
+export function on(type, fn, { node } = {}) {
+  const sub = { fn, node };
+  if (!subs.has(type)) subs.set(type, new Set());
+  subs.get(type).add(sub);
+  return () => subs.get(type).delete(sub);
+}
+
+export function emit(type, data) {
+  const set = subs.get(type);
+  if (!set) return;
+  for (const sub of [...set]) {
+    if (sub.node && !sub.node.isConnected) set.delete(sub);
+    else sub.fn(data);
+  }
+}
+
+// Forget subscriptions whose node is gone (called when a dialog closes).
+export function sweep() {
+  for (const set of subs.values()) for (const sub of set) if (sub.node && !sub.node.isConnected) set.delete(sub);
+}

package/web/js/core/dom.js

@@ -0,0 +1,7 @@
+// DOM helpers. el (an element from an HTML string) and icon (a sprite <svg>) live with the block
+// renderers, which use them too.
+
+export { el, icon } from '../blocks.js';
+
+export const $ = (s, root = document) => root.querySelector(s);
+export const $$ = (s, root = document) => [...root.querySelectorAll(s)];

package/web/js/core/format.js

@@ -0,0 +1,27 @@
+// Small display formatters shared across the page.
+
+export const STATUS_LABEL = { done: 'Done', partial: 'Partial', blocked: 'Blocked', info: 'Report' };
+
+export function ago(t) {
+  const s = (Date.now() - t) / 1000;
+  if (s < 45) return 'now';
+  if (s < 3600) return `${Math.round(s / 60)}m`;
+  if (s < 86400) return `${Math.round(s / 3600)}h`;
+  return `${Math.round(s / 86400)}d`;
+}
+
+export function fmtSize(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export const whenLabel = (t) => {
+  if (!t) return '';
+  const d = new Date(t);
+  const today = new Date().toDateString() === d.toDateString();
+  return d.toLocaleString([], today ? { hour: '2-digit', minute: '2-digit' } : { weekday: 'short', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+};
+
+export const money = (v) => (v >= 100 ? `$${Math.round(v)}` : `$${(v || 0).toFixed(2)}`);
+export const pct = (v) => (v === null || v === undefined ? '—' : `${Math.round(v * 100)}%`);

package/web/js/core/state.js

@@ -0,0 +1,43 @@
+// What the page knows: sessions and their cards, config, harnesses and machines, plus the
+// launcher's picks. UI state that should survive a reload goes to localStorage as wisp.*.
+
+export function load(k, d) {
+  try {
+    return JSON.parse(localStorage.getItem(k)) ?? d;
+  } catch {
+    return d;
+  }
+}
+export function save(k, v) {
+  try {
+    localStorage.setItem(k, JSON.stringify(v));
+  } catch {}
+}
+
+export const S = {
+  sessions: new Map(), // id -> summary
+  full: new Map(), // id -> full session, for expanded items
+  open: new Set(load('wisp.open', [])), // expanded item ids
+  nodes: new Map(), // id -> { card, head, body, turnNodes, tray, showAll, unfolded, latestTurn }
+  tasks: new Map(), // compare task key -> { card, head, runs, lead }
+  focus: null, // id of the keyboard-focused item
+  config: { defaults: {}, projects: [] },
+  agents: [],
+  machines: [], // other computers over SSH: GET /api/machines, kept fresh by the 'machines' event
+  filter: load('wisp.filter', 'all'),
+  showDone: load('wisp.showDone', false),
+  showArchived: false,
+  drafts: new Map(),
+  replyModes: new Map(), // session id → the mode its next follow-up switches to
+  replyRunners: new Map(), // session id → { agent, model, effort } its next follow-up switches to
+};
+export const saveOpen = () => save('wisp.open', [...S.open]);
+
+// Where the launcher sends a prompt: '' = this computer, else machine ids. Several run in parallel,
+// each in the project picked for it (launch.picks[place]), and show up as one task.
+export const launch = {
+  project: load('wisp.launchProject', null), // the project picked in the first place
+  where: load('wisp.launchWhere', ['']),
+  picks: load('wisp.launchPicks', {}),
+};
+export const saveLaunch = () => (save('wisp.launchWhere', launch.where), save('wisp.launchPicks', launch.picks), save('wisp.launchProject', launch.project));

package/web/js/features/actions.js

@@ -0,0 +1,339 @@
+// What you can do to a session: done, archive, delete, rename, rerun, revert, take over, open files,
+// and the menus that offer it. Local changes apply at once and roll back if the server refuses.
+
+import { copy } from '../blocks.js';
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import { $, el, icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { keyHint } from '../ui/kbd.js';
+import { overlay } from '../ui/overlay.js';
+import { popover } from '../ui/popover.js';
+import { toast, toastError, tryApi } from '../ui/toast.js';
+import { autosize } from './attachments.js';
+import { saveAsRecipe } from './automations.js';
+import { compareView } from './compare.js';
+import { collapse, expand, handOff, renderFeed, setFocus } from './feed.js';
+import { launchBehind } from './launcher.js';
+import { runnerPicker } from './runner-picker.js';
+import { agentName, effortsFor, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
+import { feedAnchor, keepInPlace } from './scroll.js';
+import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
+
+export async function toggleDone(id) {
+  const s = S.sessions.get(id);
+  if (!s) return;
+  if (s.state === 'running' || s.state === 'waiting') return toast('Still working — stop it first or let it finish.');
+  const next = s.state === 'done' ? 'review' : 'done';
+  // Optimistic: the card moves now; a failed save puts it back.
+  move(id, { ...s, state: next }, next === 'done');
+  if (next === 'done') toast(`Marked done`, { action: { label: 'Undo', run: () => toggleDone(id) } });
+  try {
+    await api(`/sessions/${id}`, { method: 'PATCH', body: { state: next } });
+  } catch (err) {
+    revertSummary(id, s);
+    toastError(err);
+  }
+}
+
+// Apply a summary change locally before the server confirms it. Leaving the list (done, archived)
+// hands focus to the next card; coming back just re-renders around the reader.
+function move(id, next, leaving) {
+  if (leaving) return handOff(id)(() => S.sessions.set(id, next));
+  S.sessions.set(id, next);
+  keepInPlace(feedAnchor(id), renderFeed);
+}
+
+// Put back a summary changed optimistically, unless a live update has replaced it since.
+function revertSummary(id, prev) {
+  const cur = S.sessions.get(id);
+  if (cur && cur.updatedAt > prev.updatedAt) return;
+  S.sessions.set(id, prev);
+  keepInPlace(feedAnchor(id), renderFeed);
+}
+
+// Every finished run of a compare task at once, with one toast to undo them all.
+export async function taskDone(ids) {
+  if (!ids.length) return;
+  const card = S.nodes.get(ids[0])?.card.closest('.task-item');
+  const next = card?.nextElementSibling?.querySelector('.item')?.dataset.id || card?.nextElementSibling?.dataset.id;
+  const set = (state) => {
+    const prev = ids.map((id) => S.sessions.get(id));
+    for (const id of ids) S.sessions.set(id, { ...S.sessions.get(id), state });
+    renderFeed();
+    Promise.all(ids.map((id) => api(`/sessions/${id}`, { method: 'PATCH', body: { state } }))).catch((err) => {
+      prev.forEach((p, i) => p && revertSummary(ids[i], p));
+      toastError(err);
+    });
+  };
+  set('done');
+  if (next && S.nodes.has(next)) setFocus(next);
+  toast(`Marked ${ids.length} runs done`, { action: { label: 'Undo', run: () => set('review') } });
+}
+
+export function revertFile(id, turnId, file, restore = false) {
+  return tryApi(async () => {
+    await api(`/sessions/${id}/revert`, { method: 'POST', body: { turnId, file, restore } });
+    toast(restore ? `Re-applied ${esc(file)}` : `Reverted ${esc(file)}`, {
+      action: { label: 'Undo', run: () => revertFile(id, turnId, file, !restore) },
+    });
+  });
+}
+
+export async function rollbackTurn(id, turnId, restore = false) {
+  const s = S.full.get(id) || (await api(`/sessions/${id}`).catch(() => null));
+  const turn = s?.turns?.find((t) => t.id === turnId) || s?.turns?.at(-1);
+  if (!turn) return;
+  await tryApi(async () => {
+    const r = await api(`/sessions/${id}/rollback`, { method: 'POST', body: { turnId: turn.id, restore } });
+    toast(
+      restore
+        ? `Re-applied turn changes`
+        : `Restored working tree to before this turn${r.head ? ` (${esc(r.head.slice(0, 7))})` : ''}`,
+      { action: { label: 'Undo', run: () => rollbackTurn(id, turn.id, !restore) } },
+    );
+  });
+}
+
+// The server keeps the result on the turn under `key` (turn.actionRuns), where the block that
+// ran it looks for it when the card renders again.
+export async function execAction(id, turnId, command, key) {
+  return (await tryApi(() => api(`/sessions/${id}/exec`, { method: 'POST', body: { command, turnId, key } }))) ?? null;
+}
+
+export async function takeOver(id) {
+  const s = S.full.get(id) || (await api(`/sessions/${id}`).catch(() => null));
+  if (!s?.agentSessionId) return;
+  if (s.state === 'running' && !confirm(`${agentName(s.agent)} is still running. Stop it and take over in your terminal?`)) return;
+  await tryApi(async () => {
+    const { command } = await api(`/sessions/${id}/takeover`, { method: 'POST', body: {} });
+    toast(`${icon('terminal')} Opened in your terminal`, { action: { label: 'Copy command', run: () => copy(command) } });
+  });
+}
+
+export function rename(id) {
+  const n = S.nodes.get(id);
+  const title = n && $('.it-title', n.head);
+  if (!title) return;
+  title.contentEditable = 'true';
+  title.focus();
+  document.getSelection().selectAllChildren(title);
+  const done = (commit) => {
+    title.contentEditable = 'false';
+    const s = S.sessions.get(id);
+    const t = title.textContent.trim();
+    if (commit && t && t !== s.title) api(`/sessions/${id}`, { method: 'PATCH', body: { title: t } }).catch((e) => toastError(e));
+    else title.textContent = s.title;
+  };
+  title.onkeydown = (e) => {
+    if (e.key === 'Enter') (e.preventDefault(), title.blur());
+    if (e.key === 'Escape') ((title.textContent = S.sessions.get(id).title), title.blur());
+  };
+  title.onclick = (e) => e.stopPropagation();
+  title.onblur = () => done(true);
+}
+
+export function moreMenu(id, anchor) {
+  const s = S.full.get(id);
+  if (!s) return;
+  const lastTurn = s.turns?.at(-1);
+  const canRollback = s.agent !== 'wisp' && s.state !== 'running' && (lastTurn?.changes?.length || lastTurn?.checkpoint?.commit);
+  const rolledBack = !!lastTurn?.rolledBackAt;
+  const r = anchor.getBoundingClientRect();
+  const menu = el(`
+    <div class="menu" style="top:${r.bottom + 6}px;right:${innerWidth - r.right}px">
+      <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
+      ${s.agentSessionId ? `<button data-a="copy">${icon('copy')}Copy resume command</button>` : ''}
+      <button data-a="folder">${icon('folder')}Open project in editor</button>
+      ${canRollback ? `<button data-a="rollback">${icon(rolledBack ? 'rerun' : 'replay')}${rolledBack ? 'Re-apply latest turn' : 'Restore to before latest turn'}</button>` : ''}
+      ${s.archived ? `<button data-a="unarchive">${icon('archive')}Unarchive${keyHint('A')}</button>` : s.state !== 'running' && s.state !== 'waiting' ? `<button data-a="archive">${icon('archive')}Archive${keyHint('A')}</button>` : ''}
+      <button data-a="delete" class="danger">${icon('trash')}Delete session${keyHint('⌫')}</button>
+    </div>`);
+  menu.onclick = async (e) => {
+    const a = e.target.closest('button')?.dataset.a;
+    close();
+    if (a === 'rename') rename(id);
+    if (a === 'copy') {
+      await tryApi(async () => {
+        const { command } = await api(`/sessions/${id}/takeover`);
+        copy(command);
+        toast('Copied resume command');
+      });
+    }
+    if (a === 'folder') openInEditor(s, '.');
+    if (a === 'rollback') rollbackTurn(id, lastTurn?.id, rolledBack);
+    if (a === 'archive' || a === 'unarchive') setArchived(id, a === 'archive');
+    if (a === 'delete') deleteSession(id);
+  };
+  const close = popover(menu);
+}
+
+// Right-click on a feed item.
+export function taskMenu(id, e) {
+  const s = S.sessions.get(id);
+  if (!s) return;
+  $('.menu.task')?.close();
+  const busy = s.state === 'running' || s.state === 'waiting';
+  const menu = el(`
+    <div class="menu task" style="top:${e.clientY}px;left:${e.clientX}px">
+      ${S.open.has(id) ? `<button data-a="collapse">${icon('chevron')}Collapse${keyHint('O')}</button>` : `<button data-a="open">${icon('chevron')}Open${keyHint('O')}</button>`}
+      <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
+      <button data-a="rerun">${icon('rerun')}Rerun…${keyHint('⇧R')}</button>
+      ${shippable(s) ? `<button data-a="ship">${icon('send')}${shipLabel(s)}${keyHint('S')}</button>` : ''}
+      ${s.pr?.state === 'OPEN' ? `<button data-a="merge">${icon('check')}Merge PR #${s.pr.number}…</button>` : ''}
+      ${s.groupId ? `<button data-a="compare"><b class="vs-mark">vs</b>Compare runs</button>` : ''}
+      <button data-a="recipe">${icon('spark')}Save as recipe…</button>
+      ${busy || s.archived ? '' : `<button data-a="done">${icon('done')}${s.state === 'done' ? 'Reopen' : 'Mark done'}${keyHint('E')}</button>`}
+      ${s.archived ? `<button data-a="unarchive">${icon('archive')}Unarchive${keyHint('A')}</button>` : busy ? '' : `<button data-a="archive">${icon('archive')}Archive${keyHint('A')}</button>`}
+      <button data-a="delete" class="danger">${icon('trash')}Delete session${keyHint('⌫')}</button>
+    </div>`);
+  menu.onclick = async (ev) => {
+    const a = ev.target.closest('button')?.dataset.a;
+    close();
+    if (a === 'open') expand(id);
+    if (a === 'collapse') collapse(id);
+    if (a === 'rename') rename(id);
+    if (a === 'rerun') rerun(id);
+    if (a === 'ship') shipDialog(id);
+    if (a === 'merge') mergePr(id);
+    if (a === 'compare') compareView(id);
+    if (a === 'recipe') saveAsRecipe(id);
+    if (a === 'done') toggleDone(id);
+    if (a === 'archive' || a === 'unarchive') setArchived(id, a === 'archive');
+    if (a === 'delete') deleteSession(id);
+  };
+  const close = popover(menu);
+  const r = menu.getBoundingClientRect();
+  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
+  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+}
+
+export async function deleteSession(id) {
+  if (!confirm('Delete this session from wisp? (The agent’s own history is kept.)')) return;
+  const prev = S.sessions.get(id);
+  handOff(id)(() => S.sessions.delete(id));
+  await api(`/sessions/${id}`, { method: 'DELETE' }).catch((err) => {
+    if (prev && !S.sessions.has(id)) (S.sessions.set(id, prev), keepInPlace(feedAnchor(id), renderFeed));
+    toastError(err);
+  });
+}
+
+// Launch the task again as a new session in the same folder: same prompt and attachments,
+// optionally edited, on whichever harness, model and thinking level you pick. The original stays.
+export async function rerun(id) {
+  const s = S.full.get(id) || (await api(`/sessions/${id}`).catch(toastError));
+  const first = s?.turns?.[0];
+  if (!first?.prompt) return toast('Nothing to rerun — this session has no prompt.', { tone: 'bad' });
+  const has = (a) => S.agents.some((x) => x.id === a && x.available);
+  let agent = has(s.agent) ? s.agent : S.agents.find((x) => x.available)?.id || s.agent;
+  const models = S.agents.find((x) => x.id === agent)?.models || [];
+  let model = agent === s.agent && models.some((m) => m.id === s.model) ? s.model : savedModel(agent);
+  let effort = agent === s.agent && effortsFor(agent, model).includes(s.effort) ? s.effort : savedEffort(agent, model);
+  let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || 'edits';
+  const files = first.attachments || [];
+
+  const node = el(`
+    <div class="modal rerun-modal">
+      <header><h2>Rerun task</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <div class="rr-box">
+        <textarea class="rr-prompt" rows="3" spellcheck="false"></textarea>
+        ${files.length ? `<div class="rr-files">${files.map((f) => `<span class="rr-file">${icon('clip')}${esc(f.name)}</span>`).join('')}</div>` : ''}
+        <div class="l-bar">
+          <button class="mode-btn" data-a="mode" aria-haspopup="menu"></button>
+          <button class="runner-btn" data-a="runner" title="Harness, model and thinking level" aria-haspopup="dialog"></button>
+          <span class="grow"></span>
+          <button class="primary sm" data-a="go">${icon('rerun')}Rerun</button>
+        </div>
+      </div>
+      <p class="hint">Starts a new session in <code>${esc(s.cwd)}</code>. “${esc(s.title)}” is kept as it is.</p>
+    </div>`);
+  const close = overlay(node);
+  $('.close', node).onclick = close;
+  const ta = $('.rr-prompt', node);
+  ta.value = first.prompt;
+  autosize(ta);
+  const modeBtn = $('[data-a="mode"]', node);
+  const paintMode = () => {
+    const m = MODES.find((x) => x.id === mode) || MODES[1];
+    modeBtn.className = `mode-btn m-${m.id}`;
+    modeBtn.innerHTML = `${icon(m.icon)}<span>${m.label}</span>`;
+    modeBtn.title = m.hint;
+  };
+  const runnerBtn = $('[data-a="runner"]', node);
+  const paintRunner = () => paintRunnerBtn(runnerBtn, agent, model, effort);
+  paintMode();
+  paintRunner();
+  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, auto: true }, (a, m, e) => {
+      [agent, model, effort] = [a, m, e];
+      paintRunner();
+    });
+
+  const go = async () => {
+    const prompt = ta.value.trim();
+    if (!prompt) return ta.focus();
+    close();
+    try {
+      const body = { prompt, cwd: s.cwd, agent, mode, model, effort, attachments: files.map((f) => f.id) };
+      const next = await launchBehind({ prompt, cwd: s.cwd, runner: { agent, model, effort } }, () => api('/sessions', { method: 'POST', body }));
+      setFocus(next.id);
+    } catch (err) {
+      toast(`Rerun failed: ${esc(err.message)}`, { tone: 'bad', action: { label: 'Edit again', run: () => rerun(id) } });
+    }
+  };
+  $('[data-a="go"]', node).onclick = go;
+  ta.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) (e.preventDefault(), go());
+    if (e.key === 'Tab' && e.shiftKey) {
+      e.preventDefault();
+      mode = MODES[(MODES.findIndex((m) => m.id === mode) + 1) % MODES.length].id;
+      paintMode();
+    }
+  });
+  requestAnimationFrame(() => (ta.focus(), ta.setSelectionRange(ta.value.length, ta.value.length)));
+}
+
+export async function setArchived(id, archived) {
+  const prev = S.sessions.get(id);
+  if (!prev) return;
+  // Optimistic: the card leaves (or comes back) now; a failed save puts it back.
+  move(id, { ...prev, archived }, archived);
+  if (archived) toast('Archived', { action: { label: 'Undo', run: () => setArchived(id, false) } });
+  try {
+    await api(`/sessions/${id}`, { method: 'PATCH', body: { archived } });
+  } catch (err) {
+    revertSummary(id, prev);
+    toastError(err);
+  }
+}
+
+const EDITORS = {
+  vscode: (f, l) => `vscode://file${f}${l ? `:${l}` : ''}`,
+  cursor: (f, l) => `cursor://file${f}${l ? `:${l}` : ''}`,
+  windsurf: (f, l) => `windsurf://file${f}${l ? `:${l}` : ''}`,
+  zed: (f, l) => `zed://file${f}${l ? `:${l}` : ''}`,
+  idea: (f, l) => `idea://open?file=${encodeURIComponent(f)}${l ? `&line=${l}` : ''}`,
+};
+
+// VS Code and its forks open a file on a machine through their Remote - SSH extension.
+const REMOTE_EDITORS = new Set(['vscode', 'cursor', 'windsurf']);
+
+export function openInEditor(s, p, line) {
+  const editor = S.config.defaults.editor || 'vscode';
+  const abs = p.startsWith('/') ? p : `${s.cwd}/${p}`.replace(/\/\.$/, '');
+  if (s.machine) {
+    if (!REMOTE_EDITORS.has(editor)) {
+      copy(abs);
+      return toast(`Copied path ${esc(abs)} (on ${esc(s.machine.name)})`);
+    }
+    location.href = `${editor}://vscode-remote/ssh-remote+${encodeURIComponent(s.machine.target)}${abs}${line ? `:${line}` : ''}`;
+    return;
+  }
+  if (editor === 'none' || !EDITORS[editor]) {
+    copy(abs);
+    return toast(`Copied path ${esc(abs)}`);
+  }
+  location.href = EDITORS[editor](abs, line);
+}

package/web/js/features/attachments.js

@@ -0,0 +1,115 @@
+// Files attached to a prompt: pasted, dropped or picked, uploaded at once, sent as ids.
+
+import { esc } from '../md.js';
+import { upload } from '../core/api.js';
+import { el, icon } from '../core/dom.js';
+import { fmtSize } from '../core/format.js';
+import { toast } from '../ui/toast.js';
+
+// One file picker for every tray: the tray that opened it gets the files.
+const fileInput = el(`<input type="file" multiple hidden>`);
+document.body.append(fileInput);
+
+export function attachTray() {
+  const items = [];
+  const node = el(`<div class="tray" hidden></div>`);
+  const render = () => {
+    node.hidden = !items.length;
+    node.innerHTML = items
+      .map(
+        (it, i) => `<div class="att ${it.status}" data-i="${i}" title="${esc(it.name)}">
+          ${it.thumb ? `<img src="${it.thumb}" alt="">` : `<span class="att-ic">${icon(it.mime.startsWith('video') ? 'web' : 'file')}</span>`}
+          <span class="att-name">${esc(it.name)}</span><span class="att-size">${fmtSize(it.size)}</span>
+          <button class="att-x" title="Remove">${icon('x')}</button>
+        </div>`,
+      )
+      .join('');
+  };
+  node.addEventListener('click', (e) => {
+    const x = e.target.closest('.att-x');
+    if (x) {
+      items.splice(Number(x.closest('.att').dataset.i), 1);
+      render();
+    }
+  });
+  const add = (files) => {
+    for (const f of files) {
+      const it = { name: f.name || 'pasted', size: f.size, mime: f.type || '', status: 'uploading', thumb: f.type.startsWith('image/') ? URL.createObjectURL(f) : null };
+      items.push(it);
+      it.promise = upload(f, { name: it.name, type: it.mime })
+        .then((j) => ((it.id = j.id), (it.status = 'ready'), render()))
+        .catch((err) => ((it.status = 'failed'), render(), toast(`Upload failed: ${esc(err.message)}`, { tone: 'bad' })));
+    }
+    render();
+  };
+  return {
+    node,
+    add,
+    pick: () => {
+      fileInput.onchange = () => {
+        add(fileInput.files);
+        fileInput.value = '';
+      };
+      fileInput.click();
+    },
+    async ids() {
+      await Promise.allSettled(items.map((i) => i.promise));
+      return items.filter((i) => i.id).map((i) => i.id);
+    },
+    clear() {
+      items.length = 0;
+      render();
+    },
+    // Empty the tray for an optimistic send, and put the files back if the send fails.
+    take() {
+      const list = items.splice(0);
+      render();
+      return list;
+    },
+    restore(list) {
+      if (!list?.length) return;
+      items.unshift(...list);
+      render();
+    },
+    get busy() {
+      return items.some((i) => i.status === 'uploading');
+    },
+  };
+}
+
+// Wire paste + drag/drop of files onto a container.
+export function acceptFiles(container, textarea, tray) {
+  textarea.addEventListener('paste', (e) => {
+    const files = [...(e.clipboardData?.files || [])];
+    if (files.length) {
+      e.preventDefault();
+      tray.add(files);
+    }
+  });
+  container.addEventListener('dragover', (e) => {
+    if ([...e.dataTransfer.types].includes('Files')) {
+      e.preventDefault();
+      e.stopPropagation();
+      container.classList.add('drop');
+    }
+  });
+  container.addEventListener('dragleave', (e) => !container.contains(e.relatedTarget) && container.classList.remove('drop'));
+  container.addEventListener('drop', (e) => {
+    container.classList.remove('drop');
+    if (e.dataTransfer.files.length) {
+      e.preventDefault();
+      e.stopPropagation();
+      tray.add(e.dataTransfer.files);
+    }
+  });
+}
+
+export function autosize(ta, max = 340) {
+  const fit = () => {
+    ta.style.height = 'auto';
+    ta.style.height = `${Math.min(max, ta.scrollHeight)}px`;
+  };
+  ta.addEventListener('input', fit);
+  requestAnimationFrame(fit);
+  return fit;
+}

package/web/js/features/auto.js

@@ -0,0 +1,54 @@
+// Auto: what the router (server/router.js) learned about which harness and model work for you.
+
+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 { S } from '../core/state.js';
+import { present } from '../ui/overlay.js';
+import { toastError } from '../ui/toast.js';
+import { AUTO_GOALS, harnessLogo } from './runners.js';
+
+const ARM_STATE = { ready: ['Ready', 'ok'], new: ['Trying out', 'warn'], untried: ['No data yet', ''], gone: ['Not installed', 'bad'] };
+export 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) => (toastError(err), 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(toastError);
+      render();
+    };
+  };
+  bus.on('router', render, { node });
+  render();
+  return close;
+}