@capagents/forgeqe 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capagents/forgeqe",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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/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

@@ -33,7 +33,7 @@ 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 { ActivityPanel, ContextPanel, FilesPanel, PlanPanel, planRows, SessionPanel, StatusBar, TokensPanel, type ContextInfo, type SessionInfo } from "./inspector.tsx"
 import {
   addSkill,
   caseDone,
@@ -83,6 +83,9 @@ export const SPLIT_MIN = 120
 export function App({ options }: { options: TuiOptions }) {
   const renderer = useRenderer()
   const { width, height } = useTerminalDimensions()
+  /** The terminal's width when a request ends (callbacks outlive the render they were made in). */
+  const widthRef = useRef(width)
+  widthRef.current = width
   const scrollRef = useRef<ScrollBoxRenderable>(null)
   const activityScroll = useRef<ScrollBoxRenderable>(null)
   const submitRef = useRef<(value: string) => void>(() => {})
@@ -488,7 +491,9 @@ export function App({ options }: { options: TuiOptions }) {
         }
         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))
+          // 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
@@ -773,7 +778,8 @@ export function App({ options }: { options: TuiOptions }) {
     } finally {
       pushProduced()
       // What this request used and cost in total: ForgeQE's agent, browser runs, Scribe, and the reviewer.
-      const spent = requestLine(meterStart)
+      // The split view's session and tokens panels show this; only the one-pane view needs it in the chat.
+      const spent = widthRef.current < SPLIT_MIN ? requestLine(meterStart) : ""
       if (spent) push("sys", spent, "chat")
       finish(finalStatus)
     }
@@ -846,8 +852,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)
@@ -1060,22 +1068,18 @@ export function App({ options }: { options: TuiOptions }) {
   if (cfgNow && contextInfo.current.key !== contextKey) {
     let mcp: string[] = []
     try {
-      mcp = externalMcp(cfgNow).servers.map((x) => x.label)
+      // "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,
+    model: cfgNow ? `${llm?.provider === "mock" ? "offline demo" : llm?.deployment || llm?.model || "none"}${profile ? ` (${profile})` : ""}` : "…",
     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,
@@ -1096,28 +1100,24 @@ export function App({ options }: { options: TuiOptions }) {
   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.
+   * 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 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)
+    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 }}>
-        <WorkHeader running={running} who={insp.who} activity={activity} elapsed={elapsed} status={status} width={paneWidth} onStop={stop} />
+        <StatusBar 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} />
+        {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 total={spent.total} width={paneWidth - 2 * third} height={bottom} />
         </box>
       </box>
     )
@@ -1141,17 +1141,16 @@ export function App({ options }: { options: TuiOptions }) {
   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} />
+            <SessionPanel 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 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} />

package/src/tui/components.tsx

@@ -48,7 +48,7 @@ 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`. */
+  /** Beside a session panel that names the model and profile, and a status bar: no bottom row. */
   compact?: boolean
 }
 
@@ -108,20 +108,20 @@ export function Prompt(props: PromptProps) {
             placeholderColor={theme.faint}
           />
         )}
-        <box style={{ flexDirection: "row", justifyContent: props.compact ? "flex-end" : "space-between", marginTop: 1 }}>
-          {props.compact ? null : (
+        {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 && !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>
+            <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

@@ -1,15 +1,17 @@
 import type { ScrollBoxRenderable } from "@opentui/core"
-import type { RefObject } from "react"
+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 { TranscriptLine, type Line } from "./transcript.tsx"
+import 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. */
+/**
+ * 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,
@@ -19,85 +21,100 @@ export const SECTION = {
   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))
+/** 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 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
+      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
+  /** "gpt-5.4 (azure-gpt54)": the model, and the llms.json profile it comes from. */
   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)
+/** Rows SessionPanel takes, border included. */
+export function sessionRows(info: SessionInfo): number {
+  return 3 + (info.domain ? 1 : 0) + PANEL_CHROME
+}
+
+/** Top of the left pane: what the session works with, nothing more; tokens are in their own panel. */
+export function SessionPanel({ info, width }: { info: SessionInfo; width: number }) {
+  const room = Math.max(10, width - 15)
   const row = (label: string, value: string, color: string = theme.text) => (
     <text key={label}>
-      <span fg={theme.muted}>{label.padEnd(9)}</span>
+      <span fg={theme.muted}>{label.padEnd(10)}</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"
+  const since = started ? ` · since ${String(started.getHours()).padStart(2, "0")}:${String(started.getMinutes()).padStart(2, "0")}` : ""
   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)}
+    <Panel title={`Session${since}`} color={SECTION.session} width={width}>
+      {row("Model", info.model)}
       {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>
+      {row("Requests", String(info.requests), theme.muted)}
+    </Panel>
   )
 }
 
-/** 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}`
+/** 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 }}>
+    <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={statusColor}>{"●"}</text>}
+        {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
         <text>
-          <span fg={statusColor}>{` ${clip(label, Math.max(10, props.width - 26))}`}</span>
-          {props.elapsed ? <span fg={theme.faint}>{`  ${props.elapsed}`}</span> : null}
+          {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>
-      <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>
+      {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>
   )
 }
@@ -115,148 +132,179 @@ const PROGRESS_MARK: Record<Progress["status"], [string, string]> = {
   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 }[] = []
+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) {
-    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 })
-    }
+  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 right = s.plan.length ? `${done} of ${s.plan.length}` : s.progress.items.length ? s.progress.title : ""
-  const shown = lines.slice(-Math.max(1, rows))
+  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 (
-    <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>
-      )}
+    <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 ActivityLog(props: { lines: Line[]; scrollRef: RefObject<ScrollBoxRenderable | null>; height: number; width: number }) {
+export function ActivityPanel(props: { lines: Line[]; scrollRef: RefObject<ScrollBoxRenderable | null>; width: number; height: 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>
+    <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] }
+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 }) {
+/** "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 room = Math.max(8, width - 9)
+  const rows = height - PANEL_CHROME
+  const room = Math.max(8, width - 10)
+  const listed = files.length > rows ? files.slice(0, rows - 1) : files
   return (
-    <box style={{ flexDirection: "column", width, paddingRight: 1 }}>
-      <SectionTitle title="FILES" color={SECTION.files} right={files.length ? String(files.length) : ""} width={width} />
+    <Panel title={`Files${files.length ? ` · ${files.length}` : ""}`} color={SECTION.files} width={width} height={height}>
       {files.length ? (
-        files.slice(0, rows).map((f) => {
+        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}>{tailCut(f.path, room)}</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}>{"No files yet"}</text>
+        <text fg={theme.faint}>{"None 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>
+      {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 }: { c: ContextInfo; width: number }) {
-  const barWidth = Math.max(6, width - 16)
+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 * barWidth)
+  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, width - 12)
+  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(10)}</span>
+      <span fg={theme.muted}>{label.padEnd(11)}</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} />
+    <Panel title={`Context · ${Math.round(share * 100)}%`} color={SECTION.context} width={width} height={height}>
       <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>
+        <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)}
-      {row("Tools", `${c.capabilities} capabilities`, theme.muted)}
-    </box>
+    </Panel>
   )
 }
 
-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))
+/** What the session used, in tokens: the total and how it splits. Costs are left to reports and `forgeqe models`. */
+export function TokensPanel(props: { total: Usage; width: number; height: number }) {
+  const { total, width } = props
+  const line = (label: string, n: number, color: string = theme.text) => (
+    <text key={label}>
+      <span fg={theme.muted}>{label.padEnd(10)}</span>
+      <span fg={color}>{formatTokens(n).padStart(Math.max(7, Math.min(10, width - 14)))}</span>
+    </text>
+  )
   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>
+    <Panel title="Tokens" color={SECTION.tokens} width={width} height={props.height}>
+      {line("Total", total.input + total.output, theme.ok)}
+      {line("Input", total.input)}
+      {line("Output", total.output)}
+      {line("Cached", total.cached || 0, theme.muted)}
+    </Panel>
   )
 }
-

package/src/tui/session.ts

@@ -8,7 +8,7 @@ import type { FileAction, PlanItem } from "../types.ts"
 
 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 Progress = { label: string; status: "running" | "ok" | "fail" | "skipped"; detail?: string; actions?: string[] }
 
 export type Who = "ForgeQE's agent" | "Browser agent" | "Scribe"
 
@@ -74,10 +74,18 @@ export function stepStarted(s: Inspector, label: string): void {
   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 {
+/**
+ * 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

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