fix(tui): preserve focus contrast across pickers and themes

Use readable backing for selected labels and derive themed focus backing
from accent luminance. Cover focused cells across built-in themes.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

Author: echobt

src/cortex-tui/src/modal/models.rs

@@ -4,7 +4,7 @@
 //! Models are grouped by provider with section headers for easy navigation.
 
 use cortex_core::style::{
-    ACCENT, BORDER, CYAN_PRIMARY, SELECTION_BG, SURFACE_0, TEXT, TEXT_DIM, TEXT_MUTED,
+    BORDER, CYAN_PRIMARY, CortexStyle, SELECTION_BG, SURFACE_0, TEXT, TEXT_DIM, TEXT_MUTED,
 };
 use crossterm::event::{KeyCode, KeyEvent, KeyModifiers};
 use ratatui::buffer::Buffer;
@@ -327,9 +327,9 @@ impl ModelsModal {
         is_selected: bool,
     ) {
         // Determine styles
-        // Selected rows: the banner green accent on the dark gray bar — never inverted.
+        // Selected glyphs get a light backing; the rest of the row stays dark gray.
         let (bg, fg, prefix_fg) = if is_selected {
-            (SELECTION_BG, ACCENT, ACCENT)
+            (SELECTION_BG, TEXT, TEXT)
         } else {
             (SURFACE_0, TEXT, TEXT_DIM)
         };
@@ -343,11 +343,24 @@ impl ModelsModal {
 
         // Selection prefix: ">" for selected, " " for others
         let prefix = if is_selected { ">" } else { " " };
-        buf.set_string(col, y, prefix, Style::default().fg(prefix_fg).bg(bg));
+        buf.set_string(
+            col,
+            y,
+            prefix,
+            if is_selected {
+                CortexStyle::selected()
+            } else {
+                Style::default().fg(prefix_fg).bg(bg)
+            },
+        );
         col += 2;
 
         // Model name — English product name, never the served slug.
-        let name_style = Style::default().fg(fg).bg(bg);
+        let name_style = if is_selected {
+            CortexStyle::selected()
+        } else {
+            Style::default().fg(fg).bg(bg)
+        };
         let display = crate::ui::text_utils::model_display_name(&model.name);
         let max_name_len = 35.min(width.saturating_sub(30) as usize);
         let truncated_name = if display.len() > max_name_len && max_name_len > 3 {
@@ -722,4 +735,20 @@ mod tests {
         let _action_bar = modal.build_action_bar();
         // ActionBar is created successfully (basic smoke test)
     }
+    #[test]
+    fn focus_label_and_caret_cells_have_contrasting_backing() {
+        let model = ModelInfo::new("test", "Test", "Cortex");
+        let modal = ModelsModal::new(vec![model.clone()], None);
+        for width in [40, 120] {
+            let mut buf = Buffer::empty(Rect::new(0, 0, width, 12));
+            modal.render_model_row(0, 0, width, &mut buf, &model, true);
+            assert_eq!(buf[(0, 0)].symbol(), ">");
+            assert_eq!(buf[(2, 0)].symbol(), "T");
+            for x in [0, 2, 3, 4, 5] {
+                assert_eq!(buf[(x, 0)].fg, cortex_core::style::ACCENT);
+                assert_eq!(buf[(x, 0)].bg, TEXT);
+            }
+            assert_eq!(buf[(1, 0)].bg, SELECTION_BG);
+        }
+    }
 }

src/cortex-tui/src/modal/sessions/rendering.rs

@@ -5,8 +5,8 @@ use ratatui::layout::Rect;
 use ratatui::style::{Color, Modifier, Style};
 
 use cortex_core::style::{
-    ACCENT, BORDER, CYAN_PRIMARY, SELECTION_BG, SURFACE_0, SURFACE_1, TEXT, TEXT_DIM, TEXT_MUTED,
-    YELLOW,
+    BORDER, CYAN_PRIMARY, CortexStyle, SELECTION_BG, SURFACE_0, SURFACE_1, TEXT, TEXT_DIM,
+    TEXT_MUTED, YELLOW,
 };
 
 use super::session_action::SessionAction;
@@ -82,9 +82,9 @@ pub fn render_search_bar(search_query: &str, area: Rect, buf: &mut Buffer) {
 
 /// Render a single session row.
 pub fn render_session_row(session: &SessionInfo, is_selected: bool, area: Rect, buf: &mut Buffer) {
-    // Selected rows: the banner green accent on the dark gray bar — never inverted.
+    // Selected glyphs get a light backing; the rest of the row stays dark gray.
     let (bg, fg, prefix_fg) = if is_selected {
-        (SELECTION_BG, ACCENT, ACCENT)
+        (SELECTION_BG, TEXT, TEXT)
     } else {
         (SURFACE_0, TEXT, TEXT_DIM)
     };
@@ -98,11 +98,24 @@ pub fn render_session_row(session: &SessionInfo, is_selected: bool, area: Rect,
 
     // Selection indicator
     let prefix = if is_selected { ">" } else { " " };
-    buf.set_string(col, area.y, prefix, Style::default().fg(prefix_fg).bg(bg));
+    buf.set_string(
+        col,
+        area.y,
+        prefix,
+        if is_selected {
+            CortexStyle::selected()
+        } else {
+            Style::default().fg(prefix_fg).bg(bg)
+        },
+    );
     col += 2;
 
     // Session name (left-aligned)
-    let name_style = Style::default().fg(fg).bg(bg);
+    let name_style = if is_selected {
+        CortexStyle::selected()
+    } else {
+        Style::default().fg(fg).bg(bg)
+    };
 
     // Build metadata: "2h ago   15 msgs   Cortex Mini 1"
     let time_ago = session.relative_time();
@@ -218,3 +231,31 @@ pub fn render_confirmation(
         buf.set_string(warn_x, area.y + 4, warn, warn_style);
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn focus_label_and_caret_cells_have_contrasting_backing() {
+        let session = SessionInfo::new(
+            std::path::PathBuf::from("/test"),
+            "Test",
+            "test",
+            chrono::Utc::now(),
+            0,
+        );
+        for width in [40, 120] {
+            let area = Rect::new(0, 0, width, 12);
+            let mut buf = Buffer::empty(area);
+            render_session_row(&session, true, Rect::new(0, 0, width, 1), &mut buf);
+            assert_eq!(buf[(0, 0)].symbol(), ">");
+            assert_eq!(buf[(2, 0)].symbol(), "T");
+            for x in [0, 2, 3, 4, 5] {
+                assert_eq!(buf[(x, 0)].fg, cortex_core::style::ACCENT);
+                assert_eq!(buf[(x, 0)].bg, TEXT);
+            }
+            assert_eq!(buf[(1, 0)].bg, SELECTION_BG);
+        }
+    }
+}

src/cortex-tui/src/ui/colors.rs

@@ -105,6 +105,28 @@ pub struct AdaptiveColors {
     pub background: Color,
 }
 
+/// Back focused RGB accent glyphs with a contrasting neutral surface.
+pub fn focus_background(accent: Color) -> Color {
+    // ponytail: built-in accents are RGB; resolve terminal palettes if indexed themes ship.
+    let Color::Rgb(r, g, b) = accent else {
+        return cortex_core::style::TEXT;
+    };
+    let linear = |channel: u8| {
+        let value = f64::from(channel) / 255.0;
+        if value <= 0.04045 {
+            value / 12.92
+        } else {
+            ((value + 0.055) / 1.055).powf(2.4)
+        }
+    };
+    let luminance = 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+    if luminance > 0.169 {
+        Color::Black
+    } else {
+        cortex_core::style::TEXT
+    }
+}
+
 impl AdaptiveColors {
     /// Create colors by auto-detecting terminal background
     pub fn from_terminal() -> Self {
@@ -365,4 +387,19 @@ mod tests {
         assert!(themes.contains(&"ocean_dark"));
         assert!(themes.contains(&"monokai"));
     }
+    #[test]
+    fn focus_backing_matches_builtin_accent_luminance() {
+        for name in AdaptiveColors::available_themes() {
+            let colors = AdaptiveColors::from_theme_name(name);
+            let expected = match *name {
+                "ocean_dark" | "monokai" => Color::Black,
+                _ => cortex_core::style::TEXT,
+            };
+            assert_eq!(
+                crate::ui::colors::focus_background(colors.accent),
+                expected,
+                "{name}"
+            );
+        }
+    }
 }

src/cortex-tui/src/views/question_prompt.rs

@@ -158,7 +158,10 @@ impl QuestionPromptView<'_> {
             // The active tab is the focused selection: banner green on the gray bar,
             // never inverted onto the accent. Answered tabs read white.
             let (fg, bg) = if is_active {
-                (colors.accent, cortex_core::style::TEXT)
+                (
+                    colors.accent,
+                    crate::ui::colors::focus_background(colors.accent),
+                )
             } else if is_hovered {
                 (colors.text, colors.user_bg)
             } else {
@@ -193,7 +196,10 @@ impl QuestionPromptView<'_> {
             let is_hovered = self.hovered_tab == Some(self.state.request.questions.len());
 
             let (fg, bg) = if is_active {
-                (colors.accent, cortex_core::style::TEXT)
+                (
+                    colors.accent,
+                    crate::ui::colors::focus_background(colors.accent),
+                )
             } else if is_hovered {
                 (colors.text, colors.user_bg)
             } else {
@@ -267,7 +273,10 @@ impl QuestionPromptView<'_> {
             // Focused option: banner green on the gray selection bar; a picked option
             // stays white — its `✓` carries the green.
             let (fg, bg) = if is_selected {
-                (colors.accent, cortex_core::style::TEXT)
+                (
+                    colors.accent,
+                    crate::ui::colors::focus_background(colors.accent),
+                )
             } else if is_hovered {
                 (colors.text, colors.user_bg)
             } else {
@@ -330,7 +339,10 @@ impl QuestionPromptView<'_> {
                 let label = "Type your own answer";
 
                 let (fg, bg) = if is_selected {
-                    (colors.accent, cortex_core::style::TEXT)
+                    (
+                        colors.accent,
+                        crate::ui::colors::focus_background(colors.accent),
+                    )
                 } else if is_hovered {
                     (colors.text, colors.user_bg)
                 } else {
@@ -687,4 +699,60 @@ mod tests {
             .expect("title");
         assert_eq!(buf[(title_x, title_y)].style().fg, Some(TEXT));
     }
+    #[test]
+    fn focus_tabs_and_options_are_accessible_in_every_builtin_theme() {
+        for name in AdaptiveColors::available_themes() {
+            let colors = AdaptiveColors::from_theme_name(name);
+            let expected_bg = match *name {
+                "ocean_dark" | "monokai" => Color::Black,
+                _ => TEXT,
+            };
+            for width in [40, 120] {
+                let mut req = request();
+                req.questions[0].allow_custom = true;
+                req.questions[0].question = "Home".into();
+                req.questions.push(req.questions[0].clone());
+                let mut state = QuestionState::new(req);
+                for confirm in [false, true] {
+                    state.on_confirm_tab = confirm;
+                    let view = QuestionPromptView::new(&state).with_colors(colors.clone());
+                    let area = Rect::new(0, 0, width, 12);
+                    let mut buf = Buffer::empty(area);
+                    view.render_tabs(&Rect::new(0, 0, width, 1), &mut buf, &colors);
+                    let label = if confirm {
+                        "Confirm".to_string()
+                    } else {
+                        state.get_header(0)
+                    };
+                    let row: String = (0..width).map(|x| buf[(x, 0)].symbol()).collect();
+                    let start = row.find(&label).expect("active tab label") as u16;
+                    for x in start..start + label.chars().count() as u16 {
+                        assert_eq!(buf[(x, 0)].fg, colors.accent, "{name}: {label}");
+                        assert_eq!(buf[(x, 0)].bg, expected_bg, "{name}: {label}");
+                    }
+                }
+                state.on_confirm_tab = false;
+                for selected in [0, 2] {
+                    state.selected_index[0] = selected;
+                    let view = QuestionPromptView::new(&state).with_colors(colors.clone());
+                    let mut buf = Buffer::empty(Rect::new(0, 0, width, 12));
+                    view.render_question(
+                        &Rect::new(0, 0, width, 1),
+                        &Rect::new(0, 2, width, 10),
+                        &mut buf,
+                        &colors,
+                    );
+                    let focused: Vec<_> = buf
+                        .content
+                        .iter()
+                        .filter(|cell| cell.fg == colors.accent && cell.symbol() != " ")
+                        .collect();
+                    assert!(!focused.is_empty(), "{name}: option {selected}");
+                    for cell in focused {
+                        assert_eq!(cell.bg, expected_bg, "{name}: option {selected}");
+                    }
+                }
+            }
+        }
+    }
 }

src/cortex-tui/src/widgets/form/modal.rs

@@ -93,7 +93,7 @@ impl<'a> Widget for FormModal<'a> {
             let label_style = if is_focused {
                 Style::default()
                     .fg(self.colors.accent)
-                    .bg(cortex_core::style::TEXT)
+                    .bg(crate::ui::colors::focus_background(self.colors.accent))
                     .bold()
             } else {
                 Style::default().fg(self.colors.text)
@@ -238,7 +238,7 @@ impl<'a> Widget for FormModal<'a> {
         let submit_style = if self.state.is_submit_focused() {
             Style::default()
                 .fg(self.colors.accent)
-                .bg(cortex_core::style::TEXT)
+                .bg(crate::ui::colors::focus_background(self.colors.accent))
                 .bold()
         } else {
             Style::default().fg(self.colors.text_dim)

src/cortex-tui/src/widgets/form/tests.rs

@@ -375,4 +375,40 @@ mod tests {
         assert_eq!(state.fields[0].value, "AX🎉B");
         assert_eq!(state.fields[0].cursor_pos, 2);
     }
+    #[test]
+    fn focus_field_and_submit_backing_tracks_the_accent() {
+        use crate::ui::colors::AdaptiveColors;
+        use crate::widgets::form::colors::FormModalColors;
+        use ratatui::{buffer::Buffer, style::Color, widgets::Widget};
+        for name in AdaptiveColors::available_themes() {
+            let accent = AdaptiveColors::from_theme_name(name).accent;
+            let expected = match *name {
+                "ocean_dark" | "monokai" => Color::Black,
+                _ => cortex_core::style::TEXT,
+            };
+            let mut state = FormState::new("Test", "test", vec![FormField::text("name", "Name")]);
+            for focus in [0, 1] {
+                state.focus_index = focus;
+                for (width, height) in [(60, 20), (120, 40)] {
+                    let area = Rect::new(0, 0, width, height);
+                    let mut buf = Buffer::empty(area);
+                    FormModal::new(&state)
+                        .colors(FormModalColors {
+                            accent,
+                            ..Default::default()
+                        })
+                        .render(area, &mut buf);
+                    let focused: Vec<_> = buf
+                        .content
+                        .iter()
+                        .filter(|cell| cell.fg == accent && cell.symbol() != " ")
+                        .collect();
+                    assert!(!focused.is_empty(), "{name}: focus {focus}");
+                    for cell in focused {
+                        assert_eq!(cell.bg, expected, "{name}: focus {focus}");
+                    }
+                }
+            }
+        }
+    }
 }