herm-tui 1.0.0-dev.1

package/src/dialogs/chafa.tsx

@@ -0,0 +1,72 @@
+// Throwaway demo dialog — `/chafa <path>` renders an image inline via
+// chafa's symbol mode + our SGR parser (src/utils/chafa.ts). Proof that
+// 24-bit colored image rendering in OpenTUI works end-to-end. Will be
+// superseded by inline rendering in MessageItem (herm-mzb.7).
+
+import { useMemo, useState } from "react"
+import { spawnSync } from "child_process"
+import { existsSync } from "fs"
+import { useTheme } from "../theme"
+import type { DialogContext } from "../ui/dialog"
+import { parseChafa, hex, type Cell } from "../utils/chafa"
+
+const CHAFA = ["/usr/sbin/chafa", "/usr/bin/chafa", "/usr/local/bin/chafa", "/opt/homebrew/bin/chafa"]
+
+function whichChafa(): string | null {
+  for (const p of CHAFA) if (existsSync(p)) return p
+  return null
+}
+
+function render(path: string, w: number, h: number): { rows?: Cell[][]; err?: string } {
+  const bin = whichChafa()
+  if (!bin) return { err: "chafa not installed (brew/apt install chafa)" }
+  const full = path.startsWith("~") ? path.replace(/^~/, process.env.HOME ?? "") : path
+  if (!existsSync(full)) return { err: `file not found: ${full}` }
+  const r = spawnSync(bin, [
+    `--size=${w}x${h}`,
+    "--format=symbols",
+    "--symbols=block",
+    "--colors=full",
+    full,
+  ], { encoding: "utf8" })
+  if (r.status !== 0) return { err: r.stderr || `chafa exit ${r.status}` }
+  return { rows: parseChafa(r.stdout) }
+}
+
+const ChafaDialog = ({ path }: { path: string }) => {
+  const theme = useTheme().theme
+  const [w] = useState(80)
+  const [h] = useState(28)
+  const result = useMemo(() => render(path, w, h), [path, w, h])
+
+  return (
+    <box flexDirection="column" minWidth={w + 4} gap={1}>
+      <box height={1}>
+        <text fg={theme.primary}><strong>chafa demo · {path}</strong></text>
+      </box>
+      {result.err
+        ? <box height={1}><text fg={theme.error}>{result.err}</text></box>
+        : (
+          <box flexDirection="column">
+            {result.rows!.map((row, i) => (
+              <text key={i}>
+                {row.map((c, j) => (
+                  <span key={j} fg={hex(c.fg)} bg={hex(c.bg)}>{c.ch}</span>
+                ))}
+              </text>
+            ))}
+          </box>
+        )}
+      <box height={1}>
+        <text fg={theme.borderSubtle}>
+          {result.rows ? `${result.rows.length} rows · ${result.rows.reduce((a, r) => a + r.length, 0)} cells · ` : ""}
+          Esc to close
+        </text>
+      </box>
+    </box>
+  )
+}
+
+export function openChafa(dialog: DialogContext, path: string) {
+  dialog.replace(<ChafaDialog path={path} />)
+}

package/src/dialogs/confirm.tsx

@@ -0,0 +1,58 @@
+// Generic y/n confirm dialog. `openConfirm(dialog, {...})` resolves to
+// true on [y], false on [n]/Esc.
+
+import { useKeyboard } from "@opentui/react"
+import { useKeys } from "../keys"
+import { useTheme } from "../theme"
+import type { DialogContext } from "../ui/dialog"
+
+type Props = {
+  title: string
+  body: string
+  yes?: string
+  no?: string
+  danger?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+const Confirm = (props: Props) => {
+  const theme = useTheme().theme
+  const keys = useKeys()
+  useKeyboard((key) => {
+    if (keys.match("dialog.confirm", key) || keys.match("dialog.accept", key)) return props.onConfirm()
+    if (keys.match("dialog.deny", key) || keys.match("dialog.cancel", key)) return props.onCancel()
+  })
+  return (
+    <box flexDirection="column" width={54}>
+      <box height={1}>
+        <text fg={props.danger ? theme.warning : theme.primary}>
+          <strong>{props.title}</strong>
+        </text>
+      </box>
+      <box height={1} />
+      <box minHeight={1}><text wrapMode="word">{props.body}</text></box>
+      <box height={1} />
+      <box height={1}>
+        <text fg={theme.textMuted}>
+          {`[${keys.print("dialog.confirm")}/${keys.print("dialog.accept")}] ${props.yes ?? "confirm"}   [${keys.print("dialog.deny")}] ${props.no ?? "cancel"}`}
+        </text>
+      </box>
+    </box>
+  )
+}
+
+export function openConfirm(
+  dialog: DialogContext,
+  opts: Omit<Props, "onConfirm" | "onCancel">,
+): Promise<boolean> {
+  return new Promise((resolve) => {
+    dialog.replace(
+      <Confirm
+        {...opts}
+        onConfirm={() => { dialog.clear(); resolve(true) }}
+        onCancel={() => { dialog.clear(); resolve(false) }}
+      />,
+    )
+  })
+}

package/src/dialogs/curator.tsx

@@ -0,0 +1,153 @@
+// Curator control panel. Reads .curator_state + config.curator.*; the
+// report pane shows the newest logs/curator/*/REPORT.md. Writes route
+// through `shell.exec → hermes curator <verb>` so the CLI owns the
+// state machine (see Agents.tsx / Kanban.tsx for the precedent).
+
+import { useEffect, useState, useCallback } from "react"
+import { useKeyboard } from "@opentui/react"
+import { useTheme } from "../theme"
+import type { DialogContext } from "../ui/dialog"
+import { useGateway } from "../app/gateway"
+import { useHome, home } from "../home"
+import { useToast } from "../ui/toast"
+import { readLatestCuratorReport, type CuratorReportInfo } from "../utils/hermes-home"
+import { KVLink } from "../components/ui/FileLink"
+import { KVBlock } from "../ui/kv"
+import { Spinner } from "../ui/spinner"
+import { ago, until, dur, trunc } from "../ui/fmt"
+
+const iso = (s: string | null | undefined): number | null => {
+  if (!s) return null
+  const t = Date.parse(s)
+  return Number.isFinite(t) ? Math.floor(t / 1000) : null
+}
+
+type Sh = { stdout: string; stderr: string; code: number }
+
+const CuratorDialog = () => {
+  const { theme, syntaxStyle } = useTheme()
+  const gw = useGateway()
+  const toast = useToast()
+  const state = useHome("curatorState")
+  const cfg = useHome("config")?.curator
+  const [report, setReport] = useState<CuratorReportInfo | null>(null)
+  const [loaded, setLoaded] = useState(false)
+  const [busy, setBusy] = useState<"run" | "pause" | "resume" | null>(null)
+
+  useEffect(() => {
+    readLatestCuratorReport()
+      .then(r => { setReport(r); setLoaded(true) })
+      .catch(() => setLoaded(true))
+  }, [])
+
+  const sh = useCallback((verb: "run" | "pause" | "resume", ok: string) => {
+    if (busy) return
+    setBusy(verb)
+    gw.request<Sh>("shell.exec", { command: `hermes curator ${verb}` })
+      .then(r => {
+        if (r.code !== 0) throw new Error((r.stderr || r.stdout || `exit ${r.code}`).trim())
+        toast.show({ variant: "success", message: ok })
+        home.invalidate("curatorState")
+      })
+      .catch((e: Error) => toast.show({ variant: "error", message: trunc(e.message, 120) }))
+      .finally(() => setBusy(null))
+  }, [gw, toast, busy])
+
+  useKeyboard((key) => {
+    if (key.raw === "r") return sh("run", "Curator run started (background)")
+    if (key.raw === "p") return state?.paused
+      ? sh("resume", "Curator resumed")
+      : sh("pause", "Curator paused")
+  })
+
+  const last = iso(state?.last_run_at ?? null)
+  // Next-due is last_run_at + interval_hours. CLI additionally gates on
+  // min_idle_hours, so this is "eligible from", not "will fire at".
+  const due = last && cfg ? last + cfg.interval_hours * 3600 : null
+  const status = cfg?.enabled === false ? "disabled"
+    : state?.paused ? "paused"
+    : "enabled"
+  const tint = status === "enabled" ? theme.success
+    : status === "paused" ? theme.warning : theme.textMuted
+
+  return (
+    <box flexDirection="column" width={120} height={34}>
+      <box height={1} flexDirection="row">
+        <text>
+          <span fg={theme.primary}><strong>Skill Curator</strong></span>
+          <span fg={tint}>{`  · ${status}`}</span>
+        </text>
+        {busy ? <box marginLeft={2}><Spinner color={theme.textMuted} label={busy} /></box> : null}
+      </box>
+      <box height={1}>
+        <text fg={theme.textMuted}>
+          {state
+            ? `${state.run_count} run${state.run_count === 1 ? "" : "s"}${last ? " · last " + ago(last) : " · never"} · Esc to close`
+            : "No curator state yet · Esc to close"}
+        </text>
+      </box>
+      <box height={1} />
+
+      <box flexDirection="row" flexGrow={1} gap={2}>
+        <box flexDirection="column" width={40} height="100%" flexShrink={0}>
+          <KVBlock rows={[
+            ["Next run", status !== "enabled" ? `— (${status})`
+              : due ? until(due) : "when idle"],
+            ["Last run", last ? ago(last) : "never"],
+            ["Duration", state?.last_run_duration_seconds
+              ? dur(state.last_run_duration_seconds) : undefined],
+          ]} />
+          <box height={1} />
+          <box height={1}><text fg={theme.textMuted}>Config  ·  edit in Config tab</text></box>
+          <KVBlock rows={[
+            ["Interval", cfg ? `${cfg.interval_hours}h` : "—"],
+            ["Stale after", cfg ? `${cfg.stale_after_days}d` : "—"],
+            ["Archive after", cfg ? `${cfg.archive_after_days}d` : "—"],
+          ]} />
+          <box height={1} />
+          <box flexDirection="column">
+            <box height={1}><text>
+              <span fg={theme.accent}>r </span>
+              <span fg={theme.text}>run now</span>
+              <span fg={theme.textMuted}>  (background)</span>
+            </text></box>
+            <box height={1}><text>
+              <span fg={theme.accent}>p </span>
+              <span fg={theme.text}>{state?.paused ? "resume" : "pause"}</span>
+            </text></box>
+          </box>
+          {state?.last_run_summary ? <>
+            <box height={1} />
+            <box height={1}><text fg={theme.textMuted}>Last run</text></box>
+            <scrollbox scrollY flexGrow={1}>
+              <markdown content={state.last_run_summary}
+                fg={theme.markdownText} syntaxStyle={syntaxStyle} />
+            </scrollbox>
+          </> : null}
+        </box>
+
+        {!loaded ? (
+          <box height={1}><text fg={theme.textMuted}>loading report…</text></box>
+        ) : report ? (
+          <box flexDirection="column" flexGrow={1} height="100%" minWidth={0}>
+            <box height={1}><text fg={theme.info}><strong>{`▾ Report · ${report.runId}`}</strong></text></box>
+            <KVLink label="File" source={report.source} text={report.source.relative} />
+            <box height={1} />
+            <scrollbox scrollY flexGrow={1} border borderColor={theme.border}
+              paddingLeft={1} paddingRight={1}>
+              <box flexDirection="column" width="100%">
+                <markdown content={report.content || "(empty)"}
+                  fg={theme.markdownText} syntaxStyle={syntaxStyle} />
+              </box>
+            </scrollbox>
+          </box>
+        ) : (
+          <box height={1}><text fg={theme.textMuted}>No runs yet — curator has not completed a cycle.</text></box>
+        )}
+      </box>
+    </box>
+  )
+}
+
+export const openCurator = (dialog: DialogContext) =>
+  dialog.replace(<CuratorDialog />)

package/src/dialogs/eikon-picker.tsx

@@ -0,0 +1,95 @@
+// Browse available .eikon avatars from known directories with a live
+// preview. ↑/↓ to navigate, Enter to select, Esc closes (via DialogProvider).
+
+import { useMemo, useState } from "react"
+import { readFileSync } from "fs"
+import { homedir } from "os"
+import { join } from "path"
+import { useListKeys } from "../keys"
+import { useTheme } from "../theme"
+import { useDialog } from "../ui/dialog"
+import { AnimatedAvatar } from "../components/avatar/AnimatedAvatar"
+import { listEikons, parseEikon, type ParsedEikon } from "../components/avatar/eikon"
+
+const trunc = (s: string, n: number) => s.length <= n ? s : s.slice(0, n - 1) + "…"
+
+// Default search path for .eikon avatars: $HERMES_HOME/eikons.
+// If nothing is found the picker shows an empty state — see README
+// "Avatars (.eikon)" for where to drop files.
+const defaultDirs = (): string[] => {
+  const hermesHome = process.env.HERMES_HOME || join(homedir(), ".hermes")
+  return [join(hermesHome, "eikons")]
+}
+
+export const EikonPickerDialog = (props: {
+  dirs?: string[]
+  onSelect: (path: string) => void
+}) => {
+  const theme = useTheme().theme
+  const dialog = useDialog()
+  const dirs = props.dirs ?? defaultDirs()
+
+  const found = useMemo(() => listEikons(dirs), [dirs])
+  const [cursor, setCursor] = useState(0)
+
+  const cur = found[cursor]
+  const parsed = useMemo<ParsedEikon | undefined>(() => {
+    if (!cur) return undefined
+    try { return parseEikon(readFileSync(cur.path, "utf8")) }
+    catch { return undefined }
+  }, [cur])
+
+  useListKeys({
+    active: true,
+    count: found.length, setSel: setCursor,
+    onActivate: () => { if (cur) { props.onSelect(cur.path); dialog.clear() } },
+  })
+
+  const w = (parsed?.meta.width ?? 48) + 2
+  const h = Math.max(parsed?.meta.height ?? 24, 12)
+
+  return (
+    <box flexDirection="column" width={40 + w} height={h + 4}>
+      <box height={1}><text fg={theme.primary}><strong>Pick Avatar</strong></text></box>
+      <box height={1}><text fg={theme.textMuted}>{`${found.length} found · ↑↓ nav · Enter select · Esc close`}</text></box>
+      <box height={1} />
+      <box flexDirection="row" flexGrow={1}>
+        {/* list */}
+        <box width={38} marginRight={2}>
+          <scrollbox scrollY flexGrow={1}>
+            <box flexDirection="column" width="100%">
+              {found.length === 0 ? (
+                <box key="empty" height={1}><text fg={theme.textMuted}>No .eikon files found.</text></box>
+              ) : found.map((e, i) => {
+                const on = i === cursor
+                return (
+                  <box key={e.path} flexDirection="column" paddingLeft={1} paddingRight={1}
+                       backgroundColor={on ? theme.backgroundElement : undefined}
+                       onMouseDown={() => setCursor(i)}>
+                    <box height={1}>
+                      <text fg={on ? theme.text : theme.textMuted}><strong>{trunc(e.meta.name, 34)}</strong></text>
+                    </box>
+                    <box height={1}>
+                      <text fg={theme.textMuted}>
+                        {`${e.meta.author ?? "—"} · ${e.meta.states.length} states · ${e.meta.width}×${e.meta.height}`}
+                      </text>
+                    </box>
+                  </box>
+                )
+              })}
+            </box>
+          </scrollbox>
+        </box>
+        {/* preview */}
+        <box flexGrow={1} flexDirection="column" overflow="hidden">
+          {parsed
+            ? <AnimatedAvatar key={cur?.path ?? "none"} state="idle" eikon={parsed} />
+            : <box key="blank" height={1}><text fg={theme.textMuted}>No preview.</text></box>}
+        </box>
+      </box>
+    </box>
+  )
+}
+
+export const openEikonPicker = (dialog: ReturnType<typeof useDialog>, onSelect: (path: string) => void) =>
+  dialog.replace(<EikonPickerDialog onSelect={onSelect} />)

package/src/dialogs/help.tsx

@@ -0,0 +1,80 @@
+// Help dialog — keyboard shortcut reference, generated from the
+// action catalog so it stays correct under user rebinds.
+
+import { useMemo } from "react"
+import { useTheme } from "../theme"
+import { useKeys, type Scope } from "../keys"
+
+type Group = { title: string; scope: Scope }
+
+const GROUPS: ReadonlyArray<Group> = [
+  { title: "Global",   scope: "global" },
+  { title: "Composer", scope: "composer" },
+  { title: "Lists",    scope: "list" },
+  { title: "Dialogs",  scope: "dialog" },
+  { title: "Sessions", scope: "sessions" },
+  { title: "Agents",   scope: "agents" },
+  { title: "Config",   scope: "config" },
+]
+
+const COLS = 2
+
+export const HelpDialog = () => {
+  const theme = useTheme().theme
+  const keys = useKeys()
+
+  const sections = useMemo(() =>
+    GROUPS.map(g => ({
+      title: g.title,
+      rows: keys.all(g.scope)
+        .filter(e => e.id !== "leader" && e.chord.length > 0)
+        .map(e => [keys.print(e.id), e.desc] as const),
+    })).filter(s => s.rows.length > 0),
+  [keys])
+
+  const total = sections.reduce((n, s) => n + s.rows.length + 2, 0)
+  const split = Math.ceil(total / COLS)
+
+  // Flow sections into two roughly-equal columns. A section goes to
+  // column 1 once placing it in column 0 would overshoot the split.
+  const cols: typeof sections[] = [[], []]
+  let acc = 0
+  for (const s of sections) {
+    const h = s.rows.length + 2
+    const i = acc + h <= split || cols[0].length === 0 ? 0 : 1
+    cols[i].push(s)
+    if (i === 0) acc += h
+  }
+
+  return (
+    <box flexDirection="column" width={104}>
+      <box height={1} flexDirection="row">
+        <box flexGrow={1}>
+          <text fg={theme.text}><strong>Keyboard Shortcuts</strong></text>
+        </box>
+        <text fg={theme.textMuted}>{`leader = ${keys.print("leader")}`}</text>
+      </box>
+      <box height={1} />
+      <box flexDirection="row" gap={3}>
+        {cols.map((col, ci) => (
+          <box key={ci} flexDirection="column" flexGrow={1} flexBasis={0}>
+            {col.map(s => (
+              <box key={s.title} flexDirection="column" marginBottom={1}>
+                <text fg={theme.primary}><strong>{s.title}</strong></text>
+                {s.rows.map(([chord, desc]) => (
+                  <box key={chord + desc} flexDirection="row" height={1} paddingLeft={1}>
+                    <box width={14}><text fg={theme.accent}>{chord}</text></box>
+                    <box flexGrow={1} minWidth={0} height={1} overflow="hidden">
+                      <text fg={theme.textMuted}>{desc}</text>
+                    </box>
+                  </box>
+                ))}
+              </box>
+            ))}
+          </box>
+        ))}
+      </box>
+      <text fg={theme.textMuted}>esc to close</text>
+    </box>
+  )
+}

package/src/dialogs/history.tsx

@@ -0,0 +1,92 @@
+// Read-only transcript viewer for the *live* session (authoritative
+// gateway history, not herm's render state). Useful after resuming a
+// session (shows server messages herm hasn't rendered) and for sanity
+// checking what session.undo / rewind actually removed.
+//
+// Row shape comes from tui_gateway `_history_to_messages`:
+//   user/assistant/system → {role, text}
+//   tool                  → {role, name, context}  (args summary, no result)
+
+import { useEffect, useState } from "react"
+import { useTheme, type Theme } from "../theme"
+import type { DialogContext } from "../ui/dialog"
+import type { Gateway } from "../app/gateway"
+import type { TranscriptMessage } from "../utils/gateway-types"
+import { trunc } from "../ui/fmt"
+
+type Res = { count: number; messages: TranscriptMessage[] }
+
+const tag = (m: TranscriptMessage, theme: Theme) =>
+  m.role === "user" ? { label: "▸ You", fg: theme.info }
+  : m.role === "assistant" ? { label: "◂ Agent", fg: theme.success }
+  : m.role === "tool" ? { label: `⚙ ${m.name ?? "tool"}`, fg: theme.warning }
+  : { label: "· system", fg: theme.textMuted }
+
+// Flatten native-mode parts-lists to the first text fragment so the
+// history preview renders something meaningful instead of [object Object].
+const flatten = (t: TranscriptMessage["text"]): string => {
+  if (typeof t === "string") return t
+  if (!Array.isArray(t)) return ""
+  for (const p of t)
+    if (p && typeof p === "object" && "type" in p && p.type === "text"
+        && "text" in p && typeof p.text === "string") return p.text
+  return ""
+}
+
+const body = (m: TranscriptMessage) =>
+  m.role === "tool" ? (m.context ?? "") : flatten(m.text)
+
+const HistoryDialog = (props: { gw: Gateway }) => {
+  const theme = useTheme().theme
+  const [rows, setRows] = useState<TranscriptMessage[] | null>(null)
+  const [err, setErr] = useState("")
+
+  useEffect(() => {
+    props.gw.request<Res>("session.history")
+      .then(r => setRows(r.messages ?? []))
+      .catch((e: Error) => { setErr(e.message); setRows([]) })
+  }, [props.gw])
+
+  const n = rows?.length ?? 0
+  const h = Math.min(34, Math.max(8, n + 5))
+
+  return (
+    <box flexDirection="column" width={110} height={h}>
+      <box height={1}><text fg={theme.primary}><strong>Session History</strong></text></box>
+      <box height={1}>
+        <text fg={err ? theme.error : theme.textMuted}>
+          {err ? `⚠ ${err}` : `${n} messages · server-authoritative · Esc to close`}
+        </text>
+      </box>
+      <box height={1} />
+      {rows === null ? (
+        <box height={1}><text fg={theme.textMuted}>loading…</text></box>
+      ) : n === 0 ? (
+        <box height={1}><text fg={theme.textMuted}>Empty — no turns yet.</text></box>
+      ) : (
+        <scrollbox scrollY flexGrow={1}>
+          <box flexDirection="column">
+            {rows.map((m, i) => {
+              const t = tag(m, theme)
+              return (
+                <box key={i} height={1} flexDirection="row">
+                  <box width={14} flexShrink={0}>
+                    <text fg={t.fg}>{trunc(t.label, 13)}</text>
+                  </box>
+                  <box flexGrow={1} minWidth={0} height={1} overflow="hidden">
+                    <text fg={m.role === "tool" || m.role === "system" ? theme.textMuted : theme.text}>
+                      {body(m).replace(/\n/g, " ")}
+                    </text>
+                  </box>
+                </box>
+              )
+            })}
+          </box>
+        </scrollbox>
+      )}
+    </box>
+  )
+}
+
+export const openHistory = (dialog: DialogContext, gw: Gateway) =>
+  dialog.replace(<HistoryDialog gw={gw} />)

package/src/dialogs/info.tsx

@@ -0,0 +1,115 @@
+// Small read-only KV dialogs for /status, /usage, /profile.
+// /platforms has no structured RPC — it falls through to slash.exec
+// and renders as a system line (see UPSTREAM.md).
+
+import { useEffect, useState } from "react"
+import type { RGBA } from "@opentui/core"
+import { useTheme } from "../theme"
+import { KVBlock } from "../ui/kv"
+import { fmt, cost } from "../ui/fmt"
+import type { DialogContext } from "../ui/dialog"
+import type { Gateway } from "../app/gateway"
+import type { SessionInfo, SessionUsageResponse } from "../utils/gateway-types"
+import { listProfiles, activeProfileName } from "../utils/hermes-profiles"
+import { hermesPath } from "../utils/hermes-home"
+
+type Row = [string, string | undefined, RGBA?]
+
+const InfoDialog = (props: { title: string; rows: Row[]; note?: string }) => {
+  const theme = useTheme().theme
+  const body = props.rows.filter(r => r[1] !== undefined)
+  return (
+    <box flexDirection="column" minWidth={52} gap={1}>
+      <box height={1}><text fg={theme.primary}><strong>{props.title}</strong></text></box>
+      <box flexDirection="column"><KVBlock rows={body} /></box>
+      {props.note
+        ? <box height={1}><text fg={theme.textMuted}>{props.note}</text></box>
+        : null}
+      <box height={1}><text fg={theme.borderSubtle}>Esc to close</text></box>
+    </box>
+  )
+}
+
+// ── /status ──────────────────────────────────────────────────────────
+
+export function openStatus(dialog: DialogContext, info: SessionInfo | null, sid: string) {
+  const toolsets = Object.keys(info?.tools ?? {})
+  const nTools = Object.values(info?.tools ?? {}).reduce((n, v) => n + v.length, 0)
+  const mcp = info?.mcp_servers ?? []
+  const up = mcp.filter(s => s.connected).length
+  dialog.replace(
+    <InfoDialog title="Status" rows={[
+      ["Version",  info?.version || "—"],
+      ["Model",    info?.model || "—"],
+      ["Profile",  activeProfileName()],
+      ["Home",     hermesPath("")],
+      ["CWD",      info?.cwd || process.cwd()],
+      ["Session",  sid || "—"],
+      ["Tools",    `${nTools} in ${toolsets.length} toolset${toolsets.length === 1 ? "" : "s"}`],
+      ["Skills",   String(Object.values(info?.skills ?? {}).reduce((n, v) => n + v.length, 0))],
+      ["MCP",      mcp.length ? `${up}/${mcp.length} connected` : undefined],
+    ]} />,
+  )
+}
+
+// ── /usage ───────────────────────────────────────────────────────────
+
+const UsageDialog = ({ gw }: { gw: Gateway }) => {
+  const theme = useTheme().theme
+  const [u, setU] = useState<SessionUsageResponse | null>(null)
+  const [err, setErr] = useState("")
+  useEffect(() => {
+    gw.request<SessionUsageResponse>("session.usage")
+      .then(setU).catch(e => setErr(e instanceof Error ? e.message : String(e)))
+  }, [gw])
+
+  if (err) return <InfoDialog title="Usage" rows={[["Error", err, theme.error]]} />
+  if (!u) return <InfoDialog title="Usage" rows={[["", "…"]]} />
+
+  const ctx = u.context_max
+    ? `${fmt(u.context_used ?? 0)} / ${fmt(u.context_max)} (${Math.round(u.context_percent ?? 0)}%)`
+    : undefined
+  return (
+    <InfoDialog title="Usage" note={u.cost_status === "estimated" ? "cost is estimated" : undefined} rows={[
+      ["Model",     u.model || "—"],
+      ["API calls", String(u.calls ?? 0)],
+      ["Input",     fmt(u.input ?? 0)],
+      ["Output",    fmt(u.output ?? 0)],
+      ["Cache r/w", (u.cache_read || u.cache_write) ? `${fmt(u.cache_read ?? 0)} / ${fmt(u.cache_write ?? 0)}` : undefined],
+      ["Total",     fmt(u.total ?? 0)],
+      ["Context",   ctx],
+      ["Cost",      u.cost_usd != null ? cost(u.cost_usd) : undefined, theme.accent],
+    ]} />
+  )
+}
+
+export const openUsage = (dialog: DialogContext, gw: Gateway) =>
+  dialog.replace(<UsageDialog gw={gw} />)
+
+// ── /profile ─────────────────────────────────────────────────────────
+
+const ProfileDialog = () => {
+  const [p, setP] = useState<import("../utils/hermes-profiles").ProfileInfo | null | undefined>(undefined)
+  const active = activeProfileName()
+  useEffect(() => {
+    listProfiles().then(ps => setP(ps.find(x => x.name === active) ?? null))
+      .catch(() => setP(null))
+  }, [])
+  if (p === undefined) return <InfoDialog title="Profile" rows={[["", "…"]]} />
+  return (
+    <InfoDialog title="Profile" note={p ? undefined : "profile directory not found"} rows={[
+      ["Active",   active],
+      ["Home",     p?.path ?? hermesPath("")],
+      ["Model",    p?.model ?? "—"],
+      ["Provider", p?.provider ?? "—"],
+      ["Skills",   p ? String(p.skill_count) : undefined],
+      ["Gateway",  p?.gateway_running ? "running" : "stopped"],
+      ["Sticky",   p?.is_sticky ? "yes" : undefined],
+      ["Alias",    p?.is_default ? undefined : p?.has_alias ? `~/.local/bin/${active}` : "—"],
+      [".env",     p?.has_env ? "present" : "—"],
+    ]} />
+  )
+}
+
+export const openProfile = (dialog: DialogContext) =>
+  dialog.replace(<ProfileDialog />)