dsh-code 0.3.0 → 0.5.0

package/src/app.ts

@@ -15,27 +15,60 @@
  */
 
 import {
-  createElement, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement,
+  createElement, memo, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement,
 } from 'react'
-import { Box, Text, useInput, useStdout } 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 type { AskUserQuestionAnswerItem } from '@deepseek-ai/dsh-user-questions'
-import { TUI_RGB, brand, dim, error as paintError, warn } from './theme.ts'
+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 { ApprovalSnapshot, 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 { QuestionSnapshot, QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
 import type { MentionCandidate } from './mentions.ts'
-import { buildStatusGroups, type StatusFacts } from './render/status.ts'
-import { displayText } from './render/text.ts'
+import { ModePanel, PluginPanel, ResumePanel } from './kernel-panels.ts'
+import type { PresetRow } from './presets.ts'
+import type { PluginRow } from './plugin-inventory.ts'
+import type { SessionDirectoryOptions, SessionRow } from './session-directory.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, singleLineText, truncateColumns } from './render/text.ts'
+import {
+  clampScroll,
+  followInspectorCursor,
+  inspectorViewport,
+  layoutGutterRows,
+  moveScroll,
+  panelViewport,
+  revealRow,
+  selectionWindow,
+} from './render/inspector.ts'
+import {
+  lineSegment,
+  markdownLines,
+  styledLines,
+  textLines,
+  transcriptEntryLines,
+  type LineStyle,
+  type StyledLine,
+} from './render/lines.ts'
+
+/** Visual priority for one bounded local notice. */
+export type NoticeTone = 'info' | 'warning' | 'error'
 
 /** Props the runner hands the app; callbacks stay owned by the runner. */
 export interface AppProps {
@@ -53,12 +86,16 @@ export interface AppProps {
   model: string
   /** Working-directory basename the session serves. */
   cwd: string
+  /** Absolute working directory used by session filters and references. */
+  workspaceRoot: string
   /** Git branch name, empty outside a repository. */
   branch: string
   /** Short session identifier. */
   sessionId: string
   /** Whether this session was resumed from persistence. */
   resumed: boolean
+  /** Agent preset currently composing the session. */
+  mode: string
   /** Submit one line: slash commands to the registry, other text to the agent. */
   dispatch(text: string): void
   /** Submit steering: consumed at the running turn's next step boundary. */
@@ -75,8 +112,21 @@ export interface AppProps {
   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
+  /** Preset/session/plugin kernel operations. */
+  loadPresets(): Promise<readonly PresetRow[]>
+  switchMode(id: string): Promise<string>
+  createSession(mode?: string): void
+  loadSessions(options: SessionDirectoryOptions, signal?: AbortSignal): Promise<readonly SessionRow[]>
+  loadSessionTranscript(id: string, signal?: AbortSignal): Promise<string>
+  switchSession(row: SessionRow): void
+  cancelSessionSwitch(): boolean
+  loadPlugins(): readonly PluginRow[]
   /** Registers the app's notice channel with the runner (called once on mount). */
-  onBridgeReady(bridge: { notify(text: string): void }): void
+  onBridgeReady(bridge: { notify(text: string, tone?: NoticeTone): void }): void
 }
 
 /** Ink `color` string for one palette triple. */
@@ -84,23 +134,10 @@ 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)))
+  const clipped = truncateColumns(singleLineText(text), width)
+  return clipped + ' '.repeat(Math.max(0, width - visibleColumns(clipped)))
 }
 
 /** Interval-driven frame counter for one self-contained animated leaf. */
@@ -133,6 +170,64 @@ function CursorBlock({ char }: { char: string }): ReactElement {
   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
@@ -160,6 +255,54 @@ function segmentProps(style: MdSegment['style']): {
   }
 }
 
+/** 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,
+        )),
+    )),
+  )
+}
+
+/** Codex-style panel rhythm that still participates in the row budget. */
+function PanelGap({ visible }: { visible: boolean }): ReactElement | undefined {
+  return visible ? createElement(Text, null, ' ') : undefined
+}
+
 /** One settled markdown document rendered as styled lines at the terminal width. */
 function MarkdownBody({ text }: { text: string }): ReactElement {
   const columns = useStdout().stdout?.columns ?? 80
@@ -174,13 +317,78 @@ function MarkdownBody({ text }: { text: string }): ReactElement {
     ...lines.map((line, index) => createElement(
       Text,
       { key: index },
-      ...line.segments.map((segment, at) => createElement(Text, { key: at, ...segmentProps(segment.style) }, segment.text)),
+      line.segments.length === 0
+        ? ' '
+        : 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, showReasoning }: { entry: TranscriptEntry; showReasoning: boolean }): ReactElement {
+function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry; showReasoning: boolean; verbose: boolean }): ReactElement {
   switch (entry.kind) {
     case 'user':
       // Collapsed injected context reads as a dim ↳ row; only direct human
@@ -216,7 +424,7 @@ function EntryLine({ entry, showReasoning }: { entry: TranscriptEntry; showReaso
         { flexDirection: 'column' },
         createElement(
           Text,
-          null,
+          { wrap: verbose ? 'truncate-end' : undefined },
           mark,
           ' ',
           brand(entry.name),
@@ -226,9 +434,12 @@ function EntryLine({ entry, showReasoning }: { entry: TranscriptEntry; showReaso
           ? undefined
           : createElement(
             Text,
-            { color: entry.state === 'error' ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim) },
+            { 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': {
@@ -242,7 +453,7 @@ function EntryLine({ entry, showReasoning }: { entry: TranscriptEntry; showReaso
         { flexDirection: 'column' },
         createElement(
           Text,
-          null,
+          { wrap: verbose ? 'truncate-end' : undefined },
           mark,
           ' ',
           brand(`/${entry.name}`),
@@ -250,11 +461,37 @@ function EntryLine({ entry, showReasoning }: { entry: TranscriptEntry; showReaso
         ),
         entry.summary === ''
           ? undefined
-          : createElement(Text, { color: inkColor(TUI_RGB.dim) }, `  ⎿ ${displayText(entry.summary)}`),
+          : 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,
+        { 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')
   }
@@ -303,33 +540,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, marginTop: 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)}`,
-    )),
   )
 }
 
@@ -345,29 +572,92 @@ function StatusLine({ facts, stats, busy }: {
   busy: boolean
 }): ReactElement {
   const groups = buildStatusGroups(facts, stats)
-  const children: ReactElement[] = [
-    busy
-      ? createElement(Pulse)
-      : createElement(Text, { color: inkColor(TUI_RGB.brand) }, '○'),
-    createElement(Text, null, ' '),
-  ]
-  groups.forEach((group, index) => {
-    if (index > 0) children.push(createElement(Text, { dimColor: true }, dim(' | ')))
-    children.push(createElement(Text, { dimColor: true }, group))
-  })
-  // Left-aligned status bar; the top margin keeps it clear of the input box.
+  // 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,
-    { paddingX: 1, marginTop: 1 },
-    ...children,
+    // 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(' | '),
+    ),
+  )
+}
+
+/**
+ * One fixed-height local feedback row. Errors remain visible while a slash
+ * subpage is open, but arbitrary exception text can never add physical rows
+ * above the composer.
+ */
+function NoticeLine({ text, tone, columns }: {
+  text: string
+  tone: NoticeTone
+  columns: number
+}): ReactElement {
+  const color = tone === 'error'
+    ? TUI_RGB.error
+    : tone === 'warning'
+      ? TUI_RGB.warn
+      : TUI_RGB.brandBright
+  const mark = tone === 'error' ? '⨯' : tone === 'warning' ? '!' : '•'
+  return createElement(
+    Box,
+    { paddingLeft: 2 },
+    createElement(
+      Text,
+      { color: inkColor(color), wrap: 'truncate-end' },
+      truncateColumns(`${mark} ${singleLineText(text)}`, Math.max(1, columns - 2)),
+    ),
   )
 }
 
 /** The y/n approval bar rendered while an approval ask is pending. */
-function ApprovalBar({ approval, locked }: { approval: ApprovalStore; locked: boolean }): ReactElement | undefined {
-  const snapshot = useSyncExternalStore(approval.subscribe, approval.getSnapshot)
-  useInput((input) => {
-    if (locked || snapshot.pending === undefined || snapshot.answered) return
+function ApprovalBar({ snapshot, locked }: { snapshot: ApprovalSnapshot; locked: boolean }): ReactElement | undefined {
+  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
@@ -375,18 +665,23 @@ function ApprovalBar({ approval, locked }: { approval: ApprovalStore; locked: bo
     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, marginTop: 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(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(StyledRows, { lines: content.slice(visibleScroll, visibleScroll + viewport.bodyRows) }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns(answered
+      ? 'submitted…'
+      : '↑↓/pgup/pgdn scroll · y allow once · n reject', viewport.contentColumns))),
   )
 }
 
@@ -398,8 +693,9 @@ function ApprovalBar({ approval, locked }: { approval: ApprovalStore; locked: bo
  * 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)
+function QuestionBar({ store, snapshot, locked }: { store: QuestionStore; snapshot: QuestionSnapshot; locked: boolean }): ReactElement | undefined {
+  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)
@@ -408,6 +704,7 @@ function QuestionBar({ store, locked }: { store: QuestionStore; locked: boolean
   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).
@@ -420,12 +717,65 @@ function QuestionBar({ store, locked }: { store: QuestionStore; locked: boolean
     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
@@ -437,11 +787,14 @@ function QuestionBar({ store, locked }: { store: QuestionStore; locked: boolean
       return
     }
     setAnswers(next)
-    setIndex(index + 1)
+    const nextIndex = index + 1
+    const nextQuestion = pending.request.questions[nextIndex]
+    setIndex(nextIndex)
     setCursor(0)
     setSelected([])
-    setMode('options')
+    setMode(nextQuestion?.options === undefined || nextQuestion.options.length === 0 ? 'custom' : 'options')
     setCustom('')
+    setScroll(0)
   }
 
   const commitOption = (): void => {
@@ -460,12 +813,28 @@ function QuestionBar({ store, locked }: { store: QuestionStore; locked: boolean
   }
 
   useInput((input, key) => {
-    if (locked || pending === undefined || question === undefined || submitted) return
+    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()
@@ -508,68 +877,66 @@ function QuestionBar({ store, locked }: { store: QuestionStore; locked: boolean
     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), alignSelf: 'flex-start', marginLeft: 1, marginTop: 1 },
+    { 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 },
-      isPlan ? `📋 plan review (${index + 1}/${pending.request.questions.length})` : `❓ question ${index + 1}/${pending.request.questions.length}`,
+      { 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),
     ),
-    question.header === undefined ? undefined : createElement(Text, { bold: true }, displayText(question.header)),
-    createElement(Text, null, displayText(question.question)),
-    question.detail === undefined
-      ? undefined
-      : isPlan
-        ? createElement(MarkdownBody, { text: question.detail })
-        : createElement(Text, { dimColor: true }, displayText(question.detail)),
-    submitted
-      ? createElement(Text, { dimColor: true }, '  submitted…')
-      : createElement(
-        Box,
-        { flexDirection: 'column', marginLeft: 1 },
-        ...(mode === 'custom' || options.length === 0
-          ? [
-            createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, `  custom: ${custom}${submitted ? '' : '▌'}`),
-            createElement(Text, { dimColor: true }, dim('  type your answer · enter submit · esc interrupt')),
-          ]
-          : options.map((option, at) => {
-            const chosen = isMulti && selected.includes(at)
-            const approve = isPlan && question.intent?.approve === option.label
-            const mark = approve ? '✓ ' : chosen ? '◉ ' : at === cursor ? '❯ ' : '  '
-            return createElement(
-              Text,
-              {
-                key: at,
-                color: at === cursor ? inkColor(TUI_RGB.brandBright) : chosen || approve ? inkColor(TUI_RGB.success) : inkColor(TUI_RGB.text),
-              },
-              `${mark}${displayText(option.label)}${option.description === undefined ? '' : dim(` — ${displayText(option.description)}`)}`,
-            )
-          })),
-        createElement(Text, { dimColor: true }, dim(isMulti
-          ? '  ↑↓ move · space toggle · enter submit · c custom · esc interrupt'
-          : '  ↑↓ move · enter submit · c custom · esc interrupt')),
-      ),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(StyledRows, { lines: rendered.lines.slice(visibleScroll, visibleScroll + viewport.bodyRows) }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns(footer, viewport.contentColumns))),
   )
 }
 
 /** The /model panel: a scrolling list over the advisory model directory. */
-function ModelPanel({ directory, error, onSelect, onClose }: {
+function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
   directory: ModelDirectory | undefined
   error: string | undefined
   onSelect(row: ModelRow): void
+  onRetry(): void
   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 (input === 'r') {
+      onRetry()
+      return
+    }
+    if (rows.length === 0) return
     if (key.upArrow) {
       setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
       return
@@ -578,24 +945,64 @@ 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 · r retry · esc/q close', viewport.contentColumns))
+  }
+
+  const stateRows: ReactElement[] = directory === undefined && error === undefined
+    ? [createElement(Text, { key: 'loading', dimColor: true, wrap: 'truncate-end' }, '  loading models…')]
+    : error !== undefined
+      ? [createElement(
+        Text,
+        { key: 'error', color: inkColor(TUI_RGB.error), wrap: 'truncate-end' },
+        truncateColumns(`  ${singleLineText(error)}`, viewport.contentColumns),
+      )]
+      : [
+        ...(directory?.failures.length === 0
+          ? []
+          : [createElement(
+            Text,
+            { key: 'failures', color: inkColor(TUI_RGB.warn), wrap: 'truncate-end' },
+            truncateColumns(`  unavailable providers: ${directory?.failures.join(', ')}`, viewport.contentColumns),
+          )]),
+        ...(rows.length === 0
+          ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, '  no models available')]
+          : []),
+      ]
+  // Measurement and rendering share the same physical-row budget: state
+  // messages consume body rows before selectable entries, as in Codex's
+  // list-selection views.
+  const rowBudget = Math.max(0, viewport.bodyRows - stateRows.length)
+  const first = selectionWindow(cursor, rows.length, rowBudget)
+  const visible = rowBudget === 0 ? [] : rows.slice(first, first + rowBudget)
   return createElement(
     Box,
-    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand), alignSelf: 'flex-start', marginLeft: 1, marginTop: 1 },
-    createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true }, '/model — select the model for the next step'),
-    directory === undefined && error === undefined
-      ? createElement(Text, { dimColor: true }, '  loading models…')
-      : undefined,
-    error !== undefined
-      ? createElement(Text, { color: inkColor(TUI_RGB.error) }, `  ${error}`)
-      : undefined,
+    { 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)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...stateRows,
     ...visible.map((row) => {
       const index = rows.indexOf(row)
       const label = displayText(`${row.providerName} · ${row.modelName}`)
@@ -604,14 +1011,303 @@ 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(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns('↑↓ move · pgup/pgdn page · g/G ends · enter select · r retry · 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, commandError, skillError, onClose }: {
+  descriptors: readonly CommandDescriptor[]
+  skills: readonly SkillRow[]
+  commandError: string | undefined
+  skillError: string | undefined
+  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 = Math.min(18, Math.max(1, viewport.contentColumns - 2))
+  const descBudget = Math.max(0, 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-gap' }, ' '),
+    createElement(Text, { key: 'commands-title', bold: true, wrap: 'truncate-end' }, ' commands'),
+    ...(commandError === undefined
+      ? []
+      : [createElement(
+        Text,
+        { key: 'commands-error', color: inkColor(TUI_RGB.error), wrap: 'truncate-end' },
+        truncateColumns(`  command catalog unavailable: ${singleLineText(commandError)}`, viewport.contentColumns),
+      )]),
+    createElement(Box, { key: 'local-help' }, row('/help', 'show this overlay')),
+    createElement(Box, { key: 'local-model' }, row('/model', 'switch the model')),
+    createElement(Box, { key: 'local-mode' }, row('/mode', 'inspect or select the agent preset (/mode [preset])')),
+    createElement(Box, { key: 'local-new' }, row('/new', 'create and switch to a fresh session (/new [preset])')),
+    createElement(Box, { key: 'local-resume' }, row('/resume', 'browse or switch root sessions (/resume [id|prefix])')),
+    createElement(Box, { key: 'local-plugin' }, row('/plugin', 'inspect the live plugin composition')),
+    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 && skillError === undefined
+      ? []
+      : [
+          createElement(Text, { key: 'skills-gap' }, ' '),
+          createElement(Text, { key: 'skills-title', bold: true, wrap: 'truncate-end' }, ' skills'),
+        ]),
+    ...(skillError === undefined
+      ? []
+      : [createElement(
+        Text,
+        { key: 'skills-error', color: inkColor(TUI_RGB.error), wrap: 'truncate-end' },
+        truncateColumns(`  skill catalog unavailable: ${singleLineText(skillError)}`, viewport.contentColumns),
+      )]),
+    ...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)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...content.slice(visibleScroll, visibleScroll + viewport.bodyRows),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    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(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(
+      Box,
+      { flexDirection: 'column' },
+      entry === undefined
+        ? createElement(Text, { dimColor: true }, '  no durable entries yet')
+        : createElement(StyledRows, { lines: visible }),
+    ),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    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). */
@@ -619,7 +1315,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' | 'mention'
+  origin: 'command' | 'skill' | 'mention' | 'path'
 }
 
 /**
@@ -638,7 +1334,13 @@ function completionCandidates(
   const local: CompletionCandidate[] = [
     { label: '/help', description: 'show commands', origin: 'command' },
     { label: '/model', description: 'switch the model', origin: 'command' },
+    { label: '/mode', description: 'select the agent preset', origin: 'command' },
+    { label: '/new', description: 'start a fresh session', origin: 'command' },
+    { label: '/resume', description: 'browse or switch sessions', origin: 'command' },
+    { label: '/plugin', description: 'inspect the plugin composition', 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' },
   ]
   // Local commands shadow registry names (e.g. the plugin-registered
@@ -665,44 +1367,55 @@ function completionCandidates(
   return all.filter(candidate => candidate.label.slice(1).startsWith(prefix)).slice(0, 10)
 }
 
-/** The completion menu snapshot the input editor publishes to the app. */
-export interface MenuState {
-  /** Whether the menu is on screen (slash or @mention). */
+/**
+ * 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
-  /** Whether the menu is driven by an @mention token. */
   mention: boolean
-  /** Highlighted candidate index (wraps by row count). */
   index: number
-  /** Rendered rows in display order. */
   rows: readonly CompletionCandidate[]
-}
-
-/**
- * The completion menu, rendered after the status line — the very last
- * element in the tree. Being last in the layout flow, opening or closing it
- * moves nothing above it: the transcript, input box, and status line all
- * stay put (the Claude-Code dropdown treatment adapted to Ink, whose
- * absolute positioning cannot place children above their parent).
- */
-function CompletionMenu({ state }: { state: MenuState }): ReactElement | undefined {
-  if (!state.active) return undefined
-  const columns = useStdout().stdout?.columns ?? 80
-  const nameWidth = Math.min(18, Math.max(0, ...state.rows.map(row => visibleColumns(row.label))) + 2)
-  const descBudget = Math.max(24, columns - nameWidth - 8)
+}): 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 contentColumns = Math.max(1, columns - 4)
+  const nameWidth = Math.min(18, Math.max(1, contentColumns - 2), Math.max(0, ...rows.map(row => visibleColumns(row.label))) + 2)
+  const descBudget = Math.max(0, contentColumns - nameWidth - 2)
+  const showFooter = terminalRows >= 12
+  const spacious = terminalRows >= 14
+  const verticalPadding = spacious ? 1 : 0
+  const limit = Math.max(1, Math.min(6, terminalRows - (showFooter ? 11 : 10) - verticalPadding * 2))
+  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', marginTop: 1, marginLeft: 2 },
-    ...(state.rows.length === 0
+    { flexDirection: 'column', marginLeft: 2, paddingY: verticalPadding },
+    ...(rows.length === 0
       ? [createElement(Text, { key: 'loading', dimColor: true }, 'searching…')]
-      : state.rows.map((candidate, index) => createElement(
+      : visible.map((candidate, at) => {
+        const absolute = first + at
+        return createElement(
         Text,
         {
           key: candidate.label,
-          color: index === state.index % state.rows.length ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+          color: absolute === selected ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+          wrap: 'truncate-end',
         },
-        `${index === state.index % state.rows.length ? '❯ ' : '  '}${padColumns(candidate.label, nameWidth)}${dim(truncateColumns(displayText(candidate.description), descBudget))}`,
-      ))),
-    createElement(Text, { dimColor: true }, dim(state.mention ? '↑↓ choose · tab insert' : '↑↓ choose · tab complete')),
+        `${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,
   )
 }
 
@@ -712,8 +1425,9 @@ function CompletionMenu({ state }: { state: MenuState }): ReactElement | undefin
  * While a modal (approval / question / model panel) owns the keys, the
  * box passes every key through untouched.
  */
-function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, notify, toggleReasoning, loadMentions, cyclePermission, onMenuState }: {
+function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openHelp, openMode, openResume, openPlugin, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle }: {
   active: boolean
+  frozen: boolean
   busy: boolean
   descriptors: readonly CommandDescriptor[]
   skills: readonly SkillRow[]
@@ -722,18 +1436,32 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
   interrupt(): boolean
   quit(): void
   openModel(): void
-  notify(text: string): void
+  openHelp(): void
+  openMode(): void
+  openResume(): void
+  openPlugin(query?: string): void
+  createSession(mode?: string): void
+  cancelSessionSwitch(): boolean
+  notify(text: string, tone?: NoticeTone): void
+  hasNotice: boolean
+  dismissNotice(): void
   toggleReasoning(): void
+  openVerbose(): void
+  clearView(): void
+  refresh(): void
   loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
   cyclePermission(): string
-  onMenuState(state: MenuState): void
+  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[]>([])
   const historyIndex = useRef<number | null>(null)
   const draft = useRef('')
   const [completionIndex, setCompletionIndex] = useState(0)
+  const [dismissedMenuValue, setDismissedMenuValue] = useState<string | undefined>(undefined)
   const candidates = completionCandidates(value, descriptors, skills)
   const slashActive = candidates.length > 0 && value.startsWith('/') && !value.includes(' ') && !value.includes('\n')
 
@@ -747,8 +1475,37 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
   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 (!mentionActive) {
+    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
     }
@@ -761,9 +1518,12 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
     return () => {
       controller.abort()
     }
-  }, [mentionActive, mentionToken?.query])
+  }, [active, mentionActive, mentionToken?.query])
 
-  const menuActive = (slashActive || mentionActive) && !busy
+  // Codex routes keys to the topmost surface first. Completion therefore
+  // remains available while a turn runs, and Esc dismisses it before the
+  // same key is allowed to interrupt the turn.
+  const menuActive = (slashActive || mentionActive || pathActive) && dismissedMenuValue !== value
   const menuRows: readonly CompletionCandidate[] = mentionActive
     ? mentionRows.map(row => ({
       label: row.label.startsWith('@')
@@ -772,31 +1532,25 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
       description: row.description,
       origin: 'mention',
     }))
-    : candidates
-
-  // The menu renders at the very bottom of the app (after the status line),
-  // where opening it moves nothing above it — the App needs this snapshot.
-  // Notify only on change; an unconditional set would re-render in a loop.
-  const menuStateKey = useRef('')
-  useEffect(() => {
-    const key = JSON.stringify([menuActive, mentionActive, completionIndex, menuRows.map(row => row.label)])
-    if (key === menuStateKey.current) return
-    menuStateKey.current = key
-    onMenuState({
-      active: menuActive,
-      mention: mentionActive,
-      index: completionIndex,
-      rows: menuRows,
-    })
-  }, [menuActive, mentionActive, completionIndex, menuRows, onMenuState])
+    : 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}`)
+      try {
+        const next = cyclePermission()
+        if (next !== '') notify(`permission → ${next}`)
+      } catch (error: unknown) {
+        notify(`permission change failed: ${error instanceof Error ? error.message : String(error)}`, 'error')
+      }
       return
     }
     // Ctrl+R toggles the thinking display (Claude-Code reasoning fold).
@@ -804,6 +1558,13 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
       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.
@@ -814,17 +1575,26 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
         setValue('')
         setCursor(0)
         setCompletionIndex(0)
+        setDismissedMenuValue(undefined)
       } else {
         quit()
       }
       return
     }
     if (key.ctrl && input === 'd') {
-      if (busy) notify('cancel the running turn before exiting (Esc or Ctrl+C)')
+      if (busy) notify('cancel the running turn before exiting (Esc or Ctrl+C)', 'warning')
       else quit()
       return
     }
     if (key.escape) {
+      if (menuActive) {
+        setDismissedMenuValue(value)
+        return
+      }
+      if (hasNotice) {
+        dismissNotice()
+        return
+      }
       if (busy) interrupt()
       return
     }
@@ -835,13 +1605,16 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
       if (key.meta || (key.ctrl && input === 'j')) {
         setValue(value.slice(0, cursor) + '\n' + value.slice(cursor))
         setCursor(cursor + 1)
+        setDismissedMenuValue(undefined)
         return
       }
       const text = value.trim()
       setValue('')
       setCursor(0)
       setCompletionIndex(0)
+      setDismissedMenuValue(undefined)
       if (text === '') return
+      dismissNotice()
       history.current = [...history.current, text]
       historyIndex.current = null
       if (text === '/quit') {
@@ -849,17 +1622,60 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
         return
       }
       if (text === '/help') {
-        notify('/model switch · /clear clear the screen · /quit exit · Ctrl+R toggle thinking · Shift+Tab cycle permission · 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()
+        dismissNotice()
+        return
+      }
+      if (text === '/export' || text.startsWith('/export ')) {
+        void exportTranscript(text.slice(8))
+        return
+      }
+      if (text === '/title' || text.startsWith('/title ')) {
+        const outcome = renameTitle(text.slice(7))
+        const tone: NoticeTone = outcome.startsWith('rename failed:')
+          ? 'error'
+          : outcome.startsWith('usage:') || outcome.includes('unavailable')
+            ? 'warning'
+            : 'info'
+        notify(outcome, tone)
         return
       }
       if (text === '/model' || text.startsWith('/model ')) {
         openModel()
         return
       }
+      if (text === '/mode' || text.startsWith('/mode ')) {
+        const mode = text.slice(5).trim()
+        if (mode === '') openMode()
+        else dispatch(text)
+        return
+      }
+      if (text === '/resume cancel') {
+        notify(cancelSessionSwitch() ? 'pending session switch cancelled' : 'no pending session switch', 'info')
+        return
+      }
+      if (text === '/resume' || text.startsWith('/resume ')) {
+        const id = text.slice(7).trim()
+        if (id === '') openResume()
+        else dispatch(text)
+        return
+      }
+      if (text === '/new' || text.startsWith('/new ')) {
+        createSession(text.slice(4).trim() || undefined)
+        return
+      }
+      if (text === '/plugin' || text.startsWith('/plugin ')) {
+        openPlugin(text.slice(7).trim())
+        return
+      }
       if (busy && !text.startsWith('/')) {
         // A running turn is steered, not blocked: the inbox delivers this
         // text at the next step boundary (Esc/Ctrl+C still cancels outright).
@@ -886,6 +1702,7 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
       historyIndex.current = next
       setValue(entries[next] ?? '')
       setCursor((entries[next] ?? '').length)
+      setDismissedMenuValue(undefined)
       return
     }
     if (key.downArrow) {
@@ -896,11 +1713,13 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
         historyIndex.current = null
         setValue(draft.current)
         setCursor(draft.current.length)
+        setDismissedMenuValue(undefined)
         return
       }
       historyIndex.current = next
       setValue(entries[next] ?? '')
       setCursor((entries[next] ?? '').length)
+      setDismissedMenuValue(undefined)
       return
     }
     if (key.tab && menuActive) {
@@ -915,6 +1734,15 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
           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) {
@@ -923,6 +1751,7 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
         }
       }
       setCompletionIndex(0)
+      setDismissedMenuValue(undefined)
       return
     }
     if (key.backspace || key.delete) {
@@ -930,6 +1759,7 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
         setValue(value.slice(0, cursor - 1) + value.slice(cursor))
         setCursor(cursor - 1)
         setCompletionIndex(0)
+        setDismissedMenuValue(undefined)
       }
       return
     }
@@ -944,6 +1774,20 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
     if (key.ctrl && input === 'u') {
       setValue('')
       setCursor(0)
+      setDismissedMenuValue(undefined)
+      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))
+      setDismissedMenuValue(undefined)
+      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') {
@@ -958,15 +1802,41 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
       setValue(value.slice(0, cursor) + input + value.slice(cursor))
       setCursor(cursor + input.length)
       setCompletionIndex(0)
+      setDismissedMenuValue(undefined)
     }
   })
 
+  // 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', marginTop: 1 },
-    busy && value === ''
-      ? createElement(Text, { dimColor: true }, dim('  enter steers the running turn · esc or ctrl+c cancels'))
-      : undefined,
+    { flexDirection: 'column' },
+    // 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 —
@@ -974,14 +1844,16 @@ function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt,
     createElement(
       Box,
       { borderStyle: 'round', borderColor: inkColor(TUI_RGB.dim), paddingX: 1 },
-      createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? '… ' : '❯ '),
-      value === ''
-        ? undefined
-        : createElement(Text, null, value.slice(0, cursor)),
-      createElement(CursorBlock, { char: value.slice(cursor, cursor + 1) === '' ? ' ' : value.slice(cursor, cursor + 1) }),
-      value === '' && !busy
-        ? createElement(Text, { dimColor: true }, 'type a message · / commands · @ mentions')
-        : createElement(Text, null, value.slice(cursor + 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,
+      ),
     ),
   )
 }
@@ -995,19 +1867,24 @@ export function App(props: AppProps): ReactElement {
   const [modelOpen, setModelOpen] = useState(false)
   const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
   const [modelError, setModelError] = useState<string | undefined>(undefined)
-  const [notices, setNotices] = useState<readonly string[]>([])
-  const notify = (text: string): void => {
-    setNotices(current => [...current, text])
-  }
+  const [modelLoadEpoch, setModelLoadEpoch] = useState(0)
+  const [notice, setNotice] = useState<{ text: string; tone: NoticeTone } | undefined>(undefined)
+  const notify = useCallback((text: string, tone: NoticeTone = 'info'): void => {
+    setNotice({ text, tone })
+  }, [])
 
   useEffect(() => {
     props.onBridgeReady({ notify })
   }, [])
   useEffect(() => {
-    if (!modelOpen || directory !== undefined) return
+    if (!modelOpen) return
     let cancelled = false
+    setDirectory(undefined)
     setModelError(undefined)
-    props.loadModels().then((loaded) => {
+    // Enter the promise chain before invoking the loader so a provider that
+    // throws synchronously becomes an in-panel error instead of escaping the
+    // React effect and tearing down Ink.
+    Promise.resolve().then(() => props.loadModels()).then((loaded) => {
       if (!cancelled) setDirectory(loaded)
     }, (error: unknown) => {
       if (!cancelled) setModelError(error instanceof Error ? error.message : String(error))
@@ -1015,101 +1892,314 @@ export function App(props: AppProps): ReactElement {
     return () => {
       cancelled = true
     }
-  }, [modelOpen])
+  }, [modelOpen, modelLoadEpoch, props.loadModels])
 
   const busy = view.busy
   const [showReasoning, setShowReasoning] = useState(false)
-  const [menuState, setMenuState] = useState<MenuState>({ active: false, mention: false, index: 0, rows: [] })
+  const [verboseOpen, setVerboseOpen] = useState(false)
+  const [helpOpen, setHelpOpen] = useState(false)
+  const [modeOpen, setModeOpen] = useState(false)
+  const [resumeOpen, setResumeOpen] = useState(false)
+  const [pluginOpen, setPluginOpen] = useState(false)
+  const [pluginQuery, setPluginQuery] = useState('')
+  const [refreshEpoch, setRefreshEpoch] = useState(0)
   const approvalSnapshot = useSyncExternalStore(props.approval.subscribe, props.approval.getSnapshot)
   const questionSnapshot = useSyncExternalStore(props.questions.subscribe, props.questions.getSnapshot)
-  // While any modal owns the keys, the prompt box passes everything through.
-  const inputActive = !modelOpen && approvalSnapshot.pending === undefined && questionSnapshot.pending === undefined
-  // Layered ownership: question > approval > model panel; each bar answers
-  // only while no higher-priority modal is on screen.
+  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 && !modeOpen && !resumeOpen && !pluginOpen && !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)
+    setModeOpen(false)
+    setResumeOpen(false)
+    setPluginOpen(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.
-  const transcriptRows: ReactElement[] = []
-  view.entries.forEach((entry, index) => {
-    if (entry.kind === 'user' && index > 0) {
-      transcriptRows.push(createElement(Text, { key: `gap-${index}` }, ' '))
+  // 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 })
+      const roomyPrompt = entry.kind === 'user' && !entry.notice
+      if (roomyPrompt) {
+        rows.push(createElement(Box, { key: `prompt-before-${index}`, paddingX: 1 }, createElement(Text, null, ' ')))
+      }
+      rows.push(createElement(Box, { key: index, paddingX: 1 }, row))
+      if (roomyPrompt) {
+        rows.push(createElement(Box, { key: `prompt-after-${index}`, paddingX: 1 }, createElement(Text, null, ' ')))
+      }
+    })
+    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)
     }
-    transcriptRows.push(createElement(EntryLine, { key: index, entry, showReasoning }))
-  })
+    appStdout.on('resize', handleResize)
+    return () => {
+      appStdout.off('resize', handleResize)
+      if (replayTimer !== undefined) clearTimeout(replayTimer)
+    }
+  }, [appStdout])
+  const terminalRows = terminalSize.rows
+  const terminalColumns = terminalSize.columns
+  const composerGutterRows = layoutGutterRows(terminalRows)
+  const dynamicRows = Math.max(1, terminalRows - 12 - composerGutterRows)
+  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 && !modeOpen && !resumeOpen && !pluginOpen && !verboseOpen && !approvalPending && !questionPending
+  const inspectorVisible = verboseOpen && !approvalPending && !questionPending
+  const modalVisible = modelOpen || helpOpen || modeOpen || resumeOpen || pluginOpen || 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 },
-      ...transcriptRows,
-      view.streamingReasoning !== ''
-        ? createElement(
-          Text,
-          { dimColor: true, italic: true },
-          showReasoning ? `  ✻ ${displayText(view.streamingReasoning)}` : '  ✻ Thinking…',
-        )
-        : undefined,
-      view.streaming !== ''
-        ? createElement(Text, null, displayText(view.streaming), busy ? createElement(Caret) : undefined)
-        : undefined,
-      busy && view.streaming === '' && view.streamingReasoning === '' ? createElement(Text, { dimColor: true }, 'Deep diving...') : undefined,
-    ),
-    createElement(TodoPanel, { todos: view.todos }),
-    createElement(QuestionBar, { store: props.questions, locked: modelOpen }),
-    createElement(ApprovalBar, { approval: props.approval, locked: modelOpen || questionPending }),
-    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, snapshot: questionSnapshot, locked: false }),
+    createElement(ApprovalBar, { snapshot: approvalSnapshot, locked: questionPending }),
+    modelOpen && !approvalPending && !questionPending
       ? createElement(ModelPanel, {
         directory,
         error: modelError,
         onSelect: (row: ModelRow) => {
-          setModelLabel(props.selectModel(row))
-          notify(`model → next step uses ${row.provider}/${row.model}`)
-          setModelOpen(false)
+          try {
+            setModelLabel(props.selectModel(row))
+            notify(`model → next step uses ${row.provider}/${row.model}`)
+            setModelOpen(false)
+          } catch (error: unknown) {
+            notify(`model switch failed: ${error instanceof Error ? error.message : String(error)}`, 'error')
+          }
+        },
+        onRetry: () => {
+          setModelLoadEpoch(epoch => epoch + 1)
         },
         onClose: () => {
           setModelOpen(false)
         },
       })
       : undefined,
+    helpOpen && !approvalPending && !questionPending
+      ? createElement(HelpPanel, {
+        descriptors,
+        skills,
+        commandError: props.commands.error,
+        skillError: props.skills.error,
+        onClose: () => {
+          setHelpOpen(false)
+        },
+      })
+      : undefined,
+    verboseOpen && !approvalPending && !questionPending
+      ? createElement(MemoVerbosePanel, {
+        entries: view.entries,
+        onClose: closeInspector,
+      })
+      : undefined,
+    modeOpen && !approvalPending && !questionPending
+      ? createElement(ModePanel, {
+        current: props.mode,
+        load: props.loadPresets,
+        select: (id: string) => {
+          void props.switchMode(id).then(label => {
+            notify(`mode → ${label}`)
+            setModeOpen(false)
+          }, (reason: unknown) => notify(`mode switch failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error'))
+        },
+        close: () => setModeOpen(false),
+      })
+      : undefined,
+    resumeOpen && !approvalPending && !questionPending
+      ? createElement(ResumePanel, {
+        currentCwd: props.workspaceRoot,
+        load: props.loadSessions,
+        readTranscript: props.loadSessionTranscript,
+        select: (row: SessionRow) => { props.switchSession(row); setResumeOpen(false) },
+        close: () => setResumeOpen(false),
+      })
+      : undefined,
+    pluginOpen && !approvalPending && !questionPending
+      ? createElement(PluginPanel, { load: props.loadPlugins, initialQuery: pluginQuery, close: () => setPluginOpen(false) })
+      : undefined,
+    notice === undefined
+      ? undefined
+      : createElement(NoticeLine, {
+        text: notice.text,
+        tone: notice.tone,
+        columns: terminalColumns,
+      }),
+    // 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)),
+      { flexDirection: 'column', marginTop: composerGutterRows },
+      createElement(Input, {
+        active: inputActive,
+        frozen: modalVisible,
+        busy,
+        descriptors,
+        skills,
+        dispatch: props.dispatch,
+        steer: props.steer,
+        interrupt: props.interrupt,
+        quit: props.quit,
+        openModel: () => {
+          setDirectory(undefined)
+          setModelError(undefined)
+          setModelOpen(true)
+        },
+        openHelp: () => {
+          setHelpOpen(true)
+        },
+        openMode: () => setModeOpen(true),
+        openResume: () => setResumeOpen(true),
+        openPlugin: (query = '') => { setPluginQuery(query); setPluginOpen(true) },
+        createSession: props.createSession,
+        cancelSessionSwitch: props.cancelSessionSwitch,
+        notify,
+        hasNotice: notice !== undefined,
+        dismissNotice: () => {
+          setNotice(undefined)
+        },
+        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,
+          mode: props.mode,
+          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, {
-      active: inputActive,
-      busy,
-      descriptors,
-      skills,
-      dispatch: props.dispatch,
-      steer: props.steer,
-      interrupt: props.interrupt,
-      quit: props.quit,
-      openModel: () => {
-        setModelOpen(true)
-      },
-      notify,
-      toggleReasoning: () => {
-        setShowReasoning(current => !current)
-      },
-      loadMentions: props.loadMentions,
-      cyclePermission: props.cyclePermission,
-      onMenuState: setMenuState,
-    }),
-    createElement(StatusLine, {
-      facts: {
-        model: modelLabel,
-        cwd: props.cwd,
-        branch: props.branch,
-        sessionId: props.sessionId,
-        plan: view.plan,
-        permission: view.permission,
-      },
-      stats: view.stats,
-      busy,
-    }),
-    createElement(CompletionMenu, { state: menuState }),
   )
 }