@anlyx/ui 0.1.1 → 0.1.3

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 = "flowStory" | "structure" | "frontend" | "process";
 export declare function AnlyxAppShell({ data }: AnlyxAppShellProps): JSX.Element;
-//# sourceMappingURL=AnlyxAppShell.d.ts.map

package/dist/components/AnlyxAppShell.js

@@ -1,39 +1,102 @@
 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 { ReplayControls } from "./ReplayControls.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:v2:leftCollapsed",
+    panelLayout: "anlyx:ui:v2:panelLayout",
+    rightCollapsed: "anlyx:ui:v2:rightCollapsed",
+    selectedEndpointId: "anlyx:ui:selectedEndpointId",
+    selectedPageId: "anlyx:ui:selectedPageId"
+};
+const DEFAULT_PANEL_LAYOUT = {
+    left: 22,
+    center: 52,
+    right: 26
+};
 export function AnlyxAppShell({ data }) {
-    const [activeView, setActiveView] = useState("endpoint");
-    const [selectedEndpointId, setSelectedEndpointId] = useState(data.endpoints[0]?.id);
-    const [selectedPageId, setSelectedPageId] = useState(data.pages[0]?.id);
+    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();
+    const rightPanelRef = usePanelRef();
+    const [leftCollapsed, setLeftCollapsed] = usePersistentBoolean(STORAGE_KEYS.leftCollapsed, false);
+    const [rightCollapsed, setRightCollapsed] = usePersistentBoolean(STORAGE_KEYS.rightCollapsed, false);
+    const panelLayout = useMemo(() => readPanelLayout(), []);
+    const [replaySpeed, setReplaySpeed] = useState(800);
     const selectedEndpoint = data.endpoints.find((endpoint) => endpoint.id === selectedEndpointId) ?? data.endpoints[0];
     const selectedPage = data.pages.find((page) => page.id === selectedPageId) ?? data.pages[0];
     const selectedFlow = useMemo(() => data.flows.find((flow) => flow.endpointId === selectedEndpoint?.id), [data.flows, selectedEndpoint?.id]);
     const replayMainPath = useMemo(() => getReplayMainPath(selectedFlow, selectedEndpoint?.id), [selectedEndpoint?.id, selectedFlow]);
-    const replay = useReplayLite({ mainPath: replayMainPath });
+    const replay = useReplayLite({ intervalMs: replaySpeed, mainPath: replayMainPath });
     const replayUnavailable = replayMainPath.length === 0;
     const [selectedNodeId, setSelectedNodeId] = useState(() => findDefaultNode(selectedFlow)?.id);
     const selectedNode = findFlowNode(selectedFlow, selectedNodeId) ?? findDefaultNode(selectedFlow);
     useEffect(() => {
-        setSelectedEndpointId((current) => data.endpoints.some((endpoint) => endpoint.id === current) ? current : data.endpoints[0]?.id);
-    }, [data.endpoints]);
+        setSelectedEndpointId((current) => data.endpoints.some((endpoint) => endpoint.id === current)
+            ? current
+            : selectInitialEndpointId(data));
+    }, [data, setSelectedEndpointId]);
     useEffect(() => {
         setSelectedPageId((current) => data.pages.some((page) => page.id === current) ? current : data.pages[0]?.id);
     }, [data.pages]);
     useEffect(() => {
         setSelectedNodeId(findDefaultNode(selectedFlow)?.id);
     }, [selectedFlow]);
-    return (_jsxs("div", { className: "anlyx-shell", role: "application", "aria-label": "Anlyx application shell", children: [_jsx(Sidebar, { data: data, activeView: activeView, selectedEndpointId: selectedEndpoint?.id, selectedPageId: selectedPage?.id, onSelectView: setActiveView, onSelectEndpoint: (endpoint) => {
-                    setSelectedEndpointId(endpoint.id);
-                    setActiveView("endpoint");
-                }, onSelectPage: (page) => {
-                    setSelectedPageId(page.id);
-                    setActiveView("pages");
-                } }), _jsxs("div", { className: "anlyx-main", children: [activeView === "endpoint" ? (_jsx(EndpointMapCanvas, { endpoint: selectedEndpoint, flow: selectedFlow, replayState: replay.state, selectedNodeId: selectedNode?.id, onSelectNode: (node) => setSelectedNodeId(node.id) })) : null, activeView === "pages" ? _jsx(PageStoryboardView, { page: selectedPage }) : null, activeView === "replay" ? (_jsx(EndpointMapCanvas, { endpoint: selectedEndpoint, flow: selectedFlow, replayState: replay.state, selectedNodeId: selectedNode?.id, onSelectNode: (node) => setSelectedNodeId(node.id) })) : null, _jsx(ReplayControls, { disabled: replayUnavailable, loop: replay.loop, state: replay.state, unavailableReason: "Replay is unavailable because this endpoint has no main flow.", onPause: replay.pause, onPlay: replay.play, onRestart: replay.restart, onToggleLoop: replay.toggleLoop })] }), _jsx(InspectorPanel, { data: data, selectedFlow: selectedFlow, selectedNode: selectedNode }), _jsxs("div", { className: "anlyx-generated-at", children: ["Generated ", data.generatedAt] })] }));
+    useEffect(() => {
+        if (leftCollapsed) {
+            leftPanelRef.current?.collapse();
+        }
+    }, [leftCollapsed, leftPanelRef]);
+    useEffect(() => {
+        if (rightCollapsed) {
+            rightPanelRef.current?.collapse();
+        }
+    }, [rightCollapsed, rightPanelRef]);
+    const toggleLeftPanel = () => {
+        if (leftCollapsed) {
+            leftPanelRef.current?.expand();
+            setLeftCollapsed(false);
+        }
+        else {
+            leftPanelRef.current?.collapse();
+            setLeftCollapsed(true);
+        }
+    };
+    const toggleRightPanel = () => {
+        if (rightCollapsed) {
+            rightPanelRef.current?.expand();
+            setRightCollapsed(false);
+        }
+        else {
+            rightPanelRef.current?.collapse();
+            setRightCollapsed(true);
+        }
+    };
+    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);
+                                if (activeView !== "structure" && activeView !== "process") {
+                                    setActiveView("flowStory");
+                                }
+                            }, onSelectPage: (page) => {
+                                setSelectedPageId(page.id);
+                                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" })] }));
 }
 function getReplayMainPath(flow, endpointId) {
     if (!flow || flow.mainPath.length === 0) {
@@ -45,6 +108,20 @@ function getReplayMainPath(flow, endpointId) {
     }
     return flow.mainPath;
 }
+function selectInitialEndpointId(data) {
+    const flowByEndpointId = new Map(data.flows.map((flow) => [flow.endpointId, flow]));
+    const endpointsByScore = [...data.endpoints].sort((left, right) => scoreEndpoint(right, flowByEndpointId) - scoreEndpoint(left, flowByEndpointId));
+    return endpointsByScore[0]?.id;
+}
+function scoreEndpoint(endpoint, flowByEndpointId) {
+    const flow = flowByEndpointId.get(endpoint.id);
+    const hasDatabase = flow?.nodes.some((node) => node.type === "database") ? 1 : 0;
+    const confidenceScore = endpoint.confidence === "high" ? 4 : endpoint.confidence === "medium" ? 2 : 0;
+    return ((flow?.mainPath.length ?? 0) * 8 +
+        (flow?.subFlows.length ?? 0) * 5 +
+        hasDatabase * 6 +
+        confidenceScore);
+}
 function findDefaultNode(flow) {
     if (!flow) {
         return undefined;
@@ -58,4 +135,71 @@ function findFlowNode(flow, nodeId) {
     return (flow.nodes.find((node) => node.id === nodeId) ??
         flow.subFlows.flatMap((subFlow) => subFlow.nodes).find((node) => node.id === nodeId));
 }
-//# sourceMappingURL=AnlyxAppShell.js.map
+function usePersistentBoolean(key, defaultValue) {
+    const [value, setValue] = useState(() => {
+        const storedValue = readLocalStorage(key);
+        if (storedValue === "true") {
+            return true;
+        }
+        if (storedValue === "false") {
+            return false;
+        }
+        return defaultValue;
+    });
+    useEffect(() => {
+        writeLocalStorage(key, String(value));
+    }, [key, value]);
+    return [value, setValue];
+}
+function usePersistentString(key, fallback) {
+    const [value, setValue] = useState(() => {
+        if (typeof window === "undefined") {
+            return fallback;
+        }
+        return window.localStorage.getItem(key) ?? fallback;
+    });
+    useEffect(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        if (value) {
+            window.localStorage.setItem(key, value);
+        }
+        else {
+            window.localStorage.removeItem(key);
+        }
+    }, [key, value]);
+    return [value, setValue];
+}
+function readLocalStorage(key) {
+    if (typeof window === "undefined") {
+        return null;
+    }
+    return window.localStorage.getItem(key);
+}
+function writeLocalStorage(key, value) {
+    if (typeof window === "undefined") {
+        return;
+    }
+    window.localStorage.setItem(key, value);
+}
+function readPanelLayout() {
+    const storedValue = readLocalStorage(STORAGE_KEYS.panelLayout);
+    if (!storedValue) {
+        return DEFAULT_PANEL_LAYOUT;
+    }
+    try {
+        const parsedValue = JSON.parse(storedValue);
+        return {
+            left: sanitizePanelSize(parsedValue.left, DEFAULT_PANEL_LAYOUT.left),
+            center: sanitizePanelSize(parsedValue.center, DEFAULT_PANEL_LAYOUT.center),
+            right: sanitizePanelSize(parsedValue.right, DEFAULT_PANEL_LAYOUT.right)
+        };
+    }
+    catch {
+        return DEFAULT_PANEL_LAYOUT;
+    }
+}
+function sanitizePanelSize(value, fallback) {
+    return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}

package/dist/components/ApiCallList.d.ts

@@ -1,6 +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;
-//# sourceMappingURL=ApiCallList.d.ts.map
+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) {
@@ -15,4 +25,3 @@ function statusTone(status) {
     }
     return "pending";
 }
-//# sourceMappingURL=ApiCallList.js.map

package/dist/components/CanvasPlaceholder.d.ts

@@ -4,4 +4,3 @@ type CanvasPlaceholderProps = {
 };
 export declare function CanvasPlaceholder({ endpoint }: CanvasPlaceholderProps): JSX.Element;
 export {};
-//# sourceMappingURL=CanvasPlaceholder.d.ts.map

package/dist/components/CanvasPlaceholder.js

@@ -3,4 +3,3 @@ import { StatusBadge } from "./StatusBadge.js";
 export function CanvasPlaceholder({ endpoint }) {
     return (_jsxs("main", { className: "anlyx-workspace", "aria-label": "Workspace", children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Selected endpoint" }), _jsx("h1", { children: endpoint ? `${endpoint.method} ${endpoint.path}` : "No endpoint selected" })] }), endpoint ? (_jsx(StatusBadge, { tone: endpoint.confidence ?? "unknown", children: endpoint.confidence ?? "unknown" })) : null] }), _jsx("section", { className: "anlyx-canvas-placeholder", "aria-label": "Endpoint map canvas placeholder", children: _jsxs("div", { className: "anlyx-canvas-placeholder__content", children: [_jsx("p", { className: "anlyx-eyebrow", children: "Canvas" }), _jsx("h2", { children: "Endpoint Map will render here" })] }) })] }));
 }
-//# sourceMappingURL=CanvasPlaceholder.js.map

package/dist/components/CaptureStatusEmptyState.d.ts

@@ -4,4 +4,3 @@ export type CaptureStatusEmptyStateProps = {
     reason?: string;
 };
 export declare function CaptureStatusEmptyState({ status, reason }: CaptureStatusEmptyStateProps): JSX.Element | null;
-//# sourceMappingURL=CaptureStatusEmptyState.d.ts.map

package/dist/components/CaptureStatusEmptyState.js

@@ -3,8 +3,9 @@ export function CaptureStatusEmptyState({ status, reason }) {
     if (status === "success") {
         return null;
     }
-    const title = status === "failed" ? "Capture failed" : "Capture pending";
-    const fallbackReason = status === "pending" ? "Waiting for capture input." : "Unknown";
-    return (_jsxs("section", { className: `anlyx-capture-state anlyx-capture-state--${status}`, children: [_jsx("h2", { children: title }), _jsxs("p", { children: ["Reason: ", reason ?? fallbackReason] })] }));
+    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."
+        : "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] }));
 }
-//# sourceMappingURL=CaptureStatusEmptyState.js.map

package/dist/components/EndpointList.d.ts

@@ -6,4 +6,3 @@ type EndpointListProps = {
 };
 export declare function EndpointList({ endpoints, selectedEndpointId, onSelectEndpoint }: EndpointListProps): JSX.Element;
 export {};
-//# sourceMappingURL=EndpointList.d.ts.map

package/dist/components/EndpointList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusBadge } from "./StatusBadge.js";
 export function EndpointList({ endpoints, selectedEndpointId, onSelectEndpoint }) {
-    return (_jsxs("section", { className: "anlyx-sidebar-section", "aria-labelledby": "anlyx-endpoints-heading", children: [_jsx("div", { className: "anlyx-section-heading", id: "anlyx-endpoints-heading", children: "Endpoints" }), _jsx("ul", { className: "anlyx-list", "aria-label": "Endpoint list", children: endpoints.map((endpoint) => (_jsx("li", { className: "anlyx-list-item", children: _jsxs("button", { className: "anlyx-endpoint-button", type: "button", "aria-label": `${endpoint.method} ${endpoint.path} ${formatEndpointHandler(endpoint)}`, "aria-current": endpoint.id === selectedEndpointId ? "true" : undefined, onClick: () => onSelectEndpoint(endpoint), children: [_jsxs("span", { className: "anlyx-list-item__line", children: [_jsx(StatusBadge, { tone: endpoint.method, children: endpoint.method }), _jsx("span", { className: "anlyx-list-item__primary", children: endpoint.path })] }), _jsx("span", { className: "anlyx-list-item__meta", children: formatEndpointHandler(endpoint) })] }) }, endpoint.id))) })] }));
+    return (_jsxs("section", { className: "anlyx-sidebar-section", "aria-labelledby": "anlyx-endpoints-heading", children: [_jsx("div", { className: "anlyx-section-heading", id: "anlyx-endpoints-heading", children: "Backend Endpoints" }), _jsx("ul", { className: "anlyx-list", "aria-label": "Endpoint list", children: endpoints.map((endpoint) => (_jsx("li", { className: "anlyx-list-item", children: _jsxs("button", { className: "anlyx-endpoint-button", type: "button", "aria-label": `${endpoint.method} ${endpoint.path} ${formatEndpointHandler(endpoint)}`, "aria-current": endpoint.id === selectedEndpointId ? "true" : undefined, onClick: () => onSelectEndpoint(endpoint), children: [_jsxs("span", { className: "anlyx-list-item__line", children: [_jsx(StatusBadge, { tone: endpoint.method, children: endpoint.method }), _jsx("span", { className: "anlyx-list-item__primary", children: endpoint.path })] }), _jsx("span", { className: "anlyx-list-item__meta", children: formatEndpointHandler(endpoint) })] }) }, endpoint.id))) })] }));
 }
 function formatEndpointHandler(endpoint) {
     if (endpoint.controller && endpoint.handler) {
@@ -9,4 +9,3 @@ function formatEndpointHandler(endpoint) {
     }
     return endpoint.handler ?? endpoint.controller ?? endpoint.id;
 }
-//# sourceMappingURL=EndpointList.js.map

package/dist/components/EndpointMapCanvas.d.ts

@@ -4,8 +4,11 @@ export type EndpointMapCanvasProps = {
     endpoint: Endpoint | undefined;
     flow: EndpointFlow | undefined;
     selectedNodeId: string | undefined;
+    title?: string;
+    eyebrow?: string;
+    variant?: "structure" | "process";
     replayState?: ReplayLiteState;
+    toolbar?: JSX.Element;
     onSelectNode: (node: FlowNode) => void;
 };
-export declare function EndpointMapCanvas({ endpoint, flow, selectedNodeId, replayState, onSelectNode }: EndpointMapCanvasProps): JSX.Element;
-//# sourceMappingURL=EndpointMapCanvas.d.ts.map
+export declare function EndpointMapCanvas({ endpoint, flow, selectedNodeId, title, eyebrow, variant, replayState, toolbar, onSelectNode }: EndpointMapCanvasProps): JSX.Element;

package/dist/components/EndpointMapCanvas.js

@@ -1,15 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Background, BackgroundVariant, Controls, ReactFlow } from "@xyflow/react";
-import { useMemo } from "react";
+import { Background, BackgroundVariant, BaseEdge, Controls, ReactFlow, getSmoothStepPath } from "@xyflow/react";
+import { useEffect, useMemo, useState } from "react";
 import { FlowLegend } from "./FlowLegend.js";
 import { FlowNodeCard } from "./FlowNodeCard.js";
 import { StatusBadge } from "./StatusBadge.js";
 import { buildReactFlowModel } from "../flow/build-react-flow-model.js";
+import { layoutWithElk } from "../flow/layout/elk-layout.js";
 const nodeTypes = {
     anlyxNode: FlowNodeCard
 };
-export function EndpointMapCanvas({ endpoint, flow, selectedNodeId, replayState, onSelectNode }) {
-    const model = useMemo(() => (flow ? buildReactFlowModel(flow) : undefined), [flow]);
+const edgeTypes = {
+    anlyxEdge: FlowEdgeLine
+};
+export function EndpointMapCanvas({ endpoint, flow, selectedNodeId, title, eyebrow = "Backend Endpoint Map", variant = "structure", replayState, toolbar, onSelectNode }) {
+    const fallbackModel = useMemo(() => (flow ? buildReactFlowModel(flow, { variant }) : undefined), [flow, variant]);
+    const [layoutedModel, setLayoutedModel] = useState(fallbackModel);
+    const model = layoutedModel ?? fallbackModel;
+    useEffect(() => {
+        let cancelled = false;
+        setLayoutedModel(fallbackModel);
+        if (!fallbackModel || isUnitTestRuntime()) {
+            return;
+        }
+        void layoutWithElk(fallbackModel, { variant })
+            .then((nextModel) => {
+            if (!cancelled) {
+                setLayoutedModel(isUsableLayout(nextModel, variant) ? nextModel : fallbackModel);
+            }
+        })
+            .catch(() => {
+            if (!cancelled) {
+                setLayoutedModel(fallbackModel);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [fallbackModel, variant]);
     const nodes = useMemo(() => model?.nodes.map((node) => ({
         ...node,
         selected: node.id === selectedNodeId,
@@ -21,21 +48,75 @@ export function EndpointMapCanvas({ endpoint, flow, selectedNodeId, replayState,
     })) ?? [], [model, onSelectNode, replayState?.activeNodeId, selectedNodeId]);
     const edges = useMemo(() => model?.edges.map((edge) => {
         const isReplayActive = isReplayEdgeActive(edge, replayState?.activeEdge);
+        const replayClass = isReplayActive && replayState?.phase === "response"
+            ? "anlyx-flow-edge--replay-response"
+            : isReplayActive
+                ? "anlyx-flow-edge--replay-request"
+                : "";
         const edgeData = edge.data;
+        const nextData = {
+            edge: edgeData.edge,
+            flowRole: edgeData.flowRole,
+            ...(edgeData.confidence ? { confidence: edgeData.confidence } : {}),
+            isReplayActive,
+            ...(replayState?.phase ? { replayPhase: replayState.phase } : {})
+        };
         return {
             ...edge,
-            className: [edge.className, isReplayActive ? "anlyx-flow-edge--replay-active" : ""]
+            className: [
+                edge.className,
+                isReplayActive ? "anlyx-flow-edge--replay-active" : "",
+                replayClass
+            ]
                 .filter(Boolean)
                 .join(" "),
-            data: {
-                edge: edgeData.edge,
-                flowRole: edgeData.flowRole,
-                ...(edgeData.confidence ? { confidence: edgeData.confidence } : {}),
-                isReplayActive
-            }
+            data: nextData
         };
     }) ?? [], [model, replayState?.activeEdge]);
-    return (_jsxs("main", { className: "anlyx-workspace", children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Endpoint Map" }), _jsx("h1", { children: endpoint ? `${endpoint.method} ${endpoint.path}` : "No endpoint selected" })] }), endpoint ? (_jsx(StatusBadge, { tone: endpoint.confidence ?? "unknown", children: endpoint.confidence ?? "unknown" })) : null] }), _jsx("section", { className: "anlyx-endpoint-map", role: "region", "aria-label": "Endpoint Map", children: flow && model && model.nodes.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(FlowLegend, {}), _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, maxZoom: 1.25, minZoom: 0.45, nodes: nodes, nodesConnectable: false, nodesDraggable: false, 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: "Check that the backend source directory is configured, then run `anlyx scan` again." })] })) })] }));
+}
+function isUnitTestRuntime() {
+    return typeof process !== "undefined" && process.env.NODE_ENV === "test";
+}
+function isUsableLayout(model, variant) {
+    const positions = model.nodes.map((node) => node.position);
+    const minY = Math.min(...positions.map((position) => position.y));
+    const maxY = Math.max(...positions.map((position) => position.y));
+    const minX = Math.min(...positions.map((position) => position.x));
+    const maxX = Math.max(...positions.map((position) => position.x));
+    const height = maxY - minY;
+    const width = maxX - minX;
+    if (!Number.isFinite(height) || !Number.isFinite(width)) {
+        return false;
+    }
+    const maxHeight = variant === "process" ? 360 : 300;
+    return height <= maxHeight && width > 0;
+}
+function FlowEdgeLine({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, data }) {
+    const [edgePath] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition
+    });
+    const isReplayActive = Boolean(data?.isReplayActive);
+    const flowRole = data?.flowRole ?? "secondary";
+    const particleRole = data?.replayPhase === "response" ? "response" : flowRole;
+    const className = [
+        "anlyx-flow-edge",
+        `anlyx-flow-edge--${flowRole}`,
+        isReplayActive ? "anlyx-flow-edge--replay-active" : "",
+        isReplayActive && data?.replayPhase === "response"
+            ? "anlyx-flow-edge--replay-response"
+            : isReplayActive
+                ? "anlyx-flow-edge--replay-request"
+                : ""
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { className: className, path: edgePath, style: style }), isReplayActive ? (_jsx("circle", { className: `anlyx-flow-particle anlyx-flow-particle--${particleRole}`, r: flowRole === "sub" ? 4 : 5, children: _jsx("animateMotion", { dur: "1.25s", repeatCount: "indefinite", path: edgePath }) })) : null] }));
 }
 function isReplayEdgeActive(edge, activeEdge) {
     if (!activeEdge) {
@@ -44,4 +125,3 @@ function isReplayEdgeActive(edge, activeEdge) {
     return ((edge.source === activeEdge.from && edge.target === activeEdge.to) ||
         (edge.source === activeEdge.to && edge.target === activeEdge.from));
 }
-//# sourceMappingURL=EndpointMapCanvas.js.map

package/dist/components/FlowLegend.d.ts

@@ -1,2 +1,4 @@
-export declare function FlowLegend(): JSX.Element;
-//# sourceMappingURL=FlowLegend.d.ts.map
+export type FlowLegendProps = {
+    variant?: "structure" | "process";
+};
+export declare function FlowLegend({ variant }: FlowLegendProps): JSX.Element;

package/dist/components/FlowLegend.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function FlowLegend() {
+export function FlowLegend({ variant = "structure" }) {
+    if (variant === "process") {
+        return (_jsxs("div", { className: "anlyx-flow-legend", "aria-label": "Flow legend", children: [_jsxs("span", { children: [_jsx("i", { className: "anlyx-flow-legend__mark anlyx-flow-legend__mark--main" }), "Request"] }), _jsxs("span", { children: [_jsx("i", { className: "anlyx-flow-legend__mark anlyx-flow-legend__mark--response" }), "Response"] }), _jsxs("span", { children: [_jsx("i", { className: "anlyx-flow-legend__mark anlyx-flow-legend__mark--sub" }), "Branch calls"] })] }));
+    }
     return (_jsxs("div", { className: "anlyx-flow-legend", "aria-label": "Flow legend", children: [_jsxs("span", { children: [_jsx("i", { className: "anlyx-flow-legend__mark anlyx-flow-legend__mark--main" }), "Main Flow"] }), _jsxs("span", { children: [_jsx("i", { className: "anlyx-flow-legend__mark anlyx-flow-legend__mark--sub" }), "Sub Flow"] }), _jsxs("span", { children: [_jsx("i", { className: "anlyx-flow-legend__mark anlyx-flow-legend__mark--unknown" }), "Unknown"] })] }));
 }
-//# sourceMappingURL=FlowLegend.js.map

package/dist/components/FlowNodeCard.d.ts

@@ -1,4 +1,3 @@
-import type { NodeProps } from "@xyflow/react";
+import { type NodeProps } from "@xyflow/react";
 import type { AnlyxReactFlowNode } from "../flow/build-react-flow-model.js";
 export declare function FlowNodeCard({ data, selected }: NodeProps<AnlyxReactFlowNode>): JSX.Element;
-//# sourceMappingURL=FlowNodeCard.d.ts.map

package/dist/components/FlowNodeCard.js

@@ -1,13 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { Box, Braces, Code2, Database, GitBranch, Globe2, Layers3 } from "lucide-react";
+import { motion } from "motion/react";
 import { StatusBadge } from "./StatusBadge.js";
 export function FlowNodeCard({ data, selected }) {
     const confidence = data.confidence ?? "unknown";
-    return (_jsxs("button", { className: [
+    const Icon = getTypeIcon(data.type, data.flowRole);
+    return (_jsxs(motion.button, { animate: data.isReplayActive ? { scale: [1, 1.018, 1] } : { scale: 1 }, className: [
             "anlyx-flow-node",
             `anlyx-flow-node--${data.type}`,
             `anlyx-flow-node--${data.flowRole}`,
             data.isReplayActive ? "anlyx-flow-node--replay-active" : "",
             selected ? "anlyx-flow-node--selected" : ""
-        ].join(" "), onClick: () => data.onSelectNode?.(data.node), type: "button", "aria-label": `Select node ${data.label}`, "data-replay-active": String(Boolean(data.isReplayActive)), "data-testid": `flow-node-${data.node.id}`, children: [_jsx("span", { className: "anlyx-flow-node__type", children: data.type }), _jsx("span", { className: "anlyx-flow-node__label", children: data.label }), _jsx(StatusBadge, { tone: confidence, label: "confidence", children: confidence })] }));
+        ].join(" "), onClick: () => data.onSelectNode?.(data.node), type: "button", "aria-label": `Select node ${data.label}`, "data-replay-active": String(Boolean(data.isReplayActive)), "data-testid": `flow-node-${data.node.id}`, transition: { duration: 1.35, repeat: data.isReplayActive ? Infinity : 0 }, children: [_jsx(Handle, { className: "anlyx-flow-handle", position: Position.Left, type: "target" }), data.isReplayActive ? _jsx("span", { className: "anlyx-flow-node__pulse", "aria-hidden": "true" }) : null, _jsxs("span", { className: "anlyx-flow-node__header", children: [_jsx("span", { className: "anlyx-flow-node__icon", "aria-hidden": "true", children: _jsx(Icon, { size: 14, strokeWidth: 2.4 }) }), _jsx("span", { className: "anlyx-flow-node__type", children: data.type })] }), _jsx("span", { className: "anlyx-flow-node__label", children: data.label }), _jsx(StatusBadge, { tone: confidence, label: "confidence", children: confidence }), _jsx(Handle, { className: "anlyx-flow-handle", position: Position.Right, type: "source" })] }));
+}
+function getTypeIcon(type, flowRole) {
+    if (flowRole === "sub") {
+        return GitBranch;
+    }
+    switch (type) {
+        case "endpoint":
+            return Globe2;
+        case "controller":
+            return Code2;
+        case "service":
+            return Layers3;
+        case "repository":
+            return Braces;
+        case "database":
+            return Database;
+        default:
+            return Box;
+    }
 }
-//# sourceMappingURL=FlowNodeCard.js.map