footprint-explainable-ui 0.11.0 → 0.11.2

package/dist/index.cjs

@@ -2433,7 +2433,7 @@ var ENTRY_ICONS = {
 };
 function StoryNarrative({
   entries,
-  stageCount,
+  revealedStages,
   size = "default",
   unstyled = false,
   className,
@@ -2442,15 +2442,15 @@ function StoryNarrative({
   const fs = fontSize[size];
   const pad = padding[size];
   const revealedCount = (0, import_react11.useMemo)(() => {
-    let stagesSeen = 0;
     for (let i = 0; i < entries.length; i++) {
       const e = entries[i];
-      const isBoundary = e.type === "stage" || e.type === "subflow" && e.text.startsWith("Entering");
-      if (isBoundary) stagesSeen++;
-      if (stagesSeen > stageCount) return i;
+      const key = e.stageId ?? e.stageName;
+      if (key && !revealedStages.has(key)) {
+        return i;
+      }
     }
     return entries.length;
-  }, [entries, stageCount]);
+  }, [entries, revealedStages]);
   const revealed = entries.slice(0, revealedCount);
   const future = entries.slice(revealedCount);
   const latestRef = (0, import_react11.useRef)(null);
@@ -2585,9 +2585,17 @@ function NarrativePanel({
     const endIdx = groupsToShow < stageBoundaries.length ? stageBoundaries[groupsToShow] : narrative.length;
     return Math.max(1, endIdx);
   }, [snapshots.length, selectedIndex, narrative]);
+  const revealedStages = (0, import_react12.useMemo)(() => {
+    const labels = /* @__PURE__ */ new Set();
+    for (let i = 0; i <= selectedIndex && i < snapshots.length; i++) {
+      if (snapshots[i].stageLabel) labels.add(snapshots[i].stageLabel);
+      if (snapshots[i].stageName) labels.add(snapshots[i].stageName);
+    }
+    return labels;
+  }, [snapshots, selectedIndex]);
   const hasStructured = narrativeEntries && narrativeEntries.length > 0;
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style, "data-fp": "narrative-panel", children: hasStructured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StoryNarrative, { entries: narrativeEntries, stageCount: selectedIndex + 1, unstyled: true }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NarrativeTrace, { narrative, revealedCount, unstyled: true }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style, "data-fp": "narrative-panel", children: hasStructured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StoryNarrative, { entries: narrativeEntries, revealedStages, unstyled: true }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NarrativeTrace, { narrative, revealedCount, unstyled: true }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
@@ -2619,7 +2627,7 @@ function NarrativePanel({
           StoryNarrative,
           {
             entries: narrativeEntries,
-            stageCount: selectedIndex + 1,
+            revealedStages,
             size,
             style: { flex: 1 }
           }
@@ -4001,7 +4009,7 @@ function ExplainableShell({
   const validTabIds = new Set(allTabs.map((t) => t.id));
   const resolvedDefault = defaultTab && validTabIds.has(defaultTab) ? defaultTab : allTabs[0]?.id ?? "result";
   const [activeTab, setActiveTab] = (0, import_react19.useState)(resolvedDefault);
-  const [snapshotIdx, setSnapshotIdx] = (0, import_react19.useState)(999);
+  const [snapshotIdx, setSnapshotIdx] = (0, import_react19.useState)(0);
   const [drillDownStack, setDrillDownStack] = (0, import_react19.useState)([]);
   const [rightExpanded, setRightExpanded] = (0, import_react19.useState)(defaultExpanded?.details ?? true);
   const [leftExpanded, setLeftExpanded] = (0, import_react19.useState)(defaultExpanded?.topology ?? false);