dsh-code 0.9.1 → 1.0.1

package/src/kernel-panels.ts

@@ -1,798 +1,914 @@
-/** Bounded, composer-safe panels for preset, session, and plugin kernel views. */
-
-import { createElement, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
-import { Box, Text, useInput, useStdout } from 'ink'
-import type { ModelDirectory, ModelRow } from './models.ts'
-import type { SubagentRow } from './subagents.ts'
-import type { PermissionRow } from './permissions.ts'
-import type { PresetRow } from './presets.ts'
-import type { PluginRow } from './plugin-inventory.ts'
-import type { SessionDirectoryOptions, SessionRow } from './session-directory.ts'
-import { formatRelativeTime } from './session-directory.ts'
-import { panelViewport, revealRow } from './render/inspector.ts'
-import { textLines } from './render/lines.ts'
-import { DEFAULT_STATUSLINE_ITEMS, STATUS_ITEMS, type StatusItemId } from './render/status.ts'
-import { singleLineText, truncateColumns } from './render/text.ts'
-import { getPalette, inkColor } from './theme.ts'
-
-interface ListFrameProps {
-  readonly title: string
-  readonly rows: readonly { readonly key: string; readonly text: string; readonly disabled?: boolean }[]
-  readonly cursor: number
-  readonly loading: boolean
-  readonly error?: string
-  readonly query: string
-  /** Ctrl+F-gated search focus for this panel: typing edits the query only
-   * while true. `undefined` keeps the plain "type to filter" prompt (the
-   * panel filters by typing directly). */
-  readonly searching?: boolean
-  readonly footer: string
-}
-
-/** True for the Ctrl+F search-focus toggle. */
-function isSearchToggle(input: string, key: { ctrl?: boolean }): boolean {
-  return key.ctrl === true && input === 'f'
-}
-
-/** The search-state line: gated panels show only an ACTIVE filter (the ctrl+f
- * toggle lives in the footer), direct-typing panels keep the plain prompt. */
-function searchLine(searching: boolean | undefined, query: string): string {
-  if (searching === true) return `search: ${query === '' ? 'type to filter · esc stops' : query}`
-  if (searching === false) return query === '' ? '' : `search: ${query}`
-  return `search: ${query === '' ? 'type to filter' : query}`
-}
-
-function ListFrame(props: ListFrameProps): ReactElement {
-  const stdout = useStdout().stdout
-  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
-  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
-  if (viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(singleLineText(`${props.title} · esc close`), viewport.contentColumns))
-  }
-  const stateRows = props.loading
-    ? [{ key: 'loading', text: '  loading…' }]
-    : props.error !== undefined
-      ? [{ key: 'error', text: `  ${singleLineText(props.error)}` }]
-      : props.rows.length === 0
-        ? [{ key: 'empty', text: '  no matching entries' }]
-        : props.rows
-  const bodyRows = Math.max(1, viewport.bodyRows - 1)
-  const offset = revealRow(0, props.cursor, stateRows.length, bodyRows)
-  const visible = stateRows.slice(offset, offset + bodyRows)
-  return createElement(
-    Box,
-    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
-    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns(singleLineText(props.title), viewport.contentColumns)),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(singleLineText(searchLine(props.searching, props.query)), viewport.contentColumns)),
-    ...visible.map((row, index) => {
-      const absolute = offset + index
-      const selected = !props.loading && props.error === undefined && props.rows.length > 0 && absolute === props.cursor
-      return createElement(Text, {
-        key: row.key,
-        color: selected ? inkColor(getPalette().brandBright) : row.disabled ? inkColor(getPalette().dim) : undefined,
-        dimColor: row.disabled,
-        wrap: 'truncate-end',
-      }, truncateColumns(`${selected ? '› ' : '  '}${singleLineText(row.text)}`, viewport.contentColumns))
-    }),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(singleLineText(props.footer), viewport.contentColumns)),
-  )
-}
-
-function editQuery(query: string, input: string, key: { backspace?: boolean; delete?: boolean }): string | undefined {
-  if (key.backspace || key.delete) return query.slice(0, -1)
-  if (input.length === 1 && input >= ' ' && input !== '\x7f') return query + input
-  return undefined
-}
-
-export function ModePanel({ current, load, select, close }: {
-  current: string
-  load(): Promise<readonly PresetRow[]>
-  select(id: string): void
-  close(): void
-}): ReactElement {
-  const [rows, setRows] = useState<readonly PresetRow[]>([])
-  const [query, setQuery] = useState('')
-  const [cursor, setCursor] = useState(0)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string>()
-  const refresh = (): void => {
-    setLoading(true); setError(undefined)
-    Promise.resolve().then(load).then(value => { setRows(value); setLoading(false) }, reason => {
-      setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false)
-    })
-  }
-  useEffect(refresh, [])
-  const visible = useMemo(() => rows.filter(row => `${row.id} ${row.name ?? ''} ${row.description ?? ''}`.toLowerCase().includes(query.toLowerCase())), [rows, query])
-  useEffect(() => setCursor(value => Math.min(value, Math.max(0, visible.length - 1))), [visible.length])
-  useInput((input, key) => {
-    if (key.escape || input === 'q') return close()
-    if (input === 'r' && query === '') return refresh()
-    if (key.upArrow) return setCursor(value => visible.length === 0 ? 0 : (value + visible.length - 1) % visible.length)
-    if (key.downArrow) return setCursor(value => visible.length === 0 ? 0 : (value + 1) % visible.length)
-    if (key.return && visible[cursor]?.broken === undefined) return select(visible[cursor]!.id)
-    const next = editQuery(query, input, key)
-    if (next !== undefined) { setQuery(next); setCursor(0) }
-  })
-  return createElement(ListFrame, {
-    title: `/mode · current ${current}`,
-    rows: visible.map(row => ({ key: row.id, disabled: row.broken !== undefined, text: `${row.id === current ? '●' : '○'} ${row.name ?? row.id} · ${row.description ?? row.trust}${row.broken === undefined ? '' : ` · broken: ${row.broken}`}` })),
-    cursor, loading, error, query, footer: '↑↓ choose · enter switch · r refresh · esc close',
-  })
-}
-
-export function PermissionPanel({ current, load, select, close }: {
-  current: string
-  load(): Promise<readonly PermissionRow[]>
-  select(id: string): void
-  close(): void
-}): ReactElement {
-  const [rows, setRows] = useState<readonly PermissionRow[]>([])
-  const [query, setQuery] = useState('')
-  const [cursor, setCursor] = useState(0)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string>()
-  const refresh = (): void => {
-    setLoading(true); setError(undefined)
-    Promise.resolve().then(load).then(value => { setRows(value); setLoading(false) }, reason => {
-      setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false)
-    })
-  }
-  useEffect(refresh, [])
-  const visible = useMemo(() => rows.filter(row => `${row.id} ${row.description ?? ''}`.toLowerCase().includes(query.toLowerCase())), [rows, query])
-  useEffect(() => setCursor(value => Math.min(value, Math.max(0, visible.length - 1))), [visible.length])
-  useInput((input, key) => {
-    if (key.escape || input === 'q') return close()
-    if (input === 'r' && query === '') return refresh()
-    if (key.upArrow) return setCursor(value => visible.length === 0 ? 0 : (value + visible.length - 1) % visible.length)
-    if (key.downArrow) return setCursor(value => visible.length === 0 ? 0 : (value + 1) % visible.length)
-    if (key.return && visible[cursor] !== undefined) return select(visible[cursor]!.id)
-    const next = editQuery(query, input, key)
-    if (next !== undefined) { setQuery(next); setCursor(0) }
-  })
-  return createElement(ListFrame, {
-    title: `/permission · current ${current}`,
-    rows: visible.map(row => ({ key: row.id, text: `${row.id === current ? '●' : '○'} ${row.id}${row.description === undefined ? '' : ` · ${row.description}`}` })),
-    cursor, loading, error, query, footer: '↑↓ choose · enter select · r refresh · esc close',
-  })
-}
-
-export function PluginPanel({ load, close, initialQuery = '' }: { load(): readonly PluginRow[]; close(): void; initialQuery?: string }): ReactElement {
-  const [epoch, setEpoch] = useState(0)
-  const [query, setQuery] = useState(initialQuery)
-  const [cursor, setCursor] = useState(0)
-  const [expanded, setExpanded] = useState(false)
-  const rows = useMemo(() => load().filter(row => `${row.entryId} ${row.moduleName} ${row.phase ?? ''}`.toLowerCase().includes(query.toLowerCase())), [epoch, query])
-  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
-  useInput((input, key) => {
-    if (key.escape || input === 'q') return close()
-    if (input === 'r' && query === '') return setEpoch(value => value + 1)
-    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : (value + rows.length - 1) % rows.length)
-    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : (value + 1) % rows.length)
-    if (key.return) return setExpanded(value => !value)
-    const next = editQuery(query, input, key)
-    if (next !== undefined) { setQuery(next); setCursor(0) }
-  })
-  return createElement(ListFrame, {
-    title: '/plugin · loader inspector',
-    rows: rows.map((row, index) => ({
-      key: row.entryId,
-      disabled: !row.enabled,
-      text: `${row.enabled ? '●' : '○'} ${row.entryId} · ${row.phase ?? 'not mounted'}${expanded && index === cursor ? ` · ${row.moduleName}` : ''}`,
-    })), cursor, loading: false, query, footer: '↑↓ inspect · enter details · r refresh · esc close',
-  })
-}
-
-export function ResumePanel({ currentCwd, load, readTranscript, select, requestDelete, deleteConfirmId, reloadToken = 0, deleteMode = false, close }: {
-  currentCwd: string
-  load(options: SessionDirectoryOptions, signal?: AbortSignal): Promise<readonly SessionRow[]>
-  readTranscript(id: string, signal?: AbortSignal): Promise<string>
-  select(row: SessionRow): void
-  /** Arm the composer-based delete confirm for one row (App owns the keys). */
-  requestDelete?(row: SessionRow): void
-  /** The row id awaiting y/n in the composer, when any (App-owned). */
-  deleteConfirmId?: string
-  /** Bump to reload the listing (e.g. after a deletion). */
-  reloadToken?: number
-  /** Opened via /delete: hint-first delete mode. */
-  deleteMode?: boolean
-  close(): void
-}): ReactElement {
-  // Codex resume-picker default: the CURRENT directory's root sessions; the
-  // cwd filter widens to all only on request (the old default leaked every
-  // directory's sessions into what read as a current-directory view).
-  const [options, setOptions] = useState<SessionDirectoryOptions>({ sessions: 'roots', cwd: 'current', sort: 'newest', currentCwd, query: '' })
-  const [focus, setFocus] = useState(0)
-  const [density, setDensity] = useState<'comfortable' | 'dense'>('comfortable')
-  const [rows, setRows] = useState<readonly SessionRow[]>([])
-  const [cursor, setCursor] = useState(0)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string>()
-  const [expanded, setExpanded] = useState<string>()
-  const [transcript, setTranscript] = useState<{ id: string; text?: string; error?: string }>()
-  /** Ctrl+F-gated search: typing filters only while searching (codex). */
-  const [searching, setSearching] = useState(false)
-  /** Reference clock pinned per row render, so relative times never drift mid-list. */
-  const now = useMemo(() => Date.now(), [rows, options])
-  const transcriptLoad = useRef<AbortController>()
-  useEffect(() => () => transcriptLoad.current?.abort(), [])
-  useEffect(() => {
-    const controller = new AbortController()
-    setLoading(true); setError(undefined)
-    Promise.resolve().then(() => load(options, controller.signal)).then(value => {
-      if (!controller.signal.aborted) { setRows(value); setLoading(false) }
-    }, reason => {
-      if (!controller.signal.aborted) { setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false) }
-    })
-    return () => controller.abort()
-  }, [options, reloadToken])
-  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
-  const cycle = (): void => {
-    if (focus === 3) {
-      setDensity(current => current === 'comfortable' ? 'dense' : 'comfortable')
-      return
-    }
-    setOptions(value => {
-      if (focus === 0) return { ...value, sessions: value.sessions === 'roots' ? 'all' : 'roots' }
-      if (focus === 1) return { ...value, cwd: value.cwd === 'all' ? 'current' : 'all' }
-      return { ...value, sort: value.sort === 'newest' ? 'oldest' : 'newest' }
-    })
-  }
-  useInput((input, key) => {
-    // While a deletion awaits y/n, the COMPOSER owns every key (App routes
-    // them); the panel yields so y/n cannot be handled twice.
-    if (deleteConfirmId !== undefined) return
-    if (key.escape) {
-      if (searching) { setSearching(false); return }
-      return close()
-    }
-    if (isSearchToggle(input, key)) { setSearching(current => !current); return }
-    if (searching) {
-      if (key.return) { setSearching(false); return }
-      const next = editQuery(options.query, input, key)
-      if (next !== undefined) { setOptions(value => ({ ...value, query: next })); setCursor(0) }
-      return
-    }
-    if (input === 'q') return close()
-    if (key.tab) return setFocus(value => (value + (key.shift ? 3 : 1)) % 4)
-    if (key.leftArrow) return cycle()
-    if (key.rightArrow) return cycle()
-    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : Math.max(0, value - 1))
-    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : Math.min(rows.length - 1, value + 1))
-    if (key.pageUp) return setCursor(value => Math.max(0, value - 8))
-    if (key.pageDown) return setCursor(value => Math.min(rows.length - 1, value + 8))
-    if (input === 'g') return setCursor(0)
-    if (input === 'G') return setCursor(Math.max(0, rows.length - 1))
-    if (input === 'd' && rows[cursor] !== undefined && requestDelete !== undefined) return requestDelete(rows[cursor]!)
-    if (input === 'e' && rows[cursor] !== undefined) {
-      return setExpanded(value => value === rows[cursor]!.id ? undefined : rows[cursor]!.id)
-    }
-    if (input === 't' && rows[cursor] !== undefined) {
-      const row = rows[cursor]!
-      transcriptLoad.current?.abort()
-      setTranscript({ id: row.id })
-      const controller = new AbortController()
-      transcriptLoad.current = controller
-      Promise.resolve().then(() => readTranscript(row.id, controller.signal)).then(
-        text => { if (!controller.signal.aborted) setTranscript({ id: row.id, text }) },
-        reason => { if (!controller.signal.aborted) setTranscript({ id: row.id, error: reason instanceof Error ? reason.message : String(reason) }) },
-      )
-      return
-    }
-    if (key.return && rows[cursor]?.resumable === true) return select(rows[cursor]!)
-  }, { isActive: transcript === undefined })
-  if (transcript !== undefined) {
-    return createElement(DocumentPanel, {
-      title: `transcript · ${transcript.id}`,
-      text: transcript.text,
-      error: transcript.error,
-      close: () => { transcriptLoad.current?.abort(); setTranscript(undefined) },
-    })
-  }
-  const pendingRow = deleteConfirmId === undefined ? undefined : rows.find(row => row.id === deleteConfirmId)
-  const toolbar = `[${focus === 0 ? '>' : ''}${options.sessions}] [${focus === 1 ? '>' : ''}${options.cwd} cwd] [${focus === 2 ? '>' : ''}${options.sort}] [${focus === 3 ? '>' : ''}${density}]`
-  return createElement(ListFrame, {
-    title: deleteConfirmId === undefined
-      ? `/resume${deleteMode ? ' — delete mode' : ''}${searching ? ' — searching' : ''} · ${toolbar}`
-      : `permanently delete ${pendingRow === undefined ? deleteConfirmId.slice(-12) : pendingRow.title ?? pendingRow.id}? this cannot be undone · subagent threads go too`,
-    rows: rows.map(row => ({
-      key: row.id,
-      disabled: !row.resumable,
-      text: `${row.subagent ? '↳' : '○'} ${row.title ?? row.id.slice(-12)}${density === 'comfortable' ? ` · ${formatRelativeTime(row.updatedAt ?? row.createdAt, now)} · ${row.workspace} · ${row.preset}` : ''}${row.live ? ' · live' : ''}${expanded === row.id ? ` · ${row.id} · ${row.cwd}${row.parent === undefined ? '' : ` · parent ${row.parent}`}` : ''}`,
-    })), cursor, loading, error, query: options.query, searching,
-    footer: 'tab/←→ filters · ↑↓/pg navigate · ctrl+f search · e details · t transcript · d delete · enter resume',
-  })
-}
-
-function DocumentPanel({ title, text, error, close }: {
-  title: string
-  text?: string
-  error?: string
-  close(): void
-}): ReactElement {
-  const stdout = useStdout().stdout
-  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
-  const [scroll, setScroll] = useState(0)
-  const lines = useMemo(() => text === undefined ? [] : textLines(text, viewport.contentColumns).map(line => line.segments.map(segment => segment.text).join('')), [text, viewport.contentColumns])
-  useInput((input, key) => {
-    if (key.escape || input === 'q' || input === 't') return close()
-    if (key.upArrow) return setScroll(value => Math.max(0, value - 1))
-    if (key.downArrow) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + 1))
-    if (key.pageUp) return setScroll(value => Math.max(0, value - Math.max(1, viewport.bodyRows - 1)))
-    if (key.pageDown) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + Math.max(1, viewport.bodyRows - 1)))
-    if (input === 'g') return setScroll(0)
-    if (input === 'G') return setScroll(Math.max(0, lines.length - viewport.bodyRows))
-  })
-  if (viewport.compact) return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('transcript · esc close', viewport.contentColumns))
-  const body = error !== undefined
-    ? [`error: ${singleLineText(error)}`]
-    : text === undefined
-      ? ['loading transcript…']
-      : lines.slice(scroll, scroll + viewport.bodyRows)
-  return createElement(
-    Box,
-    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
-    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns(singleLineText(title), viewport.contentColumns)),
-    ...body.map((line, index) => createElement(Text, { key: `${scroll}-${index}`, wrap: 'truncate-end' }, truncateColumns(line, viewport.contentColumns))),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`lines ${lines.length === 0 ? 0 : scroll + 1}-${Math.min(lines.length, scroll + viewport.bodyRows)}/${lines.length} · ↑↓/pg/g/G · t/esc close`, viewport.contentColumns)),
-  )
-}
-
-/**
- * The /history recall panel (Codex composer-history search, bounded): one
- * query line over the newest-first recall space, filtered by substring, with
- * arrow selection and enter to fill the composer. Editing the query restarts
- * from the newest match; Esc closes without touching the draft.
- */
-export function HistoryPanel({ entries, fill, close }: {
-  /** Newest-first recall entries (persistent + in-session, deduped). */
-  entries: readonly string[]
-  /** Accept one entry: its text plus its recall-space index (browsing resumes there). */
-  fill(text: string, index: number): void
-  close(): void
-}): ReactElement {
-  const [query, setQuery] = useState('')
-  const [cursor, setCursor] = useState(0)
-  const matches = query === ''
-    ? entries
-    : entries.filter(entry => entry.toLowerCase().includes(query.toLowerCase()))
-  useInput((input, key) => {
-    if (key.escape) return close()
-    if (key.return) {
-      const entry = matches[cursor]
-      if (entry !== undefined) fill(entry, entries.indexOf(entry))
-      return
-    }
-    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
-    if (key.downArrow) return setCursor(value => Math.min(matches.length - 1, value + 1))
-    if (input === 'g') return setCursor(0)
-    if (input === 'G') return setCursor(matches.length - 1)
-    if (key.backspace) {
-      setQuery(current => current.slice(0, -1))
-      setCursor(0)
-      return
-    }
-    if (input !== '' && !key.ctrl && !key.meta && !key.shift) {
-      setQuery(current => (current + input).slice(0, 120))
-      setCursor(0)
-    }
-  })
-  const stdout = useStdout().stdout
-  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
-  if (viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/history · esc close', viewport.contentColumns))
-  }
-  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
-  const bodyRows = Math.max(1, viewport.bodyRows - 1)
-  const offset = revealRow(0, cursor, matches.length, bodyRows)
-  const visible = matches.slice(offset, offset + bodyRows)
-  const header = query === ''
-    ? `/history · ${entries.length} prompts · type to filter`
-    : `/history · ${matches.length} of ${entries.length} match '${truncateColumns(singleLineText(query), viewport.contentColumns - 30)}'`
-  return createElement(
-    Box,
-    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
-    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns(header, viewport.contentColumns)),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`  filter ${query === '' ? '· type to search prompts' : '· ' + singleLineText(query)}, enter fills the composer`, viewport.contentColumns)),
-    ...(visible.length === 0
-      ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, truncateColumns('  no matching prompts', viewport.contentColumns))]
-      : visible.map((entry, index) => {
-        const absolute = offset + index
-        const selected = absolute === cursor
-        return createElement(
-          Text,
-          {
-            key: `history-${absolute}`,
-            color: selected ? inkColor(getPalette().brandBright) : undefined,
-            wrap: 'truncate-end',
-          },
-          truncateColumns((selected ? '› ' : '  ') + singleLineText(entry), viewport.contentColumns),
-        )
-      })),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ move · g/G ends · enter fill · esc close', viewport.contentColumns)),
-  )
-}
-
-/**
- * The /statusline picker (the Codex setup-view contract): one bounded list
- * of every status item with its enabled mark, arrow reordering, and a
- * live preview — the real status line under the composer updates as you
- * edit, so the panel itself carries no duplicate preview row.
- */
-export function StatuslinePanel({ enabled, change, close }: {
-  enabled: readonly StatusItemId[]
-  change(items: readonly StatusItemId[]): void
-  close(): void
-}): ReactElement {
-  // Working state: the full catalog in display order (enabled entries in
-  // their configured positions, disabled ones trailing canonically) plus
-  // the enabled set. Persisted shape is the enabled subsequence only.
-  const [order, setOrder] = useState<readonly StatusItemId[]>(() => {
-    const seen = new Set(enabled)
-    return [...enabled, ...DEFAULT_STATUSLINE_ITEMS.filter(id => !seen.has(id))]
-  })
-  const [on, setOn] = useState<ReadonlySet<StatusItemId>>(() => new Set(enabled))
-  const [cursor, setCursor] = useState(0)
-  const commit = (nextOrder: readonly StatusItemId[], nextOn: ReadonlySet<StatusItemId>): void => {
-    setOrder(nextOrder)
-    setOn(nextOn)
-    change(nextOrder.filter(id => nextOn.has(id)))
-  }
-  const move = (offset: number): void => {
-    const target = cursor + offset
-    if (target < 0 || target >= order.length) return
-    const next = [...order]
-    const [item] = next.splice(cursor, 1)
-    next.splice(target, 0, item!)
-    commit(next, on)
-    setCursor(target)
-  }
-  useInput((input, key) => {
-    if (key.escape || input === 'q' || key.return) return close()
-    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
-    if (key.downArrow) return setCursor(value => Math.min(order.length - 1, value + 1))
-    if (key.leftArrow) return move(-1)
-    if (key.rightArrow) return move(1)
-    if (input === 'g') return setCursor(0)
-    if (input === 'G') return setCursor(order.length - 1)
-    if (input === 'd') {
-      commit([...DEFAULT_STATUSLINE_ITEMS], new Set(DEFAULT_STATUSLINE_ITEMS))
-      setCursor(0)
-      return
-    }
-    if (input === ' ') {
-      const item = order[cursor]
-      if (item === undefined) return
-      const next = new Set(on)
-      if (next.has(item)) next.delete(item)
-      else next.add(item)
-      commit(order, next)
-    }
-  })
-  const stdout = useStdout().stdout
-  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
-  if (viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/statusline · esc close', viewport.contentColumns))
-  }
-  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
-  const bodyRows = Math.max(1, viewport.bodyRows - 1)
-  const offset = revealRow(0, cursor, order.length, bodyRows)
-  const visible = order.slice(offset, offset + bodyRows)
-  const meta = new Map(STATUS_ITEMS.map(item => [item.id, item]))
-  return createElement(
-    Box,
-    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
-    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns('/statusline · items apply to the live status line below', viewport.contentColumns)),
-    ...visible.map((id, index) => {
-      const absolute = offset + index
-      const selected = absolute === cursor
-      const info = meta.get(id)
-      return createElement(
-        Text,
-        {
-          key: id,
-          color: selected ? inkColor(getPalette().brandBright) : undefined,
-          dimColor: !on.has(id) || undefined,
-          wrap: 'truncate-end',
-        },
-        truncateColumns((selected ? '› ' : '  ') + (on.has(id) ? '● ' : '○ ') + (info?.label ?? id) + (info === undefined ? '' : ' · ' + info.description + ' · ' + info.side), viewport.contentColumns),
-      )
-    }),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ move · space toggle · ←→ reorder · d default · esc close', viewport.contentColumns)),
-  )
-}
-
-/**
- * The `/model` reasoning-effort stage (the Codex model → reasoning popup
- * contract): one bounded list over the selected model's adapter-advertised
- * effort levels — in the adapter's own display order, ids verbatim (the
- * kernel treats them as opaque and rejects anything else) — with the
- * effective effort and the model default marked. A model WITHOUT an
- * adapter-declared default leads with a "Default" (provider-default) row —
- * the web effort pane's first entry — so the user can clear a picked level
- * back to provider behavior. A model advertising no levels opens the same
- * stage with an explicit empty state (the web pane's "no levels" copy)
- * instead of a bare failure notice. Enter applies one level; Esc returns to
- * the model list without applying.
- */
-export function EffortPanel({ row, current, select, back }: {
-  /** The model row whose advertised levels this stage lists. */
-  row: ModelRow
-  /** Effective effort currently in force ('' when none), for the ● mark. */
-  current: string | undefined
-  /** Accept one advertised effort id, or '' for the provider default. */
-  select(effortId: string): void
-  /** Return to the model list without applying. */
-  back(): void
-}): ReactElement {
-  const advertised = row.reasoning?.efforts ?? []
-  const empty = row.reasoning === undefined || advertised.length === 0
-  // The provider-default row only exists when the adapter declares no default
-  // effort: with one, the default is an advertised level already in the list.
-  const hasDefaultRow = row.reasoning !== undefined && row.reasoning.defaultEffort === undefined
-  const rows = empty
-    ? [{ id: '', name: '' }]
-    : hasDefaultRow
-      ? [{ id: '', name: 'Default' }, ...advertised]
-      : advertised
-  // An absent or cleared effort is the Default row's current state.
-  const effective = current === undefined || current === '' ? '' : current
-  // The list opens ON the effective level (or the model's default row), so a
-  // quick re-pick never restarts the cursor from the top.
-  const wanted = effective === '' ? row.reasoning?.defaultEffort ?? '' : effective
-  const initialCursor = Math.max(0, rows.findIndex(effort => effort.id === wanted))
-  const [cursor, setCursor] = useState(initialCursor)
-  useEffect(() => {
-    if (rows.length === 0) {
-      if (cursor !== 0) setCursor(0)
-      return
-    }
-    if (cursor >= rows.length) setCursor(rows.length - 1)
-  }, [rows.length, cursor])
-  useInput((input, key) => {
-    if (key.escape || input === 'q') return back()
-    if (empty) return
-    if (input === 'g') {
-      setCursor(0)
-      return
-    }
-    if (input === 'G') {
-      setCursor(rows.length - 1)
-      return
-    }
-    if (key.upArrow) {
-      setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
-      return
-    }
-    if (key.downArrow) {
-      setCursor(cursor < rows.length - 1 ? cursor + 1 : 0)
-      return
-    }
-    if (key.return && rows[cursor] !== undefined) {
-      select(rows[cursor]!.id)
-    }
-  })
-  return createElement(ListFrame, {
-    title: `/model — effort for ${row.providerName} · ${row.modelName}`,
-    rows: empty
-      ? [{ key: 'empty', disabled: true, text: 'this model advertises no reasoning effort levels — the provider default applies' }]
-      : rows.map(effort => ({
-        key: effort.id,
-        text: `${effort.id === effective ? '●' : '○'} ${effort.name}${effort.id === row.reasoning?.defaultEffort ? ' · default' : ''}${effort.description === undefined ? '' : ` · ${effort.description}`}`,
-      })),
-    cursor,
-    loading: false,
-    query: '',
-    footer: empty ? 'esc back' : '↑↓ choose · enter apply · esc/q back',
-  })
-}
-
-/** One merged /agents row: live feed state or a persisted child session. */
-interface AgentsEntry {
-  readonly id: string
-  readonly label: string
-  readonly activity: string
-  readonly running: boolean
-  readonly done: boolean
-  readonly live: boolean
-}
-
-/**
- * The /agents panel (the Codex agent-picker contract, read-only): this
- * conversation's subagent conversations — live rows from the activity feed
- * first, persisted children the feed has not seen this process after — with
- * Enter/t opening the child's full transcript in the shared read-only
- * document view (the same projection the exporter uses).
- */
-export function AgentsPanel({ live, load, readTranscript, close }: {
-  /** Live feed rows (child sessions observed this process). */
-  live: readonly SubagentRow[]
-  /** Load this session's persisted child sessions by lineage. */
-  load(): Promise<readonly SessionRow[]>
-  /** Read one child session's full transcript as markdown. */
-  readTranscript(id: string, signal?: AbortSignal): Promise<string>
-  close(): void
-}): ReactElement {
-  const [dirRows, setDirRows] = useState<readonly SessionRow[] | undefined>(undefined)
-  const [error, setError] = useState<string>()
-  const [loading, setLoading] = useState(true)
-  const [cursor, setCursor] = useState(0)
-  const [transcript, setTranscript] = useState<{ id: string; text?: string; error?: string }>()
-  const transcriptLoad = useRef<AbortController>()
-  useEffect(() => () => transcriptLoad.current?.abort(), [])
-  const refresh = (): void => {
-    setLoading(true)
-    setError(undefined)
-    Promise.resolve().then(load).then(value => {
-      setDirRows(value)
-      setLoading(false)
-    }, reason => {
-      setError(reason instanceof Error ? reason.message : String(reason))
-      setLoading(false)
-    })
-  }
-  useEffect(refresh, [])
-  // Live feed rows first (they carry the running state), then persisted
-  // children only the directory knows — settled subagents from earlier turns.
-  const rows = useMemo<readonly AgentsEntry[]>(() => {
-    const seen = new Set(live.map(row => row.id))
-    const feedRows: AgentsEntry[] = live.map(row => ({
-      id: row.id,
-      label: row.label,
-      activity: row.activity,
-      running: row.state === 'running',
-      done: row.state === 'done',
-      live: true,
-    }))
-    const persisted: AgentsEntry[] = (dirRows ?? [])
-      .filter(row => !seen.has(row.id))
-      .map(row => ({
-        id: row.id,
-        label: row.title ?? row.id.slice(-12),
-        activity: row.workspace,
-        running: false,
-        done: !row.live,
-        live: row.live,
-      }))
-    return [...feedRows, ...persisted]
-  }, [live, dirRows])
-  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
-  const openTranscript = (): void => {
-    const row = rows[cursor]
-    if (row === undefined) return
-    transcriptLoad.current?.abort()
-    setTranscript({ id: row.id })
-    const controller = new AbortController()
-    transcriptLoad.current = controller
-    Promise.resolve().then(() => readTranscript(row.id, controller.signal)).then(
-      text => {
-        if (!controller.signal.aborted) setTranscript({ id: row.id, text })
-      },
-      reason => {
-        if (!controller.signal.aborted) setTranscript({ id: row.id, error: reason instanceof Error ? reason.message : String(reason) })
-      },
-    )
-  }
-  useInput((input, key) => {
-    if (key.escape || input === 'q') return close()
-    if (input === 'r') return refresh()
-    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : (value + rows.length - 1) % rows.length)
-    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : (value + 1) % rows.length)
-    if ((key.return || input === 't') && rows[cursor] !== undefined) return openTranscript()
-  }, { isActive: transcript === undefined })
-  if (transcript !== undefined) {
-    return createElement(DocumentPanel, {
-      title: `subagent · ${transcript.id.slice(-12)}`,
-      text: transcript.text,
-      error: transcript.error,
-      close: () => {
-        transcriptLoad.current?.abort()
-        setTranscript(undefined)
-      },
-    })
-  }
-  return createElement(ListFrame, {
-    title: `/agents · ${live.length} live · ${rows.length} total`,
-    rows: rows.map(row => ({
-      key: row.id,
-      text: `${row.running ? '●' : row.done ? '✓' : row.live ? '⏸' : '○'} ${row.label} · ${row.activity}${row.live ? ' · live' : ''}`,
-    })),
-    cursor,
-    loading,
-    ...error === undefined ? {} : { error },
-    query: '',
-    footer: '↑↓ choose · enter/t transcript · r refresh · esc close',
-  })
-}
-
-/**
- * The /subagent model panel: which model configuration delegated subagents
- * run on. The kernel seeds child agents from the parent's CREATE-TIME
- * AgentOptions, so a mid-session /model switch would otherwise leave them on
- * the launch-time route; the TUI mirrors the selection onto subagent-origin
- * requests (or an explicit override picked here) via an agent/request
- * listener. The leading "inherit" row restores follow-the-current-model
- * behavior; picking a model with several advertised efforts opens the same
- * effort stage /model uses. Effort overrides are not offered separately —
- * the kernel's AgentOptions has no effort channel for children, so the level
- * rides the selected model exactly as /model applies it.
- */
-export function SubagentPanel({ current, load, pick, inherit, close }: {
-  /** Display label of the override in force, '' when following the current model. */
-  current: string
-  load(): Promise<ModelDirectory>
-  /** Apply one model (with an advertised effort, when picked) as the override. */
-  pick(row: ModelRow, effortId?: string): void
-  /** Drop the override: subagents follow the current model again. */
-  inherit(): void
-  close(): void
-}): ReactElement {
-  const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
-  const [error, setError] = useState<string>()
-  const [loading, setLoading] = useState(true)
-  const [cursor, setCursor] = useState(0)
-  const [effortFor, setEffortFor] = useState<ModelRow | undefined>(undefined)
-  const refresh = (): void => {
-    setLoading(true)
-    setError(undefined)
-    Promise.resolve().then(load).then(value => {
-      setDirectory(value)
-      setLoading(false)
-    }, reason => {
-      setError(reason instanceof Error ? reason.message : String(reason))
-      setLoading(false)
-    })
-  }
-  useEffect(refresh, [])
-  const rows = useMemo(() => directory?.rows ?? [], [directory])
-  // The list opens on the override's own row (index 0 is the inherit row).
-  useEffect(() => {
-    if (current === '' || rows.length === 0) return
-    const index = rows.findIndex(row => current.startsWith(`${row.provider}/${row.model}`))
-    if (index >= 0) setCursor(index + 1)
-  }, [rows, current])
-  useEffect(() => setCursor(value => Math.min(value, rows.length)), [rows.length])
-  // Hooks stay unconditional: the effort stage below swaps the rendered
-  // subtree but must never skip the input hook (an early return here would
-  // change the hook count when the stage opens and closes).
-  useInput((input, key) => {
-    if (effortFor !== undefined) return
-    if (key.escape || input === 'q') return close()
-    if (input === 'r' && !loading) return refresh()
-    if (key.upArrow) return setCursor(value => (value + rows.length) % (rows.length + 1))
-    if (key.downArrow) return setCursor(value => (value + 1) % (rows.length + 1))
-    if (key.return) {
-      if (cursor === 0) return inherit()
-      const row = rows[cursor - 1]
-      if (row === undefined) return
-      if (row.reasoning !== undefined && row.reasoning.efforts.length > 1) {
-        setEffortFor(row)
-        return
-      }
-      const effortId = row.reasoning?.efforts.length === 1 ? row.reasoning.efforts[0]!.id : undefined
-      pick(row, effortId)
-    }
-  })
-  if (effortFor !== undefined) {
-    return createElement(EffortPanel, {
-      row: effortFor,
-      current: current === '' ? undefined : current.split('@')[1],
-      select: effortId => pick(effortFor, effortId),
-      back: () => setEffortFor(undefined),
-    })
-  }
-  return createElement(ListFrame, {
-    title: `/subagent — model for delegated agents${current === '' ? '' : ` · override ${current}`}`,
-    rows: [
-      { key: '__inherit__', text: `${current === '' ? '●' : '○'} inherit — follow the current model (/model switches apply)` },
-      ...rows.map(row => ({
-        key: `${row.provider}/${row.model}`,
-        text: `${current.startsWith(`${row.provider}/${row.model}`) ? '●' : '○'} ${row.providerName} · ${row.modelName}`,
-      })),
-    ],
-    cursor,
-    loading,
-    ...error === undefined ? {} : { error },
-    query: '',
-    footer: '↑↓ choose · enter apply · r refresh · esc close',
-  })
-}
+/** Bounded, composer-safe panels for preset, session, and plugin kernel views. */
+
+import { createElement, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import { Box, Text, useInput, useStdout } from 'ink'
+import type { ModelDirectory, ModelRow } from './models.ts'
+import type { SubagentRow } from './subagents.ts'
+import type { PermissionRow } from './permissions.ts'
+import type { PresetRow } from './presets.ts'
+import type { PluginRow } from './plugin-inventory.ts'
+import type { SessionDirectoryOptions, SessionRow } from './session-directory.ts'
+import { formatRelativeTime } from './session-directory.ts'
+import { panelViewport, revealRow } from './render/inspector.ts'
+import { markdownLines, textLines, type LineStyle, type StyledLine } from './render/lines.ts'
+import { deleteLastGrapheme } from './render/editor.ts'
+import { stripPasteMarkers } from './keyboard.ts'
+import { DEFAULT_STATUSLINE_ITEMS, STATUS_ITEMS, type StatusItemId } from './render/status.ts'
+import { singleLineText, truncateColumns } from './render/text.ts'
+import { getPalette, inkColor } from './theme.ts'
+
+interface ListFrameProps {
+  readonly title: string
+  readonly rows: readonly { readonly key: string; readonly text: string; readonly disabled?: boolean }[]
+  readonly cursor: number
+  readonly loading: boolean
+  readonly error?: string
+  readonly query: string
+  /** Ctrl+F-gated search focus for this panel: typing edits the query only
+   * while true. `undefined` keeps the plain "type to filter" prompt (the
+   * panel filters by typing directly). */
+  readonly searching?: boolean
+  readonly footer: string
+}
+
+/** True for the Ctrl+F search-focus toggle. */
+function isSearchToggle(input: string, key: { ctrl?: boolean }): boolean {
+  return key.ctrl === true && input === 'f'
+}
+
+/** The search-state line: gated panels show only an ACTIVE filter (the ctrl+f
+ * toggle lives in the footer), direct-typing panels keep the plain prompt. */
+function searchLine(searching: boolean | undefined, query: string): string {
+  if (searching === true) return `search: ${query === '' ? 'type to filter · esc stops' : query}`
+  if (searching === false) return query === '' ? '' : `search: ${query}`
+  return `search: ${query === '' ? 'type to filter' : query}`
+}
+
+function ListFrame(props: ListFrameProps): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(singleLineText(`${props.title} · esc close`), viewport.contentColumns))
+  }
+  const stateRows = props.loading
+    ? [{ key: 'loading', text: '  loading…' }]
+    : props.error !== undefined
+      ? [{ key: 'error', text: `  ${singleLineText(props.error)}` }]
+      : props.rows.length === 0
+        ? [{ key: 'empty', text: '  no matching entries' }]
+        : props.rows
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, props.cursor, stateRows.length, bodyRows)
+  const visible = stateRows.slice(offset, offset + bodyRows)
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns(singleLineText(props.title), viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(singleLineText(searchLine(props.searching, props.query)), viewport.contentColumns)),
+    ...visible.map((row, index) => {
+      const absolute = offset + index
+      const selected = !props.loading && props.error === undefined && props.rows.length > 0 && absolute === props.cursor
+      return createElement(Text, {
+        key: row.key,
+        color: selected ? inkColor(getPalette().brandBright) : row.disabled ? inkColor(getPalette().dim) : undefined,
+        dimColor: row.disabled,
+        wrap: 'truncate-end',
+      }, truncateColumns(`${selected ? '› ' : '  '}${singleLineText(row.text)}`, viewport.contentColumns))
+    }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(singleLineText(props.footer), viewport.contentColumns)),
+  )
+}
+
+/**
+ * Apply one keystroke to a panel search query. IME commits arrive as one
+ * multi-character chunk, so the whole printable run is appended; paste
+ * markers are stripped and control-laden chunks are ignored.
+ */
+export function editQuery(query: string, input: string, key: { backspace?: boolean; delete?: boolean }): string | undefined {
+  if (key.backspace || key.delete) return deleteLastGrapheme(query)
+  const text = stripPasteMarkers(input)
+  if (text !== '' && !/[\u0000-\u001f\u007f]/u.test(text)) return query + text
+  return undefined
+}
+
+export function ModePanel({ current, load, select, close }: {
+  current: string
+  load(): Promise<readonly PresetRow[]>
+  select(id: string): void
+  close(): void
+}): ReactElement {
+  const [rows, setRows] = useState<readonly PresetRow[]>([])
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string>()
+  const refresh = (): void => {
+    setLoading(true); setError(undefined)
+    Promise.resolve().then(load).then(value => { setRows(value); setLoading(false) }, reason => {
+      setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false)
+    })
+  }
+  useEffect(refresh, [])
+  const visible = useMemo(() => rows.filter(row => `${row.id} ${row.name ?? ''} ${row.description ?? ''}`.toLowerCase().includes(query.toLowerCase())), [rows, query])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, visible.length - 1))), [visible.length])
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (input === 'r' && query === '') return refresh()
+    if (key.upArrow) return setCursor(value => visible.length === 0 ? 0 : (value + visible.length - 1) % visible.length)
+    if (key.downArrow) return setCursor(value => visible.length === 0 ? 0 : (value + 1) % visible.length)
+    if (key.return && visible[cursor]?.broken === undefined) return select(visible[cursor]!.id)
+    const next = editQuery(query, input, key)
+    if (next !== undefined) { setQuery(next); setCursor(0) }
+  })
+  return createElement(ListFrame, {
+    title: `/mode · current ${current}`,
+    rows: visible.map(row => ({ key: row.id, disabled: row.broken !== undefined, text: `${row.id === current ? '●' : '○'} ${row.name ?? row.id} · ${row.description ?? row.trust}${row.broken === undefined ? '' : ` · broken: ${row.broken}`}` })),
+    cursor, loading, error, query, footer: '↑↓ choose · enter switch · r refresh · esc close',
+  })
+}
+
+export function PermissionPanel({ current, load, select, close }: {
+  current: string
+  load(): Promise<readonly PermissionRow[]>
+  select(id: string): void
+  close(): void
+}): ReactElement {
+  const [rows, setRows] = useState<readonly PermissionRow[]>([])
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string>()
+  const refresh = (): void => {
+    setLoading(true); setError(undefined)
+    Promise.resolve().then(load).then(value => { setRows(value); setLoading(false) }, reason => {
+      setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false)
+    })
+  }
+  useEffect(refresh, [])
+  const visible = useMemo(() => rows.filter(row => `${row.id} ${row.description ?? ''}`.toLowerCase().includes(query.toLowerCase())), [rows, query])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, visible.length - 1))), [visible.length])
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (input === 'r' && query === '') return refresh()
+    if (key.upArrow) return setCursor(value => visible.length === 0 ? 0 : (value + visible.length - 1) % visible.length)
+    if (key.downArrow) return setCursor(value => visible.length === 0 ? 0 : (value + 1) % visible.length)
+    if (key.return && visible[cursor] !== undefined) return select(visible[cursor]!.id)
+    const next = editQuery(query, input, key)
+    if (next !== undefined) { setQuery(next); setCursor(0) }
+  })
+  return createElement(ListFrame, {
+    title: `/permission · current ${current}`,
+    rows: visible.map(row => ({ key: row.id, text: `${row.id === current ? '●' : '○'} ${row.id}${row.description === undefined ? '' : ` · ${row.description}`}` })),
+    cursor, loading, error, query, footer: '↑↓ choose · enter select · r refresh · esc close',
+  })
+}
+
+export function PluginPanel({ load, close, initialQuery = '' }: { load(): readonly PluginRow[]; close(): void; initialQuery?: string }): ReactElement {
+  const [epoch, setEpoch] = useState(0)
+  const [query, setQuery] = useState(initialQuery)
+  const [cursor, setCursor] = useState(0)
+  const [expanded, setExpanded] = useState(false)
+  const rows = useMemo(() => load().filter(row => `${row.entryId} ${row.moduleName} ${row.phase ?? ''}`.toLowerCase().includes(query.toLowerCase())), [epoch, query])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (input === 'r' && query === '') return setEpoch(value => value + 1)
+    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : (value + rows.length - 1) % rows.length)
+    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : (value + 1) % rows.length)
+    if (key.return) return setExpanded(value => !value)
+    const next = editQuery(query, input, key)
+    if (next !== undefined) { setQuery(next); setCursor(0) }
+  })
+  return createElement(ListFrame, {
+    title: '/plugin · loader inspector',
+    rows: rows.map((row, index) => ({
+      key: row.entryId,
+      disabled: !row.enabled,
+      text: `${row.enabled ? '●' : '○'} ${row.entryId} · ${row.phase ?? 'not mounted'}${expanded && index === cursor ? ` · ${row.moduleName}` : ''}`,
+    })), cursor, loading: false, query, footer: '↑↓ inspect · enter details · r refresh · esc close',
+  })
+}
+
+/** One background job snapshot for the /jobs panel (the registry's read-only view). */
+export interface JobRow {
+  /** The registry-issued id (`<kind>-N`). */
+  readonly id: string
+  /** Producer kind (bash, subagent, …). */
+  readonly kind: string
+  /** One-line model-facing label (the command; the delegation description). */
+  readonly label: string
+  /** Lifecycle state. */
+  readonly status: 'running' | 'stopping' | 'completed' | 'killed' | 'failed'
+  /** Kind-specific status detail once the producer supplied one. */
+  readonly detail?: string
+  /** Epoch ms when the job was registered. */
+  readonly startedAt: number
+  /** Epoch ms when the job settled; absent while running/stopping. */
+  readonly finishedAt?: number
+}
+
+/** Web TurnStatus elapsed format: `45s` under a minute, `2m03s` beyond. */
+export 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`
+}
+
+/** Status glyph per job lifecycle state. */
+const JOB_MARK: Record<JobRow['status'], string> = {
+  running: '●',
+  stopping: '⏸',
+  completed: '✓',
+  killed: '⊘',
+  failed: '✗',
+}
+
+/**
+ * The read-only background-job panel: caller-owned and unowned jobs from the
+ * host `jobs` registry in registration order, with a local second-hand while
+ * the panel is open (elapsed clocks advance and the snapshot re-reads; the
+ * interval dies with the panel). Cancel stays upstream-only; an absent
+ * registry renders as the plain empty state (a harmless missing service).
+ */
+export function JobsPanel({ load, close }: { load(): readonly JobRow[]; close(): void }): ReactElement {
+  const [, setRefresh] = useState(0)
+  const [cursor, setCursor] = useState(0)
+  const [, setTick] = useState(0)
+  useEffect(() => {
+    const id = setInterval(() => setTick(value => value + 1), 1_000)
+    return () => clearInterval(id)
+  }, [])
+  const rows = load()
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (input === 'r') return setRefresh(value => value + 1)
+    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : (value + rows.length - 1) % rows.length)
+    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : (value + 1) % rows.length)
+  })
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
+  return createElement(ListFrame, {
+    title: `/jobs · background tasks · ${rows.length}`,
+    rows: rows.map(row => ({
+      key: row.id,
+      text: `${JOB_MARK[row.status]} ${row.id} · ${singleLineText(row.label)} · ${runClock((row.finishedAt ?? Date.now()) - row.startedAt)}${row.detail === undefined ? '' : ` · ${singleLineText(row.detail)}`}`,
+    })),
+    cursor, loading: false, query: '', searching: false, footer: '↑↓ inspect · r refresh · esc close',
+  })
+}
+
+export function ResumePanel({ currentCwd, load, readTranscript, select, requestDelete, deleteConfirmId, reloadToken = 0, deleteMode = false, close }: {
+  currentCwd: string
+  load(options: SessionDirectoryOptions, signal?: AbortSignal): Promise<readonly SessionRow[]>
+  readTranscript(id: string, signal?: AbortSignal): Promise<string>
+  select(row: SessionRow): void
+  /** Arm the composer-based delete confirm for one row (App owns the keys). */
+  requestDelete?(row: SessionRow): void
+  /** The row id awaiting y/n in the composer, when any (App-owned). */
+  deleteConfirmId?: string
+  /** Bump to reload the listing (e.g. after a deletion). */
+  reloadToken?: number
+  /** Opened via /delete: hint-first delete mode. */
+  deleteMode?: boolean
+  close(): void
+}): ReactElement {
+  // Codex resume-picker default: the CURRENT directory's root sessions; the
+  // cwd filter widens to all only on request (the old default leaked every
+  // directory's sessions into what read as a current-directory view).
+  const [options, setOptions] = useState<SessionDirectoryOptions>({ sessions: 'roots', cwd: 'current', sort: 'newest', currentCwd, query: '' })
+  const [focus, setFocus] = useState(0)
+  const [density, setDensity] = useState<'comfortable' | 'dense'>('comfortable')
+  const [rows, setRows] = useState<readonly SessionRow[]>([])
+  const [cursor, setCursor] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string>()
+  const [expanded, setExpanded] = useState<string>()
+  const [transcript, setTranscript] = useState<{ id: string; text?: string; error?: string }>()
+  /** Ctrl+F-gated search: typing filters only while searching (codex). */
+  const [searching, setSearching] = useState(false)
+  /** Reference clock pinned per row render, so relative times never drift mid-list. */
+  const now = useMemo(() => Date.now(), [rows, options])
+  const transcriptLoad = useRef<AbortController>()
+  useEffect(() => () => transcriptLoad.current?.abort(), [])
+  useEffect(() => {
+    const controller = new AbortController()
+    setLoading(true); setError(undefined)
+    Promise.resolve().then(() => load(options, controller.signal)).then(value => {
+      if (!controller.signal.aborted) { setRows(value); setLoading(false) }
+    }, reason => {
+      if (!controller.signal.aborted) { setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false) }
+    })
+    return () => controller.abort()
+  }, [options, reloadToken])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
+  const cycle = (): void => {
+    if (focus === 3) {
+      setDensity(current => current === 'comfortable' ? 'dense' : 'comfortable')
+      return
+    }
+    setOptions(value => {
+      if (focus === 0) return { ...value, sessions: value.sessions === 'roots' ? 'all' : 'roots' }
+      if (focus === 1) return { ...value, cwd: value.cwd === 'all' ? 'current' : 'all' }
+      return { ...value, sort: value.sort === 'newest' ? 'oldest' : 'newest' }
+    })
+  }
+  useInput((input, key) => {
+    // While a deletion awaits y/n, the COMPOSER owns every key (App routes
+    // them); the panel yields so y/n cannot be handled twice.
+    if (deleteConfirmId !== undefined) return
+    if (key.escape) {
+      if (searching) { setSearching(false); return }
+      return close()
+    }
+    if (isSearchToggle(input, key)) { setSearching(current => !current); return }
+    if (searching) {
+      if (key.return) { setSearching(false); return }
+      const next = editQuery(options.query, input, key)
+      if (next !== undefined) { setOptions(value => ({ ...value, query: next })); setCursor(0) }
+      return
+    }
+    if (input === 'q') return close()
+    if (key.tab) return setFocus(value => (value + (key.shift ? 3 : 1)) % 4)
+    if (key.leftArrow) return cycle()
+    if (key.rightArrow) return cycle()
+    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : Math.min(rows.length - 1, value + 1))
+    if (key.pageUp) return setCursor(value => Math.max(0, value - 8))
+    if (key.pageDown) return setCursor(value => Math.min(rows.length - 1, value + 8))
+    if (input === 'g') return setCursor(0)
+    if (input === 'G') return setCursor(Math.max(0, rows.length - 1))
+    if (input === 'd' && rows[cursor] !== undefined && requestDelete !== undefined) return requestDelete(rows[cursor]!)
+    if (input === 'e' && rows[cursor] !== undefined) {
+      return setExpanded(value => value === rows[cursor]!.id ? undefined : rows[cursor]!.id)
+    }
+    if (input === 't' && rows[cursor] !== undefined) {
+      const row = rows[cursor]!
+      transcriptLoad.current?.abort()
+      setTranscript({ id: row.id })
+      const controller = new AbortController()
+      transcriptLoad.current = controller
+      Promise.resolve().then(() => readTranscript(row.id, controller.signal)).then(
+        text => { if (!controller.signal.aborted) setTranscript({ id: row.id, text }) },
+        reason => { if (!controller.signal.aborted) setTranscript({ id: row.id, error: reason instanceof Error ? reason.message : String(reason) }) },
+      )
+      return
+    }
+    if (key.return && rows[cursor]?.resumable === true) return select(rows[cursor]!)
+  }, { isActive: transcript === undefined })
+  if (transcript !== undefined) {
+    return createElement(DocumentPanel, {
+      title: `transcript · ${transcript.id}`,
+      text: transcript.text,
+      error: transcript.error,
+      close: () => { transcriptLoad.current?.abort(); setTranscript(undefined) },
+    })
+  }
+  const pendingRow = deleteConfirmId === undefined ? undefined : rows.find(row => row.id === deleteConfirmId)
+  const toolbar = `[${focus === 0 ? '>' : ''}${options.sessions}] [${focus === 1 ? '>' : ''}${options.cwd} cwd] [${focus === 2 ? '>' : ''}${options.sort}] [${focus === 3 ? '>' : ''}${density}]`
+  return createElement(ListFrame, {
+    title: deleteConfirmId === undefined
+      ? `/resume${deleteMode ? ' — delete mode' : ''}${searching ? ' — searching' : ''} · ${toolbar}`
+      : `permanently delete ${pendingRow === undefined ? deleteConfirmId.slice(-12) : pendingRow.title ?? pendingRow.id}? this cannot be undone · subagent threads go too`,
+    rows: rows.map(row => ({
+      key: row.id,
+      disabled: !row.resumable,
+      text: `${row.subagent ? '↳' : '○'} ${row.title ?? row.id.slice(-12)}${density === 'comfortable' ? ` · ${formatRelativeTime(row.updatedAt ?? row.createdAt, now)} · ${row.workspace} · ${row.preset}` : ''}${row.live ? ' · live' : ''}${expanded === row.id ? ` · ${row.id} · ${row.cwd}${row.parent === undefined ? '' : ` · parent ${row.parent}`}` : ''}`,
+    })), cursor, loading, error, query: options.query, searching,
+    footer: 'tab/←→ filters · ↑↓/pg navigate · ctrl+f search · e details · t transcript · d delete · enter resume',
+  })
+}
+
+function documentStyleProps(style: LineStyle): { color?: string; bold?: boolean; italic?: boolean; strikethrough?: boolean } {
+  switch (style) {
+    case 'accent':
+      return { color: inkColor(getPalette().brandBright) }
+    case 'accentBold':
+      return { color: inkColor(getPalette().brandBright), bold: true }
+    case 'code':
+      return { color: inkColor(getPalette().code) }
+    case 'dim':
+      return { color: inkColor(getPalette().dim) }
+    case 'bold':
+      return { bold: true }
+    case 'italic':
+      return { italic: true }
+    case 'boldItalic':
+      return { bold: true, italic: true }
+    case 'strike':
+      return { color: inkColor(getPalette().dim), strikethrough: true }
+    default:
+      return {}
+  }
+}
+
+function DocumentRows({ lines }: { lines: readonly StyledLine[] }): ReactElement {
+  return createElement(
+    Box,
+    { flexDirection: 'column' },
+    ...lines.map((line, index) => createElement(
+      Text,
+      { key: index, wrap: 'truncate-end' },
+      line.segments.length === 0
+        ? ' '
+        : line.segments.map((segment, at) => createElement(Text, { key: at, ...documentStyleProps(segment.style) }, segment.text)),
+    )),
+  )
+}
+
+function DocumentPanel({ title, text, error, close }: {
+  title: string
+  text?: string
+  error?: string
+  close(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [scroll, setScroll] = useState(0)
+  const lines = useMemo(() => text === undefined ? [] : markdownLines(text, viewport.contentColumns), [text, viewport.contentColumns])
+  useInput((input, key) => {
+    if (key.escape || input === 'q' || input === 't') return close()
+    if (key.upArrow) return setScroll(value => Math.max(0, value - 1))
+    if (key.downArrow) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + 1))
+    if (key.pageUp) return setScroll(value => Math.max(0, value - Math.max(1, viewport.bodyRows - 1)))
+    if (key.pageDown) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + Math.max(1, viewport.bodyRows - 1)))
+    if (input === 'g') return setScroll(0)
+    if (input === 'G') return setScroll(Math.max(0, lines.length - viewport.bodyRows))
+  })
+  if (viewport.compact) return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('transcript · esc close', viewport.contentColumns))
+  const body: readonly StyledLine[] = error !== undefined
+    ? textLines(`error: ${singleLineText(error)}`, viewport.contentColumns, 'error')
+    : text === undefined
+      ? textLines('loading transcript…', viewport.contentColumns, 'dim')
+      : lines.slice(scroll, scroll + viewport.bodyRows)
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns(singleLineText(title), viewport.contentColumns)),
+    createElement(DocumentRows, { lines: body }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`lines ${lines.length === 0 ? 0 : scroll + 1}-${Math.min(lines.length, scroll + viewport.bodyRows)}/${lines.length} · ↑↓/pg/g/G · t/esc close`, viewport.contentColumns)),
+  )
+}
+
+/**
+ * The /history recall panel (Codex composer-history search, bounded): one
+ * query line over the newest-first recall space, filtered by substring, with
+ * arrow selection and enter to fill the composer. Editing the query restarts
+ * from the newest match; Esc closes without touching the draft.
+ */
+export function HistoryPanel({ entries, fill, close }: {
+  /** Newest-first recall entries (persistent + in-session, deduped). */
+  entries: readonly string[]
+  /** Accept one entry: its text plus its recall-space index (browsing resumes there). */
+  fill(text: string, index: number): void
+  close(): void
+}): ReactElement {
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const matches = query === ''
+    ? entries
+    : entries.filter(entry => entry.toLowerCase().includes(query.toLowerCase()))
+  useInput((input, key) => {
+    if (key.escape) return close()
+    if (key.return) {
+      const entry = matches[cursor]
+      if (entry !== undefined) fill(entry, entries.indexOf(entry))
+      return
+    }
+    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => Math.min(matches.length - 1, value + 1))
+    if (input === 'g') return setCursor(0)
+    if (input === 'G') return setCursor(matches.length - 1)
+    if (key.backspace) {
+      setQuery(current => deleteLastGrapheme(current))
+      setCursor(0)
+      return
+    }
+    if (input !== '' && !key.ctrl && !key.meta && !key.shift) {
+      const text = stripPasteMarkers(input)
+      if (text !== '') {
+        setQuery(current => (current + text).slice(0, 120))
+        setCursor(0)
+      }
+    }
+  })
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/history · esc close', viewport.contentColumns))
+  }
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, cursor, matches.length, bodyRows)
+  const visible = matches.slice(offset, offset + bodyRows)
+  const header = query === ''
+    ? `/history · ${entries.length} prompts · type to filter`
+    : `/history · ${matches.length} of ${entries.length} match '${truncateColumns(singleLineText(query), viewport.contentColumns - 30)}'`
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns(header, viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`  filter ${query === '' ? '· type to search prompts' : '· ' + singleLineText(query)}, enter fills the composer`, viewport.contentColumns)),
+    ...(visible.length === 0
+      ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, truncateColumns('  no matching prompts', viewport.contentColumns))]
+      : visible.map((entry, index) => {
+        const absolute = offset + index
+        const selected = absolute === cursor
+        return createElement(
+          Text,
+          {
+            key: `history-${absolute}`,
+            color: selected ? inkColor(getPalette().brandBright) : undefined,
+            wrap: 'truncate-end',
+          },
+          truncateColumns((selected ? '› ' : '  ') + singleLineText(entry), viewport.contentColumns),
+        )
+      })),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ move · g/G ends · enter fill · esc close', viewport.contentColumns)),
+  )
+}
+
+/**
+ * The /statusline picker (the Codex setup-view contract): one bounded list
+ * of every status item with its enabled mark, arrow reordering, and a
+ * live preview — the real status line under the composer updates as you
+ * edit, so the panel itself carries no duplicate preview row.
+ */
+export function StatuslinePanel({ enabled, change, close }: {
+  enabled: readonly StatusItemId[]
+  change(items: readonly StatusItemId[]): void
+  close(): void
+}): ReactElement {
+  // Working state: the full catalog in display order (enabled entries in
+  // their configured positions, disabled ones trailing canonically) plus
+  // the enabled set. Persisted shape is the enabled subsequence only.
+  const [order, setOrder] = useState<readonly StatusItemId[]>(() => {
+    const seen = new Set(enabled)
+    return [...enabled, ...DEFAULT_STATUSLINE_ITEMS.filter(id => !seen.has(id))]
+  })
+  const [on, setOn] = useState<ReadonlySet<StatusItemId>>(() => new Set(enabled))
+  const [cursor, setCursor] = useState(0)
+  const commit = (nextOrder: readonly StatusItemId[], nextOn: ReadonlySet<StatusItemId>): void => {
+    setOrder(nextOrder)
+    setOn(nextOn)
+    change(nextOrder.filter(id => nextOn.has(id)))
+  }
+  const move = (offset: number): void => {
+    const target = cursor + offset
+    if (target < 0 || target >= order.length) return
+    const next = [...order]
+    const [item] = next.splice(cursor, 1)
+    next.splice(target, 0, item!)
+    commit(next, on)
+    setCursor(target)
+  }
+  useInput((input, key) => {
+    if (key.escape || input === 'q' || key.return) return close()
+    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => Math.min(order.length - 1, value + 1))
+    if (key.leftArrow) return move(-1)
+    if (key.rightArrow) return move(1)
+    if (input === 'g') return setCursor(0)
+    if (input === 'G') return setCursor(order.length - 1)
+    if (input === 'd') {
+      commit([...DEFAULT_STATUSLINE_ITEMS], new Set(DEFAULT_STATUSLINE_ITEMS))
+      setCursor(0)
+      return
+    }
+    if (input === ' ') {
+      const item = order[cursor]
+      if (item === undefined) return
+      const next = new Set(on)
+      if (next.has(item)) next.delete(item)
+      else next.add(item)
+      commit(order, next)
+    }
+  })
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/statusline · esc close', viewport.contentColumns))
+  }
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, cursor, order.length, bodyRows)
+  const visible = order.slice(offset, offset + bodyRows)
+  const meta = new Map(STATUS_ITEMS.map(item => [item.id, item]))
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns('/statusline · items apply to the live status line below', viewport.contentColumns)),
+    ...visible.map((id, index) => {
+      const absolute = offset + index
+      const selected = absolute === cursor
+      const info = meta.get(id)
+      return createElement(
+        Text,
+        {
+          key: id,
+          color: selected ? inkColor(getPalette().brandBright) : undefined,
+          dimColor: !on.has(id) || undefined,
+          wrap: 'truncate-end',
+        },
+        truncateColumns((selected ? '› ' : '  ') + (on.has(id) ? '● ' : '○ ') + (info?.label ?? id) + (info === undefined ? '' : ' · ' + info.description + ' · ' + info.side), viewport.contentColumns),
+      )
+    }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ move · space toggle · ←→ reorder · d default · esc close', viewport.contentColumns)),
+  )
+}
+
+/**
+ * The `/model` reasoning-effort stage (the Codex model → reasoning popup
+ * contract): one bounded list over the selected model's adapter-advertised
+ * effort levels — in the adapter's own display order, ids verbatim (the
+ * kernel treats them as opaque and rejects anything else) — with the
+ * effective effort and the model default marked. A model WITHOUT an
+ * adapter-declared default leads with a "Default" (provider-default) row —
+ * the web effort pane's first entry — so the user can clear a picked level
+ * back to provider behavior. A model advertising no levels opens the same
+ * stage with an explicit empty state (the web pane's "no levels" copy)
+ * instead of a bare failure notice. Enter applies one level; Esc returns to
+ * the model list without applying.
+ */
+export function EffortPanel({ row, current, select, back }: {
+  /** The model row whose advertised levels this stage lists. */
+  row: ModelRow
+  /** Effective effort currently in force ('' when none), for the ● mark. */
+  current: string | undefined
+  /** Accept one advertised effort id, or '' for the provider default. */
+  select(effortId: string): void
+  /** Return to the model list without applying. */
+  back(): void
+}): ReactElement {
+  const advertised = row.reasoning?.efforts ?? []
+  const empty = row.reasoning === undefined || advertised.length === 0
+  // The provider-default row only exists when the adapter declares no default
+  // effort: with one, the default is an advertised level already in the list.
+  const hasDefaultRow = row.reasoning !== undefined && row.reasoning.defaultEffort === undefined
+  const rows = empty
+    ? [{ id: '', name: '' }]
+    : hasDefaultRow
+      ? [{ id: '', name: 'Default' }, ...advertised]
+      : advertised
+  // An absent or cleared effort is the Default row's current state.
+  const effective = current === undefined || current === '' ? '' : current
+  // The list opens ON the effective level (or the model's default row), so a
+  // quick re-pick never restarts the cursor from the top.
+  const wanted = effective === '' ? row.reasoning?.defaultEffort ?? '' : effective
+  const initialCursor = Math.max(0, rows.findIndex(effort => effort.id === wanted))
+  const [cursor, setCursor] = useState(initialCursor)
+  useEffect(() => {
+    if (rows.length === 0) {
+      if (cursor !== 0) setCursor(0)
+      return
+    }
+    if (cursor >= rows.length) setCursor(rows.length - 1)
+  }, [rows.length, cursor])
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return back()
+    if (empty) return
+    if (input === 'g') {
+      setCursor(0)
+      return
+    }
+    if (input === 'G') {
+      setCursor(rows.length - 1)
+      return
+    }
+    if (key.upArrow) {
+      setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
+      return
+    }
+    if (key.downArrow) {
+      setCursor(cursor < rows.length - 1 ? cursor + 1 : 0)
+      return
+    }
+    if (key.return && rows[cursor] !== undefined) {
+      select(rows[cursor]!.id)
+    }
+  })
+  return createElement(ListFrame, {
+    title: `/model — effort for ${row.providerName} · ${row.modelName}`,
+    rows: empty
+      ? [{ key: 'empty', disabled: true, text: 'this model advertises no reasoning effort levels — the provider default applies' }]
+      : rows.map(effort => ({
+        key: effort.id,
+        text: `${effort.id === effective ? '●' : '○'} ${effort.name}${effort.id === row.reasoning?.defaultEffort ? ' · default' : ''}${effort.description === undefined ? '' : ` · ${effort.description}`}`,
+      })),
+    cursor,
+    loading: false,
+    query: '',
+    footer: empty ? 'esc back' : '↑↓ choose · enter apply · esc/q back',
+  })
+}
+
+/** One merged /agents row: live feed state or a persisted child session. */
+interface AgentsEntry {
+  readonly id: string
+  readonly label: string
+  readonly activity: string
+  readonly running: boolean
+  readonly done: boolean
+  readonly live: boolean
+}
+
+/**
+ * The /agents panel (the Codex agent-picker contract, read-only): this
+ * conversation's subagent conversations — live rows from the activity feed
+ * first, persisted children the feed has not seen this process after — with
+ * Enter/t opening the child's full transcript in the shared read-only
+ * document view (the same projection the exporter uses).
+ */
+export function AgentsPanel({ live, load, readTranscript, close }: {
+  /** Live feed rows (child sessions observed this process). */
+  live: readonly SubagentRow[]
+  /** Load this session's persisted child sessions by lineage. */
+  load(): Promise<readonly SessionRow[]>
+  /** Read one child session's full transcript as markdown. */
+  readTranscript(id: string, signal?: AbortSignal): Promise<string>
+  close(): void
+}): ReactElement {
+  const [dirRows, setDirRows] = useState<readonly SessionRow[] | undefined>(undefined)
+  const [error, setError] = useState<string>()
+  const [loading, setLoading] = useState(true)
+  const [cursor, setCursor] = useState(0)
+  const [transcript, setTranscript] = useState<{ id: string; text?: string; error?: string }>()
+  const transcriptLoad = useRef<AbortController>()
+  useEffect(() => () => transcriptLoad.current?.abort(), [])
+  const refresh = (): void => {
+    setLoading(true)
+    setError(undefined)
+    Promise.resolve().then(load).then(value => {
+      setDirRows(value)
+      setLoading(false)
+    }, reason => {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setLoading(false)
+    })
+  }
+  useEffect(refresh, [])
+  // Live feed rows first (they carry the running state), then persisted
+  // children only the directory knows — settled subagents from earlier turns.
+  const rows = useMemo<readonly AgentsEntry[]>(() => {
+    const seen = new Set(live.map(row => row.id))
+    const feedRows: AgentsEntry[] = live.map(row => ({
+      id: row.id,
+      label: row.label,
+      activity: row.activity,
+      running: row.state === 'running',
+      done: row.state === 'done',
+      live: true,
+    }))
+    const persisted: AgentsEntry[] = (dirRows ?? [])
+      .filter(row => !seen.has(row.id))
+      .map(row => ({
+        id: row.id,
+        label: row.title ?? row.id.slice(-12),
+        activity: row.workspace,
+        running: false,
+        done: !row.live,
+        live: row.live,
+      }))
+    return [...feedRows, ...persisted]
+  }, [live, dirRows])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
+  const openTranscript = (): void => {
+    const row = rows[cursor]
+    if (row === undefined) return
+    transcriptLoad.current?.abort()
+    setTranscript({ id: row.id })
+    const controller = new AbortController()
+    transcriptLoad.current = controller
+    Promise.resolve().then(() => readTranscript(row.id, controller.signal)).then(
+      text => {
+        if (!controller.signal.aborted) setTranscript({ id: row.id, text })
+      },
+      reason => {
+        if (!controller.signal.aborted) setTranscript({ id: row.id, error: reason instanceof Error ? reason.message : String(reason) })
+      },
+    )
+  }
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (input === 'r') return refresh()
+    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : (value + rows.length - 1) % rows.length)
+    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : (value + 1) % rows.length)
+    if ((key.return || input === 't') && rows[cursor] !== undefined) return openTranscript()
+  }, { isActive: transcript === undefined })
+  if (transcript !== undefined) {
+    return createElement(DocumentPanel, {
+      title: `subagent · ${transcript.id.slice(-12)}`,
+      text: transcript.text,
+      error: transcript.error,
+      close: () => {
+        transcriptLoad.current?.abort()
+        setTranscript(undefined)
+      },
+    })
+  }
+  return createElement(ListFrame, {
+    title: `/agents · ${live.length} live · ${rows.length} total`,
+    rows: rows.map(row => ({
+      key: row.id,
+      text: `${row.running ? '●' : row.done ? '✓' : row.live ? '⏸' : '○'} ${row.label} · ${row.activity}${row.live ? ' · live' : ''}`,
+    })),
+    cursor,
+    loading,
+    ...error === undefined ? {} : { error },
+    query: '',
+    footer: '↑↓ choose · enter/t transcript · r refresh · esc close',
+  })
+}
+
+/**
+ * The /subagent model panel: which model configuration delegated subagents
+ * run on. The kernel seeds child agents from the parent's CREATE-TIME
+ * AgentOptions, so a mid-session /model switch would otherwise leave them on
+ * the launch-time route; the TUI mirrors the selection onto subagent-origin
+ * requests (or an explicit override picked here) via an agent/request
+ * listener. The leading "inherit" row restores follow-the-current-model
+ * behavior; picking a model with several advertised efforts opens the same
+ * effort stage /model uses. Effort overrides are not offered separately —
+ * the kernel's AgentOptions has no effort channel for children, so the level
+ * rides the selected model exactly as /model applies it.
+ */
+export function SubagentPanel({ current, load, pick, inherit, close }: {
+  /** Display label of the override in force, '' when following the current model. */
+  current: string
+  load(): Promise<ModelDirectory>
+  /** Apply one model (with an advertised effort, when picked) as the override. */
+  pick(row: ModelRow, effortId?: string): void
+  /** Drop the override: subagents follow the current model again. */
+  inherit(): void
+  close(): void
+}): ReactElement {
+  const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
+  const [error, setError] = useState<string>()
+  const [loading, setLoading] = useState(true)
+  const [cursor, setCursor] = useState(0)
+  const [effortFor, setEffortFor] = useState<ModelRow | undefined>(undefined)
+  const refresh = (): void => {
+    setLoading(true)
+    setError(undefined)
+    Promise.resolve().then(load).then(value => {
+      setDirectory(value)
+      setLoading(false)
+    }, reason => {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setLoading(false)
+    })
+  }
+  useEffect(refresh, [])
+  const rows = useMemo(() => directory?.rows ?? [], [directory])
+  // The list opens on the override's own row (index 0 is the inherit row).
+  useEffect(() => {
+    if (current === '' || rows.length === 0) return
+    const index = rows.findIndex(row => current.startsWith(`${row.provider}/${row.model}`))
+    if (index >= 0) setCursor(index + 1)
+  }, [rows, current])
+  useEffect(() => setCursor(value => Math.min(value, rows.length)), [rows.length])
+  // Hooks stay unconditional: the effort stage below swaps the rendered
+  // subtree but must never skip the input hook (an early return here would
+  // change the hook count when the stage opens and closes).
+  useInput((input, key) => {
+    if (effortFor !== undefined) return
+    if (key.escape || input === 'q') return close()
+    if (input === 'r' && !loading) return refresh()
+    if (key.upArrow) return setCursor(value => (value + rows.length) % (rows.length + 1))
+    if (key.downArrow) return setCursor(value => (value + 1) % (rows.length + 1))
+    if (key.return) {
+      if (cursor === 0) return inherit()
+      const row = rows[cursor - 1]
+      if (row === undefined) return
+      if (row.reasoning !== undefined && row.reasoning.efforts.length > 1) {
+        setEffortFor(row)
+        return
+      }
+      const effortId = row.reasoning?.efforts.length === 1 ? row.reasoning.efforts[0]!.id : undefined
+      pick(row, effortId)
+    }
+  })
+  if (effortFor !== undefined) {
+    return createElement(EffortPanel, {
+      row: effortFor,
+      current: current === '' ? undefined : current.split('@')[1],
+      select: effortId => pick(effortFor, effortId),
+      back: () => setEffortFor(undefined),
+    })
+  }
+  return createElement(ListFrame, {
+    title: `/subagent — model for delegated agents${current === '' ? '' : ` · override ${current}`}`,
+    rows: [
+      { key: '__inherit__', text: `${current === '' ? '●' : '○'} inherit — follow the current model (/model switches apply)` },
+      ...rows.map(row => ({
+        key: `${row.provider}/${row.model}`,
+        text: `${current.startsWith(`${row.provider}/${row.model}`) ? '●' : '○'} ${row.providerName} · ${row.modelName}`,
+      })),
+    ],
+    cursor,
+    loading,
+    ...error === undefined ? {} : { error },
+    query: '',
+    footer: '↑↓ choose · enter apply · r refresh · esc close',
+  })
+}