mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-05-07 02:51:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

fix(tui): raise picker selection contrast with inverse + bold

Browse source 
Selected rows in the model/session/skills pickers and approval/clarify
prompts only changed from dim gray to cornsilk, which reads as low
contrast on lighter themes and LCDs (reported during TUI v2 blitz).

Switch the selected row to `inverse bold` with the brand accent color
across modelPicker, sessionPicker, skillsHub, and prompts so the
highlight is terminal-portable and unambiguous. Unselected rows stay
dim. Also extends the sessionPicker middle meta column (which was
always dim) to inherit the row's selection state.
This commit is contained in:
Brooklyn Nicholson 2026-04-21 10:47:31 -05:00
parent c3b8c8e42c
commit fc6a27098e
24 changed files with 248 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -174,7 +174,9 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
</Text>
<Text color={t.color.dim}>Current model: {currentModel || '(unknown)'}</Text>
<Text color={t.color.label}>{provider?.warning ? `warning: ${provider.warning}` : ' '}</Text>
<Text color={t.color.label} wrap="truncate-end">
{provider?.warning ? `warning: ${provider.warning}` : ' '}
</Text>
<Text color={t.color.dim}>{off > 0 ? ` ↑ ${off} more` : ' '}</Text>
{Array.from({ length: VISIBLE }, (_, i) => {
@ -183,20 +185,22 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
return row ? (
<Text
color={providerIdx === idx ? t.color.cornsilk : t.color.dim}
bold={providerIdx === idx}
color={providerIdx === idx ? t.color.amber : t.color.dim}
inverse={providerIdx === idx}
key={providers[idx]?.slug ?? `row-${idx}`}
>
{providerIdx === idx ? '▸ ' : ' '}
{i + 1}. {row}
</Text>
) : (
<Text key={`pad-${i}`}> </Text>
<Text color={t.color.dim} key={`pad-${i}`}>
{' '}
</Text>
)
})}
<Text color={t.color.dim}>
{off + VISIBLE < rows.length ? ` ↓ ${rows.length - off - VISIBLE} more` : ' '}
</Text>
<Text color={t.color.dim}>{off + VISIBLE < rows.length ? ` ↓ ${rows.length - off - VISIBLE} more` : ' '}</Text>
<Text color={t.color.dim}>persist: {persistGlobal ? 'global' : 'session'} · g toggle</Text>
<Text color={t.color.dim}>↑/↓ select · Enter choose · 1-9,0 quick · Esc cancel</Text>
@ -213,7 +217,9 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
</Text>
<Text color={t.color.dim}>{names[providerIdx] || '(unknown provider)'}</Text>
<Text color={t.color.label}>{provider?.warning ? `warning: ${provider.warning}` : ' '}</Text>
<Text color={t.color.label} wrap="truncate-end">
{provider?.warning ? `warning: ${provider.warning}` : ' '}
</Text>
<Text color={t.color.dim}>{off > 0 ? ` ↑ ${off} more` : ' '}</Text>
{Array.from({ length: VISIBLE }, (_, i) => {
@ -226,13 +232,17 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
no models listed for this provider
</Text>
) : (
<Text key={`pad-${i}`}> </Text>
<Text color={t.color.dim} key={`pad-${i}`}>
{' '}
</Text>
)
}
return (
<Text
color={modelIdx === idx ? t.color.cornsilk : t.color.dim}
bold={modelIdx === idx}
color={modelIdx === idx ? t.color.amber : t.color.dim}
inverse={modelIdx === idx}
key={`${provider?.slug ?? 'prov'}:${idx}:${row}`}
>
{modelIdx === idx ? '▸ ' : ' '}