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

package/src/components/chat/AtRefPopover.tsx

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

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

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

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

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