tui: refactor ChatWidget and BottomPane to use Renderables (#5565)

- introduce RenderableItem to support both owned and borrowed children
in composite Renderables
- refactor some of our gnarlier manual layouts, BottomPane and
ChatWidget, to use ColumnRenderable
- Renderable and friends now handle cursor_pos()

Author: nornagon-openai

codex-rs/tui/src/app.rs

@@ -30,6 +30,7 @@ use crate::index_worker::IndexWorker;
 use crate::memory_manager::run_memory_manager;
 use crate::pager_overlay::Overlay;
 use crate::render::highlight::highlight_bash_to_lines;
+use crate::render::renderable::Renderable;
 use crate::resume_picker::ResumeSelection;
 use crate::tui;
 use crate::tui::TuiEvent;
@@ -1229,7 +1230,7 @@ impl App {
                     tui.draw(
                         self.chat_widget.desired_height(tui.terminal.size()?.width),
                         |frame| {
-                            frame.render_widget_ref(&self.chat_widget, frame.area());
+                            self.chat_widget.render(frame.area(), frame.buffer);
                             if let Some((x, y)) = self.chat_widget.cursor_pos(frame.area()) {
                                 frame.set_cursor_position((x, y));
                             }

codex-rs/tui/src/bottom_pane/approval_overlay.rs

@@ -261,10 +261,6 @@ impl BottomPaneView for ApprovalOverlay {
         self.enqueue_request(request);
         None
     }
-
-    fn cursor_pos(&self, area: Rect) -> Option<(u16, u16)> {
-        self.list.cursor_pos(area)
-    }
 }
 
 impl Renderable for ApprovalOverlay {
@@ -275,6 +271,10 @@ impl Renderable for ApprovalOverlay {
     fn render(&self, area: Rect, buf: &mut Buffer) {
         self.list.render(area, buf);
     }
+
+    fn cursor_pos(&self, area: Rect) -> Option<(u16, u16)> {
+        self.list.cursor_pos(area)
+    }
 }
 
 struct ApprovalRequestState {

codex-rs/tui/src/bottom_pane/bottom_pane_view.rs

@@ -1,7 +1,6 @@
 use crate::bottom_pane::ApprovalRequest;
 use crate::render::renderable::Renderable;
 use crossterm::event::KeyEvent;
-use ratatui::layout::Rect;
 
 use super::CancellationEvent;
 
@@ -27,11 +26,6 @@ pub(crate) trait BottomPaneView: Renderable {
         false
     }
 
-    /// Cursor position when this view is active.
-    fn cursor_pos(&self, _area: Rect) -> Option<(u16, u16)> {
-        None
-    }
-
     /// Try to handle approval request; return the original value if not
     /// consumed.
     fn try_consume_approval_request(

codex-rs/tui/src/bottom_pane/feedback_view.rs

@@ -163,6 +163,12 @@ impl BottomPaneView for FeedbackNoteView {
         self.textarea.insert_str(&pasted);
         true
     }
+}
+
+impl Renderable for FeedbackNoteView {
+    fn desired_height(&self, width: u16) -> u16 {
+        1u16 + self.input_height(width) + 3u16
+    }
 
     fn cursor_pos(&self, area: Rect) -> Option<(u16, u16)> {
         if area.height < 2 || area.width <= 2 {
@@ -182,12 +188,6 @@ impl BottomPaneView for FeedbackNoteView {
         let state = *self.textarea_state.borrow();
         self.textarea.cursor_pos_with_state(textarea_rect, state)
     }
-}
-
-impl Renderable for FeedbackNoteView {
-    fn desired_height(&self, width: u16) -> u16 {
-        1u16 + self.input_height(width) + 3u16
-    }
 
     fn render(&self, area: Rect, buf: &mut Buffer) {
         if area.height == 0 || area.width == 0 {

codex-rs/tui/src/bottom_pane/mod.rs

@@ -3,19 +3,16 @@ use std::path::PathBuf;
 
 use crate::app_event_sender::AppEventSender;
 use crate::bottom_pane::queued_user_messages::QueuedUserMessages;
-use crate::render::Insets;
-use crate::render::RectExt;
-use crate::render::renderable::Renderable as _;
+use crate::render::renderable::FlexRenderable;
+use crate::render::renderable::Renderable;
+use crate::render::renderable::RenderableItem;
 use crate::tui::FrameRequester;
 use bottom_pane_view::BottomPaneView;
 use codex_file_search::FileMatch;
 use crossterm::event::KeyCode;
 use crossterm::event::KeyEvent;
 use ratatui::buffer::Buffer;
-use ratatui::layout::Constraint;
-use ratatui::layout::Layout;
 use ratatui::layout::Rect;
-use ratatui::widgets::WidgetRef;
 use std::time::Duration;
 
 mod approval_overlay;
@@ -126,77 +123,6 @@ impl BottomPane {
         self.request_redraw();
     }
 
-    pub fn desired_height(&self, width: u16) -> u16 {
-        let top_margin = 1;
-
-        // Base height depends on whether a modal/overlay is active.
-        let base = match self.active_view().as_ref() {
-            Some(view) => view.desired_height(width),
-            None => {
-                let status_height = self
-                    .status
-                    .as_ref()
-                    .map_or(0, |status| status.desired_height(width));
-                let queue_height = self.queued_user_messages.desired_height(width);
-                let spacing_height = if status_height == 0 && queue_height == 0 {
-                    0
-                } else {
-                    1
-                };
-                self.composer
-                    .desired_height(width)
-                    .saturating_add(spacing_height)
-                    .saturating_add(status_height)
-                    .saturating_add(queue_height)
-            }
-        };
-        // Account for bottom padding rows. Top spacing is handled in layout().
-        base.saturating_add(top_margin)
-    }
-
-    fn layout(&self, area: Rect) -> [Rect; 2] {
-        // At small heights, bottom pane takes the entire height.
-        let top_margin = if area.height <= 1 { 0 } else { 1 };
-
-        let area = area.inset(Insets::tlbr(top_margin, 0, 0, 0));
-        if self.active_view().is_some() {
-            return [Rect::ZERO, area];
-        }
-        let has_queue = !self.queued_user_messages.messages.is_empty();
-        let mut status_height = self
-            .status
-            .as_ref()
-            .map_or(0, |status| status.desired_height(area.width))
-            .min(area.height.saturating_sub(1));
-        if has_queue && status_height > 1 {
-            status_height = status_height.saturating_sub(1);
-        }
-        let combined_height = status_height
-            .saturating_add(self.queued_user_messages.desired_height(area.width))
-            .min(area.height.saturating_sub(1));
-
-        let [status_area, _, content_area] = Layout::vertical([
-            Constraint::Length(combined_height),
-            Constraint::Length(if combined_height == 0 { 0 } else { 1 }),
-            Constraint::Min(1),
-        ])
-        .areas(area);
-        [status_area, content_area]
-    }
-
-    pub fn cursor_pos(&self, area: Rect) -> Option<(u16, u16)> {
-        // Hide the cursor whenever an overlay view is active (e.g. the
-        // status indicator shown while a task is running, or approval modal).
-        // In these states the textarea is not interactable, so we should not
-        // show its caret.
-        let [_, content] = self.layout(area);
-        if let Some(view) = self.active_view() {
-            view.cursor_pos(content)
-        } else {
-            self.composer.cursor_pos(content)
-        }
-    }
-
     /// Forward a key event to the active view or the composer.
     pub fn handle_key_event(&mut self, key_event: KeyEvent) -> InputResult {
         // If a modal/view is active, handle it here; otherwise forward to composer.
@@ -564,42 +490,39 @@ impl BottomPane {
     pub(crate) fn take_recent_submission_images(&mut self) -> Vec<PathBuf> {
         self.composer.take_recent_submission_images()
     }
-}
-
-impl WidgetRef for &BottomPane {
-    fn render_ref(&self, area: Rect, buf: &mut Buffer) {
-        let [top_area, content_area] = self.layout(area);
 
-        // When a modal view is active, it owns the whole content area.
+    fn as_renderable(&'_ self) -> RenderableItem<'_> {
         if let Some(view) = self.active_view() {
-            view.render(content_area, buf);
+            RenderableItem::Borrowed(view)
         } else {
-            let status_height = self
-                .status
-                .as_ref()
-                .map(|status| status.desired_height(top_area.width).min(top_area.height))
-                .unwrap_or(0);
-            if let Some(status) = &self.status
-                && status_height > 0
-            {
-                status.render_ref(top_area, buf);
+            let mut flex = FlexRenderable::new();
+            if let Some(status) = &self.status {
+                flex.push(0, RenderableItem::Borrowed(status));
             }
-
-            let queue_area = Rect {
-                x: top_area.x,
-                y: top_area.y.saturating_add(status_height),
-                width: top_area.width,
-                height: top_area.height.saturating_sub(status_height),
-            };
-            if queue_area.height > 0 {
-                self.queued_user_messages.render(queue_area, buf);
+            flex.push(1, RenderableItem::Borrowed(&self.queued_user_messages));
+            if self.status.is_some() || !self.queued_user_messages.messages.is_empty() {
+                flex.push(0, RenderableItem::Owned("".into()));
             }
-
-            self.composer.render_ref(content_area, buf);
+            let mut flex2 = FlexRenderable::new();
+            flex2.push(1, RenderableItem::Owned(flex.into()));
+            flex2.push(0, RenderableItem::Borrowed(&self.composer));
+            RenderableItem::Owned(Box::new(flex2))
         }
     }
 }
 
+impl Renderable for BottomPane {
+    fn render(&self, area: Rect, buf: &mut Buffer) {
+        self.as_renderable().render(area, buf);
+    }
+    fn desired_height(&self, width: u16) -> u16 {
+        self.as_renderable().desired_height(width)
+    }
+    fn cursor_pos(&self, area: Rect) -> Option<(u16, u16)> {
+        self.as_renderable().cursor_pos(area)
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -623,7 +546,7 @@ mod tests {
 
     fn render_snapshot(pane: &BottomPane, area: Rect) -> String {
         let mut buf = Buffer::empty(area);
-        (&pane).render_ref(area, &mut buf);
+        pane.render(area, &mut buf);
         snapshot_buffer(&buf)
     }
 
@@ -675,7 +598,7 @@ mod tests {
         // Render and verify the top row does not include an overlay.
         let area = Rect::new(0, 0, 60, 6);
         let mut buf = Buffer::empty(area);
-        (&pane).render_ref(area, &mut buf);
+        pane.render(area, &mut buf);
 
         let mut r0 = String::new();
         for x in 0..area.width {
@@ -689,7 +612,7 @@ mod tests {
 
     #[test]
     fn composer_shown_after_denied_while_task_running() {
-        let (tx_raw, rx) = unbounded_channel::<AppEvent>();
+        let (tx_raw, _rx) = unbounded_channel::<AppEvent>();
         let tx = AppEventSender::new(tx_raw);
         let mut pane = BottomPane::new(BottomPaneParams {
             app_event_tx: tx,
@@ -724,14 +647,14 @@ mod tests {
         std::thread::sleep(Duration::from_millis(120));
         let area = Rect::new(0, 0, 40, 6);
         let mut buf = Buffer::empty(area);
-        (&pane).render_ref(area, &mut buf);
-        let mut row1 = String::new();
+        pane.render(area, &mut buf);
+        let mut row0 = String::new();
         for x in 0..area.width {
-            row1.push(buf[(x, 1)].symbol().chars().next().unwrap_or(' '));
+            row0.push(buf[(x, 0)].symbol().chars().next().unwrap_or(' '));
         }
         assert!(
-            row1.contains("Working"),
-            "expected Working header after denial on row 1: {row1:?}"
+            row0.contains("Working"),
+            "expected Working header after denial on row 0: {row0:?}"
         );
 
         // Composer placeholder should be visible somewhere below.
@@ -750,9 +673,6 @@ mod tests {
             found_composer,
             "expected composer visible under status line"
         );
-
-        // Drain the channel to avoid unused warnings.
-        drop(rx);
     }
 
     #[test]
@@ -774,16 +694,10 @@ mod tests {
         // Use a height that allows the status line to be visible above the composer.
         let area = Rect::new(0, 0, 40, 6);
         let mut buf = Buffer::empty(area);
-        (&pane).render_ref(area, &mut buf);
+        pane.render(area, &mut buf);
 
-        let mut row0 = String::new();
-        for x in 0..area.width {
-            row0.push(buf[(x, 1)].symbol().chars().next().unwrap_or(' '));
-        }
-        assert!(
-            row0.contains("Working"),
-            "expected Working header: {row0:?}"
-        );
+        let bufs = snapshot_buffer(&buf);
+        assert!(bufs.contains("• Working"), "expected Working header");
     }
 
     #[test]
@@ -815,36 +729,6 @@ mod tests {
         );
     }
 
-    #[test]
-    fn status_hidden_when_height_too_small() {
-        let (tx_raw, _rx) = unbounded_channel::<AppEvent>();
-        let tx = AppEventSender::new(tx_raw);
-        let mut pane = BottomPane::new(BottomPaneParams {
-            app_event_tx: tx,
-            frame_requester: FrameRequester::test_dummy(),
-            has_input_focus: true,
-            enhanced_keys_supported: false,
-            placeholder_text: "Ask Codex to do anything".to_string(),
-            disable_paste_burst: false,
-        });
-
-        pane.set_task_running(true);
-
-        // Height=2 → composer takes the full space; status collapses when there is no room.
-        let area2 = Rect::new(0, 0, 20, 2);
-        assert_snapshot!(
-            "status_hidden_when_height_too_small_height_2",
-            render_snapshot(&pane, area2)
-        );
-
-        // Height=1 → no padding; single row is the composer (status hidden).
-        let area1 = Rect::new(0, 0, 20, 1);
-        assert_snapshot!(
-            "status_hidden_when_height_too_small_height_1",
-            render_snapshot(&pane, area1)
-        );
-    }
-
     #[test]
     fn queued_messages_visible_when_status_hidden_snapshot() {
         let (tx_raw, _rx) = unbounded_channel::<AppEvent>();

codex-rs/tui/src/bottom_pane/snapshots/codex_tui__bottom_pane__tests__queued_messages_visible_when_status_hidden_snapshot.snap

@@ -2,7 +2,6 @@
 source: tui/src/bottom_pane/mod.rs
 expression: "render_snapshot(&pane, area)"
 ---
-                                                
   ↳ Queued follow-up question                   
     ⌥ + ↑ edit                                  
 

codex-rs/tui/src/bottom_pane/snapshots/codex_tui__bottom_pane__tests__status_and_composer_fill_height_without_bottom_padding.snap

@@ -2,7 +2,6 @@
 source: tui/src/bottom_pane/mod.rs
 expression: "render_snapshot(&pane, area)"
 ---
-                              
 • Working (0s • esc to interru
 
 

codex-rs/tui/src/bottom_pane/snapshots/codex_tui__bottom_pane__tests__status_and_queued_messages_snapshot.snap

@@ -2,7 +2,6 @@
 source: tui/src/bottom_pane/mod.rs
 expression: "render_snapshot(&pane, area)"
 ---
-                                                
 • Working (0s • esc to interrupt)               
   ↳ Queued follow-up question                   
     ⌥ + ↑ edit