fix: use static import in connect module to prevent race condition

The connect module used a dynamic `await import('react-devtools-core')`
which yielded control before `initialize()` could install the devtools
hook. This created a race where react-dom would load first, find no
hook, and proceed without connecting to devtools.

Switch to a static import so `initialize()` runs synchronously at
module evaluation time, before any dependent modules (like main.tsx)
execute. This also avoids top-level await which is incompatible with
Vite's esbuild dep optimizer (es2020 target).

Fixes #14

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: piotrski

packages/agent-react-devtools/src/connect.ts

@@ -5,13 +5,18 @@
  *
  * This must be imported before React loads. It:
  * 1. Removes the Vite plugin-react hook stub
- * 2. Initializes react-devtools-core
+ * 2. Initializes react-devtools-core (installs the real __REACT_DEVTOOLS_GLOBAL_HOOK__)
  * 3. Connects via WebSocket to the agent-react-devtools daemon
  *
+ * Steps 1–2 run synchronously at module evaluation time via a static import
+ * of react-devtools-core so the hook is installed before React loads.
+ *
  * Export `ready` — a promise that resolves once the WebSocket opens
  * (or after a 2s timeout / error, so the app is never blocked).
  */
 
+import { initialize, connectToDevTools } from 'react-devtools-core';
+
 function getMeta(name: string): string | null {
   if (typeof document === 'undefined') return null;
   const meta = document.querySelector(`meta[name="${name}"]`);
@@ -41,23 +46,27 @@ const isProd =
   (typeof process !== 'undefined' &&
     process.env?.NODE_ENV === 'production');
 
+// Install the devtools hook synchronously before React loads.
+// This MUST happen at module evaluation time — if deferred to an async
+// callback, react-dom may initialize first and miss the hook entirely.
+if (!isSSR && !isProd) {
+  // Remove Vite's plugin-react hook stub so react-devtools-core can install the full hook
+  try {
+    delete (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  } catch {
+    // Property may be non-configurable (browser extension) — ignore
+  }
+
+  initialize();
+}
+
 export const ready: Promise<void> = isSSR || isProd ? noop() : connect();
 
-async function connect(): Promise<void> {
+function connect(): Promise<void> {
   try {
     const port = getPort();
     const host = getHost();
 
-    // Remove Vite's plugin-react hook stub so react-devtools-core can install the full hook
-    try {
-      delete (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    } catch {
-      // Property may be non-configurable (browser extension) — ignore
-    }
-
-    const { initialize, connectToDevTools } = await import('react-devtools-core');
-    initialize();
-
     return new Promise<void>((resolve) => {
       try {
         const ws = new WebSocket(`ws://${host}:${port}`);
@@ -70,6 +79,6 @@ async function connect(): Promise<void> {
       }
     });
   } catch {
-    // react-devtools-core not installed or other error — silently skip
+    return Promise.resolve();
   }
 }