@anlyx/ui 0.1.3 → 0.1.5

package/README.md

@@ -1,5 +1,6 @@
 # @anlyx/ui
 
-React UI components and the local viewer shell for Anlyx.
+React UI components and the local Pages / Map / JSON viewer shell for Anlyx.
 
-See the root Anlyx README for v0.1 usage and scope.
+The UI renders validated Project JSON. It must not invent real project pages,
+requests, architecture, or timing data.

package/dist/capture/capture-runtime.d.ts

@@ -0,0 +1,14 @@
+export type CaptureRuntimeOptions = {
+    runtimeBaseUrl?: string;
+    ingestPath?: string;
+    actionWindowMs?: number;
+    now?: () => number;
+    fetchImpl?: typeof fetch;
+};
+declare global {
+    interface Window {
+        __ANLYX_CAPTURE_INSTALLED__?: boolean;
+        __ANLYX_RUNTIME_BASE_URL__?: string;
+    }
+}
+export declare function installAnlyxCaptureRuntime(options?: CaptureRuntimeOptions): () => void;

package/dist/capture/capture-runtime.js

@@ -0,0 +1,300 @@
+const DEFAULT_RUNTIME_BASE_URL = "http://localhost:4777";
+const DEFAULT_INGEST_PATH = "/_anlyx/events";
+const DEFAULT_ACTION_WINDOW_MS = 2_000;
+let eventSequence = 0;
+export function installAnlyxCaptureRuntime(options = {}) {
+    const runtimeBaseUrl = options.runtimeBaseUrl ?? window.__ANLYX_RUNTIME_BASE_URL__ ?? DEFAULT_RUNTIME_BASE_URL;
+    const ingestPath = options.ingestPath ?? DEFAULT_INGEST_PATH;
+    const actionWindowMs = options.actionWindowMs ?? DEFAULT_ACTION_WINDOW_MS;
+    const now = options.now ?? Date.now;
+    const ingestUrl = new URL(ingestPath, runtimeBaseUrl).toString();
+    const originalFetch = options.fetchImpl ?? window.fetch;
+    const originalWindowFetch = window.fetch;
+    const originalOpen = window.XMLHttpRequest?.prototype.open;
+    const originalSend = window.XMLHttpRequest?.prototype.send;
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    const xhrMetadata = new WeakMap();
+    let latestAction;
+    let latestPagePath = "";
+    function observeClick(event) {
+        const target = event.target instanceof Element ? event.target : null;
+        if (!target) {
+            return;
+        }
+        const text = readableText(target);
+        latestAction = {
+            label: readableLabel(target, text),
+            selector: selectorFor(target),
+            observedAt: observedAt(now),
+            capturedAt: now()
+        };
+        if (text) {
+            latestAction.text = text;
+        }
+    }
+    function postEvent(event) {
+        if (!originalFetch) {
+            return;
+        }
+        void originalFetch(ingestUrl, {
+            body: JSON.stringify(event),
+            headers: { "content-type": "application/json" },
+            keepalive: true,
+            method: "POST"
+        }).catch(() => { });
+    }
+    function observePageView() {
+        const normalized = normalizeUrl(window.location.href);
+        if (shouldIgnorePagePath(normalized.path) || normalized.path === latestPagePath) {
+            return;
+        }
+        latestPagePath = normalized.path;
+        postEvent({
+            id: `page-view:${now()}:${++eventSequence}`,
+            type: "page_view",
+            url: normalized.href,
+            path: normalized.path,
+            title: document.title,
+            observedAt: observedAt(now)
+        });
+    }
+    function buildEvent(metadata, status) {
+        const normalized = normalizeUrl(metadata.url);
+        if (shouldIgnoreUrl(normalized, ingestUrl, ingestPath)) {
+            return undefined;
+        }
+        const event = {
+            id: metadata.id,
+            type: "request",
+            method: metadata.method.toUpperCase(),
+            url: normalized.href,
+            path: normalized.path,
+            durationMs: Math.max(0, now() - metadata.startedAt),
+            observedAt: observedAt(now)
+        };
+        if (status !== undefined) {
+            event.status = status;
+        }
+        const action = consumeFreshAction(metadata.startedAt, normalized);
+        if (action) {
+            event.action = action;
+        }
+        return event;
+    }
+    function consumeFreshAction(startedAt, normalized) {
+        if (!latestAction) {
+            return undefined;
+        }
+        if (!isActionRequestTarget(normalized)) {
+            return undefined;
+        }
+        const { capturedAt, ...action } = latestAction;
+        if (startedAt - capturedAt > actionWindowMs) {
+            latestAction = undefined;
+            return undefined;
+        }
+        latestAction = undefined;
+        return action;
+    }
+    function wrappedFetch(input, init) {
+        const metadata = metadataFromFetchInput(input, init, now);
+        const normalized = normalizeUrl(metadata.url);
+        const requestInit = isActionRequestTarget(normalized)
+            ? withAnlyxRequestHeader(init, metadata.id)
+            : init;
+        return originalFetch(input, requestInit)
+            .then((response) => {
+            const event = buildEvent(metadata, response.status);
+            if (event) {
+                postEvent(event);
+            }
+            return response;
+        })
+            .catch((error) => {
+            const event = buildEvent(metadata);
+            if (event) {
+                postEvent(event);
+            }
+            throw error;
+        });
+    }
+    function wrappedOpen(method, url, async, username, password) {
+        xhrMetadata.set(this, {
+            id: nextRequestId(now),
+            method,
+            url: String(url),
+            startedAt: 0
+        });
+        return originalOpen.call(this, method, url, async ?? true, username, password);
+    }
+    function wrappedSend(body) {
+        const metadata = xhrMetadata.get(this);
+        if (metadata) {
+            metadata.startedAt = now();
+            const normalized = normalizeUrl(metadata.url);
+            if (isActionRequestTarget(normalized)) {
+                try {
+                    this.setRequestHeader("X-Anlyx-Request-Id", metadata.id);
+                }
+                catch {
+                    // Some XHR states or environments can reject late header writes. Capture still continues.
+                }
+            }
+            this.addEventListener("loadend", () => {
+                const event = buildEvent(metadata, this.status);
+                if (event) {
+                    postEvent(event);
+                }
+            }, { once: true });
+        }
+        return originalSend.call(this, body);
+    }
+    function wrappedPushState(data, unused, url) {
+        const result = originalPushState.call(this, data, unused, url);
+        queuePageView();
+        return result;
+    }
+    function wrappedReplaceState(data, unused, url) {
+        const result = originalReplaceState.call(this, data, unused, url);
+        queuePageView();
+        return result;
+    }
+    function queuePageView() {
+        window.setTimeout(observePageView, 0);
+    }
+    document.addEventListener("click", observeClick, true);
+    window.addEventListener("popstate", queuePageView);
+    window.fetch = wrappedFetch;
+    window.history.pushState = wrappedPushState;
+    window.history.replaceState = wrappedReplaceState;
+    window.XMLHttpRequest.prototype.open = wrappedOpen;
+    window.XMLHttpRequest.prototype.send = wrappedSend;
+    window.__ANLYX_CAPTURE_INSTALLED__ = true;
+    queuePageView();
+    return () => {
+        document.removeEventListener("click", observeClick, true);
+        window.removeEventListener("popstate", queuePageView);
+        window.fetch = originalWindowFetch;
+        window.history.pushState = originalPushState;
+        window.history.replaceState = originalReplaceState;
+        window.XMLHttpRequest.prototype.open = originalOpen;
+        window.XMLHttpRequest.prototype.send = originalSend;
+        window.__ANLYX_CAPTURE_INSTALLED__ = false;
+    };
+}
+function metadataFromFetchInput(input, init, now) {
+    if (input instanceof Request) {
+        return {
+            id: nextRequestId(now),
+            method: init?.method ?? input.method ?? "GET",
+            url: input.url,
+            startedAt: now()
+        };
+    }
+    return {
+        id: nextRequestId(now),
+        method: init?.method ?? "GET",
+        url: String(input),
+        startedAt: now()
+    };
+}
+function nextRequestId(now) {
+    return `browser-request:${now()}:${++eventSequence}`;
+}
+function withAnlyxRequestHeader(init, requestId) {
+    const headers = new Headers(init?.headers);
+    headers.set("X-Anlyx-Request-Id", requestId);
+    return {
+        ...init,
+        headers
+    };
+}
+function normalizeUrl(urlOrPath) {
+    const url = new URL(urlOrPath, window.location.href);
+    return {
+        href: url.toString(),
+        path: `${url.pathname}${url.search}`
+    };
+}
+function shouldIgnoreUrl(normalized, ingestUrl, ingestPath) {
+    if (normalized.href === ingestUrl || normalized.path === ingestPath) {
+        return true;
+    }
+    if (normalized.path.includes("/_anlyx")) {
+        return true;
+    }
+    if (normalized.path.startsWith("/@vite") ||
+        normalized.path.startsWith("/@react-refresh") ||
+        normalized.path.startsWith("/__vite") ||
+        normalized.path.startsWith("/node_modules/")) {
+        return true;
+    }
+    if (normalized.path === "/favicon.ico") {
+        return true;
+    }
+    if (new URL(normalized.href).searchParams.has("_rsc")) {
+        return true;
+    }
+    return /\.(?:avif|css|eot|gif|ico|jpe?g|js|map|mjs|png|svg|ts|tsx|ttf|webp|woff2?)($|\?)/i.test(normalized.path);
+}
+function shouldIgnorePagePath(path) {
+    return (path.includes("/_anlyx") ||
+        path.startsWith("/@vite") ||
+        path.startsWith("/@react-refresh") ||
+        path.startsWith("/__vite") ||
+        path.startsWith("/node_modules/") ||
+        /\.(?:avif|css|eot|gif|ico|jpe?g|js|map|mjs|png|svg|ts|tsx|ttf|webp|woff2?)($|\?)/i.test(path));
+}
+function isActionRequestTarget(normalized) {
+    return normalized.path.startsWith("/api/");
+}
+function observedAt(now) {
+    return new Date(now()).toISOString();
+}
+function readableText(element) {
+    return element.textContent?.replace(/\s+/g, " ").trim() || undefined;
+}
+function readableLabel(element, text) {
+    return (element.getAttribute("aria-label") ||
+        element.getAttribute("title") ||
+        element.getAttribute("alt") ||
+        valueFor(element) ||
+        text ||
+        element.tagName.toLowerCase());
+}
+function valueFor(element) {
+    if (element instanceof HTMLInputElement || element instanceof HTMLButtonElement) {
+        return element.value || undefined;
+    }
+    return undefined;
+}
+function selectorFor(element) {
+    const id = element.getAttribute("id");
+    if (id) {
+        return `#${cssIdentifierEscape(id)}`;
+    }
+    const testId = element.getAttribute("data-testid");
+    if (testId) {
+        return `[data-testid="${cssStringEscape(testId)}"]`;
+    }
+    const parts = [];
+    let current = element;
+    while (current && current !== document.body && parts.length < 4) {
+        const tagName = current.tagName.toLowerCase();
+        const className = Array.from(current.classList)
+            .slice(0, 2)
+            .map((name) => `.${cssIdentifierEscape(name)}`);
+        parts.unshift(`${tagName}${className.join("")}`);
+        current = current.parentElement;
+    }
+    return parts.length > 0 ? parts.join(" > ") : element.tagName.toLowerCase();
+}
+function cssStringEscape(value) {
+    return value.replace(/["\\]/g, "\\$&");
+}
+function cssIdentifierEscape(value) {
+    return globalThis.CSS?.escape
+        ? globalThis.CSS.escape(value)
+        : value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+}

package/dist/components/CaptureStatusEmptyState.js

@@ -5,7 +5,7 @@ export function CaptureStatusEmptyState({ status, reason }) {
     }
     const title = status === "failed" ? "Capture failed" : "Capture was skipped.";
     const fallbackReason = status === "pending"
-        ? "Run `anlyx scan` without `--skip-capture` while your frontend server is running."
+        ? "The imported Flow JSON did not include page capture evidence."
         : "Unknown";
-    return (_jsxs("section", { className: `anlyx-capture-state anlyx-capture-state--${status}`, children: [_jsx("h2", { children: title }), _jsxs("p", { children: ["Reason: ", reason ?? fallbackReason] }), status === "pending" ? (_jsx("p", { children: "Dynamic routes may require `sampleParams` in `anlyx.config.ts`." })) : null] }));
+    return (_jsxs("section", { className: `anlyx-capture-state anlyx-capture-state--${status}`, children: [_jsx("h2", { children: title }), _jsxs("p", { children: ["Reason: ", reason ?? fallbackReason] }), status === "pending" ? (_jsx("p", { children: "Add page evidence to Flow JSON, then run `anlyx import` again." })) : null] }));
 }

package/dist/components/EndpointMapCanvas.js

@@ -73,7 +73,7 @@ export function EndpointMapCanvas({ endpoint, flow, selectedNodeId, title, eyebr
             data: nextData
         };
     }) ?? [], [model, replayState?.activeEdge]);
-    return (_jsxs("main", { className: `anlyx-workspace anlyx-workspace--${variant}`, children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: eyebrow }), _jsx("h1", { children: title ?? (endpoint ? `${endpoint.method} ${endpoint.path}` : "No endpoint selected") })] }), _jsxs("div", { className: "anlyx-workspace-actions", children: [toolbar, endpoint ? (_jsx(StatusBadge, { tone: endpoint.confidence ?? "unknown", children: endpoint.confidence ?? "unknown" })) : null] })] }), _jsx("section", { className: `anlyx-endpoint-map anlyx-endpoint-map--${variant}`, role: "region", "aria-label": variant === "process" ? "Process Flow map" : "Endpoint Map", children: flow && model && model.nodes.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(FlowLegend, { variant: variant }), _jsx("ul", { className: "anlyx-sr-only", "aria-label": "Endpoint map node list", children: nodes.map((node) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onSelectNode(node.data.node), children: ["Select node ", node.data.label] }) }, node.id))) }), _jsx("ul", { className: "anlyx-sr-only", "aria-label": "Replay node state", children: nodes.map((node) => (_jsx("li", { "data-replay-active": String(Boolean(node.data.isReplayActive)), "data-testid": `replay-node-${node.id}`, children: node.id }, node.id))) }), _jsx("ul", { className: "anlyx-sr-only", "aria-label": "Replay edge state", children: edges.map((edge) => (_jsxs("li", { "data-replay-active": String(Boolean(edge.data?.isReplayActive)), "data-testid": `replay-edge-${edge.source}-${edge.target}`, children: [edge.source, " to ", edge.target] }, edge.id))) }), _jsxs(ReactFlow, { className: "anlyx-react-flow", edges: edges, fitView: true, fitViewOptions: { padding: 0.18 }, maxZoom: 1.35, minZoom: 0.62, nodes: nodes, nodesConnectable: false, nodesDraggable: false, edgeTypes: edgeTypes, nodeTypes: nodeTypes, onNodeClick: (_, node) => onSelectNode(node.data.node), panOnScroll: true, proOptions: { hideAttribution: true }, zoomOnDoubleClick: false, zoomOnScroll: false, children: [_jsx(Background, { color: "#dfe5ee", gap: 24, variant: BackgroundVariant.Dots }), _jsx(Controls, { showInteractive: false })] })] })) : (_jsxs("div", { className: "anlyx-endpoint-map-empty", role: "status", "aria-label": "Flow unavailable", children: [_jsx("span", { children: "Flow unavailable" }), _jsx("h2", { children: "No scanned flow for this endpoint yet" }), _jsx("p", { children: "Anlyx can list this endpoint, but no Controller -> Service -> Repository path was found." }), _jsx("p", { children: "Check that the backend source directory is configured, then run `anlyx scan` again." })] })) })] }));
+    return (_jsxs("main", { className: `anlyx-workspace anlyx-workspace--${variant}`, children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: eyebrow }), _jsx("h1", { children: title ?? (endpoint ? `${endpoint.method} ${endpoint.path}` : "No endpoint selected") })] }), _jsxs("div", { className: "anlyx-workspace-actions", children: [toolbar, endpoint ? (_jsx(StatusBadge, { tone: endpoint.confidence ?? "unknown", children: endpoint.confidence ?? "unknown" })) : null] })] }), _jsx("section", { className: `anlyx-endpoint-map anlyx-endpoint-map--${variant}`, role: "region", "aria-label": variant === "process" ? "Process Flow map" : "Endpoint Map", children: flow && model && model.nodes.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(FlowLegend, { variant: variant }), _jsx("ul", { className: "anlyx-sr-only", "aria-label": "Endpoint map node list", children: nodes.map((node) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onSelectNode(node.data.node), children: ["Select node ", node.data.label] }) }, node.id))) }), _jsx("ul", { className: "anlyx-sr-only", "aria-label": "Replay node state", children: nodes.map((node) => (_jsx("li", { "data-replay-active": String(Boolean(node.data.isReplayActive)), "data-testid": `replay-node-${node.id}`, children: node.id }, node.id))) }), _jsx("ul", { className: "anlyx-sr-only", "aria-label": "Replay edge state", children: edges.map((edge) => (_jsxs("li", { "data-replay-active": String(Boolean(edge.data?.isReplayActive)), "data-testid": `replay-edge-${edge.source}-${edge.target}`, children: [edge.source, " to ", edge.target] }, edge.id))) }), _jsxs(ReactFlow, { className: "anlyx-react-flow", edges: edges, fitView: true, fitViewOptions: { padding: 0.18 }, maxZoom: 1.35, minZoom: 0.62, nodes: nodes, nodesConnectable: false, nodesDraggable: false, edgeTypes: edgeTypes, nodeTypes: nodeTypes, onNodeClick: (_, node) => onSelectNode(node.data.node), panOnScroll: true, proOptions: { hideAttribution: true }, zoomOnDoubleClick: false, zoomOnScroll: false, children: [_jsx(Background, { color: "#dfe5ee", gap: 24, variant: BackgroundVariant.Dots }), _jsx(Controls, { showInteractive: false })] })] })) : (_jsxs("div", { className: "anlyx-endpoint-map-empty", role: "status", "aria-label": "Flow unavailable", children: [_jsx("span", { children: "Flow unavailable" }), _jsx("h2", { children: "No scanned flow for this endpoint yet" }), _jsx("p", { children: "Anlyx can list this endpoint, but no Controller -> Service -> Repository path was found." }), _jsx("p", { children: "Update the Flow JSON with source evidence, then run `anlyx import` again." })] })) })] }));
 }
 function isUnitTestRuntime() {
     return typeof process !== "undefined" && process.env.NODE_ENV === "test";

package/dist/components/InspectorPanel.js

@@ -10,11 +10,24 @@ export function InspectorPanel({ data, activeView, collapsed, selectedFlow, sele
     }
     const linkedPages = selectedNode ? findLinkedPages(data, selectedNode.id) : [];
     const calls = selectedNode ? findCalls(selectedFlow, selectedNode.id) : [];
-    return (_jsxs("aside", { className: "anlyx-inspector", role: "complementary", "aria-label": "Inspector", children: [_jsxs("div", { className: "anlyx-panel-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Inspector" }), _jsx("h2", { children: activeView === "process" ? "Process Step" : "Flow Evidence" })] }), _jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Collapse inspector panel", onClick: onToggleCollapsed, children: "Collapse" })] }), selectedNode ? (_jsxs("div", { className: "anlyx-inspector-stack", children: [activeView === "process" ? (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Replay state", children: [_jsx("h3", { children: "Process replay" }), _jsx(Field, { label: "Active Step", value: replayState.phase }), _jsx(Field, { label: "Step", value: String(replayState.currentStepIndex + 1) }), _jsx(Field, { label: "Active Node", value: replayState.activeNodeId ?? "none" }), _jsx(Field, { label: "Active Edge", value: formatActiveEdge(replayState) }), _jsx("p", { className: "anlyx-inspector-note", children: "Source: scanned static flow graph" })] })) : null, _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Details", children: [_jsx("h3", { children: "Details" }), _jsx(Field, { label: "Type", value: selectedNode.type }), _jsx(Field, { label: "Label", value: selectedNode.label }), _jsx(Field, { label: "File path", value: selectedNode.filePath ?? "Unknown" }), _jsx(Field, { label: "Line number", value: formatLineNumber(selectedNode.lineNumber) })] }), _jsx(AnalysisEvidenceList, { node: selectedNode }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Calls", children: [_jsx("h3", { children: "Calls" }), calls.length > 0 ? (_jsx("ul", { className: "anlyx-call-list", children: calls.map((call) => (_jsxs("li", { children: [_jsx("span", { children: call.label }), _jsx(StatusBadge, { tone: call.confidence, children: call.confidence })] }, call.id))) })) : (_jsx("p", { children: "No outgoing calls detected for this node." }))] }), selectedNode.metadata ? (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Metadata", children: [_jsxs("div", { className: "anlyx-inspector-group__heading", children: [_jsx("h3", { children: "Metadata" }), _jsx("button", { className: "anlyx-copy-button", type: "button", onClick: () => copyToClipboard(JSON.stringify(selectedNode.metadata, null, 2)), children: "Copy" })] }), _jsx("pre", { className: "anlyx-metadata", children: JSON.stringify(selectedNode.metadata, null, 2) })] })) : null, _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Confidence", children: [_jsx("h3", { children: "Confidence" }), _jsx(StatusBadge, { tone: selectedNode.confidence ?? "unknown", label: "confidence", children: selectedNode.confidence ?? "unknown" })] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Linked pages", children: [_jsx("h3", { children: "Linked pages" }), linkedPages.length > 0 ? (_jsx("ul", { children: linkedPages.map((page) => (_jsx("li", { children: page.route }, page.id))) })) : (_jsx("p", { children: "None" }))] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Sub flows", children: [_jsx("h3", { children: "Sub flows" }), _jsxs("p", { children: [selectedFlow?.subFlows.length ?? 0, " collapsed"] })] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "DB tables", children: [_jsx("h3", { children: "DB tables" }), _jsx("p", { children: findDatabaseLabel(selectedFlow) ?? "None" })] })] })) : (_jsx("p", { className: "anlyx-empty", children: "No node selected" }))] }));
+    return (_jsxs("aside", { className: "anlyx-inspector", role: "complementary", "aria-label": "Inspector", children: [_jsxs("div", { className: "anlyx-panel-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Inspector" }), _jsx("h2", { children: activeView === "process" ? "Process Step" : "Flow Evidence" })] }), _jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Collapse inspector panel", onClick: onToggleCollapsed, children: "Collapse" })] }), selectedNode ? (_jsxs("div", { className: "anlyx-inspector-stack", children: [activeView === "process" ? (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Replay state", children: [_jsx("h3", { children: "Process replay" }), _jsx(Field, { label: "Active Step", value: replayState.phase }), _jsx(Field, { label: "Step", value: String(replayState.currentStepIndex + 1) }), _jsx(Field, { label: "Active Node", value: replayState.activeNodeId ?? "none" }), _jsx(Field, { label: "Active Edge", value: formatActiveEdge(replayState) }), _jsx("p", { className: "anlyx-inspector-note", children: "Source: scanned static flow graph" })] })) : null, _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Details", children: [_jsx("h3", { children: "Details" }), _jsx(Field, { label: "Type", value: selectedNode.type }), _jsx(Field, { label: "Label", value: selectedNode.label }), _jsxs("div", { className: "anlyx-field", children: [_jsx("span", { className: "anlyx-field__label", children: "Status" }), _jsx(StatusBadge, { tone: selectedNode.status ?? "unknown", children: selectedNode.status ?? "unknown" })] }), _jsx(Field, { label: "File path", value: selectedNode.filePath ?? "Unknown" }), _jsx(Field, { label: "Line number", value: formatLineNumber(selectedNode.lineNumber) }), selectedNode.metadata ? (_jsx(Field, { label: "Generated by", value: formatGeneratedBy(selectedNode.metadata) })) : null] }), _jsx(TimingGroup, { timing: selectedNode.timing }), selectedNode.request ? (_jsx(JsonGroup, { title: "Request shape", ariaLabel: "Request shape", value: selectedNode.request })) : null, selectedNode.response ? (_jsx(JsonGroup, { title: "Response shape", ariaLabel: "Response shape", value: selectedNode.response })) : null, _jsx(AnalysisEvidenceList, { node: selectedNode }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Calls", children: [_jsx("h3", { children: "Calls" }), calls.length > 0 ? (_jsx("ul", { className: "anlyx-call-list", children: calls.map((call) => (_jsxs("li", { children: [_jsx("span", { children: call.label }), _jsx(StatusBadge, { tone: call.confidence, children: call.confidence })] }, call.id))) })) : (_jsx("p", { children: "No outgoing calls detected for this node." }))] }), selectedNode.metadata ? (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Metadata", children: [_jsxs("div", { className: "anlyx-inspector-group__heading", children: [_jsx("h3", { children: "Metadata" }), _jsx("button", { className: "anlyx-copy-button", type: "button", onClick: () => copyToClipboard(JSON.stringify(selectedNode.metadata, null, 2)), children: "Copy" })] }), _jsx("pre", { className: "anlyx-metadata", children: JSON.stringify(selectedNode.metadata, null, 2) })] })) : null, _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Confidence", children: [_jsx("h3", { children: "Confidence" }), _jsx(StatusBadge, { tone: selectedNode.confidence ?? "unknown", label: "confidence", children: selectedNode.confidence ?? "unknown" })] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Linked pages", children: [_jsx("h3", { children: "Linked pages" }), linkedPages.length > 0 ? (_jsx("ul", { children: linkedPages.map((page) => (_jsx("li", { children: page.route }, page.id))) })) : (_jsx("p", { children: "None" }))] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Sub flows", children: [_jsx("h3", { children: "Sub flows" }), _jsxs("p", { children: [selectedFlow?.subFlows.length ?? 0, " collapsed"] })] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "DB tables", children: [_jsx("h3", { children: "DB tables" }), _jsx("p", { children: findDatabaseLabel(selectedFlow) ?? "None" })] })] })) : (_jsx("p", { className: "anlyx-empty", children: "No node selected" }))] }));
 }
 function Field({ label, value }) {
     return (_jsxs("div", { className: "anlyx-field", children: [_jsx("span", { className: "anlyx-field__label", children: label }), _jsx("span", { className: "anlyx-field__value", children: value })] }));
 }
+function TimingGroup({ timing }) {
+    if (!timing || timing.kind === "unknown") {
+        return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Timing", children: [_jsx("h3", { children: "Timing" }), _jsx(Field, { label: "Kind", value: "Unknown" })] }));
+    }
+    if (timing.kind === "measured") {
+        return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Timing", children: [_jsx("h3", { children: "Timing" }), _jsx(Field, { label: "Kind", value: "Measured" }), _jsx(Field, { label: "Duration", value: `${timing.durationMs}ms` }), _jsx(Field, { label: "Evidence", value: timing.evidenceId })] }));
+    }
+    return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Timing", children: [_jsx("h3", { children: "Timing" }), _jsx(Field, { label: "Kind", value: "estimate" }), timing.durationMs !== undefined ? (_jsx(Field, { label: "Duration", value: `${timing.durationMs}ms` })) : null, _jsx(Field, { label: "Reason", value: timing.reason })] }));
+}
+function JsonGroup({ title, ariaLabel, value }) {
+    const formatted = JSON.stringify(value, null, 2);
+    return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": ariaLabel, children: [_jsxs("div", { className: "anlyx-inspector-group__heading", children: [_jsx("h3", { children: title }), _jsx("button", { className: "anlyx-copy-button", type: "button", onClick: () => copyToClipboard(formatted), children: "Copy" })] }), _jsx("pre", { className: "anlyx-metadata anlyx-shape-json", children: formatted })] }));
+}
 function formatLineNumber(lineNumber) {
     return lineNumber === undefined ? "Unknown" : String(lineNumber);
 }
@@ -27,6 +40,19 @@ function formatActiveEdge(replayState) {
 function copyToClipboard(value) {
     void navigator.clipboard?.writeText(value);
 }
+function formatGeneratedBy(metadata) {
+    const generatedBy = metadata.generatedBy;
+    if (!isRecord(generatedBy)) {
+        return "Unknown";
+    }
+    const name = typeof generatedBy.name === "string" ? generatedBy.name : undefined;
+    const type = typeof generatedBy.type === "string" ? generatedBy.type : undefined;
+    const version = typeof generatedBy.version === "string" ? generatedBy.version : undefined;
+    return [name, type, version].filter(Boolean).join(" · ") || "Unknown";
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 function findLinkedPages(data, nodeId) {
     return data.pages.filter((page) => page.apiCalls.some((apiCall) => apiCall.endpointId === nodeId));
 }

package/dist/components/StatusBadge.d.ts

@@ -1,7 +1,7 @@
-import type { CaptureStatus, ConfidenceLevel, HttpMethod } from "@anlyx/core";
+import type { BridgeFlowStatus, CaptureStatus, ConfidenceLevel, HttpMethod } from "@anlyx/core";
 type StatusBadgeProps = {
     children: string;
-    tone?: CaptureStatus | ConfidenceLevel | HttpMethod | "neutral";
+    tone?: CaptureStatus | ConfidenceLevel | HttpMethod | BridgeFlowStatus | "neutral";
     label?: string;
 };
 export declare function StatusBadge({ children, tone, label }: StatusBadgeProps): JSX.Element;

package/dist/index.d.ts

@@ -5,7 +5,9 @@ export type { ReplayControlsProps } from "./components/ReplayControls.js";
 export type { AnlyxFlowEdgeData, AnlyxFlowNodeData, AnlyxFlowRole, AnlyxReactFlowEdge, AnlyxReactFlowNode, ReactFlowModel } from "./flow/build-react-flow-model.js";
 export type { ReplayPhase, ReplayStep } from "./replay/build-replay-steps.js";
 export type { ReplayLiteState, UseReplayLiteOptions, UseReplayLiteResult } from "./replay/use-replay-lite.js";
+export type { WorkspaceAppProps } from "./workspace/WorkspaceApp.js";
 export { ViewerApp } from "./viewer/ViewerApp.js";
+export { WorkspaceApp } from "./workspace/WorkspaceApp.js";
 export { AnlyxAppShell } from "./components/AnlyxAppShell.js";
 export { ApiCallList } from "./components/ApiCallList.js";
 export { CaptureStatusEmptyState } from "./components/CaptureStatusEmptyState.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { ViewerApp } from "./viewer/ViewerApp.js";
+export { WorkspaceApp } from "./workspace/WorkspaceApp.js";
 export { AnlyxAppShell } from "./components/AnlyxAppShell.js";
 export { ApiCallList } from "./components/ApiCallList.js";
 export { CaptureStatusEmptyState } from "./components/CaptureStatusEmptyState.js";

package/dist/overlay/MainFlowCanvas.js

@@ -19,7 +19,7 @@ export function MainFlowCanvas({ flow, method, path, status, endpointConfidence
     if (model.nodes.length === 0) {
         return (_jsxs("section", { className: "anlyx-flow-rf-section", children: [_jsx("div", { className: "anlyx-flow-rf-head", children: _jsx("h3", { children: "Matched backend flow" }) }), _jsx("div", { className: "anlyx-flow-rf-empty", children: "No scanned main flow was inferred yet." })] }));
     }
-    return (_jsxs("section", { className: "anlyx-flow-rf-section", children: [_jsxs("div", { className: "anlyx-flow-rf-head", children: [_jsxs("div", { children: [_jsx("h3", { children: "Matched backend flow" }), _jsx("p", { children: "Live path first, scanned downstream stays muted." })] }), _jsxs("div", { className: "anlyx-flow-rf-head__badges", children: [_jsx(Badge, { tone: "blue", children: method }), _jsxs(Badge, { tone: "green", children: ["confidence ", endpointConfidence ?? "unknown"] })] })] }), _jsx("div", { className: "anlyx-flow-rf-canvas", "data-testid": "anlyx-react-flow-main", children: _jsxs(ReactFlow, { edgeTypes: edgeTypes, edges: model.edges, elementsSelectable: false, fitView: true, fitViewOptions: { padding: 0.16 }, maxZoom: 1.35, minZoom: 0.58, nodes: model.nodes, nodesConnectable: false, nodesDraggable: false, nodeTypes: nodeTypes, panOnDrag: true, proOptions: { hideAttribution: true }, zoomOnDoubleClick: false, zoomOnPinch: true, zoomOnScroll: true, children: [_jsx(ViewportControls, {}), _jsx(Background, { color: "rgba(148, 163, 184, .42)", gap: 18, size: 1, variant: BackgroundVariant.Dots })] }) }), _jsx("p", { className: "anlyx-flow-rf-note", children: "Anlyx mapped this browser-visible request to the scanned backend flow. Muted nodes are known code paths; framework server-side fetches, such as Next.js server component data loading, require the scanned path until a server runtime bridge is enabled." })] }));
+    return (_jsxs("section", { className: "anlyx-flow-rf-section", children: [_jsxs("div", { className: "anlyx-flow-rf-head", children: [_jsxs("div", { children: [_jsx("h3", { children: "Matched backend flow" }), _jsx("p", { children: "Browser request first, scanned backend path follows." })] }), _jsxs("div", { className: "anlyx-flow-rf-head__badges", children: [_jsx(Badge, { tone: "blue", children: method }), _jsxs(Badge, { tone: "green", children: ["confidence ", endpointConfidence ?? "unknown"] })] })] }), _jsx("div", { className: "anlyx-flow-rf-canvas", "data-testid": "anlyx-react-flow-main", children: _jsxs(ReactFlow, { edgeTypes: edgeTypes, edges: model.edges, elementsSelectable: false, fitView: true, fitViewOptions: { padding: 0.16 }, maxZoom: 1.35, minZoom: 0.58, nodes: model.nodes, nodesConnectable: false, nodesDraggable: false, nodeTypes: nodeTypes, panOnDrag: true, proOptions: { hideAttribution: true }, zoomOnDoubleClick: false, zoomOnPinch: true, zoomOnScroll: true, children: [_jsx(ViewportControls, {}), _jsx(Background, { color: "rgba(148, 163, 184, .42)", gap: 18, size: 1, variant: BackgroundVariant.Dots })] }) }), _jsx("p", { className: "anlyx-flow-rf-note", children: "Anlyx mapped this browser-observed request to a scanned backend path. Backend nodes are source-derived evidence, not a runtime trace; muted nodes are known code paths that the browser result did not prove were executed." })] }));
 }
 function ViewportControls() {
     const { fitView, setViewport } = useReactFlow();