dsh-code 0.2.0 → 0.4.0

package/src/app.ts

@@ -15,22 +15,52 @@
  */
 
 import {
-  createElement, useEffect, useRef, useState, useSyncExternalStore, type ReactElement,
+  createElement, memo, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement,
 } from 'react'
-import { Box, Text, useInput } from 'ink'
+import { Box, Static, Text, useInput, useStdout } from 'ink'
 import { assertNever } from '@deepseek-ai/dsh-llm'
 import type { CommandDescriptor } from '@deepseek-ai/dsh-commands'
 import type { TodoItem } from '@deepseek-ai/dsh-session'
-import { TUI_RGB, brand, dim, error as paintError, warn } from './theme.ts'
+import type { AskUserQuestionAnswerItem } from '@deepseek-ai/dsh-user-questions'
+import { TUI_RGB, brand, dim, error as paintError } from './theme.ts'
 import { WHALE_GLYPH, WHALE_GLYPH_COLUMNS } from './whale-glyph.ts'
 import type { TranscriptStore } from './store.ts'
-import type { TranscriptEntry } from './render/projection.ts'
+import { settledEntryCount, type TranscriptEntry } from './render/projection.ts'
+import { renderMarkdown, type MdSegment, visibleColumns } from './render/markdown.ts'
+import type { ToolDetail } from './render/tool-detail.ts'
+import { caretVisible, pulseFrame } from './render/animations.ts'
 import type { ApprovalStore } from './approval.ts'
 import type { CommandsView } from './commands.ts'
 import type { ModelDirectory, ModelRow } from './models.ts'
+import type { QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
-import { buildStatusGroups, type StatusFacts } from './render/status.ts'
-import { displayText } from './render/text.ts'
+import type { MentionCandidate } from './mentions.ts'
+
+/** Match Codex's settled-resize window before rebuilding terminal scrollback. */
+const RESIZE_REFLOW_DELAY_MS = 75
+
+/** Reset region/style, clear the visible screen and scrollback, then home. */
+const RESIZE_REFLOW_CLEAR = '\x1b[r\x1b[0m\x1b[H\x1b[2J\x1b[3J\x1b[H'
+import { buildStatusGroups, formatTokens, type StatusFacts } from './render/status.ts'
+import { displayTail, displayText } from './render/text.ts'
+import {
+  clampScroll,
+  followInspectorCursor,
+  inspectorViewport,
+  moveScroll,
+  panelViewport,
+  revealRow,
+  selectionWindow,
+} from './render/inspector.ts'
+import {
+  lineSegment,
+  markdownLines,
+  styledLines,
+  textLines,
+  transcriptEntryLines,
+  type LineStyle,
+  type StyledLine,
+} from './render/lines.ts'
 
 /** Props the runner hands the app; callbacks stay owned by the runner. */
 export interface AppProps {
@@ -38,6 +68,8 @@ export interface AppProps {
   store: TranscriptStore
   /** Approval-question store fed by the answerer listener. */
   approval: ApprovalStore
+  /** ask_user_question store fed by the single UI provider. */
+  questions: QuestionStore
   /** Live slash-command descriptor list (completion candidates). */
   commands: CommandsView
   /** Live user-invocable skill catalog (completion candidates). */
@@ -62,8 +94,16 @@ export interface AppProps {
   quit(): void
   /** Load the selectable model directory (called when /model opens). */
   loadModels(): Promise<ModelDirectory>
+  /** Load @mention candidates for the typed query (files + sessions). */
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
   /** Apply one /model selection; returns the display label. */
   selectModel(row: ModelRow): string
+  /** Cycle to the next permission preset (Shift+Tab); returns the new label. */
+  cyclePermission(): string
+  /** Export the transcript to a markdown file (/export [path]); reports via notices. */
+  exportTranscript(argument: string): Promise<void>
+  /** Rename the session (/title <text>); returns the outcome line for the notice. */
+  renameTitle(argument: string): string
   /** Registers the app's notice channel with the runner (called once on mount). */
   onBridgeReady(bridge: { notify(text: string): void }): void
 }
@@ -73,53 +113,393 @@ function inkColor(triple: readonly [number, number, number]): string {
   return `rgb(${triple[0]}, ${triple[1]}, ${triple[2]})`
 }
 
+/** Truncate text to a visible-column budget, appending … when cut. */
+function truncateColumns(text: string, max: number): string {
+  let columns = 0
+  let out = ''
+  for (const char of text) {
+    const code = char.codePointAt(0) ?? 0
+    const width = code > 0x2e7f ? 2 : 1
+    if (columns + width > max) return `${out}…`
+    out += char
+    columns += width
+  }
+  return out
+}
+
+/** Pad text with spaces to a visible-column target (menu name column). */
+function padColumns(text: string, width: number): string {
+  return text + ' '.repeat(Math.max(0, width - visibleColumns(text)))
+}
+
+/** Interval-driven frame counter for one self-contained animated leaf. */
+function useFrames(intervalMs: number): number {
+  const [tick, setTick] = useState(0)
+  useEffect(() => {
+    const id = setInterval(() => setTick(current => current + 1), intervalMs)
+    return () => {
+      clearInterval(id)
+    }
+  }, [intervalMs])
+  return tick
+}
+
+/** Single-cell stepped pulse: the web's 125ms flat-hold brightness steps over 1s. */
+function Pulse(): ReactElement {
+  const tick = useFrames(125)
+  return createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, pulseFrame(tick))
+}
+
+/** Blinking block caret appended to streaming text. */
+function Caret(): ReactElement {
+  const tick = useFrames(530)
+  return createElement(Text, null, caretVisible(tick) ? '▍' : ' ')
+}
+
+/** Blinking input cursor: inverse block while the caret phase is on. */
+function CursorBlock({ char }: { char: string }): ReactElement {
+  const tick = useFrames(530)
+  return createElement(Text, { inverse: caretVisible(tick) || undefined }, char)
+}
+
+/** Web TurnStatus elapsed format: `45s` under a minute, `2m03s` beyond. */
+function runClock(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000))
+  const minutes = Math.floor(total / 60)
+  const seconds = total % 60
+  return minutes > 0 ? `${minutes}m${String(seconds).padStart(2, '0')}s` : `${seconds}s`
+}
+
+/**
+ * The busy line, web TurnStatus contract: the plain `Deep diving...` label,
+ * with the elapsed clock appended only once the turn has clearly been running
+ * (15s) — anchored to `turn/start` so a resumed mid-turn keeps the real time.
+ */
+function DeepDivingLine({ since }: { since: number }): ReactElement {
+  useFrames(1000)
+  const elapsed = since === 0 ? 0 : Date.now() - since
+  return createElement(
+    Text,
+    { dimColor: true },
+    elapsed >= 15_000 ? `Deep diving... ${runClock(elapsed)}` : 'Deep diving...',
+  )
+}
+
+/**
+ * The streaming buffer rendered with a hard size cap: the live region must
+ * ALWAYS fit the terminal, or Ink's erase/rewrite of a dynamic tree taller
+ * than the screen freezes (cursor-up past the top, garbage, no scroll). The
+ * cap counts explicit newlines and terminal wrapping, slicing from the END so
+ * the freshest tokens stay visible while a long reply streams; the complete
+ * text lands in the flushed scrollback once the turn assembles it.
+ */
+function StreamTail({ text, dim, maxRows, prefix, children }: {
+  text: string
+  dim: boolean
+  maxRows: number
+  prefix?: string
+  children?: ReactElement
+}): ReactElement {
+  const columns = useStdout().stdout?.columns ?? 80
+  const safeRows = Math.max(1, maxRows)
+  // App padding consumes two columns; the final extra column keeps a caret
+  // from wrapping onto an unbudgeted row.
+  const contentColumns = Math.max(10, columns - 3 - visibleColumns(prefix ?? ''))
+  const initial = displayTail(text, contentColumns, safeRows)
+  // Reserve one row for the omission marker only when a marker is needed.
+  const tail = initial.truncated && safeRows > 1
+    ? displayTail(text, contentColumns, safeRows - 1)
+    : initial
+  return createElement(
+    Box,
+    { flexDirection: 'column' },
+    tail.truncated && safeRows > 1
+      ? createElement(Text, { dimColor: true }, '  …')
+      : undefined,
+    createElement(Text, { dimColor: dim || undefined }, prefix, tail.text, children),
+  )
+}
+
+/** Ink props for one markdown style class. */
+function segmentProps(style: MdSegment['style']): {
+  color: string | undefined
+  bold: boolean | undefined
+  italic: boolean | undefined
+  strikethrough: boolean | undefined
+} {
+  switch (style) {
+    case 'accent':
+      return { color: inkColor(TUI_RGB.brandBright), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'code':
+      return { color: inkColor(TUI_RGB.code), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'dim':
+      return { color: inkColor(TUI_RGB.dim), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'bold':
+      return { color: undefined, bold: true, italic: undefined, strikethrough: undefined }
+    case 'italic':
+      return { color: undefined, bold: undefined, italic: true, strikethrough: undefined }
+    case 'boldItalic':
+      return { color: undefined, bold: true, italic: true, strikethrough: undefined }
+    case 'strike':
+      return { color: inkColor(TUI_RGB.dim), bold: undefined, italic: undefined, strikethrough: true }
+    default:
+      return { color: undefined, bold: undefined, italic: undefined, strikethrough: undefined }
+  }
+}
+
+/** Ink props for the richer line model used by bounded scrolling panels. */
+function lineStyleProps(style: LineStyle): {
+  color: string | undefined
+  bold: boolean | undefined
+  italic: boolean | undefined
+  strikethrough: boolean | undefined
+  dimColor: boolean | undefined
+} {
+  switch (style) {
+    case 'brand':
+      return { color: inkColor(TUI_RGB.brandBright), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+    case 'success':
+      return { color: inkColor(TUI_RGB.success), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+    case 'error':
+      return { color: inkColor(TUI_RGB.error), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+    case 'warn':
+      return { color: inkColor(TUI_RGB.warn), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+    case 'dimItalic':
+      return { color: undefined, bold: undefined, italic: true, strikethrough: undefined, dimColor: true }
+    default:
+      return { ...segmentProps(style), dimColor: undefined }
+  }
+}
+
+/** Render width-safe rows; every child is exactly one terminal row. */
+function StyledRows({ lines }: { lines: readonly StyledLine[] }): ReactElement {
+  return createElement(
+    Box,
+    { flexDirection: 'column' },
+    ...lines.map((line, index) => createElement(
+      Text,
+      { key: index, wrap: 'truncate-end' },
+      line.segments.length === 0
+        ? ' '
+        : line.segments.map((segment, at) => createElement(
+          Text,
+          { key: at, ...lineStyleProps(segment.style) },
+          segment.text,
+        )),
+    )),
+  )
+}
+
+/** One settled markdown document rendered as styled lines at the terminal width. */
+function MarkdownBody({ text }: { text: string }): ReactElement {
+  const columns = useStdout().stdout?.columns ?? 80
+  // Cached by (text, width): settled replies re-layout only when either moves.
+  const lines = useMemo(
+    () => renderMarkdown(displayText(text), Math.max(20, columns - 2)),
+    [text, columns],
+  )
+  return createElement(
+    Box,
+    { flexDirection: 'column' },
+    ...lines.map((line, index) => createElement(
+      Text,
+      { key: index },
+      ...line.segments.map((segment, at) => createElement(Text, { key: at, ...segmentProps(segment.style) }, segment.text)),
+    )),
+  )
+}
+
+/**
+ * One expanded tool-card body for the verbose transcript (Ctrl+O): the
+ * presentation contract's structured cards — inline diffs, read windows,
+ * web sources — rendered as plain terminal rows, degradation-safe against
+ * replayed metadata.
+ */
+function ToolDetailBody({ detail }: { detail: ToolDetail }): ReactElement {
+  switch (detail.kind) {
+    case 'diff':
+      return createElement(
+        Box,
+        { flexDirection: 'column' },
+        ...detail.diffs.map((diff, index) => createElement(
+          Box,
+          { key: index, flexDirection: 'column' },
+          createElement(Text, { dimColor: true, wrap: 'truncate-end' }, `  ── ${displayText(diff.path)}${diff.truncated ? ' (diff truncated)' : ''}`),
+          ...diff.lines.map((line, at) => createElement(
+            Text,
+              {
+                key: at,
+                color: line.mark === '+' ? inkColor(TUI_RGB.success) : line.mark === '-' ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim),
+                wrap: 'truncate-end',
+              },
+            `  ${line.mark}${displayText(line.text)}`,
+          )),
+        )),
+      )
+    case 'read':
+      return createElement(
+        Box,
+        { flexDirection: 'column' },
+        createElement(Text, { dimColor: true, wrap: 'truncate-end' }, `  ── ${displayText(detail.path)} · lines ${detail.offset}-${detail.lines.length > 0 ? detail.lines[detail.lines.length - 1]!.number : detail.offset - 1} of ${detail.totalLines}${detail.truncated ? ' (window truncated)' : ''}`),
+        ...detail.lines.map((line, at) => createElement(
+          Text,
+          { key: at, dimColor: true, wrap: 'truncate-end' },
+          `  ${String(line.number).padStart(5, ' ')} | ${displayText(line.text)}`,
+        )),
+      )
+    case 'web-search':
+      return createElement(
+        Box,
+        { flexDirection: 'column' },
+        ...detail.sources.map((source, at) => createElement(
+          Text,
+            { key: at, wrap: 'truncate-end' },
+          brand(`  ? ${displayText(source.title === undefined ? source.url : source.title)}`),
+          createElement(Text, { dimColor: true }, dim(` - ${displayText(source.url)}`)),
+        )),
+        createElement(Text, { dimColor: true }, dim(`  ${detail.sources.length} sources${detail.truncated ? ' (capped)' : ''}`)),
+      )
+    case 'web-fetch':
+      return createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(`  ${displayText(detail.url)} · HTTP ${detail.statusCode}`))
+    case 'raw':
+      return createElement(
+        Box,
+        { flexDirection: 'column' },
+        ...displayText(detail.text).split('\n').slice(0, 40).map((line, at) => createElement(Text, { key: at, dimColor: true, wrap: 'truncate-end' }, `  ${line}`)),
+        createElement(Text, { dimColor: true }, detail.truncated ? '  … (output truncated)' : '  (end of output)'),
+      )
+    default:
+      return assertNever(detail, 'tool detail kind')
+  }
+}
 /** One settled transcript row. */
-function EntryLine({ entry }: { entry: TranscriptEntry }): ReactElement {
+function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry; showReasoning: boolean; verbose: boolean }): ReactElement {
   switch (entry.kind) {
     case 'user':
-      return createElement(Text, null, brand('❯ '), displayText(entry.text))
+      // Collapsed injected context reads as a dim ↳ row; only direct human
+      // prompts get the brand ❯ (they are different surfaces, not the same).
+      return entry.notice
+        ? createElement(Text, { dimColor: true }, `⤷ ${displayText(entry.text)}`)
+        : createElement(Text, null, brand('❯ '), displayText(entry.text))
     case 'assistant':
-      return createElement(Text, null, displayText(entry.text))
+      // Claude-Code-style thinking: a dim ✻ marker collapsed, the reasoning
+      // text dim-italic expanded (Ctrl+R toggles globally). The collapsed
+      // row is static — an animated counter inside the text would jitter the
+      // line width every frame.
+      return createElement(
+        Box,
+        { flexDirection: 'column' },
+        entry.reasoning === ''
+          ? undefined
+          : showReasoning
+            ? createElement(Text, { dimColor: true, italic: true }, `  ✻ ${displayText(entry.reasoning)}`)
+            : createElement(Text, { dimColor: true }, `  ✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`),
+        createElement(MarkdownBody, { text: entry.text }),
+      )
     case 'tool': {
+      // Claude-Code-style tool card: the invocation row plus a nested ⎿
+      // result line, so the summary reads under its call instead of inline.
       const mark = entry.state === 'running'
-        ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, '◐')
+        ? createElement(Pulse)
         : entry.state === 'error'
           ? createElement(Text, { color: inkColor(TUI_RGB.error) }, '⨯')
           : createElement(Text, { color: inkColor(TUI_RGB.success) }, '⏺')
       return createElement(
-        Text,
-        null,
-        mark,
-        ' ',
-        brand(entry.name),
-        entry.summary === '' ? '' : ` ${dim(displayText(entry.summary))}`,
+        Box,
+        { flexDirection: 'column' },
+        createElement(
+          Text,
+          { wrap: verbose ? 'truncate-end' : undefined },
+          mark,
+          ' ',
+          brand(entry.name),
+          entry.preview === '' ? '' : ` ${dim(displayText(entry.preview))}`,
+        ),
+        entry.summary === ''
+          ? undefined
+          : createElement(
+            Text,
+            { color: entry.state === 'error' ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim), wrap: verbose ? 'truncate-end' : undefined },
+            `  ⎿ ${displayText(entry.summary)}`,
+          ),
+        verbose && entry.detail !== undefined
+          ? createElement(ToolDetailBody, { detail: entry.detail })
+          : undefined,
       )
     }
     case 'command': {
       const mark = entry.state === 'running'
-        ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, '◐')
+        ? createElement(Pulse)
         : entry.state === 'error'
           ? createElement(Text, { color: inkColor(TUI_RGB.error) }, '⨯')
           : createElement(Text, { color: inkColor(TUI_RGB.success) }, '⏺')
+      return createElement(
+        Box,
+        { flexDirection: 'column' },
+        createElement(
+          Text,
+          { wrap: verbose ? 'truncate-end' : undefined },
+          mark,
+          ' ',
+          brand(`/${entry.name}`),
+          entry.args === '' ? '' : ` ${dim(displayText(entry.args))}`,
+        ),
+        entry.summary === ''
+          ? undefined
+          : createElement(Text, { color: inkColor(TUI_RGB.dim), wrap: verbose ? 'truncate-end' : undefined }, `  ⎿ ${displayText(entry.summary)}`),
+      )
+    }
+    case 'turn-marker':
+      // Non-error turn outcomes (cancel, ceiling, interruption) as dim rows.
+      return createElement(Text, { dimColor: true, wrap: verbose ? 'truncate-end' : undefined }, `  ⏹ ${displayText(entry.text)}`)
+    case 'compaction':
+      // Completed compaction lifecycle: what it reclaimed, or why it failed.
+      return createElement(
+        Text,
+        { dimColor: true, wrap: verbose ? 'truncate-end' : undefined },
+        entry.ok
+          ? `  ⧉ compacted ~${formatTokens(entry.tokens)} tokens`
+          : `  ⧉ compaction failed: ${displayText(entry.error)}`,
+      )
+    case 'retry':
+      // Provider-routed retry: amber while the backoff waits, dim once the
+      // next attempt is underway.
       return createElement(
         Text,
-        null,
-        mark,
-        ' ',
-        brand(`/${entry.name}`),
-        entry.args === '' ? '' : ` ${dim(displayText(entry.args))}`,
-        entry.summary === '' ? '' : ` ${dim(displayText(entry.summary))}`,
+        { color: entry.state === 'running' ? inkColor(TUI_RGB.warn) : inkColor(TUI_RGB.dim), wrap: verbose ? 'truncate-end' : undefined },
+        `  ↻ retry ${entry.attempt}/${entry.max} · ${displayText(entry.code)} · ${Math.round(entry.delayMs / 100) / 10}s`,
       )
+    case 'files': {
+      // Turn-tail deliverables: the turn's mutated files (web turnTail chips).
+      const shown = entry.paths.slice(0, 3).map(path => displayText(path)).join(' · ')
+      const more = entry.paths.length > 3 ? ` (+${entry.paths.length - 3} more)` : ''
+      return createElement(Text, { dimColor: true, wrap: verbose ? 'truncate-end' : undefined }, `  ⎄ ${shown}${more}`)
     }
     case 'error':
-      return createElement(Text, null, paintError(displayText(entry.text)))
+      return createElement(Text, { wrap: verbose ? 'truncate-end' : undefined }, paintError(displayText(entry.text)))
     default:
       return assertNever(entry, 'transcript entry kind')
   }
 }
 
-/** The whale wordmark header in DeepSeek blue, hugging its content width. */
+/**
+ * The whale wordmark header in DeepSeek blue, hugging its content width.
+ * The 8-row half-block glyph pairs adjacent lines, so on a terminal too
+ * short to show it whole (or mid-resize) the clipped pairs garble the
+ * screen — below the height floor the header collapses to a single-line
+ * wordmark that stays correct at any size.
+ */
 function Header({ resumed }: { resumed: boolean }): ReactElement {
+  const rows = useStdout().stdout?.rows ?? 40
+  const hint = resumed ? 'resumed session · /help commands · Esc interrupt' : '/help commands · Esc interrupt · Ctrl+C quit'
+  if (rows < 20) {
+    return createElement(
+      Box,
+      { flexDirection: 'row', gap: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand), paddingX: 1, alignSelf: 'flex-start' },
+      createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true }, 'DeepSeek Harness'),
+      createElement(Text, { dimColor: true }, hint),
+    )
+  }
   return createElement(
     Box,
     // alignSelf shrinks the border to the whale-plus-wordmark content instead
@@ -135,11 +515,7 @@ function Header({ resumed }: { resumed: boolean }): ReactElement {
       Box,
       { flexDirection: 'column', justifyContent: 'center' },
       createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true }, 'DeepSeek Harness'),
-      createElement(
-        Text,
-        { dimColor: true },
-        resumed ? 'resumed session · /help commands · Esc interrupt' : '/help commands · Esc interrupt · Ctrl+C quit',
-      ),
+      createElement(Text, { dimColor: true }, hint),
     ),
   )
 }
@@ -149,33 +525,23 @@ function todoMark(status: TodoItem['status']): string {
   return status === 'completed' ? '✓' : status === 'in_progress' ? '●' : '○'
 }
 
-/** Inline todo list (web TodoPanel's compact terminal form). */
+/** One-row todo summary: task count cannot grow the live Ink tree. */
 function TodoPanel({ todos }: { todos: readonly TodoItem[] }): ReactElement | undefined {
   if (todos.length === 0) return undefined
   const completed = todos.filter(todo => todo.status === 'completed').length
   const inProgress = todos.filter(todo => todo.status === 'in_progress').length
   const pending = todos.length - completed - inProgress
+  const current = todos.find(todo => todo.status === 'in_progress')
   return createElement(
     Box,
-    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brandDeep), alignSelf: 'flex-start', marginLeft: 1 },
+    { paddingX: 1 },
     createElement(
       Text,
-      { color: inkColor(TUI_RGB.brand), bold: true },
+      { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' },
       `todos ${completed}/${todos.length}`,
       createElement(Text, { dimColor: true }, ` · ${inProgress} active · ${pending} pending`),
+      current === undefined ? '' : createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, ` · ${todoMark(current.status)} ${displayText(current.content)}`),
     ),
-    ...todos.map((todo, index) => createElement(
-      Text,
-      {
-        key: index,
-        color: todo.status === 'completed'
-          ? inkColor(TUI_RGB.success)
-          : todo.status === 'in_progress'
-            ? inkColor(TUI_RGB.brandBright)
-            : inkColor(TUI_RGB.dim),
-      },
-      `${todoMark(todo.status)} ${displayText(todo.content)}`,
-    )),
   )
 }
 
@@ -191,32 +557,308 @@ function StatusLine({ facts, stats, busy }: {
   busy: boolean
 }): ReactElement {
   const groups = buildStatusGroups(facts, stats)
-  const children: ReactElement[] = [
-    busy
-      ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, '● ')
-      : createElement(Text, { color: inkColor(TUI_RGB.brand) }, '○ '),
-  ]
-  groups.forEach((group, index) => {
-    if (index > 0) children.push(createElement(Text, { dimColor: true }, dim(' | ')))
-    children.push(createElement(Text, { dimColor: true }, group))
-  })
-  return createElement(Box, { paddingX: 1 }, ...children)
+  // One physical row in every mode: a narrow terminal must truncate instead
+  // of wrapping the status groups into an unbudgeted second/third row.
+  return createElement(
+    Box,
+    // Match the prompt text inside the bordered composer: one border column
+    // plus one padding column. Keeping this row margin-free also makes the
+    // composer and status a fixed four-row unit in every interface.
+    { paddingLeft: 2 },
+    createElement(
+      Text,
+      { dimColor: true, wrap: 'truncate-end' },
+      busy ? '● ' : '○ ',
+      groups.join(' | '),
+    ),
+  )
 }
 
 /** The y/n approval bar rendered while an approval ask is pending. */
-function ApprovalBar({ approval }: { approval: ApprovalStore }): ReactElement | undefined {
+function ApprovalBar({ approval, locked }: { approval: ApprovalStore; locked: boolean }): ReactElement | undefined {
   const snapshot = useSyncExternalStore(approval.subscribe, approval.getSnapshot)
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [scroll, setScroll] = useState(0)
+  const pending = snapshot.pending
+  const active = !locked && snapshot.pending !== undefined && !snapshot.answered
+  const content = useMemo<readonly StyledLine[]>(() => pending === undefined
+    ? []
+    : [
+      ...styledLines([lineSegment(pending.headline, 'warn')], viewport.contentColumns),
+      ...(pending.command === '' ? [] : textLines(`  ${pending.command}`, viewport.contentColumns, 'dim')),
+    ], [pending, viewport.contentColumns])
+  const visibleScroll = clampScroll(scroll, content.length, viewport.bodyRows)
+
+  useEffect(() => {
+    setScroll(0)
+  }, [pending])
+
+  useEffect(() => {
+    if (visibleScroll !== scroll) setScroll(visibleScroll)
+  }, [visibleScroll, scroll])
+
+  useInput((input, key) => {
+    if (snapshot.pending === undefined) return
+    if (key.upArrow) {
+      setScroll(current => moveScroll(current, -1, content.length, viewport.bodyRows))
+      return
+    }
+    if (key.downArrow) {
+      setScroll(current => moveScroll(current, 1, content.length, viewport.bodyRows))
+      return
+    }
+    if (key.pageUp) {
+      setScroll(current => moveScroll(current, -Math.max(1, viewport.bodyRows - 1), content.length, viewport.bodyRows))
+      return
+    }
+    if (key.pageDown) {
+      setScroll(current => moveScroll(current, Math.max(1, viewport.bodyRows - 1), content.length, viewport.bodyRows))
+      return
+    }
+    if (snapshot.answered) return
+    if (input === 'y' || input === 'Y') {
+      snapshot.pending.answer('allowed-once')
+      return
+    }
+    if (input === 'n' || input === 'N') {
+      snapshot.pending.answer('rejected')
+    }
+  }, { isActive: active })
   if (snapshot.pending === undefined) return undefined
-  const { pending, answered } = snapshot
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('approval · y allow · n reject', viewport.contentColumns))
+  }
+  const { answered } = snapshot
   return createElement(
     Box,
-    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.warn), alignSelf: 'flex-start', marginLeft: 1 },
-    createElement(Text, { color: inkColor(TUI_RGB.warn), bold: true }, '⏸ waiting for approval'),
-    createElement(Text, null, warn(displayText(pending.headline))),
-    pending.command === '' ? undefined : createElement(Text, { dimColor: true }, dim(`  ${displayText(pending.command)}`)),
-    answered
-      ? createElement(Text, { dimColor: true }, '  submitted…')
-      : createElement(Text, { dimColor: true }, dim('  y allow once · n reject')),
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.warn) },
+    createElement(Text, { color: inkColor(TUI_RGB.warn), bold: true, wrap: 'truncate-end' }, truncateColumns(`⏸ waiting for approval · lines ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)),
+    createElement(StyledRows, { lines: content.slice(visibleScroll, visibleScroll + viewport.bodyRows) }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns(answered
+      ? 'submitted…'
+      : '↑↓/pgup/pgdn scroll · y allow once · n reject', viewport.contentColumns))),
+  )
+}
+
+/**
+ * The ask_user_question bar: walks one request question by question,
+ * renders the option menu (Claude-Code style: arrows move, space toggles a
+ * multi-select, enter submits, `c` opens the custom-answer box, Esc
+ * interrupts the question as aborted). Plan reviews arrive through the same
+ * service with a `plan-review` intent — the approve option gets a ✓ mark,
+ * the answer encoding stays identical.
+ */
+function QuestionBar({ store, locked }: { store: QuestionStore; locked: boolean }): ReactElement | undefined {
+  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot)
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const pending = snapshot.pending
+  const [index, setIndex] = useState(0)
+  const [cursor, setCursor] = useState(0)
+  const [selected, setSelected] = useState<readonly number[]>([])
+  const [mode, setMode] = useState<'options' | 'custom'>('options')
+  const [custom, setCustom] = useState('')
+  const [answers, setAnswers] = useState<readonly AskUserQuestionAnswerItem[]>([])
+  const [submitted, setSubmitted] = useState(false)
+  const [scroll, setScroll] = useState(0)
+
+  // A new request resets the walk; questions without options start in the
+  // custom-answer box (a free-form question).
+  useEffect(() => {
+    const question = pending?.request.questions[0]
+    setIndex(0)
+    setCursor(0)
+    setSelected([])
+    setMode(question?.options === undefined || question.options.length === 0 ? 'custom' : 'options')
+    setCustom('')
+    setAnswers([])
+    setSubmitted(false)
+    setScroll(0)
+  }, [pending])
+
+  const question = pending?.request.questions[index]
+  const options = question?.options ?? []
+  const isPlan = question?.intent?.kind === 'plan-review'
+  const isMulti = question?.multiSelect === true
+  const active = !locked && pending !== undefined && question !== undefined && !submitted
+  const rendered = useMemo(() => {
+    if (question === undefined) return { lines: [] as readonly StyledLine[], optionRows: [] as readonly number[] }
+    const lines: StyledLine[] = []
+    const optionRows: number[] = []
+    if (question.header !== undefined) {
+      lines.push(...styledLines([lineSegment(question.header, 'bold')], viewport.contentColumns))
+    }
+    lines.push(...textLines(question.question, viewport.contentColumns))
+    if (question.detail !== undefined) {
+      lines.push(...(isPlan
+        ? markdownLines(question.detail, viewport.contentColumns)
+        : textLines(question.detail, viewport.contentColumns, 'dim')))
+    }
+    if (submitted) {
+      lines.push(...textLines('  submitted…', viewport.contentColumns, 'dim'))
+    } else if (mode === 'custom' || options.length === 0) {
+      lines.push(...styledLines([
+        lineSegment('  custom: ', 'brand'),
+        lineSegment(custom, 'plain'),
+        lineSegment('▌', 'brand'),
+      ], viewport.contentColumns))
+    } else {
+      options.forEach((option, at) => {
+        optionRows.push(lines.length)
+        const chosen = isMulti && selected.includes(at)
+        const approve = isPlan && question.intent?.approve === option.label
+        const mark = approve ? '✓ ' : chosen ? '◉ ' : at === cursor ? '❯ ' : '  '
+        const style: LineStyle = at === cursor ? 'brand' : chosen || approve ? 'success' : 'plain'
+        lines.push(...styledLines([
+          lineSegment(mark, style),
+          lineSegment(option.label, style),
+          lineSegment(option.description === undefined ? '' : ` — ${option.description}`, 'dim'),
+        ], viewport.contentColumns))
+      })
+    }
+    return { lines, optionRows }
+  }, [question, isPlan, submitted, mode, options, custom, isMulti, selected, cursor, viewport.contentColumns])
+  const visibleScroll = clampScroll(scroll, rendered.lines.length, viewport.bodyRows)
+
+  useEffect(() => {
+    if (visibleScroll !== scroll) setScroll(visibleScroll)
+  }, [visibleScroll, scroll])
+
+  useEffect(() => {
+    if (mode === 'options' && options.length > 0) {
+      const focused = rendered.optionRows[cursor] ?? 0
+      setScroll(current => revealRow(current, focused, rendered.lines.length, viewport.bodyRows))
+      return
+    }
+    setScroll(Math.max(0, rendered.lines.length - viewport.bodyRows))
+  }, [cursor, mode, custom.length, rendered.lines.length, viewport.bodyRows])
+
+  const commit = (answer: AskUserQuestionAnswerItem): void => {
+    if (pending === undefined) return
+    const next = [...answers, answer]
+    const total = pending.request.questions.length
+    if (index + 1 >= total) {
+      setSubmitted(true)
+      store.submit(pending, { answers: next })
+      return
+    }
+    setAnswers(next)
+    const nextIndex = index + 1
+    const nextQuestion = pending.request.questions[nextIndex]
+    setIndex(nextIndex)
+    setCursor(0)
+    setSelected([])
+    setMode(nextQuestion?.options === undefined || nextQuestion.options.length === 0 ? 'custom' : 'options')
+    setCustom('')
+    setScroll(0)
+  }
+
+  const commitOption = (): void => {
+    if (pending === undefined || question === undefined) return
+    if (isMulti) {
+      const labels = selected
+        .map(at => options[at]?.label)
+        .filter((label): label is string => label !== undefined)
+      const customText = custom.trim()
+      commit({ id: question.id, selected: labels, ...(customText === '' ? {} : { custom: customText }) })
+      return
+    }
+    const option = options[cursor]
+    if (option === undefined) return
+    commit({ id: question.id, selected: [option.label] })
+  }
+
+  useInput((input, key) => {
+    if (pending === undefined || question === undefined || submitted) return
+    if (key.escape) {
+      store.cancel(pending)
+      return
+    }
+    if (key.pageUp) {
+      setScroll(current => moveScroll(current, -Math.max(1, viewport.bodyRows - 1), rendered.lines.length, viewport.bodyRows))
+      return
+    }
+    if (key.pageDown) {
+      setScroll(current => moveScroll(current, Math.max(1, viewport.bodyRows - 1), rendered.lines.length, viewport.bodyRows))
+      return
+    }
+    if (mode === 'custom' || options.length === 0) {
+      if (key.upArrow) {
+        setScroll(current => moveScroll(current, -1, rendered.lines.length, viewport.bodyRows))
+        return
+      }
+      if (key.downArrow) {
+        setScroll(current => moveScroll(current, 1, rendered.lines.length, viewport.bodyRows))
+        return
+      }
+      if (key.return) {
+        if (custom.trim() === '' && options.length > 0) {
+          commitOption()
+          return
+        }
+        commit({
+          id: question.id,
+          selected: isMulti
+            ? selected.map(at => options[at]?.label).filter((label): label is string => label !== undefined)
+            : [],
+          ...(custom.trim() === '' ? {} : { custom: custom.trim() }),
+        })
+        return
+      }
+      if (key.backspace) {
+        setCustom(current => current.slice(0, -1))
+        return
+      }
+      if (input !== '' && !key.ctrl && !key.meta) {
+        setCustom(current => current + input)
+      }
+      return
+    }
+    if (key.upArrow) {
+      setCursor(current => (current + options.length - 1) % options.length)
+      return
+    }
+    if (key.downArrow) {
+      setCursor(current => (current + 1) % options.length)
+      return
+    }
+    if (key.return) {
+      commitOption()
+      return
+    }
+    if (key.tab || input === 'c' || input === 'C') {
+      setMode('custom')
+      return
+    }
+    if (input === ' ' && isMulti) {
+      setSelected(current => current.includes(cursor) ? current.filter(at => at !== cursor) : [...current, cursor])
+    }
+  }, { isActive: active })
+
+  if (pending === undefined || question === undefined) return undefined
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(isPlan ? 'plan review · esc cancel' : 'question · esc cancel', viewport.contentColumns))
+  }
+  const footer = submitted
+    ? 'submitted…'
+    : mode === 'custom' || options.length === 0
+      ? '↑↓/pgup/pgdn scroll · type answer · enter submit · esc interrupt'
+      : isMulti
+        ? '↑↓ choose · pgup/pgdn scroll · space toggle · enter submit · c custom · esc interrupt'
+        : '↑↓ choose · pgup/pgdn scroll · enter submit · c custom · esc interrupt'
+  return createElement(
+    Box,
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep) },
+    createElement(
+      Text,
+      { color: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep), bold: true, wrap: 'truncate-end' },
+      truncateColumns(`${isPlan ? '📋 plan review' : '❓ question'} ${index + 1}/${pending.request.questions.length} · lines ${rendered.lines.length === 0 ? 0 : visibleScroll + 1}-${Math.min(rendered.lines.length, visibleScroll + viewport.bodyRows)}/${rendered.lines.length}`, viewport.contentColumns),
+    ),
+    createElement(StyledRows, { lines: rendered.lines.slice(visibleScroll, visibleScroll + viewport.bodyRows) }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns(footer, viewport.contentColumns))),
   )
 }
 
@@ -228,12 +870,24 @@ function ModelPanel({ directory, error, onSelect, onClose }: {
   onClose(): void
 }): ReactElement {
   const [cursor, setCursor] = useState(0)
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const rows = directory?.rows ?? []
+
+  useEffect(() => {
+    if (rows.length === 0) {
+      if (cursor !== 0) setCursor(0)
+      return
+    }
+    if (cursor >= rows.length) setCursor(rows.length - 1)
+  }, [rows.length, cursor])
+
   useInput((input, key) => {
     if (key.escape || input === 'q') {
       onClose()
       return
     }
-    const rows = directory?.rows ?? []
+    if (rows.length === 0) return
     if (key.upArrow) {
       setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
       return
@@ -242,23 +896,43 @@ function ModelPanel({ directory, error, onSelect, onClose }: {
       setCursor(cursor < rows.length - 1 ? cursor + 1 : 0)
       return
     }
+    if (key.pageUp) {
+      setCursor(current => Math.max(0, current - Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    if (key.pageDown) {
+      setCursor(current => Math.min(rows.length - 1, current + Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    if (input === 'g') {
+      setCursor(0)
+      return
+    }
+    if (input === 'G') {
+      setCursor(rows.length - 1)
+      return
+    }
     if (key.return && rows[cursor] !== undefined) {
       onSelect(rows[cursor])
     }
   })
-  const rows = directory?.rows ?? []
-  const window = 8
-  const first = Math.max(0, Math.min(cursor - Math.floor(window / 2), rows.length - window))
-  const visible = rows.slice(Math.max(0, first), Math.max(0, first) + window)
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/model · esc/q close', viewport.contentColumns))
+  }
+
+  const first = selectionWindow(cursor, rows.length, viewport.bodyRows)
+  const visible = rows.slice(first, first + viewport.bodyRows)
   return createElement(
     Box,
-    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand), alignSelf: 'flex-start', marginLeft: 1 },
-    createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true }, '/model — select the model for the next step'),
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand) },
+    createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — select model${rows.length === 0 ? '' : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)),
     directory === undefined && error === undefined
-      ? createElement(Text, { dimColor: true }, '  loading models…')
+      ? createElement(Text, { dimColor: true, wrap: 'truncate-end' }, '  loading models…')
       : undefined,
     error !== undefined
-      ? createElement(Text, { color: inkColor(TUI_RGB.error) }, `  ${error}`)
+      ? createElement(Text, { color: inkColor(TUI_RGB.error), wrap: 'truncate-end' }, truncateColumns(`  ${displayText(error)}`, viewport.contentColumns))
       : undefined,
     ...visible.map((row) => {
       const index = rows.indexOf(row)
@@ -268,14 +942,272 @@ function ModelPanel({ directory, error, onSelect, onClose }: {
         {
           key: `${row.provider}/${row.model}`,
           color: index === cursor ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+          wrap: 'truncate-end',
         },
-        `${index === cursor ? '❯ ' : '  '}${label}`,
+        truncateColumns(`${index === cursor ? '❯ ' : '  '}${label}`, viewport.contentColumns),
       )
     }),
-    createElement(Text, { dimColor: true }, dim('  ↑↓ move · enter select · esc close')),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns('↑↓ move · pgup/pgdn page · g/G ends · enter select · esc/q close', viewport.contentColumns))),
+  )
+}
+
+/**
+ * The /help overlay: one scrolling card with the keyboard map, the TUI-local
+ * commands, the live registry commands, and the user-invocable skills — the
+ * real command surface, replacing the one-line notice.
+ */
+function HelpPanel({ descriptors, skills, onClose }: {
+  descriptors: readonly CommandDescriptor[]
+  skills: readonly SkillRow[]
+  onClose(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const columns = stdout?.columns ?? 80
+  const viewport = panelViewport(columns, stdout?.rows ?? 30)
+  const [scroll, setScroll] = useState(0)
+  const nameWidth = 18
+  const descBudget = Math.max(1, viewport.contentColumns - nameWidth - 2)
+  const row = (label: string, description: string): ReactElement => createElement(
+    Text,
+    { dimColor: true, wrap: 'truncate-end' },
+    `  ${padColumns(label, nameWidth)}${dim(truncateColumns(displayText(description), descBudget))}`,
+  )
+  const content: ReactElement[] = [
+    createElement(Text, { key: 'keys-title', bold: true, wrap: 'truncate-end' }, ' keys'),
+    createElement(Text, { key: 'key-submit', dimColor: true, wrap: 'truncate-end' }, '  enter submit · alt+enter / ctrl+j newline · up/down history · tab complete'),
+    createElement(Text, { key: 'key-mentions', dimColor: true, wrap: 'truncate-end' }, '  tab also completes bare workspace paths · @ mentions files and sessions'),
+    createElement(Text, { key: 'key-inspector', dimColor: true, wrap: 'truncate-end' }, '  ctrl+o history details · ctrl+r thinking · shift+tab permission preset'),
+    createElement(Text, { key: 'key-cancel', dimColor: true, wrap: 'truncate-end' }, '  esc interrupt the running turn · ctrl+c cancel / clear / quit · ctrl+d exit'),
+    createElement(Text, { key: 'key-edit', dimColor: true, wrap: 'truncate-end' }, '  ctrl+k cut to end of line · ctrl+u clear line · ctrl+a / ctrl+e line ends'),
+    createElement(Text, { key: 'commands-title', bold: true, wrap: 'truncate-end' }, ' commands'),
+    createElement(Box, { key: 'local-help' }, row('/help', 'show this overlay')),
+    createElement(Box, { key: 'local-model' }, row('/model', 'switch the model')),
+    createElement(Box, { key: 'local-clear' }, row('/clear', 'clear the screen')),
+    createElement(Box, { key: 'local-export' }, row('/export', 'export the transcript to markdown (/export [path])')),
+    createElement(Box, { key: 'local-title' }, row('/title', 'rename this session (/title <text>)')),
+    createElement(Box, { key: 'local-quit' }, row('/quit', 'exit')),
+    ...descriptors.map(descriptor => createElement(
+      Text,
+      { key: `command-${descriptor.name}`, dimColor: true, wrap: 'truncate-end' },
+      `  ${padColumns(`/${descriptor.name}`, nameWidth)}${dim(truncateColumns(displayText(descriptor.description), descBudget))}`,
+    )),
+    ...(skills.length === 0 ? [] : [createElement(Text, { key: 'skills-title', bold: true, wrap: 'truncate-end' }, ' skills')]),
+    ...skills.map(skill => createElement(
+      Text,
+      { key: `skill-${skill.name}`, dimColor: true, wrap: 'truncate-end' },
+      `  ${padColumns(`/${skill.name}`, nameWidth)}${dim(truncateColumns(displayText(skill.description), descBudget))}`,
+    )),
+  ]
+  const visibleScroll = clampScroll(scroll, content.length, viewport.bodyRows)
+  const scrollBy = (delta: number): void => {
+    setScroll(current => moveScroll(current, delta, content.length, viewport.bodyRows))
+  }
+
+  useEffect(() => {
+    if (visibleScroll !== scroll) setScroll(visibleScroll)
+  }, [visibleScroll, scroll])
+
+  useInput((input, key) => {
+    if (key.escape || input === 'q') {
+      onClose()
+      return
+    }
+    if (key.upArrow) scrollBy(-1)
+    else if (key.downArrow) scrollBy(1)
+    else if (key.pageUp) scrollBy(-Math.max(1, viewport.bodyRows - 1))
+    else if (key.pageDown) scrollBy(Math.max(1, viewport.bodyRows - 1))
+    else if (input === 'g') setScroll(0)
+    else if (input === 'G') setScroll(Math.max(0, content.length - viewport.bodyRows))
+  })
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/help · esc/q close', viewport.contentColumns))
+  }
+
+  return createElement(
+    Box,
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand) },
+    createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/help — keys and commands · rows ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)),
+    ...content.slice(visibleScroll, visibleScroll + viewport.bodyRows),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns('↑↓ scroll · pgup/pgdn page · g/G ends · esc/q close', viewport.contentColumns))),
+  )
+}
+
+/** Collapse arbitrary metadata to one terminal row before verbose rendering. */
+function verboseLine(text: string, columns: number): string {
+  return truncateColumns(displayText(text).replace(/\n/gu, ' ↵ ').replace(/\t/gu, '  '), Math.max(1, columns))
+}
+
+/** One-row editor window keeping the logical cursor visible in long drafts. */
+function editorWindow(value: string, cursor: number, columns: number): { before: string; caret: string; after: string } {
+  const width = Math.max(1, columns)
+  const normalize = (text: string): string => displayText(text).replace(/\n/gu, '↵').replace(/\t/gu, '  ')
+  const caretSource = value.slice(cursor, cursor + 1)
+  const caret = caretSource === '' ? ' ' : normalize(caretSource)
+  const remaining = Math.max(0, width - visibleColumns(caret))
+  const afterBudget = Math.min(Math.floor(remaining / 3), visibleColumns(normalize(value.slice(cursor + 1))))
+  const beforeBudget = Math.max(0, remaining - afterBudget)
+  const before = beforeBudget === 0
+    ? ''
+    : displayTail(normalize(value.slice(0, cursor)), beforeBudget, 1).text
+  const after = afterBudget === 0
+    ? ''
+    : truncateColumns(normalize(value.slice(cursor + 1)), afterBudget)
+  return { before, caret, after }
+}
+
+/**
+ * The Ctrl+O transcript inspector: one selected durable entry at a time,
+ * with independent history selection and content scrolling. The complete
+ * retained entry is converted to physical rows, but only one viewport slice
+ * reaches Ink, so even a huge reasoning block cannot grow the dynamic tree.
+ */
+function VerbosePanel({ entries, onClose }: { entries: readonly TranscriptEntry[]; onClose(): void }): ReactElement {
+  const stdout = useStdout().stdout
+  const columns = stdout?.columns ?? 80
+  const rows = stdout?.rows ?? 30
+  const viewport = inspectorViewport(columns, rows)
+  const [cursor, setCursor] = useState(() => Math.max(0, entries.length - 1))
+  const [scroll, setScroll] = useState(0)
+  const savedScroll = useRef(new Map<number, number>())
+  const cursorRef = useRef(cursor)
+  const previousLength = useRef(entries.length)
+  const entry = entries[cursor]
+  const allLines = useMemo(
+    () => entry === undefined ? [] : transcriptEntryLines(entry, viewport.contentColumns),
+    [entry, viewport.contentColumns],
+  )
+  const visibleScroll = clampScroll(scroll, allLines.length, viewport.bodyRows)
+
+  useEffect(() => {
+    cursorRef.current = cursor
+  }, [cursor])
+
+  useEffect(() => {
+    const current = cursorRef.current
+    const next = followInspectorCursor(current, previousLength.current, entries.length)
+    if (next !== current) {
+      savedScroll.current.set(current, visibleScroll)
+      setCursor(next)
+      setScroll(savedScroll.current.get(next) ?? 0)
+    }
+    previousLength.current = entries.length
+  }, [entries.length])
+
+  useEffect(() => {
+    const clamped = clampScroll(scroll, allLines.length, viewport.bodyRows)
+    if (clamped !== scroll) setScroll(clamped)
+    savedScroll.current.set(cursor, clamped)
+  }, [cursor, scroll, allLines.length, viewport.bodyRows])
+
+  const selectEntry = (next: number): void => {
+    if (entries.length === 0) return
+    const selected = Math.max(0, Math.min(entries.length - 1, next))
+    if (selected === cursor) return
+    savedScroll.current.set(cursor, visibleScroll)
+    setCursor(selected)
+    setScroll(savedScroll.current.get(selected) ?? 0)
+  }
+
+  const scrollBy = (delta: number): void => {
+    setScroll(current => moveScroll(current, delta, allLines.length, viewport.bodyRows))
+  }
+
+  useInput((input, key) => {
+    if (key.escape || input === 'q' || (key.ctrl && input === 'o')) {
+      onClose()
+      return
+    }
+    if (entries.length === 0) return
+    if (key.leftArrow) {
+      selectEntry(cursor - 1)
+      return
+    }
+    if (key.rightArrow) {
+      selectEntry(cursor + 1)
+      return
+    }
+    if (key.upArrow) {
+      scrollBy(-1)
+      return
+    }
+    if (key.downArrow) {
+      scrollBy(1)
+      return
+    }
+    if (key.pageUp) {
+      scrollBy(-Math.max(1, viewport.bodyRows - 1))
+      return
+    }
+    if (key.pageDown) {
+      scrollBy(Math.max(1, viewport.bodyRows - 1))
+      return
+    }
+    if (input === 'g') {
+      setScroll(0)
+      return
+    }
+    if (input === 'G') {
+      setScroll(Math.max(0, allLines.length - viewport.bodyRows))
+    }
+  })
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(
+      Text,
+      { wrap: 'truncate-end' },
+      truncateColumns('history details · ctrl+o / esc / q close', viewport.contentColumns),
+    )
+  }
+
+  const title = entries.length === 0
+    ? 'history details · empty'
+    : `history details · entry ${cursor + 1}/${entries.length} · lines ${allLines.length === 0 ? 0 : visibleScroll + 1}-${Math.min(allLines.length, visibleScroll + viewport.bodyRows)}/${allLines.length}`
+  const visible = allLines.slice(visibleScroll, visibleScroll + viewport.bodyRows)
+  return createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      paddingX: 1,
+      borderStyle: 'round',
+      borderColor: inkColor(TUI_RGB.brand),
+    },
+    createElement(
+      Text,
+      { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' },
+      truncateColumns(title, viewport.contentColumns),
+    ),
+    createElement(
+      Box,
+      { flexDirection: 'column' },
+      entry === undefined
+        ? createElement(Text, { dimColor: true }, '  no durable entries yet')
+        : createElement(StyledRows, { lines: visible }),
+    ),
+    createElement(
+      Text,
+      { dimColor: true, wrap: 'truncate-end' },
+      dim(truncateColumns('←→ entry · ↑↓ scroll · pgup/pgdn page · g/G ends · ctrl+o/esc/q close', viewport.contentColumns)),
+    ),
   )
 }
 
+/** Streaming chunks preserve `entries` identity, so the open inspector stays inert. */
+const MemoVerbosePanel = memo(VerbosePanel)
+
+/** Stable append-only boundary: modal updates must never revisit Static rows. */
+function staticRow(item: unknown): ReactElement {
+  return item as ReactElement
+}
+
+function StaticTranscript({ items }: { items: ReactElement[] }): ReactElement {
+  return createElement(Static, { items, children: staticRow })
+}
+
+const MemoStaticTranscript = memo(StaticTranscript)
+
 /** One completion candidate row. */
 interface CompletionCandidate {
   /** Insertion text for the command name (with leading slash). */
@@ -283,7 +1215,7 @@ interface CompletionCandidate {
   /** Human-readable description shown beside the label. */
   description: string
   /** Candidate origin; skills land the same literal text but route through the prompt. */
-  origin: 'command' | 'skill'
+  origin: 'command' | 'skill' | 'mention' | 'path'
 }
 
 /**
@@ -303,13 +1235,21 @@ function completionCandidates(
     { label: '/help', description: 'show commands', origin: 'command' },
     { label: '/model', description: 'switch the model', origin: 'command' },
     { label: '/clear', description: 'clear the screen', origin: 'command' },
+    { label: '/export', description: 'export the transcript to markdown', origin: 'command' },
+    { label: '/title', description: 'rename this session', origin: 'command' },
     { label: '/quit', description: 'exit', origin: 'command' },
   ]
-  const registry = descriptors.map((descriptor): CompletionCandidate => ({
-    label: `/${descriptor.name}`,
-    description: descriptor.description,
-    origin: 'command',
-  }))
+  // Local commands shadow registry names (e.g. the plugin-registered
+  // /permission is served by the registry itself, never duplicated here),
+  // so collisions cannot render two rows with the same key.
+  const localNames = new Set(local.map(candidate => candidate.label.slice(1)))
+  const registry = descriptors
+    .filter(descriptor => !localNames.has(descriptor.name))
+    .map((descriptor): CompletionCandidate => ({
+      label: `/${descriptor.name}`,
+      description: descriptor.description,
+      origin: 'command',
+    }))
   const taken = new Set([...local, ...registry].map(candidate => candidate.label.slice(1)))
   const skillRows = skills
     .filter(skill => !taken.has(skill.name))
@@ -323,11 +1263,64 @@ function completionCandidates(
   return all.filter(candidate => candidate.label.slice(1).startsWith(prefix)).slice(0, 10)
 }
 
+/**
+ * The completion menu, rendered inside the composer's subtree directly above
+ * the framed box — attached the way Claude-Code anchors its dropdown. Opening
+ * it grows the stack downward: the composer stays the last element on screen
+ * and everything above (the flushed static transcript, the status line) never
+ * moves. Props-only (no lifted state): the menu is a pure view of the input
+ * editor's live completion state, so no cross-component effect ever resyncs
+ * it (a state lift here previously deadlocked the menu after a resize).
+ */
+function CompletionMenu({ active, mention, index, rows }: {
+  active: boolean
+  mention: boolean
+  index: number
+  rows: readonly CompletionCandidate[]
+}): ReactElement | undefined {
+  // Hook order is unconditional: `active` toggling must not change the hook
+  // count (the early return used to sit above useStdout).
+  const stdout = useStdout().stdout
+  const columns = stdout?.columns ?? 80
+  const terminalRows = stdout?.rows ?? 30
+  if (!active) return undefined
+  const nameWidth = Math.min(18, Math.max(0, ...rows.map(row => visibleColumns(row.label))) + 2)
+  const descBudget = Math.max(24, columns - nameWidth - 8)
+  const showFooter = terminalRows >= 12
+  const limit = Math.max(1, Math.min(6, terminalRows - (showFooter ? 11 : 10)))
+  const selected = rows.length === 0 ? 0 : index % rows.length
+  const first = selectionWindow(selected, rows.length, limit)
+  const visible = rows.slice(first, first + limit)
+  return createElement(
+    Box,
+    { flexDirection: 'column', marginLeft: 2 },
+    ...(rows.length === 0
+      ? [createElement(Text, { key: 'loading', dimColor: true }, 'searching…')]
+      : visible.map((candidate, at) => {
+        const absolute = first + at
+        return createElement(
+        Text,
+        {
+          key: candidate.label,
+          color: absolute === selected ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+          wrap: 'truncate-end',
+        },
+        `${absolute === selected ? '❯ ' : '  '}${padColumns(candidate.label, nameWidth)}${dim(truncateColumns(displayText(candidate.description), descBudget))}`,
+        )
+      })),
+    showFooter ? createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(mention ? '↑↓ choose · tab insert' : '↑↓ choose · tab complete')) : undefined,
+  )
+}
+
 /**
  * The prompt box: TUI-local slash commands handled locally, other lines
  * dispatched; input editing keeps a cursor with history and completion.
+ * While a modal (approval / question / model panel) owns the keys, the
+ * box passes every key through untouched.
  */
-function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, notify }: {
+function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openHelp, notify, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle }: {
+  active: boolean
+  frozen: boolean
   busy: boolean
   descriptors: readonly CommandDescriptor[]
   skills: readonly SkillRow[]
@@ -336,8 +1329,18 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
   interrupt(): boolean
   quit(): void
   openModel(): void
+  openHelp(): void
   notify(text: string): void
+  toggleReasoning(): void
+  openVerbose(): void
+  clearView(): void
+  refresh(): void
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  cyclePermission(): string
+  exportTranscript(argument: string): Promise<void>
+  renameTitle(argument: string): string
 }): ReactElement {
+  const columns = useStdout().stdout?.columns ?? 80
   const [value, setValue] = useState('')
   const [cursor, setCursor] = useState(0)
   const history = useRef<readonly string[]>([])
@@ -345,9 +1348,101 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
   const draft = useRef('')
   const [completionIndex, setCompletionIndex] = useState(0)
   const candidates = completionCandidates(value, descriptors, skills)
-  const completionActive = candidates.length > 0 && value.startsWith('/') && !value.includes(' ') && !value.includes('\n')
+  const slashActive = candidates.length > 0 && value.startsWith('/') && !value.includes(' ') && !value.includes('\n')
+
+  // @mention token: the last `@word` on the cursor's line before the cursor.
+  const beforeCursor = value.slice(0, cursor)
+  const lastLine = beforeCursor.split('\n').at(-1) ?? ''
+  const tokenMatch = /(^|\s)@([^\s]*)$/u.exec(lastLine)
+  const mentionToken = tokenMatch === null
+    ? undefined
+    : { start: beforeCursor.length - lastLine.length + (tokenMatch.index ?? 0) + (tokenMatch[1]?.length ?? 0), query: tokenMatch[2] ?? '' }
+  const mentionActive = mentionToken !== undefined
+  const [mentionRows, setMentionRows] = useState<readonly MentionCandidate[]>([])
+
+  // Bare path token: the last whitespace-delimited run on the cursor's line
+  // when it already looks like a path (Claude-Code bare Tab completion). A
+  // LEADING '/' is the command namespace, never a path — without this guard
+  // typing the bare '/' hijacked the menu into the workspace file scan and
+  // the slash-command candidates never appeared.
+  const bareTokenMatch = /([^\s]+)$/u.exec(lastLine)
+  const bareToken = bareTokenMatch === null ? '' : bareTokenMatch[1] ?? ''
+  const pathActive = !mentionActive
+    && !bareToken.startsWith('/')
+    && (bareToken.includes('/') || bareToken === '.' || bareToken === '..')
+  const pathTokenStart = beforeCursor.length - bareToken.length
+  const [pathRows, setPathRows] = useState<readonly MentionCandidate[]>([])
+
+  useEffect(() => {
+    if (!active || !pathActive) {
+      setPathRows([])
+      return
+    }
+    const controller = new AbortController()
+    setPathRows([])
+    loadMentions(bareToken, controller.signal).then(
+      rows => setPathRows(rows.filter(row => row.kind !== 'session')),
+      () => {},
+    )
+    return () => {
+      controller.abort()
+    }
+  }, [active, pathActive, bareToken])
+
+  useEffect(() => {
+    if (!active || !mentionActive) {
+      setMentionRows([])
+      return
+    }
+    const controller = new AbortController()
+    setMentionRows([])
+    loadMentions(mentionToken.query, controller.signal).then(
+      rows => setMentionRows(rows),
+      () => {},
+    )
+    return () => {
+      controller.abort()
+    }
+  }, [active, mentionActive, mentionToken?.query])
+
+  const menuActive = (slashActive || mentionActive || pathActive) && !busy
+  const menuRows: readonly CompletionCandidate[] = mentionActive
+    ? mentionRows.map(row => ({
+      label: row.label.startsWith('@')
+        ? row.label
+        : `@${row.label}${row.kind === 'directory' ? '/' : ''}`,
+      description: row.description,
+      origin: 'mention',
+    }))
+    : pathActive
+      ? pathRows.map(row => ({
+        label: row.label,
+        description: row.description,
+        origin: 'path',
+      }))
+      : candidates
 
   useInput((input, key) => {
+    // Modal ownership: approval/question/model dialogs consume all keys.
+    if (!active) return
+    // Shift+Tab cycles the permission preset (Claude-Code convention).
+    if (key.tab && key.shift) {
+      const next = cyclePermission()
+      if (next !== '') notify(`permission → ${next}`)
+      return
+    }
+    // Ctrl+R toggles the thinking display (Claude-Code reasoning fold).
+    if (key.ctrl && input === 'r') {
+      toggleReasoning()
+      return
+    }
+    // Ctrl+O opens the bounded transcript inspector (Claude-Code convention,
+    // adapted to append-only static rows): one history entry at a time with
+    // tool cards and reasoning expanded, Esc returns.
+    if (key.ctrl && input === 'o') {
+      openVerbose()
+      return
+    }
     // Ctrl+C is three-state (community-TUI convention): a running turn is
     // cancelled, a non-empty draft is cleared, and only an idle empty input
     // exits. Ctrl+D always means exit but refuses mid-turn.
@@ -393,11 +1488,23 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
         return
       }
       if (text === '/help') {
-        notify('/model switch · /clear clear the screen · /quit exit · other /commands reach the registry · Esc or Ctrl+C interrupts the running turn')
+        openHelp()
         return
       }
       if (text === '/clear') {
-        console.clear()
+        // Clear the screen AND drop the folded view: the raw ANSI clear + a
+        // Static remount (refresh) so the ledger stays in sync, then the
+        // store resets so the rebuilt transcript starts empty.
+        refresh()
+        clearView()
+        return
+      }
+      if (text === '/export' || text.startsWith('/export ')) {
+        void exportTranscript(text.slice(8))
+        return
+      }
+      if (text === '/title' || text.startsWith('/title ')) {
+        notify(renameTitle(text.slice(7)))
         return
       }
       if (text === '/model' || text.startsWith('/model ')) {
@@ -414,12 +1521,12 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
       dispatch(text)
       return
     }
-    if (completionActive && key.upArrow) {
-      setCompletionIndex(index => (index + candidates.length - 1) % candidates.length)
+    if (menuActive && key.upArrow) {
+      setCompletionIndex(index => (index + menuRows.length - 1) % menuRows.length)
       return
     }
-    if (completionActive && key.downArrow) {
-      setCompletionIndex(index => (index + 1) % candidates.length)
+    if (menuActive && key.downArrow) {
+      setCompletionIndex(index => (index + 1) % menuRows.length)
       return
     }
     if (key.upArrow) {
@@ -447,13 +1554,35 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
       setCursor((entries[next] ?? '').length)
       return
     }
-    if (key.tab && completionActive) {
-      const candidate = candidates[completionIndex % candidates.length]
-      if (candidate !== undefined) {
-        setValue(`${candidate.label} `)
-        setCursor(candidate.label.length + 1)
-        setCompletionIndex(0)
+    if (key.tab && menuActive) {
+      if (mentionActive && mentionToken !== undefined) {
+        const row = mentionRows[completionIndex % mentionRows.length]
+        if (row !== undefined) {
+          // Session rows carry the canonical @[label](dsh-session:…) token;
+          // file rows insert `@path` (directories keep their trailing slash).
+          const insertion = row.label.startsWith('@')
+            ? row.label
+            : `@${row.label}${row.kind === 'directory' ? '/' : ''}`
+          setValue(value.slice(0, mentionToken.start) + insertion + value.slice(cursor))
+          setCursor(mentionToken.start + insertion.length)
+        }
+      } else if (pathActive) {
+        const row = pathRows[completionIndex % Math.max(1, pathRows.length)]
+        if (row !== undefined) {
+          // Bare path completion replaces the typed token with the chosen
+          // workspace path (directories keep their trailing slash).
+          const insertion = row.kind === 'directory' ? `${row.label}/` : row.label
+          setValue(value.slice(0, pathTokenStart) + insertion + value.slice(cursor))
+          setCursor(pathTokenStart + insertion.length)
+        }
+      } else {
+        const candidate = candidates[completionIndex % candidates.length]
+        if (candidate !== undefined) {
+          setValue(`${candidate.label} `)
+          setCursor(candidate.label.length + 1)
+        }
       }
+      setCompletionIndex(0)
       return
     }
     if (key.backspace || key.delete) {
@@ -477,6 +1606,18 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
       setCursor(0)
       return
     }
+    // Readline parity: Ctrl+K cuts from the cursor to the end of the line.
+    if (key.ctrl && input === 'k') {
+      setValue(value.slice(0, cursor))
+      return
+    }
+    // Ctrl+L refreshes the screen (readline convention): raw ANSI clear
+    // plus a Static remount so the flushed transcript re-emits (a bare
+    // console.clear() would desync Ink's ledger against the static rows).
+    if (key.ctrl && input === 'l') {
+      refresh()
+      return
+    }
     if (key.ctrl && input === 'a') {
       setCursor(0)
       return
@@ -492,35 +1633,54 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
     }
   })
 
-  const shown = completionActive && !busy
+  // Every exclusive panel keeps the composer as a stable visual anchor, but
+  // freezes it to one row: no menu, multiline wrap, or animation.
+  if (frozen) {
+    const frozen = value === ''
+      ? 'type a message'
+      : verboseLine(value, Math.max(1, columns - 6))
+    return createElement(
+      Box,
+      { borderStyle: 'round', borderColor: inkColor(TUI_RGB.dim), paddingX: 1 },
+      createElement(
+        Text,
+        { wrap: 'truncate-end' },
+        createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? '… ' : '❯ '),
+        frozen,
+      ),
+    )
+  }
+
+  const editor = editorWindow(value, cursor, Math.max(1, columns - 6))
+
   return createElement(
     Box,
     { flexDirection: 'column' },
-    shown
-      ? createElement(
-        Box,
-        { flexDirection: 'column', marginLeft: 1 },
-        ...candidates.map((candidate, index) => createElement(
-          Text,
-          {
-            key: candidate.label,
-            color: index === completionIndex % candidates.length ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
-          },
-          `${index === completionIndex % candidates.length ? '❯ ' : '  '}${candidate.label} ${dim(displayText(candidate.description))}`,
-        )),
-        createElement(Text, { dimColor: true }, dim('  ↑↓ choose · tab complete')),
-      )
-      : undefined,
-    busy && value === ''
-      ? createElement(Text, { dimColor: true }, dim('  enter steers the running turn · esc or ctrl+c cancels'))
-      : undefined,
+    // The completion dropdown rides directly above the box (Claude-Code
+    // anchor): rendered from the editor's own live state, never lifted.
+    createElement(CompletionMenu, {
+      active: menuActive,
+      mention: mentionActive,
+      index: completionIndex,
+      rows: menuRows,
+    }),
+    // The framed input box: a visible boundary so the prompt never blends
+    // into the transcript above it; the cursor block sits immediately after
+    // the prompt marker (leftmost), with the dim placeholder trailing it —
+    // no extra space, so the empty state reads `❯ ▮type a message…`.
     createElement(
       Box,
-      null,
-      createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? '… ' : '❯ '),
-      createElement(Text, null, value.slice(0, cursor)),
-      createElement(Text, { inverse: true }, value.slice(cursor, cursor + 1) === '' ? ' ' : value.slice(cursor, cursor + 1)),
-      createElement(Text, null, value.slice(cursor + 1)),
+      { borderStyle: 'round', borderColor: inkColor(TUI_RGB.dim), paddingX: 1 },
+      createElement(
+        Text,
+        { wrap: 'truncate-end' },
+        createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? '… ' : '❯ '),
+        value === '' ? undefined : editor.before,
+        createElement(CursorBlock, { char: editor.caret }),
+        value === '' && !busy
+          ? createElement(Text, { dimColor: true }, 'type a message · / commands · @ mentions')
+          : editor.after,
+      ),
     ),
   )
 }
@@ -557,20 +1717,165 @@ export function App(props: AppProps): ReactElement {
   }, [modelOpen])
 
   const busy = view.busy
+  const [showReasoning, setShowReasoning] = useState(false)
+  const [verboseOpen, setVerboseOpen] = useState(false)
+  const [helpOpen, setHelpOpen] = useState(false)
+  const [refreshEpoch, setRefreshEpoch] = useState(0)
+  const approvalSnapshot = useSyncExternalStore(props.approval.subscribe, props.approval.getSnapshot)
+  const questionSnapshot = useSyncExternalStore(props.questions.subscribe, props.questions.getSnapshot)
+  const approvalPending = approvalSnapshot.pending !== undefined
+  const questionPending = questionSnapshot.pending !== undefined
+  // While any modal owns the keys, the prompt box passes everything through.
+  const inputActive = !modelOpen && !helpOpen && !verboseOpen && !approvalPending && !questionPending
+
+  // Human questions outrank local inspectors. Close the lower modal instead
+  // of leaving an approval/question visible but keyboard-locked behind it.
+  useEffect(() => {
+    if (!approvalPending && !questionPending) return
+    setModelOpen(false)
+    setHelpOpen(false)
+    setVerboseOpen(false)
+  }, [approvalPending, questionPending])
+
+  // Append-only transcript: everything up to the first still-mutable entry
+  // (a running tool/retry) flushes through Ink's `<Static>` into native
+  // scrollback and is normally never rewritten — the Claude-Code stability
+  // contract
+  // that lets arbitrarily long conversations scroll instead of freezing when
+  // the live tree exceeds the terminal height. The dynamic region below stays
+  // small: the streaming tail, modals, composer, and its status footer.
+  // `assistant/chunk` preserves `entries` identity. Memoizing on that identity
+  // keeps long settled histories out of the per-token render path.
+  const settled = useMemo(() => settledEntryCount(view.entries), [view.entries])
+  // Claude-Code spacing: one blank row before each user prompt (except the
+  // first) separates replies from the next turn. Settled rows flush once with
+  // the reasoning toggle as it is NOW (Ctrl+R affects subsequent flushes);
+  // Ctrl+O browses the frozen history through a bounded selected-entry view.
+  const settledRows = useMemo(() => {
+    const rows: ReactElement[] = [createElement(Header, { key: 'header', resumed: props.resumed })]
+    view.entries.slice(0, settled).forEach((entry, index) => {
+      const row = createElement(EntryLine, { entry, showReasoning, verbose: false })
+      if (entry.kind === 'user' && index > 0) {
+        rows.push(createElement(Box, { key: `gap-${index}`, paddingX: 1 }, createElement(Text, null, ' ')))
+      }
+      rows.push(createElement(Box, { key: index, paddingX: 1 }, row))
+    })
+    return rows
+  }, [view.entries, settled, showReasoning, props.resumed])
+
+  // Hook order is unconditional. Its dimensions drive every live-region
+  // budget before any dynamic rows are constructed.
+  const appStdout = useStdout().stdout
+  const [terminalSize, setTerminalSize] = useState(() => ({
+    columns: appStdout?.columns ?? 80,
+    rows: appStdout?.rows ?? 30,
+  }))
+  const terminalSizeRef = useRef(terminalSize)
+  useEffect(() => {
+    if (appStdout === undefined) return
+    let replayTimer: ReturnType<typeof setTimeout> | undefined
+    const handleResize = (): void => {
+      const next = {
+        columns: appStdout.columns ?? 80,
+        rows: appStdout.rows ?? 30,
+      }
+      if (next.columns === terminalSizeRef.current.columns && next.rows === terminalSizeRef.current.rows) return
+      terminalSizeRef.current = next
+
+      // Ink 5 erases by the old logical line count. Once the terminal reflows
+      // a full-width border at a new width, that count is no longer enough and
+      // stale frames remain visible. Follow Codex's source-backed reflow
+      // policy: update live geometry immediately, but wait for the resize
+      // burst to settle before one hard reset and one transcript replay at the
+      // final width. Replaying Static on every event appends duplicate history.
+      setTerminalSize(next)
+      if (replayTimer !== undefined) clearTimeout(replayTimer)
+      replayTimer = setTimeout(() => {
+        appStdout.write(RESIZE_REFLOW_CLEAR)
+        setRefreshEpoch(epoch => epoch + 1)
+      }, RESIZE_REFLOW_DELAY_MS)
+    }
+    appStdout.on('resize', handleResize)
+    return () => {
+      appStdout.off('resize', handleResize)
+      if (replayTimer !== undefined) clearTimeout(replayTimer)
+    }
+  }, [appStdout])
+  const terminalRows = terminalSize.rows
+  const terminalColumns = terminalSize.columns
+  const dynamicRows = Math.max(1, terminalRows - 12)
+  const streamingActive = view.streaming !== '' || view.streamingReasoning !== ''
+  const deepDivingVisible = busy && !streamingActive
+  const allLiveLines = useMemo(
+    () => view.entries.slice(settled).flatMap(entry => transcriptEntryLines(entry, Math.max(1, terminalColumns - 2))),
+    [view.entries, settled, terminalColumns],
+  )
+  const liveBudget = streamingActive
+    ? Math.max(1, Math.floor(dynamicRows / 3))
+    : Math.max(0, dynamicRows - (deepDivingVisible ? 1 : 0))
+  const visibleLiveLines = liveBudget === 0 ? [] : allLiveLines.slice(-liveBudget)
+
+  // The screen refresh used by /clear and Ctrl+L: a raw ANSI clear (wipe
+  // screen AND scrollback, home the cursor) then a Static remount via the
+  // key change, which re-flushes the current items from index 0. NEVER
+  // console.clear() — it desyncs Ink's internal line ledger against the
+  // flushed static rows and garbles every frame after.
+  const streamRows = Math.max(1, dynamicRows - visibleLiveLines.length)
+  const reasoningRows = view.streamingReasoning === ''
+    ? 0
+    : view.streaming === ''
+      ? streamRows
+      : streamRows <= 1
+        ? 0
+        : showReasoning
+          ? Math.max(1, Math.floor(streamRows / 3))
+          : 1
+  const answerRows = view.streaming === '' ? 0 : Math.max(1, streamRows - reasoningRows)
+  const transcriptVisible = !modelOpen && !helpOpen && !verboseOpen && !approvalPending && !questionPending
+  const inspectorVisible = verboseOpen && !approvalPending && !questionPending
+  const modalVisible = modelOpen || helpOpen || inspectorVisible || approvalPending || questionPending
+  const closeInspector = useCallback((): void => {
+    setVerboseOpen(false)
+  }, [])
+  const refreshScreen = (): void => {
+    if (appStdout !== undefined) appStdout.write('\x1b[2J\x1b[3J\x1b[H')
+    setRefreshEpoch(epoch => epoch + 1)
+  }
+
   return createElement(
     Box,
     { flexDirection: 'column' },
-    createElement(Header, { resumed: props.resumed }),
-    createElement(
-      Box,
-      { flexDirection: 'column', paddingX: 1 },
-      ...view.entries.map((entry, index) => createElement(EntryLine, { key: index, entry })),
-      view.streaming !== '' ? createElement(Text, null, displayText(view.streaming)) : undefined,
-      busy && view.streaming === '' ? createElement(Text, { dimColor: true }, 'thinking…') : undefined,
-    ),
-    createElement(TodoPanel, { todos: view.todos }),
-    createElement(ApprovalBar, { approval: props.approval }),
-    modelOpen
+    createElement(MemoStaticTranscript, {
+      key: refreshEpoch,
+      items: settledRows,
+    }),
+    transcriptVisible
+      ? createElement(
+        Box,
+        { flexDirection: 'column', paddingX: 1 },
+        visibleLiveLines.length === 0 ? undefined : createElement(StyledRows, { lines: visibleLiveLines }),
+        view.streamingReasoning !== '' && reasoningRows > 0
+          ? createElement(StreamTail, {
+            text: showReasoning ? view.streamingReasoning : 'Thinking…',
+            prefix: '  ✻ ',
+            dim: true,
+            maxRows: reasoningRows,
+          })
+          : undefined,
+        view.streaming !== '' && answerRows > 0
+          ? createElement(
+            StreamTail,
+            { text: view.streaming, dim: false, maxRows: answerRows },
+            busy ? createElement(Caret) : undefined,
+          )
+          : undefined,
+        deepDivingVisible ? createElement(DeepDivingLine, { since: view.busySince }) : undefined,
+      )
+      : undefined,
+    transcriptVisible ? createElement(TodoPanel, { todos: view.todos }) : undefined,
+    createElement(QuestionBar, { store: props.questions, locked: false }),
+    createElement(ApprovalBar, { approval: props.approval, locked: questionPending }),
+    modelOpen && !approvalPending && !questionPending
       ? createElement(ModelPanel, {
         directory,
         error: modelError,
@@ -584,28 +1889,81 @@ export function App(props: AppProps): ReactElement {
         },
       })
       : undefined,
+    helpOpen && !approvalPending && !questionPending
+      ? createElement(HelpPanel, {
+        descriptors,
+        skills,
+        onClose: () => {
+          setHelpOpen(false)
+        },
+      })
+      : undefined,
+    verboseOpen && !approvalPending && !questionPending
+      ? createElement(MemoVerbosePanel, {
+        entries: view.entries,
+        onClose: closeInspector,
+      })
+      : undefined,
+    transcriptVisible
+      ? createElement(
+        Box,
+        { flexDirection: 'column' },
+        ...notices.slice(-1).map((notice, index) => createElement(Text, { key: index, dimColor: true, wrap: 'truncate-end' }, displayText(notice))),
+      )
+      : undefined,
+    // Persistent bottom chrome: every interface owns exactly the same
+    // composer/status geometry. Panels may change above it, but can no longer
+    // reorder the status or introduce mode-specific vertical margins.
     createElement(
       Box,
       { flexDirection: 'column' },
-      ...notices.slice(-3).map((notice, index) => createElement(Text, { key: index, dimColor: true }, notice)),
+      createElement(Input, {
+        active: inputActive,
+        frozen: modalVisible,
+        busy,
+        descriptors,
+        skills,
+        dispatch: props.dispatch,
+        steer: props.steer,
+        interrupt: props.interrupt,
+        quit: props.quit,
+        openModel: () => {
+          setModelOpen(true)
+        },
+        openHelp: () => {
+          setHelpOpen(true)
+        },
+        notify,
+        openVerbose: () => {
+          setVerboseOpen(true)
+        },
+        clearView: () => {
+          props.store.reset()
+        },
+        refresh: refreshScreen,
+        toggleReasoning: () => {
+          setShowReasoning(current => !current)
+        },
+        loadMentions: props.loadMentions,
+        cyclePermission: props.cyclePermission,
+        exportTranscript: props.exportTranscript,
+        renameTitle: props.renameTitle,
+      }),
+      createElement(StatusLine, {
+        facts: {
+          model: modelLabel,
+          cwd: props.cwd,
+          branch: props.branch,
+          sessionId: props.sessionId,
+          title: view.title,
+          plan: view.plan,
+          permission: view.permission,
+          sandbox: view.sandbox,
+          goal: view.goal === undefined ? undefined : { phase: view.goal.phase, rounds: view.goal.rounds, max: view.goal.max },
+        },
+        stats: view.stats,
+        busy,
+      }),
     ),
-    createElement(Input, {
-      busy,
-      descriptors,
-      skills,
-      dispatch: props.dispatch,
-      steer: props.steer,
-      interrupt: props.interrupt,
-      quit: props.quit,
-      openModel: () => {
-        setModelOpen(true)
-      },
-      notify,
-    }),
-    createElement(StatusLine, {
-      facts: { model: modelLabel, cwd: props.cwd, branch: props.branch, sessionId: props.sessionId },
-      stats: view.stats,
-      busy,
-    }),
   )
 }