From 7f1fa1904ce04b12691c15da0865e8f5f5154ed2 Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Sun, 22 Mar 2026 10:55:48 -0700
Subject: [PATCH] Make DevTools a toggle in Settings > Developer tab

- DevTools off by default (no more auto-open on launch)
- New "Developer" tab in Settings with a checkbox to toggle devtools
- Toggle takes effect immediately (opens/closes inspector)
- Setting persists: devtools restored on next launch if enabled
- toggle_devtools Tauri command wraps window.open/close_devtools

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src-tauri/src/commands/settings.rs      | 13 +++++++++++++
 src-tauri/src/lib.rs                    |  5 ++---
 src/lib/components/SettingsModal.svelte | 20 +++++++++++++++++++-
 src/lib/stores/settings.ts              |  2 ++
 src/routes/+page.svelte                 |  7 ++++++-
 5 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src-tauri/src/commands/settings.rs b/src-tauri/src/commands/settings.rs
index e750807..2ea4ad3 100644
--- a/src-tauri/src/commands/settings.rs
+++ b/src-tauri/src/commands/settings.rs
@@ -32,3 +32,16 @@ pub fn save_settings(settings: Value) -> Result<(), String> {
     fs::write(&path, json).map_err(|e| format!("Cannot write settings: {e}"))?;
     Ok(())
 }
+
+/// Toggle devtools on the main window.
+#[tauri::command]
+pub fn toggle_devtools(app: tauri::AppHandle, open: bool) {
+    use tauri::Manager;
+    if let Some(window) = app.get_webview_window("main") {
+        if open {
+            window.open_devtools();
+        } else {
+            window.close_devtools();
+        }
+    }
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 05eed99..3ab7897 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -13,7 +13,7 @@ use commands::project::{
     create_project, delete_project, get_project, list_projects, load_project_file,
     load_project_transcript, save_project_file, save_project_transcript, update_segment,
 };
-use commands::settings::{load_settings, save_settings};
+use commands::settings::{load_settings, save_settings, toggle_devtools};
 use commands::sidecar::{check_sidecar, check_sidecar_update, download_sidecar};
 use commands::system::{
     get_data_dir, llama_list_models, llama_start, llama_status, llama_stop, log_frontend,
@@ -41,8 +41,6 @@ pub fn run() {
             // Set the webview background to match the app's dark theme
             if let Some(window) = app.get_webview_window("main") {
                 let _ = window.set_background_color(Some(Color(10, 10, 35, 255)));
-                // Enable right-click → Inspect (requires "devtools" feature in Cargo.toml)
-                window.open_devtools();
             }
             Ok(())
         })
@@ -74,6 +72,7 @@ pub fn run() {
             download_sidecar,
             check_sidecar_update,
             log_frontend,
+            toggle_devtools,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/src/lib/components/SettingsModal.svelte b/src/lib/components/SettingsModal.svelte
index 7f8de81..b7a23f8 100644
--- a/src/lib/components/SettingsModal.svelte
+++ b/src/lib/components/SettingsModal.svelte
@@ -11,7 +11,7 @@
   let { visible, onClose }: Props = $props();
 
   let localSettings = $state<AppSettings>({ ...$settings });
-  let activeTab = $state<'transcription' | 'speakers' | 'ai' | 'local'>('transcription');
+  let activeTab = $state<'transcription' | 'speakers' | 'ai' | 'local' | 'developer'>('transcription');
   let modelStatus = $state<'idle' | 'downloading' | 'success' | 'error'>('idle');
   let modelError = $state('');
   let revealedFields = $state<Set<string>>(new Set());
@@ -84,6 +84,9 @@
         <button class="tab" class:active={activeTab === 'local'} onclick={() => activeTab = 'local'}>
           Local AI
         </button>
+        <button class="tab" class:active={activeTab === 'developer'} onclick={() => activeTab = 'developer'}>
+          Developer
+        </button>
       </div>
 
       <div class="modal-body">
@@ -242,6 +245,21 @@
             Place GGUF model files in ~/.voicetonotes/models/ for auto-detection.
             The local AI server uses the OpenAI-compatible API from llama.cpp.
           </p>
+        {:else if activeTab === 'developer'}
+          <div class="field checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={localSettings.devtools_enabled}
+                onchange={async (e) => {
+                  localSettings.devtools_enabled = (e.target as HTMLInputElement).checked;
+                  await invoke('toggle_devtools', { open: localSettings.devtools_enabled });
+                }}
+              />
+              Enable Developer Tools
+            </label>
+            <p class="hint">Opens the browser inspector for debugging. Changes take effect immediately.</p>
+          </div>
         {/if}
       </div>
 
diff --git a/src/lib/stores/settings.ts b/src/lib/stores/settings.ts
index 86262c9..c2c42cc 100644
--- a/src/lib/stores/settings.ts
+++ b/src/lib/stores/settings.ts
@@ -18,6 +18,7 @@ export interface AppSettings {
   skip_diarization: boolean;
   hf_token: string;
   num_speakers: number | null;
+  devtools_enabled: boolean;
 }
 
 const defaults: AppSettings = {
@@ -37,6 +38,7 @@ const defaults: AppSettings = {
   skip_diarization: false,
   hf_token: '',
   num_speakers: null,
+  devtools_enabled: false,
 };
 
 export const settings = writable<AppSettings>({ ...defaults });
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0a41cf5..298332e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -63,7 +63,12 @@
   }
 
   onMount(() => {
-    loadSettings();
+    loadSettings().then(() => {
+      // Restore devtools state from settings
+      if ($settings.devtools_enabled) {
+        invoke('toggle_devtools', { open: true });
+      }
+    });
     checkSidecar().then(() => {
       if (sidecarReady) {
         checkSidecarUpdate();