@capagents/forgeqe 1.0.9 → 1.1.0

package/src/tui/App.tsx

@@ -26,8 +26,9 @@ 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 { initWorkspace } from "../init.ts"
 import { ShortcutsPanel } from "./shortcuts.tsx"
-import { ago, projectLine, setupSentence, recentWork, startActions, type RecentItem, type StartAction } from "./landing.ts"
+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"
@@ -35,7 +36,7 @@ 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"
@@ -178,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[]; start: StartAction[]; recent: RecentItem[] }>({ key: "", items: [], start: [], recent: [] })
+  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)
@@ -536,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
@@ -668,7 +669,8 @@ 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()
@@ -682,7 +684,7 @@ export function App({ options }: { options: TuiOptions }) {
       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)
@@ -710,7 +712,7 @@ 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.
@@ -726,8 +728,11 @@ export function App({ options }: { options: TuiOptions }) {
     }
     // 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 a = setupRef.current.start[Number(key.name) - 1]
+      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) {
@@ -748,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")
   })
 
@@ -1104,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)
     }
@@ -1129,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
@@ -1198,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") {
@@ -1240,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.")
@@ -1309,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}` : ""
@@ -1336,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)
@@ -1347,25 +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 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, ...(lastStats && !wide && !copied ? [{ key: `last run ${lastStats}`, label: "" }] : []), ...(home && width >= 110 ? [shortcutsHint] : []), closeHint]
+  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" />
@@ -1454,8 +1497,8 @@ 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
@@ -1479,24 +1522,37 @@ export function App({ options }: { options: TuiOptions }) {
     const cfgHome = configRef.current
     const setupKey = cfgHome ? `${cfgHome.configPath}|${cfgHome.activeProfile}` : ""
     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: setupChecklist(cfgHome),
-        start: startActions(cfgHome),
-        recent: recentWork(path.resolve(cfgHome.export.outDir)),
+        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 } = setupRef.current
+    const { items: setup, start, recent, first, facts } = setupRef.current
     const open = setup.filter((i) => !i.done)
     // 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")
-    const facts = projectLine(cfgHome, process.cwd(), cfgHome ? modelLabel(cfgHome) : "")
 
     // 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.
-    const startRows = loading ? 1 + 1 + 4 : start.length ? 1 + 1 + start.length : 0
+    // 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
@@ -1521,8 +1577,8 @@ export function App({ options }: { options: TuiOptions }) {
           <text>
             {facts.length ? (
               facts.map((f, i) => (
-                <span key={i} fg={i === 0 ? theme.text : theme.muted}>
-                  {`${i ? "  ·  " : ""}${f}`}
+                <span key={i} fg={f.tone === "name" ? theme.text : f.tone === "warn" ? theme.warn : theme.muted}>
+                  {`${i ? "  ·  " : ""}${f.text}`}
                 </span>
               ))
             ) : (
@@ -1535,11 +1591,11 @@ export function App({ options }: { options: TuiOptions }) {
             {renderControls(promptWidth, "Describe what you want to test…", [5, maxRows])}
             {showStart ? (
               <box style={{ flexDirection: "column", marginTop: 1, height: startRows - 1, flexShrink: 0 }}>
-                {heading("Start with")}
+                {heading(offerTitle)}
                 {loading
                   ? [0, 1, 2, 3].map((i) => <text key={i} fg={theme.faint}>{i ? " " : "  Loading what works in this setup…"}</text>)
-                  : start.map((a, i) => (
-                      <box key={a.id} onMouseDown={() => fillPrompt(a.request)} style={{ flexDirection: "row", justifyContent: "space-between", flexShrink: 0 }}>
+                  : 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>
@@ -1640,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")
@@ -1684,13 +1738,17 @@ 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>
@@ -1698,24 +1756,20 @@ export function App({ options }: { options: TuiOptions }) {
   // 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}
@@ -1724,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>

package/src/tui/components.tsx

@@ -122,64 +122,56 @@ export function Prompt(props: PromptProps) {
     props.onLines?.(needed)
     setLines(needed)
   }
+  // A rounded box with ">" before the text, as in Claude Code; the border lights up while it has the keys.
   return (
-    <box style={{ flexDirection: "column", width: props.width, flexShrink: 0 }}>
-      <box
-        border={["left"]}
-        borderColor={props.modeColor}
-        customBorderChars={BAR}
-        style={{
-          flexDirection: "column",
-          backgroundColor: theme.panel,
-          paddingLeft: 2,
-          paddingRight: 2,
-          paddingTop: 1,
-          paddingBottom: 1,
-          width: props.width,
-        }}
-      >
-        {props.masked !== undefined ? (
-          <text style={{ height: 1 }}>
-            {props.masked ? <span fg={theme.text}>{"•".repeat(Math.min(props.masked, Math.max(1, props.width - 8)))}</span> : <span fg={theme.faint}>{props.placeholder}</span>}
-          </text>
-        ) : (
-          <textarea
-            key={props.inputKey}
-            ref={ref}
-            placeholder={props.placeholder}
-            focused={props.focused !== false}
-            initialValue={props.initialValue || ""}
-            wrapMode="word"
-            keyBindings={PROMPT_KEYS}
-            onSubmit={() => props.onSubmit(ref.current?.plainText ?? "")}
-            onContentChange={fit}
-            style={{ height: rows }}
-            backgroundColor={theme.panel}
-            focusedBackgroundColor={theme.panel}
-            textColor={theme.text}
-            focusedTextColor={theme.text}
-            placeholderColor={theme.faint}
-          />
-        )}
-        {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>
+    <box
+      border
+      borderStyle="rounded"
+      borderColor={props.focused === false ? theme.border : theme.muted}
+      style={{ flexDirection: "column", width: props.width, flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}
+    >
+      <box style={{ flexDirection: "row" }}>
+        <text fg={props.modeColor} style={{ width: 2, flexShrink: 0 }}>
+          {">"}
+        </text>
+        <box style={{ flexDirection: "column", flexGrow: 1, flexShrink: 1 }}>
+          {props.masked !== undefined ? (
+            <text style={{ height: 1 }}>
+              {props.masked ? <span fg={theme.text}>{"•".repeat(Math.min(props.masked, Math.max(1, props.width - 8)))}</span> : <span fg={theme.faint}>{props.placeholder}</span>}
             </text>
-          </box>
-        )}
+          ) : (
+            <textarea
+              key={props.inputKey}
+              ref={ref}
+              placeholder={props.placeholder}
+              focused={props.focused !== false}
+              initialValue={props.initialValue || ""}
+              wrapMode="word"
+              keyBindings={PROMPT_KEYS}
+              onSubmit={() => props.onSubmit(ref.current?.plainText ?? "")}
+              onContentChange={fit}
+              style={{ height: rows }}
+              textColor={theme.text}
+              focusedTextColor={theme.text}
+              placeholderColor={theme.faint}
+            />
+          )}
+        </box>
       </box>
-      <text>
-        <span fg={props.modeColor}>{edge.slice(0, 1)}</span>
-        <span fg={theme.panel}>{edge.slice(1)}</span>
-      </text>
+      {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>
   )
 }