dsh-code 1.3.0 → 1.5.0

package/src/panels/model-panels.ts

@@ -0,0 +1,1021 @@
+/** Model selection and provider-management panels for the terminal app. */
+
+import { createElement, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import { Box, Text, useInput, useStdout } from 'ink'
+import type { ModelDirectory, ModelRow } from '../models.ts'
+import {
+  isDeclaredReasoningEfforts,
+  parseReasoningEffortsDraft,
+  serializeReasoningEfforts,
+  type DiscoveredModelView,
+  type ProviderConfiguration,
+  type ProviderModelSettings,
+  type ProviderSettingsDirectory,
+  type ProviderTargetView,
+  type ReasoningEffortsValue,
+} from '../provider-settings.ts'
+import {
+  authorizationForProvider,
+  providerAuthorizationStatus,
+  type ProviderAuthorizationDirectory,
+  type ProviderAuthorizationRow,
+} from '../authorization.ts'
+import { editQuery } from '../ui/query-editor.ts'
+import { stripPasteMarkers } from '../keyboard.ts'
+import { PanelGap } from '../ui/panel-gap.ts'
+import { panelAccent } from '../ui/panel-accent.ts'
+import { deleteLastGrapheme } from '../render/editor.ts'
+import { panelViewport, selectionWindow } from '../render/inspector.ts'
+import { displayText, padColumns, singleLineText, stringWidth, truncateColumns } from '../render/text.ts'
+import { dim, getPalette, inkColor } from '../theme.ts'
+import { t } from '../i18n.ts'
+import { useStableInput } from '../ui/use-stable-input.ts'
+
+export 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 {
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const rows = useMemo(() => directory?.rows ?? [], [directory])
+  // Direct-typing filter over provider and model names (the /mode contract):
+  // printable keys edit the query, so a long directory is searchable without
+  // a separate search mode. With a query active, q/r/g/G stop acting as
+  // commands and become query text instead.
+  const filtered = useMemo(() => {
+    if (query === '') return rows
+    const needle = query.toLowerCase()
+    return rows.filter(row => `${row.provider} ${row.providerName ?? ''} ${row.model} ${row.modelName}`.toLowerCase().includes(needle))
+  }, [rows, query])
+  const positioned = useRef(false)
+  // Latest-value ref: Ink re-subscribes useInput when its effect flushes,
+  // which can lag a committed render (a directory that just landed paints
+  // before the subscription swaps). A keystroke in that window would meet a
+  // stale closure — Enter died as an empty-filter no-op right after "2 of 4
+  // match" painted. The handler reads render-fresh values through the ref.
+  const liveRef = useRef({ filtered, query, cursor })
+  liveRef.current = { filtered, query, cursor }
+
+  useEffect(() => {
+    // 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 (filtered.length === 0) {
+        if (cursor !== 0) setCursor(0)
+        return
+      }
+      if (cursor >= filtered.length) setCursor(filtered.length - 1)
+      return
+    }
+    const index = rows.findIndex(row => `${row.provider}/${row.model}` === current)
+    if (index >= 0) {
+      positioned.current = true
+      // Position within the ACTIVE filter: the full-row index means nothing
+      // when the query already narrowed the list while the directory loaded
+      // (a late resolve must not place the cursor outside `filtered`).
+      const filteredIndex = filtered.indexOf(rows[index])
+      setCursor(filteredIndex >= 0 ? filteredIndex : 0)
+    } else if (cursor >= filtered.length) {
+      setCursor(Math.max(0, filtered.length - 1))
+    }
+  }, [rows, filtered, cursor, current])
+
+  useInput((input, key) => {
+    const { filtered: list, query: text, cursor: at } = liveRef.current
+    if (key.escape || (input === 'q' && text === '')) {
+      onClose()
+      return
+    }
+    if (input === 'r' && text === '') {
+      onRetry()
+      return
+    }
+    if (key.tab && onProviders !== undefined) {
+      onProviders()
+      return
+    }
+    // Ctrl+C leaves the whole model configuration flow from any stage.
+    if (key.ctrl && input === 'c') {
+      onClose()
+      return
+    }
+    const next = editQuery(text, input, key)
+    if (next !== undefined) {
+      setQuery(next)
+      setCursor(0)
+      return
+    }
+    if (list.length === 0) return
+    if (key.upArrow) {
+      setCursor(at > 0 ? at - 1 : list.length - 1)
+      return
+    }
+    if (key.downArrow) {
+      setCursor(at < list.length - 1 ? at + 1 : 0)
+      return
+    }
+    if (key.pageUp) {
+      setCursor(current => Math.max(0, current - Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    if (key.pageDown) {
+      setCursor(current => Math.min(list.length - 1, current + Math.max(1, viewport.bodyRows - 1)))
+      return
+    }
+    if (key.return && list[at] !== undefined) {
+      onSelect(list[at])
+    }
+  })
+
+  if (viewport.maxHeight === 0 || viewport.compact) {
+    const providers = onProviders === undefined ? '' : ' · tab providers'
+    const state = filtered.length === 0
+      ? directory === undefined && error === undefined
+        ? t('panel.model.loading')
+        : error !== undefined
+          ? t('panel.model.error')
+          : query === '' ? t('panel.model.noModels') : t('panel.model.compactNoMatch', { query: singleLineText(query) })
+      : `❯ ${filtered[cursor]?.modelName ?? filtered[cursor]?.model ?? ''}`
+    const tail = query === ''
+      ? t('panel.model.footer.filter')
+      : t('panel.model.footer.filtered')
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('panel.model.compact', { state, providers, tail }), viewport.contentColumns))
+  }
+
+  const stateRows: ReactElement[] = directory === undefined && error === undefined
+    ? [createElement(Text, { key: 'loading', dimColor: true, wrap: 'truncate-end' }, `  ${t('panel.model.loading')}`)]
+    : error !== undefined
+      ? [createElement(
+        Text,
+        { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' },
+        truncateColumns(`  ${singleLineText(error)}`, viewport.contentColumns),
+      )]
+      : [
+        ...(directory?.failures.length === 0
+          ? []
+          : [createElement(
+            Text,
+            { key: 'failures', color: inkColor(getPalette().warn), wrap: 'truncate-end' },
+            truncateColumns(`  ${t('panel.provider.failure', { providers: directory?.failures.join(', ') ?? '' })}`, viewport.contentColumns),
+          )]),
+        ...(rows.length === 0
+          ? [createElement(Text, { key: 'empty', dimColor: true, wrap: 'truncate-end' }, `  ${t('panel.model.noModels')}`)]
+          : filtered.length === 0
+            ? [createElement(Text, { key: 'no-match', dimColor: true, wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.model.noMatch', { query: singleLineText(query) })}`, viewport.contentColumns))]
+            : []),
+      ]
+  // 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 visibleStateRows = stateRows.slice(0, viewport.bodyRows)
+  const rowBudget = Math.max(0, viewport.bodyRows - visibleStateRows.length)
+  const first = selectionWindow(cursor, filtered.length, rowBudget)
+  const visible = rowBudget === 0 ? [] : filtered.slice(first, first + rowBudget)
+  // Column width spans the filtered list, so the alignment holds while the
+  // cursor scrolls within one filter result.
+  const providerWidth = Math.max(0, ...filtered.map(row => stringWidth(displayText(row.providerName))))
+  const accent = panelAccent('model', getPalette().brand)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(accent.border) },
+    createElement(Text, { color: inkColor(accent.title), bold: true, wrap: 'truncate-end' }, truncateColumns(query === ''
+      ? rows.length === 0 ? t('panel.model.title') : t('panel.model.titleCount', { index: cursor + 1, total: rows.length })
+      : t('panel.model.titleMatches', { filtered: filtered.length, total: rows.length, query: singleLineText(query) }), viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...visibleStateRows,
+    ...visible.map((row) => {
+      const index = filtered.indexOf(row)
+      const capability = row.inputModalities?.includes('image') === true ? ' · image' : ''
+      // Table layout: the provider column pads to the filtered list's widest
+      // name so every model lines up behind it.
+      const label = padColumns(displayText(row.providerName), providerWidth) + '  ' + displayText(row.modelName) + capability
+      return createElement(
+        Text,
+        {
+          key: `${row.provider}/${row.model}`,
+          color: index === cursor ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim),
+          wrap: 'truncate-end',
+        },
+        truncateColumns(`${index === cursor ? '❯ ' : '  '}${label}`, viewport.contentColumns),
+      )
+    }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { wrap: 'truncate-end' }, dim(truncateColumns(query === ''
+      ? t('panel.model.footer.select', { providers: onProviders === undefined ? '' : ` · ${t('panel.model.providers')}` })
+      : t('panel.model.footer.filteredSelect'), viewport.contentColumns))),
+  )
+}
+
+/**
+ * The provider-state label split into its table columns: the route state
+ * (active/dormant) and the credential state (key facts, auth-configured, or
+ * missing). The words are the same ones the previous joined label carried;
+ * the table layout pads them into aligned columns instead.
+ */
+function providerStateParts(row: ProviderTargetView): { route: string; credential: string } {
+  const route = row.active ? t('panel.provider.active') : t('panel.provider.dormant')
+  const credential = row.credential
+  if (credential?.kind === 'error') return { route, credential: t('panel.provider.keyStatusUnavailable') }
+  if (credential?.kind === 'facts') {
+    if (!credential.configured) return { route, credential: t('panel.provider.noKey') }
+    const source = credential.source === undefined ? t('panel.provider.configured') : singleLineText(credential.source)
+    return { route, credential: `${t('panel.provider.key', { value: source })}${credential.writable ? '' : ` · ${t('panel.provider.readOnly')}`}` }
+  }
+  return { route, credential: row.configured ? t('panel.provider.authConfigured') : t('panel.provider.noLogin') }
+}
+
+/** One provider row as table cells: identity, route, credential, login, marker. */
+function providerRowCells(
+  row: ProviderTargetView,
+  authorization: ProviderAuthorizationRow | undefined,
+): readonly [string, string, string, string, string] {
+  const identity = row.displayName === row.provider ? row.provider : row.displayName + ' (' + row.provider + ')'
+  const parts = providerStateParts(row)
+  const manualKeyConfigured = row.credential?.kind === 'facts' && row.credential.configured
+  const showAuthorization = !manualKeyConfigured || authorization?.record.configured === true || authorization?.inFlight === true
+  return [
+    identity,
+    parts.route,
+    parts.credential,
+    showAuthorization ? providerAuthorizationStatus(authorization) : '',
+    row.removable ? 'custom' : '',
+  ]
+}
+
+/** The provider-management stage reached from /model with `a`. */
+export function ProviderPanel({ directory, error, authorizations, authorizationError, onConfigure, onUnset, onRemove, onRetry, onBack, onExit }: {
+  directory: ProviderSettingsDirectory | undefined
+  error: string | undefined
+  authorizations: ProviderAuthorizationDirectory | undefined
+  authorizationError: string | undefined
+  onConfigure: (target: ProviderTargetView) => void
+  onUnset: (target: ProviderTargetView) => void
+  onRemove: (target: ProviderTargetView) => void
+  onRetry: () => void
+  onBack: () => void
+  /** Leave the whole /model flow (Ctrl+C), not just this stage. */
+  onExit: () => void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const rows = directory?.rows ?? []
+  // Configured providers float to the top so a long dormant tail never buries
+  // the ones in use; a dim separator labels the boundary between groups.
+  const sorted = [...rows].sort((left, right) =>
+    (left.configured ? 0 : 1) - (right.configured ? 0 : 1))
+  const configuredCount = sorted.filter(row => row.configured).length
+  const hasSeparator = configuredCount > 0 && configuredCount < sorted.length
+  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 (key.ctrl && input === 'c') {
+      onExit()
+      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 = sorted[cursor]
+    if (target === undefined) return
+    if (input === 'd') {
+      const facts = target.credential
+      if (facts?.kind !== 'facts' || !facts.configured) {
+        setActionError(t('panel.provider.noConfiguredKey'))
+      } else if (!facts.writable) {
+        setActionError(t('panel.provider.readOnlyKey'))
+      } else {
+        onUnset(target)
+      }
+      return
+    }
+    if (input === 'x') {
+      if (!target.removable) {
+        setActionError(t('panel.provider.notRemovable'))
+      } else {
+        onRemove(target)
+      }
+      return
+    }
+    // Enter opens the unified setup page (key, endpoint, models, discovery,
+    // and the subscription channel when the provider offers one):
+    // the old split — Enter for the key alone, Tab for the deep menu — hid
+    // the configuration surface behind an undiscoverable chord.
+    if (key.return) {
+      if (target.settingsNs.length === 0) {
+        setActionError(t('panel.provider.notManaged'))
+      } else {
+        onConfigure(target)
+      }
+    }
+  }, true)
+
+  if (viewport.maxHeight === 0 || viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('panel.providers.compact'), viewport.contentColumns))
+  }
+  const stateRows: ReactElement[] = directory === undefined && error === undefined
+    ? [createElement(Text, { key: 'loading', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, `  ${t('panel.provider.loading')}`)]
+    : 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),
+        )),
+        ...(authorizationError === undefined
+          ? []
+          : [createElement(Text, { key: 'authorization-error', color: inkColor(getPalette().warn), wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.provider.loginStatusUnavailable', { message: singleLineText(authorizationError) })}`, viewport.contentColumns))]),
+        ...(authorizations?.failures ?? []).map((failure, index) => createElement(
+          Text,
+          { key: `authorization-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' }, `  ${t('panel.provider.empty')}`)]
+          : []),
+      ]
+  const visibleStateRows = stateRows.slice(0, viewport.bodyRows)
+  const rowBudget = Math.max(0, viewport.bodyRows - visibleStateRows.length)
+  const displayLength = sorted.length + (hasSeparator ? 1 : 0)
+  const displayCursor = cursor + (hasSeparator && cursor >= configuredCount ? 1 : 0)
+  const first = selectionWindow(displayCursor, displayLength, rowBudget)
+  // Column widths span the whole list, so alignment holds while scrolling.
+  const widths = [0, 0, 0, 0] as [number, number, number, number]
+  for (const row of sorted) {
+    const cells = providerRowCells(row, authorizationForProvider(authorizations, row.provider))
+    for (let column = 0; column < 4; column += 1) {
+      widths[column] = Math.max(widths[column], stringWidth(cells[column]))
+    }
+  }
+  const itemRows: ReactElement[] = []
+  for (let display = first; display < first + rowBudget && display < displayLength; display += 1) {
+    if (hasSeparator && display === configuredCount) {
+      itemRows.push(createElement(Text, { key: 'separator', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.provider.notConfiguredDivider')}`, viewport.contentColumns)))
+      continue
+    }
+    const index = hasSeparator && display > configuredCount ? display - 1 : display
+    const row = sorted[index]
+    if (row === undefined) continue
+    // Table layout: every cell aligns in its own column so a long name or
+    // key source cannot push the next field out of line. Widths come from
+    // the whole list (stable while scrolling); the marker column is last and
+    // unpadded, and the diagnostic rides after it unclipped.
+    const authorization = authorizationForProvider(authorizations, row.provider)
+    const cells = providerRowCells(row, authorization)
+    const label = padColumns(cells[0], widths[0]) + '  '
+      + padColumns(cells[1], widths[1]) + '  '
+      + padColumns(cells[2], widths[2]) + '  '
+      + padColumns(cells[3], widths[3]) + '  '
+      + cells[4]
+      + (row.diagnostic === undefined ? '' : '  ! ' + singleLineText(row.diagnostic))
+    // Configured rows render in the intermediate brand blue so the in-use
+    // group reads at a glance; the dormant tail keeps the dim caption gray.
+    const idleColor = row.configured ? inkColor(getPalette().brandMid) : inkColor(getPalette().dim)
+    itemRows.push(createElement(
+      Text,
+      { key: row.provider, color: index === cursor ? inkColor(getPalette().brandBright) : idleColor, wrap: 'truncate-end' },
+      truncateColumns((index === cursor ? '❯ ' : '  ') + displayText(label), viewport.contentColumns),
+    ))
+  }
+  const accent = panelAccent('model-providers', getPalette().brand)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(accent.border) },
+    createElement(Text, { color: inkColor(accent.title), bold: true, wrap: 'truncate-end' }, truncateColumns(rows.length === 0 ? t('panel.provider.title') : t('panel.provider.titleCount', { index: cursor + 1, total: rows.length }), viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...visibleStateRows,
+    ...itemRows,
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(t('panel.providers.footer'), viewport.contentColumns)),
+  )
+}
+
+/** Provider configuration editor: only explicit models are written to settings. */
+/**
+ * The unified provider setup page: API key, endpoint, and the explicit model
+ * list (with per-model context/output capacities) on ONE screen — the deep
+ * Tab menu and the separate key panel merged into a single discoverable
+ * surface. A saved key rides the same Enter as the endpoint and models; an
+ * empty endpoint keeps the provider's official default. Tab moves to the
+ * discovery page, which interrogates the real endpoint and returns checkable
+ * models for adoption; the last row also accepts hand-typed model ids.
+ */
+/** One declarable donor the setup page can copy reasoning efforts from verbatim. */
+export interface EffortDonor {
+  /** Provider route the declaration lives on. */
+  readonly provider: string
+  /** Model id the declaration belongs to. */
+  readonly id: string
+  /** The stored display-level to wire-value map, copied verbatim. */
+  readonly efforts: Record<string, string | null>
+}
+
+export function ProviderSetupPanel({ target, authorization, onSubscribe, save, saveCredential, discover, effortDonors, done, back, onExit }: {
+  target: ProviderTargetView
+  /**
+   * The provider's sign-in flow, when it offers a web (OAuth) channel: its
+   * presence adds the subscription/key mode layer at the top of the page.
+   */
+  authorization: ProviderAuthorizationRow | undefined
+  /** Open the subscription channel: sign in when logged out, confirm sign-out when logged in. */
+  onSubscribe: (() => void) | undefined
+  /** Models with declared efforts (settings first, catalog-advertised after) a model row can copy from. */
+  effortDonors: readonly EffortDonor[]
+  save: (target: ProviderTargetView, configuration: ProviderConfiguration) => Promise<void>
+  saveCredential: ((target: ProviderTargetView, key: string) => Promise<void>) | undefined
+  discover: (target: ProviderTargetView, request: { readonly apiKey?: string; readonly baseURL?: string }, signal?: AbortSignal) => Promise<readonly DiscoveredModelView[]>
+  /** Report a successful save so the surface can notice the key rotation. */
+  done: (result: { readonly key: boolean }) => void
+  back: () => void
+  /** Leave the whole /model flow (Ctrl+C), not just this page. */
+  onExit: () => void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [page, setPage] = useState<'setup' | 'discover' | 'donor'>('setup')
+  /** Whether the provider offers a web (OAuth) sign-in channel. */
+  const hasSubscription = authorization !== undefined
+    && authorization.methods.some(method => method.id === 'oauth')
+    && onSubscribe !== undefined
+  const [keyDraft, setKeyDraft] = useState('')
+  const [baseURL, setBaseURL] = useState(target.configuration.baseURL ?? '')
+  const [models, setModels] = useState<readonly ProviderModelSettings[]>(target.configuration.models)
+  const [cursor, setCursor] = useState(0)
+  const [zone, setZone] = useState<'mode' | 'key' | 'url' | 'models'>(hasSubscription ? 'mode' : 'key')
+  const [field, setField] = useState<'none' | 'ctx' | 'out'>('none')
+  const [addDraft, setAddDraft] = useState('')
+  /** Micro-editor for the selected model's reasoningEfforts declaration. */
+  const [effEditing, setEffEditing] = useState(false)
+  const [effDraft, setEffDraft] = useState('')
+  const [donorCursor, setDonorCursor] = useState(0)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const credential = target.credential
+  /** The mode layer's selection: 0 = subscription channel, 1 = key channel. */
+  const [modeSel, setModeSel] = useState(
+    authorization?.record.configured === true ? 0
+      : credential?.kind === 'facts' && credential.configured ? 1
+      : 0,
+  )
+  const keyStatus = saveCredential === undefined
+    ? 'key storage unavailable'
+    : credential?.kind === 'error'
+      ? 'key status unavailable'
+      : credential?.kind === 'facts' && credential.configured
+        ? 'key saved' + (credential.source === undefined ? '' : ' · ' + credential.source)
+        : 'no key set'
+  // A dormant route (no resolved profile yet, so no credential facts) may
+  // still receive a key: the save path materializes the apiKeyEnv reference
+  // itself. Only a known-unwritable or indescribable credential blocks.
+  const keyEditable = saveCredential !== undefined
+    && (credential === undefined || (credential.kind === 'facts' && credential.writable))
+  const onAddRow = cursor >= models.length
+  const selected = onAddRow ? undefined : models[cursor]
+
+  const updateSelected = (change: Partial<ProviderModelSettings>): void => {
+    if (selected === undefined) return
+    setModels(current => current.map((model, index) => index === cursor ? { ...model, ...change } : model))
+  }
+
+  const commitAddDraft = (): void => {
+    const id = addDraft.trim()
+    if (id === '') return
+    if (models.some(model => model.id === id)) {
+      setError('model "' + id + '" is already in the list')
+      return
+    }
+    setError(undefined)
+    setModels([...models, { id }])
+    setCursor(models.length)
+    setAddDraft('')
+  }
+
+  /** Compact declaration summary for the row label: count, off, or inherit. */
+  const effortsSummary = (model: ProviderModelSettings): string => {
+    const raw = (model.extras)?.reasoningEfforts
+    if (raw === false) return 'off'
+    if (isDeclaredReasoningEfforts(raw)) return String(Object.keys(raw).length)
+    return '~'
+  }
+
+  /** Write (or clear) the selected model's declaration through extras. */
+  const applyDeclaration = (value: ReasoningEffortsValue): void => {
+    setModels(current => current.map((model, index) => {
+      if (index !== cursor) return model
+      const extras: Record<string, unknown> = { ...model.extras }
+      if (value === undefined) delete extras.reasoningEfforts
+      else extras.reasoningEfforts = value
+      return { ...model, ...Object.keys(extras).length === 0 ? {} : { extras } }
+    }))
+  }
+
+  /** Donors excluding the row being edited (copying from itself is a no-op). */
+  const donorRows = selected === undefined
+    ? []
+    : effortDonors.filter(donor => !(donor.provider === target.provider && donor.id === selected.id))
+  const donorIndex = Math.min(donorCursor, Math.max(0, donorRows.length - 1))
+  const donorRow = donorRows[donorIndex]
+
+  const submit = (): void => {
+    if (busy) return
+    const key = keyDraft.trim()
+    // A typed key must never vanish silently: when it cannot be written here
+    // (read-only env supply, or credential status failed to describe), refuse
+    // the whole save with one actionable line instead of saving the endpoint
+    // and models while dropping the key the user believes was stored.
+    if (key !== '' && !keyEditable) {
+      setError('this API key cannot be written here (read-only or status unavailable); clear the key field to save the endpoint and models alone')
+      return
+    }
+    setBusy(true)
+    setError(undefined)
+    const keySave = key !== '' ? saveCredential : undefined
+    void (async () => {
+      if (keySave !== undefined) await keySave(target, key)
+      await save(target, { ...(baseURL.trim() === '' ? {} : { baseURL }), models })
+      return keySave !== undefined
+    })().then(keySaved => done({ key: keySaved }), (reason: unknown) => {
+      setBusy(false)
+      setError(singleLineText(reason instanceof Error ? reason.message : String(reason)))
+    })
+  }
+
+  useStableInput((input, key) => {
+    if (busy) return
+    // Ctrl+C leaves the whole model configuration flow from any stage.
+    if (key.ctrl && input === 'c') {
+      onExit()
+      return
+    }
+    // Efforts micro-editor: consumes every key while open (space is the
+    // pair separator, so the composer-style remove must not fire here).
+    if (effEditing) {
+      if (key.escape) { setEffEditing(false); setEffDraft(''); return }
+      if (key.return) {
+        const parsed = parseReasoningEffortsDraft(effDraft)
+        if (!parsed.ok) { setError(parsed.error); return }
+        setError(undefined)
+        applyDeclaration(parsed.value)
+        setEffEditing(false)
+        setEffDraft('')
+        return
+      }
+      if (key.backspace || key.delete) { setError(undefined); setEffDraft(current => deleteLastGrapheme(current)); return }
+      if (key.ctrl && input === 'u') { setError(undefined); setEffDraft(''); return }
+      if (key.ctrl || key.meta || input.length === 0) return
+      if (effDraft.length > 200) { setError('efforts draft is too long'); return }
+      setError(undefined)
+      setEffDraft(current => current + stripPasteMarkers(input))
+      return
+    }
+    // Donor picker: one page, up/down move, enter copies verbatim.
+    if (page === 'donor') {
+      if (key.escape || input === 'q') { setPage('setup'); return }
+      if (donorRows.length === 0) return
+      if (key.upArrow) { setDonorCursor(current => current > 0 ? current - 1 : donorRows.length - 1); return }
+      if (key.downArrow) { setDonorCursor(current => current < donorRows.length - 1 ? current + 1 : 0); return }
+      if (key.return && donorRow !== undefined) {
+        applyDeclaration(donorRow.efforts)
+        setError(undefined)
+        setPage('setup')
+      }
+      return
+    }
+    if (key.escape || input === 'q') { back(); return }
+    // Tab serves the selected channel: the subscription channel signs in
+    // through the browser, the key channel interrogates the endpoint.
+    if (key.tab) {
+      if (hasSubscription && modeSel === 0) { onSubscribe(); return }
+      setPage('discover'); return
+    }
+    if (key.return && !(zone === 'mode' && modeSel === 0 && hasSubscription)) { submit(); return }
+    if (zone === 'mode' && hasSubscription) {
+      if (key.upArrow || key.downArrow) { setModeSel(current => (current + 1) % 2); return }
+      if (key.return) { onSubscribe(); return }
+      return
+    }
+    if (zone === 'key') {
+      // Typing stays available even when the key cannot be written here (a
+      // read-only env supply, or a describe failure): the draft is local, and
+      // Enter refuses the save with one actionable line instead of silently
+      // dropping what the user typed.
+      if (key.upArrow && hasSubscription) { setZone('mode'); return }
+      if (key.downArrow) { setZone('url'); return }
+      if (key.backspace || key.delete) { setError(undefined); setKeyDraft(current => [...current].slice(0, -1).join('')); return }
+      if (key.ctrl && input === 'u') { setError(undefined); setKeyDraft(''); return }
+      if (key.ctrl || key.meta || input.length === 0) return
+      const next = keyDraft + stripPasteMarkers(input)
+      if (next.length > 4096) { setError('API key input is too long'); return }
+      setError(undefined)
+      setKeyDraft(next)
+      return
+    }
+    if (zone === 'url') {
+      if (key.upArrow) { setZone('key'); return }
+      if (key.downArrow) { setZone('models'); return }
+      if (key.backspace || key.delete) setBaseURL(current => deleteLastGrapheme(current))
+      else if (!key.ctrl && !key.meta && input !== '') setBaseURL(current => current + stripPasteMarkers(input))
+      return
+    }
+    // Models zone: the explicit list plus the hand-add row below it.
+    if (key.upArrow) {
+      setError(undefined)
+      if (cursor === 0) setZone('url')
+      else { setCursor(current => current - 1); setField('none') }
+      return
+    }
+    if (key.downArrow) {
+      setError(undefined)
+      if (!onAddRow) { setCursor(current => current + 1); setField('none') }
+      return
+    }
+    if (key.leftArrow || key.rightArrow) {
+      if (selected === undefined) return
+      const cycle = key.rightArrow
+        ? (current: 'none' | 'ctx' | 'out') => current === 'none' ? 'ctx' : current === 'ctx' ? 'out' : 'none'
+        : (current: 'none' | 'ctx' | 'out') => current === 'none' ? 'out' : current === 'out' ? 'ctx' : 'none'
+      setField(current => cycle(current))
+      return
+    }
+    if (input === ' ') {
+      if (selected === undefined) commitAddDraft()
+      else {
+        setError(undefined)
+        setField('none')
+        setModels(current => current.filter((_model, index) => index !== cursor))
+        setCursor(current => Math.min(current, Math.max(0, models.length - 1)))
+      }
+      return
+    }
+    if (onAddRow) {
+      if (key.backspace || key.delete) { setError(undefined); setAddDraft(current => deleteLastGrapheme(current)); return }
+      if (key.ctrl || key.meta || input.length === 0) return
+      setError(undefined)
+      setAddDraft(current => current + stripPasteMarkers(input))
+      return
+    }
+    if (input === 'e' && selected !== undefined) {
+      setError(undefined)
+      setEffDraft(serializeReasoningEfforts((selected.extras)?.reasoningEfforts))
+      setEffEditing(true)
+      return
+    }
+    if ((input === 'c' || input === 'C') && !key.ctrl && selected !== undefined) {
+      setError(undefined)
+      setDonorCursor(0)
+      setPage('donor')
+      return
+    }
+    if (field !== 'none' && selected !== undefined) {
+      const name = field === 'ctx' ? 'contextWindow' : 'maxTokens'
+      const current = String(selected[name] ?? '')
+      if (key.backspace || key.delete) {
+        const next = current.slice(0, -1)
+        updateSelected({ [name]: next === '' ? undefined : Number(next) })
+      } else {
+        // A pasted number arrives as one multi-character chunk; accept the
+        // whole digit run instead of the single-character path only.
+        const digits = stripPasteMarkers(input)
+        if (/^[0-9]+$/u.test(digits)) updateSelected({ [name]: Number(current + digits) })
+      }
+    }
+  }, page !== 'discover')
+  if (viewport.maxHeight === 0 || viewport.bodyRows < 3) {
+    // Never hide a live input surface: one visible row keeps the escape
+    // route honest on extremely short terminals (the three fixed rows - key,
+    // url, add-by-id - cannot fit below a three-row body).
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('panel.setup.compact'), viewport.contentColumns))
+  }
+  if (page === 'donor') {
+    const stateRow = donorRows.length === 0
+      ? createElement(Text, { key: 'empty', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.setup.noDonors')}`, viewport.contentColumns))
+      : createElement(Text, { key: 'hint', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.setup.copyInto', { id: displayText(selected?.id ?? '') })}`, viewport.contentColumns))
+    const donorBudget = Math.max(0, viewport.bodyRows - 2)
+    const donorFirst = selectionWindow(donorIndex, donorRows.length, donorBudget)
+    const donorVisible = donorRows.slice(donorFirst, donorFirst + donorBudget)
+    const accent = panelAccent('model-efforts', getPalette().brand)
+    return createElement(
+      Box,
+      { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(accent.border) },
+      createElement(Text, { color: inkColor(accent.title), bold: true, wrap: 'truncate-end' }, truncateColumns(t('panel.setup.copyTitle'), viewport.contentColumns)),
+      createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+      stateRow,
+      ...donorVisible.map((donor, index) => {
+        const active = donorFirst + index === donorIndex
+        const label = (active ? '>' : ' ') + ' ' + donor.provider + '/' + displayText(donor.id) + ' · ' + serializeReasoningEfforts(donor.efforts)
+        return createElement(Text, { key: donor.provider + '/' + donor.id, color: active ? inkColor(getPalette().brandBright) : inkColor(getPalette().text), wrap: 'truncate-end' }, truncateColumns(label, viewport.contentColumns))
+      }),
+      createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+      createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(t('panel.setup.copyFooter'), viewport.contentColumns)),
+    )
+  }
+  if (page === 'discover') {
+    return createElement(ProviderDiscoveryPanel, {
+      target,
+      baseURL,
+      apiKey: keyDraft,
+      configured: models.map(model => model.id),
+      discover,
+      onAdopt: adopted => {
+        const existing = new Set(models.map(model => model.id))
+        const fresh = adopted.filter(model => !existing.has(model.id))
+        if (fresh.length > 0) {
+          setModels([...models, ...fresh.map(model => ({
+            id: model.id,
+            ...model.name === undefined ? {} : { name: model.name },
+            ...model.contextWindow === undefined ? {} : { contextWindow: model.contextWindow },
+            ...model.maxTokens === undefined ? {} : { maxTokens: model.maxTokens },
+          }))])
+          setCursor(models.length)
+        }
+        setPage('setup')
+      },
+      back: () => setPage('setup'),
+      onExit,
+    })
+  }
+  const stateRows = error === undefined ? [] : [createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns('  ' + error, viewport.contentColumns))]
+  const keyBullets = '•'.repeat(Math.min([...keyDraft].length, Math.max(1, viewport.contentColumns - 14)))
+  const keyRow = createElement(Text, { key: 'key', color: zone === 'key' ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(('  ' + (zone === 'key' ? '>' : ' ') + ' key   ' + keyBullets + (zone === 'key' && !busy ? '▏' : '') + (keyDraft === '' ? ' (' + keyStatus + ')' : busy ? ' saving…' : '')).replace(/ +$/u, ''), viewport.contentColumns))
+  const urlRow = createElement(Text, { key: 'url', color: zone === 'url' ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('  ' + (zone === 'url' ? '>' : ' ') + ' url   ' + (baseURL === '' ? '(official default)' : baseURL) + (zone === 'url' ? '▏' : ''), viewport.contentColumns))
+  // The fixed diagnostic row (present only with an adapter error) joins the
+  // same height budget as the state rows — it must never overflow the panel.
+  const rowBudget = Math.max(0, viewport.bodyRows - stateRows.length - (target.diagnostic === undefined ? 0 : 1) - 3)
+  const first = selectionWindow(cursor, models.length + 1, rowBudget)
+  const modelRows: ReactElement[] = []
+  // Table columns: the id, the context window, and the output window each
+  // pad to the list's widest value so every row's fields line up. The active
+  // field's editing brackets occupy the padding, so marking never shifts the
+  // columns beside it.
+  const idWidth = Math.max(0, ...models.map(model => stringWidth(model.id)))
+  const contextWidth = Math.max(0, ...models.map(model => stringWidth(model.contextWindow === undefined ? '-' : String(model.contextWindow))))
+  const outputWidth = Math.max(0, ...models.map(model => stringWidth(model.maxTokens === undefined ? '-' : String(model.maxTokens))))
+  for (let index = first; index < first + Math.max(0, Math.min(models.length + 1 - first, rowBudget)); index += 1) {
+    if (index >= models.length) {
+      modelRows.push(createElement(Text, { key: 'add', color: cursor === index ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('  ' + (cursor === index ? '>' : ' ') + ' + add by id' + (addDraft === '' ? '' : ' ' + addDraft + '▏'), viewport.contentColumns)))
+      continue
+    }
+    const model = models[index]
+    const active = index === cursor
+    const context = model.contextWindow === undefined ? '-' : String(model.contextWindow)
+    const output = model.maxTokens === undefined ? '-' : String(model.maxTokens)
+    const contextCell = active && field === 'ctx'
+      ? padColumns('[' + context + ']', contextWidth + 2)
+      : padColumns(context, contextWidth + 2)
+    const outputCell = active && field === 'out'
+      ? padColumns('[' + output + ']', outputWidth + 2)
+      : padColumns(output, outputWidth + 2)
+    const efforts = active && effEditing
+      ? 'eff:' + effDraft + '▏'
+      : 'eff:' + effortsSummary(model)
+    modelRows.push(createElement(Text, { key: model.id, color: active ? inkColor(getPalette().brandBright) : inkColor(getPalette().success), wrap: 'truncate-end' }, truncateColumns('  ' + (active ? '>' : ' ') + ' [x] ' + padColumns(displayText(model.id), idWidth) + '  in:' + contextCell + ' out:' + outputCell + '  ' + efforts, viewport.contentColumns)))
+  }
+  const accent = panelAccent('model-configure', getPalette().brand)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(accent.border) },
+    createElement(Text, { color: inkColor(accent.title), bold: true, wrap: 'truncate-end' }, truncateColumns(t('panel.setup.title', { provider: target.displayName }), viewport.contentColumns)),
+    // The adapter's configuration diagnostic heads the editor: the provider
+    // is here precisely because it stayed listed for repair.
+    ...(target.diagnostic === undefined ? [] : [createElement(
+      Text,
+      { key: 'diagnostic', color: inkColor(getPalette().warn), wrap: 'truncate-end' },
+      truncateColumns('! ' + displayText(singleLineText(target.diagnostic)), viewport.contentColumns),
+    )]),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...(hasSubscription
+      ? [
+        createElement(Text, { key: 'mode-sub', color: zone === 'mode' && modeSel === 0 ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('  ' + (zone === 'mode' && modeSel === 0 ? '>' : ' ') + ' ' + t('panel.setup.mode.subscribe') + '   ' + (authorization.inFlight ? t('panel.setup.mode.login.running') : authorization.record.configured ? t('panel.setup.mode.login.plan') : t('panel.setup.mode.login.none')), viewport.contentColumns)),
+        createElement(Text, { key: 'mode-key', color: zone === 'mode' && modeSel === 1 ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('  ' + (zone === 'mode' && modeSel === 1 ? '>' : ' ') + ' ' + t('panel.setup.mode.key') + '      ' + keyStatus, viewport.contentColumns)),
+        ...(authorization.record.configured && credential?.kind === 'facts' && credential.configured
+          ? [createElement(Text, { key: 'mode-override', color: inkColor(getPalette().warn), wrap: 'truncate-end' }, truncateColumns('  ' + t('panel.setup.mode.overridden'), viewport.contentColumns))]
+          : []),
+        createElement(Text, { key: 'mode-divider', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('  ' + '─'.repeat(Math.max(0, viewport.contentColumns - 2)), viewport.contentColumns)),
+      ]
+      : []),
+    keyRow,
+    urlRow,
+    ...stateRows,
+    ...modelRows,
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(t('panel.setup.footer'), viewport.contentColumns)),
+  )
+}
+
+/**
+ * The discovery stage of the provider setup page: interrogates the endpoint
+ * the drafts describe (typed key wins over the stored credential) and offers
+ * the advertised models as a checkable list. Already-configured ids render
+ * verified but untoggleable; Enter adopts every checked model back into the
+ * setup page's list — selective adoption, never a bulk import.
+ */
+function ProviderDiscoveryPanel({ target, baseURL, apiKey, configured, discover, onAdopt, back, onExit }: {
+  target: ProviderTargetView
+  baseURL: string
+  apiKey: string
+  configured: readonly string[]
+  discover: (target: ProviderTargetView, request: { readonly apiKey?: string; readonly baseURL?: string }, signal?: AbortSignal) => Promise<readonly DiscoveredModelView[]>
+  onAdopt: (models: readonly DiscoveredModelView[]) => void
+  back: () => void
+  /** Leave the whole /model flow (Ctrl+C). */
+  onExit: () => void
+}): ReactElement {
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  const [epoch, setEpoch] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [rows, setRows] = useState<readonly DiscoveredModelView[]>([])
+  const [checked, setChecked] = useState<ReadonlySet<string>>(new Set())
+  const [cursor, setCursor] = useState(0)
+  useEffect(() => {
+    // One probe per epoch (mount and explicit 'f'); leaving the page aborts.
+    // The drafts are captured when the page opened — adopting unmounts this
+    // stage, so re-renders must not re-interrogate the endpoint.
+    const controller = new AbortController()
+    setLoading(true)
+    setError(undefined)
+    discover(target, {
+      ...(baseURL.trim() === '' ? {} : { baseURL: baseURL.trim() }),
+      ...(apiKey.trim() === '' ? {} : { apiKey: apiKey.trim() }),
+    }, controller.signal).then(discovered => {
+      if (controller.signal.aborted) return
+      setRows(discovered)
+      const alreadyKnown = new Set(configured)
+      const firstNew = discovered.findIndex(model => !alreadyKnown.has(model.id))
+      setCursor(firstNew < 0 ? 0 : firstNew)
+      setLoading(false)
+    }, (reason: unknown) => {
+      if (controller.signal.aborted) return
+      setError(singleLineText(reason instanceof Error ? reason.message : String(reason)))
+      setLoading(false)
+    })
+    return () => { controller.abort() }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [epoch])
+  const known = new Set(configured)
+  useStableInput((input, key) => {
+    if (key.escape || input === 'q') { back(); return }
+    if (key.ctrl && input === 'c') { onExit(); return }
+    if (input === 'f') { setChecked(new Set()); setEpoch(current => current + 1); return }
+    if (loading || error !== undefined) return
+    if (rows.length === 0) return
+    if (key.upArrow) { setCursor(current => current > 0 ? current - 1 : rows.length - 1); return }
+    if (key.downArrow) { setCursor(current => current < rows.length - 1 ? current + 1 : 0); return }
+    const row = rows[cursor]
+    if (row === undefined) return
+    if (input === ' ') {
+      if (known.has(row.id)) return
+      setChecked(current => {
+        const next = new Set(current)
+        if (next.has(row.id)) next.delete(row.id)
+        else next.add(row.id)
+        return next
+      })
+      return
+    }
+    if (key.return) {
+      onAdopt(rows.filter(model => checked.has(model.id)))
+    }
+  }, true)
+  if (viewport.maxHeight === 0) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('panel.discovery.compact'), viewport.contentColumns))
+  }
+  const stateRows = loading
+    ? [createElement(Text, { key: 'loading', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.discovery.loading')}`, viewport.contentColumns))]
+    : error !== undefined
+      ? [createElement(Text, { key: 'error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns('  ' + error, viewport.contentColumns))]
+      : rows.length === 0
+        ? [createElement(Text, { key: 'empty', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.discovery.empty')}`, viewport.contentColumns))]
+        : [createElement(Text, { key: 'summary', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(`  ${t('panel.discovery.summary', { advertised: rows.length, newCount: rows.filter(model => !known.has(model.id)).length, checked: checked.size })}`, viewport.contentColumns))]
+  // One spare row keeps the panel strictly below maxHeight even with the
+  // gap collapsed (the at-equality regime makes Ink rewrite Static).
+  const rowBudget = Math.max(0, viewport.bodyRows - stateRows.length - 1)
+  const first = selectionWindow(cursor, rows.length, rowBudget)
+  const visible = rows.slice(first, first + rowBudget)
+  const accent = panelAccent('model-discover', getPalette().brand)
+  return createElement(
+    Box,
+    { flexDirection: 'column', width: viewport.outerColumns, paddingX: 1, borderStyle: 'round', borderColor: inkColor(accent.border) },
+    createElement(Text, { color: inkColor(accent.title), bold: true, wrap: 'truncate-end' }, truncateColumns(t('panel.discovery.title', { provider: target.displayName }), viewport.contentColumns)),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    ...stateRows,
+    ...visible.map((model, index) => {
+      const absolute = first + index
+      const active = absolute === cursor
+      const added = known.has(model.id)
+      const mark = added ? '✓' : checked.has(model.id) ? '☑' : '☐'
+      const label = (active ? '>' : ' ') + ' ' + mark + ' ' + displayText(model.id) + (model.name === undefined || model.name === model.id ? '' : ' · ' + displayText(model.name))
+      return createElement(Text, { key: model.id, color: added ? inkColor(getPalette().dim) : active ? inkColor(getPalette().brandBright) : inkColor(getPalette().text), wrap: 'truncate-end' }, truncateColumns(label, viewport.contentColumns))
+    }),
+    createElement(PanelGap, { visible: viewport.gapRows > 0 }),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns(t('panel.discovery.footer'), viewport.contentColumns)),
+  )
+}
+
+/** Bounded destructive-action confirmation for credential or provider removal. */
+export 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)
+
+  const action = kind === 'credential' ? 'remove API key' : 'remove provider'
+  if (viewport.maxHeight === 0 || 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)),
+  )
+}
+
+/**
+ * The /help overlay: one scrolling card with the keyboard map, the TUI-local
+ * commands, the live registry commands, and the user-invocable skills — the
+ * real command surface, replacing the one-line notice.
+ */