footprint-explainable-ui 0.27.0 → 0.29.0

package/README.md

@@ -138,6 +138,32 @@ The all-in-one orchestrator. Handles time-travel, subflow drill-down, memory/nar
 | `size` | `"compact" \| "default" \| "detailed"` | `"default"` | Size variant |
 | `unstyled` | `boolean` | `false` | Strip styles, render `data-fp` attributes |
 
+### Tracing a value — walk the timeline backward through its causes
+
+![Tracing mode: the rail becomes the walk](demo/tracing-verified.png)
+
+Open **Inspector → Data Trace** and click one of the "Trace a value" chips.
+The time slider stays the same rail — the stages that made that value light
+up as **stops**, everything else fades to unlandable ticks, and the buttons
+become **◀ earlier cause / toward result ▶**. This works because every
+ingredient of a value was always written *earlier in the run* than the value
+it fed, so the dependency chain is a sub-sequence of the timeline you already
+have. One cursor, no new axis.
+
+- A value made from **two ingredients** shows both as colored chips —
+  pressing "earlier cause" visits both (most recent first); nothing is ever
+  silently skipped. Click a chip to **follow** just that ingredient (the
+  breadcrumb shows `key ▸ via ingredient · show all`).
+- Every stop shows the world **as it was at that moment** — the state panel
+  time-travels with the walk for free.
+- **Honest absence**: a value nobody wrote gets a truthful card ("never
+  written in this run — it arrived with the run's inputs"), and a value not
+  written *yet* at the cursor's moment says exactly that, naming where its
+  first write happens. Reads-off runs say "unknowable, not absent".
+- **[Copy story]** emits the same text an LLM backtrack tool returns — the
+  human's board and the agent's answer are one artifact.
+- Tracing lives on the root rail: drilling into a subflow exits it honestly.
+
 ### Panel Labels
 
 Customize the text on collapsible pill buttons. Semantic keys — not tied to position:

package/dist/flowchart.cjs

@@ -2697,6 +2697,7 @@ function TracedFlow({
   nodeTypes: userNodeTypes,
   edgeTypes: userEdgeTypes,
   coActiveStageIds,
+  sliceCone,
   children,
   className,
   style
@@ -2798,6 +2799,38 @@ function TracedFlow({
     ),
     [positioned.edges, slice, colors]
   );
+  const [coneRevealed, setConeRevealed] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    if (!sliceCone) return;
+    setConeRevealed(false);
+    const raf = requestAnimationFrame(() => setConeRevealed(true));
+    return () => cancelAnimationFrame(raf);
+  }, [sliceCone]);
+  const conedNodes = (0, import_react18.useMemo)(() => {
+    if (!sliceCone || sliceCone.size === 0) return reactFlowNodes;
+    return reactFlowNodes.map((n) => {
+      const depth = sliceCone.get(n.id);
+      if (depth === void 0) {
+        return { ...n, style: { ...n.style, opacity: 0.22, transition: "opacity 260ms ease" } };
+      }
+      return {
+        ...n,
+        style: {
+          ...n.style,
+          opacity: coneRevealed ? 1 : 0.22,
+          transition: "opacity 320ms ease",
+          transitionDelay: `${depth * 90}ms`
+        }
+      };
+    });
+  }, [reactFlowNodes, sliceCone, coneRevealed]);
+  const conedEdges = (0, import_react18.useMemo)(() => {
+    if (!sliceCone || sliceCone.size === 0) return reactFlowEdges;
+    return reactFlowEdges.map((e) => {
+      const inCone = sliceCone.has(e.source) && sliceCone.has(e.target);
+      return inCone ? e : { ...e, style: { ...e.style, opacity: 0.12, transition: "opacity 260ms ease" } };
+    });
+  }, [reactFlowEdges, sliceCone]);
   const handleNodeClick = (0, import_react18.useCallback)(
     (_, node) => {
       const data = node.data ?? {};
@@ -2839,8 +2872,8 @@ function TracedFlow({
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           import_react19.ReactFlow,
           {
-            nodes: reactFlowNodes,
-            edges: reactFlowEdges,
+            nodes: conedNodes,
+            edges: conedEdges,
             nodeTypes: mergedNodeTypes,
             edgeTypes: mergedEdgeTypes,
             onNodeClick: handleNodeClick,