herm-tui 1.0.0-dev.1

package/src/theme/themes/zenburn.json

@@ -0,0 +1,223 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "bg": "#3f3f3f",
+    "bgAlt": "#4f4f4f",
+    "bgPanel": "#5f5f5f",
+    "fg": "#dcdccc",
+    "fgMuted": "#9f9f9f",
+    "red": "#cc9393",
+    "redBright": "#dca3a3",
+    "green": "#7f9f7f",
+    "greenBright": "#8fb28f",
+    "yellow": "#f0dfaf",
+    "yellowDim": "#e0cf9f",
+    "blue": "#8cd0d3",
+    "blueDim": "#7cb8bb",
+    "magenta": "#dc8cc3",
+    "cyan": "#93e0e3",
+    "orange": "#dfaf8f"
+  },
+  "theme": {
+    "primary": {
+      "dark": "blue",
+      "light": "#5f7f8f"
+    },
+    "secondary": {
+      "dark": "magenta",
+      "light": "#8f5f8f"
+    },
+    "accent": {
+      "dark": "cyan",
+      "light": "#5f8f8f"
+    },
+    "error": {
+      "dark": "red",
+      "light": "#8f5f5f"
+    },
+    "warning": {
+      "dark": "yellow",
+      "light": "#8f8f5f"
+    },
+    "success": {
+      "dark": "green",
+      "light": "#5f8f5f"
+    },
+    "info": {
+      "dark": "orange",
+      "light": "#8f7f5f"
+    },
+    "text": {
+      "dark": "fg",
+      "light": "#3f3f3f"
+    },
+    "textMuted": {
+      "dark": "fgMuted",
+      "light": "#6f6f6f"
+    },
+    "background": {
+      "dark": "bg",
+      "light": "#ffffef"
+    },
+    "backgroundPanel": {
+      "dark": "bgAlt",
+      "light": "#f5f5e5"
+    },
+    "backgroundElement": {
+      "dark": "bgPanel",
+      "light": "#ebebdb"
+    },
+    "border": {
+      "dark": "#5f5f5f",
+      "light": "#d0d0c0"
+    },
+    "borderActive": {
+      "dark": "blue",
+      "light": "#5f7f8f"
+    },
+    "borderSubtle": {
+      "dark": "#4f4f4f",
+      "light": "#e0e0d0"
+    },
+    "diffAdded": {
+      "dark": "green",
+      "light": "#5f8f5f"
+    },
+    "diffRemoved": {
+      "dark": "red",
+      "light": "#8f5f5f"
+    },
+    "diffContext": {
+      "dark": "fgMuted",
+      "light": "#6f6f6f"
+    },
+    "diffHunkHeader": {
+      "dark": "cyan",
+      "light": "#5f8f8f"
+    },
+    "diffHighlightAdded": {
+      "dark": "greenBright",
+      "light": "#5f8f5f"
+    },
+    "diffHighlightRemoved": {
+      "dark": "redBright",
+      "light": "#8f5f5f"
+    },
+    "diffAddedBg": {
+      "dark": "#4f5f4f",
+      "light": "#efffef"
+    },
+    "diffRemovedBg": {
+      "dark": "#5f4f4f",
+      "light": "#ffefef"
+    },
+    "diffContextBg": {
+      "dark": "bgAlt",
+      "light": "#f5f5e5"
+    },
+    "diffLineNumber": {
+      "dark": "#6f6f6f",
+      "light": "#b0b0a0"
+    },
+    "diffAddedLineNumberBg": {
+      "dark": "#4f5f4f",
+      "light": "#efffef"
+    },
+    "diffRemovedLineNumberBg": {
+      "dark": "#5f4f4f",
+      "light": "#ffefef"
+    },
+    "markdownText": {
+      "dark": "fg",
+      "light": "#3f3f3f"
+    },
+    "markdownHeading": {
+      "dark": "yellow",
+      "light": "#8f8f5f"
+    },
+    "markdownLink": {
+      "dark": "blue",
+      "light": "#5f7f8f"
+    },
+    "markdownLinkText": {
+      "dark": "cyan",
+      "light": "#5f8f8f"
+    },
+    "markdownCode": {
+      "dark": "green",
+      "light": "#5f8f5f"
+    },
+    "markdownBlockQuote": {
+      "dark": "fgMuted",
+      "light": "#6f6f6f"
+    },
+    "markdownEmph": {
+      "dark": "yellowDim",
+      "light": "#8f8f5f"
+    },
+    "markdownStrong": {
+      "dark": "orange",
+      "light": "#8f7f5f"
+    },
+    "markdownHorizontalRule": {
+      "dark": "fgMuted",
+      "light": "#6f6f6f"
+    },
+    "markdownListItem": {
+      "dark": "blue",
+      "light": "#5f7f8f"
+    },
+    "markdownListEnumeration": {
+      "dark": "cyan",
+      "light": "#5f8f8f"
+    },
+    "markdownImage": {
+      "dark": "blue",
+      "light": "#5f7f8f"
+    },
+    "markdownImageText": {
+      "dark": "cyan",
+      "light": "#5f8f8f"
+    },
+    "markdownCodeBlock": {
+      "dark": "fg",
+      "light": "#3f3f3f"
+    },
+    "syntaxComment": {
+      "dark": "#7f9f7f",
+      "light": "#5f7f5f"
+    },
+    "syntaxKeyword": {
+      "dark": "yellow",
+      "light": "#8f8f5f"
+    },
+    "syntaxFunction": {
+      "dark": "blue",
+      "light": "#5f7f8f"
+    },
+    "syntaxVariable": {
+      "dark": "fg",
+      "light": "#3f3f3f"
+    },
+    "syntaxString": {
+      "dark": "red",
+      "light": "#8f5f5f"
+    },
+    "syntaxNumber": {
+      "dark": "greenBright",
+      "light": "#5f8f5f"
+    },
+    "syntaxType": {
+      "dark": "cyan",
+      "light": "#5f8f8f"
+    },
+    "syntaxOperator": {
+      "dark": "yellow",
+      "light": "#8f8f5f"
+    },
+    "syntaxPunctuation": {
+      "dark": "fg",
+      "light": "#3f3f3f"
+    }
+  }
+}

package/src/theme/types.ts

@@ -0,0 +1,119 @@
+/**
+ * Theme type definitions — mirrors OpenCode's token model exactly.
+ * All 44 RGBA color tokens + 1 numeric token.
+ */
+
+import type { RGBA } from "@opentui/core";
+
+/** All color token names (excludes thinkingOpacity) */
+export type ThemeColor = Exclude<keyof ThemeCurrent, "thinkingOpacity">;
+
+/** Resolved theme — all values are RGBA or number, ready for rendering */
+export type ThemeCurrent = {
+  // Core
+  readonly primary: RGBA;
+  readonly secondary: RGBA;
+  readonly accent: RGBA;
+  readonly error: RGBA;
+  readonly warning: RGBA;
+  readonly success: RGBA;
+  readonly info: RGBA;
+
+  // Text
+  readonly text: RGBA;
+  readonly textMuted: RGBA;
+  readonly selectedListItemText: RGBA;
+
+  // Backgrounds
+  readonly background: RGBA;
+  readonly backgroundPanel: RGBA;
+  readonly backgroundElement: RGBA;
+  readonly backgroundMenu: RGBA;
+
+  // Borders
+  readonly border: RGBA;
+  readonly borderActive: RGBA;
+  readonly borderSubtle: RGBA;
+
+  // Diff
+  readonly diffAdded: RGBA;
+  readonly diffRemoved: RGBA;
+  readonly diffContext: RGBA;
+  readonly diffHunkHeader: RGBA;
+  readonly diffHighlightAdded: RGBA;
+  readonly diffHighlightRemoved: RGBA;
+  readonly diffAddedBg: RGBA;
+  readonly diffRemovedBg: RGBA;
+  readonly diffContextBg: RGBA;
+  readonly diffLineNumber: RGBA;
+  readonly diffAddedLineNumberBg: RGBA;
+  readonly diffRemovedLineNumberBg: RGBA;
+
+  // Markdown
+  readonly markdownText: RGBA;
+  readonly markdownHeading: RGBA;
+  readonly markdownLink: RGBA;
+  readonly markdownLinkText: RGBA;
+  readonly markdownCode: RGBA;
+  readonly markdownBlockQuote: RGBA;
+  readonly markdownEmph: RGBA;
+  readonly markdownStrong: RGBA;
+  readonly markdownHorizontalRule: RGBA;
+  readonly markdownListItem: RGBA;
+  readonly markdownListEnumeration: RGBA;
+  readonly markdownImage: RGBA;
+  readonly markdownImageText: RGBA;
+  readonly markdownCodeBlock: RGBA;
+
+  // Syntax
+  readonly syntaxComment: RGBA;
+  readonly syntaxKeyword: RGBA;
+  readonly syntaxFunction: RGBA;
+  readonly syntaxVariable: RGBA;
+  readonly syntaxString: RGBA;
+  readonly syntaxNumber: RGBA;
+  readonly syntaxType: RGBA;
+  readonly syntaxOperator: RGBA;
+  readonly syntaxPunctuation: RGBA;
+
+  // Numeric
+  readonly thinkingOpacity: number;
+};
+
+/** Herm-specific tokens — the sidebar "pillar" identity */
+export type HermTokens = {
+  /** Avatar (bust) color — top of the herm */
+  readonly hermAvatar: RGBA;
+  /** Body (pillar) background — bottom of the herm */
+  readonly hermBody: RGBA;
+  /** Auto-computed text color for legibility on hermBody */
+  readonly hermBodyText: RGBA;
+  /** Dimmed hermBodyText — labels/secondary content on the pillar */
+  readonly hermBodyTextMuted: RGBA;
+};
+
+/** Internal resolved theme with extra tracking + herm tokens */
+export type Theme = ThemeCurrent &
+  HermTokens & {
+    _hasSelectedListItemText: boolean;
+  };
+
+/** Color value in a theme JSON file */
+export type HexColor = `#${string}`;
+export type RefName = string;
+export type Variant = { dark: HexColor | RefName; light: HexColor | RefName };
+export type ColorValue = HexColor | RefName | Variant | RGBA;
+
+/** Theme JSON file format */
+export type ThemeJson = {
+  $schema?: string;
+  defs?: Record<string, HexColor | RefName>;
+  theme: Omit<
+    Record<ThemeColor, ColorValue>,
+    "selectedListItemText" | "backgroundMenu"
+  > & {
+    selectedListItemText?: ColorValue;
+    backgroundMenu?: ColorValue;
+    thinkingOpacity?: number;
+  };
+};

package/src/types/message.ts

@@ -0,0 +1,97 @@
+// Message types for herm chat — parts-based like OpenCode
+
+export type TextPart = {
+  type: "text"
+  key?: string
+  content: string
+  streaming: boolean
+}
+
+export type ToolPart = {
+  type: "tool"
+  id: string
+  name: string
+  args: string
+  status: "running" | "done" | "error"
+  startedAt?: number
+  duration?: number
+  preview?: string
+  result?: string
+  diff?: string
+  /** Subagent only — child tool calls accumulated from subagent.tool events. */
+  trail?: Array<{ name: string; preview?: string }>
+  /** Subagent only — goal text from subagent.start. */
+  goal?: string
+  /** Subagent only — spawn depth, 0 = direct child of the main agent. */
+  depth?: number
+}
+
+export type ThinkingPart = {
+  type: "thinking"
+  key?: string
+  content: string
+  streaming: boolean
+}
+
+/** Agent-originated interactive prompt. Renders inline in the
+ *  transcript; `answered` is set (in place) once the user responds,
+ *  collapsing the card to a one-line outcome row that persists in
+ *  history. */
+export type PromptPart = {
+  type: "prompt"
+  id: string
+  variant: "approval" | "clarify" | "sudo" | "secret"
+  req: PromptReq
+  answered?: { label: string; ok: boolean; at: number }
+}
+
+export type PromptReq =
+  | { variant: "approval"; command: string; description: string }
+  | { variant: "clarify"; request_id: string; question: string; choices: string[] | null }
+  | { variant: "sudo"; request_id: string }
+  | { variant: "secret"; request_id: string; prompt: string; env_var: string }
+
+export type Part = TextPart | ToolPart | ThinkingPart | PromptPart
+
+export type Usage = {
+  input: number
+  output: number
+  total: number
+  // Context-compression fields — populated when the agent has a
+  // ContextCompressor attached (default). Absent on sessions without
+  // compression, so consumers must guard with `typeof x === "number"`.
+  context_used?: number
+  context_max?: number
+  context_percent?: number
+  compressions?: number
+}
+
+export type Message = {
+  id: string
+  role: "user" | "assistant" | "system"
+  parts: Part[]
+  timestamp: number
+  model?: string
+  duration?: number
+  usage?: Usage
+  error?: string
+}
+
+// Helper to extract all text content from a message
+export function text(msg: Message): string {
+  return msg.parts
+    .filter((p): p is TextPart => p.type === "text")
+    .map(p => p.content)
+    .join("")
+}
+
+// Create a unique message ID
+export function mid(): string {
+  return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+let pn = 0
+/** Stable per-part key so React doesn't remount when parts shift index. */
+export function pid(): string {
+  return `p${++pn}`
+}

package/src/ui/ChafaImage.tsx

@@ -0,0 +1,64 @@
+// Inline image rendering via chafa + the SGR parser (utils/chafa.ts).
+// Shown in-transcript when an assistant response or user attachment contains
+// MEDIA:/path/to/image.ext. Click to collapse to a compact chip; click chip
+// to re-expand. Any render failure (chafa missing, file gone, timeout)
+// silently degrades to the plain MediaChip — no error chrome in the stream.
+
+import { memo, useMemo, useState } from "react"
+import type { MouseEvent } from "@opentui/core"
+import { useTheme } from "../theme"
+import { openFile } from "../utils/open-file"
+import { renderChafa, hex, chafaBin } from "../utils/chafa"
+import { MediaChip } from "../components/chat/MediaChip"
+
+const basename = (p: string) => p.split(/[/\\]/).pop() || p
+
+type Props = { path: string; width?: number }
+
+export const ChafaImage = memo(({ path, width }: Props) => {
+  const theme = useTheme().theme
+  const [collapsed, setCollapsed] = useState(false)
+  const w = Math.max(20, Math.min(80, width ?? 60))
+  const hasChafa = chafaBin() !== null
+  const result = useMemo(
+    () => hasChafa ? renderChafa(path, w) : ({ err: "chafa not installed" } as const),
+    [path, w, hasChafa],
+  )
+
+  // chafa missing or render failed → stream the MediaChip, no chrome
+  if (!hasChafa || "err" in result) return <MediaChip path={path} />
+
+  // Collapsed → chip re-expands on click. Override MediaChip's default
+  // openFile so the click does exactly one thing; stopPropagation keeps
+  // it from reaching the message's useClick (→ actions menu).
+  if (collapsed) {
+    return (
+      <MediaChip path={path}
+        onMouseDown={(e: MouseEvent) => { e.stopPropagation(); setCollapsed(false) }} />
+    )
+  }
+
+  return (
+    <box flexDirection="column" marginTop={1}>
+      <box flexDirection="column"
+           onMouseDown={(e: MouseEvent) => { e.stopPropagation(); setCollapsed(true) }}>
+        {result.rows.map((row, i) => (
+          <text key={i}>
+            {row.map((c, j) => (
+              <span key={j} fg={hex(c.fg)} bg={hex(c.bg)}>{c.ch}</span>
+            ))}
+          </text>
+        ))}
+      </box>
+      <box height={1}
+           onMouseDown={(e: MouseEvent) => { e.stopPropagation(); openFile(path) }}>
+        <text>
+          <span fg={theme.textMuted}>{"  "}</span>
+          <span fg={theme.accent}>◉ </span>
+          <span fg={theme.text}>{basename(path)}</span>
+          <span fg={theme.textMuted}>{"  click image to collapse · click name to open"}</span>
+        </text>
+      </box>
+    </box>
+  )
+})

package/src/ui/Splash.tsx

@@ -0,0 +1,118 @@
+// Launch splash — ornate braille frame over an empty transcript, with
+// wordmark, version/behind info, and a continue-last-session prompt.
+// Presentational only: dismissal + Enter-to-continue live in app.tsx.
+
+import { useRef, useState, useEffect, useMemo } from "react"
+import { useRenderer } from "@opentui/react"
+import { measureText, type ASCIIFontName } from "@opentui/core"
+import type { BoxRenderable } from "@opentui/core"
+import { useTheme } from "../theme"
+import { frame } from "./splash-art"
+import pkg from "../../package.json" with { type: "json" }
+
+export type SplashInfo = {
+  agentVersion?: string
+  behind?: number | null
+  model?: string
+}
+
+export type SplashProps = {
+  /** Gateway-derived facts; undefined until session.info arrives. */
+  info?: SplashInfo
+  /** Last real TUI session — shows the continue prompt when present. */
+  last?: { id: string; title: string | null }
+  /** True once the user has typed in the composer — hides the prompt. */
+  composing?: boolean
+  /** Cron-generated first-bullet from ~/.hermes/herm/changelog.md. */
+  news?: string
+}
+
+// Wordmark font tiers, widest first. `measureText` is cheap (table lookup).
+const TIERS: ASCIIFontName[] = ["block", "slick", "tiny"]
+const pickFont = (innerW: number): ASCIIFontName =>
+  TIERS.find(f => measureText({ text: "HERM", font: f }).width <= innerW) ?? "tiny"
+
+const clip = (s: string, w: number) =>
+  [...s].length <= w ? s : [...s].slice(0, Math.max(1, w - 1)).join("") + "…"
+
+export function Splash(p: SplashProps) {
+  const theme = useTheme().theme
+  const ref = useRef<BoxRenderable | null>(null)
+  const [box, setBox] = useState({ w: 0, h: 0 })
+
+  // Measure after yoga has laid out. frameCallbacks run once per render
+  // tick (before the next layout pass), so this reads the previous
+  // frame's computed size — same one-frame latency the old 50ms poll
+  // had, but synced to the render loop instead of a free-running timer.
+  const renderer = useRenderer()
+  useEffect(() => {
+    const cb = async () => {
+      const r = ref.current
+      if (!r) return
+      setBox(b => (b.w === r.width && b.h === r.height) ? b : { w: r.width, h: r.height })
+    }
+    renderer.setFrameCallback(cb)
+    return () => renderer.removeFrameCallback(cb)
+  }, [renderer])
+
+  const { lines, inner } = useMemo(() => frame(box.w, box.h), [box.w, box.h])
+  const font = useMemo(() => pickFont(inner.w), [inner.w])
+
+  const behind = p.info?.behind
+  const sub = [
+    `v${pkg.version}`,
+    p.info ? `hermes ${p.info.agentVersion ?? "?"}` : "…",
+    behind == null ? null : behind === 0 ? "up to date" : `${behind} behind`,
+    p.info?.model,
+  ].filter(Boolean).join("  ·  ")
+
+  const prompt = p.last && !p.composing
+  const title = p.last?.title?.trim() || p.last?.id
+
+  return (
+    <box ref={ref} position="absolute" left={0} top={0} right={0} bottom={0}
+         zIndex={50} backgroundColor={theme.background}>
+      {lines.map((l, i) => (
+        <box key={i} position="absolute" top={i} left={0} height={1}>
+          <text fg={theme.accent}>{l}</text>
+        </box>
+      ))}
+      {lines.length > 0 && (
+        <box position="absolute" left={inner.x} top={inner.y}
+             width={inner.w} height={inner.h}
+             flexDirection="column" alignItems="center" justifyContent="center">
+          <box>
+            <ascii-font text="HERM" font={font}
+              color={[theme.accent, theme.textMuted]} selectable={false} />
+          </box>
+          <box height={1}>
+            <text fg={theme.textMuted}>{clip(sub, inner.w)}</text>
+          </box>
+          {p.news ? (
+            <box height={1}>
+              <text fg={theme.textMuted}>{clip(`› ${p.news}`, inner.w)}</text>
+            </box>
+          ) : null}
+          <box height={2} />
+          {prompt ? (
+            <>
+              <text fg={theme.textMuted}>
+                {"continue "}
+                <span fg={theme.text}>"{clip(title ?? "", Math.max(8, inner.w - 14))}"</span>
+                {" ?"}
+              </text>
+              <text fg={theme.textMuted}>
+                <span fg={theme.accent}>[enter]</span>
+                {" yes  ·  type to start fresh"}
+              </text>
+            </>
+          ) : (
+            <text fg={theme.textMuted}>
+              <span fg={theme.accent}>[enter]</span> to send
+            </text>
+          )}
+        </box>
+      )}
+    </box>
+  )
+}

package/src/ui/borders.ts

@@ -0,0 +1,28 @@
+// Hoisted BorderCharacters constants. @opentui/react's host
+// reconciler compares props by reference (`newProp !== oldProp`), so
+// an inline `customBorderChars={{…}}` re-sets the renderable's border
+// config and calls `requestRender()` on every parent reconcile even
+// when nothing changed. Module-level objects fix the identity.
+
+import type { BorderCharacters } from "@opentui/core"
+
+/** Left-edge heavy bar only — panel/card accent. */
+export const LEFT_BAR: BorderCharacters = {
+  topLeft: "", bottomLeft: "", topRight: "", bottomRight: "",
+  horizontal: "", vertical: "┃",
+  topT: "", bottomT: "", leftT: "", rightT: "", cross: "",
+}
+
+/** Light single vertical on both sides, no horizontals. */
+export const SIDE_PIPE: BorderCharacters = {
+  topLeft: "│", bottomLeft: "│", vertical: "│",
+  topRight: "│", bottomRight: "│", horizontal: "",
+  topT: "", bottomT: "", leftT: "", rightT: "", cross: "",
+}
+
+/** Corners only — the Context heat-grid frame. */
+export const CORNERS: BorderCharacters = {
+  topLeft: "┌", topRight: "┐", bottomLeft: "└", bottomRight: "┘",
+  horizontal: " ", vertical: " ",
+  topT: " ", bottomT: " ", leftT: " ", rightT: " ", cross: " ",
+}