@anlyx/ui 0.1.2 → 0.1.5

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,11 +9,25 @@ 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 }), _jsxs("div", { className: "anlyx-field", children: [_jsx("span", { className: "anlyx-field__label", children: "Status" }), _jsx(StatusBadge, { tone: selectedNode.status ?? "unknown", children: selectedNode.status ?? "unknown" })] }), _jsx(Field, { label: "File path", value: selectedNode.filePath ?? "Unknown" }), _jsx(Field, { label: "Line number", value: formatLineNumber(selectedNode.lineNumber) }), selectedNode.metadata ? (_jsx(Field, { label: "Generated by", value: formatGeneratedBy(selectedNode.metadata) })) : null] }), _jsx(TimingGroup, { timing: selectedNode.timing }), selectedNode.request ? (_jsx(JsonGroup, { title: "Request shape", ariaLabel: "Request shape", value: selectedNode.request })) : null, selectedNode.response ? (_jsx(JsonGroup, { title: "Response shape", ariaLabel: "Response shape", value: selectedNode.response })) : null, _jsx(AnalysisEvidenceList, { node: selectedNode }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Calls", children: [_jsx("h3", { children: "Calls" }), calls.length > 0 ? (_jsx("ul", { className: "anlyx-call-list", children: calls.map((call) => (_jsxs("li", { children: [_jsx("span", { children: call.label }), _jsx(StatusBadge, { tone: call.confidence, children: call.confidence })] }, call.id))) })) : (_jsx("p", { children: "No outgoing calls detected for this node." }))] }), selectedNode.metadata ? (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Metadata", children: [_jsxs("div", { className: "anlyx-inspector-group__heading", children: [_jsx("h3", { children: "Metadata" }), _jsx("button", { className: "anlyx-copy-button", type: "button", onClick: () => copyToClipboard(JSON.stringify(selectedNode.metadata, null, 2)), children: "Copy" })] }), _jsx("pre", { className: "anlyx-metadata", children: JSON.stringify(selectedNode.metadata, null, 2) })] })) : null, _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Confidence", children: [_jsx("h3", { children: "Confidence" }), _jsx(StatusBadge, { tone: selectedNode.confidence ?? "unknown", label: "confidence", children: selectedNode.confidence ?? "unknown" })] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Linked pages", children: [_jsx("h3", { children: "Linked pages" }), linkedPages.length > 0 ? (_jsx("ul", { children: linkedPages.map((page) => (_jsx("li", { children: page.route }, page.id))) })) : (_jsx("p", { children: "None" }))] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Sub flows", children: [_jsx("h3", { children: "Sub flows" }), _jsxs("p", { children: [selectedFlow?.subFlows.length ?? 0, " collapsed"] })] }), _jsxs("section", { className: "anlyx-inspector-group", "aria-label": "DB tables", children: [_jsx("h3", { children: "DB tables" }), _jsx("p", { children: findDatabaseLabel(selectedFlow) ?? "None" })] })] })) : (_jsx("p", { className: "anlyx-empty", children: "No node selected" }))] }));
 }
 function Field({ label, value }) {
     return (_jsxs("div", { className: "anlyx-field", children: [_jsx("span", { className: "anlyx-field__label", children: label }), _jsx("span", { className: "anlyx-field__value", children: value })] }));
 }
+function TimingGroup({ timing }) {
+    if (!timing || timing.kind === "unknown") {
+        return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Timing", children: [_jsx("h3", { children: "Timing" }), _jsx(Field, { label: "Kind", value: "Unknown" })] }));
+    }
+    if (timing.kind === "measured") {
+        return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Timing", children: [_jsx("h3", { children: "Timing" }), _jsx(Field, { label: "Kind", value: "Measured" }), _jsx(Field, { label: "Duration", value: `${timing.durationMs}ms` }), _jsx(Field, { label: "Evidence", value: timing.evidenceId })] }));
+    }
+    return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": "Timing", children: [_jsx("h3", { children: "Timing" }), _jsx(Field, { label: "Kind", value: "estimate" }), timing.durationMs !== undefined ? (_jsx(Field, { label: "Duration", value: `${timing.durationMs}ms` })) : null, _jsx(Field, { label: "Reason", value: timing.reason })] }));
+}
+function JsonGroup({ title, ariaLabel, value }) {
+    const formatted = JSON.stringify(value, null, 2);
+    return (_jsxs("section", { className: "anlyx-inspector-group", "aria-label": ariaLabel, children: [_jsxs("div", { className: "anlyx-inspector-group__heading", children: [_jsx("h3", { children: title }), _jsx("button", { className: "anlyx-copy-button", type: "button", onClick: () => copyToClipboard(formatted), children: "Copy" })] }), _jsx("pre", { className: "anlyx-metadata anlyx-shape-json", children: formatted })] }));
+}
 function formatLineNumber(lineNumber) {
     return lineNumber === undefined ? "Unknown" : String(lineNumber);
 }
@@ -25,9 +40,39 @@ function formatActiveEdge(replayState) {
 function copyToClipboard(value) {
     void navigator.clipboard?.writeText(value);
 }
+function formatGeneratedBy(metadata) {
+    const generatedBy = metadata.generatedBy;
+    if (!isRecord(generatedBy)) {
+        return "Unknown";
+    }
+    const name = typeof generatedBy.name === "string" ? generatedBy.name : undefined;
+    const type = typeof generatedBy.type === "string" ? generatedBy.type : undefined;
+    const version = typeof generatedBy.version === "string" ? generatedBy.version : undefined;
+    return [name, type, version].filter(Boolean).join(" · ") || "Unknown";
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 function findLinkedPages(data, nodeId) {
     return data.pages.filter((page) => page.apiCalls.some((apiCall) => apiCall.endpointId === nodeId));
 }
 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))) })] }));
 }

package/dist/components/StatusBadge.d.ts

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/mock-data.js

@@ -36,7 +36,15 @@ export const mockScanResult = scanResultSchema.parse({
                     id: "endpoint:get:/api/public/benefits/{id}",
                     type: "endpoint",
                     label: "GET /api/public/benefits/{id}",
-                    confidence: "high"
+                    confidence: "high",
+                    evidence: [
+                        {
+                            label: "Matched Spring mapping",
+                            detail: '@GetMapping("/api/public/benefits/{id}")',
+                            source: "spring-endpoint-scanner",
+                            confidence: "high"
+                        }
+                    ]
                 },
                 {
                     id: "controller:PublicBenefitController#getDetail",
@@ -44,25 +52,63 @@ export const mockScanResult = scanResultSchema.parse({
                     label: "PublicBenefitController#getDetail",
                     filePath: "backend/src/main/java/com/zup/benefit/PublicBenefitController.java",
                     lineNumber: 24,
-                    confidence: "unknown"
+                    confidence: "unknown",
+                    evidence: [
+                        {
+                            label: "Controller method detected",
+                            detail: "PublicBenefitController#getDetail",
+                            source: "spring-flow-scanner",
+                            confidence: "unknown"
+                        }
+                    ]
                 },
                 {
                     id: "service:PublicBenefitService#getBenefitDetail",
                     type: "service",
                     label: "PublicBenefitService#getBenefitDetail",
-                    confidence: "high"
+                    confidence: "high",
+                    evidence: [
+                        {
+                            label: "Matched from controller field call",
+                            detail: "publicBenefitService.getBenefitDetail(...)",
+                            source: "spring-flow-scanner",
+                            confidence: "high"
+                        },
+                        {
+                            label: "Resolved service class by field type",
+                            detail: "PublicBenefitService",
+                            source: "spring-flow-scanner",
+                            confidence: "high"
+                        }
+                    ]
                 },
                 {
                     id: "repository:BenefitRepository#findById",
                     type: "repository",
                     label: "BenefitRepository#findById",
-                    confidence: "high"
+                    confidence: "high",
+                    evidence: [
+                        {
+                            label: "Repository call detected in method body",
+                            detail: "benefitRepository.findById(...)",
+                            source: "spring-flow-scanner",
+                            confidence: "high"
+                        }
+                    ]
                 },
                 {
                     id: "database:benefits",
                     type: "database",
                     label: "benefits",
                     confidence: "high",
+                    evidence: [
+                        {
+                            label: "Resolved repository entity",
+                            detail: "Benefit -> benefits",
+                            source: "spring-flow-scanner",
+                            confidence: "high"
+                        }
+                    ],
                     metadata: {
                         tableName: "benefits"
                     }

package/dist/overlay/AnlyxFlowEdge.d.ts

@@ -0,0 +1,2 @@
+import { type EdgeProps } from "@xyflow/react";
+export declare function AnlyxFlowEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, data }: EdgeProps): JSX.Element;

package/dist/overlay/AnlyxFlowEdge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
+export function AnlyxFlowEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, data }) {
+    const [edgePath] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: 14
+    });
+    const tone = (data?.tone ?? "blue").toLowerCase();
+    return (_jsx(BaseEdge, { id: id, className: `anlyx-flow-rf-edge anlyx-flow-rf-edge--${tone}`, path: edgePath, ...(markerEnd ? { markerEnd } : {}) }));
+}

package/dist/overlay/AnlyxFlowNode.d.ts

@@ -0,0 +1,13 @@
+import { type NodeProps } from "@xyflow/react";
+export type AnlyxFlowNodeData = {
+    kind: "api" | "controller" | "service" | "repository" | "database" | "auth" | "result";
+    label: string;
+    value: string;
+    sub?: string;
+    badge: string;
+    accent: "blue" | "green" | "amber" | "violet" | "gray";
+    fullValue?: string;
+    step?: string;
+    state?: "taken" | "blocked" | "scanned";
+};
+export declare function AnlyxFlowNode({ data }: NodeProps): JSX.Element;

package/dist/overlay/AnlyxFlowNode.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { Box, Code2, Database, Globe2, Layers3, LockKeyhole, ShieldCheck } from "lucide-react";
+import { Badge, Card, Tooltip } from "./ui.js";
+export function AnlyxFlowNode({ data }) {
+    const nodeData = data;
+    const Icon = getIcon(nodeData.kind);
+    const state = nodeData.state ?? "taken";
+    return (_jsxs(Card, { className: `anlyx-flow-rf-node anlyx-flow-rf-node--${nodeData.accent} anlyx-flow-rf-node--${state}`, children: [_jsx(Handle, { className: "anlyx-flow-rf-handle", position: Position.Left, type: "target" }), _jsxs("div", { className: "anlyx-flow-rf-node__top", children: [_jsx("span", { className: "anlyx-flow-rf-node__icon", "aria-hidden": "true", children: _jsx(Icon, { size: 14, strokeWidth: 2.25 }) }), _jsx("span", { className: "anlyx-flow-rf-node__label", children: nodeData.label }), nodeData.step ? _jsx("span", { className: "anlyx-flow-rf-node__step", children: nodeData.step }) : null] }), _jsx(Tooltip, { content: nodeData.fullValue ?? nodeData.value, children: _jsx("p", { className: "anlyx-flow-rf-node__value", children: nodeData.value }) }), nodeData.sub ? _jsx("p", { className: "anlyx-flow-rf-node__sub", children: nodeData.sub }) : null, _jsx(Badge, { tone: nodeData.accent === "violet" ? "violet" : nodeData.accent, children: nodeData.badge }), _jsx(Handle, { className: "anlyx-flow-rf-handle", position: Position.Right, type: "source" })] }));
+}
+function getIcon(kind) {
+    switch (kind) {
+        case "api":
+            return Globe2;
+        case "controller":
+            return Code2;
+        case "service":
+            return Layers3;
+        case "repository":
+            return Box;
+        case "database":
+            return Database;
+        case "auth":
+            return LockKeyhole;
+        case "result":
+            return ShieldCheck;
+    }
+}

package/dist/overlay/FlowDrawer.d.ts

@@ -0,0 +1,2 @@
+import type { FlowDrawerProps } from "./types.js";
+export declare function FlowDrawer({ selectedEvent, events, latestAction, scannedHints, loadError }: FlowDrawerProps): JSX.Element;