feat(tui): add module panels with gauge bars and metric details

Each module gets a column panel with its themed border and title.
Modules with a percentage metric (cpu, memory, disk) show a colored
gauge bar at the top. Below it, all metrics are listed as key-value
pairs sorted alphabetically. Selected tab highlights its panel
border in the module's theme color. Large integer values auto-format
as KB/MB/GB.

Author: dev-dami

src/tui/mod.rs

@@ -10,7 +10,7 @@ use ratatui::backend::CrosstermBackend;
 use ratatui::layout::{Constraint, Direction, Layout, Rect};
 use ratatui::style::{Modifier, Style};
 use ratatui::text::{Line, Span};
-use ratatui::widgets::{Block, Borders, Paragraph};
+use ratatui::widgets::{Block, Borders, Gauge, Paragraph, Wrap};
 use ratatui::Terminal;
 
 use crate::config::{parse_color, BorderStyle, Config, ModuleTheme};
@@ -138,6 +138,7 @@ fn draw_ui(frame: &mut ratatui::Frame, app: &App) {
         .split(area);
 
     draw_header(frame, chunks[0], app, chrome_border, chrome_title, border_type);
+    draw_modules(frame, chunks[1], app, border_type);
     draw_footer(frame, chunks[2], app, chrome_border, border_type);
 }
 
@@ -212,6 +213,138 @@ fn draw_footer(
     frame.render_widget(help, area);
 }
 
+fn draw_modules(
+    frame: &mut ratatui::Frame,
+    area: Rect,
+    app: &App,
+    border_type: ratatui::widgets::BorderType,
+) {
+    let snapshot = match &app.snapshot {
+        Some(s) => s,
+        None => return,
+    };
+
+    if snapshot.modules.is_empty() {
+        return;
+    }
+
+    let module_constraints: Vec<Constraint> = snapshot
+        .modules
+        .iter()
+        .map(|_| Constraint::Ratio(1, snapshot.modules.len() as u32))
+        .collect();
+
+    let module_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints(module_constraints)
+        .split(area);
+
+    for (i, (name, data)) in snapshot.modules.iter().enumerate() {
+        let fg = module_fg_color(&app.config, name);
+        let accent = module_accent_color(&app.config, name);
+        let border_color = if i == app.selected_tab {
+            fg
+        } else {
+            parse_color(&app.config.theme.chrome.border)
+        };
+
+        let block = Block::default()
+            .borders(Borders::ALL)
+            .border_type(border_type)
+            .border_style(Style::default().fg(border_color))
+            .title(Span::styled(
+                format!(" {} ", module_label(&app.config, name)),
+                Style::default().fg(fg).add_modifier(Modifier::BOLD),
+            ));
+
+        let inner = block.inner(module_chunks[i]);
+        frame.render_widget(block, module_chunks[i]);
+
+        let inner_chunks = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([Constraint::Length(3), Constraint::Min(1)])
+            .split(inner);
+
+        if let Some(gauge_data) = extract_gauge(name, data) {
+            let gauge = Gauge::default()
+                .gauge_style(Style::default().fg(accent))
+                .ratio(gauge_data.ratio.clamp(0.0, 1.0))
+                .label(format!(
+                    "{}: {:.1}%",
+                    gauge_data.label,
+                    gauge_data.ratio * 100.0
+                ));
+            frame.render_widget(gauge, inner_chunks[0]);
+        }
+
+        let mut lines: Vec<Line> = Vec::new();
+        let mut entries: Vec<_> = data.metrics.iter().collect();
+        entries.sort_by_key(|(k, _)| k.clone());
+
+        for (key, value) in entries {
+            lines.push(Line::from(vec![
+                Span::styled(
+                    format!("{}: ", key),
+                    Style::default().fg(fg).add_modifier(Modifier::BOLD),
+                ),
+                Span::raw(metric_display(value)),
+            ]));
+        }
+
+        let detail = Paragraph::new(lines).wrap(Wrap { trim: true });
+        frame.render_widget(detail, inner_chunks[1]);
+    }
+}
+
+struct GaugeData {
+    label: String,
+    ratio: f64,
+}
+
+fn extract_gauge(module_name: &str, data: &crate::core::MetricData) -> Option<GaugeData> {
+    let key = match module_name {
+        "cpu" => "cpu_usage_percent",
+        "memory" => "memory_usage_percent",
+        "disk" => "usage_percent",
+        _ => return None,
+    };
+
+    data.metrics.get(key).and_then(|v| match v {
+        MetricValue::Float(f) => Some(GaugeData {
+            label: module_name.to_uppercase(),
+            ratio: *f / 100.0,
+        }),
+        _ => None,
+    })
+}
+
+fn metric_display(value: &MetricValue) -> String {
+    match value {
+        MetricValue::Integer(i) => format_bytes_smart(*i),
+        MetricValue::Float(f) => format!("{:.2}", f),
+        MetricValue::String(s) => s.clone(),
+        MetricValue::Boolean(b) => b.to_string(),
+        MetricValue::List(items) => items
+            .iter()
+            .map(metric_display)
+            .collect::<Vec<_>>()
+            .join(", "),
+    }
+}
+
+fn format_bytes_smart(value: i64) -> String {
+    let abs = value.unsigned_abs();
+    if abs >= 1_073_741_824 {
+        format!("{:.2} GB", abs as f64 / 1_073_741_824.0)
+    } else if abs >= 1_048_576 {
+        format!("{:.2} MB", abs as f64 / 1_048_576.0)
+    } else if abs >= 1024 {
+        format!("{:.2} KB", abs as f64 / 1024.0)
+    } else {
+        value.to_string()
+    }
+}
+
 fn module_theme<'a>(config: &'a Config, name: &str) -> &'a ModuleTheme {
     match name {
         "cpu" => &config.theme.cpu,