npm - agent-yes - Versions diffs - 1.122.3 → 1.124.0 - Mend

agent-yes 1.122.3 → 1.124.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/default.config.yaml +19 -0
package/dist/SUPPORTED_CLIS-Cvm7yo5d.js +8 -0
package/dist/{SUPPORTED_CLIS-BleNYXA2.js → SUPPORTED_CLIS-D_-bIOlW.js} +2 -2
package/dist/{agent-yes.config-z-IPzH5U.js → agent-yes.config-D6ycMApr.js} +2 -65
package/dist/cli.js +6 -6
package/dist/configShared-C5QaNPnz.js +71 -0
package/dist/{globalPidIndex-gZuTvTBs.js → globalPidIndex-C7r2m6s7.js} +19 -20
package/dist/index.js +4 -4
package/dist/pidStore-C4c2O15q.js +5 -0
package/dist/{pidStore-B5vBu8Px.js → pidStore-CGKIhaJO.js} +5 -4
package/dist/reaper-BLVA780B.js +3 -0
package/dist/{reaper-Dj8R7ltI.js → reaper-BkjPN7mw.js} +24 -2
package/dist/{remotes-CpGcTr7A.js → remotes-BRCDVnR7.js} +1 -1
package/dist/{remotes-D2fqaRU8.js → remotes-D8GvSbhf.js} +1 -1
package/dist/{schedule-e4f7NlA2.js → schedule-D2cn8N7o.js} +7 -7
package/dist/{serve-CzztmZ_N.js → serve-Bo3bDXQG.js} +202 -58
package/dist/{setup-CPyRNiIA.js → setup-CvOr258q.js} +3 -3
package/dist/{share-CS9XVrLF.js → share-YuM6-Q6A.js} +71 -13
package/dist/{subcommands-CQowpr1t.js → subcommands-ClVHy-xI.js} +647 -32
package/dist/subcommands-Llf9o8nh.js +7 -0
package/dist/{tray-DjCIyakK.js → tray-BVnJLThD.js} +1 -1
package/dist/{ts-9GThuc3w.js → ts-DGIglR4L.js} +10 -7
package/dist/{versionChecker-Bv9XKddN.js → versionChecker-gaQkM2Hy.js} +2 -2
package/dist/{workspaceConfig-XP2NEWmV.js → workspaceConfig-BJO4fzEn.js} +1 -1
package/lab/ui/console-logic.js +222 -10
package/lab/ui/icon.svg +5 -0
package/lab/ui/index.html +1152 -28
package/lab/ui/landing.html +276 -0
package/lab/ui/manifest.webmanifest +14 -0
package/lab/ui/sw.js +56 -0
package/package.json +5 -1
package/ts/agentTree.spec.ts +92 -0
package/ts/agentTree.ts +149 -0
package/ts/configShared.ts +4 -0
package/ts/globalPidIndex.ts +28 -20
package/ts/idleWaiter.spec.ts +7 -1
package/ts/index.ts +9 -0
package/ts/lsWatch.spec.ts +61 -0
package/ts/lsWatch.ts +94 -0
package/ts/needsInput.spec.ts +55 -0
package/ts/needsInput.ts +68 -0
package/ts/pidStore.ts +3 -0
package/ts/reaper.spec.ts +26 -2
package/ts/reaper.ts +25 -0
package/ts/resultEnvelope.spec.ts +43 -0
package/ts/resultEnvelope.ts +88 -0
package/ts/serve.ts +276 -41
package/ts/share.ts +144 -27
package/ts/subcommands.ts +0 -0
package/ts/todoParse.spec.ts +68 -0
package/ts/todoParse.ts +88 -0
package/ts/utils.spec.ts +4 -1
package/dist/SUPPORTED_CLIS-ClaOErso.js +0 -8
package/dist/pidStore-7y1cTcAE.js +0 -5
package/dist/reaper-HqcUms2d.js +0 -3
package/dist/subcommands-KAbIcd8_.js +0 -6

package/lab/ui/index.html CHANGED Viewed

@@ -2,8 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"
+    />
     <title>agent-yes · console</title>
+    <!-- PWA: installable console under /w/ (manifest scope is /w/). The service
+         worker is network-first so it never serves a stale wire protocol — the
+         cache is only an offline-launch fallback. -->
+    <meta name="theme-color" content="#0d1117" />
+    <link rel="manifest" href="./manifest.webmanifest" />
+    <link rel="icon" href="./icon.svg" />
+    <link rel="apple-touch-icon" href="./icon.svg" />
+    <script>
+      if ("serviceWorker" in navigator) {
+        addEventListener("load", () => navigator.serviceWorker.register("./sw.js").catch(() => {}));
+      }
+    </script>
     <style>
       /* Palette borrowed from codehost (GitHub-dark) so the two feel like one system. */
       :root {
@@ -23,6 +38,17 @@
         --pink: #f778ba;
         --red: #f85149;
         --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+        /* Safe-area insets — non-zero only in a standalone PWA on a notched /
+           gesture-bar device (else 0, so these are harmless on desktop). Consumed
+           via max() so the surface keeps its normal padding when the inset is 0.
+           Needs <meta viewport ... viewport-fit=cover> to be reported at all. */
+        --sat: env(safe-area-inset-top);
+        --sar: env(safe-area-inset-right);
+        --sab: env(safe-area-inset-bottom);
+        --sal: env(safe-area-inset-left);
+        /* height the iOS soft keyboard overlays the viewport with (set from JS
+           via visualViewport; 0 on desktop / Android, which resizes instead). */
+        --kb: 0px;
       }
       /* Light theme — GitHub-light, the daylight counterpart of the dark palette
          above. prefers-color-scheme is re-evaluated by the browser the moment the
@@ -81,7 +107,8 @@
         grid-template-columns: var(--leftw, 42%) 1px 1fr;
         grid-template-rows: minmax(0, 1fr);
         height: 100vh;
-        height: 100dvh;
+        /* subtract the iOS keyboard overlay so the composer stays above it */
+        height: calc(100dvh - var(--kb, 0px));
       }
       /* VSCode-style splitter: the visible divider stays 1px, but a ::before
@@ -113,7 +140,7 @@
         min-height: 0;
       }
       .head {
-        padding: 16px 18px 10px;
+        padding: max(16px, var(--sat)) max(18px, var(--sar)) 10px max(18px, var(--sal));
         border-bottom: 1px solid var(--line);
       }
       h1 {
@@ -124,6 +151,201 @@
       h1 .tag {
         color: var(--accent);
       }
+      /* Connection-path pill in the header: at a glance, is the terminal you're
+         watching on the fast local/lan path or the slow relayed path? */
+      /* Per-peer connection-type pill in the terminal header — describes how this
+         viewer reaches the SELECTED agent's host (local/lan/wan/relay). */
+      .rhead .ctype {
+        position: relative;
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        align-self: center;
+        padding: 1px 7px;
+        border-radius: 999px;
+        border: 1px solid currentColor;
+        text-transform: uppercase;
+        opacity: 0.9;
+        cursor: help;
+      }
+      .ctype[hidden] {
+        display: none;
+      }
+      /* Hover popover with the connection debug readout. */
+      .ctype .ctip {
+        display: none;
+        position: absolute;
+        top: 150%;
+        right: 0;
+        z-index: 30;
+        min-width: 240px;
+        padding: 8px 10px;
+        background: var(--panel);
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+        color: var(--fg);
+        font-family: var(--mono);
+        font-size: 10.5px;
+        font-weight: 400;
+        line-height: 1.6;
+        letter-spacing: 0;
+        text-transform: none;
+        text-align: left;
+        white-space: nowrap;
+      }
+      .ctype:hover .ctip {
+        display: block;
+      }
+      .ctip-h {
+        color: var(--muted);
+        margin-bottom: 5px;
+        white-space: normal;
+      }
+      .ctip-k {
+        display: inline-block;
+        width: 56px;
+        color: var(--muted);
+      }
+      /* ⋯ overflow menu in the terminal header + its dropdown. */
+      .rmenu {
+        position: relative;
+        margin-left: auto;
+      }
+      .rmenubtn {
+        background: none;
+        border: none;
+        color: var(--muted);
+        font-size: 16px;
+        line-height: 1;
+        cursor: pointer;
+        padding: 2px 6px;
+        border-radius: 6px;
+      }
+      .rmenubtn:hover {
+        background: var(--panel);
+        color: var(--fg);
+      }
+      .rmenupanel {
+        position: absolute;
+        top: 26px;
+        right: 0;
+        z-index: 15;
+        background: var(--panel);
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        padding: 4px;
+        min-width: 140px;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+      }
+      .rmenupanel[hidden] {
+        display: none;
+      }
+      .rmenuitem {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        padding: 5px 8px;
+        font-size: 12.5px;
+        border-radius: 6px;
+        cursor: pointer;
+        user-select: none;
+      }
+      .rmenuitem:hover {
+        background: var(--bg);
+      }
+      .rmenuitem input {
+        margin: 0;
+        cursor: pointer;
+      }
+      /* Action items (Stop / Force-kill) reuse the menu-item look as buttons. */
+      .rmenuact {
+        width: 100%;
+        background: none;
+        border: none;
+        text-align: left;
+        font: inherit;
+        color: var(--fg);
+      }
+      .rmenuact.danger {
+        color: var(--red);
+      }
+      .rmenusep {
+        height: 1px;
+        background: var(--line);
+        margin: 4px 2px;
+      }
+      /* Terminal font-size stepper (a static row, not a hover/click target). */
+      .rmenufont {
+        justify-content: space-between;
+        cursor: default;
+      }
+      .rmenufont:hover {
+        background: none;
+      }
+      .fontstep {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .fontstep button {
+        width: 26px;
+        height: 26px;
+        background: var(--panel2);
+        border: 1px solid var(--line);
+        border-radius: 6px;
+        color: var(--fg);
+        font-size: 13px;
+        line-height: 1;
+        cursor: pointer;
+      }
+      .fontstep button:hover {
+        border-color: var(--accent);
+        color: var(--accent);
+      }
+      .fontstep #fontVal {
+        min-width: 18px;
+        text-align: center;
+        font-variant-numeric: tabular-nums;
+        color: var(--muted);
+      }
+      /* Live performance HUD — opt-in via the ⋯ menu, hidden by default. */
+      .perfhud {
+        position: absolute;
+        top: 44px;
+        right: 12px;
+        z-index: 14;
+        background: rgba(13, 17, 23, 0.82);
+        color: var(--fg);
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        padding: 7px 10px;
+        font-family: var(--mono);
+        font-size: 11px;
+        line-height: 1.5;
+        pointer-events: none;
+        white-space: pre;
+        backdrop-filter: blur(3px);
+      }
+      .perfhud[hidden] {
+        display: none;
+      }
+      .perfhud b {
+        color: var(--accent);
+        font-weight: 600;
+      }
+      /* Per-peer connection-type tag on peer-group headers in the tree. */
+      .ghead .ctag {
+        font-size: 9.5px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        margin-left: 6px;
+        padding: 0 5px;
+        border-radius: 999px;
+        border: 1px solid currentColor;
+        opacity: 0.85;
+      }
       .sub {
         color: var(--muted);
         font-size: 12.5px;
@@ -454,6 +676,8 @@
         overflow-y: auto;
         flex: 1;
         min-height: 0;
+        /* clear the home-indicator / gesture bar so the last row stays tappable */
+        padding-bottom: var(--sab);
       }
       .row {
         padding: 11px 18px;
@@ -516,6 +740,23 @@
       .git.dirty {
         color: var(--amber);
       }
+      /* Task-progress badge ("2/5") parsed from the agent's todo block, sits next
+         to the git chip. Pill so it reads as a discrete counter; green when all
+         tasks are done. */
+      .tasks {
+        font-family: var(--mono);
+        font-size: 10.5px;
+        color: var(--muted);
+        white-space: nowrap;
+        flex: none;
+        padding: 0 5px;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+      }
+      .tasks.done {
+        color: var(--green);
+        border-color: #2a3a2a;
+      }
       .detail {
         color: var(--muted);
         font-size: 12.5px;
@@ -539,6 +780,46 @@
         gap: 8px;
         padding: 6px 18px;
       }
+      /* Tree branch prefix for nested (sub)agents — monospace so the box-drawing
+         glyphs line up into continuous │ ├ └ rails across rows. */
+      .tbranch {
+        font-family: var(--mono);
+        color: var(--muted);
+        white-space: pre;
+        flex: none;
+        opacity: 0.7;
+        margin-right: -2px;
+      }
+      /* Room/peer group header rows (the upper layers of the tree). Non-selectable,
+         dimmer and smaller than agent rows so they read as containers, not agents. */
+      .ghead {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 5px 18px 2px;
+        font-size: 11.5px;
+        color: var(--muted);
+        user-select: none;
+      }
+      .ghead .gicon {
+        opacity: 0.6;
+        flex: none;
+      }
+      .ghead .glabel {
+        font-weight: 600;
+        color: var(--fg);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .ghead.g-room .glabel {
+        color: var(--accent);
+      }
+      .ghead .gkind {
+        font-size: 10px;
+        opacity: 0.45;
+        flex: none;
+      }
       .crow .cident {
         font-family: var(--mono);
         font-size: 11.5px;
@@ -601,9 +882,10 @@
         flex-direction: column;
         min-width: 0;
         min-height: 0;
+        position: relative; /* anchor for the absolutely-positioned perf HUD */
       }
       .rhead {
-        padding: 14px 20px;
+        padding: max(14px, var(--sat)) max(20px, var(--sar)) 14px max(20px, var(--sal));
         border-bottom: 1px solid var(--line);
         display: flex;
         align-items: center;
@@ -611,6 +893,13 @@
       }
       .rhead .name {
         font-size: 15px;
+        /* shrink + ellipsis so a long agent title can't shove the live/⋯
+           controls off the edge on a narrow phone header */
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       /* back-to-list affordance — only surfaces in the single-column mobile view */
       .rback {
@@ -651,7 +940,7 @@
         flex: 1;
         min-height: 0;
         overflow: hidden;
-        padding: 8px 10px;
+        padding: 8px max(10px, var(--sar)) 8px max(10px, var(--sal));
         background: var(--bg);
       }
       .log .xterm {
@@ -668,6 +957,96 @@
         color: var(--muted);
         font-size: 14px;
       }
+      /* On-screen key bar — hidden on desktop, flex on mobile (720px block).
+         Scrolls horizontally so it never wraps or steals height from the log. */
+      .keybar {
+        display: none;
+        flex: none;
+        gap: 6px;
+        align-items: center;
+        padding: 6px max(8px, var(--sar)) 6px max(8px, var(--sal));
+        border-top: 1px solid var(--line);
+        background: var(--panel);
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+      }
+      .keybar::-webkit-scrollbar {
+        display: none;
+      }
+      .keybar .kb {
+        flex: none;
+        min-width: 36px;
+        height: 36px;
+        padding: 0 11px;
+        background: var(--panel2);
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        color: var(--fg);
+        font: 13px/1 var(--mono);
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        user-select: none;
+      }
+      .keybar .kb:active {
+        background: var(--line);
+      }
+      /* a sticky Ctrl/Alt that's armed for the next keystroke */
+      .keybar .kb.on {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: #fff;
+      }
+      /* Line composer — mobile-only. Carries the bottom safe-area inset so it
+         clears the home indicator (completes the terminal pane's inset cover). */
+      .composer {
+        display: none;
+        flex: none;
+        gap: 8px;
+        align-items: flex-end;
+        padding: 8px max(10px, var(--sar)) max(8px, var(--sab)) max(10px, var(--sal));
+        border-top: 1px solid var(--line);
+        background: var(--panel);
+      }
+      .composer textarea {
+        flex: 1;
+        min-width: 0;
+        resize: none;
+        max-height: 120px;
+        padding: 9px 11px;
+        background: var(--bg);
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        color: var(--fg);
+        /* ≥16px so iOS Safari doesn't auto-zoom the page when it gains focus */
+        font:
+          16px/1.4 -apple-system,
+          BlinkMacSystemFont,
+          system-ui,
+          sans-serif;
+      }
+      .composer textarea:focus {
+        outline: none;
+        border-color: var(--accent);
+      }
+      .composer .cmpsend {
+        flex: none;
+        height: 38px;
+        padding: 0 14px;
+        background: var(--accent);
+        border: 1px solid var(--accent);
+        border-radius: 10px;
+        color: #fff;
+        font:
+          600 13px/1 -apple-system,
+          system-ui,
+          sans-serif;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .composer .cmpsend:active {
+        opacity: 0.85;
+      }
       /* ---- mobile: collapse the two-pane desktop layout into a single column ----
          The list and the terminal stack into the same cell; only one is visible at
@@ -706,7 +1085,7 @@
         }
         .head {
-          padding: 12px 14px 8px;
+          padding: max(12px, var(--sat)) max(14px, var(--sar)) 8px max(14px, var(--sal));
         }
         h1 {
           font-size: 17px;
@@ -730,7 +1109,8 @@
           padding: 10px 14px;
         }
         .rhead {
-          padding: 12px 14px;
+          padding: max(12px, var(--sat)) max(14px, var(--sar)) 12px max(14px, var(--sal));
+          gap: 8px;
         }
         .list .row,
         .rooms .ritem,
@@ -741,6 +1121,15 @@
           -webkit-tap-highlight-color: transparent;
         }
       }
+      /* Touch input aids (key bar + composer) show on ANY touch device, not just
+         narrow ones — so a tablet in the two-pane layout (typically no hardware
+         keyboard) still gets Esc/Ctrl/arrows and a reliable line composer. */
+      @media (pointer: coarse) {
+        .keybar,
+        .composer {
+          display: flex;
+        }
+      }
     </style>
     <link
       rel="stylesheet"
@@ -811,12 +1200,75 @@
           <span class="live"
             ><span class="dot" id="livedot"></span><span id="livetxt">connecting…</span></span
           >
+          <span
+            id="ctype"
+            class="ctype"
+            title="how your browser reaches this agent's host"
+            hidden
+          ></span>
+          <span class="rmenu">
+            <button class="rmenubtn" id="rmenubtn" title="more" aria-label="more">⋯</button>
+            <div class="rmenupanel" id="rmenupanel" hidden>
+              <div class="rmenuitem rmenufont">
+                <span>Font size</span>
+                <span class="fontstep">
+                  <button type="button" id="fontDown" aria-label="smaller font">A−</button>
+                  <span id="fontVal">12</span>
+                  <button type="button" id="fontUp" aria-label="larger font">A+</button>
+                </span>
+              </div>
+              <div class="rmenusep"></div>
+              <label class="rmenuitem"
+                ><input type="checkbox" id="perfToggle" /> <span>Perf HUD</span></label
+              >
+              <div class="rmenusep"></div>
+              <button class="rmenuitem rmenuact" id="stopAgent" type="button">⏹ Stop agent</button>
+              <button class="rmenuitem rmenuact danger" id="killAgent" type="button">
+                ✕ Force-kill (SIGKILL)
+              </button>
+            </div>
+          </span>
         </div>
         <div class="log" id="log">
           <div class="placeholder">
             ← pick an agent to tail its log; type directly into the terminal
           </div>
         </div>
+        <!-- On-screen key bar — phones have no Esc/Tab/Ctrl/arrows, so agent TUIs
+             are otherwise undriveable. Mobile-only (shown in the 720px block);
+             posts raw sequences to the agent over the same /api/send wire. -->
+        <div class="keybar" id="keybar" role="group" aria-label="terminal keys">
+          <button class="kb" data-key="esc" title="Escape">Esc</button>
+          <button class="kb kbmod" data-mod="ctrl" title="Ctrl — applies to the next key">
+            Ctrl
+          </button>
+          <button class="kb kbmod" data-mod="alt" title="Alt — applies to the next key">Alt</button>
+          <button class="kb" data-key="tab" title="Tab">Tab</button>
+          <button class="kb" data-key="cc" title="Ctrl-C — interrupt">^C</button>
+          <button class="kb" data-arrow="up" title="Up" aria-label="Up">↑</button>
+          <button class="kb" data-arrow="down" title="Down" aria-label="Down">↓</button>
+          <button class="kb" data-arrow="left" title="Left" aria-label="Left">←</button>
+          <button class="kb" data-arrow="right" title="Right" aria-label="Right">→</button>
+          <button class="kb" data-key="enter" title="Enter">⏎</button>
+        </div>
+        <!-- Line composer — the reliable path for typing a prompt on a phone:
+             a normal textarea (no IME/autocorrect surprises that plague xterm's
+             hidden input). Enter sends, Shift+Enter inserts a newline. -->
+        <form class="composer" id="composer">
+          <textarea
+            id="cmpin"
+            rows="1"
+            placeholder="Message agent…  ↵ to send"
+            enterkeyhint="send"
+            inputmode="text"
+            autocapitalize="off"
+            autocorrect="off"
+            autocomplete="off"
+            spellcheck="false"
+          ></textarea>
+          <button type="submit" class="cmpsend" title="Send to agent">Send</button>
+        </form>
+        <div class="perfhud" id="perfhud" hidden></div>
       </div>
     </div>
@@ -842,6 +1294,8 @@
         fullIdent,
         hasIdent,
         deviceCount,
+        layeredRows,
+        taskLabel,
       } from "./console-logic.js";
       import {
         MARKER as E2E_MARKER,
@@ -864,6 +1318,28 @@
       let es = null; // live-tail subscription closer
       let term = null; // xterm.js Terminal rendering the raw PTY stream
       let fit = null;
+      // Terminal font size (px) — adjustable from the ⋯ menu, persisted across
+      // reloads, applied live to the open terminal and used by every new one.
+      let termFontSize = 12;
+      try {
+        const n = parseInt(localStorage.getItem("ay.fontSize") || "", 10);
+        if (n >= 8 && n <= 32) termFontSize = n;
+      } catch {}
+      function setTermFontSize(px) {
+        termFontSize = Math.max(8, Math.min(32, px | 0));
+        const v = $("fontVal");
+        if (v) v.textContent = String(termFontSize);
+        try {
+          localStorage.setItem("ay.fontSize", String(termFontSize));
+        } catch {}
+        if (term) {
+          term.options.fontSize = termFontSize;
+          if (fit)
+            try {
+              fit.fit();
+            } catch {}
+        }
+      }
       // xterm paints to a <canvas>, so unlike the CSS var() consumers it can't
       // ride prefers-color-scheme on its own — its theme is a JS object. Mirror
@@ -1415,6 +1891,539 @@
       const srcFor = (e) => (e && sources.get(e._room)) || sources.get(LOCAL) || null;
       const txFor = (e) => srcFor(e)?.tx || localTx;
+      // ---- connection-path classification (header [local/lan/wan/relay] pill) ----
+      // Tells the user, at a glance, whether the terminal they're watching rides the
+      // fast direct path or a relayed one — the difference between snappy and laggy.
+      const isLoopbackIp = (ip) => ip === "::1" || /^127\./.test(ip);
+      const isPrivateIp = (ip) =>
+        /^10\./.test(ip) ||
+        /^192\.168\./.test(ip) ||
+        /^172\.(1[6-9]|2\d|3[01])\./.test(ip) ||
+        /^169\.254\./.test(ip) || // IPv4 link-local
+        /^100\.(6[4-9]|[7-9]\d|1[01]\d|12[0-7])\./.test(ip) || // CGNAT / Tailscale (100.64.0.0/10)
+        /^fe80:/i.test(ip) || // IPv6 link-local
+        /^f[cd][0-9a-f]{2}:/i.test(ip) || // IPv6 ULA (fc00::/7, incl. Tailscale fd7a:…)
+        /\.local$/i.test(ip); // mDNS host candidate (browser-obfuscated LAN IP)
+      // Inspect the selected ICE candidate pair and return the full picture for the
+      // hover tooltip: kind, RTT, both candidates, a NAT-traversal hint, and the open
+      // data channel. `kind` is classified by how we reach the REMOTE host: relay on
+      // either end = TURN-proxied; otherwise the remote candidate's type/address
+      // decides local/lan/wan. (The LOCAL end is often prflx/srflx even on a fast
+      // private path — e.g. a Tailscale/CGNAT mesh shows local=prflx, remote=host
+      // 100.x at ~1ms — so we key on the remote, not on both ends being `host`.)
+      async function inspectConn(pc) {
+        if (!pc || typeof pc.getStats !== "function") return null;
+        try {
+          const stats = await pc.getStats();
+          let pairId = null;
+          stats.forEach((s) => {
+            if (s.type === "transport" && s.selectedCandidatePairId)
+              pairId = s.selectedCandidatePairId;
+          });
+          let pair = null;
+          stats.forEach((s) => {
+            if (
+              pairId
+                ? s.id === pairId
+                : s.type === "candidate-pair" && s.state === "succeeded" && s.nominated
+            )
+              pair = s;
+          });
+          if (!pair) return null;
+          let local = null,
+            remote = null;
+          stats.forEach((s) => {
+            if (s.id === pair.localCandidateId) local = s;
+            if (s.id === pair.remoteCandidateId) remote = s;
+          });
+          if (!local || !remote) return null;
+          const lt = local.candidateType,
+            rt = remote.candidateType,
+            rip = remote.address || remote.ip || "";
+          let kind, nat;
+          if (lt === "relay" || rt === "relay") {
+            kind = "relay";
+            nat = "TURN-relayed — symmetric NAT or UDP blocked";
+          } else if (rt === "host") {
+            kind = isLoopbackIp(rip) ? "local" : !rip || isPrivateIp(rip) ? "lan" : "wan";
+            nat =
+              lt === "host"
+                ? "direct — both ends on-net"
+                : "direct to host" + (lt === "srflx" || lt === "prflx" ? " (you behind NAT)" : "");
+          } else {
+            kind = "wan";
+            nat = "STUN-reflexive P2P (NAT-traversed)";
+          }
+          const fmt = (c) => c.candidateType + "/" + (c.protocol || "?");
+          return {
+            kind,
+            nat,
+            rttMs:
+              pair.currentRoundTripTime != null
+                ? Math.round(pair.currentRoundTripTime * 1000)
+                : null,
+            local:
+              fmt(local) + (local.address || local.ip ? " " + (local.address || local.ip) : ""),
+            remote: fmt(remote) + (rip ? " " + rip : ""),
+            dc:
+              [...stats.values()]
+                .filter((v) => v.type === "data-channel" && v.state === "open")
+                .map((v) => v.label)
+                .join(",") || null,
+          };
+        } catch {
+          return null;
+        }
+      }
+      // Resolve the live RTCPeerConnection that carries a SPECIFIC agent. A codehost
+      // room holds one peer per host (room.rtcs keyed by peerId); byPid maps the
+      // agent's pid to its peerId, so each agent resolves to ITS host's connection —
+      // a VPS agent reads wan while a tak.local agent in the same room reads lan.
+      function pcForAgent(s, e) {
+        if (!s) return null;
+        if (s.kind === "rtc") return s.client?.pc || null; // share room: one host
+        if (s.kind === "ch") {
+          const peerId = s.client?.byPid?.get(String(e?.pid));
+          return (peerId && s.client?.room?.rtcs?.get(peerId)?.pc) || null;
+        }
+        return null; // local ay-serve has no peer connection
+      }
+      // Two cache views, both filled from one classification pass:
+      //  - connKinds keyed by the true PEER (room + peerId) drives the header badge,
+      //    so two machines that happen to share a hostname never collide.
+      //  - hostKinds keyed by (room, host) drives the peer-group header tags, which
+      //    only ever render when hosts are already distinct.
+      const hostKeyOf = (e) => (e?._room || "") + " " + (e?._host || "");
+      function peerKeyOf(s, e) {
+        if (!s || s.id === LOCAL || s.kind == null) return LOCAL;
+        if (s.kind === "ch") {
+          const peerId = s.client?.byPid?.get(String(e?.pid));
+          return s.id + " " + (peerId || e?._host || "");
+        }
+        return s.id; // rtc share: one peer per room
+      }
+      const connKinds = new Map(); // peerKey -> "local" | "lan" | "wan" | "relay"
+      const hostKinds = new Map(); // hostKey -> same (peer-header tags)
+      const connInfo = new Map(); // peerKey -> full detail for the hover tooltip
+      let connSig = "";
+      // The signaling server backing a source: codehost rooms use the codehost
+      // signal DO; agent-yes share rooms use their own host; local has none.
+      const signalingOf = (s) =>
+        !s || s.id === LOCAL || s.kind == null
+          ? null
+          : s.kind === "ch"
+            ? "wss://signal.codehost.dev"
+            : "wss://" + (s.host || SIG_DEFAULT);
+      const CTYPE_COLORS = {
+        local: "var(--green)",
+        lan: "var(--green)",
+        wan: "var(--amber)",
+        relay: "var(--red)",
+      };
+      const CTYPE_TIPS = {
+        local: "this machine (ay serve, local)",
+        lan: "direct over the local network (fast)",
+        wan: "direct over the internet, peer-to-peer (STUN — RTT-bound)",
+        relay: "TURN-relayed — proxied through a server (slowest path)",
+      };
+      // A small colored pill for a connection kind — reused by the header badge and
+      // every peer-group header in the tree.
+      function connTagHtml(kind) {
+        if (!kind) return "";
+        return `<span class="ctag" style="color:${CTYPE_COLORS[kind]}" title="${esc(CTYPE_TIPS[kind])}">${kind}</span>`;
+      }
+      // Classify every distinct peer in the fleet, caching by (room,host). Because
+      // each agent reads its own host's path, a mixed room (VPS + laptop) shows both
+      // wan and lan at once — exactly what tells you a "local" agent is wrongly remote.
+      async function refreshConnKinds() {
+        // Probe each distinct peer once (not once per agent), keyed by peerKey.
+        const reps = new Map(); // peerKey -> a representative entry for that peer
+        for (const e of entries) {
+          const k = peerKeyOf(srcFor(e), e);
+          if (!reps.has(k)) reps.set(k, e);
+        }
+        connKinds.clear();
+        connInfo.clear();
+        await Promise.all(
+          [...reps].map(async ([key, e]) => {
+            const s = srcFor(e);
+            if (!s || s.id === LOCAL || s.kind == null) {
+              if (s && s.live) {
+                connKinds.set(key, "local");
+                connInfo.set(key, {
+                  kind: "local",
+                  nat: "this machine (ay serve)",
+                  signaling: null,
+                });
+              }
+              return;
+            }
+            const info = await inspectConn(pcForAgent(s, e));
+            if (info) {
+              connKinds.set(key, info.kind);
+              connInfo.set(key, { ...info, signaling: signalingOf(s) });
+            }
+          }),
+        );
+        // Project peer kinds onto (room,host) keys for the tree's peer headers.
+        hostKinds.clear();
+        for (const e of entries) {
+          const kind = connKinds.get(peerKeyOf(srcFor(e), e));
+          if (kind) hostKinds.set(hostKeyOf(e), kind);
+        }
+        paintHeaderBadge();
+        // Repaint the list only when the peer-header tags actually changed — the poll
+        // already re-renders on data deltas, so this avoids churning the DOM every tick.
+        const sig = [...hostKinds]
+          .sort()
+          .map(([k, v]) => k + "=" + v)
+          .join(";");
+        if (sig !== connSig) {
+          connSig = sig;
+          renderList();
+        }
+      }
+      // The terminal-header pill shows how this viewer reaches the SELECTED agent's
+      // host peer (local/lan/wan/relay) — per-peer, contextual to what's open. Reads
+      // the cache only (kept sync so renders never await); hidden when no agent is
+      // open (the whole rhead is hidden then anyway).
+      function paintHeaderBadge() {
+        const badge = $("ctype");
+        if (!badge) return;
+        const e = sel ? entries.find((x) => x._key === sel) : null;
+        const key = e ? peerKeyOf(srcFor(e), e) : null;
+        const kind = key ? connKinds.get(key) : null;
+        if (!kind) {
+          badge.hidden = true;
+          return;
+        }
+        badge.hidden = false;
+        badge.style.color = CTYPE_COLORS[kind] || "var(--muted)";
+        badge.removeAttribute("title"); // the hover popover replaces the native title
+        badge.innerHTML = esc(kind) + connTipHtml(kind, connInfo.get(key));
+      }
+      // The on-hover debug popover for the connection pill: latency, both ICE
+      // candidates, NAT-traversal hint, the open data channel, and the signaling
+      // server. Pure detail readout — the same getStats the classifier already ran.
+      function connTipHtml(kind, info) {
+        const rows = [];
+        if (info?.rttMs != null) rows.push(["latency", info.rttMs + " ms RTT"]);
+        if (info?.remote) rows.push(["remote", info.remote]);
+        if (info?.local) rows.push(["local", info.local]);
+        if (info?.nat) rows.push(["nat", info.nat]);
+        if (info?.dc) rows.push(["channel", info.dc]);
+        if (info?.signaling) rows.push(["signal", info.signaling]);
+        const head = `<div class="ctip-h">${esc(CTYPE_TIPS[kind] || kind)}</div>`;
+        const body = rows
+          .map(([k, v]) => `<div><span class="ctip-k">${k}</span>${esc(String(v))}</div>`)
+          .join("");
+        return `<span class="ctip">${head}${body || '<div class="ctip-k">probing…</div>'}</span>`;
+      }
+      // Candidate pairs aren't known the instant a peer connects (ICE keeps probing)
+      // and can change (relay fallback); a light poll keeps every pill honest.
+      setInterval(refreshConnKinds, 2500);
+      // ---- live performance HUD (opt-in via the ⋯ menu, hidden by default) -----
+      // Surfaces the metrics that actually move when the console feels laggy: render
+      // fps, keystroke throughput (xterm onData), agent output rate (term.write),
+      // and main-thread jank (long tasks). Counters accumulate over a 1s window;
+      // the I/O hooks live in select() (perfNote on fwd / term.write).
+      const perf = {
+        frames: 0,
+        inEvents: 0,
+        inBytes: 0,
+        outWrites: 0,
+        outBytes: 0,
+        jankMs: 0,
+        echoMs: null,
+      };
+      let perfOn = false;
+      let perfRaf = 0;
+      // Keystroke→reflect latency: stamp the first un-echoed keystroke; the next
+      // term.write that lands is its echo (the PTY round-trip). Accurate while
+      // typing into an otherwise-quiet agent — the real UX number for a TUI.
+      let pendingKeyTs = 0;
+      function perfNote(kind, n) {
+        if (!perfOn) return;
+        if (kind === "in") {
+          perf.inEvents++;
+          perf.inBytes += n || 0;
+          if (!pendingKeyTs) pendingKeyTs = performance.now();
+        } else if (kind === "out") {
+          perf.outWrites++;
+          perf.outBytes += n || 0;
+          if (pendingKeyTs) {
+            perf.echoMs = Math.round(performance.now() - pendingKeyTs);
+            pendingKeyTs = 0;
+          }
+        }
+      }
+      function perfReset() {
+        perf.frames =
+          perf.inEvents =
+          perf.inBytes =
+          perf.outWrites =
+          perf.outBytes =
+          perf.jankMs =
+            0;
+      }
+      function perfFrameLoop() {
+        if (!perfOn) {
+          perfRaf = 0;
+          return;
+        }
+        perf.frames++;
+        perfRaf = requestAnimationFrame(perfFrameLoop);
+      }
+      try {
+        // Long tasks fire regardless of the HUD; we only sum them while it's on.
+        new PerformanceObserver((l) => {
+          if (perfOn) for (const e of l.getEntries()) perf.jankMs += e.duration;
+        }).observe({ entryTypes: ["longtask"] });
+      } catch {
+        /* longtask API unavailable (Safari) — jank line just stays 0 */
+      }
+      const fmtBytes = (b) => (b >= 1024 ? (b / 1024).toFixed(1) + " KB" : Math.round(b) + " B");
+      setInterval(() => {
+        const el = $("perfhud");
+        if (!perfOn || !el) {
+          perfReset();
+          return;
+        }
+        const fps = perf.frames; // window is ~1s
+        el.innerHTML =
+          `<b>fps</b>   ${fps}\n` +
+          `<b>echo</b>  ${perf.echoMs == null ? "—" : perf.echoMs + " ms"}\n` +
+          `<b>keys</b>  ${perf.inEvents}/s  ${fmtBytes(perf.inBytes)}/s\n` +
+          `<b>out</b>   ${perf.outWrites}/s  ${fmtBytes(perf.outBytes)}/s\n` +
+          `<b>jank</b>  ${Math.round(perf.jankMs)} ms/s`;
+        perfReset(); // note: echoMs is preserved (last keystroke round-trip stays shown)
+      }, 1000);
+      function setPerfHud(on) {
+        perfOn = on;
+        const el = $("perfhud");
+        if (el) el.hidden = !on;
+        const cb = $("perfToggle");
+        if (cb) cb.checked = on;
+        try {
+          localStorage.setItem("ay.perfHud", on ? "1" : "0");
+        } catch {}
+        if (on) {
+          perfReset();
+          if (!perfRaf) perfRaf = requestAnimationFrame(perfFrameLoop);
+          if (el) el.textContent = "measuring…";
+        }
+      }
+      // Wire the ⋯ overflow menu and restore the saved HUD preference.
+      // Recovery actions for the SELECTED agent, both confirmed first (destructive):
+      //   Stop  — graceful: send the CLI's exit command (claude/codex /exit, gemini
+      //           /quit) + Enter over the existing /api/send stdin wire. (Ctrl+C / Ctrl+C×2
+      //           you can already just type — and some agents rely on that pattern — so
+      //           we don't reinvent it here.)
+      //   Force — escalation a stuck agent can't ignore: a real SIGKILL of its process
+      //           GROUP, server-side via POST /api/kill. Use when /exit does nothing.
+      const GRACEFUL_EXIT = { claude: "/exit", codex: "/exit", gemini: "/quit" };
+      async function stopAgent(force) {
+        const e = sel ? entries.find((x) => x._key === sel) : null;
+        if (!e) return;
+        const who = `pid ${e.pid} ${cliLabel(e) || ident(e) || ""}`.trim();
+        const tx = txFor(e),
+          kw = String(e.pid);
+        if (force) {
+          if (!confirm(`Force-kill (SIGKILL) ${who}?\nThis terminates the process immediately.`))
+            return;
+          tx.post("/api/kill", { keyword: kw }).catch(() => {});
+          return;
+        }
+        const graceful = GRACEFUL_EXIT[e.cli] || "/exit";
+        if (!confirm(`Stop ${who} — send "${graceful}"?`)) return;
+        const send = (msg) =>
+          tx.post("/api/send", { keyword: kw, msg, code: "none" }).catch(() => {});
+        await send(graceful);
+        await new Promise((r) => setTimeout(r, 200));
+        await send("\r");
+      }
+      // ---- On-screen key bar (mobile) -------------------------------------
+      // A phone keyboard has no Esc/Tab/Ctrl/arrows, so agent TUIs (claude,
+      // codex, vim…) are otherwise undriveable. The bar posts raw byte
+      // sequences straight to the selected agent's stdin, and a sticky Ctrl/Alt
+      // rewrites the NEXT character typed on the soft keyboard.
+      let modCtrl = false,
+        modAlt = false;
+      // Send raw bytes to the currently-selected agent. Uses the live `sel`, so
+      // it always hits the open agent even while an old terminal tears down mid
+      // switch — the same /api/send wire the terminal's own input uses.
+      function sendToSelected(data) {
+        const e = sel ? entries.find((x) => x._key === sel) : null;
+        if (!e || data == null) return;
+        perfNote("in", typeof data === "string" ? data.length : (data?.byteLength ?? 0));
+        txFor(e)
+          .post("/api/send", { keyword: String(e.pid), msg: data, code: "none" })
+          .catch(() => {});
+      }
+      // Apply a pending sticky Ctrl/Alt to ONE typed character (soft-keyboard
+      // path only). Multi-char input — paste, an IME commit, an escape sequence —
+      // passes through untouched. Ctrl folds @A–Z[\]^_ (case-insensitive) to
+      // 0x00–0x1f; Alt/Meta is an ESC prefix. One-shot: clears after one char.
+      function applyStickyMods(d) {
+        if ((!modCtrl && !modAlt) || typeof d !== "string" || d.length !== 1) return d;
+        let c = d;
+        if (modCtrl) {
+          const u = d.toUpperCase().charCodeAt(0);
+          if (u >= 64 && u <= 95) c = String.fromCharCode(u - 64);
+          else if (u === 32) c = "\x00"; // Ctrl-Space → NUL
+        }
+        if (modAlt) c = "\x1b" + c;
+        modCtrl = modAlt = false;
+        syncModButtons();
+        return c;
+      }
+      function syncModButtons() {
+        const kb = $("keybar");
+        if (!kb) return;
+        kb.querySelector('[data-mod="ctrl"]')?.classList.toggle("on", modCtrl);
+        kb.querySelector('[data-mod="alt"]')?.classList.toggle("on", modAlt);
+      }
+      (function keybarBoot() {
+        const kb = $("keybar");
+        if (!kb) return;
+        const SEQ = { esc: "\x1b", tab: "\t", enter: "\r", cc: "\x03" };
+        const ARROW = { up: "A", down: "B", right: "C", left: "D" };
+        // Don't let a button steal focus — that would drop the soft keyboard and
+        // blur whatever the user is typing into (terminal or composer).
+        kb.addEventListener("pointerdown", (ev) => {
+          if (ev.target.closest("button")) ev.preventDefault();
+        });
+        kb.addEventListener("click", (ev) => {
+          const b = ev.target.closest("button.kb");
+          if (!b) return;
+          if (b.dataset.mod) {
+            // sticky toggle — armed for the next soft-keyboard character
+            if (b.dataset.mod === "ctrl") modCtrl = !modCtrl;
+            else modAlt = !modAlt;
+            syncModButtons();
+            return;
+          }
+          let seq = null;
+          if (b.dataset.arrow) {
+            const L = ARROW[b.dataset.arrow];
+            if (modCtrl || modAlt) {
+              // Ctrl/Alt + arrow → CSI modifier form ESC [ 1 ; <m> <L>, where
+              // m = 1 + Alt(2) + Ctrl(4) (e.g. Ctrl-Left = ESC [ 1 ; 5 D for
+              // word-wise motion). Modified cursor keys are always CSI, never
+              // SS3, so DECCKM doesn't apply when a modifier is held.
+              seq = "\x1b[1;" + (1 + (modAlt ? 2 : 0) + (modCtrl ? 4 : 0)) + L;
+            } else {
+              // Honour application-cursor-key mode (DECCKM): TUIs that enable it
+              // expect SS3 (ESC O x) arrows, not CSI (ESC [ x). xterm tracks it.
+              const app = term && term.modes && term.modes.applicationCursorKeysMode;
+              seq = (app ? "\x1bO" : "\x1b[") + L;
+            }
+          } else if (b.dataset.key) {
+            seq = SEQ[b.dataset.key];
+            // Alt/Meta on a fixed key = ESC prefix (e.g. Alt+Enter). Ctrl on
+            // Esc/Tab/Enter has no standard sequence, so it's left as the bare key.
+            if (seq != null && modAlt) seq = "\x1b" + seq;
+          }
+          if (seq == null) return;
+          // the armed modifier (if any) has now been folded into this key — clear it
+          modCtrl = modAlt = false;
+          syncModButtons();
+          sendToSelected(seq);
+        });
+      })();
+      // ---- Line composer (mobile) ----------------------------------------
+      // The dependable way to type a prompt on a phone: a real textarea, immune
+      // to the IME/autocorrect glitches that dog xterm's hidden input. Enter
+      // sends text + a carriage return in one write (identical to typing then ↵);
+      // Shift+Enter inserts a literal newline.
+      (function composerBoot() {
+        const form = $("composer"),
+          ta = $("cmpin");
+        if (!form || !ta) return;
+        const grow = () => {
+          ta.style.height = "auto";
+          ta.style.height = Math.min(ta.scrollHeight, 120) + "px";
+        };
+        const sendLine = () => {
+          let v = ta.value;
+          if (!v) return;
+          // An armed sticky Ctrl/Alt decorates a single-char line (e.g. Ctrl-D);
+          // longer text can't carry it, but the modifier must still be cleared so
+          // it doesn't silently leak into the next terminal keystroke.
+          v = applyStickyMods(v);
+          if (modCtrl || modAlt) {
+            modCtrl = modAlt = false;
+            syncModButtons();
+          }
+          sendToSelected(v + "\r");
+          ta.value = "";
+          grow();
+          ta.focus(); // keep the soft keyboard up for the next line
+        };
+        ta.addEventListener("input", grow);
+        form.addEventListener("submit", (ev) => {
+          ev.preventDefault();
+          sendLine();
+        });
+        // Enter sends; Shift+Enter inserts a newline; never fire mid-IME-commit
+        // (the confirming Enter reports keyCode 229 / isComposing). `enterSeen`
+        // lets the beforeinput fallback below know keydown already decided this
+        // Enter (so it doesn't double-send, and Shift+Enter still makes a newline).
+        let enterSeen = false;
+        ta.addEventListener("keydown", (ev) => {
+          enterSeen = false;
+          if (ev.key === "Enter" && !ev.isComposing && ev.keyCode !== 229) {
+            enterSeen = true;
+            if (!ev.shiftKey) {
+              ev.preventDefault();
+              sendLine();
+            }
+          }
+        });
+        // Android (Gboard) commonly delivers Enter as keyCode 229 / key
+        // "Unidentified", so the keydown above never matches it. beforeinput's
+        // insertLineBreak fires reliably there; skip it when keydown already
+        // saw the Enter (desktop/iOS, including the Shift+Enter newline case).
+        ta.addEventListener("beforeinput", (ev) => {
+          if (ev.inputType !== "insertLineBreak") return;
+          if (enterSeen) {
+            enterSeen = false;
+            return;
+          }
+          ev.preventDefault();
+          sendLine();
+        });
+      })();
+      (function perfMenuBoot() {
+        const btn = $("rmenubtn"),
+          panel = $("rmenupanel"),
+          cb = $("perfToggle");
+        const closePanel = () => panel && (panel.hidden = true);
+        if (btn && panel) {
+          btn.addEventListener("click", (ev) => {
+            ev.stopPropagation();
+            panel.hidden = !panel.hidden;
+          });
+          document.addEventListener("click", (ev) => {
+            if (!panel.hidden && !panel.contains(ev.target) && ev.target !== btn) closePanel();
+          });
+        }
+        if (cb) cb.addEventListener("change", () => setPerfHud(cb.checked));
+        $("stopAgent")?.addEventListener("click", () => (closePanel(), stopAgent(false)));
+        $("killAgent")?.addEventListener("click", () => (closePanel(), stopAgent(true)));
+        // Font stepper — stays open so you can tap repeatedly; persists + refits.
+        $("fontDown")?.addEventListener("click", () => setTermFontSize(termFontSize - 1));
+        $("fontUp")?.addEventListener("click", () => setTermFontSize(termFontSize + 1));
+        setTermFontSize(termFontSize); // sync the label with the restored value
+        let saved = false;
+        try {
+          saved = localStorage.getItem("ay.perfHud") === "1";
+        } catch {}
+        setPerfHud(saved);
+      })();
       // The local source is only worth polling when this page is actually backed
       // by an ay serve: localhost, or served by `ay serve --http` (which leaves a
       // token), or when there are no rooms to fall back on. On the public origin
@@ -1545,28 +2554,62 @@
         return `<span class="git${g.dirty ? " dirty" : ""}" title="${esc(tip)}">${esc(label)}</span>`;
       }
+      // Task-progress badge ("2/5") parsed from the agent's todo block, shown next
+      // to the git chip. Amber-ish when all done; omitted entirely when no block.
+      function taskChipHtml(e) {
+        const label = taskLabel(e);
+        if (!label) return "";
+        const t = e.tasks || {};
+        const allDone = t.total > 0 && t.done >= t.total;
+        const tip = `tasks: ${t.done || 0} done / ${t.total || 0} total`;
+        return `<span class="tasks${allDone ? " done" : ""}" title="${esc(tip)}">${esc(label)}</span>`;
+      }
+      // A room/peer group header row. Non-selectable; carries the same tree rails
+      // as agent rows so the hierarchy reads as one tree. The room/peer layers
+      // only appear here when there are ≥2 of them (single ones fold away in
+      // layeredRows), so a header always disambiguates something real.
+      function headerHtml(r) {
+        const icon = r.kind === "room" ? "▤" : "▣";
+        // Peer headers carry their host's connection type (lan/wan/relay), so a
+        // mixed room shows at a glance which hosts are local vs reached over WAN.
+        const ctag =
+          r.kind === "peer"
+            ? connTagHtml(hostKinds.get((r.room || "") + " " + (r.host || "")))
+            : "";
+        return `<div class="ghead g-${r.kind}">${r.branch ? `<span class="tbranch">${esc(r.branch)}</span>` : ""}<span class="gicon">${icon}</span><span class="glabel">${esc(r.label || "")}</span>${ctag}<span class="gkind">${r.kind}</span></div>`;
+      }
       function renderList() {
         const toks = $("q").value.trim().split(/\s+/).filter(Boolean);
-        const shown = entries.filter((e) => matches(e, toks));
-        $("count").textContent = `${shown.length} / ${entries.length} agents`;
+        // Build the full signalling-server > rooms > peers > agents > subagents
+        // tree. Single-node room/peer layers fold away; ≥2 become ├ └ │ branches.
+        const rows = layeredRows(entries.filter((e) => matches(e, toks)));
+        const agentRows = rows.filter((r) => r.kind === "agent");
+        $("count").textContent = `${agentRows.length} / ${entries.length} agents`;
         $("viewbtn").classList.toggle("on", compactList);
         // identContext blanks any field uniform across the shown list (so a
         // single-device fleet shows no device); multiDevice gates the detailed
         // host tag so it only appears when machines are actually mixed.
-        const ctx = identContext(shown);
-        const multiDevice = deviceCount(shown) > 1;
+        const shownEntries = agentRows.map((r) => r.entry);
+        const ctx = identContext(shownEntries);
+        const multiDevice = deviceCount(shownEntries) > 1;
         if (compactList) {
           $("list").innerHTML =
-            shown
-              .map((e) => {
+            rows
+              .map((r) => {
+                if (r.kind !== "agent") return headerHtml(r);
+                const e = r.entry;
                 const t = e.title || e.prompt || "";
-                const id = compactIdent(e, ctx);
+                const id = compactIdent(e, ctx, 3, r.parentEntry);
                 const cli = cliLabel(e);
                 return `<div class="row crow ${e._key === sel ? "sel" : ""}" data-key="${esc(e._key)}">
+        ${r.branch ? `<span class="tbranch">${esc(r.branch)}</span>` : ""}
         <span class="dot ${esc(e.status)}"></span>
         ${hasIdent(id) ? `<span class="cident" title="${esc(fullIdent(e))}">${esc(id)}</span>` : ""}
         ${cli ? `<span class="cname">${esc(cli)}</span>` : ""}
         <span class="ctitle ${e.title ? "" : "dim"}" title="${esc(t)}">${esc(t)}</span>
+        ${taskChipHtml(e)}
         ${gitChipHtml(e)}
         <span class="age">${age(e)}</span></div>`;
               })
@@ -1574,10 +2617,12 @@
           return;
         }
         $("list").innerHTML =
-          shown
-            .map((e) => {
+          rows
+            .map((r) => {
+              if (r.kind !== "agent") return headerHtml(r);
+              const e = r.entry;
               // The host tag only earns its place when several machines are in
-              // play; otherwise it's noise (every row would carry the same one).
+              // play AND it isn't already shown by a peer header above this row.
               const tags = tagsFor(e)
                 .filter(([k]) => k !== "host" || multiDevice)
                 .map(
@@ -1586,9 +2631,10 @@
                 )
                 .join("");
               return `<div class="row ${e._key === sel ? "sel" : ""}" data-key="${esc(e._key)}">
-        <div class="r1"><span class="dot ${esc(e.status)}"></span>
+        <div class="r1">${r.branch ? `<span class="tbranch">${esc(r.branch)}</span>` : ""}<span class="dot ${esc(e.status)}"></span>
           <span class="name">${esc(cliLabel(e) || ident(e) || "agent")}</span>
           <span class="badge">pid ${e.pid}</span>
+          ${taskChipHtml(e)}
           ${gitChipHtml(e)}
           <span class="age">${age(e)}</span></div>
         ${e.title ? `<div class="rowtitle" title="${esc(e.title)}">${esc(e.title)}</div>` : ""}
@@ -1690,6 +2736,7 @@
           return;
         }
         sel = e._key;
+        paintHeaderBadge();
         // Remember the selection so a refresh re-opens this agent (see boot/autoPid).
         try {
           localStorage.setItem("ay.sel", sel);
@@ -1730,7 +2777,7 @@
           disableStdin: false,
           cursorBlink: true,
           scrollback: 5000,
-          fontSize: 12,
+          fontSize: termFontSize,
           fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
           theme: termTheme(),
         });
@@ -1796,8 +2843,11 @@
         // keyword with 400 (pid arrives as a number from /api/ls JSON).
         const kw = String(pid);
         const fwd = (d) => {
-          if (sel === e._key)
-            tx.post("/api/send", { keyword: kw, msg: d, code: "none" }).catch(() => {});
+          if (sel !== e._key) return; // ignore a stale terminal mid-switch
+          // a soft-keyboard character may be decorated by an armed sticky Ctrl/Alt
+          if (typeof d === "string") d = applyStickyMods(d);
+          perfNote("in", typeof d === "string" ? d.length : (d?.byteLength ?? 0));
+          tx.post("/api/send", { keyword: kw, msg: d, code: "none" }).catch(() => {});
         };
         term.onData(fwd);
         term.onBinary(fwd);
@@ -1837,7 +2887,10 @@
         const close = tx.subscribe(
           "/api/tail/" + encodeURIComponent(pid) + "?raw=1",
           (raw) => {
-            if (term) term.write(raw);
+            if (term) {
+              term.write(raw);
+              perfNote("out", raw?.length ?? 0);
+            }
           },
           () => {
             $("livedot").className = "dot active";
@@ -1855,11 +2908,51 @@
         const row = ev.target.closest(".row");
         if (row) select(row.dataset.key);
       });
-      // Mobile back button: return to the list pane. The tail keeps streaming in the
+      // Mobile back: return to the list pane. The tail keeps streaming in the
       // background (selection unchanged), so reopening the agent is instant.
-      $("rback").addEventListener("click", () => {
-        document.querySelector(".app").classList.remove("show-detail");
-      });
+      const goBack = () => document.querySelector(".app").classList.remove("show-detail");
+      $("rback").addEventListener("click", goBack);
+      // Swipe-right-from-the-left-edge → back, an alternative to the ‹ button.
+      // Passive/read-only so it never fights xterm's own scroll or text
+      // selection; armed only from the left edge, in the single-column view, and
+      // never when a TUI has mouse tracking on (that touch belongs to the agent).
+      (function swipeBackBoot() {
+        const pane = document.querySelector(".right");
+        if (!pane) return;
+        let sx = 0,
+          sy = 0,
+          st = 0,
+          armed = false;
+        pane.addEventListener(
+          "touchstart",
+          (ev) => {
+            armed = false;
+            if (window.innerWidth > 720 || ev.touches.length !== 1) return;
+            const t = ev.touches[0];
+            armed = t.clientX <= 28; // left-edge start only
+            sx = t.clientX;
+            sy = t.clientY;
+            st = ev.timeStamp;
+          },
+          { passive: true },
+        );
+        pane.addEventListener(
+          "touchend",
+          (ev) => {
+            if (!armed) return;
+            armed = false;
+            const mt = term && term.modes && term.modes.mouseTrackingMode;
+            if (mt && mt !== "none") return; // the TUI wants this touch
+            const t = ev.changedTouches[0];
+            if (!t) return;
+            const dx = t.clientX - sx,
+              dy = t.clientY - sy;
+            // a quick, clearly-horizontal rightward flick (not a scroll/tap)
+            if (dx > 45 && Math.abs(dx) > 2 * Math.abs(dy) && ev.timeStamp - st < 500) goBack();
+          },
+          { passive: true },
+        );
+      })();
       $("q").addEventListener("input", () => {
         try {
           localStorage.setItem("ay.filter", $("q").value);
@@ -1877,12 +2970,35 @@
             fit.fit();
           } catch {}
       });
+      // iOS overlays the soft keyboard ON TOP of the layout viewport rather than
+      // shrinking it, so a bottom-anchored composer would hide behind it. Track
+      // the visual viewport and reserve the covered height as --kb (which .app
+      // subtracts from its height), then refit the terminal. Android Chrome
+      // resizes the layout viewport itself (interactive-widget=resizes-content),
+      // so --kb stays ~0 there — this is harmless and idempotent on desktop too.
+      if (window.visualViewport) {
+        const vv = window.visualViewport;
+        const onVV = () => {
+          const kb = Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop));
+          document.documentElement.style.setProperty("--kb", kb + "px");
+          if (fit)
+            try {
+              fit.fit();
+            } catch {}
+        };
+        vv.addEventListener("resize", onVV);
+        vv.addEventListener("scroll", onVV);
+        onVV();
+      }
       // Step the selection up/down the (filtered) list — same order the left panel
       // renders. Clamps at the ends, scrolls the row into view.
       function stepSelection(dir) {
         const toks = $("q").value.trim().split(/\s+/).filter(Boolean);
-        const shown = entries.filter((e) => matches(e, toks));
+        // Must match renderList's order; step only over agent rows (skip headers).
+        const shown = layeredRows(entries.filter((e) => matches(e, toks)))
+          .filter((r) => r.kind === "agent")
+          .map((r) => r.entry);
         if (!shown.length) return;
         const cur = shown.findIndex((e) => e._key === sel);
         const next = shown[nextIndex(shown.length, cur, dir)];
@@ -2483,7 +3599,15 @@
           // composite key so it picks the right host when pids collide across rooms.
           const [, room, aid] = full;
           autoPid = room + "#" + aid;
-          autoPidExplicit = true;
+          // A #room:agentId hash is BOTH our own persisted selection (select()
+          // writes it so a refresh reopens) AND a shareable deep link — same
+          // format, two intents. Disambiguate by navigation type: a reload is a
+          // restore (on a phone, just re-highlight the row and stay on the list,
+          // per mergeRender), while a fresh navigation is a deliberate "take me
+          // to this agent" that opens even on mobile. (No nav entry → treat as
+          // explicit, preserving the old always-open behaviour.)
+          const nav = performance.getEntriesByType("navigation")[0];
+          autoPidExplicit = nav ? nav.type !== "reload" : true;
           const r = loadRooms()[room];
           if (r) pending = { room, token: r.token, host: r.host };
         } else if (bare && loadRooms()[bare[1]]) {