remove log file

feat:增加点和数字切换，减小点最大尺寸，增加range配色方案

.idea/.gitignore

@@ -1,10 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Ignored default folder with query files
-/queries/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/tauri-demo.iml" filepath="$PROJECT_DIR$/.idea/tauri-demo.iml" />
-    </modules>
-  </component>
-</project>

.idea/tauri-demo.iml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="EMPTY_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/src-tauri/src" isTestSource="false" />
-      <excludeFolder url="file://$MODULE_DIR$/src-tauri/target" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "svelte.svelte-vscode",
-    "tauri-apps.tauri-vscode",
-    "rust-lang.rust-analyzer"
-  ]
-}

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "svelte.enable-ts-plugin": true
-}

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "tauri-demo",
-  "version": "0.1.0",
+  "name": "JE-Skin",
+  "version": "0.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "tauri-demo",
-      "version": "0.1.0",
+      "name": "JE-Skin",
+      "version": "0.3.1",
       "license": "MIT",
       "dependencies": {
         "@tauri-apps/api": "^2",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "tauri-demo",
-  "version": "0.1.0",
+  "name": "JE-Skin",
+  "version": "0.3.1",
   "description": "",
   "type": "module",
   "scripts": {
@@ -9,7 +9,11 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "version:set": "node scripts/bump-version.mjs",
+    "version:patch": "node scripts/bump-version.mjs patch",
+    "version:minor": "node scripts/bump-version.mjs minor",
+    "version:major": "node scripts/bump-version.mjs major"
   },
   "license": "MIT",
   "dependencies": {

src-tauri/Cargo.lock

@@ -2,6 +2,28 @@
 # It is not intended for manual editing.
 version = 4
 
+[[package]]
+name = "JE-Skin"
+version = "0.3.1"
+dependencies = [
+ "anyhow",
+ "async-trait",
+ "chrono",
+ "crc",
+ "csv",
+ "fern",
+ "humantime",
+ "log",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-opener",
+ "tokio",
+ "tokio-serial",
+ "tokio-util",
+]
+
 [[package]]
 name = "adler2"
 version = "2.0.1"
@@ -558,6 +580,21 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "crc"
+version = "3.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5eb8a2a1cd12ab0d987a5d5e825195d372001a4094a0376319d5a0ad71c1ba0d"
+dependencies = [
+ "crc-catalog",
+]
+
+[[package]]
+name = "crc-catalog"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "19d374276b40fb8bbdee95aef7c7fa6b5316ec764510eb64b8dd0e2ed0d7e7f5"
+
 [[package]]
 name = "crc32fast"
 version = "1.5.0"
@@ -3847,27 +3884,6 @@ dependencies = [
  "walkdir",
 ]
 
-[[package]]
-name = "tauri-demo"
-version = "0.1.0"
-dependencies = [
- "anyhow",
- "async-trait",
- "chrono",
- "csv",
- "fern",
- "humantime",
- "log",
- "serde",
- "serde_json",
- "tauri",
- "tauri-build",
- "tauri-plugin-opener",
- "tokio",
- "tokio-serial",
- "tokio-util",
-]
-
 [[package]]
 name = "tauri-macros"
 version = "2.5.5"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
-name = "tauri-demo"
-version = "0.1.0"
+name = "JE-Skin"
+version = "0.3.1"
 description = "A Tauri App"
 authors = ["you"]
 edition = "2021"
@@ -32,3 +32,4 @@ log = "0.4.29"
 humantime = "2.3.0"
 csv = "1.4.0"
 chrono = "0.4.44"
+crc = "3.4.0"

src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

src-tauri/icons/android/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>

src-tauri/src/commands/file_explorer.rs

@@ -0,0 +1,208 @@
+use serde::Serialize;
+use std::collections::HashSet;
+use std::fs;
+use std::path::{Path, PathBuf};
+use std::time::UNIX_EPOCH;
+use tauri::{AppHandle, Manager};
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FileExplorerRoot {
+    pub label: String,
+    pub path: String,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FileExplorerEntry {
+    pub name: String,
+    pub path: String,
+    pub is_dir: bool,
+    pub size_bytes: Option<u64>,
+    pub modified_ms: Option<u128>,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct FileExplorerListResponse {
+    pub current_path: String,
+    pub parent_path: Option<String>,
+    pub roots: Vec<FileExplorerRoot>,
+    pub entries: Vec<FileExplorerEntry>,
+}
+
+#[tauri::command]
+pub fn file_explorer_list(
+    app: AppHandle,
+    path: Option<String>,
+    extensions: Option<Vec<String>>,
+) -> Result<FileExplorerListResponse, String> {
+    let current_path = resolve_start_path(&app, path)?;
+    let extension_filter = normalize_extensions(extensions);
+
+    let mut entries = fs::read_dir(&current_path)
+        .map_err(|err| format!("Failed to read '{}': {err}", current_path.display()))?
+        .filter_map(Result::ok)
+        .filter_map(|entry| {
+            let file_type = entry.file_type().ok()?;
+            let metadata = entry.metadata().ok();
+            let is_dir = file_type.is_dir();
+            let path = entry.path();
+
+            if !is_dir && !extension_filter.is_empty() {
+                let extension = path
+                    .extension()
+                    .and_then(|ext| ext.to_str())
+                    .map(|ext| ext.to_ascii_lowercase())
+                    .unwrap_or_default();
+                if !extension_filter.contains(&extension) {
+                    return None;
+                }
+            }
+
+            let name = entry.file_name().to_string_lossy().to_string();
+            let size_bytes = if is_dir {
+                None
+            } else {
+                metadata.as_ref().map(|value| value.len())
+            };
+            let modified_ms = metadata
+                .as_ref()
+                .and_then(|value| value.modified().ok())
+                .and_then(|value| value.duration_since(UNIX_EPOCH).ok())
+                .map(|value| value.as_millis());
+
+            Some(FileExplorerEntry {
+                name,
+                path: path.display().to_string(),
+                is_dir,
+                size_bytes,
+                modified_ms,
+            })
+        })
+        .collect::<Vec<_>>();
+
+    entries.sort_by(|left, right| {
+        if left.is_dir != right.is_dir {
+            return right.is_dir.cmp(&left.is_dir);
+        }
+
+        left.name
+            .to_ascii_lowercase()
+            .cmp(&right.name.to_ascii_lowercase())
+    });
+
+    Ok(FileExplorerListResponse {
+        current_path: current_path.display().to_string(),
+        parent_path: current_path.parent().map(|parent| parent.display().to_string()),
+        roots: collect_roots(&app),
+        entries,
+    })
+}
+
+fn normalize_extensions(extensions: Option<Vec<String>>) -> HashSet<String> {
+    extensions
+        .unwrap_or_default()
+        .into_iter()
+        .map(|value| value.trim().trim_start_matches('.').to_ascii_lowercase())
+        .filter(|value| !value.is_empty())
+        .collect()
+}
+
+fn resolve_start_path(app: &AppHandle, raw_path: Option<String>) -> Result<PathBuf, String> {
+    if let Some(value) = raw_path {
+        let trimmed = value.trim();
+        if trimmed.is_empty() {
+            return resolve_default_path(app);
+        }
+
+        let mut candidate = PathBuf::from(trimmed);
+        if candidate.is_relative() {
+            candidate = std::env::current_dir()
+                .map_err(|err| format!("Failed to read current dir: {err}"))?
+                .join(candidate);
+        }
+
+        if !candidate.exists() {
+            return Err(format!("Path does not exist: {}", candidate.display()));
+        }
+
+        if candidate.is_file() {
+            return candidate
+                .parent()
+                .map(|parent| parent.to_path_buf())
+                .ok_or_else(|| format!("No parent directory for {}", candidate.display()));
+        }
+
+        return Ok(candidate);
+    }
+
+    resolve_default_path(app)
+}
+
+fn resolve_default_path(app: &AppHandle) -> Result<PathBuf, String> {
+    if let Ok(path) = app.path().desktop_dir() {
+        return Ok(path);
+    }
+    if let Ok(path) = app.path().document_dir() {
+        return Ok(path);
+    }
+    if let Ok(path) = app.path().download_dir() {
+        return Ok(path);
+    }
+    if let Ok(path) = app.path().home_dir() {
+        return Ok(path);
+    }
+
+    std::env::current_dir().map_err(|err| format!("Failed to resolve default path: {err}"))
+}
+
+fn collect_roots(app: &AppHandle) -> Vec<FileExplorerRoot> {
+    let mut roots = Vec::new();
+    let mut seen = HashSet::new();
+
+    let mut push_root = |label: &str, path: PathBuf| {
+        let normalized = path.display().to_string();
+        if normalized.is_empty() || !Path::new(&normalized).exists() {
+            return;
+        }
+
+        if seen.insert(normalized.clone()) {
+            roots.push(FileExplorerRoot {
+                label: label.to_string(),
+                path: normalized,
+            });
+        }
+    };
+
+    if let Ok(path) = app.path().desktop_dir() {
+        push_root("Desktop", path);
+    }
+    if let Ok(path) = app.path().document_dir() {
+        push_root("Documents", path);
+    }
+    if let Ok(path) = app.path().download_dir() {
+        push_root("Downloads", path);
+    }
+    if let Ok(path) = app.path().home_dir() {
+        push_root("Home", path);
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+        for letter in b'A'..=b'Z' {
+            let drive = format!("{}:\\", letter as char);
+            let drive_path = PathBuf::from(&drive);
+            if drive_path.exists() {
+                push_root(&format!("{}:", letter as char), drive_path);
+            }
+        }
+    }
+
+    #[cfg(not(target_os = "windows"))]
+    {
+        push_root("Root", PathBuf::from("/"));
+    }
+
+    roots
+}

src-tauri/src/commands/mod.rs

@@ -1,2 +1,3 @@
+pub mod file_explorer;
 pub mod serial;
 pub mod window;

src-tauri/src/commands/serial.rs

@@ -1,18 +1,27 @@
-use crate::serial_core::codecs::test::{export_recording_csv, TestCodec, TestCsvImporter, TestHandler};
+use crate::serial_core::codecs::tactile_a::{
+    export_recording_csv, TactileACodec, TactileACsvImporter, TactileAHandler,
+};
 use crate::serial_core::error::SerialError;
 use crate::serial_core::record::CsvImporter;
-use crate::serial_core::{TestRecording, serial};
+use crate::serial_core::serial::{PollMode, TactileAPollRequester};
+use crate::serial_core::{serial, TactileARecording};
 use log::info;
 use serde::Serialize;
 use std::fs::File;
 use std::io::Cursor;
+use std::path::{Path, PathBuf};
 use std::sync::{Arc, Mutex};
-use std::time::{Instant, SystemTime, UNIX_EPOCH};
+use std::time::{Duration, Instant, SystemTime, UNIX_EPOCH};
 use tauri::{async_runtime::JoinHandle, AppHandle, Manager, State};
 use tokio_serial::{available_ports, SerialPortBuilderExt};
 use tokio_util::sync::CancellationToken;
 
-type SharedTestRecording = Arc<Mutex<TestRecording>>;
+const DEFAULT_TACTILE_COLS: usize = 7;
+const DEFAULT_TACTILE_ROWS: usize = 12;
+const DEFAULT_TACTILE_POLL_INTERVAL_MS: u64 = 10;
+const DEFAULT_TACTILE_REPLY_TIMEOUT_MS: u64 = 140;
+
+type SharedTactileRecording = Arc<Mutex<TactileARecording>>;
 
 
 #[derive(Serialize)]
@@ -48,17 +57,58 @@ pub struct SerialImportResponse {
     pub message: String,
 }
 
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SerialRecordStateResponse {
+    pub has_data: bool,
+    pub frame_count: usize,
+}
+
 struct SerialSession {
     port: String,
     cancel: CancellationToken,
     task: JoinHandle<()>,
-    current_record: SharedTestRecording,
+    current_record: SharedTactileRecording,
 }
 
 #[derive(Default)]
 pub struct SerialConnectionState {
     session: Mutex<Option<SerialSession>>,
-    last_record: Mutex<Option<SharedTestRecording>>
+    last_record: Mutex<Option<SharedTactileRecording>>
+}
+
+pub async fn shutdown_active_session(
+    state: &SerialConnectionState,
+) -> Result<Option<(String, SharedTactileRecording)>, SerialError> {
+    let session = {
+        let mut guard = state.session.lock().map_err(|_| SerialError::StateError)?;
+        guard.take()
+    };
+
+    let Some(SerialSession {
+        port,
+        cancel,
+        task,
+        current_record,
+    }) = session else {
+        return Ok(None);
+    };
+
+    cancel.cancel();
+    let _ = task.await;
+
+    let frame_count = current_record
+        .lock()
+        .map(|record| record.frames.len())
+        .unwrap_or(0);
+
+    info!("last_record has {} frames", frame_count);
+
+    if let Ok(mut last_record) = state.last_record.lock() {
+        *last_record = Some(current_record.clone());
+    }
+
+    Ok(Some((port, current_record)))
 }
 
 #[tauri::command]
@@ -91,22 +141,28 @@ pub async fn serial_connect(
     }
 
     let cancel = CancellationToken::new();
-    let current_record = Arc::new(Mutex::new(TestRecording::new()));
+    let current_record = Arc::new(Mutex::new(TactileARecording::new()));
     let task_record = current_record.clone();
     let task_cancel = cancel.clone();
     let task_app = app.clone();
     let task_port_name = port_name.clone();
 
-    let port = tokio_serial::new(&port_name, 115200)
+    let port = tokio_serial::new(&port_name, 921600)
         .open_native_async()
         .map_err(|_| SerialError::OpenError)?;
     let session_started_at = Instant::now();
 
     let task = tauri::async_runtime::spawn(async move {
-        let codec = TestCodec::new();
-        let handler = TestHandler;
+        let codec = TactileACodec::new(DEFAULT_TACTILE_COLS, DEFAULT_TACTILE_ROWS);
+        let handler = TactileAHandler;
+        let poll_mode = PollMode::Enabled(Box::new(TactileAPollRequester::new(
+            Duration::from_millis(DEFAULT_TACTILE_POLL_INTERVAL_MS),
+            DEFAULT_TACTILE_COLS,
+            DEFAULT_TACTILE_ROWS,
+            Duration::from_millis(DEFAULT_TACTILE_REPLY_TIMEOUT_MS),
+        )));
 
-        if let Err(error) = serial::run_serial(
+        if let Err(error) = serial::run_serial_with_poll(
             task_app.clone(),
             port,
             codec,
@@ -114,6 +170,7 @@ pub async fn serial_connect(
             session_started_at,
             task_record.clone(),
             task_cancel,
+            poll_mode,
         )
         .await
         {
@@ -167,17 +224,7 @@ pub async fn serial_connect(
 pub async fn serial_disconnect(
     state: State<'_, SerialConnectionState>,
 ) -> Result<SerialConnectResponse, SerialError> {
-    let session = {
-        let mut guard = state.session.lock().map_err(|_| SerialError::StateError)?;
-        guard.take()
-    };
-
-    let Some(SerialSession {
-        port,
-        cancel,
-        task,
-        current_record,
-    }) = session
+    let Some((port, _current_record)) = shutdown_active_session(&state).await?
     else {
         return Ok(SerialConnectResponse {
             port: String::new(),
@@ -186,19 +233,6 @@ pub async fn serial_disconnect(
         });
     };
 
-    cancel.cancel();
-    let _ = task.await;
-    let frame_count = current_record.lock().map(|record| {
-        record.frames.len()
-    }).unwrap_or(0);
-
-    info!("last_record has {} frames", frame_count);
-
-    if let Ok(mut last_record) = state.last_record.lock() {
-        *last_record = Some(current_record);
-    }
-
-
     Ok(SerialConnectResponse {
         port,
         connected: false,
@@ -211,20 +245,6 @@ pub fn serial_export_csv(
     app: AppHandle,
     state: State<'_, SerialConnectionState>,
 ) -> Result<SerialExportResponse, SerialError> {
-    let current_record = {
-        let session = state.session.lock().map_err(|_| SerialError::StateError)?;
-        session
-            .as_ref()
-            .map(|current_session| current_session.current_record.clone())
-    };
-
-    let record = if let Some(recording) = current_record {
-        recording
-    } else {
-        let last_record = state.last_record.lock().map_err(|_| SerialError::StateError)?;
-        last_record.clone().ok_or(SerialError::NoRecordedData)?
-    };
-
     let mut output_dir = match app.path().desktop_dir() {
         Ok(path) => path,
         Err(_) => std::env::current_dir().map_err(|_| SerialError::ExportError)?,
@@ -236,17 +256,8 @@ pub fn serial_export_csv(
         .unwrap_or_default();
 
     output_dir.push(format!("joyson_export_{timestamp}.csv"));
-    let mut file = File::create(&output_dir).map_err(|_| SerialError::ExportError)?;
-
-    let frame_count = {
-        let recording = record.lock().map_err(|_| SerialError::StateError)?;
-        if recording.frames.is_empty() {
-            return Err(SerialError::NoRecordedData);
-        }
-
-        export_recording_csv(&recording, &mut file).map_err(|_| SerialError::ExportError)?;
-        recording.frames.len()
-    };
+    let record = resolve_record_for_export(&state)?;
+    let frame_count = write_record_to_csv(record, &output_dir)?;
 
     let path = output_dir.display().to_string();
     info!("csv exported to {path}, frame_count={frame_count}");
@@ -258,9 +269,40 @@ pub fn serial_export_csv(
     })
 }
 
+#[tauri::command]
+pub fn serial_has_record_data(
+    state: State<'_, SerialConnectionState>,
+) -> Result<SerialRecordStateResponse, SerialError> {
+    let frame_count = snapshot_record_frame_count(&state)?;
+
+    Ok(SerialRecordStateResponse {
+        has_data: frame_count > 0,
+        frame_count,
+    })
+}
+
+#[tauri::command]
+pub fn serial_export_csv_to_path(
+    file_path: String,
+    state: State<'_, SerialConnectionState>,
+) -> Result<SerialExportResponse, SerialError> {
+    let output_path = resolve_export_path(file_path)?;
+    let record = resolve_record_for_export(&state)?;
+    let frame_count = write_record_to_csv(record, &output_path)?;
+    let path = output_path.display().to_string();
+
+    info!("csv exported to {path}, frame_count={frame_count}");
+
+    Ok(SerialExportResponse {
+        path,
+        frame_count,
+        message: "exported".to_string(),
+    })
+}
+
 #[tauri::command]
 pub fn serial_import_csv(file_name: String, csv_content: String) -> Result<SerialImportResponse, SerialError> {
-    let mut importer = TestCsvImporter::new(file_name.as_str());
+    let mut importer = TactileACsvImporter::new(file_name.as_str());
     let packets = importer
         .load(Cursor::new(csv_content.into_bytes()))
         .map_err(|_| SerialError::ImportError)?;
@@ -287,3 +329,128 @@ pub fn serial_import_csv(file_name: String, csv_content: String) -> Result<Seria
         message: "imported".to_string(),
     })
 }
+
+#[tauri::command]
+pub fn serial_import_csv_from_path(file_path: String) -> Result<SerialImportResponse, SerialError> {
+    let path = resolve_import_path(file_path)?;
+    let file_name = path
+        .file_name()
+        .and_then(|value| value.to_str())
+        .map(ToOwned::to_owned)
+        .unwrap_or_else(|| "import.csv".to_string());
+
+    let bytes = std::fs::read(&path).map_err(|_| SerialError::ImportError)?;
+    let csv_content = String::from_utf8_lossy(&bytes).to_string();
+    serial_import_csv(file_name, csv_content)
+}
+
+fn resolve_record_for_export(
+    state: &State<'_, SerialConnectionState>,
+) -> Result<SharedTactileRecording, SerialError> {
+    let current_record = {
+        let session = state.session.lock().map_err(|_| SerialError::StateError)?;
+        session
+            .as_ref()
+            .map(|current_session| current_session.current_record.clone())
+    };
+
+    if let Some(recording) = current_record {
+        return Ok(recording);
+    }
+
+    let last_record = state.last_record.lock().map_err(|_| SerialError::StateError)?;
+    last_record.clone().ok_or(SerialError::NoRecordedData)
+}
+
+fn snapshot_record_frame_count(
+    state: &State<'_, SerialConnectionState>,
+) -> Result<usize, SerialError> {
+    let current_record = {
+        let session = state.session.lock().map_err(|_| SerialError::StateError)?;
+        session
+            .as_ref()
+            .map(|current_session| current_session.current_record.clone())
+    };
+
+    if let Some(record) = current_record {
+        return record
+            .lock()
+            .map(|recording| recording.frames.len())
+            .map_err(|_| SerialError::StateError);
+    }
+
+    let last_record = state.last_record.lock().map_err(|_| SerialError::StateError)?;
+    let Some(record) = last_record.as_ref() else {
+        return Ok(0);
+    };
+
+    record
+        .lock()
+        .map(|recording| recording.frames.len())
+        .map_err(|_| SerialError::StateError)
+}
+
+fn write_record_to_csv(
+    record: SharedTactileRecording,
+    output_path: &Path,
+) -> Result<usize, SerialError> {
+    if let Some(parent) = output_path.parent() {
+        if !parent.exists() {
+            return Err(SerialError::ExportError);
+        }
+    }
+
+    let mut file = File::create(output_path).map_err(|_| SerialError::ExportError)?;
+    let frame_count = {
+        let recording = record.lock().map_err(|_| SerialError::StateError)?;
+        if recording.frames.is_empty() {
+            return Err(SerialError::NoRecordedData);
+        }
+
+        export_recording_csv(&recording, &mut file).map_err(|_| SerialError::ExportError)?;
+        recording.frames.len()
+    };
+
+    Ok(frame_count)
+}
+
+fn resolve_export_path(raw_path: String) -> Result<PathBuf, SerialError> {
+    let trimmed = raw_path.trim();
+    if trimmed.is_empty() {
+        return Err(SerialError::ExportError);
+    }
+
+    let mut path = resolve_absolute_path(trimmed).map_err(|_| SerialError::ExportError)?;
+    if path.extension().is_none() {
+        path.set_extension("csv");
+    }
+
+    if path.file_name().is_none() {
+        return Err(SerialError::ExportError);
+    }
+
+    Ok(path)
+}
+
+fn resolve_import_path(raw_path: String) -> Result<PathBuf, SerialError> {
+    let trimmed = raw_path.trim();
+    if trimmed.is_empty() {
+        return Err(SerialError::ImportError);
+    }
+
+    let path = resolve_absolute_path(trimmed).map_err(|_| SerialError::ImportError)?;
+    if !path.exists() || !path.is_file() {
+        return Err(SerialError::ImportError);
+    }
+
+    Ok(path)
+}
+
+fn resolve_absolute_path(raw_path: &str) -> std::io::Result<PathBuf> {
+    let path = PathBuf::from(raw_path);
+    if path.is_absolute() {
+        Ok(path)
+    } else {
+        Ok(std::env::current_dir()?.join(path))
+    }
+}

src-tauri/src/commands/window.rs

@@ -1,4 +1,6 @@
-use tauri::{AppHandle, Manager, WebviewWindow};
+use super::serial::SerialConnectionState;
+use crate::commands::serial::shutdown_active_session;
+use tauri::{AppHandle, Manager, State, WebviewWindow};
 
 fn main_window(app: &AppHandle) -> Result<WebviewWindow, String> {
     app.get_webview_window("main")
@@ -25,8 +27,14 @@ pub fn win_toggle_maximize(app: AppHandle) -> Result<(), String> {
 }
 
 #[tauri::command]
-pub fn win_close(app: AppHandle) -> Result<(), String> {
-    main_window(&app)?
-        .close()
-        .map_err(|error| error.to_string())
+pub async fn win_close(
+    app: AppHandle,
+    state: State<'_, SerialConnectionState>,
+) -> Result<(), String> {
+    shutdown_active_session(&state)
+        .await
+        .map_err(|error| error.to_string())?;
+
+    app.exit(0);
+    Ok(())
 }

src-tauri/src/lib.rs

@@ -9,11 +9,15 @@ pub fn run() {
         .manage(SerialConnectionState::default())
         .plugin(tauri_plugin_opener::init())
         .invoke_handler(tauri::generate_handler![
+            commands::file_explorer::file_explorer_list,
             commands::serial::serial_enum,
             commands::serial::serial_connect,
             commands::serial::serial_disconnect,
             commands::serial::serial_export_csv,
+            commands::serial::serial_has_record_data,
+            commands::serial::serial_export_csv_to_path,
             commands::serial::serial_import_csv,
+            commands::serial::serial_import_csv_from_path,
             commands::window::win_minimize,
             commands::window::win_toggle_maximize,
             commands::window::win_close

src-tauri/src/log.rs

@@ -1,5 +1,5 @@
-use fern::colors::{Color, ColoredLevelConfig};
-use log::{debug, error, info, trace, warn};
+use fern::{Dispatch, colors::{Color, ColoredLevelConfig}};
+use log::{debug};
 use std::time::SystemTime;
 pub fn setup_logger() {
     let colors_line = ColoredLevelConfig::new()
@@ -10,7 +10,13 @@ pub fn setup_logger() {
         .trace(Color::BrightBlack);
 
     let colors_level = colors_line.info(Color::Green);
-    fern::Dispatch::new()
+    let level = if cfg!(debug_assertions) {
+        log::LevelFilter::Debug
+    } else {
+        log::LevelFilter::Info
+    };
+
+    let console_config = fern::Dispatch::new()
         .format(move |out, message, record| {
             out.finish(
                 format_args!(
@@ -26,9 +32,31 @@ pub fn setup_logger() {
                 )
             );
         })
-        .level(log::LevelFilter::Info)
-        .chain(std::io::stdout())
-        .chain(fern::DateBased::new("program.log", "%Y-%m-%d"))
+        .level(level)
+        .chain(std::io::stdout());
+        // .chain(fern::DateBased::new("program.log", "%Y-%m-%d"))
+        // .apply()
+        // .unwrap();
+
+    let file_config = fern::Dispatch::new()
+        .format(move |out, message, record| {
+            out.finish(
+                format_args!(
+                    "[{data} {level} {target}] {message}",
+                    data = humantime::format_rfc3339_seconds(SystemTime::now()),
+                    target = record.target(),
+                    level = colors_level.color(record.level()),
+                    message = message,
+                )
+            );
+        })
+        .level(level)
+        .chain(fern::DateBased::new("program.log", "%Y-%m-%d"));
+
+    Dispatch::new()
+        .level(log::LevelFilter::Debug)
+        .chain(console_config)
+        .chain(file_config)
         .apply()
         .unwrap();
 

src-tauri/src/main.rs

@@ -1,6 +1,6 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-use log::{debug, error, info, trace, warn};
+use log::debug;
 use tauri_demo_lib::log::setup_logger;
 
 fn main() {

src-tauri/src/serial_core/codecs/mod.rs

@@ -1,4 +1,5 @@
 use crate::serial_core::{frame::TestFrame, record::Recording};
 
 pub mod test;
+pub mod tactile_a;
 pub type TestRecording = Recording<TestFrame>;

src-tauri/src/serial_core/codecs/tactile_a.rs

@@ -0,0 +1,382 @@
+use crate::serial_core::error::CodecError;
+use crate::serial_core::frame::{
+    FrameHandler, TactileAFrameMetaData, TactileARepFrame, TactileAReqFrame,
+};
+use crate::serial_core::record::{write_csv, CsvExporter, CsvImporter, RecordedFrame, Recording};
+use crate::serial_core::utils::{calc_crc8_itu, elapsed_millis};
+use crate::serial_core::{
+    codec::Codec,
+    frame::{TactileAFrame, TactileAFrameStatusCode},
+};
+use async_trait::async_trait;
+use csv::StringRecord;
+use anyhow::anyhow;
+use std::io::Read;
+use log::debug;
+
+const FRAME_BUFFER_MIN_LENGTH: usize = 15;
+
+pub struct TactileACodec {
+    buffer: Vec<u8>,
+    expected_data_len: usize,
+}
+
+pub struct TactileACsvExporter {
+    channels: usize,
+}
+
+pub struct TactileACsvImporter {
+    channels: usize,
+    data_row: usize,
+    packets: Vec<TactileADataPacket>,
+}
+
+pub struct TactileAHandler;
+
+#[derive(Clone)]
+pub struct TactileADataPacket {
+    pub data: Vec<i32>,
+    pub dts_ms: u64,
+}
+
+impl From<u8> for TactileAFrameStatusCode {
+    fn from(value: u8) -> Self {
+        match value {
+            0 => TactileAFrameStatusCode::Success,
+            _ => TactileAFrameStatusCode::Failure,
+        }
+    }
+}
+
+impl TryFrom<&TactileARepFrame> for TactileADataPacket {
+    type Error = CodecError;
+    fn try_from(value: &TactileARepFrame) -> Result<TactileADataPacket, Self::Error> {
+        let data = TactileACodec::parse_data_frame(&value.payload)?;
+        let dts_ms = value.dts_ms;
+        Ok(TactileADataPacket {
+            data: data,
+            dts_ms: dts_ms,
+        })
+    }
+}
+
+impl TactileACodec {
+    pub fn new(cols: usize, rows: usize) -> TactileACodec {
+        Self {
+            buffer: Vec::new(),
+            expected_data_len: cols * rows * 2,
+        }
+    }
+
+    pub fn parse_data_frame(data: &[u8]) -> Result<Vec<i32>, CodecError> {
+        if data.len() % 2 != 0 {
+            return Err(CodecError::InvalidLength);
+        }
+
+        let vals: Vec<i32> = data
+            .chunks_exact(2)
+            .map(|chunk| {
+                let raw = u16::from_le_bytes([chunk[0], chunk[1]]) as i32;
+                if raw < 15 {
+                    0
+                } else {
+                    raw
+                }
+            })
+            .collect::<Vec<i32>>();
+
+        Ok(vals)
+    }
+
+    pub fn build_req_frame(cols: usize, rows: usize) -> anyhow::Result<TactileAFrame> {
+        let header = [0x55, 0xAA];
+        let payload_len: usize = 9;
+        let device_addr: u8 = 0x34;
+        let extend_code: u8 = 0x00;
+        let func_code: u8 = 0xFB;
+        let start_addr: u32 = 7168;
+        let except_data_len: usize = cols * rows * 2;
+        let checksum: u8 = 0;
+        Ok(TactileAFrame::Req(TactileAReqFrame {
+            meta: TactileAFrameMetaData {
+                header,
+                payload_len,
+                device_addr,
+                extend_code,
+                func_code,
+                start_addr,
+                except_data_len,
+                checksum,
+            },
+        }))
+    }
+}
+
+impl Codec<TactileAFrame> for TactileACodec {
+    fn decode(
+        &mut self,
+        input: &[u8],
+        session_started_at: std::time::Instant,
+    ) -> Result<Vec<TactileAFrame>, CodecError> {
+        self.buffer.extend_from_slice(input);
+        let mut frames: Vec<TactileAFrame> = Vec::new();
+
+        loop {
+            if self.buffer.len() < FRAME_BUFFER_MIN_LENGTH {
+                break;
+            }
+
+            let header_pos = self.buffer.windows(2).position(|w| w == [0xAA, 0x55]);
+
+            let Some(pos) = header_pos else {
+                self.buffer.clear();
+                break;
+            };
+            if pos > 0 {
+                self.buffer.drain(0..pos);
+            }
+
+            if self.buffer.len() < FRAME_BUFFER_MIN_LENGTH {
+                break;
+            }
+
+            let header = [self.buffer[0], self.buffer[1]];
+            let payload_len = u16::from_le_bytes([self.buffer[2], self.buffer[3]]) as usize;
+            let device_addr = self.buffer[4];
+            let extend_code = self.buffer[5];
+            let func_code = self.buffer[6];
+            let start_addr = u32::from_le_bytes([
+                self.buffer[7],
+                self.buffer[8],
+                self.buffer[9],
+                self.buffer[10],
+            ]);
+            let except_data_len = u16::from_le_bytes([self.buffer[11], self.buffer[12]]) as usize;
+            let status = TactileAFrameStatusCode::from(self.buffer[13]);
+            if except_data_len != self.expected_data_len {
+                debug!(
+                    "unexpected payload length: expected {}, got {}, buffer_len={}",
+                    self.expected_data_len,
+                    except_data_len,
+                    self.buffer.len()
+                );
+                self.buffer.drain(0..1);
+                continue;
+            }
+
+            let frame_length = except_data_len + FRAME_BUFFER_MIN_LENGTH;
+            if self.buffer.len() < frame_length {
+                break;
+            }
+
+            let need_check_data = self.buffer[0..14 + except_data_len].to_vec();
+            let payload = self.buffer[14..14 + except_data_len].to_vec();
+            let crc8_itu_alg = crc::Crc::<u8>::new(&crc::CRC_8_I_432_1);
+            let checksum = crc8_itu_alg.checksum(&need_check_data.as_slice());
+            if self.buffer[frame_length - 1] != checksum {
+                debug!(
+                    "checksum mismatch: expected {:02X}, got {:02X}, frame_len={}",
+                    checksum,
+                    self.buffer[frame_length - 1],
+                    frame_length
+                );
+                self.buffer.drain(0..1);
+                continue;
+            }
+            let dts_ms = elapsed_millis(session_started_at);
+            let meta: TactileAFrameMetaData = TactileAFrameMetaData {
+                header,
+                payload_len,
+                device_addr,
+                extend_code,
+                func_code,
+                start_addr,
+                except_data_len,
+                checksum,
+            };
+            frames.push(TactileAFrame::Rep({
+                TactileARepFrame {
+                    meta,
+                    status,
+                    payload,
+                    dts_ms,
+                }
+            }));
+
+            self.buffer.drain(0..frame_length);
+        }
+
+        Ok(frames)
+    }
+
+    fn encode(
+        &self,
+        frame: &TactileAFrame,
+    ) -> Result<Vec<u8>, crate::serial_core::error::CodecError> {
+        match frame {
+            TactileAFrame::Req(f) => {
+                let mut req_bytes: Vec<u8> = Vec::new();
+                req_bytes.extend_from_slice(f.meta.header.as_slice());
+                req_bytes.extend_from_slice((f.meta.payload_len as u16).to_le_bytes().as_slice());
+                req_bytes.push(f.meta.device_addr);
+                req_bytes.push(f.meta.extend_code);
+                req_bytes.push(f.meta.func_code);
+
+                req_bytes.extend_from_slice(f.meta.start_addr.to_le_bytes().as_slice());
+                req_bytes.extend_from_slice((f.meta.except_data_len as u16).to_le_bytes().as_slice());
+                let checksum = calc_crc8_itu(req_bytes.as_slice());
+                req_bytes.push(checksum);
+                Ok(req_bytes)
+            }
+            _ => {
+                Err(CodecError::InvalidFrameType)
+            }
+        }
+    }
+}
+
+#[async_trait]
+impl FrameHandler<TactileAFrame, i32> for TactileAHandler {
+    async fn on_frame(&mut self, frame: &TactileAFrame) -> anyhow::Result<Option<Vec<i32>>> {
+        match frame {
+            TactileAFrame::Rep(rep) => {
+                let vals = TactileACodec::parse_data_frame(&rep.payload)?;
+                Ok(Some(vals))
+            }
+            _ => Ok(None),
+        }
+    }
+}
+
+impl TactileACsvExporter {
+    fn new(channels: usize) -> Self {
+        TactileACsvExporter { channels }
+    }
+}
+
+impl CsvExporter<TactileARepFrame> for TactileACsvExporter {
+    type Error = CodecError;
+    fn csv_header(&self, _recording: &Recording<TactileARepFrame>) -> Vec<String> {
+        let mut header: Vec<String> = Vec::new();
+        for i in 0..self.channels {
+            header.push(format!("channel{}", i + 1));
+        }
+
+        header.push("dts".to_string());
+        header.push("summary".to_string());
+        header
+    }
+
+    fn csv_row(
+        &self,
+        item: &RecordedFrame<TactileARepFrame>,
+    ) -> anyhow::Result<Vec<String>> {
+        let packet = TactileADataPacket::try_from(&item.frame)?;
+        let summary: i32 = packet.data.iter().sum();
+        let mut row: Vec<String> = packet.data.iter().map(|x| x.to_string()).collect();
+        row.push(packet.dts_ms.to_string());
+        row.push(summary.to_string());
+        Ok(row)
+    }
+}
+
+impl CsvExporter<TactileAFrame> for TactileACsvExporter {
+    type Error = CodecError;
+
+    fn csv_header(&self, _recording: &Recording<TactileAFrame>) -> Vec<String> {
+        let mut header: Vec<String> = Vec::new();
+        for i in 0..self.channels {
+            header.push(format!("channel{}", i + 1));
+        }
+
+        header.push("dts".to_string());
+        header
+    }
+
+    fn csv_row(
+        &self,
+        item: &RecordedFrame<TactileAFrame>,
+    ) -> anyhow::Result<Vec<String>> {
+        let rep = match &item.frame {
+            TactileAFrame::Rep(rep) => rep,
+            TactileAFrame::Req(_) => return Err(anyhow!("request frame cannot be exported to csv row")),
+        };
+
+        let packet = TactileADataPacket::try_from(rep)?;
+        let mut row: Vec<String> = packet.data.iter().map(|x| x.to_string()).collect();
+        row.push(packet.dts_ms.to_string());
+        Ok(row)
+    }
+}
+
+impl TactileACsvImporter {
+    pub fn new(_path: &str) -> TactileACsvImporter {
+        Self {
+            channels: 0,
+            data_row: 0,
+            packets: Vec::new(),
+        }
+    }
+
+    fn parse_record(&mut self, record: StringRecord) -> anyhow::Result<TactileADataPacket> {
+        if self.channels == 0 {
+            return Err(anyhow!("csv header is missing channel columns"));
+        }
+
+        if record.len() < self.channels + 1 {
+            return Err(anyhow!("csv row has insufficient columns"));
+        }
+
+        let mut data = Vec::with_capacity(self.channels);
+        for index in 0..self.channels {
+            let cell = record.get(index).ok_or_else(|| anyhow!("missing channel cell"))?;
+            data.push(cell.parse::<i32>()?);
+        }
+
+        let dts_cell = record
+            .get(self.channels)
+            .ok_or_else(|| anyhow!("missing dts cell"))?;
+        let dts_ms = dts_cell.parse::<u64>()?;
+
+        Ok(TactileADataPacket {
+            data: data,
+            dts_ms: dts_ms,
+        })
+    }
+}
+
+impl CsvImporter<TactileADataPacket> for TactileACsvImporter {
+    fn load<R: Read>(&mut self, reader: R) -> anyhow::Result<Vec<TactileADataPacket>> {
+        let mut rdr = csv::Reader::from_reader(reader);
+        let headers = rdr.headers()?.clone();
+        self.channels = headers.len().saturating_sub(1);
+        self.data_row = 0;
+        self.packets.clear();
+
+        for record in rdr.records() {
+            let record = record?;
+            let packet = self.parse_record(record)?;
+            self.packets.push(packet);
+            self.data_row += 1;
+        }
+
+        Ok(self.packets.clone())
+    }
+}
+
+pub fn export_recording_csv<W>(recording: &Recording<TactileAFrame>, writer: W) -> anyhow::Result<()>
+where
+    W: std::io::Write,
+{
+    let channel_nb = recording
+        .frames
+        .iter()
+        .find_map(|frame| match &frame.frame {
+            TactileAFrame::Rep(rep) => Some(rep.payload.len() / 2),
+            TactileAFrame::Req(_) => None,
+        })
+        .unwrap_or(0);
+
+    let exporter = TactileACsvExporter::new(channel_nb);
+    write_csv(recording, &exporter, writer)
+}

src-tauri/src/serial_core/codecs/test.rs

@@ -1,13 +1,15 @@
 use std::io::Read;
 use std::time::Instant;
-use crate::serial_core::frame::{crc8, usize_to_u16_be_bytes, FrameHandler};
+use crate::serial_core::frame::{FrameHandler};
 use crate::serial_core::{codec::Codec, error::CodecError, frame::TestFrame};
 use anyhow::anyhow;
 use async_trait::async_trait;
-use chrono::Local;
 use csv::StringRecord;
 use crate::serial_core::record::{write_csv, CsvExporter, CsvImporter, RecordedFrame, Recording};
-
+use crate::serial_core::utils::{
+    elapsed_millis,
+    usize_to_u16_be_bytes
+};
 pub struct TestCodec {
     buffer: Vec<u8>,
 }
@@ -52,7 +54,9 @@ impl Codec<TestFrame> for TestCodec {
                 break;
             }
             let payload = self.buffer[5..5 + length].to_vec();
-            let checksum = crc8(payload.as_slice());
+            // let checksum = crc8(payload.as_slice());
+            let crc8_alg = crc::Crc::<u8>::new(&crc::CRC_8_SMBUS);
+            let checksum = crc8_alg.checksum(payload.as_slice());
             if self.buffer[frame_length - 1] != checksum {
                 self.buffer.drain(0..1);
                 continue;
@@ -112,10 +116,6 @@ fn parse_data_frame(data: &[u8]) -> Result<Vec<i32>, CodecError> {
     Ok(vals)
 }
 
-fn elapsed_millis(start_at: Instant) -> u64 {
-    start_at.elapsed().as_millis() as u64
-}
-
 pub struct TestCsvExporter;
 pub struct TestCsvImporter {
     channels: usize,
@@ -231,9 +231,7 @@ pub fn export_recording_csv<W>(recording: &Recording<TestFrame>, writer: W) -> a
 where
     W: std::io::Write,
 {
-    let now = Local::now();
-    let filename = format!("joyson_{}", now.format("%Y%m%d_%H%M%S"));
-    write_csv(recording, &TestCsvExporter, &filename)
+    write_csv(recording, &TestCsvExporter, writer)
 }
 
 #[cfg(test)]

src-tauri/src/serial_core/error.rs

@@ -35,6 +35,7 @@ pub enum CodecError {
     InvalidHeader,
     InvalidTail,
     InvalidLength,
+    InvalidFrameType,
     PayloadTooLarge,
 }
 
@@ -44,6 +45,7 @@ impl fmt::Display for CodecError {
             CodecError::InvalidHeader => write!(f, "Invalid Header"),
             CodecError::InvalidTail => write!(f, "Invalid Tail"),
             CodecError::InvalidLength => write!(f, "Invalid Length"),
+            CodecError::InvalidFrameType => write!(f, "Invalid Frame Type"),
             CodecError::PayloadTooLarge => write!(f, "Payload too large"),
         }
     }

src-tauri/src/serial_core/frame.rs

@@ -10,34 +10,48 @@ pub struct TestFrame {
     pub dts_ms: u64
 }
 
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct TactileAFrameMetaData {
+    pub header: [u8; 2],
+    pub payload_len: usize,
+    pub device_addr: u8,
+    pub extend_code: u8,
+    pub func_code: u8,
+    pub start_addr: u32,
+    pub except_data_len: usize,
+    // pub status: u8,
+    // pub payload_data: Vec<u8>,
+    pub checksum: u8,
+    // pub dts_ms: u64,
+}
 
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct TactileAReqFrame {
+    pub meta: TactileAFrameMetaData,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)] 
+pub struct TactileARepFrame {
+    pub meta: TactileAFrameMetaData,
+    pub status: TactileAFrameStatusCode,
+    pub payload: Vec<u8>,
+    pub dts_ms: u64
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum TactileAFrameStatusCode {
+    Success,
+    Failure
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum TactileAFrame {
+    Req(TactileAReqFrame),
+    Rep(TactileARepFrame)
+}
 
 #[async_trait]
 pub trait FrameHandler<F, T>: Send {
     async fn on_frame(&mut self, frame: &F) -> Result<Option<Vec<T>>>;
 }
 
-pub fn usize_to_u16_be_bytes(n: usize) -> [u8; 2] {
-    (n as u16).to_be_bytes()
-}
-
-pub fn usize_to_u16_le_bytes(n: usize) -> [u8; 2] {
-    (n as u16).to_be_bytes()
-}
-
-pub fn crc8(data: &[u8]) -> u8 {
-    let mut crc: u8 = 0x00;
-
-    for &byte in data {
-        crc ^= byte;
-        for _ in 0..8 {
-            if (crc & 0x80) != 0 {
-                crc = (crc << 1) ^ 0x07;
-            } else {
-                crc <<= 1;
-            }
-        }
-    }
-
-    crc
-}

src-tauri/src/serial_core/mod.rs

@@ -1,4 +1,7 @@
-use crate::serial_core::{frame::TestFrame, record::Recording};
+use crate::serial_core::{
+    frame::{TactileAFrame, TestFrame},
+    record::Recording,
+};
 
 pub mod codec;
 pub mod codecs;
@@ -7,8 +10,10 @@ pub mod frame;
 pub mod model;
 pub mod serial;
 pub mod record;
+pub mod utils;
 
 pub type TestRecording = Recording<TestFrame>;
+pub type TactileARecording = Recording<TactileAFrame>;
 
 pub struct SerialConnection {
     pub port: String,

src-tauri/src/serial_core/record.rs

@@ -1,8 +1,3 @@
-use std::fs::{write, File};
-use std::io;
-use anyhow::{Result, anyhow};
-use csv::Reader;
-
 #[derive(Clone)]
 pub struct FrameTiming {
     pub pts_ms: Option<u64>,
@@ -38,20 +33,17 @@ pub trait CsvImporter<P> {
     fn load<R: std::io::Read>(&mut self, reader: R) -> anyhow::Result<Vec<P>>;
 }
 
-pub fn write_csv<F, E>(
+pub fn write_csv<F, E, W>(
     recording: &Recording<F>,
     exporter: &E,
-    path: &str
-    // mut writer: W,
+    writer: W,
 ) -> anyhow::Result<()>
 where
     E: CsvExporter<F>,
-    // W: std::io::Write
+    W: std::io::Write,
 {
     let header = exporter.csv_header(&recording);
-    // let mut wrt = csv::Writer::from_writer(io::stdout());
-
-    let mut wrt = csv::Writer::from_path(format!("{}.csv", path))?;
+    let mut wrt = csv::Writer::from_writer(writer);
     wrt.write_record(header)?;
     for f in &recording.frames {
         let row = exporter.csv_row(f)?;

src-tauri/src/serial_core/serial.rs

@@ -1,40 +1,236 @@
 use crate::serial_core::codec::Codec;
-use crate::serial_core::frame::{FrameHandler, TestFrame};
-use crate::serial_core::model::HudChartState;
+use crate::serial_core::codecs::tactile_a::TactileACodec;
+use crate::serial_core::frame::{FrameHandler, TactileAFrame, TestFrame};
+use crate::serial_core::model::{HudChartState, HudPacket};
+use crate::serial_core::record::Recording;
 use anyhow::Result;
 use tauri::{AppHandle, Emitter};
-use tokio::io::AsyncReadExt;
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
 use tokio::time::{self, Duration, MissedTickBehavior};
 use tokio_serial::SerialStream;
 use tokio_util::sync::CancellationToken;
+use std::future::pending;
 use std::sync::{Arc, Mutex};
 use std::time::Instant;
-use log::info;
 use crate::serial_core::record::{FrameTiming, RecordedFrame};
-use crate::serial_core::TestRecording;
 
-pub async fn run_serial<C, H, T>(
+pub enum PollMode<F> {
+    Disable,
+    Enabled(Box<dyn PollRequester<F>>)
+}
+
+pub trait SerialFrame: Clone + Send + 'static {
+    fn dts_ms(&self) -> u64;
+
+    fn to_hud_packet(
+        &self,
+        chart_state: &mut HudChartState,
+        display_values: Option<&[i32]>,
+    ) -> Option<HudPacket>;
+}
+
+impl SerialFrame for TestFrame {
+    fn dts_ms(&self) -> u64 {
+        self.dts_ms
+    }
+
+    fn to_hud_packet(
+        &self,
+        chart_state: &mut HudChartState,
+        display_values: Option<&[i32]>,
+    ) -> Option<HudPacket> {
+        Some(chart_state.apply_frame(self, display_values))
+    }
+}
+
+impl SerialFrame for TactileAFrame {
+    fn dts_ms(&self) -> u64 {
+        match self {
+            TactileAFrame::Req(_) => 0,
+            TactileAFrame::Rep(rep) => rep.dts_ms,
+        }
+    }
+
+    fn to_hud_packet(
+        &self,
+        chart_state: &mut HudChartState,
+        display_values: Option<&[i32]>,
+    ) -> Option<HudPacket> {
+        match self {
+            TactileAFrame::Req(_) => None,
+            TactileAFrame::Rep(rep) => {
+                let proxy = TestFrame {
+                    header: rep.meta.header,
+                    cmd: rep.meta.func_code,
+                    length: rep.meta.except_data_len,
+                    payload: rep.payload.clone(),
+                    checksum: rep.meta.checksum,
+                    dts_ms: rep.dts_ms,
+                };
+
+                Some(chart_state.apply_frame(&proxy, display_values))
+            }
+        }
+    }
+}
+
+pub trait PollRequester<F>: Send {
+    fn poll_interval(&self) -> Option<Duration> {
+        None
+    }
+
+    fn should_request(&mut self) -> bool {
+        true
+    }
+
+    fn next_request(&mut self) -> Result<Option<F>> {
+        Ok(None)
+    }
+
+    fn on_rx_frame(&mut self, _frame: &F) {}
+}
+
+#[derive(Default)]
+pub struct NoopPollRequester;
+
+impl<F> PollRequester<F> for NoopPollRequester {}
+
+pub struct TactileAPollRequester {
+    period: Duration,
+    cols: usize,
+    rows: usize,
+    awaiting_reply: bool,
+    last_request_at: Option<Instant>,
+    reply_timeout: Duration,
+}
+
+impl TactileAPollRequester {
+    pub fn new(period: Duration, cols: usize, rows: usize, reply_timeout: Duration) -> Self {
+        Self {
+            period,
+            cols,
+            rows,
+            awaiting_reply: false,
+            last_request_at: None,
+            reply_timeout,
+        }
+    }
+}
+
+impl PollRequester<TactileAFrame> for TactileAPollRequester {
+    fn poll_interval(&self) -> Option<Duration> {
+        Some(self.period)
+    }
+
+    fn should_request(&mut self) -> bool {
+        if !self.awaiting_reply {
+            return true;
+        }
+        let timed_out = self
+            .last_request_at
+            .map(|t| t.elapsed() >= self.reply_timeout)
+            .unwrap_or(false);
+
+        if timed_out {
+            self.awaiting_reply = false;
+            self.last_request_at = None;
+            return true;
+        }
+
+        false
+    }
+
+    fn next_request(&mut self) -> Result<Option<TactileAFrame>> {
+        let req = TactileACodec::build_req_frame(self.cols, self.rows)?;
+        self.awaiting_reply = true;
+        self.last_request_at = Some(Instant::now());
+        Ok(Some(req))
+    }
+
+    fn on_rx_frame(&mut self, frame: &TactileAFrame) {
+        if matches!(frame, TactileAFrame::Rep(_)) {
+            self.awaiting_reply = false;
+            self.last_request_at = None
+        }
+    }
+}
+
+pub async fn run_serial<C, H, T, F>(
+    app: AppHandle,
+    port: SerialStream,
+    codec: C,
+    handler: H,
+    session_started_at: Instant,
+    recording: Arc<Mutex<Recording<F>>>,
+    cancel: CancellationToken,
+) -> Result<()>
+where
+    F: SerialFrame,
+    C: Codec<F> + Send + 'static,
+    H: FrameHandler<F, T> + Send + 'static,
+    T: Into<i32>
+{
+    run_serial_with_poll(
+        app, port, codec, handler, session_started_at, recording, cancel, PollMode::Disable
+    ).await
+}
+
+pub async fn run_serial_with_poll<C, H, T, F>(
     app: AppHandle,
     mut port: SerialStream,
     mut codec: C,
     mut handler: H,
     session_started_at: Instant,
-    recording: Arc<Mutex<TestRecording>>,
+    recording: Arc<Mutex<Recording<F>>>,
     cancel: CancellationToken,
+    poll_mode: PollMode<F>
 ) -> Result<()>
 where
-    C: Codec<TestFrame> + Send + 'static,
-    H: FrameHandler<TestFrame, T> + Send + 'static,
+    F: SerialFrame,
+    C: Codec<F> + Send + 'static,
+    H: FrameHandler<F, T> + Send + 'static,
     T: Into<i32>,
 {
+    let mut requester = match poll_mode {
+        PollMode::Disable => None,
+        PollMode::Enabled(r) => Some(r),
+    };
+
+    let mut poll_interval = requester
+    .as_ref()
+    .and_then(|r| r.poll_interval())
+    .map(|d| {
+        let mut it = time::interval(d);
+        it.set_missed_tick_behavior(MissedTickBehavior::Skip);
+        it
+    });
+
     let mut chart_state = HudChartState::new();
     let mut buffer = [0u8; 1024];
     let mut prune_interval = time::interval(Duration::from_millis(450));
     prune_interval.set_missed_tick_behavior(MissedTickBehavior::Delay);
 
+    
     loop {
         tokio::select! {
             _ = cancel.cancelled() => break,
+            _ = async {
+                match poll_interval.as_mut() {
+                    Some(it) => {
+                        it.tick().await;
+                    }
+                    None => pending::<()>().await,
+                }
+            } => {
+                if let Some(r) = requester.as_mut() {
+                    if r.should_request() {
+                        if let Some(req) = r.next_request()? {
+                            let bytes = codec.encode(&req)?;
+                            port.write_all(&bytes).await?;
+                        }
+                    }
+                }
+            }
             _ = prune_interval.tick() => {
                 if let Some(packet) = chart_state.prune_stale() {
                     app.emit("hud_stream", packet)?;
@@ -43,11 +239,18 @@ where
             read_result = port.read(&mut buffer) => {
                 let n = read_result?;
                 if n == 0 {
+                    // Some serial drivers can resolve reads with 0 bytes repeatedly.
+                    // Yield here so timer-driven poll requests are not starved by a busy loop.
+                    tokio::task::yield_now().await;
                     continue;
                 }
 
                 let frames = codec.decode(&buffer[..n], session_started_at)?;
                 for frame in frames {
+                    if let Some(r) = requester.as_mut() {
+                        r.on_rx_frame(&frame);
+                    }
+
                     let decode_res = handler
                         .on_frame(&frame)
                         .await?
@@ -55,26 +258,59 @@ where
 
                     let mut record = recording.lock().map_err(|_| anyhow::anyhow!("recording state poisoned"))?;
                     record.push(RecordedFrame{
-                        timing: FrameTiming { pts_ms: None, dts_ms: frame.dts_ms },
+                        timing: FrameTiming { pts_ms: None, dts_ms: frame.dts_ms() },
                         frame: frame.clone(),
                     });
 
                     let display_values = if let Some(vals) = decode_res.as_ref() {
                         let summary = vals.iter().copied().sum::<i32>();
-                        info!("dot value summary: {}", summary);
-                        chart_state.record_summary(summary as f32);
+                        let force = raw_to_g1(summary as u32);
+                        chart_state.record_summary(force as f32);
                         chart_state.record_pressure_matrix(vals.as_slice());
                         Some(vec![summary])
                     } else {
                         None
                     };
 
-                    let packet = chart_state.apply_frame(&frame, display_values.as_deref());
+                    if let Some(packet) = frame.to_hud_packet(&mut chart_state, display_values.as_deref()) {
                         app.emit("hud_stream", packet)?;
                     }
                 }
             }
         }
-
+    }
     Ok(())
 }
+
+fn raw_to_g1(raw: u32) -> f64 {
+    const X: [u32; 11] = [
+        0, 74602, 105503, 131459, 153512, 172041, 193794, 218947, 240580, 295118, 332346,
+    ];
+
+    const Y: [f64; 11] = [
+        0.0, 160.0, 260.0, 360.0, 460.0, 560.0, 660.0, 860.0, 1060.0, 1560.0, 2060.0,
+    ];
+
+    let n = X.len();
+    if raw <= X[0] {
+        return Y[0] / 100.0;
+    }
+    if raw >= X[n - 1] {
+        return Y[n - 1] / 100.0;
+    }
+
+    let mut left = 0;
+    let mut right = n - 1;
+
+    while left + 1 < right {
+        let mid = (left + right) / 2;
+        if raw < X[mid] {
+            right = mid;
+        } else {
+            left = mid;
+        }
+    }
+
+    let ratio = (raw - X[left]) as f64 / (X[right] - X[left]) as f64;
+    Y[left] / 100.0 + ratio * (Y[right] - Y[left]) / 100.0
+}

src-tauri/src/serial_core/utils.rs

@@ -0,0 +1,59 @@
+
+use std::time::Instant;
+
+pub fn usize_to_u16_be_bytes(n: usize) -> [u8; 2] {
+    (n as u16).to_be_bytes()
+}
+
+pub fn usize_to_u16_le_bytes(n: usize) -> [u8; 2] {
+    (n as u16).to_be_bytes()
+}
+
+pub fn u16_to_hex_be_bytes(n: u16) -> [u8; 2] {
+    (n as u16).to_be_bytes()
+}
+
+pub fn u16_to_hex_le_bytes(n: u16) -> [u8; 2] {
+    (n as u16).to_le_bytes()
+}
+
+pub fn calc_crc8_smbus(c: &[u8]) -> u8 {
+    let crc8_smbus = crc::Crc::<u8>::new(&crc::CRC_8_SMBUS);
+    let checksum = crc8_smbus.checksum(c);
+    return checksum;
+}
+
+pub fn calc_crc8_itu(c: &[u8]) -> u8 {
+    let crc8_itu_alg = crc::Crc::<u8>::new(&crc::CRC_8_I_432_1);
+    let checksum = crc8_itu_alg.checksum(c);
+    return checksum;
+}
+
+pub fn elapsed_millis(start_at: Instant) -> u64 {
+    start_at.elapsed().as_millis() as u64
+}
+
+#[cfg(test)]
+mod test {
+    use anyhow::Ok;
+
+    use crate::serial_core::utils::{calc_crc8_itu, calc_crc8_smbus};
+
+    #[test]
+    fn test_crc8_itu() -> anyhow::Result<()> {
+        let req_vec = vec![0x55, 0xAA, 0x09, 0x00, 0x34, 0x00, 0xFB, 0x00, 0x1C, 0x00, 0x00, 0x18, 0x00];
+        let checksum = calc_crc8_itu(req_vec.as_slice());
+        assert_eq!(checksum, 0x7A);
+
+        Ok(())
+    }
+
+    #[test]
+    fn test_crc8_smbus() -> anyhow::Result<()> {
+        let req_vec = vec![0x55, 0xAA, 0x09, 0x00, 0x34, 0x00, 0xFB, 0x00, 0x1C, 0x00, 0x00, 0x18, 0x00];
+        let checksum = calc_crc8_smbus(req_vec.as_slice());
+        assert_eq!(checksum, 0x2F);
+
+        Ok(())
+    }
+}

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
-  "productName": "tauri-demo",
-  "version": "0.1.0",
+  "productName": "JE-Skin",
+  "version": "0.3.1",
   "identifier": "com.lenn.tauri-serial",
   "build": {
     "beforeDevCommand": "npm run dev",
@@ -12,7 +12,7 @@
   "app": {
     "windows": [
       {
-        "title": "joyson-serial",
+        "title": "JE-Skin",
         "width": 1366,
         "height": 860,
         "decorations": false
@@ -29,8 +29,8 @@
       "icons/32x32.png",
         "icons/128x128.png",
         "icons/128x128@2x.png",
-      "icons/icon.ico",
-      "icons/icon.png"
+        "icons/icon.icns",
+        "icons/icon.ico"
     ]
   }
 }

src/lib/components/CenterStage.svelte

@@ -5,6 +5,7 @@
   import { onMount } from "svelte";
   import { fly } from "svelte/transition";
   import ConfigPanel from "$lib/components/ConfigPanel.svelte";
+  import NeonBreakoutArena from "$lib/components/NeonBreakoutArena.svelte";
   import PressureMatrixViewer from "$lib/components/PressureMatrixViewer.svelte";
   import SignalChart from "$lib/components/SignalChart.svelte";
   import SummaryCurve from "$lib/components/SummaryCurve.svelte";
@@ -12,14 +13,12 @@
     HudColorMapOption,
     HudSignalPanel,
     HudSummary,
-    PressureColorMapPreset,
-    StageStatusTone
+    LocaleCode,
+    MatrixDisplayMode,
+    PressureColorMapPreset
   } from "$lib/types/hud";
 
-  export let title = "";
-  export let hint = "";
-  export let statusText = "";
-  export let statusTone: StageStatusTone = "idle";
+  export let locale: LocaleCode = "zh-CN";
   export let leftPanels: HudSignalPanel[] = [];
   export let rightPanels: HudSignalPanel[] = [];
   export let summary: HudSummary;
@@ -39,8 +38,9 @@
   export let matrixRows = 12;
   export let matrixCols = 7;
   export let rangeMin = 0;
-  export let rangeMax = 5000;
+  export let rangeMax = 16000;
   export let colorMapPreset: PressureColorMapPreset = "emerald";
+  export let matrixDisplayMode: MatrixDisplayMode = "dots";
   export let colorMapOptions: HudColorMapOption[] = [];
   export let replaySectionLabel = "";
   export let replayPlayLabel = "";
@@ -54,9 +54,9 @@
   export let replayProgress = 0;
   export let replayFileName = "";
   export let replayFrameInfo = "";
+  export let showPrecisionTestPanel = false;
 
   let stagePlaneEl: HTMLDivElement | undefined;
-  let topOverlayEl: HTMLDivElement | undefined;
   let panelZoneEl: HTMLDivElement | undefined;
   let leftStackEl: HTMLDivElement | undefined;
   let rightStackEl: HTMLDivElement | undefined;
@@ -81,6 +81,9 @@
   $: replaySide = summarySide === "left" ? "right" : "left";
   $: replayToggleButtonText = replayIsPlaying ? replayPauseLabel : replayPlayLabel;
   $: replayProgressPercent = Math.round(Math.min(1, Math.max(0, replayProgress)) * 100);
+  $: summaryCurveVisible = summary.points.length > 0 && summary.points.some((value) => Number.isFinite(value) && Math.abs(value) >= 0.0001);
+  $: splitMatrixTitle = locale === "zh-CN" ? "数字矩阵" : "Matrix";
+  $: splitMatrixHint = locale === "zh-CN" ? "实时压力数据 / 数字矩阵" : "Live pressure matrix";
 
   function toPxNumber(rawValue: string): number {
     const value = Number.parseFloat(rawValue);
@@ -101,15 +104,11 @@
   }
 
   function recomputePanelLayout(): void {
-    if (!stagePlaneEl || !topOverlayEl) {
+    if (!stagePlaneEl) {
       return;
     }
 
-    const planeRect = stagePlaneEl.getBoundingClientRect();
-    const overlayRect = topOverlayEl.getBoundingClientRect();
-    const overlayBottom = overlayRect.bottom - planeRect.top;
-    const upperTopLimit = Math.max(72, Math.round(stagePlaneEl.clientHeight * 0.34));
-    panelZoneTopPx = clamp(Math.round(overlayBottom + 8), 56, upperTopLimit);
+    panelZoneTopPx = showPrecisionTestPanel ? 24 : 16;
 
     const panelZoneBottomPx = panelZoneEl ? toPxNumber(getComputedStyle(panelZoneEl).bottom) : 0;
     const zoneHeight = Math.max(0, stagePlaneEl.clientHeight - panelZoneTopPx - panelZoneBottomPx);
@@ -153,10 +152,6 @@
       resizeObserver.observe(stagePlaneEl);
     }
 
-    if (topOverlayEl) {
-      resizeObserver.observe(topOverlayEl);
-    }
-
     if (leftStackEl) {
       resizeObserver.observe(leftStackEl);
     }
@@ -181,20 +176,33 @@
       bind:this={stagePlaneEl}
       style="--panel-zone-top-dyn: {panelZoneTopPx}px; --rail-scale-left: {leftRailScale}; --rail-scale-right: {rightRailScale};"
     >
-      <div class="stage-top-overlay" bind:this={topOverlayEl}>
-        <div class="stage-meta">
-          <p class="meta-label">WebGL2 Stage</p>
-          <h2>{title}</h2>
-          <p class="meta-hint">{hint}</p>
-        </div>
-        <p class="runtime-status" class:is-ok={statusTone === "ok"} class:is-warn={statusTone === "warn"}>
-          {statusText}
-        </p>
-      </div>
-
-      <div class="canvas-wrap">
-        {#key `${matrixRows}x${matrixCols}`}
+      {#if showPrecisionTestPanel}
+        <div class="split-game-wrap">
+          <section class="split-panel split-matrix-panel">
+            <header class="split-panel-head">
+              <p>{splitMatrixTitle}</p>
+              <span>{splitMatrixHint}</span>
+            </header>
+            <div class="split-panel-body">
+              {#key `${matrixRows}x${matrixCols}:${colorMapPreset}:split`}
                 <PressureMatrixViewer
+                  {summary}
+                  {pressureMatrix}
+                  {matrixRows}
+                  {matrixCols}
+                  {rangeMin}
+                  {rangeMax}
+                  {colorMapPreset}
+                  {matrixDisplayMode}
+                  showStatsPanel={true}
+                />
+              {/key}
+            </div>
+          </section>
+
+          <section class="split-panel split-breakout-panel">
+            <NeonBreakoutArena
+              {locale}
               {pressureMatrix}
               {matrixRows}
               {matrixCols}
@@ -202,10 +210,27 @@
               {rangeMax}
               {colorMapPreset}
             />
+          </section>
+        </div>
+      {:else}
+        <div class="canvas-wrap">
+          {#key `${matrixRows}x${matrixCols}:${colorMapPreset}`}
+            <PressureMatrixViewer
+              {summary}
+              {pressureMatrix}
+              {matrixRows}
+              {matrixCols}
+              {rangeMin}
+              {rangeMax}
+              {colorMapPreset}
+              {matrixDisplayMode}
+              showStatsPanel={true}
+            />
           {/key}
         </div>
+      {/if}
 
-      {#if showConfigPanel}
+      {#if showConfigPanel && !showPrecisionTestPanel}
         <div class="config-panel-wrap">
           <ConfigPanel
             bind:matrixRows
@@ -230,6 +255,7 @@
         </div>
       {/if}
 
+      {#if !showPrecisionTestPanel}
         <div class="panel-zone" bind:this={panelZoneEl}>
           <aside class="side-rail left-rail">
             <div class="rail-stack" bind:this={leftStackEl}>
@@ -244,7 +270,7 @@
                 </div>
               {/each}
 
-            {#if summary.points.length > 0 && summarySide === "left"}
+              {#if summaryCurveVisible && summarySide === "left"}
                 <div
                   class="panel-motion-shell"
                   in:fly={{ x: -180, duration: 340, opacity: 0.08, easing: cubicOut }}
@@ -275,7 +301,7 @@
                 </div>
               {/each}
 
-            {#if summary.points.length > 0 && summarySide === "right"}
+              {#if summaryCurveVisible && summarySide === "right"}
                 <div
                   class="panel-motion-shell"
                   in:fly={{ x: 180, duration: 340, opacity: 0.08, easing: cubicOut }}
@@ -293,8 +319,9 @@
             </div>
           </aside>
         </div>
+      {/if}
 
-      {#if replayHasData}
+      {#if replayHasData && !showPrecisionTestPanel}
         <aside class="replay-floating-panel" class:is-left={replaySide === "left"} class:is-right={replaySide === "right"}>
           <div class="replay-panel-head">
             <div class="replay-panel-title-group">
@@ -332,9 +359,11 @@
         </aside>
       {/if}
 
+      {#if !showPrecisionTestPanel}
         <div class="stage-bottom-overlay">
           <slot />
         </div>
+      {/if}
     </div>
   </article>
 </section>
@@ -351,12 +380,17 @@
     min-height: 0;
     overflow: hidden;
     border-radius: 0.72rem;
-    border: 1px solid rgb(101 133 152 / 0.2);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.2);
     background:
-      linear-gradient(170deg, rgb(8 12 16 / 0.86) 0%, rgb(0 0 0 / 0.96) 58%, rgb(6 10 14 / 0.9) 100%),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.04), transparent 48%);
+      linear-gradient(
+        170deg,
+        rgb(var(--hud-surface-rgb) / 0.86) 0%,
+        rgb(var(--hud-surface-deep-rgb) / 0.96) 58%,
+        rgb(var(--hud-surface-alt-rgb) / 0.9) 100%
+      ),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.04), transparent 48%);
     box-shadow:
-      inset 0 1px 0 rgb(175 216 240 / 0.08),
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
       inset 0 -36px 72px rgb(0 0 0 / 0.4);
   }
 
@@ -373,75 +407,6 @@
     block-size: 100%;
   }
 
-  .stage-top-overlay {
-    position: absolute;
-    top: clamp(0.55rem, 1.1vw, 0.9rem);
-    left: calc(var(--rail-width) + var(--safe-gap) + var(--rail-edge-inset));
-    right: calc(var(--rail-width) + var(--safe-gap) + var(--rail-edge-inset));
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 0.7rem;
-    z-index: 7;
-    pointer-events: none;
-  }
-
-  .stage-meta {
-    min-width: 0;
-    max-inline-size: min(22rem, 62%);
-    padding: 0.3rem 0.5rem 0.35rem;
-    border: 1px solid rgb(112 146 166 / 0.2);
-    border-radius: 0.45rem;
-    background: rgb(2 8 12 / 0.45);
-    backdrop-filter: blur(2px);
-  }
-
-  .meta-label {
-    margin: 0;
-    font-size: 0.56rem;
-    color: rgb(148 171 189 / 0.8);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-
-  h2 {
-    margin: 0.08rem 0 0;
-    font-size: clamp(0.75rem, 1.1vw, 0.92rem);
-    color: rgb(222 241 255 / 0.96);
-    letter-spacing: 0.03em;
-    font-weight: 500;
-    line-height: 1.2;
-  }
-
-  .meta-hint {
-    margin: 0.09rem 0 0;
-    font-size: 0.62rem;
-    color: rgb(142 165 183 / 0.76);
-    line-height: 1.15;
-  }
-
-  .runtime-status {
-    margin: 0;
-    align-self: center;
-    border: 1px solid rgb(95 128 149 / 0.35);
-    border-radius: 999px;
-    padding: 0.3rem 0.66rem;
-    font-size: 0.66rem;
-    letter-spacing: 0.08em;
-    color: rgb(150 174 194 / 0.9);
-    text-transform: uppercase;
-    white-space: nowrap;
-    background: rgb(3 10 15 / 0.62);
-  }
-
-  .runtime-status.is-ok {
-    color: rgb(204 248 184 / 0.94);
-  }
-
-  .runtime-status.is-warn {
-    color: rgb(255 205 188 / 0.92);
-  }
-
   .canvas-wrap {
     position: absolute;
     inset: 0;
@@ -458,6 +423,70 @@
     max-inline-size: min(24rem, 40vw);
   }
 
+  .split-game-wrap {
+    position: absolute;
+    inset: clamp(0.46rem, 1vw, 0.82rem);
+    z-index: 6;
+    display: grid;
+    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
+    gap: clamp(0.45rem, 1vw, 0.9rem);
+  }
+
+  .split-panel {
+    position: relative;
+    min-block-size: 0;
+    overflow: hidden;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.26);
+    border-radius: 0.58rem;
+    background:
+      linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.84), rgb(var(--hud-surface-deep-rgb) / 0.9)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.06), transparent 56%);
+    box-shadow:
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.07),
+      0 0 20px rgb(var(--hud-glow-rgb) / 0.08);
+  }
+
+  .split-panel-head {
+    position: absolute;
+    top: 0.42rem;
+    left: 0.52rem;
+    z-index: 5;
+    display: grid;
+    gap: 0.1rem;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .split-panel-head p {
+    margin: 0;
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
+    font-size: 0.62rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  .split-panel-head span {
+    color: rgb(var(--hud-text-dim-rgb) / 0.82);
+    font-size: 0.52rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  .split-panel-body {
+    position: absolute;
+    inset: 0;
+  }
+
+  .split-matrix-panel :global(.viewer-controls) {
+    left: clamp(0.7rem, 1.7vw, 1.15rem);
+    top: clamp(3.8rem, 8.8vh, 4.9rem);
+    max-inline-size: min(13.2rem, 65%);
+  }
+
+  .split-matrix-panel :global(.stats-panel) {
+    padding: 0.62rem 0.68rem 0.72rem;
+  }
+
   .panel-zone {
     position: absolute;
     top: var(--panel-zone-top-dyn, var(--panel-zone-top));
@@ -533,15 +562,15 @@
     pointer-events: auto;
     display: grid;
     gap: 0.52rem;
-    border: 1px solid rgb(95 136 159 / 0.34);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.34);
     border-radius: 0.66rem;
     padding: 0.66rem 0.72rem;
     background:
-      linear-gradient(180deg, rgb(8 14 19 / 0.86), rgb(4 8 12 / 0.8)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.07), transparent 56%);
+      linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.86), rgb(var(--hud-surface-deep-rgb) / 0.8)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.07), transparent 56%);
     box-shadow:
-      inset 0 1px 0 rgb(183 218 239 / 0.08),
-      0 0 18px rgb(62 232 255 / 0.1);
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
+      0 0 18px rgb(var(--hud-glow-rgb) / 0.1);
   }
 
   .replay-floating-panel.is-right {
@@ -582,24 +611,24 @@
     font-size: 0.58rem;
     letter-spacing: 0.11em;
     text-transform: uppercase;
-    color: rgb(152 185 206 / 0.86);
+    color: rgb(var(--hud-text-dim-rgb) / 0.86);
   }
 
   .replay-panel-file {
     font-size: 0.73rem;
     letter-spacing: 0.03em;
-    color: rgb(221 241 255 / 0.94);
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   .replay-panel-frame {
-    border: 1px solid rgb(133 255 68 / 0.36);
+    border: 1px solid rgb(var(--hud-lime-rgb) / 0.36);
     border-radius: 999px;
     padding: 0.16rem 0.52rem;
-    background: rgb(17 28 15 / 0.64);
-    color: rgb(204 255 178 / 0.94);
+    background: rgb(var(--hud-surface-alt-rgb) / 0.64);
+    color: rgb(var(--hud-lime-rgb) / 0.94);
     font-size: 0.67rem;
     letter-spacing: 0.07em;
     white-space: nowrap;
@@ -608,10 +637,10 @@
   .replay-close-btn {
     inline-size: 1.82rem;
     block-size: 1.82rem;
-    border: 1px solid rgb(255 98 76 / 0.44);
+    border: 1px solid rgb(var(--hud-orange-rgb) / 0.44);
     border-radius: 0.32rem;
-    background: rgb(24 10 12 / 0.88);
-    color: rgb(255 210 203 / 0.96);
+    background: rgb(var(--hud-surface-deep-rgb) / 0.88);
+    color: rgb(var(--hud-orange-rgb) / 0.96);
     font-size: 1rem;
     line-height: 1;
     display: grid;
@@ -624,9 +653,9 @@
   }
 
   .replay-close-btn:hover {
-    border-color: rgb(255 132 115 / 0.66);
-    color: rgb(255 234 228 / 0.98);
-    box-shadow: 0 0 12px rgb(255 91 63 / 0.2);
+    border-color: rgb(var(--hud-orange-rgb) / 0.66);
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
+    box-shadow: 0 0 12px rgb(var(--hud-orange-rgb) / 0.2);
   }
 
   .replay-panel-controls {
@@ -643,11 +672,11 @@
 
   .replay-action-btn {
     min-block-size: 1.82rem;
-    border: 1px solid rgb(62 232 255 / 0.36);
+    border: 1px solid rgb(var(--hud-cyan-rgb) / 0.36);
     border-radius: 999px;
     padding: 0.2rem 0.66rem;
-    background: rgb(8 19 25 / 0.9);
-    color: rgb(225 246 255 / 0.96);
+    background: rgb(var(--hud-surface-alt-rgb) / 0.9);
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     font-size: 0.7rem;
     letter-spacing: 0.05em;
     cursor: pointer;
@@ -657,19 +686,19 @@
   }
 
   .replay-action-btn:hover {
-    border-color: rgb(116 245 255 / 0.58);
-    box-shadow: 0 0 10px rgb(62 232 255 / 0.14);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.58);
+    box-shadow: 0 0 10px rgb(var(--hud-cyan-rgb) / 0.14);
   }
 
   .replay-action-btn.is-stop {
-    border-color: rgb(255 91 63 / 0.44);
-    color: rgb(255 223 214 / 0.94);
-    background: rgb(27 12 10 / 0.86);
+    border-color: rgb(var(--hud-orange-rgb) / 0.44);
+    color: rgb(var(--hud-orange-rgb) / 0.94);
+    background: rgb(var(--hud-surface-deep-rgb) / 0.86);
   }
 
   .replay-action-btn.is-stop:hover {
-    border-color: rgb(255 124 101 / 0.64);
-    box-shadow: 0 0 10px rgb(255 91 63 / 0.18);
+    border-color: rgb(var(--hud-orange-rgb) / 0.64);
+    box-shadow: 0 0 10px rgb(var(--hud-orange-rgb) / 0.18);
   }
 
   .replay-speed-select,
@@ -678,15 +707,15 @@
     align-items: center;
     gap: 0.36rem;
     min-block-size: 1.92rem;
-    border: 1px solid rgb(95 132 158 / 0.32);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
     border-radius: 999px;
     padding: 0.16rem 0.2rem 0.16rem 0.48rem;
-    background: rgb(8 15 21 / 0.78);
+    background: rgb(var(--hud-surface-rgb) / 0.78);
   }
 
   .replay-speed-select span,
   .replay-progress-slider span {
-    color: rgb(154 176 194 / 0.84);
+    color: rgb(var(--hud-text-dim-rgb) / 0.84);
     font-size: 0.62rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -694,11 +723,11 @@
   }
 
   .replay-speed-select select {
-    border: 1px solid rgb(95 132 158 / 0.34);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.34);
     border-radius: 999px;
     padding: 0.22rem 0.48rem;
-    background: rgb(4 11 16 / 0.88);
-    color: rgb(216 235 248 / 0.96);
+    background: rgb(var(--hud-surface-deep-rgb) / 0.88);
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     font-size: 0.72rem;
     letter-spacing: 0.05em;
     outline: none;
@@ -710,7 +739,7 @@
 
   .replay-progress-slider input {
     inline-size: 100%;
-    accent-color: rgb(133 255 68 / 0.92);
+    accent-color: rgb(var(--hud-lime-rgb) / 0.92);
   }
 
   .stage-bottom-overlay {
@@ -739,6 +768,10 @@
     .replay-floating-panel {
       inline-size: min(var(--rail-width), 20.8rem);
     }
+
+    .split-game-wrap {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
   }
 
   @media (max-height: 900px) {
@@ -782,5 +815,10 @@
       right: calc(var(--rail-edge-inset) + 0.1rem);
       inline-size: auto;
     }
+
+    .split-game-wrap {
+      grid-template-columns: 1fr;
+      grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.08fr);
+    }
   }
 </style>

src/lib/components/ConfigPanel.svelte

@@ -16,7 +16,7 @@
   export let matrixRows = 12;
   export let matrixCols = 7;
   export let rangeMin = 0;
-  export let rangeMax = 5000;
+  export let rangeMax = 16000;
   export let colorMapPreset: PressureColorMapPreset = "emerald";
   export let colorMapOptions: HudColorMapOption[] = [];
 
@@ -85,10 +85,14 @@
     matrixRows = 12;
     matrixCols = 7;
     rangeMin = 0;
-    rangeMax = 5000;
+    rangeMax = 16000;
     colorMapPreset = "emerald";
   }
 
+  function handleSubmit(): void {
+    dispatch("close");
+  }
+
   $: selectedColorMap = colorMapOptions.find((option) => option.id === colorMapPreset) ?? colorMapOptions[0];
 
   $: {
@@ -120,7 +124,7 @@
   }
 </script>
 
-<section class="config-panel" aria-label={title}>
+<form class="config-panel" aria-label={title} on:submit|preventDefault={handleSubmit}>
   <header class="config-head">
     <div class="config-copy">
       <p class="config-label">Stage Config</p>
@@ -214,7 +218,7 @@
     <p class="live-note">{applyLiveHint}</p>
     <button type="button" class="reset-btn" on:click={resetDefaults}>{resetLabel}</button>
   </footer>
-</section>
+</form>
 
 <style>
   .config-panel {
@@ -222,13 +226,13 @@
     gap: 0.9rem;
     inline-size: min(23rem, 100%);
     padding: 0.92rem 0.96rem 1rem;
-    border: 1px solid rgb(88 132 116 / 0.3);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.3);
     border-radius: 0.82rem;
     background:
-      linear-gradient(180deg, rgb(6 18 14 / 0.92), rgb(4 10 9 / 0.88)),
-      radial-gradient(circle at 100% 0, rgb(97 146 255 / 0.07), transparent 38%);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.92), rgb(var(--hud-surface-deep-rgb) / 0.88)),
+      radial-gradient(circle at 100% 0, rgb(var(--hud-info-rgb) / 0.07), transparent 38%);
     box-shadow:
-      inset 0 1px 0 rgb(184 236 206 / 0.08),
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
       0 18px 46px rgb(0 0 0 / 0.28);
     backdrop-filter: blur(10px);
   }
@@ -249,7 +253,7 @@
   .field-label,
   .live-note {
     margin: 0;
-    color: rgb(157 206 181 / 0.8);
+    color: rgb(var(--hud-text-dim-rgb) / 0.8);
     font-size: 0.58rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
@@ -257,7 +261,7 @@
 
   h3 {
     margin: 0.12rem 0 0;
-    color: rgb(237 248 241 / 0.98);
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
     font-size: 1rem;
     line-height: 1.2;
     font-weight: 600;
@@ -266,7 +270,7 @@
   .config-hint,
   .section-note {
     margin: 0.14rem 0 0;
-    color: rgb(142 182 164 / 0.78);
+    color: rgb(var(--hud-text-dim-rgb) / 0.78);
     font-size: 0.7rem;
     line-height: 1.25;
   }
@@ -275,9 +279,9 @@
     position: relative;
     inline-size: 2rem;
     block-size: 2rem;
-    border: 1px solid rgb(82 122 106 / 0.32);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
     border-radius: 999px;
-    background: rgb(4 12 9 / 0.72);
+    background: rgb(var(--hud-surface-deep-rgb) / 0.72);
     cursor: pointer;
     flex: 0 0 auto;
   }
@@ -288,7 +292,7 @@
     left: 50%;
     inline-size: 0.8rem;
     block-size: 1px;
-    background: rgb(182 210 195 / 0.9);
+    background: rgb(var(--hud-text-main-rgb) / 0.9);
     transform-origin: center;
   }
 
@@ -304,9 +308,9 @@
     display: grid;
     gap: 0.62rem;
     padding: 0.76rem 0.8rem;
-    border: 1px solid rgb(72 116 96 / 0.22);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.22);
     border-radius: 0.72rem;
-    background: linear-gradient(180deg, rgb(7 15 12 / 0.76), rgb(5 10 8 / 0.64));
+    background: linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.76), rgb(var(--hud-surface-deep-rgb) / 0.64));
   }
 
   .section-head {
@@ -331,11 +335,11 @@
   .preset-btn,
   .reset-btn,
   .palette-btn {
-    border: 1px solid rgb(80 126 105 / 0.28);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.28);
     border-radius: 999px;
     padding: 0.38rem 0.72rem;
-    background: rgb(8 19 15 / 0.76);
-    color: rgb(191 219 206 / 0.92);
+    background: rgb(var(--hud-surface-rgb) / 0.76);
+    color: rgb(var(--hud-text-main-rgb) / 0.92);
     font: inherit;
     font-size: 0.72rem;
     cursor: pointer;
@@ -347,10 +351,10 @@
   }
 
   .preset-btn.is-active {
-    border-color: rgb(98 201 149 / 0.48);
-    background: linear-gradient(180deg, rgb(18 54 37 / 0.96), rgb(10 32 23 / 0.92));
-    color: rgb(233 247 240 / 0.98);
-    box-shadow: inset 0 1px 0 rgb(198 246 222 / 0.14), 0 0 16px rgb(63 184 120 / 0.14);
+    border-color: rgb(var(--hud-lime-rgb) / 0.48);
+    background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92));
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
+    box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.14), 0 0 16px rgb(var(--hud-glow-alt-rgb) / 0.14);
   }
 
   .palette-btn {
@@ -363,10 +367,10 @@
   }
 
   .palette-btn.is-active {
-    border-color: rgb(98 201 149 / 0.48);
-    background: linear-gradient(180deg, rgb(18 54 37 / 0.96), rgb(10 32 23 / 0.92));
-    color: rgb(233 247 240 / 0.98);
-    box-shadow: inset 0 1px 0 rgb(198 246 222 / 0.14), 0 0 16px rgb(63 184 120 / 0.14);
+    border-color: rgb(var(--hud-lime-rgb) / 0.48);
+    background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92));
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
+    box-shadow: inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.14), 0 0 16px rgb(var(--hud-glow-alt-rgb) / 0.14);
   }
 
   .palette-preview {
@@ -405,26 +409,26 @@
     display: grid;
     gap: 0.38rem;
     padding: 0.58rem 0.64rem 0.66rem;
-    border: 1px solid rgb(68 106 89 / 0.26);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.26);
     border-radius: 0.58rem;
-    background: linear-gradient(180deg, rgb(6 14 11 / 0.86), rgb(3 8 6 / 0.82));
+    background: linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.86), rgb(var(--hud-surface-deep-rgb) / 0.82));
   }
 
   .field-card input {
     inline-size: 100%;
-    border: 1px solid rgb(82 131 109 / 0.28);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.28);
     border-radius: 0.46rem;
     padding: 0.55rem 0.62rem;
-    background: rgb(7 16 12 / 0.92);
-    color: rgb(238 246 241 / 0.98);
+    background: rgb(var(--hud-surface-rgb) / 0.92);
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
     font: inherit;
     font-size: 0.86rem;
     outline: none;
   }
 
   .field-card input:focus {
-    border-color: rgb(97 201 147 / 0.54);
-    box-shadow: 0 0 0 1px rgb(97 201 147 / 0.24);
+    border-color: rgb(var(--hud-lime-rgb) / 0.54);
+    box-shadow: 0 0 0 1px rgb(var(--hud-lime-rgb) / 0.24);
   }
 
   .config-foot {
@@ -435,11 +439,11 @@
   }
 
   .live-note {
-    color: rgb(142 182 164 / 0.8);
+    color: rgb(var(--hud-text-dim-rgb) / 0.8);
   }
 
   .reset-btn {
-    background: linear-gradient(180deg, rgb(10 21 17 / 0.88), rgb(6 12 10 / 0.84));
+    background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.88), rgb(var(--hud-surface-deep-rgb) / 0.84));
     white-space: nowrap;
   }
 

src/lib/components/FileExplorerModal.svelte

@@ -0,0 +1,838 @@
+<script lang="ts">
+  import { createEventDispatcher, onDestroy, onMount, tick } from "svelte";
+  import type { FileExplorerEntry, FileExplorerRoot } from "$lib/types/hud";
+
+  export let open = false;
+  export let mode: "open" | "save" = "open";
+  export let title = "";
+  export let currentPath = "";
+  export let parentPath: string | null = null;
+  export let roots: FileExplorerRoot[] = [];
+  export let entries: FileExplorerEntry[] = [];
+  export let selectedPath = "";
+  export let fileName = "";
+  export let pathLabel = "Path";
+  export let fileNameLabel = "File name";
+  export let cancelLabel = "Cancel";
+  export let confirmLabel = "Open";
+  export let emptyHint = "No file entries";
+  export let csvHint = "*.csv";
+  export let busyLabel = "Processing...";
+  export let upLabel = "↑ Up";
+  export let nameColumnLabel = "Name";
+  export let sizeColumnLabel = "Size";
+  export let modifiedColumnLabel = "Modified";
+  export let isBusy = false;
+
+  const dragViewportPadding = 14;
+  let overlayEl: HTMLDivElement | null = null;
+  let modalEl: HTMLDivElement | null = null;
+  let activePointerId: number | null = null;
+  let dragStartX = 0;
+  let dragStartY = 0;
+  let dragOriginX = 0;
+  let dragOriginY = 0;
+  let dragModalWidth = 0;
+  let dragModalHeight = 0;
+  let modalOffsetX = 0;
+  let modalOffsetY = 0;
+  let isDragging = false;
+  let wasOpen = false;
+
+  const dispatch = createEventDispatcher<{
+    close: void;
+    navigate: string;
+    confirm: void;
+  }>();
+
+  $: selectedEntry = entries.find((entry) => entry.path === selectedPath) ?? null;
+  $: canConfirm =
+    mode === "open"
+      ? Boolean(selectedEntry && !selectedEntry.isDir && !isBusy)
+      : Boolean(fileName.trim().length > 0 && !isBusy);
+  $: if (open && !wasOpen) {
+    wasOpen = true;
+    modalOffsetX = 0;
+    modalOffsetY = 0;
+    stopDrag();
+    void tick().then(() => clampModalOffset());
+  }
+  $: if (!open && wasOpen) {
+    wasOpen = false;
+    stopDrag();
+  }
+
+  function formatFileSize(value: number | null | undefined): string {
+    if (!Number.isFinite(value ?? Number.NaN) || value == null) {
+      return "--";
+    }
+
+    if (value < 1024) {
+      return `${value} B`;
+    }
+    if (value < 1024 * 1024) {
+      return `${(value / 1024).toFixed(1)} KB`;
+    }
+
+    return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
+  function formatModifiedTime(value: number | null | undefined): string {
+    if (!Number.isFinite(value ?? Number.NaN) || value == null) {
+      return "--";
+    }
+
+    try {
+      return new Date(Number(value)).toLocaleString();
+    } catch {
+      return "--";
+    }
+  }
+
+  function navigate(path: string): void {
+    if (!path || isBusy) {
+      return;
+    }
+    dispatch("navigate", path);
+  }
+
+  function selectEntry(entry: FileExplorerEntry): void {
+    selectedPath = entry.path;
+    if (mode === "save" && !entry.isDir) {
+      fileName = entry.name;
+    }
+  }
+
+  function activateEntry(entry: FileExplorerEntry): void {
+    if (entry.isDir) {
+      navigate(entry.path);
+      return;
+    }
+
+    selectedPath = entry.path;
+    if (mode === "save") {
+      fileName = entry.name;
+      return;
+    }
+
+    if (canConfirm) {
+      dispatch("confirm");
+    }
+  }
+
+  function closeModal(): void {
+    if (isBusy) {
+      return;
+    }
+    dispatch("close");
+  }
+
+  function confirmSelection(): void {
+    if (!canConfirm) {
+      return;
+    }
+    dispatch("confirm");
+  }
+
+  function clamp(value: number, min: number, max: number): number {
+    return Math.min(max, Math.max(min, value));
+  }
+
+  function resolveDragRange(modalSize: number, viewportSize: number): { min: number; max: number } {
+    const centeredGap = (viewportSize - modalSize) / 2;
+    const min = dragViewportPadding - centeredGap;
+    const max = centeredGap - dragViewportPadding;
+
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min > max) {
+      return { min: 0, max: 0 };
+    }
+
+    return { min, max };
+  }
+
+  function clampModalOffset(): void {
+    if (!open || !modalEl) {
+      return;
+    }
+
+    const viewportWidth = overlayEl?.clientWidth ?? window.innerWidth;
+    const viewportHeight = overlayEl?.clientHeight ?? window.innerHeight;
+    const rect = modalEl.getBoundingClientRect();
+    const xRange = resolveDragRange(rect.width, viewportWidth);
+    const yRange = resolveDragRange(rect.height, viewportHeight);
+
+    modalOffsetX = clamp(modalOffsetX, xRange.min, xRange.max);
+    modalOffsetY = clamp(modalOffsetY, yRange.min, yRange.max);
+  }
+
+  function stopDrag(): void {
+    activePointerId = null;
+    isDragging = false;
+    window.removeEventListener("pointermove", handlePointerMove);
+    window.removeEventListener("pointerup", handlePointerUp);
+    window.removeEventListener("pointercancel", handlePointerUp);
+  }
+
+  function handlePointerMove(event: PointerEvent): void {
+    if (activePointerId == null || event.pointerId !== activePointerId) {
+      return;
+    }
+
+    event.preventDefault();
+    const viewportWidth = overlayEl?.clientWidth ?? window.innerWidth;
+    const viewportHeight = overlayEl?.clientHeight ?? window.innerHeight;
+    const xRange = resolveDragRange(dragModalWidth, viewportWidth);
+    const yRange = resolveDragRange(dragModalHeight, viewportHeight);
+    const rawX = dragOriginX + (event.clientX - dragStartX);
+    const rawY = dragOriginY + (event.clientY - dragStartY);
+
+    modalOffsetX = clamp(rawX, xRange.min, xRange.max);
+    modalOffsetY = clamp(rawY, yRange.min, yRange.max);
+    isDragging = true;
+  }
+
+  function handlePointerUp(event: PointerEvent): void {
+    if (activePointerId == null || event.pointerId !== activePointerId) {
+      return;
+    }
+
+    stopDrag();
+  }
+
+  function startDrag(event: PointerEvent): void {
+    if (event.button !== 0 || !event.isPrimary || !modalEl) {
+      return;
+    }
+
+    if (event.target instanceof HTMLElement && event.target.closest("button, input, select, textarea, a")) {
+      return;
+    }
+
+    const rect = modalEl.getBoundingClientRect();
+    dragModalWidth = rect.width;
+    dragModalHeight = rect.height;
+    dragStartX = event.clientX;
+    dragStartY = event.clientY;
+    dragOriginX = modalOffsetX;
+    dragOriginY = modalOffsetY;
+    activePointerId = event.pointerId;
+    isDragging = true;
+
+    window.addEventListener("pointermove", handlePointerMove, { passive: false });
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
+  }
+
+  function handleViewportResize(): void {
+    clampModalOffset();
+  }
+
+  onMount(() => {
+    window.addEventListener("resize", handleViewportResize);
+    return () => {
+      window.removeEventListener("resize", handleViewportResize);
+      stopDrag();
+    };
+  });
+
+  onDestroy(() => {
+    stopDrag();
+  });
+</script>
+
+{#if open}
+  <div
+    bind:this={overlayEl}
+    class="explorer-overlay"
+    role="presentation"
+    on:click={(event) => {
+      if (event.target === event.currentTarget) {
+        closeModal();
+      }
+    }}
+  >
+    <div
+      bind:this={modalEl}
+      class="explorer-modal"
+      class:is-dragging={isDragging}
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+      tabindex="-1"
+      style={`--explorer-drag-x: ${modalOffsetX}px; --explorer-drag-y: ${modalOffsetY}px;`}
+      on:keydown={(event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeModal();
+        }
+      }}
+    >
+      <header
+        class="explorer-header"
+        role="toolbar"
+        tabindex="-1"
+        aria-label="Dialog drag bar"
+        on:pointerdown={startDrag}
+      >
+        <div class="explorer-title-wrap">
+          <span class="title-pulse" aria-hidden="true"></span>
+          <h3 class="explorer-title">{title}</h3>
+        </div>
+        <button type="button" class="header-close-btn" aria-label="Close" on:click={closeModal}>×</button>
+      </header>
+
+      <div class="explorer-toolbar">
+        <button
+          type="button"
+          class="tool-btn"
+          disabled={!parentPath || isBusy}
+          on:click={() => parentPath && navigate(parentPath)}
+        >
+          {upLabel}
+        </button>
+        <div class="path-field" title={currentPath}>
+          <span class="path-label">{pathLabel}</span>
+          <span class="path-value">{currentPath}</span>
+        </div>
+      </div>
+
+      <div class="explorer-content">
+        <aside class="roots-list" aria-label="Roots">
+          {#each roots as root (root.path)}
+            <button
+              type="button"
+              class="root-btn"
+              class:is-active={currentPath === root.path}
+              on:click={() => navigate(root.path)}
+            >
+              {root.label}
+            </button>
+          {/each}
+        </aside>
+
+        <section class="entries-wrap" aria-label="Entries">
+          <div class="entries-head">
+            <span>{nameColumnLabel}</span>
+            <span>{sizeColumnLabel}</span>
+            <span>{modifiedColumnLabel}</span>
+          </div>
+
+          {#if entries.length === 0}
+            <p class="entries-empty">{emptyHint}</p>
+          {:else}
+            <div class="entries-body">
+              {#each entries as entry (entry.path)}
+                <button
+                  type="button"
+                  class="entry-row"
+                  class:is-selected={entry.path === selectedPath}
+                  on:click={() => selectEntry(entry)}
+                  on:dblclick={() => activateEntry(entry)}
+                >
+                  <span class="entry-name">
+                    <span class="entry-icon" aria-hidden="true">{entry.isDir ? "DIR" : "CSV"}</span>
+                    <span class="entry-text">{entry.name}</span>
+                  </span>
+                  <span class="entry-size">{entry.isDir ? "--" : formatFileSize(entry.sizeBytes)}</span>
+                  <span class="entry-time">{formatModifiedTime(entry.modifiedMs)}</span>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </section>
+      </div>
+
+      <footer class="explorer-footer">
+        {#if mode === "save"}
+          <label class="name-input-wrap">
+            <span class="name-label">{fileNameLabel}</span>
+            <input
+              class="name-input"
+              type="text"
+              bind:value={fileName}
+              placeholder="joyson_export.csv"
+              autocomplete="off"
+            />
+          </label>
+        {:else}
+          <p class="csv-hint">{csvHint}</p>
+        {/if}
+
+        <div class="footer-actions">
+          <button type="button" class="action-btn cancel" disabled={isBusy} on:click={closeModal}>{cancelLabel}</button>
+          <button type="button" class="action-btn confirm" disabled={!canConfirm} on:click={confirmSelection}>
+            {isBusy ? busyLabel : confirmLabel}
+          </button>
+        </div>
+      </footer>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .explorer-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    display: grid;
+    place-items: center;
+    background:
+      radial-gradient(circle at 30% 12%, rgb(var(--hud-glow-rgb) / 0.08), transparent 42%),
+      radial-gradient(circle at 84% 10%, rgb(var(--hud-glow-alt-rgb) / 0.07), transparent 40%),
+      rgb(0 0 0 / 0.6);
+    backdrop-filter: blur(3px);
+    padding: clamp(0.65rem, 2.4vw, 1.25rem);
+  }
+
+  .explorer-modal {
+    position: relative;
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
+    inline-size: min(1020px, 100%);
+    block-size: min(720px, 100%);
+    max-inline-size: calc(100% - 2 * clamp(0.65rem, 2.4vw, 1.25rem));
+    max-block-size: calc(100% - 2 * clamp(0.65rem, 2.4vw, 1.25rem));
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.34);
+    border-radius: 0.72rem;
+    background:
+      linear-gradient(
+        172deg,
+        rgb(var(--hud-surface-rgb) / 0.96) 0%,
+        rgb(var(--hud-surface-deep-rgb) / 0.96) 52%,
+        rgb(var(--hud-surface-deep-rgb) / 0.98) 100%
+      ),
+      radial-gradient(circle at 18% 0, rgb(var(--hud-glow-rgb) / 0.06), transparent 42%),
+      radial-gradient(circle at 90% 0, rgb(var(--hud-glow-alt-rgb) / 0.05), transparent 38%);
+    box-shadow:
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
+      0 22px 50px rgb(0 0 0 / 0.52);
+    overflow: hidden;
+    transform: translate3d(var(--explorer-drag-x, 0), var(--explorer-drag-y, 0), 0);
+  }
+
+  .explorer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.65rem;
+    padding: 0.72rem 0.85rem 0.65rem;
+    border-bottom: 1px solid rgb(var(--hud-border-rgb) / 0.28);
+    background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.6), transparent);
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .explorer-modal.is-dragging .explorer-header {
+    cursor: grabbing;
+  }
+
+  .explorer-title-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  .title-pulse {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 999px;
+    background: var(--hud-lime);
+    box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
+  }
+
+  .explorer-title {
+    margin: 0;
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
+    font-size: 0.92rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .header-close-btn {
+    inline-size: 2rem;
+    block-size: 1.64rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.36);
+    border-radius: 0.36rem;
+    background: rgb(var(--hud-surface-rgb) / 0.9);
+    color: rgb(var(--hud-text-main-rgb) / 0.9);
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      border-color 180ms ease,
+      color 180ms ease;
+  }
+
+  .header-close-btn:hover {
+    border-color: rgb(var(--hud-orange-rgb) / 0.6);
+    color: rgb(var(--hud-orange-rgb) / 0.96);
+  }
+
+  .explorer-toolbar {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.58rem;
+    padding: 0.62rem 0.85rem;
+    border-bottom: 1px solid rgb(var(--hud-border-rgb) / 0.22);
+    background: linear-gradient(90deg, rgb(var(--hud-glow-rgb) / 0.03), transparent 44%, rgb(var(--hud-glow-alt-rgb) / 0.02));
+  }
+
+  .tool-btn {
+    min-block-size: 1.95rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.36);
+    border-radius: 0.42rem;
+    padding: 0.25rem 0.65rem;
+    background: rgb(var(--hud-surface-alt-rgb) / 0.86);
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
+    font-size: 0.72rem;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition:
+      border-color 180ms ease,
+      box-shadow 180ms ease,
+      opacity 180ms ease;
+  }
+
+  .tool-btn:hover:not(:disabled) {
+    border-color: rgb(var(--hud-cyan-rgb) / 0.46);
+    box-shadow: inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08);
+  }
+
+  .tool-btn:disabled {
+    opacity: 0.58;
+    cursor: default;
+  }
+
+  .path-field {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: 0.45rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.32);
+    border-radius: 0.42rem;
+    padding: 0.25rem 0.55rem;
+    background: rgb(var(--hud-surface-rgb) / 0.76);
+  }
+
+  .path-label {
+    color: rgb(var(--hud-text-dim-rgb) / 0.84);
+    font-size: 0.63rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .path-value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: rgb(var(--hud-text-main-rgb) / 0.97);
+    font-size: 0.76rem;
+    letter-spacing: 0.03em;
+  }
+
+  .explorer-content {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: 200px minmax(0, 1fr);
+    gap: 0.62rem;
+    padding: 0.72rem 0.85rem;
+  }
+
+  .roots-list {
+    min-height: 0;
+    display: grid;
+    grid-auto-rows: min-content;
+    gap: 0.35rem;
+    border: 1px solid rgb(95 132 158 / 0.28);
+    border-radius: 0.5rem;
+    padding: 0.42rem;
+    background: rgb(7 13 18 / 0.78);
+    overflow: auto;
+  }
+
+  .root-btn {
+    border: 1px solid transparent;
+    border-radius: 0.34rem;
+    padding: 0.35rem 0.45rem;
+    text-align: left;
+    background: transparent;
+    color: rgb(167 189 208 / 0.94);
+    font-size: 0.74rem;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    transition:
+      border-color 180ms ease,
+      background-color 180ms ease,
+      color 180ms ease;
+  }
+
+  .root-btn:hover {
+    border-color: rgb(62 232 255 / 0.3);
+    color: #e5f5ff;
+  }
+
+  .root-btn.is-active {
+    border-color: rgb(133 255 68 / 0.46);
+    background: rgb(24 33 22 / 0.7);
+    color: rgb(237 255 228 / 0.98);
+  }
+
+  .entries-wrap {
+    min-height: 0;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    border: 1px solid rgb(95 132 158 / 0.28);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: rgb(6 11 16 / 0.78);
+  }
+
+  .entries-head {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 110px 180px;
+    gap: 0.45rem;
+    padding: 0.44rem 0.55rem;
+    border-bottom: 1px solid rgb(95 132 158 / 0.24);
+    color: rgb(141 164 183 / 0.88);
+    font-size: 0.62rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .entries-empty {
+    margin: 0;
+    display: grid;
+    place-items: center;
+    color: rgb(148 171 187 / 0.86);
+    font-size: 0.75rem;
+    letter-spacing: 0.03em;
+  }
+
+  .entries-body {
+    min-height: 0;
+    overflow: auto;
+    padding: 0.18rem;
+    display: grid;
+    grid-auto-rows: min-content;
+    gap: 0.18rem;
+  }
+
+  .entry-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 110px 180px;
+    gap: 0.45rem;
+    align-items: center;
+    border: 1px solid transparent;
+    border-radius: 0.32rem;
+    padding: 0.32rem 0.4rem;
+    background: transparent;
+    color: rgb(204 227 243 / 0.94);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      border-color 160ms ease,
+      background-color 160ms ease;
+  }
+
+  .entry-row:hover {
+    border-color: rgb(62 232 255 / 0.26);
+    background: rgb(11 18 24 / 0.56);
+  }
+
+  .entry-row.is-selected {
+    border-color: rgb(133 255 68 / 0.46);
+    background:
+      linear-gradient(180deg, rgb(24 33 22 / 0.86), rgb(14 21 14 / 0.78)),
+      radial-gradient(circle at 6% 50%, rgb(133 255 68 / 0.15), transparent 58%);
+    box-shadow: inset 0 0 0 1px rgb(230 255 220 / 0.06);
+  }
+
+  .entry-name {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+  }
+
+  .entry-icon {
+    inline-size: 2.15rem;
+    block-size: 1.2rem;
+    border: 1px solid rgb(95 132 158 / 0.36);
+    border-radius: 0.22rem;
+    display: grid;
+    place-items: center;
+    color: rgb(150 177 198 / 0.9);
+    font-size: 0.54rem;
+    letter-spacing: 0.08em;
+    background: rgb(9 16 22 / 0.72);
+    flex-shrink: 0;
+  }
+
+  .entry-row.is-selected .entry-icon {
+    border-color: rgb(133 255 68 / 0.44);
+    color: rgb(214 252 190 / 0.95);
+  }
+
+  .entry-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.76rem;
+    letter-spacing: 0.03em;
+  }
+
+  .entry-size,
+  .entry-time {
+    color: rgb(152 176 194 / 0.88);
+    font-size: 0.68rem;
+    letter-spacing: 0.03em;
+    white-space: nowrap;
+    text-align: right;
+  }
+
+  .explorer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.7rem;
+    border-top: 1px solid rgb(95 132 158 / 0.24);
+    padding: 0.68rem 0.85rem 0.76rem;
+    background: linear-gradient(0deg, rgb(5 10 14 / 0.72), transparent);
+  }
+
+  .name-input-wrap {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 0.45rem;
+    flex: 1;
+  }
+
+  .name-label {
+    color: rgb(140 163 181 / 0.86);
+    font-size: 0.66rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .name-input {
+    min-inline-size: 0;
+    border: 1px solid rgb(95 132 158 / 0.36);
+    border-radius: 0.36rem;
+    padding: 0.4rem 0.55rem;
+    background: rgb(8 14 19 / 0.8);
+    color: rgb(223 242 255 / 0.97);
+    font-size: 0.76rem;
+    letter-spacing: 0.03em;
+    outline: none;
+    transition:
+      border-color 170ms ease,
+      box-shadow 170ms ease;
+  }
+
+  .name-input:focus-visible {
+    border-color: rgb(62 232 255 / 0.52);
+    box-shadow: 0 0 0 2px rgb(62 232 255 / 0.14);
+  }
+
+  .csv-hint {
+    margin: 0;
+    color: rgb(150 173 189 / 0.9);
+    font-size: 0.7rem;
+    letter-spacing: 0.04em;
+  }
+
+  .footer-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.42rem;
+  }
+
+  .action-btn {
+    min-block-size: 2rem;
+    border-radius: 999px;
+    padding: 0.28rem 0.78rem;
+    font-size: 0.74rem;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition:
+      border-color 180ms ease,
+      opacity 160ms ease,
+      box-shadow 180ms ease;
+  }
+
+  .action-btn.cancel {
+    border: 1px solid rgb(95 132 158 / 0.36);
+    background: rgb(9 16 21 / 0.86);
+    color: rgb(206 228 244 / 0.94);
+  }
+
+  .action-btn.cancel:hover:not(:disabled) {
+    border-color: rgb(122 198 255 / 0.48);
+  }
+
+  .action-btn.confirm {
+    border: 1px solid rgb(133 255 68 / 0.48);
+    background:
+      linear-gradient(180deg, rgb(25 35 23 / 0.96), rgb(13 20 13 / 0.92)),
+      radial-gradient(circle at 50% 0, rgb(133 255 68 / 0.14), transparent 58%);
+    color: rgb(240 255 233 / 0.98);
+  }
+
+  .action-btn.confirm:hover:not(:disabled) {
+    border-color: rgb(176 255 132 / 0.62);
+    box-shadow: 0 0 10px rgb(133 255 68 / 0.14);
+  }
+
+  .action-btn:disabled {
+    opacity: 0.55;
+    cursor: default;
+  }
+
+  @media (max-width: 900px) {
+    .explorer-content {
+      grid-template-columns: 1fr;
+      grid-template-rows: 140px minmax(0, 1fr);
+    }
+
+    .roots-list {
+      grid-auto-flow: column;
+      grid-auto-columns: minmax(120px, 1fr);
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .explorer-modal {
+      block-size: min(760px, 100%);
+    }
+
+    .entries-head,
+    .entry-row {
+      grid-template-columns: minmax(0, 1fr) 90px;
+    }
+
+    .entries-head span:last-child,
+    .entry-time {
+      display: none;
+    }
+
+    .explorer-footer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .footer-actions {
+      justify-content: flex-end;
+    }
+  }
+</style>

src/lib/components/HudPanel.svelte

@@ -5,6 +5,7 @@
     HudConfigLink,
     HudNoticeTone,
     LocaleCode,
+    MatrixDisplayMode,
     WindowControlAction
   } from "$lib/types/hud";
 
@@ -29,6 +30,10 @@
   export let refreshPortsLabel = "";
   export let configLinksLabel = "";
   export let configLinks: HudConfigLink[] = [];
+  export let matrixViewLabel = "";
+  export let matrixViewNumericLabel = "";
+  export let matrixViewDotsLabel = "";
+  export let matrixDisplayMode: MatrixDisplayMode = "dots";
   export let connectActionLabel = "";
   export let disconnectActionLabel = "";
   export let exportActionLabel = "";
@@ -41,17 +46,18 @@
   export let isExporting = false;
   export let isExportDisabled = false;
   export let isWindowMaximized = false;
-  let csvInputEl: HTMLInputElement | undefined;
 
   const dispatch = createEventDispatcher<{
     windowcontrol: WindowControlAction;
     localechange: LocaleCode;
     configlink: string;
+    matrixdisplaytoggle: boolean;
     portchange: string;
     serialrefresh: void;
     serialconnect: string;
     serialexport: void;
-    csvimport: File;
+    csvimport: void;
+    noticeclear: void;
   }>();
 
   const connectionToneByState: Record<ConnectionState, "ok" | "warn" | "idle"> = {
@@ -89,6 +95,10 @@
     dispatch("configlink", linkId);
   }
 
+  function emitMatrixDisplayToggle(): void {
+    dispatch("matrixdisplaytoggle", matrixDisplayMode !== "dots");
+  }
+
   function emitPortChange(event: Event): void {
     const target = event.currentTarget as HTMLSelectElement;
     dispatch("portchange", target.value);
@@ -106,17 +116,12 @@
     dispatch("serialexport");
   }
 
-  function openCsvPicker(): void {
-    csvInputEl?.click();
+  function emitCsvImport(): void {
+    dispatch("csvimport");
   }
 
-  function emitCsvImport(event: Event): void {
-    const target = event.currentTarget as HTMLInputElement;
-    const file = target.files?.[0];
-    if (file) {
-      dispatch("csvimport", file);
-    }
-    target.value = "";
+  function emitNoticeClear(): void {
+    dispatch("noticeclear");
   }
 </script>
 
@@ -180,6 +185,24 @@
         {/each}
       </section>
 
+      <section class="matrix-switch-wrap" aria-label={matrixViewLabel}>
+        <span class="matrix-switch-label">{matrixViewLabel}</span>
+        <button
+          type="button"
+          class="matrix-switch-btn"
+          class:is-active={matrixDisplayMode === "dots"}
+          role="switch"
+          aria-checked={matrixDisplayMode === "dots"}
+          aria-label={matrixViewDotsLabel}
+          on:click={emitMatrixDisplayToggle}
+        >
+          <span class="matrix-switch-track" aria-hidden="true">
+            <span class="matrix-switch-thumb"></span>
+          </span>
+          <span class="matrix-switch-copy">{matrixDisplayMode === "dots" ? matrixViewDotsLabel : matrixViewNumericLabel}</span>
+        </button>
+      </section>
+
       <section class="state-card" aria-label={connectionLabel}>
         <span class="state-dot" class:ok={connectionTone === "ok"} class:warn={connectionTone === "warn"}></span>
         <span class="state-label">{connectionLabel}</span>
@@ -246,7 +269,7 @@
         <span>{exportButtonText}</span>
       </button>
 
-      <button type="button" class="import-btn" on:click={openCsvPicker}>
+      <button type="button" class="import-btn" on:click={emitCsvImport}>
         <svg viewBox="0 0 16 16" aria-hidden="true">
           <path d="M8 10.8V3.6"></path>
           <path d="M5.4 6.3L8 3.6l2.6 2.7"></path>
@@ -254,13 +277,6 @@
         </svg>
         <span>{importActionLabel}</span>
       </button>
-      <input
-        bind:this={csvInputEl}
-        class="hidden-input"
-        type="file"
-        accept=".csv,text/csv"
-        on:change={emitCsvImport}
-      />
 
       <section class="locale-switch" aria-label="Language">
         <button
@@ -283,9 +299,17 @@
     </div>
 
     {#if connectionNotice}
-      <p class="connection-notice tone-{connectionNoticeTone}" role={connectionNoticeTone === "warn" ? "alert" : "status"}>
-        {connectionNotice}
-      </p>
+      <div class="connection-notice tone-{connectionNoticeTone}" role={connectionNoticeTone === "warn" ? "alert" : "status"}>
+        <p class="connection-notice-text">{connectionNotice}</p>
+        <button
+          type="button"
+          class="notice-close-btn"
+          aria-label={locale === "zh-CN" ? "关闭提示" : "Dismiss notice"}
+          on:click={emitNoticeClear}
+        >
+          ×
+        </button>
+      </div>
     {/if}
 
     <section class="info-grid">
@@ -310,15 +334,25 @@
     display: grid;
     grid-template-rows: auto auto;
     gap: clamp(0.5rem, 1.2vw, 0.85rem);
+    --panel-line: rgb(var(--hud-border-rgb) / 0.34);
+    --panel-line-soft: rgb(var(--hud-border-rgb) / 0.22);
+    --panel-line-strong: rgb(var(--hud-border-strong-rgb) / 0.42);
+    --panel-surface: rgb(var(--hud-surface-rgb) / 0.7);
+    --panel-surface-strong: rgb(var(--hud-surface-alt-rgb) / 0.84);
+    --panel-surface-deep: rgb(var(--hud-surface-deep-rgb) / 0.9);
+    --panel-text: rgb(var(--hud-text-main-rgb) / 0.96);
+    --panel-text-dim: rgb(var(--hud-text-dim-rgb) / 0.84);
+    --panel-glow: rgb(var(--hud-glow-rgb) / 0.12);
+    --panel-glow-alt: rgb(var(--hud-glow-alt-rgb) / 0.12);
   }
 
   .title-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid rgb(108 143 166 / 0.22);
+    border-bottom: 1px solid var(--panel-line-soft);
     padding: 0.05rem 0.1rem 0.55rem 0.1rem;
-    background: linear-gradient(180deg, rgb(15 22 28 / 0.32), transparent);
+    background: linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.32), transparent);
   }
 
   .title-cluster {
@@ -332,15 +366,15 @@
     inline-size: 0.52rem;
     block-size: 0.52rem;
     border-radius: 50%;
-    background: rgb(133 255 68 / 0.95);
-    box-shadow: 0 0 0 2px rgb(133 255 68 / 0.14);
+    background: rgb(var(--hud-lime-rgb) / 0.95);
+    box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.14);
   }
 
   .app-name {
     font-size: 1rem;
     font-weight: 700;
     letter-spacing: 0.07em;
-    color: #f0fbff;
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
     text-transform: uppercase;
   }
 
@@ -363,10 +397,10 @@
     justify-content: center;
     inline-size: 1.8rem;
     block-size: 1.52rem;
-    border: 1px solid rgb(82 120 146 / 0.36);
+    border: 1px solid var(--panel-line);
     border-radius: 0.34rem;
-    color: rgb(179 245 255 / 0.92);
-    background: rgb(8 12 16 / 0.82);
+    color: rgb(var(--hud-cyan-rgb) / 0.92);
+    background: rgb(var(--hud-surface-rgb) / 0.82);
     cursor: pointer;
     transition:
       background-color 200ms ease,
@@ -385,27 +419,27 @@
   }
 
   .window-btn:hover {
-    border-color: rgb(62 232 255 / 0.42);
-    background: rgb(14 20 26 / 0.9);
-    color: #f3fdff;
+    border-color: rgb(var(--hud-cyan-rgb) / 0.42);
+    background: rgb(var(--hud-surface-alt-rgb) / 0.9);
+    color: rgb(var(--hud-text-main-rgb) / 1);
   }
 
   .window-btn.is-maximized {
-    border-color: rgb(133 255 68 / 0.5);
-    color: rgb(211 255 190 / 0.92);
+    border-color: rgb(var(--hud-lime-rgb) / 0.5);
+    color: rgb(var(--hud-lime-rgb) / 0.92);
   }
 
   .window-btn.is-close:hover {
-    border-color: rgb(255 91 63 / 0.62);
-    background: rgb(27 11 10 / 0.9);
-    color: rgb(255 200 188 / 0.96);
+    border-color: rgb(var(--hud-orange-rgb) / 0.62);
+    background: rgb(var(--hud-surface-deep-rgb) / 0.92);
+    color: rgb(var(--hud-orange-rgb) / 0.96);
   }
 
   .control-bar {
     display: grid;
     gap: 0.45rem;
     padding: 0 0.1rem;
-    background: linear-gradient(90deg, rgb(62 232 255 / 0.02), transparent 45%, rgb(133 255 68 / 0.015));
+    background: linear-gradient(90deg, rgb(var(--hud-glow-rgb) / 0.02), transparent 45%, rgb(var(--hud-glow-alt-rgb) / 0.015));
   }
 
   .control-main-row {
@@ -420,32 +454,134 @@
     align-items: center;
     gap: 0.42rem;
     min-block-size: 2rem;
-    border: 1px solid rgb(95 132 158 / 0.3);
+    border: 1px solid var(--panel-line);
     border-radius: 999px;
     padding: 0.2rem 0.62rem 0.2rem 0.36rem;
-    background: rgb(10 16 20 / 0.68);
+    background: var(--panel-surface);
+  }
+
+  .matrix-switch-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-block-size: 2rem;
+    border: 1px solid var(--panel-line);
+    border-radius: 999px;
+    padding: 0.16rem 0.22rem 0.16rem 0.56rem;
+    background: var(--panel-surface);
+  }
+
+  .matrix-switch-label {
+    color: var(--panel-text-dim);
+    font-size: 0.66rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .matrix-switch-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.42rem;
+    min-block-size: 1.62rem;
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.26);
+    border-radius: 999px;
+    padding: 0.18rem 0.28rem 0.18rem 0.22rem;
+    background: rgb(var(--hud-surface-deep-rgb) / 0.84);
+    color: rgb(var(--hud-text-main-rgb) / 0.92);
+    cursor: pointer;
+    transition:
+      border-color 180ms ease,
+      box-shadow 180ms ease,
+      background-color 180ms ease,
+      color 180ms ease;
+  }
+
+  .matrix-switch-btn:hover {
+    border-color: rgb(var(--hud-cyan-rgb) / 0.4);
+  }
+
+  .matrix-switch-btn.is-active {
+    border-color: rgb(var(--hud-cyan-rgb) / 0.5);
+    background:
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.94), rgb(var(--hud-surface-rgb) / 0.9)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-cyan-rgb) / 0.12), transparent 60%);
+    box-shadow:
+      inset 0 0 0 1px rgb(var(--hud-text-main-rgb) / 0.05),
+      0 0 12px rgb(var(--hud-cyan-rgb) / 0.12);
+  }
+
+  .matrix-switch-track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    inline-size: 2.2rem;
+    block-size: 1.2rem;
+    border-radius: 999px;
+    padding: 0.14rem;
+    background: rgb(var(--hud-surface-rgb) / 0.9);
+    box-shadow: inset 0 0 0 1px rgb(var(--hud-border-rgb) / 0.24);
+    transition:
+      background-color 180ms ease,
+      box-shadow 180ms ease;
+  }
+
+  .matrix-switch-btn.is-active .matrix-switch-track {
+    background: rgb(var(--hud-cyan-rgb) / 0.18);
+    box-shadow: inset 0 0 0 1px rgb(var(--hud-cyan-rgb) / 0.18);
+  }
+
+  .matrix-switch-thumb {
+    inline-size: 0.92rem;
+    block-size: 0.92rem;
+    border-radius: 50%;
+    background: rgb(var(--hud-text-main-rgb) / 0.96);
+    box-shadow:
+      0 1px 4px rgb(0 0 0 / 0.26),
+      0 0 10px rgb(var(--hud-text-main-rgb) / 0.12);
+    transform: translateX(0);
+    transition:
+      transform 180ms ease,
+      background-color 180ms ease,
+      box-shadow 180ms ease;
+  }
+
+  .matrix-switch-btn.is-active .matrix-switch-thumb {
+    transform: translateX(0.96rem);
+    background: rgb(var(--hud-cyan-rgb) / 0.96);
+    box-shadow:
+      0 1px 4px rgb(0 0 0 / 0.26),
+      0 0 12px rgb(var(--hud-cyan-rgb) / 0.22);
+  }
+
+  .matrix-switch-copy {
+    font-size: 0.74rem;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    line-height: 1;
   }
 
   .state-dot {
     inline-size: 0.55rem;
     block-size: 0.55rem;
     border-radius: 50%;
-    background: rgb(143 165 186 / 0.92);
-    box-shadow: 0 0 0 2px rgb(143 165 186 / 0.14);
+    background: rgb(var(--hud-text-dim-rgb) / 0.92);
+    box-shadow: 0 0 0 2px rgb(var(--hud-text-dim-rgb) / 0.14);
   }
 
   .state-dot.ok {
     background: var(--hud-lime);
-    box-shadow: 0 0 0 2px rgb(133 255 68 / 0.16);
+    box-shadow: 0 0 0 2px rgb(var(--hud-lime-rgb) / 0.16);
   }
 
   .state-dot.warn {
     background: var(--hud-orange);
-    box-shadow: 0 0 0 2px rgb(255 91 63 / 0.16);
+    box-shadow: 0 0 0 2px rgb(var(--hud-orange-rgb) / 0.16);
   }
 
   .state-label {
-    color: rgb(154 176 194 / 0.84);
+    color: var(--panel-text-dim);
     font-size: 0.66rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -453,7 +589,7 @@
   }
 
   .state-value {
-    color: #ecf8ff;
+    color: var(--panel-text);
     font-size: 0.92rem;
     letter-spacing: 0.02em;
     font-weight: 600;
@@ -465,10 +601,10 @@
     align-items: center;
     gap: 0.38rem;
     min-block-size: 2rem;
-    border: 1px solid rgb(95 132 158 / 0.3);
+    border: 1px solid var(--panel-line);
     border-radius: 999px;
     padding: 0.18rem 0.2rem 0.18rem 0.56rem;
-    background: rgb(10 16 20 / 0.7);
+    background: var(--panel-surface);
     min-inline-size: 0;
   }
 
@@ -479,7 +615,7 @@
   }
 
   .serial-tag {
-    color: rgb(154 176 194 / 0.84);
+    color: var(--panel-text-dim);
     font-size: 0.66rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -491,11 +627,11 @@
     appearance: none;
     inline-size: 100%;
     min-inline-size: 7rem;
-    border: 1px solid rgb(95 132 158 / 0.32);
+    border: 1px solid var(--panel-line);
     border-radius: 999px;
     padding: 0.3rem 1.5rem 0.3rem 0.6rem;
-    background: rgb(4 11 16 / 0.84);
-    color: #d5ebfb;
+    background: rgb(var(--hud-surface-deep-rgb) / 0.84);
+    color: rgb(var(--hud-text-main-rgb) / 0.92);
     font-size: 0.84rem;
     letter-spacing: 0.06em;
     text-transform: uppercase;
@@ -506,12 +642,12 @@
   }
 
   .serial-select-input:hover {
-    border-color: rgb(62 232 255 / 0.36);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.36);
   }
 
   .serial-select-input:focus-visible {
-    border-color: rgb(62 232 255 / 0.5);
-    box-shadow: 0 0 0 2px rgb(62 232 255 / 0.14);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.5);
+    box-shadow: 0 0 0 2px rgb(var(--hud-cyan-rgb) / 0.14);
   }
 
   .serial-select-caret {
@@ -520,8 +656,8 @@
     inset-block-start: 50%;
     inline-size: 0.42rem;
     block-size: 0.42rem;
-    border-right: 1px solid rgb(153 189 214 / 0.82);
-    border-bottom: 1px solid rgb(153 189 214 / 0.82);
+    border-right: 1px solid rgb(var(--hud-text-main-rgb) / 0.82);
+    border-bottom: 1px solid rgb(var(--hud-text-main-rgb) / 0.82);
     transform: translateY(-64%) rotate(45deg);
     pointer-events: none;
   }
@@ -531,13 +667,13 @@
     align-items: center;
     gap: 0.36rem;
     min-block-size: 2rem;
-    border: 1px solid rgb(95 132 158 / 0.34);
+    border: 1px solid var(--panel-line);
     border-radius: 999px;
     padding: 0.24rem 0.64rem;
     background:
-      linear-gradient(180deg, rgb(11 18 24 / 0.92), rgb(7 12 17 / 0.88)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.1), transparent 58%);
-    color: rgb(214 236 248 / 0.96);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.92), rgb(var(--hud-surface-rgb) / 0.88)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 58%);
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     font-size: 0.74rem;
     letter-spacing: 0.05em;
     cursor: pointer;
@@ -560,10 +696,10 @@
   }
 
   .refresh-btn:hover:not(:disabled) {
-    border-color: rgb(62 232 255 / 0.44);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.44);
     box-shadow:
-      inset 0 0 0 1px rgb(167 218 252 / 0.07),
-      0 0 10px rgb(62 232 255 / 0.1);
+      inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.07),
+      0 0 10px rgb(var(--hud-glow-rgb) / 0.1);
   }
 
   .refresh-btn:disabled {
@@ -576,13 +712,13 @@
     align-items: center;
     gap: 0.42rem;
     min-block-size: 2rem;
-    border: 1px solid rgb(133 255 68 / 0.4);
+    border: 1px solid rgb(var(--hud-lime-rgb) / 0.4);
     border-radius: 999px;
     padding: 0.24rem 0.76rem;
     background:
-      linear-gradient(180deg, rgb(24 33 22 / 0.96), rgb(12 19 12 / 0.92)),
-      radial-gradient(circle at 50% 0, rgb(133 255 68 / 0.12), transparent 58%);
-    color: #f2ffe8;
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-alt-rgb) / 0.12), transparent 58%);
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
     font-size: 0.78rem;
     letter-spacing: 0.05em;
     cursor: pointer;
@@ -595,10 +731,10 @@
   }
 
   .connect-btn:hover:not(:disabled) {
-    border-color: rgb(170 255 121 / 0.62);
+    border-color: rgb(var(--hud-lime-rgb) / 0.62);
     box-shadow:
-      inset 0 0 0 1px rgb(231 255 214 / 0.08),
-      0 0 12px rgb(133 255 68 / 0.14);
+      inset 0 0 0 1px rgb(var(--hud-text-main-rgb) / 0.08),
+      0 0 12px rgb(var(--hud-glow-alt-rgb) / 0.14);
   }
 
   .connect-btn:disabled {
@@ -607,19 +743,19 @@
   }
 
   .connect-btn.is-busy {
-    border-color: rgb(255 91 63 / 0.48);
+    border-color: rgb(var(--hud-orange-rgb) / 0.48);
     background:
-      linear-gradient(180deg, rgb(38 18 15 / 0.96), rgb(23 10 10 / 0.92)),
-      radial-gradient(circle at 50% 0, rgb(255 91 63 / 0.12), transparent 58%);
-    color: rgb(255 223 217 / 0.96);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-deep-rgb) / 0.92)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-orange-rgb) / 0.12), transparent 58%);
+    color: rgb(var(--hud-orange-rgb) / 0.96);
   }
 
   .connect-btn.is-connected {
-    border-color: rgb(62 232 255 / 0.46);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.46);
     background:
-      linear-gradient(180deg, rgb(10 28 32 / 0.96), rgb(6 15 18 / 0.92)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.14), transparent 58%);
-    color: rgb(227 251 255 / 0.98);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.96), rgb(var(--hud-surface-rgb) / 0.92)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-cyan-rgb) / 0.14), transparent 58%);
+    color: rgb(var(--hud-text-main-rgb) / 0.98);
   }
 
   .connect-btn-indicator {
@@ -724,20 +860,22 @@
       0 0 12px rgb(122 198 255 / 0.14);
   }
 
-  .hidden-input {
-    position: absolute;
-    inline-size: 0;
-    block-size: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
   .connection-notice {
     margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.6rem;
     border: 1px solid rgb(95 132 158 / 0.32);
     border-radius: 0.5rem;
-    padding: 0.45rem 0.7rem;
+    padding: 0.38rem 0.45rem 0.38rem 0.7rem;
     background: rgb(8 14 19 / 0.72);
+  }
+
+  .connection-notice-text {
+    margin: 0;
+    flex: 1;
+    min-width: 0;
     color: rgb(214 236 248 / 0.96);
     font-size: 0.72rem;
     letter-spacing: 0.03em;
@@ -758,7 +896,41 @@
   .connection-notice.tone-info {
     border-color: rgb(62 232 255 / 0.34);
     background: rgb(8 17 22 / 0.76);
-    color: rgb(214 236 248 / 0.96);
+  }
+
+  .notice-close-btn {
+    inline-size: 1.36rem;
+    block-size: 1.36rem;
+    border: 1px solid rgb(116 151 176 / 0.4);
+    border-radius: 0.28rem;
+    background: rgb(7 12 16 / 0.82);
+    color: rgb(194 225 245 / 0.92);
+    font-size: 0.92rem;
+    line-height: 1;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      border-color 180ms ease,
+      color 180ms ease,
+      background-color 180ms ease;
+  }
+
+  .notice-close-btn:hover {
+    border-color: rgb(62 232 255 / 0.5);
+    color: rgb(237 250 255 / 0.98);
+    background: rgb(9 16 22 / 0.92);
+  }
+
+  .connection-notice.tone-warn .notice-close-btn:hover {
+    border-color: rgb(255 91 63 / 0.6);
+    color: rgb(255 227 220 / 0.98);
+    background: rgb(34 13 12 / 0.9);
+  }
+
+  .connection-notice.tone-ok .notice-close-btn:hover {
+    border-color: rgb(133 255 68 / 0.56);
+    color: rgb(236 255 227 / 0.98);
+    background: rgb(17 28 14 / 0.9);
   }
 
   .info-grid {

src/lib/components/PressureMatrixViewer.svelte

@@ -3,12 +3,12 @@
   import * as THREE from "three";
   import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
   import { pressureColorPalettes } from "$lib/config/color-map";
-  import type { PressureColorMapPreset } from "$lib/types/hud";
+  import type { HudSummary, MatrixDisplayMode, PressureColorMapPreset } from "$lib/types/hud";
 
   interface ViewerStats {
-    total: number;
-    max: number;
-    avg: number;
+    current: number | null;
+    max: number | null;
+    min: number | null;
   }
 
   interface MatrixLayout {
@@ -26,15 +26,18 @@
   export let matrixRows = 12;
   export let matrixCols = 7;
   export let rangeMin = 0;
-  export let rangeMax = 5000;
+  export let rangeMax = 16000;
   export let colorMapPreset: PressureColorMapPreset = "emerald";
+  export let matrixDisplayMode: MatrixDisplayMode = "dots";
+  export let summary: HudSummary | null = null;
+  export let showStatsPanel = true;
 
   let viewerEl: HTMLDivElement | undefined;
   let canvasEl: HTMLCanvasElement | undefined;
   let overlayEl: HTMLCanvasElement | undefined;
-  let stats: ViewerStats = { total: 0, max: 0, avg: 0 };
+  let stats: ViewerStats = { current: null, max: null, min: null };
 
-  const RAW_DATA_MAX = 5000;
+  const DEFAULT_RANGE_MAX = 16000;
   const BASE_MATRIX_SPAN = 24;
   const MATRIX_SPAN_GROWTH = 0.6;
   const MIN_MATRIX_SPAN = 24;
@@ -49,8 +52,8 @@
   const MAX_LABEL_SCALE = 2.45;
   const MATRIX_OFFSET_Y = -2.4;
   const MATRIX_OFFSET_Z = 12;
-  const HEIGHT_SCALE = 18.5;
-  const BASE_HEIGHT = 0.18;
+  const HEIGHT_SCALE = 10.6;
+  const BASE_HEIGHT = 0.12;
   const GLOW_START = 0.3;
   const SMOOTHING_SPEED = 8.2;
   const CAMERA_FOV = 36;
@@ -62,9 +65,9 @@
   const CAMERA_TARGET_Y = MATRIX_OFFSET_Y + 0.2;
   const CAMERA_TARGET_Z = MATRIX_OFFSET_Z - 0.4;
   const MATRIX_ROTATION_Y = 0;
+  const rangeStopPositions = [0, 0.25, 0.5, 0.75, 0.875, 1] as const;
 
   const labelVector = new THREE.Vector3();
-  const whiteColor = new THREE.Color("#ffffff");
   $: resolvedColorPalette = pressureColorPalettes[colorMapPreset] ?? pressureColorPalettes.emerald;
   $: surfaceBaseColor = new THREE.Color(resolvedColorPalette.surfaceBase);
   $: surfaceLowColor = new THREE.Color(resolvedColorPalette.surfaceLow);
@@ -75,6 +78,39 @@
   $: labelLowColor = new THREE.Color(resolvedColorPalette.labelLow);
   $: labelMidColor = new THREE.Color(resolvedColorPalette.labelMid);
   $: labelHighColor = new THREE.Color(resolvedColorPalette.labelHigh);
+  $: rangeStopColors = resolvedColorPalette.rangeStops.map((stop) => new THREE.Color(stop));
+  $: sceneClearColor = new THREE.Color(resolvedColorPalette.uiTheme.bg30);
+  $: sceneBoardColor = new THREE.Color(resolvedColorPalette.uiTheme.bg20);
+  $: sceneGridCenterColor = new THREE.Color(resolvedColorPalette.surfaceMid);
+  $: sceneGridLineColor = new THREE.Color(resolvedColorPalette.uiTheme.bg20);
+  $: sceneAmbientLightColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.textMainRgb);
+  $: sceneKeyLightColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowAltRgb);
+  $: sceneAccentLightColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowRgb);
+  $: surfaceThemeAccentColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowRgb);
+  $: labelThemeAccentColor = rgbTripletToThreeColor(resolvedColorPalette.uiTheme.glowRgb);
+  $: labelHighlightCss = colorToCss(rangeStopColors[5] ?? surfaceHotColor);
+  $: viewerThemeStyle = [
+    `--matrix-bg-10: ${resolvedColorPalette.uiTheme.bg10}`,
+    `--matrix-bg-20: ${resolvedColorPalette.uiTheme.bg20}`,
+    `--matrix-bg-30: ${resolvedColorPalette.uiTheme.bg30}`,
+    `--matrix-text-main-rgb: ${resolvedColorPalette.uiTheme.textMainRgb}`,
+    `--matrix-text-dim-rgb: ${resolvedColorPalette.uiTheme.textDimRgb}`,
+    `--matrix-border-rgb: ${resolvedColorPalette.uiTheme.borderRgb}`,
+    `--matrix-border-strong-rgb: ${resolvedColorPalette.uiTheme.borderStrongRgb}`,
+    `--matrix-surface-rgb: ${resolvedColorPalette.uiTheme.surfaceRgb}`,
+    `--matrix-surface-alt-rgb: ${resolvedColorPalette.uiTheme.surfaceAltRgb}`,
+    `--matrix-surface-deep-rgb: ${resolvedColorPalette.uiTheme.surfaceDeepRgb}`,
+    `--matrix-glow-rgb: ${resolvedColorPalette.uiTheme.glowRgb}`,
+    `--matrix-glow-alt-rgb: ${resolvedColorPalette.uiTheme.glowAltRgb}`
+  ].join("; ");
+
+  let rendererRef: THREE.WebGLRenderer | null = null;
+  let boardMaterialRef: THREE.MeshBasicMaterial | null = null;
+  let gridRef: THREE.GridHelper | null = null;
+  let gridMaterialRef: THREE.Material | THREE.Material[] | null = null;
+  let ambientLightRef: THREE.AmbientLight | null = null;
+  let dirLightRef: THREE.DirectionalLight | null = null;
+  let sideLightRef: THREE.DirectionalLight | null = null;
 
   function sanitizeGridValue(value: number): number {
     return clamp(Math.round(Number.isFinite(value) ? value : 12), 1, 128);
@@ -82,7 +118,7 @@
 
   function sanitizeRangePair(minValue: number, maxValue: number): { min: number; max: number } {
     const resolvedMin = Math.round(Number.isFinite(minValue) ? minValue : 0);
-    const resolvedMax = Math.max(Math.round(Number.isFinite(maxValue) ? maxValue : RAW_DATA_MAX), resolvedMin + 1);
+    const resolvedMax = Math.max(Math.round(Number.isFinite(maxValue) ? maxValue : DEFAULT_RANGE_MAX), resolvedMin + 1);
     return { min: resolvedMin, max: resolvedMax };
   }
 
@@ -92,7 +128,16 @@
   $: resolvedRangeMin = resolvedRange.min;
   $: resolvedRangeMax = resolvedRange.max;
   $: matrixLayout = buildMatrixLayout(resolvedMatrixRows, resolvedMatrixCols);
-  $: statsNote = `${resolvedMatrixRows}x${resolvedMatrixCols} / color range ${resolvedRangeMin}-${resolvedRangeMax} / label raw`;
+  $: statsModeLabel = matrixDisplayMode === "dots" ? "dot pulse" : "numeric pulse";
+  $: statsNote = `${resolvedMatrixRows}x${resolvedMatrixCols} / force range ${resolvedRangeMin}-${resolvedRangeMax} / ${statsModeLabel}`;
+
+  function formatForceStat(value: number | null): string {
+    if (value == null || !Number.isFinite(value)) {
+      return "--";
+    }
+
+    return value.toFixed(1);
+  }
 
   function clamp(value: number, min: number, max: number): number {
     return Math.min(max, Math.max(min, value));
@@ -107,52 +152,49 @@
     return clamp((value - minValue) / Math.max(1, maxValue - minValue), 0, 1);
   }
 
-  function surfaceColorMap(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
-    const value = clamp(valueNormalized, 0, 1);
-    let mapped: THREE.Color;
-
-    if (value <= 0.45) {
-      const t = smoothstep(0, 0.45, value);
-      mapped = target.copy(surfaceBaseColor).lerp(surfaceLowColor, t);
-    } else if (value <= 0.78) {
-      const t = smoothstep(0.45, 0.78, value);
-      mapped = target.copy(surfaceLowColor).lerp(surfaceMidColor, t);
-    } else {
-      const t = smoothstep(0.78, 1, value);
-      mapped = target.copy(surfaceMidColor).lerp(surfaceHighColor, t);
+  function rgbTripletToThreeColor(rgbTriplet: string): THREE.Color {
+    return new THREE.Color(`rgb(${rgbTriplet.replace(/\s+/g, ", ")})`);
   }
 
-    const highlightStrength = smoothstep(0.82, 1, value) * 0.3;
-    return mapped.lerp(surfaceHotColor, highlightStrength);
+  function sampleRangeStopColor(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
+    const value = clamp(valueNormalized, 0, 1);
+
+    for (let index = 0; index < rangeStopPositions.length - 1; index += 1) {
+      const start = rangeStopPositions[index];
+      const end = rangeStopPositions[index + 1];
+      if (value <= end) {
+        const localT = smoothstep(start, end, value);
+        return target.copy(rangeStopColors[index]).lerp(rangeStopColors[index + 1], localT);
+      }
+    }
+
+    return target.copy(rangeStopColors[rangeStopColors.length - 1]);
+  }
+
+  function surfaceColorMap(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
+    const value = clamp(valueNormalized, 0, 1);
+    const mapped = sampleRangeStopColor(value, target);
+    const baseAccentStrength = (1 - smoothstep(0.08, 0.28, value)) * 0.16;
+    const highlightStrength = smoothstep(0.88, 1, value) * 0.2;
+    return mapped.lerp(surfaceThemeAccentColor, baseAccentStrength).lerp(surfaceHotColor, highlightStrength);
   }
 
   function glowColorMap(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
     const value = clamp(valueNormalized, 0, 1);
     const glowStrength = smoothstep(0.55, 1, value);
-    return surfaceColorMap(value, target).lerp(whiteColor, glowStrength * 0.42);
+    return surfaceColorMap(value, target).lerp(surfaceHotColor, glowStrength * 0.42);
   }
 
   function labelColorMap(valueNormalized: number, target: THREE.Color = new THREE.Color()): THREE.Color {
     const value = clamp(valueNormalized, 0, 1);
-    let mapped: THREE.Color;
-
-    if (value <= 0.34) {
-      const t = smoothstep(0, 0.34, value);
-      mapped = target.copy(labelZeroColor).lerp(labelLowColor, t);
-    } else if (value <= 0.76) {
-      const t = smoothstep(0.34, 0.76, value);
-      mapped = target.copy(labelLowColor).lerp(labelMidColor, t);
-    } else {
-      const t = smoothstep(0.76, 1, value);
-      mapped = target.copy(labelMidColor).lerp(labelHighColor, t);
-    }
-
-    const highlightStrength = smoothstep(0.8, 1, value) * 0.36;
-    return mapped.lerp(whiteColor, highlightStrength);
+    const mapped = sampleRangeStopColor(value, target);
+    const baseAccentStrength = (1 - smoothstep(0.08, 0.24, value)) * 0.18;
+    const highlightStrength = smoothstep(0.88, 1, value) * 0.12;
+    return mapped.lerp(labelThemeAccentColor, baseAccentStrength).lerp(labelHighColor, highlightStrength);
   }
 
   function shapeHeightValue(valueNormalized: number): number {
-    return Math.pow(clamp(valueNormalized, 0, 1), 0.74);
+    return Math.pow(clamp(valueNormalized, 0, 1), 0.9);
   }
 
   function shapeGlowStrength(valueNormalized: number): number {
@@ -170,7 +212,7 @@
     const gridSpan = Math.max(boardWidth, boardDepth) + boardPadding * 2;
     const gridDivisions = Math.round(clamp(longestEdge * 1.6, MIN_GRID_DIVISIONS, MAX_GRID_DIVISIONS));
     const labelScale = clamp(24 / (longestEdge + 2), MIN_LABEL_SCALE, MAX_LABEL_SCALE);
-    const labelFloatOffset = clamp(cellSpacing * 0.74, 0.64, 2.2);
+    const labelFloatOffset = clamp(cellSpacing * 0.42, 0.36, 1.12);
 
     return {
       cellSpacing,
@@ -208,7 +250,8 @@
 
   function copyExternalField(target: Float32Array, values: number[]): void {
     for (let index = 0; index < target.length; index += 1) {
-      target[index] = clamp(values[index] ?? 0, 0, RAW_DATA_MAX);
+      const value = Number(values[index] ?? 0);
+      target[index] = Number.isFinite(value) ? value : 0;
     }
   }
 
@@ -217,17 +260,86 @@
       return 0;
     }
 
-    return Math.round(clamp(rawValue, 0, Math.max(maxValue, RAW_DATA_MAX)));
+    return Math.round(rawValue);
   }
 
   function colorToCss(color: THREE.Color): string {
     return `rgb(${Math.round(color.r * 255)} ${Math.round(color.g * 255)} ${Math.round(color.b * 255)})`;
   }
 
+  function drawProjectedDot(
+    context: CanvasRenderingContext2D,
+    screenX: number,
+    screenY: number,
+    radius: number,
+    fillStyle: string,
+    glowStyle: string,
+    opacity: number
+  ): void {
+    context.globalAlpha = opacity;
+    context.shadowBlur = radius * 2.8;
+    context.shadowColor = glowStyle;
+    context.fillStyle = fillStyle;
+    context.beginPath();
+    context.arc(screenX, screenY, radius, 0, Math.PI * 2);
+    context.fill();
+  }
+
   $: labelPalette = Array.from({ length: 33 }, (_, index) => {
     const t = index / 32;
     return colorToCss(labelColorMap(t, new THREE.Color()));
   });
+  $: labelGlowPalette = Array.from({ length: 33 }, (_, index) => {
+    const t = index / 32;
+    return colorToCss(glowColorMap(t, new THREE.Color()));
+  });
+
+  function applyGridTheme(grid: THREE.GridHelper, divisions: number): void {
+    const colorAttribute = grid.geometry.getAttribute("color");
+    if (!(colorAttribute instanceof THREE.BufferAttribute)) {
+      return;
+    }
+
+    for (let division = 0; division <= divisions; division += 1) {
+      const lineColor = division === divisions / 2 ? sceneGridCenterColor : sceneGridLineColor;
+      const vertexBase = division * 4;
+
+      for (let vertexOffset = 0; vertexOffset < 4; vertexOffset += 1) {
+        colorAttribute.setXYZ(vertexBase + vertexOffset, lineColor.r, lineColor.g, lineColor.b);
+      }
+    }
+
+    colorAttribute.needsUpdate = true;
+  }
+
+  function applySceneTheme(): void {
+    if (!rendererRef || !boardMaterialRef || !gridRef || !gridMaterialRef) {
+      return;
+    }
+
+    rendererRef.setClearColor(sceneClearColor, 1);
+    boardMaterialRef.color.copy(sceneBoardColor);
+    boardMaterialRef.needsUpdate = true;
+    applyGridTheme(gridRef, matrixLayout.gridDivisions);
+
+    if (Array.isArray(gridMaterialRef)) {
+      for (const material of gridMaterialRef) {
+        material.transparent = true;
+        material.opacity = 0.034;
+        material.needsUpdate = true;
+      }
+    } else {
+      gridMaterialRef.transparent = true;
+      gridMaterialRef.opacity = 0.034;
+      gridMaterialRef.needsUpdate = true;
+    }
+
+    ambientLightRef?.color.copy(sceneAmbientLightColor);
+    dirLightRef?.color.copy(sceneKeyLightColor);
+    sideLightRef?.color.copy(sceneAccentLightColor);
+  }
+
+  $: applySceneTheme();
 
   onMount(() => {
     if (!viewerEl || !canvasEl || !overlayEl) {
@@ -251,8 +363,9 @@
       alpha: true,
       powerPreference: "high-performance"
     });
+    rendererRef = renderer;
     renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
-    renderer.setClearColor(0x06080a, 1);
+    renderer.setClearColor(sceneClearColor, 1);
     renderer.outputColorSpace = THREE.SRGBColorSpace;
 
     const scene = new THREE.Scene();
@@ -277,11 +390,14 @@
     controls.target.set(CAMERA_TARGET_X, CAMERA_TARGET_Y, CAMERA_TARGET_Z);
     controls.enabled = false;
 
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.26);
-    const dirLight = new THREE.DirectionalLight(0xffffff, 0.34);
+    const ambientLight = new THREE.AmbientLight(sceneAmbientLightColor, 0.26);
+    const dirLight = new THREE.DirectionalLight(sceneKeyLightColor, 0.34);
     dirLight.position.set(50, 100, 50);
-    const sideLight = new THREE.DirectionalLight(0x7cffba, 0.16);
+    const sideLight = new THREE.DirectionalLight(sceneAccentLightColor, 0.16);
     sideLight.position.set(-50, 50, -50);
+    ambientLightRef = ambientLight;
+    dirLightRef = dirLight;
+    sideLightRef = sideLight;
     scene.add(ambientLight, dirLight, sideLight);
 
     const matrixGroup = new THREE.Group();
@@ -292,29 +408,33 @@
     const board = new THREE.Mesh(
       new THREE.PlaneGeometry(boardWidth + boardPadding * 2, boardDepth + boardPadding * 2),
       new THREE.MeshBasicMaterial({
-        color: 0x05070a,
+        color: sceneBoardColor,
         transparent: true,
         opacity: 0.12,
         toneMapped: false
       })
     );
+    boardMaterialRef = board.material;
     board.rotation.x = -Math.PI / 2;
     board.position.y = -0.04;
     matrixGroup.add(board);
 
-    const grid = new THREE.GridHelper(gridSpan, gridDivisions, 0x1a2630, 0x0a1015);
+    const grid = new THREE.GridHelper(gridSpan, gridDivisions, sceneGridCenterColor, sceneGridLineColor);
+    gridRef = grid;
     grid.position.y = 0;
     const gridMaterial = grid.material;
+    gridMaterialRef = gridMaterial;
     if (Array.isArray(gridMaterial)) {
       for (const material of gridMaterial) {
         material.transparent = true;
-        material.opacity = 0.028;
+        material.opacity = 0.034;
       }
     } else {
       gridMaterial.transparent = true;
-      gridMaterial.opacity = 0.028;
+      gridMaterial.opacity = 0.034;
     }
     matrixGroup.add(grid);
+    applySceneTheme();
 
     const cellX = new Float32Array(instanceCount);
     const cellZ = new Float32Array(instanceCount);
@@ -333,7 +453,7 @@
     const compactField = new Uint16Array(instanceCount);
     let lastFrameAt = performance.now();
 
-    const drawNumberOverlay = () => {
+    const drawOverlay = () => {
       if (!viewerEl || !overlayEl) {
         return;
       }
@@ -366,10 +486,42 @@
 
         const normalized = normalizedField[index];
         const displayValue = compactField[index];
+        const bucket = Math.min(32, Math.round(normalized * 32));
+        const isDotsMode = matrixDisplayMode === "dots";
+
+        if (isDotsMode) {
+          const baseDotRadius = clamp(cellSpacing * 0.48, 7.2, 21.6);
+          const dotRadius = clamp(baseDotRadius + smoothstep(0, 1, normalized) * (cellSpacing * 0.86 + 9.6), 7.2, 15);
+          const dotOpacity = displayValue === 0 ? 0.62 : 0.98;
+
+          drawProjectedDot(
+            overlayContext,
+            screenX,
+            screenY,
+            dotRadius,
+            labelPalette[bucket],
+            labelGlowPalette[bucket],
+            dotOpacity
+          );
+
+          if (normalized >= 0.8) {
+            drawProjectedDot(
+              overlayContext,
+              screenX,
+              screenY,
+              dotRadius * 0.46,
+              labelHighlightCss,
+              labelHighlightCss,
+              smoothstep(0.8, 1, normalized) * 0.42
+            );
+          }
+
+          continue;
+        }
+
         const displayText = String(displayValue);
         const digitCount = displayText.length;
         const digitScale = digitCount <= 2 ? 1 : digitCount === 3 ? 0.86 : digitCount === 4 ? 0.74 : 0.64;
-        const bucket = Math.min(32, Math.round(normalized * 32));
         const baseGlyphSize = fontSize + smoothstep(0, 1, normalized) * (2.3 * labelScale + cellSpacing * 0.26);
         const glyphSize = clamp(baseGlyphSize * digitScale, 5.2, 26);
         const glowSizeFactor = digitCount >= 4 ? 0.76 : digitCount === 3 ? 0.88 : 1;
@@ -377,14 +529,13 @@
 
         overlayContext.font = `600 ${glyphSize.toFixed(1)}px "JetBrains Mono", "IBM Plex Mono", "Consolas", monospace`;
         overlayContext.shadowBlur = glowBlur;
-        overlayContext.shadowColor = labelPalette[bucket];
-
+        overlayContext.shadowColor = labelGlowPalette[bucket];
         overlayContext.fillStyle = labelPalette[bucket];
         overlayContext.globalAlpha = displayValue === 0 ? 0.86 : 1;
         overlayContext.fillText(displayText, screenX, screenY);
 
         if (normalized >= 0.8) {
-          overlayContext.fillStyle = "rgb(255 245 220)";
+          overlayContext.fillStyle = labelHighlightCss;
           overlayContext.globalAlpha = smoothstep(0.8, 1, normalized) * 0.34;
           overlayContext.fillText(displayText, screenX, screenY);
         }
@@ -452,9 +603,6 @@
       }
 
       const maxValue = normalizeField(smoothedField, normalizedField, resolvedRangeMin, resolvedRangeMax);
-      let total = 0;
-      let activeCount = 0;
-
       for (let index = 0; index < instanceCount; index += 1) {
         const normalized = normalizedField[index];
         const heightValue = shapeHeightValue(normalized);
@@ -462,20 +610,15 @@
 
         heightField[index] = height;
         compactField[index] = compactDisplayValue(smoothedField[index], resolvedRangeMin, resolvedRangeMax);
-
-        total += smoothedField[index];
-        if (smoothedField[index] > 30) {
-          activeCount += 1;
-        }
       }
 
       renderer.render(scene, camera);
-      drawNumberOverlay();
+      drawOverlay();
 
       stats = {
-        total,
-        max: maxValue,
-        avg: activeCount > 0 ? total / activeCount : 0
+        current: summary?.latest ?? null,
+        max: summary?.max ?? null,
+        min: summary?.min ?? null
       };
     });
 
@@ -493,37 +636,46 @@
         gridMaterial.dispose();
       }
       renderer.dispose();
+      rendererRef = null;
+      boardMaterialRef = null;
+      gridRef = null;
+      gridMaterialRef = null;
+      ambientLightRef = null;
+      dirLightRef = null;
+      sideLightRef = null;
     };
   });
 </script>
 
-<div class="viewer-root" bind:this={viewerEl}>
+<div class="viewer-root" bind:this={viewerEl} style={viewerThemeStyle}>
   <canvas class="viewer-canvas" bind:this={canvasEl} aria-label="Pressure Matrix Viewer"></canvas>
   <canvas class="viewer-overlay" bind:this={overlayEl} aria-hidden="true"></canvas>
 
   <div class="viewer-vignette" aria-hidden="true"></div>
   <div class="viewer-noise" aria-hidden="true"></div>
 
+  {#if showStatsPanel}
     <div class="viewer-controls">
       <section class="stats-panel" aria-label="Pressure Summary">
-      <p class="stats-label">Pressure Matrix</p>
+        <p class="stats-label">Resultant Force</p>
         <div class="stats-grid">
           <article class="stats-card stats-card-wide">
-          <span class="stats-key">Total Pressure</span>
-          <strong class="stats-value">{stats.total.toFixed(0)}</strong>
+            <span class="stats-key">Current RF</span>
+            <strong class="stats-value">{formatForceStat(stats.current)}</strong>
           </article>
           <article class="stats-card">
-          <span class="stats-key">Max</span>
-          <strong class="stats-value">{stats.max.toFixed(0)}</strong>
+            <span class="stats-key">Max RF</span>
+            <strong class="stats-value">{formatForceStat(stats.max)}</strong>
           </article>
           <article class="stats-card">
-          <span class="stats-key">Avg</span>
-          <strong class="stats-value">{stats.avg.toFixed(0)}</strong>
+            <span class="stats-key">Min RF</span>
+            <strong class="stats-value">{formatForceStat(stats.min)}</strong>
           </article>
         </div>
         <p class="stats-note">{statsNote}</p>
       </section>
     </div>
+  {/if}
 </div>
 
 <style>
@@ -532,9 +684,9 @@
     inset: 0;
     overflow: hidden;
     background:
-      radial-gradient(circle at 50% 58%, rgb(72 127 255 / 0.065), transparent 32%),
-      radial-gradient(circle at 50% 12%, rgb(151 231 255 / 0.05), transparent 26%),
-      linear-gradient(180deg, rgb(10 13 17 / 0.82), rgb(5 7 10 / 0.96));
+      radial-gradient(circle at 50% 58%, rgb(var(--matrix-glow-rgb) / 0.11), transparent 32%),
+      radial-gradient(circle at 50% 12%, rgb(var(--matrix-glow-alt-rgb) / 0.09), transparent 26%),
+      linear-gradient(180deg, color-mix(in srgb, var(--matrix-bg-10) 84%, transparent), color-mix(in srgb, var(--matrix-bg-30) 96%, black 4%));
   }
 
   .viewer-canvas,
@@ -563,7 +715,14 @@
   }
 
   .viewer-noise {
-    background: repeating-linear-gradient(180deg, rgb(124 165 216 / 0.02) 0, rgb(124 165 216 / 0.02) 1px, transparent 1px, transparent 3px);
+    background:
+      repeating-linear-gradient(
+        180deg,
+        rgb(var(--matrix-glow-alt-rgb) / 0.025) 0,
+        rgb(var(--matrix-glow-alt-rgb) / 0.025) 1px,
+        transparent 1px,
+        transparent 3px
+      );
   }
 
   .viewer-controls {
@@ -580,17 +739,19 @@
     display: grid;
     gap: 0.58rem;
     padding: 0.74rem 0.84rem 0.82rem;
-    border: 1px solid rgb(86 151 118 / 0.32);
+    border: 1px solid rgb(var(--matrix-border-rgb) / 0.32);
     border-radius: 0.76rem;
-    background: linear-gradient(180deg, rgb(7 17 14 / 0.9), rgb(5 10 9 / 0.84));
-    box-shadow: inset 0 1px 0 rgb(171 224 197 / 0.08), 0 0 24px rgb(42 138 88 / 0.08);
+    background: linear-gradient(180deg, rgb(var(--matrix-surface-alt-rgb) / 0.92), rgb(var(--matrix-surface-deep-rgb) / 0.86));
+    box-shadow:
+      inset 0 1px 0 rgb(var(--matrix-border-strong-rgb) / 0.08),
+      0 0 24px rgb(var(--matrix-glow-rgb) / 0.08);
   }
 
   .stats-label,
   .stats-key,
   .stats-note {
     margin: 0;
-    color: rgb(165 212 187 / 0.84);
+    color: rgb(var(--matrix-text-dim-rgb) / 0.84);
     font-size: 0.58rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
@@ -607,9 +768,9 @@
     gap: 0.24rem;
     min-height: 4.2rem;
     padding: 0.58rem 0.64rem;
-    border: 1px solid rgb(71 122 96 / 0.24);
+    border: 1px solid rgb(var(--matrix-border-rgb) / 0.24);
     border-radius: 0.56rem;
-    background: linear-gradient(180deg, rgb(8 16 14 / 0.88), rgb(5 9 8 / 0.84));
+    background: linear-gradient(180deg, rgb(var(--matrix-surface-rgb) / 0.9), rgb(var(--matrix-surface-deep-rgb) / 0.86));
   }
 
   .stats-card-wide {
@@ -617,7 +778,7 @@
   }
 
   .stats-value {
-    color: rgb(240 246 255 / 0.98);
+    color: rgb(var(--matrix-text-main-rgb) / 0.98);
     font-size: clamp(1.16rem, 1vw + 0.82rem, 1.56rem);
     line-height: 1;
     font-weight: 600;

src/lib/components/SignalChart.svelte

@@ -162,16 +162,16 @@
     aspect-ratio: 1.44 / 1;
     min-block-size: 11.8rem;
     justify-self: start;
-    border: 1px solid rgb(130 174 202 / 0.42);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
     border-radius: 0.92rem;
     padding: 0.56rem 0.62rem 0.58rem;
     background:
-      linear-gradient(160deg, rgb(10 18 26 / 0.76) 0%, rgb(3 8 12 / 0.62) 48%, rgb(1 2 4 / 0.76) 100%),
-      radial-gradient(circle at 12% 0, rgb(62 232 255 / 0.1), transparent 40%);
+      linear-gradient(160deg, rgb(var(--hud-surface-alt-rgb) / 0.76) 0%, rgb(var(--hud-surface-rgb) / 0.62) 48%, rgb(var(--hud-surface-deep-rgb) / 0.76) 100%),
+      radial-gradient(circle at 12% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 40%);
     box-shadow:
-      inset 0 0 0 1px rgb(165 224 255 / 0.08),
+      inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08),
       inset 0 -24px 32px rgb(0 0 0 / 0.48),
-      0 0 14px rgb(62 232 255 / 0.14);
+      0 0 14px rgb(var(--hud-glow-rgb) / 0.14);
     opacity: 1;
     transform: translateX(0) scale(1) rotate(0);
     transition:
@@ -215,7 +215,7 @@
   .panel-code {
     margin: 0;
     font-size: 0.63rem;
-    color: rgb(153 188 211 / 0.88);
+    color: rgb(var(--hud-text-dim-rgb) / 0.88);
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }
@@ -223,7 +223,7 @@
   .panel-title {
     margin: 0.12rem 0 0;
     font-size: 0.75rem;
-    color: rgb(225 243 255 / 0.96);
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     letter-spacing: 0.05em;
   }
 
@@ -236,25 +236,25 @@
   }
 
   .icon-chip {
-    border: 1px solid rgb(138 178 204 / 0.44);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.44);
     border-radius: 999px;
     padding: 0.08rem 0.36rem;
     font-size: 0.58rem;
     letter-spacing: 0.08em;
-    color: rgb(209 237 255 / 0.94);
-    background: rgb(5 13 20 / 0.66);
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
+    background: rgb(var(--hud-surface-rgb) / 0.66);
   }
 
   .icon-chip.tone-cyan {
-    border-color: rgb(62 232 255 / 0.54);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.54);
   }
 
   .icon-chip.tone-lime {
-    border-color: rgb(133 255 68 / 0.56);
+    border-color: rgb(var(--hud-lime-rgb) / 0.56);
   }
 
   .icon-chip.tone-orange {
-    border-color: rgb(255 91 63 / 0.58);
+    border-color: rgb(var(--hud-orange-rgb) / 0.58);
   }
 
   .icon-chip.tone-violet {
@@ -272,12 +272,12 @@
   .chart-stage {
     position: relative;
     block-size: clamp(6.4rem, 9vw, 8.2rem);
-    border: 1px solid rgb(132 174 200 / 0.32);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
     border-radius: 0.62rem;
     overflow: hidden;
     background:
-      linear-gradient(180deg, rgb(8 17 26 / 0.68), rgb(1 6 10 / 0.78)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.09), transparent 45%);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.68), rgb(var(--hud-surface-deep-rgb) / 0.78)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
   }
 
   svg {
@@ -287,7 +287,7 @@
   }
 
   .grid-line-group line {
-    stroke: rgb(138 184 210 / 0.16);
+    stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
     stroke-width: 0.45;
   }
 
@@ -300,15 +300,15 @@
   }
 
   .series-line.tone-cyan {
-    stroke: rgb(62 232 255 / 0.95);
+    stroke: rgb(var(--hud-cyan-rgb) / 0.95);
   }
 
   .series-line.tone-lime {
-    stroke: rgb(133 255 68 / 0.94);
+    stroke: rgb(var(--hud-lime-rgb) / 0.94);
   }
 
   .series-line.tone-orange {
-    stroke: rgb(255 91 63 / 0.94);
+    stroke: rgb(var(--hud-orange-rgb) / 0.94);
   }
 
   .series-line.tone-violet {
@@ -329,12 +329,12 @@
     background:
       repeating-linear-gradient(
         180deg,
-        rgb(146 191 214 / 0.04) 0,
-        rgb(146 191 214 / 0.04) 1px,
+        rgb(var(--hud-border-strong-rgb) / 0.04) 0,
+        rgb(var(--hud-border-strong-rgb) / 0.04) 1px,
         transparent 1px,
         transparent 3px
       ),
-      linear-gradient(180deg, transparent 0%, rgb(62 232 255 / 0.06) 50%, transparent 100%);
+      linear-gradient(180deg, transparent 0%, rgb(var(--hud-glow-rgb) / 0.06) 50%, transparent 100%);
     background-size: 100% 100%, 100% 100%;
     mix-blend-mode: screen;
     pointer-events: none;
@@ -353,7 +353,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
-    color: rgb(173 206 227 / 0.9);
+    color: rgb(var(--hud-text-main-rgb) / 0.9);
     font-size: 0.62rem;
     letter-spacing: 0.04em;
   }
@@ -365,19 +365,19 @@
   }
 
   .dot.tone-cyan {
-    background: rgb(62 232 255);
+    background: rgb(var(--hud-cyan-rgb));
   }
 
   .dot.tone-lime {
-    background: rgb(133 255 68);
+    background: rgb(var(--hud-lime-rgb));
   }
 
   .dot.tone-orange {
-    background: rgb(255 91 63);
+    background: rgb(var(--hud-orange-rgb));
   }
 
   .metric-label {
-    color: rgb(144 172 191 / 0.82);
+    color: rgb(var(--hud-text-dim-rgb) / 0.82);
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }

src/lib/components/SummaryCurve.svelte

@@ -7,10 +7,13 @@
   export let xValues: number[] | null = null;
   export let yValues: number[] | null = null;
 
-  const viewportWidth = 100;
-  const viewportHeight = 36;
-  const horizontalInset = 2;
-  const verticalInset = 2;
+  const viewportWidth = 120;
+  const viewportHeight = 48;
+  const plotInsetLeft = 13;
+  const plotInsetRight = 4;
+  const plotInsetTop = 4;
+  const plotInsetBottom = 9;
+  const fixedYBounds = { min: 0, max: 25 };
 
   interface CurveSample {
     x: number;
@@ -50,12 +53,7 @@
       return String(Math.round(value));
     }
 
-    if (Math.abs(value) >= 1000) {
-      const compact = Math.round((value / 1000) * 10) / 10;
-      return Number.isInteger(compact) ? `${compact.toFixed(0)}k` : `${compact.toFixed(1)}k`;
-    }
-
-    return Math.abs(value) >= 100 ? Math.round(value).toString() : value.toFixed(1);
+    return `${Math.round(value)} N`;
   }
 
   function resolveDataBounds(values: number[]): { min: number; max: number } {
@@ -87,18 +85,18 @@
 
   function mapXToViewport(value: number, bounds: { min: number; max: number }): number {
     const span = bounds.max - bounds.min;
-    const chartWidth = viewportWidth - horizontalInset * 2;
+    const chartWidth = viewportWidth - plotInsetLeft - plotInsetRight;
     const ratio = span <= 0 ? 0.5 : (value - bounds.min) / span;
-    const mappedX = horizontalInset + ratio * chartWidth;
-    return Math.round(clamp(mappedX, horizontalInset, viewportWidth - horizontalInset) * 100) / 100;
+    const mappedX = plotInsetLeft + ratio * chartWidth;
+    return Math.round(clamp(mappedX, plotInsetLeft, viewportWidth - plotInsetRight) * 100) / 100;
   }
 
   function mapYToViewport(value: number, bounds: { min: number; max: number }): number {
     const span = bounds.max - bounds.min;
-    const chartHeight = viewportHeight - verticalInset * 2;
+    const chartHeight = viewportHeight - plotInsetTop - plotInsetBottom;
     const ratio = span <= 0 ? 0.5 : (value - bounds.min) / span;
-    const mappedY = viewportHeight - verticalInset - ratio * chartHeight;
-    return Math.round(clamp(mappedY, verticalInset, viewportHeight - verticalInset) * 100) / 100;
+    const mappedY = viewportHeight - plotInsetBottom - ratio * chartHeight;
+    return Math.round(clamp(mappedY, plotInsetTop, viewportHeight - plotInsetBottom) * 100) / 100;
   }
 
   function buildSamples(rawYValues: number[], rawXValues: number[]): CurveSample[] {
@@ -137,16 +135,13 @@
 
   function buildYAxisTicks(
     yScaleBounds: { min: number; max: number },
-    yDataBounds: { min: number; max: number }
+    _yDataBounds: { min: number; max: number }
   ): AxisTick[] {
-    const hasRange = Math.abs(yDataBounds.max - yDataBounds.min) >= 0.001;
-    const tickValues = hasRange
-      ? [yDataBounds.max, (yDataBounds.max + yDataBounds.min) / 2, yDataBounds.min]
-      : [yScaleBounds.max, (yScaleBounds.max + yScaleBounds.min) / 2, yScaleBounds.min];
+    const tickValues = [25, 20, 15, 10, 5, 0];
     return tickValues.map((value) => ({
       value,
       label: formatAxisValue(value, "y"),
-      plotX: horizontalInset,
+      plotX: plotInsetLeft - 1.8,
       plotY: mapYToViewport(value, yScaleBounds)
     }));
   }
@@ -164,7 +159,7 @@
       value,
       label: formatAxisValue(value, "x"),
       plotX: mapXToViewport(value, xScaleBounds),
-      plotY: viewportHeight - 1.2
+      plotY: viewportHeight - 0.9
     }));
   }
 
@@ -185,7 +180,7 @@
     const firstPoint = points[0];
     const lastPoint = points[points.length - 1];
 
-    return `${linePath} L ${lastPoint.x} ${viewportHeight} L ${firstPoint.x} ${viewportHeight} Z`;
+    return `${linePath} L ${lastPoint.x} ${viewportHeight - plotInsetBottom} L ${firstPoint.x} ${viewportHeight - plotInsetBottom} Z`;
   }
 
   $: sourceYValues = yValues && yValues.length ? yValues : summary.points;
@@ -193,7 +188,7 @@
   $: samples = buildSamples(sourceYValues, sourceXValues);
   $: sampleCount = samples.length;
   $: xScaleBounds = resolveBounds(samples.map((sample) => sample.x));
-  $: yScaleBounds = resolveBounds(samples.map((sample) => sample.y));
+  $: yScaleBounds = fixedYBounds;
   $: xDataBounds = resolveDataBounds(samples.map((sample) => sample.x));
   $: yDataBounds = resolveDataBounds(samples.map((sample) => sample.y));
   $: plotPoints = convertPoints(samples, xScaleBounds, yScaleBounds);
@@ -215,7 +210,7 @@
 >
   <header class="panel-head">
     <div class="head-text">
-      <p class="panel-code">TOT</p>
+      <p class="panel-code">RF</p>
       <p class="panel-title">{summary.label}</p>
     </div>
 
@@ -236,8 +231,8 @@
       </defs>
 
       <g class="grid-lines" aria-hidden="true">
-        {#each [6, 12, 18, 24, 30] as y}
-          <line x1="0" y1={y} x2={viewportWidth} y2={y}></line>
+        {#each yAxisTicks as tick (`grid-${tick.value}`)}
+          <line x1={plotInsetLeft} y1={tick.plotY} x2={viewportWidth - plotInsetRight} y2={tick.plotY}></line>
         {/each}
       </g>
 
@@ -255,7 +250,7 @@
 
       <g class="axis-labels" aria-hidden="true">
         {#each yAxisTicks as tick, index (`y-${index}`)}
-          <text class="axis-label y-axis-label" x={tick.plotX + 0.8} y={tick.plotY - 0.35} text-anchor="start">
+          <text class="axis-label y-axis-label" x={tick.plotX} y={tick.plotY + 1.1} text-anchor="end">
             {tick.label}
           </text>
         {/each}
@@ -305,23 +300,23 @@
     --enter-ms: 1800ms;
     --fade-ms: 1000ms;
     overflow: hidden;
-    inline-size: min(100%, clamp(16.8rem, 23vw, 22rem));
-    aspect-ratio: 1.44 / 1;
-    min-block-size: 11.8rem;
+    inline-size: min(100%, clamp(29rem, 38vw, 37rem));
+    aspect-ratio: 1.42 / 1;
+    min-block-size: 20.5rem;
     justify-self: start;
     display: grid;
     grid-template-rows: auto auto auto;
-    gap: 0.4rem;
-    padding: 0.56rem 0.62rem 0.58rem;
-    border: 1px solid rgb(130 174 202 / 0.42);
+    gap: 0.68rem;
+    padding: 0.88rem 0.96rem 1rem;
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
     border-radius: 0.92rem;
     background:
-      linear-gradient(160deg, rgb(10 18 26 / 0.76) 0%, rgb(3 8 12 / 0.62) 48%, rgb(1 2 4 / 0.76) 100%),
-      radial-gradient(circle at 12% 0, rgb(62 232 255 / 0.1), transparent 40%);
+      linear-gradient(160deg, rgb(var(--hud-surface-alt-rgb) / 0.76) 0%, rgb(var(--hud-surface-rgb) / 0.62) 48%, rgb(var(--hud-surface-deep-rgb) / 0.76) 100%),
+      radial-gradient(circle at 12% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 40%);
     box-shadow:
-      inset 0 0 0 1px rgb(165 224 255 / 0.08),
+      inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08),
       inset 0 -24px 32px rgb(0 0 0 / 0.48),
-      0 0 14px rgb(62 232 255 / 0.14);
+      0 0 14px rgb(var(--hud-glow-rgb) / 0.14);
     opacity: 1;
     transform: translateX(0) scale(1) rotate(0);
     transition:
@@ -345,6 +340,10 @@
     opacity: 0.82;
   }
 
+  .summary-panel {
+    margin-block-end: clamp(0.8rem, 1.8vh, 1.4rem);
+  }
+
   .panel-head {
     display: flex;
     justify-content: space-between;
@@ -360,15 +359,15 @@
   .panel-code {
     margin: 0;
     font-size: 0.63rem;
-    color: rgb(153 188 211 / 0.88);
+    color: rgb(var(--hud-text-dim-rgb) / 0.88);
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }
 
   .panel-title {
     margin: 0.12rem 0 0;
-    font-size: 0.75rem;
-    color: rgb(225 243 255 / 0.96);
+    font-size: 1.08rem;
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     letter-spacing: 0.05em;
   }
 
@@ -381,36 +380,36 @@
   }
 
   .icon-chip {
-    border: 1px solid rgb(138 178 204 / 0.44);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.44);
     border-radius: 999px;
     padding: 0.08rem 0.36rem;
     font-size: 0.58rem;
     letter-spacing: 0.08em;
-    color: rgb(209 237 255 / 0.94);
-    background: rgb(5 13 20 / 0.66);
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
+    background: rgb(var(--hud-surface-rgb) / 0.66);
   }
 
   .icon-chip.tone-cyan {
-    border-color: rgb(62 232 255 / 0.54);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.54);
   }
 
   .icon-chip.tone-lime {
-    border-color: rgb(133 255 68 / 0.56);
+    border-color: rgb(var(--hud-lime-rgb) / 0.56);
   }
 
   .icon-chip.tone-orange {
-    border-color: rgb(255 91 63 / 0.58);
+    border-color: rgb(var(--hud-orange-rgb) / 0.58);
   }
 
   .chart-stage {
     position: relative;
-    block-size: clamp(6.4rem, 9vw, 8.2rem);
+    block-size: clamp(12rem, 15.5vw, 15rem);
     overflow: hidden;
-    border: 1px solid rgb(132 174 200 / 0.32);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
     border-radius: 0.62rem;
     background:
-      linear-gradient(180deg, rgb(8 17 26 / 0.68), rgb(1 6 10 / 0.78)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.09), transparent 45%);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.68), rgb(var(--hud-surface-deep-rgb) / 0.78)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
   }
 
   svg {
@@ -420,7 +419,7 @@
   }
 
   .grid-lines line {
-    stroke: rgb(138 184 210 / 0.16);
+    stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
     stroke-width: 0.45;
   }
 
@@ -430,22 +429,22 @@
 
   .summary-line {
     fill: none;
-    stroke: rgb(62 232 255 / 0.96);
+    stroke: rgb(var(--hud-cyan-rgb) / 0.96);
     stroke-width: 1.35;
     stroke-linecap: round;
     stroke-linejoin: round;
-    filter: drop-shadow(0 0 4px rgb(62 232 255 / 0.22));
+    filter: drop-shadow(0 0 4px rgb(var(--hud-cyan-rgb) / 0.22));
   }
 
   .summary-dot {
-    fill: rgb(133 255 68 / 0.98);
-    filter: drop-shadow(0 0 6px rgb(133 255 68 / 0.3));
+    fill: rgb(var(--hud-lime-rgb) / 0.98);
+    filter: drop-shadow(0 0 6px rgb(var(--hud-lime-rgb) / 0.3));
   }
 
   .axis-label {
-    fill: rgb(176 204 222 / 0.88);
-    font-size: 2.8px;
-    font-weight: 500;
+    fill: rgb(var(--hud-text-main-rgb) / 0.88);
+    font-size: 3.2px;
+    font-weight: 600;
     letter-spacing: 0.02em;
     text-shadow:
       0 1px 0 rgb(0 0 0 / 0.46),
@@ -453,11 +452,11 @@
   }
 
   .y-axis-label {
-    fill: rgb(162 198 220 / 0.84);
+    fill: rgb(var(--hud-text-dim-rgb) / 0.84);
   }
 
   .x-axis-label {
-    fill: rgb(162 198 220 / 0.9);
+    fill: rgb(var(--hud-text-dim-rgb) / 0.9);
   }
 
   .empty-state {
@@ -466,11 +465,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgb(155 186 204 / 0.76);
+    color: rgb(var(--hud-text-dim-rgb) / 0.76);
     font-size: 0.66rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    background: linear-gradient(180deg, rgb(2 7 11 / 0.06), rgb(2 7 11 / 0.18));
+    background: linear-gradient(180deg, rgb(var(--hud-surface-deep-rgb) / 0.06), rgb(var(--hud-surface-deep-rgb) / 0.18));
   }
 
   .panel-foot {
@@ -486,13 +485,13 @@
     display: inline-flex;
     align-items: center;
     gap: 0.28rem;
-    color: rgb(173 206 227 / 0.9);
-    font-size: 0.62rem;
+    color: rgb(var(--hud-text-main-rgb) / 0.9);
+    font-size: 0.76rem;
     letter-spacing: 0.04em;
   }
 
   .metric-text {
-    color: rgb(146 173 191 / 0.82);
+    color: rgb(var(--hud-text-dim-rgb) / 0.82);
     text-transform: uppercase;
   }
 
@@ -503,15 +502,15 @@
   }
 
   .dot.tone-cyan {
-    background: rgb(62 232 255);
+    background: rgb(var(--hud-cyan-rgb));
   }
 
   .dot.tone-lime {
-    background: rgb(133 255 68);
+    background: rgb(var(--hud-lime-rgb));
   }
 
   .dot.tone-orange {
-    background: rgb(255 91 63);
+    background: rgb(var(--hud-orange-rgb));
   }
 
   .value {
@@ -520,28 +519,28 @@
 
   @media (max-width: 1180px) {
     .signal-panel {
-      inline-size: min(100%, clamp(14rem, 30vw, 17rem));
-      aspect-ratio: 1.5 / 1;
-      min-block-size: 10.1rem;
+      inline-size: min(100%, clamp(24rem, 36vw, 31rem));
+      aspect-ratio: 1.48 / 1;
+      min-block-size: 17rem;
     }
   }
 
   @media (max-height: 900px) {
     .signal-panel {
-      inline-size: min(100%, clamp(15rem, 22vw, 18.5rem));
-      min-block-size: 10.6rem;
+      inline-size: min(100%, clamp(24rem, 33vw, 30rem));
+      min-block-size: 16.8rem;
     }
 
     .chart-stage {
-      block-size: clamp(5.7rem, 7.6vw, 6.9rem);
+      block-size: clamp(9.8rem, 12vw, 11.8rem);
     }
   }
 
   @media (max-height: 760px) {
     .signal-panel {
-      inline-size: min(100%, clamp(13.8rem, 20vw, 16.5rem));
-      min-block-size: 9.8rem;
-      padding: 0.46rem 0.5rem 0.5rem;
+      inline-size: min(100%, clamp(21rem, 29vw, 26rem));
+      min-block-size: 14.4rem;
+      padding: 0.7rem 0.76rem 0.8rem;
     }
 
     .panel-foot {
@@ -549,15 +548,15 @@
     }
 
     .chart-stage {
-      block-size: clamp(5rem, 6.6vw, 6rem);
+      block-size: clamp(8.3rem, 9.6vw, 9.8rem);
     }
   }
 
   @media (max-height: 680px) {
     .signal-panel {
-      inline-size: min(100%, clamp(12.8rem, 18vw, 15rem));
-      min-block-size: 8.7rem;
-      padding: 0.4rem 0.46rem 0.44rem;
+      inline-size: min(100%, clamp(18.5rem, 24vw, 22.5rem));
+      min-block-size: 12.4rem;
+      padding: 0.62rem 0.66rem 0.68rem;
     }
 
     .panel-head {
@@ -570,7 +569,7 @@
     }
 
     .chart-stage {
-      block-size: clamp(4.4rem, 5.6vw, 5.4rem);
+      block-size: clamp(7rem, 7.8vw, 8rem);
     }
   }
 

src/lib/config/color-map.ts

@@ -12,21 +12,59 @@ export interface PressureColorPalette {
   labelHigh: string;
   rangeStops: [string, string, string, string, string, string];
   rangeGlow: [string, string, string];
+  uiTheme: {
+    bg00: string;
+    bg10: string;
+    bg20: string;
+    bg30: string;
+    textMainRgb: string;
+    textDimRgb: string;
+    borderRgb: string;
+    borderStrongRgb: string;
+    surfaceRgb: string;
+    surfaceAltRgb: string;
+    surfaceDeepRgb: string;
+    glowRgb: string;
+    glowAltRgb: string;
+    cyanRgb: string;
+    limeRgb: string;
+    orangeRgb: string;
+    infoRgb: string;
+  };
 }
 
 export const pressureColorPalettes: Record<PressureColorMapPreset, PressureColorPalette> = {
   emerald: {
-    surfaceBase: "#13201a",
-    surfaceLow: "#285338",
-    surfaceMid: "#3f8a66",
-    surfaceHigh: "#6dd3ad",
+    surfaceBase: "#397557",
+    surfaceLow: "#24563a",
+    surfaceMid: "#2f8d78",
+    surfaceHigh: "#62d9cf",
     surfaceHot: "#d9fff0",
-    labelZero: "#2d8d59",
-    labelLow: "#54df8e",
-    labelMid: "#98e6ff",
-    labelHigh: "#ffab78",
-    rangeStops: ["#13201a", "#285338", "#3f8a66", "#6dd3ad", "#98e6ff", "#ffab78"],
-    rangeGlow: ["#54df8e", "#98e6ff", "#ffab78"]
+    labelZero: "#88e3ac",
+    labelLow: "#52e6a0",
+    labelMid: "#5dcfff",
+    labelHigh: "#ff5a4f",
+    rangeStops: ["#397557", "#36c06d", "#59cfff", "#ffd85a", "#ff8d4d", "#ff5247"],
+    rangeGlow: ["#52e6a0", "#59cfff", "#ff5247"],
+    uiTheme: {
+      bg00: "#020403",
+      bg10: "#07100d",
+      bg20: "#0c1712",
+      bg30: "#040806",
+      textMainRgb: "240 251 255",
+      textDimRgb: "157 206 181",
+      borderRgb: "88 132 116",
+      borderStrongRgb: "120 190 156",
+      surfaceRgb: "8 18 14",
+      surfaceAltRgb: "12 26 20",
+      surfaceDeepRgb: "4 10 8",
+      glowRgb: "84 223 142",
+      glowAltRgb: "152 230 255",
+      cyanRgb: "152 230 255",
+      limeRgb: "84 223 142",
+      orangeRgb: "255 171 120",
+      infoRgb: "122 198 255"
+    }
   },
   arctic: {
     surfaceBase: "#08141d",
@@ -39,7 +77,26 @@ export const pressureColorPalettes: Record<PressureColorMapPreset, PressureColor
     labelMid: "#aef3ff",
     labelHigh: "#ffffff",
     rangeStops: ["#08141d", "#14354d", "#1f6690", "#58bee8", "#aef3ff", "#ffffff"],
-    rangeGlow: ["#5ea9ff", "#7fe5ff", "#ffffff"]
+    rangeGlow: ["#5ea9ff", "#7fe5ff", "#ffffff"],
+    uiTheme: {
+      bg00: "#02070c",
+      bg10: "#07131b",
+      bg20: "#0d1f2b",
+      bg30: "#040b12",
+      textMainRgb: "236 248 255",
+      textDimRgb: "147 187 212",
+      borderRgb: "86 129 160",
+      borderStrongRgb: "129 193 228",
+      surfaceRgb: "7 16 24",
+      surfaceAltRgb: "10 23 34",
+      surfaceDeepRgb: "4 9 15",
+      glowRgb: "109 200 255",
+      glowAltRgb: "174 243 255",
+      cyanRgb: "109 200 255",
+      limeRgb: "174 243 255",
+      orangeRgb: "255 194 138",
+      infoRgb: "94 169 255"
+    }
   },
   ember: {
     surfaceBase: "#1b0c08",
@@ -52,6 +109,25 @@ export const pressureColorPalettes: Record<PressureColorMapPreset, PressureColor
     labelMid: "#ffd06a",
     labelHigh: "#fff4df",
     rangeStops: ["#1b0c08", "#4a1f15", "#8f4124", "#d9772f", "#ffd06a", "#fff4df"],
-    rangeGlow: ["#ff7247", "#ffb14d", "#fff4df"]
+    rangeGlow: ["#ff7247", "#ffb14d", "#fff4df"],
+    uiTheme: {
+      bg00: "#0a0503",
+      bg10: "#140906",
+      bg20: "#22120c",
+      bg30: "#0c0504",
+      textMainRgb: "255 241 231",
+      textDimRgb: "202 156 128",
+      borderRgb: "144 101 77",
+      borderStrongRgb: "214 145 92",
+      surfaceRgb: "20 10 8",
+      surfaceAltRgb: "32 15 11",
+      surfaceDeepRgb: "13 7 6",
+      glowRgb: "255 138 78",
+      glowAltRgb: "255 208 106",
+      cyanRgb: "255 180 109",
+      limeRgb: "255 208 106",
+      orangeRgb: "255 108 84",
+      infoRgb: "255 160 96"
+    }
   }
 };

src/lib/styles/theme.css

@@ -8,20 +8,33 @@
   --hud-cyan: #3ee8ff;
   --hud-lime: #85ff44;
   --hud-orange: #ff5b3f;
-  --hud-range-0: #13201a;
-  --hud-range-1: #285338;
-  --hud-range-2: #3f8a66;
-  --hud-range-3: #6dd3ad;
-  --hud-range-4: #98e6ff;
-  --hud-range-5: #ffab78;
+  --hud-cyan-rgb: 62 232 255;
+  --hud-lime-rgb: 133 255 68;
+  --hud-orange-rgb: 255 91 63;
+  --hud-info-rgb: 122 198 255;
+  --hud-border-rgb: 95 132 158;
+  --hud-border-strong-rgb: 140 184 210;
+  --hud-surface-rgb: 8 14 19;
+  --hud-surface-alt-rgb: 12 20 26;
+  --hud-surface-deep-rgb: 4 10 14;
+  --hud-glow-rgb: 62 232 255;
+  --hud-glow-alt-rgb: 133 255 68;
+  --hud-text-main-rgb: 207 231 255;
+  --hud-text-dim-rgb: 134 162 184;
+  --hud-range-0: #397557;
+  --hud-range-1: #36c06d;
+  --hud-range-2: #59cfff;
+  --hud-range-3: #ffd85a;
+  --hud-range-4: #ff8d4d;
+  --hud-range-5: #ff5247;
 
   --hud-text-main: #cfe7ff;
   --hud-text-dim: #86a2b8;
 
   /* Keep root surface close to the main board style to avoid visible drag-edge seams. */
   background:
-    radial-gradient(circle at 18% 8%, rgb(62 232 255 / 0.05), transparent 38%),
-    radial-gradient(circle at 84% 14%, rgb(133 255 68 / 0.04), transparent 36%),
+    radial-gradient(circle at 18% 8%, rgb(var(--hud-glow-rgb) / 0.05), transparent 38%),
+    radial-gradient(circle at 84% 14%, rgb(var(--hud-glow-alt-rgb) / 0.04), transparent 36%),
     linear-gradient(165deg, var(--hud-bg-20) 0%, var(--hud-bg-10) 48%, var(--hud-bg-30) 100%);
   background-color: var(--hud-bg-00);
 }

src/lib/types/hud.ts

@@ -9,6 +9,7 @@ export type HudNoticeTone = "ok" | "warn" | "info";
 
 export type SignalTone = "cyan" | "lime" | "orange" | "violet" | "gold" | "rose";
 export type PressureColorMapPreset = "emerald" | "arctic" | "ember";
+export type MatrixDisplayMode = "numeric" | "dots";
 
 export type SignalPanelSide = "left" | "right";
 
@@ -82,6 +83,9 @@ export interface HudCopy {
   rangeMinLabel: string;
   rangeMaxLabel: string;
   colorMapLabel: string;
+  matrixViewLabel: string;
+  matrixViewNumericLabel: string;
+  matrixViewDotsLabel: string;
   resetConfigLabel: string;
   applyLiveHint: string;
   runtimeReady: string;
@@ -99,6 +103,20 @@ export interface HudCopy {
   exportActionLabel: string;
   exportingActionLabel: string;
   importActionLabel: string;
+  fileExplorerImportTitle: string;
+  fileExplorerExportTitle: string;
+  fileExplorerPathLabel: string;
+  fileExplorerNameLabel: string;
+  fileExplorerCancelLabel: string;
+  fileExplorerOpenLabel: string;
+  fileExplorerSaveLabel: string;
+  fileExplorerEmptyHint: string;
+  fileExplorerCsvHint: string;
+  fileExplorerLoadingLabel: string;
+  fileExplorerUpLabel: string;
+  fileExplorerNameColumnLabel: string;
+  fileExplorerSizeColumnLabel: string;
+  fileExplorerModifiedColumnLabel: string;
   replaySectionLabel: string;
   replayPlayLabel: string;
   replayPauseLabel: string;
@@ -117,6 +135,7 @@ export interface HudMatrixConfig {
   rangeMin: number;
   rangeMax: number;
   colorMapPreset: PressureColorMapPreset;
+  matrixDisplayMode: MatrixDisplayMode;
 }
 
 export interface SerialConnectResult {
@@ -131,6 +150,11 @@ export interface SerialExportResult {
   message: string;
 }
 
+export interface SerialRecordStateResult {
+  hasData: boolean;
+  frameCount: number;
+}
+
 export interface SerialImportFrameResult {
   data: number[];
   dtsMs: number;
@@ -143,3 +167,23 @@ export interface SerialImportResult {
   frames: SerialImportFrameResult[];
   message: string;
 }
+
+export interface FileExplorerRoot {
+  label: string;
+  path: string;
+}
+
+export interface FileExplorerEntry {
+  name: string;
+  path: string;
+  isDir: boolean;
+  sizeBytes: number | null;
+  modifiedMs: number | null;
+}
+
+export interface FileExplorerListResult {
+  currentPath: string;
+  parentPath: string | null;
+  roots: FileExplorerRoot[];
+  entries: FileExplorerEntry[];
+}

src/routes/+page.svelte

@@ -5,10 +5,14 @@
   import { LogicalSize, currentMonitor, getCurrentWindow } from "@tauri-apps/api/window";
   import HudPanel from "$lib/components/HudPanel.svelte";
   import CenterStage from "$lib/components/CenterStage.svelte";
+  import FileExplorerModal from "$lib/components/FileExplorerModal.svelte";
   import { pressureColorPalettes } from "$lib/config/color-map";
   import "$lib/styles/theme.css";
   import type {
     ConnectionState,
+    FileExplorerEntry,
+    FileExplorerListResult,
+    FileExplorerRoot,
     HudColorMapOption,
     HudCopy,
     HudConfigLink,
@@ -19,15 +23,18 @@
     HudSignalSeries,
     HudSummary,
     LocaleCode,
+    MatrixDisplayMode,
     SerialConnectResult,
     SerialExportResult,
+    SerialRecordStateResult,
     SerialImportResult,
     SignalTone,
-    StageStatusTone,
     WindowControlAction
   } from "$lib/types/hud";
 
   type SignalPanelTemplate = Pick<HudSignalPanel, "id" | "code" | "title" | "side">;
+  type FileExplorerMode = "open" | "save";
+
   interface ReplayFrame {
     values: number[];
     dtsMs: number;
@@ -35,8 +42,8 @@
 
   const copyByLocale: Record<LocaleCode, HudCopy> = {
     "zh-CN": {
-      appName: "PAXINI HUD",
-      suiteName: "PX-6AX GEN3",
+      appName: "JE-Skin",
+      suiteName: "v0.3.1",
       stageTitle: "WebGL2 主渲染区",
       stageHint: "底图与三维操作将在此区域加载",
       configPanelTitle: "参数配置",
@@ -48,6 +55,9 @@
       rangeMinLabel: "最小值",
       rangeMaxLabel: "最大值",
       colorMapLabel: "映射颜色",
+      matrixViewLabel: "矩阵模式",
+      matrixViewNumericLabel: "数字矩阵",
+      matrixViewDotsLabel: "点矩阵",
       resetConfigLabel: "恢复默认",
       applyLiveHint: "实时生效 / 矩阵尺寸变更将重建 viewer",
       runtimeReady: "WEBGL2 READY",
@@ -65,6 +75,20 @@
       exportActionLabel: "导出 CSV",
       exportingActionLabel: "导出中",
       importActionLabel: "导入 CSV",
+      fileExplorerImportTitle: "导入 CSV 文件",
+      fileExplorerExportTitle: "导出 CSV 文件",
+      fileExplorerPathLabel: "路径",
+      fileExplorerNameLabel: "文件名",
+      fileExplorerCancelLabel: "取消",
+      fileExplorerOpenLabel: "打开",
+      fileExplorerSaveLabel: "保存",
+      fileExplorerEmptyHint: "当前目录下没有可用条目",
+      fileExplorerCsvHint: "仅显示 *.csv 文件",
+      fileExplorerLoadingLabel: "处理中...",
+      fileExplorerUpLabel: "↑ 上一级",
+      fileExplorerNameColumnLabel: "名称",
+      fileExplorerSizeColumnLabel: "大小",
+      fileExplorerModifiedColumnLabel: "修改时间",
       replaySectionLabel: "回放",
       replayPlayLabel: "播放",
       replayPauseLabel: "暂停",
@@ -77,8 +101,8 @@
       disconnectedLabel: "未连接"
     },
     "en-US": {
-      appName: "PAXINI HUD",
-      suiteName: "PX-6AX GEN3",
+      appName: "JE-Skin",
+      suiteName: "v0.3.1",
       stageTitle: "WebGL2 Main Surface",
       stageHint: "Map texture and 3D interactions will render here",
       configPanelTitle: "Config Panel",
@@ -90,6 +114,9 @@
       rangeMinLabel: "Min",
       rangeMaxLabel: "Max",
       colorMapLabel: "Color Map",
+      matrixViewLabel: "Matrix Mode",
+      matrixViewNumericLabel: "Numeric",
+      matrixViewDotsLabel: "Dots",
       resetConfigLabel: "Reset",
       applyLiveHint: "Live apply / size changes recreate the viewer",
       runtimeReady: "WEBGL2 READY",
@@ -107,6 +134,20 @@
       exportActionLabel: "Export CSV",
       exportingActionLabel: "Exporting",
       importActionLabel: "Import CSV",
+      fileExplorerImportTitle: "Import CSV File",
+      fileExplorerExportTitle: "Export CSV File",
+      fileExplorerPathLabel: "Path",
+      fileExplorerNameLabel: "File Name",
+      fileExplorerCancelLabel: "Cancel",
+      fileExplorerOpenLabel: "Open",
+      fileExplorerSaveLabel: "Save",
+      fileExplorerEmptyHint: "No entries in this directory",
+      fileExplorerCsvHint: "Only *.csv files are listed",
+      fileExplorerLoadingLabel: "Processing...",
+      fileExplorerUpLabel: "↑ Up",
+      fileExplorerNameColumnLabel: "Name",
+      fileExplorerSizeColumnLabel: "Size",
+      fileExplorerModifiedColumnLabel: "Modified",
       replaySectionLabel: "Replay",
       replayPlayLabel: "Play",
       replayPauseLabel: "Pause",
@@ -162,13 +203,13 @@
   let connectionNotice = "";
   let connectionNoticeTone: HudNoticeTone = "info";
   let isExporting = false;
-  let deviceValue = "PX-Sense Unit";
-  let sampleRateValue = "120Hz";
-  let channelsValue = "8";
-  let webglStatusTone: StageStatusTone = "warn";
+  let deviceValue = "JE-Skin-F";
+  let sampleRateValue = "100Hz";
+  let channelsValue = "84";
   let isWindowMaximized = false;
   let activeConfigLinkId = "stream-on";
   let isConfigPanelOpen = false;
+  let isPrecisionTestOpen = false;
   let hasSignalData = false;
   let signalPanels: HudSignalPanel[] = buildInactivePanels();
   let summary: HudSummary = buildEmptySummary();
@@ -176,8 +217,9 @@
   let matrixRows = 12;
   let matrixCols = 7;
   let rangeMin = 0;
-  let rangeMax = 5000;
+  let rangeMax = 16000;
   let colorMapPreset: PressureColorMapPreset = "emerald";
+  let matrixDisplayMode: MatrixDisplayMode = "dots";
   let replayFrames: ReplayFrame[] = [];
   let replayCurrentIndex = 0;
   let replayHasDisplayedFrame = false;
@@ -186,10 +228,18 @@
   let replayProgress = 0;
   let replayFileName = "";
   let replayTimerId: number | null = null;
+  let fileExplorerOpen = false;
+  let fileExplorerMode: FileExplorerMode = "open";
+  let fileExplorerBusy = false;
+  let fileExplorerCurrentPath = "";
+  let fileExplorerParentPath: string | null = null;
+  let fileExplorerEntries: FileExplorerEntry[] = [];
+  let fileExplorerRoots: FileExplorerRoot[] = [];
+  let fileExplorerSelectedPath = "";
+  let fileExplorerFileName = "";
 
   $: uiCopy = copyByLocale[locale];
-  $: configLinks = buildConfigLinks(locale, activeConfigLinkId, isConfigPanelOpen);
-  $: stageStatusText = webglStatusTone === "ok" ? uiCopy.runtimeReady : uiCopy.runtimeFallback;
+  $: configLinks = buildConfigLinks(locale, activeConfigLinkId, isConfigPanelOpen, isPrecisionTestOpen);
   $: leftSignalPanels = signalPanels.filter((panel) => panel.side === "left");
   $: rightSignalPanels = signalPanels.filter((panel) => panel.side === "right");
   $: rangeTicks = buildRangeTicks(rangeMin, rangeMax);
@@ -197,6 +247,10 @@
   $: rangeScaleStyle = buildRangeScaleStyle(colorMapPreset);
   $: replayHasData = replayFrames.length > 0;
   $: replayFrameInfo = replayHasData ? `${replayHasDisplayedFrame ? replayCurrentIndex + 1 : 0}/${replayFrames.length}` : "";
+  $: fileExplorerTitle =
+    fileExplorerMode === "open" ? uiCopy.fileExplorerImportTitle : uiCopy.fileExplorerExportTitle;
+  $: fileExplorerConfirmLabel =
+    fileExplorerMode === "open" ? uiCopy.fileExplorerOpenLabel : uiCopy.fileExplorerSaveLabel;
 
   function isTauriRuntime(): boolean {
     return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
@@ -260,8 +314,49 @@
     const palette = pressureColorPalettes[preset] ?? pressureColorPalettes.emerald;
     const [range0, range1, range2, range3, range4, range5] = palette.rangeStops;
     const [glow0, glow1, glow2] = palette.rangeGlow;
+    const {
+      bg00,
+      bg10,
+      bg20,
+      bg30,
+      textMainRgb,
+      textDimRgb,
+      borderRgb,
+      borderStrongRgb,
+      surfaceRgb,
+      surfaceAltRgb,
+      surfaceDeepRgb,
+      glowRgb,
+      glowAltRgb,
+      cyanRgb,
+      limeRgb,
+      orangeRgb,
+      infoRgb
+    } = palette.uiTheme;
 
     return [
+      `--hud-bg-00: ${bg00}`,
+      `--hud-bg-10: ${bg10}`,
+      `--hud-bg-20: ${bg20}`,
+      `--hud-bg-30: ${bg30}`,
+      `--hud-text-main-rgb: ${textMainRgb}`,
+      `--hud-text-dim-rgb: ${textDimRgb}`,
+      `--hud-text-main: rgb(${textMainRgb})`,
+      `--hud-text-dim: rgb(${textDimRgb})`,
+      `--hud-border-rgb: ${borderRgb}`,
+      `--hud-border-strong-rgb: ${borderStrongRgb}`,
+      `--hud-surface-rgb: ${surfaceRgb}`,
+      `--hud-surface-alt-rgb: ${surfaceAltRgb}`,
+      `--hud-surface-deep-rgb: ${surfaceDeepRgb}`,
+      `--hud-glow-rgb: ${glowRgb}`,
+      `--hud-glow-alt-rgb: ${glowAltRgb}`,
+      `--hud-cyan-rgb: ${cyanRgb}`,
+      `--hud-lime-rgb: ${limeRgb}`,
+      `--hud-orange-rgb: ${orangeRgb}`,
+      `--hud-info-rgb: ${infoRgb}`,
+      `--hud-cyan: rgb(${cyanRgb})`,
+      `--hud-lime: rgb(${limeRgb})`,
+      `--hud-orange: rgb(${orangeRgb})`,
       `--hud-range-0: ${range0}`,
       `--hud-range-1: ${range1}`,
       `--hud-range-2: ${range2}`,
@@ -353,6 +448,209 @@
     return frames;
   }
 
+  function buildDefaultExportName(): string {
+    const now = new Date();
+    const pad = (value: number) => String(value).padStart(2, "0");
+    return `joyson_export_${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}.csv`;
+  }
+
+  function ensureCsvSuffix(fileName: string): string {
+    const trimmed = fileName.trim();
+    if (!trimmed) {
+      return "";
+    }
+
+    return trimmed.toLowerCase().endsWith(".csv") ? trimmed : `${trimmed}.csv`;
+  }
+
+  function inferPathSeparator(path: string): string {
+    return path.includes("\\") ? "\\" : "/";
+  }
+
+  function joinPath(parent: string, fileName: string): string {
+    const safeParent = parent.trim();
+    if (!safeParent) {
+      return fileName;
+    }
+
+    const separator = inferPathSeparator(safeParent);
+    if (safeParent.endsWith(separator)) {
+      return `${safeParent}${fileName}`;
+    }
+
+    return `${safeParent}${separator}${fileName}`;
+  }
+
+  function isCsvPath(path: string): boolean {
+    return path.toLowerCase().endsWith(".csv");
+  }
+
+  function applyImportedFrames(fileName: string, frames: ReplayFrame[], frameCount: number, channelCount: number): void {
+    if (!frames.length) {
+      throw new Error("EmptyReplayData");
+    }
+
+    replayFrames = frames;
+    replayFileName = fileName;
+    replayCurrentIndex = 0;
+    replayHasDisplayedFrame = false;
+    replayProgress = 0;
+    resetReplayVisualState();
+
+    connectionNotice =
+      locale === "zh-CN"
+        ? `已导入 ${fileName}，共 ${frameCount} 帧 / ${channelCount} 通道，可开始回放。`
+        : `${fileName} loaded (${frameCount} frames / ${channelCount} channels). Ready to replay.`;
+    connectionNoticeTone = "ok";
+  }
+
+  async function loadFileExplorerDirectory(path?: string): Promise<void> {
+    if (!isTauriRuntime()) {
+      return;
+    }
+
+    fileExplorerBusy = true;
+    try {
+      const result = await invoke<FileExplorerListResult>("file_explorer_list", {
+        path,
+        extensions: fileExplorerMode === "open" ? ["csv"] : undefined
+      });
+
+      fileExplorerCurrentPath = result.currentPath;
+      fileExplorerParentPath = result.parentPath;
+      fileExplorerRoots = result.roots;
+      fileExplorerEntries = result.entries;
+
+      const selectedExists = fileExplorerEntries.some((entry) => entry.path === fileExplorerSelectedPath);
+      if (!selectedExists) {
+        fileExplorerSelectedPath = "";
+      }
+    } catch (error) {
+      connectionNotice =
+        locale === "zh-CN" ? "文件浏览器加载失败，请检查目录权限。" : "File explorer failed to load. Check directory permissions.";
+      connectionNoticeTone = "warn";
+      console.error("File explorer load failed:", error);
+    } finally {
+      fileExplorerBusy = false;
+    }
+  }
+
+  async function openFileExplorer(mode: FileExplorerMode): Promise<void> {
+    if (!isTauriRuntime()) {
+      if (mode === "open") {
+        await importViaBrowserInput();
+        return;
+      }
+
+      await runSerialExport();
+      return;
+    }
+
+    fileExplorerMode = mode;
+    fileExplorerOpen = true;
+    fileExplorerBusy = false;
+    fileExplorerSelectedPath = "";
+    if (mode === "save") {
+      fileExplorerFileName = buildDefaultExportName();
+    } else {
+      fileExplorerFileName = "";
+    }
+
+    await loadFileExplorerDirectory(fileExplorerCurrentPath || undefined);
+  }
+
+  function closeFileExplorer(): void {
+    if (fileExplorerBusy) {
+      return;
+    }
+
+    fileExplorerOpen = false;
+  }
+
+  async function importViaBrowserInput(): Promise<void> {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".csv,text/csv";
+
+    const selectedFile = await new Promise<File | null>((resolve) => {
+      input.onchange = () => resolve(input.files?.[0] ?? null);
+      input.click();
+    });
+
+    if (!selectedFile) {
+      return;
+    }
+
+    await importReplayFromFile(selectedFile);
+  }
+
+  async function importReplayFromFile(file: File): Promise<boolean> {
+    if (!file) {
+      return false;
+    }
+
+    pauseReplayPlayback();
+
+    try {
+      const text = await file.text();
+      let frames: ReplayFrame[] = [];
+      let importedFrameCount = 0;
+      let importedChannelCount = 0;
+
+      if (isTauriRuntime()) {
+        const result = await invoke<SerialImportResult>("serial_import_csv", {
+          fileName: file.name,
+          csvContent: text
+        });
+        frames = result.frames.map((frame) => ({
+          values: frame.data,
+          dtsMs: frame.dtsMs
+        }));
+        importedFrameCount = result.frameCount;
+        importedChannelCount = result.channelCount;
+      } else {
+        frames = parseReplayCsv(text);
+        importedFrameCount = frames.length;
+        importedChannelCount = frames[0]?.values.length ?? 0;
+      }
+
+      applyImportedFrames(file.name, frames, importedFrameCount, importedChannelCount);
+      return true;
+    } catch (error) {
+      connectionNotice = resolveImportNotice(error);
+      connectionNoticeTone = "warn";
+      console.error("Replay import failed:", error);
+      return false;
+    }
+  }
+
+  async function importReplayFromPath(path: string): Promise<boolean> {
+    pauseReplayPlayback();
+
+    try {
+      const result = await invoke<SerialImportResult>("serial_import_csv_from_path", {
+        filePath: path
+      });
+
+      const frames = result.frames.map((frame) => ({
+        values: frame.data,
+        dtsMs: frame.dtsMs
+      }));
+
+      applyImportedFrames(result.fileName, frames, result.frameCount, result.channelCount);
+      return true;
+    } catch (error) {
+      connectionNotice = resolveImportNotice(error);
+      connectionNoticeTone = "warn";
+      console.error("Replay import failed:", error);
+      return false;
+    }
+  }
+
   function stopReplayTimer(): void {
     if (replayTimerId == null || typeof window === "undefined") {
       return;
@@ -364,11 +662,10 @@
   function frameValuesToMatrix(values: number[]): number[] {
     const totalCells = Math.max(matrixRows * matrixCols, 1);
     const matrix = new Array<number>(totalCells).fill(0);
-    const maxRawValue = Math.max(rangeMax, 5000);
 
     for (let index = 0; index < totalCells; index += 1) {
       const value = Number(values[index] ?? 0);
-      matrix[index] = clamp(Number.isFinite(value) ? value : 0, 0, maxRawValue);
+      matrix[index] = Number.isFinite(value) ? value : 0;
     }
 
     return matrix;
@@ -574,7 +871,7 @@
 
   function buildEmptySummary(): HudSummary {
     return {
-      label: "TOTAL",
+      label: "Resultant Force",
       xValues: [],
       points: [],
       latest: null,
@@ -583,6 +880,18 @@
     };
   }
 
+  function isZeroLikeValue(value: number): boolean {
+    return !Number.isFinite(value) || Math.abs(value) < 0.0001;
+  }
+
+  function shouldHideSummary(points: number[]): boolean {
+    return points.length === 0 || points.every((value) => isZeroLikeValue(value));
+  }
+
+  function normalizeSummary(summaryValue: HudSummary): HudSummary {
+    return shouldHideSummary(summaryValue.points) ? buildEmptySummary() : summaryValue;
+  }
+
   function buildSummary(points: number[], xValues: number[] = []): HudSummary {
     if (points.length === 0) {
       return buildEmptySummary();
@@ -594,7 +903,7 @@
     });
 
     return {
-      label: "TOTAL",
+      label: "Resultant Force",
       xValues: resolvedXValues,
       points,
       latest: points[points.length - 1],
@@ -679,19 +988,26 @@
     });
   }
 
-  function buildConfigLinks(currentLocale: LocaleCode, activeId: string, isSettingsOpen: boolean): HudConfigLink[] {
+  function buildConfigLinks(
+    currentLocale: LocaleCode,
+    activeId: string,
+    isSettingsOpen: boolean,
+    isPrecisionOpen: boolean
+  ): HudConfigLink[] {
     const labels =
       currentLocale === "zh-CN"
         ? {
             streamOn: "打开",
             streamOff: "关闭",
             calibrate: "校准",
+            precisionTest: "游戏",
             settings: "参数"
           }
         : {
             streamOn: "Open",
             streamOff: "Close",
             calibrate: "Calib",
+            precisionTest: "Game",
             settings: "Setup"
           };
 
@@ -714,6 +1030,12 @@
         tone: "cyan",
         active: activeId === "calibrate"
       },
+      {
+        id: "precision-test",
+        label: labels.precisionTest,
+        tone: "lime",
+        active: isPrecisionOpen
+      },
       {
         id: "settings",
         label: labels.settings,
@@ -772,7 +1094,6 @@
 
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("webgl2");
-    webglStatusTone = context ? "ok" : "warn";
   }
 
   function handleLocaleChange(event: CustomEvent<LocaleCode>): void {
@@ -980,81 +1301,118 @@
     }
   }
 
-  async function handleSerialExport(): Promise<void> {
+  async function runSerialExport(filePath?: string): Promise<boolean> {
     if (!isTauriRuntime()) {
-      console.warn("[serial] Export is only available inside Tauri.");
-      return;
+      connectionNotice =
+        locale === "zh-CN" ? "当前环境不支持导出到本地路径。" : "Current runtime cannot export to local paths.";
+      connectionNoticeTone = "warn";
+      return false;
     }
 
     isExporting = true;
+    fileExplorerBusy = true;
 
     try {
-      const result = await invoke<SerialExportResult>("serial_export_csv");
+      const result = filePath
+        ? await invoke<SerialExportResult>("serial_export_csv_to_path", { filePath })
+        : await invoke<SerialExportResult>("serial_export_csv");
+
       connectionNotice =
         locale === "zh-CN"
           ? `CSV 导出成功（${result.frameCount} 帧）：${result.path}`
           : `CSV exported (${result.frameCount} frames): ${result.path}`;
       connectionNoticeTone = "ok";
+      return true;
     } catch (error) {
       connectionNotice = resolveExportNotice(error);
       connectionNoticeTone = "warn";
       console.error("Serial export failed:", error);
+      return false;
     } finally {
       isExporting = false;
+      fileExplorerBusy = false;
     }
   }
 
-  async function handleReplayImport(event: CustomEvent<File>): Promise<void> {
-    const file = event.detail;
-    if (!file) {
+  async function precheckExportRecordData(): Promise<boolean> {
+    if (!isTauriRuntime()) {
+      return true;
+    }
+
+    try {
+      const result = await invoke<SerialRecordStateResult>("serial_has_record_data");
+      if (result.hasData) {
+        return true;
+      }
+
+      connectionNotice = resolveExportNotice("NoRecordedData");
+      connectionNoticeTone = "warn";
+      return false;
+    } catch (error) {
+      connectionNotice = resolveExportNotice(error);
+      connectionNoticeTone = "warn";
+      console.error("Export precheck failed:", error);
+      return false;
+    }
+  }
+
+  async function handleSerialExportRequest(): Promise<void> {
+    const hasData = await precheckExportRecordData();
+    if (!hasData) {
       return;
     }
 
-    pauseReplayPlayback();
-
-    try {
-      const text = await file.text();
-      let frames: ReplayFrame[];
-      let importedFrameCount = 0;
-      let importedChannelCount = 0;
-
-      if (isTauriRuntime()) {
-        const result = await invoke<SerialImportResult>("serial_import_csv", {
-          fileName: file.name,
-          csvContent: text
-        });
-        frames = result.frames.map((frame) => ({
-          values: frame.data,
-          dtsMs: frame.dtsMs
-        }));
-        importedFrameCount = result.frameCount;
-        importedChannelCount = result.channelCount;
-      } else {
-        frames = parseReplayCsv(text);
-        importedFrameCount = frames.length;
-        importedChannelCount = frames[0]?.values.length ?? 0;
+    await openFileExplorer("save");
   }
 
-      if (!frames.length) {
-        throw new Error("EmptyReplayData");
+  async function handleReplayImportRequest(): Promise<void> {
+    await openFileExplorer("open");
   }
 
-      replayFrames = frames;
-      replayFileName = file.name;
-      replayCurrentIndex = 0;
-      replayHasDisplayedFrame = false;
-      replayProgress = 0;
-      resetReplayVisualState();
+  async function handleFileExplorerNavigate(event: CustomEvent<string>): Promise<void> {
+    await loadFileExplorerDirectory(event.detail);
+  }
 
-      connectionNotice =
-        locale === "zh-CN"
-          ? `已导入 ${file.name}，共 ${importedFrameCount} 帧 / ${importedChannelCount} 通道，可开始回放。`
-          : `${file.name} loaded (${importedFrameCount} frames / ${importedChannelCount} channels). Ready to replay.`;
-      connectionNoticeTone = "ok";
-    } catch (error) {
-      connectionNotice = resolveImportNotice(error);
+  async function handleFileExplorerConfirm(): Promise<void> {
+    if (fileExplorerBusy) {
+      return;
+    }
+
+    if (fileExplorerMode === "open") {
+      const selected = fileExplorerEntries.find((entry) => entry.path === fileExplorerSelectedPath);
+      if (!selected) {
+        return;
+      }
+      if (selected.isDir) {
+        await loadFileExplorerDirectory(selected.path);
+        return;
+      }
+      if (!isCsvPath(selected.path)) {
+        connectionNotice = locale === "zh-CN" ? "请先选择 CSV 文件。" : "Please choose a CSV file.";
         connectionNoticeTone = "warn";
-      console.error("Replay import failed:", error);
+        return;
+      }
+
+      fileExplorerBusy = true;
+      const ok = await importReplayFromPath(selected.path);
+      fileExplorerBusy = false;
+      if (ok) {
+        fileExplorerOpen = false;
+      }
+      return;
+    }
+
+    const selected = fileExplorerEntries.find((entry) => entry.path === fileExplorerSelectedPath);
+    const targetDir = selected?.isDir ? selected.path : fileExplorerCurrentPath;
+    const csvName = ensureCsvSuffix(fileExplorerFileName || buildDefaultExportName());
+    if (!csvName) {
+      return;
+    }
+
+    const targetPath = joinPath(targetDir, csvName);
+    const ok = await runSerialExport(targetPath);
+    if (ok) {
+      fileExplorerOpen = false;
     }
   }
 
@@ -1115,11 +1473,19 @@
   }
 
   function handleConfigLink(event: CustomEvent<string>): void {
+    if (event.detail === "precision-test") {
+      isPrecisionTestOpen = !isPrecisionTestOpen;
+      isConfigPanelOpen = false;
+      return;
+    }
+
     if (event.detail === "settings") {
+      isPrecisionTestOpen = false;
       isConfigPanelOpen = !isConfigPanelOpen;
       return;
     }
 
+    isPrecisionTestOpen = false;
     isConfigPanelOpen = false;
     activeConfigLinkId = event.detail;
     console.info("[hud] config link clicked:", event.detail);
@@ -1144,6 +1510,10 @@
     }
   }
 
+  function handleMatrixDisplayToggle(event: CustomEvent<boolean>): void {
+    matrixDisplayMode = event.detail ? "dots" : "numeric";
+  }
+
   onMount(() => {
     let disposed = false;
     let unlistenHudStream: UnlistenFn | null = null;
@@ -1180,7 +1550,7 @@
   });
 </script>
 
-<main class="hud-screen">
+<main class="hud-screen" style={rangeScaleStyle}>
   <div class="hud-background" aria-hidden="true">
     <div class="hud-gradient"></div>
     <div class="hud-vignette"></div>
@@ -1209,6 +1579,10 @@
       channelsValue={channelsValue}
       configLinksLabel={uiCopy.configLinksLabel}
       refreshPortsLabel={uiCopy.refreshPortsLabel}
+      matrixViewLabel={uiCopy.matrixViewLabel}
+      matrixViewNumericLabel={uiCopy.matrixViewNumericLabel}
+      matrixViewDotsLabel={uiCopy.matrixViewDotsLabel}
+      {matrixDisplayMode}
       connectActionLabel={uiCopy.connectActionLabel}
       disconnectActionLabel={uiCopy.disconnectActionLabel}
       exportActionLabel={uiCopy.exportActionLabel}
@@ -1226,20 +1600,22 @@
       on:localechange={handleLocaleChange}
       on:portchange={handlePortChange}
       on:configlink={handleConfigLink}
+      on:matrixdisplaytoggle={handleMatrixDisplayToggle}
       on:serialrefresh={handleSerialRefresh}
       on:serialconnect={handleSerialConnect}
-      on:serialexport={handleSerialExport}
-      on:csvimport={handleReplayImport}
+      on:serialexport={handleSerialExportRequest}
+      on:csvimport={handleReplayImportRequest}
+      on:noticeclear={() => (connectionNotice = "")}
     />
 
     <CenterStage
+      {locale}
       bind:matrixRows
       bind:matrixCols
       bind:rangeMin
       bind:rangeMax
       bind:colorMapPreset
-      title={uiCopy.stageTitle}
-      hint={uiCopy.stageHint}
+      bind:matrixDisplayMode
       configPanelTitle={uiCopy.configPanelTitle}
       configPanelHint={uiCopy.configPanelHint}
       matrixSizeLabel={uiCopy.matrixSizeLabel}
@@ -1264,12 +1640,11 @@
       {replayFrameInfo}
       resetConfigLabel={uiCopy.resetConfigLabel}
       applyLiveHint={uiCopy.applyLiveHint}
-      statusText={stageStatusText}
-      statusTone={webglStatusTone}
       leftPanels={leftSignalPanels}
       rightPanels={rightSignalPanels}
       {pressureMatrix}
       showConfigPanel={isConfigPanelOpen}
+      showPrecisionTestPanel={isPrecisionTestOpen}
       {summary}
       on:replaytoggle={handleReplayToggle}
       on:replaystop={handleReplayStop}
@@ -1278,7 +1653,8 @@
       on:replayclose={handleReplayClose}
       on:configclose={() => (isConfigPanelOpen = false)}
     >
-      <section class="range-scale" aria-label="Signal Range" style={rangeScaleStyle}>
+      {#if !isPrecisionTestOpen}
+        <section class="range-scale" aria-label="Signal Range">
           <p class="range-label">Range</p>
           <div class="range-track">
             {#each rangeTicks as tick}
@@ -1286,8 +1662,36 @@
             {/each}
           </div>
         </section>
+      {/if}
     </CenterStage>
   </div>
+
+  <FileExplorerModal
+    open={fileExplorerOpen}
+    mode={fileExplorerMode}
+    title={fileExplorerTitle}
+    currentPath={fileExplorerCurrentPath}
+    parentPath={fileExplorerParentPath}
+    roots={fileExplorerRoots}
+    entries={fileExplorerEntries}
+    bind:selectedPath={fileExplorerSelectedPath}
+    bind:fileName={fileExplorerFileName}
+    pathLabel={uiCopy.fileExplorerPathLabel}
+    fileNameLabel={uiCopy.fileExplorerNameLabel}
+    cancelLabel={uiCopy.fileExplorerCancelLabel}
+    confirmLabel={fileExplorerConfirmLabel}
+    emptyHint={uiCopy.fileExplorerEmptyHint}
+    csvHint={uiCopy.fileExplorerCsvHint}
+    busyLabel={uiCopy.fileExplorerLoadingLabel}
+    upLabel={uiCopy.fileExplorerUpLabel}
+    nameColumnLabel={uiCopy.fileExplorerNameColumnLabel}
+    sizeColumnLabel={uiCopy.fileExplorerSizeColumnLabel}
+    modifiedColumnLabel={uiCopy.fileExplorerModifiedColumnLabel}
+    isBusy={fileExplorerBusy}
+    on:close={closeFileExplorer}
+    on:navigate={handleFileExplorerNavigate}
+    on:confirm={handleFileExplorerConfirm}
+  />
 </main>
 
 <style>
@@ -1311,8 +1715,8 @@
     position: absolute;
     inset: 0;
     background:
-      radial-gradient(circle at 14% 6%, rgb(62 232 255 / 0.07), transparent 36%),
-      radial-gradient(circle at 86% 14%, rgb(133 255 68 / 0.05), transparent 32%),
+      radial-gradient(circle at 14% 6%, rgb(var(--hud-glow-rgb) / 0.07), transparent 36%),
+      radial-gradient(circle at 86% 14%, rgb(var(--hud-glow-alt-rgb) / 0.05), transparent 32%),
       linear-gradient(170deg, var(--hud-bg-20) 0%, var(--hud-bg-10) 56%, var(--hud-bg-30) 100%);
   }
 
@@ -1339,14 +1743,19 @@
     grid-template-rows: auto minmax(0, 1fr);
     gap: clamp(0.5rem, 1.2vw, 0.95rem);
     padding: clamp(0.65rem, 1.75vw, 1.3rem);
-    border: 1px solid rgb(111 150 173 / 0.2);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.2);
     border-radius: 0.9rem;
     background:
-      linear-gradient(176deg, rgb(8 10 12 / 0.9) 0%, rgb(0 0 0 / 0.94) 56%, rgb(6 8 10 / 0.9) 100%),
-      radial-gradient(circle at 18% 0%, rgb(62 232 255 / 0.05), transparent 40%),
-      radial-gradient(circle at 84% 8%, rgb(133 255 68 / 0.04), transparent 36%);
+      linear-gradient(
+        176deg,
+        rgb(var(--hud-surface-alt-rgb) / 0.9) 0%,
+        rgb(var(--hud-surface-deep-rgb) / 0.94) 56%,
+        rgb(var(--hud-surface-rgb) / 0.9) 100%
+      ),
+      radial-gradient(circle at 18% 0%, rgb(var(--hud-glow-rgb) / 0.05), transparent 40%),
+      radial-gradient(circle at 84% 8%, rgb(var(--hud-glow-alt-rgb) / 0.04), transparent 36%);
     box-shadow:
-      inset 0 1px 0 rgb(197 228 245 / 0.08),
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.08),
       inset 0 -28px 60px rgb(0 0 0 / 0.34);
     overflow: hidden;
   }
@@ -1356,21 +1765,21 @@
     grid-template-columns: auto 1fr;
     align-items: center;
     gap: 0.75rem;
-    border: 1px solid rgb(103 135 154 / 0.24);
+    border: 1px solid rgb(var(--hud-border-rgb) / 0.24);
     border-radius: 0.48rem;
     padding: 0.34rem 0.52rem;
     background:
-      linear-gradient(180deg, rgb(4 10 14 / 0.72), rgb(2 6 10 / 0.56)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.06), transparent 52%);
+      linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.72), rgb(var(--hud-surface-deep-rgb) / 0.56)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.06), transparent 52%);
     box-shadow:
-      inset 0 1px 0 rgb(176 218 240 / 0.06),
-      0 0 12px rgb(62 232 255 / 0.08);
+      inset 0 1px 0 rgb(var(--hud-border-strong-rgb) / 0.06),
+      0 0 12px rgb(var(--hud-glow-rgb) / 0.08);
     pointer-events: none;
   }
 
   .range-label {
     margin: 0;
-    color: rgb(146 170 187 / 0.82);
+    color: rgb(var(--hud-text-dim-rgb) / 0.82);
     font-size: 0.56rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
@@ -1383,9 +1792,9 @@
     grid-template-columns: repeat(11, minmax(0, 1fr));
     gap: 0.26rem;
     padding: 0.28rem 0.36rem 0.16rem;
-    border: 1px solid rgb(131 181 200 / 0.14);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.14);
     border-radius: 999px;
-    background: rgb(6 13 16 / 0.34);
+    background: rgb(var(--hud-surface-rgb) / 0.34);
     overflow: hidden;
   }
 
@@ -1399,15 +1808,18 @@
       linear-gradient(
         90deg,
         color-mix(in srgb, var(--hud-range-0) 92%, black) 0%,
-        color-mix(in srgb, var(--hud-range-1) 94%, black) 18%,
-        color-mix(in srgb, var(--hud-range-2) 96%, black) 40%,
-        color-mix(in srgb, var(--hud-range-3) 98%, black) 66%,
-        color-mix(in srgb, var(--hud-range-4) 96%, black) 84%,
+        color-mix(in srgb, var(--hud-range-1) 96%, black) 12.5%,
+        color-mix(in srgb, var(--hud-range-1) 92%, black) 25%,
+        color-mix(in srgb, var(--hud-range-2) 96%, black) 37.5%,
+        color-mix(in srgb, var(--hud-range-2) 92%, black) 50%,
+        color-mix(in srgb, var(--hud-range-3) 96%, black) 62.5%,
+        color-mix(in srgb, var(--hud-range-3) 92%, black) 75%,
+        color-mix(in srgb, var(--hud-range-4) 96%, black) 87.5%,
         color-mix(in srgb, var(--hud-range-5) 94%, black) 100%
       ),
-      linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 42%);
+      linear-gradient(180deg, rgb(var(--hud-text-main-rgb) / 0.06), transparent 42%);
     box-shadow:
-      inset 0 1px 0 rgb(255 255 255 / 0.1),
+      inset 0 1px 0 rgb(var(--hud-text-main-rgb) / 0.1),
       inset 0 -10px 18px rgb(0 0 0 / 0.18);
     opacity: 0.94;
   }
@@ -1433,12 +1845,12 @@
     position: relative;
     z-index: 1;
     padding-block-start: 0.36rem;
-    color: rgb(230 243 252 / 0.96);
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     font-size: 0.56rem;
     text-align: center;
     text-shadow:
       0 1px 0 rgb(0 0 0 / 0.46),
-      0 0 12px rgb(10 18 24 / 0.4);
+      0 0 12px rgb(var(--hud-surface-alt-rgb) / 0.4);
   }
 
   .range-tick::before {
@@ -1449,8 +1861,8 @@
     inline-size: 1px;
     block-size: 0.24rem;
     transform: translateX(-50%);
-    background: rgb(234 247 255 / 0.74);
-    box-shadow: 0 0 8px rgb(62 232 255 / 0.22);
+    background: rgb(var(--hud-text-main-rgb) / 0.74);
+    box-shadow: 0 0 8px rgb(var(--hud-glow-rgb) / 0.22);
   }
 
   @media (max-width: 760px) {

static/svelte.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

static/tauri.svg

@@ -1,6 +0,0 @@
-<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
-<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
-</svg>

static/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>