feat(tui): add scrollbar click-drag scrolling and hover interaction (#242)

- Add scrollbar dragging: clicking and holding on the scrollbar area
  while moving the mouse now scrolls the content (instead of text selection)
- Add scrollbar hover: scrollbar becomes visible when mouse approaches
  the right edge of the chat area (4 chars from edge)
- Add scrollbar zone detection (3 chars from right edge for drag interaction)
- Keep scrollbar visible while dragging or hovering
- Full opacity while interacting, then fades out normally

This improves UX by making the scrollbar behave like standard GUI scrollbars.

Co-authored-by: Droid Agent <droid@factory.ai>

Author: echobt

cortex-tui/src/app.rs

@@ -506,6 +506,11 @@ pub struct AppState {
     pub chat_scroll: usize,
     pub sidebar_scroll: usize,
     pub scrollbar_visible_until: Option<Instant>,
+    pub scrollbar_hovered: bool,
+    pub scrollbar_dragging: bool,
+    /// Cached chat content metrics for scroll calculations
+    pub chat_content_lines: usize,
+    pub chat_visible_lines: usize,
     pub chat_scroll_pinned_bottom: bool,
     pub input: CortexInput<'static>,
     pub autocomplete: AutocompleteState,
@@ -633,6 +638,10 @@ impl AppState {
             chat_scroll: 0,
             sidebar_scroll: 0,
             scrollbar_visible_until: None,
+            scrollbar_hovered: false,
+            scrollbar_dragging: false,
+            chat_content_lines: 0,
+            chat_visible_lines: 0,
             chat_scroll_pinned_bottom: true,
             input: CortexInput::new(),
             autocomplete: AutocompleteState::new(),
@@ -858,13 +867,21 @@ impl AppState {
 
     /// Check if the scrollbar should be visible
     pub fn is_scrollbar_visible(&self) -> bool {
-        self.scrollbar_visible_until
-            .map(|until| Instant::now() < until)
-            .unwrap_or(false)
+        // Scrollbar is visible when: hovered, dragging, or within visibility timeout
+        self.scrollbar_hovered
+            || self.scrollbar_dragging
+            || self.scrollbar_visible_until
+                .map(|until| Instant::now() < until)
+                .unwrap_or(false)
     }
 
     /// Get the scrollbar opacity (for fade effect)
     pub fn scrollbar_opacity(&self) -> f32 {
+        // Full opacity when hovered or dragging
+        if self.scrollbar_hovered || self.scrollbar_dragging {
+            return 1.0;
+        }
+
         self.scrollbar_visible_until
             .map(|until| {
                 let remaining = until.saturating_duration_since(Instant::now());
@@ -880,13 +897,88 @@ impl AppState {
 
     /// Tick the scrollbar visibility timer
     pub fn tick_scrollbar(&mut self) {
+        // Don't expire visibility while hovered or dragging
+        if self.scrollbar_hovered || self.scrollbar_dragging {
+            return;
+        }
         if let Some(until) = self.scrollbar_visible_until {
             if Instant::now() >= until {
                 self.scrollbar_visible_until = None;
             }
         }
     }
 
+    /// Set scrollbar hover state
+    pub fn set_scrollbar_hovered(&mut self, hovered: bool) {
+        self.scrollbar_hovered = hovered;
+        if hovered {
+            self.show_scrollbar();
+        }
+    }
+
+    /// Start scrollbar drag operation
+    pub fn start_scrollbar_drag(&mut self) {
+        self.scrollbar_dragging = true;
+        self.show_scrollbar();
+    }
+
+    /// End scrollbar drag operation
+    pub fn end_scrollbar_drag(&mut self) {
+        self.scrollbar_dragging = false;
+    }
+
+    /// Update cached chat content metrics (called after rendering)
+    pub fn update_chat_metrics(&mut self, total_lines: usize, visible_lines: usize) {
+        self.chat_content_lines = total_lines;
+        self.chat_visible_lines = visible_lines;
+    }
+
+    /// Estimate total chat content lines based on messages
+    /// This is used for scroll position calculations when actual metrics aren't available
+    pub fn estimate_chat_lines(&self, area_width: u16) -> usize {
+        let mut total = 0;
+        for msg in &self.messages {
+            // Estimate lines: content length / width + 2 for spacing
+            let content_len = msg.content.len();
+            let width = area_width.saturating_sub(4) as usize; // Account for margins
+            if width > 0 {
+                total += (content_len / width) + 1; // At least 1 line per message
+            }
+            total += 2; // Blank line + some overhead
+        }
+        // Add tool calls
+        total += self.tool_calls.len() * 3; // Estimate 3 lines per tool call
+        // Add subagents
+        total += self.active_subagents.len() * 4; // Estimate 4 lines per subagent
+        total
+    }
+
+    /// Calculate scroll position from Y coordinate relative to chat area
+    /// Returns scroll offset (0 = at bottom, max_scroll = at top)
+    pub fn scroll_from_y_position(&self, y_in_area: u16, area_height: u16) -> usize {
+        // Use cached metrics if available, otherwise estimate
+        let total_lines = if self.chat_content_lines > 0 {
+            self.chat_content_lines
+        } else {
+            // Estimate based on terminal width (80 is a reasonable default)
+            self.estimate_chat_lines(80)
+        };
+        let visible_lines = if self.chat_visible_lines > 0 {
+            self.chat_visible_lines
+        } else {
+            area_height as usize
+        };
+
+        if total_lines <= visible_lines {
+            return 0;
+        }
+        let max_scroll = total_lines.saturating_sub(visible_lines);
+        // y_in_area = 0 means top of scrollbar (max_scroll)
+        // y_in_area = area_height-1 means bottom of scrollbar (0)
+        let ratio = 1.0 - (y_in_area as f32 / area_height.saturating_sub(1).max(1) as f32);
+        (ratio * max_scroll as f32).round() as usize
+    }
+
     /// Scroll the sidebar
     pub fn scroll_sidebar(&mut self, delta: i32) {
         if delta < 0 {

cortex-tui/src/input/zones.rs

@@ -119,6 +119,9 @@ pub enum ClickZoneId {
     /// Tool output area
     ToolOutput,
 
+    /// Scrollbar track area (for click and drag scrolling)
+    Scrollbar,
+
     /// Custom zone with numeric ID for extensibility
     Custom(u32),
 }

cortex-tui/src/runner/event_loop.rs

@@ -7918,20 +7918,54 @@ impl EventLoop {
                 current,
                 button: MouseButton::Left,
             } => {
-                // Handle text selection anywhere on screen using absolute screen coordinates
-                let (width, height) = self.app_state.terminal_size;
-                let screen_area = Rect::new(0, 0, width, height);
-
-                self.app_state.text_selection.set_screen_area(screen_area);
-                if !self.app_state.text_selection.is_selecting() {
+                // Check if dragging on scrollbar
+                if self.app_state.scrollbar_dragging {
+                    // Handle scrollbar dragging
+                    self.handle_scrollbar_drag(current.0, current.1)?;
+                    self.render(terminal)?;
+                } else if let Some(chat_area) = self.get_chat_area() {
+                    // Check if starting in the scrollbar zone (right edge of chat area)
+                    let scrollbar_zone_width = 3; // 3 chars from right edge
+                    let scrollbar_x = chat_area.right().saturating_sub(scrollbar_zone_width);
+                    if start.0 >= scrollbar_x
+                        && start.0 < chat_area.right()
+                        && start.1 >= chat_area.y
+                        && start.1 < chat_area.bottom()
+                    {
+                        // Start scrollbar dragging
+                        self.app_state.start_scrollbar_drag();
+                        self.handle_scrollbar_drag(current.0, current.1)?;
+                        self.render(terminal)?;
+                    } else {
+                        // Handle text selection anywhere on screen using absolute screen coordinates
+                        let (width, height) = self.app_state.terminal_size;
+                        let screen_area = Rect::new(0, 0, width, height);
+                        self.app_state.text_selection.set_screen_area(screen_area);
+                        if !self.app_state.text_selection.is_selecting() {
+                            self.app_state
+                                .text_selection
+                                .start_selection(start.0, start.1);
+                        }
+                        self.app_state
+                            .text_selection
+                            .update_selection(current.0, current.1);
+                        self.render(terminal)?;
+                    }
+                } else {
+                    // No chat area - fall back to text selection
+                    let (width, height) = self.app_state.terminal_size;
+                    let screen_area = Rect::new(0, 0, width, height);
+                    self.app_state.text_selection.set_screen_area(screen_area);
+                    if !self.app_state.text_selection.is_selecting() {
+                        self.app_state
+                            .text_selection
+                            .start_selection(start.0, start.1);
+                    }
                     self.app_state
                         .text_selection
-                        .start_selection(start.0, start.1);
+                        .update_selection(current.0, current.1);
+                    self.render(terminal)?;
                 }
-                self.app_state
-                    .text_selection
-                    .update_selection(current.0, current.1);
-                self.render(terminal)?;
             }
 
             MouseAction::Drag { .. } => {
@@ -7943,8 +7977,12 @@ impl EventLoop {
                 y: _,
                 button: MouseButton::Left,
             } => {
-                // Finish selection (but don't auto-copy - wait for right-click or Ctrl+C)
-                if self.app_state.text_selection.is_selecting() {
+                // End scrollbar dragging if active
+                if self.app_state.scrollbar_dragging {
+                    self.app_state.end_scrollbar_drag();
+                    self.render(terminal)?;
+                } else if self.app_state.text_selection.is_selecting() {
+                    // Finish selection (but don't auto-copy - wait for right-click or Ctrl+C)
                     self.app_state.text_selection.finish_selection();
                     self.render(terminal)?;
                 }
@@ -7955,17 +7993,56 @@ impl EventLoop {
             }
 
             MouseAction::Move { x, y } => {
+                // Handle scrollbar hover (show scrollbar when mouse is near right edge of chat area)
+                let mut scrollbar_hover = false;
+                if let Some(chat_area) = self.get_chat_area() {
+                    let scrollbar_hover_zone = 4; // 4 chars from right edge to trigger hover
+                    let hover_x = chat_area.right().saturating_sub(scrollbar_hover_zone);
+                    if x >= hover_x
+                        && x < chat_area.right()
+                        && y >= chat_area.y
+                        && y < chat_area.bottom()
+                    {
+                        scrollbar_hover = true;
+                    }
+                }
+                let was_hovered = self.app_state.scrollbar_hovered;
+                self.app_state.set_scrollbar_hovered(scrollbar_hover);
+
                 // Handle hover effects for Questions view
                 if self.app_state.view == AppView::Questions {
                     self.handle_question_hover(x, y);
                     self.render(terminal)?;
+                } else if scrollbar_hover != was_hovered {
+                    // Re-render if scrollbar hover state changed
+                    self.render(terminal)?;
                 }
             }
         }
 
         Ok(())
     }
 
+    /// Handles scrollbar drag - scrolls based on Y position within chat area
+    fn handle_scrollbar_drag(&mut self, _x: u16, y: u16) -> Result<()> {
+        if let Some(chat_area) = self.get_chat_area() {
+            // Calculate Y position relative to chat area
+            let y_in_area = y.saturating_sub(chat_area.y);
+            let area_height = chat_area.height;
+
+            // Calculate new scroll position
+            let new_scroll =
+                self.app_state
+                    .scroll_from_y_position(y_in_area, area_height);
+
+            // Update scroll position directly (bypass scroll_chat to avoid showing "scrolled" behavior)
+            self.app_state.chat_scroll = new_scroll;
+            self.app_state.chat_scroll_pinned_bottom = new_scroll == 0;
+            self.app_state.show_scrollbar();
+        }
+        Ok(())
+    }
+
     /// Handles mouse hover for question prompts
     fn handle_question_hover(&mut self, x: u16, y: u16) {
         let (width, height) = self.app_state.terminal_size;