dsh-code 0.9.1 → 1.0.1

package/src/app.ts

@@ -14,18 +14,18 @@
  * @module @deepseek-ai/dsh-code/app
  */
 
-import {
+import { basename } from 'node:path'
+import {
   createElement, memo, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement,
 } from 'react'
-import { Box, Static, Text, useInput, useStdout, type Key } 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 { Box, Static, Text, useInput, useStdin, useStdout, type Key } from 'ink'
+import type { CommandDescriptor } from '@deepseek-ai/dsh-commands'
+import type { ImageBlock } from '@deepseek-ai/dsh-llm'
+import type { TodoItem } from '@deepseek-ai/dsh-session'
+import type { AskUserQuestionAnswerItem } from '@deepseek-ai/dsh-user-questions'
+import type { AuthorizationInteraction, AuthorizationStatus } from '@deepseek-ai/dsh-authorization'
 import {
-  brand,
   dim,
-  error as paintError,
   getPalette,
   getTheme,
   inkColor,
@@ -35,16 +35,14 @@ import {
 } from './theme.ts'
 import { ThemePanel } from './theme-panel.ts'
 import { WHALE_GLYPH, WHALE_GLYPH_COLUMNS } from './whale-glyph.ts'
-import { DSH_CODE_VERSION } from './version.ts'
+import { DSH_CODE_VERSION, dshKernelVersion } from './version.ts'
 import type { TranscriptStore } from './store.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 { type MdSegment, visibleColumns } from './render/markdown.ts'
 import {
   busyChaseFrame,
   caretVisible,
   DEEPSEEK_WAVE_TICK_MS,
-  deepseekWaveBorderColor,
   deepseekWaveColumnBg,
   deepseekWaveDuration,
   deepseekWaveSpark,
@@ -54,25 +52,23 @@ import {
   deepseekWaveWordVisible,
   effortAboveHigh,
   isOfficialDeepSeekLabel,
-  pulseFrame,
-  WAVE_BASE_DARK,
-  WAVE_BASE_LIGHT,
   type DeepseekWaveStyle,
   type DeepseekWaveTier,
 } from './render/animations.ts'
 import type { ApprovalSnapshot, ApprovalStore } from './approval.ts'
 import type { CommandsView } from './commands.ts'
 import type { ModelDirectory, ModelRow } from './models.ts'
-import type { ProviderSettingsDirectory, ProviderTargetView } from './provider-settings.ts'
+import type { ProviderConfiguration, ProviderSettingsDirectory, ProviderTargetView } from './provider-settings.ts'
 import type { QuestionSnapshot, QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
 import type { MentionCandidate } from './mentions.ts'
 import type { SubagentFeedView, SubagentRow } from './subagents.ts'
-import { AgentsPanel, EffortPanel, ModePanel, HistoryPanel, PermissionPanel, PluginPanel, ResumePanel, StatuslinePanel, SubagentPanel } from './kernel-panels.ts'
+import { AgentsPanel, EffortPanel, HistoryPanel, JobsPanel, ModePanel, PermissionPanel, PluginPanel, ResumePanel, StatuslinePanel, runClock, SubagentPanel, type JobRow } from './kernel-panels.ts'
 import type { PresetRow } from './presets.ts'
 import type { PermissionRow } from './permissions.ts'
 import type { PluginRow } from './plugin-inventory.ts'
 import {
+  beginRecall,
   recallEntries,
   recallNewer,
   recallOlder,
@@ -80,14 +76,57 @@ import {
   type RecallState,
 } from './history.ts'
 import type { SessionDirectoryOptions, SessionRow } from './session-directory.ts'
+import type { GitDiffView } from './git-workflow.ts'
+import {
+  authorizationForProvider,
+  providerAuthorizationStatus,
+  type ProviderAuthorizationDirectory,
+  type ProviderAuthorizationRow,
+} from './authorization.ts'
+import { ProviderAuthorizationLogoutPanel, ProviderAuthorizationPanel } from './authorization-panel.ts'
+import {
+  looksLikeImagePath,
+  parsePastedImagePaths,
+  type ImagePathInspection,
+} from './attachments.ts'
 
 /** Match Codex's settled-resize window before rebuilding terminal scrollback. */
 const RESIZE_REFLOW_DELAY_MS = 75
 
+/**
+ * Cap on rendered settled history, in physical rows (header and hint
+ * included). 3,000 rows sits inside Codex's 1k–10k reflow budget range:
+ * replays stay under ~200ms while roughly a hundred messages stay visible
+ * before the oldest drop out. `DSH_SETTLED_ROWS` overrides it; 0 disables
+ * the cap entirely (the historical unbounded behavior).
+ */
+const SETTLED_ROW_CAP = readSettledRowCap()
+/** Hysteresis: the cap may overflow by 25% before one trimming replay fires. */
+/** Header rows plus the trim hint, reserved out of the row cap. */
+const SETTLED_ROW_RESERVE = 12
+
+/** Read the configurable settled-history cap once per process. */
+function readSettledRowCap(): number {
+  const raw = process.env.DSH_SETTLED_ROWS
+  if (raw === undefined) return 3_000
+  const parsed = Number.parseInt(raw, 10)
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 3_000
+}
+
+/**
+ * Safety net for a bracketed paste whose end marker never arrives (terminal
+ * defect or crash mid-paste): past this window the open-paste flag resets so
+ * Enter submits again instead of inserting newlines forever.
+ */
+const PASTE_BRACKET_TIMEOUT_MS = 1_000
+
 /** 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'
+/** Ask terminals supporting DEC synchronized updates to hold the frame. */
+const SYNCHRONIZED_UPDATE_BEGIN = '\x1b[?2026h'
+/** Release the held frame after Ink has replayed the source-backed Static rows. */
+const SYNCHRONIZED_UPDATE_END = '\x1b[?2026l'
 import {
-  formatTokens,
   layoutStatusBar,
   parseStatuslineItems,
   STATUS_CYCLE_HINT,
@@ -101,6 +140,7 @@ import {
   type StatusTone,
 } from './render/status.ts'
 import { displayTail, displayText, singleLineText, truncateColumns } from './render/text.ts'
+import { normalizeKeyboardChunk, PASTE_END_MARKER, PASTE_START_MARKER, stripPasteMarkers } from './keyboard.ts'
 import {
   clampScroll,
   followInspectorCursor,
@@ -114,16 +154,69 @@ import {
 import {
   lineSegment,
   markdownLines,
-  reasoningLines,
+  settledEntryLines,
   styledLines,
   textLines,
   transcriptEntryLines,
   type LineStyle,
   type StyledLine,
 } from './render/lines.ts'
+import {
+  caretSite,
+  clampCursor,
+  composerMaxRows,
+  deleteBackward,
+  deleteForward,
+  deleteLastGrapheme,
+  deleteWordBackward,
+  deleteWordForward,
+  editorModel,
+  insertText,
+  type EditResult,
+  killToLineEnd,
+  killToLineStart,
+  lineBounds,
+  moveCursorBy,
+  moveCursorVertically,
+  moveWordLeft,
+  moveWordRight,
+  sanitizeDraftText,
+  shouldRecallNavigate,
+  splitGraphemes,
+} from './render/editor.ts'
 
-/** Visual priority for one bounded local notice. */
-export type NoticeTone = 'info' | 'warning' | 'error'
+/** Visual priority for one bounded local notice. */
+export type NoticeTone = 'info' | 'warning' | 'error'
+
+/** One source of truth for TUI-owned slash commands in completion and `/help`. */
+const LOCAL_COMMANDS = [
+  { label: '/help', description: 'show this overlay' },
+  { label: '/model', description: 'switch the model and manage providers' },
+  { label: '/effort', description: 'adjust reasoning effort for the current model' },
+  { label: '/mode', description: 'inspect or select the agent preset (/mode [preset])' },
+  { label: '/permission', description: 'inspect or select the permission preset (/permission [preset])' },
+  { label: '/new', description: 'create and switch to a fresh session (/new [preset])' },
+  { label: '/fork', description: 'fork at the latest completed turn (/fork [event-seq])' },
+  { label: '/resume', description: 'browse or switch root sessions (/resume [id|prefix])' },
+  { label: '/plugin', description: 'inspect the live plugin composition' },
+  { label: '/jobs', description: 'inspect background jobs' },
+  { label: '/statusline', description: 'customize the status line items' },
+  { label: '/theme', description: 'switch the color theme' },
+  { label: '/history', description: 'search and recall past prompts' },
+  { label: '/agents', description: 'inspect subagent sessions of this conversation' },
+  { label: '/todos', description: 'inspect the full todo list' },
+  { label: '/subagent', description: 'choose the model delegated subagents run on' },
+  { label: '/delete', description: 'delete a session and its subagent threads' },
+  { label: '/clear', description: 'clear the screen' },
+  { label: '/export', description: 'export the transcript to markdown (/export [path])' },
+  { label: '/title', description: 'rename this session (/title <text>)' },
+  { label: '/copy', description: 'copy the latest assistant response' },
+  { label: '/diff', description: 'inspect Git changes (/diff [--staged|ref])' },
+  { label: '/review', description: 'review Git changes under read-only permissions' },
+  { label: '/quit', description: 'exit' },
+] as const
+
+const LOCAL_COMMAND_NAMES = new Set(LOCAL_COMMANDS.map(command => command.label.slice(1)))
 
 /** Props the runner hands the app; callbacks stay owned by the runner. */
 export interface AppProps {
@@ -158,9 +251,9 @@ export interface AppProps {
   /** Permission preset selected for the current or pending first session. */
   permission: 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. */
-  steer(text: string): void
+  dispatch(text: string, images?: readonly ImageBlock[]): void
+  /** Submit steering: consumed at the running turn's next step boundary. */
+  steer(text: string, images?: readonly ImageBlock[]): void
   /** Interrupt the running turn (Esc); true when a turn was cancelled. */
   interrupt(): boolean
   /** Quit: unmount, flush, and request process exit. */
@@ -168,7 +261,11 @@ export interface AppProps {
   /** Load the selectable model directory (called when /model opens). */
   loadModels(): Promise<ModelDirectory>
   /** Load @mention candidates for the typed query (files + sessions). */
-  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  /** Validate draft image paths without committing attachment objects. */
+  inspectImages(paths: readonly string[]): Promise<readonly ImagePathInspection[]>
+  /** Validate, normalize and persist images immediately before submission. */
+  prepareImages(paths: readonly string[]): Promise<readonly ImageBlock[]>
   /** Apply one /model selection (with an advertised reasoning effort, when picked); returns the display label. */
   selectModel(row: ModelRow, effortId?: string): string
   /** The /subagent override label, '' when delegated agents follow the current model. */
@@ -189,6 +286,21 @@ export interface AppProps {
   unsetModelProviderCredential?(target: ProviderTargetView): Promise<void>
   /** Remove one user-owned provider profile and its page-managed credential. */
   removeModelProvider?(target: ProviderTargetView): Promise<void>
+  /** Save endpoint and explicit model capacities through the provider profile. */
+  saveModelProviderConfiguration?(target: ProviderTargetView, configuration: ProviderConfiguration): Promise<void>
+  /** Provider authorization flows and value-free stored-record facts. */
+  loadProviderAuthorizations?(): Promise<ProviderAuthorizationDirectory>
+  subscribeProviderAuthorizations?(listener: () => void): () => void
+  beginProviderAuthorization?(
+    row: ProviderAuthorizationRow,
+    method: string,
+    interaction: AuthorizationInteraction,
+    signal: AbortSignal,
+  ): Promise<AuthorizationStatus>
+  cancelProviderAuthorization?(row: ProviderAuthorizationRow): void
+  logoutProviderAuthorization?(row: ProviderAuthorizationRow): Promise<void>
+  openAuthorizationUrl?(url: string): boolean
+  copyTextValue?(text: string): Promise<void>
   /** Cycle to the next permission preset (Shift+Tab); returns the new label. */
   cyclePermission(): string
   /** Select or inspect a permission preset without requiring a pre-existing session. */
@@ -197,12 +309,20 @@ export interface AppProps {
   exportTranscript(argument: string): Promise<void>
   /** Rename the session (/title <text>); returns the outcome line for the notice. */
   renameTitle(argument: string): string
+  /** Copy the latest complete assistant response; resolves to notice text. */
+  copyLastResponse(): Promise<string>
+  /** Load a complete read-only Git diff for the file-oriented viewport. */
+  loadGitDiff(argument: string): Promise<GitDiffView>
+  /** Start a model review after applying the read-only permission preset. */
+  reviewChanges(argument: string): void
   /** Preset/session/plugin kernel operations. */
   loadPresets(): Promise<readonly PresetRow[]>
   switchMode(id: string): Promise<string>
   /** Load the switchable permission presets for the /permission panel. */
   loadPermissions(): Promise<readonly PermissionRow[]>
   createSession(mode?: string): void
+  /** Fork the active session at a completed-turn boundary. */
+  forkSession(argument: string): void
   loadSessions(options: SessionDirectoryOptions, signal?: AbortSignal): Promise<readonly SessionRow[]>
   loadSessionTranscript(id: string, signal?: AbortSignal): Promise<string>
   /** Load this session's subagent conversations (children by lineage). */
@@ -210,6 +330,8 @@ export interface AppProps {
   switchSession(row: SessionRow): void
   cancelSessionSwitch(): boolean
   loadPlugins(): readonly PluginRow[]
+  /** Caller-visible background jobs (the host jobs registry, read-only). */
+  loadJobs(): readonly JobRow[]
   /** Registers the app's notice channel with the runner (called once on mount). */
   onBridgeReady(bridge: { notify(text: string, tone?: NoticeTone): void }): void
   /** Ordered enabled status items (/statusline config); the runner owns persistence. */
@@ -259,12 +381,6 @@ function useStableInput(handler: (input: string, key: Key) => void, active: bool
   useInput(stableHandler, { isActive: active })
 }
 
-/** Single-cell stepped pulse: the web's 125ms flat-hold brightness steps over 1s. */
-function Pulse(): ReactElement {
-  const tick = useFrames(125)
-  return createElement(Text, { color: inkColor(getPalette().brandBright) }, pulseFrame(tick))
-}
-
 /**
  * The web StateDot "ongoing" chase in terminal form: three cells of the 3×3
  * ring trail clockwise around the eight outer positions (8 frames × 125ms =
@@ -288,14 +404,6 @@ 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 StateDot chase leads the plain
  * `Deep diving...` label, with the elapsed clock appended only once the turn
@@ -335,11 +443,11 @@ function StreamTail({ text, dim, maxRows, prefix = '', continuationPrefix = pref
 }): 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. Both prefixes participate because
-  // every physical row now repeats its hanging indent.
+  // The final extra column keeps a caret from wrapping onto an unbudgeted
+  // row. Both prefixes participate because every physical row repeats its
+  // hanging indent.
   const prefixColumns = Math.max(visibleColumns(prefix), visibleColumns(continuationPrefix))
-  const contentColumns = Math.max(10, columns - 3 - prefixColumns)
+  const contentColumns = Math.max(10, columns - 1 - prefixColumns)
   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
@@ -434,241 +542,84 @@ function StyledRows({ lines }: { lines: readonly StyledLine[] }): ReactElement {
   )
 }
 
-/** 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, indent = 0 }: { text: string; indent?: number }): ReactElement {
-  const columns = useStdout().stdout?.columns ?? 80
-  // Cached by (text, width): settled replies re-layout only when either moves.
-  // The indent participates in the wrap budget so padded replies never
-  // double-wrap inside the padded box.
-  const lines = useMemo(
-    () => renderMarkdown(displayText(text), Math.max(20, columns - 2 - indent)),
-    [text, columns, indent],
-  )
+/** File-oriented, color-coded unified diff viewport. */
+function DiffPanel({ view, onClose }: { view: GitDiffView; onClose(): void }): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [fileIndex, setFileIndex] = useState(0)
+  const [scroll, setScroll] = useState(0)
+  const file = view.files[fileIndex]
+  const lines = useMemo(() => {
+    if (file === undefined) return textLines('  (no changes)', viewport.contentColumns, 'dim')
+    return file.lines.flatMap(line => styledLines([
+      lineSegment(line, line.startsWith('+') && !line.startsWith('+++')
+        ? 'success'
+        : line.startsWith('-') && !line.startsWith('---')
+          ? 'error'
+          : line.startsWith('@@') || line.startsWith('diff --git') || line.startsWith('index ')
+            ? 'brand'
+            : 'dim'),
+    ], viewport.contentColumns))
+  }, [file, viewport.contentColumns])
+  const visibleScroll = clampScroll(scroll, lines.length, viewport.bodyRows)
+  useInput((input, key) => {
+    if (key.escape || input === 'q') onClose()
+    else if (key.leftArrow && view.files.length > 0) {
+      setFileIndex(current => (current + view.files.length - 1) % view.files.length)
+      setScroll(0)
+    } else if (key.rightArrow && view.files.length > 0) {
+      setFileIndex(current => (current + 1) % view.files.length)
+      setScroll(0)
+    }
+    else if (input === 'g') setScroll(0)
+    else if (input === 'G') setScroll(Math.max(0, lines.length - viewport.bodyRows))
+    else if (key.upArrow) setScroll(current => moveScroll(current, -1, lines.length, viewport.bodyRows))
+    else if (key.downArrow) setScroll(current => moveScroll(current, 1, lines.length, viewport.bodyRows))
+    else if (key.pageUp) setScroll(current => moveScroll(current, -viewport.bodyRows, lines.length, viewport.bodyRows))
+    else if (key.pageDown) setScroll(current => moveScroll(current, viewport.bodyRows, lines.length, viewport.bodyRows))
+  })
+  if (viewport.compact) return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`${view.title} · ${view.files.length} files · esc/q close`, viewport.contentColumns))
   return createElement(
     Box,
-    { flexDirection: 'column', paddingLeft: indent },
-    ...lines.map((line, index) => createElement(
-      Text,
-      { key: index },
-      line.segments.length === 0
-        ? ' '
-        : line.segments.map((segment, at) => createElement(Text, { key: at, ...segmentProps(segment.style) }, segment.text)),
-    )),
+    { flexDirection: 'column', borderStyle: 'round', borderColor: inkColor(getPalette().dim), paddingX: 1 },
+    createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`${view.title} · ${view.files.length === 0 ? 'no files' : `${fileIndex + 1}/${view.files.length} ${file?.path ?? ''}`} · rows ${lines.length === 0 ? 0 : visibleScroll + 1}-${Math.min(lines.length, visibleScroll + viewport.bodyRows)}/${lines.length}`, viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(StyledRows, { lines: lines.slice(visibleScroll, visibleScroll + viewport.bodyRows) }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('↑/↓ scroll · g/G ends · esc/q close', viewport.contentColumns)),
   )
 }
 
-/** Expanded reasoning with the same two-column content edge as the reply. */
-function ReasoningBody({ text }: { text: string }): ReactElement {
-  const columns = useStdout().stdout?.columns ?? 80
-  const lines = useMemo(() => reasoningLines(text, Math.max(10, columns - 2)), [text, columns])
-  return createElement(StyledRows, { lines })
+/** 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 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(getPalette().success) : line.mark === '-' ? inkColor(getPalette().error) : inkColor(getPalette().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, verbose }: { entry: TranscriptEntry; showReasoning: boolean; verbose: boolean }): ReactElement {
-  switch (entry.kind) {
-    case 'user':
-      // Collapsed injected context reads as a dim ↳ row; only direct human
-      // prompts get the brand ❯ (they are different surfaces, not the same).
-      return entry.notice
-        ? createElement(Text, { dimColor: true }, `⤷ ${displayText(entry.text)}`)
-        : createElement(Text, null, brand('❯ '), displayText(entry.text))
-    case 'assistant':
-      // Claude-Code-style thinking: a dim ✻ marker collapsed, the reasoning
-      // text dim-italic expanded (Ctrl+R toggles globally). The collapsed
-      // row is static — an animated counter inside the text would jitter the
-      // line width every frame. The reply body carries the same two-column
-      // gutter as the composer, so reply text aligns with the input cursor
-      // (Codex LIVE_PREFIX alignment).
-      return createElement(
-        Box,
-        { flexDirection: 'column' },
-        entry.reasoning === ''
-          ? undefined
-          : showReasoning
-            ? createElement(ReasoningBody, { text: entry.reasoning })
-            : createElement(Text, { color: inkColor(getPalette().dim) }, `✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`),
-        createElement(MarkdownBody, { text: entry.text, indent: 2 }),
-      )
-    case 'tool': {
-      // Claude-Code-style tool card: the invocation row plus a nested ⎿
-      // result line, so the summary reads under its call instead of inline.
-      const mark = entry.state === 'running'
-        ? createElement(Pulse)
-        : entry.state === 'error'
-          ? createElement(Text, { color: inkColor(getPalette().error) }, '⨯')
-          : createElement(Text, { color: inkColor(getPalette().success) }, '⏺')
-      return createElement(
-        Box,
-        { flexDirection: 'column' },
-        createElement(
-          Text,
-          { wrap: verbose ? 'truncate-end' : undefined },
-          mark,
-          ' ',
-          brand(displayText(entry.name)),
-          entry.preview === '' ? '' : ` ${dim(displayText(entry.preview))}`,
-        ),
-        entry.summary === ''
-          ? undefined
-          : createElement(
-            Text,
-            { color: entry.state === 'error' ? inkColor(getPalette().error) : inkColor(getPalette().dim), wrap: verbose ? 'truncate-end' : undefined },
-            `  ⎿ ${displayText(entry.summary)}`,
-          ),
-        verbose && entry.detail !== undefined
-          ? createElement(ToolDetailBody, { detail: entry.detail })
-          : undefined,
-      )
-    }
-    case 'command': {
-      const mark = entry.state === 'running'
-        ? createElement(Pulse)
-        : entry.state === 'error'
-          ? createElement(Text, { color: inkColor(getPalette().error) }, '⨯')
-          : createElement(Text, { color: inkColor(getPalette().success) }, '⏺')
-      return createElement(
-        Box,
-        { flexDirection: 'column' },
-        createElement(
-          Text,
-          { wrap: verbose ? 'truncate-end' : undefined },
-          mark,
-          ' ',
-          brand(displayText(`/${entry.name}`)),
-          entry.args === '' ? '' : ` ${dim(displayText(entry.args))}`,
-        ),
-        entry.summary === ''
-          ? undefined
-          : createElement(Text, { color: inkColor(getPalette().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(getPalette().warn) : inkColor(getPalette().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 'pending':
-      // Codex PendingSteer: queued prompts render as ordinary user rows; the
-      // durable user/message retires them seamlessly.
-      return createElement(
-        Text,
-        { wrap: verbose ? 'truncate-end' : undefined },
-        brand('❯ '),
-        displayText(entry.text),
-      )
-    case 'error':
-      return createElement(Text, { wrap: verbose ? 'truncate-end' : undefined }, paintError(displayText(entry.text)))
-    default:
-      return assertNever(entry, 'transcript entry kind')
-  }
-}
 
 /**
- * The whale header with a compact three-line copy lockup. The title, bilingual
- * slogan, and key hint stay centered inside the existing eight content rows,
- * preserving the Static header's ten physical rows. Short or narrow terminals
- * keep a one-line form.
+ * The whale header with a compact copy lockup. The dsh kernel version (when
+ * the host manifest resolves), the title, the bilingual slogan, and the key
+ * hint stay centered inside the existing eight content rows, preserving the
+ * Static header's ten physical rows; without a resolvable host the lockup
+ * keeps its historical three lines. Short or narrow terminals keep a one-line
+ * form without the kernel line.
  */
 function Header({ resumed }: { resumed: boolean }): ReactElement {
   const stdout = useStdout().stdout
   const rows = stdout?.rows ?? 40
   const columns = stdout?.columns ?? 80
+  const kernelLine = (() => {
+    const version = dshKernelVersion()
+    return version === undefined ? undefined : `dsh-v${version}`
+  })()
   const title = `DeepSeek Harness · v${DSH_CODE_VERSION}`
   const slogan = 'Into the Unknown  探索未至之境'
   const hint = resumed ? 'resumed · /help · Esc interrupt' : '/help · Esc interrupt · Ctrl+C quit'
-  const copyColumns = Math.max(visibleColumns(title), visibleColumns(slogan), visibleColumns(hint))
+  const copyWidths = [visibleColumns(title), visibleColumns(slogan), visibleColumns(hint)]
+  if (kernelLine !== undefined) copyWidths.push(visibleColumns(kernelLine))
+  const copyColumns = Math.max(...copyWidths)
   const compact = `${title} · ${hint}`
-  if (rows < 20 || columns < WHALE_GLYPH_COLUMNS + copyColumns + 8) {
+  if (rows < 20 || columns < WHALE_GLYPH_COLUMNS + copyColumns + 10) {
     return createElement(
       Box,
       { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1 },
@@ -679,7 +630,10 @@ function Header({ resumed }: { resumed: boolean }): ReactElement {
     Box,
     // alignSelf shrinks the border to the whale-plus-copy content instead of
     // stretching across the terminal and stranding empty space on the right.
-    { flexDirection: 'row', gap: 2, borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1, alignSelf: 'flex-start' },
+    // paddingX: 2 keeps a comfortable margin between the border and both the
+    // whale on the left and the copy on the right (each side gains one
+    // column over the previous paddingX: 1) without changing row height.
+    { flexDirection: 'row', gap: 2, borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 2, alignSelf: 'flex-start' },
     createElement(
       Box,
       { flexDirection: 'column', width: WHALE_GLYPH_COLUMNS, justifyContent: 'center' },
@@ -688,6 +642,9 @@ function Header({ resumed }: { resumed: boolean }): ReactElement {
     createElement(
       Box,
       { flexDirection: 'column', width: copyColumns, justifyContent: 'center' },
+      ...(kernelLine === undefined
+        ? []
+        : [createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, kernelLine)]),
       createElement(Text, { color: inkColor(getPalette().brandBright), bold: true, wrap: 'truncate-end' }, title),
       createElement(
         Text,
@@ -745,10 +702,74 @@ function TodoPanel({ todos }: { todos: readonly TodoItem[] }): ReactElement | un
       `todos ${completed}/${todos.length}`,
       createElement(Text, { dimColor: true }, ` · ${inProgress} active · ${pending} pending`),
       current === undefined ? '' : createElement(Text, { color: inkColor(getPalette().brandBright) }, ` · ${todoMark(current.status)} ${displayText(current.content)}`),
+      createElement(Text, { color: inkColor(getPalette().dim) }, ' · /todos'),
     ),
   )
 }
 
+/**
+ * The /todos subpage: the full todo list in one bounded, scrollable panel.
+ * The live tree's TodoPanel stays a one-row summary; this exclusive view
+ * shows EVERY item with its three-state mark inside the shared panel
+ * viewport (same contract as /help and Ctrl+O: border/title/body/footer all
+ * ride one height budget, the composer and status stay put below).
+ */
+function TodoListPanel({ todos, onClose }: { todos: readonly TodoItem[]; 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 bodyColumns = Math.max(4, viewport.contentColumns - 4)
+  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 rows = todos.length === 0
+    ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, '  no todos yet')]
+    : todos.map(todo => createElement(
+      Text,
+      { key: todo.content, dimColor: true, wrap: 'truncate-end' },
+      `  ${todoMark(todo.status)} ${truncateColumns(displayText(todo.content), bodyColumns)}`,
+    ))
+  const visibleScroll = clampScroll(scroll, rows.length, viewport.bodyRows)
+  const scrollBy = (delta: number): void => {
+    setScroll(current => moveScroll(current, delta, rows.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, rows.length - viewport.bodyRows))
+  })
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('todos · esc/q close', viewport.contentColumns))
+  }
+
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
+    createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`todos · ${completed}/${todos.length} done · ${inProgress} active · ${pending} pending · rows ${rows.length === 0 ? 0 : visibleScroll + 1}-${Math.min(rows.length, visibleScroll + viewport.bodyRows)}/${rows.length}`, viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...rows.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))),
+  )
+}
+
+const MemoTodoListPanel = memo(TodoListPanel)
+
 /**
  * Ink props for one status tone: the Codex status-line accent mapping over
  * the DeepSeek palette, all blue by design — the status bar speaks only in
@@ -808,7 +829,7 @@ function statusToneProps(tone: StatusTone): {
  * truncation degrades groups, it never wraps a row.
  *
  * The DeepSeek easter egg: when the model label *switches* to an official
- * DeepSeek route, the composer's INPUT ROW (not the frame) plays Codex's
+ * DeepSeek route, the composer's INPUT ROW (the band's middle) plays Codex's
  * effort-ignition "Wave" — a blue crest sweeping the content row column by
  * column, with the `· ✦ ✧` sparkles on the deepseek tier — and the prompt
  * marker keeps the tier accent afterwards. The border stays a constant
@@ -836,7 +857,30 @@ function StatusLine({ facts, stats, busy, columns, items }: {
   columns: number
   items: readonly string[]
 }): ReactElement {
-  const layout = layoutStatusBar(facts, stats, Math.max(8, columns - 2), { busy, items })
+  const layout = useMemo(() => layoutStatusBar(facts, stats, Math.max(8, columns - 2), {
+    busy,
+    items,
+    // Match the composer content budget: border + horizontal padding are
+    // already excluded, and layoutStatusBar shrinks this ceiling as needed.
+    contextWidth: Math.max(5, columns - 6),
+  }), [
+    facts.model,
+    facts.mode,
+    facts.cwd,
+    facts.branch,
+    facts.sessionId,
+    facts.title,
+    facts.sandbox,
+    facts.plan,
+    facts.permission,
+    facts.goal?.phase,
+    facts.goal?.rounds,
+    facts.goal?.max,
+    stats,
+    busy,
+    columns,
+    items,
+  ])
 
   const renderRow = (row: { left: readonly StatusGroup[]; right: readonly StatusSpan[]; hint: boolean }, key: string, indent = 0): ReactElement => {
     const leftParts: ReactElement[] = []
@@ -871,8 +915,8 @@ function StatusLine({ facts, stats, busy, columns, items }: {
     // of wrapping.
     return createElement(
       Box,
-      // Match the prompt text inside the bordered composer: one border column
-      // plus one padding column. The secondary row adds the model-name indent
+      // Match the prompt text inside the composer band: two padding columns.
+      // The secondary row adds the model-name indent
       // (its budget already shrinks by the same amount) so its figures align
       // under the model name rather than under the busy dot.
       { paddingLeft: 2 + indent, justifyContent: rightParts.length > 0 ? 'space-between' : undefined },
@@ -1258,11 +1302,14 @@ function QuestionBar({ store, snapshot, locked }: { store: QuestionStore; snapsh
           returnToOptions()
           return
         }
-        setCustom(current => current.slice(0, -1))
+        setCustom(current => deleteLastGrapheme(current))
         return
       }
       if (input !== '' && !key.ctrl && !key.meta) {
-        setCustom(current => current + input)
+        // Panel drafts see paste markers as literal text (Ink strips only the
+        // leading ESC); strip them so a pasted answer never persists "[200~".
+        const text = stripPasteMarkers(input)
+        if (text !== '') setCustom(current => current + text)
       }
       return
     }
@@ -1441,9 +1488,10 @@ function ModelPanel({ directory, error, current, onSelect, onProviders, onRetry,
     createElement(Text, { color: inkColor(getPalette().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 }),
     ...visibleStateRows,
-    ...visible.map((row) => {
-      const index = rows.indexOf(row)
-      const label = displayText(`${row.providerName} · ${row.modelName}`)
+    ...visible.map((row) => {
+      const index = rows.indexOf(row)
+      const capability = row.inputModalities?.includes('image') === true ? ' · image' : ''
+      const label = displayText(`${row.providerName} · ${row.modelName}${capability}`)
       return createElement(
         Text,
         {
@@ -1473,12 +1521,17 @@ function providerStateLabel(row: ProviderTargetView): string {
 }
 
 /** The provider-management stage reached from /model with `a`. */
-function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRetry, onBack }: {
-  directory: ProviderSettingsDirectory | undefined
-  error: string | undefined
-  onCredential(target: ProviderTargetView): void
-  onUnset(target: ProviderTargetView): void
-  onRemove(target: ProviderTargetView): void
+function ProviderPanel({ directory, error, authorizations, authorizationError, onCredential, onConfigure, onUnset, onRemove, onLogin, onLogout, onRetry, onBack }: {
+  directory: ProviderSettingsDirectory | undefined
+  error: string | undefined
+  authorizations: ProviderAuthorizationDirectory | undefined
+  authorizationError: string | undefined
+  onCredential(target: ProviderTargetView): void
+  onConfigure(target: ProviderTargetView): void
+  onUnset(target: ProviderTargetView): void
+  onRemove(target: ProviderTargetView): void
+  onLogin(target: ProviderTargetView, authorization: ProviderAuthorizationRow): void
+  onLogout(target: ProviderTargetView, authorization: ProviderAuthorizationRow): void
   onRetry(): void
   onBack(): void
 }): ReactElement {
@@ -1529,6 +1582,11 @@ function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRe
     }
     const target = rows[cursor]
     if (target === undefined) return
+    if (key.tab) {
+      if (target.settingsNs.length === 0) setActionError('this provider is not managed by Harness settings')
+      else onConfigure(target)
+      return
+    }
     if (input === 'd') {
       const facts = target.credential
       if (facts?.kind !== 'facts' || !facts.configured) {
@@ -1540,14 +1598,27 @@ function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRe
       }
       return
     }
-    if (input === 'x') {
+    if (input === 'x') {
       if (!target.removable) {
         setActionError('this provider profile is not removable')
       } else {
         onRemove(target)
       }
-      return
-    }
+      return
+    }
+    const authorization = authorizationForProvider(authorizations, target.provider)
+    if (input === 'l' || input === 'L') {
+      if (authorization === undefined) setActionError('this provider offers no interactive login flow')
+      else if (authorization.inFlight) setActionError('a login attempt is already running for this provider')
+      else onLogin(target, authorization)
+      return
+    }
+    if (input === 'o' || input === 'O') {
+      if (authorization === undefined || !authorization.record.configured) setActionError('this provider has no login record to remove')
+      else if (!authorization.record.writable) setActionError('this login record is read-only')
+      else onLogout(target, authorization)
+      return
+    }
     if (key.return) {
       if (target.settingsNs.length === 0) {
         setActionError('this provider is not managed by Harness settings')
@@ -1575,11 +1646,19 @@ function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRe
         ...(actionError === undefined
           ? []
           : [createElement(Text, { key: 'action-error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${actionError}`, viewport.contentColumns))]),
-        ...(directory?.failures ?? []).map((failure, index) => createElement(
+        ...(directory?.failures ?? []).map((failure, index) => createElement(
           Text,
           { key: `failure-${index}`, color: inkColor(getPalette().warn), wrap: 'truncate-end' },
-          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
-        )),
+          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
+        )),
+        ...(authorizationError === undefined
+          ? []
+          : [createElement(Text, { key: 'authorization-error', color: inkColor(getPalette().warn), wrap: 'truncate-end' }, truncateColumns(`  login status unavailable: ${singleLineText(authorizationError)}`, viewport.contentColumns))]),
+        ...(authorizations?.failures ?? []).map((failure, index) => createElement(
+          Text,
+          { key: `authorization-failure-${index}`, color: inkColor(getPalette().warn), wrap: 'truncate-end' },
+          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
+        )),
         ...(rows.length === 0
           ? [createElement(Text, { key: 'empty', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, '  no configurable providers')]
           : []),
@@ -1595,9 +1674,13 @@ function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRe
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
     ...visibleStateRows,
     ...visible.map((row) => {
-      const index = rows.indexOf(row)
-      const identity = row.displayName === row.provider ? row.provider : `${row.displayName} (${row.provider})`
-      const label = `${identity} · ${providerStateLabel(row)}${row.removable ? ' · custom' : ''}`
+      const index = rows.indexOf(row)
+      const identity = row.displayName === row.provider ? row.provider : `${row.displayName} (${row.provider})`
+      const authorization = authorizationForProvider(authorizations, row.provider)
+      const manualKeyConfigured = row.credential?.kind === 'facts' && row.credential.configured
+      const showAuthorization = !manualKeyConfigured || authorization?.record.configured === true || authorization?.inFlight === true
+      const authLabel = showAuthorization ? ` · ${providerAuthorizationStatus(authorization)}` : ''
+      const label = `${identity} · ${providerStateLabel(row)}${authLabel}${row.removable ? ' · custom' : ''}`
       return createElement(
         Text,
         { key: row.provider, color: index === cursor ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' },
@@ -1605,7 +1688,111 @@ function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRe
       )
     }),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
-    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('↑↓ move · enter add/update key · d remove key · x remove custom provider · r retry · esc back', viewport.contentColumns)),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('↑↓ move · enter key · l login · o logout · tab configure · d remove key · x remove provider · r retry · esc back', viewport.contentColumns)),
+  )
+}
+
+/** Provider configuration editor: only explicit models are written to settings. */
+function ProviderConfigurationPanel({ target, catalog, save, done, back }: {
+  target: ProviderTargetView
+  catalog: readonly ModelRow[]
+  save(target: ProviderTargetView, configuration: ProviderConfiguration): Promise<void>
+  done(): void
+  back(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [baseURL, setBaseURL] = useState(target.configuration.baseURL ?? '')
+  const [models, setModels] = useState<readonly ProviderConfiguration['models'][number][]>(target.configuration.models)
+  const [cursor, setCursor] = useState(0)
+  const [focus, setFocus] = useState<'url' | 'models' | 'context' | 'output'>('url')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const choices = useMemo(() => {
+    const known = catalog.filter(row => row.provider === target.provider)
+    const ids = new Set(known.map(row => row.model))
+    return [
+      ...known.map(row => ({ id: row.model, name: row.modelName })),
+      ...models.filter(model => !ids.has(model.id)).map(model => ({ id: model.id, name: model.name ?? model.id })),
+    ]
+  }, [catalog, models, target.provider])
+  const selected = choices[cursor]
+  const selectedModel = selected === undefined ? undefined : models.find(model => model.id === selected.id)
+  const updateSelected = (change: Partial<ProviderConfiguration['models'][number]>): void => {
+    if (selected === undefined) return
+    setModels(current => current.some(model => model.id === selected.id)
+      ? current.map(model => model.id === selected.id ? { ...model, ...change } : model)
+      : [...current, { id: selected.id, name: selected.name, ...change }])
+  }
+  const submit = (): void => {
+    if (busy) return
+    setBusy(true)
+    setError(undefined)
+    void Promise.resolve().then(() => save(target, { ...(baseURL.trim() === '' ? {} : { baseURL }), models })).then(done, (reason: unknown) => {
+      setBusy(false)
+      setError(singleLineText(reason instanceof Error ? reason.message : String(reason)))
+    })
+  }
+  useStableInput((input, key) => {
+    if (busy) return
+    if (key.escape || input === 'q') { back(); return }
+    if (key.tab) {
+      setFocus(current => current === 'url' ? 'models' : current === 'models' ? 'context' : current === 'context' ? 'output' : 'url')
+      return
+    }
+    if (key.return) { submit(); return }
+    if (focus === 'url') {
+      if (key.backspace || key.delete) setBaseURL(current => deleteLastGrapheme(current))
+      else if (!key.ctrl && !key.meta && input !== '') setBaseURL(current => current + stripPasteMarkers(input))
+      return
+    }
+    if (key.upArrow && choices.length > 0) { setCursor(current => Math.max(0, current - 1)); return }
+    if (key.downArrow && choices.length > 0) { setCursor(current => Math.min(choices.length - 1, current + 1)); return }
+    if (focus === 'models' && input === ' ') {
+      if (selectedModel === undefined) updateSelected({})
+      else setModels(current => current.filter(model => model.id !== selectedModel.id))
+      return
+    }
+    if ((focus === 'context' || focus === 'output') && selectedModel !== undefined) {
+      const field = focus === 'context' ? 'contextWindow' : 'maxTokens'
+      const current = String(selectedModel[field] ?? '')
+      if (key.backspace || key.delete) {
+        const next = current.slice(0, -1)
+        updateSelected({ [field]: next === '' ? undefined : Number(next) })
+      } else {
+        // A pasted number arrives as one multi-character chunk; accept the
+        // whole digit run instead of the single-character path only.
+        const digits = stripPasteMarkers(input)
+        if (/^[0-9]+$/u.test(digits)) {
+          const next = `${current}${digits}`
+          updateSelected({ [field]: Number(next) })
+        }
+      }
+    }
+  }, true)
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const stateRows = error === undefined ? [] : [createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${error}`, viewport.contentColumns))]
+  const rowBudget = Math.max(0, viewport.bodyRows - stateRows.length - 1)
+  const first = selectionWindow(cursor, choices.length, rowBudget)
+  const visible = choices.slice(first, first + rowBudget)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
+    createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model - ${target.displayName} configuration`, viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: focus === 'url' ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  ${focus === 'url' ? '>' : ' '} endpoint: ${baseURL === '' ? '(adapter default)' : baseURL}`, viewport.contentColumns)),
+    ...stateRows,
+    ...visible.map((choice, index) => {
+      const absolute = first + index
+      const model = models.find(item => item.id === choice.id)
+      const selectedMark = model === undefined ? '[ ]' : '[x]'
+      const context = model?.contextWindow === undefined ? '-' : String(model.contextWindow)
+      const output = model?.maxTokens === undefined ? '-' : String(model.maxTokens)
+      const active = absolute === cursor && focus !== 'url'
+      return createElement(Text, { key: choice.id, color: active ? inkColor(getPalette().brandBright) : model === undefined ? inkColor(getPalette().dim) : inkColor(getPalette().success), wrap: 'truncate-end' }, truncateColumns(`${active ? '>' : ' '} ${selectedMark} ${choice.name}  in:${context} out:${output}`, viewport.contentColumns))
+    }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('tab endpoint/models/input/output - space select - arrows model - digits set window - enter save - esc back', viewport.contentColumns)),
   )
 }
 
@@ -1657,7 +1844,7 @@ function ProviderCredentialPanel({ target, save, done, back }: {
       return
     }
     if (key.ctrl || key.meta || input.length === 0) return
-    const next = draft + input
+    const next = draft + stripPasteMarkers(input)
     if (next.length > 4096) {
       setError('API key input is too long')
       return
@@ -1780,8 +1967,8 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
   )
   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-submit', dimColor: true, wrap: 'truncate-end' }, '  enter submit · up/down history · tab complete'),
+    createElement(Text, { key: 'key-mentions', dimColor: true, wrap: 'truncate-end' }, '  @ mentions workspace 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-queue', dimColor: true, wrap: 'truncate-end' }, '  delete on the empty composer cancels the newest queued message'),
@@ -1795,25 +1982,12 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
         { key: 'commands-error', color: inkColor(getPalette().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-effort' }, row('/effort', 'adjust reasoning effort for the current model')),
-    createElement(Box, { key: 'local-mode' }, row('/mode', 'inspect or select the agent preset (/mode [preset])')),
-    createElement(Box, { key: 'local-permission' }, row('/permission', 'inspect or select the permission preset (/permission [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-statusline' }, row('/statusline', 'customize the status line items')),
-    createElement(Box, { key: 'local-theme' }, row('/theme', 'switch the color theme')),
-    createElement(Box, { key: 'local-history' }, row('/history', 'search and recall past prompts')),
-    createElement(Box, { key: 'local-agents' }, row('/agents', 'inspect subagent sessions of this conversation')),
-    createElement(Box, { key: 'local-subagent' }, row('/subagent', 'choose the model delegated subagents run on')),
-    createElement(Box, { key: 'local-delete' }, row('/delete', 'delete a session and its subagent threads')),
-    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(
+    ...LOCAL_COMMANDS.map(command => createElement(
+      Box,
+      { key: `local-${command.label.slice(1)}` },
+      row(command.label, command.description),
+    )),
+    ...descriptors.filter(descriptor => !LOCAL_COMMAND_NAMES.has(descriptor.name)).map(descriptor => createElement(
       Text,
       { key: `command-${descriptor.name}`, dimColor: true, wrap: 'truncate-end' },
       `  ${padColumns(`/${descriptor.name}`, nameWidth)}${dim(truncateColumns(displayText(descriptor.description), descBudget))}`,
@@ -1880,21 +2054,74 @@ 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 } {
+/**
+ * Keys Ink 5's parser cannot express at the useInput boundary: Home/End
+ * arrive with `input === ''` and no flag, and Backspace vs Delete both
+ * collapse onto `key.delete`. The composer patches `stdin.read` — the one
+ * choke point every Ink input chunk already passes through — and annotates
+ * the exact sequences the editor must own; Ink's own view of the same chunk
+ * is a no-op for every one of them.
+ */
+type RawKeyAnnotation =
+  | 'home'
+  | 'end'
+  | 'delete-backward'
+  | 'delete-word-backward'
+  | 'delete-forward'
+  | 'delete-word-forward'
+  | undefined
+
+/** Identify one whole-chunk key sequence Ink drops or blurs. */
+function annotateRawKey(chunk: string): RawKeyAnnotation {
+  switch (chunk) {
+    case '':
+      return 'delete-backward'
+    case '':
+    case '':
+      return 'delete-word-backward'
+    case '[3~':
+    case '[3;2~':
+      return 'delete-forward'
+    case '[3;3~':
+    case '[3;5~':
+      return 'delete-word-forward'
+    case '':
+    case '[1~':
+    case '[7~':
+    case 'OH':
+      return 'home'
+    case '':
+    case '[4~':
+    case '[8~':
+    case 'OF':
+      return 'end'
+    default:
+      return undefined
+  }
+}
+
+/**
+ * One-row editor window keeping the logical cursor visible in long drafts.
+ * The caret and its surroundings slice at grapheme boundaries: splitting a
+ * star-plane surrogate pair would render an isolated half under the block
+ * caret with a width the terminal never draws.
+ */
+export 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 site = clampCursor(value, cursor)
+  const caretSpan = splitGraphemes(value).find(span => span.start === site)
+  const caret = caretSpan === undefined ? ' ' : normalize(caretSpan.text)
+  const rest = value.slice(caretSpan === undefined ? site : caretSpan.end)
   const remaining = Math.max(0, width - visibleColumns(caret))
-  const afterBudget = Math.min(Math.floor(remaining / 3), visibleColumns(normalize(value.slice(cursor + 1))))
+  const afterBudget = Math.min(Math.floor(remaining / 3), visibleColumns(normalize(rest)))
   const beforeBudget = Math.max(0, remaining - afterBudget)
   const before = beforeBudget === 0
     ? ''
-    : displayTail(normalize(value.slice(0, cursor)), beforeBudget, 1).text
+    : displayTail(normalize(value.slice(0, site)), beforeBudget, 1).text
   const after = afterBudget === 0
     ? ''
-    : truncateColumns(normalize(value.slice(cursor + 1)), afterBudget)
+    : truncateColumns(normalize(rest), afterBudget)
   return { before, caret, after }
 }
 
@@ -2112,7 +2339,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' | 'path'
+  origin: 'command' | 'skill' | 'mention'
 }
 
 /**
@@ -2133,32 +2360,12 @@ export function completionCandidates(
 ): readonly CompletionCandidate[] {
   if (!value.startsWith('/')) return []
   const prefix = value.slice(1).split(' ')[0] ?? ''
-  const local: CompletionCandidate[] = [
-    { label: '/help', description: 'show commands', origin: 'command' },
-    { label: '/model', description: 'switch the model', origin: 'command' },
-    { label: '/effort', description: 'adjust reasoning effort for the current model', origin: 'command' },
-    { label: '/mode', description: 'select the agent preset', origin: 'command' },
-    { label: '/permission', description: 'inspect or select the permission 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: '/statusline', description: 'customize the status line', origin: 'command' },
-    { label: '/theme', description: 'switch the color theme', origin: 'command' },
-    { label: '/history', description: 'search and recall past prompts', origin: 'command' },
-    { label: '/agents', description: 'inspect subagent sessions of this conversation', origin: 'command' },
-    { label: '/subagent', description: 'choose the model delegated subagents run on', origin: 'command' },
-    { label: '/delete', description: 'delete a session and its subagent threads', origin: 'command' },
-    { label: '/clear', description: 'clear the screen', origin: 'command' },
-    { label: '/export', description: 'export the transcript to markdown', origin: 'command' },
-    { label: '/title', description: 'rename this session', origin: 'command' },
-    { label: '/quit', description: 'exit', origin: 'command' },
-  ]
+  const local: CompletionCandidate[] = LOCAL_COMMANDS.map(command => ({ ...command, origin: 'command' }))
   // Local commands shadow registry names (e.g. the TUI-local /permission works
   // before any session exists, while the registry child needs one), so
   // collisions cannot render two rows with the same key.
-  const localNames = new Set(local.map(candidate => candidate.label.slice(1)))
-  const registry = descriptors
-    .filter(descriptor => !localNames.has(descriptor.name))
+  const registry = descriptors
+    .filter(descriptor => !LOCAL_COMMAND_NAMES.has(descriptor.name))
     .map((descriptor): CompletionCandidate => ({
       label: `/${descriptor.name}`,
       description: descriptor.description,
@@ -2189,7 +2396,7 @@ export function completionCandidates(
 
 /**
  * The completion menu, rendered inside the composer's subtree directly above
- * the framed box — attached the way Claude-Code anchors its dropdown. Opening
+ * the composer band — 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
@@ -2209,7 +2416,11 @@ function CompletionMenu({ active, mention, index, rows }: {
   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)
+  // File paths are the decision-making data in an @ menu. Give mentions the
+  // full available line and sacrifice their repetitive kind label first.
+  const nameWidth = mention
+    ? Math.max(1, contentColumns - 2)
+    : 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
@@ -2244,20 +2455,25 @@ function CompletionMenu({ active, mention, index, rows }: {
   )
 }
 
-/**
- * The prompt box: TUI-local slash commands handled locally, other lines
+interface DraftImage extends ImagePathInspection {
+  /** Visible draft token; deleting it also detaches the hidden path. */
+  readonly marker: string
+}
+
+/**
+ * The prompt box: TUI-local slash commands handled locally, other lines
  * dispatched; input editing keeps a cursor with history and completion.
  * While a modal (approval / question / model panel) owns the keys, the
  * box passes every key through untouched.
  */
-function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openPermission, openResume, openPlugin, openStatusline, openTheme, openHistory, openAgents, openSubagent, openDelete, deleteConfirm, confirmDelete, cancelDelete, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTier, waveStyle }: {
+function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openPermission, openResume, openPlugin, openJobs, openStatusline, openTheme, openHistory, openAgents, openSubagent, openTodos, openDelete, openDiff, reviewChanges, deleteConfirm, confirmDelete, cancelDelete, createSession, forkSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, inspectImages, prepareImages, cyclePermission, exportTranscript, renameTitle, copyLastResponse, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTier, waveStyle, maxRows, onEditorRows }: {
   active: boolean
   frozen: boolean
   busy: boolean
   descriptors: readonly CommandDescriptor[]
   skills: readonly SkillRow[]
-  dispatch(text: string): void
-  steer(text: string): void
+  dispatch(text: string, images?: readonly ImageBlock[]): void
+  steer(text: string, images?: readonly ImageBlock[]): void
   interrupt(): boolean
   quit(): void
   openModel(): void
@@ -2267,6 +2483,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   openPermission(): void
   openResume(): void
   openPlugin(query?: string): void
+  openJobs(): void
   openStatusline(): void
   openTheme(): void
   openHistory(): void
@@ -2274,8 +2491,12 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   openAgents(): void
   /** Open the /subagent model panel. */
   openSubagent(): void
+  /** Open the /todos subpage (full todo list in one bounded panel). */
+  openTodos(): void
   /** Open the /resume picker in delete mode, optionally pre-armed on one id. */
   openDelete(id?: string): void
+  openDiff(argument: string): void
+  reviewChanges(argument: string): void
   /** The row id awaiting y/n in this box, when a deletion is pending. */
   deleteConfirm?: string
   /** Confirm the pending deletion (y in the box). */
@@ -2283,6 +2504,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   /** Cancel the pending deletion (any other key in the box). */
   cancelDelete(): void
   createSession(mode?: string): void
+  forkSession(argument: string): void
   cancelSessionSwitch(): boolean
   notify(text: string, tone?: NoticeTone): void
   hasNotice: boolean
@@ -2291,10 +2513,13 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   openVerbose(): void
   clearView(): void
   refresh(): void
-  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  inspectImages(paths: readonly string[]): Promise<readonly ImagePathInspection[]>
+  prepareImages(paths: readonly string[]): Promise<readonly ImageBlock[]>
   cyclePermission(): string
   exportTranscript(argument: string): Promise<void>
   renameTitle(argument: string): string
+  copyLastResponse(): Promise<string>
   /** Newest-first recall space (persistent + in-session, deduped). */
   recallSpace: readonly string[]
   /** Record one in-session submission (deduped, local only). */
@@ -2317,29 +2542,91 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   waveTier: DeepseekWaveTier | null
   /** The ignition style running, if any: Wave / Aurora / Pulse. */
   waveStyle: DeepseekWaveStyle | null
+  /** Maximum physical editor rows the composer may occupy (see composerMaxRows). */
+  maxRows: number
+  /** Reports the editor's current physical row count so the live budget stays exact. */
+  onEditorRows(rows: number): void
 }): ReactElement {
   const columns = useStdout().stdout?.columns ?? 80
-  const [value, setValue] = useState('')
-  const [cursor, setCursor] = useState(0)
+  const stdin = useStdin().stdin
+  const [value, setValue] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const valueRef = useRef(value)
+  const cursorRef = useRef(cursor)
+  valueRef.current = value
+  cursorRef.current = cursor
+  const [draftImages, setDraftImages] = useState<readonly DraftImage[]>([])
+  const draftImagesRef = useRef(draftImages)
+  draftImagesRef.current = draftImages
+  const [preparingImages, setPreparingImages] = useState(false)
+  // Codex textarea editing state: a single-entry kill buffer, the vertical
+  // move's preferred display column, the editor's scroll window, and the
+  // bracketed-paste marker state. All of it is editor-local; nothing here
+  // ever reaches the App.
+  const killRef = useRef('')
+  const preferredColumnRef = useRef<number | null>(null)
+  const editorScrollRef = useRef(0)
+  const pasteBracketRef = useRef(false)
+  /** Cancels the pending lost-paste safety timer (undefined when disarmed). */
+  const pasteBracketCancelRef = useRef<(() => void) | undefined>(undefined)
+  /** Annotation of the stdin chunk Ink is about to deliver to useInput. */
+  const rawAnnotation = useRef<RawKeyAnnotation>(undefined)
   // Codex shell-style recall: the navigation cursor, the saved draft restored
   // on Down past the newest entry, and the boundary-gate anchor.
-  const recall = useRef<RecallState>({ entries: [], index: null, savedDraft: '', lastRecalled: null })
+  const recall = useRef<RecallState>(beginRecall([], ''))
 
-  // A /history panel acceptance lands as a fill: place the text at the end of
-  // the composer and resume recall from that entry.
-  useEffect(() => {
-    if (historyFill === undefined) return
-    setValue(historyFill.text)
-    setCursor(historyFill.text.length)
+  // A /history panel acceptance lands as a fill: place the sanitized text at
+  // the end of the composer and resume recall from that entry.
+  useEffect(() => {
+    if (historyFill === undefined) return
+    const safe = sanitizeDraftText(historyFill.text)
+    draftImagesRef.current = []
+    setDraftImages([])
+    setValue(safe)
+    setCursor(safe.length)
+    preferredColumnRef.current = null
     setDismissedMenuValue(undefined)
     recall.current = {
       entries: recallSpace,
       index: historyFill.index,
-      savedDraft: historyFill.text,
-      lastRecalled: historyFill.text,
+      savedDraft: safe,
+      lastRecalled: safe,
     }
     historyConsumed()
-  }, [historyFill, recallSpace, historyConsumed])
+  }, [historyFill, recallSpace, historyConsumed])
+
+  useEffect(() => {
+    setDraftImages((current) => {
+      const next = current.filter(image => value.includes(image.marker))
+      draftImagesRef.current = next
+      return next.length === current.length ? current : next
+    })
+  }, [value])
+
+  // Home/End and the Backspace-vs-Delete family never survive Ink's parser
+  // as distinct keys, and kitty CSI-u forms parse as unnamed junk Ink would
+  // insert as draft text.
+  // Patch stdin.read — the single choke point Ink's input loop pulls every
+  // chunk through — to first rewrite decodable CSI-u sequences to their
+  // legacy bytes, then annotate the resulting chunk before Ink emits the
+  // matching 'input' event, so the useInput handler below reads the
+  // annotation for exactly the chunk it is processing. Ink receives and
+  // parses the normalized string; every other byte passes through untouched.
+  useEffect(() => {
+    if (stdin === undefined) return
+    const originalRead = stdin.read.bind(stdin)
+    const patchedRead = function patchedRead(this: typeof stdin, ...args: Parameters<typeof originalRead>) {
+      const chunk = originalRead(...args)
+      if (chunk === null) return chunk
+      const normalized = normalizeKeyboardChunk(typeof chunk === 'string' ? chunk : String(chunk))
+      rawAnnotation.current = annotateRawKey(normalized)
+      return normalized
+    } as typeof stdin.read
+    stdin.read = patchedRead
+    return () => {
+      stdin.read = originalRead as typeof stdin.read
+    }
+  }, [stdin])
 
   // Keep the navigation's recall space fresh while browsing state survives
   // (new local submissions extend the space; the index stays valid unless
@@ -2362,37 +2649,67 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   const mentionToken = tokenMatch === null
     ? undefined
     : { start: beforeCursor.length - lastLine.length + (tokenMatch.index ?? 0) + (tokenMatch[1]?.length ?? 0), query: tokenMatch[2] ?? '' }
-  const mentionActive = mentionToken !== undefined
-  const [mentionRows, setMentionRows] = useState<readonly MentionCandidate[]>([])
-
-  // Bare path token: the last whitespace-delimited run on the cursor's line
-  // when it already looks like a path (Claude-Code bare Tab completion). A
-  // LEADING '/' is the command namespace, never a path — without this guard
-  // typing the bare '/' hijacked the menu into the workspace file scan and
-  // the slash-command candidates never appeared.
-  const bareTokenMatch = /([^\s]+)$/u.exec(lastLine)
-  const bareToken = bareTokenMatch === null ? '' : bareTokenMatch[1] ?? ''
-  const pathActive = !mentionActive
-    && !bareToken.startsWith('/')
-    && (bareToken.includes('/') || bareToken === '.' || bareToken === '..')
-  const pathTokenStart = beforeCursor.length - bareToken.length
-  const [pathRows, setPathRows] = useState<readonly MentionCandidate[]>([])
-
-  useEffect(() => {
-    if (!active || !pathActive) {
-      setPathRows([])
-      return
-    }
-    const controller = new AbortController()
-    setPathRows([])
-    loadMentions(bareToken, controller.signal).then(
-      rows => setPathRows(rows.filter(row => row.kind !== 'session')),
-      () => {},
-    )
-    return () => {
-      controller.abort()
-    }
-  }, [active, pathActive, bareToken])
+  const mentionActive = mentionToken !== undefined
+  const [mentionRows, setMentionRows] = useState<readonly MentionCandidate[]>([])
+
+  const sameImagePath = (left: string, right: string): boolean => (
+    process.platform === 'win32' ? left.toLowerCase() === right.toLowerCase() : left === right
+  )
+
+  const uniqueImageMarker = (name: string, source: 'mention' | 'drop', reserved: readonly string[] = []): string => {
+    const safeName = singleLineText(sanitizeDraftText(name))
+    const base = source === 'mention' ? `@${safeName}` : `[image: ${safeName}]`
+    let marker = base
+    let suffix = 2
+    while (valueRef.current.includes(marker) || draftImagesRef.current.some(image => image.marker === marker) || reserved.includes(marker)) {
+      marker = source === 'mention' ? `@${safeName} (${suffix})` : `[image: ${safeName} ${suffix}]`
+      suffix += 1
+    }
+    return marker
+  }
+
+  const registerDraftImage = (inspection: ImagePathInspection, marker: string): boolean => {
+    if (draftImagesRef.current.some(image => sameImagePath(image.path, inspection.path))) {
+      notify(`${inspection.name} is already attached`, 'warning')
+      return false
+    }
+    const next = [...draftImagesRef.current, { ...inspection, marker }]
+    draftImagesRef.current = next
+    setDraftImages(next)
+    return true
+  }
+
+  const insertDroppedImages = (paths: readonly string[]): void => {
+    notify(`checking ${paths.length} image${paths.length === 1 ? '' : 's'}…`)
+    void inspectImages(paths).then((inspected) => {
+      const additions: DraftImage[] = []
+      const markers: string[] = []
+      for (const inspection of inspected) {
+        if ([...draftImagesRef.current, ...additions].some(image => sameImagePath(image.path, inspection.path))) continue
+        const marker = uniqueImageMarker(inspection.name, 'drop', markers)
+        additions.push({ ...inspection, marker })
+        markers.push(marker)
+      }
+      if (additions.length === 0) {
+        notify('those images are already attached', 'warning')
+        return
+      }
+      const at = cursorRef.current
+      const current = valueRef.current
+      const insertion = `${at > 0 && !/\s$/u.test(current.slice(0, at)) ? ' ' : ''}${markers.join(' ')}${current.slice(at) === '' ? '' : ' '}`
+      const next = current.slice(0, at) + insertion + current.slice(at)
+      valueRef.current = next
+      cursorRef.current = at + insertion.length
+      setValue(next)
+      setCursor(cursorRef.current)
+      const nextImages = [...draftImagesRef.current, ...additions]
+      draftImagesRef.current = nextImages
+      setDraftImages(nextImages)
+      notify(`${additions.length} image${additions.length === 1 ? '' : 's'} ready for the next message`)
+    }, (reason: unknown) => {
+      notify(`image attachment failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+    })
+  }
 
   useEffect(() => {
     if (!active || !mentionActive) {
@@ -2413,7 +2730,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   // 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 menuActive = (slashActive || mentionActive) && dismissedMenuValue !== value
   const menuRows: readonly CompletionCandidate[] = mentionActive
     ? mentionRows.map(row => ({
       label: row.label.startsWith('@')
@@ -2422,20 +2739,49 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       description: row.description,
       origin: 'mention',
     }))
-    : pathActive
-      ? pathRows.map(row => ({
-        label: row.label,
-        description: row.description,
-        origin: 'path',
-      }))
-      : candidates
+    : candidates
 
   /** Accept the highlighted completion-menu candidate into the draft. */
   const acceptMenuCandidate = (): void => {
     if (mentionActive && mentionToken !== undefined) {
-      const row = mentionRows[completionIndex % mentionRows.length]
-      if (row !== undefined) {
-        // Session rows carry the canonical @[label](dsh-session:…) token;
+      const row = mentionRows[completionIndex % mentionRows.length]
+      if (row !== undefined) {
+        if (row.kind === 'file' && row.path !== undefined && looksLikeImagePath(row.path)) {
+          const tokenText = value.slice(mentionToken.start, cursor)
+          const start = mentionToken.start
+          notify(`checking image ${basename(row.path)}…`)
+          void inspectImages([row.path]).then((inspected) => {
+            const inspection = inspected[0]
+            if (inspection === undefined) return
+            const current = valueRef.current
+            if (current.slice(start, start + tokenText.length) !== tokenText) return
+            if (draftImagesRef.current.some(image => sameImagePath(image.path, inspection.path))) {
+              const next = current.slice(0, start) + current.slice(start + tokenText.length)
+              valueRef.current = next
+              cursorRef.current = start
+              setValue(next)
+              setCursor(start)
+              setDismissedMenuValue(next)
+              notify(`${inspection.name} is already attached`, 'warning')
+              return
+            }
+            const marker = uniqueImageMarker(inspection.name, 'mention')
+            const next = current.slice(0, start) + marker + current.slice(start + tokenText.length)
+            valueRef.current = next
+            cursorRef.current = start + marker.length
+            setValue(next)
+            setCursor(cursorRef.current)
+            setDismissedMenuValue(next)
+            registerDraftImage(inspection, marker)
+            notify(`${inspection.name} ready for the next message`)
+          }, (reason: unknown) => {
+            notify(`image attachment failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+          })
+          setCompletionIndex(0)
+          setDismissedMenuValue(undefined)
+          return
+        }
+        // Session rows carry the canonical @[label](dsh-session:…) token;
         // file rows insert `@path` (directories keep their trailing slash).
         const insertion = row.label.startsWith('@')
           ? row.label
@@ -2443,15 +2789,6 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         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) {
@@ -2463,9 +2800,27 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     setDismissedMenuValue(undefined)
   }
 
-  useInput((input, key) => {
-    // Modal ownership: approval/question/model dialogs consume all keys.
-    if (!active) return
+  /** Apply one editor edit: draft, cursor, kill buffer, menu reset. */
+  const applyEdit = (edit: EditResult): void => {
+    if (edit.killed !== undefined && edit.killed !== '') killRef.current = edit.killed
+    setValue(edit.value)
+    setCursor(edit.cursor)
+    preferredColumnRef.current = null
+    setCompletionIndex(0)
+    setDismissedMenuValue(undefined)
+  }
+
+  /** Move the cursor without editing; horizontal moves clear the column preference. */
+  const moveCursorTo = (next: number): void => {
+    if (next === cursor) return
+    setCursor(next)
+    preferredColumnRef.current = null
+  }
+
+  useInput((input, key) => {
+    // Modal ownership: approval/question/model dialogs consume all keys.
+    if (!active) return
+    if (preparingImages) return
     // Deletion confirm owns the box: y proceeds, anything else cancels.
     // Typed in the INPUT BOX (codex delete-confirm): the keystroke is echoed
     // as the box's own prompt, not an invisible panel keypress.
@@ -2505,9 +2860,11 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     if (key.ctrl && input === 'c') {
       if (busy) {
         interrupt()
-      } else if (value !== '') {
-        setValue('')
-        setCursor(0)
+      } else if (value !== '') {
+        setValue('')
+        setCursor(0)
+        draftImagesRef.current = []
+        setDraftImages([])
         setCompletionIndex(0)
         setDismissedMenuValue(undefined)
       } else {
@@ -2516,6 +2873,12 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       return
     }
     if (key.ctrl && input === 'd') {
+      // Codex: Ctrl+D deletes forward while a draft exists; the app-level
+      // exit only fires from an empty composer.
+      if (value !== '') {
+        applyEdit(deleteForward(value, cursor))
+        return
+      }
       if (busy) notify('cancel the running turn before exiting (Esc or Ctrl+C)', 'warning')
       else quit()
       return
@@ -2539,13 +2902,9 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       return
     }
     if (key.return) {
-      // Multi-line editing: most terminals send the same byte for
-      // shift+enter as enter, so newline insertion rides alt/meta+enter
-      // and ctrl+j (the two distinguishable bindings); a bare return submits.
-      if (key.meta || (key.ctrl && input === 'j')) {
-        setValue(value.slice(0, cursor) + '\n' + value.slice(cursor))
-        setCursor(cursor + 1)
-        setDismissedMenuValue(undefined)
+      // A newline inside an open bracketed paste inserts; it never submits.
+      if (pasteBracketRef.current) {
+        applyEdit(insertText(value, cursor, '\n'))
         return
       }
       // Enter on an open completion menu accepts the highlighted candidate
@@ -2554,14 +2913,42 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       // exactly, in which case Enter submits it (typing a full "/effort" and
       // pressing return must run the command, not re-accept its own text).
       if (menuActive) {
-        const exactSlash = !mentionActive && !pathActive && candidates.some(candidate => candidate.label === value)
+        const exactSlash = !mentionActive && candidates.some(candidate => candidate.label === value)
         if (!exactSlash) {
           acceptMenuCandidate()
           return
         }
-      }
-      const text = value.trim()
-      setValue('')
+      }
+      const text = value.trim()
+      if (draftImagesRef.current.length > 0) {
+        setPreparingImages(true)
+        notify(`processing ${draftImagesRef.current.length} image${draftImagesRef.current.length === 1 ? '' : 's'}…`)
+        const snapshot = draftImagesRef.current
+        void prepareImages(snapshot.map(image => image.path)).then((images) => {
+          setPreparingImages(false)
+          valueRef.current = ''
+          cursorRef.current = 0
+          setValue('')
+          setCursor(0)
+          draftImagesRef.current = []
+          setDraftImages([])
+          setCompletionIndex(0)
+          setDismissedMenuValue(undefined)
+          dismissNotice()
+          if (text !== '') {
+            recordLocal(text)
+            recordHistory(text)
+          }
+          recall.current = beginRecall(recallSpace, '')
+          if (busy) steer(text, images)
+          else dispatch(text, images)
+        }, (reason: unknown) => {
+          setPreparingImages(false)
+          notify(`image submission failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+        })
+        return
+      }
+      setValue('')
       setCursor(0)
       setCompletionIndex(0)
       setDismissedMenuValue(undefined)
@@ -2574,7 +2961,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         recordLocal(text)
         recordHistory(text)
       }
-      recall.current = { entries: recallSpace, index: null, savedDraft: '', lastRecalled: null }
+      recall.current = beginRecall(recallSpace, '')
       if (text === '/quit') {
         quit()
         return
@@ -2606,6 +2993,21 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         notify(outcome, tone)
         return
       }
+      if (text === '/copy') {
+        void copyLastResponse().then(
+          outcome => notify(outcome),
+          error => notify(`copy failed: ${error instanceof Error ? error.message : String(error)}`, 'error'),
+        )
+        return
+      }
+      if (text === '/diff' || text.startsWith('/diff ')) {
+        openDiff(text.slice(5))
+        return
+      }
+      if (text === '/review' || text.startsWith('/review ')) {
+        reviewChanges(text.slice(7))
+        return
+      }
       if (text === '/model' || text.startsWith('/model ')) {
         openModel()
         return
@@ -2642,10 +3044,18 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         createSession(text.slice(4).trim() || undefined)
         return
       }
+      if (text === '/fork' || text.startsWith('/fork ')) {
+        forkSession(text.slice(5))
+        return
+      }
       if (text === '/plugin' || text.startsWith('/plugin ')) {
         openPlugin(text.slice(7).trim())
         return
       }
+      if (text === '/jobs' || text.startsWith('/jobs ')) {
+        openJobs()
+        return
+      }
       if (text === '/statusline') {
         openStatusline()
         return
@@ -2662,6 +3072,10 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         openAgents()
         return
       }
+      if (text === '/todos') {
+        openTodos()
+        return
+      }
       if (text === '/subagent') {
         openSubagent()
         return
@@ -2680,6 +3094,9 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       dispatch(text)
       return
     }
+    // Ink exposes Ctrl+J as a bare LF and Alt+Enter as a bare CR after
+    // stripping the leading escape. Neither is a multiline shortcut.
+    if (input === '\n' || input === '\r') return
     if (menuActive && key.upArrow) {
       setCompletionIndex(index => (index + menuRows.length - 1) % menuRows.length)
       return
@@ -2688,29 +3105,66 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       setCompletionIndex(index => (index + 1) % menuRows.length)
       return
     }
-    if (key.upArrow) {
-      // Claude-Code shell recall: Up always walks the global history (the
-      // current draft is saved for Down-past-newest restore); the boundary
-      // gate from Codex only blocks interior multiline movement, which the
-      // user experience here deliberately skips.
-      if (recall.current.entries.length === 0) return
-      const step = recallOlder(recall.current, value)
-      recall.current = step.state
-      if (step.entry !== undefined) {
-        setValue(step.entry)
-        setCursor(step.entry.length)
-        setDismissedMenuValue(undefined)
+    // Raw-annotated keys (Home/End, the delete family): Ink's own flags for
+    // the same chunk are blank or blurred, so the read-patch annotation is
+    // authoritative whenever it is set.
+    const rawKey = rawAnnotation.current
+    if (rawKey !== undefined) {
+      if (rawKey === 'home') moveCursorTo(lineBounds(value, cursor).start)
+      else if (rawKey === 'end') moveCursorTo(lineBounds(value, cursor).end)
+      else if (rawKey === 'delete-backward') applyEdit(deleteBackward(value, cursor))
+      else if (rawKey === 'delete-word-backward') applyEdit(deleteWordBackward(value, cursor))
+      else if (rawKey === 'delete-forward') applyEdit(deleteForward(value, cursor))
+      else applyEdit(deleteWordForward(value, cursor))
+      return
+    }
+    if (key.upArrow || key.downArrow) {
+      // Codex boundary gate: shell recall runs from an empty draft, or from
+      // a boundary of a draft that still matches the last recalled entry;
+      // every interior Up/Down moves the caret across the multiline draft.
+      if (recall.current.entries.length > 0 && shouldRecallNavigate(value, cursor, recall.current.lastRecalled)) {
+        const step = key.upArrow ? recallOlder(recall.current, value) : recallNewer(recall.current)
+        recall.current = step.state
+        if (step.entry !== undefined) {
+          const safe = sanitizeDraftText(step.entry)
+          setValue(safe)
+          setCursor(safe.length)
+          preferredColumnRef.current = null
+          setDismissedMenuValue(undefined)
+        }
+        return
+      }
+      const model = editorModel(value, Math.max(1, columns - 6))
+      const preferred = preferredColumnRef.current ?? caretSite(model, cursor).column
+      const next = moveCursorVertically(model, cursor, preferred, key.upArrow ? -1 : 1)
+      if (next !== cursor) {
+        setCursor(next)
+        preferredColumnRef.current = preferred
       }
       return
     }
-    if (key.downArrow) {
-      if (recall.current.entries.length === 0) return
-      const step = recallNewer(recall.current)
-      recall.current = step.state
-      if (step.entry !== undefined) {
-        setValue(step.entry)
-        setCursor(step.entry.length)
-        setDismissedMenuValue(undefined)
+    // Ctrl+P / Ctrl+N share the Up/Down contract (Codex binds them to
+    // move_up/move_down, so the history gate applies first).
+    if (key.ctrl && (input === 'p' || input === 'n')) {
+      const up = input === 'p'
+      if (recall.current.entries.length > 0 && shouldRecallNavigate(value, cursor, recall.current.lastRecalled)) {
+        const step = up ? recallOlder(recall.current, value) : recallNewer(recall.current)
+        recall.current = step.state
+        if (step.entry !== undefined) {
+          const safe = sanitizeDraftText(step.entry)
+          setValue(safe)
+          setCursor(safe.length)
+          preferredColumnRef.current = null
+          setDismissedMenuValue(undefined)
+        }
+        return
+      }
+      const model = editorModel(value, Math.max(1, columns - 6))
+      const preferred = preferredColumnRef.current ?? caretSite(model, cursor).column
+      const next = moveCursorVertically(model, cursor, preferred, up ? -1 : 1)
+      if (next !== cursor) {
+        setCursor(next)
+        preferredColumnRef.current = preferred
       }
       return
     }
@@ -2718,33 +3172,68 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       acceptMenuCandidate()
       return
     }
+    // Codex editor keymap: Alt/Ctrl+arrows and Alt+B/F move by word pieces;
+    // plain arrows and Ctrl+B/F move by grapheme.
+    if (key.leftArrow) {
+      moveCursorTo(key.meta || key.ctrl ? moveWordLeft(value, cursor) : moveCursorBy(value, cursor, -1))
+      return
+    }
+    if (key.rightArrow) {
+      moveCursorTo(key.meta || key.ctrl ? moveWordRight(value, cursor) : moveCursorBy(value, cursor, 1))
+      return
+    }
+    if (key.meta && input === 'b') {
+      moveCursorTo(moveWordLeft(value, cursor))
+      return
+    }
+    if (key.meta && input === 'f') {
+      moveCursorTo(moveWordRight(value, cursor))
+      return
+    }
+    if (key.ctrl && input === 'b') {
+      moveCursorTo(moveCursorBy(value, cursor, -1))
+      return
+    }
+    if (key.ctrl && input === 'f') {
+      moveCursorTo(moveCursorBy(value, cursor, 1))
+      return
+    }
+    // Ctrl+W and Alt+Backspace delete the previous word piece into the kill
+    // buffer; Alt+D and the raw Ctrl/Alt+Delete variants kill forward.
+    if (key.ctrl && input === 'w') {
+      applyEdit(deleteWordBackward(value, cursor))
+      return
+    }
+    if (key.meta && input === 'd') {
+      applyEdit(deleteWordForward(value, cursor))
+      return
+    }
+    // Un-annotated backspace/delete (Ink maps both  and  here):
+    // delete the grapheme before the cursor.
     if (key.backspace || key.delete) {
-      if (cursor > 0) {
-        setValue(value.slice(0, cursor - 1) + value.slice(cursor))
-        setCursor(cursor - 1)
-        setCompletionIndex(0)
-        setDismissedMenuValue(undefined)
-      }
+      applyEdit(deleteBackward(value, cursor))
       return
     }
-    if (key.leftArrow) {
-      setCursor(Math.max(0, cursor - 1))
+    // Readline parity over the LOGICAL line: A/E to its ends, U/K kill to
+    // them (filling the single kill buffer), Y yanks it back.
+    if (key.ctrl && input === 'a') {
+      moveCursorTo(lineBounds(value, cursor).start)
       return
     }
-    if (key.rightArrow) {
-      setCursor(Math.min(value.length, cursor + 1))
+    if (key.ctrl && input === 'e') {
+      moveCursorTo(lineBounds(value, cursor).end)
       return
     }
     if (key.ctrl && input === 'u') {
-      setValue('')
-      setCursor(0)
-      setDismissedMenuValue(undefined)
+      applyEdit(killToLineStart(value, cursor))
       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)
+      applyEdit(killToLineEnd(value, cursor))
+      return
+    }
+    if (key.ctrl && input === 'y') {
+      if (killRef.current !== '') applyEdit(insertText(value, cursor, killRef.current))
       return
     }
     // Ctrl+L refreshes the screen (readline convention): raw ANSI clear
@@ -2754,24 +3243,44 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       refresh()
       return
     }
-    if (key.ctrl && input === 'a') {
-      setCursor(0)
-      return
-    }
-    if (key.ctrl && input === 'e') {
-      setCursor(value.length)
-      return
-    }
     if (input !== '' && !key.ctrl && !key.meta) {
-      setValue(value.slice(0, cursor) + input + value.slice(cursor))
-      setCursor(cursor + input.length)
-      setCompletionIndex(0)
-      setDismissedMenuValue(undefined)
+      // Bracketed-paste wrappers arrive as unknown escape sequences stripped
+      // of their ESC. Markers may ride their own chunk or the edges of a
+      // content chunk; strip every occurrence and track the open-paste flag
+      // so a chunk that is exactly LF inserts instead of submitting.
+      let text = input
+      if (text.includes(PASTE_START_MARKER)) {
+        pasteBracketRef.current = true
+        // Arm the lost-marker safety net: one timer per open paste, re-armed
+        // if a second start marker rides the same burst.
+        pasteBracketCancelRef.current?.()
+        const timer = setTimeout(() => {
+          pasteBracketRef.current = false
+          pasteBracketCancelRef.current = undefined
+        }, PASTE_BRACKET_TIMEOUT_MS)
+        pasteBracketCancelRef.current = () => {
+          clearTimeout(timer)
+          pasteBracketCancelRef.current = undefined
+        }
+        text = text.replaceAll(PASTE_START_MARKER, '')
+      }
+      if (text.includes(PASTE_END_MARKER)) {
+        pasteBracketRef.current = false
+        pasteBracketCancelRef.current?.()
+        text = text.replaceAll(PASTE_END_MARKER, '')
+      }
+      if (text === '') return
+      const droppedPaths = text.length > 1 ? parsePastedImagePaths(text) : []
+      if (droppedPaths.length > 0) {
+        insertDroppedImages(droppedPaths)
+        return
+      }
+      applyEdit(insertText(value, cursor, text))
     }
   })
 
   // The DeepSeek easter-egg wave owns its 33ms tick HERE instead of in App:
-  // the interval re-renders only the composer row at 30fps, never the whole
+  // the interval re-renders only the composer band at 30fps, never the whole
   // tree. App drives the tier/style pair on a model switch; this local effect
   // starts the sweep whenever that pair changes (App picks a NEW random style
   // for every replay — including effort changes on the same route — so the
@@ -2812,44 +3321,68 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   const tierHues = waveTier === null ? null : deepseekWaveHues(waveTier)
   const promptColor = tierHues === null ? inkColor(getPalette().brand) : inkColor(tierHues[0])
   const promptGlyph = waveTier === 'flash' ? '›' : waveTier === 'deepseek' ? '»' : '❯'
+  // The multiline editor model: the sanitized draft hard-wrapped into
+  // column-safe physical rows, with the caret mapped to its exact row and
+  // column. Computed before the frozen path so the row report below runs
+  // unconditionally.
+  const editorColumns = Math.max(1, columns - 6)
+  const editorViewModel = editorModel(value, editorColumns)
+  const clampedCursor = clampCursor(value, cursor)
+  const caret = caretSite(editorViewModel, clampedCursor)
+  const editorWindowRows = Math.min(editorViewModel.rows.length, Math.max(1, maxRows))
+  const maxEditorScroll = Math.max(0, editorViewModel.rows.length - editorWindowRows)
+  const currentEditorScroll = Math.min(Math.max(0, editorScrollRef.current), maxEditorScroll)
+  // Codex effective_scroll: no scrolling while the rows fit; otherwise the
+  // window follows the caret row with as little movement as possible.
+  const editorWindowStart = caret.row < currentEditorScroll
+    ? caret.row
+    : caret.row >= currentEditorScroll + editorWindowRows
+      ? caret.row - editorWindowRows + 1
+      : currentEditorScroll
+  editorScrollRef.current = editorWindowStart
+  const editorRowCount = frozen ? 1 : editorWindowRows
+  useEffect(() => {
+    onEditorRows(editorRowCount)
+  }, [editorRowCount, onEditorRows])
+  // The composer band: the old border's three-row footprint repainted as a
+  // background-color band (the Codex-style shaded composer strip) — one
+  // blank band row above and below the content rows, full width minus the
+  // final column. Row counts are untouched, so every height budget stays
+  // exact.
+  const bandWidth = Math.max(1, columns - 1)
+  const bandBg = inkColor(getPalette().composerBand)
+  const bandFill = (consumed: number): string => ' '.repeat(Math.max(0, bandWidth - consumed))
+  const band = (content: ReactElement): ReactElement => createElement(
+    Box,
+    { flexDirection: 'column', width: bandWidth },
+    createElement(Text, { backgroundColor: bandBg }, ' '.repeat(bandWidth)),
+    content,
+    createElement(Text, { backgroundColor: bandBg }, ' '.repeat(bandWidth)),
+  )
   if (frozen) {
-    // A pending deletion turns the box into the confirm prompt: the y/n is
-    // typed HERE, with a readable warn-styled hint instead of a dim footer.
+    // A pending deletion turns the band into the confirm prompt: the y/n is
+    // typed HERE; without a border the warn color carries the warning.
     if (deleteConfirm !== undefined) {
-      return createElement(
-        Box,
-        { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(getPalette().warn), paddingX: 1 },
-        createElement(
-          Text,
-          { wrap: 'truncate-end' },
-          createElement(Text, { color: inkColor(getPalette().warn), bold: true }, '❯ '),
-          createElement(Text, { color: inkColor(getPalette().warn), bold: true }, 'y delete · any other key cancels'),
-        ),
-      )
+      const warning = 'y delete · any other key cancels'
+      return band(createElement(
+        Text,
+        { backgroundColor: bandBg, wrap: 'truncate-end' },
+        createElement(Text, { color: inkColor(getPalette().warn), bold: true }, '❯ '),
+        createElement(Text, { color: inkColor(getPalette().warn), bold: true }, warning),
+        bandFill(2 + visibleColumns(warning)),
+      ))
     }
-    const frozen = value === ''
+    const frozenLine = value === ''
       ? 'type a message'
       : verboseLine(value, Math.max(1, columns - 6))
-    return createElement(
-      Box,
-      { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(getPalette().dim), paddingX: 1 },
-      createElement(
-        Text,
-        { wrap: 'truncate-end' },
-        createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, busy ? '… ' : `${promptGlyph} `),
-        frozen,
-      ),
-    )
+    return band(createElement(
+      Text,
+      { backgroundColor: bandBg, wrap: 'truncate-end' },
+      createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, busy ? '… ' : `${promptGlyph} `),
+      frozenLine,
+      bandFill(2 + visibleColumns(frozenLine)),
+    ))
   }
-
-  // The bordered frame: static dim at rest; while the wave runs the border
-  // breathes with the sweep (dim blends toward the tier accent and back), so
-  // the frame glows up while the crest crosses the row.
-  const frame = (row: ReactElement, borderRgb?: RgbTriple): ReactElement => createElement(
-    Box,
-    { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(borderRgb ?? getPalette().dim), paddingX: 1 },
-    row,
-  )
   const menu = createElement(CompletionMenu, {
     active: menuActive,
     mention: mentionActive,
@@ -2857,56 +3390,87 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     rows: menuRows,
   })
 
-  // Static row (idle, busy, or after the wave): prompt + editor window. The
-  // prompt marker keeps the tier accent while an official DeepSeek model is
-  // applied, restoring the static brand ❯ on any other route.
-  const editor = editorWindow(value, cursor, Math.max(1, columns - 6))
-  const staticRow = createElement(
-    Text,
-    { wrap: 'truncate-end' },
-    busy
-      ? createElement(BusyChase)
-      : createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, `${promptGlyph} `),
-    value === '' ? undefined : editor.before,
-    createElement(CursorBlock, { char: editor.caret }),
-    value === '' && !busy
-      ? createElement(Text, { dimColor: true }, COMPOSER_PLACEHOLDER)
-      : editor.after,
-  )
+  // The multiline editor (idle, busy, or after the wave): every visible
+  // physical row renders inside the band, the prompt marker leading the
+  // first and a two-space indent aligning continuations under the text
+  // column — the same gutter reply rows use. The caret is the inverse block
+  // on its exact grapheme, so wide CJK cells and emoji clusters position the
+  // block precisely. The prompt marker keeps the tier accent while an
+  // official DeepSeek model is applied, restoring the static brand ❯ on any
+  // other route.
+  const editorRows: ReactElement[] = []
+  for (let index = editorWindowStart; index < Math.min(editorViewModel.rows.length, editorWindowStart + editorWindowRows); index += 1) {
+    const row = editorViewModel.rows[index]!
+    const caretAt = index === caret.row ? row.offsets.indexOf(clampedCursor) : -1
+    const before = caretAt > 0 ? row.text.slice(0, row.cuts[caretAt]!) : ''
+    const caretChar = caretAt >= 0 && caretAt < row.cuts.length - 1 ? row.text.slice(row.cuts[caretAt]!, row.cuts[caretAt + 1]!) : ' '
+    const after = caretAt < 0
+      ? row.text
+      : caretAt < row.cuts.length - 1
+        ? row.text.slice(row.cuts[caretAt + 1]!)
+        : ''
+    const placeholder = index === 0 && value === '' && !busy
+    const tail = placeholder ? COMPOSER_PLACEHOLDER : after
+    const consumed = 2 + visibleColumns(before) + visibleColumns(caretChar) + visibleColumns(tail)
+    editorRows.push(createElement(
+      Text,
+      { key: index, backgroundColor: bandBg, wrap: 'truncate-end' },
+      index === 0
+        ? busy
+          ? createElement(BusyChase)
+          : createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, `${promptGlyph} `)
+        : '  ',
+      before,
+      createElement(CursorBlock, { key: 'caret', char: caretChar }),
+      placeholder
+        ? createElement(Text, { dimColor: true }, COMPOSER_PLACEHOLDER)
+        : after,
+      bandFill(consumed),
+    ))
+  }
+  const staticEditor = createElement(Box, { flexDirection: 'column' }, ...editorRows)
 
-  // Wave row: the input row assembled column by column, each cell carrying
-  // the sampled wave `backgroundColor` (null outside the crest → transparent),
-  // so the crest sweeps the FULL content row — prompt, draft, cursor,
-  // placeholder, and the trailing blank fill. The deepseek tier drops the
+  // Wave band: all three rows assembled column by column, each cell carrying
+  // the sampled wave `backgroundColor` (null outside the crest → the band
+  // background), so the crest sweeps the FULL band — blank rows, prompt,
+  // draft, cursor, placeholder, and the trailing fill — with a per-row phase
+  // offset that flows the wave down the band. The deepseek tier drops the
   // `· ✦ ✧` sparkles into the rightmost blank cell from 900ms on.
   const waveRow = (): ReactElement => {
-    const contentWidth = Math.max(1, columns - 5)
-    const waveEditor = editorWindow(value, cursor, Math.max(1, contentWidth - 2))
     const hues = deepseekWaveHues(waveTier!)
     const style = waveStyle!
-    const base = getTheme() === 'light' ? WAVE_BASE_LIGHT : WAVE_BASE_DARK
-    const waveBg = (column: number): string | undefined => {
-      const rgb = deepseekWaveColumnBg(waveTick!, column, contentWidth, waveTier!, style, hues, base)
-      return rgb === null ? undefined : inkColor(rgb)
-    }
-    const cells: ComposerCell[] = []
-    cells.push({ char: promptGlyph, color: promptColor, bold: true, backgroundColor: waveBg(0) })
-    cells.push({ char: ' ', color: promptColor, backgroundColor: waveBg(1) })
+    const bandRgb = getPalette().composerBand
+    const waveBg = (row: number, column: number): string => {
+      const rgb = deepseekWaveColumnBg(waveTick!, column, bandWidth, waveTier!, style, hues, bandRgb, row, 3)
+      return rgb === null ? bandBg : inkColor(rgb)
+    }
+    const blankBandRow = (row: number): ReactElement => {
+      const blanks: ComposerCell[] = []
+      while (blanks.length < bandWidth) blanks.push({ char: ' ', backgroundColor: waveBg(row, blanks.length) })
+      return createElement(Text, { key: row }, ...waveRowSpans(blanks))
+    }
+    const waveEditor = editorWindow(value, cursor, Math.max(1, columns - 7))
+    const cells: ComposerCell[] = [
+      { char: ' ', backgroundColor: waveBg(1, 0) },
+      { char: ' ', backgroundColor: waveBg(1, 1) },
+      { char: promptGlyph, color: promptColor, bold: true, backgroundColor: waveBg(1, 2) },
+      { char: ' ', color: promptColor, backgroundColor: waveBg(1, 3) },
+    ]
     for (const char of waveEditor.before) {
-      cells.push({ char, backgroundColor: waveBg(cells.length) })
+      cells.push({ char, backgroundColor: waveBg(1, cells.length) })
     }
-    cells.push({ char: waveEditor.caret, inverse: true, backgroundColor: waveBg(cells.length) })
+    cells.push({ char: waveEditor.caret, inverse: true, backgroundColor: waveBg(1, cells.length) })
     if (value === '' && !busy) {
       for (let at = 0; at < COMPOSER_PLACEHOLDER.length; at += 1) {
-        cells.push({ char: COMPOSER_PLACEHOLDER[at]!, dim: true, backgroundColor: waveBg(cells.length) })
+        cells.push({ char: COMPOSER_PLACEHOLDER[at]!, dim: true, backgroundColor: waveBg(1, cells.length) })
       }
     } else {
       for (const char of waveEditor.after) {
-        cells.push({ char, backgroundColor: waveBg(cells.length) })
+        cells.push({ char, backgroundColor: waveBg(1, cells.length) })
       }
     }
-    while (cells.length < contentWidth) {
-      cells.push({ char: ' ', backgroundColor: waveBg(cells.length) })
+    while (cells.length < bandWidth) {
+      cells.push({ char: ' ', backgroundColor: waveBg(1, cells.length) })
     }
     // The wordmark rides the wave's middle: `deepseek` on the official
     // tiers, `Into the Unknown` on the non-DeepSeek high-effort variant —
@@ -2914,7 +3478,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     // over blank or placeholder cells — real draft text is never covered.
     if (deepseekWaveWordVisible(waveTick!, waveTier!, style)) {
       const word = waveTier === 'unknown' ? 'Into the Unknown' : 'deepseek'
-      const start = Math.max(2, Math.floor((contentWidth - word.length) / 2))
+      const start = Math.max(2, Math.floor((bandWidth - word.length) / 2))
       let clear = true
       for (let at = 0; at < word.length; at += 1) {
         const cell = cells[start + at]
@@ -2945,15 +3509,20 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         }
       }
     }
-    const borderRgb = deepseekWaveBorderColor(waveTick!, waveTier!, style, hues, getPalette().dim)
-    return frame(createElement(Text, { wrap: 'truncate-end' }, ...waveRowSpans(cells)), borderRgb)
+    return createElement(
+      Box,
+      { flexDirection: 'column', width: bandWidth },
+      blankBandRow(0),
+      createElement(Text, { wrap: 'truncate-end' }, ...waveRowSpans(cells)),
+      blankBandRow(2),
+    )
   }
 
   return createElement(
     Box,
     { flexDirection: 'column' },
     menu,
-    waveTick !== null && waveTier !== null && !busy ? waveRow() : frame(staticRow),
+    waveTick !== null && waveTier !== null && !busy ? waveRow() : band(staticEditor),
   )
 }
 
@@ -2965,15 +3534,15 @@ interface SettledRowRecord {
   before: ReactElement | undefined
   /** The roomy-prompt spacer AFTER the row, or undefined. */
   after: ReactElement | undefined
-  /** Whether the row's text depends on the reasoning toggle (Ctrl+R). */
-  reasonSensitive: boolean
-  /** The toggle state the row was built with. */
-  showReasoning: boolean
+  /** Physical rows this record contributes (row body plus spacers) — the
+   * unit of the rendered-history cap. */
+  rows: number
 }
 
 /** The incremental settled-history cache (see `computeSettledRows`). */
 interface SettledRowsCache {
-  /** The exact settled entries the cache covers (`view.entries[0..entries.length)`). */
+  /** The exact settled entries the cache covers (the WINDOW: the newest
+   * `entries.length` settled entries, oldest dropped entries excluded). */
   entries: TranscriptEntry[]
   /** Records keyed by entry identity; mutated in place so the append path
    * never copies the whole map. */
@@ -2984,10 +3553,21 @@ interface SettledRowsCache {
   resumed: boolean
   /** The toggle state the rows were built with. */
   showReasoning: boolean
-  /** The refreshEpoch the rows were built for; a bump forces a full rebuild. */
+  /** The refreshEpoch the rows was built for; a bump forces a full rebuild. */
   epoch: number
-  /** The flat row list (header + per-entry before/box/after). */
+  /** The terminal width the rows were wrapped for; a change forces a rebuild. */
+  columns: number
+  /** The flat row list (header + optional hint + per-entry before/box/after). */
   flat: ReactElement[]
+  /** Settled entries dropped from the window's head (rendering only — the
+   * event log keeps everything; Ctrl+O and /export read it directly). */
+  droppedEntries: number
+  /** Physical rows the window's entries contribute (excludes header/hint). */
+  totalRows: number
+  /** The window overflowed the trim hysteresis; one source-backed replay
+   * (epoch bump) will re-window the cache. The append path never mutates
+   * flat's head, so <Static> only ever sees tail appends between remounts. */
+  needsTrim: boolean
 }
 
 /** One step of `computeSettledRows`. */
@@ -2997,23 +3577,36 @@ interface SettledRowsResult {
   built: number
 }
 
-/** Build one settled row (row Box plus its roomy-prompt spacers). */
-function buildSettledRow(entry: TranscriptEntry, index: number, showReasoning: boolean): SettledRowRecord {
-  const row = createElement(EntryLine, { entry, showReasoning, verbose: false })
+/** Build one settled row (row Box plus its roomy-prompt spacers and row count). */
+function buildSettledRow(entry: TranscriptEntry, index: number, showReasoning: boolean, columns: number): SettledRowRecord {
+  // The SAME physical-row pipeline as the live tail (settledEntryLines).
+  // Every row carries its own two-column prefix (user ❯, reply body, tool
+  // cards), which is the whole gutter: no extra container padding, so reply
+  // text starts at the same column as the composer's input text and wrapped
+  // continuations keep their hanging indent instead of resetting to column 0.
   const roomyPrompt = entry.kind === 'user' && !entry.notice
+  const lines = settledEntryLines(entry, Math.max(10, columns - 2), showReasoning)
   return {
-    box: createElement(Box, { key: index, paddingX: 1 }, row),
+    box: createElement(Box, { key: index }, createElement(StyledRows, { lines })),
     before: roomyPrompt
       ? createElement(Box, { key: `prompt-before-${index}`, paddingX: 1 }, createElement(Text, null, ' '))
       : undefined,
     after: roomyPrompt
       ? createElement(Box, { key: `prompt-after-${index}`, paddingX: 1 }, createElement(Text, null, ' '))
       : undefined,
-    reasonSensitive: entry.kind === 'assistant' && entry.reasoning !== '',
-    showReasoning,
+    rows: lines.length + (roomyPrompt ? 2 : 0),
   }
 }
 
+/** The dim hint row placed under the header once the window has dropped entries. */
+function settledTrimHint(droppedEntries: number, columns: number): ReactElement {
+  return createElement(
+    Text,
+    { key: 'history-cap-hint', color: inkColor(getPalette().dim), wrap: 'truncate-end' },
+    truncateColumns(`… +${droppedEntries} earlier messages hidden · ctrl+o browse · /export full transcript`, Math.max(10, columns - 2)),
+  )
+}
+
 /**
  * The settled `<Static>` row set as a PURE incremental state machine (App
  * drives it from the memo; tests drive it directly and read `built`).
@@ -3027,11 +3620,27 @@ function buildSettledRow(entry: TranscriptEntry, index: number, showReasoning: b
  * rebuild of rows, Map, or MarkdownBody parses). `records` is mutated in place
  * on the append/toggle paths to stay O(delta).
  *
+ * RENDERED-HISTORY CAP: the window holds at most `rowCap` physical rows of
+ * settled transcript (header and hint reserved on top). The cap exists only
+ * here — the event log, the store projection, /export, Ctrl+O, and /resume
+ * keep the full history. Ink 5's <Static> is a consumption counter
+ * (items.slice(index) keyed on length): deleting head items mid-stream while
+ * appending tail items can permanently swallow new rows, so the append branch
+ * NEVER drops the head — it only accounts rows and flags `needsTrim` once the
+ * window overflows cap + margin. The flag fires one source-backed replay
+ * (epoch bump = the existing clear + <Static> remount), whose rebuild branch
+ * walks the settled entries BACKWARD from the newest, keeps whole entries
+ * until the cap, and counts everything older as `droppedEntries` (those
+ * entries never even reach settledEntryLines). Hysteresis bounds replays to
+ * at most one per 25% growth; resize / Ctrl+L / idle Ctrl+R replays re-window
+ * for free on the same path.
+ *
  * Full rebuilds run only on the rare, deliberate paths: no cache yet, a
- * source-backed replay (`epoch` bump: resize / Ctrl+L / Ctrl+R remounts
- * `<Static>` and must re-flush the CURRENT rows), a `resumed` change, or a shrink
- * (`store.reset`). A reasoning toggle rebuilds only the rows whose text
- * depends on it, preserving the other rows' element identity.
+ * source-backed replay (`epoch` bump: resize / Ctrl+L / an idle Ctrl+R fold
+ * toggle / a cap trim remounts `<Static>` and must re-flush the CURRENT rows
+ * at the CURRENT fold state), a `resumed` change, or a shrink (`store.reset`).
+ * While a turn is busy or streaming, Ctrl+R only flips the live region; rows
+ * already emitted to native scrollback change exclusively through rebuilds.
  */
 export function computeSettledRows(
   previous: SettledRowsCache | undefined,
@@ -3040,50 +3649,58 @@ export function computeSettledRows(
   showReasoning: boolean,
   resumed: boolean,
   epoch: number,
+  columns = 80,
+  rowCap = SETTLED_ROW_CAP,
 ): SettledRowsResult {
   if (previous === undefined || previous.epoch !== epoch || previous.resumed !== resumed
     || settled < previous.entries.length) {
-    // Full rebuild from the current settled prefix.
+    // Full rebuild at the CURRENT fold state, newest-first so the cap keeps
+    // whole entries and never even parses dropped ones.
     const records = new Map<TranscriptEntry, SettledRowRecord>()
-    const flat: ReactElement[] = [createElement(Header, { key: 'header', resumed })]
-    for (let index = 0; index < settled; index++) {
+    const window: ReactElement[] = []
+    let windowRows = 0
+    let droppedEntries = 0
+    let index = settled - 1
+    for (; index >= 0; index--) {
       const entry = entries[index]
-      const record = buildSettledRow(entry, index, showReasoning)
+      if (entry === undefined) break
+      const record = buildSettledRow(entry, index, showReasoning, columns)
+      if (rowCap > 0 && windowRows + record.rows > rowCap - SETTLED_ROW_RESERVE) {
+        // This whole entry (and everything older) falls out of the window.
+        droppedEntries = index + 1
+        break
+      }
       records.set(entry, record)
-      if (record.before !== undefined) flat.push(record.before)
-      flat.push(record.box)
-      if (record.after !== undefined) flat.push(record.after)
+      windowRows += record.rows
+      if (record.after !== undefined) window.unshift(record.after)
+      window.unshift(record.box)
+      if (record.before !== undefined) window.unshift(record.before)
     }
+    const header = createElement(Header, { key: 'header', resumed })
+    const flat = droppedEntries > 0
+      ? [header, settledTrimHint(droppedEntries, columns), ...window]
+      : [header, ...window]
     return {
-      cache: { entries: entries.slice(0, settled), records, header: flat[0]!, resumed, showReasoning, epoch, flat },
-      built: settled,
+      cache: {
+        entries: entries.slice(droppedEntries, settled),
+        records,
+        header,
+        resumed,
+        showReasoning,
+        epoch,
+        columns,
+        flat,
+        droppedEntries,
+        totalRows: windowRows,
+        needsTrim: false,
+      },
+      built: records.size,
     }
   }
   if (previous.showReasoning !== showReasoning) {
-    // Reasoning toggle: only rows whose text depends on it rebuild; spacers
-    // and the other rows keep their element identity.
-    const records = previous.records
-    const flat: ReactElement[] = [previous.header]
-    let built = 0
-    for (let index = 0; index < previous.entries.length; index++) {
-      const entry = previous.entries[index]
-      const record = records.get(entry)!
-      const current = record.reasonSensitive
-        ? {
-          ...record,
-          box: createElement(Box, { key: index, paddingX: 1 }, createElement(EntryLine, { entry, showReasoning, verbose: false })),
-          showReasoning,
-        }
-        : record
-      if (current !== record) {
-        records.set(entry, current)
-        built += 1
-      }
-      if (current.before !== undefined) flat.push(current.before)
-      flat.push(current.box)
-      if (current.after !== undefined) flat.push(current.after)
-    }
-    return { cache: { ...previous, records, showReasoning, flat }, built }
+    // Native scrollback is immutable. Record only the mode future settled
+    // entries will capture; the existing flat row identity stays untouched.
+    return { cache: { ...previous, showReasoning }, built: 0 }
   }
   if (settled === previous.entries.length) {
     // Nothing below the boundary changed (a pending retirement above it, a
@@ -3091,19 +3708,25 @@ export function computeSettledRows(
     // memoized <Static> subtree does not re-render at all.
     return { cache: previous, built: 0 }
   }
-  // The boundary grew: build ONLY the newly settled suffix.
+  // The boundary grew: build ONLY the newly settled suffix. The head is never
+  // dropped here (Ink's Static counter would swallow rows on a mixed frame);
+  // overflow only flags the cache for one trimming replay.
   const records = previous.records
   const suffix: TranscriptEntry[] = []
   const added: ReactElement[] = []
-  for (let index = previous.entries.length; index < settled; index++) {
+  let deltaRows = 0
+  for (let index = previous.entries.length + previous.droppedEntries; index < settled; index++) {
     const entry = entries[index]
-    const record = buildSettledRow(entry, index, showReasoning)
+    const record = buildSettledRow(entry, index, showReasoning, previous.columns)
     records.set(entry, record)
     suffix.push(entry)
+    deltaRows += record.rows
     if (record.before !== undefined) added.push(record.before)
     added.push(record.box)
     if (record.after !== undefined) added.push(record.after)
   }
+  const totalRows = previous.totalRows + deltaRows
+  const needsTrim = rowCap > 0 && totalRows > rowCap + Math.floor(rowCap / 4)
   return {
     cache: {
       entries: previous.entries.concat(suffix),
@@ -3112,9 +3735,13 @@ export function computeSettledRows(
       resumed: previous.resumed,
       showReasoning,
       epoch: previous.epoch,
+      columns: previous.columns,
       flat: previous.flat.concat(added),
+      droppedEntries: previous.droppedEntries,
+      totalRows,
+      needsTrim,
     },
-    built: settled - previous.entries.length,
+    built: suffix.length,
   }
 }
 
@@ -3137,12 +3764,13 @@ export function App(props: AppProps): ReactElement {
   const skills = useSyncExternalStore(props.skills.subscribe, readSkills)
   const [modelLabel, setModelLabel] = useState(props.model)
   const [modelOpen, setModelOpen] = useState(false)
-  /** Nested /model stages; only one owns terminal input at a time. */
-  const [providerOpen, setProviderOpen] = useState(false)
-  const [providerAction, setProviderAction] = useState<{
-    kind: 'credential' | 'unset' | 'remove'
-    target: ProviderTargetView
-  } | undefined>(undefined)
+  /** Nested /model stages; only one owns terminal input at a time. */
+  const [providerOpen, setProviderOpen] = useState(false)
+  const [providerAction, setProviderAction] = useState<
+    | { kind: 'credential' | 'configure' | 'unset' | 'remove'; target: ProviderTargetView }
+    | { kind: 'login' | 'logout'; target: ProviderTargetView; authorization: ProviderAuthorizationRow }
+    | undefined
+  >(undefined)
   /** The model row whose effort levels the /model stage lists; undefined shows the model list. */
   const [effortFor, setEffortFor] = useState<ModelRow | undefined>(undefined)
   /** Effective reasoning effort, shown in the /model picker and switch notice. */
@@ -3156,7 +3784,7 @@ export function App(props: AppProps): ReactElement {
    * follows the applied model label (what the status bar actually shows),
    * never the initial paint, and the tier is derived from the label and
    * cached at the switch. The 33ms tick itself lives inside Input, so the
-   * sweep re-renders only the composer row, not the whole tree, at 30fps;
+   * sweep re-renders only the composer band, not the whole tree, at 30fps;
    * App owns the rarely-changing tier/style and Input starts the sweep
    * whenever that pair changes. */
   const [waveTier, setWaveTier] = useState<DeepseekWaveTier | null>(null)
@@ -3192,8 +3820,10 @@ export function App(props: AppProps): ReactElement {
   }, [modelLabel, effortLabel])
   const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
   const [modelError, setModelError] = useState<string | undefined>(undefined)
-  const [providerDirectory, setProviderDirectory] = useState<ProviderSettingsDirectory | undefined>(undefined)
-  const [providerError, setProviderError] = useState<string | undefined>(undefined)
+  const [providerDirectory, setProviderDirectory] = useState<ProviderSettingsDirectory | undefined>(undefined)
+  const [providerError, setProviderError] = useState<string | undefined>(undefined)
+  const [authorizationDirectory, setAuthorizationDirectory] = useState<ProviderAuthorizationDirectory | undefined>(undefined)
+  const [authorizationError, setAuthorizationError] = useState<string | undefined>(undefined)
   const [modelLoadEpoch, setModelLoadEpoch] = useState(0)
   const [notice, setNotice] = useState<{ text: string; tone: NoticeTone } | undefined>(undefined)
   const notify = useCallback((text: string, tone: NoticeTone = 'info'): void => {
@@ -3233,7 +3863,21 @@ export function App(props: AppProps): ReactElement {
     return () => {
       cancelled = true
     }
-  }, [modelOpen, modelLoadEpoch, props.loadModelProviders])
+  }, [modelOpen, modelLoadEpoch, props.loadModelProviders])
+  useEffect(() => {
+    if (!modelOpen || props.loadProviderAuthorizations === undefined) return
+    let cancelled = false
+    setAuthorizationDirectory(undefined)
+    setAuthorizationError(undefined)
+    Promise.resolve().then(() => props.loadProviderAuthorizations!()).then((loaded) => {
+      if (!cancelled) setAuthorizationDirectory(loaded)
+    }, (error: unknown) => {
+      if (!cancelled) setAuthorizationError(error instanceof Error ? error.message : String(error))
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [modelOpen, modelLoadEpoch, props.loadProviderAuthorizations])
   useEffect(() => {
     const subscribe = props.subscribeModelProviders
     if (!modelOpen || subscribe === undefined) return
@@ -3242,23 +3886,35 @@ export function App(props: AppProps): ReactElement {
     } catch (error: unknown) {
       setProviderError(error instanceof Error ? error.message : String(error))
     }
-  }, [modelOpen, props.subscribeModelProviders])
+  }, [modelOpen, props.subscribeModelProviders])
+  useEffect(() => {
+    const subscribe = props.subscribeProviderAuthorizations
+    if (!modelOpen || subscribe === undefined) return
+    try {
+      return subscribe(() => setModelLoadEpoch(epoch => epoch + 1))
+    } catch (error: unknown) {
+      setAuthorizationError(error instanceof Error ? error.message : String(error))
+    }
+  }, [modelOpen, props.subscribeProviderAuthorizations])
 
   const busy = view.busy
   const [showReasoning, setShowReasoning] = useState(false)
   const [verboseOpen, setVerboseOpen] = useState(false)
+  const [diffView, setDiffView] = useState<GitDiffView | undefined>(undefined)
   const [helpOpen, setHelpOpen] = useState(false)
   const [modeOpen, setModeOpen] = useState(false)
   const [permissionOpen, setPermissionOpen] = useState(false)
   const [resumeOpen, setResumeOpen] = useState(false)
   const [pluginOpen, setPluginOpen] = useState(false)
   const [pluginQuery, setPluginQuery] = useState('')
+  const [jobsOpen, setJobsOpen] = useState(false)
   const [statuslineOpen, setStatuslineOpen] = useState(false)
   const [statuslineItems, setStatuslineItems] = useState<readonly StatusItemId[]>(() => parseStatuslineItems(props.statusline))
   const [themeOpen, setThemeOpen] = useState(false)
   const [historyOpen, setHistoryOpen] = useState(false)
   const [agentsOpen, setAgentsOpen] = useState(false)
   const [subagentOpen, setSubagentOpen] = useState(false)
+  const [todosOpen, setTodosOpen] = useState(false)
   /** /delete state: delete-mode hint plus an optional pre-armed row id. */
   const [resumeDelete, setResumeDelete] = useState<{ mode: boolean; id?: string }>({ mode: false })
   /** The row id awaiting y/n in the COMPOSER (codex delete confirm): the
@@ -3330,7 +3986,7 @@ export function App(props: AppProps): ReactElement {
   // panel keypress.
   const inputActive = deleteConfirmId !== undefined
     ? !approvalPending && !questionPending
-    : !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !agentsOpen && !subagentOpen && !verboseOpen && !approvalPending && !questionPending
+    : !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !jobsOpen && !statuslineOpen && !themeOpen && !historyOpen && !agentsOpen && !subagentOpen && !todosOpen && !verboseOpen && diffView === undefined && !approvalPending && !questionPending
 
   // Human questions outrank local inspectors. Close the lower modal instead
   // of leaving an approval/question visible but keyboard-locked behind it.
@@ -3350,8 +4006,10 @@ export function App(props: AppProps): ReactElement {
     setHistoryOpen(false)
     setAgentsOpen(false)
     setSubagentOpen(false)
+    setTodosOpen(false)
     setDeleteConfirmId(undefined)
     setVerboseOpen(false)
+    setDiffView(undefined)
   }, [approvalPending, questionPending])
 
   // Append-only transcript: everything up to the first still-mutable entry
@@ -3366,9 +4024,17 @@ export function App(props: AppProps): ReactElement {
   // settled prefix is permanently final, so a grown boundary builds ONLY the
   // newly settled suffix and reuses every cached element — long histories
   // stop re-creating rows (and re-parsing MarkdownBody) on every durable
-  // event. A source-backed replay (`refreshEpoch` bump: resize / Ctrl+L /
-  // Ctrl+R remounts `<Static>`) rebuilds the CURRENT row set from index 0,
+  // event. A source-backed replay (`refreshEpoch` bump: resize / Ctrl+L)
+  // rebuilds the CURRENT row set from index 0,
   // so the replay stays complete and never ghosts a pending/running tail.
+  // 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)
   const settledRowsCache = useRef<SettledRowsCache | undefined>(undefined)
   const settledRows = useMemo(() => {
     const result = computeSettledRows(
@@ -3378,19 +4044,15 @@ export function App(props: AppProps): ReactElement {
       showReasoning,
       props.resumed,
       refreshEpoch,
+      terminalSize.columns,
     )
     settledRowsCache.current = result.cache
     return result.cache.flat
-  }, [view.entries, settled, showReasoning, props.resumed, refreshEpoch])
+  }, [view.entries, settled, showReasoning, props.resumed, refreshEpoch, terminalSize.columns])
 
-  // 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)
+  // One pending synchronized frame covers a debounced resize or explicit
+  // source-backed replay. It is closed after the corresponding React commit.
+  const synchronizedReplayPending = useRef(false)
   useEffect(() => {
     if (appStdout === undefined) return
     let replayTimer: ReturnType<typeof setTimeout> | undefined
@@ -3411,7 +4073,8 @@ export function App(props: AppProps): ReactElement {
       setTerminalSize(next)
       if (replayTimer !== undefined) clearTimeout(replayTimer)
       replayTimer = setTimeout(() => {
-        appStdout.write(RESIZE_REFLOW_CLEAR)
+        synchronizedReplayPending.current = true
+        appStdout.write(SYNCHRONIZED_UPDATE_BEGIN + RESIZE_REFLOW_CLEAR)
         setRefreshEpoch(epoch => epoch + 1)
       }, RESIZE_REFLOW_DELAY_MS)
     }
@@ -3424,16 +4087,30 @@ export function App(props: AppProps): ReactElement {
   const terminalRows = terminalSize.rows
   const terminalColumns = terminalSize.columns
   const composerGutterRows = layoutGutterRows(terminalRows)
-  // Bottom chrome is now composer (3) + status (up to 2 rows); the budget
-  // keeps the live/streaming area strictly below the terminal height.
-  const dynamicRows = Math.max(1, terminalRows - 13 - composerGutterRows)
+  // The composer's live row count, reported one-way by the editor itself
+  // (frozen modals report 1). This keeps the live/streaming budget exact as
+  // a multiline draft grows, without lifting any editor state into the App.
+  const [composerRows, setComposerRows] = useState(1)
+  const handleEditorRows = useCallback((rows: number): void => {
+    setComposerRows(current => (current === rows ? current : rows))
+  }, [])
+  const composerEditorCap = composerMaxRows(terminalRows)
+  // Bottom chrome is composer (2 borders + composerRows) + menu + status
+  // (up to 2 rows); the budget keeps the live/streaming area strictly below
+  // the terminal height as the editor grows.
+  const dynamicRows = Math.max(1, terminalRows - 13 - composerGutterRows - (composerRows - 1))
   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],
+    () => view.entries.slice(settled).flatMap(
+      entry => transcriptEntryLines(entry, Math.max(10, terminalColumns - 2), showReasoning),
+    ),
+    [view.entries, settled, terminalColumns, showReasoning],
   )
-  const liveBudget = streamingActive
+  // Reserve the same stream slice from the moment a turn becomes busy. This
+  // keeps the first thinking frame from changing the dynamic-tree geometry
+  // underneath Ink's cursor ledger and avoids a start-of-thinking flash.
+  const liveBudget = busy || streamingActive
     ? Math.max(1, Math.floor(dynamicRows / 3))
     : Math.max(0, dynamicRows - (deepDivingVisible ? 1 : 0))
   const visibleLiveLines = liveBudget === 0 ? [] : allLiveLines.slice(-liveBudget)
@@ -3454,24 +4131,58 @@ export function App(props: AppProps): ReactElement {
           ? Math.max(1, Math.floor(streamRows / 3))
           : 1
   const answerRows = view.streaming === '' ? 0 : Math.max(1, streamRows - reasoningRows)
-  const transcriptVisible = !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !agentsOpen && !subagentOpen && !verboseOpen && !approvalPending && !questionPending
+  const transcriptVisible = !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !jobsOpen && !statuslineOpen && !themeOpen && !historyOpen && !agentsOpen && !subagentOpen && !todosOpen && !verboseOpen && diffView === undefined && !approvalPending && !questionPending
   const inspectorVisible = verboseOpen && !approvalPending && !questionPending
-  const modalVisible = modelOpen || helpOpen || modeOpen || permissionOpen || resumeOpen || pluginOpen || statuslineOpen || themeOpen || historyOpen || agentsOpen || subagentOpen || inspectorVisible || approvalPending || questionPending
+  const modalVisible = modelOpen || helpOpen || modeOpen || permissionOpen || resumeOpen || pluginOpen || jobsOpen || statuslineOpen || themeOpen || historyOpen || agentsOpen || subagentOpen || todosOpen || inspectorVisible || diffView !== undefined || approvalPending || questionPending
   const closeInspector = useCallback((): void => {
     setVerboseOpen(false)
   }, [])
   const refreshScreen = (): void => {
-    if (appStdout !== undefined) appStdout.write('\x1b[2J\x1b[3J\x1b[H')
+    // Same source-backed clear the resize path uses: reset the scroll region
+    // (`\x1b[r`) before wiping screen AND scrollback, then home the cursor.
+    // A bare `\x1b[2J\x1b[3J\x1b[H` leaves a previously set scroll region in
+    // place, so Ink's next repaint positions against stale bounds — the
+    // stale-position flicker where the screen keeps redrawing.
+    if (appStdout !== undefined) {
+      synchronizedReplayPending.current = true
+      appStdout.write(SYNCHRONIZED_UPDATE_BEGIN + RESIZE_REFLOW_CLEAR)
+    }
     setRefreshEpoch(epoch => epoch + 1)
   }
+  useEffect(() => {
+    if (!synchronizedReplayPending.current || appStdout === undefined) return
+    synchronizedReplayPending.current = false
+    appStdout.write(SYNCHRONIZED_UPDATE_END)
+  }, [appStdout, refreshEpoch])
+  // An idle Ctrl+R fold toggle joins resize and explicit Ctrl+L as a deliberate
+  // source-backed rebuild of native scrollback; busy turns never do.
 
-  /** Apply one /model pick: record the selection, close the panel, report via notice. */
-  const applyModel = (row: ModelRow, effortId: string | undefined): void => {
-    try {
-      const label = props.selectModel(row, effortId)
-      setModelLabel(label)
-      setEffortLabel(effortId)
-      notify(`model → next step uses ${label}${effortId === undefined || effortId === '' ? '' : `@${effortId}`}`)
+  // Rendered-history cap: when the settled window overflows the trim
+  // hysteresis, one source-backed replay re-windows it (the rebuild branch
+  // drops the oldest entries beyond the cap). Deferred while busy or
+  // streaming so the clear never interrupts a visible stream; the flag
+  // survives until the turn calms.
+  const settledNeedsTrim = settledRowsCache.current?.needsTrim === true
+  useEffect(() => {
+    if (!settledNeedsTrim || busy || streamingActive) return
+    refreshScreen()
+  }, [settledNeedsTrim, busy, streamingActive])
+
+  const sessionHasImages = useMemo(() => view.entries.some(entry =>
+    (entry.kind === 'user' || entry.kind === 'pending') && (entry.images?.length ?? 0) > 0), [view.entries])
+
+  /** Apply one /model pick: record the selection, close the panel, report via notice. */
+  const applyModel = (row: ModelRow, effortId: string | undefined): void => {
+    try {
+      const label = props.selectModel(row, effortId)
+      setModelLabel(label)
+      setEffortLabel(effortId)
+      const selected = `${label}${effortId === undefined || effortId === '' ? '' : `@${effortId}`}`
+      if (sessionHasImages && row.inputModalities !== undefined && !row.inputModalities.includes('image')) {
+        notify(`model → ${selected} · image history will be sent as text placeholders`, 'warning')
+      } else {
+        notify(`model → next step uses ${selected}`)
+      }
       setModelOpen(false)
       setProviderOpen(false)
       setProviderAction(undefined)
@@ -3491,8 +4202,58 @@ export function App(props: AppProps): ReactElement {
     setEffortFor(undefined)
   }
   let modelSurface: ReactElement | undefined
-  if (modelOpen && !approvalPending && !questionPending) {
-    if (providerAction?.kind === 'credential' && props.saveModelProviderCredential !== undefined) {
+  if (modelOpen && !approvalPending && !questionPending) {
+    if (providerAction?.kind === 'login'
+      && props.beginProviderAuthorization !== undefined
+      && props.cancelProviderAuthorization !== undefined
+      && props.openAuthorizationUrl !== undefined
+      && props.copyTextValue !== undefined) {
+      modelSurface = createElement(ProviderAuthorizationPanel, {
+        row: providerAction.authorization,
+        begin: props.beginProviderAuthorization,
+        cancel: () => props.cancelProviderAuthorization!(providerAction.authorization),
+        openUrl: props.openAuthorizationUrl,
+        copy: props.copyTextValue,
+        done: () => {
+          const authorization = providerAction.authorization
+          setProviderAction(undefined)
+          setProviderOpen(false)
+          reloadModelSurfaces()
+          notify(`logged in to ${authorization.label}; select a model`)
+        },
+        back: () => {
+          setProviderAction(undefined)
+          setProviderOpen(true)
+        },
+      })
+    } else if (providerAction?.kind === 'logout' && props.logoutProviderAuthorization !== undefined) {
+      modelSurface = createElement(ProviderAuthorizationLogoutPanel, {
+        row: providerAction.authorization,
+        confirm: props.logoutProviderAuthorization,
+        done: () => {
+          const authorization = providerAction.authorization
+          setProviderAction(undefined)
+          setProviderOpen(true)
+          reloadModelSurfaces()
+          notify(`logged out from ${authorization.label}`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerAction?.kind === 'configure' && props.saveModelProviderConfiguration !== undefined) {
+      modelSurface = createElement(ProviderConfigurationPanel, {
+        target: providerAction.target,
+        catalog: directory?.rows ?? [],
+        save: props.saveModelProviderConfiguration,
+        done: () => {
+          const target = providerAction.target
+          setProviderAction(undefined)
+          setProviderOpen(true)
+          reloadModelSurfaces()
+          notify(`provider configuration saved: ${target.displayName}`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerAction?.kind === 'credential' && props.saveModelProviderCredential !== undefined) {
       modelSurface = createElement(ProviderCredentialPanel, {
         target: providerAction.target,
         save: props.saveModelProviderCredential,
@@ -3534,9 +4295,11 @@ export function App(props: AppProps): ReactElement {
         back: () => setProviderAction(undefined),
       })
     } else if (providerOpen) {
-      modelSurface = createElement(ProviderPanel, {
-        directory: providerDirectory,
-        error: providerError,
+      modelSurface = createElement(ProviderPanel, {
+        directory: providerDirectory,
+        error: providerError,
+        authorizations: authorizationDirectory,
+        authorizationError,
         onCredential: (target: ProviderTargetView) => {
           if (props.saveModelProviderCredential === undefined) {
             notify('API key storage is unavailable in this profile', 'warning')
@@ -3544,6 +4307,13 @@ export function App(props: AppProps): ReactElement {
           }
           setProviderAction({ kind: 'credential', target })
         },
+        onConfigure: (target: ProviderTargetView) => {
+          if (props.saveModelProviderConfiguration === undefined) {
+            notify('provider configuration is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'configure', target })
+        },
         onUnset: (target: ProviderTargetView) => {
           if (props.unsetModelProviderCredential === undefined) {
             notify('API key removal is unavailable in this profile', 'warning')
@@ -3551,13 +4321,34 @@ export function App(props: AppProps): ReactElement {
           }
           setProviderAction({ kind: 'unset', target })
         },
-        onRemove: (target: ProviderTargetView) => {
+        onRemove: (target: ProviderTargetView) => {
           if (props.removeModelProvider === undefined) {
             notify('provider removal is unavailable in this profile', 'warning')
             return
           }
-          setProviderAction({ kind: 'remove', target })
-        },
+          setProviderAction({ kind: 'remove', target })
+        },
+        onLogin: (target: ProviderTargetView, authorization: ProviderAuthorizationRow) => {
+          if (busy) {
+            notify('provider login is available only while the agent is idle', 'warning')
+            return
+          }
+          if (props.beginProviderAuthorization === undefined
+            || props.cancelProviderAuthorization === undefined
+            || props.openAuthorizationUrl === undefined
+            || props.copyTextValue === undefined) {
+            notify('provider login is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'login', target, authorization })
+        },
+        onLogout: (target: ProviderTargetView, authorization: ProviderAuthorizationRow) => {
+          if (props.logoutProviderAuthorization === undefined) {
+            notify('provider logout is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'logout', target, authorization })
+        },
         onRetry: reloadModelSurfaces,
         onBack: () => setProviderOpen(false),
       })
@@ -3606,13 +4397,14 @@ export function App(props: AppProps): ReactElement {
     transcriptVisible
       ? createElement(
         Box,
-        // The two-column gutter matches the composer's border + padding, so
-        // message text aligns with the input cursor (Codex LIVE_PREFIX).
-        { flexDirection: 'column', paddingX: 2 },
+        // No container padding: every live row carries its own two-column
+        // prefix, so streaming text lands exactly where the composer's input
+        // text and the settled reply both render (Codex LIVE_PREFIX).
+        { flexDirection: 'column' },
         visibleLiveLines.length === 0 ? undefined : createElement(StyledRows, { lines: visibleLiveLines }),
         view.streamingReasoning !== '' && reasoningRows > 0
           ? createElement(StreamTail, {
-            text: showReasoning ? view.streamingReasoning : 'Thinking…',
+            text: showReasoning ? view.streamingReasoning : 'Thinking… (Ctrl+R to expand)',
             prefix: '✻ ',
             continuationPrefix: '  ',
             dim: true,
@@ -3633,6 +4425,14 @@ export function App(props: AppProps): ReactElement {
       : undefined,
     transcriptVisible ? createElement(TodoPanel, { todos: view.todos }) : undefined,
     transcriptVisible ? createElement(AgentsLine, { rows: agentRows }) : undefined,
+    todosOpen && !approvalPending && !questionPending
+      ? createElement(MemoTodoListPanel, {
+        todos: view.todos,
+        onClose: () => {
+          setTodosOpen(false)
+        },
+      })
+      : undefined,
     createElement(QuestionBar, { store: props.questions, snapshot: questionSnapshot, locked: false }),
     createElement(ApprovalBar, { snapshot: approvalSnapshot, locked: questionPending, notify }),
     modelSurface,
@@ -3647,6 +4447,12 @@ export function App(props: AppProps): ReactElement {
         },
       })
       : undefined,
+    diffView !== undefined && !approvalPending && !questionPending
+      ? createElement(DiffPanel, {
+        view: diffView,
+        onClose: () => setDiffView(undefined),
+      })
+      : undefined,
     verboseOpen && !approvalPending && !questionPending
       ? createElement(MemoVerbosePanel, {
         entries: view.entries,
@@ -3698,6 +4504,9 @@ export function App(props: AppProps): ReactElement {
     pluginOpen && !approvalPending && !questionPending
       ? createElement(PluginPanel, { load: props.loadPlugins, initialQuery: pluginQuery, close: () => setPluginOpen(false) })
       : undefined,
+    jobsOpen && !approvalPending && !questionPending
+      ? createElement(JobsPanel, { load: props.loadJobs, close: () => setJobsOpen(false) })
+      : undefined,
     statuslineOpen && !approvalPending && !questionPending
       ? createElement(StatuslinePanel, {
         enabled: statuslineItems,
@@ -3790,8 +4599,10 @@ export function App(props: AppProps): ReactElement {
         openModel: () => {
           setDirectory(undefined)
           setModelError(undefined)
-          setProviderDirectory(undefined)
-          setProviderError(undefined)
+          setProviderDirectory(undefined)
+          setProviderError(undefined)
+          setAuthorizationDirectory(undefined)
+          setAuthorizationError(undefined)
           setProviderOpen(false)
           setProviderAction(undefined)
           setEffortFor(undefined)
@@ -3844,21 +4655,30 @@ export function App(props: AppProps): ReactElement {
         openPermission: () => setPermissionOpen(true),
         openResume: () => { setResumeDelete({ mode: false }); setResumeOpen(true) },
         openPlugin: (query = '') => { setPluginQuery(query); setPluginOpen(true) },
+        openJobs: () => setJobsOpen(true),
         openStatusline: () => setStatuslineOpen(true),
         openTheme: () => setThemeOpen(true),
         openHistory: () => setHistoryOpen(true),
         openAgents: () => setAgentsOpen(true),
         openSubagent: () => setSubagentOpen(true),
+        openTodos: () => setTodosOpen(true),
         openDelete: (id?: string) => {
           const armed = id === undefined || id === '' ? undefined : id
           setResumeDelete({ mode: true, ...armed === undefined ? {} : { id: armed } })
           setDeleteConfirmId(armed)
           setResumeOpen(true)
         },
+        openDiff: (argument: string) => {
+          void props.loadGitDiff(argument).then(setDiffView, (error: unknown) => {
+            notify(`diff failed: ${error instanceof Error ? error.message : String(error)}`, 'error')
+          })
+        },
+        reviewChanges: props.reviewChanges,
         deleteConfirm: deleteConfirmId,
         confirmDelete,
         cancelDelete,
         createSession: props.createSession,
+        forkSession: props.forkSession,
         cancelSessionSwitch: props.cancelSessionSwitch,
         notify,
         hasNotice: notice !== undefined,
@@ -3872,18 +4692,23 @@ export function App(props: AppProps): ReactElement {
           props.store.reset()
         },
         refresh: refreshScreen,
-        // Ctrl+R must re-render already-settled history too: settled rows
-        // flush through <Static> once, so the toggle rides the same
-        // source-backed clear+replay the resize path uses — one clear, one
-        // authoritative re-flush at the new visibility.
+        // Ctrl+R flips the reasoning fold. Idle toggles must be visible: rows
+        // already emitted through Static are native scrollback, so the fold
+        // state of past entries can only change through the source-backed
+        // replay (one clear + rebuild, wrapped in a synchronized frame). A
+        // busy/streaming turn stays calm: the live region flips alone and the
+        // entries that settle afterward capture the mode.
         toggleReasoning: () => {
           setShowReasoning(current => !current)
-          refreshScreen()
+          if (!busy && !streamingActive) refreshScreen()
         },
-        loadMentions: props.loadMentions,
+        loadMentions: props.loadMentions,
+        inspectImages: props.inspectImages,
+        prepareImages: props.prepareImages,
         cyclePermission: props.cyclePermission,
         exportTranscript: props.exportTranscript,
         renameTitle: props.renameTitle,
+        copyLastResponse: props.copyLastResponse,
         recallSpace,
         recordLocal,
         recordHistory: props.recordHistory,
@@ -3893,6 +4718,8 @@ export function App(props: AppProps): ReactElement {
         historyConsumed,
         waveTier,
         waveStyle,
+        maxRows: composerEditorCap,
+        onEditorRows: handleEditorRows,
       }),
       createElement(StatusLine, {
         facts: {