herm-tui 1.0.0-dev.1 → 1.0.0-dev.3

package/src/tabs/Context.tsx

@@ -1,599 +0,0 @@
-/**
- * Context tab — two-level drill-down context window visualizer.
- *
- * Level 0: System Prompt | System Tools | MCP Tools | Memory |
- *          Skills | Conversation | Free
- * Level 1: Click a group → grid expands to show children
- * Detail:  Click a leaf → right panel shows content
- *
- * The grid always fills 16×16 = 256 cells.
- * At level 0, cells are proportional to the full context window.
- * At level 1, cells are proportional to the drilled group's total.
- */
-
-import { useEffect, useState, useRef, useMemo, memo, type Dispatch, type SetStateAction } from "react"
-import { CORNERS } from "../ui/borders"
-import { useKeyboard } from "@opentui/react"
-
-import type { Message } from "../types/message"
-import { text as msgText } from "../types/message"
-import type { ToolInfo, HermesConfig } from "../utils/hermes-home"
-import type { SessionInfo } from "../utils/gateway-types"
-import { useHome, home } from "../home"
-import { useGateway } from "../app/gateway"
-import { useKeys, handleListKey } from "../keys"
-import { useDialog } from "../ui/dialog"
-import { useToast } from "../ui/toast"
-import { openTextPrompt } from "../dialogs/text-prompt"
-import { count } from "../utils/tokens"
-import {
-  parse,
-  build,
-  drill,
-  cells as buildCells,
-  classifyTools,
-  toolTokens,
-  type Segment,
-} from "../utils/context-segments"
-import { FileLink } from "../components/ui/FileLink"
-import { useTheme, type Theme } from "../theme"
-import { TabShell } from "../ui/shell"
-import { categorical } from "../utils/categorical"
-import type { RGBA } from "@opentui/core"
-
-// ─── Types ───────────────────────────────────────────────────────────
-
-type Props = {
-  description?: string
-  messages?: Message[]
-  sessionStart?: number
-  info?: SessionInfo
-  focused?: boolean
-}
-
-type Wire = { input: number; output: number; total: number; calls: number }
-
-// ─── Constants ───────────────────────────────────────────────────────
-
-// Conservative fallback when gateway hasn't surfaced info.context_max
-// yet (fresh session, pre-session.info). Real value comes from
-// SessionInfo.context_max on the wire.
-const DEFAULT_CTX = 128_000
-const COLS = 16
-
-// ─── Colors ──────────────────────────────────────────────────────────
-
-// Slot assignment for the categorical ramp. Order matters only in that it
-// fixes each id to a stable hue family across themes; `free` is not a slot
-// (it renders as borderSubtle since it's absence-of-content, not a category).
-export const SLOTS = [
-  "system_prompt",
-  "system_tools",
-  "mcp_tools",
-  "memory",
-  "skills",
-  "conversation",
-  "soul",
-  "mem0",
-  "user",
-  "project",
-  "meta",
-  "other",
-] as const
-
-const SLOT: Record<string, number> = Object.fromEntries(SLOTS.map((id, i) => [id, i]))
-
-// Ramp is deterministic per theme; cache on theme identity so every clr()
-// call across all panels resolves from one array. Theme objects are stable
-// (resolved once in ThemeProvider), so WeakMap keying is safe.
-const rampCache = new WeakMap<Theme, RGBA[]>()
-
-function ramp(theme: Theme): RGBA[] {
-  let r = rampCache.get(theme)
-  if (!r) rampCache.set(theme, r = categorical(theme.primary, theme.background, SLOTS.length))
-  return r
-}
-
-export function clr(id: string, theme: Theme): RGBA {
-  if (id === "free") return theme.borderSubtle
-  return ramp(theme)[SLOT[id] ?? SLOT.other]
-}
-
-// ─── Utilities ───────────────────────────────────────────────────────
-
-const fmt = (n: number) => {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
-  if (n >= 10_000) return `${Math.round(n / 1000)}k`
-  if (n >= 1_000) return `${(n / 1000).toFixed(1)}k`
-  return String(n)
-}
-
-const est = (s: string) => s ? count(s) : 0
-
-const bar = (pct: number, w = 20) => {
-  const f = Math.round((Math.max(0, Math.min(100, pct)) / 100) * w)
-  return `[${"█".repeat(f)}${"░".repeat(Math.max(0, w - f))}]`
-}
-
-// ─── Detail Panels ──────────────────────────────────────────────────
-
-/** Generic section detail — renders the raw document body as markdown. */
-const SectionPanel = memo(({ seg, theme }: { seg: Segment; theme: Theme }) => {
-  const { syntaxStyle } = useTheme()
-  const sec = seg.section
-  if (!sec) return null
-  return (
-    <scrollbox borderStyle="single" padding={1} flexGrow={1} scrollY>
-      <text>
-        <strong><span fg={clr(seg.id, theme)}>◼</span> {seg.label} — {fmt(seg.tokens)} tokens ({seg.percent.toFixed(1)}%)</strong>
-      </text>
-      <text>{sec.chars.toLocaleString()} chars · ~{fmt(sec.tokens)} tokens</text>
-      {sec.source ? <box flexDirection="row" height={1}><text>Source: </text><FileLink source={sec.source} /></box> : null}
-      <text> </text>
-      <markdown content={sec.text} fg={theme.markdownText} syntaxStyle={syntaxStyle} />
-    </scrollbox>
-  )
-})
-
-/** Memory detail with capacity bar + entries */
-const MemoryPanel = memo(({ seg, theme, label, chars, limit, pct, entries, source }: {
-  seg: Segment; theme: Theme; label: string
-  chars: number; limit: number; pct: number; entries: string[]
-  source?: { file: string; relative: string; label: string }
-}) => (
-  <scrollbox borderStyle="single" padding={1} flexGrow={1} scrollY>
-    <text>
-      <strong><span fg={clr(seg.id, theme)}>◼</span> {seg.label} — {fmt(seg.tokens)} tokens ({seg.percent.toFixed(1)}%)</strong>
-    </text>
-    <text> </text>
-    <box flexDirection="row" height={1}>
-      <text><strong>{label}</strong></text>
-      {source ? <><text> (</text><FileLink source={source} /><text>)</text></> : null}
-    </box>
-    <text>{chars.toLocaleString()} / {limit.toLocaleString()} chars ({pct}%)</text>
-    <text>{bar(pct, 25)}{pct >= 95 ? " ⚠ near limit" : ""}</text>
-    <text> </text>
-    <text>{entries.length} entries:</text>
-    {entries.map((e, i) => <text key={i} fg={theme.text}>· {e}</text>)}
-  </scrollbox>
-))
-
-/** Skills detail with category breakdown */
-const SkillsPanel = memo(({ seg, theme }: { seg: Segment; theme: Theme }) => {
-  const sec = seg.section
-  if (!sec) return null
-  const cats: Record<string, number> = {}
-  for (const line of sec.text.split("\n")) {
-    if (line.match(/^\s{2}(\S[\w-]*(?:\/\S+)?):\s/)) {
-      const cat = line.match(/^\s{2}(\S[\w-]*(?:\/\S+)?):\s/)![1]
-      if (!cats[cat]) cats[cat] = 0
-    }
-    if (line.match(/^\s{4}- \S+:/)) {
-      const last = Object.keys(cats).pop()
-      if (last) cats[last]++
-    }
-  }
-  const sorted = Object.entries(cats).sort((a, b) => b[1] - a[1])
-  const total = sorted.reduce((s, [, n]) => s + n, 0)
-
-  return (
-    <scrollbox borderStyle="single" padding={1} flexGrow={1} scrollY>
-      <text>
-        <strong><span fg={clr("skills", theme)}>◼</span> Skills Catalog — {fmt(seg.tokens)} tokens ({seg.percent.toFixed(1)}%)</strong>
-      </text>
-      {sec.source ? <box flexDirection="row" height={1}><text>Source: </text><FileLink source={sec.source} /></box> : null}
-      <text> </text>
-      <text>{total} skills in {sorted.length} categories · {sec.chars.toLocaleString()} chars</text>
-      <text fg={theme.textMuted}>Largest context section — skill names + descriptions injected every turn.</text>
-      <text> </text>
-      {sorted.map(([cat, n]) => <text key={cat} fg={theme.text}>· {cat} ({n})</text>)}
-    </scrollbox>
-  )
-})
-
-/** Tools detail — handles system builtins or MCP depending on `kind` */
-const ToolsPanel = memo(({ seg, theme, tools, kind }: {
-  seg: Segment; theme: Theme; tools: ReadonlyArray<ToolInfo>
-  kind: "system_tools" | "mcp_tools"
-}) => {
-  const sorted = [...tools].sort((a, b) =>
-    (b.descriptionLength + b.paramsLength) - (a.descriptionLength + a.paramsLength),
-  )
-  const label = kind === "mcp_tools" ? "MCP Tools" : "System Tools"
-  const blurb = kind === "mcp_tools"
-    ? "MCP-loaded tools — schemas injected via mcp_ prefix."
-    : "Built-in tool schemas sent with every API call."
-  return (
-    <scrollbox borderStyle="single" padding={1} flexGrow={1} scrollY>
-      <text>
-        <strong><span fg={clr(kind, theme)}>◼</span> {label} — {fmt(seg.tokens)} tokens ({seg.percent.toFixed(1)}%)</strong>
-      </text>
-      <text> </text>
-      <text>{tools.length} tools — {blurb}</text>
-      <text> </text>
-      {sorted.map(t => (
-        <text key={t.name} fg={theme.text}>
-          · {t.name} ({fmt(toolTokens(t))} tok)
-        </text>
-      ))}
-    </scrollbox>
-  )
-})
-
-/** Conversation detail */
-const ConvPanel = memo(({ seg, theme, messages, output }: {
-  seg: Segment; theme: Theme; messages: Message[]; output: number
-}) => {
-  const user = messages.filter(m => m.role === "user")
-  const asst = messages.filter(m => m.role === "assistant")
-  const non = messages.filter(m => m.role !== "system")
-  return (
-    <scrollbox borderStyle="single" padding={1} flexGrow={1} scrollY>
-      <text>
-        <strong><span fg={clr("conversation", theme)}>◼</span> Conversation — {fmt(seg.tokens)} tokens ({seg.percent.toFixed(1)}%)</strong>
-      </text>
-      <text> </text>
-      <text>User: {user.length} msgs (~{fmt(est(user.map(m => msgText(m)).join("")))} tok)</text>
-      <text>Agent: {asst.length} msgs (~{fmt(est(asst.map(m => msgText(m)).join("")))} tok)</text>
-      {output > 0 ? <text>Output generated: {fmt(output)} tokens</text> : null}
-      <text> </text>
-      {non.length > 0 ? (
-        <>
-          <text fg={theme.info}>Messages:</text>
-          <text> </text>
-          {non.map((m, i) => (
-            <text key={i}>
-              <span fg={m.role === "user" ? theme.info : theme.success}>
-                {m.role === "user" ? "▸ You" : "◂ Agent"}
-              </span>{" "}({fmt(est(msgText(m)))}) {msgText(m).replace(/\n/g, " ")}
-            </text>
-          ))}
-        </>
-      ) : <text fg={theme.warning}>No messages yet</text>}
-    </scrollbox>
-  )
-})
-
-/** Free space detail */
-const FreePanel = memo(({ seg, theme, ctxLen, comp, onEditThreshold }: {
-  seg: Segment; theme: Theme; ctxLen: number
-  comp: HermesConfig["compression"] | undefined
-  onEditThreshold: () => void
-}) => {
-  const used = ctxLen - seg.tokens
-  const threshold = Math.round(ctxLen * (comp?.threshold ?? 0.5))
-  const pct = threshold > 0 ? Math.min(100, Math.round((used / threshold) * 100)) : 0
-  return (
-    <scrollbox borderStyle="single" padding={1} flexGrow={1} scrollY>
-      <text><strong><span fg={clr("free", theme)}>◻</span> Free Space — {fmt(seg.tokens)} tokens</strong></text>
-      <text> </text>
-      <text>Context window: {fmt(ctxLen)}</text>
-      <text>Used: {fmt(used)} ({Math.round((used / ctxLen) * 100)}%)</text>
-      <text>Available: {fmt(seg.tokens)} ({seg.percent.toFixed(1)}%)</text>
-      <text> </text>
-      {comp ? (
-        <>
-          <text><strong>Compression</strong></text>
-          <box height={1} flexDirection="row">
-            <text>{comp.enabled ? "✓ Enabled" : "✗ Disabled"} · threshold </text>
-            <box flexShrink={0} onMouseDown={onEditThreshold}>
-              <text fg={theme.info}><u>{Math.round(comp.threshold * 100)}%</u></text>
-            </box>
-            <text> ({fmt(threshold)})</text>
-          </box>
-          <text>{bar(pct)} {pct}%</text>
-          <text>Protect last {comp.protect_last_n} messages · target ratio {Math.round(comp.target_ratio * 100)}%</text>
-          {comp.summary_model ? <text>Summary model: {comp.summary_model}</text> : null}
-        </>
-      ) : null}
-    </scrollbox>
-  )
-})
-
-// Stable empty default so memo comparison and downstream useEffect
-// deps don't see a fresh [] reference on every render.
-const NO_MESSAGES: readonly Message[] = Object.freeze([])
-
-// ─── Main Component ──────────────────────────────────────────────────
-
-export const Context = memo(({ messages = NO_MESSAGES as Message[], info, focused }: Props) => {
-  const config = useHome("config")
-  const memory = useHome("memory")
-  const userProfile = useHome("userProfile")
-  const gw = useGateway()
-  const dialog = useDialog()
-  const toast = useToast()
-  const systemPrompt = useHome("systemPrompt")
-  const toolsInfo = useHome("toolsInfo")
-  const soul = useHome("soul")
-  const recentSessions = useHome("recentSessions")
-  const liveSessions = useHome("liveSessions")
-
-  const [wire, setWire] = useState<Wire>({ input: 0, output: 0, total: 0, calls: 0 })
-  const wireRef = useRef(wire)
-  const theme = useTheme().theme
-  const [hovered, setHovered] = useState<string | null>(null)
-  const [selected, setSelected] = useState<string | null>(null)
-  const [drilled, setDrilled] = useState<string | null>(null)
-
-  // Track wire usage from messages
-  useEffect(() => {
-    let input = 0, output = 0, total = 0, calls = 0
-    for (const m of messages) {
-      if (m.usage) {
-        input += m.usage.input
-        output += m.usage.output
-        total += m.usage.total
-        calls++
-      }
-    }
-    const next: Wire = { input, output, total, calls }
-    wireRef.current = next
-    setWire(next)
-  }, [messages])
-
-  // Derived
-  const session = recentSessions?.[0]
-  // Gateway's context_max is the authoritative runtime value. Fall back
-  // to DEFAULT_CTX only during the fresh-session window before
-  // session.info lands.
-  const ctxLen = info?.context_max ?? DEFAULT_CTX
-
-  const live = session
-    ? Object.values(liveSessions ?? {}).find(ls => ls.session_id === session.id)
-    : undefined
-
-  const lastPrompt = live?.last_prompt_tokens ?? 0
-  const fill = wire.calls > 0 ? wire.input : lastPrompt > 0 ? lastPrompt : (session?.input_tokens ?? 0)
-  const cumulative = wire.calls === 0 && lastPrompt === 0 && (session?.input_tokens ?? 0) > 0
-  const output = wire.calls > 0 ? wire.output : (session?.output_tokens ?? 0)
-  const pct = ctxLen > 0 ? Math.round((fill / ctxLen) * 100) : 0
-
-  // Threshold marker inputs. `config.compression.threshold` is the
-  // single source of truth; server reads the same key.
-  const thresholdPct = config?.compression?.threshold ?? 0.5
-  // Linear cell index (0..255) at threshold; cells at/past render ◼ in textMuted.
-  const thresholdIdx = Math.min(COLS * COLS, Math.max(0, Math.round(thresholdPct * COLS * COLS)))
-  const compressions = info?.usage?.compressions ?? 0
-
-  // Parse + build
-  const sections = useMemo(() => parse(systemPrompt?.text ?? ""), [systemPrompt?.text])
-  const convTok = useMemo(() => est(messages.filter(m => m.role !== "system").map(m => msgText(m)).join("")), [messages])
-
-  const top = useMemo(() => build({
-    contextLength: ctxLen,
-    inputTokens: fill,
-    sections,
-    conversationTokens: convTok,
-    tools: toolsInfo?.tools ?? [],
-  }), [ctxLen, fill, sections, convTok, toolsInfo?.tools])
-
-  // Current view: top-level or drilled
-  const drilledGroup = drilled ? top.find(s => s.id === drilled) : null
-  const view = drilledGroup ? drill(drilledGroup) : top
-  const grid = useMemo(
-    () => buildCells(view, drilledGroup ? drilledGroup.children?.[0]?.id ?? "other" : "free"),
-    [view, drilledGroup],
-  )
-
-  // Helpers
-  const findSeg = (id: string) => {
-    if (drilledGroup) return view.find(s => s.id === id)
-    return top.find(s => s.id === id)
-  }
-
-  const memEntries = useMemo(() => (memory?.content ?? "").split("§").map(s => s.trim()).filter(Boolean), [memory?.content])
-  const userEntries = useMemo(() => (userProfile?.content ?? "").split("§").map(s => s.trim()).filter(Boolean), [userProfile?.content])
-
-  // Click handler
-  const click = (id: string) => {
-    // Already drilled — clicking selects detail or deselects
-    if (drilled) {
-      setSelected(selected === id ? null : id)
-      return
-    }
-    // Top level — if group with children, drill in
-    const seg = top.find(s => s.id === id)
-    if (seg?.children && seg.children.length > 0) {
-      setDrilled(id)
-      setSelected(null)
-      return
-    }
-    // Leaf at top level — toggle detail
-    setSelected(selected === id ? null : id)
-  }
-
-  // Esc pops one drill level (detail → group → overview); double-tap
-  // within 400ms jumps straight to overview. Replaces the '◀ Back to
-  // overview' row, which stole a line above the grid and broke
-  // top-alignment with the breakdown pane.
-  const lastEsc = useRef(0)
-  // Keyboard: grid navigates via shared list.* vocabulary so rebinds
-  // (j/k, home/end, PgUp/PgDn) flow here for free. Flattened row-major
-  // segs is the 'list'; setSel maps index ↔ selected id. ←/→ are tab-
-  // local aliases since the grid reads 2D but traversal is linear.
-  const segs = view.filter(s => s.tokens > 0)
-  const idx = selected ? segs.findIndex(s => s.id === selected) : -1
-  const setSel: Dispatch<SetStateAction<number>> = (v) => {
-    const n = Math.max(0, Math.min(segs.length - 1, typeof v === "function" ? v(idx) : v))
-    setSelected(segs[n]?.id ?? null)
-  }
-  const keys = useKeys()
-  useKeyboard((key) => {
-    if (!focused || dialog.stack.length > 0) return
-    if (handleListKey(keys, key, {
-      count: segs.length, setSel,
-      onActivate: () => {
-        if (drilled || !selected) return
-        const seg = top.find(s => s.id === selected)
-        if (seg?.children?.length) { setDrilled(selected); setSelected(null) }
-      },
-    })) return
-    if (key.name === "right") return setSel(p => p + 1)
-    if (key.name === "left")  return setSel(p => p - 1)
-    if (key.name !== "escape") return
-    const now = Date.now()
-    if (now - lastEsc.current < 400) {
-      setSelected(null); setDrilled(null); lastEsc.current = 0; return
-    }
-    lastEsc.current = now
-    if (selected) return setSelected(null)
-    if (drilled) return setDrilled(null)
-  })
-
-  const editThreshold = async () => {
-    const cur = Math.round((config?.compression?.threshold ?? 0.5) * 100)
-    const v = await openTextPrompt(dialog, {
-      title: "Compression threshold", label: "Percent (10–95)", initial: String(cur),
-    })
-    if (v === null) return
-    const n = Math.max(10, Math.min(95, Number(v) || cur))
-    const { writeConfig } = await import("../config/lane")
-    const r = await writeConfig(gw, [{ key: "compression.threshold", to: n / 100 }])
-    if (r.failed.length) return toast.show({ variant: "error", message: r.failed[0].err })
-    home.invalidate("config")
-    toast.show({ variant: "success", message: `Threshold → ${n}%` })
-  }
-
-  // Detail panel router
-  const detail = () => {
-    if (!selected) return null
-    const seg = findSeg(selected)
-    if (!seg) return null
-
-    // Memory children (accessible when drilled into memory group)
-    if (selected === "memory" && drilled === "memory" && memory) {
-      return <MemoryPanel seg={seg} theme={theme} label="Agent Notes" chars={memory.charCount} limit={memory.charLimit} pct={memory.usagePercent} entries={memEntries} source={memory.source} />
-    }
-    if (selected === "user" && userProfile) {
-      return <MemoryPanel seg={seg} theme={theme} label="User Profile" chars={userProfile.charCount} limit={userProfile.charLimit} pct={userProfile.usagePercent} entries={userEntries} source={userProfile.source} />
-    }
-    if (selected === "skills") return <SkillsPanel seg={seg} theme={theme} />
-    if (selected === "system_tools" && toolsInfo) {
-      const { system } = classifyTools(toolsInfo.tools)
-      return <ToolsPanel seg={seg} theme={theme} tools={system} kind="system_tools" />
-    }
-    if (selected === "mcp_tools" && toolsInfo) {
-      const { mcp } = classifyTools(toolsInfo.tools)
-      return <ToolsPanel seg={seg} theme={theme} tools={mcp} kind="mcp_tools" />
-    }
-    // SOUL drill: prefer the file-backed slice (authoritative read) over
-    // the parsed segment from systemPrompt.text.
-    if (selected === "soul" && soul) {
-      const soulSeg: Segment = {
-        ...seg,
-        section: {
-          id: "soul",
-          label: "SOUL.md",
-          chars: soul.charCount,
-          tokens: soul.tokenEstimate,
-          text: soul.content,
-          source: soul.source,
-        },
-      }
-      return <SectionPanel seg={soulSeg} theme={theme} />
-    }
-    if (selected === "conversation") return <ConvPanel seg={seg} theme={theme} messages={messages} output={output} />
-    if (selected === "free") return <FreePanel seg={seg} theme={theme} ctxLen={ctxLen} comp={config?.compression} onEditThreshold={editThreshold} />
-    return <SectionPanel seg={seg} theme={theme} />
-  }
-
-  // Breakdown panel
-  const breakdown = () => (
-    <box flexDirection="column" marginBottom={1}>
-      <text>
-        <strong>Breakdown</strong>
-        {drilledGroup ? (
-          <span fg={theme.info}> · {drilledGroup.label} ({fmt(drilledGroup.tokens)} tok)</span>
-        ) : (
-          <span fg={theme.info}> (click group to expand)</span>
-        )}
-      </text>
-      {view.filter(s => s.tokens > 0).map(s => (
-        <text key={s.id}>
-          <span fg={clr(s.id, theme)}>{s.id === "free" ? "◻" : "◼"}</span>{" "}
-          {s.label} — {fmt(s.tokens)} ({s.percent.toFixed(1)}%)
-          {s.children ? <span fg={theme.textMuted}> ▸</span> : null}
-        </text>
-      ))}
-      {output > 0 && !drilled ? (
-        <text><span fg={theme.success}>◼</span> Output — {fmt(output)} tokens</text>
-      ) : null}
-      <text>
-        <span fg={theme.textMuted}>◼ Beyond compression threshold ({Math.round(thresholdPct * 100)}%)</span>
-      </text>
-    </box>
-  )
-
-  const crumb = drilled
-    ? `${drilledGroup?.label}${selected ? ` · ${findSeg(selected)?.label}` : ""}`
-    : wire.calls === 0 && fill === 0 ? "[no data]"
-    : cumulative ? "[cumulative — not current fill]"
-    : wire.calls === 0 && fill > 0 ? "[live session]"
-    : "↑↓ nav  ·  click a group to drill in"
-  const escHint = selected || drilled ? "  ·  Esc back" : ""
-
-  const focus = selected || hovered
-  const focusSeg = focus ? findSeg(focus) : null
-
-  return (
-    <TabShell
-      title={`Context · ${fmt(fill)} / ${fmt(ctxLen)} (${pct}%)`}
-      hint={crumb + escHint}
-    >
-      <box height={1}>
-        {focusSeg ? (
-          <text fg={clr(focusSeg.id, theme)}>
-            ◼ {focusSeg.label} — {fmt(focusSeg.tokens)} tok ({focusSeg.percent.toFixed(1)}%)
-          </text>
-        ) : <text>{" "}</text>}
-      </box>
-      <box height={1} />
-      <box flexDirection="row" flexGrow={1}>
-        <box flexDirection="column" marginRight={2} flexShrink={0}>
-          {/* Compression badge — shown inline above the grid when any
-              compression events have fired this session. */}
-          {compressions > 0 ? (
-            <box height={1} marginBottom={1}>
-              <text fg={theme.warning}>×{compressions} compressed</text>
-            </box>
-          ) : null}
-          <box border
-               customBorderChars={CORNERS}
-               borderColor={theme.border}>
-            {[...Array(COLS)].map((_, row) => (
-              <box key={row} flexDirection="row" height={1}>
-                {[...Array(COLS)].map((_, col) => {
-                  const cell = grid[row * COLS + col]
-                  // Selection wins over hover — otherwise hovering a
-                  // different segment lights both groups at once.
-                  const hl = selected ? selected === cell.id : hovered === cell.id
-                  // Past-threshold cells: ◼ in textMuted; hover still shows category color.
-                  const past = row * COLS + col >= thresholdIdx
-                  const glyph = !past && cell.id === "free" ? "◻" : "◼"
-                  return (
-                    <box
-                      height={1} width={2} key={col}
-                      backgroundColor={hl ? clr(cell.id, theme) : undefined}
-                      onMouseOver={() => setHovered(cell.id)}
-                      onMouseOut={() => setHovered(null)}
-                      onMouseDown={() => click(cell.id)}
-                    >
-                      <text fg={past ? theme.textMuted : clr(cell.id, theme)}>
-                        {glyph}
-                      </text>
-                    </box>
-                  )
-                })}
-              </box>
-            ))}
-          </box>
-        </box>
-
-        <box flexDirection="column" flexGrow={1} minWidth={0}>
-          {selected ? detail() : breakdown()}
-        </box>
-      </box>
-    </TabShell>
-  )
-})