dsh-code 0.6.1 → 0.8.0

package/src/app.ts

@@ -22,21 +22,53 @@ import { assertNever } from '@deepseek-ai/dsh-llm'
 import type { CommandDescriptor } from '@deepseek-ai/dsh-commands'
 import type { TodoItem } from '@deepseek-ai/dsh-session'
 import type { AskUserQuestionAnswerItem } from '@deepseek-ai/dsh-user-questions'
-import { TUI_RGB, brand, dim, error as paintError } from './theme.ts'
+import {
+  brand,
+  dim,
+  error as paintError,
+  getPalette,
+  getTheme,
+  inkColor,
+  setTheme,
+  type RgbTriple,
+  type ThemeName,
+} 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'
 import type { ToolDetail } from './render/tool-detail.ts'
-import { busyChaseFrame, caretVisible, pulseFrame } from './render/animations.ts'
+import {
+  busyChaseFrame,
+  caretVisible,
+  DEEPSEEK_WAVE_TICK_MS,
+  deepseekWaveBorderColor,
+  deepseekWaveColumnBg,
+  deepseekWaveDuration,
+  deepseekWaveSpark,
+  deepseekWaveStyleRandom,
+  deepseekWaveTier,
+  deepseekWaveWordHue,
+  deepseekWaveWordVisible,
+  isOfficialDeepSeekLabel,
+  pulseFrame,
+  WAVE_BASE_DARK,
+  WAVE_BASE_LIGHT,
+  type DeepseekWaveStyle,
+  type DeepseekWaveTier,
+} from './render/animations.ts'
 import type { ApprovalSnapshot, ApprovalStore } from './approval.ts'
 import type { CommandsView } from './commands.ts'
 import type { ModelDirectory, ModelRow } from './models.ts'
+import type { ProviderSettingsDirectory, ProviderTargetView } from './provider-settings.ts'
 import type { QuestionSnapshot, QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
 import type { MentionCandidate } from './mentions.ts'
-import { 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,
@@ -59,6 +91,7 @@ import {
   STATUS_CYCLE_HINT,
   STATUS_GROUP_SEPARATOR,
   STATUS_ITEM_SEPARATOR,
+  STATUS_ROW2_INDENT,
   type StatusFacts,
   type StatusGroup,
   type StatusItemId,
@@ -79,6 +112,7 @@ import {
 import {
   lineSegment,
   markdownLines,
+  reasoningLines,
   styledLines,
   textLines,
   transcriptEntryLines,
@@ -103,6 +137,8 @@ export interface AppProps {
   skills: SkillsView
   /** `provider/model` selection serving this session (updated on /model). */
   model: string
+  /** Effective reasoning effort in force ('' when none), for the /model picker mark. */
+  effort?: string
   /** Working-directory basename the session serves. */
   cwd: string
   /** Absolute working directory used by session filters and references. */
@@ -113,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. */
@@ -127,10 +165,22 @@ export interface AppProps {
   loadModels(): Promise<ModelDirectory>
   /** Load @mention candidates for the typed query (files + sessions). */
   loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
-  /** Apply one /model selection; returns the display label. */
-  selectModel(row: ModelRow): string
+  /** 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. */
@@ -138,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>
@@ -150,6 +202,8 @@ export interface AppProps {
   statusline: readonly string[]
   /** Persist a new statusline item set; the runner surfaces IO failures as notices. */
   saveStatusline(items: readonly string[]): void
+  /** Apply and persist one /theme selection; the runner owns the theme.json file. */
+  saveTheme?(name: ThemeName): void
   /** Persistent cross-session input history (oldest first); the runner owns the file. */
   history: readonly string[]
   /** Persist one submitted prompt to the global history file. */
@@ -158,11 +212,6 @@ export interface AppProps {
   cancelQueued(messageId: string): void
 }
 
-/** Ink `color` string for one palette triple. */
-function inkColor(triple: readonly [number, number, number]): string {
-  return `rgb(${triple[0]}, ${triple[1]}, ${triple[2]})`
-}
-
 /** Pad text with spaces to a visible-column target (menu name column). */
 function padColumns(text: string, width: number): string {
   const clipped = truncateColumns(singleLineText(text), width)
@@ -199,7 +248,7 @@ function useStableInput(handler: (input: string, key: Key) => void, active: bool
 /** Single-cell stepped pulse: the web's 125ms flat-hold brightness steps over 1s. */
 function Pulse(): ReactElement {
   const tick = useFrames(125)
-  return createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, pulseFrame(tick))
+  return createElement(Text, { color: inkColor(getPalette().brandBright) }, pulseFrame(tick))
 }
 
 /**
@@ -210,7 +259,7 @@ function Pulse(): ReactElement {
  */
 function BusyChase(): ReactElement {
   const tick = useFrames(125)
-  return createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, busyChaseFrame(tick) + ' ')
+  return createElement(Text, { color: inkColor(getPalette().brandBright) }, busyChaseFrame(tick) + ' ')
 }
 
 /** Blinking block caret appended to streaming text. */
@@ -262,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,
+    )),
   )
 }
 
@@ -298,11 +357,13 @@ function segmentProps(style: MdSegment['style']): {
 } {
   switch (style) {
     case 'accent':
-      return { color: inkColor(TUI_RGB.brandBright), bold: undefined, italic: undefined, strikethrough: undefined }
+      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(TUI_RGB.code), bold: undefined, italic: undefined, strikethrough: undefined }
+      return { color: inkColor(getPalette().code), bold: undefined, italic: undefined, strikethrough: undefined }
     case 'dim':
-      return { color: inkColor(TUI_RGB.dim), bold: undefined, italic: undefined, strikethrough: undefined }
+      return { color: inkColor(getPalette().dim), bold: undefined, italic: undefined, strikethrough: undefined }
     case 'bold':
       return { color: undefined, bold: true, italic: undefined, strikethrough: undefined }
     case 'italic':
@@ -310,7 +371,7 @@ function segmentProps(style: MdSegment['style']): {
     case 'boldItalic':
       return { color: undefined, bold: true, italic: true, strikethrough: undefined }
     case 'strike':
-      return { color: inkColor(TUI_RGB.dim), bold: undefined, italic: undefined, strikethrough: true }
+      return { color: inkColor(getPalette().dim), bold: undefined, italic: undefined, strikethrough: true }
     default:
       return { color: undefined, bold: undefined, italic: undefined, strikethrough: undefined }
   }
@@ -326,15 +387,15 @@ function lineStyleProps(style: LineStyle): {
 } {
   switch (style) {
     case 'brand':
-      return { color: inkColor(TUI_RGB.brandBright), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().brandBright), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
     case 'success':
-      return { color: inkColor(TUI_RGB.success), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().success), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
     case 'error':
-      return { color: inkColor(TUI_RGB.error), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().error), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
     case 'warn':
-      return { color: inkColor(TUI_RGB.warn), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
+      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 }
   }
@@ -387,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,
@@ -407,7 +475,7 @@ function ToolDetailBody({ detail }: { detail: ToolDetail }): ReactElement {
             Text,
               {
                 key: at,
-                color: line.mark === '+' ? inkColor(TUI_RGB.success) : line.mark === '-' ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim),
+                color: line.mark === '+' ? inkColor(getPalette().success) : line.mark === '-' ? inkColor(getPalette().error) : inkColor(getPalette().dim),
                 wrap: 'truncate-end',
               },
             `  ${line.mark}${displayText(line.text)}`,
@@ -472,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': {
@@ -482,8 +550,8 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
       const mark = entry.state === 'running'
         ? createElement(Pulse)
         : entry.state === 'error'
-          ? createElement(Text, { color: inkColor(TUI_RGB.error) }, '⨯')
-          : createElement(Text, { color: inkColor(TUI_RGB.success) }, '⏺')
+          ? createElement(Text, { color: inkColor(getPalette().error) }, '⨯')
+          : createElement(Text, { color: inkColor(getPalette().success) }, '⏺')
       return createElement(
         Box,
         { flexDirection: 'column' },
@@ -492,14 +560,14 @@ 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 === ''
           ? undefined
           : createElement(
             Text,
-            { color: entry.state === 'error' ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim), wrap: verbose ? 'truncate-end' : undefined },
+            { color: entry.state === 'error' ? inkColor(getPalette().error) : inkColor(getPalette().dim), wrap: verbose ? 'truncate-end' : undefined },
             `  ⎿ ${displayText(entry.summary)}`,
           ),
         verbose && entry.detail !== undefined
@@ -511,8 +579,8 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
       const mark = entry.state === 'running'
         ? createElement(Pulse)
         : entry.state === 'error'
-          ? createElement(Text, { color: inkColor(TUI_RGB.error) }, '⨯')
-          : createElement(Text, { color: inkColor(TUI_RGB.success) }, '⏺')
+          ? createElement(Text, { color: inkColor(getPalette().error) }, '⨯')
+          : createElement(Text, { color: inkColor(getPalette().success) }, '⏺')
       return createElement(
         Box,
         { flexDirection: 'column' },
@@ -521,12 +589,12 @@ 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 === ''
           ? undefined
-          : createElement(Text, { color: inkColor(TUI_RGB.dim), wrap: verbose ? 'truncate-end' : undefined }, `  ⎿ ${displayText(entry.summary)}`),
+          : createElement(Text, { color: inkColor(getPalette().dim), wrap: verbose ? 'truncate-end' : undefined }, `  ⎿ ${displayText(entry.summary)}`),
       )
     }
     case 'turn-marker':
@@ -546,7 +614,7 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
       // next attempt is underway.
       return createElement(
         Text,
-        { color: entry.state === 'running' ? inkColor(TUI_RGB.warn) : inkColor(TUI_RGB.dim), wrap: verbose ? 'truncate-end' : undefined },
+        { color: entry.state === 'running' ? inkColor(getPalette().warn) : inkColor(getPalette().dim), wrap: verbose ? 'truncate-end' : undefined },
         `  ↻ retry ${entry.attempt}/${entry.max} · ${displayText(entry.code)} · ${Math.round(entry.delayMs / 100) / 10}s`,
       )
     case 'files': {
@@ -572,39 +640,48 @@ 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(TUI_RGB.brand), paddingX: 1, alignSelf: 'flex-start' },
-      createElement(Text, { color: inkColor(TUI_RGB.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).
-    { flexDirection: 'row', gap: 2, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand), paddingX: 1, alignSelf: 'flex-start' },
+    // 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,
       { flexDirection: 'column', width: WHALE_GLYPH_COLUMNS, justifyContent: 'center' },
-      ...WHALE_GLYPH.map((row, index) => createElement(Text, { key: index, color: inkColor(TUI_RGB.brand) }, row)),
+      ...WHALE_GLYPH.map((row, index) => createElement(Text, { key: index, color: inkColor(getPalette().brand) }, row)),
     ),
     createElement(
       Box,
-      { flexDirection: 'column', justifyContent: 'center' },
-      createElement(Text, { color: inkColor(TUI_RGB.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),
     ),
   )
 }
@@ -626,10 +703,10 @@ function TodoPanel({ todos }: { todos: readonly TodoItem[] }): ReactElement | un
     { paddingX: 1 },
     createElement(
       Text,
-      { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' },
+      { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' },
       `todos ${completed}/${todos.length}`,
       createElement(Text, { dimColor: true }, ` · ${inProgress} active · ${pending} pending`),
-      current === undefined ? '' : createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, ` · ${todoMark(current.status)} ${displayText(current.content)}`),
+      current === undefined ? '' : createElement(Text, { color: inkColor(getPalette().brandBright) }, ` · ${todoMark(current.status)} ${displayText(current.content)}`),
     ),
   )
 }
@@ -637,7 +714,7 @@ function TodoPanel({ todos }: { todos: readonly TodoItem[] }): ReactElement | un
 /**
  * Ink props for one status tone: the Codex status-line accent mapping over
  * the DeepSeek palette, all blue by design — the status bar speaks only in
- * degrees of blue (deep accent, primary figures, bright model identity, sky
+ * degrees of blue (deep accent, primary figures, model identity, sky
  * paths and done states), with amber/red reserved for warnings and errors.
  */
 function statusToneProps(tone: StatusTone): {
@@ -647,28 +724,38 @@ function statusToneProps(tone: StatusTone): {
 } {
   switch (tone) {
     case 'model':
-      return { color: inkColor(TUI_RGB.brandBright), bold: true, dimColor: undefined }
+      // Same tone as the working-directory segment: the model name reads as
+      // a path fact, not a brand accent.
+      return { color: inkColor(getPalette().code), bold: true, dimColor: undefined }
     case 'live':
-      return { color: inkColor(TUI_RGB.brandBright), bold: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().brandBright), bold: undefined, dimColor: undefined }
     case 'path':
-      return { color: inkColor(TUI_RGB.code), bold: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().code), bold: undefined, dimColor: undefined }
     case 'branch':
-      return { color: inkColor(TUI_RGB.text), bold: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().text), bold: undefined, dimColor: undefined }
     case 'value':
-      return { color: inkColor(TUI_RGB.brand), bold: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().brand), bold: undefined, dimColor: undefined }
     case 'label':
     case 'meta':
-      return { color: undefined, bold: undefined, dimColor: true }
+      // Explicit RGB gray, not SGR dim: Ink's token stream inherits an
+      // unclosed `dim` into the next span (the model name after the busy dot
+      // rendered dim+bold and looked gray), and a concrete color closes
+      // cleanly on the style transition. Theme-aware via the palette.
+      return { color: inkColor(getPalette().dim), bold: undefined, dimColor: undefined }
     case 'accent':
-      return { color: inkColor(TUI_RGB.brandDeep), bold: undefined, dimColor: undefined }
+      return { color: inkColor(getPalette().brandDeep), bold: undefined, dimColor: undefined }
+    // 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 'success':
-      return { color: inkColor(TUI_RGB.code), bold: true, dimColor: undefined }
+      return { color: inkColor(getPalette().code), bold: true, dimColor: undefined }
     case 'warn':
-      return { color: inkColor(TUI_RGB.warn), bold: true, dimColor: undefined }
+      return { color: inkColor(getPalette().warn), bold: true, dimColor: undefined }
     case 'error':
-      return { color: inkColor(TUI_RGB.error), bold: true, dimColor: undefined }
+      return { color: inkColor(getPalette().error), bold: true, dimColor: undefined }
     default:
-      return { color: undefined, bold: undefined, dimColor: true }
+      return { color: inkColor(getPalette().dim), bold: undefined, dimColor: undefined }
   }
 }
 
@@ -681,7 +768,28 @@ function statusToneProps(tone: StatusTone): {
  * content, so the footer degrades to a single row on narrow terminals. Both
  * layouts arrive pre-measured from the pure reducer, so Ink only paints;
  * truncation degrades groups, it never wraps a row.
+ *
+ * The DeepSeek easter egg: when the model label *switches* to an official
+ * DeepSeek route, the composer's INPUT ROW (not the frame) plays Codex's
+ * effort-ignition "Wave" — a blue crest sweeping the content row column by
+ * column, with the `· ✦ ✧` sparkles on the deepseek tier — and the prompt
+ * marker keeps the tier accent afterwards. The border stays a constant
+ * static dim; only the row's per-column background tints during the wave,
+ * so the row and column budget is untouched throughout.
  */
+
+/** Theme anchors for the one-shot composer wave, read from the active palette
+ * so the wave stays coordinated in both themes. The flash tier runs the
+ * brand blues; the deepseek tier swaps in the code sky-blue for a brighter,
+ * richer mix. Codex's Wave bands carry no hue index (only hues[0] tints the
+ * row), so the accent the prompt keeps is always hues[0]. */
+function deepseekWaveHues(tier: DeepseekWaveTier): readonly [RgbTriple, RgbTriple, RgbTriple] {
+  const palette = getPalette()
+  return tier === 'flash'
+    ? [palette.brandBright, palette.brand, palette.brandMid]
+    : [palette.brandBright, palette.code, palette.brandMid]
+}
+
 function StatusLine({ facts, stats, busy, columns, items }: {
   facts: StatusFacts
   stats: Parameters<typeof layoutStatusBar>[1]
@@ -690,11 +798,12 @@ function StatusLine({ facts, stats, busy, columns, items }: {
   items: readonly string[]
 }): 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) {
-        leftParts.push(createElement(Text, { key: key + 'gs' + groupIndex, dimColor: true }, STATUS_GROUP_SEPARATOR))
+        leftParts.push(createElement(Text, { key: key + 'gs' + groupIndex, color: inkColor(getPalette().dim) }, STATUS_GROUP_SEPARATOR))
       }
       group.spans.forEach((span, spanIndex) => {
         leftParts.push(createElement(
@@ -707,7 +816,7 @@ function StatusLine({ facts, stats, busy, columns, items }: {
     const rightParts: ReactElement[] = []
     row.right.forEach((span, index) => {
       if (index > 0) {
-        rightParts.push(createElement(Text, { key: key + 'rs' + index, dimColor: true }, STATUS_ITEM_SEPARATOR))
+        rightParts.push(createElement(Text, { key: key + 'rs' + index, color: inkColor(getPalette().dim) }, STATUS_ITEM_SEPARATOR))
       }
       rightParts.push(createElement(
         Text,
@@ -716,7 +825,7 @@ function StatusLine({ facts, stats, busy, columns, items }: {
       ))
     })
     if (row.hint) {
-      rightParts.push(createElement(Text, { key: key + 'hint', dimColor: true }, STATUS_CYCLE_HINT))
+      rightParts.push(createElement(Text, { key: key + 'hint', color: inkColor(getPalette().dim) }, STATUS_CYCLE_HINT))
     }
     // Each row already fits the column budget; truncate-end stays as the
     // terminal-measurement backstop so a drifting cell count clips instead
@@ -724,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,
     )
@@ -736,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,
   )
 }
 
@@ -751,10 +861,10 @@ function NoticeLine({ text, tone, columns }: {
   columns: number
 }): ReactElement {
   const color = tone === 'error'
-    ? TUI_RGB.error
+    ? getPalette().error
     : tone === 'warning'
-      ? TUI_RGB.warn
-      : TUI_RGB.brandBright
+      ? getPalette().warn
+      : getPalette().brandBright
   const mark = tone === 'error' ? '⨯' : tone === 'warning' ? '!' : '•'
   return createElement(
     Box,
@@ -825,8 +935,8 @@ function ApprovalBar({ snapshot, locked }: { snapshot: ApprovalSnapshot; locked:
   const { answered } = snapshot
   return createElement(
     Box,
-    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.warn) },
-    createElement(Text, { color: inkColor(TUI_RGB.warn), bold: true, wrap: 'truncate-end' }, truncateColumns(`⏸ waiting for approval · lines ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)),
+    { 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(`⏸ waiting for approval · lines ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
     createElement(StyledRows, { lines: content.slice(visibleScroll, visibleScroll + viewport.bodyRows) }),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
@@ -1093,10 +1203,10 @@ function QuestionBar({ store, snapshot, locked }: { store: QuestionStore; snapsh
         : '↑↓ choose · pgup/pgdn scroll · enter submit · c custom · esc interrupt'
   return createElement(
     Box,
-    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep) },
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(isPlan ? getPalette().brand : getPalette().brandDeep) },
     createElement(
       Text,
-      { color: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep), bold: true, wrap: 'truncate-end' },
+      { color: inkColor(isPlan ? getPalette().brand : getPalette().brandDeep), bold: true, wrap: 'truncate-end' },
       truncateColumns(`${isPlan ? '📋 plan review' : '❓ question'} ${index + 1}/${pending.request.questions.length} · lines ${rendered.lines.length === 0 ? 0 : visibleScroll + 1}-${Math.min(rendered.lines.length, visibleScroll + viewport.bodyRows)}/${rendered.lines.length}`, viewport.contentColumns),
     ),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
@@ -1107,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 {
@@ -1136,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)
@@ -1168,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
@@ -1176,7 +1292,7 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
     : error !== undefined
       ? [createElement(
         Text,
-        { key: 'error', color: inkColor(TUI_RGB.error), wrap: 'truncate-end' },
+        { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' },
         truncateColumns(`  ${singleLineText(error)}`, viewport.contentColumns),
       )]
       : [
@@ -1184,7 +1300,7 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
           ? []
           : [createElement(
             Text,
-            { key: 'failures', color: inkColor(TUI_RGB.warn), wrap: 'truncate-end' },
+            { key: 'failures', color: inkColor(getPalette().warn), wrap: 'truncate-end' },
             truncateColumns(`  unavailable providers: ${directory?.failures.join(', ')}`, viewport.contentColumns),
           )]),
         ...(rows.length === 0
@@ -1194,15 +1310,16 @@ 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(
     Box,
-    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand) },
-    createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — select model${rows.length === 0 ? '' : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)),
+    { 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}`)
@@ -1210,14 +1327,310 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
         Text,
         {
           key: `${row.provider}/${row.model}`,
-          color: index === cursor ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+          color: index === cursor ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim),
           wrap: 'truncate-end',
         },
         truncateColumns(`${index === cursor ? '❯ ' : '  '}${label}`, viewport.contentColumns),
       )
     }),
     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)),
   )
 }
 
@@ -1258,16 +1671,19 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
       ? []
       : [createElement(
         Text,
-        { key: 'commands-error', color: inkColor(TUI_RGB.error), wrap: 'truncate-end' },
+        { key: 'commands-error', color: inkColor(getPalette().error), wrap: 'truncate-end' },
         truncateColumns(`  command catalog unavailable: ${singleLineText(commandError)}`, viewport.contentColumns),
       )]),
     createElement(Box, { key: 'local-help' }, row('/help', 'show this overlay')),
     createElement(Box, { key: 'local-model' }, row('/model', 'switch the model')),
+    createElement(Box, { key: 'local-effort' }, row('/effort', 'adjust reasoning effort for the current model')),
     createElement(Box, { key: 'local-mode' }, row('/mode', 'inspect or select the agent preset (/mode [preset])')),
+    createElement(Box, { key: 'local-permission' }, row('/permission', 'inspect or select the permission preset (/permission [preset])')),
     createElement(Box, { key: 'local-new' }, row('/new', 'create and switch to a fresh session (/new [preset])')),
     createElement(Box, { key: 'local-resume' }, row('/resume', 'browse or switch root sessions (/resume [id|prefix])')),
     createElement(Box, { key: 'local-plugin' }, row('/plugin', 'inspect the live plugin composition')),
     createElement(Box, { key: 'local-statusline' }, row('/statusline', 'customize the status line items')),
+    createElement(Box, { key: 'local-theme' }, row('/theme', 'switch the color theme')),
     createElement(Box, { key: 'local-history' }, row('/history', 'search and recall past prompts')),
     createElement(Box, { key: 'local-clear' }, row('/clear', 'clear the screen')),
     createElement(Box, { key: 'local-export' }, row('/export', 'export the transcript to markdown (/export [path])')),
@@ -1288,7 +1704,7 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
       ? []
       : [createElement(
         Text,
-        { key: 'skills-error', color: inkColor(TUI_RGB.error), wrap: 'truncate-end' },
+        { key: 'skills-error', color: inkColor(getPalette().error), wrap: 'truncate-end' },
         truncateColumns(`  skill catalog unavailable: ${singleLineText(skillError)}`, viewport.contentColumns),
       )]),
     ...skills.map(skill => createElement(
@@ -1326,8 +1742,8 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
 
   return createElement(
     Box,
-    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand) },
-    createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/help — keys and commands · rows ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)),
+    { 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(`/help — keys and commands · rows ${content.length === 0 ? 0 : visibleScroll + 1}-${Math.min(content.length, visibleScroll + viewport.bodyRows)}/${content.length}`, viewport.contentColumns)),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
     ...content.slice(visibleScroll, visibleScroll + viewport.bodyRows),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
@@ -1358,6 +1774,59 @@ function editorWindow(value: string, cursor: number, columns: number): { before:
   return { before, caret, after }
 }
 
+/** The empty-composer placeholder text (shared by the static and wave paths). */
+const COMPOSER_PLACEHOLDER = 'type a message · / commands · @ mentions'
+
+/** One physical cell of the wave-painted composer row: a char plus styles. */
+interface ComposerCell {
+  char: string
+  color?: string
+  backgroundColor?: string
+  bold?: boolean
+  inverse?: boolean
+  dim?: boolean
+}
+
+/** Adjacent cells with identical styling merge into one styled Text span. */
+function sameCellStyle(a: ComposerCell, b: ComposerCell): boolean {
+  return a.color === b.color
+    && a.backgroundColor === b.backgroundColor
+    && a.bold === b.bold
+    && a.inverse === b.inverse
+    && a.dim === b.dim
+}
+
+/**
+ * Render the wave row as one Text whose cells carry per-column
+ * `backgroundColor` runs: the Codex Wave crest paints a smooth gradient
+ * (one SGR run per sampled column) over the prompt, draft, cursor,
+ * placeholder, and the trailing blank fill — the draft stays readable
+ * because the tint blends at ≤ 0.55 toward the theme's blank-cell base.
+ */
+function waveRowSpans(cells: readonly ComposerCell[]): ReactElement[] {
+  const spans: ReactElement[] = []
+  let start = 0
+  while (start < cells.length) {
+    const cell = cells[start]!
+    let end = start + 1
+    while (end < cells.length && sameCellStyle(cells[end]!, cell)) end += 1
+    spans.push(createElement(
+      Text,
+      {
+        key: start,
+        color: cell.color,
+        backgroundColor: cell.backgroundColor,
+        bold: cell.bold,
+        inverse: cell.inverse,
+        dimColor: cell.dim,
+      },
+      cells.slice(start, end).map(c => c.char).join(''),
+    ))
+    start = end
+  }
+  return spans
+}
+
 /**
  * The Ctrl+O transcript inspector: one selected durable entry at a time,
  * with independent history selection and content scrolling. The complete
@@ -1474,11 +1943,11 @@ function VerbosePanel({ entries, onClose }: { entries: readonly TranscriptEntry[
       width: viewport.outerColumns,
       paddingX: 1,
       borderStyle: 'round',
-      borderColor: inkColor(TUI_RGB.brand),
+      borderColor: inkColor(getPalette().brand),
     },
     createElement(
       Text,
-      { color: inkColor(TUI_RGB.brand), bold: true, wrap: 'truncate-end' },
+      { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' },
       truncateColumns(title, viewport.contentColumns),
     ),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
@@ -1526,9 +1995,14 @@ interface CompletionCandidate {
  * Resolve completion candidates for the current input: TUI-local commands,
  * the live registry descriptors, and user-invocable skills, filtered by the
  * typed prefix. Command names win collisions (the dispatch tries the
- * registry first and only then falls through to the skill gesture).
+ * registry first and only then falls through to the skill gesture), and a
+ * later duplicate name never renders twice.
+ *
+ * A bare `/` returns the FULL merged list — Codex's command popup shows every
+ * command inside a scroll window on an empty filter, and the menu's own
+ * selection window bounds the visible rows, so no slice cap is needed.
  */
-function completionCandidates(
+export function completionCandidates(
   value: string,
   descriptors: readonly CommandDescriptor[],
   skills: readonly SkillRow[],
@@ -1538,20 +2012,23 @@ function completionCandidates(
   const local: CompletionCandidate[] = [
     { label: '/help', description: 'show commands', origin: 'command' },
     { label: '/model', description: 'switch the model', origin: 'command' },
+    { label: '/effort', description: 'adjust reasoning effort for the current model', origin: 'command' },
     { label: '/mode', description: 'select the agent preset', origin: 'command' },
+    { label: '/permission', description: 'inspect or select the permission preset', origin: 'command' },
     { label: '/new', description: 'start a fresh session', origin: 'command' },
     { label: '/resume', description: 'browse or switch sessions', origin: 'command' },
     { label: '/plugin', description: 'inspect the plugin composition', origin: 'command' },
     { label: '/statusline', description: 'customize the status line', origin: 'command' },
+    { label: '/theme', description: 'switch the color theme', origin: 'command' },
     { label: '/history', description: 'search and recall past prompts', origin: 'command' },
     { label: '/clear', description: 'clear the screen', origin: 'command' },
     { label: '/export', description: 'export the transcript to markdown', origin: 'command' },
     { label: '/title', description: 'rename this session', origin: 'command' },
     { label: '/quit', description: 'exit', origin: 'command' },
   ]
-  // Local commands shadow registry names (e.g. the plugin-registered
-  // /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))
@@ -1568,12 +2045,19 @@ function completionCandidates(
       description: skill.modelInvocable ? `skill · ${skill.description}` : `skill (user only) · ${skill.description}`,
       origin: 'skill',
     }))
-  const all = [...local, ...registry, ...skillRows]
-  // The menu itself caps its visible rows behind a scroll window, so the
-  // candidate cap only bounds how many entries cycling can reach; 11 keeps
-  // every TUI-local command reachable with an empty prefix.
-  if (prefix === '') return all.slice(0, 11)
-  return all.filter(candidate => candidate.label.slice(1).startsWith(prefix)).slice(0, 11)
+  // One row per name, first occurrence wins: local before registry before
+  // skills, which is exactly the shadowing precedence above (defensive
+  // against duplicate registry names across scopes).
+  const seen = new Set<string>()
+  const all: CompletionCandidate[] = []
+  for (const candidate of [...local, ...registry, ...skillRows]) {
+    const name = candidate.label.slice(1)
+    if (seen.has(name)) continue
+    seen.add(name)
+    all.push(candidate)
+  }
+  if (prefix === '') return all
+  return all.filter(candidate => candidate.label.slice(1).startsWith(prefix))
 }
 
 /**
@@ -1607,6 +2091,7 @@ function CompletionMenu({ active, mention, index, rows }: {
   const selected = rows.length === 0 ? 0 : index % rows.length
   const first = selectionWindow(selected, rows.length, limit)
   const visible = rows.slice(first, first + limit)
+  const hidden = rows.length - visible.length
   return createElement(
     Box,
     { flexDirection: 'column', marginLeft: 2, paddingY: verticalPadding },
@@ -1618,13 +2103,17 @@ function CompletionMenu({ active, mention, index, rows }: {
         Text,
         {
           key: candidate.label,
-          color: absolute === selected ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+          color: absolute === selected ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim),
           wrap: 'truncate-end',
         },
         `${absolute === selected ? '❯ ' : '  '}${padColumns(candidate.label, nameWidth)}${dim(truncateColumns(displayText(candidate.description), descBudget))}`,
         )
       })),
-    showFooter ? createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(mention ? '↑↓ choose · tab insert' : '↑↓ choose · tab complete')) : undefined,
+    // Scroll affordance: with the full merged catalog (commands + registry +
+    // skills) the six-row window rarely shows the tail — count and hint keep
+    // the rest discoverable without inflating the menu budget.
+    hidden > 0 ? createElement(Text, { key: 'more', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, dim(`  … +${hidden} more`)) : undefined,
+    showFooter ? createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, dim(mention ? `↑↓ choose · ${rows.length} items · tab insert` : `↑↓ choose · ${rows.length} items · tab complete`)) : undefined,
   )
 }
 
@@ -1634,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, openHelp, openMode, openResume, openPlugin, openStatusline, openHistory, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed }: {
+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
@@ -1645,11 +2134,14 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   interrupt(): boolean
   quit(): void
   openModel(): void
+  openEffort(): void
   openHelp(): void
   openMode(): void
+  openPermission(): void
   openResume(): void
   openPlugin(query?: string): void
   openStatusline(): void
+  openTheme(): void
   openHistory(): void
   createSession(mode?: string): void
   cancelSessionSwitch(): boolean
@@ -1678,6 +2170,12 @@ 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 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
 }): ReactElement {
   const columns = useStdout().stdout?.columns ?? 80
   const [value, setValue] = useState('')
@@ -1915,6 +2413,18 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         openModel()
         return
       }
+      if (text === '/effort' || text.startsWith('/effort ')) {
+        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()
@@ -1943,6 +2453,10 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         openStatusline()
         return
       }
+      if (text === '/theme') {
+        openTheme()
+        return
+      }
       if (text === '/history') {
         openHistory()
         return
@@ -2075,69 +2589,407 @@ 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
+  const tierHues = waveTier === null ? null : deepseekWaveHues(waveTier)
+  const promptColor = tierHues === null ? inkColor(getPalette().brand) : inkColor(tierHues[0])
+  const promptGlyph = waveTier === 'flash' ? '›' : waveTier === 'deepseek' ? '»' : '❯'
   if (frozen) {
     const frozen = value === ''
       ? 'type a message'
       : verboseLine(value, Math.max(1, columns - 6))
     return createElement(
       Box,
-      { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(TUI_RGB.dim), paddingX: 1 },
+      { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(getPalette().dim), paddingX: 1 },
       createElement(
         Text,
         { wrap: 'truncate-end' },
-        createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? '… ' : '❯ '),
+        createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, busy ? '… ' : `${promptGlyph} `),
         frozen,
       ),
     )
   }
 
+  // The bordered frame: static dim at rest; while the wave runs the border
+  // breathes with the sweep (dim blends toward the tier accent and back), so
+  // the frame glows up while the crest crosses the row.
+  const frame = (row: ReactElement, borderRgb?: RgbTriple): ReactElement => createElement(
+    Box,
+    { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(borderRgb ?? getPalette().dim), paddingX: 1 },
+    row,
+  )
+  const menu = createElement(CompletionMenu, {
+    active: menuActive,
+    mention: mentionActive,
+    index: completionIndex,
+    rows: menuRows,
+  })
+
+  // Static row (idle, busy, or after the wave): prompt + editor window. The
+  // prompt marker keeps the tier accent while an official DeepSeek model is
+  // applied, restoring the static brand ❯ on any other route.
   const editor = editorWindow(value, cursor, Math.max(1, columns - 6))
+  const staticRow = createElement(
+    Text,
+    { wrap: 'truncate-end' },
+    busy
+      ? createElement(BusyChase)
+      : createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, `${promptGlyph} `),
+    value === '' ? undefined : editor.before,
+    createElement(CursorBlock, { char: editor.caret }),
+    value === '' && !busy
+      ? createElement(Text, { dimColor: true }, COMPOSER_PLACEHOLDER)
+      : editor.after,
+  )
+
+  // Wave row: the input row assembled column by column, each cell carrying
+  // the sampled wave `backgroundColor` (null outside the crest → transparent),
+  // so the crest sweeps the FULL content row — prompt, draft, cursor,
+  // placeholder, and the trailing blank fill. The deepseek tier drops the
+  // `· ✦ ✧` sparkles into the rightmost blank cell from 900ms on.
+  const waveRow = (): ReactElement => {
+    const contentWidth = Math.max(1, columns - 5)
+    const waveEditor = editorWindow(value, cursor, Math.max(1, contentWidth - 2))
+    const hues = deepseekWaveHues(waveTier!)
+    const style = waveStyle!
+    const base = getTheme() === 'light' ? WAVE_BASE_LIGHT : WAVE_BASE_DARK
+    const waveBg = (column: number): string | undefined => {
+      const rgb = deepseekWaveColumnBg(waveTick!, column, contentWidth, waveTier!, style, hues, base)
+      return rgb === null ? undefined : inkColor(rgb)
+    }
+    const cells: ComposerCell[] = []
+    cells.push({ char: promptGlyph, color: promptColor, bold: true, backgroundColor: waveBg(0) })
+    cells.push({ char: ' ', color: promptColor, backgroundColor: waveBg(1) })
+    for (const char of waveEditor.before) {
+      cells.push({ char, backgroundColor: waveBg(cells.length) })
+    }
+    cells.push({ char: waveEditor.caret, inverse: true, backgroundColor: waveBg(cells.length) })
+    if (value === '' && !busy) {
+      for (let at = 0; at < COMPOSER_PLACEHOLDER.length; at += 1) {
+        cells.push({ char: COMPOSER_PLACEHOLDER[at]!, dim: true, backgroundColor: waveBg(cells.length) })
+      }
+    } else {
+      for (const char of waveEditor.after) {
+        cells.push({ char, backgroundColor: waveBg(cells.length) })
+      }
+    }
+    while (cells.length < contentWidth) {
+      cells.push({ char: ' ', backgroundColor: waveBg(cells.length) })
+    }
+    // The brand wordmark rides the wave's middle: `deepseek` in the tier's
+    // cycled hues, placed in the row's mid-section and only over blank or
+    // placeholder cells — real draft text is never covered.
+    if (deepseekWaveWordVisible(waveTick!, waveTier!, style)) {
+      const word = 'deepseek'
+      const start = Math.max(2, Math.floor((contentWidth - word.length) / 2))
+      let clear = true
+      for (let at = 0; at < word.length; at += 1) {
+        const cell = cells[start + at]
+        if (cell === undefined || (cell.char !== ' ' && cell.dim !== true)) { clear = false; break }
+      }
+      if (clear) {
+        for (let at = 0; at < word.length; at += 1) {
+          const cell = cells[start + at]!
+          cell.char = word[at]!
+          cell.color = inkColor(deepseekWaveWordHue(at, hues))
+          cell.bold = true
+          cell.dim = false
+        }
+      }
+    }
+    // The tail sparkles belong to the Wave style's deepseek tier only
+    // (Codex paints spark_frame on Wave+Ultra).
+    if (waveTier === 'deepseek' && style === 'wave') {
+      const spark = deepseekWaveSpark(waveTick!)
+      if (spark !== null) {
+        const last = cells[cells.length - 1]
+        if (last !== undefined && last.char === ' ') {
+          last.char = spark
+          last.color = promptColor
+          last.bold = true
+          last.dim = false
+        }
+      }
+    }
+    const borderRgb = deepseekWaveBorderColor(waveTick!, waveTier!, style, hues, getPalette().dim)
+    return frame(createElement(Text, { wrap: 'truncate-end' }, ...waveRowSpans(cells)), borderRgb)
+  }
 
   return createElement(
     Box,
     { flexDirection: 'column' },
-    // The completion dropdown rides directly above the box (Claude-Code
-    // anchor): rendered from the editor's own live state, never lifted.
-    createElement(CompletionMenu, {
-      active: menuActive,
-      mention: mentionActive,
-      index: completionIndex,
-      rows: menuRows,
-    }),
-    // The framed input box: a visible boundary so the prompt never blends
-    // into the transcript above it; the cursor block sits immediately after
-    // the prompt marker (leftmost), with the dim placeholder trailing it —
-    // no extra space, so the empty state reads `❯ ▮type a message…`.
-    createElement(
-      Box,
-      { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(TUI_RGB.dim), paddingX: 1 },
-      createElement(
-        Text,
-        { wrap: 'truncate-end' },
-        busy
-          ? createElement(BusyChase)
-          : createElement(Text, { color: inkColor(TUI_RGB.brand) }, '❯ '),
-        value === '' ? undefined : editor.before,
-        createElement(CursorBlock, { char: editor.caret }),
-        value === '' && !busy
-          ? createElement(Text, { dimColor: true }, 'type a message · / commands · @ mentions')
-          : editor.after,
-      ),
-    ),
+    menu,
+    waveTick !== null && waveTier !== null && !busy ? waveRow() : frame(staticRow),
   )
 }
 
+/** 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. */
+  const [effortLabel, setEffortLabel] = useState<string | undefined>(props.effort)
+  /** DeepSeek easter egg: switching INTO an official DeepSeek route plays
+   * one of Codex's three ignition styles (Wave / Aurora / Pulse, picked at
+   * random without repeating) across the composer's padded band (33ms tick,
+   * 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. 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)
+  const previousEffort = useRef<string | undefined>(props.effort)
+  const previousStyle = useRef<DeepseekWaveStyle | undefined>(undefined)
+  useEffect(() => {
+    const previous = previousModel.current
+    previousModel.current = modelLabel
+    // The wave replays when the applied model changes OR its effort level
+    // changes on the same official DeepSeek route (Codex replays the
+    // ignition on effort changes too).
+    const effortChanged = previousEffort.current !== effortLabel
+    previousEffort.current = effortLabel
+    const modelChanged = previous !== undefined && previous !== modelLabel
+    if (!isOfficialDeepSeekLabel(modelLabel)) {
+      setWaveTier(null)
+      setWaveStyle(null)
+      return
+    }
+    if (modelChanged || effortChanged) {
+      setWaveTier(deepseekWaveTier(modelLabel))
+      const nextStyle = deepseekWaveStyleRandom(previousStyle.current)
+      previousStyle.current = nextStyle
+      setWaveStyle(nextStyle)
+    }
+  }, [modelLabel, effortLabel])
   const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
   const [modelError, setModelError] = useState<string | undefined>(undefined)
+  const [providerDirectory, setProviderDirectory] = useState<ProviderSettingsDirectory | undefined>(undefined)
+  const [providerError, setProviderError] = useState<string | undefined>(undefined)
   const [modelLoadEpoch, setModelLoadEpoch] = useState(0)
   const [notice, setNotice] = useState<{ text: string; tone: NoticeTone } | undefined>(undefined)
   const notify = useCallback((text: string, tone: NoticeTone = 'info'): void => {
@@ -2164,17 +3016,42 @@ 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('')
   const [statuslineOpen, setStatuslineOpen] = useState(false)
   const [statuslineItems, setStatuslineItems] = useState<readonly StatusItemId[]>(() => parseStatuslineItems(props.statusline))
+  const [themeOpen, setThemeOpen] = useState(false)
   const [historyOpen, setHistoryOpen] = useState(false)
   /** The /history panel's accepted entry: text plus its recall-space index. */
   const [historyFill, setHistoryFill] = useState<{ text: string; index: number } | undefined>(undefined)
@@ -2191,62 +3068,79 @@ 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 && !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)
+    setThemeOpen(false)
     setHistoryOpen(false)
     setVerboseOpen(false)
   }, [approvalPending, questionPending])
 
   // Append-only transcript: everything up to the first still-mutable entry
-  // (a running tool/retry) flushes through Ink's `<Static>` into native
+  // (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.
@@ -2319,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 && !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 || historyOpen || inspectorVisible || approvalPending || questionPending
+  const modalVisible = modelOpen || helpOpen || modeOpen || permissionOpen || resumeOpen || pluginOpen || statuslineOpen || themeOpen || historyOpen || inspectorVisible || approvalPending || questionPending
   const closeInspector = useCallback((): void => {
     setVerboseOpen(false)
   }, [])
@@ -2330,6 +3224,133 @@ export function App(props: AppProps): ReactElement {
     setRefreshEpoch(epoch => epoch + 1)
   }
 
+  /** Apply one /model pick: record the selection, close the panel, report via notice. */
+  const applyModel = (row: ModelRow, effortId: string | undefined): void => {
+    try {
+      const label = props.selectModel(row, effortId)
+      setModelLabel(label)
+      setEffortLabel(effortId)
+      notify(`model → next step uses ${label}${effortId === undefined || effortId === '' ? '' : `@${effortId}`}`)
+      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' },
@@ -2347,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,
           })
@@ -2367,27 +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
-      ? createElement(ModelPanel, {
-        directory,
-        error: modelError,
-        onSelect: (row: ModelRow) => {
-          try {
-            setModelLabel(props.selectModel(row))
-            notify(`model → next step uses ${row.provider}/${row.model}`)
-            setModelOpen(false)
-          } catch (error: unknown) {
-            notify(`model switch failed: ${error instanceof Error ? error.message : String(error)}`, 'error')
-          }
-        },
-        onRetry: () => {
-          setModelLoadEpoch(epoch => epoch + 1)
-        },
-        onClose: () => {
-          setModelOpen(false)
-        },
-      })
-      : undefined,
+    modelSurface,
     helpOpen && !approvalPending && !questionPending
       ? createElement(HelpPanel, {
         descriptors,
@@ -2418,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,
@@ -2440,6 +3458,21 @@ export function App(props: AppProps): ReactElement {
         close: () => setStatuslineOpen(false),
       })
       : undefined,
+    themeOpen && !approvalPending && !questionPending
+      ? createElement(ThemePanel, {
+        current: getTheme(),
+        select: (name: ThemeName) => {
+          // Apply immediately (module-level palette), persist through the
+          // runner, then close: the close re-render paints with the new
+          // palette. `auto` stores as requested; detection is a later step.
+          setTheme(name)
+          props.saveTheme?.(name)
+          notify(`theme → ${name}`)
+          setThemeOpen(false)
+        },
+        close: () => setThemeOpen(false),
+      })
+      : undefined,
     historyOpen && !approvalPending && !questionPending
       ? createElement(HistoryPanel, {
         entries: recallSpace,
@@ -2476,15 +3509,57 @@ export function App(props: AppProps): ReactElement {
         openModel: () => {
           setDirectory(undefined)
           setModelError(undefined)
+          setProviderDirectory(undefined)
+          setProviderError(undefined)
+          setProviderOpen(false)
+          setProviderAction(undefined)
+          setEffortFor(undefined)
           setModelOpen(true)
         },
+        openEffort: () => {
+          // /effort adjusts the CURRENT model's reasoning: resolve it from
+          // the live catalog, then open the same effort stage the /model
+          // picker would. Match on the applied label (what the status bar
+          // shows) — `props.model` may still carry the deployment default
+          // until the next request header lands. The model-id fallback
+          // prefers a reasoning-capable row (several routes may serve the
+          // same id), and a capability-lookup failure reads as "retry",
+          // never as "the model has no efforts" — the adapter advertises
+          // levels for every deepseek model, so "no efforts" is almost
+          // always a failed resolveModelInfo, not a fact.
+          void props.loadModels().then((loaded) => {
+            const [provider, model] = modelLabel.split('/')
+            const row = loaded.rows.find(candidate => candidate.provider === provider && candidate.model === model)
+              ?? loaded.rows.find(candidate => candidate.model === model && candidate.reasoning !== undefined)
+              ?? loaded.rows.find(candidate => candidate.model === model)
+            if (row === undefined) {
+              notify('current model is not in the catalog', 'warning')
+              return
+            }
+            const rowTag = `${row.provider}/${row.model}`
+            if (loaded.reasoningFailures?.includes(rowTag) === true) {
+              notify('reasoning levels temporarily unavailable (capability lookup failed) — try again', 'warning')
+              return
+            }
+            if (row.reasoning === undefined || row.reasoning.efforts.length === 0) {
+              notify('current model does not expose reasoning efforts', 'warning')
+              return
+            }
+            setEffortFor(row)
+            setModelOpen(true)
+          }, (error: unknown) => {
+            notify(`model lookup failed: ${error instanceof Error ? error.message : String(error)}`, 'error')
+          })
+        },
         openHelp: () => {
           setHelpOpen(true)
         },
         openMode: () => setModeOpen(true),
+        openPermission: () => setPermissionOpen(true),
         openResume: () => setResumeOpen(true),
         openPlugin: (query = '') => { setPluginQuery(query); setPluginOpen(true) },
         openStatusline: () => setStatuslineOpen(true),
+        openTheme: () => setThemeOpen(true),
         openHistory: () => setHistoryOpen(true),
         createSession: props.createSession,
         cancelSessionSwitch: props.cancelSessionSwitch,
@@ -2519,6 +3594,8 @@ export function App(props: AppProps): ReactElement {
         cancelQueued: props.cancelQueued,
         historyFill,
         historyConsumed,
+        waveTier,
+        waveStyle,
       }),
       createElement(StatusLine, {
         facts: {
@@ -2529,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 },
         },