wisp-agents 0.20.0 → 0.22.0

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; }
@@ -78,6 +79,9 @@
   font-size: 11px; font-weight: 500; padding: 0 7px; border-radius: 5px; line-height: 19px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
   color: color-mix(in srgb, var(--pc) 65%, var(--ink)); background: color-mix(in srgb, var(--pc) 10%, transparent);
 }
+/* a task in several folders: the others after its own, each in its colour */
+.q-proj.multi { max-width: 180px; }
+.q-also { margin-left: 4px; color: color-mix(in srgb, var(--pc) 65%, var(--ink)); }
 .q-time { font-size: 11.5px; color: var(--faint); min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
 .q-queued { font-size: 11px; color: var(--accent-ink); font-weight: 600; }
 /* one-click done on collapsed review rows; revealed on hover/focus */
@@ -181,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/launcher.css

@@ -41,6 +41,18 @@
 .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; }
+/* one task, several folders: a small badge on a chip's corner adds it (+) or leaves it out (×) */
+.l-projects .lp-chip { position: relative; }
+.lp-also {
+  position: absolute; top: -6px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
+  background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); box-shadow: var(--shadow-1);
+  opacity: 0; transform: scale(0.6); transition: opacity 0.12s, transform 0.12s, color 0.12s, background 0.12s; pointer-events: none;
+}
+.lp-also .i { width: 10px; height: 10px; }
+.lp-chip:is(:hover, :focus-visible) .lp-also { opacity: 1; transform: none; pointer-events: auto; }
+.lp-also:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
+.lp-also.x:hover { background: var(--bad); border-color: var(--bad); }
+@media (hover: none) { .lp-also:not(.x) { opacity: 1; transform: none; pointer-events: auto; } }
 /* 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 */

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/palette.css

@@ -73,6 +73,12 @@
 .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; }
+/* the launcher's list: + adds a project to the task, ✓ shows it's in */
+.pm-also { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: -2px -4px -2px 0; border-radius: 6px; color: var(--faint); }
+.pm-also .i { width: 13px; height: 13px; }
+.pm-also:hover { color: var(--ink); background: var(--surface-2); }
+.pm-row.in .pm-also { color: var(--accent); }
+.pm-row.in .pm-name { font-weight: 500; color: var(--ink); }
 .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); }

package/web/css/ship.css

@@ -42,7 +42,10 @@
 .pill.st-running { --tone: var(--accent); }
 .it-meta .m.branch, .it-meta .m:has(> .i) { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .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); }
 
@@ -60,6 +63,14 @@
 .pr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; }
 .pr-strip.pr-pending .pr-dot { animation: pulse 1.4s ease-in-out infinite; }
 .pr-num { font-weight: 600; color: var(--ink); white-space: nowrap; }
+/* a task in several repos: their PRs after the first, each with its own tone */
+.pr-also { --tone: var(--good); display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 1px 7px; border-radius: 6px; font-weight: 500; color: var(--ink); white-space: nowrap; background: color-mix(in srgb, var(--tone) 10%, transparent); }
+.pr-also i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
+.pr-also:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); }
+.pr-also.pr-pending { --tone: var(--warn); }
+.pr-also.pr-fail { --tone: var(--bad); }
+.pr-also.pr-merged { --tone: #8250df; }
+.pr-also.pr-closed { --tone: var(--faint); }
 .pr-line { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pr-strip .ghost .i { width: 13px; height: 13px; }
 .pr-strip .pr-merge { color: var(--good); font-weight: 500; }
@@ -74,12 +85,15 @@
 .ship-route code { font: 12px var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--bg-2); }
 .ship-route .i { width: 13px; height: 13px; color: var(--faint); }
 .ship-route .muted { margin-left: auto; }
+.ship-route .ship-repo { font-weight: 600; color: var(--ink); }
+.ship-route + .ship-route { margin-top: -6px; }
 .ship-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
 .ship-field > span { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
 .ship-field select { width: 100%; }
 .ship-check { display: flex; margin-top: 10px; }
 .ship-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
 .ship-foot > .muted { margin-right: auto; }
+.ship-foot > .primary { flex: none; white-space: nowrap; }
 .ship-foot code { font-size: 11px; }
 .hint.bad { color: var(--bad); }
 

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,15 +30,18 @@ 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.
+// 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', ['']),
   picks: load('wisp.launchPicks', {}),
+  also: load('wisp.launchAlso', {}),
 };
-export const saveLaunch = () => (save('wisp.launchWhere', launch.where), save('wisp.launchPicks', launch.picks), save('wisp.launchProject', launch.project));
+export const saveLaunch = () => (save('wisp.launchWhere', launch.where), save('wisp.launchPicks', launch.picks), save('wisp.launchAlso', launch.also), save('wisp.launchProject', launch.project));

package/web/js/features/actions.js

@@ -17,7 +17,10 @@ import { collapse, expand, handOff, renderFeed, setFocus } from './feed.js';
 import { launchBehind } from './launcher.js';
 import { copyTaskId, mentionBox } from './mentions.js';
 import { runnerPicker } from './runner-picker.js';
-import { agentName, DEFAULT_MODE, effortsFor, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
+import { connectMachine } from './machines.js';
+import { placeMenu } from './place-menu.js';
+import { machineById, pathAt, placeName, projectById } from './places.js';
+import { agentById, agentName, DEFAULT_MODE, effortsFor, harnessesAt, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace } from './scroll.js';
 import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
 
@@ -221,15 +224,18 @@ export async function deleteSession(id) {
   });
 }
 
-// Launch the task again as a new session in the same folder: same prompt and attachments,
-// optionally edited, on whichever harness, model and thinking level you pick. The original stays.
+// Launch the task again as a new session in the same project: same prompt and attachments,
+// optionally edited, on whichever computer, harness, model and thinking level you pick. The
+// original stays. Another computer runs it in its own checkout (cloned there if need be).
 export async function rerun(id) {
   const s = S.full.get(id) || (await api(`/sessions/${id}`).catch(toastError));
   const first = s?.turns?.[0];
   if (!first?.prompt) return toast('Nothing to rerun — this session has no prompt.', { tone: 'bad' });
-  const has = (a) => S.agents.some((x) => x.id === a && x.available);
-  let agent = has(s.agent) ? s.agent : S.agents.find((x) => x.available)?.id || s.agent;
-  const models = S.agents.find((x) => x.id === agent)?.models || [];
+  let place = s.machine?.id || '';
+  const here = () => harnessesAt([place]).filter((x) => x.available);
+  const has = (a) => here().some((x) => x.id === a);
+  let agent = has(s.agent) ? s.agent : here()[0]?.id || s.agent;
+  const models = agentById(agent)?.models || [];
   let model = agent === s.agent && models.some((m) => m.id === s.model) ? s.model : savedModel(agent);
   let effort = agent === s.agent && effortsFor(agent, model).includes(s.effort) ? s.effort : savedEffort(agent, model);
   let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || DEFAULT_MODE.id;
@@ -242,13 +248,14 @@ export async function rerun(id) {
         <textarea class="rr-prompt" rows="3" spellcheck="false"></textarea>
         ${files.length ? `<div class="rr-files">${files.map((f) => `<span class="rr-file">${icon('clip')}${esc(f.name)}</span>`).join('')}</div>` : ''}
         <div class="l-bar">
+          <button class="tog-btn where-btn" data-a="place" aria-haspopup="menu" ${S.machines.length ? '' : 'hidden'}></button>
           <button class="mode-btn" data-a="mode" aria-haspopup="menu"></button>
           <button class="runner-btn" data-a="runner" title="Harness, model and thinking level" aria-haspopup="dialog"></button>
           <span class="grow"></span>
           <button class="primary sm" data-a="go">${icon('rerun')}Rerun</button>
         </div>
       </div>
-      <p class="hint">Starts a new session in <code>${esc(s.cwd)}</code>. “${esc(s.title)}” is kept as it is.</p>
+      <p class="hint rr-hint"></p>
     </div>`);
   const close = overlay(node);
   $('.close', node).onclick = close;
@@ -264,12 +271,37 @@ export async function rerun(id) {
   };
   const runnerBtn = $('[data-a="runner"]', node);
   const paintRunner = () => paintRunnerBtn(runnerBtn, agent, model, effort);
+  // Where it runs: where it ran, unless you pick another computer.
+  const placeBtn = $('[data-a="place"]', node);
+  const project = projectById(S.sessions.get(id)?.projectId);
+  const paintPlace = () => {
+    placeBtn.classList.toggle('on', !!place);
+    placeBtn.innerHTML = `${icon(place ? 'server' : 'laptop')}<span>${esc(placeName(place))}</span>${icon('chevron', 'chev')}`;
+    placeBtn.title = 'Run it on another computer';
+    const fresh = project && !pathAt(project, place);
+    $('.rr-hint', node).innerHTML = `Starts a new session in <code>${esc(project && !fresh ? pathAt(project, place) : s.cwd)}</code>${S.machines.length ? ` on <b>${esc(placeName(place))}</b>` : ''}${fresh ? `, in a checkout wisp clones there first` : ''}. “${esc(s.title)}” is kept as it is.`;
+  };
   paintMode();
   paintRunner();
+  paintPlace();
+  placeBtn.onclick = () =>
+    placeMenu(placeBtn, { title: 'Rerun on', current: place, from: s.machine?.id || '' }, (k) => {
+      place = k;
+      if (k && machineById(k)?.state === 'off') connectMachine(k);
+      // The harness has to be there too: keep it if it is, else the first one that is.
+      if (!has(agent) && here().length) {
+        agent = here()[0].id;
+        model = savedModel(agent);
+        effort = savedEffort(agent, model);
+        paintRunner();
+      }
+      paintPlace();
+      ta.focus();
+    });
   modeBtn.onclick = () => modeMenu(modeBtn, mode, (m) => ((mode = m), paintMode(), ta.focus()));
   // Picks here only apply to this rerun; the launcher's remembered defaults are left alone.
   runnerBtn.onclick = () =>
-    runnerPicker(runnerBtn, { agent, model, effort, savedModel, savedEffort, auto: true }, (a, m, e) => {
+    runnerPicker(runnerBtn, { agent, model, effort, savedModel, savedEffort, places: [place], auto: true }, (a, m, e) => {
       [agent, model, effort] = [a, m, e];
       paintRunner();
     });
@@ -279,8 +311,8 @@ export async function rerun(id) {
     if (!prompt) return ta.focus();
     close();
     try {
-      const body = { prompt, cwd: s.cwd, agent, mode, model, effort, attachments: files.map((f) => f.id) };
-      const next = await launchBehind({ prompt, cwd: s.cwd, runner: { agent, model, effort } }, () => api('/sessions', { method: 'POST', body }));
+      const body = { prompt, cwd: s.cwd, also: s.also?.map((a) => a.cwd), machine: place, agent, mode, model, effort, attachments: files.map((f) => f.id) };
+      const next = await launchBehind({ prompt, cwd: s.cwd, runner: { agent, model, effort }, machine: place }, () => api('/sessions', { method: 'POST', body }));
       setFocus(next.id);
     } catch (err) {
       toast(`Rerun failed: ${esc(err.message)}`, { tone: 'bad', action: { label: 'Edit again', run: () => rerun(id) } });