@anlyx/ui 0.1.2 → 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 = "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/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: "Check that the backend source directory is configured, then run `anlyx scan` 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;

package/dist/components/FlowStoryView.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Braces, Code2, Database, FileText, GitBranch, Globe2, Layers3, Maximize2, MonitorSmartphone, MousePointerClick, Route, ShieldCheck, Wifi } from "lucide-react";
+import { ReplayControls } from "./ReplayControls.js";
+import { StatusBadge } from "./StatusBadge.js";
+export function FlowStoryView({ data, endpoint, flow, page, replayDisabled, replayLoop, replaySpeed, replayState, replaySteps, selectedNodeId, onPause, onPlay, onRestart, onSelectNode, onSpeedChange, onToggleLoop }) {
+    const storyPage = page ?? findPageForEndpoint(data, endpoint);
+    const screenshot = storyPage?.screenshots[0];
+    const stats = getFlowStoryStats(flow);
+    const replayStepLabels = buildReplayStepLabels(flow);
+    const primaryApiCall = storyPage?.apiCalls.find((apiCall) => apiCall.endpointId === endpoint?.id);
+    return (_jsxs("main", { className: "anlyx-flow-story", children: [_jsxs("header", { className: "anlyx-flow-story__header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Flow Story" }), _jsx("h1", { children: endpoint ? titleForEndpoint(endpoint) : "Application flow story" }), _jsxs("div", { className: "anlyx-flow-story__summary", "aria-label": "Flow Story summary", children: [_jsxs("span", { children: [stats.mainSteps, " main steps"] }), _jsxs("span", { children: [stats.supportCalls, " support calls"] }), _jsxs("span", { children: [stats.evidenceCount, " evidence items"] })] })] }), _jsxs("div", { className: "anlyx-flow-story__actions", children: [_jsx(StatusBadge, { tone: "neutral", children: "Replay Lite" }), _jsxs("button", { className: "anlyx-toolbar-button", type: "button", children: [_jsx(Maximize2, { size: 14, strokeWidth: 2.4 }), "Fit view"] })] })] }), _jsx(InteractionEvidenceChain, { apiCallLabel: formatObservedApiCall(primaryApiCall, endpoint), backendStepCount: stats.mainSteps, pageRoute: storyPage?.route }), _jsxs("section", { className: "anlyx-flow-story__stage", "aria-label": "Flow Story canvas", children: [_jsx(PagePreviewCard, { page: storyPage }), _jsxs("div", { className: "anlyx-flow-story__request", "aria-hidden": "true", children: [_jsx("span", { children: "Request" }), _jsx("i", {})] }), _jsx(FlowStoryDiagram, { flow: flow, replayState: replayState, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }), _jsx("div", { className: "anlyx-flow-story__response", "aria-hidden": "true", children: _jsx("span", { children: "Response" }) })] }), _jsx(ReplayControls, { disabled: replayDisabled, loop: replayLoop, speed: replaySpeed, state: replayState, stepLabels: replayStepLabels, steps: replaySteps, unavailableReason: "Replay is unavailable because this flow has no scanned main path.", onPause: onPause, onPlay: onPlay, onRestart: onRestart, onSpeedChange: onSpeedChange, onToggleLoop: onToggleLoop }), screenshot?.path ? _jsx("span", { className: "anlyx-sr-only", children: screenshot.path }) : null] }));
+}
+function InteractionEvidenceChain({ apiCallLabel, backendStepCount, pageRoute }) {
+    return (_jsxs("section", { className: "anlyx-interaction-chain", "aria-label": "Interaction evidence chain", children: [_jsx(EvidenceChainItem, { detail: pageRoute ?? "No page linked", icon: MousePointerClick, label: "Triggered page", tone: "page" }), _jsx(EvidenceChainItem, { detail: apiCallLabel, icon: Wifi, label: "Browser API event", tone: "api" }), _jsx(EvidenceChainItem, { detail: `${backendStepCount} steps`, icon: Route, label: "Scanned backend path", tone: "backend" }), _jsx(EvidenceChainItem, { detail: "not runtime tracing", icon: ShieldCheck, label: "Static evidence", tone: "guard" })] }));
+}
+function EvidenceChainItem({ detail, icon: Icon, label, tone }) {
+    return (_jsxs("article", { className: `anlyx-interaction-chain__item anlyx-interaction-chain__item--${tone}`, children: [_jsx("span", { className: "anlyx-interaction-chain__icon", "aria-hidden": "true", children: _jsx(Icon, { size: 16, strokeWidth: 2.5 }) }), _jsxs("div", { children: [_jsx("span", { children: label }), _jsx("strong", { children: detail })] })] }));
+}
+function PagePreviewCard({ page }) {
+    const screenshot = page?.screenshots[0];
+    const primaryApiCall = page?.apiCalls[0];
+    return (_jsxs("article", { className: "anlyx-page-preview", "aria-label": "Frontend page preview", children: [_jsxs("div", { className: "anlyx-page-preview__chrome", children: [_jsx(MonitorSmartphone, { size: 16, strokeWidth: 2.4 }), _jsx("span", { children: page?.route ?? "No page linked" })] }), _jsxs("div", { className: "anlyx-page-preview__screen", children: [_jsxs("div", { className: "anlyx-page-preview__topbar", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("strong", { children: "STARBUCKS" })] }), _jsxs("div", { className: "anlyx-page-preview__hero", children: [_jsxs("div", { children: [_jsx("span", { children: screenshot?.title ?? "Captured page" }), _jsx("strong", { children: "Birthday Reward" }), _jsx("p", { children: "Enjoy a free drink or food item on your birthday." })] }), _jsxs("div", { className: "anlyx-page-preview__reward", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("strong", { children: "1" })] })] }), _jsxs("div", { className: "anlyx-page-preview__facts", children: [_jsx("span", { children: "Valid Jan 1 - Dec 31" }), _jsx("span", { children: "Once per year" })] }), _jsxs("div", { className: "anlyx-page-preview__steps", children: [_jsx("span", { children: "Show this reward in store" }), _jsx("span", { children: "Choose drink or food" }), _jsx("span", { children: "Enjoy birthday treat" })] }), _jsxs("div", { className: "anlyx-page-preview__api", children: [_jsx("strong", { children: primaryApiCall?.method ?? "GET" }), _jsx("span", { children: primaryApiCall?.path ?? "/api/..." })] })] }), _jsxs("div", { className: "anlyx-page-preview__meta", children: [_jsx(StatusBadge, { tone: page?.captureStatus ?? "pending", children: page?.captureStatus ?? "pending" }), _jsxs("span", { children: [page?.apiCalls.length ?? 0, " API calls"] }), _jsxs("span", { children: [page?.screenshots.length ?? 0, " screenshots"] })] })] }));
+}
+function FlowStoryDiagram({ flow, replayState, selectedNodeId, onSelectNode }) {
+    if (!flow) {
+        return (_jsx("div", { className: "anlyx-flow-story__diagram anlyx-flow-story__diagram--empty", children: _jsx("p", { children: "No scanned backend flow available for this endpoint." }) }));
+    }
+    const nodesById = new Map(flow.nodes.map((node) => [node.id, node]));
+    const mainNodes = flow.mainPath
+        .map((nodeId) => nodesById.get(nodeId))
+        .filter((node) => Boolean(node))
+        .filter((node) => node.type !== "page");
+    const supportingNodes = flow.subFlows.flatMap((subFlow) => subFlow.nodes);
+    return (_jsxs("div", { className: "anlyx-flow-story__diagram", role: "region", "aria-label": "Flow Story path", children: [_jsxs("div", { className: "anlyx-flow-story__diagram-head", children: [_jsxs("div", { children: [_jsx("span", { children: "Main path" }), _jsxs("strong", { children: [mainNodes.length, " steps"] })] }), _jsxs("div", { children: [_jsx("span", { children: "Support" }), _jsxs("strong", { children: [supportingNodes.length, " calls"] })] })] }), _jsx("div", { className: "anlyx-flow-story__lane", "aria-label": "Main request path", children: mainNodes.map((node, index) => (_jsx(FlowStoryStep, { isActive: replayState.activeNodeId === node.id, isSelected: selectedNodeId === node.id, node: node, stepNumber: index + 1, showArrow: index < mainNodes.length - 1, onSelectNode: onSelectNode }, node.id))) }), supportingNodes.length > 0 ? (_jsxs("div", { className: "anlyx-flow-story__support", children: [_jsxs("div", { className: "anlyx-flow-story__support-heading", children: [_jsx(GitBranch, { size: 15, strokeWidth: 2.5 }), _jsx("span", { children: "Support calls from service" })] }), _jsx("div", { className: "anlyx-flow-story__support-grid", children: supportingNodes.map((node) => (_jsx(FlowStorySupportNode, { isActive: replayState.activeNodeId === node.id, isSelected: selectedNodeId === node.id, node: node, onSelectNode: onSelectNode }, node.id))) })] })) : null] }));
+}
+function FlowStoryStep({ node, isActive, isSelected, stepNumber, showArrow, onSelectNode }) {
+    const Icon = getFlowStoryIcon(node.type);
+    return (_jsxs("div", { className: "anlyx-flow-story__step-wrap", children: [_jsxs("button", { className: [
+                    "anlyx-flow-story__step",
+                    `anlyx-flow-story__step--${node.type}`,
+                    isActive ? "anlyx-flow-story__step--active" : "",
+                    isSelected ? "anlyx-flow-story__step--selected" : ""
+                ]
+                    .filter(Boolean)
+                    .join(" "), type: "button", onClick: () => onSelectNode(node), "aria-label": `Select ${node.type} step ${stepNumber}: ${node.label}`, children: [_jsx("span", { className: "anlyx-flow-story__step-number", children: String(stepNumber).padStart(2, "0") }), _jsx("span", { className: "anlyx-flow-story__step-icon", "aria-hidden": "true", children: _jsx(Icon, { size: 16, strokeWidth: 2.5 }) }), _jsx("span", { className: "anlyx-flow-story__step-type", children: node.type }), _jsx("strong", { children: node.label }), _jsx(StatusBadge, { tone: node.confidence ?? "unknown", label: "confidence", children: node.confidence ?? "unknown" })] }), showArrow ? _jsx("span", { className: "anlyx-flow-story__arrow", "aria-hidden": "true" }) : null] }));
+}
+function FlowStorySupportNode({ node, isActive, isSelected, onSelectNode }) {
+    const Icon = getFlowStoryIcon(node.type);
+    return (_jsxs("button", { className: [
+            "anlyx-flow-story__support-node",
+            isActive ? "anlyx-flow-story__support-node--active" : "",
+            isSelected ? "anlyx-flow-story__support-node--selected" : ""
+        ]
+            .filter(Boolean)
+            .join(" "), type: "button", onClick: () => onSelectNode(node), "aria-label": `Select support call ${node.label}`, children: [_jsx(Icon, { size: 15, strokeWidth: 2.5 }), _jsx("span", { children: node.type }), _jsx("strong", { children: node.label }), _jsx(StatusBadge, { tone: node.confidence ?? "unknown", label: "confidence", children: node.confidence ?? "unknown" })] }));
+}
+function findPageForEndpoint(data, endpoint) {
+    if (!endpoint) {
+        return data.pages[0];
+    }
+    return (data.pages.find((page) => page.apiCalls.some((apiCall) => apiCall.endpointId === endpoint.id)) ?? data.pages[0]);
+}
+function titleForEndpoint(endpoint) {
+    const handler = endpoint.controller && endpoint.handler
+        ? `${endpoint.controller}#${endpoint.handler}`
+        : undefined;
+    return handler ?? `${endpoint.method} ${endpoint.path}`;
+}
+function formatObservedApiCall(apiCall, endpoint) {
+    if (apiCall) {
+        return `${apiCall.method} ${apiCall.path}`;
+    }
+    if (endpoint) {
+        return `${endpoint.method} ${endpoint.path}`;
+    }
+    return "No API event matched";
+}
+function getFlowStoryStats(flow) {
+    if (!flow) {
+        return { evidenceCount: 0, mainSteps: 0, supportCalls: 0 };
+    }
+    return {
+        mainSteps: flow.mainPath.filter((nodeId) => !nodeId.startsWith("page:")).length,
+        supportCalls: flow.subFlows.reduce((count, subFlow) => count + subFlow.nodes.length, 0),
+        evidenceCount: flow.nodes.reduce((count, node) => count + (node.evidence?.length ?? 0), 0) +
+            flow.edges.reduce((count, edge) => count + (edge.evidence?.length ?? 0), 0) +
+            flow.subFlows.reduce((count, subFlow) => count +
+                subFlow.nodes.reduce((nodeCount, node) => nodeCount + (node.evidence?.length ?? 0), 0) +
+                subFlow.edges.reduce((edgeCount, edge) => edgeCount + (edge.evidence?.length ?? 0), 0), 0)
+    };
+}
+function buildReplayStepLabels(flow) {
+    if (!flow) {
+        return {};
+    }
+    return Object.fromEntries(flow.nodes.map((node) => [node.id, node.label]));
+}
+function getFlowStoryIcon(type) {
+    switch (type) {
+        case "endpoint":
+            return Globe2;
+        case "controller":
+            return Code2;
+        case "service":
+            return Layers3;
+        case "repository":
+            return Braces;
+        case "database":
+            return Database;
+        case "mapper":
+        case "validator":
+        case "utility":
+            return GitBranch;
+        default:
+            return FileText;
+    }
+}

package/dist/components/InspectorPanel.d.ts

@@ -2,7 +2,7 @@ import type { EndpointFlow, FlowNode, PageStoryboard, ScanResult } from "@anlyx/
 import type { ReplayLiteState } from "../replay/use-replay-lite.js";
 type InspectorPanelProps = {
     data: ScanResult;
-    activeView: "structure" | "frontend" | "process";
+    activeView: "flowStory" | "structure" | "frontend" | "process";
     collapsed: boolean;
     selectedFlow: EndpointFlow | undefined;
     selectedNode: FlowNode | undefined;

package/dist/components/InspectorPanel.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnalysisEvidenceList } from "./AnalysisEvidenceList.js";
 import { StatusBadge } from "./StatusBadge.js";
 export function InspectorPanel({ data, activeView, collapsed, selectedFlow, selectedNode, selectedPage, replayState, onToggleCollapsed }) {
     if (collapsed) {
@@ -8,7 +9,8 @@ export function InspectorPanel({ data, activeView, collapsed, selectedFlow, sele
         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: "Frontend Page" })] }), _jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Collapse inspector panel", onClick: onToggleCollapsed, children: "Collapse" })] }), selectedPage ? (_jsxs("div", { className: "anlyx-inspector-stack", children: [_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Details", children: [_jsx("h3", { children: "Details" }), _jsx(Field, { label: "Route", value: selectedPage.route }), _jsx(Field, { label: "File path", value: selectedPage.filePath ?? "Manual or unknown" }), _jsxs("div", { className: "anlyx-field", children: [_jsx("span", { className: "anlyx-field__label", children: "Capture status" }), _jsx(StatusBadge, { tone: selectedPage.captureStatus, children: selectedPage.captureStatus })] }), _jsx(Field, { label: "Screenshots", value: String(selectedPage.screenshots.length) }), _jsx(Field, { label: "API calls", value: String(selectedPage.apiCalls.length) })] }), selectedPage.errorMessage ? (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Capture error", children: [_jsx("h3", { children: "Capture error" }), _jsx("p", { children: selectedPage.errorMessage })] })) : null] })) : (_jsx("p", { className: "anlyx-empty", children: "No page selected" }))] }));
     }
     const linkedPages = selectedNode ? findLinkedPages(data, 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" : "Backend Node" })] }), _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) })] }), 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" }))] }));
+    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" }))] }));
 }
 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 })] }));
@@ -31,3 +33,20 @@ function findLinkedPages(data, nodeId) {
 function findDatabaseLabel(flow) {
     return flow?.nodes.find((node) => node.type === "database")?.label;
 }
+function findCalls(flow, nodeId) {
+    if (!flow) {
+        return [];
+    }
+    const allNodes = [...flow.nodes, ...flow.subFlows.flatMap((subFlow) => subFlow.nodes)];
+    const allEdges = [...flow.edges, ...flow.subFlows.flatMap((subFlow) => subFlow.edges)];
+    return allEdges
+        .filter((edge) => edge.from === nodeId)
+        .map((edge) => {
+        const target = allNodes.find((node) => node.id === edge.to);
+        return {
+            id: edge.id,
+            label: target?.label ?? edge.to,
+            confidence: edge.confidence ?? "unknown"
+        };
+    });
+}

package/dist/components/PageStoryboardView.js

@@ -7,5 +7,13 @@ export function PageStoryboardView({ data, page, onViewProcessFlow }) {
     const linkedEndpoints = page
         ? data.endpoints.filter((endpoint) => page.apiCalls.some((apiCall) => apiCall.endpointId === endpoint.id))
         : [];
-    return (_jsxs("main", { className: "anlyx-workspace", children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Connected Frontend" }), _jsx("h1", { children: page ? page.route : "Page Storyboard" })] }), _jsxs("div", { className: "anlyx-workspace-actions", children: [_jsx("button", { className: "anlyx-toolbar-button", type: "button", disabled: linkedEndpoints.length === 0, onClick: () => onViewProcessFlow("process"), children: "View Process Flow" }), page ? _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus }) : null] })] }), _jsx("section", { className: "anlyx-page-storyboard", role: "region", "aria-label": "Page Storyboard", children: page ? (_jsxs(_Fragment, { children: [_jsxs("section", { className: "anlyx-page-summary", "aria-label": "Selected page summary", children: [_jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Route" }), _jsx("h2", { children: page.route })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "File" }), _jsx("p", { children: page.filePath ?? "Unknown" })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Status" }), _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Linked endpoints" }), _jsx("p", { children: linkedEndpoints.length })] })] }), _jsx(CaptureStatusEmptyState, { status: page.captureStatus, ...(page.errorMessage ? { reason: page.errorMessage } : {}) }), _jsxs("div", { className: "anlyx-storyboard-grid", children: [_jsx(PageStoryboardCard, { page: page }), _jsxs("div", { className: "anlyx-storyboard-side", children: [_jsx(ApiCallList, { apiCalls: page.apiCalls }), _jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "Page to endpoint relationship", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "Page to Endpoint" }), _jsx("span", { children: linkedEndpoints.length })] }), linkedEndpoints.length > 0 ? (_jsxs("div", { className: "anlyx-relationship-diagram", children: [_jsxs("div", { className: "anlyx-relationship-source", children: [_jsx("strong", { children: page.route }), _jsx("span", { children: "Frontend Page" })] }), _jsx("ul", { className: "anlyx-relationship-list", children: linkedEndpoints.map((endpoint) => (_jsxs("li", { children: [_jsx("span", { className: "anlyx-relationship-line", "aria-hidden": "true" }), _jsx(StatusBadge, { tone: endpoint.method, children: endpoint.method }), _jsx("span", { children: endpoint.path })] }, endpoint.id))) })] })) : (_jsx("p", { className: "anlyx-empty-inline", children: "No backend endpoint was linked during capture." }))] })] })] })] })) : (_jsx("div", { className: "anlyx-storyboard-empty", children: _jsx("p", { children: "No pages available yet." }) })) })] }));
+    const linkedApiCallCount = page?.apiCalls.filter((apiCall) => apiCall.endpointId).length ?? 0;
+    const unmatchedApiCallCount = page ? page.apiCalls.length - linkedApiCallCount : 0;
+    return (_jsxs("main", { className: "anlyx-workspace", children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Connected Frontend" }), _jsx("h1", { children: page ? page.route : "Page Storyboard" })] }), _jsxs("div", { className: "anlyx-workspace-actions", children: [_jsx("button", { className: "anlyx-toolbar-button", type: "button", disabled: linkedEndpoints.length === 0, onClick: () => onViewProcessFlow("process"), children: "View Process Flow" }), page ? _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus }) : null] })] }), _jsx("section", { className: "anlyx-page-storyboard", role: "region", "aria-label": "Page Storyboard", children: page ? (_jsxs(_Fragment, { children: [_jsxs("section", { className: "anlyx-page-summary", "aria-label": "Selected page summary", children: [_jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Route" }), _jsx("h2", { children: page.route })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "File" }), _jsx("p", { children: page.filePath ?? "Unknown" })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Status" }), _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Linked endpoints" }), _jsx("p", { children: linkedEndpoints.length })] })] }), _jsx(CaptureStatusEmptyState, { status: page.captureStatus, ...(page.errorMessage ? { reason: page.errorMessage } : {}) }), _jsx(PageEvidenceBoard, { linkedApiCallCount: linkedApiCallCount, linkedEndpointCount: linkedEndpoints.length, page: page, unmatchedApiCallCount: unmatchedApiCallCount }), _jsxs("div", { className: "anlyx-storyboard-grid", children: [_jsx(PageStoryboardCard, { page: page }), _jsxs("div", { className: "anlyx-storyboard-side", children: [_jsx(ApiCallList, { apiCalls: page.apiCalls, endpoints: data.endpoints }), _jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "Page to endpoint relationship", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "Page to Endpoint" }), _jsx("span", { children: linkedEndpoints.length })] }), linkedEndpoints.length > 0 ? (_jsxs("div", { className: "anlyx-relationship-diagram", children: [_jsxs("div", { className: "anlyx-relationship-source", children: [_jsx("strong", { children: page.route }), _jsx("span", { children: "Frontend Page" })] }), _jsx("ul", { className: "anlyx-relationship-list", children: linkedEndpoints.map((endpoint) => (_jsxs("li", { children: [_jsx("span", { className: "anlyx-relationship-line", "aria-hidden": "true" }), _jsx(StatusBadge, { tone: endpoint.method, children: endpoint.method }), _jsx("span", { children: endpoint.path })] }, endpoint.id))) })] })) : (_jsx("p", { className: "anlyx-empty-inline", children: "No backend endpoint was linked during capture." }))] })] })] })] })) : (_jsx("div", { className: "anlyx-storyboard-empty", children: _jsx("p", { children: "No pages available yet." }) })) })] }));
+}
+function PageEvidenceBoard({ linkedApiCallCount, linkedEndpointCount, page, unmatchedApiCallCount }) {
+    return (_jsxs("section", { className: "anlyx-page-evidence-board", role: "region", "aria-label": "Page execution evidence", children: [_jsxs("div", { className: "anlyx-page-evidence-board__intro", children: [_jsx("span", { children: "Capture proof" }), _jsx("strong", { children: page.captureStatus === "success" ? "Observed page run" : "Incomplete page run" })] }), _jsx(EvidenceMetric, { label: "Screenshots", value: String(page.screenshots.length), detail: page.screenshots.length > 0 ? "visual segments captured" : "waiting for capture" }), _jsx(EvidenceMetric, { label: "API evidence", value: String(page.apiCalls.length), detail: `${linkedApiCallCount} linked` }), _jsx(EvidenceMetric, { label: "Backend linkage", value: String(linkedEndpointCount), detail: `${unmatchedApiCallCount} unmatched` })] }));
+}
+function EvidenceMetric({ detail, label, value }) {
+    return (_jsxs("div", { className: "anlyx-page-evidence-metric", children: [_jsx("span", { children: label }), _jsx("strong", { children: value }), _jsx("em", { children: detail })] }));
 }

package/dist/components/ProcessFlowView.js

@@ -3,7 +3,14 @@ import { EndpointMapCanvas } from "./EndpointMapCanvas.js";
 import { ProcessTimeline } from "./ProcessTimeline.js";
 import { ReplayControls } from "./ReplayControls.js";
 export function ProcessFlowView({ endpoint, flow, replayState, replaySteps, replayLoop, replayDisabled, replaySpeed, selectedNodeId, onSelectNode, onPause, onPlay, onRestart, onToggleLoop, onSpeedChange, onViewStructure }) {
-    return (_jsxs("div", { className: "anlyx-process-view", children: [_jsx(ReplayControls, { disabled: replayDisabled, loop: replayLoop, speed: replaySpeed, state: replayState, steps: replaySteps, unavailableReason: "Process Flow is unavailable because this endpoint has no scanned main path.", onPause: onPause, onPlay: onPlay, onRestart: onRestart, onSpeedChange: onSpeedChange, onToggleLoop: onToggleLoop }), _jsx(EndpointMapCanvas, { eyebrow: "Request Process Flow", endpoint: endpoint, flow: flow, replayState: replayState, selectedNodeId: selectedNodeId, title: endpoint
+    const replayStepLabels = buildReplayStepLabels(flow);
+    return (_jsxs("div", { className: "anlyx-process-view", children: [_jsx(ReplayControls, { disabled: replayDisabled, loop: replayLoop, speed: replaySpeed, state: replayState, stepLabels: replayStepLabels, steps: replaySteps, unavailableReason: "Process Flow is unavailable because this endpoint has no scanned main path.", onPause: onPause, onPlay: onPlay, onRestart: onRestart, onSpeedChange: onSpeedChange, onToggleLoop: onToggleLoop }), _jsx(EndpointMapCanvas, { eyebrow: "Request Process Flow", endpoint: endpoint, flow: flow, replayState: replayState, selectedNodeId: selectedNodeId, title: endpoint
                     ? `${endpoint.method} ${endpoint.path}`
                     : "Request process flow from scanned graph", toolbar: _jsx("button", { className: "anlyx-toolbar-button", type: "button", onClick: onViewStructure, children: "View on Structure" }), variant: "process", onSelectNode: onSelectNode }), _jsx(ProcessTimeline, { flow: flow, state: replayState, steps: replaySteps })] }));
 }
+function buildReplayStepLabels(flow) {
+    if (!flow) {
+        return {};
+    }
+    return Object.fromEntries(flow.nodes.map((node) => [node.id, node.label]));
+}

package/dist/components/ReplayControls.d.ts

@@ -3,6 +3,7 @@ import type { ReplayStep } from "../replay/build-replay-steps.js";
 export type ReplayControlsProps = {
     state: ReplayLiteState;
     steps: ReplayStep[];
+    stepLabels?: Record<string, string>;
     loop: boolean;
     disabled?: boolean;
     speed: number;
@@ -13,4 +14,4 @@ export type ReplayControlsProps = {
     onToggleLoop: () => void;
     onSpeedChange: (speed: number) => void;
 };
-export declare function ReplayControls({ state, steps, loop, speed, disabled, unavailableReason, onPlay, onPause, onRestart, onToggleLoop, onSpeedChange }: ReplayControlsProps): JSX.Element;
+export declare function ReplayControls({ state, steps, stepLabels, loop, speed, disabled, unavailableReason, onPlay, onPause, onRestart, onToggleLoop, onSpeedChange }: ReplayControlsProps): JSX.Element;

package/dist/components/ReplayControls.js

@@ -1,6 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pause, Play, RefreshCw, Repeat2 } from "lucide-react";
-export function ReplayControls({ state, steps, loop, speed, disabled = false, unavailableReason, onPlay, onPause, onRestart, onToggleLoop, onSpeedChange }) {
+export function ReplayControls({ state, steps, stepLabels = {}, loop, speed, disabled = false, unavailableReason, onPlay, onPause, onRestart, onToggleLoop, onSpeedChange }) {
     const currentStepNumber = state.phase === "idle" ? 0 : Math.min(state.currentStepIndex + 1, steps.length);
-    return (_jsxs("section", { className: "anlyx-replay", "aria-label": "Process Flow controls", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Replay from scanned flow graph" }), _jsxs("div", { className: "anlyx-replay__buttons", "aria-label": "Process Flow actions", children: [_jsxs("button", { className: "anlyx-replay__button--primary", type: "button", disabled: disabled || state.isPlaying, onClick: onPlay, children: [_jsx(Play, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Play" })] }), _jsxs("button", { type: "button", disabled: disabled || !state.isPlaying, onClick: onPause, children: [_jsx(Pause, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Pause" })] }), _jsxs("button", { type: "button", disabled: disabled, onClick: onRestart, children: [_jsx(RefreshCw, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Restart" })] }), _jsxs("button", { type: "button", "aria-pressed": loop, disabled: disabled, onClick: onToggleLoop, children: [_jsx(Repeat2, { size: 14, strokeWidth: 2.5 }), _jsxs("span", { children: ["Loop ", loop ? "on" : "off"] })] })] })] }), _jsxs("div", { className: "anlyx-replay__state", children: [_jsxs("span", { children: ["Step ", currentStepNumber, "/", steps.length] }), _jsxs("span", { children: ["Phase: ", state.phase] }), _jsxs("label", { children: ["Speed", _jsxs("select", { "aria-label": "Replay speed", disabled: disabled, value: speed, onChange: (event) => onSpeedChange(Number(event.currentTarget.value)), children: [_jsx("option", { value: 1100, children: "0.75x" }), _jsx("option", { value: 800, children: "1x" }), _jsx("option", { value: 520, children: "1.5x" })] })] }), _jsx("span", { children: "Main Flow only" })] }), disabled && unavailableReason ? (_jsx("p", { className: "anlyx-replay__empty", children: unavailableReason })) : null] }));
+    const currentStep = state.phase === "idle" || state.phase === "complete"
+        ? undefined
+        : steps[state.currentStepIndex];
+    const focusLabel = currentStep ? formatStepNode(currentStep.nodeId, stepLabels) : "Ready";
+    const edgeLabel = formatStepEdge(currentStep, stepLabels);
+    const phaseLabel = formatReplayPhase(state.phase);
+    return (_jsxs("section", { className: "anlyx-replay", "aria-label": "Process Flow controls", children: [_jsxs("div", { className: "anlyx-replay__top", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Replay from scanned flow graph" }), _jsxs("div", { className: "anlyx-replay__buttons", "aria-label": "Process Flow actions", children: [_jsxs("button", { className: "anlyx-replay__button--primary", type: "button", disabled: disabled || state.isPlaying, onClick: onPlay, children: [_jsx(Play, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Play" })] }), _jsxs("button", { type: "button", disabled: disabled || !state.isPlaying, onClick: onPause, children: [_jsx(Pause, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Pause" })] }), _jsxs("button", { type: "button", disabled: disabled, onClick: onRestart, children: [_jsx(RefreshCw, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Restart" })] }), _jsxs("button", { type: "button", "aria-pressed": loop, disabled: disabled, onClick: onToggleLoop, children: [_jsx(Repeat2, { size: 14, strokeWidth: 2.5 }), _jsxs("span", { children: ["Loop ", loop ? "on" : "off"] })] })] })] }), _jsxs("div", { className: "anlyx-replay__state", children: [_jsxs("span", { children: ["Step ", currentStepNumber, "/", steps.length] }), _jsxs("span", { children: ["Phase: ", state.phase] }), _jsxs("label", { children: ["Speed", _jsxs("select", { "aria-label": "Replay speed", disabled: disabled, value: speed, onChange: (event) => onSpeedChange(Number(event.currentTarget.value)), children: [_jsx("option", { value: 1100, children: "0.75x" }), _jsx("option", { value: 800, children: "1x" }), _jsx("option", { value: 520, children: "1.5x" })] })] }), _jsx("span", { children: "Main Flow only" })] })] }), _jsxs("div", { className: "anlyx-replay__focus", role: "group", "aria-label": "Replay focus", children: [_jsxs("div", { children: [_jsx("span", { className: "anlyx-replay__phase", children: phaseLabel }), _jsx("strong", { children: focusLabel }), _jsx("p", { children: edgeLabel })] }), _jsx("ol", { className: "anlyx-replay__rail", "aria-label": "Replay step rail", children: steps.map((step, index) => (_jsx("li", { className: index === state.currentStepIndex ? "anlyx-replay__rail-step--active" : "", "aria-current": index === state.currentStepIndex ? "step" : undefined, title: `${formatReplayPhase(step.phase)}: ${formatStepNode(step.nodeId, stepLabels)}`, children: _jsx("span", { children: String(index + 1).padStart(2, "0") }) }, `${step.phase}:${step.nodeId}:${step.index}`))) })] }), disabled && unavailableReason ? (_jsx("p", { className: "anlyx-replay__empty", children: unavailableReason })) : null] }));
+}
+function formatReplayPhase(phase) {
+    switch (phase) {
+        case "request":
+            return "Request travel";
+        case "response":
+            return "Response return";
+        case "complete":
+            return "Response delivered";
+        case "idle":
+            return "Ready to replay";
+    }
+}
+function formatStepNode(nodeId, labels) {
+    return labels[nodeId] ?? nodeId;
+}
+function formatStepEdge(step, labels) {
+    if (!step?.fromNodeId || !step.toNodeId) {
+        return "Waiting at the first visible node in the scanned main path.";
+    }
+    return `${formatStepNode(step.fromNodeId, labels)} -> ${formatStepNode(step.toNodeId, labels)}`;
 }

package/dist/components/Sidebar.d.ts

@@ -1,11 +1,11 @@
 import type { Endpoint, PageStoryboard, ScanResult } from "@anlyx/core";
 type SidebarProps = {
     data: ScanResult;
-    activeView: "structure" | "frontend" | "process";
+    activeView: "flowStory" | "structure" | "frontend" | "process";
     collapsed: boolean;
     selectedEndpointId: string | undefined;
     selectedPageId: string | undefined;
-    onSelectView: (view: "structure" | "frontend" | "process") => void;
+    onSelectView: (view: "flowStory" | "structure" | "frontend" | "process") => void;
     onToggleCollapsed: () => void;
     onSelectEndpoint: (endpoint: Endpoint) => void;
     onSelectPage: (page: PageStoryboard) => void;

package/dist/components/Sidebar.js

@@ -1,10 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PanelLeftClose, PanelLeftOpen, Search } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, PanelLeftClose, PanelLeftOpen, Search } from "lucide-react";
 import { EndpointList } from "./EndpointList.js";
 import { PageList } from "./PageList.js";
 export function Sidebar({ data, activeView, collapsed, selectedEndpointId, selectedPageId, onSelectView, onToggleCollapsed, onSelectEndpoint, onSelectPage }) {
     if (collapsed) {
         return (_jsxs("aside", { className: "anlyx-sidebar anlyx-sidebar--collapsed", "aria-label": "Primary navigation", children: [_jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Expand navigation panel", onClick: onToggleCollapsed, children: _jsx(PanelLeftOpen, { size: 15, strokeWidth: 2.4 }) }), _jsx("span", { className: "anlyx-collapsed-label", children: "Nav" })] }));
     }
-    return (_jsxs("aside", { className: "anlyx-sidebar", "aria-label": "Primary navigation", children: [_jsxs("div", { className: "anlyx-brand", children: [_jsx("div", { className: "anlyx-brand__mark", "aria-hidden": "true", children: "A" }), _jsxs("div", { children: [_jsx("div", { className: "anlyx-brand__name", children: "Anlyx" }), _jsx("div", { className: "anlyx-brand__project", children: data.projectName })] }), _jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Collapse navigation panel", onClick: onToggleCollapsed, children: _jsx(PanelLeftClose, { size: 15, strokeWidth: 2.4 }) })] }), _jsxs("nav", { className: "anlyx-tabs", "aria-label": "Views", children: [_jsx("button", { className: activeView === "structure" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("structure"), children: "Structure" }), _jsx("button", { className: activeView === "frontend" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("frontend"), children: "Connected Frontend" }), _jsx("button", { className: activeView === "process" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("process"), children: "Process Flow" })] }), _jsxs("label", { className: "anlyx-search", children: [_jsx("span", { className: "anlyx-search__label", children: "Search" }), _jsxs("span", { className: "anlyx-search__control", children: [_jsx(Search, { size: 14, strokeWidth: 2.4 }), _jsx("input", { placeholder: "Search endpoints or pages", type: "search" })] })] }), _jsx("div", { className: "anlyx-sidebar__list-region", children: activeView === "frontend" ? (_jsx(PageList, { pages: data.pages, selectedPageId: selectedPageId, onSelectPage: onSelectPage })) : (_jsx(EndpointList, { endpoints: data.endpoints, selectedEndpointId: selectedEndpointId, onSelectEndpoint: onSelectEndpoint })) })] }));
+    return (_jsxs("aside", { className: "anlyx-sidebar", "aria-label": "Primary navigation", children: [_jsxs("div", { className: "anlyx-brand", children: [_jsx("div", { className: "anlyx-brand__mark", "aria-hidden": "true", children: "A" }), _jsxs("div", { children: [_jsx("div", { className: "anlyx-brand__name", children: "Anlyx" }), _jsx("div", { className: "anlyx-brand__project", children: "Interaction flow map" })] }), _jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Collapse navigation panel", onClick: onToggleCollapsed, children: _jsx(PanelLeftClose, { size: 15, strokeWidth: 2.4 }) })] }), _jsxs("button", { className: "anlyx-project-select", type: "button", "aria-label": `Project ${data.projectName}`, children: [_jsx(Box, { size: 15, strokeWidth: 2.4 }), _jsx("span", { children: data.projectName })] }), _jsxs("nav", { className: "anlyx-tabs", "aria-label": "Views", children: [_jsx("button", { className: activeView === "flowStory" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("flowStory"), children: "Flow Story" }), _jsx("button", { className: activeView === "structure" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("structure"), children: "Structure" }), _jsx("button", { className: activeView === "frontend" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("frontend"), children: "Captures" }), _jsx("button", { className: activeView === "process" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("process"), children: "Process" })] }), _jsxs("label", { className: "anlyx-search", children: [_jsx("span", { className: "anlyx-search__label", children: "Search" }), _jsxs("span", { className: "anlyx-search__control", children: [_jsx(Search, { size: 14, strokeWidth: 2.4 }), _jsx("input", { placeholder: "Search pages, endpoints, or services", type: "search" })] })] }), _jsxs("div", { className: "anlyx-sidebar__list-region", children: [_jsx(PageList, { pages: data.pages, selectedPageId: selectedPageId, onSelectPage: onSelectPage }), _jsx(EndpointList, { endpoints: data.endpoints, selectedEndpointId: selectedEndpointId, onSelectEndpoint: onSelectEndpoint }), _jsx(BackendServiceList, { data: data })] })] }));
+}
+function BackendServiceList({ data }) {
+    const services = [
+        ...new Map(data.flows
+            .flatMap((flow) => [...flow.nodes, ...flow.subFlows.flatMap((subFlow) => subFlow.nodes)])
+            .filter((node) => ["service", "repository", "mapper", "validator", "utility"].includes(node.type))
+            .map((node) => [node.id, node])).values()
+    ];
+    if (services.length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs("section", { className: "anlyx-sidebar-section", "aria-labelledby": "anlyx-services-heading", children: [_jsx("div", { className: "anlyx-section-heading", id: "anlyx-services-heading", children: "Backend Services" }), _jsx("ul", { className: "anlyx-list anlyx-list--compact", "aria-label": "Backend service list", children: services.map((node) => (_jsxs("li", { className: "anlyx-service-row", children: [_jsx(Box, { size: 14, strokeWidth: 2.3 }), _jsx("span", { children: node.label })] }, node.id))) })] }));
 }