dsh-code 1.0.7 → 1.2.0

package/src/kernel-panels.ts

@@ -10,12 +10,16 @@ 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 type { ReviewBranch, ReviewCommit, ReviewSelection } from './git-workflow.ts'
 import { panelViewport, revealRow } from './render/inspector.ts'
 import { markdownLines, textLines, type LineStyle, type StyledLine } from './render/lines.ts'
+import { usageLines, type UsageView } from './render/usage.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 { panelAccent } from './panel-accent.ts'
+import { t } from './i18n.ts'
 import { getPalette, inkColor } from './theme.ts'
 
 interface ListFrameProps {
@@ -40,9 +44,9 @@ function isSearchToggle(input: string, key: { ctrl?: boolean }): boolean {
 /** 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}`
+  if (searching === true) return query === '' ? t('panel.searchIdleStop') : `${t('panel.searchPrefix')}${query}`
+  if (searching === false) return query === '' ? '' : `${t('panel.searchPrefix')}${query}`
+  return query === '' ? t('panel.searchIdle') : `${t('panel.searchPrefix')}${query}`
 }
 
 function ListFrame(props: ListFrameProps): ReactElement {
@@ -72,10 +76,11 @@ function ListFrame(props: ListFrameProps): ReactElement {
   const bodyRows = Math.max(1, viewport.bodyRows - 1)
   const offset = revealRow(0, props.cursor, stateRows.length, bodyRows)
   const visible = stateRows.slice(offset, offset + bodyRows)
+  const accent = panelAccent('kernel-list', getPalette().dim, getPalette().brandBright)
   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)),
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), 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
@@ -105,9 +110,9 @@ export function editQuery(query: string, input: string, key: { backspace?: boole
 
 export function ModePanel({ current, load, select, close }: {
   current: string
-  load(): Promise<readonly PresetRow[]>
-  select(id: string): void
-  close(): void
+  load: () => Promise<readonly PresetRow[]>
+  select: (id: string) => void
+  close: () => void
 }): ReactElement {
   const [rows, setRows] = useState<readonly PresetRow[]>([])
   const [query, setQuery] = useState('')
@@ -133,22 +138,22 @@ export function ModePanel({ current, load, select, close }: {
     // Empty/loading/filtered-out lists have no row at the cursor: a bare
     // `?.broken === undefined` check passes on undefined and crashes the
     // process on the `!.id` access (PermissionPanel guards this correctly).
-    if (key.return && visible[cursor] !== undefined && visible[cursor]!.broken === undefined) return select(visible[cursor]!.id)
+    if (key.return && visible[cursor] !== undefined && 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}`,
+    title: t('panel.mode.title', { 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',
+    cursor, loading, error, query, footer: t('panel.footer.chooseSwitch'),
   })
 }
 
 export function PermissionPanel({ current, load, select, close }: {
   current: string
-  load(): Promise<readonly PermissionRow[]>
-  select(id: string): void
-  close(): void
+  load: () => Promise<readonly PermissionRow[]>
+  select: (id: string) => void
+  close: () => void
 }): ReactElement {
   const [rows, setRows] = useState<readonly PermissionRow[]>([])
   const [query, setQuery] = useState('')
@@ -171,18 +176,18 @@ export function PermissionPanel({ current, load, select, 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)
+    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}`,
+    title: t('panel.permission.title', { 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',
+    cursor, loading, error, query, footer: t('panel.footer.chooseSelect'),
   })
 }
 
-export function PluginPanel({ load, close, initialQuery = '' }: { load(): readonly PluginRow[]; close(): void; initialQuery?: string }): ReactElement {
+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)
@@ -201,12 +206,12 @@ export function PluginPanel({ load, close, initialQuery = '' }: { load(): readon
     if (next !== undefined) { setQuery(next); setCursor(0) }
   })
   return createElement(ListFrame, {
-    title: '/plugin · loader inspector',
+    title: t('panel.plugin.title'),
     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',
+    })), cursor, loading: false, query, footer: t('panel.footer.inspectDetails'),
   })
 }
 
@@ -252,7 +257,7 @@ const JOB_MARK: Record<JobRow['status'], string> = {
  * 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 {
+export function JobsPanel({ load, close }: { load: () => readonly JobRow[]; close: () => void }): ReactElement {
   const [, setRefresh] = useState(0)
   const [cursor, setCursor] = useState(0)
   const [, setTick] = useState(0)
@@ -269,29 +274,29 @@ export function JobsPanel({ load, close }: { load(): readonly JobRow[]; close():
   })
   useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
   return createElement(ListFrame, {
-    title: `/jobs · background tasks · ${rows.length}`,
+    title: t('panel.jobs.title', { count: 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',
+    cursor, loading: false, query: '', searching: false, footer: t('panel.footer.inspectRefresh'),
   })
 }
 
 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
+  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
+  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
+  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
@@ -358,12 +363,12 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
     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 === '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)
+      return setExpanded(value => value === rows[cursor].id ? undefined : rows[cursor].id)
     }
     if (input === 't' && rows[cursor] !== undefined) {
-      const row = rows[cursor]!
+      const row = rows[cursor]
       transcriptLoad.current?.abort()
       setTranscript({ id: row.id })
       const controller = new AbortController()
@@ -374,11 +379,11 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
       )
       return
     }
-    if (key.return && rows[cursor]?.resumable === true) return select(rows[cursor]!)
+    if (key.return && rows[cursor]?.resumable === true) return select(rows[cursor])
   }, { isActive: transcript === undefined })
   if (transcript !== undefined) {
     return createElement(DocumentPanel, {
-      title: `transcript · ${transcript.id}`,
+      title: t('panel.document.title', { id: transcript.id }),
       text: transcript.text,
       error: transcript.error,
       close: () => { transcriptLoad.current?.abort(); setTranscript(undefined) },
@@ -395,7 +400,7 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
       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',
+    footer: t('panel.footer.resume'),
   })
 }
 
@@ -440,7 +445,7 @@ function DocumentPanel({ title, text, error, close }: {
   title: string
   text?: string
   error?: string
-  close(): void
+  close: () => void
 }): ReactElement {
   const stdout = useStdout().stdout
   const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
@@ -455,18 +460,19 @@ function DocumentPanel({ title, text, error, close }: {
     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))
+  if (viewport.compact) return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('document.compact'), viewport.contentColumns))
   const body: readonly StyledLine[] = error !== undefined
     ? textLines(`error: ${singleLineText(error)}`, viewport.contentColumns, 'error')
     : text === undefined
-      ? textLines('loading transcript…', viewport.contentColumns, 'dim')
+      ? textLines(t('document.loading'), viewport.contentColumns, 'dim')
       : lines.slice(scroll, scroll + viewport.bodyRows)
+  const accent = panelAccent('kernel-transcript', getPalette().dim, getPalette().brandBright)
   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)),
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), 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)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('document.footer', { from: lines.length === 0 ? 0 : scroll + 1, to: Math.min(lines.length, scroll + viewport.bodyRows), total: lines.length }), viewport.contentColumns)),
   )
 }
 
@@ -480,8 +486,8 @@ 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
+  fill: (text: string, index: number) => void
+  close: () => void
 }): ReactElement {
   const [query, setQuery] = useState('')
   const [cursor, setCursor] = useState(0)
@@ -497,14 +503,18 @@ export function HistoryPanel({ entries, fill, close }: {
     }
     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) {
+    // g/G stay vim-style jumps only on an empty query (the /mode contract):
+    // mid-filter they are query text, so filters like 'Fix' or 'grep' survive.
+    if (input === 'g' && query === '') return setCursor(0)
+    if (input === 'G' && query === '') return setCursor(matches.length - 1)
+    if (key.backspace || key.delete) {
       setQuery(current => deleteLastGrapheme(current))
       setCursor(0)
       return
     }
-    if (input !== '' && !key.ctrl && !key.meta && !key.shift) {
+    // Ink reports single uppercase letters and shifted symbols ('!', '@')
+    // with key.shift set; only ctrl/meta mark real command input.
+    if (input !== '' && !key.ctrl && !key.meta) {
       const text = stripPasteMarkers(input)
       if (text !== '') {
         setQuery(current => (current + text).slice(0, 120))
@@ -516,21 +526,22 @@ export function HistoryPanel({ entries, fill, close }: {
   const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
   if (viewport.maxHeight === 0 || viewport.compact) {
     const picked = matches[cursor]
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/history · ' + (picked === undefined ? 'no matching prompts' : singleLineText(picked)) + ' · esc close', viewport.contentColumns))
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`/history · ${picked === undefined ? t('history.compact.none') : singleLineText(picked)} · ${t('panel.close')}`, viewport.contentColumns))
   }
   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)}'`
+    ? t('history.title.prompts', { count: entries.length })
+    : t('history.title.match', { matches: matches.length, count: entries.length, query: truncateColumns(singleLineText(query), Math.max(6, viewport.contentColumns - 34)) })
+  const accent = panelAccent('history', getPalette().dim, getPalette().brandBright)
   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)),
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(header, viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('history.filterHint', { state: query === '' ? t('history.filterEmpty') : t('history.filterQuery', { query: singleLineText(query) }) }), viewport.contentColumns)),
     ...(visible.length === 0
-      ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, truncateColumns('  no matching prompts', viewport.contentColumns))]
+      ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('history.empty'), viewport.contentColumns))]
       : visible.map((entry, index) => {
         const absolute = offset + index
         const selected = absolute === cursor
@@ -544,7 +555,313 @@ export function HistoryPanel({ entries, fill, close }: {
           truncateColumns((selected ? '› ' : '  ') + singleLineText(entry), viewport.contentColumns),
         )
       })),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ move · g/G ends · enter fill · esc close', viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('history.footer'), viewport.contentColumns)),
+  )
+}
+
+/**
+ * The /review candidate picker (Codex's preset popup): bare /review opens a
+ * four-way preset — review uncommitted changes, pick a base branch, pick a
+ * recent commit, or type a custom focus. Branch and commit phases are
+ * type-to-filter lists; every selection resolves to the same /review
+ * argument string the direct command accepts.
+ */
+export function ReviewPickerPanel({ loadBranches, loadCommits, choose, close }: {
+  loadBranches: (signal?: AbortSignal) => Promise<readonly ReviewBranch[]>
+  loadCommits: (signal?: AbortSignal) => Promise<readonly ReviewCommit[]>
+  /** Run the review for one picker selection. */
+  choose: (selection: ReviewSelection) => void
+  close: () => void
+}): ReactElement {
+  const [phase, setPhase] = useState<'preset' | 'branches' | 'commits' | 'custom'>('preset')
+  const [cursor, setCursor] = useState(0)
+  const [query, setQuery] = useState('')
+  const [rows, setRows] = useState<readonly (ReviewBranch | ReviewCommit)[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string>()
+  const loadRef = useRef<AbortController>()
+  const now = useMemo(() => Date.now(), [rows])
+
+  useEffect(() => {
+    if (phase !== 'branches' && phase !== 'commits') return undefined
+    loadRef.current?.abort()
+    const controller = new AbortController()
+    loadRef.current = controller
+    setLoading(true)
+    setError(undefined)
+    const load = phase === 'branches'
+      ? (signal?: AbortSignal) => loadBranches(signal) as Promise<readonly (ReviewBranch | ReviewCommit)[]>
+      : (signal?: AbortSignal) => loadCommits(signal) as Promise<readonly (ReviewBranch | ReviewCommit)[]>
+    void Promise.resolve().then(() => load(controller.signal)).then(list => {
+      if (controller.signal.aborted) return
+      setLoading(false)
+      setRows(list)
+      setCursor(0)
+    }, reason => {
+      if (controller.signal.aborted) return
+      setLoading(false)
+      setRows([])
+      setError(reason instanceof Error ? reason.message : String(reason))
+    })
+    return () => controller.abort()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [phase])
+
+  const filtered = useMemo(() => {
+    if (phase !== 'branches' && phase !== 'commits') return []
+    const needle = query.toLowerCase()
+    if (needle === '') return rows
+    return rows.filter(row => {
+      const hay = 'name' in row ? row.name : `${row.sha} ${row.title}`
+      return hay.toLowerCase().includes(needle)
+    })
+  }, [phase, rows, query])
+
+  const submit = (selection: ReviewSelection): void => {
+    choose(selection)
+  }
+
+  useInput((input, key) => {
+    if (key.escape || (input === 'q' && query === '' && phase !== 'custom')) {
+      if (phase !== 'preset') {
+        setPhase('preset')
+        setQuery('')
+        setCursor(0)
+        return
+      }
+      return close()
+    }
+    if (key.ctrl && input === 'c') return close()
+    if (phase === 'custom' || ((phase === 'branches' || phase === 'commits') && query !== '')) {
+      const next = editQuery(query, input, key)
+      if (next !== undefined) {
+        setQuery(next)
+        setCursor(0)
+        return
+      }
+    }
+    // The row budget per phase: the preset list is fixed at four rows, the
+    // branch/commit lists clamp to their filtered length.
+    const rowCount = phase === 'preset' ? 4 : filtered.length
+    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => Math.min(Math.max(0, rowCount - 1), value + 1))
+    if (key.return) {
+      if (phase === 'preset') {
+        if (cursor === 0) return submit({ kind: 'uncommitted' })
+        if (cursor === 1) return setPhase('branches')
+        if (cursor === 2) return setPhase('commits')
+        return setPhase('custom')
+      }
+      if (phase === 'branches' || phase === 'commits') {
+        const row = filtered[cursor]
+        if (row !== undefined) submit('name' in row ? { kind: 'base-branch', branch: row.name } : { kind: 'commit', sha: row.sha })
+        return
+      }
+      if (query.trim() !== '') submit({ kind: 'custom', instructions: query.trim() })
+      return
+    }
+  })
+
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  if (viewport.maxHeight === 0 || viewport.compact) {
+    const state = phase === 'preset' ? 'pick a review target' : loading ? 'loading…' : error !== undefined ? `error: ${error}` : `${filtered.length} candidates`
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`/review · ${state} · ${t('panel.close')}`, viewport.contentColumns))
+  }
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, cursor, phase === 'preset' ? 4 : filtered.length, bodyRows)
+  const header = phase === 'preset'
+    ? t('review.picker.title')
+    : phase === 'branches'
+      ? loading ? t('review.picker.loadingBranches') : error !== undefined ? t('search.compact.error', { message: truncateColumns(singleLineText(error), Math.max(6, viewport.contentColumns - 14)) }) : t('review.picker.branches', { filtered: filtered.length, total: rows.length })
+      : phase === 'commits'
+        ? loading ? t('review.picker.loadingCommits') : error !== undefined ? t('search.compact.error', { message: truncateColumns(singleLineText(error), Math.max(6, viewport.contentColumns - 14)) }) : t('review.picker.commits', { filtered: filtered.length, total: rows.length })
+        : t('review.picker.customHint')
+  const accent = panelAccent('review-picker', getPalette().dim, getPalette().brandBright)
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(header, viewport.contentColumns)),
+    ...(phase === 'preset'
+      ? [
+        t('review.picker.uncommitted'),
+        t('review.picker.branch'),
+        t('review.picker.commit'),
+        t('review.picker.custom'),
+      ].map((label, index) => {
+        const absolute = offset + index
+        const selected = absolute === cursor
+        return createElement(
+          Text,
+          { key: `preset-${index}`, color: selected ? inkColor(getPalette().brandBright) : undefined, wrap: 'truncate-end' },
+          truncateColumns(`${selected ? '› ' : '  '}${label}`, viewport.contentColumns),
+        )
+      })
+      : phase === 'custom'
+        ? [createElement(Text, { key: 'custom-input', dimColor: true, wrap: 'truncate-end' }, truncateColumns(`  ${query === '' ? t('review.picker.customHint') : singleLineText(query)}`, viewport.contentColumns))]
+        : filtered.length === 0
+          ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, truncateColumns(`  ${loading ? t('review.picker.loading') : error !== undefined ? t('review.picker.loadFailed') : query === '' ? t('review.picker.empty') : t('review.picker.noMatch')}`, viewport.contentColumns))]
+          : filtered.slice(offset, offset + bodyRows).map((row, index) => {
+            const absolute = offset + index
+            const selected = absolute === cursor
+            const label = 'name' in row ? row.name : `${row.sha.slice(0, 7)} · ${formatRelativeTime(row.at, now)} · ${row.title}`
+            return createElement(
+              Text,
+              { key: `row-${absolute}`, color: selected ? inkColor(getPalette().brandBright) : undefined, wrap: 'truncate-end' },
+              truncateColumns(`${selected ? '› ' : '  '}${singleLineText(label)}`, viewport.contentColumns),
+            )
+          })),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('review.picker.footer'), viewport.contentColumns)),
+  )
+}
+
+/** One cross-session full-text search hit mapped from the session-query engine. */
+export interface SearchRow {
+  /** Session id (Enter resumes it through the switch machinery). */
+  readonly id: string
+  /** Display label: session title or the short id form. */
+  readonly label: string
+  /** Secondary facts line (workspace · preset markers). */
+  readonly detail: string
+  /** Bounded plain-text excerpt around the strongest match. */
+  readonly snippet: string
+  /** Match timestamp (relative labels derive from it). */
+  readonly updatedAt: number
+  /** Whether the hit is a delegated subagent conversation (not resumable). */
+  readonly subagent: boolean
+  /** Whether Enter may switch into it. */
+  readonly resumable: boolean
+}
+
+/**
+ * The /search panel: full-text search over every persisted session through
+ * the in-process session-query engine (the same corpus the model's
+ * session_search tool reads). Type a query, Enter searches, Enter again
+ * resumes the hit; the query line edits like every kernel panel.
+ */
+export function SearchPanel({ load, select, initialQuery = '', close }: {
+  load: (query: string, signal?: AbortSignal) => Promise<readonly SearchRow[]>
+  select: (row: SearchRow) => void
+  initialQuery?: string
+  close: () => void
+}): ReactElement {
+  const [query, setQuery] = useState(initialQuery)
+  const [rows, setRows] = useState<readonly SearchRow[]>([])
+  const [cursor, setCursor] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string>()
+  const [searched, setSearched] = useState('')
+  const searchRef = useRef<AbortController>()
+  const run = (next: string): void => {
+    const trimmed = next.trim()
+    if (trimmed === '') return
+    searchRef.current?.abort()
+    const controller = new AbortController()
+    searchRef.current = controller
+    setLoading(true)
+    setError(undefined)
+    void Promise.resolve().then(() => load(trimmed, controller.signal)).then(hits => {
+      if (controller.signal.aborted) return
+      setLoading(false)
+      setRows(hits)
+      setCursor(0)
+      setSearched(next)
+    }, reason => {
+      if (controller.signal.aborted) return
+      setLoading(false)
+      // Stale results must not stay interactive under an error header: a
+      // later Enter re-runs the query instead of resuming an old hit.
+      setRows([])
+      setCursor(0)
+      setError(reason instanceof Error ? reason.message : String(reason))
+    })
+  }
+  // An /search <query> invocation searches immediately with its argument.
+  useEffect(() => {
+    if (initialQuery.trim() !== '') run(initialQuery)
+    return () => searchRef.current?.abort()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  useInput((input, key) => {
+    if (key.escape || (input === 'q' && query === '')) return close()
+    if (key.ctrl && input === 'c') return close()
+    if (key.backspace || key.delete) {
+      setQuery(current => deleteLastGrapheme(current))
+      setCursor(0)
+      return
+    }
+    const next = editQuery(query, input, key)
+    if (next !== undefined) {
+      setQuery(next)
+      setCursor(0)
+      return
+    }
+    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => Math.min(rows.length - 1, value + 1))
+    if (key.return) {
+      // A changed query searches; the SAME query re-runs when the previous
+      // pass failed or produced nothing (Enter is then the refresh key).
+      const stale = error !== undefined || rows.length === 0
+      if (query.trim() !== '' && (query.trim() !== searched.trim() || stale)) {
+        run(query)
+        return
+      }
+      // Non-resumable hits (subagent conversations) keep the panel open:
+      // Enter must not trade the visible results for a rejected switch.
+      const row = rows[cursor]
+      if (row !== undefined && row.resumable) select(row)
+      return
+    }
+  })
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const now = useMemo(() => Date.now(), [rows, searched])
+  if (viewport.maxHeight === 0 || viewport.compact) {
+    const state = loading ? 'searching…' : error !== undefined ? `error: ${error}` : rows.length === 0 ? 'no results yet' : `❯ ${rows[cursor]?.label ?? ''}`
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`/search · ${state} · ${t('panel.close')}`, viewport.contentColumns))
+  }
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, cursor, rows.length, bodyRows)
+  const visible = rows.slice(offset, offset + bodyRows)
+  const header = error !== undefined
+    ? t('search.compact.error', { message: truncateColumns(singleLineText(error), Math.max(6, viewport.contentColumns - 14)) })
+    : loading
+      ? t('search.compact.searching')
+      : searched === ''
+        ? t('search.title.type')
+        : rows.length === 1
+          ? t('search.title.hits', { count: rows.length, query: truncateColumns(singleLineText(searched), Math.max(6, viewport.contentColumns - 30)) })
+          : t('search.title.hitsPlural', { count: rows.length, query: truncateColumns(singleLineText(searched), Math.max(6, viewport.contentColumns - 30)) })
+  const accent = panelAccent('search', getPalette().dim, getPalette().brandBright)
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(header, viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('search.hint', { state: query === '' ? t('search.hintEmpty') : singleLineText(query) }), viewport.contentColumns)),
+    ...(visible.length === 0
+      ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, truncateColumns(searched === '' ? `  ${t('search.empty.idle')}` : `  ${t('search.empty.noHits', { loading: loading ? '…' : '' })}`, viewport.contentColumns))]
+      : visible.flatMap((row, index) => {
+        const absolute = offset + index
+        const selected = absolute === cursor
+        return [
+          createElement(
+            Text,
+            {
+              key: `search-${absolute}`,
+              color: selected ? inkColor(getPalette().brandBright) : undefined,
+              dimColor: row.subagent,
+              wrap: 'truncate-end',
+            },
+            truncateColumns(`${selected ? '› ' : '  '}${row.subagent ? '↳ ' : ''}${singleLineText(row.label)} · ${formatRelativeTime(row.updatedAt, now)}${row.detail === '' ? '' : ` · ${row.detail}`}${row.resumable ? '' : ' · read-only'}`, viewport.contentColumns),
+          ),
+          createElement(
+            Text,
+            { key: `search-snippet-${absolute}`, dimColor: true, wrap: 'truncate-end' },
+            truncateColumns(`  ⎿ ${singleLineText(row.snippet)}`, viewport.contentColumns),
+          ),
+        ]
+      })),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('search.footer'), viewport.contentColumns)),
   )
 }
 
@@ -556,8 +873,8 @@ export function HistoryPanel({ entries, fill, close }: {
  */
 export function StatuslinePanel({ enabled, change, close }: {
   enabled: readonly StatusItemId[]
-  change(items: readonly StatusItemId[]): void
-  close(): void
+  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
@@ -578,7 +895,7 @@ export function StatuslinePanel({ enabled, change, close }: {
     if (target < 0 || target >= order.length) return
     const next = [...order]
     const [item] = next.splice(cursor, 1)
-    next.splice(target, 0, item!)
+    next.splice(target, 0, item)
     commit(next, on)
     setCursor(target)
   }
@@ -607,16 +924,17 @@ export function StatuslinePanel({ enabled, change, close }: {
   const stdout = useStdout().stdout
   const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
   if (viewport.maxHeight === 0 || viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/statusline · esc close', viewport.contentColumns))
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('panel.statusline.compact'), viewport.contentColumns))
   }
   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]))
+  const accent = panelAccent('statusline', getPalette().dim, getPalette().brandBright)
   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)),
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(t('statusline.title'), viewport.contentColumns)),
     ...visible.map((id, index) => {
       const absolute = offset + index
       const selected = absolute === cursor
@@ -632,7 +950,7 @@ export function StatuslinePanel({ enabled, change, close }: {
         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)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('panel.footer.statusline'), viewport.contentColumns)),
   )
 }
 
@@ -655,11 +973,11 @@ export function EffortPanel({ row, current, select, back, onExit }: {
   /** 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
+  select: (effortId: string) => void
   /** Return to the model list without applying. */
-  back(): void
+  back: () => void
   /** Leave the whole /model flow (Ctrl+C). */
-  onExit(): void
+  onExit: () => void
 }): ReactElement {
   const advertised = row.reasoning?.efforts ?? []
   const empty = row.reasoning === undefined || advertised.length === 0
@@ -706,21 +1024,21 @@ export function EffortPanel({ row, current, select, back, onExit }: {
       return
     }
     if (key.return && rows[cursor] !== undefined) {
-      select(rows[cursor]!.id)
+      select(rows[cursor].id)
     }
   })
   return createElement(ListFrame, {
-    title: `/model — effort for ${row.providerName} · ${row.modelName}`,
+    title: t('panel.effort.title', { provider: row.providerName, model: row.modelName }),
     rows: empty
-      ? [{ key: 'empty', disabled: true, text: 'this model advertises no reasoning effort levels — the provider default applies' }]
+      ? [{ key: 'empty', disabled: true, text: t('panel.effort.empty') }]
       : rows.map(effort => ({
         key: effort.id,
-        text: `${effort.id === effective ? '●' : '○'} ${effort.name}${effort.id === row.reasoning?.defaultEffort ? ' · default' : ''}${effort.description === undefined ? '' : ` · ${effort.description}`}`,
+        text: `${effort.id === effective ? '●' : '○'} ${effort.name}${effort.id === row.reasoning?.defaultEffort ? ` · ${t('panel.default')}` : ''}${effort.description === undefined ? '' : ` · ${effort.description}`}`,
       })),
     cursor,
     loading: false,
     query: '',
-    footer: empty ? 'esc back' : '↑↓ choose · enter apply · esc/q back',
+    footer: empty ? t('panel.footer.effortEmpty') : t('panel.footer.effort'),
   })
 }
 
@@ -745,10 +1063,10 @@ 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[]>
+  load: () => Promise<readonly SessionRow[]>
   /** Read one child session's full transcript as markdown. */
-  readTranscript(id: string, signal?: AbortSignal): Promise<string>
-  close(): void
+  readTranscript: (id: string, signal?: AbortSignal) => Promise<string>
+  close: () => void
 }): ReactElement {
   const [dirRows, setDirRows] = useState<readonly SessionRow[] | undefined>(undefined)
   const [error, setError] = useState<string>()
@@ -819,7 +1137,7 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
   }, { isActive: transcript === undefined })
   if (transcript !== undefined) {
     return createElement(DocumentPanel, {
-      title: `subagent · ${transcript.id.slice(-12)}`,
+      title: t('panel.subagent.transcriptTitle', { id: transcript.id.slice(-12) }),
       text: transcript.text,
       error: transcript.error,
       close: () => {
@@ -829,7 +1147,7 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
     })
   }
   return createElement(ListFrame, {
-    title: `/agents · ${live.length} live · ${rows.length} total`,
+    title: t('panel.agents.title', { live: live.length, total: rows.length }),
     rows: rows.map(row => ({
       key: row.id,
       text: `${row.running ? '●' : row.done ? '✓' : row.live ? '⏸' : '○'} ${row.label} · ${row.activity}${row.live ? ' · live' : ''}`,
@@ -838,7 +1156,7 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
     loading,
     ...error === undefined ? {} : { error },
     query: '',
-    footer: '↑↓ choose · enter/t transcript · r refresh · esc close',
+    footer: t('panel.footer.agents'),
   })
 }
 
@@ -857,12 +1175,12 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
 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>
+  load: () => Promise<ModelDirectory>
   /** Apply one model (with an advertised effort, when picked) as the override. */
-  pick(row: ModelRow, effortId?: string): void
+  pick: (row: ModelRow, effortId?: string) => void
   /** Drop the override: subagents follow the current model again. */
-  inherit(): void
-  close(): void
+  inherit: () => void
+  close: () => void
 }): ReactElement {
   const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
   const [error, setError] = useState<string>()
@@ -906,7 +1224,7 @@ export function SubagentPanel({ current, load, pick, inherit, close }: {
         setEffortFor(row)
         return
       }
-      const effortId = row.reasoning?.efforts.length === 1 ? row.reasoning.efforts[0]!.id : undefined
+      const effortId = row.reasoning?.efforts.length === 1 ? row.reasoning.efforts[0].id : undefined
       pick(row, effortId)
     }
   })
@@ -920,9 +1238,9 @@ export function SubagentPanel({ current, load, pick, inherit, close }: {
     })
   }
   return createElement(ListFrame, {
-    title: `/subagent — model for delegated agents${current === '' ? '' : ` · override ${current}`}`,
+    title: `${t('panel.subagent.title')}${current === '' ? '' : t('panel.subagent.override', { value: current })}`,
     rows: [
-      { key: '__inherit__', text: `${current === '' ? '●' : '○'} inherit — follow the current model (/model switches apply)` },
+      { key: '__inherit__', text: `${current === '' ? '●' : '○'} ${t('panel.subagent.inherit')}` },
       ...rows.map(row => ({
         key: `${row.provider}/${row.model}`,
         text: `${current.startsWith(`${row.provider}/${row.model}`) ? '●' : '○'} ${row.providerName} · ${row.modelName}`,
@@ -932,7 +1250,7 @@ export function SubagentPanel({ current, load, pick, inherit, close }: {
     loading,
     ...error === undefined ? {} : { error },
     query: '',
-    footer: '↑↓ choose · enter apply · r refresh · esc close',
+    footer: t('panel.footer.subagent'),
   })
 }
 
@@ -981,7 +1299,7 @@ export function scheduleDisplayRows(rows: readonly ScheduleRow[], now: number):
     }))
 }
 
-export function SchedulePanel({ rows, close }: { rows(): readonly ScheduleRow[]; close(): void }): ReactElement {
+export function SchedulePanel({ rows, close }: { rows: () => readonly ScheduleRow[]; close: () => void }): ReactElement {
   const [, setTick] = useState(0)
   useEffect(() => {
     const id = setInterval(() => setTick(value => value + 1), 1_000)
@@ -994,23 +1312,87 @@ export function SchedulePanel({ rows, close }: { rows(): readonly ScheduleRow[];
     if (key.escape || input === 'q') return close()
   })
   if (viewport.maxHeight === 0 || viewport.compact) {
-    const summary = display.length === 0 ? 'no active reminders' : singleLineText(display[0]!.text)
+    const summary = display.length === 0 ? t('panel.schedule.none') : singleLineText(display[0].text)
     return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`/schedule · ${summary}`, viewport.contentColumns))
   }
   const budget = Math.max(1, viewport.bodyRows)
   const visible = display.slice(0, budget)
   const hidden = display.length - visible.length
+  const accent = panelAccent('schedule', getPalette().dim, getPalette().brandBright)
   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(`/schedule · ${display.length} active reminder${display.length === 1 ? '' : 's'}`, viewport.contentColumns)),
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(display.length === 1 ? t('schedule.title', { count: display.length }) : t('schedule.titlePlural', { count: display.length }), viewport.contentColumns)),
     ...(display.length === 0
-      ? [createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('  no active reminders — the model creates them with schedule_create', viewport.contentColumns))]
+      ? [createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`  ${t('schedule.empty')}`, viewport.contentColumns))]
       : visible.map(row => createElement(Text, {
         key: row.key,
         color: row.tone === 'error' ? inkColor(getPalette().error) : undefined,
         wrap: 'truncate-end',
       }, truncateColumns(`  ${singleLineText(row.text)}`, viewport.contentColumns)))),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`esc/q close${hidden > 0 ? ` · +${hidden} more` : ''} · the model schedules via schedule_create`, viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('panel.schedule.footer', { more: hidden > 0 ? t('panel.schedule.more', { count: hidden }) : '' }), viewport.contentColumns)),
+  )
+}
+
+/**
+ * The /usage panel: the session's provider-reported token totals, its context
+ * pressure and estimated composition, and the exact per-turn accounting, in
+ * one bounded scrollable surface. Read-only — Esc or q closes it.
+ */
+export function UsagePanel({ load, close }: {
+  /** Read the current session's usage blocks from the mounted projections. */
+  load: () => Promise<UsageView>
+  close: () => void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [scroll, setScroll] = useState(0)
+  const [view, setView] = useState<UsageView>()
+  const [error, setError] = useState<string>()
+  // The panel opens on the loading row and swaps in the numbers when the
+  // loader settles: materializing the projection units folds the whole log,
+  // and that must not run inside the keystroke that opened the panel.
+  useEffect(() => {
+    let live = true
+    Promise.resolve().then(load).then(
+      loaded => {
+        if (live) setView(loaded)
+      },
+      reason => {
+        if (live) setError(reason instanceof Error ? reason.message : String(reason))
+      },
+    )
+    return () => {
+      live = false
+    }
+  }, [load])
+  const lines = useMemo(
+    () => view === undefined ? [] : usageLines(view, viewport.contentColumns),
+    [view, viewport.contentColumns],
+  )
+  useInput((input, key) => {
+    if (key.escape || input === 'q') 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(t('panel.usage.compact'), viewport.contentColumns))
+  }
+  const body: readonly StyledLine[] = error !== undefined
+    ? textLines(`error: ${singleLineText(error)}`, viewport.contentColumns, 'error')
+    : view === undefined
+      ? textLines(t('panel.loading'), viewport.contentColumns, 'dim')
+      : lines.slice(scroll, scroll + viewport.bodyRows)
+  const accent = panelAccent('usage', getPalette().dim, getPalette().brandBright)
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(t('panel.usage.title'), viewport.contentColumns)),
+    createElement(DocumentRows, { lines: body }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('panel.usage.footer'), viewport.contentColumns)),
   )
 }