Tooling: Add awesome debug pane to app

- Can toggle light/dark mode
- See back/forward history
- Opens in separate window
- Only appears in dev mode

Author: vdavid

CONTRIBUTING.md

@@ -21,6 +21,16 @@ pnpm dev
 
 This starts both the Svelte frontend and the Rust backend with hot reload.
 
+## Debug window
+
+In dev mode, press **Cmd+D** to open a debug window. This window is only available in dev builds and provides:
+
+- **Dark mode toggle**: Switch between light and dark themes without changing your system settings
+- **Navigation history**: Real-time view of back/forward history for both panes, showing current position and
+  available history entries
+
+The debug window is a separate, movable window that updates in real-time as you navigate.
+
 ## Logging
 
 ### Rust

apps/desktop/src-tauri/capabilities/default.json

@@ -3,11 +3,18 @@
     "identifier": "default",
     "description": "Capability for the main window",
     "windows": [
-        "main"
+        "main",
+        "debug"
     ],
     "permissions": [
         "core:default",
         "core:window:allow-start-dragging",
+        "core:window:allow-close",
+        "core:window:allow-theme",
+        "core:webview:allow-webview-close",
+        "core:webview:allow-create-webview-window",
+        "core:app:allow-set-app-theme",
+        "core:event:default",
         "opener:default",
         {
             "identifier": "opener:allow-open-path",

apps/desktop/src-tauri/capabilities/desktop.json

@@ -6,7 +6,8 @@
     "linux"
   ],
   "windows": [
-    "main"
+    "main",
+    "debug"
   ],
   "permissions": [
     "window-state:default"

apps/desktop/src/lib/file-explorer/DualPaneExplorer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte'
+    import { onMount, onDestroy, untrack } from 'svelte'
     import FilePane from './FilePane.svelte'
     import PaneResizer from './PaneResizer.svelte'
     import LoadingIcon from '../LoadingIcon.svelte'
@@ -75,6 +75,21 @@
     let leftHistory = $state<NavigationHistory>(createHistory(DEFAULT_VOLUME_ID, '~'))
     let rightHistory = $state<NavigationHistory>(createHistory(DEFAULT_VOLUME_ID, '~'))
 
+    // Emit history state to debug window (dev mode only)
+    $effect(() => {
+        if (!import.meta.env.DEV) return
+        // Read the reactive values
+        const left = leftHistory
+        const right = rightHistory
+        const focused = focusedPane
+        // Emit without tracking to avoid infinite loops
+        untrack(() => {
+            void import('@tauri-apps/api/event').then(({ emit }) => {
+                void emit('debug-history', { left, right, focusedPane: focused })
+            })
+        })
+    })
+
     // Derived volume paths - handle 'network' virtual volume specially
     const leftVolumePath = $derived(
         leftVolumeId === 'network' ? 'smb://' : (volumes.find((v) => v.id === leftVolumeId)?.path ?? '/'),

apps/desktop/src/routes/+page.svelte

@@ -65,6 +65,34 @@
     let unlistenCommandPalette: UnlistenFn | undefined
     let unlistenSwitchPane: UnlistenFn | undefined
 
+    /** Opens the debug window (dev mode only) */
+    async function openDebugWindow() {
+        try {
+            const { WebviewWindow } = await import('@tauri-apps/api/webviewWindow')
+            // Check if debug window already exists
+            const existing = await WebviewWindow.getByLabel('debug')
+            if (existing) {
+                await existing.setFocus()
+                return
+            }
+            // Create new debug window
+            new WebviewWindow('debug', {
+                url: '/debug',
+                title: 'Debug',
+                width: 480,
+                height: 500,
+                resizable: true,
+                minimizable: false,
+                maximizable: false,
+                closable: true,
+                focus: true,
+            })
+        } catch (error) {
+            // eslint-disable-next-line no-console -- Debug window is dev-only
+            console.error('Failed to open debug window:', error)
+        }
+    }
+
     /** Start window drag when title bar is clicked */
     async function handleTitleBarMouseDown(e: MouseEvent) {
         if (e.buttons === 1) {
@@ -154,6 +182,13 @@
                 return
             }
 
+            // Debug window: ⌘D (dev mode only)
+            if (import.meta.env.DEV && e.metaKey && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'd') {
+                e.preventDefault()
+                void openDebugWindow()
+                return
+            }
+
             // Suppress Cmd+A (select all) - always
             if (e.metaKey && e.key === 'a') {
                 e.preventDefault()