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

package/src/components/chat/MediaChip.tsx

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

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

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