@capagents/forgeqe 1.0.8 → 1.1.0

package/src/tui/App.tsx

@@ -26,14 +26,17 @@ import { meterSnapshot, requestLine } from "../usage.ts"
 import { cleanSelection, copyText } from "./clipboard.ts"
 import { ButtonBar, ChoicePanel, Footer, Hints, Logo, Prompt, Spinner, type Button, type Hint } from "./components.tsx"
 import { setupChecklist, type SetupItem } from "./setup.ts"
-import { EXAMPLES, TIPS, formatDuration, formatTokens, packageVersion, pick, shortCwd, theme } from "./theme.ts"
+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 { Dialog, dialogSpec } from "./dialogs.ts"
 import { activityFromLog, clip, hostOf, 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"
-import { REFINE_CHOICES, RefinePanel, type RefineChoice, type RefineState } from "./refine-panel.tsx"
+import { initialChoice, REFINE_CHOICES, RefinePanel, type RefineChoice, type RefineState } from "./refine-panel.tsx"
 import { refine } from "../refine.ts"
 import { nextSteps, type NextStep } from "./next.ts"
 import { CAPABILITIES } from "../capabilities/registry.ts"
@@ -154,6 +157,12 @@ export function App({ options }: { options: TuiOptions }) {
   const [next, setNext] = useState<NextStep[]>([])
   /** What the prompt holds, for suggestions; and the suggestion state: which is selected, which word was dismissed. */
   const [promptText, setPromptText] = useState("")
+  // The rows the request in the prompt needs; the start screen gives a long one room by folding its other sections.
+  const [promptLines, setPromptLines] = useState(1)
+  const [tipIndex, setTipIndex] = useState(() => Math.floor(Math.random() * TIPS.length))
+  const [shortcuts, setShortcuts] = useState(false)
+  const shortcutsRef = useRef(false)
+  shortcutsRef.current = shortcuts
   const [sugg, setSugg] = useState<{ selected: number; dismissed?: string }>({ selected: 0 })
   const [workItem, setWorkItem] = useState<WorkItem | null | undefined>(undefined)
   const suggRef = useRef<{ list: Suggestion[]; trigger: ReturnType<typeof triggerAt> }>({ list: [], trigger: null })
@@ -170,8 +179,8 @@ export function App({ options }: { options: TuiOptions }) {
   /** 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")
   // The split view's chat at the full width, for reading a long answer; the panels come back with Split view.
-  const [chatWide, setChatWide] = useState(false)
-  const setupRef = useRef<{ key: string; items: SetupItem[] }>({ key: "", items: [] })
+  const [chatWide, setChatWide] = useState(true)
+  const setupRef = useRef<{ key: string; items: SetupItem[]; start: StartAction[]; recent: RecentItem[]; first: GetStarted[]; facts: Fact[] }>({ key: "", items: [], start: [], recent: [], first: [], facts: [] })
   // Which panel the keys go to (shift+tab moves on), the row selected in the plan and files, and the activity filter.
   const [nav, setNavState] = useState<{ focus: Focus; plan: number; files: number; filter: ActivityFilter }>({ focus: "chat", plan: 0, files: 0, filter: "all" })
   const navRef = useRef(nav)
@@ -183,6 +192,8 @@ export function App({ options }: { options: TuiOptions }) {
   const contextInfo = useRef<{ key: string; knowledge: number; mcp: string[] }>({ key: "", knowledge: 0, mcp: [] })
 
   const [lines, setLines] = useState<Line[]>([])
+  const linesRef = useRef(0)
+  linesRef.current = lines.length
   const [headed, setHeaded] = useState(Boolean(options.headed))
   const [maxSteps, setMaxSteps] = useState(40)
   const [profile, setProfile] = useState(options.profile || "")
@@ -201,8 +212,6 @@ export function App({ options }: { options: TuiOptions }) {
   const [coding, setCoding] = useState(false)
   const [suiteProgress, setSuiteProgress] = useState<{ done: number; total: number } | null>(null)
   const [copied, setCopied] = useState("")
-  const [example] = useState(() => pick(EXAMPLES))
-  const [tip] = useState(() => pick(TIPS))
   const started = useRef<number | null>(null)
 
   const detailRef = useRef<Detail>(detailFrom(options.verbose))
@@ -289,6 +298,13 @@ export function App({ options }: { options: TuiOptions }) {
     return () => clearInterval(timer)
   }, [status])
 
+  // The start screen's tip changes every 8 seconds; only while it shows, so a session does not re-render for it.
+  useEffect(() => {
+    if (lines.length || status === "running") return
+    const timer = setInterval(() => setTipIndex((n) => n + 1), 8000)
+    return () => clearInterval(timer)
+  }, [lines.length, status])
+
   // The terminal hands mouse drags to the TUI, so text selected with the mouse is copied here when the drag ends.
   useEffect(() => {
     let timer: ReturnType<typeof setTimeout> | undefined
@@ -521,7 +537,7 @@ export function App({ options }: { options: TuiOptions }) {
     void (options.refine || refine)({ config: cfg, cwd: sessionSetup(cfg, options.repo).cwd, text, recent: convoRef.current, signal: controller.signal })
       .then((result) => {
         if (controller.signal.aborted || refiningRef.current?.phase !== "working") return
-        setRefine({ phase: "done", original: text, result, choice: 0 })
+        setRefine({ phase: "done", original: text, result, choice: initialChoice(result.missing) })
       })
       .catch((err) => {
         if (controller.signal.aborted) return
@@ -562,6 +578,7 @@ export function App({ options }: { options: TuiOptions }) {
     else if (run.id === "details" || run.id === "chat") setNarrowView(run.id)
     else if (run.id === "refine") refineRef.current()
     else if (run.id === "wide") setChatWide((w) => !w)
+    else if (run.id === "shortcuts") setShortcuts(true)
     else if (run.id === "panels") setNav((n) => ({ ...n, focus: planLines(inspRef.current).length ? "plan" : "activity" }))
   }
 
@@ -575,6 +592,8 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   useKeyboard((key) => {
+    // Esc is the shell's (stop, close a list or panel, cancel): the prompt never acts on it, or it would lose focus.
+    if (key.name === "escape") key.preventDefault()
     const pal = paletteRef.current
     if (pal) {
       // Keys can arrive faster than renders: every change builds on the latest state, never on this render's copy.
@@ -650,17 +669,22 @@ export function App({ options }: { options: TuiOptions }) {
     // The panels: shift+tab moves focus through those on screen; a focused panel takes the arrows, enter, and esc.
     const panes = (width >= SPLIT_MIN && !chatWide) || (width < SPLIT_MIN && narrowView === "details")
     const insp = inspRef.current
-    const shown = (f: Focus) => f === "activity" || f === "files" || (f === "plan" && planLines(insp).length > 0) || (f === "chat" && width >= SPLIT_MIN)
+    const panelsOpen = width >= SPLIT_MIN && !chatWide
+    const shown = (f: Focus) => f === "activity" || f === "files" || (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()
       setNav((n) => ({ ...n, focus: nextFocus(n.focus, shown) }))
       return
     }
     const at = navRef.current.focus
     if (panes && at !== "chat" && shown(at)) {
+      // Keys a panel takes are its own: the prompt, focused again by esc, must not see the same esc (it would blur).
+      if (key.name === "escape" || key.name === "return" || key.name === "enter" || key.name === "kpenter") key.preventDefault()
       const list = at === "plan" ? planLines(insp).length : at === "files" ? filesByUse(insp).length : 0
       const move = (d: number) => setNav((n) => ({ ...n, [at]: Math.max(0, Math.min(list - 1, (n[at as "plan" | "files"] ?? 0) + d)) }))
       const page = Math.max(3, Math.floor(height / 3))
-      if (key.name === "escape") return setNav((n) => ({ ...n, focus: width >= SPLIT_MIN ? "chat" : "activity" }))
+      if (key.name === "escape") return setNav((n) => ({ ...n, focus: panelsOpen ? "chat" : "activity" }))
       if (at === "activity") {
         const box = activityScroll.current
         if (key.name === "up") return box?.scrollBy(-1)
@@ -688,9 +712,29 @@ export function App({ options }: { options: TuiOptions }) {
         }
       }
       // Anything typed goes back to the chat, where the prompt is.
-      if (!key.ctrl && !key.meta && key.sequence && key.sequence.length === 1 && key.sequence > " " && width >= SPLIT_MIN) return setNav((n) => ({ ...n, focus: "chat" }))
+      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
     }
+    // ? on an empty prompt: every key in one panel; esc or ? closes it.
+    if (shortcutsRef.current) {
+      if (key.name === "escape" || key.sequence === "?") setShortcuts(false)
+      return
+    }
+    if (key.sequence === "?" && !promptTextRef.current.trim() && !entryRef.current && !dialogRef.current) {
+      setShortcuts(true)
+      setDraft("")
+      setInputKey((k) => k + 1)
+      return
+    }
+    // The start screen's actions: alt+1 to alt+4 put one in the prompt.
+    if (key.meta && /^[1-4]$/.test(key.name || "") && linesRef.current === 0 && !abortRef.current) {
+      const n = Number(key.name) - 1
+      const a = setupRef.current.start[n]
+      const g = setupRef.current.first[n]
+      if (a) fillPrompt(a.request)
+      else if (!setupRef.current.start.length && g) g.command ? submitRef.current(g.command) : g.fix && push("sys", g.fix, "chat")
+      return
+    }
     if (suggRef.current.list.length && suggRef.current.trigger && !entryRef.current) {
       const n = suggRef.current.list.length
       if (key.name === "up") return setSugg((x) => ({ ...x, selected: (x.selected + n - 1) % n }))
@@ -709,7 +753,11 @@ export function App({ options }: { options: TuiOptions }) {
       return
     }
     if (key.name === "r" && key.ctrl && !entryRef.current) startRefine()
-    if (key.name === "o" && key.ctrl && width < SPLIT_MIN) setNarrowView((v) => (v === "chat" ? "details" : "chat"))
+    // ctrl+o: the panels (plan, activity, files, context, tokens) beside the chat on a wide terminal, in its place on a narrow one.
+    if (key.name === "o" && key.ctrl) {
+      if (width >= SPLIT_MIN) setChatWide((w) => !w)
+      else setNarrowView((v) => (v === "chat" ? "details" : "chat"))
+    }
     if (key.name === "escape" && abortRef.current) openDialog("stop")
   })
 
@@ -1065,7 +1113,9 @@ export function App({ options }: { options: TuiOptions }) {
       pushProduced()
       // What this request used and cost in total: ForgeQE's agent, browser runs, Scribe, and the reviewer.
       // The split view's session and tokens panels show this; only the one-pane view needs it in the chat.
-      const spent = widthRef.current < SPLIT_MIN ? requestLine(meterStart) : ""
+      // The footer and the tokens panel show what a request used; the conversation stays about the work.
+      const spent = ""
+      void meterStart
       if (spent) push("sys", spent, "chat")
       finish(finalStatus, followUps)
     }
@@ -1090,6 +1140,19 @@ export function App({ options }: { options: TuiOptions }) {
     else void askAgent(text, cfg)
   }
 
+  /** Reads forgeqe.yaml and llms.json again (after /init wrote them), keeping the session going. */
+  const reloadConfig = () => {
+    let cfg = loadConfig({ configPath: options.configPath, profile: options.profile })
+    if (options.profile) cfg = selectProfile(cfg, options.profile)
+    configRef.current = cfg
+    setProfile(cfg.activeProfile)
+    setModel(modelLabel(cfg))
+    setupRef.current.key = ""
+    contextInfo.current.key = ""
+    closeBrain()
+    bump()
+  }
+
   useEffect(() => {
     if (booted.current) return
     booted.current = true
@@ -1159,7 +1222,8 @@ export function App({ options }: { options: TuiOptions }) {
     if (!text) return
     // Setup notes come before the request, so they do not read as its answer; the split view shows them in its session panel.
     const notes = priceNotesRef.current.splice(0)
-    if (width < SPLIT_MIN) for (const w of notes) push("sys", `Price check: ${w}`, "chat")
+    // Price notes stay out of the conversation: forgeqe models and the reports say what a run cost.
+    void notes
     push("user", text)
     const cmd = parseCommand(text)
     if (cmd.type === "help") {
@@ -1201,6 +1265,17 @@ export function App({ options }: { options: TuiOptions }) {
       }
       return
     }
+    if (cmd.type === "init") {
+      // forgeqe init in this folder, then the session reads what it wrote: the start screen updates at once.
+      try {
+        const r = initWorkspace(process.cwd(), {})
+        push("sys", [r.created.length ? `Created in ${shortCwd()}:` : "Nothing to create: this folder is set up.", ...r.created.map((f) => `  ✚ ${path.relative(process.cwd(), f) || f}`), ...r.notes].join("\n"), "chat")
+        reloadConfig()
+      } catch (err) {
+        push("err", (err as Error).message, "chat")
+      }
+      return
+    }
     if (cmd.type === "features") {
       if (configRef.current) push("sys", featuresText(configRef.current))
       else push("err", "Config is not loaded.")
@@ -1270,7 +1345,11 @@ export function App({ options }: { options: TuiOptions }) {
           ? "headed"
           : ""
   const rightColor = running ? theme.warn : status === "done" ? theme.ok : status === "fail" ? theme.err : theme.muted
-  const footerRight = VERSION ? `ForgeQE ${VERSION}` : "ForgeQE"
+  const footerVersion = VERSION ? `ForgeQE ${VERSION}` : "ForgeQE"
+  // In the conversation, the footer is the status line: the model, what the session used, and the version.
+  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
   // 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}` : ""
@@ -1297,8 +1376,10 @@ 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 row under the prompt leaves them out.
+  // One column by default, as in Claude Code; ctrl+o (or Panels) opens the plan, activity, files, context, and
+  // tokens beside it on a wide terminal, or in its place on a narrow one.
   const wide = width >= SPLIT_MIN
+  const panelsOpen = wide && !chatWide
   const openPalette = () => {
     paletteRef.current = { query: "", selected: 0 }
     setPalette(paletteRef.current)
@@ -1308,23 +1389,26 @@ export function App({ options }: { options: TuiOptions }) {
   // `drop`: the order they give way on a narrow row; Refine, Search, and Stop always stay.
   const refineButton: Button = { icon: "✦", label: "Refine", keys: "ctrl+r", color: theme.memory, onPress: () => refineRef.current(), active: Boolean(promptText.trim()) }
   const searchButton: Button = { icon: "⌕", label: "Search", keys: "ctrl+p", color: theme.accent, onPress: openPalette }
-  // The view: in the split view, Panels and Wide chat sit in the right pane's status line, where there is room;
-  // Split view comes back here when the chat is wide, and Details on a narrow terminal.
+  // The view: with the panels open, moving into them and closing them sit in their status line; otherwise Panels
+  // (Details on a narrow terminal) opens them.
   const toggleWide = () => setChatWide((w) => !w)
   const paneButtons: Button[] = [
-    { icon: "▦", label: "Panels", keys: "shift+tab", color: theme.thought, onPress: focusPanels, drop: 2 },
-    { icon: "⤢", label: "Wide chat", color: theme.muted, onPress: toggleWide, drop: 1 },
+    { icon: "▦", label: "Focus panels", keys: "shift+tab", color: theme.thought, onPress: focusPanels, drop: 2 },
+    { icon: "✕", label: "Close", keys: "ctrl+o", color: theme.muted, onPress: toggleWide, drop: 1 },
   ]
   const viewButtons: Button[] = wide
     ? chatWide
-      ? [{ icon: "◧", label: "Split view", color: theme.thought, onPress: toggleWide, drop: 2 }]
+      ? [{ icon: "▦", label: "Panels", keys: "ctrl+o", color: theme.thought, onPress: toggleWide, drop: 2 }]
       : []
     : [{ icon: "◧", label: "Details", keys: "ctrl+o", color: theme.thought, onPress: () => setNarrowView("details"), drop: 1 }]
   const idleButtons: Button[] = [refineButton, searchButton, ...viewButtons, ...(wide ? [] : [{ icon: "⇄", label: "Profile", keys: "tab", color: theme.muted, onPress: cycleProfile, drop: 4 }])]
   const runningButtons: Button[] = [{ icon: "■", label: "Stop", keys: "esc", color: theme.warn, onPress: () => openDialog("stop") }, searchButton, ...viewButtons]
-  const idleHints: Hint[] = [...copiedHint, ...(lastStats && !wide && !copied ? [{ key: `last run ${lastStats}`, label: "" }] : []), closeHint]
+  const shortcutsHint: Hint = { key: "?", label: "shortcuts", onPress: () => setShortcuts(true) }
+  // ? is offered where there is room for it: the start screen of a terminal 110 columns or wider; it works everywhere.
+  const idleHints: Hint[] = [...copiedHint, ...(home && width >= 110 ? [shortcutsHint] : []), closeHint]
   // The one-pane view has no tokens panel, so the tokens and time show here.
-  const runningHints: Hint[] = [...copiedHint, ...(wide || copied ? [] : [{ key: `${formatTokens(tokens)} tokens · ${elapsed}`, label: "" }]), closeHint]
+  // While a request runs, the line above the prompt says what is happening, for how long, and with how many tokens.
+  const runningHints: Hint[] = [...copiedHint, closeHint]
   const runningLeft = (
     <box style={{ flexDirection: "row", marginRight: 1 }}>
       <Spinner kind="bar" />
@@ -1413,59 +1497,167 @@ export function App({ options }: { options: TuiOptions }) {
           model={model}
           right={right}
           rightColor={rightColor}
-          compact={width >= SPLIT_MIN && !home}
-          focused={!palette && !refining && (nav.focus === "chat" || (width < SPLIT_MIN && narrowView === "chat"))}
+          compact={!home}
+          focused={!palette && !refining && (panelsOpen ? nav.focus === "chat" : wide || narrowView === "chat")}
           initialValue={draft}
           onText={(t) => {
             promptTextRef.current = t
             setPromptText(t)
           }}
+          onLines={setPromptLines}
         />
         <ButtonBar width={promptWidth} buttons={running ? runningButtons : idleButtons} hints={running ? runningHints : idleHints} left={running ? runningLeft : undefined} />
       </>
     )
   }
 
+  // Back on the start screen after /clear, its sections are read again: new reports and runs show up.
+  if (!home) setupRef.current.key = ""
+  const shortcutsOverlay = shortcuts ? <ShortcutsPanel width={width} wide={width >= SPLIT_MIN} onClose={() => setShortcuts(false)} /> : null
+
   if (home) {
-    const promptWidth = Math.max(40, Math.min(width - 8, 120))
+    // One column, as wide as the prompt, every section on its left edge.
+    const promptWidth = Math.max(40, Math.min(width - 8, 140))
     // What is set up, while something is not: each open item says how, or runs the command that does it.
     const cfgHome = configRef.current
     const setupKey = cfgHome ? `${cfgHome.configPath}|${cfgHome.activeProfile}` : ""
-    if (cfgHome && setupRef.current.key !== setupKey) setupRef.current = { key: setupKey, items: setupChecklist(cfgHome) }
-    const setup = setupRef.current.items
+    if (cfgHome && setupRef.current.key !== setupKey) {
+      const items = setupChecklist(cfgHome)
+      const recent = recentWork(path.resolve(cfgHome.export.outDir))
+      let signIns: Record<string, string> = {}
+      try {
+        // "Azure DevOps (PAT)": how each system's server signs in, as the session panel says it.
+        signIns = Object.fromEntries(externalMcp(cfgHome).servers.filter((x) => x.signIn).map((x) => [x.label.replace(/ MCP$/, ""), x.signIn!.startsWith("PAT") ? "PAT" : "az login"]))
+      } catch {}
+      setupRef.current = {
+        key: setupKey,
+        items,
+        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 }),
+      }
+    }
+    const { items: setup, start, recent, first, facts } = setupRef.current
     const open = setup.filter((i) => !i.done)
-    const pickSetup = (i: SetupItem) => (i.command ? submitRef.current(i.command) : i.fix && push("sys", i.fix, "chat"))
+    // Each missing item with how to set it up, in the chat; the first that a command sets up (/auth) is offered last.
+    const explainSetup = (items: SetupItem[]) => push("sys", items.map((i) => `○ ${i.fix}${i.command ? ` Type ${i.command} to start.` : ""}`).join("\n"), "chat")
+
+    // Rows: the logo, the project line, and the prompt always; then Start with, Continue, and Setup while they fit.
+    // A long request takes rows from them, last section first, so the box never scrolls while there is room.
+    const loading = !cfgHome
+    // Each section is a blank row and then its own rows: a heading and its items, or the setup line.
+    // Get started takes Start with's place while there is nothing to start with: no model, or no forgeqe.yaml.
+    const offer: { id: string; label: string; detail: string; run: () => void }[] = start.length
+      ? start.map((a) => ({ id: a.id, label: a.label, detail: a.detail, run: () => fillPrompt(a.request) }))
+      : first.map((g) => ({ id: g.id, label: g.label, detail: g.detail, run: () => (g.command ? submitRef.current(g.command) : g.fix && push("sys", g.fix, "chat")) }))
+    const offerTitle = start.length ? "Start with" : "Get started"
+    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 room = height - fixed
+    const want = Math.max(5, Math.min(promptLines, room - 1))
+    let left = room - want
+    const showStart = startRows > 0 && left >= startRows
+    if (showStart) left -= startRows
+    const showRecent = recentRows > 0 && left >= recentRows
+    if (showRecent) left -= recentRows
+    const showSetup = setupRows > 0 && left >= setupRows
+    const maxRows = Math.max(5, room - (showStart ? startRows : 0) - (showRecent ? recentRows : 0) - (showSetup ? setupRows : 0))
+    const heading = (t: string) => <text fg={theme.muted}>{t}</text>
+    const keyCell = (k: string) => <span fg={theme.faint}>{k.padEnd(4)}</span>
+    const done = setup.length - open.length
     return (
       <box style={{ flexDirection: "column", flexGrow: 1 }}>
-        <box style={{ flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center" }}>
+        {/* Clipped, never pushed: the footer stays on screen whatever the sections above it need. */}
+        <box style={{ flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: "hidden", alignItems: "center", justifyContent: "center" }}>
           <Logo />
-          <box style={{ height: 2 }} />
-          {renderControls(promptWidth, `Describe a goal… "${example}"`, [4, Math.max(4, Math.min(12, height - 22))])}
-          <box style={{ height: open.length ? 2 : 3 }} />
-          {open.length ? (
-            <box style={{ flexDirection: "column", alignItems: "center", flexShrink: 0, marginBottom: 1 }}>
-              <box style={{ flexDirection: "row", flexShrink: 0 }}>
-                <text fg={theme.muted}>{"Setup  "}</text>
-                {(setup.reduce((n, i) => n + i.label.length + 5, 7) <= width - 4 ? setup : open).map((i) => (
-                  <box key={i.id} onMouseDown={i.done ? undefined : () => pickSetup(i)} style={{ flexDirection: "row", paddingLeft: 1, paddingRight: 1, marginRight: 1, backgroundColor: i.done ? undefined : theme.button }}>
-                    <text>
-                      <span fg={i.done ? theme.ok : theme.warn}>{i.done ? "✓ " : "○ "}</span>
-                      <span fg={i.done ? theme.muted : theme.text}>{i.label}</span>
+          <box style={{ paddingTop: 1, height: 2, flexShrink: 0 }}>
+          <text>
+            {facts.length ? (
+              facts.map((f, i) => (
+                <span key={i} fg={f.tone === "name" ? theme.text : f.tone === "warn" ? theme.warn : theme.muted}>
+                  {`${i ? "  ·  " : ""}${f.text}`}
+                </span>
+              ))
+            ) : (
+              <span fg={theme.faint}>{" "}</span>
+            )}
+          </text>
+          </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])}
+            {showStart ? (
+              <box style={{ flexDirection: "column", marginTop: 1, height: startRows - 1, flexShrink: 0 }}>
+                {heading(offerTitle)}
+                {loading
+                  ? [0, 1, 2, 3].map((i) => <text key={i} fg={theme.faint}>{i ? " " : "  Loading what works in this setup…"}</text>)
+                  : offer.map((a, i) => (
+                      <box key={a.id} onMouseDown={a.run} style={{ flexDirection: "row", justifyContent: "space-between", flexShrink: 0 }}>
+                        <text>
+                          <span fg={theme.accent}>{"  ▸ "}</span>
+                          <span fg={theme.text}>{a.label.padEnd(32)}</span>
+                          <span fg={theme.faint}>{clip(a.detail, Math.max(10, promptWidth - 50))}</span>
+                        </text>
+                        <text>{keyCell(`alt+${i + 1}`)}</text>
+                      </box>
+                    ))}
+              </box>
+            ) : null}
+            {showRecent ? (
+              <box style={{ flexDirection: "column", marginTop: 1, height: recentRows - 1, flexShrink: 0 }}>
+                {heading("Continue")}
+                {recent.map((r) => (
+                  <box key={r.dir} style={{ flexDirection: "row", justifyContent: "space-between", flexShrink: 0 }}>
+                    <text onMouseDown={() => openFile(r.open)}>
+                      <span fg={r.kind === "report" ? theme.memory : r.status === "complete" || r.status === "passed" ? theme.ok : r.status ? theme.err : theme.muted}>
+                        {r.kind === "report" ? "  ▤ " : r.status === "complete" || r.status === "passed" ? "  ✓ " : r.status ? "  ✗ " : "  ▸ "}
+                      </span>
+                      <span fg={theme.muted}>{r.kind === "report" ? "Report  " : "Run     "}</span>
+                      <span fg={theme.text}>{clip(r.title, Math.max(10, promptWidth - 40))}</span>
                     </text>
+                    <box style={{ flexDirection: "row" }}>
+                      <text fg={theme.faint}>{`${ago(r.when)}  `}</text>
+                      <text fg={theme.accent} onMouseDown={() => openFile(r.open)}>
+                        {"open"}
+                      </text>
+                      {r.kind === "run" ? (
+                        <text fg={theme.accent} onMouseDown={() => fillPrompt(`Run this goal again: ${r.title}`)}>
+                          {"  rerun"}
+                        </text>
+                      ) : null}
+                    </box>
                   </box>
                 ))}
               </box>
-              <text fg={theme.faint}>{`${setup.length - open.length} of ${setup.length} set up · click one to see how · /features shows what each feature needs`}</text>
-            </box>
-          ) : null}
-          <text>
-            <span fg={theme.warn}>{"● "}</span>
-            <span fg={theme.text}>{"Tip "}</span>
-            <span fg={theme.muted}>{tip}</span>
-          </text>
+            ) : null}
+            {showSetup ? (
+              // Setup in one line: how far it is, what is missing in words, and one link that says how to set it up.
+              <box style={{ flexDirection: "row", height: 1, flexShrink: 0, marginTop: 1 }}>
+                <text>
+                  <span fg={theme.muted}>{"Setup  "}</span>
+                  <span fg={theme.ok}>{"▰".repeat(done)}</span>
+                  <span fg={theme.muted}>{"▱".repeat(open.length)}</span>
+                  <span fg={theme.muted}>{loading ? "  checking…" : `  ${done} of ${setup.length} · `}</span>
+                  {loading ? null : <span fg={theme.text}>{setupSentence(open.map((i) => i.label), promptWidth - 44)}</span>}
+                </text>
+                {loading ? null : (
+                  <box onMouseDown={() => explainSetup(open)} style={{ marginLeft: 2, paddingLeft: 1, paddingRight: 1, backgroundColor: theme.button }}>
+                    <text>
+                      <span fg={theme.warn}>{"▸ "}</span>
+                      <span fg={theme.text}>{"how to set up"}</span>
+                    </text>
+                  </box>
+                )}
+              </box>
+            ) : null}
+          </box>
         </box>
-        <Footer left={shortCwd()} right={footerRight} width={width} />
+        <Footer left={`● Tip  ${TIPS[tipIndex % TIPS.length]}`} right={footerRight} width={width} cut="end" />
         {paletteOverlay}
+        {shortcutsOverlay}
       </box>
     )
   }
@@ -1504,9 +1696,7 @@ export function App({ options }: { options: TuiOptions }) {
     ? coding
       ? "The coding agent is writing a test · esc to stop"
       : `${thinking ? "ForgeQE's agent" : "The browser agent"} is working · esc to stop`
-    : width >= SPLIT_MIN
-      ? "Ask ForgeQE · / commands · @ references"
-      : "Ask ForgeQE: a goal, test cases, a test, a pipeline… (/ commands, @ references)"
+    : "Ask ForgeQE… (/ for commands, @ to reference a run, file, or work item)"
   const chatLines = lines.filter((l) => l.pane !== "activity")
   const activityLines = lines.filter((l) => l.pane === "activity")
   const stop = () => openDialog("stop")
@@ -1548,37 +1738,38 @@ export function App({ options }: { options: TuiOptions }) {
 
   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} />
+      {all.map((line, i) => (
+        <TranscriptLine key={line.id} line={line} prev={all[i - 1]} />
       ))}
-      {running && (!split || chatWide) ? (
-        <box style={{ flexDirection: "row", marginTop: 1, paddingLeft: 2, flexShrink: 0 }}>
-          <Spinner kind="dots" />
-          <text fg={theme.text}>{` ${activity || "Working…"}`}</text>
+      {running && !panelsOpen ? (
+        // What is happening now, for how long, and with how many tokens, as one line under the conversation.
+        <box style={{ flexDirection: "row", marginTop: 1, flexShrink: 0 }}>
+          <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>
+          </text>
         </box>
       ) : null}
     </scrollbox>
   )
-  const controls = (paneWidth: number) => renderControls(paneWidth, placeholder, [3, Math.max(3, Math.min(10, Math.floor(height / 3)))])
+  // 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))])
 
-  const split = width >= SPLIT_MIN
+  const split = panelsOpen
   if (split) {
-    // Wide chat: the conversation across the screen for reading, the panels hidden until Split view.
-    const leftWidth = chatWide ? width : Math.floor(width * 0.4)
+    const leftWidth = Math.floor(width * 0.4)
     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: chatWide ? 2 : 1 }}>
-            <SessionPanel info={sessionInfo} width={leftWidth - (chatWide ? 4 : 3)} />
-            {/* Wide chat shows what the agents do in the conversation, as the one-pane view does. */}
-            {transcript(chatWide ? lines : chatLines, {})}
-            <box style={{ flexDirection: "column", flexShrink: 0 }}>{controls(leftWidth - (chatWide ? 4 : 3))}</box>
+          <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} />
+            {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)}
           </box>
-          {chatWide ? null : (
-            <box style={{ flexDirection: "column", width: width - leftWidth, height: height - 2, paddingLeft: 1, paddingRight: 2 }}>
-              {details(width - leftWidth - 3, height - 2)}
-            </box>
-          )}
         </box>
         <Footer left={shortCwd()} right={footerRight} width={width} />
         {paletteOverlay}
@@ -1587,7 +1778,7 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const promptWidth = Math.max(40, width - 4)
-  if (narrowView === "details") {
+  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>