@agent-native/core 0.92.12 → 0.93.0

package/dist/cli/design-connect.js

@@ -3,6 +3,7 @@ import crypto from "node:crypto";
 import fsSync from "node:fs";
 import fs from "node:fs/promises";
 import http from "node:http";
+import https from "node:https";
 import path from "node:path";
 const DEFAULT_BRIDGE_PORT = 7331;
 const ROUTE_MANIFEST_FILE = path.join(".agent-native", "design-routes.json");
@@ -40,6 +41,7 @@ const MANIFEST_CAPABILITIES = {
     writeTextFiles: true,
 };
 const PREVIEW_TOKEN_DOMAIN = "agent-native-design-preview-v1\0";
+const PREVIEW_SESSION_COOKIE_NAME = "agent-native-preview-token";
 /**
  * Derive a read-only preview credential from the stronger filesystem token.
  * The one-way hash keeps old `--bridge-token` launch commands compatible while
@@ -601,8 +603,8 @@ function configureBridgeCors(req, res, configuredOrigins) {
     res[BRIDGE_CORS_HEADERS] = approved
         ? {
             "access-control-allow-origin": origin,
-            "access-control-allow-methods": "GET, HEAD, POST, OPTIONS",
-            "access-control-allow-headers": "content-type, x-bridge-token, x-design-preview-token",
+            "access-control-allow-methods": "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS",
+            "access-control-allow-headers": "authorization, content-type, x-bridge-token, x-design-preview-token, x-csrf-token, x-xsrf-token, x-requested-with",
             "access-control-allow-private-network": "true",
             vary: "Origin",
         }
@@ -619,17 +621,19 @@ function sendJson(res, statusCode, body) {
     });
     res.end(`${JSON.stringify(body, null, 2)}\n`);
 }
-function sendText(res, statusCode, body, contentType) {
+function sendText(res, statusCode, body, contentType, setCookieHeaders = []) {
     res.writeHead(statusCode, {
         "content-type": contentType,
+        ...(setCookieHeaders.length > 0 ? { "set-cookie": setCookieHeaders } : {}),
         ...bridgeCorsHeaders(res),
     });
     res.end(body);
 }
-function sendBytes(res, statusCode, body, headers, contentLength = body.length) {
+function sendBytes(res, statusCode, body, headers, contentLength = body.length, setCookieHeaders = []) {
     const responseHeaders = {
         ...bridgeCorsHeaders(res),
         "content-length": String(contentLength),
+        ...(setCookieHeaders.length > 0 ? { "set-cookie": setCookieHeaders } : {}),
     };
     for (const name of [
         "content-type",
@@ -665,23 +669,232 @@ function readHeader(req, name) {
     const value = req.headers[name];
     return typeof value === "string" ? value : "";
 }
+function readRequestCookie(req, name) {
+    for (const rawPair of readHeader(req, "cookie").split(";")) {
+        const pair = rawPair.trim();
+        const separator = pair.indexOf("=");
+        if (separator <= 0 || pair.slice(0, separator).trim() !== name)
+            continue;
+        return pair.slice(separator + 1).trim();
+    }
+    return "";
+}
+function previewSessionSetCookie(previewToken) {
+    // Partitioned SameSite=None keeps the read-only bridge credential available
+    // to nested Design frames without granting an unpartitioned third-party
+    // cookie. Loopback origins are potentially trustworthy in Chromium, which
+    // permits Secure cookies for local development.
+    return `${PREVIEW_SESSION_COOKIE_NAME}=${previewToken}; HttpOnly; Path=/; SameSite=None; Secure; Partitioned`;
+}
 /**
- * Preserve only the browser request metadata a local dev server needs to
- * classify Vite source-module and stylesheet requests. Agent Native's dev
- * gateway intentionally varies source-file handling by `Sec-Fetch-Dest`; if
- * the bridge drops it, React Router module URLs such as `/app/root.tsx` fall
- * through to Nitro and 404. Keep this allowlist narrow: cookies, authorization,
- * bridge tokens, origins, and referrers must never be forwarded upstream.
+ * Preserve only browser metadata a local dev server needs to classify module
+ * requests and parse ordinary same-origin app mutations. Browser cookies and
+ * Authorization are forwarded only when Sec-Fetch-Site says the request came
+ * from the proxied app itself; cross-site callers cannot relay them. Bridge
+ * control tokens and referrers are never forwarded, and mutation origins are
+ * replaced with the connected dev-server origin. Cookie-backed login also
+ * uses the isolated in-memory upstream jar below so iframe cookie restrictions
+ * cannot split the session across URL-backed screens.
  */
-function previewProxyRequestHeaders(req) {
+function previewProxyRequestHeaders(req, devServerUrl, cookieHeader = "") {
     const headers = {};
-    for (const name of ["accept", "sec-fetch-dest"]) {
+    for (const name of [
+        "accept",
+        "accept-language",
+        "content-type",
+        "sec-fetch-dest",
+        "sec-fetch-mode",
+        "sec-fetch-site",
+        "x-csrf-token",
+        "x-xsrf-token",
+        "x-requested-with",
+    ]) {
         const value = readHeader(req, name);
         if (value)
             headers[name] = value;
     }
+    const browserSameOrigin = readHeader(req, "sec-fetch-site") === "same-origin";
+    const browserCookie = browserSameOrigin ? readHeader(req, "cookie") : "";
+    const mergedCookie = mergePreviewCookieHeaders(cookieHeader, browserCookie);
+    if (mergedCookie)
+        headers["cookie"] = mergedCookie;
+    // Same-origin app code may use localStorage-backed bearer auth. Forward it
+    // only from a browser request already classified as same-origin; cross-site
+    // callers still authenticate to the bridge with the separate preview token,
+    // which is never copied upstream.
+    if (browserSameOrigin) {
+        const authorization = readHeader(req, "authorization");
+        if (authorization && authorization.length <= 16 * 1024) {
+            headers["authorization"] = authorization;
+        }
+    }
+    if (req.method && !["GET", "HEAD"].includes(req.method)) {
+        headers["origin"] = new URL(devServerUrl).origin;
+    }
     return headers;
 }
+function mergePreviewCookieHeaders(jarCookieHeader, browserCookieHeader) {
+    const values = new Map();
+    const absorb = (header) => {
+        if (!header || Buffer.byteLength(header) > MAX_PREVIEW_COOKIE_BYTES)
+            return;
+        for (const rawPair of header.split(";")) {
+            const pair = rawPair.trim();
+            const separator = pair.indexOf("=");
+            if (separator <= 0)
+                continue;
+            const name = pair.slice(0, separator).trim();
+            const value = pair.slice(separator + 1).trim();
+            if (!/^[!#$%&'*+.^_`|~0-9A-Za-z-]+$/.test(name))
+                continue;
+            if (/^(?:x-)?agent-native-(?:bridge|preview)(?:-|$)/i.test(name)) {
+                continue;
+            }
+            values.set(name, value);
+        }
+    };
+    absorb(jarCookieHeader);
+    // A client-readable same-origin cookie is allowed to update the jar's stale
+    // value for this request. HttpOnly cookies arrive with the same value and
+    // remain effectively jar-owned.
+    absorb(browserCookieHeader);
+    return [...values].map(([name, value]) => `${name}=${value}`).join("; ");
+}
+const MAX_PREVIEW_SESSION_COOKIES = 128;
+const MAX_PREVIEW_COOKIE_BYTES = 8 * 1024;
+function responseSetCookieHeaders(headers) {
+    const withGetSetCookie = headers;
+    if (typeof withGetSetCookie.getSetCookie === "function") {
+        return withGetSetCookie.getSetCookie();
+    }
+    const single = headers.get("set-cookie");
+    return single ? [single] : [];
+}
+function defaultCookiePath(url) {
+    const pathname = url.pathname || "/";
+    const lastSlash = pathname.lastIndexOf("/");
+    return lastSlash <= 0 ? "/" : pathname.slice(0, lastSlash);
+}
+function sanitizedBridgeSetCookie(raw) {
+    return raw
+        .split(";")
+        .filter((part) => !/^\s*domain\s*=/i.test(part))
+        .join(";");
+}
+/**
+ * Ephemeral cookie session for one connected dev-server origin. Cookies never
+ * enter SQL, disk, logs, or another target origin, and disappear when the
+ * local bridge exits. This keeps authenticated URL screens in one bridge
+ * process on the same upstream session even when browser third-party-cookie
+ * rules would otherwise isolate or reject the nested iframe cookies.
+ */
+class PreviewSessionCookieJar {
+    origin;
+    cookies = new Map();
+    constructor(devServerUrl) {
+        this.origin = new URL(devServerUrl).origin;
+    }
+    store(headers, responseUrl) {
+        const parsedUrl = new URL(responseUrl);
+        if (parsedUrl.origin !== this.origin)
+            return [];
+        const browserCookies = [];
+        for (const raw of responseSetCookieHeaders(headers)) {
+            if (!raw || Buffer.byteLength(raw) > MAX_PREVIEW_COOKIE_BYTES)
+                continue;
+            const parts = raw.split(";");
+            const first = parts.shift()?.trim() ?? "";
+            const separator = first.indexOf("=");
+            if (separator <= 0)
+                continue;
+            const name = first.slice(0, separator).trim();
+            const value = first.slice(separator + 1).trim();
+            if (!/^[!#$%&'*+.^_`|~0-9A-Za-z-]+$/.test(name))
+                continue;
+            let cookiePath = defaultCookiePath(parsedUrl);
+            let secure = false;
+            let expiresAt;
+            let deleteCookie = false;
+            for (const attribute of parts) {
+                const trimmed = attribute.trim();
+                const equals = trimmed.indexOf("=");
+                const key = (equals < 0 ? trimmed : trimmed.slice(0, equals))
+                    .trim()
+                    .toLowerCase();
+                const attributeValue = equals < 0 ? "" : trimmed.slice(equals + 1).trim();
+                if (key === "path" && attributeValue.startsWith("/")) {
+                    cookiePath = attributeValue;
+                }
+                else if (key === "secure") {
+                    secure = true;
+                }
+                else if (key === "max-age") {
+                    const seconds = Number(attributeValue);
+                    if (Number.isFinite(seconds)) {
+                        deleteCookie = seconds <= 0;
+                        expiresAt = Date.now() + seconds * 1000;
+                    }
+                }
+                else if (key === "expires" && expiresAt === undefined) {
+                    const parsed = Date.parse(attributeValue);
+                    if (Number.isFinite(parsed))
+                        expiresAt = parsed;
+                }
+            }
+            const mapKey = `${cookiePath}\u0000${name}`;
+            if (deleteCookie ||
+                (expiresAt !== undefined && expiresAt <= Date.now())) {
+                this.cookies.delete(mapKey);
+            }
+            else {
+                this.cookies.delete(mapKey);
+                this.cookies.set(mapKey, {
+                    name,
+                    value,
+                    path: cookiePath,
+                    secure,
+                    ...(expiresAt !== undefined ? { expiresAt } : {}),
+                });
+                while (this.cookies.size > MAX_PREVIEW_SESSION_COOKIES) {
+                    const oldest = this.cookies.keys().next().value;
+                    if (typeof oldest !== "string")
+                        break;
+                    this.cookies.delete(oldest);
+                }
+            }
+            browserCookies.push(sanitizedBridgeSetCookie(raw));
+        }
+        return browserCookies;
+    }
+    headerFor(targetUrl) {
+        const parsed = new URL(targetUrl);
+        if (parsed.origin !== this.origin)
+            return "";
+        const now = Date.now();
+        const matches = [];
+        for (const [key, cookie] of this.cookies) {
+            if (cookie.expiresAt !== undefined && cookie.expiresAt <= now) {
+                this.cookies.delete(key);
+                continue;
+            }
+            if (cookie.secure &&
+                parsed.protocol !== "https:" &&
+                !isLoopbackOrigin(parsed)) {
+                continue;
+            }
+            const pathMatches = cookie.path === "/" ||
+                parsed.pathname === cookie.path ||
+                (cookie.path.endsWith("/")
+                    ? parsed.pathname.startsWith(cookie.path)
+                    : parsed.pathname.startsWith(`${cookie.path}/`));
+            if (!pathMatches)
+                continue;
+            matches.push(cookie);
+        }
+        matches.sort((a, b) => b.path.length - a.path.length);
+        return matches.map((cookie) => `${cookie.name}=${cookie.value}`).join("; ");
+    }
+}
 function resolvePreviewSnapshotUrl(devServerUrl, rawUrl) {
     const base = normalizeHttpUrl(devServerUrl);
     const parsed = new URL(rawUrl?.trim() || "/", `${base}/`);
@@ -704,7 +917,7 @@ function resolvePreviewProxyUrl(devServerUrl, requestUrl) {
     }
     return parsed.toString();
 }
-async function fetchPreviewSnapshot(devServerUrl, targetUrl, redirects = 0) {
+async function fetchPreviewSnapshot(devServerUrl, targetUrl, cookieJar, redirects = 0) {
     if (redirects > 5) {
         throw new Error("Too many redirects while fetching preview snapshot.");
     }
@@ -717,8 +930,12 @@ async function fetchPreviewSnapshot(devServerUrl, targetUrl, redirects = 0) {
             signal: controller.signal,
             headers: {
                 accept: "text/html,application/xhtml+xml;q=0.9,*/*;q=0.8",
+                ...(cookieJar?.headerFor(targetUrl)
+                    ? { cookie: cookieJar.headerFor(targetUrl) }
+                    : {}),
             },
         });
+        const setCookieHeaders = cookieJar?.store(response.headers, targetUrl) ?? [];
         const location = response.headers.get("location");
         if (location && response.status >= 300 && response.status < 400) {
             const redirected = new URL(location, targetUrl);
@@ -726,20 +943,21 @@ async function fetchPreviewSnapshot(devServerUrl, targetUrl, redirects = 0) {
             if (!sameOrigin(redirected.toString(), devServerUrl)) {
                 throw new Error("Snapshot redirect left the connected dev server.");
             }
-            return fetchPreviewSnapshot(devServerUrl, redirected.toString(), redirects + 1);
+            return fetchPreviewSnapshot(devServerUrl, redirected.toString(), cookieJar, redirects + 1);
         }
         return {
             url: response.url || targetUrl,
             status: response.status,
             contentType: response.headers.get("content-type") ?? "",
             html: await response.text(),
+            setCookieHeaders,
         };
     }
     finally {
         clearTimeout(timeout);
     }
 }
-async function fetchPreviewProxyResource(devServerUrl, targetUrl, requestHeaders = {}, redirects = 0) {
+async function fetchPreviewProxyResource(devServerUrl, targetUrl, request, cookieJar, redirects = 0) {
     if (redirects > 5) {
         throw new Error("Too many redirects while proxying preview resource.");
     }
@@ -747,11 +965,15 @@ async function fetchPreviewProxyResource(devServerUrl, targetUrl, requestHeaders
     const timeout = setTimeout(() => controller.abort(), 10_000);
     try {
         const response = await fetch(targetUrl, {
-            method: "GET",
+            method: request.method,
             redirect: "manual",
             signal: controller.signal,
-            headers: requestHeaders,
+            headers: request.headers,
+            body: request.method === "GET" || request.method === "HEAD"
+                ? undefined
+                : request.body,
         });
+        const setCookieHeaders = cookieJar?.store(response.headers, targetUrl) ?? [];
         const location = response.headers.get("location");
         if (location && response.status >= 300 && response.status < 400) {
             const redirected = new URL(location, targetUrl);
@@ -759,13 +981,33 @@ async function fetchPreviewProxyResource(devServerUrl, targetUrl, requestHeaders
             if (!sameOrigin(redirected.toString(), devServerUrl)) {
                 throw new Error("Proxy redirect left the connected dev server.");
             }
-            return fetchPreviewProxyResource(devServerUrl, redirected.toString(), requestHeaders, redirects + 1);
+            const switchToGet = response.status === 303 ||
+                ((response.status === 301 || response.status === 302) &&
+                    request.method === "POST");
+            const redirectedResponse = await fetchPreviewProxyResource(devServerUrl, redirected.toString(), {
+                method: switchToGet ? "GET" : request.method,
+                headers: {
+                    ...(request.headers ?? {}),
+                    ...(cookieJar?.headerFor(redirected.toString())
+                        ? { cookie: cookieJar.headerFor(redirected.toString()) }
+                        : {}),
+                },
+                body: switchToGet ? undefined : request.body,
+            }, cookieJar, redirects + 1);
+            return {
+                ...redirectedResponse,
+                setCookieHeaders: [
+                    ...setCookieHeaders,
+                    ...redirectedResponse.setCookieHeaders,
+                ],
+            };
         }
         return {
             url: response.url || targetUrl,
             status: response.status,
             headers: response.headers,
             body: Buffer.from(await response.arrayBuffer()),
+            setCookieHeaders,
         };
     }
     finally {
@@ -829,6 +1071,39 @@ async function readRequestBody(req) {
         req.on("error", reject);
     });
 }
+const MAX_PREVIEW_PROXY_REQUEST_BYTES = 8 * 1024 * 1024;
+class PreviewProxyRequestTooLargeError extends Error {
+}
+async function readPreviewProxyRequestBody(req) {
+    const declaredLength = Number(readHeader(req, "content-length"));
+    if (Number.isFinite(declaredLength) &&
+        declaredLength > MAX_PREVIEW_PROXY_REQUEST_BYTES) {
+        throw new PreviewProxyRequestTooLargeError("Preview request body exceeds the 8 MB limit.");
+    }
+    return new Promise((resolve, reject) => {
+        const chunks = [];
+        let size = 0;
+        let tooLarge = false;
+        req.on("data", (chunk) => {
+            size += chunk.length;
+            if (size > MAX_PREVIEW_PROXY_REQUEST_BYTES) {
+                tooLarge = true;
+                chunks.length = 0;
+                return;
+            }
+            if (!tooLarge)
+                chunks.push(chunk);
+        });
+        req.on("end", () => {
+            if (tooLarge) {
+                reject(new PreviewProxyRequestTooLargeError("Preview request body exceeds the 8 MB limit."));
+                return;
+            }
+            resolve(Buffer.concat(chunks));
+        });
+        req.on("error", reject);
+    });
+}
 /**
  * Resolve `targetDir` under `rootPath` with realpath so that symlinks and
  * traversal sequences (../../etc) cannot escape the root.  Throws if the
@@ -1055,8 +1330,13 @@ async function atomicWriteBridgeFile(args) {
         await fs.rm(tempPath, { force: true }).catch(() => undefined);
     }
 }
-/** Allowed file extensions for write/apply-edit operations. */
-const ALLOWED_WRITE_EXTENSIONS = new Set([
+/**
+ * Extensions that are safe for creating a brand-new text/code file through
+ * the bridge. Existing files are classified by their bytes instead, so the
+ * Code workbench can edit languages and extensionless config files without a
+ * permanently incomplete allowlist.
+ */
+const ALLOWED_NEW_TEXT_FILE_EXTENSIONS = new Set([
     ".html",
     ".htm",
     ".css",
@@ -1078,11 +1358,90 @@ const ALLOWED_WRITE_EXTENSIONS = new Set([
     ".yml",
     ".yaml",
     ".svg",
+    ".py",
+    ".rb",
+    ".php",
+    ".java",
+    ".kt",
+    ".kts",
+    ".go",
+    ".rs",
+    ".c",
+    ".h",
+    ".cc",
+    ".cpp",
+    ".hpp",
+    ".cs",
+    ".swift",
+    ".sh",
+    ".bash",
+    ".zsh",
+    ".fish",
+    ".sql",
+    ".toml",
+    ".xml",
+    ".graphql",
+    ".gql",
+    ".prisma",
+    ".properties",
+    ".ini",
+    ".conf",
+    ".env.example",
+]);
+const ALLOWED_NEW_EXTENSIONLESS_TEXT_FILES = new Set([
+    "dockerfile",
+    "makefile",
+    "procfile",
+    "gemfile",
+    "rakefile",
+    "license",
+    "readme",
 ]);
-function assertAllowedExtension(relPath) {
+const BLOCKED_BINARY_WRITE_EXTENSIONS = new Set([
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".webp",
+    ".ico",
+    ".woff",
+    ".woff2",
+    ".ttf",
+    ".otf",
+    ".eot",
+    ".mp3",
+    ".mp4",
+    ".mov",
+    ".webm",
+    ".zip",
+    ".gz",
+    ".tar",
+    ".pdf",
+    ".wasm",
+    ".fig",
+    ".sketch",
+    ".exe",
+    ".dll",
+    ".dylib",
+    ".so",
+    ".class",
+    ".jar",
+]);
+function assertEditableTextFile(relPath, existing) {
     const ext = path.extname(relPath).toLowerCase();
-    if (!ALLOWED_WRITE_EXTENSIONS.has(ext)) {
-        throw new Error(`Write rejected: extension "${ext || "(no extension)"}" is not in the allowed text-file list for bridge writes.`);
+    if (BLOCKED_BINARY_WRITE_EXTENSIONS.has(ext)) {
+        throw new Error(`Write rejected: extension "${ext}" is a binary file type.`);
+    }
+    if (existing) {
+        if (existing.content.includes("\0")) {
+            throw new Error("Write rejected: the existing file contains binary data.");
+        }
+        return;
+    }
+    const basename = path.basename(relPath).toLowerCase();
+    if (!ALLOWED_NEW_TEXT_FILE_EXTENSIONS.has(ext) &&
+        !ALLOWED_NEW_EXTENSIONLESS_TEXT_FILES.has(basename)) {
+        throw new Error(`Write rejected: extension "${ext || "(no extension)"}" is not recognized for a new text/code file.`);
     }
 }
 /**
@@ -1423,6 +1782,7 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
     // registered" (id changed, safe to transparently re-POST `/live-edit-bridge`
     // and retry) — instead of guessing from the error text or retrying forever.
     const bridgeInstanceId = crypto.randomBytes(16).toString("hex");
+    const previewSessionCookies = new PreviewSessionCookieJar(manifest.devServerUrl);
     const server = http.createServer((req, res) => {
         const corsApproved = configureBridgeCors(req, res, configuredOrigins);
         if (req.method === "OPTIONS") {
@@ -1435,6 +1795,7 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
         const pathname = requestUrl.pathname;
         const providedPreviewToken = readHeader(req, "x-design-preview-token") ||
             requestUrl.searchParams.get("previewToken") ||
+            readRequestCookie(req, PREVIEW_SESSION_COOKIE_NAME) ||
             "";
         const previewTokenValid = constantTimeTokenMatches(providedPreviewToken, previewToken);
         const rejectInvalidPreviewToken = () => {
@@ -1546,7 +1907,7 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
                 try {
                     const targetUrl = resolvePreviewSnapshotUrl(manifest.devServerUrl, requestUrl.searchParams.get("url") ??
                         requestUrl.searchParams.get("path"));
-                    const snapshot = await fetchPreviewSnapshot(manifest.devServerUrl, targetUrl);
+                    const snapshot = await fetchPreviewSnapshot(manifest.devServerUrl, targetUrl, previewSessionCookies);
                     const includeEditorBridge = requestUrl.searchParams.get("bridge") !== "0";
                     const requestedBridgeKey = requestUrl.searchParams.get("bridgeKey")?.trim() ?? "";
                     const editorBridgeScript = requestedBridgeKey
@@ -1578,7 +1939,10 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
                     const html = injectLiveEditBridge(snapshot.html, new URL("/", manifest.bridgeUrl).toString(), includeEditorBridge ? editorBridgeScript : "", targetPath);
                     sendText(res, snapshot.status >= 400 ? snapshot.status : 200, html, snapshot.contentType.includes("html")
                         ? snapshot.contentType
-                        : "text/html; charset=utf-8");
+                        : "text/html; charset=utf-8", [
+                        ...snapshot.setCookieHeaders,
+                        previewSessionSetCookie(previewToken),
+                    ]);
                 }
                 catch (err) {
                     sendJson(res, 400, {
@@ -1600,7 +1964,7 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
                 try {
                     const targetUrl = resolvePreviewSnapshotUrl(manifest.devServerUrl, requestUrl.searchParams.get("url") ??
                         requestUrl.searchParams.get("path"));
-                    const snapshot = await fetchPreviewSnapshot(manifest.devServerUrl, targetUrl);
+                    const snapshot = await fetchPreviewSnapshot(manifest.devServerUrl, targetUrl, previewSessionCookies);
                     sendJson(res, snapshot.status >= 400 ? snapshot.status : 200, {
                         ok: snapshot.status < 400,
                         source: manifest.source,
@@ -1683,8 +2047,6 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
                         });
                         return;
                     }
-                    // write-file and apply-edit only allow known text/code extensions.
-                    assertAllowedExtension(relPath);
                     const expectedVersionHash = typeof body["expectedVersionHash"] === "string"
                         ? body["expectedVersionHash"]
                         : undefined;
@@ -1695,6 +2057,7 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
                             throw new Error("Bridge target changed while waiting for the write lock");
                         }
                         const existing = await readBridgeFileSnapshot(lockedTarget.absolutePath);
+                        assertEditableTextFile(relPath, existing);
                         assertExpectedBridgeVersion(expectedVersionHash, existing?.versionHash, requireExpectedVersionHash);
                         if (pathname === "/write-file") {
                             const content = typeof body["content"] === "string"
@@ -1821,9 +2184,9 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
             })();
             return;
         }
-        if (req.method === "GET" || req.method === "HEAD") {
-            const sameOriginPreviewSubresource = readHeader(req, "sec-fetch-site") === "same-origin";
-            if (!previewTokenValid && !sameOriginPreviewSubresource) {
+        if (req.method &&
+            ["GET", "HEAD", "POST", "PUT", "PATCH", "DELETE"].includes(req.method)) {
+            if (!previewTokenValid) {
                 sendJson(res, 401, {
                     ok: false,
                     error: "invalid or missing preview token",
@@ -1832,12 +2195,31 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
             }
             void (async () => {
                 try {
-                    const targetUrl = resolvePreviewProxyUrl(manifest.devServerUrl, req.url);
-                    const proxied = await fetchPreviewProxyResource(manifest.devServerUrl, targetUrl, previewProxyRequestHeaders(req));
-                    sendBytes(res, proxied.status >= 400 ? proxied.status : 200, req.method === "HEAD" ? Buffer.alloc(0) : proxied.body, proxied.headers, proxied.body.length);
+                    const proxyRequestUrl = new URL(req.url ?? "/", manifest.bridgeUrl);
+                    proxyRequestUrl.searchParams.delete("previewToken");
+                    const targetUrl = resolvePreviewProxyUrl(manifest.devServerUrl, `${proxyRequestUrl.pathname}${proxyRequestUrl.search}`);
+                    const method = req.method ?? "GET";
+                    const requestBody = method === "GET" || method === "HEAD"
+                        ? undefined
+                        : await readPreviewProxyRequestBody(req);
+                    const cookieHeader = previewSessionCookies.headerFor(targetUrl);
+                    const proxied = await fetchPreviewProxyResource(manifest.devServerUrl, targetUrl, {
+                        method,
+                        headers: previewProxyRequestHeaders(req, manifest.devServerUrl, cookieHeader),
+                        body: requestBody,
+                    }, previewSessionCookies);
+                    const contentType = proxied.headers.get("content-type") ?? "";
+                    const documentNavigation = readHeader(req, "sec-fetch-dest") === "document";
+                    const responseBody = documentNavigation && contentType.includes("html")
+                        ? Buffer.from(injectLiveEditBridge(proxied.body.toString("utf8"), new URL("/", manifest.bridgeUrl).toString(), liveEditBridgeScript, (() => {
+                            const parsed = new URL(proxied.url);
+                            return `${parsed.pathname}${parsed.search}` || "/";
+                        })()))
+                        : proxied.body;
+                    sendBytes(res, proxied.status, method === "HEAD" ? Buffer.alloc(0) : responseBody, proxied.headers, responseBody.length, proxied.setCookieHeaders);
                 }
                 catch (err) {
-                    sendJson(res, 400, {
+                    sendJson(res, err instanceof PreviewProxyRequestTooLargeError ? 413 : 400, {
                         ok: false,
                         error: err instanceof Error ? err.message : String(err),
                     });
@@ -1847,6 +2229,81 @@ export async function startDesignConnectBridge(manifest, seedOrOptions) {
         }
         sendJson(res, 404, { ok: false, error: "not found" });
     });
+    // Vite's proxied /@vite/client derives its HMR socket from the document's
+    // bridge origin. Tunnel WebSocket upgrades to the one connected dev-server
+    // origin so Fast Refresh remains live inside URL-backed screens. The target
+    // is never caller-controlled, bridge credentials are stripped, and only a
+    // same-origin iframe (or an explicit preview-token caller) can open it.
+    server.on("upgrade", (req, clientSocket, clientHead) => {
+        const requestUrl = new URL(req.url ?? "/", manifest.bridgeUrl);
+        const providedPreviewToken = readHeader(req, "x-design-preview-token") ||
+            requestUrl.searchParams.get("previewToken") ||
+            readRequestCookie(req, PREVIEW_SESSION_COOKIE_NAME) ||
+            "";
+        const browserOrigin = readHeader(req, "origin");
+        const sameBridgeOrigin = browserOrigin === new URL(manifest.bridgeUrl).origin;
+        if (!constantTimeTokenMatches(providedPreviewToken, previewToken)) {
+            clientSocket.end("HTTP/1.1 401 Unauthorized\r\nConnection: close\r\nContent-Length: 0\r\n\r\n");
+            return;
+        }
+        requestUrl.searchParams.delete("previewToken");
+        let targetUrl;
+        try {
+            targetUrl = new URL(resolvePreviewProxyUrl(manifest.devServerUrl, `${requestUrl.pathname}${requestUrl.search}`));
+        }
+        catch {
+            clientSocket.end("HTTP/1.1 400 Bad Request\r\nConnection: close\r\nContent-Length: 0\r\n\r\n");
+            return;
+        }
+        const upstreamHeaders = { ...req.headers };
+        delete upstreamHeaders["x-bridge-token"];
+        delete upstreamHeaders["x-design-preview-token"];
+        delete upstreamHeaders["authorization"];
+        delete upstreamHeaders["cookie"];
+        upstreamHeaders.host = targetUrl.host;
+        upstreamHeaders.origin = new URL(manifest.devServerUrl).origin;
+        const cookie = mergePreviewCookieHeaders(previewSessionCookies.headerFor(targetUrl.toString()), sameBridgeOrigin ? readHeader(req, "cookie") : "");
+        if (cookie)
+            upstreamHeaders.cookie = cookie;
+        const requestImpl = targetUrl.protocol === "https:" ? https : http;
+        const upstreamRequest = requestImpl.request({
+            protocol: targetUrl.protocol,
+            hostname: targetUrl.hostname,
+            port: targetUrl.port,
+            path: `${targetUrl.pathname}${targetUrl.search}`,
+            method: "GET",
+            headers: upstreamHeaders,
+        });
+        upstreamRequest.on("upgrade", (upstreamResponse, upstreamSocket, upstreamHead) => {
+            const statusLine = `HTTP/1.1 ${upstreamResponse.statusCode ?? 101} ${upstreamResponse.statusMessage || "Switching Protocols"}\r\n`;
+            const headerLines = [];
+            for (let index = 0; index < upstreamResponse.rawHeaders.length; index += 2) {
+                const name = upstreamResponse.rawHeaders[index];
+                const value = upstreamResponse.rawHeaders[index + 1];
+                if (name && value !== undefined)
+                    headerLines.push(`${name}: ${value}`);
+            }
+            clientSocket.write(`${statusLine}${headerLines.join("\r\n")}\r\n\r\n`);
+            if (clientHead.length > 0)
+                upstreamSocket.write(clientHead);
+            if (upstreamHead.length > 0)
+                clientSocket.write(upstreamHead);
+            clientSocket.once("close", () => upstreamSocket.destroy());
+            upstreamSocket.once("close", () => clientSocket.destroy());
+            upstreamSocket.pipe(clientSocket);
+            clientSocket.pipe(upstreamSocket);
+        });
+        upstreamRequest.on("response", (upstreamResponse) => {
+            clientSocket.end(`HTTP/1.1 ${upstreamResponse.statusCode ?? 502} ${upstreamResponse.statusMessage || "WebSocket upgrade failed"}\r\nConnection: close\r\nContent-Length: 0\r\n\r\n`);
+            upstreamResponse.resume();
+        });
+        upstreamRequest.on("error", () => {
+            if (!clientSocket.destroyed) {
+                clientSocket.end("HTTP/1.1 502 Bad Gateway\r\nConnection: close\r\nContent-Length: 0\r\n\r\n");
+            }
+        });
+        upstreamRequest.end();
+    });
     await new Promise((resolve, reject) => {
         server.once("error", reject);
         server.listen(new URL(manifest.bridgeUrl).port, "127.0.0.1", () => {