Bugfix: transient error dialog was see-through

- `TransferErrorDialog`'s `transient` branch used `--color-warning-bg` (rgba with 0.1/0.15 alpha) as the full dialog background, so the file pane bled through the modal.
- New `--color-warning-bg-solid` token (opaque, `color-mix(warning, bg-secondary)`) for full-surface uses; the translucent `--color-warning-bg` keeps its existing inline-banner role.
- Debug window: new "Transfer error dialog (modal)" section with one button per category (transient/needs-action/serious) to open the modal directly. Wires a `debug-trigger-transfer-error` event through `+page.svelte` → `DualPaneExplorer.triggerTransferError` → the same `dialogs.handleTransferError` path the live flow uses.

Author: vdavid

apps/desktop/src/app.css

@@ -71,6 +71,10 @@
   --color-error-text: #b91c1c;
   --color-warning: #e65100;
   --color-warning-bg: rgba(230, 81, 0, 0.1);
+  /* Opaque sibling for full-surface uses (modal dialogs) where the translucent
+     `--color-warning-bg` would let the layer beneath bleed through. Matches the
+     visual of the translucent tint when composited over `--color-bg-secondary`. */
+  --color-warning-bg-solid: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-secondary));
   /* Same reasoning as `--color-error-text`: the brand `--color-warning` at `#e65100`
      clocks ~3.3:1 on the warning tint; this darker variant meets AA. */
   --color-warning-text: #9a3412;
@@ -319,6 +323,8 @@
     --color-error-text: #fca5a5;
     --color-warning: #f5a623;
     --color-warning-bg: rgba(245, 166, 35, 0.15);
+    /* Opaque sibling for full-surface uses; see light-mode comment. */
+    --color-warning-bg-solid: color-mix(in srgb, var(--color-warning) 15%, var(--color-bg-secondary));
     --color-warning-text: #fdba74;
 
     /* Disk usage bar: solid colors, same mixing strategy as light mode */

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

@@ -2226,6 +2226,16 @@
         }
     }
 
+    /** Debug only: open the TransferErrorDialog with a synthetic error carrying the given FriendlyError. */
+    export function triggerTransferError(friendly: FriendlyError) {
+        const error: WriteOperationError = {
+            type: 'io_error',
+            path: '/debug/preview',
+            message: friendly.title,
+        }
+        dialogs.handleTransferError(error, friendly)
+    }
+
     /** Refresh network hosts in the focused pane (used by ⌘R shortcut). */
     export function refreshNetworkHosts() {
         const paneRef = getPaneRef(focusedPane)

apps/desktop/src/lib/file-operations/transfer/TransferErrorDialog.svelte

@@ -36,7 +36,7 @@
         category === 'serious'
             ? 'width: 420px; max-width: 90vw; background: var(--color-error-bg); border-color: var(--color-error-border)'
             : category === 'transient'
-              ? 'width: 420px; max-width: 90vw; background: var(--color-warning-bg); border-color: var(--color-border-strong)'
+              ? 'width: 420px; max-width: 90vw; background: var(--color-warning-bg-solid); border-color: var(--color-border-strong)'
               : 'width: 420px; max-width: 90vw; background: var(--color-bg-secondary); border-color: var(--color-border-strong)',
     )
 

apps/desktop/src/routes/(main)/+page.svelte

@@ -294,6 +294,10 @@
                 const { pane } = event.payload as { pane: 'left' | 'right' | 'both' }
                 explorerRef?.resetError(pane)
             })
+            await listenTauri('debug-trigger-transfer-error', (event) => {
+                const { friendly } = event.payload as { friendly: FriendlyError }
+                explorerRef?.triggerTransferError(friendly)
+            })
         }
     }
 

apps/desktop/src/routes/(main)/explorer-api.ts

@@ -53,6 +53,7 @@ export interface ExplorerAPI {
   refreshNetworkHosts: () => void
   injectError: (pane: 'left' | 'right', friendly: FriendlyError) => void
   resetError: (pane: 'left' | 'right' | 'both') => void
+  triggerTransferError: (friendly: FriendlyError) => void
   newTab: () => boolean
   closeActiveTab: () => 'closed' | 'last-tab'
   closeActiveTabWithConfirmation: () => Promise<'closed' | 'last-tab' | 'cancelled'>

apps/desktop/src/routes/debug/DebugErrorPreviewPanel.svelte

@@ -140,6 +140,29 @@
             // Not in Tauri environment
         }
     }
+
+    /** Opens the modal TransferErrorDialog in the main window, using the same FriendlyError shape the live error path produces. */
+    async function triggerTransferErrorDialog(state: ErrorState) {
+        try {
+            const { invoke } = await import('@tauri-apps/api/core')
+            const friendly = await invoke<FriendlyError>('preview_friendly_error', {
+                errorCode: state.code ?? null,
+                variant: state.code === undefined ? state.name : null,
+                providerPath: null,
+            })
+            const { emitTo } = await import('@tauri-apps/api/event')
+            await emitTo('main', 'debug-trigger-transfer-error', { friendly })
+        } catch (error) {
+            // eslint-disable-next-line no-console -- Debug window is dev-only
+            console.error('triggerTransferErrorDialog failed:', error)
+        }
+    }
+
+    const dialogPreviewSamples: ErrorState[] = [
+        { code: 60, name: 'ETIMEDOUT', category: 'transient', title: 'Connection timed out' },
+        { code: 13, name: 'EACCES', category: 'needs_action', title: 'No permission' },
+        { code: 5, name: 'EIO', category: 'serious', title: 'Disk read problem' },
+    ]
 </script>
 
 <section class="debug-section">
@@ -250,3 +273,22 @@
         </div>
     </div>
 </section>
+
+<section class="debug-section">
+    <h2>Transfer error dialog (modal)</h2>
+    <div class="error-preview-panel">
+        <div class="error-group-header">
+            Opens the modal TransferErrorDialog. Categories drive the container tint (serious = error, transient =
+            warning, needs action = neutral).
+        </div>
+        {#each dialogPreviewSamples as state (state.name)}
+            <div class="error-row">
+                <span class="error-label">
+                    {state.category}
+                    <span class="error-title">{state.title} ({state.name})</span>
+                </span>
+                <button class="error-trigger-btn" onclick={() => void triggerTransferErrorDialog(state)}>Open</button>
+            </div>
+        {/each}
+    </div>
+</section>