@capagents/forgeqe 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capagents/forgeqe",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "ForgeQE: a browser agent CLI that runs goals and test cases in Chrome and turns passing runs into tests in your repo",
   "license": "MIT",
   "type": "module",

package/src/code/runtime.ts

@@ -674,7 +674,8 @@ export async function openSession<R = AgentReport>(opts: {
           const line = toolLine(opts.repo, part.tool, input, part.state.title)
           const ok = part.state.status === "completed"
           const file = toolFile(opts.repo, part.tool, input)
-          emit({ type: "code", kind: "tool", ok, tool: part.tool, ...(file ? { file } : {}), text: ok ? line : `${line}: ${clip(toolError(String(part.state.error || "")) || "failed", 120)}` })
+          const skill = part.tool === "skill" && ok ? String(input.name || "") : ""
+          emit({ type: "code", kind: "tool", ok, tool: part.tool, ...(file ? { file } : {}), ...(skill ? { skill } : {}), text: ok ? line : `${line}: ${clip(toolError(String(part.state.error || "")) || "failed", 120)}` })
         } else if (part?.type === "text" && part.time?.end && assistant.has(part.messageID) && !said.has(part.id)) {
           said.add(part.id)
           const text = String(part.text || "").trim()

package/src/mcp/external.ts

@@ -15,6 +15,8 @@ export type ExternalServer = {
   config: Record<string, unknown>
   /** Values ForgeQE derives from its environment (e.g. base64 of email:token) for {env:} references in config. */
   secrets: Record<string, string>
+  /** How the server signs in, in a few words, for the shell and the agent: "PAT in ADO_PAT", "Azure CLI sign-in". */
+  signIn?: string
 }
 
 export type ExternalPlan = { servers: ExternalServer[]; skipped: { label: string; why: string }[] }
@@ -64,11 +66,16 @@ export function externalMcp(cfg: AppConfig, which: Which = Bun.which, env: NodeJ
     else if (!which("npx")) skipped.push({ label, why: "it needs Node.js (npx)" })
     else if (!auth) skipped.push({ label, why: `set ${ado.tokenEnv}, or sign in with az login` })
     else {
+      const signIn = auth === "pat" ? `PAT in ${ado.tokenEnv}` : "Azure CLI sign-in"
       servers.push({
         name: "azure_devops",
         label,
+        signIn,
         about:
           `Microsoft's Azure DevOps MCP server: organization ${org}${ado.project ? `, project ${ado.project}` : ", every project"} (work items, boards, test plans, pipelines, repos, wiki pages, search across code, wikis and work items, security alerts). ` +
+          (auth === "pat"
+            ? `It signs in with the personal access token in ${ado.tokenEnv}. `
+            : `${ado.tokenEnv} is not set, so it signs in as the Azure CLI's account (az login). When it answers TF400813 or "not authorized", that account has no access to ${org}: say so, and that setting ${ado.tokenEnv} (in .env, or /auth azure_devops with a token) or adding that account to the organization fixes it. `) +
           "Always pass project to its tools that take one: without it the server asks the client to pick a project, which this session cannot answer, so the call fails. " +
           "Its wiki tools only work in a wiki that exists and cannot create one; write wiki pages with ForgeQE's write_ado_wiki_page, which creates the project wiki when there is none. " +
           (ado.project

package/src/tui/App.tsx

@@ -28,6 +28,29 @@ import { emptyProduced, Line, Produced, producedCard, TestsSetting, TranscriptLi
 import { Dialog, dialogSpec } from "./dialogs.ts"
 import { activityFromLog, clip, hostOf, modelLabel } from "./text.ts"
 import { featuresText } from "../capabilities/render.ts"
+import { CAPABILITIES } from "../capabilities/registry.ts"
+import { CONTEXT_LIMIT } from "../code/runtime.ts"
+import { readKnowledge } from "../knowledge.ts"
+import { externalMcp } from "../mcp/external.ts"
+import { meterSince } from "../usage.ts"
+import { ActivityPanel, ContextPanel, FilesPanel, PlanPanel, planRows, SessionPanel, StatusBar, TokensPanel, type ContextInfo, type SessionInfo } from "./inspector.tsx"
+import {
+  addSkill,
+  caseDone,
+  caseStarted,
+  newInspector,
+  newRequest,
+  paneFor,
+  progressDone,
+  setContext,
+  setPlan,
+  setWho,
+  startProgress,
+  stepOutcome,
+  stepStarted,
+  useFile,
+  type Pane,
+} from "./session.ts"
 
 export type TuiOptions = {
   configPath?: string
@@ -54,11 +77,14 @@ export type TuiOptions = {
 }
 
 const VERSION = packageVersion()
+/** Narrower than this, the split view's right pane would not fit: one pane, and ctrl+o switches. */
+export const SPLIT_MIN = 120
 
 export function App({ options }: { options: TuiOptions }) {
   const renderer = useRenderer()
   const { width, height } = useTerminalDimensions()
   const scrollRef = useRef<ScrollBoxRenderable>(null)
+  const activityScroll = useRef<ScrollBoxRenderable>(null)
   const submitRef = useRef<(value: string) => void>(() => {})
   const configRef = useRef<AppConfig | null>(null)
   const abortRef = useRef<AbortController | null>(null)
@@ -79,6 +105,19 @@ export function App({ options }: { options: TuiOptions }) {
   const testsRef = useRef<TestsSetting>({ on: false, why: "" })
   const codingRef = useRef(false)
   const codeRunDir = useRef("")
+  /** The right pane's live state: plan, steps or cases, files, context. */
+  const inspRef = useRef(newInspector())
+  /** Set while a typed line is handled, so the shell's answers to it go to the chat. */
+  const answeringRef = useRef(false)
+  const [, setRev] = useState(0)
+  const bump = () => setRev((n) => n + 1)
+  /** Usage since the shell opened, for the session's token and cost totals. */
+  const sessionMeter = useRef(meterSnapshot())
+  const sessionStarted = useRef<number | undefined>(undefined)
+  const requests = useRef(0)
+  /** Under 120 columns there is room for one pane: ctrl+o switches between the chat and the details. */
+  const [narrowView, setNarrowView] = useState<"chat" | "details">("chat")
+  const contextInfo = useRef<{ key: string; knowledge: number; mcp: string[] }>({ key: "", knowledge: 0, mcp: [] })
 
   const [lines, setLines] = useState<Line[]>([])
   const [headed, setHeaded] = useState(Boolean(options.headed))
@@ -123,15 +162,29 @@ export function App({ options }: { options: TuiOptions }) {
   choiceRef.current = choice
   thinkingRef.current = thinking
 
-  const push = (kind: Line["kind"], text: string) => {
+  /** Lines go to the chat, or while a request runs and they are not results, to the activity pane; `pane` overrides that. */
+  const push = (kind: Line["kind"], text: string, pane?: Pane) => {
     const parts = kind === "user" || kind === "reply" ? [text] : text.split("\n")
+    const where = pane || (answeringRef.current ? "chat" : paneFor(kind, abortRef.current !== null))
     setLines((prev) => {
       const next = [...prev]
-      for (const part of parts) next.push({ id: idRef.current++, kind, text: part })
-      return next.slice(-300)
+      for (const part of parts) next.push({ id: idRef.current++, kind, text: part, pane: where })
+      return next.slice(-600)
     })
   }
-  const pushLine = (line: Omit<Line, "id">) => setLines((prev) => [...prev, { ...line, id: idRef.current++ }].slice(-300))
+  const pushLine = (line: Omit<Line, "id">) =>
+    setLines((prev) => [...prev, { ...line, pane: line.pane || paneFor(line.kind, abortRef.current !== null), id: idRef.current++ }].slice(-600))
+  /** What an agent's event tells the right pane: a file it used, a skill it loaded, its plan, how full its context is. */
+  const inspect = (e: CodeEvent) => {
+    const s = inspRef.current
+    if (e.kind === "tool") {
+      if (e.file) useFile(s, e.file)
+      if (e.skill) addSkill(s, e.skill)
+    } else if (e.kind === "plan") setPlan(s, e.items)
+    else if (e.kind === "usage") setContext(s, e.context || 0)
+    else return
+    bump()
+  }
   /** An agent's tool call; files it writes or edits (the test script) stand out from reads and searches. */
   const pushTool = (text: string, ok: boolean) => push(!ok ? "err" : /^(Writing|Editing) /.test(text) ? "file" : "tool", text)
   const pushProduced = () => {
@@ -374,7 +427,8 @@ export function App({ options }: { options: TuiOptions }) {
       return
     }
     if (key.name === "tab" && !key.shift) cycleProfile()
-    if (key.name === "p" && key.ctrl) push("sys", HELP)
+    if (key.name === "p" && key.ctrl) push("sys", HELP, "chat")
+    if (key.name === "o" && key.ctrl && width < SPLIT_MIN) setNarrowView((v) => (v === "chat" ? "details" : "chat"))
     if (key.name === "escape" && abortRef.current) openDialog("stop")
   })
 
@@ -396,6 +450,9 @@ export function App({ options }: { options: TuiOptions }) {
         replayingRef.current = false
         setStep(0)
         setBrowsing(true)
+        startProgress(inspRef.current, `Browser · ${clip(e.goal, 40)}`)
+        setWho(inspRef.current, "Browser agent")
+        bump()
         if (agent) push("code", `Browser: ${clip(e.goal, 110)}`)
         if (!aborted()) setActivity(cfg?.llm.provider === "mock" ? "Running the offline demo…" : "Starting the browser…")
         return
@@ -417,6 +474,10 @@ export function App({ options }: { options: TuiOptions }) {
           if (shows(event, detailRef.current)) push(event.level === "error" ? "err" : "sys", event.text)
           if (!aborted()) setActivity(activityFromLog(event.text))
         }
+        if (event.type === "thought") {
+          stepStarted(inspRef.current, `Step ${event.step} · ${clip(event.text.replace(/\s+/g, " "), 90)}${replayingRef.current ? " (memory)" : ""}`)
+          bump()
+        }
         if (event.type === "thought" && !replayingRef.current) {
           if (shows(event, detailRef.current)) push("thought", stepIntent(event.step, event.text, detailRef.current))
           if (!aborted()) setActivity(`Acting in the browser (step ${stepRef.current})…`)
@@ -425,7 +486,13 @@ export function App({ options }: { options: TuiOptions }) {
           markRef.current = Date.now()
           if (!aborted()) setActivity(replayingRef.current ? "Replaying from memory…" : `Thinking about step ${stepRef.current + 1}…`)
         }
-        if (event.type === "outcome") push(event.ok ? "ok" : "err", briefText(event.text, detailRef.current))
+        if (event.type === "outcome") {
+          push(event.ok ? "ok" : "err", briefText(event.text, detailRef.current))
+          // The action itself, without the result after a colon or the locator in brackets: "click "Search"".
+          const action = event.text.split(/: | {2}\[/)[0]!.trim()
+          stepOutcome(inspRef.current, event.ok, event.ok ? undefined : clip(event.text, 80), clip(action, 60))
+          bump()
+        }
         return
       }
       case "run-done": {
@@ -450,17 +517,25 @@ export function App({ options }: { options: TuiOptions }) {
         producedRef.current.runs.push({ runDir: e.runDir, status: r?.status || "fail", files: e.files })
         setLastStats(summary.stats)
         setBrowsing(false)
+        progressDone(inspRef.current, aborted())
+        setWho(inspRef.current, codingRef.current ? "Scribe" : "ForgeQE's agent")
+        bump()
         if (agent && !aborted()) setActivity("The agent is reading the result…")
         return
       }
       case "suite-start":
         push("sys", `${e.cases.length} test case${e.cases.length === 1 ? "" : "s"}${e.parallel > 1 ? `, ${e.parallel} at a time` : ""}`)
         setSuiteProgress({ done: 0, total: e.cases.length })
+        startProgress(inspRef.current, `${e.cases.length} test case${e.cases.length === 1 ? "" : "s"}`)
+        bump()
         return
       case "suite-event": {
         const s = e.event
         const tag = (id: string) => ((configRef.current?.suite.parallel || 1) > 1 ? `[${id}] ` : "")
         if (s.type === "case-start") {
+          caseStarted(inspRef.current, s.case.id, s.case.title)
+          setWho(inspRef.current, "Browser agent")
+          bump()
           push("code", `${s.index + 1}/${s.total}  ${s.case.id}  ${s.case.title}`)
           // What was read from the test management system: where the case lives and the steps the browser will follow.
           const steps = s.case.steps
@@ -476,6 +551,8 @@ export function App({ options }: { options: TuiOptions }) {
         } else if (s.type === "case-done") {
           setSuiteProgress((p) => (p ? { ...p, done: p.done + 1 } : p))
           const r = s.result
+          caseDone(inspRef.current, r.case.id, r.status, r.failure ? FAILURE_LABEL[r.failure.type] : undefined)
+          bump()
           push(r.status === "passed" ? "ok" : "err", `${r.case.id} ${r.status} in ${formatDuration(r.ms)}${r.failure ? ` · ${FAILURE_LABEL[r.failure.type]}` : ""}`)
           if (r.failure) push("sys", `  ${tag(r.case.id)}${clip(r.failure.reason, 200)} Next: ${FAILURE_ACTION[r.failure.type]}.`)
           // Each step of the case with its verdict, and what the page showed for a step that did not pass.
@@ -508,6 +585,8 @@ export function App({ options }: { options: TuiOptions }) {
         return
       case "agent": {
         const ev = e.event
+        inspect(ev)
+        if (ev.kind === "plan") return
         if (ev.kind === "usage") useTokens(`agent-tool-${runIndex.current}`, ev.usage.input + ev.usage.output)
         // Hidden lines (reads, searches, the agent's narration) still show on the activity line below.
         else if (shows(ev, detailRef.current)) {
@@ -527,6 +606,8 @@ export function App({ options }: { options: TuiOptions }) {
         codingRef.current = true
         codeRunDir.current = e.runDir
         setCoding(true)
+        setWho(inspRef.current, "Scribe")
+        bump()
         const show = shortPath
         pushLine({
           kind: "card",
@@ -550,6 +631,8 @@ export function App({ options }: { options: TuiOptions }) {
       case "code-done":
         codingRef.current = false
         setCoding(false)
+        setWho(inspRef.current, "ForgeQE's agent")
+        bump()
         producedRef.current.tests.push({ runDir: codeRunDir.current, result: e.result, error: e.error })
         if (e.error) push("err", `Coding agent: ${e.error}`)
         if (agent && !aborted()) setActivity("The agent is reading the result…")
@@ -561,6 +644,8 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const onBrainEvent = (e: CodeEvent) => {
+    inspect(e)
+    if (e.kind === "plan") return
     if (e.kind === "usage") {
       useTokens("agent", e.usage.input + e.usage.output)
       return
@@ -600,6 +685,10 @@ export function App({ options }: { options: TuiOptions }) {
     started.current = Date.now()
     usedRef.current = new Map()
     producedRef.current = emptyProduced()
+    newRequest(inspRef.current)
+    requests.current++
+    sessionStarted.current ??= Date.now()
+    bump()
     setTokens(0)
     setStatus("running")
     setActivity(activityText)
@@ -607,6 +696,8 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const finish = (finalStatus: string) => {
+    progressDone(inspRef.current, finalStatus === "stopped")
+    bump()
     setStatus(finalStatus)
     setActivity("")
     setThinking(false)
@@ -671,21 +762,21 @@ export function App({ options }: { options: TuiOptions }) {
       controller.signal.removeEventListener("abort", onAbort)
       if (answer.outcome !== "stopped") convoRef.current.push({ user: text, reply: answer.reply })
       if (answer.outcome === "stopped") {
-        push("sys", "Stopped.")
+        push("sys", "Stopped.", "chat")
         finalStatus = "stopped"
       } else {
         if (answer.reply) pushLine({ kind: "reply", text: answer.reply, outcome: answer.outcome })
-        if (answer.error && !answer.reply) push("err", answer.error)
+        if (answer.error && !answer.reply) push("err", answer.error, "chat")
         finalStatus = answer.outcome === "done" ? "done" : answer.outcome === "needs_input" ? "idle" : "fail"
       }
     } catch (err) {
-      push("err", (err as Error).message)
+      push("err", (err as Error).message, "chat")
       closeBrain()
     } finally {
       pushProduced()
       // What this request used and cost in total: ForgeQE's agent, browser runs, Scribe, and the reviewer.
       const spent = requestLine(meterStart)
-      if (spent) push("sys", spent)
+      if (spent) push("sys", spent, "chat")
       finish(finalStatus)
     }
   }
@@ -737,6 +828,15 @@ export function App({ options }: { options: TuiOptions }) {
   }, [])
 
   const onSubmit = (value: string) => {
+    // What a command answers (/help, /skills, "busy") is for the chat, even while a request runs.
+    answeringRef.current = true
+    try {
+      submit(value)
+    } finally {
+      answeringRef.current = false
+    }
+  }
+  const submit = (value: string) => {
     const text = value.replace(/\t/g, "").trim()
     setInputKey((k) => k + 1)
     const pending = entryRef.current
@@ -748,8 +848,10 @@ export function App({ options }: { options: TuiOptions }) {
       return
     }
     if (!text) return
+    // Setup notes come before the request, so they do not read as its answer; the split view shows them in its session panel.
+    const notes = priceNotesRef.current.splice(0)
+    if (width < SPLIT_MIN) for (const w of notes) push("sys", `Price check: ${w}`, "chat")
     push("user", text)
-    for (const w of priceNotesRef.current.splice(0)) push("sys", `Price check: ${w}`)
     const cmd = parseCommand(text)
     if (cmd.type === "help") {
       push("sys", HELP)
@@ -864,17 +966,24 @@ export function App({ options }: { options: TuiOptions }) {
 
   const closeHint: Hint = { key: "ctrl+c", label: "close", onPress: () => openDialog("quit") }
   const copiedHint: Hint[] = copied ? [{ key: `✓ ${copied}`, label: "" }] : []
+  // The split view's right pane shows tokens, time, and the last result, so the hints under the prompt leave them out.
+  const wide = width >= SPLIT_MIN
+  const viewHint: Hint[] = wide ? [] : [{ key: "ctrl+o", label: "details", onPress: () => setNarrowView("details") }]
+  // While running, the row also holds the spinner and esc stop: below 95 columns the view hint does not fit beside them.
+  const runningViewHint: Hint[] = width >= 95 ? viewHint : []
   const idleHints: Hint[] = [
     ...copiedHint,
-    ...(lastStats ? [{ key: `last run ${lastStats}`, label: "" }] : []),
+    ...(lastStats && !wide ? [{ key: `last run ${lastStats}`, label: "" }] : []),
+    ...viewHint,
     { key: "tab", label: "profiles" },
     { key: "ctrl+p", label: "commands" },
     closeHint,
   ]
   const runningHints: Hint[] = [
     ...copiedHint,
-    { key: `${formatTokens(tokens)} tokens · ${elapsed}`, label: "" },
-    { key: "ctrl+p", label: "commands" },
+    ...(wide ? [] : [{ key: `${formatTokens(tokens)} tokens · ${elapsed}`, label: "" }, ...runningViewHint]),
+    // Beside the 40% pane's spinner and esc stop, only close fits from 120 columns.
+    ...(wide ? [] : [{ key: "ctrl+p", label: "commands" }]),
     closeHint,
   ]
   const runningLeft = (
@@ -920,6 +1029,7 @@ export function App({ options }: { options: TuiOptions }) {
           model={model}
           right={right}
           rightColor={rightColor}
+          compact={width >= SPLIT_MIN && !home}
         />
         <Hints width={promptWidth} items={running ? runningHints : idleHints} left={running ? runningLeft : undefined} />
       </>
@@ -946,37 +1056,131 @@ export function App({ options }: { options: TuiOptions }) {
     )
   }
 
+  // What the split view shows about the session and the request in progress.
+  const cfgNow = configRef.current
+  const insp = inspRef.current
+  const spent = meterSince(sessionMeter.current)
+  const contextKey = cfgNow ? `${cfgNow.configPath}|${cfgNow.activeProfile}|${cfgNow.knowledge?.dir}` : ""
+  if (cfgNow && contextInfo.current.key !== contextKey) {
+    let mcp: string[] = []
+    try {
+      // "Azure DevOps (az login)": which account a server works as decides what it may see, so the panel says it.
+      mcp = externalMcp(cfgNow).servers.map((x) => (x.signIn ? `${x.label.replace(/ MCP$/, "")} (${x.signIn.startsWith("PAT") ? "PAT" : "az login"})` : x.label))
+    } catch {}
+    contextInfo.current = { key: contextKey, knowledge: readKnowledge(cfgNow.knowledge?.dir).length, mcp }
+  }
+  const llm = cfgNow?.llm
+  const sessionInfo: SessionInfo = {
+    profile,
+    model: model || (cfgNow ? modelLabel(cfgNow) : ""),
+    auth: !llm ? "–" : llm.auth === "entra" ? "Entra ID, no key" : llm.apiKeyEnv ? `API key in ${llm.apiKeyEnv}` : llm.provider === "mock" ? "offline demo" : llm.provider,
+    cwd: shortCwd(),
+    tests: testsRef.current.on ? "written to this folder" : requests.current ? `not written (${testsRef.current.why || "off"})` : "set on the first request",
+    browser: `${headed ? "visible" : "headless"} · up to ${maxSteps} steps${options.url ? ` · ${hostOf(options.url)}` : ""}`,
+    ...(cfgNow?.domain ? { domain: `${cfgNow.domain.industry}${cfgNow.domain.regulations.length ? ` (${cfgNow.domain.regulations.join(", ")})` : ""}` } : {}),
+    ...(llm?.priceWarning && llm.price ? { price: `${llm.price.input}/${llm.price.output} ${llm.price.currency} per M in/out from llms.json, not the list price` } : {}),
+    started: sessionStarted.current,
+    requests: requests.current,
+    total: spent.roles.length ? { usage: spent.total, cost: spent.cost } : undefined,
+  }
+  const contextPanel: ContextInfo = {
+    tokens: insp.context,
+    limit: CONTEXT_LIMIT,
+    skills: insp.skills,
+    knowledge: contextInfo.current.knowledge,
+    ...(cfgNow?.domain ? { domain: cfgNow.domain.industry } : {}),
+    mcp: contextInfo.current.mcp,
+    capabilities: CAPABILITIES.length,
+  }
+  const placeholder = running
+    ? coding
+      ? "The coding agent is writing a test · esc to stop"
+      : `${thinking ? "ForgeQE's agent" : "The browser agent"} is working · esc to stop`
+    : "Ask ForgeQE: a goal, test cases, a test, a pipeline…"
+  const chatLines = lines.filter((l) => l.pane !== "activity")
+  const activityLines = lines.filter((l) => l.pane === "activity")
+  const stop = () => openDialog("stop")
+
+  /**
+   * The right pane: the status bar, then bordered panels for the plan, the activity, and files, context, and tokens.
+   * Rows are counted, not left to flex: the activity gets what the others leave, so nothing is pushed off screen.
+   */
+  const details = (paneWidth: number, rowsAvailable: number) => {
+    const bottom = 6 + 2 // the context panel's six rows, and the border
+    const plan = planRows(insp, Math.max(3, Math.min(8, Math.floor(rowsAvailable / 5))))
+    const activityRows = Math.max(5, rowsAvailable - 2 - plan - bottom)
+    const third = Math.floor(paneWidth / 3)
+    return (
+      <box style={{ flexDirection: "column", width: paneWidth, height: rowsAvailable, flexShrink: 0 }}>
+        <StatusBar running={running} who={insp.who} activity={activity} elapsed={elapsed} status={status} width={paneWidth} onStop={stop} />
+        <box style={{ height: 1, flexShrink: 0 }} />
+        {plan ? <PlanPanel s={insp} width={paneWidth} height={plan} /> : null}
+        <ActivityPanel lines={activityLines} scrollRef={activityScroll} width={paneWidth} height={activityRows} />
+        <box style={{ flexDirection: "row", height: bottom, flexShrink: 0 }}>
+          <FilesPanel s={insp} width={third} height={bottom} />
+          <ContextPanel c={contextPanel} width={third} height={bottom} />
+          <TokensPanel roles={spent.roles} total={{ usage: spent.total, cost: spent.cost }} live={running ? tokens : 0} width={paneWidth - 2 * third} height={bottom} />
+        </box>
+      </box>
+    )
+  }
+
+  const transcript = (all: Line[], style: Record<string, unknown>) => (
+    <scrollbox ref={scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1, ...style }} focused={false}>
+      {all.map((line) => (
+        <TranscriptLine key={line.id} line={line} />
+      ))}
+      {running && !split ? (
+        <box style={{ flexDirection: "row", marginTop: 1, paddingLeft: 2, flexShrink: 0 }}>
+          <Spinner kind="dots" />
+          <text fg={theme.text}>{` ${activity || "Working…"}`}</text>
+        </box>
+      ) : null}
+    </scrollbox>
+  )
+  const controls = (paneWidth: number) => renderControls(paneWidth, placeholder, [3, Math.max(3, Math.min(10, Math.floor(height / 3)))])
+
+  const split = width >= SPLIT_MIN
+  if (split) {
+    const leftWidth = Math.floor(width * 0.4)
+    return (
+      <box style={{ flexDirection: "column", flexGrow: 1 }}>
+        <box style={{ flexDirection: "row", height: height - 1, flexShrink: 0, paddingTop: 1 }}>
+          <box style={{ flexDirection: "column", width: leftWidth, height: height - 2, paddingLeft: 2, paddingRight: 1 }}>
+            <SessionPanel info={sessionInfo} width={leftWidth - 3} />
+            {transcript(chatLines, {})}
+            <box style={{ flexDirection: "column", flexShrink: 0 }}>{controls(leftWidth - 3)}</box>
+          </box>
+          <box style={{ flexDirection: "column", width: width - leftWidth, height: height - 2, paddingLeft: 1, paddingRight: 2 }}>
+            {details(width - leftWidth - 3, height - 2)}
+          </box>
+        </box>
+        <Footer left={shortCwd()} right={footerRight} width={width} />
+      </box>
+    )
+  }
+
   const promptWidth = Math.max(40, width - 4)
+  if (narrowView === "details") {
+    return (
+      <box style={{ flexDirection: "column", flexGrow: 1 }}>
+        <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 2, paddingRight: 2, paddingTop: 1 }}>{details(promptWidth, height - 3 - (dialog ? 8 : 0))}</box>
+        <box style={{ flexDirection: "column", paddingLeft: 2, paddingRight: 2, flexShrink: 0 }}>
+          {dialog ? (
+            // Stop, a question, or "your turn": the same panel the chat view shows in place of the prompt.
+            controls(promptWidth)
+          ) : (
+            <Hints width={promptWidth} items={[{ key: "ctrl+o", label: "back to the chat", onPress: () => setNarrowView("chat") }, closeHint]} />
+          )}
+        </box>
+        <Footer left={shortCwd()} right={footerRight} width={width} />
+      </box>
+    )
+  }
   return (
     <box style={{ flexDirection: "column", flexGrow: 1 }}>
-      <scrollbox
-        ref={scrollRef}
-        stickyScroll
-        stickyStart="bottom"
-        style={{ flexGrow: 1, paddingLeft: 2, paddingRight: 2, paddingTop: 1 }}
-        focused={false}
-      >
-        {lines.map((line) => (
-          <TranscriptLine key={line.id} line={line} />
-        ))}
-        {running ? (
-          <box style={{ flexDirection: "row", marginTop: 1, paddingLeft: 2, flexShrink: 0 }}>
-            <Spinner kind="dots" />
-            <text fg={theme.text}>{` ${activity || "Working…"}`}</text>
-          </box>
-        ) : null}
-      </scrollbox>
-      <box style={{ flexDirection: "column", paddingLeft: 2, paddingRight: 2, flexShrink: 0 }}>
-        {renderControls(
-          promptWidth,
-          running
-            ? coding
-              ? "The coding agent is writing a test · esc to stop"
-              : `${thinking ? "ForgeQE's agent" : "The browser agent"} is working · esc to stop`
-            : "Ask ForgeQE: a goal, test cases, a test, a pipeline…",
-          [3, Math.max(3, Math.min(10, Math.floor(height / 3)))],
-        )}
-      </box>
+      {transcript(lines, { paddingLeft: 2, paddingRight: 2, paddingTop: 1 })}
+      <box style={{ flexDirection: "column", paddingLeft: 2, paddingRight: 2, flexShrink: 0 }}>{controls(promptWidth)}</box>
       <Footer left={shortCwd()} right={footerRight} width={width} />
     </box>
   )

package/src/tui/components.tsx

@@ -48,6 +48,8 @@ export type PromptProps = {
   rightColor?: string
   /** A secret being entered: the box shows one dot per character instead of a text field, so the value is never drawn. */
   masked?: number
+  /** Beside a session panel that names the model and profile, and a status bar: no bottom row. */
+  compact?: boolean
 }
 
 /** Enter sends; Shift+Enter, Alt+Enter or Ctrl+J start a new line. */
@@ -106,18 +108,20 @@ export function Prompt(props: PromptProps) {
             placeholderColor={theme.faint}
           />
         )}
-        <box style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 1 }}>
-          <text>
-            <span fg={theme.muted}>{"Model  "}</span>
-            <span fg={theme.text}>{props.model || "…"}</span>
-          </text>
-          <text>
-            {props.right ? <span fg={props.rightColor || theme.muted}>{props.right}</span> : null}
-            {props.right ? <span fg={theme.faint}>{"  ·  "}</span> : null}
-            <span fg={theme.muted}>{"profile "}</span>
-            <span fg={theme.text}>{props.profile || "none"}</span>
-          </text>
-        </box>
+        {props.compact ? null : (
+          <box style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 1 }}>
+            <text>
+              <span fg={theme.muted}>{"Model  "}</span>
+              <span fg={theme.text}>{props.model || "…"}</span>
+            </text>
+            <text>
+              {props.right ? <span fg={props.rightColor || theme.muted}>{props.right}</span> : null}
+              {props.right ? <span fg={theme.faint}>{"  ·  "}</span> : null}
+              <span fg={theme.muted}>{"profile "}</span>
+              <span fg={theme.text}>{props.profile || "none"}</span>
+            </text>
+          </box>
+        )}
       </box>
       <text>
         <span fg={props.modeColor}>{edge.slice(0, 1)}</span>

package/src/tui/inspector.tsx

@@ -0,0 +1,348 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import type { ReactNode, RefObject } from "react"
+
+import type { Usage } from "../types.ts"
+import { formatCost, type Cost, type Role } from "../usage.ts"
+import { Spinner } from "./components.tsx"
+import { filesByUse, type FileUse, type Inspector, type Progress } from "./session.ts"
+import { clip, tailCut } from "./text.ts"
+import { formatTokens, theme } from "./theme.ts"
+import type { Line } from "./transcript.tsx"
+
+/**
+ * The split view's panels. Each is a rounded box with its title in the border, in its section's colour from the
+ * shell's palette; status colours keep their meaning inside (ok done, warn running or attention, err failed).
+ */
+export const SECTION = {
+  session: theme.accent,
+  plan: theme.thought,
+  activity: theme.accent,
+  files: theme.memory,
+  context: theme.warn,
+  tokens: theme.ok,
+}
+
+const ROLE_COLOR: Record<Role, string> = {
+  "ForgeQE's agent": theme.accent,
+  "browser agent": theme.thought,
+  Scribe: theme.ok,
+  reviewer: theme.warn,
+  judge: theme.memory,
+}
+
+/** Rows a panel's border takes: top and bottom. */
+export const PANEL_CHROME = 2
+
+/** A titled, rounded panel; `width` and `height` include the border. */
+export function Panel(props: { title: string; color: string; width?: number; height?: number; children: ReactNode }) {
+  return (
+    <box
+      border
+      borderStyle="rounded"
+      borderColor={theme.border}
+      title={` ${props.title} `}
+      titleColor={props.color}
+      style={{
+        flexDirection: "column",
+        paddingLeft: 1,
+        paddingRight: 1,
+        flexShrink: 0,
+        ...(props.width !== undefined ? { width: props.width } : {}),
+        ...(props.height !== undefined ? { height: props.height } : {}),
+      }}
+    >
+      {props.children}
+    </box>
+  )
+}
+
+export type SessionInfo = {
+  profile: string
+  model: string
+  auth: string
+  cwd: string
+  tests: string
+  browser: string
+  domain?: string
+  /** The profile's price is set in llms.json and differs from the model's list price. */
+  price?: string
+  started?: number
+  requests: number
+  total?: { usage: Usage; cost?: Cost }
+}
+
+/** Rows SessionPanel takes, border included. */
+export function sessionRows(info: SessionInfo): number {
+  return 6 + (info.domain ? 1 : 0) + (info.price ? 1 : 0) + PANEL_CHROME
+}
+
+/** Top of the left pane: what this session runs with, and what it has used. */
+export function SessionPanel({ info, width }: { info: SessionInfo; width: number }) {
+  const room = Math.max(10, width - 14)
+  const row = (label: string, value: string, color: string = theme.text) => (
+    <text key={label}>
+      <span fg={theme.muted}>{label.padEnd(9)}</span>
+      <span fg={color}>{clip(value, room)}</span>
+    </text>
+  )
+  const started = info.started ? new Date(info.started) : null
+  const since = started ? ` · since ${String(started.getHours()).padStart(2, "0")}:${String(started.getMinutes()).padStart(2, "0")}` : ""
+  const used = info.total ? `${formatTokens(info.total.usage.input + info.total.usage.output)} tokens${info.total.cost ? ` · ${formatCost(info.total.cost)}` : ""}` : "nothing yet"
+  return (
+    <Panel title={`Session${since}`} color={SECTION.session} width={width}>
+      {row("Model", `${info.profile || "none"} · ${info.model || "…"}`)}
+      {row("Sign-in", info.auth, info.auth.startsWith("Entra") ? theme.ok : theme.text)}
+      {row("Folder", tailCut(info.cwd, room))}
+      {row("Tests", info.tests, info.tests.startsWith("written") ? theme.ok : theme.muted)}
+      {row("Browser", info.browser)}
+      {info.domain ? row("Domain", info.domain, theme.memory) : null}
+      {info.price ? row("Price", info.price, theme.warn) : null}
+      {row("Used", `${info.requests} request${info.requests === 1 ? "" : "s"} · ${used}`, theme.muted)}
+    </Panel>
+  )
+}
+
+/** The right pane's first line: who is working on what and for how long, and Stop while something runs. */
+export function StatusBar(props: { running: boolean; who: string; activity: string; elapsed: string; status: string; width: number; onStop: () => void }) {
+  const done = props.status === "done"
+  const failed = props.status === "fail"
+  const color = props.running ? theme.warn : done ? theme.ok : failed ? theme.err : theme.muted
+  const what = props.running
+    ? props.activity || "working…"
+    : done
+      ? "Last request done"
+      : failed
+        ? "Last request failed"
+        : props.status === "stopped"
+          ? "Last request stopped"
+          : "Ready for your next request"
+  const room = Math.max(10, props.width - props.who.length - (props.running ? 30 : 6))
+  return (
+    <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
+      <box style={{ flexDirection: "row" }}>
+        {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
+        <text>
+          {props.running ? <span fg={theme.text}>{` ${props.who}`}</span> : null}
+          <span fg={props.running ? theme.muted : color}>{`${props.running ? "  " : " "}${clip(what, room)}`}</span>
+        </text>
+      </box>
+      {props.running ? (
+        <box style={{ flexDirection: "row" }}>
+          <text fg={theme.faint}>{`${props.elapsed}  `}</text>
+          <box onMouseDown={props.onStop} style={{ paddingLeft: 1, paddingRight: 1, backgroundColor: theme.warn }}>
+            <text fg={theme.onButton}>{"■ Stop · esc"}</text>
+          </box>
+        </box>
+      ) : null}
+    </box>
+  )
+}
+
+const PLAN_MARK: Record<string, [string, string]> = {
+  completed: ["✓", theme.ok],
+  in_progress: ["◐", theme.warn],
+  pending: ["○", theme.faint],
+  cancelled: ["✗", theme.faint],
+}
+const PROGRESS_MARK: Record<Progress["status"], [string, string]> = {
+  ok: ["✓", theme.ok],
+  running: ["◐", theme.warn],
+  fail: ["✗", theme.err],
+  skipped: ["■", theme.faint],
+}
+
+type PlanLine = { mark: string; color: string; text: string; textColor: string }
+
+function planLines(s: Inspector): PlanLine[] {
+  const lines: PlanLine[] = []
+  for (const p of s.plan) {
+    const [mark, color] = PLAN_MARK[p.status] || PLAN_MARK.pending!
+    lines.push({ mark, color, text: p.text, textColor: p.status === "completed" || p.status === "cancelled" ? theme.muted : theme.text })
+  }
+  if (s.progress.items.length && s.plan.length) lines.push({ mark: "─", color: theme.border, text: s.progress.title, textColor: theme.faint })
+  for (const i of s.progress.items) {
+    const [mark, color] = PROGRESS_MARK[i.status]
+    lines.push({ mark, color, text: i.detail ? `${i.label} — ${i.detail}` : i.label, textColor: i.status === "fail" ? theme.err : i.status === "running" ? theme.text : theme.muted })
+  }
+  return lines
+}
+
+/** Rows the plan panel takes, border included; 0 while there is nothing to plan or follow. */
+export function planRows(s: Inspector, cap: number): number {
+  const n = planLines(s).length
+  return n ? Math.min(cap, n) + PANEL_CHROME : 0
+}
+
+/** The agent's to-do list, then the browser steps or suite cases; the latest that fit. */
+export function PlanPanel({ s, width, height }: { s: Inspector; width: number; height: number }) {
+  const lines = planLines(s)
+  const done = s.plan.filter((p) => p.status === "completed").length
+  const count = s.plan.length ? ` · ${done} of ${s.plan.length}` : s.progress.items.length ? ` · ${clip(s.progress.title, 40)}` : ""
+  const shown = lines.slice(-Math.max(1, height - PANEL_CHROME))
+  return (
+    <Panel title={`Plan${count}`} color={SECTION.plan} width={width} height={height}>
+      {shown.map((l, i) => (
+        <text key={i}>
+          <span fg={l.color}>{`${l.mark} `}</span>
+          <span fg={l.textColor}>{clip(l.text, Math.max(10, width - 8))}</span>
+        </text>
+      ))}
+    </Panel>
+  )
+}
+
+/** Each kind of activity line: its mark, the mark's colour, and the text's colour. */
+const ACTIVITY_STYLE: Record<string, [string, string, string]> = {
+  tool: ["⚙", theme.faint, theme.muted],
+  file: ["✎", theme.accent, theme.text],
+  code: ["▸", theme.memory, theme.memory],
+  timing: ["+", theme.warn, theme.warn],
+  memory: ["↻", theme.memory, theme.memory],
+  thought: [" ", theme.thought, theme.thought],
+  ok: ["✓", theme.ok, theme.text],
+  err: ["✗", theme.err, theme.text],
+}
+
+/** One activity line, its mark in a column of its own so wrapped text stays under the text. */
+export function ActivityRow({ line }: { line: Line }) {
+  const [mark, markColor, textColor] = ACTIVITY_STYLE[line.kind] || ["·", theme.faint, theme.muted]
+  return (
+    <box style={{ flexDirection: "row", flexShrink: 0 }}>
+      <text fg={markColor} style={{ width: 2, flexShrink: 0 }}>
+        {mark}
+      </text>
+      <text fg={textColor} style={{ flexGrow: 1, flexShrink: 1 }}>
+        {line.text || " "}
+      </text>
+    </box>
+  )
+}
+
+/** Everything the agents do, newest at the bottom. */
+export function ActivityPanel(props: { lines: Line[]; scrollRef: RefObject<ScrollBoxRenderable | null>; width: number; height: number }) {
+  return (
+    <Panel title={`Activity${props.lines.length ? ` · ${props.lines.length}` : ""}`} color={SECTION.activity} width={props.width} height={props.height}>
+      {props.lines.length ? (
+        <scrollbox ref={props.scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1 }} focused={false}>
+          {props.lines.map((line) => (
+            <ActivityRow key={line.id} line={line} />
+          ))}
+        </scrollbox>
+      ) : (
+        <box style={{ flexGrow: 1, justifyContent: "center", alignItems: "center" }}>
+          <text fg={theme.faint}>{clip("Tool calls, browser steps, and the agents' reasoning show here", Math.max(10, props.width - 4))}</text>
+        </box>
+      )}
+    </Panel>
+  )
+}
+
+const FILE_MARK: Record<FileUse["last"], [string, string]> = { read: ["◉", theme.accent], write: ["✚", theme.ok], edit: ["✎", theme.warn] }
+
+/** "PayBeneficiaryTests.cs  tests/Payments": the name first, its folder after it, dimmed. */
+function fileLabel(path: string, room: number): [string, string] {
+  const cut = path.lastIndexOf("/")
+  const name = cut < 0 ? path : path.slice(cut + 1)
+  const dir = cut < 0 ? "" : path.slice(0, cut)
+  if (name.length >= room - 2) return [clip(name, room), ""]
+  // A folder cut to a few characters says nothing: leave it out rather than show "…ts".
+  const space = room - name.length - 2
+  return [name, dir && (dir.length <= space || space >= 12) ? tailCut(dir, space) : ""]
+}
+
+export function FilesPanel({ s, width, height }: { s: Inspector; width: number; height: number }) {
+  const files = filesByUse(s)
+  const rows = height - PANEL_CHROME
+  const room = Math.max(8, width - 10)
+  const listed = files.length > rows ? files.slice(0, rows - 1) : files
+  return (
+    <Panel title={`Files${files.length ? ` · ${files.length}` : ""}`} color={SECTION.files} width={width} height={height}>
+      {files.length ? (
+        listed.map((f) => {
+          const [mark, color] = FILE_MARK[f.last]
+          const [name, dir] = fileLabel(f.path, room)
+          const times = f.reads + f.changes
+          return (
+            <text key={f.path}>
+              <span fg={color}>{`${mark} `}</span>
+              <span fg={f.changes ? theme.text : theme.muted}>{name}</span>
+              {dir ? <span fg={theme.faint}>{`  ${dir}`}</span> : null}
+              {times > 1 ? <span fg={theme.faint}>{` ×${times}`}</span> : null}
+            </text>
+          )
+        })
+      ) : (
+        <text fg={theme.faint}>{"None yet"}</text>
+      )}
+      {files.length > listed.length ? <text fg={theme.faint}>{`+${files.length - listed.length} more`}</text> : null}
+    </Panel>
+  )
+}
+
+export type ContextInfo = { tokens: number; limit: number; skills: string[]; knowledge: number; domain?: string; mcp: string[]; capabilities: number }
+
+/** How full the model's context window is, and what ForgeQE put into it. */
+export function ContextPanel({ c, width, height }: { c: ContextInfo; width: number; height: number }) {
+  const inner = Math.max(6, width - 4)
+  const share = c.limit ? Math.min(1, c.tokens / c.limit) : 0
+  const filled = Math.round(share * inner)
+  const color = share < 0.6 ? theme.ok : share < 0.85 ? theme.warn : theme.err
+  const room = Math.max(6, inner - 11)
+  const row = (label: string, value: string, valueColor: string = theme.text) => (
+    <text key={label}>
+      <span fg={theme.muted}>{label.padEnd(11)}</span>
+      <span fg={valueColor}>{clip(value, room)}</span>
+    </text>
+  )
+  return (
+    <Panel title={`Context · ${Math.round(share * 100)}%`} color={SECTION.context} width={width} height={height}>
+      <text>
+        <span fg={color}>{"█".repeat(filled)}</span>
+        <span fg={theme.border}>{"█".repeat(inner - filled)}</span>
+      </text>
+      <text fg={theme.muted}>{`${formatTokens(c.tokens)} of ${formatTokens(c.limit)} tokens`}</text>
+      {row("Skills", c.skills.length ? c.skills.join(", ") : "none loaded", c.skills.length ? theme.ok : theme.faint)}
+      {row("Knowledge", c.knowledge ? `${c.knowledge} product file${c.knowledge === 1 ? "" : "s"}` : "none", c.knowledge ? theme.text : theme.faint)}
+      {row("Domain", c.domain || "not declared", c.domain ? theme.memory : theme.faint)}
+      {row("MCP", c.mcp.length ? c.mcp.join(", ") : "none", c.mcp.length ? theme.text : theme.faint)}
+    </Panel>
+  )
+}
+
+export function TokensPanel(props: {
+  roles: { role: Role; usage: Usage; cost?: Cost }[]
+  total: { usage: Usage; cost?: Cost }
+  /** Tokens of the request in progress, counted as they stream; the roles above get them when each run ends. */
+  live?: number
+  width: number
+  height: number
+}) {
+  const { roles, total, width } = props
+  // The label takes what the token count (7) and, when priced, the cost (two spaces and up to 7) leave.
+  const priced = roles.some((r) => r.cost) || Boolean(total.cost)
+  const labelWidth = Math.max(6, width - 4 - 7 - (priced ? 9 : 0))
+  const line = (label: string, labelColor: string, u: Usage, c: Cost | undefined, valueColor: string = theme.text) => (
+    <text key={label}>
+      <span fg={labelColor}>{clip(label, labelWidth).padEnd(labelWidth)}</span>
+      <span fg={valueColor}>{formatTokens(u.input + u.output).padStart(7)}</span>
+      {c ? <span fg={theme.muted}>{`  ${formatCost(c)}`}</span> : null}
+    </text>
+  )
+  return (
+    <Panel title="Tokens" color={SECTION.tokens} width={width} height={props.height}>
+      {props.live ? (
+        <text>
+          <span fg={theme.warn}>{"This request".padEnd(labelWidth)}</span>
+          <span fg={theme.warn}>{formatTokens(props.live).padStart(7)}</span>
+        </text>
+      ) : null}
+      {roles.length ? roles.map((r) => line(r.role, ROLE_COLOR[r.role] || theme.text, r.usage, r.cost)) : props.live ? null : <text fg={theme.faint}>{"None used yet"}</text>}
+      {roles.length > 1 ? line("Total", theme.text, total.usage, total.cost, theme.ok) : null}
+      {roles.length ? (
+        <text fg={theme.faint}>
+          {clip(`in ${formatTokens(total.usage.input)} · out ${formatTokens(total.usage.output)}${total.usage.cached ? ` · ${formatTokens(total.usage.cached)} cached` : ""}`, Math.max(10, width - 4))}
+        </text>
+      ) : null}
+    </Panel>
+  )
+}

package/src/tui/session.ts

@@ -0,0 +1,123 @@
+import type { FileAction, PlanItem } from "../types.ts"
+
+/**
+ * What the shell's right-hand pane shows about the request in progress: the agent's plan, the browser steps or suite
+ * cases, the files the agents used, and what is in the model's context. Plain data, changed only through the
+ * functions below, so it is tested without a terminal.
+ */
+
+export type FileUse = { path: string; reads: number; changes: number; last: FileAction; order: number }
+
+export type Progress = { label: string; status: "running" | "ok" | "fail" | "skipped"; detail?: string; actions?: string[] }
+
+export type Who = "ForgeQE's agent" | "Browser agent" | "Scribe"
+
+export type Inspector = {
+  /** The agent's own to-do list. */
+  plan: PlanItem[]
+  /** The browser run's steps, or the suite's cases; `title` says which. */
+  progress: { title: string; items: Progress[] }
+  files: Map<string, FileUse>
+  /** Input tokens of the latest model call: how full its context window is. */
+  context: number
+  skills: string[]
+  who: Who
+  /** Counts file uses, so the most recent comes first. */
+  seq: number
+}
+
+export const MAX_PROGRESS = 200
+
+export function newInspector(): Inspector {
+  return { plan: [], progress: { title: "", items: [] }, files: new Map(), context: 0, skills: [], who: "ForgeQE's agent", seq: 0 }
+}
+
+/** A new request keeps the files, skills, and context of the session, and starts a fresh plan and progress. */
+export function newRequest(s: Inspector): void {
+  s.plan = []
+  s.progress = { title: "", items: [] }
+  s.who = "ForgeQE's agent"
+}
+
+export function setPlan(s: Inspector, items: PlanItem[]): void {
+  s.plan = items
+}
+
+export function useFile(s: Inspector, file: { path: string; action: FileAction }): void {
+  const was = s.files.get(file.path)
+  const reads = (was?.reads || 0) + (file.action === "read" ? 1 : 0)
+  const changes = (was?.changes || 0) + (file.action === "read" ? 0 : 1)
+  // Newest first: a file used again moves to the top.
+  s.files.set(file.path, { path: file.path, reads, changes, last: file.action, order: ++s.seq })
+}
+
+export function addSkill(s: Inspector, name: string): void {
+  if (name && !s.skills.includes(name)) s.skills.push(name)
+}
+
+export function setContext(s: Inspector, tokens: number): void {
+  if (tokens > 0) s.context = tokens
+}
+
+export function setWho(s: Inspector, who: Who): void {
+  s.who = who
+}
+
+export function startProgress(s: Inspector, title: string): void {
+  s.progress = { title, items: [] }
+}
+
+/** A browser step started (or a case): the previous running one, if any, counts as done. */
+export function stepStarted(s: Inspector, label: string): void {
+  for (const i of s.progress.items) if (i.status === "running") i.status = "ok"
+  s.progress.items.push({ label, status: "running" })
+  if (s.progress.items.length > MAX_PROGRESS) s.progress.items.splice(0, s.progress.items.length - MAX_PROGRESS)
+}
+
+/**
+ * An action of the running step: the step is then named by what it did ("Step 2 · click "Learn more""), which says
+ * more than the agent's reasoning. A failed action marks the step; a later success does not clear the failure.
+ */
+export function stepOutcome(s: Inspector, ok: boolean, detail?: string, action?: string): void {
+  const running = [...s.progress.items].reverse().find((i) => i.status === "running" || i.status === "fail")
+  if (!running) return
+  if (action) {
+    running.actions = [...(running.actions || []), action]
+    const step = /^Step \d+/.exec(running.label)?.[0]
+    if (step) running.label = `${step} · ${running.actions.slice(0, 2).join(", ")}${running.actions.length > 2 ? ` +${running.actions.length - 2}` : ""}`
+  }
+  if (!ok) {
+    running.status = "fail"
+    if (detail) running.detail = detail
+  }
+}
+
+/** Every step still running is over: done, or stopped when the run was. */
+export function progressDone(s: Inspector, stopped = false): void {
+  for (const i of s.progress.items) if (i.status === "running") i.status = stopped ? "skipped" : "ok"
+}
+
+export function caseStarted(s: Inspector, id: string, title: string): void {
+  s.progress.items.push({ label: `${id}  ${title}`, status: "running" })
+}
+
+export function caseDone(s: Inspector, id: string, status: "passed" | "failed" | "error" | "stopped", detail?: string): void {
+  const item = s.progress.items.find((i) => i.label.startsWith(`${id}  `) && i.status === "running")
+  if (!item) return
+  item.status = status === "passed" ? "ok" : status === "stopped" ? "skipped" : "fail"
+  if (detail) item.detail = detail
+}
+
+/** The files, most recently used first. */
+export function filesByUse(s: Inspector): FileUse[] {
+  return [...s.files.values()].sort((a, b) => b.order - a.order)
+}
+
+/** Which pane a transcript line belongs in: the conversation, or what the agents are doing. */
+export type Pane = "chat" | "activity"
+const CHAT_KINDS = new Set(["user", "reply", "card", "summary", "suitesummary"])
+
+/** Results and the conversation go to the chat; while a request runs, everything else is activity. */
+export function paneFor(kind: string, running: boolean): Pane {
+  return CHAT_KINDS.has(kind) || !running ? "chat" : "activity"
+}

package/src/tui/text.ts

@@ -7,6 +7,11 @@ export function clip(text: string, n = 72): string {
   return s.length <= n ? s : `${s.slice(0, n - 1)}…`
 }
 
+/** "…/pages/LoginPage.ts": a path cut from the start, since its end tells files apart. */
+export function tailCut(text: string, n: number): string {
+  return text.length <= n ? text : `…${text.slice(text.length - n + 1)}`
+}
+
 export function modelLabel(cfg: AppConfig): string {
   if (cfg.llm.provider === "none") return "none set up"
   if (cfg.llm.provider === "mock") return "offline"

package/src/tui/theme.ts

@@ -14,6 +14,8 @@ export const theme = {
   thought: "#a5b4fc",
   memory: "#c792ea",
   button: "#21262d",
+  /** Panel borders and empty gauge cells: visible on the background, quieter than any text. */
+  border: "#30363d",
   onButton: "#0d1117",
 }
 

package/src/tui/transcript.tsx

@@ -20,6 +20,8 @@ export type Line = {
   suite?: SuiteResult
   card?: Card
   outcome?: "done" | "failed" | "needs_input"
+  /** Which side of the split view shows it: the conversation, or what the agents are doing. */
+  pane?: "chat" | "activity"
 }
 
 /** What one request produced: browser runs with their files, suites, and the tests the coding agent wrote. */

package/src/types.ts

@@ -127,7 +127,7 @@ export type PlanItem = { text: string; status: "pending" | "in_progress" | "comp
 export type CodeEvent =
   | { type: "code"; kind: "info"; text: string }
   /** A finished tool call: `tool` is its name, and `file` the file it read or changed, relative to the repository. */
-  | { type: "code"; kind: "tool"; text: string; ok: boolean; tool?: string; file?: { path: string; action: FileAction } }
+  | { type: "code"; kind: "tool"; text: string; ok: boolean; tool?: string; file?: { path: string; action: FileAction }; skill?: string }
   | { type: "code"; kind: "say"; text: string }
   | { type: "code"; kind: "test"; text: string; ok: boolean; attempt: number }
   /** The session's usage so far; `context` is the last model call's input, how full its context window is. */