@capagents/forgeqe 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capagents/forgeqe",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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/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 { ActivityLog, ContextPanel, FilesPanel, PlanPanel, SessionBlock, TokensPanel, WorkHeader, 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,11 @@ 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))
+          stepOutcome(inspRef.current, event.ok, event.ok ? undefined : clip(event.text, 80))
+          bump()
+        }
         return
       }
       case "run-done": {
@@ -450,17 +515,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 +549,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 +583,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 +604,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 +629,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 +642,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 +683,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 +694,8 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const finish = (finalStatus: string) => {
+    progressDone(inspRef.current, finalStatus === "stopped")
+    bump()
     setStatus(finalStatus)
     setActivity("")
     setThinking(false)
@@ -671,21 +760,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 +826,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
@@ -864,17 +962,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 +1025,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 +1052,134 @@ 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 {
+      mcp = externalMcp(cfgNow).servers.map((x) => 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(", ")})` : ""}` } : {}),
+    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: who is working, the plan, the activity, and files, context, and tokens. Its rows are counted, not
+   * left to flex: the activity log gets what the fixed parts leave, so the bottom panels are never pushed off screen.
+   */
+  const details = (paneWidth: number, rowsAvailable: number) => {
+    const bottomRows = Math.max(6, Math.min(9, Math.floor(rowsAvailable / 4)))
+    const planCap = Math.max(3, Math.min(10, Math.floor(rowsAvailable / 4)))
+    const planLines = insp.plan.length + insp.progress.items.length + (insp.plan.length && insp.progress.items.length ? 1 : 0)
+    const planHeight = 1 + Math.max(1, Math.min(planCap, planLines))
+    // Header, a blank row, the plan, a blank row, the activity, a blank row, and the bottom panels with their title and legend.
+    const activityRows = Math.max(4, rowsAvailable - 1 - 1 - planHeight - 1 - 1 - (bottomRows + 2))
+    const third = Math.floor((paneWidth - 2) / 3)
+    return (
+      <box style={{ flexDirection: "column", width: paneWidth, height: rowsAvailable, flexShrink: 0 }}>
+        <WorkHeader running={running} who={insp.who} activity={activity} elapsed={elapsed} status={status} width={paneWidth} onStop={stop} />
+        <box style={{ height: 1, flexShrink: 0 }} />
+        <PlanPanel s={insp} width={paneWidth} rows={planCap} />
+        <box style={{ height: 1, flexShrink: 0 }} />
+        <ActivityLog lines={activityLines} scrollRef={activityScroll} height={activityRows} width={paneWidth} />
+        <box style={{ flexDirection: "row", height: bottomRows + 2, flexShrink: 0, marginTop: 1 }}>
+          <FilesPanel s={insp} width={third} rows={bottomRows - 1} />
+          <ContextPanel c={contextPanel} width={third} />
+          <TokensPanel roles={spent.roles} total={{ usage: spent.total, cost: spent.cost }} width={paneWidth - 2 * third} />
+        </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)
+    const rightWidth = width - leftWidth - 3
+    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 }}>
+            <SessionBlock info={sessionInfo} width={leftWidth - 3} />
+            {transcript(chatLines, {})}
+            <box style={{ flexDirection: "column", flexShrink: 0 }}>{controls(leftWidth - 3)}</box>
+          </box>
+          <box border={["left"]} borderColor={theme.button} style={{ flexDirection: "column", width: width - leftWidth, height: height - 2, paddingLeft: 1, paddingRight: 2 }}>
+            {details(rightWidth - 2, 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
+  /** Narrow pane beside a session panel that names the model and profile: the bottom row shows only `right`. */
+  compact?: boolean
 }
 
 /** Enter sends; Shift+Enter, Alt+Enter or Ctrl+J start a new line. */
@@ -106,16 +108,18 @@ 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>
+        <box style={{ flexDirection: "row", justifyContent: props.compact ? "flex-end" : "space-between", marginTop: 1 }}>
+          {props.compact ? null : (
+            <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>
+            {props.right && !props.compact ? <span fg={theme.faint}>{"  ·  "}</span> : null}
+            {props.compact ? null : <span fg={theme.muted}>{"profile "}</span>}
+            {props.compact ? null : <span fg={theme.text}>{props.profile || "none"}</span>}
           </text>
         </box>
       </box>

package/src/tui/inspector.tsx

@@ -0,0 +1,262 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import type { 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 { TranscriptLine, type Line } from "./transcript.tsx"
+
+/** Each section of the split view has its own colour from the shell's palette; status colours keep their meaning. */
+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,
+}
+
+export function SectionTitle({ title, color, right, width }: { title: string; color: string; right?: string; width?: number }) {
+  if (right && width) right = clip(right, Math.max(4, width - title.length - 3))
+  return (
+    <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0 }}>
+      <text>
+        <span fg={color}>{"▍"}</span>
+        <span fg={color}>{title}</span>
+      </text>
+      {right ? <text fg={theme.muted}>{right}</text> : null}
+    </box>
+  )
+}
+
+export type SessionInfo = {
+  profile: string
+  model: string
+  auth: string
+  cwd: string
+  tests: string
+  browser: string
+  domain?: string
+  started?: number
+  requests: number
+  total?: { usage: Usage; cost?: Cost }
+}
+
+/** Top of the left pane: what this session runs with, and what it has used. */
+export function SessionBlock({ info, width }: { info: SessionInfo; width: number }) {
+  const room = Math.max(10, width - 12)
+  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 clock = started ? `${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 (
+    <box style={{ flexDirection: "column", flexShrink: 0, paddingBottom: 1 }}>
+      <SectionTitle title="SESSION" color={SECTION.session} right={`started ${clock}`} 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}
+      {row("Used", `${info.requests} request${info.requests === 1 ? "" : "s"} · ${used}`, theme.muted)}
+    </box>
+  )
+}
+
+/** The right pane's top line: who is working on what, for how long, and the Stop button. */
+export function WorkHeader(props: { running: boolean; who: string; activity: string; elapsed: string; status: string; width: number; onStop: () => void }) {
+  const statusColor = props.running ? theme.warn : props.status === "done" ? theme.ok : props.status === "fail" ? theme.err : theme.muted
+  const label = props.running ? `${props.who} · ${props.activity || "working…"}` : props.status === "idle" ? "Waiting for your next request" : `Last request ${props.status}`
+  return (
+    <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0 }}>
+      <box style={{ flexDirection: "row" }}>
+        {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={statusColor}>{"●"}</text>}
+        <text>
+          <span fg={statusColor}>{` ${clip(label, Math.max(10, props.width - 26))}`}</span>
+          {props.elapsed ? <span fg={theme.faint}>{`  ${props.elapsed}`}</span> : null}
+        </text>
+      </box>
+      <box
+        onMouseDown={props.running ? props.onStop : undefined}
+        style={{ paddingLeft: 1, paddingRight: 1, backgroundColor: props.running ? theme.warn : theme.button }}
+      >
+        <text fg={props.running ? theme.onButton : theme.muted}>{"■ Stop"}</text>
+      </box>
+    </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],
+}
+
+/** The agent's to-do list, then the browser steps or suite cases; only the latest that fit in `rows`. */
+export function PlanPanel({ s, width, rows }: { s: Inspector; width: number; rows: number }) {
+  const lines: { mark: string; color: string; text: string; textColor: string }[] = []
+  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) {
+    if (s.plan.length) lines.push({ mark: " ", color: theme.faint, 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 })
+    }
+  }
+  const done = s.plan.filter((p) => p.status === "completed").length
+  const right = s.plan.length ? `${done} of ${s.plan.length}` : s.progress.items.length ? s.progress.title : ""
+  const shown = lines.slice(-Math.max(1, rows))
+  return (
+    <box style={{ flexDirection: "column", flexShrink: 0 }}>
+      <SectionTitle title="PLAN" color={SECTION.plan} right={right} width={width} />
+      {shown.length ? (
+        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 - 4))}</span>
+          </text>
+        ))
+      ) : (
+        <text fg={theme.faint}>{clip(" The agent's plan and each browser step or test case show here.", Math.max(10, width))}</text>
+      )}
+    </box>
+  )
+}
+
+/** Everything the agents do, newest at the bottom. */
+export function ActivityLog(props: { lines: Line[]; scrollRef: RefObject<ScrollBoxRenderable | null>; height: number; width: number }) {
+  return (
+    <box style={{ flexDirection: "column", height: props.height, flexShrink: 0 }}>
+      <SectionTitle title="ACTIVITY" color={SECTION.activity} right={props.lines.length ? `${props.lines.length} events` : ""} width={props.width} />
+      <scrollbox ref={props.scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1 }} focused={false}>
+        {props.lines.length ? (
+          props.lines.map((line) => <TranscriptLine key={line.id} line={line} />)
+        ) : (
+          <text fg={theme.faint}>{clip(" Tool calls, browser steps, and the agents' reasoning show here.", Math.max(10, props.width))}</text>
+        )}
+      </scrollbox>
+    </box>
+  )
+}
+
+const FILE_MARK: Record<FileUse["last"], [string, string]> = { read: ["◉", theme.accent], write: ["✎", theme.ok], edit: ["✎", theme.warn] }
+
+export function FilesPanel({ s, width, rows }: { s: Inspector; width: number; rows: number }) {
+  const files = filesByUse(s)
+  const room = Math.max(8, width - 9)
+  return (
+    <box style={{ flexDirection: "column", width, paddingRight: 1 }}>
+      <SectionTitle title="FILES" color={SECTION.files} right={files.length ? String(files.length) : ""} width={width} />
+      {files.length ? (
+        files.slice(0, rows).map((f) => {
+          const [mark, color] = FILE_MARK[f.last]
+          const times = f.reads + f.changes
+          return (
+            <text key={f.path}>
+              <span fg={color}>{`${mark} `}</span>
+              <span fg={f.changes ? theme.text : theme.muted}>{tailCut(f.path, room)}</span>
+              {times > 1 ? <span fg={theme.faint}>{` ×${times}`}</span> : null}
+            </text>
+          )
+        })
+      ) : (
+        <text fg={theme.faint}>{"No files yet"}</text>
+      )}
+      {files.length > rows ? <text fg={theme.faint}>{`and ${files.length - rows} more`}</text> : null}
+      {width < 22 ? null : <text>
+        <span fg={theme.accent}>{"◉"}</span>
+        <span fg={theme.faint}>{" read "}</span>
+        <span fg={theme.ok}>{"✎"}</span>
+        <span fg={theme.faint}>{" new "}</span>
+        <span fg={theme.warn}>{"✎"}</span>
+        <span fg={theme.faint}>{" edited"}</span>
+      </text>}
+    </box>
+  )
+}
+
+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 }: { c: ContextInfo; width: number }) {
+  const barWidth = Math.max(6, width - 16)
+  const share = c.limit ? Math.min(1, c.tokens / c.limit) : 0
+  const filled = Math.round(share * barWidth)
+  const color = share < 0.6 ? theme.ok : share < 0.85 ? theme.warn : theme.err
+  const room = Math.max(6, width - 12)
+  const row = (label: string, value: string, valueColor: string = theme.text) => (
+    <text key={label}>
+      <span fg={theme.muted}>{label.padEnd(10)}</span>
+      <span fg={valueColor}>{clip(value, room)}</span>
+    </text>
+  )
+  return (
+    <box style={{ flexDirection: "column", width, paddingRight: 1 }}>
+      <SectionTitle title="CONTEXT" color={SECTION.context} right={c.tokens ? `${Math.round(share * 100)}%` : ""} width={width} />
+      <text>
+        <span fg={color}>{"█".repeat(filled)}</span>
+        <span fg={theme.faint}>{"░".repeat(barWidth - filled)}</span>
+        <span fg={theme.muted}>{` ${formatTokens(c.tokens)}/${formatTokens(c.limit)}`}</span>
+      </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)}
+      {row("Tools", `${c.capabilities} capabilities`, theme.muted)}
+    </box>
+  )
+}
+
+export function TokensPanel({ roles, total, width }: { roles: { role: Role; usage: Usage; cost?: Cost }[]; total: { usage: Usage; cost?: Cost }; width: number }) {
+  const amount = (u: Usage, c?: Cost) => `${formatTokens(u.input + u.output).padStart(6)}${c ? `  ${formatCost(c)}` : ""}`
+  const labelWidth = Math.max(8, Math.min(16, width - 18))
+  return (
+    <box style={{ flexDirection: "column", width }}>
+      <SectionTitle title="TOKENS" color={SECTION.tokens} right={total.usage.cached ? `${formatTokens(total.usage.cached)} cached` : ""} />
+      {roles.length ? (
+        roles.map((r) => (
+          <text key={r.role}>
+            <span fg={ROLE_COLOR[r.role] || theme.text}>{clip(r.role, labelWidth).padEnd(labelWidth)}</span>
+            <span fg={theme.text}>{amount(r.usage, r.cost)}</span>
+          </text>
+        ))
+      ) : (
+        <text fg={theme.faint}>{"Nothing used yet"}</text>
+      )}
+      {roles.length > 1 ? (
+        <text>
+          <span fg={theme.muted}>{"Total".padEnd(labelWidth)}</span>
+          <span fg={theme.ok}>{amount(total.usage, total.cost)}</span>
+        </text>
+      ) : null}
+      <text fg={theme.faint}>{`in ${formatTokens(total.usage.input)} · out ${formatTokens(total.usage.output)}`}</text>
+    </box>
+  )
+}
+

package/src/tui/session.ts

@@ -0,0 +1,115 @@
+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 }
+
+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)
+}
+
+/** The outcome of the running step: a failed action marks it, a later success does not clear a failure. */
+export function stepOutcome(s: Inspector, ok: boolean, detail?: string): void {
+  const running = [...s.progress.items].reverse().find((i) => i.status === "running" || i.status === "fail")
+  if (!running) return
+  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/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. */