camelagi 0.5.49 → 0.5.51

package/tui/src/commands/registry.ts

@@ -0,0 +1,301 @@
+// Slash command registry for CamelAGI TUI.
+
+import { spawn as spawnChild } from "node:child_process"
+import { writeFileSync } from "node:fs"
+import { join } from "node:path"
+import type { PermissionMode } from "../agent/types.js"
+import type { ChatState } from "../state/reducer.js"
+import { MODELS, EFFORT_LEVELS, type Effort, findModel } from "../models.js"
+import type { PickerItem } from "../components/Picker.js"
+
+export interface Settings {
+  model: string
+  effort: Effort
+  cwd: string
+}
+
+export interface CommandContext {
+  pushSystem: (text: string, tone?: "info" | "warn" | "error") => void
+  agent: {
+    state: ChatState
+    clear: () => void
+    abort: () => void
+    setPermissionMode: (mode: PermissionMode) => void
+    switchModel: (model: string, thinking?: string, effort?: string) => void
+    wsSend: (msg: Record<string, unknown>) => void
+    sessionId: string
+  }
+  settings: Settings
+  setSettings: (patch: Partial<Settings>) => void
+  openPicker: (opts: {
+    title: string
+    items: PickerItem[]
+    initialIndex?: number
+    onSelect: (value: string) => void
+  }) => void
+  exit: () => void
+}
+
+export interface SlashCommand {
+  name: string
+  description: string
+  hidden?: boolean
+  run: (ctx: CommandContext, args: string[]) => Promise<void> | void
+}
+
+export const COMMANDS: SlashCommand[] = [
+  {
+    name: "model",
+    description: "Pick a model",
+    run: ctx => {
+      const items: PickerItem[] = MODELS.map(m => ({
+        value: m.id,
+        label: m.label,
+        description: m.notes ?? "",
+        badge: m.vendor,
+      }))
+      const initialIndex = Math.max(0, MODELS.findIndex(m => m.id === ctx.settings.model))
+      ctx.openPicker({
+        title: "Select model",
+        items,
+        initialIndex,
+        onSelect: value => {
+          ctx.setSettings({ model: value })
+          ctx.agent.switchModel(value)
+          const meta = findModel(value)
+          ctx.pushSystem(`Model → ${meta?.label ?? value}`)
+        },
+      })
+    },
+  },
+  {
+    name: "effort",
+    description: "Set effort level (low | medium | high | max)",
+    run: (ctx, args) => {
+      const arg = args[0] as Effort | undefined
+      if (arg && EFFORT_LEVELS.includes(arg)) {
+        ctx.setSettings({ effort: arg })
+        ctx.agent.switchModel(ctx.settings.model, undefined, arg)
+        ctx.pushSystem(`Effort → ${arg}`)
+        return
+      }
+      const items: PickerItem[] = EFFORT_LEVELS.map(level => ({
+        value: level,
+        label: level,
+        description: descEffort(level),
+      }))
+      const initialIndex = Math.max(0, EFFORT_LEVELS.indexOf(ctx.settings.effort))
+      ctx.openPicker({
+        title: "Select effort level",
+        items,
+        initialIndex,
+        onSelect: value => {
+          ctx.setSettings({ effort: value as Effort })
+          ctx.agent.switchModel(ctx.settings.model, undefined, value)
+          ctx.pushSystem(`Effort → ${value}`)
+        },
+      })
+    },
+  },
+  {
+    name: "think",
+    description: "Set thinking level (off | low | medium | high)",
+    run: (ctx, args) => {
+      const levels = ["off", "low", "medium", "high"] as const
+      const arg = args[0]
+      if (arg && levels.includes(arg as typeof levels[number])) {
+        ctx.agent.switchModel(ctx.settings.model, arg)
+        ctx.pushSystem(`Thinking → ${arg}`)
+        return
+      }
+      ctx.openPicker({
+        title: "Select thinking level",
+        items: levels.map(l => ({ value: l, label: l })),
+        onSelect: value => {
+          ctx.agent.switchModel(ctx.settings.model, value)
+          ctx.pushSystem(`Thinking → ${value}`)
+        },
+      })
+    },
+  },
+  {
+    name: "new",
+    description: "Start a fresh session",
+    run: ctx => {
+      ctx.agent.clear()
+      ctx.pushSystem("New session started.")
+    },
+  },
+  {
+    name: "clear",
+    description: "Clear chat history",
+    run: ctx => ctx.agent.clear(),
+  },
+  {
+    name: "abort",
+    description: "Abort the running agent",
+    run: ctx => ctx.agent.abort(),
+  },
+  {
+    name: "compact",
+    description: "Force compaction of chat history",
+    run: ctx => {
+      ctx.agent.wsSend({ type: "compact", session: ctx.agent.sessionId })
+      ctx.pushSystem("Compaction requested.")
+    },
+  },
+  {
+    name: "status",
+    description: "Show session status and usage",
+    run: ctx => {
+      ctx.agent.wsSend({ type: "status", session: ctx.agent.sessionId })
+    },
+  },
+  {
+    name: "sessions",
+    description: "List saved sessions",
+    run: ctx => {
+      ctx.agent.wsSend({ type: "sessions.list" })
+    },
+  },
+  {
+    name: "cwd",
+    description: "Show or change working directory",
+    run: (ctx, args) => {
+      if (args.length === 0) {
+        ctx.pushSystem(`Current cwd: ${ctx.settings.cwd}`)
+        return
+      }
+      ctx.setSettings({ cwd: args.join(" ") })
+      ctx.pushSystem(`cwd → ${args.join(" ")}`)
+    },
+  },
+  {
+    name: "copy",
+    description: "Copy the last assistant message to clipboard",
+    run: ctx => {
+      const last = lastAssistantText(ctx.agent.state)
+      if (!last) {
+        ctx.pushSystem("No assistant message to copy yet.", "warn")
+        return
+      }
+      copyToClipboard(last)
+        .then(() => ctx.pushSystem(`Copied ${last.length} chars to clipboard.`))
+        .catch(err => ctx.pushSystem(`Copy failed: ${(err as Error).message}`, "error"))
+    },
+  },
+  {
+    name: "save",
+    description: "Save chat to a file in cwd",
+    run: ctx => {
+      const out = formatTranscript(ctx.agent.state)
+      const filename = `camelagi-chat-${new Date().toISOString().replace(/[:.]/g, "-")}.md`
+      const path = join(ctx.settings.cwd, filename)
+      try {
+        writeFileSync(path, out, "utf8")
+        ctx.pushSystem(`Saved chat to ${path}`)
+      } catch (err) {
+        ctx.pushSystem(`Save failed: ${(err as Error).message}`, "error")
+      }
+    },
+  },
+  {
+    name: "help",
+    description: "Show all commands and shortcuts",
+    run: ctx => {
+      const longest = Math.max(...COMMANDS.filter(c => !c.hidden).map(c => c.name.length))
+      const lines = [
+        "Commands:",
+        ...COMMANDS.filter(c => !c.hidden).map(c => `  /${c.name.padEnd(longest)}   ${c.description}`),
+        "",
+        "Shortcuts:",
+        "  ctrl+c       abort current run, twice to exit",
+        "  ctrl+l       clear chat",
+        "  esc          cancel input / deny approval / close picker",
+        "  ↑ / ↓        navigate menu / picker",
+      ]
+      ctx.pushSystem(lines.join("\n"))
+    },
+  },
+  {
+    name: "exit",
+    description: "Quit",
+    run: ctx => ctx.exit(),
+  },
+  {
+    name: "quit",
+    description: "Quit",
+    hidden: true,
+    run: ctx => ctx.exit(),
+  },
+]
+
+export function findCommand(name: string): SlashCommand | undefined {
+  return COMMANDS.find(c => c.name === name)
+}
+
+export function filterCommands(query: string): SlashCommand[] {
+  const q = query.toLowerCase()
+  return COMMANDS.filter(c => {
+    if (!c.name.startsWith(q)) return false
+    if (c.hidden && q.length < 3) return false
+    return true
+  })
+}
+
+function descEffort(e: Effort): string {
+  switch (e) {
+    case "low":    return "fastest, cheapest"
+    case "medium": return "balanced"
+    case "high":   return "more thinking (default)"
+    case "max":    return "all-out reasoning"
+  }
+}
+
+function lastAssistantText(state: ChatState): string | null {
+  for (let i = state.entries.length - 1; i >= 0; i--) {
+    const e = state.entries[i]
+    if (e.kind === "assistant" && e.text) return e.text
+  }
+  return null
+}
+
+function copyToClipboard(text: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const cmd = process.platform === "darwin" ? "pbcopy"
+      : process.platform === "win32" ? "clip"
+      : "xclip"
+    const args = process.platform === "linux" ? ["-selection", "clipboard"] : []
+    const child = spawnChild(cmd, args, { stdio: ["pipe", "ignore", "ignore"] })
+    child.on("error", reject)
+    child.on("exit", code => code === 0 ? resolve() : reject(new Error(`${cmd} exited ${code}`)))
+    child.stdin.end(text)
+  })
+}
+
+function formatTranscript(state: ChatState): string {
+  const lines: string[] = [`# CamelAGI chat — ${new Date().toISOString()}`, ""]
+  for (const e of state.entries) {
+    switch (e.kind) {
+      case "user":
+        lines.push(`### You`, "", e.text, "")
+        break
+      case "assistant":
+        if (e.thinking) lines.push(`> _thinking:_ ${e.thinking.replace(/\n/g, " ")}`, "")
+        lines.push(`### Assistant`, "", e.text, "")
+        break
+      case "tool":
+        lines.push(`**${e.name}** (${e.status})`, "```", JSON.stringify(e.args, null, 2), "```")
+        if (e.result) lines.push("```", e.result, "```")
+        lines.push("")
+        break
+      case "system":
+        lines.push(`_system: ${e.text}_`, "")
+        break
+      case "subagent":
+        lines.push(`**subagent: ${e.agentId}** — ${e.done ? "done" : "running"}`, "")
+        break
+    }
+  }
+  return lines.join("\n")
+}

package/tui/src/components/ActivityIndicator.tsx

@@ -0,0 +1,148 @@
+// Claude Code-style live status: ✦ Thinking… (7s · esc to interrupt)
+// The verb shimmers (color oscillates between two shades) and rotates
+// through a curated word list every few seconds while the model is in
+// generic "thinking/responding" mode. Specific labels like "Running Bash"
+// stay fixed.
+
+import { useEffect, useRef, useState } from "react"
+import { fg, t } from "@opentui/core"
+import { theme } from "../theme.js"
+
+// Verbs in many languages, each in its native script. The rotation picks
+// at random so a single session feels multilingual.
+const VERBS = [
+  // English
+  "Thinking", "Working", "Pondering", "Reasoning", "Crafting",
+  "Analyzing", "Synthesizing", "Brainstorming", "Reflecting", "Mulling",
+  // Spanish
+  "Pensando", "Trabajando", "Reflexionando", "Analizando", "Creando",
+  // French
+  "Réfléchissant", "Travaillant", "Analysant", "Créant",
+  // German
+  "Denkend", "Arbeitend", "Überlegend", "Analysierend",
+  // Italian
+  "Pensando", "Lavorando", "Analizzando",
+  // Portuguese
+  "Trabalhando", "Refletindo", "Criando",
+  // Dutch
+  "Denkend", "Werkend",
+  // Swedish
+  "Tänker", "Arbetar",
+  // Polish
+  "Myślę", "Pracuję", "Tworzę",
+  // Turkish
+  "Düşünüyorum", "Çalışıyorum",
+  // Greek
+  "Σκέφτομαι", "Εργάζομαι",
+  // Russian
+  "Думаю", "Работаю", "Размышляю", "Анализирую", "Создаю",
+  // Arabic
+  "أفكر", "أعمل", "أحلل", "أتأمل", "أبدع",
+  // Hebrew
+  "חושב", "עובד", "מנתח",
+  // Hindi
+  "सोच रहा हूँ", "काम कर रहा हूँ",
+  // Japanese
+  "考え中", "作業中", "分析中", "思案中",
+  // Chinese
+  "思考中", "工作中", "分析中", "创作中",
+  // Korean
+  "생각중", "작업중", "분석중",
+  // Vietnamese
+  "Đang suy nghĩ", "Đang làm việc",
+  // Thai
+  "กำลังคิด", "กำลังทำงาน",
+  // Swahili
+  "Kufikiri", "Kufanya kazi",
+]
+
+const SHIMMER_DIM = "#475569"     // slate-600
+const SHIMMER_BRIGHT = "#e5e7eb"  // gray-200
+const VERB_ROTATE_MS = 4000
+
+export interface ActivityIndicatorProps {
+  active: boolean
+  startedAt: number | null
+  label: string | null
+  liveTokens: number
+}
+
+export function ActivityIndicator({ active, startedAt, label, liveTokens }: ActivityIndicatorProps) {
+  // Force re-render at 10Hz for shimmer animation + 1Hz elapsed clock.
+  const [, setTick] = useState(0)
+  useEffect(() => {
+    if (!active) return
+    const id = setInterval(() => setTick(x => x + 1), 100)
+    return () => clearInterval(id)
+  }, [active])
+
+  // Verb selection. Generic labels rotate through random words; specific
+  // labels (like "Running Bash") are shown verbatim.
+  const isGeneric = !label || label === "Thinking" || label === "Responding"
+  const verbIdxRef = useRef<number>(Math.floor(Math.random() * VERBS.length))
+  const lastRotateRef = useRef<number>(Date.now())
+
+  useEffect(() => {
+    if (!active || !isGeneric) return
+    verbIdxRef.current = Math.floor(Math.random() * VERBS.length)
+    lastRotateRef.current = Date.now()
+  }, [active, isGeneric, label])
+
+  if (!active || !startedAt) return null
+
+  // Time-based rotation. Every VERB_ROTATE_MS, pick a new random verb.
+  if (isGeneric && Date.now() - lastRotateRef.current >= VERB_ROTATE_MS) {
+    let next = Math.floor(Math.random() * VERBS.length)
+    if (VERBS.length > 1 && next === verbIdxRef.current) next = (next + 1) % VERBS.length
+    verbIdxRef.current = next
+    lastRotateRef.current = Date.now()
+  }
+
+  const verb = isGeneric ? VERBS[verbIdxRef.current] : (label ?? VERBS[0])
+  const shimmerColor = computeShimmer(startedAt)
+  const dots = ".".repeat(Math.floor((Date.now() / 400) % 4)) // 0..3, cycles ~1.6s
+
+  const elapsed = formatElapsed(Date.now() - startedAt)
+  const tokens = formatTokens(liveTokens)
+  const meta = `(${elapsed}${tokens ? ` · ↓ ${tokens} tokens` : ""} · esc to interrupt)`
+
+  return (
+    <box paddingLeft={1} paddingRight={1} marginTop={1}>
+      <text content={t`${fg(theme.toolDone)("✦ ")}${fg(shimmerColor)(verb + dots)}  ${fg(theme.dim)(meta)}`} />
+    </box>
+  )
+}
+
+// 0.6 Hz sine oscillation between SHIMMER_DIM and SHIMMER_BRIGHT.
+function computeShimmer(startedAt: number): string {
+  const t = (Date.now() - startedAt) / 1000
+  const alpha = (Math.sin(t * 4) + 1) / 2 // 0..1, ~0.6 Hz
+  return lerpHex(SHIMMER_DIM, SHIMMER_BRIGHT, alpha)
+}
+
+function lerpHex(a: string, b: string, alpha: number): string {
+  const ar = parseInt(a.slice(1, 3), 16)
+  const ag = parseInt(a.slice(3, 5), 16)
+  const ab = parseInt(a.slice(5, 7), 16)
+  const br = parseInt(b.slice(1, 3), 16)
+  const bg = parseInt(b.slice(3, 5), 16)
+  const bb = parseInt(b.slice(5, 7), 16)
+  const r = Math.round(ar + (br - ar) * alpha)
+  const g = Math.round(ag + (bg - ag) * alpha)
+  const bl = Math.round(ab + (bb - ab) * alpha)
+  return "#" + [r, g, bl].map(v => v.toString(16).padStart(2, "0")).join("")
+}
+
+function formatElapsed(ms: number) {
+  const total = Math.max(0, Math.floor(ms / 1000))
+  if (total < 60) return `${total}s`
+  const m = Math.floor(total / 60)
+  const s = total % 60
+  return `${m}m ${s}s`
+}
+
+function formatTokens(n: number) {
+  if (n <= 0) return ""
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+  return String(n)
+}

package/tui/src/components/ApprovalPrompt.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { fg, t } from "@opentui/core"
+import type { ApprovalRequest } from "../agent/types.js"
+import { theme } from "../theme.js"
+
+const OPTIONS = [
+  { value: "allow", label: "Allow once", desc: "Run this time only" },
+  { value: "deny", label: "Deny", desc: "Block this tool call" },
+] as const
+
+export interface ApprovalPromptProps {
+  request: ApprovalRequest
+  onResolve: (behavior: "allow" | "deny") => void
+}
+
+export function ApprovalPrompt({ request, onResolve }: ApprovalPromptProps) {
+  const [idx, setIdx] = useState(0)
+
+  useKeyboard(key => {
+    if (key.name === "up" || key.name === "k") setIdx(i => Math.max(0, i - 1))
+    else if (key.name === "down" || key.name === "j") setIdx(i => Math.min(OPTIONS.length - 1, i + 1))
+    else if (key.name === "return") onResolve(OPTIONS[idx].value)
+    else if (key.name === "escape") onResolve("deny")
+  })
+
+  const summary = summarize(request)
+
+  return (
+    <box flexDirection="column" borderStyle="double" borderColor={theme.toolRunning} padding={1}>
+      <text content={t`${fg(theme.toolRunning)("⚠ approval required: ")}${fg(theme.assistant)(request.tool)}`} />
+      {summary ? <text content={summary} fg={theme.dim} /> : null}
+      <box flexDirection="column" marginTop={1}>
+        {OPTIONS.map((opt, i) => {
+          const active = i === idx
+          const marker = active ? "› " : "  "
+          const markerColor = active ? theme.accent : theme.dim
+          const labelColor = active ? theme.assistant : theme.dim
+          return (
+            <text
+              key={opt.value}
+              content={t`${fg(markerColor)(marker)}${fg(labelColor)(opt.label)}  ${fg(theme.dim)("— " + opt.desc)}`}
+            />
+          )
+        })}
+      </box>
+      <text content="↑/↓ to choose · enter to confirm · esc to deny" fg={theme.dim} />
+    </box>
+  )
+}
+
+function summarize(req: ApprovalRequest): string {
+  const primary = (req.input.file_path ?? req.input.path ?? req.input.command ?? req.input.url) as
+    | string
+    | undefined
+  if (typeof primary === "string") return primary.length > 100 ? primary.slice(0, 99) + "…" : primary
+  try { return JSON.stringify(req.input).slice(0, 200) } catch { return "" }
+}

package/tui/src/components/BottomBar.tsx

@@ -0,0 +1,74 @@
+// Bottom row Claude Code-style:
+//   [permission banner / status]              [token hint right-aligned]
+// Replaced by SlashMenu when the user is composing a /command.
+
+import { fg, t } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/react"
+import type { ChatState } from "../state/reducer.js"
+import type { PermissionMode } from "../agent/types.js"
+import { theme } from "../theme.js"
+
+export interface BottomBarProps {
+  state: ChatState
+}
+
+export function BottomBar({ state }: BottomBarProps) {
+  const { width } = useTerminalDimensions()
+  const left = leftContent(state)
+  const right = rightContent(state)
+  const padded = padBetween(left.text, right.text, Math.max(40, width - 4))
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      <text
+        content={
+          left.styled && right.styled
+            ? t`${fg(left.color)(left.text)}${fg(theme.dim)(padded.spacer)}${fg(theme.dim)(right.text)}`
+            : right.styled
+              ? t`${fg(theme.dim)(left.text)}${fg(theme.dim)(padded.spacer)}${fg(theme.dim)(right.text)}`
+              : t`${fg(left.color)(left.text)}${fg(theme.dim)(padded.spacer)}${fg(theme.dim)(right.text)}`
+        }
+      />
+    </box>
+  )
+}
+
+function leftContent(state: ChatState): { text: string; color: string; styled: boolean } {
+  if (state.permissionMode === "default") {
+    return { text: "", color: theme.dim, styled: false }
+  }
+  const { label, color } = banner(state.permissionMode)
+  const hint = isBusy(state.status)
+    ? "(shift+tab to cycle · esc to interrupt)"
+    : "(shift+tab to cycle)"
+  return { text: `▶▶ ${label} ${hint}`, color, styled: true }
+}
+
+function rightContent(state: ChatState): { text: string; styled: boolean } {
+  const total = state.usage ? state.usage.inputTokens + state.usage.outputTokens : 0
+  if (total > 0) return { text: `new task? /clear to save ${formatTokens(total)} tokens`, styled: true }
+  return { text: "", styled: false }
+}
+
+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 }
+  }
+}
+
+function isBusy(s: ChatState["status"]) {
+  return s === "thinking" || s === "streaming" || s === "awaiting_approval"
+}
+
+function padBetween(left: string, right: string, width: number): { spacer: string } {
+  const gap = Math.max(2, width - left.length - right.length)
+  return { spacer: " ".repeat(gap) }
+}
+
+function formatTokens(n: number) {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+  return String(n)
+}

package/tui/src/components/Chat.tsx

@@ -0,0 +1,98 @@
+// Chat scrollback. Welcome banner pinned to the top of the history.
+// Content flows top-down (Claude Code / Codex convention). When the
+// conversation overflows the viewport, stickyScroll auto-scrolls to
+// keep the latest message in view.
+
+import type { ReactNode } from "react"
+import type { ChatEntry } from "../state/reducer.js"
+import { AssistantMessage, SystemMessage, UserMessage } from "./Message.js"
+import { SubagentBlock } from "./SubagentBlock.js"
+import { ToolBlock } from "./ToolBlock.js"
+import { Divider } from "./Divider.js"
+import { EditGroup } from "./tools/EditGroup.js"
+
+type Tool = Extract<ChatEntry, { kind: "tool" }>
+
+export interface ChatProps {
+  entries: ChatEntry[]
+  header?: ReactNode
+}
+
+export function Chat({ entries, header }: ChatProps) {
+  const items = groupEntries(entries)
+  return (
+    <scrollbox flexGrow={1} stickyScroll stickyStart="bottom">
+      {header}
+      {items.map(item => {
+        if (item.kind === "edit-group") {
+          return <EditGroup key={item.tools[0]!.id} tools={item.tools} />
+        }
+        return renderEntry(item.entry)
+      })}
+    </scrollbox>
+  )
+}
+
+function renderEntry(entry: ChatEntry): ReactNode {
+  switch (entry.kind) {
+    case "user":
+      return <UserMessage key={entry.id} text={entry.text} />
+    case "assistant":
+      return (
+        <AssistantMessage
+          key={entry.id}
+          text={entry.text}
+          thinking={entry.thinking}
+          streaming={entry.streaming}
+        />
+      )
+    case "tool":
+      return <ToolBlock key={entry.id} tool={entry} />
+    case "subagent":
+      return <SubagentBlock key={entry.id} entry={entry} />
+    case "system":
+      return <SystemMessage key={entry.id} text={entry.text} tone={entry.tone} />
+    case "divider":
+      return <Divider key={entry.id} />
+  }
+}
+
+// ── grouping ───────────────────────────────────────────────────────
+
+type RenderItem =
+  | { kind: "single"; entry: ChatEntry }
+  | { kind: "edit-group"; tools: Tool[] }
+
+// Collapse runs of consecutive Edit/Write tools targeting the same file
+// into a single render unit. Other entry kinds break the run.
+function groupEntries(entries: ChatEntry[]): RenderItem[] {
+  const out: RenderItem[] = []
+  let buffer: Tool[] = []
+  const flush = () => {
+    if (buffer.length === 0) return
+    if (buffer.length === 1) {
+      out.push({ kind: "single", entry: buffer[0]! })
+    } else {
+      out.push({ kind: "edit-group", tools: buffer })
+    }
+    buffer = []
+  }
+  for (const e of entries) {
+    if (e.kind === "tool" && (e.name === "Edit" || e.name === "Write")) {
+      const path = String(e.args.file_path ?? "")
+      const head = buffer[0]
+      const headPath = head ? String(head.args.file_path ?? "") : null
+      if (head && headPath === path) {
+        buffer.push(e)
+      } else {
+        flush()
+        buffer.push(e)
+      }
+    } else {
+      flush()
+      out.push({ kind: "single", entry: e })
+    }
+  }
+  flush()
+  return out
+}

package/tui/src/components/Divider.tsx

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