From c61b79e84ba42c4ae91d9e513f936464cedd1c58 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <vhaudiquet343@hotmail.fr>
Date: Sat, 16 May 2026 23:52:52 +0200
Subject: [PATCH] tauri-app: allow editing record-daemon settings

---
 tauri-app/src-tauri/Cargo.lock           |    1 +
 tauri-app/src-tauri/Cargo.toml           |    1 +
 tauri-app/src-tauri/src/daemon_ipc.rs    |  377 +++++++
 tauri-app/src-tauri/src/lib.rs           |   14 +-
 tauri-app/src/App.vue                    |   89 +-
 tauri-app/src/components/GameHistory.vue |    4 -
 tauri-app/src/components/Settings.vue    | 1239 ++++++++++++++++++++++
 tauri-app/src/types/daemon.ts            |  148 +++
 8 files changed, 1865 insertions(+), 8 deletions(-)
 create mode 100644 tauri-app/src-tauri/src/daemon_ipc.rs
 create mode 100644 tauri-app/src/components/Settings.vue
 create mode 100644 tauri-app/src/types/daemon.ts

diff --git a/tauri-app/src-tauri/Cargo.lock b/tauri-app/src-tauri/Cargo.lock
index 065ee5b..046648c 100644
--- a/tauri-app/src-tauri/Cargo.lock
+++ b/tauri-app/src-tauri/Cargo.lock
@@ -3809,6 +3809,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-opener",
+ "tokio",
  "uuid",
 ]
 
diff --git a/tauri-app/src-tauri/Cargo.toml b/tauri-app/src-tauri/Cargo.toml
index 6081a55..dbd7c7c 100644
--- a/tauri-app/src-tauri/Cargo.toml
+++ b/tauri-app/src-tauri/Cargo.toml
@@ -26,4 +26,5 @@ chrono = { version = "0.4", features = ["serde"] }
 uuid = { version = "1", features = ["v4", "serde"] }
 directories = "6"
 ffmpeg-sidecar = "2.4"
+tokio = { version = "1", features = ["net", "io-util", "time"] }
 
diff --git a/tauri-app/src-tauri/src/daemon_ipc.rs b/tauri-app/src-tauri/src/daemon_ipc.rs
new file mode 100644
index 0000000..96527f7
--- /dev/null
+++ b/tauri-app/src-tauri/src/daemon_ipc.rs
@@ -0,0 +1,377 @@
+//! IPC client for communicating with the record-daemon.
+//!
+//! Connects to the daemon via named pipes on Windows or Unix sockets on Linux,
+//! using the same JSON-over-newline-delimited protocol.
+
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+use std::time::Duration;
+
+// ---------------------------------------------------------------------------
+// Protocol types (mirror of record-daemon IPC protocol)
+// ---------------------------------------------------------------------------
+
+/// IPC message wrapper.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct IpcMessage {
+    #[serde(rename = "type")]
+    pub message_type: MessageType,
+    pub id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub command: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub payload: Option<serde_json::Value>,
+}
+
+/// Message type.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "lowercase")]
+pub enum MessageType {
+    Request,
+    Response,
+    Notification,
+}
+
+/// IPC response from the daemon.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct IpcResponse {
+    pub request_id: String,
+    pub success: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub data: Option<serde_json::Value>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub error: Option<String>,
+}
+
+// ---------------------------------------------------------------------------
+// IPC commands (camelCase to match daemon's serde rename)
+// ---------------------------------------------------------------------------
+
+/// IPC command names matching the daemon's `IpcCommand` enum.
+pub mod commands {
+    pub const GET_SETTINGS: &str = "getSettings";
+    pub const UPDATE_SETTINGS: &str = "updateSettings";
+    pub const RESET_SETTINGS: &str = "resetSettings";
+    pub const GET_STATUS: &str = "getStatus";
+    pub const GET_ENCODERS: &str = "getEncoders";
+    pub const START_RECORDING: &str = "startRecording";
+    pub const STOP_RECORDING: &str = "stopRecording";
+    pub const SHUTDOWN: &str = "shutdown";
+}
+
+// ---------------------------------------------------------------------------
+// Default socket path (same logic as daemon)
+// ---------------------------------------------------------------------------
+
+/// Default socket path for the IPC server.
+#[cfg(target_os = "windows")]
+pub fn default_socket_path() -> PathBuf {
+    PathBuf::from(r"\\.\pipe\record-daemon")
+}
+
+/// Default socket path for the IPC server.
+#[cfg(target_os = "linux")]
+pub fn default_socket_path() -> PathBuf {
+    std::env::var("XDG_RUNTIME_DIR")
+        .map(PathBuf::from)
+        .unwrap_or_else(|_| PathBuf::from("/tmp"))
+        .join("record-daemon.sock")
+}
+
+// ---------------------------------------------------------------------------
+// IPC Client
+// ---------------------------------------------------------------------------
+
+/// IPC client for communicating with the record-daemon.
+pub struct IpcClient {
+    socket_path: PathBuf,
+    timeout: Duration,
+}
+
+impl IpcClient {
+    /// Create a new IPC client with the default socket path.
+    pub fn new() -> Self {
+        Self {
+            socket_path: default_socket_path(),
+            timeout: Duration::from_secs(5),
+        }
+    }
+
+    /// Create a new IPC client with a custom socket path.
+    #[allow(dead_code)]
+    pub fn with_socket_path(socket_path: PathBuf) -> Self {
+        Self {
+            socket_path,
+            timeout: Duration::from_secs(5),
+        }
+    }
+
+    /// Send a command to the daemon and return the response.
+    pub async fn send_command(
+        &self,
+        command: &str,
+        payload: Option<serde_json::Value>,
+    ) -> Result<IpcResponse, String> {
+        let id = uuid::Uuid::new_v4().to_string();
+        let message = IpcMessage {
+            message_type: MessageType::Request,
+            id: id.clone(),
+            command: Some(command.to_string()),
+            payload,
+        };
+
+        let message_json = serde_json::to_string(&message)
+            .map_err(|e| format!("Failed to serialize message: {}", e))?;
+
+        let response_str = self.send_raw(&message_json).await?;
+
+        let response: IpcResponse = serde_json::from_str(&response_str)
+            .map_err(|e| format!("Failed to parse response: {}", e))?;
+
+        Ok(response)
+    }
+
+    /// Send a raw JSON string and read the response.
+    #[cfg(target_os = "windows")]
+    async fn send_raw(&self, message: &str) -> Result<String, String> {
+        use tokio::io::{AsyncBufReadExt, AsyncWriteExt, BufReader};
+        use tokio::net::windows::named_pipe::ClientOptions;
+
+        // Connect to the named pipe
+        let pipe_name = self.socket_path.to_string_lossy().to_string();
+
+        let client = tokio::time::timeout(self.timeout, async {
+            // Try to connect - if the pipe is busy, retry a few times
+            let mut attempts = 0;
+            loop {
+                match ClientOptions::new().open(&pipe_name) {
+                    Ok(client) => return Ok(client),
+                    Err(e) if e.raw_os_error() == Some(231) => {
+                        // ERROR_PIPE_BUSY = 231
+                        attempts += 1;
+                        if attempts > 5 {
+                            return Err(format!("Pipe busy after 5 attempts: {}", e));
+                        }
+                        tokio::time::sleep(Duration::from_millis(100)).await;
+                    }
+                    Err(e) => return Err(format!("Failed to connect to daemon: {}", e)),
+                }
+            }
+        })
+        .await
+        .map_err(|_| "Connection to daemon timed out".to_string())??;
+
+        let (reader, mut writer) = tokio::io::split(client);
+
+        // Send message
+        writer
+            .write_all(message.as_bytes())
+            .await
+            .map_err(|e| format!("Failed to write to pipe: {}", e))?;
+        writer
+            .write_all(b"\n")
+            .await
+            .map_err(|e| format!("Failed to write newline: {}", e))?;
+        writer
+            .flush()
+            .await
+            .map_err(|e| format!("Failed to flush pipe: {}", e))?;
+
+        // Read response
+        let mut lines = BufReader::new(reader).lines();
+        let line = tokio::time::timeout(self.timeout, lines.next_line())
+            .await
+            .map_err(|_| "Reading from daemon timed out".to_string())?
+            .map_err(|e| format!("Failed to read from pipe: {}", e))?;
+
+        match line {
+            Some(line) => Ok(line),
+            None => Err("Daemon closed connection without response".to_string()),
+        }
+    }
+
+    /// Send a raw JSON string and read the response (Linux).
+    #[cfg(target_os = "linux")]
+    async fn send_raw(&self, message: &str) -> Result<String, String> {
+        use tokio::io::{AsyncBufReadExt, AsyncWriteExt, BufReader};
+        use tokio::net::UnixStream;
+
+        let stream = tokio::time::timeout(self.timeout, UnixStream::connect(&self.socket_path))
+            .await
+            .map_err(|_| "Connection to daemon timed out".to_string())?
+            .map_err(|e| format!("Failed to connect to daemon: {}", e))?;
+
+        let (reader, mut writer) = stream.into_split();
+
+        // Send message
+        writer
+            .write_all(message.as_bytes())
+            .await
+            .map_err(|e| format!("Failed to write to socket: {}", e))?;
+        writer
+            .write_all(b"\n")
+            .await
+            .map_err(|e| format!("Failed to write newline: {}", e))?;
+        writer
+            .flush()
+            .await
+            .map_err(|e| format!("Failed to flush socket: {}", e))?;
+
+        // Read response
+        let mut lines = BufReader::new(reader).lines();
+        let line = tokio::time::timeout(self.timeout, lines.next_line())
+            .await
+            .map_err(|_| "Reading from daemon timed out".to_string())?
+            .map_err(|e| format!("Failed to read from socket: {}", e))?;
+
+        match line {
+            Some(line) => Ok(line),
+            None => Err("Daemon closed connection without response".to_string()),
+        }
+    }
+
+    /// Check if the daemon is reachable.
+    pub async fn is_daemon_running(&self) -> bool {
+        self.send_command(commands::GET_STATUS, None).await.is_ok()
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Tauri commands
+// ---------------------------------------------------------------------------
+
+/// Check if the record-daemon is running.
+#[tauri::command]
+pub async fn daemon_is_running() -> bool {
+    let client = IpcClient::new();
+    client.is_daemon_running().await
+}
+
+/// Get the daemon status.
+#[tauri::command]
+pub async fn daemon_get_status() -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::GET_STATUS, None)
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
+
+/// Get the current daemon settings.
+#[tauri::command]
+pub async fn daemon_get_settings() -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::GET_SETTINGS, None)
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        // The daemon wraps settings in { settings: {...} }
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
+
+/// Update daemon settings.
+#[tauri::command]
+pub async fn daemon_update_settings(settings: serde_json::Value) -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::UPDATE_SETTINGS, Some(settings))
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
+
+/// Reset daemon settings to defaults.
+#[tauri::command]
+pub async fn daemon_reset_settings() -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::RESET_SETTINGS, None)
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
+
+/// Get available encoders from the daemon.
+#[tauri::command]
+pub async fn daemon_get_encoders() -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::GET_ENCODERS, None)
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
+
+/// Start recording manually via the daemon.
+#[tauri::command]
+pub async fn daemon_start_recording() -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::START_RECORDING, None)
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
+
+/// Stop recording via the daemon.
+#[tauri::command]
+pub async fn daemon_stop_recording() -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::STOP_RECORDING, None)
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
+
+/// Shutdown the daemon.
+#[tauri::command]
+pub async fn daemon_shutdown() -> Result<serde_json::Value, String> {
+    let client = IpcClient::new();
+    let response = client
+        .send_command(commands::SHUTDOWN, None)
+        .await
+        .map_err(|e| e)?;
+
+    if response.success {
+        Ok(response.data.unwrap_or(serde_json::Value::Null))
+    } else {
+        Err(response.error.unwrap_or_else(|| "Unknown error".to_string()))
+    }
+}
diff --git a/tauri-app/src-tauri/src/lib.rs b/tauri-app/src-tauri/src/lib.rs
index 11ed0a7..7813992 100644
--- a/tauri-app/src-tauri/src/lib.rs
+++ b/tauri-app/src-tauri/src/lib.rs
@@ -1,3 +1,5 @@
+mod daemon_ipc;
+
 use ffmpeg_sidecar::{
     command::{ffmpeg_is_installed, FfmpegCommand},
     download::auto_download,
@@ -403,7 +405,17 @@ pub fn run() {
             export_clip_precise,
             check_ffmpeg,
             download_ffmpeg,
-            get_video_metadata
+            get_video_metadata,
+            // Daemon IPC commands
+            daemon_ipc::daemon_is_running,
+            daemon_ipc::daemon_get_status,
+            daemon_ipc::daemon_get_settings,
+            daemon_ipc::daemon_update_settings,
+            daemon_ipc::daemon_reset_settings,
+            daemon_ipc::daemon_get_encoders,
+            daemon_ipc::daemon_start_recording,
+            daemon_ipc::daemon_stop_recording,
+            daemon_ipc::daemon_shutdown,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/tauri-app/src/App.vue b/tauri-app/src/App.vue
index 98710ba..f77ef6e 100644
--- a/tauri-app/src/App.vue
+++ b/tauri-app/src/App.vue
@@ -2,10 +2,11 @@
 import { ref } from "vue";
 import GameHistory from "./components/GameHistory.vue";
 import GameReview from "./components/GameReview.vue";
+import Settings from "./components/Settings.vue";
 import type { GameHistoryItem } from "./types/timeline";
 
 // Current view state
-const currentView = ref<"history" | "review">("history");
+const currentView = ref<"history" | "review" | "settings">("history");
 const selectedGame = ref<GameHistoryItem | null>(null);
 
 // Navigate to review view
@@ -19,12 +20,50 @@ function closeReview() {
   currentView.value = "history";
   selectedGame.value = null;
 }
+
+// Navigate to settings
+function openSettings() {
+  currentView.value = "settings";
+}
+
+// Navigate back from settings
+function closeSettings() {
+  currentView.value = "history";
+}
 </script>
 
 <template>
   <div class="app">
-    <GameHistory 
-      v-if="currentView === 'history'" 
+    <!-- Navigation bar -->
+    <nav v-if="currentView !== 'review'" class="app-nav">
+      <div class="nav-left">
+        <button
+          :class="['nav-tab', { active: currentView === 'history' }]"
+          @click="currentView = 'history'"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="7" height="7" rx="1" />
+            <rect x="14" y="3" width="7" height="7" rx="1" />
+            <rect x="3" y="14" width="7" height="7" rx="1" />
+            <rect x="14" y="14" width="7" height="7" rx="1" />
+          </svg>
+          Game History
+        </button>
+        <button
+          :class="['nav-tab', { active: currentView === 'settings' }]"
+          @click="openSettings"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+          </svg>
+          Settings
+        </button>
+      </div>
+    </nav>
+
+    <GameHistory
+      v-if="currentView === 'history'"
       @open-review="openReview"
     />
     <GameReview
@@ -32,6 +71,10 @@ function closeReview() {
       :game="selectedGame"
       @back="closeReview"
     />
+    <Settings
+      v-else-if="currentView === 'settings'"
+      @back="closeSettings"
+    />
   </div>
 </template>
 
@@ -72,4 +115,44 @@ body {
   min-height: 100vh;
   background: #0a0a13;
 }
+
+/* Navigation bar */
+.app-nav {
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.nav-left {
+  display: flex;
+  gap: 4px;
+}
+
+.nav-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  color: #94a3b8;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.nav-tab:hover {
+  color: #e2e8f0;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.nav-tab.active {
+  color: #f1f5f9;
+  background: rgba(255, 255, 255, 0.08);
+}
 </style>
diff --git a/tauri-app/src/components/GameHistory.vue b/tauri-app/src/components/GameHistory.vue
index 50d3e7f..cfee0c8 100644
--- a/tauri-app/src/components/GameHistory.vue
+++ b/tauri-app/src/components/GameHistory.vue
@@ -104,10 +104,6 @@ async function loadGameHistory() {
   }
 }
 
-function selectGame(game: GameHistoryItem) {
-  selectedGame.value = game;
-}
-
 function closeDetail() {
   selectedGame.value = null;
 }
diff --git a/tauri-app/src/components/Settings.vue b/tauri-app/src/components/Settings.vue
new file mode 100644
index 0000000..7c00127
--- /dev/null
+++ b/tauri-app/src/components/Settings.vue
@@ -0,0 +1,1239 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import type {
+  Settings,
+  GetSettingsResponse,
+  EncoderPreset,
+  NvencPreset,
+  AmfPreset,
+  X264Preset,
+  DaemonStatusResponse,
+  EncodersResponse,
+} from "../types/daemon";
+import {
+  QUALITY_LEVELS,
+  CONTAINER_FORMATS,
+  LOG_LEVELS,
+  X264_PRESETS,
+  AMF_QUALITIES,
+} from "../types/daemon";
+
+// Emits
+const emit = defineEmits<{
+  (e: "back"): void;
+}>();
+
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+
+const loading = ref(true);
+const error = ref<string | null>(null);
+const saving = ref(false);
+const saveSuccess = ref(false);
+const settings = ref<Settings | null>(null);
+const daemonStatus = ref<DaemonStatusResponse | null>(null);
+const encoders = ref<EncodersResponse | null>(null);
+const daemonRunning = ref(false);
+const statusPolling = ref<ReturnType<typeof setInterval> | null>(null);
+
+// Active settings tab
+type SettingsTab = "video" | "output" | "audio" | "daemon";
+const activeTab = ref<SettingsTab>("video");
+
+// ---------------------------------------------------------------------------
+// Load data
+// ---------------------------------------------------------------------------
+
+async function loadSettings() {
+  try {
+    loading.value = true;
+    error.value = null;
+
+    // Check if daemon is running
+    daemonRunning.value = await invoke<boolean>("daemon_is_running");
+
+    if (daemonRunning.value) {
+      // Load settings from daemon via IPC
+      const settingsData = await invoke<GetSettingsResponse>("daemon_get_settings");
+      settings.value = settingsData.settings;
+
+      // Load status
+      try {
+        daemonStatus.value = await invoke<DaemonStatusResponse>("daemon_get_status");
+      } catch {
+        daemonStatus.value = null;
+      }
+
+      // Load encoders
+      try {
+        const encodersData = await invoke<EncodersResponse>("daemon_get_encoders");
+        encoders.value = encodersData;
+      } catch {
+        encoders.value = null;
+      }
+    } else {
+      settings.value = null;
+    }
+  } catch (e) {
+    error.value = `Failed to load settings: ${e}`;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function refreshStatus() {
+  if (!daemonRunning.value) return;
+  try {
+    daemonStatus.value = await invoke<DaemonStatusResponse>("daemon_get_status");
+  } catch {
+    // Silently ignore - daemon might have stopped
+  }
+  try {
+    daemonRunning.value = await invoke<boolean>("daemon_is_running");
+  } catch {
+    daemonRunning.value = false;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Save settings
+// ---------------------------------------------------------------------------
+
+async function saveSettings() {
+  if (!settings.value) return;
+  try {
+    saving.value = true;
+    saveSuccess.value = false;
+    await invoke("daemon_update_settings", { settings: settings.value });
+    saveSuccess.value = true;
+    setTimeout(() => {
+      saveSuccess.value = false;
+    }, 2000);
+  } catch (e) {
+    error.value = `Failed to save settings: ${e}`;
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function resetSettings() {
+  try {
+    const result = await invoke<Settings>("daemon_reset_settings");
+    settings.value = result;
+    saveSuccess.value = true;
+    setTimeout(() => {
+      saveSuccess.value = false;
+    }, 2000);
+  } catch (e) {
+    error.value = `Failed to reset settings: ${e}`;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Daemon control
+// ---------------------------------------------------------------------------
+
+async function startRecording() {
+  try {
+    await invoke("daemon_start_recording");
+    await refreshStatus();
+  } catch (e) {
+    error.value = `Failed to start recording: ${e}`;
+  }
+}
+
+async function stopRecording() {
+  try {
+    await invoke("daemon_stop_recording");
+    await refreshStatus();
+  } catch (e) {
+    error.value = `Failed to stop recording: ${e}`;
+  }
+}
+
+async function shutdownDaemon() {
+  try {
+    await invoke("daemon_shutdown");
+    daemonRunning.value = false;
+    daemonStatus.value = null;
+  } catch (e) {
+    error.value = `Failed to shutdown daemon: ${e}`;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Encoder preset helpers
+// ---------------------------------------------------------------------------
+
+const encoderType = computed({
+  get: () => settings.value?.video.encoder_preset.type ?? "nvenc",
+  set: (type: string) => {
+    if (!settings.value) return;
+    let newPreset: EncoderPreset;
+    switch (type) {
+      case "nvenc":
+        newPreset = { type: "nvenc", bitrate: 8000, cq_level: 20, two_pass: true };
+        break;
+      case "amf":
+        newPreset = { type: "amf", bitrate: 8000, quality: "balanced" };
+        break;
+      case "x264":
+        newPreset = { type: "x264", preset: "veryfast", bitrate: 6000, crf: null };
+        break;
+      default:
+        return;
+    }
+    settings.value.video.encoder_preset = newPreset;
+  },
+});
+
+const nvencPreset = computed(() => {
+  const ep = settings.value?.video.encoder_preset;
+  return ep?.type === "nvenc" ? (ep as NvencPreset) : null;
+});
+
+const amfPreset = computed(() => {
+  const ep = settings.value?.video.encoder_preset;
+  return ep?.type === "amf" ? (ep as AmfPreset) : null;
+});
+
+const x264PresetComputed = computed(() => {
+  const ep = settings.value?.video.encoder_preset;
+  return ep?.type === "x264" ? (ep as X264Preset) : null;
+});
+
+// ---------------------------------------------------------------------------
+// Status display helpers
+// ---------------------------------------------------------------------------
+
+const statusLabel = computed(() => {
+  if (!daemonStatus.value) return "Unknown";
+  const s = daemonStatus.value.status;
+  const map: Record<string, string> = {
+    idle: "Idle",
+    monitoring: "Monitoring",
+    recording: "Recording",
+    error: "Error",
+    shutting_down: "Shutting Down",
+  };
+  return map[s] ?? s;
+});
+
+const statusColor = computed(() => {
+  if (!daemonStatus.value) return "#888";
+  const s = daemonStatus.value.status;
+  const map: Record<string, string> = {
+    idle: "#6b7280",
+    monitoring: "#3b82f6",
+    recording: "#ef4444",
+    error: "#f59e0b",
+    shutting_down: "#9ca3af",
+  };
+  return map[s] ?? "#888";
+});
+
+// ---------------------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------------------
+
+onMounted(async () => {
+  await loadSettings();
+  // Poll daemon status every 3 seconds
+  statusPolling.value = setInterval(refreshStatus, 3000);
+});
+
+onUnmounted(() => {
+  if (statusPolling.value) {
+    clearInterval(statusPolling.value);
+  }
+});
+</script>
+
+<template>
+  <div class="settings">
+    <!-- Header -->
+    <header class="settings-header">
+      <button class="back-btn" @click="emit('back')">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M19 12H5M12 19l-7-7 7-7" />
+        </svg>
+        Back
+      </button>
+      <h1 class="settings-title">Settings</h1>
+      <div class="header-actions">
+        <button
+          v-if="settings"
+          class="btn btn-secondary"
+          @click="resetSettings"
+        >
+          Reset to Defaults
+        </button>
+        <button
+          v-if="settings"
+          class="btn btn-primary"
+          :disabled="saving"
+          @click="saveSettings"
+        >
+          {{ saving ? "Saving..." : saveSuccess ? "✓ Saved" : "Save Changes" }}
+        </button>
+      </div>
+    </header>
+
+    <!-- Error banner -->
+    <div v-if="error" class="error-banner">
+      <span>{{ error }}</span>
+      <button class="error-close" @click="error = null">×</button>
+    </div>
+
+    <!-- Daemon not running -->
+    <div v-if="!loading && !daemonRunning" class="daemon-offline">
+      <div class="offline-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+        </svg>
+      </div>
+      <h2>Record Daemon Not Running</h2>
+      <p>Start the record-daemon to configure settings and control recording.</p>
+      <button class="btn btn-primary" @click="loadSettings">
+        Retry Connection
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading">
+      <div class="spinner"></div>
+      <p>Loading settings...</p>
+    </div>
+
+    <!-- Settings content -->
+    <div v-if="!loading && daemonRunning && settings" class="settings-content">
+      <!-- Daemon status bar -->
+      <div class="status-bar">
+        <div class="status-indicator">
+          <span class="status-dot" :style="{ backgroundColor: statusColor }"></span>
+          <span class="status-text">{{ statusLabel }}</span>
+        </div>
+        <div class="status-details">
+          <span v-if="daemonStatus?.client_connected" class="status-tag connected">
+            Client Connected
+          </span>
+          <span v-else class="status-tag disconnected">
+            Client Disconnected
+          </span>
+          <span v-if="daemonStatus?.is_recording" class="status-tag recording">
+            ● Recording
+          </span>
+        </div>
+        <div class="status-actions">
+          <button
+            v-if="!daemonStatus?.is_recording"
+            class="btn btn-small btn-accent"
+            @click="startRecording"
+          >
+            Start Recording
+          </button>
+          <button
+            v-else
+            class="btn btn-small btn-danger"
+            @click="stopRecording"
+          >
+            Stop Recording
+          </button>
+          <button class="btn btn-small btn-ghost" @click="shutdownDaemon">
+            Shutdown Daemon
+          </button>
+        </div>
+      </div>
+
+      <!-- Tab navigation -->
+      <nav class="tab-nav">
+        <button
+          v-for="tab in (['video', 'output', 'audio', 'daemon'] as const)"
+          :key="tab"
+          :class="['tab-btn', { active: activeTab === tab }]"
+          @click="activeTab = tab"
+        >
+          {{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
+        </button>
+      </nav>
+
+      <!-- Video tab -->
+      <div v-if="activeTab === 'video'" class="tab-content">
+        <section class="settings-section">
+          <h3>Encoder</h3>
+          <div class="form-group">
+            <label class="form-label">Encoder Type</label>
+            <select v-model="encoderType" class="form-select">
+              <option value="nvenc">NVIDIA NVENC (Hardware)</option>
+              <option value="amf">AMD AMF (Hardware)</option>
+              <option value="x264">x264 (Software)</option>
+            </select>
+          </div>
+
+          <!-- NVENC settings -->
+          <template v-if="nvencPreset">
+            <div class="form-group">
+              <label class="form-label">Bitrate (kbps)</label>
+              <input
+                v-model.number="nvencPreset.bitrate"
+                type="number"
+                class="form-input"
+                min="1000"
+                max="50000"
+                step="500"
+              />
+              <span class="form-hint">Recommended: 8000 for 1080p60</span>
+            </div>
+            <div class="form-group">
+              <label class="form-label">CQ Level</label>
+              <input
+                v-model.number="nvencPreset.cq_level"
+                type="number"
+                class="form-input"
+                min="0"
+                max="51"
+                step="1"
+              />
+              <span class="form-hint">Lower = better quality, larger file. Default: 20</span>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Two-Pass Encoding</label>
+              <label class="toggle">
+                <input v-model="nvencPreset.two_pass" type="checkbox" />
+                <span class="toggle-slider"></span>
+              </label>
+              <span class="form-hint">Better quality at the cost of slightly more GPU usage</span>
+            </div>
+          </template>
+
+          <!-- AMF settings -->
+          <template v-if="amfPreset">
+            <div class="form-group">
+              <label class="form-label">Bitrate (kbps)</label>
+              <input
+                v-model.number="amfPreset.bitrate"
+                type="number"
+                class="form-input"
+                min="1000"
+                max="50000"
+                step="500"
+              />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Quality Preset</label>
+              <select v-model="amfPreset.quality" class="form-select">
+                <option
+                  v-for="q in AMF_QUALITIES"
+                  :key="q.value"
+                  :value="q.value"
+                >
+                  {{ q.label }}
+                </option>
+              </select>
+            </div>
+          </template>
+
+          <!-- x264 settings -->
+          <template v-if="x264PresetComputed">
+            <div class="form-group">
+              <label class="form-label">Preset</label>
+              <select v-model="x264PresetComputed.preset" class="form-select">
+                <option v-for="p in X264_PRESETS" :key="p" :value="p">
+                  {{ p.charAt(0).toUpperCase() + p.slice(1) }}
+                </option>
+              </select>
+              <span class="form-hint">Slower = better compression, more CPU usage</span>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Bitrate (kbps)</label>
+              <input
+                v-model.number="x264PresetComputed.bitrate"
+                type="number"
+                class="form-input"
+                min="1000"
+                max="50000"
+                step="500"
+              />
+            </div>
+            <div class="form-group">
+              <label class="form-label">CRF (optional)</label>
+              <input
+                v-model.number="x264PresetComputed.crf"
+                type="number"
+                class="form-input"
+                min="0"
+                max="51"
+                step="1"
+                placeholder="Leave empty for bitrate mode"
+              />
+              <span class="form-hint">Constant Rate Factor. Overrides bitrate if set. Lower = better quality.</span>
+            </div>
+          </template>
+        </section>
+
+        <section class="settings-section">
+          <h3>Quality</h3>
+          <div class="form-group">
+            <label class="form-label">Quality Level</label>
+            <div class="quality-grid">
+              <button
+                v-for="q in QUALITY_LEVELS"
+                :key="q.value"
+                :class="['quality-card', { selected: settings.video.quality === q.value }]"
+                @click="settings.video.quality = q.value"
+              >
+                <span class="quality-name">{{ q.label }}</span>
+                <span class="quality-desc">{{ q.description }}</span>
+              </button>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Frame Rate</label>
+            <select v-model.number="settings.video.frame_rate" class="form-select">
+              <option :value="24">24 fps</option>
+              <option :value="30">30 fps</option>
+              <option :value="60">60 fps</option>
+              <option :value="120">120 fps</option>
+              <option :value="144">144 fps</option>
+              <option :value="240">240 fps</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Hardware Acceleration</label>
+            <label class="toggle">
+              <input v-model="settings.video.hardware_acceleration" type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+        </section>
+      </div>
+
+      <!-- Output tab -->
+      <div v-if="activeTab === 'output'" class="tab-content">
+        <section class="settings-section">
+          <h3>Recording Output</h3>
+          <div class="form-group">
+            <label class="form-label">Output Directory</label>
+            <input
+              v-model="settings.output.path"
+              type="text"
+              class="form-input"
+              placeholder="Path to save recordings"
+            />
+            <span class="form-hint">Directory where recordings will be saved</span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Naming Pattern</label>
+            <input
+              v-model="settings.output.naming_pattern"
+              type="text"
+              class="form-input"
+              placeholder="{date}_{time}_{champion}"
+            />
+            <span class="form-hint">
+              Available tokens: {date}, {time}, {game_id}, {champion}, {queue_type}
+            </span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Container Format</label>
+            <select v-model="settings.output.container" class="form-select">
+              <option v-for="fmt in CONTAINER_FORMATS" :key="fmt" :value="fmt">
+                {{ fmt.toUpperCase() }}
+              </option>
+            </select>
+            <span class="form-hint">
+              MP4 is most compatible. MKV is more resilient to crashes.
+            </span>
+          </div>
+        </section>
+
+        <section class="settings-section">
+          <h3>Recording Split</h3>
+          <div class="form-group">
+            <label class="form-label">Split by Size (MB)</label>
+            <input
+              v-model.number="settings.output.split_size_mb"
+              type="number"
+              class="form-input"
+              min="0"
+              step="100"
+              placeholder="0 = no splitting"
+            />
+            <span class="form-hint">Split recording when file reaches this size. 0 = disabled.</span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Split by Time (minutes)</label>
+            <input
+              v-model.number="settings.output.split_time_minutes"
+              type="number"
+              class="form-input"
+              min="0"
+              step="5"
+              placeholder="0 = no splitting"
+            />
+            <span class="form-hint">Split recording after this duration. 0 = disabled.</span>
+          </div>
+        </section>
+      </div>
+
+      <!-- Audio tab -->
+      <div v-if="activeTab === 'audio'" class="tab-content">
+        <section class="settings-section">
+          <h3>Audio Capture</h3>
+          <div class="form-group">
+            <label class="form-label">Enable Audio Recording</label>
+            <label class="toggle">
+              <input v-model="settings.audio.enabled" type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+          <template v-if="settings.audio.enabled">
+            <div class="form-group">
+              <label class="form-label">Audio Bitrate (kbps)</label>
+              <select v-model.number="settings.audio.bitrate" class="form-select">
+                <option :value="96">96 kbps</option>
+                <option :value="128">128 kbps</option>
+                <option :value="192">192 kbps</option>
+                <option :value="256">256 kbps</option>
+                <option :value="320">320 kbps</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Sample Rate (Hz)</label>
+              <select v-model.number="settings.audio.sample_rate" class="form-select">
+                <option :value="44100">44100 Hz</option>
+                <option :value="48000">48000 Hz</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Channels</label>
+              <select v-model.number="settings.audio.channels" class="form-select">
+                <option :value="1">Mono</option>
+                <option :value="2">Stereo</option>
+              </select>
+            </div>
+          </template>
+        </section>
+
+        <section class="settings-section">
+          <h3>Audio Sources</h3>
+          <div class="form-group">
+            <label class="form-label">Capture Game Audio</label>
+            <label class="toggle">
+              <input v-model="settings.audio.capture_game" type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="form-hint">Record the game's audio output</span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Capture Microphone</label>
+            <label class="toggle">
+              <input v-model="settings.audio.capture_mic" type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="form-hint">Record microphone input alongside game audio</span>
+          </div>
+          <div v-if="settings.audio.capture_mic" class="form-group">
+            <label class="form-label">Microphone Device</label>
+            <input
+              v-model="settings.audio.mic_device"
+              type="text"
+              class="form-input"
+              placeholder="Default device"
+            />
+            <span class="form-hint">Leave empty for system default microphone</span>
+          </div>
+        </section>
+      </div>
+
+      <!-- Daemon tab -->
+      <div v-if="activeTab === 'daemon'" class="tab-content">
+        <section class="settings-section">
+          <h3>Daemon Behavior</h3>
+          <div class="form-group">
+            <label class="form-label">Auto Record</label>
+            <label class="toggle">
+              <input v-model="settings.daemon.auto_record" type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="form-hint">Automatically start recording when a match begins</span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Monitor League Client</label>
+            <label class="toggle">
+              <input v-model="settings.daemon.monitor_client" type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="form-hint">Watch for League Client startup and connect automatically</span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Poll Interval (ms)</label>
+            <input
+              v-model.number="settings.daemon.poll_interval_ms"
+              type="number"
+              class="form-input"
+              min="100"
+              max="10000"
+              step="100"
+            />
+            <span class="form-hint">How often to check for League Client (milliseconds)</span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Save Timeline</label>
+            <label class="toggle">
+              <input v-model="settings.daemon.save_timeline" type="checkbox" />
+              <span class="toggle-slider"></span>
+            </label>
+            <span class="form-hint">Keep event timeline data after recording ends</span>
+          </div>
+        </section>
+
+        <section class="settings-section">
+          <h3>Advanced</h3>
+          <div class="form-group">
+            <label class="form-label">Log Level</label>
+            <select v-model="settings.daemon.log_level" class="form-select">
+              <option v-for="level in LOG_LEVELS" :key="level" :value="level">
+                {{ level.charAt(0).toUpperCase() + level.slice(1) }}
+              </option>
+            </select>
+            <span class="form-hint">Increase to "debug" or "trace" for troubleshooting</span>
+          </div>
+          <div class="form-group">
+            <label class="form-label">IPC Socket Path</label>
+            <input
+              v-model="settings.daemon.socket_path"
+              type="text"
+              class="form-input"
+              placeholder="Default: \\.\pipe\record-daemon (Windows)"
+            />
+            <span class="form-hint">Custom IPC socket path. Leave empty for default.</span>
+          </div>
+        </section>
+
+        <section class="settings-section danger-zone">
+          <h3>Danger Zone</h3>
+          <div class="danger-actions">
+            <button class="btn btn-danger" @click="shutdownDaemon">
+              Shutdown Daemon
+            </button>
+            <button class="btn btn-secondary" @click="resetSettings">
+              Reset All Settings
+            </button>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.settings {
+  min-height: 100vh;
+  background: #0a0a13;
+  color: #e2e8f0;
+}
+
+/* Header */
+.settings-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.back-btn:hover {
+  color: #e2e8f0;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.settings-title {
+  flex: 1;
+  font-size: 20px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.08);
+  color: #e2e8f0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.btn-accent {
+  background: #10b981;
+  color: white;
+}
+
+.btn-accent:hover:not(:disabled) {
+  background: #059669;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+.btn-ghost {
+  background: transparent;
+  color: #94a3b8;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  color: #e2e8f0;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.btn-small {
+  padding: 5px 12px;
+  font-size: 12px;
+}
+
+/* Error banner */
+.error-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: rgba(239, 68, 68, 0.15);
+  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
+  color: #fca5a5;
+  font-size: 13px;
+}
+
+.error-close {
+  background: none;
+  border: none;
+  color: #fca5a5;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+/* Daemon offline */
+.daemon-offline {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px;
+  text-align: center;
+}
+
+.offline-icon {
+  color: #64748b;
+  margin-bottom: 16px;
+}
+
+.daemon-offline h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 8px;
+}
+
+.daemon-offline p {
+  color: #94a3b8;
+  font-size: 14px;
+  margin: 0 0 24px;
+  max-width: 400px;
+}
+
+/* Loading */
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px;
+  color: #94a3b8;
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Status bar */
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-details {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+}
+
+.status-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.status-tag.connected {
+  background: rgba(16, 185, 129, 0.15);
+  color: #6ee7b7;
+}
+
+.status-tag.disconnected {
+  background: rgba(107, 114, 128, 0.15);
+  color: #9ca3af;
+}
+
+.status-tag.recording {
+  background: rgba(239, 68, 68, 0.15);
+  color: #fca5a5;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.status-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Tab navigation */
+.tab-nav {
+  display: flex;
+  gap: 0;
+  padding: 0 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.01);
+}
+
+.tab-btn {
+  padding: 12px 20px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: #94a3b8;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.tab-btn:hover {
+  color: #e2e8f0;
+}
+
+.tab-btn.active {
+  color: #3b82f6;
+  border-bottom-color: #3b82f6;
+}
+
+/* Tab content */
+.tab-content {
+  padding: 24px;
+  max-width: 720px;
+}
+
+/* Settings section */
+.settings-section {
+  margin-bottom: 32px;
+}
+
+.settings-section h3 {
+  font-size: 15px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Form elements */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.form-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #cbd5e1;
+}
+
+.form-input {
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: #e2e8f0;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.form-input:focus {
+  border-color: #3b82f6;
+}
+
+.form-input::placeholder {
+  color: #64748b;
+}
+
+.form-select {
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: #e2e8f0;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 30px;
+}
+
+.form-select:focus {
+  border-color: #3b82f6;
+}
+
+.form-select option {
+  background: #1e1e2e;
+  color: #e2e8f0;
+}
+
+.form-hint {
+  font-size: 12px;
+  color: #64748b;
+}
+
+/* Toggle switch */
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  transition: all 0.2s;
+}
+
+.toggle-slider::before {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  bottom: 3px;
+  background: #94a3b8;
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+
+.toggle input:checked + .toggle-slider {
+  background: #3b82f6;
+}
+
+.toggle input:checked + .toggle-slider::before {
+  transform: translateX(20px);
+  background: white;
+}
+
+/* Quality grid */
+.quality-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.quality-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.quality-card:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.quality-card.selected {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: #3b82f6;
+}
+
+.quality-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #e2e8f0;
+}
+
+.quality-desc {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+/* Danger zone */
+.danger-zone {
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 8px;
+  padding: 16px;
+  background: rgba(239, 68, 68, 0.03);
+}
+
+.danger-zone h3 {
+  color: #fca5a5;
+  border-bottom-color: rgba(239, 68, 68, 0.2);
+}
+
+.danger-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .settings-header {
+    flex-wrap: wrap;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .quality-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .status-bar {
+    flex-wrap: wrap;
+  }
+
+  .status-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/tauri-app/src/types/daemon.ts b/tauri-app/src/types/daemon.ts
new file mode 100644
index 0000000..eaae8de
--- /dev/null
+++ b/tauri-app/src/types/daemon.ts
@@ -0,0 +1,148 @@
+/**
+ * TypeScript types for daemon settings and status.
+ * Mirrors the Rust types from record-daemon/src/config/ and record-daemon/src/ipc/protocol.rs.
+ */
+
+// ---------------------------------------------------------------------------
+// Encoder presets
+// ---------------------------------------------------------------------------
+
+export interface NvencPreset {
+  type: "nvenc";
+  bitrate: number;
+  cq_level: number;
+  two_pass: boolean;
+}
+
+export interface AmfPreset {
+  type: "amf";
+  bitrate: number;
+  quality: "speed" | "balanced" | "quality";
+}
+
+export interface X264Preset {
+  type: "x264";
+  preset: string;
+  bitrate: number;
+  crf: number | null;
+}
+
+export type EncoderPreset = NvencPreset | AmfPreset | X264Preset;
+
+// ---------------------------------------------------------------------------
+// Quality level
+// ---------------------------------------------------------------------------
+
+export type QualityLevel = "low" | "medium" | "high" | "ultra";
+
+// ---------------------------------------------------------------------------
+// Settings structures
+// ---------------------------------------------------------------------------
+
+export interface VideoSettings {
+  encoder_preset: EncoderPreset;
+  quality: QualityLevel;
+  frame_rate: number;
+  hardware_acceleration: boolean;
+}
+
+export interface OutputSettings {
+  path: string;
+  naming_pattern: string;
+  container: string;
+  split_size_mb: number;
+  split_time_minutes: number;
+}
+
+export interface AudioSettings {
+  enabled: boolean;
+  bitrate: number;
+  sample_rate: number;
+  channels: number;
+  capture_game: boolean;
+  capture_mic: boolean;
+  mic_device: string | null;
+}
+
+export interface DaemonSettings {
+  auto_record: boolean;
+  monitor_client: boolean;
+  poll_interval_ms: number;
+  socket_path: string | null;
+  log_level: string;
+  save_timeline: boolean;
+}
+
+export interface Settings {
+  video: VideoSettings;
+  output: OutputSettings;
+  audio: AudioSettings;
+  daemon: DaemonSettings;
+}
+
+/** Response wrapper from daemon_get_settings (daemon wraps in { settings: {...} }). */
+export interface GetSettingsResponse {
+  settings: Settings;
+}
+
+// ---------------------------------------------------------------------------
+// Daemon status
+// ---------------------------------------------------------------------------
+
+export type DaemonStatus = "idle" | "monitoring" | "recording" | "error" | "shutting_down";
+
+export interface DaemonStatusResponse {
+  status: DaemonStatus;
+  is_recording: boolean;
+  current_game_id: number | null;
+  client_connected: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Encoder info
+// ---------------------------------------------------------------------------
+
+export interface EncoderInfo {
+  id: string;
+  name: string;
+  is_hardware: boolean;
+  available: boolean;
+}
+
+export interface EncodersResponse {
+  available: EncoderInfo[];
+  current: string;
+}
+
+// ---------------------------------------------------------------------------
+// Quality level metadata
+// ---------------------------------------------------------------------------
+
+export const QUALITY_LEVELS: { value: QualityLevel; label: string; description: string }[] = [
+  { value: "low", label: "Low", description: "720p @ 30fps" },
+  { value: "medium", label: "Medium", description: "1080p @ 30fps" },
+  { value: "high", label: "High", description: "1080p @ 60fps" },
+  { value: "ultra", label: "Ultra", description: "1440p @ 60fps" },
+];
+
+export const CONTAINER_FORMATS = ["mp4", "mkv", "mov", "flv"] as const;
+
+export const LOG_LEVELS = ["trace", "debug", "info", "warn", "error"] as const;
+
+export const X264_PRESETS = [
+  "ultrafast",
+  "superfast",
+  "veryfast",
+  "faster",
+  "fast",
+  "medium",
+  "slow",
+  "slower",
+  "veryslow",
+] as const;
+
+export const AMF_QUALITIES: { value: "speed" | "balanced" | "quality"; label: string }[] = [
+  { value: "speed", label: "Speed" },
+  { value: "balanced", label: "Balanced" },
+  { value: "quality", label: "Quality" },
+];