@mirrowel/opencode-subagent-explorer 0.1.0-dev.1

package/dist/wizard.js

@@ -0,0 +1,1580 @@
+// @bun
+// src/wizard.tsx
+import { memo as _$memo } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { useTerminalDimensions } from "@opentui/solid";
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+
+// src/sessions.ts
+var CALL_TIMEOUT_MS = 5000;
+var BUILTIN_AGENTS = new Set(["build", "plan"]);
+function withTimeout(fn, ms = CALL_TIMEOUT_MS) {
+  return Promise.race([Promise.resolve().then(fn).catch(() => {
+    return;
+  }), new Promise((resolve) => setTimeout(() => resolve(undefined), ms))]);
+}
+function unwrap(value) {
+  if (value && typeof value === "object" && "data" in value)
+    return value.data;
+  return value;
+}
+function toMillis(value) {
+  if (typeof value === "number")
+    return value;
+  if (typeof value === "string") {
+    const parsed = Date.parse(value);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  }
+  return;
+}
+function normalizeSession(raw) {
+  if (!raw || typeof raw !== "object")
+    return;
+  const record = raw;
+  const id = typeof record.id === "string" ? record.id : undefined;
+  if (!id)
+    return;
+  const agentRaw = record.agent;
+  const agent = typeof agentRaw === "string" ? agentRaw : typeof agentRaw?.id === "string" ? agentRaw.id : typeof agentRaw?.agentID === "string" ? agentRaw.agentID : undefined;
+  const time = record.time && typeof record.time === "object" ? record.time : {};
+  return {
+    id,
+    parentID: typeof record.parentID === "string" ? record.parentID : undefined,
+    title: typeof record.title === "string" && record.title !== "" ? record.title : undefined,
+    agent,
+    directory: typeof record.directory === "string" ? record.directory : undefined,
+    created: toMillis(time.created ?? record.time_created),
+    updated: toMillis(time.updated ?? record.time_updated)
+  };
+}
+async function fetchSessions(client, directory) {
+  const namespace = client?.session;
+  if (!namespace?.list)
+    return;
+  const calls = [
+    () => namespace.list({ directory }),
+    () => namespace.list({ query: { directory } })
+  ];
+  for (const call of calls) {
+    const result = unwrap(await withTimeout(call));
+    if (Array.isArray(result))
+      return result.map(normalizeSession).filter((s) => !!s);
+  }
+  return;
+}
+async function fetchActiveSessionIDs(client) {
+  const namespace = client?.session;
+  if (!namespace)
+    return;
+  if (typeof namespace.active === "function") {
+    const active = unwrap(await withTimeout(() => namespace.active()));
+    if (active && typeof active === "object") {
+      const ids = new Set;
+      for (const [id, value] of Object.entries(active)) {
+        if (value)
+          ids.add(id);
+      }
+      return ids;
+    }
+  }
+  if (typeof namespace.status === "function") {
+    const status = unwrap(await withTimeout(() => namespace.status()));
+    if (status && typeof status === "object") {
+      const ids = new Set;
+      for (const [id, value] of Object.entries(status)) {
+        const state = value?.status ?? value;
+        if (state === "busy" || state === "retry")
+          ids.add(id);
+      }
+      return ids;
+    }
+  }
+  return;
+}
+function buildSessionTree(sessions, rootID) {
+  const byParent = new Map;
+  for (const session of sessions) {
+    if (!session.parentID)
+      continue;
+    const list = byParent.get(session.parentID) ?? [];
+    list.push(session);
+    byParent.set(session.parentID, list);
+  }
+  const createdOf = (session) => session.created ?? 0;
+  const sortSiblings = (list) => [...list].sort((a, b) => createdOf(a) - createdOf(b));
+  const visited = new Set([rootID]);
+  const build = (list, depth) => sortSiblings(list).map((session) => {
+    if (visited.has(session.id))
+      return { session, depth, children: [] };
+    visited.add(session.id);
+    const children = build(byParent.get(session.id) ?? [], depth + 1);
+    return { session, depth, children };
+  });
+  return build(byParent.get(rootID) ?? [], 0);
+}
+function cleanupTargets(nodes, activeIDs) {
+  const deletable = [];
+  const sparedActive = [];
+  const walk = (list) => {
+    for (const node of list) {
+      walk(node.children);
+      if (activeIDs?.has(node.session.id))
+        sparedActive.push(node.session);
+      else
+        deletable.push(node.session);
+    }
+  };
+  walk(nodes);
+  return { deletable, sparedActive };
+}
+function currentSessionID(explicit, sessions) {
+  if (explicit)
+    return explicit;
+  let newest;
+  for (const session of sessions) {
+    const stamp = session.updated ?? session.created ?? 0;
+    const newestStamp = newest?.updated ?? newest?.created ?? 0;
+    if (!newest || stamp > newestStamp)
+      newest = session;
+  }
+  return newest?.id;
+}
+function hiddenAgentIDs(config) {
+  const agents = config?.agent;
+  const hidden = new Set;
+  if (!agents || typeof agents !== "object")
+    return hidden;
+  for (const [id, entry] of Object.entries(agents)) {
+    if (entry && typeof entry === "object" && entry.hidden === true)
+      hidden.add(id);
+  }
+  return hidden;
+}
+function configAgentIDs(config) {
+  const agents = config?.agent;
+  if (!agents || typeof agents !== "object")
+    return new Set;
+  return new Set(Object.keys(agents));
+}
+function isHiddenAgent(agent, hidden, configAgents) {
+  if (!agent)
+    return false;
+  if (hidden.has(agent))
+    return true;
+  return !configAgents.has(agent) && !BUILTIN_AGENTS.has(agent) && !agent.startsWith("av:");
+}
+async function deleteSession(client, sessionID) {
+  const namespace = client?.session;
+  if (!namespace)
+    return false;
+  const shapes = [];
+  if (typeof namespace.delete === "function") {
+    shapes.push(() => namespace.delete({ sessionID }), () => namespace.delete({ path: { sessionID } }), () => namespace.delete({ path: { id: sessionID } }), () => namespace.delete({ id: sessionID }));
+  }
+  if (typeof namespace.remove === "function") {
+    shapes.push(() => namespace.remove({ sessionID }), () => namespace.remove({ path: { sessionID } }));
+  }
+  for (const call of shapes) {
+    const result = await withTimeout(call);
+    if (result !== undefined)
+      return true;
+  }
+  return false;
+}
+async function fetchSessionDetails(client, sessionID) {
+  const namespace = client?.session;
+  if (!namespace?.messages)
+    return;
+  const calls = [
+    () => namespace.messages({ sessionID, limit: 50 }),
+    () => namespace.messages({ path: { id: sessionID }, query: { limit: 50 } })
+  ];
+  for (const call of calls) {
+    const result = unwrap(await withTimeout(call, 4000));
+    const messages = Array.isArray(result) ? result : undefined;
+    if (!messages)
+      continue;
+    let model;
+    for (let i = messages.length - 1;i >= 0; i -= 1) {
+      const info = messages[i]?.info ?? messages[i];
+      const modelRef = info?.model;
+      if (modelRef?.providerID && modelRef?.modelID) {
+        model = `${modelRef.providerID}/${modelRef.modelID}${modelRef.variantID ? ` @${modelRef.variantID}` : ""}`;
+        break;
+      }
+    }
+    let firstPrompt;
+    for (const message of messages) {
+      const info = message?.info ?? message;
+      if (info?.role !== "user")
+        continue;
+      const text = firstTextOf(message.parts);
+      if (text) {
+        firstPrompt = text.length > 400 ? `${text.slice(0, 400)}\u2026` : text;
+        break;
+      }
+    }
+    return { messageCount: messages.length, model, firstPrompt };
+  }
+  return;
+}
+function firstTextOf(parts) {
+  if (!Array.isArray(parts))
+    return;
+  for (const part of parts) {
+    const text = part?.text ?? part?.part?.text;
+    if (typeof text === "string" && text.trim() !== "")
+      return text.trim();
+  }
+  return;
+}
+function formatAge(timestamp, now = Date.now()) {
+  if (!timestamp)
+    return "\u2014";
+  const delta = Math.max(0, now - timestamp);
+  const minutes = Math.floor(delta / 60000);
+  if (minutes < 1)
+    return "just now";
+  if (minutes < 60)
+    return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24)
+    return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function parentCandidates(sessions) {
+  const parents = new Set;
+  for (const session of sessions) {
+    if (session.parentID)
+      parents.add(session.parentID);
+  }
+  return sessions.filter((session) => parents.has(session.id)).sort((a, b) => (b.updated ?? b.created ?? 0) - (a.updated ?? a.created ?? 0));
+}
+
+// src/wizard.tsx
+async function loadExplorerData(api, directory) {
+  const sessions = await fetchSessions(api.client, directory);
+  if (!sessions)
+    return;
+  const activeIDs = await fetchActiveSessionIDs(api.client);
+  return {
+    sessions,
+    activeIDs,
+    activeKnown: activeIDs !== undefined,
+    hidden: hiddenAgentIDs(api.state.config),
+    configAgents: configAgentIDs(api.state.config)
+  };
+}
+function explorerRows(tree, data) {
+  const rows = [];
+  const walk = (nodes, depth) => {
+    for (const node of nodes) {
+      rows.push({
+        session: node.session,
+        depth,
+        running: data.activeIDs?.has(node.session.id) ?? false,
+        hidden: isHiddenAgent(node.session.agent, data.hidden, data.configAgents)
+      });
+      walk(node.children, depth + 1);
+    }
+  };
+  walk(tree, 0);
+  return rows;
+}
+function themeOf(api) {
+  return api.theme.current;
+}
+var OWN_SIZE_KV = "subagent-explorer.ui-width";
+var OWN_HEIGHT_PERCENT_KV = "subagent-explorer.ui-height-percent";
+var HOST_SIZE_KV = "config-studio.ui-width";
+var HOST_HEIGHT_PERCENT_KV = "config-studio.ui-height-percent";
+var HEIGHT_PERCENT_MIN = 25;
+var HEIGHT_PERCENT_MAX = 100;
+var HEIGHT_PRESETS = [{
+  key: "1",
+  label: "compact",
+  value: 35
+}, {
+  key: "2",
+  label: "normal",
+  value: 50
+}, {
+  key: "3",
+  label: "tall",
+  value: 70
+}, {
+  key: "4",
+  label: "max",
+  value: 100
+}];
+var DIALOG_WIDTH_COLUMNS = {
+  medium: 60,
+  large: 88,
+  xlarge: 116
+};
+function isEmbedded(api) {
+  return api.dialogScope === "embedded";
+}
+function sizeKey(api) {
+  return isEmbedded(api) ? HOST_SIZE_KV : OWN_SIZE_KV;
+}
+function heightKey(api) {
+  return isEmbedded(api) ? HOST_HEIGHT_PERCENT_KV : OWN_HEIGHT_PERCENT_KV;
+}
+function dialogSizeOf(api) {
+  const value = api.kv.get(sizeKey(api), "large");
+  if (value === "medium" || value === "large" || value === "xlarge")
+    return value;
+  return "large";
+}
+function setDialogSize(api, size) {
+  api.kv.set(sizeKey(api), size);
+  api.ui.dialog.setSize(size);
+}
+function nextDialogSize(api) {
+  const current = dialogSizeOf(api);
+  if (current === "medium")
+    return "large";
+  if (current === "large")
+    return "xlarge";
+  return "medium";
+}
+function clampHeightPercent(value) {
+  return Math.max(HEIGHT_PERCENT_MIN, Math.min(HEIGHT_PERCENT_MAX, Math.round(value)));
+}
+function dialogHeightPercent(api) {
+  const value = api.kv.get(heightKey(api), 50);
+  return typeof value === "number" && Number.isFinite(value) ? clampHeightPercent(value) : 50;
+}
+function setDialogHeightPercent(api, value) {
+  api.kv.set(heightKey(api), clampHeightPercent(value));
+}
+function useDialogSize(api) {
+  createEffect(() => api.ui.dialog.setSize(dialogSizeOf(api)));
+}
+function computeDialogRows(percent, terminalHeight, chromeRows, minRows) {
+  const clampedPercent = Math.min(100, Math.max(10, Math.max(1, Math.round(percent)) || 1));
+  const backdropBudget = Math.max(minRows + chromeRows, Math.floor(terminalHeight * 0.75) - 1);
+  const available = Math.max(minRows, backdropBudget - chromeRows);
+  const requested = Math.max(minRows, Math.floor(terminalHeight * clampedPercent / 100) - chromeRows);
+  return {
+    availableRows: available,
+    targetRows: Math.min(requested, available)
+  };
+}
+function listRows(api, terminalHeight, chromeRows = 8, minRows = 3) {
+  return computeDialogRows(dialogHeightPercent(api), terminalHeight, chromeRows, minRows).targetRows;
+}
+function contentWidth(api) {
+  return DIALOG_WIDTH_COLUMNS[dialogSizeOf(api)] - 8;
+}
+function cappedHeight(count, max, min = 1) {
+  return Math.max(min, Math.min(count, max));
+}
+function truncate(text, width) {
+  return text.length <= width ? text : `${text.slice(0, Math.max(1, width - 1))}\u2026`;
+}
+function rowTitle(row) {
+  return row.session.title ?? row.session.id;
+}
+function showTreeOnce(api, props) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value, clear = true) => {
+      if (settled)
+        return;
+      settled = true;
+      resolve(value);
+      if (clear)
+        api.ui.dialog.clear();
+    };
+    api.ui.dialog.replace(() => _$createComponent(SubagentTreeDialog, {
+      api,
+      get rows() {
+        return props.rows;
+      },
+      get rootTitle() {
+        return props.rootTitle;
+      },
+      get rootID() {
+        return props.rootID;
+      },
+      get activeKnown() {
+        return props.activeKnown;
+      },
+      get idleCount() {
+        return props.idleCount;
+      },
+      onDone: done
+    }), () => done({
+      type: "exit"
+    }, false));
+  });
+}
+function SubagentTreeDialog(props) {
+  const theme = () => themeOf(props.api);
+  const dimensions = useTerminalDimensions();
+  useDialogSize(props.api);
+  const popMode = props.api.mode.push("subagent-explorer.dialog");
+  const [selected, setSelected] = createSignal(0);
+  const current = createMemo(() => props.rows[selected()]);
+  let scroll;
+  const listHeight = createMemo(() => cappedHeight(props.rows.length, listRows(props.api, dimensions().height)));
+  const agentWidth = 16;
+  const badgeWidth = 9;
+  const ageWidth = 9;
+  const titleWidth = createMemo(() => Math.max(16, contentWidth(props.api) - agentWidth - badgeWidth - ageWidth - 4));
+  const move = (delta) => setSelected((value) => {
+    const next = Math.max(0, Math.min(props.rows.length - 1, value + delta));
+    scroll?.scrollTo(Math.max(0, next - 2));
+    return next;
+  });
+  const choose = () => {
+    const row = current();
+    if (row)
+      props.onDone({
+        type: "delete",
+        row
+      });
+  };
+  const details = () => {
+    const row = current();
+    if (row)
+      props.onDone({
+        type: "details",
+        row
+      });
+  };
+  const commandPrefix = `subagent-explorer.tree.${Math.random().toString(36).slice(2)}`;
+  const shield = (ctx) => {
+    ctx.event?.preventDefault?.();
+    ctx.event?.stopPropagation?.();
+  };
+  const commands = [{
+    name: `${commandPrefix}.up`,
+    title: "Previous",
+    run: (ctx) => {
+      shield(ctx);
+      move(-1);
+    }
+  }, {
+    name: `${commandPrefix}.down`,
+    title: "Next",
+    run: (ctx) => {
+      shield(ctx);
+      move(1);
+    }
+  }, {
+    name: `${commandPrefix}.select`,
+    title: "Delete session",
+    run: () => choose()
+  }, {
+    name: `${commandPrefix}.details`,
+    title: "Session details",
+    run: () => details()
+  }, {
+    name: `${commandPrefix}.cleanup`,
+    title: "Clean up idle sessions",
+    run: () => props.onDone({
+      type: "cleanup"
+    })
+  }, {
+    name: `${commandPrefix}.refresh`,
+    title: "Refresh",
+    run: () => props.onDone({
+      type: "refresh"
+    })
+  }, {
+    name: `${commandPrefix}.switch`,
+    title: "Switch root session",
+    run: () => props.onDone({
+      type: "switch-root"
+    })
+  }, ...isEmbedded(props.api) ? [] : [{
+    name: `${commandPrefix}.size`,
+    title: "Dialog size",
+    run: () => props.onDone({
+      type: "size"
+    })
+  }], {
+    name: `${commandPrefix}.back`,
+    title: "Exit",
+    run: () => props.onDone({
+      type: "exit"
+    })
+  }];
+  const unregister = props.api.keymap.registerLayer({
+    priority: 1e4,
+    commands,
+    bindings: [{
+      key: "up",
+      cmd: `${commandPrefix}.up`,
+      desc: "Previous"
+    }, {
+      key: "ctrl+p",
+      cmd: `${commandPrefix}.up`,
+      desc: "Previous"
+    }, {
+      key: "down",
+      cmd: `${commandPrefix}.down`,
+      desc: "Next"
+    }, {
+      key: "ctrl+n",
+      cmd: `${commandPrefix}.down`,
+      desc: "Next"
+    }, {
+      key: "enter",
+      cmd: `${commandPrefix}.select`,
+      desc: "Delete"
+    }, {
+      key: "i",
+      cmd: `${commandPrefix}.details`,
+      desc: "Details"
+    }, {
+      key: "c",
+      cmd: `${commandPrefix}.cleanup`,
+      desc: "Cleanup idle"
+    }, {
+      key: "r",
+      cmd: `${commandPrefix}.refresh`,
+      desc: "Refresh"
+    }, {
+      key: "s",
+      cmd: `${commandPrefix}.switch`,
+      desc: "Switch root"
+    }, ...isEmbedded(props.api) ? [] : [{
+      key: "o",
+      cmd: `${commandPrefix}.size`,
+      desc: "Dialog size"
+    }], {
+      key: "escape",
+      cmd: `${commandPrefix}.back`,
+      desc: "Exit"
+    }]
+  });
+  onCleanup(() => {
+    unregister();
+    popMode();
+  });
+  const runningCount = props.rows.filter((row) => row.running).length;
+  const hiddenCount = props.rows.filter((row) => row.hidden).length;
+  const statusLabel = props.activeKnown ? runningCount > 0 ? `${runningCount} running` : "none running" : "status unknown";
+  return (() => {
+    var _el$ = _$createElement("box"), _el$2 = _$createElement("box"), _el$3 = _$createElement("text"), _el$4 = _$createElement("b"), _el$5 = _$createElement("text"), _el$7 = _$createElement("box"), _el$8 = _$createElement("text"), _el$9 = _$createElement("text"), _el$1 = _$createElement("text"), _el$10 = _$createElement("scrollbox"), _el$11 = _$createElement("box"), _el$12 = _$createElement("box"), _el$13 = _$createElement("text"), _el$15 = _$createElement("text"), _el$17 = _$createElement("text"), _el$19 = _$createElement("text"), _el$21 = _$createElement("text");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$7);
+    _$insertNode(_el$, _el$10);
+    _$insertNode(_el$, _el$12);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "width", "100%");
+    _$setProp(_el$, "paddingLeft", 2);
+    _$setProp(_el$, "paddingRight", 2);
+    _$setProp(_el$, "paddingTop", 1);
+    _$setProp(_el$, "paddingBottom", 1);
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$5);
+    _$setProp(_el$2, "flexDirection", "row");
+    _$setProp(_el$2, "justifyContent", "space-between");
+    _$setProp(_el$2, "width", "100%");
+    _$setProp(_el$2, "marginBottom", 1);
+    _$insertNode(_el$3, _el$4);
+    _$insert(_el$4, () => `Subagent sessions \u2014 ${truncate(props.rootTitle, 40)}`);
+    _$insertNode(_el$5, _$createTextNode(`esc exit`));
+    _$setProp(_el$5, "onMouseUp", () => props.onDone({
+      type: "exit"
+    }));
+    _$insertNode(_el$7, _el$8);
+    _$insertNode(_el$7, _el$9);
+    _$insertNode(_el$7, _el$1);
+    _$setProp(_el$7, "flexDirection", "row");
+    _$setProp(_el$7, "gap", 3);
+    _$setProp(_el$7, "marginBottom", 1);
+    _$insert(_el$8, () => `${props.rows.length} session(s)`);
+    _$insert(_el$9, statusLabel);
+    _$insert(_el$7, _$createComponent(Show, {
+      when: hiddenCount > 0,
+      get children() {
+        var _el$0 = _$createElement("text");
+        _$insert(_el$0, `${hiddenCount} hidden`);
+        _$effect((_$p) => _$setProp(_el$0, "fg", theme().warning, _$p));
+        return _el$0;
+      }
+    }), _el$1);
+    _$insert(_el$1, () => `${props.idleCount} idle`);
+    _$insertNode(_el$10, _el$11);
+    _$use((element) => scroll = element, _el$10);
+    _$setProp(_el$11, "flexDirection", "column");
+    _$setProp(_el$11, "gap", 0);
+    _$insert(_el$11, _$createComponent(Show, {
+      get when() {
+        return props.rows.length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$25 = _$createElement("box"), _el$26 = _$createElement("text");
+          _$insertNode(_el$25, _el$26);
+          _$setProp(_el$25, "flexDirection", "row");
+          _$setProp(_el$25, "paddingLeft", 1);
+          _$setProp(_el$25, "paddingTop", 1);
+          _$setProp(_el$25, "paddingBottom", 1);
+          _$insertNode(_el$26, _$createTextNode(`No subagent sessions in this session's tree.`));
+          _$effect((_$p) => _$setProp(_el$26, "fg", theme().textMuted, _$p));
+          return _el$25;
+        })();
+      },
+      get children() {
+        return _$createComponent(For, {
+          get each() {
+            return props.rows;
+          },
+          children: (row, index) => {
+            const active = createMemo(() => selected() === index());
+            const titleFg = createMemo(() => active() ? theme().background : row.running ? theme().success : row.hidden ? theme().textMuted : theme().text);
+            const badgeFg = createMemo(() => active() ? theme().background : theme().warning);
+            return (() => {
+              var _el$28 = _$createElement("box"), _el$29 = _$createElement("text"), _el$30 = _$createElement("text"), _el$31 = _$createElement("b"), _el$34 = _$createElement("text"), _el$35 = _$createElement("text");
+              _$insertNode(_el$28, _el$29);
+              _$insertNode(_el$28, _el$30);
+              _$insertNode(_el$28, _el$34);
+              _$insertNode(_el$28, _el$35);
+              _$setProp(_el$28, "flexDirection", "row");
+              _$setProp(_el$28, "width", "100%");
+              _$setProp(_el$28, "gap", 1);
+              _$setProp(_el$28, "paddingRight", 1);
+              _$setProp(_el$28, "onMouseOver", () => setSelected(index()));
+              _$setProp(_el$28, "onMouseUp", () => props.onDone({
+                type: "delete",
+                row
+              }));
+              _$setProp(_el$29, "flexShrink", 0);
+              _$insert(_el$29, () => row.running ? "\u25B6" : "\xB7");
+              _$insertNode(_el$30, _el$31);
+              _$setProp(_el$30, "width", 16);
+              _$setProp(_el$30, "flexShrink", 0);
+              _$setProp(_el$30, "wrapMode", "none");
+              _$setProp(_el$30, "overflow", "hidden");
+              _$insert(_el$31, () => truncate(row.session.agent ?? "agent", agentWidth));
+              _$insert(_el$28, _$createComponent(Show, {
+                get when() {
+                  return row.hidden;
+                },
+                get children() {
+                  var _el$32 = _$createElement("text");
+                  _$insertNode(_el$32, _$createTextNode(`[hidden]`));
+                  _$setProp(_el$32, "width", 9);
+                  _$setProp(_el$32, "flexShrink", 0);
+                  _$setProp(_el$32, "wrapMode", "none");
+                  _$setProp(_el$32, "overflow", "hidden");
+                  _$effect((_$p) => _$setProp(_el$32, "fg", badgeFg(), _$p));
+                  return _el$32;
+                }
+              }), _el$34);
+              _$setProp(_el$34, "flexGrow", 1);
+              _$setProp(_el$34, "wrapMode", "none");
+              _$setProp(_el$34, "overflow", "hidden");
+              _$insert(_el$34, () => truncate(rowTitle(row), titleWidth()));
+              _$setProp(_el$35, "width", 9);
+              _$setProp(_el$35, "flexShrink", 0);
+              _$setProp(_el$35, "wrapMode", "none");
+              _$setProp(_el$35, "overflow", "hidden");
+              _$insert(_el$35, () => formatAge(row.session.updated ?? row.session.created));
+              _$effect((_p$) => {
+                var _v$10 = 1 + row.depth * 2, _v$11 = active() ? theme().primary : theme().backgroundPanel, _v$12 = titleFg(), _v$13 = active() ? theme().background : theme().textMuted, _v$14 = titleWidth(), _v$15 = titleFg(), _v$16 = active() ? theme().background : theme().textMuted;
+                _v$10 !== _p$.e && (_p$.e = _$setProp(_el$28, "paddingLeft", _v$10, _p$.e));
+                _v$11 !== _p$.t && (_p$.t = _$setProp(_el$28, "backgroundColor", _v$11, _p$.t));
+                _v$12 !== _p$.a && (_p$.a = _$setProp(_el$29, "fg", _v$12, _p$.a));
+                _v$13 !== _p$.o && (_p$.o = _$setProp(_el$30, "fg", _v$13, _p$.o));
+                _v$14 !== _p$.i && (_p$.i = _$setProp(_el$34, "width", _v$14, _p$.i));
+                _v$15 !== _p$.n && (_p$.n = _$setProp(_el$34, "fg", _v$15, _p$.n));
+                _v$16 !== _p$.s && (_p$.s = _$setProp(_el$35, "fg", _v$16, _p$.s));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined,
+                i: undefined,
+                n: undefined,
+                s: undefined
+              });
+              return _el$28;
+            })();
+          }
+        });
+      }
+    }));
+    _$insertNode(_el$12, _el$13);
+    _$insertNode(_el$12, _el$15);
+    _$insertNode(_el$12, _el$17);
+    _$insertNode(_el$12, _el$19);
+    _$insertNode(_el$12, _el$21);
+    _$setProp(_el$12, "flexDirection", "row");
+    _$setProp(_el$12, "gap", 3);
+    _$setProp(_el$12, "marginTop", 1);
+    _$insertNode(_el$13, _$createTextNode(`enter delete`));
+    _$insertNode(_el$15, _$createTextNode(`i details`));
+    _$insertNode(_el$17, _$createTextNode(`c cleanup idle`));
+    _$insertNode(_el$19, _$createTextNode(`r refresh`));
+    _$insertNode(_el$21, _$createTextNode(`s switch session`));
+    _$insert(_el$12, _$createComponent(Show, {
+      get when() {
+        return !isEmbedded(props.api);
+      },
+      get children() {
+        var _el$23 = _$createElement("text");
+        _$insertNode(_el$23, _$createTextNode(`o size`));
+        _$effect((_$p) => _$setProp(_el$23, "fg", theme().textMuted, _$p));
+        return _el$23;
+      }
+    }), null);
+    _$effect((_p$) => {
+      var _v$ = theme().text, _v$2 = theme().textMuted, _v$3 = theme().textMuted, _v$4 = runningCount > 0 ? theme().success : theme().textMuted, _v$5 = theme().textMuted, _v$6 = listHeight(), _v$7 = theme().textMuted, _v$8 = theme().textMuted, _v$9 = theme().textMuted, _v$0 = theme().textMuted, _v$1 = theme().textMuted;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$3, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$5, "fg", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$8, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$9, "fg", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp(_el$1, "fg", _v$5, _p$.i));
+      _v$6 !== _p$.n && (_p$.n = _$setProp(_el$10, "maxHeight", _v$6, _p$.n));
+      _v$7 !== _p$.s && (_p$.s = _$setProp(_el$13, "fg", _v$7, _p$.s));
+      _v$8 !== _p$.h && (_p$.h = _$setProp(_el$15, "fg", _v$8, _p$.h));
+      _v$9 !== _p$.r && (_p$.r = _$setProp(_el$17, "fg", _v$9, _p$.r));
+      _v$0 !== _p$.d && (_p$.d = _$setProp(_el$19, "fg", _v$0, _p$.d));
+      _v$1 !== _p$.l && (_p$.l = _$setProp(_el$21, "fg", _v$1, _p$.l));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined
+    });
+    return _el$;
+  })();
+}
+function showDangerConfirm(api, props) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value) => {
+      if (settled)
+        return;
+      settled = true;
+      resolve(value);
+      api.ui.dialog.clear();
+    };
+    api.ui.dialog.replace(() => _$createComponent(DangerConfirmDialog, {
+      api,
+      get title() {
+        return props.title;
+      },
+      get message() {
+        return props.message;
+      },
+      get confirmLabel() {
+        return props.confirmLabel;
+      },
+      onDone: done
+    }), () => done(false));
+  });
+}
+function DangerConfirmDialog(props) {
+  const theme = () => themeOf(props.api);
+  useDialogSize(props.api);
+  const popMode = props.api.mode.push("subagent-explorer.confirm");
+  const commandPrefix = `subagent-explorer.confirm.${Math.random().toString(36).slice(2)}`;
+  const unregister = props.api.keymap.registerLayer({
+    priority: 1e4,
+    commands: [{
+      name: `${commandPrefix}.confirm`,
+      title: "Confirm",
+      run: () => props.onDone(true)
+    }, {
+      name: `${commandPrefix}.cancel`,
+      title: "Cancel",
+      run: () => props.onDone(false)
+    }],
+    bindings: [{
+      key: "enter",
+      cmd: `${commandPrefix}.confirm`,
+      desc: "Confirm"
+    }, {
+      key: "escape",
+      cmd: `${commandPrefix}.cancel`,
+      desc: "Cancel"
+    }]
+  });
+  onCleanup(() => {
+    unregister();
+    popMode();
+  });
+  return (() => {
+    var _el$36 = _$createElement("box"), _el$37 = _$createElement("text"), _el$38 = _$createElement("b"), _el$39 = _$createElement("text"), _el$40 = _$createElement("box"), _el$41 = _$createElement("box"), _el$42 = _$createElement("text"), _el$43 = _$createElement("b"), _el$44 = _$createElement("box"), _el$45 = _$createElement("text");
+    _$insertNode(_el$36, _el$37);
+    _$insertNode(_el$36, _el$39);
+    _$insertNode(_el$36, _el$40);
+    _$setProp(_el$36, "flexDirection", "column");
+    _$setProp(_el$36, "width", "100%");
+    _$setProp(_el$36, "paddingLeft", 2);
+    _$setProp(_el$36, "paddingRight", 2);
+    _$setProp(_el$36, "paddingTop", 1);
+    _$setProp(_el$36, "paddingBottom", 1);
+    _$setProp(_el$36, "gap", 1);
+    _$insertNode(_el$37, _el$38);
+    _$insert(_el$38, () => props.title);
+    _$insert(_el$39, () => props.message);
+    _$insertNode(_el$40, _el$41);
+    _$insertNode(_el$40, _el$44);
+    _$setProp(_el$40, "flexDirection", "row");
+    _$setProp(_el$40, "gap", 4);
+    _$setProp(_el$40, "marginTop", 1);
+    _$insertNode(_el$41, _el$42);
+    _$setProp(_el$41, "paddingLeft", 1);
+    _$setProp(_el$41, "paddingRight", 1);
+    _$setProp(_el$41, "onMouseUp", () => props.onDone(true));
+    _$insertNode(_el$42, _el$43);
+    _$insert(_el$43, () => props.confirmLabel);
+    _$insertNode(_el$44, _el$45);
+    _$setProp(_el$44, "paddingLeft", 1);
+    _$setProp(_el$44, "paddingRight", 1);
+    _$setProp(_el$44, "onMouseUp", () => props.onDone(false));
+    _$insertNode(_el$45, _$createTextNode(`Cancel (esc)`));
+    _$effect((_p$) => {
+      var _v$17 = theme().error, _v$18 = theme().text, _v$19 = theme().error, _v$20 = theme().background, _v$21 = theme().textMuted;
+      _v$17 !== _p$.e && (_p$.e = _$setProp(_el$37, "fg", _v$17, _p$.e));
+      _v$18 !== _p$.t && (_p$.t = _$setProp(_el$39, "fg", _v$18, _p$.t));
+      _v$19 !== _p$.a && (_p$.a = _$setProp(_el$41, "backgroundColor", _v$19, _p$.a));
+      _v$20 !== _p$.o && (_p$.o = _$setProp(_el$42, "fg", _v$20, _p$.o));
+      _v$21 !== _p$.i && (_p$.i = _$setProp(_el$45, "fg", _v$21, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$36;
+  })();
+}
+function showInfo(api, props) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = () => {
+      if (settled)
+        return;
+      settled = true;
+      resolve();
+      api.ui.dialog.clear();
+    };
+    api.ui.dialog.replace(() => _$createComponent(InfoDialog, {
+      api,
+      get title() {
+        return props.title;
+      },
+      get message() {
+        return props.message;
+      },
+      onDone: done
+    }), done);
+  });
+}
+function InfoDialog(props) {
+  const theme = () => themeOf(props.api);
+  const dimensions = useTerminalDimensions();
+  useDialogSize(props.api);
+  const popMode = props.api.mode.push("subagent-explorer.info");
+  const commandPrefix = `subagent-explorer.info.${Math.random().toString(36).slice(2)}`;
+  const unregister = props.api.keymap.registerLayer({
+    priority: 1e4,
+    commands: [{
+      name: `${commandPrefix}.done`,
+      title: "Close",
+      run: () => props.onDone()
+    }],
+    bindings: [{
+      key: "enter",
+      cmd: `${commandPrefix}.done`,
+      desc: "Close"
+    }, {
+      key: "escape",
+      cmd: `${commandPrefix}.done`,
+      desc: "Close"
+    }]
+  });
+  onCleanup(() => {
+    unregister();
+    popMode();
+  });
+  const lines = props.message.split(`
+`);
+  const maxHeight = cappedHeight(lines.length, listRows(props.api, dimensions().height, 6, 3));
+  return (() => {
+    var _el$47 = _$createElement("box"), _el$48 = _$createElement("text"), _el$49 = _$createElement("b"), _el$50 = _$createElement("scrollbox"), _el$51 = _$createElement("box"), _el$52 = _$createElement("box"), _el$53 = _$createElement("text");
+    _$insertNode(_el$47, _el$48);
+    _$insertNode(_el$47, _el$50);
+    _$insertNode(_el$47, _el$52);
+    _$setProp(_el$47, "flexDirection", "column");
+    _$setProp(_el$47, "width", "100%");
+    _$setProp(_el$47, "paddingLeft", 2);
+    _$setProp(_el$47, "paddingRight", 2);
+    _$setProp(_el$47, "paddingTop", 1);
+    _$setProp(_el$47, "paddingBottom", 1);
+    _$insertNode(_el$48, _el$49);
+    _$insert(_el$49, () => props.title);
+    _$insertNode(_el$50, _el$51);
+    _$setProp(_el$50, "maxHeight", maxHeight);
+    _$setProp(_el$50, "marginTop", 1);
+    _$setProp(_el$51, "flexDirection", "column");
+    _$setProp(_el$51, "gap", 0);
+    _$insert(_el$51, _$createComponent(For, {
+      each: lines,
+      children: (line) => (() => {
+        var _el$55 = _$createElement("text");
+        _$insert(_el$55, () => line.replace(/^!!/, ""));
+        _$effect((_$p) => _$setProp(_el$55, "fg", line.startsWith("!!") ? theme().error : theme().text, _$p));
+        return _el$55;
+      })()
+    }));
+    _$insertNode(_el$52, _el$53);
+    _$setProp(_el$52, "flexDirection", "row");
+    _$setProp(_el$52, "gap", 3);
+    _$setProp(_el$52, "marginTop", 1);
+    _$insertNode(_el$53, _$createTextNode(`enter/esc close`));
+    _$effect((_p$) => {
+      var _v$22 = theme().text, _v$23 = theme().textMuted;
+      _v$22 !== _p$.e && (_p$.e = _$setProp(_el$48, "fg", _v$22, _p$.e));
+      _v$23 !== _p$.t && (_p$.t = _$setProp(_el$53, "fg", _v$23, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$47;
+  })();
+}
+function showConfirm(api, props) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value) => {
+      if (settled)
+        return;
+      settled = true;
+      resolve(value);
+      api.ui.dialog.clear();
+    };
+    api.ui.dialog.replace(() => api.ui.DialogConfirm({
+      title: props.title,
+      message: props.message,
+      onConfirm: () => done(true),
+      onCancel: () => done(false)
+    }), () => done(false));
+  });
+}
+async function deleteOne(api, row) {
+  const label = `${rowTitle(row)}${row.hidden ? " [hidden agent]" : ""}`;
+  const summary = `${label}
+agent: ${row.session.agent ?? "unknown"}
+last activity: ${formatAge(row.session.updated ?? row.session.created)}
+
+Deleting a session permanently removes it, its messages, and its history. The parent session keeps the task result text; only the jump target is lost.`;
+  const confirmed = row.running ? await showDangerConfirm(api, {
+    title: "Delete RUNNING subagent session?",
+    message: `${summary}
+
+!!This session is running right now. Deleting it interrupts the work in progress.`,
+    confirmLabel: "Delete anyway"
+  }) : await showConfirm(api, {
+    title: "Delete subagent session?",
+    message: summary
+  });
+  if (!confirmed)
+    return false;
+  const ok = await deleteSession(api.client, row.session.id);
+  api.ui.toast({
+    variant: ok ? "default" : "error",
+    title: ok ? "Session deleted" : "Delete failed",
+    message: ok ? label : `Could not delete ${label} \u2014 the host client exposes no working session delete.`
+  });
+  return ok;
+}
+async function runCleanup(api, plan, rootTitle) {
+  if (plan.deletable.length === 0) {
+    await showInfo(api, {
+      title: "Nothing to clean up",
+      message: plan.sparedActive.length > 0 ? `All ${plan.sparedActive.length} subagent session(s) are running right now.` : "There are no subagent sessions in this session's tree."
+    });
+    return 0;
+  }
+  const runningNote = plan.sparedActive.length > 0 ? `
+
+${plan.sparedActive.length} running session(s) will be spared.` : "";
+  const confirmed = await showDangerConfirm(api, {
+    title: `Delete ${plan.deletable.length} idle subagent session(s)?`,
+    message: `Permanently deletes every idle subagent session in "${truncate(rootTitle, 40)}"'s tree (nested children included), with all messages and history.${runningNote}`,
+    confirmLabel: "Delete idle sessions"
+  });
+  if (!confirmed)
+    return 0;
+  let deleted = 0;
+  for (const session of plan.deletable) {
+    if (await deleteSession(api.client, session.id))
+      deleted += 1;
+  }
+  const failed = plan.deletable.length - deleted;
+  api.ui.toast({
+    variant: failed > 0 ? "warning" : "default",
+    title: "Cleanup finished",
+    message: failed > 0 ? `Deleted ${deleted}, failed ${failed}.` : `Deleted ${deleted} session(s).`
+  });
+  return deleted;
+}
+function showRootPicker(api, sessions, currentRoot) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value) => {
+      if (settled)
+        return;
+      settled = true;
+      resolve(value);
+      api.ui.dialog.clear();
+    };
+    const options = parentCandidates(sessions).slice(0, 200).map((session) => ({
+      title: truncate(session.title ?? session.id, 48),
+      value: session.id,
+      description: `${session.agent ?? "agent"} \xB7 ${formatAge(session.updated ?? session.created)}${session.id === currentRoot ? " \xB7 current" : ""}`
+    }));
+    api.ui.dialog.replace(() => api.ui.DialogSelect({
+      title: "Explore which session's subagents?",
+      placeholder: "Sessions that have subagents",
+      options,
+      current: currentRoot,
+      onSelect: (option) => done(option.value)
+    }), () => done(undefined));
+  });
+}
+async function showDetails(api, row) {
+  const details = await fetchSessionDetails(api.client, row.session.id);
+  const lines = [`title: ${rowTitle(row)}`, `agent: ${row.session.agent ?? "unknown"}${row.hidden ? " (hidden/background)" : ""}`, `session: ${row.session.id}`, `status: ${row.running ? "running" : "idle"}`, `created: ${formatAge(row.session.created)}`, `last activity: ${formatAge(row.session.updated ?? row.session.created)}`];
+  if (details) {
+    lines.push(`messages: ${details.messageCount}`);
+    if (details.model)
+      lines.push(`last model: ${details.model}`);
+  } else {
+    lines.push("messages: unknown (host client does not expose message listing)");
+  }
+  if (details?.firstPrompt) {
+    lines.push("");
+    lines.push("first prompt:");
+    lines.push(details.firstPrompt);
+  }
+  await showInfo(api, {
+    title: "Subagent session",
+    message: lines.join(`
+`)
+  });
+}
+function showPrompt(api, props) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value) => {
+      if (settled)
+        return;
+      settled = true;
+      resolve(value);
+      api.ui.dialog.clear();
+    };
+    api.ui.dialog.replace(() => api.ui.DialogPrompt({
+      title: props.title,
+      placeholder: props.placeholder,
+      value: props.value,
+      onConfirm: (value) => done(value),
+      onCancel: () => done(undefined)
+    }), () => done(undefined));
+  });
+}
+async function showSizeSlider(api) {
+  let current = dialogHeightPercent(api);
+  while (true) {
+    const choice = await showSizeSliderOnce(api, current);
+    if (!choice)
+      return;
+    current = choice.height;
+    if (choice.action === "save")
+      return choice;
+    const input = await showPrompt(api, {
+      title: "Dialog height percent",
+      placeholder: `${HEIGHT_PERCENT_MIN}-${HEIGHT_PERCENT_MAX}`,
+      value: String(current)
+    });
+    if (input === undefined)
+      continue;
+    const value = Number(input);
+    if (!Number.isFinite(value)) {
+      await showInfo(api, {
+        title: "Invalid height",
+        message: `Enter a number from ${HEIGHT_PERCENT_MIN} to ${HEIGHT_PERCENT_MAX}.`
+      });
+      continue;
+    }
+    current = clampHeightPercent(value);
+  }
+}
+function showSizeSliderOnce(api, current) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (value, clear = true) => {
+      if (settled)
+        return;
+      settled = true;
+      resolve(value);
+      if (clear)
+        api.ui.dialog.clear();
+    };
+    api.ui.dialog.replace(() => _$createComponent(SizeSliderDialog, {
+      api,
+      current,
+      onDone: done
+    }), () => done(undefined, false));
+  });
+}
+function SizeSliderDialog(props) {
+  const theme = () => themeOf(props.api);
+  const dimensions = useTerminalDimensions();
+  useDialogSize(props.api);
+  const [height, setHeight] = createSignal(clampHeightPercent(props.current));
+  const popMode = props.api.mode.push("subagent-explorer.size");
+  const commandPrefix = `subagent-explorer.size.${Math.random().toString(36).slice(2)}`;
+  const cycleWidth = () => setDialogSize(props.api, nextDialogSize(props.api));
+  const setPreset = (preset) => {
+    const found = HEIGHT_PRESETS.find((item) => item.label === preset);
+    if (found)
+      setHeight(found.value);
+  };
+  const move = (delta) => setHeight((value) => clampHeightPercent(value + delta));
+  const sliderWidth = createMemo(() => dialogSizeOf(props.api) === "xlarge" ? 64 : dialogSizeOf(props.api) === "large" ? 48 : 34);
+  const sliderCells = createMemo(() => {
+    const width = sliderWidth();
+    const selected = Math.round((height() - HEIGHT_PERCENT_MIN) / (HEIGHT_PERCENT_MAX - HEIGHT_PERCENT_MIN) * (width - 1));
+    const presetPositions = new Map(HEIGHT_PRESETS.map((preset) => [Math.round((preset.value - HEIGHT_PERCENT_MIN) / (HEIGHT_PERCENT_MAX - HEIGHT_PERCENT_MIN) * (width - 1)), preset.label]));
+    return Array.from({
+      length: width
+    }, (_, index) => {
+      const isCurrent = index === selected;
+      const preset = presetPositions.get(index);
+      return {
+        char: isCurrent ? "\u25CF" : preset ? "\u2502" : index < selected ? "\u2501" : "\u2500",
+        color: isCurrent ? theme().primary : preset ? theme().accent : index < selected ? theme().success : theme().textMuted
+      };
+    });
+  });
+  const preview = createMemo(() => {
+    const widthColumns = DIALOG_WIDTH_COLUMNS[dialogSizeOf(props.api)];
+    const previewWidth = Math.max(10, Math.min(sliderWidth() + 4, 72));
+    const scale = previewWidth / widthColumns;
+    const metrics = computeDialogRows(height(), dimensions().height, 6, 4);
+    const effective = metrics.targetRows;
+    const requested = Math.floor(dimensions().height * Math.min(100, Math.max(25, height())) / 100);
+    const rows = Math.max(4, Math.round(effective * scale));
+    const fill = (text, width) => {
+      const inner = width - 2;
+      const slice = text.length > inner ? text.slice(0, inner - 1) + "\u2026" : text;
+      return `\u2502${slice}${" ".repeat(Math.max(0, inner - slice.length))}\u2502`;
+    };
+    const lines = [];
+    lines.push(`\u250C${"\u2500".repeat(previewWidth - 2)}\u2510`);
+    lines.push(fill(`Subagent Explorer (preview)${effective < requested ? " [capped]" : ""}`, previewWidth));
+    for (let index = 0;index < rows - 3; index++)
+      lines.push(fill("", previewWidth));
+    lines.push(`\u2514${"\u2500".repeat(previewWidth - 2)}\u2518`);
+    return lines;
+  });
+  const shield = (ctx) => {
+    ctx.event?.preventDefault?.();
+    ctx.event?.stopPropagation?.();
+  };
+  const unregister = props.api.keymap.registerLayer({
+    priority: 1e4,
+    commands: [{
+      name: `${commandPrefix}.width`,
+      title: "Cycle width",
+      run: (ctx) => {
+        shield(ctx);
+        cycleWidth();
+      }
+    }, {
+      name: `${commandPrefix}.left`,
+      title: "Lower height",
+      run: (ctx) => {
+        shield(ctx);
+        move(-1);
+      }
+    }, {
+      name: `${commandPrefix}.right`,
+      title: "Raise height",
+      run: (ctx) => {
+        shield(ctx);
+        move(1);
+      }
+    }, {
+      name: `${commandPrefix}.down`,
+      title: "Lower height faster",
+      run: (ctx) => {
+        shield(ctx);
+        move(-5);
+      }
+    }, {
+      name: `${commandPrefix}.up`,
+      title: "Raise height faster",
+      run: (ctx) => {
+        shield(ctx);
+        move(5);
+      }
+    }, {
+      name: `${commandPrefix}.compact`,
+      title: "Compact preset",
+      run: (ctx) => {
+        shield(ctx);
+        setPreset("compact");
+      }
+    }, {
+      name: `${commandPrefix}.normal`,
+      title: "Normal preset",
+      run: (ctx) => {
+        shield(ctx);
+        setPreset("normal");
+      }
+    }, {
+      name: `${commandPrefix}.tall`,
+      title: "Tall preset",
+      run: (ctx) => {
+        shield(ctx);
+        setPreset("tall");
+      }
+    }, {
+      name: `${commandPrefix}.max`,
+      title: "Max preset",
+      run: (ctx) => {
+        shield(ctx);
+        setPreset("max");
+      }
+    }, {
+      name: `${commandPrefix}.custom`,
+      title: "Custom percent",
+      run: () => props.onDone({
+        action: "custom-height",
+        height: height()
+      })
+    }, {
+      name: `${commandPrefix}.save`,
+      title: "Save",
+      run: () => {
+        setDialogHeightPercent(props.api, height());
+        props.onDone({
+          action: "save",
+          height: height()
+        });
+      }
+    }, {
+      name: `${commandPrefix}.back`,
+      title: "Back",
+      run: () => props.onDone(undefined)
+    }],
+    bindings: [{
+      key: "w",
+      cmd: `${commandPrefix}.width`,
+      desc: "Cycle width"
+    }, {
+      key: "left",
+      cmd: `${commandPrefix}.left`,
+      desc: "Lower height"
+    }, {
+      key: "right",
+      cmd: `${commandPrefix}.right`,
+      desc: "Raise height"
+    }, {
+      key: "down",
+      cmd: `${commandPrefix}.down`,
+      desc: "Lower height faster"
+    }, {
+      key: "up",
+      cmd: `${commandPrefix}.up`,
+      desc: "Raise height faster"
+    }, {
+      key: "1",
+      cmd: `${commandPrefix}.compact`,
+      desc: "Compact preset"
+    }, {
+      key: "2",
+      cmd: `${commandPrefix}.normal`,
+      desc: "Normal preset"
+    }, {
+      key: "3",
+      cmd: `${commandPrefix}.tall`,
+      desc: "Tall preset"
+    }, {
+      key: "4",
+      cmd: `${commandPrefix}.max`,
+      desc: "Max preset"
+    }, {
+      key: "c",
+      cmd: `${commandPrefix}.custom`,
+      desc: "Custom percent"
+    }, {
+      key: "enter",
+      cmd: `${commandPrefix}.save`,
+      desc: "Save"
+    }, {
+      key: "escape",
+      cmd: `${commandPrefix}.back`,
+      desc: "Back"
+    }]
+  });
+  onCleanup(() => {
+    unregister();
+    popMode();
+  });
+  return (() => {
+    var _el$56 = _$createElement("box"), _el$57 = _$createElement("box"), _el$58 = _$createElement("text"), _el$59 = _$createElement("b"), _el$61 = _$createElement("text"), _el$63 = _$createElement("box"), _el$64 = _$createElement("text"), _el$66 = _$createElement("text"), _el$67 = _$createElement("b"), _el$68 = _$createElement("text"), _el$69 = _$createTextNode(` (`), _el$70 = _$createTextNode(` cols, w to cycle) Height: `), _el$71 = _$createElement("text"), _el$72 = _$createElement("b"), _el$73 = _$createTextNode(`%`), _el$74 = _$createElement("box"), _el$75 = _$createElement("text"), _el$76 = _$createTextNode(`25% `), _el$78 = _$createElement("text"), _el$79 = _$createTextNode(` 100%`), _el$82 = _$createElement("box"), _el$83 = _$createElement("box"), _el$84 = _$createElement("text"), _el$86 = _$createElement("text"), _el$88 = _$createElement("text"), _el$90 = _$createElement("text"), _el$92 = _$createElement("box"), _el$93 = _$createElement("box"), _el$94 = _$createElement("text"), _el$96 = _$createElement("box"), _el$97 = _$createElement("text"), _el$98 = _$createElement("b");
+    _$insertNode(_el$56, _el$57);
+    _$insertNode(_el$56, _el$63);
+    _$insertNode(_el$56, _el$74);
+    _$insertNode(_el$56, _el$82);
+    _$insertNode(_el$56, _el$93);
+    _$setProp(_el$56, "flexDirection", "column");
+    _$setProp(_el$56, "width", "100%");
+    _$setProp(_el$56, "paddingLeft", 2);
+    _$setProp(_el$56, "paddingRight", 2);
+    _$setProp(_el$56, "paddingTop", 1);
+    _$setProp(_el$56, "paddingBottom", 1);
+    _$insertNode(_el$57, _el$58);
+    _$insertNode(_el$57, _el$61);
+    _$setProp(_el$57, "flexDirection", "row");
+    _$setProp(_el$57, "justifyContent", "space-between");
+    _$setProp(_el$57, "width", "100%");
+    _$setProp(_el$57, "marginBottom", 1);
+    _$insertNode(_el$58, _el$59);
+    _$insertNode(_el$59, _$createTextNode(`Dialog size`));
+    _$insertNode(_el$61, _$createTextNode(`esc`));
+    _$setProp(_el$61, "onMouseUp", () => props.onDone(undefined));
+    _$insertNode(_el$63, _el$64);
+    _$insertNode(_el$63, _el$66);
+    _$insertNode(_el$63, _el$68);
+    _$insertNode(_el$63, _el$71);
+    _$setProp(_el$63, "flexDirection", "row");
+    _$setProp(_el$63, "gap", 0);
+    _$setProp(_el$63, "width", "100%");
+    _$setProp(_el$63, "marginBottom", 1);
+    _$insertNode(_el$64, _$createTextNode(`Width: `));
+    _$insertNode(_el$66, _el$67);
+    _$insert(_el$67, () => dialogSizeOf(props.api));
+    _$insertNode(_el$68, _el$69);
+    _$insertNode(_el$68, _el$70);
+    _$insert(_el$68, () => DIALOG_WIDTH_COLUMNS[dialogSizeOf(props.api)], _el$70);
+    _$insertNode(_el$71, _el$72);
+    _$insertNode(_el$72, _el$73);
+    _$insert(_el$72, height, _el$73);
+    _$insertNode(_el$74, _el$75);
+    _$insertNode(_el$74, _el$78);
+    _$setProp(_el$74, "flexDirection", "row");
+    _$setProp(_el$74, "width", "100%");
+    _$setProp(_el$74, "marginBottom", 1);
+    _$insertNode(_el$75, _el$76);
+    _$insert(_el$74, _$createComponent(For, {
+      get each() {
+        return sliderCells();
+      },
+      children: (cell) => (() => {
+        var _el$100 = _$createElement("text");
+        _$insert(_el$100, () => cell.char);
+        _$effect((_$p) => _$setProp(_el$100, "fg", cell.color, _$p));
+        return _el$100;
+      })()
+    }), _el$78);
+    _$insertNode(_el$78, _el$79);
+    _$insertNode(_el$82, _el$83);
+    _$insertNode(_el$82, _el$92);
+    _$setProp(_el$82, "flexDirection", "row");
+    _$setProp(_el$82, "gap", 2);
+    _$setProp(_el$82, "marginBottom", 1);
+    _$insertNode(_el$83, _el$84);
+    _$insertNode(_el$83, _el$86);
+    _$insertNode(_el$83, _el$88);
+    _$insertNode(_el$83, _el$90);
+    _$setProp(_el$83, "flexDirection", "column");
+    _$setProp(_el$83, "gap", 0);
+    _$insert(_el$83, _$createComponent(For, {
+      each: HEIGHT_PRESETS,
+      children: (preset) => (() => {
+        var _el$101 = _$createElement("text"), _el$102 = _$createTextNode(` `), _el$103 = _$createTextNode(`: `), _el$104 = _$createTextNode(`%`);
+        _$insertNode(_el$101, _el$102);
+        _$insertNode(_el$101, _el$103);
+        _$insertNode(_el$101, _el$104);
+        _$insert(_el$101, () => preset.key, _el$102);
+        _$insert(_el$101, () => preset.label, _el$103);
+        _$insert(_el$101, () => preset.value, _el$104);
+        _$effect((_$p) => _$setProp(_el$101, "fg", height() === preset.value ? theme().primary : theme().textMuted, _$p));
+        return _el$101;
+      })()
+    }), _el$84);
+    _$insertNode(_el$84, _$createTextNode(` `));
+    _$insertNode(_el$86, _$createTextNode(`left/right 1%`));
+    _$insertNode(_el$88, _$createTextNode(`up/down 5%`));
+    _$insertNode(_el$90, _$createTextNode(`c custom`));
+    _$setProp(_el$92, "flexDirection", "column");
+    _$setProp(_el$92, "gap", 0);
+    _$insert(_el$92, _$createComponent(For, {
+      get each() {
+        return preview();
+      },
+      children: (line) => (() => {
+        var _el$105 = _$createElement("text");
+        _$insert(_el$105, line);
+        _$effect((_$p) => _$setProp(_el$105, "fg", theme().textMuted, _$p));
+        return _el$105;
+      })()
+    }));
+    _$insertNode(_el$93, _el$94);
+    _$insertNode(_el$93, _el$96);
+    _$setProp(_el$93, "flexDirection", "row");
+    _$setProp(_el$93, "justifyContent", "space-between");
+    _$setProp(_el$93, "width", "100%");
+    _$insertNode(_el$94, _$createTextNode(`enter save`));
+    _$insertNode(_el$96, _el$97);
+    _$setProp(_el$96, "paddingLeft", 3);
+    _$setProp(_el$96, "paddingRight", 3);
+    _$setProp(_el$96, "onMouseUp", () => {
+      setDialogHeightPercent(props.api, height());
+      props.onDone({
+        action: "save",
+        height: height()
+      });
+    });
+    _$insertNode(_el$97, _el$98);
+    _$insertNode(_el$98, _$createTextNode(`save`));
+    _$effect((_p$) => {
+      var _v$24 = theme().accent, _v$25 = theme().textMuted, _v$26 = theme().textMuted, _v$27 = theme().primary, _v$28 = theme().textMuted, _v$29 = theme().primary, _v$30 = theme().textMuted, _v$31 = theme().textMuted, _v$32 = theme().textMuted, _v$33 = theme().textMuted, _v$34 = theme().textMuted, _v$35 = theme().textMuted, _v$36 = theme().textMuted, _v$37 = theme().primary, _v$38 = theme().background;
+      _v$24 !== _p$.e && (_p$.e = _$setProp(_el$58, "fg", _v$24, _p$.e));
+      _v$25 !== _p$.t && (_p$.t = _$setProp(_el$61, "fg", _v$25, _p$.t));
+      _v$26 !== _p$.a && (_p$.a = _$setProp(_el$64, "fg", _v$26, _p$.a));
+      _v$27 !== _p$.o && (_p$.o = _$setProp(_el$66, "fg", _v$27, _p$.o));
+      _v$28 !== _p$.i && (_p$.i = _$setProp(_el$68, "fg", _v$28, _p$.i));
+      _v$29 !== _p$.n && (_p$.n = _$setProp(_el$71, "fg", _v$29, _p$.n));
+      _v$30 !== _p$.s && (_p$.s = _$setProp(_el$75, "fg", _v$30, _p$.s));
+      _v$31 !== _p$.h && (_p$.h = _$setProp(_el$78, "fg", _v$31, _p$.h));
+      _v$32 !== _p$.r && (_p$.r = _$setProp(_el$84, "fg", _v$32, _p$.r));
+      _v$33 !== _p$.d && (_p$.d = _$setProp(_el$86, "fg", _v$33, _p$.d));
+      _v$34 !== _p$.l && (_p$.l = _$setProp(_el$88, "fg", _v$34, _p$.l));
+      _v$35 !== _p$.u && (_p$.u = _$setProp(_el$90, "fg", _v$35, _p$.u));
+      _v$36 !== _p$.c && (_p$.c = _$setProp(_el$94, "fg", _v$36, _p$.c));
+      _v$37 !== _p$.w && (_p$.w = _$setProp(_el$96, "backgroundColor", _v$37, _p$.w));
+      _v$38 !== _p$.m && (_p$.m = _$setProp(_el$97, "fg", _v$38, _p$.m));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined,
+      w: undefined,
+      m: undefined
+    });
+    return _el$56;
+  })();
+}
+async function mainMenu(api) {
+  const directory = api.state.path?.directory ?? api.state.path?.worktree ?? "";
+  if (!directory) {
+    await showInfo(api, {
+      title: "Subagent Explorer",
+      message: "No project directory is available from the host \u2014 cannot list sessions."
+    });
+    return;
+  }
+  let rootOverride;
+  while (true) {
+    const data = await loadExplorerData(api, directory);
+    if (!data) {
+      await showInfo(api, {
+        title: "Subagent Explorer",
+        message: `Could not load the session list from the host.
+
+The host client does not expose session.list for this directory.`
+      });
+      return;
+    }
+    const rootID = currentSessionID(rootOverride ?? api.currentSessionID?.(), data.sessions);
+    if (!rootID) {
+      await showInfo(api, {
+        title: "Subagent Explorer",
+        message: "No sessions found in this directory."
+      });
+      return;
+    }
+    const tree = buildSessionTree(data.sessions, rootID);
+    const rows = explorerRows(tree, data);
+    const idleCount = rows.filter((row) => !row.running).length;
+    const rootSession = data.sessions.find((session) => session.id === rootID);
+    const action = await showTreeOnce(api, {
+      rows,
+      rootTitle: rootSession?.title ?? rootID,
+      rootID,
+      activeKnown: data.activeKnown,
+      idleCount
+    });
+    if (!action || action.type === "exit")
+      return;
+    if (action.type === "refresh")
+      continue;
+    if (action.type === "size") {
+      await showSizeSlider(api);
+      continue;
+    }
+    if (action.type === "switch-root") {
+      const next = await showRootPicker(api, data.sessions, rootID);
+      if (next)
+        rootOverride = next;
+      continue;
+    }
+    if (action.type === "delete") {
+      await deleteOne(api, action.row);
+      continue;
+    }
+    if (action.type === "details") {
+      await showDetails(api, action.row);
+      continue;
+    }
+    if (action.type === "cleanup") {
+      await runCleanup(api, cleanupTargets(tree, data.activeIDs), rootSession?.title ?? rootID);
+      continue;
+    }
+  }
+}
+export {
+  SubagentTreeDialog,
+  computeDialogRows,
+  explorerRows,
+  loadExplorerData,
+  mainMenu,
+  rowTitle
+};