herm-tui 1.0.0-dev.1

package/src/tabs/Kanban.tsx

@@ -0,0 +1,367 @@
+import { useState, useEffect, useCallback, useMemo, useRef, memo } from "react"
+import { useKeyboard, useTerminalDimensions } from "@opentui/react"
+import type { ScrollBoxRenderable } from "@opentui/core"
+import {
+  board, detail, assignees, tailLog, q, STATUSES,
+  type Task, type Status, type Detail,
+} from "../utils/hermes-kanban"
+import { useKeys } from "../keys"
+import { useTheme } from "../theme"
+import { useGateway } from "../app/gateway"
+import { useDialog } from "../ui/dialog"
+import { useToast } from "../ui/toast"
+import { DialogSelect } from "../ui/dialog-select"
+import { openConfirm } from "../dialogs/confirm"
+import { openTextPrompt } from "../dialogs/text-prompt"
+import { openCreateTask } from "../dialogs/new-task"
+import { TabShell } from "../ui/shell"
+import { KVBlock } from "../ui/kv"
+import { ago, trunc } from "../ui/fmt"
+
+// Operator board for ~/.hermes/kanban.db.
+//
+// Reads are sidecar SQLite. Every write routes through
+// `shell.exec → hermes kanban <verb>` so kanban_db.py owns the state
+// machine (recompute_ready, link-cycle guard, task_events, notify
+// subs) and herm can't drift from the CLI/dashboard.
+//
+// Verbs exposed here cover the human-operator loop from the
+// kanban-orchestrator/worker skills:
+//
+//   n  create          c  comment              a  assign
+//   N  create-child     u  unblock (+answer)    d  archive
+//   D  dispatch         r  reload               l  worker log
+//   Enter detail        ←→↑↓ nav                Esc close pane
+
+type Sh = { stdout: string; stderr: string; code: number }
+
+const HEAD: Record<Status, string> = {
+  triage: "triage", todo: "todo", ready: "ready",
+  running: "running", blocked: "blocked", done: "done",
+}
+
+const Card = memo((p: { id: string; t: Task; on: boolean; colOn: boolean; onPick: () => void }) => {
+  const theme = useTheme().theme
+  const fg = p.on ? theme.accent : p.colOn ? theme.text : theme.textMuted
+  return (
+    <box id={p.id} height={2} flexDirection="column"
+         backgroundColor={p.on ? theme.backgroundElement : undefined}
+         onMouseDown={p.onPick}>
+      <box height={1} overflow="hidden">
+        <text>
+          <span fg={p.on ? theme.primary : theme.textMuted}>{p.on ? "▸ " : "  "}</span>
+          <span fg={fg}>{trunc(p.t.title, 60)}</span>
+        </text>
+      </box>
+      <box height={1} overflow="hidden">
+        <text fg={theme.textMuted}>
+          {`  ${p.t.id.slice(0, 8)}  ${p.t.assignee ?? "—"}${p.t.priority ? `  P${p.t.priority}` : ""}${p.t.pid ? `  pid ${p.t.pid}` : ""}`}
+        </text>
+      </box>
+    </box>
+  )
+})
+
+const Column = memo((p: {
+  status: Status; tasks: Task[]; on: boolean; sel: number
+  onPick: (i: number) => void
+}) => {
+  const theme = useTheme().theme
+  const box = useRef<ScrollBoxRenderable | null>(null)
+  const id = (i: number) => `kb-${p.status}-${i}`
+  // Keep the selected card in view. Fires on ↑↓ and on ←→ (p.on flips
+  // true) so entering a column that was previously scrolled away snaps
+  // to row 0. No-op while this column isn't active.
+  useEffect(() => {
+    if (p.on && p.tasks.length > 0) box.current?.scrollChildIntoView(id(p.sel))
+  }, [p.on, p.sel, p.tasks.length])
+  const tint = p.status === "blocked" ? theme.warning
+    : p.status === "running" ? theme.success
+    : p.status === "done" ? theme.textMuted : theme.primary
+  return (
+    <box flexDirection="column" flexGrow={1} flexBasis={0} minWidth={20}
+         border borderColor={p.on ? theme.primary : theme.border} paddingLeft={1} paddingRight={1}>
+      <box height={1}>
+        <text>
+          <span fg={tint}><strong>{HEAD[p.status]}</strong></span>
+          <span fg={theme.textMuted}>{`  ${p.tasks.length}`}</span>
+        </text>
+      </box>
+      <scrollbox ref={box} scrollY flexGrow={1}>
+        <box flexDirection="column" width="100%">
+          {p.tasks.map((t, i) => (
+            <Card key={t.id} id={id(i)} t={t} on={p.on && i === p.sel} colOn={p.on}
+                  onPick={() => p.onPick(i)} />
+          ))}
+        </box>
+      </scrollbox>
+    </box>
+  )
+})
+
+type Pane = { kind: "detail"; d: Detail } | { kind: "log"; id: string; text: string }
+
+const SidePane = memo((p: { pane: Pane }) => {
+  const { theme, syntaxStyle } = useTheme()
+  if (p.pane.kind === "log") return (
+    <box flexDirection="column" padding={1} border borderColor={theme.border}
+         backgroundColor={theme.backgroundPanel} width="50%">
+      <box height={1}><text>
+        <span fg={theme.primary}><strong>{p.pane.id}</strong></span>
+        <span fg={theme.textMuted}>{"  ·  worker log (tail)"}</span>
+      </text></box>
+      <box height={1} />
+      <scrollbox scrollY flexGrow={1}>
+        <text wrapMode="word" fg={theme.textMuted}>{p.pane.text || "(empty)"}</text>
+      </scrollbox>
+    </box>
+  )
+  const d = p.pane.d
+  return (
+    <box flexDirection="column" padding={1} border borderColor={theme.border}
+         backgroundColor={theme.backgroundPanel} width="50%">
+      <box height={1}>
+        <text>
+          <span fg={theme.primary}><strong>{d.id}</strong></span>
+          <span fg={theme.textMuted}>{`  ·  ${d.status}  ·  ${ago(d.updated_at)}`}</span>
+        </text>
+      </box>
+      <box height={1}><text fg={theme.accent}><strong>{d.title}</strong></text></box>
+      <box height={1} />
+      <KVBlock rows={[
+        ["Assignee", d.assignee ?? "—"],
+        ["Priority", d.priority ? `P${d.priority}` : "—"],
+        ["Tenant", d.tenant ?? undefined],
+        ["Parents", d.parents.length ? d.parents.join(", ") : undefined],
+        ["Children", d.children.length ? d.children.join(", ") : undefined],
+        ["PID", d.pid ? String(d.pid) : undefined],
+        ["Error", d.error ?? undefined, theme.error],
+      ]} />
+      <box height={1} />
+      <scrollbox scrollY flexGrow={1}>
+        <box flexDirection="column" width="100%">
+          {d.body ? <markdown content={d.body} fg={theme.markdownText} syntaxStyle={syntaxStyle} /> : null}
+          {d.result ? <>
+            <box height={1} />
+            <box height={1}><text fg={theme.textMuted}>Result</text></box>
+            <markdown content={d.result} fg={theme.markdownText} syntaxStyle={syntaxStyle} />
+          </> : null}
+          {d.comments.length > 0 ? <>
+            <box height={1} />
+            <box height={1}><text fg={theme.textMuted}>{`Comments (${d.comments.length})`}</text></box>
+            {d.comments.map((c, i) => (
+              <box key={i} flexDirection="column" marginTop={1}>
+                <box height={1}><text fg={theme.textMuted}>{`${c.author}  ·  ${ago(c.at)}`}</text></box>
+                <text wrapMode="word">{c.body}</text>
+              </box>
+            ))}
+          </> : null}
+        </box>
+      </scrollbox>
+      <box height={1}><text fg={theme.textMuted}>a assign  c comment  u unblock  d archive  l log  N child</text></box>
+    </box>
+  )
+})
+
+export const Kanban = memo((props: { focused?: boolean }) => {
+  const theme = useTheme().theme
+  const gw = useGateway()
+  const dialog = useDialog()
+  const toast = useToast()
+  const dims = useTerminalDimensions()
+  const keys = useKeys()
+
+  const [data, setData] = useState(() => board())
+  const [col, setCol] = useState(0)
+  const [row, setRow] = useState(0)
+  const [pane, setPane] = useState<Pane | null>(null)
+
+  const load = useCallback(() => {
+    setData(board())
+    setPane(p => p?.kind === "detail" ? (d => d ? { kind: "detail", d } : null)(detail(p.d.id)) : p)
+  }, [])
+  useEffect(load, [load])
+
+  // Cheap live-ish refresh while focused AND something is running.
+  // `running` changing length recreates the interval; back off to
+  // manual `r` when idle — no dispatcher → no row churn.
+  const running = data.get("running")?.length ?? 0
+  useEffect(() => {
+    if (!props.focused || running === 0) return
+    const t = setInterval(load, 3000)
+    return () => clearInterval(t)
+  }, [props.focused, running, load])
+
+  const total = [...data.values()].reduce((a, v) => a + v.length, 0)
+
+  // Drop empty columns at narrow widths but never collapse the one
+  // the selection is on. An entirely empty board keeps full chrome so
+  // the layout reads as a kanban, not a blank slate.
+  const cols = useMemo(() => {
+    const all = STATUSES.map(s => ({ status: s, tasks: data.get(s) ?? [] }))
+    if (dims.width >= 160 || total === 0) return all
+    return all.filter((c, i) => c.tasks.length > 0 || i === col)
+  }, [data, dims.width, col, total])
+
+  const cur = cols[Math.min(col, cols.length - 1)]
+  const task = cur?.tasks[Math.min(row, (cur?.tasks.length ?? 1) - 1)]
+
+  // `shell.exec → hermes kanban <verb>`. Non-zero → toast the CLI's
+  // own stderr (cycle detected, unknown id, etc). reload on success.
+  const sh = useCallback((argv: string, ok?: string) =>
+    gw.request<Sh>("shell.exec", { command: `hermes kanban ${argv}` }).then(r => {
+      if (r.code !== 0) throw new Error((r.stderr || r.stdout || `exit ${r.code}`).trim())
+      if (ok) toast.show({ variant: "success", message: ok })
+      load()
+      return r.stdout
+    }).catch((e: Error) => void toast.show({ variant: "error", message: trunc(e.message, 120) })),
+  [gw, toast, load])
+
+  // ── Actions ────────────────────────────────────────────────────────
+
+  const live = useRef({ task })
+  live.current = { task }
+
+  const create = useCallback((parent?: Task) =>
+    openCreateTask(dialog, {
+      assignees: assignees(),
+      parent: parent ? { id: parent.id, title: parent.title } : undefined,
+    }).then(d => {
+      if (!d) return
+      const flags = [
+        d.assignee ? `--assignee ${q(d.assignee)}` : "",
+        d.body ? `--body ${q(d.body)}` : "",
+        d.priority ? `--priority ${d.priority}` : "",
+        d.parent ? `--parent ${q(d.parent)}` : "",
+      ].filter(Boolean).join(" ")
+      return sh(`create ${q(d.title)} ${flags}`.trim(),
+        `Created${d.assignee ? ` → ${d.assignee}` : ""}`)
+    }), [dialog, sh])
+
+  const assign = useCallback((t: Task) => {
+    const opts = [{ title: "(unassigned)", value: "none" },
+      ...assignees().map(n => ({ title: n, value: n }))]
+    dialog.replace(
+      <DialogSelect title={`Assign ${t.id}`} options={opts} current={t.assignee ?? "none"}
+        placeholder="Search profiles…"
+        onSelect={o => {
+          dialog.clear()
+          void sh(`assign ${q(t.id)} ${q(o.value)}`,
+            o.value === "none" ? `Unassigned ${t.id}` : `${t.id} → ${o.value}`)
+        }} />,
+    )
+  }, [dialog, sh])
+
+  const comment = useCallback((t: Task) =>
+    openTextPrompt(dialog, { title: `Comment on ${t.id}`, label: t.title })
+      .then(v => v && sh(`comment ${q(t.id)} ${q(v)} --author user`, "Comment added")),
+  [dialog, sh])
+
+  const unblock = useCallback((t: Task) => {
+    if (t.status !== "blocked")
+      return void toast.show({ variant: "info", message: `${t.id} is ${t.status}, not blocked` })
+    return openTextPrompt(dialog, {
+      title: `Unblock ${t.id}`, label: "Answer (posted as comment, then task → ready)",
+    }).then(async v => {
+      // Comment first so the respawned worker sees the answer in its
+      // context (build_worker_context reads the thread). Empty answer
+      // still unblocks — operator just wants a retry.
+      if (v) await sh(`comment ${q(t.id)} ${q(v)} --author user`)
+      return sh(`unblock ${q(t.id)}`, `Unblocked ${t.id}`)
+    })
+  }, [dialog, sh, toast])
+
+  const archive = useCallback((t: Task) =>
+    openConfirm(dialog, {
+      title: "Archive task?", danger: true, yes: "archive",
+      body: `${t.id}  ·  ${trunc(t.title, 60)}\n\nMoves to 'archived' and ends any open run. Children stay; their dependency on this task is treated as satisfied.`,
+    }).then(ok => { if (ok) void sh(`archive ${q(t.id)}`, `Archived ${t.id}`) }),
+  [dialog, sh])
+
+  const dispatch = useCallback(() => {
+    const ready = data.get("ready")?.length ?? 0
+    if (ready === 0)
+      return void toast.show({ variant: "info", message: "No tasks in 'ready'" })
+    return openConfirm(dialog, {
+      title: "Dispatch ready tasks?",
+      body: `${ready} task${ready === 1 ? "" : "s"} in 'ready'. Spawns one worker per task (one pass).`,
+      yes: "dispatch",
+    }).then(ok => { if (ok) void sh("dispatch --json", `Dispatched (${ready} ready)`) })
+  }, [dialog, sh, toast, data])
+
+  const showLog = useCallback((t: Task) => {
+    const text = tailLog(t.id)
+    if (text == null)
+      return void toast.show({ variant: "info", message: `No worker log for ${t.id}` })
+    setPane({ kind: "log", id: t.id, text })
+  }, [toast])
+
+  // Data-driven verb table. `when` gates availability; anything that
+  // needs a selected task reads through `live.current`.
+  type Act = { key: string; title: string; when: (t?: Task) => boolean; run: (t?: Task) => void }
+  const ACTS = useMemo<Act[]>(() => [
+    { key: "n", title: "New task",      when: () => true,            run: () => void create() },
+    { key: "N", title: "New child",     when: t => !!t,              run: t => void create(t) },
+    { key: "a", title: "Assign",        when: t => !!t,              run: t => assign(t!) },
+    { key: "c", title: "Comment",       when: t => !!t,              run: t => void comment(t!) },
+    { key: "u", title: "Unblock",       when: t => t?.status === "blocked", run: t => void unblock(t!) },
+    { key: "d", title: "Archive",       when: t => !!t,              run: t => void archive(t!) },
+    { key: "l", title: "Worker log",    when: t => !!t,              run: t => showLog(t!) },
+    { key: "D", title: "Dispatch",      when: () => true,            run: () => void dispatch() },
+  ], [create, assign, comment, unblock, archive, showLog, dispatch])
+
+  useKeyboard((key) => {
+    if (!props.focused || dialog.stack.length > 0) return
+    if (key.name === "escape" && pane) return setPane(null)
+    if (keys.match("list.refresh", key)) return load()
+    if (key.name === "left")
+      return setCol(c => { const n = Math.max(0, c - 1); setRow(0); return n })
+    if (key.name === "right")
+      return setCol(c => { const n = Math.min(cols.length - 1, c + 1); setRow(0); return n })
+    if (key.name === "up")
+      return setRow(r => Math.max(0, r - 1))
+    if (key.name === "down")
+      return setRow(r => Math.min((cur?.tasks.length ?? 1) - 1, r + 1))
+    if (key.name === "return" && task)
+      return setPane(p => p?.kind === "detail" && p.d.id === task.id
+        ? null : (d => d ? { kind: "detail", d } : null)(detail(task.id)))
+    const t = live.current.task
+    const hit = ACTS.find(a => a.key === key.raw && a.when(t))
+    if (hit) return hit.run(t)
+  })
+
+  const hint = useMemo(() => {
+    const t = task
+    return ["←→↑↓ nav", "Enter detail",
+      ...ACTS.filter(a => a.when(t)).map(a => `${a.key} ${a.title.toLowerCase()}`),
+      "r reload"].join("  ")
+  }, [ACTS, task])
+
+  return (
+    <box flexDirection="row" flexGrow={1}>
+      <TabShell
+        title={`Kanban · ${total} task${total === 1 ? "" : "s"}${running ? ` · ${running} running` : ""}`}
+        hint={hint}
+      >
+        <box flexDirection="row" flexGrow={1} gap={1}>
+          {cols.map((c, i) => (
+            <Column key={c.status} status={c.status} tasks={c.tasks}
+                    on={i === Math.min(col, cols.length - 1)} sel={row}
+                    onPick={r => {
+                      setCol(i); setRow(r)
+                      const d = detail(c.tasks[r].id)
+                      if (d) setPane({ kind: "detail", d })
+                    }} />
+          ))}
+        </box>
+        {total === 0 && (
+          <box flexDirection="column" marginTop={1}>
+            <text fg={theme.textMuted}>no tasks — board at ~/.hermes/kanban.db</text>
+            <text fg={theme.textMuted}>press <span fg={theme.accent}>n</span> to create one</text>
+          </box>
+        )}
+      </TabShell>
+      {pane ? <SidePane pane={pane} /> : null}
+    </box>
+  )
+})

package/src/tabs/Memory.tsx

@@ -0,0 +1,294 @@
+import { useState, memo } from "react"
+import type { MemoryProviderInfo, MemoryFileInfo } from "../utils/hermes-home"
+import type { MemoryActivity } from "../utils/memory-activity"
+import { useHome, home } from "../home"
+import { ago } from "../ui/fmt"
+import { useTheme, type Theme } from "../theme"
+import { useListKeys } from "../keys"
+import { useDialog } from "../ui/dialog"
+import { useToast } from "../ui/toast"
+import { useGateway } from "../app/gateway"
+import { openConfirm } from "../dialogs/confirm"
+import { TabShell } from "../ui/shell"
+import { KVBlock } from "../ui/kv"
+
+// ─── Helpers ──────────────────────────────────────────────────────────
+
+function usageColor(pct: number, theme: Theme): string {
+  if (pct >= 95) return theme.error.toString()
+  if (pct >= 80) return theme.warning.toString()
+  return theme.success.toString()
+}
+
+function bar(pct: number, w: number): string {
+  const filled = Math.round((pct / 100) * w)
+  return "█".repeat(filled) + "░".repeat(w - filled)
+}
+
+const DESC: Record<string, string> = {
+  builtin: "File-based §-delimited entries (MEMORY.md + USER.md). Always active.",
+  mem0: "Server-side LLM fact extraction with semantic search and reranking.",
+  honcho: "AI-native cross-session user modeling with dialectic Q&A.",
+  hindsight: "Knowledge graph with entity resolution and multi-strategy retrieval.",
+  holographic: "Local SQLite fact store with FTS5, trust scoring, HRR retrieval.",
+  openviking: "Session-managed memory with tiered retrieval.",
+  retaindb: "Cloud memory API with hybrid search and 7 memory types.",
+  byterover: "Persistent knowledge tree via brv CLI.",
+  supermemory: "Semantic long-term memory with profile recall and session ingest.",
+}
+
+// ─── Component ────────────────────────────────────────────────────────
+
+export const Memory = memo((props: { focused?: boolean }) => {
+  const theme = useTheme().theme
+  const dialog = useDialog()
+  const toast = useToast()
+  const gw = useGateway()
+  const [sel, setSel] = useState(0)
+
+  const config = useHome("config")
+  const memory = useHome("memory")
+  const userProfile = useHome("userProfile")
+  const providers = useHome("memoryProviders") ?? []
+  const activity = useHome("memoryActivity") ?? []
+
+  const cfg = config?.memory
+  const active = cfg?.provider || ""
+
+  const cur = providers[sel]
+  const on = !!cur && (cur.name === "builtin" || cur.name === active)
+
+  // Activate/deactivate writes memory.provider to disk via cli.exec
+  // (the gateway's config.set whitelist doesn't include it, so the RPC
+  // path 4002s). Applies on the next session — the running agent keeps
+  // the provider it was constructed with.
+  const toggle = async () => {
+    if (!cur || cur.name === "builtin") return
+    const isOn = cur.name === active
+    const ok = await openConfirm(dialog, {
+      title: isOn ? "Deactivate memory provider?" : "Activate memory provider?",
+      body: isOn
+        ? `Clear '${cur.name}' as the active provider (revert to built-in only).`
+        : `Set '${cur.name}' as the active provider. Ensure required env vars are set (Env tab).`,
+      yes: isOn ? "deactivate" : "activate",
+    })
+    if (!ok) return
+    const { writeConfig } = await import("../config/lane")
+    const r = await writeConfig(gw, [{ key: "memory.provider", to: isOn ? "" : cur.name }])
+    if (r.failed.length) return toast.show({ variant: "error", message: r.failed[0].err })
+    home.invalidate("config")
+    home.invalidate("memoryProviders")
+    toast.show({ variant: "success", message: isOn ? "Deactivated" : `Activated ${cur.name} — new sessions pick this up` })
+  }
+
+  const keys = useListKeys({
+    active: !!props.focused && dialog.stack.length === 0,
+    count: providers.length, setSel,
+    onToggle: toggle,
+    onRefresh: () => {
+      home.invalidate("memoryProviders")
+      home.invalidate("memoryActivity")
+      toast.show({ variant: "info", message: "Reloaded", duration: 1000 })
+    },
+  })
+
+  const feed = !cur ? []
+    : cur.name === "builtin" ? activity
+    : activity.filter(a => a.provider === cur.name)
+
+  return (
+    <box flexDirection="row" flexGrow={1}>
+      <TabShell title="Memory Providers" grow={1}
+                hint={`${keys.print("list.up")}${keys.print("list.down")} select  ${keys.print("list.toggle")} activate`}>
+        <scrollbox scrollY flexGrow={1}>
+          {providers.map((p, i) => {
+            const pOn = p.name === "builtin" || p.name === active
+            const has = Object.keys(p.config).length > 0
+            const dot = pOn ? "●" : has ? "◐" : "○"
+            const fg = pOn ? theme.success : has ? theme.warning : theme.textMuted
+            const tag = pOn ? "active" : has ? "configured" : ""
+            return (
+              <box
+                key={p.name}
+                flexDirection="column"
+                marginBottom={1}
+                backgroundColor={i === sel ? theme.backgroundElement : undefined}
+                onMouseDown={() => setSel(i)}
+                onMouseMove={() => setSel(i)}
+              >
+                <box height={1}>
+                  <text>
+                    <span fg={fg}>{dot} </span>
+                    <span fg={i === sel ? theme.accent : theme.text}>{p.name}</span>
+                    {tag ? <span fg={fg}> ({tag})</span> : null}
+                  </text>
+                </box>
+                <box height={1} overflow="hidden" paddingLeft={2}>
+                  <text fg={theme.textMuted}>{DESC[p.name] || "—"}</text>
+                </box>
+              </box>
+            )
+          })}
+        </scrollbox>
+      </TabShell>
+
+      <TabShell
+        title={cur?.name ?? "Provider"}
+        hint={on ? "● active" : "○ inactive"}
+        grow={2}
+      >
+        {cur ? (
+          <ProviderDetail provider={cur} active={active} cfg={cfg}
+                          memory={memory} userProfile={userProfile} feed={feed} />
+        ) : (
+          <text fg={theme.textMuted}>Select a provider</text>
+        )}
+      </TabShell>
+    </box>
+  )
+})
+
+// ─── Provider Detail ──────────────────────────────────────────────────
+
+type MemoryCfg = {
+  memory_enabled: boolean
+  user_profile_enabled: boolean
+  memory_char_limit: number
+  user_char_limit: number
+  provider: string
+  nudge_interval: number
+  flush_min_turns: number
+}
+
+const ProviderDetail = memo((props: {
+  provider: MemoryProviderInfo
+  active: string
+  cfg: MemoryCfg | undefined
+  memory: MemoryFileInfo | null | undefined
+  userProfile: MemoryFileInfo | null | undefined
+  feed: MemoryActivity[]
+}) => {
+  const theme = useTheme().theme
+  const p = props.provider
+  const on = p.name === "builtin" || p.name === props.active
+
+  return (
+    <scrollbox scrollY flexGrow={1}>
+      <box flexDirection="column">
+        <box minHeight={1}>
+          <text wrapMode="word" fg={theme.textMuted}>{DESC[p.name] || "Memory provider"}</text>
+        </box>
+        <box height={1} />
+
+        {p.name === "builtin" ? (
+          <box flexDirection="column">
+            {props.cfg ? (
+              <>
+                <KVBlock rows={[
+                  ["Notes", props.cfg.memory_enabled ? "enabled" : "disabled",
+                    props.cfg.memory_enabled ? theme.success : theme.error],
+                  ["Profile", props.cfg.user_profile_enabled ? "enabled" : "disabled",
+                    props.cfg.user_profile_enabled ? theme.success : theme.error],
+                ]} />
+                <box height={1} />
+              </>
+            ) : null}
+            <CapacityBar title="Notes (MEMORY.md)" info={props.memory ?? null} />
+            <box height={1} />
+            <CapacityBar title="Profile (USER.md)" info={props.userProfile ?? null} />
+          </box>
+        ) : null}
+
+        {p.name !== "builtin" && on && props.cfg ? (
+          <>
+            <box height={1}><text fg={theme.accent}><strong>Agent Settings</strong></text></box>
+            <KVBlock rows={[
+              ["Nudge", `every ${props.cfg.nudge_interval} turns`],
+              ["Flush", `after ${props.cfg.flush_min_turns} turns`],
+            ]} />
+            <box height={1} />
+          </>
+        ) : null}
+
+        {Object.keys(p.config).length > 0 ? (
+          <>
+            <box height={1}><text fg={theme.accent}><strong>Local Configuration</strong></text></box>
+            <KVBlock rows={Object.entries(p.config).map(([k, v]) => [k, String(v)] as [string, string])} />
+          </>
+        ) : p.name !== "builtin" ? (
+          <box height={1} marginTop={1}>
+            <text fg={theme.textMuted}>No local config found. Run `hermes memory setup` to configure.</text>
+          </box>
+        ) : null}
+
+        <ActivityFeed items={props.feed} own={p.name} />
+      </box>
+    </scrollbox>
+  )
+})
+
+// ─── Activity Feed ────────────────────────────────────────────────────
+
+const OP_GLYPH = { write: "+", read: "?" } as const
+
+const ActivityFeed = memo((props: { items: MemoryActivity[]; own: string }) => {
+  const theme = useTheme().theme
+  const all = props.own === "builtin"
+  const nW = props.items.filter(a => a.op === "write").length
+  return (
+    <box flexDirection="column" marginTop={1}>
+      <box height={1}>
+        <text>
+          <span fg={theme.accent}><strong>Recent Activity</strong></span>
+          {props.items.length
+            ? <span fg={theme.textMuted}> · {nW} writes, {props.items.length - nW} reads</span>
+            : null}
+        </text>
+      </box>
+      {props.items.length === 0 ? (
+        <box height={1}>
+          <text fg={theme.textMuted}>No memory-tool calls in the last ~2000 messages</text>
+        </box>
+      ) : null}
+      {props.items.map((a, i) => (
+        <box key={i} height={1} flexDirection="row" overflow="hidden">
+          <text>
+            <span fg={a.op === "write" ? theme.success : theme.textMuted}>{OP_GLYPH[a.op]} </span>
+            <span fg={theme.textMuted}>{ago(a.ts).padEnd(8)}</span>
+            {all && a.provider !== "builtin"
+              ? <span fg={theme.primary}>{a.provider}·</span>
+              : null}
+            <span fg={theme.text}>{a.verb}</span>
+            <span fg={theme.textMuted}>  {a.summary}</span>
+          </text>
+        </box>
+      ))}
+    </box>
+  )
+})
+
+// ─── Capacity Bar ─────────────────────────────────────────────────────
+
+const CapacityBar = memo((props: { title: string; info: MemoryFileInfo | null }) => {
+  const theme = useTheme().theme
+  if (!props.info) {
+    return <box height={1}><text fg={theme.textMuted}>{props.title}: unavailable</text></box>
+  }
+  const color = usageColor(props.info.usagePercent, theme)
+  return (
+    <box flexDirection="column">
+      <box height={1}>
+        <text>
+          <span fg={theme.text}>{props.title}</span>
+          <span fg={theme.textMuted}> · {props.info.entryCount} entries</span>
+        </text>
+      </box>
+      <box height={1}>
+        <text>
+          <span fg={color}>{bar(props.info.usagePercent, 20)}</span>
+          <span fg={theme.textMuted}> {props.info.charCount}/{props.info.charLimit} ({props.info.usagePercent}%)</span>
+        </text>
+      </box>
+    </box>
+  )
+})