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

package/src/components/chat/ThoughtCloud.tsx

@@ -1,185 +0,0 @@
-// Eikon thought cloud — shows the non-output parts of a turn
-// (reasoning, tool trail, status). Sits in flow above the chat scroll.
-// Auto-opens while the assistant is reasoning or running tools, closes
-// once text is streaming; pinning a past message holds it open. The
-// tail bubbles live on the Sidebar avatar.
-
-import { memo, useEffect, useRef, useState } from "react"
-import type { BorderCharacters, MouseEvent } from "@opentui/core"
-import type { Message, Part, ThinkingPart, ToolPart } from "../../types/message"
-import { Tool } from "./tool"
-import { usePref } from "../../utils/preferences"
-import { useTheme } from "../../theme"
-
-export const CLOUD_MIN = 12
-const CLOUD_MAX = 24
-
-// Heavy triple-dash — reads as thick + noncontinuous. Corners stay
-// heavy-solid so the box parses as a bubble, not a grid.
-const CLOUD: BorderCharacters = {
-  topLeft: "┏", topRight: "┓", bottomLeft: "┗", bottomRight: "┛",
-  horizontal: "┅", vertical: "┇",
-  topT: "┅", bottomT: "┅", leftT: "┇", rightT: "┇", cross: "╋",
-}
-
-// Stepped bubbles bridging the cloud to the avatar's upper-left. Three
-// slots, big→small top→bottom. When animating, one slot is lit per
-// frame and travels bottom→top (away from the head, into the cloud);
-// the trailing empty frame reads as the bubble entering the cloud.
-const SLOTS = [
-  ["┏┅┅┓   ", "┗┅┅┛   "],
-  ["   ┏┓  ", "   ┗┛  "],
-  ["     ╸ ", "       "],
-]
-const BLANK = "       "
-const ORDER = [2, 1, 0, -1]
-
-export const Tail = memo((props: { run: boolean }) => {
-  const theme = useTheme().theme
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const refs = useRef<any[]>([]) // TextNodeRenderable[6]
-  // Paint a full frame (all slots when idle; one lit slot when running).
-  // Mutates span .children directly — one requestRender() per touched
-  // node, zero React reconciles per 160ms tick.
-  const paint = (lit: number | null) => {
-    SLOTS.forEach((slot, i) => slot.forEach((l, j) => {
-      const node = refs.current[i * 2 + j]
-      if (node) node.children = [lit === null || lit === i ? l : BLANK]
-    }))
-  }
-  useEffect(() => {
-    if (!props.run) { paint(null); return }
-    let f = 0
-    paint(ORDER[0])
-    const t = setInterval(() => { f = (f + 1) % ORDER.length; paint(ORDER[f]) }, 160)
-    return () => { clearInterval(t); paint(null) }
-  }, [props.run])
-  return (
-    <box flexDirection="column">
-      {SLOTS.flatMap((slot, i) =>
-        slot.map((l, j) => (
-          <text key={`${i}-${j}`} fg={theme.hermAvatar}>
-            <span ref={el => { refs.current[i * 2 + j] = el }}>{l}</span>
-          </text>
-        )),
-      )}
-    </box>
-  )
-})
-
-function parts(m: Message | undefined): Part[] {
-  // ThoughtCloud shows the agent's process (reasoning + tool calls).
-  // Prompts render inline in the transcript body, not here.
-  return m?.parts.filter(p => p.type === "thinking" || p.type === "tool") ?? []
-}
-
-type Pane = "all" | "reasoning" | "tools"
-
-function latest(messages: Message[]): Message | undefined {
-  for (let i = messages.length - 1; i >= 0; i--)
-    if (messages[i].role === "assistant") return messages[i]
-  return undefined
-}
-
-// Rough row cost — enough for auto-grow between MIN and MAX.
-function rows(list: Part[]): number {
-  return list.reduce((n, p) =>
-    n + (p.type === "thinking" ? Math.ceil(p.content.length / 80) || 1
-       : p.type === "tool" && p.diff ? 6
-       : 1), 0)
-}
-
-export const ThoughtCloud = memo((props: {
-  height: number
-  messages: Message[]
-  pick?: Message
-  onResize: (h: number) => void
-  onClose?: () => void
-}) => {
-  const theme = useTheme().theme
-  const detail = usePref("toolDetails") ?? "expanded"
-  const src = props.pick ?? latest(props.messages)
-  const all = parts(src)
-  const think = all.filter((p): p is ThinkingPart => p.type === "thinking")
-  const tools = all.filter((p): p is ToolPart => p.type === "tool")
-  const [pane, setPane] = useState<Pane>("all")
-  const body = pane === "reasoning" ? think : pane === "tools" ? tools : all
-
-  // Auto-grow: track content until the user drags; then their size
-  // sticks. `want` is the dep so growth follows streamed thinking text,
-  // not just part count.
-  const manual = useRef(false)
-  const want = Math.min(CLOUD_MAX, Math.max(CLOUD_MIN, rows(body) + 3))
-  const resize = props.onResize
-  useEffect(() => {
-    if (!manual.current) resize(want)
-  }, [want, resize])
-
-  // Drag-resize via the bottom edge. MouseEvent.y is absolute terminal
-  // row; delta from the drag origin maps 1:1 to height rows.
-  const drag = useRef<{ y: number; h: number } | null>(null)
-  const grab = (e: MouseEvent) => {
-    drag.current = { y: e.y, h: props.height }
-    manual.current = true
-    e.stopPropagation()
-  }
-  const move = (e: MouseEvent) => {
-    const d = drag.current
-    if (!d) return
-    resize(Math.min(CLOUD_MAX, Math.max(CLOUD_MIN, d.h + (e.y - d.y))))
-  }
-  const drop = () => { drag.current = null }
-
-  const pill = (id: Pane, label: string, n: number) => {
-    const on = pane === id
-    return (
-      <box height={1} marginRight={2}
-           onMouseDown={(e: MouseEvent) => { e.stopPropagation(); setPane(id) }}>
-        <text>
-          <span fg={on ? theme.accent : theme.textMuted}>
-            {on ? <strong>{label}</strong> : label}
-          </span>
-          {n > 0 ? <span fg={theme.textMuted}>{` ${n}`}</span> : null}
-        </text>
-      </box>
-    )
-  }
-
-  return (
-    <box
-      height={props.height} flexDirection="column" position="relative"
-      border borderColor={theme.hermAvatar} customBorderChars={CLOUD}
-      backgroundColor={theme.backgroundPanel} paddingX={1}
-    >
-      <box height={1} flexShrink={0} flexDirection="row">
-        {pill("all", "all", all.length)}
-        {pill("reasoning", "reasoning", think.length)}
-        {pill("tools", "tools", tools.length)}
-        <box flexGrow={1} />
-        {detail !== "expanded" ? (
-          <box marginRight={1}><text fg={theme.textMuted}>⟨{detail}⟩</text></box>
-        ) : null}
-        {props.onClose ? (
-          <box width={1} onMouseDown={props.onClose}>
-            <text fg={theme.textMuted}>×</text>
-          </box>
-        ) : null}
-      </box>
-      <scrollbox scrollY stickyScroll stickyStart="bottom" flexGrow={1}>
-        <box flexDirection="column" width="100%">
-          {body.map((p, i) =>
-            p.type === "thinking"
-              ? <box key={(p as ThinkingPart).key ?? `th-${i}`} minHeight={1} width="100%" flexShrink={0}>
-                  <text fg={theme.textMuted} wrapMode="word">{(p as ThinkingPart).content}</text>
-                </box>
-              : <box key={(p as ToolPart).id || `t-${i}`} width="100%" flexShrink={0}>
-                  <Tool tool={p as ToolPart} detail={detail === "hidden" ? "hidden" : "collapsed"} />
-                </box>,
-          )}
-        </box>
-      </scrollbox>
-      <box position="absolute" left={0} right={0} bottom={0} height={1}
-           onMouseDown={grab} onMouseDrag={move} onMouseUp={drop} onMouseDragEnd={drop} />
-    </box>
-  )
-})

package/src/components/chat/TypingIndicator.tsx

@@ -1,25 +0,0 @@
-import { memo, useState, useEffect } from "react"
-import { useTheme } from "../../theme"
-import { Spinner } from "../../ui/spinner"
-
-// Shown in the brief window between message.start and the first
-// assistant part. The gateway's thinking.delta verb text shows in
-// the Composer status bar; this is the in-transcript placeholder.
-// Rotates a small local verb list so it doesn't read as frozen.
-
-const VERBS = ["Thinking…", "Considering…", "Working…", "Pondering…"]
-
-export const TypingIndicator = memo((props: { label?: string }) => {
-  const theme = useTheme().theme
-  const [i, setI] = useState(0)
-  useEffect(() => {
-    if (props.label) return
-    const id = setInterval(() => setI(n => (n + 1) % VERBS.length), 2200)
-    return () => clearInterval(id)
-  }, [props.label])
-  return (
-    <box height={1} paddingLeft={1}>
-      <Spinner color={theme.info} label={props.label ?? VERBS[i]} />
-    </box>
-  )
-})

package/src/components/chat/tool/Subagent.tsx

@@ -1,75 +0,0 @@
-// delegate_task / subagent renderer — oc's `Task` match.
-//
-// Collapsed: InlineTool row with goal + a sub-line:
-//   running:  ↳ {last tool} {preview}     (or ↳ N toolcalls)
-//   done:     └ N toolcalls · duration
-// Click → expand to the full child trail, each as its own inline row
-// using the same spec() glyphs as top-level tools.
-
-import { memo, useState } from "react"
-import type { ToolPart as Part } from "../../../types/message"
-import { useTheme } from "../../../theme"
-import { useSpinnerGlyph } from "../../../ui/spinner"
-import { spec } from "./preview"
-
-function dur(d?: number): string {
-  if (d == null) return ""
-  const s = d / 1000
-  return s < 60 ? `${s.toFixed(1)}s` : `${Math.floor(s / 60)}m${Math.round(s % 60)}s`
-}
-
-export const Subagent = memo(({ tool }: { tool: Part }) => {
-  const theme = useTheme().theme
-  const [open, setOpen] = useState(false)
-  const running = tool.status === "running"
-  const failed = tool.status === "error"
-  const spin = useSpinnerGlyph(running)
-  const trail = tool.trail ?? []
-  const last = trail[trail.length - 1]
-
-  const fg = failed ? theme.error : running ? theme.text : theme.textMuted
-  const goal = (tool.goal ?? tool.preview ?? "").replace(/\s+/g, " ").trim()
-
-  const sub = running
-    ? last
-      ? `↳ ${spec(last.name).verb || last.name} ${last.preview ?? ""}`
-      : trail.length ? `↳ ${trail.length} toolcalls` : ""
-    : `└ ${trail.length} toolcall${trail.length === 1 ? "" : "s"}${tool.duration ? ` · ${dur(tool.duration)}` : ""}`
-
-  return (
-    <box flexDirection="column" paddingLeft={3 + (tool.depth ?? 0) * 2}
-         onMouseDown={trail.length ? () => setOpen(o => !o) : undefined}>
-      <box height={1}>
-        <text>
-          <span fg={running ? theme.warning : fg}>{running ? spin : "⊙"} </span>
-          <span fg={fg}>Task — {goal || "delegating…"}</span>
-        </text>
-      </box>
-      {open ? (
-        <box flexDirection="column">
-          {trail.map((c, i) => {
-            const s = spec(c.name)
-            const lbl = s.verb ? `${s.verb} ${c.preview ?? ""}` : c.preview ?? c.name
-            return (
-              <box key={i} height={1}>
-                <text>
-                  <span fg={theme.textMuted}>{i < trail.length - 1 ? "├─ " : "└─ "}</span>
-                  <span fg={theme.textMuted}>{s.icon} {lbl}</span>
-                </text>
-              </box>
-            )
-          })}
-          {tool.result ? (
-            <box minHeight={1} marginTop={1}>
-              <text fg={theme.textMuted} wrapMode="word">{tool.result}</text>
-            </box>
-          ) : null}
-        </box>
-      ) : sub ? (
-        <box height={1}>
-          <text fg={theme.textMuted}>{sub}</text>
-        </box>
-      ) : null}
-    </box>
-  )
-})

package/src/components/chat/tool/frame.tsx

@@ -1,69 +0,0 @@
-// InlineTool — the single shape every tool renders into in the
-// ThoughtCloud. Diffs that warrant a body render as InlineDiff chips
-// in the assistant message body (MessageItem), not here.
-
-import { memo, useState, type ReactNode } from "react"
-import type { RGBA } from "@opentui/core"
-import type { ToolPart } from "../../../types/message"
-import { useTheme } from "../../../theme"
-import { useSpinnerGlyph } from "../../../ui/spinner"
-import { spec } from "./preview"
-
-function ms(d?: number): string {
-  if (d == null) return ""
-  if (d < 1000) return `${Math.round(d)}ms`
-  if (d < 60000) return `${(d / 1000).toFixed(1)}s`
-  return `${Math.floor(d / 60000)}m${Math.round((d % 60000) / 1000)}s`
-}
-
-type InlineProps = {
-  part: ToolPart
-  /** Content for the collapsed row; usually preview text. */
-  children: ReactNode
-  /** True once enough input exists to show `children` instead of pending. */
-  complete?: boolean
-  iconColor?: RGBA
-  onClick?: () => void
-}
-
-export const InlineTool = memo((p: InlineProps) => {
-  const theme = useTheme().theme
-  const [hover, setHover] = useState(false)
-  const s = spec(p.part.name)
-  const running = p.part.status === "running"
-  const failed = p.part.status === "error"
-  const spin = useSpinnerGlyph(running)
-
-  const fg = failed ? theme.error
-    : hover && p.onClick ? theme.text
-    : running ? theme.text
-    : theme.textMuted
-
-  return (
-    <box
-      flexDirection="column"
-      paddingLeft={3}
-      onMouseOver={p.onClick ? () => setHover(true) : undefined}
-      onMouseOut={p.onClick ? () => setHover(false) : undefined}
-      onMouseDown={p.onClick}
-    >
-      <box height={1}>
-        <text>
-          <span fg={running ? theme.warning : p.iconColor ?? fg}>{running ? spin : s.icon} </span>
-          {p.complete ?? true
-            ? <span fg={fg}>{p.children}</span>
-            : <span fg={fg}>~ {s.pending}</span>}
-          {p.part.duration != null
-            ? <span fg={theme.textMuted}>  {ms(p.part.duration)}</span>
-            : null}
-        </text>
-      </box>
-      {failed && p.part.result ? (
-        <box minHeight={1} paddingLeft={2}>
-          <text fg={theme.error} wrapMode="word">{p.part.result}</text>
-        </box>
-      ) : null}
-    </box>
-  )
-})
-

package/src/components/chat/tool/index.tsx

@@ -1,65 +0,0 @@
-// Per-tool dispatch — oc's `<Switch>` over part.tool. Each hermes
-// tool name maps to either an InlineTool row or a BlockTool card.
-//
-// Data constraint: the stock tui_gateway emits only
-//   tool.start    {name, context: build_tool_preview() string ≤80ch}
-//   tool.complete {summary, inline_diff?, error?, duration_s}
-// — NOT the raw args JSON or the tool result body. So per-tool
-// *bodies* (bash stdout, todo checklist, grep matches) are blocked
-// on the wire carrying more (→ docs/UPSTREAM.md). The dispatch and
-// frame grammar here are ready for them.
-
-import { memo } from "react"
-import type { ToolPart as Part } from "../../../types/message"
-import type { DetailMode } from "../../../utils/preferences"
-import { InlineTool } from "./frame"
-import { isDiff } from "../DiffBlock"
-import { Subagent } from "./Subagent"
-import { spec } from "./preview"
-import { useTheme } from "../../../theme"
-
-const FILE = new Set(["write_file", "patch"])
-
-function short(s: string | undefined, n = 120): string {
-  if (!s) return ""
-  const one = s.replace(/\s+/g, " ").trim()
-  return one.length > n ? one.slice(0, n - 1) + "…" : one
-}
-
-function base(path: string): string {
-  const clean = path.replace(/\/+$/, "")
-  const slash = clean.lastIndexOf("/")
-  return slash >= 0 ? clean.slice(slash + 1) : clean
-}
-
-const Inline = memo(({ tool }: { tool: Part }) => {
-  const s = spec(tool.name)
-  const body = tool.preview ? short(tool.preview) : ""
-  return (
-    <InlineTool part={tool} complete={!!body || tool.status !== "running"}>
-      {s.verb ? `${s.verb} ${body}` : body || tool.name}
-    </InlineTool>
-  )
-})
-
-/** Accent-filled pill: `changed <basename>`. The actual diff renders
- *  as an InlineDiff chip in the assistant message body (d39945f), so
- *  the ThoughtCloud row only needs to say *that* a file changed. */
-const FileEdit = memo(({ tool }: { tool: Part }) => {
-  const theme = useTheme().theme
-  // While running (no result yet) or when preview is absent (some
-  // providers omit the path), fall through to the generic inline row.
-  if (tool.status === "running" || !tool.preview) return <Inline tool={tool} />
-  return (
-    <InlineTool part={tool}>
-      <span bg={theme.accent} fg={theme.background}> changed {short(base(tool.preview), 48)} </span>
-    </InlineTool>
-  )
-})
-
-export const Tool = memo(({ tool, detail = "expanded" }: { tool: Part; detail?: DetailMode }) => {
-  if (detail === "hidden" && tool.status !== "running") return null
-  if (tool.trail || tool.name === "delegate_task") return <Subagent tool={tool} />
-  if (FILE.has(tool.name) || tool.diff || isDiff(tool.result)) return <FileEdit tool={tool} />
-  return <Inline tool={tool} />
-})

package/src/components/chat/tool/preview.ts

@@ -1,57 +0,0 @@
-// Hermes tool name → one-line presentation. Data only — rendering
-// lives in the dispatch switch. Covers the tool vocabulary the
-// gateway emits (see hermes-agent model_tools + agent/display.py
-// primary_args for the WHAT); icon glyphs follow oc's single-char
-// convention (no emoji).
-
-export type Spec = {
-  icon: string
-  /** Verb shown before the preview string on the collapsed row. */
-  verb: string
-  /** Gerund shown while status == running and no preview yet. */
-  pending: string
-}
-
-const SPEC: Record<string, Spec> = {
-  terminal:         { icon: "$", verb: "",         pending: "Writing command…" },
-  process:          { icon: "⊚", verb: "Process",  pending: "Managing process…" },
-  execute_code:     { icon: "»", verb: "Exec",     pending: "Writing script…" },
-
-  read_file:        { icon: "→", verb: "Read",     pending: "Reading file…" },
-  write_file:       { icon: "←", verb: "Write",    pending: "Preparing write…" },
-  patch:            { icon: "←", verb: "Edit",     pending: "Preparing edit…" },
-
-  search_files:     { icon: "✱", verb: "Search",   pending: "Searching…" },
-  web_search:       { icon: "◈", verb: "Web",      pending: "Searching web…" },
-  web_extract:      { icon: "%", verb: "Fetch",    pending: "Fetching page…" },
-  session_search:   { icon: "↺", verb: "Recall",   pending: "Searching memory…" },
-
-  browser_navigate: { icon: "%", verb: "Navigate", pending: "Navigating…" },
-  browser_click:    { icon: "·", verb: "Click",    pending: "Clicking…" },
-  browser_type:     { icon: "⌨", verb: "Type",     pending: "Typing…" },
-  browser_snapshot: { icon: "⎙", verb: "Snapshot", pending: "Capturing…" },
-  browser_vision:   { icon: "◉", verb: "Vision",   pending: "Looking…" },
-  vision_analyze:   { icon: "◉", verb: "Vision",   pending: "Analyzing image…" },
-
-  todo:             { icon: "☰", verb: "Todo",     pending: "Updating todos…" },
-  memory:           { icon: "⚑", verb: "Memory",   pending: "Updating memory…" },
-  clarify:          { icon: "?", verb: "Ask",      pending: "Asking…" },
-
-  skill_view:       { icon: "◆", verb: "Skill",    pending: "Loading skill…" },
-  skills_list:      { icon: "◆", verb: "Skills",   pending: "Listing skills…" },
-  skill_manage:     { icon: "◆", verb: "Skill",    pending: "Managing skill…" },
-
-  delegate_task:    { icon: "⊙", verb: "Delegate", pending: "Spawning agent…" },
-  cronjob:          { icon: "◷", verb: "Cron",     pending: "Managing cron…" },
-  text_to_speech:   { icon: "♪", verb: "TTS",      pending: "Synthesizing…" },
-  image_generate:   { icon: "✦", verb: "Image",    pending: "Generating image…" },
-}
-
-const GENERIC: Spec = { icon: "⚙", verb: "", pending: "Running…" }
-
-export function spec(name: string): Spec {
-  if (name.startsWith("subagent")) return { icon: "⊙", verb: "Subagent", pending: "Running…" }
-  if (name.startsWith("mcp__") || name.startsWith("mcp:")) return { icon: "◇", verb: "MCP", pending: "Calling…" }
-  return SPEC[name] ?? GENERIC
-}
-

package/src/components/sidebar/ContextGauge.tsx

@@ -1,102 +0,0 @@
-import { memo } from "react"
-import { useTheme } from "../../theme"
-import type { SessionInfo } from "../../utils/gateway-types"
-import type { Usage } from "../../types/message"
-import { formatTokens } from "../../utils/tokens"
-
-// Context-compaction gauge for the sidebar. Three-line block:
-//   258K / 1M                          (used / limit, centered)
-//  [████████████░░░░░░░░░░░░░░░░░░░]   (bar spans ~full width minus [])
-//              26%                     (percent, centered)
-//
-// Color ramps with ratio:
-//   <0.50 → textMuted   (plenty of room)
-//   <0.75 → primary     (normal working range)
-//   <0.90 → warning     (approaching compression)
-//   ≥0.90 → error       (hot)
-//
-// Hidden entirely when live usage is unavailable — never renders a
-// stale or fabricated value.
-
-const FILL = "█"
-const EMPTY = "░"
-
-type Ramp = "muted" | "primary" | "warning" | "error"
-
-const ramp = (ratio: number): Ramp => {
-  if (ratio >= 0.90) return "error"
-  if (ratio >= 0.75) return "warning"
-  if (ratio >= 0.50) return "primary"
-  return "muted"
-}
-
-const centered = (s: string, width: number): string => {
-  const pad = Math.max(0, width - s.length)
-  // Bias the extra space to the right when pad is odd. Terminal glyphs
-  // are visually slightly left-weighted, so ceil-left / floor-right
-  // reads as more optically centered than the naive floor/ceil split.
-  const left = Math.ceil(pad / 2)
-  const right = pad - left
-  return " ".repeat(left) + s + " ".repeat(right)
-}
-
-const formatPct = (ratio: number): string => {
-  const pct = ratio * 100
-  if (pct < 10) return `${pct.toFixed(1)}%`
-  return `${Math.round(pct)}%`
-}
-
-export const ContextGauge = memo((props: {
-  info?: SessionInfo | null
-  usage?: Usage
-  width: number
-}) => {
-  const theme = useTheme().theme
-  const info = props.info
-
-  // Live usage from message.complete events takes priority over the
-  // session.info snapshot (which is captured at session create and
-  // stale after any turn). Fall back to info.usage for the first
-  // render after resume, before any new wire event has arrived.
-  const used = props.usage?.context_used ?? info?.usage?.context_used ?? info?.context_used
-  const max = props.usage?.context_max ?? info?.usage?.context_max ?? info?.context_max
-
-  // No live data → hide. Stale gauges are worse than no gauge.
-  // Note: used=0 is valid (fresh session, no turn yet). Guard on the
-  // max (non-positive → no compression wired up → hide).
-  if (typeof max !== "number" || max <= 0) return null
-  if (typeof used !== "number") return null
-
-  const ratio = Math.max(0, Math.min(1, used / max))
-  // Bar fills the row minus the two bracket chars; min 8 cells for
-  // safety at very narrow widths.
-  const cells = Math.max(8, props.width - 2)
-  const filled = Math.round(ratio * cells)
-  const bar = FILL.repeat(filled) + EMPTY.repeat(cells - filled)
-
-  const color = (() => {
-    switch (ramp(ratio)) {
-      case "error":   return theme.error
-      case "warning": return theme.warning
-      case "primary": return theme.primary
-      default:        return theme.hermBodyTextMuted
-    }
-  })()
-
-  const top = `${formatTokens(used)} / ${formatTokens(max)}`
-  const pct = formatPct(ratio)
-
-  return (
-    <box flexDirection="column" marginTop={1}>
-      <box height={1}>
-        <text><span fg={theme.hermBodyTextMuted}>{centered(top, props.width)}</span></text>
-      </box>
-      <box height={1}>
-        <text><span fg={color}>{centered(`[${bar}]`, props.width)}</span></text>
-      </box>
-      <box height={1}>
-        <text><span fg={theme.hermBodyTextMuted}>{centered(pct, props.width)}</span></text>
-      </box>
-    </box>
-  )
-})