dsh-code 0.7.0 → 0.9.0

package/src/app.ts

@@ -35,6 +35,7 @@ import {
 } from './theme.ts'
 import { ThemePanel } from './theme-panel.ts'
 import { WHALE_GLYPH, WHALE_GLYPH_COLUMNS } from './whale-glyph.ts'
+import { DSH_CODE_VERSION } from './version.ts'
 import type { TranscriptStore } from './store.ts'
 import { settledEntryCount, type TranscriptEntry } from './render/projection.ts'
 import { renderMarkdown, type MdSegment, visibleColumns } from './render/markdown.ts'
@@ -61,11 +62,14 @@ import {
 import type { ApprovalSnapshot, ApprovalStore } from './approval.ts'
 import type { CommandsView } from './commands.ts'
 import type { ModelDirectory, ModelRow } from './models.ts'
+import type { ProviderSettingsDirectory, ProviderTargetView } from './provider-settings.ts'
 import type { QuestionSnapshot, QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
 import type { MentionCandidate } from './mentions.ts'
-import { EffortPanel, ModePanel, HistoryPanel, PluginPanel, ResumePanel, StatuslinePanel } from './kernel-panels.ts'
+import type { SubagentFeedView, SubagentRow } from './subagents.ts'
+import { AgentsPanel, EffortPanel, ModePanel, HistoryPanel, PermissionPanel, PluginPanel, ResumePanel, StatuslinePanel, SubagentPanel } from './kernel-panels.ts'
 import type { PresetRow } from './presets.ts'
+import type { PermissionRow } from './permissions.ts'
 import type { PluginRow } from './plugin-inventory.ts'
 import {
   recallEntries,
@@ -88,6 +92,7 @@ import {
   STATUS_CYCLE_HINT,
   STATUS_GROUP_SEPARATOR,
   STATUS_ITEM_SEPARATOR,
+  STATUS_ROW2_INDENT,
   type StatusFacts,
   type StatusGroup,
   type StatusItemId,
@@ -108,6 +113,7 @@ import {
 import {
   lineSegment,
   markdownLines,
+  reasoningLines,
   styledLines,
   textLines,
   transcriptEntryLines,
@@ -126,6 +132,8 @@ export interface AppProps {
   approval: ApprovalStore
   /** ask_user_question store fed by the single UI provider. */
   questions: QuestionStore
+  /** Live subagent activity feed (child sessions of the current root). */
+  subagents: SubagentFeedView
   /** Live slash-command descriptor list (completion candidates). */
   commands: CommandsView
   /** Live user-invocable skill catalog (completion candidates). */
@@ -144,8 +152,10 @@ export interface AppProps {
   sessionId: string
   /** Whether this session was resumed from persistence. */
   resumed: boolean
-  /** Agent preset currently composing the session. */
+  /** Agent preset selected for the current or pending first session. */
   mode: string
+  /** Permission preset selected for the current or pending first session. */
+  permission: string
   /** Submit one line: slash commands to the registry, other text to the agent. */
   dispatch(text: string): void
   /** Submit steering: consumed at the running turn's next step boundary. */
@@ -160,8 +170,28 @@ export interface AppProps {
   loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
   /** Apply one /model selection (with an advertised reasoning effort, when picked); returns the display label. */
   selectModel(row: ModelRow, effortId?: string): string
+  /** The /subagent override label, '' when delegated agents follow the current model. */
+  subagentModel: string
+  /** Apply one /subagent model pick; returns the override label. */
+  setSubagentModel(row: ModelRow, effortId?: string): string
+  /** Drop the /subagent override (delegated agents follow the current model). */
+  clearSubagentModel(): void
+  /** Delete one session subtree; resolves with the outcome line. */
+  deleteSession(id: string): Promise<string>
+  /** Load provider/settings/credential facts for the optional /model provider stage. */
+  loadModelProviders?(): Promise<ProviderSettingsDirectory>
+  /** Subscribe to Harness credential/settings/adapter invalidations while /model is open. */
+  subscribeModelProviders?(listener: () => void): () => void
+  /** Store or rotate one provider credential through the Harness credential service. */
+  saveModelProviderCredential?(target: ProviderTargetView, key: string): Promise<void>
+  /** Remove one writable provider credential without removing its settings profile. */
+  unsetModelProviderCredential?(target: ProviderTargetView): Promise<void>
+  /** Remove one user-owned provider profile and its page-managed credential. */
+  removeModelProvider?(target: ProviderTargetView): Promise<void>
   /** Cycle to the next permission preset (Shift+Tab); returns the new label. */
   cyclePermission(): string
+  /** Select or inspect a permission preset without requiring a pre-existing session. */
+  setPermission(id: string): string
   /** Export the transcript to a markdown file (/export [path]); reports via notices. */
   exportTranscript(argument: string): Promise<void>
   /** Rename the session (/title <text>); returns the outcome line for the notice. */
@@ -169,9 +199,13 @@ 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>
+  /** Load this session's subagent conversations (children by lineage). */
+  loadSubagents(): Promise<readonly SessionRow[]>
   switchSession(row: SessionRow): void
   cancelSessionSwitch(): boolean
   loadPlugins(): readonly PluginRow[]
@@ -290,30 +324,40 @@ function DeepDivingLine({ since }: { since: number }): ReactElement {
  * the freshest tokens stay visible while a long reply streams; the complete
  * text lands in the flushed scrollback once the turn assembles it.
  */
-function StreamTail({ text, dim, maxRows, prefix, children }: {
+function StreamTail({ text, dim, maxRows, prefix = '', continuationPrefix = prefix, children }: {
   text: string
   dim: boolean
   maxRows: number
   prefix?: string
+  continuationPrefix?: string
   children?: ReactElement
 }): ReactElement {
   const columns = useStdout().stdout?.columns ?? 80
   const safeRows = Math.max(1, maxRows)
   // App padding consumes two columns; the final extra column keeps a caret
-  // from wrapping onto an unbudgeted row.
-  const contentColumns = Math.max(10, columns - 3 - visibleColumns(prefix ?? ''))
+  // from wrapping onto an unbudgeted row. Both prefixes participate because
+  // every physical row now repeats its hanging indent.
+  const prefixColumns = Math.max(visibleColumns(prefix), visibleColumns(continuationPrefix))
+  const contentColumns = Math.max(10, columns - 3 - prefixColumns)
   const initial = displayTail(text, contentColumns, safeRows)
   // Reserve one row for the omission marker only when a marker is needed.
   const tail = initial.truncated && safeRows > 1
     ? displayTail(text, contentColumns, safeRows - 1)
     : initial
+  const rows = tail.text.split('\n')
   return createElement(
     Box,
     { flexDirection: 'column' },
     tail.truncated && safeRows > 1
-      ? createElement(Text, { dimColor: true }, '  …')
+      ? createElement(Text, { color: inkColor(getPalette().dim) }, continuationPrefix, '…')
       : undefined,
-    createElement(Text, { dimColor: dim || undefined }, prefix, tail.text, children),
+    ...rows.map((row, index) => createElement(
+      Text,
+      { key: index, dimColor: dim || undefined },
+      index === 0 ? prefix : continuationPrefix,
+      row,
+      index + 1 === rows.length ? children : undefined,
+    )),
   )
 }
 
@@ -327,6 +371,8 @@ function segmentProps(style: MdSegment['style']): {
   switch (style) {
     case 'accent':
       return { color: inkColor(getPalette().brandBright), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'accentBold':
+      return { color: inkColor(getPalette().brandBright), bold: true, italic: undefined, strikethrough: undefined }
     case 'code':
       return { color: inkColor(getPalette().code), bold: undefined, italic: undefined, strikethrough: undefined }
     case 'dim':
@@ -362,7 +408,7 @@ function lineStyleProps(style: LineStyle): {
     case 'warn':
       return { color: inkColor(getPalette().warn), bold: undefined, italic: undefined, strikethrough: undefined, dimColor: undefined }
     case 'dimItalic':
-      return { color: undefined, bold: undefined, italic: true, strikethrough: undefined, dimColor: true }
+      return { color: inkColor(getPalette().dim), bold: undefined, italic: true, strikethrough: undefined, dimColor: undefined }
     default:
       return { ...segmentProps(style), dimColor: undefined }
   }
@@ -415,6 +461,13 @@ function MarkdownBody({ text, indent = 0 }: { text: string; indent?: number }):
   )
 }
 
+/** Expanded reasoning with the same two-column content edge as the reply. */
+function ReasoningBody({ text }: { text: string }): ReactElement {
+  const columns = useStdout().stdout?.columns ?? 80
+  const lines = useMemo(() => reasoningLines(text, Math.max(10, columns - 2)), [text, columns])
+  return createElement(StyledRows, { lines })
+}
+
 /**
  * One expanded tool-card body for the verbose transcript (Ctrl+O): the
  * presentation contract's structured cards — inline diffs, read windows,
@@ -500,8 +553,8 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
         entry.reasoning === ''
           ? undefined
           : showReasoning
-            ? createElement(Text, { dimColor: true, italic: true }, `  ✻ ${displayText(entry.reasoning)}`)
-            : createElement(Text, { dimColor: true }, `  ✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`),
+            ? createElement(ReasoningBody, { text: entry.reasoning })
+            : createElement(Text, { color: inkColor(getPalette().dim) }, `✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`),
         createElement(MarkdownBody, { text: entry.text, indent: 2 }),
       )
     case 'tool': {
@@ -520,7 +573,7 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
           { wrap: verbose ? 'truncate-end' : undefined },
           mark,
           ' ',
-          brand(entry.name),
+          brand(displayText(entry.name)),
           entry.preview === '' ? '' : ` ${dim(displayText(entry.preview))}`,
         ),
         entry.summary === ''
@@ -549,7 +602,7 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
           { wrap: verbose ? 'truncate-end' : undefined },
           mark,
           ' ',
-          brand(`/${entry.name}`),
+          brand(displayText(`/${entry.name}`)),
           entry.args === '' ? '' : ` ${dim(displayText(entry.args))}`,
         ),
         entry.summary === ''
@@ -600,28 +653,31 @@ function EntryLine({ entry, showReasoning, verbose }: { entry: TranscriptEntry;
 }
 
 /**
- * The whale wordmark header in DeepSeek blue, hugging its content width.
- * The 8-row half-block glyph pairs adjacent lines, so on a terminal too
- * short to show it whole (or mid-resize) the clipped pairs garble the
- * screen — below the height floor the header collapses to a single-line
- * wordmark that stays correct at any size.
+ * The whale header with a compact three-line copy lockup. The title, bilingual
+ * slogan, and key hint stay centered inside the existing eight content rows,
+ * preserving the Static header's ten physical rows. Short or narrow terminals
+ * keep a one-line form.
  */
 function Header({ resumed }: { resumed: boolean }): ReactElement {
-  const rows = useStdout().stdout?.rows ?? 40
-  const hint = resumed ? 'resumed session · /help commands · Esc interrupt' : '/help commands · Esc interrupt · Ctrl+C quit'
-  if (rows < 20) {
+  const stdout = useStdout().stdout
+  const rows = stdout?.rows ?? 40
+  const columns = stdout?.columns ?? 80
+  const title = `DeepSeek Harness · v${DSH_CODE_VERSION}`
+  const slogan = 'Into the Unknown  探索未至之境'
+  const hint = resumed ? 'resumed · /help · Esc interrupt' : '/help · Esc interrupt · Ctrl+C quit'
+  const copyColumns = Math.max(visibleColumns(title), visibleColumns(slogan), visibleColumns(hint))
+  const compact = `${title} · ${hint}`
+  if (rows < 20 || columns < WHALE_GLYPH_COLUMNS + copyColumns + 8) {
     return createElement(
       Box,
-      { flexDirection: 'row', gap: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1, alignSelf: 'flex-start' },
-      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true }, 'DeepSeek Harness'),
-      createElement(Text, { dimColor: true }, hint),
+      { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1 },
+      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true, wrap: 'truncate-end' }, truncateColumns(compact, Math.max(1, columns - 5))),
     )
   }
   return createElement(
     Box,
-    // alignSelf shrinks the border to the whale-plus-wordmark content instead
-    // of stretching across the terminal and stranding empty space on the right
-    // (the compact-banner treatment the Claude Code welcome uses).
+    // alignSelf shrinks the border to the whale-plus-copy content instead of
+    // stretching across the terminal and stranding empty space on the right.
     { flexDirection: 'row', gap: 2, borderStyle: 'round', borderColor: inkColor(getPalette().brand), paddingX: 1, alignSelf: 'flex-start' },
     createElement(
       Box,
@@ -630,9 +686,15 @@ function Header({ resumed }: { resumed: boolean }): ReactElement {
     ),
     createElement(
       Box,
-      { flexDirection: 'column', justifyContent: 'center' },
-      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true }, 'DeepSeek Harness'),
-      createElement(Text, { dimColor: true }, hint),
+      { flexDirection: 'column', width: copyColumns, justifyContent: 'center' },
+      createElement(Text, { color: inkColor(getPalette().brandBright), bold: true, wrap: 'truncate-end' }, title),
+      createElement(
+        Text,
+        { color: inkColor(getPalette().code), wrap: 'truncate-end' },
+        createElement(Text, { bold: true }, 'Into the Unknown'),
+        '  探索未至之境',
+      ),
+      createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, hint),
     ),
   )
 }
@@ -642,6 +704,30 @@ function todoMark(status: TodoItem['status']): string {
   return status === 'completed' ? '✓' : status === 'in_progress' ? '●' : '○'
 }
 
+/**
+ * One-row live subagent summary (the Codex agent status feed, compressed to
+ * the transcript's budget): running count, total, and the most recently
+ * active child's current activity. One line, never more — the full view is
+ * the /agents panel.
+ */
+function AgentsLine({ rows }: { rows: readonly SubagentRow[] }): ReactElement | undefined {
+  if (rows.length === 0) return undefined
+  const running = rows.filter(row => row.state !== 'done').length
+  const newest = [...rows].sort((left, right) => right.updatedAt - left.updatedAt)[0]!
+  const mark = newest.state === 'done' ? '✓' : newest.state === 'idle' ? '⏸' : '●'
+  return createElement(
+    Box,
+    { paddingX: 1 },
+    createElement(
+      Text,
+      { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' },
+      `agents ${running} live`,
+      createElement(Text, { color: inkColor(getPalette().dim) }, ` · ${rows.length} total · /agents`),
+      createElement(Text, { color: inkColor(getPalette().text) }, ` · ${mark} ${newest.label} ${newest.activity}`),
+    ),
+  )
+}
+
 /** One-row todo summary: task count cannot grow the live Ink tree. */
 function TodoPanel({ todos }: { todos: readonly TodoItem[] }): ReactElement | undefined {
   if (todos.length === 0) return undefined
@@ -695,19 +781,10 @@ function statusToneProps(tone: StatusTone): {
       return { color: inkColor(getPalette().dim), bold: undefined, dimColor: undefined }
     case 'accent':
       return { color: inkColor(getPalette().brandDeep), bold: undefined, dimColor: undefined }
-    // Context-bar segment shades, dark → light across the DeepSeek blues:
-    // system/prompt/assistant/thinking/tools. The tools segment borrows the
-    // code sky-blue as the fifth shade (no new theme token).
-    case 'ctxSystem':
-      return { color: inkColor(getPalette().brandDeep), bold: undefined, dimColor: undefined }
-    case 'ctxPrompt':
+    // Context-bar fill: one DeepSeek blue over the whole occupied run; the
+    // dotted free track reads through the dim label gray.
+    case 'ctxFill':
       return { color: inkColor(getPalette().brand), bold: undefined, dimColor: undefined }
-    case 'ctxAssistant':
-      return { color: inkColor(getPalette().brandMid), bold: undefined, dimColor: undefined }
-    case 'ctxThinking':
-      return { color: inkColor(getPalette().brandBright), bold: undefined, dimColor: undefined }
-    case 'ctxTools':
-      return { color: inkColor(getPalette().code), bold: undefined, dimColor: undefined }
     case 'success':
       return { color: inkColor(getPalette().code), bold: true, dimColor: undefined }
     case 'warn':
@@ -759,7 +836,7 @@ function StatusLine({ facts, stats, busy, columns, items }: {
 }): ReactElement {
   const layout = layoutStatusBar(facts, stats, Math.max(8, columns - 2), { busy, items })
 
-  const renderRow = (row: { left: readonly StatusGroup[]; right: readonly StatusSpan[]; hint: boolean }, key: string): ReactElement => {
+  const renderRow = (row: { left: readonly StatusGroup[]; right: readonly StatusSpan[]; hint: boolean }, key: string, indent = 0): ReactElement => {
     const leftParts: ReactElement[] = []
     row.left.forEach((group, groupIndex) => {
       if (groupIndex > 0) {
@@ -793,9 +870,10 @@ function StatusLine({ facts, stats, busy, columns, items }: {
     return createElement(
       Box,
       // Match the prompt text inside the bordered composer: one border column
-      // plus one padding column. Keeping these rows margin-free also makes
-      // the composer and status a fixed bottom unit in every interface.
-      { paddingLeft: 2, justifyContent: rightParts.length > 0 ? 'space-between' : undefined },
+      // plus one padding column. The secondary row adds the model-name indent
+      // (its budget already shrinks by the same amount) so its figures align
+      // under the model name rather than under the busy dot.
+      { paddingLeft: 2 + indent, justifyContent: rightParts.length > 0 ? 'space-between' : undefined },
       createElement(Text, { wrap: 'truncate-end' }, ...leftParts),
       rightParts.length > 0 ? createElement(Text, { wrap: 'truncate-end' }, ...rightParts) : undefined,
     )
@@ -805,7 +883,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,
   )
 }
 
@@ -836,72 +914,139 @@ function NoticeLine({ text, tone, columns }: {
   )
 }
 
-/** The y/n approval bar rendered while an approval ask is pending. */
-function ApprovalBar({ snapshot, locked }: { snapshot: ApprovalSnapshot; locked: boolean }): ReactElement | undefined {
+/** One selectable approval decision (Codex approval-overlay wording). */
+interface ApprovalOption {
+  readonly key: 'allow' | 'reject-note' | 'reject'
+  readonly label: string
+  readonly hotkey: string
+}
+
+/** The fixed decision list; answers stay in the binary answerer vocabulary. */
+const APPROVAL_OPTIONS: readonly ApprovalOption[] = [
+  { key: 'allow', label: 'Yes, proceed', hotkey: 'y' },
+  { key: 'reject-note', label: 'No, and tell it what to do differently', hotkey: 'n' },
+  { key: 'reject', label: 'No, continue without running it', hotkey: 'd' },
+]
+
+/**
+ * The approval dialog (Codex ApprovalOverlay contract): a bold question
+ * header, the bounded command body with an explicit overflow marker, a
+ * numbered option list with a `›` cursor, single-key shortcuts, and digits
+ * for direct selection. Askers queue FIFO — the count rides the header.
+ * The upstream answerer vocabulary stays binary (`allowed-once` /
+ * `rejected`): "tell it what to do differently" rejects and hands the
+ * composer back with a hint notice, exactly Codex's decline-then-type flow.
+ */
+function ApprovalBar({ snapshot, locked, notify }: {
+  snapshot: ApprovalSnapshot
+  locked: boolean
+  notify(text: string, tone?: NoticeTone): void
+}): ReactElement | undefined {
   const stdout = useStdout().stdout
   const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
-  const [scroll, setScroll] = useState(0)
+  const [cursor, setCursor] = useState(0)
   const pending = snapshot.pending
-  const active = !locked && snapshot.pending !== undefined && !snapshot.answered
-  const content = useMemo<readonly StyledLine[]>(() => pending === undefined
+  const active = !locked && pending !== undefined && !snapshot.answered
+  const body = useMemo<readonly StyledLine[]>(() => pending === undefined || pending.command === ''
     ? []
-    : [
-      ...styledLines([lineSegment(pending.headline, 'warn')], viewport.contentColumns),
-      ...(pending.command === '' ? [] : textLines(`  ${pending.command}`, viewport.contentColumns, 'dim')),
-    ], [pending, viewport.contentColumns])
-  const visibleScroll = clampScroll(scroll, content.length, viewport.bodyRows)
+    : textLines(pending.command, viewport.contentColumns, 'dim'), [pending, viewport.contentColumns])
 
   useEffect(() => {
-    setScroll(0)
+    setCursor(0)
   }, [pending])
 
-  useEffect(() => {
-    if (visibleScroll !== scroll) setScroll(visibleScroll)
-  }, [visibleScroll, scroll])
+  const decide = (option: ApprovalOption): void => {
+    const ask = snapshot.pending
+    if (ask === undefined || snapshot.answered) return
+    if (option.key === 'allow') {
+      ask.answer('allowed-once')
+      return
+    }
+    ask.answer('rejected')
+    if (option.key === 'reject-note') {
+      notify('rejected — type below what it should do differently (it steers the next step)', 'warning')
+    }
+  }
 
   useInput((input, key) => {
-    if (snapshot.pending === undefined) return
+    const ask = snapshot.pending
+    if (ask === undefined || snapshot.answered) return
     if (key.upArrow) {
-      setScroll(current => moveScroll(current, -1, content.length, viewport.bodyRows))
+      setCursor(current => (current + APPROVAL_OPTIONS.length - 1) % APPROVAL_OPTIONS.length)
       return
     }
     if (key.downArrow) {
-      setScroll(current => moveScroll(current, 1, content.length, viewport.bodyRows))
+      setCursor(current => (current + 1) % APPROVAL_OPTIONS.length)
       return
     }
-    if (key.pageUp) {
-      setScroll(current => moveScroll(current, -Math.max(1, viewport.bodyRows - 1), content.length, viewport.bodyRows))
+    if (key.return) {
+      decide(APPROVAL_OPTIONS[cursor]!)
       return
     }
-    if (key.pageDown) {
-      setScroll(current => moveScroll(current, Math.max(1, viewport.bodyRows - 1), content.length, viewport.bodyRows))
+    if (key.escape) {
+      decide(APPROVAL_OPTIONS[2]!)
       return
     }
-    if (snapshot.answered) return
     if (input === 'y' || input === 'Y') {
-      snapshot.pending.answer('allowed-once')
+      decide(APPROVAL_OPTIONS[0]!)
       return
     }
     if (input === 'n' || input === 'N') {
-      snapshot.pending.answer('rejected')
+      decide(APPROVAL_OPTIONS[1]!)
+      return
+    }
+    if (input === 'd' || input === 'D') {
+      decide(APPROVAL_OPTIONS[2]!)
+      return
+    }
+    if (/^[1-9]$/u.test(input)) {
+      const index = Number(input) - 1
+      if (index < APPROVAL_OPTIONS.length) decide(APPROVAL_OPTIONS[index]!)
     }
   }, { isActive: active })
-  if (snapshot.pending === undefined) return undefined
+
+  if (pending === undefined) return undefined
   if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const queuedSuffix = snapshot.queued > 0 ? ` · +${snapshot.queued} queued` : ''
   if (viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('approval · y allow · n reject', viewport.contentColumns))
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`approval${queuedSuffix} · enter/y allow · esc/n reject`, viewport.contentColumns))
   }
-  const { answered } = snapshot
+  // Body budget: title + options + footer consume fixed rows; the command
+  // preview shrinks with an explicit overflow marker (Codex's "[… N lines]").
+  const reservedRows = 3 + APPROVAL_OPTIONS.length
+  const bodyBudget = Math.max(1, viewport.bodyRows - reservedRows)
+  const visibleBody = body.slice(0, bodyBudget)
+  const overflow = body.length - visibleBody.length
   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(`⏸ 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 }),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns(answered
+    createElement(
+      Text,
+      { color: inkColor(getPalette().warn), bold: true, wrap: 'truncate-end' },
+      truncateColumns(`${pending.headline}${queuedSuffix}`, viewport.contentColumns),
+    ),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 && body.length > 0 }),
+    ...visibleBody.map((line, index) => createElement(StyledRows, { key: `body-${index}`, lines: [line] })),
+    ...(overflow > 0
+      ? [createElement(Text, { key: 'overflow', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`… +${overflow} more lines · ctrl+o shows the full call in the transcript`, viewport.contentColumns))]
+      : []),
+    ...(body.length > 0 ? [createElement(PanelGap, { visible: viewport.gapRows > 0 })] : []),
+    ...APPROVAL_OPTIONS.map((option, index) => {
+      const selected = !snapshot.answered && index === cursor
+      return createElement(
+        Text,
+        {
+          key: option.key,
+          color: selected ? inkColor(getPalette().brandBright) : inkColor(getPalette().text),
+          bold: selected || undefined,
+          wrap: 'truncate-end',
+        },
+        truncateColumns(`${selected ? '›' : ' '} ${index + 1}. ${option.label} (${option.hotkey})`, viewport.contentColumns),
+      )
+    }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(snapshot.answered
       ? 'submitted…'
-      : '↑↓/pgup/pgdn scroll · y allow once · n reject', viewport.contentColumns))),
+      : '↑↓ choose · enter confirm · y/n/d quick · esc reject', viewport.contentColumns)),
   )
 }
 
@@ -1176,10 +1321,13 @@ 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, current, onSelect, onProviders, onRetry, onClose }: {
   directory: ModelDirectory | undefined
   error: string | undefined
+  /** `provider/model` label of the applied model: the cursor lands on it once. */
+  current?: string
   onSelect(row: ModelRow): void
+  onProviders?(): void
   onRetry(): void
   onClose(): void
 }): ReactElement {
@@ -1187,14 +1335,27 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
   const stdout = useStdout().stdout
   const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
   const rows = directory?.rows ?? []
+  const positioned = useRef(false)
 
   useEffect(() => {
-    if (rows.length === 0) {
-      if (cursor !== 0) setCursor(0)
+    // Open ON the applied model (Codex resumes the previous pick): the first
+    // non-empty directory positions the cursor once, never on later refreshes.
+    if (positioned.current || rows.length === 0 || current === undefined) {
+      if (rows.length === 0) {
+        if (cursor !== 0) setCursor(0)
+        return
+      }
+      if (cursor >= rows.length) setCursor(rows.length - 1)
       return
     }
-    if (cursor >= rows.length) setCursor(rows.length - 1)
-  }, [rows.length, cursor])
+    const index = rows.findIndex(row => `${row.provider}/${row.model}` === current)
+    if (index >= 0) {
+      positioned.current = true
+      setCursor(index)
+    } else if (cursor >= rows.length) {
+      setCursor(Math.max(0, rows.length - 1))
+    }
+  }, [rows, cursor, current])
 
   useInput((input, key) => {
     if (key.escape || input === 'q') {
@@ -1205,6 +1366,10 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
       onRetry()
       return
     }
+    if (input === 'a' && onProviders !== undefined) {
+      onProviders()
+      return
+    }
     if (rows.length === 0) return
     if (key.upArrow) {
       setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
@@ -1237,7 +1402,8 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
 
   if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
   if (viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/model · r retry · esc/q close', viewport.contentColumns))
+    const providers = onProviders === undefined ? '' : ' · a providers'
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`/model${providers} · r retry · esc/q close`, viewport.contentColumns))
   }
 
   const stateRows: ReactElement[] = directory === undefined && error === undefined
@@ -1263,7 +1429,8 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
   // Measurement and rendering share the same physical-row budget: state
   // messages consume body rows before selectable entries, as in Codex's
   // list-selection views.
-  const rowBudget = Math.max(0, viewport.bodyRows - stateRows.length)
+  const visibleStateRows = stateRows.slice(0, viewport.bodyRows)
+  const rowBudget = Math.max(0, viewport.bodyRows - visibleStateRows.length)
   const first = selectionWindow(cursor, rows.length, rowBudget)
   const visible = rowBudget === 0 ? [] : rows.slice(first, first + rowBudget)
   return createElement(
@@ -1271,7 +1438,7 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
     { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
     createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — select model${rows.length === 0 ? '' : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
-    ...stateRows,
+    ...visibleStateRows,
     ...visible.map((row) => {
       const index = rows.indexOf(row)
       const label = displayText(`${row.providerName} · ${row.modelName}`)
@@ -1286,7 +1453,303 @@ function ModelPanel({ directory, error, onSelect, onRetry, onClose }: {
       )
     }),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns('↑↓ move · pgup/pgdn page · g/G ends · enter select · r retry · esc/q close', viewport.contentColumns))),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, dim(truncateColumns(`↑↓ move · pgup/pgdn page · enter select${onProviders === undefined ? '' : ' · a providers'} · r retry · esc/q close`, viewport.contentColumns))),
+  )
+}
+
+/** Compact provider-state copy; only value-free credential facts cross this boundary. */
+function providerStateLabel(row: ProviderTargetView): string {
+  const route = row.active ? 'active' : 'dormant'
+  const credential = row.credential
+  if (credential?.kind === 'error') return `${route} · key status unavailable`
+  if (credential?.kind === 'facts') {
+    if (!credential.configured) return `${route} · key missing`
+    const source = credential.source === undefined ? 'configured' : singleLineText(credential.source)
+    return `${route} · key ${source}${credential.writable ? '' : ' · read-only'}`
+  }
+  return `${route} · ${row.configured ? 'provider auth' : 'not configured'}`
+}
+
+/** The provider-management stage reached from /model with `a`. */
+function ProviderPanel({ directory, error, onCredential, onUnset, onRemove, onRetry, onBack }: {
+  directory: ProviderSettingsDirectory | undefined
+  error: string | undefined
+  onCredential(target: ProviderTargetView): void
+  onUnset(target: ProviderTargetView): void
+  onRemove(target: ProviderTargetView): void
+  onRetry(): void
+  onBack(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const rows = directory?.rows ?? []
+  const [cursor, setCursor] = useState(0)
+  const [actionError, setActionError] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    if (rows.length === 0) {
+      if (cursor !== 0) setCursor(0)
+      return
+    }
+    if (cursor >= rows.length) setCursor(rows.length - 1)
+  }, [rows.length, cursor])
+
+  useStableInput((input, key) => {
+    if (key.escape || input === 'q') {
+      onBack()
+      return
+    }
+    if (input === 'r') {
+      setActionError(undefined)
+      onRetry()
+      return
+    }
+    if (rows.length === 0) return
+    if (key.upArrow) {
+      setActionError(undefined)
+      setCursor(cursor > 0 ? cursor - 1 : rows.length - 1)
+      return
+    }
+    if (key.downArrow) {
+      setActionError(undefined)
+      setCursor(cursor < rows.length - 1 ? cursor + 1 : 0)
+      return
+    }
+    if (key.pageUp) {
+      setActionError(undefined)
+      setCursor(current => Math.max(0, current - Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    if (key.pageDown) {
+      setActionError(undefined)
+      setCursor(current => Math.min(rows.length - 1, current + Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    const target = rows[cursor]
+    if (target === undefined) return
+    if (input === 'd') {
+      const facts = target.credential
+      if (facts?.kind !== 'facts' || !facts.configured) {
+        setActionError('this provider has no configured API key to remove')
+      } else if (!facts.writable) {
+        setActionError('this API key is supplied read-only by the environment')
+      } else {
+        onUnset(target)
+      }
+      return
+    }
+    if (input === 'x') {
+      if (!target.removable) {
+        setActionError('this provider profile is not removable')
+      } else {
+        onRemove(target)
+      }
+      return
+    }
+    if (key.return) {
+      if (target.settingsNs.length === 0) {
+        setActionError('this provider is not managed by Harness settings')
+      } else if (target.credential?.kind === 'error') {
+        setActionError('credential status is unavailable; retry before writing')
+      } else if (target.credential?.kind === 'facts' && !target.credential.writable) {
+        setActionError('this API key is supplied read-only by the environment')
+      } else if (target.credentialRef === undefined && directory?.writable !== true) {
+        setActionError('settings are read-only; this provider cannot be activated here')
+      } else {
+        onCredential(target)
+      }
+    }
+  }, true)
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/model providers · enter key · d remove key · esc back', viewport.contentColumns))
+  }
+  const stateRows: ReactElement[] = directory === undefined && error === undefined
+    ? [createElement(Text, { key: 'loading', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, '  loading providers…')]
+    : error !== undefined
+      ? [createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${singleLineText(error)}`, viewport.contentColumns))]
+      : [
+        ...(actionError === undefined
+          ? []
+          : [createElement(Text, { key: 'action-error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${actionError}`, viewport.contentColumns))]),
+        ...(directory?.failures ?? []).map((failure, index) => createElement(
+          Text,
+          { key: `failure-${index}`, color: inkColor(getPalette().warn), wrap: 'truncate-end' },
+          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
+        )),
+        ...(rows.length === 0
+          ? [createElement(Text, { key: 'empty', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, '  no configurable providers')]
+          : []),
+      ]
+  const visibleStateRows = stateRows.slice(0, viewport.bodyRows)
+  const rowBudget = Math.max(0, viewport.bodyRows - visibleStateRows.length)
+  const first = selectionWindow(cursor, rows.length, rowBudget)
+  const visible = rowBudget === 0 ? [] : rows.slice(first, first + rowBudget)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
+    createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — providers${rows.length === 0 ? '' : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...visibleStateRows,
+    ...visible.map((row) => {
+      const index = rows.indexOf(row)
+      const identity = row.displayName === row.provider ? row.provider : `${row.displayName} (${row.provider})`
+      const label = `${identity} · ${providerStateLabel(row)}${row.removable ? ' · custom' : ''}`
+      return createElement(
+        Text,
+        { key: row.provider, color: index === cursor ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' },
+        truncateColumns(`${index === cursor ? '❯ ' : '  '}${displayText(label)}`, viewport.contentColumns),
+      )
+    }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('↑↓ move · enter add/update key · d remove key · x remove custom provider · r retry · esc back', viewport.contentColumns)),
+  )
+}
+
+/** Write-only masked API-key editor; the secret lives only in this mounted component. */
+function ProviderCredentialPanel({ target, save, done, back }: {
+  target: ProviderTargetView
+  save(target: ProviderTargetView, key: string): Promise<void>
+  done(): void
+  back(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [draft, setDraft] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  const submit = (): void => {
+    if (busy) return
+    setBusy(true)
+    setError(undefined)
+    Promise.resolve().then(() => save(target, draft)).then(() => {
+      setDraft('')
+      done()
+    }, (reason: unknown) => {
+      setError(singleLineText(reason instanceof Error ? reason.message : String(reason)))
+      setBusy(false)
+    })
+  }
+
+  useStableInput((input, key) => {
+    if (busy) return
+    if (key.escape) {
+      setDraft('')
+      back()
+      return
+    }
+    if (key.return) {
+      submit()
+      return
+    }
+    if (key.backspace || key.delete) {
+      setError(undefined)
+      setDraft(current => [...current].slice(0, -1).join(''))
+      return
+    }
+    if (key.ctrl && input === 'u') {
+      setError(undefined)
+      setDraft('')
+      return
+    }
+    if (key.ctrl || key.meta || input.length === 0) return
+    const next = draft + input
+    if (next.length > 4096) {
+      setError('API key input is too long')
+      return
+    }
+    setError(undefined)
+    setDraft(next)
+  }, true)
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const keyBudget = Math.max(1, viewport.contentColumns - 4)
+  const bullets = '•'.repeat(Math.min([...draft].length, keyBudget))
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`API key ${bullets}${busy ? ' saving…' : ' ▏'} · esc back`, viewport.contentColumns))
+  }
+  const identity = target.displayName === target.provider ? target.provider : `${target.displayName} (${target.provider})`
+  const source = target.credential?.kind === 'facts' && target.credential.configured
+    ? `replaces ${singleLineText(target.credential.source ?? 'stored key')}`
+    : 'new key'
+  const providerRow = createElement(Text, { key: 'provider', wrap: 'truncate-end' }, truncateColumns(`  provider  ${displayText(identity)}`, viewport.contentColumns))
+  const referenceRow = createElement(Text, { key: 'reference', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  reference ${displayText(target.credentialRef ?? target.suggestedRef)} · ${source}`, viewport.contentColumns))
+  const keyRow = createElement(Text, { key: 'key', color: error === undefined ? inkColor(getPalette().brandBright) : inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  key       ${bullets}${busy ? ' saving…' : ' ▏'}`, viewport.contentColumns))
+  const errorRow = error === undefined
+    ? undefined
+    : createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${error}`, viewport.contentColumns))
+  const detailRows = errorRow === undefined ? [providerRow, referenceRow] : [providerRow, errorRow]
+  const primaryRow = viewport.bodyRows === 1 && errorRow !== undefined ? errorRow : keyRow
+  const detailBudget = Math.max(0, viewport.bodyRows - 1)
+  const bodyRows = [
+    ...(detailBudget === 0 ? [] : detailRows.slice(-detailBudget)),
+    ...(viewport.bodyRows === 0 ? [] : [primaryRow]),
+  ]
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().brand) },
+    createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns('/model — add API key', viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...bodyRows,
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('type or paste key · enter save · ctrl+u clear · esc back', viewport.contentColumns)),
+  )
+}
+
+/** Bounded destructive-action confirmation for credential or provider removal. */
+function ProviderConfirmPanel({ target, kind, confirm, done, back }: {
+  target: ProviderTargetView
+  kind: 'credential' | 'provider'
+  confirm(target: ProviderTargetView): Promise<void>
+  done(): void
+  back(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const run = (): void => {
+    if (busy) return
+    setBusy(true)
+    setError(undefined)
+    Promise.resolve().then(() => confirm(target)).then(done, (reason: unknown) => {
+      setError(singleLineText(reason instanceof Error ? reason.message : String(reason)))
+      setBusy(false)
+    })
+  }
+  useStableInput((input, key) => {
+    if (busy) return
+    if (key.escape || input === 'n') {
+      back()
+      return
+    }
+    if (input === 'y') run()
+  }, true)
+
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const action = kind === 'credential' ? 'remove API key' : 'remove provider'
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`${action} ${target.displayName}? · y confirm · n/esc back`, viewport.contentColumns))
+  }
+  const identity = target.displayName === target.provider ? target.provider : `${target.displayName} (${target.provider})`
+  const identityRow = createElement(Text, { key: 'identity', wrap: 'truncate-end' }, truncateColumns(`  ${displayText(identity)}`, viewport.contentColumns))
+  const descriptionRow = createElement(Text, { key: 'description', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(kind === 'credential' ? '  the provider profile and selected model stay available' : '  the user settings profile and its managed key will be removed', viewport.contentColumns))
+  const errorRow = error === undefined
+    ? undefined
+    : createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${error}`, viewport.contentColumns))
+  const bodyRows = errorRow === undefined
+    ? [identityRow, descriptionRow].slice(0, viewport.bodyRows)
+    : [identityRow, errorRow].slice(-viewport.bodyRows)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(getPalette().warn) },
+    createElement(Text, { color: inkColor(getPalette().warn), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — ${action}`, viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...bodyRows,
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(busy ? 'working…' : 'y confirm · n/esc back', viewport.contentColumns)),
   )
 }
 
@@ -1334,12 +1797,16 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
     createElement(Box, { key: 'local-model' }, row('/model', 'switch the model')),
     createElement(Box, { key: 'local-effort' }, row('/effort', 'adjust reasoning effort for the current model')),
     createElement(Box, { key: 'local-mode' }, row('/mode', 'inspect or select the agent preset (/mode [preset])')),
+    createElement(Box, { key: 'local-permission' }, row('/permission', 'inspect or select the permission preset (/permission [preset])')),
     createElement(Box, { key: 'local-new' }, row('/new', 'create and switch to a fresh session (/new [preset])')),
     createElement(Box, { key: 'local-resume' }, row('/resume', 'browse or switch root sessions (/resume [id|prefix])')),
     createElement(Box, { key: 'local-plugin' }, row('/plugin', 'inspect the live plugin composition')),
     createElement(Box, { key: 'local-statusline' }, row('/statusline', 'customize the status line items')),
     createElement(Box, { key: 'local-theme' }, row('/theme', 'switch the color theme')),
     createElement(Box, { key: 'local-history' }, row('/history', 'search and recall past prompts')),
+    createElement(Box, { key: 'local-agents' }, row('/agents', 'inspect subagent sessions of this conversation')),
+    createElement(Box, { key: 'local-subagent' }, row('/subagent', 'choose the model delegated subagents run on')),
+    createElement(Box, { key: 'local-delete' }, row('/delete', 'delete a session and its subagent threads')),
     createElement(Box, { key: 'local-clear' }, row('/clear', 'clear the screen')),
     createElement(Box, { key: 'local-export' }, row('/export', 'export the transcript to markdown (/export [path])')),
     createElement(Box, { key: 'local-title' }, row('/title', 'rename this session (/title <text>)')),
@@ -1669,20 +2136,24 @@ export function completionCandidates(
     { label: '/model', description: 'switch the model', origin: 'command' },
     { label: '/effort', description: 'adjust reasoning effort for the current model', origin: 'command' },
     { label: '/mode', description: 'select the agent preset', origin: 'command' },
+    { label: '/permission', description: 'inspect or select the permission preset', origin: 'command' },
     { label: '/new', description: 'start a fresh session', origin: 'command' },
     { label: '/resume', description: 'browse or switch sessions', origin: 'command' },
     { label: '/plugin', description: 'inspect the plugin composition', origin: 'command' },
     { label: '/statusline', description: 'customize the status line', origin: 'command' },
     { label: '/theme', description: 'switch the color theme', origin: 'command' },
     { label: '/history', description: 'search and recall past prompts', origin: 'command' },
+    { label: '/agents', description: 'inspect subagent sessions of this conversation', origin: 'command' },
+    { label: '/subagent', description: 'choose the model delegated subagents run on', origin: 'command' },
+    { label: '/delete', description: 'delete a session and its subagent threads', origin: 'command' },
     { label: '/clear', description: 'clear the screen', origin: 'command' },
     { label: '/export', description: 'export the transcript to markdown', origin: 'command' },
     { label: '/title', description: 'rename this session', origin: 'command' },
     { label: '/quit', description: 'exit', origin: 'command' },
   ]
-  // Local commands shadow registry names (e.g. the plugin-registered
-  // /permission is served by the registry itself, never duplicated here),
-  // so collisions cannot render two rows with the same key.
+  // Local commands shadow registry names (e.g. the TUI-local /permission works
+  // before any session exists, while the registry child needs one), so
+  // collisions cannot render two rows with the same key.
   const localNames = new Set(local.map(candidate => candidate.label.slice(1)))
   const registry = descriptors
     .filter(descriptor => !localNames.has(descriptor.name))
@@ -1777,7 +2248,7 @@ function CompletionMenu({ active, mention, index, rows }: {
  * While a modal (approval / question / model panel) owns the keys, the
  * box passes every key through untouched.
  */
-function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openResume, openPlugin, openStatusline, openTheme, openHistory, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTick, waveTier, waveStyle }: {
+function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openPermission, openResume, openPlugin, openStatusline, openTheme, openHistory, openAgents, openSubagent, openDelete, deleteConfirm, confirmDelete, cancelDelete, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTier, waveStyle }: {
   active: boolean
   frozen: boolean
   busy: boolean
@@ -1791,11 +2262,24 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   openEffort(): void
   openHelp(): void
   openMode(): void
+  openPermission(): void
   openResume(): void
   openPlugin(query?: string): void
   openStatusline(): void
   openTheme(): void
   openHistory(): void
+  /** Open the /agents panel (live subagent feed + transcript entry). */
+  openAgents(): void
+  /** Open the /subagent model panel. */
+  openSubagent(): void
+  /** Open the /resume picker in delete mode, optionally pre-armed on one id. */
+  openDelete(id?: string): void
+  /** The row id awaiting y/n in this box, when a deletion is pending. */
+  deleteConfirm?: string
+  /** Confirm the pending deletion (y in the box). */
+  confirmDelete(): void
+  /** Cancel the pending deletion (any other key in the box). */
+  cancelDelete(): void
   createSession(mode?: string): void
   cancelSessionSwitch(): boolean
   notify(text: string, tone?: NoticeTone): void
@@ -1823,11 +2307,9 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   historyFill: { text: string; index: number } | undefined
   /** Marks the accepted entry consumed (called after the fill is applied). */
   historyConsumed(): void
-  /** DeepSeek easter-egg wave frame (null when static): the composer's input
-   * row rides Codex's Wave sweep (33ms tick, 1.0s flash / 1.3s deepseek). */
-  waveTick: number | null
-  /** The wave tier of the applied official DeepSeek model (null otherwise):
-   * drives the persistent prompt glyph/accent and the sparkle tier. */
+  /** DeepSeek easter-egg wave tier of the applied official DeepSeek model
+   * (null otherwise): drives the persistent prompt glyph/accent and the
+   * sparkle tier. */
   waveTier: DeepseekWaveTier | null
   /** The ignition style running, if any: Wave / Aurora / Pulse. */
   waveStyle: DeepseekWaveStyle | null
@@ -1944,9 +2426,53 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       }))
       : candidates
 
+  /** Accept the highlighted completion-menu candidate into the draft. */
+  const acceptMenuCandidate = (): void => {
+    if (mentionActive && mentionToken !== undefined) {
+      const row = mentionRows[completionIndex % mentionRows.length]
+      if (row !== undefined) {
+        // Session rows carry the canonical @[label](dsh-session:…) token;
+        // file rows insert `@path` (directories keep their trailing slash).
+        const insertion = row.label.startsWith('@')
+          ? row.label
+          : `@${row.label}${row.kind === 'directory' ? '/' : ''}`
+        setValue(value.slice(0, mentionToken.start) + insertion + value.slice(cursor))
+        setCursor(mentionToken.start + insertion.length)
+      }
+    } else if (pathActive) {
+      const row = pathRows[completionIndex % Math.max(1, pathRows.length)]
+      if (row !== undefined) {
+        // Bare path completion replaces the typed token with the chosen
+        // workspace path (directories keep their trailing slash).
+        const insertion = row.kind === 'directory' ? `${row.label}/` : row.label
+        setValue(value.slice(0, pathTokenStart) + insertion + value.slice(cursor))
+        setCursor(pathTokenStart + insertion.length)
+      }
+    } else {
+      const candidate = candidates[completionIndex % candidates.length]
+      if (candidate !== undefined) {
+        setValue(`${candidate.label} `)
+        setCursor(candidate.label.length + 1)
+      }
+    }
+    setCompletionIndex(0)
+    setDismissedMenuValue(undefined)
+  }
+
   useInput((input, key) => {
     // Modal ownership: approval/question/model dialogs consume all keys.
     if (!active) return
+    // Deletion confirm owns the box: y proceeds, anything else cancels.
+    // Typed in the INPUT BOX (codex delete-confirm): the keystroke is echoed
+    // as the box's own prompt, not an invisible panel keypress.
+    if (deleteConfirm !== undefined) {
+      if (input === 'y' || input === 'Y') {
+        confirmDelete()
+      } else {
+        cancelDelete()
+      }
+      return
+    }
     // Shift+Tab cycles the permission preset (Claude-Code convention).
     if (key.tab && key.shift) {
       try {
@@ -2018,6 +2544,18 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         setDismissedMenuValue(undefined)
         return
       }
+      // Enter on an open completion menu accepts the highlighted candidate
+      // (Codex list parity: Tab and Enter are both accept keys — many users
+      // never discover Tab) — UNLESS the draft already spells one candidate
+      // exactly, in which case Enter submits it (typing a full "/effort" and
+      // pressing return must run the command, not re-accept its own text).
+      if (menuActive) {
+        const exactSlash = !mentionActive && !pathActive && candidates.some(candidate => candidate.label === value)
+        if (!exactSlash) {
+          acceptMenuCandidate()
+          return
+        }
+      }
       const text = value.trim()
       setValue('')
       setCursor(0)
@@ -2072,6 +2610,14 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         openEffort()
         return
       }
+      if (text === '/permission') {
+        openPermission()
+        return
+      }
+      if (text.startsWith('/permission ')) {
+        dispatch(text)
+        return
+      }
       if (text === '/mode' || text.startsWith('/mode ')) {
         const mode = text.slice(5).trim()
         if (mode === '') openMode()
@@ -2108,6 +2654,18 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         openHistory()
         return
       }
+      if (text === '/agents') {
+        openAgents()
+        return
+      }
+      if (text === '/subagent') {
+        openSubagent()
+        return
+      }
+      if (text === '/delete' || text.startsWith('/delete ')) {
+        openDelete(text.slice(7).trim())
+        return
+      }
       if (busy && !text.startsWith('/')) {
         // A running turn is steered, not blocked: the inbox delivers this
         // text at the next step boundary (Esc/Ctrl+C still cancels outright).
@@ -2153,35 +2711,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       return
     }
     if (key.tab && menuActive) {
-      if (mentionActive && mentionToken !== undefined) {
-        const row = mentionRows[completionIndex % mentionRows.length]
-        if (row !== undefined) {
-          // Session rows carry the canonical @[label](dsh-session:…) token;
-          // file rows insert `@path` (directories keep their trailing slash).
-          const insertion = row.label.startsWith('@')
-            ? row.label
-            : `@${row.label}${row.kind === 'directory' ? '/' : ''}`
-          setValue(value.slice(0, mentionToken.start) + insertion + value.slice(cursor))
-          setCursor(mentionToken.start + insertion.length)
-        }
-      } else if (pathActive) {
-        const row = pathRows[completionIndex % Math.max(1, pathRows.length)]
-        if (row !== undefined) {
-          // Bare path completion replaces the typed token with the chosen
-          // workspace path (directories keep their trailing slash).
-          const insertion = row.kind === 'directory' ? `${row.label}/` : row.label
-          setValue(value.slice(0, pathTokenStart) + insertion + value.slice(cursor))
-          setCursor(pathTokenStart + insertion.length)
-        }
-      } else {
-        const candidate = candidates[completionIndex % candidates.length]
-        if (candidate !== undefined) {
-          setValue(`${candidate.label} `)
-          setCursor(candidate.label.length + 1)
-        }
-      }
-      setCompletionIndex(0)
-      setDismissedMenuValue(undefined)
+      acceptMenuCandidate()
       return
     }
     if (key.backspace || key.delete) {
@@ -2236,6 +2766,42 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     }
   })
 
+  // The DeepSeek easter-egg wave owns its 33ms tick HERE instead of in App:
+  // the interval re-renders only the composer row at 30fps, never the whole
+  // tree. App drives the tier/style pair on a model switch; this local effect
+  // starts the sweep whenever that pair changes (App picks a NEW random style
+  // for every replay — including effort changes on the same route — so the
+  // pair always differs when a new wave should run) and stops it when the
+  // model leaves the official DeepSeek route (tier becomes null).
+  const [waveTick, setWaveTick] = useState<number | null>(null)
+  const wavePrevious = useRef<{ tier: DeepseekWaveTier | null; style: DeepseekWaveStyle | null }>({ tier: null, style: null })
+  useEffect(() => {
+    const previous = wavePrevious.current
+    wavePrevious.current = { tier: waveTier, style: waveStyle }
+    if (waveTier === null) {
+      setWaveTick(null)
+      return
+    }
+    if (previous.tier !== waveTier || previous.style !== waveStyle) {
+      setWaveTick(0)
+    }
+  }, [waveTier, waveStyle])
+  const waveActive = waveTick !== null && waveTier !== null && waveStyle !== null
+    && waveTick * DEEPSEEK_WAVE_TICK_MS < deepseekWaveDuration(waveTier, waveStyle)
+  useEffect(() => {
+    if (!waveActive) return
+    const id = setInterval(() => {
+      setWaveTick(current => (current === null ? 0 : current + 1))
+    }, DEEPSEEK_WAVE_TICK_MS)
+    return () => {
+      clearInterval(id)
+    }
+  }, [waveActive])
+  useEffect(() => {
+    if (waveTick !== null && waveTier !== null && waveStyle !== null
+      && waveTick * DEEPSEEK_WAVE_TICK_MS >= deepseekWaveDuration(waveTier, waveStyle)) setWaveTick(null)
+  }, [waveTick, waveTier, waveStyle])
+
   // Every exclusive panel keeps the composer as a stable visual anchor, but
   // freezes it to one row: no menu, multiline wrap, or animation.
   const tierActive = waveTier !== null
@@ -2243,6 +2809,20 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   const promptColor = tierHues === null ? inkColor(getPalette().brand) : inkColor(tierHues[0])
   const promptGlyph = waveTier === 'flash' ? '›' : waveTier === 'deepseek' ? '»' : '❯'
   if (frozen) {
+    // A pending deletion turns the box into the confirm prompt: the y/n is
+    // typed HERE, with a readable warn-styled hint instead of a dim footer.
+    if (deleteConfirm !== undefined) {
+      return createElement(
+        Box,
+        { width: Math.max(1, columns - 1), borderStyle: 'round', borderColor: inkColor(getPalette().warn), paddingX: 1 },
+        createElement(
+          Text,
+          { wrap: 'truncate-end' },
+          createElement(Text, { color: inkColor(getPalette().warn), bold: true }, '❯ '),
+          createElement(Text, { color: inkColor(getPalette().warn), bold: true }, 'y delete · any other key cancels'),
+        ),
+      )
+    }
     const frozen = value === ''
       ? 'type a message'
       : verboseLine(value, Math.max(1, columns - 6))
@@ -2371,13 +2951,192 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   )
 }
 
+/** One cached settled row: the row Box plus its roomy-prompt spacers. */
+interface SettledRowRecord {
+  /** The row Box element (keyed by the entry's settled index). */
+  box: ReactElement
+  /** The roomy-prompt spacer BEFORE the row, or undefined. */
+  before: ReactElement | undefined
+  /** The roomy-prompt spacer AFTER the row, or undefined. */
+  after: ReactElement | undefined
+  /** Whether the row's text depends on the reasoning toggle (Ctrl+R). */
+  reasonSensitive: boolean
+  /** The toggle state the row was built with. */
+  showReasoning: boolean
+}
+
+/** The incremental settled-history cache (see `computeSettledRows`). */
+interface SettledRowsCache {
+  /** The exact settled entries the cache covers (`view.entries[0..entries.length)`). */
+  entries: TranscriptEntry[]
+  /** Records keyed by entry identity; mutated in place so the append path
+   * never copies the whole map. */
+  records: Map<TranscriptEntry, SettledRowRecord>
+  /** The header element (depends only on `resumed`). */
+  header: ReactElement
+  /** The `resumed` the header was built with. */
+  resumed: boolean
+  /** The toggle state the rows were built with. */
+  showReasoning: boolean
+  /** The refreshEpoch the rows were built for; a bump forces a full rebuild. */
+  epoch: number
+  /** The flat row list (header + per-entry before/box/after). */
+  flat: ReactElement[]
+}
+
+/** One step of `computeSettledRows`. */
+interface SettledRowsResult {
+  cache: SettledRowsCache
+  /** How many rows had to be BUILT by this step (0 = pure reuse). */
+  built: number
+}
+
+/** Build one settled row (row Box plus its roomy-prompt spacers). */
+function buildSettledRow(entry: TranscriptEntry, index: number, showReasoning: boolean): SettledRowRecord {
+  const row = createElement(EntryLine, { entry, showReasoning, verbose: false })
+  const roomyPrompt = entry.kind === 'user' && !entry.notice
+  return {
+    box: createElement(Box, { key: index, paddingX: 1 }, row),
+    before: roomyPrompt
+      ? createElement(Box, { key: `prompt-before-${index}`, paddingX: 1 }, createElement(Text, null, ' '))
+      : undefined,
+    after: roomyPrompt
+      ? createElement(Box, { key: `prompt-after-${index}`, paddingX: 1 }, createElement(Text, null, ' '))
+      : undefined,
+    reasonSensitive: entry.kind === 'assistant' && entry.reasoning !== '',
+    showReasoning,
+  }
+}
+
+/**
+ * The settled `<Static>` row set as a PURE incremental state machine (App
+ * drives it from the memo; tests drive it directly and read `built`).
+ *
+ * The settled prefix is permanently final: the projection only APPENDS below
+ * the flush boundary, removes pending rows at or beyond it, and replaces
+ * running tool/retry/command rows there too. So extending the cache never
+ * rescans the old prefix — a grown boundary builds ONLY the newly settled
+ * suffix and reuses every cached element, letting React bail out of unchanged
+ * rows and keeping long histories out of the per-durable-event path (no O(N)
+ * rebuild of rows, Map, or MarkdownBody parses). `records` is mutated in place
+ * on the append/toggle paths to stay O(delta).
+ *
+ * Full rebuilds run only on the rare, deliberate paths: no cache yet, a
+ * source-backed replay (`epoch` bump: resize / Ctrl+L / Ctrl+R remounts
+ * `<Static>` and must re-flush the CURRENT rows), a `resumed` change, or a shrink
+ * (`store.reset`). A reasoning toggle rebuilds only the rows whose text
+ * depends on it, preserving the other rows' element identity.
+ */
+export function computeSettledRows(
+  previous: SettledRowsCache | undefined,
+  entries: readonly TranscriptEntry[],
+  settled: number,
+  showReasoning: boolean,
+  resumed: boolean,
+  epoch: number,
+): SettledRowsResult {
+  if (previous === undefined || previous.epoch !== epoch || previous.resumed !== resumed
+    || settled < previous.entries.length) {
+    // Full rebuild from the current settled prefix.
+    const records = new Map<TranscriptEntry, SettledRowRecord>()
+    const flat: ReactElement[] = [createElement(Header, { key: 'header', resumed })]
+    for (let index = 0; index < settled; index++) {
+      const entry = entries[index]
+      const record = buildSettledRow(entry, index, showReasoning)
+      records.set(entry, record)
+      if (record.before !== undefined) flat.push(record.before)
+      flat.push(record.box)
+      if (record.after !== undefined) flat.push(record.after)
+    }
+    return {
+      cache: { entries: entries.slice(0, settled), records, header: flat[0]!, resumed, showReasoning, epoch, flat },
+      built: settled,
+    }
+  }
+  if (previous.showReasoning !== showReasoning) {
+    // Reasoning toggle: only rows whose text depends on it rebuild; spacers
+    // and the other rows keep their element identity.
+    const records = previous.records
+    const flat: ReactElement[] = [previous.header]
+    let built = 0
+    for (let index = 0; index < previous.entries.length; index++) {
+      const entry = previous.entries[index]
+      const record = records.get(entry)!
+      const current = record.reasonSensitive
+        ? {
+          ...record,
+          box: createElement(Box, { key: index, paddingX: 1 }, createElement(EntryLine, { entry, showReasoning, verbose: false })),
+          showReasoning,
+        }
+        : record
+      if (current !== record) {
+        records.set(entry, current)
+        built += 1
+      }
+      if (current.before !== undefined) flat.push(current.before)
+      flat.push(current.box)
+      if (current.after !== undefined) flat.push(current.after)
+    }
+    return { cache: { ...previous, records, showReasoning, flat }, built }
+  }
+  if (settled === previous.entries.length) {
+    // Nothing below the boundary changed (a pending retirement above it, a
+    // tool/result at the boundary): keep the SAME flat identity so the
+    // memoized <Static> subtree does not re-render at all.
+    return { cache: previous, built: 0 }
+  }
+  // The boundary grew: build ONLY the newly settled suffix.
+  const records = previous.records
+  const suffix: TranscriptEntry[] = []
+  const added: ReactElement[] = []
+  for (let index = previous.entries.length; index < settled; index++) {
+    const entry = entries[index]
+    const record = buildSettledRow(entry, index, showReasoning)
+    records.set(entry, record)
+    suffix.push(entry)
+    if (record.before !== undefined) added.push(record.before)
+    added.push(record.box)
+    if (record.after !== undefined) added.push(record.after)
+  }
+  return {
+    cache: {
+      entries: previous.entries.concat(suffix),
+      records,
+      header: previous.header,
+      resumed: previous.resumed,
+      showReasoning,
+      epoch: previous.epoch,
+      flat: previous.flat.concat(added),
+    },
+    built: settled - previous.entries.length,
+  }
+}
+
 /** The whole terminal app; state arrives via the store, output via Ink. */
 export function App(props: AppProps): ReactElement {
   const view = useSyncExternalStore(props.store.subscribe, props.store.getView)
-  const descriptors = useSyncExternalStore(props.commands.subscribe, () => props.commands.descriptors)
-  const skills = useSyncExternalStore(props.skills.subscribe, () => props.skills.rows)
+  // getSnapshot must be a STABLE reference (the React contract): an inline
+  // arrow here re-subscribes the store hook on every render and cascades
+  // force-updates — during a fast reasoning stream that chain crossed React's
+  // nested-passive-update limit and flooded "Maximum update depth exceeded"
+  // warnings. The view objects are process-stable, so one callback per view
+  // identity is enough.
+  // getSnapshot should be a stable reference (the React contract): an inline
+  // arrow re-subscribes the store hook on every render and forces the uETS
+  // consistency check to re-run per commit. The view objects are
+  // process-stable, so one callback per view identity is enough.
+  const readDescriptors = useCallback(() => props.commands.descriptors, [props.commands])
+  const readSkills = useCallback(() => props.skills.rows, [props.skills])
+  const descriptors = useSyncExternalStore(props.commands.subscribe, readDescriptors)
+  const skills = useSyncExternalStore(props.skills.subscribe, readSkills)
   const [modelLabel, setModelLabel] = useState(props.model)
   const [modelOpen, setModelOpen] = useState(false)
+  /** Nested /model stages; only one owns terminal input at a time. */
+  const [providerOpen, setProviderOpen] = useState(false)
+  const [providerAction, setProviderAction] = useState<{
+    kind: 'credential' | 'unset' | 'remove'
+    target: ProviderTargetView
+  } | undefined>(undefined)
   /** The model row whose effort levels the /model stage lists; undefined shows the model list. */
   const [effortFor, setEffortFor] = useState<ModelRow | undefined>(undefined)
   /** Effective reasoning effort, shown in the /model picker and switch notice. */
@@ -2388,8 +3147,10 @@ export function App(props: AppProps): ReactElement {
    * per-style durations), then the band returns to static while the prompt
    * marker keeps the tier accent. The trigger follows the applied model
    * label (what the status bar actually shows), never the initial paint,
-   * and the tier is derived from the label and cached at the switch. */
-  const [waveTick, setWaveTick] = useState<number | null>(null)
+   * and the tier is derived from the label and cached at the switch. The
+   * 33ms tick itself lives inside Input, so the sweep re-renders only the
+   * composer row, not the whole tree, at 30fps; App owns the rarely-changing
+   * tier/style and Input starts the sweep whenever that pair changes. */
   const [waveTier, setWaveTier] = useState<DeepseekWaveTier | null>(null)
   const [waveStyle, setWaveStyle] = useState<DeepseekWaveStyle | null>(null)
   const previousModel = useRef<string | undefined>(undefined)
@@ -2407,7 +3168,6 @@ export function App(props: AppProps): ReactElement {
     if (!isOfficialDeepSeekLabel(modelLabel)) {
       setWaveTier(null)
       setWaveStyle(null)
-      setWaveTick(null)
       return
     }
     if (modelChanged || effortChanged) {
@@ -2415,26 +3175,12 @@ export function App(props: AppProps): ReactElement {
       const nextStyle = deepseekWaveStyleRandom(previousStyle.current)
       previousStyle.current = nextStyle
       setWaveStyle(nextStyle)
-      setWaveTick(0)
     }
   }, [modelLabel, effortLabel])
-  const waveActive = waveTick !== null && waveTier !== null && waveStyle !== null
-    && waveTick * DEEPSEEK_WAVE_TICK_MS < deepseekWaveDuration(waveTier, waveStyle)
-  useEffect(() => {
-    if (!waveActive) return
-    const id = setInterval(() => {
-      setWaveTick(current => (current === null ? 0 : current + 1))
-    }, DEEPSEEK_WAVE_TICK_MS)
-    return () => {
-      clearInterval(id)
-    }
-  }, [waveActive])
-  useEffect(() => {
-    if (waveTick !== null && waveTier !== null && waveStyle !== null
-      && waveTick * DEEPSEEK_WAVE_TICK_MS >= deepseekWaveDuration(waveTier, waveStyle)) setWaveTick(null)
-  }, [waveTick, waveTier, waveStyle])
   const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
   const [modelError, setModelError] = useState<string | undefined>(undefined)
+  const [providerDirectory, setProviderDirectory] = useState<ProviderSettingsDirectory | undefined>(undefined)
+  const [providerError, setProviderError] = useState<string | undefined>(undefined)
   const [modelLoadEpoch, setModelLoadEpoch] = useState(0)
   const [notice, setNotice] = useState<{ text: string; tone: NoticeTone } | undefined>(undefined)
   const notify = useCallback((text: string, tone: NoticeTone = 'info'): void => {
@@ -2461,12 +3207,36 @@ export function App(props: AppProps): ReactElement {
       cancelled = true
     }
   }, [modelOpen, modelLoadEpoch, props.loadModels])
+  useEffect(() => {
+    if (!modelOpen || props.loadModelProviders === undefined) return
+    let cancelled = false
+    setProviderDirectory(undefined)
+    setProviderError(undefined)
+    Promise.resolve().then(() => props.loadModelProviders!()).then((loaded) => {
+      if (!cancelled) setProviderDirectory(loaded)
+    }, (error: unknown) => {
+      if (!cancelled) setProviderError(error instanceof Error ? error.message : String(error))
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [modelOpen, modelLoadEpoch, props.loadModelProviders])
+  useEffect(() => {
+    const subscribe = props.subscribeModelProviders
+    if (!modelOpen || subscribe === undefined) return
+    try {
+      return subscribe(() => setModelLoadEpoch(epoch => epoch + 1))
+    } catch (error: unknown) {
+      setProviderError(error instanceof Error ? error.message : String(error))
+    }
+  }, [modelOpen, props.subscribeModelProviders])
 
   const busy = view.busy
   const [showReasoning, setShowReasoning] = useState(false)
   const [verboseOpen, setVerboseOpen] = useState(false)
   const [helpOpen, setHelpOpen] = useState(false)
   const [modeOpen, setModeOpen] = useState(false)
+  const [permissionOpen, setPermissionOpen] = useState(false)
   const [resumeOpen, setResumeOpen] = useState(false)
   const [pluginOpen, setPluginOpen] = useState(false)
   const [pluginQuery, setPluginQuery] = useState('')
@@ -2474,6 +3244,34 @@ export function App(props: AppProps): ReactElement {
   const [statuslineItems, setStatuslineItems] = useState<readonly StatusItemId[]>(() => parseStatuslineItems(props.statusline))
   const [themeOpen, setThemeOpen] = useState(false)
   const [historyOpen, setHistoryOpen] = useState(false)
+  const [agentsOpen, setAgentsOpen] = useState(false)
+  const [subagentOpen, setSubagentOpen] = useState(false)
+  /** /delete state: delete-mode hint plus an optional pre-armed row id. */
+  const [resumeDelete, setResumeDelete] = useState<{ mode: boolean; id?: string }>({ mode: false })
+  /** The row id awaiting y/n in the COMPOSER (codex delete confirm): the
+   * composer takes the keys, the resume panel yields until it settles. */
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | undefined>(undefined)
+  /** Bumped after a deletion so the /resume listing reloads immediately. */
+  const [deleteReloadToken, setDeleteReloadToken] = useState(0)
+  const requestDelete = useCallback((row: SessionRow): void => {
+    setDeleteConfirmId(row.id)
+  }, [])
+  const cancelDelete = useCallback((): void => {
+    setDeleteConfirmId(undefined)
+  }, [])
+  const confirmDelete = useCallback((): void => {
+    const id = deleteConfirmId
+    if (id === undefined) return
+    setDeleteConfirmId(undefined)
+    void props.deleteSession(id).then(outcome => {
+      notify(outcome)
+      // Keep the picker open and reload: a successful deletion must vanish
+      // from the list immediately, not look like a no-op.
+      setDeleteReloadToken(token => token + 1)
+    }, (reason: unknown) => {
+      notify(`delete failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+    })
+  }, [deleteConfirmId, props.deleteSession, notify])
   /** The /history panel's accepted entry: text plus its recall-space index. */
   const [historyFill, setHistoryFill] = useState<{ text: string; index: number } | undefined>(undefined)
   /** Submissions recorded in this process (Codex local history; persistent file stays in the runner). */
@@ -2489,64 +3287,88 @@ 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 agentRows = useSyncExternalStore(props.subagents.subscribe, props.subagents.getSnapshot)
   const approvalPending = approvalSnapshot.pending !== undefined
   const questionPending = questionSnapshot.pending !== undefined
   // While any modal owns the keys, the prompt box passes everything through.
-  const inputActive = !modelOpen && !helpOpen && !modeOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !verboseOpen && !approvalPending && !questionPending
+  // While a deletion waits for y/n, the composer takes the keys (the resume
+  // panel yields): the confirm is typed IN the input box, not as an invisible
+  // panel keypress.
+  const inputActive = deleteConfirmId !== undefined
+    ? !approvalPending && !questionPending
+    : !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !agentsOpen && !subagentOpen && !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)
+    setAgentsOpen(false)
+    setSubagentOpen(false)
+    setDeleteConfirmId(undefined)
     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.
@@ -2619,9 +3441,9 @@ export function App(props: AppProps): ReactElement {
           ? Math.max(1, Math.floor(streamRows / 3))
           : 1
   const answerRows = view.streaming === '' ? 0 : Math.max(1, streamRows - reasoningRows)
-  const transcriptVisible = !modelOpen && !helpOpen && !modeOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !verboseOpen && !approvalPending && !questionPending
+  const transcriptVisible = !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !statuslineOpen && !themeOpen && !historyOpen && !agentsOpen && !subagentOpen && !verboseOpen && !approvalPending && !questionPending
   const inspectorVisible = verboseOpen && !approvalPending && !questionPending
-  const modalVisible = modelOpen || helpOpen || modeOpen || resumeOpen || pluginOpen || statuslineOpen || themeOpen || historyOpen || inspectorVisible || approvalPending || questionPending
+  const modalVisible = modelOpen || helpOpen || modeOpen || permissionOpen || resumeOpen || pluginOpen || statuslineOpen || themeOpen || historyOpen || agentsOpen || subagentOpen || inspectorVisible || approvalPending || questionPending
   const closeInspector = useCallback((): void => {
     setVerboseOpen(false)
   }, [])
@@ -2638,12 +3460,129 @@ export function App(props: AppProps): ReactElement {
       setEffortLabel(effortId)
       notify(`model → next step uses ${label}${effortId === undefined || effortId === '' ? '' : `@${effortId}`}`)
       setModelOpen(false)
+      setProviderOpen(false)
+      setProviderAction(undefined)
       setEffortFor(undefined)
     } catch (error: unknown) {
       notify(`model switch failed: ${error instanceof Error ? error.message : String(error)}`, 'error')
     }
   }
 
+  const reloadModelSurfaces = (): void => {
+    setModelLoadEpoch(epoch => epoch + 1)
+  }
+  const closeModelSurface = (): void => {
+    setModelOpen(false)
+    setProviderOpen(false)
+    setProviderAction(undefined)
+    setEffortFor(undefined)
+  }
+  let modelSurface: ReactElement | undefined
+  if (modelOpen && !approvalPending && !questionPending) {
+    if (providerAction?.kind === 'credential' && props.saveModelProviderCredential !== undefined) {
+      modelSurface = createElement(ProviderCredentialPanel, {
+        target: providerAction.target,
+        save: props.saveModelProviderCredential,
+        done: () => {
+          const target = providerAction.target
+          setProviderAction(undefined)
+          setProviderOpen(false)
+          reloadModelSurfaces()
+          notify(`API key saved for ${target.displayName}; select a model`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerAction?.kind === 'unset' && props.unsetModelProviderCredential !== undefined) {
+      modelSurface = createElement(ProviderConfirmPanel, {
+        target: providerAction.target,
+        kind: 'credential',
+        confirm: props.unsetModelProviderCredential,
+        done: () => {
+          const target = providerAction.target
+          setProviderAction(undefined)
+          setProviderOpen(true)
+          reloadModelSurfaces()
+          notify(`API key removed for ${target.displayName}`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerAction?.kind === 'remove' && props.removeModelProvider !== undefined) {
+      modelSurface = createElement(ProviderConfirmPanel, {
+        target: providerAction.target,
+        kind: 'provider',
+        confirm: props.removeModelProvider,
+        done: () => {
+          const target = providerAction.target
+          setProviderAction(undefined)
+          setProviderOpen(true)
+          reloadModelSurfaces()
+          notify(`provider removed: ${target.displayName}`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerOpen) {
+      modelSurface = createElement(ProviderPanel, {
+        directory: providerDirectory,
+        error: providerError,
+        onCredential: (target: ProviderTargetView) => {
+          if (props.saveModelProviderCredential === undefined) {
+            notify('API key storage is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'credential', target })
+        },
+        onUnset: (target: ProviderTargetView) => {
+          if (props.unsetModelProviderCredential === undefined) {
+            notify('API key removal is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'unset', target })
+        },
+        onRemove: (target: ProviderTargetView) => {
+          if (props.removeModelProvider === undefined) {
+            notify('provider removal is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'remove', target })
+        },
+        onRetry: reloadModelSurfaces,
+        onBack: () => setProviderOpen(false),
+      })
+    } else if (effortFor !== undefined) {
+      modelSurface = createElement(EffortPanel, {
+        // Keyed per row: switching models remounts the stage so its cursor
+        // initializes on the new model's effective effort.
+        key: `${effortFor.provider}/${effortFor.model}`,
+        row: effortFor,
+        current: effortLabel,
+        select: (effortId: string) => applyModel(effortFor, effortId),
+        back: () => setEffortFor(undefined),
+      })
+    } else {
+      modelSurface = createElement(ModelPanel, {
+        directory,
+        error: modelError,
+        current: modelLabel,
+        onSelect: (row: ModelRow) => {
+          // A model advertising several levels opens the effort stage first;
+          // one advertised level is its only option, while no capability uses
+          // the model default exactly as before.
+          if (row.reasoning !== undefined && row.reasoning.efforts.length > 1) {
+            setEffortFor(row)
+            return
+          }
+          const effortId = row.reasoning?.efforts.length === 1 ? row.reasoning.efforts[0]!.id : undefined
+          applyModel(row, effortId)
+        },
+        ...(props.loadModelProviders === undefined || props.saveModelProviderCredential === undefined
+          ? {}
+          : { onProviders: () => setProviderOpen(true) }),
+        onRetry: reloadModelSurfaces,
+        onClose: closeModelSurface,
+      })
+    }
+  }
+
   return createElement(
     Box,
     { flexDirection: 'column' },
@@ -2661,7 +3600,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,
           })
@@ -2679,40 +3619,10 @@ export function App(props: AppProps): ReactElement {
       )
       : undefined,
     transcriptVisible ? createElement(TodoPanel, { todos: view.todos }) : undefined,
+    transcriptVisible ? createElement(AgentsLine, { rows: agentRows }) : undefined,
     createElement(QuestionBar, { store: props.questions, snapshot: questionSnapshot, locked: false }),
-    createElement(ApprovalBar, { snapshot: approvalSnapshot, locked: questionPending }),
-    modelOpen && !approvalPending && !questionPending
-      ? effortFor === undefined
-        ? createElement(ModelPanel, {
-          directory,
-          error: modelError,
-          onSelect: (row: ModelRow) => {
-            // A model advertising several levels opens the effort stage first;
-            // one advertised level is its only option (Codex's
-            // single-supported-effort shortcut), and no capability applies
-            // the model default exactly as before.
-            if (row.reasoning !== undefined && row.reasoning.efforts.length > 1) {
-              setEffortFor(row)
-              return
-            }
-            const effortId = row.reasoning?.efforts.length === 1 ? row.reasoning.efforts[0]!.id : undefined
-            applyModel(row, effortId)
-          },
-          onRetry: () => {
-            setModelLoadEpoch(epoch => epoch + 1)
-          },
-          onClose: () => {
-            setModelOpen(false)
-            setEffortFor(undefined)
-          },
-        })
-        : createElement(EffortPanel, {
-          row: effortFor,
-          current: effortLabel,
-          select: (effortId: string) => applyModel(effortFor, effortId),
-          back: () => setEffortFor(undefined),
-        })
-      : undefined,
+    createElement(ApprovalBar, { snapshot: approvalSnapshot, locked: questionPending, notify }),
+    modelSurface,
     helpOpen && !approvalPending && !questionPending
       ? createElement(HelpPanel, {
         descriptors,
@@ -2743,11 +3653,31 @@ 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,
         load: props.loadSessions,
         readTranscript: props.loadSessionTranscript,
+        requestDelete,
+        deleteConfirmId,
+        reloadToken: deleteReloadToken,
+        deleteMode: resumeDelete.mode,
         select: (row: SessionRow) => { props.switchSession(row); setResumeOpen(false) },
         close: () => setResumeOpen(false),
       })
@@ -2790,6 +3720,37 @@ export function App(props: AppProps): ReactElement {
         close: () => setHistoryOpen(false),
       })
       : undefined,
+    agentsOpen && !approvalPending && !questionPending
+      ? createElement(AgentsPanel, {
+        live: agentRows,
+        load: props.loadSubagents,
+        readTranscript: props.loadSessionTranscript,
+        close: () => setAgentsOpen(false),
+      })
+      : undefined,
+    subagentOpen && !approvalPending && !questionPending
+      ? createElement(SubagentPanel, {
+        current: props.subagentModel,
+        load: props.loadModels,
+        pick: (row: ModelRow, effortId?: string) => {
+          try {
+            // The runner's label already carries the effort suffix
+            // (`provider/model@effort`), so no second append here.
+            const label = props.setSubagentModel(row, effortId)
+            notify(`subagents → ${label}`)
+            setSubagentOpen(false)
+          } catch (reason: unknown) {
+            notify(`subagent model change failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+          }
+        },
+        inherit: () => {
+          props.clearSubagentModel()
+          notify('subagents → inherit current model')
+          setSubagentOpen(false)
+        },
+        close: () => setSubagentOpen(false),
+      })
+      : undefined,
     notice === undefined
       ? undefined
       : createElement(NoticeLine, {
@@ -2816,6 +3777,10 @@ export function App(props: AppProps): ReactElement {
         openModel: () => {
           setDirectory(undefined)
           setModelError(undefined)
+          setProviderDirectory(undefined)
+          setProviderError(undefined)
+          setProviderOpen(false)
+          setProviderAction(undefined)
           setEffortFor(undefined)
           setModelOpen(true)
         },
@@ -2845,7 +3810,12 @@ export function App(props: AppProps): ReactElement {
               return
             }
             if (row.reasoning === undefined || row.reasoning.efforts.length === 0) {
-              notify('current model does not expose reasoning efforts', 'warning')
+              // A model that advertises no levels still opens the stage: the
+              // panel itself carries the empty state (the web effort pane's
+              // "no levels" copy), instead of a bare notice that reads like
+              // a failure.
+              setEffortFor(row)
+              setModelOpen(true)
               return
             }
             setEffortFor(row)
@@ -2858,11 +3828,23 @@ export function App(props: AppProps): ReactElement {
           setHelpOpen(true)
         },
         openMode: () => setModeOpen(true),
-        openResume: () => setResumeOpen(true),
+        openPermission: () => setPermissionOpen(true),
+        openResume: () => { setResumeDelete({ mode: false }); setResumeOpen(true) },
         openPlugin: (query = '') => { setPluginQuery(query); setPluginOpen(true) },
         openStatusline: () => setStatuslineOpen(true),
         openTheme: () => setThemeOpen(true),
         openHistory: () => setHistoryOpen(true),
+        openAgents: () => setAgentsOpen(true),
+        openSubagent: () => setSubagentOpen(true),
+        openDelete: (id?: string) => {
+          const armed = id === undefined || id === '' ? undefined : id
+          setResumeDelete({ mode: true, ...armed === undefined ? {} : { id: armed } })
+          setDeleteConfirmId(armed)
+          setResumeOpen(true)
+        },
+        deleteConfirm: deleteConfirmId,
+        confirmDelete,
+        cancelDelete,
         createSession: props.createSession,
         cancelSessionSwitch: props.cancelSessionSwitch,
         notify,
@@ -2896,7 +3878,6 @@ export function App(props: AppProps): ReactElement {
         cancelQueued: props.cancelQueued,
         historyFill,
         historyConsumed,
-        waveTick,
         waveTier,
         waveStyle,
       }),
@@ -2909,7 +3890,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 },
         },