@davstack/tui 0.2.0 → 0.3.0

package/src/lib/format-agent-timeline.ts

@@ -0,0 +1,224 @@
+import { walkToolUses } from "@davstack/open-agents/core/parse"
+import type { ParsedEvent } from "@davstack/open-agents/adapters/types"
+
+import { eventGlyph, type AgentEventKind } from "./agent-glyphs.ts"
+
+const TOOL_ARG_KEYS = [
+  "path",
+  "file_path",
+  "pattern",
+  "glob",
+  "command",
+  "target",
+  "target_file",
+  "filename",
+  "file",
+]
+
+export interface TimelineRenderLine {
+  kind: AgentEventKind
+  text: string
+}
+
+export function formatStartLine(opts: { prompt: string; noColor: boolean }): TimelineRenderLine {
+  const g = eventGlyph("start", opts.noColor)
+  const prompt = truncateOneLine(opts.prompt, 60)
+  return { kind: "start", text: `${g} run started · prompt: "${prompt}"` }
+}
+
+export function formatEventLines(opts: {
+  ev: ParsedEvent
+  noColor: boolean
+}): TimelineRenderLine[] {
+  const { ev, noColor } = opts
+  const type = typeof ev.type === "string" ? ev.type : "other"
+
+  if (type === "system" || type === "init") {
+    return [line("system", noColor, "system", "model loaded")]
+  }
+
+  if (type === "tool_result" || type === "tool_result_error") {
+    const body = extractText(ev)
+    const preview = truncateOneLine(body.replace(/\s+/g, " "), 160)
+    const size = body.length > 0 ? ` (${formatByteSize(body.length)})` : ""
+    return [line("tool_result", noColor, `tool_result${size}`, preview || "ok")]
+  }
+
+  if (type === "assistant" || (type === "message" && ev.role === "assistant")) {
+    const body = extractAssistantText(ev)
+    if (!body.trim()) return []
+    return [line("assistant", noColor, "assistant", `"${truncateOneLine(body.replace(/\s+/g, " "), 120)}"`)]
+  }
+
+  if (type === "result") {
+    return []
+  }
+
+  const cursorTC = extractCursorToolCall(ev, noColor)
+  if (cursorTC) return [cursorTC]
+
+  const out: TimelineRenderLine[] = []
+  for (const tu of walkToolUses(ev)) {
+    const summary = summarizeToolInput(tu.input)
+    const label = summary ? `${tu.name}(${summary})` : tu.name
+    out.push(line("tool_use", noColor, "tool_use", label))
+  }
+  if (out.length > 0) return out
+
+  if (type === "tool_use" || type === "tool_call") {
+    const name = typeof ev.name === "string" ? ev.name : "tool"
+    out.push(line("tool_use", noColor, "tool_use", `${name}(${summarizeToolInput(ev.input ?? ev.arguments)})`))
+    return out
+  }
+
+  return []
+}
+
+function extractCursorToolCall(ev: ParsedEvent, noColor: boolean): TimelineRenderLine | null {
+  if (ev.type !== "tool_call") return null
+  const tc = ev.tool_call as Record<string, unknown> | undefined
+  if (!tc || typeof tc !== "object") return null
+  const entries = Object.entries(tc)
+  if (entries.length === 0) return null
+  const [rawKey, payload] = entries[0]!
+  if (!payload || typeof payload !== "object") return null
+  const toolName = rawKey.replace(/ToolCall$/, "")
+  const pl = payload as Record<string, unknown>
+  const subtype = typeof ev.subtype === "string" ? ev.subtype : "started"
+  if (subtype === "completed") {
+    const body = extractCursorResultText(pl.result)
+    const preview = truncateOneLine(body.replace(/\s+/g, " "), 160)
+    const size = body.length > 0 ? ` (${formatByteSize(body.length)})` : ""
+    return line("tool_result", noColor, `${toolName}${size}`, preview || "ok")
+  }
+  const summary = summarizeToolInput(pl.args ?? pl.input)
+  return line("tool_use", noColor, "tool_use", summary ? `${toolName}(${summary})` : toolName)
+}
+
+function extractCursorResultText(result: unknown): string {
+  if (result == null) return ""
+  if (typeof result === "string") return result
+  if (typeof result !== "object") return String(result)
+  const rec = result as Record<string, unknown>
+  // cursor-agent: { success: { content, ... } } or { error: { message } }
+  const success = rec.success as Record<string, unknown> | undefined
+  if (success) {
+    const direct = pickString(success, ["content", "text", "output", "result"])
+    if (direct) return direct
+  }
+  const error = rec.error as Record<string, unknown> | undefined
+  if (error) {
+    const msg = pickString(error, ["message", "error", "text"])
+    if (msg) return `error: ${msg}`
+  }
+  const top = pickString(rec, ["content", "text", "output", "message"])
+  if (top) return top
+  return ""
+}
+
+export function formatResultSummaryLine(opts: {
+  toolCallCount: number
+  filesChanged: string[]
+  usage?: { input?: number; output?: number }
+  cost?: string
+  noColor: boolean
+}): TimelineRenderLine {
+  const parts: string[] = []
+  parts.push(`${opts.toolCallCount} tool calls`)
+  if (opts.filesChanged.length > 0) {
+    parts.push(`${opts.filesChanged.length} files changed`)
+  }
+  if (opts.usage?.input != null && opts.usage?.output != null) {
+    parts.push(`${formatTokenCount(opts.usage.input)} in / ${formatTokenCount(opts.usage.output)} out`)
+  }
+  if (opts.cost) parts.push(opts.cost)
+  return line("result", opts.noColor, "result", parts.join(" · "))
+}
+
+function line(
+  kind: AgentEventKind,
+  noColor: boolean,
+  label: string,
+  detail: string,
+): TimelineRenderLine {
+  const g = eventGlyph(kind, noColor)
+  const body = detail ? ` ${label} ${detail}` : ` ${label}`
+  return { kind, text: `${g}${body}`.trimEnd() }
+}
+
+function summarizeToolInput(input: unknown): string {
+  if (input == null) return ""
+  if (typeof input === "string") return truncateOneLine(input, 80)
+  if (typeof input !== "object") return truncateOneLine(String(input), 80)
+  const rec = input as Record<string, unknown>
+  const parts: string[] = []
+  for (const k of TOOL_ARG_KEYS) {
+    const v = rec[k]
+    if (typeof v === "string" && v.length > 0) parts.push(v)
+  }
+  if (parts.length === 0) {
+    for (const [k, v] of Object.entries(rec).slice(0, 2)) {
+      if (typeof v === "string" && v.length > 0) parts.push(`${k}=${v}`)
+    }
+  }
+  return truncateOneLine(parts.join(", "), 80)
+}
+
+function extractText(ev: ParsedEvent): string {
+  const direct =
+    pickString(ev, ["content", "result", "text", "output"]) ??
+    pickString(ev.message as Record<string, unknown> | undefined, ["content", "text"])
+  if (direct) return direct
+  if (typeof ev.content === "string") return ev.content
+  return JSON.stringify(ev).slice(0, 500)
+}
+
+function extractAssistantText(ev: ParsedEvent): string {
+  if (typeof ev.text === "string") return ev.text
+  if (typeof ev.content === "string") return ev.content
+  const msg = ev.message as Record<string, unknown> | undefined
+  if (msg) {
+    const content = msg.content
+    if (Array.isArray(content)) {
+      const parts: string[] = []
+      for (const block of content) {
+        if (!block || typeof block !== "object") continue
+        const b = block as Record<string, unknown>
+        if (b.type === "text" && typeof b.text === "string" && b.text.length > 0) {
+          parts.push(b.text)
+        }
+      }
+      if (parts.length > 0) return parts.join(" ")
+    }
+    const t = pickString(msg, ["text", "content"])
+    if (t) return t
+  }
+  return ""
+}
+
+function pickString(obj: Record<string, unknown> | undefined, keys: string[]): string | undefined {
+  if (!obj) return undefined
+  for (const k of keys) {
+    const v = obj[k]
+    if (typeof v === "string" && v.length > 0) return v
+  }
+  return undefined
+}
+
+function truncateOneLine(s: string, n: number): string {
+  const one = s.replace(/\s+/g, " ").trim()
+  if (one.length <= n) return one
+  return one.slice(0, n - 1) + "…"
+}
+
+function formatByteSize(n: number): string {
+  if (n < 1024) return `${n} B`
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function formatTokenCount(n: number): string {
+  if (n < 1000) return String(n)
+  if (n < 1_000_000) return `${Math.round(n / 1000)}k`
+  return `${(n / 1_000_000).toFixed(1)}M`
+}

package/src/lib/read-agent-diff.ts

@@ -0,0 +1,27 @@
+import { spawn } from "node:child_process"
+
+import type { JobRecord } from "@davstack/open-agents/core/jobs"
+
+// Render the diff for a job's filesChanged list by shelling out to git.
+// Async + non-blocking so the render thread isn't stalled while git
+// runs (Ink can otherwise leave the previous pane's frame on screen
+// for hundreds of ms). Uses `git diff HEAD -- <files>` so unstaged +
+// staged changes both show. Empty stdout means the agent's edits were
+// already committed — callers should fall back to the file list.
+export function readAgentDiff(job: JobRecord): Promise<{ diff: string; files: string[] }> {
+  const files = job.filesChanged ?? []
+  if (files.length === 0) return Promise.resolve({ diff: "", files: [] })
+  return new Promise((resolve) => {
+    const proc = spawn("git", ["diff", "--no-color", "HEAD", "--", ...files], {
+      cwd: job.repoPath,
+      windowsHide: true,
+    })
+    const chunks: Buffer[] = []
+    proc.stdout?.on("data", (b: Buffer) => chunks.push(b))
+    proc.once("error", () => resolve({ diff: "", files }))
+    proc.once("close", () => {
+      const diff = Buffer.concat(chunks).toString("utf8")
+      resolve({ diff, files })
+    })
+  })
+}

package/src/lib/read-agent-overlay.ts

@@ -0,0 +1,13 @@
+import fs from "node:fs"
+import { join } from "node:path"
+
+import { jobsDir } from "@davstack/open-agents/core/paths"
+
+export function readAgentSpecContent(opts: {
+  repoPath: string
+  jobId: string
+}): string | null {
+  const path = join(jobsDir(opts.repoPath), `${opts.jobId}.spec.md`)
+  if (!fs.existsSync(path)) return null
+  return fs.readFileSync(path, "utf8")
+}

package/src/state/agents-context.tsx

@@ -0,0 +1,59 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react"
+
+import type { JobRecord } from "@davstack/open-agents/core/jobs"
+import { useAgentJobs } from "../hooks/useAgentJobs.ts"
+import { getRepoRootSafe } from "../lib/package-info.ts"
+
+export type AgentPane = "spec" | "logs" | "diff"
+
+interface AgentsContextValue {
+  jobs: JobRecord[]
+  agentPane: AgentPane
+  setAgentPane: (pane: AgentPane) => void
+  registerTimelineClear: (fn: (() => void) | null) => void
+  clearAgentTimeline: () => void
+}
+
+const AgentsContext = createContext<AgentsContextValue | undefined>(undefined)
+
+export function AgentsProvider({ children }: { children: ReactNode }): React.ReactElement {
+  const repoPath = getRepoRootSafe()
+  const { jobs } = useAgentJobs(repoPath)
+  const clearRef = useRef<(() => void) | null>(null)
+  const [agentPane, setAgentPane] = useState<AgentPane>("spec")
+
+  const registerTimelineClear = useCallback((fn: (() => void) | null) => {
+    clearRef.current = fn
+  }, [])
+
+  const clearAgentTimeline = useCallback(() => {
+    clearRef.current?.()
+  }, [])
+
+  return (
+    <AgentsContext.Provider
+      value={{
+        jobs,
+        agentPane,
+        setAgentPane,
+        registerTimelineClear,
+        clearAgentTimeline,
+      }}
+    >
+      {children}
+    </AgentsContext.Provider>
+  )
+}
+
+export function useAgents(): AgentsContextValue {
+  const value = useContext(AgentsContext)
+  if (!value) throw new Error("useAgents must be used within an AgentsProvider")
+  return value
+}

package/src/state/view-context.tsx

@@ -6,16 +6,33 @@ import React, { createContext, useCallback, useContext, useState, type ReactNode
 
 import type { DaemonKey } from "../lib/daemon-registry.ts"
 
-export type View = { kind: "list" } | { kind: "log"; key: DaemonKey }
+export type View =
+  | { kind: "list" }
+  | { kind: "log"; key: DaemonKey }
+  | { kind: "agents" }
+  | { kind: "agent"; id: string }
 
 function useViewInner() {
   const [view, setView] = useState<View>({ kind: "list" })
   const [focusedIdx, setFocusedIdx] = useState(0)
+  const [highlightedAgentId, setHighlightedAgentId] = useState<string | undefined>(undefined)
 
   const showList = useCallback(() => setView({ kind: "list" }), [])
   const showLog = useCallback((key: DaemonKey) => setView({ kind: "log", key }), [])
-
-  return { view, focusedIdx, setFocusedIdx, showList, showLog }
+  const showAgents = useCallback(() => setView({ kind: "agents" }), [])
+  const showAgent = useCallback((id: string) => setView({ kind: "agent", id }), [])
+
+  return {
+    view,
+    focusedIdx,
+    setFocusedIdx,
+    highlightedAgentId,
+    setHighlightedAgentId,
+    showList,
+    showLog,
+    showAgents,
+    showAgent,
+  }
 }
 
 type ViewContextValue = ReturnType<typeof useViewInner>

package/src/views/AgentTimelineView.tsx

@@ -0,0 +1,252 @@
+import React, { useEffect, useMemo, useState } from "react"
+import { Box, Text, useInput, useStdout } from "ink"
+
+import type { JobStatus } from "@davstack/open-agents/core/jobs"
+
+import { useAgentTimeline } from "../hooks/useAgentTimeline.ts"
+import { useNoColor, colorOrUndef } from "../hooks/useNoColor.ts"
+import { getRepoRootSafe } from "../lib/package-info.ts"
+import { readAgentSpecContent } from "../lib/read-agent-overlay.ts"
+import { readAgentDiff } from "../lib/read-agent-diff.ts"
+import { useAgents, type AgentPane } from "../state/agents-context.tsx"
+import { inferAgentTitle } from "../lib/agent-title.ts"
+import { ControlsHint } from "../components/ControlsHint.tsx"
+import { Markdown } from "../components/Markdown.tsx"
+
+const STATUS_COLOR: Record<JobStatus, string> = {
+  running: "yellow",
+  done: "gray",
+  failed: "red",
+  cancelled: "gray",
+}
+
+const TIMELINE_CONTROLS =
+  "s spec  l logs  d diff  c clear logs  esc back  q quit"
+
+export interface AgentTimelineViewProps {
+  jobId: string
+}
+
+export function AgentTimelineView(props: AgentTimelineViewProps): React.ReactElement {
+  const { jobId } = props
+  const repoPath = getRepoRootSafe()
+  const noColor = useNoColor()
+  const { agentPane, setAgentPane, registerTimelineClear } = useAgents()
+  const { lines, job, clear } = useAgentTimeline(repoPath, jobId, noColor)
+  const { stdout } = useStdout()
+  const rows = stdout?.rows ?? 24
+  const visible = Math.max(8, rows - 6)
+
+  useEffect(() => {
+    registerTimelineClear(clear)
+    return () => registerTimelineClear(null)
+  }, [clear, registerTimelineClear])
+
+  // Default to the spec pane every time the user enters a new job.
+  useEffect(() => {
+    setAgentPane("spec")
+  }, [jobId, setAgentPane])
+
+  const rawModeSupported = process.stdin.isTTY === true
+  const [controlsOpen, setControlsOpen] = useState(false)
+  useInput(
+    (input) => {
+      if (input === "s") setAgentPane("spec")
+      else if (input === "l") setAgentPane("logs")
+      else if (input === "d") setAgentPane("diff")
+      else if (input === "c") setControlsOpen((v) => !v)
+    },
+    { isActive: rawModeSupported },
+  )
+
+  if (!job) {
+    return (
+      <Box flexDirection="column">
+        <Text dimColor>Job not found: {jobId}</Text>
+        <Box marginTop={1}>
+          <Text dimColor>esc back · q quit</Text>
+        </Box>
+      </Box>
+    )
+  }
+
+  const title = inferAgentTitle({ prompt: job.prompt })
+  const adapter = job.model.toLowerCase().startsWith("gemini-") ? "gemini" : "cursor"
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text bold>{title || jobId}</Text>
+        <Text dimColor> · {jobId} · {adapter} · {job.model} · </Text>
+        <Text color={colorOrUndef(STATUS_COLOR[job.status], noColor)}>({job.status})</Text>
+      </Box>
+      <PaneTabs active={agentPane} />
+      <Box flexDirection="column" marginTop={1} height={visible} flexShrink={0}>
+        <PaneBody pane={agentPane} jobId={jobId} repoPath={repoPath} job={job} lines={lines} visible={visible} />
+      </Box>
+      <ControlsHint expanded={controlsOpen} controls={TIMELINE_CONTROLS} />
+    </Box>
+  )
+}
+
+function PaneTabs({ active }: { active: AgentPane }): React.ReactElement {
+  const entries: Array<{ key: AgentPane; label: string; hotkey: string }> = [
+    { key: "spec", label: "spec", hotkey: "s" },
+    { key: "logs", label: "logs", hotkey: "l" },
+    { key: "diff", label: "diff", hotkey: "d" },
+  ]
+  return (
+    <Box marginTop={1}>
+      {entries.map((e, i) => (
+        <Box key={e.key} marginRight={i === entries.length - 1 ? 0 : 2}>
+          <Text bold={active === e.key} inverse={active === e.key}>
+            {" "}
+            {e.hotkey} {e.label}{" "}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+interface PaneBodyProps {
+  pane: AgentPane
+  jobId: string
+  repoPath: string
+  job: NonNullable<ReturnType<typeof useAgentTimeline>["job"]>
+  lines: ReturnType<typeof useAgentTimeline>["lines"]
+  visible: number
+}
+
+function PaneBody(props: PaneBodyProps): React.ReactElement {
+  if (props.pane === "spec") return <SpecPane repoPath={props.repoPath} jobId={props.jobId} visible={props.visible} />
+  if (props.pane === "diff") return <DiffPane job={props.job} visible={props.visible} />
+  return <LogsPane lines={props.lines} visible={props.visible} rawLogPath={props.job.rawLogPath} />
+}
+
+function SpecPane({
+  repoPath,
+  jobId,
+  visible,
+}: {
+  repoPath: string
+  jobId: string
+  visible: number
+}): React.ReactElement {
+  const content = useMemo(() => readAgentSpecContent({ repoPath, jobId }), [repoPath, jobId])
+  if (!content) {
+    return <Text dimColor>(no spec file on disk)</Text>
+  }
+  const totalLines = content.replace(/\r\n/g, "\n").split("\n").length
+  return (
+    <Box flexDirection="column">
+      <Markdown source={content} maxLines={visible} />
+      {totalLines > visible ? (
+        <Text dimColor>… {totalLines - visible} more lines</Text>
+      ) : null}
+    </Box>
+  )
+}
+
+function LogsPane({
+  lines,
+  visible,
+  rawLogPath,
+}: {
+  lines: ReturnType<typeof useAgentTimeline>["lines"]
+  visible: number
+  rawLogPath: string
+}): React.ReactElement {
+  const tail = lines.slice(-visible)
+  return (
+    <Box flexDirection="column">
+      {tail.length === 0 ? (
+        <Text dimColor>(no events yet)</Text>
+      ) : (
+        tail.map((l, i) => (
+          <Text key={i}>
+            {formatLineTs(l.ts)}  {l.text}
+          </Text>
+        ))
+      )}
+      <Box marginTop={1}>
+        <Text dimColor>Raw log: {rawLogPath}</Text>
+      </Box>
+    </Box>
+  )
+}
+
+function DiffPane({
+  job,
+  visible,
+}: {
+  job: PaneBodyProps["job"]
+  visible: number
+}): React.ReactElement {
+  // Cache by jobId + filesChanged size — re-running git on every poll
+  // tick (job ref changes every 700ms) blocks the render thread and
+  // causes stale frames to stick around between pane switches.
+  const jobId = job.id
+  const filesCount = job.filesChanged?.length ?? 0
+  const repoPath = job.repoPath
+  const [state, setState] = useState<{ diff: string; files: string[] } | null>(null)
+  useEffect(() => {
+    let cancelled = false
+    setState(null)
+    readAgentDiff(job).then((r) => {
+      if (!cancelled) setState(r)
+    })
+    return () => {
+      cancelled = true
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [jobId, filesCount, repoPath])
+
+  if (state == null) return <Text dimColor>(computing diff…)</Text>
+  const { diff, files } = state
+  if (files.length === 0) {
+    return <Text dimColor>(no filesChanged recorded for this job)</Text>
+  }
+  if (!diff.trim()) {
+    return (
+      <Box flexDirection="column">
+        <Text dimColor>
+          (no diff against HEAD — changes were committed, or files are outside the repo)
+        </Text>
+        <Box marginTop={1} flexDirection="column">
+          <Text bold>Files reported:</Text>
+          {files.map((f) => (
+            <Text key={f}>  · {f}</Text>
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+  const allLines = diff.split("\n")
+  const slice = allLines.slice(0, visible)
+  return (
+    <Box flexDirection="column">
+      {slice.map((l, i) => (
+        <Text key={i} wrap="truncate" color={colorForDiffLine(l)}>
+          {l}
+        </Text>
+      ))}
+      {allLines.length > visible ? (
+        <Text dimColor>… {allLines.length - visible} more lines</Text>
+      ) : null}
+    </Box>
+  )
+}
+
+function colorForDiffLine(line: string): string | undefined {
+  if (line.startsWith("+") && !line.startsWith("+++")) return "green"
+  if (line.startsWith("-") && !line.startsWith("---")) return "red"
+  if (line.startsWith("@@")) return "cyan"
+  if (line.startsWith("diff --git") || line.startsWith("index ")) return "yellow"
+  return undefined
+}
+
+function formatLineTs(ts: number): string {
+  const d = new Date(ts)
+  return d.toTimeString().slice(0, 8)
+}