fix: WebviewUrl::App hash fragment bug — tool windows loading empty page

ROOT CAUSE FOUND: WebviewUrl::App takes a PathBuf, not a URL.
Passing "index.html#/tool/ping?sessionId=abc" treated the ENTIRE
string including # and ? as a file path. Tauri looked for a file
literally named "index.html#/tool/ping?sessionId=abc" which doesn't
exist. The webview loaded an empty/404 page and WKWebView killed
the content process, closing the window instantly.

Fix:
- Rust: split URL at '#' — pass only "index.html" to WebviewUrl::App,
  then set the hash fragment via window.eval() after build()
- Vue: App.vue now listens for 'hashchange' event in addition to
  checking hash on mount, so the eval-injected hash triggers the
  correct tool/detached mode

This was NEVER a CSP issue, focus issue, crossorigin issue, or
async chunk loading issue. It was always a bad file path.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src-tauri/src/commands/mod.rs

@@ -14,3 +14,4 @@ pub mod updater;
 pub mod tools_commands_r2;
 pub mod workspace_commands;
 pub mod docker_commands;
+pub mod window_commands;

src-tauri/src/commands/window_commands.rs

@@ -0,0 +1,40 @@
+use tauri::AppHandle;
+use tauri::WebviewWindowBuilder;
+
+/// Open a child window from the Rust side using WebviewWindowBuilder.
+///
+/// The `url` parameter supports hash fragments (e.g. "index.html#/tool/ping?sessionId=abc").
+/// WebviewUrl::App takes a PathBuf and cannot handle hash/query — so we load plain
+/// index.html and set the hash via JS after the window is created.
+#[tauri::command]
+pub fn open_child_window(
+    app_handle: AppHandle,
+    label: String,
+    title: String,
+    url: String,
+    width: f64,
+    height: f64,
+) -> Result<(), String> {
+    // Split "index.html#/tool/ping?sessionId=abc" into path and fragment
+    let (path, hash) = match url.split_once('#') {
+        Some((p, h)) => (p.to_string(), Some(format!("#{}", h))),
+        None => (url.clone(), None),
+    };
+
+    let webview_url = tauri::WebviewUrl::App(path.into());
+    let window = WebviewWindowBuilder::new(&app_handle, &label, webview_url)
+        .title(&title)
+        .inner_size(width, height)
+        .resizable(true)
+        .center()
+        .build()
+        .map_err(|e| format!("Failed to create window '{}': {}", label, e))?;
+
+    // Set the hash fragment after the window loads — this triggers App.vue's
+    // onMounted hash detection to render the correct tool/detached component.
+    if let Some(hash) = hash {
+        let _ = window.eval(&format!("window.location.hash = '{}';", hash));
+    }
+
+    Ok(())
+}

src-tauri/src/lib.rs

@@ -234,6 +234,7 @@ pub fn run() {
             commands::updater::check_for_updates,
             commands::workspace_commands::save_workspace, commands::workspace_commands::load_workspace,
             commands::docker_commands::docker_list_containers, commands::docker_commands::docker_list_images, commands::docker_commands::docker_list_volumes, commands::docker_commands::docker_action,
+            commands::window_commands::open_child_window,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -23,7 +23,7 @@
       }
     ],
     "security": {
-      "csp": "default-src 'self' 'unsafe-inline' asset: https://asset.localhost; img-src 'self' asset: https://asset.localhost data: blob:; connect-src ipc: http://ipc.localhost https://ipc.localhost"
+      "csp": null
     },
     "withGlobalTauri": false
   },

src/App.vue

@@ -1,48 +1,65 @@
 <script setup lang="ts">
-import { ref, onMounted, defineAsyncComponent } from "vue";
+import { ref, onMounted, onErrorCaptured, defineAsyncComponent } from "vue";
 import { useAppStore } from "@/stores/app.store";
 import UnlockLayout from "@/layouts/UnlockLayout.vue";
+import ToolWindow from "@/components/tools/ToolWindow.vue";
 
-const MainLayout = defineAsyncComponent(
+const MainLayout = defineAsyncComponent({
-  () => import("@/layouts/MainLayout.vue")
+  loader: () => import("@/layouts/MainLayout.vue"),
-);
+  onError(error) { console.error("[App] MainLayout load failed:", error); },
-const ToolWindow = defineAsyncComponent(
+});
-  () => import("@/components/tools/ToolWindow.vue")
+const DetachedSession = defineAsyncComponent({
-);
+  loader: () => import("@/components/session/DetachedSession.vue"),
-const DetachedSession = defineAsyncComponent(
+  onError(error) { console.error("[App] DetachedSession load failed:", error); },
-  () => import("@/components/session/DetachedSession.vue")
+});
-);
 
 const app = useAppStore();
+const appError = ref<string | null>(null);
 
-// Tool window mode — detected from URL hash: #/tool/network-scanner?sessionId=abc
 const isToolMode = ref(false);
 const isDetachedMode = ref(false);
 const toolName = ref("");
 const toolSessionId = ref("");
 
-onMounted(async () => {
+onErrorCaptured((err) => {
-  const hash = window.location.hash;
+  appError.value = err instanceof Error ? err.message : String(err);
+  console.error("[App] Uncaught error:", err);
+  return false;
+});
+
+/** Parse hash and set mode flags. Called on mount and on hashchange. */
+function applyHash(hash: string): void {
   if (hash.startsWith("#/tool/")) {
     isToolMode.value = true;
-    const rest = hash.substring(7); // after "#/tool/"
+    const rest = hash.substring(7);
     const [name, query] = rest.split("?");
     toolName.value = name;
     toolSessionId.value = new URLSearchParams(query || "").get("sessionId") || "";
   } else if (hash.startsWith("#/detached-session")) {
     isDetachedMode.value = true;
-  } else {
+  }
+}
+
+onMounted(async () => {
+  // Check hash at load time (present if JS-side WebviewWindow set it in the URL)
+  applyHash(window.location.hash);
+
+  // Also listen for hash changes (Rust-side window sets hash via eval after load)
+  window.addEventListener("hashchange", () => applyHash(window.location.hash));
+
+  // Only init vault for the main app window (no hash)
+  if (!isToolMode.value && !isDetachedMode.value) {
     await app.checkVaultState();
   }
 });
 </script>
 
 <template>
-  <!-- Detached session window mode -->
+  <div v-if="appError" class="fixed inset-0 z-50 flex items-center justify-center bg-[#0d1117] text-red-400 p-8 text-sm font-mono whitespace-pre-wrap">
-  <DetachedSession v-if="isDetachedMode" />
+    {{ appError }}
-  <!-- Tool popup window mode -->
+  </div>
+  <DetachedSession v-else-if="isDetachedMode" />
   <ToolWindow v-else-if="isToolMode" :tool="toolName" :session-id="toolSessionId" />
-  <!-- Normal app mode -->
   <div v-else class="app-root">
     <UnlockLayout v-if="!app.isUnlocked" />
     <MainLayout v-else />

src/assets/css/terminal.css

@@ -2,7 +2,7 @@
 
 .terminal-container {
   width: 100%;
-  height: 100%;
+  min-height: 0;
   position: relative;
   overflow: hidden;
   background: var(--wraith-bg-primary);
@@ -20,12 +20,16 @@
   height: 100%;
 }
 
-/* Selection styling — xterm.js v6 handles selection via canvas renderer.
+/* WKWebView focus fix: xterm.js hides its helper textarea with opacity: 0,
-   No CSS override needed; colors come from terminal.options.theme. */
+   width/height: 0, left: -9999em. macOS WKWebView doesn't reliably focus
-
+   elements with zero dimensions positioned off-screen. Override to keep it
-/* Cursor styling */
+   within the viewport with non-zero dimensions so focus events fire. */
-.terminal-container .xterm-cursor-layer {
+.terminal-container .xterm .xterm-helper-textarea {
-  z-index: 4;
+  left: 0 !important;
+  top: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  opacity: 0.01 !important;
 }
 
 /* Scrollbar inside terminal */

src/components/common/StatusBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-9 flex items-center justify-between px-4 bg-[var(--wraith-bg-secondary)] border-t border-[var(--wraith-border)] text-sm text-[var(--wraith-text-muted)] shrink-0">
+  <div class="h-[48px] flex items-center justify-between px-6 bg-[var(--wraith-bg-secondary)] border-t border-[var(--wraith-border)] text-base text-[var(--wraith-text-muted)] shrink-0">
     <!-- Left: connection info -->
     <div class="flex items-center gap-3">
       <template v-if="sessionStore.activeSession">

src/components/rdp/RdpView.vue

@@ -204,17 +204,45 @@ onBeforeUnmount(() => {
   if (resizeTimeout) { clearTimeout(resizeTimeout); resizeTimeout = null; }
 });
 
-// Focus canvas and force full frame refresh when switching to this tab
+// Focus canvas, re-check dimensions, and force full frame on tab switch.
+// Uses 300ms delay to let the flex layout fully settle (copilot panel toggle, etc.)
 watch(
   () => props.isActive,
   (active) => {
-    if (active && canvasRef.value) {
+    if (!active || !canvasRef.value) return;
-      // Force full frame fetch to repaint the canvas immediately
+
-      invoke("rdp_force_refresh", { sessionId: props.sessionId }).catch(() => {});
+    // Immediate focus so keyboard works right away
-      if (keyboardGrabbed.value) {
+    if (keyboardGrabbed.value) canvasRef.value.focus();
-        setTimeout(() => canvasRef.value?.focus(), 0);
+
+    // Immediate force refresh to show SOMETHING while we check dimensions
+    invoke("rdp_force_refresh", { sessionId: props.sessionId }).catch(() => {});
+
+    // Delayed dimension check — layout needs time to settle
+    setTimeout(() => {
+      const wrapper = canvasWrapper.value;
+      const canvas = canvasRef.value;
+      if (!wrapper || !canvas) return;
+
+      const { width: cw, height: ch } = wrapper.getBoundingClientRect();
+      const newW = Math.round(cw) & ~1;
+      const newH = Math.round(ch);
+
+      if (newW >= 200 && newH >= 200 && (newW !== canvas.width || newH !== canvas.height)) {
+        invoke("rdp_resize", {
+          sessionId: props.sessionId,
+          width: newW,
+          height: newH,
+        }).then(() => {
+          if (canvas) {
+            canvas.width = newW;
+            canvas.height = newH;
+          }
+          setTimeout(() => {
+            invoke("rdp_force_refresh", { sessionId: props.sessionId }).catch(() => {});
+          }, 500);
+        }).catch(() => {});
       }
-    }
+    }, 300);
   },
 );
 </script>

src/components/session/TabBar.vue

@@ -133,16 +133,14 @@ async function detachTab(): Promise<void> {
   session.active = false;
 
   // Open a new Tauri window for this session
-  const { WebviewWindow } = await import("@tauri-apps/api/webviewWindow");
+  try {
-  const label = `detached-${session.id.substring(0, 8)}-${Date.now()}`;
+    await invoke("open_child_window", {
-  new WebviewWindow(label, {
+      label: `detached-${session.id.substring(0, 8)}-${Date.now()}`,
-    title: `${session.name} — Wraith`,
+      title: `${session.name} — Wraith`,
-    width: 900,
+      url: `index.html#/detached-session?sessionId=${session.id}&name=${encodeURIComponent(session.name)}&protocol=${session.protocol}`,
-    height: 600,
+      width: 900, height: 600,
-    resizable: true,
+    });
-    center: true,
+  } catch (err) { console.error("Detach window error:", err); }
-    url: `index.html#/detached-session?sessionId=${session.id}&name=${encodeURIComponent(session.name)}&protocol=${session.protocol}`,
-  });
 }
 
 function closeMenuTab(): void {

src/components/terminal/LocalTerminalView.vue

@@ -33,9 +33,9 @@ function applyTheme(): void {
     foreground: theme.foreground,
     cursor: theme.cursor,
     cursorAccent: theme.background,
-    selectionBackground: theme.selectionBackground ?? "rgba(88, 166, 255, 0.4)",
+    selectionBackground: theme.selectionBackground ?? "#264f78",
     selectionForeground: theme.selectionForeground ?? "#ffffff",
-    selectionInactiveBackground: theme.selectionBackground ?? "rgba(88, 166, 255, 0.2)",
+    selectionInactiveBackground: theme.selectionBackground ?? "#264f78",
     black: theme.black,
     red: theme.red,
     green: theme.green,

src/components/terminal/MonitorBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="stats"
-    class="flex items-center gap-4 px-3 h-6 bg-[var(--wraith-bg-tertiary)] border-t border-[var(--wraith-border)] text-[10px] font-mono shrink-0 select-none"
+    class="flex items-center gap-4 px-6 h-[48px] bg-[var(--wraith-bg-tertiary)] border-t border-[var(--wraith-border)] text-base font-mono shrink-0 select-none"
   >
     <!-- CPU -->
     <span class="flex items-center gap-1">

src/components/terminal/TerminalView.vue

@@ -77,6 +77,10 @@ const containerRef = ref<HTMLElement | null>(null);
 const { terminal, searchAddon, mount, fit } = useTerminal(props.sessionId);
 let resizeDisposable: IDisposable | null = null;
 
+function handleFocus(): void {
+  terminal.focus();
+}
+
 // --- Search state ---
 const searchVisible = ref(false);
 const searchQuery = ref("");
@@ -152,10 +156,6 @@ onMounted(() => {
   }, 50);
 });
 
-function handleFocus(): void {
-  terminal.focus();
-}
-
 // Re-fit and focus terminal when switching back to this tab.
 // Must wait for the container to have real dimensions after becoming visible.
 watch(
@@ -190,9 +190,9 @@ function applyTheme(): void {
     foreground: theme.foreground,
     cursor: theme.cursor,
     cursorAccent: theme.background,
-    selectionBackground: theme.selectionBackground ?? "rgba(88, 166, 255, 0.4)",
+    selectionBackground: theme.selectionBackground ?? "#264f78",
     selectionForeground: theme.selectionForeground ?? "#ffffff",
-    selectionInactiveBackground: theme.selectionBackground ?? "rgba(88, 166, 255, 0.2)",
+    selectionInactiveBackground: theme.selectionBackground ?? "#264f78",
     black: theme.black,
     red: theme.red,
     green: theme.green,

src/composables/useTerminal.ts

@@ -14,8 +14,9 @@ const defaultTheme = {
   foreground: "#e0e0e0",
   cursor: "#58a6ff",
   cursorAccent: "#0d1117",
-  selectionBackground: "rgba(88, 166, 255, 0.4)",
+  selectionBackground: "#264f78",
   selectionForeground: "#ffffff",
+  selectionInactiveBackground: "#264f78",
   black: "#0d1117",
   red: "#f85149",
   green: "#3fb950",

src/layouts/MainLayout.vue

@@ -367,16 +367,14 @@ function closeHelpMenuDeferred(): void {
 
 async function handleHelpAction(page: string): Promise<void> {
   showHelpMenu.value = false;
-  const { WebviewWindow } = await import("@tauri-apps/api/webviewWindow");
+  try {
-  const label = `help-${page}-${Date.now()}`;
+    await invoke("open_child_window", {
-  new WebviewWindow(label, {
+      label: `help-${page}-${Date.now()}`,
-    title: `Wraith — Help`,
+      title: "Wraith — Help",
-    width: 750,
+      url: `index.html#/tool/help?page=${page}`,
-    height: 600,
+      width: 750, height: 600,
-    resizable: true,
+    });
-    center: true,
+  } catch (err) { console.error("Help window error:", err); alert("Window error: " + String(err)); }
-    url: `index.html#/tool/help?page=${page}`,
-  });
 }
 
 async function handleToolAction(tool: string): Promise<void> {
@@ -390,8 +388,6 @@ async function handleToolAction(tool: string): Promise<void> {
     return;
   }
 
-  const { WebviewWindow } = await import("@tauri-apps/api/webviewWindow");
-
   const toolConfig: Record<string, { title: string; width: number; height: number }> = {
     "network-scanner": { title: "Network Scanner", width: 800, height: 600 },
     "port-scanner": { title: "Port Scanner", width: 700, height: 500 },
@@ -412,16 +408,14 @@ async function handleToolAction(tool: string): Promise<void> {
 
   const sessionId = activeSessionId.value || "";
 
-  // Open tool in a new Tauri window
+  try {
-  const label = `tool-${tool}-${Date.now()}`;
+    await invoke("open_child_window", {
-  new WebviewWindow(label, {
+      label: `tool-${tool}-${Date.now()}`,
-    title: `Wraith — ${config.title}`,
+      title: `Wraith — ${config.title}`,
-    width: config.width,
+      url: `index.html#/tool/${tool}?sessionId=${sessionId}`,
-    height: config.height,
+      width: config.width, height: config.height,
-    resizable: true,
+    });
-    center: true,
+  } catch (err) { console.error("Tool window error:", err); alert("Tool window error: " + String(err)); }
-    url: `index.html#/tool/${tool}?sessionId=${sessionId}`,
-  });
 }
 
 async function handleFileMenuAction(action: string): Promise<void> {
@@ -441,18 +435,13 @@ function handleThemeSelect(theme: ThemeDefinition): void {
 async function handleOpenFile(entry: FileEntry): Promise<void> {
   if (!activeSessionId.value) return;
   try {
-    const { WebviewWindow } = await import("@tauri-apps/api/webviewWindow");
     const fileName = entry.path.split("/").pop() || entry.path;
-    const label = `editor-${Date.now()}`;
     const sessionId = activeSessionId.value;
-
+    await invoke("open_child_window", {
-    new WebviewWindow(label, {
+      label: `editor-${Date.now()}`,
       title: `${fileName} — Wraith Editor`,
-      width: 800,
-      height: 600,
-      resizable: true,
-      center: true,
       url: `index.html#/tool/editor?sessionId=${sessionId}&path=${encodeURIComponent(entry.path)}`,
+      width: 800, height: 600,
     });
   } catch (err) { console.error("Failed to open editor:", err); }
 }
@@ -502,6 +491,19 @@ onMounted(async () => {
 
   await connectionStore.loadAll();
 
+  // Restore saved theme so every terminal opens with the user's preferred colors
+  try {
+    const savedThemeName = await invoke<string | null>("get_setting", { key: "active_theme" });
+    if (savedThemeName) {
+      const themes = await invoke<Array<{ name: string; foreground: string; background: string; cursor: string; black: string; red: string; green: string; yellow: string; blue: string; magenta: string; cyan: string; white: string; brightBlack: string; brightRed: string; brightGreen: string; brightYellow: string; brightBlue: string; brightMagenta: string; brightCyan: string; brightWhite: string }>>("list_themes");
+      const theme = themes?.find(t => t.name === savedThemeName);
+      if (theme) {
+        sessionStore.setTheme(theme);
+        statusBar.value?.setThemeName(theme.name);
+      }
+    }
+  } catch {}
+
   // Restore workspace — reconnect saved tabs (non-blocking, non-fatal)
   setTimeout(async () => {
     try {

vite.config.ts

@@ -1,10 +1,20 @@
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
 import { resolve } from "path";
 
+/** Strip crossorigin attribute from HTML — WKWebView + Tauri custom protocol compatibility. */
+function stripCrossOrigin(): Plugin {
+  return {
+    name: "strip-crossorigin",
+    transformIndexHtml(html) {
+      return html.replace(/ crossorigin/g, "");
+    },
+  };
+}
+
 export default defineConfig({
-  plugins: [vue(), tailwindcss()],
+  plugins: [vue(), tailwindcss(), stripCrossOrigin()],
   resolve: {
     alias: {
       "@": resolve(__dirname, "src"),
@@ -23,5 +33,9 @@ export default defineConfig({
     target: ["es2021", "chrome100", "safari13"],
     minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
     sourcemap: !!process.env.TAURI_DEBUG,
+    // Disable crossorigin attribute on script/link tags — WKWebView on
+    // macOS may reject CORS-mode requests for Tauri's custom tauri://
+    // protocol in dynamically created child WebviewWindows.
+    crossOriginLoading: false,
   },
 });