wisp-agents 0.17.0 → 0.20.0

package/web/js/features/project-list.js

@@ -0,0 +1,99 @@
+// The project list: every project in a searchable list, for when there are too many to show as
+// chips. The launcher's "in" row and the top bar's filter both open it from a "+N" chip.
+//
+//   projects  the list, in the order to show it (recent first)
+//   current   the picked id, checked and scrolled to
+//   meta(p)   extra html after a row's name (status badges)
+//   extras    [{ id, label, icon }] fixed rows under the list (No folder, Other folder…)
+//   onPick    (id) => …, a project's id or an extra's
+
+import { esc } from '../md.js';
+import { $, el, icon } from '../core/dom.js';
+import { fuzzy, highlight } from '../fuzzy.js';
+import { popover } from '../ui/popover.js';
+import { projectTitle } from './places.js';
+
+export function projectList(anchor, { projects, current, meta = () => '', extras = [], onPick, label = 'Projects' }) {
+  if ($('.menu.pm')) return $('.menu.pm').close();
+  const node = el(`
+    <div class="menu pm" role="dialog" aria-label="${esc(label)}">
+      <label class="field pm-search">${icon('search')}<input spellcheck="false" autocomplete="off" placeholder="Search ${projects.length} projects" aria-label="Search projects"></label>
+      <div class="pm-list" role="listbox"></div>
+      ${extras.length ? `<div class="pm-extras">${extras.map((x) => `<button class="pm-row pm-x" data-id="${esc(x.id)}">${icon(x.icon)}<span class="pm-name">${esc(x.label)}</span></button>`).join('')}</div>` : ''}
+    </div>`);
+  const input = $('input', node);
+  const list = $('.pm-list', node);
+  let act = 0;
+  const rows = () => [...node.querySelectorAll('.pm-row')];
+  const mark = (i, scroll = true) => {
+    const r = rows();
+    if (!r.length) return;
+    act = (i + r.length) % r.length;
+    r.forEach((x, k) => x.classList.toggle('act', k === act));
+    if (scroll) r[act].scrollIntoView({ block: 'nearest' });
+  };
+  const paint = () => {
+    const q = input.value.trim();
+    const hits = q
+      ? projects
+          .map((p) => ({ p, m: fuzzy(q, [p.name, p.path]) }))
+          .filter((x) => x.m)
+          .sort((a, b) => b.m.score - a.m.score)
+      : projects.map((p) => ({ p, m: null }));
+    list.innerHTML = hits.length
+      ? hits
+          .map(
+            ({ p, m }) => `<button class="pm-row c-${p.color} ${p.id === current ? 'on' : ''}" data-id="${esc(p.id)}" role="option" aria-selected="${p.id === current}" title="${esc(projectTitle(p))}">
+              <i class="p-dot"></i><span class="pm-name">${highlight(p.name, m?.idx, esc)}</span>${p.machine ? icon('server', 'pm-where') : ''}${meta(p)}<small class="pm-path">${esc(p.path.replace(/^\/(Users|home)\/[^/]+/, '~'))}</small>${icon('check', 'pm-check')}
+            </button>`,
+          )
+          .join('')
+      : `<div class="pm-empty">No project matches “${esc(q)}”</div>`;
+    // Searching starts on the best hit; the full list opens on the current pick.
+    const at = q ? 0 : Math.max(0, hits.findIndex((h) => h.p.id === current));
+    mark(at, !q);
+  };
+  const pick = (id) => {
+    close();
+    onPick(id);
+  };
+  node.onclick = (e) => {
+    const r = e.target.closest('.pm-row');
+    if (r) pick(r.dataset.id);
+  };
+  node.onmousemove = (e) => {
+    const r = e.target.closest('.pm-row');
+    if (r && !r.classList.contains('act')) mark(rows().indexOf(r), false);
+  };
+  input.oninput = paint;
+  input.onkeydown = (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      mark(act + (e.key === 'ArrowDown' ? 1 : -1));
+    } else if (e.key === 'Enter' && !e.isComposing) {
+      e.preventDefault();
+      const r = rows()[act];
+      if (r) pick(r.dataset.id);
+    } else if (e.key === 'Tab') close();
+  };
+
+  const close = popover(node, {
+    anchor,
+    onClose: () => {
+      anchor.classList.remove('open');
+      anchor.setAttribute('aria-expanded', 'false');
+    },
+  });
+  anchor.classList.add('open');
+  anchor.setAttribute('aria-expanded', 'true');
+  paint();
+  // Under the chip, or over it when the page has no room below; never off the side.
+  const r = anchor.getBoundingClientRect();
+  const w = node.offsetWidth;
+  const h = node.offsetHeight;
+  node.style.left = `${Math.max(8, Math.min(r.left, innerWidth - w - 8))}px`;
+  node.style.top = `${r.bottom + 6 + h > innerHeight - 8 && r.top - h - 6 > 8 ? r.top - h - 6 : r.bottom + 6}px`;
+  rows()[act]?.scrollIntoView({ block: 'nearest' }); // placed: now bring the current pick into view
+  input.focus({ preventScroll: true });
+  return close;
+}

package/web/js/features/projects.js

@@ -6,13 +6,19 @@ 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 { clampToViewport, popover } from '../ui/popover.js';
 import { toast, toastError, tryApi } from '../ui/toast.js';
+import { clones, isRepo, repoLabel, repoName, startClone } from './clones.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';
+import { MACHINE_STATE, machineById, placeOf, projectById, projectTitle, recentFirst } from './places.js';
+import { projectList } from './project-list.js';
+
+// Project filter chips in the top bar before the rest fold into "+N".
+const TOP_CHIPS = 6;
+let fitBar; // refits the chips when the bar's width changes
 
 export function renderProjects() {
   const all = [...S.sessions.values()];
@@ -20,26 +26,89 @@ export function renderProjects() {
     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 badges = (id) => {
     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>` : ''}
+    return `${st.run ? `<span class="p-run" title="${st.run} working"></span>` : ''}${st.need ? `<span class="p-need">${st.need}</span>` : ''}`;
+  };
+  const chip = (id, name, color) => `<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') : ''}${badges(id)}
     </button>`;
+  const list = S.config.projects.slice().sort(recentFirst);
+  // Tens of projects: the filtered one and those that need you first, then the most recent, up to
+  // TOP_CHIPS, kept in recent order so chips don't shuffle; the rest sit behind "+N".
+  const keep = new Set([
+    ...list.filter((p) => p.id === S.filter),
+    ...list.filter((p) => stats(p.id).need),
+    ...list,
+  ].slice(0, TOP_CHIPS));
+  const shown = list.filter((p) => keep.has(p));
+  $('#projects').innerHTML = `<div class="p-scroll">${chip('all', 'All', 'slate')}${shown.map((p) => chip(p.id, p.name, p.color)).join('')}</div><button class="p-chip more" id="moreProjects" title="All ${list.length} projects" aria-haspopup="dialog"><i class="p-dot" hidden></i><span class="p-more-n"></span><span class="p-need" hidden></span>${icon('chevron', 'chev')}</button><button class="p-chip add" id="manageProjects" title="Manage projects">${icon('plus')}</button>`;
+  // Keep chips whole: drop the least important ones (recent last, the filtered one never) until
+  // the rest fit, and count what's left out on "+N" with what needs you in there.
+  const fit = () => {
+    const box = $('#projects .p-scroll');
+    if (!box) return;
+    const chips = $$('.p-chip[data-id]:not([data-id="all"])', box);
+    chips.forEach((c) => (c.hidden = false));
+    const drop = [...chips].sort((a, b) => (a.dataset.id === S.filter) - (b.dataset.id === S.filter) || stats(a.dataset.id).need - stats(b.dataset.id).need || shown.findIndex((p) => p.id === b.dataset.id) - shown.findIndex((p) => p.id === a.dataset.id));
+    const more = $('#moreProjects');
+    box.hidden = false;
+    $('#manageProjects').hidden = false;
+    $('.p-dot', more).hidden = true;
+    more.classList.remove('solo', ...[...more.classList].filter((c) => c.startsWith('c-')));
+    const paint = () => {
+      const out = list.filter((p) => !chips.some((c) => !c.hidden && c.dataset.id === p.id));
+      more.hidden = !out.length;
+      $('.p-more-n', more).textContent = `+${out.length}`;
+      const need = out.reduce((n, p) => n + stats(p.id).need, 0);
+      $('.p-need', more).hidden = !need;
+      $('.p-need', more).textContent = need;
+    };
+    paint();
+    for (const c of drop) {
+      if (box.scrollWidth <= box.clientWidth) break;
+      c.hidden = true;
+      paint();
+    }
+    // Too narrow for even "All" (a phone): one chip naming the filter opens the whole list, which
+    // also has Manage projects, so + steps aside for it.
+    if (box.scrollWidth > box.clientWidth) {
+      const p = projectById(S.filter);
+      box.hidden = true;
+      $('#manageProjects').hidden = true;
+      more.hidden = false;
+      more.classList.add('solo', ...(p ? [`c-${p.color}`] : []));
+      $('.p-dot', more).hidden = !p;
+      $('.p-more-n', more).textContent = p ? p.name : 'All';
+      const need = stats(p ? p.id : 'all').need;
+      $('.p-need', more).hidden = !need;
+      $('.p-need', more).textContent = need;
+    }
   };
-  $('#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();
-    }),
-  );
+  fit();
+  fitBar ??= new ResizeObserver(() => fitBar.fit?.());
+  fitBar.fit = fit;
+  fitBar.observe($('#projects'));
+  const setFilter = (id) => {
+    S.filter = id;
+    save('wisp.filter', S.filter);
+    renderFeed(); // repaints these chips too
+    feedToTop();
+    renderLaunchChips();
+  };
+  $$('.p-chip[data-id]').forEach((b) => b.addEventListener('click', () => setFilter(S.filter === b.dataset.id ? 'all' : b.dataset.id)));
+  $('#moreProjects').onclick = (e) =>
+    projectList(e.currentTarget, {
+      projects: list,
+      current: S.filter,
+      label: 'Filter by project',
+      meta: (p) => badges(p.id),
+      extras: [
+        ...(S.filter === 'all' ? [] : [{ id: 'all', label: 'All projects', icon: 'x' }]),
+        { id: '+manage', label: 'Manage projects…', icon: 'settings' },
+      ],
+      onPick: (id) => (id === '+manage' ? openProjects() : setFilter(id)),
+    });
   $$('.p-chip[data-id]:not([data-id="all"])').forEach((b) =>
     b.addEventListener('contextmenu', (e) => {
       e.preventDefault();
@@ -77,10 +146,7 @@ function projectMenu(id, e) {
     }
   };
   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`;
+  clampToViewport(menu, e.clientX, e.clientY);
 }
 
 const COLORS = ['violet', 'teal', 'amber', 'rose', 'sky', 'lime', 'orange', 'indigo'];
@@ -94,7 +160,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
       <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">
+          <input id="ppath" placeholder="~/code/my-app or a GitHub URL" spellcheck="false" autocomplete="off">
           <div class="suggest" hidden></div>
         </div>
         ${window.wispDesktop ? `<button class="ghost" id="pbrowse">${icon('folder')}Browse…</button>` : ''}
@@ -102,15 +168,17 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
       </div>
       <p class="hint"></p>
       <div class="plist" id="plist"></div>
+      <div class="discover" id="ghrepos"></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 close = 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);
+  let editingCloneDir = false;
 
   const paintWhere = () => {
     const tabs = $('.where', node);
@@ -118,12 +186,59 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
       .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';
+    input.placeholder = m ? `~/code/my-app or a GitHub URL, on ${m.name}` : '~/code/my-app or a GitHub URL';
     $$('#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.';
+    paintHint();
   };
+  // The hint under the input follows what's typed: a repo URL says where the clone goes.
+  const paintHint = () => {
+    const m = here();
+    const hint = $('.hint', node);
+    const v = input.value.trim();
+    $('#padd', node).textContent = isRepo(v) ? 'Clone' : 'Add';
+    if (editingCloneDir) return;
+    if (isRepo(v))
+      hint.innerHTML = m
+        ? `Clones <b>${esc(repoLabel(v))}</b> on <b>${esc(m.name)}</b>. You can write the task while it clones.`
+        : `Clones <b>${esc(repoLabel(v))}</b> into <button class="link" data-a="clonedir" title="Change where repos are cloned">${esc(tilde(S.config.cloneDir || '~/code'))}/${esc(repoName(v))}</button>. You can write the task while it clones.`;
+    else
+      hint.innerHTML = m
+        ? `Folders on <b>${esc(m.name)}</b>, or a repo URL to clone there. Agents run there, in its own worktrees; you follow along here.`
+        : 'Paste a GitHub URL and wisp clones it for you. Or run <code>wisp add</code> inside any folder: it is added automatically.';
+  };
+  // Change the clone folder in place: the hint turns into a small path field.
+  $('.hint', node).addEventListener('click', (e) => {
+    if (!e.target.closest('[data-a="clonedir"]')) return;
+    editingCloneDir = true;
+    const hint = $('.hint', node);
+    hint.innerHTML = `Clone repos into <input class="clonedir mono" spellcheck="false" value="${esc(tilde(S.config.cloneDir || '~/code'))}"> <button class="link" data-a="savedir">Save</button>`;
+    const f = $('.clonedir', hint);
+    const done = async (keep) => {
+      if (!editingCloneDir) return;
+      editingCloneDir = false;
+      if (keep && f.value.trim() !== tilde(S.config.cloneDir || '')) {
+        S.config.cloneDir = f.value.trim(); // optimistic; the server answers with the resolved folder
+        await tryApi(async () => {
+          await api('/config', { method: 'PATCH', body: { defaults: { cloneDir: f.value.trim() } } });
+          await loadConfig();
+        });
+      }
+      paintHint();
+      input.focus();
+    };
+    f.onkeydown = (ev) => {
+      if (ev.key === 'Enter' || ev.key === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation(); // Escape cancels the edit, not the dialog
+        done(ev.key === 'Enter');
+      }
+    };
+    $('[data-a="savedir"]', hint).onclick = () => {
+      done(true);
+    };
+    f.focus();
+    f.select();
+  });
   $('.where', node).addEventListener('click', (e) => {
     const b = e.target.closest('[data-w]');
     if (!b) return;
@@ -135,28 +250,42 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
     sug.hidden = true;
     paintWhere();
     list();
+    github();
     discover();
     input.focus();
   });
 
+  // A new project becomes the launcher's pick for its place.
+  const picked = async (proj) => {
+    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();
+  };
   const add = async (p) => {
+    if (isRepo(p)) return clone(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();
+      await picked(proj);
       toast(`Added <b>${esc(proj.name)}</b>${where ? ` on ${esc(here()?.name || '')}` : ''}`);
       input.value = '';
       sug.hidden = true;
+      paintHint();
       list();
       discover();
     } catch (err) {
       toastError(err);
     }
   };
+  // Clone a repo: the launcher picks it right away (cloning in the background) and the dialog
+  // closes, so the next thing is writing the task. A launch into it waits for the clone.
+  const clone = (url) => {
+    startClone(url, where);
+    close();
+    setTimeout(() => $('#prompt')?.focus(), 60);
+  };
   $('#padd', node).onclick = () => {
     if (input.value.trim()) add(input.value.trim());
   };
@@ -169,10 +298,11 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
   let sel = -1;
   let t;
   input.addEventListener('input', () => {
+    paintHint();
     clearTimeout(t);
     t = setTimeout(async () => {
       const q = input.value;
-      if (!q) return (sug.hidden = true);
+      if (!q || isRepo(q)) return (sug.hidden = true);
       const dirs = await api(`${where ? `/machines/${where}/fs` : '/fs'}?q=${encodeURIComponent(q)}`).catch(() => []);
       sel = -1;
       sug.hidden = !dirs.length;
@@ -202,8 +332,16 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
   const list = () => {
     const box = $('#plist', node);
     const projects = S.config.projects.filter((p) => (p.machine || null) === where);
-    box.innerHTML = projects.length
-      ? projects
+    const pending = clones
+      .filter((j) => j.where === where)
+      .map(
+        (j) => `<div class="prow cloning"><span class="swatch"><span class="orb live"></span></span>
+          <div class="prow-main"><b class="pname">${esc(repoName(j.url))}</b><span class="ppath">Cloning ${esc(repoLabel(j.url))}…</span></div></div>`,
+      )
+      .join('');
+    box.innerHTML = projects.length || pending
+      ? pending +
+        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}">
@@ -215,7 +353,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
           })
           .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) => {
+    $$('.prow[data-id]', box).forEach((row) => {
       const id = row.dataset.id;
       const p = projectById(id);
       $('.pname', row).onchange = (e) => {
@@ -243,6 +381,40 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
     });
   };
 
+  // The user's own GitHub repos (through gh), one click to clone. Only on this computer, and
+  // hidden when gh isn't installed or signed in.
+  let ghRepos = null;
+  let ghAll = false;
+  const github = async () => {
+    const box = $('#ghrepos', node);
+    if (where) return (box.innerHTML = '');
+    box.onclick = (e) => {
+      const b = e.target.closest('[data-repo]');
+      if (b) clone(b.dataset.repo);
+      if (e.target.closest('[data-a="ghall"]')) {
+        ghAll = !ghAll;
+        github();
+      }
+    };
+    if (!ghRepos) {
+      box.innerHTML = `<h4>${icon('github')}Your GitHub repos</h4><p class="muted">Asking gh…</p>`;
+      ghRepos = await api('/projects/github').catch(() => []);
+      if (where) return (box.innerHTML = '');
+    }
+    const busy = new Set(clones.map((j) => j.label.toLowerCase()));
+    const repos = ghRepos.filter((r) => !busy.has(r.repo.toLowerCase()));
+    const more = repos.length > 6 ? `<button class="link xs" data-a="ghall">${ghAll ? 'Show fewer' : `Show all ${repos.length}`}</button>` : '';
+    box.innerHTML = repos.length
+      ? `<h4>${icon('github')}Your GitHub repos <span class="muted">· click to clone</span>${more}</h4><div class="found">${repos
+          .slice(0, ghAll ? undefined : 6)
+          .map(
+            (r) =>
+              `<button class="found-item" data-repo="${esc(r.url)}" title="${esc(r.description || r.repo)}">${icon('plus')}<b>${esc(r.repo.split('/')[1])}</b><span>${esc(r.repo.split('/')[0])}${r.private ? ' · private' : ''}${r.fork ? ' · fork' : ''}</span></button>`,
+          )
+          .join('')}</div>`
+      : '';
+  };
+
   const discover = async () => {
     const box = $('#discover', node);
     const m = here();
@@ -265,6 +437,14 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
           .join('')}</div>`
       : '';
   };
+  bus.on(
+    'clones',
+    () => {
+      list();
+      github();
+    },
+    { node },
+  );
   let wasOnline = here()?.state === 'online';
   bus.on(
     'machines',
@@ -279,6 +459,7 @@ export async function openProjects({ focusAdd = false, machine = null, host } =
 
   paintWhere();
   list();
+  github();
   discover();
   if (focusAdd) setTimeout(() => input.focus(), 60);
 }

package/web/js/features/runners.js

@@ -17,14 +17,15 @@ 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.
+// Auto: not a CLI but wisp's router (server/router.js), which picks harness, model and thinking
+// level per task. Its "models" are the goal it optimises for, which also sets the level band, so
+// there are no thinking levels to pick here.
 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' },
+  { id: 'balanced', label: 'Balanced', hint: 'Best result per dollar · default or medium thinking' },
+  { id: 'cheap', label: 'Cheap', hint: 'Lowest cost that still gets it done · low thinking' },
+  { id: 'best', label: 'Best', hint: 'Best result; cost only breaks ties · high thinking' },
 ];
-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' };
+export const AUTO = { id: 'auto', name: 'Auto', available: true, delegates: true, models: AUTO_GOALS, efforts: [], hint: 'wisp picks the harness, model and thinking level 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);

package/web/js/features/settings.js

@@ -6,7 +6,7 @@ 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 { S, setAgents } from '../core/state.js';
 import { overlay } from '../ui/overlay.js';
 import { toast, toastError, tryApi } from '../ui/toast.js';
 import { openRouter } from './auto.js';
@@ -78,6 +78,7 @@ export function openSettings(opts) {
           </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>')}
+            ${row('Auto-fix PR conflicts', 'Without waiting for a click on Fix conflicts: when a shipped PR conflicts with its base, the task merges the base in, resolves it and pushes', '<button class="switch" id="fixConflicts" role="switch"></button>')}
           </div>
         </section>
         <section class="sx-pane" data-pane="notifications">
@@ -100,6 +101,13 @@ export function openSettings(opts) {
             ${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('Check with the tests', 'When the agent says it’s done, wisp runs the project’s tests itself. Only failures that are new count', '<button class="switch" id="roCheck" role="switch"></button>')}
+            ${row('Repair rounds', 'Failing tests go back to the same agent this many times', `<span class="pk-seg ro-repairs">${[0, 1, 2].map((n) => `<button data-n="${n}">${n}</button>`).join('')}</span>`)}
+            ${row('Hand over when it still fails', 'The task runs again on a stronger pick, next to the first run', '<button class="switch" id="roEscalate" role="switch"></button>')}
+            ${row('Best of two', 'Off by default. With the Best goal, two picks work side by side and wisp marks the better one', '<button class="switch" id="roBest2" role="switch"></button>')}
+            ${row('Scout first', 'A cheap model looks around the repo and tells the agent where to start', `<span class="pk-seg ro-scout">${[['off', 'Off'], ['big', 'Bigger tasks'], ['all', 'Every task']].map(([v, l]) => `<button data-v="${v}">${l}</button>`).join('')}</span>`)}
+          </div>
           <div class="sx-group">
             ${row('What it learned', '<span class="ro-hint"></span>', '<button class="ghost sm" id="openRouter">Open</button>')}
           </div>
@@ -170,7 +178,7 @@ export function openSettings(opts) {
     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: {} });
+      setAgents(await api('/agents/recheck', { method: 'POST', body: {} }));
       if (!node.isConnected) return;
       paintAgents();
       $('#launcher')?.placesChanged?.();
@@ -300,6 +308,19 @@ export function openSettings(opts) {
     });
     if (!saved) return;
     paintWt();
+  const fc = $('#fixConflicts', node);
+  const paintFc = () => fc.setAttribute('aria-checked', S.config.defaults.fixConflicts === 'on');
+  fc.onclick = async () => {
+    const was = S.config.defaults.fixConflicts;
+    S.config.defaults.fixConflicts = was === 'on' ? 'off' : 'on';
+    paintFc();
+    const saved = await tryApi(() => api('/config', { method: 'PATCH', body: { defaults: { fixConflicts: S.config.defaults.fixConflicts } } }));
+    if (!saved) {
+      S.config.defaults.fixConflicts = was;
+      paintFc();
+    }
+  };
+  paintFc();
     renderLauncher();
   };
   paintWt();
@@ -309,13 +330,18 @@ export function openSettings(opts) {
     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);
+    $('#roCheck', node).setAttribute('aria-checked', r.settings.check);
+    $('#roEscalate', node).setAttribute('aria-checked', r.settings.escalate);
+    $('#roBest2', node).setAttribute('aria-checked', r.settings.best2);
+    $$('.ro-repairs button', node).forEach((b) => b.classList.toggle('on', Number(b.dataset.n) === r.settings.repairs));
+    $$('.ro-scout button', node).forEach((b) => b.classList.toggle('on', b.dataset.v === r.settings.scout));
     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`
+      ? `${r.learned} task${r.learned === 1 ? '' : 's'} learned from · ${r.arms.filter((a) => a.state !== 'gone').length} harness · model · level options`
       : `Nothing of yours yet · starting from wisp-bench (${r.priors.version})`;
   };
   const patchAuto = async (body) => {
@@ -335,10 +361,24 @@ export function openSettings(opts) {
       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 });
+  for (const [id, key] of [['#roExplore', 'explore'], ['#roCheck', 'check'], ['#roEscalate', 'escalate'], ['#roBest2', 'best2']]) {
+    $(id, node).onclick = (e) => {
+      const on = e.currentTarget.getAttribute('aria-checked') !== 'true';
+      e.currentTarget.setAttribute('aria-checked', on);
+      patchAuto({ [key]: on });
+    };
+  }
+  $('.ro-repairs', node).onclick = (e) => {
+    const b = e.target.closest('[data-n]');
+    if (!b) return;
+    $$('.ro-repairs button', node).forEach((x) => x.classList.toggle('on', x === b));
+    patchAuto({ repairs: Number(b.dataset.n) });
+  };
+  $('.ro-scout', node).onclick = (e) => {
+    const b = e.target.closest('[data-v]');
+    if (!b) return;
+    $$('.ro-scout button', node).forEach((x) => x.classList.toggle('on', x === b));
+    patchAuto({ scout: b.dataset.v });
   };
   $('.ro-allowed', node).onclick = (e) => {
     const b = e.target.closest('[data-id]');

package/web/js/features/setup.js

@@ -6,7 +6,7 @@ import { esc } from '../md.js';
 import { api } from '../core/api.js';
 import * as bus from '../core/bus.js';
 import { $, icon } from '../core/dom.js';
-import { launch, S } from '../core/state.js';
+import { launch, S, setAgents } from '../core/state.js';
 import { toast, toastError } from '../ui/toast.js';
 import { harnessLogo } from './runners.js';
 
@@ -25,7 +25,7 @@ export async function installHarness(id) {
   failed = '';
   bus.emit('install');
   try {
-    S.agents = await api('/agents/install', { method: 'POST', body: { id } });
+    setAgents(await api('/agents/install', { method: 'POST', body: { id } }));
     $('#launcher')?.placesChanged?.();
     toast(`<b>${esc(S.agents.find((a) => a.id === id)?.name || id)}</b> is ready: free models, no account needed. Type a task and press Enter.`, { timeout: 7000 });
     $('#prompt')?.focus();
@@ -68,7 +68,7 @@ export function renderSetup() {
     btn.disabled = true;
     btn.classList.add('busy');
     try {
-      S.agents = await api('/agents/recheck', { method: 'POST', body: {} });
+      setAgents(await api('/agents/recheck', { method: 'POST', body: {} }));
       $('#launcher')?.placesChanged?.();
       bus.emit('agents');
       if (needsSetup()) toast('Still no harness found. Install opencode here, or Claude Code, Codex, Cursor… yourself.');