anlyx 0.1.3 → 0.1.5

package/dist/dev-command.js

@@ -3,27 +3,26 @@ import { readFile } from "node:fs/promises";
 import { createRequire } from "node:module";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { scanResultSchema } from "@anlyx/core";
+import { buildFlowRecordFromBrowserEvent, mergeBackendSpansIntoFlowRecord, normalizeProjectInput, parseProjectData, scanResultSchema } from "@anlyx/core";
 import { createServer } from "vite";
 import { loadConfig } from "./config-loader.js";
-import { runScanCommand } from "./scan-command.js";
 const require = createRequire(import.meta.url);
 const activeLocalUiServers = new Set();
 export async function runDevCommand(options = {}) {
     const cwd = resolve(options.cwd ?? process.cwd());
     const dependencies = withDefaultDependencies(options.dependencies);
-    const config = await dependencies.loadConfig({
+    const config = await loadConfigOrViewerFallback(dependencies, {
         cwd,
         ...(options.configPath ? { configPath: options.configPath } : {})
     });
     const outputDir = resolve(cwd, options.outputDir ?? ".anlyx");
+    const projectDataPath = join(cwd, "anlyx.project.json");
+    const splitProjectDataPath = join(outputDir, "project", "index.json");
     const reportDataPath = join(outputDir, "report-data.json");
-    const { reportData, scanRan } = await ensureReportData({
-        cwd,
-        reportDataPath,
-        dependencies,
-        ...(options.configPath ? { configPath: options.configPath } : {}),
-        ...(options.outputDir ? { outputDir: options.outputDir } : {})
+    const loadedData = await ensureProjectData({
+        projectDataPath,
+        splitProjectDataPath,
+        dependencies
     });
     const frontendStarted = await ensureFrontendDevServer({
         cwd,
@@ -33,7 +32,7 @@ export async function runDevCommand(options = {}) {
     const port = options.port ?? getConfiguredPort(config);
     const server = await dependencies.createLocalUiServer({
         port,
-        reportData,
+        projectData: loadedData.data,
         viewerRoot: getViewerRoot(),
         frontendBaseUrl: config.frontend.baseUrl,
         mode: config.server.mode
@@ -47,14 +46,47 @@ export async function runDevCommand(options = {}) {
     return {
         url: server.url,
         port,
+        projectDataPath: loadedData.path,
         reportDataPath,
         mode: config.server.mode,
         frontendStarted,
-        scanRan,
         ...(config.server.mode === "inject" ? { frontendUrl: config.frontend.baseUrl } : {}),
         ...(config.server.mode === "inject" ? { scriptTag: getOverlayScriptTag(server.url) } : {})
     };
 }
+async function loadConfigOrViewerFallback(dependencies, options) {
+    try {
+        return await dependencies.loadConfig(options);
+    }
+    catch (error) {
+        if (!isMissingConfigError(error)) {
+            throw error;
+        }
+        return createViewerFallbackConfig();
+    }
+}
+function createViewerFallbackConfig() {
+    return {
+        projectName: "Anlyx Project JSON",
+        backend: {
+            type: "openapi",
+            openApiUrl: "about:blank"
+        },
+        frontend: {
+            type: "manual",
+            baseUrl: "http://localhost:4777",
+            urls: [],
+            viewport: { width: 1440, height: 900 },
+            capture: { mode: "segments", segmentHeight: 900 }
+        },
+        server: {
+            port: 4777,
+            openBrowser: true,
+            mode: "viewer"
+        },
+        dev: {}
+    };
+}
 export async function closeActiveLocalUiServers() {
     const servers = Array.from(activeLocalUiServers);
     activeLocalUiServers.clear();
@@ -62,33 +94,21 @@ export async function closeActiveLocalUiServers() {
         await server.close?.();
     }));
 }
-async function ensureReportData(options) {
-    try {
-        return {
-            reportData: await options.dependencies.readReportData(options.reportDataPath),
-            scanRan: false
-        };
-    }
-    catch (error) {
-        if (!isMissingReportDataError(error)) {
-            throw error;
+async function ensureProjectData(options) {
+    for (const path of [options.projectDataPath, options.splitProjectDataPath]) {
+        try {
+            return {
+                data: await options.dependencies.readProjectData(path),
+                path
+            };
+        }
+        catch (error) {
+            if (!isMissingProjectDataError(error)) {
+                throw error;
+            }
         }
     }
-    try {
-        await options.dependencies.runScanCommand({
-            cwd: options.cwd,
-            ...(options.configPath ? { configPath: options.configPath } : {}),
-            ...(options.outputDir ? { outputDir: options.outputDir } : {}),
-            skipCapture: true
-        });
-    }
-    catch (error) {
-        throw new Error(`Automatic scan failed: ${error instanceof Error ? error.message : "unknown error"}`);
-    }
-    return {
-        reportData: await options.dependencies.readReportData(options.reportDataPath),
-        scanRan: true
-    };
+    throw new Error('Anlyx project data not found. Create or import "anlyx.project.json" first.');
 }
 async function ensureFrontendDevServer(options) {
     const command = options.config.dev?.command;
@@ -104,8 +124,83 @@ async function ensureFrontendDevServer(options) {
     });
     return true;
 }
-function isMissingReportDataError(error) {
-    return error instanceof Error && /Run "anlyx scan" first/.test(error.message);
+function isMissingProjectDataError(error) {
+    return error instanceof Error && /Anlyx project data not found/.test(error.message);
+}
+function isMissingConfigError(error) {
+    return error instanceof Error && /Anlyx config file not found/.test(error.message);
+}
+export async function readProjectData(path) {
+    let content;
+    try {
+        content = await readFile(path, "utf8");
+    }
+    catch (error) {
+        if (isNodeError(error) && error.code === "ENOENT") {
+            throw new Error(`Anlyx project data not found: ${path}. Create anlyx.project.json first.`);
+        }
+        throw error;
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(content);
+    }
+    catch (error) {
+        throw new Error(`Failed to parse Anlyx project data JSON at ${path}: ${error instanceof Error ? error.message : "invalid JSON"}`);
+    }
+    try {
+        if (path.endsWith("/index.json")) {
+            return await readSplitProjectData(path, parsed);
+        }
+        return normalizeProjectInput(parseProjectData(parsed));
+    }
+    catch (error) {
+        throw new Error(`Invalid Anlyx project data at ${path}: ${error instanceof Error ? error.message : "invalid project data"}`);
+    }
+}
+async function readSplitProjectData(indexPath, index) {
+    const projectDir = dirname(indexPath);
+    const [areas, pages, features, requests, flows, architecture, evidence, measurements, dictionary] = await Promise.all([
+        readOptionalProjectJson(join(projectDir, "areas.json")),
+        readOptionalProjectJson(join(projectDir, "pages.json")),
+        readOptionalProjectJson(join(projectDir, "features.json")),
+        readOptionalProjectJson(join(projectDir, "requests.json")),
+        readOptionalProjectJson(join(projectDir, "flows.json")),
+        readOptionalProjectJson(join(projectDir, "architecture.json")),
+        readOptionalProjectJson(join(projectDir, "evidence.json")),
+        readOptionalProjectJson(join(projectDir, "measurements.json")),
+        readOptionalProjectJson(join(projectDir, "dictionary.json"))
+    ]);
+    return normalizeProjectInput({
+        index,
+        ...(areas === undefined ? {} : { areas }),
+        ...(pages === undefined ? {} : { pages }),
+        ...(features === undefined ? {} : { features }),
+        ...(requests === undefined ? {} : { requests }),
+        ...(flows === undefined ? {} : { flows }),
+        ...(architecture === undefined ? {} : { architecture }),
+        ...(evidence === undefined ? {} : { evidence }),
+        ...(measurements === undefined ? {} : { measurements }),
+        ...(dictionary === undefined ? {} : { dictionary })
+    });
+}
+async function readOptionalProjectJson(path) {
+    let content;
+    try {
+        content = await readFile(path, "utf8");
+    }
+    catch (error) {
+        if (isNodeError(error) && error.code === "ENOENT") {
+            return undefined;
+        }
+        throw error;
+    }
+    try {
+        return JSON.parse(content);
+    }
+    catch (error) {
+        throw new Error(`Failed to parse split Anlyx project JSON at ${path}: ${error instanceof Error ? error.message : "invalid JSON"}`);
+    }
 }
 export async function readReportData(path) {
     let content;
@@ -114,7 +209,7 @@ export async function readReportData(path) {
     }
     catch (error) {
         if (isNodeError(error) && error.code === "ENOENT") {
-            throw new Error(`Anlyx report data not found: ${path}. Run "anlyx scan" first.`);
+            throw new Error(`Anlyx report data not found: ${path}. Create or import "anlyx.project.json" first.`);
         }
         throw error;
     }
@@ -194,11 +289,12 @@ export function startFrontendDevServer(options) {
     };
 }
 function createAnlyxDevPlugin(options) {
+    const liveEvents = options.reportData ? createLiveEventRuntime(options.reportData) : undefined;
     return {
         name: "anlyx-dev-runtime",
         configureServer(server) {
             server.middlewares.use((request, response, next) => {
-                if (request.method === "GET" && options.mode === "viewer" && request.url === "/") {
+                if (isReadRequest(request.method) && options.mode === "viewer" && request.url === "/") {
                     request.url = "/viewer.html";
                 }
                 next();
@@ -211,10 +307,54 @@ function createAnlyxDevPlugin(options) {
                     response.end();
                     return;
                 }
+                if (request.method === "GET" && isProjectDataPath(requestUrl)) {
+                    if (!options.projectData) {
+                        sendJsonError(response, 404, new Error("Anlyx project data not loaded."));
+                        return;
+                    }
+                    sendJson(response, options.projectData);
+                    return;
+                }
                 if (request.method === "GET" && isReportDataPath(requestUrl)) {
+                    if (!options.reportData) {
+                        sendJsonError(response, 404, new Error("Legacy Anlyx report data not loaded."));
+                        return;
+                    }
                     sendJson(response, options.reportData);
                     return;
                 }
+                if (request.method === "GET" && requestUrl === "/_anlyx/events/stream") {
+                    if (!liveEvents) {
+                        sendJsonError(response, 404, new Error("Legacy live events are not available for project data."));
+                        return;
+                    }
+                    liveEvents.openStream(request, response);
+                    return;
+                }
+                if (request.method === "POST" && requestUrl === "/_anlyx/events/browser-request") {
+                    if (!liveEvents) {
+                        sendJsonError(response, 404, new Error("Legacy live events are not available for project data."));
+                        return;
+                    }
+                    await liveEvents.recordBrowserRequest(request, response);
+                    return;
+                }
+                if (request.method === "POST" && requestUrl === "/_anlyx/events/page-context") {
+                    if (!liveEvents) {
+                        sendJsonError(response, 404, new Error("Legacy live events are not available for project data."));
+                        return;
+                    }
+                    await liveEvents.recordPageContext(request, response);
+                    return;
+                }
+                if (request.method === "POST" && requestUrl === "/_anlyx/events/backend-spans") {
+                    if (!liveEvents) {
+                        sendJsonError(response, 404, new Error("Legacy live events are not available for project data."));
+                        return;
+                    }
+                    await liveEvents.recordBackendSpans(request, response);
+                    return;
+                }
                 if (request.method === "GET" && requestUrl === "/_anlyx/overlay.js") {
                     response.statusCode = 200;
                     setCorsHeaders(response);
@@ -236,7 +376,7 @@ function createAnlyxDevPlugin(options) {
                     response.end(getInjectModeHtml(options.frontendBaseUrl, getOverlayScriptTag(getServerUrl(options.port))));
                     return;
                 }
-                if (request.method === "GET" && isStandaloneViewerPath(requestUrl)) {
+                if (isReadRequest(request.method) && isStandaloneViewerPath(requestUrl)) {
                     request.url = "/viewer.html";
                     next();
                     return;
@@ -256,12 +396,137 @@ function createAnlyxDevPlugin(options) {
         }
     };
 }
+export function createLiveEventRuntime(reportData) {
+    const streams = new Set();
+    const recordsByRequestId = new Map();
+    const pendingSpansByRequestId = new Map();
+    let latestPageContext;
+    let recentRecords = [];
+    const rememberRecord = (record) => {
+        recordsByRequestId.set(record.requestId, record);
+        recentRecords = [record, ...recentRecords.filter((item) => item.id !== record.id)].slice(0, 90);
+    };
+    const broadcastRecord = (record) => {
+        rememberRecord(record);
+        for (const stream of streams) {
+            writeFlowSseEvent(stream, record);
+        }
+    };
+    const broadcastPageContext = (event) => {
+        latestPageContext = event;
+        for (const stream of streams) {
+            writePageContextSseEvent(stream, event);
+        }
+    };
+    return {
+        openStream(request, response) {
+            response.statusCode = 200;
+            setCorsHeaders(response);
+            response.setHeader("content-type", "text/event-stream; charset=utf-8");
+            response.setHeader("cache-control", "no-cache, no-transform");
+            response.setHeader("connection", "keep-alive");
+            response.write(": Anlyx event stream ready\n\n");
+            streams.add(response);
+            if (latestPageContext) {
+                writePageContextSseEvent(response, latestPageContext);
+            }
+            for (const record of [...recentRecords].reverse()) {
+                writeFlowSseEvent(response, record);
+            }
+            const heartbeat = setInterval(() => {
+                response.write(": heartbeat\n\n");
+            }, 30000);
+            request.on("close", () => {
+                clearInterval(heartbeat);
+                streams.delete(response);
+                response.end();
+            });
+        },
+        async recordBrowserRequest(request, response) {
+            let payload;
+            try {
+                payload = await readJsonRequestBody(request);
+            }
+            catch (error) {
+                sendJsonError(response, 400, error);
+                return;
+            }
+            if (!isBrowserRequestEvent(payload)) {
+                sendJsonError(response, 400, new Error("Invalid Anlyx browser request event payload."));
+                return;
+            }
+            const event = withRequestPageContext(payload, request, latestPageContext);
+            if (event.pageUrl) {
+                latestPageContext = {
+                    type: "page_context",
+                    pageUrl: event.pageUrl,
+                    contextId: event.contextId ?? pageContextId(event.pageUrl),
+                    observedAt: event.observedAt
+                };
+            }
+            let record = buildFlowRecordFromBrowserEvent(event, reportData);
+            const pendingSpans = pendingSpansByRequestId.get(event.id);
+            if (pendingSpans) {
+                pendingSpansByRequestId.delete(event.id);
+                record = mergeBackendSpansIntoFlowRecord(record, pendingSpans);
+            }
+            broadcastRecord(record);
+            sendAccepted(response, { accepted: true, id: record.id });
+        },
+        async recordPageContext(request, response) {
+            let payload;
+            try {
+                payload = await readJsonRequestBody(request);
+            }
+            catch (error) {
+                sendJsonError(response, 400, error);
+                return;
+            }
+            if (!isPageContextEvent(payload)) {
+                sendJsonError(response, 400, new Error("Invalid Anlyx page context event payload."));
+                return;
+            }
+            broadcastPageContext(payload);
+            sendAccepted(response, { accepted: true, contextId: payload.contextId });
+        },
+        async recordBackendSpans(request, response) {
+            let payload;
+            try {
+                payload = await readJsonRequestBody(request);
+            }
+            catch (error) {
+                sendJsonError(response, 400, error);
+                return;
+            }
+            if (!isBackendSpanEvent(payload)) {
+                sendJsonError(response, 400, new Error("Invalid Anlyx backend span event payload."));
+                return;
+            }
+            const existingRecord = recordsByRequestId.get(payload.requestId);
+            if (!existingRecord) {
+                const existingSpans = pendingSpansByRequestId.get(payload.requestId) ?? [];
+                pendingSpansByRequestId.set(payload.requestId, [...existingSpans, ...payload.spans]);
+                sendAccepted(response, { accepted: true, pending: true, requestId: payload.requestId });
+                return;
+            }
+            const record = mergeBackendSpansIntoFlowRecord(existingRecord, payload.spans);
+            broadcastRecord(record);
+            sendAccepted(response, { accepted: true, id: record.id });
+        }
+    };
+}
 function isReportDataPath(path) {
     return path === "/_anlyx/report-data" || path === "/api/report-data";
 }
+function isProjectDataPath(path) {
+    return path === "/_anlyx/project-data" || path === "/api/project-data";
+}
 function isStandaloneViewerPath(path) {
     return path === "/_anlyx/viewer" || path === "/_anlyx/viewer.html";
 }
+function isReadRequest(method) {
+    return method === "GET" || method === "HEAD";
+}
 function isAnlyxPath(path) {
     return path.startsWith("/_anlyx/");
 }
@@ -271,6 +536,130 @@ function sendJson(response, value) {
     response.setHeader("content-type", "application/json; charset=utf-8");
     response.end(JSON.stringify(value));
 }
+function sendAccepted(response, value) {
+    response.statusCode = 202;
+    setCorsHeaders(response);
+    response.setHeader("content-type", "application/json; charset=utf-8");
+    response.end(JSON.stringify(value));
+}
+function sendJsonError(response, statusCode, error) {
+    response.statusCode = statusCode;
+    setCorsHeaders(response);
+    response.setHeader("content-type", "application/json; charset=utf-8");
+    response.end(JSON.stringify({
+        error: error instanceof Error ? error.message : "Invalid Anlyx runtime event."
+    }));
+}
+async function readJsonRequestBody(request) {
+    const body = await readRequestBody(request);
+    if (!body || body.byteLength === 0) {
+        throw new Error("Missing JSON request body.");
+    }
+    try {
+        return JSON.parse(body.toString("utf8"));
+    }
+    catch (error) {
+        throw new Error(`Failed to parse Anlyx runtime event JSON: ${error instanceof Error ? error.message : "invalid JSON"}`);
+    }
+}
+function writeFlowSseEvent(response, record) {
+    response.write("event: flow\n");
+    response.write(`data: ${JSON.stringify(record)}\n\n`);
+}
+function writePageContextSseEvent(response, event) {
+    response.write("event: page-context\n");
+    response.write(`data: ${JSON.stringify(event)}\n\n`);
+}
+function withRequestPageContext(event, request, latestPageContext) {
+    const pageUrl = event.pageUrl ?? pageUrlFromReferer(request.headers.referer) ?? latestPageContext?.pageUrl;
+    if (!pageUrl) {
+        return event;
+    }
+    return {
+        ...event,
+        pageUrl,
+        contextId: event.contextId ?? latestPageContext?.contextId ?? pageContextId(pageUrl)
+    };
+}
+function pageUrlFromReferer(referer) {
+    const value = Array.isArray(referer) ? referer[0] : referer;
+    if (!value) {
+        return undefined;
+    }
+    try {
+        const parsed = new URL(value);
+        if (parsed.pathname.startsWith("/_anlyx/")) {
+            return undefined;
+        }
+        return `${parsed.origin}${parsed.pathname}${parsed.search}`;
+    }
+    catch {
+        return undefined;
+    }
+}
+function pageContextId(pageUrl) {
+    try {
+        const parsed = new URL(pageUrl);
+        return `page:${parsed.pathname}${parsed.search}`;
+    }
+    catch {
+        return `page:${pageUrl || "/"}`;
+    }
+}
+function isPageContextEvent(value) {
+    if (!value || typeof value !== "object") {
+        return false;
+    }
+    const event = value;
+    return (event.type === "page_context" &&
+        typeof event.pageUrl === "string" &&
+        typeof event.contextId === "string" &&
+        typeof event.observedAt === "string");
+}
+function isBrowserRequestEvent(value) {
+    if (!value || typeof value !== "object") {
+        return false;
+    }
+    const event = value;
+    return (event.type === "request" &&
+        typeof event.id === "string" &&
+        typeof event.method === "string" &&
+        typeof event.url === "string" &&
+        typeof event.observedAt === "string" &&
+        (event.path === undefined || typeof event.path === "string") &&
+        (event.pageUrl === undefined || typeof event.pageUrl === "string") &&
+        (event.status === undefined || typeof event.status === "number") &&
+        (event.durationMs === undefined || typeof event.durationMs === "number") &&
+        (event.contextId === undefined || typeof event.contextId === "string") &&
+        (event.priority === undefined ||
+            event.priority === "primary" ||
+            event.priority === "background") &&
+        (event.runtimeSource === undefined ||
+            event.runtimeSource === "browser" ||
+            event.runtimeSource === "server" ||
+            event.runtimeSource === "unknown"));
+}
+function isBackendSpanEvent(value) {
+    if (!value || typeof value !== "object") {
+        return false;
+    }
+    const event = value;
+    return (event.type === "backend_spans" &&
+        typeof event.requestId === "string" &&
+        Array.isArray(event.spans) &&
+        event.spans.every(isBackendObservedSpan));
+}
+function isBackendObservedSpan(value) {
+    if (!value || typeof value !== "object") {
+        return false;
+    }
+    const span = value;
+    return (typeof span.id === "string" &&
+        typeof span.type === "string" &&
+        typeof span.label === "string" &&
+        typeof span.startOffsetMs === "number" &&
+        typeof span.durationMs === "number");
+}
 async function sendRuntimeAsset(response, path, contentType) {
     try {
         const content = await readFile(path);
@@ -288,8 +677,8 @@ async function sendRuntimeAsset(response, path, contentType) {
 }
 function setCorsHeaders(response) {
     response.setHeader("access-control-allow-origin", "*");
-    response.setHeader("access-control-allow-methods", "GET, OPTIONS");
-    response.setHeader("access-control-allow-headers", "content-type");
+    response.setHeader("access-control-allow-methods", "GET, POST, OPTIONS");
+    response.setHeader("access-control-allow-headers", "content-type, x-anlyx-request-id");
 }
 function getServerUrl(port) {
     return `http://localhost:${port}`;
@@ -660,6 +1049,7 @@ export function getOverlayClientScript() {
       installUserActionTracker(root);
       installFetchInterceptor();
       installXhrInterceptor();
+      installPageContextReporter();
       loadReport();
     }
 
@@ -952,22 +1342,49 @@ export function getOverlayClientScript() {
     window.fetch = async function anlyxFetch(input, init) {
       const method = ((init && init.method) || (input && input.method) || "GET").toUpperCase();
       const url = typeof input === "string" ? input : input && input.url;
+      const shouldTrack = shouldTrackRequestUrl(url);
+      const requestId = shouldTrack ? createRequestId() : null;
+      const args = requestId ? withAnlyxFetchRequestId(input, init, requestId) : arguments;
       const startedAt = performance.now();
       try {
-        const response = await originalFetch.apply(this, arguments);
-        if (shouldTrackRequestUrl(url)) {
-          scheduleApiEventRecord({ method, url, status: response.status, durationMs: performance.now() - startedAt, startedAt });
+        const response = await originalFetch.apply(this, args);
+        if (shouldTrack) {
+          scheduleApiEventRecord({ id: requestId, method, url, status: response.status, durationMs: performance.now() - startedAt, startedAt });
         }
         return response;
       } catch (error) {
-        if (shouldTrackRequestUrl(url)) {
-          scheduleApiEventRecord({ method, url, status: "failed", durationMs: performance.now() - startedAt, startedAt });
+        if (shouldTrack) {
+          scheduleApiEventRecord({ id: requestId, method, url, status: "failed", durationMs: performance.now() - startedAt, startedAt });
         }
         throw error;
       }
     };
   }
 
+  function createRequestId() {
+    return "anlyx-" + Date.now() + "-" + Math.random().toString(36).slice(2);
+  }
+
+  function withAnlyxFetchRequestId(input, init, requestId) {
+    const nextInit = Object.assign({}, init || {});
+    nextInit.headers = appendHeader(nextInit.headers || (input && input.headers), "X-Anlyx-Request-Id", requestId);
+    return [input, nextInit];
+  }
+
+  function appendHeader(headers, name, value) {
+    try {
+      if (typeof Headers !== "undefined") {
+        const nextHeaders = new Headers(headers || {});
+        nextHeaders.set(name, value);
+        return nextHeaders;
+      }
+    } catch {
+      // Fall through to a plain object header bag when Headers cannot clone input.
+    }
+
+    return Object.assign({}, headers || {}, { [name]: value });
+  }
+
   function installUserActionTracker(root) {
     document.addEventListener("pointerdown", (event) => captureUserAction(event, root), true);
     document.addEventListener("click", (event) => captureUserAction(event, root), true);
@@ -1093,7 +1510,13 @@ export function getOverlayClientScript() {
     const originalSend = XMLHttpRequest.prototype.send;
 
     XMLHttpRequest.prototype.open = function anlyxOpen(method, url) {
-      this.__anlyxRequest = { method: String(method || "GET").toUpperCase(), url: String(url || ""), startedAt: 0 };
+      const requestUrl = String(url || "");
+      this.__anlyxRequest = {
+        id: shouldTrackRequestUrl(requestUrl) ? createRequestId() : null,
+        method: String(method || "GET").toUpperCase(),
+        url: requestUrl,
+        startedAt: 0
+      };
       return originalOpen.apply(this, arguments);
     };
 
@@ -1101,9 +1524,17 @@ export function getOverlayClientScript() {
       const request = this.__anlyxRequest;
       if (request) {
         request.startedAt = performance.now();
+        if (request.id && this.setRequestHeader) {
+          try {
+            this.setRequestHeader("X-Anlyx-Request-Id", request.id);
+          } catch {
+            // Ignore header injection failures; the browser event can still be observed.
+          }
+        }
         this.addEventListener("loadend", () => {
           if (shouldTrackRequestUrl(request.url)) {
             scheduleApiEventRecord({
+              id: request.id,
               method: request.method,
               url: request.url,
               status: this.status || "unknown",
@@ -1131,14 +1562,16 @@ export function getOverlayClientScript() {
     const passive = isPassiveRequest(event.method, normalized.pathname);
     const triggeredBy = passive ? null : findActionForRequest(event.startedAt);
     const item = {
-      id: String(Date.now()) + "-" + Math.random().toString(36).slice(2),
+      id: event.id || createRequestId(),
       method: event.method,
       path: normalized.pathname,
       status: event.status,
       durationMs: Math.round(event.durationMs),
       count: 1,
+      contextId: getCurrentContextId(),
       lastSeenAt: Date.now(),
       triggeredBy,
+      priority: passive ? "background" : "primary",
       source: triggeredBy ? "action" : classifyApiEventSource(normalized.pathname),
       matchedEndpoint: matched.endpoint,
       matchedFlow: matched.flow,
@@ -1152,8 +1585,10 @@ export function getOverlayClientScript() {
         status: item.status,
         durationMs: item.durationMs,
         count: (existing.count || 1) + 1,
+        contextId: item.contextId,
         lastSeenAt: item.lastSeenAt,
         triggeredBy: item.triggeredBy || existing.triggeredBy,
+        priority: item.priority,
         source: item.triggeredBy ? "action" : item.source,
         matchedEndpoint: item.matchedEndpoint,
         matchedFlow: item.matchedFlow,
@@ -1166,6 +1601,7 @@ export function getOverlayClientScript() {
         state.open = true;
       }
       render();
+      sendBrowserRequestEvent(updated);
       return;
     }
 
@@ -1176,12 +1612,124 @@ export function getOverlayClientScript() {
       state.open = true;
     }
     render();
+    sendBrowserRequestEvent(item);
+  }
+
+  function sendBrowserRequestEvent(item) {
+    if (!window.fetch || !item || item.source === "anlyx") {
+      return;
+    }
+
+    const payload = {
+      id: item.id,
+      type: "request",
+      method: item.method,
+      url: item.path,
+      path: item.path,
+      pageUrl: getCurrentPageUrl(),
+      status: typeof item.status === "number" ? item.status : undefined,
+      durationMs: typeof item.durationMs === "number" ? item.durationMs : undefined,
+      observedAt: new Date(item.lastSeenAt || Date.now()).toISOString(),
+      contextId: item.contextId,
+      priority: item.priority === "background" ? "background" : "primary",
+      runtimeSource: "browser",
+      action: item.triggeredBy ? {
+        label: item.triggeredBy.label,
+        selector: item.triggeredBy.selector,
+        observedAt: new Date(item.triggeredBy.capturedAt || item.lastSeenAt || Date.now()).toISOString()
+      } : undefined
+    };
+
+    try {
+      window.fetch(runtimeBaseUrl + "/_anlyx/events/browser-request", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(payload),
+        keepalive: true
+      }).catch(() => undefined);
+    } catch {
+      // Runtime ingestion is best-effort and must never break the user's app.
+    }
   }
 
   function shouldAutoFocusEvent(item) {
     return Boolean(item && item.triggeredBy);
   }
 
+  function getCurrentContextId() {
+    const path = window.location && window.location.pathname ? window.location.pathname : "/";
+    const search = window.location && window.location.search ? window.location.search : "";
+    return "page:" + path + search;
+  }
+
+  function getCurrentPageUrl() {
+    if (!window.location) {
+      return "/";
+    }
+
+    return window.location.href.split("#")[0] || "/";
+  }
+
+  function installPageContextReporter() {
+    let lastPageUrl = "";
+    let timer = null;
+
+    const schedulePageContext = () => {
+      if (timer !== null) {
+        window.clearTimeout(timer);
+      }
+      timer = window.setTimeout(() => {
+        timer = null;
+        sendPageContextEvent();
+      }, 0);
+    };
+
+    const wrapHistoryMethod = (methodName) => {
+      const original = window.history && window.history[methodName];
+      if (!original || original.__anlyxWrapped) {
+        return;
+      }
+
+      const wrapped = function anlyxHistoryWrapper() {
+        const result = original.apply(this, arguments);
+        schedulePageContext();
+        return result;
+      };
+      wrapped.__anlyxWrapped = true;
+      window.history[methodName] = wrapped;
+    };
+
+    const sendPageContextEvent = () => {
+      const pageUrl = getCurrentPageUrl();
+      if (!pageUrl || pageUrl === lastPageUrl) {
+        return;
+      }
+      lastPageUrl = pageUrl;
+
+      try {
+        window.fetch(runtimeBaseUrl + "/_anlyx/events/page-context", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            type: "page_context",
+            pageUrl,
+            contextId: getCurrentContextId(),
+            observedAt: new Date().toISOString()
+          }),
+          keepalive: true
+        }).catch(() => undefined);
+      } catch {
+        // Page context reporting is best-effort and must never affect the app.
+      }
+    };
+
+    wrapHistoryMethod("pushState");
+    wrapHistoryMethod("replaceState");
+    window.addEventListener("popstate", schedulePageContext);
+    window.addEventListener("hashchange", schedulePageContext);
+    sendPageContextEvent();
+  }
+
   function brieflyExpandLauncher() {
     launcherSettings.expandedUntil = Date.now() + 2600;
     applyLauncherSettings();
@@ -1316,7 +1864,20 @@ export function getOverlayClientScript() {
 
   function shouldTrackRequestUrl(value) {
     const normalized = normalizeUrl(value);
-    return Boolean(normalized && !shouldIgnoreRequest(normalized));
+    return Boolean(normalized && isLocalProjectOrigin(normalized) && !shouldIgnoreRequest(normalized));
+  }
+
+  function isLocalProjectOrigin(url) {
+    if (url.origin === window.location.origin) {
+      return true;
+    }
+
+    return (
+      url.hostname === "localhost" ||
+      url.hostname === "127.0.0.1" ||
+      url.hostname === "[::1]" ||
+      url.hostname === "::1"
+    );
   }
 
   function matchEndpoint(method, path) {
@@ -1460,8 +2021,8 @@ export function getOverlayClientScript() {
 function withDefaultDependencies(dependencies) {
     return {
         loadConfig: dependencies?.loadConfig ?? loadConfig,
+        readProjectData: dependencies?.readProjectData ?? readProjectData,
         readReportData: dependencies?.readReportData ?? readReportData,
-        runScanCommand: dependencies?.runScanCommand ?? runScanCommand,
         createLocalUiServer: dependencies?.createLocalUiServer ?? createLocalUiServer,
         isFrontendReachable: dependencies?.isFrontendReachable ?? isFrontendReachable,
         startFrontendDevServer: dependencies?.startFrontendDevServer ?? startFrontendDevServer,