chore: formatting

refactor: cleanup empty browser folders
chore: cleanup
2026-06-27 08:59:59 +02:00 · 2025-08-23 14:02:49 +04:00 · 2025-08-21 09:13:30 +04:00 · 2025-08-19 14:01:24 +04:00 · 2025-08-19 13:57:58 +04:00 · 2025-08-19 13:55:40 +04:00
36 changed files with 2329 additions and 1128 deletions
@@ -0,0 +1,6 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+If you are modifying the UI, do not add random colors that are not controlled by src/lib/themes.ts file.
@@ -20,6 +20,7 @@
    "CFURL",
    "checkin",
    "chrono",
+    "ciphertext",
    "CLICOLOR",
    "clippy",
    "cmdk",
@@ -31,6 +32,7 @@
    "dataclasses",
    "datareporting",
    "datas",
+    "DBAPI",
    "dconf",
    "devedition",
    "distro",
@@ -6,3 +6,4 @@
 - Before finishing the task and showing summary, always run "pnpm format && pnpm lint && pnpm test" at the root of the project to ensure that you don't finish with broken application.
 - Anytime you change nodecar's code and try to test, recompile it with "cd nodecar && pnpm build".
 - If there is a global singleton of a struct, only use it inside a method while properly initializing it, unless I have explicitly specified in the request otherwise.
+- If you are modifying the UI, do not add random colors that are not controlled by src/lib/themes.ts file.
@@ -2,7 +2,7 @@
  "name": "donutbrowser",
  "private": true,
  "license": "AGPL-3.0",
-  "version": "0.10.0",
+  "version": "0.11.0",
  "type": "module",
  "scripts": {
    "dev": "next dev --turbopack",
@@ -17,6 +17,16 @@ version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"

+[[package]]
+name = "aead"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d122413f284cf2d62fb1b7db97e02edb8cda96d769b16e443a4f6195e35662b0"
+dependencies = [
+ "crypto-common",
+ "generic-array",
+]
+
 [[package]]
 name = "aes"
 version = "0.8.4"
@@ -28,6 +38,20 @@ dependencies = [
 "cpufeatures",
 ]

+[[package]]
+name = "aes-gcm"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "831010a0f742e1209b3bcea8fab6a8e149051ba6099432c8cb2cc117dec3ead1"
+dependencies = [
+ "aead",
+ "aes",
+ "cipher",
+ "ctr",
+ "ghash",
+ "subtle",
+]
+
 [[package]]
 name = "aho-corasick"
 version = "1.1.3"
@@ -82,6 +106,18 @@ dependencies = [
 "derive_arbitrary",
 ]

+[[package]]
+name = "argon2"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c3610892ee6e0cbce8ae2700349fcf8f98adb0dbfbee85aec3c9179d29cc072"
+dependencies = [
+ "base64ct",
+ "blake2",
+ "cpufeatures",
+ "password-hash",
+]
+
 [[package]]
 name = "ashpd"
 version = "0.9.2"
@@ -371,6 +407,12 @@ version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"

+[[package]]
+name = "base64ct"
+version = "1.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55248b47b0caf0546f7988906588779981c43bb1bc9d0c44087278f80cdb44ba"
+
 [[package]]
 name = "bitflags"
 version = "1.3.2"
@@ -386,6 +428,15 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "blake2"
+version = "0.10.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "46502ad458c9a52b69d4d4d32775c788b7a1b85e8bc9d482d92250fc0e3f8efe"
+dependencies = [
+ "digest",
+]
+
 [[package]]
 name = "block-buffer"
 version = "0.10.4"
@@ -820,6 +871,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1bfb12502f3fc46cca1bb51ac28df9d618d813cdc3d2f25b9fe775a34af26bb3"
 dependencies = [
 "generic-array",
+ "rand_core 0.6.4",
 "typenum",
 ]

@@ -860,6 +912,15 @@ dependencies = [
 "syn 2.0.106",
 ]

+[[package]]
+name = "ctr"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0369ee1ad671834580515889b80f2ea915f23b8be8d0daa4bbaf2ac5c7590835"
+dependencies = [
+ "cipher",
+]
+
 [[package]]
 name = "darling"
 version = "0.20.11"
@@ -1075,8 +1136,10 @@ dependencies = [

 [[package]]
 name = "donutbrowser"
-version = "0.10.0"
+version = "0.11.0"
 dependencies = [
+ "aes-gcm",
+ "argon2",
 "async-trait",
 "axum",
 "base64 0.22.1",
@@ -1635,6 +1698,16 @@ dependencies = [
 "wasi 0.14.2+wasi-0.2.4",
 ]

+[[package]]
+name = "ghash"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f0d8a4362ccb29cb0b265253fb0a2728f592895ee6854fd9bc13f2ffda266ff1"
+dependencies = [
+ "opaque-debug",
+ "polyval",
+]
+
 [[package]]
 name = "gimli"
 version = "0.31.1"
@@ -3054,6 +3127,12 @@ version = "1.21.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "42f5e15c9953c5e4ccceeb2e7382a716482c34515315f7b03532b8b4e8393d2d"

+[[package]]
+name = "opaque-debug"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c08d65885ee38876c4f86fa503fb49d7b507c2b62552df7c70b2fce627e06381"
+
 [[package]]
 name = "open"
 version = "5.3.2"
@@ -3200,6 +3279,17 @@ dependencies = [
 "windows-targets 0.52.6",
 ]

+[[package]]
+name = "password-hash"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "346f04948ba92c43e8469c1ee6736c7563d71012b17d40745260fe106aac2166"
+dependencies = [
+ "base64ct",
+ "rand_core 0.6.4",
+ "subtle",
+]
+
 [[package]]
 name = "pathdiff"
 version = "0.2.3"
@@ -3425,6 +3515,18 @@ dependencies = [
 "windows-sys 0.60.2",
 ]

+[[package]]
+name = "polyval"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d1fe60d06143b2430aa532c94cfe9e29783047f06c0d7fd359a9a51b729fa25"
+dependencies = [
+ "cfg-if",
+ "cpufeatures",
+ "opaque-debug",
+ "universal-hash",
+]
+
 [[package]]
 name = "potential_utf"
 version = "0.1.2"
@@ -5404,6 +5506,16 @@ version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"

+[[package]]
+name = "universal-hash"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc1de2c688dc15305988b563c3854064043356019f97a4b46276fe734c4f07ea"
+dependencies = [
+ "crypto-common",
+ "subtle",
+]
+
 [[package]]
 name = "untrusted"
 version = "0.9.0"
@@ -1,6 +1,6 @@
 [package]
 name = "donutbrowser"
-version = "0.10.0"
+version = "0.11.0"
 description = "Simple Yet Powerful Anti-Detect Browser"
 authors = ["zhom@github"]
 edition = "2021"
@@ -29,6 +29,8 @@ tauri-plugin-shell = "2"
 tauri-plugin-deep-link = "2"
 tauri-plugin-dialog = "2"
 tauri-plugin-macos-permissions = "2"
+
+
 directories = "6"
 reqwest = { version = "0.12", features = ["json", "stream"] }
 tokio = { version = "1", features = ["full", "sync"] }
@@ -51,6 +53,8 @@ axum = "0.8.4"
 tower = "0.5"
 tower-http = { version = "0.6", features = ["cors"] }
 rand = "0.9.2"
+argon2 = "0.5"
+aes-gcm = "0.10"

 [target."cfg(any(target_os = \"macos\", windows, target_os = \"linux\"))".dependencies]
 tauri-plugin-single-instance = { version = "2", features = ["deep-link"] }
@@ -26,5 +26,13 @@ fn main() {
    println!("cargo:rustc-env=BUILD_VERSION=dev-{version}");
  }

+  // Inject vault password at build time
+  if let Ok(vault_password) = std::env::var("DONUT_BROWSER_VAULT_PASSWORD") {
+    println!("cargo:rustc-env=DONUT_BROWSER_VAULT_PASSWORD={vault_password}");
+  } else {
+    // Use default password if environment variable is not set
+    println!("cargo:rustc-env=DONUT_BROWSER_VAULT_PASSWORD=donutbrowser-api-vault-password");
+  }
+
  tauri_build::build()
 }
@@ -3,14 +3,16 @@ use crate::profile::manager::ProfileManager;
 use crate::proxy_manager::PROXY_MANAGER;
 use crate::tag_manager::TAG_MANAGER;
 use axum::{
-  extract::{Path, State},
-  http::StatusCode,
-  response::Json,
+  extract::{Path, Query, State},
+  http::{HeaderMap, StatusCode},
+  middleware::{self, Next},
+  response::{Json, Response},
  routing::{delete, get, post, put},
  Router,
 };
 use lazy_static::lazy_static;
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
 use std::sync::Arc;
 use tauri::Emitter;
 use tokio::net::TcpListener;
@@ -49,7 +51,7 @@ pub struct ApiProfileResponse {
 pub struct CreateProfileRequest {
  pub name: String,
  pub browser: String,
-  pub version: Option<String>,
+  pub version: String,
  pub proxy_id: Option<String>,
  pub release_type: Option<String>,
  pub camoufox_config: Option<serde_json::Value>,
@@ -110,6 +112,19 @@ struct UpdateProxyRequest {
  proxy_settings: Option<serde_json::Value>,
 }

+#[derive(Debug, Deserialize)]
+struct DownloadBrowserRequest {
+  browser: String,
+  version: String,
+}
+
+#[derive(Debug, Serialize)]
+struct DownloadBrowserResponse {
+  browser: String,
+  version: String,
+  status: String,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ToastPayload {
  pub message: String,
@@ -118,6 +133,13 @@ pub struct ToastPayload {
  pub description: Option<String>,
 }

+#[derive(Debug, Serialize)]
+struct RunProfileResponse {
+  profile_id: String,
+  remote_debugging_port: u16,
+  headless: bool,
+}
+
 pub struct ApiServer {
  port: Option<u16>,
  shutdown_tx: Option<mpsc::Sender<()>>,
@@ -174,13 +196,14 @@ impl ApiServer {
      .map_err(|e| format!("Failed to get local address: {e}"))?
      .port();

-    // Create router with CORS
-    let app = Router::new()
+    // Create router with CORS, authentication, and versioning
+    let v1_routes = Router::new()
      .route("/profiles", get(get_profiles))
      .route("/profiles", post(create_profile))
      .route("/profiles/{id}", get(get_profile))
      .route("/profiles/{id}", put(update_profile))
      .route("/profiles/{id}", delete(delete_profile))
+      .route("/profiles/{id}/run", post(run_profile))
      .route("/groups", get(get_groups).post(create_group))
      .route(
        "/groups/{id}",
@@ -192,6 +215,19 @@ impl ApiServer {
        "/proxies/{id}",
        get(get_proxy).put(update_proxy).delete(delete_proxy),
      )
+      .route("/browsers/download", post(download_browser_api))
+      .route("/browsers/{browser}/versions", get(get_browser_versions))
+      .route(
+        "/browsers/{browser}/versions/{version}/downloaded",
+        get(check_browser_downloaded),
+      )
+      .layer(middleware::from_fn_with_state(
+        state.clone(),
+        auth_middleware,
+      ));
+
+    let app = Router::new()
+      .nest("/v1", v1_routes)
      .layer(CorsLayer::permissive())
      .with_state(state);

@@ -225,6 +261,41 @@ impl ApiServer {
  }
 }

+// Authentication middleware
+async fn auth_middleware(
+  State(state): State<ApiServerState>,
+  headers: HeaderMap,
+  request: axum::extract::Request,
+  next: Next,
+) -> Result<Response, StatusCode> {
+  // Get the Authorization header
+  let auth_header = headers
+    .get("Authorization")
+    .and_then(|h| h.to_str().ok())
+    .and_then(|h| h.strip_prefix("Bearer "));
+
+  let token = match auth_header {
+    Some(token) => token,
+    None => return Err(StatusCode::UNAUTHORIZED),
+  };
+
+  // Get the stored token
+  let settings_manager = crate::settings_manager::SettingsManager::instance();
+  let stored_token = match settings_manager.get_api_token(&state.app_handle).await {
+    Ok(Some(stored_token)) => stored_token,
+    Ok(None) => return Err(StatusCode::UNAUTHORIZED),
+    Err(_) => return Err(StatusCode::INTERNAL_SERVER_ERROR),
+  };
+
+  // Compare tokens
+  if token != stored_token {
+    return Err(StatusCode::UNAUTHORIZED);
+  }
+
+  // Token is valid, continue with the request
+  Ok(next.run(request).await)
+}
+
 // Global API server instance
 lazy_static! {
  pub static ref API_SERVER: Arc<Mutex<ApiServer>> = Arc::new(Mutex::new(ApiServer::new()));
@@ -283,7 +354,7 @@ async fn get_profiles() -> Result<Json<ApiProfilesResponse>, StatusCode> {
            .and_then(|c| serde_json::to_value(c).ok()),
          group_id: profile.group_id.clone(),
          tags: profile.tags.clone(),
-          is_running: false, // For now, set to false - can add running status later
+          is_running: profile.process_id.is_some(), // Simple check based on process_id
        })
        .collect();

@@ -320,7 +391,7 @@ async fn get_profile(
              .and_then(|c| serde_json::to_value(c).ok()),
            group_id: profile.group_id.clone(),
            tags: profile.tags.clone(),
-            is_running: false, // Simplified for now to avoid async complexity
+            is_running: profile.process_id.is_some(), // Simple check based on process_id
          },
        }))
      } else {
@@ -350,8 +421,8 @@ async fn create_profile(
      &state.app_handle,
      &request.name,
      &request.browser,
-      request.version.as_deref().unwrap_or("stable"),
-      request.release_type.as_deref().unwrap_or("release"),
+      &request.version,
+      request.release_type.as_deref().unwrap_or("stable"),
      request.proxy_id.clone(),
      camoufox_config,
      request.group_id.clone(),
@@ -362,7 +433,7 @@ async fn create_profile(
      // Apply tags if provided
      if let Some(tags) = &request.tags {
        if profile_manager
-          .update_profile_tags(&profile.name, tags.clone())
+          .update_profile_tags(&state.app_handle, &profile.name, tags.clone())
          .is_err()
        {
          return Err(StatusCode::INTERNAL_SERVER_ERROR);
@@ -402,7 +473,7 @@ async fn create_profile(
 }

 async fn update_profile(
-  Path(name): Path<String>,
+  Path(id): Path<String>,
  State(state): State<ApiServerState>,
  Json(request): Json<UpdateProfileRequest>,
 ) -> Result<Json<ApiProfileResponse>, StatusCode> {
@@ -410,14 +481,17 @@ async fn update_profile(

  // Update profile fields
  if let Some(new_name) = request.name {
-    if profile_manager.rename_profile(&name, &new_name).is_err() {
+    if profile_manager
+      .rename_profile(&state.app_handle, &id, &new_name)
+      .is_err()
+    {
      return Err(StatusCode::BAD_REQUEST);
    }
  }

  if let Some(version) = request.version {
    if profile_manager
-      .update_profile_version(&name, &version)
+      .update_profile_version(&state.app_handle, &id, &version)
      .is_err()
    {
      return Err(StatusCode::BAD_REQUEST);
@@ -426,7 +500,7 @@ async fn update_profile(

  if let Some(proxy_id) = request.proxy_id {
    if profile_manager
-      .update_profile_proxy(state.app_handle.clone(), &name, Some(proxy_id))
+      .update_profile_proxy(state.app_handle.clone(), &id, Some(proxy_id))
      .await
      .is_err()
    {
@@ -440,7 +514,7 @@ async fn update_profile(
    match config {
      Ok(config) => {
        if profile_manager
-          .update_camoufox_config(state.app_handle.clone(), &name, config)
+          .update_camoufox_config(state.app_handle.clone(), &id, config)
          .await
          .is_err()
        {
@@ -453,7 +527,7 @@ async fn update_profile(

  if let Some(group_id) = request.group_id {
    if profile_manager
-      .assign_profiles_to_group(vec![name.clone()], Some(group_id))
+      .assign_profiles_to_group(&state.app_handle, vec![id.clone()], Some(group_id))
      .is_err()
    {
      return Err(StatusCode::BAD_REQUEST);
@@ -461,7 +535,10 @@ async fn update_profile(
  }

  if let Some(tags) = request.tags {
-    if profile_manager.update_profile_tags(&name, tags).is_err() {
+    if profile_manager
+      .update_profile_tags(&state.app_handle, &id, tags)
+      .is_err()
+    {
      return Err(StatusCode::BAD_REQUEST);
    }

@@ -474,15 +551,15 @@ async fn update_profile(
  }

  // Return updated profile
-  get_profile(Path(name), State(state)).await
+  get_profile(Path(id), State(state)).await
 }

 async fn delete_profile(
  Path(id): Path<String>,
-  State(_state): State<ApiServerState>,
+  State(state): State<ApiServerState>,
 ) -> Result<StatusCode, StatusCode> {
  let profile_manager = ProfileManager::instance();
-  match profile_manager.delete_profile(&id) {
+  match profile_manager.delete_profile(&state.app_handle, &id) {
    Ok(_) => Ok(StatusCode::NO_CONTENT),
    Err(_) => Err(StatusCode::BAD_REQUEST),
  }
@@ -537,11 +614,11 @@ async fn get_group(
 }

 async fn create_group(
-  State(_state): State<ApiServerState>,
+  State(state): State<ApiServerState>,
  Json(request): Json<CreateGroupRequest>,
 ) -> Result<Json<ApiGroupResponse>, StatusCode> {
  match GROUP_MANAGER.lock() {
-    Ok(manager) => match manager.create_group(request.name) {
+    Ok(manager) => match manager.create_group(&state.app_handle, request.name) {
      Ok(group) => Ok(Json(ApiGroupResponse {
        id: group.id,
        name: group.name,
@@ -555,11 +632,11 @@ async fn create_group(

 async fn update_group(
  Path(id): Path<String>,
-  State(_state): State<ApiServerState>,
+  State(state): State<ApiServerState>,
  Json(request): Json<UpdateGroupRequest>,
 ) -> Result<Json<ApiGroupResponse>, StatusCode> {
  match GROUP_MANAGER.lock() {
-    Ok(manager) => match manager.update_group(id.clone(), request.name) {
+    Ok(manager) => match manager.update_group(&state.app_handle, id.clone(), request.name) {
      Ok(group) => Ok(Json(ApiGroupResponse {
        id: group.id,
        name: group.name,
@@ -573,10 +650,10 @@ async fn update_group(

 async fn delete_group(
  Path(id): Path<String>,
-  State(_state): State<ApiServerState>,
+  State(state): State<ApiServerState>,
 ) -> Result<StatusCode, StatusCode> {
  match GROUP_MANAGER.lock() {
-    Ok(manager) => match manager.delete_group(id.clone()) {
+    Ok(manager) => match manager.delete_group(&state.app_handle, id.clone()) {
      Ok(_) => Ok(StatusCode::NO_CONTENT),
      Err(_) => Err(StatusCode::BAD_REQUEST),
    },
@@ -629,13 +706,17 @@ async fn get_proxy(
 }

 async fn create_proxy(
-  State(_state): State<ApiServerState>,
+  State(state): State<ApiServerState>,
  Json(request): Json<CreateProxyRequest>,
 ) -> Result<Json<ApiProxyResponse>, StatusCode> {
  // Convert JSON value to ProxySettings
  match serde_json::from_value(request.proxy_settings.clone()) {
    Ok(proxy_settings) => {
-      match PROXY_MANAGER.create_stored_proxy(request.name.clone(), proxy_settings) {
+      match PROXY_MANAGER.create_stored_proxy(
+        &state.app_handle,
+        request.name.clone(),
+        proxy_settings,
+      ) {
        Ok(_) => {
          // Find the created proxy to return it
          let proxies = PROXY_MANAGER.get_stored_proxies();
@@ -658,7 +739,7 @@ async fn create_proxy(

 async fn update_proxy(
  Path(id): Path<String>,
-  State(_state): State<ApiServerState>,
+  State(state): State<ApiServerState>,
  Json(request): Json<UpdateProxyRequest>,
 ) -> Result<Json<ApiProxyResponse>, StatusCode> {
  let proxies = PROXY_MANAGER.get_stored_proxies();
@@ -674,6 +755,7 @@ async fn update_proxy(
    };

    match PROXY_MANAGER.update_stored_proxy(
+      &state.app_handle,
      &id,
      Some(new_name.clone()),
      Some(new_proxy_settings.clone()),
@@ -692,10 +774,103 @@ async fn update_proxy(

 async fn delete_proxy(
  Path(id): Path<String>,
-  State(_state): State<ApiServerState>,
+  State(state): State<ApiServerState>,
 ) -> Result<StatusCode, StatusCode> {
-  match PROXY_MANAGER.delete_stored_proxy(&id) {
+  match PROXY_MANAGER.delete_stored_proxy(&state.app_handle, &id) {
    Ok(_) => Ok(StatusCode::NO_CONTENT),
    Err(_) => Err(StatusCode::BAD_REQUEST),
  }
 }
+
+// API Handler - Run Profile with Remote Debugging
+async fn run_profile(
+  Path(id): Path<String>,
+  Query(params): Query<HashMap<String, String>>,
+  State(state): State<ApiServerState>,
+) -> Result<Json<RunProfileResponse>, StatusCode> {
+  let headless = params
+    .get("headless")
+    .and_then(|v| v.parse::<bool>().ok())
+    .unwrap_or(false);
+
+  let profile_manager = ProfileManager::instance();
+  let profiles = profile_manager
+    .list_profiles()
+    .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+  let profile = profiles
+    .iter()
+    .find(|p| p.id.to_string() == id)
+    .ok_or(StatusCode::NOT_FOUND)?;
+
+  // Generate a random port for remote debugging
+  let remote_debugging_port = rand::random::<u16>().saturating_add(9000).max(9000);
+
+  // Use the same launch method as the main app, but with remote debugging enabled
+  match crate::browser_runner::launch_browser_profile_with_debugging(
+    state.app_handle.clone(),
+    profile.clone(),
+    None,
+    Some(remote_debugging_port),
+    headless,
+  )
+  .await
+  {
+    Ok(updated_profile) => Ok(Json(RunProfileResponse {
+      profile_id: updated_profile.id.to_string(),
+      remote_debugging_port,
+      headless,
+    })),
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handler - Download Browser
+async fn download_browser_api(
+  State(state): State<ApiServerState>,
+  Json(request): Json<DownloadBrowserRequest>,
+) -> Result<Json<DownloadBrowserResponse>, StatusCode> {
+  let browser_runner = crate::browser_runner::BrowserRunner::instance();
+
+  match browser_runner
+    .download_browser_impl(
+      state.app_handle.clone(),
+      request.browser.clone(),
+      request.version.clone(),
+    )
+    .await
+  {
+    Ok(_) => Ok(Json(DownloadBrowserResponse {
+      browser: request.browser,
+      version: request.version,
+      status: "downloaded".to_string(),
+    })),
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handler - Get Browser Versions
+async fn get_browser_versions(
+  Path(browser): Path<String>,
+  State(_state): State<ApiServerState>,
+) -> Result<Json<Vec<String>>, StatusCode> {
+  let version_manager = crate::browser_version_manager::BrowserVersionManager::instance();
+
+  match version_manager
+    .fetch_browser_versions_with_count(&browser, false)
+    .await
+  {
+    Ok(result) => Ok(Json(result.versions)),
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handler - Check if Browser is Downloaded
+async fn check_browser_downloaded(
+  Path((browser, version)): Path<(String, String)>,
+  State(_state): State<ApiServerState>,
+) -> Result<Json<bool>, StatusCode> {
+  let browser_runner = crate::browser_runner::BrowserRunner::instance();
+  let is_downloaded = browser_runner.is_browser_downloaded(&browser, &version);
+  Ok(Json(is_downloaded))
+}
@@ -148,11 +148,11 @@ impl AutoUpdater {
            );

            // Clone app_handle for the async task
-            let app_handle_clone = app_handle.clone();
            let browser = notification.browser.clone();
            let new_version = notification.new_version.clone();
            let notification_id = notification.id.clone();
            let affected_profiles = notification.affected_profiles.clone();
+            let app_handle_clone = app_handle.clone();

            // Spawn async task to handle the download and auto-update
            tokio::spawn(async move {
@@ -166,6 +166,7 @@ impl AutoUpdater {

                  // Browser already exists, go straight to profile update
                  match crate::auto_updater::complete_browser_update_with_auto_update(
+                    app_handle_clone,
                    browser.clone(),
                    new_version.clone(),
                  )
@@ -293,6 +294,7 @@ impl AutoUpdater {
  /// Automatically update all affected profile versions after browser download
  pub async fn auto_update_profile_versions(
    &self,
+    app_handle: &tauri::AppHandle,
    browser: &str,
    new_version: &str,
  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
@@ -314,7 +316,7 @@ impl AutoUpdater {
        // Check if this is an update (newer version)
        if self.is_version_newer(new_version, &profile.version) {
          // Update the profile version
-          match profile_manager.update_profile_version(&profile.name, new_version) {
+          match profile_manager.update_profile_version(app_handle, &profile.name, new_version) {
            Ok(_) => {
              updated_profiles.push(profile.name);
            }
@@ -332,12 +334,13 @@ impl AutoUpdater {
  /// Complete browser update process with auto-update of profile versions
  pub async fn complete_browser_update_with_auto_update(
    &self,
+    app_handle: &tauri::AppHandle,
    browser: &str,
    new_version: &str,
  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
    // Auto-update profile versions first
    let updated_profiles = self
-      .auto_update_profile_versions(browser, new_version)
+      .auto_update_profile_versions(app_handle, browser, new_version)
      .await?;

    // Remove browser from disabled list and clean up auto-update tracking
@@ -480,12 +483,13 @@ pub async fn dismiss_update_notification(notification_id: String) -> Result<(),

 #[tauri::command]
 pub async fn complete_browser_update_with_auto_update(
+  app_handle: tauri::AppHandle,
  browser: String,
  new_version: String,
 ) -> Result<Vec<String>, String> {
  let updater = AutoUpdater::instance();
  updater
-    .complete_browser_update_with_auto_update(&browser, &new_version)
+    .complete_browser_update_with_auto_update(&app_handle, &browser, &new_version)
    .await
    .map_err(|e| format!("Failed to complete browser update: {e}"))
 }
@@ -876,7 +880,7 @@ mod tests {
    use tempfile::TempDir;

    // Create a temporary directory for testing
-    let temp_dir = TempDir::new().expect("Failed to create temp directory");
+    let temp_dir = TempDir::new().unwrap();

    // Create a mock settings manager that uses the temp directory
    struct TestSettingsManager {
@@ -58,6 +58,8 @@ pub trait Browser: Send + Sync {
    profile_path: &str,
    proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>>;
  fn is_version_downloaded(&self, version: &str, binaries_dir: &Path) -> bool;
  fn prepare_executable(&self, executable_path: &Path) -> Result<(), Box<dyn std::error::Error>>;
@@ -557,11 +559,23 @@ impl Browser for FirefoxBrowser {
    profile_path: &str,
    _proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
    let mut args = vec!["-profile".to_string(), profile_path.to_string()];

-    // Only use -no-remote for browsers that require it for security (Mullvad, Tor)
-    // Regular Firefox browsers can use remote commands for better URL handling
+    // Add remote debugging if requested
+    if let Some(port) = remote_debugging_port {
+      args.push("--start-debugger-server".to_string());
+      args.push(port.to_string());
+    }
+
+    // Add headless mode if requested
+    if headless {
+      args.push("--headless".to_string());
+    }
+
+    // Use -no-remote for browsers that require it for security (Mullvad, Tor) or when remote debugging
    match self.browser_type {
      BrowserType::MullvadBrowser | BrowserType::TorBrowser => {
        args.push("-no-remote".to_string());
@@ -570,7 +584,11 @@ impl Browser for FirefoxBrowser {
      | BrowserType::FirefoxDeveloper
      | BrowserType::Zen
      | BrowserType::Camoufox => {
-        // Don't use -no-remote so we can communicate with existing instances
+        // Use -no-remote when remote debugging to avoid conflicts
+        if remote_debugging_port.is_some() {
+          args.push("-no-remote".to_string());
+        }
+        // Don't use -no-remote for normal launches so we can communicate with existing instances
      }
      _ => {}
    }
@@ -659,6 +677,8 @@ impl Browser for ChromiumBrowser {
    profile_path: &str,
    proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
    let mut args = vec![
      format!("--user-data-dir={}", profile_path),
@@ -670,9 +690,19 @@ impl Browser for ChromiumBrowser {
      "--disable-updater".to_string(),
    ];

+    // Add remote debugging if requested
+    if let Some(port) = remote_debugging_port {
+      args.push("--remote-debugging-address=0.0.0.0".to_string());
+      args.push(format!("--remote-debugging-port={port}"));
+    }
+
+    // Add headless mode if requested
+    if headless {
+      args.push("--headless".to_string());
+    }
+
    // Add proxy configuration if provided
    if let Some(proxy) = proxy_settings {
-      // Apply proxy settings
      args.push(format!(
        "--proxy-server=http://{}:{}",
        proxy.host, proxy.port
@@ -758,6 +788,8 @@ impl Browser for CamoufoxBrowser {
    profile_path: &str,
    _proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
    // For Camoufox, we handle launching through the camoufox launcher
    // This method won't be used directly, but we provide basic Firefox args as fallback
@@ -767,6 +799,17 @@ impl Browser for CamoufoxBrowser {
      "-no-remote".to_string(),
    ];

+    // Add remote debugging if requested
+    if let Some(port) = remote_debugging_port {
+      args.push("--start-debugger-server".to_string());
+      args.push(port.to_string());
+    }
+
+    // Add headless mode if requested
+    if headless {
+      args.push("--headless".to_string());
+    }
+
    if let Some(url) = url {
      args.push(url);
    }
@@ -962,15 +1005,15 @@ mod tests {

  #[test]
  fn test_firefox_launch_args() {
-    // Test regular Firefox (should not use -no-remote)
+    // Test regular Firefox (should not use -no-remote for normal launch)
    let browser = FirefoxBrowser::new(BrowserType::Firefox);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
+      .create_launch_args("/path/to/profile", None, None, None, false)
      .expect("Failed to create launch args for Firefox");
    assert_eq!(args, vec!["-profile", "/path/to/profile"]);
    assert!(
      !args.contains(&"-no-remote".to_string()),
-      "Firefox should not use -no-remote"
+      "Firefox should not use -no-remote for normal launch"
    );

    let args = browser
@@ -978,6 +1021,8 @@ mod tests {
        "/path/to/profile",
        None,
        Some("https://example.com".to_string()),
+        None,
+        false,
      )
      .expect("Failed to create launch args for Firefox with URL");
    assert_eq!(
@@ -985,29 +1030,55 @@ mod tests {
      vec!["-profile", "/path/to/profile", "https://example.com"]
    );

-    // Test Mullvad Browser (should use -no-remote)
+    // Test Firefox with remote debugging (should use -no-remote)
+    let args = browser
+      .create_launch_args("/path/to/profile", None, None, Some(9222), false)
+      .expect("Failed to create launch args for Firefox with remote debugging");
+    assert!(
+      args.contains(&"-no-remote".to_string()),
+      "Firefox should use -no-remote for remote debugging"
+    );
+    assert!(
+      args.contains(&"--start-debugger-server".to_string()),
+      "Firefox should include debugger server arg"
+    );
+    assert!(
+      args.contains(&"9222".to_string()),
+      "Firefox should include debugging port"
+    );
+
+    // Test Mullvad Browser (should always use -no-remote)
    let browser = FirefoxBrowser::new(BrowserType::MullvadBrowser);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
+      .create_launch_args("/path/to/profile", None, None, None, false)
      .expect("Failed to create launch args for Mullvad Browser");
    assert_eq!(args, vec!["-profile", "/path/to/profile", "-no-remote"]);

-    // Test Tor Browser (should use -no-remote)
+    // Test Tor Browser (should always use -no-remote)
    let browser = FirefoxBrowser::new(BrowserType::TorBrowser);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
+      .create_launch_args("/path/to/profile", None, None, None, false)
      .expect("Failed to create launch args for Tor Browser");
    assert_eq!(args, vec!["-profile", "/path/to/profile", "-no-remote"]);

-    // Test Zen Browser (should not use -no-remote)
+    // Test Zen Browser (should not use -no-remote for normal launch)
    let browser = FirefoxBrowser::new(BrowserType::Zen);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
+      .create_launch_args("/path/to/profile", None, None, None, false)
      .expect("Failed to create launch args for Zen Browser");
    assert_eq!(args, vec!["-profile", "/path/to/profile"]);
    assert!(
      !args.contains(&"-no-remote".to_string()),
-      "Zen Browser should not use -no-remote"
+      "Zen Browser should not use -no-remote for normal launch"
+    );
+
+    // Test headless mode
+    let args = browser
+      .create_launch_args("/path/to/profile", None, None, None, true)
+      .expect("Failed to create launch args for Zen Browser headless");
+    assert!(
+      args.contains(&"--headless".to_string()),
+      "Browser should include headless flag when requested"
    );
  }

@@ -1015,7 +1086,7 @@ mod tests {
  fn test_chromium_launch_args() {
    let browser = ChromiumBrowser::new(BrowserType::Chromium);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
+      .create_launch_args("/path/to/profile", None, None, None, false)
      .expect("Failed to create launch args for Chromium");

    // Test that basic required arguments are present
@@ -1043,6 +1114,8 @@ mod tests {
        "/path/to/profile",
        None,
        Some("https://example.com".to_string()),
+        None,
+        false,
      )
      .expect("Failed to create launch args for Chromium with URL");
    assert!(
@@ -1055,6 +1128,28 @@ mod tests {
      args_with_url.last().expect("Args should not be empty"),
      "https://example.com"
    );
+
+    // Test remote debugging
+    let args_with_debug = browser
+      .create_launch_args("/path/to/profile", None, None, Some(9222), false)
+      .expect("Failed to create launch args for Chromium with remote debugging");
+    assert!(
+      args_with_debug.contains(&"--remote-debugging-port=9222".to_string()),
+      "Chromium args should contain remote debugging port"
+    );
+    assert!(
+      args_with_debug.contains(&"--remote-debugging-address=0.0.0.0".to_string()),
+      "Chromium args should contain remote debugging address"
+    );
+
+    // Test headless mode
+    let args_headless = browser
+      .create_launch_args("/path/to/profile", None, None, None, true)
+      .expect("Failed to create launch args for Chromium headless");
+    assert!(
+      args_headless.contains(&"--headless".to_string()),
+      "Chromium args should contain headless flag when requested"
+    );
  }

  #[test]
@@ -161,6 +161,20 @@ impl BrowserRunner {
    profile: &BrowserProfile,
    url: Option<String>,
    local_proxy_settings: Option<&ProxySettings>,
+  ) -> Result<BrowserProfile, Box<dyn std::error::Error + Send + Sync>> {
+    self
+      .launch_browser_internal(app_handle, profile, url, local_proxy_settings, None, false)
+      .await
+  }
+
+  async fn launch_browser_internal(
+    &self,
+    app_handle: tauri::AppHandle,
+    profile: &BrowserProfile,
+    url: Option<String>,
+    local_proxy_settings: Option<&ProxySettings>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<BrowserProfile, Box<dyn std::error::Error + Send + Sync>> {
    // Check if browser is disabled due to ongoing update
    let auto_updater = crate::auto_updater::AutoUpdater::instance();
@@ -336,6 +350,8 @@ impl BrowserRunner {
        &profile_data_path.to_string_lossy(),
        proxy_for_launch_args,
        url,
+        remote_debugging_port,
+        headless,
      )
      .expect("Failed to create launch arguments");

@@ -774,6 +790,86 @@ impl BrowserRunner {
    }
  }

+  pub async fn launch_browser_with_debugging(
+    &self,
+    app_handle: tauri::AppHandle,
+    profile: &BrowserProfile,
+    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
+  ) -> Result<BrowserProfile, Box<dyn std::error::Error + Send + Sync>> {
+    // Always start a local proxy for API launches
+    let mut internal_proxy_settings: Option<ProxySettings> = None;
+
+    // Determine upstream proxy if configured; otherwise use DIRECT
+    let upstream_proxy = profile
+      .proxy_id
+      .as_ref()
+      .and_then(|id| PROXY_MANAGER.get_proxy_settings_by_id(id));
+
+    // Use a temporary PID (1) to start the proxy, we'll update it after browser launch
+    let temp_pid = 1u32;
+
+    match PROXY_MANAGER
+      .start_proxy(
+        app_handle.clone(),
+        upstream_proxy.as_ref(),
+        temp_pid,
+        Some(&profile.name),
+      )
+      .await
+    {
+      Ok(internal_proxy) => {
+        internal_proxy_settings = Some(internal_proxy.clone());
+
+        // For Firefox-based browsers, apply PAC/user.js to point to the local proxy
+        if matches!(
+          profile.browser.as_str(),
+          "firefox" | "firefox-developer" | "zen" | "tor-browser" | "mullvad-browser"
+        ) {
+          let profiles_dir = self.get_profiles_dir();
+          let profile_path = profiles_dir.join(profile.id.to_string()).join("profile");
+
+          // Provide a dummy upstream (ignored when internal proxy is provided)
+          let dummy_upstream = ProxySettings {
+            proxy_type: "http".to_string(),
+            host: "127.0.0.1".to_string(),
+            port: internal_proxy.port,
+            username: None,
+            password: None,
+          };
+
+          self
+            .apply_proxy_settings_to_profile(&profile_path, &dummy_upstream, Some(&internal_proxy))
+            .map_err(|e| format!("Failed to update profile proxy: {e}"))?;
+        }
+      }
+      Err(e) => {
+        eprintln!("Failed to start local proxy (will launch without it): {e}");
+      }
+    }
+
+    let result = self
+      .launch_browser_internal(
+        app_handle.clone(),
+        profile,
+        url,
+        internal_proxy_settings.as_ref(),
+        remote_debugging_port,
+        headless,
+      )
+      .await;
+
+    // Update proxy with correct PID if launch succeeded
+    if let Ok(ref updated_profile) = result {
+      if let Some(actual_pid) = updated_profile.process_id {
+        let _ = PROXY_MANAGER.update_proxy_pid(temp_pid, actual_pid);
+      }
+    }
+
+    result
+  }
+
  pub async fn launch_or_open_url(
    &self,
    app_handle: tauri::AppHandle,
@@ -863,7 +959,7 @@ impl BrowserRunner {
              _ => {
                println!("Falling back to new instance for browser: {}", final_profile.browser);
                // Fallback to launching a new instance for other browsers
-                self.launch_browser(app_handle.clone(), &final_profile, url, internal_proxy_settings).await
+                self.launch_browser_internal(app_handle.clone(), &final_profile, url, internal_proxy_settings, None, false).await
              }
            }
          }
@@ -888,11 +984,13 @@ impl BrowserRunner {
        println!("Launching new browser instance - no URL provided");
      }
      self
-        .launch_browser(
+        .launch_browser_internal(
          app_handle.clone(),
          &final_profile,
          url,
          internal_proxy_settings,
+          None,
+          false,
        )
        .await
    }
@@ -909,9 +1007,13 @@ impl BrowserRunner {
    })
  }

-  pub fn delete_profile(&self, profile_id: &str) -> Result<(), Box<dyn std::error::Error>> {
+  pub fn delete_profile(
+    &self,
+    app_handle: tauri::AppHandle,
+    profile_id: &str,
+  ) -> Result<(), Box<dyn std::error::Error>> {
    let profile_manager = ProfileManager::instance();
-    profile_manager.delete_profile(profile_id)?;
+    profile_manager.delete_profile(&app_handle, profile_id)?;

    // Always perform cleanup after profile deletion to remove unused binaries
    if let Err(e) = self.cleanup_unused_binaries_internal() {
@@ -1055,7 +1157,7 @@ impl BrowserRunner {
      let system = System::new_all();
      if let Some(process) = system.process(sysinfo::Pid::from(pid as usize)) {
        let cmd = process.cmd();
-        let exe_name = process.name().to_string_lossy().to_lowercase();
+        let exe_name = process.name().to_string_lossy();

        // Verify this process is actually our browser
        let is_correct_browser = match profile.browser.as_str() {
@@ -1962,24 +2064,25 @@ pub async fn launch_browser_profile(
 #[tauri::command]
 pub async fn update_profile_proxy(
  app_handle: tauri::AppHandle,
-  profile_name: String,
+  profile_id: String,
  proxy_id: Option<String>,
 ) -> Result<BrowserProfile, String> {
  let profile_manager = ProfileManager::instance();
  profile_manager
-    .update_profile_proxy(app_handle, &profile_name, proxy_id)
+    .update_profile_proxy(app_handle, &profile_id, proxy_id)
    .await
    .map_err(|e| format!("Failed to update profile: {e}"))
 }

 #[tauri::command]
 pub fn update_profile_tags(
-  profile_name: String,
+  app_handle: tauri::AppHandle,
+  profile_id: String,
  tags: Vec<String>,
 ) -> Result<BrowserProfile, String> {
  let profile_manager = ProfileManager::instance();
  profile_manager
-    .update_profile_tags(&profile_name, tags)
+    .update_profile_tags(&app_handle, &profile_id, tags)
    .map_err(|e| format!("Failed to update profile tags: {e}"))
 }

@@ -1997,21 +2100,24 @@ pub async fn check_browser_status(

 #[tauri::command]
 pub fn rename_profile(
-  _app_handle: tauri::AppHandle,
-  old_name: &str,
-  new_name: &str,
+  app_handle: tauri::AppHandle,
+  profile_id: String,
+  new_name: String,
 ) -> Result<BrowserProfile, String> {
  let profile_manager = ProfileManager::instance();
  profile_manager
-    .rename_profile(old_name, new_name)
+    .rename_profile(&app_handle, &profile_id, &new_name)
    .map_err(|e| format!("Failed to rename profile: {e}"))
 }

 #[tauri::command]
-pub fn delete_profile(_app_handle: tauri::AppHandle, profile_id: String) -> Result<(), String> {
+pub async fn delete_profile(
+  app_handle: tauri::AppHandle,
+  profile_id: String,
+) -> Result<(), String> {
  let browser_runner = BrowserRunner::instance();
  browser_runner
-    .delete_profile(profile_id.as_str())
+    .delete_profile(app_handle, &profile_id)
    .map_err(|e| format!("Failed to delete profile: {e}"))
 }

@@ -2264,6 +2370,20 @@ pub async fn ensure_all_binaries_exist(
    .map_err(|e| format!("Failed to ensure all binaries exist: {e}"))
 }

+pub async fn launch_browser_profile_with_debugging(
+  app_handle: tauri::AppHandle,
+  profile: BrowserProfile,
+  url: Option<String>,
+  remote_debugging_port: Option<u16>,
+  headless: bool,
+) -> Result<BrowserProfile, String> {
+  let browser_runner = BrowserRunner::instance();
+  browser_runner
+    .launch_browser_with_debugging(app_handle, &profile, url, remote_debugging_port, headless)
+    .await
+    .map_err(|e| format!("Failed to launch browser with debugging: {e}"))
+}
+
 #[cfg(test)]
 mod tests {
  use super::*;
@@ -42,7 +42,7 @@ impl DefaultBrowser {
  pub async fn open_url_with_profile(
    &self,
    app_handle: tauri::AppHandle,
-    profile_name: String,
+    profile_id: String,
    url: String,
  ) -> Result<(), String> {
    let runner = crate::browser_runner::BrowserRunner::instance();
@@ -53,21 +53,21 @@ impl DefaultBrowser {
      .map_err(|e| format!("Failed to list profiles: {e}"))?;
    let profile = profiles
      .into_iter()
-      .find(|p| p.name == profile_name)
-      .ok_or_else(|| format!("Profile '{profile_name}' not found"))?;
+      .find(|p| p.id.to_string() == profile_id)
+      .ok_or_else(|| format!("Profile '{profile_id}' not found"))?;

-    println!("Opening URL '{url}' with profile '{profile_name}'");
+    println!("Opening URL '{url}' with profile '{profile_id}'");

    // Use launch_or_open_url which handles both launching new instances and opening in existing ones
    runner
      .launch_or_open_url(app_handle, &profile, Some(url.clone()), None)
      .await
      .map_err(|e| {
-        println!("Failed to open URL with profile '{profile_name}': {e}");
+        println!("Failed to open URL with profile '{profile_id}': {e}");
        format!("Failed to open URL with profile: {e}")
      })?;

-    println!("Successfully opened URL '{url}' with profile '{profile_name}'");
+    println!("Successfully opened URL '{url}' with profile '{profile_id}'");
    Ok(())
  }
 }
@@ -574,11 +574,11 @@ pub async fn set_as_default_browser() -> Result<(), String> {
 #[tauri::command]
 pub async fn open_url_with_profile(
  app_handle: tauri::AppHandle,
-  profile_name: String,
+  profile_id: String,
  url: String,
 ) -> Result<(), String> {
  let default_browser = DefaultBrowser::instance();
  default_browser
-    .open_url_with_profile(app_handle, profile_name, url)
+    .open_url_with_profile(app_handle, profile_id, url)
    .await
 }
@@ -229,11 +229,15 @@ impl DownloadedBrowsersRegistry {
      }
    }

-    // Remove unused binaries
+    // Remove unused binaries and their version folders
    for (browser, version) in to_remove {
      if let Err(e) = self.cleanup_failed_download(&browser, &version) {
        eprintln!("Failed to cleanup unused binary {browser}:{version}: {e}");
      } else {
+        // After removing the binary, also remove the empty version folder
+        if let Err(e) = self.remove_empty_version_folder(&browser, &version) {
+          eprintln!("Failed to remove empty version folder for {browser}:{version}: {e}");
+        }
        cleaned_up.push(format!("{browser} {version}"));
        println!("Successfully removed unused binary: {browser} {version}");
      }
@@ -403,10 +407,14 @@ impl DownloadedBrowsersRegistry {
    let regular_cleanup = self.cleanup_unused_binaries(active_profiles, running_profiles)?;
    cleanup_results.extend(regular_cleanup);

-    // Finally, verify and cleanup stale entries
+    // Verify and cleanup stale entries
    let stale_cleanup = self.verify_and_cleanup_stale_entries_simple(binaries_dir)?;
    cleanup_results.extend(stale_cleanup);

+    // Clean up any remaining empty folders
+    let empty_folder_cleanup = self.cleanup_empty_folders(binaries_dir)?;
+    cleanup_results.extend(empty_folder_cleanup);
+
    if !cleanup_results.is_empty() {
      self.save()?;
    }
@@ -414,6 +422,152 @@ impl DownloadedBrowsersRegistry {
    Ok(cleanup_results)
  }

+  /// Remove empty version folder after cleanup
+  fn remove_empty_version_folder(
+    &self,
+    browser: &str,
+    version: &str,
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    // Get binaries directory path
+    let base_dirs = directories::BaseDirs::new().ok_or("Failed to get base directories")?;
+    let mut binaries_dir = base_dirs.data_local_dir().to_path_buf();
+    binaries_dir.push(if cfg!(debug_assertions) {
+      "DonutBrowserDev"
+    } else {
+      "DonutBrowser"
+    });
+    binaries_dir.push("binaries");
+
+    let version_dir = binaries_dir.join(browser).join(version);
+
+    // Only remove if the directory exists and is empty
+    if version_dir.exists() && version_dir.is_dir() {
+      if let Ok(mut entries) = fs::read_dir(&version_dir) {
+        if entries.next().is_none() {
+          // Directory is empty, remove it
+          fs::remove_dir(&version_dir)?;
+          println!("Removed empty version folder: {}", version_dir.display());
+
+          // Also check if the browser folder is now empty and remove it too
+          let browser_dir = binaries_dir.join(browser);
+          if browser_dir.exists() && browser_dir.is_dir() {
+            if let Ok(mut browser_entries) = fs::read_dir(&browser_dir) {
+              if browser_entries.next().is_none() {
+                fs::remove_dir(&browser_dir)?;
+                println!("Removed empty browser folder: {}", browser_dir.display());
+              }
+            }
+          }
+        }
+      }
+    }
+
+    Ok(())
+  }
+
+  /// Clean up existing empty version and browser folders
+  pub fn cleanup_empty_folders(
+    &self,
+    binaries_dir: &std::path::Path,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    let mut cleaned_up = Vec::new();
+
+    if !binaries_dir.exists() {
+      return Ok(cleaned_up);
+    }
+
+    // Scan for browser directories
+    for browser_entry in fs::read_dir(binaries_dir)? {
+      let browser_entry = browser_entry?;
+      let browser_path = browser_entry.path();
+
+      if !browser_path.is_dir() {
+        continue;
+      }
+
+      let browser_name = browser_path
+        .file_name()
+        .and_then(|n| n.to_str())
+        .unwrap_or("");
+
+      if browser_name.is_empty() || browser_name.starts_with('.') {
+        continue;
+      }
+
+      let mut empty_version_dirs = Vec::new();
+      let mut has_non_empty_versions = false;
+
+      // Scan for version directories within this browser
+      for version_entry in fs::read_dir(&browser_path)? {
+        let version_entry = version_entry?;
+        let version_path = version_entry.path();
+
+        if !version_path.is_dir() {
+          has_non_empty_versions = true; // Non-directory files count as non-empty
+          continue;
+        }
+
+        let version_name = version_path
+          .file_name()
+          .and_then(|n| n.to_str())
+          .unwrap_or("");
+
+        if version_name.is_empty() || version_name.starts_with('.') {
+          continue;
+        }
+
+        // Check if version directory is empty
+        match fs::read_dir(&version_path) {
+          Ok(mut entries) => {
+            if entries.next().is_none() {
+              // Directory is empty
+              empty_version_dirs.push((version_path.clone(), version_name.to_string()));
+            } else {
+              has_non_empty_versions = true;
+            }
+          }
+          Err(_) => {
+            has_non_empty_versions = true; // Assume non-empty if we can't read
+          }
+        }
+      }
+
+      // Remove empty version directories
+      for (version_path, version_name) in empty_version_dirs {
+        if let Err(e) = fs::remove_dir(&version_path) {
+          eprintln!(
+            "Failed to remove empty version folder {}: {e}",
+            version_path.display()
+          );
+        } else {
+          cleaned_up.push(format!(
+            "Removed empty version folder: {browser_name}/{version_name}"
+          ));
+          println!("Removed empty version folder: {}", version_path.display());
+        }
+      }
+
+      // If browser directory is now empty, remove it too
+      if !has_non_empty_versions {
+        if let Ok(mut entries) = fs::read_dir(&browser_path) {
+          if entries.next().is_none() {
+            if let Err(e) = fs::remove_dir(&browser_path) {
+              eprintln!(
+                "Failed to remove empty browser folder {}: {e}",
+                browser_path.display()
+              );
+            } else {
+              cleaned_up.push(format!("Removed empty browser folder: {browser_name}"));
+              println!("Removed empty browser folder: {}", browser_path.display());
+            }
+          }
+        }
+      }
+    }
+
+    Ok(cleaned_up)
+  }
+
  /// Simplified version of verify_and_cleanup_stale_entries that doesn't need BrowserRunner
  pub fn verify_and_cleanup_stale_entries_simple(
    &self,
@@ -4,6 +4,7 @@ use std::collections::HashMap;
 use std::fs;
 use std::path::{Path, PathBuf};
 use std::sync::Mutex;
+use tauri::Emitter;

 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ProfileGroup {
@@ -97,7 +98,11 @@ impl GroupManager {
    Ok(groups_data.groups)
  }

-  pub fn create_group(&self, name: String) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
+  pub fn create_group(
+    &self,
+    app_handle: &tauri::AppHandle,
+    name: String,
+  ) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
    let mut groups_data = self.load_groups_data()?;

    // Check if group with this name already exists
@@ -113,11 +118,17 @@ impl GroupManager {
    groups_data.groups.push(group.clone());
    self.save_groups_data(&groups_data)?;

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("groups-changed", ()) {
+      eprintln!("Failed to emit groups-changed event: {e}");
+    }
+
    Ok(group)
  }

  pub fn update_group(
    &self,
+    app_handle: &tauri::AppHandle,
    id: String,
    name: String,
  ) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
@@ -142,10 +153,20 @@ impl GroupManager {
    let updated_group = group.clone();

    self.save_groups_data(&groups_data)?;
+
+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("groups-changed", ()) {
+      eprintln!("Failed to emit groups-changed event: {e}");
+    }
+
    Ok(updated_group)
  }

-  pub fn delete_group(&self, id: String) -> Result<(), Box<dyn std::error::Error>> {
+  pub fn delete_group(
+    &self,
+    app_handle: &tauri::AppHandle,
+    id: String,
+  ) -> Result<(), Box<dyn std::error::Error>> {
    let mut groups_data = self.load_groups_data()?;

    let initial_len = groups_data.groups.len();
@@ -156,6 +177,12 @@ impl GroupManager {
    }

    self.save_groups_data(&groups_data)?;
+
+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("groups-changed", ()) {
+      eprintln!("Failed to emit groups-changed event: {e}");
+    }
+
    Ok(())
  }

@@ -203,270 +230,6 @@ lazy_static::lazy_static! {
  pub static ref GROUP_MANAGER: Mutex<GroupManager> = Mutex::new(GroupManager::new());
 }

-#[cfg(test)]
-mod tests {
-  use super::*;
-  use std::env;
-  use tempfile::TempDir;
-
-  fn create_test_group_manager() -> (GroupManager, TempDir) {
-    let temp_dir = TempDir::new().expect("Failed to create temp directory");
-
-    // Set up a temporary home directory for testing
-    env::set_var("HOME", temp_dir.path());
-
-    // Use per-test isolated data directory without relying on global env vars
-    let data_override = temp_dir.path().join("donutbrowser_test_data");
-    let manager = GroupManager::with_data_dir_override(&data_override);
-    (manager, temp_dir)
-  }
-
-  #[test]
-  fn test_group_manager_creation() {
-    let (_manager, _temp_dir) = create_test_group_manager();
-    // Test passes if no panic occurs
-  }
-
-  #[test]
-  fn test_create_and_get_groups() {
-    let (manager, _temp_dir) = create_test_group_manager();
-
-    // Initially should have no groups
-    let groups = manager
-      .get_all_groups()
-      .expect("Should be able to get groups");
-    assert!(groups.is_empty(), "Should start with no groups");
-
-    // Create a group
-    let group_name = "Test Group".to_string();
-    let created_group = manager
-      .create_group(group_name.clone())
-      .expect("Should create group successfully");
-
-    assert_eq!(
-      created_group.name, group_name,
-      "Created group should have correct name"
-    );
-    assert!(
-      !created_group.id.is_empty(),
-      "Created group should have an ID"
-    );
-
-    // Verify group was saved
-    let groups = manager
-      .get_all_groups()
-      .expect("Should be able to get groups");
-    assert_eq!(groups.len(), 1, "Should have one group");
-    assert_eq!(
-      groups[0].name, group_name,
-      "Retrieved group should have correct name"
-    );
-    assert_eq!(
-      groups[0].id, created_group.id,
-      "Retrieved group should have correct ID"
-    );
-  }
-
-  #[test]
-  fn test_create_duplicate_group_fails() {
-    let (manager, _temp_dir) = create_test_group_manager();
-
-    let group_name = "Duplicate Group".to_string();
-
-    // Create first group
-    let _first_group = manager
-      .create_group(group_name.clone())
-      .expect("Should create first group");
-
-    // Try to create duplicate group
-    let result = manager.create_group(group_name.clone());
-    assert!(result.is_err(), "Should fail to create duplicate group");
-
-    let error_msg = result.unwrap_err().to_string();
-    assert!(
-      error_msg.contains("already exists"),
-      "Error should mention group already exists"
-    );
-  }
-
-  #[test]
-  fn test_update_group() {
-    let (manager, _temp_dir) = create_test_group_manager();
-
-    // Create a group
-    let original_name = "Original Name".to_string();
-    let created_group = manager
-      .create_group(original_name)
-      .expect("Should create group");
-
-    // Update the group
-    let new_name = "Updated Name".to_string();
-    let updated_group = manager
-      .update_group(created_group.id.clone(), new_name.clone())
-      .expect("Should update group successfully");
-
-    assert_eq!(
-      updated_group.name, new_name,
-      "Updated group should have new name"
-    );
-    assert_eq!(
-      updated_group.id, created_group.id,
-      "Updated group should keep same ID"
-    );
-
-    // Verify update was persisted
-    let groups = manager.get_all_groups().expect("Should get groups");
-    assert_eq!(groups.len(), 1, "Should still have one group");
-    assert_eq!(
-      groups[0].name, new_name,
-      "Persisted group should have updated name"
-    );
-  }
-
-  #[test]
-  fn test_update_nonexistent_group_fails() {
-    let (manager, _temp_dir) = create_test_group_manager();
-
-    let result = manager.update_group("nonexistent-id".to_string(), "New Name".to_string());
-    assert!(result.is_err(), "Should fail to update nonexistent group");
-
-    let error_msg = result.unwrap_err().to_string();
-    assert!(
-      error_msg.contains("not found"),
-      "Error should mention group not found"
-    );
-  }
-
-  #[test]
-  fn test_delete_group() {
-    let (manager, _temp_dir) = create_test_group_manager();
-
-    // Create a group
-    let group_name = "To Delete".to_string();
-    let created_group = manager
-      .create_group(group_name)
-      .expect("Should create group");
-
-    // Verify group exists
-    let groups = manager.get_all_groups().expect("Should get groups");
-    assert_eq!(groups.len(), 1, "Should have one group");
-
-    // Delete the group
-    manager
-      .delete_group(created_group.id)
-      .expect("Should delete group successfully");
-
-    // Verify group was deleted
-    let groups = manager.get_all_groups().expect("Should get groups");
-    assert!(groups.is_empty(), "Should have no groups after deletion");
-  }
-
-  #[test]
-  fn test_delete_nonexistent_group_fails() {
-    let (manager, _temp_dir) = create_test_group_manager();
-
-    let result = manager.delete_group("nonexistent-id".to_string());
-    assert!(result.is_err(), "Should fail to delete nonexistent group");
-
-    let error_msg = result.unwrap_err().to_string();
-    assert!(
-      error_msg.contains("not found"),
-      "Error should mention group not found"
-    );
-  }
-
-  #[test]
-  fn test_get_groups_with_profile_counts() {
-    let (manager, _temp_dir) = create_test_group_manager();
-
-    // Create test groups
-    let group1 = manager
-      .create_group("Group 1".to_string())
-      .expect("Should create group 1");
-    let _group2 = manager
-      .create_group("Group 2".to_string())
-      .expect("Should create group 2");
-
-    // Create mock profiles
-    let profiles = vec![
-      crate::profile::BrowserProfile {
-        id: uuid::Uuid::new_v4(),
-        name: "Profile 1".to_string(),
-        browser: "firefox".to_string(),
-        version: "1.0".to_string(),
-        proxy_id: None,
-        process_id: None,
-        last_launch: None,
-        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(),
-        name: "Profile 2".to_string(),
-        browser: "firefox".to_string(),
-        version: "1.0".to_string(),
-        proxy_id: None,
-        process_id: None,
-        last_launch: None,
-        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(),
-        name: "Profile 3".to_string(),
-        browser: "firefox".to_string(),
-        version: "1.0".to_string(),
-        proxy_id: None,
-        process_id: None,
-        last_launch: None,
-        release_type: "stable".to_string(),
-        camoufox_config: None,
-        group_id: None, // Default group
-        tags: Vec::new(),
-      },
-    ];
-
-    let groups_with_counts = manager
-      .get_groups_with_profile_counts(&profiles)
-      .expect("Should get groups with counts");
-
-    // Should have default group + group1 + group2 (group2 has 0 profiles but should still appear)
-    assert_eq!(
-      groups_with_counts.len(),
-      3,
-      "Should include all groups, even those with 0 profiles"
-    );
-
-    // Check default group
-    let default_group = groups_with_counts
-      .iter()
-      .find(|g| g.id == "default")
-      .expect("Should have default group");
-    assert_eq!(
-      default_group.count, 1,
-      "Default group should have 1 profile"
-    );
-
-    // Check group1
-    let group1_with_count = groups_with_counts
-      .iter()
-      .find(|g| g.id == group1.id)
-      .expect("Should have group1");
-    assert_eq!(group1_with_count.count, 2, "Group1 should have 2 profiles");
-
-    // Check that group2 exists with 0 profiles
-    let group2_with_count = groups_with_counts
-      .iter()
-      .find(|g| g.name == "Group 2")
-      .expect("Should have group2 present even with 0 profiles");
-    assert_eq!(group2_with_count.count, 0, "Group2 should have 0 profiles");
-  }
-}
-
 // Helper function to get groups with counts
 pub fn get_groups_with_counts(profiles: &[crate::profile::BrowserProfile]) -> Vec<GroupWithCount> {
  let group_manager = GROUP_MANAGER.lock().unwrap();
@@ -494,44 +257,58 @@ pub async fn get_groups_with_profile_counts() -> Result<Vec<GroupWithCount>, Str
 }

 #[tauri::command]
-pub async fn create_profile_group(name: String) -> Result<ProfileGroup, String> {
+pub async fn create_profile_group(
+  app_handle: tauri::AppHandle,
+  name: String,
+) -> Result<ProfileGroup, String> {
  let group_manager = GROUP_MANAGER.lock().unwrap();
  group_manager
-    .create_group(name)
+    .create_group(&app_handle, name)
    .map_err(|e| format!("Failed to create group: {e}"))
 }

 #[tauri::command]
-pub async fn update_profile_group(group_id: String, name: String) -> Result<ProfileGroup, String> {
+pub async fn update_profile_group(
+  app_handle: tauri::AppHandle,
+  group_id: String,
+  name: String,
+) -> Result<ProfileGroup, String> {
  let group_manager = GROUP_MANAGER.lock().unwrap();
  group_manager
-    .update_group(group_id, name)
+    .update_group(&app_handle, group_id, name)
    .map_err(|e| format!("Failed to update group: {e}"))
 }

 #[tauri::command]
-pub async fn delete_profile_group(group_id: String) -> Result<(), String> {
+pub async fn delete_profile_group(
+  app_handle: tauri::AppHandle,
+  group_id: String,
+) -> Result<(), String> {
  let group_manager = GROUP_MANAGER.lock().unwrap();
  group_manager
-    .delete_group(group_id)
+    .delete_group(&app_handle, group_id)
    .map_err(|e| format!("Failed to delete group: {e}"))
 }

 #[tauri::command]
 pub async fn assign_profiles_to_group(
-  profile_names: Vec<String>,
+  app_handle: tauri::AppHandle,
+  profile_ids: Vec<String>,
  group_id: Option<String>,
 ) -> Result<(), String> {
  let profile_manager = crate::profile::ProfileManager::instance();
  profile_manager
-    .assign_profiles_to_group(profile_names, group_id)
+    .assign_profiles_to_group(&app_handle, profile_ids, group_id)
    .map_err(|e| format!("Failed to assign profiles to group: {e}"))
 }

 #[tauri::command]
-pub async fn delete_selected_profiles(profile_names: Vec<String>) -> Result<(), String> {
+pub async fn delete_selected_profiles(
+  app_handle: tauri::AppHandle,
+  profile_ids: Vec<String>,
+) -> Result<(), String> {
  let profile_manager = crate::profile::ProfileManager::instance();
  profile_manager
-    .delete_multiple_profiles(profile_names)
+    .delete_multiple_profiles(&app_handle, profile_ids)
    .map_err(|e| format!("Failed to delete profiles: {e}"))
 }
@@ -174,11 +174,12 @@ async fn handle_url_open(app: tauri::AppHandle, url: String) -> Result<(), Strin

 #[tauri::command]
 async fn create_stored_proxy(
+  app_handle: tauri::AppHandle,
  name: String,
  proxy_settings: crate::browser::ProxySettings,
 ) -> Result<crate::proxy_manager::StoredProxy, String> {
  crate::proxy_manager::PROXY_MANAGER
-    .create_stored_proxy(name, proxy_settings)
+    .create_stored_proxy(&app_handle, name, proxy_settings)
    .map_err(|e| format!("Failed to create stored proxy: {e}"))
 }

@@ -189,19 +190,20 @@ async fn get_stored_proxies() -> Result<Vec<crate::proxy_manager::StoredProxy>,

 #[tauri::command]
 async fn update_stored_proxy(
+  app_handle: tauri::AppHandle,
  proxy_id: String,
  name: Option<String>,
  proxy_settings: Option<crate::browser::ProxySettings>,
 ) -> Result<crate::proxy_manager::StoredProxy, String> {
  crate::proxy_manager::PROXY_MANAGER
-    .update_stored_proxy(&proxy_id, name, proxy_settings)
+    .update_stored_proxy(&app_handle, &proxy_id, name, proxy_settings)
    .map_err(|e| format!("Failed to update stored proxy: {e}"))
 }

 #[tauri::command]
-async fn delete_stored_proxy(proxy_id: String) -> Result<(), String> {
+async fn delete_stored_proxy(app_handle: tauri::AppHandle, proxy_id: String) -> Result<(), String> {
  crate::proxy_manager::PROXY_MANAGER
-    .delete_stored_proxy(&proxy_id)
+    .delete_stored_proxy(&app_handle, &proxy_id)
    .map_err(|e| format!("Failed to delete stored proxy: {e}"))
 }

@@ -571,7 +573,7 @@ pub fn run() {
      // Start API server if enabled in settings
      let app_handle_api = app.handle().clone();
      tauri::async_runtime::spawn(async move {
-        match crate::settings_manager::get_app_settings().await {
+        match crate::settings_manager::get_app_settings(app_handle_api.clone()).await {
          Ok(settings) => {
            if settings.api_enabled {
              println!("API is enabled in settings, starting API server...");
@@ -218,6 +218,11 @@ impl ProfileManager {
      self.disable_proxy_settings_in_profile(&profile_data_dir)?;
    }

+    // Emit profile creation event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(profile)
  }

@@ -262,7 +267,8 @@ impl ProfileManager {

  pub fn rename_profile(
    &self,
-    old_name: &str,
+    app_handle: &tauri::AppHandle,
+    profile_id: &str,
    new_name: &str,
  ) -> Result<BrowserProfile, Box<dyn std::error::Error>> {
    // Check if new name already exists (case insensitive)
@@ -274,11 +280,13 @@ impl ProfileManager {
      return Err(format!("Profile with name '{new_name}' already exists").into());
    }

-    // Find the profile by old name
+    // Find the profile by ID
+    let profile_uuid =
+      uuid::Uuid::parse_str(profile_id).map_err(|_| format!("Invalid profile ID: {profile_id}"))?;
    let mut profile = existing_profiles
      .into_iter()
-      .find(|p| p.name == old_name)
-      .ok_or_else(|| format!("Profile '{old_name}' not found"))?;
+      .find(|p| p.id == profile_uuid)
+      .ok_or_else(|| format!("Profile with ID '{profile_id}' not found"))?;

    // Update profile name (no need to move directories since we use UUID)
    profile.name = new_name.to_string();
@@ -291,18 +299,29 @@ impl ProfileManager {
      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
    });

+    // Emit profile rename event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(profile)
  }

-  pub fn delete_profile(&self, profile_name: &str) -> Result<(), Box<dyn std::error::Error>> {
-    println!("Attempting to delete profile: {profile_name}");
+  pub fn delete_profile(
+    &self,
+    app_handle: &tauri::AppHandle,
+    profile_id: &str,
+  ) -> Result<(), Box<dyn std::error::Error>> {
+    println!("Attempting to delete profile with ID: {profile_id}");

-    // Find the profile by name
+    // Find the profile by ID
+    let profile_uuid =
+      uuid::Uuid::parse_str(profile_id).map_err(|_| format!("Invalid profile ID: {profile_id}"))?;
    let profiles = self.list_profiles()?;
    let profile = profiles
      .into_iter()
-      .find(|p| p.name == profile_name)
-      .ok_or_else(|| format!("Profile '{profile_name}' not found"))?;
+      .find(|p| p.id == profile_uuid)
+      .ok_or_else(|| format!("Profile with ID '{profile_id}' not found"))?;

    // Check if browser is running
    if profile.process_id.is_some() {
@@ -323,30 +342,41 @@ impl ProfileManager {

    // Verify deletion was successful
    if profile_uuid_dir.exists() {
-      return Err(format!("Failed to completely delete profile '{profile_name}'").into());
+      return Err(format!("Failed to completely delete profile '{}'", profile.name).into());
    }

-    println!("Profile '{profile_name}' deleted successfully");
+    println!(
+      "Profile '{}' (ID: {}) deleted successfully",
+      profile.name, profile_id
+    );

    // 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());
    });

+    // Emit profile deletion event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(())
  }

  pub fn update_profile_version(
    &self,
-    profile_name: &str,
+    app_handle: &tauri::AppHandle,
+    profile_id: &str,
    version: &str,
  ) -> Result<BrowserProfile, Box<dyn std::error::Error>> {
-    // Find the profile by name
+    // Find the profile by ID
+    let profile_uuid =
+      uuid::Uuid::parse_str(profile_id).map_err(|_| format!("Invalid profile ID: {profile_id}"))?;
    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"))?;
+      .find(|p| p.id == profile_uuid)
+      .ok_or_else(|| format!("Profile with ID '{profile_id}' not found"))?;

    // Check if the browser is currently running
    if profile.process_id.is_some() {
@@ -379,27 +409,35 @@ impl ProfileManager {
    // Save the updated profile
    self.save_profile(&profile)?;

+    // Emit profile update event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(profile)
  }

  pub fn assign_profiles_to_group(
    &self,
-    profile_names: Vec<String>,
+    app_handle: &tauri::AppHandle,
+    profile_ids: Vec<String>,
    group_id: Option<String>,
  ) -> Result<(), Box<dyn std::error::Error>> {
    let profiles = self.list_profiles()?;

-    for profile_name in profile_names {
+    for profile_id in profile_ids {
+      let profile_uuid = uuid::Uuid::parse_str(&profile_id)
+        .map_err(|_| format!("Invalid profile ID: {profile_id}"))?;
      let mut profile = profiles
        .iter()
-        .find(|p| p.name == profile_name)
-        .ok_or_else(|| format!("Profile '{profile_name}' not found"))?
+        .find(|p| p.id == profile_uuid)
+        .ok_or_else(|| format!("Profile with ID '{profile_id}' not found"))?
        .clone();

      // Check if browser is running
      if profile.process_id.is_some() {
        return Err(format!(
-          "Cannot modify group for profile '{profile_name}' while browser is running. Please stop the browser first."
+          "Cannot modify group for profile '{}' while browser is running. Please stop the browser first.", profile.name
        ).into());
      }

@@ -412,20 +450,28 @@ impl ProfileManager {
      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
    });

+    // Emit profile group assignment event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(())
  }

  pub fn update_profile_tags(
    &self,
-    profile_name: &str,
+    app_handle: &tauri::AppHandle,
+    profile_id: &str,
    tags: Vec<String>,
  ) -> Result<BrowserProfile, Box<dyn std::error::Error>> {
-    // Find the profile by name
+    // Find the profile by ID
+    let profile_uuid =
+      uuid::Uuid::parse_str(profile_id).map_err(|_| format!("Invalid profile ID: {profile_id}"))?;
    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"))?;
+      .find(|p| p.id == profile_uuid)
+      .ok_or_else(|| format!("Profile with ID '{profile_id}' not found"))?;

    let mut seen = std::collections::HashSet::new();
    let mut deduped: Vec<String> = Vec::with_capacity(tags.len());
@@ -444,26 +490,35 @@ impl ProfileManager {
      let _ = tm.rebuild_from_profiles(&self.list_profiles().unwrap_or_default());
    });

+    // Emit profile tags update event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(profile)
  }

  pub fn delete_multiple_profiles(
    &self,
-    profile_names: Vec<String>,
+    app_handle: &tauri::AppHandle,
+    profile_ids: Vec<String>,
  ) -> Result<(), Box<dyn std::error::Error>> {
    let profiles = self.list_profiles()?;

-    for profile_name in profile_names {
+    for profile_id in profile_ids {
+      let profile_uuid = uuid::Uuid::parse_str(&profile_id)
+        .map_err(|_| format!("Invalid profile ID: {profile_id}"))?;
      let profile = profiles
        .iter()
-        .find(|p| p.name == profile_name)
-        .ok_or_else(|| format!("Profile '{profile_name}' not found"))?;
+        .find(|p| p.id == profile_uuid)
+        .ok_or_else(|| format!("Profile with ID '{profile_id}' not found"))?;

      // Check if browser is running
      if profile.process_id.is_some() {
        return Err(
          format!(
-            "Cannot delete profile '{profile_name}' while browser is running. Please stop the browser first."
+            "Cannot delete profile '{}' while browser is running. Please stop the browser first.",
+            profile.name
          )
          .into(),
        );
@@ -478,16 +533,26 @@ impl ProfileManager {
      }
    }

+    // Emit profile deletion event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(())
  }

  pub async fn update_camoufox_config(
    &self,
    app_handle: tauri::AppHandle,
-    profile_name: &str,
+    profile_id: &str,
    config: CamoufoxConfig,
  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
-    // Find the profile by name
+    // Find the profile by ID
+    let profile_uuid = uuid::Uuid::parse_str(profile_id).map_err(
+      |_| -> Box<dyn std::error::Error + Send + Sync> {
+        format!("Invalid profile ID: {profile_id}").into()
+      },
+    )?;
    let profiles =
      self
        .list_profiles()
@@ -496,13 +561,15 @@ impl ProfileManager {
        })?;
    let mut profile = profiles
      .into_iter()
-      .find(|p| p.name == profile_name)
+      .find(|p| p.id == profile_uuid)
      .ok_or_else(|| -> Box<dyn std::error::Error + Send + Sync> {
-        format!("Profile {profile_name} not found").into()
+        format!("Profile with ID '{profile_id}' not found").into()
      })?;

    // Check if the browser is currently running using the comprehensive status check
-    let is_running = self.check_browser_status(app_handle, &profile).await?;
+    let is_running = self
+      .check_browser_status(app_handle.clone(), &profile)
+      .await?;

    if is_running {
      return Err(
@@ -520,7 +587,15 @@ impl ProfileManager {
        format!("Failed to save profile: {e}").into()
      })?;

-    println!("Camoufox configuration updated for profile '{profile_name}'.");
+    println!(
+      "Camoufox configuration updated for profile '{}' (ID: {}).",
+      profile.name, profile_id
+    );
+
+    // Emit profile config update event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }

    Ok(())
  }
@@ -528,10 +603,15 @@ impl ProfileManager {
  pub async fn update_profile_proxy(
    &self,
    app_handle: tauri::AppHandle,
-    profile_name: &str,
+    profile_id: &str,
    proxy_id: Option<String>,
  ) -> Result<BrowserProfile, Box<dyn std::error::Error + Send + Sync>> {
-    // Find the profile by name
+    // Find the profile by ID
+    let profile_uuid = uuid::Uuid::parse_str(profile_id).map_err(
+      |_| -> Box<dyn std::error::Error + Send + Sync> {
+        format!("Invalid profile ID: {profile_id}").into()
+      },
+    )?;
    let profiles =
      self
        .list_profiles()
@@ -541,9 +621,9 @@ impl ProfileManager {

    let mut profile = profiles
      .into_iter()
-      .find(|p| p.name == profile_name)
+      .find(|p| p.id == profile_uuid)
      .ok_or_else(|| -> Box<dyn std::error::Error + Send + Sync> {
-        format!("Profile {profile_name} not found").into()
+        format!("Profile with ID '{profile_id}' not found").into()
      })?;

    // Update proxy settings
@@ -592,6 +672,11 @@ impl ProfileManager {
      println!("Warning: Failed to emit profile update event: {e}");
    }

+    // Emit general profiles changed event for profile list updates
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      println!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
    Ok(profile)
  }

@@ -5,6 +5,7 @@ use std::collections::HashMap;
 use std::fs;
 use std::path::PathBuf;
 use std::sync::Mutex;
+use tauri::Emitter;
 use tauri_plugin_shell::ShellExt;

 use crate::browser::ProxySettings;
@@ -146,6 +147,7 @@ impl ProxyManager {
  // Create a new stored proxy
  pub fn create_stored_proxy(
    &self,
+    app_handle: &tauri::AppHandle,
    name: String,
    proxy_settings: ProxySettings,
  ) -> Result<StoredProxy, String> {
@@ -168,13 +170,21 @@ impl ProxyManager {
      eprintln!("Warning: Failed to save proxy: {e}");
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(stored_proxy)
  }

  // Get all stored proxies
  pub fn get_stored_proxies(&self) -> Vec<StoredProxy> {
    let stored_proxies = self.stored_proxies.lock().unwrap();
-    stored_proxies.values().cloned().collect()
+    let mut list: Vec<StoredProxy> = stored_proxies.values().cloned().collect();
+    // Sort case-insensitively by name for consistent ordering across UI/API consumers
+    list.sort_by_key(|p| p.name.to_lowercase());
+    list
  }

  // Get a stored proxy by ID
@@ -182,6 +192,7 @@ impl ProxyManager {
  // Update a stored proxy
  pub fn update_stored_proxy(
    &self,
+    app_handle: &tauri::AppHandle,
    proxy_id: &str,
    name: Option<String>,
    proxy_settings: Option<ProxySettings>,
@@ -226,11 +237,20 @@ impl ProxyManager {
      eprintln!("Warning: Failed to save proxy: {e}");
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(updated_proxy)
  }

  // Delete a stored proxy
-  pub fn delete_stored_proxy(&self, proxy_id: &str) -> Result<(), String> {
+  pub fn delete_stored_proxy(
+    &self,
+    app_handle: &tauri::AppHandle,
+    proxy_id: &str,
+  ) -> Result<(), String> {
    {
      let mut stored_proxies = self.stored_proxies.lock().unwrap();
      if stored_proxies.remove(proxy_id).is_none() {
@@ -242,6 +262,11 @@ impl ProxyManager {
      eprintln!("Warning: Failed to delete proxy file: {e}");
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(())
  }

@@ -514,6 +539,11 @@ impl ProxyManager {
      }
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(())
  }

@@ -554,6 +584,11 @@ impl ProxyManager {
      let _ = self.stop_proxy(app_handle.clone(), *dead_pid).await;
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(dead_pids)
  }
 }
@@ -6,6 +6,12 @@ use std::path::PathBuf;
 use crate::api_client::ApiClient;
 use crate::version_updater;

+use aes_gcm::{
+  aead::{Aead, AeadCore, KeyInit, OsRng},
+  Aes256Gcm, Key, Nonce,
+};
+use argon2::{password_hash::SaltString, Argon2, PasswordHasher};
+
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct TableSortingSettings {
  pub column: String,    // Column to sort by: "name", "browser", "status"
@@ -33,6 +39,8 @@ pub struct AppSettings {
  pub api_enabled: bool,
  #[serde(default = "default_api_port")]
  pub api_port: u16,
+  #[serde(default)]
+  pub api_token: Option<String>, // Displayed token for user to copy
 }

 fn default_theme() -> String {
@@ -51,6 +59,7 @@ impl Default for AppSettings {
      custom_theme: None,
      api_enabled: false,
      api_port: 10108,
+      api_token: None,
    }
  }
 }
@@ -164,22 +173,249 @@ impl SettingsManager {
    // Always return false - we don't show settings on startup anymore
    Ok(false)
  }
+
+  fn get_vault_password() -> String {
+    env!("DONUT_BROWSER_VAULT_PASSWORD").to_string()
+  }
+
+  pub async fn generate_api_token(
+    &self,
+    app_handle: &tauri::AppHandle,
+  ) -> Result<String, Box<dyn std::error::Error>> {
+    // Generate a secure random token (base64 encoded for URL safety)
+    let token_bytes: [u8; 32] = {
+      use rand::RngCore;
+      let mut rng = rand::rng();
+      let mut bytes = [0u8; 32];
+      rng.fill_bytes(&mut bytes);
+      bytes
+    };
+    use base64::{engine::general_purpose, Engine as _};
+    let token = general_purpose::URL_SAFE_NO_PAD.encode(token_bytes);
+
+    // Store token securely
+    self.store_api_token(app_handle, &token).await?;
+
+    Ok(token)
+  }
+
+  pub async fn store_api_token(
+    &self,
+    _app_handle: &tauri::AppHandle,
+    token: &str,
+  ) -> Result<(), Box<dyn std::error::Error>> {
+    // Store token in an encrypted file using Argon2 + AES-GCM
+    let token_file = self.get_settings_dir().join("api_token.dat");
+
+    // Create directory if it doesn't exist
+    if let Some(parent) = token_file.parent() {
+      std::fs::create_dir_all(parent)?;
+    }
+
+    let vault_password = Self::get_vault_password();
+
+    // Generate a random salt for Argon2
+    let salt = SaltString::generate(&mut OsRng);
+
+    // Use Argon2 to derive a 32-byte key from the vault password
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+      .hash_password(vault_password.as_bytes(), &salt)
+      .map_err(|e| format!("Argon2 key derivation failed: {e}"))?;
+    let hash_value = password_hash.hash.unwrap();
+    let hash_bytes = hash_value.as_bytes();
+
+    // Take first 32 bytes for AES-256 key
+    let key = Key::<Aes256Gcm>::from_slice(&hash_bytes[..32]);
+    let cipher = Aes256Gcm::new(key);
+
+    // Generate a random nonce
+    let nonce = Aes256Gcm::generate_nonce(&mut OsRng);
+
+    // Encrypt the token
+    let ciphertext = cipher
+      .encrypt(&nonce, token.as_bytes())
+      .map_err(|e| format!("Encryption failed: {e}"))?;
+
+    // Create file data with header, salt, nonce, and encrypted data
+    let mut file_data = Vec::new();
+    file_data.extend_from_slice(b"DBAPI"); // 5-byte header
+    file_data.push(2u8); // Version 2 (Argon2 + AES-GCM)
+
+    // Store salt length and salt
+    let salt_str = salt.as_str();
+    file_data.push(salt_str.len() as u8);
+    file_data.extend_from_slice(salt_str.as_bytes());
+
+    // Store nonce (12 bytes for AES-GCM)
+    file_data.extend_from_slice(&nonce);
+
+    // Store ciphertext length and ciphertext
+    file_data.extend_from_slice(&(ciphertext.len() as u32).to_le_bytes());
+    file_data.extend_from_slice(&ciphertext);
+
+    std::fs::write(token_file, file_data)?;
+    Ok(())
+  }
+
+  pub async fn get_api_token(
+    &self,
+    _app_handle: &tauri::AppHandle,
+  ) -> Result<Option<String>, Box<dyn std::error::Error>> {
+    let token_file = self.get_settings_dir().join("api_token.dat");
+
+    if !token_file.exists() {
+      return Ok(None);
+    }
+
+    let file_data = std::fs::read(token_file)?;
+
+    // Validate header
+    if file_data.len() < 6 || &file_data[0..5] != b"DBAPI" {
+      return Ok(None);
+    }
+
+    let version = file_data[5];
+
+    // Only support Argon2 + AES-GCM (version 2)
+    if version != 2 {
+      return Ok(None);
+    }
+
+    // Argon2 + AES-GCM decryption
+    let mut offset = 6;
+
+    // Read salt
+    if offset >= file_data.len() {
+      return Ok(None);
+    }
+    let salt_len = file_data[offset] as usize;
+    offset += 1;
+
+    if offset + salt_len > file_data.len() {
+      return Ok(None);
+    }
+    let salt_bytes = &file_data[offset..offset + salt_len];
+    let salt_str = std::str::from_utf8(salt_bytes).map_err(|_| "Invalid salt encoding")?;
+    let salt = SaltString::from_b64(salt_str).map_err(|_| "Invalid salt format")?;
+    offset += salt_len;
+
+    // Read nonce (12 bytes)
+    if offset + 12 > file_data.len() {
+      return Ok(None);
+    }
+    let nonce_bytes = &file_data[offset..offset + 12];
+    let nonce = Nonce::from_slice(nonce_bytes);
+    offset += 12;
+
+    // Read ciphertext
+    if offset + 4 > file_data.len() {
+      return Ok(None);
+    }
+    let ciphertext_len = u32::from_le_bytes([
+      file_data[offset],
+      file_data[offset + 1],
+      file_data[offset + 2],
+      file_data[offset + 3],
+    ]) as usize;
+    offset += 4;
+
+    if offset + ciphertext_len > file_data.len() {
+      return Ok(None);
+    }
+    let ciphertext = &file_data[offset..offset + ciphertext_len];
+
+    // Derive key using Argon2
+    let vault_password = Self::get_vault_password();
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+      .hash_password(vault_password.as_bytes(), &salt)
+      .map_err(|e| format!("Argon2 key derivation failed: {e}"))?;
+    let hash_value = password_hash.hash.unwrap();
+    let hash_bytes = hash_value.as_bytes();
+
+    let key = Key::<Aes256Gcm>::from_slice(&hash_bytes[..32]);
+    let cipher = Aes256Gcm::new(key);
+
+    // Decrypt the token
+    let plaintext = cipher
+      .decrypt(nonce, ciphertext)
+      .map_err(|_| "Decryption failed")?;
+
+    match String::from_utf8(plaintext) {
+      Ok(token) => Ok(Some(token)),
+      Err(_) => Ok(None),
+    }
+  }
+
+  pub async fn remove_api_token(
+    &self,
+    _app_handle: &tauri::AppHandle,
+  ) -> Result<(), Box<dyn std::error::Error>> {
+    let token_file = self.get_settings_dir().join("api_token.dat");
+
+    if token_file.exists() {
+      std::fs::remove_file(token_file)?;
+    }
+
+    Ok(())
+  }
 }

 #[tauri::command]
-pub async fn get_app_settings() -> Result<AppSettings, String> {
+pub async fn get_app_settings(app_handle: tauri::AppHandle) -> Result<AppSettings, String> {
  let manager = SettingsManager::instance();
-  manager
+  let mut settings = manager
    .load_settings()
-    .map_err(|e| format!("Failed to load settings: {e}"))
+    .map_err(|e| format!("Failed to load settings: {e}"))?;
+
+  // Always load token for display purposes if it exists
+  settings.api_token = manager
+    .get_api_token(&app_handle)
+    .await
+    .map_err(|e| format!("Failed to load API token: {e}"))?;
+
+  Ok(settings)
 }

 #[tauri::command]
-pub async fn save_app_settings(settings: AppSettings) -> Result<(), String> {
+pub async fn save_app_settings(
+  app_handle: tauri::AppHandle,
+  mut settings: AppSettings,
+) -> Result<AppSettings, String> {
  let manager = SettingsManager::instance();
+
+  if settings.api_enabled {
+    if let Some(ref token) = settings.api_token {
+      manager
+        .store_api_token(&app_handle, token)
+        .await
+        .map_err(|e| format!("Failed to store API token: {e}"))?;
+    } else {
+      let token = manager
+        .generate_api_token(&app_handle)
+        .await
+        .map_err(|e| format!("Failed to generate API token: {e}"))?;
+      settings.api_token = Some(token);
+    }
+  }
+
+  // If API is being disabled, remove the token
+  if !settings.api_enabled {
+    manager
+      .remove_api_token(&app_handle)
+      .await
+      .map_err(|e| format!("Failed to remove API token: {e}"))?;
+    settings.api_token = None;
+  }
+
+  let mut persist_settings = settings.clone();
+  persist_settings.api_token = None;
  manager
-    .save_settings(&settings)
-    .map_err(|e| format!("Failed to save settings: {e}"))
+    .save_settings(&persist_settings)
+    .map_err(|e| format!("Failed to save settings: {e}"))?;
+
+  Ok(settings)
 }

 #[tauri::command]
@@ -337,6 +573,7 @@ mod tests {
      custom_theme: None,
      api_enabled: false,
      api_port: 10108,
+      api_token: None,
    };

    // Save settings
@@ -25,6 +25,7 @@ impl TagManager {
    }
  }

+  // Helper for tests to override data directory without global env var
  #[allow(dead_code)]
  pub fn with_data_dir_override(dir: &Path) -> Self {
    Self {
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Donut Browser",
-  "version": "0.10.0",
+  "version": "0.11.0",
  "identifier": "com.donutbrowser",
  "build": {
    "beforeDevCommand": "pnpm dev",
@@ -18,12 +18,15 @@ import { ProfileSelectorDialog } from "@/components/profile-selector-dialog";
 import { ProxyManagementDialog } from "@/components/proxy-management-dialog";
 import { SettingsDialog } from "@/components/settings-dialog";
 import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications";
+import { useGroupEvents } from "@/hooks/use-group-events";
 import type { PermissionType } from "@/hooks/use-permissions";
 import { usePermissions } from "@/hooks/use-permissions";
+import { useProfileEvents } from "@/hooks/use-profile-events";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 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";
+import type { BrowserProfile, CamoufoxConfig } from "@/types";

 type BrowserTypeString =
  | "mullvad-browser"
@@ -44,8 +47,23 @@ 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);
+
+  // Use the new profile events hook for centralized profile management
+  const {
+    profiles,
+    runningProfiles,
+    isLoading: profilesLoading,
+    error: profilesError,
+  } = useProfileEvents();
+
+  const {
+    groups: groupsData,
+    isLoading: groupsLoading,
+    error: groupsError,
+  } = useGroupEvents();
+
+  const { isLoading: proxiesLoading, error: proxiesError } = useProxyEvents();
+
  const [createProfileDialogOpen, setCreateProfileDialogOpen] = useState(false);
  const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
  const [importProfileDialogOpen, setImportProfileDialogOpen] = useState(false);
@@ -67,8 +85,6 @@ export default function Home() {
    useState<BrowserProfile | null>(null);
  const [hasCheckedStartupPrompt, setHasCheckedStartupPrompt] = useState(false);
  const [permissionDialogOpen, setPermissionDialogOpen] = useState(false);
-  const [groups, setGroups] = useState<GroupWithCount[]>([]);
-  const [areGroupsLoading, setGroupsLoading] = useState(true);
  const [currentPermissionType, setCurrentPermissionType] =
    useState<PermissionType>("microphone");
  const [showBulkDeleteConfirmation, setShowBulkDeleteConfirmation] =
@@ -76,9 +92,7 @@ export default function Home() {
  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
  const { isMicrophoneAccessGranted, isCameraAccessGranted, isInitialized } =
    usePermissions();
-  const [runningProfiles, setRunningProfiles] = useState<Set<string>>(
-    new Set(),
-  );
+
  const handleSelectGroup = useCallback((groupId: string) => {
    setSelectedGroupId(groupId);
    setSelectedProfiles([]);
@@ -147,11 +161,6 @@ export default function Home() {
            "Failed to download missing components:",
            downloadError,
          );
-          setError(
-            `Failed to download missing components: ${JSON.stringify(
-              downloadError,
-            )}`,
-          );
        }
      }
    } catch (err: unknown) {
@@ -159,65 +168,6 @@ export default function Home() {
    }
  }, []);

-  // Function to check and sync profile running states with actual process status
-  const syncProfileRunningStates = useCallback(
-    async (profiles: BrowserProfile[]) => {
-      try {
-        const statusChecks = profiles.map(async (profile) => {
-          try {
-            const isRunning = await invoke<boolean>("check_browser_status", {
-              profile,
-            });
-            return { id: profile.id, isRunning };
-          } catch (error) {
-            console.error(
-              `Failed to check status for profile ${profile.name}:`,
-              error,
-            );
-            return { id: profile.id, isRunning: false };
-          }
-        });
-
-        const statuses = await Promise.all(statusChecks);
-
-        // Update running profiles state based on actual status
-        setRunningProfiles((prev) => {
-          const next = new Set(prev);
-          statuses.forEach(({ id, isRunning }) => {
-            if (isRunning) {
-              next.add(id);
-            } else {
-              next.delete(id);
-            }
-          });
-          return next;
-        });
-      } catch (error) {
-        console.error("Failed to sync profile running states:", error);
-      }
-    },
-    [],
-  );
-
-  // Simple profiles loader without updates check (for use as callback)
-  const loadProfiles = useCallback(async () => {
-    try {
-      const profileList = await invoke<BrowserProfile[]>(
-        "list_browser_profiles",
-      );
-      setProfiles(profileList);
-
-      // Check and sync profile running status after loading profiles
-      await syncProfileRunningStates(profileList);
-
-      // Check for missing binaries after loading profiles
-      await checkMissingBinaries();
-    } catch (err: unknown) {
-      console.error("Failed to load profiles:", err);
-      setError(`Failed to load profiles: ${JSON.stringify(err)}`);
-    }
-  }, [checkMissingBinaries, syncProfileRunningStates]);
-
  const [processingUrls, setProcessingUrls] = useState<Set<string>>(new Set());

  const handleUrlOpen = useCallback(
@@ -251,29 +201,9 @@ export default function Home() {
  );

  // Auto-update functionality - use the existing hook for compatibility
-  const updateNotifications = useUpdateNotifications(loadProfiles);
+  const updateNotifications = useUpdateNotifications();
  const { checkForUpdates, isUpdating } = updateNotifications;

-  // Profiles loader with update check (for initial load and manual refresh)
-  const loadProfilesWithUpdateCheck = useCallback(async () => {
-    try {
-      const profileList = await invoke<BrowserProfile[]>(
-        "list_browser_profiles",
-      );
-      setProfiles(profileList);
-
-      // Check and sync profile running status after loading profiles
-      await syncProfileRunningStates(profileList);
-
-      // Check for updates after loading profiles
-      await checkForUpdates();
-      await checkMissingBinaries();
-    } catch (err: unknown) {
-      console.error("Failed to load profiles:", err);
-      setError(`Failed to load profiles: ${JSON.stringify(err)}`);
-    }
-  }, [checkForUpdates, checkMissingBinaries, syncProfileRunningStates]);
-
  useAppUpdateNotifications();

  // Check for startup URLs but only process them once
@@ -320,9 +250,8 @@ export default function Home() {
        await invoke("warm_up_nodecar");
      } catch (err) {
        if (!cancelled) {
-          setError(
-            `Initialization failed: ${err instanceof Error ? err.message : String(err)}`,
-          );
+          // Don't set error here since useProfileEvents handles profile errors
+          console.error("Initialization failed:", err);
        }
      } finally {
        if (!cancelled) setIsInitializing(false);
@@ -334,6 +263,27 @@ export default function Home() {
    };
  }, []);

+  // Handle profile errors from useProfileEvents hook
+  useEffect(() => {
+    if (profilesError) {
+      showErrorToast(profilesError);
+    }
+  }, [profilesError]);
+
+  // Handle group errors from useGroupEvents hook
+  useEffect(() => {
+    if (groupsError) {
+      showErrorToast(groupsError);
+    }
+  }, [groupsError]);
+
+  // Handle proxy errors from useProxyEvents hook
+  useEffect(() => {
+    if (proxiesError) {
+      showErrorToast(proxiesError);
+    }
+  }, [proxiesError]);
+
  const checkAllPermissions = useCallback(async () => {
    try {
      // Wait for permissions to be initialized before checking
@@ -390,7 +340,7 @@ export default function Home() {
          "Received show create profile dialog request:",
          event.payload,
        );
-        setError(
+        showErrorToast(
          "No profiles available. Please create a profile first before opening URLs.",
        );
        setCreateProfileDialogOpen(true);
@@ -426,38 +376,24 @@ export default function Home() {

  const handleSaveCamoufoxConfig = useCallback(
    async (profile: BrowserProfile, config: CamoufoxConfig) => {
-      setError(null);
      try {
        await invoke("update_camoufox_config", {
-          profileName: profile.name,
+          profileId: profile.id,
          config,
        });
-        await loadProfiles();
+        // No need to manually reload - useProfileEvents will handle the update
        setCamoufoxConfigDialogOpen(false);
      } catch (err: unknown) {
        console.error("Failed to update camoufox config:", err);
-        setError(`Failed to update camoufox config: ${JSON.stringify(err)}`);
+        showErrorToast(
+          `Failed to update camoufox config: ${JSON.stringify(err)}`,
+        );
        throw err;
      }
    },
-    [loadProfiles],
+    [],
  );

-  const loadGroups = useCallback(async () => {
-    setGroupsLoading(true);
-    try {
-      const groupsWithCounts = await invoke<GroupWithCount[]>(
-        "get_groups_with_profile_counts",
-      );
-      setGroups(groupsWithCounts);
-    } catch (err) {
-      console.error("Failed to load groups with counts:", err);
-      setGroups([]);
-    } finally {
-      setGroupsLoading(false);
-    }
-  }, []);
-
  const handleCreateProfile = useCallback(
    async (profileData: {
      name: string;
@@ -468,8 +404,6 @@ export default function Home() {
      camoufoxConfig?: CamoufoxConfig;
      groupId?: string;
    }) => {
-      setError(null);
-
      try {
        await invoke<BrowserProfile>("create_browser_profile_new", {
          name: profileData.name,
@@ -483,11 +417,9 @@ export default function Home() {
            (selectedGroupId !== "default" ? selectedGroupId : undefined),
        });

-        await loadProfiles();
-        await loadGroups();
-        // Trigger proxy data reload in the table
+        // No need to manually reload - useProfileEvents will handle the update
      } catch (error) {
-        setError(
+        showErrorToast(
          `Failed to create profile: ${
            error instanceof Error ? error.message : String(error)
          }`,
@@ -495,36 +427,10 @@ export default function Home() {
        throw error;
      }
    },
-    [loadProfiles, loadGroups, selectedGroupId],
+    [selectedGroupId],
  );

-  useEffect(() => {
-    let unlisten: (() => void) | undefined;
-    (async () => {
-      try {
-        unlisten = await listen<{ id: string; is_running: boolean }>(
-          "profile-running-changed",
-          (event) => {
-            const { id, is_running } = event.payload;
-            setRunningProfiles((prev) => {
-              const next = new Set(prev);
-              if (is_running) next.add(id);
-              else next.delete(id);
-              return next;
-            });
-          },
-        );
-      } catch {
-        // best-effort listener
-      }
-    })();
-    return () => {
-      if (unlisten) unlisten();
-    };
-  }, []);
-
  const launchProfile = useCallback(async (profile: BrowserProfile) => {
-    setError(null);
    console.log("Starting launch for profile:", profile.name);

    try {
@@ -535,104 +441,88 @@ export default function Home() {
    } catch (err: unknown) {
      console.error("Failed to launch browser:", err);
      const errorMessage = err instanceof Error ? err.message : String(err);
-      setError(`Failed to launch browser: ${errorMessage}`);
+      showErrorToast(`Failed to launch browser: ${errorMessage}`);
      // Re-throw the error so the table component can handle loading state cleanup
      throw err;
    }
  }, []);

-  const handleDeleteProfile = useCallback(
-    async (profile: BrowserProfile) => {
-      setError(null);
-      console.log("Attempting to delete profile:", profile.name);
+  const handleDeleteProfile = useCallback(async (profile: BrowserProfile) => {
+    console.log("Attempting to delete profile:", profile.name);

-      try {
-        // First check if the browser is running for this profile
-        const isRunning = await invoke<boolean>("check_browser_status", {
-          profile,
-        });
+    try {
+      // First check if the browser is running for this profile
+      const isRunning = await invoke<boolean>("check_browser_status", {
+        profile,
+      });

-        if (isRunning) {
-          setError(
-            "Cannot delete profile while browser is running. Please stop the browser first.",
-          );
-          return;
-        }
-
-        // Attempt to delete the profile
-        await invoke("delete_profile", { profileName: profile.name });
-        console.log("Profile deletion command completed successfully");
-
-        // Give a small delay to ensure file system operations complete
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        // Reload profiles and groups to ensure UI is updated
-        await loadProfiles();
-        await loadGroups();
-
-        console.log("Profile deleted and profiles reloaded successfully");
-      } catch (err: unknown) {
-        console.error("Failed to delete profile:", err);
-        const errorMessage = err instanceof Error ? err.message : String(err);
-        setError(`Failed to delete profile: ${errorMessage}`);
+      if (isRunning) {
+        showErrorToast(
+          "Cannot delete profile while browser is running. Please stop the browser first.",
+        );
+        return;
      }
-    },
-    [loadProfiles, loadGroups],
-  );
+
+      // Attempt to delete the profile
+      await invoke("delete_profile", { profileId: profile.id });
+      console.log("Profile deletion command completed successfully");
+
+      // No need to manually reload - useProfileEvents will handle the update
+      console.log("Profile deleted successfully");
+    } catch (err: unknown) {
+      console.error("Failed to delete profile:", err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      showErrorToast(`Failed to delete profile: ${errorMessage}`);
+    }
+  }, []);

  const handleRenameProfile = useCallback(
-    async (oldName: string, newName: string) => {
-      setError(null);
+    async (profileId: string, newName: string) => {
      try {
-        await invoke("rename_profile", { oldName, newName });
-        await loadProfiles();
+        await invoke("rename_profile", { profileId, newName });
+        // No need to manually reload - useProfileEvents will handle the update
      } catch (err: unknown) {
        console.error("Failed to rename profile:", err);
-        setError(`Failed to rename profile: ${JSON.stringify(err)}`);
+        showErrorToast(`Failed to rename profile: ${JSON.stringify(err)}`);
        throw err;
      }
    },
-    [loadProfiles],
+    [],
  );

-  const handleKillProfile = useCallback(
-    async (profile: BrowserProfile) => {
-      setError(null);
-      console.log("Starting kill for profile:", profile.name);
+  const handleKillProfile = useCallback(async (profile: BrowserProfile) => {
+    console.log("Starting kill for profile:", profile.name);

-      try {
-        await invoke("kill_browser_profile", { profile });
-        await loadProfiles();
-        console.log("Successfully killed profile:", profile.name);
-        // Don't reload profiles here - let the backend events handle UI updates
-      } catch (err: unknown) {
-        console.error("Failed to kill browser:", err);
-        const errorMessage = err instanceof Error ? err.message : String(err);
-        setError(`Failed to kill browser: ${errorMessage}`);
-        // Re-throw the error so the table component can handle loading state cleanup
-        throw err;
-      }
-    },
-    [loadProfiles],
-  );
+    try {
+      await invoke("kill_browser_profile", { profile });
+      console.log("Successfully killed profile:", profile.name);
+      // No need to manually reload - useProfileEvents will handle the update
+    } catch (err: unknown) {
+      console.error("Failed to kill browser:", err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      showErrorToast(`Failed to kill browser: ${errorMessage}`);
+      // Re-throw the error so the table component can handle loading state cleanup
+      throw err;
+    }
+  }, []);

  const handleDeleteSelectedProfiles = useCallback(
-    async (profileNames: string[]) => {
-      setError(null);
+    async (profileIds: string[]) => {
      try {
-        await invoke("delete_selected_profiles", { profileNames });
-        await loadProfiles();
-        await loadGroups();
+        await invoke("delete_selected_profiles", { profileIds });
+        // No need to manually reload - useProfileEvents will handle the update
      } catch (err: unknown) {
        console.error("Failed to delete selected profiles:", err);
-        setError(`Failed to delete selected profiles: ${JSON.stringify(err)}`);
+        showErrorToast(
+          `Failed to delete selected profiles: ${JSON.stringify(err)}`,
+        );
      }
    },
-    [loadProfiles, loadGroups],
+    [],
  );

-  const handleAssignProfilesToGroup = useCallback((profileNames: string[]) => {
-    setSelectedProfilesForGroup(profileNames);
+  const handleAssignProfilesToGroup = useCallback((profileIds: string[]) => {
+    setSelectedProfilesForGroup(profileIds);
    setGroupAssignmentDialogOpen(true);
  }, []);

@@ -647,19 +537,20 @@ export default function Home() {
    setIsBulkDeleting(true);
    try {
      await invoke("delete_selected_profiles", {
-        profileNames: selectedProfiles,
+        profileIds: selectedProfiles,
      });
-      await loadProfiles();
-      await loadGroups();
+      // No need to manually reload - useProfileEvents will handle the update
      setSelectedProfiles([]);
      setShowBulkDeleteConfirmation(false);
    } catch (error) {
      console.error("Failed to delete selected profiles:", error);
-      setError(`Failed to delete selected profiles: ${JSON.stringify(error)}`);
+      showErrorToast(
+        `Failed to delete selected profiles: ${JSON.stringify(error)}`,
+      );
    } finally {
      setIsBulkDeleting(false);
    }
-  }, [selectedProfiles, loadProfiles, loadGroups]);
+  }, [selectedProfiles]);

  const handleBulkGroupAssignment = useCallback(() => {
    if (selectedProfiles.length === 0) return;
@@ -668,20 +559,16 @@ export default function Home() {
  }, [selectedProfiles, handleAssignProfilesToGroup]);

  const handleGroupAssignmentComplete = useCallback(async () => {
-    await loadProfiles();
-    await loadGroups();
+    // No need to manually reload - useProfileEvents will handle the update
    setGroupAssignmentDialogOpen(false);
    setSelectedProfilesForGroup([]);
-  }, [loadProfiles, loadGroups]);
+  }, []);

  const handleGroupManagementComplete = useCallback(async () => {
-    await loadGroups();
-  }, [loadGroups]);
+    // No need to manually reload - useProfileEvents will handle the update
+  }, []);

  useEffect(() => {
-    void loadProfilesWithUpdateCheck();
-    void loadGroups();
-
    // Check for startup default browser prompt
    void checkStartupPrompt();

@@ -707,6 +594,11 @@ export default function Home() {
      30 * 60 * 1000,
    );

+    // Check for missing binaries after initial profile load
+    if (!profilesLoading && profiles.length > 0) {
+      void checkMissingBinaries();
+    }
+
    return () => {
      clearInterval(updateInterval);
      if (cleanup) {
@@ -714,12 +606,13 @@ export default function Home() {
      }
    };
  }, [
-    loadProfilesWithUpdateCheck,
    checkForUpdates,
    checkStartupPrompt,
    listenForUrlEvents,
    checkCurrentUrl,
-    loadGroups,
+    checkMissingBinaries,
+    profilesLoading,
+    profiles.length,
  ]);

  // Show deprecation warning for unsupported profiles (with names)
@@ -755,13 +648,6 @@ export default function Home() {
    }
  }, [profiles]);

-  useEffect(() => {
-    if (error) {
-      showErrorToast(error);
-      setError(null);
-    }
-  }, [error]);
-
  // Check permissions when they are initialized
  useEffect(() => {
    if (isInitialized) {
@@ -778,6 +664,9 @@ export default function Home() {
    return profiles.filter((profile) => profile.group_id === selectedGroupId);
  }, [profiles, selectedGroupId]);

+  // Update loading states
+  const isLoading = profilesLoading || groupsLoading || proxiesLoading;
+
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen gap-8 font-[family-name:var(--font-geist-sans)] bg-background">
      <main className="flex flex-col row-start-2 gap-6 items-center w-full max-w-3xl">
@@ -797,8 +686,8 @@ export default function Home() {
          <GroupBadges
            selectedGroupId={selectedGroupId}
            onGroupSelect={handleSelectGroup}
-            groups={groups}
-            isLoading={areGroupsLoading}
+            groups={groupsData}
+            isLoading={isLoading}
          />
          <ProfilesDataTable
            profiles={filteredProfiles}
@@ -851,7 +740,6 @@ export default function Home() {
        onClose={() => {
          setImportProfileDialogOpen(false);
        }}
-        onImportComplete={() => void loadProfiles()}
      />

      <ProxyManagementDialog
@@ -909,6 +797,7 @@ export default function Home() {
        }}
        selectedProfiles={selectedProfilesForGroup}
        onAssignmentComplete={handleGroupAssignmentComplete}
+        profiles={profiles}
      />

      <DeleteConfirmationDialog
@@ -919,7 +808,8 @@ export default function Home() {
        description={`This action cannot be undone. This will permanently delete ${selectedProfiles.length} profile${selectedProfiles.length !== 1 ? "s" : ""} and all associated data.`}
        confirmButtonText={`Delete ${selectedProfiles.length} Profile${selectedProfiles.length !== 1 ? "s" : ""}`}
        isLoading={isBulkDeleting}
-        profileNames={selectedProfiles}
+        profileIds={selectedProfiles}
+        profiles={profiles.map((p) => ({ id: p.id, name: p.name }))}
      />
    </div>
  );
@@ -107,7 +107,7 @@ export function CamoufoxConfigDialog({
          </DialogTitle>
        </DialogHeader>

-        <ScrollArea className="flex-1 h-[400px]">
+        <ScrollArea className="flex-1 h-[320px]">
          <div className="py-4">
            <SharedCamoufoxConfigForm
              config={config}
@@ -1,7 +1,6 @@
 "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";
@@ -27,8 +26,9 @@ import {
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useBrowserDownload } from "@/hooks/use-browser-download";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { getBrowserIcon } from "@/lib/browser-utils";
-import type { BrowserReleaseTypes, CamoufoxConfig, StoredProxy } from "@/types";
+import type { BrowserReleaseTypes, CamoufoxConfig } from "@/types";
 import { RippleButton } from "./ui/ripple";

 type BrowserTypeString =
@@ -122,7 +122,7 @@ export function CreateProfileDialog({
  });

  const [supportedBrowsers, setSupportedBrowsers] = useState<string[]>([]);
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
+  const { storedProxies } = useProxyEvents();
  const [showProxyForm, setShowProxyForm] = useState(false);
  const [isCreating, setIsCreating] = useState(false);
  const [releaseTypes, setReleaseTypes] = useState<BrowserReleaseTypes>();
@@ -145,15 +145,6 @@ export function CreateProfileDialog({
    }
  }, []);

-  const loadStoredProxies = useCallback(async () => {
-    try {
-      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxies);
-    } catch (error) {
-      console.error("Failed to load stored proxies:", error);
-    }
-  }, []);
-
  const checkAndDownloadGeoIPDatabase = useCallback(async () => {
    try {
      const isAvailable = await invoke<boolean>("is_geoip_database_available");
@@ -241,7 +232,6 @@ export function CreateProfileDialog({
        setSelectedBrowser("camoufox");
      }
      void loadSupportedBrowsers();
-      void loadStoredProxies();
      // Load camoufox release types when dialog opens
      void loadReleaseTypes(selectedBrowser || "camoufox");
      // Check and download GeoIP database if needed for Camoufox
@@ -250,7 +240,6 @@ export function CreateProfileDialog({
  }, [
    isOpen,
    loadSupportedBrowsers,
-    loadStoredProxies,
    loadReleaseTypes,
    checkAndDownloadGeoIPDatabase,
    selectedBrowser,
@@ -642,11 +631,6 @@ export function CreateProfileDialog({
      <ProxyFormDialog
        isOpen={showProxyForm}
        onClose={() => setShowProxyForm(false)}
-        onSave={(proxy) => {
-          setStoredProxies((prev) => [...prev, proxy]);
-          setSelectedProxyId(proxy.id);
-          void emit("stored-proxies-changed");
-        }}
      />
    </Dialog>
  );
@@ -19,7 +19,8 @@ interface DeleteConfirmationDialogProps {
  description: string;
  confirmButtonText?: string;
  isLoading?: boolean;
-  profileNames?: string[];
+  profileIds?: string[];
+  profiles?: { id: string; name: string }[];
 }

 export function DeleteConfirmationDialog({
@@ -30,7 +31,8 @@ export function DeleteConfirmationDialog({
  description,
  confirmButtonText = "Delete",
  isLoading = false,
-  profileNames,
+  profileIds,
+  profiles = [],
 }: DeleteConfirmationDialogProps) {
  const handleConfirm = async () => {
    await onConfirm();
@@ -42,18 +44,22 @@ export function DeleteConfirmationDialog({
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
-          {profileNames && profileNames.length > 0 && (
+          {profileIds && profileIds.length > 0 && (
            <div className="mt-4">
              <p className="text-sm font-medium mb-2">
                Profiles to be deleted:
              </p>
              <div className="bg-muted rounded-md p-3 max-h-32 overflow-y-auto">
                <ul className="space-y-1">
-                  {profileNames.map((name) => (
-                    <li key={name} className="text-sm text-muted-foreground">
-                      • {name}
-                    </li>
-                  ))}
+                  {profileIds.map((id) => {
+                    const profile = profiles.find((p) => p.id === id);
+                    const displayName = profile ? profile.name : id;
+                    return (
+                      <li key={id} className="text-sm text-muted-foreground">
+                        • {displayName}
+                      </li>
+                    );
+                  })}
                </ul>
              </div>
            </div>
@@ -74,13 +74,13 @@ export function DeleteGroupDialog({
    try {
      if (deleteAction === "delete" && associatedProfiles.length > 0) {
        // Delete all associated profiles first
-        const profileNames = associatedProfiles.map((p) => p.name);
-        await invoke("delete_selected_profiles", { profileNames });
+        const profileIds = associatedProfiles.map((p) => p.id);
+        await invoke("delete_selected_profiles", { profileIds });
      } else if (deleteAction === "move" && associatedProfiles.length > 0) {
        // Move profiles to default group (null group_id)
-        const profileNames = associatedProfiles.map((p) => p.name);
+        const profileIds = associatedProfiles.map((p) => p.id);
        await invoke("assign_profiles_to_group", {
-          profileNames,
+          profileIds,
          groupId: null,
        });
      }
@@ -22,7 +22,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select";
-import type { ProfileGroup } from "@/types";
+import type { BrowserProfile, ProfileGroup } from "@/types";
 import { RippleButton } from "./ui/ripple";

 interface GroupAssignmentDialogProps {
@@ -30,6 +30,7 @@ interface GroupAssignmentDialogProps {
  onClose: () => void;
  selectedProfiles: string[];
  onAssignmentComplete: () => void;
+  profiles?: BrowserProfile[];
 }

 export function GroupAssignmentDialog({
@@ -37,6 +38,7 @@ export function GroupAssignmentDialog({
  onClose,
  selectedProfiles,
  onAssignmentComplete,
+  profiles = [],
 }: GroupAssignmentDialogProps) {
  const [groups, setGroups] = useState<ProfileGroup[]>([]);
  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
@@ -64,7 +66,7 @@ export function GroupAssignmentDialog({
    setError(null);
    try {
      await invoke("assign_profiles_to_group", {
-        profileNames: selectedProfiles,
+        profileIds: selectedProfiles,
        groupId: selectedGroupId,
      });

@@ -119,11 +121,18 @@ export function GroupAssignmentDialog({
            <Label>Selected Profiles:</Label>
            <div className="p-3 bg-muted rounded-md max-h-32 overflow-y-auto">
              <ul className="text-sm space-y-1">
-                {selectedProfiles.map((profileName) => (
-                  <li key={profileName} className="truncate">
-                    • {profileName}
-                  </li>
-                ))}
+                {selectedProfiles.map((profileId) => {
+                  // Find the profile name for display
+                  const profile = profiles.find(
+                    (p: BrowserProfile) => p.id === profileId,
+                  );
+                  const displayName = profile ? profile.name : profileId;
+                  return (
+                    <li key={profileId} className="truncate">
+                      • {displayName}
+                    </li>
+                  );
+                })}
              </ul>
            </div>
          </div>
@@ -31,13 +31,11 @@ import { RippleButton } from "./ui/ripple";
 interface ImportProfileDialogProps {
  isOpen: boolean;
  onClose: () => void;
-  onImportComplete?: () => void;
 }

 export function ImportProfileDialog({
  isOpen,
  onClose,
-  onImportComplete,
 }: ImportProfileDialogProps) {
  const [detectedProfiles, setDetectedProfiles] = useState<DetectedProfile[]>(
    [],
@@ -140,9 +138,6 @@ export function ImportProfileDialog({
      toast.success(
        `Successfully imported profile "${autoDetectProfileName.trim()}"`,
      );
-      if (onImportComplete) {
-        onImportComplete();
-      }
      onClose();
    } catch (error) {
      console.error("Failed to import profile:", error);
@@ -168,7 +163,6 @@ export function ImportProfileDialog({
    selectedDetectedProfile,
    autoDetectProfileName,
    detectedProfiles,
-    onImportComplete,
    onClose,
  ]);

@@ -193,9 +187,6 @@ export function ImportProfileDialog({
      toast.success(
        `Successfully imported profile "${manualProfileName.trim()}"`,
      );
-      if (onImportComplete) {
-        onImportComplete();
-      }
      onClose();
    } catch (error) {
      console.error("Failed to import profile:", error);
@@ -217,13 +208,7 @@ export function ImportProfileDialog({
    } finally {
      setIsImporting(false);
    }
-  }, [
-    manualBrowserType,
-    manualProfilePath,
-    manualProfileName,
-    onImportComplete,
-    onClose,
-  ]);
+  }, [manualBrowserType, manualProfilePath, manualProfileName, onClose]);

  const handleClose = () => {
    setSelectedDetectedProfile(null);
@@ -52,6 +52,7 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useBrowserState } from "@/hooks/use-browser-state";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { useTableSorting } from "@/hooks/use-table-sorting";
 import {
  getBrowserDisplayName,
@@ -95,15 +96,15 @@ type TableMeta = {
  proxyOverrides: Record<string, string | null>;
  storedProxies: StoredProxy[];
  handleProxySelection: (
-    profileName: string,
+    profileId: string,
    proxyId: string | null,
  ) => void | Promise<void>;

  // Selection helpers
-  isProfileSelected: (name: string) => boolean;
+  isProfileSelected: (id: string) => boolean;
  handleToggleAll: (checked: boolean) => void;
-  handleCheckboxChange: (name: string, checked: boolean) => void;
-  handleIconClick: (name: string) => void;
+  handleCheckboxChange: (id: string, checked: boolean) => void;
+  handleIconClick: (id: string) => void;

  // Rename helpers
  handleRename: () => void | Promise<void>;
@@ -124,7 +125,7 @@ type TableMeta = {
  onLaunchProfile: (profile: BrowserProfile) => void | Promise<void>;

  // Overflow actions
-  onAssignProfilesToGroup?: (profileNames: string[]) => void;
+  onAssignProfilesToGroup?: (profileIds: string[]) => void;
  onConfigureCamoufox?: (profile: BrowserProfile) => void;
 };

@@ -150,8 +151,8 @@ const TagsCell = React.memo<{
    setOpenTagsEditorFor,
    setTagsOverrides,
  }) => {
-    const effectiveTags: string[] = Object.hasOwn(tagsOverrides, profile.name)
-      ? tagsOverrides[profile.name]
+    const effectiveTags: string[] = Object.hasOwn(tagsOverrides, profile.id)
+      ? tagsOverrides[profile.id]
      : (profile.tags ?? []);

    const valueOptions: Option[] = React.useMemo(
@@ -163,10 +164,9 @@ const TagsCell = React.memo<{
      [allTags],
    );

-    const handleChange = React.useCallback(
-      async (opts: Option[]) => {
-        const newTagsRaw = opts.map((o) => o.value);
-        // Dedupe while preserving order
+    const onTagsChange = React.useCallback(
+      async (newTagsRaw: string[]) => {
+        // Dedupe tags
        const seen = new Set<string>();
        const newTags: string[] = [];
        for (const t of newTagsRaw) {
@@ -175,10 +175,10 @@ const TagsCell = React.memo<{
            newTags.push(t);
          }
        }
-        setTagsOverrides((prev) => ({ ...prev, [profile.name]: newTags }));
+        setTagsOverrides((prev) => ({ ...prev, [profile.id]: newTags }));
        try {
          await invoke<BrowserProfile>("update_profile_tags", {
-            profileName: profile.name,
+            profileId: profile.id,
            tags: newTags,
          });
          setAllTags((prev) => {
@@ -190,7 +190,15 @@ const TagsCell = React.memo<{
          console.error("Failed to update tags:", error);
        }
      },
-      [profile.name, setAllTags, setTagsOverrides],
+      [profile.id, setTagsOverrides, setAllTags],
+    );
+
+    const handleChange = React.useCallback(
+      async (opts: Option[]) => {
+        const newTagsRaw = opts.map((o) => o.value);
+        await onTagsChange(newTagsRaw);
+      },
+      [onTagsChange],
    );

    const containerRef = React.useRef<HTMLDivElement | null>(null);
@@ -201,7 +209,7 @@ const TagsCell = React.memo<{

    React.useLayoutEffect(() => {
      // Only measure when not editing this profile's tags
-      if (openTagsEditorFor === profile.name) return;
+      if (openTagsEditorFor === profile.id) return;
      const container = containerRef.current;
      if (!container) return;

@@ -252,10 +260,10 @@ const TagsCell = React.memo<{
        ro.disconnect();
        if (timeoutId) clearTimeout(timeoutId);
      };
-    }, [effectiveTags, openTagsEditorFor, profile.name]);
+    }, [effectiveTags, openTagsEditorFor, profile.id]);

    React.useEffect(() => {
-      if (openTagsEditorFor !== profile.name) return;
+      if (openTagsEditorFor !== profile.id) return;
      const handleClick = (e: MouseEvent) => {
        const target = e.target as Node | null;
        if (
@@ -268,19 +276,19 @@ const TagsCell = React.memo<{
      };
      document.addEventListener("mousedown", handleClick);
      return () => document.removeEventListener("mousedown", handleClick);
-    }, [openTagsEditorFor, profile.name, setOpenTagsEditorFor]);
+    }, [openTagsEditorFor, profile.id, setOpenTagsEditorFor]);

    React.useEffect(() => {
-      if (openTagsEditorFor === profile.name && editorRef.current) {
+      if (openTagsEditorFor === profile.id && editorRef.current) {
        // Focus the inner input of MultipleSelector on open
        const inputEl = editorRef.current.querySelector("input");
        if (inputEl) {
          (inputEl as HTMLInputElement).focus();
        }
      }
-    }, [openTagsEditorFor, profile.name]);
+    }, [openTagsEditorFor, profile.id]);

-    if (openTagsEditorFor !== profile.name) {
+    if (openTagsEditorFor !== profile.id) {
      const hiddenCount = Math.max(0, effectiveTags.length - visibleCount);
      const ButtonContent = (
        <button
@@ -291,7 +299,7 @@ const TagsCell = React.memo<{
            isDisabled ? "opacity-60" : "cursor-pointer hover:bg-accent/50",
          )}
          onClick={() => {
-            if (!isDisabled) setOpenTagsEditorFor(profile.name);
+            if (!isDisabled) setOpenTagsEditorFor(profile.id);
          }}
        >
          {effectiveTags.slice(0, visibleCount).map((t) => (
@@ -371,12 +379,12 @@ interface ProfilesDataTableProps {
  onLaunchProfile: (profile: BrowserProfile) => void | Promise<void>;
  onKillProfile: (profile: BrowserProfile) => void | Promise<void>;
  onDeleteProfile: (profile: BrowserProfile) => void | Promise<void>;
-  onRenameProfile: (oldName: string, newName: string) => Promise<void>;
+  onRenameProfile: (profileId: string, newName: string) => Promise<void>;
  onConfigureCamoufox: (profile: BrowserProfile) => void;
  runningProfiles: Set<string>;
  isUpdating: (browser: string) => boolean;
-  onDeleteSelectedProfiles: (profileNames: string[]) => Promise<void>;
-  onAssignProfilesToGroup: (profileNames: string[]) => void;
+  onDeleteSelectedProfiles: (profileIds: string[]) => Promise<void>;
+  onAssignProfilesToGroup: (profileIds: string[]) => void;
  selectedGroupId: string | null;
  selectedProfiles: string[];
  onSelectedProfilesChange: Dispatch<SetStateAction<string[]>>;
@@ -413,10 +421,8 @@ export function ProfilesDataTable({
    new Set(),
  );

-  const [storedProxies, setStoredProxies] = React.useState<StoredProxy[]>([]);
-  const [openProxySelectorFor, setOpenProxySelectorFor] = React.useState<
-    string | null
-  >(null);
+  const { storedProxies } = useProxyEvents();
+
  const [proxyOverrides, setProxyOverrides] = React.useState<
    Record<string, string | null>
  >({});
@@ -428,6 +434,9 @@ export function ProfilesDataTable({
  const [openTagsEditorFor, setOpenTagsEditorFor] = React.useState<
    string | null
  >(null);
+  const [openProxySelectorFor, setOpenProxySelectorFor] = React.useState<
+    string | null
+  >(null);

  const loadAllTags = React.useCallback(async () => {
    try {
@@ -439,13 +448,13 @@ export function ProfilesDataTable({
  }, []);

  const handleProxySelection = React.useCallback(
-    async (profileName: string, proxyId: string | null) => {
+    async (profileId: string, proxyId: string | null) => {
      try {
        await invoke("update_profile_proxy", {
-          profileName,
+          profileId,
          proxyId,
        });
-        setProxyOverrides((prev) => ({ ...prev, [profileName]: proxyId }));
+        setProxyOverrides((prev) => ({ ...prev, [profileId]: proxyId }));
        // Notify other parts of the app so usage counts and lists refresh
        await emit("profile-updated");
      } catch (error) {
@@ -466,16 +475,6 @@ export function ProfilesDataTable({
    stoppingProfiles,
  );

-  // Load stored proxies
-  const loadStoredProxies = React.useCallback(async () => {
-    try {
-      const proxiesList = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxiesList);
-    } catch (error) {
-      console.error("Failed to load stored proxies:", error);
-    }
-  }, []);
-
  // Clear launching/stopping spinners when backend reports running status changes
  React.useEffect(() => {
    if (!browserState.isClient) return;
@@ -511,12 +510,6 @@ export function ProfilesDataTable({
    };
  }, [browserState.isClient]);

-  React.useEffect(() => {
-    if (browserState.isClient) {
-      void loadStoredProxies();
-    }
-  }, [browserState.isClient, loadStoredProxies]);
-
  // Keep stored proxies up-to-date by listening for changes emitted elsewhere in the app
  React.useEffect(() => {
    if (!browserState.isClient) return;
@@ -524,10 +517,7 @@ export function ProfilesDataTable({
    (async () => {
      try {
        unlisten = await listen("stored-proxies-changed", () => {
-          void loadStoredProxies();
-        });
-        // Also refresh tags on profile updates
-        await listen("profile-updated", () => {
+          // Also refresh tags on profile updates
          void loadAllTags();
        });
      } catch (_err) {
@@ -537,15 +527,15 @@ export function ProfilesDataTable({
    return () => {
      if (unlisten) unlisten();
    };
-  }, [browserState.isClient, loadStoredProxies, loadAllTags]);
+  }, [browserState.isClient, loadAllTags]);

  // Automatically deselect profiles that become running, updating, launching, or stopping
  React.useEffect(() => {
    const newSet = new Set(selectedProfiles);
    let hasChanges = false;

-    for (const profileName of selectedProfiles) {
-      const profile = profiles.find((p) => p.name === profileName);
+    for (const profileId of selectedProfiles) {
+      const profile = profiles.find((p) => p.id === profileId);
      if (profile) {
        const isRunning =
          browserState.isClient && runningProfiles.has(profile.id);
@@ -554,7 +544,7 @@ export function ProfilesDataTable({
        const isBrowserUpdating = isUpdating(profile.browser);

        if (isRunning || isLaunching || isStopping || isBrowserUpdating) {
-          newSet.delete(profileName);
+          newSet.delete(profileId);
          hasChanges = true;
        }
      }
@@ -598,7 +588,7 @@ export function ProfilesDataTable({

    try {
      setIsRenamingSaving(true);
-      await onRenameProfile(profileToRename.name, newProfileName.trim());
+      await onRenameProfile(profileToRename.id, newProfileName.trim());
      setProfileToRename(null);
      setNewProfileName("");
      setRenameError(null);
@@ -648,8 +638,8 @@ export function ProfilesDataTable({

  // Handle icon/checkbox click
  const handleIconClick = React.useCallback(
-    (profileName: string) => {
-      const profile = profiles.find((p) => p.name === profileName);
+    (profileId: string) => {
+      const profile = profiles.find((p) => p.id === profileId);
      if (!profile) return;

      // Prevent selection of profiles whose browsers are updating
@@ -659,10 +649,10 @@ export function ProfilesDataTable({

      setShowCheckboxes(true);
      const newSet = new Set(selectedProfiles);
-      if (newSet.has(profileName)) {
-        newSet.delete(profileName);
+      if (newSet.has(profileId)) {
+        newSet.delete(profileId);
      } else {
-        newSet.add(profileName);
+        newSet.add(profileId);
      }

      // Hide checkboxes if no profiles are selected
@@ -688,12 +678,12 @@ export function ProfilesDataTable({

  // Handle checkbox change
  const handleCheckboxChange = React.useCallback(
-    (profileName: string, checked: boolean) => {
+    (profileId: string, checked: boolean) => {
      const newSet = new Set(selectedProfiles);
      if (checked) {
-        newSet.add(profileName);
+        newSet.add(profileId);
      } else {
-        newSet.delete(profileName);
+        newSet.delete(profileId);
      }

      // Hide checkboxes if no profiles are selected
@@ -725,7 +715,7 @@ export function ProfilesDataTable({
                  !isBrowserUpdating
                );
              })
-              .map((profile) => profile.name),
+              .map((profile) => profile.id),
          )
        : new Set<string>();

@@ -791,7 +781,7 @@ export function ProfilesDataTable({
      handleProxySelection,

      // Selection helpers
-      isProfileSelected: (name: string) => selectedProfiles.includes(name),
+      isProfileSelected: (id: string) => selectedProfiles.includes(id),
      handleToggleAll,
      handleCheckboxChange,
      handleIconClick,
@@ -874,7 +864,7 @@ export function ProfilesDataTable({
          const browser = profile.browser;
          const IconComponent = getBrowserIcon(browser);

-          const isSelected = meta.isProfileSelected(profile.name);
+          const isSelected = meta.isProfileSelected(profile.id);
          const isRunning =
            meta.isClient && meta.runningProfiles.has(profile.id);
          const isLaunching = meta.launchingProfiles.has(profile.id);
@@ -914,7 +904,7 @@ export function ProfilesDataTable({
                <Checkbox
                  checked={isSelected}
                  onCheckedChange={(value) =>
-                    meta.handleCheckboxChange(profile.name, !!value)
+                    meta.handleCheckboxChange(profile.id, !!value)
                  }
                  aria-label="Select row"
                  className="w-4 h-4"
@@ -928,7 +918,7 @@ export function ProfilesDataTable({
              <button
                type="button"
                className="flex justify-center items-center p-0 border-none cursor-pointer"
-                onClick={() => meta.handleIconClick(profile.name)}
+                onClick={() => meta.handleIconClick(profile.id)}
                aria-label="Select profile"
              >
                <span className="w-4 h-4 group">
@@ -1056,7 +1046,7 @@ export function ProfilesDataTable({
          const profile = row.original as BrowserProfile;
          const rawName: string = row.getValue("name");
          const name = getBrowserDisplayName(rawName);
-          const isEditing = meta.profileToRename?.name === profile.name;
+          const isEditing = meta.profileToRename?.id === profile.id;

          if (isEditing) {
            const isSaveDisabled =
@@ -1244,9 +1234,9 @@ export function ProfilesDataTable({
          const isDisabled =
            isRunning || isLaunching || isStopping || isBrowserUpdating;

-          const hasOverride = Object.hasOwn(meta.proxyOverrides, profile.name);
+          const hasOverride = Object.hasOwn(meta.proxyOverrides, profile.id);
          const effectiveProxyId = hasOverride
-            ? meta.proxyOverrides[profile.name]
+            ? meta.proxyOverrides[profile.id]
            : (profile.proxy_id ?? null);
          const effectiveProxy = effectiveProxyId
            ? (meta.storedProxies.find((p) => p.id === effectiveProxyId) ??
@@ -1265,7 +1255,7 @@ export function ProfilesDataTable({
              : profileHasProxy && effectiveProxy
                ? effectiveProxy.name
                : null;
-          const isSelectorOpen = meta.openProxySelectorFor === profile.name;
+          const isSelectorOpen = meta.openProxySelectorFor === profile.id;

          if (profile.browser === "tor-browser") {
            return (
@@ -1288,7 +1278,7 @@ export function ProfilesDataTable({
            <Popover
              open={isSelectorOpen}
              onOpenChange={(open) =>
-                meta.setOpenProxySelectorFor(open ? profile.name : null)
+                meta.setOpenProxySelectorFor(open ? profile.id : null)
              }
            >
              <Tooltip>
@@ -1308,7 +1298,9 @@ export function ProfilesDataTable({
                          !profileHasProxy && "text-muted-foreground",
                        )}
                      >
-                        {trimName(displayName, 10)}
+                        {profileHasProxy
+                          ? trimName(displayName, 10)
+                          : displayName}
                      </span>
                    </span>
                  </PopoverTrigger>
@@ -1326,7 +1318,7 @@ export function ProfilesDataTable({
                        <CommandItem
                          value="__none__"
                          onSelect={() =>
-                            void meta.handleProxySelection(profile.name, null)
+                            void meta.handleProxySelection(profile.id, null)
                          }
                        >
                          <LuCheck
@@ -1345,7 +1337,7 @@ export function ProfilesDataTable({
                            value={proxy.name}
                            onSelect={() =>
                              void meta.handleProxySelection(
-                                profile.name,
+                                profile.id,
                                proxy.id,
                              )
                            }
@@ -1400,7 +1392,7 @@ export function ProfilesDataTable({
                <DropdownMenuContent align="end">
                  <DropdownMenuItem
                    onClick={() => {
-                      meta.onAssignProfilesToGroup?.([profile.name]);
+                      meta.onAssignProfilesToGroup?.([profile.id]);
                    }}
                    disabled={isDisabled}
                  >
@@ -27,8 +27,10 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useBrowserState } from "@/hooks/use-browser-state";
+import { useProfileEvents } from "@/hooks/use-profile-events";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
-import type { BrowserProfile, StoredProxy } from "@/types";
+import type { BrowserProfile } from "@/types";
 import { RippleButton } from "./ui/ripple";

 interface ProfileSelectorDialogProps {
@@ -43,14 +45,19 @@ export function ProfileSelectorDialog({
  isOpen,
  onClose,
  url,
-  runningProfiles = new Set(),
+  runningProfiles: externalRunningProfiles,
  isUpdating,
 }: ProfileSelectorDialogProps) {
-  const [profiles, setProfiles] = useState<BrowserProfile[]>([]);
+  // Use the centralized profile events hook
+  const { profiles, runningProfiles: hookRunningProfiles } = useProfileEvents();
+
+  // Use external runningProfiles if provided, otherwise use hook's runningProfiles
+  const runningProfiles = externalRunningProfiles || hookRunningProfiles;
+
+  const { storedProxies } = useProxyEvents();
+
  const [selectedProfile, setSelectedProfile] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
  const [isLaunching, setIsLaunching] = useState(false);
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
  const [launchingProfiles, setLaunchingProfiles] = useState<Set<string>>(
    new Set(),
  );
@@ -77,48 +84,6 @@ export function ProfileSelectorDialog({
    [storedProxies],
  );

-  const loadProfiles = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      // Load both profiles and stored proxies
-      const [profileList, proxiesList] = await Promise.all([
-        invoke<BrowserProfile[]>("list_browser_profiles"),
-        invoke<StoredProxy[]>("get_stored_proxies"),
-      ]);
-
-      // Sort profiles by name
-      profileList.sort((a, b) => a.name.localeCompare(b.name));
-
-      // Set both profiles and proxies
-      setProfiles(profileList);
-      setStoredProxies(proxiesList);
-
-      // Auto-select first available profile for link opening
-      if (profileList.length > 0) {
-        // First, try to find a running profile that can be used for opening links
-        const runningAvailableProfile = profileList.find((profile) => {
-          const isRunning = runningProfiles.has(profile.id);
-          // Simple check without browserState dependency
-          return (
-            isRunning &&
-            profile.browser !== "tor-browser" &&
-            profile.browser !== "mullvad-browser"
-          );
-        });
-
-        if (runningAvailableProfile) {
-          setSelectedProfile(runningAvailableProfile.name);
-        } else {
-          setSelectedProfile(profileList[0].name);
-        }
-      }
-    } catch (err) {
-      console.error("Failed to load profiles:", err);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [runningProfiles]);
-
  // Helper function to get tooltip content for profiles - now uses shared hook
  const getProfileTooltipContent = (profile: BrowserProfile): string | null => {
    return browserState.getProfileTooltipContent(profile);
@@ -129,12 +94,12 @@ export function ProfileSelectorDialog({

    setIsLaunching(true);
    const selected = profiles.find((p) => p.name === selectedProfile);
-    if (selected) {
-      setLaunchingProfiles((prev) => new Set(prev).add(selected.id));
-    }
+    if (!selected) return;
+
+    setLaunchingProfiles((prev) => new Set(prev).add(selected.id));
    try {
      await invoke("open_url_with_profile", {
-        profileName: selectedProfile,
+        profileId: selected.id,
        url,
      });
      onClose();
@@ -183,11 +148,31 @@ export function ProfileSelectorDialog({
    return getProfileTooltipContent(selectedProfileData);
  };

+  // Auto-select first available profile when dialog opens and profiles are loaded
  useEffect(() => {
-    if (isOpen) {
-      void loadProfiles();
+    if (isOpen && profiles.length > 0 && !selectedProfile) {
+      // First, try to find a running profile that can be used for opening links
+      const runningAvailableProfile = profiles.find((profile) => {
+        const isRunning = runningProfiles.has(profile.id);
+        // Simple check without browserState dependency
+        return (
+          isRunning &&
+          profile.browser !== "tor-browser" &&
+          profile.browser !== "mullvad-browser"
+        );
+      });
+
+      if (runningAvailableProfile) {
+        setSelectedProfile(runningAvailableProfile.name);
+      } else {
+        // Sort profiles by name and select first
+        const sortedProfiles = [...profiles].sort((a, b) =>
+          a.name.localeCompare(b.name),
+        );
+        setSelectedProfile(sortedProfiles[0].name);
+      }
    }
-  }, [isOpen, loadProfiles]);
+  }, [isOpen, profiles, selectedProfile, runningProfiles]);

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
@@ -219,11 +204,7 @@ export function ProfileSelectorDialog({

          <div className="space-y-2">
            <Label htmlFor="profile-select">Select Profile:</Label>
-            {isLoading ? (
-              <div className="text-sm text-muted-foreground">
-                Loading profiles...
-              </div>
-            ) : profiles.length === 0 ? (
+            {profiles.length === 0 ? (
              <div className="space-y-2">
                <div className="text-sm text-muted-foreground">
                  No profiles available. Please create a profile first.
@@ -35,14 +35,12 @@ interface ProxyFormData {
 interface ProxyFormDialogProps {
  isOpen: boolean;
  onClose: () => void;
-  onSave: (proxy: StoredProxy) => void;
  editingProxy?: StoredProxy | null;
 }

 export function ProxyFormDialog({
  isOpen,
  onClose,
-  onSave,
  editingProxy,
 }: ProxyFormDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
@@ -105,11 +103,9 @@ export function ProxyFormDialog({
        password: formData.password.trim() || undefined,
      };

-      let savedProxy: StoredProxy;
-
      if (editingProxy) {
        // Update existing proxy
-        savedProxy = await invoke<StoredProxy>("update_stored_proxy", {
+        await invoke("update_stored_proxy", {
          proxyId: editingProxy.id,
          name: formData.name.trim(),
          proxySettings,
@@ -117,14 +113,13 @@ export function ProxyFormDialog({
        toast.success("Proxy updated successfully");
      } else {
        // Create new proxy
-        savedProxy = await invoke<StoredProxy>("create_stored_proxy", {
+        await invoke("create_stored_proxy", {
          name: formData.name.trim(),
          proxySettings,
        });
        toast.success("Proxy created successfully");
      }

-      onSave(savedProxy);
      onClose();
    } catch (error) {
      console.error("Failed to save proxy:", error);
@@ -134,7 +129,7 @@ export function ProxyFormDialog({
    } finally {
      setIsSubmitting(false);
    }
-  }, [formData, editingProxy, onSave, onClose]);
+  }, [formData, editingProxy, onClose]);

  const handleClose = useCallback(() => {
    if (!isSubmitting) {
@@ -1,8 +1,8 @@
 "use client";

 import { invoke } from "@tauri-apps/api/core";
-import { emit, listen } from "@tauri-apps/api/event";
-import { useCallback, useEffect, useState } from "react";
+import { emit } from "@tauri-apps/api/event";
+import { useCallback, useState } from "react";
 import { FiEdit2, FiPlus, FiTrash2, FiWifi } from "react-icons/fi";
 import { toast } from "sonner";
 import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
@@ -16,11 +16,13 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { trimName } from "@/lib/name-utils";
 import type { StoredProxy } from "@/types";
 import { RippleButton } from "./ui/ripple";
@@ -34,84 +36,12 @@ export function ProxyManagementDialog({
  isOpen,
  onClose,
 }: ProxyManagementDialogProps) {
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
-  const [loading, setLoading] = useState(false);
  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 {
-      setLoading(true);
-      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxies);
-    } catch (error) {
-      console.error("Failed to load stored proxies:", error);
-      toast.error("Failed to load proxies");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const loadProxyUsage = useCallback(async () => {
-    try {
-      const profiles = await invoke<Array<{ proxy_id?: string }>>(
-        "list_browser_profiles",
-      );
-      const counts: Record<string, number> = {};
-      for (const p of profiles) {
-        if (p.proxy_id) counts[p.proxy_id] = (counts[p.proxy_id] ?? 0) + 1;
-      }
-      setProxyUsage(counts);
-    } catch (_err) {
-      // ignore non-critical errors
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      loadStoredProxies();
-      void loadProxyUsage();
-    }
-  }, [isOpen, loadStoredProxies, loadProxyUsage]);
-
-  useEffect(() => {
-    let unlisten: (() => void) | undefined;
-    const setup = async () => {
-      try {
-        unlisten = await listen("profile-updated", () => {
-          void loadProxyUsage();
-        });
-      } catch (_err) {
-        // ignore non-critical errors
-      }
-    };
-    if (isOpen) void setup();
-    return () => {
-      if (unlisten) unlisten();
-    };
-  }, [isOpen, loadProxyUsage]);
-
-  // 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 { storedProxies, proxyUsage, isLoading } = useProxyEvents();

  const handleDeleteProxy = useCallback((proxy: StoredProxy) => {
    // Open in-app confirmation dialog
@@ -123,7 +53,6 @@ export function ProxyManagementDialog({
    setIsDeleting(true);
    try {
      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) {
@@ -145,24 +74,6 @@ export function ProxyManagementDialog({
    setShowProxyForm(true);
  }, []);

-  const handleProxySaved = useCallback((savedProxy: StoredProxy) => {
-    setStoredProxies((prev) => {
-      const existingIndex = prev.findIndex((p) => p.id === savedProxy.id);
-      if (existingIndex >= 0) {
-        // Update existing proxy
-        const updated = [...prev];
-        updated[existingIndex] = savedProxy;
-        return updated;
-      } else {
-        // Add new proxy
-        return [...prev, savedProxy];
-      }
-    });
-    setShowProxyForm(false);
-    setEditingProxy(null);
-    void emit("stored-proxies-changed");
-  }, []);
-
  const handleProxyFormClose = useCallback(() => {
    setShowProxyForm(false);
    setEditingProxy(null);
@@ -200,13 +111,12 @@ export function ProxyManagementDialog({

            {/* Proxy List - Scrollable */}
            <div className="flex-1 min-h-0">
-              {loading ? (
-                <div className="flex justify-center items-center h-32">
-                  <p className="text-sm text-muted-foreground">
-                    Loading proxies...
-                  </p>
+              {isLoading && (
+                <div className="flex justify-center items-center py-6">
+                  <div className="w-8 h-8 rounded-full border-b-2 animate-spin border-primary"></div>
                </div>
-              ) : storedProxies.length === 0 ? (
+              )}
+              {storedProxies.length === 0 && !isLoading ? (
                <div className="flex flex-col justify-center items-center h-32 text-center">
                  <FiWifi className="mx-auto mb-4 w-12 h-12 text-muted-foreground" />
                  <p className="mb-2 text-muted-foreground">
@@ -221,82 +131,84 @@ export function ProxyManagementDialog({
                  </RippleButton>
                </div>
              ) : (
-                <div className="overflow-y-auto pr-2 space-y-2 h-full">
-                  {storedProxies.map((proxy) => (
-                    <div
-                      key={proxy.id}
-                      className="flex justify-between items-center p-1 rounded border bg-card"
-                    >
-                      <div className="flex-1 ml-2 min-w-0">
-                        {proxy.name.length > 30 ? (
+                <ScrollArea className="h-[240px] pr-2">
+                  <div className="space-y-2">
+                    {storedProxies.map((proxy) => (
+                      <div
+                        key={proxy.id}
+                        className="flex justify-between items-center p-1 rounded border bg-card"
+                      >
+                        <div className="flex-1 ml-2 min-w-0">
+                          {proxy.name.length > 30 ? (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="block font-medium truncate text-card-foreground">
+                                  {trimName(proxy.name)}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <span className="text-sm font-medium text-card-foreground">
+                                  {proxy.name}
+                                </span>
+                              </TooltipContent>
+                            </Tooltip>
+                          ) : (
+                            <span className="text-sm font-medium text-card-foreground">
+                              {proxy.name}
+                            </span>
+                          )}
+                        </div>
+                        <div className="mr-2">
+                          <Badge variant="secondary">
+                            {proxyUsage[proxy.id] ?? 0}
+                          </Badge>
+                        </div>
+                        <div className="flex flex-shrink-0 gap-1 items-center">
                          <Tooltip>
                            <TooltipTrigger asChild>
-                              <span className="block font-medium truncate text-card-foreground">
-                                {trimName(proxy.name)}
-                              </span>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              <span className="text-sm font-medium text-card-foreground">
-                                {proxy.name}
-                              </span>
-                            </TooltipContent>
-                          </Tooltip>
-                        ) : (
-                          <span className="text-sm font-medium text-card-foreground">
-                            {proxy.name}
-                          </span>
-                        )}
-                      </div>
-                      <div className="mr-2">
-                        <Badge variant="secondary">
-                          {proxyUsage[proxy.id] ?? 0}
-                        </Badge>
-                      </div>
-                      <div className="flex flex-shrink-0 gap-1 items-center">
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleEditProxy(proxy)}
-                            >
-                              <FiEdit2 className="w-4 h-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Edit proxy</p>
-                          </TooltipContent>
-                        </Tooltip>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span>
                              <Button
                                variant="ghost"
                                size="sm"
-                                onClick={() => handleDeleteProxy(proxy)}
-                                className="text-destructive hover:text-destructive"
-                                disabled={(proxyUsage[proxy.id] ?? 0) > 0}
+                                onClick={() => handleEditProxy(proxy)}
                              >
-                                <FiTrash2 className="w-4 h-4" />
+                                <FiEdit2 className="w-4 h-4" />
                              </Button>
-                            </span>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {(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>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Edit proxy</p>
+                            </TooltipContent>
+                          </Tooltip>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <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>
+                              {(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>
                      </div>
-                    </div>
-                  ))}
-                </div>
+                    ))}
+                  </div>
+                </ScrollArea>
              )}
            </div>
          </div>
@@ -310,7 +222,6 @@ export function ProxyManagementDialog({
      <ProxyFormDialog
        isOpen={showProxyForm}
        onClose={handleProxyFormClose}
-        onSave={handleProxySaved}
        editingProxy={editingProxy}
      />
      <DeleteConfirmationDialog
@@ -54,6 +54,7 @@ interface AppSettings {
  custom_theme?: Record<string, string>;
  api_enabled: boolean;
  api_port: number;
+  api_token?: string;
 }

 interface CustomThemeState {
@@ -81,6 +82,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
    custom_theme: undefined,
    api_enabled: false,
    api_port: 10108,
+    api_token: undefined,
  });
  const [originalSettings, setOriginalSettings] = useState<AppSettings>({
    set_as_default_browser: false,
@@ -88,6 +90,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
    custom_theme: undefined,
    api_enabled: false,
    api_port: 10108,
+    api_token: undefined,
  });
  const [customThemeState, setCustomThemeState] = useState<CustomThemeState>({
    selectedThemeId: null,
@@ -298,7 +301,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
    setIsSaving(true);
    try {
      // Update settings with current custom theme state
-      const settingsToSave = {
+      let settingsToSave: AppSettings = {
        ...settings,
        custom_theme:
          settings.theme === "custom"
@@ -306,7 +309,12 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
            : settings.custom_theme,
      };

-      await invoke("save_app_settings", { settings: settingsToSave });
+      const savedSettings = await invoke<AppSettings>("save_app_settings", {
+        settings: settingsToSave,
+      });
+      // Update settings with any generated tokens
+      setSettings(savedSettings);
+      settingsToSave = savedSettings;
      setTheme(settings.theme === "custom" ? "dark" : settings.theme);

      // Apply or clear custom variables only on Save
@@ -355,7 +363,12 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
          });
          // Revert the API enabled setting if start failed
          settingsToSave.api_enabled = false;
-          await invoke("save_app_settings", { settings: settingsToSave });
+          const revertedSettings = await invoke<AppSettings>(
+            "save_app_settings",
+            { settings: settingsToSave },
+          );
+          setSettings(revertedSettings);
+          settingsToSave = revertedSettings;
        }
      } else if (!isApiEnabled && wasApiEnabled) {
        // Stop API server
@@ -764,8 +777,34 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
              <Checkbox
                id="api-enabled"
                checked={settings.api_enabled}
-                onCheckedChange={(checked: boolean) => {
+                onCheckedChange={async (checked: boolean) => {
                  updateSetting("api_enabled", checked);
+                  try {
+                    if (checked) {
+                      // Ask backend to enable API and return settings with token
+                      const next = await invoke<AppSettings>(
+                        "save_app_settings",
+                        {
+                          settings: { ...settings, api_enabled: true },
+                        },
+                      );
+                      setSettings(next);
+                    } else {
+                      const next = await invoke<AppSettings>(
+                        "save_app_settings",
+                        {
+                          settings: {
+                            ...settings,
+                            api_enabled: false,
+                            api_token: null,
+                          },
+                        },
+                      );
+                      setSettings(next);
+                    }
+                  } catch (e) {
+                    console.error("Failed to toggle API:", e);
+                  }
                }}
              />
              <div className="grid gap-1.5 leading-none">
@@ -787,6 +826,210 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                </p>
              </div>
            </div>
+
+            {settings.api_enabled && settings.api_token && (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  API Authentication Token
+                </Label>
+                <div className="flex items-center space-x-2">
+                  <input
+                    type="text"
+                    value={settings.api_token}
+                    readOnly
+                    className="flex-1 px-3 py-2 font-mono text-sm rounded-md border bg-muted"
+                  />
+                  <RippleButton
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      navigator.clipboard.writeText(settings.api_token || "");
+                      showSuccessToast("API token copied to clipboard");
+                    }}
+                  >
+                    Copy
+                  </RippleButton>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Include this token in the Authorization header as "Bearer{" "}
+                  {settings.api_token}" for all API requests.
+                </p>
+                {/* Temporary in-app API docs */}
+                <div className="p-3 mt-3 space-y-2 text-xs leading-relaxed rounded-md border bg-muted/40">
+                  <div className="font-medium">
+                    Temporary in-app API docs (alpha)
+                  </div>
+                  <div>
+                    <div>
+                      Base URL:{" "}
+                      <code className="font-mono">{`http://127.0.0.1:${apiServerPort ?? settings.api_port ?? 10108}/v1`}</code>
+                    </div>
+                    <div>
+                      Auth:{" "}
+                      <code className="font-mono">
+                        Authorization: Bearer {settings.api_token}
+                      </code>
+                    </div>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Profiles</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /profiles</code> — list
+                        profiles
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /profiles/{"{"}id{"}"}
+                        </code>{" "}
+                        — get one
+                      </li>
+                      <li>
+                        <code className="font-mono">POST /profiles</code> —
+                        create
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name, browser, version; optional:
+                          release_type, proxy_id, camoufox_config, group_id,
+                          tags)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          PUT /profiles/{"{"}id{"}"}
+                        </code>{" "}
+                        — update
+                        <span className="ml-1 text-muted-foreground">
+                          (any of: name, version, proxy_id, camoufox_config,
+                          group_id, tags)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          DELETE /profiles/{"{"}id{"}"}
+                        </code>{" "}
+                        — delete
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          POST /profiles/{"{"}id{"}"}/run?headless=true|false
+                        </code>{" "}
+                        — launch with remote debugging
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Groups</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /groups</code> — list
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /groups/{"{"}id{"}"}
+                        </code>{" "}
+                        — get one
+                      </li>
+                      <li>
+                        <code className="font-mono">POST /groups</code> — create
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          PUT /groups/{"{"}id{"}"}
+                        </code>{" "}
+                        — rename
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          DELETE /groups/{"{"}id{"}"}
+                        </code>{" "}
+                        — delete
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Tags</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /tags</code> — list
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Proxies</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /proxies</code> — list
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /proxies/{"{"}id{"}"}
+                        </code>{" "}
+                        — get one
+                      </li>
+                      <li>
+                        <code className="font-mono">POST /proxies</code> —
+                        create
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name, proxy_settings object)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          PUT /proxies/{"{"}id{"}"}
+                        </code>{" "}
+                        — update
+                        <span className="ml-1 text-muted-foreground">
+                          (optional: name, proxy_settings)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          DELETE /proxies/{"{"}id{"}"}
+                        </code>{" "}
+                        — delete
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Browsers</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">
+                          POST /browsers/download
+                        </code>{" "}
+                        — download
+                        <span className="ml-1 text-muted-foreground">
+                          (required: browser, version)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /browsers/{"{"}browser{"}"}/versions
+                        </code>{" "}
+                        — list versions
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /browsers/{"{"}browser{"}"}/versions/{"{"}version
+                          {"}"}/downloaded
+                        </code>{" "}
+                        — is downloaded
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="text-muted-foreground">
+                    These docs are temporary and will be replaced with full
+                    documentation later.
+                  </div>
+                </div>
+              </div>
+            )}
          </div>

          {/* Advanced Section */}
@@ -538,105 +538,6 @@ export function SharedCamoufoxConfigForm({
        </div>
      </div>

-      {/* WebGL Properties */}
-      <div className="space-y-3">
-        <Label>WebGL Properties</Label>
-        <div className="grid grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <Label htmlFor="webgl-vendor">WebGL Vendor</Label>
-            <Input
-              id="webgl-vendor"
-              value={fingerprintConfig["webGl:vendor"] || ""}
-              onChange={(e) =>
-                updateFingerprintConfig(
-                  "webGl:vendor",
-                  e.target.value || undefined,
-                )
-              }
-              placeholder="e.g., Mesa"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="webgl-renderer">WebGL Renderer</Label>
-            <Input
-              id="webgl-renderer"
-              value={fingerprintConfig["webGl:renderer"] || ""}
-              onChange={(e) =>
-                updateFingerprintConfig(
-                  "webGl:renderer",
-                  e.target.value || undefined,
-                )
-              }
-              placeholder="e.g., llvmpipe, or similar"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* WebGL Parameters */}
-      <div className="space-y-3">
-        <ObjectEditor
-          value={
-            (fingerprintConfig["webGl:parameters"] as Record<
-              string,
-              unknown
-            >) || {}
-          }
-          onChange={(value) =>
-            updateFingerprintConfig("webGl:parameters", value)
-          }
-          title="WebGL Parameters"
-        />
-      </div>
-
-      {/* WebGL2 Parameters */}
-      <div className="space-y-3">
-        <ObjectEditor
-          value={
-            (fingerprintConfig["webGl2:parameters"] as Record<
-              string,
-              unknown
-            >) || {}
-          }
-          onChange={(value) =>
-            updateFingerprintConfig("webGl2:parameters", value)
-          }
-          title="WebGL2 Parameters"
-        />
-      </div>
-
-      {/* WebGL Shader Precision Formats */}
-      <div className="space-y-3">
-        <ObjectEditor
-          value={
-            (fingerprintConfig["webGl:shaderPrecisionFormats"] as Record<
-              string,
-              unknown
-            >) || {}
-          }
-          onChange={(value) =>
-            updateFingerprintConfig("webGl:shaderPrecisionFormats", value)
-          }
-          title="WebGL Shader Precision Formats"
-        />
-      </div>
-
-      {/* WebGL2 Shader Precision Formats */}
-      <div className="space-y-3">
-        <ObjectEditor
-          value={
-            (fingerprintConfig["webGl2:shaderPrecisionFormats"] as Record<
-              string,
-              unknown
-            >) || {}
-          }
-          onChange={(value) =>
-            updateFingerprintConfig("webGl2:shaderPrecisionFormats", value)
-          }
-          title="WebGL2 Shader Precision Formats"
-        />
-      </div>
-
      {/* Geolocation */}
      <div className="space-y-3">
        <Label>Geolocation</Label>
@@ -737,6 +638,105 @@ export function SharedCamoufoxConfigForm({
        </div>
      </div>

+      {/* WebGL Properties */}
+      <div className="space-y-3">
+        <Label>WebGL Properties</Label>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="webgl-vendor">WebGL Vendor</Label>
+            <Input
+              id="webgl-vendor"
+              value={fingerprintConfig["webGl:vendor"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "webGl:vendor",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., Mesa"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="webgl-renderer">WebGL Renderer</Label>
+            <Input
+              id="webgl-renderer"
+              value={fingerprintConfig["webGl:renderer"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "webGl:renderer",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., llvmpipe, or similar"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* WebGL Parameters */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl:parameters"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl:parameters", value)
+          }
+          title="WebGL Parameters"
+        />
+      </div>
+
+      {/* WebGL2 Parameters */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl2:parameters"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl2:parameters", value)
+          }
+          title="WebGL2 Parameters"
+        />
+      </div>
+
+      {/* WebGL Shader Precision Formats */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl:shaderPrecisionFormats"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl:shaderPrecisionFormats", value)
+          }
+          title="WebGL Shader Precision Formats"
+        />
+      </div>
+
+      {/* WebGL2 Shader Precision Formats */}
+      <div className="space-y-3">
+        <ObjectEditor
+          value={
+            (fingerprintConfig["webGl2:shaderPrecisionFormats"] as Record<
+              string,
+              unknown
+            >) || {}
+          }
+          onChange={(value) =>
+            updateFingerprintConfig("webGl2:shaderPrecisionFormats", value)
+          }
+          title="WebGL2 Shader Precision Formats"
+        />
+      </div>
+
      {/* Fonts */}
      <div className="space-y-3">
        <Label>Fonts</Label>
@@ -0,0 +1,90 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { useCallback, useEffect, useState } from "react";
+import type { GroupWithCount } from "@/types";
+
+/**
+ * Custom hook to manage group-related state and listen for backend events.
+ * This hook eliminates the need for manual UI refreshes by automatically
+ * updating state when the backend emits group change events.
+ */
+export function useGroupEvents() {
+  const [groups, setGroups] = useState<GroupWithCount[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load groups from backend
+  const loadGroups = useCallback(async () => {
+    try {
+      const groupsWithCounts = await invoke<GroupWithCount[]>(
+        "get_groups_with_profile_counts",
+      );
+      setGroups(groupsWithCounts);
+      setError(null);
+    } catch (err: unknown) {
+      console.error("Failed to load groups:", err);
+      setError(`Failed to load groups: ${JSON.stringify(err)}`);
+    }
+  }, []);
+
+  // Clear error state
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  // Initial load and event listeners setup
+  useEffect(() => {
+    let groupsUnlisten: (() => void) | undefined;
+
+    const setupListeners = async () => {
+      try {
+        // Initial load
+        await loadGroups();
+
+        // Listen for group changes (create, delete, rename, update, etc.)
+        groupsUnlisten = await listen("groups-changed", () => {
+          console.log("Received groups-changed event, reloading groups");
+          void loadGroups();
+        });
+
+        // Also listen for profile changes since groups show profile counts
+        const profilesUnlisten = await listen("profiles-changed", () => {
+          console.log(
+            "Received profiles-changed event, reloading groups for updated counts",
+          );
+          void loadGroups();
+        });
+
+        // Store both listeners for cleanup
+        groupsUnlisten = () => {
+          groupsUnlisten?.();
+          profilesUnlisten();
+        };
+
+        console.log("Group event listeners set up successfully");
+      } catch (err) {
+        console.error("Failed to setup group event listeners:", err);
+        setError(
+          `Failed to setup group event listeners: ${JSON.stringify(err)}`,
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void setupListeners();
+
+    // Cleanup listeners on unmount
+    return () => {
+      if (groupsUnlisten) groupsUnlisten();
+    };
+  }, [loadGroups]);
+
+  return {
+    groups,
+    isLoading,
+    error,
+    loadGroups,
+    clearError,
+  };
+}
@@ -0,0 +1,185 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { useCallback, useEffect, useState } from "react";
+import type { BrowserProfile, GroupWithCount } from "@/types";
+
+interface UseProfileEventsReturn {
+  profiles: BrowserProfile[];
+  groups: GroupWithCount[];
+  runningProfiles: Set<string>;
+  isLoading: boolean;
+  error: string | null;
+  loadProfiles: () => Promise<void>;
+  loadGroups: () => Promise<void>;
+  clearError: () => void;
+}
+
+/**
+ * Custom hook to manage profile-related state and listen for backend events.
+ * This hook eliminates the need for manual UI refreshes by automatically
+ * updating state when the backend emits profile change events.
+ */
+export function useProfileEvents(): UseProfileEventsReturn {
+  const [profiles, setProfiles] = useState<BrowserProfile[]>([]);
+  const [groups, setGroups] = useState<GroupWithCount[]>([]);
+  const [runningProfiles, setRunningProfiles] = useState<Set<string>>(
+    new Set(),
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load profiles from backend
+  const loadProfiles = useCallback(async () => {
+    try {
+      const profileList = await invoke<BrowserProfile[]>(
+        "list_browser_profiles",
+      );
+      setProfiles(profileList);
+      setError(null);
+    } catch (err: unknown) {
+      console.error("Failed to load profiles:", err);
+      setError(`Failed to load profiles: ${JSON.stringify(err)}`);
+    }
+  }, []);
+
+  // Load groups from backend
+  const loadGroups = useCallback(async () => {
+    try {
+      const groupsWithCounts = await invoke<GroupWithCount[]>(
+        "get_groups_with_profile_counts",
+      );
+      setGroups(groupsWithCounts);
+      setError(null);
+    } catch (err) {
+      console.error("Failed to load groups with counts:", err);
+      setGroups([]);
+    }
+  }, []);
+
+  // Clear error state
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  // Initial load and event listeners setup
+  useEffect(() => {
+    let profilesUnlisten: (() => void) | undefined;
+    let runningUnlisten: (() => void) | undefined;
+
+    const setupListeners = async () => {
+      try {
+        // Initial load
+        await Promise.all([loadProfiles(), loadGroups()]);
+
+        // Listen for profile changes (create, delete, rename, update, etc.)
+        profilesUnlisten = await listen("profiles-changed", () => {
+          console.log(
+            "Received profiles-changed event, reloading profiles and groups",
+          );
+          void loadProfiles();
+          void loadGroups();
+        });
+
+        // Listen for profile running state changes
+        runningUnlisten = await listen<{ id: string; is_running: boolean }>(
+          "profile-running-changed",
+          (event) => {
+            const { id, is_running } = event.payload;
+            setRunningProfiles((prev) => {
+              const next = new Set(prev);
+              if (is_running) {
+                next.add(id);
+              } else {
+                next.delete(id);
+              }
+              return next;
+            });
+          },
+        );
+
+        console.log("Profile event listeners set up successfully");
+      } catch (err) {
+        console.error("Failed to setup profile event listeners:", err);
+        setError(
+          `Failed to setup profile event listeners: ${JSON.stringify(err)}`,
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void setupListeners();
+
+    // Cleanup listeners on unmount
+    return () => {
+      if (profilesUnlisten) profilesUnlisten();
+      if (runningUnlisten) runningUnlisten();
+    };
+  }, [loadProfiles, loadGroups]);
+
+  // Sync profile running states periodically to ensure consistency
+  useEffect(() => {
+    const syncRunningStates = async () => {
+      if (profiles.length === 0) return;
+
+      try {
+        const statusChecks = profiles.map(async (profile) => {
+          try {
+            const isRunning = await invoke<boolean>("check_browser_status", {
+              profile,
+            });
+            return { id: profile.id, isRunning };
+          } catch (error) {
+            console.error(
+              `Failed to check status for profile ${profile.name}:`,
+              error,
+            );
+            return { id: profile.id, isRunning: false };
+          }
+        });
+
+        const statuses = await Promise.all(statusChecks);
+
+        setRunningProfiles((prev) => {
+          const next = new Set(prev);
+          let hasChanges = false;
+
+          statuses.forEach(({ id, isRunning }) => {
+            if (isRunning && !prev.has(id)) {
+              next.add(id);
+              hasChanges = true;
+            } else if (!isRunning && prev.has(id)) {
+              next.delete(id);
+              hasChanges = true;
+            }
+          });
+
+          return hasChanges ? next : prev;
+        });
+      } catch (error) {
+        console.error("Failed to sync profile running states:", error);
+      }
+    };
+
+    // Initial sync
+    void syncRunningStates();
+
+    // Sync every 30 seconds to catch any missed events
+    const interval = setInterval(() => {
+      void syncRunningStates();
+    }, 30000);
+
+    return () => clearInterval(interval);
+  }, [profiles]);
+
+  return {
+    profiles,
+    groups,
+    runningProfiles,
+    isLoading,
+    error,
+    loadProfiles,
+    loadGroups,
+    clearError,
+  };
+}
@@ -0,0 +1,112 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { useCallback, useEffect, useState } from "react";
+import type { StoredProxy } from "@/types";
+
+/**
+ * Custom hook to manage proxy-related state and listen for backend events.
+ * This hook eliminates the need for manual UI refreshes by automatically
+ * updating state when the backend emits proxy change events.
+ */
+export function useProxyEvents() {
+  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
+  const [proxyUsage, setProxyUsage] = useState<Record<string, number>>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load proxy usage (how many profiles are using each proxy)
+  const loadProxyUsage = useCallback(async () => {
+    try {
+      const profiles = await invoke<Array<{ proxy_id?: string }>>(
+        "list_browser_profiles",
+      );
+      const counts: Record<string, number> = {};
+      for (const p of profiles) {
+        if (p.proxy_id) counts[p.proxy_id] = (counts[p.proxy_id] ?? 0) + 1;
+      }
+      setProxyUsage(counts);
+    } catch (err) {
+      console.error("Failed to load proxy usage:", err);
+      // Don't set error for non-critical proxy usage
+    }
+  }, []);
+
+  // Load proxies from backend
+  const loadProxies = useCallback(async () => {
+    try {
+      const stored = await invoke<StoredProxy[]>("get_stored_proxies");
+      setStoredProxies(stored);
+      await loadProxyUsage();
+      setError(null);
+    } catch (err: unknown) {
+      console.error("Failed to load proxies:", err);
+      setError(`Failed to load proxies: ${JSON.stringify(err)}`);
+    }
+  }, [loadProxyUsage]);
+
+  // Clear error state
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  // Initial load and event listeners setup
+  useEffect(() => {
+    let proxiesUnlisten: (() => void) | undefined;
+    let profilesUnlisten: (() => void) | undefined;
+    let storedProxiesUnlisten: (() => void) | undefined;
+
+    const setupListeners = async () => {
+      try {
+        // Initial load
+        await loadProxies();
+
+        // Listen for proxy changes (create, delete, update, start, stop, etc.)
+        proxiesUnlisten = await listen("proxies-changed", () => {
+          console.log("Received proxies-changed event, reloading proxies");
+          void loadProxies();
+        });
+
+        // Listen for profile changes to update proxy usage counts
+        profilesUnlisten = await listen("profiles-changed", () => {
+          console.log("Received profiles-changed event, reloading proxy usage");
+          void loadProxyUsage();
+        });
+
+        // Listen for profile updates to update proxy usage counts
+        storedProxiesUnlisten = await listen("stored-proxies-changed", () => {
+          console.log(
+            "Received stored-proxies-changed event, reloading proxies",
+          );
+          void loadProxies();
+        });
+
+        console.log("Proxy event listeners set up successfully");
+      } catch (err) {
+        console.error("Failed to setup proxy event listeners:", err);
+        setError(
+          `Failed to setup proxy event listeners: ${JSON.stringify(err)}`,
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void setupListeners();
+
+    // Cleanup listeners on unmount
+    return () => {
+      if (proxiesUnlisten) proxiesUnlisten();
+      if (profilesUnlisten) profilesUnlisten();
+      if (storedProxiesUnlisten) storedProxiesUnlisten();
+    };
+  }, [loadProxies, loadProxyUsage]);
+
+  return {
+    storedProxies,
+    proxyUsage,
+    isLoading,
+    error,
+    loadProxies,
+    clearError,
+  };
+}
Author	SHA1	Message	Date
zhom	485daae40e	chore: formatting	2025-08-23 14:02:49 +04:00
zhom	a48eb5d631	refactor: cleanup empty browser folders	2025-08-21 09:13:30 +04:00
zhom	0d79f385bd	chore: cleanup	2025-08-19 14:01:24 +04:00
zhom	25bb1dccdc	chore: version bump	2025-08-19 13:57:58 +04:00
zhom	97044d58fe	feat: proxy sorting	2025-08-19 13:55:40 +04:00
zhom	4748a31714	style: don't overflow	2025-08-19 13:50:24 +04:00
zhom	d91c97dd85	chore: formatting	2025-08-19 13:47:19 +04:00
zhom	8e299fddd4	feat: docs inside ui	2025-08-19 13:45:19 +04:00
zhom	6c3c9fb58a	chore: comment	2025-08-19 13:38:38 +04:00
zhom	f5066e866b	fix: pass id instead of profile name to open_url_with_profile	2025-08-19 13:38:29 +04:00
zhom	e12a5661b1	refactor: use ids instead of names for all profile operations	2025-08-19 13:31:46 +04:00
zhom	f8a4ec3277	refactor: require auth for local api	2025-08-19 13:31:28 +04:00
zhom	1e5664e3b2	feat: launch browsers via api and expose them to selenium	2025-08-19 09:49:39 +04:00
zhom	d0fea2fec1	style: scroll area adjustments	2025-08-19 09:48:46 +04:00
zhom	ce0627030d	style: move geolocation and locale fields above webgl	2025-08-18 18:26:05 +04:00
zhom	d70ec16706	refacto: use backend events for ui update	2025-08-18 18:10:37 +04:00
zhom	5863d5549e	chore: version bump	2025-08-18 17:47:07 +04:00
zhom	4df35515ae	chore: formatting	2025-08-18 17:46:52 +04:00
zhom	59f430ec43	refactor: make ui reactive for proxy changes	2025-08-18 17:37:42 +04:00
zhom	9f68a21824	refactor: make ui reactive for group changes	2025-08-18 17:37:22 +04:00
zhom	9bf7f39c0c	docs: agents	2025-08-18 17:01:10 +04:00
zhom	d1b45778c4	style: don't trim 'Not Selected'	2025-08-18 16:58:38 +04:00
zhom	6d6527d812	refactor: update ui on profile events	2025-08-18 16:54:36 +04:00