`9f6cd44`

Add tabbed GUI with CPU/Memory views and process list

- Add TabBar component for switching between CPU and Memory tabs
- Add ProcessList component showing top processes by resource usage
- Fix graph colors (gartk Color uses 0.0-1.0 range, not 0-255)
- Increase header height to 40px to prevent text cutoff
- Support keyboard shortcuts (1/2/Tab) for tab switching

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 3 months ago

SHA: 9f6cd44fb2a115ce6c6bcc74e2579cf8e256aedc
Parents: d5c0d70
Tree: 0bb3986

5 changed files

Status	File	+	-
M	`gartop/src/gui/app.rs`	262	139
M	`gartop/src/gui/graph.rs`	9	9
M	`gartop/src/gui/mod.rs`	4	0
A	`gartop/src/gui/process_list.rs`	261	0
A	`gartop/src/gui/tabs.rs`	195	0

gartop/src/gui/app.rsmodified

  //! GUI application state and event loop
 -use super::{graph::{DataSeries, LineGraph}, header::HeaderBar, theme::Theme};
 +use super::{
 +    graph::{DataSeries, LineGraph},
 +    header::HeaderBar,
 +    process_list::ProcessList,
 +    tabs::{Tab, TabBar, TAB_BAR_HEIGHT},
 +    theme::Theme,
 +};
  use anyhow::Result;
 -use gartk_core::{InputEvent, Key, Rect};
 -use gartk_render::Renderer;
 +use gartk_core::{InputEvent, Key, Point, Rect};
 +use gartk_render::{Renderer, TextStyle};
  use gartk_x11::{Connection, EventLoop, EventLoopConfig, Window, WindowConfig};
 -use gartop_ipc::{Command, CpuStats, MemoryStats, Response, StatusInfo};
 +use gartop_ipc::{Command, CpuStats, MemoryStats, ProcessInfo, Response, SortField, StatusInfo};
  use std::io::{BufRead, BufReader, Write};
  use std::os::unix::net::UnixStream;
  use std::time::Instant;
  use x11rb::protocol::xproto::{ConnectionExt, ImageFormat};
  /// Header bar height.
 -const HEADER_HEIGHT: u32 = 36;
 +const HEADER_HEIGHT: u32 = 40;
++
 +/// Graph height.
 +const GRAPH_HEIGHT: u32 = 150;
  /// Default window dimensions.
  const DEFAULT_WIDTH: u32 = 800;
      gc: u32,
      theme: Theme,
      header: HeaderBar,
 +    tab_bar: TabBar,
 +    process_list: ProcessList,
      should_quit: bool,
      width: u32,
      height: u32,
      memory_stats: Option<MemoryStats>,
      cpu_history: Vec<CpuStats>,
      memory_history: Vec<MemoryStats>,
 +    processes: Vec<ProcessInfo>,
+ }
  impl App {
          let theme = Theme::default();
          let renderer = Renderer::new(width, height)?;
 -        // Create header bar
 +        // Create components
          let header = HeaderBar::new(Rect::new(0, 0, width, HEADER_HEIGHT));
 +        let tab_bar = TabBar::new(Rect::new(0, HEADER_HEIGHT as i32, width, TAB_BAR_HEIGHT));
 +        let process_list = Self::create_process_list(width, height);
          // Check if daemon is available
          let daemon_available = Self::check_daemon();
              gc,
              theme,
              header,
 +            tab_bar,
 +            process_list,
              should_quit: false,
              width,
              height,
              daemon_available,
 -            last_refresh: Instant::now() - std::time::Duration::from_secs(10), // force immediate refresh
 +            last_refresh: Instant::now() - std::time::Duration::from_secs(10),
              status: None,
              cpu_stats: None,
              memory_stats: None,
              cpu_history: Vec::new(),
              memory_history: Vec::new(),
 +            processes: Vec::new(),
          })
+     }
 +    /// Create process list with correct bounds.
 +    fn create_process_list(width: u32, height: u32) -> ProcessList {
 +        let content_start = HEADER_HEIGHT + TAB_BAR_HEIGHT + GRAPH_HEIGHT + 24; // 24 for graph label
 +        let list_height = height.saturating_sub(content_start);
 +        ProcessList::new(Rect::new(0, content_start as i32, width, list_height))
 +    }
++
      /// Check if daemon is available by attempting a connection.
      fn check_daemon() -> bool {
          let path = gartop_ipc::socket_path();
+     }
      /// Send a command to the daemon and get response.
 -    /// Creates a fresh connection for each command since daemon closes after response.
      fn send_command(&self, cmd: &Command) -> Option<Response> {
          let path = gartop_ipc::socket_path();
          let mut stream = UnixStream::connect(&path).ok()?;
 -        // Send command
          let json = serde_json::to_string(cmd).ok()?;
          writeln!(stream, "{}", json).ok()?;
          stream.flush().ok()?;
 -        // Read response
          let mut reader = BufReader::new(&stream);
          let mut line = String::new();
          reader.read_line(&mut line).ok()?;
+             }
+         }
 -        // Update daemon availability based on whether any command succeeded
 +        // Get processes sorted by current tab's resource
 +        let sort_field = match self.tab_bar.active() {
 +            Tab::Cpu => SortField::Cpu,
 +            Tab::Memory => SortField::Memory,
 +        };
 +        if let Some(resp) = self.send_command(&Command::GetProcesses {
 +            sort_by: Some(sort_field),
 +            limit: Some(100),
 +        }) {
 +            if resp.success {
 +                self.processes = resp.data.and_then(|d| serde_json::from_value(d).ok()).unwrap_or_default();
 +                self.process_list.set_processes(self.processes.clone());
 +                self.process_list.set_sort(sort_field);
 +            }
 +        }
++
          self.daemon_available = any_success;
          self.last_refresh = Instant::now();
+     }
          // Render header
          self.header.render(&self.renderer, &self.theme)?;
 -        // Render main content area
 -        let content_y = HEADER_HEIGHT as i32;
 -        let content_height = self.height.saturating_sub(HEADER_HEIGHT);
 -        let content_rect = Rect::new(0, content_y, self.width, content_height);
 +        // Render tab bar
 +        self.tab_bar.render(&self.renderer, &self.theme)?;
 -        self.renderer.fill_rect(content_rect, self.theme.panel_bg)?;
 +        // Render content area
 +        let content_y = (HEADER_HEIGHT + TAB_BAR_HEIGHT) as i32;
 +        let content_height = self.height.saturating_sub(HEADER_HEIGHT + TAB_BAR_HEIGHT);
 -        // Show connection status or stats
 -        self.render_content(content_rect)?;
 +        if !self.daemon_available {
 +            self.render_not_connected(content_y)?;
 +        } else {
 +            self.render_tab_content(content_y, content_height)?;
 +        }
          self.renderer.flush();
          Ok(())
+     }
 -    /// Render main content area.
 -    fn render_content(&self, bounds: Rect) -> Result<()> {
 -        use gartk_render::TextStyle;
+-
 +    /// Render "not connected" message.
 +    fn render_not_connected(&self, content_y: i32) -> Result<()> {
          let style = TextStyle {
              font_family: "monospace".to_string(),
 -            font_size: 12.0,
 -            color: self.theme.text,
 +            font_size: 13.0,
 +            color: self.theme.swap_color,
              ..Default::default()
          };
+-
          let dim_style = TextStyle {
              color: self.theme.text_secondary,
              ..style.clone()
          };
 -        let padding = 12;
 -        let graph_height = 120u32;
 -        let text_line_height = 18.0;
 +        self.renderer.text("Not connected to daemon", 20.0, content_y as f64 + 40.0, &style)?;
 +        self.renderer.text("Run: gartop daemon", 20.0, content_y as f64 + 65.0, &dim_style)?;
 +        Ok(())
 +    }
 -        if !self.daemon_available {
 -            self.renderer.text(
 -                "Not connected to daemon",
 -                padding as f64,
 -                bounds.y as f64 + 30.0,
 -                &TextStyle {
 -                    color: self.theme.swap_color,
 -                    ..style.clone()
 -                },
 -            )?;
 -            self.renderer.text(
 -                "Run: gartop daemon",
 -                padding as f64,
 -                bounds.y as f64 + 50.0,
 -                &dim_style,
 -            )?;
 -            return Ok(());
 -        }
 +    /// Render the content for the active tab.
 +    fn render_tab_content(&self, content_y: i32, _content_height: u32) -> Result<()> {
 +        let padding = 12;
 +        let graph_width = self.width - (padding * 2) as u32;
          // Get Cairo context for graph rendering
          let ctx = self.renderer.context()?;
 -        let graph = LineGraph::default();
 +        let graph = LineGraph {
 +            fill_opacity: 0.25,
 +            ..LineGraph::default()
 +        };
 -        let mut y = bounds.y + padding as i32;
 -        let graph_width = bounds.width - (padding * 2) as u32;
 +        let mut y = content_y + padding as i32;
++
 +        match self.tab_bar.active() {
 +            Tab::Cpu => {
 +                // CPU label
 +                let cpu_label = if let Some(cpu) = &self.cpu_stats {
 +                    format!("CPU: {:.1}%", cpu.usage_percent)
 +                } else {
 +                    "CPU: --".to_string()
 +                };
 +                self.renderer.text(
 +                    &cpu_label,
 +                    padding as f64,
 +                    y as f64 + 14.0,
 +                    &TextStyle {
 +                        font_family: "monospace".to_string(),
 +                        font_size: 12.0,
 +                        color: self.theme.cpu_color,
 +                        ..Default::default()
 +                    },
 +                )?;
++
 +                // Per-core info on right
 +                if let Some(cpu) = &self.cpu_stats {
 +                    let cores = cpu.per_core.len();
 +                    let core_info = format!("{} cores", cores);
 +                    self.renderer.text(
 +                        &core_info,
 +                        (self.width - 80) as f64,
 +                        y as f64 + 14.0,
 +                        &TextStyle {
 +                            font_family: "monospace".to_string(),
 +                            font_size: 10.0,
 +                            color: self.theme.text_secondary,
 +                            ..Default::default()
 +                        },
 +                    )?;
 +                }
 +                y += 20;
 -        // CPU Section
 -        let cpu_label = if let Some(cpu) = &self.cpu_stats {
 -            format!("CPU: {:.1}%", cpu.usage_percent)
 -        } else {
 -            "CPU: --".to_string()
 -        };
 -        self.renderer.text(
 -            &cpu_label,
 -            padding as f64,
 -            y as f64 + 14.0,
 -            &TextStyle { color: self.theme.cpu_color, ..style.clone() },
 -        )?;
 -        y += 20;
+-
 -        // CPU Graph
 -        let cpu_rect = Rect::new(padding as i32, y, graph_width, graph_height);
 -        let mut cpu_series = DataSeries::new("CPU", self.theme.cpu_color);
 -        cpu_series.set_values(self.cpu_history.iter().map(|s| s.usage_percent).collect());
 -        graph.render(&ctx, cpu_rect, &[cpu_series], &self.theme);
 -        y += graph_height as i32 + padding as i32;
+-
 -        // Memory Section
 -        let mem_label = if let Some(mem) = &self.memory_stats {
 -            format!(
 -                "Memory: {:.1}% ({} / {})",
 -                mem.usage_percent,
 -                format_bytes(mem.used),
 -                format_bytes(mem.total)
 -            )
 -        } else {
 -            "Memory: --".to_string()
 -        };
 -        self.renderer.text(
 -            &mem_label,
 -            padding as f64,
 -            y as f64 + 14.0,
 -            &TextStyle { color: self.theme.memory_color, ..style.clone() },
 -        )?;
 -        y += 20;
+-
 -        // Memory Graph
 -        let mem_rect = Rect::new(padding as i32, y, graph_width, graph_height);
 -        let mut mem_series = DataSeries::new("Memory", self.theme.memory_color);
 -        let mut swap_series = DataSeries::new("Swap", self.theme.swap_color);
 -        mem_series.set_values(self.memory_history.iter().map(|s| s.usage_percent).collect());
 -        swap_series.set_values(self.memory_history.iter().map(|s| {
 -            if s.swap_total > 0 {
 -                (s.swap_used as f64 / s.swap_total as f64) * 100.0
 -            } else {
 -                0.0
 +                // CPU Graph
 +                let graph_rect = Rect::new(padding as i32, y, graph_width, GRAPH_HEIGHT);
 +                let mut cpu_series = DataSeries::new("CPU", self.theme.cpu_color);
 +                cpu_series.set_values(self.cpu_history.iter().map(|s| s.usage_percent).collect());
 +                graph.render(&ctx, graph_rect, &[cpu_series], &self.theme);
+             }
 -        }).collect());
 -        graph.render(&ctx, mem_rect, &[mem_series, swap_series], &self.theme);
 -        y += graph_height as i32 + padding as i32;
+-
 -        // Additional stats text
 -        if let Some(cpu) = &self.cpu_stats {
 -            let cores_to_show = cpu.per_core.len().min(8);
 -            let mut core_line = String::from("Cores: ");
 -            for (i, usage) in cpu.per_core.iter().take(cores_to_show).enumerate() {
 -                if i > 0 {
 -                    core_line.push_str(" | ");
++
 +            Tab::Memory => {
 +                // Memory label
 +                let mem_label = if let Some(mem) = &self.memory_stats {
 +                    format!(
 +                        "Memory: {:.1}% ({} / {})",
 +                        mem.usage_percent,
 +                        format_bytes(mem.used),
 +                        format_bytes(mem.total)
 +                    )
 +                } else {
 +                    "Memory: --".to_string()
 +                };
 +                self.renderer.text(
 +                    &mem_label,
 +                    padding as f64,
 +                    y as f64 + 14.0,
 +                    &TextStyle {
 +                        font_family: "monospace".to_string(),
 +                        font_size: 12.0,
 +                        color: self.theme.memory_color,
 +                        ..Default::default()
 +                    },
 +                )?;
++
 +                // Swap info on right
 +                if let Some(mem) = &self.memory_stats {
 +                    let swap_pct = if mem.swap_total > 0 {
 +                        (mem.swap_used as f64 / mem.swap_total as f64) * 100.0
 +                    } else {
 +                        0.0
 +                    };
 +                    let swap_info = format!("Swap: {:.1}%", swap_pct);
 +                    self.renderer.text(
 +                        &swap_info,
 +                        (self.width - 80) as f64,
 +                        y as f64 + 14.0,
 +                        &TextStyle {
 +                            font_family: "monospace".to_string(),
 +                            font_size: 10.0,
 +                            color: self.theme.swap_color,
 +                            ..Default::default()
 +                        },
 +                    )?;
+                 }
 -                core_line.push_str(&format!("{}:{:.0}%", i, usage));
 -            }
 -            if cpu.per_core.len() > cores_to_show {
 -                core_line.push_str(&format!(" (+{} more)", cpu.per_core.len() - cores_to_show));
 +                y += 20;
++
 +                // Memory Graph
 +                let graph_rect = Rect::new(padding as i32, y, graph_width, GRAPH_HEIGHT);
 +                let mut mem_series = DataSeries::new("Memory", self.theme.memory_color);
 +                let mut swap_series = DataSeries::new("Swap", self.theme.swap_color);
 +                mem_series.set_values(self.memory_history.iter().map(|s| s.usage_percent).collect());
 +                swap_series.set_values(self.memory_history.iter().map(|s| {
 +                    if s.swap_total > 0 {
 +                        (s.swap_used as f64 / s.swap_total as f64) * 100.0
 +                    } else {
 +                        0.0
 +                    }
 +                }).collect());
 +                graph.render(&ctx, graph_rect, &[mem_series, swap_series], &self.theme);
+             }
 -            self.renderer.text(&core_line, padding as f64, y as f64 + text_line_height, &dim_style)?;
 -            y += text_line_height as i32 + 4;
+         }
 -        if let Some(mem) = &self.memory_stats {
 -            let swap_percent = if mem.swap_total > 0 {
 -                (mem.swap_used as f64 / mem.swap_total as f64) * 100.0
 -            } else {
 -                0.0
 -            };
 -            self.renderer.text(
 -                &format!(
 -                    "Swap: {:.1}% ({} / {}) | Available: {}",
 -                    swap_percent,
 -                    format_bytes(mem.swap_used),
 -                    format_bytes(mem.swap_total),
 -                    format_bytes(mem.available)
 -                ),
 -                padding as f64,
 -                y as f64 + text_line_height,
 -                &dim_style,
 -            )?;
 -        }
 +        // Render process list
 +        self.process_list.render(&self.renderer, &self.theme)?;
          Ok(())
+     }
          self.width = width;
          self.height = height;
          self.renderer.resize(width, height)?;
++
 +        // Update component bounds
          self.header = HeaderBar::new(Rect::new(0, 0, width, HEADER_HEIGHT));
 +        self.tab_bar.set_bounds(Rect::new(0, HEADER_HEIGHT as i32, width, TAB_BAR_HEIGHT));
 +        self.process_list = Self::create_process_list(width, height);
 +        self.process_list.set_processes(self.processes.clone());
          Ok(())
+     }
 +    /// Handle mouse click.
 +    fn handle_click(&mut self, pos: Point) -> bool {
 +        // Check tab bar
 +        if let Some(tab) = self.tab_bar.on_click(pos) {
 +            if tab != self.tab_bar.active() {
 +                self.tab_bar.set_active(tab);
 +                // Re-sort processes for new tab
 +                let sort_field = match tab {
 +                    Tab::Cpu => SortField::Cpu,
 +                    Tab::Memory => SortField::Memory,
 +                };
 +                self.process_list.set_sort(sort_field);
 +                // Force refresh to get re-sorted processes
 +                self.last_refresh = Instant::now() - std::time::Duration::from_secs(10);
 +                return true;
 +            }
 +        }
++
 +        // Check process list
 +        if self.process_list.on_click(pos).is_some() {
 +            return true;
 +        }
++
 +        false
 +    }
++
 +    /// Handle scroll.
 +    fn handle_scroll(&mut self, delta: i32) -> bool {
 +        self.process_list.on_scroll(delta);
 +        true
 +    }
++
      /// Run the GUI event loop.
      pub fn run(mut self) -> Result<()> {
          let config = EventLoopConfig {
                      ev_loop.request_redraw();
+                 }
 +                InputEvent::MousePress(mouse_event) => {
 +                    let pos = Point::new(mouse_event.position.x, mouse_event.position.y);
 +                    if self.handle_click(pos) {
 +                        ev_loop.request_redraw();
 +                    }
 +                }
++
 +                InputEvent::MouseMove(mouse_event) => {
 +                    let pos = Point::new(mouse_event.position.x, mouse_event.position.y);
 +                    if self.tab_bar.on_mouse_move(pos) {
 +                        ev_loop.request_redraw();
 +                    }
 +                }
++
 +                InputEvent::Scroll(scroll_event) => {
 +                    let delta = if scroll_event.delta_y > 0 { -1 } else { 1 };
 +                    if self.handle_scroll(delta) {
 +                        ev_loop.request_redraw();
 +                    }
 +                }
++
                  InputEvent::Key(key_event) if key_event.pressed => {
                      match key_event.key {
                          Key::Escape | Key::Char('q') => {
                              self.should_quit = true;
+                         }
                          Key::Char('r') => {
 -                            // Force refresh
                              self.last_refresh = Instant::now() - std::time::Duration::from_secs(10);
+                         }
 +                        Key::Char('1') => {
 +                            self.tab_bar.set_active(Tab::Cpu);
 +                            self.process_list.set_sort(SortField::Cpu);
 +                            self.last_refresh = Instant::now() - std::time::Duration::from_secs(10);
 +                            ev_loop.request_redraw();
 +                        }
 +                        Key::Char('2') => {
 +                            self.tab_bar.set_active(Tab::Memory);
 +                            self.process_list.set_sort(SortField::Memory);
 +                            self.last_refresh = Instant::now() - std::time::Duration::from_secs(10);
 +                            ev_loop.request_redraw();
 +                        }
 +                        Key::Tab => {
 +                            let new_tab = match self.tab_bar.active() {
 +                                Tab::Cpu => Tab::Memory,
 +                                Tab::Memory => Tab::Cpu,
 +                            };
 +                            self.tab_bar.set_active(new_tab);
 +                            let sort_field = match new_tab {
 +                                Tab::Cpu => SortField::Cpu,
 +                                Tab::Memory => SortField::Memory,
 +                            };
 +                            self.process_list.set_sort(sort_field);
 +                            self.last_refresh = Instant::now() - std::time::Duration::from_secs(10);
 +                            ev_loop.request_redraw();
 +                        }
                          _ => {}
+                     }
+                 }
+                 }
                  InputEvent::Idle => {
 -                    // Periodic refresh
                      if self.last_refresh.elapsed().as_secs_f64() >= REFRESH_INTERVAL {
                          if self.daemon_available {
                              self.refresh_data();
                              self.update_header();
                              ev_loop.request_redraw();
                          } else {
 -                            // Try reconnecting
                              self.daemon_available = Self::check_daemon();
                              if self.daemon_available {
                                  ev_loop.request_redraw();
                  _ => {}
+             }
 -            // Render if needed
              if ev_loop.needs_redraw() {
                  if let Err(e) = self.render() {
                      tracing::error!("Render error: {}", e);

gartop/src/gui/graph.rsmodified

              // Fill with transparent color
              ctx.set_source_rgba(
 -                series.color.r as f64 / 255.0,
 -                series.color.g as f64 / 255.0,
 -                series.color.b as f64 / 255.0,
 +                series.color.r,
 +                series.color.g,
 +                series.color.b,
                  self.fill_opacity,
              );
              let _ = ctx.fill();
          // Stroke the line
          ctx.set_source_rgba(
 -            series.color.r as f64 / 255.0,
 -            series.color.g as f64 / 255.0,
 -            series.color.b as f64 / 255.0,
 +            series.color.r,
 +            series.color.g,
 +            series.color.b,
 .0,
          );
          ctx.set_line_width(self.line_width);
              // Color box
              ctx.rectangle(lx, y + 3.0, 8.0, 8.0);
              ctx.set_source_rgba(
 -                data.color.r as f64 / 255.0,
 -                data.color.g as f64 / 255.0,
 -                data.color.b as f64 / 255.0,
 +                data.color.r,
 +                data.color.g,
 +                data.color.b,
 .0,
              );
              let _ = ctx.fill();

gartop/src/gui/mod.rsmodified

  mod app;
  mod graph;
  mod header;
 +mod process_list;
 +mod tabs;
  pub mod theme;
  pub use app::App;
  pub use graph::{DataSeries, LineGraph};
 +pub use process_list::ProcessList;
 +pub use tabs::{Tab, TabBar, TAB_BAR_HEIGHT};
  use anyhow::Result;

gartop/src/gui/process_list.rsadded

 +//! Process list component for displaying running processes
++
 +use gartk_core::{Point, Rect};
 +use gartk_render::{Renderer, TextStyle};
 +use gartop_ipc::{ProcessInfo, SortField};
 +use super::theme::Theme;
++
 +/// Row height for process list.
 +const ROW_HEIGHT: u32 = 22;
++
 +/// Header row height.
 +const HEADER_HEIGHT: u32 = 24;
++
 +/// Process list component.
 +pub struct ProcessList {
 +    bounds: Rect,
 +    processes: Vec<ProcessInfo>,
 +    scroll_offset: usize,
 +    selected: Option<usize>,
 +    sort_field: SortField,
 +    visible_rows: usize,
 +}
++
 +impl ProcessList {
 +    /// Create a new process list.
 +    pub fn new(bounds: Rect) -> Self {
 +        let visible_rows = ((bounds.height.saturating_sub(HEADER_HEIGHT)) / ROW_HEIGHT) as usize;
 +        Self {
 +            bounds,
 +            processes: Vec::new(),
 +            scroll_offset: 0,
 +            selected: None,
 +            sort_field: SortField::Cpu,
 +            visible_rows,
 +        }
 +    }
++
 +    /// Update bounds (on resize).
 +    pub fn set_bounds(&mut self, bounds: Rect) {
 +        self.bounds = bounds;
 +        self.visible_rows = ((bounds.height.saturating_sub(HEADER_HEIGHT)) / ROW_HEIGHT) as usize;
 +    }
++
 +    /// Set processes to display.
 +    pub fn set_processes(&mut self, processes: Vec<ProcessInfo>) {
 +        self.processes = processes;
 +        // Clamp scroll offset
 +        if self.scroll_offset > self.max_scroll() {
 +            self.scroll_offset = self.max_scroll();
 +        }
 +    }
++
 +    /// Set sort field.
 +    pub fn set_sort(&mut self, sort: SortField) {
 +        self.sort_field = sort;
 +    }
++
 +    /// Get current sort field.
 +    pub fn sort_field(&self) -> SortField {
 +        self.sort_field
 +    }
++
 +    /// Maximum scroll offset.
 +    fn max_scroll(&self) -> usize {
 +        self.processes.len().saturating_sub(self.visible_rows)
 +    }
++
 +    /// Handle scroll (delta is number of rows to scroll, positive = down).
 +    pub fn on_scroll(&mut self, delta: i32) {
 +        if delta > 0 {
 +            self.scroll_offset = (self.scroll_offset + delta as usize).min(self.max_scroll());
 +        } else {
 +            self.scroll_offset = self.scroll_offset.saturating_sub((-delta) as usize);
 +        }
 +    }
++
 +    /// Handle click, returns selected process PID if any.
 +    pub fn on_click(&mut self, pos: Point) -> Option<i32> {
 +        if !self.bounds.contains_point(pos) {
 +            return None;
 +        }
++
 +        let local_y = pos.y - self.bounds.y;
++
 +        // Check if clicking header
 +        if local_y < HEADER_HEIGHT as i32 {
 +            return None;
 +        }
++
 +        // Calculate row index
 +        let row = ((local_y - HEADER_HEIGHT as i32) / ROW_HEIGHT as i32) as usize;
 +        let process_idx = self.scroll_offset + row;
++
 +        if process_idx < self.processes.len() {
 +            self.selected = Some(process_idx);
 +            return Some(self.processes[process_idx].pid);
 +        }
++
 +        None
 +    }
++
 +    /// Get selected process PID.
 +    pub fn selected_pid(&self) -> Option<i32> {
 +        self.selected.and_then(|idx| self.processes.get(idx).map(|p| p.pid))
 +    }
++
 +    /// Clear selection.
 +    pub fn clear_selection(&mut self) {
 +        self.selected = None;
 +    }
++
 +    /// Render the process list.
 +    pub fn render(&self, renderer: &Renderer, theme: &Theme) -> anyhow::Result<()> {
 +        // Background
 +        renderer.fill_rect(self.bounds, theme.panel_bg)?;
++
 +        let header_style = TextStyle {
 +            font_family: "monospace".to_string(),
 +            font_size: 11.0,
 +            color: theme.text_secondary,
 +            ..Default::default()
 +        };
++
 +        let text_style = TextStyle {
 +            font_family: "monospace".to_string(),
 +            font_size: 11.0,
 +            color: theme.text,
 +            ..Default::default()
 +        };
++
 +        let dim_style = TextStyle {
 +            color: theme.text_secondary,
 +            ..text_style.clone()
 +        };
++
 +        // Column positions
 +        let x = self.bounds.x as f64;
 +        let col_pid = x + 8.0;
 +        let col_name = x + 70.0;
 +        let col_cpu = x + 220.0;
 +        let col_mem = x + 290.0;
 +        let col_user = x + 380.0;
++
 +        // Header
 +        let header_y = self.bounds.y as f64 + 16.0;
 +        renderer.text("PID", col_pid, header_y, &header_style)?;
 +        renderer.text("Name", col_name, header_y, &header_style)?;
++
 +        // Highlight active sort column
 +        let sort_style = TextStyle {
 +            color: match self.sort_field {
 +                SortField::Cpu => theme.cpu_color,
 +                SortField::Memory => theme.memory_color,
 +                _ => theme.text_secondary,
 +            },
 +            ..header_style.clone()
 +        };
++
 +        if self.sort_field == SortField::Cpu {
 +            renderer.text("CPU%", col_cpu, header_y, &sort_style)?;
 +            renderer.text("Mem%", col_mem, header_y, &header_style)?;
 +        } else {
 +            renderer.text("CPU%", col_cpu, header_y, &header_style)?;
 +            renderer.text("Mem%", col_mem, header_y, &sort_style)?;
 +        }
 +        renderer.text("User", col_user, header_y, &header_style)?;
++
 +        // Header separator
 +        let sep_y = (self.bounds.y + HEADER_HEIGHT as i32) as f64;
 +        renderer.line(
 +            x + 4.0,
 +            sep_y,
 +            (self.bounds.x + self.bounds.width as i32 - 4) as f64,
 +            sep_y,
 +            theme.border,
 +            1.0,
 +        )?;
++
 +        // Process rows
 +        let start_y = self.bounds.y + HEADER_HEIGHT as i32;
 +        for (i, process) in self.processes.iter()
 +            .skip(self.scroll_offset)
 +            .take(self.visible_rows)
 +            .enumerate()
 +        {
 +            let row_y = start_y + (i as i32 * ROW_HEIGHT as i32);
 +            let text_y = row_y as f64 + 16.0;
 +            let process_idx = self.scroll_offset + i;
++
 +            // Selection highlight
 +            if self.selected == Some(process_idx) {
 +                let row_rect = Rect::new(
 +                    self.bounds.x + 2,
 +                    row_y + 2,
 +                    self.bounds.width - 4,
 +                    ROW_HEIGHT - 4,
 +                );
 +                renderer.fill_rounded_rect(row_rect, 2.0, theme.header_bg)?;
 +            }
++
 +            // PID
 +            renderer.text(&process.pid.to_string(), col_pid, text_y, &dim_style)?;
++
 +            // Name (truncate if too long)
 +            let name = if process.name.len() > 18 {
 +                format!("{}...", &process.name[..15])
 +            } else {
 +                process.name.clone()
 +            };
 +            renderer.text(&name, col_name, text_y, &text_style)?;
++
 +            // CPU %
 +            let cpu_style = if process.cpu_percent > 50.0 {
 +                TextStyle { color: theme.cpu_color, ..text_style.clone() }
 +            } else {
 +                dim_style.clone()
 +            };
 +            renderer.text(&format!("{:.1}", process.cpu_percent), col_cpu, text_y, &cpu_style)?;
++
 +            // Memory %
 +            let mem_style = if process.memory_percent > 10.0 {
 +                TextStyle { color: theme.memory_color, ..text_style.clone() }
 +            } else {
 +                dim_style.clone()
 +            };
 +            renderer.text(&format!("{:.1}", process.memory_percent), col_mem, text_y, &mem_style)?;
++
 +            // User
 +            let user = if process.user.len() > 10 {
 +                format!("{}...", &process.user[..7])
 +            } else {
 +                process.user.clone()
 +            };
 +            renderer.text(&user, col_user, text_y, &dim_style)?;
 +        }
++
 +        // Scroll indicator if needed
 +        if self.processes.len() > self.visible_rows {
 +            let scroll_info = format!(
 +                "{}-{} of {}",
 +                self.scroll_offset + 1,
 +                (self.scroll_offset + self.visible_rows).min(self.processes.len()),
 +                self.processes.len()
 +            );
 +            let info_style = TextStyle {
 +                font_size: 9.0,
 +                ..dim_style
 +            };
 +            let info_x = (self.bounds.x + self.bounds.width as i32 - 80) as f64;
 +            let info_y = self.bounds.y as f64 + 16.0;
 +            renderer.text(&scroll_info, info_x, info_y, &info_style)?;
 +        }
++
 +        Ok(())
 +    }
++
 +    /// Get row height.
 +    pub fn row_height(&self) -> u32 {
 +        ROW_HEIGHT
 +    }
 +}

gartop/src/gui/tabs.rsadded

 +//! Tab bar component for switching between CPU and Memory views
++
 +use gartk_core::{Point, Rect};
 +use gartk_render::{Renderer, TextStyle};
 +use super::theme::Theme;
++
 +/// Available tabs.
 +#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
 +pub enum Tab {
 +    #[default]
 +    Cpu,
 +    Memory,
 +}
++
 +impl Tab {
 +    /// Get all tabs in order.
 +    pub fn all() -> &'static [Tab] {
 +        &[Tab::Cpu, Tab::Memory]
 +    }
++
 +    /// Get tab label.
 +    pub fn label(&self) -> &'static str {
 +        match self {
 +            Tab::Cpu => "CPU",
 +            Tab::Memory => "Memory",
 +        }
 +    }
 +}
++
 +/// Tab bar height.
 +pub const TAB_BAR_HEIGHT: u32 = 32;
++
 +/// Tab bar component.
 +pub struct TabBar {
 +    bounds: Rect,
 +    active: Tab,
 +    tab_bounds: Vec<Rect>,
 +    hovered: Option<usize>,
 +}
++
 +impl TabBar {
 +    /// Create a new tab bar.
 +    pub fn new(bounds: Rect) -> Self {
 +        let tab_bounds = Self::calculate_tab_bounds(bounds);
 +        Self {
 +            bounds,
 +            active: Tab::default(),
 +            tab_bounds,
 +            hovered: None,
 +        }
 +    }
++
 +    /// Calculate bounds for each tab.
 +    fn calculate_tab_bounds(bounds: Rect) -> Vec<Rect> {
 +        let tabs = Tab::all();
 +        let tab_width = 100u32;
 +        let tab_height = bounds.height - 4;
 +        let mut result = Vec::with_capacity(tabs.len());
++
 +        for (i, _) in tabs.iter().enumerate() {
 +            let x = bounds.x + 8 + (i as i32 * (tab_width as i32 + 4));
 +            let y = bounds.y + 2;
 +            result.push(Rect::new(x, y, tab_width, tab_height));
 +        }
++
 +        result
 +    }
++
 +    /// Update bounds (on resize).
 +    pub fn set_bounds(&mut self, bounds: Rect) {
 +        self.bounds = bounds;
 +        self.tab_bounds = Self::calculate_tab_bounds(bounds);
 +    }
++
 +    /// Get the active tab.
 +    pub fn active(&self) -> Tab {
 +        self.active
 +    }
++
 +    /// Set the active tab.
 +    pub fn set_active(&mut self, tab: Tab) {
 +        self.active = tab;
 +    }
++
 +    /// Handle click event, returns which tab was clicked (if any).
 +    pub fn on_click(&self, pos: Point) -> Option<Tab> {
 +        if !self.bounds.contains_point(pos) {
 +            return None;
 +        }
++
 +        let tabs = Tab::all();
 +        for (i, tab_rect) in self.tab_bounds.iter().enumerate() {
 +            if tab_rect.contains_point(pos) {
 +                return Some(tabs[i]);
 +            }
 +        }
 +        None
 +    }
++
 +    /// Handle mouse move, returns true if hover state changed.
 +    pub fn on_mouse_move(&mut self, pos: Point) -> bool {
 +        let old_hovered = self.hovered;
++
 +        if !self.bounds.contains_point(pos) {
 +            self.hovered = None;
 +        } else {
 +            self.hovered = None;
 +            for (i, tab_rect) in self.tab_bounds.iter().enumerate() {
 +                if tab_rect.contains_point(pos) {
 +                    self.hovered = Some(i);
 +                    break;
 +                }
 +            }
 +        }
++
 +        old_hovered != self.hovered
 +    }
++
 +    /// Render the tab bar.
 +    pub fn render(&self, renderer: &Renderer, theme: &Theme) -> anyhow::Result<()> {
 +        // Background
 +        renderer.fill_rect(self.bounds, theme.panel_bg)?;
++
 +        // Bottom border
 +        renderer.line(
 +            self.bounds.x as f64,
 +            (self.bounds.y + self.bounds.height as i32) as f64,
 +            (self.bounds.x + self.bounds.width as i32) as f64,
 +            (self.bounds.y + self.bounds.height as i32) as f64,
 +            theme.border,
 +            1.0,
 +        )?;
++
 +        let tabs = Tab::all();
 +        for (i, tab_rect) in self.tab_bounds.iter().enumerate() {
 +            let tab = tabs[i];
 +            let is_active = tab == self.active;
 +            let is_hovered = self.hovered == Some(i);
++
 +            // Tab background
 +            let bg_color = if is_active {
 +                theme.header_bg
 +            } else if is_hovered {
 +                theme.graph_bg
 +            } else {
 +                theme.panel_bg
 +            };
 +            renderer.fill_rounded_rect(*tab_rect, 4.0, bg_color)?;
++
 +            // Tab text
 +            let text_color = if is_active {
 +                match tab {
 +                    Tab::Cpu => theme.cpu_color,
 +                    Tab::Memory => theme.memory_color,
 +                }
 +            } else {
 +                theme.text_secondary
 +            };
++
 +            let style = TextStyle {
 +                font_family: "monospace".to_string(),
 +                font_size: 12.0,
 +                color: text_color,
 +                ..Default::default()
 +            };
++
 +            // Center text in tab
 +            let text = tab.label();
 +            let text_size = renderer.measure_text(text, &style)?;
 +            let text_x = tab_rect.x as f64 + (tab_rect.width as f64 - text_size.width as f64) / 2.0;
 +            let text_y = tab_rect.y as f64 + (tab_rect.height as f64 + style.font_size) / 2.0;
 +            renderer.text(text, text_x, text_y, &style)?;
++
 +            // Active indicator line
 +            if is_active {
 +                let indicator_y = (tab_rect.y + tab_rect.height as i32 - 2) as f64;
 +                renderer.line(
 +                    tab_rect.x as f64 + 4.0,
 +                    indicator_y,
 +                    (tab_rect.x + tab_rect.width as i32 - 4) as f64,
 +                    indicator_y,
 +                    text_color,
 +                    2.0,
 +                )?;
 +            }
 +        }
++
 +        Ok(())
 +    }
++
 +    /// Get tab bar height.
 +    pub fn height(&self) -> u32 {
 +        self.bounds.height
 +    }
 +}