@madarco/agentbox 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   createBox
-} from "./chunk-OOOKFFR5.js";
+} from "./chunk-3NCUES35.js";
 import {
   AmbiguousBoxError,
   BoxNotFoundError,
@@ -15,7 +15,7 @@ import {
   startBox,
   stopBox,
   unpauseBox
-} from "./chunk-RWJE6AER.js";
+} from "./chunk-7NQFIBQG.js";
 import {
   ClaudeSessionError,
   SHARED_CLAUDE_VOLUME,
@@ -37,7 +37,7 @@ import {
   resolveClaudeVolume,
   startClaudeSession,
   stopRelay
-} from "./chunk-O5HS3QHW.js";
+} from "./chunk-MOC54XL6.js";
 import {
   STATE_DIR,
   readState,
@@ -1600,6 +1600,7 @@ var InputParser = class {
         if (b === LEADER) {
           this.flush();
           this.state = "leader";
+          this.onEvent({ type: "leader", active: true });
           this.arm(this.leaderMs, "leader");
         } else if (b === ESC) {
           this.flush();
@@ -1622,14 +1623,18 @@ var InputParser = class {
           if (c === "v") this.onEvent({ type: "action", name: "vnc" });
           else if (c === "w") this.onEvent({ type: "action", name: "web" });
           else if (c === "c") this.onEvent({ type: "action", name: "code" });
-          else if (c === "q" || c === "d") this.onEvent({ type: "quit" });
-          else if (c === "k" || c === "p" || c === "P") this.onEvent({ type: "switch", dir: "prev" });
+          else if (c === "s") this.onEvent({ type: "action", name: "stop" });
+          else if (c === "p") this.onEvent({ type: "action", name: "pause" });
+          else if (c === "d") this.onEvent({ type: "action", name: "destroy" });
+          else if (c === "q") this.onEvent({ type: "quit" });
+          else if (c === "k") this.onEvent({ type: "switch", dir: "prev" });
           else if (c === "j" || c === "n" || c === "N") this.onEvent({ type: "switch", dir: "next" });
           else {
             this.fwd.push(b);
             this.flush();
           }
         }
+        this.onEvent({ type: "leader", active: false });
         this.state = "normal";
         i++;
         continue;
@@ -1737,6 +1742,7 @@ var InputParser = class {
       if (kind === "leader" && this.state === "leader") {
         this.fwd.push(LEADER);
         this.flush();
+        this.onEvent({ type: "leader", active: false });
         this.state = "normal";
       } else if (kind === "esc" && (this.state === "esc" || this.state === "mouseX10")) {
         this.forwardVerbatim(this.esc);
@@ -1861,6 +1867,18 @@ var PtySession = class {
 };
 
 // src/dashboard/sidebar.ts
+function ellipsize(s, max) {
+  if (max <= 0) return "";
+  if (s.length <= max) return s;
+  if (max === 1) return "\u2026";
+  return s.slice(0, max - 1) + "\u2026";
+}
+function ellipsizeHead(s, max) {
+  if (max <= 0) return "";
+  if (s.length <= max) return s;
+  if (max === 1) return "\u2026";
+  return "\u2026" + s.slice(s.length - (max - 1));
+}
 function activityCell(b) {
   if (b.state !== "running") return `[${b.state}]`;
   switch (b.claudeActivity) {
@@ -1876,8 +1894,12 @@ function activityCell(b) {
 }
 var NEW_BOX_ID = "__agentbox_new__";
 var NEW_BOX_LABEL = "+ New box";
-var SIDEBAR_HEADER = "\u2550 AgentBox \u2550";
-var SIDEBAR_HEADER_LINES = 2;
+var SIDEBAR_HEADER = "AgentBox";
+function topBorder(label, w) {
+  const lead = `\u256D\u2500\u2500\u2500 ${label} `;
+  if (lead.length >= w) return lead.slice(0, w);
+  return lead + "\u2500".repeat(w - lead.length);
+}
 function fit(s, w) {
   if (s.length === w) return s;
   if (s.length > w) return s.slice(0, w);
@@ -1889,17 +1911,55 @@ function center(s, w) {
   const leftPad = Math.floor(pad / 2);
   return " ".repeat(leftPad) + s + " ".repeat(pad - leftPad);
 }
+function projectLabel(project) {
+  if (!project) return "(no project)";
+  const parts = project.split("/").filter(Boolean);
+  return parts[parts.length - 1] ?? project;
+}
+function stripTitleGlyph(s) {
+  const t = s.replace(/^[\s\p{S}*·]+/u, "");
+  return t.length > 0 ? t : s.trim();
+}
+function boxRow(b, marker, w) {
+  const numStr = b.index != null ? `${b.index} ` : "";
+  const status = activityCell(b);
+  const left = `${marker}${numStr}`;
+  const room = w - left.length - status.length - 1;
+  if (room <= 0) return fit(`${left}${status}`, w);
+  const middle = b.state === "running" && b.sessionTitle ? ellipsize(stripTitleGlyph(b.sessionTitle), room) : ellipsizeHead(b.name, room);
+  return fit(`${left}${middle}`, w - status.length) + status;
+}
 function sidebarLines(boxes, selectedId, w, h) {
-  const lines = [center(SIDEBAR_HEADER, w), fit("", w)];
-  const nameW = Math.min(16, Math.max(6, ...boxes.map((b) => b.name.length), 6));
+  const lines = [topBorder(SIDEBAR_HEADER, w), fit("", w)];
+  const rowOwner = [null, null];
+  const headerRows = [true, false];
+  const push = (line, owner, header) => {
+    lines.push(fit(line, w));
+    rowOwner.push(owner);
+    headerRows.push(header);
+  };
+  let prevProject;
+  let seenGroup = false;
   for (const b of boxes) {
-    const marker = b.id === selectedId ? "\u25B8 " : "  ";
-    const row2 = b.id === NEW_BOX_ID ? `${marker}${NEW_BOX_LABEL}` : `${marker}${fit(b.name, nameW)}  ${activityCell(b)}`;
-    lines.push(fit(row2, w));
+    const marker = b.id === selectedId ? "\u25B8" : " ";
+    if (b.id === NEW_BOX_ID) {
+      push(`${marker}${NEW_BOX_LABEL}`, b.id, false);
+      continue;
+    }
+    if (!seenGroup || b.project !== prevProject) {
+      push(center(` \u2500\u2500 ${projectLabel(b.project)} \u2500\u2500 `, w), null, true);
+      prevProject = b.project;
+      seenGroup = true;
+    }
+    push(boxRow(b, marker, w), b.id, false);
   }
-  if (boxes.length === 0) lines.push(fit(" (no boxes)", w));
-  while (lines.length < h) lines.push(fit("", w));
-  return lines.slice(0, h);
+  if (boxes.length === 0) push(" (no boxes)", null, false);
+  while (lines.length < h) push("", null, false);
+  return {
+    lines: lines.slice(0, h),
+    rowOwner: rowOwner.slice(0, h),
+    headerRows: headerRows.slice(0, h)
+  };
 }
 function menuLines(boxName, w, h) {
   const body = [
@@ -1916,6 +1976,28 @@ function menuLines(boxName, w, h) {
   for (let i = 0; i < h; i++) out.push(fit(body[i - top] ?? "", w));
   return out;
 }
+function lifecycleMenuLines(boxName, state, confirmDestroy, w, h) {
+  const body = confirmDestroy ? [
+    "",
+    `  Destroy ${boxName}?`,
+    "  This removes the container and its volumes.",
+    "",
+    "   [y]  Yes, destroy",
+    "   [any other key]  Cancel"
+  ] : [
+    "",
+    `  Box ${boxName} is ${state}.`,
+    "",
+    state === "paused" ? "   [u]  Unpause" : "   [s]  Start",
+    "   [d]  Destroy",
+    "",
+    "  Ctrl+Option+\u2191/\u2193 switch \xB7 Ctrl-a then q quit"
+  ];
+  const top = Math.max(0, Math.floor((h - body.length) / 2));
+  const out = [];
+  for (let i = 0; i < h; i++) out.push(fit(body[i - top] ?? "", w));
+  return out;
+}
 function createMenuLines(where, w, h) {
   const body = [
     "",
@@ -1941,29 +2023,58 @@ var BRAND_NOBOLD = "\x1B[22m";
 var HINT_KEY = "\x1B[38;5;255m";
 var HINT_TXT = "\x1B[38;5;245m";
 var BAR_RESET = "\x1B[0m";
+var SWITCH_HINT = ["Control+Option+\u2191/\u2193", "switch"];
 var HINT_GROUPS = [
-  ["Control+Option+Up/Down", "switch"],
+  SWITCH_HINT,
   ["Control+a c", "code"],
   ["Control+a v", "vnc"],
   ["Control+a w", "web"],
   ["Control+a q", "quit"]
 ];
-function statusLine(box, w, stateLabel) {
+var COLLAPSED_HINT_GROUPS = [
+  SWITCH_HINT,
+  ["Control+a", "more"]
+];
+var ADVANCED_HINT_GROUPS = [
+  ["c", "code"],
+  ["v", "vnc"],
+  ["w", "web"],
+  ["s", "stop"],
+  ["p", "pause"],
+  ["d", "destroy"],
+  ["q", "quit"]
+];
+function statusLine(box, w, stateLabel, groups = HINT_GROUPS) {
   const state = stateLabel ?? (box ? box.state === "running" ? box.claudeActivity ?? "unknown" : box.state : "");
   const brandPrefix = box ? " agentbox \u25B8 " : " agentbox ";
-  const brandMain = box ? `${box.name} (${state}) ` : "";
-  const left = brandPrefix + brandMain;
-  const leftStyled = BAR_BRAND + brandPrefix + BRAND_BOLD + brandMain + BRAND_NOBOLD;
+  const base = box ? `${box.name} (${state})` : "";
+  const coreMain = box ? `${base} ` : "";
+  const corePlain = brandPrefix + coreMain;
   const SEP = "   \u2502   ";
-  const rightPlain = HINT_GROUPS.map(([k, l]) => `${k}: ${l}`).join(SEP) + " ";
-  const rightStyled = HINT_GROUPS.map(([k, l]) => `${HINT_KEY}${k}${HINT_TXT}: ${l}`).join(
-    `${HINT_TXT}${SEP}`
-  ) + " ";
-  if (left.length + rightPlain.length + 1 > w) {
-    return BAR_BASE + BAR_BRAND + fit(left, w) + BAR_RESET;
-  }
-  const gap = w - left.length - rightPlain.length;
-  return BAR_BASE + leftStyled + BAR_BASE + " ".repeat(gap) + rightStyled + BAR_RESET;
+  const renderHints = (g) => ({
+    plain: g.map(([k, l]) => `${k}: ${l}`).join(SEP) + " ",
+    styled: g.map(([k, l]) => `${HINT_KEY}${k}${HINT_TXT}: ${l}`).join(`${HINT_TXT}${SEP}`) + " "
+  });
+  let hints = null;
+  for (const g of [groups, COLLAPSED_HINT_GROUPS]) {
+    const h = renderHints(g);
+    if (corePlain.length + h.plain.length + 1 <= w) {
+      hints = h;
+      break;
+    }
+  }
+  if (!hints) {
+    return BAR_BASE + BAR_BRAND + fit(corePlain, w) + BAR_RESET;
+  }
+  const room = w - corePlain.length - hints.plain.length - 1;
+  let titleSeg = "";
+  if (box?.sessionTitle && room >= 7) {
+    titleSeg = ` \u2014 ${ellipsize(box.sessionTitle, Math.min(40, room - 3))}`;
+  }
+  const leftPlain = brandPrefix + base + titleSeg + (box ? " " : "");
+  const leftStyled = BAR_BRAND + brandPrefix + BRAND_BOLD + base + titleSeg + (box ? " " : "") + BRAND_NOBOLD;
+  const gap = w - leftPlain.length - hints.plain.length;
+  return BAR_BASE + leftStyled + BAR_BASE + " ".repeat(gap) + hints.styled + BAR_RESET;
 }
 
 // src/dashboard/compositor.ts
@@ -1974,6 +2085,7 @@ var SGR_RESET = "\x1B[0m";
 var POLL_MS = 1e3;
 var FRAME_MS = 16;
 var RESIZE_DEBOUNCE_MS = 120;
+var LEADER_LINGER_MS = 1500;
 var SYNC_BEGIN = "\x1B[?2026h";
 var SYNC_END = "\x1B[?2026l";
 function cursorTo2(x, y) {
@@ -1986,10 +2098,41 @@ var Compositor = class {
     this.layout = computeLayout(this.out.columns ?? 100, this.out.rows ?? 30);
     this.parser = new InputParser({
       onEvent: (e) => {
+        if (e.type === "leader") {
+          if (this.leaderLingerTimer) {
+            clearTimeout(this.leaderLingerTimer);
+            this.leaderLingerTimer = null;
+          }
+          if (e.active) {
+            this.leaderActive = true;
+          } else {
+            this.leaderLingerTimer = setTimeout(() => {
+              this.leaderLingerTimer = null;
+              this.leaderActive = false;
+              this.drawChrome();
+            }, LEADER_LINGER_MS);
+          }
+          this.drawChrome();
+          return;
+        }
+        if (this.pendingConfirm) {
+          if (e.type === "forward") {
+            this.handleConfirmKey(e.bytes);
+            return;
+          }
+          this.pendingConfirm = null;
+          this.drawChrome();
+        }
         if (e.type === "quit") this.onSig();
         else if (e.type === "switch") this.switchBox(e.dir);
-        else if (e.type === "action") void this.doAction(e.name);
-        else if (this.createMenu) this.handleCreateMenuKey(e.bytes);
+        else if (e.type === "action") {
+          if (e.name === "pause" || e.name === "stop" || e.name === "destroy") {
+            void this.doLifecycle(e.name);
+          } else {
+            void this.doAction(e.name);
+          }
+        } else if (this.createMenu) this.handleCreateMenuKey(e.bytes);
+        else if (this.lifecycleMenu) this.handleLifecycleMenuKey(e.bytes);
         else if (this.menu) this.handleMenuKey(e.bytes);
         else this.session?.write(e.bytes);
       },
@@ -2013,7 +2156,16 @@ var Compositor = class {
   session = null;
   placeholder = null;
   menu = null;
+  lifecycleMenu = null;
   createMenu = null;
+  /** True while the Ctrl-a leader is pending — swaps the footer to the
+   *  expanded chord menu (chrome only; never touches the right pane). */
+  leaderActive = false;
+  /** Holds the expanded footer for LEADER_LINGER_MS after the leader resolves
+   *  (so the chord menu doesn't flash by). */
+  leaderLingerTimer = null;
+  /** Set while a destroy confirm is pending in the status bar. */
+  pendingConfirm = null;
   activeMode = "claude";
   flashMsg = null;
   flashTimer = null;
@@ -2073,7 +2225,9 @@ var Compositor = class {
     return this.boxes.find((b) => b.id === this.selectedId);
   }
   async poll() {
-    const before = JSON.stringify(this.boxes.map((b) => [b.id, b.state, b.claudeActivity]));
+    const before = JSON.stringify(
+      this.boxes.map((b) => [b.id, b.state, b.claudeActivity, b.sessionTitle])
+    );
     await this.refreshBoxes();
     if (this.busy) {
     } else if (!this.boxes.some((b) => b.id === this.selectedId) && this.boxes[0]) {
@@ -2082,10 +2236,12 @@ var Compositor = class {
     } else {
       const box = this.selectedBox();
       const running = box?.state === "running";
-      const reresolve = this.session && !running || this.placeholder && running || this.menu && !running;
+      const reresolve = this.session && !running || this.placeholder && running || this.menu && !running || this.lifecycleMenu != null && box?.state !== this.lifecycleMenu.state;
       if (reresolve) await this.spawnActive();
     }
-    if (JSON.stringify(this.boxes.map((b) => [b.id, b.state, b.claudeActivity])) !== before) {
+    if (JSON.stringify(
+      this.boxes.map((b) => [b.id, b.state, b.claudeActivity, b.sessionTitle])
+    ) !== before) {
       this.drawChrome();
     }
   }
@@ -2098,7 +2254,9 @@ var Compositor = class {
     this.disposeSession();
     this.placeholder = null;
     this.menu = null;
+    this.lifecycleMenu = null;
     this.createMenu = null;
+    this.pendingConfirm = null;
     this.clearRightPane();
     const id = this.selectedId;
     const target = await this.deps.resolveTarget(id);
@@ -2110,7 +2268,9 @@ var Compositor = class {
     this.disposeSession();
     this.placeholder = null;
     this.menu = null;
+    this.lifecycleMenu = null;
     this.createMenu = null;
+    this.pendingConfirm = null;
     if (target.kind === "attach") {
       this.activeMode = target.mode ?? "claude";
       this.session = new PtySession(
@@ -2124,6 +2284,12 @@ var Compositor = class {
       );
     } else if (target.kind === "menu") {
       this.menu = { boxName: this.selectedBox()?.name ?? this.selectedId };
+    } else if (target.kind === "lifecycle-menu") {
+      this.lifecycleMenu = {
+        boxName: this.selectedBox()?.name ?? this.selectedId,
+        state: target.state,
+        confirmDestroy: false
+      };
     } else if (target.kind === "create-menu") {
       this.createMenu = { where: target.where };
     } else {
@@ -2176,6 +2342,163 @@ var Compositor = class {
       this.busy = false;
     }
   }
+  handleLifecycleMenuKey(bytes) {
+    const m = this.lifecycleMenu;
+    if (!m) return;
+    for (const b of bytes) {
+      if (m.confirmDestroy) {
+        if (b === 121 || b === 13 || b === 10) {
+          void this.runDestroy(this.selectedId, this.selectedBox()?.name ?? this.selectedId);
+        } else {
+          m.confirmDestroy = false;
+          this.drawChrome();
+          this.scheduleRender();
+        }
+        return;
+      }
+      const resumeKey = m.state === "paused" ? 117 : 115;
+      if (b === resumeKey) {
+        void this.resumeSelected();
+        return;
+      }
+      if (b === 100) {
+        m.confirmDestroy = true;
+        this.drawChrome();
+        this.scheduleRender();
+        return;
+      }
+    }
+  }
+  async resumeSelected() {
+    if (this.busy) return;
+    const id = this.selectedId;
+    const name = this.selectedBox()?.name ?? id;
+    const verb = this.lifecycleMenu?.state === "stopped" ? "start" : "unpause";
+    this.busy = true;
+    this.menu = null;
+    this.lifecycleMenu = null;
+    this.createMenu = null;
+    this.placeholder = ["", "  Resuming\u2026"];
+    this.prevRows = null;
+    this.drawChrome();
+    this.scheduleRender();
+    try {
+      await this.deps.resumeBox(id);
+      if (this.selectedId !== id || this.tornDown) return;
+      await this.refreshBoxes();
+      await this.spawnActive();
+    } catch (err) {
+      if (this.selectedId !== id || this.tornDown) return;
+      const msg = err instanceof Error ? err.message : String(err);
+      this.placeholder = [
+        "",
+        `  Failed to ${verb} ${name}:`,
+        `  ${msg}`,
+        "",
+        `  Try from a shell: agentbox ${verb} ${name}`
+      ];
+      this.prevRows = null;
+      this.scheduleRender();
+    } finally {
+      this.busy = false;
+    }
+  }
+  /** Destroy `id` and recover the selection. Shared by the lifecycle-menu
+   *  confirm and the running-box `Ctrl-a d` status-bar confirm. */
+  async runDestroy(id, name) {
+    if (this.busy) return;
+    this.busy = true;
+    this.menu = null;
+    this.lifecycleMenu = null;
+    this.createMenu = null;
+    this.placeholder = ["", "  Destroying\u2026"];
+    this.prevRows = null;
+    this.drawChrome();
+    this.scheduleRender();
+    try {
+      await this.deps.destroyBox(id);
+      if (this.tornDown) return;
+      await this.refreshBoxes();
+      if (this.boxes[0]) this.selectedId = this.boxes[0].id;
+      await this.spawnActive();
+      this.flash(`destroyed ${name}`);
+    } catch (err) {
+      if (this.tornDown) return;
+      const msg = err instanceof Error ? err.message : String(err);
+      this.placeholder = [
+        "",
+        `  Failed to destroy ${name}:`,
+        `  ${msg}`,
+        "",
+        `  Try from a shell: agentbox destroy ${name}`
+      ];
+      this.prevRows = null;
+      this.scheduleRender();
+    } finally {
+      this.busy = false;
+    }
+  }
+  /** Ctrl-a p/s/d on the selected box. pause/stop transition state (the pane
+   *  re-resolves to the lifecycle menu); destroy asks to confirm first. */
+  async doLifecycle(name) {
+    if (this.selectedId === NEW_BOX_ID) {
+      this.flash("select a box first");
+      return;
+    }
+    const id = this.selectedId;
+    const boxName = this.selectedBox()?.name ?? id;
+    if (name === "destroy") {
+      this.pendingConfirm = { boxId: id, name: boxName };
+      this.drawChrome();
+      return;
+    }
+    if (this.selectedBox()?.state !== "running") {
+      this.flash(`${boxName} is not running`);
+      return;
+    }
+    if (this.busy) return;
+    this.busy = true;
+    this.menu = null;
+    this.lifecycleMenu = null;
+    this.createMenu = null;
+    this.placeholder = ["", name === "pause" ? "  Pausing\u2026" : "  Stopping\u2026"];
+    this.prevRows = null;
+    this.drawChrome();
+    this.scheduleRender();
+    try {
+      if (name === "pause") await this.deps.pauseBox(id);
+      else await this.deps.stopBox(id);
+      if (this.selectedId !== id || this.tornDown) return;
+      await this.refreshBoxes();
+      await this.spawnActive();
+      this.flash(`${name === "pause" ? "paused" : "stopped"} ${boxName}`);
+    } catch (err) {
+      if (this.selectedId !== id || this.tornDown) return;
+      const msg = err instanceof Error ? err.message : String(err);
+      this.placeholder = [
+        "",
+        `  Failed to ${name} ${boxName}:`,
+        `  ${msg}`,
+        "",
+        `  Try from a shell: agentbox ${name} ${boxName}`
+      ];
+      this.prevRows = null;
+      this.scheduleRender();
+    } finally {
+      this.busy = false;
+    }
+  }
+  handleConfirmKey(bytes) {
+    const c = this.pendingConfirm;
+    if (!c) return;
+    const b = bytes[0];
+    this.pendingConfirm = null;
+    if (b === 121 || b === 13 || b === 10) {
+      void this.runDestroy(c.boxId, c.name);
+    } else {
+      this.drawChrome();
+    }
+  }
   handleCreateMenuKey(bytes) {
     for (const b of bytes) {
       if (b === 99 || b === 13 || b === 10) {
@@ -2257,6 +2580,7 @@ var Compositor = class {
   }
   switchBox(dir) {
     if (this.boxes.length === 0) return;
+    this.pendingConfirm = null;
     const i = Math.max(
       0,
       this.boxes.findIndex((b) => b.id === this.selectedId)
@@ -2300,6 +2624,17 @@ var Compositor = class {
       let s = SYNC_BEGIN + "\x1B[?25l";
       for (let i = 0; i < r.h; i++) s += cursorTo2(r.x, r.y + i) + "\x1B[0m" + (lines[i] ?? "");
       this.out.write(s + SYNC_END);
+    } else if (this.lifecycleMenu) {
+      const lines = lifecycleMenuLines(
+        this.lifecycleMenu.boxName,
+        this.lifecycleMenu.state,
+        this.lifecycleMenu.confirmDestroy,
+        r.w,
+        r.h
+      );
+      let s = SYNC_BEGIN + "\x1B[?25l";
+      for (let i = 0; i < r.h; i++) s += cursorTo2(r.x, r.y + i) + "\x1B[0m" + (lines[i] ?? "");
+      this.out.write(s + SYNC_END);
     } else if (this.createMenu) {
       const lines = createMenuLines(this.createMenu.where, r.w, r.h);
       let s = SYNC_BEGIN + "\x1B[?25l";
@@ -2317,23 +2652,36 @@ var Compositor = class {
   drawChrome() {
     if (this.tornDown || this.layout.tooSmall) return;
     const { sidebar, sepX, statusY } = this.layout;
-    const lines = sidebarLines(this.boxes, this.selectedId, sidebar.w, sidebar.h);
-    const selIdx = this.boxes.findIndex((b) => b.id === this.selectedId);
-    const selRow = selIdx >= 0 ? SIDEBAR_HEADER_LINES + selIdx : -1;
+    const { lines, rowOwner, headerRows } = sidebarLines(
+      this.boxes,
+      this.selectedId,
+      sidebar.w,
+      sidebar.h
+    );
     let s = SYNC_BEGIN + "\x1B[0m";
     for (let i = 0; i < lines.length; i++) {
-      const style = i === 0 ? SB_HEADER : i === selRow ? SB_SELECTED : SB_BODY;
+      const style = headerRows[i] ? SB_HEADER : rowOwner[i] === this.selectedId ? SB_SELECTED : SB_BODY;
       s += cursorTo2(0, i) + style + lines[i] + SGR_RESET;
     }
-    for (let y = 0; y < sidebar.h; y++) s += cursorTo2(sepX, y) + "\u2502";
+    for (let y = 0; y < sidebar.h; y++)
+      s += cursorTo2(sepX, y) + SB_HEADER + (y === 0 ? "\u256E" : "\u2502") + SGR_RESET;
     let status;
-    if (this.flashMsg) {
+    if (this.pendingConfirm) {
+      const w = this.layout.cols;
+      const txt = ` Destroy ${this.pendingConfirm.name}?  y = confirm  \xB7  any other key = cancel `.slice(0, w).padEnd(w);
+      status = `\x1B[7m${txt}\x1B[0m`;
+    } else if (this.flashMsg) {
       const w = this.layout.cols;
       const txt = ` ${this.flashMsg} `.slice(0, w).padEnd(w);
       status = `\x1B[7m${txt}\x1B[0m`;
     } else {
       const stateLabel = this.selectedId === NEW_BOX_ID ? "create" : this.menu ? "menu" : this.session && this.activeMode === "shell" ? "shell" : void 0;
-      status = statusLine(this.selectedBox(), this.layout.cols, stateLabel);
+      status = statusLine(
+        this.selectedBox(),
+        this.layout.cols,
+        stateLabel,
+        this.leaderActive ? ADVANCED_HINT_GROUPS : void 0
+      );
     }
     s += cursorTo2(0, statusY) + status;
     this.out.write(s + SYNC_END);
@@ -2360,6 +2708,7 @@ var Compositor = class {
     if (this.pollTimer) clearInterval(this.pollTimer);
     if (this.resizeTimer) clearTimeout(this.resizeTimer);
     if (this.flashTimer) clearTimeout(this.flashTimer);
+    if (this.leaderLingerTimer) clearTimeout(this.leaderLingerTimer);
     this.parser.dispose();
     this.disposeSession();
     this.inp.off("data", this.onData);
@@ -2387,7 +2736,15 @@ function scoped(all, projectRoot, boxes) {
   return sortBoxes(all ? boxes : boxes.filter((b) => b.projectRoot === projectRoot));
 }
 function toSidebar(b) {
-  return { id: b.id, name: b.name, state: b.state, claudeActivity: b.claudeActivity };
+  return {
+    id: b.id,
+    name: b.name,
+    state: b.state,
+    claudeActivity: b.claudeActivity,
+    sessionTitle: b.claudeSessionTitle,
+    index: b.projectIndex,
+    project: b.projectRoot
+  };
 }
 var dashboardCommand = new Command7("dashboard").description("Box list + the selected box live Agent session").argument("[box]", "initial box (default: first running box; -p restricts to the cwd project)").option("-p, --project", "only this project's boxes (default: all boxes globally)").action(async (idOrName, opts) => {
   try {
@@ -2437,6 +2794,9 @@ var dashboardCommand = new Command7("dashboard").description("Box list + the sel
       if (boxId === NEW_BOX_ID) return { kind: "create-menu", where: project.root };
       const box = (await listBoxes()).find((b) => b.id === boxId);
       if (!box) return { kind: "placeholder", lines: ["", "  box not found"] };
+      if (box.state === "paused" || box.state === "stopped") {
+        return { kind: "lifecycle-menu", state: box.state };
+      }
       if (box.state !== "running") {
         return {
           kind: "placeholder",
@@ -2552,6 +2912,21 @@ var dashboardCommand = new Command7("dashboard").description("Box list + the sel
       detach(process.execPath, [process.argv[1], "code", box.name, "--no-wait"]);
       return "Launching VS Code / Cursor\u2026";
     };
+    const resumeBox = async (boxId) => {
+      const box = (await listBoxes()).find((b) => b.id === boxId);
+      if (!box) throw new Error("box not found");
+      if (box.state === "paused") await unpauseBox(box.id);
+      else await startBox(box.id);
+    };
+    const pauseBoxAction = async (boxId) => {
+      await pauseBox(boxId);
+    };
+    const stopBoxAction = async (boxId) => {
+      await stopBox(boxId);
+    };
+    const destroyBoxAction = async (boxId) => {
+      await destroyBox(boxId);
+    };
     const compositor = new Compositor(
       {
         ptySpawn,
@@ -2561,6 +2936,10 @@ var dashboardCommand = new Command7("dashboard").description("Box list + the sel
         startClaude,
         openShell,
         createNewBox,
+        resumeBox,
+        pauseBox: pauseBoxAction,
+        stopBox: stopBoxAction,
+        destroyBox: destroyBoxAction,
         openVnc,
         openCode,
         openWeb
@@ -2745,28 +3124,40 @@ function renderTable(boxes, stream) {
     (row2) => row2.map((cell, i) => padCell(cell ?? plain(""), i)).join("  ").trimEnd()
   ).join("\n");
 }
-async function buildListText() {
+async function scopedBoxes(all) {
   const boxes = await listBoxes();
-  if (boxes.length === 0) return "no boxes \u2014 run `agentbox create` to make one";
+  if (all) return { boxes, projectRoot: "", scoped: false };
+  const { root } = await findProjectRoot(process.cwd());
+  return { boxes: boxes.filter((b) => b.projectRoot === root), projectRoot: root, scoped: true };
+}
+async function buildListText(all) {
+  const { boxes, projectRoot, scoped: scoped2 } = await scopedBoxes(all);
+  if (boxes.length === 0) {
+    if (scoped2) {
+      return `no boxes in this project (${projectRoot}) \u2014 run \`agentbox create\`, or \`agentbox list --all\` to see all`;
+    }
+    return "no boxes \u2014 run `agentbox create` to make one";
+  }
   return renderTable(boxes, process.stdout);
 }
 var listCommand2 = withWatchOptions(
-  new Command9("list").alias("ls").description("List all known agent boxes").option("-j, --json", "machine-readable JSON output")
+  new Command9("list").alias("ls").description("List agent boxes in the current project (-a for all)").option("-j, --json", "machine-readable JSON output").option("-a, --all", "include boxes from all projects")
 ).action(async (opts) => {
   if (opts.json && opts.watch) {
     log11.error("cannot combine --json with --watch");
     process.exit(2);
   }
+  const all = opts.all ?? false;
   if (opts.watch) {
-    await watchRender(buildListText, opts.interval);
+    await watchRender(() => buildListText(all), opts.interval);
     return;
   }
   if (opts.json) {
-    const boxes = await listBoxes();
+    const { boxes } = await scopedBoxes(all);
     process.stdout.write(JSON.stringify(boxes, null, 2) + "\n");
     return;
   }
-  process.stdout.write(await buildListText() + "\n");
+  process.stdout.write(await buildListText(all) + "\n");
 });
 
 // src/commands/logs.ts