wisp-agents 0.17.0 → 0.18.0

package/server/services/ship.js

@@ -1,13 +1,30 @@
 // Ship it: whether a worktree session has something to ship, the draft commit message and PR
-// text, and following open PRs (checks, reviews, merges) so their cards stay current.
+// text, and following open PRs (checks, reviews, merges) so their cards stay current. A PR that
+// starts conflicting with its base gets fixed on its own: the task is sent a follow-up to merge the
+// base in, and the result is pushed to the PR when it's done (defaults.fixConflicts: 'off' to stop).
 
 import fs from 'node:fs';
-import { worktreeStatus, prView } from '../git.js';
+import { worktreeStatus, prView, ship, baseMerged, conflictsWithBase } from '../git.js';
 import { blocksToMarkdown } from '../render.js';
 import { summarize } from '../runner.js';
 
 const PR_POLL_MS = 60_000;
 const SHIP_RECHECK_MS = 5_000;
+const MAX_CONFLICT_FIXES = 3; // per task, so a base that keeps moving can't run up the bill
+
+export const conflictPrompt = (s) => {
+  const { remote, base } = s.worktree;
+  return [
+    `PR #${s.pr.number} (${s.pr.url}) can no longer merge into \`${base}\`: changes that landed there since conflict with this branch. Bring the branch up to date:`,
+    '',
+    `1. \`git fetch ${remote}\`, then \`git merge ${remote}/${base}\`. Don't rebase: the branch is already pushed.`,
+    `2. Resolve every conflict, keeping the intent of both sides: what landed on \`${base}\` and what this task changed. Don't drop either side's changes to make a conflict go away.`,
+    '3. Run the checks that are cheap here (tests, type-check, build) on the merged result and fix what the merge broke.',
+    "4. Finish with `git commit --no-edit`. Don't push: wisp pushes to the PR when you're done.",
+    '',
+    'If a conflict needs a decision only the user can make, ask them.',
+  ].join('\n');
+};
 
 export function createShip(app) {
   const { store, runner } = app;
@@ -48,14 +65,68 @@ export function createShip(app) {
     const pr = await prView(dir, prev.number);
     const changed = (k) => JSON.stringify(k(pr)) !== JSON.stringify(k(prev));
     s.pr = pr;
+    if (s.conflictFix && !pr.conflict && !['fixing', 'pushing'].includes(s.conflictFix.step)) delete s.conflictFix;
     if (pr.state !== prev.state) app.auto.signals(summarize(s, store));
     // Things worth coming back for: CI finished either way, a review landed, it merged or closed.
     const settledChecks = (x) => (x.checks.pending ? 'pending' : x.checks.fail ? 'fail' : 'pass');
     if (changed((x) => x.state) || changed((x) => x.review) || (changed(settledChecks) && settledChecks(pr) !== 'pending')) s.unread = true;
     app.sessionChanged(s);
+    await fixConflicts(s).catch(() => {});
     return pr;
   };
 
+  // The PR conflicts with its base: send the task a follow-up to merge the base in. Once per PR
+  // head, so a fix that didn't take isn't retried until something changes the branch.
+  const starting = new Set(); // a poll and a refresh at once must not both send it
+  const fixConflicts = async (s) => {
+    const pr = s.pr;
+    if (store.config.defaults.fixConflicts === 'off' || pr?.state !== 'OPEN' || !pr.conflict || !s.worktree?.remote) return;
+    if (runner.live.has(s.id) || s.shipping || s.ask || s.archived || starting.has(s.id)) return;
+    const tries = s.conflictFix?.tries || 0;
+    if (s.conflictFix?.head === pr.head || tries >= MAX_CONFLICT_FIXES) return;
+    starting.add(s.id);
+    try {
+      if ((await conflictsWithBase(s.worktree)) === false || runner.live.has(s.id)) return;
+    } finally {
+      starting.delete(s.id);
+    }
+    s.conflictFix = { step: 'fixing', head: pr.head, tries: tries + 1, startedAt: Date.now() };
+    await app.launcher.replyTo(s, conflictPrompt(s), [], true);
+    app.telemetry?.track?.('conflict_fix', { agent: s.agent });
+    app.sessionChanged(s, { now: true });
+  };
+
+  // The fix-up turn ended: push it to the PR if the base really is merged in, else leave the task
+  // for the user with why.
+  const finishFix = async (s, { interrupted, errorText }) => {
+    const fix = s.conflictFix;
+    if (fix?.step !== 'fixing') return;
+    const fail = (why) => {
+      Object.assign(fix, { step: 'failed', why });
+      s.unread = true;
+      app.sessionChanged(s, { now: true });
+    };
+    if (interrupted || s.queue?.length) return fail('Stopped: the task moved on before the conflicts were fixed.');
+    if (errorText) return fail(`The agent run failed: ${errorText}`.slice(0, 300));
+    const check = await baseMerged(s.worktree).catch((err) => ({ ok: false, why: err.message }));
+    if (!check.ok) return fail(check.why);
+    fix.step = 'pushing';
+    s.shipping = { step: 'start', update: true, startedAt: Date.now() };
+    app.sessionChanged(s);
+    const onStep = (step) => ((s.shipping = { ...s.shipping, step }), app.sessionChanged(s));
+    try {
+      s.pr = await ship(s.worktree, { title: `Merge ${s.worktree.remote}/${s.worktree.base} into ${s.worktree.branch}`, pr: s.pr, onStep });
+      fix.step = 'done';
+    } catch (err) {
+      Object.assign(fix, { step: 'failed', why: `Push failed: ${err.message}` });
+      s.unread = true;
+    } finally {
+      delete s.shipping;
+      app.sessionChanged(s, { now: true });
+    }
+    recheck(s);
+  };
+
   // Default commit message and PR text, from the session's latest presentation.
   const draft = (s) => {
     const turn = s.turns.findLast((t) => t.status === 'done') || s.turns.at(-1);
@@ -70,7 +141,15 @@ export function createShip(app) {
     return { title: title.slice(0, 100), body: `${body}\n\n_Shipped from [wisp](https://github.com/M0xoo/wisp)._`.trim() };
   };
 
-  runner.on('ended', ({ session }) => recheck(store.get(session.id)));
+  runner.on('ended', ({ session, interrupted, errorText }) => {
+    const s = store.get(session.id);
+    recheck(s);
+    if (s?.conflictFix?.step === 'fixing') finishFix(s, { interrupted, errorText }).catch(() => {});
+  });
+  for (const s of store.all()) {
+    delete s.shipping; // a ship cut short by a restart isn't running anymore
+    if (s.conflictFix?.step === 'pushing') Object.assign(s.conflictFix, { step: 'failed', why: 'wisp restarted while pushing the fix.' });
+  }
   for (const s of store.all()) if (s.worktree && !s.archived && s.pr?.state !== 'MERGED') recheck(s);
 
   const timer = setInterval(async () => {
@@ -78,5 +157,5 @@ export function createShip(app) {
   }, PR_POLL_MS);
   timer.unref();
 
-  return { recheck, refreshPr, draft, stop: () => clearInterval(timer) };
+  return { recheck, refreshPr, fixConflicts, draft, stop: () => clearInterval(timer) };
 }

package/server/store.js

@@ -88,6 +88,7 @@ export class Store {
 
   // machine: a project on another computer (paths there are POSIX); null = this one.
   projectFor(cwd = '', machine = null) {
+    if (!machine && this.isScratch(cwd)) return null; // never inside a project, even one at ~
     const sep = machine ? '/' : path.sep;
     let best = null;
     for (const p of this.config.projects)
@@ -112,7 +113,19 @@ export class Store {
     return project;
   }
 
+  // Folder-less tasks run in a throwaway directory of their own under ~/.wisp/scratch.
+  scratchDir(id) {
+    const dir = path.join(this.home, 'scratch', id);
+    fs.mkdirSync(dir, { recursive: true });
+    return dir;
+  }
+
+  isScratch(dir = '') {
+    return String(dir).startsWith(path.join(this.home, 'scratch') + path.sep);
+  }
+
   touchProject(dir) {
+    if (this.isScratch(dir)) return null;
     const p = this.projectFor(dir) || this.addProject(dir);
     p.lastUsedAt = Date.now();
     this.saveConfig();
@@ -147,6 +160,8 @@ export class Store {
 
   delete(id) {
     clearTimeout(this.timers.get(id));
+    const cwd = this.sessions.get(id)?.cwd;
+    if (this.isScratch(cwd)) fs.rmSync(cwd, { recursive: true, force: true }); // a folder-less task's files go with it
     this.sessions.delete(id);
     fs.rmSync(path.join(this.dir, `${id}.json`), { force: true });
     fs.rmSync(path.join(this.shots, id), { recursive: true, force: true });

package/web/css/launcher.css

@@ -4,6 +4,11 @@
    while it's open so switching between the two harness pickers doesn't flash the ring off and on. */
 .launcher:is(:focus-within, :has(.open)) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 0 0 3px var(--accent-soft); }
 .launcher.drop, .composer.drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+/* index.html's first paint: same height as the real launcher, so nothing jumps when it fills in */
+.launcher.skel .l-projects { height: 35px; }
+.launcher.skel .l-bar { height: 38px; }
+.launcher.skel .l-recipes { height: 40px; }
+@container launcher (max-width: 480px) { .launcher.skel .l-recipes { height: 90px; } } /* its hint wraps on phones */
 .l-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px 8px; }
 /* no harness yet: one quiet line offering to install opencode */
 .l-setup { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 6px 6px 6px 10px; border-radius: 9px; background: var(--accent-soft); font-size: 13px; color: var(--ink-2); }
@@ -24,8 +29,20 @@
 }
 .lp-chip:hover { border-color: var(--line-2); background: var(--surface-2); }
 .lp-chip.on { background: var(--bg-2); border-color: var(--line-2); color: var(--ink); font-weight: 500; }
+#wtBtn[hidden] { display: none; }
+.lp-chip.none .i { width: 13px; height: 13px; color: var(--muted); }
+.lp-chip.none.on .i { color: var(--ink); }
 .lp-chip.add { color: var(--muted); border-style: dashed; }
+.lp-chip.cloning .orb.live { --s: 11px; margin: 0; }
+.lp-chip .lp-note { color: var(--faint); font-weight: 400; font-size: 11.5px; }
 .lp-chip.add .i { width: 14px; height: 14px; }
+/* "+N": the projects that didn't get a chip, one search away */
+.lp-chip.more { gap: 5px; padding: 0 9px; color: var(--muted); }
+.lp-chip.more:hover, .lp-chip.more.open { color: var(--ink); border-color: var(--line-2); }
+.lp-chip.more .i { width: 12px; height: 12px; }
+.l-projects .lp-chip[hidden] { display: none; }
+/* narrow, with "+N" (whose list has No folder too): it goes icon-only unless picked */
+@container launcher (max-width: 520px) { .l-projects:has(.more:not([hidden])) .lp-chip.none:not(.on) span { display: none; } }
 /* recipes: one-click prompts under the launch bar */
 .l-recipes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px -12px -10px; padding: 7px 14px 8px; border-top: 1px solid var(--line); }
 .l-recipes .l-in { display: inline-flex; align-items: center; gap: 5px; }

package/web/css/layout.css

@@ -45,8 +45,16 @@
 .dot.bad { background: var(--bad); }
 
 /* project filter chips in the top bar */
-.projects { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
-.projects::-webkit-scrollbar { display: none; }
+.projects { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
+/* only whole chips: those that don't fit the bar fold into "+N" (projects.js fits them) */
+.p-scroll { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; }
+.p-chip[hidden], .p-chip > [hidden], .p-scroll[hidden] { display: none; }
+.p-chip.more.solo { min-width: 0; flex: 0 1 auto; gap: 6px; padding-left: 10px; color: var(--ink); font-weight: 500; }
+.p-chip.more.solo .p-more-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.p-chip.more { flex: none; gap: 4px; padding: 0 7px 0 9px; color: var(--muted); border-color: var(--line); }
+.p-chip.more:hover, .p-chip.more.open { border-color: var(--line-2); color: var(--ink); }
+.p-chip.more .chev { width: 11px; height: 11px; transform: rotate(90deg); transition: transform 0.2s var(--ease); }
+.p-chip.more.open .chev { transform: rotate(-90deg); }
 .p-chip {
   display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; flex: none;
   font-size: 12.5px; color: var(--muted); border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;

package/web/css/modals.css

@@ -43,6 +43,14 @@
 .pname:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
 .ppath { font: 11.5px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pcount { font-size: 12px; color: var(--muted); }
+.discover h4 { display: flex; align-items: center; gap: 6px; }
+.discover h4 .i { width: 14px; height: 14px; }
+.discover h4 .muted { font-weight: 400; }
+.prow.cloning .ppath { color: var(--muted); }
+.discover h4 .link { margin-left: auto; font-size: 12px; }
+.prow.cloning .orb.live { margin: 0; }
+.hint .clonedir { width: 220px; height: 24px; padding: 0 7px; margin: 0 4px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 12px; outline: 0; }
+.hint .clonedir:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .found { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
 .found-item { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; text-align: left; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); transition: all 0.15s; }
 .found-item:hover { border-color: var(--accent); background: var(--accent-soft); }

package/web/css/palette.css

@@ -53,6 +53,28 @@
 .menu { position: fixed; z-index: 40; min-width: 220px; padding: 5px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: pop 0.2s var(--ease); }
 .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); }
 .menu button:hover { background: var(--bg-2); color: var(--ink); }
+/* the project list: search over every project, rows below, fixed extras at the bottom */
+.menu.pm { display: flex; flex-direction: column; width: 340px; max-width: calc(100vw - 16px); padding: 0; overflow: hidden; }
+.menu .pm-search, .menu .pm-search:is(:hover, :focus-within) {
+  flex: none; height: 42px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font-size: 13.5px;
+}
+.pm-list { max-height: min(340px, 48vh); overflow-y: auto; padding: 5px; }
+.pm-extras { flex: none; padding: 5px; border-top: 1px solid var(--line); }
+.menu .pm-row { gap: 8px; padding: 6px 9px; text-align: left; }
+.menu .pm-row:hover { background: none; }
+.menu .pm-row.act { background: var(--bg-2); color: var(--ink); }
+.pm-row .p-dot { flex: none; }
+.pm-name { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pm-row.on .pm-name { font-weight: 500; color: var(--ink); }
+.pm-name mark { background: none; color: var(--accent-ink); font-weight: 600; }
+.pm-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--faint); }
+.pm-row .pm-where { width: 11px; height: 11px; color: var(--muted); flex: none; }
+.pm-row .p-need { flex: none; }
+.pm-row .p-run { flex: none; }
+.pm-row .pm-check { flex: none; width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
+.pm-row.on .pm-check { visibility: visible; }
+.pm-x .i { width: 14px; height: 14px; color: var(--muted); }
+.pm-empty { padding: 18px 10px; text-align: center; font-size: 13px; color: var(--muted); }
 .menu .danger:hover { color: var(--bad); background: var(--del-bg); }
 .menu-kbd { margin-left: auto; }
 

package/web/css/ship.css

@@ -93,3 +93,43 @@
 .cmp-body { flex: 1; min-height: 160px; max-height: 58vh; overflow: auto; padding: 12px; background: var(--surface); }
 .cmp-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); }
 
+
+/* Ship it in flight: the PR row turns into a track of stages that fills in as they run */
+.pr-strip.ship-run {
+  --tone: var(--accent); position: relative; overflow: hidden; animation: ship-in 0.32s var(--ease);
+  background: color-mix(in srgb, var(--tone) 6%, transparent); border-color: color-mix(in srgb, var(--tone) 22%, transparent);
+}
+.ship-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; color: var(--accent-ink); background: color-mix(in srgb, var(--tone) 14%, transparent); }
+.ship-icon .i { width: 12px; height: 12px; animation: ship-fly 1.1s ease-in-out infinite; }
+.ship-what { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.ship-what .dots::after { content: '…'; animation: pulse 1.1s ease-in-out infinite; }
+.ship-track { display: flex; align-items: center; gap: 4px; margin: 0 0 0 4px; padding: 0; list-style: none; font-size: 11.5px; color: var(--faint); flex: none; }
+.ship-track li { display: inline-flex; align-items: center; gap: 4px; transition: color 0.25s; }
+.ship-track li + li::before { content: ''; width: 14px; height: 1.5px; margin-right: 2px; border-radius: 1px; background: var(--line-2); transition: background 0.3s; }
+.ship-track li.done::before, .ship-track li.now::before, .ship-track li.bad::before { background: var(--tone); }
+.ship-track i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background 0.25s, border-color 0.25s; }
+.ship-track i .i { width: 8px; height: 8px; color: #fff; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.25s var(--ease); }
+.ship-track li.done { color: var(--ink-2); }
+.ship-track li.done i { background: var(--good); border-color: var(--good); }
+.ship-track li.done i .i { opacity: 1; transform: none; }
+.ship-track li.now { color: var(--ink); font-weight: 500; }
+.ship-track li.now i { border-color: var(--tone); border-top-color: transparent; animation: spin 0.8s linear infinite; }
+.ship-track li.bad { color: var(--bad); font-weight: 500; }
+.ship-track li.bad i { background: var(--bad); border-color: var(--bad); }
+.ship-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tone), transparent) 0 0 / 40% 100% no-repeat; animation: ship-sweep 1.3s ease-in-out infinite; }
+.ship-run.failed .ship-bar, .ship-run.failed .ship-icon .i { animation: none; }
+.ship-run.failed .ship-bar { display: none; }
+.ship-run.failed .ship-icon { color: var(--bad); }
+.ship-run.failed { animation: nudge 0.4s ease; }
+.ship-err { font-weight: 400; color: var(--ink-2); }
+.ship-acts { display: inline-flex; gap: 2px; }
+.ship-acts .i { width: 13px; height: 13px; }
+.pr-strip.landed { animation: ship-land 0.9s var(--ease); }
+.pill.ship-pill { --tone: var(--accent); }
+.pill.ship-pill i { animation: pulse 1.1s ease-in-out infinite; }
+@keyframes ship-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
+@keyframes ship-fly { 50% { transform: translate(2px, -2px); } }
+@keyframes ship-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
+@keyframes ship-land { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 30%, transparent); transform: scale(1.015); } }
+@media (max-width: 640px) { .ship-track span { display: none; } }
+@media (prefers-reduced-motion: reduce) { .ship-run, .ship-run *, .pr-strip.landed { animation: none !important; } }

package/web/index.html

@@ -39,6 +39,7 @@
       <symbol id="i-dots" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="18" cy="12" r="1.6" fill="currentColor"/></symbol>
       <symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2" fill="none" stroke="currentColor" stroke-width="1.7"/></symbol>
       <symbol id="i-branch" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="6" cy="19" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="18" cy="7" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M6 7.2v9.6M18 9.2c0 5-12 3-12 7.6" fill="none" stroke="currentColor" stroke-width="1.7"/></symbol>
+      <symbol id="i-github" viewBox="0 0 24 24"><path d="M12 2.5a9.5 9.5 0 00-3 18.52c.48.09.65-.2.65-.46v-1.62c-2.64.57-3.2-1.27-3.2-1.27-.43-1.1-1.05-1.39-1.05-1.39-.86-.59.07-.58.07-.58.95.07 1.45.98 1.45.98.85 1.45 2.22 1.03 2.76.79.09-.61.33-1.03.6-1.27-2.1-.24-4.32-1.05-4.32-4.68 0-1.03.37-1.88.98-2.54-.1-.24-.42-1.2.09-2.5 0 0 .8-.26 2.61.97a9.1 9.1 0 014.76 0c1.81-1.23 2.61-.97 2.61-.97.51 1.3.19 2.26.09 2.5.61.66.98 1.51.98 2.54 0 3.64-2.22 4.44-4.34 4.67.34.3.64.88.64 1.77v2.63c0 .26.17.56.66.46A9.5 9.5 0 0012 2.5z" fill="currentColor"/></symbol>
       <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M12 11v6M12 7.5v.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
       <symbol id="i-warn" viewBox="0 0 24 24"><path d="M12 3.5l9.5 16.5h-19L12 3.5z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 10v4.5M12 17.2v.3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
       <symbol id="i-ask" viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 016.5 3h11A2.5 2.5 0 0120 5.5v8a2.5 2.5 0 01-2.5 2.5H10l-4.5 4v-4h0A1.5 1.5 0 014 14.5v-9z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M10 8.2a2 2 0 113 1.7c-.7.4-1 .8-1 1.6M12 13.2v.3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
@@ -102,13 +103,22 @@
       </button>
     </header>
     <div class="feed-wrap">
-      <div class="launch-slot" id="launchSlot"><section class="launcher card" id="launcher"></section></div>
+      <div class="launch-slot" id="launchSlot">
+        <!-- First paint, before the scripts load: the launcher's shape, and a box you can already type
+             in. renderLauncher() fills in the rest and keeps what was typed. -->
+        <section class="launcher card skel" id="launcher">
+          <div class="l-projects"><span class="l-in">in</span></div>
+          <textarea id="prompt" rows="2" spellcheck="false" autofocus placeholder="What should I go do? Paste screenshots, drop logs or videos…"></textarea>
+          <div class="l-bar"><span class="grow"></span><button class="send" tabindex="-1" aria-hidden="true"><svg class="i"><use href="#i-enter"/></svg></button></div>
+          <div class="l-recipes"></div>
+        </section>
+      </div>
       <div class="feed-head" id="feedHead"></div>
       <div class="feed" id="feed">
-        <section class="f-group needs" id="secNeeds"><h4>Needs you<span class="n"></span></h4><div class="f-list"></div></section>
-        <section class="f-group working" id="secWorking"><h4>Working<span class="n"></span></h4><div class="f-list"></div></section>
-        <section class="f-group done" id="secDone"><h4 class="toggle-done">Done<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
-        <section class="f-group done archived" id="secArchived"><h4 class="toggle-done">Archived<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
+        <section class="f-group needs" id="secNeeds" hidden><h4>Needs you<span class="n"></span></h4><div class="f-list"></div></section>
+        <section class="f-group working" id="secWorking" hidden><h4>Working<span class="n"></span></h4><div class="f-list"></div></section>
+        <section class="f-group done" id="secDone" hidden><h4 class="toggle-done">Done<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
+        <section class="f-group done archived" id="secArchived" hidden><h4 class="toggle-done">Archived<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
       </div>
       <div class="feed-empty" id="feedEmpty" hidden></div>
     </div>

package/web/js/app.js

@@ -7,7 +7,7 @@ import { api } from './core/api.js';
 import * as bus from './core/bus.js';
 import { $, $$ } from './core/dom.js';
 import { ago } from './core/format.js';
-import { S, save } from './core/state.js';
+import { S, save, setAgents } from './core/state.js';
 import { combo } from './ui/kbd.js';
 import { openAutomations } from './features/automations.js';
 import { openPalette } from './features/commands.js';
@@ -70,12 +70,23 @@ window.addEventListener('focus', () => {
   for (const id of S.open) if (S.sessions.get(id)?.unread) scheduleRefetch(id);
 });
 
+// The launcher paints as soon as config and machines are in (local, fast), from the last harness
+// list seen. Detecting harnesses can take seconds on a cold start: it repaints the launcher when
+// it lands, only if the list changed.
 (async () => {
-  [S.agents] = await Promise.all([api('/agents').catch(() => []), loadConfig(), loadSessions(), loadMachines()]);
+  const agents = api('/agents').catch(() => null);
+  const sessions = loadSessions();
+  await Promise.all([loadConfig(), loadMachines()]);
   renderLauncher();
   bus.emit('agents');
+  $('#prompt')?.focus();
+  await sessions;
   connect();
   route();
-  $('#prompt')?.focus();
   telemetryNotice();
+  const list = await agents;
+  if (!list || JSON.stringify(list) === JSON.stringify(S.agents)) return;
+  setAgents(list);
+  renderLauncher();
+  bus.emit('agents');
 })();

package/web/js/core/state.js

@@ -22,7 +22,7 @@ export const S = {
   tasks: new Map(), // compare task key -> { card, head, runs, lead }
   focus: null, // id of the keyboard-focused item
   config: { defaults: {}, projects: [] },
-  agents: [],
+  agents: load('wisp.agents', []), // the last list seen, so the launcher paints before detection answers
   machines: [], // other computers over SSH: GET /api/machines, kept fresh by the 'machines' event
   filter: load('wisp.filter', 'all'),
   showDone: load('wisp.showDone', false),
@@ -32,6 +32,7 @@ export const S = {
   replyRunners: new Map(), // session id → { agent, model, effort } its next follow-up switches to
 };
 export const saveOpen = () => save('wisp.open', [...S.open]);
+export const setAgents = (list) => ((S.agents = list), save('wisp.agents', list));
 
 // 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.

package/web/js/features/clones.js

@@ -0,0 +1,79 @@
+// Repos being cloned. Clone in the Projects dialog hands the repo off here and the dialog closes:
+// the launcher picks it at once (a spinner chip) so you can write the task while it clones, and a
+// launch into it waits for the clone. Success swaps the chip for the real project.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { launch, S, save, saveLaunch } from '../core/state.js';
+import { toast } from '../ui/toast.js';
+import { renderFeed } from './feed.js';
+import { renderLaunchChips } from './launcher.js';
+import { loadConfig } from './live.js';
+import { machineById, projectById } from './places.js';
+import { renderProjects } from './projects.js';
+
+// A pasted repo URL, which the server clones (server/git.js parseRepo has the full rules), vs a path.
+export const isRepo = (s) => /^((https?|ssh|git):\/\/|[\w.-]+@[\w.-]+:|(www\.)?github\.com\/)/i.test(String(s).trim());
+export const repoLabel = (s) =>
+  String(s)
+    .trim()
+    .replace(/^((https?|ssh):\/\/)?([\w.-]+@)?(www\.)?github\.com[/:]([^/]+\/[^/#?]+).*$/i, '$5')
+    .replace(/\.git$|\/+$/i, '');
+export const repoName = (s) => repoLabel(s).split(/[/:]/).pop();
+
+export const clones = []; // { id, url, where, name, label, promise }
+export const cloneById = (id) => clones.find((c) => c.id === id);
+let seq = 0;
+
+const tilde = (p) => (S.config.home && p.startsWith(S.config.home) ? `~${p.slice(S.config.home.length)}` : p);
+
+// Start cloning `url` on `where` (a machine id, or null for this computer) and point the launcher
+// at it. job.promise resolves with the project, or rejects (already toasted) and the launcher
+// goes back to what it had picked.
+export function startClone(url, where = null) {
+  const k = where || '';
+  const prev = launch.picks[k];
+  const job = { id: `clone-${++seq}`, url, where: where || null, name: repoName(url), label: repoLabel(url) };
+  clones.push(job);
+  // A feed filtered to another project would pull the launcher back to that project.
+  if (S.filter !== 'all') {
+    S.filter = 'all';
+    save('wisp.filter', S.filter);
+    renderFeed();
+    renderProjects();
+  }
+  launch.picks[k] = job.id;
+  if (!launch.where.includes(k)) launch.where = [k];
+  if (k === launch.where[0]) launch.project = job.id;
+  const repick = (id) => {
+    if (launch.picks[k] !== job.id) return; // picked something else meanwhile
+    launch.picks[k] = id;
+    if (k === launch.where[0]) launch.project = id;
+    saveLaunch();
+  };
+  const on = where ? ` on ${esc(machineById(where)?.name || 'the machine')}` : '';
+  job.promise = api('/projects', { method: 'POST', body: { repo: url, ...(where && { machine: where }) } })
+    .then(
+      async (proj) => {
+        await loadConfig();
+        repick(proj.id);
+        toast(proj.cloned?.existed ? `<b>${esc(proj.name)}</b> was already cloned at ${esc(tilde(proj.path))}: added it` : `Cloned <b>${esc(proj.name)}</b>${on}${where ? '' : ` into ${esc(tilde(proj.path))}`}`);
+        return proj;
+      },
+      (err) => {
+        repick(projectById(prev) ? prev : null);
+        toast(esc(err.message), { tone: 'bad', timeout: 8000 });
+        throw Object.assign(err, { shown: true });
+      },
+    )
+    .finally(() => {
+      clones.splice(clones.indexOf(job), 1);
+      renderLaunchChips();
+      bus.emit('clones');
+    });
+  job.promise.catch(() => {}); // the launcher or dialog may not be waiting on it
+  renderLaunchChips();
+  bus.emit('clones');
+  return job;
+}

package/web/js/features/feed.js

@@ -13,7 +13,7 @@ import { machinePill } from './places.js';
 import { renderProjects } from './projects.js';
 import { agentName, effortLabel, harnessLogo, modelBadge } from './runners.js';
 import { scrollByPx, stage, topInset } from './scroll.js';
-import { prPill } from './ship.js';
+import { prPill, shipPill } from './ship.js';
 import { teamStack } from './team.js';
 import { renderBody } from './turns.js';
 
@@ -208,7 +208,7 @@ function renderHead(n, s) {
     <span class="it-side">
       ${pill}
       ${s.queued ? `<span class="q-queued" title="Follow-ups queued">+${s.queued}</span>` : ''}
-      ${s.pr ? prPill(s.pr) : ''}
+      ${s.shipping ? shipPill(s) : s.pr ? prPill(s.pr, s.conflictFix) : ''}
       ${s.team?.length ? teamStack(s.agent, s.team) : modelBadge(s.agent, s.model, s.effort, s.route?.switched ? null : s.route)}
       ${s.machine ? machinePill(s.machine) : ''}
       <span class="q-proj">${esc(s.project)}</span>
@@ -233,7 +233,7 @@ function renderRunHead(n, s, { open, live, pill }) {
       ${runsOf(s).some((r) => (r.machine?.id || '') !== (s.machine?.id || '')) ? `${s.machine ? machinePill(s.machine) : `<span class="q-machine" title="Runs on this computer">${icon('laptop')}<span>This computer</span></span>`}<span class="q-proj">${esc(s.project)}</span>` : ''}
       ${live && s.state === 'running' ? `<span class="pill st-running"><i></i>Working</span>` : pill}
       ${s.queued ? `<span class="q-queued" title="Follow-ups queued">+${s.queued}</span>` : ''}
-      ${s.pr ? prPill(s.pr) : ''}
+      ${s.shipping ? shipPill(s) : s.pr ? prPill(s.pr, s.conflictFix) : ''}
       <span class="q-time">${ago(s.updatedAt)}</span>
       ${icon('chevron', 'chev')}
     </span>`;