[Add] basic split

iota-cli/src/elements/console_card.rs

@@ -0,0 +1,491 @@
+use crossterm::event::{KeyCode, KeyEvent};
+use ratatui::{
+    Frame,
+    layout::Rect,
+    style::{Color, Style},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+};
+use ttp_core::{CommunicationType, CommunicationValue};
+use uuid::Uuid;
+
+use crate::{
+    ACTIVE_TASKS, RELOAD, SHUTDOWN,
+    gui::{
+        elements::elements::{Element, InteractableElement, JoinableElement},
+        interaction_result::InteractionResult,
+        ui::FPS,
+        util::borders::draw_block_joins,
+    },
+    log, log_command, log_cv,
+    omikron::omikron_connection::OMIKRON_CONNECTION,
+    users::{user_manager, user_profile::UserProfile},
+    util::file_util,
+};
+use std::{
+    any::Any,
+    sync::{Arc, Mutex},
+    time::Duration,
+};
+use tokio::time::Instant;
+
+pub struct ConsoleCard {
+    focused: bool,
+    pub title: String,
+    pub content: String,
+    pub cursor_position: usize,
+
+    borders: Borders,
+    joins: Borders,
+
+    cursor: Arc<Mutex<bool>>,
+    last_swap: Arc<Mutex<Instant>>,
+    tab_index: usize,
+}
+
+impl ConsoleCard {
+    pub fn new(title: &str, content: &str) -> Self {
+        ConsoleCard {
+            focused: false,
+            title: title.to_string(),
+            content: content.to_string(),
+            cursor_position: content.chars().count(),
+            borders: Borders::ALL,
+            joins: Borders::NONE,
+            cursor: Arc::new(Mutex::new(true)),
+            last_swap: Arc::new(Mutex::new(Instant::now())),
+            tab_index: 0,
+        }
+    }
+
+    fn byte_index(&self) -> usize {
+        self.content
+            .char_indices()
+            .nth(self.cursor_position)
+            .map(|(i, _)| i)
+            .unwrap_or(self.content.len())
+    }
+
+    fn cursor_visible(&self) -> bool {
+        if !self.focused {
+            return false;
+        }
+
+        let mut visible = self.cursor.lock().unwrap();
+        let mut last = self.last_swap.lock().unwrap();
+        let now = Instant::now();
+
+        if now.duration_since(*last) >= Duration::from_millis(500) {
+            *visible = !*visible;
+            *last = now;
+        }
+
+        *visible
+    }
+
+    fn current_prefix(&self) -> Option<&str> {
+        if self.content.starts_with('/') {
+            Some("/")
+        } else {
+            None
+        }
+    }
+
+    fn cursor_spans(&self) -> Vec<Span<'static>> {
+        let cursor_visible = self.cursor_visible();
+        let cursor_style = Style::default().fg(Color::White).bg(Color::DarkGray);
+        let mut spans = Vec::new();
+
+        if self.content.is_empty() {
+            if self.focused {
+                if cursor_visible {
+                    spans.push(Span::styled(" ", cursor_style));
+                } else {
+                    spans.push(Span::styled(" ", Style::default().fg(Color::White)));
+                }
+                spans.push(Span::styled(
+                    "send command (<help> for info)",
+                    Style::default().fg(Color::DarkGray),
+                ));
+            } else {
+                spans.push(Span::styled(
+                    " send command (<help> for info)",
+                    Style::default().fg(Color::DarkGray),
+                ));
+            }
+            return spans;
+        }
+
+        let byte_index = self.byte_index();
+        let before = self.content[..byte_index].to_string();
+        let after = self.content[byte_index..].to_string();
+
+        let prefix_len = self.current_prefix().map(|s| s.len()).unwrap_or(0);
+
+        if prefix_len > 0 && before.len() >= prefix_len {
+            let prefix = &before[..prefix_len];
+            let rest = &before[prefix_len..];
+            spans.push(Span::styled(
+                prefix.to_string(),
+                Self::style_for_part(true, false, false),
+            ));
+            if !rest.is_empty() {
+                spans.push(Span::styled(
+                    rest.to_string(),
+                    Style::default().fg(Color::White),
+                ));
+            }
+        } else if !before.is_empty() {
+            spans.push(Span::styled(
+                before.clone(),
+                Style::default().fg(Color::White),
+            ));
+        }
+
+        if cursor_visible {
+            spans.push(Span::styled(" ", cursor_style));
+        }
+
+        if !after.is_empty() {
+            spans.push(Span::styled(after, Style::default().fg(Color::White)));
+        }
+
+        spans
+    }
+
+    fn style_for_part(is_prefix: bool, is_hint: bool, is_error: bool) -> Style {
+        if is_error {
+            return Style::default().fg(Color::Red);
+        }
+
+        if is_hint {
+            return Style::default().fg(Color::DarkGray);
+        }
+
+        if is_prefix {
+            return Style::default().fg(Color::DarkGray);
+        }
+
+        Style::default().fg(Color::White)
+    }
+
+    fn render_cursor_spans(&self) -> Vec<Span<'static>> {
+        self.cursor_spans()
+    }
+
+    fn move_cursor_left(&mut self) {
+        if self.cursor_position > 0 {
+            self.cursor_position -= 1;
+        }
+    }
+
+    fn move_cursor_right(&mut self) {
+        let len = self.content.chars().count();
+        if self.cursor_position < len {
+            self.cursor_position += 1;
+        }
+    }
+
+    fn delete_at_cursor(&mut self) {
+        if self.content.is_empty() || self.cursor_position == 0 {
+            return;
+        }
+
+        let start = self
+            .content
+            .char_indices()
+            .nth(self.cursor_position.saturating_sub(1))
+            .map(|(i, _)| i)
+            .unwrap_or(0);
+        let end = self.byte_index();
+        self.content.replace_range(start..end, "");
+        self.cursor_position -= 1;
+    }
+
+    fn insert_at_cursor(&mut self, c: char) {
+        let idx = self.byte_index();
+        self.content.insert(idx, c);
+        self.cursor_position += 1;
+    }
+}
+
+impl Element for ConsoleCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn render(&self, f: &mut Frame, r: Rect) {
+        let block = Block::default()
+            .borders(self.borders)
+            .title(self.title.clone())
+            .title_style(Style::default().fg(Color::White))
+            .border_style(if self.focused {
+                Style::default().fg(Color::Yellow)
+            } else {
+                Style::default()
+            })
+            .style(if self.focused {
+                Style::default().fg(Color::White)
+            } else {
+                Style::default()
+            });
+
+        let spans = self.render_cursor_spans();
+        let par = Paragraph::new(Line::from(spans))
+            .block(block)
+            .scroll((0, 0));
+        f.render_widget(par, r);
+        draw_block_joins(f, r, self.borders, self.joins);
+    }
+}
+
+impl JoinableElement for ConsoleCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn as_element(&self) -> &(dyn Element + 'static) {
+        self
+    }
+
+    fn as_element_mut(&mut self) -> &mut (dyn Element + 'static) {
+        self
+    }
+
+    fn set_borders(&mut self, borders: Borders) {
+        self.borders = borders;
+    }
+
+    fn set_joins(&mut self, joins: Borders) {
+        self.joins = joins;
+    }
+}
+
+impl InteractableElement for ConsoleCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn as_element(&self) -> &(dyn Element + 'static) {
+        self
+    }
+
+    fn as_element_mut(&mut self) -> &mut (dyn Element + 'static) {
+        self
+    }
+
+    fn interact(&mut self, key: KeyEvent) -> InteractionResult {
+        match key.code {
+            KeyCode::Enter => {
+                if self.content.is_empty() {
+                    log!("");
+                    return InteractionResult::Handled;
+                }
+
+                let command = self.content.clone();
+                let id = Uuid::new_v4();
+                let id = id.to_string();
+                let id = id.split_at(8).0;
+                let task_id = format!("command_{}_{}", command, id);
+                ACTIVE_TASKS.insert(task_id.clone());
+
+                log_command!("{}", command);
+
+                tokio::spawn(async move {
+                    run_command(&command).await;
+                    ACTIVE_TASKS.remove(&task_id);
+                });
+
+                self.content.clear();
+                self.cursor_position = 0;
+                self.tab_index = 0;
+                InteractionResult::Handled
+            }
+            KeyCode::Backspace => {
+                self.delete_at_cursor();
+                InteractionResult::Handled
+            }
+            KeyCode::Delete => {
+                let len = self.content.chars().count();
+                if self.cursor_position < len {
+                    let start = self.byte_index();
+                    let end = self
+                        .content
+                        .char_indices()
+                        .nth(self.cursor_position + 1)
+                        .map(|(i, _)| i)
+                        .unwrap_or(self.content.len());
+                    self.content.replace_range(start..end, "");
+                }
+                InteractionResult::Handled
+            }
+            KeyCode::Left => {
+                self.move_cursor_left();
+                InteractionResult::Handled
+            }
+            KeyCode::Right => {
+                self.move_cursor_right();
+                InteractionResult::Handled
+            }
+            KeyCode::Home => {
+                self.cursor_position = 0;
+                InteractionResult::Handled
+            }
+            KeyCode::End => {
+                self.cursor_position = self.content.chars().count();
+                InteractionResult::Handled
+            }
+            KeyCode::Tab => {
+                if let Some(prefix) = self.current_prefix() {
+                    if prefix == "/" {
+                        self.tab_index = self.tab_index.saturating_add(1);
+                    }
+                }
+                InteractionResult::Handled
+            }
+            _ => {
+                if let Some(c) = key.code.as_char() {
+                    self.insert_at_cursor(c);
+                    InteractionResult::Handled
+                } else {
+                    InteractionResult::Unhandled
+                }
+            }
+        }
+    }
+
+    fn can_focus(&self) -> bool {
+        true
+    }
+
+    fn is_focused(&self) -> bool {
+        self.focused
+    }
+
+    fn focus(&mut self, f: bool) {
+        self.focused = f;
+    }
+}
+
+pub async fn run_command(command: &str) {
+    let parts = command.split(" ").collect::<Vec<&str>>();
+
+    match parts.as_slice() {
+        ["tasks"] => {
+            let active_tasks: Vec<String> =
+                ACTIVE_TASKS.clone().iter().map(|v| v.to_string()).collect();
+            let info = if *SHUTDOWN.read().await && *RELOAD.read().await {
+                "Rebooting, "
+            } else if *SHUTDOWN.read().await {
+                "Shutting , "
+            } else {
+                ""
+            };
+            log!("{}Active tasks: {:?}", info, active_tasks);
+        }
+        ["fps"] => {
+            let (fps, skips) = *FPS.read().await;
+            log!("{:.1} FPS with {:.1}% of attempts skipped", fps, skips);
+        }
+
+        ["help"] => {
+            log!("Available commands: tasks, fps, ping, user");
+        }
+
+        ["help", "tasks"] => {
+            log!("Tasks command usage: tasks");
+        }
+        ["help", "fps"] => {
+            log!("FPS command usage: fps");
+        }
+        ["help", "ping"] => {
+            log!("Ping command usage: ping [time]");
+        }
+        ["help", "user"] => {
+            log!("User command usage: user add <username> | user remove <username> | user list");
+        }
+
+        ["ping"] => {
+            ping(20).await;
+        }
+        ["ping", time] => {
+            let time = time.parse::<u64>().unwrap_or(20);
+            ping(time).await;
+        }
+        ["user", "add", username] => {
+            if let (Some(user), Some(_)) = user_manager::create_user(username).await {
+                log!("Created user {}", user.user_id);
+            } else {
+                log!("Failed to create user");
+            }
+        }
+        ["user", "remove", username] => {
+            if let Some(user) = user_manager::get_user_by_username(username) {
+                user_manager::remove_user(user.user_id);
+                log!("Removed user {}", user.user_id);
+            } else {
+                log!("Failed to find user");
+            }
+        }
+        ["user", "list"] => {
+            let users: Vec<UserProfile> = user_manager::get_users();
+            for user in users {
+                let storage = file_util::get_designed_storage(user.user_id);
+                log!(
+                    "> Username: {}, ID: {}, created at: {}, storage: {}",
+                    user.username,
+                    user.user_id,
+                    user.created_at,
+                    storage
+                );
+            }
+        }
+        ["user", "info", username] => {
+            if let Some(user) = user_manager::get_user_by_username(username) {
+                user_manager::remove_user(user.user_id);
+                log!("Removed user {}", user.user_id);
+            } else {
+                log!("Failed to find user");
+            }
+        }
+        ["reload"] | ["restart"] => {
+            log!("Restarting");
+            *RELOAD.write().await = true;
+            *SHUTDOWN.write().await = true;
+        }
+        ["shutdown"] | ["stop"] => {
+            log!("Shutting down");
+            *SHUTDOWN.write().await = true;
+        }
+        _ => {
+            log!("Unknown command");
+        }
+    }
+}
+
+pub async fn ping(time: u64) {
+    let conn = OMIKRON_CONNECTION.clone();
+
+    let response_cv = conn
+        .await_response(
+            &CommunicationValue::new(CommunicationType::ping),
+            Some(Duration::from_secs(time)),
+        )
+        .await;
+    match response_cv {
+        Ok(response) => log_cv!(response),
+        Err(err) => log!("Ping error: {:?}", err),
+    }
+}

iota-cli/src/elements/elements.rs

@@ -0,0 +1,49 @@
+use std::any::Any;
+
+use crossterm::event::KeyEvent;
+use ratatui::{Frame, layout::Rect, widgets::Borders};
+
+use crate::gui::{interaction_result::InteractionResult, screens::screens::Screen};
+
+#[allow(unused)]
+pub trait Element: Send + Sync + Any {
+    fn as_any(&self) -> &dyn Any;
+    fn as_any_mut(&mut self) -> &mut dyn Any;
+
+    fn render(&self, f: &mut Frame, r: Rect);
+}
+
+#[allow(unused)]
+pub trait JoinableElement: Send + Sync + Any {
+    fn as_any(&self) -> &dyn Any;
+    fn as_any_mut(&mut self) -> &mut dyn Any;
+    fn as_element(&self) -> &dyn Element;
+    fn as_element_mut(&mut self) -> &mut dyn Element;
+
+    fn set_borders(&mut self, borders: Borders);
+    fn set_joins(&mut self, joins: Borders);
+}
+
+#[allow(unused)]
+pub trait InfoElement: Send + Sync + Any {
+    fn as_any(&self) -> &dyn Any;
+    fn as_any_mut(&mut self) -> &mut dyn Any;
+    fn as_element(&self) -> &dyn Element;
+    fn as_element_mut(&mut self) -> &mut dyn Element;
+
+    fn get_info_screen(&self) -> Box<dyn Screen>;
+}
+
+#[allow(unused)]
+pub trait InteractableElement: Send + Sync + Any {
+    fn as_any(&self) -> &dyn Any;
+    fn as_any_mut(&mut self) -> &mut dyn Any;
+    fn as_element(&self) -> &dyn Element;
+    fn as_element_mut(&mut self) -> &mut dyn Element;
+
+    fn interact(&mut self, key: KeyEvent) -> InteractionResult;
+
+    fn can_focus(&self) -> bool;
+    fn is_focused(&self) -> bool;
+    fn focus(&mut self, f: bool);
+}

iota-cli/src/elements/graph_card.rs

@@ -0,0 +1,215 @@
+use std::{any::Any, sync::Arc};
+
+use crossterm::event::KeyEvent;
+use ratatui::{
+    Frame,
+    layout::Rect,
+    style::{Color, Style},
+    widgets::{
+        Block, Borders,
+        canvas::{Canvas, Line},
+    },
+};
+
+use crate::{
+    APP_STATE,
+    gui::{
+        elements::elements::{Element, InteractableElement, JoinableElement},
+        interaction_result::InteractionResult,
+        ui::UI,
+        util::borders::draw_block_joins,
+    },
+};
+
+pub enum GRAPHS {
+    Ram,
+    Cpu,
+    Ping,
+}
+
+impl GRAPHS {
+    pub fn get_color(&self) -> Color {
+        match self {
+            GRAPHS::Ram => Color::Blue,
+            GRAPHS::Cpu => Color::Red,
+            GRAPHS::Ping => Color::Green,
+        }
+    }
+
+    pub fn get_graph(&self) -> Vec<(f64, f64)> {
+        match self {
+            GRAPHS::Ram => APP_STATE.lock().unwrap().with_width(28).ram.clone(),
+            GRAPHS::Cpu => APP_STATE.lock().unwrap().with_width(28).cpu.clone(),
+            GRAPHS::Ping => APP_STATE.lock().unwrap().with_width(28).ping.clone(),
+        }
+    }
+
+    pub fn get_unit(&self) -> String {
+        match self {
+            GRAPHS::Ram => "MB".to_string(),
+            GRAPHS::Cpu => "%".to_string(),
+            GRAPHS::Ping => "ms".to_string(),
+        }
+    }
+}
+
+#[allow(unused)]
+pub struct GraphCard {
+    ui: Arc<UI>,
+    graph_type: GRAPHS,
+
+    focused: bool,
+    pub title: String,
+
+    borders: Borders,
+    joins: Borders,
+
+    open: bool,
+}
+
+impl GraphCard {
+    pub fn new(ui: Arc<UI>, graph_type: GRAPHS, title: String) -> Self {
+        Self {
+            ui,
+            graph_type,
+            focused: false,
+            title,
+            borders: Borders::ALL,
+            joins: Borders::NONE,
+            open: true,
+        }
+    }
+
+    pub fn set_open(&mut self, open: bool) {
+        self.open = open;
+    }
+}
+impl Element for GraphCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn render(&self, f: &mut Frame, r: Rect) {
+        if self.open {
+            let graph = self.graph_type.get_graph();
+            let unit = self.graph_type.get_unit();
+            let min_x = graph.first().map(|(x, _)| *x).unwrap_or(0.0);
+            let max_x = graph.last().map(|(x, _)| *x).unwrap_or(100.0);
+            let min_y = graph
+                .iter()
+                .map(|(_, y)| *y)
+                .filter(|y| *y > 0.0)
+                .min_by(|a, b| a.total_cmp(b))
+                .unwrap_or(0.0);
+            let max_y = graph.iter().map(|(_, y)| *y).fold(-1.0, f64::max);
+
+            let block = Block::default()
+                .title(format!(
+                    "{}:─{}{}─{}min/{}max",
+                    self.title,
+                    graph.last().unwrap_or(&(0.0, 0.0)).1 as i64,
+                    unit,
+                    min_y as i64,
+                    max_y as i64,
+                ))
+                .borders(self.borders)
+                .border_style(if self.focused {
+                    Style::default().fg(Color::Yellow)
+                } else {
+                    Style::default()
+                });
+
+            let canvas = Canvas::default()
+                .block(block)
+                .x_bounds([min_x, max_x])
+                .y_bounds([0.0, 100.0])
+                .paint(|ctx| {
+                    for (x, y) in &graph {
+                        ctx.draw(&Line {
+                            x1: *x,
+                            y1: 0.0,
+                            x2: *x,
+                            y2: *y,
+                            color: self.graph_type.get_color(),
+                        });
+                    }
+                });
+            f.render_widget(canvas, r);
+        } else {
+            let block = Block::default()
+                .title("")
+                .borders(self.borders)
+                .border_style(if self.focused {
+                    Style::default().fg(Color::Yellow)
+                } else {
+                    Style::default()
+                });
+            f.render_widget(block, r);
+        }
+        draw_block_joins(f, r, self.borders, self.joins);
+    }
+}
+
+impl JoinableElement for GraphCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn as_element(&self) -> &dyn Element {
+        self
+    }
+
+    fn as_element_mut(&mut self) -> &mut dyn Element {
+        self
+    }
+
+    fn set_borders(&mut self, borders: Borders) {
+        self.borders = borders;
+    }
+
+    fn set_joins(&mut self, joins: Borders) {
+        self.joins = joins;
+    }
+}
+
+impl InteractableElement for GraphCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn as_element(&self) -> &dyn Element {
+        self
+    }
+
+    fn as_element_mut(&mut self) -> &mut dyn Element {
+        self
+    }
+
+    fn interact(&mut self, _key: KeyEvent) -> InteractionResult {
+        InteractionResult::Handled
+    }
+
+    fn can_focus(&self) -> bool {
+        true
+    }
+
+    fn is_focused(&self) -> bool {
+        self.focused
+    }
+
+    fn focus(&mut self, f: bool) {
+        self.focused = f;
+    }
+}

iota-cli/src/elements/log_card.rs

@@ -0,0 +1,483 @@
+use crate::APP_STATE;
+use crate::gui::elements::elements::{Element, InteractableElement, JoinableElement};
+use crate::gui::interaction_result::InteractionResult;
+use crate::gui::util::borders::draw_block_joins;
+use crate::util::logger::PrintType;
+use crossterm::event::{KeyCode, KeyEvent};
+use ratatui::{
+    Frame,
+    layout::Rect,
+    style::{Color, Style},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+};
+use std::any::Any;
+use std::time::{SystemTime, UNIX_EPOCH};
+
+#[derive(Clone, Debug)]
+pub struct UiLogEntry {
+    pub timestamp_ms: u128,
+    pub sender: PrintType,
+    pub message: String,
+    pub is_error: bool,
+}
+
+impl UiLogEntry {
+    pub fn format_timestamp(&self) -> String {
+        let secs = (self.timestamp_ms / 1000) as i64;
+        let hours = (secs / 3600) % 24;
+        let minutes = (secs / 60) % 60;
+        let seconds = secs % 60;
+        format!("{:02}:{:02}:{:02}", hours, minutes, seconds)
+    }
+}
+
+impl From<LogEntry> for UiLogEntry {
+    fn from(entry: LogEntry) -> Self {
+        Self {
+            timestamp_ms: entry.timestamp_ms,
+            sender: entry.sender,
+            message: entry.message,
+            is_error: entry.is_error,
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct LogEntry {
+    pub timestamp_ms: u128,
+    pub sender: PrintType,
+    pub message: String,
+    pub is_error: bool,
+}
+
+impl LogEntry {
+    pub fn new(sender: PrintType, message: String, is_error: bool) -> Self {
+        Self {
+            timestamp_ms: SystemTime::now()
+                .duration_since(UNIX_EPOCH)
+                .unwrap()
+                .as_millis(),
+            sender,
+            message,
+            is_error,
+        }
+    }
+}
+
+pub struct LogCard {
+    focused: bool,
+    selected: bool,
+    scroll_offset: usize,
+    last_total_lines: usize,
+    last_visible_height: usize,
+    pub borders: Borders,
+    pub joins: Borders,
+}
+
+impl LogCard {
+    pub fn new() -> Self {
+        Self {
+            focused: false,
+            selected: false,
+            scroll_offset: 0,
+            last_total_lines: 0,
+            last_visible_height: 10,
+            borders: Borders::ALL,
+            joins: Borders::NONE,
+        }
+    }
+
+    fn get_logs(&self) -> Vec<UiLogEntry> {
+        let state = APP_STATE.lock().unwrap();
+        state.get_logs().iter().cloned().collect()
+    }
+
+    fn find_split_point(s: &str, max_width: usize) -> usize {
+        if max_width == 0 {
+            return s.len();
+        }
+
+        let mut current_width = 0usize;
+        let mut last_boundary = 0usize;
+
+        for (idx, ch) in s.char_indices() {
+            let char_width = if ch.is_ascii() { 1 } else { 2 };
+            if current_width + char_width > max_width {
+                if last_boundary == 0 {
+                    return idx + ch.len_utf8();
+                }
+                return last_boundary;
+            }
+            current_width += char_width;
+            last_boundary = idx + ch.len_utf8();
+        }
+
+        s.len()
+    }
+
+    fn wrap_entry(entry: &UiLogEntry, available_width: usize) -> Vec<(String, Color, bool)> {
+        let mut result = Vec::new();
+
+        let timestamp = entry.format_timestamp();
+        let first_prefix = "┌ ";
+        let default_prefix = "│ ";
+        let last_prefix = "└ ";
+
+        let prefix_width = 2;
+        let first_line_width = available_width.saturating_sub(prefix_width + 1);
+        let continuation_width = available_width.saturating_sub(prefix_width);
+
+        let segments: Vec<&str> = entry.message.split('\n').collect();
+
+        let mut raw_lines = Vec::new();
+
+        for segment in segments {
+            let mut remaining = segment;
+            if remaining.is_empty() {
+                raw_lines.push(String::new());
+                continue;
+            }
+
+            let mut is_first_part = true;
+            while !remaining.is_empty() {
+                let current_width = if is_first_part {
+                    first_line_width
+                } else {
+                    continuation_width
+                };
+
+                let split_point = Self::find_split_point(remaining, current_width);
+                let line_content = remaining[..split_point].to_string();
+                raw_lines.push(line_content);
+                remaining = &remaining[split_point..];
+                is_first_part = false;
+            }
+        }
+
+        if raw_lines.is_empty() {
+            raw_lines.push(String::new());
+        }
+
+        for (idx, content) in raw_lines.iter().enumerate() {
+            let is_last = idx + 1 == raw_lines.len();
+            let is_single = raw_lines.len() == 1;
+            let is_first = idx == 0;
+            let prefix = if is_first {
+                first_prefix
+            } else if is_last && !is_single {
+                last_prefix
+            } else {
+                default_prefix
+            };
+
+            let mut line = String::from(prefix);
+            line.push_str(content);
+
+            if is_last && !timestamp.is_empty() {
+                line.push(' ');
+                line.push_str(&timestamp);
+            }
+
+            result.push((line, entry.sender.prefix_color(), entry.is_error));
+        }
+
+        result
+    }
+
+    fn build_all_lines(
+        &self,
+        entries: Vec<UiLogEntry>,
+        width: usize,
+    ) -> Vec<(String, Color, bool)> {
+        let mut lines = Vec::new();
+
+        for entry in entries {
+            let wrapped = Self::wrap_entry(&entry, width);
+            lines.extend(wrapped);
+        }
+
+        lines
+    }
+
+    fn calculate_view_window(&self, total_lines: usize, visible_height: usize) -> (usize, usize) {
+        if total_lines <= visible_height {
+            return (0, total_lines);
+        }
+
+        let max_offset = total_lines - visible_height;
+        let clamped_offset = self.scroll_offset.min(max_offset);
+
+        let end = total_lines - clamped_offset;
+        let start = end.saturating_sub(visible_height);
+
+        (start, end)
+    }
+
+    fn get_title_hints(&self) -> (bool, bool) {
+        if self.last_total_lines == 0 || self.last_total_lines <= self.last_visible_height {
+            return (false, false);
+        }
+
+        let max_offset = self.last_total_lines - self.last_visible_height;
+        let can_scroll_up = self.scroll_offset < max_offset;
+        let can_scroll_down = self.scroll_offset > 0;
+
+        (can_scroll_up, can_scroll_down)
+    }
+
+    fn build_title(&self) -> String {
+        if !self.focused {
+            return "Logs".to_string();
+        }
+
+        let (can_up, can_down) = self.get_title_hints();
+
+        if !can_up && !can_down {
+            return "Logs".to_string();
+        }
+
+        let nav_symbol = if self.selected { "↑" } else { "j" };
+        let down_symbol = if self.selected { "↓" } else { "k" };
+
+        match (can_up, can_down) {
+            (true, true) => format!("Logs ({} older {} newer)", nav_symbol, down_symbol),
+            (true, false) => format!("Logs ({} older)", nav_symbol),
+            (false, true) => format!("Logs ({} newer)", down_symbol),
+            (false, false) => "Logs".to_string(),
+        }
+    }
+
+    fn scroll_up(&mut self) {
+        let max_offset = self
+            .last_total_lines
+            .saturating_sub(self.last_visible_height);
+        self.scroll_offset = (self.scroll_offset + 1).min(max_offset);
+    }
+
+    fn scroll_down(&mut self) {
+        self.scroll_offset = self.scroll_offset.saturating_sub(1);
+    }
+
+    fn split_line_prefix(line: &str) -> (&str, &str) {
+        if let Some(rest) = line.strip_prefix("└ ") {
+            ("└ ", rest)
+        } else if let Some(rest) = line.strip_prefix("│ ") {
+            ("│ ", rest)
+        } else if let Some(rest) = line.strip_prefix("┌ ") {
+            ("┌ ", rest)
+        } else {
+            ("", line)
+        }
+    }
+
+    fn split_timestamp_suffix(line: &str) -> (&str, &str) {
+        if let Some(idx) = line.rfind(' ') {
+            let possible_timestamp = &line[idx + 1..];
+            if possible_timestamp.len() == 8
+                && possible_timestamp.as_bytes()[2] == b':'
+                && possible_timestamp.as_bytes()[5] == b':'
+            {
+                let (content, timestamp_with_space) = line.split_at(idx);
+                return (content.trim_end(), timestamp_with_space);
+            }
+        }
+        (line, "")
+    }
+}
+
+impl Element for LogCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn render(&self, f: &mut Frame, area: Rect) {
+        let entries = self.get_logs();
+
+        let block = Block::default()
+            .title(self.build_title())
+            .borders(self.borders)
+            .border_style(if self.focused {
+                Style::default().fg(Color::Yellow)
+            } else {
+                Style::default()
+            });
+
+        let inner_area = block.inner(area);
+        f.render_widget(block, area);
+
+        if inner_area.width == 0 || inner_area.height == 0 {
+            draw_block_joins(f, area, self.borders, self.joins);
+            return;
+        }
+
+        let all_lines = self.build_all_lines(entries, inner_area.width as usize);
+        let total_lines = all_lines.len();
+        let visible_height = inner_area.height as usize;
+
+        let (start, end) = self.calculate_view_window(total_lines, visible_height);
+        let visible_lines = &all_lines[start..end];
+
+        let rendered_lines: Vec<Line> = visible_lines
+            .iter()
+            .map(|(line, prefix_color, is_error)| {
+                let mut spans = Vec::new();
+
+                let (prefix, rest) = Self::split_line_prefix(line);
+
+                if !prefix.is_empty() {
+                    spans.push(Span::styled(
+                        prefix.to_string(),
+                        Style::default().fg(*prefix_color),
+                    ));
+                }
+
+                let (content, timestamp) = Self::split_timestamp_suffix(rest);
+                let text_color = if *is_error { Color::Red } else { Color::White };
+
+                if !content.is_empty() {
+                    spans.push(Span::styled(
+                        content.to_string(),
+                        Style::default().fg(text_color),
+                    ));
+                }
+
+                if !timestamp.is_empty() {
+                    spans.push(Span::styled(
+                        timestamp.to_string(),
+                        Style::default().fg(Color::DarkGray),
+                    ));
+                }
+
+                Line::from(spans)
+            })
+            .collect();
+
+        for (idx, line) in rendered_lines.iter().enumerate() {
+            let line_area = Rect {
+                x: inner_area.x,
+                y: inner_area.y + idx as u16,
+                width: inner_area.width,
+                height: 1,
+            };
+            f.render_widget(Paragraph::new(line.clone()), line_area);
+        }
+
+        draw_block_joins(f, area, self.borders, self.joins);
+    }
+}
+
+impl JoinableElement for LogCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn as_element(&self) -> &(dyn Element + 'static) {
+        &*self
+    }
+
+    fn as_element_mut(&mut self) -> &mut (dyn Element + 'static) {
+        &mut *self
+    }
+
+    fn set_borders(&mut self, borders: Borders) {
+        self.borders = borders;
+    }
+
+    fn set_joins(&mut self, joins: Borders) {
+        self.joins = joins;
+    }
+}
+
+impl InteractableElement for LogCard {
+    fn as_any(&self) -> &dyn Any {
+        self
+    }
+
+    fn as_any_mut(&mut self) -> &mut dyn Any {
+        self
+    }
+
+    fn as_element(&self) -> &(dyn Element + 'static) {
+        &*self
+    }
+
+    fn as_element_mut(&mut self) -> &mut (dyn Element + 'static) {
+        &mut *self
+    }
+
+    fn interact(&mut self, key: KeyEvent) -> InteractionResult {
+        let entries = self.get_logs();
+        let estimated_width = 80usize;
+        let all_lines = self.build_all_lines(entries, estimated_width);
+
+        self.last_total_lines = all_lines.len();
+        let visible_height = self.last_visible_height.max(1);
+
+        match key.code {
+            KeyCode::Enter | KeyCode::Char(' ') => {
+                self.selected = !self.selected;
+                InteractionResult::Handled
+            }
+            KeyCode::Char('j') | KeyCode::Char('J') => {
+                let (can_up, _) = self.get_title_hints();
+                if can_up {
+                    self.scroll_up();
+                }
+                InteractionResult::Handled
+            }
+            KeyCode::Char('k') | KeyCode::Char('K') => {
+                let (_, can_down) = self.get_title_hints();
+                if can_down {
+                    self.scroll_down();
+                }
+                InteractionResult::Handled
+            }
+            KeyCode::Up if self.selected => {
+                let (can_up, _) = self.get_title_hints();
+                if can_up {
+                    self.scroll_up();
+                }
+                InteractionResult::Handled
+            }
+            KeyCode::Down if self.selected => {
+                let (_, can_down) = self.get_title_hints();
+                if can_down {
+                    self.scroll_down();
+                }
+                InteractionResult::Handled
+            }
+            KeyCode::Home => {
+                if self.last_total_lines > visible_height {
+                    self.scroll_offset = self.last_total_lines - visible_height;
+                }
+                InteractionResult::Handled
+            }
+            KeyCode::End => {
+                self.scroll_offset = 0;
+                InteractionResult::Handled
+            }
+            _ => InteractionResult::Unhandled,
+        }
+    }
+
+    fn can_focus(&self) -> bool {
+        true
+    }
+
+    fn is_focused(&self) -> bool {
+        self.focused
+    }
+
+    fn focus(&mut self, f: bool) {
+        self.focused = f;
+    }
+}