refactor: reduce table re-renders

package.json

@@ -2,7 +2,7 @@
   "name": "donutbrowser",
   "private": true,
   "license": "AGPL-3.0",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
@@ -46,9 +46,12 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "color": "^5.0.0",
+    "lucide-react": "^0.539.0",
     "motion": "^12.23.12",
     "next": "^15.4.6",
     "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
@@ -60,6 +63,7 @@
     "@biomejs/biome": "2.1.4",
     "@tailwindcss/postcss": "^4.1.11",
     "@tauri-apps/cli": "^2.7.1",
+    "@types/color": "^4.2.0",
     "@types/node": "^24.2.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",

src-tauri/Cargo.lock

@@ -1021,7 +1021,7 @@ dependencies = [
 
 [[package]]
 name = "donutbrowser"
-version = "0.9.2"
+version = "0.9.4"
 dependencies = [
  "async-trait",
  "base64 0.22.1",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "donutbrowser"
-version = "0.9.2"
+version = "0.9.4"
 description = "Simple Yet Powerful Anti-Detect Browser"
 authors = ["zhom@github"]
 edition = "2021"

src-tauri/src/auto_updater.rs

@@ -520,6 +520,7 @@ mod tests {
       release_type: "stable".to_string(),
       camoufox_config: None,
       group_id: None,
+      tags: Vec::new(),
     }
   }
 

src-tauri/src/browser_runner.rs

@@ -140,12 +140,23 @@ impl BrowserRunner {
 
   pub fn save_profile(&self, profile: &BrowserProfile) -> Result<(), Box<dyn std::error::Error>> {
     let profile_manager = ProfileManager::instance();
-    profile_manager.save_profile(profile)
+    let result = profile_manager.save_profile(profile);
+    // Update tag suggestions after any save
+    let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+    });
+    result
   }
 
   pub fn list_profiles(&self) -> Result<Vec<BrowserProfile>, Box<dyn std::error::Error>> {
     let profile_manager = ProfileManager::instance();
-    profile_manager.list_profiles()
+    let profiles = profile_manager.list_profiles();
+    if let Ok(ref ps) = profiles {
+      let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+        let _ = tm.rebuild_from_profiles(ps);
+      });
+    }
+    profiles
   }
 
   pub async fn launch_browser(
@@ -251,6 +262,10 @@ impl BrowserRunner {
 
       // Save the updated profile
       self.save_process_info(&updated_profile)?;
+      // Ensure tag suggestions include any tags from this profile
+      let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+        let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+      });
       println!(
         "Updated profile with process info: {}",
         updated_profile.name
@@ -450,6 +465,9 @@ impl BrowserRunner {
     updated_profile.last_launch = Some(SystemTime::now().duration_since(UNIX_EPOCH)?.as_secs());
 
     self.save_process_info(&updated_profile)?;
+    let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+    });
 
     // Apply proxy settings if needed (for Firefox-based browsers)
     if profile.proxy_id.is_some()
@@ -815,6 +833,11 @@ impl BrowserRunner {
       println!("Warning: Failed to cleanup unused binaries: {e}");
     }
 
+    // Rebuild tags after deletion
+    let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+    });
+
     Ok(())
   }
 
@@ -1442,6 +1465,11 @@ impl BrowserRunner {
 
     files_exist
   }
+
+  pub fn get_all_tags(&self) -> Result<Vec<String>, Box<dyn std::error::Error>> {
+    let tag_manager = crate::tag_manager::TAG_MANAGER.lock().unwrap();
+    tag_manager.get_all_tags()
+  }
 }
 
 #[allow(clippy::too_many_arguments)]
@@ -1603,6 +1631,17 @@ pub async fn update_profile_proxy(
     .map_err(|e| format!("Failed to update profile: {e}"))
 }
 
+#[tauri::command]
+pub fn update_profile_tags(
+  profile_name: String,
+  tags: Vec<String>,
+) -> Result<BrowserProfile, String> {
+  let profile_manager = ProfileManager::instance();
+  profile_manager
+    .update_profile_tags(&profile_name, tags)
+    .map_err(|e| format!("Failed to update profile tags: {e}"))
+}
+
 #[tauri::command]
 pub async fn check_browser_status(
   app_handle: tauri::AppHandle,
@@ -1738,6 +1777,14 @@ pub fn is_browser_downloaded(browser_str: String, version: String) -> bool {
   browser_runner.is_browser_downloaded(&browser_str, &version)
 }
 
+#[tauri::command]
+pub fn get_all_tags() -> Result<Vec<String>, String> {
+  let browser_runner = BrowserRunner::instance();
+  browser_runner
+    .get_all_tags()
+    .map_err(|e| format!("Failed to get tags: {e}"))
+}
+
 #[tauri::command]
 pub fn check_browser_exists(browser_str: String, version: String) -> bool {
   // This is an alias for is_browser_downloaded to provide clearer semantics for auto-updates

src-tauri/src/group_manager.rs

@@ -400,6 +400,7 @@ mod tests {
         release_type: "stable".to_string(),
         camoufox_config: None,
         group_id: Some(group1.id.clone()),
+        tags: Vec::new(),
       },
       crate::profile::BrowserProfile {
         id: uuid::Uuid::new_v4(),
@@ -412,6 +413,7 @@ mod tests {
         release_type: "stable".to_string(),
         camoufox_config: None,
         group_id: Some(group1.id.clone()),
+        tags: Vec::new(),
       },
       crate::profile::BrowserProfile {
         id: uuid::Uuid::new_v4(),
@@ -424,6 +426,7 @@ mod tests {
         release_type: "stable".to_string(),
         camoufox_config: None,
         group_id: None, // Default group
+        tags: Vec::new(),
       },
     ];
 

src-tauri/src/lib.rs

@@ -26,6 +26,7 @@ mod profile_importer;
 mod proxy_manager;
 mod settings_manager;
 // mod theme_detector; // removed: theme detection handled in webview via CSS prefers-color-scheme
+mod tag_manager;
 mod version_updater;
 
 extern crate lazy_static;
@@ -34,10 +35,10 @@ use browser_runner::{
   check_browser_exists, check_browser_status, check_missing_binaries, check_missing_geoip_database,
   create_browser_profile_new, delete_profile, download_browser, ensure_all_binaries_exist,
   fetch_browser_versions_cached_first, fetch_browser_versions_with_count,
-  fetch_browser_versions_with_count_cached_first, get_downloaded_browser_versions,
+  fetch_browser_versions_with_count_cached_first, get_all_tags, get_downloaded_browser_versions,
   get_supported_browsers, is_browser_supported_on_platform, kill_browser_profile,
   launch_browser_profile, list_browser_profiles, rename_profile, update_camoufox_config,
-  update_profile_proxy,
+  update_profile_proxy, update_profile_tags,
 };
 
 use settings_manager::{
@@ -62,8 +63,6 @@ use app_auto_updater::{
 
 use profile_importer::{detect_existing_profiles, import_browser_profile};
 
-// use theme_detector::get_system_theme;
-
 use group_manager::{
   assign_profiles_to_group, create_profile_group, delete_profile_group, delete_selected_profiles,
   get_groups_with_profile_counts, get_profile_groups, update_profile_group,
@@ -506,8 +505,10 @@ pub fn run() {
       fetch_browser_versions_cached_first,
       fetch_browser_versions_with_count_cached_first,
       get_downloaded_browser_versions,
+      get_all_tags,
       get_browser_release_types,
       update_profile_proxy,
+      update_profile_tags,
       check_browser_status,
       kill_browser_profile,
       rename_profile,

src-tauri/src/profile/manager.rs

@@ -151,6 +151,7 @@ impl ProfileManager {
           release_type: release_type.to_string(),
           camoufox_config: None,
           group_id: group_id.clone(),
+          tags: Vec::new(),
         };
 
         match camoufox_launcher
@@ -191,6 +192,7 @@ impl ProfileManager {
       release_type: release_type.to_string(),
       camoufox_config: final_camoufox_config,
       group_id: group_id.clone(),
+      tags: Vec::new(),
     };
 
     // Save profile info
@@ -284,6 +286,11 @@ impl ProfileManager {
     // Save profile with new name
     self.save_profile(&profile)?;
 
+    // Keep tag suggestions up to date after name change (rebuild from all profiles)
+    let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+    });
+
     Ok(profile)
   }
 
@@ -321,6 +328,11 @@ impl ProfileManager {
 
     println!("Profile '{profile_name}' deleted successfully");
 
+    // Rebuild tag suggestions after deletion
+    let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+    });
+
     Ok(())
   }
 
@@ -395,9 +407,46 @@ impl ProfileManager {
       self.save_profile(&profile)?;
     }
 
+    // Rebuild tag suggestions after group changes just in case
+    let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+    });
+
     Ok(())
   }
 
+  pub fn update_profile_tags(
+    &self,
+    profile_name: &str,
+    tags: Vec<String>,
+  ) -> Result<BrowserProfile, Box<dyn std::error::Error>> {
+    // Find the profile by name
+    let profiles = self.list_profiles()?;
+    let mut profile = profiles
+      .into_iter()
+      .find(|p| p.name == profile_name)
+      .ok_or_else(|| format!("Profile {profile_name} not found"))?;
+
+    let mut seen = std::collections::HashSet::new();
+    let mut deduped: Vec<String> = Vec::with_capacity(tags.len());
+    for t in tags.into_iter() {
+      if seen.insert(t.clone()) {
+        deduped.push(t);
+      }
+    }
+    profile.tags = deduped;
+
+    // Save profile
+    self.save_profile(&profile)?;
+
+    // Update global tag suggestions from all profiles
+    let _ = crate::tag_manager::TAG_MANAGER.lock().map(|tm| {
+      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
+    });
+
+    Ok(profile)
+  }
+
   pub fn delete_multiple_profiles(
     &self,
     profile_names: Vec<String>,
@@ -497,19 +546,6 @@ impl ProfileManager {
         format!("Profile {profile_name} not found").into()
       })?;
 
-    // Check if browser is running to manage proxy accordingly
-    let browser_is_running = profile.process_id.is_some()
-      && self
-        .check_browser_status(app_handle.clone(), &profile)
-        .await?;
-
-    // If browser is running, stop existing proxy
-    if browser_is_running && profile.proxy_id.is_some() {
-      if let Some(pid) = profile.process_id {
-        let _ = PROXY_MANAGER.stop_proxy(app_handle.clone(), pid).await;
-      }
-    }
-
     // Update proxy settings
     profile.proxy_id = proxy_id.clone();
 
@@ -520,68 +556,16 @@ impl ProfileManager {
         format!("Failed to save profile: {e}").into()
       })?;
 
-    // Handle proxy startup/configuration
+    // Update on-disk browser profile config immediately
     if let Some(proxy_id_ref) = &proxy_id {
       if let Some(proxy_settings) = PROXY_MANAGER.get_proxy_settings_by_id(proxy_id_ref) {
-        if browser_is_running {
-          // Browser is running and proxy is enabled, start new proxy
-          if let Some(pid) = profile.process_id {
-            match PROXY_MANAGER
-              .start_proxy(
-                app_handle.clone(),
-                Some(&proxy_settings),
-                pid,
-                Some(profile_name),
-              )
-              .await
-            {
-              Ok(internal_proxy_settings) => {
-                let profiles_dir = self.get_profiles_dir();
-                let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
-
-                // Apply the proxy settings with the internal proxy to the profile directory
-                self
-                  .apply_proxy_settings_to_profile(
-                    &profile_path,
-                    &proxy_settings,
-                    Some(&internal_proxy_settings),
-                  )
-                  .map_err(|e| format!("Failed to update profile proxy: {e}"))?;
-
-                println!("Successfully started proxy for profile: {}", profile.name);
-              }
-              Err(e) => {
-                eprintln!("Failed to start proxy: {e}");
-                // Apply proxy settings without internal proxy
-                let profiles_dir = self.get_profiles_dir();
-                let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
-                self
-                  .apply_proxy_settings_to_profile(&profile_path, &proxy_settings, None)
-                  .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
-                    format!("Failed to apply proxy settings: {e}").into()
-                  })?;
-              }
-            }
-          } else {
-            // No PID available, apply proxy settings without internal proxy
-            let profiles_dir = self.get_profiles_dir();
-            let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
-            self
-              .apply_proxy_settings_to_profile(&profile_path, &proxy_settings, None)
-              .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
-                format!("Failed to apply proxy settings: {e}").into()
-              })?;
-          }
-        } else {
-          // Proxy disabled or browser not running, just apply settings
-          let profiles_dir = self.get_profiles_dir();
-          let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
-          self
-            .apply_proxy_settings_to_profile(&profile_path, &proxy_settings, None)
-            .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
-              format!("Failed to apply proxy settings: {e}").into()
-            })?;
-        }
+        let profiles_dir = self.get_profiles_dir();
+        let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
+        self
+          .apply_proxy_settings_to_profile(&profile_path, &proxy_settings, None)
+          .map_err(|e| -> Box<dyn std::error::Error + Send + Sync> {
+            format!("Failed to apply proxy settings: {e}").into()
+          })?;
       } else {
         // Proxy ID provided but proxy not found, disable proxy
         let profiles_dir = self.get_profiles_dir();
@@ -624,7 +608,7 @@ impl ProfileManager {
     }
 
     // For non-camoufox browsers, use the existing PID-based logic
-    let mut inner_profile = profile.clone();
+    let inner_profile = profile.clone();
     let system = System::new_all();
     let mut is_running = false;
     let mut found_pid: Option<u32> = None;
@@ -748,24 +732,42 @@ impl ProfileManager {
     let metadata_exists = metadata_file.exists();
 
     if metadata_exists {
-      // Update the process ID if we found a different one
+      // Load the latest profile from disk to avoid overwriting fields like proxy_id
+      let latest_profile: BrowserProfile = match std::fs::read_to_string(&metadata_file)
+        .ok()
+        .and_then(|s| serde_json::from_str(&s).ok())
+      {
+        Some(p) => p,
+        None => inner_profile.clone(),
+      };
+
+      let previous_pid = latest_profile.process_id;
+      let mut merged = latest_profile.clone();
+
       if let Some(pid) = found_pid {
-        if inner_profile.process_id != Some(pid) {
-          inner_profile.process_id = Some(pid);
-          if let Err(e) = self.save_profile(&inner_profile) {
+        if merged.process_id != Some(pid) {
+          merged.process_id = Some(pid);
+          if let Err(e) = self.save_profile(&merged) {
             println!("Warning: Failed to update profile with new PID: {e}");
           }
         }
-      } else if inner_profile.process_id.is_some() {
+      } else if merged.process_id.is_some() {
         // Clear the PID if no process found
-        inner_profile.process_id = None;
-        if let Err(e) = self.save_profile(&inner_profile) {
+        merged.process_id = None;
+        if let Err(e) = self.save_profile(&merged) {
           println!("Warning: Failed to clear profile PID: {e}");
         }
+
+        // Stop any associated proxy immediately when the browser stops
+        if let Some(old_pid) = previous_pid {
+          let _ = crate::proxy_manager::PROXY_MANAGER
+            .stop_proxy(app_handle.clone(), old_pid)
+            .await;
+        }
       }
 
       // Emit profile update event to frontend
-      if let Err(e) = app_handle.emit("profile-updated", &inner_profile) {
+      if let Err(e) = app_handle.emit("profile-updated", &merged) {
         println!("Warning: Failed to emit profile update event: {e}");
       }
     }
@@ -790,49 +792,71 @@ impl ProfileManager {
     match launcher.find_camoufox_by_profile(&profile_path_str).await {
       Ok(Some(camoufox_process)) => {
         // Found a running instance, update profile with process info if changed
-        let process_id_changed = profile.process_id != camoufox_process.processId;
-        // Only write status changes if metadata still exists
         let profiles_dir = self.get_profiles_dir();
         let profile_uuid_dir = profiles_dir.join(profile.id.to_string());
         let metadata_file = profile_uuid_dir.join("metadata.json");
         let metadata_exists = metadata_file.exists();
 
-        if process_id_changed && metadata_exists {
-          let mut updated_profile = profile.clone();
-          updated_profile.process_id = camoufox_process.processId;
-          if let Err(e) = self.save_profile(&updated_profile) {
-            println!("Warning: Failed to update Camoufox profile with process info: {e}");
-          }
+        if metadata_exists {
+          // Load latest to avoid overwriting other fields
+          let mut latest: BrowserProfile = match std::fs::read_to_string(&metadata_file)
+            .ok()
+            .and_then(|s| serde_json::from_str(&s).ok())
+          {
+            Some(p) => p,
+            None => profile.clone(),
+          };
 
-          // Emit profile update event to frontend
-          if let Err(e) = app_handle.emit("profile-updated", &updated_profile) {
-            println!("Warning: Failed to emit profile update event: {e}");
-          }
+          if latest.process_id != camoufox_process.processId {
+            latest.process_id = camoufox_process.processId;
+            if let Err(e) = self.save_profile(&latest) {
+              println!("Warning: Failed to update Camoufox profile with process info: {e}");
+            }
 
-          println!(
-            "Camoufox process has started for profile '{}' with PID: {:?}",
-            profile.name, camoufox_process.processId
-          );
+            // Emit profile update event to frontend
+            if let Err(e) = app_handle.emit("profile-updated", &latest) {
+              println!("Warning: Failed to emit profile update event: {e}");
+            }
+
+            println!(
+              "Camoufox process has started for profile '{}' with PID: {:?}",
+              profile.name, camoufox_process.processId
+            );
+          }
         }
         Ok(true)
       }
       Ok(None) => {
-        // No running instance found, clear process ID if set
+        // No running instance found, clear process ID if set and stop proxy
         let profiles_dir = self.get_profiles_dir();
         let profile_uuid_dir = profiles_dir.join(profile.id.to_string());
         let metadata_file = profile_uuid_dir.join("metadata.json");
         let metadata_exists = metadata_file.exists();
 
-        if profile.process_id.is_some() && metadata_exists {
-          let mut updated_profile = profile.clone();
-          updated_profile.process_id = None;
-          if let Err(e) = self.save_profile(&updated_profile) {
-            println!("Warning: Failed to clear Camoufox profile process info: {e}");
-          }
+        if metadata_exists {
+          let mut latest: BrowserProfile = match std::fs::read_to_string(&metadata_file)
+            .ok()
+            .and_then(|s| serde_json::from_str(&s).ok())
+          {
+            Some(p) => p,
+            None => profile.clone(),
+          };
 
-          // Emit profile update event to frontend
-          if let Err(e) = app_handle.emit("profile-updated", &updated_profile) {
-            println!("Warning: Failed to emit profile update event: {e}");
+          if let Some(old_pid) = latest.process_id {
+            latest.process_id = None;
+            if let Err(e) = self.save_profile(&latest) {
+              println!("Warning: Failed to clear Camoufox profile process info: {e}");
+            }
+
+            // Stop any proxy tied to this old PID immediately
+            let _ = crate::proxy_manager::PROXY_MANAGER
+              .stop_proxy(app_handle.clone(), old_pid)
+              .await;
+
+            // Emit profile update event to frontend
+            if let Err(e) = app_handle.emit("profile-updated", &latest) {
+              println!("Warning: Failed to emit profile update event: {e}");
+            }
           }
         }
         Ok(false)
@@ -845,16 +869,30 @@ impl ProfileManager {
         let metadata_file = profile_uuid_dir.join("metadata.json");
         let metadata_exists = metadata_file.exists();
 
-        if profile.process_id.is_some() && metadata_exists {
-          let mut updated_profile = profile.clone();
-          updated_profile.process_id = None;
-          if let Err(e) = self.save_profile(&updated_profile) {
-            println!("Warning: Failed to clear Camoufox profile process info after error: {e}");
-          }
+        if metadata_exists {
+          let mut latest: BrowserProfile = match std::fs::read_to_string(&metadata_file)
+            .ok()
+            .and_then(|s| serde_json::from_str(&s).ok())
+          {
+            Some(p) => p,
+            None => profile.clone(),
+          };
 
-          // Emit profile update event to frontend
-          if let Err(e) = app_handle.emit("profile-updated", &updated_profile) {
-            println!("Warning: Failed to emit profile update event: {e}");
+          if let Some(old_pid) = latest.process_id {
+            latest.process_id = None;
+            if let Err(e2) = self.save_profile(&latest) {
+              println!("Warning: Failed to clear Camoufox profile process info after error: {e2}");
+            }
+
+            // Best-effort stop of proxy tied to old PID
+            let _ = crate::proxy_manager::PROXY_MANAGER
+              .stop_proxy(app_handle.clone(), old_pid)
+              .await;
+
+            // Emit profile update event to frontend
+            if let Err(e3) = app_handle.emit("profile-updated", &latest) {
+              println!("Warning: Failed to emit profile update event: {e3}");
+            }
           }
         }
         Ok(false)

src-tauri/src/profile/types.rs

@@ -20,6 +20,8 @@ pub struct BrowserProfile {
   pub camoufox_config: Option<CamoufoxConfig>, // Camoufox configuration
   #[serde(default)]
   pub group_id: Option<String>, // Reference to profile group
+  #[serde(default)]
+  pub tags: Vec<String>, // Free-form tags
 }
 
 pub fn default_release_type() -> String {

src-tauri/src/profile_importer.rs

@@ -555,6 +555,7 @@ impl ProfileImporter {
       release_type: "stable".to_string(),
       camoufox_config: None,
       group_id: None,
+      tags: Vec::new(),
     };
 
     // Save the profile metadata

src-tauri/src/proxy_manager.rs

@@ -350,29 +350,6 @@ impl ProxyManager {
       let _ = self.stop_proxy(app_handle.clone(), browser_pid).await;
     }
 
-    // Check if we have a preferred port for this profile
-    let preferred_port = if let Some(name) = profile_name {
-      let profile_proxies = self.profile_proxies.lock().unwrap();
-      profile_proxies.get(name).and_then(|_settings| {
-        // Find existing proxy with same settings to reuse port
-        let active_proxies = self.active_proxies.lock().unwrap();
-        active_proxies
-          .values()
-          .find(|p| {
-            if let Some(proxy_settings) = proxy_settings {
-              p.upstream_host == proxy_settings.host
-                && p.upstream_port == proxy_settings.port
-                && p.upstream_type == proxy_settings.proxy_type
-            } else {
-              p.upstream_type == "DIRECT"
-            }
-          })
-          .map(|p| p.local_port)
-      })
-    } else {
-      None
-    };
-
     // Start a new proxy using the nodecar binary with the correct CLI interface
     let mut nodecar = app_handle
       .shell()
@@ -400,11 +377,6 @@ impl ProxyManager {
       }
     }
 
-    // If we have a preferred port, use it
-    if let Some(port) = preferred_port {
-      nodecar = nodecar.arg("--port").arg(port.to_string());
-    }
-
     // Execute the command and wait for it to complete
     // The nodecar binary should start the worker and then exit
     let output = nodecar
@@ -449,6 +421,30 @@ impl ProxyManager {
       profile_name: profile_name.map(|s| s.to_string()),
     };
 
+    // Wait for the local proxy port to be ready to accept connections
+    {
+      use tokio::net::TcpStream;
+      use tokio::time::{sleep, Duration};
+      let mut ready = false;
+      for _ in 0..50 {
+        match TcpStream::connect((std::net::Ipv4Addr::LOCALHOST, proxy_info.local_port)).await {
+          Ok(_stream) => {
+            ready = true;
+            break;
+          }
+          Err(_) => {
+            sleep(Duration::from_millis(100)).await;
+          }
+        }
+      }
+      if !ready {
+        return Err(format!(
+          "Local proxy on 127.0.0.1:{} did not become ready in time",
+          proxy_info.local_port
+        ));
+      }
+    }
+
     // Store the proxy info
     {
       let mut proxies = self.active_proxies.lock().unwrap();

src-tauri/src/settings_manager.rs

@@ -27,6 +27,8 @@ pub struct AppSettings {
   pub set_as_default_browser: bool,
   #[serde(default = "default_theme")]
   pub theme: String, // "light", "dark", or "system"
+  #[serde(default)]
+  pub custom_theme: Option<std::collections::HashMap<String, String>>, // CSS var name -> value (e.g., "--background": "#1a1b26")
 }
 
 fn default_theme() -> String {
@@ -38,6 +40,7 @@ impl Default for AppSettings {
     Self {
       set_as_default_browser: false,
       theme: "system".to_string(),
+      custom_theme: None,
     }
   }
 }
@@ -321,6 +324,7 @@ mod tests {
     let test_settings = AppSettings {
       set_as_default_browser: true,
       theme: "dark".to_string(),
+      custom_theme: None,
     };
 
     // Save settings

src-tauri/src/tag_manager.rs

@@ -0,0 +1,105 @@
+use crate::profile::BrowserProfile;
+use directories::BaseDirs;
+use serde::{Deserialize, Serialize};
+use std::collections::BTreeSet;
+use std::fs;
+use std::path::{Path, PathBuf};
+
+#[derive(Debug, Serialize, Deserialize, Default, Clone)]
+struct TagsData {
+  tags: Vec<String>,
+}
+
+pub struct TagManager {
+  base_dirs: BaseDirs,
+  data_dir_override: Option<PathBuf>,
+}
+
+impl TagManager {
+  pub fn new() -> Self {
+    Self {
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+      data_dir_override: std::env::var("DONUTBROWSER_DATA_DIR")
+        .ok()
+        .map(PathBuf::from),
+    }
+  }
+
+  #[allow(dead_code)]
+  pub fn with_data_dir_override(dir: &Path) -> Self {
+    Self {
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+      data_dir_override: Some(dir.to_path_buf()),
+    }
+  }
+
+  fn get_tags_file_path(&self) -> PathBuf {
+    if let Some(dir) = &self.data_dir_override {
+      let mut override_path = dir.clone();
+      let _ = fs::create_dir_all(&override_path);
+      override_path.push("tags.json");
+      return override_path;
+    }
+
+    let mut path = self.base_dirs.data_local_dir().to_path_buf();
+    path.push(if cfg!(debug_assertions) {
+      "DonutBrowserDev"
+    } else {
+      "DonutBrowser"
+    });
+    path.push("data");
+    path.push("tags.json");
+    path
+  }
+
+  fn load_tags_data(&self) -> Result<TagsData, Box<dyn std::error::Error>> {
+    let file_path = self.get_tags_file_path();
+    if !file_path.exists() {
+      return Ok(TagsData::default());
+    }
+    let content = fs::read_to_string(file_path)?;
+    let data: TagsData = serde_json::from_str(&content)?;
+    Ok(data)
+  }
+
+  fn save_tags_data(&self, data: &TagsData) -> Result<(), Box<dyn std::error::Error>> {
+    let file_path = self.get_tags_file_path();
+    if let Some(parent) = file_path.parent() {
+      fs::create_dir_all(parent)?;
+    }
+    let json = serde_json::to_string_pretty(data)?;
+    fs::write(file_path, json)?;
+    Ok(())
+  }
+
+  pub fn get_all_tags(&self) -> Result<Vec<String>, Box<dyn std::error::Error>> {
+    let mut all = self.load_tags_data()?.tags;
+    // Ensure deterministic order
+    all.sort();
+    all.dedup();
+    Ok(all)
+  }
+
+  pub fn rebuild_from_profiles(
+    &self,
+    profiles: &[BrowserProfile],
+  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
+    // Build a set of all tags currently used by any profile
+    let mut set: BTreeSet<String> = BTreeSet::new();
+    for profile in profiles {
+      for tag in &profile.tags {
+        // Store exactly as provided (no normalization) to preserve characters
+        set.insert(tag.clone());
+      }
+    }
+    let combined: Vec<String> = set.into_iter().collect();
+    self.save_tags_data(&TagsData {
+      tags: combined.clone(),
+    })?;
+    Ok(combined)
+  }
+}
+
+lazy_static::lazy_static! {
+  pub static ref TAG_MANAGER: std::sync::Mutex<TagManager> = std::sync::Mutex::new(TagManager::new());
+}

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Donut Browser",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "identifier": "com.donutbrowser",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/app/layout.tsx

@@ -24,7 +24,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-hidden`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-hidden bg-background`}
       >
         <CustomThemeProvider>
           <WindowDragArea />

src/app/page.tsx

@@ -21,6 +21,7 @@ import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications"
 import type { PermissionType } from "@/hooks/use-permissions";
 import { usePermissions } from "@/hooks/use-permissions";
 import { useUpdateNotifications } from "@/hooks/use-update-notifications";
+import { useVersionUpdater } from "@/hooks/use-version-updater";
 import { showErrorToast, showToast } from "@/lib/toast-utils";
 import type { BrowserProfile, CamoufoxConfig, GroupWithCount } from "@/types";
 
@@ -40,6 +41,8 @@ interface PendingUrl {
 }
 
 export default function Home() {
+  // Mount global version update listener/toasts
+  useVersionUpdater();
   const [isInitializing, setIsInitializing] = useState(true);
   const [profiles, setProfiles] = useState<BrowserProfile[]>([]);
   const [error, setError] = useState<string | null>(null);

src/components/create-profile-dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
+import { emit } from "@tauri-apps/api/event";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GoPlus } from "react-icons/go";
 import { LoadingButton } from "@/components/loading-button";
@@ -107,7 +108,7 @@ export function CreateProfileDialog({
 
   const handleTabChange = (value: string) => {
     if (value === "regular") {
-      setSelectedBrowser(null);
+      setSelectedBrowser("firefox");
     } else if (value === "anti-detect") {
       setSelectedBrowser("camoufox");
     }
@@ -178,6 +179,8 @@ export function CreateProfileDialog({
           { browserStr: browser },
         );
 
+        await loadDownloadedVersions(browser);
+
         // Only update state if this browser is still the one we're loading
         if (loadingBrowserRef.current === browser) {
           // Filter to enforce stable-only creation, except Firefox Developer (nightly-only)
@@ -197,12 +200,29 @@ export function CreateProfileDialog({
               filtered.stable = rawReleaseTypes.stable;
             setReleaseTypes(filtered);
           }
-
-          // Load downloaded versions for this browser
-          await loadDownloadedVersions(browser);
         }
       } catch (error) {
         console.error(`Failed to load release types for ${browser}:`, error);
+
+        // Fallback: still load downloaded versions and derive release type from them if possible
+        try {
+          const downloaded = await loadDownloadedVersions(browser);
+          if (loadingBrowserRef.current === browser && downloaded.length > 0) {
+            const latest = downloaded[0];
+            const fallback: BrowserReleaseTypes = {};
+            if (browser === "firefox-developer") {
+              fallback.nightly = latest;
+            } else {
+              fallback.stable = latest;
+            }
+            setReleaseTypes(fallback);
+          }
+        } catch (e) {
+          console.error(
+            `Failed to load downloaded versions for ${browser}:`,
+            e,
+          );
+        }
       } finally {
         // Clear loading state only if we're still loading this browser
         if (loadingBrowserRef.current === browser) {
@@ -386,20 +406,6 @@ export function CreateProfileDialog({
     isBrowserVersionAvailable,
   ]);
 
-  useEffect(() => {
-    console.log(
-      selectedBrowser,
-      selectedBrowser && isBrowserCurrentlyDownloading(selectedBrowser),
-      selectedBrowser && isBrowserVersionAvailable(selectedBrowser),
-      selectedBrowser && getBestAvailableVersion(selectedBrowser),
-    );
-  }, [
-    selectedBrowser,
-    isBrowserCurrentlyDownloading,
-    isBrowserVersionAvailable,
-    getBestAvailableVersion,
-  ]);
-
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="w-full max-h-[90vh] flex flex-col">
@@ -634,6 +640,7 @@ export function CreateProfileDialog({
         onSave={(proxy) => {
           setStoredProxies((prev) => [...prev, proxy]);
           setSelectedProxyId(proxy.id);
+          void emit("stored-proxies-changed");
         }}
       />
     </Dialog>

src/components/custom-toast.tsx

@@ -168,7 +168,7 @@ export function UnifiedToast(props: ToastProps) {
   const progress = "progress" in props ? props.progress : undefined;
 
   return (
-    <div className="flex items-start p-4 w-full max-w-md rounded-lg border shadow-lg bg-card border-border text-card-foreground">
+    <div className="flex items-start p-3 w-96 rounded-lg border shadow-lg bg-card border-border text-card-foreground">
       <div className="mr-3 mt-0.5">{getToastIcon(type, stage)}</div>
       <div className="flex-1 min-w-0">
         <p className="text-sm font-semibold leading-tight text-foreground">

src/components/multiple-selector.tsx

@@ -445,6 +445,40 @@ const MultipleSelector = React.forwardRef<
                 setInputValue(value);
                 inputProps?.onValueChange?.(value);
               }}
+              onKeyDown={(e) => {
+                // Allow consumer to handle first
+                inputProps?.onKeyDown?.(
+                  e as unknown as React.KeyboardEvent<HTMLInputElement>,
+                );
+                if (e.defaultPrevented) return;
+                if (e.key === "Enter") {
+                  const value = inputValue.trim();
+                  if (value.length === 0) return;
+                  // If option already exists among available options, pick that; otherwise create
+                  const entries = Object.values(options).flat();
+                  const existing = entries.find(
+                    (o) => o.value === value && !o.disable,
+                  );
+                  // Prevent duplicates in the current selection
+                  if (
+                    selected.some((s) => s.value === (existing?.value ?? value))
+                  ) {
+                    e.preventDefault();
+                    setInputValue("");
+                    return;
+                  }
+                  if (selected.length >= maxSelected) {
+                    onMaxSelected?.(selected.length);
+                    return;
+                  }
+                  e.preventDefault();
+                  setInputValue("");
+                  const picked = existing ?? { value, label: value };
+                  const newOptions = [...selected, picked];
+                  setSelected(newOptions);
+                  onChange?.(newOptions);
+                }
+              }}
               onBlur={(event) => {
                 setOpen(false);
                 inputProps?.onBlur?.(event);

src/components/proxy-management-dialog.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
+import { emit, listen } from "@tauri-apps/api/event";
 import { useCallback, useEffect, useState } from "react";
 import { FiEdit2, FiPlus, FiTrash2, FiWifi } from "react-icons/fi";
 import { toast } from "sonner";
+import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
 import { ProxyFormDialog } from "@/components/proxy-form-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -38,6 +39,8 @@ export function ProxyManagementDialog({
   const [showProxyForm, setShowProxyForm] = useState(false);
   const [editingProxy, setEditingProxy] = useState<StoredProxy | null>(null);
   const [proxyUsage, setProxyUsage] = useState<Record<string, number>>({});
+  const [proxyToDelete, setProxyToDelete] = useState<StoredProxy | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const loadStoredProxies = useCallback(async () => {
     try {
@@ -91,22 +94,46 @@ export function ProxyManagementDialog({
     };
   }, [isOpen, loadProxyUsage]);
 
-  const handleDeleteProxy = useCallback(async (proxy: StoredProxy) => {
-    if (
-      !confirm(`Are you sure you want to delete the proxy "${proxy.name}"?`)
-    ) {
-      return;
-    }
+  // Keep list in sync with external changes (e.g., created from CreateProfileDialog)
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    const setup = async () => {
+      try {
+        unlisten = await listen("stored-proxies-changed", () => {
+          void loadStoredProxies();
+          void loadProxyUsage();
+        });
+      } catch (_err) {
+        // ignore non-critical errors
+      }
+    };
+    if (isOpen) void setup();
+    return () => {
+      if (unlisten) unlisten();
+    };
+  }, [isOpen, loadStoredProxies, loadProxyUsage]);
 
+  const handleDeleteProxy = useCallback((proxy: StoredProxy) => {
+    // Open in-app confirmation dialog
+    setProxyToDelete(proxy);
+  }, []);
+
+  const handleConfirmDelete = useCallback(async () => {
+    if (!proxyToDelete) return;
+    setIsDeleting(true);
     try {
-      await invoke("delete_stored_proxy", { proxyId: proxy.id });
-      setStoredProxies((prev) => prev.filter((p) => p.id !== proxy.id));
+      await invoke("delete_stored_proxy", { proxyId: proxyToDelete.id });
+      setStoredProxies((prev) => prev.filter((p) => p.id !== proxyToDelete.id));
       toast.success("Proxy deleted successfully");
+      await emit("stored-proxies-changed");
     } catch (error) {
       console.error("Failed to delete proxy:", error);
       toast.error("Failed to delete proxy");
+    } finally {
+      setIsDeleting(false);
+      setProxyToDelete(null);
     }
-  }, []);
+  }, [proxyToDelete]);
 
   const handleCreateProxy = useCallback(() => {
     setEditingProxy(null);
@@ -133,6 +160,7 @@ export function ProxyManagementDialog({
     });
     setShowProxyForm(false);
     setEditingProxy(null);
+    void emit("stored-proxies-changed");
   }, []);
 
   const handleProxyFormClose = useCallback(() => {
@@ -241,17 +269,28 @@ export function ProxyManagementDialog({
                         </Tooltip>
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleDeleteProxy(proxy)}
-                              className="text-destructive hover:text-destructive"
-                            >
-                              <FiTrash2 className="w-4 h-4" />
-                            </Button>
+                            <span>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleDeleteProxy(proxy)}
+                                className="text-destructive hover:text-destructive"
+                                disabled={(proxyUsage[proxy.id] ?? 0) > 0}
+                              >
+                                <FiTrash2 className="w-4 h-4" />
+                              </Button>
+                            </span>
                           </TooltipTrigger>
                           <TooltipContent>
-                            <p>Delete proxy</p>
+                            {(proxyUsage[proxy.id] ?? 0) > 0 ? (
+                              <p>
+                                Cannot delete: in use by {proxyUsage[proxy.id]}{" "}
+                                profile
+                                {proxyUsage[proxy.id] > 1 ? "s" : ""}
+                              </p>
+                            ) : (
+                              <p>Delete proxy</p>
+                            )}
                           </TooltipContent>
                         </Tooltip>
                       </div>
@@ -274,6 +313,15 @@ export function ProxyManagementDialog({
         onSave={handleProxySaved}
         editingProxy={editingProxy}
       />
+      <DeleteConfirmationDialog
+        isOpen={proxyToDelete !== null}
+        onClose={() => setProxyToDelete(null)}
+        onConfirm={handleConfirmDelete}
+        title="Delete Proxy"
+        description={`This action cannot be undone. This will permanently delete the proxy "${proxyToDelete?.name ?? ""}".`}
+        confirmButtonText="Delete"
+        isLoading={isDeleting}
+      />
     </>
   );
 }

src/components/settings-dialog.tsx

@@ -1,13 +1,21 @@
 "use client";
 
 import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
+import Color from "color";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useState } from "react";
 import { BsCamera, BsMic } from "react-icons/bs";
 import { LoadingButton } from "@/components/loading-button";
 import { Badge } from "@/components/ui/badge";
-
+import {
+  ColorPicker,
+  ColorPickerAlpha,
+  ColorPickerEyeDropper,
+  ColorPickerFormat,
+  ColorPickerHue,
+  ColorPickerOutput,
+  ColorPickerSelection,
+} from "@/components/ui/color-picker";
 import {
   Dialog,
   DialogContent,
@@ -16,6 +24,11 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -25,18 +38,13 @@ import {
 } from "@/components/ui/select";
 import type { PermissionType } from "@/hooks/use-permissions";
 import { usePermissions } from "@/hooks/use-permissions";
-import { getBrowserDisplayName } from "@/lib/browser-utils";
-import {
-  dismissToast,
-  showErrorToast,
-  showSuccessToast,
-  showUnifiedVersionUpdateToast,
-} from "@/lib/toast-utils";
+import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
 import { RippleButton } from "./ui/ripple";
 
 interface AppSettings {
   set_as_default_browser: boolean;
   theme: string;
+  custom_theme?: Record<string, string>;
 }
 
 interface PermissionInfo {
@@ -45,14 +53,7 @@ interface PermissionInfo {
   description: string;
 }
 
-interface VersionUpdateProgress {
-  current_browser: string;
-  total_browsers: number;
-  completed_browsers: number;
-  new_versions_found: number;
-  browser_new_versions: number;
-  status: string; // "updating", "completed", "error"
-}
+// Version update progress toasts are handled globally via useVersionUpdater
 
 interface SettingsDialogProps {
   isOpen: boolean;
@@ -63,10 +64,12 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const [settings, setSettings] = useState<AppSettings>({
     set_as_default_browser: false,
     theme: "system",
+    custom_theme: undefined,
   });
   const [originalSettings, setOriginalSettings] = useState<AppSettings>({
     set_as_default_browser: false,
     theme: "system",
+    custom_theme: undefined,
   });
   const [isDefaultBrowser, setIsDefaultBrowser] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -123,12 +126,60 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         return "Access to camera for browser applications";
     }
   }, []);
+  const TOKYO_NIGHT_DEFAULTS: Record<string, string> = {
+    "--background": "#1a1b26",
+    "--foreground": "#c0caf5",
+    "--card": "#24283b",
+    "--card-foreground": "#c0caf5",
+    "--popover": "#24283b",
+    "--popover-foreground": "#c0caf5",
+    "--primary": "#7aa2f7",
+    "--primary-foreground": "#1a1b26",
+    "--secondary": "#2ac3de",
+    "--secondary-foreground": "#1a1b26",
+    "--muted": "#3b4261",
+    "--muted-foreground": "#a9b1d6",
+    "--accent": "#bb9af7",
+    "--accent-foreground": "#1a1b26",
+    "--destructive": "#f7768e",
+    "--destructive-foreground": "#1a1b26",
+    "--border": "#3b4261",
+  };
+
+  const THEME_VARIABLES: Array<{ key: string; label: string }> = [
+    { key: "--background", label: "Background" },
+    { key: "--foreground", label: "Foreground" },
+    { key: "--card", label: "Card" },
+    { key: "--card-foreground", label: "Card FG" },
+    { key: "--popover", label: "Popover" },
+    { key: "--popover-foreground", label: "Popover FG" },
+    { key: "--primary", label: "Primary" },
+    { key: "--primary-foreground", label: "Primary FG" },
+    { key: "--secondary", label: "Secondary" },
+    { key: "--secondary-foreground", label: "Secondary FG" },
+    { key: "--muted", label: "Muted" },
+    { key: "--muted-foreground", label: "Muted FG" },
+    { key: "--accent", label: "Accent" },
+    { key: "--accent-foreground", label: "Accent FG" },
+    { key: "--destructive", label: "Destructive" },
+    { key: "--destructive-foreground", label: "Destructive FG" },
+    { key: "--border", label: "Border" },
+  ];
+
   const loadSettings = useCallback(async () => {
     setIsLoading(true);
     try {
       const appSettings = await invoke<AppSettings>("get_app_settings");
-      setSettings(appSettings);
-      setOriginalSettings(appSettings);
+      const merged: AppSettings = {
+        ...appSettings,
+        custom_theme:
+          appSettings.custom_theme &&
+          Object.keys(appSettings.custom_theme).length > 0
+            ? appSettings.custom_theme
+            : TOKYO_NIGHT_DEFAULTS,
+      };
+      setSettings(merged);
+      setOriginalSettings(merged);
     } catch (error) {
       console.error("Failed to load settings:", error);
     } finally {
@@ -136,6 +187,18 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     }
   }, []);
 
+  const applyCustomTheme = useCallback((vars: Record<string, string>) => {
+    const root = document.documentElement;
+    Object.entries(vars).forEach(([k, v]) =>
+      root.style.setProperty(k, v, "important"),
+    );
+  }, []);
+
+  const clearCustomTheme = useCallback(() => {
+    const root = document.documentElement;
+    THEME_VARIABLES.forEach(({ key }) => root.style.removeProperty(key));
+  }, []);
+
   const loadPermissions = useCallback(async () => {
     setIsLoadingPermissions(true);
     try {
@@ -229,7 +292,27 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     setIsSaving(true);
     try {
       await invoke("save_app_settings", { settings });
-      setTheme(settings.theme);
+      setTheme(settings.theme === "custom" ? "dark" : settings.theme);
+      // Apply or clear custom variables only on Save
+      if (settings.theme === "custom") {
+        if (settings.custom_theme) {
+          try {
+            const root = document.documentElement;
+            // Clear any previous custom vars first
+            THEME_VARIABLES.forEach(({ key }) =>
+              root.style.removeProperty(key),
+            );
+            Object.entries(settings.custom_theme).forEach(([k, v]) =>
+              root.style.setProperty(k, v, "important"),
+            );
+          } catch {}
+        }
+      } else {
+        try {
+          const root = document.documentElement;
+          THEME_VARIABLES.forEach(({ key }) => root.style.removeProperty(key));
+        } catch {}
+      }
       setOriginalSettings(settings);
       onClose();
     } catch (error) {
@@ -240,12 +323,45 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   }, [onClose, setTheme, settings]);
 
   const updateSetting = useCallback(
-    (key: keyof AppSettings, value: boolean | string) => {
-      setSettings((prev) => ({ ...prev, [key]: value }));
+    (
+      key: keyof AppSettings,
+      value: boolean | string | Record<string, string> | undefined,
+    ) => {
+      setSettings((prev) => ({ ...prev, [key]: value as unknown as never }));
     },
     [],
   );
 
+  const handleClose = useCallback(() => {
+    // Restore original theme when closing without saving
+    if (originalSettings.theme === "custom" && originalSettings.custom_theme) {
+      applyCustomTheme(originalSettings.custom_theme);
+    } else {
+      clearCustomTheme();
+    }
+    onClose();
+  }, [
+    originalSettings.theme,
+    originalSettings.custom_theme,
+    applyCustomTheme,
+    clearCustomTheme,
+    onClose,
+  ]);
+
+  // Apply custom theme live when editing
+  useEffect(() => {
+    if (settings.theme === "custom" && settings.custom_theme) {
+      applyCustomTheme(settings.custom_theme);
+    } else if (settings.theme !== "custom") {
+      clearCustomTheme();
+    }
+  }, [
+    settings.theme,
+    settings.custom_theme,
+    applyCustomTheme,
+    clearCustomTheme,
+  ]);
+
   useEffect(() => {
     if (isOpen) {
       loadSettings().catch(console.error);
@@ -265,83 +381,9 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         checkDefaultBrowserStatus().catch(console.error);
       }, 500); // Check every 500ms
 
-      // Listen for version update progress events
-      let unlistenFn: (() => void) | null = null;
-      const setupVersionUpdateListener = async () => {
-        try {
-          unlistenFn = await listen<VersionUpdateProgress>(
-            "version-update-progress",
-            (event) => {
-              const progress = event.payload;
-
-              if (progress.status === "updating") {
-                // Show unified progress toast
-                const currentBrowserName = progress.current_browser
-                  ? getBrowserDisplayName(progress.current_browser)
-                  : undefined;
-
-                showUnifiedVersionUpdateToast(
-                  "Checking for browser updates...",
-                  {
-                    description: currentBrowserName
-                      ? `Fetching ${currentBrowserName} release information...`
-                      : "Initializing version check...",
-                    progress: {
-                      current: progress.completed_browsers,
-                      total: progress.total_browsers,
-                      found: progress.new_versions_found,
-                      current_browser: currentBrowserName,
-                    },
-                  },
-                );
-              } else if (progress.status === "completed") {
-                dismissToast("unified-version-update");
-
-                if (progress.new_versions_found > 0) {
-                  showSuccessToast("Browser versions updated successfully", {
-                    duration: 5000,
-                    description:
-                      "Auto-downloads will start shortly for available updates.",
-                  });
-                } else {
-                  showSuccessToast("No new browser versions found", {
-                    duration: 3000,
-                    description: "All browser versions are up to date",
-                  });
-                }
-              } else if (progress.status === "error") {
-                dismissToast("unified-version-update");
-
-                showErrorToast("Failed to update browser versions", {
-                  duration: 6000,
-                  description: "Check your internet connection and try again",
-                });
-              }
-            },
-          );
-        } catch (error) {
-          console.error(
-            "Failed to setup version update progress listener:",
-            error,
-          );
-        }
-      };
-
-      setupVersionUpdateListener();
-
-      // Cleanup interval and listener on component unmount or dialog close
+      // Cleanup interval on component unmount or dialog close
       return () => {
         clearInterval(intervalId);
-        if (unlistenFn) {
-          try {
-            unlistenFn();
-          } catch (error) {
-            console.error(
-              "Failed to cleanup version update progress listener:",
-              error,
-            );
-          }
-        }
       };
     }
   }, [isOpen, loadPermissions, checkDefaultBrowserStatus, loadSettings]);
@@ -373,10 +415,13 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   ]);
 
   // Check if settings have changed (excluding default browser setting)
-  const hasChanges = settings.theme !== originalSettings.theme;
+  const hasChanges =
+    settings.theme !== originalSettings.theme ||
+    JSON.stringify(settings.custom_theme ?? {}) !==
+      JSON.stringify(originalSettings.custom_theme ?? {});
 
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="max-w-md max-h-[80vh] my-8 flex flex-col">
         <DialogHeader className="flex-shrink-0">
           <DialogTitle>Settings</DialogTitle>
@@ -395,6 +440,9 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                 value={settings.theme}
                 onValueChange={(value) => {
                   updateSetting("theme", value);
+                  if (value === "custom" && !settings.custom_theme) {
+                    updateSetting("custom_theme", TOKYO_NIGHT_DEFAULTS);
+                  }
                 }}
               >
                 <SelectTrigger id="theme-select">
@@ -404,6 +452,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                   <SelectItem value="light">Light</SelectItem>
                   <SelectItem value="dark">Dark</SelectItem>
                   <SelectItem value="system">System</SelectItem>
+                  <SelectItem value="custom">Custom</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -411,6 +460,72 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
             <p className="text-xs text-muted-foreground">
               Choose your preferred theme or follow your system settings.
             </p>
+
+            {settings.theme === "custom" && (
+              <div className="space-y-3">
+                <div className="text-sm font-medium">Custom theme</div>
+                <div className="grid grid-cols-4 gap-3">
+                  {THEME_VARIABLES.map(({ key, label }) => {
+                    const colorValue =
+                      settings.custom_theme?.[key] ??
+                      TOKYO_NIGHT_DEFAULTS[key] ??
+                      "#000000";
+                    return (
+                      <div
+                        key={key}
+                        className="flex flex-col gap-1 items-center"
+                      >
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <button
+                              type="button"
+                              aria-label={label}
+                              className="w-8 h-8 rounded-md border shadow-sm cursor-pointer"
+                              style={{ backgroundColor: colorValue }}
+                            />
+                          </PopoverTrigger>
+                          <PopoverContent
+                            className="w-[320px] p-3"
+                            sideOffset={6}
+                          >
+                            <ColorPicker
+                              className="p-3 rounded-md border shadow-sm bg-background"
+                              value={colorValue}
+                              onColorChange={([r, g, b, a]) => {
+                                const next = Color({ r, g, b }).alpha(a);
+                                const nextStr = next.hexa();
+                                const nextTheme = {
+                                  ...(settings.custom_theme ?? {}),
+                                  [key]: nextStr,
+                                } as Record<string, string>;
+                                updateSetting("custom_theme", nextTheme);
+                                // No live preview; applied on Save
+                              }}
+                            >
+                              <ColorPickerSelection className="h-36 rounded" />
+                              <div className="flex gap-3 items-center mt-3">
+                                <ColorPickerEyeDropper />
+                                <div className="grid gap-1 w-full">
+                                  <ColorPickerHue />
+                                  <ColorPickerAlpha />
+                                </div>
+                              </div>
+                              <div className="flex gap-2 items-center mt-3">
+                                <ColorPickerOutput />
+                                <ColorPickerFormat />
+                              </div>
+                            </ColorPicker>
+                          </PopoverContent>
+                        </Popover>
+                        <div className="text-[10px] text-muted-foreground text-center leading-tight">
+                          {label}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Default Browser Section */}
@@ -529,7 +644,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         </div>
 
         <DialogFooter className="flex-shrink-0">
-          <RippleButton variant="outline" onClick={onClose}>
+          <RippleButton variant="outline" onClick={handleClose}>
             Cancel
           </RippleButton>
           <LoadingButton

src/components/shared-camoufox-config-form.tsx

@@ -83,7 +83,7 @@ export function SharedCamoufoxConfigForm({
   forceAdvanced = false,
 }: SharedCamoufoxConfigFormProps) {
   const [activeTab, setActiveTab] = useState(
-    forceAdvanced ? "advanced" : "normal",
+    forceAdvanced ? "manual" : "automatic",
   );
   const [fingerprintConfig, setFingerprintConfig] =
     useState<CamoufoxFingerprintConfig>({});
@@ -817,14 +817,13 @@ export function SharedCamoufoxConfigForm({
         // Advanced mode only (for editing)
         renderAdvancedForm()
       ) : (
-        // Normal/Advanced tabs for creation
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
           <TabsList className="grid grid-cols-2 w-full">
-            <TabsTrigger value="normal">Normal</TabsTrigger>
-            <TabsTrigger value="advanced">Advanced</TabsTrigger>
+            <TabsTrigger value="automatic">Automatic</TabsTrigger>
+            <TabsTrigger value="manual">Manual</TabsTrigger>
           </TabsList>
 
-          <TabsContent value="normal" className="space-y-6">
+          <TabsContent value="automatic" className="space-y-6">
             {/* Automatic Location Configuration */}
             <div className="mt-4 space-y-3">
               <div className="flex items-center space-x-2">
@@ -908,7 +907,7 @@ export function SharedCamoufoxConfigForm({
             </div>
           </TabsContent>
 
-          <TabsContent value="advanced" className="space-y-6">
+          <TabsContent value="manual" className="space-y-6">
             {renderAdvancedForm()}
           </TabsContent>
         </Tabs>

src/components/theme-provider.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 interface AppSettings {
   set_as_default_browser: boolean;
   theme: string;
+  custom_theme?: Record<string, string>;
 }
 
 interface CustomThemeProviderProps {
@@ -27,12 +28,30 @@ export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
         // Lazy import to avoid pulling Tauri API on SSR
         const { invoke } = await import("@tauri-apps/api/core");
         const settings = await invoke<AppSettings>("get_app_settings");
+        const themeValue = settings?.theme ?? "system";
+
         if (
-          settings?.theme === "light" ||
-          settings?.theme === "dark" ||
-          settings?.theme === "system"
+          themeValue === "light" ||
+          themeValue === "dark" ||
+          themeValue === "system"
         ) {
-          setDefaultTheme(settings.theme);
+          setDefaultTheme(themeValue);
+        } else if (themeValue === "custom") {
+          setDefaultTheme("light");
+          if (
+            settings.custom_theme &&
+            Object.keys(settings.custom_theme).length > 0
+          ) {
+            try {
+              const root = document.documentElement;
+              // Apply with !important to override CSS defaults
+              Object.entries(settings.custom_theme).forEach(([k, v]) => {
+                root.style.setProperty(k, v, "important");
+              });
+            } catch (error) {
+              console.warn("Failed to apply custom theme variables:", error);
+            }
+          }
         } else {
           setDefaultTheme("system");
         }
@@ -51,6 +70,30 @@ export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
     void loadTheme();
   }, []);
 
+  // Additional effect to ensure custom theme is applied after mount
+  useEffect(() => {
+    if (!isLoading && _mounted) {
+      const reapplyCustomTheme = async () => {
+        try {
+          const { invoke } = await import("@tauri-apps/api/core");
+          const settings = await invoke<AppSettings>("get_app_settings");
+
+          if (settings?.theme === "custom" && settings.custom_theme) {
+            const root = document.documentElement;
+            Object.entries(settings.custom_theme).forEach(([k, v]) => {
+              root.style.setProperty(k, v, "important");
+            });
+          }
+        } catch (error) {
+          console.warn("Failed to reapply custom theme:", error);
+        }
+      };
+
+      // Apply after a short delay to ensure CSS has loaded
+      setTimeout(reapplyCustomTheme, 100);
+    }
+  }, [isLoading, _mounted]);
+
   if (isLoading) {
     // Keep UI simple during initial settings load to avoid flicker
     return null;

src/components/ui/color-picker.tsx

@@ -0,0 +1,517 @@
+"use client";
+
+import Color from "color";
+import { Slider } from "radix-ui";
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { LuPipette } from "react-icons/lu";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface ColorPickerContextValue {
+  hue: number;
+  saturation: number;
+  lightness: number;
+  alpha: number;
+  mode: string;
+  setHue: (hue: number) => void;
+  setSaturation: (saturation: number) => void;
+  setLightness: (lightness: number) => void;
+  setAlpha: (alpha: number) => void;
+  setMode: (mode: string) => void;
+}
+
+const ColorPickerContext = createContext<ColorPickerContextValue | undefined>(
+  undefined,
+);
+
+export const useColorPicker = () => {
+  const context = useContext(ColorPickerContext);
+
+  if (!context) {
+    throw new Error("useColorPicker must be used within a ColorPickerProvider");
+  }
+
+  return context;
+};
+
+export type ColorPickerProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> & {
+  value?: Parameters<typeof Color>[0];
+  defaultValue?: Parameters<typeof Color>[0];
+  onColorChange?: (value: [number, number, number, number]) => void;
+};
+
+export const ColorPicker = ({
+  value,
+  defaultValue = "#000000",
+  onColorChange,
+  className,
+  children,
+  ...props
+}: ColorPickerProps) => {
+  const selectedColor = Color(value ?? defaultValue);
+  const defaultColor = Color(defaultValue);
+
+  const initialHue = Number.isFinite(selectedColor.hue())
+    ? selectedColor.hue()
+    : Number.isFinite(defaultColor.hue())
+      ? defaultColor.hue()
+      : 0;
+  const initialSaturation = Number.isFinite(selectedColor.saturationl())
+    ? selectedColor.saturationl()
+    : Number.isFinite(defaultColor.saturationl())
+      ? defaultColor.saturationl()
+      : 100;
+  const initialLightness = Number.isFinite(selectedColor.lightness())
+    ? selectedColor.lightness()
+    : Number.isFinite(defaultColor.lightness())
+      ? defaultColor.lightness()
+      : 50;
+  const initialAlpha = Number.isFinite(selectedColor.alpha())
+    ? Math.round(selectedColor.alpha() * 100)
+    : Math.round(defaultColor.alpha() * 100);
+
+  const [hue, setHue] = useState(initialHue);
+  const [saturation, setSaturation] = useState(initialSaturation);
+  const [lightness, setLightness] = useState(initialLightness);
+  const [alpha, setAlpha] = useState(initialAlpha);
+  const [mode, setMode] = useState("hex");
+  const lastEmittedRef = useRef<string>(
+    `${Math.round(initialHue)}|${Math.round(initialSaturation)}|${Math.round(initialLightness)}|${Math.round(initialAlpha)}`,
+  );
+
+  // Update color when controlled value changes
+  useEffect(() => {
+    if (value !== undefined) {
+      const c = Color(value).hsl();
+      const nextHue = Number.isFinite(c.hue()) ? c.hue() : 0;
+      const nextSat = Number.isFinite(c.saturationl()) ? c.saturationl() : 0;
+      const nextLight = Number.isFinite(c.lightness()) ? c.lightness() : 0;
+      const nextAlpha = Math.round(
+        (Number.isFinite(c.alpha()) ? c.alpha() : 1) * 100,
+      );
+
+      // Update internal state unconditionally when value prop changes
+      setHue(nextHue);
+      setSaturation(nextSat);
+      setLightness(nextLight);
+      setAlpha(nextAlpha);
+    }
+  }, [value]); // Remove state values from dependency array to prevent infinite loop
+
+  // Notify parent of changes
+  useEffect(() => {
+    if (onColorChange) {
+      const key = `${Math.round(hue)}|${Math.round(saturation)}|${Math.round(lightness)}|${Math.round(alpha)}`;
+      if (key === lastEmittedRef.current) {
+        return;
+      }
+      lastEmittedRef.current = key;
+
+      const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100);
+      const rgba = color.rgb().array();
+      onColorChange([rgba[0], rgba[1], rgba[2], alpha / 100]);
+    }
+  }, [hue, saturation, lightness, alpha, onColorChange]);
+
+  return (
+    <ColorPickerContext.Provider
+      value={{
+        hue,
+        saturation,
+        lightness,
+        alpha,
+        mode,
+        setHue,
+        setSaturation,
+        setLightness,
+        setAlpha,
+        setMode,
+      }}
+    >
+      <div
+        className={cn("flex flex-col gap-4 size-full", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </ColorPickerContext.Provider>
+  );
+};
+
+export type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>;
+
+export const ColorPickerSelection = memo(
+  ({ className, ...props }: ColorPickerSelectionProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [positionX, setPositionX] = useState(0);
+    const [positionY, setPositionY] = useState(0);
+    const { hue, saturation, lightness, setSaturation, setLightness } =
+      useColorPicker();
+
+    const backgroundGradient = useMemo(() => {
+      return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),
+            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),
+            hsl(${hue}, 100%, 50%)`;
+    }, [hue]);
+
+    // Update position indicators when saturation/lightness change externally
+    useEffect(() => {
+      if (!isDragging) {
+        const x = saturation / 100;
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const y = topLightness > 0 ? 1 - lightness / topLightness : 0;
+        setPositionX(x);
+        setPositionY(Math.max(0, Math.min(1, y)));
+      }
+    }, [saturation, lightness, isDragging]);
+
+    const handlePointerMove = useCallback(
+      (event: PointerEvent) => {
+        if (!(isDragging && containerRef.current)) {
+          return;
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = Math.max(
+          0,
+          Math.min(1, (event.clientX - rect.left) / rect.width),
+        );
+        const y = Math.max(
+          0,
+          Math.min(1, (event.clientY - rect.top) / rect.height),
+        );
+        setPositionX(x);
+        setPositionY(y);
+        setSaturation(x * 100);
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const lightness = topLightness * (1 - y);
+
+        setLightness(lightness);
+      },
+      [isDragging, setSaturation, setLightness],
+    );
+
+    useEffect(() => {
+      const handlePointerUp = () => setIsDragging(false);
+
+      if (isDragging) {
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+      }
+
+      return () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [isDragging, handlePointerMove]);
+
+    return (
+      <div
+        className={cn("relative rounded cursor-pointer size-full", className)}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+          handlePointerMove(e.nativeEvent);
+        }}
+        ref={containerRef}
+        style={{
+          background: backgroundGradient,
+        }}
+        {...props}
+      >
+        <div
+          className="absolute w-4 h-4 rounded-full border-2 border-white -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+          style={{
+            left: `${positionX * 100}%`,
+            top: `${positionY * 100}%`,
+            boxShadow: "0 0 0 1px rgba(0,0,0,0.5)",
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+ColorPickerSelection.displayName = "ColorPickerSelection";
+
+export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
+
+export const ColorPickerHue = ({
+  className,
+  ...props
+}: ColorPickerHueProps) => {
+  const { hue, setHue } = useColorPicker();
+
+  return (
+    <Slider.Root
+      className={cn("flex relative w-full h-4 touch-none", className)}
+      max={360}
+      onValueChange={([hue]) => setHue(hue)}
+      step={1}
+      value={[hue]}
+      {...props}
+    >
+      <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
+        <Slider.Range className="absolute h-full" />
+      </Slider.Track>
+      <Slider.Thumb className="block w-4 h-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    </Slider.Root>
+  );
+};
+
+export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
+
+export const ColorPickerAlpha = ({
+  className,
+  ...props
+}: ColorPickerAlphaProps) => {
+  const { alpha, setAlpha } = useColorPicker();
+
+  return (
+    <Slider.Root
+      className={cn("flex relative w-full h-4 touch-none", className)}
+      max={100}
+      onValueChange={([alpha]) => setAlpha(alpha)}
+      step={1}
+      value={[alpha]}
+      {...props}
+    >
+      <Slider.Track
+        className="relative my-0.5 h-3 w-full grow rounded-full"
+        style={{
+          background:
+            'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center',
+        }}
+      >
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent rounded-full to-black/50" />
+        <Slider.Range className="absolute h-full bg-transparent rounded-full" />
+      </Slider.Track>
+      <Slider.Thumb className="block w-4 h-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    </Slider.Root>
+  );
+};
+
+export type ColorPickerEyeDropperProps = ComponentProps<typeof Button>;
+
+export const ColorPickerEyeDropper = ({
+  className,
+  ...props
+}: ColorPickerEyeDropperProps) => {
+  const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+
+  const handleEyeDropper = async () => {
+    try {
+      // @ts-expect-error - EyeDropper API is experimental
+      const eyeDropper = new EyeDropper();
+      const result = await eyeDropper.open();
+      const color = Color(result.sRGBHex);
+      const [h, s, l] = color.hsl().array();
+
+      setHue(h);
+      setSaturation(s);
+      setLightness(l);
+      setAlpha(100);
+    } catch (error) {
+      console.error("EyeDropper failed:", error);
+    }
+  };
+
+  return (
+    <Button
+      className={cn("shrink-0 text-muted-foreground", className)}
+      onClick={handleEyeDropper}
+      size="icon"
+      variant="outline"
+      type="button"
+      {...props}
+    >
+      <LuPipette size={16} />
+    </Button>
+  );
+};
+
+export type ColorPickerOutputProps = ComponentProps<typeof SelectTrigger>;
+
+const formats = ["hex", "rgb", "css", "hsl"];
+
+export const ColorPickerOutput = ({
+  className,
+  ...props
+}: ColorPickerOutputProps) => {
+  const { mode, setMode } = useColorPicker();
+
+  return (
+    <Select onValueChange={setMode} value={mode}>
+      <SelectTrigger className="w-20 h-8 text-xs shrink-0" {...props}>
+        <SelectValue placeholder="Mode" />
+      </SelectTrigger>
+      <SelectContent>
+        {formats.map((format) => (
+          <SelectItem className="text-xs" key={format} value={format}>
+            {format.toUpperCase()}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+type PercentageInputProps = ComponentProps<typeof Input>;
+
+const PercentageInput = ({ className, ...props }: PercentageInputProps) => {
+  return (
+    <div className="relative">
+      <Input
+        readOnly
+        type="text"
+        {...props}
+        className={cn(
+          "h-8 w-[3.25rem] rounded-l-none bg-secondary px-2 text-xs shadow-none",
+          className,
+        )}
+      />
+      <span className="absolute right-2 top-1/2 text-xs -translate-y-1/2 text-muted-foreground">
+        %
+      </span>
+    </div>
+  );
+};
+
+export type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>;
+
+export const ColorPickerFormat = ({
+  className,
+  ...props
+}: ColorPickerFormatProps) => {
+  const { hue, saturation, lightness, alpha, mode } = useColorPicker();
+  const color = Color.hsl(hue, saturation, lightness, alpha / 100);
+
+  if (mode === "hex") {
+    const hex = color.hex();
+
+    return (
+      <div
+        className={cn(
+          "flex relative items-center -space-x-px w-full rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        <Input
+          className="px-2 h-8 text-xs rounded-r-none shadow-none bg-secondary"
+          readOnly
+          type="text"
+          value={hex}
+        />
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  if (mode === "rgb") {
+    const rgb = color
+      .rgb()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div
+        className={cn(
+          "flex items-center -space-x-px rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {rgb.map((value, index) => (
+          <Input
+            className={cn(
+              "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none",
+              index && "rounded-l-none",
+              className,
+            )}
+            key={`rgb-${value.toString()}`}
+            readOnly
+            type="text"
+            value={value}
+          />
+        ))}
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  if (mode === "css") {
+    const rgb = color
+      .rgb()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div className={cn("w-full rounded-md shadow-sm", className)} {...props}>
+        <Input
+          className="px-2 w-full h-8 text-xs shadow-none bg-secondary"
+          readOnly
+          type="text"
+          value={`rgba(${rgb.join(", ")}, ${alpha}%)`}
+          {...props}
+        />
+      </div>
+    );
+  }
+
+  if (mode === "hsl") {
+    const hsl = color
+      .hsl()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div
+        className={cn(
+          "flex items-center -space-x-px rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {hsl.map((value, index) => (
+          <Input
+            className={cn(
+              "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none",
+              index && "rounded-l-none",
+              className,
+            )}
+            key={`hsl-${value.toString()}`}
+            readOnly
+            type="text"
+            value={value}
+          />
+        ))}
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  return null;
+};

src/types.ts

@@ -22,6 +22,7 @@ export interface BrowserProfile {
   release_type: string; // "stable" or "nightly"
   camoufox_config?: CamoufoxConfig; // Camoufox configuration
   group_id?: string; // Reference to profile group
+  tags?: string[];
 }
 
 export interface StoredProxy {