Fix

src/ui/components/mod.rs

@@ -1,5 +1,6 @@
 pub mod header;
 pub mod monitor_list;
+pub mod status_line;
 
 pub use header::render_header;
 pub use monitor_list::render_monitor_list;

src/ui/components/monitor_list.rs

@@ -1,5 +1,6 @@
 use crate::i18n::t;
-use crate::ui::dashboard::model::{DashboardViewState, MonitorStatus};
+use crate::ui::dashboard::MonitorStatus;
+use crate::ui::dashboard::model::DashboardViewState;
 use ratatui::style::Modifier;
 use ratatui::widgets::{List, ListItem, ListState};
 use ratatui::{
@@ -10,6 +11,8 @@ use ratatui::{
     widgets::{Block, Borders},
 };
 
+const STATUS_LINE_LENGTH: usize = 20;
+
 pub fn render_monitor_list(
     frame: &mut Frame,
     area: Rect,
@@ -25,22 +28,16 @@ pub fn render_monitor_list(
         .monitors
         .iter()
         .map(|monitor| {
-            let status_icon = match monitor.status {
-                MonitorStatus::Up => "✅",
-                MonitorStatus::Down => "❌",
-                MonitorStatus::Unknown => "❓",
-            };
+            let status_icon = get_status_emoji(&monitor.status);
+            let status_color = get_status_color(&monitor.status);
+            let status_line = create_status_line_spans(&monitor.status_history);
 
-            let status_color = match monitor.status {
-                MonitorStatus::Up => Color::Green,
-                MonitorStatus::Down => Color::Red,
-                MonitorStatus::Unknown => Color::Yellow,
-            };
-
-            let line = Line::from(vec![
+            let mut spans = vec![
                 Span::styled(
                     format!("{} ", status_icon),
-                    Style::default().fg(status_color),
+                    Style::default()
+                        .fg(status_color)
+                        .add_modifier(Modifier::BOLD),
                 ),
                 Span::styled(
                     &monitor.name,
@@ -56,9 +53,14 @@ pub fn render_monitor_list(
                     format!(" | {}%", monitor.uptime_24h),
                     Style::default().fg(Color::Magenta),
                 ),
-            ]);
+                Span::raw(" | "),
+            ];
 
-            ListItem::new(line)
+            spans.extend(status_line);
+
+            let line = Line::from(spans);
+            let lines = vec![line];
+            ListItem::new(lines)
         })
         .collect();
 
@@ -69,3 +71,55 @@ pub fn render_monitor_list(
 
     frame.render_stateful_widget(list, area, list_state);
 }
+
+fn create_status_line_spans(status_history: &[MonitorStatus]) -> Vec<Span<'static>> {
+    let mut spans = Vec::new();
+    let recent_status: Vec<_> = status_history
+        .iter()
+        .rev()
+        .take(STATUS_LINE_LENGTH)
+        .collect();
+
+    for status in recent_status.iter().rev() {
+        let c = get_status_char(status);
+        let color = get_status_color(status);
+
+        spans.push(Span::styled(c.to_string(), Style::default().fg(color)));
+    }
+
+    if !spans.is_empty() {
+        spans.push(Span::raw(" "));
+        spans.push(Span::styled(
+            "(24)",
+            Style::default()
+                .fg(Color::Gray)
+                .add_modifier(Modifier::ITALIC),
+        ));
+    }
+
+    spans
+}
+
+pub fn get_status_char(status: &MonitorStatus) -> char {
+    match status {
+        MonitorStatus::Up => '█',
+        MonitorStatus::Down => '█',
+        MonitorStatus::Unknown => '░',
+    }
+}
+
+pub fn get_status_color(status: &MonitorStatus) -> Color {
+    match status {
+        MonitorStatus::Up => Color::Green,
+        MonitorStatus::Down => Color::Red,
+        MonitorStatus::Unknown => Color::Yellow,
+    }
+}
+
+pub fn get_status_emoji(status: &MonitorStatus) -> &str {
+    match status {
+        MonitorStatus::Up => "✅",
+        MonitorStatus::Down => "❌",
+        MonitorStatus::Unknown => "❓",
+    }
+}

src/ui/components/status_line.rs

@@ -0,0 +1,77 @@
+use ratatui::{
+    Frame,
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::Color,
+    widgets::{Block, Borders, Paragraph},
+};
+
+use crate::{
+    i18n::t,
+    ui::dashboard::model::{MonitorStatus, MonitorViewState},
+};
+
+const STATUS_LINE_LENGTH: usize = 100;
+
+pub fn render_status_line(frame: &mut Frame, area: Rect, monitor: &MonitorViewState) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .margin(1)
+        .constraints([Constraint::Length(1), Constraint::Length(1)])
+        .split(area);
+
+    let status_line = create_status_line(&monitor.status_history);
+    let status_line_widget =
+        Paragraph::new(status_line).block(Block::default().borders(Borders::NONE));
+
+    frame.render_widget(status_line_widget, chunks[0]);
+
+    let time_markers = Paragraph::new("1h".to_string())
+        .alignment(Alignment::Left)
+        .block(Block::default().borders(Borders::NONE));
+
+    frame.render_widget(time_markers, chunks[1]);
+
+    let now_markers = Paragraph::new(t("now"))
+        .alignment(Alignment::Right)
+        .block(Block::default().borders(Borders::NONE));
+
+    frame.render_widget(now_markers, chunks[1]);
+}
+
+fn create_status_line(status_history: &[MonitorStatus]) -> String {
+    let mut line = String::with_capacity(STATUS_LINE_LENGTH);
+
+    let points = status_history
+        .iter()
+        .take(STATUS_LINE_LENGTH)
+        .chain(
+            std::iter::repeat(&MonitorStatus::Unknown)
+                .take(STATUS_LINE_LENGTH - status_history.len()),
+        )
+        .collect::<Vec<_>>();
+
+    for status in points {
+        match status {
+            MonitorStatus::Down => line.push_str("░"),
+            MonitorStatus::Up => line.push_str("█"),
+            MonitorStatus::Unknown => line.push_str(" "),
+        }
+    }
+    line
+}
+
+pub fn get_status_emoji(status: &MonitorStatus) -> &str {
+    match status {
+        MonitorStatus::Up => "✅",
+        MonitorStatus::Down => "❌",
+        MonitorStatus::Unknown => "❓",
+    }
+}
+
+pub fn get_status_color(status: &MonitorStatus) -> Color {
+    match status {
+        MonitorStatus::Up => Color::Green,
+        MonitorStatus::Down => Color::Red,
+        MonitorStatus::Unknown => Color::Yellow,
+    }
+}