From fa9d21be8b47ce14b52ff677ed4b3fd235e29cc5 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Thu, 16 Jul 2026 20:25:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(native-window):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=A0=87=E7=AD=BE=E9=A1=B5=E6=8B=96=E5=87=BA=E4=B8=BA?=
 =?UTF-8?q?=E5=8E=9F=E7=94=9F=E7=8B=AC=E7=AB=8B=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 支持 SQL、数据和结果标签拖出到跨显示器原生窗口
- 通过受认证 loopback bridge 复用主进程后端与状态
- 支持子窗口继续拆窗、聚焦、关闭、还原与异常退出恢复
- 补充多窗口协议、状态同步和跨平台回归测试
---
 frontend/src/App.tsx                          |   2 +
 .../components/FloatingQueryResultWindows.tsx |   3 +-
 .../components/FloatingWorkbenchWindows.tsx   |   3 +-
 .../NativeDetachedWindowApp.test.tsx          | 156 ++++
 .../components/NativeDetachedWindowApp.tsx    | 508 ++++++++++++
 .../NativeDetachedWindowController.test.ts    | 398 +++++++++
 .../NativeDetachedWindowController.tsx        | 232 ++++++
 frontend/src/components/QueryEditor.tsx       |  40 +-
 .../components/QueryEditorResultsPanel.tsx    |  36 +-
 frontend/src/components/TabManager.tsx        |  54 +-
 frontend/src/main.tsx                         |   6 +-
 frontend/src/utils/detachedWindow.test.ts     |  33 +
 frontend/src/utils/detachedWindow.ts          |  36 +
 .../utils/nativeDetachedWindowClient.test.ts  | 236 ++++++
 .../src/utils/nativeDetachedWindowClient.ts   | 376 +++++++++
 .../utils/nativeDetachedWindowHost.test.ts    | 132 +++
 .../src/utils/nativeDetachedWindowHost.ts     | 238 ++++++
 .../utils/queryEditorResultSessionCache.ts    |  37 +-
 .../nativewindow/activation_policy_darwin.go  |  31 +
 .../nativewindow/activation_policy_other.go   |   5 +
 internal/nativewindow/bridge.go               | 395 +++++++++
 internal/nativewindow/child.go                | 193 +++++
 internal/nativewindow/manager.go              | 775 ++++++++++++++++++
 internal/nativewindow/manager_test.go         | 486 +++++++++++
 internal/nativewindow/process.go              |  59 ++
 internal/nativewindow/runtime_script.go       | 110 +++
 internal/nativewindow/runtime_script_test.go  |  37 +
 internal/nativewindow/types.go                | 125 +++
 internal/nativewindow/window_bounds_darwin.go |  66 ++
 internal/nativewindow/window_bounds_other.go  |  14 +
 internal/webserver/server.go                  | 148 +++-
 internal/webserver/server_test.go             |  65 ++
 main.go                                       |  34 +-
 33 files changed, 5036 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/components/NativeDetachedWindowApp.test.tsx
 create mode 100644 frontend/src/components/NativeDetachedWindowApp.tsx
 create mode 100644 frontend/src/components/NativeDetachedWindowController.test.ts
 create mode 100644 frontend/src/components/NativeDetachedWindowController.tsx
 create mode 100644 frontend/src/utils/nativeDetachedWindowClient.test.ts
 create mode 100644 frontend/src/utils/nativeDetachedWindowClient.ts
 create mode 100644 frontend/src/utils/nativeDetachedWindowHost.test.ts
 create mode 100644 frontend/src/utils/nativeDetachedWindowHost.ts
 create mode 100644 internal/nativewindow/activation_policy_darwin.go
 create mode 100644 internal/nativewindow/activation_policy_other.go
 create mode 100644 internal/nativewindow/bridge.go
 create mode 100644 internal/nativewindow/child.go
 create mode 100644 internal/nativewindow/manager.go
 create mode 100644 internal/nativewindow/manager_test.go
 create mode 100644 internal/nativewindow/process.go
 create mode 100644 internal/nativewindow/runtime_script.go
 create mode 100644 internal/nativewindow/runtime_script_test.go
 create mode 100644 internal/nativewindow/types.go
 create mode 100644 internal/nativewindow/window_bounds_darwin.go
 create mode 100644 internal/nativewindow/window_bounds_other.go

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 971cc3e4..3a54cb7f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -11,6 +11,7 @@ import TabManager from './components/TabManager';
 import FloatingWorkbenchWindows from './components/FloatingWorkbenchWindows';
 import FloatingAIChatWindow from './components/FloatingAIChatWindow';
 import FloatingQueryResultWindows from './components/FloatingQueryResultWindows';
+import NativeDetachedWindowController from './components/NativeDetachedWindowController';
 import ConnectionModal from './components/ConnectionModal';
 import SnippetSettingsModal from './components/SnippetSettingsModal';
 import ConnectionPackagePasswordModal from './components/ConnectionPackagePasswordModal';
@@ -7052,6 +7053,7 @@ function App() {
                   <TabManager />
                   <FloatingWorkbenchWindows />
                   <FloatingQueryResultWindows />
+                  <NativeDetachedWindowController />
                </div>
                {!isV2Ui && !aiPanelVisible && (
                <>
diff --git a/frontend/src/components/FloatingQueryResultWindows.tsx b/frontend/src/components/FloatingQueryResultWindows.tsx
index b95ae29b..dc120be2 100644
--- a/frontend/src/components/FloatingQueryResultWindows.tsx
+++ b/frontend/src/components/FloatingQueryResultWindows.tsx
@@ -4,6 +4,7 @@ import { CloseOutlined, CompressOutlined } from '@ant-design/icons';
 import { useStore } from '../store';
 import { t } from '../i18n';
 import DataGrid from './DataGrid';
+import { hasNativeDetachedWindowManager } from '../utils/nativeDetachedWindowHost';
 import {
   clamp,
   DEFAULT_DETACHED_WINDOW_MIN_HEIGHT,
@@ -119,7 +120,7 @@ const FloatingQueryResultWindows: React.FC = () => {
 
   const windows = useMemo(() => detachedQueryResultWindows, [detachedQueryResultWindows]);
 
-  if (windows.length === 0) {
+  if (hasNativeDetachedWindowManager() || windows.length === 0) {
     return null;
   }
 
diff --git a/frontend/src/components/FloatingWorkbenchWindows.tsx b/frontend/src/components/FloatingWorkbenchWindows.tsx
index 10defbe1..3e160133 100644
--- a/frontend/src/components/FloatingWorkbenchWindows.tsx
+++ b/frontend/src/components/FloatingWorkbenchWindows.tsx
@@ -15,6 +15,7 @@ import {
   resolveDetachedWindowTitle,
 } from '../utils/detachedWindow';
 import WorkbenchTabContent from './WorkbenchTabContent';
+import { hasNativeDetachedWindowManager } from '../utils/nativeDetachedWindowHost';
 
 const getTabKindLabel = (type: string): string => {
   if (type === 'query') return t('tab_manager.kind_badge.query');
@@ -175,7 +176,7 @@ const FloatingWorkbenchWindows: React.FC = () => {
     window.addEventListener('pointercancel', stop);
   }, [focusDetachedWorkbenchTab, updateDetachedWorkbenchBounds]);
 
-  if (windowModels.length === 0) {
+  if (hasNativeDetachedWindowManager() || windowModels.length === 0) {
     return null;
   }
 
diff --git a/frontend/src/components/NativeDetachedWindowApp.test.tsx b/frontend/src/components/NativeDetachedWindowApp.test.tsx
new file mode 100644
index 00000000..23efde36
--- /dev/null
+++ b/frontend/src/components/NativeDetachedWindowApp.test.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import TestRenderer, { act } from 'react-test-renderer';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { TabData } from '../types';
+import type { NativeDetachedWindowBootstrap } from '../utils/nativeDetachedWindowClient';
+
+const queryTab: TabData = {
+  id: 'query-native-1',
+  title: 'Detached query',
+  type: 'query',
+  connectionId: 'connection-1',
+  dbName: 'main',
+  query: 'select 1',
+};
+
+let storeState: Record<string, any>;
+const storeListeners = new Set<() => void>();
+
+vi.mock('../store', () => {
+  const useStore = Object.assign(
+    (selector: (state: Record<string, any>) => unknown) => selector(storeState),
+    {
+      getState: () => storeState,
+      setState: (nextState: Record<string, any> | ((state: Record<string, any>) => Record<string, any>)) => {
+        storeState = typeof nextState === 'function' ? nextState(storeState) : nextState;
+        storeListeners.forEach((listener) => listener());
+      },
+      subscribe: (listener: () => void) => {
+        storeListeners.add(listener);
+        return () => storeListeners.delete(listener);
+      },
+    },
+  );
+  return { useStore };
+});
+
+vi.mock('../i18n/provider', () => ({
+  useOptionalI18n: () => null,
+}));
+
+vi.mock('../i18n', () => ({
+  t: (key: string) => key,
+}));
+
+vi.mock('antd', () => ({
+  Button: ({ icon, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { icon?: React.ReactNode }) => (
+    <button {...props}>{icon}</button>
+  ),
+  ConfigProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  Spin: () => <span data-component="spin" />,
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  theme: {
+    darkAlgorithm: 'dark',
+    defaultAlgorithm: 'light',
+  },
+}));
+
+vi.mock('@ant-design/icons', () => ({
+  CloseOutlined: () => <span data-icon="close" />,
+  CompressOutlined: () => <span data-icon="attach" />,
+}));
+
+vi.mock('./WorkbenchTabContent', () => ({
+  default: ({ tab }: { tab: TabData }) => <div data-workbench-tab={tab.id} />,
+}));
+
+vi.mock('./DataGrid', () => ({
+  default: () => <div data-component="data-grid" />,
+}));
+
+import NativeDetachedWindowApp from './NativeDetachedWindowApp';
+
+const flushEffects = async () => {
+  await Promise.resolve();
+  await Promise.resolve();
+};
+
+describe('NativeDetachedWindowApp', () => {
+  beforeEach(() => {
+    storeListeners.clear();
+    storeState = {
+      tabs: [],
+      theme: 'light',
+      appearance: { uiVersion: 'v2' },
+      fontSize: 14,
+      updateQueryTabDraft: vi.fn(),
+    };
+  });
+
+  it('hydrates and attaches a workbench tab through the native action client', async () => {
+    const bootstrap: NativeDetachedWindowBootstrap = {
+      id: 'native-window-1',
+      kind: 'workbench',
+      title: queryTab.title,
+      payload: {
+        storeState: {
+          tabs: [queryTab],
+          theme: 'dark',
+          appearance: { uiVersion: 'v2' },
+          fontSize: 15,
+        },
+        tab: queryTab,
+        resultSession: {
+          resultSets: [],
+          activeResultKey: '',
+          isResultPanelVisible: true,
+        },
+      },
+    };
+    const client = {
+      load: vi.fn(async () => bootstrap),
+      ready: vi.fn(async () => undefined),
+      sync: vi.fn(async () => undefined),
+      attach: vi.fn(async () => undefined),
+      close: vi.fn(async () => undefined),
+      closeCurrentWindow: vi.fn(async () => undefined),
+    };
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      renderer = TestRenderer.create(<NativeDetachedWindowApp client={client} />);
+      await flushEffects();
+    });
+
+    expect(storeState.tabs).toEqual([queryTab]);
+    expect(storeState.theme).toBe('dark');
+    expect(typeof storeState.updateQueryTabDraft).toBe('function');
+    expect(client.ready).toHaveBeenCalledWith(expect.objectContaining({
+      id: bootstrap.id,
+      kind: 'workbench',
+    }));
+    expect(renderer!.root.findByProps({ 'data-workbench-tab': queryTab.id })).toBeTruthy();
+
+    const attachButton = renderer!.root.findByProps({
+      'aria-label': 'tab_manager.detached.restore',
+    });
+    await act(async () => {
+      attachButton.props.onClick();
+      await flushEffects();
+    });
+
+    expect(client.sync).toHaveBeenCalledWith(expect.objectContaining({
+      id: bootstrap.id,
+      kind: 'workbench',
+      tab: queryTab,
+    }));
+    expect(client.attach).toHaveBeenCalledWith(expect.objectContaining({
+      id: bootstrap.id,
+      kind: 'workbench',
+      tab: queryTab,
+    }));
+    expect(client.close).not.toHaveBeenCalled();
+    expect(client.closeCurrentWindow).toHaveBeenCalledOnce();
+  });
+});
diff --git a/frontend/src/components/NativeDetachedWindowApp.tsx b/frontend/src/components/NativeDetachedWindowApp.tsx
new file mode 100644
index 00000000..2e1fd5c3
--- /dev/null
+++ b/frontend/src/components/NativeDetachedWindowApp.tsx
@@ -0,0 +1,508 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, ConfigProvider, Spin, Tooltip, theme as antdTheme } from 'antd';
+import { CloseOutlined, CompressOutlined } from '@ant-design/icons';
+
+import { t as defaultTranslate } from '../i18n';
+import { getAntdLocale } from '../i18n/frameworkLocale';
+import { useOptionalI18n } from '../i18n/provider';
+import { type SqlLog, useStore } from '../store';
+import type { TabData } from '../types';
+import type { DetachedQueryResultWindow } from '../utils/detachedWindow';
+import {
+  attachNativeDetachedWindow,
+  buildNativeDetachedSyncStoreSnapshot,
+  closeCurrentNativeDetachedWindow,
+  closeNativeDetachedWindow,
+  fetchNativeDetachedWindowBootstrap,
+  hydrateNativeDetachedStore,
+  readyNativeDetachedWindow,
+  syncNativeDetachedWindow,
+  type NativeDetachedWindowActionPayload,
+  type NativeDetachedWindowBootstrap,
+} from '../utils/nativeDetachedWindowClient';
+import {
+  peekQueryEditorResultSession,
+  saveQueryEditorResultSession,
+  subscribeQueryEditorResultSession,
+  type QueryEditorResultSessionSnapshot,
+} from '../utils/queryEditorResultSessionCache';
+import DataGrid from './DataGrid';
+import WorkbenchTabContent from './WorkbenchTabContent';
+import NativeDetachedWindowController from './NativeDetachedWindowController';
+
+export const NATIVE_DETACHED_SYNC_DEBOUNCE_MS = 180;
+
+type NativeDetachedWindowClient = {
+  load: () => Promise<NativeDetachedWindowBootstrap>;
+  ready: (payload: NativeDetachedWindowActionPayload) => Promise<void>;
+  sync: (payload: NativeDetachedWindowActionPayload) => Promise<void>;
+  attach: (payload: NativeDetachedWindowActionPayload) => Promise<void>;
+  close: (payload: NativeDetachedWindowActionPayload) => Promise<void>;
+  closeCurrentWindow: () => Promise<void>;
+};
+
+const defaultClient: NativeDetachedWindowClient = {
+  load: fetchNativeDetachedWindowBootstrap,
+  ready: readyNativeDetachedWindow,
+  sync: syncNativeDetachedWindow,
+  attach: attachNativeDetachedWindow,
+  close: closeNativeDetachedWindow,
+  closeCurrentWindow: closeCurrentNativeDetachedWindow,
+};
+
+export interface NativeDetachedWindowAppProps {
+  client?: NativeDetachedWindowClient;
+}
+
+const isAffectedRowsResult = (columns: string[]): boolean =>
+  columns.length === 1 && columns[0] === 'affectedRows';
+
+const buildActionPayload = (
+  bootstrap: NativeDetachedWindowBootstrap,
+  tab?: TabData,
+  resultSession?: QueryEditorResultSessionSnapshot | null,
+  includeResultSession = false,
+  newSqlLogs: SqlLog[] = [],
+): NativeDetachedWindowActionPayload => {
+  const storeState = buildNativeDetachedSyncStoreSnapshot(
+    useStore.getState(),
+    bootstrap.kind === 'workbench' ? bootstrap.payload.tab?.id || '' : '',
+    newSqlLogs,
+  );
+  return {
+    id: bootstrap.id,
+    kind: bootstrap.kind,
+    ...(bootstrap.kind === 'workbench' || Object.keys(storeState).length > 0
+      ? { storeState }
+      : {}),
+    ...(tab ? { tab } : {}),
+    ...(bootstrap.kind === 'workbench' && includeResultSession
+      ? { resultSession: resultSession ?? null }
+      : {}),
+  };
+};
+
+const NativeDetachedQueryResult: React.FC<{
+  windowState: DetachedQueryResultWindow;
+}> = ({ windowState }) => {
+  const result = windowState.result;
+  const isMessage = result.resultType === 'message' || isAffectedRowsResult(result.columns || []);
+  const messageText = (result.messages || []).join('\n')
+    || (isAffectedRowsResult(result.columns || [])
+      ? String(result.rows?.[0]?.affectedRows ?? '')
+      : '');
+
+  if (isMessage) {
+    return (
+      <textarea
+        className="gn-native-detached-message"
+        readOnly
+        value={messageText}
+      />
+    );
+  }
+
+  return (
+    <DataGrid
+      data={result.rows || []}
+      columnNames={result.columns || []}
+      loading={false}
+      tableName={result.metadataTableName || result.tableName}
+      pkColumns={result.pkColumns || []}
+      editLocator={result.editLocator as any}
+      readOnly={result.readOnly !== false}
+      connectionId={windowState.connectionId}
+      dbName={result.metadataDbName || windowState.dbName || ''}
+      resultSql={result.exportSql || result.sql}
+      exportScope="queryResult"
+      showRowNumberColumn={result.showRowNumberColumn}
+      isActive
+    />
+  );
+};
+
+const NativeDetachedWindowContent: React.FC<{
+  bootstrap: NativeDetachedWindowBootstrap;
+}> = ({ bootstrap }) => {
+  const tabFromStore = useStore((state) => bootstrap.payload.tab
+    ? state.tabs.find((item) => item.id === bootstrap.payload.tab?.id)
+    : undefined);
+  const tab = tabFromStore || bootstrap.payload.tab;
+
+  if (bootstrap.kind === 'workbench') {
+    return tab ? <WorkbenchTabContent tab={tab} isActive /> : null;
+  }
+  return bootstrap.payload.resultWindow
+    ? <NativeDetachedQueryResult windowState={bootstrap.payload.resultWindow} />
+    : null;
+};
+
+const NativeDetachedWindowApp: React.FC<NativeDetachedWindowAppProps> = ({
+  client = defaultClient,
+}) => {
+  const i18n = useOptionalI18n();
+  const translate = i18n?.t ?? defaultTranslate;
+  const [bootstrap, setBootstrap] = useState<NativeDetachedWindowBootstrap | null>(null);
+  const [loadError, setLoadError] = useState('');
+  const [contentMounted, setContentMounted] = useState(true);
+  const [terminalAction, setTerminalAction] = useState<'attach' | 'close' | null>(null);
+  const terminalActionStartedRef = useRef(false);
+  const resultSessionRef = useRef<QueryEditorResultSessionSnapshot | null>(null);
+  const syncedSqlLogIdsRef = useRef<Set<string>>(new Set());
+  const syncTimerRef = useRef<number | null>(null);
+  const syncIncludesResultSessionRef = useRef(false);
+
+  const themeMode = useStore((state) => state.theme);
+  const uiVersion = useStore((state) => state.appearance.uiVersion);
+  const fontSize = useStore((state) => state.fontSize);
+  const uiScale = useStore((state) => state.uiScale);
+
+  useEffect(() => {
+    const persist = (useStore as any).persist;
+    if (typeof persist?.setOptions !== 'function') return;
+    persist.setOptions({
+      storage: {
+        getItem: () => null,
+        setItem: () => undefined,
+        removeItem: () => undefined,
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+    void client.load()
+      .then((nextBootstrap) => {
+        if (!active) return;
+        hydrateNativeDetachedStore(useStore, nextBootstrap.payload.storeState);
+        syncedSqlLogIdsRef.current = new Set(
+          (useStore.getState().sqlLogs || [])
+            .map((log) => String(log.id || '').trim())
+            .filter(Boolean),
+        );
+        if (nextBootstrap.kind === 'workbench' && nextBootstrap.payload.tab) {
+          resultSessionRef.current = nextBootstrap.payload.resultSession ?? null;
+          if (nextBootstrap.payload.resultSession) {
+            saveQueryEditorResultSession(
+              nextBootstrap.payload.tab.id,
+              nextBootstrap.payload.resultSession,
+            );
+          }
+        }
+        setBootstrap(nextBootstrap);
+      })
+      .catch((error) => {
+        if (!active) return;
+        setLoadError(error instanceof Error ? error.message : String(error));
+      });
+    return () => {
+      active = false;
+    };
+  }, [client]);
+
+  useEffect(() => {
+    if (!bootstrap || !contentMounted) return;
+    void client.ready({ id: bootstrap.id, kind: bootstrap.kind }).catch((error) => {
+      setLoadError(error instanceof Error ? error.message : String(error));
+    });
+  }, [bootstrap, client, contentMounted]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    document.body.setAttribute('data-theme', themeMode === 'dark' ? 'dark' : 'light');
+    document.body.setAttribute('data-ui-version', uiVersion);
+    document.body.style.color = themeMode === 'dark' ? '#ffffff' : '#111827';
+    document.body.style.fontSize = `${Math.max(10, Number(fontSize) || 14)}px`;
+    document.documentElement.style.colorScheme = themeMode === 'dark' ? 'dark' : 'light';
+  }, [fontSize, themeMode, uiVersion]);
+
+  const readCurrentTab = useCallback((): TabData | undefined => {
+    const bootstrapTab = bootstrap?.payload.tab;
+    if (!bootstrapTab) return undefined;
+    return useStore.getState().tabs.find((item) => item.id === bootstrapTab.id)
+      || bootstrapTab;
+  }, [bootstrap]);
+
+  const readUnsyncedSqlLogs = useCallback((): SqlLog[] => {
+    const syncedIds = syncedSqlLogIdsRef.current;
+    return (useStore.getState().sqlLogs || []).filter((log) => {
+      const id = String(log.id || '').trim();
+      return id !== '' && !syncedIds.has(id);
+    });
+  }, []);
+
+  const markSqlLogsSynced = useCallback((logs: SqlLog[]): void => {
+    for (const log of logs) {
+      const id = String(log.id || '').trim();
+      if (id) syncedSqlLogIdsRef.current.add(id);
+    }
+  }, []);
+
+  const scheduleSync = useCallback((includeResultSession = false) => {
+    if (!bootstrap || terminalAction) return;
+    syncIncludesResultSessionRef.current = syncIncludesResultSessionRef.current || includeResultSession;
+    if (syncTimerRef.current !== null) {
+      window.clearTimeout(syncTimerRef.current);
+    }
+    syncTimerRef.current = window.setTimeout(() => {
+      syncTimerRef.current = null;
+      const shouldIncludeResultSession = syncIncludesResultSessionRef.current;
+      syncIncludesResultSessionRef.current = false;
+      const newSqlLogs = readUnsyncedSqlLogs();
+      if (bootstrap.kind === 'query-result' && newSqlLogs.length === 0) return;
+      void client.sync(buildActionPayload(
+        bootstrap,
+        readCurrentTab(),
+        resultSessionRef.current,
+        shouldIncludeResultSession,
+        newSqlLogs,
+      )).then(() => {
+        markSqlLogsSynced(newSqlLogs);
+      }).catch((error) => {
+        console.warn('[Native Detached Window] Failed to sync tab state', error);
+      });
+    }, NATIVE_DETACHED_SYNC_DEBOUNCE_MS);
+  }, [bootstrap, client, markSqlLogsSynced, readCurrentTab, readUnsyncedSqlLogs, terminalAction]);
+
+  useEffect(() => {
+    if (!bootstrap) {
+      return undefined;
+    }
+    const unsubscribeStore = useStore.subscribe(() => scheduleSync(false));
+    const unsubscribeResultSession = bootstrap.kind === 'workbench' && bootstrap.payload.tab
+      ? subscribeQueryEditorResultSession(
+          bootstrap.payload.tab.id,
+          (snapshot) => {
+            // QueryEditor consumes the initial cache entry during mount. Keep
+            // the last non-null snapshot for the final attach action.
+            if (snapshot) {
+              resultSessionRef.current = snapshot;
+              scheduleSync(false);
+            }
+          },
+        )
+      : () => undefined;
+    return () => {
+      unsubscribeStore();
+      unsubscribeResultSession();
+      if (syncTimerRef.current !== null) {
+        window.clearTimeout(syncTimerRef.current);
+        syncTimerRef.current = null;
+      }
+    };
+  }, [bootstrap, scheduleSync]);
+
+  const requestTerminalAction = useCallback((action: 'attach' | 'close') => {
+    if (!bootstrap || terminalAction) return;
+    if (syncTimerRef.current !== null) {
+      window.clearTimeout(syncTimerRef.current);
+      syncTimerRef.current = null;
+    }
+    setContentMounted(false);
+    setTerminalAction(action);
+  }, [bootstrap, terminalAction]);
+
+  useEffect(() => {
+    if (!bootstrap || !terminalAction || contentMounted || terminalActionStartedRef.current) {
+      return;
+    }
+    terminalActionStartedRef.current = true;
+
+    // Workbench content has unmounted before this effect runs, so QueryEditor
+    // has published its final result session to the cache.
+    const currentSession = bootstrap.payload.tab
+      ? peekQueryEditorResultSession(bootstrap.payload.tab.id) || resultSessionRef.current
+      : null;
+    const payload = buildActionPayload(
+      bootstrap,
+      readCurrentTab(),
+      currentSession,
+      terminalAction === 'attach',
+      readUnsyncedSqlLogs(),
+    );
+    void (async () => {
+      try {
+        if (terminalAction === 'attach' && bootstrap.kind === 'workbench') {
+          try {
+            await client.sync(payload);
+          } catch (error) {
+            // The attach request carries the same final tab/session payload, so
+            // a failed best-effort sync must not prevent the user from restoring.
+            console.warn('[Native Detached Window] Final sync before attach failed', error);
+          }
+        }
+        if (terminalAction === 'attach') {
+          await client.attach(payload);
+        } else {
+          await client.close(payload);
+        }
+      } catch (error) {
+        console.error(`[Native Detached Window] Failed to ${terminalAction}`, error);
+        terminalActionStartedRef.current = false;
+        setTerminalAction(null);
+        setContentMounted(true);
+        return;
+      }
+      try {
+        await client.closeCurrentWindow();
+      } catch (error) {
+        console.error('[Native Detached Window] Failed to close native window', error);
+      }
+    })();
+  }, [bootstrap, client, contentMounted, readCurrentTab, readUnsyncedSqlLogs, terminalAction]);
+
+  const chromeLabels = useMemo(() => ({
+    attach: bootstrap?.kind === 'workbench'
+      ? translate('tab_manager.detached.restore')
+      : translate('query_editor.results_panel.detached.restore'),
+    close: bootstrap?.kind === 'workbench'
+      ? translate('tab_manager.detached.close')
+      : translate('query_editor.results_panel.detached.close'),
+  }), [bootstrap?.kind, translate]);
+
+  const isDark = themeMode === 'dark';
+  const componentSize = uiScale <= 0.92 ? 'small' : (uiScale >= 1.12 ? 'large' : 'middle');
+  return (
+    <ConfigProvider
+      locale={getAntdLocale(i18n?.language ?? 'en-US')}
+      componentSize={componentSize}
+      theme={{
+        algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+        token: {
+          fontSize: Math.max(10, Number(fontSize) || 14),
+          colorPrimary: uiVersion === 'v2'
+            ? (isDark ? '#22c55e' : '#16a34a')
+            : (isDark ? '#f6c453' : '#1677ff'),
+        },
+      }}
+    >
+      {bootstrap ? (
+        <NativeDetachedWindowController currentWindowId={bootstrap.id} />
+      ) : null}
+      <div
+        className="gn-native-detached-window"
+        data-kind={bootstrap?.kind || 'loading'}
+      >
+        <style>{`
+        .gn-native-detached-window {
+          width: 100%;
+          height: 100%;
+          min-width: 0;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          color: ${isDark ? '#f3f4f6' : '#111827'};
+          background: ${isDark ? 'var(--gn-bg-app, #0c0e12)' : 'var(--gn-bg-app, #f6f6f4)'};
+        }
+        .gn-native-detached-chrome {
+          flex: 0 0 36px;
+          min-width: 0;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          padding: 0 6px 0 12px;
+          border-bottom: 1px solid ${isDark ? 'rgba(255,255,255,0.10)' : 'rgba(15,23,42,0.10)'};
+          background: ${isDark ? 'var(--gn-bg-chrome, #14171c)' : 'var(--gn-bg-chrome, #ececea)'};
+          user-select: none;
+          --wails-draggable: drag;
+        }
+        .gn-native-detached-title {
+          min-width: 0;
+          flex: 1 1 auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
+          font-weight: 600;
+        }
+        .gn-native-detached-actions {
+          flex: 0 0 auto;
+          display: inline-flex;
+          gap: 2px;
+          --wails-draggable: no-drag;
+        }
+        .gn-native-detached-body {
+          flex: 1 1 auto;
+          min-width: 0;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          background: ${isDark ? 'var(--gn-bg-panel, #161a21)' : 'var(--gn-bg-panel, #ffffff)'};
+        }
+        .gn-native-detached-loading,
+        .gn-native-detached-error {
+          flex: 1 1 auto;
+          display: grid;
+          place-items: center;
+          min-width: 0;
+          min-height: 0;
+          padding: 24px;
+        }
+        .gn-native-detached-error {
+          color: ${isDark ? '#fca5a5' : '#b91c1c'};
+          overflow: auto;
+          white-space: pre-wrap;
+          overflow-wrap: anywhere;
+        }
+        .gn-native-detached-message {
+          flex: 1 1 auto;
+          width: 100%;
+          min-width: 0;
+          min-height: 0;
+          box-sizing: border-box;
+          margin: 0;
+          padding: 12px;
+          border: 0;
+          resize: none;
+          outline: none;
+          color: inherit;
+          background: transparent;
+          font-family: var(--gn-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+          font-size: 12px;
+          line-height: 1.5;
+        }
+        `}</style>
+        <div className="gn-native-detached-chrome">
+          <div className="gn-native-detached-title" title={bootstrap?.title || ''}>
+            {bootstrap?.title || ''}
+          </div>
+          <div className="gn-native-detached-actions">
+            <Tooltip title={chromeLabels.attach}>
+              <Button
+                type="text"
+                size="small"
+                icon={<CompressOutlined />}
+                aria-label={chromeLabels.attach}
+                disabled={!bootstrap || Boolean(terminalAction)}
+                onClick={() => requestTerminalAction('attach')}
+              />
+            </Tooltip>
+            <Tooltip title={chromeLabels.close}>
+              <Button
+                type="text"
+                size="small"
+                icon={<CloseOutlined />}
+                aria-label={chromeLabels.close}
+                disabled={!bootstrap || Boolean(terminalAction)}
+                onClick={() => requestTerminalAction('close')}
+              />
+            </Tooltip>
+          </div>
+        </div>
+        <div className="gn-native-detached-body">
+          {loadError ? (
+            <div className="gn-native-detached-error" role="alert">{loadError}</div>
+          ) : !bootstrap ? (
+            <div className="gn-native-detached-loading"><Spin /></div>
+          ) : contentMounted ? (
+            <NativeDetachedWindowContent bootstrap={bootstrap} />
+          ) : null}
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default NativeDetachedWindowApp;
diff --git a/frontend/src/components/NativeDetachedWindowController.test.ts b/frontend/src/components/NativeDetachedWindowController.test.ts
new file mode 100644
index 00000000..c00d6dfa
--- /dev/null
+++ b/frontend/src/components/NativeDetachedWindowController.test.ts
@@ -0,0 +1,398 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useStore } from '../store';
+import { peekQueryEditorResultSession } from '../utils/queryEditorResultSessionCache';
+import {
+  applyNativeDetachedWindowEvent,
+  type NativeDetachedWindowEvent,
+} from './NativeDetachedWindowController';
+
+const buildQueryTab = (id: string, query: string) => ({
+  id,
+  title: id,
+  type: 'query' as const,
+  connectionId: 'conn-1',
+  query,
+});
+
+describe('NativeDetachedWindowController', () => {
+  beforeEach(() => {
+    useStore.setState({
+      tabs: [buildQueryTab('query-a', 'select 1'), buildQueryTab('query-b', 'select 2')],
+      activeTabId: 'query-a',
+      detachedWorkbenchWindows: [
+        { tabId: 'query-a', x: 10, y: 10, width: 800, height: 600, zIndex: 1201 },
+        { tabId: 'query-b', x: 30, y: 30, width: 800, height: 600, zIndex: 1202 },
+      ],
+      detachedQueryResultWindows: [],
+      sqlLogs: [],
+    });
+  });
+
+  it('syncs only the detached tab and its live result session', () => {
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'sync',
+      payload: {
+        storeState: { sqlEditorPendingTransactions: { 'query-a': { transactionId: 'tx-1' } } },
+        tab: buildQueryTab('query-a', 'select 42'),
+        resultSession: {
+          activeResultKey: 'result-1',
+          resultSets: [{
+            key: 'result-1',
+            sql: 'select 42',
+            rows: [{ value: 42 }],
+            columns: ['value'],
+            pkColumns: [],
+            readOnly: true,
+          }],
+        },
+      },
+    });
+
+    expect(useStore.getState().tabs.find((tab) => tab.id === 'query-a')?.query).toBe('select 42');
+    expect(useStore.getState().tabs.find((tab) => tab.id === 'query-b')?.query).toBe('select 2');
+    expect((useStore.getState().sqlEditorPendingTransactions['query-a'] as any)?.transactionId).toBe('tx-1');
+    expect(peekQueryEditorResultSession('query-a')?.resultSets[0]?.rows).toEqual([{ value: 42 }]);
+  });
+
+  it('merges new child SQL logs by id without duplicating existing entries', () => {
+    useStore.getState().addSqlLog({
+      id: 'log-existing',
+      timestamp: 1,
+      sql: 'select 1',
+      status: 'success',
+      duration: 1,
+    });
+
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'sync',
+      payload: {
+        storeState: {
+          sqlLogs: [
+            {
+              id: 'log-new',
+              timestamp: 2,
+              sql: 'select 2',
+              status: 'success',
+              duration: 2,
+            },
+            {
+              id: 'log-existing',
+              timestamp: 1,
+              sql: 'select 1',
+              status: 'success',
+              duration: 1,
+            },
+          ],
+        },
+      },
+    });
+
+    expect(useStore.getState().sqlLogs.map((log) => log.id)).toEqual([
+      'log-new',
+      'log-existing',
+    ]);
+  });
+
+  it('merges audit logs produced by an editable detached result window', () => {
+    applyNativeDetachedWindowEvent({
+      id: 'query-result:query-a:r-edit',
+      kind: 'query-result',
+      action: 'sync',
+      payload: {
+        storeState: {
+          sqlLogs: [{
+            id: 'log-result-edit',
+            timestamp: 3,
+            sql: 'update users set name = ?',
+            status: 'success',
+            duration: 4,
+            affectedRows: 1,
+          }],
+        },
+      },
+    });
+
+    expect(useStore.getState().sqlLogs.map((log) => log.id)).toEqual(['log-result-edit']);
+  });
+
+  it('tracks a result window opened by its owning detached SQL window', () => {
+    const resultWindow = {
+      id: 'query-result:query-a:r-nested',
+      sourceQueryTabId: 'query-a',
+      connectionId: 'conn-1',
+      title: 'Nested result',
+      x: 2100,
+      y: -120,
+      width: 900,
+      height: 620,
+      zIndex: 1201,
+      result: {
+        key: 'r-nested',
+        sql: 'select 7',
+        rows: [{ value: 7 }],
+        columns: ['value'],
+        pkColumns: [],
+        readOnly: true,
+      },
+    };
+    const event: NativeDetachedWindowEvent = {
+      id: resultWindow.id,
+      kind: 'query-result',
+      action: 'opened',
+      payload: {
+        ownerWindowId: 'workbench:query-a',
+        resultWindow,
+      },
+    };
+
+    applyNativeDetachedWindowEvent(event);
+    expect(useStore.getState().detachedQueryResultWindows).toEqual([
+      expect.objectContaining({ id: resultWindow.id }),
+    ]);
+    useStore.setState({ detachedQueryResultWindows: [] });
+
+    applyNativeDetachedWindowEvent(event, resultWindow.id);
+    applyNativeDetachedWindowEvent(event, 'workbench:query-b');
+    expect(useStore.getState().detachedQueryResultWindows).toEqual([]);
+
+    applyNativeDetachedWindowEvent(event, 'workbench:query-a');
+    expect(useStore.getState().detachedQueryResultWindows).toEqual([
+      expect.objectContaining({ id: resultWindow.id }),
+    ]);
+  });
+
+  it('reattaches one tab without closing it or disturbing peer windows', () => {
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'attach',
+      payload: { tab: buildQueryTab('query-a', 'select 9') },
+    });
+
+    expect(useStore.getState().tabs.map((tab) => tab.id)).toEqual(['query-a', 'query-b']);
+    expect(useStore.getState().detachedWorkbenchWindows.map((item) => item.tabId)).toEqual(['query-b']);
+    expect(useStore.getState().activeTabId).toBe('query-a');
+  });
+
+  it('closes only the tab whose native window sent an explicit close action', () => {
+    const event: NativeDetachedWindowEvent = {
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'close',
+    };
+    applyNativeDetachedWindowEvent(event);
+
+    expect(useStore.getState().tabs.map((tab) => tab.id)).toEqual(['query-b']);
+    expect(useStore.getState().detachedWorkbenchWindows.map((item) => item.tabId)).toEqual(['query-b']);
+  });
+
+  it('reattaches a workbench tab when its child process exits unexpectedly', () => {
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'close',
+      payload: { reason: 'process-error', exited: true, error: 'exit status 9' },
+    });
+
+    expect(useStore.getState().tabs.map((tab) => tab.id)).toEqual(['query-a', 'query-b']);
+    expect(useStore.getState().detachedWorkbenchWindows.map((item) => item.tabId)).toEqual(['query-b']);
+    expect(useStore.getState().activeTabId).toBe('query-a');
+  });
+
+  it('restores instead of deleting when the process exit races a window-close action', () => {
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'close',
+      payload: { reason: 'window-closed', exited: true },
+    });
+
+    expect(useStore.getState().tabs.map((tab) => tab.id)).toEqual(['query-a', 'query-b']);
+    expect(useStore.getState().detachedWorkbenchWindows.map((item) => item.tabId)).toEqual(['query-b']);
+  });
+
+  it('ignores the child process exit that follows a successful reattach', () => {
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'attach',
+      payload: { tab: buildQueryTab('query-a', 'select 9') },
+    });
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'close',
+      payload: { reason: 'attached', exited: true },
+    });
+
+    expect(useStore.getState().tabs.map((tab) => tab.id)).toEqual(['query-a', 'query-b']);
+    expect(useStore.getState().detachedWorkbenchWindows.map((item) => item.tabId)).toEqual(['query-b']);
+  });
+
+  it('keeps a docked tab when a just-ready child exits before detach state commits', () => {
+    useStore.setState({
+      detachedWorkbenchWindows: useStore.getState().detachedWorkbenchWindows.filter(
+        (item) => item.tabId !== 'query-a',
+      ),
+    });
+    applyNativeDetachedWindowEvent({
+      id: 'workbench:query-a',
+      kind: 'workbench',
+      action: 'close',
+      payload: { reason: 'process-error', exited: true },
+    });
+
+    expect(useStore.getState().tabs.map((tab) => tab.id)).toEqual(['query-a', 'query-b']);
+  });
+
+  it('restores a result snapshot without closing its source query tab', () => {
+    useStore.setState({
+      detachedQueryResultWindows: [{
+        id: 'query-result:query-a:r1',
+        sourceQueryTabId: 'query-a',
+        connectionId: 'conn-1',
+        title: 'Result 1',
+        x: 10,
+        y: 10,
+        width: 800,
+        height: 600,
+        zIndex: 1201,
+        result: {
+          key: 'r1',
+          sql: 'select 42',
+          rows: [{ value: 42 }],
+          columns: ['value'],
+          pkColumns: [],
+          readOnly: true,
+        },
+      }],
+    });
+    const dispatchEvent = vi.fn();
+    const previousWindowDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    Object.defineProperty(globalThis, 'window', {
+      configurable: true,
+      value: { dispatchEvent },
+    });
+    try {
+      applyNativeDetachedWindowEvent({
+        id: 'query-result:query-a:r1',
+        kind: 'query-result',
+        action: 'attach',
+      });
+      expect(useStore.getState().detachedQueryResultWindows).toEqual([]);
+      expect(useStore.getState().tabs.map((tab) => tab.id)).toEqual(['query-a', 'query-b']);
+      expect(dispatchEvent).toHaveBeenCalledOnce();
+      expect(dispatchEvent.mock.calls[0][0].detail.result.rows).toEqual([{ value: 42 }]);
+    } finally {
+      if (previousWindowDescriptor) {
+        Object.defineProperty(globalThis, 'window', previousWindowDescriptor);
+      } else {
+        Reflect.deleteProperty(globalThis, 'window');
+      }
+    }
+  });
+
+  it('restores a detached result when its child process crashes', () => {
+    useStore.setState({
+      detachedQueryResultWindows: [{
+        id: 'query-result:query-a:r1',
+        sourceQueryTabId: 'query-a',
+        connectionId: 'conn-1',
+        title: 'Result 1',
+        x: 10,
+        y: 10,
+        width: 800,
+        height: 600,
+        zIndex: 1201,
+        result: {
+          key: 'r1',
+          sql: 'select 42',
+          rows: [{ value: 42 }],
+          columns: ['value'],
+          pkColumns: [],
+          readOnly: true,
+        },
+      }],
+    });
+    const dispatchEvent = vi.fn();
+    const previousWindowDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    Object.defineProperty(globalThis, 'window', {
+      configurable: true,
+      value: { dispatchEvent },
+    });
+    try {
+      applyNativeDetachedWindowEvent({
+        id: 'query-result:query-a:r1',
+        kind: 'query-result',
+        action: 'close',
+        payload: { reason: 'process-error', exited: true },
+      });
+
+      expect(useStore.getState().detachedQueryResultWindows).toEqual([]);
+      expect(dispatchEvent).toHaveBeenCalledOnce();
+      expect(dispatchEvent.mock.calls[0][0].detail.result.rows).toEqual([{ value: 42 }]);
+    } finally {
+      if (previousWindowDescriptor) {
+        Object.defineProperty(globalThis, 'window', previousWindowDescriptor);
+      } else {
+        Reflect.deleteProperty(globalThis, 'window');
+      }
+    }
+  });
+
+  it('routes result restoration to the detached SQL window that owns it', () => {
+    const resultWindow = {
+      id: 'query-result:query-a:r-owned',
+      sourceQueryTabId: 'query-a',
+      connectionId: 'conn-1',
+      title: 'Owned result',
+      x: 10,
+      y: 10,
+      width: 800,
+      height: 600,
+      zIndex: 1201,
+      result: {
+        key: 'r-owned',
+        sql: 'select 8',
+        rows: [{ value: 8 }],
+        columns: ['value'],
+        pkColumns: [],
+        readOnly: true,
+      },
+    };
+    useStore.setState({ detachedQueryResultWindows: [resultWindow] });
+    const dispatchEvent = vi.fn();
+    const previousWindowDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    Object.defineProperty(globalThis, 'window', {
+      configurable: true,
+      value: { dispatchEvent },
+    });
+    try {
+      const event: NativeDetachedWindowEvent = {
+        id: resultWindow.id,
+        kind: 'query-result',
+        action: 'attach',
+        payload: { ownerWindowId: 'workbench:query-a' },
+      };
+      applyNativeDetachedWindowEvent(event, 'workbench:query-b');
+      expect(dispatchEvent).not.toHaveBeenCalled();
+      expect(useStore.getState().detachedQueryResultWindows).toHaveLength(1);
+
+      applyNativeDetachedWindowEvent(event, 'workbench:query-a');
+      expect(dispatchEvent).toHaveBeenCalledOnce();
+      expect(dispatchEvent.mock.calls[0][0].detail.result.rows).toEqual([{ value: 8 }]);
+      expect(useStore.getState().detachedQueryResultWindows).toEqual([]);
+    } finally {
+      if (previousWindowDescriptor) {
+        Object.defineProperty(globalThis, 'window', previousWindowDescriptor);
+      } else {
+        Reflect.deleteProperty(globalThis, 'window');
+      }
+    }
+  });
+});
diff --git a/frontend/src/components/NativeDetachedWindowController.tsx b/frontend/src/components/NativeDetachedWindowController.tsx
new file mode 100644
index 00000000..fef5270b
--- /dev/null
+++ b/frontend/src/components/NativeDetachedWindowController.tsx
@@ -0,0 +1,232 @@
+import { useEffect } from 'react';
+
+import { EventsOn, WindowShow } from '../../wailsjs/runtime';
+import { type SqlLog, useStore } from '../store';
+import type { TabData } from '../types';
+import type { DetachedQueryResultWindow } from '../utils/detachedWindow';
+import {
+  closeNativeDetachedWindowById,
+  hasNativeDetachedWindowManager,
+} from '../utils/nativeDetachedWindowHost';
+import type { NativeDetachedWindowKind } from '../utils/nativeDetachedWindowClient';
+import {
+  saveQueryEditorResultSession,
+  type QueryEditorResultSessionSnapshot,
+} from '../utils/queryEditorResultSessionCache';
+
+export const NATIVE_DETACHED_WINDOW_EVENT = 'gonavi:native-detached-event';
+
+export type NativeDetachedWindowEvent = {
+  id: string;
+  kind: NativeDetachedWindowKind;
+  action: 'opened' | 'sync' | 'attach' | 'close';
+  payload?: {
+    tab?: TabData;
+    storeState?: Record<string, unknown>;
+    resultSession?: QueryEditorResultSessionSnapshot | null;
+    resultWindow?: DetachedQueryResultWindow;
+    ownerWindowId?: string;
+    [key: string]: unknown;
+  };
+};
+
+const replaceSyncedTab = (tab: TabData): void => {
+  useStore.setState((state) => {
+    if (!state.tabs.some((item) => item.id === tab.id)) return state;
+    return {
+      tabs: state.tabs.map((item) => item.id === tab.id ? { ...item, ...tab, id: item.id } : item),
+    };
+  });
+};
+
+const mergeSyncedSqlLogs = (snapshot: Record<string, unknown>): void => {
+  const incomingLogs = Array.isArray(snapshot.sqlLogs) ? snapshot.sqlLogs : [];
+  if (incomingLogs.length > 0) {
+    const existingIds = new Set(useStore.getState().sqlLogs.map((log) => log.id));
+    const newLogs = incomingLogs.filter((item): item is SqlLog => {
+      if (!item || typeof item !== 'object') return false;
+      const id = String((item as { id?: unknown }).id || '').trim();
+      if (!id || existingIds.has(id)) return false;
+      existingIds.add(id);
+      return true;
+    });
+    for (const log of [...newLogs].reverse()) {
+      useStore.getState().addSqlLog(log);
+    }
+  }
+};
+
+const mergeSyncedTabRuntimeState = (
+  tabId: string,
+  snapshot: Record<string, unknown>,
+): void => {
+  const pendingPatch = snapshot.sqlEditorPendingTransactions;
+  if (!pendingPatch || typeof pendingPatch !== 'object') return;
+  const value = (pendingPatch as Record<string, unknown>)[tabId];
+  useStore.setState((state) => {
+    const next = { ...state.sqlEditorPendingTransactions };
+    if (value === null || value === undefined) {
+      delete next[tabId];
+    } else {
+      next[tabId] = value as (typeof next)[string];
+    }
+    return { sqlEditorPendingTransactions: next };
+  });
+};
+
+const restoreQueryResult = (windowId: string): void => {
+  const restored = useStore.getState().attachQueryResultWindow(windowId);
+  if (!restored || typeof window === 'undefined') return;
+  window.dispatchEvent(new CustomEvent('gonavi:restore-query-result', {
+    detail: {
+      sourceQueryTabId: restored.sourceQueryTabId,
+      result: restored.result,
+    },
+  }));
+};
+
+const showMainWindow = (): void => {
+  if (typeof window !== 'undefined' && typeof (window as any).runtime?.WindowShow === 'function') {
+    void WindowShow();
+  }
+};
+
+export const applyNativeDetachedWindowEvent = (
+  event: NativeDetachedWindowEvent,
+  currentWindowId?: string,
+): void => {
+  const id = String(event?.id || '').trim();
+  if (!id || (event.kind !== 'workbench' && event.kind !== 'query-result')) return;
+
+  const localWindowId = String(currentWindowId || '').trim();
+  const ownerWindowId = String(event.payload?.ownerWindowId || '').trim();
+  if (localWindowId) {
+    if (event.kind === 'query-result') {
+      // Result lifecycle belongs to its source SQL window. The result window
+      // process itself receives the same broadcast but must not mutate a copy.
+      if (ownerWindowId !== localWindowId) return;
+    } else if (id !== localWindowId && ownerWindowId !== localWindowId) {
+      return;
+    }
+  }
+
+  if (event.action === 'opened') {
+    const resultWindow = event.payload?.resultWindow;
+    if (
+      event.kind === 'query-result'
+      && resultWindow
+      && typeof resultWindow === 'object'
+      && String(resultWindow.id || '').trim() === id
+    ) {
+      useStore.getState().detachQueryResultWindow(resultWindow);
+    }
+    return;
+  }
+
+  const tab = event.payload?.tab;
+  const eventTabId = tab?.id || id.replace(/^workbench:/, '');
+  if (event.payload?.storeState) {
+    mergeSyncedSqlLogs(event.payload.storeState);
+    if (event.kind === 'workbench') {
+      mergeSyncedTabRuntimeState(eventTabId, event.payload.storeState);
+    }
+  }
+  if (event.kind === 'workbench' && tab) {
+    replaceSyncedTab(tab);
+    if (tab.type === 'query' && event.payload?.resultSession) {
+      saveQueryEditorResultSession(tab.id, event.payload.resultSession);
+    }
+  }
+
+  if (event.action === 'sync') return;
+  if (event.action === 'attach') {
+    if (event.kind === 'workbench') {
+      const tabId = tab?.id || id.replace(/^workbench:/, '');
+      useStore.getState().attachWorkbenchTab(tabId);
+    } else {
+      restoreQueryResult(id);
+    }
+    showMainWindow();
+    return;
+  }
+
+  if (event.kind === 'workbench') {
+    const tabId = tab?.id || id.replace(/^workbench:/, '');
+    const reason = String(event.payload?.reason || '').trim();
+    const stillDetached = useStore.getState().detachedWorkbenchWindows.some(
+      (item) => item.tabId === tabId,
+    );
+    if (reason === 'attached' || reason === 'parent-shutdown' || reason === 'requested') {
+      return;
+    }
+    if (event.payload?.exited === true) {
+      if (stillDetached) {
+        useStore.getState().attachWorkbenchTab(tabId);
+        showMainWindow();
+      }
+      return;
+    }
+    if (useStore.getState().tabs.some((item) => item.id === tabId)) {
+      useStore.getState().closeTab(tabId);
+    }
+  } else {
+    const reason = String(event.payload?.reason || '').trim();
+    const stillDetached = useStore.getState().detachedQueryResultWindows.some(
+      (item) => item.id === id,
+    );
+    if (reason === 'attached' || reason === 'parent-shutdown' || reason === 'requested') {
+      return;
+    }
+    if (event.payload?.exited === true) {
+      if (stillDetached) {
+        restoreQueryResult(id);
+        showMainWindow();
+      }
+      return;
+    }
+    useStore.getState().closeDetachedQueryResultWindow(id);
+  }
+};
+
+const currentNativeWindowIds = (): Set<string> => {
+  const state = useStore.getState();
+  return new Set([
+    ...state.detachedWorkbenchWindows.map((item) => `workbench:${item.tabId}`),
+    ...state.detachedQueryResultWindows.map((item) => item.id),
+  ]);
+};
+
+export interface NativeDetachedWindowControllerProps {
+  currentWindowId?: string;
+}
+
+const NativeDetachedWindowController = ({
+  currentWindowId,
+}: NativeDetachedWindowControllerProps = {}): null => {
+  useEffect(() => {
+    if (!hasNativeDetachedWindowManager()) return undefined;
+
+    const off = EventsOn(NATIVE_DETACHED_WINDOW_EVENT, (payload: NativeDetachedWindowEvent) => {
+      applyNativeDetachedWindowEvent(payload, currentWindowId);
+    });
+    let previousIds = currentNativeWindowIds();
+    const unsubscribeStore = useStore.subscribe(() => {
+      const nextIds = currentNativeWindowIds();
+      for (const id of previousIds) {
+        if (!nextIds.has(id)) {
+          void closeNativeDetachedWindowById(id).catch(() => undefined);
+        }
+      }
+      previousIds = nextIds;
+    });
+
+    return () => {
+      off();
+      unsubscribeStore();
+    };
+  }, [currentWindowId]);
+
+  return null;
+};
+
+export default NativeDetachedWindowController;
diff --git a/frontend/src/components/QueryEditor.tsx b/frontend/src/components/QueryEditor.tsx
index 06853f36..96a9acf5 100644
--- a/frontend/src/components/QueryEditor.tsx
+++ b/frontend/src/components/QueryEditor.tsx
@@ -64,6 +64,8 @@ import {
     takeQueryEditorResultSession,
 } from '../utils/queryEditorResultSessionCache';
 import { buildEditableTriggerSql } from '../utils/triggerEditSql';
+import { openNativeQueryResultWindow } from '../utils/nativeDetachedWindowHost';
+import { isNativeDetachedWindow } from '../utils/nativeDetachedWindowClient';
 import {
     getColumnDefinitionComment,
     getColumnDefinitionKey,
@@ -1427,6 +1429,23 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
   );
   const isResultPanelVisibleRef = useRef(isResultPanelVisible);
   isResultPanelVisibleRef.current = isResultPanelVisible;
+  const publishesDetachedResultSession = useMemo(() => isNativeDetachedWindow(), []);
+
+  useEffect(() => {
+      const captureSession = (event: Event) => {
+          const requestedTabId = String((event as CustomEvent).detail?.tabId || '').trim();
+          if (requestedTabId !== tab.id) return;
+          saveQueryEditorResultSession(tab.id, {
+              resultSets: resultSetsRef.current,
+              activeResultKey: activeResultKeyRef.current,
+              isResultPanelVisible: isResultPanelVisibleRef.current,
+          });
+      };
+      window.addEventListener('gonavi:capture-query-result-session', captureSession);
+      return () => {
+          window.removeEventListener('gonavi:capture-query-result-session', captureSession);
+      };
+  }, [tab.id]);
 
   useEffect(() => {
       // Keep result panel state across detach/attach remounts of the same tab.
@@ -1438,6 +1457,15 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
           });
       };
   }, [tab.id]);
+
+  useEffect(() => {
+      if (!publishesDetachedResultSession) return;
+      saveQueryEditorResultSession(tab.id, {
+          resultSets,
+          activeResultKey,
+          isResultPanelVisible,
+      });
+  }, [activeResultKey, isResultPanelVisible, publishesDetachedResultSession, resultSets, tab.id]);
   const shortcutOptions = useStore(state => state.shortcutOptions);
   const activeShortcutPlatform = getShortcutPlatform(isMacLikePlatform());
   const runQueryShortcutBinding = useMemo(
@@ -8470,7 +8498,7 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
           ? translate('query_editor.results_panel.tab.message', { index: index + 1 })
           : translate('query_editor.results_panel.detached.title', { index: index + 1 });
       const windowId = `query-result:${tab.id}:${target.key}`;
-      useStore.getState().detachQueryResultWindow({
+      const detachedWindow = {
           id: windowId,
           sourceQueryTabId: tab.id,
           connectionId: currentConnectionId || tab.connectionId || '',
@@ -8500,8 +8528,14 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
               showRowNumberColumn: target.showRowNumberColumn,
               truncated: target.truncated,
           },
-      });
-      handleCloseResult(key);
+      };
+      void openNativeQueryResultWindow(detachedWindow)
+          .then((opened) => {
+              if (opened) handleCloseResult(key);
+          })
+          .catch((error) => {
+              message.error(error instanceof Error ? error.message : String(error));
+          });
   };
 
   React.useEffect(() => {
diff --git a/frontend/src/components/QueryEditorResultsPanel.tsx b/frontend/src/components/QueryEditorResultsPanel.tsx
index 54b156d6..3ff680fc 100644
--- a/frontend/src/components/QueryEditorResultsPanel.tsx
+++ b/frontend/src/components/QueryEditorResultsPanel.tsx
@@ -10,7 +10,8 @@ import { buildQueryResultColumnPinScope } from '../utils/queryResultColumnPinSco
 import { t as defaultTranslate } from '../i18n';
 import { useOptionalI18n } from '../i18n/provider';
 import {
-  resolveResultDetachPreferredBounds,
+  resolveNativeDetachPreferredBounds,
+  shouldDetachAtScreenPoint,
   shouldDetachTabByDrag,
   type DetachedWindowBounds,
 } from '../utils/detachedWindow';
@@ -123,6 +124,10 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
         title: string;
         startX: number;
         startY: number;
+        startScreenX: number;
+        startScreenY: number;
+        pointerId: number;
+        captureTarget: HTMLElement;
         active: boolean;
     } | null>(null);
 
@@ -148,8 +153,17 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
             title,
             startX: event.clientX,
             startY: event.clientY,
+            startScreenX: event.screenX,
+            startScreenY: event.screenY,
+            pointerId: event.pointerId,
+            captureTarget: event.currentTarget,
             active: false,
         };
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        } catch {
+            // Some embedded WebViews do not expose pointer capture for tab labels.
+        }
 
         const previousUserSelect = document.body.style.userSelect;
         const previousWebkitUserSelect = (document.body.style as CSSStyleDeclaration & { webkitUserSelect?: string }).webkitUserSelect || '';
@@ -180,6 +194,7 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
         };
 
         const clearListeners = () => {
+            const drag = resultTabDragRef.current;
             window.removeEventListener('pointermove', handleMove);
             window.removeEventListener('pointerup', handleUp);
             window.removeEventListener('pointercancel', handleUp);
@@ -190,6 +205,9 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
                 (document.body.style as CSSStyleDeclaration & { webkitUserSelect?: string }).webkitUserSelect = previousWebkitUserSelect;
                 document.documentElement.classList.remove('gn-result-tab-detaching');
             }
+            if (drag?.captureTarget.hasPointerCapture?.(drag.pointerId)) {
+                drag.captureTarget.releasePointerCapture(drag.pointerId);
+            }
             resultTabDragRef.current = null;
             setDraggingResultKey(null);
             setDetachDragPreview(null);
@@ -225,7 +243,19 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
                 return;
             }
             const dy = upEvent.clientY - drag.startY;
-            const shouldDetach = drag.active && shouldDetachTabByDrag(dy);
+            const releaseScreenX = Number.isFinite(upEvent.screenX)
+                ? upEvent.screenX
+                : drag.startScreenX + (upEvent.clientX - drag.startX);
+            const releaseScreenY = Number.isFinite(upEvent.screenY)
+                ? upEvent.screenY
+                : drag.startScreenY + (upEvent.clientY - drag.startY);
+            const releasedOutsideHost = shouldDetachAtScreenPoint(releaseScreenX, releaseScreenY, {
+                x: window.screenX,
+                y: window.screenY,
+                width: window.outerWidth || window.innerWidth,
+                height: window.outerHeight || window.innerHeight,
+            });
+            const shouldDetach = drag.active && (shouldDetachTabByDrag(dy) || releasedOutsideHost);
             if (drag.active) {
                 upEvent.preventDefault();
                 clearNativeSelection();
@@ -233,7 +263,7 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
             // 先清预览再打开真实窗口，避免叠两层
             clearListeners();
             if (shouldDetach) {
-                onOpenResultInWindow(key, resolveResultDetachPreferredBounds(upEvent.clientX, upEvent.clientY));
+                onOpenResultInWindow(key, resolveNativeDetachPreferredBounds(releaseScreenX, releaseScreenY));
             }
         };
 
diff --git a/frontend/src/components/TabManager.tsx b/frontend/src/components/TabManager.tsx
index e913f052..45f9a302 100644
--- a/frontend/src/components/TabManager.tsx
+++ b/frontend/src/components/TabManager.tsx
@@ -35,9 +35,12 @@ import DetachDragPreview, {
   type DetachDragPreviewState,
 } from './DetachDragPreview';
 import {
-  resolveResultDetachPreferredBounds,
+  resolveNativeDetachPreferredBounds,
+  resolveNativeDetachReleasePoint,
+  shouldDetachAtScreenPoint,
   shouldDetachTabByDrag,
 } from '../utils/detachedWindow';
+import { openNativeWorkbenchTabWindow } from '../utils/nativeDetachedWindowHost';
 
 const getTabKindLabel = (tab: TabData): string => {
   if (tab.type === 'query') return t('tab_manager.kind_badge.query');
@@ -503,12 +506,21 @@ const DraggableTabNode: React.FC<DraggableTabNodeProps> = ({ node }) => {
     touchAction: 'none',
     zIndex: isDragging ? 2 : node.props.style?.zIndex,
   };
+  const handlePointerDown = listeners?.onPointerDown as React.PointerEventHandler<HTMLElement> | undefined;
 
   return React.cloneElement(node, {
     ref: setNodeRef,
     style,
     ...attributes,
     ...listeners,
+    onPointerDown: (event: React.PointerEvent<HTMLElement>) => {
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch {
+        // Pointer capture is not exposed by every embedded WebView build.
+      }
+      handlePointerDown?.(event);
+    },
     className: `${node.props.className || ''} tab-dnd-node${isDragging ? ' is-dragging' : ''}`,
   });
 };
@@ -534,7 +546,6 @@ const TabManager: React.FC = React.memo(() => {
   const closeTabsToRight = useStore(state => state.closeTabsToRight);
   const closeAllTabs = useStore(state => state.closeAllTabs);
   const moveTab = useStore(state => state.moveTab);
-  const detachWorkbenchTab = useStore(state => state.detachWorkbenchTab);
   const setAIPanelVisible = useStore(state => state.setAIPanelVisible);
   const detachedTabIdSet = useMemo(
     () => new Set(detachedWorkbenchWindows.map((windowState) => windowState.tabId)),
@@ -553,6 +564,8 @@ const TabManager: React.FC = React.memo(() => {
     title: string;
     startX: number;
     startY: number;
+    startScreenX: number;
+    startScreenY: number;
   } | null>(null);
   const suppressClickUntilRef = useRef<number>(0);
   const sensors = useSensors(
@@ -563,6 +576,11 @@ const TabManager: React.FC = React.memo(() => {
   const isV2Ui = appearance.uiVersion === 'v2';
   const hasTabs = tabs.length > 0;
   const hasDockedTabs = dockedTabs.length > 0;
+  const detachTabToWindow = useCallback((tabId: string, preferred?: { x?: number; y?: number; width?: number; height?: number }) => {
+    void openNativeWorkbenchTabWindow(tabId, preferred).catch((error) => {
+      message.error(error instanceof Error ? error.message : String(error));
+    });
+  }, []);
   const dockedActiveTabId = useMemo(() => {
     if (activeTabId && dockedTabs.some((tab) => tab.id === activeTabId)) {
       return activeTabId;
@@ -739,8 +757,14 @@ const TabManager: React.FC = React.memo(() => {
     const pointerEvent = event.activatorEvent as PointerEvent | MouseEvent | undefined;
     const startX = typeof pointerEvent?.clientX === 'number' ? pointerEvent.clientX : 0;
     const startY = typeof pointerEvent?.clientY === 'number' ? pointerEvent.clientY : 0;
+    const startScreenX = typeof pointerEvent?.screenX === 'number'
+      ? pointerEvent.screenX
+      : window.screenX + startX;
+    const startScreenY = typeof pointerEvent?.screenY === 'number'
+      ? pointerEvent.screenY
+      : window.screenY + startY;
     detachDragSessionRef.current = sourceId
-      ? { tabId: sourceId, title, startX, startY }
+      ? { tabId: sourceId, title, startX, startY, startScreenX, startScreenY }
       : null;
     document.documentElement.classList.add('gn-workbench-tab-detaching');
   };
@@ -769,12 +793,22 @@ const TabManager: React.FC = React.memo(() => {
     if (!sourceId) {
       return;
     }
-    if (shouldDetachTabByDrag(deltaY, targetId || null)) {
+    const release = resolveNativeDetachReleasePoint({
+      startScreenX: session?.startScreenX ?? window.screenX,
+      startScreenY: session?.startScreenY ?? window.screenY,
+      deltaX,
+      deltaY,
+    });
+    const releasedOutsideHost = shouldDetachAtScreenPoint(release.screenX, release.screenY, {
+      x: window.screenX,
+      y: window.screenY,
+      width: window.outerWidth || window.innerWidth,
+      height: window.outerHeight || window.innerHeight,
+    });
+    if (shouldDetachTabByDrag(deltaY, targetId || null) || releasedOutsideHost) {
       suppressClickUntilRef.current = Date.now() + 120;
-      const releaseX = (session?.startX ?? 0) + deltaX;
-      const releaseY = (session?.startY ?? 0) + deltaY;
-      const preferred = resolveResultDetachPreferredBounds(releaseX, releaseY);
-      detachWorkbenchTab(sourceId, preferred);
+      const preferred = resolveNativeDetachPreferredBounds(release.screenX, release.screenY);
+      detachTabToWindow(sourceId, preferred);
       return;
     }
     if (!targetId || sourceId === targetId) {
@@ -874,7 +908,7 @@ const TabManager: React.FC = React.memo(() => {
       {
         key: 'open-in-window',
         label: t('tab_manager.menu.open_in_window'),
-        onClick: () => detachWorkbenchTab(tab.id),
+        onClick: () => detachTabToWindow(tab.id),
       },
       { type: 'divider' },
       {
@@ -921,7 +955,7 @@ const TabManager: React.FC = React.memo(() => {
       closable: !isV2Ui,
       children: <WorkbenchTabContent tab={tab} isActive={tabIsActive} />,
     };
-  }), [dockedTabs, dockedActiveTabId, tabs, connections, appearance.tabDisplay, closeOtherTabs, closeTabsToLeft, closeTabsToRight, closeAllTabs, closeTab, closeTabsWithSQLFilePrompt, detachWorkbenchTab, isV2Ui, languagePreference]);
+  }), [dockedTabs, dockedActiveTabId, tabs, connections, appearance.tabDisplay, closeOtherTabs, closeTabsToLeft, closeTabsToRight, closeAllTabs, closeTab, closeTabsWithSQLFilePrompt, detachTabToWindow, isV2Ui, languagePreference]);
 
   const queryCapableConnections = useMemo(
     () => connections.filter((connection) => getDataSourceCapabilities(connection.config).supportsQueryEditor),
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d8ba446f..48f2e9f4 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,6 +1,7 @@
 import React, { useSyncExternalStore } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import NativeDetachedWindowApp from './components/NativeDetachedWindowApp'
 // import './index.css' // Optional global styles
 
 import { setCurrentLanguage, t } from './i18n'
@@ -8,6 +9,7 @@ import { I18nProvider } from './i18n/provider'
 import { applyDayjsLocale } from './i18n/runtime'
 import { useStore } from './store'
 import { cloneBrowserMockValue, duplicateBrowserMockConnection, resolveBrowserMockSecretFlag } from './utils/browserMockConnections'
+import { isNativeDetachedWindow } from './utils/nativeDetachedWindowClient'
 
 const resolveDevHarnessMode = (): string => {
     if (typeof window === 'undefined') {
@@ -935,7 +937,9 @@ const Root = ({ rootComponent }: { rootComponent: React.ReactNode }) => {
 };
 
 const renderRoot = async () => {
-    let rootComponent: React.ReactNode = <App />;
+    let rootComponent: React.ReactNode = isNativeDetachedWindow()
+        ? <NativeDetachedWindowApp />
+        : <App />;
     if (devHarnessMode === 'datagrid-perf') {
         const { default: PerfDataGridHarness } = await import('./dev/PerfDataGridHarness');
         rootComponent = <PerfDataGridHarness />;
diff --git a/frontend/src/utils/detachedWindow.test.ts b/frontend/src/utils/detachedWindow.test.ts
index 14f7add1..4b6ed8a4 100644
--- a/frontend/src/utils/detachedWindow.test.ts
+++ b/frontend/src/utils/detachedWindow.test.ts
@@ -4,8 +4,11 @@ import {
   DETACH_TAB_DRAG_Y_THRESHOLD,
   nextDetachedZIndex,
   resolveDetachedWindowTitle,
+  resolveNativeDetachPreferredBounds,
+  resolveNativeDetachReleasePoint,
   resolveResultDetachPreferredBounds,
   shouldDetachTabByDrag,
+  shouldDetachAtScreenPoint,
   toAIChatDetachedBoundsMemory,
 } from './detachedWindow';
 
@@ -45,6 +48,36 @@ describe('detachedWindow helpers', () => {
     expect(resolveResultDetachPreferredBounds(10, 10)).toEqual({ x: 16, y: 16 });
   });
 
+  it('keeps virtual-desktop coordinates when detaching to another display', () => {
+    expect(resolveNativeDetachPreferredBounds(-1600, 120)).toEqual({ x: -1720, y: 96 });
+    expect(resolveNativeDetachPreferredBounds(2200, 120)).toEqual({ x: 2080, y: 96 });
+    expect(resolveNativeDetachPreferredBounds(600, -500)).toEqual({ x: 480, y: -524 });
+  });
+
+  it('resolves drag release in screen coordinates instead of WebView coordinates', () => {
+    expect(resolveNativeDetachReleasePoint({
+      startScreenX: 1320,
+      startScreenY: 80,
+      deltaX: 1100,
+      deltaY: 60,
+    })).toEqual({ screenX: 2420, screenY: 140 });
+    expect(resolveNativeDetachReleasePoint({
+      startScreenX: 40,
+      startScreenY: 80,
+      deltaX: -900,
+      deltaY: -300,
+    })).toEqual({ screenX: -860, screenY: -220 });
+  });
+
+  it('detaches when the pointer leaves the host window in any screen direction', () => {
+    const host = { x: 100, y: 80, width: 1200, height: 800 };
+    expect(shouldDetachAtScreenPoint(80, 300, host)).toBe(true);
+    expect(shouldDetachAtScreenPoint(1500, 300, host)).toBe(true);
+    expect(shouldDetachAtScreenPoint(500, 40, host)).toBe(true);
+    expect(shouldDetachAtScreenPoint(500, 1000, host)).toBe(true);
+    expect(shouldDetachAtScreenPoint(600, 300, host)).toBe(false);
+  });
+
   it('snapshots AI chat detached bounds for size memory', () => {
     expect(
       toAIChatDetachedBoundsMemory({
diff --git a/frontend/src/utils/detachedWindow.ts b/frontend/src/utils/detachedWindow.ts
index 08bdc79f..c4b5c63b 100644
--- a/frontend/src/utils/detachedWindow.ts
+++ b/frontend/src/utils/detachedWindow.ts
@@ -155,6 +155,42 @@ export const resolveResultDetachPreferredBounds = (
   y: Math.max(DETACHED_WINDOW_VIEWPORT_PADDING, Math.round(clientY - 24)),
 });
 
+export const resolveNativeDetachReleasePoint = (input: {
+  startScreenX: number;
+  startScreenY: number;
+  deltaX: number;
+  deltaY: number;
+}): { screenX: number; screenY: number } => ({
+  screenX: Math.round(Number(input.startScreenX) + Number(input.deltaX)),
+  screenY: Math.round(Number(input.startScreenY) + Number(input.deltaY)),
+});
+
+/** Native windows use virtual-desktop coordinates, which may be negative. */
+export const resolveNativeDetachPreferredBounds = (
+  screenX: number,
+  screenY: number,
+): Partial<Pick<DetachedWindowBounds, 'x' | 'y'>> => ({
+  x: Math.round(Number(screenX) - 120),
+  y: Math.round(Number(screenY) - 24),
+});
+
+export const shouldDetachAtScreenPoint = (
+  screenX: number,
+  screenY: number,
+  hostBounds: { x: number; y: number; width: number; height: number },
+): boolean => {
+  const x = Number(screenX);
+  const y = Number(screenY);
+  const left = Number(hostBounds.x);
+  const top = Number(hostBounds.y);
+  const width = Number(hostBounds.width);
+  const height = Number(hostBounds.height);
+  if (![x, y, left, top, width, height].every(Number.isFinite) || width <= 0 || height <= 0) {
+    return false;
+  }
+  return x < left || x > left + width || y < top || y > top + height;
+};
+
 export const resolveDetachedWindowTitle = (params: {
   kindLabel: string;
   objectLabel?: string;
diff --git a/frontend/src/utils/nativeDetachedWindowClient.test.ts b/frontend/src/utils/nativeDetachedWindowClient.test.ts
new file mode 100644
index 00000000..1431ed3d
--- /dev/null
+++ b/frontend/src/utils/nativeDetachedWindowClient.test.ts
@@ -0,0 +1,236 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import type { TabData } from '../types';
+import type { DetachedQueryResultWindow } from './detachedWindow';
+import {
+  attachNativeDetachedWindow,
+  buildNativeDetachedQueryResultPayload,
+  buildNativeDetachedStoreSnapshot,
+  buildNativeDetachedSyncStoreSnapshot,
+  buildNativeDetachedWorkbenchPayload,
+  hydrateNativeDetachedStore,
+  isNativeDetachedWindow,
+} from './nativeDetachedWindowClient';
+
+const queryTab: TabData = {
+  id: 'query-1',
+  title: 'Query 1',
+  type: 'query',
+  connectionId: 'connection-1',
+  dbName: 'main',
+  query: 'select 1',
+};
+
+describe('nativeDetachedWindowClient', () => {
+  it('builds a workbench payload without Zustand actions or nested functions', () => {
+    const state = {
+      tabs: [queryTab],
+      theme: 'dark',
+      updateQueryTabDraft: () => undefined,
+      nested: {
+        value: 42,
+        callback: () => undefined,
+      },
+      sqlLogs: [{ id: 'log-1', sql: 'select 1' }],
+    };
+
+    const payload = buildNativeDetachedWorkbenchPayload(state, queryTab, {
+      resultSets: [],
+      activeResultKey: '',
+      isResultPanelVisible: true,
+    });
+
+    expect(payload.tab).toEqual(queryTab);
+    expect(payload.storeState).toEqual({
+      tabs: [queryTab],
+      activeTabId: queryTab.id,
+      detachedWorkbenchWindows: [],
+      detachedQueryResultWindows: [],
+      detachedAIChatWindow: null,
+      theme: 'dark',
+      nested: { value: 42 },
+      sqlLogs: [{ id: 'log-1', sql: 'select 1' }],
+      sqlEditorPendingTransactions: {},
+    });
+    expect(JSON.stringify(payload)).not.toContain('updateQueryTabDraft');
+    expect(JSON.stringify(payload)).not.toContain('callback');
+  });
+
+  it('skips heavyweight runtime state before recursively cloning a workbench snapshot', () => {
+    const state: Record<string, unknown> = {
+      tabs: [queryTab],
+      theme: 'dark',
+    };
+    for (const key of ['aiChatHistory', 'aiContexts', 'jvmDiagnosticOutputs']) {
+      Object.defineProperty(state, key, {
+        enumerable: true,
+        get: () => {
+          throw new Error(`${key} should not be read`);
+        },
+      });
+    }
+
+    const payload = buildNativeDetachedWorkbenchPayload(state, queryTab);
+
+    expect(payload.storeState.theme).toBe('dark');
+    expect(payload.storeState).not.toHaveProperty('aiChatHistory');
+    expect(payload.storeState).not.toHaveProperty('aiContexts');
+    expect(payload.storeState).not.toHaveProperty('jvmDiagnosticOutputs');
+  });
+
+  it('hydrates snapshot data while retaining the current store actions', () => {
+    const currentAction = vi.fn();
+    let currentState = {
+      theme: 'light',
+      tabs: [] as TabData[],
+      updateQueryTabDraft: currentAction,
+    };
+    const store = {
+      getState: () => currentState,
+      setState: (nextState: typeof currentState) => {
+        currentState = nextState;
+      },
+    };
+
+    hydrateNativeDetachedStore(store, {
+      theme: 'dark',
+      tabs: [queryTab],
+      updateQueryTabDraft: 'remote action must not replace the local function',
+      unknownKey: 'ignored',
+    });
+
+    expect(currentState.theme).toBe('dark');
+    expect(currentState.tabs).toEqual([queryTab]);
+    expect(currentState.updateQueryTabDraft).toBe(currentAction);
+    expect(currentState).not.toHaveProperty('unknownKey');
+  });
+
+  it('syncs editor preferences and transaction state without resending all tabs', () => {
+    expect(buildNativeDetachedSyncStoreSnapshot({
+      tabs: [queryTab],
+      queryOptions: { showQueryResultsPanel: true },
+      sqlEditorPendingTransactions: { [queryTab.id]: { transactionId: 'tx-1' } },
+      sqlLogs: [{ sql: 'select 1' }],
+      closeTab: () => undefined,
+    }, queryTab.id)).toEqual({
+      sqlEditorPendingTransactions: { [queryTab.id]: { transactionId: 'tx-1' } },
+    });
+
+    expect(buildNativeDetachedSyncStoreSnapshot({
+      sqlEditorPendingTransactions: {},
+    }, queryTab.id, [{ id: 'log-new', sql: 'select 2' }])).toEqual({
+      sqlEditorPendingTransactions: { [queryTab.id]: null },
+      sqlLogs: [{ id: 'log-new', sql: 'select 2' }],
+    });
+  });
+
+  it('builds an isolated JSON-safe query result snapshot', () => {
+    const resultWindow: DetachedQueryResultWindow = {
+      id: 'result-1',
+      sourceQueryTabId: queryTab.id,
+      connectionId: queryTab.connectionId,
+      dbName: queryTab.dbName,
+      title: 'Result 1',
+      x: -1200,
+      y: 100,
+      width: 900,
+      height: 620,
+      zIndex: 1201,
+      result: {
+        key: 'result-set-1',
+        sql: 'select 1 as value',
+        rows: [{ value: 1, ignored: () => undefined }],
+        columns: ['value'],
+        pkColumns: [],
+        readOnly: true,
+      },
+    };
+
+    const payload = buildNativeDetachedQueryResultPayload(
+      { tabs: [queryTab], closeTab: () => undefined },
+      resultWindow,
+    );
+
+    expect(payload.resultWindow?.x).toBe(-1200);
+    expect(payload.resultWindow?.result.rows).toEqual([{ value: 1 }]);
+    expect(payload.resultWindow?.result).not.toBe(resultWindow.result);
+    expect(payload.storeState).toEqual({
+      tabs: [],
+      activeTabId: null,
+      detachedWorkbenchWindows: [],
+      detachedQueryResultWindows: [],
+      detachedAIChatWindow: null,
+      sqlLogs: [],
+      sqlEditorPendingTransactions: {},
+    });
+  });
+
+  it('posts attach actions with the detached window identity', async () => {
+    const fetchMock = vi.fn(async (_input: RequestInfo | URL, _init?: RequestInit) => (
+      new Response(null, { status: 204 })
+    ));
+
+    await attachNativeDetachedWindow(
+      { id: 'window-1', kind: 'workbench', tab: queryTab },
+      fetchMock as typeof fetch,
+    );
+
+    expect(fetchMock).toHaveBeenCalledOnce();
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toBe('/__gonavi/detached/action');
+    expect(init?.method).toBe('POST');
+    expect(JSON.parse(String(init?.body))).toEqual({
+      action: 'attach',
+      payload: { id: 'window-1', kind: 'workbench', tab: queryTab },
+    });
+  });
+
+  it('uses the child Go bridge for terminal actions so attach is not followed by close', async () => {
+    const action = vi.fn(async () => ({ success: true }));
+    const previousWindowDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    Object.defineProperty(globalThis, 'window', {
+      configurable: true,
+      value: { __GONAVI_DETACHED__: { action } },
+    });
+    try {
+      await attachNativeDetachedWindow({ id: 'window-1', kind: 'workbench', tab: queryTab });
+      expect(action).toHaveBeenCalledWith('attach', {
+        id: 'window-1',
+        kind: 'workbench',
+        tab: queryTab,
+      });
+    } finally {
+      if (previousWindowDescriptor) {
+        Object.defineProperty(globalThis, 'window', previousWindowDescriptor);
+      } else {
+        Reflect.deleteProperty(globalThis, 'window');
+      }
+    }
+  });
+
+  it('detects injected flags and the detached query parameter', () => {
+    expect(isNativeDetachedWindow({ pathname: '/', search: '?__gonavi_detached=window-1' })).toBe(true);
+    expect(isNativeDetachedWindow({ pathname: '/', search: '' })).toBe(false);
+
+    const previousWindowDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    Object.defineProperty(globalThis, 'window', {
+      configurable: true,
+      value: { __GONAVI_NATIVE_DETACHED__: true },
+    });
+    try {
+      expect(isNativeDetachedWindow({ pathname: '/', search: '' })).toBe(true);
+    } finally {
+      if (previousWindowDescriptor) {
+        Object.defineProperty(globalThis, 'window', previousWindowDescriptor);
+      } else {
+        Reflect.deleteProperty(globalThis, 'window');
+      }
+    }
+  });
+
+  it('omits circular values instead of breaking bootstrap serialization', () => {
+    const state: Record<string, unknown> = { theme: 'dark' };
+    state.self = state;
+    expect(buildNativeDetachedStoreSnapshot(state)).toEqual({ theme: 'dark' });
+  });
+});
diff --git a/frontend/src/utils/nativeDetachedWindowClient.ts b/frontend/src/utils/nativeDetachedWindowClient.ts
new file mode 100644
index 00000000..ddc91aab
--- /dev/null
+++ b/frontend/src/utils/nativeDetachedWindowClient.ts
@@ -0,0 +1,376 @@
+import type { TabData } from '../types';
+import type {
+  DetachedQueryResultWindow,
+  DetachedQueryResultSnapshot,
+} from './detachedWindow';
+import type { QueryEditorResultSessionSnapshot } from './queryEditorResultSessionCache';
+
+export const NATIVE_DETACHED_BOOTSTRAP_URL = '/__gonavi/detached/bootstrap';
+export const NATIVE_DETACHED_ACTION_URL = '/__gonavi/detached/action';
+export const NATIVE_DETACHED_WINDOW_QUERY_PARAM = '__gonavi_detached';
+
+export type NativeDetachedWindowKind = 'workbench' | 'query-result';
+export type NativeDetachedWindowAction = 'ready' | 'sync' | 'attach' | 'close';
+export type NativeDetachedStoreSnapshot = Record<string, unknown>;
+
+export interface NativeDetachedWindowPayload {
+  storeState: NativeDetachedStoreSnapshot;
+  tab?: TabData;
+  resultWindow?: DetachedQueryResultWindow;
+  resultSession?: QueryEditorResultSessionSnapshot | null;
+}
+
+export interface NativeDetachedWindowBootstrap {
+  id: string;
+  kind: NativeDetachedWindowKind;
+  title: string;
+  payload: NativeDetachedWindowPayload;
+}
+
+export interface NativeDetachedWindowActionPayload {
+  id: string;
+  kind: NativeDetachedWindowKind;
+  storeState?: NativeDetachedStoreSnapshot;
+  tab?: TabData;
+  resultSession?: QueryEditorResultSessionSnapshot | null;
+}
+
+export const buildNativeDetachedSyncStoreSnapshot = (
+  state: object,
+  tabId: string,
+  newSqlLogs: unknown[] = [],
+): NativeDetachedStoreSnapshot => {
+  const record = state as Record<string, unknown>;
+  const pending = record.sqlEditorPendingTransactions;
+  const pendingRecord = pending && typeof pending === 'object'
+    ? pending as Record<string, unknown>
+    : {};
+  return buildNativeDetachedStoreSnapshot({
+    ...(tabId
+      ? {
+          sqlEditorPendingTransactions: {
+            [tabId]: Object.prototype.hasOwnProperty.call(pendingRecord, tabId)
+              ? pendingRecord[tabId]
+              : null,
+          },
+        }
+      : {}),
+    ...(newSqlLogs.length > 0 ? { sqlLogs: newSqlLogs } : {}),
+  });
+};
+
+export interface NativeDetachedWindowActionRequest {
+  action: NativeDetachedWindowAction;
+  payload: NativeDetachedWindowActionPayload;
+}
+
+type FetchLike = typeof fetch;
+
+type StoreApiLike<TState extends object> = {
+  getState: () => TState;
+  setState: (nextState: TState, replace?: boolean) => void;
+};
+
+const OMIT_VALUE = Symbol('gonavi.native-detached.omit');
+const UNSAFE_OBJECT_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+const WORKBENCH_BOOTSTRAP_OMITTED_KEYS = new Set([
+  'aiChatHistory',
+  'aiChatSessions',
+  'aiContexts',
+  'jvmDiagnosticOutputs',
+  'tabs',
+  'detachedWorkbenchWindows',
+  'detachedQueryResultWindows',
+  'detachedAIChatWindow',
+  'sqlEditorPendingTransactions',
+]);
+const QUERY_RESULT_BOOTSTRAP_OMITTED_KEYS = new Set([
+  ...WORKBENCH_BOOTSTRAP_OMITTED_KEYS,
+  'sqlLogs',
+]);
+
+const cloneSerializableValue = (
+  value: unknown,
+  ancestors: WeakSet<object>,
+): unknown | typeof OMIT_VALUE => {
+  if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
+    return OMIT_VALUE;
+  }
+  if (value === null || typeof value === 'string' || typeof value === 'boolean') {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : null;
+  }
+  if (typeof value === 'bigint') {
+    return String(value);
+  }
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (typeof value !== 'object') {
+    return OMIT_VALUE;
+  }
+  if (ancestors.has(value)) {
+    return OMIT_VALUE;
+  }
+
+  ancestors.add(value);
+  try {
+    if (Array.isArray(value)) {
+      const result: unknown[] = [];
+      for (const item of value) {
+        const cloned = cloneSerializableValue(item, ancestors);
+        if (cloned !== OMIT_VALUE) {
+          result.push(cloned);
+        }
+      }
+      return result;
+    }
+
+    const result: Record<string, unknown> = {};
+    for (const [key, item] of Object.entries(value)) {
+      if (UNSAFE_OBJECT_KEYS.has(key)) continue;
+      const cloned = cloneSerializableValue(item, ancestors);
+      if (cloned !== OMIT_VALUE) {
+        result[key] = cloned;
+      }
+    }
+    return result;
+  } finally {
+    ancestors.delete(value);
+  }
+};
+
+/** Build the JSON-safe, data-only part of a Zustand state object. */
+export const buildNativeDetachedStoreSnapshot = (
+  state: object,
+): NativeDetachedStoreSnapshot => {
+  const cloned = cloneSerializableValue(state, new WeakSet());
+  return cloned && cloned !== OMIT_VALUE && !Array.isArray(cloned)
+    ? cloned as NativeDetachedStoreSnapshot
+    : {};
+};
+
+const buildFilteredStoreSnapshot = (
+  state: object,
+  omittedKeys: ReadonlySet<string>,
+): NativeDetachedStoreSnapshot => {
+  const source = state as Record<string, unknown>;
+  const filtered: Record<string, unknown> = {};
+  for (const key of Object.keys(source)) {
+    if (omittedKeys.has(key)) continue;
+    filtered[key] = source[key];
+  }
+  return buildNativeDetachedStoreSnapshot(filtered);
+};
+
+export const buildNativeDetachedWorkbenchPayload = (
+  state: object,
+  tab: TabData,
+  resultSession?: QueryEditorResultSessionSnapshot | null,
+): NativeDetachedWindowPayload => {
+  const storeState = buildFilteredStoreSnapshot(state, WORKBENCH_BOOTSTRAP_OMITTED_KEYS);
+  const source = state as Record<string, unknown>;
+  const allPending = source.sqlEditorPendingTransactions;
+  const pendingRecord = allPending && typeof allPending === 'object'
+    ? allPending as Record<string, unknown>
+    : {};
+  storeState.tabs = [tab];
+  storeState.activeTabId = tab.id;
+  storeState.detachedWorkbenchWindows = [];
+  storeState.detachedQueryResultWindows = [];
+  storeState.detachedAIChatWindow = null;
+  storeState.sqlEditorPendingTransactions = buildNativeDetachedStoreSnapshot(
+    Object.prototype.hasOwnProperty.call(pendingRecord, tab.id)
+      ? { [tab.id]: pendingRecord[tab.id] }
+      : {},
+  );
+  return {
+    storeState,
+    tab,
+    resultSession: resultSession ?? null,
+  };
+};
+
+export const buildNativeDetachedQueryResultPayload = (
+  state: object,
+  resultWindow: DetachedQueryResultWindow,
+): NativeDetachedWindowPayload => {
+  const storeState = buildFilteredStoreSnapshot(state, QUERY_RESULT_BOOTSTRAP_OMITTED_KEYS);
+  storeState.tabs = [];
+  storeState.activeTabId = null;
+  storeState.detachedWorkbenchWindows = [];
+  storeState.detachedQueryResultWindows = [];
+  storeState.detachedAIChatWindow = null;
+  storeState.sqlLogs = [];
+  storeState.sqlEditorPendingTransactions = {};
+  return {
+    storeState,
+    resultWindow: {
+      ...resultWindow,
+      result: buildNativeDetachedQueryResultSnapshot(resultWindow.result),
+    },
+  };
+};
+
+export const buildNativeDetachedQueryResultSnapshot = (
+  result: DetachedQueryResultSnapshot,
+): DetachedQueryResultSnapshot => {
+  const cloned = cloneSerializableValue(result, new WeakSet());
+  return cloned && cloned !== OMIT_VALUE && !Array.isArray(cloned)
+    ? cloned as DetachedQueryResultSnapshot
+    : {
+        key: '',
+        sql: '',
+        rows: [],
+        columns: [],
+        pkColumns: [],
+        readOnly: true,
+      };
+};
+
+/** Merge bootstrap state without replacing any action currently installed by Zustand. */
+export const mergeNativeDetachedStoreState = <TState extends object>(
+  currentState: TState,
+  snapshot: NativeDetachedStoreSnapshot,
+): TState => {
+  const nextState = { ...currentState } as Record<string, unknown>;
+  const currentRecord = currentState as Record<string, unknown>;
+  const safeSnapshot = buildNativeDetachedStoreSnapshot(snapshot);
+
+  for (const [key, value] of Object.entries(safeSnapshot)) {
+    if (UNSAFE_OBJECT_KEYS.has(key)) continue;
+    if (!Object.prototype.hasOwnProperty.call(currentRecord, key)) continue;
+    if (typeof currentRecord[key] === 'function') continue;
+    nextState[key] = value;
+  }
+  return nextState as TState;
+};
+
+export const hydrateNativeDetachedStore = <TState extends object>(
+  store: StoreApiLike<TState>,
+  snapshot: NativeDetachedStoreSnapshot,
+): TState => {
+  const nextState = mergeNativeDetachedStoreState(store.getState(), snapshot);
+  store.setState(nextState, true);
+  return nextState;
+};
+
+export const isNativeDetachedWindow = (
+  locationLike?: Pick<Location, 'pathname' | 'search'>,
+): boolean => {
+  if (typeof window !== 'undefined') {
+    const runtimeWindow = window as typeof window & {
+      __GONAVI_NATIVE_DETACHED__?: unknown;
+      __GONAVI_DETACHED__?: unknown;
+    };
+    if (runtimeWindow.__GONAVI_NATIVE_DETACHED__ || runtimeWindow.__GONAVI_DETACHED__) {
+      return true;
+    }
+  }
+  const locationValue = locationLike
+    ?? (typeof window !== 'undefined' ? window.location : undefined);
+  if (!locationValue) return false;
+  if (locationValue.pathname.startsWith('/__gonavi/detached/window')) return true;
+  const params = new URLSearchParams(locationValue.search);
+  const value = params.get(NATIVE_DETACHED_WINDOW_QUERY_PARAM);
+  return value !== null && value !== '' && value !== '0' && value !== 'false';
+};
+
+const requireSuccessfulResponse = async (response: Response): Promise<Response> => {
+  if (response.ok) return response;
+  const body = await response.text().catch(() => '');
+  throw new Error(
+    `Native detached window request failed (${response.status})${body ? `: ${body}` : ''}`,
+  );
+};
+
+export const fetchNativeDetachedWindowBootstrap = async (
+  fetchImpl: FetchLike = fetch,
+): Promise<NativeDetachedWindowBootstrap> => {
+  const response = await requireSuccessfulResponse(await fetchImpl(
+    NATIVE_DETACHED_BOOTSTRAP_URL,
+    {
+      method: 'GET',
+      credentials: 'same-origin',
+      headers: { Accept: 'application/json' },
+    },
+  ));
+  const bootstrap = await response.json() as NativeDetachedWindowBootstrap;
+  if (!bootstrap || typeof bootstrap.id !== 'string' || !bootstrap.id.trim()) {
+    throw new Error('Native detached window bootstrap is missing an id');
+  }
+  if (bootstrap.kind !== 'workbench' && bootstrap.kind !== 'query-result') {
+    throw new Error('Native detached window bootstrap has an invalid kind');
+  }
+  if (
+    !bootstrap.payload
+    || !bootstrap.payload.storeState
+    || typeof bootstrap.payload.storeState !== 'object'
+    || Array.isArray(bootstrap.payload.storeState)
+  ) {
+    throw new Error('Native detached window bootstrap is missing storeState');
+  }
+  return bootstrap;
+};
+
+export const postNativeDetachedWindowAction = async (
+  action: NativeDetachedWindowAction,
+  payload: NativeDetachedWindowActionPayload,
+  fetchImpl?: FetchLike,
+): Promise<void> => {
+  const nativeAction = !fetchImpl && typeof window !== 'undefined'
+    ? (window as any).__GONAVI_DETACHED__?.action
+    : undefined;
+  if (typeof nativeAction === 'function') {
+    const result = await nativeAction(action, payload);
+    if (result?.success === false) {
+      throw new Error(String(result.message || `Native detached ${action} failed`));
+    }
+    return;
+  }
+  const request = fetchImpl ?? fetch;
+  await requireSuccessfulResponse(await request(NATIVE_DETACHED_ACTION_URL, {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ action, payload } satisfies NativeDetachedWindowActionRequest),
+  }));
+};
+
+export const syncNativeDetachedWindow = (
+  payload: NativeDetachedWindowActionPayload,
+  fetchImpl?: FetchLike,
+): Promise<void> => postNativeDetachedWindowAction('sync', payload, fetchImpl);
+
+export const readyNativeDetachedWindow = (
+  payload: NativeDetachedWindowActionPayload,
+  fetchImpl?: FetchLike,
+): Promise<void> => postNativeDetachedWindowAction('ready', payload, fetchImpl);
+
+export const attachNativeDetachedWindow = (
+  payload: NativeDetachedWindowActionPayload,
+  fetchImpl?: FetchLike,
+): Promise<void> => postNativeDetachedWindowAction('attach', payload, fetchImpl);
+
+export const closeNativeDetachedWindow = (
+  payload: NativeDetachedWindowActionPayload,
+  fetchImpl?: FetchLike,
+): Promise<void> => postNativeDetachedWindowAction('close', payload, fetchImpl);
+
+export const closeCurrentNativeDetachedWindow = async (): Promise<void> => {
+  const nativeClose = typeof window !== 'undefined'
+    ? (window as any).go?.nativewindow?.Control?.Close
+    : undefined;
+  if (typeof nativeClose === 'function') {
+    await nativeClose();
+    return;
+  }
+  if (typeof window !== 'undefined' && typeof window.close === 'function') {
+    window.close();
+  }
+};
diff --git a/frontend/src/utils/nativeDetachedWindowHost.test.ts b/frontend/src/utils/nativeDetachedWindowHost.test.ts
new file mode 100644
index 00000000..2278df81
--- /dev/null
+++ b/frontend/src/utils/nativeDetachedWindowHost.test.ts
@@ -0,0 +1,132 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useStore } from '../store';
+import {
+  openNativeQueryResultWindow,
+  openNativeWorkbenchTabWindow,
+  type NativeDetachedWindowManager,
+} from './nativeDetachedWindowHost';
+
+const buildTab = (id: string) => ({
+  id,
+  title: `Query ${id}`,
+  type: 'query' as const,
+  connectionId: 'conn-1',
+  dbName: 'main',
+  query: 'select 1',
+});
+
+describe('nativeDetachedWindowHost', () => {
+  let manager: NativeDetachedWindowManager;
+
+  beforeEach(() => {
+    manager = {
+      Open: vi.fn().mockResolvedValue({ success: true }),
+      Focus: vi.fn().mockResolvedValue({ success: true }),
+      Close: vi.fn().mockResolvedValue({ success: true }),
+      CloseAll: vi.fn().mockResolvedValue({ success: true }),
+    };
+    useStore.setState({
+      tabs: [buildTab('query-1')],
+      activeTabId: 'query-1',
+      detachedWorkbenchWindows: [],
+      detachedQueryResultWindows: [],
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('hides the docked tab only after the native window opens', async () => {
+    let resolveOpen: ((value: { success: boolean }) => void) | undefined;
+    const pending = new Promise<{ success: boolean }>((resolve) => {
+      resolveOpen = resolve;
+    });
+    vi.mocked(manager.Open).mockReturnValueOnce(pending);
+
+    const opening = openNativeWorkbenchTabWindow('query-1', { x: -1600, y: 120 }, manager);
+    expect(useStore.getState().isWorkbenchTabDetached('query-1')).toBe(false);
+
+    resolveOpen?.({ success: true });
+    await expect(opening).resolves.toBe(true);
+    expect(useStore.getState().isWorkbenchTabDetached('query-1')).toBe(true);
+    expect(manager.Open).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'workbench:query-1',
+      kind: 'workbench',
+      x: -1600,
+      y: 120,
+    }));
+  });
+
+  it('keeps the tab docked when native window creation fails', async () => {
+    vi.mocked(manager.Open).mockResolvedValueOnce({ success: false, message: 'open failed' });
+
+    await expect(
+      openNativeWorkbenchTabWindow('query-1', { x: 2000, y: -300 }, manager),
+    ).rejects.toThrow('open failed');
+    expect(useStore.getState().isWorkbenchTabDetached('query-1')).toBe(false);
+  });
+
+  it('focuses an existing window instead of opening a duplicate', async () => {
+    await openNativeWorkbenchTabWindow('query-1', undefined, manager);
+    await openNativeWorkbenchTabWindow('query-1', undefined, manager);
+
+    expect(manager.Open).toHaveBeenCalledTimes(1);
+    expect(manager.Focus).toHaveBeenCalledTimes(2);
+    expect(manager.Focus).toHaveBeenCalledWith('workbench:query-1');
+  });
+
+  it('restores the source tab when a just-ready child exits before detach commits', async () => {
+    vi.mocked(manager.Focus).mockResolvedValueOnce({
+      success: false,
+      message: 'native window was not found',
+    });
+
+    await expect(openNativeWorkbenchTabWindow('query-1', undefined, manager))
+      .rejects.toThrow('native window was not found');
+
+    expect(useStore.getState().isWorkbenchTabDetached('query-1')).toBe(false);
+    expect(useStore.getState().tabs.map((tab) => tab.id)).toContain('query-1');
+  });
+
+  it('opens many tabs with unique native window ids without a hard cap', async () => {
+    const tabs = Array.from({ length: 32 }, (_, index) => buildTab(`query-${index + 1}`));
+    useStore.setState({ tabs, detachedWorkbenchWindows: [] });
+
+    await Promise.all(tabs.map((tab) => openNativeWorkbenchTabWindow(tab.id, undefined, manager)));
+
+    const ids = vi.mocked(manager.Open).mock.calls.map(([request]) => request.id);
+    expect(ids).toHaveLength(32);
+    expect(new Set(ids).size).toBe(32);
+    expect(useStore.getState().detachedWorkbenchWindows).toHaveLength(32);
+  });
+
+  it('opens a query result snapshot as a native window on another display', async () => {
+    await expect(openNativeQueryResultWindow({
+      id: 'query-result:query-1:r1',
+      sourceQueryTabId: 'query-1',
+      connectionId: 'conn-1',
+      dbName: 'main',
+      title: 'Result 1',
+      x: 2100,
+      y: -240,
+      result: {
+        key: 'r1',
+        sql: 'select 42',
+        rows: [{ value: 42 }],
+        columns: ['value'],
+        pkColumns: [],
+        readOnly: true,
+      },
+    }, manager)).resolves.toBe(true);
+
+    expect(manager.Open).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'query-result:query-1:r1',
+      kind: 'query-result',
+      x: 2100,
+      y: -240,
+    }));
+    expect(useStore.getState().detachedQueryResultWindows).toHaveLength(1);
+  });
+});
diff --git a/frontend/src/utils/nativeDetachedWindowHost.ts b/frontend/src/utils/nativeDetachedWindowHost.ts
new file mode 100644
index 00000000..5477e28f
--- /dev/null
+++ b/frontend/src/utils/nativeDetachedWindowHost.ts
@@ -0,0 +1,238 @@
+import { useStore } from '../store';
+import type { TabData } from '../types';
+import {
+  DEFAULT_DETACHED_WINDOW_HEIGHT,
+  DEFAULT_DETACHED_WINDOW_MIN_HEIGHT,
+  DEFAULT_DETACHED_WINDOW_MIN_WIDTH,
+  DEFAULT_DETACHED_WINDOW_WIDTH,
+  type DetachedQueryResultWindow,
+  type DetachedWindowBounds,
+} from './detachedWindow';
+import {
+  buildNativeDetachedQueryResultPayload,
+  buildNativeDetachedWorkbenchPayload,
+  type NativeDetachedWindowKind,
+  type NativeDetachedWindowPayload,
+} from './nativeDetachedWindowClient';
+import { peekQueryEditorResultSession } from './queryEditorResultSessionCache';
+
+export type NativeDetachedWindowOperationResult = {
+  success: boolean;
+  message?: string;
+  id?: string;
+};
+
+export type NativeDetachedWindowOpenRequest = {
+  id: string;
+  kind: NativeDetachedWindowKind;
+  title: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  payload: NativeDetachedWindowPayload;
+};
+
+export type NativeDetachedWindowManager = {
+  Open: (request: NativeDetachedWindowOpenRequest) => Promise<NativeDetachedWindowOperationResult>;
+  Focus: (id: string) => Promise<NativeDetachedWindowOperationResult>;
+  Close: (id: string) => Promise<NativeDetachedWindowOperationResult>;
+  CloseAll: () => Promise<NativeDetachedWindowOperationResult>;
+};
+
+export type NativeQueryResultWindowInput = Omit<
+  DetachedQueryResultWindow,
+  keyof DetachedWindowBounds
+> & Partial<DetachedWindowBounds>;
+
+const openingWindows = new Map<string, Promise<boolean>>();
+
+export const resolveNativeDetachedWindowManager = (): NativeDetachedWindowManager | null => {
+  if (typeof window === 'undefined') return null;
+  const manager = (window as any).go?.nativewindow?.Manager;
+  if (
+    typeof manager?.Open !== 'function'
+    || typeof manager?.Focus !== 'function'
+    || typeof manager?.Close !== 'function'
+  ) {
+    return null;
+  }
+  return manager as NativeDetachedWindowManager;
+};
+
+export const hasNativeDetachedWindowManager = (): boolean =>
+  resolveNativeDetachedWindowManager() !== null;
+
+const getNativeWindowBounds = (
+  preferred?: Partial<Pick<DetachedWindowBounds, 'x' | 'y' | 'width' | 'height'>>,
+): Pick<DetachedWindowBounds, 'x' | 'y' | 'width' | 'height'> => {
+  const viewportWidth = typeof window === 'undefined' ? DEFAULT_DETACHED_WINDOW_WIDTH : window.innerWidth;
+  const viewportHeight = typeof window === 'undefined' ? DEFAULT_DETACHED_WINDOW_HEIGHT : window.innerHeight;
+  const width = Math.max(
+    DEFAULT_DETACHED_WINDOW_MIN_WIDTH,
+    Math.round(Number(preferred?.width) || Math.min(DEFAULT_DETACHED_WINDOW_WIDTH, viewportWidth * 0.9)),
+  );
+  const height = Math.max(
+    DEFAULT_DETACHED_WINDOW_MIN_HEIGHT,
+    Math.round(Number(preferred?.height) || Math.min(DEFAULT_DETACHED_WINDOW_HEIGHT, viewportHeight * 0.86)),
+  );
+  const baseX = typeof window === 'undefined' ? 80 : window.screenX + Math.max(32, Math.round((window.innerWidth - width) / 2));
+  const baseY = typeof window === 'undefined' ? 80 : window.screenY + Math.max(32, Math.round((window.innerHeight - height) / 2));
+  return {
+    x: Number.isFinite(Number(preferred?.x)) ? Math.round(Number(preferred?.x)) : baseX,
+    y: Number.isFinite(Number(preferred?.y)) ? Math.round(Number(preferred?.y)) : baseY,
+    width,
+    height,
+  };
+};
+
+const assertOpened = (result: NativeDetachedWindowOperationResult | undefined): void => {
+  if (result?.success) return;
+  throw new Error(String(result?.message || 'Failed to open native detached window'));
+};
+
+const focusExistingWindow = async (
+  manager: NativeDetachedWindowManager,
+  id: string,
+): Promise<boolean> => {
+  const result = await manager.Focus(id);
+  if (!result?.success) {
+    throw new Error(String(result?.message || 'Failed to focus native detached window'));
+  }
+  return true;
+};
+
+const openOnce = (
+  manager: NativeDetachedWindowManager,
+  request: NativeDetachedWindowOpenRequest,
+  afterOpen: () => boolean,
+  rollbackAfterExit: () => void,
+): Promise<boolean> => {
+  const existing = openingWindows.get(request.id);
+  if (existing) {
+    return existing.then(async (opened) => {
+      if (opened) await focusExistingWindow(manager, request.id);
+      return opened;
+    });
+  }
+  const opening = (async () => {
+    const result = await manager.Open(request);
+    assertOpened(result);
+    const opened = afterOpen();
+    if (!opened) return false;
+
+    // A child can acknowledge ready and exit before the Wails Open promise is
+    // delivered to JavaScript. Verify it after committing detached state so
+    // either this rollback or the process-exit event restores the source.
+    try {
+      await focusExistingWindow(manager, request.id);
+    } catch (error) {
+      rollbackAfterExit();
+      throw error;
+    }
+    return true;
+  })();
+  openingWindows.set(request.id, opening);
+  void opening.finally(() => {
+    if (openingWindows.get(request.id) === opening) {
+      openingWindows.delete(request.id);
+    }
+  }).catch(() => undefined);
+  return opening;
+};
+
+const resolveWorkbenchTitle = (tab: TabData): string =>
+  String(tab.title || tab.tableName || tab.viewName || tab.id).trim() || tab.id;
+
+export const openNativeWorkbenchTabWindow = async (
+  tabId: string,
+  preferred?: Partial<Pick<DetachedWindowBounds, 'x' | 'y' | 'width' | 'height'>>,
+  managerOverride?: NativeDetachedWindowManager,
+): Promise<boolean> => {
+  const id = String(tabId || '').trim();
+  const state = useStore.getState();
+  const tab = state.tabs.find((item) => item.id === id);
+  if (!tab) return false;
+
+  const manager = managerOverride ?? resolveNativeDetachedWindowManager();
+  if (!manager) {
+    state.detachWorkbenchTab(id, preferred);
+    return true;
+  }
+  const windowId = `workbench:${id}`;
+  if (state.isWorkbenchTabDetached(id)) {
+    return focusExistingWindow(manager, windowId);
+  }
+
+  const bounds = getNativeWindowBounds(preferred);
+  if (tab.type === 'query' && typeof window !== 'undefined') {
+    window.dispatchEvent(new CustomEvent('gonavi:capture-query-result-session', {
+      detail: { tabId: tab.id },
+    }));
+  }
+  const request: NativeDetachedWindowOpenRequest = {
+    id: windowId,
+    kind: 'workbench',
+    title: resolveWorkbenchTitle(tab),
+    ...bounds,
+    payload: buildNativeDetachedWorkbenchPayload(
+      state,
+      tab,
+      tab.type === 'query' ? peekQueryEditorResultSession(tab.id) : null,
+    ),
+  };
+  return openOnce(manager, request, () => {
+    const latest = useStore.getState();
+    if (!latest.tabs.some((item) => item.id === id)) {
+      void manager.Close(windowId);
+      return false;
+    }
+    latest.detachWorkbenchTab(id, preferred ?? bounds);
+    return true;
+  }, () => {
+    useStore.getState().attachWorkbenchTab(id);
+  });
+};
+
+export const openNativeQueryResultWindow = async (
+  windowState: NativeQueryResultWindowInput,
+  managerOverride?: NativeDetachedWindowManager,
+): Promise<boolean> => {
+  const id = String(windowState.id || '').trim();
+  if (!id) return false;
+  const state = useStore.getState();
+  const manager = managerOverride ?? resolveNativeDetachedWindowManager();
+  if (!manager) {
+    state.detachQueryResultWindow(windowState);
+    return true;
+  }
+  if (state.detachedQueryResultWindows.some((item) => item.id === id)) {
+    return focusExistingWindow(manager, id);
+  }
+  const bounds = getNativeWindowBounds(windowState);
+  return openOnce(manager, {
+    id,
+    kind: 'query-result',
+    title: windowState.title,
+    ...bounds,
+    payload: buildNativeDetachedQueryResultPayload(state, {
+      ...windowState,
+      ...bounds,
+      zIndex: Number(windowState.zIndex) || 1201,
+    }),
+  }, () => {
+    useStore.getState().detachQueryResultWindow({ ...windowState, ...bounds });
+    return true;
+  }, () => {
+    useStore.getState().closeDetachedQueryResultWindow(id);
+  });
+};
+
+export const closeNativeDetachedWindowById = async (id: string): Promise<void> => {
+  const manager = resolveNativeDetachedWindowManager();
+  if (!manager) return;
+  const result = await manager.Close(String(id || '').trim());
+  if (!result?.success && result?.message) {
+    throw new Error(result.message);
+  }
+};
diff --git a/frontend/src/utils/queryEditorResultSessionCache.ts b/frontend/src/utils/queryEditorResultSessionCache.ts
index ca2cc628..405f2886 100644
--- a/frontend/src/utils/queryEditorResultSessionCache.ts
+++ b/frontend/src/utils/queryEditorResultSessionCache.ts
@@ -1,12 +1,20 @@
 import type { QueryEditorResultSet } from '../components/QueryEditorResultsPanel';
 
-type QueryEditorResultSessionSnapshot = {
+export type QueryEditorResultSessionSnapshot = {
   resultSets: QueryEditorResultSet[];
   activeResultKey: string;
   isResultPanelVisible?: boolean;
 };
 
 const cache = new Map<string, QueryEditorResultSessionSnapshot>();
+const listeners = new Map<string, Set<(snapshot: QueryEditorResultSessionSnapshot | null) => void>>();
+
+const notifyQueryEditorResultSession = (
+  tabId: string,
+  snapshot: QueryEditorResultSessionSnapshot | null,
+): void => {
+  listeners.get(tabId)?.forEach((listener) => listener(snapshot));
+};
 
 export const saveQueryEditorResultSession = (
   tabId: string,
@@ -14,11 +22,13 @@ export const saveQueryEditorResultSession = (
 ): void => {
   const id = String(tabId || '').trim();
   if (!id) return;
-  cache.set(id, {
+  const nextSnapshot = {
     resultSets: Array.isArray(snapshot.resultSets) ? snapshot.resultSets : [],
     activeResultKey: String(snapshot.activeResultKey || ''),
     isResultPanelVisible: snapshot.isResultPanelVisible,
-  });
+  };
+  cache.set(id, nextSnapshot);
+  notifyQueryEditorResultSession(id, nextSnapshot);
 };
 
 export const takeQueryEditorResultSession = (
@@ -29,6 +39,7 @@ export const takeQueryEditorResultSession = (
   const snapshot = cache.get(id) || null;
   if (snapshot) {
     cache.delete(id);
+    notifyQueryEditorResultSession(id, null);
   }
   return snapshot;
 };
@@ -45,4 +56,24 @@ export const clearQueryEditorResultSession = (tabId: string): void => {
   const id = String(tabId || '').trim();
   if (!id) return;
   cache.delete(id);
+  notifyQueryEditorResultSession(id, null);
+};
+
+export const subscribeQueryEditorResultSession = (
+  tabId: string,
+  listener: (snapshot: QueryEditorResultSessionSnapshot | null) => void,
+): (() => void) => {
+  const id = String(tabId || '').trim();
+  if (!id) return () => undefined;
+  const tabListeners = listeners.get(id) || new Set();
+  tabListeners.add(listener);
+  listeners.set(id, tabListeners);
+  return () => {
+    const current = listeners.get(id);
+    if (!current) return;
+    current.delete(listener);
+    if (current.size === 0) {
+      listeners.delete(id);
+    }
+  };
 };
diff --git a/internal/nativewindow/activation_policy_darwin.go b/internal/nativewindow/activation_policy_darwin.go
new file mode 100644
index 00000000..56bb217c
--- /dev/null
+++ b/internal/nativewindow/activation_policy_darwin.go
@@ -0,0 +1,31 @@
+//go:build darwin && cgo
+
+package nativewindow
+
+/*
+#cgo CFLAGS: -x objective-c
+#cgo LDFLAGS: -framework Cocoa
+
+#import <Cocoa/Cocoa.h>
+#import <dispatch/dispatch.h>
+
+static void applyDetachedAccessoryActivationPolicy(void *unused) {
+    (void)unused;
+    NSApplication *application = [NSApplication sharedApplication];
+    [application setActivationPolicy:NSApplicationActivationPolicyAccessory];
+    [application activateIgnoringOtherApps:YES];
+}
+
+static void setDetachedAccessoryActivationPolicy(void) {
+    if ([NSThread isMainThread]) {
+        applyDetachedAccessoryActivationPolicy(NULL);
+        return;
+    }
+	dispatch_sync_f(dispatch_get_main_queue(), NULL, applyDetachedAccessoryActivationPolicy);
+}
+*/
+import "C"
+
+func setDetachedAccessoryActivationPolicy() {
+	C.setDetachedAccessoryActivationPolicy()
+}
diff --git a/internal/nativewindow/activation_policy_other.go b/internal/nativewindow/activation_policy_other.go
new file mode 100644
index 00000000..f3acb42a
--- /dev/null
+++ b/internal/nativewindow/activation_policy_other.go
@@ -0,0 +1,5 @@
+//go:build !darwin || !cgo
+
+package nativewindow
+
+func setDetachedAccessoryActivationPolicy() {}
diff --git a/internal/nativewindow/bridge.go b/internal/nativewindow/bridge.go
new file mode 100644
index 00000000..f0244d2d
--- /dev/null
+++ b/internal/nativewindow/bridge.go
@@ -0,0 +1,395 @@
+package nativewindow
+
+import (
+	"bufio"
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net"
+	"net/http"
+	"strings"
+	"sync"
+	"time"
+
+	wailsRuntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+type invokeRequest struct {
+	Namespace string `json:"namespace"`
+	Receiver  string `json:"receiver"`
+	Method    string `json:"method"`
+	Args      []any  `json:"args"`
+}
+
+type invokeResponse struct {
+	Result any    `json:"result,omitempty"`
+	Error  string `json:"error,omitempty"`
+}
+
+type bridgeEvent struct {
+	Name string `json:"name"`
+	Args []any  `json:"args,omitempty"`
+}
+
+// Bridge is bound only inside a detached child. It performs parent RPC and SSE
+// over Go's HTTP stack so long-lived event streams never pass through Wails v2's
+// Windows AssetServer response buffering.
+type Bridge struct {
+	parentURL string
+	token     string
+	windowID  string
+	kind      string
+	client    *http.Client
+
+	mu        sync.Mutex
+	ctx       context.Context
+	cancel    context.CancelFunc
+	terminal  string
+	closeOnce sync.Once
+}
+
+func newBridge(options ChildOptions) *Bridge {
+	transport := &http.Transport{
+		Proxy: nil,
+		DialContext: (&net.Dialer{
+			Timeout:   5 * time.Second,
+			KeepAlive: 30 * time.Second,
+		}).DialContext,
+		ForceAttemptHTTP2: false,
+	}
+	return &Bridge{
+		parentURL: strings.TrimRight(options.ParentURL, "/"),
+		token:     options.Token,
+		windowID:  options.ID,
+		kind:      options.Kind,
+		client:    &http.Client{Transport: transport},
+	}
+}
+
+func InitializeBridge(bridge *Bridge, ctx context.Context) {
+	if bridge == nil {
+		return
+	}
+	bridge.mu.Lock()
+	if bridge.cancel != nil {
+		bridge.mu.Unlock()
+		return
+	}
+	streamCtx, cancel := context.WithCancel(ctx)
+	bridge.ctx = ctx
+	bridge.cancel = cancel
+	bridge.mu.Unlock()
+	go bridge.consumeEvents(streamCtx)
+}
+
+// Invoke calls the shared parent App or AI service.
+func (b *Bridge) Invoke(namespace string, receiver string, method string, args []any) (any, error) {
+	request := invokeRequest{
+		Namespace: namespace,
+		Receiver:  receiver,
+		Method:    method,
+		Args:      args,
+	}
+	var response invokeResponse
+	status, err := b.doJSON(context.Background(), http.MethodPost, InvokePath, request, &response)
+	if err != nil {
+		return nil, err
+	}
+	if status != http.StatusOK || response.Error != "" {
+		if response.Error != "" {
+			return nil, fmt.Errorf("%s", response.Error)
+		}
+		return nil, fmt.Errorf("parent invoke failed with status %d", status)
+	}
+	return response.Result, nil
+}
+
+// Bootstrap returns the tab snapshot stored in the main process registry.
+func (b *Bridge) Bootstrap() (Bootstrap, error) {
+	var result Bootstrap
+	status, err := b.doJSON(context.Background(), http.MethodGet, BootstrapPath, nil, &result)
+	if err != nil {
+		return Bootstrap{}, err
+	}
+	if status != http.StatusOK {
+		return Bootstrap{}, fmt.Errorf("detached bootstrap failed with status %d", status)
+	}
+	return result, nil
+}
+
+// WindowID returns the lightweight process identity used to route parent
+// focus/close commands. Command handling must not reload a potentially large
+// bootstrap payload just to compare IDs.
+func (b *Bridge) WindowID() string {
+	if b == nil {
+		return ""
+	}
+	return b.windowID
+}
+
+// OpenWindow asks the parent manager to create a child owned by this detached
+// window. The parent validates ownership for all subsequent focus/close calls.
+func (b *Bridge) OpenWindow(request OpenRequest) OperationResult {
+	return b.control(controlRequest{Action: "open", Request: request})
+}
+
+func (b *Bridge) FocusWindow(id string) OperationResult {
+	return b.control(controlRequest{Action: "focus", ID: id})
+}
+
+func (b *Bridge) CloseWindow(id string) OperationResult {
+	return b.control(controlRequest{Action: "close", ID: id})
+}
+
+func (b *Bridge) CloseOwnedWindows() OperationResult {
+	return b.control(controlRequest{Action: "close-owned"})
+}
+
+func (b *Bridge) control(request controlRequest) OperationResult {
+	var result OperationResult
+	status, err := b.doJSON(
+		context.Background(),
+		http.MethodPost,
+		ControlPath,
+		request,
+		&result,
+	)
+	if err != nil {
+		return operationFailure(err.Error())
+	}
+	if status != http.StatusOK && result.Message == "" {
+		return operationFailure(fmt.Sprintf("detached control failed with status %d", status))
+	}
+	return result
+}
+
+// Action acknowledges child readiness or forwards sync, attach, or close state
+// to the main window.
+func (b *Bridge) Action(action string, payload any) OperationResult {
+	var result OperationResult
+	status, err := b.doJSON(context.Background(), http.MethodPost, ActionPath, actionRequest{Action: action, Payload: payload}, &result)
+	if err != nil {
+		return operationFailure(err.Error())
+	}
+	if status != http.StatusOK {
+		return operationFailure(fmt.Sprintf("detached action failed with status %d", status))
+	}
+	normalizedAction := strings.ToLower(strings.TrimSpace(action))
+	if result.Success && (normalizedAction == "attach" || normalizedAction == "close") {
+		b.mu.Lock()
+		b.terminal = normalizedAction
+		b.mu.Unlock()
+	}
+	return result
+}
+
+func (b *Bridge) notifyClosing() {
+	if b == nil {
+		return
+	}
+	b.closeOnce.Do(func() {
+		b.mu.Lock()
+		terminal := b.terminal
+		b.mu.Unlock()
+		if terminal == "attach" || terminal == "close" {
+			return
+		}
+		ctx, cancel := context.WithTimeout(context.Background(), 750*time.Millisecond)
+		defer cancel()
+		var result OperationResult
+		_, _ = b.doJSON(ctx, http.MethodPost, ActionPath, actionRequest{
+			Action: "close",
+			Payload: map[string]any{
+				"id":   b.windowID,
+				"kind": b.kind,
+			},
+		}, &result)
+	})
+}
+
+func (b *Bridge) stop() {
+	if b == nil {
+		return
+	}
+	b.mu.Lock()
+	cancel := b.cancel
+	b.cancel = nil
+	b.mu.Unlock()
+	if cancel != nil {
+		cancel()
+	}
+}
+
+func (b *Bridge) doJSON(ctx context.Context, method string, requestPath string, requestBody any, responseBody any) (int, error) {
+	if b == nil || b.client == nil {
+		return 0, fmt.Errorf("detached bridge is unavailable")
+	}
+	var body io.Reader
+	if requestBody != nil {
+		payload, err := json.Marshal(requestBody)
+		if err != nil {
+			return 0, err
+		}
+		body = bytes.NewReader(payload)
+	}
+	request, err := http.NewRequestWithContext(ctx, method, b.parentURL+requestPath, body)
+	if err != nil {
+		return 0, err
+	}
+	b.addHeaders(request)
+	if requestBody != nil {
+		request.Header.Set("Content-Type", "application/json")
+	}
+	response, err := b.client.Do(request)
+	if err != nil {
+		return 0, err
+	}
+	defer response.Body.Close()
+	if responseBody != nil {
+		decoder := json.NewDecoder(io.LimitReader(response.Body, maxDetachedJSONBytes))
+		if err := decoder.Decode(responseBody); err != nil && !errorsIsEOF(err) {
+			return response.StatusCode, err
+		}
+	}
+	return response.StatusCode, nil
+}
+
+func errorsIsEOF(err error) bool {
+	return err == io.EOF
+}
+
+func (b *Bridge) addHeaders(request *http.Request) {
+	request.Header.Set(HeaderToken, b.token)
+	request.Header.Set(HeaderWindowID, b.windowID)
+}
+
+func (b *Bridge) consumeEvents(ctx context.Context) {
+	for {
+		if ctx.Err() != nil {
+			return
+		}
+		err := b.consumeEventStream(ctx)
+		if ctx.Err() != nil {
+			return
+		}
+		delay := 750 * time.Millisecond
+		if err == nil {
+			delay = 100 * time.Millisecond
+		}
+		timer := time.NewTimer(delay)
+		select {
+		case <-ctx.Done():
+			timer.Stop()
+			return
+		case <-timer.C:
+		}
+	}
+}
+
+func (b *Bridge) consumeEventStream(ctx context.Context) error {
+	request, err := http.NewRequestWithContext(ctx, http.MethodGet, b.parentURL+EventsPath, nil)
+	if err != nil {
+		return err
+	}
+	b.addHeaders(request)
+	request.Header.Set("Accept", "text/event-stream")
+	response, err := b.client.Do(request)
+	if err != nil {
+		return err
+	}
+	defer response.Body.Close()
+	if response.StatusCode != http.StatusOK {
+		_, _ = io.Copy(io.Discard, io.LimitReader(response.Body, 4<<10))
+		return fmt.Errorf("detached event stream failed with status %d", response.StatusCode)
+	}
+
+	scanner := bufio.NewScanner(response.Body)
+	scanner.Buffer(make([]byte, 64<<10), 4<<20)
+	var data strings.Builder
+	for scanner.Scan() {
+		line := scanner.Text()
+		if line == "" {
+			if data.Len() > 0 {
+				b.dispatchEvent(data.String())
+				data.Reset()
+			}
+			continue
+		}
+		if strings.HasPrefix(line, "data:") {
+			if data.Len() > 0 {
+				data.WriteByte('\n')
+			}
+			data.WriteString(strings.TrimSpace(strings.TrimPrefix(line, "data:")))
+		}
+	}
+	return scanner.Err()
+}
+
+func (b *Bridge) dispatchEvent(payload string) {
+	var event bridgeEvent
+	if err := json.Unmarshal([]byte(payload), &event); err != nil || strings.TrimSpace(event.Name) == "" {
+		return
+	}
+	b.mu.Lock()
+	ctx := b.ctx
+	b.mu.Unlock()
+	if ctx != nil {
+		wailsRuntime.EventsEmit(ctx, event.Name, event.Args...)
+	}
+}
+
+// Control is bound only in a child and always targets that process's native
+// Wails window.
+type Control struct {
+	mu     sync.RWMutex
+	ctx    context.Context
+	bridge *Bridge
+}
+
+func newControl(bridge *Bridge) *Control {
+	return &Control{bridge: bridge}
+}
+
+func InitializeControl(control *Control, ctx context.Context) {
+	if control == nil {
+		return
+	}
+	control.mu.Lock()
+	control.ctx = ctx
+	control.mu.Unlock()
+}
+
+func (c *Control) Close() OperationResult {
+	if c == nil {
+		return operationFailure("native window control is unavailable")
+	}
+	if c.bridge != nil {
+		c.bridge.notifyClosing()
+	}
+	c.mu.RLock()
+	ctx := c.ctx
+	c.mu.RUnlock()
+	if ctx == nil {
+		return operationFailure("native window is not ready")
+	}
+	wailsRuntime.Quit(ctx)
+	return OperationResult{Success: true}
+}
+
+func (c *Control) Focus() OperationResult {
+	if c == nil {
+		return operationFailure("native window control is unavailable")
+	}
+	c.mu.RLock()
+	ctx := c.ctx
+	c.mu.RUnlock()
+	if ctx == nil {
+		return operationFailure("native window is not ready")
+	}
+	wailsRuntime.WindowUnminimise(ctx)
+	wailsRuntime.WindowShow(ctx)
+	wailsRuntime.Show(ctx)
+	return OperationResult{Success: true}
+}
diff --git a/internal/nativewindow/child.go b/internal/nativewindow/child.go
new file mode 100644
index 00000000..61a91be8
--- /dev/null
+++ b/internal/nativewindow/child.go
@@ -0,0 +1,193 @@
+package nativewindow
+
+import (
+	"context"
+	"flag"
+	"fmt"
+	"io/fs"
+	"net"
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"os"
+	"strconv"
+	"strings"
+
+	"github.com/wailsapp/wails/v2"
+	"github.com/wailsapp/wails/v2/pkg/options"
+	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
+	wailsRuntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+// ChildOptions are intentionally small; the potentially large tab payload is
+// kept in the parent registry and fetched through Bootstrap.
+type ChildOptions struct {
+	ParentURL string
+	Token     string
+	ID        string
+	Kind      string
+	Title     string
+	X         int
+	Y         int
+	Width     int
+	Height    int
+}
+
+func ParseChildOptions(args []string) (ChildOptions, error) {
+	result := ChildOptions{
+		ParentURL: strings.TrimSpace(os.Getenv(envParentURL)),
+		Token:     strings.TrimSpace(os.Getenv(envToken)),
+		ID:        strings.TrimSpace(os.Getenv(envWindowID)),
+		Kind:      strings.TrimSpace(os.Getenv(envKind)),
+		Title:     strings.TrimSpace(os.Getenv(envTitle)),
+		X:         environmentInt(envX, 0),
+		Y:         environmentInt(envY, 0),
+		Width:     environmentInt(envWidth, defaultWindowWidth),
+		Height:    environmentInt(envHeight, defaultWindowHeight),
+	}
+	flags := flag.NewFlagSet("gonavi detached-window", flag.ContinueOnError)
+	flags.SetOutput(discardWriter{})
+	flags.StringVar(&result.ParentURL, "parent-url", result.ParentURL, "parent loopback bridge URL")
+	flags.StringVar(&result.Token, "token", result.Token, "parent bridge token")
+	flags.StringVar(&result.ID, "id", result.ID, "detached window ID")
+	flags.StringVar(&result.Kind, "kind", result.Kind, "detached window kind")
+	flags.StringVar(&result.Title, "title", result.Title, "native window title")
+	flags.IntVar(&result.X, "x", result.X, "virtual desktop x coordinate")
+	flags.IntVar(&result.Y, "y", result.Y, "virtual desktop y coordinate")
+	flags.IntVar(&result.Width, "width", result.Width, "window width")
+	flags.IntVar(&result.Height, "height", result.Height, "window height")
+	if err := flags.Parse(args); err != nil {
+		return ChildOptions{}, err
+	}
+	if flags.NArg() > 0 {
+		return ChildOptions{}, fmt.Errorf("unknown detached-window arguments: %s", strings.Join(flags.Args(), " "))
+	}
+	result.Kind = strings.TrimSpace(result.Kind)
+	if result.Kind == "" {
+		result.Kind = "workbench"
+	}
+	result.Title = strings.TrimSpace(result.Title)
+	if result.Title == "" {
+		result.Title = "GoNavi"
+	}
+	if result.Width <= 0 {
+		result.Width = defaultWindowWidth
+	}
+	if result.Height <= 0 {
+		result.Height = defaultWindowHeight
+	}
+	if err := validateChildOptions(result); err != nil {
+		return ChildOptions{}, err
+	}
+	return result, nil
+}
+
+func validateChildOptions(options ChildOptions) error {
+	if strings.TrimSpace(options.Token) == "" || strings.TrimSpace(options.ID) == "" {
+		return fmt.Errorf("detached-window token and id are required")
+	}
+	parentURL, err := url.Parse(options.ParentURL)
+	if err != nil || parentURL.Scheme != "http" || parentURL.Host == "" || (parentURL.Path != "" && parentURL.Path != "/") || parentURL.RawQuery != "" || parentURL.User != nil {
+		return fmt.Errorf("detached-window parent URL must be an HTTP loopback origin")
+	}
+	host := parentURL.Hostname()
+	ip := net.ParseIP(host)
+	if ip == nil || !ip.IsLoopback() {
+		return fmt.Errorf("detached-window parent URL must use a loopback IP")
+	}
+	if len(options.ID) > 256 || strings.ContainsAny(options.ID, "\r\n\x00") {
+		return fmt.Errorf("detached-window id is invalid")
+	}
+	return nil
+}
+
+func environmentInt(name string, fallback int) int {
+	value, err := strconv.Atoi(strings.TrimSpace(os.Getenv(name)))
+	if err != nil {
+		return fallback
+	}
+	return value
+}
+
+// RunChild starts one native system window in the current child process.
+func RunChild(parentCtx context.Context, assetFS fs.FS, args []string) error {
+	if assetFS == nil {
+		return fmt.Errorf("web assets are unavailable")
+	}
+	childOptions, err := ParseChildOptions(args)
+	if err != nil {
+		return err
+	}
+	parentURL, _ := url.Parse(childOptions.ParentURL)
+	proxy := httputil.NewSingleHostReverseProxy(parentURL)
+	originalDirector := proxy.Director
+	proxy.Director = func(request *http.Request) {
+		originalDirector(request)
+		request.Host = parentURL.Host
+		request.Header.Set(HeaderToken, childOptions.Token)
+		request.Header.Set(HeaderWindowID, childOptions.ID)
+	}
+	proxy.ErrorHandler = func(w http.ResponseWriter, _ *http.Request, proxyErr error) {
+		http.Error(w, fmt.Sprintf("detached parent is unavailable: %v", proxyErr), http.StatusBadGateway)
+	}
+
+	bridge := newBridge(childOptions)
+	control := newControl(bridge)
+	err = wails.Run(&options.App{
+		Title:       childOptions.Title,
+		Width:       childOptions.Width,
+		Height:      childOptions.Height,
+		MinWidth:    420,
+		MinHeight:   280,
+		StartHidden: true,
+		Frameless:   true,
+		AssetServer: &assetserver.Options{Handler: proxy},
+		BackgroundColour: &options.RGBA{
+			R: 255,
+			G: 255,
+			B: 255,
+			A: 255,
+		},
+		OnStartup: func(ctx context.Context) {
+			InitializeBridge(bridge, ctx)
+			InitializeControl(control, ctx)
+			if parentCtx != nil {
+				go func() {
+					select {
+					case <-parentCtx.Done():
+						wailsRuntime.Quit(ctx)
+					case <-ctx.Done():
+					}
+				}()
+			}
+		},
+		OnDomReady: func(ctx context.Context) {
+			setDetachedAccessoryActivationPolicy()
+			applyDetachedWindowBounds(
+				ctx,
+				childOptions.X,
+				childOptions.Y,
+				childOptions.Width,
+				childOptions.Height,
+			)
+			wailsRuntime.WindowSetTitle(ctx, childOptions.Title)
+			wailsRuntime.WindowShow(ctx)
+		},
+		OnBeforeClose: func(context.Context) bool {
+			bridge.notifyClosing()
+			return false
+		},
+		OnShutdown: func(context.Context) {
+			bridge.notifyClosing()
+			bridge.stop()
+		},
+		Bind: []interface{}{control, bridge},
+	})
+	return err
+}
+
+type discardWriter struct{}
+
+func (discardWriter) Write(payload []byte) (int, error) {
+	return len(payload), nil
+}
diff --git a/internal/nativewindow/manager.go b/internal/nativewindow/manager.go
new file mode 100644
index 00000000..c22c293c
--- /dev/null
+++ b/internal/nativewindow/manager.go
@@ -0,0 +1,775 @@
+package nativewindow
+
+import (
+	"context"
+	"crypto/rand"
+	"crypto/subtle"
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"io/fs"
+	"net"
+	"net/http"
+	"os"
+	"strings"
+	"sync"
+	"time"
+
+	aiservice "GoNavi-Wails/internal/ai/service"
+	appcore "GoNavi-Wails/internal/app"
+	"GoNavi-Wails/internal/uievents"
+	"GoNavi-Wails/internal/webserver"
+
+	"github.com/google/uuid"
+	wailsRuntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+const (
+	envParentURL = "GONAVI_DETACHED_PARENT_URL"
+	envToken     = "GONAVI_DETACHED_TOKEN"
+	envWindowID  = "GONAVI_DETACHED_WINDOW_ID"
+	envKind      = "GONAVI_DETACHED_KIND"
+	envTitle     = "GONAVI_DETACHED_TITLE"
+	envX         = "GONAVI_DETACHED_X"
+	envY         = "GONAVI_DETACHED_Y"
+	envWidth     = "GONAVI_DETACHED_WIDTH"
+	envHeight    = "GONAVI_DETACHED_HEIGHT"
+)
+
+const (
+	forceCloseDelay         = 3 * time.Second
+	defaultOpenReadyTimeout = 10 * time.Second
+)
+
+type processExit struct {
+	err error
+}
+
+type windowEntry struct {
+	info         WindowInfo
+	payload      any
+	ownerID      string
+	process      childProcess
+	exitReason   string
+	ready        chan struct{}
+	done         chan processExit
+	readyOnce    sync.Once
+	doneOnce     sync.Once
+	acknowledged bool
+}
+
+// Manager owns the loopback bridge and the registry of detached Wails child
+// processes. It is intended to be bound to the main Wails window.
+type Manager struct {
+	mu sync.RWMutex
+
+	shared     *webserver.SharedRuntime
+	token      string
+	endpoint   string
+	listener   net.Listener
+	httpServer *http.Server
+	runtimeCtx context.Context
+	started    bool
+	closing    bool
+	windows    map[string]*windowEntry
+
+	starter     processStarter
+	executable  string
+	openTimeout time.Duration
+	emitToWails func(context.Context, string, ...any)
+}
+
+// NewManager prepares a detached-window manager around the already-created
+// desktop backend instances. InitializeLifecycle starts its random loopback
+// listener after Wails provides the runtime context.
+func NewManager(assetFS fs.FS, app *appcore.App, ai *aiservice.Service) (*Manager, error) {
+	token, err := newBridgeToken()
+	if err != nil {
+		return nil, fmt.Errorf("create detached-window token failed: %w", err)
+	}
+	shared, err := webserver.NewSharedRuntime(assetFS, app, ai, webserver.SharedRuntimeOptions{
+		RuntimeBridgePath:   RuntimePath,
+		RuntimeBridgeScript: detachedRuntimeBridgeScript(),
+	})
+	if err != nil {
+		return nil, err
+	}
+	executable, err := os.Executable()
+	if err != nil {
+		return nil, fmt.Errorf("resolve executable failed: %w", err)
+	}
+	return &Manager{
+		shared:      shared,
+		token:       token,
+		windows:     make(map[string]*windowEntry),
+		starter:     execProcessStarter{},
+		executable:  executable,
+		openTimeout: defaultOpenReadyTimeout,
+		emitToWails: func(ctx context.Context, name string, args ...any) {
+			wailsRuntime.EventsEmit(ctx, name, args...)
+		},
+	}, nil
+}
+
+func newBridgeToken() (string, error) {
+	payload := make([]byte, 32)
+	if _, err := rand.Read(payload); err != nil {
+		return "", err
+	}
+	return base64.RawURLEncoding.EncodeToString(payload), nil
+}
+
+// InitializeLifecycle starts the loopback bridge and attaches the main Wails
+// runtime. Call it before initialising App and AI lifecycle contexts.
+func InitializeLifecycle(manager *Manager, ctx context.Context) error {
+	if manager == nil {
+		return fmt.Errorf("native window manager is unavailable")
+	}
+	return manager.initialize(ctx)
+}
+
+// WithLifecycleContext makes App/AI events fan out to both the main Wails
+// window and every detached child. It does not rerun either backend lifecycle.
+func WithLifecycleContext(manager *Manager, ctx context.Context) context.Context {
+	if manager == nil {
+		return ctx
+	}
+	return uievents.WithEmitter(ctx, managerEventEmitter{manager: manager})
+}
+
+type managerEventEmitter struct {
+	manager *Manager
+}
+
+func (e managerEventEmitter) Emit(name string, args ...any) {
+	e.manager.emit(name, args...)
+}
+
+// ShutdownLifecycle closes child processes and the private loopback server.
+func ShutdownLifecycle(manager *Manager) {
+	if manager != nil {
+		manager.shutdown()
+	}
+}
+
+func (m *Manager) initialize(ctx context.Context) error {
+	listener, err := net.Listen("tcp4", "127.0.0.1:0")
+	if err != nil {
+		return fmt.Errorf("start detached-window bridge failed: %w", err)
+	}
+
+	m.mu.Lock()
+	if m.started {
+		m.mu.Unlock()
+		_ = listener.Close()
+		return nil
+	}
+	m.runtimeCtx = ctx
+	m.listener = listener
+	m.endpoint = "http://" + listener.Addr().String()
+	m.started = true
+	httpServer := &http.Server{
+		Handler:           m.authenticatedHandler(),
+		ReadHeaderTimeout: 10 * time.Second,
+	}
+	m.httpServer = httpServer
+	m.mu.Unlock()
+
+	go func() {
+		_ = httpServer.Serve(listener)
+	}()
+	return nil
+}
+
+// emit retains normal main-window delivery and also copies backend events to
+// the child-side Go SSE clients.
+func (m *Manager) emit(name string, args ...any) {
+	if m == nil || strings.TrimSpace(name) == "" {
+		return
+	}
+	m.mu.RLock()
+	ctx := m.runtimeCtx
+	emitToWails := m.emitToWails
+	shared := m.shared
+	m.mu.RUnlock()
+	if ctx != nil && emitToWails != nil {
+		emitToWails(ctx, name, args...)
+	}
+	if shared != nil {
+		shared.Emit(name, args...)
+	}
+}
+
+// Open launches one native Wails child process. Existing IDs are focused
+// instead of duplicated.
+func (m *Manager) Open(request OpenRequest) OperationResult {
+	return m.open(request, "")
+}
+
+func (m *Manager) open(request OpenRequest, ownerID string) OperationResult {
+	if m == nil {
+		return operationFailure("native window manager is unavailable")
+	}
+	request = normalizeOpenRequest(request)
+	request.ID = strings.TrimSpace(request.ID)
+	if request.ID == "" {
+		request.ID = uuid.NewString()
+	}
+	if err := validateOpenRequest(request); err != nil {
+		return operationFailure(err.Error())
+	}
+
+	m.mu.Lock()
+	if !m.started || m.closing || m.endpoint == "" {
+		m.mu.Unlock()
+		return operationFailure("native window manager is not running")
+	}
+	if _, exists := m.windows[request.ID]; exists {
+		m.mu.Unlock()
+		result := m.Focus(request.ID)
+		result.ID = request.ID
+		return result
+	}
+	entry := &windowEntry{
+		info: WindowInfo{
+			ID:       request.ID,
+			Kind:     request.Kind,
+			Title:    request.Title,
+			X:        request.X,
+			Y:        request.Y,
+			Width:    request.Width,
+			Height:   request.Height,
+			OpenedAt: time.Now().UnixMilli(),
+		},
+		payload: request.Payload,
+		ownerID: strings.TrimSpace(ownerID),
+		ready:   make(chan struct{}),
+		done:    make(chan processExit, 1),
+	}
+	m.windows[request.ID] = entry
+	spec := m.processSpecLocked(request)
+	starter := m.starter
+	m.mu.Unlock()
+
+	process, err := starter.Start(spec)
+	if err != nil {
+		m.mu.Lock()
+		delete(m.windows, request.ID)
+		m.mu.Unlock()
+		return operationFailure(fmt.Sprintf("open native window failed: %v", err))
+	}
+
+	m.mu.Lock()
+	current, exists := m.windows[request.ID]
+	if !exists {
+		m.mu.Unlock()
+		_ = process.Kill()
+		return operationFailure("native window was closed while starting")
+	}
+	current.process = process
+	current.info.PID = process.PID()
+	m.mu.Unlock()
+
+	go m.watchProcess(request.ID, process)
+	timeout := m.openTimeout
+	if timeout <= 0 {
+		timeout = defaultOpenReadyTimeout
+	}
+	timer := time.NewTimer(timeout)
+	defer timer.Stop()
+	select {
+	case <-entry.ready:
+		m.mu.Lock()
+		current, active := m.windows[request.ID]
+		if active && current == entry {
+			entry.acknowledged = true
+		}
+		m.mu.Unlock()
+		if !active {
+			return operationFailure("native window exited before it became ready")
+		}
+		return OperationResult{Success: true, ID: request.ID}
+	case exit := <-entry.done:
+		message := "native window exited before it became ready"
+		if exit.err != nil {
+			message = fmt.Sprintf("%s: %v", message, exit.err)
+		}
+		return operationFailure(message)
+	case <-timer.C:
+		m.mu.Lock()
+		current, active := m.windows[request.ID]
+		if active && current == entry {
+			delete(m.windows, request.ID)
+		}
+		m.mu.Unlock()
+		if active {
+			_ = process.Kill()
+		}
+		return operationFailure("native window did not become ready in time")
+	}
+}
+
+// OpenResult is a convenience binding for the separately detachable result
+// surface.
+func (m *Manager) OpenResult(request OpenRequest) OperationResult {
+	if strings.TrimSpace(request.Kind) == "" {
+		request.Kind = "query-result"
+	}
+	return m.Open(request)
+}
+
+// Focus restores and raises an existing native child window.
+func (m *Manager) Focus(id string) OperationResult {
+	if m == nil {
+		return operationFailure("native window manager is unavailable")
+	}
+	id = strings.TrimSpace(id)
+	m.mu.RLock()
+	_, exists := m.windows[id]
+	shared := m.shared
+	m.mu.RUnlock()
+	if !exists {
+		return operationFailure("native window was not found")
+	}
+	shared.Emit(CommandEventName, childCommand{ID: id, Action: "focus"})
+	return OperationResult{Success: true, ID: id}
+}
+
+// Close requests a graceful child shutdown and force-kills it if the WebView is
+// no longer responsive.
+func (m *Manager) Close(id string) OperationResult {
+	if m == nil {
+		return operationFailure("native window manager is unavailable")
+	}
+	return m.requestClose(strings.TrimSpace(id), ExitReasonRequested)
+}
+
+func (m *Manager) requestClose(id string, reason string) OperationResult {
+	m.mu.Lock()
+	entry, exists := m.windows[id]
+	if !exists {
+		m.mu.Unlock()
+		return operationFailure("native window was not found")
+	}
+	childAlreadyClosing := entry.exitReason == ExitReasonAttached || entry.exitReason == ExitReasonWindowClosed
+	if entry.exitReason == "" {
+		entry.exitReason = reason
+	}
+	entry.info.CloseSent = true
+	process := entry.process
+	shared := m.shared
+	m.mu.Unlock()
+
+	// attach/close actions are emitted before their HTTP response is written.
+	// Do not race that response with a second close command: the child will quit
+	// itself after receiving the successful terminal-action response.
+	if !childAlreadyClosing {
+		shared.Emit(CommandEventName, childCommand{ID: id, Action: "close"})
+	}
+	if process != nil {
+		time.AfterFunc(forceCloseDelay, func() {
+			m.mu.RLock()
+			current, active := m.windows[id]
+			m.mu.RUnlock()
+			if active && current.process == process {
+				_ = process.Kill()
+			}
+		})
+	}
+	return OperationResult{Success: true, ID: id}
+}
+
+// CloseAll requests graceful shutdown of every detached child.
+func (m *Manager) CloseAll() OperationResult {
+	if m == nil {
+		return operationFailure("native window manager is unavailable")
+	}
+	m.mu.RLock()
+	ids := make([]string, 0, len(m.windows))
+	for id := range m.windows {
+		ids = append(ids, id)
+	}
+	m.mu.RUnlock()
+	for _, id := range ids {
+		m.requestClose(id, ExitReasonRequested)
+	}
+	return OperationResult{Success: true}
+}
+
+// List returns a snapshot of the current native child registry.
+func (m *Manager) List() []WindowInfo {
+	if m == nil {
+		return nil
+	}
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+	result := make([]WindowInfo, 0, len(m.windows))
+	for _, entry := range m.windows {
+		result = append(result, entry.info)
+	}
+	return result
+}
+
+func (m *Manager) processSpecLocked(request OpenRequest) processSpec {
+	env := append([]string(nil), os.Environ()...)
+	values := map[string]string{
+		envParentURL: m.endpoint,
+		envToken:     m.token,
+		envWindowID:  request.ID,
+		envKind:      request.Kind,
+		envTitle:     request.Title,
+		envX:         fmt.Sprintf("%d", request.X),
+		envY:         fmt.Sprintf("%d", request.Y),
+		envWidth:     fmt.Sprintf("%d", request.Width),
+		envHeight:    fmt.Sprintf("%d", request.Height),
+	}
+	for name, value := range values {
+		env = setEnvironmentValue(env, name, value)
+	}
+	return processSpec{Executable: m.executable, Env: env}
+}
+
+func setEnvironmentValue(environment []string, name string, value string) []string {
+	prefix := name + "="
+	filtered := environment[:0]
+	for _, item := range environment {
+		if !strings.HasPrefix(item, prefix) {
+			filtered = append(filtered, item)
+		}
+	}
+	return append(filtered, prefix+value)
+}
+
+func (m *Manager) watchProcess(id string, process childProcess) {
+	err := process.Wait()
+	m.mu.Lock()
+	entry, exists := m.windows[id]
+	if !exists || entry.process != process {
+		m.mu.Unlock()
+		return
+	}
+	delete(m.windows, id)
+	reason := entry.exitReason
+	if reason == "" {
+		if err != nil {
+			reason = ExitReasonProcessError
+		} else {
+			reason = ExitReasonWindowClosed
+		}
+	}
+	info := entry.info
+	ownerID := entry.ownerID
+	acknowledged := entry.acknowledged
+	entry.doneOnce.Do(func() {
+		if entry.done != nil {
+			entry.done <- processExit{err: err}
+			close(entry.done)
+		}
+	})
+	m.mu.Unlock()
+	if !acknowledged {
+		return
+	}
+
+	payload := map[string]any{
+		"reason": reason,
+		"exited": true,
+	}
+	if err != nil && reason == ExitReasonProcessError {
+		payload["error"] = err.Error()
+	}
+	m.emitDetached(Event{
+		ID:      info.ID,
+		Kind:    info.Kind,
+		Action:  "close",
+		Payload: withOwnerWindowID(payload, ownerID),
+	})
+}
+
+func (m *Manager) emitDetached(event Event) {
+	m.emit(MainEventName, event)
+}
+
+func operationFailure(message string) OperationResult {
+	return OperationResult{Success: false, Message: message}
+}
+
+func validateOpenRequest(request OpenRequest) error {
+	if len(request.ID) > 256 || strings.ContainsAny(request.ID, "\r\n\x00") {
+		return fmt.Errorf("native window id is invalid")
+	}
+	if strings.ContainsRune(request.Kind, '\x00') || strings.ContainsRune(request.Title, '\x00') {
+		return fmt.Errorf("native window kind or title is invalid")
+	}
+	if request.Kind != "workbench" && request.Kind != "query-result" {
+		return fmt.Errorf("native window kind is unsupported")
+	}
+	return nil
+}
+
+func (m *Manager) shutdown() {
+	m.mu.Lock()
+	if m.closing {
+		m.mu.Unlock()
+		return
+	}
+	m.closing = true
+	processes := make([]childProcess, 0, len(m.windows))
+	for _, entry := range m.windows {
+		entry.exitReason = ExitReasonParentShutdown
+		if entry.process != nil {
+			processes = append(processes, entry.process)
+		}
+	}
+	httpServer := m.httpServer
+	m.mu.Unlock()
+
+	for _, process := range processes {
+		_ = process.Kill()
+	}
+	if httpServer != nil {
+		ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
+		_ = httpServer.Shutdown(ctx)
+		cancel()
+	}
+}
+
+func (m *Manager) authenticatedHandler() http.Handler {
+	mux := http.NewServeMux()
+	mux.HandleFunc(BootstrapPath, m.handleBootstrap)
+	mux.HandleFunc(ActionPath, m.handleAction)
+	mux.HandleFunc(ControlPath, m.handleControl)
+	mux.Handle("/", m.shared.Handler())
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if !isLoopbackRemote(r.RemoteAddr) {
+			http.Error(w, "forbidden", http.StatusForbidden)
+			return
+		}
+		token := r.Header.Get(HeaderToken)
+		if subtle.ConstantTimeCompare([]byte(token), []byte(m.token)) != 1 {
+			http.Error(w, "unauthorized", http.StatusUnauthorized)
+			return
+		}
+		id := strings.TrimSpace(r.Header.Get(HeaderWindowID))
+		m.mu.RLock()
+		_, exists := m.windows[id]
+		m.mu.RUnlock()
+		if id == "" || !exists {
+			http.Error(w, "unknown detached window", http.StatusForbidden)
+			return
+		}
+		mux.ServeHTTP(w, r)
+	})
+}
+
+func isLoopbackRemote(remoteAddr string) bool {
+	host, _, err := net.SplitHostPort(strings.TrimSpace(remoteAddr))
+	if err != nil {
+		return false
+	}
+	ip := net.ParseIP(host)
+	return ip != nil && ip.IsLoopback()
+}
+
+func (m *Manager) handleBootstrap(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+	id := strings.TrimSpace(r.Header.Get(HeaderWindowID))
+	m.mu.Lock()
+	entry, exists := m.windows[id]
+	if !exists {
+		m.mu.Unlock()
+		http.Error(w, "unknown detached window", http.StatusNotFound)
+		return
+	}
+	bootstrap := Bootstrap{ID: entry.info.ID, Kind: entry.info.Kind, Title: entry.info.Title, Payload: entry.payload}
+	m.mu.Unlock()
+
+	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+	_ = json.NewEncoder(w).Encode(bootstrap)
+}
+
+func (m *Manager) handleAction(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+	defer r.Body.Close()
+	var request actionRequest
+	decoder := json.NewDecoder(http.MaxBytesReader(w, r.Body, maxDetachedJSONBytes))
+	if err := decoder.Decode(&request); err != nil {
+		http.Error(w, "invalid detached action", http.StatusBadRequest)
+		return
+	}
+	request.Action = strings.ToLower(strings.TrimSpace(request.Action))
+	switch request.Action {
+	case "ready", "sync", "attach", "close":
+	default:
+		http.Error(w, "unsupported detached action", http.StatusBadRequest)
+		return
+	}
+
+	id := strings.TrimSpace(r.Header.Get(HeaderWindowID))
+	m.mu.Lock()
+	entry, exists := m.windows[id]
+	if !exists {
+		m.mu.Unlock()
+		http.Error(w, "unknown detached window", http.StatusNotFound)
+		return
+	}
+	if request.Action == "ready" {
+		entry.info.Ready = true
+		entry.readyOnce.Do(func() {
+			if entry.ready != nil {
+				close(entry.ready)
+			}
+		})
+	} else if request.Action == "attach" {
+		entry.exitReason = ExitReasonAttached
+	} else if request.Action == "close" && entry.exitReason == "" {
+		entry.exitReason = ExitReasonWindowClosed
+	}
+	info := entry.info
+	ownerID := entry.ownerID
+	m.mu.Unlock()
+
+	if request.Action != "ready" {
+		m.emitDetached(Event{
+			ID:      info.ID,
+			Kind:    info.Kind,
+			Action:  request.Action,
+			Payload: withOwnerWindowID(request.Payload, ownerID),
+		})
+	}
+	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+	_ = json.NewEncoder(w).Encode(OperationResult{Success: true, ID: id})
+}
+
+func (m *Manager) handleControl(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+	defer r.Body.Close()
+
+	var request controlRequest
+	decoder := json.NewDecoder(http.MaxBytesReader(w, r.Body, maxDetachedJSONBytes))
+	if err := decoder.Decode(&request); err != nil {
+		http.Error(w, "invalid detached control request", http.StatusBadRequest)
+		return
+	}
+	request.Action = strings.ToLower(strings.TrimSpace(request.Action))
+	ownerID := strings.TrimSpace(r.Header.Get(HeaderWindowID))
+
+	var result OperationResult
+	switch request.Action {
+	case "open":
+		if targetID := strings.TrimSpace(request.Request.ID); targetID != "" && !m.canOpenOwned(targetID, ownerID) {
+			result = operationFailure("native window id belongs to another owner")
+			break
+		}
+		result = m.open(request.Request, ownerID)
+		if result.Success {
+			m.emitDetached(Event{
+				ID:     result.ID,
+				Kind:   normalizeOpenRequest(request.Request).Kind,
+				Action: "opened",
+				Payload: withOwnerWindowID(
+					openEventPayload(request.Request.Payload),
+					ownerID,
+				),
+			})
+		}
+	case "focus":
+		if !m.ownsWindow(request.ID, ownerID) {
+			result = operationFailure("native window is not owned by this window")
+			break
+		}
+		result = m.Focus(request.ID)
+	case "close":
+		if !m.ownsWindow(request.ID, ownerID) {
+			result = operationFailure("native window is not owned by this window")
+			break
+		}
+		result = m.Close(request.ID)
+	case "close-owned":
+		result = m.closeOwned(ownerID)
+	default:
+		http.Error(w, "unsupported detached control action", http.StatusBadRequest)
+		return
+	}
+
+	status := http.StatusOK
+	if !result.Success {
+		status = http.StatusBadRequest
+	}
+	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+	w.WriteHeader(status)
+	_ = json.NewEncoder(w).Encode(result)
+}
+
+func openEventPayload(payload any) any {
+	source, ok := payload.(map[string]any)
+	if !ok {
+		return nil
+	}
+	result := make(map[string]any, 2)
+	for _, key := range []string{"tab", "resultWindow"} {
+		if value, exists := source[key]; exists {
+			result[key] = value
+		}
+	}
+	return result
+}
+
+func (m *Manager) canOpenOwned(id string, ownerID string) bool {
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+	entry, exists := m.windows[strings.TrimSpace(id)]
+	return !exists || entry.ownerID == strings.TrimSpace(ownerID)
+}
+
+func (m *Manager) ownsWindow(id string, ownerID string) bool {
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+	entry, exists := m.windows[strings.TrimSpace(id)]
+	return exists && entry.ownerID == strings.TrimSpace(ownerID)
+}
+
+func (m *Manager) closeOwned(ownerID string) OperationResult {
+	ownerID = strings.TrimSpace(ownerID)
+	if ownerID == "" {
+		return operationFailure("native owner window is required")
+	}
+	m.mu.RLock()
+	ids := make([]string, 0)
+	for id, entry := range m.windows {
+		if entry.ownerID == ownerID {
+			ids = append(ids, id)
+		}
+	}
+	m.mu.RUnlock()
+	for _, id := range ids {
+		m.requestClose(id, ExitReasonRequested)
+	}
+	return OperationResult{Success: true}
+}
+
+func withOwnerWindowID(payload any, ownerID string) any {
+	ownerID = strings.TrimSpace(ownerID)
+	if ownerID == "" {
+		return payload
+	}
+	result := make(map[string]any)
+	if source, ok := payload.(map[string]any); ok {
+		for key, value := range source {
+			result[key] = value
+		}
+	} else if payload != nil {
+		result["value"] = payload
+	}
+	result["ownerWindowId"] = ownerID
+	return result
+}
diff --git a/internal/nativewindow/manager_test.go b/internal/nativewindow/manager_test.go
new file mode 100644
index 00000000..e432214a
--- /dev/null
+++ b/internal/nativewindow/manager_test.go
@@ -0,0 +1,486 @@
+package nativewindow
+
+import (
+	"context"
+	"errors"
+	"io/fs"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"sync"
+	"testing"
+	"testing/fstest"
+	"time"
+
+	aiservice "GoNavi-Wails/internal/ai/service"
+	appcore "GoNavi-Wails/internal/app"
+)
+
+type fakeProcessStarter struct {
+	mu        sync.Mutex
+	nextPID   int
+	specs     []processSpec
+	processes []*fakeChildProcess
+	onStart   func(processSpec, *fakeChildProcess)
+}
+
+func (s *fakeProcessStarter) Start(spec processSpec) (childProcess, error) {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	s.nextPID++
+	process := &fakeChildProcess{pid: s.nextPID, done: make(chan error, 1), killed: make(chan struct{})}
+	s.specs = append(s.specs, spec)
+	s.processes = append(s.processes, process)
+	onStart := s.onStart
+	if onStart != nil {
+		go onStart(spec, process)
+	}
+	return process, nil
+}
+
+type fakeChildProcess struct {
+	pid      int
+	done     chan error
+	killed   chan struct{}
+	killOnce sync.Once
+}
+
+func (p *fakeChildProcess) PID() int { return p.pid }
+func (p *fakeChildProcess) Wait() error {
+	return <-p.done
+}
+func (p *fakeChildProcess) Kill() error {
+	p.killOnce.Do(func() {
+		close(p.killed)
+		p.done <- errors.New("killed")
+	})
+	return nil
+}
+func (p *fakeChildProcess) finish(err error) {
+	p.killOnce.Do(func() { p.done <- err })
+}
+
+func TestParseChildOptionsPreservesNegativeVirtualDesktopCoordinates(t *testing.T) {
+	t.Setenv(envParentURL, "")
+	t.Setenv(envToken, "")
+	t.Setenv(envWindowID, "")
+
+	options, err := ParseChildOptions([]string{
+		"--parent-url=http://127.0.0.1:43119",
+		"--token=test-token",
+		"--id=window-1",
+		"--x=-2560",
+		"--y=-180",
+		"--width=1400",
+		"--height=900",
+	})
+	if err != nil {
+		t.Fatalf("ParseChildOptions returned error: %v", err)
+	}
+	if options.X != -2560 || options.Y != -180 {
+		t.Fatalf("virtual desktop coordinates were clamped: x=%d y=%d", options.X, options.Y)
+	}
+	if options.Width != 1400 || options.Height != 900 {
+		t.Fatalf("unexpected child size: %dx%d", options.Width, options.Height)
+	}
+}
+
+func TestManagerOpenGeneratesUniqueIDsAndRegistersMultipleWindows(t *testing.T) {
+	starter := &fakeProcessStarter{nextPID: 100}
+	manager := &Manager{
+		token:       "test-token",
+		endpoint:    "http://127.0.0.1:43119",
+		started:     true,
+		windows:     make(map[string]*windowEntry),
+		starter:     starter,
+		executable:  "/tmp/GoNavi",
+		openTimeout: time.Second,
+	}
+	starter.onStart = func(spec processSpec, _ *fakeChildProcess) {
+		id := environmentValue(spec.Env, envWindowID)
+		manager.mu.Lock()
+		entry := manager.windows[id]
+		if entry != nil {
+			entry.info.Ready = true
+			entry.readyOnce.Do(func() { close(entry.ready) })
+		}
+		manager.mu.Unlock()
+	}
+
+	first := manager.Open(OpenRequest{Kind: "workbench", X: -1920, Y: 40, Width: 1100, Height: 760})
+	second := manager.Open(OpenRequest{Kind: "query-result", X: 1720, Y: -20, Width: 900, Height: 680})
+	if !first.Success || !second.Success {
+		t.Fatalf("Open results = %#v %#v", first, second)
+	}
+	if first.ID == "" || second.ID == "" || first.ID == second.ID {
+		t.Fatalf("expected unique generated IDs, got %q and %q", first.ID, second.ID)
+	}
+	if windows := manager.List(); len(windows) != 2 {
+		t.Fatalf("registry size = %d, want 2", len(windows))
+	}
+
+	starter.mu.Lock()
+	firstSpec := starter.specs[0]
+	processes := append([]*fakeChildProcess(nil), starter.processes...)
+	starter.mu.Unlock()
+	if value := environmentValue(firstSpec.Env, envX); value != "-1920" {
+		t.Fatalf("child x environment = %q, want -1920", value)
+	}
+	if value := environmentValue(firstSpec.Env, envY); value != "40" {
+		t.Fatalf("child y environment = %q, want 40", value)
+	}
+	for _, process := range processes {
+		process.finish(nil)
+	}
+	waitForRegistrySize(t, manager, 0)
+}
+
+func TestAuthenticatedHandlerRequiresLoopbackTokenAndRegisteredWindow(t *testing.T) {
+	manager := newHTTPTestManager(t)
+	manager.windows["window-1"] = &windowEntry{
+		info:    WindowInfo{ID: "window-1", Kind: "query-result", Title: "Result"},
+		payload: map[string]any{"value": "shared"},
+		ready:   make(chan struct{}),
+	}
+	handler := manager.authenticatedHandler()
+
+	missingToken := httptest.NewRequest(http.MethodGet, BootstrapPath, nil)
+	missingToken.RemoteAddr = "127.0.0.1:51001"
+	missingToken.Header.Set(HeaderWindowID, "window-1")
+	missingRecorder := httptest.NewRecorder()
+	handler.ServeHTTP(missingRecorder, missingToken)
+	if missingRecorder.Code != http.StatusUnauthorized {
+		t.Fatalf("missing-token status = %d, want 401", missingRecorder.Code)
+	}
+
+	remoteRequest := httptest.NewRequest(http.MethodGet, BootstrapPath, nil)
+	remoteRequest.RemoteAddr = "192.0.2.10:51002"
+	remoteRequest.Header.Set(HeaderToken, manager.token)
+	remoteRequest.Header.Set(HeaderWindowID, "window-1")
+	remoteRecorder := httptest.NewRecorder()
+	handler.ServeHTTP(remoteRecorder, remoteRequest)
+	if remoteRecorder.Code != http.StatusForbidden {
+		t.Fatalf("non-loopback status = %d, want 403", remoteRecorder.Code)
+	}
+
+	unknownRequest := authenticatedRequest(manager, http.MethodGet, BootstrapPath, "window-2", nil)
+	unknownRecorder := httptest.NewRecorder()
+	handler.ServeHTTP(unknownRecorder, unknownRequest)
+	if unknownRecorder.Code != http.StatusForbidden {
+		t.Fatalf("unknown-window status = %d, want 403", unknownRecorder.Code)
+	}
+
+	validRequest := authenticatedRequest(manager, http.MethodGet, BootstrapPath, "window-1", nil)
+	validRecorder := httptest.NewRecorder()
+	handler.ServeHTTP(validRecorder, validRequest)
+	if validRecorder.Code != http.StatusOK {
+		t.Fatalf("valid bootstrap status = %d body=%s", validRecorder.Code, validRecorder.Body.String())
+	}
+	if !strings.Contains(validRecorder.Body.String(), `"id":"window-1"`) || !strings.Contains(validRecorder.Body.String(), `"value":"shared"`) {
+		t.Fatalf("unexpected bootstrap body: %s", validRecorder.Body.String())
+	}
+	select {
+	case <-manager.windows["window-1"].ready:
+		t.Fatal("bootstrap read acknowledged the window before frontend mount")
+	default:
+	}
+
+	readyBody := strings.NewReader(`{"action":"ready","payload":{"id":"window-1","kind":"query-result"}}`)
+	readyRequest := authenticatedRequest(manager, http.MethodPost, ActionPath, "window-1", readyBody)
+	readyRecorder := httptest.NewRecorder()
+	handler.ServeHTTP(readyRecorder, readyRequest)
+	if readyRecorder.Code != http.StatusOK {
+		t.Fatalf("ready status = %d body=%s", readyRecorder.Code, readyRecorder.Body.String())
+	}
+	select {
+	case <-manager.windows["window-1"].ready:
+	case <-time.After(time.Second):
+		t.Fatal("ready action did not acknowledge the native window")
+	}
+}
+
+func TestChildControlOpensAndRoutesAnOwnedNativeWindow(t *testing.T) {
+	manager := newHTTPTestManager(t)
+	manager.started = true
+	manager.endpoint = "http://127.0.0.1:43119"
+	manager.executable = "/tmp/GoNavi"
+	manager.openTimeout = time.Second
+	manager.windows["workbench:query-a"] = &windowEntry{
+		info: WindowInfo{ID: "workbench:query-a", Kind: "workbench", Title: "SQL"},
+	}
+
+	starter := &fakeProcessStarter{nextPID: 500}
+	manager.starter = starter
+	starter.onStart = func(spec processSpec, _ *fakeChildProcess) {
+		id := environmentValue(spec.Env, envWindowID)
+		manager.mu.Lock()
+		entry := manager.windows[id]
+		if entry != nil {
+			entry.info.Ready = true
+			entry.readyOnce.Do(func() { close(entry.ready) })
+		}
+		manager.mu.Unlock()
+	}
+
+	events := make(chan Event, 4)
+	manager.runtimeCtx = context.Background()
+	manager.emitToWails = func(_ context.Context, name string, args ...any) {
+		if name == MainEventName && len(args) == 1 {
+			events <- args[0].(Event)
+		}
+	}
+
+	body := strings.NewReader(`{
+        "action":"open",
+        "request":{
+          "id":"query-result:query-a:r1",
+          "kind":"query-result",
+          "title":"Result 1",
+          "x":2100,
+          "y":-120,
+          "width":900,
+          "height":620,
+          "payload":{
+            "storeState":{},
+            "resultWindow":{"id":"query-result:query-a:r1","sourceQueryTabId":"query-a"}
+          }
+        }
+      }`)
+	request := authenticatedRequest(manager, http.MethodPost, ControlPath, "workbench:query-a", body)
+	recorder := httptest.NewRecorder()
+	manager.authenticatedHandler().ServeHTTP(recorder, request)
+	if recorder.Code != http.StatusOK {
+		t.Fatalf("owned open status = %d body=%s", recorder.Code, recorder.Body.String())
+	}
+
+	manager.mu.RLock()
+	ownedEntry := manager.windows["query-result:query-a:r1"]
+	manager.mu.RUnlock()
+	if ownedEntry == nil || ownedEntry.ownerID != "workbench:query-a" {
+		t.Fatalf("owned entry = %#v, want owner workbench:query-a", ownedEntry)
+	}
+	opened := receiveEvent(t, events)
+	if opened.ID != "query-result:query-a:r1" || opened.Action != "opened" {
+		t.Fatalf("unexpected opened event: %#v", opened)
+	}
+	payload, ok := opened.Payload.(map[string]any)
+	if !ok || payload["ownerWindowId"] != "workbench:query-a" {
+		t.Fatalf("opened event owner metadata = %#v", opened.Payload)
+	}
+
+	manager.windows["foreign-window"] = &windowEntry{
+		info:    WindowInfo{ID: "foreign-window", Kind: "query-result"},
+		ownerID: "workbench:query-b",
+	}
+	foreignBody := strings.NewReader(`{"action":"close","id":"foreign-window"}`)
+	foreignRequest := authenticatedRequest(manager, http.MethodPost, ControlPath, "workbench:query-a", foreignBody)
+	foreignRecorder := httptest.NewRecorder()
+	manager.authenticatedHandler().ServeHTTP(foreignRecorder, foreignRequest)
+	if foreignRecorder.Code != http.StatusBadRequest {
+		t.Fatalf("foreign close status = %d, want 400", foreignRecorder.Code)
+	}
+
+	starter.mu.Lock()
+	process := starter.processes[0]
+	starter.mu.Unlock()
+	process.finish(nil)
+	waitForRegistrySize(t, manager, 2)
+}
+
+func TestActionAndProcessExitEmitStableMainEventPayload(t *testing.T) {
+	manager := newHTTPTestManager(t)
+	events := make(chan Event, 4)
+	manager.runtimeCtx = context.Background()
+	manager.emitToWails = func(_ context.Context, name string, args ...any) {
+		if name == MainEventName && len(args) == 1 {
+			if event, ok := args[0].(Event); ok {
+				events <- event
+			}
+		}
+	}
+	process := &fakeChildProcess{pid: 42, done: make(chan error, 1), killed: make(chan struct{})}
+	manager.windows["window-1"] = &windowEntry{
+		info:         WindowInfo{ID: "window-1", Kind: "workbench", Title: "SQL"},
+		ownerID:      "workbench:source",
+		process:      process,
+		acknowledged: true,
+	}
+
+	actionBody := strings.NewReader(`{"action":"sync","payload":{"id":"window-1","storeState":{"activeTab":"sql"}}}`)
+	actionRequest := authenticatedRequest(manager, http.MethodPost, ActionPath, "window-1", actionBody)
+	actionRecorder := httptest.NewRecorder()
+	manager.authenticatedHandler().ServeHTTP(actionRecorder, actionRequest)
+	if actionRecorder.Code != http.StatusOK {
+		t.Fatalf("action status = %d body=%s", actionRecorder.Code, actionRecorder.Body.String())
+	}
+	syncEvent := receiveEvent(t, events)
+	if syncEvent.ID != "window-1" || syncEvent.Kind != "workbench" || syncEvent.Action != "sync" {
+		t.Fatalf("unexpected sync event: %#v", syncEvent)
+	}
+	if payload, ok := syncEvent.Payload.(map[string]any); !ok || payload["ownerWindowId"] != "workbench:source" {
+		t.Fatalf("sync event is missing owner metadata: %#v", syncEvent.Payload)
+	}
+
+	go manager.watchProcess("window-1", process)
+	process.finish(errors.New("exit status 9"))
+	exitEvent := receiveEvent(t, events)
+	if exitEvent.ID != "window-1" || exitEvent.Action != "close" {
+		t.Fatalf("unexpected exit event: %#v", exitEvent)
+	}
+	payload, ok := exitEvent.Payload.(map[string]any)
+	if !ok || payload["reason"] != ExitReasonProcessError || payload["exited"] != true {
+		t.Fatalf("unexpected exit payload: %#v", exitEvent.Payload)
+	}
+	if payload["ownerWindowId"] != "workbench:source" {
+		t.Fatalf("exit event is missing owner metadata: %#v", exitEvent.Payload)
+	}
+}
+
+func TestRequestedCloseReasonSurvivesForcedProcessExit(t *testing.T) {
+	manager := newHTTPTestManager(t)
+	events := make(chan Event, 2)
+	manager.runtimeCtx = context.Background()
+	manager.emitToWails = func(_ context.Context, name string, args ...any) {
+		if name == MainEventName && len(args) == 1 {
+			events <- args[0].(Event)
+		}
+	}
+	process := &fakeChildProcess{pid: 43, done: make(chan error, 1), killed: make(chan struct{})}
+	manager.windows["window-2"] = &windowEntry{
+		info:         WindowInfo{ID: "window-2", Kind: "query-result"},
+		process:      process,
+		exitReason:   ExitReasonRequested,
+		acknowledged: true,
+	}
+	go manager.watchProcess("window-2", process)
+	process.finish(errors.New("signal: killed"))
+	event := receiveEvent(t, events)
+	payload := event.Payload.(map[string]any)
+	if payload["reason"] != ExitReasonRequested {
+		t.Fatalf("exit reason = %#v, want %q", payload["reason"], ExitReasonRequested)
+	}
+}
+
+func TestManagerOpenFailureBeforeBootstrapKeepsWindowUnacknowledged(t *testing.T) {
+	starter := &fakeProcessStarter{nextPID: 200}
+	manager := &Manager{
+		token:       "test-token",
+		endpoint:    "http://127.0.0.1:43119",
+		started:     true,
+		windows:     make(map[string]*windowEntry),
+		starter:     starter,
+		executable:  "/tmp/GoNavi",
+		openTimeout: 25 * time.Millisecond,
+	}
+
+	result := manager.Open(OpenRequest{ID: "never-ready", Kind: "workbench"})
+	if result.Success || !strings.Contains(result.Message, "did not become ready") {
+		t.Fatalf("Open result = %#v, want readiness failure", result)
+	}
+	if len(manager.List()) != 0 {
+		t.Fatalf("timed-out child remained registered: %#v", manager.List())
+	}
+	starter.mu.Lock()
+	process := starter.processes[0]
+	starter.mu.Unlock()
+	select {
+	case <-process.killed:
+	case <-time.After(time.Second):
+		t.Fatal("timed-out child was not killed")
+	}
+}
+
+func TestManagerOpenReportsChildExitBeforeBootstrapWithoutClosingMainTab(t *testing.T) {
+	starter := &fakeProcessStarter{nextPID: 300}
+	manager := &Manager{
+		token:       "test-token",
+		endpoint:    "http://127.0.0.1:43119",
+		started:     true,
+		windows:     make(map[string]*windowEntry),
+		starter:     starter,
+		executable:  "/tmp/GoNavi",
+		openTimeout: time.Second,
+	}
+	events := make(chan Event, 1)
+	manager.runtimeCtx = context.Background()
+	manager.emitToWails = func(_ context.Context, name string, args ...any) {
+		if name == MainEventName {
+			events <- args[0].(Event)
+		}
+	}
+	starter.onStart = func(_ processSpec, process *fakeChildProcess) {
+		process.finish(errors.New("child startup failed"))
+	}
+
+	result := manager.Open(OpenRequest{ID: "startup-failure", Kind: "workbench"})
+	if result.Success || !strings.Contains(result.Message, "child startup failed") {
+		t.Fatalf("Open result = %#v, want child startup failure", result)
+	}
+	if len(manager.List()) != 0 {
+		t.Fatalf("failed child remained registered: %#v", manager.List())
+	}
+	select {
+	case event := <-events:
+		t.Fatalf("unacknowledged child emitted a main close event: %#v", event)
+	case <-time.After(25 * time.Millisecond):
+	}
+}
+
+func newHTTPTestManager(t *testing.T) *Manager {
+	t.Helper()
+	assets := fstest.MapFS{
+		"frontend/dist/index.html": &fstest.MapFile{Data: []byte("<html><head></head><body></body></html>")},
+	}
+	manager, err := NewManager(fs.FS(assets), appcore.NewWebApp(), aiservice.NewService())
+	if err != nil {
+		t.Fatalf("NewManager returned error: %v", err)
+	}
+	return manager
+}
+
+func authenticatedRequest(manager *Manager, method string, target string, id string, body *strings.Reader) *http.Request {
+	var request *http.Request
+	if body == nil {
+		request = httptest.NewRequest(method, target, nil)
+	} else {
+		request = httptest.NewRequest(method, target, body)
+	}
+	request.RemoteAddr = "127.0.0.1:51003"
+	request.Header.Set(HeaderToken, manager.token)
+	request.Header.Set(HeaderWindowID, id)
+	request.Header.Set("Content-Type", "application/json")
+	return request
+}
+
+func environmentValue(environment []string, name string) string {
+	prefix := name + "="
+	for _, item := range environment {
+		if strings.HasPrefix(item, prefix) {
+			return strings.TrimPrefix(item, prefix)
+		}
+	}
+	return ""
+}
+
+func waitForRegistrySize(t *testing.T, manager *Manager, size int) {
+	t.Helper()
+	deadline := time.Now().Add(2 * time.Second)
+	for time.Now().Before(deadline) {
+		if len(manager.List()) == size {
+			return
+		}
+		time.Sleep(5 * time.Millisecond)
+	}
+	t.Fatalf("registry size = %d, want %d", len(manager.List()), size)
+}
+
+func receiveEvent(t *testing.T, events <-chan Event) Event {
+	t.Helper()
+	select {
+	case event := <-events:
+		return event
+	case <-time.After(2 * time.Second):
+		t.Fatal("timed out waiting for detached event")
+		return Event{}
+	}
+}
diff --git a/internal/nativewindow/process.go b/internal/nativewindow/process.go
new file mode 100644
index 00000000..3dd38e65
--- /dev/null
+++ b/internal/nativewindow/process.go
@@ -0,0 +1,59 @@
+package nativewindow
+
+import (
+	"os"
+	"os/exec"
+)
+
+type processSpec struct {
+	Executable string
+	Env        []string
+}
+
+type childProcess interface {
+	PID() int
+	Wait() error
+	Kill() error
+}
+
+type processStarter interface {
+	Start(processSpec) (childProcess, error)
+}
+
+type execProcessStarter struct{}
+
+func (execProcessStarter) Start(spec processSpec) (childProcess, error) {
+	command := exec.Command(spec.Executable, DetachedWindowArgument)
+	command.Env = spec.Env
+	command.Stdout = os.Stdout
+	command.Stderr = os.Stderr
+	if err := command.Start(); err != nil {
+		return nil, err
+	}
+	return &execChildProcess{command: command}, nil
+}
+
+type execChildProcess struct {
+	command *exec.Cmd
+}
+
+func (p *execChildProcess) PID() int {
+	if p == nil || p.command == nil || p.command.Process == nil {
+		return 0
+	}
+	return p.command.Process.Pid
+}
+
+func (p *execChildProcess) Wait() error {
+	if p == nil || p.command == nil {
+		return nil
+	}
+	return p.command.Wait()
+}
+
+func (p *execChildProcess) Kill() error {
+	if p == nil || p.command == nil || p.command.Process == nil {
+		return nil
+	}
+	return p.command.Process.Kill()
+}
diff --git a/internal/nativewindow/runtime_script.go b/internal/nativewindow/runtime_script.go
new file mode 100644
index 00000000..3eb2729c
--- /dev/null
+++ b/internal/nativewindow/runtime_script.go
@@ -0,0 +1,110 @@
+package nativewindow
+
+func detachedRuntimeBridgeScript() string {
+	return `(function () {
+  if (typeof window === 'undefined') return;
+
+  var existingGo = window.go || {};
+  var nativeNamespace = existingGo.nativewindow || {};
+  var bridge = nativeNamespace.Bridge;
+  var control = nativeNamespace.Control;
+  if (
+    !bridge
+    || typeof bridge.Invoke !== 'function'
+    || typeof bridge.WindowID !== 'function'
+    || typeof bridge.OpenWindow !== 'function'
+    || typeof bridge.FocusWindow !== 'function'
+    || typeof bridge.CloseWindow !== 'function'
+    || typeof bridge.CloseOwnedWindows !== 'function'
+  ) {
+    console.error('[GoNavi Detached] native bridge is unavailable');
+    return;
+  }
+
+  var invoke = function (namespace, receiver, method, args) {
+    return bridge.Invoke(namespace, receiver, method, Array.isArray(args) ? args : []);
+  };
+  var buildServiceProxy = function (namespace, receiver) {
+    return new Proxy({}, {
+      get: function (_target, property) {
+        if (typeof property !== 'string') return undefined;
+        return function () {
+          return invoke(namespace, receiver, property, Array.prototype.slice.call(arguments));
+        };
+      }
+    });
+  };
+  var parentWindowManager = {
+    Open: function (request) {
+      return bridge.OpenWindow(request || {});
+    },
+    Focus: function (id) {
+      return bridge.FocusWindow(String(id || ''));
+    },
+    Close: function (id) {
+      return bridge.CloseWindow(String(id || ''));
+    },
+    CloseAll: function () {
+      return bridge.CloseOwnedWindows();
+    }
+  };
+  nativeNamespace = {
+    ...nativeNamespace,
+    Manager: parentWindowManager
+  };
+
+  window.go = {
+    ...existingGo,
+    nativewindow: nativeNamespace,
+    app: {
+      ...(existingGo.app || {}),
+      App: buildServiceProxy('app', 'App')
+    },
+    aiservice: {
+      ...(existingGo.aiservice || {}),
+      Service: buildServiceProxy('aiservice', 'Service')
+    }
+  };
+
+  var detached = {
+    active: true,
+    bootstrap: null,
+    bootstrapPromise: null,
+    loadBootstrap: function () {
+      if (!detached.bootstrapPromise) {
+        detached.bootstrapPromise = bridge.Bootstrap().then(function (payload) {
+          detached.bootstrap = payload;
+          return payload;
+        });
+      }
+      return detached.bootstrapPromise;
+    },
+    action: function (action, payload) {
+      return bridge.Action(String(action || ''), payload || {});
+    }
+  };
+  window.__GONAVI_DETACHED__ = detached;
+  window.__GONAVI_DETACHED_RUNTIME__ = {
+    buildType: 'desktop-detached',
+    capabilities: { nativeWindow: true, sharedBackend: true }
+  };
+
+  var detachedWindowIDPromise = Promise.resolve(bridge.WindowID()).then(function (windowID) {
+    return String(windowID || '');
+  });
+
+  var runtime = window.runtime || {};
+  if (typeof runtime.EventsOnMultiple === 'function') {
+    runtime.EventsOnMultiple('` + CommandEventName + `', function (command) {
+      detachedWindowIDPromise.then(function (windowID) {
+        if (!command || String(command.id || '') !== windowID) return;
+        if (command.action === 'close' && control && typeof control.Close === 'function') {
+          control.Close();
+        } else if (command.action === 'focus' && control && typeof control.Focus === 'function') {
+          control.Focus();
+        }
+      });
+    }, -1);
+  }
+})();`
+}
diff --git a/internal/nativewindow/runtime_script_test.go b/internal/nativewindow/runtime_script_test.go
new file mode 100644
index 00000000..a1990d50
--- /dev/null
+++ b/internal/nativewindow/runtime_script_test.go
@@ -0,0 +1,37 @@
+package nativewindow
+
+import (
+	"strings"
+	"testing"
+)
+
+func TestBridgeWindowIDUsesChildIdentity(t *testing.T) {
+	bridge := newBridge(ChildOptions{ID: "workbench:query-1"})
+	if got := bridge.WindowID(); got != "workbench:query-1" {
+		t.Fatalf("WindowID() = %q, want %q", got, "workbench:query-1")
+	}
+}
+
+func TestRuntimeCommandsDoNotReloadBootstrapForWindowIdentity(t *testing.T) {
+	script := detachedRuntimeBridgeScript()
+	if !strings.Contains(script, "bridge.WindowID()") {
+		t.Fatal("runtime bridge does not read the lightweight window identity")
+	}
+	if strings.Contains(script, "detached.loadBootstrap().then(function (bootstrap)") {
+		t.Fatal("runtime command routing still reloads the full bootstrap payload")
+	}
+}
+
+func TestRuntimeExposesParentWindowManagerInsideDetachedChildren(t *testing.T) {
+	script := detachedRuntimeBridgeScript()
+	for _, expected := range []string{
+		"Manager: parentWindowManager",
+		"bridge.OpenWindow(request || {})",
+		"bridge.FocusWindow",
+		"bridge.CloseWindow",
+	} {
+		if !strings.Contains(script, expected) {
+			t.Fatalf("runtime bridge is missing %q", expected)
+		}
+	}
+}
diff --git a/internal/nativewindow/types.go b/internal/nativewindow/types.go
new file mode 100644
index 00000000..8ec7f711
--- /dev/null
+++ b/internal/nativewindow/types.go
@@ -0,0 +1,125 @@
+package nativewindow
+
+import (
+	"strings"
+)
+
+const (
+	// DetachedWindowArgument selects the native detached-window child mode.
+	DetachedWindowArgument = "--detached-window"
+
+	HeaderToken    = "X-GoNavi-Detached-Token"
+	HeaderWindowID = "X-GoNavi-Detached-Window-ID"
+
+	BootstrapPath = "/__gonavi/detached/bootstrap"
+	ActionPath    = "/__gonavi/detached/action"
+	ControlPath   = "/__gonavi/detached/control"
+	RuntimePath   = "/__gonavi/detached-runtime.js"
+	InvokePath    = "/__gonavi/api/invoke"
+	EventsPath    = "/__gonavi/events"
+
+	MainEventName    = "gonavi:native-detached-event"
+	CommandEventName = "gonavi:native-detached-command"
+
+	ExitReasonRequested      = "requested"
+	ExitReasonWindowClosed   = "window-closed"
+	ExitReasonAttached       = "attached"
+	ExitReasonParentShutdown = "parent-shutdown"
+	ExitReasonProcessError   = "process-error"
+)
+
+const (
+	defaultWindowWidth  = 1080
+	defaultWindowHeight = 720
+	// Detached query results can be substantially larger than ordinary RPC
+	// payloads. Keep one shared ceiling for child actions and parent responses.
+	maxDetachedJSONBytes int64 = 512 << 20
+)
+
+// OpenRequest describes one independently movable native window. X and Y use
+// virtual-desktop coordinates and deliberately allow negative values.
+type OpenRequest struct {
+	ID      string `json:"id,omitempty"`
+	Kind    string `json:"kind"`
+	Title   string `json:"title"`
+	Payload any    `json:"payload,omitempty"`
+	X       int    `json:"x"`
+	Y       int    `json:"y"`
+	Width   int    `json:"width"`
+	Height  int    `json:"height"`
+}
+
+// WindowInfo is the serialisable view of a registered child process.
+type WindowInfo struct {
+	ID        string `json:"id"`
+	Kind      string `json:"kind"`
+	Title     string `json:"title"`
+	X         int    `json:"x"`
+	Y         int    `json:"y"`
+	Width     int    `json:"width"`
+	Height    int    `json:"height"`
+	PID       int    `json:"pid,omitempty"`
+	OpenedAt  int64  `json:"openedAt"`
+	Ready     bool   `json:"ready"`
+	CloseSent bool   `json:"closeSent"`
+}
+
+// Bootstrap is fetched by the child after Wails has installed its native
+// runtime and bindings.
+type Bootstrap struct {
+	ID      string `json:"id"`
+	Kind    string `json:"kind"`
+	Title   string `json:"title"`
+	Payload any    `json:"payload,omitempty"`
+}
+
+// OperationResult is returned by the Wails-bound Manager commands.
+type OperationResult struct {
+	Success bool   `json:"success"`
+	Message string `json:"message,omitempty"`
+	ID      string `json:"id,omitempty"`
+}
+
+// Event is emitted to the main Wails window. Action mirrors the detached HTTP
+// action protocol so the frontend can use one reducer for child messages and
+// process-exit notifications.
+type Event struct {
+	ID      string `json:"id"`
+	Kind    string `json:"kind"`
+	Action  string `json:"action"`
+	Payload any    `json:"payload,omitempty"`
+}
+
+type actionRequest struct {
+	Action  string `json:"action"`
+	Payload any    `json:"payload,omitempty"`
+}
+
+type controlRequest struct {
+	Action  string      `json:"action"`
+	ID      string      `json:"id,omitempty"`
+	Request OpenRequest `json:"request,omitempty"`
+}
+
+type childCommand struct {
+	ID     string `json:"id"`
+	Action string `json:"action"`
+}
+
+func normalizeOpenRequest(request OpenRequest) OpenRequest {
+	request.Kind = strings.TrimSpace(request.Kind)
+	request.Title = strings.TrimSpace(request.Title)
+	if request.Kind == "" {
+		request.Kind = "workbench"
+	}
+	if request.Title == "" {
+		request.Title = "GoNavi"
+	}
+	if request.Width <= 0 {
+		request.Width = defaultWindowWidth
+	}
+	if request.Height <= 0 {
+		request.Height = defaultWindowHeight
+	}
+	return request
+}
diff --git a/internal/nativewindow/window_bounds_darwin.go b/internal/nativewindow/window_bounds_darwin.go
new file mode 100644
index 00000000..a410c729
--- /dev/null
+++ b/internal/nativewindow/window_bounds_darwin.go
@@ -0,0 +1,66 @@
+//go:build darwin && cgo
+
+package nativewindow
+
+/*
+#cgo CFLAGS: -x objective-c
+#cgo LDFLAGS: -framework Cocoa
+
+#import <Cocoa/Cocoa.h>
+#import <dispatch/dispatch.h>
+
+typedef struct {
+    int x;
+    int y;
+    int width;
+    int height;
+} DetachedWindowBounds;
+
+static NSWindow *resolveDetachedWindow(void) {
+    NSApplication *application = [NSApplication sharedApplication];
+    NSWindow *window = [application mainWindow];
+    if (window == nil) {
+        window = [application keyWindow];
+    }
+    if (window == nil && [[application windows] count] > 0) {
+        window = [[application windows] objectAtIndex:0];
+    }
+    return window;
+}
+
+static void applyDetachedWindowBounds(void *rawBounds) {
+    DetachedWindowBounds *bounds = (DetachedWindowBounds *)rawBounds;
+    NSWindow *window = resolveDetachedWindow();
+    NSArray<NSScreen *> *screens = [NSScreen screens];
+    if (window == nil || [screens count] == 0) {
+        return;
+    }
+
+    // Browser screenX/screenY use the primary display's top-left as the global
+    // origin. Cocoa uses the primary display's bottom-left, so only Y needs to
+    // be flipped around the primary screen's top edge.
+    NSRect primaryFrame = [[screens objectAtIndex:0] frame];
+    NSRect frame = [window frame];
+    frame.origin.x = (CGFloat)bounds->x;
+    frame.origin.y = NSMaxY(primaryFrame) - (CGFloat)bounds->y - (CGFloat)bounds->height;
+    frame.size.width = (CGFloat)bounds->width;
+    frame.size.height = (CGFloat)bounds->height;
+    [window setFrame:frame display:NO animate:NO];
+}
+
+static void setDetachedWindowBounds(int x, int y, int width, int height) {
+    DetachedWindowBounds bounds = { x, y, width, height };
+    if ([NSThread isMainThread]) {
+        applyDetachedWindowBounds(&bounds);
+        return;
+    }
+    dispatch_sync_f(dispatch_get_main_queue(), &bounds, applyDetachedWindowBounds);
+}
+*/
+import "C"
+
+import "context"
+
+func applyDetachedWindowBounds(_ context.Context, x, y, width, height int) {
+	C.setDetachedWindowBounds(C.int(x), C.int(y), C.int(width), C.int(height))
+}
diff --git a/internal/nativewindow/window_bounds_other.go b/internal/nativewindow/window_bounds_other.go
new file mode 100644
index 00000000..95c21501
--- /dev/null
+++ b/internal/nativewindow/window_bounds_other.go
@@ -0,0 +1,14 @@
+//go:build !darwin || !cgo
+
+package nativewindow
+
+import (
+	"context"
+
+	wailsRuntime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+func applyDetachedWindowBounds(ctx context.Context, x, y, width, height int) {
+	wailsRuntime.WindowSetSize(ctx, width, height)
+	wailsRuntime.WindowSetPosition(ctx, x, y)
+}
diff --git a/internal/webserver/server.go b/internal/webserver/server.go
index 9bde2327..37dcb06e 100644
--- a/internal/webserver/server.go
+++ b/internal/webserver/server.go
@@ -146,7 +146,8 @@ func (h *eventHub) unsubscribe(ch chan eventMessage) {
 }
 
 type methodInvoker struct {
-	targets map[string]reflect.Value
+	targets             map[string]reflect.Value
+	allowDesktopMethods bool
 }
 
 func newMethodInvoker(app *appcore.App, ai *aiservice.Service) *methodInvoker {
@@ -179,7 +180,7 @@ func (i *methodInvoker) Invoke(req invokeRequest) (any, error) {
 	if !ok {
 		return nil, fmt.Errorf("unsupported invoke target: %s.%s", namespace, receiver)
 	}
-	if (key == "app" || key == "app.app") && isDesktopOnlyAppMethod(methodName) {
+	if !i.allowDesktopMethods && (key == "app" || key == "app.app") && isDesktopOnlyAppMethod(methodName) {
 		return nil, fmt.Errorf("method %s is unavailable in web runtime", methodName)
 	}
 
@@ -263,6 +264,130 @@ type Server struct {
 	auditHeavySem chan struct{}
 }
 
+// SharedRuntimeOptions configures the authenticated loopback runtime used by
+// native child windows. Authentication is intentionally owned by the caller so
+// the same handler can be protected by a process-scoped token instead of the
+// browser server's password/session flow.
+type SharedRuntimeOptions struct {
+	RuntimeBridgePath   string
+	RuntimeBridgeScript string
+}
+
+// SharedRuntime exposes the existing frontend assets and reflective App/AI RPC
+// bridge without creating a second backend. It is safe to host this on a
+// loopback-only listener owned by the desktop process.
+type SharedRuntime struct {
+	server              *Server
+	runtimeBridgePath   string
+	runtimeBridgeScript string
+	handler             http.Handler
+}
+
+// NewSharedRuntime creates an HTTP runtime backed by the already-running
+// desktop App and AI service. The caller remains responsible for their
+// lifecycle.
+func NewSharedRuntime(assetFS fs.FS, app *appcore.App, ai *aiservice.Service, options SharedRuntimeOptions) (*SharedRuntime, error) {
+	if assetFS == nil {
+		return nil, fmt.Errorf("web assets are unavailable")
+	}
+	if app == nil || ai == nil {
+		return nil, fmt.Errorf("shared App and AI service are required")
+	}
+	frontendFS, err := fs.Sub(assetFS, "frontend/dist")
+	if err != nil {
+		return nil, fmt.Errorf("resolve frontend dist assets failed: %w", err)
+	}
+
+	bridgePath := strings.TrimSpace(options.RuntimeBridgePath)
+	if bridgePath == "" || !strings.HasPrefix(bridgePath, internalRoutePrefix+"/") {
+		return nil, fmt.Errorf("runtime bridge path must be under %s", internalRoutePrefix)
+	}
+
+	events := newEventHub()
+	shared := &SharedRuntime{
+		server: &Server{
+			assets: frontendFS,
+			app:    app,
+			ai:     ai,
+			events: events,
+			invoker: func() *methodInvoker {
+				invoker := newMethodInvoker(app, ai)
+				invoker.allowDesktopMethods = true
+				return invoker
+			}(),
+			auditHeavySem: make(chan struct{}, 1),
+		},
+		runtimeBridgePath:   bridgePath,
+		runtimeBridgeScript: options.RuntimeBridgeScript,
+	}
+	shared.handler = shared.routes()
+	return shared, nil
+}
+
+// Handler returns the shared runtime HTTP handler.
+func (s *SharedRuntime) Handler() http.Handler {
+	if s == nil {
+		return http.NotFoundHandler()
+	}
+	return s.handler
+}
+
+// Emit publishes a backend event to every native child window connected to the
+// shared runtime event stream.
+func (s *SharedRuntime) Emit(name string, args ...any) {
+	if s == nil || s.server == nil || s.server.events == nil {
+		return
+	}
+	s.server.events.Emit(name, args...)
+}
+
+func (s *SharedRuntime) routes() http.Handler {
+	mux := http.NewServeMux()
+	mux.HandleFunc(internalRoutePrefix+"/api/invoke", s.server.handleInvoke)
+	mux.HandleFunc(internalRoutePrefix+"/events", s.server.handleEvents)
+	mux.HandleFunc(s.runtimeBridgePath, func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet {
+			http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+			return
+		}
+		w.Header().Set("Content-Type", "application/javascript; charset=utf-8")
+		_, _ = w.Write([]byte(s.runtimeBridgeScript))
+	})
+	mux.HandleFunc(internalRoutePrefix+"/healthz", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet {
+			http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+			return
+		}
+		w.Header().Set("Content-Type", "text/plain; charset=utf-8")
+		_, _ = w.Write([]byte("ok"))
+	})
+
+	fileServer := http.FileServer(http.FS(s.server.assets))
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet && r.Method != http.MethodHead {
+			http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+			return
+		}
+		if strings.HasPrefix(r.URL.Path, internalRoutePrefix+"/") {
+			http.NotFound(w, r)
+			return
+		}
+		if s.server.shouldServeIndex(r.URL.Path) {
+			payload, err := fs.ReadFile(s.server.assets, "index.html")
+			if err != nil {
+				http.Error(w, "frontend index is unavailable", http.StatusInternalServerError)
+				return
+			}
+			html := injectBodyScript(string(payload), s.runtimeBridgePath)
+			w.Header().Set("Content-Type", "text/html; charset=utf-8")
+			http.ServeContent(w, r, "index.html", time.Time{}, strings.NewReader(html))
+			return
+		}
+		fileServer.ServeHTTP(w, r)
+	})
+	return withSecurityHeaders(mux)
+}
+
 func ParseOptions(args []string) (Options, error) {
 	options := Options{
 		Addr: defaultWebServerAddr,
@@ -451,16 +576,31 @@ func (s *Server) serveIndex(w http.ResponseWriter, r *http.Request) {
 }
 
 func injectRuntimeBridge(indexHTML string) string {
-	if strings.Contains(indexHTML, internalRoutePrefix+"/web-runtime.js") {
+	return injectScript(indexHTML, internalRoutePrefix+"/web-runtime.js")
+}
+
+func injectScript(indexHTML string, scriptPath string) string {
+	if strings.Contains(indexHTML, scriptPath) {
 		return indexHTML
 	}
-	scriptTag := fmt.Sprintf(`<script src="%s/web-runtime.js"></script>`, internalRoutePrefix)
+	scriptTag := fmt.Sprintf(`<script src="%s"></script>`, scriptPath)
 	if strings.Contains(indexHTML, "</head>") {
 		return strings.Replace(indexHTML, "</head>", scriptTag+"\n</head>", 1)
 	}
 	return scriptTag + "\n" + indexHTML
 }
 
+func injectBodyScript(indexHTML string, scriptPath string) string {
+	if strings.Contains(indexHTML, scriptPath) {
+		return indexHTML
+	}
+	scriptTag := fmt.Sprintf(`<script src="%s"></script>`, scriptPath)
+	if strings.Contains(indexHTML, "</body>") {
+		return strings.Replace(indexHTML, "</body>", scriptTag+"\n</body>", 1)
+	}
+	return injectScript(indexHTML, scriptPath)
+}
+
 func (s *Server) handleInvoke(w http.ResponseWriter, r *http.Request) {
 	if r.Method != http.MethodPost {
 		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
diff --git a/internal/webserver/server_test.go b/internal/webserver/server_test.go
index 0cc81301..cf6bc9e3 100644
--- a/internal/webserver/server_test.go
+++ b/internal/webserver/server_test.go
@@ -2,9 +2,16 @@ package webserver
 
 import (
 	"encoding/json"
+	"io/fs"
+	"net/http"
+	"net/http/httptest"
 	"reflect"
 	"strings"
 	"testing"
+	"testing/fstest"
+
+	aiservice "GoNavi-Wails/internal/ai/service"
+	appcore "GoNavi-Wails/internal/app"
 )
 
 type webserverTestReceiver struct{}
@@ -17,6 +24,10 @@ func (webserverTestReceiver) Sum(left int, right int) int {
 	return left + right
 }
 
+func (webserverTestReceiver) OpenSQLFile() string {
+	return "desktop-method-reached"
+}
+
 func TestInjectRuntimeBridgeAddsScriptOnce(t *testing.T) {
 	indexHTML := "<html><head><title>GoNavi</title></head><body></body></html>"
 
@@ -99,6 +110,22 @@ func TestMethodInvokerRejectsDesktopOnlyAppMethodsBeforeReflection(t *testing.T)
 	}
 }
 
+func TestSharedMethodInvokerAllowsDesktopMethods(t *testing.T) {
+	invoker := &methodInvoker{
+		targets: map[string]reflect.Value{
+			"app.app": reflect.ValueOf(webserverTestReceiver{}),
+		},
+		allowDesktopMethods: true,
+	}
+	result, err := invoker.Invoke(invokeRequest{Namespace: "app", Receiver: "app", Method: "OpenSQLFile"})
+	if err != nil {
+		t.Fatalf("shared desktop method was rejected: %v", err)
+	}
+	if result != "desktop-method-reached" {
+		t.Fatalf("unexpected shared desktop result: %#v", result)
+	}
+}
+
 func TestSQLAuditHeavyInvokeIncludesExportAndIntegrityVerification(t *testing.T) {
 	for _, method := range []string{"BuildSQLAuditExport", "VerifySQLAuditIntegrity"} {
 		if !isSQLAuditHeavyInvoke(invokeRequest{Namespace: "app", Receiver: "app", Method: method}) {
@@ -109,3 +136,41 @@ func TestSQLAuditHeavyInvokeIncludesExportAndIntegrityVerification(t *testing.T)
 		t.Fatal("ordinary paged audit reads must not use the heavy-operation semaphore")
 	}
 }
+
+func TestSharedRuntimeInjectsRequestedBridgeWithoutBrowserAuthentication(t *testing.T) {
+	assets := fstest.MapFS{
+		"frontend/dist/index.html": &fstest.MapFile{Data: []byte(`<html><head><script src="/wails/runtime.js"></script><title>GoNavi</title><script type="module" src="/assets/index.js"></script></head><body><div id="root"></div></body></html>`)},
+	}
+	shared, err := NewSharedRuntime(fs.FS(assets), appcore.NewWebApp(), aiservice.NewService(), SharedRuntimeOptions{
+		RuntimeBridgePath:   "/__gonavi/detached-runtime.js",
+		RuntimeBridgeScript: "window.detachedRuntime = true;",
+	})
+	if err != nil {
+		t.Fatalf("NewSharedRuntime returned error: %v", err)
+	}
+
+	indexRequest := httptest.NewRequest(http.MethodGet, "/", nil)
+	indexRecorder := httptest.NewRecorder()
+	shared.Handler().ServeHTTP(indexRecorder, indexRequest)
+	if indexRecorder.Code != http.StatusOK {
+		t.Fatalf("shared index status = %d", indexRecorder.Code)
+	}
+	if !strings.Contains(indexRecorder.Body.String(), "/__gonavi/detached-runtime.js") {
+		t.Fatalf("shared index is missing detached bridge: %s", indexRecorder.Body.String())
+	}
+	html := indexRecorder.Body.String()
+	bodyIndex := strings.Index(html, "<body>")
+	runtimeIndex := strings.Index(html, "/wails/runtime.js")
+	bridgeIndex := strings.Index(html, "/__gonavi/detached-runtime.js")
+	bodyCloseIndex := strings.Index(html, "</body>")
+	if runtimeIndex < 0 || bridgeIndex <= runtimeIndex || bodyIndex < 0 || bridgeIndex <= bodyIndex || bodyCloseIndex <= bridgeIndex {
+		t.Fatalf("detached bridge must run after Wails runtime as the final body script, got: %s", html)
+	}
+
+	bridgeRequest := httptest.NewRequest(http.MethodGet, "/__gonavi/detached-runtime.js", nil)
+	bridgeRecorder := httptest.NewRecorder()
+	shared.Handler().ServeHTTP(bridgeRecorder, bridgeRequest)
+	if bridgeRecorder.Code != http.StatusOK || !strings.Contains(bridgeRecorder.Body.String(), "detachedRuntime") {
+		t.Fatalf("unexpected bridge response: status=%d body=%s", bridgeRecorder.Code, bridgeRecorder.Body.String())
+	}
+}
diff --git a/main.go b/main.go
index e54e2db2..04de5ceb 100644
--- a/main.go
+++ b/main.go
@@ -12,6 +12,7 @@ import (
 	"GoNavi-Wails/internal/app"
 	"GoNavi-Wails/internal/logger"
 	"GoNavi-Wails/internal/mcpserver"
+	"GoNavi-Wails/internal/nativewindow"
 	"GoNavi-Wails/internal/webserver"
 
 	"github.com/wailsapp/wails/v2"
@@ -40,6 +41,14 @@ func main() {
 	// Create an instance of the app structure
 	application := app.NewApp()
 	aiService := aiservice.NewService()
+	nativeWindowManager, nativeWindowErr := nativewindow.NewManager(assets, application, aiService)
+	if nativeWindowErr != nil {
+		logger.Warnf("初始化原生独立窗口管理器失败：%v", nativeWindowErr)
+	}
+	bindings := []interface{}{application, aiService}
+	if nativeWindowManager != nil {
+		bindings = append(bindings, nativeWindowManager)
+	}
 	lowMemoryMode := isLowMemoryMode()
 	backgroundColour, windowsOptions := resolveWindowVisualOptions(runtime.GOOS, lowMemoryMode)
 	windowsOptions.WebviewUserDataPath = resolveWindowsWebviewUserDataPath()
@@ -78,22 +87,28 @@ func main() {
 		Menu:             appMenu,
 		OnStartup: func(ctx context.Context) {
 			runtimeCtx = ctx
-			app.InitializeLifecycle(application, ctx)
-			aiservice.InitializeLifecycle(aiService, ctx)
+			lifecycleCtx := ctx
+			if nativeWindowManager != nil {
+				if err := nativewindow.InitializeLifecycle(nativeWindowManager, ctx); err != nil {
+					logger.Warnf("启动原生独立窗口服务失败：%v", err)
+				} else {
+					lifecycleCtx = nativewindow.WithLifecycleContext(nativeWindowManager, ctx)
+				}
+			}
+			app.InitializeLifecycle(application, lifecycleCtx)
+			aiservice.InitializeLifecycle(aiService, lifecycleCtx)
 			if err := aiservice.RepairInstalledLocalMCPClientConfigs(aiService); err != nil {
 				logger.Warnf("自动修复本地 MCP 客户端配置失败：%v", err)
 			}
 		},
 		OnShutdown: func(ctx context.Context) {
+			nativewindow.ShutdownLifecycle(nativeWindowManager)
 			aiService.Shutdown()
 			application.Shutdown()
 		},
 		OnBeforeClose: app.NewBeforeCloseHandler(application),
-		Bind: []interface{}{
-			application,
-			aiService,
-		},
-		Windows: windowsOptions,
+		Bind:          bindings,
+		Windows:       windowsOptions,
 		Mac: &mac.Options{
 			WebviewIsTransparent: true,
 			WindowIsTranslucent:  true,
@@ -139,6 +154,11 @@ func runSpecialMode(args []string) bool {
 			logger.Error(err, "GoNavi Web Server 退出")
 		}
 		return true
+	case "detached-window", nativewindow.DetachedWindowArgument:
+		if err := nativewindow.RunChild(context.Background(), assets, args[1:]); err != nil {
+			logger.Error(err, "GoNavi 原生独立窗口退出")
+		}
+		return true
 	default:
 		return false
 	}