herm-tui 1.0.0-dev.1

package/src/components/chat/MediaChip.tsx

@@ -0,0 +1,114 @@
+// MEDIA: directive rendering — `MEDIA:/path` lines in assistant output
+// become clickable chips instead of literal text. Neither reference
+// (Ink nor opencode) renders pixels; both surface an openable link.
+// OpenTUI has no image primitive, so this is the ceiling for now.
+
+import { memo, useState } from "react"
+import { TextAttributes, type MouseEvent } from "@opentui/core"
+import { openFile } from "../../utils/open-file"
+import { useTheme } from "../../theme"
+
+// Ink's canonical regex. Match-per-line only — a MEDIA path is the
+// whole line, optionally wrapped in backticks/quotes by the model.
+export const MEDIA_LINE_RE = /^\s*[`"']?MEDIA:\s*(\S+?)[`"']?\s*$/
+
+const IMAGE_EXT = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"])
+const AUDIO_EXT = new Set(["mp3", "wav", "ogg", "m4a", "flac", "opus"])
+const VIDEO_EXT = new Set(["mp4", "webm", "mov", "mkv"])
+
+export type MediaKind = "img" | "audio" | "video" | "file" | "url"
+
+export function classify(path: string): MediaKind {
+  if (/^https?:\/\//i.test(path)) return "url"
+  const ext = path.split(".").pop()?.toLowerCase() ?? ""
+  if (IMAGE_EXT.has(ext)) return "img"
+  if (AUDIO_EXT.has(ext)) return "audio"
+  if (VIDEO_EXT.has(ext)) return "video"
+  return "file"
+}
+
+const basename = (p: string) => p.split(/[/\\]/).pop() || p
+
+export type Seg = { md: string } | { media: string } | { code: string; lang?: string }
+
+// Split text into alternating markdown / media / code segments.
+// Adjacent markdown lines are re-joined so OpenTUI's MarkdownRenderable
+// still sees complete paragraphs. MEDIA lines inside fenced code are
+// left as literal text (they're examples, not directives). Fences emit
+// a `code` segment so MessageItem can wrap them with chrome; a trailing
+// unclosed fence stays in the markdown buffer so streaming output
+// doesn't flash into a CodeBlock mid-word.
+export function splitContent(text: string): Seg[] {
+  if (!text.includes("MEDIA:") && !text.includes("```") && !text.includes("~~~"))
+    return [{ md: text }]
+  const out: Seg[] = []
+  let buf: string[] = []
+  let fence: { mark: string; lang?: string; body: string[] } | null = null
+  const flush = () => {
+    if (buf.length) out.push({ md: buf.join("\n") })
+    buf = []
+  }
+  for (const line of text.split("\n")) {
+    const f = line.match(/^\s*(`{3,}|~{3,})\s*(\S*)/)
+    if (f) {
+      if (fence && f[1][0] === fence.mark[0] && f[1].length >= fence.mark.length) {
+        out.push({ code: fence.body.join("\n"), lang: fence.lang || undefined })
+        fence = null
+        continue
+      }
+      if (!fence) {
+        flush()
+        fence = { mark: f[1], lang: f[2], body: [] }
+        continue
+      }
+    }
+    if (fence) { fence.body.push(line); continue }
+    const m = line.match(MEDIA_LINE_RE)?.[1]
+    if (m) { flush(); out.push({ media: m }); continue }
+    buf.push(line)
+  }
+  // Unclosed fence → put it back verbatim so the markdown renderable
+  // shows the partial block while the stream is still producing it.
+  if (fence) {
+    const tail = [fence.mark + (fence.lang ?? ""), ...fence.body].join("\n")
+    const last = out[out.length - 1]
+    if (last && "md" in last) last.md += "\n" + tail
+    else buf.push(tail)
+  }
+  flush()
+  return out
+}
+
+export const MediaChip = memo((props: {
+  path: string
+  /** Override the default open-file click. Handlers stopPropagation so
+   *  the enclosing message's useClick (→ actions menu) never sees the
+   *  down event. Pass to repurpose the chip (e.g. ChafaImage collapse). */
+  onMouseDown?: (e: MouseEvent) => void
+}) => {
+  const theme = useTheme().theme
+  const [hover, setHover] = useState(false)
+  const kind = classify(props.path)
+  const badge = {
+    img: theme.accent, audio: theme.warning, video: theme.info,
+    url: theme.primary, file: theme.secondary,
+  }[kind]
+  const click = props.onMouseDown
+    ?? ((e: MouseEvent) => { e.stopPropagation(); openFile(props.path) })
+  return (
+    <box
+      flexDirection="row" height={1}
+      onMouseDown={click}
+      onMouseOver={() => setHover(true)}
+      onMouseOut={() => setHover(false)}
+    >
+      <text>
+        <span bg={badge} fg={theme.background}> {kind} </span>
+        <span bg={theme.backgroundElement} fg={theme.text}
+              attributes={hover ? TextAttributes.UNDERLINE : TextAttributes.NONE}>
+          {" "}{basename(props.path)}{" "}
+        </span>
+      </text>
+    </box>
+  )
+})

package/src/components/chat/MessageItem.tsx

@@ -0,0 +1,282 @@
+import { memo, useMemo, useRef, useState, type RefObject } from "react"
+import type { RGBA, MouseEvent } from "@opentui/core"
+import type { Message, Part, TextPart, ToolPart, PromptPart } from "../../types/message"
+import { ErrorBlock } from "./ErrorBlock"
+import { MediaChip, classify, splitContent } from "./MediaChip"
+import { CodeBlock } from "./CodeBlock"
+import { DiffBlock, isDiff } from "./DiffBlock"
+import { PromptCard, type PromptCardHandle } from "./PromptCard"
+import { ChafaImage } from "../../ui/ChafaImage"
+import { useTheme } from "../../theme"
+import { useSkin } from "../../app/skin"
+import { mathify } from "../../utils/math-unicode"
+
+export type { Message }
+
+function duration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  const s = ms / 1000
+  if (s < 60) return `${s.toFixed(1)}s`
+  return `${Math.floor(s / 60)}m${Math.floor(s % 60)}s`
+}
+
+function tokens(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`
+}
+
+function extract(msg: Message): string {
+  return msg.parts
+    .filter((p): p is TextPart => p.type === "text")
+    .map(p => p.content)
+    .join("")
+}
+
+const trunc = (s: string, max: number) => s.length <= max ? s : s.slice(0, max - 1) + "…"
+
+// Collapsible diff chip: shows filename/preview + +N/-M, expands to full
+// DiffBlock on click. Lives in the message body so edits land in the
+// transcript (not buried in the ThoughtCloud). stopPropagation keeps the
+// click from triggering onPick on the parent message.
+const InlineDiff = memo(({ tool }: { tool: ToolPart }) => {
+  const theme = useTheme().theme
+  const [open, setOpen] = useState(false)
+  const diff = tool.diff ?? (isDiff(tool.result) ? tool.result : undefined)
+  if (!diff) return null
+  const lines = diff.split("\n")
+  const add = lines.filter(l => /^\+(?!\+\+)/.test(l)).length
+  const del = lines.filter(l => /^-(?!--)/.test(l)).length
+  return (
+    <box flexDirection="column" marginTop={1}
+         onMouseDown={(e: MouseEvent) => { e.stopPropagation(); setOpen(o => !o) }}>
+      <box height={1}>
+        <text>
+          <span fg={theme.textMuted}>{open ? "▾ " : "▸ "}</span>
+          <span fg={theme.text}>{trunc(tool.preview ?? tool.name, 50)}</span>
+          <span fg={theme.textMuted}>  </span>
+          <span fg={theme.success}>+{add}</span>
+          <span fg={theme.textMuted}> / </span>
+          <span fg={theme.error}>-{del}</span>
+        </text>
+      </box>
+      {open ? <box marginTop={1}><DiffBlock text={diff} /></box> : null}
+    </box>
+  )
+})
+
+// OpenTUI has no onClick; synthesize one from down→up at the same cell
+// so text-selection drags don't fire it.
+function useClick(fn?: () => void) {
+  const at = useRef<{ x: number; y: number } | null>(null)
+  return {
+    onMouseDown: (e: MouseEvent) => { at.current = { x: e.x, y: e.y } },
+    onMouseUp: (e: MouseEvent) => {
+      const a = at.current
+      at.current = null
+      if (fn && a && a.x === e.x && a.y === e.y) fn()
+    },
+  }
+}
+
+/** Themed vertical bar next to the body. `side` picks left or right. */
+const Gutter = memo(({ color, glyph = "│", side = "left", children }: {
+  color: RGBA
+  glyph?: string
+  side?: "left" | "right"
+  children: React.ReactNode
+}) => {
+  const bar = (
+    <box
+      width={2}
+      flexShrink={0}
+      border={[side]}
+      borderColor={color}
+      customBorderChars={{
+        topLeft: glyph, bottomLeft: glyph, vertical: glyph,
+        topRight: glyph, bottomRight: glyph, horizontal: "",
+        topT: "", bottomT: "", leftT: "", rightT: "", cross: "",
+      }}
+    />
+  )
+  return (
+    <box flexDirection="row">
+      {side === "left" ? bar : null}
+      <box flexDirection="column" flexGrow={1} flexShrink={1}>
+        {children}
+      </box>
+      {side === "right" ? bar : null}
+    </box>
+  )
+})
+
+export type PromptWire = {
+  /** Ref to the single pending prompt card, for key routing. */
+  ref: RefObject<PromptCardHandle | null>
+  onAnswer: (id: string, label: string, ok: boolean) => void
+}
+
+export const MessageItem = memo(({ message, streaming, prompt, onRewind, onPick }: {
+  message: Message
+  streaming: boolean
+  prompt?: PromptWire
+  onRewind?: (m: Message) => void
+  onPick?: (m: Message) => void
+}) => {
+  if (message.role === "system") return <SystemMessage message={message} />
+  if (message.role === "user") return <UserMessage message={message} onRewind={onRewind} />
+  return <AssistantMessage message={message} streaming={streaming} prompt={prompt} onPick={onPick} />
+})
+
+const SystemMessage = memo(({ message }: { message: Message }) => {
+  const theme = useTheme().theme
+  return (
+    <box marginBottom={1}>
+      <Gutter color={theme.textMuted} glyph="·">
+        <box minHeight={1}>
+          <text fg={theme.textMuted} wrapMode="word">{extract(message)}</text>
+        </box>
+      </Gutter>
+    </box>
+  )
+})
+
+const UserMessage = memo(({ message, onRewind }: { message: Message; onRewind?: (m: Message) => void }) => {
+  const theme = useTheme().theme
+  const [hover, setHover] = useState(false)
+  const click = useClick(onRewind && (() => onRewind(message)))
+  const segs = useMemo(
+    () => message.parts.map(p => p.type === "text" && p.content ? splitContent(p.content) : null),
+    [message.parts],
+  )
+  return (
+    <box
+      flexDirection="column"
+      marginBottom={1}
+      backgroundColor={hover ? theme.backgroundElement : undefined}
+      onMouseOver={() => setHover(true)}
+      onMouseOut={() => setHover(false)}
+      {...click}
+    >
+      <Gutter color={theme.primary} side="left">
+        <box minHeight={1} flexDirection="column">
+          {message.parts.map((p, i) => {
+            const seg = segs[i]
+            if (!seg) return null
+            const k = (p as TextPart).key ?? i
+            return seg.map((s, j) => {
+              if ("media" in s) {
+                const kind = classify(s.media)
+                return kind === "img" ? (
+                  <box key={`${k}-m${j}`}><ChafaImage path={s.media} /></box>
+                ) : (
+                  <box key={`${k}-m${j}`} marginTop={1}><MediaChip path={s.media} /></box>
+                )
+              }
+              if ("code" in s) return (
+                <CodeBlock key={`${k}-c${j}`} code={s.code} lang={s.lang} />
+              )
+              return <text key={`${k}-${j}`} fg={theme.text} wrapMode="word">{s.md}</text>
+            })
+          })}
+        </box>
+      </Gutter>
+    </box>
+  )
+})
+
+const AssistantMessage = memo(({ message, streaming, prompt, onPick }: {
+  message: Message; streaming: boolean; prompt?: PromptWire; onPick?: (m: Message) => void
+}) => {
+  const ctx = useTheme()
+  const theme = ctx.theme
+  const { agentName } = useSkin()
+  const [hover, setHover] = useState(false)
+  const click = useClick(onPick && (() => onPick(message)))
+  const err = !!message.error
+  const trail = message.parts.filter((p): p is ToolPart | PromptPart =>
+    p.type === "tool" || p.type === "prompt")
+  const diffs = trail.filter((p): p is ToolPart =>
+    p.type === "tool" && (!!p.diff || isDiff(p.result)))
+
+  // Split once per parts identity so hover (which re-renders this
+  // component) doesn't re-scan text. parts identity changes per
+  // streaming delta and stabilizes on completion.
+  const segs = useMemo(
+    () => message.parts.map(p => p.type === "text" && p.content ? splitContent(p.content) : null),
+    [message.parts],
+  )
+
+  const header = [
+    agentName,
+    message.usage ? `${tokens(message.usage.input)}→${tokens(message.usage.output)} tok` : null,
+    message.duration ? duration(message.duration) : null,
+  ].filter(Boolean).join(" · ")
+
+  const part = (p: Part, i: number) => {
+    if (p.type === "prompt") {
+      // ref only attaches to the pending card (answered cards are
+      // inert outcome rows and never receive keys).
+      return (
+        <box key={`pr-${p.id}`} marginTop={1}
+             onMouseDown={(e: MouseEvent) => e.stopPropagation()}>
+          <PromptCard part={p}
+            ref={!p.answered ? prompt?.ref : undefined}
+            onAnswer={prompt?.onAnswer ?? (() => {})} />
+        </box>
+      )
+    }
+    const seg = segs[i]
+    if (!seg) return null
+    const k = (p as TextPart).key ?? i
+    const last = streaming && (p as TextPart).streaming
+    return seg.map((s, j) => {
+      const tail = last && j === seg.length - 1
+      if ("media" in s) {
+        const kind = classify(s.media)
+        return kind === "img" ? (
+          <box key={`${k}-m${j}`}><ChafaImage path={s.media} /></box>
+        ) : (
+          <box key={`${k}-m${j}`} marginTop={1}><MediaChip path={s.media} /></box>
+        )
+      }
+      if ("code" in s) return (
+        <CodeBlock key={`${k}-c${j}`} code={s.code} lang={s.lang} streaming={tail} />
+      )
+      // LaTeX → Unicode. mathify scans for $…$ / \(…\) / $$…$$ / \[…\]
+      // spans and rewrites only their interiors via texToUnicode; prose
+      // like `browser_navigate` is never touched. Inline-code spans are
+      // skipped. Unknown commands inside a span pass through, so partial
+      // streaming deltas (e.g. "\al" before "\alpha" arrives) are safe —
+      // they simply don't substitute yet.
+      return (
+        <box key={`${k}-${j}`}>
+          <markdown content={mathify(s.md)} fg={theme.markdownText}
+            syntaxStyle={ctx.syntaxStyle} streaming={tail} />
+        </box>
+      )
+    })
+  }
+
+  return (
+    <box flexDirection="column" marginBottom={1}
+         backgroundColor={hover ? theme.backgroundElement : undefined}
+         onMouseOver={() => setHover(true)}
+         onMouseOut={() => setHover(false)}
+         {...click}>
+      <Gutter color={err ? theme.error : theme.accent} side="right">
+        <box height={1} flexDirection="row">
+          <box flexGrow={1}><text fg={theme.textMuted}>{header}</text></box>
+          {trail.length ? (
+            <box><text fg={theme.textMuted}>
+              {trunc(trail.map(p => p.type === "tool" ? p.name : "?").join(" · "), 40)}
+            </text></box>
+          ) : null}
+        </box>
+        {message.parts.map(part)}
+        {diffs.map(t => <InlineDiff key={t.id || t.name} tool={t} />)}
+        {err ? <ErrorBlock text={message.error!} /> : null}
+      </Gutter>
+    </box>
+  )
+})

package/src/components/chat/MessageList.tsx

@@ -0,0 +1,114 @@
+import { memo, useMemo, useState } from "react"
+import { MessageItem, type PromptWire } from "./MessageItem"
+import { TypingIndicator } from "./TypingIndicator"
+import { useTheme } from "../../theme"
+import { randomTip, splitTip } from "../../utils/tips"
+import type { Message } from "../../types/message"
+
+type Props = {
+  messages: Message[]
+  streaming: boolean
+  prompt?: PromptWire
+  onRewind?: (m: Message) => void
+  onPick?: (m: Message) => void
+}
+
+export const MessageList = memo(({ messages, streaming, prompt, onRewind, onPick }: Props) => {
+  const theme = useTheme().theme
+
+  const style = useMemo(() => ({
+    viewportOptions: { backgroundColor: theme.background },
+    scrollbarOptions: {
+      trackOptions: {
+        foregroundColor: theme.borderSubtle,
+        backgroundColor: theme.background,
+      },
+    },
+  }), [theme])
+
+  if (messages.length === 0) {
+    return (
+      <box flexGrow={1} justifyContent="center" alignItems="center">
+        <box flexDirection="column" alignItems="center" gap={1}>
+          <text>
+            <span fg={theme.primary}>╭─────────────────────────╮</span>
+          </text>
+          <text>
+            <span fg={theme.primary}>│       </span>
+            <span fg={theme.accent}>H E R M</span>
+            <span fg={theme.primary}>            │</span>
+          </text>
+          <text>
+            <span fg={theme.primary}>╰─────────────────────────╯</span>
+          </text>
+          <text fg={theme.textMuted}> </text>
+          <text fg={theme.textMuted}>Terminal interface for Hermes</text>
+          <text fg={theme.textMuted}>Type a message below to begin.</text>
+          <text fg={theme.textMuted}> </text>
+          <text>
+            <span fg={theme.textMuted}>  Enter  </span>
+            <span fg={theme.borderSubtle}>Send message</span>
+          </text>
+          <text>
+            <span fg={theme.textMuted}>  Esc×2  </span>
+            <span fg={theme.borderSubtle}>Interrupt generation</span>
+          </text>
+          <text>
+            <span fg={theme.textMuted}>  Ctrl+Y </span>
+            <span fg={theme.borderSubtle}>Copy last response</span>
+          </text>
+          <text>
+            <span fg={theme.textMuted}>  ↑ / ↓  </span>
+            <span fg={theme.borderSubtle}>Prompt history</span>
+          </text>
+          <Tip />
+        </box>
+      </box>
+    )
+  }
+
+  const last = messages[messages.length - 1]
+  const lastStreaming = streaming && last?.role === "assistant"
+
+  return (
+    <scrollbox
+      flexGrow={1}
+      scrollY
+      stickyScroll
+      stickyStart="bottom"
+      style={style}
+    >
+      <box flexDirection="column" paddingBottom={1}>
+        {messages.map((msg, i) => (
+          <MessageItem
+            key={msg.id}
+            message={msg}
+            streaming={lastStreaming && i === messages.length - 1}
+            prompt={prompt}
+            onRewind={onRewind}
+            onPick={onPick}
+          />
+        ))}
+        {streaming && last?.role !== "assistant" && <TypingIndicator />}
+      </box>
+    </scrollbox>
+  )
+})
+
+// One random Hermes CLI tip; click to cycle. Width-capped so it
+// doesn't blow out the centered empty-state column.
+const Tip = memo(() => {
+  const theme = useTheme().theme
+  const [tip, setTip] = useState(() => randomTip())
+  return (
+    <box flexDirection="column" alignItems="center" maxWidth={64} marginTop={1}
+         onMouseDown={() => setTip(t => randomTip(t))}>
+      <text fg={theme.borderSubtle}>─── tip ───</text>
+      <text wrapMode="word">
+        {splitTip(tip).map((p, i) =>
+          <span key={i} fg={p.hl ? theme.accent : theme.textMuted}>{p.t}</span>,
+        )}
+      </text>
+    </box>
+  )
+})