herm-tui 1.0.0-dev.1

package/src/tabs/Agents.tsx

@@ -0,0 +1,607 @@
+import { useState, useEffect, useCallback, useRef, memo } from "react"
+import { VBAR } from "../ui/table"
+import { useKeyboard, useTerminalDimensions } from "@opentui/react"
+import { useKeys, handleListKey, useFollow } from "../keys"
+import { useGateway, useGatewayEvent } from "../app/gateway"
+import { trail } from "../app/spawnHistory"
+import { useTheme } from "../theme"
+import { useDialog } from "../ui/dialog"
+import { useToast } from "../ui/toast"
+import { useCommand } from "../ui/command"
+import { openConfirm } from "../dialogs/confirm"
+import { openSpawnHistory } from "../dialogs/spawn-history"
+import { openProfileMenu } from "../dialogs/profile"
+import { openCreateProfile } from "../dialogs/new-profile"
+import { TabShell } from "../ui/shell"
+import { KV, KVBlock } from "../ui/kv"
+import { KVLink } from "../components/ui/FileLink"
+import { dur, trunc, fmt } from "../ui/fmt"
+import {
+  listProfiles, stickyDefault, profileStats,
+  type ProfileInfo, type ProfileStats,
+} from "../utils/hermes-profiles"
+import type { DelegationStatus, DelegationRecord } from "../utils/gateway-types"
+import { tree as buildTree, totals as treeTotals, summary, spark, heat, peak, type Agg } from "../utils/subagent-tree"
+
+// Two panes:
+//   Profiles (left)   — filesystem scan of `<root>/profiles/`. Each
+//     profile is an isolated HERMES_HOME (config, env, memory, skills).
+//     Switching profiles = restarting the gateway under a new
+//     HERMES_HOME, which would sever this session — so "switch" is
+//     deliberately NOT offered here. All mutations route through
+//     `shell.exec → hermes profile <verb>` so the authoritative CLI
+//     owns validation, skill seeding, aliases and gateway cleanup.
+//   Delegation (right) — live subagent tree via `delegation.status`
+//     (tools/delegate_tool registry). `p` toggles spawn-pause
+//     (`delegation.pause`), `k` interrupts the selected child
+//     (`subagent.interrupt`).
+
+// ─── Profiles pane ───────────────────────────────────────────────────
+
+const ProfileRow = memo((props: {
+  id: string
+  p: ProfileInfo; idx: number; selected: boolean
+  onHover: (i: number) => void; onEnter: (i: number) => void; onDelete: (i: number) => void
+}) => {
+  const theme = useTheme().theme
+  const { p, idx: i } = props
+  const [x, setX] = useState(false)
+  return (
+    <box id={props.id} flexDirection="row" height={1}
+         backgroundColor={props.selected ? theme.backgroundElement : undefined}
+         onMouseOver={() => props.onHover(i)}
+         onMouseDown={() => props.onEnter(i)}>
+      <box width={2}><text fg={props.selected ? theme.primary : theme.text}>
+        {props.selected ? "▸ " : "  "}
+      </text></box>
+      <box flexGrow={1} minWidth={8} height={1} overflow="hidden">
+        <text>
+          <span fg={p.is_active ? theme.accent : theme.text}>
+            {p.is_active ? <strong>{p.name}</strong> : p.name}
+          </span>
+          {p.is_sticky ? <span fg={theme.warning}>{" ★"}</span> : null}
+          {p.gateway_running ? <span fg={theme.success}>{" ●"}</span> : null}
+        </text>
+      </box>
+      <box width={4} height={1}>
+        <text fg={theme.textMuted}>{p.is_active ? " you" : ""}</text>
+      </box>
+      {p.is_default || p.is_active ? <box width={3} /> : (
+        <box width={3}
+             onMouseDown={(e) => { e.stopPropagation(); props.onDelete(i) }}
+             onMouseOver={() => setX(true)} onMouseOut={() => setX(false)}>
+          <text fg={x ? theme.error : theme.textMuted}>{" ✕"}</text>
+        </box>
+      )}
+    </box>
+  )
+})
+
+const ProfileDetail = memo((props: { p: ProfileInfo; stats?: ProfileStats }) => {
+  const { theme, syntaxStyle } = useTheme()
+  const p = props.p
+  const s = props.stats
+  return (
+    <scrollbox scrollY flexGrow={1}>
+      <box flexDirection="column" width="100%">
+        <box height={1}>
+          <text fg={theme.accent}>
+            <strong>{p.name}</strong>
+            {p.is_sticky ? <span fg={theme.warning}>{"  ★ sticky default"}</span> : null}
+          </text>
+        </box>
+        <box height={1} />
+        <KVLink label="Path" source={p.sources.dir} text={p.sources.dir.relative} />
+        <KV label="Active" value={p.is_active ? "yes (this session)" : "no"}
+            fg={p.is_active ? theme.accent : theme.textMuted} />
+        <KV label="Model" value={p.model ?? "—"} />
+        <KV label="Provider" value={p.provider ?? "—"} />
+        <KV label="Skills" value={String(p.skill_count)} />
+        <KV label="Sessions" value={s ? s.sessions == null ? "—" : `${fmt(s.sessions)}  (${fmt(s.messages ?? 0)} msgs)` : "…"} />
+        <KV label="Cron jobs" value={s ? s.crons == null ? "—" : String(s.crons) : "…"} />
+        <KV label="Gateway" value={p.gateway_running ? "running" : "stopped"}
+            fg={p.gateway_running ? theme.success : theme.textMuted} />
+        {p.has_alias ? <KV label="Alias" value={`${p.name} (shell)`} /> : null}
+        <box height={1} />
+        <KVLink label="Config" source={p.sources.config} />
+        <KVLink label="Soul" source={p.sources.soul} />
+        {p.has_env ? <KVLink label="Env" source={p.sources.env} /> : <KV label="Env" value="—" />}
+        {p.soul_preview ? <>
+          <box height={1} />
+          <box height={1}><text fg={theme.textMuted}>SOUL.md</text></box>
+          <markdown content={p.soul_preview} fg={theme.markdownText} syntaxStyle={syntaxStyle} />
+        </> : null}
+      </box>
+    </scrollbox>
+  )
+})
+
+// ─── Delegation pane ─────────────────────────────────────────────────
+
+const HOT = ["⠀", "⠁", "⠃", "⠇", "⠏", "⠟", "⠿", "⡿", "⣿"] as const
+
+const DelegRow = memo((props: {
+  id: string
+  r: DelegationRecord; idx: number; selected: boolean; now: number; hot: number
+  onHover: (i: number) => void; onKill: (i: number) => void
+}) => {
+  const theme = useTheme().theme
+  const { r, idx: i, now } = props
+  const [x, setX] = useState(false)
+  const up = r.started_at ? dur(now - r.started_at) : "—"
+  const hotFg = [theme.textMuted, theme.textMuted, theme.text,
+    theme.info, theme.info, theme.accent, theme.accent,
+    theme.warning, theme.error][props.hot] ?? theme.textMuted
+  return (
+    <box id={props.id} flexDirection="row" height={1}
+         backgroundColor={props.selected ? theme.backgroundElement : undefined}
+         onMouseOver={() => props.onHover(i)}>
+      <box width={2}><text fg={props.selected ? theme.primary : theme.text}>
+        {props.selected ? "▸ " : "  "}
+      </text></box>
+      <box width={2}><text fg={hotFg}>{HOT[props.hot]} </text></box>
+      <box flexGrow={1} minWidth={8} height={1} overflow="hidden">
+        <text>
+          <span fg={theme.textMuted}>{"· ".repeat(r.depth)}</span>
+          <span fg={theme.text}>{r.goal.replace(/\s+/g, " ")}</span>
+        </text>
+      </box>
+      <box width={14} height={1} overflow="hidden">
+        <text fg={theme.textMuted}>{trunc(r.model ?? "", 13)}</text>
+      </box>
+      <box width={5} height={1} flexDirection="row" justifyContent="flex-end">
+        <text fg={theme.textMuted}>{String(r.tool_count ?? 0)}</text>
+      </box>
+      <box width={8} height={1} flexDirection="row" justifyContent="flex-end">
+        <text fg={theme.textMuted}>{up}</text>
+      </box>
+      <box width={3}
+           onMouseDown={(e) => { e.stopPropagation(); props.onKill(i) }}
+           onMouseOver={() => setX(true)} onMouseOut={() => setX(false)}>
+        <text fg={x ? theme.error : theme.textMuted}>{" ✕"}</text>
+      </box>
+    </box>
+  )
+})
+
+// Sort the flat registry into a parent-before-child pre-order so depth
+// dots draw a coherent tree. Orphans (parent already finished) go last.
+function preorder(recs: DelegationRecord[]): DelegationRecord[] {
+  const byParent = new Map<string | null, DelegationRecord[]>()
+  for (const r of recs) {
+    const k = r.parent_id ?? null
+    ;(byParent.get(k) ?? byParent.set(k, []).get(k)!).push(r)
+  }
+  const out: DelegationRecord[] = []
+  const seen = new Set<string>()
+  const walk = (k: string | null) => {
+    for (const r of byParent.get(k) ?? []) {
+      if (seen.has(r.subagent_id)) continue
+      seen.add(r.subagent_id)
+      out.push(r)
+      walk(r.subagent_id)
+    }
+  }
+  walk(null)
+  for (const r of recs) if (!seen.has(r.subagent_id)) out.push(r)
+  return out
+}
+
+// Live per-subagent enrichment on top of the polled registry snapshot.
+// Fed by subagent.* push events; `tool_count` here is authoritative
+// between polls (the registry value lags).
+type Live = {
+  tool_count: number
+  last_tool?: string
+  last_preview?: string
+  thinking?: string
+  status?: string
+  input_tokens?: number
+  output_tokens?: number
+  cost_usd?: number
+}
+
+const DelegDetail = memo((props: { r: DelegationRecord; live?: Live; agg?: Agg; now: number }) => {
+  const theme = useTheme().theme
+  const { r, live, agg, now } = props
+  const tc = live?.tool_count ?? r.tool_count ?? 0
+  const tr = trail(r.subagent_id)
+  return (
+    <scrollbox scrollY flexGrow={1}>
+      <box flexDirection="column" width="100%">
+        <box minHeight={1}><text fg={theme.accent} wrapMode="word"><strong>{r.goal}</strong></text></box>
+        {agg && agg.agents > 1 ? (
+          <box height={1}><text fg={theme.textMuted}>{summary(agg)}</text></box>
+        ) : null}
+        <box height={1} />
+        <KVBlock rows={[
+          ["Status",   live?.status ?? r.status ?? "running"],
+          ["Model",    r.model ?? "—"],
+          ["Depth",    String(r.depth)],
+          ["Parent",   r.parent_id ?? "(root)"],
+          ["Uptime",   r.started_at ? dur(now - r.started_at) : "—"],
+          ["Tools",    String(tc)],
+          ["Tokens",   live ? `${fmt(live.input_tokens ?? 0)} in / ${fmt(live.output_tokens ?? 0)} out` : undefined],
+          ["Cost",     live?.cost_usd != null ? `$${live.cost_usd.toFixed(4)}` : undefined],
+        ]} />
+        {live?.thinking ? <>
+          <box height={1} />
+          <box height={1}><text fg={theme.textMuted}>thinking</text></box>
+          <box minHeight={1}><text fg={theme.textMuted} wrapMode="word">{trunc(live.thinking, 200)}</text></box>
+        </> : null}
+        {tr.length > 0 ? <>
+          <box height={1} />
+          <box height={1}><text fg={theme.textMuted}>recent tools</text></box>
+          {tr.slice(-8).map((t, i) => (
+            <box key={i} height={1} overflow="hidden">
+              <text>
+                <span fg={theme.textMuted}>{"┃ "}</span>
+                <span fg={theme.text}>{t.name.padEnd(14)}</span>
+                <span fg={theme.textMuted}>{t.preview ? trunc(t.preview.replace(/\s+/g, " "), 40) : ""}</span>
+              </text>
+            </box>
+          ))}
+        </> : null}
+      </box>
+    </scrollbox>
+  )
+})
+
+// ─── Main ────────────────────────────────────────────────────────────
+
+type ShellResult = { stdout: string; stderr: string; code: number }
+type Pane = "profiles" | "deleg"
+type View = "list" | "detail"
+type Props = { focused?: boolean; sessionId: string }
+
+export const Agents = memo((props: Props) => {
+  const theme = useTheme().theme
+  const gw = useGateway()
+  const dialog = useDialog()
+  const toast = useToast()
+  const cmd = useCommand()
+
+  const [pane, setPane] = useState<Pane>("profiles")
+  // Profiles-pane list↔detail swap for narrow terminals — in wide
+  // layouts both render side-by-side and this is ignored.
+  const [pView, setPView] = useState<View>("list")
+  const [profiles, setProfiles] = useState<ProfileInfo[]>([])
+  const [deleg, setDeleg] = useState<DelegationStatus | null>(null)
+  const [liveMap, setLiveMap] = useState<ReadonlyMap<string, Live>>(() => new Map())
+  const [now, setNow] = useState(() => Date.now() / 1000)
+  const [pSel, setPSel] = useState(0)
+  const [dSel, setDSel] = useState(0)
+  const [err, setErr] = useState("")
+
+  const active = preorder(deleg?.active ?? [])
+  // Aggregates: rebuild the tree from the same snapshot + live
+  // enrichment. O(n) per poll (n≤max_concurrent×depth, tiny).
+  const nodes = buildTree(deleg?.active ?? [], liveMap, now)
+  const all = treeTotals(nodes)
+  const hotPeak = peak(nodes)
+  // Flat lookup: subagent_id → subtree aggregate, for the selected
+  // row's detail pane and per-row hotness colouring.
+  const aggOf = new Map<string, Agg>()
+  {
+    const walk = (ns: typeof nodes) => {
+      for (const n of ns) { aggOf.set(n.rec.subagent_id, n.agg); walk(n.kids) }
+    }
+    walk(nodes)
+  }
+  const live = useRef({ profiles, active })
+  live.current = { profiles, active }
+
+  // Gateway's own HERMES_HOME (may differ from herm's process env).
+  // Fetched once on mount; listProfiles() derives is_active from it.
+  const gwHome = useRef<string | undefined>(undefined)
+  // Lazy per-profile stats (session/msg/cron counts) — fetched when a
+  // profile is first selected, cached by path, cleared on `r`.
+  const [stats, setStats] = useState<ReadonlyMap<string, ProfileStats>>(() => new Map())
+
+  const loadProfiles = useCallback(() => {
+    setStats(new Map())
+    listProfiles(gwHome.current)
+      .then(ps => { setProfiles(ps); setErr("") })
+      .catch((e: Error) => setErr(`profiles: ${e.message}`))
+  }, [])
+
+  useEffect(() => {
+    gw.request<{ home?: string }>("config.get", { key: "profile" })
+      .then(r => { gwHome.current = r.home })
+      .catch(() => {})
+      .finally(loadProfiles)
+  }, [gw, loadProfiles])
+
+  const loadDeleg = useCallback(() => {
+    gw.request<DelegationStatus>("delegation.status")
+      .then(r => { setDeleg(r); setNow(Date.now() / 1000) })
+      .catch(() => setDeleg({ active: [], paused: false, max_spawn_depth: 0, max_concurrent_children: 0 }))
+  }, [gw])
+
+  useEffect(loadDeleg, [loadDeleg])
+
+  // Poll delegation while focused + agents are live; back off when idle.
+  useEffect(() => {
+    if (!props.focused) return
+    const ms = (deleg?.active.length ?? 0) > 0 ? 1500 : 5000
+    const t = setInterval(loadDeleg, ms)
+    return () => clearInterval(t)
+  }, [props.focused, deleg?.active.length, loadDeleg])
+
+  // Push enrichment: subagent.* events arrive regardless of focus; we
+  // fold them into a per-id map so rows/detail show fresh tool counts
+  // and the last tool/preview between registry polls. start/complete
+  // also trigger an immediate registry refresh so the list is instant.
+  useGatewayEvent(ev => {
+    if (!ev.type.startsWith("subagent.")) return
+    const p = ev.payload as { subagent_id?: string; tool_name?: string; tool_preview?: string;
+      text?: string; status?: string; input_tokens?: number; output_tokens?: number; cost_usd?: number }
+    const id = p.subagent_id
+    if (!id) return
+    setLiveMap(prev => {
+      const next = new Map(prev)
+      const cur = next.get(id) ?? { tool_count: 0 }
+      switch (ev.type) {
+        case "subagent.start":
+          next.set(id, { tool_count: 0 }); break
+        case "subagent.tool":
+          next.set(id, { ...cur, tool_count: cur.tool_count + 1,
+            last_tool: p.tool_name, last_preview: p.tool_preview }); break
+        case "subagent.thinking":
+          next.set(id, { ...cur, thinking: p.text }); break
+        case "subagent.complete":
+          next.set(id, { ...cur, status: p.status,
+            input_tokens: p.input_tokens, output_tokens: p.output_tokens, cost_usd: p.cost_usd }); break
+      }
+      return next
+    })
+    if (ev.type === "subagent.start" || ev.type === "subagent.complete") loadDeleg()
+  })
+
+  // Thin wrapper for `hermes profile <verb>` — all profile mutations go
+  // through the CLI so validation/skill-seeding/alias/cleanup stay
+  // upstream-owned. Returns stdout on success, throws on non-zero.
+  const sh = useCallback((cmd: string) =>
+    gw.request<ShellResult>("shell.exec", { command: cmd }).then(r => {
+      if (r.code !== 0) throw new Error((r.stderr || r.stdout || "exit " + r.code).trim())
+      return r.stdout
+    }), [gw])
+
+  // ── Stable callbacks ──────────────────────────────────────────────
+  const pHover = useCallback((i: number) => setPSel(i), [])
+  const dHover = useCallback((i: number) => setDSel(i), [])
+
+  const pDelete = useCallback(async (i: number) => {
+    const p = live.current.profiles[i]
+    if (!p || p.is_default || p.is_active) return
+    // `hermes profile delete` stops that profile's gateway first
+    // (SIGTERM + up to 10s wait). shell.exec is capped at 30s —
+    // usually fine, but warn so a rare timeout isn't mysterious.
+    const warn = p.gateway_running
+      ? "\n\nIts gateway is running and will be stopped first (may take up to ~10s)."
+      : ""
+    const ok = await openConfirm(dialog, {
+      title: "Delete Profile?",
+      body: `'${p.name}' — config, env, memory, skills, and sessions will be removed. This cannot be undone.${warn}`,
+      yes: "delete", danger: true,
+    })
+    if (!ok) return
+    sh(`hermes profile delete ${p.name} -y`)
+      .then(() => {
+        toast.show({ variant: "success", message: `Deleted '${p.name}'` })
+        loadProfiles()
+      })
+      .catch((e: Error) => toast.show({ variant: "error", message: e.message }))
+  }, [sh, dialog, toast, loadProfiles])
+
+  const pEnter = useCallback((i: number) => {
+    setPSel(i)
+    const p = live.current.profiles[i]
+    if (!p) return
+    openProfileMenu(dialog, p, {
+      sticky: (pp) => sh(`hermes profile use ${pp.name}`)
+        .then(() => { toast.show({ variant: "success", message: `Sticky default → '${pp.name}'` }); loadProfiles() })
+        .catch((e: Error) => toast.show({ variant: "error", message: e.message })),
+      unsticky: () => sh("hermes profile use --clear")
+        .then(() => { toast.show({ variant: "info", message: "Cleared sticky default" }); loadProfiles() })
+        .catch((e: Error) => toast.show({ variant: "error", message: e.message })),
+      export: (pp) => sh(`hermes profile export ${pp.name}`)
+        .then(out => toast.show({ variant: "success", message: trunc(out.trim() || `Exported '${pp.name}'`, 80) }))
+        .catch((e: Error) => toast.show({ variant: "error", message: e.message })),
+      remove: () => pDelete(i),
+    })
+  }, [sh, dialog, toast, loadProfiles, pDelete])
+
+  const dKill = useCallback(async (i: number) => {
+    const r = live.current.active[i]
+    if (!r) return
+    const ok = await openConfirm(dialog, {
+      title: "Interrupt subagent?",
+      body: `${trunc(r.goal, 120)}\n\nThe child returns whatever partial result it has so far.`,
+      yes: "interrupt", danger: true,
+    })
+    if (!ok) return
+    gw.request<{ found: boolean }>("subagent.interrupt", { subagent_id: r.subagent_id })
+      .then(res => {
+        toast.show(res.found
+          ? { variant: "success", message: `Interrupted ${r.subagent_id}` }
+          : { variant: "info", message: "Already finished" })
+        loadDeleg()
+      })
+      .catch((e: Error) => toast.show({ variant: "error", message: e.message }))
+  }, [gw, dialog, toast, loadDeleg])
+
+  const create = useCallback(() => {
+    openCreateProfile(dialog, { existing: live.current.profiles.map(p => p.name) })
+      .then(r => {
+        if (!r) return
+        const flags = [
+          r.cloneFrom ? `--clone --clone-from ${r.cloneFrom}` : "",
+          r.alias ? "" : "--no-alias",
+        ].filter(Boolean).join(" ")
+        toast.show({ variant: "info", message: `Creating '${r.name}'…` })
+        return sh(`hermes profile create ${r.name} ${flags}`.trim())
+          .then(() => {
+            toast.show({ variant: "success", message: `Created '${r.name}'` })
+            loadProfiles()
+          })
+      })
+      .catch((e: Error) => toast.show({ variant: "error", message: e.message }))
+  }, [sh, dialog, toast, loadProfiles])
+
+  const selected = profiles[pSel]
+
+  useEffect(() => {
+    const path = selected?.path
+    if (!path || stats.has(path)) return
+    let dead = false
+    profileStats(path).then(s => {
+      if (dead) return
+      setStats(prev => new Map(prev).set(path, s))
+    })
+    return () => { dead = true }
+  }, [selected?.path, stats])
+
+  const dims = useTerminalDimensions()
+  const wide = dims.width >= 130
+  const pWide = dims.width >= 170 || (!wide && dims.width >= 90)
+  const pFollow = useFollow("prof")
+  const dFollow = useFollow("deleg")
+
+  const keys = useKeys()
+  useKeyboard((key) => {
+    if (!props.focused || dialog.stack.length > 0) return
+    if (key.name === "tab") return setPane(p => p === "profiles" ? "deleg" : "profiles")
+    if (keys.match("list.refresh", key)) { loadProfiles(); loadDeleg(); toast.show({ variant: "info", message: "Reloaded", duration: 1000 }); return }
+    if (pane === "profiles") {
+      if (key.name === "escape" && !pWide && pView === "detail") return setPView("list")
+      handleListKey(keys, key, {
+        count: profiles.length, setSel: setPSel, ...pFollow.opts,
+        onNew: create,
+        onDelete: () => pDelete(pSel),
+        onActivate: () => {
+          if (!pWide && pView === "list") return setPView("detail")
+          pEnter(pSel)
+        },
+      })
+      return
+    }
+    const matched = handleListKey(keys, key, {
+      count: active.length, setSel: setDSel, ...dFollow.opts,
+      onDelete: () => dKill(dSel),
+    })
+    if (matched) return
+    if (keys.match("agents.kill", key)) return dKill(dSel)
+    if (keys.match("agents.history", key)) return openSpawnHistory(dialog, gw, props.sessionId)
+  })
+
+  const showProfiles = wide || pane === "profiles"
+  const showDeleg = wide || pane === "deleg"
+  const showList = pWide || pView === "list"
+  const showDetail = pWide || pView === "detail"
+
+  const sticky = stickyDefault()
+  const limits = deleg
+    ? `depth≤${deleg.max_spawn_depth} · conc≤${deleg.max_concurrent_children}` : ""
+  const dHint = active.length > 0
+    ? `${spark(nodes)}  ${summary(all)}`
+    : limits
+
+  const togglePause = useCallback(() => {
+    const next = !deleg?.paused
+    gw.request<{ paused: boolean }>("delegation.pause", { paused: next })
+      .then(r => {
+        setDeleg(d => d ? { ...d, paused: r.paused } : d)
+        toast.show({ variant: "info", message: r.paused ? "Delegation paused" : "Delegation resumed" })
+      })
+      .catch((e: Error) => toast.show({ variant: "error", message: e.message }))
+  }, [gw, toast, deleg?.paused])
+
+  useEffect(() => cmd.register([
+    { title: deleg?.paused ? "Resume Delegation" : "Pause Delegation", value: "deleg.pause",
+      category: "Agents", onSelect: togglePause },
+  ]), [cmd, togglePause, deleg?.paused])
+
+  const pHint = pWide
+    ? `↑↓ nav  ${keys.print("list.activate")} actions  ${keys.print("list.new")} new  ${keys.print("list.delete")} delete  ${keys.print("list.refresh")} refresh`
+    : pView === "list" ? `↑↓ nav  ${keys.print("list.activate")} detail  ${keys.print("list.new")} new  ${keys.print("list.delete")} delete`
+    : `${keys.print("list.activate")} actions  Esc back  ${keys.print("list.delete")} delete`
+
+  return (
+    <box flexDirection="row" flexGrow={1}>
+      {/* ── Profiles ── */}
+      {showProfiles ? (
+      <TabShell title={`Profiles (${profiles.length})${sticky ? `  ·  ★ ${sticky}` : ""}`}
+                hint={`${pHint}  Tab ${wide ? "→" : "↔"} delegation`}
+                error={err || null}
+                focus={pane === "profiles"} grow={3}>
+        <box flexDirection="row" flexGrow={1} minWidth={0}>
+          {showList ? (
+          <box flexDirection="column" flexGrow={1} flexBasis={0} minWidth={14}>
+            <scrollbox ref={pFollow.ref} scrollY flexGrow={1} verticalScrollbarOptions={VBAR}>
+              {profiles.map((p, i) => (
+                <ProfileRow key={p.name} id={pFollow.id(i)} p={p} idx={i} selected={i === pSel}
+                  onHover={pHover} onEnter={pEnter} onDelete={pDelete} />
+              ))}
+            </scrollbox>
+          </box>
+          ) : null}
+          {showList && showDetail ? <box width={2} /> : null}
+          {showDetail ? (
+          <box flexDirection="column" flexGrow={2} flexBasis={0} minWidth={0}>
+            {selected ? <ProfileDetail p={selected} stats={stats.get(selected.path)} />
+              : <box height={1}><text fg={theme.textMuted}>No profiles</text></box>}
+          </box>
+          ) : null}
+        </box>
+      </TabShell>
+      ) : null}
+
+      {/* ── Delegation ── */}
+      {showDeleg ? (
+      <TabShell title={`Delegation (${active.length})`}
+                hint={`↑↓ nav  ${keys.print("agents.kill")} interrupt  ${keys.print("agents.history")} history  ${keys.print("list.refresh")} refresh  ·  ${dHint}`}
+                focus={pane === "deleg"} grow={2}>
+        <box height={1} flexDirection="row" marginBottom={1}>
+          <box flexShrink={0} paddingX={1}
+               backgroundColor={deleg?.paused ? theme.warning : theme.backgroundElement}
+               onMouseDown={togglePause}>
+            <text fg={deleg?.paused ? theme.background : theme.text}>
+              {deleg?.paused ? "⏸ paused" : "▶ active"}
+            </text>
+          </box>
+          <box flexGrow={1} />
+          <text fg={theme.textMuted}>click to {deleg?.paused ? "resume" : "pause"}</text>
+        </box>
+        {active.length === 0 ? (
+          <box key="empty" flexGrow={1}>
+            <text fg={theme.textMuted}>
+              {deleg?.paused ? "Paused — new subagents will queue" : "No subagents running  ·  h for history"}
+            </text>
+          </box>
+        ) : (
+          <box key="body" flexDirection="column" flexGrow={1} minHeight={0}>
+            <scrollbox ref={dFollow.ref} scrollY flexGrow={3} flexBasis={0} verticalScrollbarOptions={VBAR}>
+              {active.map((r, i) => {
+                const lv = liveMap.get(r.subagent_id)
+                const row = lv ? { ...r, tool_count: lv.tool_count } : r
+                const h = heat(aggOf.get(r.subagent_id)?.hot ?? 0, hotPeak, HOT.length)
+                return <DelegRow key={r.subagent_id} id={dFollow.id(i)} r={row} idx={i}
+                  selected={i === dSel} now={now} hot={h}
+                  onHover={dHover} onKill={dKill} />
+              })}
+            </scrollbox>
+            <box height={1}><text fg={theme.border}>{"─".repeat(4)}</text></box>
+            <box flexGrow={2} flexBasis={0} minHeight={0}>
+              {active[dSel]
+                ? <DelegDetail r={active[dSel]} live={liveMap.get(active[dSel].subagent_id)}
+                    agg={aggOf.get(active[dSel].subagent_id)} now={now} />
+                : null}
+            </box>
+          </box>
+        )}
+      </TabShell>
+      ) : null}
+    </box>
+  )
+})