@anlyx/ui 0.1.1 → 0.1.3

package/dist/flow/build-react-flow-model.d.ts

@@ -1,5 +1,6 @@
 import type { ConfidenceLevel, EndpointFlow, FlowEdge, FlowNode } from "@anlyx/core";
 import type { Edge, Node } from "@xyflow/react";
+import { type FlowLayoutVariant } from "./layout/elk-layout.js";
 export type AnlyxFlowRole = "main" | "sub" | "secondary";
 export type AnlyxFlowNodeData = {
     node: FlowNode;
@@ -16,6 +17,7 @@ export type AnlyxFlowEdgeData = {
     flowRole: AnlyxFlowRole;
     confidence?: ConfidenceLevel;
     isReplayActive?: boolean;
+    replayPhase?: "request" | "response" | "idle" | "complete";
 };
 export type AnlyxReactFlowNode = Node<AnlyxFlowNodeData, "anlyxNode">;
 export type AnlyxReactFlowEdge = Edge<AnlyxFlowEdgeData>;
@@ -23,5 +25,7 @@ export type ReactFlowModel = {
     nodes: AnlyxReactFlowNode[];
     edges: AnlyxReactFlowEdge[];
 };
-export declare function buildReactFlowModel(flow: EndpointFlow): ReactFlowModel;
-//# sourceMappingURL=build-react-flow-model.d.ts.map
+export type BuildReactFlowModelOptions = {
+    variant?: FlowLayoutVariant;
+};
+export declare function buildReactFlowModel(flow: EndpointFlow, options?: BuildReactFlowModelOptions): ReactFlowModel;

package/dist/flow/build-react-flow-model.js

@@ -1,41 +1,39 @@
-const MAIN_X_SPACING = 220;
-const SECONDARY_Y_OFFSET = 120;
-const SUB_X_SPACING = 180;
-const SUB_Y_OFFSET = 180;
-export function buildReactFlowModel(flow) {
+import { layoutWithFallback } from "./layout/elk-layout.js";
+export function buildReactFlowModel(flow, options = {}) {
+    const variant = options.variant ?? "structure";
     const mainPathSet = new Set(flow.mainPath);
     const nodesById = new Map(flow.nodes.map((node) => [node.id, node]));
     const positionedNodes = new Map();
     flow.mainPath.forEach((nodeId, index) => {
         const node = nodesById.get(nodeId);
         if (node) {
-            positionedNodes.set(node.id, createNode(node, "main", { x: index * MAIN_X_SPACING, y: 0 }));
+            positionedNodes.set(node.id, createNode(node, "main", { x: index * 220, y: 0 }));
         }
     });
     flow.nodes
         .filter((node) => !mainPathSet.has(node.id))
         .forEach((node, index) => {
-        positionedNodes.set(node.id, createNode(node, "secondary", { x: index * MAIN_X_SPACING, y: SECONDARY_Y_OFFSET }));
+        positionedNodes.set(node.id, createNode(node, "secondary", { x: index * 220, y: 120 }));
     });
     flow.subFlows.forEach((subFlow, subFlowIndex) => {
         const parentPosition = positionedNodes.get(subFlow.parentNodeId)?.position ?? {
-            x: subFlowIndex * MAIN_X_SPACING,
+            x: subFlowIndex * 220,
             y: 0
         };
         subFlow.nodes.forEach((node, index) => {
             positionedNodes.set(node.id, createNode(node, "sub", {
-                x: parentPosition.x + index * SUB_X_SPACING,
-                y: parentPosition.y + SUB_Y_OFFSET + subFlowIndex * 36
+                x: parentPosition.x + index * 180,
+                y: parentPosition.y + 180 + subFlowIndex * 36
             }, subFlow.id));
         });
     });
-    return {
+    return layoutWithFallback({
         nodes: [...positionedNodes.values()],
         edges: [
-            ...flow.edges.map((edge) => createEdge(edge, getEdgeRole(edge, mainPathSet))),
-            ...flow.subFlows.flatMap((subFlow) => subFlow.edges.map((edge) => createEdge(edge, "sub")))
+            ...flow.edges.map((edge, index) => createEdge(edge, getEdgeRole(edge, mainPathSet), index)),
+            ...flow.subFlows.flatMap((subFlow, subFlowIndex) => subFlow.edges.map((edge, edgeIndex) => createEdge(edge, "sub", `${subFlowIndex}:${edgeIndex}`)))
         ]
-    };
+    }, flow.mainPath, { variant });
 }
 function createNode(node, flowRole, position, subFlowId) {
     return {
@@ -52,12 +50,12 @@ function createNode(node, flowRole, position, subFlowId) {
         }
     };
 }
-function createEdge(edge, flowRole) {
+function createEdge(edge, flowRole, stableSuffix) {
     return {
-        id: edge.id,
+        id: `${edge.id}:${stableSuffix}`,
         source: edge.from,
         target: edge.to,
-        type: "smoothstep",
+        type: "anlyxEdge",
         animated: false,
         className: `anlyx-flow-edge anlyx-flow-edge--${flowRole}`,
         data: {
@@ -76,4 +74,3 @@ function getEdgeRole(edge, mainPathSet) {
     }
     return "secondary";
 }
-//# sourceMappingURL=build-react-flow-model.js.map

package/dist/flow/layout/elk-layout.d.ts

@@ -0,0 +1,7 @@
+import type { ReactFlowModel } from "../build-react-flow-model.js";
+export type FlowLayoutVariant = "structure" | "process";
+export type LayoutOptions = {
+    variant: FlowLayoutVariant;
+};
+export declare function layoutWithElk(model: ReactFlowModel, options: LayoutOptions): Promise<ReactFlowModel>;
+export declare function layoutWithFallback(model: ReactFlowModel, mainPath: string[], options: LayoutOptions): ReactFlowModel;

package/dist/flow/layout/elk-layout.js

@@ -0,0 +1,74 @@
+import ELKConstructor from "elkjs/lib/elk.bundled.js";
+const Elk = ELKConstructor;
+const elk = new Elk();
+const NODE_WIDTH = 196;
+const NODE_HEIGHT = 92;
+const STRUCTURE_MAIN_Y = 0;
+const STRUCTURE_SECONDARY_Y = 145;
+const PROCESS_REQUEST_Y = 0;
+const PROCESS_BRANCH_Y = 145;
+const MAIN_X_SPACING = 232;
+const BRANCH_X_SPACING = 190;
+export async function layoutWithElk(model, options) {
+    if (model.nodes.length === 0) {
+        return model;
+    }
+    const graph = {
+        id: "anlyx-flow",
+        layoutOptions: {
+            "elk.algorithm": "layered",
+            "elk.direction": "RIGHT",
+            "elk.layered.spacing.nodeNodeBetweenLayers": options.variant === "process" ? "72" : "84",
+            "elk.spacing.nodeNode": options.variant === "process" ? "44" : "52",
+            "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+            "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP"
+        },
+        children: model.nodes.map((node) => ({
+            id: node.id,
+            width: NODE_WIDTH,
+            height: NODE_HEIGHT
+        })),
+        edges: model.edges.map((edge) => ({
+            id: edge.id,
+            sources: [edge.source],
+            targets: [edge.target]
+        }))
+    };
+    const layoutedGraph = await elk.layout(graph);
+    const positions = new Map(layoutedGraph.children?.map((node) => [node.id, { x: node.x ?? 0, y: node.y ?? 0 }]) ?? []);
+    return {
+        nodes: model.nodes.map((node) => ({
+            ...node,
+            position: positions.get(node.id) ?? node.position
+        })),
+        edges: model.edges
+    };
+}
+export function layoutWithFallback(model, mainPath, options) {
+    const mainPathIndex = new Map(mainPath.map((nodeId, index) => [nodeId, index]));
+    let secondaryIndex = 0;
+    return {
+        nodes: model.nodes.map((node) => {
+            const pathIndex = mainPathIndex.get(node.id);
+            if (pathIndex !== undefined) {
+                return {
+                    ...node,
+                    position: {
+                        x: pathIndex * MAIN_X_SPACING,
+                        y: options.variant === "process" ? PROCESS_REQUEST_Y : STRUCTURE_MAIN_Y
+                    }
+                };
+            }
+            const nextSecondaryIndex = secondaryIndex++;
+            return {
+                ...node,
+                position: {
+                    x: Math.max(1, Math.floor(nextSecondaryIndex / 2) + 1) * BRANCH_X_SPACING,
+                    y: (options.variant === "process" ? PROCESS_BRANCH_Y : STRUCTURE_SECONDARY_Y) +
+                        (nextSecondaryIndex % 2) * 116
+                }
+            };
+        }),
+        edges: model.edges
+    };
+}

package/dist/index.d.ts

@@ -26,4 +26,3 @@ export { buildReactFlowModel } from "./flow/build-react-flow-model.js";
 export { mockScanResult } from "./mock-data.js";
 export { buildReplaySteps } from "./replay/build-replay-steps.js";
 export { useReplayLite } from "./replay/use-replay-lite.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -19,4 +19,3 @@ export { buildReactFlowModel } from "./flow/build-react-flow-model.js";
 export { mockScanResult } from "./mock-data.js";
 export { buildReplaySteps } from "./replay/build-replay-steps.js";
 export { useReplayLite } from "./replay/use-replay-lite.js";
-//# sourceMappingURL=index.js.map

package/dist/mock-data.d.ts

@@ -1,3 +1,2 @@
 import { type ScanResult } from "@anlyx/core";
 export declare const mockScanResult: ScanResult;
-//# sourceMappingURL=mock-data.d.ts.map

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"
                     }
@@ -219,4 +265,3 @@ export const mockScanResult = scanResultSchema.parse({
         }
     ]
 });
-//# sourceMappingURL=mock-data.js.map

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;

package/dist/overlay/FlowDrawer.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Card } from "./ui.js";
+import { MainFlowCanvas } from "./MainFlowCanvas.js";
+import { RecentApiEventsTable } from "./RecentApiEventsTable.js";
+export function FlowDrawer({ selectedEvent, events, latestAction, scannedHints = [], loadError }) {
+    if (loadError) {
+        return (_jsx("div", { className: "anlyx-flow-drawer-body", children: _jsxs(Card, { children: [_jsx("h3", { className: "anlyx-ov-section-title", children: "Report data" }), _jsx("div", { className: "anlyx-ov-empty", children: loadError })] }) }));
+    }
+    if (!selectedEvent) {
+        return (_jsxs("div", { className: "anlyx-flow-drawer-body", children: [latestAction ? _jsx(NoPrimaryRequest, { latestAction: latestAction }) : _jsx(WaitingForAction, {}), scannedHints.length > 0 ? _jsx(ScannedHints, { hints: scannedHints }) : null, _jsx(RecentApiEventsTable, { events: events, selectedEventId: null })] }));
+    }
+    return (_jsxs("div", { className: "anlyx-flow-drawer-body", children: [_jsx(CapturedRequest, { event: selectedEvent }), selectedEvent.matchedEndpoint ? (_jsx(MainFlowCanvas, { flow: selectedEvent.matchedFlow, method: selectedEvent.method, path: selectedEvent.path, status: selectedEvent.status, ...(selectedEvent.matchedEndpoint.confidence
+                    ? { endpointConfidence: selectedEvent.matchedEndpoint.confidence }
+                    : {}) })) : (_jsxs(Card, { className: "anlyx-unmatched-card", children: [_jsx("h3", { children: "No scanned endpoint matched" }), _jsx("p", { children: "Anlyx saw this browser request, but no scanned endpoint path matched it." })] })), _jsx(RecentApiEventsTable, { events: events, selectedEventId: selectedEvent.id })] }));
+}
+function ScannedHints({ hints }) {
+    return (_jsxs(Card, { className: "anlyx-scanned-hints", children: [_jsxs("div", { className: "anlyx-scanned-hints__head", children: [_jsxs("div", { children: [_jsx("h3", { children: "Scanned / inferred hints" }), _jsx("p", { children: "These are known page links, not browser-live requests." })] }), _jsx(Badge, { tone: "gray", children: "Not browser-live" })] }), _jsx("div", { className: "anlyx-scanned-hints__list", children: hints.slice(0, 4).map((hint, index) => (_jsxs("div", { className: "anlyx-scanned-hint", children: [_jsxs("div", { children: [_jsx(Badge, { tone: hint.evidence === "capture" ? "green" : "violet", children: hint.evidence === "capture" ? "captured page link" : "scanned page link" }), _jsx("strong", { title: hint.endpointLabel ?? `${hint.method} ${hint.path}`, children: hint.endpointLabel ?? `${hint.method} ${hint.path}` })] }), _jsx("p", { title: hint.pageFilePath ?? hint.pageRoute, children: hint.pageRoute })] }, `${hint.pageRoute}:${hint.method}:${hint.path}:${index}`))) })] }));
+}
+function WaitingForAction() {
+    return (_jsxs(Card, { children: [_jsx("h3", { className: "anlyx-ov-section-title", children: "Waiting" }), _jsx("div", { className: "anlyx-ov-empty", children: "Use the app normally. Anlyx opens the main flow for requests caused by your direct action. Background requests stay in Recent API events until you select them." })] }));
+}
+function NoPrimaryRequest({ latestAction }) {
+    return (_jsxs(Card, { className: "anlyx-no-primary-card", children: [_jsxs("div", { children: [_jsx(Badge, { tone: "amber", children: "No action API yet" }), _jsx("h3", { children: formatAction(latestAction) }), _jsx("p", { children: latestAction.selector ?? "No stable selector captured" })] }), _jsx("div", { className: "anlyx-no-primary-card__note", children: "Only background session checks were detected. They are hidden from the main flow." })] }));
+}
+function CapturedRequest({ event }) {
+    const matched = Boolean(event.matchedEndpoint);
+    return (_jsxs(Card, { className: "anlyx-captured-request", children: [_jsxs("div", { className: "anlyx-captured-request__top", children: [_jsxs("div", { children: [_jsx("h3", { children: "Captured request" }), _jsxs("div", { className: "anlyx-captured-request__path", children: [_jsx(Badge, { tone: "blue", children: event.method }), _jsx("strong", { children: event.path })] })] }), _jsx(Badge, { tone: matched ? "green" : "amber", children: matched ? "matched" : "unmatched" })] }), _jsxs("div", { className: "anlyx-captured-request__summary", children: [_jsxs("span", { children: [_jsx("b", { children: event.matchedEndpoint ? "endpoint" : "browser" }), " ", event.matchedEndpoint
+                                ? `${event.matchedEndpoint.method} ${event.matchedEndpoint.path}`
+                                : event.path] }), _jsx("span", { children: _jsx("b", { children: getStatusLabel(event.status) }) }), _jsxs("span", { children: [event.durationMs, "ms", event.count && event.count > 1 ? ` · seen x${event.count}` : ""] }), event.matchedEndpoint?.confidence ? (_jsxs("span", { children: ["confidence ", event.matchedEndpoint.confidence] })) : null, _jsx("span", { children: event.triggeredBy
+                            ? "user action"
+                            : event.source === "health"
+                                ? "health/background"
+                                : "background" })] }), _jsxs("div", { className: "anlyx-captured-request__steps", children: [_jsx(CapturedStep, { label: "Action", title: event.triggeredBy ? formatAction(event.triggeredBy) : "No user action captured", detail: event.triggeredBy?.selector ?? "Request may have fired on page load", tone: event.triggeredBy ? "blue" : "amber" }), _jsx(CapturedStep, { label: "Request", title: `${event.method} ${event.path}`, detail: matched ? "Matched scanned endpoint" : "No scanned endpoint matched", tone: matched ? "green" : "amber" }), _jsx(CapturedStep, { label: "Result", title: getStatusLabel(event.status), detail: `${event.durationMs}ms${event.count && event.count > 1 ? ` · seen x${event.count}` : ""}`, tone: Number(event.status) >= 400 ? "amber" : "green" })] })] }));
+}
+function CapturedStep({ label, title, detail, tone }) {
+    return (_jsxs("div", { className: `anlyx-captured-step anlyx-captured-step--${tone}`, children: [_jsx("span", { className: "anlyx-captured-step__dot" }), _jsxs("div", { children: [_jsx("p", { children: label }), _jsx("strong", { children: title }), _jsx("span", { children: detail })] })] }));
+}
+function formatAction(action) {
+    return `${action.type ?? "Action"} ${action.label ?? "unnamed element"}`;
+}
+function getStatusLabel(status) {
+    const numeric = Number(status);
+    if (numeric === 401) {
+        return "login required · 401";
+    }
+    if (numeric === 403) {
+        return "permission denied · 403";
+    }
+    if (numeric >= 500) {
+        return `server error · ${status}`;
+    }
+    if (numeric >= 400) {
+        return `client error · ${status}`;
+    }
+    if (numeric >= 200) {
+        return `success · ${status}`;
+    }
+    return `status ${status}`;
+}

package/dist/overlay/MainFlowCanvas.d.ts

@@ -0,0 +1,20 @@
+import type { EndpointFlow } from "@anlyx/core";
+import { type Edge, type Node } from "@xyflow/react";
+import { type AnlyxFlowNodeData } from "./AnlyxFlowNode.js";
+export type MainFlowCanvasProps = {
+    flow: EndpointFlow | null | undefined;
+    method: string;
+    path: string;
+    status: string | number;
+    endpointConfidence?: string;
+};
+export declare function MainFlowCanvas({ flow, method, path, status, endpointConfidence }: MainFlowCanvasProps): JSX.Element;
+export declare function buildDrawerFlowModel({ flow, method, path, status }: {
+    flow: EndpointFlow | null | undefined;
+    method: string;
+    path: string;
+    status: string | number;
+}): {
+    nodes: Node<AnlyxFlowNodeData>[];
+    edges: Edge[];
+};