style: make the row chart shorter

.github/workflows/release-notes-generator.yml

@@ -11,7 +11,7 @@ permissions:
 jobs:
   generate-release-notes:
     runs-on: ubuntu-latest
-    if: startsWith(github.ref, 'refs/tags/v') && !github.event.release.prerelease
+    if: startsWith(github.event.release.tag_name, 'v') && !github.event.release.prerelease
 
     steps:
       - name: Checkout repository
@@ -23,7 +23,7 @@ jobs:
         id: get-previous-tag
         run: |
           # Get the previous release tag (excluding the current one)
-          CURRENT_TAG="${{ github.ref_name }}"
+          CURRENT_TAG="${{ github.event.release.tag_name }}"
           PREVIOUS_TAG=$(git tag --sort=-version:refname | grep -E '^v[0-9]+\.[0-9]+\.[0-9]+$' | grep -v "$CURRENT_TAG" | head -n 1)
 
           if [ -z "$PREVIOUS_TAG" ]; then

.vscode/settings.json

@@ -54,6 +54,7 @@
     "esac",
     "esbuild",
     "etree",
+    "firstrun",
     "flate",
     "frontmost",
     "geoip",
@@ -70,6 +71,7 @@
     "idlelib",
     "idletime",
     "idna",
+    "infobars",
     "Inno",
     "kdeglobals",
     "keras",
@@ -77,10 +79,12 @@
     "killall",
     "Kolkata",
     "kreadconfig",
+    "langpack",
     "launchservices",
     "letterboxing",
     "libatk",
     "libayatana",
+    "libc",
     "libcairo",
     "libgdk",
     "libglib",
@@ -128,6 +132,7 @@
     "plasmohq",
     "platformdirs",
     "prefs",
+    "PRIO",
     "propertylist",
     "psutil",
     "pycache",
@@ -137,6 +142,7 @@
     "pyoxidizer",
     "pytest",
     "pyyaml",
+    "reportingpolicy",
     "reqwest",
     "ridedott",
     "rlib",
@@ -147,6 +153,9 @@
     "screeninfo",
     "selectables",
     "serde",
+    "sessionstore",
+    "setpriority",
+    "setsid",
     "SETTINGCHANGE",
     "setuptools",
     "shadcn",
@@ -180,6 +189,7 @@
     "Torbrowser",
     "tqdm",
     "trackingprotection",
+    "trailhead",
     "turbopack",
     "turtledemo",
     "udeps",

nodecar/package.json

@@ -21,15 +21,15 @@
   "author": "",
   "license": "AGPL-3.0",
   "dependencies": {
-    "@types/node": "^24.10.0",
+    "@types/node": "^24.10.1",
     "commander": "^14.0.2",
     "donutbrowser-camoufox-js": "^0.7.0",
     "dotenv": "^17.2.3",
-    "fingerprint-generator": "^2.1.76",
+    "fingerprint-generator": "^2.1.77",
     "get-port": "^7.1.0",
     "nodemon": "^3.1.11",
-    "playwright-core": "^1.56.1",
-    "proxy-chain": "^2.5.9",
+    "playwright-core": "^1.57.0",
+    "proxy-chain": "^2.6.0",
     "tmp": "^0.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3"

nodecar/src/camoufox-launcher.ts

@@ -267,6 +267,18 @@ export async function startCamoufoxProcess(
   });
 }
 
+/**
+ * Check if a process is running by PID
+ */
+function isProcessRunning(pid: number): boolean {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Stop a Camoufox process
  * @param id The Camoufox ID to stop
@@ -279,45 +291,85 @@ export async function stopCamoufoxProcess(id: string): Promise<boolean> {
     return false;
   }
 
+  const pid = config.processId;
+
   try {
     // Method 1: If we have a process ID, kill by PID with proper signal sequence
-    if (config.processId) {
+    if (pid && isProcessRunning(pid)) {
       try {
         // First try SIGTERM for graceful shutdown
-        process.kill(config.processId, "SIGTERM");
-        // Give it more time to terminate gracefully (increased from 2s to 5s)
-        await new Promise((resolve) => setTimeout(resolve, 5000));
+        process.kill(pid, "SIGTERM");
 
-        // Check if process is still running
-        try {
-          process.kill(config.processId, 0); // Signal 0 checks if process exists
-          process.kill(config.processId, "SIGKILL");
-        } catch {}
-      } catch {}
+        // Wait up to 3 seconds for graceful shutdown
+        for (let i = 0; i < 30; i++) {
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          if (!isProcessRunning(pid)) {
+            break;
+          }
+        }
+
+        // If still running, force kill
+        if (isProcessRunning(pid)) {
+          process.kill(pid, "SIGKILL");
+          // Wait for SIGKILL to take effect
+          for (let i = 0; i < 20; i++) {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            if (!isProcessRunning(pid)) {
+              break;
+            }
+          }
+        }
+      } catch {
+        // Process might have already exited
+      }
     }
 
-    // Method 2: Pattern-based kill as fallback
-    const killByPattern = spawn(
-      "pkill",
-      ["-TERM", "-f", `camoufox-worker.*${id}`],
-      {
-        stdio: "ignore",
-      },
-    );
-
-    // Wait for pattern-based kill command to complete
+    // Method 2: Pattern-based kill as fallback (kills any child processes)
     await new Promise<void>((resolve) => {
+      const killByPattern = spawn(
+        "pkill",
+        ["-TERM", "-f", `camoufox-worker.*${id}`],
+        { stdio: "ignore" },
+      );
       killByPattern.on("exit", () => resolve());
-      // Timeout after 3 seconds
-      setTimeout(() => resolve(), 3000);
+      setTimeout(() => resolve(), 1000);
     });
 
-    // Final cleanup with SIGKILL if needed
-    setTimeout(() => {
-      spawn("pkill", ["-KILL", "-f", `camoufox-worker.*${id}`], {
-        stdio: "ignore",
+    // Wait a moment then force kill any remaining
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    await new Promise<void>((resolve) => {
+      const killByPatternForce = spawn(
+        "pkill",
+        ["-KILL", "-f", `camoufox-worker.*${id}`],
+        { stdio: "ignore" },
+      );
+      killByPatternForce.on("exit", () => resolve());
+      setTimeout(() => resolve(), 1000);
+    });
+
+    // Also kill any Firefox processes associated with this profile
+    if (config.profilePath) {
+      await new Promise<void>((resolve) => {
+        const killFirefox = spawn(
+          "pkill",
+          ["-KILL", "-f", config.profilePath!],
+          { stdio: "ignore" },
+        );
+        killFirefox.on("exit", () => resolve());
+        setTimeout(() => resolve(), 1000);
       });
-    }, 1000);
+    }
+
+    // Verify process is actually dead
+    if (pid && isProcessRunning(pid)) {
+      // Last resort: SIGKILL again
+      try {
+        process.kill(pid, "SIGKILL");
+      } catch {
+        // Ignore
+      }
+    }
 
     // Delete the configuration
     deleteCamoufoxConfig(id);

nodecar/src/utils.ts

@@ -66,6 +66,7 @@ export function parseProxyString(proxyString: LaunchOptions["proxy"] | string) {
     // Try parsing as URL first (handles protocol://username:password@host:port)
     if (trimmed.includes("://")) {
       const url = new URL(trimmed);
+      // Playwright accepts short form "host:port" for HTTP proxies
       server = `${url.hostname}:${url.port}`;
 
       if (url.username) {

package.json

@@ -2,7 +2,7 @@
   "name": "donutbrowser",
   "private": true,
   "license": "AGPL-3.0",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
@@ -41,7 +41,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
-    "@tauri-apps/api": "^2.9.0",
+    "@tauri-apps/api": "^2.9.1",
     "@tauri-apps/plugin-deep-link": "^2.4.5",
     "@tauri-apps/plugin-dialog": "^2.4.2",
     "@tauri-apps/plugin-fs": "~2.4.4",
@@ -51,15 +51,17 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "color": "^5.0.2",
+    "color": "^5.0.3",
     "flag-icons": "^7.5.0",
+    "lucide-react": "^0.555.0",
     "motion": "^12.23.24",
-    "next": "^15.5.6",
+    "next": "^16.0.6",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
+    "recharts": "3.5.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tauri-plugin-macos-permissions-api": "^2.3.0"
@@ -67,14 +69,14 @@
   "devDependencies": {
     "@biomejs/biome": "2.2.3",
     "@tailwindcss/postcss": "^4.1.17",
-    "@tauri-apps/cli": "^2.9.4",
+    "@tauri-apps/cli": "^2.9.5",
     "@types/color": "^4.2.0",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.3",
-    "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.6",
+    "lint-staged": "^16.2.7",
     "tailwindcss": "^4.1.17",
     "ts-unused-exports": "^11.0.1",
     "tw-animate-css": "^1.4.0",

src-tauri/Cargo.lock

@@ -1293,7 +1293,7 @@ dependencies = [
 
 [[package]]
 name = "donutbrowser"
-version = "0.12.3"
+version = "0.13.1"
 dependencies = [
  "aes-gcm",
  "argon2",

src-tauri/Cargo.toml

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

src-tauri/capabilities/default.json

@@ -5,7 +5,15 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
-    "core:event:default",
+    "core:event:allow-listen",
+    "core:event:allow-emit",
+    "core:event:allow-emit-to",
+    "core:event:allow-unlisten",
+    "core:image:default",
+    "core:menu:default",
+    "core:path:default",
+    "core:tray:default",
+    "core:webview:default",
     "core:window:default",
     "core:window:allow-start-dragging",
     "core:window:allow-close",

src-tauri/src/api_client.rs

@@ -564,7 +564,6 @@ impl ApiClient {
     let cached_data: CachedGithubData = serde_json::from_str(&content).ok()?;
 
     // Always use cached GitHub releases - cache never expires, only gets updated with new versions
-    log::info!("Using cached GitHub releases for {browser}");
     Some(cached_data.releases)
   }
 

src-tauri/src/app_auto_updater.rs

@@ -999,6 +999,22 @@ impl AppAutoUpdater {
       // Clean up backup after successful installation
       let _ = fs::remove_dir_all(&backup_path);
 
+      // Clean up old "Donut Browser.app" if it exists (from before the project rename)
+      if let Some(parent_dir) = current_app_path.parent() {
+        let old_app_path = parent_dir.join("Donut Browser.app");
+        if old_app_path.exists() && old_app_path != current_app_path {
+          log::info!(
+            "Removing old 'Donut Browser.app' from: {}",
+            old_app_path.display()
+          );
+          if let Err(e) = fs::remove_dir_all(&old_app_path) {
+            log::warn!("Warning: Failed to remove old 'Donut Browser.app': {e}");
+          } else {
+            log::info!("Successfully removed old 'Donut Browser.app'");
+          }
+        }
+      }
+
       Ok(())
     }
 

src-tauri/src/auto_updater.rs

@@ -517,6 +517,7 @@ mod tests {
       camoufox_config: None,
       group_id: None,
       tags: Vec::new(),
+      note: None,
     }
   }
 

src-tauri/src/bin/proxy_server.rs

@@ -1,11 +1,60 @@
 use clap::{Arg, Command};
 use donutbrowser_lib::proxy_runner::{
-  start_proxy_process, stop_all_proxy_processes, stop_proxy_process,
+  start_proxy_process_with_profile, stop_all_proxy_processes, stop_proxy_process,
 };
 use donutbrowser_lib::proxy_server::run_proxy_server;
 use donutbrowser_lib::proxy_storage::get_proxy_config;
 use std::process;
 
+fn set_high_priority() {
+  #[cfg(unix)]
+  {
+    unsafe {
+      // Set high priority (negative nice value = higher priority)
+      // -10 is a reasonably high priority without being too aggressive
+      // This may fail without elevated privileges, which is fine
+      let result = libc::setpriority(libc::PRIO_PROCESS, 0, -10);
+      if result == 0 {
+        log::info!("Set process priority to -10 (high priority)");
+      } else {
+        // Try a less aggressive priority if -10 fails
+        let result = libc::setpriority(libc::PRIO_PROCESS, 0, -5);
+        if result == 0 {
+          log::info!("Set process priority to -5 (above normal)");
+        }
+      }
+    }
+  }
+
+  #[cfg(target_os = "linux")]
+  {
+    // Lower OOM score so this process is less likely to be killed under memory pressure
+    // Valid range is -1000 to 1000, lower = less likely to be killed
+    // -500 is a reasonable value that makes us less likely to be killed
+    if let Err(e) = std::fs::write("/proc/self/oom_score_adj", "-500") {
+      log::debug!("Could not set OOM score adjustment: {}", e);
+    } else {
+      log::info!("Set OOM score adjustment to -500");
+    }
+  }
+
+  #[cfg(windows)]
+  {
+    use windows::Win32::System::Threading::{
+      GetCurrentProcess, SetPriorityClass, ABOVE_NORMAL_PRIORITY_CLASS,
+    };
+
+    unsafe {
+      let process = GetCurrentProcess();
+      if SetPriorityClass(process, ABOVE_NORMAL_PRIORITY_CLASS).is_ok() {
+        log::info!("Set process priority to ABOVE_NORMAL_PRIORITY_CLASS");
+      } else {
+        log::debug!("Could not set process priority class");
+      }
+    }
+  }
+}
+
 fn build_proxy_url(
   proxy_type: &str,
   host: &str,
@@ -87,6 +136,11 @@ async fn main() {
                 .short('u')
                 .long("upstream")
                 .help("Upstream proxy URL (protocol://[username:password@]host:port)"),
+            )
+            .arg(
+              Arg::new("profile-id")
+                .long("profile-id")
+                .help("ID of the profile this proxy is associated with"),
             ),
         )
         .subcommand(
@@ -138,8 +192,9 @@ async fn main() {
       }
 
       let port = start_matches.get_one::<u16>("port").copied();
+      let profile_id = start_matches.get_one::<String>("profile-id").cloned();
 
-      match start_proxy_process(upstream_url, port).await {
+      match start_proxy_process_with_profile(upstream_url, port, profile_id).await {
         Ok(config) => {
           // Output the configuration as JSON for the Rust side to parse
           // Use println! here because this needs to go to stdout for parsing
@@ -224,6 +279,9 @@ async fn main() {
       .expect("action is required");
 
     if action == "start" {
+      // Set high priority so this process is killed last under resource pressure
+      set_high_priority();
+
       log::error!("Proxy worker starting, looking for config id: {}", id);
       log::error!("Process PID: {}", std::process::id());
 

src-tauri/src/browser.rs

@@ -737,6 +737,10 @@ impl Browser for ChromiumBrowser {
       "--disable-background-timer-throttling".to_string(),
       "--crash-server-url=".to_string(),
       "--disable-updater".to_string(),
+      // Disable quit confirmation and session restore prompts
+      "--disable-session-crashed-bubble".to_string(),
+      "--hide-crash-restore-bubble".to_string(),
+      "--disable-infobars".to_string(),
     ];
 
     // Add remote debugging if requested

src-tauri/src/browser_runner.rs

@@ -149,12 +149,13 @@ impl BrowserRunner {
 
       // Start the proxy and get local proxy settings
       // If proxy startup fails, DO NOT launch Camoufox - it requires local proxy
+      let profile_id_str = profile.id.to_string();
       let local_proxy = PROXY_MANAGER
         .start_proxy(
           app_handle.clone(),
           upstream_proxy.as_ref(),
           0, // Use 0 as temporary PID, will be updated later
-          Some(&profile.name),
+          Some(&profile_id_str),
         )
         .await
         .map_err(|e| {
@@ -823,6 +824,7 @@ impl BrowserRunner {
 
     // Use a temporary PID (1) to start the proxy, we'll update it after browser launch
     let temp_pid = 1u32;
+    let profile_id_str = profile.id.to_string();
 
     // Start local proxy - if this fails, DO NOT launch browser
     let internal_proxy = PROXY_MANAGER
@@ -830,7 +832,7 @@ impl BrowserRunner {
         app_handle.clone(),
         upstream_proxy.as_ref(),
         temp_pid,
-        Some(&profile.name),
+        Some(&profile_id_str),
       )
       .await
       .map_err(|e| {
@@ -1062,6 +1064,19 @@ impl BrowserRunner {
         profile.id
       );
 
+      // Stop the proxy associated with this profile first
+      let profile_id_str = profile.id.to_string();
+      if let Err(e) = PROXY_MANAGER
+        .stop_proxy_by_profile_id(app_handle.clone(), &profile_id_str)
+        .await
+      {
+        log::warn!(
+          "Warning: Failed to stop proxy for profile {}: {e}",
+          profile_id_str
+        );
+      }
+
+      let mut process_actually_stopped = false;
       match self
         .camoufox_manager
         .find_camoufox_by_profile(&profile_path_str)
@@ -1081,13 +1096,69 @@ impl BrowserRunner {
           {
             Ok(stopped) => {
               if stopped {
-                log::info!(
-                  "Successfully stopped Camoufox process: {} (PID: {:?})",
-                  camoufox_process.id,
-                  camoufox_process.processId
-                );
+                // Verify the process actually died by checking after a short delay
+                if let Some(pid) = camoufox_process.processId {
+                  use tokio::time::{sleep, Duration};
+                  sleep(Duration::from_millis(500)).await;
+
+                  use sysinfo::{Pid, System};
+                  let system = System::new_all();
+                  process_actually_stopped = system.process(Pid::from(pid as usize)).is_none();
+
+                  if process_actually_stopped {
+                    log::info!(
+                      "Successfully stopped Camoufox process: {} (PID: {:?}) - verified process is dead",
+                      camoufox_process.id,
+                      pid
+                    );
+                  } else {
+                    log::warn!(
+                      "Camoufox stop command returned success but process {} (PID: {:?}) is still running - forcing kill",
+                      camoufox_process.id,
+                      pid
+                    );
+                    // Force kill the process
+                    #[cfg(target_os = "macos")]
+                    {
+                      use crate::platform_browser;
+                      if let Err(e) = platform_browser::macos::kill_browser_process_impl(
+                        pid,
+                        Some(&profile_path_str),
+                      )
+                      .await
+                      {
+                        log::error!("Failed to force kill Camoufox process {}: {}", pid, e);
+                      } else {
+                        process_actually_stopped = true;
+                      }
+                    }
+                    #[cfg(target_os = "linux")]
+                    {
+                      use crate::platform_browser;
+                      if let Err(e) = platform_browser::linux::kill_browser_process_impl(pid).await
+                      {
+                        log::error!("Failed to force kill Camoufox process {}: {}", pid, e);
+                      } else {
+                        process_actually_stopped = true;
+                      }
+                    }
+                    #[cfg(target_os = "windows")]
+                    {
+                      use crate::platform_browser;
+                      if let Err(e) =
+                        platform_browser::windows::kill_browser_process_impl(pid).await
+                      {
+                        log::error!("Failed to force kill Camoufox process {}: {}", pid, e);
+                      } else {
+                        process_actually_stopped = true;
+                      }
+                    }
+                  }
+                } else {
+                  process_actually_stopped = true; // No PID to verify, assume stopped
+                }
               } else {
-                log::info!(
+                log::warn!(
                   "Failed to stop Camoufox process: {} (PID: {:?})",
                   camoufox_process.id,
                   camoufox_process.processId
@@ -1095,7 +1166,7 @@ impl BrowserRunner {
               }
             }
             Err(e) => {
-              log::info!(
+              log::error!(
                 "Error stopping Camoufox process {}: {}",
                 camoufox_process.id,
                 e
@@ -1109,9 +1180,10 @@ impl BrowserRunner {
             profile.name,
             profile.id
           );
+          process_actually_stopped = true; // No process found, consider it stopped
         }
         Err(e) => {
-          log::info!(
+          log::error!(
             "Error finding Camoufox process for profile {}: {}",
             profile.name,
             e
@@ -1119,6 +1191,11 @@ impl BrowserRunner {
         }
       }
 
+      // Log warning if process wasn't confirmed stopped, but continue with cleanup
+      if !process_actually_stopped {
+        log::warn!("Camoufox process may still be running, but proceeding with cleanup");
+      }
+
       // Clear the process ID from the profile
       let mut updated_profile = profile.clone();
       updated_profile.process_id = None;
@@ -1695,6 +1772,7 @@ pub async fn launch_browser_profile(
 
     // Use a temporary PID (1) to start the proxy, we'll update it after browser launch
     let temp_pid = 1u32;
+    let profile_id_str = profile.id.to_string();
 
     // Always start a local proxy, even if there's no upstream proxy
     // This allows for traffic monitoring and future features
@@ -1703,7 +1781,7 @@ pub async fn launch_browser_profile(
         app_handle.clone(),
         upstream_proxy.as_ref(),
         temp_pid,
-        Some(&profile.name),
+        Some(&profile_id_str),
       )
       .await
     {

src-tauri/src/camoufox_manager.rs

@@ -349,6 +349,8 @@ impl CamoufoxManager {
   }
 
   /// Find Camoufox server by profile path (for integration with browser_runner)
+  /// This method first checks in-memory instances, then scans system processes
+  /// to detect Camoufox instances that may have been started before the app restarted.
   pub async fn find_camoufox_by_profile(
     &self,
     profile_path: &str,
@@ -356,41 +358,127 @@ impl CamoufoxManager {
     // First clean up any dead instances
     self.cleanup_dead_instances().await?;
 
-    let inner = self.inner.lock().await;
-
     // Convert paths to canonical form for comparison
     let target_path = std::path::Path::new(profile_path)
       .canonicalize()
       .unwrap_or_else(|_| std::path::Path::new(profile_path).to_path_buf());
 
-    for (id, instance) in inner.instances.iter() {
-      if let Some(instance_profile_path) = &instance.profile_path {
-        let instance_path = std::path::Path::new(instance_profile_path)
-          .canonicalize()
-          .unwrap_or_else(|_| std::path::Path::new(instance_profile_path).to_path_buf());
+    // Check in-memory instances first
+    {
+      let inner = self.inner.lock().await;
 
-        if instance_path == target_path {
-          // Verify the server is actually running by checking the process
-          if let Some(process_id) = instance.process_id {
-            if self.is_server_running(process_id).await {
-              // Found running Camoufox instance
-              return Ok(Some(CamoufoxLaunchResult {
-                id: id.clone(),
-                processId: instance.process_id,
-                profilePath: instance.profile_path.clone(),
-                url: instance.url.clone(),
-              }));
-            } else {
-              // Camoufox instance found but process is not running
+      for (id, instance) in inner.instances.iter() {
+        if let Some(instance_profile_path) = &instance.profile_path {
+          let instance_path = std::path::Path::new(instance_profile_path)
+            .canonicalize()
+            .unwrap_or_else(|_| std::path::Path::new(instance_profile_path).to_path_buf());
+
+          if instance_path == target_path {
+            // Verify the server is actually running by checking the process
+            if let Some(process_id) = instance.process_id {
+              if self.is_server_running(process_id).await {
+                // Found running Camoufox instance
+                return Ok(Some(CamoufoxLaunchResult {
+                  id: id.clone(),
+                  processId: instance.process_id,
+                  profilePath: instance.profile_path.clone(),
+                  url: instance.url.clone(),
+                }));
+              }
             }
           }
         }
       }
     }
 
+    // If not found in in-memory instances, scan system processes
+    // This handles the case where the app was restarted but Camoufox is still running
+    if let Some((pid, found_profile_path)) = self.find_camoufox_process_by_profile(&target_path) {
+      log::info!(
+        "Found running Camoufox process (PID: {}) for profile path via system scan",
+        pid
+      );
+
+      // Register this instance in our tracking
+      let instance_id = format!("recovered_{}", pid);
+      let mut inner = self.inner.lock().await;
+      inner.instances.insert(
+        instance_id.clone(),
+        CamoufoxInstance {
+          id: instance_id.clone(),
+          process_id: Some(pid),
+          profile_path: Some(found_profile_path.clone()),
+          url: None,
+        },
+      );
+
+      return Ok(Some(CamoufoxLaunchResult {
+        id: instance_id,
+        processId: Some(pid),
+        profilePath: Some(found_profile_path),
+        url: None,
+      }));
+    }
+
     Ok(None)
   }
 
+  /// Scan system processes to find a Camoufox process using a specific profile path
+  fn find_camoufox_process_by_profile(
+    &self,
+    target_path: &std::path::Path,
+  ) -> Option<(u32, String)> {
+    use sysinfo::{ProcessRefreshKind, RefreshKind, System};
+
+    let system = System::new_with_specifics(
+      RefreshKind::nothing().with_processes(ProcessRefreshKind::everything()),
+    );
+
+    let target_path_str = target_path.to_string_lossy();
+
+    for (pid, process) in system.processes() {
+      let cmd = process.cmd();
+      if cmd.is_empty() {
+        continue;
+      }
+
+      // Check if this is a Camoufox/Firefox process
+      let exe_name = process.name().to_string_lossy().to_lowercase();
+      let is_firefox_like = exe_name.contains("firefox")
+        || exe_name.contains("camoufox")
+        || exe_name.contains("firefox-bin");
+
+      if !is_firefox_like {
+        continue;
+      }
+
+      // Check if the command line contains our profile path
+      for (i, arg) in cmd.iter().enumerate() {
+        if let Some(arg_str) = arg.to_str() {
+          // Check for -profile argument followed by our path
+          if arg_str == "-profile" && i + 1 < cmd.len() {
+            if let Some(next_arg) = cmd.get(i + 1).and_then(|a| a.to_str()) {
+              let cmd_path = std::path::Path::new(next_arg)
+                .canonicalize()
+                .unwrap_or_else(|_| std::path::Path::new(next_arg).to_path_buf());
+
+              if cmd_path == target_path {
+                return Some((pid.as_u32(), next_arg.to_string()));
+              }
+            }
+          }
+
+          // Also check if the argument contains the profile path directly
+          if arg_str.contains(&*target_path_str) {
+            return Some((pid.as_u32(), target_path_str.to_string()));
+          }
+        }
+      }
+    }
+
+    None
+  }
+
   /// Check if servers are still alive and clean up dead instances
   pub async fn cleanup_dead_instances(
     &self,

src-tauri/src/lib.rs

@@ -30,6 +30,7 @@ pub mod proxy_runner;
 pub mod proxy_server;
 pub mod proxy_storage;
 mod settings_manager;
+pub mod traffic_stats;
 // mod theme_detector; // removed: theme detection handled in webview via CSS prefers-color-scheme
 mod tag_manager;
 mod version_updater;
@@ -40,7 +41,8 @@ use browser_runner::{
 
 use profile::manager::{
   check_browser_status, create_browser_profile_new, delete_profile, list_browser_profiles,
-  rename_profile, update_camoufox_config, update_profile_proxy, update_profile_tags,
+  rename_profile, update_camoufox_config, update_profile_note, update_profile_proxy,
+  update_profile_tags,
 };
 
 use browser_version_manager::{
@@ -245,6 +247,33 @@ async fn is_geoip_database_available() -> Result<bool, String> {
   Ok(GeoIPDownloader::is_geoip_database_available())
 }
 
+#[tauri::command]
+async fn get_all_traffic_snapshots() -> Result<Vec<crate::traffic_stats::TrafficSnapshot>, String> {
+  Ok(
+    crate::traffic_stats::list_traffic_stats()
+      .into_iter()
+      .map(|s| s.to_snapshot())
+      .collect(),
+  )
+}
+
+#[tauri::command]
+async fn clear_all_traffic_stats() -> Result<(), String> {
+  crate::traffic_stats::clear_all_traffic_stats()
+    .map_err(|e| format!("Failed to clear traffic stats: {e}"))
+}
+
+#[tauri::command]
+async fn get_traffic_stats_for_period(
+  profile_id: String,
+  seconds: u64,
+) -> Result<Option<crate::traffic_stats::FilteredTrafficStats>, String> {
+  Ok(crate::traffic_stats::get_traffic_stats_for_period(
+    &profile_id,
+    seconds,
+  ))
+}
+
 #[tauri::command]
 async fn download_geoip_database(app_handle: tauri::AppHandle) -> Result<(), String> {
   let downloader = GeoIPDownloader::instance();
@@ -710,6 +739,7 @@ pub fn run() {
       get_browser_release_types,
       update_profile_proxy,
       update_profile_tags,
+      update_profile_note,
       check_browser_status,
       kill_browser_profile,
       rename_profile,
@@ -754,7 +784,10 @@ pub fn run() {
       warm_up_nodecar,
       start_api_server,
       stop_api_server,
-      get_api_server_status
+      get_api_server_status,
+      get_all_traffic_snapshots,
+      clear_all_traffic_stats,
+      get_traffic_stats_for_period
     ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");

src-tauri/src/profile/manager.rs

@@ -165,6 +165,7 @@ impl ProfileManager {
           camoufox_config: None,
           group_id: group_id.clone(),
           tags: Vec::new(),
+          note: None,
         };
 
         match self
@@ -207,6 +208,7 @@ impl ProfileManager {
       camoufox_config: final_camoufox_config,
       group_id: group_id.clone(),
       tags: Vec::new(),
+      note: None,
     };
 
     // Save profile info
@@ -522,6 +524,35 @@ impl ProfileManager {
     Ok(profile)
   }
 
+  pub fn update_profile_note(
+    &self,
+    app_handle: &tauri::AppHandle,
+    profile_id: &str,
+    note: Option<String>,
+  ) -> Result<BrowserProfile, Box<dyn std::error::Error>> {
+    // 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.id == profile_uuid)
+      .ok_or_else(|| format!("Profile with ID '{profile_id}' not found"))?;
+
+    // Update note (trim whitespace, set to None if empty)
+    profile.note = note.map(|n| n.trim().to_string()).filter(|n| !n.is_empty());
+
+    // Save profile
+    self.save_profile(&profile)?;
+
+    // Emit profile note update event
+    if let Err(e) = app_handle.emit("profiles-changed", ()) {
+      log::warn!("Warning: Failed to emit profiles-changed event: {e}");
+    }
+
+    Ok(profile)
+  }
+
   pub fn delete_multiple_profiles(
     &self,
     app_handle: &tauri::AppHandle,
@@ -1040,7 +1071,7 @@ impl ProfileManager {
 
   fn get_common_firefox_preferences(&self) -> Vec<String> {
     vec![
-      // Disable default browser updates
+      // Disable default browser check
       "user_pref(\"browser.shell.checkDefaultBrowser\", false);".to_string(),
       "user_pref(\"browser.shell.skipDefaultBrowserCheckOnFirstRun\", true);".to_string(),
       "user_pref(\"browser.preferences.moreFromMozilla\", false);".to_string(),
@@ -1055,27 +1086,58 @@ impl ProfileManager {
       // Keep extension updates enabled
       "user_pref(\"extensions.update.enabled\", true);".to_string(),
       "user_pref(\"extensions.update.autoUpdateDefault\", true);".to_string(),
+      // Completely disable browser update checking
       "user_pref(\"app.update.enabled\", false);".to_string(),
-      "user_pref(\"app.update.staging.enabled\", false);".to_string(),
-      "user_pref(\"app.update.timerFirstInterval\", -1);".to_string(),
-      "user_pref(\"app.update.download.maxAttempts\", 0);".to_string(),
-      "user_pref(\"app.update.elevate.maxAttempts\", 0);".to_string(),
-      "user_pref(\"app.update.disabledForTesting\", true);".to_string(),
       "user_pref(\"app.update.auto\", false);".to_string(),
       "user_pref(\"app.update.mode\", 0);".to_string(),
-      "user_pref(\"app.update.promptWaitTime\", -1);".to_string(),
       "user_pref(\"app.update.service.enabled\", false);".to_string(),
+      "user_pref(\"app.update.staging.enabled\", false);".to_string(),
       "user_pref(\"app.update.silent\", true);".to_string(),
+      "user_pref(\"app.update.disabledForTesting\", true);".to_string(),
+      // Prevent update URL access entirely
+      "user_pref(\"app.update.url\", \"\");".to_string(),
+      "user_pref(\"app.update.url.manual\", \"\");".to_string(),
+      "user_pref(\"app.update.url.details\", \"\");".to_string(),
+      // Disable update timing/scheduling
+      "user_pref(\"app.update.timerFirstInterval\", 999999999);".to_string(),
+      "user_pref(\"app.update.interval\", 999999999);".to_string(),
+      "user_pref(\"app.update.background.interval\", 999999999);".to_string(),
+      "user_pref(\"app.update.idletime\", 999999999);".to_string(),
+      "user_pref(\"app.update.promptWaitTime\", 999999999);".to_string(),
+      // Disable update attempts
+      "user_pref(\"app.update.download.maxAttempts\", 0);".to_string(),
+      "user_pref(\"app.update.elevate.maxAttempts\", 0);".to_string(),
       "user_pref(\"app.update.checkInstallTime\", false);".to_string(),
-      "user_pref(\"app.update.interval\", -1);".to_string(),
-      "user_pref(\"app.update.background.interval\", -1);".to_string(),
-      "user_pref(\"app.update.idletime\", -1);".to_string(),
-      // Suppress additional update UI/prompts
+      // Suppress update UI/prompts/notifications
       "user_pref(\"app.update.doorhanger\", false);".to_string(),
       "user_pref(\"app.update.badge\", false);".to_string(),
+      "user_pref(\"app.update.notifyDuringDownload\", false);".to_string(),
       "user_pref(\"app.update.background.scheduling.enabled\", false);".to_string(),
+      "user_pref(\"app.update.background.enabled\", false);".to_string(),
+      // Disable BITS (Windows Background Intelligent Transfer Service) updates
+      "user_pref(\"app.update.BITS.enabled\", false);".to_string(),
+      // Disable language pack updates
+      "user_pref(\"app.update.langpack.enabled\", false);".to_string(),
       // Suppress upgrade dialogs on startup
       "user_pref(\"browser.startup.upgradeDialog.enabled\", false);".to_string(),
+      // Disable update ping telemetry
+      "user_pref(\"toolkit.telemetry.updatePing.enabled\", false);".to_string(),
+      // Zen browser specific - disable welcome screen and updates
+      "user_pref(\"zen.welcome-screen.seen\", true);".to_string(),
+      "user_pref(\"zen.updates.enabled\", false);".to_string(),
+      "user_pref(\"zen.updates.check-for-updates\", false);".to_string(),
+      // Additional first-run suppressions
+      "user_pref(\"app.normandy.first_run\", false);".to_string(),
+      "user_pref(\"trailhead.firstrun.didSeeAboutWelcome\", true);".to_string(),
+      "user_pref(\"datareporting.policy.dataSubmissionPolicyBypassNotification\", true);"
+        .to_string(),
+      "user_pref(\"toolkit.telemetry.reportingpolicy.firstRun\", false);".to_string(),
+      // Disable quit confirmation dialogs
+      "user_pref(\"browser.warnOnQuit\", false);".to_string(),
+      "user_pref(\"browser.showQuitWarning\", false);".to_string(),
+      "user_pref(\"browser.tabs.warnOnClose\", false);".to_string(),
+      "user_pref(\"browser.tabs.warnOnCloseOtherTabs\", false);".to_string(),
+      "user_pref(\"browser.sessionstore.warnOnQuit\", false);".to_string(),
     ]
   }
 
@@ -1445,6 +1507,18 @@ pub fn update_profile_tags(
     .map_err(|e| format!("Failed to update profile tags: {e}"))
 }
 
+#[tauri::command]
+pub fn update_profile_note(
+  app_handle: tauri::AppHandle,
+  profile_id: String,
+  note: Option<String>,
+) -> Result<BrowserProfile, String> {
+  let profile_manager = ProfileManager::instance();
+  profile_manager
+    .update_profile_note(&app_handle, &profile_id, note)
+    .map_err(|e| format!("Failed to update profile note: {e}"))
+}
+
 #[tauri::command]
 pub async fn check_browser_status(
   app_handle: tauri::AppHandle,

src-tauri/src/profile/types.rs

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

src-tauri/src/profile_importer.rs

@@ -561,6 +561,7 @@ impl ProfileImporter {
       camoufox_config: None,
       group_id: None,
       tags: Vec::new(),
+      note: None,
     };
 
     // Save the profile metadata

src-tauri/src/proxy_manager.rs

@@ -20,8 +20,8 @@ pub struct ProxyInfo {
   pub upstream_port: u16,
   pub upstream_type: String,
   pub local_port: u16,
-  // Optional profile name to which this proxy instance is logically tied
-  pub profile_name: Option<String>,
+  // Optional profile ID to which this proxy instance is logically tied
+  pub profile_id: Option<String>,
 }
 
 // Proxy check result cache
@@ -491,7 +491,6 @@ impl ProxyManager {
       "https://ipinfo.io/ip",
       "https://icanhazip.com",
       "https://ifconfig.co/ip",
-      "https://ipecho.net/plain",
     ];
 
     // Create HTTP client with proxy
@@ -594,14 +593,14 @@ impl ProxyManager {
     app_handle: tauri::AppHandle,
     proxy_settings: Option<&ProxySettings>,
     browser_pid: u32,
-    profile_name: Option<&str>,
+    profile_id: Option<&str>,
   ) -> Result<ProxySettings, String> {
     // First, proactively cleanup any dead proxies so we don't accidentally reuse stale ones
     let _ = self.cleanup_dead_proxies(app_handle.clone()).await;
 
     // If we have a previous proxy tied to this profile, and the upstream settings are changing,
     // stop it before starting a new one so the change takes effect immediately.
-    if let Some(name) = profile_name {
+    if let Some(name) = profile_id {
       // Check if we have an active proxy recorded for this profile
       let maybe_existing_id = {
         let map = self.profile_active_proxy_ids.lock().unwrap();
@@ -664,14 +663,32 @@ impl ProxyManager {
           && existing.upstream_port == desired_port;
 
         if is_same_upstream {
-          // Reuse existing local proxy
-          return Ok(ProxySettings {
-            proxy_type: "http".to_string(),
-            host: "127.0.0.1".to_string(),
-            port: existing.local_port,
-            username: None,
-            password: None,
-          });
+          // Check if profile_id matches - if not, we need to restart to update tracking
+          let profile_id_matches = match (profile_id, &existing.profile_id) {
+            (Some(ref new_id), Some(ref old_id)) => new_id == old_id,
+            (None, None) => true,
+            _ => false,
+          };
+
+          if profile_id_matches {
+            // Reuse existing local proxy (profile_id matches)
+            return Ok(ProxySettings {
+              proxy_type: "http".to_string(),
+              host: "127.0.0.1".to_string(),
+              port: existing.local_port,
+              username: None,
+              password: None,
+            });
+          } else {
+            // Profile ID changed - need to restart proxy to update tracking
+            log::info!(
+              "Profile ID changed for proxy {}: {:?} -> {:?}, restarting proxy",
+              existing.id,
+              existing.profile_id,
+              profile_id
+            );
+            needs_restart = true;
+          }
         } else {
           // Upstream changed; we must restart the local proxy so that traffic is routed correctly
           needs_restart = true;
@@ -711,6 +728,11 @@ impl ProxyManager {
       }
     }
 
+    // Add profile ID if provided for traffic tracking
+    if let Some(id) = profile_id {
+      proxy_cmd = proxy_cmd.arg("--profile-id").arg(id);
+    }
+
     // Execute the command and wait for it to complete
     // The donut-proxy binary should start the worker and then exit
     let output = proxy_cmd
@@ -755,7 +777,7 @@ impl ProxyManager {
         .map(|p| p.proxy_type.clone())
         .unwrap_or_else(|| "DIRECT".to_string()),
       local_port,
-      profile_name: profile_name.map(|s| s.to_string()),
+      profile_id: profile_id.map(|s| s.to_string()),
     };
 
     // Wait for the local proxy port to be ready to accept connections
@@ -789,14 +811,14 @@ impl ProxyManager {
     }
 
     // Store the profile proxy info for persistence
-    if let Some(name) = profile_name {
+    if let Some(id) = profile_id {
       if let Some(proxy_settings) = proxy_settings {
         let mut profile_proxies = self.profile_proxies.lock().unwrap();
-        profile_proxies.insert(name.to_string(), proxy_settings.clone());
+        profile_proxies.insert(id.to_string(), proxy_settings.clone());
       }
       // Also record the active proxy id for this profile for quick cleanup on changes
       let mut map = self.profile_active_proxy_ids.lock().unwrap();
-      map.insert(name.to_string(), proxy_info.id.clone());
+      map.insert(id.to_string(), proxy_info.id.clone());
     }
 
     // Return proxy settings for the browser
@@ -815,10 +837,10 @@ impl ProxyManager {
     app_handle: tauri::AppHandle,
     browser_pid: u32,
   ) -> Result<(), String> {
-    let (proxy_id, profile_name): (String, Option<String>) = {
+    let (proxy_id, profile_id): (String, Option<String>) = {
       let mut proxies = self.active_proxies.lock().unwrap();
       match proxies.remove(&browser_pid) {
-        Some(proxy) => (proxy.id, proxy.profile_name.clone()),
+        Some(proxy) => (proxy.id, proxy.profile_id.clone()),
         None => return Ok(()), // No proxy to stop
       }
     };
@@ -842,11 +864,11 @@ impl ProxyManager {
     }
 
     // Clear profile-to-proxy mapping if it references this proxy
-    if let Some(name) = profile_name {
+    if let Some(id) = profile_id {
       let mut map = self.profile_active_proxy_ids.lock().unwrap();
-      if let Some(current_id) = map.get(&name) {
+      if let Some(current_id) = map.get(&id) {
         if current_id == &proxy_id {
-          map.remove(&name);
+          map.remove(&id);
         }
       }
     }
@@ -859,6 +881,69 @@ impl ProxyManager {
     Ok(())
   }
 
+  // Stop the proxy associated with a profile ID
+  pub async fn stop_proxy_by_profile_id(
+    &self,
+    app_handle: tauri::AppHandle,
+    profile_id: &str,
+  ) -> Result<(), String> {
+    // Find the proxy ID for this profile
+    let proxy_id = {
+      let map = self.profile_active_proxy_ids.lock().unwrap();
+      map.get(profile_id).cloned()
+    };
+
+    if let Some(proxy_id) = proxy_id {
+      // Find the PID for this proxy
+      let pid = {
+        let proxies = self.active_proxies.lock().unwrap();
+        proxies.iter().find_map(|(pid, proxy)| {
+          if proxy.id == proxy_id {
+            Some(*pid)
+          } else {
+            None
+          }
+        })
+      };
+
+      if let Some(pid) = pid {
+        // Use the existing stop_proxy method
+        self.stop_proxy(app_handle, pid).await
+      } else {
+        // Proxy not found in active_proxies, try to stop it directly by ID
+        let proxy_cmd = app_handle
+          .shell()
+          .sidecar("donut-proxy")
+          .map_err(|e| format!("Failed to create sidecar: {e}"))?
+          .arg("proxy")
+          .arg("stop")
+          .arg("--id")
+          .arg(&proxy_id);
+
+        let output = proxy_cmd.output().await.unwrap();
+
+        if !output.status.success() {
+          let stderr = String::from_utf8_lossy(&output.stderr);
+          log::warn!("Proxy stop error: {stderr}");
+        }
+
+        // Clear profile-to-proxy mapping
+        let mut map = self.profile_active_proxy_ids.lock().unwrap();
+        map.remove(profile_id);
+
+        // Emit event for reactive UI updates
+        if let Err(e) = app_handle.emit("proxies-changed", ()) {
+          log::error!("Failed to emit proxies-changed event: {e}");
+        }
+
+        Ok(())
+      }
+    } else {
+      // No proxy found for this profile
+      Ok(())
+    }
+  }
+
   // Update the PID mapping for an existing proxy
   pub fn update_proxy_pid(&self, old_pid: u32, new_pid: u32) -> Result<(), String> {
     let mut proxies = self.active_proxies.lock().unwrap();
@@ -1035,7 +1120,7 @@ mod tests {
           upstream_port: 3128,
           upstream_type: "http".to_string(),
           local_port: (8000 + i) as u16,
-          profile_name: None,
+          profile_id: None,
         };
 
         // Add proxy

src-tauri/src/proxy_runner.rs

@@ -11,6 +11,14 @@ lazy_static::lazy_static! {
 pub async fn start_proxy_process(
   upstream_url: Option<String>,
   port: Option<u16>,
+) -> Result<ProxyConfig, Box<dyn std::error::Error>> {
+  start_proxy_process_with_profile(upstream_url, port, None).await
+}
+
+pub async fn start_proxy_process_with_profile(
+  upstream_url: Option<String>,
+  port: Option<u16>,
+  profile_id: Option<String>,
 ) -> Result<ProxyConfig, Box<dyn std::error::Error>> {
   let id = generate_proxy_id();
   let upstream = upstream_url.unwrap_or_else(|| "DIRECT".to_string());
@@ -22,9 +30,17 @@ pub async fn start_proxy_process(
     listener.local_addr().unwrap().port()
   });
 
-  let config = ProxyConfig::new(id.clone(), upstream, Some(local_port));
+  let config =
+    ProxyConfig::new(id.clone(), upstream, Some(local_port)).with_profile_id(profile_id.clone());
   save_proxy_config(&config)?;
 
+  // Log profile_id for debugging
+  if let Some(ref pid) = profile_id {
+    log::info!("Saved proxy config {} with profile_id: {}", id, pid);
+  } else {
+    log::info!("Saved proxy config {} without profile_id", id);
+  }
+
   // Spawn proxy worker process in the background using std::process::Command
   // This ensures proper process detachment on Unix systems
   let exe = std::env::current_exe()?;
@@ -63,6 +79,13 @@ pub async fn start_proxy_process(
       cmd.pre_exec(|| {
         // Create a new process group so the process survives parent exit
         libc::setsid();
+
+        // Set high priority so the proxy is killed last under resource pressure
+        // Negative nice value = higher priority. Try -10, fall back to -5 if it fails.
+        if libc::setpriority(libc::PRIO_PROCESS, 0, -10) != 0 {
+          let _ = libc::setpriority(libc::PRIO_PROCESS, 0, -5);
+        }
+
         Ok(())
       });
     }
@@ -90,6 +113,10 @@ pub async fn start_proxy_process(
   {
     use std::os::windows::process::CommandExt;
     use std::process::Command as StdCommand;
+    use windows::Win32::Foundation::CloseHandle;
+    use windows::Win32::System::Threading::{
+      OpenProcess, SetPriorityClass, ABOVE_NORMAL_PRIORITY_CLASS, PROCESS_SET_INFORMATION,
+    };
 
     let mut cmd = StdCommand::new(&exe);
     cmd.arg("proxy-worker");
@@ -108,6 +135,14 @@ pub async fn start_proxy_process(
     let child = cmd.spawn()?;
     let pid = child.id();
 
+    // Set high priority so the proxy is killed last under resource pressure
+    unsafe {
+      if let Ok(handle) = OpenProcess(PROCESS_SET_INFORMATION, false, pid) {
+        let _ = SetPriorityClass(handle, ABOVE_NORMAL_PRIORITY_CLASS);
+        let _ = CloseHandle(handle);
+      }
+    }
+
     // Store PID
     {
       let mut processes = PROXY_PROCESSES.lock().unwrap();

src-tauri/src/proxy_server.rs

@@ -1,4 +1,5 @@
 use crate::proxy_storage::ProxyConfig;
+use crate::traffic_stats::{get_traffic_tracker, init_traffic_tracker};
 use http_body_util::{BodyExt, Full};
 use hyper::body::Bytes;
 use hyper::server::conn::http1;
@@ -9,12 +10,81 @@ use std::convert::Infallible;
 use std::io;
 use std::net::SocketAddr;
 use std::pin::Pin;
+use std::sync::atomic::{AtomicU64, Ordering};
+use std::sync::Arc;
 use std::task::{Context, Poll};
 use tokio::io::{AsyncRead, AsyncReadExt, AsyncWrite, AsyncWriteExt, ReadBuf};
 use tokio::net::TcpListener;
 use tokio::net::TcpStream;
 use url::Url;
 
+/// Wrapper stream that counts bytes read and written
+struct CountingStream<S> {
+  inner: S,
+  bytes_read: Arc<AtomicU64>,
+  bytes_written: Arc<AtomicU64>,
+}
+
+impl<S> CountingStream<S> {
+  fn new(inner: S) -> Self {
+    Self {
+      inner,
+      bytes_read: Arc::new(AtomicU64::new(0)),
+      bytes_written: Arc::new(AtomicU64::new(0)),
+    }
+  }
+}
+
+impl<S: AsyncRead + Unpin> AsyncRead for CountingStream<S> {
+  fn poll_read(
+    mut self: Pin<&mut Self>,
+    cx: &mut Context<'_>,
+    buf: &mut ReadBuf<'_>,
+  ) -> Poll<io::Result<()>> {
+    let filled_before = buf.filled().len();
+    let result = Pin::new(&mut self.inner).poll_read(cx, buf);
+    if let Poll::Ready(Ok(())) = &result {
+      let bytes_read = buf.filled().len() - filled_before;
+      if bytes_read > 0 {
+        self
+          .bytes_read
+          .fetch_add(bytes_read as u64, Ordering::Relaxed);
+        // Update global tracker - count as received (data coming into proxy)
+        if let Some(tracker) = get_traffic_tracker() {
+          tracker.add_bytes_received(bytes_read as u64);
+        }
+      }
+    }
+    result
+  }
+}
+
+impl<S: AsyncWrite + Unpin> AsyncWrite for CountingStream<S> {
+  fn poll_write(
+    mut self: Pin<&mut Self>,
+    cx: &mut Context<'_>,
+    buf: &[u8],
+  ) -> Poll<io::Result<usize>> {
+    let result = Pin::new(&mut self.inner).poll_write(cx, buf);
+    if let Poll::Ready(Ok(n)) = &result {
+      self.bytes_written.fetch_add(*n as u64, Ordering::Relaxed);
+      // Update global tracker - count as sent (data going out of proxy)
+      if let Some(tracker) = get_traffic_tracker() {
+        tracker.add_bytes_sent(*n as u64);
+      }
+    }
+    result
+  }
+
+  fn poll_flush(mut self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<io::Result<()>> {
+    Pin::new(&mut self.inner).poll_flush(cx)
+  }
+
+  fn poll_shutdown(mut self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<io::Result<()>> {
+    Pin::new(&mut self.inner).poll_shutdown(cx)
+  }
+}
+
 // Wrapper to prepend consumed bytes to a stream
 struct PrependReader {
   prepended: Vec<u8>,
@@ -297,6 +367,13 @@ async fn handle_http(
   // This is faster and more reliable than trying to use hyper-proxy with version conflicts
   use reqwest::Client;
 
+  // Extract domain for traffic tracking
+  let domain = req
+    .uri()
+    .host()
+    .map(|h| h.to_string())
+    .unwrap_or_else(|| "unknown".to_string());
+
   let client_builder = Client::builder();
   let client = if let Some(ref upstream) = upstream_url {
     if upstream == "DIRECT" {
@@ -370,6 +447,12 @@ async fn handle_http(
       let headers = response.headers().clone();
       let body = response.bytes().await.unwrap_or_default();
 
+      // Record request in traffic tracker
+      let response_size = body.len() as u64;
+      if let Some(tracker) = get_traffic_tracker() {
+        tracker.record_request(&domain, body_bytes.len() as u64, response_size);
+      }
+
       let mut hyper_response = Response::new(Full::new(body));
       *hyper_response.status_mut() = StatusCode::from_u16(status.as_u16()).unwrap();
 
@@ -441,14 +524,35 @@ pub async fn run_proxy_server(config: ProxyConfig) -> Result<(), Box<dyn std::er
   };
 
   log::error!(
-    "Found config: id={}, port={:?}, upstream={}",
+    "Found config: id={}, port={:?}, upstream={}, profile_id={:?}",
     config.id,
     config.local_port,
-    config.upstream_url
+    config.upstream_url,
+    config.profile_id
   );
 
   log::error!("Starting proxy server for config id: {}", config.id);
 
+  // Initialize traffic tracker with profile ID if available
+  // This can now be called multiple times to update the tracker
+  init_traffic_tracker(config.id.clone(), config.profile_id.clone());
+  log::error!(
+    "Traffic tracker initialized for proxy: {} (profile_id: {:?})",
+    config.id,
+    config.profile_id
+  );
+
+  // Verify tracker was initialized correctly
+  if let Some(tracker) = crate::traffic_stats::get_traffic_tracker() {
+    log::error!(
+      "Tracker verified: proxy_id={}, profile_id={:?}",
+      tracker.proxy_id,
+      tracker.profile_id
+    );
+  } else {
+    log::error!("WARNING: Tracker was not initialized!");
+  }
+
   // Determine the bind address
   let bind_addr = SocketAddr::from(([127, 0, 0, 1], config.local_port.unwrap_or(0)));
 
@@ -488,6 +592,19 @@ pub async fn run_proxy_server(config: ProxyConfig) -> Result<(), Box<dyn std::er
   );
   log::error!("Proxy server entering accept loop - process should stay alive");
 
+  // Start a background task to periodically flush traffic stats to disk
+  tokio::spawn(async move {
+    let mut interval = tokio::time::interval(tokio::time::Duration::from_secs(1));
+    loop {
+      interval.tick().await;
+      if let Some(tracker) = get_traffic_tracker() {
+        if let Err(e) = tracker.flush_to_disk() {
+          log::error!("Failed to flush traffic stats: {}", e);
+        }
+      }
+    }
+  });
+
   // Keep the runtime alive with an infinite loop
   // This ensures the process doesn't exit even if there are no active connections
   loop {
@@ -605,6 +722,12 @@ async fn handle_connect_from_buffer(
     (target, 443)
   };
 
+  // Record domain access in traffic tracker
+  let domain = target_host.to_string();
+  if let Some(tracker) = get_traffic_tracker() {
+    tracker.record_request(&domain, 0, 0);
+  }
+
   // Connect to target (directly or via upstream proxy)
   let target_stream = if upstream_url.is_none()
     || upstream_url
@@ -693,10 +816,20 @@ async fn handle_connect_from_buffer(
 
   log::error!("DEBUG: Sent 200 Connection Established response, starting tunnel");
 
-  // Now tunnel data bidirectionally
+  // Now tunnel data bidirectionally with counting
+  // Wrap streams to count bytes transferred
+  let counting_client = CountingStream::new(client_stream);
+  let counting_target = CountingStream::new(target_stream);
+
+  // Get references for final stats
+  let client_read_counter = counting_client.bytes_read.clone();
+  let client_write_counter = counting_client.bytes_written.clone();
+  let target_read_counter = counting_target.bytes_read.clone();
+  let target_write_counter = counting_target.bytes_written.clone();
+
   // Split streams for bidirectional copying
-  let (mut client_read, mut client_write) = tokio::io::split(client_stream);
-  let (mut target_read, mut target_write) = tokio::io::split(target_stream);
+  let (mut client_read, mut client_write) = tokio::io::split(counting_client);
+  let (mut target_read, mut target_write) = tokio::io::split(counting_target);
 
   log::error!("DEBUG: Starting bidirectional tunnel");
 
@@ -735,5 +868,21 @@ async fn handle_connect_from_buffer(
     }
   }
 
+  // Log final byte counts and update domain stats
+  let final_sent =
+    client_read_counter.load(Ordering::Relaxed) + target_write_counter.load(Ordering::Relaxed);
+  let final_recv =
+    target_read_counter.load(Ordering::Relaxed) + client_write_counter.load(Ordering::Relaxed);
+  log::error!(
+    "DEBUG: Tunnel closed - sent: {} bytes, received: {} bytes",
+    final_sent,
+    final_recv
+  );
+
+  // Update domain-specific byte counts now that tunnel is complete
+  if let Some(tracker) = get_traffic_tracker() {
+    tracker.update_domain_bytes(&domain, final_sent, final_recv);
+  }
+
   Ok(())
 }

src-tauri/src/proxy_storage.rs

@@ -11,6 +11,8 @@ pub struct ProxyConfig {
   pub ignore_proxy_certificate: Option<bool>,
   pub local_url: Option<String>,
   pub pid: Option<u32>,
+  #[serde(default)]
+  pub profile_id: Option<String>,
 }
 
 impl ProxyConfig {
@@ -22,8 +24,14 @@ impl ProxyConfig {
       ignore_proxy_certificate: None,
       local_url: None,
       pid: None,
+      profile_id: None,
     }
   }
+
+  pub fn with_profile_id(mut self, profile_id: Option<String>) -> Self {
+    self.profile_id = profile_id;
+    self
+  }
 }
 
 pub fn get_storage_dir() -> PathBuf {

src-tauri/src/traffic_stats.rs

@@ -0,0 +1,668 @@
+use directories::BaseDirs;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::fs;
+use std::path::PathBuf;
+use std::sync::atomic::{AtomicU64, Ordering};
+use std::sync::{Arc, RwLock};
+
+/// Individual bandwidth data point for time-series tracking
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct BandwidthDataPoint {
+  /// Unix timestamp in seconds
+  pub timestamp: u64,
+  /// Bytes sent in this interval
+  pub bytes_sent: u64,
+  /// Bytes received in this interval
+  pub bytes_received: u64,
+}
+
+/// Domain access information
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct DomainAccess {
+  /// Domain name
+  pub domain: String,
+  /// Number of requests to this domain
+  pub request_count: u64,
+  /// Total bytes sent to this domain
+  pub bytes_sent: u64,
+  /// Total bytes received from this domain
+  pub bytes_received: u64,
+  /// First access timestamp
+  pub first_access: u64,
+  /// Last access timestamp
+  pub last_access: u64,
+}
+
+/// Lightweight snapshot for real-time updates (sent via events)
+/// Contains only the data needed for the mini chart and summary display
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct TrafficSnapshot {
+  /// Profile ID (for matching)
+  pub profile_id: Option<String>,
+  /// Session start timestamp
+  pub session_start: u64,
+  /// Last update timestamp
+  pub last_update: u64,
+  /// Total bytes sent across all time
+  pub total_bytes_sent: u64,
+  /// Total bytes received across all time
+  pub total_bytes_received: u64,
+  /// Total requests made
+  pub total_requests: u64,
+  /// Current bandwidth (bytes per second) sent
+  pub current_bytes_sent: u64,
+  /// Current bandwidth (bytes per second) received
+  pub current_bytes_received: u64,
+  /// Recent bandwidth history (last 60 seconds only, for mini chart)
+  pub recent_bandwidth: Vec<BandwidthDataPoint>,
+}
+
+/// Traffic statistics for a profile/proxy session
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct TrafficStats {
+  /// Proxy ID this stats belong to (for backwards compatibility)
+  pub proxy_id: String,
+  /// Profile ID (if associated) - this is now the primary key for storage
+  pub profile_id: Option<String>,
+  /// Session start timestamp
+  pub session_start: u64,
+  /// Last update timestamp
+  pub last_update: u64,
+  /// Total bytes sent across all time
+  pub total_bytes_sent: u64,
+  /// Total bytes received across all time
+  pub total_bytes_received: u64,
+  /// Total requests made
+  pub total_requests: u64,
+  /// Bandwidth data points (time-series, 1 point per second, stored indefinitely)
+  #[serde(default)]
+  pub bandwidth_history: Vec<BandwidthDataPoint>,
+  /// Domain access statistics
+  #[serde(default)]
+  pub domains: HashMap<String, DomainAccess>,
+  /// Unique IPs accessed
+  #[serde(default)]
+  pub unique_ips: Vec<String>,
+}
+
+impl TrafficStats {
+  pub fn new(proxy_id: String, profile_id: Option<String>) -> Self {
+    let now = current_timestamp();
+    Self {
+      proxy_id,
+      profile_id,
+      session_start: now,
+      last_update: now,
+      total_bytes_sent: 0,
+      total_bytes_received: 0,
+      total_requests: 0,
+      bandwidth_history: Vec::new(),
+      domains: HashMap::new(),
+      unique_ips: Vec::new(),
+    }
+  }
+
+  /// Create a lightweight snapshot for real-time UI updates
+  pub fn to_snapshot(&self) -> TrafficSnapshot {
+    let now = current_timestamp();
+    let cutoff = now.saturating_sub(60); // Last 60 seconds for mini chart
+
+    // Get current bandwidth from last data point
+    let (current_sent, current_recv) = self
+      .bandwidth_history
+      .last()
+      .filter(|dp| dp.timestamp >= now.saturating_sub(2)) // Within last 2 seconds
+      .map(|dp| (dp.bytes_sent, dp.bytes_received))
+      .unwrap_or((0, 0));
+
+    TrafficSnapshot {
+      profile_id: self.profile_id.clone(),
+      session_start: self.session_start,
+      last_update: self.last_update,
+      total_bytes_sent: self.total_bytes_sent,
+      total_bytes_received: self.total_bytes_received,
+      total_requests: self.total_requests,
+      current_bytes_sent: current_sent,
+      current_bytes_received: current_recv,
+      recent_bandwidth: self
+        .bandwidth_history
+        .iter()
+        .filter(|dp| dp.timestamp >= cutoff)
+        .cloned()
+        .collect(),
+    }
+  }
+
+  /// Record bandwidth for current second (data is stored indefinitely)
+  pub fn record_bandwidth(&mut self, bytes_sent: u64, bytes_received: u64) {
+    let now = current_timestamp();
+    self.last_update = now;
+    self.total_bytes_sent += bytes_sent;
+    self.total_bytes_received += bytes_received;
+
+    // Find or create data point for this second
+    if let Some(last) = self.bandwidth_history.last_mut() {
+      if last.timestamp == now {
+        last.bytes_sent += bytes_sent;
+        last.bytes_received += bytes_received;
+        return;
+      }
+    }
+
+    // Add new data point (even if bytes are zero, to ensure chart has continuous data)
+    self.bandwidth_history.push(BandwidthDataPoint {
+      timestamp: now,
+      bytes_sent,
+      bytes_received,
+    });
+  }
+
+  /// Record a request to a domain
+  pub fn record_request(&mut self, domain: &str, bytes_sent: u64, bytes_received: u64) {
+    let now = current_timestamp();
+    self.total_requests += 1;
+
+    let entry = self
+      .domains
+      .entry(domain.to_string())
+      .or_insert(DomainAccess {
+        domain: domain.to_string(),
+        request_count: 0,
+        bytes_sent: 0,
+        bytes_received: 0,
+        first_access: now,
+        last_access: now,
+      });
+
+    entry.request_count += 1;
+    entry.bytes_sent += bytes_sent;
+    entry.bytes_received += bytes_received;
+    entry.last_access = now;
+  }
+
+  /// Record an IP address access
+  pub fn record_ip(&mut self, ip: &str) {
+    if !self.unique_ips.contains(&ip.to_string()) {
+      self.unique_ips.push(ip.to_string());
+    }
+  }
+
+  /// Get bandwidth data for the last N seconds
+  pub fn get_recent_bandwidth(&self, seconds: u64) -> Vec<BandwidthDataPoint> {
+    let now = current_timestamp();
+    let cutoff = now.saturating_sub(seconds);
+    self
+      .bandwidth_history
+      .iter()
+      .filter(|dp| dp.timestamp >= cutoff)
+      .cloned()
+      .collect()
+  }
+}
+
+/// Get current Unix timestamp in seconds
+fn current_timestamp() -> u64 {
+  std::time::SystemTime::now()
+    .duration_since(std::time::UNIX_EPOCH)
+    .unwrap_or_default()
+    .as_secs()
+}
+
+/// Get the traffic stats storage directory
+pub fn get_traffic_stats_dir() -> PathBuf {
+  let base_dirs = BaseDirs::new().expect("Failed to get base directories");
+  let mut path = base_dirs.cache_dir().to_path_buf();
+  path.push(if cfg!(debug_assertions) {
+    "DonutBrowserDev"
+  } else {
+    "DonutBrowser"
+  });
+  path.push("traffic_stats");
+  path
+}
+
+/// Get the storage key for traffic stats (profile_id if available, otherwise proxy_id)
+fn get_stats_storage_key(stats: &TrafficStats) -> String {
+  stats
+    .profile_id
+    .clone()
+    .unwrap_or_else(|| stats.proxy_id.clone())
+}
+
+/// Save traffic stats to disk using profile_id as the key
+pub fn save_traffic_stats(stats: &TrafficStats) -> Result<(), Box<dyn std::error::Error>> {
+  let storage_dir = get_traffic_stats_dir();
+  fs::create_dir_all(&storage_dir)?;
+
+  let key = get_stats_storage_key(stats);
+  let file_path = storage_dir.join(format!("{key}.json"));
+  let content = serde_json::to_string(stats)?;
+  fs::write(&file_path, content)?;
+
+  Ok(())
+}
+
+/// Load traffic stats from disk by profile_id or proxy_id
+pub fn load_traffic_stats(id: &str) -> Option<TrafficStats> {
+  let storage_dir = get_traffic_stats_dir();
+  let file_path = storage_dir.join(format!("{id}.json"));
+
+  if !file_path.exists() {
+    return None;
+  }
+
+  let content = fs::read_to_string(&file_path).ok()?;
+  serde_json::from_str(&content).ok()
+}
+
+/// Load traffic stats by profile_id
+pub fn load_traffic_stats_by_profile(profile_id: &str) -> Option<TrafficStats> {
+  load_traffic_stats(profile_id)
+}
+
+/// List all traffic stats files and migrate old proxy-id based files to profile-id based
+pub fn list_traffic_stats() -> Vec<TrafficStats> {
+  let storage_dir = get_traffic_stats_dir();
+
+  if !storage_dir.exists() {
+    return Vec::new();
+  }
+
+  let mut stats_map: HashMap<String, TrafficStats> = HashMap::new();
+  let mut files_to_delete: Vec<std::path::PathBuf> = Vec::new();
+
+  if let Ok(entries) = fs::read_dir(&storage_dir) {
+    for entry in entries.flatten() {
+      let path = entry.path();
+      if path.extension().is_some_and(|ext| ext == "json") {
+        if let Ok(content) = fs::read_to_string(&path) {
+          if let Ok(s) = serde_json::from_str::<TrafficStats>(&content) {
+            // Determine the key for this stats entry
+            let key = s.profile_id.clone().unwrap_or_else(|| s.proxy_id.clone());
+
+            // Check if this is an old proxy-id based file that should be migrated
+            let file_stem = path.file_stem().and_then(|s| s.to_str()).unwrap_or("");
+            let is_old_proxy_file = file_stem.starts_with("proxy_")
+              && s.profile_id.is_some()
+              && file_stem != s.profile_id.as_ref().unwrap();
+
+            if let Some(existing) = stats_map.get_mut(&key) {
+              // Merge stats from this file into existing
+              merge_traffic_stats(existing, &s);
+              if is_old_proxy_file {
+                files_to_delete.push(path.clone());
+              }
+            } else {
+              stats_map.insert(key.clone(), s);
+              if is_old_proxy_file {
+                files_to_delete.push(path.clone());
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Save merged stats and delete old files
+  for stats in stats_map.values() {
+    if let Err(e) = save_traffic_stats(stats) {
+      log::warn!("Failed to save merged traffic stats: {}", e);
+    }
+  }
+
+  for path in files_to_delete {
+    if let Err(e) = fs::remove_file(&path) {
+      log::warn!("Failed to delete old traffic stats file {:?}: {}", path, e);
+    }
+  }
+
+  stats_map.into_values().collect()
+}
+
+/// Merge traffic stats from source into destination
+fn merge_traffic_stats(dest: &mut TrafficStats, src: &TrafficStats) {
+  // Update totals
+  dest.total_bytes_sent += src.total_bytes_sent;
+  dest.total_bytes_received += src.total_bytes_received;
+  dest.total_requests += src.total_requests;
+
+  // Update timestamps
+  dest.session_start = dest.session_start.min(src.session_start);
+  dest.last_update = dest.last_update.max(src.last_update);
+
+  // Merge bandwidth history (keep all data, sorted by timestamp)
+  let mut combined_history: Vec<BandwidthDataPoint> = dest.bandwidth_history.clone();
+  for point in &src.bandwidth_history {
+    if !combined_history
+      .iter()
+      .any(|p| p.timestamp == point.timestamp)
+    {
+      combined_history.push(point.clone());
+    }
+  }
+  combined_history.sort_by_key(|p| p.timestamp);
+  dest.bandwidth_history = combined_history;
+
+  // Merge domains
+  for (domain, access) in &src.domains {
+    let entry = dest.domains.entry(domain.clone()).or_insert(DomainAccess {
+      domain: domain.clone(),
+      request_count: 0,
+      bytes_sent: 0,
+      bytes_received: 0,
+      first_access: access.first_access,
+      last_access: access.last_access,
+    });
+    entry.request_count += access.request_count;
+    entry.bytes_sent += access.bytes_sent;
+    entry.bytes_received += access.bytes_received;
+    entry.first_access = entry.first_access.min(access.first_access);
+    entry.last_access = entry.last_access.max(access.last_access);
+  }
+
+  // Merge unique IPs
+  for ip in &src.unique_ips {
+    if !dest.unique_ips.contains(ip) {
+      dest.unique_ips.push(ip.clone());
+    }
+  }
+}
+
+/// Delete traffic stats by id (profile_id or proxy_id)
+pub fn delete_traffic_stats(id: &str) -> bool {
+  let storage_dir = get_traffic_stats_dir();
+  let file_path = storage_dir.join(format!("{id}.json"));
+
+  if file_path.exists() {
+    fs::remove_file(&file_path).is_ok()
+  } else {
+    false
+  }
+}
+
+/// Clear all traffic stats (used when clearing cache)
+pub fn clear_all_traffic_stats() -> Result<(), Box<dyn std::error::Error>> {
+  let storage_dir = get_traffic_stats_dir();
+
+  if storage_dir.exists() {
+    for entry in fs::read_dir(&storage_dir)?.flatten() {
+      let path = entry.path();
+      if path.extension().is_some_and(|ext| ext == "json") {
+        let _ = fs::remove_file(&path);
+      }
+    }
+  }
+
+  Ok(())
+}
+
+/// Live bandwidth tracker for real-time stats collection in the proxy
+/// This is designed to be used from within the proxy server
+pub struct LiveTrafficTracker {
+  pub proxy_id: String,
+  pub profile_id: Option<String>,
+  bytes_sent: AtomicU64,
+  bytes_received: AtomicU64,
+  requests: AtomicU64,
+  domain_stats: RwLock<HashMap<String, (u64, u64, u64)>>, // domain -> (count, sent, recv)
+  ips: RwLock<Vec<String>>,
+  #[allow(dead_code)]
+  session_start: u64,
+}
+
+impl LiveTrafficTracker {
+  pub fn new(proxy_id: String, profile_id: Option<String>) -> Self {
+    Self {
+      proxy_id,
+      profile_id,
+      bytes_sent: AtomicU64::new(0),
+      bytes_received: AtomicU64::new(0),
+      requests: AtomicU64::new(0),
+      domain_stats: RwLock::new(HashMap::new()),
+      ips: RwLock::new(Vec::new()),
+      session_start: current_timestamp(),
+    }
+  }
+
+  pub fn add_bytes_sent(&self, bytes: u64) {
+    self.bytes_sent.fetch_add(bytes, Ordering::Relaxed);
+  }
+
+  pub fn add_bytes_received(&self, bytes: u64) {
+    self.bytes_received.fetch_add(bytes, Ordering::Relaxed);
+  }
+
+  pub fn record_request(&self, domain: &str, bytes_sent: u64, bytes_received: u64) {
+    self.requests.fetch_add(1, Ordering::Relaxed);
+    // Also update total byte counters for HTTP requests (not tunneled)
+    self.bytes_sent.fetch_add(bytes_sent, Ordering::Relaxed);
+    self
+      .bytes_received
+      .fetch_add(bytes_received, Ordering::Relaxed);
+    if let Ok(mut stats) = self.domain_stats.write() {
+      let entry = stats.entry(domain.to_string()).or_insert((0, 0, 0));
+      entry.0 += 1;
+      entry.1 += bytes_sent;
+      entry.2 += bytes_received;
+    }
+  }
+
+  pub fn record_ip(&self, ip: &str) {
+    if let Ok(mut ips) = self.ips.write() {
+      if !ips.contains(&ip.to_string()) {
+        ips.push(ip.to_string());
+      }
+    }
+  }
+
+  /// Update domain-specific byte counts (called when CONNECT tunnel closes)
+  pub fn update_domain_bytes(&self, domain: &str, bytes_sent: u64, bytes_received: u64) {
+    if let Ok(mut stats) = self.domain_stats.write() {
+      let entry = stats.entry(domain.to_string()).or_insert((0, 0, 0));
+      entry.1 += bytes_sent;
+      entry.2 += bytes_received;
+    }
+  }
+
+  /// Get current stats snapshot
+  pub fn get_snapshot(&self) -> (u64, u64, u64) {
+    (
+      self.bytes_sent.load(Ordering::Relaxed),
+      self.bytes_received.load(Ordering::Relaxed),
+      self.requests.load(Ordering::Relaxed),
+    )
+  }
+
+  /// Flush current stats to disk and return the delta
+  pub fn flush_to_disk(&self) -> Result<(u64, u64), Box<dyn std::error::Error>> {
+    let bytes_sent = self.bytes_sent.swap(0, Ordering::Relaxed);
+    let bytes_received = self.bytes_received.swap(0, Ordering::Relaxed);
+
+    // Use profile_id as storage key if available, otherwise fall back to proxy_id
+    let storage_key = self
+      .profile_id
+      .clone()
+      .unwrap_or_else(|| self.proxy_id.clone());
+
+    // Load or create stats using the storage key
+    let mut stats = load_traffic_stats(&storage_key)
+      .unwrap_or_else(|| TrafficStats::new(self.proxy_id.clone(), self.profile_id.clone()));
+
+    // Ensure profile_id is set (in case stats were loaded from disk without it)
+    if stats.profile_id.is_none() && self.profile_id.is_some() {
+      stats.profile_id = self.profile_id.clone();
+    }
+
+    // Update the proxy_id to current session (for debugging/tracking)
+    stats.proxy_id = self.proxy_id.clone();
+
+    // Update bandwidth history
+    stats.record_bandwidth(bytes_sent, bytes_received);
+
+    // Update domain stats
+    if let Ok(mut domain_map) = self.domain_stats.write() {
+      for (domain, (count, sent, recv)) in domain_map.drain() {
+        stats.record_request(&domain, sent, recv);
+        // Adjust request count (record_request increments total_requests)
+        stats.total_requests = stats.total_requests.saturating_sub(1) + count;
+      }
+    }
+
+    // Update IPs
+    if let Ok(ips) = self.ips.read() {
+      for ip in ips.iter() {
+        stats.record_ip(ip);
+      }
+    }
+
+    // Save to disk
+    save_traffic_stats(&stats)?;
+
+    Ok((bytes_sent, bytes_received))
+  }
+}
+
+/// Global traffic tracker that can be accessed from connection handlers
+/// Using RwLock to allow reinitialization when proxy config changes
+static TRAFFIC_TRACKER: std::sync::RwLock<Option<Arc<LiveTrafficTracker>>> =
+  std::sync::RwLock::new(None);
+
+/// Initialize the global traffic tracker
+/// This can be called multiple times to update the tracker when proxy config changes
+pub fn init_traffic_tracker(proxy_id: String, profile_id: Option<String>) {
+  let tracker = Arc::new(LiveTrafficTracker::new(proxy_id, profile_id));
+  if let Ok(mut guard) = TRAFFIC_TRACKER.write() {
+    *guard = Some(tracker);
+  }
+}
+
+/// Get the global traffic tracker
+pub fn get_traffic_tracker() -> Option<Arc<LiveTrafficTracker>> {
+  TRAFFIC_TRACKER.read().ok().and_then(|guard| guard.clone())
+}
+
+/// Filtered traffic stats for client display (only contains data for requested period)
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct FilteredTrafficStats {
+  pub profile_id: Option<String>,
+  pub session_start: u64,
+  pub last_update: u64,
+  pub total_bytes_sent: u64,
+  pub total_bytes_received: u64,
+  pub total_requests: u64,
+  /// Bandwidth history filtered to requested time period
+  pub bandwidth_history: Vec<BandwidthDataPoint>,
+  /// Period stats: bytes sent/received within the requested period
+  pub period_bytes_sent: u64,
+  pub period_bytes_received: u64,
+  /// Domain access statistics (always full, as it's already aggregated)
+  pub domains: HashMap<String, DomainAccess>,
+  /// Unique IPs accessed
+  pub unique_ips: Vec<String>,
+}
+
+/// Get traffic stats for a profile, filtered to a specific time period
+/// seconds: number of seconds to include (0 = all time)
+pub fn get_traffic_stats_for_period(
+  profile_id: &str,
+  seconds: u64,
+) -> Option<FilteredTrafficStats> {
+  let stats = load_traffic_stats(profile_id)?;
+
+  let now = current_timestamp();
+  let cutoff = if seconds == 0 {
+    0 // All time
+  } else {
+    now.saturating_sub(seconds)
+  };
+
+  // Filter bandwidth history to requested period
+  let filtered_history: Vec<BandwidthDataPoint> = stats
+    .bandwidth_history
+    .iter()
+    .filter(|dp| dp.timestamp >= cutoff)
+    .cloned()
+    .collect();
+
+  // Calculate period totals
+  let period_bytes_sent: u64 = filtered_history.iter().map(|dp| dp.bytes_sent).sum();
+  let period_bytes_received: u64 = filtered_history.iter().map(|dp| dp.bytes_received).sum();
+
+  Some(FilteredTrafficStats {
+    profile_id: stats.profile_id,
+    session_start: stats.session_start,
+    last_update: stats.last_update,
+    total_bytes_sent: stats.total_bytes_sent,
+    total_bytes_received: stats.total_bytes_received,
+    total_requests: stats.total_requests,
+    bandwidth_history: filtered_history,
+    period_bytes_sent,
+    period_bytes_received,
+    domains: stats.domains,
+    unique_ips: stats.unique_ips,
+  })
+}
+
+/// Get lightweight traffic snapshot for a profile (for mini charts, only recent 60 seconds)
+pub fn get_traffic_snapshot_for_profile(profile_id: &str) -> Option<TrafficSnapshot> {
+  let stats = load_traffic_stats(profile_id)?;
+  Some(stats.to_snapshot())
+}
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+
+  #[test]
+  fn test_traffic_stats_creation() {
+    let stats = TrafficStats::new(
+      "test_proxy".to_string(),
+      Some("test-profile-id".to_string()),
+    );
+    assert_eq!(stats.proxy_id, "test_proxy");
+    assert_eq!(stats.profile_id, Some("test-profile-id".to_string()));
+    assert_eq!(stats.total_bytes_sent, 0);
+    assert_eq!(stats.total_bytes_received, 0);
+  }
+
+  #[test]
+  fn test_bandwidth_recording() {
+    let mut stats = TrafficStats::new("test_proxy".to_string(), None);
+
+    stats.record_bandwidth(1000, 2000);
+    assert_eq!(stats.total_bytes_sent, 1000);
+    assert_eq!(stats.total_bytes_received, 2000);
+    assert_eq!(stats.bandwidth_history.len(), 1);
+
+    stats.record_bandwidth(500, 1000);
+    assert_eq!(stats.total_bytes_sent, 1500);
+    assert_eq!(stats.total_bytes_received, 3000);
+  }
+
+  #[test]
+  fn test_domain_recording() {
+    let mut stats = TrafficStats::new("test_proxy".to_string(), None);
+
+    stats.record_request("example.com", 100, 500);
+    stats.record_request("example.com", 200, 1000);
+    stats.record_request("google.com", 50, 200);
+
+    assert_eq!(stats.domains.len(), 2);
+    assert_eq!(stats.domains["example.com"].request_count, 2);
+    assert_eq!(stats.domains["example.com"].bytes_sent, 300);
+    assert_eq!(stats.domains["google.com"].request_count, 1);
+  }
+
+  #[test]
+  fn test_ip_recording() {
+    let mut stats = TrafficStats::new("test_proxy".to_string(), None);
+
+    stats.record_ip("192.168.1.1");
+    stats.record_ip("192.168.1.1"); // Duplicate
+    stats.record_ip("10.0.0.1");
+
+    assert_eq!(stats.unique_ips.len(), 2);
+  }
+}

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Donut",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "identifier": "com.donutbrowser",
   "build": {
     "beforeDevCommand": "pnpm copy-proxy-binary && pnpm dev",

src-tauri/tests/donut_proxy_integration.rs

@@ -462,6 +462,137 @@ async fn test_proxy_list() -> Result<(), Box<dyn std::error::Error + Send + Sync
   Ok(())
 }
 
+/// Test traffic tracking through proxy
+#[tokio::test]
+#[serial]
+async fn test_traffic_tracking() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  let binary_path = setup_test().await?;
+  let mut tracker = ProxyTestTracker::new(binary_path.clone());
+
+  println!("Testing traffic tracking through proxy...");
+
+  // Start a proxy
+  let output = TestUtils::execute_command(&binary_path, &["proxy", "start"]).await?;
+  if !output.status.success() {
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    return Err(format!("Failed to start proxy - stdout: {stdout}, stderr: {stderr}").into());
+  }
+
+  let config: Value = serde_json::from_str(&String::from_utf8(output.stdout)?)?;
+  let proxy_id = config["id"].as_str().unwrap().to_string();
+  let local_port = config["localPort"].as_u64().unwrap() as u16;
+  tracker.track_proxy(proxy_id.clone());
+
+  println!("Proxy started on port {}", local_port);
+
+  // Wait for proxy to be ready
+  sleep(Duration::from_millis(500)).await;
+
+  // Make an HTTP request through the proxy
+  let mut stream = TcpStream::connect(("127.0.0.1", local_port)).await?;
+  let request =
+    b"GET http://httpbin.org/ip HTTP/1.1\r\nHost: httpbin.org\r\nConnection: close\r\n\r\n";
+
+  // Track bytes sent
+  let bytes_sent = request.len();
+  stream.write_all(request).await?;
+
+  // Read response
+  let mut response = Vec::new();
+  stream.read_to_end(&mut response).await?;
+  let bytes_received = response.len();
+
+  println!(
+    "HTTP request completed: sent {} bytes, received {} bytes",
+    bytes_sent, bytes_received
+  );
+
+  // Wait for traffic stats to be flushed (happens every second)
+  sleep(Duration::from_secs(2)).await;
+
+  // Verify traffic was tracked by checking traffic stats file exists
+  // Note: Traffic stats are stored in the cache directory
+  let cache_dir = directories::BaseDirs::new()
+    .expect("Failed to get base directories")
+    .cache_dir()
+    .to_path_buf();
+  let traffic_stats_dir = cache_dir.join("DonutBrowserDev").join("traffic_stats");
+  let stats_file = traffic_stats_dir.join(format!("{}.json", proxy_id));
+
+  if stats_file.exists() {
+    let content = std::fs::read_to_string(&stats_file)?;
+    let stats: Value = serde_json::from_str(&content)?;
+
+    let total_sent = stats["total_bytes_sent"].as_u64().unwrap_or(0);
+    let total_received = stats["total_bytes_received"].as_u64().unwrap_or(0);
+    let total_requests = stats["total_requests"].as_u64().unwrap_or(0);
+
+    println!(
+      "Traffic stats recorded: sent {} bytes, received {} bytes, {} requests",
+      total_sent, total_received, total_requests
+    );
+
+    // Check if domains are being tracked
+    let mut domain_traffic = false;
+    if let Some(domains) = stats.get("domains") {
+      if let Some(domain_map) = domains.as_object() {
+        println!("Domains tracked: {}", domain_map.len());
+        for (domain, domain_stats) in domain_map {
+          println!("  - {}", domain);
+          // Check if any domain has traffic
+          if let Some(domain_obj) = domain_stats.as_object() {
+            let domain_sent = domain_obj
+              .get("bytes_sent")
+              .and_then(|v| v.as_u64())
+              .unwrap_or(0);
+            let domain_recv = domain_obj
+              .get("bytes_received")
+              .and_then(|v| v.as_u64())
+              .unwrap_or(0);
+            let domain_reqs = domain_obj
+              .get("request_count")
+              .and_then(|v| v.as_u64())
+              .unwrap_or(0);
+            println!(
+              "    sent: {}, received: {}, requests: {}",
+              domain_sent, domain_recv, domain_reqs
+            );
+            if domain_sent > 0 || domain_recv > 0 || domain_reqs > 0 {
+              domain_traffic = true;
+            }
+          }
+        }
+      }
+    }
+
+    // Verify that some traffic was recorded - check either total bytes or domain traffic
+    assert!(
+      total_sent > 0 || total_received > 0 || total_requests > 0 || domain_traffic,
+      "Traffic stats should record some activity (sent: {}, received: {}, requests: {})",
+      total_sent,
+      total_received,
+      total_requests
+    );
+
+    println!("Traffic tracking test passed!");
+  } else {
+    println!("Warning: Traffic stats file not found at {:?}", stats_file);
+    // This is not necessarily a failure - the file may not have been created yet
+    // The important thing is that the proxy is working
+  }
+
+  // Cleanup
+  tracker.cleanup_all().await;
+
+  // Clean up the traffic stats file
+  if stats_file.exists() {
+    let _ = std::fs::remove_file(&stats_file);
+  }
+
+  Ok(())
+}
+
 /// Test proxy stop
 #[tokio::test]
 #[serial]

src/app/page.tsx

@@ -15,6 +15,7 @@ import { ImportProfileDialog } from "@/components/import-profile-dialog";
 import { PermissionDialog } from "@/components/permission-dialog";
 import { ProfilesDataTable } from "@/components/profile-data-table";
 import { ProfileSelectorDialog } from "@/components/profile-selector-dialog";
+import { ProxyAssignmentDialog } from "@/components/proxy-assignment-dialog";
 import { ProxyManagementDialog } from "@/components/proxy-management-dialog";
 import { SettingsDialog } from "@/components/settings-dialog";
 import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications";
@@ -62,7 +63,11 @@ export default function Home() {
     error: groupsError,
   } = useGroupEvents();
 
-  const { isLoading: proxiesLoading, error: proxiesError } = useProxyEvents();
+  const {
+    storedProxies,
+    isLoading: proxiesLoading,
+    error: proxiesError,
+  } = useProxyEvents();
 
   const [createProfileDialogOpen, setCreateProfileDialogOpen] = useState(false);
   const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
@@ -75,10 +80,15 @@ export default function Home() {
     useState(false);
   const [groupAssignmentDialogOpen, setGroupAssignmentDialogOpen] =
     useState(false);
+  const [proxyAssignmentDialogOpen, setProxyAssignmentDialogOpen] =
+    useState(false);
   const [selectedGroupId, setSelectedGroupId] = useState<string>("default");
   const [selectedProfilesForGroup, setSelectedProfilesForGroup] = useState<
     string[]
   >([]);
+  const [selectedProfilesForProxy, setSelectedProfilesForProxy] = useState<
+    string[]
+  >([]);
   const [selectedProfiles, setSelectedProfiles] = useState<string[]>([]);
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [pendingUrls, setPendingUrls] = useState<PendingUrl[]>([]);
@@ -559,12 +569,29 @@ export default function Home() {
     setSelectedProfiles([]);
   }, [selectedProfiles, handleAssignProfilesToGroup]);
 
+  const handleAssignProfilesToProxy = useCallback((profileIds: string[]) => {
+    setSelectedProfilesForProxy(profileIds);
+    setProxyAssignmentDialogOpen(true);
+  }, []);
+
+  const handleBulkProxyAssignment = useCallback(() => {
+    if (selectedProfiles.length === 0) return;
+    handleAssignProfilesToProxy(selectedProfiles);
+    setSelectedProfiles([]);
+  }, [selectedProfiles, handleAssignProfilesToProxy]);
+
   const handleGroupAssignmentComplete = useCallback(async () => {
     // No need to manually reload - useProfileEvents will handle the update
     setGroupAssignmentDialogOpen(false);
     setSelectedProfilesForGroup([]);
   }, []);
 
+  const handleProxyAssignmentComplete = useCallback(async () => {
+    // No need to manually reload - useProfileEvents will handle the update
+    setProxyAssignmentDialogOpen(false);
+    setSelectedProfilesForProxy([]);
+  }, []);
+
   const handleGroupManagementComplete = useCallback(async () => {
     // No need to manually reload - useProfileEvents will handle the update
   }, []);
@@ -676,8 +703,8 @@ export default function Home() {
         // Search in profile name
         if (profile.name.toLowerCase().includes(query)) return true;
 
-        // Search in browser name
-        if (profile.browser.toLowerCase().includes(query)) return true;
+        // Search in note
+        if (profile.note?.toLowerCase().includes(query)) return true;
 
         // Search in tags
         if (profile.tags?.some((tag) => tag.toLowerCase().includes(query)))
@@ -730,6 +757,7 @@ export default function Home() {
             onSelectedProfilesChange={setSelectedProfiles}
             onBulkDelete={handleBulkDelete}
             onBulkGroupAssignment={handleBulkGroupAssignment}
+            onBulkProxyAssignment={handleBulkProxyAssignment}
           />
         </div>
       </main>
@@ -832,6 +860,17 @@ export default function Home() {
         profiles={profiles}
       />
 
+      <ProxyAssignmentDialog
+        isOpen={proxyAssignmentDialogOpen}
+        onClose={() => {
+          setProxyAssignmentDialogOpen(false);
+        }}
+        selectedProfiles={selectedProfilesForProxy}
+        onAssignmentComplete={handleProxyAssignmentComplete}
+        profiles={profiles}
+        storedProxies={storedProxies}
+      />
+
       <DeleteConfirmationDialog
         isOpen={showBulkDeleteConfirmation}
         onClose={() => setShowBulkDeleteConfirmation(false)}

src/components/bandwidth-mini-chart.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { Area, AreaChart, ResponsiveContainer } from "recharts";
+import { cn } from "@/lib/utils";
+import type { BandwidthDataPoint } from "@/types";
+
+interface BandwidthMiniChartProps {
+  data: BandwidthDataPoint[];
+  currentBandwidth?: number;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function BandwidthMiniChart({
+  data,
+  currentBandwidth: externalBandwidth,
+  onClick,
+  className,
+}: BandwidthMiniChartProps) {
+  // Transform data for the chart - combine sent and received for total bandwidth
+  const chartData = React.useMemo(() => {
+    // Fill in missing seconds with zeros for smooth chart
+    if (data.length === 0) {
+      // Create 60 seconds of zero data for the past minute
+      const now = Math.floor(Date.now() / 1000);
+      return Array.from({ length: 60 }, (_, i) => ({
+        time: now - (59 - i),
+        bandwidth: 0,
+      }));
+    }
+
+    const now = Math.floor(Date.now() / 1000);
+    const result: { time: number; bandwidth: number }[] = [];
+
+    // Get the last 60 seconds
+    for (let i = 59; i >= 0; i--) {
+      const targetTime = now - i;
+      const point = data.find((d) => d.timestamp === targetTime);
+      result.push({
+        time: targetTime,
+        bandwidth: point ? point.bytes_sent + point.bytes_received : 0,
+      });
+    }
+
+    return result;
+  }, [data]);
+
+  // Find max value for scaling
+  const _maxBandwidth = React.useMemo(() => {
+    const max = Math.max(...chartData.map((d) => d.bandwidth), 1);
+    return max;
+  }, [chartData]);
+
+  // Use external bandwidth if provided, otherwise calculate from last data point
+  const currentBandwidth =
+    externalBandwidth ?? chartData[chartData.length - 1]?.bandwidth ?? 0;
+
+  // Format bytes to human readable
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return "0 B/s";
+    if (bytes < 1024) return `${bytes} B/s`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB/s`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB/s`;
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "relative flex items-center gap-1.5 px-2 rounded cursor-pointer hover:bg-accent/50 transition-colors min-w-[120px] border-none bg-transparent",
+        className,
+      )}
+    >
+      <div className="flex-1 h-3">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            data={chartData}
+            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+          >
+            <defs>
+              <linearGradient
+                id="bandwidthGradient"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop
+                  offset="0%"
+                  stopColor="var(--chart-1)"
+                  stopOpacity={0.6}
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--chart-1)"
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <Area
+              type="monotone"
+              dataKey="bandwidth"
+              stroke="var(--chart-1)"
+              strokeWidth={1}
+              fill="url(#bandwidthGradient)"
+              isAnimationActive={false}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+      <span className="text-xs text-muted-foreground whitespace-nowrap min-w-[60px] text-right">
+        {formatBytes(currentBandwidth)}
+      </span>
+    </button>
+  );
+}

src/components/home-header.tsx

@@ -142,7 +142,12 @@ const HomeHeader = ({
               </Button>
             </span>
           </TooltipTrigger>
-          <TooltipContent>Create a new profile</TooltipContent>
+          <TooltipContent
+            arrowOffset={-8}
+            style={{ transform: "translateX(-8px)" }}
+          >
+            Create a new profile
+          </TooltipContent>
         </Tooltip>
       </div>
     </div>

src/components/profile-data-table.tsx

@@ -13,6 +13,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { emit, listen } from "@tauri-apps/api/event";
 import type { Dispatch, SetStateAction } from "react";
 import * as React from "react";
+import { FiWifi } from "react-icons/fi";
 import { IoEllipsisHorizontal } from "react-icons/io5";
 import {
   LuCheck,
@@ -68,15 +69,21 @@ import {
 } from "@/lib/browser-utils";
 import { trimName } from "@/lib/name-utils";
 import { cn } from "@/lib/utils";
-import type { BrowserProfile, ProxyCheckResult, StoredProxy } from "@/types";
+import type {
+  BrowserProfile,
+  ProxyCheckResult,
+  StoredProxy,
+  TrafficSnapshot,
+} from "@/types";
+import { BandwidthMiniChart } from "./bandwidth-mini-chart";
 import {
   DataTableActionBar,
   DataTableActionBarAction,
   DataTableActionBarSelection,
 } from "./data-table-action-bar";
-import { LoadingButton } from "./loading-button";
 import MultipleSelector, { type Option } from "./multiple-selector";
 import { ProxyCheckButton } from "./proxy-check-button";
+import { TrafficDetailsDialog } from "./traffic-details-dialog";
 import { Input } from "./ui/input";
 import { RippleButton } from "./ui/ripple";
 
@@ -103,6 +110,14 @@ type TableMeta = {
     React.SetStateAction<Record<string, string[]>>
   >;
 
+  // Note editor state
+  noteOverrides: Record<string, string | null>;
+  openNoteEditorFor: string | null;
+  setOpenNoteEditorFor: React.Dispatch<React.SetStateAction<string | null>>;
+  setNoteOverrides: React.Dispatch<
+    React.SetStateAction<Record<string, string | null>>
+  >;
+
   // Proxy selector state
   openProxySelectorFor: string | null;
   setOpenProxySelectorFor: React.Dispatch<React.SetStateAction<string | null>>;
@@ -142,6 +157,10 @@ type TableMeta = {
   // Overflow actions
   onAssignProfilesToGroup?: (profileIds: string[]) => void;
   onConfigureCamoufox?: (profile: BrowserProfile) => void;
+
+  // Traffic snapshots (lightweight real-time data)
+  trafficSnapshots: Record<string, TrafficSnapshot>;
+  onOpenTrafficDialog?: (profileId: string) => void;
 };
 
 const TagsCell = React.memo<{
@@ -402,6 +421,243 @@ const TagsCell = React.memo<{
 
 TagsCell.displayName = "TagsCell";
 
+const NonHoverableTooltip = React.memo<{
+  children: React.ReactNode;
+  content: React.ReactNode;
+  sideOffset?: number;
+  alignOffset?: number;
+  horizontalOffset?: number;
+}>(
+  ({
+    children,
+    content,
+    sideOffset = 4,
+    alignOffset = 0,
+    horizontalOffset = 0,
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    return (
+      <Tooltip open={isOpen} onOpenChange={setIsOpen}>
+        <TooltipTrigger
+          asChild
+          onMouseEnter={() => setIsOpen(true)}
+          onMouseLeave={() => setIsOpen(false)}
+        >
+          {children}
+        </TooltipTrigger>
+        <TooltipContent
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          arrowOffset={horizontalOffset}
+          onPointerEnter={(e) => e.preventDefault()}
+          onPointerLeave={() => setIsOpen(false)}
+          className="pointer-events-none"
+          style={
+            horizontalOffset !== 0
+              ? { transform: `translateX(${horizontalOffset}px)` }
+              : undefined
+          }
+        >
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    );
+  },
+);
+
+NonHoverableTooltip.displayName = "NonHoverableTooltip";
+
+const NoteCell = React.memo<{
+  profile: BrowserProfile;
+  isDisabled: boolean;
+  noteOverrides: Record<string, string | null>;
+  openNoteEditorFor: string | null;
+  setOpenNoteEditorFor: React.Dispatch<React.SetStateAction<string | null>>;
+  setNoteOverrides: React.Dispatch<
+    React.SetStateAction<Record<string, string | null>>
+  >;
+}>(
+  ({
+    profile,
+    isDisabled,
+    noteOverrides,
+    openNoteEditorFor,
+    setOpenNoteEditorFor,
+    setNoteOverrides,
+  }) => {
+    const effectiveNote: string | null = Object.hasOwn(
+      noteOverrides,
+      profile.id,
+    )
+      ? noteOverrides[profile.id]
+      : (profile.note ?? null);
+
+    const onNoteChange = React.useCallback(
+      async (newNote: string | null) => {
+        const trimmedNote = newNote?.trim() || null;
+        setNoteOverrides((prev) => ({ ...prev, [profile.id]: trimmedNote }));
+        try {
+          await invoke<BrowserProfile>("update_profile_note", {
+            profileId: profile.id,
+            note: trimmedNote,
+          });
+        } catch (error) {
+          console.error("Failed to update note:", error);
+        }
+      },
+      [profile.id, setNoteOverrides],
+    );
+
+    const editorRef = React.useRef<HTMLDivElement | null>(null);
+    const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
+    const [noteValue, setNoteValue] = React.useState(effectiveNote || "");
+
+    // Update local state when effective note changes (from outside)
+    React.useEffect(() => {
+      if (openNoteEditorFor !== profile.id) {
+        setNoteValue(effectiveNote || "");
+      }
+    }, [effectiveNote, openNoteEditorFor, profile.id]);
+
+    // Auto-resize textarea on open
+    React.useEffect(() => {
+      if (openNoteEditorFor === profile.id && textareaRef.current) {
+        const textarea = textareaRef.current;
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+      }
+    }, [openNoteEditorFor, profile.id]);
+
+    const handleTextareaChange = React.useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const newValue = e.target.value;
+        setNoteValue(newValue);
+        // Auto-resize
+        const textarea = e.target;
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+      },
+      [],
+    );
+
+    React.useEffect(() => {
+      if (openNoteEditorFor !== profile.id) return;
+      const handleClick = (e: MouseEvent) => {
+        const target = e.target as Node | null;
+        if (
+          editorRef.current &&
+          target &&
+          !editorRef.current.contains(target)
+        ) {
+          const currentValue = textareaRef.current?.value || "";
+          void onNoteChange(currentValue);
+          setOpenNoteEditorFor(null);
+        }
+      };
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }, [openNoteEditorFor, profile.id, setOpenNoteEditorFor, onNoteChange]);
+
+    React.useEffect(() => {
+      if (openNoteEditorFor === profile.id && textareaRef.current) {
+        textareaRef.current.focus();
+        // Move cursor to end
+        const len = textareaRef.current.value.length;
+        textareaRef.current.setSelectionRange(len, len);
+      }
+    }, [openNoteEditorFor, profile.id]);
+
+    const displayNote = effectiveNote || "";
+    const trimmedNote =
+      displayNote.length > 12 ? `${displayNote.slice(0, 12)}...` : displayNote;
+    const showTooltip = displayNote.length > 12 || displayNote.length > 0;
+
+    if (openNoteEditorFor !== profile.id) {
+      return (
+        <div className="w-24 min-h-6">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  "flex items-start px-2 py-1 min-h-6 w-full bg-transparent rounded border-none text-left",
+                  isDisabled
+                    ? "opacity-60 cursor-not-allowed"
+                    : "cursor-pointer hover:bg-accent/50",
+                )}
+                onClick={() => {
+                  if (!isDisabled) {
+                    setNoteValue(effectiveNote || "");
+                    setOpenNoteEditorFor(profile.id);
+                  }
+                }}
+              >
+                <span
+                  className={cn(
+                    "text-sm wrap-break-word",
+                    !effectiveNote && "text-muted-foreground",
+                  )}
+                >
+                  {effectiveNote ? trimmedNote : "No Note"}
+                </span>
+              </button>
+            </TooltipTrigger>
+            {showTooltip && (
+              <TooltipContent className="max-w-[320px]">
+                <p className="whitespace-pre-wrap wrap-break-word">
+                  {effectiveNote || "No Note"}
+                </p>
+              </TooltipContent>
+            )}
+          </Tooltip>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          "w-24 relative",
+          isDisabled && "opacity-60 pointer-events-none",
+        )}
+      >
+        <div
+          ref={editorRef}
+          className="absolute -top-[15px] -left-px z-50 w-60 min-h-6 bg-popover rounded-md shadow-md border"
+        >
+          <textarea
+            ref={textareaRef}
+            value={noteValue}
+            onChange={handleTextareaChange}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setNoteValue(effectiveNote || "");
+                setOpenNoteEditorFor(null);
+              } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                void onNoteChange(noteValue);
+                setOpenNoteEditorFor(null);
+              }
+            }}
+            onBlur={() => {
+              void onNoteChange(noteValue);
+              setOpenNoteEditorFor(null);
+            }}
+            placeholder="Add a note..."
+            className="w-full min-h-6 max-h-[200px] px-2 py-1 text-sm bg-transparent border-0 resize-none focus:outline-none focus:ring-0"
+            style={{
+              overflow: "auto",
+            }}
+            rows={1}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+NoteCell.displayName = "NoteCell";
+
 interface ProfilesDataTableProps {
   profiles: BrowserProfile[];
   onLaunchProfile: (profile: BrowserProfile) => void | Promise<void>;
@@ -418,6 +674,7 @@ interface ProfilesDataTableProps {
   onSelectedProfilesChange: Dispatch<SetStateAction<string[]>>;
   onBulkDelete?: () => void;
   onBulkGroupAssignment?: () => void;
+  onBulkProxyAssignment?: () => void;
 }
 
 export function ProfilesDataTable({
@@ -434,6 +691,7 @@ export function ProfilesDataTable({
   onSelectedProfilesChange,
   onBulkDelete,
   onBulkGroupAssignment,
+  onBulkProxyAssignment,
 }: ProfilesDataTableProps) {
   const { getTableSorting, updateSorting, isLoaded } = useTableSorting();
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -526,6 +784,19 @@ export function ProfilesDataTable({
   const [proxyCheckResults, setProxyCheckResults] = React.useState<
     Record<string, ProxyCheckResult>
   >({});
+  const [noteOverrides, setNoteOverrides] = React.useState<
+    Record<string, string | null>
+  >({});
+  const [openNoteEditorFor, setOpenNoteEditorFor] = React.useState<
+    string | null
+  >(null);
+  const [trafficSnapshots, setTrafficSnapshots] = React.useState<
+    Record<string, TrafficSnapshot>
+  >({});
+  const [trafficDialogProfile, setTrafficDialogProfile] = React.useState<{
+    id: string;
+    name?: string;
+  } | null>(null);
 
   // Load cached check results for proxies
   React.useEffect(() => {
@@ -594,6 +865,42 @@ export function ProfilesDataTable({
     stoppingProfiles,
   );
 
+  // Fetch traffic snapshots for running profiles (lightweight, real-time data)
+  // Using runningProfiles.size as dependency to avoid Set reference comparison issues
+  const runningCount = runningProfiles.size;
+  React.useEffect(() => {
+    if (!browserState.isClient) return;
+
+    if (runningCount === 0) {
+      setTrafficSnapshots({});
+      return;
+    }
+
+    const fetchTrafficSnapshots = async () => {
+      try {
+        const allSnapshots = await invoke<TrafficSnapshot[]>(
+          "get_all_traffic_snapshots",
+        );
+        const newSnapshots: Record<string, TrafficSnapshot> = {};
+        for (const snapshot of allSnapshots) {
+          if (snapshot.profile_id) {
+            const existing = newSnapshots[snapshot.profile_id];
+            if (!existing || snapshot.last_update > existing.last_update) {
+              newSnapshots[snapshot.profile_id] = snapshot;
+            }
+          }
+        }
+        setTrafficSnapshots(newSnapshots);
+      } catch (error) {
+        console.error("Failed to fetch traffic snapshots:", error);
+      }
+    };
+
+    void fetchTrafficSnapshots();
+    const interval = setInterval(fetchTrafficSnapshots, 1000);
+    return () => clearInterval(interval);
+  }, [browserState.isClient, runningCount]);
+
   // Clear launching/stopping spinners when backend reports running status changes
   React.useEffect(() => {
     if (!browserState.isClient) return;
@@ -892,6 +1199,12 @@ export function ProfilesDataTable({
       setOpenTagsEditorFor,
       setTagsOverrides,
 
+      // Note editor state
+      noteOverrides,
+      openNoteEditorFor,
+      setOpenNoteEditorFor,
+      setNoteOverrides,
+
       // Proxy selector state
       openProxySelectorFor,
       setOpenProxySelectorFor,
@@ -926,6 +1239,13 @@ export function ProfilesDataTable({
       // Overflow actions
       onAssignProfilesToGroup,
       onConfigureCamoufox,
+
+      // Traffic snapshots (lightweight real-time data)
+      trafficSnapshots,
+      onOpenTrafficDialog: (profileId: string) => {
+        const profile = profiles.find((p) => p.id === profileId);
+        setTrafficDialogProfile({ id: profileId, name: profile?.name });
+      },
     }),
     [
       selectedProfiles,
@@ -940,6 +1260,8 @@ export function ProfilesDataTable({
       tagsOverrides,
       allTags,
       openTagsEditorFor,
+      noteOverrides,
+      openNoteEditorFor,
       openProxySelectorFor,
       proxyOverrides,
       storedProxies,
@@ -953,6 +1275,8 @@ export function ProfilesDataTable({
       profileToRename,
       newProfileName,
       isRenamingSaving,
+      trafficSnapshots,
+      profiles,
       renameError,
       onKillProfile,
       onLaunchProfile,
@@ -1021,37 +1345,51 @@ export function ProfilesDataTable({
             );
           }
 
+          const browserName = getBrowserDisplayName(browser);
+
           if (meta.showCheckboxes || isSelected) {
             return (
-              <span className="flex justify-center items-center w-4 h-4">
-                <Checkbox
-                  checked={isSelected}
-                  onCheckedChange={(value) =>
-                    meta.handleCheckboxChange(profile.id, !!value)
-                  }
-                  aria-label="Select row"
-                  className="w-4 h-4"
-                />
-              </span>
+              <NonHoverableTooltip
+                content={<p>{browserName}</p>}
+                sideOffset={4}
+                horizontalOffset={8}
+              >
+                <span className="flex justify-center items-center w-4 h-4">
+                  <Checkbox
+                    checked={isSelected}
+                    onCheckedChange={(value) =>
+                      meta.handleCheckboxChange(profile.id, !!value)
+                    }
+                    aria-label="Select row"
+                    className="w-4 h-4"
+                  />
+                </span>
+              </NonHoverableTooltip>
             );
           }
 
           return (
-            <span className="flex relative justify-center items-center w-4 h-4">
-              <button
-                type="button"
-                className="flex justify-center items-center p-0 border-none cursor-pointer"
-                onClick={() => meta.handleIconClick(profile.id)}
-                aria-label="Select profile"
-              >
-                <span className="w-4 h-4 group">
-                  {IconComponent && (
-                    <IconComponent className="w-4 h-4 group-hover:hidden" />
-                  )}
-                  <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none w-4 h-4 hidden group-hover:block pointer-events-none items-center justify-center duration-200" />
-                </span>
-              </button>
-            </span>
+            <NonHoverableTooltip
+              content={<p>{browserName}</p>}
+              sideOffset={4}
+              horizontalOffset={8}
+            >
+              <span className="flex relative justify-center items-center w-4 h-4">
+                <button
+                  type="button"
+                  className="flex justify-center items-center p-0 border-none cursor-pointer"
+                  onClick={() => meta.handleIconClick(profile.id)}
+                  aria-label="Select profile"
+                >
+                  <span className="w-4 h-4 group">
+                    {IconComponent && (
+                      <IconComponent className="w-4 h-4 group-hover:hidden" />
+                    )}
+                    <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none w-4 h-4 hidden group-hover:block pointer-events-none items-center justify-center duration-200" />
+                  </span>
+                </button>
+              </span>
+            </NonHoverableTooltip>
           );
         },
         enableSorting: false,
@@ -1172,11 +1510,6 @@ export function ProfilesDataTable({
           const isEditing = meta.profileToRename?.id === profile.id;
 
           if (isEditing) {
-            const isSaveDisabled =
-              meta.isRenamingSaving ||
-              meta.newProfileName.trim().length === 0 ||
-              meta.newProfileName.trim() === profile.name;
-
             return (
               <div
                 ref={renameContainerRef}
@@ -1190,7 +1523,9 @@ export function ProfilesDataTable({
                     if (meta.renameError) meta.setRenameError(null);
                   }}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter") {
+                    if (e.key === "Enter" && !(e.metaKey || e.ctrlKey)) {
+                      void meta.handleRename();
+                    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                       void meta.handleRename();
                     } else if (e.key === "Escape") {
                       meta.setProfileToRename(null);
@@ -1198,20 +1533,20 @@ export function ProfilesDataTable({
                       meta.setRenameError(null);
                     }
                   }}
+                  onBlur={() => {
+                    if (
+                      meta.newProfileName.trim().length > 0 &&
+                      meta.newProfileName.trim() !== profile.name
+                    ) {
+                      void meta.handleRename();
+                    } else {
+                      meta.setProfileToRename(null);
+                      meta.setNewProfileName("");
+                      meta.setRenameError(null);
+                    }
+                  }}
                   className="w-30 h-6 px-2 py-1 text-sm font-medium leading-none border-0 shadow-none focus-visible:ring-0"
                 />
-                <div className="flex absolute right-0 top-full z-50 gap-1 translate-y-[30%] opacity-100 bg-black rounded-md">
-                  <LoadingButton
-                    isLoading={meta.isRenamingSaving}
-                    size="sm"
-                    variant="default"
-                    disabled={isSaveDisabled}
-                    className="cursor-pointer [[disabled]]:bg-primary/80"
-                    onClick={() => void meta.handleRename()}
-                  >
-                    Save
-                  </LoadingButton>
-                </div>
               </div>
             );
           }
@@ -1295,51 +1630,28 @@ export function ProfilesDataTable({
         },
       },
       {
-        accessorKey: "browser",
-        header: ({ column }) => {
-          return (
-            <Button
-              variant="ghost"
-              onClick={() =>
-                column.toggleSorting(column.getIsSorted() === "asc")
-              }
-              className="justify-start p-0 h-auto font-semibold text-left cursor-pointer"
-            >
-              Browser
-              {column.getIsSorted() === "asc" ? (
-                <LuChevronUp className="ml-2 w-4 h-4" />
-              ) : column.getIsSorted() === "desc" ? (
-                <LuChevronDown className="ml-2 w-4 h-4" />
-              ) : null}
-            </Button>
-          );
-        },
-        cell: ({ row }) => {
-          const browser: string = row.getValue("browser");
-          const name = getBrowserDisplayName(browser);
-          if (name.length < 14) {
-            return (
-              <div className="flex items-center">
-                <span>{name}</span>
-              </div>
-            );
-          }
+        id: "note",
+        header: "Note",
+        cell: ({ row, table }) => {
+          const meta = table.options.meta as TableMeta;
+          const profile = row.original;
+          const isRunning =
+            meta.isClient && meta.runningProfiles.has(profile.id);
+          const isLaunching = meta.launchingProfiles.has(profile.id);
+          const isStopping = meta.stoppingProfiles.has(profile.id);
+          const isBrowserUpdating = meta.isUpdating(profile.browser);
+          const isDisabled =
+            isRunning || isLaunching || isStopping || isBrowserUpdating;
 
           return (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span>{trimName(name, 14)}</span>
-              </TooltipTrigger>
-              <TooltipContent>{name}</TooltipContent>
-            </Tooltip>
-          );
-        },
-        enableSorting: true,
-        sortingFn: (rowA, rowB, columnId) => {
-          const browserA: string = rowA.getValue(columnId);
-          const browserB: string = rowB.getValue(columnId);
-          return getBrowserDisplayName(browserA).localeCompare(
-            getBrowserDisplayName(browserB),
+            <NoteCell
+              profile={profile}
+              isDisabled={isDisabled}
+              noteOverrides={meta.noteOverrides || {}}
+              openNoteEditorFor={meta.openNoteEditorFor || null}
+              setOpenNoteEditorFor={meta.setOpenNoteEditorFor}
+              setNoteOverrides={meta.setNoteOverrides}
+            />
           );
         },
       },
@@ -1380,6 +1692,28 @@ export function ProfilesDataTable({
                 : null;
           const isSelectorOpen = meta.openProxySelectorFor === profile.id;
 
+          // When profile is running, show bandwidth chart instead of proxy selector
+          if (isRunning && meta.trafficSnapshots) {
+            // Find the traffic snapshot for this profile by matching profile_id
+            const snapshot = meta.trafficSnapshots[profile.id];
+            // Create a new array reference to ensure React detects changes
+            const bandwidthData = snapshot?.recent_bandwidth
+              ? [...snapshot.recent_bandwidth]
+              : [];
+            const currentBandwidth =
+              (snapshot?.current_bytes_sent || 0) +
+              (snapshot?.current_bytes_received || 0);
+
+            return (
+              <BandwidthMiniChart
+                key={`${profile.id}-${snapshot?.last_update || 0}-${bandwidthData.length}`}
+                data={bandwidthData}
+                currentBandwidth={currentBandwidth}
+                onClick={() => meta.onOpenTrafficDialog?.(profile.id)}
+              />
+            );
+          }
+
           if (profile.browser === "tor-browser") {
             return (
               <Tooltip>
@@ -1542,6 +1876,13 @@ export function ProfilesDataTable({
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      meta.onOpenTrafficDialog?.(profile.id);
+                    }}
+                  >
+                    View Network
+                  </DropdownMenuItem>
                   <DropdownMenuItem
                     onClick={() => {
                       meta.onAssignProfilesToGroup?.([profile.id]);
@@ -1682,6 +2023,15 @@ export function ProfilesDataTable({
             <LuUsers />
           </DataTableActionBarAction>
         )}
+        {onBulkProxyAssignment && (
+          <DataTableActionBarAction
+            tooltip="Assign Proxy"
+            onClick={onBulkProxyAssignment}
+            size="icon"
+          >
+            <FiWifi />
+          </DataTableActionBarAction>
+        )}
         {onBulkDelete && (
           <DataTableActionBarAction
             tooltip="Delete"
@@ -1694,6 +2044,14 @@ export function ProfilesDataTable({
           </DataTableActionBarAction>
         )}
       </DataTableActionBar>
+      {trafficDialogProfile && (
+        <TrafficDetailsDialog
+          isOpen={trafficDialogProfile !== null}
+          onClose={() => setTrafficDialogProfile(null)}
+          profileId={trafficDialogProfile.id}
+          profileName={trafficDialogProfile.name}
+        />
+      )}
     </>
   );
 }

src/components/proxy-assignment-dialog.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { emit } from "@tauri-apps/api/event";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { LoadingButton } from "@/components/loading-button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { BrowserProfile, StoredProxy } from "@/types";
+import { RippleButton } from "./ui/ripple";
+
+interface ProxyAssignmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedProfiles: string[];
+  onAssignmentComplete: () => void;
+  profiles?: BrowserProfile[];
+  storedProxies?: StoredProxy[];
+}
+
+export function ProxyAssignmentDialog({
+  isOpen,
+  onClose,
+  selectedProfiles,
+  onAssignmentComplete,
+  profiles = [],
+  storedProxies = [],
+}: ProxyAssignmentDialogProps) {
+  const [selectedProxyId, setSelectedProxyId] = useState<string | null>(null);
+  const [isAssigning, setIsAssigning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleAssign = useCallback(async () => {
+    setIsAssigning(true);
+    setError(null);
+    try {
+      // Filter out TOR browser profiles as they don't support proxies
+      const validProfiles = selectedProfiles.filter((profileId) => {
+        const profile = profiles.find((p) => p.id === profileId);
+        return profile && profile.browser !== "tor-browser";
+      });
+
+      if (validProfiles.length === 0) {
+        setError("No valid profiles selected.");
+        setIsAssigning(false);
+        return;
+      }
+
+      // Update each profile's proxy sequentially to avoid file locking issues
+      for (const profileId of validProfiles) {
+        await invoke("update_profile_proxy", {
+          profileId,
+          proxyId: selectedProxyId,
+        });
+      }
+
+      // Notify other parts of the app so usage counts and lists refresh
+      await emit("profile-updated");
+      onAssignmentComplete();
+      onClose();
+    } catch (err) {
+      console.error("Failed to assign proxies to profiles:", err);
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : "Failed to assign proxies to profiles";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsAssigning(false);
+    }
+  }, [
+    selectedProfiles,
+    selectedProxyId,
+    profiles,
+    onAssignmentComplete,
+    onClose,
+  ]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedProxyId(null);
+      setError(null);
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Assign Proxy</DialogTitle>
+          <DialogDescription>
+            Assign a proxy to {selectedProfiles.length} selected profile(s).
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <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((profileId) => {
+                  const profile = profiles.find(
+                    (p: BrowserProfile) => p.id === profileId,
+                  );
+                  const displayName = profile ? profile.name : profileId;
+                  const isTorBrowser = profile?.browser === "tor-browser";
+                  return (
+                    <li key={profileId} className="truncate">
+                      • {displayName}
+                      {isTorBrowser && (
+                        <span className="ml-2 text-xs text-muted-foreground">
+                          (TOR - no proxy support)
+                        </span>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="proxy-select">Assign Proxy:</Label>
+            <Select
+              value={selectedProxyId || "none"}
+              onValueChange={(value) => {
+                setSelectedProxyId(value === "none" ? null : value);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select a proxy" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">No Proxy</SelectItem>
+                {storedProxies.map((proxy) => (
+                  <SelectItem key={proxy.id} value={proxy.id}>
+                    {proxy.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <RippleButton
+            variant="outline"
+            onClick={onClose}
+            disabled={isAssigning}
+          >
+            Cancel
+          </RippleButton>
+          <LoadingButton
+            isLoading={isAssigning}
+            onClick={() => void handleAssign()}
+          >
+            Assign
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/settings-dialog.tsx

@@ -268,6 +268,8 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     setIsClearingCache(true);
     try {
       await invoke("clear_all_version_cache_and_refetch");
+      // Also clear traffic stats cache
+      await invoke("clear_all_traffic_stats");
       // Don't show immediate success toast - let the version update progress events handle it
     } catch (error) {
       console.error("Failed to clear cache:", error);

src/components/traffic-details-dialog.tsx

@@ -0,0 +1,503 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import * as React from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { TooltipContentProps } from "recharts/types/component/Tooltip";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { FilteredTrafficStats } from "@/types";
+
+type TimePeriod =
+  | "1m"
+  | "5m"
+  | "30m"
+  | "1h"
+  | "2h"
+  | "4h"
+  | "1d"
+  | "7d"
+  | "30d"
+  | "all";
+
+interface TrafficDetailsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  profileId?: string;
+  profileName?: string;
+}
+
+const formatBytes = (bytes: number): string => {
+  if (bytes === 0) return "0 B";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024)
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+};
+
+const formatBytesPerSecond = (bytes: number): string => {
+  if (bytes === 0) return "0 B/s";
+  if (bytes < 1024) return `${bytes} B/s`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB/s`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB/s`;
+};
+
+function getSecondsForPeriod(period: TimePeriod): number {
+  switch (period) {
+    case "1m":
+      return 60;
+    case "5m":
+      return 300;
+    case "30m":
+      return 1800;
+    case "1h":
+      return 3600;
+    case "2h":
+      return 7200;
+    case "4h":
+      return 14400;
+    case "1d":
+      return 86400;
+    case "7d":
+      return 604800;
+    case "30d":
+      return 2592000;
+    case "all":
+      return 0; // 0 means all time
+    default:
+      return 300;
+  }
+}
+
+export function TrafficDetailsDialog({
+  isOpen,
+  onClose,
+  profileId,
+  profileName,
+}: TrafficDetailsDialogProps) {
+  const [stats, setStats] = React.useState<FilteredTrafficStats | null>(null);
+  const [timePeriod, setTimePeriod] = React.useState<TimePeriod>("5m");
+
+  // Fetch stats periodically - now uses filtered API
+  React.useEffect(() => {
+    if (!isOpen || !profileId) return;
+
+    const fetchStats = async () => {
+      try {
+        const seconds = getSecondsForPeriod(timePeriod);
+        const filteredStats = await invoke<FilteredTrafficStats | null>(
+          "get_traffic_stats_for_period",
+          { profileId, seconds },
+        );
+        setStats(filteredStats);
+      } catch (error) {
+        console.error("Failed to fetch traffic stats:", error);
+      }
+    };
+
+    void fetchStats();
+    const interval = setInterval(fetchStats, 2000);
+
+    return () => clearInterval(interval);
+  }, [isOpen, profileId, timePeriod]);
+
+  // Transform data for chart (already filtered by backend)
+  const chartData = React.useMemo(() => {
+    if (!stats?.bandwidth_history) return [];
+
+    return stats.bandwidth_history.map((d) => ({
+      time: d.timestamp,
+      sent: d.bytes_sent,
+      received: d.bytes_received,
+      total: d.bytes_sent + d.bytes_received,
+    }));
+  }, [stats]);
+
+  // Tooltip render function
+  const renderTooltip = React.useCallback(
+    (props: TooltipContentProps<number, string>) => {
+      const { active, payload, label } = props;
+      if (!active || !payload?.length) return null;
+
+      const time = new Date((typeof label === "number" ? label : 0) * 1000);
+      const formattedTime = time.toLocaleTimeString();
+
+      return (
+        <div className="bg-popover border rounded-lg px-3 py-2 shadow-lg">
+          <p className="text-xs text-muted-foreground mb-1">{formattedTime}</p>
+          {payload.map((entry) => (
+            <p key={String(entry.dataKey)} className="text-sm">
+              <span className="text-muted-foreground">
+                {entry.dataKey === "sent" ? "↑ Sent: " : "↓ Received: "}
+              </span>
+              <span className="font-medium">
+                {formatBytesPerSecond(
+                  typeof entry.value === "number" ? entry.value : 0,
+                )}
+              </span>
+            </p>
+          ))}
+        </div>
+      );
+    },
+    [],
+  );
+
+  // Top domains sorted by total traffic
+  const topDomainsByTraffic = React.useMemo(() => {
+    if (!stats?.domains) return [];
+    return Object.values(stats.domains)
+      .sort(
+        (a, b) =>
+          b.bytes_sent + b.bytes_received - (a.bytes_sent + a.bytes_received),
+      )
+      .slice(0, 10);
+  }, [stats]);
+
+  // Top domains sorted by request count
+  const topDomainsByRequests = React.useMemo(() => {
+    if (!stats?.domains) return [];
+    return Object.values(stats.domains)
+      .sort((a, b) => b.request_count - a.request_count)
+      .slice(0, 10);
+  }, [stats]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>
+            Traffic Details
+            {profileName && (
+              <span className="text-muted-foreground font-normal ml-2">
+                — {profileName}
+              </span>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+
+        <ScrollArea className="h-[60vh]">
+          <div className="space-y-6 pr-4">
+            {/* Chart with Period Selector */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-sm font-medium">Bandwidth Over Time</h3>
+                <Select
+                  value={timePeriod}
+                  onValueChange={(v) => setTimePeriod(v as TimePeriod)}
+                >
+                  <SelectTrigger className="w-[120px] h-8">
+                    <SelectValue placeholder="Time period" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="1m">Last 1 min</SelectItem>
+                    <SelectItem value="5m">Last 5 min</SelectItem>
+                    <SelectItem value="30m">Last 30 min</SelectItem>
+                    <SelectItem value="1h">Last 1 hour</SelectItem>
+                    <SelectItem value="2h">Last 2 hours</SelectItem>
+                    <SelectItem value="4h">Last 4 hours</SelectItem>
+                    <SelectItem value="1d">Last 1 day</SelectItem>
+                    <SelectItem value="7d">Last 7 days</SelectItem>
+                    <SelectItem value="30d">Last 30 days</SelectItem>
+                    <SelectItem value="all">All time</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="h-[200px] w-full">
+                <ResponsiveContainer width="100%" height="100%">
+                  <AreaChart
+                    data={chartData}
+                    margin={{ top: 10, right: 10, bottom: 0, left: 0 }}
+                  >
+                    <defs>
+                      <linearGradient
+                        id="sentGradient"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor="var(--chart-1)"
+                          stopOpacity={0.5}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor="var(--chart-1)"
+                          stopOpacity={0.1}
+                        />
+                      </linearGradient>
+                      <linearGradient
+                        id="receivedGradient"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor="var(--chart-2)"
+                          stopOpacity={0.5}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor="var(--chart-2)"
+                          stopOpacity={0.1}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid
+                      strokeDasharray="3 3"
+                      className="stroke-muted"
+                    />
+                    <XAxis
+                      dataKey="time"
+                      tickFormatter={(t) =>
+                        new Date(t * 1000).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })
+                      }
+                      className="text-xs"
+                      tick={{ fill: "var(--muted-foreground)" }}
+                    />
+                    <YAxis
+                      tickFormatter={(v) => formatBytesPerSecond(v)}
+                      className="text-xs"
+                      tick={{ fill: "var(--muted-foreground)" }}
+                      width={60}
+                    />
+                    <Tooltip content={renderTooltip} />
+                    <Area
+                      type="monotone"
+                      dataKey="sent"
+                      stackId="1"
+                      stroke="var(--chart-1)"
+                      fill="url(#sentGradient)"
+                      strokeWidth={1.5}
+                      isAnimationActive={false}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey="received"
+                      stackId="1"
+                      stroke="var(--chart-2)"
+                      fill="url(#receivedGradient)"
+                      strokeWidth={1.5}
+                      isAnimationActive={false}
+                    />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+
+              <div className="flex items-center justify-center gap-6 mt-2">
+                <div className="flex items-center gap-2">
+                  <div
+                    className="w-3 h-3 rounded"
+                    style={{ backgroundColor: "var(--chart-1)" }}
+                  />
+                  <span className="text-xs text-muted-foreground">Sent</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div
+                    className="w-3 h-3 rounded"
+                    style={{ backgroundColor: "var(--chart-2)" }}
+                  />
+                  <span className="text-xs text-muted-foreground">
+                    Received
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Period Stats - now uses backend-computed values */}
+            <div className="grid grid-cols-3 gap-4">
+              <div className="bg-muted/50 rounded-lg p-3">
+                <p className="text-xs text-muted-foreground">
+                  Sent ({timePeriod === "all" ? "total" : timePeriod})
+                </p>
+                <p className="text-lg font-semibold text-chart-1">
+                  {formatBytes(stats?.period_bytes_sent || 0)}
+                </p>
+              </div>
+              <div className="bg-muted/50 rounded-lg p-3">
+                <p className="text-xs text-muted-foreground">
+                  Received ({timePeriod === "all" ? "total" : timePeriod})
+                </p>
+                <p className="text-lg font-semibold text-chart-2">
+                  {formatBytes(stats?.period_bytes_received || 0)}
+                </p>
+              </div>
+              <div className="bg-muted/50 rounded-lg p-3">
+                <p className="text-xs text-muted-foreground">Total Requests</p>
+                <p className="text-lg font-semibold">
+                  {(stats?.total_requests || 0).toLocaleString()}
+                </p>
+              </div>
+            </div>
+
+            {/* Total Stats (smaller, under period stats) */}
+            <div className="flex items-center gap-6 text-sm text-muted-foreground border-t pt-4">
+              <div>
+                <span className="font-medium">Total:</span>{" "}
+                {formatBytes(
+                  (stats?.total_bytes_sent || 0) +
+                    (stats?.total_bytes_received || 0),
+                )}
+              </div>
+              <div>
+                <span className="font-medium">Requests:</span>{" "}
+                {stats?.total_requests?.toLocaleString() || 0}
+              </div>
+            </div>
+
+            {/* Disclaimer about proxy/VPN traffic calculation */}
+            <p className="text-xs text-muted-foreground italic">
+              Note: If you are using a proxy, VPN, or similar service, your
+              provider may calculate traffic differently due to encryption
+              overhead and protocol differences.
+            </p>
+
+            {/* Top Domains by Traffic */}
+            {topDomainsByTraffic.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium mb-2">
+                  Top Domains by Traffic
+                </h3>
+                <div className="border rounded-md">
+                  <div className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30">
+                    <span>Domain</span>
+                    <span className="text-right">Requests</span>
+                    <span className="text-right">Sent</span>
+                    <span className="text-right">Received</span>
+                  </div>
+                  <div className="max-h-[180px] overflow-y-auto">
+                    {topDomainsByTraffic.map((domain, index) => (
+                      <div
+                        key={domain.domain}
+                        className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30"
+                      >
+                        <div className="flex items-center gap-2 min-w-0">
+                          <span className="text-xs text-muted-foreground w-4 shrink-0">
+                            {index + 1}
+                          </span>
+                          <span className="truncate" title={domain.domain}>
+                            {domain.domain}
+                          </span>
+                        </div>
+                        <span className="text-right text-muted-foreground">
+                          {domain.request_count.toLocaleString()}
+                        </span>
+                        <span className="text-right text-chart-1">
+                          {formatBytes(domain.bytes_sent)}
+                        </span>
+                        <span className="text-right text-chart-2">
+                          {formatBytes(domain.bytes_received)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Top Domains by Requests */}
+            {topDomainsByRequests.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium mb-2">
+                  Top Domains by Requests
+                </h3>
+                <div className="border rounded-md">
+                  <div className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30">
+                    <span>Domain</span>
+                    <span className="text-right">Requests</span>
+                    <span className="text-right">Total Traffic</span>
+                  </div>
+                  <div className="max-h-[180px] overflow-y-auto">
+                    {topDomainsByRequests.map((domain, index) => (
+                      <div
+                        key={domain.domain}
+                        className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30"
+                      >
+                        <div className="flex items-center gap-2 min-w-0">
+                          <span className="text-xs text-muted-foreground w-4 shrink-0">
+                            {index + 1}
+                          </span>
+                          <span className="truncate" title={domain.domain}>
+                            {domain.domain}
+                          </span>
+                        </div>
+                        <span className="text-right text-muted-foreground">
+                          {domain.request_count.toLocaleString()}
+                        </span>
+                        <span className="text-right">
+                          {formatBytes(
+                            domain.bytes_sent + domain.bytes_received,
+                          )}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Unique IPs */}
+            {stats?.unique_ips && stats.unique_ips.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium mb-2">
+                  Unique IPs ({stats.unique_ips.length})
+                </h3>
+                <div className="border rounded-md p-3 max-h-[120px] overflow-y-auto">
+                  <div className="flex flex-wrap gap-1.5">
+                    {stats.unique_ips.map((ip) => (
+                      <span
+                        key={ip}
+                        className="text-xs bg-muted px-2 py-1 rounded font-mono"
+                      >
+                        {ip}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* No data state */}
+            {!stats && (
+              <div className="text-center py-8 text-muted-foreground">
+                <p>No traffic data available for this profile.</p>
+                <p className="text-sm mt-1">
+                  Traffic data will appear after you launch the profile.
+                </p>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/ui/card.tsx

@@ -1,5 +1,3 @@
-import type * as React from "react";
-
 import { cn } from "@/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
@@ -20,7 +18,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className,
       )}
       {...props}

src/components/ui/chart.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import type {
+  Props as DefaultLegendContentProps,
+  LegendPayload,
+} from "recharts/types/component/DefaultLegendContent";
+import type { Payload } from "recharts/types/component/DefaultTooltipContent";
+import type { TooltipContentProps } from "recharts/types/component/Tooltip";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: Safe usage for CSS variables from chart config
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  TooltipContentProps<number, string> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+      labelClassName?: string;
+      color?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload
+            .filter((item: Payload<number, string>) => item.type !== "none")
+            .map((item: Payload<number, string>, index: number) => {
+              const key = `${nameKey || item.name || item.dataKey || "value"}`;
+              const itemConfig = getPayloadConfigFromPayload(config, item, key);
+              const indicatorColor = color || item.payload?.fill || item.color;
+
+              return (
+                <div
+                  key={String(item.dataKey ?? index)}
+                  className={cn(
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    indicator === "dot" && "items-center",
+                  )}
+                >
+                  {formatter && item?.value !== undefined && item.name ? (
+                    formatter(item.value, item.name, item, index, item.payload)
+                  ) : (
+                    <>
+                      {itemConfig?.icon ? (
+                        <itemConfig.icon />
+                      ) : (
+                        !hideIndicator && (
+                          <div
+                            className={cn(
+                              "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                              {
+                                "h-2.5 w-2.5": indicator === "dot",
+                                "w-1": indicator === "line",
+                                "w-0 border-[1.5px] border-dashed bg-transparent":
+                                  indicator === "dashed",
+                                "my-0.5": nestLabel && indicator === "dashed",
+                              },
+                            )}
+                            style={
+                              {
+                                "--color-bg": indicatorColor,
+                                "--color-border": indicatorColor,
+                              } as React.CSSProperties
+                            }
+                          />
+                        )
+                      )}
+                      <div
+                        className={cn(
+                          "flex flex-1 justify-between leading-none",
+                          nestLabel ? "items-end" : "items-center",
+                        )}
+                      >
+                        <div className="grid gap-1.5">
+                          {nestLabel ? tooltipLabel : null}
+                          <span className="text-muted-foreground">
+                            {itemConfig?.label || item.name}
+                          </span>
+                        </div>
+                        {item.value && (
+                          <span className="font-mono font-medium tabular-nums text-foreground">
+                            {item.value.toLocaleString()}
+                          </span>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<DefaultLegendContentProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload
+          .filter((item: LegendPayload) => item.type !== "none")
+          .map((item: LegendPayload) => {
+            const key = `${nameKey || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+            return (
+              <div
+                key={item.value}
+                className={cn(
+                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+                )}
+              >
+                {itemConfig?.icon && !hideIcon ? (
+                  <itemConfig.icon />
+                ) : (
+                  <div
+                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                  />
+                )}
+                {itemConfig?.label}
+              </div>
+            );
+          })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

src/components/ui/tooltip.tsx

@@ -37,14 +37,19 @@ function TooltipTrigger({
 function TooltipContent({
   className,
   sideOffset = 0,
+  alignOffset,
+  arrowOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  arrowOffset?: number;
+}) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
+        alignOffset={alignOffset}
         className={cn(
           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[50000] w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
           className,
@@ -52,7 +57,14 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-[50000] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow
+          className="fill-primary z-[50000]"
+          style={
+            arrowOffset !== 0
+              ? { transform: `translateX(${-arrowOffset}px)` }
+              : undefined
+          }
+        />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

src/lib/themes.ts

@@ -16,6 +16,11 @@ export interface ThemeColors extends Record<string, string> {
   "--destructive": string;
   "--destructive-foreground": string;
   "--border": string;
+  "--chart-1": string;
+  "--chart-2": string;
+  "--chart-3": string;
+  "--chart-4": string;
+  "--chart-5": string;
 }
 
 export interface Theme {
@@ -46,6 +51,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#f7768e",
       "--destructive-foreground": "#1a1b26",
       "--border": "#3b4261",
+      "--chart-1": "#7aa2f7",
+      "--chart-2": "#9ece6a",
+      "--chart-3": "#bb9af7",
+      "--chart-4": "#2ac3de",
+      "--chart-5": "#ff9e64",
     },
   },
   {
@@ -69,6 +79,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#ff5555",
       "--destructive-foreground": "#f8f8f2",
       "--border": "#6272a4",
+      "--chart-1": "#bd93f9",
+      "--chart-2": "#50fa7b",
+      "--chart-3": "#ff79c6",
+      "--chart-4": "#8be9fd",
+      "--chart-5": "#ffb86c",
     },
   },
   {
@@ -92,6 +107,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#ff819f",
       "--destructive-foreground": "#273136",
       "--border": "#304e37",
+      "--chart-1": "#7eb08a",
+      "--chart-2": "#d2b48c",
+      "--chart-3": "#7ea4b0",
+      "--chart-4": "#a8c97f",
+      "--chart-5": "#e6c07b",
     },
   },
   {
@@ -115,6 +135,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#ef4444",
       "--destructive-foreground": "#f7f7f8",
       "--border": "#2a2e39",
+      "--chart-1": "#5755d9",
+      "--chart-2": "#0ea5e9",
+      "--chart-3": "#f25f4c",
+      "--chart-4": "#22c55e",
+      "--chart-5": "#f59e0b",
     },
   },
   {
@@ -138,6 +163,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#f07178",
       "--destructive-foreground": "#b3b1ad",
       "--border": "#1f2430",
+      "--chart-1": "#39bae6",
+      "--chart-2": "#c2d94c",
+      "--chart-3": "#d2a6ff",
+      "--chart-4": "#ffb454",
+      "--chart-5": "#f07178",
     },
   },
   {
@@ -161,6 +191,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#f07178",
       "--destructive-foreground": "#fafafa",
       "--border": "#e7eaed",
+      "--chart-1": "#399ee6",
+      "--chart-2": "#86b300",
+      "--chart-3": "#a37acc",
+      "--chart-4": "#fa8d3e",
+      "--chart-5": "#f07178",
     },
   },
   {
@@ -184,6 +219,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#d20f39",
       "--destructive-foreground": "#eff1f5",
       "--border": "#9ca0b0",
+      "--chart-1": "#1e66f5",
+      "--chart-2": "#40a02b",
+      "--chart-3": "#8839ef",
+      "--chart-4": "#04a5e5",
+      "--chart-5": "#df8e1d",
     },
   },
   {
@@ -207,6 +247,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#e78284",
       "--destructive-foreground": "#303446",
       "--border": "#737994",
+      "--chart-1": "#8caaee",
+      "--chart-2": "#a6d189",
+      "--chart-3": "#ca9ee6",
+      "--chart-4": "#99d1db",
+      "--chart-5": "#e5c890",
     },
   },
   {
@@ -230,6 +275,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#ed8796",
       "--destructive-foreground": "#24273a",
       "--border": "#6e738d",
+      "--chart-1": "#8aadf4",
+      "--chart-2": "#a6da95",
+      "--chart-3": "#c6a0f6",
+      "--chart-4": "#91d7e3",
+      "--chart-5": "#eed49f",
     },
   },
   {
@@ -253,6 +303,11 @@ export const THEMES: Theme[] = [
       "--destructive": "#f38ba8",
       "--destructive-foreground": "#1e1e2e",
       "--border": "#585b70",
+      "--chart-1": "#89b4fa",
+      "--chart-2": "#a6e3a1",
+      "--chart-3": "#cba6f7",
+      "--chart-4": "#89dceb",
+      "--chart-5": "#f9e2af",
     },
   },
 ];
@@ -276,6 +331,11 @@ export const THEME_VARIABLES: Array<{ key: keyof ThemeColors; label: string }> =
     { key: "--destructive", label: "Destructive" },
     { key: "--destructive-foreground", label: "Destructive FG" },
     { key: "--border", label: "Border" },
+    { key: "--chart-1", label: "Chart 1" },
+    { key: "--chart-2", label: "Chart 2" },
+    { key: "--chart-3", label: "Chart 3" },
+    { key: "--chart-4", label: "Chart 4" },
+    { key: "--chart-5", label: "Chart 5" },
   ];
 
 export function getThemeById(id: string): Theme | undefined {

src/styles/globals.css

@@ -79,6 +79,11 @@
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
 }
 
 .dark {
@@ -113,6 +118,11 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
 }
 
 @layer base {

src/types.ts

@@ -7,7 +7,7 @@ export interface ProxySettings {
 }
 
 export interface TableSortingSettings {
-  column: string; // "name", "browser", "status"
+  column: string; // "name", "note", "status"
   direction: string; // "asc" or "desc"
 }
 
@@ -23,6 +23,7 @@ export interface BrowserProfile {
   camoufox_config?: CamoufoxConfig; // Camoufox configuration
   group_id?: string; // Reference to profile group
   tags?: string[];
+  note?: string; // User note
 }
 
 export interface ProxyCheckResult {
@@ -267,3 +268,58 @@ export interface CamoufoxLaunchResult {
   profilePath?: string;
   url?: string;
 }
+
+// Traffic stats types
+export interface BandwidthDataPoint {
+  timestamp: number;
+  bytes_sent: number;
+  bytes_received: number;
+}
+
+export interface DomainAccess {
+  domain: string;
+  request_count: number;
+  bytes_sent: number;
+  bytes_received: number;
+  first_access: number;
+  last_access: number;
+}
+
+export interface TrafficStats {
+  proxy_id: string;
+  profile_id?: string;
+  session_start: number;
+  last_update: number;
+  total_bytes_sent: number;
+  total_bytes_received: number;
+  total_requests: number;
+  bandwidth_history: BandwidthDataPoint[];
+  domains: Record<string, DomainAccess>;
+  unique_ips: string[];
+}
+
+export interface TrafficSnapshot {
+  profile_id?: string;
+  session_start: number;
+  last_update: number;
+  total_bytes_sent: number;
+  total_bytes_received: number;
+  total_requests: number;
+  current_bytes_sent: number;
+  current_bytes_received: number;
+  recent_bandwidth: BandwidthDataPoint[];
+}
+
+export interface FilteredTrafficStats {
+  profile_id?: string;
+  session_start: number;
+  last_update: number;
+  total_bytes_sent: number;
+  total_bytes_received: number;
+  total_requests: number;
+  bandwidth_history: BandwidthDataPoint[];
+  period_bytes_sent: number;
+  period_bytes_received: number;
+  domains: Record<string, DomainAccess>;
+  unique_ips: string[];
+}

tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -29,7 +29,9 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "next-env.d.ts",
-    "dist/types/**/*.ts"
+    "dist/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "dist/dev/types/**/*.ts"
   ],
   "exclude": ["node_modules", "nodecar", "src-tauri/target"]
 }