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

package/src/dialogs/chafa.tsx

@@ -1,72 +0,0 @@
-// 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

@@ -1,58 +0,0 @@
-// 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

@@ -1,153 +0,0 @@
-// 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

@@ -1,95 +0,0 @@
-// 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

@@ -1,80 +0,0 @@
-// 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

@@ -1,92 +0,0 @@
-// 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

@@ -1,115 +0,0 @@
-// 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 />)