@capagents/forgeqe 1.1.5 → 1.1.6

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, 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) => {
@@ -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)
+        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
@@ -1003,17 +1049,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) => ({
@@ -1050,6 +1095,8 @@ 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.
+    setLines((prev) => (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))
     setNext(nextSteps(producedRef.current, { testsOn: testsRef.current.on, followUps }))
     progressDone(inspRef.current, finalStatus === "stopped")
     bump()
@@ -1113,7 +1160,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 +1394,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 +1474,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 +1502,7 @@ export function App({ options }: { options: TuiOptions }) {
           selected={Math.min(choice, spec.options.length - 1)}
           onChoose={choose}
           onHover={setChoice}
+          maxHeight={maxHeight}
         />
       )
     }
@@ -1513,11 +1556,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 +1593,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 +1613,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 +1648,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 +1735,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 +1753,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")} /> : null}
         <ActivityPanel
           lines={activityLines}
           scrollRef={activityScroll}
@@ -1746,17 +1794,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 +1814,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 +1851,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.

package/src/tui/components.tsx

@@ -42,14 +42,8 @@ export type PromptProps = {
   maxRows: number
   placeholder: string
   modeColor: string
-  profile: string
-  model: string
-  right?: string
-  rightColor?: string
   /** A secret being entered: the box shows one dot per character instead of a text field, so the value is never drawn. */
   masked?: number
-  /** Beside a session panel that names the model and profile, and a status bar: no bottom row. */
-  compact?: boolean
   /** Text the box starts with when `inputKey` changes (a refined request, an example from the palette). */
   initialValue?: string
   /** False while an overlay (the palette, a suggestion list) takes the keyboard. Default true. */
@@ -94,7 +88,6 @@ const PROMPT_KEYS: KeyBinding[] = [
 ]
 
 export function Prompt(props: PromptProps) {
-  const edge = `╹${"▀".repeat(Math.max(0, props.width - 1))}`
   const ref = useRef<TextareaRenderable>(null)
   // The rows the text needs; the box shows that many between minRows and maxRows, so it also grows when the screen
   // around it makes more room (the start screen folds a section for a long request).
@@ -158,20 +151,6 @@ export function Prompt(props: PromptProps) {
           )}
         </box>
       </box>
-      {props.compact ? null : (
-        <box style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 1 }}>
-          <text>
-            <span fg={theme.muted}>{"Model  "}</span>
-            <span fg={theme.text}>{props.model || "…"}</span>
-          </text>
-          <text>
-            {props.right ? <span fg={props.rightColor || theme.muted}>{props.right}</span> : null}
-            {props.right ? <span fg={theme.faint}>{"  ·  "}</span> : null}
-            <span fg={theme.muted}>{"profile "}</span>
-            <span fg={theme.text}>{props.profile || "none"}</span>
-          </text>
-        </box>
-      )}
     </box>
   )
 }
@@ -301,11 +280,33 @@ export type ChoicePanelProps = {
   onHover: (index: number) => void
   /** One option per line, for many or long options. */
   vertical?: boolean
+  /** Rows the panel may take; a long detail is cut and a long list shows a window around the selected option. */
+  maxHeight?: number
+}
+
+/** The options a vertical list shows in `room` rows, around the selected one: [first, last) and what is hidden. */
+export function optionWindow(count: number, selected: number, room: number): { from: number; to: number } {
+  if (count <= room) return { from: 0, to: count }
+  // Two rows go to "↑ n more" and "↓ n more"; the selected option sits in the middle of the rest when it can.
+  const shown = Math.max(1, room - 2)
+  const from = Math.max(0, Math.min(count - shown, selected - Math.floor(shown / 2)))
+  return { from, to: from + shown }
 }
 
 /** Question with buttons, as the agent runtime shows for permissions: arrows or tab move, enter confirms, click works too. */
 export function ChoicePanel(props: ChoicePanelProps) {
   const edge = `╹${"▀".repeat(Math.max(0, props.width - 1))}`
+  // The detail's columns: the bar and padding take five, its own indent two, and one more for a word that wraps early.
+  const inner = Math.max(10, props.width - 8)
+  // Padding, title, the gap, the keys row under a vertical list, and the edge below: the rest is detail and options.
+  const budget = Math.max(6, (props.maxHeight ?? 999) - 6 - (props.vertical ? 1 : 0))
+  const optionRows = props.vertical ? Math.min(props.options.length, Math.max(3, budget - 2)) : 1
+  const detailRoom = Math.max(1, budget - optionRows)
+  const detailRows = props.detail ? wrappedLines(props.detail, inner) : 0
+  // A detail longer than its room is cut at a word, so the options stay on screen.
+  const detail = detailRows > detailRoom ? `${props.detail.slice(0, detailRoom * inner - 2).replace(/\s+\S*$/, "")}…` : props.detail
+  const win = props.vertical ? optionWindow(props.options.length, props.selected, optionRows) : { from: 0, to: props.options.length }
+  const more = (n: number, arrow: string) => (n > 0 ? <text fg={theme.faint}>{`  ${arrow} ${n} more`}</text> : null)
   return (
     <box style={{ flexDirection: "column", width: props.width, flexShrink: 0 }}>
       <box
@@ -326,10 +327,12 @@ export function ChoicePanel(props: ChoicePanelProps) {
           <span fg={props.color}>{"△ "}</span>
           <span fg={theme.text}>{props.title}</span>
         </text>
-        {props.detail ? <text fg={theme.muted}>{`  ${props.detail}`}</text> : null}
+        {detail ? <text fg={theme.muted}>{`  ${detail}`}</text> : null}
         <box style={{ flexDirection: props.vertical ? "column" : "row", justifyContent: "space-between", marginTop: 1 }}>
           <box style={{ flexDirection: props.vertical ? "column" : "row", alignItems: "flex-start" }}>
-            {props.options.map((option, i) => {
+            {props.vertical ? more(win.from, "↑") : null}
+            {props.options.slice(win.from, win.to).map((option, j) => {
+              const i = win.from + j
               const active = i === props.selected
               return (
                 <box
@@ -342,6 +345,7 @@ export function ChoicePanel(props: ChoicePanelProps) {
                 </box>
               )
             })}
+            {props.vertical ? more(props.options.length - win.to, "↓") : null}
           </box>
           <text style={{ marginTop: props.vertical ? 1 : 0 }}>
             <span fg={theme.text}>{props.vertical ? "↑↓" : "⇆"}</span>