@capagents/forgeqe 1.0.9 → 1.1.0

package/src/tui/landing.ts

@@ -11,32 +11,84 @@ import { allStatuses, configuredSystems, SYSTEM_LABEL, type Probes, MACHINE } fr
  * in the folder, so it changes as the setup changes.
  */
 
-/** "C# · .NET solution · Playwright Test": what the folder's own files say it is built with. */
-export function projectStack(cwd: string): string[] {
-  let names: string[] = []
+/** Files a stack is read from, at the top and one or two folders down (tests/Shop.Tests/Shop.Tests.csproj). */
+function projectFiles(cwd: string, match: RegExp, depth = 2): string[] {
+  const out: string[] = []
+  const walk = (dir: string, level: number) => {
+    let names: string[] = []
+    try {
+      names = readdirSync(dir)
+    } catch {
+      return
+    }
+    for (const n of names) {
+      if (n.startsWith(".") || n === "node_modules" || n === "bin" || n === "obj") continue
+      const full = path.join(dir, n)
+      if (match.test(n)) out.push(full)
+      else if (level < depth) {
+        try {
+          if (statSync(full).isDirectory()) walk(full, level + 1)
+        } catch {}
+      }
+      if (out.length > 20) return
+    }
+  }
+  walk(cwd, 0)
+  return out
+}
+
+const read = (file: string) => {
   try {
-    names = readdirSync(cwd)
+    return readFileSync(file, "utf8")
   } catch {
-    return []
+    return ""
   }
-  const has = (re: RegExp) => names.some((n) => re.test(n))
-  const out: string[] = []
-  if (has(/^playwright\.config\.(ts|js|mjs|cjs)$/)) out.push("Playwright Test")
-  if (has(/^cypress\.config\.(ts|js|mjs|cjs)$/)) out.push("Cypress")
-  if (has(/\.sln$/) || has(/\.csproj$/)) out.push(".NET")
-  if (has(/^pom\.xml$/)) out.push("Maven")
-  if (has(/^build\.gradle(\.kts)?$/)) out.push("Gradle")
-  if (has(/^(pytest\.ini|conftest\.py)$/) || (has(/^pyproject\.toml$/) && !out.length)) out.push("Python")
-  if (has(/^package\.json$/) && !out.some((s) => s === "Playwright Test" || s === "Cypress")) out.push("Node")
-  return out.slice(0, 2)
 }
 
-/** The project line: folder, stack, the systems ForgeQE works with here, and the model. */
-export function projectLine(cfg: AppConfig | null, cwd: string, model: string): string[] {
-  const parts = [path.basename(cwd), ...projectStack(cwd)]
-  if (cfg) parts.push(...[...configuredSystems(cfg)].filter((s) => s !== "xray" || !configuredSystems(cfg).has("jira")).map((s) => SYSTEM_LABEL[s]))
-  if (model) parts.push(model)
-  return parts.filter(Boolean)
+/**
+ * "C# · NUnit · Playwright": the language, test framework, and browser library the project's own files declare
+ * (project files, package.json, Python requirements). Read from the files, never guessed from folder names.
+ */
+export function projectStack(cwd: string): string[] {
+  const csproj = projectFiles(cwd, /\.csproj$/).map(read).join("\n")
+  if (csproj) {
+    const framework = /PackageReference Include="NUnit"/i.test(csproj) ? "NUnit" : /PackageReference Include="xunit/i.test(csproj) ? "xUnit" : /PackageReference Include="MSTest/i.test(csproj) ? "MSTest" : ""
+    const browser = /Microsoft\.Playwright/i.test(csproj) ? "Playwright" : /Selenium\.WebDriver/i.test(csproj) ? "Selenium" : /Reqnroll|SpecFlow/i.test(csproj) ? "BDD" : ""
+    return ["C#", framework, browser].filter(Boolean)
+  }
+  const pkg = read(path.join(cwd, "package.json"))
+  if (pkg) {
+    const lang = existsSync(path.join(cwd, "tsconfig.json")) ? "TypeScript" : "JavaScript"
+    const runner = /"@playwright\/test"/.test(pkg) ? "Playwright Test" : /"cypress"/.test(pkg) ? "Cypress" : /"webdriverio"|"@wdio\//.test(pkg) ? "WebdriverIO" : /"vitest"/.test(pkg) ? "Vitest" : /"jest"/.test(pkg) ? "Jest" : ""
+    return [lang, runner].filter(Boolean)
+  }
+  const py = ["requirements.txt", "pyproject.toml", "setup.cfg"].map((f) => read(path.join(cwd, f))).join("\n")
+  if (py.trim() || existsSync(path.join(cwd, "pytest.ini")) || existsSync(path.join(cwd, "conftest.py"))) {
+    return ["Python", /pytest/i.test(py) || existsSync(path.join(cwd, "pytest.ini")) ? "pytest" : "", /playwright/i.test(py) ? "Playwright" : /selenium/i.test(py) ? "Selenium" : ""].filter(Boolean)
+  }
+  const java = [read(path.join(cwd, "pom.xml")), read(path.join(cwd, "build.gradle")), read(path.join(cwd, "build.gradle.kts"))].join("\n")
+  if (java.trim()) return ["Java", /junit-jupiter|junit/i.test(java) ? "JUnit" : /testng/i.test(java) ? "TestNG" : "", /playwright/i.test(java) ? "Playwright" : /selenium/i.test(java) ? "Selenium" : ""].filter(Boolean)
+  return []
+}
+
+export type Fact = { text: string; tone: "name" | "plain" | "warn" }
+
+/**
+ * The project line: the folder, its stack, each system ForgeQE works with here and how it is signed in ("Azure DevOps
+ * (PAT)"), and the model; or, where nothing is set up, that this folder has no forgeqe.yaml.
+ */
+export function projectLine(cfg: AppConfig | null, cwd: string, opts: { model: string; signIns?: Record<string, string> }): Fact[] {
+  const facts: Fact[] = [{ text: path.basename(cwd), tone: "name" }, ...projectStack(cwd).map((t) => ({ text: t, tone: "plain" as const }))]
+  if (!cfg) return facts
+  if (!cfg.configPath) return [...facts, { text: "no forgeqe.yaml here", tone: "warn" }]
+  const systems = [...configuredSystems(cfg)].filter((s) => s !== "xray" || !configuredSystems(cfg).has("jira"))
+  for (const s of systems) {
+    const how = opts.signIns?.[SYSTEM_LABEL[s]]
+    facts.push({ text: how ? `${SYSTEM_LABEL[s]} (${how})` : SYSTEM_LABEL[s], tone: "plain" })
+  }
+  const live = cfg.llm.provider !== "none" && cfg.llm.provider !== "mock"
+  facts.push(live && opts.model ? { text: opts.model, tone: "plain" } : { text: "no model", tone: "warn" })
+  return facts
 }
 
 const ALL_SYSTEMS = Object.values(SYSTEM_LABEL)
@@ -61,8 +113,9 @@ const START_LABEL: Record<string, string> = {
   "browser-goals": "Try a flow in the browser",
 }
 
-export function startActions(cfg: AppConfig | null, limit = 4, probes: Probes = MACHINE): StartAction[] {
-  if (!cfg) return []
+export function startActions(cfg: AppConfig | null, limit = 4, probes: Probes = MACHINE, hasRuns = true): StartAction[] {
+  // Without a live model nothing on the list can run: the start screen offers Get started instead.
+  if (!cfg || cfg.llm.provider === "none" || cfg.llm.provider === "mock") return []
   const statuses = allStatuses(cfg, probes)
   const systems = [...configuredSystems(cfg)].map((x) => SYSTEM_LABEL[x])
   const out: StartAction[] = []
@@ -70,9 +123,12 @@ export function startActions(cfg: AppConfig | null, limit = 4, probes: Probes =
     const c = CAPABILITIES.find((x) => x.id === id)
     if (!c || statuses.get(id)?.state === "needs_setup") continue
     // An example in the words of this setup: one that names a system that is set up, else one that names none.
-    const named = c.examples.find((e) => systems.some((n) => e.includes(n)))
-    const neutral = c.examples.find((e) => !ALL_SYSTEMS.some((n) => e.includes(n)))
-    const example = named || neutral || c.examples[0] || c.title
+    // Not an example that builds on a run when there is none to build on.
+    const usable = c.examples.filter((e) => hasRuns || !/\blast run\b|\bthe run\b|that run/i.test(e))
+    if (!usable.length) continue
+    const named = usable.find((e) => systems.some((n) => e.includes(n)))
+    const neutral = usable.find((e) => !ALL_SYSTEMS.some((n) => e.includes(n)))
+    const example = named || neutral || usable[0]!
     out.push({ id, label: START_LABEL[id] || c.title, detail: example, request: example })
     if (out.length === limit) break
   }
@@ -91,9 +147,11 @@ export function recentWork(outDir: string, limit = 3): RecentItem[] {
       if (!statSync(dir).isDirectory()) continue
       const when = statSync(dir).mtime
       if (existsSync(path.join(dir, "run.json"))) {
-        const run = JSON.parse(readFileSync(path.join(dir, "run.json"), "utf8")) as { goal?: string; status?: string }
+        // The engine writes success; ForgeQE's own records write status. Either says how the run ended.
+        const run = JSON.parse(readFileSync(path.join(dir, "run.json"), "utf8")) as { goal?: string; status?: string; success?: boolean }
         const report = path.join(dir, "report.html")
-        items.push({ kind: "run", title: String(run.goal || name), dir, open: existsSync(report) ? report : dir, when, status: run.status })
+        const status = run.status || (run.success === true ? "passed" : run.success === false ? "fail" : undefined)
+        items.push({ kind: "run", title: String(run.goal || name), dir, open: existsSync(report) ? report : dir, when, ...(status ? { status } : {}) })
       } else if (existsSync(path.join(dir, "report.md"))) {
         const first = readFileSync(path.join(dir, "report.md"), "utf8").split("\n")[0] || ""
         const html = path.join(dir, "report.html")
@@ -126,3 +184,18 @@ export function setupSentence(missing: string[], room: number): string {
   const named = `${listWords(missing)} ${missing.length === 1 ? "is" : "are"} not set up`
   return named.length <= room ? named : `${missing.length} ${missing.length === 1 ? "item is" : "items are"} not set up`
 }
+
+/** What to do first where little is set up: each step runs a command or says how, in the order they are needed. */
+export type GetStarted = { id: string; label: string; detail: string; command?: string; fix?: string }
+
+export function getStarted(cfg: AppConfig | null, setup: { id: string; done: boolean; fix?: string; command?: string }[]): GetStarted[] {
+  if (!cfg) return []
+  const out: GetStarted[] = []
+  if (!cfg.configPath) out.push({ id: "init", label: "Set up ForgeQE in this folder", detail: "writes forgeqe.yaml, llms.json, prompts, skills", command: "/init" })
+  const missing = (id: string) => setup.find((i) => i.id === id && !i.done)
+  const model = missing("model")
+  if (model) out.push({ id: "model", label: "Add a model", detail: "an API key or Microsoft Entra ID, in llms.json", fix: model.fix })
+  const system = missing("system")
+  if (system) out.push({ id: "system", label: "Sign in to Azure DevOps or Jira", detail: "test cases, stories, pipelines", command: "/auth" })
+  return out.slice(0, 4)
+}

package/src/tui/next.ts

@@ -26,7 +26,7 @@ export function nextSteps(p: Produced, opts: { testsOn: boolean; followUps?: Fol
     steps.push({ label: "Rerun the cases that failed", run: { kind: "insert", text: "Run the cases that failed in the last suite again" } })
   } else if (run) {
     const report = path.join(run.runDir, "report.html")
-    if (run.status === "complete" && !p.tests.some((t) => t.runDir === run.runDir)) steps.push({ label: "Write a test for this run", run: { kind: "insert", text: "Write a test for the last run" } })
+    if (opts.testsOn && run.status === "complete" && !p.tests.some((t) => t.runDir === run.runDir)) steps.push({ label: "Write a test for this run", run: { kind: "insert", text: "Write a test for the last run" } })
     if (run.status !== "complete") {
       steps.push({ label: "Why did it fail?", run: { kind: "insert", text: "Why did the last run fail, and what should change?" } })
       steps.push({ label: "Run it again, visible", run: { kind: "insert", text: "Run the last goal again in a visible browser" } })

package/src/tui/palette.tsx

@@ -34,6 +34,7 @@ export function paletteItems(opts: { running: boolean; headed: boolean; detailsF
   items.push({ id: "shortcuts", group: "Action", title: "Keyboard shortcuts", keys: "?", run: { kind: "action", id: "shortcuts" } })
   command("features", "What ForgeQE can do here", "/features", "and what each feature still needs")
   command("auth", "Sign in to a system", "/auth", "Azure DevOps, GitHub, Jira, Confluence, TestRail, Zephyr, qTest, Xray")
+  command("init", "Set up ForgeQE in this folder", "/init", "forgeqe.yaml, llms.json, prompts, skills, knowledge")
   command("auth-status", "What is signed in", "/auth status")
   command("headed", opts.headed ? "Hide the browser window" : "Show the browser window", `/headed ${opts.headed ? "off" : "on"}`)
   command("details", opts.detailsFull ? "Show progress only" : "Show everything the agents do", `/details ${opts.detailsFull ? "off" : "on"}`)

package/src/tui/refine-panel.tsx

@@ -18,9 +18,21 @@ export type RefineChoice = (typeof REFINE_CHOICES)[number]["id"]
 
 const COLOR = theme.memory
 
+/** A fact as written in context and in grounded, compared without case, spaces, or a closing full stop. */
+const norm = (s: string) => s.trim().replace(/\.$/, "").replace(/\s+/g, " ").toLowerCase()
+
+/** The choice the panel starts on: Edit while Refine still has a question, so an unclear request is not sent. */
+export function initialChoice(missing: string[]): number {
+  return REFINE_CHOICES.findIndex((c) => c.id === (missing.length ? "edit" : "use"))
+}
+
 export function RefinePanel(props: { state: RefineState; width: number; onChoose: (id: RefineChoice) => void; onHover: (i: number) => void }) {
   const { state, width } = props
   const title = state.phase === "working" ? " ✦ Refining " : state.phase === "error" ? " ✦ Could not refine " : " ✦ Refined request "
+  // Facts Refine checked that are also context lines are marked there, not repeated under Checked.
+  const contextLines = state.phase === "done" ? state.result.refined.split("\n").filter((l) => l.startsWith("- ")).map((l) => norm(l.slice(2))) : []
+  const inContext = new Set(contextLines)
+  const checked = new Set(state.phase === "done" ? state.result.grounded.filter((g) => g.checked).map((g) => norm(g.fact)).filter((f) => inContext.has(f)) : [])
   const section = (label: string, color: string, mark: string, items: string[]) =>
     items.length ? (
       <box style={{ flexDirection: "column", marginTop: 1 }}>
@@ -52,6 +64,15 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
             {/* The request as it is sent: its labelled parts (Goal, Context, Steps, Rules, Result) stand out. */}
             {state.result.refined.split("\n").map((line, i) => {
               const label = /^(Goal|Context|Steps|Rules|Result):/.exec(line)
+              // A context line Refine checked against the systems: ✓ in place of its dash, so it is not listed twice.
+              if (line.startsWith("- ") && checked.has(norm(line.slice(2)))) {
+                return (
+                  <text key={i}>
+                    <span fg={theme.ok}>{"✓ "}</span>
+                    <span fg={theme.text}>{line.slice(2)}</span>
+                  </text>
+                )
+              }
               return label ? (
                 <text key={i}>
                   <span fg={COLOR}>{label[0]}</span>
@@ -63,7 +84,7 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
                 </text>
               )
             })}
-            {section("Checked", theme.ok, "✓", state.result.grounded.filter((g) => g.checked).map((g) => g.fact))}
+            {section("Checked", theme.ok, "✓", state.result.grounded.filter((g) => g.checked && !inContext.has(norm(g.fact))).map((g) => g.fact))}
             {section("Assumed", theme.warn, "~", [...state.result.grounded.filter((g) => !g.checked).map((g) => g.fact), ...state.result.assumed])}
             {section("Missing — answer these in your request", theme.err, "?", state.result.missing)}
           </>
@@ -88,7 +109,7 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
           {state.phase === "done" ? (
             <>
               <span fg={theme.text}>{"enter"}</span>
-              <span fg={theme.muted}>{" use  "}</span>
+              <span fg={theme.muted}>{` ${REFINE_CHOICES[state.choice]!.id === "keep" ? "keep mine" : REFINE_CHOICES[state.choice]!.id}  `}</span>
               <span fg={theme.text}>{"e"}</span>
               <span fg={theme.muted}>{" edit  "}</span>
               <span fg={theme.text}>{"esc"}</span>

package/src/tui/shortcuts.tsx

@@ -17,7 +17,7 @@ export const SHORTCUTS: { group: string; keys: [string, string][] }[] = [
     keys: [
       ["ctrl+p", "search: actions, commands, profiles, examples"],
       ["shift+tab", "move between the chat and the plan, activity, and files panels"],
-      ["ctrl+o", "chat or details, on a narrow terminal"],
+      ["ctrl+o", "open or close the panels: plan, activity, files, context, tokens"],
       ["alt+1 to alt+4", "a start action, or a next step"],
     ],
   },

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>
 }