footprint-explainable-ui 0.3.2 → 0.5.0

package/dist/components/FlowchartView/SubflowTree.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useState, useCallback, useMemo } from "react";
+import { theme } from "../../theme";
+/** Extracts a flat-ish tree of entries from a SpecNode for display. */
+export function specToTree(node) {
+    const entries = [];
+    const seen = new Set();
+    function walk(n) {
+        const id = n.name || n.id || "";
+        if (seen.has(id))
+            return;
+        seen.add(id);
+        const entry = {
+            name: n.name,
+            description: n.description,
+            subflowId: n.subflowId,
+            isSubflow: !!n.isSubflowRoot,
+        };
+        // If this is a subflow with nested structure, recurse into it
+        if (n.isSubflowRoot && n.subflowStructure) {
+            entry.children = specToTree(n.subflowStructure);
+        }
+        entries.push(entry);
+        // Walk children (fork/decider branches)
+        if (n.children) {
+            for (const child of n.children) {
+                walk(child);
+            }
+        }
+        // Walk linear continuation
+        if (n.next) {
+            walk(n.next);
+        }
+    }
+    walk(node);
+    return entries;
+}
+/** Single tree node row */
+const TreeNode = memo(function TreeNode({ entry, depth, activeStage, doneStages, onNodeSelect, }) {
+    const [expanded, setExpanded] = useState(true);
+    const hasChildren = entry.children && entry.children.length > 0;
+    const isActive = activeStage === entry.name;
+    const isDone = doneStages?.has(entry.name);
+    const handleClick = useCallback(() => {
+        if (hasChildren) {
+            setExpanded((prev) => !prev);
+        }
+        onNodeSelect?.(entry.name, !!entry.isSubflow);
+    }, [hasChildren, onNodeSelect, entry.name, entry.isSubflow]);
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: handleClick, "data-fp": "subflow-tree-node", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    width: "100%",
+                    border: "none",
+                    background: isActive
+                        ? `color-mix(in srgb, ${theme.primary} 15%, transparent)`
+                        : "transparent",
+                    cursor: "pointer",
+                    padding: `4px 8px 4px ${8 + depth * 16}px`,
+                    fontFamily: theme.fontSans,
+                    fontSize: 12,
+                    textAlign: "left",
+                    borderRadius: 4,
+                    transition: "background 0.15s",
+                }, onMouseEnter: (e) => {
+                    if (!isActive) {
+                        e.currentTarget.style.background = `color-mix(in srgb, ${theme.textMuted} 10%, transparent)`;
+                    }
+                }, onMouseLeave: (e) => {
+                    if (!isActive) {
+                        e.currentTarget.style.background = "transparent";
+                    }
+                }, children: [hasChildren ? (_jsx("span", { style: {
+                            fontSize: 10,
+                            color: theme.textMuted,
+                            width: 12,
+                            textAlign: "center",
+                            flexShrink: 0,
+                            transition: "transform 0.15s",
+                            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+                            display: "inline-block",
+                        }, children: "\u25B6" })) : (_jsx("span", { style: { width: 12, flexShrink: 0 } })), _jsx("span", { style: {
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            flexShrink: 0,
+                            background: isActive
+                                ? theme.primary
+                                : isDone
+                                    ? theme.success
+                                    : theme.border,
+                        } }), _jsxs("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [_jsxs("span", { style: {
+                                    color: isActive
+                                        ? theme.primary
+                                        : isDone
+                                            ? theme.textPrimary
+                                            : theme.textSecondary,
+                                    fontWeight: isActive ? 600 : entry.isSubflow ? 500 : 400,
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                }, children: [entry.name, entry.isSubflow && (_jsx("span", { style: { opacity: 0.5, marginLeft: 4, fontSize: 10 }, children: "\u229E" }))] }), entry.description && (_jsx("span", { style: {
+                                    color: theme.textMuted,
+                                    fontSize: 10,
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                }, children: entry.description }))] })] }), hasChildren && expanded && (_jsx("div", { children: entry.children.map((child, i) => (_jsx(TreeNode, { entry: child, depth: depth + 1, activeStage: activeStage, doneStages: doneStages, onNodeSelect: onNodeSelect }, `${child.name}-${i}`))) }))] }));
+});
+/**
+ * Collapsible tree sidebar showing the full subflow manifest.
+ *
+ * Shared navigation layer — humans click through the tree just like
+ * LLMs call getSubflowManifest() / getSubflowSpec().
+ *
+ * All colors come from `--fp-*` CSS variables set by the consumer.
+ */
+export const SubflowTree = memo(function SubflowTree({ spec, activeStage, doneStages, onNodeSelect, unstyled = false, className, style, }) {
+    const tree = useMemo(() => specToTree(spec), [spec]);
+    return (_jsxs("div", { className: className, "data-fp": "subflow-tree", style: {
+            ...(unstyled
+                ? {}
+                : {
+                    fontFamily: theme.fontSans,
+                    fontSize: 12,
+                    background: theme.bgPrimary,
+                    borderRight: `1px solid ${theme.border}`,
+                    overflowY: "auto",
+                    overflowX: "hidden",
+                    padding: "8px 0",
+                }),
+            ...style,
+        }, children: [!unstyled && (_jsx("div", { style: {
+                    padding: "4px 12px 8px",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                    color: theme.textMuted,
+                }, children: "Pipeline" })), tree.map((entry, i) => (_jsx(TreeNode, { entry: entry, depth: 0, activeStage: activeStage, doneStages: doneStages, onNodeSelect: onNodeSelect }, `${entry.name}-${i}`)))] }));
+});
+//# sourceMappingURL=SubflowTree.js.map

package/dist/components/FlowchartView/SubflowTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubflowTree.js","sourceRoot":"","sources":["../../../src/components/FlowchartView/SubflowTree.tsx"],"names":[],"mappings":"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"}

package/dist/components/FlowchartView/TracedFlowchartView.d.ts

@@ -0,0 +1,20 @@
+import type { StageSnapshot, BaseComponentProps } from "../../types";
+import type { SpecNode } from "./specToReactFlow";
+export interface TracedFlowchartViewProps extends BaseComponentProps {
+    /** Pipeline spec from builder.toSpec() */
+    spec: SpecNode;
+    /** Visualization snapshots (enables trace overlay when provided) */
+    snapshots?: StageSnapshot[];
+    /** Current time-travel position */
+    snapshotIndex?: number;
+    /** Callback when a node is clicked (receives snapshot index, or node id if no snapshots) */
+    onNodeClick?: (indexOrId: number | string) => void;
+    /** Callback when subflow navigation changes (true = entered subflow) */
+    onSubflowChange?: (isInSubflow: boolean, subflowNodeName: string | null) => void;
+    /** Show collapsible subflow tree sidebar (default: false) */
+    showTree?: boolean;
+    /** Width of the tree sidebar in pixels (default: 200) */
+    treeWidth?: number;
+}
+export declare function TracedFlowchartView({ spec, snapshots, snapshotIndex, onNodeClick, onSubflowChange, showTree, treeWidth, unstyled, className, style, }: TracedFlowchartViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TracedFlowchartView.d.ts.map

package/dist/components/FlowchartView/TracedFlowchartView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TracedFlowchartView.d.ts","sourceRoot":"","sources":["../../../src/components/FlowchartView/TracedFlowchartView.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGrE,OAAO,KAAK,EAAE,QAAQ,EAAoB,MAAM,mBAAmB,CAAC;AAKpE,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAClE,0CAA0C;IAC1C,IAAI,EAAE,QAAQ,CAAC;IACf,oEAAoE;IACpE,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACnD,wEAAwE;IACxE,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjF,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,aAAiB,EACjB,WAAW,EACX,eAAe,EACf,QAAgB,EAChB,SAAe,EACf,QAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,wBAAwB,2CA+K1B"}

package/dist/components/FlowchartView/TracedFlowchartView.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Self-contained flowchart with execution trace overlay.
+ *
+ * Consumer just passes `spec` and optionally `snapshots` + `snapshotIndex`.
+ * The component internally computes the overlay, handles subflow drill-down,
+ * and renders the correct nodes/edges — no manual overlay construction needed.
+ *
+ * Usage:
+ *   <TracedFlowchartView spec={spec} />                          // static
+ *   <TracedFlowchartView spec={spec} snapshots={snaps} snapshotIndex={idx} />  // traced
+ *   <TracedFlowchartView spec={spec} snapshots={snaps} snapshotIndex={idx} showTree />
+ */
+import { useState, useMemo, useCallback } from "react";
+import { ReactFlow, Background, BackgroundVariant, } from "@xyflow/react";
+import { StageNode } from "../StageNode";
+import { specToReactFlow } from "./specToReactFlow";
+import { useSubflowNavigation } from "./useSubflowNavigation";
+import { SubflowBreadcrumb } from "./SubflowBreadcrumb";
+import { SubflowTree } from "./SubflowTree";
+const nodeTypes = { stage: StageNode };
+export function TracedFlowchartView({ spec, snapshots, snapshotIndex = 0, onNodeClick, onSubflowChange, showTree = false, treeWidth = 200, unstyled = false, className, style, }) {
+    const [treeVisible, setTreeVisible] = useState(showTree);
+    // Subflow navigation — no overlay passed (computed synchronously below)
+    const subflowNav = useSubflowNavigation(spec);
+    // Get the current level's spec from breadcrumbs
+    const currentSpec = subflowNav.breadcrumbs.length > 0
+        ? subflowNav.breadcrumbs[subflowNav.breadcrumbs.length - 1].spec
+        : null;
+    // Compute execution overlay from snapshots + index
+    const overlay = useMemo(() => {
+        if (!snapshots || snapshots.length === 0)
+            return undefined;
+        const executionOrder = snapshots
+            .slice(0, snapshotIndex + 1)
+            .map((s) => s.stageLabel);
+        const doneStages = new Set(snapshots.slice(0, snapshotIndex).map((s) => s.stageLabel));
+        const activeStage = snapshots[snapshotIndex]?.stageLabel ?? null;
+        const executedStages = new Set([...doneStages]);
+        if (activeStage)
+            executedStages.add(activeStage);
+        return { doneStages, activeStage, executedStages, executionOrder };
+    }, [snapshots, snapshotIndex]);
+    // Derive nodes/edges with overlay applied
+    const { nodes, edges } = useMemo(() => {
+        if (!currentSpec)
+            return { nodes: [], edges: [] };
+        return specToReactFlow(currentSpec, overlay);
+    }, [currentSpec, overlay]);
+    // Handle node clicks — drill into subflow or notify consumer
+    const handleNodeClick = useCallback((_, node) => {
+        // Try subflow drill-down first
+        if (subflowNav.handleNodeClick(node.id)) {
+            onSubflowChange?.(true, node.id);
+            return;
+        }
+        // Otherwise notify consumer
+        if (onNodeClick && snapshots) {
+            const idx = snapshots.findIndex((s) => s.stageLabel === node.id);
+            if (idx >= 0)
+                onNodeClick(idx);
+        }
+        else if (onNodeClick) {
+            onNodeClick(node.id);
+        }
+    }, [subflowNav, onNodeClick, onSubflowChange, snapshots]);
+    // Navigate breadcrumb
+    const handleBreadcrumbNavigate = useCallback((level) => {
+        subflowNav.navigateTo(level);
+        onSubflowChange?.(level > 0, null);
+    }, [subflowNav, onSubflowChange]);
+    // Tree node click — drill into subflow or jump to snapshot
+    const handleTreeNodeSelect = useCallback((name, isSubflow) => {
+        if (isSubflow) {
+            if (subflowNav.handleNodeClick(name)) {
+                onSubflowChange?.(true, name);
+            }
+        }
+        else if (onNodeClick && snapshots) {
+            const idx = snapshots.findIndex((s) => s.stageLabel === name);
+            if (idx >= 0)
+                onNodeClick(idx);
+        }
+    }, [subflowNav, onNodeClick, onSubflowChange, snapshots]);
+    return (_jsxs("div", { className: className, style: { width: "100%", height: "100%", display: "flex", flexDirection: "row", ...style }, "data-fp": "traced-flowchart", children: [showTree && treeVisible && (_jsx(SubflowTree, { spec: spec, activeStage: overlay?.activeStage, doneStages: overlay?.doneStages, onNodeSelect: handleTreeNodeSelect, unstyled: unstyled, style: { width: treeWidth, flexShrink: 0, height: "100%" } })), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, height: "100%" }, children: [(subflowNav.isInSubflow || (showTree && !treeVisible)) && (_jsxs("div", { style: { display: "flex", alignItems: "stretch", flexShrink: 0 }, children: [showTree && !treeVisible && (_jsx("button", { onClick: () => setTreeVisible(true), "data-fp": "tree-toggle", style: unstyled ? {} : {
+                                    background: "transparent",
+                                    border: "none",
+                                    cursor: "pointer",
+                                    padding: "6px 8px",
+                                    fontSize: 10,
+                                    flexShrink: 0,
+                                }, children: "\u25B6" })), _jsx("div", { style: { flex: 1 }, children: _jsx(SubflowBreadcrumb, { breadcrumbs: subflowNav.breadcrumbs, onNavigate: handleBreadcrumbNavigate }) })] })), showTree && treeVisible && (_jsxs("div", { style: { display: "flex", alignItems: "stretch", flexShrink: 0 }, children: [_jsx("button", { onClick: () => setTreeVisible(false), "data-fp": "tree-toggle", style: unstyled ? {} : {
+                                    background: "transparent",
+                                    border: "none",
+                                    cursor: "pointer",
+                                    padding: "6px 8px",
+                                    fontSize: 10,
+                                    flexShrink: 0,
+                                }, children: "\u25C0" }), _jsx("div", { style: { flex: 1 }, children: subflowNav.isInSubflow && (_jsx(SubflowBreadcrumb, { breadcrumbs: subflowNav.breadcrumbs, onNavigate: handleBreadcrumbNavigate })) })] })), _jsx("div", { style: { flex: 1, minHeight: 0 }, children: _jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeClick: handleNodeClick, nodeTypes: nodeTypes, fitView: true, panOnDrag: false, zoomOnScroll: false, zoomOnPinch: false, zoomOnDoubleClick: false, preventScrolling: false, nodesDraggable: false, nodesConnectable: false, elementsSelectable: !!onNodeClick, children: !unstyled && (_jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 })) }) })] })] }));
+}
+//# sourceMappingURL=TracedFlowchartView.js.map

package/dist/components/FlowchartView/TracedFlowchartView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TracedFlowchartView.js","sourceRoot":"","sources":["../../../src/components/FlowchartView/TracedFlowchartView.tsx"],"names":[],"mappings":"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"}

package/dist/components/FlowchartView/index.d.ts

@@ -0,0 +1,11 @@
+export { FlowchartView } from "./FlowchartView";
+export type { FlowchartViewProps } from "./FlowchartView";
+export { TracedFlowchartView } from "./TracedFlowchartView";
+export type { TracedFlowchartViewProps } from "./TracedFlowchartView";
+export { SubflowBreadcrumb } from "./SubflowBreadcrumb";
+export type { SubflowBreadcrumbProps } from "./SubflowBreadcrumb";
+export { useSubflowNavigation } from "./useSubflowNavigation";
+export type { SubflowNavigation, BreadcrumbEntry } from "./useSubflowNavigation";
+export { SubflowTree } from "./SubflowTree";
+export type { SubflowTreeProps, SubflowTreeEntry } from "./SubflowTree";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FlowchartView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FlowchartView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEjF,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/FlowchartView/index.js

@@ -0,0 +1,6 @@
+export { FlowchartView } from "./FlowchartView";
+export { TracedFlowchartView } from "./TracedFlowchartView";
+export { SubflowBreadcrumb } from "./SubflowBreadcrumb";
+export { useSubflowNavigation } from "./useSubflowNavigation";
+export { SubflowTree } from "./SubflowTree";
+//# sourceMappingURL=index.js.map

package/dist/components/FlowchartView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FlowchartView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/FlowchartView/specToReactFlow.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Converts a SerializedPipelineStructure (from builder.toSpec()) into
+ * ReactFlow nodes and edges with auto-layout.
+ *
+ * Supports two modes:
+ * 1. Build-time only (no executionState) — all nodes gray
+ * 2. With execution overlay — executed nodes colored, active node highlighted,
+ *    unvisited nodes stay gray
+ */
+import type { Node, Edge } from "@xyflow/react";
+export interface SpecNode {
+    name: string;
+    id?: string;
+    type?: "stage" | "decider" | "fork" | "streaming";
+    description?: string;
+    children?: SpecNode[];
+    next?: SpecNode;
+    branchIds?: string[];
+    hasDecider?: boolean;
+    hasSelector?: boolean;
+    loopTarget?: string;
+    isSubflowRoot?: boolean;
+    subflowId?: string;
+    subflowName?: string;
+    subflowStructure?: SpecNode;
+}
+export interface ExecutionOverlay {
+    /** Names of stages that have completed (before the active one) */
+    doneStages: Set<string>;
+    /** Name of the currently active stage */
+    activeStage: string | null;
+    /** Names of all stages that were executed (done + active) */
+    executedStages: Set<string>;
+    /** Ordered list of executed stage names (for step numbering) */
+    executionOrder?: string[];
+}
+/** Colors for the flowchart — consumer provides these to match their theme */
+export interface FlowchartColors {
+    edgeDefault: string;
+    edgeExecuted: string;
+    edgeActive: string;
+    edgeLoop: string;
+    labelDefault: string;
+    labelExecuted: string;
+    labelLoop: string;
+    pathGlow: string;
+}
+/**
+ * Convert a pipeline spec to ReactFlow graph.
+ * Pass `overlay` to color nodes/edges by execution state.
+ */
+export declare function specToReactFlow(spec: SpecNode, overlay?: ExecutionOverlay, colors?: Partial<FlowchartColors>): {
+    nodes: Node[];
+    edges: Edge[];
+};
+//# sourceMappingURL=specToReactFlow.d.ts.map

package/dist/components/FlowchartView/specToReactFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"specToReactFlow.d.ts","sourceRoot":"","sources":["../../../src/components/FlowchartView/specToReactFlow.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACxB,yCAAyC;IACzC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,6DAA6D;IAC7D,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAgOD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,OAAO,CAAC,EAAE,gBAAgB,EAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAChC;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAaA"}

package/dist/components/FlowchartView/specToReactFlow.js

@@ -0,0 +1,202 @@
+import { defaultTokens } from "../../theme/tokens";
+/** Default colors derived from theme tokens. Consumer can override per-call. */
+const DEFAULT_COLORS = {
+    edgeDefault: defaultTokens.colors.textMuted,
+    edgeExecuted: defaultTokens.colors.success,
+    edgeActive: defaultTokens.colors.primary,
+    edgeLoop: defaultTokens.colors.warning,
+    labelDefault: defaultTokens.colors.textSecondary,
+    labelExecuted: defaultTokens.colors.success,
+    labelLoop: defaultTokens.colors.warning,
+    pathGlow: `${defaultTokens.colors.success}4D`, // ~30% opacity hex
+};
+const Y_STEP = 100;
+const X_SPREAD = 200;
+function nid(n) {
+    return n.name || n.id || `spec-${Math.random()}`;
+}
+function addEdge(state, source, target, label, isLoop) {
+    state.edgeCounter++;
+    const o = state.overlay;
+    const c = state.colors;
+    const executed = o && o.executedStages.has(source) && o.executedStages.has(target);
+    const isLeadingEdge = o && source === o.activeStage && !o.doneStages.has(target);
+    // Loop edges — route via right-side handles so they don't overlap center edges
+    // Only mark as executed when the loop has actually fired:
+    // the target must appear AFTER the source in executionOrder
+    if (isLoop) {
+        let loopExecuted = false;
+        if (o?.executionOrder) {
+            const lastSourceIdx = o.executionOrder.lastIndexOf(source);
+            if (lastSourceIdx >= 0) {
+                loopExecuted = o.executionOrder.slice(lastSourceIdx + 1).includes(target);
+            }
+        }
+        state.edges.push({
+            id: `se${state.edgeCounter}`,
+            source,
+            target,
+            sourceHandle: "loop-source",
+            targetHandle: "loop-target",
+            label: label ?? "loop",
+            type: "smoothstep",
+            pathOptions: { offset: 40, borderRadius: 16 },
+            style: {
+                stroke: c.edgeLoop,
+                strokeWidth: loopExecuted ? 3 : 2,
+                strokeDasharray: "6 3",
+                opacity: o && !loopExecuted ? 0.35 : 1,
+            },
+            labelStyle: { fontSize: 10, fontWeight: 700, fill: c.labelLoop },
+            animated: loopExecuted,
+            zIndex: 2,
+        });
+        return;
+    }
+    if (executed) {
+        // "Google Maps route" — thick glowing path for executed edges
+        // Background glow layer (subtle, behind the route line)
+        state.edges.push({
+            id: `se${state.edgeCounter}-glow`,
+            source,
+            target,
+            style: {
+                stroke: c.pathGlow,
+                strokeWidth: 8,
+                opacity: 0.4,
+            },
+            zIndex: 0,
+            selectable: false,
+            focusable: false,
+        });
+        // Foreground path (solid route line)
+        state.edges.push({
+            id: `se${state.edgeCounter}`,
+            source,
+            target,
+            label,
+            style: {
+                stroke: isLeadingEdge ? c.edgeActive : c.edgeExecuted,
+                strokeWidth: 3.5,
+            },
+            labelStyle: { fontSize: 10, fontWeight: 600, fill: c.labelExecuted },
+            animated: !!isLeadingEdge,
+            zIndex: 1,
+        });
+    }
+    else {
+        // Non-executed — thin, faded base map edge
+        state.edges.push({
+            id: `se${state.edgeCounter}`,
+            source,
+            target,
+            label,
+            style: {
+                stroke: c.edgeDefault,
+                strokeWidth: 1.5,
+                opacity: o ? 0.3 : 1,
+            },
+            labelStyle: { fontSize: 10, fill: c.labelDefault },
+        });
+    }
+}
+function walk(node, state, x, y) {
+    const id = nid(node);
+    if (state.seen.has(id)) {
+        return { lastIds: [id], bottomY: y };
+    }
+    state.seen.add(id);
+    const isDecider = node.type === "decider" || node.hasDecider;
+    const isFork = node.type === "fork";
+    const o = state.overlay;
+    const isDone = o ? o.doneStages.has(id) : false;
+    const isActive = o ? o.activeStage === id : false;
+    const wasExecuted = o ? o.executedStages.has(id) : false;
+    // When overlay is present, dim unvisited nodes
+    const dimmed = o && !wasExecuted;
+    // Step numbers for executed nodes (1-based) — multiple when revisited via loops
+    let stepNumbers;
+    if (o?.executionOrder) {
+        const nums = [];
+        for (let i = 0; i < o.executionOrder.length; i++) {
+            if (o.executionOrder[i] === id)
+                nums.push(i + 1);
+        }
+        if (nums.length > 0)
+            stepNumbers = nums;
+    }
+    state.nodes.push({
+        id,
+        position: { x, y },
+        data: {
+            label: node.name,
+            active: isActive,
+            done: isDone,
+            error: false,
+            isDecider,
+            isFork,
+            description: node.description,
+            subflowId: node.subflowId,
+            dimmed,
+            stepNumbers,
+            isSubflow: !!node.isSubflowRoot,
+        },
+        type: "stage",
+        style: dimmed ? { opacity: 0.35 } : undefined,
+    });
+    let lastIds = [id];
+    let bottomY = y;
+    // Handle children (fork/decider branches)
+    if (node.children && node.children.length > 0) {
+        const totalWidth = (node.children.length - 1) * X_SPREAD;
+        const startX = x - totalWidth / 2;
+        const childY = y + Y_STEP;
+        const childResults = [];
+        for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i];
+            const childX = startX + i * X_SPREAD;
+            const edgeLabel = node.branchIds?.[i];
+            addEdge(state, id, nid(child), edgeLabel);
+            const result = walk(child, state, childX, childY);
+            childResults.push(result);
+        }
+        lastIds = childResults.flatMap((r) => r.lastIds);
+        bottomY = Math.max(...childResults.map((r) => r.bottomY));
+    }
+    // Handle loop-back edge — visually distinct dashed orange arrow
+    // Must be added before processing `next`, since `next` returns early
+    if (node.loopTarget) {
+        addEdge(state, id, node.loopTarget, "loop", true);
+    }
+    // Handle linear continuation
+    if (node.next) {
+        const nextY = bottomY + Y_STEP;
+        const nextId = nid(node.next);
+        for (const lid of lastIds) {
+            // Skip forward edge when a loop edge already connects to the same target
+            if (node.loopTarget && lid === id && node.loopTarget === nextId)
+                continue;
+            addEdge(state, lid, nextId);
+        }
+        const result = walk(node.next, state, x, nextY);
+        return result;
+    }
+    return { lastIds, bottomY };
+}
+/**
+ * Convert a pipeline spec to ReactFlow graph.
+ * Pass `overlay` to color nodes/edges by execution state.
+ */
+export function specToReactFlow(spec, overlay, colors) {
+    const state = {
+        nodes: [],
+        edges: [],
+        edgeCounter: 0,
+        seen: new Set(),
+        overlay: overlay ?? null,
+        colors: { ...DEFAULT_COLORS, ...colors },
+    };
+    walk(spec, state, 300, 0);
+    return { nodes: state.nodes, edges: state.edges };
+}
+//# sourceMappingURL=specToReactFlow.js.map

package/dist/components/FlowchartView/specToReactFlow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"specToReactFlow.js","sourceRoot":"","sources":["../../../src/components/FlowchartView/specToReactFlow.ts"],"names":[],"mappings":"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"}

package/dist/components/FlowchartView/useSubflowNavigation.d.ts

@@ -0,0 +1,35 @@
+import type { SpecNode, ExecutionOverlay, FlowchartColors } from "./specToReactFlow";
+import type { Node, Edge } from "@xyflow/react";
+export interface BreadcrumbEntry {
+    /** Display name for this level */
+    label: string;
+    /** The spec node tree at this level */
+    spec: SpecNode;
+    /** Human-readable description of this subflow */
+    description?: string;
+}
+export interface SubflowNavigation {
+    /** Current breadcrumb path (root → ... → current) */
+    breadcrumbs: BreadcrumbEntry[];
+    /** Current level's ReactFlow nodes */
+    nodes: Node[];
+    /** Current level's ReactFlow edges */
+    edges: Edge[];
+    /** Call when a node is clicked — drills in if it's a subflow */
+    handleNodeClick: (nodeId: string) => boolean;
+    /** Navigate to a specific breadcrumb level (0 = root) */
+    navigateTo: (level: number) => void;
+    /** Whether we're currently inside a subflow (not at root) */
+    isInSubflow: boolean;
+    /** Name of the subflow node we drilled into (for finding execution data) */
+    currentSubflowNodeName: string | null;
+}
+/**
+ * Hook that manages subflow drill-down navigation for a flowchart spec.
+ *
+ * Maintains a breadcrumb stack. When a subflow node is clicked, pushes its
+ * nested spec onto the stack and re-derives nodes/edges. Breadcrumb clicks
+ * pop back to that level.
+ */
+export declare function useSubflowNavigation(rootSpec: SpecNode | null, overlay?: ExecutionOverlay, colors?: Partial<FlowchartColors>): SubflowNavigation;
+//# sourceMappingURL=useSubflowNavigation.d.ts.map

package/dist/components/FlowchartView/useSubflowNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubflowNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/FlowchartView/useSubflowNavigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,IAAI,EAAE,QAAQ,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,sCAAsC;IACtC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,gEAAgE;IAChE,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,yDAAyD;IACzD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,6DAA6D;IAC7D,WAAW,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;CACvC;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,QAAQ,GAAG,IAAI,EACzB,OAAO,CAAC,EAAE,gBAAgB,EAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAChC,iBAAiB,CA8EnB"}