From a93c89f4972d9c6a493688f3f4d35aad74c498e1 Mon Sep 17 00:00:00 2001 From: Eric Traut Date: Thu, 30 Apr 2026 22:42:48 -0700 Subject: [PATCH] Color TUI statusline from active theme (#19631) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Why Users have shared that the TUI can feel too visually flat because themes mostly show up in code syntax highlighting. The configurable statusline is a natural place to make the active theme more visible, while still letting users keep the existing monotone statusline if they prefer it. ## What Changed - Added a statusline styling helper that builds the rendered statusline from `(StatusLineItem, text)` segments, preserving item identity while keeping the plain text output unchanged. - Derived foreground accent colors from the active syntax theme by looking up TextMate scopes through the existing syntax highlighter, with conservative ANSI fallbacks when a scope does not provide a foreground. - Tuned theme-derived colors to keep the accents visible without making the statusline feel overly bright. - Added `[tui].status_line_use_colors`, defaulting to `true`, plus a separated `/statusline` toggle so users can enable or disable theme-derived statusline colors from the setup UI. - Updated the live statusline and `/statusline` preview to use the same styled builder, while keeping terminal-title preview text plain. - Kept statusline separators and active-agent add-ons subdued while removing blanket dimming from the whole passive statusline. ## Verification - `cargo test -p codex-tui status_line` - `cargo test -p codex-tui theme_picker` - `cargo test -p codex-tui foreground_style_for_scopes` - `cargo test -p codex-tui` - `cargo test -p codex-config` - `cargo test -p codex-core status_line_use_colors` - `cargo insta pending-snapshots --manifest-path tui/Cargo.toml` ## Visual Screenshot 2026-04-30 at 6 16 08 PM Screenshot 2026-04-30 at 6 16 02 PM --- codex-rs/config/src/types.rs | 5 + codex-rs/core/config.schema.json | 5 + codex-rs/core/src/config/config_tests.rs | 37 +++ codex-rs/core/src/config/edit.rs | 8 + codex-rs/core/src/config/mod.rs | 8 + codex-rs/thread-manager-sample/src/main.rs | 1 + codex-rs/tui/src/app/event_dispatch.rs | 26 +- codex-rs/tui/src/app/tests.rs | 6 +- codex-rs/tui/src/app_event.rs | 4 + codex-rs/tui/src/bottom_pane/chat_composer.rs | 1 - codex-rs/tui/src/bottom_pane/footer.rs | 24 +- codex-rs/tui/src/bottom_pane/mod.rs | 2 + .../src/bottom_pane/multi_select_picker.rs | 224 +++++++++++++-- ..._snapshot_uses_runtime_preview_values.snap | 6 +- .../tui/src/bottom_pane/status_line_setup.rs | 108 +++++-- .../tui/src/bottom_pane/status_line_style.rs | 270 ++++++++++++++++++ .../src/bottom_pane/status_surface_preview.rs | 26 +- codex-rs/tui/src/bottom_pane/title_setup.rs | 2 + codex-rs/tui/src/chatwidget.rs | 8 +- ...tatus_line_setup_popup_hardcoded_only.snap | 6 +- ...ts__status_line_setup_popup_live_only.snap | 6 +- ..._tests__status_line_setup_popup_mixed.snap | 6 +- .../tui/src/chatwidget/status_surfaces.rs | 41 ++- .../src/chatwidget/tests/status_and_layout.rs | 2 +- .../tests/status_surface_previews.rs | 2 +- codex-rs/tui/src/render/highlight.rs | 66 +++++ codex-rs/tui/src/theme_picker.rs | 27 +- 27 files changed, 789 insertions(+), 138 deletions(-) create mode 100644 codex-rs/tui/src/bottom_pane/status_line_style.rs diff --git a/codex-rs/config/src/types.rs b/codex-rs/config/src/types.rs index 43d79ed90..91925fbeb 100644 --- a/codex-rs/config/src/types.rs +++ b/codex-rs/config/src/types.rs @@ -634,6 +634,11 @@ pub struct Tui { #[serde(default)] pub status_line: Option>, + /// Color status line items with colors derived from the active syntax theme. + /// Defaults to `true`. + #[serde(default = "default_true")] + pub status_line_use_colors: bool, + /// Ordered list of terminal title item identifiers. /// /// When set, the TUI renders the selected items into the terminal window/tab title. diff --git a/codex-rs/core/config.schema.json b/codex-rs/core/config.schema.json index d7b7bba6a..c8397418d 100644 --- a/codex-rs/core/config.schema.json +++ b/codex-rs/core/config.schema.json @@ -2528,6 +2528,11 @@ }, "type": "array" }, + "status_line_use_colors": { + "default": true, + "description": "Color status line items with colors derived from the active syntax theme. Defaults to `true`.", + "type": "boolean" + }, "terminal_resize_reflow_max_rows": { "default": null, "description": "Trim terminal resize-reflow replay to the most recent rendered terminal rows when the transcript exceeds this cap. Omit to use Codex's terminal-specific default. Set to `0` to keep all rendered rows.", diff --git a/codex-rs/core/src/config/config_tests.rs b/codex-rs/core/src/config/config_tests.rs index 14affc4fc..aeee21cf7 100644 --- a/codex-rs/core/src/config/config_tests.rs +++ b/codex-rs/core/src/config/config_tests.rs @@ -552,6 +552,7 @@ fn config_toml_deserializes_model_availability_nux() { vim_mode_default: false, alternate_screen: AltScreenMode::default(), status_line: None, + status_line_use_colors: true, terminal_title: None, theme: None, keymap: TuiKeymap::default(), @@ -566,6 +567,37 @@ fn config_toml_deserializes_model_availability_nux() { ); } +#[test] +fn config_toml_status_line_use_colors_defaults_to_enabled() { + let toml = r#" +[tui] +"#; + let cfg: ConfigToml = + toml::from_str(toml).expect("TOML deserialization should succeed for TUI config"); + + assert!( + cfg.tui + .expect("tui config should deserialize") + .status_line_use_colors + ); +} + +#[test] +fn config_toml_deserializes_status_line_use_colors_disabled() { + let toml = r#" +[tui] +status_line_use_colors = false +"#; + let cfg: ConfigToml = + toml::from_str(toml).expect("TOML deserialization should succeed for TUI config"); + + assert!( + !cfg.tui + .expect("tui config should deserialize") + .status_line_use_colors + ); +} + #[test] fn config_toml_deserializes_terminal_resize_reflow_config() { let toml = r#" @@ -2095,6 +2127,7 @@ fn tui_config_missing_notifications_field_defaults_to_enabled() { vim_mode_default: false, alternate_screen: AltScreenMode::Auto, status_line: None, + status_line_use_colors: true, terminal_title: None, theme: None, keymap: TuiKeymap::default(), @@ -6421,6 +6454,7 @@ async fn test_precedence_fixture_with_o3_profile() -> std::io::Result<()> { tool_suggest: ToolSuggestConfig::default(), tui_alternate_screen: AltScreenMode::Auto, tui_status_line: None, + tui_status_line_use_colors: true, tui_terminal_title: None, tui_theme: None, otel: OtelConfig::default(), @@ -6618,6 +6652,7 @@ async fn test_precedence_fixture_with_gpt3_profile() -> std::io::Result<()> { tool_suggest: ToolSuggestConfig::default(), tui_alternate_screen: AltScreenMode::Auto, tui_status_line: None, + tui_status_line_use_colors: true, tui_terminal_title: None, tui_theme: None, otel: OtelConfig::default(), @@ -6769,6 +6804,7 @@ async fn test_precedence_fixture_with_zdr_profile() -> std::io::Result<()> { tool_suggest: ToolSuggestConfig::default(), tui_alternate_screen: AltScreenMode::Auto, tui_status_line: None, + tui_status_line_use_colors: true, tui_terminal_title: None, tui_theme: None, otel: OtelConfig::default(), @@ -6905,6 +6941,7 @@ async fn test_precedence_fixture_with_gpt5_profile() -> std::io::Result<()> { tool_suggest: ToolSuggestConfig::default(), tui_alternate_screen: AltScreenMode::Auto, tui_status_line: None, + tui_status_line_use_colors: true, tui_terminal_title: None, tui_theme: None, otel: OtelConfig::default(), diff --git a/codex-rs/core/src/config/edit.rs b/codex-rs/core/src/config/edit.rs index 80b54aeaf..8d4128900 100644 --- a/codex-rs/core/src/config/edit.rs +++ b/codex-rs/core/src/config/edit.rs @@ -104,6 +104,14 @@ pub fn status_line_items_edit(items: &[String]) -> ConfigEdit { } } +/// Produces a config edit that sets `[tui].status_line_use_colors`. +pub fn status_line_use_colors_edit(enabled: bool) -> ConfigEdit { + ConfigEdit::SetPath { + segments: vec!["tui".to_string(), "status_line_use_colors".to_string()], + value: value(enabled), + } +} + /// Produces a config edit that sets `[tui].terminal_title` to an explicit ordered list. /// /// The array is written even when it is empty so "disabled title updates" stays diff --git a/codex-rs/core/src/config/mod.rs b/codex-rs/core/src/config/mod.rs index 29f158058..83b8d78b8 100644 --- a/codex-rs/core/src/config/mod.rs +++ b/codex-rs/core/src/config/mod.rs @@ -524,6 +524,9 @@ pub struct Config { /// When unset, the TUI defaults to: `model-with-reasoning` and `current-dir`. pub tui_status_line: Option>, + /// Whether to color status line items with colors from the active syntax theme. + pub tui_status_line_use_colors: bool, + /// Ordered list of terminal title item identifiers for the TUI. /// /// When unset, the TUI defaults to: `activity` and `project`. @@ -3011,6 +3014,11 @@ impl Config { .map(|t| t.alternate_screen) .unwrap_or_default(), tui_status_line: cfg.tui.as_ref().and_then(|t| t.status_line.clone()), + tui_status_line_use_colors: cfg + .tui + .as_ref() + .map(|t| t.status_line_use_colors) + .unwrap_or(true), tui_terminal_title: cfg.tui.as_ref().and_then(|t| t.terminal_title.clone()), tui_theme: cfg.tui.as_ref().and_then(|t| t.theme.clone()), terminal_resize_reflow, diff --git a/codex-rs/thread-manager-sample/src/main.rs b/codex-rs/thread-manager-sample/src/main.rs index 2f004717e..757f79bfa 100644 --- a/codex-rs/thread-manager-sample/src/main.rs +++ b/codex-rs/thread-manager-sample/src/main.rs @@ -191,6 +191,7 @@ fn new_config(model: Option, arg0_paths: Arg0DispatchPaths) -> anyhow::R model_availability_nux: ModelAvailabilityNuxConfig::default(), tui_alternate_screen: AltScreenMode::Auto, tui_status_line: None, + tui_status_line_use_colors: true, tui_terminal_title: None, tui_theme: None, terminal_resize_reflow: TerminalResizeReflowConfig::default(), diff --git a/codex-rs/tui/src/app/event_dispatch.rs b/codex-rs/tui/src/app/event_dispatch.rs index 01bae109d..b2cd1e3e0 100644 --- a/codex-rs/tui/src/app/event_dispatch.rs +++ b/codex-rs/tui/src/app/event_dispatch.rs @@ -1785,22 +1785,29 @@ impl App { tui.frame_requester().schedule_frame(); } } - AppEvent::StatusLineSetup { items } => { + AppEvent::StatusLineSetup { + items, + use_theme_colors, + } => { let ids = items.iter().map(ToString::to_string).collect::>(); - let edit = crate::legacy_core::config::edit::status_line_items_edit(&ids); + let items_edit = crate::legacy_core::config::edit::status_line_items_edit(&ids); + let colors_edit = + crate::legacy_core::config::edit::status_line_use_colors_edit(use_theme_colors); let apply_result = ConfigEditsBuilder::new(&self.config.codex_home) - .with_edits([edit]) + .with_edits([items_edit, colors_edit]) .apply() .await; match apply_result { Ok(()) => { self.config.tui_status_line = Some(ids.clone()); - self.chat_widget.setup_status_line(items); + self.config.tui_status_line_use_colors = use_theme_colors; + self.chat_widget.setup_status_line(items, use_theme_colors); } Err(err) => { - tracing::error!(error = %err, "failed to persist status line items; keeping previous selection"); - self.chat_widget - .add_error_message(format!("Failed to save status line items: {err}")); + tracing::error!(error = %err, "failed to persist status line settings; keeping previous selection"); + self.chat_widget.add_error_message(format!( + "Failed to save status line settings: {err}" + )); } } } @@ -1857,15 +1864,20 @@ impl App { crate::render::highlight::set_syntax_theme(theme); } self.sync_tui_theme_selection(name); + self.refresh_status_line(); } Err(err) => { self.restore_runtime_theme_from_config(); + self.refresh_status_line(); tracing::error!(error = %err, "failed to persist theme selection"); self.chat_widget .add_error_message(format!("Failed to save theme: {err}")); } } } + AppEvent::SyntaxThemePreviewed => { + self.refresh_status_line(); + } AppEvent::OpenKeymapActionMenu { context, action } => { self.chat_widget .open_keymap_action_menu(context, action, &self.keymap); diff --git a/codex-rs/tui/src/app/tests.rs b/codex-rs/tui/src/app/tests.rs index 47f57cd82..84500e3ed 100644 --- a/codex-rs/tui/src/app/tests.rs +++ b/codex-rs/tui/src/app/tests.rs @@ -1199,8 +1199,10 @@ async fn replayed_interrupted_turn_restores_queued_input_to_composer() { #[tokio::test] async fn token_usage_update_refreshes_status_line_with_runtime_context_window() { let mut app = make_test_app().await; - app.chat_widget - .setup_status_line(vec![crate::bottom_pane::StatusLineItem::ContextWindowSize]); + app.chat_widget.setup_status_line( + vec![crate::bottom_pane::StatusLineItem::ContextWindowSize], + /*use_theme_colors*/ true, + ); assert_eq!(app.chat_widget.status_line_text(), None); diff --git a/codex-rs/tui/src/app_event.rs b/codex-rs/tui/src/app_event.rs index f2b2b19f6..5ae99e088 100644 --- a/codex-rs/tui/src/app_event.rs +++ b/codex-rs/tui/src/app_event.rs @@ -808,6 +808,7 @@ pub(crate) enum AppEvent { /// Apply a user-confirmed status-line item ordering/selection. StatusLineSetup { items: Vec, + use_theme_colors: bool, }, /// Dismiss the status-line setup UI without changing config. StatusLineSetupCancelled, @@ -828,6 +829,9 @@ pub(crate) enum AppEvent { name: String, }, + /// Runtime syntax theme preview changed; refresh theme-derived UI colors. + SyntaxThemePreviewed, + /// Open set/remove actions for the selected keymap action. OpenKeymapActionMenu { context: String, diff --git a/codex-rs/tui/src/bottom_pane/chat_composer.rs b/codex-rs/tui/src/bottom_pane/chat_composer.rs index 3c255ada2..9e0ba8dc7 100644 --- a/codex-rs/tui/src/bottom_pane/chat_composer.rs +++ b/codex-rs/tui/src/bottom_pane/chat_composer.rs @@ -4267,7 +4267,6 @@ impl ChatComposer { let status_line_active = uses_passive_footer_status_layout(&footer_props); let combined_status_line = if status_line_active { passive_footer_status_line(&footer_props) - .map(ratatui::prelude::Stylize::dim) } else { None }; diff --git a/codex-rs/tui/src/bottom_pane/footer.rs b/codex-rs/tui/src/bottom_pane/footer.rs index a28aa4a1c..9c4036b56 100644 --- a/codex-rs/tui/src/bottom_pane/footer.rs +++ b/codex-rs/tui/src/bottom_pane/footer.rs @@ -684,7 +684,7 @@ fn footer_from_props_lines( // Passive footer context can come from the configurable status line, the // active agent label, or both combined. if let Some(status_line) = passive_footer_status_line(props) { - return vec![status_line.dim()]; + return vec![status_line]; } match props.mode { FooterMode::QuitShortcutReminder => { @@ -755,10 +755,10 @@ pub(crate) fn passive_footer_status_line(props: &FooterProps) -> Option max_left - && let Some(line) = passive_status_line - .as_ref() - .map(|line| line.clone().dim()) - .map(|line| { - truncate_line_with_ellipsis_if_overflow(line, max_left as usize) - }) + && let Some(line) = passive_status_line.as_ref().map(|line| { + truncate_line_with_ellipsis_if_overflow(line.clone(), max_left as usize) + }) { left_width = line.width() as u16; truncated_status_line = Some(line); diff --git a/codex-rs/tui/src/bottom_pane/mod.rs b/codex-rs/tui/src/bottom_pane/mod.rs index 1264bc987..df97d8d65 100644 --- a/codex-rs/tui/src/bottom_pane/mod.rs +++ b/codex-rs/tui/src/bottom_pane/mod.rs @@ -53,6 +53,7 @@ mod mcp_server_elicitation; mod multi_select_picker; mod request_user_input; mod status_line_setup; +mod status_line_style; mod status_surface_preview; mod title_setup; pub(crate) use action_required_title::ACTION_REQUIRED_PREVIEW_PREFIX; @@ -67,6 +68,7 @@ pub(crate) use approval_overlay::format_requested_permissions_rule; pub(crate) use mcp_server_elicitation::McpServerElicitationFormRequest; pub(crate) use mcp_server_elicitation::McpServerElicitationOverlay; pub(crate) use request_user_input::RequestUserInputOverlay; +pub(crate) use status_line_style::status_line_from_segments; mod bottom_pane_view; #[derive(Clone, Debug, PartialEq, Eq)] diff --git a/codex-rs/tui/src/bottom_pane/multi_select_picker.rs b/codex-rs/tui/src/bottom_pane/multi_select_picker.rs index 0082109b7..6b046e7ea 100644 --- a/codex-rs/tui/src/bottom_pane/multi_select_picker.rs +++ b/codex-rs/tui/src/bottom_pane/multi_select_picker.rs @@ -18,8 +18,22 @@ //! app_event_tx, //! ) //! .items(vec![ -//! MultiSelectItem { id: "a".into(), name: "Item A".into(), description: None, enabled: true }, -//! MultiSelectItem { id: "b".into(), name: "Item B".into(), description: None, enabled: false }, +//! MultiSelectItem { +//! id: "a".into(), +//! name: "Item A".into(), +//! description: None, +//! enabled: true, +//! orderable: true, +//! section_break_after: false, +//! }, +//! MultiSelectItem { +//! id: "b".into(), +//! name: "Item B".into(), +//! description: None, +//! enabled: false, +//! orderable: true, +//! section_break_after: false, +//! }, //! ]) //! .on_confirm(|selected_ids, tx| { /* handle confirmation */ }) //! .build(); @@ -64,6 +78,8 @@ const SEARCH_PLACEHOLDER: &str = "Type to search"; /// Prefix displayed before the search query (mimics a command prompt). const SEARCH_PROMPT_PREFIX: &str = "> "; +const SECTION_BREAK_ROW: &str = " ───────────────────────"; + /// Direction for reordering items in the list. enum Direction { Up, @@ -89,7 +105,6 @@ pub type PreviewCallback = Box Option Self { + Self { + id: String::new(), + name: String::new(), + description: None, + enabled: false, + orderable: true, + section_break_after: false, + } + } +} + +struct BuiltRows { + rows: Vec, + state: ScrollState, } /// A multi-select picker widget with fuzzy search and optional reordering. @@ -240,33 +279,61 @@ impl MultiSelectPicker { } /// Calculates the height needed for the row list area. - fn rows_height(&self, rows: &[GenericDisplayRow]) -> u16 { - rows.len().clamp(1, MAX_POPUP_ROWS).try_into().unwrap_or(1) + fn rows_height(&self, rows: &BuiltRows) -> u16 { + rows.rows + .len() + .clamp(1, MAX_POPUP_ROWS) + .try_into() + .unwrap_or(1) } /// Builds the display rows for all currently visible (filtered) items. /// /// Each row shows: `› [x] Item Name` where `›` indicates cursor position /// and `[x]` or `[ ]` indicates enabled/disabled state. - fn build_rows(&self) -> Vec { - self.filtered_indices - .iter() - .enumerate() - .filter_map(|(visible_idx, actual_idx)| { - self.items.get(*actual_idx).map(|item| { - let is_selected = self.state.selected_idx == Some(visible_idx); - let prefix = if is_selected { '›' } else { ' ' }; - let marker = if item.enabled { 'x' } else { ' ' }; - let item_name = truncate_text(&item.name, ITEM_NAME_TRUNCATE_LEN); - let name = format!("{prefix} [{marker}] {item_name}"); - GenericDisplayRow { - name, - description: item.description.clone(), - ..Default::default() - } - }) - }) - .collect() + fn build_rows(&self) -> BuiltRows { + let mut rows = Vec::new(); + let mut visible_to_row = Vec::with_capacity(self.filtered_indices.len()); + for (visible_idx, actual_idx) in self.filtered_indices.iter().enumerate() { + let Some(item) = self.items.get(*actual_idx) else { + continue; + }; + visible_to_row.push(rows.len()); + let is_selected = self.state.selected_idx == Some(visible_idx); + let prefix = if is_selected { '›' } else { ' ' }; + let marker = if item.enabled { 'x' } else { ' ' }; + let item_name = truncate_text(&item.name, ITEM_NAME_TRUNCATE_LEN); + let name = format!("{prefix} [{marker}] {item_name}"); + rows.push(GenericDisplayRow { + name, + description: item.description.clone(), + ..Default::default() + }); + + if item.section_break_after && visible_idx + 1 < self.filtered_indices.len() { + rows.push(GenericDisplayRow { + name: SECTION_BREAK_ROW.to_string(), + is_disabled: true, + ..Default::default() + }); + } + } + + let selected_idx = self + .state + .selected_idx + .and_then(|visible_idx| visible_to_row.get(visible_idx).copied()); + let scroll_top = visible_to_row + .get(self.state.scroll_top) + .copied() + .unwrap_or(0); + BuiltRows { + rows, + state: ScrollState { + selected_idx, + scroll_top, + }, + } } /// Moves the selection cursor up, wrapping to the bottom if at the top. @@ -351,12 +418,24 @@ impl MultiSelectPicker { return; } + if !self + .items + .get(actual_idx) + .is_some_and(|item| item.orderable) + { + return; + } + let new_idx = match direction { Direction::Up if actual_idx > 0 => actual_idx - 1, Direction::Down if actual_idx + 1 < len => actual_idx + 1, _ => return, }; + if !self.items.get(new_idx).is_some_and(|item| item.orderable) { + return; + } + // move item in underlying list self.items.swap(actual_idx, new_idx); @@ -570,8 +649,8 @@ impl Renderable for MultiSelectPicker { render_rows_single_line( render_area, buf, - &rows, - &self.state, + &rows.rows, + &rows.state, render_area.height as usize, "no matches", ); @@ -793,3 +872,96 @@ pub(crate) fn match_item( } None } + +#[cfg(test)] +mod tests { + use super::*; + use crate::app_event::AppEvent; + use pretty_assertions::assert_eq; + use tokio::sync::mpsc::unbounded_channel; + + fn test_picker(items: Vec) -> MultiSelectPicker { + let (tx, _rx) = unbounded_channel::(); + MultiSelectPicker::builder( + "Test".to_string(), + /*subtitle*/ None, + AppEventSender::new(tx), + ) + .items(items) + .enable_ordering() + .build() + } + + fn item(id: &str, orderable: bool, section_break_after: bool) -> MultiSelectItem { + MultiSelectItem { + id: id.to_string(), + name: id.to_string(), + orderable, + section_break_after, + ..Default::default() + } + } + + #[test] + fn non_orderable_items_cannot_move_or_be_crossed() { + let mut picker = test_picker(vec![ + item( + "theme-colors", + /*orderable*/ false, + /*section_break_after*/ true, + ), + item( + "model", /*orderable*/ true, /*section_break_after*/ false, + ), + item( + "branch", /*orderable*/ true, /*section_break_after*/ false, + ), + ]); + + picker.move_selected_item(Direction::Down); + assert_eq!( + picker + .items + .iter() + .map(|item| item.id.as_str()) + .collect::>(), + vec!["theme-colors", "model", "branch"] + ); + + picker.move_down(); + picker.move_selected_item(Direction::Up); + assert_eq!( + picker + .items + .iter() + .map(|item| item.id.as_str()) + .collect::>(), + vec!["theme-colors", "model", "branch"] + ); + } + + #[test] + fn section_break_after_item_renders_separator_row() { + let picker = test_picker(vec![ + item( + "theme-colors", + /*orderable*/ false, + /*section_break_after*/ true, + ), + item( + "model", /*orderable*/ true, /*section_break_after*/ false, + ), + ]); + + let rows = picker.build_rows(); + + assert_eq!( + rows.rows + .iter() + .map(|row| row.name.as_str()) + .collect::>(), + vec!["› [ ] theme-colors", SECTION_BREAK_ROW, " [ ] model"] + ); + assert_eq!(rows.state.selected_idx, Some(0)); + } +} diff --git a/codex-rs/tui/src/bottom_pane/snapshots/codex_tui__bottom_pane__status_line_setup__tests__setup_view_snapshot_uses_runtime_preview_values.snap b/codex-rs/tui/src/bottom_pane/snapshots/codex_tui__bottom_pane__status_line_setup__tests__setup_view_snapshot_uses_runtime_preview_values.snap index ff93e8374..d29d964d8 100644 --- a/codex-rs/tui/src/bottom_pane/snapshots/codex_tui__bottom_pane__status_line_setup__tests__setup_view_snapshot_uses_runtime_preview_values.snap +++ b/codex-rs/tui/src/bottom_pane/snapshots/codex_tui__bottom_pane__status_line_setup__tests__setup_view_snapshot_uses_runtime_preview_values.snap @@ -8,14 +8,14 @@ expression: "render_lines(&view, 72)" Type to search > -› [x] model Current model name +› [x] Use theme colors Apply colors from the active /theme + ─────────────────────── + [x] model Current model name [x] current-dir Current working directory [x] git-branch Current Git branch (omitted when unavaila… [ ] model-with-reasoning Current model name with reasoning level [ ] project-name Project name (omitted when unavailable) [ ] run-state Compact session run-state text (Ready, Wo… - [ ] context-remaining Percentage of context window remaining (o… - [ ] context-used Percentage of context window used (omitte… gpt-5-codex · ~/codex-rs · jif/statusline-preview Use ↑↓ to navigate, ←→ to move, space to select, enter to confirm, esc diff --git a/codex-rs/tui/src/bottom_pane/status_line_setup.rs b/codex-rs/tui/src/bottom_pane/status_line_setup.rs index ea522f3bf..5dd79f35e 100644 --- a/codex-rs/tui/src/bottom_pane/status_line_setup.rs +++ b/codex-rs/tui/src/bottom_pane/status_line_setup.rs @@ -35,6 +35,8 @@ use crate::bottom_pane::status_surface_preview::StatusSurfacePreviewData; use crate::bottom_pane::status_surface_preview::StatusSurfacePreviewItem; use crate::render::renderable::Renderable; +const STATUS_LINE_USE_THEME_COLORS_ITEM_ID: &str = "status-line-use-theme-colors"; + /// Available items that can be displayed in the status line. /// /// Each variant represents a piece of information that can be shown at the @@ -45,7 +47,7 @@ use crate::render::renderable::Renderable; /// - Git-related items only show when in a git repository /// - Context/limit items only show when data is available from the API /// - Session ID only shows after a session has started -#[derive(EnumIter, EnumString, Display, Debug, Clone, Eq, PartialEq, Ord, PartialOrd)] +#[derive(EnumIter, EnumString, Display, Debug, Clone, Copy, Eq, PartialEq, Ord, PartialOrd)] #[strum(serialize_all = "kebab_case")] pub(crate) enum StatusLineItem { /// The current model name. @@ -118,7 +120,7 @@ pub(crate) enum StatusLineItem { impl StatusLineItem { /// User-visible description shown in the popup. - pub(crate) fn description(&self) -> &'static str { + pub(crate) fn description(self) -> &'static str { match self { StatusLineItem::ModelName => "Current model name", StatusLineItem::ModelWithReasoning => "Current model name with reasoning level", @@ -200,17 +202,27 @@ impl StatusLineSetupView { /// /// * `status_line_items` - Currently configured item IDs (in display order), /// or `None` to start with all items disabled + /// * `use_theme_colors` - Whether the preview and saved status line use colors from + /// the active theme /// * `app_event_tx` - Event sender for dispatching configuration changes /// /// Items from `status_line_items` are shown first (in order) and marked as /// enabled. Remaining items are appended and marked as disabled. pub(crate) fn new( status_line_items: Option<&[String]>, + use_theme_colors: bool, preview_data: StatusSurfacePreviewData, app_event_tx: AppEventSender, ) -> Self { let mut used_ids = HashSet::new(); - let mut items = Vec::new(); + let mut items = vec![MultiSelectItem { + id: STATUS_LINE_USE_THEME_COLORS_ITEM_ID.to_string(), + name: "Use theme colors".to_string(), + description: Some("Apply colors from the active /theme".to_string()), + enabled: use_theme_colors, + orderable: false, + section_break_after: true, + }]; if let Some(selected_items) = status_line_items.as_ref() { for id in *selected_items { @@ -246,21 +258,31 @@ impl StatusLineSetupView { .items(items) .enable_ordering() .on_preview(move |items| { - preview_data.line_for_items( + let use_theme_colors = items + .iter() + .find(|item| item.id == STATUS_LINE_USE_THEME_COLORS_ITEM_ID) + .map(|item| item.enabled) + .unwrap_or(true); + preview_data.status_line_for_items( items .iter() .filter(|item| item.enabled) - .filter_map(|item| item.id.parse::().ok()) - .map(StatusLineItem::preview_item), + .filter_map(|item| item.id.parse::().ok()), + use_theme_colors, ) }) .on_confirm(|ids, app_event| { + let use_theme_colors = ids + .iter() + .any(|id| id == STATUS_LINE_USE_THEME_COLORS_ITEM_ID); let items = ids .iter() - .map(|id| id.parse::()) - .collect::, _>>() - .unwrap_or_default(); - app_event.send(AppEvent::StatusLineSetup { items }); + .filter_map(|id| id.parse::().ok()) + .collect::>(); + app_event.send(AppEvent::StatusLineSetup { + items, + use_theme_colors, + }); }) .on_cancel(|app_event| { app_event.send(AppEvent::StatusLineSetupCancelled); @@ -276,6 +298,8 @@ impl StatusLineSetupView { name: item.to_string(), description: Some(item.description().to_string()), enabled, + orderable: true, + section_break_after: false, } } } @@ -415,23 +439,29 @@ mod tests { name: String::new(), description: None, enabled: true, + orderable: true, + section_break_after: false, }, MultiSelectItem { id: StatusLineItem::CurrentDir.to_string(), name: String::new(), description: None, enabled: true, + orderable: true, + section_break_after: false, }, ]; assert_eq!( - preview_data.line_for_items( - items - .iter() - .filter_map(|item| item.id.parse::().ok()) - .map(StatusLineItem::preview_item), + line_text( + preview_data.status_line_for_items( + items + .iter() + .filter_map(|item| item.id.parse::().ok()), + /*use_theme_colors*/ true, + ) ), - Some(Line::from("gpt-5 · /repo")) + Some("gpt-5 · /repo".to_string()) ); } @@ -447,23 +477,29 @@ mod tests { name: String::new(), description: None, enabled: true, + orderable: true, + section_break_after: false, }, MultiSelectItem { id: StatusLineItem::GitBranch.to_string(), name: String::new(), description: None, enabled: true, + orderable: true, + section_break_after: false, }, ]; assert_eq!( - preview_data.line_for_items( - items - .iter() - .filter_map(|item| item.id.parse::().ok()) - .map(StatusLineItem::preview_item), + line_text( + preview_data.status_line_for_items( + items + .iter() + .filter_map(|item| item.id.parse::().ok()), + /*use_theme_colors*/ true, + ) ), - Some(Line::from("gpt-5 · feat/awesome-feature")) + Some("gpt-5 · feat/awesome-feature".to_string()) ); } @@ -485,23 +521,29 @@ mod tests { name: String::new(), description: None, enabled: true, + orderable: true, + section_break_after: false, }, MultiSelectItem { id: StatusLineItem::ThreadTitle.to_string(), name: String::new(), description: None, enabled: true, + orderable: true, + section_break_after: false, }, ]; assert_eq!( - preview_data.line_for_items( - items - .iter() - .filter_map(|item| item.id.parse::().ok()) - .map(StatusLineItem::preview_item), + line_text( + preview_data.status_line_for_items( + items + .iter() + .filter_map(|item| item.id.parse::().ok()), + /*use_theme_colors*/ true, + ) ), - Some(Line::from("gpt-5 · Roadmap cleanup")) + Some("gpt-5 · Roadmap cleanup".to_string()) ); } @@ -514,6 +556,7 @@ mod tests { StatusLineItem::CurrentDir.to_string(), StatusLineItem::GitBranch.to_string(), ]), + /*use_theme_colors*/ true, StatusSurfacePreviewData::from_iter([ ( StatusLineItem::ModelName.preview_item(), @@ -560,4 +603,13 @@ mod tests { .collect::>() .join("\n") } + + fn line_text(line: Option>) -> Option { + line.map(|line| { + line.spans + .iter() + .map(|span| span.content.as_ref()) + .collect::() + }) + } } diff --git a/codex-rs/tui/src/bottom_pane/status_line_style.rs b/codex-rs/tui/src/bottom_pane/status_line_style.rs new file mode 100644 index 000000000..1449256a6 --- /dev/null +++ b/codex-rs/tui/src/bottom_pane/status_line_style.rs @@ -0,0 +1,270 @@ +//! Theme-derived styling for the configurable footer statusline. + +use ratatui::prelude::Stylize; +use ratatui::style::Color; +use ratatui::style::Style; +use ratatui::text::Line; +use ratatui::text::Span; + +use super::status_line_setup::StatusLineItem; +use crate::render::highlight::foreground_style_for_scopes; + +const STATUS_LINE_SEPARATOR: &str = " · "; +const STATUS_LINE_COLOR_SATURATION_PERCENT: u16 = 85; +const STATUS_LINE_COLOR_BRIGHTNESS_PERCENT: u16 = 100; + +#[derive(Clone, Copy, Debug, Eq, PartialEq)] +enum StatusLineAccent { + Model, + Path, + Branch, + State, + Usage, + Limit, + Metadata, + Mode, + Thread, + Progress, +} + +impl StatusLineAccent { + fn for_item(item: StatusLineItem) -> Self { + match item { + StatusLineItem::ModelName | StatusLineItem::ModelWithReasoning => Self::Model, + StatusLineItem::CurrentDir | StatusLineItem::ProjectRoot => Self::Path, + StatusLineItem::GitBranch => Self::Branch, + StatusLineItem::Status => Self::State, + StatusLineItem::ContextRemaining + | StatusLineItem::ContextUsed + | StatusLineItem::ContextWindowSize + | StatusLineItem::UsedTokens + | StatusLineItem::TotalInputTokens + | StatusLineItem::TotalOutputTokens => Self::Usage, + StatusLineItem::FiveHourLimit | StatusLineItem::WeeklyLimit => Self::Limit, + StatusLineItem::CodexVersion | StatusLineItem::SessionId => Self::Metadata, + StatusLineItem::FastMode => Self::Mode, + StatusLineItem::ThreadTitle => Self::Thread, + StatusLineItem::TaskProgress => Self::Progress, + } + } + + fn scopes(self) -> &'static [&'static str] { + match self { + Self::Model => &["entity.name.type", "support.type", "variable"], + Self::Path => &["string", "markup.underline.link"], + Self::Branch => &["entity.name.function", "entity.name.tag"], + Self::State => &["keyword.control", "keyword"], + Self::Usage => &["constant.numeric", "constant"], + Self::Limit => &["constant.language", "storage.type"], + Self::Metadata => &["comment", "constant.other"], + Self::Mode => &["storage.modifier", "keyword.operator"], + Self::Thread => &["markup.heading", "entity.name.section"], + Self::Progress => &["markup.inserted", "constant.numeric"], + } + } + + fn fallback_style(self) -> Style { + match self { + Self::Model | Self::State | Self::Metadata | Self::Mode => Style::default().cyan(), + Self::Path | Self::Usage | Self::Progress => Style::default().green(), + Self::Branch | Self::Limit | Self::Thread => Style::default().magenta(), + } + } +} + +pub(crate) fn status_line_from_segments( + segments: I, + use_theme_colors: bool, +) -> Option> +where + I: IntoIterator, +{ + status_line_from_segments_with_resolver(segments, use_theme_colors, |accent| { + foreground_style_for_scopes(accent.scopes()) + }) +} + +fn status_line_from_segments_with_resolver( + segments: I, + use_theme_colors: bool, + theme_style_for_accent: F, +) -> Option> +where + I: IntoIterator, + F: Fn(StatusLineAccent) -> Option