footprint-explainable-ui 0.8.2 → 0.10.0

package/dist/index.cjs

@@ -3796,28 +3796,39 @@ var VLinePill = (0, import_react19.memo)(function VLinePill2({
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, width: 1, background: theme.border } })
   ] });
 });
-var RIGHT_PANEL_LABELS = {
-  memory: "Memory",
-  narrative: "Narrative"
-};
 var DetailsContent = (0, import_react19.memo)(function DetailsContent2({
   snapshots,
   selectedIndex,
   narrativeEntries,
   narrative,
   size,
-  fillHeight
+  fillHeight,
+  extraViews
 }) {
-  const [rightPanel, setRightPanel] = (0, import_react19.useState)("memory");
+  const builtInViews = [
+    {
+      id: "memory",
+      name: "Memory",
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: fillHeight ? { height: "100%" } : void 0 })
+    },
+    {
+      id: "narrative",
+      name: "Narrative",
+      render: ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries, narrative, size, style: fillHeight ? { height: "100%" } : void 0 })
+    }
+  ];
+  const allViews = [...builtInViews, ...extraViews ?? []];
+  const [activeViewId, setActiveViewId] = (0, import_react19.useState)(allViews[0]?.id ?? "memory");
+  const activeView = allViews.find((v2) => v2.id === activeViewId) ?? allViews[0];
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: ["memory", "narrative"].map((panel) => {
-      const active = rightPanel === panel;
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", borderBottom: `1px solid ${theme.border}`, flexShrink: 0, overflowX: "auto" }, children: allViews.map((view) => {
+      const active = view.id === activeViewId;
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
-          onClick: () => setRightPanel(panel),
+          onClick: () => setActiveViewId(view.id),
           style: {
-            flex: 1,
+            flex: allViews.length <= 3 ? 1 : void 0,
             padding: "6px 8px",
             fontSize: 11,
             fontWeight: active ? 600 : 400,
@@ -3828,17 +3839,15 @@ var DetailsContent = (0, import_react19.memo)(function DetailsContent2({
             cursor: "pointer",
             textTransform: "uppercase",
             letterSpacing: "0.06em",
-            fontFamily: "inherit"
+            fontFamily: "inherit",
+            whiteSpace: "nowrap"
           },
-          children: RIGHT_PANEL_LABELS[panel]
+          children: view.name
         },
-        panel
+        view.id
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1, overflow: "auto" }, children: [
-      rightPanel === "memory" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MemoryPanel, { snapshots, selectedIndex, size, style: fillHeight ? { height: "100%" } : void 0 }),
-      rightPanel === "narrative" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NarrativePanel, { snapshots, selectedIndex, narrativeEntries, narrative, size, style: fillHeight ? { height: "100%" } : void 0 })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: activeView?.render({ snapshots, selectedIndex }) })
   ] });
 });
 function resolveSubflowLevel(parentSpec, parentSnapshots, subflowNodeName, narrativeEntries) {
@@ -3922,6 +3931,7 @@ function ExplainableShell({
   hideConsole = false,
   panelLabels,
   defaultExpanded,
+  recorderViews,
   renderFlowchart,
   size = "default",
   unstyled = false,
@@ -3960,7 +3970,14 @@ function ExplainableShell({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const [activeTab, setActiveTab] = (0, import_react19.useState)(defaultTab ?? tabs[0]);
+  const builtInViews = [
+    { id: "result", name: "Result" },
+    { id: "memory", name: "Memory" },
+    { id: "narrative", name: "Narrative" }
+  ];
+  const customViewIds = (recorderViews ?? []).map((v2) => ({ id: v2.id, name: v2.name }));
+  const allTabs = [...builtInViews, ...customViewIds];
+  const [activeTab, setActiveTab] = (0, import_react19.useState)(defaultTab ?? "memory");
   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);
@@ -4081,14 +4098,10 @@ function ExplainableShell({
     },
     [spec, snapshots, narrativeEntries, snapshotIdx]
   );
-  const tabLabels = {
-    result: "Result",
-    explainable: "Explainable",
-    "ai-compatible": "AI-Compatible"
-  };
+  const tabLabels = new Map(allTabs.map((t) => [t.id, t.name]));
   if (unstyled) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className, style, "data-fp": "explainable-shell", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-fp": "shell-tabs", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { "data-fp": "shell-tab", "data-active": tab === activeTab, onClick: () => handleTabChange(tab), children: tabLabels[tab] }, tab)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-fp": "shell-tabs", children: allTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { "data-fp": "shell-tab", "data-active": tab.id === activeTab, onClick: () => handleTabChange(tab.id), children: tab.name }, tab.id)) }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-fp": "shell-content", "data-tab": activeTab, children: [
         activeTab === "result" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ResultPanel, { data: resultData ?? null, logs, hideConsole, unstyled: true }),
         (activeTab === "explainable" || activeTab === "ai-compatible") && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
@@ -4102,7 +4115,18 @@ function ExplainableShell({
       ] })
     ] });
   }
-  const isVisualizationTab = activeTab === "explainable" || activeTab === "ai-compatible";
+  const isVisualizationTab = activeTab !== "result";
+  const activeRecorderRender = (0, import_react19.useMemo)(() => {
+    if (activeTab === "result") return null;
+    if (activeTab === "memory") {
+      return ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MemoryPanel, { snapshots: snaps, selectedIndex: idx, size, style: { height: "100%" } });
+    }
+    if (activeTab === "narrative") {
+      return ({ snapshots: snaps, selectedIndex: idx }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NarrativePanel, { snapshots: snaps, selectedIndex: idx, narrativeEntries: activeNarrativeEntries, narrative: activeNarrative, size, style: { height: "100%" } });
+    }
+    const customView = recorderViews?.find((v2) => v2.id === activeTab);
+    return customView?.render ?? null;
+  }, [activeTab, recorderViews, activeNarrativeEntries, activeNarrative, size]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
@@ -4121,17 +4145,18 @@ function ExplainableShell({
       },
       "data-fp": "explainable-shell",
       children: [
-        tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: {
           display: "flex",
           borderBottom: `1px solid ${theme.border}`,
           background: theme.bgSecondary,
-          flexShrink: 0
-        }, children: tabs.map((tab) => {
-          const active = tab === activeTab;
+          flexShrink: 0,
+          overflowX: "auto"
+        }, children: allTabs.map((tab) => {
+          const active = tab.id === activeTab;
           return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
-              onClick: () => handleTabChange(tab),
+              onClick: () => handleTabChange(tab.id),
               style: {
                 padding: "6px 14px",
                 fontSize: 11,
@@ -4143,11 +4168,12 @@ function ExplainableShell({
                 border: "none",
                 borderBottom: active ? `2px solid ${theme.primary}` : "2px solid transparent",
                 cursor: "pointer",
-                fontFamily: "inherit"
+                fontFamily: "inherit",
+                whiteSpace: "nowrap"
               },
-              children: tabLabels[tab]
+              children: tab.name
             },
-            tab
+            tab.id
           );
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1, overflow: isNarrow ? "auto" : "hidden", display: "flex", flexDirection: "column" }, children: [
@@ -4185,16 +4211,7 @@ function ExplainableShell({
                   ) })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: rightLabel, expanded: rightExpanded, onClick: () => toggleRight(!rightExpanded) }),
-                rightExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { maxHeight: 250, flexShrink: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  DetailsContent,
-                  {
-                    snapshots: activeSnapshots,
-                    selectedIndex: safeIdx,
-                    narrativeEntries: activeNarrativeEntries,
-                    narrative: activeNarrative,
-                    size
-                  }
-                ) }),
+                rightExpanded && activeRecorderRender && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { maxHeight: 250, flexShrink: 0, overflow: "auto" }, children: activeRecorderRender({ snapshots: activeSnapshots, selectedIndex: safeIdx }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),
                 timelineExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GanttTimeline, { snapshots: activeSnapshots, selectedIndex: safeIdx, onSelect: handleSnapshotChange, size }) })
               ] })
@@ -4220,19 +4237,9 @@ function ExplainableShell({
                     selectedIndex: safeIdx,
                     onNodeClick: handleNodeClick
                   }) }),
-                  rightExpanded ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { width: "38%", minWidth: 300, maxWidth: 500, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
+                  rightExpanded && activeRecorderRender ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { width: "38%", minWidth: 300, maxWidth: 500, display: "flex", flexDirection: "row", overflow: "hidden" }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VLinePill, { label: rightLabel, expanded: true, onClick: () => toggleRight(false) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                      DetailsContent,
-                      {
-                        snapshots: activeSnapshots,
-                        selectedIndex: safeIdx,
-                        narrativeEntries: activeNarrativeEntries,
-                        narrative: activeNarrative,
-                        size,
-                        fillHeight: true
-                      }
-                    )
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1, overflow: "auto" }, children: activeRecorderRender({ snapshots: activeSnapshots, selectedIndex: safeIdx }) })
                   ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VLinePill, { label: rightLabel, expanded: false, onClick: () => toggleRight(true) })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HLinePill, { label: bottomLabel, detail: `${activeSnapshots.length} stages`, expanded: timelineExpanded, onClick: toggleTimeline }),