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/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>
 

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

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