dsh-code 0.8.0 → 0.9.0

package/src/app.ts

@@ -66,7 +66,8 @@ import type { ProviderSettingsDirectory, ProviderTargetView } from './provider-s
 import type { QuestionSnapshot, QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
 import type { MentionCandidate } from './mentions.ts'
-import { EffortPanel, ModePanel, HistoryPanel, PermissionPanel, 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'
@@ -131,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). */
@@ -167,6 +170,14 @@ 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. */
@@ -193,6 +204,8 @@ export interface AppProps {
   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[]
@@ -691,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
@@ -877,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)),
   )
 }
 
@@ -1217,9 +1321,11 @@ function QuestionBar({ store, snapshot, locked }: { store: QuestionStore; snapsh
 }
 
 /** The /model panel: a scrolling list over the advisory model directory. */
-function ModelPanel({ directory, error, onSelect, onProviders, 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
@@ -1229,14 +1335,27 @@ function ModelPanel({ directory, error, onSelect, onProviders, 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') {
@@ -1685,6 +1804,9 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
     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>)')),
@@ -2021,6 +2143,9 @@ export function completionCandidates(
     { 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' },
@@ -2123,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, openPermission, openResume, openPlugin, openStatusline, openTheme, openHistory, createSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, cyclePermission, exportTranscript, renameTitle, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTier, waveStyle }: {
+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
@@ -2143,6 +2268,18 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   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
@@ -2289,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 {
@@ -2363,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)
@@ -2461,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).
@@ -2506,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) {
@@ -2632,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))
@@ -3053,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). */
@@ -3089,10 +3308,16 @@ export function App(props: AppProps): ReactElement {
   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 && !permissionOpen && !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.
@@ -3110,6 +3335,9 @@ export function App(props: AppProps): ReactElement {
     setStatuslineOpen(false)
     setThemeOpen(false)
     setHistoryOpen(false)
+    setAgentsOpen(false)
+    setSubagentOpen(false)
+    setDeleteConfirmId(undefined)
     setVerboseOpen(false)
   }, [approvalPending, questionPending])
 
@@ -3213,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 && !permissionOpen && !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 || permissionOpen || 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)
   }, [])
@@ -3322,6 +3550,9 @@ export function App(props: AppProps): ReactElement {
       })
     } 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),
@@ -3331,6 +3562,7 @@ export function App(props: AppProps): ReactElement {
       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
@@ -3387,8 +3619,9 @@ 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 }),
+    createElement(ApprovalBar, { snapshot: approvalSnapshot, locked: questionPending, notify }),
     modelSurface,
     helpOpen && !approvalPending && !questionPending
       ? createElement(HelpPanel, {
@@ -3441,6 +3674,10 @@ export function App(props: AppProps): ReactElement {
         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),
       })
@@ -3483,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, {
@@ -3542,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)
@@ -3556,11 +3829,22 @@ export function App(props: AppProps): ReactElement {
         },
         openMode: () => setModeOpen(true),
         openPermission: () => setPermissionOpen(true),
-        openResume: () => setResumeOpen(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,