footprint-explainable-ui 0.14.0 → 0.14.2

package/dist/index.cjs

@@ -4086,6 +4086,135 @@ var VLinePill = (0, import_react19.memo)(function VLinePill2({
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } })
   ] });
 });
+function detectKeyedSteps(data) {
+  if (!data || typeof data !== "object") return null;
+  const obj = data;
+  for (const val of Object.values(obj)) {
+    if (val && typeof val === "object" && !Array.isArray(val)) {
+      const entries = Object.entries(val);
+      if (entries.length === 0) continue;
+      const allObjectsWithNumbers = entries.every(([, v2]) => {
+        if (!v2 || typeof v2 !== "object" || Array.isArray(v2)) return false;
+        return Object.values(v2).some((f) => typeof f === "number");
+      });
+      if (allObjectsWithNumbers) {
+        const keyType = entries.some(([k]) => k.includes("#")) ? "runtimeStageId" : "stageName";
+        return { steps: val, keyType };
+      }
+    }
+  }
+  return null;
+}
+function findNumericField(entry) {
+  for (const [k, v2] of Object.entries(entry)) {
+    if (typeof v2 === "number") return { key: k, value: v2 };
+  }
+  return null;
+}
+function KeyedRecorderView({
+  data,
+  description,
+  snapshots,
+  selectedIndex
+}) {
+  const [showAggregate, setShowAggregate] = (0, import_react19.useState)(false);
+  const detected = (0, import_react19.useMemo)(() => detectKeyedSteps(data), [data]);
+  const visibleKeys = (0, import_react19.useMemo)(() => {
+    const keys = /* @__PURE__ */ new Set();
+    for (let i = 0; i <= selectedIndex && i < snapshots.length; i++) {
+      const snap = snapshots[i];
+      if (detected?.keyType === "runtimeStageId") {
+        if (snap.runtimeStageId) keys.add(snap.runtimeStageId);
+      } else {
+        if (snap.stageName) keys.add(snap.stageName);
+        if (snap.stageLabel) keys.add(snap.stageLabel);
+      }
+    }
+    return keys;
+  }, [snapshots, selectedIndex, detected?.keyType]);
+  const isAtEnd = selectedIndex >= snapshots.length - 1;
+  if (!detected) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
+  }
+  const steps = detected.steps;
+  const allKeys = Object.keys(steps);
+  const visibleEntries = allKeys.filter((k) => visibleKeys.has(k));
+  const numField = allKeys.length > 0 ? findNumericField(steps[allKeys[0]]) : null;
+  const numFieldKey = numField?.key ?? "";
+  let runningTotal = 0;
+  if (numFieldKey) {
+    for (const k of visibleEntries) {
+      runningTotal += steps[k][numFieldKey] ?? 0;
+    }
+  }
+  let grandTotal = 0;
+  if (numFieldKey) {
+    for (const entry of Object.values(steps)) {
+      grandTotal += entry[numFieldKey] ?? 0;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
+    description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
+      visibleEntries.map((key) => {
+        const entry = steps[key];
+        const label = entry.stageName ?? key;
+        const numVal = numFieldKey ? entry[numFieldKey] : void 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "4px 0", fontSize: 12, fontFamily: theme.fontMono, borderBottom: `1px solid ${theme.border}22` }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { color: theme.textMuted, width: 140, flexShrink: 0, fontSize: 10 }, children: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 600, flex: 1 }, children: label }),
+          numVal !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { color: theme.primary, fontWeight: 700, marginLeft: 8 }, children: numVal < 1 ? numVal.toFixed(3) : numVal.toFixed(1) })
+        ] }, key);
+      }),
+      visibleEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." }),
+      numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginTop: 12, padding: "8px 12px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, fontSize: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: theme.textMuted }, children: [
+          "Running total (",
+          numFieldKey,
+          "):"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 700, marginLeft: 8, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
+          "(",
+          visibleEntries.length,
+          " of ",
+          allKeys.length,
+          " steps)"
+        ] })
+      ] }),
+      isAtEnd && numFieldKey && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginTop: 12 }, children: !showAggregate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "button",
+        {
+          onClick: () => setShowAggregate(true),
+          style: {
+            background: theme.primary,
+            color: "#fff",
+            border: "none",
+            borderRadius: 6,
+            padding: "8px 16px",
+            fontSize: 12,
+            fontWeight: 600,
+            cursor: "pointer",
+            fontFamily: "inherit"
+          },
+          children: [
+            "Aggregate (",
+            numFieldKey,
+            ")"
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 6, border: `1px solid ${theme.success}44` }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4 }, children: "Aggregate \u2014 Grand Total" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 20, fontWeight: 700, color: theme.success }, children: grandTotal < 1 ? grandTotal.toFixed(3) : grandTotal.toFixed(1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { fontSize: 10, color: theme.textMuted, marginTop: 2 }, children: [
+          allKeys.length,
+          " steps \xB7 ",
+          numFieldKey
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
 var DetailsContent = (0, import_react19.memo)(function DetailsContent2({
   snapshots,
   selectedIndex,
@@ -4259,10 +4388,10 @@ function ExplainableShell({
   const allTabs = (0, import_react19.useMemo)(() => {
     const tabs2 = [
       { id: "result", name: "Result", description: "Final output and console logs" },
-      { id: "memory", name: "Memory", description: "Accumulated shared state at each stage" }
+      { id: "memory", name: "Memory", description: "Accumulator \u2014 progressive shared state at each stage" }
     ];
     if (hasNarrative) {
-      tabs2.push({ id: "narrative", name: "Narrative", description: "What happened, what data flowed, what decisions were made" });
+      tabs2.push({ id: "narrative", name: "Narrative", description: "Translator (SequenceRecorder) \u2014 interleaved flow + data narrative per execution step" });
     }
     for (const v2 of recorderViews ?? []) {
       tabs2.push({ id: v2.id, name: v2.name, description: v2.description });
@@ -4430,17 +4559,15 @@ function ExplainableShell({
     }
     const autoView = autoRecorderViews.find((v2) => v2.id === activeTab);
     if (autoView) {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
-        autoView.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: {
-          padding: "6px 12px",
-          fontSize: 11,
-          color: theme.textMuted,
-          fontStyle: "italic",
-          borderBottom: `1px solid ${theme.border}`,
-          flexShrink: 0
-        }, children: autoView.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", flex: 1 }, children: typeof autoView.data === "string" ? autoView.data : JSON.stringify(autoView.data, null, 2) })
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        KeyedRecorderView,
+        {
+          data: autoView.data,
+          description: autoView.description,
+          snapshots: activeSnapshots,
+          selectedIndex: safeIdx
+        }
+      );
     }
     return null;
   }, [activeTab, resultData, logs, hideConsole, size, activeSnapshots, safeIdx, activeNarrativeEntries, activeNarrative, recorderViews, autoRecorderViews]);