@capagents/forgeqe 1.1.5 → 1.1.7

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>

package/src/tui/inspector.tsx

@@ -6,7 +6,7 @@ import { fitButtons, Spinner, type Button } from "./components.tsx"
 import { filesByUse, type FileUse, type Inspector, type Progress } from "./session.ts"
 import { clip, tailCut } from "./text.ts"
 import { formatTokens, theme } from "./theme.ts"
-import type { Line } from "./transcript.tsx"
+import { isMarker, type Line } from "./transcript.tsx"
 
 /**
  * The split view's panels. Each is a rounded box with its title in the border, in its section's colour from the
@@ -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>
   )
 }
@@ -197,18 +171,19 @@ const PROGRESS_MARK: Record<Progress["status"], [string, string]> = {
   skipped: ["■", theme.faint],
 }
 
-export type PlanLine = { mark: string; color: string; text: string; textColor: string }
+/** `live`: a task in progress or a step running, drawn with a spinner while the request runs. */
+export type PlanLine = { mark: string; color: string; text: string; textColor: string; live?: boolean }
 
 export function planLines(s: Inspector): PlanLine[] {
   const lines: PlanLine[] = []
   for (const p of s.plan) {
     const [mark, color] = PLAN_MARK[p.status] || PLAN_MARK.pending!
-    lines.push({ mark, color, text: p.text, textColor: p.status === "completed" || p.status === "cancelled" ? theme.muted : theme.text })
+    lines.push({ mark, color, text: p.text, textColor: p.status === "completed" || p.status === "cancelled" ? theme.muted : theme.text, ...(p.status === "in_progress" ? { live: true } : {}) })
   }
   if (s.progress.items.length && s.plan.length) lines.push({ mark: "─", color: theme.border, text: s.progress.title, textColor: theme.faint })
   for (const i of s.progress.items) {
     const [mark, color] = PROGRESS_MARK[i.status]
-    lines.push({ mark, color, text: i.detail ? `${i.label} — ${i.detail}` : i.label, textColor: i.status === "fail" ? theme.err : i.status === "running" ? theme.text : theme.muted })
+    lines.push({ mark, color, text: i.detail ? `${i.label} — ${i.detail}` : i.label, textColor: i.status === "fail" ? theme.err : i.status === "running" ? theme.text : theme.muted, ...(i.status === "running" ? { live: true } : {}) })
   }
   return lines
 }
@@ -227,7 +202,7 @@ export function windowRows(total: number, rows: number, selected?: number): [num
 }
 
 /** The agent's to-do list, then the browser steps or suite cases; the latest that fit, or around the selected one. */
-export function PlanPanel(props: { s: Inspector; width: number; height: number; selected?: number; onFocus?: () => void }) {
+export function PlanPanel(props: { s: Inspector; width: number; height: number; selected?: number; onFocus?: () => void; animate?: boolean }) {
   const { s, width, height } = props
   const lines = planLines(s)
   const done = s.plan.filter((p) => p.status === "completed").length
@@ -239,10 +214,9 @@ export function PlanPanel(props: { s: Inspector; width: number; height: number;
         const active = first + i === props.selected
         return (
           <box key={first + i} style={{ flexDirection: "row", height: 1, flexShrink: 0, backgroundColor: active ? theme.button : undefined }}>
-            <text>
-              <span fg={l.color}>{`${l.mark} `}</span>
-              <span fg={active ? theme.text : l.textColor}>{clip(l.text, Math.max(10, width - 8))}</span>
-            </text>
+            {/* What is being worked on now spins, so it reads as live; a task left open after the request does not. */}
+            <box style={{ width: 2, flexShrink: 0 }}>{l.live && props.animate ? <Spinner kind="dots" color={l.color} /> : <text fg={l.color}>{l.mark}</text>}</box>
+            <text fg={active ? theme.text : l.textColor}>{clip(l.text, Math.max(10, width - 8))}</text>
           </box>
         )
       })}
@@ -252,7 +226,9 @@ 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]> = {
-  tool: ["⚙", theme.faint, theme.muted],
+  running: ["◐", theme.warn, theme.text],
+  // A finished call: ✓, so it never reads as the ○ of a task still to do.
+  tool: ["✓", theme.ok, theme.muted],
   file: ["✎", theme.accent, theme.text],
   code: ["▸", theme.memory, theme.memory],
   timing: ["+", theme.warn, theme.warn],
@@ -268,23 +244,85 @@ 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>
+  )
+}
+
+const ENDED: Record<NonNullable<Line["ended"]>, [string, string, string]> = {
+  done: ["✓", "Done", theme.ok],
+  fail: ["✗", "Failed", theme.err],
+  stopped: ["■", "Stopped", theme.warn],
+  idle: ["?", "Waiting for your answer", theme.warn],
+}
+
+/** "── 14:02  can you generate a defect report… ─────": where a request's activities start. */
+function RequestStart({ line, width, first }: { line: Line; width: number; first: boolean }) {
+  const d = new Date(line.at || Date.now())
+  const time = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`
+  // The rule runs the whole row: the mark column and the text's.
+  const room = Math.max(12, (width || 60) + 3)
+  const text = clip(line.text, Math.max(8, room - time.length - 8))
+  const fill = Math.max(2, room - 3 - time.length - 2 - text.length - 1)
+  return (
+    <text style={{ height: 1, flexShrink: 0, marginTop: first ? 0 : 1 }}>
+      <span fg={theme.border}>{"── "}</span>
+      <span fg={theme.accent}>{time}</span>
+      <span fg={theme.text}>{`  ${text} `}</span>
+      <span fg={theme.border}>{"─".repeat(fill)}</span>
+    </text>
+  )
+}
+
+/** "✓ Done in 1m 12s · 16 activities": how a request ended. */
+function RequestEnd({ line, width }: { line: Line; width: number }) {
+  const [mark, label, color] = ENDED[line.ended || "done"]
+  return (
+    <text style={{ height: 1, flexShrink: 0 }}>
+      <span fg={color}>{`${mark} ${label}`}</span>
+      <span fg={theme.faint}>{` ${clip(line.text, Math.max(8, (width || 60) - label.length))}`}</span>
+    </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, first = false }: { line: Line; width?: number; first?: boolean }) {
+  if (line.kind === "request") return <RequestStart line={line} width={width} first={first} />
+  if (line.kind === "requestEnd") return <RequestEnd line={line} width={width} />
   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) ? (
-        // "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>
+      {line.kind === "running" ? (
+        // A call in progress spins until its result takes the row.
+        <box style={{ width: 2, flexShrink: 0 }}>
+          <Spinner kind="dots" color={markColor} />
+        </box>
+      ) : (
+        <text fg={markColor} style={{ width: 2, flexShrink: 0 }}>
+          {mark}
         </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.
+        <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,13 +334,35 @@ 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"]
 
+/** The lines a filter keeps; where each request starts and ends always stays, so a filtered line is never orphaned. */
 export function filterActivity(lines: Line[], filter: ActivityFilter): Line[] {
   const kinds = ACTIVITY_FILTERS.find((f) => f.id === filter)?.kinds
-  return kinds ? lines.filter((l) => (kinds as readonly string[]).includes(l.kind)) : lines
+  return kinds ? lines.filter((l) => isMarker(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. */
@@ -315,11 +375,16 @@ 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}`
+  // Counts are of activities: the lines marking where requests start and end are not.
+  const real = (ls: Line[]) => ls.filter((l) => !isMarker(l)).length
+  const count = filter === "all" ? (real(shown) ? ` · ${real(shown)}` : "") : ` · ${label} ${real(shown)} of ${real(props.lines)}`
   return (
     <Panel title={`Activity${count}`} color={SECTION.activity} width={props.width} height={props.height} focused={props.focused} keys="↑↓ pgup pgdn scroll · esc chat" onFocus={props.onFocus}>
       {props.focused || filter !== "all" ? (
@@ -337,16 +402,32 @@ export function ActivityPanel(props: {
           })}
         </box>
       ) : null}
-      {shown.length ? (
+      {props.now?.now ? (
+        <box style={{ flexDirection: "row", height: 1, flexShrink: 0 }}>
+          <text fg={theme.muted}>{"Now   "}</text>
+          <box style={{ width: 2, flexShrink: 0 }}>
+            <Spinner kind="dots" color={theme.warn} />
+          </box>
+          <text fg={theme.text}>{clip(props.now.now, room)}</text>
+        </box>
+      ) : 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}
+      {real(shown) ? (
         <scrollbox ref={props.scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1 }} focused={false}>
-          {shown.map((line) => (
-            <ActivityRow key={line.id} line={line} />
+          {shown.map((line, i) => (
+            <ActivityRow key={line.id} line={line} width={Math.max(10, props.width - 8)} first={i === 0} />
           ))}
         </scrollbox>
       ) : (
         <box style={{ flexGrow: 1, justifyContent: "center", alignItems: "center" }}>
           <text fg={theme.faint}>
-            {clip(props.lines.length ? `Nothing under ${label} yet` : "Tool calls, browser steps, and the agents' reasoning show here", Math.max(10, props.width - 4))}
+            {clip(real(props.lines) ? `Nothing under ${label} yet` : "Tool calls, browser steps, and the agents' reasoning show here", Math.max(10, props.width - 4))}
           </text>
         </box>
       )}
@@ -450,3 +531,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
 }