camelagi 0.5.49 → 0.5.51

package/tui/src/components/HorizontalRule.tsx

@@ -0,0 +1,12 @@
+import { useTerminalDimensions } from "@opentui/react"
+import { theme } from "../theme.js"
+
+export function HorizontalRule({ marginTop = 0, marginBottom = 0 }: { marginTop?: number; marginBottom?: number }) {
+  const { width } = useTerminalDimensions()
+  const w = Math.max(20, Math.min(width, 400))
+  return (
+    <box marginTop={marginTop} marginBottom={marginBottom}>
+      <text content={"─".repeat(w)} fg={theme.divider} />
+    </box>
+  )
+}

package/tui/src/components/Input.tsx

@@ -0,0 +1,126 @@
+// Plain text input row. No border (Claude Code style: dividers above/below
+// supplied by the parent). Owns its own buffer; emits onSubmit on Enter.
+// Slash-mode bookkeeping is exposed via onSlashStateChange so the parent
+// can swap the bottom area between BottomBar and SlashMenu.
+
+import { useEffect, useMemo, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { fg, t, bold } from "@opentui/core"
+import { filterCommands, type SlashCommand } from "../commands/registry.js"
+import { theme } from "../theme.js"
+
+export interface InputProps {
+  disabled?: boolean
+  onSubmit: (text: string) => void
+  onSlash: (commandName: string, args: string[]) => void
+  onAbort?: () => void
+  onCyclePermission?: () => void
+  /** Notifies parent of current slash-mode state so it can render the menu in the bottom area. */
+  onSlashState?: (state: { matches: SlashCommand[]; selectedIndex: number; argMode?: boolean } | null) => void
+  placeholder?: string
+}
+
+export function Input({
+  disabled,
+  onSubmit,
+  onSlash,
+  onAbort,
+  onCyclePermission,
+  onSlashState,
+  placeholder,
+}: InputProps) {
+  const [value, setValue] = useState("")
+  const [menuIdx, setMenuIdx] = useState(0)
+
+  const inSlashMode = value.startsWith("/")
+  const slashTokens = inSlashMode ? value.slice(1).split(/\s+/) : []
+  const slashQuery = inSlashMode ? slashTokens[0] ?? "" : ""
+
+  const matches = useMemo<SlashCommand[]>(() => {
+    if (!inSlashMode) return []
+    if (slashTokens.length === 1) return filterCommands(slashQuery)
+    return []
+  }, [inSlashMode, slashQuery, slashTokens.length])
+
+  // Keep menuIdx in range as matches change.
+  if (menuIdx >= matches.length && matches.length > 0) {
+    setMenuIdx(0)
+  }
+
+  // Notify parent.
+  useEffect(() => {
+    if (matches.length > 0) onSlashState?.({ matches, selectedIndex: menuIdx })
+    else onSlashState?.(null)
+  }, [matches, menuIdx, onSlashState])
+
+  useKeyboard(key => {
+    if (key.shift && key.name === "tab") {
+      onCyclePermission?.()
+      return
+    }
+    if (disabled) {
+      if (key.name === "escape") onAbort?.()
+      return
+    }
+    if (matches.length > 0) {
+      if (key.name === "up") { setMenuIdx(i => Math.max(0, i - 1)); return }
+      if (key.name === "down") { setMenuIdx(i => Math.min(matches.length - 1, i + 1)); return }
+      if (key.name === "tab") {
+        const pick = matches[menuIdx]
+        if (pick) setValue(`/${pick.name} `)
+        return
+      }
+      if (key.name === "return") {
+        const pick = matches[menuIdx]
+        if (pick) {
+          setValue("")
+          setMenuIdx(0)
+          onSlash(pick.name, [])
+        }
+        return
+      }
+    }
+    if (key.name === "return") {
+      const trimmed = value.trim()
+      setValue("")
+      setMenuIdx(0)
+      if (!trimmed) return
+      if (trimmed.startsWith("/")) {
+        const tokens = trimmed.slice(1).split(/\s+/)
+        const [name, ...args] = tokens
+        onSlash(name, args)
+        return
+      }
+      onSubmit(trimmed)
+      return
+    }
+    if (key.name === "escape") {
+      if (value) setValue("")
+      else onAbort?.()
+      return
+    }
+    if (key.name === "backspace") {
+      setValue(v => v.slice(0, -1))
+      return
+    }
+    if (typeof key.sequence === "string" && key.sequence.length === 1) {
+      const ch = key.sequence
+      const code = ch.charCodeAt(0)
+      if (code >= 32 && code !== 127) setValue(v => v + ch)
+    }
+  })
+
+  // Bigger, bolder caret + chunkier block cursor for visibility.
+  const cursor = !disabled ? bold(fg(theme.assistant)("█")) : ""
+  const prompt = bold(fg(theme.assistant)("❯ "))
+  const showPlaceholder = !value && placeholder && !disabled
+  const promptContent = showPlaceholder
+    ? t`${prompt}${fg(theme.dim)(placeholder)}${cursor}`
+    : t`${prompt}${fg(theme.assistant)(value)}${cursor}`
+
+  return (
+    <box paddingLeft={1} paddingRight={1} marginTop={1} marginBottom={1}>
+      <text content={promptContent} />
+    </box>
+  )
+}

package/tui/src/components/Markdown.tsx

@@ -0,0 +1,290 @@
+// Lightweight markdown renderer for assistant text. Handles the patterns
+// LLMs actually emit:
+//   - **bold**  *italic*  `inline code`
+//   - ``` fenced code blocks ```
+//   - # heading  ## heading
+//   - "- " / "* "  bulleted lists
+//   - "1. "        numbered lists  (cyan number, Codex style)
+//   - > blockquote
+//
+// Output is OpenTUI <text>/<box> elements. Inline styling builds StyledText
+// directly from TextChunks (the class OpenTUI's <text content> consumes).
+
+import { Fragment, type ReactNode } from "react"
+import { fg, bg, bold, italic, t, StyledText, type TextChunk } from "@opentui/core"
+import { theme } from "../theme.js"
+
+export function Markdown({ text, prefix }: { text: string; prefix?: TextChunk }) {
+  const blocks = parseBlocks(text)
+  // Drop the prefix unless the very first block is a paragraph — bullets
+  // glued to a code block or heading look noisy.
+  const firstIsParagraph = blocks.length > 0 && blocks[0].kind === "paragraph"
+  return (
+    <Fragment>
+      {blocks.map((b, i) =>
+        renderBlock(b, i, i === 0 && firstIsParagraph ? prefix : undefined),
+      )}
+    </Fragment>
+  )
+}
+
+// ── block-level parser ─────────────────────────────────────────────
+
+type Block =
+  | { kind: "paragraph"; lines: string[] }
+  | { kind: "code"; lang: string; content: string }
+  | { kind: "heading"; level: 1 | 2 | 3; text: string }
+  | { kind: "bullet"; items: string[] }
+  | { kind: "numbered"; items: string[] }
+  | { kind: "quote"; lines: string[] }
+
+function parseBlocks(text: string): Block[] {
+  const blocks: Block[] = []
+  const rawLines = text.split("\n")
+  let i = 0
+
+  while (i < rawLines.length) {
+    const line = rawLines[i]
+
+    const fenceMatch = line.match(/^```(\w*)/)
+    if (fenceMatch) {
+      const lang = fenceMatch[1] ?? ""
+      const buf: string[] = []
+      i++
+      while (i < rawLines.length && !rawLines[i].startsWith("```")) {
+        buf.push(rawLines[i])
+        i++
+      }
+      i++ // skip closing fence
+      blocks.push({ kind: "code", lang, content: buf.join("\n") })
+      continue
+    }
+
+    const h = line.match(/^(#{1,3})\s+(.*)$/)
+    if (h) {
+      blocks.push({ kind: "heading", level: h[1].length as 1 | 2 | 3, text: h[2] })
+      i++
+      continue
+    }
+
+    if (line.match(/^[-*]\s/)) {
+      const items: string[] = []
+      while (i < rawLines.length && rawLines[i].match(/^[-*]\s/)) {
+        items.push(rawLines[i].replace(/^[-*]\s/, ""))
+        i++
+      }
+      blocks.push({ kind: "bullet", items })
+      continue
+    }
+
+    if (line.match(/^\d+\.\s/)) {
+      const items: string[] = []
+      while (i < rawLines.length && rawLines[i].match(/^\d+\.\s/)) {
+        items.push(rawLines[i].replace(/^\d+\.\s/, ""))
+        i++
+      }
+      blocks.push({ kind: "numbered", items })
+      continue
+    }
+
+    if (line.startsWith("> ")) {
+      const buf: string[] = []
+      while (i < rawLines.length && rawLines[i].startsWith("> ")) {
+        buf.push(rawLines[i].slice(2))
+        i++
+      }
+      blocks.push({ kind: "quote", lines: buf })
+      continue
+    }
+
+    if (line.trim() === "") {
+      i++
+      continue
+    }
+
+    const paraLines: string[] = []
+    while (
+      i < rawLines.length
+      && rawLines[i].trim() !== ""
+      && !rawLines[i].match(/^```/)
+      && !rawLines[i].match(/^#{1,3}\s/)
+      && !rawLines[i].match(/^[-*]\s/)
+      && !rawLines[i].match(/^\d+\.\s/)
+      && !rawLines[i].startsWith("> ")
+    ) {
+      paraLines.push(rawLines[i])
+      i++
+    }
+    if (paraLines.length > 0) blocks.push({ kind: "paragraph", lines: paraLines })
+  }
+
+  return blocks
+}
+
+// ── block renderer ─────────────────────────────────────────────────
+
+function renderBlock(block: Block, key: number, prefix?: TextChunk): ReactNode {
+  switch (block.kind) {
+    case "paragraph":
+      return (
+        <Fragment key={key}>
+          {block.lines.map((line, i) => {
+            const chunks = inlineChunks(line, theme.assistant)
+            const withPrefix = i === 0 && prefix ? [prefix, ...chunks] : chunks
+            return <text key={i} content={styled(withPrefix)} />
+          })}
+        </Fragment>
+      )
+
+    case "code":
+      return (
+        <box key={key} flexDirection="column" marginTop={1} marginBottom={1}>
+          {block.lang ? (
+            <text content={"  " + block.lang} fg={theme.dim} />
+          ) : null}
+          {block.content.split("\n").map((line, i) => (
+            <text
+              key={i}
+              content={t`${fg(theme.branch)("│ ")}${fg(theme.assistant)(line.length > 0 ? line : " ")}`}
+            />
+          ))}
+        </box>
+      )
+
+    case "heading":
+      return (
+        <box key={key} marginTop={1}>
+          <text content={styled([applyBold(applyFg(block.text, theme.assistant))])} />
+        </box>
+      )
+
+    case "bullet":
+      return (
+        <Fragment key={key}>
+          {block.items.map((item, i) => (
+            <text
+              key={i}
+              content={styled([
+                applyFg("  • ", theme.bullet),
+                ...inlineChunks(item, theme.assistant),
+              ])}
+            />
+          ))}
+        </Fragment>
+      )
+
+    case "numbered":
+      return (
+        <Fragment key={key}>
+          {block.items.map((item, i) => (
+            <text
+              key={i}
+              content={styled([
+                applyFg(`  ${i + 1}. `, theme.number),
+                ...inlineChunks(item, theme.assistant),
+              ])}
+            />
+          ))}
+        </Fragment>
+      )
+
+    case "quote":
+      return (
+        <Fragment key={key}>
+          {block.lines.map((line, i) => (
+            <text
+              key={i}
+              content={styled([
+                applyFg("│ ", theme.dim),
+                ...inlineChunks(line, theme.dim),
+              ])}
+            />
+          ))}
+        </Fragment>
+      )
+  }
+}
+
+// ── inline parser & styling helpers ────────────────────────────────
+
+function renderInline(line: string, defaultColor: string): StyledText {
+  return styled(inlineChunks(line, defaultColor))
+}
+
+function inlineChunks(line: string, defaultColor: string): TextChunk[] {
+  const tokens = tokenizeInline(line)
+  return tokens.map(tok => styleToken(tok, defaultColor))
+}
+
+type Token =
+  | { kind: "text"; v: string }
+  | { kind: "bold"; v: string }
+  | { kind: "italic"; v: string }
+  | { kind: "code"; v: string }
+
+function tokenizeInline(line: string): Token[] {
+  const out: Token[] = []
+  let i = 0
+  while (i < line.length) {
+    if (line[i] === "`") {
+      const end = line.indexOf("`", i + 1)
+      if (end > i) {
+        out.push({ kind: "code", v: line.slice(i + 1, end) })
+        i = end + 1
+        continue
+      }
+    }
+    if (line[i] === "*" && line[i + 1] === "*") {
+      const end = line.indexOf("**", i + 2)
+      if (end > i + 1) {
+        out.push({ kind: "bold", v: line.slice(i + 2, end) })
+        i = end + 2
+        continue
+      }
+    }
+    if ((line[i] === "*" || line[i] === "_") && line[i + 1] && line[i + 1] !== " ") {
+      const ch = line[i]
+      const end = line.indexOf(ch, i + 1)
+      if (end > i + 1 && line[end - 1] !== " ") {
+        out.push({ kind: "italic", v: line.slice(i + 1, end) })
+        i = end + 1
+        continue
+      }
+    }
+    let j = i
+    while (j < line.length && line[j] !== "`" && line[j] !== "*" && line[j] !== "_") j++
+    if (j === i) j = i + 1
+    out.push({ kind: "text", v: line.slice(i, j) })
+    i = j
+  }
+  return out
+}
+
+function styleToken(tok: Token, defaultColor: string): TextChunk {
+  switch (tok.kind) {
+    case "text":   return applyFg(tok.v, defaultColor)
+    case "bold":   return applyBold(applyFg(tok.v, defaultColor))
+    case "italic": return applyItalic(applyFg(tok.v, defaultColor))
+    case "code":   return applyBold(applyFg(tok.v, defaultColor))
+  }
+}
+
+// applyFg/Bg/Bold/Italic each return a TextChunk. They composes via
+// OpenTUI's chunk-level helpers; we don't go through the t`` template.
+
+function applyFg(input: string | TextChunk, color: string): TextChunk {
+  return fg(color)(input)
+}
+function applyBg(input: string | TextChunk, color: string): TextChunk {
+  return bg(color)(input)
+}
+function applyBold(input: string | TextChunk): TextChunk {
+  return bold(input)
+}
+function applyItalic(input: string | TextChunk): TextChunk {
+  return italic(input)
+}
+
+function styled(chunks: TextChunk[]): StyledText {
+  return new StyledText(chunks)
+}

package/tui/src/components/Message.tsx

@@ -0,0 +1,77 @@
+// Codex-style messages.
+// User: full-width subtle-highlight bar with ›  prefix.
+// Assistant: inline text prefixed by • bullet, no border.
+// System: same dim treatment as assistant but with the system tone color.
+
+import { fg, t } from "@opentui/core"
+import { theme } from "../theme.js"
+import { Markdown } from "./Markdown.js"
+
+export function UserMessage({ text }: { text: string }) {
+  return (
+    <box
+      flexDirection="column"
+      marginTop={1}
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={theme.userBg}
+    >
+      {splitLines(text).map((line, i) => (
+        <text
+          key={i}
+          content={i === 0 ? t`${fg(theme.dim)("› ")}${fg(theme.user)(line)}` : t`  ${fg(theme.user)(line)}`}
+          bg={theme.userBg}
+        />
+      ))}
+    </box>
+  )
+}
+
+export function AssistantMessage({
+  text,
+  thinking,
+  streaming,
+}: {
+  text: string
+  thinking: string
+  streaming: boolean
+}) {
+  return (
+    <box flexDirection="column" marginTop={1}>
+      {thinking ? (
+        <box flexDirection="column" marginBottom={text ? 1 : 0}>
+          <text content={t`${fg(theme.thinking)("● thinking")}${streaming ? fg(theme.dim)("…") : ""}`} />
+          {splitLines(thinking).map((line, i) => (
+            <text key={i} content={"  " + line} fg={theme.dim} />
+          ))}
+        </box>
+      ) : null}
+      {text && text.trim() ? (
+        <>
+          <Markdown text={text} />
+          {streaming ? <text content={t`${fg(theme.dim)("▍")}`} /> : null}
+        </>
+      ) : null}
+      {streaming && !(text && text.trim()) ? (
+        <text content={t`${fg(theme.dim)("…")}`} />
+      ) : null}
+    </box>
+  )
+}
+
+export function SystemMessage({ text, tone }: { text: string; tone?: "info" | "warn" | "error" }) {
+  const color = tone === "error" ? theme.toolError : tone === "warn" ? theme.toolRunning : theme.system
+  const lines = splitLines(text)
+  return (
+    <box flexDirection="column" marginTop={1}>
+      {lines.map((line, i) => {
+        const prefix = i === 0 ? fg(theme.bullet)("● ") : "  "
+        return <text key={i} content={t`${prefix}${fg(color)(line)}`} />
+      })}
+    </box>
+  )
+}
+
+function splitLines(s: string): string[] {
+  return s.split("\n")
+}

package/tui/src/components/PermissionBanner.tsx

@@ -0,0 +1,30 @@
+import { fg, t } from "@opentui/core"
+import type { PermissionMode } from "../agent/types.js"
+import { theme } from "../theme.js"
+
+const ORDER: PermissionMode[] = ["default", "acceptEdits", "bypassPermissions", "plan"]
+
+export function nextMode(current: PermissionMode): PermissionMode {
+  const i = ORDER.indexOf(current)
+  return ORDER[(i + 1) % ORDER.length]
+}
+
+export function PermissionBanner({ mode, busy }: { mode: PermissionMode; busy?: boolean }) {
+  if (mode === "default") return null
+  const { label, color } = banner(mode)
+  const hint = busy
+    ? "(shift+tab to cycle · esc to interrupt)"
+    : "(shift+tab to cycle)"
+  return (
+    <text content={t`${fg(color)("▶▶ ")}${fg(color)(label)} ${fg(theme.dim)(hint)}`} />
+  )
+}
+
+function banner(mode: PermissionMode): { label: string; color: string } {
+  switch (mode) {
+    case "acceptEdits":       return { label: "accept edits on", color: theme.modeAcceptEdits }
+    case "bypassPermissions": return { label: "bypass permissions on", color: theme.modeBypass }
+    case "plan":              return { label: "plan mode on", color: theme.modePlan }
+    default:                  return { label: "", color: theme.dim }
+  }
+}

package/tui/src/components/Picker.tsx

@@ -0,0 +1,127 @@
+// Generic interactive list picker with type-to-filter search.
+// Up/Down navigate, Enter confirms, Esc cancels, printable keys edit query.
+
+import { useState, useMemo, useEffect } from "react"
+import { useKeyboard } from "@opentui/react"
+import { fg, t } from "@opentui/core"
+import { theme } from "../theme.js"
+
+export interface PickerItem {
+  value: string
+  label: string
+  description?: string
+  badge?: string
+}
+
+export interface PickerProps {
+  title: string
+  items: PickerItem[]
+  initialIndex?: number
+  onSelect: (value: string) => void
+  onCancel: () => void
+}
+
+const MAX_VISIBLE = 8
+
+export function Picker({ title, items, initialIndex = 0, onSelect, onCancel }: PickerProps) {
+  const [query, setQuery] = useState("")
+  const [idx, setIdx] = useState(Math.min(initialIndex, Math.max(0, items.length - 1)))
+
+  const filtered = useMemo(() => {
+    if (!query) return items
+    const q = query.toLowerCase()
+    return items.filter(i =>
+      i.label.toLowerCase().includes(q)
+      || (i.description ?? "").toLowerCase().includes(q)
+      || (i.badge ?? "").toLowerCase().includes(q),
+    )
+  }, [items, query])
+
+  // Snap selection back into range whenever the filter changes.
+  useEffect(() => {
+    setIdx(i => Math.min(Math.max(0, i), Math.max(0, filtered.length - 1)))
+  }, [filtered.length])
+
+  useKeyboard(key => {
+    if (key.name === "up") {
+      setIdx(i => Math.max(0, i - 1))
+    } else if (key.name === "down") {
+      setIdx(i => Math.min(filtered.length - 1, i + 1))
+    } else if (key.name === "return") {
+      if (filtered.length > 0) onSelect(filtered[idx].value)
+    } else if (key.name === "escape") {
+      onCancel()
+    } else if (key.name === "backspace") {
+      setQuery(q => q.slice(0, -1))
+    } else if (
+      key.sequence
+      && key.sequence.length === 1
+      && key.sequence >= " "
+      && key.sequence <= "~"
+    ) {
+      setQuery(q => q + key.sequence)
+    }
+  })
+
+  if (items.length === 0) return null
+
+  const start = Math.max(
+    0,
+    Math.min(idx - Math.floor(MAX_VISIBLE / 2), Math.max(0, filtered.length - MAX_VISIBLE)),
+  )
+  const visible = filtered.slice(start, start + MAX_VISIBLE)
+
+  // Fixed column widths derived from the full item set so widths don't jiggle as you filter.
+  const labelWidth = Math.min(28, Math.max(...items.map(i => i.label.length)))
+  const badgeWidth = Math.min(12, Math.max(...items.map(i => (i.badge ?? "").length)))
+
+  // Total height: title + filter + blank + visible rows + blank + footer + padding(2)
+  const height = visible.length + 7
+
+  return (
+    <box
+      flexDirection="column"
+      flexShrink={0}
+      height={height}
+      borderStyle="rounded"
+      borderColor={theme.borderActive}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={0}
+      paddingBottom={0}
+      marginTop={1}
+    >
+      <text content={t`${fg(theme.accent)("› ")}${fg(theme.assistant)(title)}`} />
+      <text
+        content={t`${fg(theme.dim)("  search ")}${fg(theme.assistant)(query || " ")}${fg(theme.dim)(query ? "" : "(type to filter)")}`}
+      />
+      <text content="" />
+      {visible.length === 0 ? (
+        <text content="  no matches" fg={theme.dim} />
+      ) : (
+        visible.map((item, i) => {
+          const realIdx = start + i
+          const active = realIdx === idx
+          const marker = active ? "› " : "  "
+          const markerColor = active ? theme.accent : theme.dim
+          const labelColor = active ? theme.assistant : theme.dim
+          const label = clip(item.label, labelWidth).padEnd(labelWidth)
+          const badge = clip(item.badge ?? "", badgeWidth).padEnd(badgeWidth)
+          const desc = item.description ?? ""
+          return (
+            <text
+              key={item.value}
+              content={t`${fg(markerColor)(marker)}${fg(labelColor)(label)}  ${fg(theme.dim)(badge)}  ${fg(theme.dim)(desc)}`}
+            />
+          )
+        })
+      )}
+      <text content="" />
+      <text content="↑/↓ choose · enter confirm · esc cancel · type to filter" fg={theme.dim} />
+    </box>
+  )
+}
+
+function clip(s: string, max: number): string {
+  return s.length <= max ? s : s.slice(0, Math.max(0, max - 1)) + "…"
+}