herm-tui 1.0.0-dev.1

package/src/components/chat/AtRefPopover.tsx

@@ -0,0 +1,54 @@
+// @-ref popover — same sliding-window shell as SlashPopover but with
+// a flat file/keyword list (no categories, no source badges).
+
+import { memo } from "react"
+import { useTheme } from "../../theme"
+import type { AtRefItem } from "../../app/useAtRefPopover"
+
+type Props = {
+  readonly items: ReadonlyArray<AtRefItem>
+  readonly cursor: number
+  readonly onCursor: (idx: number) => void
+  readonly onSelect: (idx: number) => void
+}
+
+const MAX_VISIBLE = 10
+
+export const AtRefPopover = memo(({ items, cursor, onCursor, onSelect }: Props) => {
+  const theme = useTheme().theme
+
+  const start = Math.max(0, Math.min(cursor - 2, items.length - MAX_VISIBLE))
+  const visible = items.slice(start, start + MAX_VISIBLE)
+  const above = start > 0
+  const below = start + MAX_VISIBLE < items.length
+  const height = visible.length + 2 + (above ? 1 : 0) + (below ? 1 : 0)
+
+  return (
+    <box flexDirection="column" border borderStyle="single"
+         borderColor={theme.border} backgroundColor={theme.backgroundPanel}
+         paddingX={1} height={height}>
+      {above ? <box height={1} paddingLeft={1}><text fg={theme.textMuted}>↑ more</text></box> : null}
+      {visible.map((it, j) => {
+        const i = start + j
+        const active = i === cursor
+        return (
+          <box key={it.text} height={1} flexDirection="row"
+               backgroundColor={active ? theme.backgroundElement : undefined}
+               onMouseOver={() => onCursor(i)} onMouseDown={() => onSelect(i)}
+               paddingLeft={2} paddingRight={1}>
+            <box flexGrow={1} height={1} overflow="hidden">
+              <text>
+                <span fg={active ? theme.primary : theme.text}>{it.display}</span>
+                {it.text !== it.display
+                  ? <span fg={theme.textMuted}>{`  ${it.text}`}</span>
+                  : null}
+              </text>
+            </box>
+            <box height={1}><text fg={theme.textMuted}>{it.meta}</text></box>
+          </box>
+        )
+      })}
+      {below ? <box height={1} paddingLeft={1}><text fg={theme.textMuted}>↓ more</text></box> : null}
+    </box>
+  )
+})

package/src/components/chat/CodeBlock.tsx

@@ -0,0 +1,67 @@
+// Fenced code block chrome — bg panel, ┃-bar, lang label, click-to-copy.
+// The body is a <code> renderable so tree-sitter highlighting stays
+// identical to what MarkdownRenderable would have produced; the point
+// of pulling fences out of the markdown stream is purely to wrap them.
+
+import { memo, useState } from "react"
+import { LEFT_BAR } from "../../ui/borders"
+import { useTheme } from "../../theme"
+import { useToast } from "../../ui/toast"
+import { copy } from "../../utils/clipboard"
+
+// Info-string → tree-sitter filetype. Only the handful that differ
+// from their canonical fence tag; everything else passes through.
+const FILETYPE: Record<string, string> = {
+  ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
+  py: "python", rb: "ruby", rs: "rust", sh: "bash", shell: "bash",
+  yml: "yaml", md: "markdown",
+}
+
+export const CodeBlock = memo((props: { code: string; lang?: string; streaming?: boolean }) => {
+  const { theme, syntaxStyle } = useTheme()
+  const toast = useToast()
+  const [hover, setHover] = useState(false)
+
+  const ft = props.lang ? FILETYPE[props.lang.toLowerCase()] ?? props.lang.toLowerCase() : undefined
+  const lines = props.code.split("\n").length
+
+  const onCopy = () => {
+    void copy(props.code)
+    toast.show({ variant: "success", message: `Copied ${lines} line${lines === 1 ? "" : "s"}` })
+  }
+
+  return (
+    <box
+      flexDirection="column"
+      marginTop={1}
+      border={["left"]}
+      borderColor={theme.border}
+      customBorderChars={LEFT_BAR}
+      backgroundColor={theme.backgroundPanel}
+      paddingLeft={1}
+    >
+      <box
+        flexDirection="row" height={1}
+        backgroundColor={theme.backgroundElement}
+        onMouseDown={onCopy}
+        onMouseOver={() => setHover(true)}
+        onMouseOut={() => setHover(false)}
+      >
+        <box flexGrow={1} paddingLeft={1}>
+          <text fg={theme.textMuted}>{props.lang || "text"}</text>
+        </box>
+        <box paddingRight={1}>
+          <text fg={hover ? theme.accent : theme.textMuted}>
+            {hover ? "⧉ copy" : `${lines} ln`}
+          </text>
+        </box>
+      </box>
+      <box paddingX={1} paddingY={ft ? 0 : 1}>
+        {ft
+          ? <code content={props.code} filetype={ft} syntaxStyle={syntaxStyle}
+                  fg={theme.text} wrapMode="none" streaming={props.streaming} />
+          : <text fg={theme.text}>{props.code}</text>}
+      </box>
+    </box>
+  )
+})

package/src/components/chat/Composer.tsx

@@ -0,0 +1,347 @@
+// Composer — owns the chat input buffer, slash popover, ghost completion
+// and prompt history. The shell (app.tsx) drives keyboard routing through
+// the imperative handle so there is exactly one global useKeyboard.
+
+import { forwardRef, memo, useImperativeHandle, useRef, useState, useCallback, useMemo, useEffect } from "react"
+import type { TextareaRenderable, PasteEvent } from "@opentui/core"
+import { decodePasteBytes } from "@opentui/core"
+import { useTheme } from "../../theme"
+import { useKeys, toBindings } from "../../keys"
+import { useGateway } from "../../app/gateway"
+import type { ImageAttachResponse, DropDetectResponse } from "../../utils/gateway-types"
+import { looksLikePath } from "../../utils/drop"
+import type { SlashCommand } from "../../commands/slash"
+import { useSlashPopover } from "../../app/useSlashPopover"
+import { useAtRefPopover } from "../../app/useAtRefPopover"
+import { useInputHistory } from "../../app/useInputHistory"
+import { SlashPopover } from "./SlashPopover"
+import { AtRefPopover } from "./AtRefPopover"
+import { ChafaImage } from "../../ui/ChafaImage"
+import { trunc } from "../../ui/fmt"
+
+export type ComposerHandle = {
+  value: () => string
+  set: (v: string) => void
+  /** Insert text at the cursor (verbatim, multi-line ok). */
+  insert: (text: string) => void
+  /** Logical line count of the current buffer. */
+  lines: () => number
+  /** True iff the buffer is empty (no text, no whitespace-only). */
+  isEmpty: () => boolean
+  popOpen: () => boolean
+  popNav: (d: -1 | 1) => void
+  popAccept: () => void
+  popCancel: () => void
+  /** Returns false when not applicable (multi-line buffer → caller lets textarea own ↑/↓). */
+  historyUp: () => boolean
+  historyDown: () => boolean
+}
+
+type Props = {
+  focused: boolean
+  ready: boolean
+  streaming: boolean
+  status?: string
+  queue?: ReadonlyArray<string>
+  attachments?: ReadonlyArray<ImageAttachResponse>
+  cmds: ReadonlyArray<SlashCommand>
+  onSend: (text: string) => void
+  onSlash: (cmd: SlashCommand) => void
+  onAttach?: (r: ImageAttachResponse) => void
+  onEnqueue?: (text: string) => void
+  onDequeue?: (i: number) => void
+  /** Enter pressed with an empty buffer. Return true to consume. */
+  onEmptyEnter?: () => boolean
+  /** Fires on the empty↔non-empty edge of the input buffer. */
+  onDirty?: (dirty: boolean) => void
+}
+
+const MAX_ROWS = 6
+
+function fmt(n: number): string {
+  if (n < 1000) return String(n)
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}k`
+  return `${(n / 1_000_000).toFixed(2)}M`
+}
+
+export const Composer = memo(forwardRef<ComposerHandle, Props>((props, ref) => {
+  const theme = useTheme().theme
+  const gw = useGateway()
+  const keys = useKeys()
+  const ta = useRef<TextareaRenderable | null>(null)
+  // Mirror of the textarea buffer. The renderable is the source of truth;
+  // this drives React-side derivations (popover matching, row count, hints).
+  const [input, setInput] = useState("")
+
+  // Slash and @-ref popovers key off the first line only — both grammars
+  // are single-line prefixes, and a newline is a hard boundary.
+  const head = useMemo(() => {
+    const i = input.indexOf("\n")
+    return i < 0 ? input : input.slice(0, i)
+  }, [input])
+
+  const pop = useSlashPopover(head, props.cmds)
+  const at = useAtRefPopover(head)
+
+  const write = useCallback((v: string) => {
+    ta.current?.setText(v)
+    ta.current?.gotoBufferEnd()
+    setInput(v)
+  }, [])
+
+  const hist = useInputHistory(input, write)
+
+  // Merged over the renderable's default map (which has bare return →
+  // newline), so input.submit's `return` entry overrides it and the
+  // newline alternates add on top. Recomputes only when a user rebinds.
+  const bindings = useMemo(() => [
+    ...toBindings(keys.chord("input.submit"), "submit"),
+    ...toBindings(keys.chord("input.newline"), "newline"),
+  ], [keys])
+
+  // Hold latest pop/props in a ref so the imperative handle is stable.
+  const live = useRef({ pop, at, props, input })
+  live.current = { pop, at, props, input }
+
+  // Notify parent only on the empty↔non-empty edge so the splash
+  // continue-prompt can hide the moment typing starts.
+  const wasDirty = useRef(false)
+  useEffect(() => {
+    const dirty = input.trim().length > 0
+    if (dirty === wasDirty.current) return
+    wasDirty.current = dirty
+    live.current.props.onDirty?.(dirty)
+  }, [input])
+
+  // Selecting a popover entry: subcommand synthetics (name contains a
+  // space) complete the input for further typing; real commands dispatch.
+  const select = (c: SlashCommand) => {
+    if (c.name.includes(" ")) { write(`/${c.name} `); return }
+    write("")
+    live.current.props.onSlash(c)
+  }
+
+  const atAccept = (idx?: number) => {
+    const next = live.current.at.accept(live.current.input, idx)
+    if (next !== null) write(next)
+  }
+
+  // Paste routing, in priority order:
+  //  1. Single-line paste that *looks* like a local path → ask the gateway.
+  //     input.detect_drop is authoritative (stats the file, handles file://,
+  //     quoting, escaped spaces, ~/ expansion, WSL drive rewriting). Image
+  //     hits append to session["attached_images"] server-side; herm mirrors
+  //     the chip and inserts only the trailing remainder text, not the
+  //     `[User attached image: …]` placeholder (that's for blind clients).
+  //     Non-image hits (pdf/txt/…) insert the `[User attached file: …]`
+  //     wrapper so the agent sees the path. Any miss falls through.
+  //  2. ≥5 lines → gateway writes a temp file and hands back a
+  //     `[Pasted #N …]` placeholder (hermes CLI convention; expanded
+  //     server-side in prompt.submit).
+  //  3. Otherwise insert verbatim minus trailing newlines — terminals append
+  //     one on bracketed paste and `echo`/`cat` output copied from a shell
+  //     always carries one, so a naive 1-line paste would otherwise push the
+  //     cursor to a blank second row. A paste that is *only* newlines is let
+  //     through unchanged (intentional line break).
+  const paste = useCallback((e: PasteEvent) => {
+    e.preventDefault()
+    const raw = decodePasteBytes(e.bytes).replace(/\r\n?/g, "\n")
+    const text = /[^\n]/.test(raw) ? raw.replace(/\n+$/, "") : raw
+    const verbatim = () => ta.current?.insertText(text)
+    if (looksLikePath(text)) {
+      gw.request<DropDetectResponse>("input.detect_drop", { text })
+        .then(r => {
+          if (!r.matched) return verbatim()
+          if (r.is_image) {
+            const { path, count, name, width, height, token_estimate } = r
+            live.current.props.onAttach?.({ attached: true, path, count, name, width, height, token_estimate })
+            if (!r.text.startsWith("[User attached")) ta.current?.insertText(r.text + " ")
+            return
+          }
+          ta.current?.insertText(r.text + " ")
+        })
+        .catch(verbatim)
+      return
+    }
+    if (text.split("\n").length < 5) return verbatim()
+    gw.request<{ placeholder: string }>("paste.collapse", { text })
+      .then(r => ta.current?.insertText(r.placeholder + " "))
+      .catch(verbatim)
+  }, [gw])
+
+  const submit = () => {
+    // While streaming, slash/at popovers are suppressed; anything
+    // typed is a plain prompt to enqueue.
+    if (live.current.props.streaming) {
+      const text = live.current.input.trim()
+      if (!text || !live.current.props.ready) return
+      hist.push(text)
+      write("")
+      live.current.props.onEnqueue?.(text)
+      return
+    }
+    const a = live.current.at
+    if (a.open) return atAccept()
+    const p = live.current.pop
+    if (p.open) {
+      const c = p.popover?.[p.cursor]
+      if (c) select(c)
+      return
+    }
+    const text = live.current.input.trim()
+    const hasAtt = (live.current.props.attachments?.length ?? 0) > 0
+    if (!text && !hasAtt) { live.current.props.onEmptyEnter?.(); return }
+    if (!live.current.props.ready) return
+    if (text) hist.push(text)
+    write("")
+    live.current.props.onSend(text)
+  }
+
+  const multi = () => live.current.input.includes("\n")
+
+  useImperativeHandle(ref, () => ({
+    value: () => live.current.input,
+    set: write,
+    insert: (text) => ta.current?.insertText(text),
+    lines: () => (ta.current?.lineCount ?? 1),
+    isEmpty: () => live.current.input.trim().length === 0,
+    popOpen: () => live.current.pop.open || live.current.at.open,
+    popNav: (d) => {
+      const a = live.current.at
+      if (a.open) return a.setCursor(c => Math.max(0, Math.min(a.items.length - 1, c + d)))
+      const max = (live.current.pop.popover?.length ?? 1) - 1
+      pop.setCursor(c => Math.max(0, Math.min(max, c + d)))
+    },
+    popAccept: () => {
+      const a = live.current.at
+      if (a.open) return atAccept()
+      const p = live.current.pop
+      const c = p.popover?.[p.cursor]
+      if (c) write(`/${c.name}${c.name.includes(" ") ? " " : ""}`)
+    },
+    popCancel: () => {
+      const a = live.current.at
+      if (a.open) return a.dismiss()
+      write("")
+    },
+    historyUp: () => { if (multi()) return false; hist.up(); return true },
+    historyDown: () => { if (multi()) return false; hist.down(); return true },
+  }), [hist.up, hist.down, pop.setCursor, write])
+
+  const active = props.focused && !props.streaming
+  const label = !props.ready ? "Connecting..."
+    : props.streaming ? (props.status || "Generating...")
+    : "Ready"
+  const dot = props.ready ? (props.streaming ? theme.warning : theme.success) : theme.error
+
+  // Logical-line row count (wrap-induced growth ignored; yoga sizes the
+  // textarea, this only positions the absolute popover above the border).
+  const rows = Math.min(MAX_ROWS, Math.max(1, input.split("\n").length))
+  const lift = rows + 3
+
+  return (
+    <box flexDirection="column" position="relative">
+      {active && pop.open ? (
+        <box position="absolute" bottom={lift} left={0} right={0}>
+          <SlashPopover
+            commands={pop.popover!}
+            cursor={pop.cursor}
+            onCursor={pop.setCursor}
+            onSelect={select}
+          />
+        </box>
+      ) : active && at.open ? (
+        <box position="absolute" bottom={lift} left={0} right={0}>
+          <AtRefPopover
+            items={at.items}
+            cursor={at.cursor}
+            onCursor={at.setCursor}
+            onSelect={atAccept}
+          />
+        </box>
+      ) : null}
+
+      {(props.queue?.length ?? 0) > 0 ? (
+        <box flexDirection="column" paddingX={1} paddingBottom={1}>
+          {props.queue!.map((q, i) => (
+            <box key={i} height={1} onMouseDown={() => props.onDequeue?.(i)}>
+              <text>
+                <span fg={theme.borderSubtle}>{i === 0 ? "╭" : "│"} </span>
+                <span fg={theme.textMuted}>⏸ {i + 1}. {trunc(q, 60)}</span>
+              </text>
+            </box>
+          ))}
+        </box>
+      ) : null}
+
+      {(props.attachments?.length ?? 0) > 0 ? (
+        <box flexDirection="column" paddingX={1} paddingBottom={1} gap={1}>
+          {props.attachments!.map(a => a.path
+            ? <ChafaImage key={`p-${a.path}`} path={a.path} width={60} />
+            : null)}
+        </box>
+      ) : null}
+
+      {(props.attachments?.length ?? 0) > 0 ? (
+        <box flexDirection="row" flexWrap="wrap" gap={1} paddingX={1} paddingBottom={1}>
+          {props.attachments!.map((a, i) => (
+            <text key={a.path ?? i}>
+              <span bg={theme.accent} fg={theme.background}> img </span>
+              <span bg={theme.backgroundElement} fg={theme.textMuted}> {a.name ?? `image ${i + 1}`} </span>
+              {a.width && a.height
+                ? <span bg={theme.backgroundElement} fg={theme.textMuted}>{a.width}×{a.height} </span>
+                : null}
+              {a.token_estimate
+                ? <span bg={theme.backgroundElement} fg={theme.textMuted}>~{fmt(a.token_estimate)}t </span>
+                : null}
+              <span fg={theme.textMuted}>  </span>
+              <span fg={theme.textMuted}>⌫ to detach</span>
+            </text>
+          ))}
+        </box>
+      ) : null}
+
+      <box
+        border
+        borderStyle="single"
+        borderColor={active ? theme.borderActive : theme.border}
+        flexDirection="row"
+        position="relative"
+      >
+        <box width={1}><text fg={theme.primary}>{">"}</text></box>
+        <box width={1} />
+        <textarea
+          ref={ta}
+          onContentChange={() => setInput(ta.current?.plainText ?? "")}
+          onSubmit={submit}
+          onPaste={paste}
+          keyBindings={bindings}
+          wrapMode="word"
+          minHeight={1}
+          maxHeight={MAX_ROWS}
+          placeholder={props.streaming ? "Type to queue... (Enter queues, click chip to edit)" : "Message Hermes... (/ for commands, Shift+Enter for newline)"}
+          focused={props.focused}
+          textColor={theme.text}
+          focusedTextColor={theme.text}
+          placeholderColor={theme.textMuted}
+          cursorColor={theme.text}
+          backgroundColor="transparent"
+          focusedBackgroundColor="transparent"
+          flexGrow={1}
+        />
+        {pop.ghost && active && rows === 1 ? (
+          <box position="absolute" top={0} left={2 + input.length} height={1}>
+            <text fg={theme.textMuted}>{pop.ghost}</text>
+          </box>
+        ) : null}
+      </box>
+
+      <box height={1} flexDirection="row" paddingX={1}>
+        <text>
+          <span fg={dot}>● </span>
+          <span fg={theme.textMuted}>{label}</span>
+        </text>
+      </box>
+    </box>
+  )
+}))

package/src/components/chat/DiffBlock.tsx

@@ -0,0 +1,116 @@
+import { memo } from "react"
+import { useTheme } from "../../theme"
+
+// Strip ANSI escape sequences — the gateway's inline_diff may arrive
+// pre-colored for a pty and OpenTUI rendering it as literal text
+// produces garble plus our own theme-coloring applied on top.
+// eslint-disable-next-line no-control-regex
+const ANSI = /\x1b\[[0-9;?]*[A-Za-z]/g
+
+/** Heuristic: unified-diff output from patch/edit tools. */
+export function isDiff(s: string | undefined): boolean {
+  if (!s) return false
+  return /^--- a\//m.test(s) || /^@@ /m.test(s) || /^diff --git /m.test(s)
+}
+
+const CAP = 80
+const WORD_CAP = 40
+
+type Seg = { text: string; hi: boolean }
+
+const tokens = (s: string) => s.split(/(\s+)/).filter(t => t.length > 0)
+
+/** Common-prefix/suffix word diff. Returns segments for (old, new). */
+export function wordDiff(a: string, b: string): [Seg[], Seg[]] {
+  const ta = tokens(a)
+  const tb = tokens(b)
+  let p = 0
+  while (p < ta.length && p < tb.length && ta[p] === tb[p]) p++
+  let s = 0
+  while (s < ta.length - p && s < tb.length - p && ta[ta.length - 1 - s] === tb[tb.length - 1 - s]) s++
+  const seg = (t: string[]) => {
+    const mid = t.slice(p, t.length - s).join("")
+    const out: Seg[] = []
+    if (p) out.push({ text: t.slice(0, p).join(""), hi: false })
+    if (mid) out.push({ text: mid, hi: true })
+    if (s) out.push({ text: t.slice(t.length - s).join(""), hi: false })
+    return out
+  }
+  return [seg(ta), seg(tb)]
+}
+
+/**
+ * Pair runs of `-` lines immediately followed by `+` lines index-wise
+ * and compute intra-line word segments. Returns null for lines that
+ * stay whole-line colored. Skipped entirely above WORD_CAP.
+ */
+export function intraline(rows: string[]): (Seg[] | null)[] {
+  const marks: (Seg[] | null)[] = rows.map(() => null)
+  if (rows.length > WORD_CAP) return marks
+  const del = (l: string) => l.startsWith("-") && !l.startsWith("---")
+  const add = (l: string) => l.startsWith("+") && !l.startsWith("+++")
+  let i = 0
+  while (i < rows.length) {
+    if (!del(rows[i])) { i++; continue }
+    let j = i
+    while (j < rows.length && del(rows[j])) j++
+    let k = j
+    while (k < rows.length && add(rows[k])) k++
+    const n = Math.min(j - i, k - j)
+    for (let d = 0; d < n; d++) {
+      const [rm, ad] = wordDiff(rows[i + d].slice(1), rows[j + d].slice(1))
+      marks[i + d] = rm
+      marks[j + d] = ad
+    }
+    i = k
+  }
+  return marks
+}
+
+/**
+ * Line-colored unified diff. OpenTUI ships a native `<diff>` renderable
+ * (split/unified, line numbers), but it manages its own scroll regions
+ * and height — heavy for an inline preview nested inside the chat
+ * scrollbox. This block renders one `<text>` per line with theme colors
+ * and a hard 80-line cap so layout stays stable. For small diffs
+ * (≤40 lines) paired -/+ change lines get word-level bg highlights.
+ */
+export const DiffBlock = memo(({ text }: { text: string }) => {
+  const theme = useTheme().theme
+  const all = text.replace(ANSI, "").replace(/\n$/, "").split("\n")
+  const rows = all.slice(0, CAP)
+  const more = all.length - rows.length
+  const marks = intraline(rows)
+
+  const fg = (l: string) =>
+    l.startsWith("@@") ? theme.accent
+    : l.startsWith("+++") || l.startsWith("---") ? theme.textMuted
+    : l.startsWith("+") ? theme.success
+    : l.startsWith("-") ? theme.error
+    : theme.textMuted
+
+  return (
+    <box flexDirection="column" backgroundColor={theme.backgroundPanel}>
+      {rows.map((l, i) => {
+        const segs = marks[i]
+        const bg = l.startsWith("+") ? theme.diffAddedBg : theme.diffRemovedBg
+        return (
+          <box key={i} height={1} overflow="hidden" minWidth={0}>
+            <text fg={fg(l)}>
+              {segs
+                ? <>{l[0]}{segs.map((s, j) => s.hi
+                    ? <span key={j} bg={bg}>{s.text}</span>
+                    : s.text)}</>
+                : l || " "}
+            </text>
+          </box>
+        )
+      })}
+      {more > 0 ? (
+        <box height={1}>
+          <text fg={theme.textMuted}>… {more} more lines</text>
+        </box>
+      ) : null}
+    </box>
+  )
+})

package/src/components/chat/ErrorBlock.tsx

@@ -0,0 +1,70 @@
+// Turn-level error card — a failed assistant turn (API error, agent
+// crash) renders this in place of the ✗ one-liner. Uses the same
+// panel grammar as BlockTool (┃ left bar, backgroundPanel) so it
+// reads as "a block in the trail that happens to be red."
+
+import { memo, useEffect, useState } from "react"
+import { LEFT_BAR } from "../../ui/borders"
+import { useTheme } from "../../theme"
+import { copy } from "../../utils/clipboard"
+
+const CAP = 6
+
+export const ErrorBlock = memo(({ text }: { text: string }) => {
+  const theme = useTheme().theme
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const lines = text.trimEnd().split("\n")
+  const head = lines[0] || "Error"
+  const body = lines.slice(1)
+  const over = body.length > CAP
+  const shown = open || !over ? body : body.slice(0, CAP)
+
+  useEffect(() => {
+    if (!copied) return
+    const t = setTimeout(() => setCopied(false), 1500)
+    return () => clearTimeout(t)
+  }, [copied])
+
+  const doCopy = () => {
+    void copy(text)
+    setCopied(true)
+  }
+
+  return (
+    <box
+      border={["left"]}
+      borderColor={theme.error}
+      customBorderChars={LEFT_BAR}
+      backgroundColor={theme.backgroundPanel}
+      paddingLeft={2}
+      paddingTop={1}
+      paddingBottom={1}
+      marginTop={1}
+      flexDirection="column"
+      gap={1}
+    >
+      <box flexDirection="row" height={1}>
+        <box flexGrow={1}>
+          <text><span fg={theme.error}>✗ </span><span fg={theme.text}>{head}</span></text>
+        </box>
+        <box onMouseDown={doCopy} paddingX={1}>
+          <text fg={copied ? theme.success : theme.textMuted}>{copied ? "copied" : "copy"}</text>
+        </box>
+      </box>
+      {shown.length ? (
+        <box flexDirection="column" onMouseDown={over ? () => setOpen(o => !o) : undefined}>
+          {shown.map((l, i) => (
+            <box key={i} height={1}><text fg={theme.textMuted}>{l || " "}</text></box>
+          ))}
+          {over ? (
+            <box height={1}>
+              <text fg={theme.textMuted}>{open ? "Click to collapse" : `… ${body.length - CAP} more — click to expand`}</text>
+            </box>
+          ) : null}
+        </box>
+      ) : null}
+    </box>
+  )
+})