@anlyx/ui 0.1.2 → 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/AnalysisEvidenceList.d.ts

@@ -0,0 +1,5 @@
+import type { FlowNode } from "@anlyx/core";
+export type AnalysisEvidenceListProps = {
+    node: FlowNode;
+};
+export declare function AnalysisEvidenceList({ node }: AnalysisEvidenceListProps): JSX.Element;

package/dist/components/AnalysisEvidenceList.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle2, CircleHelp, Info, TriangleAlert } from "lucide-react";
+import { StatusBadge } from "./StatusBadge.js";
+export function AnalysisEvidenceList({ node }) {
+    const evidence = getEvidence(node);
+    return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Analysis evidence", children: [_jsx("h3", { children: "Analysis evidence" }), _jsx("ul", { className: "anlyx-evidence-list", children: evidence.map((item, index) => {
+                    const Icon = getEvidenceIcon(item.confidence ?? node.confidence ?? "unknown");
+                    return (_jsxs("li", { children: [_jsx(Icon, { size: 14, strokeWidth: 2.5 }), _jsxs("span", { children: [_jsx("strong", { children: item.label }), item.detail ? _jsx("em", { children: item.detail }) : null] }), _jsx(StatusBadge, { tone: item.confidence ?? node.confidence ?? "unknown", children: item.confidence ?? node.confidence ?? "unknown" })] }, `${item.label}:${index}`));
+                }) })] }));
+}
+function getEvidence(node) {
+    if (node.evidence && node.evidence.length > 0) {
+        return node.evidence;
+    }
+    if (node.type === "unknown") {
+        return [
+            {
+                label: "Analysis stopped",
+                detail: "Anlyx could not resolve this code element from the scanned source.",
+                confidence: "unknown"
+            }
+        ];
+    }
+    if (node.type === "database") {
+        return [
+            {
+                label: "Database table inferred",
+                detail: "Derived from repository entity metadata or entity naming fallback.",
+                confidence: node.confidence ?? "unknown"
+            }
+        ];
+    }
+    if (node.type === "endpoint") {
+        return [
+            {
+                label: "Endpoint matched",
+                detail: "Derived from the backend adapter endpoint list.",
+                confidence: node.confidence ?? "unknown"
+            }
+        ];
+    }
+    return [
+        {
+            label: "Code node resolved",
+            detail: "Resolved from the scanned static flow graph.",
+            confidence: node.confidence ?? "unknown"
+        }
+    ];
+}
+function getEvidenceIcon(confidence) {
+    if (confidence === "high") {
+        return CheckCircle2;
+    }
+    if (confidence === "medium") {
+        return Info;
+    }
+    if (confidence === "low") {
+        return TriangleAlert;
+    }
+    return CircleHelp;
+}

package/dist/components/AnlyxAppShell.d.ts

@@ -2,5 +2,5 @@ import type { ScanResult } from "@anlyx/core";
 export type AnlyxAppShellProps = {
     data: ScanResult;
 };
-export type ViewMode = "structure" | "frontend" | "process";
+export type ViewMode = "flowStory" | "structure" | "frontend" | "process";
 export declare function AnlyxAppShell({ data }: AnlyxAppShellProps): JSX.Element;

package/dist/components/AnlyxAppShell.js

@@ -2,15 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Group, Panel, Separator, usePanelRef } from "react-resizable-panels";
 import { EndpointMapCanvas } from "./EndpointMapCanvas.js";
+import { FlowStoryView } from "./FlowStoryView.js";
 import { InspectorPanel } from "./InspectorPanel.js";
 import { PageStoryboardView } from "./PageStoryboardView.js";
 import { ProcessFlowView } from "./ProcessFlowView.js";
 import { Sidebar } from "./Sidebar.js";
 import { useReplayLite } from "../replay/use-replay-lite.js";
 const STORAGE_KEYS = {
-    leftCollapsed: "anlyx:ui:leftCollapsed",
-    panelLayout: "anlyx:ui:panelLayout",
-    rightCollapsed: "anlyx:ui:rightCollapsed",
+    leftCollapsed: "anlyx:ui:v2:leftCollapsed",
+    panelLayout: "anlyx:ui:v2:panelLayout",
+    rightCollapsed: "anlyx:ui:v2:rightCollapsed",
     selectedEndpointId: "anlyx:ui:selectedEndpointId",
     selectedPageId: "anlyx:ui:selectedPageId"
 };
@@ -20,7 +21,7 @@ const DEFAULT_PANEL_LAYOUT = {
     right: 26
 };
 export function AnlyxAppShell({ data }) {
-    const [activeView, setActiveView] = useState("structure");
+    const [activeView, setActiveView] = useState("flowStory");
     const [selectedEndpointId, setSelectedEndpointId] = usePersistentString(STORAGE_KEYS.selectedEndpointId, selectInitialEndpointId(data));
     const [selectedPageId, setSelectedPageId] = usePersistentString(STORAGE_KEYS.selectedPageId, data.pages[0]?.id);
     const leftPanelRef = usePanelRef();
@@ -80,11 +81,19 @@ export function AnlyxAppShell({ data }) {
     };
     return (_jsxs("div", { className: "anlyx-shell", role: "application", "aria-label": "Anlyx application shell", children: [_jsxs(Group, { className: "anlyx-panel-group", defaultLayout: panelLayout, id: "anlyx-main-panels", orientation: "horizontal", onLayoutChanged: (layout) => writeLocalStorage(STORAGE_KEYS.panelLayout, JSON.stringify(layout)), children: [_jsx(Panel, { className: "anlyx-panel anlyx-panel--sidebar", collapsedSize: "52px", collapsible: true, defaultSize: "300px", id: "left", maxSize: "420px", minSize: "240px", panelRef: leftPanelRef, children: _jsx(Sidebar, { data: data, activeView: activeView, collapsed: leftCollapsed, selectedEndpointId: selectedEndpoint?.id, selectedPageId: selectedPage?.id, onSelectView: setActiveView, onToggleCollapsed: toggleLeftPanel, onSelectEndpoint: (endpoint) => {
                                 setSelectedEndpointId(endpoint.id);
-                                setActiveView("structure");
+                                if (activeView !== "structure" && activeView !== "process") {
+                                    setActiveView("flowStory");
+                                }
                             }, onSelectPage: (page) => {
                                 setSelectedPageId(page.id);
-                                setActiveView("frontend");
-                            } }) }), _jsx(Separator, { "aria-label": "Resize navigation panel", className: "anlyx-resize-handle", children: _jsx("span", { "aria-hidden": "true" }) }), _jsx(Panel, { className: "anlyx-panel anlyx-panel--main", id: "center", minSize: "420px", children: _jsxs("div", { className: activeView === "process" ? "anlyx-main anlyx-main--process" : "anlyx-main", "aria-live": "polite", children: [activeView === "structure" ? (_jsx(EndpointMapCanvas, { eyebrow: "Backend API Structure", endpoint: selectedEndpoint, flow: selectedFlow, replayState: replay.state, selectedNodeId: selectedNode?.id, toolbar: _jsx(StructureToolbar, {}), onSelectNode: (node) => setSelectedNodeId(node.id) })) : null, activeView === "frontend" ? (_jsx(PageStoryboardView, { data: data, page: selectedPage, onViewProcessFlow: setActiveView })) : null, activeView === "process" ? (_jsx(ProcessFlowView, { endpoint: selectedEndpoint, flow: selectedFlow, replayDisabled: replayUnavailable, replayLoop: replay.loop, replaySpeed: replaySpeed, replayState: replay.state, replaySteps: replay.steps, selectedNodeId: selectedNode?.id, onPause: replay.pause, onPlay: replay.play, onRestart: replay.restart, onSelectNode: (node) => setSelectedNodeId(node.id), onSpeedChange: setReplaySpeed, onToggleLoop: replay.toggleLoop, onViewStructure: () => setActiveView("structure") })) : null] }) }), _jsx(Separator, { "aria-label": "Resize inspector panel", className: "anlyx-resize-handle", children: _jsx("span", { "aria-hidden": "true" }) }), _jsx(Panel, { className: "anlyx-panel anlyx-panel--inspector", collapsedSize: "52px", collapsible: true, defaultSize: "360px", id: "right", maxSize: "520px", minSize: "300px", panelRef: rightPanelRef, children: _jsx(InspectorPanel, { activeView: activeView, collapsed: rightCollapsed, data: data, replayState: replay.state, selectedFlow: selectedFlow, selectedNode: selectedNode, selectedPage: selectedPage, onToggleCollapsed: toggleRightPanel }) })] }), _jsxs("div", { className: "anlyx-generated-at", children: ["Generated ", data.generatedAt] })] }));
+                                const linkedEndpointId = page.apiCalls.find((apiCall) => apiCall.endpointId)?.endpointId;
+                                if (linkedEndpointId) {
+                                    setSelectedEndpointId(linkedEndpointId);
+                                }
+                                if (activeView !== "frontend") {
+                                    setActiveView("flowStory");
+                                }
+                            } }) }), _jsx(Separator, { "aria-label": "Resize navigation panel", className: "anlyx-resize-handle", children: _jsx("span", { "aria-hidden": "true" }) }), _jsx(Panel, { className: "anlyx-panel anlyx-panel--main", id: "center", minSize: "420px", children: _jsxs("div", { className: activeView === "process" ? "anlyx-main anlyx-main--process" : "anlyx-main", "aria-live": "polite", children: [activeView === "flowStory" ? (_jsx(FlowStoryView, { data: data, endpoint: selectedEndpoint, flow: selectedFlow, page: selectedPage, replayDisabled: replayUnavailable, replayLoop: replay.loop, replaySpeed: replaySpeed, replayState: replay.state, replaySteps: replay.steps, selectedNodeId: selectedNode?.id, onPause: replay.pause, onPlay: replay.play, onRestart: replay.restart, onSelectNode: (node) => setSelectedNodeId(node.id), onSpeedChange: setReplaySpeed, onToggleLoop: replay.toggleLoop })) : null, activeView === "structure" ? (_jsx(EndpointMapCanvas, { eyebrow: "Backend API Structure", endpoint: selectedEndpoint, flow: selectedFlow, replayState: replay.state, selectedNodeId: selectedNode?.id, toolbar: _jsx(StructureToolbar, {}), onSelectNode: (node) => setSelectedNodeId(node.id) })) : null, activeView === "frontend" ? (_jsx(PageStoryboardView, { data: data, page: selectedPage, onViewProcessFlow: setActiveView })) : null, activeView === "process" ? (_jsx(ProcessFlowView, { endpoint: selectedEndpoint, flow: selectedFlow, replayDisabled: replayUnavailable, replayLoop: replay.loop, replaySpeed: replaySpeed, replayState: replay.state, replaySteps: replay.steps, selectedNodeId: selectedNode?.id, onPause: replay.pause, onPlay: replay.play, onRestart: replay.restart, onSelectNode: (node) => setSelectedNodeId(node.id), onSpeedChange: setReplaySpeed, onToggleLoop: replay.toggleLoop, onViewStructure: () => setActiveView("structure") })) : null] }) }), _jsx(Separator, { "aria-label": "Resize inspector panel", className: "anlyx-resize-handle", children: _jsx("span", { "aria-hidden": "true" }) }), _jsx(Panel, { className: "anlyx-panel anlyx-panel--inspector", collapsedSize: "52px", collapsible: true, defaultSize: "360px", id: "right", maxSize: "520px", minSize: "300px", panelRef: rightPanelRef, children: _jsx(InspectorPanel, { activeView: activeView, collapsed: rightCollapsed, data: data, replayState: replay.state, selectedFlow: selectedFlow, selectedNode: selectedNode, selectedPage: selectedPage, onToggleCollapsed: toggleRightPanel }) })] }), _jsxs("div", { className: "anlyx-generated-at", children: ["Generated ", data.generatedAt] })] }));
 }
 function StructureToolbar() {
     return (_jsxs("div", { className: "anlyx-toolbar", "aria-label": "Structure view actions", children: [_jsx("button", { className: "anlyx-toolbar-button", type: "button", children: "Fit view" }), _jsxs("select", { "aria-label": "Zoom level", className: "anlyx-toolbar-select", defaultValue: "100", children: [_jsx("option", { value: "75", children: "75%" }), _jsx("option", { value: "100", children: "100%" }), _jsx("option", { value: "125", children: "125%" })] }), _jsx("button", { className: "anlyx-toolbar-button anlyx-toolbar-button--icon", type: "button", children: "More" })] }));

package/dist/components/ApiCallList.d.ts

@@ -1,5 +1,6 @@
-import type { ApiCall } from "@anlyx/core";
+import type { ApiCall, Endpoint } from "@anlyx/core";
 export type ApiCallListProps = {
     apiCalls: ApiCall[];
+    endpoints?: Endpoint[];
 };
-export declare function ApiCallList({ apiCalls }: ApiCallListProps): JSX.Element;
+export declare function ApiCallList({ apiCalls, endpoints }: ApiCallListProps): JSX.Element;

package/dist/components/ApiCallList.js

@@ -1,7 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusBadge } from "./StatusBadge.js";
-export function ApiCallList({ apiCalls }) {
-    return (_jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "API Calls", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "API Calls" }), _jsx("span", { children: apiCalls.length })] }), apiCalls.length > 0 ? (_jsx("ul", { className: "anlyx-api-call-list", children: apiCalls.map((apiCall, index) => (_jsxs("li", { className: "anlyx-api-call", children: [_jsxs("div", { className: "anlyx-api-call__line", children: [_jsx(StatusBadge, { tone: apiCall.method, children: apiCall.method }), _jsx("span", { className: "anlyx-api-call__path", children: apiCall.path })] }), _jsxs("div", { className: "anlyx-api-call__meta", children: [_jsx(StatusBadge, { tone: statusTone(apiCall.status), children: apiCall.status === undefined ? "unknown" : String(apiCall.status) }), _jsx(StatusBadge, { tone: apiCall.endpointId ? "success" : "unknown", children: apiCall.endpointId ? "Linked endpoint" : "Unmatched" })] }), apiCall.endpointId ? (_jsx("div", { className: "anlyx-api-call__endpoint", children: apiCall.endpointId })) : null] }, `${apiCall.method}:${apiCall.path}:${index}`))) })) : (_jsx("p", { className: "anlyx-empty-inline", children: "No API calls captured yet." }))] }));
+export function ApiCallList({ apiCalls, endpoints = [] }) {
+    const endpointById = new Map(endpoints.map((endpoint) => [endpoint.id, endpoint]));
+    return (_jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "API Calls", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "API Calls" }), _jsx("span", { children: apiCalls.length })] }), apiCalls.length > 0 ? (_jsx("ul", { className: "anlyx-api-call-list", children: apiCalls.map((apiCall, index) => {
+                    const endpoint = apiCall.endpointId ? endpointById.get(apiCall.endpointId) : undefined;
+                    return (_jsxs("li", { className: "anlyx-api-call", children: [_jsxs("div", { className: "anlyx-api-call__line", children: [_jsx(StatusBadge, { tone: apiCall.method, children: apiCall.method }), _jsx("span", { className: "anlyx-api-call__path", children: apiCall.path })] }), _jsxs("div", { className: "anlyx-api-call__meta", children: [_jsx(StatusBadge, { tone: statusTone(apiCall.status), children: apiCall.status === undefined ? "unknown" : String(apiCall.status) }), _jsx(StatusBadge, { tone: apiCall.endpointId ? "success" : "unknown", children: apiCall.endpointId ? "Linked endpoint" : "Unmatched" })] }), endpoint ? (_jsxs("div", { className: "anlyx-api-call__endpoint", children: [_jsx("span", { children: "Matched endpoint" }), _jsxs("strong", { children: [endpoint.method, " ", endpoint.path] }), endpoint.controller || endpoint.handler ? (_jsx("em", { children: formatEndpointHandler(endpoint) })) : null] })) : apiCall.endpointId ? (_jsxs("div", { className: "anlyx-api-call__endpoint", children: [_jsx("span", { children: "Matched endpoint" }), _jsx("strong", { children: apiCall.endpointId })] })) : null] }, `${apiCall.method}:${apiCall.path}:${index}`));
+                }) })) : (_jsx("p", { className: "anlyx-empty-inline", children: "No API calls captured yet." }))] }));
+}
+function formatEndpointHandler(endpoint) {
+    if (endpoint.controller && endpoint.handler) {
+        return `${endpoint.controller}#${endpoint.handler}`;
+    }
+    return endpoint.controller ?? endpoint.handler ?? "Unknown handler";
 }
 function statusTone(status) {
     if (status === undefined) {

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 })] })] })) : (_jsx("div", { className: "anlyx-endpoint-map-empty", children: _jsx("p", { children: "No flow available for this endpoint yet." }) })) })] }));
+    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/FlowStoryView.d.ts

@@ -0,0 +1,22 @@
+import type { Endpoint, EndpointFlow, FlowNode, PageStoryboard, ScanResult } from "@anlyx/core";
+import type { ReplayStep } from "../replay/build-replay-steps.js";
+import type { ReplayLiteState } from "../replay/use-replay-lite.js";
+export type FlowStoryViewProps = {
+    data: ScanResult;
+    endpoint: Endpoint | undefined;
+    flow: EndpointFlow | undefined;
+    page: PageStoryboard | undefined;
+    replayDisabled: boolean;
+    replayLoop: boolean;
+    replaySpeed: number;
+    replayState: ReplayLiteState;
+    replaySteps: ReplayStep[];
+    selectedNodeId: string | undefined;
+    onPause: () => void;
+    onPlay: () => void;
+    onRestart: () => void;
+    onSelectNode: (node: FlowNode) => void;
+    onSpeedChange: (speed: number) => void;
+    onToggleLoop: () => void;
+};
+export declare function FlowStoryView({ data, endpoint, flow, page, replayDisabled, replayLoop, replaySpeed, replayState, replaySteps, selectedNodeId, onPause, onPlay, onRestart, onSelectNode, onSpeedChange, onToggleLoop }: FlowStoryViewProps): JSX.Element;