footprint-explainable-ui 0.3.2 → 0.5.0

package/README.md

@@ -137,9 +137,34 @@ function PipelineChart({ spec }) {
 }
 ```
 
-### With execution overlay (time-travel)
+### Self-contained traced flowchart (recommended)
 
-The overlay highlights which stages have executed, which is active, and the execution path — like a Google Maps route overlay.
+`TracedFlowchartView` handles everything — overlay computation, subflow drill-down, breadcrumbs. Just pass `spec` + `snapshots`:
+
+```tsx
+import { TracedFlowchartView } from "footprint-explainable-ui/flowchart";
+
+function MyDebugger({ spec, snapshots }) {
+  const [idx, setIdx] = useState(0);
+
+  return (
+    <div style={{ height: 400 }}>
+      <TracedFlowchartView
+        spec={spec}
+        snapshots={snapshots}
+        snapshotIndex={idx}
+        onNodeClick={(i) => setIdx(i as number)}
+      />
+    </div>
+  );
+}
+```
+
+Without `snapshots`, it renders a plain static flowchart. With `snapshots`, it shows the execution trace path.
+
+### With execution overlay (manual control)
+
+For full control, use `specToReactFlow` directly. The overlay highlights which stages have executed, which is active, and the execution path — like a Google Maps route overlay.
 
 ```tsx
 import { specToReactFlow, type ExecutionOverlay } from "footprint-explainable-ui/flowchart";
@@ -348,7 +373,8 @@ interface ThemeTokens {
 
 | Export | Description |
 |---|---|
-| `FlowchartView` | ReactFlow pipeline visualization with execution overlay |
+| `TracedFlowchartView` | Self-contained flowchart with trace overlay, subflow drill-down, breadcrumbs |
+| `FlowchartView` | Lower-level ReactFlow wrapper with execution state coloring |
 | `StageNode` | Custom node with state-aware coloring, step badges, pulse rings |
 | `specToReactFlow` | Convert pipeline spec → ReactFlow nodes/edges with path overlay |
 | `TimeTravelDebugger` | Full debugger with flowchart + all panels |
@@ -373,6 +399,19 @@ All components accept a `size` prop: `"compact"`, `"default"`, or `"detailed"`.
 <MemoryInspector snapshots={snapshots} size="detailed" />
 ```
 
+### Collapsible GanttTimeline
+
+By default, the Gantt timeline collapses to 5 rows with an expand toggle. Auto-scrolls to keep the active stage visible:
+
+```tsx
+<GanttTimeline
+  snapshots={snapshots}
+  selectedIndex={idx}
+  onSelect={setIdx}
+  maxVisibleRows={5}     // default — set 0 to disable collapse
+/>
+```
+
 ## Unstyled Mode
 
 Strip all built-in styles for full CSS control. Components render semantic `data-fp` attributes:

package/dist/adapters/fromRuntimeSnapshot.d.ts

@@ -0,0 +1,52 @@
+import type { StageSnapshot } from "../types";
+/**
+ * Shape of FootPrint's RuntimeSnapshot (from FlowChartExecutor.getSnapshot()).
+ * We define it here instead of importing to avoid a hard dependency on footprintjs.
+ */
+interface RuntimeStageSnapshot {
+    id: string;
+    name?: string;
+    isDecider?: boolean;
+    isFork?: boolean;
+    logs: Record<string, unknown>;
+    errors: Record<string, unknown>;
+    metrics: Record<string, unknown>;
+    evals: Record<string, unknown>;
+    flowMessages?: unknown[];
+    description?: string;
+    subflowId?: string;
+    next?: RuntimeStageSnapshot;
+    children?: RuntimeStageSnapshot[];
+}
+interface RuntimeSnapshot {
+    sharedState: Record<string, unknown>;
+    executionTree: RuntimeStageSnapshot;
+    commitLog: unknown[];
+}
+/**
+ * Converts a FootPrint RuntimeSnapshot into a flat array of StageSnapshots
+ * suitable for visualization components.
+ *
+ * Usage:
+ * ```ts
+ * const executor = new FlowChartExecutor(chart);
+ * await executor.run();
+ * const snapshots = toVisualizationSnapshots(executor.getSnapshot());
+ * ```
+ */
+export declare function toVisualizationSnapshots(runtime: RuntimeSnapshot): StageSnapshot[];
+/**
+ * Creates StageSnapshots from simple arrays (when you don't have a RuntimeSnapshot).
+ * Useful for testing or custom data sources.
+ */
+export declare function createSnapshots(stages: Array<{
+    name: string;
+    label?: string;
+    memory?: Record<string, unknown>;
+    narrative?: string;
+    durationMs?: number;
+    description?: string;
+    subflowId?: string;
+}>): StageSnapshot[];
+export {};
+//# sourceMappingURL=fromRuntimeSnapshot.d.ts.map

package/dist/adapters/fromRuntimeSnapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fromRuntimeSnapshot.d.ts","sourceRoot":"","sources":["../../src/adapters/fromRuntimeSnapshot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C;;;GAGG;AACH,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACnC;AAED,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,aAAa,EAAE,oBAAoB,CAAC;IACpC,SAAS,EAAE,OAAO,EAAE,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,eAAe,GACvB,aAAa,EAAE,CAIjB;AAkFD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,GACD,aAAa,EAAE,CAkBjB"}

package/dist/adapters/fromRuntimeSnapshot.js

@@ -0,0 +1,97 @@
+/**
+ * Converts a FootPrint RuntimeSnapshot into a flat array of StageSnapshots
+ * suitable for visualization components.
+ *
+ * Usage:
+ * ```ts
+ * const executor = new FlowChartExecutor(chart);
+ * await executor.run();
+ * const snapshots = toVisualizationSnapshots(executor.getSnapshot());
+ * ```
+ */
+export function toVisualizationSnapshots(runtime) {
+    const snapshots = [];
+    flattenTree(runtime.executionTree, snapshots, runtime.sharedState);
+    return snapshots;
+}
+function flattenTree(node, out, sharedState, accumulatedMs = 0) {
+    // Estimate duration from metrics if available
+    const durationMs = typeof node.metrics?.durationMs === "number"
+        ? node.metrics.durationMs
+        : 1;
+    const startMs = accumulatedMs;
+    // Build narrative from logs
+    const narrative = buildNarrative(node);
+    // Build memory from logs (key-value pairs written during this stage)
+    const memory = {};
+    if (node.logs) {
+        Object.assign(memory, node.logs);
+    }
+    out.push({
+        stageName: node.name || node.id,
+        stageLabel: node.name || node.id,
+        memory,
+        narrative,
+        startMs,
+        durationMs,
+        status: "done",
+        ...(node.description ? { description: node.description } : undefined),
+        ...(node.subflowId ? { subflowId: node.subflowId } : undefined),
+    });
+    let nextMs = startMs + durationMs;
+    // Handle parallel children (fork)
+    if (node.children && node.children.length > 0) {
+        let maxChildEnd = nextMs;
+        for (const child of node.children) {
+            const childEnd = flattenTree(child, out, sharedState, nextMs);
+            maxChildEnd = Math.max(maxChildEnd, childEnd);
+        }
+        nextMs = maxChildEnd;
+    }
+    // Handle linear continuation
+    if (node.next) {
+        nextMs = flattenTree(node.next, out, sharedState, nextMs);
+    }
+    return nextMs;
+}
+function buildNarrative(node) {
+    const parts = [];
+    if (node.name) {
+        parts.push(`Stage "${node.name}" executed.`);
+    }
+    if (node.logs && Object.keys(node.logs).length > 0) {
+        const keys = Object.keys(node.logs);
+        parts.push(`Wrote ${keys.length} key(s): ${keys.join(", ")}.`);
+    }
+    if (node.errors && Object.keys(node.errors).length > 0) {
+        parts.push(`Errors: ${JSON.stringify(node.errors)}`);
+    }
+    if (node.isFork) {
+        parts.push(`Forked into ${node.children?.length ?? 0} parallel branch(es).`);
+    }
+    return parts.join(" ") || `Stage ${node.id} completed.`;
+}
+/**
+ * Creates StageSnapshots from simple arrays (when you don't have a RuntimeSnapshot).
+ * Useful for testing or custom data sources.
+ */
+export function createSnapshots(stages) {
+    let accMs = 0;
+    return stages.map((s) => {
+        const duration = s.durationMs ?? 1;
+        const snap = {
+            stageName: s.name,
+            stageLabel: s.label ?? s.name,
+            memory: s.memory ?? {},
+            narrative: s.narrative ?? `${s.label ?? s.name} completed.`,
+            startMs: accMs,
+            durationMs: duration,
+            status: "done",
+            ...(s.description ? { description: s.description } : undefined),
+            ...(s.subflowId ? { subflowId: s.subflowId } : undefined),
+        };
+        accMs += duration;
+        return snap;
+    });
+}
+//# sourceMappingURL=fromRuntimeSnapshot.js.map

package/dist/adapters/fromRuntimeSnapshot.js.map

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

package/dist/components/ExplainableShell/ExplainableShell.d.ts

@@ -0,0 +1,26 @@
+import type { StageSnapshot, BaseComponentProps } from "../../types";
+export type ShellTab = "result" | "explainable" | "ai-compatible";
+export interface ExplainableShellProps extends BaseComponentProps {
+    /** Stage snapshots for time-travel visualization */
+    snapshots: StageSnapshot[];
+    /** Final pipeline result data */
+    resultData?: Record<string, unknown> | null;
+    /** Console log lines */
+    logs?: string[];
+    /** Combined narrative lines */
+    narrative?: string[];
+    /** Which tabs to show (default: all three) */
+    tabs?: ShellTab[];
+    /** Initially active tab */
+    defaultTab?: ShellTab;
+    /** Hide console in result tab */
+    hideConsole?: boolean;
+    /** Custom content to render in each tab slot */
+    renderFlowchart?: (props: {
+        snapshots: StageSnapshot[];
+        selectedIndex: number;
+        onNodeClick?: (index: number) => void;
+    }) => React.ReactNode;
+}
+export declare function ExplainableShell({ snapshots, resultData, logs, narrative, tabs, defaultTab, hideConsole, renderFlowchart, size, unstyled, className, style, }: ExplainableShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExplainableShell.d.ts.map

package/dist/components/ExplainableShell/ExplainableShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExplainableShell.d.ts","sourceRoot":"","sources":["../../../src/components/ExplainableShell/ExplainableShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAarE,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,aAAa,GAAG,eAAe,CAAC;AAElE,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,oDAAoD;IACpD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC5C,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QACxB,SAAS,EAAE,aAAa,EAAE,CAAC;QAC3B,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACvC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,UAAU,EACV,IAAS,EACT,SAAc,EACd,IAAiD,EACjD,UAAU,EACV,WAAmB,EACnB,eAAe,EACf,IAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,2CAoQvB"}

package/dist/components/ExplainableShell/ExplainableShell.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { theme, fontSize, padding } from "../../theme";
+import { ResultPanel } from "../ResultPanel";
+import { GanttTimeline } from "../GanttTimeline";
+import { MemoryInspector } from "../MemoryInspector";
+import { NarrativeTrace } from "../NarrativeTrace";
+import { ScopeDiff } from "../ScopeDiff";
+import { TimeTravelControls } from "../TimeTravelControls";
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function ExplainableShell({ snapshots, resultData, logs = [], narrative = [], tabs = ["result", "explainable", "ai-compatible"], defaultTab, hideConsole = false, renderFlowchart, size = "default", unstyled = false, className, style, }) {
+    const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]);
+    const [snapshotIdx, setSnapshotIdx] = useState(0);
+    const fs = fontSize[size];
+    const pad = padding[size];
+    const handleSnapshotChange = useCallback((idx) => {
+        setSnapshotIdx(Math.max(0, Math.min(idx, snapshots.length - 1)));
+    }, [snapshots.length]);
+    // Progressive narrative reveal
+    const revealedCount = useMemo(() => {
+        if (snapshots.length === 0 || narrative.length === 0)
+            return narrative.length;
+        const boundaries = [];
+        for (let i = 0; i < narrative.length; i++) {
+            const trimmed = narrative[i].trimStart();
+            if ((trimmed.startsWith("Stage ") && !trimmed.match(/^Stage\s+\d+:\s*Step\s/)) ||
+                trimmed.startsWith("[")) {
+                boundaries.push(i);
+            }
+        }
+        if (boundaries.length === 0) {
+            const ratio = (snapshotIdx + 1) / snapshots.length;
+            return Math.max(1, Math.ceil(narrative.length * ratio));
+        }
+        const groupsToShow = Math.max(1, Math.min(Math.floor(((snapshotIdx + 1) / snapshots.length) * boundaries.length) || 1, boundaries.length));
+        const endIdx = groupsToShow < boundaries.length ? boundaries[groupsToShow] : narrative.length;
+        return Math.max(1, endIdx);
+    }, [snapshots.length, snapshotIdx, narrative]);
+    // Scope diff data
+    const prevMemory = snapshotIdx > 0 ? snapshots[snapshotIdx - 1]?.memory : null;
+    const currMemory = snapshots[snapshotIdx]?.memory ?? {};
+    const tabLabels = {
+        result: "Result",
+        explainable: "Explainable",
+        "ai-compatible": "AI-Compatible",
+    };
+    if (unstyled) {
+        return (_jsxs("div", { className: className, style: style, "data-fp": "explainable-shell", children: [_jsx("div", { "data-fp": "shell-tabs", children: tabs.map((tab) => (_jsx("button", { "data-fp": "shell-tab", "data-active": tab === activeTab, onClick: () => setActiveTab(tab), children: tabLabels[tab] }, tab))) }), _jsxs("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [activeTab === "result" && (_jsx(ResultPanel, { data: resultData ?? null, logs: logs, hideConsole: hideConsole, unstyled: true })), activeTab === "explainable" && (_jsxs(_Fragment, { children: [_jsx(TimeTravelControls, { snapshots: snapshots, selectedIndex: snapshotIdx, onIndexChange: handleSnapshotChange, unstyled: true }), renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }), _jsx(MemoryInspector, { snapshots: snapshots, selectedIndex: snapshotIdx, unstyled: true }), _jsx(ScopeDiff, { previous: prevMemory, current: currMemory, unstyled: true }), _jsx(GanttTimeline, { snapshots: snapshots, selectedIndex: snapshotIdx, onSelect: handleSnapshotChange, unstyled: true })] })), activeTab === "ai-compatible" && (_jsxs(_Fragment, { children: [_jsx(TimeTravelControls, { snapshots: snapshots, selectedIndex: snapshotIdx, onIndexChange: handleSnapshotChange, unstyled: true }), renderFlowchart?.({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }), _jsx(NarrativeTrace, { narrative: narrative, revealedCount: revealedCount, unstyled: true })] }))] })] }));
+    }
+    // ── Styled mode ──
+    return (_jsxs("div", { className: className, style: {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            background: theme.bgPrimary,
+            color: theme.textPrimary,
+            fontFamily: theme.fontSans,
+            ...style,
+        }, "data-fp": "explainable-shell", children: [_jsx("div", { style: {
+                    display: "flex",
+                    gap: 0,
+                    borderBottom: `1px solid ${theme.border}`,
+                    background: theme.bgSecondary,
+                    flexShrink: 0,
+                }, children: tabs.map((tab) => {
+                    const active = tab === activeTab;
+                    return (_jsx("button", { onClick: () => setActiveTab(tab), style: {
+                            padding: `${pad - 4}px ${pad}px`,
+                            fontSize: fs.label,
+                            fontWeight: active ? 700 : 500,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.08em",
+                            color: active ? theme.primary : theme.textMuted,
+                            background: "transparent",
+                            border: "none",
+                            borderBottom: active ? `2px solid ${theme.primary}` : "2px solid transparent",
+                            cursor: "pointer",
+                            transition: "all 0.15s ease",
+                        }, children: tabLabels[tab] }, tab));
+                }) }), _jsxs("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: [activeTab === "result" && (_jsx(ResultPanel, { data: resultData ?? null, logs: logs, hideConsole: hideConsole, size: size })), activeTab === "explainable" && (_jsxs(_Fragment, { children: [_jsx(TimeTravelControls, { snapshots: snapshots, selectedIndex: snapshotIdx, onIndexChange: handleSnapshotChange, size: size }), _jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [renderFlowchart && (_jsx("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) })), _jsxs("div", { style: {
+                                            width: renderFlowchart ? "40%" : "100%",
+                                            minWidth: 280,
+                                            overflow: "auto",
+                                            display: "flex",
+                                            flexDirection: "column",
+                                        }, children: [_jsx(MemoryInspector, { snapshots: snapshots, selectedIndex: snapshotIdx, size: size }), _jsx("div", { style: { borderTop: `1px solid ${theme.border}` }, children: _jsx(ScopeDiff, { previous: prevMemory, current: currMemory, hideUnchanged: true, size: size }) })] })] }), _jsx("div", { style: { borderTop: `1px solid ${theme.border}`, flexShrink: 0 }, children: _jsx(GanttTimeline, { snapshots: snapshots, selectedIndex: snapshotIdx, onSelect: handleSnapshotChange, size: size }) })] })), activeTab === "ai-compatible" && (_jsxs(_Fragment, { children: [_jsx(TimeTravelControls, { snapshots: snapshots, selectedIndex: snapshotIdx, onIndexChange: handleSnapshotChange, size: size }), _jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [renderFlowchart && (_jsx("div", { style: { flex: 1, overflow: "hidden", borderRight: `1px solid ${theme.border}` }, children: renderFlowchart({ snapshots, selectedIndex: snapshotIdx, onNodeClick: handleSnapshotChange }) })), _jsx(NarrativeTrace, { narrative: narrative, revealedCount: revealedCount, size: size, style: {
+                                            width: renderFlowchart ? "40%" : "100%",
+                                            minWidth: 280,
+                                        } })] })] }))] })] }));
+}
+//# sourceMappingURL=ExplainableShell.js.map

package/dist/components/ExplainableShell/ExplainableShell.js.map

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

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

@@ -0,0 +1,3 @@
+export { ExplainableShell } from "./ExplainableShell";
+export type { ExplainableShellProps, ShellTab } from "./ExplainableShell";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExplainableShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/ExplainableShell/index.js

@@ -0,0 +1,2 @@
+export { ExplainableShell } from "./ExplainableShell";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExplainableShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1,20 @@
+import type { Node, Edge } from "@xyflow/react";
+import type { StageSnapshot, BaseComponentProps } from "../../types";
+export interface FlowchartViewProps extends BaseComponentProps {
+    /** ReactFlow nodes */
+    nodes: Node[];
+    /** ReactFlow edges */
+    edges: Edge[];
+    /** Optional snapshots for state-aware rendering (done/active coloring) */
+    snapshots?: StageSnapshot[];
+    /** Currently selected snapshot index (for state coloring) */
+    selectedIndex?: number;
+    /** Callback when a node is clicked */
+    onNodeClick?: (index: number) => void;
+}
+/**
+ * Pipeline flowchart visualization using ReactFlow.
+ * When snapshots are provided, nodes are colored by execution state.
+ */
+export declare function FlowchartView({ nodes: rawNodes, edges: rawEdges, snapshots, selectedIndex, onNodeClick, unstyled, className, style, }: FlowchartViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FlowchartView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowchartView.d.ts","sourceRoot":"","sources":["../../../src/components/FlowchartView/FlowchartView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKrE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,sBAAsB;IACtB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,sBAAsB;IACtB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,0EAA0E;IAC1E,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAID;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,QAAQ,EACf,SAAS,EACT,aAAiB,EACjB,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,2CA6GpB"}

package/dist/components/FlowchartView/FlowchartView.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { ReactFlow, Background, BackgroundVariant, useNodesState, useEdgesState, } from "@xyflow/react";
+import { StageNode } from "../StageNode";
+import { theme } from "../../theme";
+const nodeTypes = { stageNode: StageNode };
+/**
+ * Pipeline flowchart visualization using ReactFlow.
+ * When snapshots are provided, nodes are colored by execution state.
+ */
+export function FlowchartView({ nodes: rawNodes, edges: rawEdges, snapshots, selectedIndex = 0, onNodeClick, unstyled = false, className, style, }) {
+    // Enhance nodes with execution state
+    const enhancedNodes = useMemo(() => {
+        if (!snapshots || snapshots.length === 0) {
+            return rawNodes.map((n) => ({
+                ...n,
+                type: "stageNode",
+                data: {
+                    ...n.data,
+                    label: n.data.label || n.id,
+                    active: false,
+                    done: false,
+                    error: false,
+                },
+            }));
+        }
+        const doneNames = new Set(snapshots.slice(0, selectedIndex).map((s) => s.stageName));
+        const activeName = snapshots[selectedIndex]?.stageName;
+        return rawNodes.map((n) => ({
+            ...n,
+            type: "stageNode",
+            data: {
+                ...n.data,
+                label: n.data.label || n.id,
+                active: n.id === activeName,
+                done: doneNames.has(n.id),
+                error: false,
+            },
+        }));
+    }, [rawNodes, snapshots, selectedIndex]);
+    // Enhance edges with state coloring
+    const enhancedEdges = useMemo(() => {
+        if (!snapshots || snapshots.length === 0) {
+            return rawEdges.map((e) => ({
+                ...e,
+                style: { stroke: theme.textMuted, strokeWidth: 1.5 },
+                animated: false,
+            }));
+        }
+        const doneNames = new Set(snapshots.slice(0, selectedIndex + 1).map((s) => s.stageName));
+        const activeName = snapshots[selectedIndex]?.stageName;
+        return rawEdges.map((e) => {
+            const sourceIsDone = doneNames.has(e.source);
+            const isFromActive = e.source === activeName;
+            return {
+                ...e,
+                style: {
+                    stroke: sourceIsDone ? theme.success : theme.textMuted,
+                    strokeWidth: 1.5,
+                },
+                animated: isFromActive,
+            };
+        });
+    }, [rawEdges, snapshots, selectedIndex]);
+    const [nodes, , onNodesChange] = useNodesState(enhancedNodes);
+    const [edges, , onEdgesChange] = useEdgesState(enhancedEdges);
+    const handleNodeClick = useCallback((_, node) => {
+        if (!onNodeClick || !snapshots)
+            return;
+        const idx = snapshots.findIndex((s) => s.stageName === node.id);
+        if (idx >= 0)
+            onNodeClick(idx);
+    }, [onNodeClick, snapshots]);
+    return (_jsx("div", { className: className, style: {
+            width: "100%",
+            height: "100%",
+            ...style,
+        }, "data-fp": "flowchart-view", children: _jsx(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, 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=FlowchartView.js.map

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

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

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

@@ -0,0 +1,11 @@
+import type { BreadcrumbEntry } from "./useSubflowNavigation";
+export interface SubflowBreadcrumbProps {
+    breadcrumbs: BreadcrumbEntry[];
+    onNavigate: (level: number) => void;
+}
+/**
+ * Breadcrumb bar for subflow drill-down navigation.
+ * Shows: Root > SubflowA > SubflowB — clicking any crumb navigates back.
+ */
+export declare const SubflowBreadcrumb: import("react").NamedExoticComponent<SubflowBreadcrumbProps>;
+//# sourceMappingURL=SubflowBreadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubflowBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/FlowchartView/SubflowBreadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8DAkF5B,CAAC"}

package/dist/components/FlowchartView/SubflowBreadcrumb.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { theme } from "../../theme";
+/**
+ * Breadcrumb bar for subflow drill-down navigation.
+ * Shows: Root > SubflowA > SubflowB — clicking any crumb navigates back.
+ */
+export const SubflowBreadcrumb = memo(function SubflowBreadcrumb({ breadcrumbs, onNavigate, }) {
+    if (breadcrumbs.length <= 1)
+        return null;
+    return (_jsx("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+            padding: "6px 12px",
+            background: theme.bgSecondary,
+            borderBottom: `1px solid ${theme.border}`,
+            fontSize: 12,
+            fontFamily: theme.fontSans,
+            flexShrink: 0,
+            overflowX: "auto",
+        }, children: breadcrumbs.map((crumb, i) => {
+            const isLast = i === breadcrumbs.length - 1;
+            return (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [i > 0 && (_jsx("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" })), isLast ? (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [_jsx("span", { style: {
+                                    color: theme.primary,
+                                    fontWeight: 600,
+                                }, children: crumb.label }), crumb.description && (_jsxs("span", { style: {
+                                    color: theme.textMuted,
+                                    fontWeight: 400,
+                                    fontSize: 11,
+                                }, children: ["\u2014 ", crumb.description] }))] })) : (_jsx("button", { onClick: () => onNavigate(i), style: {
+                            background: "none",
+                            border: "none",
+                            color: theme.textSecondary,
+                            cursor: "pointer",
+                            padding: "2px 4px",
+                            borderRadius: 4,
+                            fontSize: 12,
+                            fontFamily: "inherit",
+                            fontWeight: 500,
+                            transition: "color 0.15s",
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.color = `${theme.primary}`;
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.color = `${theme.textSecondary}`;
+                        }, children: crumb.label }))] }, `${crumb.label}-${i}`));
+        }) }));
+});
+//# sourceMappingURL=SubflowBreadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubflowBreadcrumb.js","sourceRoot":"","sources":["../../../src/components/FlowchartView/SubflowBreadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAQpC;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC,EAC/D,WAAW,EACX,UAAU,GACa;IACvB,IAAI,WAAW,CAAC,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,OAAO,CACL,cACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,UAAU;YACnB,UAAU,EAAE,KAAK,CAAC,WAAW;YAC7B,YAAY,EAAE,aAAa,KAAK,CAAC,MAAM,EAAE;YACzC,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,KAAK,CAAC,QAAQ;YAC1B,UAAU,EAAE,CAAC;YACb,SAAS,EAAE,MAAM;SAClB,YAEA,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YAC5B,MAAM,MAAM,GAAG,CAAC,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;YAC5C,OAAO,CACL,gBAAkC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACvF,CAAC,GAAG,CAAC,IAAI,CACR,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,uBAE9C,CACR,EACA,MAAM,CAAC,CAAC,CAAC,CACR,gBAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC5D,eACE,KAAK,EAAE;oCACL,KAAK,EAAE,KAAK,CAAC,OAAO;oCACpB,UAAU,EAAE,GAAG;iCAChB,YAEA,KAAK,CAAC,KAAK,GACP,EACN,KAAK,CAAC,WAAW,IAAI,CACpB,gBACE,KAAK,EAAE;oCACL,KAAK,EAAE,KAAK,CAAC,SAAS;oCACtB,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,EAAE;iCACb,wBAEE,KAAK,CAAC,WAAW,IACf,CACR,IACI,CACR,CAAC,CAAC,CAAC,CACF,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAC5B,KAAK,EAAE;4BACL,UAAU,EAAE,MAAM;4BAClB,MAAM,EAAE,MAAM;4BACd,KAAK,EAAE,KAAK,CAAC,aAAa;4BAC1B,MAAM,EAAE,SAAS;4BACjB,OAAO,EAAE,SAAS;4BAClB,YAAY,EAAE,CAAC;4BACf,QAAQ,EAAE,EAAE;4BACZ,UAAU,EAAE,SAAS;4BACrB,UAAU,EAAE,GAAG;4BACf,UAAU,EAAE,aAAa;yBAC1B,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;4BAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC;wBACnD,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;4BAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;wBACzD,CAAC,YAEA,KAAK,CAAC,KAAK,GACL,CACV,KApDQ,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE,CAqDzB,CACR,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,36 @@
+import type { SpecNode } from "./specToReactFlow";
+import type { BaseComponentProps } from "../../types";
+export interface SubflowTreeEntry {
+    /** Node name / identifier */
+    name: string;
+    /** Human-readable description */
+    description?: string;
+    /** Subflow ID (when this node represents a subflow) */
+    subflowId?: string;
+    /** Whether this node is a subflow root (has nested structure) */
+    isSubflow?: boolean;
+    /** Nested children (subflow stages) */
+    children?: SubflowTreeEntry[];
+}
+export interface SubflowTreeProps extends BaseComponentProps {
+    /** Pipeline spec to derive the tree from */
+    spec: SpecNode;
+    /** Currently active stage name (highlights in tree) */
+    activeStage?: string | null;
+    /** Set of completed stage names */
+    doneStages?: Set<string>;
+    /** Called when a tree node is clicked */
+    onNodeSelect?: (name: string, isSubflow: boolean) => void;
+}
+/** Extracts a flat-ish tree of entries from a SpecNode for display. */
+export declare function specToTree(node: SpecNode): SubflowTreeEntry[];
+/**
+ * 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 declare const SubflowTree: import("react").NamedExoticComponent<SubflowTreeProps>;
+//# sourceMappingURL=SubflowTree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubflowTree.d.ts","sourceRoot":"","sources":["../../../src/components/FlowchartView/SubflowTree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,mCAAmC;IACnC,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,gBAAgB,EAAE,CAsC7D;AAuJD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,wDAwDtB,CAAC"}