resizable viewport (#1732)

Proof of concept for a resizable viewport.

The general approach here is to duplicate the `Terminal` struct from
ratatui, but with our own logic. This is a "light fork" in that we are
still using all the base ratatui functions (`Buffer`, `Widget` and so
on), but we're doing our own bookkeeping at the top level to determine
where to draw everything.

This approach could use improvement—e.g, when the window is resized to a
smaller size, if the UI wraps, we don't correctly clear out the
artifacts from wrapping. This is possible with a little work (i.e.
tracking what parts of our UI would have been wrapped), but this
behavior is at least at par with the existing behavior.


https://github.com/user-attachments/assets/4eb17689-09fd-4daa-8315-c7ebc654986d


cc @joshka who might have Thoughts™

Author: nornagon-openai

NOTICE

@@ -1,2 +1,6 @@
 OpenAI Codex
 Copyright 2025 OpenAI
+
+This project includes code derived from [Ratatui](https://github.com/ratatui/ratatui), licensed under the MIT license.
+Copyright (c) 2016-2022 Florian Dehau
+Copyright (c) 2023-2025 The Ratatui Developers

codex-rs/tui/src/app.rs

@@ -12,6 +12,8 @@ use codex_core::protocol::Event;
 use color_eyre::eyre::Result;
 use crossterm::event::KeyCode;
 use crossterm::event::KeyEvent;
+use ratatui::layout::Offset;
+use ratatui::prelude::Backend;
 use std::path::PathBuf;
 use std::sync::Arc;
 use std::sync::atomic::AtomicBool;
@@ -321,6 +323,44 @@ impl App<'_> {
     fn draw_next_frame(&mut self, terminal: &mut tui::Tui) -> Result<()> {
         // TODO: add a throttle to avoid redrawing too often
 
+        let screen_size = terminal.size()?;
+        let last_known_screen_size = terminal.last_known_screen_size;
+        if screen_size != last_known_screen_size {
+            let cursor_pos = terminal.get_cursor_position()?;
+            let last_known_cursor_pos = terminal.last_known_cursor_pos;
+            if cursor_pos.y != last_known_cursor_pos.y {
+                // The terminal was resized. The only point of reference we have for where our viewport
+                // was moved is the cursor position.
+                // NB this assumes that the cursor was not wrapped as part of the resize.
+                let cursor_delta = cursor_pos.y as i32 - last_known_cursor_pos.y as i32;
+
+                let new_viewport_area = terminal.viewport_area.offset(Offset {
+                    x: 0,
+                    y: cursor_delta,
+                });
+                terminal.set_viewport_area(new_viewport_area);
+                terminal.clear()?;
+            }
+        }
+
+        let size = terminal.size()?;
+        let desired_height = match &self.app_state {
+            AppState::Chat { widget } => widget.desired_height(),
+            AppState::GitWarning { .. } => 10,
+        };
+        let mut area = terminal.viewport_area;
+        area.height = desired_height;
+        area.width = size.width;
+        if area.bottom() > size.height {
+            terminal
+                .backend_mut()
+                .scroll_region_up(0..area.top(), area.bottom() - size.height)?;
+            area.y = size.height - area.height;
+        }
+        if area != terminal.viewport_area {
+            terminal.clear()?;
+            terminal.set_viewport_area(area);
+        }
         match &mut self.app_state {
             AppState::Chat { widget } => {
                 terminal.draw(|frame| frame.render_widget_ref(&**widget, frame.area()))?;

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

@@ -71,6 +71,15 @@ impl ChatComposer<'_> {
         this
     }
 
+    pub fn desired_height(&self) -> u16 {
+        2 + self.textarea.lines().len() as u16
+            + match &self.active_popup {
+                ActivePopup::None => 0u16,
+                ActivePopup::Command(c) => c.calculate_required_height(),
+                ActivePopup::File(c) => c.calculate_required_height(),
+            }
+    }
+
     /// Returns true if the composer currently contains no user input.
     pub(crate) fn is_empty(&self) -> bool {
         self.textarea.is_empty()
@@ -651,7 +660,7 @@ impl WidgetRef for &ChatComposer<'_> {
     fn render_ref(&self, area: Rect, buf: &mut Buffer) {
         match &self.active_popup {
             ActivePopup::Command(popup) => {
-                let popup_height = popup.calculate_required_height(&area);
+                let popup_height = popup.calculate_required_height();
 
                 // Split the provided rect so that the popup is rendered at the
                 // *top* and the textarea occupies the remaining space below.
@@ -673,7 +682,7 @@ impl WidgetRef for &ChatComposer<'_> {
                 self.textarea.render(textarea_rect, buf);
             }
             ActivePopup::File(popup) => {
-                let popup_height = popup.calculate_required_height(&area);
+                let popup_height = popup.calculate_required_height();
 
                 let popup_rect = Rect {
                     x: area.x,

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

@@ -71,7 +71,7 @@ impl CommandPopup {
     /// Determine the preferred height of the popup. This is the number of
     /// rows required to show **at most** `MAX_POPUP_ROWS` commands plus the
     /// table/border overhead (one line at the top and one at the bottom).
-    pub(crate) fn calculate_required_height(&self, _area: &Rect) -> u16 {
+    pub(crate) fn calculate_required_height(&self) -> u16 {
         let matches = self.filtered_commands();
         let row_count = matches.len().clamp(1, MAX_POPUP_ROWS) as u16;
         // Account for the border added by the Block that wraps the table.

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

@@ -109,7 +109,7 @@ impl FileSearchPopup {
     }
 
     /// Preferred height (rows) including border.
-    pub(crate) fn calculate_required_height(&self, _area: &Rect) -> u16 {
+    pub(crate) fn calculate_required_height(&self) -> u16 {
         // Row count depends on whether we already have matches. If no matches
         // yet (e.g. initial search or query with no results) reserve a single
         // row so the popup is still visible. When matches are present we show

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

@@ -64,6 +64,10 @@ impl BottomPane<'_> {
         }
     }
 
+    pub fn desired_height(&self) -> u16 {
+        self.composer.desired_height()
+    }
+
     /// Forward a key event to the active view or the composer.
     pub fn handle_key_event(&mut self, key_event: KeyEvent) -> InputResult {
         if let Some(mut view) = self.active_view.take() {

codex-rs/tui/src/chatwidget.rs

@@ -143,6 +143,10 @@ impl ChatWidget<'_> {
         }
     }
 
+    pub fn desired_height(&self) -> u16 {
+        self.bottom_pane.desired_height()
+    }
+
     pub(crate) fn handle_key_event(&mut self, key_event: KeyEvent) {
         self.bottom_pane.clear_ctrl_c_quit_hint();