From b5ef6b92e71c7af66534fa1dd8c5e73a8b2899c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A9=AC=E7=99=BB=E5=B1=B1?= Date: Fri, 27 Mar 2026 13:12:46 +0800 Subject: [PATCH] feat: redesign launcher UI and harden runtime controls --- src-tauri/src/commands.rs | 5 + src-tauri/src/config.rs | 3 + src-tauri/src/error.rs | 3 + src-tauri/src/lib.rs | 3 +- src-tauri/src/process.rs | 26 +- src-tauri/src/state.rs | 42 +- src/app.rs | 246 +++++++--- src/components/config_form.rs | 540 ++++++++++++++++------ src/components/log_viewer.rs | 14 +- src/logs.css | 203 +++++---- src/types.rs | 8 + styles.css | 816 ++++++++++++++++++++-------------- 12 files changed, 1271 insertions(+), 638 deletions(-) diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs index 2df0d66..949e204 100644 --- a/src-tauri/src/commands.rs +++ b/src-tauri/src/commands.rs @@ -90,3 +90,8 @@ pub async fn check_tcp_connection(host: String, port: u16) -> Result { Ok(result) } + +#[tauri::command] +pub async fn is_rustfs_process_running() -> Result { + Ok(state::is_rustfs_process_running()) +} diff --git a/src-tauri/src/config.rs b/src-tauri/src/config.rs index 79bdf7d..9c09742 100644 --- a/src-tauri/src/config.rs +++ b/src-tauri/src/config.rs @@ -8,6 +8,8 @@ pub struct RustFsConfig { #[serde(skip_serializing_if = "Option::is_none")] pub port: Option, #[serde(skip_serializing_if = "Option::is_none")] + pub console_port: Option, + #[serde(skip_serializing_if = "Option::is_none")] pub host: Option, #[serde(skip_serializing_if = "Option::is_none")] pub access_key: Option, @@ -22,6 +24,7 @@ impl Default for RustFsConfig { binary_path: None, data_path: String::new(), port: Some(9000), + console_port: Some(9001), host: Some("127.0.0.1".to_string()), access_key: Some("rustfsadmin".to_string()), secret_key: Some("rustfsadmin".to_string()), diff --git a/src-tauri/src/error.rs b/src-tauri/src/error.rs index 33dd680..37bd897 100644 --- a/src-tauri/src/error.rs +++ b/src-tauri/src/error.rs @@ -11,6 +11,9 @@ pub enum Error { #[error("Data path does not exist: {0}")] DataPathNotExist(String), + #[error("API port and console port must be different")] + PortConflict, + #[error("RustFS binary not found at {0}")] BinaryNotFound(String), diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index 0823408..53348ea 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -100,7 +100,8 @@ pub fn run() { commands::get_app_logs, commands::get_rustfs_logs, commands::diagnose_rustfs_binary, - commands::check_tcp_connection + commands::check_tcp_connection, + commands::is_rustfs_process_running ]) .build(tauri::generate_context!()) .expect("error building tauri application") diff --git a/src-tauri/src/process.rs b/src-tauri/src/process.rs index ef3789c..3f586ef 100644 --- a/src-tauri/src/process.rs +++ b/src-tauri/src/process.rs @@ -170,6 +170,13 @@ pub fn launch(config: RustFsConfig) -> Result { return Err(Error::DataPathRequired); } + let api_port = config.port.unwrap_or(9000); + let console_port = config.console_port.unwrap_or(9001); + + if config.console_enable && api_port == console_port { + return Err(Error::PortConflict); + } + let binary_path = match &config.binary_path { Some(path) => PathBuf::from(path), None => get_binary_path()?, @@ -199,10 +206,16 @@ pub fn launch(config: RustFsConfig) -> Result { let address = format!( "{}:{}", config.host.as_deref().unwrap_or("127.0.0.1"), - config.port.unwrap_or(9000) + api_port ); cmd.arg("--address").arg(&address); + let console_address = format!( + "{}:{}", + config.host.as_deref().unwrap_or("127.0.0.1"), + console_port + ); + if let Some(access_key) = &config.access_key { cmd.arg("--access-key").arg(access_key); } @@ -211,6 +224,7 @@ pub fn launch(config: RustFsConfig) -> Result { } if config.console_enable { cmd.arg("--console-enable"); + cmd.arg("--console-address").arg(&console_address); } #[cfg(windows)] @@ -220,7 +234,15 @@ pub fn launch(config: RustFsConfig) -> Result { cmd.creation_flags(CREATE_NO_WINDOW); } - add_app_log(format!("Spawning command: {:?}", cmd)); + add_app_log(format!( + "Spawning RustFS: binary={}, address={}, console_enable={}, console_address={}, access_key_set={}, secret_key_set={}", + binary_path.display(), + address, + config.console_enable, + console_address, + config.access_key.is_some(), + config.secret_key.is_some() + )); let mut child = cmd .stdout(Stdio::piped()) .stderr(Stdio::piped()) diff --git a/src-tauri/src/state.rs b/src-tauri/src/state.rs index e6dd3d7..d3157ef 100644 --- a/src-tauri/src/state.rs +++ b/src-tauri/src/state.rs @@ -15,14 +15,34 @@ lazy_static! { lazy_static! { static ref ANSI_REGEX: Regex = Regex::new(r"\x1B\[[0-9;]*m").unwrap(); + static ref SECRET_PATTERNS: Vec = vec![ + Regex::new(r#"(--access-key\s+)(\S+)"#).unwrap(), + Regex::new(r#"(--secret-key\s+)(\S+)"#).unwrap(), + Regex::new(r#"(access_key\s*=\s*)([^,\s]+)"#).unwrap(), + Regex::new(r#"(secret_key\s*=\s*)([^,\s]+)"#).unwrap(), + Regex::new(r#"(access_key:\s*Some\(")([^"]+)("\))"#).unwrap(), + Regex::new(r#"(secret_key:\s*Some\(")([^"]+)("\))"#).unwrap(), + Regex::new(r#"("access_key"\s*:\s*")([^"]+)(")"#).unwrap(), + Regex::new(r#"("secret_key"\s*:\s*")([^"]+)(")"#).unwrap(), + ]; } fn clean_ansi_codes(s: &str) -> String { ANSI_REGEX.replace_all(s, "").to_string() } +fn redact_secrets(s: &str) -> String { + SECRET_PATTERNS.iter().fold(s.to_string(), |acc, regex| { + regex.replace_all(&acc, "${1}[REDACTED]${3}").to_string() + }) +} + +fn clean_log_message(s: &str) -> String { + redact_secrets(&clean_ansi_codes(s)) +} + fn buffer_log(logs: &Arc>>, message: String, capacity: usize) -> String { - let cleaned_message = clean_ansi_codes(&message); + let cleaned_message = clean_log_message(&message); let log_entry = format!( "[{}] {}", chrono::Local::now().format("%H:%M:%S"), @@ -75,6 +95,26 @@ pub fn get_rustfs_logs() -> Vec { RUSTFS_LOGS.lock().unwrap().iter().cloned().collect() } +pub fn is_rustfs_process_running() -> bool { + let mut process_guard = RUSTFS_PROCESS.lock().unwrap(); + + match process_guard.as_mut() { + Some(child) => match child.try_wait() { + Ok(None) => true, + Ok(Some(_)) => { + *process_guard = None; + false + } + Err(e) => { + add_app_log(format!("Failed to inspect RustFS process status: {}", e)); + *process_guard = None; + false + } + }, + None => false, + } +} + pub fn set_rustfs_process(process: Child) { let pid = process.id(); *RUSTFS_PROCESS.lock().unwrap() = Some(process); diff --git a/src/app.rs b/src/app.rs index d5246d6..27a32a0 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,10 +1,11 @@ use crate::components::config_form::ConfigForm; use crate::components::log_viewer::LogViewer; use crate::components::toast::{Toast, ToastMessage, ToastType}; -use crate::types::{CommandResponse, LogType, RustFsConfig}; +use crate::types::{CommandResponse, LogEntry, LogType, RustFsConfig}; use leptos::ev::SubmitEvent; use leptos::prelude::*; use std::collections::VecDeque; +use std::sync::atomic::{AtomicU64, Ordering}; use wasm_bindgen::closure::Closure; use wasm_bindgen::prelude::*; use wasm_bindgen_futures::spawn_local; @@ -26,12 +27,46 @@ fn is_tauri() -> bool { .unwrap_or(false) } +#[derive(serde::Serialize, serde::Deserialize)] +struct PersistedConfig { + data_path: String, + port: Option, + console_port: Option, + host: Option, + console_enable: bool, +} + +impl From<&RustFsConfig> for PersistedConfig { + fn from(config: &RustFsConfig) -> Self { + Self { + data_path: config.data_path.clone(), + port: config.port, + console_port: config.console_port, + host: config.host.clone(), + console_enable: config.console_enable, + } + } +} + +impl From for RustFsConfig { + fn from(config: PersistedConfig) -> Self { + RustFsConfig { + data_path: config.data_path, + port: config.port, + console_port: config.console_port, + host: config.host, + console_enable: config.console_enable, + ..RustFsConfig::default() + } + } +} + fn load_config() -> RustFsConfig { if let Some(window) = web_sys::window() { if let Ok(Some(storage)) = window.local_storage() { if let Ok(Some(json)) = storage.get_item("rustfs_config") { - if let Ok(config) = serde_json::from_str(&json) { - return config; + if let Ok(config) = serde_json::from_str::(&json) { + return config.into(); } } } @@ -42,25 +77,89 @@ fn load_config() -> RustFsConfig { fn save_config(config: &RustFsConfig) { if let Some(window) = web_sys::window() { if let Ok(Some(storage)) = window.local_storage() { - if let Ok(json) = serde_json::to_string(config) { + if let Ok(json) = serde_json::to_string(&PersistedConfig::from(config)) { let _ = storage.set_item("rustfs_config", &json); } } } } +fn describe_config(config: &RustFsConfig) -> String { + format!( + "data_path={}, host={:?}, port={:?}, console_enable={}, access_key_set={}, secret_key_set={}", + config.data_path, + config.host, + config.port, + config.console_enable, + config.access_key.is_some(), + config.secret_key.is_some() + ) +} + const APP_LOG_CAPACITY: usize = 100; const RUSTFS_LOG_CAPACITY: usize = 1000; +const DEFAULT_RUSTFS_PORT: u16 = 9000; +const DEFAULT_CONSOLE_PORT: u16 = 9001; +static NEXT_LOG_ID: AtomicU64 = AtomicU64::new(1); -fn push_log(writer: WriteSignal>, msg: String, capacity: usize) { +fn next_log_id() -> u64 { + NEXT_LOG_ID.fetch_add(1, Ordering::Relaxed) +} + +fn to_log_entry(message: String) -> LogEntry { + LogEntry { + id: next_log_id(), + message, + } +} + +fn push_log(writer: WriteSignal>, msg: String, capacity: usize) { writer.update(|logs| { - logs.push_back(msg); + logs.push_back(to_log_entry(msg)); if logs.len() > capacity { logs.pop_front(); } }); } +fn sync_runtime_status( + config: ReadSignal, + set_is_running: WriteSignal, + set_can_stop: WriteSignal, + set_service_status: WriteSignal, +) { + spawn_local(async move { + if !is_tauri() { + set_is_running.set(false); + set_can_stop.set(false); + set_service_status.set(false); + return; + } + + let current = config.get_untracked(); + let host = current.host.unwrap_or_else(|| "127.0.0.1".to_string()); + let port = current.port.unwrap_or(DEFAULT_RUSTFS_PORT); + + let tcp_args = js_sys::Object::new(); + js_sys::Reflect::set(&tcp_args, &"host".into(), &host.into()).unwrap(); + js_sys::Reflect::set(&tcp_args, &"port".into(), &port.into()).unwrap(); + + let service_online = tauri_invoke("check_tcp_connection", tcp_args.into()) + .await + .as_bool() + .unwrap_or(false); + let managed_running = + tauri_invoke("is_rustfs_process_running", js_sys::Object::new().into()) + .await + .as_bool() + .unwrap_or(false); + + set_service_status.set(service_online); + set_can_stop.set(managed_running); + set_is_running.set(managed_running || service_online); + }); +} + #[component] pub fn App() -> impl IntoView { let (config, set_config) = signal(load_config()); @@ -71,10 +170,11 @@ pub fn App() -> impl IntoView { let (toasts, set_toasts) = signal(Vec::::new()); let (is_running, set_is_running) = signal(false); - let (app_logs, set_app_logs) = signal(VecDeque::::new()); - let (rustfs_logs, set_rustfs_logs) = signal(VecDeque::::new()); + let (app_logs, set_app_logs) = signal(VecDeque::::new()); + let (rustfs_logs, set_rustfs_logs) = signal(VecDeque::::new()); let (current_log_type, set_current_log_type) = signal(LogType::App); let (service_status, set_service_status) = signal(false); + let (can_stop, set_can_stop) = signal(false); let remove_toast = Callback::new(move |id: u64| { set_toasts.update(|current| { @@ -106,41 +206,24 @@ pub fn App() -> impl IntoView { // Health Check Polling Effect::new(move |_| { - spawn_local(async move { - if !is_tauri() { - return; - } + if !is_tauri() { + return; + } - let closure = Closure::wrap(Box::new(move || { - spawn_local(async move { - let current = config.get_untracked(); - if let Some(port) = current.port { - let host = current.host.unwrap_or_else(|| "127.0.0.1".to_string()); - - let args = js_sys::Object::new(); - js_sys::Reflect::set(&args, &"host".into(), &host.into()).unwrap(); - js_sys::Reflect::set(&args, &"port".into(), &port.into()).unwrap(); - - match tauri_invoke("check_tcp_connection", args.into()) - .await - .as_bool() - { - Some(is_active) => set_service_status.set(is_active), - None => set_service_status.set(false), - } - } - }); - }) as Box); - - let _ = web_sys::window() - .unwrap() - .set_interval_with_callback_and_timeout_and_arguments_0( - closure.as_ref().unchecked_ref(), - 3000, // 3 seconds - ); + sync_runtime_status(config, set_is_running, set_can_stop, set_service_status); - closure.forget(); // Leak the closure to keep it alive - }); + let closure = Closure::wrap(Box::new(move || { + sync_runtime_status(config, set_is_running, set_can_stop, set_service_status); + }) as Box); + + let _ = web_sys::window() + .unwrap() + .set_interval_with_callback_and_timeout_and_arguments_0( + closure.as_ref().unchecked_ref(), + 3000, // 3 seconds + ); + + closure.forget(); // Leak the closure to keep it alive }); let app_log_writer = set_app_logs; @@ -167,7 +250,7 @@ pub fn App() -> impl IntoView { const RUSTFS_EXIT_EVENT: &str = "rustfs-exit"; fn create_log_listener( - logs_signal: WriteSignal>, + logs_signal: WriteSignal>, max_logs: usize, ) -> Closure { Closure::wrap(Box::new(move |event: JsValue| { @@ -183,6 +266,7 @@ pub fn App() -> impl IntoView { if let Ok(payload) = js_sys::Reflect::get(&event, &"payload".into()) { if let Some(exit_code) = payload.as_string() { set_is_running.set(false); + set_can_stop.set(false); set_service_status.set(false); show_toast( format!("RustFS exited with code: {}", exit_code), @@ -238,21 +322,22 @@ pub fn App() -> impl IntoView { // Fetch initial logs let app_logs_value = tauri_invoke("get_app_logs", js_sys::Object::new().into()).await; if let Ok(logs_vec) = serde_wasm_bindgen::from_value::>(app_logs_value) { - app_log_writer.set(logs_vec.into_iter().collect()); + app_log_writer.set(logs_vec.into_iter().map(to_log_entry).collect()); } let rustfs_logs_value = tauri_invoke("get_rustfs_logs", js_sys::Object::new().into()).await; if let Ok(logs_vec) = serde_wasm_bindgen::from_value::>(rustfs_logs_value) { - rustfs_log_writer.set(logs_vec.into_iter().collect()); + rustfs_log_writer.set(logs_vec.into_iter().map(to_log_entry).collect()); } }); let launch_rustfs = move |ev: SubmitEvent| { ev.prevent_default(); set_is_running.set(true); + set_can_stop.set(true); show_toast("Launching RustFS...".to_string(), ToastType::Info); - let now = js_sys::Date::new_0().to_locale_time_string("en-US".into()); + let now = js_sys::Date::new_0().to_locale_time_string("en-US"); push_log( set_app_logs, format!("[{}] Launch button clicked", now), @@ -260,7 +345,11 @@ pub fn App() -> impl IntoView { ); push_log( set_app_logs, - format!("[{}] Config: {:?}", now, config.get()), + format!( + "[{}] Config summary: {}", + now, + describe_config(&config.get()) + ), APP_LOG_CAPACITY, ); @@ -277,6 +366,7 @@ pub fn App() -> impl IntoView { APP_LOG_CAPACITY, ); set_is_running.set(false); + set_can_stop.set(false); return; } @@ -290,7 +380,7 @@ pub fn App() -> impl IntoView { current_config.host ); - let now = js_sys::Date::new_0().to_locale_time_string("en-US".into()); + let now = js_sys::Date::new_0().to_locale_time_string("en-US"); push_log( set_app_logs, format!("[{}] Calling tauri_invoke with command: launch_rustfs", now), @@ -303,7 +393,7 @@ pub fn App() -> impl IntoView { js_sys::Reflect::set(&args, &"config".into(), &config_js).unwrap(); let result_value = tauri_invoke("launch_rustfs", args.into()).await; - let now = js_sys::Date::new_0().to_locale_time_string("en-US".into()); + let now = js_sys::Date::new_0().to_locale_time_string("en-US"); push_log( set_app_logs, format!("[{}] Invoke result: {:?}", now, result_value), @@ -312,7 +402,7 @@ pub fn App() -> impl IntoView { match serde_wasm_bindgen::from_value::(result_value) { Ok(CommandResponse { success, message }) => { - let now = js_sys::Date::new_0().to_locale_time_string("en-US".into()); + let now = js_sys::Date::new_0().to_locale_time_string("en-US"); push_log( set_app_logs, format!("[{}] Result message: {}", now, message), @@ -324,7 +414,7 @@ pub fn App() -> impl IntoView { "RustFS launched successfully!".to_string(), ToastType::Success, ); - let now = js_sys::Date::new_0().to_locale_time_string("en-US".into()); + let now = js_sys::Date::new_0().to_locale_time_string("en-US"); push_log( set_app_logs, format!("[{}] Launch successful!", now), @@ -332,24 +422,26 @@ pub fn App() -> impl IntoView { ); } else { show_toast(format!("Launch failed: {}", message), ToastType::Error); - let now = js_sys::Date::new_0().to_locale_time_string("en-US".into()); + let now = js_sys::Date::new_0().to_locale_time_string("en-US"); push_log( set_app_logs, format!("[{}] Launch result: {}", now, message), APP_LOG_CAPACITY, ); set_is_running.set(false); + set_can_stop.set(false); } } Err(_) => { show_toast("RustFS launch command failed".to_string(), ToastType::Error); - let now = js_sys::Date::new_0().to_locale_time_string("en-US".into()); + let now = js_sys::Date::new_0().to_locale_time_string("en-US"); push_log( set_app_logs, format!("[{}] Launch completed but response parsing failed", now), APP_LOG_CAPACITY, ); set_is_running.set(false); + set_can_stop.set(false); } } }); @@ -370,6 +462,7 @@ pub fn App() -> impl IntoView { Ok(res) => { if res.success { set_is_running.set(false); + set_can_stop.set(false); set_service_status.set(false); show_toast("RustFS stopped".to_string(), ToastType::Success); push_log( @@ -402,14 +495,48 @@ pub fn App() -> impl IntoView {
-
+
+ "Control Plane"

"RustFS Launcher"

-

"Simple launcher for RustFS project"

-
- - - {move || if service_status.get() { "Service Online" } else { "Service Offline" }} - + +
+
+ + + {move || if service_status.get() { "Service Online" } else { "Service Offline" }} + +
+
+ {move || if can_stop.get() { + "Managed by Launcher" + } else if is_running.get() { + "Detected Externally" + } else { + "Ready to Launch" + }} +
+
+
+ +
+
+ "API" + {move || format!(":{}", config.get().port.unwrap_or(DEFAULT_RUSTFS_PORT))} +
+
+ "Console" + {move || { + let current = config.get(); + if current.console_enable { + format!(":{}", current.console_port.unwrap_or(DEFAULT_CONSOLE_PORT)) + } else { + "Disabled".to_string() + } + }} +
+
+ "Mode" + {move || if is_running.get() { "Locked" } else { "Editable" }}
@@ -417,6 +544,7 @@ pub fn App() -> impl IntoView { config=config set_config=set_config is_running=is_running + can_stop=can_stop on_launch=Callback::new(launch_rustfs) on_stop=Callback::new(stop_rustfs) /> diff --git a/src/components/config_form.rs b/src/components/config_form.rs index 94db7d6..e7a1206 100644 --- a/src/components/config_form.rs +++ b/src/components/config_form.rs @@ -12,18 +12,128 @@ extern "C" { async fn open(options: JsValue) -> JsValue; } +const API_PORT_ERROR_MESSAGE: &str = "API port must be a number between 1 and 65535"; +const CONSOLE_PORT_ERROR_MESSAGE: &str = "Console port must be a number between 1 and 65535"; +const PORT_CONFLICT_ERROR_MESSAGE: &str = "API port and console port must be different"; +const DEFAULT_API_PORT: u16 = 9000; +const DEFAULT_CONSOLE_PORT: u16 = 9001; + +fn parse_port_input(value: &str, error_message: &'static str) -> Result, &'static str> { + let trimmed = value.trim(); + if trimmed.is_empty() { + return Ok(None); + } + + let port = trimmed.parse::().map_err(|_| error_message)?; + + if port == 0 { + return Err(error_message); + } + + Ok(Some(port)) +} + +fn validate_port_conflict( + config: &RustFsConfig, + api_port: Option, + console_port: Option, +) -> Result<(), &'static str> { + if !config.console_enable { + return Ok(()); + } + + let effective_api_port = api_port.unwrap_or(DEFAULT_API_PORT); + let effective_console_port = console_port.unwrap_or(DEFAULT_CONSOLE_PORT); + + if effective_api_port == effective_console_port { + return Err(PORT_CONFLICT_ERROR_MESSAGE); + } + + Ok(()) +} + #[component] pub fn ConfigForm( #[prop(into)] config: Signal, #[prop(into)] set_config: WriteSignal, #[prop(into)] is_running: Signal, + #[prop(into)] can_stop: Signal, #[prop(into)] on_launch: Callback, #[prop(into)] on_stop: Callback<()>, ) -> impl IntoView { let (show_secret, set_show_secret) = signal(false); let (is_drag_over, set_is_drag_over) = signal(false); + let (error_message, set_error_message) = signal(Option::::None); + let (port_input, set_port_input) = signal( + config + .get_untracked() + .port + .map(|p| p.to_string()) + .unwrap_or_default(), + ); + let (console_port_input, set_console_port_input) = signal( + config + .get_untracked() + .console_port + .map(|p| p.to_string()) + .unwrap_or_default(), + ); + + let clear_related_error = move |messages: &[&'static str]| { + set_error_message.update(|error| { + if let Some(current) = error.as_deref() { + if messages.contains(¤t) { + *error = None; + } + } + }); + }; + + let validate_and_store_api_port = move |value: String| { + set_port_input.set(value.clone()); + + match parse_port_input(&value, API_PORT_ERROR_MESSAGE) { + Ok(port) => { + let current = config.get_untracked(); + set_config.update(|c| c.port = port); + + match validate_port_conflict(¤t, port, current.console_port) { + Ok(()) => { + clear_related_error(&[API_PORT_ERROR_MESSAGE, PORT_CONFLICT_ERROR_MESSAGE]) + } + Err(message) => set_error_message.set(Some(message.to_string())), + } + } + Err(message) => { + set_config.update(|c| c.port = None); + set_error_message.set(Some(message.to_string())); + } + } + }; + + let validate_and_store_console_port = move |value: String| { + set_console_port_input.set(value.clone()); + + match parse_port_input(&value, CONSOLE_PORT_ERROR_MESSAGE) { + Ok(console_port) => { + let current = config.get_untracked(); + set_config.update(|c| c.console_port = console_port); + + match validate_port_conflict(¤t, current.port, console_port) { + Ok(()) => clear_related_error(&[ + CONSOLE_PORT_ERROR_MESSAGE, + PORT_CONFLICT_ERROR_MESSAGE, + ]), + Err(message) => set_error_message.set(Some(message.to_string())), + } + } + Err(message) => { + set_config.update(|c| c.console_port = None); + set_error_message.set(Some(message.to_string())); + } + } + }; - // Setup Tauri File Drop listener Effect::new(move |_| { spawn_local(async move { if let Some(window) = web_sys::window() { @@ -32,9 +142,13 @@ pub fn ConfigForm( if let Ok(listen) = js_sys::Reflect::get(&event, &"listen".into()) { let listen_fn = js_sys::Function::from(listen); - // Handle File Drop let drop_handler = Closure::wrap(Box::new(move |event: JsValue| { set_is_drag_over.set(false); + + if is_running.get_untracked() { + return; + } + if let Ok(payload) = js_sys::Reflect::get(&event, &"payload".into()) { if let Ok(paths) = @@ -42,19 +156,20 @@ pub fn ConfigForm( { if let Some(first_path) = paths.first() { set_config.update(|c| c.data_path = first_path.clone()); + set_error_message.set(None); } } } }) as Box); - // Handle Drag Hover (Enter) let hover_handler = Closure::wrap(Box::new(move |_: JsValue| { - set_is_drag_over.set(true); + if !is_running.get_untracked() { + set_is_drag_over.set(true); + } }) as Box); - // Handle Drag Cancel (Leave) let cancel_handler = Closure::wrap(Box::new(move |_: JsValue| { set_is_drag_over.set(false); }) @@ -87,6 +202,10 @@ pub fn ConfigForm( }); let select_folder = move |_| { + if is_running.get() { + return; + } + spawn_local(async move { let options = serde_wasm_bindgen::to_value(&serde_json::json!({ "directory": true, @@ -97,187 +216,314 @@ pub fn ConfigForm( if let Some(result) = open(options).await.as_string() { if !result.is_empty() { set_config.update(|c| c.data_path = result); + set_error_message.set(None); } } }); }; - let (error_message, set_error_message) = signal(Option::::None); - let handle_submit = move |ev: SubmitEvent| { ev.prevent_default(); if is_running.get() { - // Stop mode - on_stop.run(()); - } else { - // Launch mode - set_error_message.set(None); + if can_stop.get() { + on_stop.run(()); + } + return; + } - let current_config = config.get(); + set_error_message.set(None); - if current_config.data_path.trim().is_empty() { - set_error_message.set(Some("Data path is required".to_string())); + let current_config = config.get(); + + if current_config.data_path.trim().is_empty() { + set_error_message.set(Some("Data path is required".to_string())); + return; + } + + let port = match parse_port_input(&port_input.get(), API_PORT_ERROR_MESSAGE) { + Ok(port) => port, + Err(message) => { + set_error_message.set(Some(message.to_string())); return; } + }; - if let Some(port) = current_config.port { - if port == 0 { - set_error_message.set(Some("Port must be greater than 0".to_string())); + let console_port = if current_config.console_enable { + match parse_port_input(&console_port_input.get(), CONSOLE_PORT_ERROR_MESSAGE) { + Ok(console_port) => console_port, + Err(message) => { + set_error_message.set(Some(message.to_string())); return; } } + } else { + current_config.console_port + }; - on_launch.run(ev); + if let Err(message) = validate_port_conflict(¤t_config, port, console_port) { + set_error_message.set(Some(message.to_string())); + return; } + + set_config.update(|c| { + c.port = port; + c.console_port = console_port; + }); + + on_launch.run(ev); }; view! { -
-
- -
- - + + +
+ "Configuration Locked"
-
+ -
-
- - -
-
- - -
-
+
+
+
+ "Storage" +

"Dataset Mount"

+
-
-
- - -
-
- -
- - + + +
-
-
+ -
-
-
- - +
+
+ "Network" +

"Ports & Access"

-
+ +
+
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+
+ "Console Bind" + + {move || { + let current = config.get(); + format!( + "{}:{}", + current.host.unwrap_or_else(|| "127.0.0.1".to_string()), + current.console_port.unwrap_or(DEFAULT_CONSOLE_PORT) + ) + }} + +
+
+ + + +
+
+ "Security" +

"Credentials"

+
+ +
+
+ + +
+
+ +
+ + +
+
+
+
- -
- { move || error_message.get() } + + +
+ "The configured RustFS service is online, but this launcher is not managing that process."
+ + +
{move || error_message.get()}
+
} diff --git a/src/components/log_viewer.rs b/src/components/log_viewer.rs index 6e3cea2..cc3fd15 100644 --- a/src/components/log_viewer.rs +++ b/src/components/log_viewer.rs @@ -1,13 +1,13 @@ -use crate::types::LogType; +use crate::types::{LogEntry, LogType}; use leptos::prelude::*; use std::collections::VecDeque; #[component] pub fn LogViewer( - #[prop(into)] app_logs: Signal>, - #[prop(into)] set_app_logs: WriteSignal>, - #[prop(into)] rustfs_logs: Signal>, - #[prop(into)] set_rustfs_logs: WriteSignal>, + #[prop(into)] app_logs: Signal>, + #[prop(into)] set_app_logs: WriteSignal>, + #[prop(into)] rustfs_logs: Signal>, + #[prop(into)] set_rustfs_logs: WriteSignal>, #[prop(into)] current_log_type: Signal, #[prop(into)] set_current_log_type: WriteSignal, ) -> impl IntoView { @@ -77,10 +77,10 @@ pub fn LogViewer( .into_iter() .collect::>() } - key=|log| log.clone() + key=|log| log.id let:log > -
{log}
+
{log.message}
, + pub console_port: Option, pub host: Option, pub access_key: Option, pub secret_key: Option, @@ -15,6 +22,7 @@ impl Default for RustFsConfig { Self { data_path: String::new(), port: Some(9000), + console_port: Some(9001), host: Some("127.0.0.1".to_string()), access_key: Some("rustfsadmin".to_string()), secret_key: Some("rustfsadmin".to_string()), diff --git a/styles.css b/styles.css index ba87215..a3535dd 100644 --- a/styles.css +++ b/styles.css @@ -1,494 +1,664 @@ :root { - /* Colors - Dark Theme */ - --bg-primary: #0f172a; /* Main window background (deep blue/black) */ - --bg-sidebar: #1e293b; /* Sidebar background */ - --bg-input: #334155; /* Input fields */ - --text-primary: #f8fafc; /* Main text */ - --text-secondary: #94a3b8;/* Labels/Subtitles */ - - --accent-color: #3b82f6; /* Blue accent */ - --accent-hover: #2563eb; - - --border-color: #334155; - - --success: #10b981; - --error: #ef4444; - - /* Spacing */ - --space-xs: 0.25rem; - --space-sm: 0.5rem; + --bg-page: #07111e; + --bg-page-accent: #122746; + --bg-panel: rgba(10, 23, 42, 0.9); + --bg-card: rgba(18, 34, 58, 0.92); + --bg-card-strong: rgba(25, 45, 73, 0.98); + --bg-input: rgba(7, 17, 32, 0.78); + --bg-input-disabled: rgba(7, 17, 32, 0.45); + --text-primary: #eff6ff; + --text-secondary: #8fa7c8; + --text-muted: #5f7594; + --accent-color: #ff8a3d; + --accent-hover: #ffa35a; + --accent-soft: rgba(255, 138, 61, 0.16); + --success: #39d0a4; + --success-soft: rgba(57, 208, 164, 0.14); + --error: #ff6b6b; + --error-soft: rgba(255, 107, 107, 0.14); + --border-color: rgba(151, 178, 214, 0.14); + --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.35); + --space-xs: 0.3rem; + --space-sm: 0.65rem; --space-md: 1rem; --space-lg: 1.5rem; - - /* Radius */ - --radius: 6px; + --space-xl: 2rem; + --radius-sm: 12px; + --radius-md: 20px; + --radius-lg: 28px; } * { box-sizing: border-box; } +html, +body { + min-height: 100%; +} + body { margin: 0; - padding: 0; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - background-color: var(--bg-primary); + font-family: "Avenir Next", "IBM Plex Sans", "Segoe UI", sans-serif; + background: + radial-gradient(circle at top left, rgba(255, 138, 61, 0.18), transparent 32%), + radial-gradient(circle at top right, rgba(37, 99, 235, 0.22), transparent 28%), + linear-gradient(145deg, var(--bg-page) 0%, var(--bg-page-accent) 100%); color: var(--text-primary); - height: 100vh; + min-height: 100vh; overflow: hidden; - font-size: 14px; } -/* Layout */ +button, +input { + font: inherit; +} + .container { - display: flex; + display: grid; + grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); + gap: 22px; height: 100vh; - width: 100vw; + padding: 22px; + overflow: hidden; } -/* Sidebar (Left Panel) */ .sidebar { - width: 300px; - background-color: var(--bg-sidebar); - border-right: 1px solid var(--border-color); display: flex; flex-direction: column; - padding: var(--space-lg); - flex-shrink: 0; - overflow-y: auto; + gap: 18px; + min-height: 0; + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; } -.header { - margin-bottom: var(--space-lg); +.sidebar::-webkit-scrollbar { + display: none; } -.header h1 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: var(--text-primary); +.sidebar > * { + flex-shrink: 0; } -.subtitle { - margin: var(--space-xs) 0 0; - color: var(--text-secondary); - font-size: 0.85rem; +.hero-card, +.summary-card, +.control-surface, +.logs-section { + border: 1px solid var(--border-color); + box-shadow: var(--shadow-lg); } -/* Config Form */ -.config-form { - display: flex; - flex-direction: column; - gap: var(--space-md); +.hero-card { + position: relative; + overflow: hidden; + padding: 24px 24px 30px; + border-radius: var(--radius-lg); + background: + radial-gradient(circle at top right, rgba(255, 138, 61, 0.18), transparent 28%), + linear-gradient(160deg, rgba(19, 38, 63, 0.98), rgba(10, 20, 37, 0.96)); } -.form-group label { - display: block; - color: var(--text-secondary); - margin-bottom: var(--space-xs); - font-size: 0.8rem; - font-weight: 500; +.hero-card::after { + content: ""; + position: absolute; + inset: 0; + background: + linear-gradient(125deg, transparent 20%, rgba(255, 255, 255, 0.04) 20%, transparent 40%), + linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02)); + pointer-events: none; } -.required { - color: var(--accent-color); +.eyebrow { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.35rem 0.7rem; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + color: var(--accent-hover); + font-size: 0.72rem; + letter-spacing: 0.16em; + text-transform: uppercase; } -.form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-md); +.header h1 { + margin: 12px 0 0; + font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; + font-size: 2.35rem; + line-height: 1; + letter-spacing: -0.03em; } -/* Service Indicator */ -.service-indicator { +.status-cluster { display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 16px; +} + +.service-indicator, +.launcher-indicator { + display: inline-flex; align-items: center; gap: 8px; - margin-top: var(--space-sm); - font-size: 0.8rem; + padding: 9px 12px; + border-radius: 999px; + font-size: 0.82rem; + background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); - background: rgba(255, 255, 255, 0.05); - padding: 4px 8px; - border-radius: 12px; - width: fit-content; + border: 1px solid rgba(255, 255, 255, 0.07); +} + +.launcher-indicator.managed { + color: var(--accent-hover); + background: rgba(255, 138, 61, 0.12); } .status-dot { - width: 8px; - height: 8px; + width: 9px; + height: 9px; border-radius: 50%; - background-color: var(--error); - transition: background-color 0.3s; - box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); + background: var(--error); + box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.5); +} + +.service-indicator.online { + color: var(--success); + background: var(--success-soft); } .service-indicator.online .status-dot { - background-color: var(--success); - box-shadow: 0 0 4px rgba(16, 185, 129, 0.4); + background: var(--success); + animation: pulse-green 2s infinite; } -.service-indicator.online { - color: var(--success); - background: rgba(16, 185, 129, 0.1); +@keyframes pulse-green { + 0% { box-shadow: 0 0 0 0 rgba(57, 208, 164, 0.45); } + 70% { box-shadow: 0 0 0 10px rgba(57, 208, 164, 0); } + 100% { box-shadow: 0 0 0 0 rgba(57, 208, 164, 0); } +} + +.summary-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.summary-card { + padding: 16px; + border-radius: var(--radius-md); + background: linear-gradient(180deg, rgba(20, 36, 58, 0.92), rgba(10, 20, 35, 0.9)); +} + +.summary-label { + display: block; + color: var(--text-muted); + font-size: 0.72rem; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.summary-card strong { + display: block; + margin-top: 8px; + font-size: 1.05rem; + font-weight: 700; +} + +.config-form { + display: flex; + flex-direction: column; + gap: 16px; + min-height: 0; +} + +.lock-banner { + padding: 14px 16px; + border-radius: var(--radius-md); + border: 1px solid rgba(255, 138, 61, 0.22); + background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(255, 138, 61, 0.05)); +} + +.lock-banner-label { + display: block; + color: var(--accent-hover); + font-size: 0.76rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.control-surface { + display: flex; + flex-direction: column; + gap: 18px; + padding: 18px; + border-radius: var(--radius-lg); + background: + linear-gradient(180deg, rgba(11, 22, 39, 0.94), rgba(7, 16, 30, 0.96)); +} + +.form-section { + padding: 16px; + border-radius: var(--radius-md); + background: linear-gradient(180deg, rgba(16, 31, 51, 0.82), rgba(8, 18, 31, 0.86)); + border: 1px solid rgba(255, 255, 255, 0.04); +} + +.section-header { + margin-bottom: 12px; +} + +.section-tag { + display: inline-flex; + color: var(--accent-hover); + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.section-header h2 { + margin: 8px 0 0; + font-size: 1.05rem; + line-height: 1.2; +} + +.form-row { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; +} + +.form-group + .form-group, +.form-row + .form-row, +.runtime-toggle-row, +.form-section .form-group { + margin-top: 12px; +} + +.form-group label { + display: block; + margin-bottom: 7px; + color: var(--text-secondary); + font-size: 0.79rem; + font-weight: 600; + letter-spacing: 0.02em; +} + +.required { + color: var(--accent-color); } input[type="text"], input[type="number"], input[type="password"] { width: 100%; - background-color: var(--bg-input); + min-height: 46px; + padding: 0.78rem 0.9rem; border: 1px solid transparent; - border-radius: var(--radius); - padding: 0.6rem 0.75rem; + border-radius: 14px; + background: var(--bg-input); color: var(--text-primary); - font-size: 0.9rem; - transition: border-color 0.2s, box-shadow 0.2s; + transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, opacity 0.2s; +} + +input::placeholder { + color: rgba(143, 167, 200, 0.52); } input:focus { outline: none; - border-color: var(--accent-color); - box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); + border-color: rgba(255, 138, 61, 0.55); + box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.14); +} + +input:disabled, +button:disabled { + cursor: not-allowed; +} + +input:disabled { + background: var(--bg-input-disabled); + color: rgba(239, 246, 255, 0.6); + border-color: rgba(255, 255, 255, 0.03); } -/* Path Input Group */ .path-input-group { - display: flex; - gap: var(--space-sm); - transition: all 0.2s; - border: 2px solid transparent; /* Reserve space for border */ - border-radius: var(--radius); + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 10px; + border-radius: 18px; + transition: border-color 0.2s, background-color 0.2s, transform 0.2s; } .path-input-group.drag-over { - border: 2px dashed var(--accent-color); - background-color: rgba(59, 130, 246, 0.1); - padding: 4px; /* Add padding to contain the inputs visually inside the dashed area */ - margin: -4px; /* Negate padding to prevent layout shift */ + background: rgba(255, 138, 61, 0.08); + outline: 1px dashed rgba(255, 138, 61, 0.45); + outline-offset: 6px; +} + +.browse-btn, +.launch-btn, +.toggle-visibility, +.log-tab, +.clear-btn { + transition: transform 0.16s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .browse-btn { - background-color: var(--bg-input); - border: 1px solid var(--border-color); + min-width: 96px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 14px; + background: var(--bg-card-strong); color: var(--text-primary); - padding: 0 0.75rem; - border-radius: var(--radius); - cursor: pointer; - font-size: 0.85rem; - white-space: nowrap; - transition: background-color 0.2s; } -.browse-btn:hover { - background-color: #475569; +.browse-btn:hover:not(:disabled) { + background: rgba(255, 138, 61, 0.15); + border-color: rgba(255, 138, 61, 0.25); + transform: translateY(-1px); } -/* Toggle Visibility Button */ .input-with-toggle { position: relative; - display: flex; } .toggle-visibility { position: absolute; - right: 0; - top: 0; - bottom: 0; - background: transparent; + top: 5px; + right: 5px; + bottom: 5px; + width: 42px; border: none; - cursor: pointer; - padding: 0 0.75rem; - font-size: 1rem; - display: flex; + border-radius: 12px; + background: transparent; + color: var(--text-secondary); +} + +.toggle-visibility:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.05); + color: var(--text-primary); +} + +.runtime-toggle-row { + margin-top: 16px; +} + +.toggle-card { + display: grid; + grid-template-columns: auto auto minmax(0, 1fr); align-items: center; - opacity: 0.6; - transition: opacity 0.2s; + gap: 12px; + padding: 14px; + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.03); + cursor: pointer; +} + +.toggle-card input { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.toggle-card.disabled { + opacity: 0.58; + cursor: not-allowed; +} + +.toggle-indicator { + width: 44px; + height: 24px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.12); + position: relative; } -.toggle-visibility:hover { - opacity: 1; +.toggle-indicator::after { + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 18px; + height: 18px; + border-radius: 50%; + background: #fff; + transition: transform 0.2s ease; +} + +.toggle-card input:checked + .toggle-indicator { + background: rgba(255, 138, 61, 0.55); +} + +.toggle-card input:checked + .toggle-indicator::after { + transform: translateX(20px); +} + +.toggle-copy strong { + display: block; + font-size: 0.92rem; +} + +.console-port-stack { + display: flex; + flex-direction: column; + gap: 10px; } -/* Checkbox */ -.checkbox-group { +.console-bind-inline { display: flex; align-items: center; - gap: var(--space-sm); + justify-content: space-between; + gap: 12px; + padding: 12px 14px; + border-radius: 14px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.06); } -.checkbox-group input { - margin: 0; +.console-bind-label { + color: var(--text-secondary); + font-size: 0.74rem; + letter-spacing: 0.12em; + text-transform: uppercase; } -.checkbox-group label { - margin: 0; - cursor: pointer; +.console-bind-inline strong { + font-size: 0.92rem; + word-break: break-all; + text-align: right; +} + +.form-actions { + display: flex; + flex-direction: column; + gap: 10px; } -/* Buttons */ .launch-btn { - background-color: var(--accent-color); - color: white; + width: 100%; + min-height: 54px; border: none; - border-radius: var(--radius); - padding: 0.75rem; - font-weight: 600; + border-radius: 18px; + background: linear-gradient(135deg, var(--accent-color), #ffb066); + color: #0e1726; font-size: 1rem; - cursor: pointer; - transition: background-color 0.2s, transform 0.1s; - width: 100%; + font-weight: 800; + letter-spacing: 0.02em; } .launch-btn:hover:not(:disabled) { - background-color: var(--accent-hover); + transform: translateY(-1px); + background: linear-gradient(135deg, var(--accent-hover), #ffb777); } -.launch-btn:active:not(:disabled) { - transform: translateY(1px); +.stop-btn { + background: linear-gradient(135deg, #ff7676, #ff5a5a); + color: #fff; } -.launch-btn:disabled { - opacity: 0.5; - cursor: not-allowed; +.stop-btn:hover:not(:disabled) { + background: linear-gradient(135deg, #ff6666, #ef4444); } -.stop-btn { - background-color: var(--error); +.launch-btn:disabled { + opacity: 0.58; } -.stop-btn:hover:not(:disabled) { - background-color: #dc2626; /* Darker red */ +.field-hint, +.error-message { + padding: 12px 14px; + border-radius: 14px; + font-size: 0.84rem; + line-height: 1.5; } -/* Status */ -.status { - margin-top: auto; - padding: var(--space-md); - background-color: rgba(16, 185, 129, 0.1); - border: 1px solid rgba(16, 185, 129, 0.2); - border-radius: var(--radius); - color: var(--success); - font-size: 0.85rem; - text-align: center; +.field-hint { + color: var(--text-secondary); + background: rgba(255, 255, 255, 0.04); } -.status.hidden { - display: none; +.error-message { + color: #ffd3d3; + background: var(--error-soft); + border: 1px solid rgba(255, 107, 107, 0.16); } -/* Toast Notifications */ - .toast-container { - position: fixed; - - top: 20px; - + top: 22px; left: 50%; - transform: translateX(-50%); - z-index: 1000; - display: flex; - flex-direction: column; - gap: 10px; - - pointer-events: none; /* Allow clicks through container */ - + pointer-events: none; } - - .toast-item { - pointer-events: auto; - - background: rgba(30, 41, 59, 0.95); - - backdrop-filter: blur(8px); - - color: white; - - padding: 12px 20px; - - border-radius: 8px; - - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - + min-width: 320px; display: flex; - align-items: center; - gap: 12px; - - min-width: 300px; - - animation: slideDown 0.3s ease-out forwards; - + padding: 13px 18px; border-left: 4px solid transparent; - - font-size: 0.9rem; - + border-radius: 16px; + background: rgba(10, 22, 38, 0.95); + backdrop-filter: blur(14px); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28); + animation: slideDown 0.3s ease-out forwards; } - - @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-20px); + } - from { opacity: 0; transform: translateY(-20px); } - - to { opacity: 1; transform: translateY(0); } - + to { + opacity: 1; + transform: translateY(0); + } } +.toast-item.success { + border-left-color: var(--success); +} +.toast-item.error { + border-left-color: var(--error); +} -.toast-item.success { border-left-color: var(--success); } - -.toast-item.error { border-left-color: var(--error); } - -.toast-item.info { border-left-color: var(--accent-color); } - - +.toast-item.info { + border-left-color: var(--accent-color); +} .toast-icon { - - font-weight: bold; - - font-size: 1.1rem; - + font-size: 1.05rem; + font-weight: 700; } +.toast-item.success .toast-icon { + color: var(--success); +} +.toast-item.error .toast-icon { + color: var(--error); +} -.toast-item.success .toast-icon { color: var(--success); } - -.toast-item.error .toast-icon { color: var(--error); } - -.toast-item.info .toast-icon { color: var(--accent-color); } - - +.toast-item.info .toast-icon { + color: var(--accent-color); +} .toast-text { - flex: 1; - } - - .toast-close { - - background: none; - border: none; - - color: var(--text-secondary); - - cursor: pointer; - - font-size: 1.2rem; - - padding: 0 4px; - - line-height: 1; - + background: transparent; + color: var(--text-muted); + font-size: 1.15rem; } - - .toast-close:hover { - - color: white; - -} - - - -/* Service Indicator Pulse */ - -@keyframes pulse-green { - - 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } - - 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } - - 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } - -} - - - -.service-indicator.online .status-dot { - - background-color: var(--success); - - animation: pulse-green 2s infinite; - -} - - - -/* Input Group Alignment */ - -.path-input-group { - - display: flex; - - gap: var(--space-sm); - - transition: all 0.2s; - - border: 2px solid transparent; - - border-radius: var(--radius); - - align-items: stretch; /* Ensure input and button stretch to same height */ - -} - - - -.path-input-group input { - - height: 42px; /* Fix height explicitly for alignment */ - + color: var(--text-primary); } +@media (max-width: 1180px) { + .container { + grid-template-columns: 1fr; + } + .sidebar { + order: 1; + } -.browse-btn { - - height: 42px; /* Match input height */ - - display: flex; - - align-items: center; - + .logs-section { + min-height: 420px; + } } +@media (max-width: 720px) { + .container { + padding: 14px; + gap: 14px; + } + .hero-card, + .control-surface, + .logs-section { + border-radius: 22px; + } -/* Error Message */ + .summary-grid, + .form-row { + grid-template-columns: 1fr; + } -.error-message { - - color: var(--error); + .header h1 { + font-size: 2rem; + } - font-size: 0.85rem; + .status-cluster { + flex-direction: column; + align-items: stretch; + } - margin-top: var(--space-sm); + .path-input-group { + grid-template-columns: 1fr; + } - text-align: center; - - font-weight: 500; - - animation: fadeIn 0.2s ease; + .browse-btn { + min-height: 46px; + } + .toast-item { + min-width: min(92vw, 320px); + } } - -