mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-05-06 02:41:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Merge pull request #18117 from NousResearch/austin/fix/model-selector

Browse source 
feat(tui): overhaul /model picker to match hermes model with inline auth
This commit is contained in:
Austin Pickett 2026-05-01 05:30:05 -07:00 • committed by GitHub
commit 20132435c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 421 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

255
ui-tui/src/components/modelPicker.tsx
View file

@ -8,12 +8,14 @@ import type { ModelOptionProvider, ModelOptionsResponse } from '../gatewayTypes.
import { asRpcResult, rpcErrorMessage } from '../lib/rpc.js'
import type { Theme } from '../theme.js'
import { OverlayHint, useOverlayKeys, windowItems, windowOffset } from './overlayControls.js'
import { OverlayHint, useOverlayKeys, windowItems } from './overlayControls.js'
const VISIBLE = 12
const MIN_WIDTH = 40
const MAX_WIDTH = 90
type Stage = 'provider' | 'key' | 'model' | 'disconnect'
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,12 @@ 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' || stage === 'disconnect') {
setStage('provider')
setModelIdx(0)
setKeyInput('')
setKeyError('')
setKeySaving(false)
return
}
@ -81,6 +89,118 @@ 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
}
// Disconnect confirmation stage
if (stage === 'disconnect') {
if (ch.toLowerCase() === 'y' || key.return) {
if (!provider) {
setStage('provider')
return
}
setKeySaving(true)
gw.request<{ disconnected?: boolean }>('model.disconnect', {
slug: provider.slug,
...(sessionId ? { session_id: sessionId } : {}),
})
.then(raw => {
const r = asRpcResult<{ disconnected?: boolean }>(raw)
if (r?.disconnected) {
// Mark provider as unauthenticated in local state
setProviders(prev =>
prev.map(p => p.slug === provider.slug
? { ...p, authenticated: false, models: [], total_models: 0, warning: p.key_env ? `paste ${p.key_env} to activate` : 'run `hermes model` to configure' }
: p
)
)
}
setKeySaving(false)
setStage('provider')
})
.catch(() => {
setKeySaving(false)
setStage('provider')
})
return
}
if (ch.toLowerCase() === 'n' || key.escape) {
setStage('provider')
return
}
return
}
const count = stage === 'provider' ? providers.length : models.length
const sel = stage === 'provider' ? providerIdx : modelIdx
const setSel = stage === 'provider' ? setProviderIdx : setModelIdx
@ -103,6 +223,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)
@ -126,22 +258,11 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
return
}
const n = ch === '0' ? 10 : parseInt(ch, 10)
// Disconnect: only in provider stage, only for authenticated providers
if (ch.toLowerCase() === 'd' && stage === 'provider' && provider?.authenticated !== false) {
setStage('disconnect')
if (!Number.isNaN(n) && n >= 1 && n <= Math.min(10, count)) {
const offset = windowOffset(count, sel, VISIBLE)
if (stage === 'provider') {
const next = offset + n - 1
if (providers[next]) {
setProviderIdx(next)
}
} else if (provider && models[offset + n - 1]) {
onSelect(
`${models[offset + n - 1]} --provider ${provider.slug}${persistGlobal ? ' --global' : ` ${TUI_SESSION_MODEL_FLAG}`}`
)
}
return
}
})
@ -161,15 +282,96 @@ 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>
)
}
// ── Disconnect confirmation stage ─────────────────────────────────────
if (stage === 'disconnect' && provider) {
return (
<Box flexDirection="column" width={width}>
<Text bold color={t.color.accent} wrap="truncate-end">
Disconnect {provider.name}?
</Text>
<Text color={t.color.muted} wrap="truncate-end"> </Text>
<Text color={t.color.muted} wrap="truncate-end">
This removes saved credentials for {provider.name}.
</Text>
<Text color={t.color.muted} wrap="truncate-end">
You can re-authenticate later by selecting it again.
</Text>
<Text color={t.color.muted} wrap="truncate-end"> </Text>
{keySaving ? (
<Text color={t.color.muted} wrap="truncate-end">disconnecting…</Text>
) : (
<OverlayHint t={t}>y/Enter confirm · n/Esc cancel</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
? (p.auth_type === 'api_key' ? '(no key)' : '(needs setup)')
: `${modelCount} models`
return `${authMark} ${names[i]} · ${suffix}`
}
)
const { items, offset } = windowItems(rows, providerIdx, VISIBLE)
@ -197,17 +399,19 @@ 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"
>
{providerIdx === idx ? '▸ ' : ' '}
{i + 1}. {row}
{idx + 1}. {row}
</Text>
) : (
<Text color={t.color.muted} key={`pad-${i}`} wrap="truncate-end">
@ -223,11 +427,12 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
<Text color={t.color.muted} wrap="truncate-end">
persist: {persistGlobal ? 'global' : 'session'} · g toggle
</Text>
<OverlayHint t={t}>↑/↓ select · Enter choose · 1-9,0 quick · Esc/q cancel</OverlayHint>
<OverlayHint t={t}>↑/↓ select · Enter choose · d disconnect · Esc/q cancel</OverlayHint>
</Box>
)
}
// ── Model selection stage ────────────────────────────────────────────
const { items, offset } = windowItems(models, modelIdx, VISIBLE)
return (
@ -273,7 +478,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
wrap="truncate-end"
>
{prefix}
{i + 1}. {row}
{idx + 1}. {row}
</Text>
)
})}
@ -286,7 +491,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
persist: {persistGlobal ? 'global' : 'session'} · g toggle
</Text>
<OverlayHint t={t}>
{models.length ? '↑/↓ select · Enter switch · 1-9,0 quick · Esc back · q close' : 'Enter/Esc back · q close'}
{models.length ? '↑/↓ select · Enter switch · Esc back · q close' : 'Enter/Esc back · q close'}
</OverlayHint>
</Box>
)

3
ui-tui/src/gatewayTypes.ts
View file

@ -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