@capagents/forgeqe 1.0.0 → 1.0.2

package/src/tui/App.tsx

@@ -28,6 +28,29 @@ import { emptyProduced, Line, Produced, producedCard, TestsSetting, TranscriptLi
 import { Dialog, dialogSpec } from "./dialogs.ts"
 import { activityFromLog, clip, hostOf, modelLabel } from "./text.ts"
 import { featuresText } from "../capabilities/render.ts"
+import { CAPABILITIES } from "../capabilities/registry.ts"
+import { CONTEXT_LIMIT } from "../code/runtime.ts"
+import { readKnowledge } from "../knowledge.ts"
+import { externalMcp } from "../mcp/external.ts"
+import { meterSince } from "../usage.ts"
+import { ActivityLog, ContextPanel, FilesPanel, PlanPanel, SessionBlock, TokensPanel, WorkHeader, type ContextInfo, type SessionInfo } from "./inspector.tsx"
+import {
+  addSkill,
+  caseDone,
+  caseStarted,
+  newInspector,
+  newRequest,
+  paneFor,
+  progressDone,
+  setContext,
+  setPlan,
+  setWho,
+  startProgress,
+  stepOutcome,
+  stepStarted,
+  useFile,
+  type Pane,
+} from "./session.ts"
 
 export type TuiOptions = {
   configPath?: string
@@ -54,11 +77,14 @@ export type TuiOptions = {
 }
 
 const VERSION = packageVersion()
+/** Narrower than this, the split view's right pane would not fit: one pane, and ctrl+o switches. */
+export const SPLIT_MIN = 120
 
 export function App({ options }: { options: TuiOptions }) {
   const renderer = useRenderer()
   const { width, height } = useTerminalDimensions()
   const scrollRef = useRef<ScrollBoxRenderable>(null)
+  const activityScroll = useRef<ScrollBoxRenderable>(null)
   const submitRef = useRef<(value: string) => void>(() => {})
   const configRef = useRef<AppConfig | null>(null)
   const abortRef = useRef<AbortController | null>(null)
@@ -79,6 +105,19 @@ export function App({ options }: { options: TuiOptions }) {
   const testsRef = useRef<TestsSetting>({ on: false, why: "" })
   const codingRef = useRef(false)
   const codeRunDir = useRef("")
+  /** The right pane's live state: plan, steps or cases, files, context. */
+  const inspRef = useRef(newInspector())
+  /** Set while a typed line is handled, so the shell's answers to it go to the chat. */
+  const answeringRef = useRef(false)
+  const [, setRev] = useState(0)
+  const bump = () => setRev((n) => n + 1)
+  /** Usage since the shell opened, for the session's token and cost totals. */
+  const sessionMeter = useRef(meterSnapshot())
+  const sessionStarted = useRef<number | undefined>(undefined)
+  const requests = useRef(0)
+  /** Under 120 columns there is room for one pane: ctrl+o switches between the chat and the details. */
+  const [narrowView, setNarrowView] = useState<"chat" | "details">("chat")
+  const contextInfo = useRef<{ key: string; knowledge: number; mcp: string[] }>({ key: "", knowledge: 0, mcp: [] })
 
   const [lines, setLines] = useState<Line[]>([])
   const [headed, setHeaded] = useState(Boolean(options.headed))
@@ -123,15 +162,29 @@ export function App({ options }: { options: TuiOptions }) {
   choiceRef.current = choice
   thinkingRef.current = thinking
 
-  const push = (kind: Line["kind"], text: string) => {
+  /** 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 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 })
-      return next.slice(-300)
+      for (const part of parts) next.push({ id: idRef.current++, kind, text: part, pane: where })
+      return next.slice(-600)
     })
   }
-  const pushLine = (line: Omit<Line, "id">) => setLines((prev) => [...prev, { ...line, id: idRef.current++ }].slice(-300))
+  const pushLine = (line: Omit<Line, "id">) =>
+    setLines((prev) => [...prev, { ...line, pane: line.pane || paneFor(line.kind, abortRef.current !== null), id: idRef.current++ }].slice(-600))
+  /** 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
+    if (e.kind === "tool") {
+      if (e.file) useFile(s, e.file)
+      if (e.skill) addSkill(s, e.skill)
+    } else if (e.kind === "plan") setPlan(s, e.items)
+    else if (e.kind === "usage") setContext(s, e.context || 0)
+    else return
+    bump()
+  }
   /** 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 pushProduced = () => {
@@ -374,7 +427,8 @@ export function App({ options }: { options: TuiOptions }) {
       return
     }
     if (key.name === "tab" && !key.shift) cycleProfile()
-    if (key.name === "p" && key.ctrl) push("sys", HELP)
+    if (key.name === "p" && key.ctrl) push("sys", HELP, "chat")
+    if (key.name === "o" && key.ctrl && width < SPLIT_MIN) setNarrowView((v) => (v === "chat" ? "details" : "chat"))
     if (key.name === "escape" && abortRef.current) openDialog("stop")
   })
 
@@ -396,6 +450,9 @@ export function App({ options }: { options: TuiOptions }) {
         replayingRef.current = false
         setStep(0)
         setBrowsing(true)
+        startProgress(inspRef.current, `Browser · ${clip(e.goal, 40)}`)
+        setWho(inspRef.current, "Browser agent")
+        bump()
         if (agent) push("code", `Browser: ${clip(e.goal, 110)}`)
         if (!aborted()) setActivity(cfg?.llm.provider === "mock" ? "Running the offline demo…" : "Starting the browser…")
         return
@@ -417,6 +474,10 @@ export function App({ options }: { options: TuiOptions }) {
           if (shows(event, detailRef.current)) push(event.level === "error" ? "err" : "sys", event.text)
           if (!aborted()) setActivity(activityFromLog(event.text))
         }
+        if (event.type === "thought") {
+          stepStarted(inspRef.current, `Step ${event.step} · ${clip(event.text.replace(/\s+/g, " "), 90)}${replayingRef.current ? " (memory)" : ""}`)
+          bump()
+        }
         if (event.type === "thought" && !replayingRef.current) {
           if (shows(event, detailRef.current)) push("thought", stepIntent(event.step, event.text, detailRef.current))
           if (!aborted()) setActivity(`Acting in the browser (step ${stepRef.current})…`)
@@ -425,7 +486,11 @@ export function App({ options }: { options: TuiOptions }) {
           markRef.current = Date.now()
           if (!aborted()) setActivity(replayingRef.current ? "Replaying from memory…" : `Thinking about step ${stepRef.current + 1}…`)
         }
-        if (event.type === "outcome") push(event.ok ? "ok" : "err", briefText(event.text, detailRef.current))
+        if (event.type === "outcome") {
+          push(event.ok ? "ok" : "err", briefText(event.text, detailRef.current))
+          stepOutcome(inspRef.current, event.ok, event.ok ? undefined : clip(event.text, 80))
+          bump()
+        }
         return
       }
       case "run-done": {
@@ -450,17 +515,25 @@ export function App({ options }: { options: TuiOptions }) {
         producedRef.current.runs.push({ runDir: e.runDir, status: r?.status || "fail", files: e.files })
         setLastStats(summary.stats)
         setBrowsing(false)
+        progressDone(inspRef.current, aborted())
+        setWho(inspRef.current, codingRef.current ? "Scribe" : "ForgeQE's agent")
+        bump()
         if (agent && !aborted()) setActivity("The agent is reading the result…")
         return
       }
       case "suite-start":
         push("sys", `${e.cases.length} test case${e.cases.length === 1 ? "" : "s"}${e.parallel > 1 ? `, ${e.parallel} at a time` : ""}`)
         setSuiteProgress({ done: 0, total: e.cases.length })
+        startProgress(inspRef.current, `${e.cases.length} test case${e.cases.length === 1 ? "" : "s"}`)
+        bump()
         return
       case "suite-event": {
         const s = e.event
         const tag = (id: string) => ((configRef.current?.suite.parallel || 1) > 1 ? `[${id}] ` : "")
         if (s.type === "case-start") {
+          caseStarted(inspRef.current, s.case.id, s.case.title)
+          setWho(inspRef.current, "Browser agent")
+          bump()
           push("code", `${s.index + 1}/${s.total}  ${s.case.id}  ${s.case.title}`)
           // What was read from the test management system: where the case lives and the steps the browser will follow.
           const steps = s.case.steps
@@ -476,6 +549,8 @@ export function App({ options }: { options: TuiOptions }) {
         } else if (s.type === "case-done") {
           setSuiteProgress((p) => (p ? { ...p, done: p.done + 1 } : p))
           const r = s.result
+          caseDone(inspRef.current, r.case.id, r.status, r.failure ? FAILURE_LABEL[r.failure.type] : undefined)
+          bump()
           push(r.status === "passed" ? "ok" : "err", `${r.case.id} ${r.status} in ${formatDuration(r.ms)}${r.failure ? ` · ${FAILURE_LABEL[r.failure.type]}` : ""}`)
           if (r.failure) push("sys", `  ${tag(r.case.id)}${clip(r.failure.reason, 200)} Next: ${FAILURE_ACTION[r.failure.type]}.`)
           // Each step of the case with its verdict, and what the page showed for a step that did not pass.
@@ -508,6 +583,8 @@ export function App({ options }: { options: TuiOptions }) {
         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)) {
@@ -527,6 +604,8 @@ export function App({ options }: { options: TuiOptions }) {
         codingRef.current = true
         codeRunDir.current = e.runDir
         setCoding(true)
+        setWho(inspRef.current, "Scribe")
+        bump()
         const show = shortPath
         pushLine({
           kind: "card",
@@ -550,6 +629,8 @@ export function App({ options }: { options: TuiOptions }) {
       case "code-done":
         codingRef.current = false
         setCoding(false)
+        setWho(inspRef.current, "ForgeQE's agent")
+        bump()
         producedRef.current.tests.push({ runDir: codeRunDir.current, result: e.result, error: e.error })
         if (e.error) push("err", `Coding agent: ${e.error}`)
         if (agent && !aborted()) setActivity("The agent is reading the result…")
@@ -561,6 +642,8 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const onBrainEvent = (e: CodeEvent) => {
+    inspect(e)
+    if (e.kind === "plan") return
     if (e.kind === "usage") {
       useTokens("agent", e.usage.input + e.usage.output)
       return
@@ -600,6 +683,10 @@ export function App({ options }: { options: TuiOptions }) {
     started.current = Date.now()
     usedRef.current = new Map()
     producedRef.current = emptyProduced()
+    newRequest(inspRef.current)
+    requests.current++
+    sessionStarted.current ??= Date.now()
+    bump()
     setTokens(0)
     setStatus("running")
     setActivity(activityText)
@@ -607,6 +694,8 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const finish = (finalStatus: string) => {
+    progressDone(inspRef.current, finalStatus === "stopped")
+    bump()
     setStatus(finalStatus)
     setActivity("")
     setThinking(false)
@@ -671,21 +760,21 @@ export function App({ options }: { options: TuiOptions }) {
       controller.signal.removeEventListener("abort", onAbort)
       if (answer.outcome !== "stopped") convoRef.current.push({ user: text, reply: answer.reply })
       if (answer.outcome === "stopped") {
-        push("sys", "Stopped.")
+        push("sys", "Stopped.", "chat")
         finalStatus = "stopped"
       } else {
         if (answer.reply) pushLine({ kind: "reply", text: answer.reply, outcome: answer.outcome })
-        if (answer.error && !answer.reply) push("err", answer.error)
+        if (answer.error && !answer.reply) push("err", answer.error, "chat")
         finalStatus = answer.outcome === "done" ? "done" : answer.outcome === "needs_input" ? "idle" : "fail"
       }
     } catch (err) {
-      push("err", (err as Error).message)
+      push("err", (err as Error).message, "chat")
       closeBrain()
     } finally {
       pushProduced()
       // What this request used and cost in total: ForgeQE's agent, browser runs, Scribe, and the reviewer.
       const spent = requestLine(meterStart)
-      if (spent) push("sys", spent)
+      if (spent) push("sys", spent, "chat")
       finish(finalStatus)
     }
   }
@@ -737,6 +826,15 @@ export function App({ options }: { options: TuiOptions }) {
   }, [])
 
   const onSubmit = (value: string) => {
+    // What a command answers (/help, /skills, "busy") is for the chat, even while a request runs.
+    answeringRef.current = true
+    try {
+      submit(value)
+    } finally {
+      answeringRef.current = false
+    }
+  }
+  const submit = (value: string) => {
     const text = value.replace(/\t/g, "").trim()
     setInputKey((k) => k + 1)
     const pending = entryRef.current
@@ -864,17 +962,24 @@ export function App({ options }: { options: TuiOptions }) {
 
   const closeHint: Hint = { key: "ctrl+c", label: "close", onPress: () => openDialog("quit") }
   const copiedHint: Hint[] = copied ? [{ key: `✓ ${copied}`, label: "" }] : []
+  // The split view's right pane shows tokens, time, and the last result, so the hints under the prompt leave them out.
+  const wide = width >= SPLIT_MIN
+  const viewHint: Hint[] = wide ? [] : [{ key: "ctrl+o", label: "details", onPress: () => setNarrowView("details") }]
+  // While running, the row also holds the spinner and esc stop: below 95 columns the view hint does not fit beside them.
+  const runningViewHint: Hint[] = width >= 95 ? viewHint : []
   const idleHints: Hint[] = [
     ...copiedHint,
-    ...(lastStats ? [{ key: `last run ${lastStats}`, label: "" }] : []),
+    ...(lastStats && !wide ? [{ key: `last run ${lastStats}`, label: "" }] : []),
+    ...viewHint,
     { key: "tab", label: "profiles" },
     { key: "ctrl+p", label: "commands" },
     closeHint,
   ]
   const runningHints: Hint[] = [
     ...copiedHint,
-    { key: `${formatTokens(tokens)} tokens · ${elapsed}`, label: "" },
-    { key: "ctrl+p", label: "commands" },
+    ...(wide ? [] : [{ key: `${formatTokens(tokens)} tokens · ${elapsed}`, label: "" }, ...runningViewHint]),
+    // Beside the 40% pane's spinner and esc stop, only close fits from 120 columns.
+    ...(wide ? [] : [{ key: "ctrl+p", label: "commands" }]),
     closeHint,
   ]
   const runningLeft = (
@@ -920,6 +1025,7 @@ export function App({ options }: { options: TuiOptions }) {
           model={model}
           right={right}
           rightColor={rightColor}
+          compact={width >= SPLIT_MIN && !home}
         />
         <Hints width={promptWidth} items={running ? runningHints : idleHints} left={running ? runningLeft : undefined} />
       </>
@@ -946,37 +1052,134 @@ export function App({ options }: { options: TuiOptions }) {
     )
   }
 
+  // What the split view shows about the session and the request in progress.
+  const cfgNow = configRef.current
+  const insp = inspRef.current
+  const spent = meterSince(sessionMeter.current)
+  const contextKey = cfgNow ? `${cfgNow.configPath}|${cfgNow.activeProfile}|${cfgNow.knowledge?.dir}` : ""
+  if (cfgNow && contextInfo.current.key !== contextKey) {
+    let mcp: string[] = []
+    try {
+      mcp = externalMcp(cfgNow).servers.map((x) => x.label)
+    } catch {}
+    contextInfo.current = { key: contextKey, knowledge: readKnowledge(cfgNow.knowledge?.dir).length, mcp }
+  }
+  const llm = cfgNow?.llm
+  const sessionInfo: SessionInfo = {
+    profile,
+    model: model || (cfgNow ? modelLabel(cfgNow) : ""),
+    auth: !llm ? "–" : llm.auth === "entra" ? "Entra ID, no key" : llm.apiKeyEnv ? `API key in ${llm.apiKeyEnv}` : llm.provider === "mock" ? "offline demo" : llm.provider,
+    cwd: shortCwd(),
+    tests: testsRef.current.on ? "written to this folder" : requests.current ? `not written (${testsRef.current.why || "off"})` : "set on the first request",
+    browser: `${headed ? "visible" : "headless"} · up to ${maxSteps} steps${options.url ? ` · ${hostOf(options.url)}` : ""}`,
+    ...(cfgNow?.domain ? { domain: `${cfgNow.domain.industry}${cfgNow.domain.regulations.length ? ` (${cfgNow.domain.regulations.join(", ")})` : ""}` } : {}),
+    started: sessionStarted.current,
+    requests: requests.current,
+    total: spent.roles.length ? { usage: spent.total, cost: spent.cost } : undefined,
+  }
+  const contextPanel: ContextInfo = {
+    tokens: insp.context,
+    limit: CONTEXT_LIMIT,
+    skills: insp.skills,
+    knowledge: contextInfo.current.knowledge,
+    ...(cfgNow?.domain ? { domain: cfgNow.domain.industry } : {}),
+    mcp: contextInfo.current.mcp,
+    capabilities: CAPABILITIES.length,
+  }
+  const placeholder = running
+    ? coding
+      ? "The coding agent is writing a test · esc to stop"
+      : `${thinking ? "ForgeQE's agent" : "The browser agent"} is working · esc to stop`
+    : "Ask ForgeQE: a goal, test cases, a test, a pipeline…"
+  const chatLines = lines.filter((l) => l.pane !== "activity")
+  const activityLines = lines.filter((l) => l.pane === "activity")
+  const stop = () => openDialog("stop")
+
+  /**
+   * The right pane: who is working, the plan, the activity, and files, context, and tokens. Its rows are counted, not
+   * left to flex: the activity log gets what the fixed parts leave, so the bottom panels are never pushed off screen.
+   */
+  const details = (paneWidth: number, rowsAvailable: number) => {
+    const bottomRows = Math.max(6, Math.min(9, Math.floor(rowsAvailable / 4)))
+    const planCap = Math.max(3, Math.min(10, Math.floor(rowsAvailable / 4)))
+    const planLines = insp.plan.length + insp.progress.items.length + (insp.plan.length && insp.progress.items.length ? 1 : 0)
+    const planHeight = 1 + Math.max(1, Math.min(planCap, planLines))
+    // Header, a blank row, the plan, a blank row, the activity, a blank row, and the bottom panels with their title and legend.
+    const activityRows = Math.max(4, rowsAvailable - 1 - 1 - planHeight - 1 - 1 - (bottomRows + 2))
+    const third = Math.floor((paneWidth - 2) / 3)
+    return (
+      <box style={{ flexDirection: "column", width: paneWidth, height: rowsAvailable, flexShrink: 0 }}>
+        <WorkHeader running={running} who={insp.who} activity={activity} elapsed={elapsed} status={status} width={paneWidth} onStop={stop} />
+        <box style={{ height: 1, flexShrink: 0 }} />
+        <PlanPanel s={insp} width={paneWidth} rows={planCap} />
+        <box style={{ height: 1, flexShrink: 0 }} />
+        <ActivityLog lines={activityLines} scrollRef={activityScroll} height={activityRows} width={paneWidth} />
+        <box style={{ flexDirection: "row", height: bottomRows + 2, flexShrink: 0, marginTop: 1 }}>
+          <FilesPanel s={insp} width={third} rows={bottomRows - 1} />
+          <ContextPanel c={contextPanel} width={third} />
+          <TokensPanel roles={spent.roles} total={{ usage: spent.total, cost: spent.cost }} width={paneWidth - 2 * third} />
+        </box>
+      </box>
+    )
+  }
+
+  const transcript = (all: Line[], style: Record<string, unknown>) => (
+    <scrollbox ref={scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1, ...style }} focused={false}>
+      {all.map((line) => (
+        <TranscriptLine key={line.id} line={line} />
+      ))}
+      {running && !split ? (
+        <box style={{ flexDirection: "row", marginTop: 1, paddingLeft: 2, flexShrink: 0 }}>
+          <Spinner kind="dots" />
+          <text fg={theme.text}>{` ${activity || "Working…"}`}</text>
+        </box>
+      ) : null}
+    </scrollbox>
+  )
+  const controls = (paneWidth: number) => renderControls(paneWidth, placeholder, [3, Math.max(3, Math.min(10, Math.floor(height / 3)))])
+
+  const split = width >= SPLIT_MIN
+  if (split) {
+    const leftWidth = Math.floor(width * 0.4)
+    const rightWidth = width - leftWidth - 3
+    return (
+      <box style={{ flexDirection: "column", flexGrow: 1 }}>
+        <box style={{ flexDirection: "row", height: height - 1, flexShrink: 0, paddingTop: 1 }}>
+          <box style={{ flexDirection: "column", width: leftWidth, height: height - 2, paddingLeft: 2, paddingRight: 1 }}>
+            <SessionBlock info={sessionInfo} width={leftWidth - 3} />
+            {transcript(chatLines, {})}
+            <box style={{ flexDirection: "column", flexShrink: 0 }}>{controls(leftWidth - 3)}</box>
+          </box>
+          <box border={["left"]} borderColor={theme.button} style={{ flexDirection: "column", width: width - leftWidth, height: height - 2, paddingLeft: 1, paddingRight: 2 }}>
+            {details(rightWidth - 2, height - 2)}
+          </box>
+        </box>
+        <Footer left={shortCwd()} right={footerRight} width={width} />
+      </box>
+    )
+  }
+
   const promptWidth = Math.max(40, width - 4)
+  if (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", 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.
+            controls(promptWidth)
+          ) : (
+            <Hints width={promptWidth} items={[{ key: "ctrl+o", label: "back to the chat", onPress: () => setNarrowView("chat") }, closeHint]} />
+          )}
+        </box>
+        <Footer left={shortCwd()} right={footerRight} width={width} />
+      </box>
+    )
+  }
   return (
     <box style={{ flexDirection: "column", flexGrow: 1 }}>
-      <scrollbox
-        ref={scrollRef}
-        stickyScroll
-        stickyStart="bottom"
-        style={{ flexGrow: 1, paddingLeft: 2, paddingRight: 2, paddingTop: 1 }}
-        focused={false}
-      >
-        {lines.map((line) => (
-          <TranscriptLine key={line.id} line={line} />
-        ))}
-        {running ? (
-          <box style={{ flexDirection: "row", marginTop: 1, paddingLeft: 2, flexShrink: 0 }}>
-            <Spinner kind="dots" />
-            <text fg={theme.text}>{` ${activity || "Working…"}`}</text>
-          </box>
-        ) : null}
-      </scrollbox>
-      <box style={{ flexDirection: "column", paddingLeft: 2, paddingRight: 2, flexShrink: 0 }}>
-        {renderControls(
-          promptWidth,
-          running
-            ? coding
-              ? "The coding agent is writing a test · esc to stop"
-              : `${thinking ? "ForgeQE's agent" : "The browser agent"} is working · esc to stop`
-            : "Ask ForgeQE: a goal, test cases, a test, a pipeline…",
-          [3, Math.max(3, Math.min(10, Math.floor(height / 3)))],
-        )}
-      </box>
+      {transcript(lines, { paddingLeft: 2, paddingRight: 2, paddingTop: 1 })}
+      <box style={{ flexDirection: "column", paddingLeft: 2, paddingRight: 2, flexShrink: 0 }}>{controls(promptWidth)}</box>
       <Footer left={shortCwd()} right={footerRight} width={width} />
     </box>
   )

package/src/tui/components.tsx

@@ -48,6 +48,8 @@ export type PromptProps = {
   rightColor?: string
   /** A secret being entered: the box shows one dot per character instead of a text field, so the value is never drawn. */
   masked?: number
+  /** Narrow pane beside a session panel that names the model and profile: the bottom row shows only `right`. */
+  compact?: boolean
 }
 
 /** Enter sends; Shift+Enter, Alt+Enter or Ctrl+J start a new line. */
@@ -106,16 +108,18 @@ export function Prompt(props: PromptProps) {
             placeholderColor={theme.faint}
           />
         )}
-        <box style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 1 }}>
-          <text>
-            <span fg={theme.muted}>{"Model  "}</span>
-            <span fg={theme.text}>{props.model || "…"}</span>
-          </text>
+        <box style={{ flexDirection: "row", justifyContent: props.compact ? "flex-end" : "space-between", marginTop: 1 }}>
+          {props.compact ? null : (
+            <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>
+            {props.right && !props.compact ? <span fg={theme.faint}>{"  ·  "}</span> : null}
+            {props.compact ? null : <span fg={theme.muted}>{"profile "}</span>}
+            {props.compact ? null : <span fg={theme.text}>{props.profile || "none"}</span>}
           </text>
         </box>
       </box>