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

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

View file

@ -108,24 +108,29 @@ export function SessionPicker({ gw, onCancel, onSelect, t }: SessionPickerProps)
{items.slice(off, off + VISIBLE).map((s, vi) => {
const i = off + vi
const selected = sel === i
return (
<Box key={s.id}>
<Text color={sel === i ? t.color.label : t.color.dim}>{sel === i ? '▸ ' : ' '}</Text>
<Text bold={selected} color={selected ? t.color.amber : t.color.dim} inverse={selected}>
{selected ? '▸ ' : ' '}
</Text>
<Box width={30}>
<Text color={sel === i ? t.color.cornsilk : t.color.dim}>
<Text bold={selected} color={selected ? t.color.amber : t.color.dim} inverse={selected}>
{String(i + 1).padStart(2)}. [{s.id}]
</Text>
</Box>
<Box width={30}>
<Text color={t.color.dim}>
<Text bold={selected} color={selected ? t.color.amber : t.color.dim} inverse={selected}>
({s.message_count} msgs, {age(s.started_at)}, {s.source || 'tui'})
</Text>
</Box>
<Text color={sel === i ? t.color.cornsilk : t.color.dim}>{s.title || s.preview || '(untitled)'}</Text>
<Text bold={selected} color={selected ? t.color.amber : t.color.dim} inverse={selected}>
{s.title || s.preview || '(untitled)'}
</Text>
</Box>
)
})}