lighter approval modal (#1768)

The yellow hazard stripes were too scary :)

This also has the added benefit of not rendering anything at the full
width of the terminal, so resizing is a little easier to handle.

<img width="860" height="390" alt="Screenshot 2025-07-31 at 4 03 29 PM"
src="https://github.com/user-attachments/assets/18476e1a-065d-4da9-92fe-e94978ab0fce"
/>

<img width="860" height="390" alt="Screenshot 2025-07-31 at 4 05 03 PM"
src="https://github.com/user-attachments/assets/337db0da-de40-48c6-ae71-0e40f24b87e7"
/>

codex-rs/tui/src/app.rs

@@ -10,7 +10,6 @@ use crate::tui;
 use codex_core::config::Config;
 use codex_core::protocol::Event;
 use codex_core::protocol::EventMsg;
-use codex_core::protocol::ExecApprovalRequestEvent;
 use color_eyre::eyre::Result;
 use crossterm::SynchronizedUpdate;
 use crossterm::event::KeyCode;
@@ -313,14 +312,41 @@ impl App<'_> {
                     }
                     #[cfg(debug_assertions)]
                     SlashCommand::TestApproval => {
+                        use std::collections::HashMap;
+
+                        use codex_core::protocol::ApplyPatchApprovalRequestEvent;
+                        use codex_core::protocol::FileChange;
+
                         self.app_event_tx.send(AppEvent::CodexEvent(Event {
                             id: "1".to_string(),
-                            msg: EventMsg::ExecApprovalRequest(ExecApprovalRequestEvent {
+                            // msg: EventMsg::ExecApprovalRequest(ExecApprovalRequestEvent {
-                                call_id: "1".to_string(),
+                            //     call_id: "1".to_string(),
-                                command: vec!["git".into(), "apply".into()],
+                            //     command: vec!["git".into(), "apply".into()],
-                                cwd: self.config.cwd.clone(),
+                            //     cwd: self.config.cwd.clone(),
-                                reason: Some("test".to_string()),
+                            //     reason: Some("test".to_string()),
-                            }),
+                            // }),
+                            msg: EventMsg::ApplyPatchApprovalRequest(
+                                ApplyPatchApprovalRequestEvent {
+                                    call_id: "1".to_string(),
+                                    changes: HashMap::from([
+                                        (
+                                            PathBuf::from("/tmp/test.txt"),
+                                            FileChange::Add {
+                                                content: "test".to_string(),
+                                            },
+                                        ),
+                                        (
+                                            PathBuf::from("/tmp/test2.txt"),
+                                            FileChange::Update {
+                                                unified_diff: "+test\n-test2".to_string(),
+                                                move_path: None,
+                                            },
+                                        ),
+                                    ]),
+                                    reason: None,
+                                    grant_root: Some(PathBuf::from("/tmp")),
+                                },
+                            ),
                         }));
                     }
                 },

codex-rs/tui/src/chatwidget.rs

@@ -25,6 +25,7 @@ use codex_core::protocol::PatchApplyBeginEvent;
 use codex_core::protocol::TaskCompleteEvent;
 use codex_core::protocol::TokenUsage;
 use crossterm::event::KeyEvent;
+use crossterm::event::KeyEventKind;
 use ratatui::buffer::Buffer;
 use ratatui::layout::Rect;
 use ratatui::widgets::Widget;
@@ -157,7 +158,9 @@ impl ChatWidget<'_> {
     }
 
     pub(crate) fn handle_key_event(&mut self, key_event: KeyEvent) {
-        self.bottom_pane.clear_ctrl_c_quit_hint();
+        if key_event.kind == KeyEventKind::Press {
+            self.bottom_pane.clear_ctrl_c_quit_hint();
+        }
 
         match self.bottom_pane.handle_key_event(key_event) {
             InputResult::Submitted(text) => {

codex-rs/tui/src/user_approval_widget.rs

@@ -7,23 +7,24 @@
 //! driven workflow – a fully‑fledged visual match is not required.
 
 use std::path::PathBuf;
+use std::sync::LazyLock;
 
 use codex_core::protocol::Op;
 use codex_core::protocol::ReviewDecision;
 use crossterm::event::KeyCode;
 use crossterm::event::KeyEvent;
+use crossterm::event::KeyEventKind;
 use ratatui::buffer::Buffer;
 use ratatui::layout::Rect;
 use ratatui::prelude::*;
 use ratatui::text::Line;
-use ratatui::text::Span;
+use ratatui::widgets::Block;
-use ratatui::widgets::List;
+use ratatui::widgets::BorderType;
+use ratatui::widgets::Borders;
 use ratatui::widgets::Paragraph;
 use ratatui::widgets::Widget;
 use ratatui::widgets::WidgetRef;
 use ratatui::widgets::Wrap;
-use tui_input::Input;
-use tui_input::backend::crossterm::EventHandler;
 
 use crate::app_event::AppEvent;
 use crate::app_event_sender::AppEventSender;
@@ -47,68 +48,62 @@ pub(crate) enum ApprovalRequest {
 
 /// Options displayed in the *select* mode.
 struct SelectOption {
-    label: &'static str,
+    label: Line<'static>,
-    decision: Option<ReviewDecision>,
+    description: &'static str,
-    /// `true` when this option switches the widget to *input* mode.
+    key: KeyCode,
-    enters_input_mode: bool,
+    decision: ReviewDecision,
 }
 
-// keep in same order as in the TS implementation
+static COMMAND_SELECT_OPTIONS: LazyLock<Vec<SelectOption>> = LazyLock::new(|| {
-const SELECT_OPTIONS: &[SelectOption] = &[
+    vec![
-    SelectOption {
+        SelectOption {
-        label: "Yes (y)",
+            label: Line::from(vec!["Y".underlined(), "es".into()]),
-        decision: Some(ReviewDecision::Approved),
+            description: "Approve and run the command",
+            key: KeyCode::Char('y'),
+            decision: ReviewDecision::Approved,
+        },
+        SelectOption {
+            label: Line::from(vec!["A".underlined(), "lways".into()]),
+            description: "Approve the command for the remainder of this session",
+            key: KeyCode::Char('a'),
+            decision: ReviewDecision::ApprovedForSession,
+        },
+        SelectOption {
+            label: Line::from(vec!["N".underlined(), "o".into()]),
+            description: "Do not run the command",
+            key: KeyCode::Char('n'),
+            decision: ReviewDecision::Denied,
+        },
+    ]
+});
 
-        enters_input_mode: false,
+static PATCH_SELECT_OPTIONS: LazyLock<Vec<SelectOption>> = LazyLock::new(|| {
-    },
+    vec![
-    SelectOption {
+        SelectOption {
-        label: "Yes, always approve this exact command for this session (a)",
+            label: Line::from(vec!["Y".underlined(), "es".into()]),
-        decision: Some(ReviewDecision::ApprovedForSession),
+            description: "Approve and apply the changes",
-
+            key: KeyCode::Char('y'),
-        enters_input_mode: false,
+            decision: ReviewDecision::Approved,
-    },
+        },
-    SelectOption {
+        SelectOption {
-        label: "Edit or give feedback (e)",
+            label: Line::from(vec!["N".underlined(), "o".into()]),
-        decision: None,
+            description: "Do not apply the changes",
-
+            key: KeyCode::Char('n'),
-        enters_input_mode: true,
+            decision: ReviewDecision::Denied,
-    },
+        },
-    SelectOption {
+    ]
-        label: "No, and keep going (n)",
+});
-        decision: Some(ReviewDecision::Denied),
-
-        enters_input_mode: false,
-    },
-    SelectOption {
-        label: "No, and stop for now (esc)",
-        decision: Some(ReviewDecision::Abort),
-
-        enters_input_mode: false,
-    },
-];
-
-/// Internal mode the widget is in – mirrors the TypeScript component.
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-enum Mode {
-    Select,
-    Input,
-}
 
 /// A modal prompting the user to approve or deny the pending request.
 pub(crate) struct UserApprovalWidget<'a> {
     approval_request: ApprovalRequest,
     app_event_tx: AppEventSender,
     confirmation_prompt: Paragraph<'a>,
+    select_options: &'a Vec<SelectOption>,
 
     /// Currently selected index in *select* mode.
     selected_option: usize,
 
-    /// State for the optional input widget.
-    input: Input,
-
-    /// Current mode.
-    mode: Mode,
-
     /// Set to `true` once a decision has been sent – the parent view can then
     /// remove this widget from its queue.
     done: bool,
@@ -116,7 +111,6 @@ pub(crate) struct UserApprovalWidget<'a> {
 
 impl UserApprovalWidget<'_> {
     pub(crate) fn new(approval_request: ApprovalRequest, app_event_tx: AppEventSender) -> Self {
-        let input = Input::default();
         let confirmation_prompt = match &approval_request {
             ApprovalRequest::Exec {
                 command,
@@ -132,25 +126,20 @@ impl UserApprovalWidget<'_> {
                     None => cwd.display().to_string(),
                 };
                 let mut contents: Vec<Line> = vec![
-                    Line::from(vec![
+                    Line::from(vec!["codex".bold().magenta(), " wants to run:".into()]),
-                        Span::from(cwd_str).dim(),
+                    Line::from(vec![cwd_str.dim(), "$".into(), format!(" {cmd}").into()]),
-                        Span::from("$"),
-                        Span::from(format!(" {cmd}")),
-                    ]),
                     Line::from(""),
                 ];
                 if let Some(reason) = reason {
                     contents.push(Line::from(reason.clone().italic()));
                     contents.push(Line::from(""));
                 }
-                contents.extend(vec![Line::from("Allow command?"), Line::from("")]);
                 Paragraph::new(contents).wrap(Wrap { trim: false })
             }
             ApprovalRequest::ApplyPatch {
                 reason, grant_root, ..
             } => {
-                let mut contents: Vec<Line> =
+                let mut contents: Vec<Line> = vec![];
-                    vec![Line::from("Apply patch".bold()), Line::from("")];
 
                 if let Some(r) = reason {
                     contents.push(Line::from(r.clone().italic()));
@@ -165,20 +154,19 @@ impl UserApprovalWidget<'_> {
                     contents.push(Line::from(""));
                 }
 
-                contents.push(Line::from("Allow changes?"));
+                Paragraph::new(contents).wrap(Wrap { trim: false })
-                contents.push(Line::from(""));
-
-                Paragraph::new(contents)
             }
         };
 
         Self {
+            select_options: match &approval_request {
+                ApprovalRequest::Exec { .. } => &COMMAND_SELECT_OPTIONS,
+                ApprovalRequest::ApplyPatch { .. } => &PATCH_SELECT_OPTIONS,
+            },
             approval_request,
             app_event_tx,
             confirmation_prompt,
             selected_option: 0,
-            input,
-            mode: Mode::Select,
             done: false,
         }
     }
@@ -194,9 +182,8 @@ impl UserApprovalWidget<'_> {
     /// captures input while visible, we don’t need to report whether the event
     /// was consumed—callers can assume it always is.
     pub(crate) fn handle_key_event(&mut self, key: KeyEvent) {
-        match self.mode {
+        if key.kind == KeyEventKind::Press {
-            Mode::Select => self.handle_select_key(key),
+            self.handle_select_key(key);
-            Mode::Input => self.handle_input_key(key),
         }
     }
 
@@ -208,58 +195,24 @@ impl UserApprovalWidget<'_> {
 
     fn handle_select_key(&mut self, key_event: KeyEvent) {
         match key_event.code {
-            KeyCode::Up => {
+            KeyCode::Left => {
-                if self.selected_option == 0 {
+                self.selected_option = (self.selected_option + self.select_options.len() - 1)
-                    self.selected_option = SELECT_OPTIONS.len() - 1;
+                    % self.select_options.len();
-                } else {
-                    self.selected_option -= 1;
-                }
             }
-            KeyCode::Down => {
+            KeyCode::Right => {
-                self.selected_option = (self.selected_option + 1) % SELECT_OPTIONS.len();
+                self.selected_option = (self.selected_option + 1) % self.select_options.len();
-            }
-            KeyCode::Char('y') => {
-                self.send_decision(ReviewDecision::Approved);
-            }
-            KeyCode::Char('a') => {
-                self.send_decision(ReviewDecision::ApprovedForSession);
-            }
-            KeyCode::Char('n') => {
-                self.send_decision(ReviewDecision::Denied);
-            }
-            KeyCode::Char('e') => {
-                self.mode = Mode::Input;
             }
             KeyCode::Enter => {
-                let opt = &SELECT_OPTIONS[self.selected_option];
+                let opt = &self.select_options[self.selected_option];
-                if opt.enters_input_mode {
+                self.send_decision(opt.decision);
-                    self.mode = Mode::Input;
-                } else if let Some(decision) = opt.decision {
-                    self.send_decision(decision);
-                }
             }
             KeyCode::Esc => {
                 self.send_decision(ReviewDecision::Abort);
             }
-            _ => {}
+            other => {
-        }
+                if let Some(opt) = self.select_options.iter().find(|opt| opt.key == other) {
-    }
+                    self.send_decision(opt.decision);
-
+                }
-    fn handle_input_key(&mut self, key_event: KeyEvent) {
-        // Handle special keys first.
-        match key_event.code {
-            KeyCode::Enter => {
-                let feedback = self.input.value().to_string();
-                self.send_decision_with_feedback(ReviewDecision::Denied, feedback);
-            }
-            KeyCode::Esc => {
-                // Cancel input – treat as deny without feedback.
-                self.send_decision(ReviewDecision::Denied);
-            }
-            _ => {
-                // Feed into input widget for normal editing.
-                let ct_event = crossterm::event::Event::Key(key_event);
-                self.input.handle_event(&ct_event);
             }
         }
     }
@@ -312,87 +265,68 @@ impl UserApprovalWidget<'_> {
     }
 
     pub(crate) fn desired_height(&self, width: u16) -> u16 {
-        self.get_confirmation_prompt_height(width - 2) + SELECT_OPTIONS.len() as u16 + 2
+        self.get_confirmation_prompt_height(width) + self.select_options.len() as u16
     }
 }
 
-const PLAIN: Style = Style::new();
-const BLUE_FG: Style = Style::new().fg(Color::LightCyan);
-
 impl WidgetRef for &UserApprovalWidget<'_> {
     fn render_ref(&self, area: Rect, buf: &mut Buffer) {
-        // Take the area, wrap it in a block with a border, and divide up the
+        let prompt_height = self.get_confirmation_prompt_height(area.width);
-        // remaining area into two chunks: one for the confirmation prompt and
+        let [prompt_chunk, response_chunk] = Layout::default()
-        // one for the response.
-        let inner = area.inner(Margin::new(0, 2));
-
-        // Determine how many rows we can allocate for the static confirmation
-        // prompt while *always* keeping enough space for the interactive
-        // response area (select list or input field). When the full prompt
-        // would exceed the available height we truncate it so the response
-        // options never get pushed out of view. This keeps the approval modal
-        // usable even when the overall bottom viewport is small.
-
-        // Full height of the prompt (may be larger than the available area).
-        let full_prompt_height = self.get_confirmation_prompt_height(inner.width);
-
-        // Minimum rows that must remain for the interactive section.
-        let min_response_rows = match self.mode {
-            Mode::Select => SELECT_OPTIONS.len() as u16,
-            // In input mode we need exactly two rows: one for the guidance
-            // prompt and one for the single-line input field.
-            Mode::Input => 2,
-        };
-
-        // Clamp prompt height so confirmation + response never exceed the
-        // available space. `saturating_sub` avoids underflow when the area is
-        // too small even for the minimal layout – in this unlikely case we
-        // fall back to zero-height prompt so at least the options are
-        // visible.
-        let prompt_height = full_prompt_height.min(inner.height.saturating_sub(min_response_rows));
-
-        let chunks = Layout::default()
             .direction(Direction::Vertical)
             .constraints([Constraint::Length(prompt_height), Constraint::Min(0)])
-            .split(inner);
+            .areas(area);
-        let prompt_chunk = chunks[0];
-        let response_chunk = chunks[1];
 
-        // Build the inner lines based on the mode. Collect them into a List of
+        let lines: Vec<Line> = self
-        // non-wrapping lines rather than a Paragraph for predictable layout.
+            .select_options
-        let lines = match self.mode {
+            .iter()
-            Mode::Select => SELECT_OPTIONS
+            .enumerate()
-                .iter()
+            .map(|(idx, opt)| {
-                .enumerate()
+                let style = if idx == self.selected_option {
-                .map(|(idx, opt)| {
+                    Style::new().bg(Color::Cyan).fg(Color::Black)
-                    let (prefix, style) = if idx == self.selected_option {
+                } else {
-                        ("▶", BLUE_FG)
+                    Style::new().bg(Color::DarkGray)
-                    } else {
+                };
-                        (" ", PLAIN)
+                opt.label.clone().alignment(Alignment::Center).style(style)
-                    };
+            })
-                    Line::styled(format!("  {prefix} {}", opt.label), style)
+            .collect();
-                })
+
-                .collect(),
+        let [title_area, button_area, description_area] = Layout::vertical([
-            Mode::Input => {
+            Constraint::Length(1),
-                vec![
+            Constraint::Length(1),
-                    Line::from("Give the model feedback on this command:"),
+            Constraint::Min(0),
-                    Line::from(self.input.value()),
+        ])
-                ]
+        .areas(response_chunk.inner(Margin::new(1, 0)));
-            }
+        let title = match &self.approval_request {
+            ApprovalRequest::Exec { .. } => "Allow command?",
+            ApprovalRequest::ApplyPatch { .. } => "Apply changes?",
         };
-
+        Line::from(title).render(title_area, buf);
-        let border = ("◢◤")
-            .repeat((area.width / 2).into())
-            .fg(Color::LightYellow);
-
-        border.render_ref(area, buf);
-        Paragraph::new(" Execution Request ".bold().black().on_light_yellow())
-            .alignment(Alignment::Center)
-            .render_ref(area, buf);
 
         self.confirmation_prompt.clone().render(prompt_chunk, buf);
-        List::new(lines).render_ref(response_chunk, buf);
+        let areas = Layout::horizontal(
+            lines
+                .iter()
+                .map(|l| Constraint::Length(l.width() as u16 + 2)),
+        )
+        .spacing(1)
+        .split(button_area);
+        for (idx, area) in areas.iter().enumerate() {
+            let line = &lines[idx];
+            line.render(*area, buf);
+        }
 
-        border.render_ref(Rect::new(0, area.y + area.height - 1, area.width, 1), buf);
+        Line::from(self.select_options[self.selected_option].description)
+            .style(Style::new().italic().fg(Color::DarkGray))
+            .render(description_area.inner(Margin::new(1, 0)), buf);
+
+        Block::bordered()
+            .border_type(BorderType::QuadrantOutside)
+            .border_style(Style::default().fg(Color::Cyan))
+            .borders(Borders::LEFT)
+            .render_ref(
+                Rect::new(0, response_chunk.y, 1, response_chunk.height),
+                buf,
+            );
     }
 }