@capagents/forgeqe 1.1.4 → 1.1.6

package/src/tui/inspector.tsx

@@ -66,41 +66,6 @@ export function Panel(props: { title: string; color: string; width?: number; hei
   )
 }
 
-export type SessionInfo = {
-  /** "gpt-5.4 (azure-gpt54)": the model, and the llms.json profile it comes from. */
-  model: string
-  cwd: string
-  domain?: string
-  started?: number
-  requests: number
-}
-
-/** 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(10)}</span>
-      <span fg={color}>{clip(value, room)}</span>
-    </text>
-  )
-  const started = info.started ? new Date(info.started) : null
-  const since = started ? ` · since ${String(started.getHours()).padStart(2, "0")}:${String(started.getMinutes()).padStart(2, "0")}` : ""
-  return (
-    <Panel title={`Session${since}`} color={SECTION.session} width={width}>
-      {row("Model", info.model)}
-      {row("Folder", tailCut(info.cwd, room))}
-      {info.domain ? row("Domain", info.domain, theme.memory) : null}
-      {row("Requests", String(info.requests), theme.muted)}
-    </Panel>
-  )
-}
-
 /** The right pane's first line: who is working on what and for how long, and Stop while something runs. */
 /** How far the agent's own plan has got, while it has one of two steps or more. */
 export function planProgress(s: Inspector): { done: number; total: number } | null {
@@ -113,6 +78,13 @@ export function progressBar(done: number, total: number, cells: number): [string
   return ["█".repeat(filled), "░".repeat(cells - filled)]
 }
 
+/** Rows the status bar takes: who and how far on the first, what is happening on the second. */
+export const STATUS_ROWS = 2
+
+/**
+ * The Activities column's first lines. The first: who is working, how far a plan or suite has got, for how long, and
+ * Stop. The second, the whole width: what is happening now, so it is never squeezed out by the rest.
+ */
 export function StatusBar(props: {
   running: boolean
   who: string
@@ -121,16 +93,16 @@ export function StatusBar(props: {
   status: string
   width: number
   onStop: () => void
-  /** A suite's cases: done so far, of how many. */
+  /** A suite's cases or the plan's tasks: done so far, of how many. */
   progress?: { done: number; total: number } | null
-  /** Buttons for the view (Panels, Wide chat), before Stop; the first to give way when the line is short. */
+  /** Buttons for the view (Focus panels, Close), before Stop; the first to give way when the line is short. */
   actions?: Button[]
 }) {
   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…"
+  const state = props.running
+    ? props.who
     : done
       ? "Last request done"
       : failed
@@ -141,45 +113,47 @@ export function StatusBar(props: {
   const bar = props.running && props.progress && props.progress.total > 1 ? props.progress : null
   const cells = 12
   const barText = bar ? ` ${bar.done}/${bar.total}  ` : ""
-  const fixed = props.who.length + (props.running ? 30 : 6) + (bar ? cells + barText.length : 0)
-  const actions = fitButtons(props.actions || [], Math.max(0, props.width - fixed - 28))
-  const room = Math.max(10, props.width - fixed - actions.reduce((n, b) => n + b.icon.length + b.label.length + (b.keys ? b.keys.length + 1 : 0) + 4, 0))
+  const stop = "■ Stop · esc"
+  const fixed = state.length + 4 + (props.running ? stop.length + 4 + props.elapsed.length + 2 + (bar ? cells + barText.length : 0) : 0)
+  const actions = fitButtons(props.actions || [], Math.max(0, props.width - fixed - 2))
   const [full, empty] = bar ? progressBar(bar.done, bar.total, cells) : ["", ""]
   return (
-    <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
-      <box style={{ flexDirection: "row" }}>
-        {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
-        <text>
-          {props.running ? <span fg={theme.text}>{` ${props.who}`}</span> : null}
-          <span fg={props.running ? theme.muted : color}>{`${props.running ? "  " : " "}${clip(what, room)}`}</span>
-        </text>
-      </box>
-      <box style={{ flexDirection: "row" }}>
-        {actions.map((b) => (
-          <box key={b.label} onMouseDown={b.onPress} style={{ flexDirection: "row", paddingLeft: 1, paddingRight: 1, marginLeft: 1, backgroundColor: theme.button }}>
-            <text>
-              <span fg={b.color}>{`${b.icon} `}</span>
-              <span fg={theme.text}>{b.label}</span>
-              {b.keys ? <span fg={theme.faint}>{` ${b.keys}`}</span> : null}
-            </text>
-          </box>
-        ))}
-      {props.running ? (
-        <box style={{ flexDirection: "row", marginLeft: 2 }}>
-          {bar ? (
-            <text>
-              <span fg={theme.ok}>{full}</span>
-              <span fg={theme.border}>{empty}</span>
-              <span fg={theme.muted}>{barText}</span>
-            </text>
+    <box style={{ flexDirection: "column", height: STATUS_ROWS, flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
+      <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1 }}>
+        <box style={{ flexDirection: "row" }}>
+          {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
+          <text fg={props.running ? theme.text : color}>{` ${clip(state, Math.max(8, props.width - fixed + state.length))}`}</text>
+        </box>
+        <box style={{ flexDirection: "row" }}>
+          {actions.map((b) => (
+            <box key={b.label} onMouseDown={b.onPress} style={{ flexDirection: "row", paddingLeft: 1, paddingRight: 1, marginLeft: 1, backgroundColor: theme.button }}>
+              <text>
+                <span fg={b.color}>{`${b.icon} `}</span>
+                <span fg={theme.text}>{b.label}</span>
+                {b.keys ? <span fg={theme.faint}>{` ${b.keys}`}</span> : null}
+              </text>
+            </box>
+          ))}
+          {props.running ? (
+            <box style={{ flexDirection: "row", marginLeft: 2 }}>
+              {bar ? (
+                <text>
+                  <span fg={theme.ok}>{full}</span>
+                  <span fg={theme.border}>{empty}</span>
+                  <span fg={theme.muted}>{barText}</span>
+                </text>
+              ) : null}
+              <text fg={theme.faint}>{`${props.elapsed}  `}</text>
+              <box onMouseDown={props.onStop} style={{ paddingLeft: 1, paddingRight: 1, backgroundColor: theme.warn }}>
+                <text fg={theme.onButton}>{stop}</text>
+              </box>
+            </box>
           ) : null}
-          <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>
+      <text fg={props.running ? theme.muted : theme.faint} style={{ height: 1 }}>
+        {`  ${clip(props.running ? props.activity || "Working…" : "", Math.max(10, props.width - 4))}`}
+      </text>
     </box>
   )
 }
@@ -252,6 +226,7 @@ export function PlanPanel(props: { s: Inspector; width: number; height: number;
 
 /** Each kind of activity line: its mark, the mark's colour, and the text's colour. */
 const ACTIVITY_STYLE: Record<string, [string, string, string]> = {
+  running: ["◐", theme.warn, theme.text],
   tool: ["⚙", theme.faint, theme.muted],
   file: ["✎", theme.accent, theme.text],
   code: ["▸", theme.memory, theme.memory],
@@ -268,23 +243,40 @@ export function toolArgs(text: string): [string, string] | null {
   return at > 0 && text.endsWith(")") ? [text.slice(0, at), text.slice(at + 1)] : null
 }
 
-/** One activity line, its mark in a column of its own so wrapped text stays under the text. */
-export function ActivityRow({ line }: { line: Line }) {
+/** A call on one row: its name in full where it fits, then as much of its arguments as is left, dimmed. */
+function ToolCall({ parts: [name, args], width }: { parts: [string, string]; width: number }) {
+  const shown = width > 0 ? clip(name, width) : name
+  const left = width > 0 ? width - shown.length - 1 : Infinity
+  return (
+    <text style={{ flexGrow: 1, flexShrink: 1, height: width > 0 ? 1 : undefined }}>
+      <span fg={theme.text}>{shown}</span>
+      {left >= 4 ? <span fg={theme.faint}>{` ${width > 0 ? clip(args, left) : args}`}</span> : null}
+    </text>
+  )
+}
+
+/** Rows an activity line may take: a call is one row; narration and results up to three. */
+const NOTE_ROWS = 3
+
+/**
+ * One activity line, its mark in a column of its own so wrapped text stays under the text. `width` is the text's
+ * columns: a call is cut to one row and anything else to three, so a burst of output never takes the panel over.
+ */
+export function ActivityRow({ line, width = 0 }: { line: Line; width?: number }) {
   const [mark, markColor, textColor] = ACTIVITY_STYLE[line.kind] || ["·", theme.faint, theme.muted]
+  const oneRow = line.kind === "tool" || line.kind === "running" || line.kind === "file"
+  const fit = (t: string, rows: number) => (width > 0 ? clip(t.replace(/\s+/g, " "), width * rows) : t)
   return (
     <box style={{ flexDirection: "row", flexShrink: 0 }}>
       <text fg={markColor} style={{ width: 2, flexShrink: 0 }}>
         {mark}
       </text>
-      {line.kind === "tool" && toolArgs(line.text) ? (
+      {(line.kind === "tool" || line.kind === "running") && toolArgs(line.text) ? (
         // "Azure DevOps · pipelines build (action list, project QI-Claims)": the call readable, its arguments quiet.
-        <text style={{ flexGrow: 1, flexShrink: 1 }}>
-          <span fg={theme.text}>{toolArgs(line.text)![0]}</span>
-          <span fg={theme.faint}>{` ${toolArgs(line.text)![1]}`}</span>
-        </text>
+        <ToolCall parts={toolArgs(line.text)!} width={width} />
       ) : (
         <text fg={textColor} style={{ flexGrow: 1, flexShrink: 1 }}>
-          {line.text || " "}
+          {fit(line.text, oneRow ? 1 : NOTE_ROWS) || " "}
         </text>
       )}
     </box>
@@ -296,7 +288,7 @@ export const ACTIVITY_FILTERS = [
   { id: "all", label: "All", key: "a", kinds: null },
   { id: "errors", label: "Errors", key: "e", kinds: ["err"] },
   { id: "steps", label: "Steps", key: "s", kinds: ["ok", "err", "thought", "memory", "timing"] },
-  { id: "tools", label: "Tools", key: "t", kinds: ["tool", "file", "code"] },
+  { id: "tools", label: "Tools", key: "t", kinds: ["running", "tool", "file", "code"] },
 ] as const
 export type ActivityFilter = (typeof ACTIVITY_FILTERS)[number]["id"]
 
@@ -305,6 +297,27 @@ export function filterActivity(lines: Line[], filter: ActivityFilter): Line[] {
   return kinds ? lines.filter((l) => (kinds as readonly string[]).includes(l.kind)) : lines
 }
 
+/**
+ * Where the work stands, from the agent's own plan and the run's steps: the task in progress (or the step running) and
+ * the next task. Nothing new is planned here; with no plan and no steps there is nothing to say.
+ */
+export function nowNext(s: Inspector): { now?: string; next?: string; done: number; total: number } {
+  const at = s.plan.findIndex((p) => p.status === "in_progress")
+  const step = [...s.progress.items].reverse().find((i) => i.status === "running")
+  const pending = s.plan.find((p, i) => p.status === "pending" && i > at)
+  return {
+    now: at >= 0 ? s.plan[at]!.text : step?.label,
+    next: pending?.text,
+    done: s.plan.filter((p) => p.status === "completed").length,
+    total: s.plan.length,
+  }
+}
+
+/** Rows the Now/Next header takes: one for each it has. */
+export function nowNextRows(n: ReturnType<typeof nowNext>): number {
+  return (n.now ? 1 : 0) + (n.next ? 1 : 0)
+}
+
 /** Everything the agents do, newest at the bottom; focused, it scrolls and narrows to errors, steps, or tools. */
 export function ActivityPanel(props: {
   lines: Line[]
@@ -315,8 +328,11 @@ export function ActivityPanel(props: {
   focused?: boolean
   onFocus?: () => void
   onFilter?: (f: ActivityFilter) => void
+  /** The task in progress and the next one, above the lines. */
+  now?: ReturnType<typeof nowNext>
 }) {
   const filter = props.filter || "all"
+  const room = Math.max(10, props.width - 12)
   const shown = filterActivity(props.lines, filter)
   const label = ACTIVITY_FILTERS.find((f) => f.id === filter)!.label
   const count = filter === "all" ? (shown.length ? ` · ${shown.length}` : "") : ` · ${label} ${shown.length} of ${props.lines.length}`
@@ -337,10 +353,24 @@ export function ActivityPanel(props: {
           })}
         </box>
       ) : null}
+      {props.now?.now ? (
+        <text style={{ height: 1, flexShrink: 0 }}>
+          <span fg={theme.muted}>{"Now   "}</span>
+          <span fg={theme.warn}>{"◐ "}</span>
+          <span fg={theme.text}>{clip(props.now.now, room)}</span>
+        </text>
+      ) : null}
+      {props.now?.next ? (
+        <text style={{ height: 1, flexShrink: 0 }}>
+          <span fg={theme.muted}>{"Next  "}</span>
+          <span fg={theme.faint}>{"○ "}</span>
+          <span fg={theme.muted}>{clip(props.now.next, room)}</span>
+        </text>
+      ) : null}
       {shown.length ? (
         <scrollbox ref={props.scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1 }} focused={false}>
           {shown.map((line) => (
-            <ActivityRow key={line.id} line={line} />
+            <ActivityRow key={line.id} line={line} width={Math.max(10, props.width - 8)} />
           ))}
         </scrollbox>
       ) : (
@@ -450,3 +480,30 @@ export function TokensPanel(props: { total: Usage; width: number; height: number
     </Panel>
   )
 }
+
+/**
+ * Files, context, and tokens in one line, for a column too narrow for their three panels:
+ * "Files 4 (1 written) · Context 26% · Skills 2 · 52.9K tokens".
+ */
+export function InfoStrip(props: { s: Inspector; c: ContextInfo; total: Usage; width: number }) {
+  const files = filesByUse(props.s)
+  const changed = files.filter((f) => f.changes).length
+  const share = props.c.limit ? Math.round(Math.min(1, props.c.tokens / props.c.limit) * 100) : 0
+  const parts: [string, string, string][] = [
+    ["Files ", `${files.length}${changed ? ` (${changed} changed)` : ""}`, SECTION.files],
+    ["Context ", `${share}%`, share < 60 ? theme.ok : share < 85 ? theme.warn : theme.err],
+    ...(props.c.skills.length ? [["Skills ", String(props.c.skills.length), SECTION.context] as [string, string, string]] : []),
+    ["", `${formatTokens(props.total.input + props.total.output)} tokens`, SECTION.tokens],
+  ]
+  return (
+    <box style={{ flexDirection: "row", height: 1, flexShrink: 0, width: props.width, paddingLeft: 1 }}>
+      <text>
+        {parts.flatMap(([label, value, color], i) => [
+          <span key={`s${i}`} fg={theme.faint}>{i ? "  ·  " : ""}</span>,
+          <span key={`l${i}`} fg={theme.muted}>{label}</span>,
+          <span key={`v${i}`} fg={color}>{value}</span>,
+        ])}
+      </text>
+    </box>
+  )
+}

package/src/tui/landing.ts

@@ -75,9 +75,10 @@ export type Fact = { text: string; tone: "name" | "plain" | "warn" }
 
 /**
  * The project line: the folder, its stack, each system ForgeQE works with here and how it is signed in ("Azure DevOps
- * (PAT)"), and the model; or, where nothing is set up, that this folder has no forgeqe.yaml.
+ * (PAT)"); or, where nothing is set up, that this folder has no forgeqe.yaml. The model and profile are the status
+ * line's, and a missing model is Setup's, so neither is repeated here.
  */
-export function projectLine(cfg: AppConfig | null, cwd: string, opts: { model: string; signIns?: Record<string, string> }): Fact[] {
+export function projectLine(cfg: AppConfig | null, cwd: string, opts: { signIns?: Record<string, string> } = {}): Fact[] {
   const facts: Fact[] = [{ text: path.basename(cwd), tone: "name" }, ...projectStack(cwd).map((t) => ({ text: t, tone: "plain" as const }))]
   if (!cfg) return facts
   if (!cfg.configPath) return [...facts, { text: "no forgeqe.yaml here", tone: "warn" }]
@@ -86,8 +87,6 @@ export function projectLine(cfg: AppConfig | null, cwd: string, opts: { model: s
     const how = opts.signIns?.[SYSTEM_LABEL[s]]
     facts.push({ text: how ? `${SYSTEM_LABEL[s]} (${how})` : SYSTEM_LABEL[s], tone: "plain" })
   }
-  const live = cfg.llm.provider !== "none" && cfg.llm.provider !== "mock"
-  facts.push(live && opts.model ? { text: opts.model, tone: "plain" } : { text: "no model", tone: "warn" })
   return facts
 }
 

package/src/tui/refine-panel.tsx

@@ -1,5 +1,8 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import type { RefObject } from "react"
+
 import type { Refined } from "../refine.ts"
-import { Spinner } from "./components.tsx"
+import { Spinner, wrappedLines } from "./components.tsx"
 import { formatDuration, formatTokens, theme } from "./theme.ts"
 
 /** Refine's panel, in the prompt's place: working, the result with what was checked, or why it could not refine. */
@@ -27,35 +30,72 @@ export function initialChoice(missing: string[]): number {
   return REFINE_CHOICES.findIndex((c) => c.id === (missing.length ? "edit" : "use"))
 }
 
-export function RefinePanel(props: { state: RefineState; width: number; onChoose: (id: RefineChoice) => void; onHover: (i: number) => void }) {
+/** A row of the refined request as the panel draws it: a label in the panel's colour, a ✓ for a checked fact, or plain. */
+type Row = { text: string; mark?: string; markColor?: string; label?: string; color?: string; heading?: boolean }
+
+/** Everything the panel's body shows, in order: what is still missing first, since it decides whether to send. */
+export function refineRows(r: Refined): Row[] {
+  const contextLines = r.refined.split("\n").filter((l) => l.startsWith("- ")).map((l) => norm(l.slice(2)))
+  const inContext = new Set(contextLines)
+  // Facts Refine checked that are also context lines are marked there, not repeated under Checked.
+  const checked = new Set(r.grounded.filter((g) => g.checked).map((g) => norm(g.fact)).filter((f) => inContext.has(f)))
+  const section = (label: string, mark: string, markColor: string, items: string[]): Row[] =>
+    items.length ? [{ text: label, heading: true, color: markColor === theme.err ? theme.err : theme.muted }, ...items.map((text) => ({ text, mark, markColor })), { text: "" }] : []
+  const request: Row[] = r.refined.split("\n").map((line) => {
+    if (line.startsWith("- ") && checked.has(norm(line.slice(2)))) return { text: line.slice(2), mark: "✓", markColor: theme.ok }
+    const label = /^(Role|Objective|Context|Steps|Rules|Output format|Summary|Goal|Result):/.exec(line)
+    return label ? { text: line.slice(label[0].length), label: label[0] } : { text: line }
+  })
+  return [
+    ...section("Missing — answer these in your request", "?", theme.err, r.missing),
+    ...request,
+    ...section("Checked", "✓", theme.ok, r.grounded.filter((g) => g.checked && !inContext.has(norm(g.fact))).map((g) => g.fact)),
+    ...section("Assumed", "~", theme.warn, [...r.grounded.filter((g) => !g.checked).map((g) => g.fact), ...r.assumed]),
+  ]
+}
+
+/** The screen rows `rows` take at `width` columns, wrapped as the panel wraps them. */
+export function rowsHeight(rows: Row[], width: number): number {
+  return rows.reduce((n, r) => n + (r.text ? wrappedLines((r.label || "") + r.text, width - (r.mark ? 2 : 0)) : 1), 0)
+}
+
+/**
+ * Refine's panel, in the prompt's place. `maxHeight` is the rows it may take with its action row; a longer request
+ * scrolls inside it (↑↓ pgup pgdn, or the wheel) while the title and the actions stay on screen.
+ */
+export function RefinePanel(props: {
+  state: RefineState
+  width: number
+  maxHeight: number
+  scrollRef?: RefObject<ScrollBoxRenderable | null>
+  onChoose: (id: RefineChoice) => void
+  onHover: (i: number) => void
+}) {
   const { state, width } = props
   const cost = state.phase === "done" && state.tokens ? ` · ${formatTokens(state.tokens)} tokens${state.ms ? ` · ${formatDuration(state.ms)}` : ""}` : ""
   // How much of the request keeps the ASD-STE100 rules, as Refine's prompt asks.
   const ste = state.phase === "done" && state.result.ste !== undefined ? ` · STE ${Math.round(state.result.ste * 100)}%` : ""
-  const title = state.phase === "working" ? " ✦ Refining " : state.phase === "error" ? " ✦ Could not refine " : ` ✦ Refined request${ste}${cost} `
-  // Facts Refine checked that are also context lines are marked there, not repeated under Checked.
-  const contextLines = state.phase === "done" ? state.result.refined.split("\n").filter((l) => l.startsWith("- ")).map((l) => norm(l.slice(2))) : []
-  const inContext = new Set(contextLines)
-  const checked = new Set(state.phase === "done" ? state.result.grounded.filter((g) => g.checked).map((g) => norm(g.fact)).filter((f) => inContext.has(f)) : [])
-  const section = (label: string, color: string, mark: string, items: string[]) =>
-    items.length ? (
-      <box style={{ flexDirection: "column", marginTop: 1 }}>
-        <text fg={theme.muted}>{label}</text>
-        {items.map((it, i) => (
-          <box key={i} style={{ flexDirection: "row" }}>
-            <text fg={color} style={{ width: 2, flexShrink: 0 }}>
-              {mark}
-            </text>
-            <text fg={theme.text} style={{ flexGrow: 1, flexShrink: 1 }}>
-              {it}
-            </text>
-          </box>
-        ))}
-      </box>
-    ) : null
+  const missing = state.phase === "done" && state.result.missing.length ? ` · ${state.result.missing.length} to answer` : ""
+  const title = state.phase === "working" ? " ✦ Refining " : state.phase === "error" ? " ✦ Could not refine " : ` ✦ Refined request${missing}${ste}${cost} `
+  const rows = state.phase === "done" ? refineRows(state.result) : []
+  const inner = Math.max(10, width - 4)
+  // The border takes two rows and the action row one; the body gets the rest, and scrolls when it needs more.
+  const room = Math.max(3, props.maxHeight - 3)
+  const needed = rowsHeight(rows, inner)
+  const scrolls = needed > room
+  const bodyHeight = Math.min(needed, room)
   return (
     <box style={{ flexDirection: "column", width, flexShrink: 0 }}>
-      <box border borderStyle="rounded" borderColor={COLOR} title={title} titleColor={COLOR} style={{ flexDirection: "column", paddingLeft: 1, paddingRight: 1, backgroundColor: theme.panel }}>
+      <box
+        border
+        borderStyle="rounded"
+        borderColor={COLOR}
+        title={title}
+        titleColor={COLOR}
+        bottomTitle={scrolls ? " ↑↓ pgup pgdn scroll " : undefined}
+        bottomTitleAlignment="right"
+        style={{ flexDirection: "column", paddingLeft: 1, paddingRight: 1, backgroundColor: theme.panel, flexShrink: 0 }}
+      >
         {state.phase === "working" ? (
           <box style={{ flexDirection: "row" }}>
             <Spinner kind="dots" color={COLOR} />
@@ -64,37 +104,36 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
         ) : state.phase === "error" ? (
           <text fg={theme.err}>{state.message}</text>
         ) : (
-          <>
-            {/* The request as it is sent: its labelled parts (Role, Objective, Context, Steps, Rules, Output format, Summary) stand out. */}
-            {state.result.refined.split("\n").map((line, i) => {
-              const label = /^(Role|Objective|Context|Steps|Rules|Output format|Summary|Goal|Result):/.exec(line)
-              // A context line Refine checked against the systems: ✓ in place of its dash, so it is not listed twice.
-              if (line.startsWith("- ") && checked.has(norm(line.slice(2)))) {
-                return (
-                  <text key={i}>
-                    <span fg={theme.ok}>{"✓ "}</span>
-                    <span fg={theme.text}>{line.slice(2)}</span>
+          <scrollbox ref={props.scrollRef} style={{ height: bodyHeight, flexShrink: 0 }} focused={false}>
+            {rows.map((r, i) =>
+              r.heading ? (
+                <text key={i} fg={r.color}>
+                  {r.text}
+                </text>
+              ) : r.mark ? (
+                <box key={i} style={{ flexDirection: "row", flexShrink: 0 }}>
+                  <text fg={r.markColor} style={{ width: 2, flexShrink: 0 }}>
+                    {r.mark}
+                  </text>
+                  <text fg={theme.text} style={{ flexGrow: 1, flexShrink: 1 }}>
+                    {r.text}
                   </text>
-                )
-              }
-              return label ? (
+                </box>
+              ) : r.label ? (
                 <text key={i}>
-                  <span fg={COLOR}>{label[0]}</span>
-                  <span fg={theme.text}>{line.slice(label[0].length)}</span>
+                  <span fg={COLOR}>{r.label}</span>
+                  <span fg={theme.text}>{r.text}</span>
                 </text>
               ) : (
-                <text key={i} fg={line.trim() ? theme.text : undefined}>
-                  {line || " "}
+                <text key={i} fg={theme.text}>
+                  {r.text || " "}
                 </text>
-              )
-            })}
-            {section("Checked", theme.ok, "✓", state.result.grounded.filter((g) => g.checked && !inContext.has(norm(g.fact))).map((g) => g.fact))}
-            {section("Assumed", theme.warn, "~", [...state.result.grounded.filter((g) => !g.checked).map((g) => g.fact), ...state.result.assumed])}
-            {section("Missing — answer these in your request", theme.err, "?", state.result.missing)}
-          </>
+              ),
+            )}
+          </scrollbox>
         )}
       </box>
-      <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, marginTop: 0 }}>
+      <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0 }}>
         {state.phase === "done" ? (
           <box style={{ flexDirection: "row" }}>
             {REFINE_CHOICES.map((c, i) => {
@@ -112,12 +151,23 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
         <text>
           {state.phase === "done" ? (
             <>
+              <span fg={theme.text}>{"⇆"}</span>
+              <span fg={theme.muted}>{" choose  "}</span>
               <span fg={theme.text}>{"enter"}</span>
               <span fg={theme.muted}>{` ${REFINE_CHOICES[state.choice]!.id === "keep" ? "keep mine" : REFINE_CHOICES[state.choice]!.id}  `}</span>
-              <span fg={theme.text}>{"e"}</span>
-              <span fg={theme.muted}>{" edit  "}</span>
-              <span fg={theme.text}>{"esc"}</span>
-              <span fg={theme.muted}>{" keep mine"}</span>
+              {/* Each action's key once: e and esc are not repeated when enter already does them. */}
+              {REFINE_CHOICES[state.choice]!.id !== "edit" ? (
+                <>
+                  <span fg={theme.text}>{"e"}</span>
+                  <span fg={theme.muted}>{" edit  "}</span>
+                </>
+              ) : null}
+              {REFINE_CHOICES[state.choice]!.id !== "keep" ? (
+                <>
+                  <span fg={theme.text}>{"esc"}</span>
+                  <span fg={theme.muted}>{" keep mine"}</span>
+                </>
+              ) : null}
             </>
           ) : (
             <>

package/src/tui/shortcuts.tsx

@@ -16,6 +16,8 @@ export const SHORTCUTS: { group: string; keys: [string, string][] }[] = [
     group: "Find and move",
     keys: [
       ["ctrl+p", "search: actions, commands, profiles, examples"],
+      ["pgup pgdn", "scroll the conversation (the mouse wheel works too)"],
+      ["↑↓ pgup pgdn", "scroll a long refined request; ⇆ picks what to do with it"],
       ["shift+tab", "move between the chat and the plan, activity, and files panels"],
       ["ctrl+o", "open or close the panels: plan, activity, files, context, tokens"],
       ["alt+1 to alt+4", "a start action, or a next step"],

package/src/tui/transcript.tsx

@@ -17,7 +17,7 @@ import { clip } from "./text.ts"
 
 export type Line = {
   id: number
-  kind: "sys" | "user" | "thought" | "timing" | "memory" | "tool" | "file" | "code" | "ok" | "err" | "summary" | "suitesummary" | "reply" | "card"
+  kind: "sys" | "user" | "thought" | "timing" | "memory" | "tool" | "file" | "code" | "ok" | "err" | "summary" | "suitesummary" | "reply" | "card" | "running"
   text: string
   summary?: RunSummary
   suite?: SuiteResult
@@ -25,6 +25,29 @@ export type Line = {
   outcome?: "done" | "failed" | "needs_input"
   /** Which side of the split view shows it: the conversation, or what the agents are doing. */
   pane?: "chat" | "activity"
+  /** Only the Activity panel shows it: detail the conversation leaves out at this level (/details), such as reads. */
+  quiet?: boolean
+  /** A tool call's id: its "running" line becomes the call's result line when the call finishes. */
+  call?: string
+}
+
+/** Lines kept: the oldest quiet ones go first, so a busy run never pushes the conversation out. */
+export const MAX_LINES = 1500
+
+export function trimLines(lines: Line[], max = MAX_LINES): Line[] {
+  if (lines.length <= max) return lines
+  let drop = lines.length - max
+  const kept = lines.filter((l) => (drop > 0 && l.quiet ? (drop--, false) : true))
+  return kept.length > max ? kept.slice(-max) : kept
+}
+
+/** A call has finished: its running line takes the result in place, or the result is added when there was none. */
+export function settleCall(lines: Line[], call: string | undefined, line: Omit<Line, "id" | "call">, id: number): Line[] {
+  const at = call ? lines.findIndex((l) => l.call === call && l.kind === "running") : -1
+  if (at < 0) return [...lines, { ...line, id, ...(call ? { call } : {}) }]
+  const next = [...lines]
+  next[at] = { ...next[at]!, ...line, call }
+  return next
 }
 
 /** What one request produced: browser runs with their files, suites, and the tests the coding agent wrote. */
@@ -97,6 +120,9 @@ export function producedCard(p: Produced, tests: TestsSetting): Card | null {
  * The conversation reads top to bottom, as in Claude Code: what you asked after ">", each reply, tool call, or result
  * after "⏺", and what came of it indented under the call after "⎿". No boxes or backgrounds: marks and colour carry it.
  */
+/** The lines a request shows in the conversation before it folds. */
+export const USER_ROWS = 8
+
 export const MARK = { item: "⏺", child: "⎿", user: ">" }
 
 /** A mark in its own column and the content beside it, so wrapped lines stay under the content. */
@@ -404,9 +430,13 @@ export function TranscriptLine({ line, prev }: { line: Line; prev?: Line }) {
   if (line.kind === "summary" && line.summary) return <SummaryCard summary={line.summary} />
   if (line.kind === "suitesummary" && line.suite) return <SuiteCard suite={line.suite} />
   if (line.kind === "user") {
+    // A long request (a refined one, a pasted spec) folds to its first lines; it was sent in full.
+    const rows = line.text.split("\n")
+    const folded = rows.length > USER_ROWS
     return (
       <Marked mark={MARK.user} color={theme.muted} gap>
-        <text fg={theme.muted}>{line.text}</text>
+        <text fg={theme.muted}>{folded ? rows.slice(0, USER_ROWS - 1).join("\n") : line.text}</text>
+        {folded ? <text fg={theme.faint}>{`… ${rows.length - USER_ROWS + 1} more lines, sent in full`}</text> : null}
       </Marked>
     )
   }

package/src/types.ts

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

package/src/usage.ts

@@ -98,7 +98,7 @@ export function usageLine(usage: Usage, cost?: Cost | null): string {
 // The meter: every model session reports here, by role
 // ---------------------------------------------------------------------------------------------
 
-export type Role = "ForgeQE's agent" | "browser agent" | "Scribe" | "reviewer" | "judge" | "refiner"
+export type Role = "ForgeQE's agent" | "browser agent" | "Scribe" | "reviewer" | "judge" | "refiner" | "root-cause analyst"
 
 type Entry = { usage: Usage; cost?: Cost; priced: boolean }