@webjsdev/server 0.8.57 → 0.8.59

package/src/dev-overlay.js

@@ -9,14 +9,83 @@
  * Security: the overlay is built with `createElement` + `textContent` only,
  * NEVER `innerHTML`, so a hostile error message / file path / code frame is
  * rendered as inert text and can never inject markup or script.
+ *
+ * Scope (#1047): a `render` frame is stamped server-side with the URL that
+ * produced it, and this module is the single gate deciding whether a frame
+ * belongs on the page currently being viewed. Without it, a body-level overlay
+ * outlives every client-router swap (which works strictly inside the keyed
+ * boundary comment ranges), and any render of a page this tab is NOT looking at
+ * raises an overlay over the one it is, in every open tab, since the frame fans
+ * out over the shared SSE channel. (The other half of #1047, a link prefetch
+ * reporting a frame at all, is cut server-side in `dev.js`, not here.)
+ *
+ * The gate cannot be a plain refuse-and-drop, because the SSE frame is pushed
+ * DURING the render, before the navigation response is even sent, so it reaches
+ * the browser while `location` is still the old page. So there are two slots: a
+ * RENDERED frame and a PENDING one the gate refused. A refused frame is held,
+ * and the nav sync re-evaluates it once the URL advances.
+ *
+ * A held frame is only ever rendered for the navigation it actually belongs to,
+ * which is what `__wjNavSeq` is for. A frame that arrives while a navigation is
+ * IN FLIGHT is that navigation's; one that arrived while the tab sat idle is
+ * not, and must never paint on a later visit to that url, because by then the
+ * page may well render fine. An idle-time frame comes from a render this tab
+ * did not navigate for: another tab's page, or a background fetch of some other
+ * url. NOT from a link prefetch, which reports no frame at all. Both look
+ * identical once held, so the seq records which navigation was in flight when
+ * the frame landed, and the sync renders it only if that is still the one
+ * finishing. `webjs:before-cache` is the nav-START signal (the router snapshots
+ * the page it is leaving before it fetches); a navigation that does not emit one
+ * leaves the seq unchanged, which fails toward SHOWING the frame, the same way
+ * the rest of the gate fails open.
  */
 
 /** The single live overlay element, or null. */
 let __wjOverlay = null;
+/** The frame the live overlay was built from, or null. */
+let __wjFrame = null;
+/** The most recent frame the scope gate refused, awaiting a URL that matches. */
+let __wjPending = null;
+/** The navigation that was in flight when `__wjPending` arrived. */
+let __wjPendingSeq = -1;
+/** Bumped at the start of each client-router navigation. */
+let __wjNavSeq = 0;
 
-/** Remove the overlay if one is showing. */
-export function dismissDevOverlay() {
+/** The path the gate compares a frame's url against. */
+function __wjCurrentPath() {
+  return typeof location !== 'undefined' ? location.pathname + location.search : '';
+}
+
+/**
+ * Compare a frame url against a browser path. Encoding-tolerant on purpose: a
+ * mismatch fails CLOSED (no overlay), so a percent-encoding difference on a
+ * dynamic segment would otherwise hide a genuine error.
+ */
+function __wjSamePath(a, b) {
+  if (a === b) return true;
+  try { return decodeURI(a) === decodeURI(b); } catch (_) { return false; }
+}
+
+/** True when `f` is a frame the scope gate applies to (a url-stamped render). */
+function __wjScoped(f) {
+  return !!f && f.kind === 'render' && typeof f.url === 'string' && f.url !== '';
+}
+
+/** Take the overlay off the page. Leaves the pending slot alone. */
+function __wjRemoveOverlay() {
   if (__wjOverlay) { __wjOverlay.remove(); __wjOverlay = null; }
+  __wjFrame = null;
+}
+
+/**
+ * Remove the overlay if one is showing, and forget any pending frame. This is
+ * what the Dismiss button calls, so a frame the user dismissed by hand is never
+ * resurrected by a later navigation.
+ */
+export function dismissDevOverlay() {
+  __wjRemoveOverlay();
+  __wjPending = null;
+  __wjPendingSeq = -1;
 }
 
 /** Append a styled text row to `parent`. */
@@ -30,11 +99,27 @@ function __wjRow(parent, css, text) {
 
 /**
  * Render the dev error overlay for a frame, replacing any prior one.
- * @param {{ kind?: string, message?: string, file?: string|null, line?: number|null, column?: number|null, codeFrame?: string|null, hint?: string|null }} f
+ *
+ * A url-stamped `render` frame for a DIFFERENT path than `currentPath` is not
+ * rendered; it is held in the pending slot for `syncDevOverlayToLocation` to
+ * re-evaluate once the URL advances (#1047). The gate runs BEFORE any removal,
+ * so a refused frame never wipes what is on screen (a live `rebuild` /
+ * `ts-strip` overlay describes a still-broken build and must survive it) and
+ * never paints even briefly. A frame with no `url`, or any other kind, renders
+ * exactly as it always did.
+ *
+ * @param {{ kind?: string, message?: string, file?: string|null, line?: number|null, column?: number|null, codeFrame?: string|null, hint?: string|null, url?: string|null }} f
+ * @param {string} [currentPath] defaults to `location.pathname + location.search`
  */
-export function renderDevOverlay(f) {
-  dismissDevOverlay();
-  if (!f) return;
+export function renderDevOverlay(f, currentPath) {
+  if (!f) { dismissDevOverlay(); return; }
+  const here = currentPath === undefined ? __wjCurrentPath() : currentPath;
+  if (__wjScoped(f) && !__wjSamePath(f.url, here)) {
+    __wjPending = f;
+    __wjPendingSeq = __wjNavSeq;
+    return;
+  }
+  __wjRemoveOverlay();
   const o = document.createElement('div');
   o.setAttribute('data-webjs-error-overlay', '');
   o.style.cssText = 'position:fixed;inset:0;z-index:2147483647;background:rgba(10,10,12,.92);color:#e6e6e6;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:32px;overflow:auto';
@@ -72,4 +157,131 @@ export function renderDevOverlay(f) {
   o.appendChild(card);
   (document.body || document.documentElement).appendChild(o);
   __wjOverlay = o;
+  __wjFrame = f;
+}
+
+/**
+ * Re-evaluate the scope gate against the page now being viewed (#1047). Called
+ * on every client-router navigation, so an overlay the navigation just made
+ * stale comes down, and a frame that arrived before the URL advanced (the usual
+ * ordering, since the SSE frame is pushed during the render that produces the
+ * navigation response) goes up.
+ *
+ * @param {string} [currentPath] defaults to `location.pathname + location.search`
+ */
+export function syncDevOverlayToLocation(currentPath) {
+  const here = currentPath === undefined ? __wjCurrentPath() : currentPath;
+  // The BACKSTOP for an overlay element this module does not own. Any such node
+  // is unremovable and its Dismiss button carries no listener, so it would sit
+  // there forever: a `document.body.replaceChildren` from cached HTML is the way
+  // that happens. The router's OWN back/forward snapshot is already handled
+  // upstream, since `before-cache` detaches the overlay across its `outerHTML`
+  // read, so what is left here is everything else (a snapshot cached before this
+  // client installed its listeners, or any other wholesale body replacement).
+  // Also notice when the node we did own was replaced out from under us: it is
+  // detached, so `.remove()` would no-op and the slot would lie about what is
+  // on screen.
+  if (typeof document !== 'undefined') {
+    const live = __wjOverlay && __wjOverlay.isConnected ? __wjOverlay : null;
+    __wjOverlay = live;
+    document.querySelectorAll('[data-webjs-error-overlay]').forEach((el) => {
+      if (el !== live) el.remove();
+    });
+  }
+  // A live overlay whose page we have navigated away from comes down. An
+  // unscoped overlay (rebuild / ts-strip) is untouched: it describes the build,
+  // not one URL, and only the next successful rebuild clears it.
+  if (__wjScoped(__wjFrame) && !__wjSamePath(__wjFrame.url, here)) __wjRemoveOverlay();
+  // Still the right frame for this page, but its node was swept away by the
+  // restore above: put a REAL one back, with a working Dismiss button.
+  if (__wjFrame && !__wjOverlay) renderDevOverlay(__wjFrame, here);
+  // The pending frame is consumed by this navigation either way. It renders
+  // only if this is BOTH the page it names and the navigation it belongs to;
+  // a frame held from an idle-time render (another tab's page, a background
+  // fetch of some other url) is dropped, because by the time you actually
+  // visit that url the page may render perfectly well, and an overlay over it
+  // would be the very bug this whole gate exists to stop.
+  const p = __wjPending;
+  const seq = __wjPendingSeq;
+  __wjPending = null;
+  __wjPendingSeq = -1;
+  if (p && seq === __wjNavSeq && __wjSamePath(p.url, here)) renderDevOverlay(p, here);
+}
+
+/**
+ * Mark the start of a client-router navigation (#1047), so a frame arriving
+ * from here on is known to belong to it. Exported for the browser test; the
+ * shipping wiring is `installDevOverlayNavSync`.
+ */
+export function markDevOverlayNavStart() {
+  __wjNavSeq++;
+}
+
+/**
+ * Wire the scope gate to the client router's navigation events (#1047), so the
+ * overlay tracks the page actually on screen. Browser-safe and dev-only: the
+ * reload client that calls this is served only in dev.
+ *
+ * Three events, each for a distinct reason:
+ * - `webjs:navigate` on `document`, the applied-navigation signal, dispatched
+ *   after `history.pushState` so `location` is already current.
+ * - `popstate` on `window`, because a back/forward restore served from the
+ *   router's snapshot cache returns before it dispatches `webjs:navigate`.
+ * - `webjs:before-cache` on `document`, which does two things. It is the
+ *   nav-START marker (the router dispatches it from `snapshotCurrent`, at the
+ *   top of every navigation and form submission, before the fetch), the only
+ *   signal separating a frame belonging to the navigation in flight from one
+ *   held since the tab was idle. And it detaches the overlay across the
+ *   snapshot read, re-attaching it a microtask later, so the cached HTML
+ *   carries no copy. What it must NOT do is strip the overlay for good, which
+ *   the event's own contract invites: it fires on EVERY navigation, so that
+ *   would tear a `rebuild` / `ts-strip` overlay off the page the moment you
+ *   clicked any link, while the build was still broken.
+ *
+ * @param {{ document?: any, window?: any, getPath?: () => string }} [opts] injection seam for the browser test
+ * @returns {() => void} an uninstall thunk
+ */
+export function installDevOverlayNavSync(opts) {
+  const o = opts || {};
+  const doc = o.document || (typeof document !== 'undefined' ? document : null);
+  const win = o.window || (typeof window !== 'undefined' ? window : null);
+  const getPath = o.getPath || __wjCurrentPath;
+  const onNav = () => syncDevOverlayToLocation(getPath());
+  const onBeforeCache = () => {
+    markDevOverlayNavStart();
+    // Keep the overlay out of the snapshot the router is about to take. It
+    // reads `outerHTML` SYNCHRONOUSLY right after this event, so detaching here
+    // and re-attaching in a microtask (which runs once that read has returned,
+    // and long before any paint) means the cached HTML never carries a copy,
+    // while the overlay on screen never flickers.
+    //
+    // This is not the strip that used to live here. That one dropped the frame
+    // permanently, so any link click tore down a `rebuild` / `ts-strip`
+    // overlay while the build was still broken; this puts the SAME node back.
+    // The sweep in `syncDevOverlayToLocation` stays as the backstop, because
+    // it cannot cover every ordering on its own: under an opt-in view
+    // transition the router defers the body swap past the sync, so a copy
+    // parsed in afterwards would otherwise sit there undismissable.
+    const el = __wjOverlay;
+    if (!el || !el.isConnected) return;
+    const parent = el.parentNode;
+    el.remove();
+    queueMicrotask(() => {
+      // Only if it is still the live overlay: a frame arriving meanwhile may
+      // have replaced it, or the user may have dismissed it.
+      if (__wjOverlay === el && !el.isConnected && parent) parent.appendChild(el);
+    });
+  };
+  if (doc) {
+    doc.addEventListener('webjs:navigate', onNav);
+    doc.addEventListener('webjs:before-cache', onBeforeCache);
+  }
+  if (win) win.addEventListener('popstate', onNav);
+  return () => {
+    if (doc) {
+      doc.removeEventListener('webjs:navigate', onNav);
+      doc.removeEventListener('webjs:before-cache', onBeforeCache);
+    }
+    if (win) win.removeEventListener('popstate', onNav);
+  };
 }

package/src/dev.js

@@ -15,7 +15,7 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 import { buildRouteTable, matchPage, matchApi } from './router.js';
 import { generateRouteTypes } from './route-types.js';
 import { ssrPage, ssrNotFound, setClientRouterEnabled } from './ssr.js';
-import { loadPageAction, runPageAction } from './page-action.js';
+import { runFormAction } from './form-dispatch.js';
 import { handleApi } from './api.js';
 import {
   buildActionIndex,
@@ -26,7 +26,7 @@ import {
   hasUseServerDirective,
   hashFile,
 } from './actions.js';
-import { registerSeedHooks } from './action-seed.js';
+import { registerActionHooks } from './action-seed.js';
 import { readRegenerateRules, maybeRegenerate, isRegenerateOutputPath } from './dev-regenerate.js';
 import { stripTypeScript, ensureStripper } from './ts-strip.js';
 import { defaultLogger } from './logger.js';
@@ -93,7 +93,9 @@ import { setVendorEntries, setCoreInstall, publishBuildId, setAppSourceId, setBa
 import { readBasePath, stripBasePath, withBasePath } from './base-path.js';
 import { propagateTrustedRemoteIp } from './rate-limit.js';
 import { readAllowedOrigins } from './csrf.js';
-import { setAssetRoots, clearAssetHashCache, setElisionFingerprint, withAssetHash, assetHashFor, versionModuleImports } from './asset-hash.js';
+import { setAssetUrlProvider, setFormActionResolver } from '@webjsdev/core';
+import { resolveActionIdentity } from './form-action-identity.js';
+import { setAssetRoots, clearAssetHashCache, setElisionFingerprint, withAssetHash, assetHashFor, versionModuleImports, resolveAssetUrl } from './asset-hash.js';
 import { urlFromRequest } from './forwarded.js';
 import { compileHeaderRules, applySecurityHeaders, webRequestIsHttps } from './headers.js';
 import {
@@ -624,13 +626,32 @@ export async function createRequestHandler(opts) {
   // id is a stable deploy fingerprint independent of per-file content hashes.
   setAssetRoots({ appDir, coreDir, enabled: !dev });
 
-  // SSR action-result seeding (#472). Install the process-global module load
-  // hook NOW, at boot, before any `'use server'` action module is imported (ESM
-  // caches by URL, so a module loaded before the hook would never be faceted).
-  // Read once (not per-rebuild): the hook is global and cannot be cleanly
-  // un-installed, so toggling needs a restart. Disabled -> no hook, no ambient
-  // collector wrap in ssr.js, and module loading stays byte-identical.
-  if (await readSeedEnabled(appDir)) await registerSeedHooks();
+  // Install the resolver behind the isomorphic `asset()` helper (#1194), the
+  // same provider seam `cspNonce()` uses. An author writes
+  // `href=${asset('/public/app.css')}` and gets the fingerprinted url on the
+  // server; the browser has no provider and returns the path unchanged.
+  //
+  // The `public/` gate is defensive rather than decorative. `resolveUrlToFile`
+  // maps any same-origin path under the PROJECT ROOT, so an app that passed
+  // request- or user-derived data here (`asset(user.avatarPath)`) would
+  // otherwise read and publish a content hash for `/.env`, `/db/app.db`, or a
+  // `.server.ts`, leaking both existence and a fingerprint of the bytes for
+  // files the serve path deliberately 404s. Mirror the static-asset route:
+  // under `public/`, no traversal. Everything else returns unchanged, having
+  // never touched the disk.
+  setAssetUrlProvider((p) => resolveAssetUrl(p, basePath()));
+
+  // The `'use server'` load hook. Install it NOW, at boot, before any action
+  // module is imported (ESM caches by URL, so a module loaded before the hook
+  // would never be wrapped). Read once (not per-rebuild): the hook is global
+  // and cannot be cleanly un-installed, so toggling needs a restart.
+  //
+  // It installs UNCONDITIONALLY, and only seed collection (#472) follows the
+  // `webjs.seed` switch. Action identity (#1155) rides the same hook, and it is
+  // what a bound `<form action=${action}>` resolves through, so gating the hook
+  // on seeding would mean `webjs.seed: false` silently broke every no-JS form.
+  await registerActionHooks({ seed: await readSeedEnabled(appDir) });
+
 
   // When an app commits a vendor pin (.webjs/vendor/importmap.json) it carries a
   // deterministic vendor map that is cheap to read (one file, no analysis, no
@@ -741,7 +762,7 @@ export async function createRequestHandler(opts) {
   // package.json `webjs.maxBodyBytes` / `webjs.maxMultipartBytes` plus the env
   // overrides. The secure defaults (1 MiB JSON/RPC, 10 MiB form) apply when
   // unconfigured. Stamped on every request via `setBodyLimits` so `readBody`
-  // (used inside route handlers) enforces the same cap the RPC and page-action
+  // (used inside route handlers) enforces the same cap the RPC and form-dispatch
   // paths do.
   const bodyLimits = await readBodyLimitsFromApp(appDir);
 
@@ -781,14 +802,27 @@ export async function createRequestHandler(opts) {
     regenerateRules: dev ? await readRegenerateRules(appDir) : [],
   };
 
+  // Teach the renderers how to turn a real server-action function into the
+  // `<hash>/<fn>` identity a form submits (#1155). The hook path is
+  // process-global and needs no index; `state.actionIndex` is consulted only as
+  // a hash memo, and by the scan fallback for a runtime with no hook. In a
+  // process running several handlers the fallback therefore resolves against
+  // the most recently booted one, which is the same scope the asset-url
+  // provider already has.
+  setFormActionResolver((fn) => (state.actionIndex ? resolveActionIdentity(state.actionIndex, fn) : null));
+
   /**
    * Report a dev error (#264): build a frame and push it to the open tab via
    * the SSE overlay channel. DEV-ONLY and best-effort, so it can never affect a
    * response or crash the server (a frame-build failure is swallowed). No file
    * path or source is ever built in prod (the early return), so nothing leaks.
    *
+   * `info.url` stamps a `render` frame with the URL that produced it (#1047), so
+   * the browser overlay can refuse a frame for a page the tab is not viewing.
+   * A `ts-strip` / `rebuild` frame passes none and stays unscoped.
+   *
    * @param {unknown} error
-   * @param {{ kind?: 'render'|'ts-strip'|'rebuild', file?: string, line?: number, column?: number, hint?: string }} [info]
+   * @param {{ kind?: 'render'|'ts-strip'|'rebuild', file?: string, line?: number, column?: number, hint?: string, url?: string }} [info]
    */
   function reportDevError(error, info = {}) {
     if (!dev) return;
@@ -1165,7 +1199,7 @@ export async function createRequestHandler(opts) {
 
       // Make the resolved body-size limits (issue #237) readable from the
       // request scope, so `readBody` inside a route handler enforces the same
-      // cap the framework's own RPC / page-action body reads do.
+      // cap the framework's own RPC / form-dispatch body reads do.
       setBodyLimits(state.bodyLimits);
 
       let pathname = '/';
@@ -1263,8 +1297,9 @@ export async function createRequestHandler(opts) {
       // into a 304 Not Modified with no body. Applied LAST, after every header
       // (X-Webjs-Build, X-Request-Id, Set-Cookie, CSP) is on the response, so a
       // 304 carries the validators a shared cache and the client router need.
-      // A no-store / per-user response, a non-GET/HEAD, and a streaming Suspense
-      // body are all skipped (see conditional-get.js). Logged with the final
+      // A no-store response, a non-GET/HEAD, and a streaming Suspense body are
+      // all skipped (see conditional-get.js). A `private` response is NOT
+      // skipped: private forbids shared storage, not validation (#1140). Logged with the final
       // (possibly 304) status. Best-effort: a failure leaves the 200 untouched.
       let conditioned = merged;
       try {
@@ -1332,7 +1367,7 @@ export async function createRequestHandler(opts) {
             // to the inbound `x-webjs-remote-ip` header that the copied
             // `req.headers` still carries, which a client can spoof. So strip
             // that header on the rebuild and propagate the framework-trusted IP
-            // across the new object, the same pattern page-action.js uses.
+            // across the new object, the same pattern form-dispatch.js uses.
             const headers = new Headers(req.headers);
             headers.delete('x-webjs-remote-ip');
             const hasBody = req.method !== 'GET' && req.method !== 'HEAD';
@@ -1822,7 +1857,7 @@ function startNodeListener(ctx) {
   // Catch-all process handlers: log, but don't tear the process down on a
   // single mishandled promise. Uncaught exceptions are different: state may be
   // corrupted, so log + start an orderly shutdown rather than continuing.
-  installProcessHandlers(logger, () => shutdown('uncaughtException'));
+  installProcessHandlers(logger, () => shutdown('uncaughtException', { fatal: true }));
 
   return {
     server,
@@ -2162,14 +2197,30 @@ async function handleCore(req, ctx) {
   }
 
   // Page route. GET/HEAD render the page. A NON-GET/HEAD method (POST/PUT/…)
-  // is only routed here when the page module exports an `action` (#244); the
-  // action runs inside the page's segment middleware, then either PRG-redirects
-  // (303) on success, re-renders the same page (422) with field errors on
-  // failure, or honors a thrown redirect()/notFound(). Without an `action`
-  // export, a non-GET/HEAD request falls through to the 404 below, unchanged.
+  // is a form submission (#1155): the `__webjs_action` hidden field names the
+  // server action to run, it runs inside the page's segment middleware, and the
+  // result either PRG-redirects (303), re-renders the same page (422) with
+  // field errors, or honors a thrown redirect()/notFound(). A non-GET carrying
+  // no action identity is a 405 on a path that exists but only renders.
   {
     const page = matchPage(state.routeTable, path);
     if (page) {
+      // The URL this render is FOR, in the form the browser sees it (#1047), so
+      // the overlay's scope gate can compare it against `location.pathname +
+      // location.search`. Two details are load-bearing: the RAW `url.pathname`
+      // (not the decoded `path`) is used, because `location.pathname` is
+      // percent-encoded too; and the base path is put back, because the ingress
+      // strip already removed it from `url` while the browser's location still
+      // carries it, so without this the gate would suppress every overlay on a
+      // sub-path deploy.
+      const devErrorUrl = withBasePath(url.pathname, basePath()) + url.search;
+      // A speculative link prefetch must never raise an overlay (#1047): the
+      // user is only hovering a link to a page that throws, and the page they
+      // are actually looking at is fine. Dropping the hook also keeps the throw
+      // out of `state.lastDevError`, so the SSE replay cannot hand it to a
+      // freshly-connected tab either. The APM `onError` sink below still fires,
+      // because the render really did throw.
+      const isPrefetch = req.headers.get('x-webjs-prefetch') === '1';
       const ssrOpts = {
         dev, appDir, moduleGraph: state.moduleGraph,
         serverFiles: state.actionIndex.fileToHash,
@@ -2196,17 +2247,43 @@ async function handleCore(req, ctx) {
         // Dev error overlay (#264): a render crash pushes a frame to the open
         // tab. Dev-only (reportDevError early-returns in prod), so no source
         // leaks. Distinct from onError (the APM sink), which always fires.
-        onDevError: dev ? (e) => reportDevError(e, { kind: 'render' }) : undefined,
+        onDevError: dev && !isPrefetch
+          ? (e) => reportDevError(e, { kind: 'render', url: devErrorUrl })
+          : undefined,
       };
       if (method === 'GET' || method === 'HEAD') {
-        const handler = () => ssrPage(page.route, page.params, url, { ...ssrOpts, req });
-        return runWithSegmentMiddleware(req, page.route.middlewares, handler, dev);
-      }
-      const loaded = await loadPageAction(page.route.file, dev);
-      if (loaded) {
-        const handler = () => runPageAction(page.route, page.params, url, loaded, req, ssrOpts);
+        // A successful render of URL U supersedes a RETAINED render error for
+        // that same URL (#1047), so a reconnecting tab is not handed a frame the
+        // page has since recovered from. Keyed on BOTH frame identity and url:
+        // identity so a frame this very render just reported is never wiped, url
+        // so a good render of an unrelated page cannot erase an error that is
+        // still current for the page the user is looking at (the #893 gap the
+        // retention exists to close). Dev-only, and skipped for a prefetch,
+        // which is not the user's view of anything.
+        const handler = dev && !isPrefetch
+          ? async () => {
+            const before = state.lastDevError;
+            const resp = await ssrPage(page.route, page.params, url, { ...ssrOpts, req });
+            if (
+              before && state.lastDevError === before
+              && before.kind === 'render' && before.url === devErrorUrl
+            ) state.lastDevError = null;
+            return resp;
+          }
+          : () => ssrPage(page.route, page.params, url, { ...ssrOpts, req });
         return runWithSegmentMiddleware(req, page.route.middlewares, handler, dev);
       }
+      // Every non-GET/HEAD to a page runs the page's segment middleware, and
+      // the dispatcher always answers with a Response (a 405 when there is no
+      // action to run), so a middleware that post-processes `await next()`
+      // never has to handle an absent one.
+      const deps = {
+        actionIndex: state.actionIndex,
+        allowedOrigins,
+        onError: reportError ? (e) => reportError(e, req, 'action') : undefined,
+      };
+      const handler = () => runFormAction(page.route, page.params, url, req, ssrOpts, deps);
+      return runWithSegmentMiddleware(req, page.route.middlewares, handler, dev);
     }
   }
 
@@ -2828,6 +2905,11 @@ function __webjsApplyError(data) {
   let f; try { f = JSON.parse(data); } catch (_) { return; }
   renderDevOverlay(f);
 }
+// Keep the overlay tracking the page actually on screen (#1047): a render frame
+// is scoped to the URL that produced it, so navigating away takes it down, and a
+// frame that arrived before the URL advanced goes up once it does. The gate
+// itself lives inside renderDevOverlay, so __webjsApplyError needs no change.
+installDevOverlayNavSync();
 // Never reload INTO a server that is still restarting (Node's node --watch
 // briefly kills the process on an edit), which would paint a style-less,
 // half-rendered page (#893). Probe the lightweight /__webjs/version endpoint