@capagents/forgeqe 1.0.8 → 1.1.0

package/src/tui/transcript.tsx

@@ -2,6 +2,7 @@ import { existsSync } from "node:fs"
 import os from "node:os"
 import path from "node:path"
 import { SyntaxStyle } from "@opentui/core"
+import type { ReactNode } from "react"
 
 import type { CodeResult, RunStatus } from "../types.ts"
 import { CARD_MARK, type Card } from "../card.ts"
@@ -50,6 +51,9 @@ export const TEST_VERDICT: Record<CodeResult["status"], [string, string]> = {
 /** The closing card of a request: the report of each run, and the test written for it, or why none was. */
 export function producedCard(p: Produced, tests: TestsSetting): Card | null {
   if (!p.runs.length && !p.suites.length && !p.tests.length) return null
+  // Nothing to show when nothing was made: no report, no test, no suite (a run that only looked something up).
+  const made = p.suites.length || p.tests.length || p.runs.some((r) => r.files.some((f) => path.basename(f) === "report.html"))
+  if (!made) return null
   const show = shortPath
   const row = (mark: string, label: string, value: string) => `${mark.padEnd(2)}${label.padEnd(10)}${value}`
   const body: string[] = []
@@ -89,72 +93,69 @@ export function producedCard(p: Produced, tests: TestsSetting): Card | null {
   return { status, title: "What this produced", body }
 }
 
+/**
+ * The conversation reads top to bottom, as in Claude Code: what you asked after ">", each reply, tool call, or result
+ * after "⏺", and what came of it indented under the call after "⎿". No boxes or backgrounds: marks and colour carry it.
+ */
+export const MARK = { item: "⏺", child: "⎿", user: ">" }
+
+/** A mark in its own column and the content beside it, so wrapped lines stay under the content. */
+export function Marked(props: { mark: string; color: string; indent?: number; gap?: boolean; children: ReactNode }) {
+  return (
+    <box style={{ flexDirection: "row", flexShrink: 0, paddingLeft: props.indent || 0, marginTop: props.gap ? 1 : 0 }}>
+      <text fg={props.color} style={{ width: props.mark.length + 1, flexShrink: 0 }}>
+        {props.mark}
+      </text>
+      <box style={{ flexDirection: "column", flexGrow: 1, flexShrink: 1 }}>{props.children}</box>
+    </box>
+  )
+}
+
+/** What came of a call, under it: "⎿" before the first line of a group, a matching indent before the rest. */
+export function Under(props: { first: boolean; children: ReactNode }) {
+  return (
+    <Marked mark={props.first ? MARK.child : " "} color={theme.faint} indent={2}>
+      {props.children}
+    </Marked>
+  )
+}
+
 export function SummaryCard({ summary }: { summary: RunSummary }) {
   const color = summary.status === "complete" ? theme.ok : summary.status === "stopped" ? theme.warn : theme.err
+  const detail = (label: string, value: ReactNode) => (
+    <text>
+      <span fg={theme.faint}>{label.padEnd(10)}</span>
+      {value}
+    </text>
+  )
   return (
-    <box
-      border={["left"]}
-      borderColor={color}
-      customBorderChars={BAR}
-      style={{
-        flexDirection: "column",
-        backgroundColor: theme.panel,
-        paddingLeft: 2,
-        paddingRight: 2,
-        paddingTop: 1,
-        paddingBottom: 1,
-        marginTop: 1,
-        marginBottom: 1,
-        flexShrink: 0,
-      }}
-    >
-      <box style={{ flexDirection: "row", justifyContent: "space-between" }}>
-        <text>
-          <span fg={color}>{`${STATUS_MARK[summary.status]} `}</span>
-          <span fg={theme.text}>{summary.title}</span>
-        </text>
-        <text fg={theme.muted}>{summary.stats}</text>
-      </box>
-      {summary.failed.map((f, i) => (
-        <text key={i} fg={theme.err} style={i === 0 ? { marginTop: 1 } : undefined}>
-          {`✗ ${f}`}
-        </text>
-      ))}
-      <text fg={theme.text} style={{ marginTop: 1 }}>
-        {summary.text}
-      </text>
-      {summary.finalUrl || summary.savedDir ? <box style={{ height: 1 }} /> : null}
-      {summary.finalUrl ? (
-        <text>
-          <span fg={theme.faint}>{"Ended on  "}</span>
-          <span fg={theme.muted}>{summary.finalUrl}</span>
-        </text>
-      ) : null}
-      {summary.memory ? (
-        <text>
-          <span fg={theme.faint}>{"Memory    "}</span>
-          <span fg={theme.memory}>{summary.memory}</span>
-        </text>
-      ) : null}
-      {summary.quality ? (
-        <text>
-          <span fg={theme.faint}>{"Quality   "}</span>
-          <span fg={theme.muted}>{summary.quality}</span>
-        </text>
-      ) : null}
-      {summary.usage ? (
-        <text>
-          <span fg={theme.faint}>{"Usage     "}</span>
-          <span fg={theme.muted}>{summary.usage}</span>
-        </text>
-      ) : null}
-      {summary.savedDir ? (
+    <box style={{ flexDirection: "column", flexShrink: 0 }}>
+      <Marked mark={MARK.item} color={color} gap>
         <text>
-          <span fg={theme.faint}>{"Saved     "}</span>
-          <Linked text={`${summary.savedDir}/  `} color={theme.muted} />
-          <span fg={theme.faint}>{summary.savedFiles.join(" · ")}</span>
+          <span fg={theme.text}>
+            <strong>{summary.title}</strong>
+          </span>
+          <span fg={theme.faint}>{`  ${summary.stats}`}</span>
         </text>
-      ) : null}
+      </Marked>
+      <Under first>
+        {summary.failed.map((f, i) => (
+          <text key={i} fg={theme.err}>
+            {`✗ ${f}`}
+          </text>
+        ))}
+        <text fg={theme.text}>{summary.text}</text>
+        {summary.finalUrl ? detail("Ended on", <span fg={theme.muted}>{summary.finalUrl}</span>) : null}
+        {summary.memory ? detail("Memory", <span fg={theme.muted}>{summary.memory}</span>) : null}
+        {summary.quality ? detail("Quality", <span fg={theme.muted}>{summary.quality}</span>) : null}
+        {summary.savedDir ? (
+          <text>
+            <span fg={theme.faint}>{"Saved     "}</span>
+            <Linked text={`${summary.savedDir}/  `} color={theme.muted} />
+            <span fg={theme.faint}>{summary.savedFiles.join(" · ")}</span>
+          </text>
+        ) : null}
+      </Under>
     </box>
   )
 }
@@ -221,30 +222,16 @@ export function SuiteCard({ suite }: { suite: SuiteResult }) {
   const show = (f: string) => path.relative(process.cwd(), f) || f
   const caseColor = (s: keyof typeof CASE_MARK) => (s === "passed" ? theme.ok : s === "stopped" ? theme.warn : theme.err)
   return (
-    <box
-      border={["left"]}
-      borderColor={color}
-      customBorderChars={BAR}
-      style={{
-        flexDirection: "column",
-        backgroundColor: theme.panel,
-        paddingLeft: 2,
-        paddingRight: 2,
-        paddingTop: 1,
-        paddingBottom: 1,
-        marginTop: 1,
-        marginBottom: 1,
-        flexShrink: 0,
-      }}
-    >
-      <box style={{ flexDirection: "row", justifyContent: "space-between" }}>
+    <box style={{ flexDirection: "column", flexShrink: 0 }}>
+      <Marked mark={MARK.item} color={color} gap>
         <text>
-          <span fg={color}>{suite.stopped ? "■ " : ok ? "✓ " : "✗ "}</span>
-          <span fg={theme.text}>{suite.stopped ? "Suite stopped" : ok ? "Suite passed" : "Suite failed"}</span>
+          <span fg={theme.text}>
+            <strong>{suite.stopped ? "Suite stopped" : ok ? "Suite passed" : "Suite failed"}</strong>
+          </span>
+          <span fg={theme.faint}>{`  ${c.passed}/${c.total} passed · ${formatDuration(suite.ms)} · ${formatTokens(tokens)} tokens`}</span>
         </text>
-        <text fg={theme.muted}>{`${c.passed}/${c.total} passed · ${formatDuration(suite.ms)} · ${formatTokens(tokens)} tokens`}</text>
-      </box>
-      <box style={{ height: 1 }} />
+      </Marked>
+      <Under first>
       {suite.results.map((r) => (
         <box key={r.case.id} style={{ flexDirection: "column", flexShrink: 0 }}>
           <text>
@@ -265,9 +252,9 @@ export function SuiteCard({ suite }: { suite: SuiteResult }) {
           <span fg={theme.muted}>{`${w.text}${w.url ? `  ${w.url}` : ""}${w.error ? `: ${w.error}` : ""}`}</span>
         </text>
       ))}
-      <box style={{ height: 1 }} />
       <Row label="Report" value={show(suite.files.html)} color={theme.text} />
       <Row label="JUnit" value={show(suite.files.junit)} />
+      </Under>
     </box>
   )
 }
@@ -277,34 +264,25 @@ export const CARD_COLOR: Record<Card["status"], string> = { ok: theme.ok, fail:
 export function ResultCard({ card }: { card: Card }) {
   const color = CARD_COLOR[card.status]
   const lineColor = (l: string) => (/^\s*✓/.test(l) ? theme.ok : /^\s*[✗!]/.test(l) ? theme.err : /^\s*\?/.test(l) ? theme.warn : theme.muted)
+  // What a run used is in the footer and the reports; price talk stays out of the conversation.
+  const body = card.body.filter((l) => !/^\s*Usage\s{2,}/.test(l)).filter((l, i, all) => l || (i > 0 && i < all.length - 1))
   return (
-    <box
-      border={["left"]}
-      borderColor={color}
-      customBorderChars={BAR}
-      style={{
-        flexDirection: "column",
-        backgroundColor: theme.panel,
-        paddingLeft: 2,
-        paddingRight: 2,
-        paddingTop: 1,
-        paddingBottom: 1,
-        marginTop: 1,
-        marginBottom: 1,
-        flexShrink: 0,
-      }}
-    >
-      <box style={{ flexDirection: "row", justifyContent: "space-between" }}>
+    <box style={{ flexDirection: "column", flexShrink: 0 }}>
+      <Marked mark={MARK.item} color={color} gap>
         <text>
-          <span fg={color}>{`${CARD_MARK[card.status]} `}</span>
-          <span fg={theme.text}>{card.title}</span>
+          <span fg={theme.text}>
+            <strong>{card.title}</strong>
+          </span>
+          {card.stats ? <span fg={theme.faint}>{`  ${card.stats}`}</span> : null}
         </text>
-        {card.stats ? <text fg={theme.muted}>{card.stats}</text> : null}
-      </box>
-      {card.body.length ? <box style={{ height: 1 }} /> : null}
-      {card.body.map((l, i) => (
-        <text key={i}>{l ? <Linked text={l} color={lineColor(l)} /> : " "}</text>
-      ))}
+      </Marked>
+      {body.length ? (
+        <Under first>
+          {body.map((l, i) => (
+            <text key={i}>{l ? <Linked text={l} color={lineColor(l)} /> : " "}</text>
+          ))}
+        </Under>
+      ) : null}
     </box>
   )
 }
@@ -401,64 +379,91 @@ function ReplyBody({ text }: { text: string }) {
   )
 }
 
-export function TranscriptLine({ line }: { line: Line }) {
+/** A progress line that starts a phase of the work (a browser run, the handover to the coding agent, a test case). */
+const PHASE = /^(Browser: |Handing over|\d+\/\d+ {2})/
+
+/** Lines that start an entry ("⏺" or ">"); the rest are what came of the entry before them, under it. */
+function isHead(line: Line): boolean {
+  return ["user", "reply", "tool", "file", "card", "summary", "suitesummary"].includes(line.kind) || (line.kind === "code" && PHASE.test(line.text))
+}
+
+/** A tool call's name, and its arguments in brackets: "Azure DevOps · pipelines build", "(project QI-Claims)". */
+function callParts(text: string): [string, string] {
+  const at = text.indexOf(" (")
+  return at > 0 && text.endsWith(")") ? [text.slice(0, at), text.slice(at + 1)] : [text, ""]
+}
+
+/**
+ * One line of the conversation. `prev` decides the layout: a call right after another call keeps no gap between them,
+ * and the first line under an entry gets "⎿".
+ */
+export function TranscriptLine({ line, prev }: { line: Line; prev?: Line }) {
+  // An entry with nothing to say is left out rather than shown as a bare mark.
+  if (!line.text.trim() && !line.card && !line.summary && !line.suite && line.kind !== "sys") return null
   if (line.kind === "card" && line.card) return <ResultCard card={line.card} />
   if (line.kind === "summary" && line.summary) return <SummaryCard summary={line.summary} />
   if (line.kind === "suitesummary" && line.suite) return <SuiteCard suite={line.suite} />
+  if (line.kind === "user") {
+    return (
+      <Marked mark={MARK.user} color={theme.muted} gap>
+        <text fg={theme.muted}>{line.text}</text>
+      </Marked>
+    )
+  }
   if (line.kind === "reply") {
-    const color = line.outcome === "failed" ? theme.err : line.outcome === "needs_input" ? theme.warn : theme.ok
+    const color = line.outcome === "failed" ? theme.err : line.outcome === "needs_input" ? theme.warn : theme.text
     return (
-      <box
-        border={["left"]}
-        borderColor={color}
-        customBorderChars={BAR}
-        style={{ backgroundColor: theme.panel, paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, marginTop: 1, marginBottom: 1, flexShrink: 0 }}
-      >
+      <Marked mark={MARK.item} color={color} gap>
         <ReplyBody text={line.text} />
-      </box>
+      </Marked>
     )
   }
-  if (line.kind === "tool") return <text fg={theme.faint}>{`    ⚙ ${line.text}`}</text>
-  if (line.kind === "file") return <text fg={theme.accent}>{`    ✎ ${line.text}`}</text>
-  if (line.kind === "code") return <text fg={theme.memory}>{`  ▸ ${line.text}`}</text>
-  if (line.kind === "user") {
+  if (line.kind === "tool" || line.kind === "file") {
+    // Calls in a row read as one block; a gap only before the first.
+    const [name, args] = callParts(line.text)
     return (
-      <box
-        border={["left"]}
-        borderColor={theme.accent}
-        customBorderChars={BAR}
-        style={{
-          backgroundColor: theme.panel,
-          paddingLeft: 2,
-          paddingTop: 1,
-          paddingBottom: 1,
-          marginTop: 1,
-          marginBottom: 1,
-          flexShrink: 0,
-        }}
-      >
-        <text fg={theme.text}>{line.text}</text>
-      </box>
+      <Marked mark={MARK.item} color={line.kind === "file" ? theme.accent : theme.ok} gap={!prev || !(prev.kind === "tool" || prev.kind === "file")}>
+        <text>
+          <span fg={theme.text}>
+            <strong>{name}</strong>
+          </span>
+          {args ? <span fg={theme.faint}>{` ${args}`}</span> : null}
+        </text>
+      </Marked>
     )
   }
-  if (line.kind === "timing") return <text fg={theme.warn}>{`  + ${line.text}`}</text>
-  if (line.kind === "memory") return <text fg={theme.memory}>{`  ↻ ${line.text}`}</text>
-  if (line.kind === "thought") return <text fg={theme.thought}>{`    ${line.text}`}</text>
-  if (line.kind === "ok") {
+  if (line.kind === "code" && PHASE.test(line.text)) {
     return (
+      <Marked mark={MARK.item} color={theme.memory} gap>
+        <text fg={theme.text}>
+          <strong>{line.text}</strong>
+        </text>
+      </Marked>
+    )
+  }
+  // Everything else is what came of the entry above it.
+  const first = !prev || isHead(prev)
+  const body =
+    line.kind === "ok" ? (
       <text>
-        <span fg={theme.ok}>{"  ✓ "}</span>
+        <span fg={theme.ok}>{"✓ "}</span>
         <span fg={theme.text}>{line.text}</span>
       </text>
-    )
-  }
-  if (line.kind === "err") {
-    return (
+    ) : line.kind === "err" ? (
       <text>
-        <span fg={theme.err}>{"  ✗ "}</span>
+        <span fg={theme.err}>{"✗ "}</span>
         <span fg={theme.text}>{line.text}</span>
       </text>
+    ) : line.kind === "thought" ? (
+      <text fg={theme.thought}>{line.text}</text>
+    ) : line.kind === "timing" ? (
+      <text fg={theme.faint}>{line.text}</text>
+    ) : line.kind === "code" ? (
+      <text fg={theme.memory}>{line.text}</text>
+    ) : line.kind === "memory" ? (
+      <text fg={theme.memory}>{`↻ ${line.text}`}</text>
+    ) : (
+      <text fg={theme.muted}>{line.text || " "}</text>
     )
-  }
-  return <text fg={theme.muted}>{`  ${line.text || " "}`}</text>
+  return <Under first={first}>{body}</Under>
 }