dsh-code 0.7.0 → 0.8.0

package/src/app.ts

@@ -35,6 +35,7 @@ import {
 } from './theme.ts'
 import { ThemePanel } from './theme-panel.ts'
 import { WHALE_GLYPH, WHALE_GLYPH_COLUMNS } from './whale-glyph.ts'
+import { DSH_CODE_VERSION } from './version.ts'
 import type { TranscriptStore } from './store.ts'
 import { settledEntryCount, type TranscriptEntry } from './render/projection.ts'
 import { renderMarkdown, type MdSegment, visibleColumns } from './render/markdown.ts'
@@ -61,11 +62,13 @@ import {
 import type { ApprovalSnapshot, ApprovalStore } from './approval.ts'
 import type { CommandsView } from './commands.ts'
 import type { ModelDirectory, ModelRow } from './models.ts'
+import type { ProviderSettingsDirectory, ProviderTargetView } from './provider-settings.ts'
 import type { QuestionSnapshot, QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
 import type { MentionCandidate } from './mentions.ts'
-import { EffortPanel, ModePanel, HistoryPanel, PluginPanel, ResumePanel, StatuslinePanel } from './kernel-panels.ts'
+import { EffortPanel, ModePanel, HistoryPanel, PermissionPanel, PluginPanel, ResumePanel, StatuslinePanel } from './kernel-panels.ts'
 import type { PresetRow } from './presets.ts'
+import type { PermissionRow } from './permissions.ts'
 import type { PluginRow } from './plugin-inventory.ts'
 import {
   recallEntries,
@@ -88,6 +91,7 @@ import {
   STATUS_CYCLE_HINT,
   STATUS_GROUP_SEPARATOR,
   STATUS_ITEM_SEPARATOR,
+  STATUS_ROW2_INDENT,
   type StatusFacts,
   type StatusGroup,
   type StatusItemId,
@@ -108,6 +112,7 @@ import {
 import {
   lineSegment,
   markdownLines,
+  reasoningLines,
   styledLines,
   textLines,
   transcriptEntryLines,
@@ -144,8 +149,10 @@ export interface AppProps {
   sessionId: string
   /** Whether this session was resumed from persistence. */
   resumed: boolean
-  /** Agent preset currently composing the session. */
+  /** Agent preset selected for the current or pending first session. */
   mode: string
+  /** Permission preset selected for the current or pending first session. */
+  permission: string
   /** Submit one line: slash commands to the registry, other text to the agent. */
   dispatch(text: string): void
   /** Submit steering: consumed at the running turn's next step boundary. */
@@ -160,8 +167,20 @@ export interface AppProps {
   loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
   /** Apply one /model selection (with an advertised reasoning effort, when picked); returns the display label. */
   selectModel(row: ModelRow, effortId?: string): string
+  /** Load provider/settings/credential facts for the optional /model provider stage. */
+  loadModelProviders?(): Promise<ProviderSettingsDirectory>
+  /** Subscribe to Harness credential/settings/adapter invalidations while /model is open. */
+  subscribeModelProviders?(listener: () => void): () => void
+  /** Store or rotate one provider credential through the Harness credential service. */
+  saveModelProviderCredential?(target: ProviderTargetView, key: string): Promise<void>
+  /** Remove one writable provider credential without removing its settings profile. */
+  unsetModelProviderCredential?(target: ProviderTargetView): Promise<void>
+  /** Remove one user-owned provider profile and its page-managed credential. */
+  removeModelProvider?(target: ProviderTargetView): Promise<void>
   /** Cycle to the next permission preset (Shift+Tab); returns the new label. */
   cyclePermission(): string
+  /** Select or inspect a permission preset without requiring a pre-existing session. */
+  setPermission(id: string): string
   /** Export the transcript to a markdown file (/export [path]); reports via notices. */
   exportTranscript(argument: string): Promise<void>
   /** Rename the session (/title <text>); returns the outcome line for the notice. */
@@ -169,6 +188,8 @@ export interface AppProps {
   /** Preset/session/plugin kernel operations. */
   loadPresets(): Promise<readonly PresetRow[]>
   switchMode(id: string): Promise<string>
+  /** Load the switchable permission presets for the /permission panel. */
+  loadPermissions(): Promise<readonly PermissionRow[]>
   createSession(mode?: string): void
   loadSessions(options: SessionDirectoryOptions, signal?: AbortSignal): Promise<readonly SessionRow[]>
   loadSessionTranscript(id: string, signal?: AbortSignal): Promise<string>
@@ -290,30 +311,40 @@ function DeepDivingLine({ since }: { since: number }): ReactElement {
  * the freshest tokens stay visible while a long reply streams; the complete
  * text lands in the flushed scrollback once the turn assembles it.
  */
-function StreamTail({ text, dim, maxRows, prefix, children }: {
+function StreamTail({ text, dim, maxRows, prefix = '', continuationPrefix = prefix, children }: {
   text: string
   dim: boolean
   maxRows: number
   prefix?: string
+  continuationPrefix?: string
   children?: ReactElement
 }): ReactElement {
   const columns = useStdout().stdout?.columns ?? 80
   const safeRows = Math.max(1, maxRows)
   // App padding consumes two columns; the final extra column keeps a caret
-  // from wrapping onto an unbudgeted row.
-  const contentColumns = Math.max(10, columns - 3 - visibleColumns(prefix ?? ''))
+  // from wrapping onto an unbudgeted row. Both prefixes participate because
+  // every physical row now repeats its hanging indent.
+  const prefixColumns = Math.max(visibleColumns(prefix), visibleColumns(continuationPrefix))
+  const contentColumns = Math.max(10, columns - 3 - prefixColumns)
   const initial = displayTail(text, contentColumns, safeRows)
   // Reserve one row for the omission marker only when a marker is needed.
   const tail = initial.truncated && safeRows > 1
     ? displayTail(text, contentColumns, safeRows - 1)
     : initial
+  const rows = tail.text.split('\n')
   return createElement(
     Box,
     { flexDirection: 'column' },
     tail.truncated && safeRows > 1
-      ? createElement(Text, { dimColor: true }, '  …')
+      ? createElement(Text, { color: inkColor(getPalette().dim) }, continuationPrefix, '…')
       : undefined,
-    createElement(Text, { dimColor: dim || undefined }, prefix, tail.text, children),
+    ...rows.map((row, index) => createElement(
+      Text,
+      { key: index, dimColor: dim || undefined },
+      index === 0 ? prefix : continuationPrefix,
+      row,
+      index + 1 === rows.length ? children : undefined,
+    )),
   )
 }
 
@@ -327,6 +358,8 @@ function segmentProps(style: MdSegment['style']): {
   switch (style) {
     case 'accent':
       return { color: inkColor(getPalette().brandBright), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'accentBold':
+      return { color: inkColor(getPalette().brandBright), bold: true, italic: undefined, strikethrough: undefined }
     case 'code':
       return { color: inkColor(getPalette().code), bold: undefined, italic: undefined, strikethrough: undefined }
     case 'dim':
@@ -362,7 +395,7 @@ function lineStyleProps(style: LineStyle): {
     case 'warn':
       return { color: inkColor(getPalette().warn), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
     case 'dimItalic':
-      return { color: undefined, bold: undefined, italic: true, strikethrough: undefined, dimColor: true }
+      return { color: inkColor(getPalette().dim), bold: undefined, italic: true, strikethrough: undefined, dimColor: undefined }
     default:
       return { ...segmentProps(style), dimColor: undefined }
   }
@@ -415,6 +448,13 @@ function MarkdownBody({ text, indent = 0 }: { text: string; indent?: number }):
   )
 }
 
+/** Expanded reasoning with the same two-column content edge as the reply. */
+function ReasoningBody({ text }: { text: string }): ReactElement {
+  const columns = useStdout().stdout?.columns ?? 80
+  const lines = useMemo(() => reasoningLines(text, Math.max(10, columns - 2)), [text, columns])
+  return createElement(StyledRows, { lines })
+}
+
 /**
  * One expanded tool-card body for the verbose transcript (Ctrl+O): the
  * presentation contract's structured cards — inline diffs, read windows,
@@ -500,8 +540,8 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
         entry.reasoning === ''
           ? undefined
           : showReasoning
-            ? createElement(Text, { dimColor: true, italic: true }, `  ✻ ${displayText(entry.reasoning)}`)
-            : createElement(Text, { dimColor: true }, `  ✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`),
+            ? createElement(ReasoningBody, { text: entry.reasoning })
+            : createElement(Text, { color: inkColor(getPalette().dim) }, `✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`),
         createElement(MarkdownBody, { text: entry.text, indent: 2 }),
       )
     case 'tool': {
@@ -520,7 +560,7 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
           { wrap: verbose ? 'truncate-end' : undefined },
           mark,
           ' ',
-          brand(entry.name),
+          brand(displayText(entry.name)),
           entry.preview === '' ? '' : ` ${dim(displayText(entry.preview))}`,
         ),
         entry.summary === ''
@@ -549,7 +589,7 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
           { wrap: verbose ? 'truncate-end' : undefined },
           mark,
           ' ',
-          brand(`/${entry.name}`),
+          brand(displayText(`/${entry.name}`)),
           entry.args === '' ? '' : ` ${dim(displayText(entry.args))}`,
         ),
         entry.summary === ''
@@ -600,28 +640,31 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
 }
 
 /**
- * The whale wordmark header in DeepSeek blue, hugging its content width.
- * The 8-row half-block glyph pairs adjacent lines, so on a terminal too
- * short to show it whole (or mid-resize) the clipped pairs garble the
- * screen — below the height floor the header collapses to a single-line
- * wordmark that stays correct at any size.
+ * The whale header with a compact three-line copy lockup. The title, bilingual
+ * slogan, and key hint stay centered inside the existing eight content rows,
+ * preserving the Static header's ten physical rows. Short or narrow terminals
+ * keep a one-line form.
  */
 function Header({ resumed }: { resumed: boolean }): ReactElement {
-  const rows = useStdout().stdout?.rows ?? 40
-  const hint = resumed ? 'resumed session · /help commands · Esc interrupt' : '/help commands · Esc interrupt · Ctrl+C quit'
-  if (rows < 20) {
+  const stdout = useStdout().stdout
+  const rows = stdout?.rows ?? 40
+  const columns = stdout?.columns ?? 80
+  const title = `DeepSeek Harness · v${DSH_CODE_VERSION}`
+  const slogan = 'Into the Unknown  探索未至之境'
+  const hint = resumed ? 'resumed · /help · Esc interrupt' : '/help · Esc interrupt · Ctrl+C quit'
+  const copyColumns = Math.max(visibleColumns(title), visibleColumns(slogan), visibleColumns(hint))
+  const compact = `${title} · ${hint}`
+  if (rows < 20 || columns < WHALE_GLYPH_COLUMNS + copyColumns + 8) {
     return createElement(
       Box,
-      { flexDirection: 'row', gap: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1, alignSelf: 'flex-start' },
-      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true }, 'DeepSeek Harness'),
-      createElement(Text, { dimColor: true }, hint),
+      { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1 },
+      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true, wrap: 'truncate-end' }, truncateColumns(compact, Math.max(1, columns - 5))),
     )
   }
   return createElement(
     Box,
-    // alignSelf shrinks the border to the whale-plus-wordmark content instead
-    // of stretching across the terminal and stranding empty space on the right
-    // (the compact-banner treatment the Claude Code welcome uses).
+    // alignSelf shrinks the border to the whale-plus-copy content instead of
+    // stretching across the terminal and stranding empty space on the right.
     { flexDirection: 'row', gap: 2, borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1, alignSelf: 'flex-start' },
     createElement(
       Box,
@@ -630,9 +673,15 @@ function Header({ resumed }: { resumed: boolean }): ReactElement {
     ),
     createElement(
       Box,
-      { flexDirection: 'column', justifyContent: 'center' },
-      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true }, 'DeepSeek Harness'),
-      createElement(Text, { dimColor: true }, hint),
+      { flexDirection: 'column', width: copyColumns, justifyContent: 'center' },
+      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true, wrap: 'truncate-end' }, title),
+      createElement(
+        Text,
+        { color: inkColor(getPalette().code), wrap: 'truncate-end' },
+        createElement(Text, { bold: true }, 'Into the Unknown'),
+        '  探索未至之境',
+      ),
+      createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, hint),
     ),
   )
 }
@@ -695,19 +744,10 @@ function statusToneProps(tone: StatusTone): {
       return { color: inkColor(getPalette().dim), bold: undefined, dimColor: undefined }
     case 'accent':
       return { color: inkColor(getPalette().brandDeep), bold: undefined, dimColor: undefined }
-    // Context-bar segment shades, dark → light across the DeepSeek blues:
-    // system/prompt/assistant/thinking/tools. The tools segment borrows the
-    // code sky-blue as the fifth shade (no new theme token).
-    case 'ctxSystem':
-      return { color: inkColor(getPalette().brandDeep), bold: undefined, dimColor: undefined }
-    case 'ctxPrompt':
+    // Context-bar fill: one DeepSeek blue over the whole occupied run; the
+    // dotted free track reads through the dim label gray.
+    case 'ctxFill':
       return { color: inkColor(getPalette().brand), bold: undefined, dimColor: undefined }
-    case 'ctxAssistant':
-      return { color: inkColor(getPalette().brandMid), bold: undefined, dimColor: undefined }
-    case 'ctxThinking':
-      return { color: inkColor(getPalette().brandBright), bold: undefined, dimColor: undefined }
-    case 'ctxTools':
-      return { color: inkColor(getPalette().code), bold: undefined, dimColor: undefined }
     case 'success':
       return { color: inkColor(getPalette().code), bold: true, dimColor: undefined }
     case 'warn':
@@ -759,7 +799,7 @@ function StatusLine({ facts, stats, busy, columns, items }: {
 }): ReactElement {
   const layout = layoutStatusBar(facts, stats, Math.max(8, columns - 2), { busy, items })
 
-  const renderRow = (row: { left: readonly StatusGroup[]; right: readonly StatusSpan[]; hint: boolean }, key: string): ReactElement => {
+  const renderRow = (row: { left: readonly StatusGroup[]; right: readonly StatusSpan[]; hint: boolean }, key: string, indent = 0): ReactElement => {
     const leftParts: ReactElement[] = []
     row.left.forEach((group, groupIndex) => {
       if (groupIndex > 0) {
@@ -793,9 +833,10 @@ function StatusLine({ facts, stats, busy, columns, items }: {
     return createElement(
       Box,
       // Match the prompt text inside the bordered composer: one border column
-      // plus one padding column. Keeping these rows margin-free also makes
-      // the composer and status a fixed bottom unit in every interface.
-      { paddingLeft: 2, justifyContent: rightParts.length > 0 ? 'space-between' : undefined },
+      // plus one padding column. The secondary row adds the model-name indent
+      // (its budget already shrinks by the same amount) so its figures align
+      // under the model name rather than under the busy dot.
+      { paddingLeft: 2 + indent, justifyContent: rightParts.length > 0 ? 'space-between' : undefined },
       createElement(Text, { wrap: 'truncate-end' }, ...leftParts),
       rightParts.length > 0 ? createElement(Text, { wrap: 'truncate-end' }, ...rightParts) : undefined,
     )
@@ -805,7 +846,7 @@ function StatusLine({ facts, stats, busy, columns, items }: {
     Box,
     { flexDirection: 'column' },
     renderRow(layout.row1, 's1'),
-    row2Present ? renderRow(layout.row2, 's2') : undefined,
+    row2Present ? renderRow(layout.row2, 's2', STATUS_ROW2_INDENT) : undefined,
   )
 }
 
@@ -1176,10 +1217,11 @@ function QuestionBar({ store, snapshot, locked }: { store: QuestionStore; snapsh
 }
 
 /** The /model panel: a scrolling list over the advisory model directory. */
-function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
+function ModelPanel({ directory, error, onSelect, onProviders, onRetry, onClose }: {
   directory: ModelDirectory | undefined
   error: string | undefined
   onSelect(row: ModelRow): void
+  onProviders?(): void
   onRetry(): void
   onClose(): void
 }): ReactElement {
@@ -1205,6 +1247,10 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
       onRetry()
       return
     }
+    if (input === 'a' && onProviders !== undefined) {
+      onProviders()
+      return
+    }
     if (rows.length === 0) return
     if (key.upArrow) {
       setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
@@ -1237,7 +1283,8 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
 
   if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
   if (viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/model · r retry · esc/q close', viewport.contentColumns))
+    const providers = onProviders === undefined ? '' : ' · a providers'
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`/model${providers} · r retry · esc/q close`, viewport.contentColumns))
   }
 
   const stateRows: ReactElement[] = directory === undefined && error === undefined
@@ -1263,7 +1310,8 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
   // Measurement and rendering share the same physical-row budget: state
   // messages consume body rows before selectable entries, as in Codex's
   // list-selection views.
-  const rowBudget = Math.max(0, viewport.bodyRows - stateRows.length)
+  const visibleStateRows = stateRows.slice(0, viewport.bodyRows)
+  const rowBudget = Math.max(0, viewport.bodyRows - visibleStateRows.length)
   const first = selectionWindow(cursor, rows.length, rowBudget)
   const visible = rowBudget === 0 ? [] : rows.slice(first, first + rowBudget)
   return createElement(
@@ -1271,7 +1319,7 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
     { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
     createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — select model${rows.length === 0 ? '' : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
-    ...stateRows,
+    ...visibleStateRows,
     ...visible.map((row) => {
       const index = rows.indexOf(row)
       const label = displayText(`${row.providerName} · ${row.modelName}`)
@@ -1286,7 +1334,303 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
       )
     }),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns('↑↓ move · pgup/pgdn page · g/G ends · enter select · r retry · esc/q close', viewport.contentColumns))),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns(`↑↓ move · pgup/pgdn page · enter select${onProviders === undefined ? '' : ' · a providers'} · r retry · esc/q close`, viewport.contentColumns))),
+  )
+}
+
+/** Compact provider-state copy; only value-free credential facts cross this boundary. */
+function providerStateLabel(row: ProviderTargetView): string {
+  const route = row.active ? 'active' : 'dormant'
+  const credential = row.credential
+  if (credential?.kind === 'error') return `${route} · key status unavailable`
+  if (credential?.kind === 'facts') {
+    if (!credential.configured) return `${route} · key missing`
+    const source = credential.source === undefined ? 'configured' : singleLineText(credential.source)
+    return `${route} · key ${source}${credential.writable ? '' : ' · read-only'}`
+  }
+  return `${route} · ${row.configured ? 'provider auth' : 'not configured'}`
+}
+
+/** The provider-management stage reached from /model with `a`. */
+function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRetry, onBack }: {
+  directory: ProviderSettingsDirectory | undefined
+  error: string | undefined
+  onCredential(target: ProviderTargetView): void
+  onUnset(target: ProviderTargetView): void
+  onRemove(target: ProviderTargetView): void
+  onRetry(): void
+  onBack(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const rows = directory?.rows ?? []
+  const [cursor, setCursor] = useState(0)
+  const [actionError, setActionError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    if (rows.length === 0) {
+      if (cursor !== 0) setCursor(0)
+      return
+    }
+    if (cursor >= rows.length) setCursor(rows.length - 1)
+  }, [rows.length, cursor])
+
+  useStableInput((input, key) => {
+    if (key.escape || input === 'q') {
+      onBack()
+      return
+    }
+    if (input === 'r') {
+      setActionError(undefined)
+      onRetry()
+      return
+    }
+    if (rows.length === 0) return
+    if (key.upArrow) {
+      setActionError(undefined)
+      setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
+      return
+    }
+    if (key.downArrow) {
+      setActionError(undefined)
+      setCursor(cursor < rows.length - 1 ? cursor + 1 : 0)
+      return
+    }
+    if (key.pageUp) {
+      setActionError(undefined)
+      setCursor(current => Math.max(0, current - Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    if (key.pageDown) {
+      setActionError(undefined)
+      setCursor(current => Math.min(rows.length - 1, current + Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    const target = rows[cursor]
+    if (target === undefined) return
+    if (input === 'd') {
+      const facts = target.credential
+      if (facts?.kind !== 'facts' || !facts.configured) {
+        setActionError('this provider has no configured API key to remove')
+      } else if (!facts.writable) {
+        setActionError('this API key is supplied read-only by the environment')
+      } else {
+        onUnset(target)
+      }
+      return
+    }
+    if (input === 'x') {
+      if (!target.removable) {
+        setActionError('this provider profile is not removable')
+      } else {
+        onRemove(target)
+      }
+      return
+    }
+    if (key.return) {
+      if (target.settingsNs.length === 0) {
+        setActionError('this provider is not managed by Harness settings')
+      } else if (target.credential?.kind === 'error') {
+        setActionError('credential status is unavailable; retry before writing')
+      } else if (target.credential?.kind === 'facts' && !target.credential.writable) {
+        setActionError('this API key is supplied read-only by the environment')
+      } else if (target.credentialRef === undefined && directory?.writable !== true) {
+        setActionError('settings are read-only; this provider cannot be activated here')
+      } else {
+        onCredential(target)
+      }
+    }
+  }, true)
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/model providers · enter key · d remove key · esc back', viewport.contentColumns))
+  }
+  const stateRows: ReactElement[] = directory === undefined && error === undefined
+    ? [createElement(Text, { key: 'loading', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, '  loading providers…')]
+    : error !== undefined
+      ? [createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${singleLineText(error)}`, viewport.contentColumns))]
+      : [
+        ...(actionError === undefined
+          ? []
+          : [createElement(Text, { key: 'action-error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${actionError}`, viewport.contentColumns))]),
+        ...(directory?.failures ?? []).map((failure, index) => createElement(
+          Text,
+          { key: `failure-${index}`, color: inkColor(getPalette().warn), wrap: 'truncate-end' },
+          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
+        )),
+        ...(rows.length === 0
+          ? [createElement(Text, { key: 'empty', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, '  no configurable providers')]
+          : []),
+      ]
+  const visibleStateRows = stateRows.slice(0, viewport.bodyRows)
+  const rowBudget = Math.max(0, viewport.bodyRows - visibleStateRows.length)
+  const first = selectionWindow(cursor, rows.length, rowBudget)
+  const visible = rowBudget === 0 ? [] : rows.slice(first, first + rowBudget)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
+    createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — providers${rows.length === 0 ? '' : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...visibleStateRows,
+    ...visible.map((row) => {
+      const index = rows.indexOf(row)
+      const identity = row.displayName === row.provider ? row.provider : `${row.displayName} (${row.provider})`
+      const label = `${identity} · ${providerStateLabel(row)}${row.removable ? ' · custom' : ''}`
+      return createElement(
+        Text,
+        { key: row.provider, color: index === cursor ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' },
+        truncateColumns(`${index === cursor ? '❯ ' : '  '}${displayText(label)}`, viewport.contentColumns),
+      )
+    }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('↑↓ move · enter add/update key · d remove key · x remove custom provider · r retry · esc back', viewport.contentColumns)),
+  )
+}
+
+/** Write-only masked API-key editor; the secret lives only in this mounted component. */
+function ProviderCredentialPanel({ target, save, done, back }: {
+  target: ProviderTargetView
+  save(target: ProviderTargetView, key: string): Promise<void>
+  done(): void
+  back(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [draft, setDraft] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  const submit = (): void => {
+    if (busy) return
+    setBusy(true)
+    setError(undefined)
+    Promise.resolve().then(() => save(target, draft)).then(() => {
+      setDraft('')
+      done()
+    }, (reason: unknown) => {
+      setError(singleLineText(reason instanceof Error ? reason.message : String(reason)))
+      setBusy(false)
+    })
+  }
+
+  useStableInput((input, key) => {
+    if (busy) return
+    if (key.escape) {
+      setDraft('')
+      back()
+      return
+    }
+    if (key.return) {
+      submit()
+      return
+    }
+    if (key.backspace || key.delete) {
+      setError(undefined)
+      setDraft(current => [...current].slice(0, -1).join(''))
+      return
+    }
+    if (key.ctrl && input === 'u') {
+      setError(undefined)
+      setDraft('')
+      return
+    }
+    if (key.ctrl || key.meta || input.length === 0) return
+    const next = draft + input
+    if (next.length > 4096) {
+      setError('API key input is too long')
+      return
+    }
+    setError(undefined)
+    setDraft(next)
+  }, true)
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const keyBudget = Math.max(1, viewport.contentColumns - 4)
+  const bullets = '•'.repeat(Math.min([...draft].length, keyBudget))
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`API key ${bullets}${busy ? ' saving…' : ' ▏'} · esc back`, viewport.contentColumns))
+  }
+  const identity = target.displayName === target.provider ? target.provider : `${target.displayName} (${target.provider})`
+  const source = target.credential?.kind === 'facts' && target.credential.configured
+    ? `replaces ${singleLineText(target.credential.source ?? 'stored key')}`
+    : 'new key'
+  const providerRow = createElement(Text, { key: 'provider', wrap: 'truncate-end' }, truncateColumns(`  provider  ${displayText(identity)}`, viewport.contentColumns))
+  const referenceRow = createElement(Text, { key: 'reference', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  reference ${displayText(target.credentialRef ?? target.suggestedRef)} · ${source}`, viewport.contentColumns))
+  const keyRow = createElement(Text, { key: 'key', color: error === undefined ? inkColor(getPalette().brandBright) : inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  key       ${bullets}${busy ? ' saving…' : ' ▏'}`, viewport.contentColumns))
+  const errorRow = error === undefined
+    ? undefined
+    : createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${error}`, viewport.contentColumns))
+  const detailRows = errorRow === undefined ? [providerRow, referenceRow] : [providerRow, errorRow]
+  const primaryRow = viewport.bodyRows === 1 && errorRow !== undefined ? errorRow : keyRow
+  const detailBudget = Math.max(0, viewport.bodyRows - 1)
+  const bodyRows = [
+    ...(detailBudget === 0 ? [] : detailRows.slice(-detailBudget)),
+    ...(viewport.bodyRows === 0 ? [] : [primaryRow]),
+  ]
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
+    createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns('/model — add API key', viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...bodyRows,
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('type or paste key · enter save · ctrl+u clear · esc back', viewport.contentColumns)),
+  )
+}
+
+/** Bounded destructive-action confirmation for credential or provider removal. */
+function ProviderConfirmPanel({ target, kind, confirm, done, back }: {
+  target: ProviderTargetView
+  kind: 'credential' | 'provider'
+  confirm(target: ProviderTargetView): Promise<void>
+  done(): void
+  back(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const run = (): void => {
+    if (busy) return
+    setBusy(true)
+    setError(undefined)
+    Promise.resolve().then(() => confirm(target)).then(done, (reason: unknown) => {
+      setError(singleLineText(reason instanceof Error ? reason.message : String(reason)))
+      setBusy(false)
+    })
+  }
+  useStableInput((input, key) => {
+    if (busy) return
+    if (key.escape || input === 'n') {
+      back()
+      return
+    }
+    if (input === 'y') run()
+  }, true)
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const action = kind === 'credential' ? 'remove API key' : 'remove provider'
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`${action} ${target.displayName}? · y confirm · n/esc back`, viewport.contentColumns))
+  }
+  const identity = target.displayName === target.provider ? target.provider : `${target.displayName} (${target.provider})`
+  const identityRow = createElement(Text, { key: 'identity', wrap: 'truncate-end' }, truncateColumns(`  ${displayText(identity)}`, viewport.contentColumns))
+  const descriptionRow = createElement(Text, { key: 'description', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(kind === 'credential' ? '  the provider profile and selected model stay available' : '  the user settings profile and its managed key will be removed', viewport.contentColumns))
+  const errorRow = error === undefined
+    ? undefined
+    : createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${error}`, viewport.contentColumns))
+  const bodyRows = errorRow === undefined
+    ? [identityRow, descriptionRow].slice(0, viewport.bodyRows)
+    : [identityRow, errorRow].slice(-viewport.bodyRows)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().warn) },
+    createElement(Text, { color: inkColor(getPalette().warn), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — ${action}`, viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...bodyRows,
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(busy ? 'working…' : 'y confirm · n/esc back', viewport.contentColumns)),
   )
 }
 
@@ -1334,6 +1678,7 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
     createElement(Box, { key: 'local-model' }, row('/model', 'switch the model')),
     createElement(Box, { key: 'local-effort' }, row('/effort', 'adjust reasoning effort for the current model')),
     createElement(Box, { key: 'local-mode' }, row('/mode', 'inspect or select the agent preset (/mode [preset])')),
+    createElement(Box, { key: 'local-permission' }, row('/permission', 'inspect or select the permission preset (/permission [preset])')),
     createElement(Box, { key: 'local-new' }, row('/new', 'create and switch to a fresh session (/new [preset])')),
     createElement(Box, { key: 'local-resume' }, row('/resume', 'browse or switch root sessions (/resume [id|prefix])')),
     createElement(Box, { key: 'local-plugin' }, row('/plugin', 'inspect the live plugin composition')),
@@ -1669,6 +2014,7 @@ export function completionCandidates(
     { label: '/model', description: 'switch the model', origin: 'command' },
     { label: '/effort', description: 'adjust reasoning effort for the current model', origin: 'command' },
     { label: '/mode', description: 'select the agent preset', origin: 'command' },
+    { label: '/permission', description: 'inspect or select the permission preset', origin: 'command' },
     { label: '/new', description: 'start a fresh session', origin: 'command' },
     { label: '/resume', description: 'browse or switch sessions', origin: 'command' },
     { label: '/plugin', description: 'inspect the plugin composition', origin: 'command' },
@@ -1680,9 +2026,9 @@ export function completionCandidates(
     { label: '/title', description: 'rename this session', origin: 'command' },
     { label: '/quit', description: 'exit', origin: 'command' },
   ]
-  // Local commands shadow registry names (e.g. the plugin-registered
-  // /permission is served by the registry itself, never duplicated here),
-  // so collisions cannot render two rows with the same key.
+  // Local commands shadow registry names (e.g. the TUI-local /permission works
+  // before any session exists, while the registry child needs one), so
+  // collisions cannot render two rows with the same key.
   const localNames = new Set(local.map(candidate => candidate.label.slice(1)))
   const registry = descriptors
     .filter(descriptor => !localNames.has(descriptor.name))
@@ -1777,7 +2123,7 @@ function CompletionMenu({ active, mention, index, rows }: {
  * While a modal (approval / question / model panel) owns the keys, the
  * box passes every key through untouched.
  */
-function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openResume, openPlugin, openStatusline, openTheme, openHistory, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTick, waveTier, waveStyle }: {
+function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openPermission, openResume, openPlugin, openStatusline, openTheme, openHistory, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTier, waveStyle }: {
   active: boolean
   frozen: boolean
   busy: boolean
@@ -1791,6 +2137,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   openEffort(): void
   openHelp(): void
   openMode(): void
+  openPermission(): void
   openResume(): void
   openPlugin(query?: string): void
   openStatusline(): void
@@ -1823,11 +2170,9 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   historyFill: { text: string; index: number } | undefined
   /** Marks the accepted entry consumed (called after the fill is applied). */
   historyConsumed(): void
-  /** DeepSeek easter-egg wave frame (null when static): the composer's input
-   * row rides Codex's Wave sweep (33ms tick, 1.0s flash / 1.3s deepseek). */
-  waveTick: number | null
-  /** The wave tier of the applied official DeepSeek model (null otherwise):
-   * drives the persistent prompt glyph/accent and the sparkle tier. */
+  /** DeepSeek easter-egg wave tier of the applied official DeepSeek model
+   * (null otherwise): drives the persistent prompt glyph/accent and the
+   * sparkle tier. */
   waveTier: DeepseekWaveTier | null
   /** The ignition style running, if any: Wave / Aurora / Pulse. */
   waveStyle: DeepseekWaveStyle | null
@@ -2072,6 +2417,14 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         openEffort()
         return
       }
+      if (text === '/permission') {
+        openPermission()
+        return
+      }
+      if (text.startsWith('/permission ')) {
+        dispatch(text)
+        return
+      }
       if (text === '/mode' || text.startsWith('/mode ')) {
         const mode = text.slice(5).trim()
         if (mode === '') openMode()
@@ -2236,6 +2589,42 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     }
   })
 
+  // The DeepSeek easter-egg wave owns its 33ms tick HERE instead of in App:
+  // the interval re-renders only the composer row at 30fps, never the whole
+  // tree. App drives the tier/style pair on a model switch; this local effect
+  // starts the sweep whenever that pair changes (App picks a NEW random style
+  // for every replay — including effort changes on the same route — so the
+  // pair always differs when a new wave should run) and stops it when the
+  // model leaves the official DeepSeek route (tier becomes null).
+  const [waveTick, setWaveTick] = useState<number | null>(null)
+  const wavePrevious = useRef<{ tier: DeepseekWaveTier | null; style: DeepseekWaveStyle | null }>({ tier: null, style: null })
+  useEffect(() => {
+    const previous = wavePrevious.current
+    wavePrevious.current = { tier: waveTier, style: waveStyle }
+    if (waveTier === null) {
+      setWaveTick(null)
+      return
+    }
+    if (previous.tier !== waveTier || previous.style !== waveStyle) {
+      setWaveTick(0)
+    }
+  }, [waveTier, waveStyle])
+  const waveActive = waveTick !== null && waveTier !== null && waveStyle !== null
+    && waveTick * DEEPSEEK_WAVE_TICK_MS < deepseekWaveDuration(waveTier, waveStyle)
+  useEffect(() => {
+    if (!waveActive) return
+    const id = setInterval(() => {
+      setWaveTick(current => (current === null ? 0 : current + 1))
+    }, DEEPSEEK_WAVE_TICK_MS)
+    return () => {
+      clearInterval(id)
+    }
+  }, [waveActive])
+  useEffect(() => {
+    if (waveTick !== null && waveTier !== null && waveStyle !== null
+      && waveTick * DEEPSEEK_WAVE_TICK_MS >= deepseekWaveDuration(waveTier, waveStyle)) setWaveTick(null)
+  }, [waveTick, waveTier, waveStyle])
+
   // Every exclusive panel keeps the composer as a stable visual anchor, but
   // freezes it to one row: no menu, multiline wrap, or animation.
   const tierActive = waveTier !== null
@@ -2371,13 +2760,192 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   )
 }
 
+/** One cached settled row: the row Box plus its roomy-prompt spacers. */
+interface SettledRowRecord {
+  /** The row Box element (keyed by the entry's settled index). */
+  box: ReactElement
+  /** The roomy-prompt spacer BEFORE the row, or undefined. */
+  before: ReactElement | undefined
+  /** The roomy-prompt spacer AFTER the row, or undefined. */
+  after: ReactElement | undefined
+  /** Whether the row's text depends on the reasoning toggle (Ctrl+R). */
+  reasonSensitive: boolean
+  /** The toggle state the row was built with. */
+  showReasoning: boolean
+}
+
+/** The incremental settled-history cache (see `computeSettledRows`). */
+interface SettledRowsCache {
+  /** The exact settled entries the cache covers (`view.entries[0..entries.length)`). */
+  entries: TranscriptEntry[]
+  /** Records keyed by entry identity; mutated in place so the append path
+   * never copies the whole map. */
+  records: Map<TranscriptEntry, SettledRowRecord>
+  /** The header element (depends only on `resumed`). */
+  header: ReactElement
+  /** The `resumed` the header was built with. */
+  resumed: boolean
+  /** The toggle state the rows were built with. */
+  showReasoning: boolean
+  /** The refreshEpoch the rows were built for; a bump forces a full rebuild. */
+  epoch: number
+  /** The flat row list (header + per-entry before/box/after). */
+  flat: ReactElement[]
+}
+
+/** One step of `computeSettledRows`. */
+interface SettledRowsResult {
+  cache: SettledRowsCache
+  /** How many rows had to be BUILT by this step (0 = pure reuse). */
+  built: number
+}
+
+/** Build one settled row (row Box plus its roomy-prompt spacers). */
+function buildSettledRow(entry: TranscriptEntry, index: number, showReasoning: boolean): SettledRowRecord {
+  const row = createElement(EntryLine, { entry, showReasoning, verbose: false })
+  const roomyPrompt = entry.kind === 'user' && !entry.notice
+  return {
+    box: createElement(Box, { key: index, paddingX: 1 }, row),
+    before: roomyPrompt
+      ? createElement(Box, { key: `prompt-before-${index}`, paddingX: 1 }, createElement(Text, null, ' '))
+      : undefined,
+    after: roomyPrompt
+      ? createElement(Box, { key: `prompt-after-${index}`, paddingX: 1 }, createElement(Text, null, ' '))
+      : undefined,
+    reasonSensitive: entry.kind === 'assistant' && entry.reasoning !== '',
+    showReasoning,
+  }
+}
+
+/**
+ * The settled `<Static>` row set as a PURE incremental state machine (App
+ * drives it from the memo; tests drive it directly and read `built`).
+ *
+ * The settled prefix is permanently final: the projection only APPENDS below
+ * the flush boundary, removes pending rows at or beyond it, and replaces
+ * running tool/retry/command rows there too. So extending the cache never
+ * rescans the old prefix — a grown boundary builds ONLY the newly settled
+ * suffix and reuses every cached element, letting React bail out of unchanged
+ * rows and keeping long histories out of the per-durable-event path (no O(N)
+ * rebuild of rows, Map, or MarkdownBody parses). `records` is mutated in place
+ * on the append/toggle paths to stay O(delta).
+ *
+ * Full rebuilds run only on the rare, deliberate paths: no cache yet, a
+ * source-backed replay (`epoch` bump: resize / Ctrl+L / Ctrl+R remounts
+ * `<Static>` and must re-flush the CURRENT rows), a `resumed` change, or a shrink
+ * (`store.reset`). A reasoning toggle rebuilds only the rows whose text
+ * depends on it, preserving the other rows' element identity.
+ */
+export function computeSettledRows(
+  previous: SettledRowsCache | undefined,
+  entries: readonly TranscriptEntry[],
+  settled: number,
+  showReasoning: boolean,
+  resumed: boolean,
+  epoch: number,
+): SettledRowsResult {
+  if (previous === undefined || previous.epoch !== epoch || previous.resumed !== resumed
+    || settled < previous.entries.length) {
+    // Full rebuild from the current settled prefix.
+    const records = new Map<TranscriptEntry, SettledRowRecord>()
+    const flat: ReactElement[] = [createElement(Header, { key: 'header', resumed })]
+    for (let index = 0; index < settled; index++) {
+      const entry = entries[index]
+      const record = buildSettledRow(entry, index, showReasoning)
+      records.set(entry, record)
+      if (record.before !== undefined) flat.push(record.before)
+      flat.push(record.box)
+      if (record.after !== undefined) flat.push(record.after)
+    }
+    return {
+      cache: { entries: entries.slice(0, settled), records, header: flat[0]!, resumed, showReasoning, epoch, flat },
+      built: settled,
+    }
+  }
+  if (previous.showReasoning !== showReasoning) {
+    // Reasoning toggle: only rows whose text depends on it rebuild; spacers
+    // and the other rows keep their element identity.
+    const records = previous.records
+    const flat: ReactElement[] = [previous.header]
+    let built = 0
+    for (let index = 0; index < previous.entries.length; index++) {
+      const entry = previous.entries[index]
+      const record = records.get(entry)!
+      const current = record.reasonSensitive
+        ? {
+          ...record,
+          box: createElement(Box, { key: index, paddingX: 1 }, createElement(EntryLine, { entry, showReasoning, verbose: false })),
+          showReasoning,
+        }
+        : record
+      if (current !== record) {
+        records.set(entry, current)
+        built += 1
+      }
+      if (current.before !== undefined) flat.push(current.before)
+      flat.push(current.box)
+      if (current.after !== undefined) flat.push(current.after)
+    }
+    return { cache: { ...previous, records, showReasoning, flat }, built }
+  }
+  if (settled === previous.entries.length) {
+    // Nothing below the boundary changed (a pending retirement above it, a
+    // tool/result at the boundary): keep the SAME flat identity so the
+    // memoized <Static> subtree does not re-render at all.
+    return { cache: previous, built: 0 }
+  }
+  // The boundary grew: build ONLY the newly settled suffix.
+  const records = previous.records
+  const suffix: TranscriptEntry[] = []
+  const added: ReactElement[] = []
+  for (let index = previous.entries.length; index < settled; index++) {
+    const entry = entries[index]
+    const record = buildSettledRow(entry, index, showReasoning)
+    records.set(entry, record)
+    suffix.push(entry)
+    if (record.before !== undefined) added.push(record.before)
+    added.push(record.box)
+    if (record.after !== undefined) added.push(record.after)
+  }
+  return {
+    cache: {
+      entries: previous.entries.concat(suffix),
+      records,
+      header: previous.header,
+      resumed: previous.resumed,
+      showReasoning,
+      epoch: previous.epoch,
+      flat: previous.flat.concat(added),
+    },
+    built: settled - previous.entries.length,
+  }
+}
+
 /** The whole terminal app; state arrives via the store, output via Ink. */
 export function App(props: AppProps): ReactElement {
   const view = useSyncExternalStore(props.store.subscribe, props.store.getView)
-  const descriptors = useSyncExternalStore(props.commands.subscribe, () => props.commands.descriptors)
-  const skills = useSyncExternalStore(props.skills.subscribe, () => props.skills.rows)
+  // getSnapshot must be a STABLE reference (the React contract): an inline
+  // arrow here re-subscribes the store hook on every render and cascades
+  // force-updates — during a fast reasoning stream that chain crossed React's
+  // nested-passive-update limit and flooded "Maximum update depth exceeded"
+  // warnings. The view objects are process-stable, so one callback per view
+  // identity is enough.
+  // getSnapshot should be a stable reference (the React contract): an inline
+  // arrow re-subscribes the store hook on every render and forces the uETS
+  // consistency check to re-run per commit. The view objects are
+  // process-stable, so one callback per view identity is enough.
+  const readDescriptors = useCallback(() => props.commands.descriptors, [props.commands])
+  const readSkills = useCallback(() => props.skills.rows, [props.skills])
+  const descriptors = useSyncExternalStore(props.commands.subscribe, readDescriptors)
+  const skills = useSyncExternalStore(props.skills.subscribe, readSkills)
   const [modelLabel, setModelLabel] = useState(props.model)
   const [modelOpen, setModelOpen] = useState(false)
+  /** Nested /model stages; only one owns terminal input at a time. */
+  const [providerOpen, setProviderOpen] = useState(false)
+  const [providerAction, setProviderAction] = useState<{
+    kind: 'credential' | 'unset' | 'remove'
+    target: ProviderTargetView
+  } | undefined>(undefined)
   /** The model row whose effort levels the /model stage lists; undefined shows the model list. */
   const [effortFor, setEffortFor] = useState<ModelRow | undefined>(undefined)
   /** Effective reasoning effort, shown in the /model picker and switch notice. */
@@ -2388,8 +2956,10 @@ export function App(props: AppProps): ReactElement {
    * per-style durations), then the band returns to static while the prompt
    * marker keeps the tier accent. The trigger follows the applied model
    * label (what the status bar actually shows), never the initial paint,
-   * and the tier is derived from the label and cached at the switch. */
-  const [waveTick, setWaveTick] = useState<number | null>(null)
+   * and the tier is derived from the label and cached at the switch. The
+   * 33ms tick itself lives inside Input, so the sweep re-renders only the
+   * composer row, not the whole tree, at 30fps; App owns the rarely-changing
+   * tier/style and Input starts the sweep whenever that pair changes. */
   const [waveTier, setWaveTier] = useState<DeepseekWaveTier | null>(null)
   const [waveStyle, setWaveStyle] = useState<DeepseekWaveStyle | null>(null)
   const previousModel = useRef<string | undefined>(undefined)
@@ -2407,7 +2977,6 @@ export function App(props: AppProps): ReactElement {
     if (!isOfficialDeepSeekLabel(modelLabel)) {
       setWaveTier(null)
       setWaveStyle(null)
-      setWaveTick(null)
       return
     }
     if (modelChanged || effortChanged) {
@@ -2415,26 +2984,12 @@ export function App(props: AppProps): ReactElement {
       const nextStyle = deepseekWaveStyleRandom(previousStyle.current)
       previousStyle.current = nextStyle
       setWaveStyle(nextStyle)
-      setWaveTick(0)
     }
   }, [modelLabel, effortLabel])
-  const waveActive = waveTick !== null && waveTier !== null && waveStyle !== null
-    && waveTick * DEEPSEEK_WAVE_TICK_MS < deepseekWaveDuration(waveTier, waveStyle)
-  useEffect(() => {
-    if (!waveActive) return
-    const id = setInterval(() => {
-      setWaveTick(current => (current === null ? 0 : current + 1))
-    }, DEEPSEEK_WAVE_TICK_MS)
-    return () => {
-      clearInterval(id)
-    }
-  }, [waveActive])
-  useEffect(() => {
-    if (waveTick !== null && waveTier !== null && waveStyle !== null
-      && waveTick * DEEPSEEK_WAVE_TICK_MS >= deepseekWaveDuration(waveTier, waveStyle)) setWaveTick(null)
-  }, [waveTick, waveTier, waveStyle])
   const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
   const [modelError, setModelError] = useState<string | undefined>(undefined)
+  const [providerDirectory, setProviderDirectory] = useState<ProviderSettingsDirectory | undefined>(undefined)
+  const [providerError, setProviderError] = useState<string | undefined>(undefined)
   const [modelLoadEpoch, setModelLoadEpoch] = useState(0)
   const [notice, setNotice] = useState<{ text: string; tone: NoticeTone } | undefined>(undefined)
   const notify = useCallback((text: string, tone: NoticeTone = 'info'): void => {
@@ -2461,12 +3016,36 @@ export function App(props: AppProps): ReactElement {
       cancelled = true
     }
   }, [modelOpen, modelLoadEpoch, props.loadModels])
+  useEffect(() => {
+    if (!modelOpen || props.loadModelProviders === undefined) return
+    let cancelled = false
+    setProviderDirectory(undefined)
+    setProviderError(undefined)
+    Promise.resolve().then(() => props.loadModelProviders!()).then((loaded) => {
+      if (!cancelled) setProviderDirectory(loaded)
+    }, (error: unknown) => {
+      if (!cancelled) setProviderError(error instanceof Error ? error.message : String(error))
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [modelOpen, modelLoadEpoch, props.loadModelProviders])
+  useEffect(() => {
+    const subscribe = props.subscribeModelProviders
+    if (!modelOpen || subscribe === undefined) return
+    try {
+      return subscribe(() => setModelLoadEpoch(epoch => epoch + 1))
+    } catch (error: unknown) {
+      setProviderError(error instanceof Error ? error.message : String(error))
+    }
+  }, [modelOpen, props.subscribeModelProviders])
 
   const busy = view.busy
   const [showReasoning, setShowReasoning] = useState(false)
   const [verboseOpen, setVerboseOpen] = useState(false)
   const [helpOpen, setHelpOpen] = useState(false)
   const [modeOpen, setModeOpen] = useState(false)
+  const [permissionOpen, setPermissionOpen] = useState(false)
   const [resumeOpen, setResumeOpen] = useState(false)
   const [pluginOpen, setPluginOpen] = useState(false)
   const [pluginQuery, setPluginQuery] = useState('')
@@ -2489,27 +3068,43 @@ export function App(props: AppProps): ReactElement {
   const historyConsumed = useCallback((): void => {
     setHistoryFill(undefined)
   }, [])
-  /** Live queued inbox rows (event-sourced from `agent/inbox/spliced`). */
-  const queuedRows = useMemo(
-    () => view.entries.filter((entry): entry is Extract<TranscriptEntry, { kind: 'pending' }> => entry.kind === 'pending'),
-    [view.entries],
-  )
+  /** The append-only flush boundary (see `settledEntryCount`): entries below
+   * this index are final and ride the `<Static>` scrollback; everything at or
+   * beyond stays in the live tree. Pending inbox rows always live at
+   * index >= settled, so the queued-inbox scan below only walks the mutable
+   * tail instead of the whole history. */
+  const settled = useMemo(() => settledEntryCount(view.entries), [view.entries])
+  /** Live queued inbox rows (event-sourced from `agent/inbox/spliced`). The
+   * projection only appends and removes pending rows at index >= settled, so
+   * a bounded tail scan replaces an unconditional O(history) filter on every
+   * event. */
+  const queuedRows = useMemo(() => {
+    const rows: Array<Extract<TranscriptEntry, { kind: 'pending' }>> = []
+    for (let index = settled; index < view.entries.length; index++) {
+      const entry = view.entries[index]
+      if (entry.kind === 'pending') rows.push(entry)
+    }
+    return rows
+  }, [view.entries, settled])
   const [refreshEpoch, setRefreshEpoch] = useState(0)
   const approvalSnapshot = useSyncExternalStore(props.approval.subscribe, props.approval.getSnapshot)
   const questionSnapshot = useSyncExternalStore(props.questions.subscribe, props.questions.getSnapshot)
   const approvalPending = approvalSnapshot.pending !== undefined
   const questionPending = questionSnapshot.pending !== undefined
   // While any modal owns the keys, the prompt box passes everything through.
-  const inputActive = !modelOpen && !helpOpen && !modeOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !verboseOpen && !approvalPending && !questionPending
+  const inputActive = !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !verboseOpen && !approvalPending && !questionPending
 
   // Human questions outrank local inspectors. Close the lower modal instead
   // of leaving an approval/question visible but keyboard-locked behind it.
   useEffect(() => {
     if (!approvalPending && !questionPending) return
     setModelOpen(false)
+    setProviderOpen(false)
+    setProviderAction(undefined)
     setEffortFor(undefined)
     setHelpOpen(false)
     setModeOpen(false)
+    setPermissionOpen(false)
     setResumeOpen(false)
     setPluginOpen(false)
     setStatuslineOpen(false)
@@ -2519,34 +3114,33 @@ export function App(props: AppProps): ReactElement {
   }, [approvalPending, questionPending])
 
   // Append-only transcript: everything up to the first still-mutable entry
-  // (a running tool/retry) flushes through Ink's `<Static>` into native
+  // (a running tool/retry/command) flushes through Ink's `<Static>` into native
   // scrollback and is normally never rewritten — the Claude-Code stability
-  // contract
-  // that lets arbitrarily long conversations scroll instead of freezing when
-  // the live tree exceeds the terminal height. The dynamic region below stays
-  // small: the streaming tail, modals, composer, and its status footer.
-  // `assistant/chunk` preserves `entries` identity. Memoizing on that identity
-  // keeps long settled histories out of the per-token render path.
-  const settled = useMemo(() => settledEntryCount(view.entries), [view.entries])
-  // Claude-Code spacing: one blank row before each user prompt (except the
-  // first) separates replies from the next turn. Settled rows flush once with
-  // the reasoning toggle as it is NOW (Ctrl+R affects subsequent flushes);
-  // Ctrl+O browses the frozen history through a bounded selected-entry view.
+  // contract that lets arbitrarily long conversations scroll instead of
+  // freezing when the live tree exceeds the terminal height. The dynamic
+  // region below stays small: the streaming tail, modals, composer, and its
+  // status footer. `assistant/chunk` preserves `entries` identity.
+  //
+  // `computeSettledRows` extends the cached row set incrementally: the
+  // settled prefix is permanently final, so a grown boundary builds ONLY the
+  // newly settled suffix and reuses every cached element — long histories
+  // stop re-creating rows (and re-parsing MarkdownBody) on every durable
+  // event. A source-backed replay (`refreshEpoch` bump: resize / Ctrl+L /
+  // Ctrl+R remounts `<Static>`) rebuilds the CURRENT row set from index 0,
+  // so the replay stays complete and never ghosts a pending/running tail.
+  const settledRowsCache = useRef<SettledRowsCache | undefined>(undefined)
   const settledRows = useMemo(() => {
-    const rows: ReactElement[] = [createElement(Header, { key: 'header', resumed: props.resumed })]
-    view.entries.slice(0, settled).forEach((entry, index) => {
-      const row = createElement(EntryLine, { entry, showReasoning, verbose: false })
-      const roomyPrompt = entry.kind === 'user' && !entry.notice
-      if (roomyPrompt) {
-        rows.push(createElement(Box, { key: `prompt-before-${index}`, paddingX: 1 }, createElement(Text, null, ' ')))
-      }
-      rows.push(createElement(Box, { key: index, paddingX: 1 }, row))
-      if (roomyPrompt) {
-        rows.push(createElement(Box, { key: `prompt-after-${index}`, paddingX: 1 }, createElement(Text, null, ' ')))
-      }
-    })
-    return rows
-  }, [view.entries, settled, showReasoning, props.resumed])
+    const result = computeSettledRows(
+      settledRowsCache.current,
+      view.entries,
+      settled,
+      showReasoning,
+      props.resumed,
+      refreshEpoch,
+    )
+    settledRowsCache.current = result.cache
+    return result.cache.flat
+  }, [view.entries, settled, showReasoning, props.resumed, refreshEpoch])
 
   // Hook order is unconditional. Its dimensions drive every live-region
   // budget before any dynamic rows are constructed.
@@ -2619,9 +3213,9 @@ export function App(props: AppProps): ReactElement {
           ? Math.max(1, Math.floor(streamRows / 3))
           : 1
   const answerRows = view.streaming === '' ? 0 : Math.max(1, streamRows - reasoningRows)
-  const transcriptVisible = !modelOpen && !helpOpen && !modeOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !verboseOpen && !approvalPending && !questionPending
+  const transcriptVisible = !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !verboseOpen && !approvalPending && !questionPending
   const inspectorVisible = verboseOpen && !approvalPending && !questionPending
-  const modalVisible = modelOpen || helpOpen || modeOpen || resumeOpen || pluginOpen || statuslineOpen || themeOpen || historyOpen || inspectorVisible || approvalPending || questionPending
+  const modalVisible = modelOpen || helpOpen || modeOpen || permissionOpen || resumeOpen || pluginOpen || statuslineOpen || themeOpen || historyOpen || inspectorVisible || approvalPending || questionPending
   const closeInspector = useCallback((): void => {
     setVerboseOpen(false)
   }, [])
@@ -2638,12 +3232,125 @@ export function App(props: AppProps): ReactElement {
       setEffortLabel(effortId)
       notify(`model → next step uses ${label}${effortId === undefined || effortId === '' ? '' : `@${effortId}`}`)
       setModelOpen(false)
+      setProviderOpen(false)
+      setProviderAction(undefined)
       setEffortFor(undefined)
     } catch (error: unknown) {
       notify(`model switch failed: ${error instanceof Error ? error.message : String(error)}`, 'error')
     }
   }
 
+  const reloadModelSurfaces = (): void => {
+    setModelLoadEpoch(epoch => epoch + 1)
+  }
+  const closeModelSurface = (): void => {
+    setModelOpen(false)
+    setProviderOpen(false)
+    setProviderAction(undefined)
+    setEffortFor(undefined)
+  }
+  let modelSurface: ReactElement | undefined
+  if (modelOpen && !approvalPending && !questionPending) {
+    if (providerAction?.kind === 'credential' && props.saveModelProviderCredential !== undefined) {
+      modelSurface = createElement(ProviderCredentialPanel, {
+        target: providerAction.target,
+        save: props.saveModelProviderCredential,
+        done: () => {
+          const target = providerAction.target
+          setProviderAction(undefined)
+          setProviderOpen(false)
+          reloadModelSurfaces()
+          notify(`API key saved for ${target.displayName}; select a model`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerAction?.kind === 'unset' && props.unsetModelProviderCredential !== undefined) {
+      modelSurface = createElement(ProviderConfirmPanel, {
+        target: providerAction.target,
+        kind: 'credential',
+        confirm: props.unsetModelProviderCredential,
+        done: () => {
+          const target = providerAction.target
+          setProviderAction(undefined)
+          setProviderOpen(true)
+          reloadModelSurfaces()
+          notify(`API key removed for ${target.displayName}`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerAction?.kind === 'remove' && props.removeModelProvider !== undefined) {
+      modelSurface = createElement(ProviderConfirmPanel, {
+        target: providerAction.target,
+        kind: 'provider',
+        confirm: props.removeModelProvider,
+        done: () => {
+          const target = providerAction.target
+          setProviderAction(undefined)
+          setProviderOpen(true)
+          reloadModelSurfaces()
+          notify(`provider removed: ${target.displayName}`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerOpen) {
+      modelSurface = createElement(ProviderPanel, {
+        directory: providerDirectory,
+        error: providerError,
+        onCredential: (target: ProviderTargetView) => {
+          if (props.saveModelProviderCredential === undefined) {
+            notify('API key storage is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'credential', target })
+        },
+        onUnset: (target: ProviderTargetView) => {
+          if (props.unsetModelProviderCredential === undefined) {
+            notify('API key removal is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'unset', target })
+        },
+        onRemove: (target: ProviderTargetView) => {
+          if (props.removeModelProvider === undefined) {
+            notify('provider removal is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'remove', target })
+        },
+        onRetry: reloadModelSurfaces,
+        onBack: () => setProviderOpen(false),
+      })
+    } else if (effortFor !== undefined) {
+      modelSurface = createElement(EffortPanel, {
+        row: effortFor,
+        current: effortLabel,
+        select: (effortId: string) => applyModel(effortFor, effortId),
+        back: () => setEffortFor(undefined),
+      })
+    } else {
+      modelSurface = createElement(ModelPanel, {
+        directory,
+        error: modelError,
+        onSelect: (row: ModelRow) => {
+          // A model advertising several levels opens the effort stage first;
+          // one advertised level is its only option, while no capability uses
+          // the model default exactly as before.
+          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
+          applyModel(row, effortId)
+        },
+        ...(props.loadModelProviders === undefined || props.saveModelProviderCredential === undefined
+          ? {}
+          : { onProviders: () => setProviderOpen(true) }),
+        onRetry: reloadModelSurfaces,
+        onClose: closeModelSurface,
+      })
+    }
+  }
+
   return createElement(
     Box,
     { flexDirection: 'column' },
@@ -2661,7 +3368,8 @@ export function App(props: AppProps): ReactElement {
         view.streamingReasoning !== '' && reasoningRows > 0
           ? createElement(StreamTail, {
             text: showReasoning ? view.streamingReasoning : 'Thinking…',
-            prefix: '  ✻ ',
+            prefix: '✻ ',
+            continuationPrefix: '  ',
             dim: true,
             maxRows: reasoningRows,
           })
@@ -2681,38 +3389,7 @@ export function App(props: AppProps): ReactElement {
     transcriptVisible ? createElement(TodoPanel, { todos: view.todos }) : undefined,
     createElement(QuestionBar, { store: props.questions, snapshot: questionSnapshot, locked: false }),
     createElement(ApprovalBar, { snapshot: approvalSnapshot, locked: questionPending }),
-    modelOpen && !approvalPending && !questionPending
-      ? effortFor === undefined
-        ? createElement(ModelPanel, {
-          directory,
-          error: modelError,
-          onSelect: (row: ModelRow) => {
-            // A model advertising several levels opens the effort stage first;
-            // one advertised level is its only option (Codex's
-            // single-supported-effort shortcut), and no capability applies
-            // the model default exactly as before.
-            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
-            applyModel(row, effortId)
-          },
-          onRetry: () => {
-            setModelLoadEpoch(epoch => epoch + 1)
-          },
-          onClose: () => {
-            setModelOpen(false)
-            setEffortFor(undefined)
-          },
-        })
-        : createElement(EffortPanel, {
-          row: effortFor,
-          current: effortLabel,
-          select: (effortId: string) => applyModel(effortFor, effortId),
-          back: () => setEffortFor(undefined),
-        })
-      : undefined,
+    modelSurface,
     helpOpen && !approvalPending && !questionPending
       ? createElement(HelpPanel, {
         descriptors,
@@ -2743,6 +3420,22 @@ export function App(props: AppProps): ReactElement {
         close: () => setModeOpen(false),
       })
       : undefined,
+    permissionOpen && !approvalPending && !questionPending
+      ? createElement(PermissionPanel, {
+        current: props.permission,
+        load: props.loadPermissions,
+        select: (id: string) => {
+          try {
+            const selected = props.setPermission(id)
+            notify(`permission → ${selected}`)
+            setPermissionOpen(false)
+          } catch (reason: unknown) {
+            notify(`permission change failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+          }
+        },
+        close: () => setPermissionOpen(false),
+      })
+      : undefined,
     resumeOpen && !approvalPending && !questionPending
       ? createElement(ResumePanel, {
         currentCwd: props.workspaceRoot,
@@ -2816,6 +3509,10 @@ export function App(props: AppProps): ReactElement {
         openModel: () => {
           setDirectory(undefined)
           setModelError(undefined)
+          setProviderDirectory(undefined)
+          setProviderError(undefined)
+          setProviderOpen(false)
+          setProviderAction(undefined)
           setEffortFor(undefined)
           setModelOpen(true)
         },
@@ -2858,6 +3555,7 @@ export function App(props: AppProps): ReactElement {
           setHelpOpen(true)
         },
         openMode: () => setModeOpen(true),
+        openPermission: () => setPermissionOpen(true),
         openResume: () => setResumeOpen(true),
         openPlugin: (query = '') => { setPluginQuery(query); setPluginOpen(true) },
         openStatusline: () => setStatuslineOpen(true),
@@ -2896,7 +3594,6 @@ export function App(props: AppProps): ReactElement {
         cancelQueued: props.cancelQueued,
         historyFill,
         historyConsumed,
-        waveTick,
         waveTier,
         waveStyle,
       }),
@@ -2909,7 +3606,7 @@ export function App(props: AppProps): ReactElement {
           sessionId: props.sessionId,
           title: view.title,
           plan: view.plan,
-          permission: view.permission,
+          permission: view.permission !== '' ? view.permission : props.permission,
           sandbox: view.sandbox,
           goal: view.goal === undefined ? undefined : { phase: view.goal.phase, rounds: view.goal.rounds, max: view.goal.max },
         },