@anlyx/ui 0.1.1 → 0.1.3

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

@@ -1,9 +1,14 @@
-import type { EndpointFlow, FlowNode, ScanResult } from "@anlyx/core";
+import type { EndpointFlow, FlowNode, PageStoryboard, ScanResult } from "@anlyx/core";
+import type { ReplayLiteState } from "../replay/use-replay-lite.js";
 type InspectorPanelProps = {
     data: ScanResult;
+    activeView: "flowStory" | "structure" | "frontend" | "process";
+    collapsed: boolean;
     selectedFlow: EndpointFlow | undefined;
     selectedNode: FlowNode | undefined;
+    selectedPage: PageStoryboard | undefined;
+    replayState: ReplayLiteState;
+    onToggleCollapsed: () => void;
 };
-export declare function InspectorPanel({ data, selectedFlow, selectedNode }: InspectorPanelProps): JSX.Element;
+export declare function InspectorPanel({ data, activeView, collapsed, selectedFlow, selectedNode, selectedPage, replayState, onToggleCollapsed }: InspectorPanelProps): JSX.Element;
 export {};
-//# sourceMappingURL=InspectorPanel.d.ts.map

package/dist/components/InspectorPanel.js

@@ -1,8 +1,16 @@
 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, selectedFlow, selectedNode }) {
+export function InspectorPanel({ data, activeView, collapsed, selectedFlow, selectedNode, selectedPage, replayState, onToggleCollapsed }) {
+    if (collapsed) {
+        return (_jsxs("aside", { className: "anlyx-inspector anlyx-inspector--collapsed", role: "complementary", "aria-label": "Inspector", children: [_jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Expand inspector panel", onClick: onToggleCollapsed, children: "Open" }), _jsx("span", { className: "anlyx-collapsed-label", children: "Inspector" })] }));
+    }
+    if (activeView === "frontend") {
+        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: [_jsx("p", { className: "anlyx-eyebrow", children: "Inspector" }), _jsx("h2", { children: "Selected Node" })] }), selectedNode ? (_jsxs("div", { className: "anlyx-inspector-stack", children: [_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: [_jsx("h3", { children: "Metadata" }), _jsx("pre", { className: "anlyx-metadata", children: JSON.stringify(selectedNode.metadata, null, 2) })] })) : null, _jsxs("div", { className: "anlyx-field", children: [_jsx("span", { className: "anlyx-field__label", 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 })] }));
@@ -10,10 +18,35 @@ function Field({ label, value }) {
 function formatLineNumber(lineNumber) {
     return lineNumber === undefined ? "Unknown" : String(lineNumber);
 }
+function formatActiveEdge(replayState) {
+    if (!replayState.activeEdge) {
+        return "none";
+    }
+    return `${replayState.activeEdge.from} -> ${replayState.activeEdge.to}`;
+}
+function copyToClipboard(value) {
+    void navigator.clipboard?.writeText(value);
+}
 function findLinkedPages(data, nodeId) {
     return data.pages.filter((page) => page.apiCalls.some((apiCall) => apiCall.endpointId === nodeId));
 }
 function findDatabaseLabel(flow) {
     return flow?.nodes.find((node) => node.type === "database")?.label;
 }
-//# sourceMappingURL=InspectorPanel.js.map
+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/PageList.d.ts

@@ -6,4 +6,3 @@ type PageListProps = {
 };
 export declare function PageList({ pages, selectedPageId, onSelectPage }: PageListProps): JSX.Element;
 export {};
-//# sourceMappingURL=PageList.d.ts.map

package/dist/components/PageList.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusBadge } from "./StatusBadge.js";
 export function PageList({ pages, selectedPageId, onSelectPage }) {
-    return (_jsxs("section", { className: "anlyx-sidebar-section", "aria-labelledby": "anlyx-pages-heading", children: [_jsx("div", { className: "anlyx-section-heading", id: "anlyx-pages-heading", children: "Pages" }), _jsx("ul", { className: "anlyx-list", "aria-label": "Page list", children: pages.map((page) => (_jsx("li", { className: "anlyx-list-item", children: _jsxs("button", { className: "anlyx-page-button", type: "button", "aria-current": page.id === selectedPageId ? "true" : undefined, "aria-label": `${page.route} ${page.captureStatus} ${page.apiCalls.length} API calls ${page.screenshots.length} screenshots`, onClick: () => onSelectPage(page), children: [_jsx("span", { className: "anlyx-list-item__line", children: _jsx("span", { className: "anlyx-list-item__primary", children: page.route }) }), _jsxs("span", { className: "anlyx-list-item__meta", children: [_jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus }), _jsxs("span", { children: [page.apiCalls.length, " API calls"] }), _jsxs("span", { children: [page.screenshots.length, " screenshots"] })] }), page.errorMessage ? (_jsx("span", { className: "anlyx-list-item__meta", children: page.errorMessage })) : null] }) }, page.id))) })] }));
+    return (_jsxs("section", { className: "anlyx-sidebar-section", "aria-labelledby": "anlyx-pages-heading", children: [_jsx("div", { className: "anlyx-section-heading", id: "anlyx-pages-heading", children: "Frontend Pages" }), _jsx("ul", { className: "anlyx-list", "aria-label": "Page list", children: pages.map((page) => (_jsx("li", { className: "anlyx-list-item", children: _jsxs("button", { className: "anlyx-page-button", type: "button", "aria-current": page.id === selectedPageId ? "true" : undefined, "aria-label": `${page.route} ${page.captureStatus} ${page.apiCalls.length} API calls ${page.screenshots.length} screenshots`, onClick: () => onSelectPage(page), children: [_jsx("span", { className: "anlyx-list-item__line", children: _jsx("span", { className: "anlyx-list-item__primary", children: page.route }) }), _jsxs("span", { className: "anlyx-list-item__meta", children: [_jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus }), _jsxs("span", { children: [page.apiCalls.length, " API calls"] }), _jsxs("span", { children: [page.screenshots.length, " screenshots"] })] }), page.errorMessage ? (_jsx("span", { className: "anlyx-list-item__meta", children: page.errorMessage })) : null] }) }, page.id))) })] }));
 }
-//# sourceMappingURL=PageList.js.map

package/dist/components/PageStoryboardCard.d.ts

@@ -3,4 +3,3 @@ export type PageStoryboardCardProps = {
     page: PageStoryboard;
 };
 export declare function PageStoryboardCard({ page }: PageStoryboardCardProps): JSX.Element;
-//# sourceMappingURL=PageStoryboardCard.d.ts.map

package/dist/components/PageStoryboardCard.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScreenshotSegmentCard } from "./ScreenshotSegmentCard.js";
 export function PageStoryboardCard({ page }) {
-    return (_jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "Screenshot segments", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "Segments" }), _jsx("span", { children: page.screenshots.length })] }), page.screenshots.length > 0 ? (_jsx("div", { className: "anlyx-segment-grid", children: page.screenshots.map((segment) => (_jsx(ScreenshotSegmentCard, { segment: segment }, `${page.id}:segment:${segment.segmentIndex}`))) })) : (_jsx("p", { className: "anlyx-empty-inline", children: "No screenshots captured yet." }))] }));
+    return (_jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "Screenshot segments", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "Segments" }), _jsx("span", { children: page.screenshots.length })] }), page.screenshots.length > 0 ? (_jsx("div", { className: "anlyx-segment-grid", children: page.screenshots.map((segment) => (_jsx(ScreenshotSegmentCard, { segment: segment }, `${page.id}:segment:${segment.segmentIndex}`))) })) : (_jsxs("div", { className: "anlyx-segment-grid anlyx-segment-grid--empty", children: [_jsx(PlaceholderSegment, { index: 1, title: "Overview" }), _jsx(PlaceholderSegment, { index: 2, title: "Primary content" }), _jsx(PlaceholderSegment, { index: 3, title: "Related sections" })] }))] }));
+}
+function PlaceholderSegment({ index, title }) {
+    return (_jsxs("article", { className: "anlyx-segment-card anlyx-segment-card--placeholder", children: [_jsx("div", { className: "anlyx-segment-card__image", "aria-hidden": "true", children: _jsx("span", { children: index }) }), _jsxs("div", { className: "anlyx-segment-card__body", children: [_jsx("h3", { children: title }), _jsx("p", { children: "Waiting for capture data" }), _jsxs("div", { className: "anlyx-segment-card__meta", children: [_jsx("span", { children: "Viewport pending" }), _jsx("span", { children: "Capture pending" })] })] })] }));
 }
-//# sourceMappingURL=PageStoryboardCard.js.map

package/dist/components/PageStoryboardView.d.ts

@@ -1,6 +1,7 @@
-import type { PageStoryboard } from "@anlyx/core";
+import type { PageStoryboard, ScanResult } from "@anlyx/core";
 export type PageStoryboardViewProps = {
+    data: ScanResult;
     page: PageStoryboard | undefined;
+    onViewProcessFlow: (view: "process") => void;
 };
-export declare function PageStoryboardView({ page }: PageStoryboardViewProps): JSX.Element;
-//# sourceMappingURL=PageStoryboardView.d.ts.map
+export declare function PageStoryboardView({ data, page, onViewProcessFlow }: PageStoryboardViewProps): JSX.Element;

package/dist/components/PageStoryboardView.js

@@ -3,7 +3,17 @@ import { ApiCallList } from "./ApiCallList.js";
 import { CaptureStatusEmptyState } from "./CaptureStatusEmptyState.js";
 import { PageStoryboardCard } from "./PageStoryboardCard.js";
 import { StatusBadge } from "./StatusBadge.js";
-export function PageStoryboardView({ page }) {
-    return (_jsxs("main", { className: "anlyx-workspace", children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Page Storyboard" }), _jsx("h1", { children: "Page Storyboard" })] }), 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 })] })] }), _jsx(CaptureStatusEmptyState, { status: page.captureStatus, ...(page.errorMessage ? { reason: page.errorMessage } : {}) }), _jsxs("div", { className: "anlyx-storyboard-grid", children: [_jsx(PageStoryboardCard, { page: page }), _jsx(ApiCallList, { apiCalls: page.apiCalls })] })] })) : (_jsx("div", { className: "anlyx-storyboard-empty", children: _jsx("p", { children: "No pages available yet." }) })) })] }));
+export function PageStoryboardView({ data, page, onViewProcessFlow }) {
+    const linkedEndpoints = page
+        ? data.endpoints.filter((endpoint) => page.apiCalls.some((apiCall) => apiCall.endpointId === endpoint.id))
+        : [];
+    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 })] }));
 }
-//# sourceMappingURL=PageStoryboardView.js.map

package/dist/components/ProcessFlowView.d.ts

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

package/dist/components/ProcessFlowView.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    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/ProcessTimeline.d.ts

@@ -0,0 +1,9 @@
+import type { EndpointFlow } from "@anlyx/core";
+import type { ReplayStep } from "../replay/build-replay-steps.js";
+import type { ReplayLiteState } from "../replay/use-replay-lite.js";
+export type ProcessTimelineProps = {
+    flow: EndpointFlow | undefined;
+    steps: ReplayStep[];
+    state: ReplayLiteState;
+};
+export declare function ProcessTimeline({ flow, steps, state }: ProcessTimelineProps): JSX.Element;

package/dist/components/ProcessTimeline.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { motion } from "motion/react";
+export function ProcessTimeline({ flow, steps, state }) {
+    const nodeById = new Map(flow?.nodes.map((node) => [node.id, node]) ?? []);
+    const isComplete = state.phase === "complete";
+    return (_jsxs("section", { className: "anlyx-process-timeline", "aria-label": "Process Flow timeline", children: [_jsxs("div", { className: "anlyx-process-timeline__header", children: [_jsx("span", { children: "Inferred request path" }), _jsxs("span", { children: [steps.length, " replay steps"] })] }), _jsxs("ol", { className: "anlyx-process-timeline__rail", children: [steps.map((step, index) => {
+                        const node = nodeById.get(step.nodeId);
+                        const isActive = state.phase !== "idle" &&
+                            state.phase !== "complete" &&
+                            state.currentStepIndex === index;
+                        const isCompleted = state.phase === "complete" ||
+                            (state.phase !== "idle" && state.currentStepIndex > index);
+                        return (_jsxs("li", { className: [
+                                "anlyx-process-step",
+                                `anlyx-process-step--${step.phase}`,
+                                isActive ? "anlyx-process-step--active" : "",
+                                isCompleted ? "anlyx-process-step--complete" : ""
+                            ]
+                                .filter(Boolean)
+                                .join(" "), children: [_jsx(motion.span, { animate: isActive ? { scale: [1, 1.18, 1] } : { scale: 1 }, className: "anlyx-process-step__dot", "aria-hidden": "true", transition: { duration: 1.1, repeat: isActive ? Infinity : 0 }, children: isCompleted ? _jsx(Check, { size: 11, strokeWidth: 3 }) : null }), _jsx("span", { className: "anlyx-process-step__phase", children: step.phase === "request" ? "Request" : "Response" }), _jsx("span", { className: "anlyx-process-step__label", children: formatStepLabel(node?.type, step.phase) }), _jsx("span", { className: "anlyx-process-step__node", children: node?.label ?? step.nodeId })] }, `${step.phase}:${step.nodeId}:${index}`));
+                    }), _jsxs("li", { className: [
+                            "anlyx-process-step",
+                            "anlyx-process-step--complete-stop",
+                            isComplete ? "anlyx-process-step--active" : ""
+                        ]
+                            .filter(Boolean)
+                            .join(" "), children: [_jsx(motion.span, { animate: isComplete ? { scale: [1, 1.18, 1] } : { scale: 1 }, className: "anlyx-process-step__dot", "aria-hidden": "true", transition: { duration: 1.1, repeat: isComplete ? Infinity : 0 }, children: isComplete ? _jsx(Check, { size: 11, strokeWidth: 3 }) : null }), _jsx("span", { className: "anlyx-process-step__phase", children: "Complete" }), _jsx("span", { className: "anlyx-process-step__label", children: "Client" }), _jsx("span", { className: "anlyx-process-step__node", children: "Response delivered" })] })] })] }));
+}
+function formatStepLabel(type, phase) {
+    const suffix = phase === "response" ? " Return" : "";
+    switch (type) {
+        case "endpoint":
+            return phase === "response" ? "Endpoint Return" : "Endpoint";
+        case "controller":
+            return `Controller${suffix}`;
+        case "service":
+            return `Service${suffix}`;
+        case "repository":
+            return `Repository${suffix}`;
+        case "database":
+            return phase === "response" ? "Database Result" : "Database";
+        default:
+            return "Flow Node";
+    }
+}

package/dist/components/ReplayControls.d.ts

@@ -1,13 +1,17 @@
 import type { ReplayLiteState } from "../replay/use-replay-lite.js";
+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;
     unavailableReason?: string;
     onPlay: () => void;
     onPause: () => void;
     onRestart: () => void;
     onToggleLoop: () => void;
+    onSpeedChange: (speed: number) => void;
 };
-export declare function ReplayControls({ state, loop, disabled, unavailableReason, onPlay, onPause, onRestart, onToggleLoop }: ReplayControlsProps): JSX.Element;
-//# sourceMappingURL=ReplayControls.d.ts.map
+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,5 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ReplayControls({ state, loop, disabled = false, unavailableReason, onPlay, onPause, onRestart, onToggleLoop }) {
-    return (_jsxs("section", { className: "anlyx-replay", "aria-label": "Replay Lite controls", children: [_jsxs("div", { className: "anlyx-replay__buttons", "aria-label": "Replay actions", children: [_jsx("button", { type: "button", disabled: disabled || state.isPlaying, onClick: onPlay, children: "Play" }), _jsx("button", { type: "button", disabled: disabled || !state.isPlaying, onClick: onPause, children: "Pause" }), _jsx("button", { type: "button", disabled: disabled, onClick: onRestart, children: "Restart" }), _jsxs("button", { type: "button", "aria-pressed": loop, disabled: disabled, onClick: onToggleLoop, children: ["Loop ", loop ? "on" : "off"] })] }), _jsxs("div", { className: "anlyx-replay__state", children: [_jsxs("span", { children: ["Phase: ", state.phase] }), _jsxs("span", { children: ["Active: ", state.activeNodeId ?? "none"] }), _jsx("span", { children: "Main Flow only" })] }), disabled && unavailableReason ? (_jsx("p", { className: "anlyx-replay__empty", children: unavailableReason })) : null] }));
+import { Pause, Play, RefreshCw, Repeat2 } from "lucide-react";
+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);
+    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)}`;
 }
-//# sourceMappingURL=ReplayControls.js.map

package/dist/components/ScreenshotSegmentCard.d.ts

@@ -3,4 +3,3 @@ export type ScreenshotSegmentCardProps = {
     segment: ScreenshotSegment;
 };
 export declare function ScreenshotSegmentCard({ segment }: ScreenshotSegmentCardProps): JSX.Element;
-//# sourceMappingURL=ScreenshotSegmentCard.d.ts.map

package/dist/components/ScreenshotSegmentCard.js

@@ -3,4 +3,3 @@ export function ScreenshotSegmentCard({ segment }) {
     const title = segment.title ?? `Segment ${segment.segmentIndex + 1}`;
     return (_jsxs("article", { className: "anlyx-segment-card", children: [_jsx("div", { className: "anlyx-segment-card__image", children: segment.path ? _jsx("img", { alt: title, src: segment.path }) : _jsx("span", { children: "No image path" }) }), _jsxs("div", { className: "anlyx-segment-card__body", children: [_jsxs("h3", { children: ["Segment ", segment.segmentIndex + 1] }), segment.title ? _jsx("p", { children: segment.title }) : null, segment.path ? _jsx("code", { children: segment.path }) : _jsx("code", { children: "No path" }), _jsxs("div", { className: "anlyx-segment-card__meta", children: [_jsxs("span", { children: ["scrollY ", segment.scrollY] }), _jsxs("span", { children: [segment.viewport.width, " x ", segment.viewport.height] })] })] })] }));
 }
-//# sourceMappingURL=ScreenshotSegmentCard.js.map

package/dist/components/Sidebar.d.ts

@@ -1,13 +1,14 @@
 import type { Endpoint, PageStoryboard, ScanResult } from "@anlyx/core";
 type SidebarProps = {
     data: ScanResult;
-    activeView: "endpoint" | "pages" | "replay";
+    activeView: "flowStory" | "structure" | "frontend" | "process";
+    collapsed: boolean;
     selectedEndpointId: string | undefined;
     selectedPageId: string | undefined;
-    onSelectView: (view: "endpoint" | "pages" | "replay") => void;
+    onSelectView: (view: "flowStory" | "structure" | "frontend" | "process") => void;
+    onToggleCollapsed: () => void;
     onSelectEndpoint: (endpoint: Endpoint) => void;
     onSelectPage: (page: PageStoryboard) => void;
 };
-export declare function Sidebar({ data, activeView, selectedEndpointId, selectedPageId, onSelectView, onSelectEndpoint, onSelectPage }: SidebarProps): JSX.Element;
+export declare function Sidebar({ data, activeView, collapsed, selectedEndpointId, selectedPageId, onSelectView, onToggleCollapsed, onSelectEndpoint, onSelectPage }: SidebarProps): JSX.Element;
 export {};
-//# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/Sidebar.js

@@ -1,7 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, selectedEndpointId, selectedPageId, onSelectView, onSelectEndpoint, onSelectPage }) {
-    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 })] })] }), _jsxs("nav", { className: "anlyx-tabs", "aria-label": "Views", children: [_jsx("button", { className: activeView === "endpoint" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("endpoint"), children: "Endpoint" }), _jsx("button", { className: activeView === "pages" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("pages"), children: "Pages" }), _jsx("button", { className: activeView === "replay" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("replay"), children: "Replay" })] }), _jsxs("label", { className: "anlyx-search", children: [_jsx("span", { className: "anlyx-search__label", children: "Search" }), _jsx("input", { placeholder: "Search endpoints or pages", type: "search" })] }), _jsx(EndpointList, { endpoints: data.endpoints, selectedEndpointId: selectedEndpointId, onSelectEndpoint: onSelectEndpoint }), _jsx(PageList, { pages: data.pages, selectedPageId: selectedPageId, onSelectPage: onSelectPage })] }));
+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: "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))) })] }));
 }
-//# sourceMappingURL=Sidebar.js.map

package/dist/components/StatusBadge.d.ts

@@ -6,4 +6,3 @@ type StatusBadgeProps = {
 };
 export declare function StatusBadge({ children, tone, label }: StatusBadgeProps): JSX.Element;
 export {};
-//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/StatusBadge.js

@@ -2,4 +2,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StatusBadge({ children, tone = "neutral", label }) {
     return (_jsxs("span", { className: `anlyx-status-badge anlyx-status-badge--${tone.toLowerCase()}`, children: [label ? _jsx("span", { className: "anlyx-status-badge__label", children: label }) : null, children] }));
 }
-//# sourceMappingURL=StatusBadge.js.map