feat(tui): show all providers in /model picker with inline API key setup

- model.options now returns all canonical providers (not just
  authenticated), each with authenticated/auth_type/key_env fields
- New model.save_key RPC method: saves API key to .env, sets in
  process, returns refreshed provider with models
- Picker shows ● (authed) / ○ (no key) markers with dimmed styling
- Selecting an unauthenticated api_key provider opens inline masked
  key input — after save, transitions directly to model selection
- Non-api_key auth providers show guidance to run hermes model
- Row numbers now show absolute position in list

ui-tui/src/components/modelPicker.tsx

@@ -14,6 +14,8 @@ const VISIBLE = 12
 const MIN_WIDTH = 40
 const MAX_WIDTH = 90
 
+type Stage = 'provider' | 'key' | 'model'
+
 export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPickerProps) {
   const [providers, setProviders] = useState<ModelOptionProvider[]>([])
   const [currentModel, setCurrentModel] = useState('')
@@ -22,7 +24,10 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
   const [persistGlobal, setPersistGlobal] = useState(false)
   const [providerIdx, setProviderIdx] = useState(0)
   const [modelIdx, setModelIdx] = useState(0)
-  const [stage, setStage] = useState<'model' | 'provider'>('provider')
+  const [stage, setStage] = useState<Stage>('provider')
+  const [keyInput, setKeyInput] = useState('')
+  const [keySaving, setKeySaving] = useState(false)
+  const [keyError, setKeyError] = useState('')
 
   const { stdout } = useStdout()
   // Pin the picker to a stable width so the FloatBox parent (which shrinks-
@@ -68,9 +73,11 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
   const names = useMemo(() => providerDisplayNames(providers), [providers])
 
   const back = () => {
-    if (stage === 'model') {
+    if (stage === 'model' || stage === 'key') {
       setStage('provider')
       setModelIdx(0)
+      setKeyInput('')
+      setKeyError('')
 
       return
     }
@@ -81,6 +88,71 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
   useOverlayKeys({ onBack: back, onClose: onCancel })
 
   useInput((ch, key) => {
+    // Key entry stage handles its own input
+    if (stage === 'key') {
+      if (keySaving) {
+        return
+      }
+
+      if (key.return) {
+        if (!keyInput.trim()) {
+          return
+        }
+
+        setKeySaving(true)
+        setKeyError('')
+        gw.request<{ provider?: ModelOptionProvider }>('model.save_key', {
+          slug: provider?.slug,
+          api_key: keyInput.trim(),
+          ...(sessionId ? { session_id: sessionId } : {}),
+        })
+          .then(raw => {
+            const r = asRpcResult<{ provider?: ModelOptionProvider }>(raw)
+
+            if (!r?.provider) {
+              setKeyError('failed to save key')
+              setKeySaving(false)
+
+              return
+            }
+
+            // Update the provider in our list with fresh data
+            setProviders(prev =>
+              prev.map(p => p.slug === r.provider!.slug ? r.provider! : p)
+            )
+            setKeyInput('')
+            setKeySaving(false)
+            setStage('model')
+            setModelIdx(0)
+          })
+          .catch((e: unknown) => {
+            setKeyError(rpcErrorMessage(e))
+            setKeySaving(false)
+          })
+
+        return
+      }
+
+      if (key.backspace || key.delete) {
+        setKeyInput(v => v.slice(0, -1))
+
+        return
+      }
+
+      // ctrl+u clears input
+      if (ch === '\u0015') {
+        setKeyInput('')
+
+        return
+      }
+
+      if (ch && !key.ctrl && !key.meta) {
+        setKeyInput(v => v + ch)
+      }
+
+      return
+    }
+
     const count = stage === 'provider' ? providers.length : models.length
     const sel = stage === 'provider' ? providerIdx : modelIdx
     const setSel = stage === 'provider' ? setProviderIdx : setModelIdx
@@ -103,6 +175,18 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
           return
         }
 
+        if (provider.authenticated === false) {
+          // api_key providers: prompt for key inline
+          if (provider.auth_type === 'api_key' && provider.key_env) {
+            setStage('key')
+            setKeyInput('')
+            setKeyError('')
+          }
+
+          // Other auth types: no-op (warning shown tells them to run hermes model)
+          return
+        }
+
         setStage('model')
         setModelIdx(0)
 
@@ -161,15 +245,65 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
   if (!providers.length) {
     return (
       <Box flexDirection="column">
-        <Text color={t.color.muted}>no authenticated providers</Text>
+        <Text color={t.color.muted}>no providers available</Text>
         <OverlayHint t={t}>Esc/q cancel</OverlayHint>
       </Box>
     )
   }
 
+  // ── Key entry stage ──────────────────────────────────────────────────
+  if (stage === 'key' && provider) {
+    const masked = keyInput ? '•'.repeat(Math.min(keyInput.length, 40)) : ''
+
+    return (
+      <Box flexDirection="column" width={width}>
+        <Text bold color={t.color.accent} wrap="truncate-end">
+          Configure {provider.name}
+        </Text>
+
+        <Text color={t.color.muted} wrap="truncate-end">
+          Paste your API key below (saved to ~/.hermes/.env)
+        </Text>
+
+        <Text color={t.color.muted} wrap="truncate-end"> </Text>
+
+        <Text color={t.color.muted} wrap="truncate-end">
+          {provider.key_env}:
+        </Text>
+
+        <Text color={t.color.accent} wrap="truncate-end">
+          {'  '}{masked || '(empty)'}{keySaving ? '' : '▎'}
+        </Text>
+
+        <Text color={t.color.muted} wrap="truncate-end"> </Text>
+
+        {keyError ? (
+          <Text color={t.color.label} wrap="truncate-end">
+            error: {keyError}
+          </Text>
+        ) : keySaving ? (
+          <Text color={t.color.muted} wrap="truncate-end">
+            saving…
+          </Text>
+        ) : (
+          <Text color={t.color.muted} wrap="truncate-end"> </Text>
+        )}
+
+        <OverlayHint t={t}>Enter save · Ctrl+U clear · Esc back</OverlayHint>
+      </Box>
+    )
+  }
+
+  // ── Provider selection stage ─────────────────────────────────────────
   if (stage === 'provider') {
     const rows = providers.map(
-      (p, i) => `${p.is_current ? '*' : ' '} ${names[i]} · ${p.total_models ?? p.models?.length ?? 0} models`
+      (p, i) => {
+        const authMark = p.authenticated === false ? '○' : p.is_current ? '*' : '●'
+        const modelCount = p.total_models ?? p.models?.length ?? 0
+        const suffix = p.authenticated === false ? '(no key)' : `${modelCount} models`
+
+        return `${authMark} ${names[i]} · ${suffix}`
+      }
     )
 
     const { items, offset } = windowItems(rows, providerIdx, VISIBLE)
@@ -197,11 +331,13 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
         {Array.from({ length: VISIBLE }, (_, i) => {
           const row = items[i]
           const idx = offset + i
+          const p = providers[idx]
+          const dimmed = p?.authenticated === false
 
           return row ? (
             <Text
               bold={providerIdx === idx}
-              color={providerIdx === idx ? t.color.accent : t.color.muted}
+              color={providerIdx === idx ? t.color.accent : dimmed ? t.color.label : t.color.muted}
               inverse={providerIdx === idx}
               key={providers[idx]?.slug ?? `row-${idx}`}
               wrap="truncate-end"
@@ -228,6 +364,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
     )
   }
 
+  // ── Model selection stage ────────────────────────────────────────────
   const { items, offset } = windowItems(models, modelIdx, VISIBLE)
 
   return (

ui-tui/src/gatewayTypes.ts

@@ -302,7 +302,10 @@ export interface ToolsConfigureResponse {
 // ── Model picker ─────────────────────────────────────────────────────
 
 export interface ModelOptionProvider {
+  auth_type?: string
+  authenticated?: boolean
   is_current?: boolean
+  key_env?: string
   models?: string[]
   name: string
   slug: string