wisp-agents 0.21.0 → 0.22.0

package/server/services/places.js

@@ -0,0 +1,150 @@
+// Places: this computer and the machines. A project is one repo that every place can run, so a
+// task launched on a machine that has no checkout of it yet gets one first: a clone of the same
+// repo that's already there (registered or in the usual folders), else a fresh clone of its
+// origin. The checkout is remembered as the project's copy on that machine (store.setCopy).
+
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { cloneRepo, git, repoOf, sameRepo } from '../git.js';
+import { HERE } from '../store.js';
+import { bad, expand } from '../util.js';
+
+const CLONE_TIMEOUT_MS = 10 * 60_000;
+
+// Where people keep their repos, for one-click "add project".
+export const REPO_ROOTS = ['code', 'Code', 'dev', 'Developer', 'projects', 'Projects', 'src', 'repos', 'work', 'git', 'GitHub', 'Documents', 'Downloads', 'Desktop'];
+
+// Where a pasted repo URL is cloned: defaults.cloneDir, else the first usual repo folder that
+// exists (not Documents/Downloads/Desktop), else ~/code.
+export function cloneRoot(config) {
+  if (config.defaults?.cloneDir) return expand(config.defaults.cloneDir);
+  const dir = REPO_ROOTS.slice(0, -3)
+    .map((r) => path.join(os.homedir(), r))
+    .find((d) => fs.existsSync(d) && fs.statSync(d).isDirectory());
+  return dir || path.join(os.homedir(), 'code');
+}
+
+// Git repos up to two levels under the usual folders, newest first, skipping known ones.
+export function discoverRepos(known = new Set()) {
+  const found = [];
+  const walk = (dir, depth) => {
+    if (found.length >= 60) return;
+    let entries;
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    if (entries.some((e) => e.name === '.git')) {
+      if (!known.has(dir)) found.push({ path: dir, name: path.basename(dir), mtime: fs.statSync(dir).mtimeMs });
+      return;
+    }
+    if (depth <= 0) return;
+    for (const e of entries) if (e.isDirectory() && !e.name.startsWith('.') && e.name !== 'node_modules') walk(path.join(dir, e.name), depth - 1);
+  };
+  for (const r of REPO_ROOTS) walk(path.join(os.homedir(), r), 2);
+  return found.sort((a, b) => b.mtime - a.mtime).slice(0, 24);
+}
+
+export const originAt = (dir) => git(dir, ['remote', 'get-url', 'origin'], { timeout: 5000 }).catch(() => '');
+
+// A checkout of `url` on this computer: a project (or copy) here that is that repo, else one in
+// the usual folders, else a fresh clone into the clone folder. Resolves { dir, existed }.
+export async function checkout(store, url) {
+  const repo = repoOf(url);
+  if (!repo) throw bad(`Not a repo URL: ${url}`);
+  const mine = store.config.projects.map((p) => [p, store.pathAt(p)]).filter(([, dir]) => dir && fs.existsSync(dir));
+  for (const [p, dir] of mine) if (sameRepo(p.repo || (await originAt(dir)), url)) return { dir, existed: true };
+  const found = discoverRepos();
+  const origins = await Promise.all(found.map((f) => originAt(f.path)));
+  const hit = found.find((f, i) => sameRepo(origins[i], url));
+  if (hit) return { dir: hit.path, existed: true };
+  return cloneRepo(repo, cloneRoot(store.config), { timeout: CLONE_TIMEOUT_MS });
+}
+
+export function createPlaces(app) {
+  const { store, machines } = app;
+  const placeName = (mid) => (mid ? machines.get(mid).name : 'this computer');
+  const inflight = new Map(); // `${project}@${place}` -> promise, so two launches clone once
+
+  // The project's origin URL, asked of whichever place has a checkout; kept on the project.
+  async function originOf(p) {
+    if (p.repo) return p.repo;
+    const places = [p.machine || null, ...Object.keys(p.copies || {}).map((k) => (k === HERE ? null : k))];
+    for (const mid of places) {
+      const dir = store.pathAt(p, mid);
+      let url = '';
+      if (!mid) url = fs.existsSync(dir) ? await originAt(dir) : '';
+      else if (machines.isOnline(mid)) url = (await machines.json(mid, 'GET', `/projects/origin?path=${encodeURIComponent(dir)}`).catch(() => null))?.origin || '';
+      if (url) {
+        p.repo = url;
+        store.saveConfig();
+        return url;
+      }
+    }
+    return '';
+  }
+
+  async function remoteCheckout(mid, repo, name) {
+    try {
+      const r = await machines.json(mid, 'POST', '/projects/checkout', { repo, name }, { timeout: CLONE_TIMEOUT_MS });
+      return { dir: r.path, existed: !!r.existed };
+    } catch (err) {
+      if (err.status !== 404) throw err;
+    }
+    // An older wisp there: its POST /projects clones the repo (or reuses a clone of it).
+    const r = await machines.json(mid, 'POST', '/projects', { repo }, { timeout: CLONE_TIMEOUT_MS });
+    return { dir: r.path, existed: !!r.cloned?.existed };
+  }
+
+  // The project's folder on `mid` (null = this computer). fresh: the one wisp knew is gone.
+  async function ensureAt(p, mid = null, { fresh = false } = {}) {
+    const known = store.pathAt(p, mid);
+    if (known && !fresh && (mid || fs.existsSync(known))) return known;
+    const key = `${p.id}@${mid || HERE}`;
+    if (!inflight.has(key)) {
+      const job = (async () => {
+        const repo = await originOf(p);
+        if (!repo) throw bad(`${p.name} has no git remote (origin) to clone from, so wisp can’t set it up on ${placeName(mid)}. Push it to a remote first, or add its folder there in Projects.`, 409);
+        const out = mid ? await remoteCheckout(mid, repo, p.name) : await checkout(store, repo);
+        store.setCopy(p, mid, out.dir);
+        app.configChanged();
+        return out.dir;
+      })().finally(() => inflight.delete(key));
+      inflight.set(key, job);
+    }
+    return inflight.get(key);
+  }
+
+  // A task's folder, for running it on `mid`: the same folder in that place's checkout of its
+  // project. Folders that are no project's (and ones already on that place) stay as they are.
+  async function dirAt(dir, mid = null) {
+    if (!dir) return dir;
+    if (!mid) dir = expand(dir);
+    if (store.projectFor(dir, mid)) return dir;
+    for (const from of [null, ...machines.list.map((m) => m.id)]) {
+      if (from === (mid || null)) continue;
+      const p = store.projectFor(dir, from);
+      if (!p) continue;
+      // A folder that's here too (the same layout on both computers) is used as it is, unless the
+      // project already has its own checkout here.
+      if (!mid && fs.existsSync(dir) && !store.pathAt(p)) return dir;
+      const rest = dir.slice(store.pathAt(p, from).length).split(/[\\/]/).filter(Boolean);
+      const there = await ensureAt(p, mid);
+      return rest.length ? (mid ? path.posix : path).join(there, ...rest) : there;
+    }
+    return dir;
+  }
+
+  // A launch body with its folders (cwd, also) moved to `mid`.
+  async function placeBody(body, mid = null) {
+    if (body.scratch === true) return body;
+    const out = { ...body };
+    if (body.cwd) out.cwd = await dirAt(String(body.cwd), mid);
+    if (Array.isArray(body.also)) out.also = await Promise.all(body.also.map((x) => (typeof x === 'string' ? dirAt(x, mid) : x?.cwd ? dirAt(String(x.cwd), mid) : x)));
+    return out;
+  }
+
+  return { originOf, ensureAt, dirAt, placeBody, placeName };
+}

package/server/services/uploads.js

@@ -31,6 +31,28 @@ export class Uploads {
     return Array.isArray(ids) ? ids.map((i) => this.byId.get(i)).filter(Boolean) : [];
   }
 
+  // A file to fill in here (a moved task's bundle): its path, and add() once it's written.
+  reserve(name) {
+    const id = newId();
+    const file = path.join(this.dir, `${id}-${name}`);
+    return { id, file, add: () => this.#record({ id, name, size: fs.statSync(file).size, mime: 'application/octet-stream', path: file }) };
+  }
+
+  remove(id) {
+    const u = this.byId.get(id);
+    if (!u) return false;
+    this.byId.delete(id);
+    fs.rmSync(u.path, { force: true });
+    fs.rmSync(path.join(this.dir, `${id}.json`), { force: true });
+    return true;
+  }
+
+  #record(meta) {
+    this.byId.set(meta.id, meta);
+    fs.writeFileSync(path.join(this.dir, `${meta.id}.json`), JSON.stringify(meta));
+    return meta;
+  }
+
   async receive(req, { name, type }) {
     name = path.basename(name || 'file').replace(/[^\w.\- ]+/g, '_').slice(-120) || 'file';
     const id = newId();
@@ -51,9 +73,6 @@ export class Uploads {
       out.on('finish', resolve);
       out.on('error', reject);
     });
-    const meta = { id, name, size, mime: type || MIME[path.extname(name).toLowerCase()] || 'application/octet-stream', path: file };
-    this.byId.set(id, meta);
-    fs.writeFileSync(path.join(this.dir, `${id}.json`), JSON.stringify(meta));
-    return meta;
+    return this.#record({ id, name, size, mime: type || MIME[path.extname(name).toLowerCase()] || 'application/octet-stream', path: file });
   }
 }

package/server/store.js

@@ -4,11 +4,12 @@ import fs from 'node:fs';
 import path from 'node:path';
 import os from 'node:os';
 import { randomUUID } from 'node:crypto';
+import { sameRepo } from './git.js';
 import { parsePresentation } from './protocol.js';
 import { writeJsonAtomic } from './util.js';
 
 const DEFAULT_CONFIG = {
-  projects: [], // [{ id, name, path, color, addedAt, machine? }]; machine: the server/machines.js id it lives on
+  projects: [], // [{ id, name, path, color, addedAt, machine?, repo?, copies? }]: see projectFor()
   defaults: { agent: 'auto', mode: 'auto', model: '', effort: '' }, // agent auto: wisp picks harness and model (server/router.js)
   recipes: [], // saved prompts with {params}: server/recipes.js
   triggers: [], // schedules and GitHub watchers: server/triggers.js
@@ -20,6 +21,9 @@ const DEFAULT_CONFIG = {
 const IMAGE_EXT = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg']);
 const MAX_KEPT_IMAGE = 25 * 1024 * 1024;
 
+// The key for this computer in a project's copies (machine ids are 6 hex characters).
+export const HERE = 'here';
+
 export const PROJECT_COLORS = ['violet', 'teal', 'amber', 'rose', 'sky', 'lime', 'orange', 'indigo'];
 
 export class Store {
@@ -85,26 +89,47 @@ export class Store {
   }
 
   // --- projects: plain folders, matched to sessions by path prefix ---
+  //
+  // A project is one repo, and every place can run it. path (on machine, null = this computer) is
+  // where it was added; copies are its checkouts elsewhere, which wisp found or cloned there the
+  // first time a task ran there: { [machine id, or HERE]: path }. repo: its origin URL, once known.
+
+  // The project's folder on `machine` (null = this computer), or null when it has none there yet.
+  pathAt(p, machine = null) {
+    return (p.machine || null) === (machine || null) ? p.path : p.copies?.[machine || HERE] || null;
+  }
 
-  // machine: a project on another computer (paths there are POSIX); null = this one.
+  // machine: a folder 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)
-      if ((p.machine || null) === machine && (cwd === p.path || cwd.startsWith(p.path + sep)) && (!best || p.path.length > best.path.length)) best = p;
+    let len = 0;
+    for (const p of this.config.projects) {
+      const dir = this.pathAt(p, machine);
+      if (dir && (cwd === dir || cwd.startsWith(dir + sep)) && dir.length > len) [best, len] = [p, dir.length];
+    }
     return best;
   }
 
-  addProject(dir, { name, color, machine } = {}) {
-    const existing = this.config.projects.find((p) => p.path === dir && (p.machine || null) === (machine || null));
+  // repo: the folder's origin URL. A folder of a repo that's already a project becomes that
+  // project's copy on this place, so the same repo is one project wherever it's checked out.
+  addProject(dir, { name, color, machine, repo } = {}) {
+    const existing = this.config.projects.find((p) => this.pathAt(p, machine) === dir);
     if (existing) return existing;
+    const same = repo && this.config.projects.find((p) => p.repo && sameRepo(p.repo, repo) && !this.pathAt(p, machine));
+    if (same) {
+      (same.copies ||= {})[machine || HERE] = dir;
+      this.saveConfig();
+      return same;
+    }
     const used = new Set(this.config.projects.map((p) => p.color));
     const project = {
       id: Math.random().toString(36).slice(2, 10),
       name: name || (machine ? path.posix.basename(dir) : path.basename(dir)) || dir,
       path: dir,
       ...(machine && { machine }),
+      ...(repo && { repo }),
       color: color || PROJECT_COLORS.find((c) => !used.has(c)) || PROJECT_COLORS[this.config.projects.length % PROJECT_COLORS.length],
       addedAt: Date.now(),
     };
@@ -113,6 +138,14 @@ export class Store {
     return project;
   }
 
+  // A checkout of the project on `machine`, found or cloned there (services/places.js).
+  setCopy(p, machine, dir) {
+    if (this.pathAt(p, machine) === dir) return;
+    if ((p.machine || null) === (machine || null)) p.path = dir;
+    else (p.copies ||= {})[machine || HERE] = dir;
+    this.saveConfig();
+  }
+
   // Folder-less tasks run in a throwaway directory of their own under ~/.wisp/scratch.
   scratchDir(id) {
     const dir = path.join(this.home, 'scratch', id);

package/skills/wisp/SKILL.md

@@ -37,6 +37,7 @@ wisp wait <id>            # block until it finishes or asks a question; prints t
 wisp show <id>            # current state + latest presentation as markdown
 wisp ls --state running,waiting
 wisp reply <id> "also cover the empty-list case"   # follow-up; answers a pending question too
+wisp btw <id> "did you touch the migrations?"       # side question: answered without interrupting the run
 wisp stop <id>
 ```
 

package/web/css/blocks.css

@@ -412,6 +412,8 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .tests-rerun-out { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--term-bg); color: var(--term-ink); }
 .tests-rerun-out pre { margin: 0; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; color: #b4b4b0; }
 .rev-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; font: 500 11px var(--sans); background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); }
+.t-moved { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--faint); }
+.t-moved .i { width: 11px; height: 11px; }
 .cp-sha { font: 500 11px var(--mono); color: var(--faint); padding: 1px 5px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
 .b-diff.is-reverted .diff-scroll { opacity: 0.55; }
 .b-diff.is-reverted .path .base, .b-files li.is-reverted .path .base { text-decoration: line-through; color: var(--muted); }

package/web/css/composer.css

@@ -1,6 +1,6 @@
 /* ---------- per-item composer ---------- */
 .composer {
-  padding: 6px 8px 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
+  position: relative; padding: 6px 8px 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
   transition: box-shadow 0.15s, border-color 0.15s;
 }
 .composer:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 0 0 3px var(--accent-soft); }
@@ -32,6 +32,22 @@
 .c-queue.on { color: var(--ink); background: var(--bg-2); }
 .c-done:hover { color: var(--good); }
 
+/* "/btw …" in the box: a side question. The pickers are for the next follow-up, so they step back. */
+.composer.is-btw .c-mode, .composer.is-btw .c-runner, .composer.is-btw .c-place, .composer.is-btw .c-queue { opacity: 0.35; }
+.c-side { font-weight: 600; color: var(--accent-ink); }
+
+/* the / menu (features/slash.js): opens above the box, like the box's own popovers */
+.slash-menu {
+  position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 30; min-width: 280px; max-width: calc(100% - 16px); padding: 5px;
+  border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: pop 0.18s var(--ease);
+}
+.slash-item { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 8px; text-align: left; font-size: 13px; color: var(--ink-2); }
+.slash-item b { font: 600 12.5px var(--mono); color: var(--ink); }
+.slash-args { font: 12px var(--mono); color: var(--faint); }
+.slash-hint { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.slash-item.on, .slash-item:hover { background: var(--bg-2); }
+.slash-item.on b { color: var(--accent-ink); }
+
 /* attachments tray */
 .tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
 .att {
@@ -59,6 +75,12 @@
 .c-runner.changed { padding-right: 8px; }
 .c-runner.changed .rb-logo { margin-right: 4px; }
 .c-runner:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }
+/* where the next follow-up runs: a quiet icon, the computer's name once it's switched */
+.c-place { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 7px; border-radius: 8px; font-size: 12px; color: var(--muted); transition: background 0.15s, color 0.15s; }
+.c-place .i { width: 15px; height: 15px; }
+.c-place:hover, .c-place[aria-expanded='true'], .c-place.changed { background: var(--bg-2); color: var(--ink); }
+.c-place.changed { padding-right: 9px; color: var(--accent); }
+.c-place:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }
 .cr-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
 
 /* ---------- task mentions (features/mentions.js) ---------- */

package/web/css/feed.css

@@ -26,7 +26,8 @@
 .toggle-done { cursor: pointer; user-select: none; }
 .toggle-done:hover { color: var(--ink-2); }
 .toggle-done .chev { width: 12px; height: 12px; transition: transform 0.2s; }
-.f-group.done:not(.collapsed) .chev { transform: rotate(90deg); }
+/* Only the group's own heading: the cards inside have chevrons of their own. */
+.f-group.done:not(.collapsed) > .toggle-done .chev { transform: rotate(90deg); }
 /* Folded groups are just a row of headings: stack them tight instead of leaving a section gap each. */
 .f-group.collapsed { margin-bottom: 2px; }
 .f-group.collapsed h4 { margin: 0; }
@@ -184,8 +185,55 @@
 .log { max-height: 340px; overflow-y: auto; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
 .w-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
 .w-queued { font-size: 12px; color: var(--accent-ink); font-weight: 500; }
+/* the /btw tip (features/btw.js): until it's been used once */
+.w-tip { display: inline-flex; align-items: center; gap: 2px; min-width: 0; animation: fade-in 0.4s 0.6s var(--ease) both; }
+.w-tip-go { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
+.w-tip-go:hover { color: var(--ink); }
+.w-tip-k { color: var(--faint); }
+.w-tip-go code { flex: none; padding: 1px 5px; border-radius: 5px; background: var(--bg-2); font: 500 11.5px var(--mono); color: var(--ink-2); }
+.w-tip-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.w-tip-x { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--faint); opacity: 0; transition: opacity 0.15s; }
+.w-tip-x .i { width: 11px; height: 11px; }
+.w-tip:hover .w-tip-x, .w-tip-x:focus-visible { opacity: 1; }
+.w-tip-x:hover { background: var(--bg-2); color: var(--ink); }
+@media (hover: none) { .w-tip-x { opacity: 1; } }
+.w-actions > .peek { flex: none; white-space: nowrap; }
+/* No room beside Show all activity and Stop on a phone: the tip gets its own line under them. */
+@media (max-width: 720px) {
+  .w-actions:has(.w-tip) { flex-wrap: wrap; row-gap: 8px; }
+  .w-tip { order: 1; flex-basis: 100%; }
+}
 @keyframes tick-in { from { opacity: 0; transform: translateY(-4px); } }
 
+/* /btw side questions (features/btw.js): plain hairline cards on the turn they were asked during */
+.btw-list { display: grid; gap: 8px; margin-top: 14px; }
+.btw-list:empty { display: none; }
+.btw { position: relative; padding: 10px 40px 11px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
+.btw.new { animation: rise 0.35s var(--ease) both; }
+.btw.landed > :is(.btw-a, .btw-err) { animation: fade-in 0.4s var(--ease) both; }
+.btw-q { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 20px; color: var(--ink); }
+.btw-tag {
+  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 4px; border-radius: 5px; cursor: default;
+  font: 600 11px/18px var(--sans); color: var(--accent-ink); background: var(--accent-soft); align-self: flex-start; margin-top: 1px;
+}
+.btw-tag .i { width: 12px; height: 12px; }
+.btw-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 500; }
+.btw-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.btw-a { margin-top: 6px; font-size: 13.5px; }
+.btw-a p, .btw-a ul, .btw-a ol, .btw-a pre { margin-bottom: 8px; }
+.btw-wait { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
+.btw-wait .elapsed { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
+.btw-dots { display: inline-flex; gap: 3px; }
+.btw-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
+.btw-dots i:nth-child(2) { animation-delay: 0.2s; }
+.btw-dots i:nth-child(3) { animation-delay: 0.4s; }
+.btw-err { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--bad); }
+.btw-err .i { flex: none; width: 13px; height: 13px; translate: 0 2px; }
+.btw-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 7px; color: var(--faint); opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
+.btw-x .i { width: 12px; height: 12px; }
+.btw:hover .btw-x, .btw-x:focus-visible, .btw.st-running .btw-x { opacity: 1; }
+@media (hover: none) { .btw-x { opacity: 1; } }
+
 /* ask card (mid-run question) */
 .ask-card, .b-question {
   position: relative; padding: 16px 18px; border-radius: var(--radius); margin: 4px 0 14px;

package/web/css/machines.css

@@ -38,6 +38,10 @@
 .wm-row:hover .wm-only { opacity: 1; }
 .wm-only:hover { background: var(--bg-2); color: var(--ink); }
 .wm-sep { height: 1px; margin: 5px 4px; background: var(--line); }
+.wm-note { margin: 0 10px 6px; max-width: 300px; font-size: 12px; line-height: 1.4; color: var(--muted); }
+.wm-note.warn { color: var(--warn); }
+.place-menu .wm-check { border-radius: 50%; }
+.place-menu .wm-row[disabled] { opacity: 0.45; cursor: default; }
 .p-chip .p-where { width: 11px; height: 11px; color: var(--muted); }
 .projects-modal .where { margin-bottom: 12px; }
 .projects-modal .where .i { width: 13px; height: 13px; color: var(--muted); }

package/web/css/modals.css

@@ -22,6 +22,21 @@
 .rr-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 6px; }
 .rr-file { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 12px; color: var(--ink-2); background: var(--bg-2); }
 .rr-file .i { width: 12px; height: 12px; color: var(--muted); }
+/* the bar never pushes Rerun out of the box: the harness name gives way first (the logo still says
+   which), then the model; on a narrow dialog the mode and place labels fold to their icons */
+.rerun-modal { width: min(660px, 100%); }
+.rr-box { container: rerun / inline-size; }
+.rr-box .l-bar > .runner-btn { flex: 0 1 auto; min-width: 0; overflow: hidden; }
+.rr-box .runner-btn :is(.rb-logo, .rb-e, .chev) { flex: none; }
+.rr-box .runner-btn .rb-h { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rr-box .runner-btn .rb-m { flex: 0 1 auto; min-width: 0; }
+.rr-box .where-btn span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@container rerun (max-width: 520px) {
+  .rr-box .l-bar :is(.mode-btn, .where-btn) span, .rr-box .runner-btn .rb-h { display: none; }
+  .rr-box .runner-btn .rb-m { margin-left: 0; }
+  .rr-box .runner-btn .rb-m::before { display: none; }
+}
+@container rerun (max-width: 400px) { .rr-box .runner-btn :is(.rb-m, .chev) { display: none; } }
 .overlay:not([hidden]) ~ :is(.picker, .menu) { z-index: 55; }
 .add-row { display: flex; gap: 8px; }
 .path-input { position: relative; flex: 1; }
@@ -47,6 +62,10 @@
 .discover h4 .i { width: 14px; height: 14px; }
 .discover h4 .muted { font-weight: 400; }
 .prow.cloning .ppath { color: var(--muted); }
+/* Where a project is checked out: one quiet tag per place. */
+.ppath:has(.pplace) { display: flex; gap: 8px; font-family: inherit; }
+.pplace { display: inline-flex; align-items: center; gap: 4px; }
+.pplace .ic { width: 11px; height: 11px; }
 .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; }

package/web/css/ship.css

@@ -44,6 +44,8 @@
 .it-meta .m.branch { font: 11px var(--mono); color: var(--ink-2); }
 .it-meta .m.also { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
 .it-meta .m .i { width: 12px; height: 12px; flex: none; color: var(--faint); }
+.it-meta .m.moved-to { color: var(--accent-ink); cursor: pointer; }
+.it-meta .m.moved-to:hover { text-decoration: underline; }
 .it-meta .m.m-plan, .it-meta .m.m-plan .i { color: var(--accent-ink); }
 .it-meta .m.m-auto, .it-meta .m.m-auto .i { color: var(--warn); }
 

package/web/css/transcript.css

@@ -0,0 +1,115 @@
+/* ---------- full transcript (features/transcript.js) ----------
+   A timeline under the prompt: a hairline rail with each step's icon on it, the agent's messages as
+   prose, and the presentation after the rail ends. */
+
+.ghost.tx-toggle.on { color: var(--accent-ink); background: var(--accent-soft); }
+
+.tx { display: flex; flex-direction: column; }
+.tx-head { display: flex; align-items: center; gap: 6px; min-height: 22px; margin: -6px 0 8px; font-size: 12px; color: var(--faint); white-space: nowrap; }
+.tx-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--muted); }
+.tx-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.tx-title .i { width: 14px; height: 14px; }
+.tx-title + .tx-count::before { content: '·'; margin-right: 6px; }
+.tx-jump { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
+.tx-jump .i { width: 12px; height: 12px; transform: rotate(90deg); }
+
+.tx-list { position: relative; list-style: none; margin: 0 0 18px; padding: 0; }
+.tx-list::before { content: ''; position: absolute; left: 11.5px; top: 12px; bottom: 15px; width: 1px; background: var(--line-2); }
+/* Mid-run the rail fades out into the working panel: more is coming. */
+.tx.live .tx-list { margin-bottom: 10px; }
+.tx.live .tx-list::before { bottom: -10px; background: linear-gradient(var(--line-2) calc(100% - 28px), transparent); }
+
+.tx-step, .tx-fold, .tx-end, .tx-msg { position: relative; padding-left: 28px; }
+.tx-ic {
+  position: absolute; left: 2px; top: 5px; width: 20px; height: 20px; display: grid; place-items: center;
+  border-radius: 50%; background: var(--surface); color: var(--faint);
+}
+.tx-ic .i { width: 14px; height: 14px; }
+
+/* a step: one line, opening to its command and output, its diff, or its error */
+.tx-row {
+  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 30px; padding: 4px 8px;
+  border-radius: 7px; font-size: 13px; color: var(--ink-2); text-align: left; outline: 0;
+}
+.tx-row[role='button'] { cursor: pointer; transition: background 0.15s, color 0.15s; }
+.tx-row[role='button']:hover, .tx-row[role='button']:focus-visible, .tx-step.open > .tx-row { background: var(--bg-2); color: var(--ink); }
+.tx-row[role='button']:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
+/* Both give way on a narrow row, the command three times faster. (Shrink factors that sum under 1
+   would leave part of the overflow in place.) */
+.tx-label { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tx-cmd { flex: 0 3 auto; min-width: 0; font: 12px/1.4 var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tx-row .nums { margin-left: auto; }
+.tx-t { margin-left: auto; flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.15s; }
+.tx-row .nums + .tx-t { margin-left: 0; }
+.tx-step:hover .tx-t, .tx-msg:hover .tx-t, .tx-step.open .tx-t { opacity: 1; }
+.tx-open {
+  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: -2px -4px -2px 0; border-radius: 6px;
+  color: var(--faint); opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+.tx-open .i { width: 13px; height: 13px; }
+.tx-step:hover .tx-open, .tx-open:focus-visible { opacity: 1; }
+.tx-open:hover { color: var(--ink); background: var(--surface); }
+.tx-row .chev { flex: none; width: 12px; height: 12px; color: var(--faint); transition: transform 0.2s var(--ease); }
+.tx-step.open > .tx-row .chev { transform: rotate(90deg); }
+.tx-step.loading > .tx-row { opacity: 0.6; cursor: progress; }
+
+.tx-step.k-error .tx-ic, .tx-step.k-error .tx-label { color: var(--bad); }
+.tx-step:is(.k-ask, .k-wait) .tx-ic, .tx-step.k-ask .tx-label { color: var(--warn); }
+.tx-step.k-answer .tx-ic { color: var(--good); }
+.tx-step.by-wisp .tx-ic { color: var(--accent); }
+.tx-step.by-wisp .tx-label { color: var(--muted); }
+/* What you were asked and answered, and plan lines, read in full. */
+.tx-step:is(.k-ask, .k-answer, .k-plan, .k-check, .k-background, .by-wisp) .tx-label { white-space: normal; }
+
+.tx-more { margin: 2px 0 8px 8px; animation: rise 0.3s var(--ease); }
+.tx-out {
+  margin: 0; padding: 10px 12px; max-height: 340px; overflow: auto; border-radius: 8px;
+  background: var(--surface-2); border: 1px solid var(--line); font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word;
+}
+.tx-cmdline, .tx-res { display: block; }
+.tx-cmdline { color: var(--ink); }
+.tx-cmdline b { color: var(--faint); font-weight: 500; }
+.tx-res { color: var(--muted); }
+.tx-cmdline + .tx-res { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
+.tx-out.err { color: var(--bad); background: var(--del-bg); border-color: color-mix(in srgb, var(--bad) 22%, var(--line)); }
+.tx-none { margin: 0; font-size: 12.5px; color: var(--muted); }
+.tx-diff .presentation { gap: 8px; }
+.tx-diff .b-diff.bare { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
+
+/* a message: the agent's own words, on a dot of the rail */
+.tx-msg { margin: 8px 0 12px; padding-top: 2px; padding-right: 64px; }
+.tx-dot { position: absolute; left: 8px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
+.tx-msg .prose { padding-left: 8px; font-size: 14px; color: var(--ink); }
+.tx-msg .tx-t { position: absolute; right: 4px; top: 4px; }
+.tx-msg:first-child { margin-top: 0; }
+
+/* a long run of steps folds its middle */
+.tx-fold .tx-row { color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
+.tx-fold .tx-row:hover { background: var(--bg-2); color: var(--ink); }
+
+.tx-end { display: flex; align-items: center; min-height: 30px; padding-left: 36px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
+.tx-end .tx-ic { color: var(--good); }
+.tx-end.st-error .tx-ic { color: var(--bad); }
+.tx-end.st-stopped .tx-ic { color: var(--warn); }
+
+.tx-step.new, .tx-msg.new { animation: tick-in 0.45s var(--ease); }
+
+/* The working panel under a live transcript: status and Stop on one line, a question under them. */
+.w-panel.tx-panel { padding: 10px 14px; gap: 12px; }
+.tx-panel .w-orb { padding-top: 0; align-self: flex-start; }
+.tx-panel .w-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
+.tx-panel .w-status { grid-column: 1; grid-row: 1; flex-wrap: wrap; row-gap: 2px; margin: 0; }
+.tx-panel .w-status > * { white-space: nowrap; }
+.tx-panel .w-actions { grid-column: 2; grid-row: 1; margin: 0; }
+.tx-panel .w-body > :not(.w-status, .w-actions) { grid-column: 1 / -1; }
+.tx-panel .ask-slot:not(:empty) { margin-top: 10px; }
+
+@media (max-width: 720px) {
+  /* The /btw tip doesn't fit beside the status: the row with it and Stop goes under it. */
+  .tx-panel .w-body:has(.w-tip) { display: block; }
+  .tx-panel .w-body:has(.w-tip) .w-actions { margin-top: 8px; }
+  .tx-title { display: none; }
+  .tx-cmd { display: none; }
+  .tx-msg { padding-right: 8px; }
+  .tx-msg .tx-t { display: none; }
+}

package/web/index.html

@@ -22,6 +22,7 @@
   <link rel="stylesheet" href="/css/automations.css">
   <link rel="stylesheet" href="/css/subagents.css">
   <link rel="stylesheet" href="/css/auto.css">
+  <link rel="stylesheet" href="/css/transcript.css">
 </head>
 <body>
   <svg width="0" height="0" style="position:absolute" aria-hidden="true">
@@ -66,6 +67,7 @@
       <symbol id="i-stats" viewBox="0 0 24 24"><path d="M5 19V11M12 19V5M19 19v-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></symbol>
       <symbol id="i-rerun" viewBox="0 0 24 24"><path d="M19.5 12a7.5 7.5 0 11-1.8-4.9M20 4v4h-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></symbol>
       <symbol id="i-replay" viewBox="0 0 24 24"><path d="M4.5 12a7.5 7.5 0 101.8-4.9M4 4v4h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+      <symbol id="i-transcript" viewBox="0 0 24 24"><path d="M6 7.5v9" stroke="currentColor" stroke-width="1.3" stroke-dasharray="1.6 1.8" stroke-linecap="round"/><circle cx="6" cy="5.5" r="1.9" fill="currentColor"/><circle cx="6" cy="12" r="1.9" fill="currentColor"/><circle cx="6" cy="18.5" r="1.9" fill="currentColor"/><path d="M11 5.5h9M11 12h6.5M11 18.5h8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
       <symbol id="i-text" viewBox="0 0 24 24"><path d="M5 7h14M5 12h14M5 17h9" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
       <symbol id="i-back" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
       <symbol id="i-update" viewBox="0 0 24 24"><path d="M12 16V4m-5 5l5-5 5 5M5 20h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>

package/web/js/core/state.js

@@ -30,13 +30,14 @@ export const S = {
   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
+  replyPlaces: new Map(), // session id → the place ('' = this computer) its next follow-up moves it 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. A run can
-// work in more of that place's projects too (launch.also[place]): one agent, several folders.
+// all in the project picked (launch.picks['']; any project runs on any place), and show up as one
+// task. A run can work in more projects too (launch.also['']): one agent, several folders.
 export const launch = {
   project: load('wisp.launchProject', null), // the project picked in the first place
   where: load('wisp.launchWhere', ['']),