footprint-explainable-ui 0.26.1 → 0.27.0

package/dist/index.cjs

@@ -2300,6 +2300,67 @@ function TimeTravelControls({
 // src/components/ExplainableShell/ExplainableShell.tsx
 var import_react31 = require("react");
 
+// src/components/ExplainableShell/_internal/dataTrace.ts
+function readsByStep(tree) {
+  const byStep = /* @__PURE__ */ new Map();
+  if (!tree) return byStep;
+  const visited = /* @__PURE__ */ new Set();
+  const stack = [tree];
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (visited.has(node)) continue;
+    visited.add(node);
+    if (node.runtimeStageId && node.stageReads) {
+      const keys = Object.keys(node.stageReads);
+      if (keys.length > 0) byStep.set(node.runtimeStageId, keys);
+    }
+    if (node.next) stack.push(node.next);
+    if (node.children) for (const c of node.children) stack.push(c);
+  }
+  return byStep;
+}
+function buildDataTrace(commitLog, executionTree, targetRuntimeStageId, maxDepth = 10, maxFrames = 50) {
+  const log = commitLog ?? [];
+  const reads = readsByStep(executionTree);
+  const readsAvailable = reads.size > 0;
+  if (!log.length) return { frames: [], readsAvailable };
+  const idxOf = /* @__PURE__ */ new Map();
+  for (let i = 0; i < log.length; i++) idxOf.set(log[i].runtimeStageId, i);
+  const startIdx = idxOf.get(targetRuntimeStageId);
+  if (startIdx === void 0) return { frames: [], readsAvailable };
+  const findLastWriter = (key, beforeIdx) => {
+    for (let i = beforeIdx - 1; i >= 0; i--) {
+      if (log[i].trace.some((t) => t.path === key)) return i;
+    }
+    return -1;
+  };
+  const frames = [];
+  const visited = /* @__PURE__ */ new Set();
+  const queue = [[startIdx, 0, ""]];
+  while (queue.length > 0 && frames.length < maxFrames) {
+    const [idx, depth, linkedBy] = queue.shift();
+    const commit = log[idx];
+    if (visited.has(commit.runtimeStageId)) continue;
+    visited.add(commit.runtimeStageId);
+    frames.push({
+      runtimeStageId: commit.runtimeStageId,
+      stageId: commit.stageId,
+      stageName: commit.stage,
+      keysWritten: commit.trace.map((t) => t.path),
+      linkedBy,
+      depth
+    });
+    if (depth >= maxDepth) continue;
+    for (const key of reads.get(commit.runtimeStageId) ?? []) {
+      const writerIdx = findLastWriter(key, idx);
+      if (writerIdx >= 0 && !visited.has(log[writerIdx].runtimeStageId)) {
+        queue.push([writerIdx, depth + 1, key]);
+      }
+    }
+  }
+  return { frames, readsAvailable };
+}
+
 // src/utils/narrativeSync.ts
 function buildEntryRangeIndex(entries) {
   const ranges = /* @__PURE__ */ new Map();
@@ -4413,8 +4474,8 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
         gap: 6,
         padding: "6px 12px",
         fontSize: 11,
-        background: rawDefaults.colors.bgSecondary,
-        borderBottom: `1px solid ${rawDefaults.colors.border}`,
+        background: theme.bgSecondary,
+        borderBottom: `1px solid ${theme.border}`,
         flexShrink: 0
       },
       "aria-label": "Subflow breadcrumb",
@@ -4437,7 +4498,7 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
                     padding: 0,
                     fontSize: 11,
                     fontWeight: isLast ? 600 : 500,
-                    color: isLast ? rawDefaults.colors.textPrimary : rawDefaults.colors.primary,
+                    color: isLast ? theme.textPrimary : theme.primary,
                     cursor: isLast ? "default" : "pointer",
                     textDecoration: isLast ? "none" : "underline",
                     fontFamily: "inherit"
@@ -4445,7 +4506,7 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
                   children: entry.label
                 }
               ),
-              !isLast && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: rawDefaults.colors.textMuted }, children: "\u203A" })
+              !isLast && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: theme.textMuted }, children: "\u203A" })
             ]
           },
           entry.subflowId ?? "__top__"
@@ -4458,10 +4519,9 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
 // src/components/GroupContainerNode/GroupContainerNode.tsx
 var import_react19 = require("@xyflow/react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var C = rawDefaults.colors;
 function GroupContainerNode({ data }) {
   const d = data;
-  const borderColor = d.error ? C.error : d.active ? C.primary : d.done ? C.success : C.border;
+  const borderColor = d.error ? theme.error : d.active ? theme.primary : d.done ? theme.nodeVisited : theme.border;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
@@ -4471,8 +4531,9 @@ function GroupContainerNode({ data }) {
         boxSizing: "border-box",
         border: `1.5px ${d.active || d.done || d.error ? "solid" : "dashed"} ${borderColor}`,
         borderRadius: 12,
-        // Translucent so the dotted background + nested children read clearly.
-        background: "rgba(148, 163, 184, 0.06)",
+        // Translucent (theme-derived) so the dotted background + nested children
+        // read clearly, while still following dark/light.
+        background: `color-mix(in srgb, ${theme.textMuted} 7%, transparent)`,
         opacity: d.dimmed ? 0.4 : 1,
         position: "relative"
       },
@@ -4487,7 +4548,7 @@ function GroupContainerNode({ data }) {
               padding: "8px 12px",
               fontSize: 12,
               fontWeight: 600,
-              color: C.textMuted,
+              color: theme.textMuted,
               letterSpacing: 0.2
             },
             children: [
@@ -5205,8 +5266,10 @@ var DataTracePanel = (0, import_react27.memo)(function DataTracePanel2({
   frames,
   selectedStageId,
   onFrameClick,
-  fromStageName
+  fromStageName,
+  note
 }) {
+  const noteLine = note ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", marginBottom: 8 }, children: note }) : null;
   if (frames.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "14px 14px 12px", fontSize: 13, lineHeight: 1.55 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -5224,10 +5287,12 @@ var DataTracePanel = (0, import_react27.memo)(function DataTracePanel2({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: theme.textSecondary, marginBottom: 10 }, children: "Trace any value back to the stage that created it \u2014 and everything upstream that influenced it." }),
+      noteLine,
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: theme.textMuted, fontSize: 12 }, children: "Select a stage above to see its dependency chain." })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "8px 0", fontSize: 13 }, children: [
+    note && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: "4px 12px 0", fontSize: 11, color: theme.textMuted, fontStyle: "italic" }, children: note }),
     fromStageName && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "4px 12px 8px" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
@@ -5361,6 +5426,7 @@ var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
   snapshots,
   selectedIndex,
   dataTraceFrames,
+  dataTraceNote,
   selectedStageId,
   onNavigateToStage
 }) {
@@ -5417,6 +5483,7 @@ var InspectorPanel = (0, import_react28.memo)(function InspectorPanel2({
             DataTracePanel,
             {
               frames: dataTraceFrames,
+              note: dataTraceNote,
               selectedStageId,
               onFrameClick: onNavigateToStage,
               fromStageName: currentSnapshot?.stageName
@@ -6008,40 +6075,6 @@ function resolveSubflowFromRuntime(parentSnapshots, subflowId, narrativeEntries)
   if (sfSnapshots.length === 0) return null;
   return { subflowId, label, spec: null, snapshots: sfSnapshots, narrative: sfNarrative };
 }
-function buildDataTrace(commitLog, targetRuntimeStageId, maxDepth = 10) {
-  const log = commitLog;
-  if (!log?.length) return [];
-  const idxMap = /* @__PURE__ */ new Map();
-  for (let i = 0; i < log.length; i++) idxMap.set(log[i].runtimeStageId, i);
-  const startIdx = idxMap.get(targetRuntimeStageId);
-  if (startIdx === void 0) return [];
-  const startCommit = log[startIdx];
-  const frames = [];
-  const visited = /* @__PURE__ */ new Set();
-  let current = startCommit;
-  let currentIdx = startIdx;
-  let depth = 0;
-  while (current && depth <= maxDepth) {
-    if (visited.has(current.runtimeStageId)) break;
-    visited.add(current.runtimeStageId);
-    frames.push({
-      runtimeStageId: current.runtimeStageId,
-      stageId: current.stageId,
-      stageName: current.stage,
-      keysWritten: current.trace.map((t) => t.path),
-      linkedBy: depth === 0 ? "" : current.trace[0]?.path ?? "",
-      depth
-    });
-    if (currentIdx > 0) {
-      currentIdx--;
-      current = log[currentIdx];
-      depth++;
-    } else {
-      break;
-    }
-  }
-  return frames;
-}
 var RightPanel = (0, import_react31.memo)(function RightPanel2({
   mode,
   onModeChange,
@@ -6056,6 +6089,10 @@ var RightPanel = (0, import_react31.memo)(function RightPanel2({
   size,
   onNavigateToStage
 }) {
+  const dataTrace = (0, import_react31.useMemo)(
+    () => runtimeSnapshot?.commitLog ? buildDataTrace(runtimeSnapshot.commitLog, runtimeSnapshot.executionTree, snapshots[selectedIndex]?.runtimeStageId ?? "") : { frames: [], readsAvailable: true },
+    [runtimeSnapshot, snapshots, selectedIndex]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: {
       display: "flex",
@@ -6107,7 +6144,8 @@ var RightPanel = (0, import_react31.memo)(function RightPanel2({
       {
         snapshots,
         selectedIndex,
-        dataTraceFrames: runtimeSnapshot?.commitLog ? buildDataTrace(runtimeSnapshot.commitLog, snapshots[selectedIndex]?.runtimeStageId ?? "") : [],
+        dataTraceFrames: dataTrace.frames,
+        dataTraceNote: dataTrace.readsAvailable ? void 0 : "\u26A0 reads were not recorded (readTracking off) \u2014 dependencies are unknowable, not absent.",
         selectedStageId: snapshots[selectedIndex]?.runtimeStageId,
         onNavigateToStage
       }
@@ -6436,12 +6474,22 @@ function ExplainableShell({
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: detailsContent })
   ] });
+  const shellThemeVars = (0, import_react31.useMemo)(() => {
+    if (!traceTheme) return {};
+    const base = traceTheme.mode ? tokensToCSSVars(traceTheme.mode === "light" ? coolLight : coolDark) : {};
+    return {
+      ...base,
+      ...traceTheme.visited !== void 0 && { ["--fp-node-visited"]: traceTheme.visited },
+      ...traceTheme.current !== void 0 && { ["--fp-node-cursor"]: traceTheme.current }
+    };
+  }, [traceTheme]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref: shellRef,
       className,
       style: {
+        ...shellThemeVars,
         height: "100%",
         display: "flex",
         flexDirection: "column",