@capagents/forgeqe 1.1.5 → 1.1.7

package/src/tui/App.tsx

@@ -30,9 +30,9 @@ import { initWorkspace } from "../init.ts"
 import { ShortcutsPanel } from "./shortcuts.tsx"
 import { ago, getStarted, projectLine, setupSentence, type Fact, type GetStarted, recentWork, startActions, type RecentItem, type StartAction } from "./landing.ts"
 import { TIPS, formatDuration, formatTokens, packageVersion, shortCwd, theme } from "./theme.ts"
-import { emptyProduced, Line, Produced, producedCard, TestsSetting, TranscriptLine } from "./transcript.tsx"
+import { emptyProduced, Line, Produced, producedCard, settleCall, sinceRequest, TestsSetting, TranscriptLine, trimLines } from "./transcript.tsx"
 import { Dialog, dialogSpec } from "./dialogs.ts"
-import { activityFromLog, clip, hostOf, modelLabel } from "./text.ts"
+import { activityFromLog, clip, modelLabel } from "./text.ts"
 import { featuresText } from "../capabilities/render.ts"
 import { Palette, paletteItems, searchPalette, SuggestList, type PaletteItem } from "./palette.tsx"
 import { commandSuggestions, complete, lookupWorkItem, recentRuns, referenceSuggestions, repoFiles, triggerAt, type Suggestion, type WorkItem } from "./suggest.ts"
@@ -49,18 +49,19 @@ import {
   ActivityPanel,
   ContextPanel,
   FilesPanel,
+  InfoStrip,
+  nowNext,
   nextFocus,
   planLines,
   PlanPanel,
   planProgress,
   planRows,
-  SessionPanel,
+  STATUS_ROWS,
   StatusBar,
   TokensPanel,
   type ActivityFilter,
   type ContextInfo,
   type Focus,
-  type SessionInfo,
 } from "./inspector.tsx"
 import {
   addSkill,
@@ -123,6 +124,8 @@ export function App({ options }: { options: TuiOptions }) {
   widthRef.current = width
   const scrollRef = useRef<ScrollBoxRenderable>(null)
   const activityScroll = useRef<ScrollBoxRenderable>(null)
+  /** Refine's body, which scrolls when the refined request is longer than the screen has room for. */
+  const refineScroll = useRef<ScrollBoxRenderable>(null)
   const submitRef = useRef<(value: string) => void>(() => {})
   /** Refines what is in the prompt (phase two of the palette work wires it). */
   const refineRef = useRef<() => void>(() => {})
@@ -239,17 +242,33 @@ export function App({ options }: { options: TuiOptions }) {
   thinkingRef.current = thinking
 
   /** 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 push = (kind: Line["kind"], text: string, pane?: Pane, quiet?: boolean) => {
     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, pane: where })
-      return next.slice(-600)
+      for (const part of parts) next.push({ id: idRef.current++, kind, text: part, pane: where, ...(quiet ? { quiet } : {}) })
+      return trimLines(next)
     })
   }
-  const pushLine = (line: Omit<Line, "id">) =>
-    setLines((prev) => [...prev, { ...line, pane: line.pane || paneFor(line.kind, abortRef.current !== null), id: idRef.current++ }].slice(-600))
+  // The pane is decided when the event arrives: the updater runs later, when the request may already have finished.
+  const pushLine = (line: Omit<Line, "id">) => {
+    const next = { ...line, pane: line.pane || paneFor(line.kind, abortRef.current !== null), id: idRef.current++ }
+    setLines((prev) => trimLines([...prev, next]))
+  }
+  /**
+   * What the agents do always reaches the Activity panel; `shown` says whether the conversation shows it too at this
+   * detail level (/details). Hidden lines were dropped before, so the panel missed most of the agents' work.
+   */
+  const record = (kind: Line["kind"], text: string, shown: boolean) => push(kind, text, shown ? undefined : "activity", !shown)
+  /** A tool call started: one running line in Activity, which its result replaces. */
+  const startCall = (id: string, text: string) => pushLine({ kind: "running", text, pane: "activity", quiet: true, call: id })
+  /** A tool call finished: its running line becomes the result, shown in the conversation too when `shown`. */
+  const endCall = (id: string | undefined, kind: Line["kind"], text: string, shown: boolean) => {
+    const line = { kind, text, pane: shown ? paneFor(kind, abortRef.current !== null) : ("activity" as const), quiet: !shown }
+    const n = idRef.current++
+    setLines((prev) => trimLines(settleCall(prev, id, line, n)))
+  }
   /** 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
@@ -261,8 +280,14 @@ export function App({ options }: { options: TuiOptions }) {
     else return
     bump()
   }
+  /** What the agent is on between calls: the plan's task in progress, rather than a bare "working". */
+  const nowWorking = () => {
+    const task = inspRef.current.plan.find((p) => p.status === "in_progress")
+    return task ? `Working on: ${clip(task.text, 70)}` : "The agent is deciding what to do next…"
+  }
   /** 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 toolKind = (text: string, ok: boolean): Line["kind"] => (!ok ? "err" : /^(Writing|Editing) /.test(text) ? "file" : "tool")
+  const pushTool = (text: string, ok: boolean, id?: string, shown = true) => endCall(id, toolKind(text, ok), text, shown)
   /** A short note in the hint row that clears itself: "opened report.html". */
   const flashTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   const flash = (text: string) => {
@@ -419,7 +444,7 @@ export function App({ options }: { options: TuiOptions }) {
       reloadAfterAuth()
       return
     }
-    const controller = begin("Signing in…")
+    const controller = begin("Signing in…", system ? `Sign in to ${system}` : "Sign in")
     controller.signal.addEventListener("abort", () => settleEntry(null), { once: true })
     let finalStatus = "fail"
     try {
@@ -646,6 +671,9 @@ export function App({ options }: { options: TuiOptions }) {
         }
       } else if (r.phase === "error") {
         if (key.name === "escape" || key.name === "return" || key.name === "enter") setRefine(null)
+      } else if (key.name === "up" || key.name === "down" || key.name === "pageup" || key.name === "pagedown") {
+        const page = Math.max(3, Math.floor(height / 3))
+        refineScroll.current?.scrollBy(key.name === "up" ? -1 : key.name === "down" ? 1 : key.name === "pageup" ? -page : page)
       } else if (key.name === "left" || (key.name === "tab" && key.shift)) setRefine({ ...r, choice: (r.choice + REFINE_CHOICES.length - 1) % REFINE_CHOICES.length })
       else if (key.name === "right" || key.name === "tab") setRefine({ ...r, choice: (r.choice + 1) % REFINE_CHOICES.length })
       else if (key.name === "return" || key.name === "enter" || key.name === "kpenter") chooseRefine(REFINE_CHOICES[r.choice]!.id)
@@ -684,7 +712,9 @@ export function App({ options }: { options: TuiOptions }) {
     const panes = (width >= SPLIT_MIN && !chatWide) || (width < SPLIT_MIN && narrowView === "details")
     const insp = inspRef.current
     const panelsOpen = width >= SPLIT_MIN && !chatWide
-    const shown = (f: Focus) => f === "activity" || f === "files" || (f === "plan" && planLines(insp).length > 0) || (f === "chat" && panelsOpen)
+    // Files takes the keys only where it is a panel: a narrow column shows it as a line of the info strip.
+    const filesPanel = (panelsOpen ? Math.floor(width / 2) - 3 : width - 4) >= 80
+    const shown = (f: Focus) => f === "activity" || (f === "files" && filesPanel) || (f === "plan" && planLines(insp).length > 0) || (f === "chat" && panelsOpen)
     if (panes && key.name === "tab" && key.shift && !entryRef.current) {
       // Consumed here: the prompt can take focus within this key press and must not also act on it.
       key.preventDefault()
@@ -729,6 +759,13 @@ export function App({ options }: { options: TuiOptions }) {
       if (!key.ctrl && !key.meta && key.sequence && key.sequence.length === 1 && key.sequence > " " && panelsOpen) return setNav((n) => ({ ...n, focus: "chat" }))
       if (!key.ctrl && !key.meta) return
     }
+    // pgup and pgdn scroll the conversation from the prompt, as the wheel does; pgdn at the end follows new lines again.
+    if ((key.name === "pageup" || key.name === "pagedown") && !shortcutsRef.current && !entryRef.current?.secret) {
+      key.preventDefault()
+      const page = Math.max(3, height - 10)
+      scrollRef.current?.scrollBy(key.name === "pageup" ? -page : page)
+      return
+    }
     // ? on an empty prompt: every key in one panel; esc or ? closes it.
     if (shortcutsRef.current) {
       if (key.name === "escape" || key.sequence === "?") setShortcuts(false)
@@ -809,11 +846,12 @@ export function App({ options }: { options: TuiOptions }) {
           else if (!aborted()) setActivity(`Replaying step ${event.step} from memory…`)
         }
         if (event.type === "memory") {
-          if (shows(event, detailRef.current)) push("memory", event.text)
+          record("memory", event.text, shows(event, detailRef.current))
           markRef.current = Date.now()
         }
         if (event.type === "usage") useTokens(`run-${runIndex.current}`, event.usage.input + event.usage.output)
         if (event.type === "log") {
+          // Engine info logs stay in the session log: they would bury the steps in the panel.
           if (shows(event, detailRef.current)) push(event.level === "error" ? "err" : "sys", event.text)
           if (!aborted()) setActivity(activityFromLog(event.text))
         }
@@ -909,6 +947,7 @@ export function App({ options }: { options: TuiOptions }) {
           if (ev.type === "usage") useTokens(`case-${s.index}`, ev.usage.input + ev.usage.output)
           else if (!shows(ev, detailRef.current)) {
             if (ev.type === "log" && !aborted()) setActivity(`${p}${activityFromLog(ev.text)}`)
+            else if (ev.type === "memory") record("memory", p + ev.text, false)
           } else if (ev.type === "log") push(ev.level === "error" ? "err" : "sys", p + ev.text)
           else if (ev.type === "memory") push("memory", p + ev.text)
           else if (ev.type === "thought") push("thought", p + stepIntent(ev.step, ev.text, detailRef.current))
@@ -928,25 +967,32 @@ export function App({ options }: { options: TuiOptions }) {
       case "info":
         push(e.ok === undefined ? "code" : e.ok ? "ok" : "err", e.text)
         return
+      case "call-start":
+        startCall(e.id, e.text)
+        if (!aborted()) setActivity(`Agent: ${clip(e.text, 60)}…`)
+        return
       case "call":
-        pushTool(e.text, e.ok)
-        if (!aborted()) setActivity(`Agent: ${clip(e.text, 60)}`)
+        pushTool(e.text, e.ok, e.id, !e.quiet)
+        if (!aborted()) setActivity(nowWorking())
         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)) {
-          if (ev.kind === "info") push("code", ev.text)
-          else if (ev.kind === "say") push("thought", ev.text)
-          else if (ev.kind === "tool") pushTool(ev.text, ev.ok)
-          else if (ev.kind === "test") push(ev.ok ? "ok" : "err", ev.text)
+        else {
+          // Every line reaches Activity; the conversation keeps the ones this detail level shows.
+          const shown = shows(ev, detailRef.current)
+          if (ev.kind === "start") startCall(ev.id, ev.text)
+          else if (ev.kind === "info") record("code", ev.text, shown)
+          else if (ev.kind === "say") record("thought", ev.text, shown)
+          else if (ev.kind === "tool") pushTool(ev.text, ev.ok, ev.id, shown)
+          else if (ev.kind === "test") record(ev.ok ? "ok" : "err", ev.text, shown)
         }
         if (aborted()) return
         const who = codingRef.current ? "Coding agent" : "Agent"
-        if (ev.kind === "tool") setActivity(`${who}: ${clip(ev.text, 60)}`)
+        if (ev.kind === "start") setActivity(`${who}: ${clip(ev.text, 60)}…`)
+        else if (ev.kind === "tool") setActivity(`${who}: ${clip(ev.text, 60)}`)
         else if (ev.kind === "info" && ev.text.startsWith("ForgeQE runs the test")) setActivity("ForgeQE is running the new test…")
         else if (ev.kind === "say") setActivity(`${who} is working…`)
         return
@@ -991,6 +1037,9 @@ export function App({ options }: { options: TuiOptions }) {
         return
       case "report":
         producedRef.current.reports.push({ title: e.title, html: e.html })
+        // What the report wrote is a file the request made: it is in Files with the rest.
+        for (const f of [e.markdown, e.html]) useFile(inspRef.current, { path: path.relative(process.cwd(), f) || f, action: "write" })
+        bump()
         return
     }
   }
@@ -1003,17 +1052,16 @@ export function App({ options }: { options: TuiOptions }) {
       return
     }
     // ForgeQE's own agent: its tool calls (Azure DevOps and other MCP servers, commands) and what it says between them,
-    // one line each in brief; only its file reads and searches are left to /details.
-    if (e.kind === "tool" && showsAgentTool(e.text, e.ok, detailRef.current)) pushTool(e.text, e.ok)
+    // one line each in brief in the conversation; its file reads and searches only in Activity, or with /details.
+    const shown = shows(e, detailRef.current)
+    if (e.kind === "start") startCall(e.id, e.text)
+    else if (e.kind === "tool") pushTool(e.text, e.ok, e.id, showsAgentTool(e.text, e.ok, detailRef.current))
     else if (e.kind === "say") push("thought", briefText(e.text, detailRef.current, 200))
-    else if (shows(e, detailRef.current)) {
-      if (e.kind === "info") push("code", e.text)
-      if (e.kind === "tool") pushTool(e.text, e.ok)
-      if (e.kind === "test") push(e.ok ? "ok" : "err", e.text)
-    }
+    else if (e.kind === "info") record("code", e.text, shown)
+    else if (e.kind === "test") record(e.ok ? "ok" : "err", e.text, shown)
     if (abortRef.current?.signal.aborted) return
-    if (e.kind === "tool") setActivity(`Agent: ${clip(e.text, 60)}`)
-    else if (e.kind === "say") setActivity("The agent is working…")
+    if (e.kind === "start") setActivity(`Agent: ${clip(e.text, 60)}…`)
+    else if (e.kind === "tool" || e.kind === "say") setActivity(nowWorking())
   }
 
   const toolContext = (agent: boolean, signal?: AbortSignal) => ({
@@ -1033,10 +1081,12 @@ export function App({ options }: { options: TuiOptions }) {
     ask,
   })
 
-  const begin = (activityText: string) => {
+  /** `request`: what was asked, which heads this request's lines in Activity so they are not read as the last one's. */
+  const begin = (activityText: string, request: string) => {
     const controller = new AbortController()
     abortRef.current = controller
     started.current = Date.now()
+    pushLine({ kind: "request", text: request.replace(/\s+/g, " ").trim(), pane: "activity", quiet: true, at: started.current })
     usedRef.current = new Map()
     producedRef.current = emptyProduced()
     newRequest(inspRef.current)
@@ -1050,6 +1100,16 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const finish = (finalStatus: string, followUps: FollowUp[] = []) => {
+    // A call the request ended inside of (stopped, or its result never came) is not left spinning in Activity; then the
+    // request's closing line says how it ended, how long it took, and how many activities it had.
+    const took = started.current != null ? formatDuration(Date.now() - started.current) : ""
+    const ended = (["done", "fail", "stopped", "idle"] as const).find((x) => x === finalStatus) || "fail"
+    const endId = idRef.current++
+    setLines((prev) => {
+      const settled = prev.some((l) => l.kind === "running") ? prev.map((l) => (l.kind === "running" ? { ...l, kind: "tool" as const, text: `${l.text} · ${finalStatus === "stopped" ? "stopped" : "no result"}` } : l)) : prev
+      const n = sinceRequest(settled)
+      return trimLines([...settled, { id: endId, kind: "requestEnd", text: `${took ? `in ${took} · ` : ""}${n} ${n === 1 ? "activity" : "activities"}`, pane: "activity", quiet: true, ended }])
+    })
     setNext(nextSteps(producedRef.current, { testsOn: testsRef.current.on, followUps }))
     progressDone(inspRef.current, finalStatus === "stopped")
     bump()
@@ -1073,7 +1133,7 @@ export function App({ options }: { options: TuiOptions }) {
       directNoted.current = true
       push("sys", `ForgeQE's agent is off (${why}), so the text runs as a browser goal.${why.includes("agent runtime") ? ` ${INSTALL_HINT}` : " Press Tab for a live profile."} /features lists what ForgeQE can do.`)
     }
-    const controller = begin(cfg.llm.provider === "mock" ? "Running the offline demo…" : "Starting…")
+    const controller = begin(cfg.llm.provider === "mock" ? "Running the offline demo…" : "Starting…", goal)
     testsRef.current = { on: false, why: why.includes("agent runtime") ? "the agent runtime Scribe needs is not installed" : "ForgeQE's agent is off in the offline profile" }
     let finalStatus = "fail"
     try {
@@ -1088,7 +1148,7 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const askAgent = async (text: string, cfg: AppConfig) => {
-    const controller = begin("Thinking…")
+    const controller = begin("Thinking…", text)
     const meterStart = meterSnapshot()
     setThinking(true)
     const setup = sessionSetup(cfg, options.repo)
@@ -1113,7 +1173,7 @@ export function App({ options }: { options: TuiOptions }) {
       const brain = brainRef.current
       const onAbort = () => void brain.abort()
       controller.signal.addEventListener("abort", onAbort, { once: true })
-      if (!controller.signal.aborted) setActivity("Thinking…")
+      if (!controller.signal.aborted) setActivity("Reading your request and deciding the first step…")
       const answer = await brain.ask(fresh ? carryOver(convoRef.current, text) : text)
       controller.signal.removeEventListener("abort", onAbort)
       if (answer.outcome !== "stopped") convoRef.current.push({ user: text, reply: answer.reply })
@@ -1347,29 +1407,21 @@ export function App({ options }: { options: TuiOptions }) {
   const running = status === "running"
   const elapsed = started.current != null ? formatDuration(Date.now() - started.current) : ""
   const modeColor = running ? theme.warn : status === "fail" ? theme.err : theme.accent
-  const right = running
-    ? suiteProgress
-      ? `case ${Math.min(suiteProgress.done + 1, suiteProgress.total)}/${suiteProgress.total}`
-      : browsing
-        ? step > maxSteps
-          ? `step ${step} (past ${maxSteps}, still progressing)`
-          : `step ${step}/${maxSteps}`
-        : coding
-          ? "coding agent"
-          : "agent"
-    : status === "done" || status === "fail" || status === "stopped"
-      ? status
-      : options.url
-        ? hostOf(options.url)
-        : headed
-          ? "headed"
-          : ""
-  const rightColor = running ? theme.warn : status === "done" ? theme.ok : status === "fail" ? theme.err : theme.muted
+  // What a running request has got to, for the line under the conversation: a suite's case or the browser's step.
+  const progressText = suiteProgress
+    ? `case ${Math.min(suiteProgress.done + 1, suiteProgress.total)}/${suiteProgress.total}`
+    : browsing
+      ? step > maxSteps
+        ? `step ${step}, past ${maxSteps}`
+        : `step ${step}/${maxSteps}`
+      : ""
   const footerVersion = VERSION ? `ForgeQE ${VERSION}` : "ForgeQE"
-  // In the conversation, the footer is the status line: the model, what the session used, and the version.
+  // The footer is the status line, the one place for the model and its profile (tab switches it), what the session
+  // used, and the version; the conversation's footer adds the folder on its left. Nothing above repeats them.
   const sessionTokens = meterSince(sessionMeter.current).total
   const usedTokens = sessionTokens.input + sessionTokens.output
-  const footerRight = lines.length ? [configRef.current ? modelLabel(configRef.current) : model, usedTokens ? `${formatTokens(usedTokens)} tokens` : "", footerVersion].filter(Boolean).join("  ·  ") : footerVersion
+  const modelText = configRef.current ? `${modelLabel(configRef.current)}${profile ? ` (${profile})` : ""}` : model
+  const footerRight = [modelText, usedTokens ? `${formatTokens(usedTokens)} tokens` : "", footerVersion].filter(Boolean).join("  ·  ")
   // Suggestions for what is being typed: "/" commands, "@" references (runs, files, an Azure DevOps item by id).
   const suggTrigger = triggerAt(promptText)
   const suggKey = suggTrigger ? `${suggTrigger.kind}${suggTrigger.token}` : ""
@@ -1435,12 +1487,15 @@ export function App({ options }: { options: TuiOptions }) {
     </box>
   )
 
-  const renderControls = (promptWidth: number, placeholder: string, rows: [number, number]) => {
+  /** The prompt and its row of buttons, or a panel in their place; `maxHeight` is the rows a panel may take. */
+  const renderControls = (promptWidth: number, placeholder: string, rows: [number, number], maxHeight: number) => {
     if (refining && !dialog) {
       return (
         <RefinePanel
           state={refining}
           width={promptWidth}
+          maxHeight={maxHeight}
+          scrollRef={refineScroll}
           onChoose={chooseRefine}
           onHover={(i) => refining.phase === "done" && setRefine({ ...refining, choice: i })}
         />
@@ -1460,6 +1515,7 @@ export function App({ options }: { options: TuiOptions }) {
           selected={Math.min(choice, spec.options.length - 1)}
           onChoose={choose}
           onHover={setChoice}
+          maxHeight={maxHeight}
         />
       )
     }
@@ -1513,11 +1569,6 @@ export function App({ options }: { options: TuiOptions }) {
           placeholder={entry ? `${entry.label}${entry.secret ? " (hidden as you type)" : ""}${entry.initial ? ` · Enter keeps ${entry.initial}` : ""} · esc cancels` : placeholder}
           masked={entry?.secret ? secretLength : undefined}
           modeColor={modeColor}
-          profile={profile}
-          model={model}
-          right={right}
-          rightColor={rightColor}
-          compact={!home}
           focused={!palette && !refining && (panelsOpen ? nav.focus === "chat" : wide || narrowView === "chat")}
           initialValue={draft}
           onText={(t) => {
@@ -1555,7 +1606,7 @@ export function App({ options }: { options: TuiOptions }) {
         start: startActions(cfgHome, 4, undefined, recent.some((r) => r.kind === "run")),
         recent,
         first: getStarted(cfgHome, items),
-        facts: projectLine(cfgHome, process.cwd(), { model: modelLabel(cfgHome), signIns }),
+        facts: projectLine(cfgHome, process.cwd(), { signIns }),
       }
     }
     const { items: setup, start, recent, first, facts } = setupRef.current
@@ -1575,10 +1626,12 @@ export function App({ options }: { options: TuiOptions }) {
     const startRows = loading ? 1 + 1 + 4 : offer.length ? 1 + 1 + offer.length : 0
     const recentRows = recent.length ? 1 + 1 + recent.length : 0
     const setupRows = loading || open.length ? 2 : 0
-    const fixed = 5 + 2 + 1 + 5 + 1 + 1 + 1 // logo, project line, gap, prompt chrome, buttons, footer, one row to spare
+    const fixed = 5 + 2 + 1 + 3 + 1 + 1 + 1 // logo, project line, gap, prompt border, buttons, footer, one row to spare
     const room = height - fixed
     const want = Math.max(5, Math.min(promptLines, room - 1))
-    let left = room - want
+    // Refine or a question in the prompt's place takes the room the sections would: they are for starting, not deciding.
+    const deciding = Boolean(refining || dialog)
+    let left = deciding ? 0 : room - want
     const showStart = startRows > 0 && left >= startRows
     if (showStart) left -= startRows
     const showRecent = recentRows > 0 && left >= recentRows
@@ -1608,7 +1661,7 @@ export function App({ options }: { options: TuiOptions }) {
           </box>
           <box style={{ height: 1, flexShrink: 0 }} />
           <box style={{ flexDirection: "column", width: promptWidth, flexShrink: 0 }}>
-            {renderControls(promptWidth, "Describe what you want to test…", [5, maxRows])}
+            {renderControls(promptWidth, "Describe what you want to test…", [5, maxRows], height - 5 - 2 - 1 - 1 - 1)}
             {showStart ? (
               <box style={{ flexDirection: "column", marginTop: 1, height: startRows - 1, flexShrink: 0 }}>
                 {heading(offerTitle)}
@@ -1695,14 +1748,6 @@ export function App({ options }: { options: TuiOptions }) {
     } catch {}
     contextInfo.current = { key: contextKey, knowledge: readKnowledge(cfgNow.knowledge?.dir).length, mcp }
   }
-  const llm = cfgNow?.llm
-  const sessionInfo: SessionInfo = {
-    model: cfgNow ? `${llm?.provider === "mock" ? "offline demo" : llm?.deployment || llm?.model || "none"}${profile ? ` (${profile})` : ""}` : "…",
-    cwd: shortCwd(),
-    ...(cfgNow?.domain ? { domain: `${cfgNow.domain.industry}${cfgNow.domain.regulations.length ? ` (${cfgNow.domain.regulations.join(", ")})` : ""}` } : {}),
-    started: sessionStarted.current,
-    requests: requests.current,
-  }
   const contextPanel: ContextInfo = {
     tokens: insp.context,
     limit: CONTEXT_LIMIT,
@@ -1721,22 +1766,38 @@ export function App({ options }: { options: TuiOptions }) {
   const activityLines = lines.filter((l) => l.pane === "activity")
   const stop = () => openDialog("stop")
 
+  // Files, context, and tokens as three panels where there is room for them, else as one line.
+  const INFO_PANELS_MIN = 80
+  const infoRows = (paneWidth: number) => (paneWidth >= INFO_PANELS_MIN ? 8 : 1)
+  const infoPanels = (paneWidth: number) => {
+    if (paneWidth < INFO_PANELS_MIN) return <InfoStrip s={insp} c={contextPanel} total={spent.total} width={paneWidth} />
+    const bottom = 8 // the context panel's six rows, and the border
+    const third = Math.floor(paneWidth / 3)
+    const sel = nav.focus === "files" ? Math.min(nav.files, Math.max(0, filesByUse(insp).length - 1)) : undefined
+    return (
+      <box style={{ flexDirection: "row", height: bottom, flexShrink: 0 }}>
+        <FilesPanel s={insp} width={third} height={bottom} selected={sel} onFocus={() => setNav((n) => ({ ...n, focus: "files" }))} onOpen={openFile} />
+        <ContextPanel c={contextPanel} width={third} height={bottom} />
+        <TokensPanel total={spent.total} width={paneWidth - 2 * third} height={bottom} />
+      </box>
+    )
+  }
+
   /**
-   * 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.
+   * The Activities column: who is working and on what, the agent's plan with each task's state, and every call, step,
+   * and note as it happens. Rows are counted, not left to flex: the activity gets what the plan leaves.
    */
-  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)
+  const activityColumn = (paneWidth: number, rowsAvailable: number) => {
+    const where = nowNext(insp)
+    const plan = planRows(insp, Math.max(3, Math.min(10, Math.floor(rowsAvailable / 4))))
+    const activityRows = Math.max(5, rowsAvailable - STATUS_ROWS - 1 - plan)
     const focusOn = (f: Focus) => () => setNav((n) => ({ ...n, focus: f }))
-    const sel = (f: "plan" | "files") => (nav.focus === f ? Math.min(nav[f], Math.max(0, (f === "plan" ? planLines(insp) : filesByUse(insp)).length - 1)) : undefined)
+    const sel = nav.focus === "plan" ? Math.min(nav.plan, Math.max(0, planLines(insp).length - 1)) : undefined
     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} progress={suiteProgress || planProgress(insp)} actions={paneButtons} />
         <box style={{ height: 1, flexShrink: 0 }} />
-        {plan ? <PlanPanel s={insp} width={paneWidth} height={plan} selected={sel("plan")} onFocus={focusOn("plan")} /> : null}
+        {plan ? <PlanPanel s={insp} width={paneWidth} height={plan} selected={sel} onFocus={focusOn("plan")} animate={running} /> : null}
         <ActivityPanel
           lines={activityLines}
           scrollRef={activityScroll}
@@ -1746,17 +1807,16 @@ export function App({ options }: { options: TuiOptions }) {
           focused={nav.focus === "activity"}
           onFocus={focusOn("activity")}
           onFilter={(filter) => setNav((n) => ({ ...n, filter, focus: "activity" }))}
+          now={running ? where : undefined}
         />
-        <box style={{ flexDirection: "row", height: bottom, flexShrink: 0 }}>
-          <FilesPanel s={insp} width={third} height={bottom} selected={sel("files")} onFocus={focusOn("files")} onOpen={openFile} />
-          <ContextPanel c={contextPanel} width={third} height={bottom} />
-          <TokensPanel total={spent.total} width={paneWidth - 2 * third} height={bottom} />
-        </box>
       </box>
     )
   }
 
-  const transcript = (all: Line[], style: Record<string, unknown>) => (
+  const transcript = (every: Line[], style: Record<string, unknown>) => {
+    // Quiet lines (reads, searches, calls in progress) are the Activity panel's; the conversation stays readable.
+    const all = every.filter((l) => !l.quiet)
+    return (
     <scrollbox ref={scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1, ...style }} focused={false}>
       {all.map((line, i) => (
         <TranscriptLine key={line.id} line={line} prev={all[i - 1]} />
@@ -1767,28 +1827,31 @@ export function App({ options }: { options: TuiOptions }) {
           <Spinner kind="dots" color={theme.memory} />
           <text>
             <span fg={theme.memory}>{` ${activity || "Working…"}`}</span>
-            <span fg={theme.faint}>{`  (${elapsed}${tokens ? ` · ${formatTokens(tokens)} tokens` : ""} · esc to interrupt)`}</span>
+            <span fg={theme.faint}>{`  (${[elapsed, progressText, tokens ? `${formatTokens(tokens)} tokens` : "", "esc to interrupt"].filter(Boolean).join(" · ")})`}</span>
           </text>
         </box>
       ) : null}
     </scrollbox>
-  )
+    )
+  }
   // A long request gets room: the box grows with the text up to nearly half the screen, then scrolls.
-  const controls = (paneWidth: number) => renderControls(paneWidth, placeholder, [3, Math.max(3, Math.floor(height * 0.45))])
+  // A panel in the prompt's place (Refine, a question) may take most of the screen, leaving the conversation a few rows.
+  const controls = (paneWidth: number) => renderControls(paneWidth, placeholder, [3, Math.max(3, Math.floor(height * 0.45))], Math.max(8, height - 8))
 
   const split = panelsOpen
   if (split) {
-    const leftWidth = Math.floor(width * 0.4)
+    // Half the width for the Activities column; the conversation, with files, context, and tokens above it, the other half.
+    const leftWidth = Math.floor(width / 2)
     return (
       <box style={{ flexDirection: "column", flexGrow: 1 }}>
         <box style={{ flexDirection: "row", height: height - 1, flexShrink: 0, paddingTop: 1 }}>
           <box onMouseDown={() => navRef.current.focus !== "chat" && setNav((n) => ({ ...n, focus: "chat" }))} style={{ flexDirection: "column", width: leftWidth, height: height - 2, paddingLeft: 2, paddingRight: 1 }}>
-            <SessionPanel info={sessionInfo} width={leftWidth - 3} />
+            {infoPanels(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)}
+            {activityColumn(width - leftWidth - 3, height - 2)}
           </box>
         </box>
         <Footer left={shortCwd()} right={footerRight} width={width} />
@@ -1801,7 +1864,10 @@ export function App({ options }: { options: TuiOptions }) {
   if (!wide && 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", flexGrow: 1, paddingLeft: 2, paddingRight: 2, paddingTop: 1 }}>
+          {activityColumn(promptWidth, height - 3 - (dialog ? 8 : 0) - infoRows(promptWidth))}
+          {infoPanels(promptWidth)}
+        </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.