elm-ssr 1.0.1 → 1.0.4

package/lib/scaffold.mjs

@@ -316,6 +316,67 @@ view =
         }
 `;
 
+const betterAuthMigrationTemplate = () => `-- BetterAuth requires these 4 tables. Do not rename or remove columns.
+-- Generated by elm-ssr. See https://www.better-auth.com/docs/concepts/database
+CREATE TABLE IF NOT EXISTS "user" (
+    id TEXT NOT NULL PRIMARY KEY,
+    name TEXT NOT NULL,
+    email TEXT NOT NULL UNIQUE,
+    "emailVerified" INTEGER NOT NULL DEFAULT 0,
+    image TEXT,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS session (
+    id TEXT NOT NULL PRIMARY KEY,
+    "expiresAt" INTEGER NOT NULL,
+    token TEXT NOT NULL UNIQUE,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL,
+    "ipAddress" TEXT,
+    "userAgent" TEXT,
+    "userId" TEXT NOT NULL REFERENCES "user"(id) ON DELETE CASCADE
+);
+
+CREATE TABLE IF NOT EXISTS account (
+    id TEXT NOT NULL PRIMARY KEY,
+    "accountId" TEXT NOT NULL,
+    "providerId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL REFERENCES "user"(id) ON DELETE CASCADE,
+    "accessToken" TEXT,
+    "refreshToken" TEXT,
+    "idToken" TEXT,
+    "accessTokenExpiresAt" INTEGER,
+    "refreshTokenExpiresAt" INTEGER,
+    scope TEXT,
+    password TEXT,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS verification (
+    id TEXT NOT NULL PRIMARY KEY,
+    identifier TEXT NOT NULL,
+    value TEXT NOT NULL,
+    "expiresAt" INTEGER NOT NULL,
+    "createdAt" INTEGER,
+    "updatedAt" INTEGER
+);
+`;
+
+const auth0MigrationTemplate = () => `-- Local user cache for Auth0 authenticated users.
+-- Auth0 is the canonical identity source; this table stores profile data after first login.
+CREATE TABLE IF NOT EXISTS users (
+    id TEXT NOT NULL PRIMARY KEY,
+    email TEXT NOT NULL UNIQUE,
+    name TEXT,
+    picture TEXT,
+    "createdAt" INTEGER NOT NULL,
+    "updatedAt" INTEGER NOT NULL
+);
+`;
+
 const authDisplayName = (authProvider) =>
   authProvider === "auth0" ? "Auth0" : "BetterAuth";
 
@@ -433,7 +494,47 @@ view user =
         }
 `;
 
-const authEndpointTemplate = (authProvider) => `import { generateSessionId, signValue, generateCsrfToken, readSignedCookie } from "elm-ssr/sessions";
+const betterAuthEndpointTemplate = () => `import { betterAuth } from "better-auth";
+
+// BetterAuth is initialised per-request to pick up the right database binding.
+// On Cloudflare Workers env.DB is the D1 binding; on Bun (local dev) the
+// runtime injects a bun:sqlite Database as env.DB — see runtime.ts.
+// Pass env.DB directly so BetterAuth's adapter auto-detects the dialect
+// (D1 via "batch"/"exec"/"prepare", bun:sqlite via "fileControl").
+export const createAuth = (env: any) =>
+  betterAuth({
+    baseURL: (env?.BETTER_AUTH_URL as string) ?? "http://localhost:8787",
+    secret: (env?.BETTER_AUTH_SECRET as string) ?? "change-me-in-production",
+    database: env?.DB,
+    emailAndPassword: { enabled: true },
+    // Uncomment to add social providers (add matching env vars in .dev.vars):
+    // socialProviders: {
+    //   github: {
+    //     clientId: env?.GITHUB_CLIENT_ID as string,
+    //     clientSecret: env?.GITHUB_CLIENT_SECRET as string,
+    //   },
+    // },
+  });
+
+export const handleAuth = (request: Request, env: any): Promise<Response> =>
+  createAuth(env).handler(request);
+`;
+
+const auth0EndpointTemplate = () => `import { generateSessionId, signValue, generateCsrfToken, readSignedCookie } from "elm-ssr/sessions";
+
+interface Auth0Config {
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  callbackUrl: string;
+}
+
+const getConfig = (env: any): Auth0Config => ({
+  domain: (env?.AUTH0_DOMAIN as string) ?? "",
+  clientId: (env?.AUTH0_CLIENT_ID as string) ?? "",
+  clientSecret: (env?.AUTH0_CLIENT_SECRET as string) ?? "",
+  callbackUrl: (env?.AUTH0_CALLBACK_URL as string) ?? "http://localhost:8787/api/auth/callback",
+});
 
 export const handleAuth = async (
   request: Request,
@@ -441,54 +542,88 @@ export const handleAuth = async (
   options?: { store?: any; secret?: string }
 ): Promise<Response> => {
   const url = new URL(request.url);
+  const config = getConfig(env);
 
   if (url.pathname === "/api/auth/login") {
-    // Mock login session update for ${authProvider}
-    let cookieVal = "__elm_ssr_session=" + encodeURIComponent(JSON.stringify({
-      user: { email: "user@example.com", name: "${authProvider === "better-auth" ? "BetterAuth User" : "Auth0 User"}" }
-    })) + "; Path=/; HttpOnly; SameSite=Lax";
+    if (!config.domain || !config.clientId) {
+      return new Response(
+        "Auth0 not configured — set AUTH0_DOMAIN and AUTH0_CLIENT_ID in .dev.vars",
+        { status: 500 }
+      );
+    }
+    const params = new URLSearchParams({
+      response_type: "code",
+      client_id: config.clientId,
+      redirect_uri: config.callbackUrl,
+      scope: "openid profile email",
+    });
+    return Response.redirect(\`https://\${config.domain}/authorize?\${params}\`, 302);
+  }
+
+  if (url.pathname === "/api/auth/callback") {
+    const code = url.searchParams.get("code");
+    if (!code) return new Response("Missing code", { status: 400 });
+
+    const tokenRes = await fetch(\`https://\${config.domain}/oauth/token\`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        grant_type: "authorization_code",
+        client_id: config.clientId,
+        client_secret: config.clientSecret,
+        code,
+        redirect_uri: config.callbackUrl,
+      }),
+    });
+
+    if (!tokenRes.ok) {
+      return new Response("Token exchange with Auth0 failed", { status: 502 });
+    }
+
+    const tokens = await tokenRes.json() as { id_token: string };
+    const [, payloadB64] = tokens.id_token.split(".");
+    const user = JSON.parse(atob(payloadB64)) as { email: string; name?: string; sub: string };
 
     if (options?.store && options?.secret) {
       const sessionId = generateSessionId();
       await options.store.set(sessionId, {
-        data: { email: "user@example.com", name: "${authProvider === "better-auth" ? "BetterAuth User" : "Auth0 User"}" },
-        csrf: generateCsrfToken()
+        data: { email: user.email, name: user.name ?? user.email },
+        csrf: generateCsrfToken(),
       });
       const signed = await signValue(options.secret, sessionId);
-      cookieVal = "session=" + signed + "; Path=/; HttpOnly; SameSite=Lax";
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: "/profile",
+          "Set-Cookie": \`session=\${signed}; Path=/; HttpOnly; SameSite=Lax\`,
+        },
+      });
     }
-
-    return new Response(null, {
-      status: 302,
-      headers: {
-        "Location": "/profile",
-        "Set-Cookie": cookieVal
-      }
-    });
+    return new Response(null, { status: 302, headers: { Location: "/profile" } });
   }
 
   if (url.pathname === "/api/auth/logout") {
-    let cookieVal = "__elm_ssr_session=; Path=/; Max-Age=0; HttpOnly";
     if (options?.store && options?.secret) {
-      cookieVal = "session=; Path=/; Max-Age=0; HttpOnly";
-      const cookieHeader = request.headers.get("cookie");
-      if (cookieHeader) {
-        const sessionId = await readSignedCookie(cookieHeader, "session", options.secret);
-        if (sessionId) {
-          await options.store.delete(sessionId);
-        }
+      const incoming = request.headers.get("cookie");
+      if (incoming) {
+        const sessionId = await readSignedCookie(incoming, "session", options.secret);
+        if (sessionId) await options.store.delete(sessionId);
       }
     }
+    const params = new URLSearchParams({
+      client_id: config.clientId,
+      returnTo: new URL(request.url).origin,
+    });
     return new Response(null, {
       status: 302,
       headers: {
-        "Location": "/login",
-        "Set-Cookie": cookieVal
-      }
+        "Set-Cookie": "session=; Path=/; Max-Age=0; HttpOnly",
+        Location: \`https://\${config.domain}/oidc/logout?\${params}\`,
+      },
     });
   }
 
-  return new Response("${authProvider} Endpoint API Mock", { status: 200 });
+  return new Response("Not found", { status: 404 });
 };
 `;
 
@@ -499,6 +634,9 @@ const runtimeTemplate = (appRoot, db = false, auth = undefined) => {
   const upToRoot = appRoot === "." ? "." : appRoot.split("/").map(() => "..").join("/");
   const generatedPrefix = `${upToRoot}/generated/${appRoot === "." ? "" : appRoot}`.replace(/\/+$/, "");
 
+  const isBetterAuth = auth === "better-auth";
+  const isAuth0 = auth === "auth0";
+
   const imports = [
     `import { createWorkerApp } from "elm-ssr";`,
     `import { renderApp, type CompiledElmModule } from "elm-ssr/render";`,
@@ -506,13 +644,18 @@ const runtimeTemplate = (appRoot, db = false, auth = undefined) => {
     `import { islands, bundleSource } from "${generatedPrefix}/islands-manifest";`,
     `import { stylesheet } from "./styles";`,
     `// @ts-expect-error Generated at build time.`,
-    `import ElmRuntime from "${generatedPrefix}/app.mjs";`
+    `import ElmRuntime from "${generatedPrefix}/app.mjs";`,
+    `import { inMemoryEffects, cloudflareEffects } from "elm-ssr/effects";`
   ];
 
-  imports.push(`import { inMemoryEffects, cloudflareEffects } from "elm-ssr/effects";`);
-  if (auth) {
-    imports.push(`import { handleAuth } from "./src/Endpoints/Auth";`);
+  if (isBetterAuth) {
+    imports.push(`import { sessionEffects } from "elm-ssr/sessions";`);
+    imports.push(`import type { Middleware } from "elm-ssr/http";`);
+    imports.push(`import type { RequestSession } from "elm-ssr/sessions";`);
+    imports.push(`import { createAuth, handleAuth } from "./src/Endpoints/Auth";`);
+  } else if (isAuth0) {
     imports.push(`import { memorySessionStore } from "elm-ssr/sessions";`);
+    imports.push(`import { handleAuth } from "./src/Endpoints/Auth";`);
   }
 
   let dbInit = '';
@@ -557,8 +700,9 @@ if (typeof Bun !== "undefined") {
     },`;
   }
 
-  const effectsConfig = `,
-  effects: (effect, context) => {
+  // BetterAuth: manually wrap effects with sessionEffects (no elm-ssr session cookie).
+  // Auth0 / plain: use the effects callback directly.
+  const baseEffectsBody = `(effect, context) => {
     if (context.env) {
       return cloudflareEffects(${db ? '{ dbBinding: "DB" }' : ''})(effect, context);
     }
@@ -567,9 +711,53 @@ if (typeof Bun !== "undefined") {
     })(effect, context);
   }`;
 
+  const effectsConfig = isBetterAuth
+    ? `,\n  effects: sessionEffects(${baseEffectsBody}),\n  middlewares: [betterAuthBridge]`
+    : `,\n  effects: ${baseEffectsBody}`;
+
+  // Auth0 keeps elm-ssr session middleware; BetterAuth manages sessions itself.
   let sessionsConfig = '';
   let authInit = '';
-  if (auth) {
+  if (isBetterAuth) {
+    authInit = `
+// Local dev: open a SQLite database so BetterAuth works without a Cloudflare D1 binding.
+// On Cloudflare Workers this block is eliminated by esbuild (typeof Bun is statically "undefined").
+let bunAuthDb: any = undefined;
+if (typeof (globalThis as any).Bun !== "undefined") {
+  const sqliteModule = "bun" + ":sqlite";
+  const { Database } = require(sqliteModule);
+  bunAuthDb = new Database(import.meta.dir + "/app.db");
+}
+
+const getAuthEnv = (env: any): any =>
+  bunAuthDb && !env?.DB ? { ...(env ?? {}), DB: bunAuthDb } : env;
+
+// Bridge: reads BetterAuth session on every request so Loader.requireUser works.
+const betterAuthBridge: Middleware = async (context, next) => {
+  try {
+    const session = await createAuth(getAuthEnv(context.env)).api.getSession({
+      headers: context.request.headers,
+    });
+    const user = session?.user
+      ? { email: session.user.email, name: session.user.name ?? session.user.email }
+      : null;
+    context.session = {
+      id: user ? \`ba:\${user.email}\` : "",
+      data: user,
+      csrf: "",
+      dirty: false,
+      destroyed: false,
+      isNew: false,
+    } as RequestSession;
+  } catch {
+    context.session = {
+      id: "", data: null, csrf: "", dirty: false, destroyed: false, isNew: false,
+    } as RequestSession;
+  }
+  return next(context);
+};
+`;
+  } else if (isAuth0) {
     authInit = `\nexport const sessionStore = memorySessionStore();\n`;
     sessionsConfig = `,
   sessions: {
@@ -581,9 +769,21 @@ if (typeof Bun !== "undefined") {
   }
 
   let authIntercept = '';
-  if (auth) {
+  if (isBetterAuth) {
+    authIntercept = `
+// Delegate all /api/auth/* requests to BetterAuth, injecting the local db when needed.
+const baseWorkerFetch = worker.fetch;
+worker.fetch = async (request, env, ctx) => {
+  const url = new URL(request.url);
+  if (url.pathname.startsWith("/api/auth/")) {
+    return handleAuth(request, getAuthEnv(env));
+  }
+  return baseWorkerFetch(request, env, ctx);
+};
+`;
+  } else if (isAuth0) {
     authIntercept = `
-// Intercept Auth Provider requests
+// Delegate all /api/auth/* requests to the Auth0 handler.
 const baseWorkerFetch = worker.fetch;
 worker.fetch = async (request, env, ctx) => {
   const url = new URL(request.url);
@@ -986,6 +1186,51 @@ p  { line-height: 1.65; color: var(--text-muted); }
 \`;
 `;
 
+const devVarsContent = (auth) => {
+  if (auth === "better-auth") {
+    return `GREETING="Hello from your local .dev.vars file!"
+BETTER_AUTH_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+BETTER_AUTH_URL="http://localhost:8787"
+# Uncomment to enable social providers in src/Endpoints/Auth.ts:
+# GITHUB_CLIENT_ID="your-github-client-id"
+# GITHUB_CLIENT_SECRET="your-github-client-secret"
+`;
+  }
+  if (auth === "auth0") {
+    return `GREETING="Hello from your local .dev.vars file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+AUTH0_DOMAIN="your-tenant.auth0.com"
+AUTH0_CLIENT_ID="your-client-id"
+AUTH0_CLIENT_SECRET="your-client-secret"
+AUTH0_CALLBACK_URL="http://localhost:8787/api/auth/callback"
+`;
+  }
+  return `GREETING="Hello from your local .dev.vars file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+`;
+};
+
+const rootEnvContent = (auth) => {
+  if (auth === "better-auth") {
+    return `GREETING="Hello from your local .env file!"
+BETTER_AUTH_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+BETTER_AUTH_URL="http://localhost:8787"
+`;
+  }
+  if (auth === "auth0") {
+    return `GREETING="Hello from your local .env file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+AUTH0_DOMAIN="your-tenant.auth0.com"
+AUTH0_CLIENT_ID="your-client-id"
+AUTH0_CLIENT_SECRET="your-client-secret"
+AUTH0_CALLBACK_URL="http://localhost:8787/api/auth/callback"
+`;
+  }
+  return `GREETING="Hello from your local .env file!"
+SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
+`;
+};
+
 const filesForApp = (name, appRoot, options = {}) => {
   const namespace = toPascalCase(name);
   const db = options.db || !!options.auth;
@@ -1004,22 +1249,27 @@ const filesForApp = (name, appRoot, options = {}) => {
     { path: `${appRoot}/src/${namespace}/Islands/Counter.elm`, content: counterIslandTemplate(namespace) },
     {
       path: `${appRoot}/.dev.vars`,
-      content: `GREETING="Hello from your local .dev.vars file!"
-SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
-`
+      content: devVarsContent(auth)
     }
   ];
 
   if (db) {
-    files.push({
-      path: `${appRoot}/migrations/0001_init.sql`,
-      content: `CREATE TABLE IF NOT EXISTS users (
+    let migrationContent;
+    if (auth === "better-auth") {
+      migrationContent = betterAuthMigrationTemplate();
+    } else if (auth === "auth0") {
+      migrationContent = auth0MigrationTemplate();
+    } else {
+      migrationContent = `CREATE TABLE IF NOT EXISTS users (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     email TEXT NOT NULL UNIQUE,
     name TEXT,
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-`
+);\n`;
+    }
+    files.push({
+      path: `${appRoot}/migrations/0001_init.sql`,
+      content: migrationContent
     });
   }
 
@@ -1034,7 +1284,7 @@ SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32
     });
     files.push({
       path: `${appRoot}/src/Endpoints/Auth.ts`,
-      content: authEndpointTemplate(auth)
+      content: auth === "better-auth" ? betterAuthEndpointTemplate() : auth0EndpointTemplate()
     });
   }
 
@@ -1135,7 +1385,7 @@ const normalizeAppRoot = (rawRoot, name) => {
   return candidate;
 };
 
-const ensurePackageJson = async (rootPath, appName) => {
+const ensurePackageJson = async (rootPath, appName, options = {}) => {
   const packageJsonPath = resolve(rootPath, "package.json");
   let packageJson = {};
   try {
@@ -1158,9 +1408,15 @@ const ensurePackageJson = async (rootPath, appName) => {
     ...packageJson.scripts
   };
 
+  const extraDeps = {};
+  if (options.auth === "better-auth") {
+    extraDeps["better-auth"] = "latest";
+  }
+
   packageJson.devDependencies = {
     "elm-ssr": "latest",
     wrangler: "^4.0.0",
+    ...extraDeps,
     ...packageJson.devDependencies
   };
 
@@ -1206,9 +1462,7 @@ export const createAppScaffold = async (rootPath, name, options = {}) => {
   } catch {}
 
   if (!envExists) {
-    await writeFile(envPath, `GREETING="Hello from your local .env file!"
-SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32-chars"
-`, "utf8");
+    await writeFile(envPath, rootEnvContent(options.auth), "utf8");
   }
 
   await writeWorkspaceConfig(rootPath, {
@@ -1216,7 +1470,7 @@ SESSION_SECRET="change-me-to-a-secure-random-hmac-secret-key-that-is-at-least-32
     apps: [...config.apps, configEntry]
   });
 
-  await ensurePackageJson(rootPath, name);
+  await ensurePackageJson(rootPath, name, options);
 
   return configEntry;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elm-ssr",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Elm-first SSR library and framework for Cloudflare Workers (and Bun): file-based routes/islands, backend-neutral effect adapters (KV/D1/Redis/Postgres), background tasks (waitUntil/Queues), SQL-file migrations, CLI scaffold + build.",
   "license": "MIT",
   "author": "Michał Majchrzak <michmajchrzak@gmail.com>",

package/src/debugger.ts

@@ -399,30 +399,42 @@ export const injectDebugger = (html: string, data: unknown): string => {
   const islandMutations = new Map();
   const islandActiveStates = new Map();
   const activeObservers = new Map();
-  
+  let scanPending = false;
+
+  // Debounced, rAF-deferred scan so we always read the fully-committed DOM
+  // and any synchronous port messages (stateOut → elm-ssr-state-update) have
+  // had a chance to fire before we render the panel.
+  const scheduleScan = () => {
+    if (scanPending) return;
+    scanPending = true;
+    requestAnimationFrame(() => {
+      scanPending = false;
+      const activeTab = panel.querySelector('.debug-tab.active')?.getAttribute('data-tab');
+      if (activeTab === 'islands') {
+        scanIslands();
+      }
+    });
+  };
+
   const setupMutationObservers = () => {
     for (const obs of activeObservers.values()) {
       obs.disconnect();
     }
     activeObservers.clear();
-    
+
     const markers = Array.from(document.getElementsByTagName('elm-ssr-island'));
     markers.forEach(marker => {
       if (!islandMutations.has(marker)) {
         islandMutations.set(marker, { count: 0, lastUpdate: null });
       }
-      
+
       const observer = new MutationObserver(() => {
         const stats = islandMutations.get(marker);
         stats.count += 1;
         stats.lastUpdate = new Date();
-        
-        const activeTab = panel.querySelector('.debug-tab.active')?.getAttribute('data-tab');
-        if (activeTab === 'islands') {
-          scanIslands();
-        }
+        scheduleScan();
       });
-      
+
       observer.observe(marker, { childList: true, subtree: true, characterData: true, attributes: true });
       activeObservers.set(marker, observer);
     });
@@ -460,17 +472,21 @@ export const injectDebugger = (html: string, data: unknown): string => {
         : 'No client state changes recorded';
       
       const activeState = islandActiveStates.get(marker);
-      const domTextPreview = marker.textContent.trim().replace(/\\s+/g, ' ');
-      
+      // Always read live DOM text — this is current regardless of port timing.
+      const domTextPreview = marker.textContent.trim().replace(/\\s+/g, ' ').slice(0, 200);
+
       let stateSnippet = '';
       if (activeState) {
+        // Model state from stateOut port (may lag one frame behind DOM).
         stateSnippet = \`
-          <div style="font-size: 0.85em; margin-top: 6px; color: #a5b4fc;"><strong>Active Model State:</strong></div>
+          <div style="font-size: 0.85em; margin-top: 6px; color: #a5b4fc;"><strong>Model State:</strong></div>
           <pre class="debug-code" style="font-size: 0.85em; max-height: 120px; overflow-y: auto; color: #818cf8;">\${JSON.stringify(activeState, null, 2)}</pre>
         \`;
-      } else if (domTextPreview) {
-        stateSnippet = \`
-          <div style="font-size: 0.85em; margin-top: 6px; color: #9ca3af;"><strong>DOM Text Preview (Live):</strong></div>
+      }
+      if (domTextPreview) {
+        // DOM text is always live — show it so the panel reflects every render.
+        stateSnippet += \`
+          <div style="font-size: 0.85em; margin-top: 6px; color: #9ca3af;"><strong>Live DOM:</strong></div>
           <div class="debug-code" style="font-size: 0.85em; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">\${domTextPreview}</div>
         \`;
       }
@@ -506,16 +522,13 @@ export const injectDebugger = (html: string, data: unknown): string => {
   panel.querySelector('[data-tab="islands"]').addEventListener('click', scanIslands);
   setupMutationObservers();
 
-  // Listen to explicit state update ports
+  // Listen to explicit state update ports (stateOut)
   window.addEventListener('elm-ssr-state-update', (event) => {
     if (event.detail) {
       const marker = findMarkerByOrigin(event.detail);
       if (marker) {
         islandActiveStates.set(marker, event.detail.state);
-        const activeTab = panel.querySelector('.debug-tab.active')?.getAttribute('data-tab');
-        if (activeTab === 'islands') {
-          scanIslands();
-        }
+        scheduleScan();
       }
     }
   });
@@ -599,11 +612,7 @@ export const injectDebugger = (html: string, data: unknown): string => {
     \`;
     
     setupMutationObservers(); // Observe any newly mounted islands
-    
-    const activeTab = panel.querySelector('.debug-tab.active').getAttribute('data-tab');
-    if (activeTab === 'islands') {
-      scanIslands();
-    }
+    scheduleScan();
   };
 
   window.addEventListener('elm-ssr-debug-update', (event) => {