agent-yes 1.122.2 → 1.123.0

package/lab/ui/index.html

@@ -4,6 +4,18 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <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 {
@@ -124,6 +136,167 @@
       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;
+      }
+      /* 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;
@@ -516,6 +689,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 +729,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,6 +831,7 @@
         flex-direction: column;
         min-width: 0;
         min-height: 0;
+        position: relative; /* anchor for the absolutely-positioned perf HUD */
       }
       .rhead {
         padding: 14px 20px;
@@ -811,12 +1042,32 @@
           <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>
+              <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>
+        <div class="perfhud" id="perfhud" hidden></div>
       </div>
     </div>
 
@@ -842,6 +1093,8 @@
         fullIdent,
         hasIdent,
         deviceCount,
+        layeredRows,
+        taskLabel,
       } from "./console-logic.js";
       import {
         MARKER as E2E_MARKER,
@@ -1415,6 +1668,382 @@
       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");
+      }
+      (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)));
+        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 +2174,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 +2237,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 +2251,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 +2356,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);
@@ -1796,8 +2463,10 @@
         // keyword with 400 (pid arrives as a number from /api/ls JSON).
         const kw = String(pid);
         const fwd = (d) => {
-          if (sel === e._key)
+          if (sel === e._key) {
+            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 +2506,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";
@@ -1882,7 +2554,10 @@
       // 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)];