dsh-code 0.4.0 → 0.6.0

package/src/internals.ts

@@ -11,6 +11,8 @@ import type { ReactElement } from 'react'
 
 /** A mounted terminal app instance; the runner owns unmount ordering. */
 export interface TuiMount {
+  /** Replace the root element while preserving Ink's single terminal owner. */
+  rerender(element: ReactElement): void
   /** Tear the terminal app down before flush and exit. */
   unmount(): void
 }
@@ -28,6 +30,9 @@ export const internals: {
   mount: (element: ReactElement): TuiMount => {
     const instance = render(element)
     return {
+      rerender(element: ReactElement): void {
+        instance.rerender(element)
+      },
       unmount(): void {
         instance.unmount()
       },

package/src/kernel-panels.ts

@@ -0,0 +1,419 @@
+/** Bounded, composer-safe panels for preset, session, and plugin kernel views. */
+
+import { createElement, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import { Box, Text, useInput, useStdout } from 'ink'
+import type { PresetRow } from './presets.ts'
+import type { PluginRow } from './plugin-inventory.ts'
+import type { SessionDirectoryOptions, SessionRow } from './session-directory.ts'
+import { panelViewport, revealRow } from './render/inspector.ts'
+import { textLines } from './render/lines.ts'
+import { DEFAULT_STATUSLINE_ITEMS, STATUS_ITEMS, type StatusItemId } from './render/status.ts'
+import { displayText, singleLineText, truncateColumns } from './render/text.ts'
+import { TUI_RGB } from './theme.ts'
+
+function color(rgb: readonly [number, number, number]): string {
+  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`
+}
+
+interface ListFrameProps {
+  readonly title: string
+  readonly rows: readonly { readonly key: string; readonly text: string; readonly disabled?: boolean }[]
+  readonly cursor: number
+  readonly loading: boolean
+  readonly error?: string
+  readonly query: string
+  readonly footer: string
+}
+
+function ListFrame(props: ListFrameProps): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(`${props.title} · esc close`, viewport.contentColumns))
+  }
+  const stateRows = props.loading
+    ? [{ key: 'loading', text: '  loading…' }]
+    : props.error !== undefined
+      ? [{ key: 'error', text: `  ${singleLineText(props.error)}` }]
+      : props.rows.length === 0
+        ? [{ key: 'empty', text: '  no matching entries' }]
+        : props.rows
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, props.cursor, stateRows.length, bodyRows)
+  const visible = stateRows.slice(offset, offset + bodyRows)
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: color(TUI_RGB.dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: color(TUI_RGB.brandBright), wrap: 'truncate-end' }, truncateColumns(props.title, viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`search: ${props.query === '' ? 'type to filter' : props.query}`, viewport.contentColumns)),
+    ...visible.map((row, index) => {
+      const absolute = offset + index
+      const selected = !props.loading && props.error === undefined && props.rows.length > 0 && absolute === props.cursor
+      return createElement(Text, {
+        key: row.key,
+        color: selected ? color(TUI_RGB.brandBright) : row.disabled ? color(TUI_RGB.dim) : undefined,
+        dimColor: row.disabled,
+        wrap: 'truncate-end',
+      }, truncateColumns(`${selected ? '› ' : '  '}${row.text}`, viewport.contentColumns))
+    }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(props.footer, viewport.contentColumns)),
+  )
+}
+
+function editQuery(query: string, input: string, key: { backspace?: boolean; delete?: boolean }): string | undefined {
+  if (key.backspace || key.delete) return query.slice(0, -1)
+  if (input.length === 1 && input >= ' ' && input !== '\x7f') return query + input
+  return undefined
+}
+
+export function ModePanel({ current, load, select, close }: {
+  current: string
+  load(): Promise<readonly PresetRow[]>
+  select(id: string): void
+  close(): void
+}): ReactElement {
+  const [rows, setRows] = useState<readonly PresetRow[]>([])
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string>()
+  const refresh = (): void => {
+    setLoading(true); setError(undefined)
+    Promise.resolve().then(load).then(value => { setRows(value); setLoading(false) }, reason => {
+      setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false)
+    })
+  }
+  useEffect(refresh, [])
+  const visible = useMemo(() => rows.filter(row => `${row.id} ${row.name ?? ''} ${row.description ?? ''}`.toLowerCase().includes(query.toLowerCase())), [rows, query])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, visible.length - 1))), [visible.length])
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (input === 'r' && query === '') return refresh()
+    if (key.upArrow) return setCursor(value => visible.length === 0 ? 0 : (value + visible.length - 1) % visible.length)
+    if (key.downArrow) return setCursor(value => visible.length === 0 ? 0 : (value + 1) % visible.length)
+    if (key.return && visible[cursor]?.broken === undefined) return select(visible[cursor]!.id)
+    const next = editQuery(query, input, key)
+    if (next !== undefined) { setQuery(next); setCursor(0) }
+  })
+  return createElement(ListFrame, {
+    title: `/mode · current ${current}`,
+    rows: visible.map(row => ({ key: row.id, disabled: row.broken !== undefined, text: `${row.id === current ? '●' : '○'} ${row.name ?? row.id} · ${row.description ?? row.trust}${row.broken === undefined ? '' : ` · broken: ${row.broken}`}` })),
+    cursor, loading, error, query, footer: '↑↓ choose · enter switch · r refresh · esc close',
+  })
+}
+
+export function PluginPanel({ load, close, initialQuery = '' }: { load(): readonly PluginRow[]; close(): void; initialQuery?: string }): ReactElement {
+  const [epoch, setEpoch] = useState(0)
+  const [query, setQuery] = useState(initialQuery)
+  const [cursor, setCursor] = useState(0)
+  const [expanded, setExpanded] = useState(false)
+  const rows = useMemo(() => load().filter(row => `${row.entryId} ${row.moduleName} ${row.phase ?? ''}`.toLowerCase().includes(query.toLowerCase())), [epoch, query])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (input === 'r' && query === '') return setEpoch(value => value + 1)
+    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : (value + rows.length - 1) % rows.length)
+    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : (value + 1) % rows.length)
+    if (key.return) return setExpanded(value => !value)
+    const next = editQuery(query, input, key)
+    if (next !== undefined) { setQuery(next); setCursor(0) }
+  })
+  return createElement(ListFrame, {
+    title: '/plugin · loader inspector',
+    rows: rows.map((row, index) => ({
+      key: row.entryId,
+      disabled: !row.enabled,
+      text: `${row.enabled ? '●' : '○'} ${row.entryId} · ${row.phase ?? 'not mounted'}${expanded && index === cursor ? ` · ${row.moduleName}` : ''}`,
+    })), cursor, loading: false, query, footer: '↑↓ inspect · enter details · r refresh · esc close',
+  })
+}
+
+export function ResumePanel({ currentCwd, load, readTranscript, select, close }: {
+  currentCwd: string
+  load(options: SessionDirectoryOptions, signal?: AbortSignal): Promise<readonly SessionRow[]>
+  readTranscript(id: string, signal?: AbortSignal): Promise<string>
+  select(row: SessionRow): void
+  close(): void
+}): ReactElement {
+  const [options, setOptions] = useState<SessionDirectoryOptions>({ sessions: 'roots', cwd: 'all', sort: 'newest', currentCwd, query: '' })
+  const [focus, setFocus] = useState(0)
+  const [density, setDensity] = useState<'comfortable' | 'dense'>('comfortable')
+  const [rows, setRows] = useState<readonly SessionRow[]>([])
+  const [cursor, setCursor] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string>()
+  const [expanded, setExpanded] = useState<string>()
+  const [transcript, setTranscript] = useState<{ id: string; text?: string; error?: string }>()
+  const transcriptLoad = useRef<AbortController>()
+  useEffect(() => () => transcriptLoad.current?.abort(), [])
+  useEffect(() => {
+    const controller = new AbortController()
+    setLoading(true); setError(undefined)
+    Promise.resolve().then(() => load(options, controller.signal)).then(value => {
+      if (!controller.signal.aborted) { setRows(value); setLoading(false) }
+    }, reason => {
+      if (!controller.signal.aborted) { setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false) }
+    })
+    return () => controller.abort()
+  }, [options])
+  useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
+  const cycle = (): void => {
+    if (focus === 3) {
+      setDensity(current => current === 'comfortable' ? 'dense' : 'comfortable')
+      return
+    }
+    setOptions(value => {
+      if (focus === 0) return { ...value, sessions: value.sessions === 'roots' ? 'all' : 'roots' }
+      if (focus === 1) return { ...value, cwd: value.cwd === 'all' ? 'current' : 'all' }
+      return { ...value, sort: value.sort === 'newest' ? 'oldest' : 'newest' }
+    })
+  }
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (key.tab) return setFocus(value => (value + (key.shift ? 3 : 1)) % 4)
+    if (key.leftArrow) return cycle()
+    if (key.rightArrow) return cycle()
+    if (key.upArrow) return setCursor(value => rows.length === 0 ? 0 : Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => rows.length === 0 ? 0 : Math.min(rows.length - 1, value + 1))
+    if (key.pageUp) return setCursor(value => Math.max(0, value - 8))
+    if (key.pageDown) return setCursor(value => Math.min(rows.length - 1, value + 8))
+    if (input === 'g') return setCursor(0)
+    if (input === 'G') return setCursor(Math.max(0, rows.length - 1))
+    if (input === 'd') return setDensity(value => value === 'comfortable' ? 'dense' : 'comfortable')
+    if (input === 'e' && rows[cursor] !== undefined) {
+      return setExpanded(value => value === rows[cursor]!.id ? undefined : rows[cursor]!.id)
+    }
+    if (input === 't' && rows[cursor] !== undefined) {
+      const row = rows[cursor]!
+      transcriptLoad.current?.abort()
+      setTranscript({ id: row.id })
+      const controller = new AbortController()
+      transcriptLoad.current = controller
+      Promise.resolve().then(() => readTranscript(row.id, controller.signal)).then(
+        text => { if (!controller.signal.aborted) setTranscript({ id: row.id, text }) },
+        reason => { if (!controller.signal.aborted) setTranscript({ id: row.id, error: reason instanceof Error ? reason.message : String(reason) }) },
+      )
+      return
+    }
+    if (key.return && rows[cursor]?.resumable === true) return select(rows[cursor]!)
+    const next = editQuery(options.query, input, key)
+    if (next !== undefined) { setOptions(value => ({ ...value, query: next })); setCursor(0) }
+  }, { isActive: transcript === undefined })
+  if (transcript !== undefined) {
+    return createElement(DocumentPanel, {
+      title: `transcript · ${transcript.id}`,
+      text: transcript.text,
+      error: transcript.error,
+      close: () => { transcriptLoad.current?.abort(); setTranscript(undefined) },
+    })
+  }
+  const toolbar = `[${focus === 0 ? '>' : ''}${options.sessions}] [${focus === 1 ? '>' : ''}${options.cwd} cwd] [${focus === 2 ? '>' : ''}${options.sort}] [${focus === 3 ? '>' : ''}${density}]`
+  return createElement(ListFrame, {
+    title: `/resume · ${toolbar}`,
+    rows: rows.map(row => ({
+      key: row.id,
+      disabled: !row.resumable,
+      text: `${row.subagent ? '↳' : '○'} ${row.title ?? row.id.slice(-12)}${density === 'comfortable' ? ` · ${row.workspace} · ${row.preset}` : ''}${row.live ? ' · live' : ''}${expanded === row.id ? ` · ${row.id} · ${row.cwd}${row.parent === undefined ? '' : ` · parent ${row.parent}`}` : ''}`,
+    })), cursor, loading, error, query: options.query,
+    footer: 'type search · tab/←→ filters · ↑↓/pg navigate · e details · t transcript · enter resume',
+  })
+}
+
+function DocumentPanel({ title, text, error, close }: {
+  title: string
+  text?: string
+  error?: string
+  close(): void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [scroll, setScroll] = useState(0)
+  const lines = useMemo(() => text === undefined ? [] : textLines(text, viewport.contentColumns).map(line => line.segments.map(segment => segment.text).join('')), [text, viewport.contentColumns])
+  useInput((input, key) => {
+    if (key.escape || input === 'q' || input === 't') return close()
+    if (key.upArrow) return setScroll(value => Math.max(0, value - 1))
+    if (key.downArrow) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + 1))
+    if (key.pageUp) return setScroll(value => Math.max(0, value - Math.max(1, viewport.bodyRows - 1)))
+    if (key.pageDown) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + Math.max(1, viewport.bodyRows - 1)))
+    if (input === 'g') return setScroll(0)
+    if (input === 'G') return setScroll(Math.max(0, lines.length - viewport.bodyRows))
+  })
+  if (viewport.compact) return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('transcript · esc close', viewport.contentColumns))
+  const body = error !== undefined
+    ? [`error: ${singleLineText(error)}`]
+    : text === undefined
+      ? ['loading transcript…']
+      : lines.slice(scroll, scroll + viewport.bodyRows)
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: color(TUI_RGB.dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: color(TUI_RGB.brandBright), wrap: 'truncate-end' }, truncateColumns(title, viewport.contentColumns)),
+    ...body.map((line, index) => createElement(Text, { key: `${scroll}-${index}`, wrap: 'truncate-end' }, truncateColumns(line, viewport.contentColumns))),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`lines ${lines.length === 0 ? 0 : scroll + 1}-${Math.min(lines.length, scroll + viewport.bodyRows)}/${lines.length} · ↑↓/pg/g/G · t/esc close`, viewport.contentColumns)),
+  )
+}
+
+/**
+ * The /history recall panel (Codex composer-history search, bounded): one
+ * query line over the newest-first recall space, filtered by substring, with
+ * arrow selection and enter to fill the composer. Editing the query restarts
+ * from the newest match; Esc closes without touching the draft.
+ */
+export function HistoryPanel({ entries, fill, close }: {
+  /** Newest-first recall entries (persistent + in-session, deduped). */
+  entries: readonly string[]
+  /** Accept one entry: its text plus its recall-space index (browsing resumes there). */
+  fill(text: string, index: number): void
+  close(): void
+}): ReactElement {
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const matches = query === ''
+    ? entries
+    : entries.filter(entry => entry.toLowerCase().includes(query.toLowerCase()))
+  useInput((input, key) => {
+    if (key.escape) return close()
+    if (key.return) {
+      const entry = matches[cursor]
+      if (entry !== undefined) fill(entry, entries.indexOf(entry))
+      return
+    }
+    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => Math.min(matches.length - 1, value + 1))
+    if (input === 'g') return setCursor(0)
+    if (input === 'G') return setCursor(matches.length - 1)
+    if (key.backspace) {
+      setQuery(current => current.slice(0, -1))
+      setCursor(0)
+      return
+    }
+    if (input !== '' && !key.ctrl && !key.meta && !key.shift) {
+      setQuery(current => (current + input).slice(0, 120))
+      setCursor(0)
+    }
+  })
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/history · esc close', viewport.contentColumns))
+  }
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, cursor, matches.length, bodyRows)
+  const visible = matches.slice(offset, offset + bodyRows)
+  const header = query === ''
+    ? `/history · ${entries.length} prompts · type to filter`
+    : `/history · ${matches.length} of ${entries.length} match '${truncateColumns(singleLineText(query), viewport.contentColumns - 30)}'`
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: color(TUI_RGB.dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: color(TUI_RGB.brandBright), wrap: 'truncate-end' }, truncateColumns(header, viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`  filter ${query === '' ? '· type to search prompts' : '· ' + singleLineText(query)}, enter fills the composer`, viewport.contentColumns)),
+    ...(visible.length === 0
+      ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, truncateColumns('  no matching prompts', viewport.contentColumns))]
+      : visible.map((entry, index) => {
+        const absolute = offset + index
+        const selected = absolute === cursor
+        return createElement(
+          Text,
+          {
+            key: `history-${absolute}`,
+            color: selected ? color(TUI_RGB.brandBright) : undefined,
+            wrap: 'truncate-end',
+          },
+          truncateColumns((selected ? '› ' : '  ') + displayText(entry), viewport.contentColumns),
+        )
+      })),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ move · g/G ends · enter fill · esc close', viewport.contentColumns)),
+  )
+}
+
+/**
+ * The /statusline picker (the Codex setup-view contract): one bounded list
+ * of every status item with its enabled mark, arrow reordering, and a
+ * live preview — the real status line under the composer updates as you
+ * edit, so the panel itself carries no duplicate preview row.
+ */
+export function StatuslinePanel({ enabled, change, close }: {
+  enabled: readonly StatusItemId[]
+  change(items: readonly StatusItemId[]): void
+  close(): void
+}): ReactElement {
+  // Working state: the full catalog in display order (enabled entries in
+  // their configured positions, disabled ones trailing canonically) plus
+  // the enabled set. Persisted shape is the enabled subsequence only.
+  const [order, setOrder] = useState<readonly StatusItemId[]>(() => {
+    const seen = new Set(enabled)
+    return [...enabled, ...DEFAULT_STATUSLINE_ITEMS.filter(id => !seen.has(id))]
+  })
+  const [on, setOn] = useState<ReadonlySet<StatusItemId>>(() => new Set(enabled))
+  const [cursor, setCursor] = useState(0)
+  const commit = (nextOrder: readonly StatusItemId[], nextOn: ReadonlySet<StatusItemId>): void => {
+    setOrder(nextOrder)
+    setOn(nextOn)
+    change(nextOrder.filter(id => nextOn.has(id)))
+  }
+  const move = (offset: number): void => {
+    const target = cursor + offset
+    if (target < 0 || target >= order.length) return
+    const next = [...order]
+    const [item] = next.splice(cursor, 1)
+    next.splice(target, 0, item!)
+    commit(next, on)
+    setCursor(target)
+  }
+  useInput((input, key) => {
+    if (key.escape || input === 'q' || key.return) return close()
+    if (key.upArrow) return setCursor(value => Math.max(0, value - 1))
+    if (key.downArrow) return setCursor(value => Math.min(order.length - 1, value + 1))
+    if (key.leftArrow) return move(-1)
+    if (key.rightArrow) return move(1)
+    if (input === 'g') return setCursor(0)
+    if (input === 'G') return setCursor(order.length - 1)
+    if (input === 'd') {
+      commit([...DEFAULT_STATUSLINE_ITEMS], new Set(DEFAULT_STATUSLINE_ITEMS))
+      setCursor(0)
+      return
+    }
+    if (input === ' ') {
+      const item = order[cursor]
+      if (item === undefined) return
+      const next = new Set(on)
+      if (next.has(item)) next.delete(item)
+      else next.add(item)
+      commit(order, next)
+    }
+  })
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  if (viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/statusline · esc close', viewport.contentColumns))
+  }
+  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
+  const bodyRows = Math.max(1, viewport.bodyRows - 1)
+  const offset = revealRow(0, cursor, order.length, bodyRows)
+  const visible = order.slice(offset, offset + bodyRows)
+  const meta = new Map(STATUS_ITEMS.map(item => [item.id, item]))
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: color(TUI_RGB.dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: color(TUI_RGB.brandBright), wrap: 'truncate-end' }, truncateColumns('/statusline · items apply to the live status line below', viewport.contentColumns)),
+    ...visible.map((id, index) => {
+      const absolute = offset + index
+      const selected = absolute === cursor
+      const info = meta.get(id)
+      return createElement(
+        Text,
+        {
+          key: id,
+          color: selected ? color(TUI_RGB.brandBright) : undefined,
+          dimColor: !on.has(id) || undefined,
+          wrap: 'truncate-end',
+        },
+        truncateColumns((selected ? '› ' : '  ') + (on.has(id) ? '● ' : '○ ') + (info?.label ?? id) + (info === undefined ? '' : ' · ' + info.description + ' · ' + info.side), viewport.contentColumns),
+      )
+    }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ move · space toggle · ←→ reorder · d default · esc close', viewport.contentColumns)),
+  )
+}

package/src/plugin-inventory.ts

@@ -0,0 +1,47 @@
+/** Read-only projection of Cordis Loader entries for /plugin. */
+
+import type { Context, FiberState } from '@deepseek-ai/cordis'
+
+export type PluginPhase = 'pending' | 'loading' | 'active' | 'failed' | 'unloading' | null
+
+export interface PluginRow {
+  readonly entryId: string
+  readonly moduleName: string
+  readonly enabled: boolean
+  readonly phase: PluginPhase
+}
+
+const PHASES: Record<number, PluginPhase> = {
+  0: 'pending',
+  1: 'loading',
+  2: 'active',
+  3: 'failed',
+  4: null,
+  5: 'unloading',
+}
+
+interface LoaderEntry {
+  readonly id: string
+  readonly disabled: boolean
+  readonly options: { readonly group?: boolean; readonly name: string }
+  readonly fiber?: { readonly state: FiberState }
+}
+
+/** Snapshot the live Loader; group-only rows are composition containers, not plugins. */
+export function listPluginRows(ctx: Context): PluginRow[] {
+  const loader = (ctx as unknown as { get(name: string): unknown }).get('loader') as
+    | { entries(): Iterable<LoaderEntry> }
+    | undefined
+  if (loader === undefined) return []
+  const rows: PluginRow[] = []
+  for (const entry of loader.entries()) {
+    if (entry.options.group === true) continue
+    rows.push({
+      entryId: entry.id,
+      moduleName: entry.options.name,
+      enabled: !entry.disabled,
+      phase: entry.fiber === undefined ? null : PHASES[entry.fiber.state] ?? null,
+    })
+  }
+  return rows
+}

package/src/presets.ts

@@ -0,0 +1,64 @@
+/** Agent-preset policy kept independent from the Ink surface. */
+
+import type { Context } from '@deepseek-ai/cordis'
+import type { Agent, AgentHandle } from '@deepseek-ai/dsh-agent'
+import type { Session, SessionEvent } from '@deepseek-ai/dsh-session'
+
+/** One discoverable agent composition. */
+export interface PresetRow {
+  readonly id: string
+  readonly trust: 'system' | 'user'
+  readonly name?: string
+  readonly description?: string
+  readonly order?: number
+  readonly broken?: string
+}
+
+/** Structural boundary for the optional upstream AgentPresets service. */
+export interface AgentPresetsService {
+  readonly defaultId: string
+  list(): Promise<PresetRow[]>
+  resolve(id?: string): Promise<PresetRow>
+  mount(agentCtx: Context, id?: string): Promise<PresetRow>
+  recompose(agentCtx: Context, id: string): Promise<PresetRow>
+  composedPreset(agentCtx: Context): string | undefined
+}
+
+/** Read an optional Cordis service without requiring its package at build time. */
+export function agentPresetsFrom(ctx: Context): AgentPresetsService | undefined {
+  return (ctx as unknown as { get(name: string): unknown }).get('agentPresets') as AgentPresetsService | undefined
+}
+
+/** A preset may change only before the first durable turn begins. */
+export function isBlankSession(events: readonly SessionEvent[]): boolean {
+  return !events.some(event => event.type === 'turn/start')
+}
+
+/** Latest logged selection wins; legacy sessions deliberately fall back to standard. */
+export function resolvePreset(session: Pick<Session, 'header' | 'events'>): string {
+  for (let index = session.events.length - 1; index >= 0; index -= 1) {
+    const event = session.events[index] as unknown as { type: string; data?: { agentPreset?: string } }
+    if (event.type === 'agent-preset/selected' && event.data?.agentPreset !== undefined) {
+      return event.data.agentPreset
+    }
+  }
+  return session.header.agentPreset ?? 'standard'
+}
+
+/** Recompose atomically from the caller's perspective, logging only success. */
+export async function switchPreset(
+  service: AgentPresetsService,
+  agent: Agent,
+  presetId: string,
+): Promise<PresetRow> {
+  if (!isBlankSession(agent.session.events)) {
+    throw new Error('mode is locked after the first turn; use /new <mode>')
+  }
+  const preset = await service.recompose(agent.ctx, presetId)
+  const writable = agent.session as unknown as { append(type: string, data: unknown): void }
+  writable.append('agent-preset/selected', { agentPreset: preset.id })
+  return preset
+}
+
+/** Minimal handle shape used by lifecycle tests without exposing Agent internals. */
+export type OwnedAgent = Pick<AgentHandle, 'agent' | 'dispose'>

package/src/render/animations.ts

@@ -1,7 +1,8 @@
 /**
  * Terminal animation frame tables derived from the web design language:
  * the StateDot "ongoing" pixel chase (3×3 ring, 125ms flat-hold brightness
- * steps, 1s cycle) becomes the single-cell stepped pulse below, and the
+ * steps, 1s cycle) becomes the single-cell stepped pulse below and the
+ * full-ring clockwise braille chase in {@link BUSY_CHASE_FRAMES}, and the
  * streaming caret blink is the Claude-Code convention. Pure functions only —
  * the Ink layer owns timers and colors.
  *
@@ -16,6 +17,18 @@ export function pulseFrame(tick: number): string {
   return PULSE_FRAMES[tick % PULSE_FRAMES.length] ?? PULSE_FRAMES[0]
 }
 
+/**
+ * The web StateDot "ongoing" chase in terminal form: three cells of the 3×3
+ * ring trail clockwise around the eight outer positions, one braille glyph
+ * per step — 8 frames × 125ms = the web's 1s cycle.
+ */
+export const BUSY_CHASE_FRAMES = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'] as const
+
+/** Chase frame for a monotonic tick (the busy composer/Deep-diving marker). */
+export function busyChaseFrame(tick: number): string {
+  return BUSY_CHASE_FRAMES[tick % BUSY_CHASE_FRAMES.length] ?? BUSY_CHASE_FRAMES[0]
+}
+
 /** Caret visibility: half the ticks on, half off (530ms blink). */
 export function caretVisible(tick: number): boolean {
   return tick % 2 === 0

package/src/render/export.ts

@@ -66,6 +66,10 @@ export function buildExportMarkdown(view: TranscriptView, sessionId: string): st
       case 'files':
         out.push(`> files changed: ${entry.paths.join(', ')}`, '')
         break
+      case 'pending':
+        // Codex PendingSteer: queued prompts export like ordinary user rows.
+        out.push('## user', '', entry.text, '')
+        break
       default:
         assertNever(entry, 'transcript entry kind')
     }

package/src/render/inspector.ts

@@ -6,14 +6,23 @@ export interface InspectorViewport {
   maxHeight: number
   /** Rows available to the selected entry after border, title, and footer. */
   bodyRows: number
+  /** Optional blank rows separating title/body/footer on roomy terminals. */
+  gapRows: 0 | 2
   /** Columns available inside the horizontal border and padding. */
   contentColumns: number
+  /** Safe outer width for a bordered dynamic panel; never writes column N. */
+  outerColumns: number
   /** Tiny terminals use a borderless one-line close hint. */
   compact: boolean
 }
 
-/** The three-row read-only composer frame plus its one-row status footer. */
-const INSPECTOR_CHROME_ROWS = 4
+/** Composer (3) + two-row status chrome, plus one optional fixed-height local notice row. */
+const INSPECTOR_CHROME_ROWS = 6
+
+/** One transcript-to-composer gutter, collapsed on short terminals. */
+export function layoutGutterRows(rows: number): 0 | 1 {
+  return Math.max(1, Math.floor(rows)) >= 14 ? 1 : 0
+}
 
 /**
  * Keep the inspector plus its persistent status/composer chrome below
@@ -27,14 +36,23 @@ export function panelViewport(columns: number, rows: number): InspectorViewport
   // scrollback into a tall dynamic panel. A one-row margin is insufficient:
   // the transition can still take the full-terminal rewrite path at rows - 1.
   const maxHeight = Math.max(0, Math.min(
-    safeRows - 2 - INSPECTOR_CHROME_ROWS,
+    safeRows - 2 - INSPECTOR_CHROME_ROWS - layoutGutterRows(safeRows),
     Math.floor(safeRows / 2),
   ))
   const compact = maxHeight < 5 || safeColumns < 8
+  const gapRows = !compact && maxHeight >= 7 ? 2 : 0
+  // A terminal may autowrap a glyph written into its final column. Ink still
+  // accounts for that border as one logical row, so the next dynamic update
+  // erases too few physical rows and leaves stacked frames behind. Codex
+  // renders overlays within an inset surface; reserve the final column here
+  // so every Ink panel follows the same contract.
+  const outerColumns = compact ? safeColumns : Math.max(1, safeColumns - 1)
   return {
     maxHeight,
-    bodyRows: compact ? 0 : maxHeight - 4,
-    contentColumns: compact ? Math.max(1, safeColumns - 1) : Math.max(1, safeColumns - 4),
+    bodyRows: compact ? 0 : maxHeight - 4 - gapRows,
+    gapRows,
+    contentColumns: compact ? Math.max(1, safeColumns - 1) : Math.max(1, outerColumns - 4),
+    outerColumns,
     compact,
   }
 }