@industry-theme/principal-view-panels 0.12.45 → 0.12.47

package/dist/panels/TraceListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,UAAU,CAAC;AAkB/E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqjD7D,CAAC"}
+{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,UAAU,CAAC;AAmB/E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAujD7D,CAAC"}

package/dist/panels.bundle.js

@@ -86441,6 +86441,11 @@ const NodeTooltip = ({ description, otel, sources, references, visible, nodeRef
   }
   return renderTooltipContent();
 };
+const GraphEditContext = createContext({});
+const GraphEditProvider = ({ children: children2, value }) => {
+  return jsx(GraphEditContext.Provider, { value, children: children2 });
+};
+const useGraphEdit = () => useContext(GraphEditContext);
 function hexToLightColor(hexColor, lightness = 0.88) {
   const hex2 = hexColor.replace("#", "");
   const r2 = parseInt(hex2.substring(0, 2), 16);
@@ -86455,6 +86460,8 @@ function hexToLightColor(hexColor, lightness = 0.88) {
 const CustomNode = ({ data, selected: selected2, dragging }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const { theme: theme2 } = useTheme();
+  const { onNodeResizeEnd } = useGraphEdit();
+  const nodeId = useNodeId();
   const [isHovered, setIsHovered] = useState(false);
   const nodeRef = useRef(null);
   const nodeProps = data;
@@ -86475,6 +86482,14 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     // Default to not hidden
   } = nodeProps;
   const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
+  const handleResizeEnd = useCallback((_event, params) => {
+    if (nodeId && onNodeResizeEnd && params.width && params.height) {
+      onNodeResizeEnd(nodeId, {
+        width: Math.round(params.width),
+        height: Math.round(params.height)
+      });
+    }
+  }, [nodeId, onNodeResizeEnd]);
   console.log("[CustomNode] Node data:", {
     name: nodeProps.name,
     nodeDataKeys: nodeData ? Object.keys(nodeData).join(", ") : "undefined",
@@ -86695,12 +86710,16 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
   const eventData = nodeData == null ? void 0 : nodeData.event;
   const eventName = eventData == null ? void 0 : eventData.name;
   const showEventName = eventName && eventName !== displayName;
+  const renderWithDotBreaks = (text2) => {
+    const parts = text2.split(".");
+    return parts.map((part, i) => jsxs("span", { children: [part, i < parts.length - 1 && jsxs(Fragment, { children: [".", jsx("wbr", {})] })] }, i));
+  };
   const renderNameWithEvent = (centered = true) => jsxs("div", { style: { textAlign: centered ? "center" : "left", wordBreak: "break-word" }, children: [jsx("div", { children: displayName }), showEventName && jsx("div", { style: {
     fontSize: theme2.fontSizes[0] * 0.75,
     color: "rgba(0, 0, 0, 0.5)",
     marginTop: "2px",
     fontFamily: theme2.fonts.monospace
-  }, children: eventName })] });
+  }, children: renderWithDotBreaks(eventName) })] });
   const icon = nodeData.icon || state && (((_e2 = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _e2.icon) || ((_g = (_f = typeDefinition.states) == null ? void 0 : _f[state]) == null ? void 0 : _g.icon)) || typeDefinition.icon;
   const getAnimationClass = () => {
     switch (animationType) {
@@ -86884,7 +86903,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     }
     return offsetStyle;
   };
-  return jsxs(Fragment, { children: [editable && jsx(NodeResizer, { color: strokeColor, isVisible: selected2, minWidth, minHeight, keepAspectRatio, handleStyle: {
+  return jsxs(Fragment, { children: [editable && jsx(NodeResizer, { color: strokeColor, isVisible: selected2, minWidth, minHeight, keepAspectRatio, onResizeEnd: handleResizeEnd, handleStyle: {
     width: 8,
     height: 8,
     borderRadius: 2,
@@ -87298,6 +87317,56 @@ function convertToXYFlowEdges(edges, configuration, violations = []) {
     };
   });
 }
+const MAX_HISTORY_SIZE = 50;
+function useUndoRedo() {
+  const undoStackRef = useRef([]);
+  const redoStackRef = useRef([]);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const updateCanStates = useCallback(() => {
+    setCanUndo(undoStackRef.current.length > 0);
+    setCanRedo(redoStackRef.current.length > 0);
+  }, []);
+  const pushHistory = useCallback((entries) => {
+    if (entries.length === 0)
+      return;
+    undoStackRef.current.push(entries);
+    if (undoStackRef.current.length > MAX_HISTORY_SIZE) {
+      undoStackRef.current.shift();
+    }
+    redoStackRef.current = [];
+    updateCanStates();
+  }, [updateCanStates]);
+  const undo = useCallback(() => {
+    const batch = undoStackRef.current.pop();
+    if (!batch)
+      return null;
+    redoStackRef.current.push(batch);
+    updateCanStates();
+    return batch;
+  }, [updateCanStates]);
+  const redo = useCallback(() => {
+    const batch = redoStackRef.current.pop();
+    if (!batch)
+      return null;
+    undoStackRef.current.push(batch);
+    updateCanStates();
+    return batch;
+  }, [updateCanStates]);
+  const clearHistory = useCallback(() => {
+    undoStackRef.current = [];
+    redoStackRef.current = [];
+    updateCanStates();
+  }, [updateCanStates]);
+  return {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    pushHistory,
+    clearHistory
+  };
+}
 const TooltipPortalContext = createContext(null);
 const nodeTypes = { custom: CustomNode };
 const edgeTypes = { custom: CustomEdge };
@@ -87347,7 +87416,7 @@ const CenterIndicator = ({ color: color2 }) => {
     zIndex: 5
   }, children: [jsx("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("circle", { cx: screenX, cy: screenY, r: 3, fill: color2, opacity: 0.7 })] });
 };
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy }) => {
   const { fitView: fitView2, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
@@ -87418,6 +87487,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       onEditStateChange == null ? void 0 : onEditStateChange(editStateRef.current);
       onPendingChangesChange == null ? void 0 : onPendingChangesChange(false);
       setAnimationState({ nodeAnimations: {}, edgeAnimations: {} });
+      clearHistory();
     }
   }, [propNodes, propEdges, editStateRef, onEditStateChange, onPendingChangesChange]);
   const propNodesRef = useRef(propNodes);
@@ -87431,6 +87501,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   }, [propNodes, draggableNodeIds]);
   const nodes = localNodes;
   const edges = editable ? localEdges : propEdges;
+  const xyflowNodesRef = useRef([]);
+  const dragStartPositionsRef = useRef(/* @__PURE__ */ new Map());
   const checkHasChanges = useCallback((state) => {
     return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
   }, []);
@@ -87441,6 +87513,28 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     onEditStateChange == null ? void 0 : onEditStateChange(newState);
     onPendingChangesChange == null ? void 0 : onPendingChangesChange(hasChanges);
   }, [editStateRef, onEditStateChange, onPendingChangesChange, checkHasChanges]);
+  const handleNodeResizeEnd = useCallback((nodeId, dimensions) => {
+    if (!editable)
+      return;
+    const currentNode = xyflowNodesRef.current.find((n) => n.id === nodeId);
+    const beforeDimensions = currentNode ? { width: currentNode.width ?? 0, height: currentNode.height ?? 0 } : { width: 0, height: 0 };
+    pushHistory([
+      {
+        type: "dimension",
+        nodeId,
+        before: beforeDimensions,
+        after: dimensions
+      }
+    ]);
+    updateEditState((prev) => {
+      const newDimensions = new Map(prev.dimensionChanges);
+      newDimensions.set(nodeId, dimensions);
+      return { ...prev, dimensionChanges: newDimensions };
+    });
+  }, [editable, updateEditState, pushHistory]);
+  const graphEditContextValue = useMemo(() => ({
+    onNodeResizeEnd: handleNodeResizeEnd
+  }), [handleNodeResizeEnd]);
   const detectAlignmentGuides = useCallback((draggingNodeId, nodes2) => {
     const threshold = 5;
     const guides = [];
@@ -87633,18 +87727,25 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
   }, [editable]);
   const createEdge = useCallback((from, to, type2, sourceHandle, targetHandle) => {
     const edgeId = `${from}-${to}-${type2}-${Date.now()}`;
+    const now2 = Date.now();
     const newEdge = {
       id: edgeId,
       type: type2,
       from,
       to,
       data: {},
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
+      createdAt: now2,
+      updatedAt: now2,
       sourceHandle,
       targetHandle
     };
     setLocalEdges((prev) => [...prev, newEdge]);
+    pushHistory([
+      {
+        type: "edgeCreate",
+        edge: newEdge
+      }
+    ]);
     updateEditState((prev) => ({
       ...prev,
       createdEdges: [
@@ -87652,7 +87753,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         { id: edgeId, from, to, type: type2, sourceHandle, targetHandle }
       ]
     }));
-  }, [updateEditState]);
+  }, [updateEditState, pushHistory]);
   const handleConnect = useCallback((connection) => {
     if (!editable || !connection.source || !connection.target)
       return;
@@ -87918,6 +88019,9 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     return edges.map((e) => e.id).sort().join(",");
   }, [edges]);
   const [xyflowLocalNodes, setXyflowLocalNodes] = useState(xyflowNodesBase);
+  useEffect(() => {
+    xyflowNodesRef.current = xyflowLocalNodes;
+  }, [xyflowLocalNodes]);
   const prevBaseNodesKeyRef = useRef(baseNodesKey);
   useEffect(() => {
     if (prevBaseNodesKeyRef.current !== baseNodesKey) {
@@ -87979,6 +88083,128 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       onNodeDragStopProp(node2.id, node2.position);
     }
   }, [onNodeDragStopProp]);
+  const applyUndo = useCallback(() => {
+    const batch = undoFromStack();
+    if (!batch)
+      return;
+    for (const entry of batch.slice().reverse()) {
+      switch (entry.type) {
+        case "position":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, position: entry.before } : n));
+          updateEditState((prev) => {
+            const newPositions = new Map(prev.positionChanges);
+            newPositions.set(entry.nodeId, entry.before);
+            return { ...prev, positionChanges: newPositions };
+          });
+          break;
+        case "dimension":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, width: entry.before.width, height: entry.before.height } : n));
+          updateEditState((prev) => {
+            const newDimensions = new Map(prev.dimensionChanges);
+            newDimensions.set(entry.nodeId, entry.before);
+            return { ...prev, dimensionChanges: newDimensions };
+          });
+          break;
+        case "edgeCreate":
+          setLocalEdges((edges2) => edges2.filter((e) => e.id !== entry.edge.id));
+          updateEditState((prev) => ({
+            ...prev,
+            createdEdges: prev.createdEdges.filter((e) => e.id !== entry.edge.id)
+          }));
+          break;
+        case "edgeDelete":
+          setLocalEdges((edges2) => [...edges2, entry.edge]);
+          updateEditState((prev) => ({
+            ...prev,
+            deletedEdges: prev.deletedEdges.filter((e) => e.id !== entry.edge.id)
+          }));
+          break;
+      }
+    }
+  }, [undoFromStack, updateEditState]);
+  const applyRedo = useCallback(() => {
+    const batch = redoFromStack();
+    if (!batch)
+      return;
+    for (const entry of batch) {
+      switch (entry.type) {
+        case "position":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, position: entry.after } : n));
+          updateEditState((prev) => {
+            const newPositions = new Map(prev.positionChanges);
+            newPositions.set(entry.nodeId, entry.after);
+            return { ...prev, positionChanges: newPositions };
+          });
+          break;
+        case "dimension":
+          setXyflowLocalNodes((nodes2) => nodes2.map((n) => n.id === entry.nodeId ? { ...n, width: entry.after.width, height: entry.after.height } : n));
+          updateEditState((prev) => {
+            const newDimensions = new Map(prev.dimensionChanges);
+            newDimensions.set(entry.nodeId, entry.after);
+            return { ...prev, dimensionChanges: newDimensions };
+          });
+          break;
+        case "edgeCreate":
+          setLocalEdges((edges2) => [...edges2, entry.edge]);
+          updateEditState((prev) => ({
+            ...prev,
+            createdEdges: [
+              ...prev.createdEdges,
+              {
+                id: entry.edge.id,
+                from: entry.edge.from,
+                to: entry.edge.to,
+                type: entry.edge.type,
+                sourceHandle: entry.edge.sourceHandle,
+                targetHandle: entry.edge.targetHandle
+              }
+            ]
+          }));
+          break;
+        case "edgeDelete":
+          setLocalEdges((edges2) => edges2.filter((e) => e.id !== entry.edge.id));
+          updateEditState((prev) => ({
+            ...prev,
+            deletedEdges: [
+              ...prev.deletedEdges,
+              {
+                id: entry.edge.id,
+                from: entry.edge.from,
+                to: entry.edge.to,
+                type: entry.edge.type
+              }
+            ]
+          }));
+          break;
+      }
+    }
+  }, [redoFromStack, updateEditState]);
+  useEffect(() => {
+    if (!editable)
+      return;
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          applyRedo();
+        } else {
+          applyUndo();
+        }
+      }
+      if (e.ctrlKey && e.key === "y") {
+        e.preventDefault();
+        applyRedo();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [editable, applyUndo, applyRedo]);
+  useEffect(() => {
+    undoRedoFunctionsRef.current = {
+      applyUndo,
+      applyRedo
+    };
+  }, [applyUndo, applyRedo, undoRedoFunctionsRef]);
   const handleNodesChange = useCallback((changes) => {
     const hasDraggableNodes2 = draggableNodeIds && draggableNodeIds.size > 0;
     if (!editable && !hasDraggableNodes2)
@@ -88023,23 +88249,35 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }));
       });
     }
-    const positionChanges = changes.filter((change) => change.type === "position" && "position" in change && change.position !== void 0 && "dragging" in change && change.dragging === false);
-    const dimensionChanges = changes.filter((change) => change.type === "dimensions" && "dimensions" in change && change.dimensions !== void 0 && "resizing" in change && change.resizing === false);
-    if (dimensionChanges.length > 0) {
-      updateEditState((prev) => {
-        const newDimensions = new Map(prev.dimensionChanges);
-        for (const change of dimensionChanges) {
-          if (change.dimensions) {
-            newDimensions.set(change.id, {
-              width: Math.round(change.dimensions.width),
-              height: Math.round(change.dimensions.height)
-            });
-          }
+    const dragStartChanges = changes.filter((change) => change.type === "position" && "id" in change && "dragging" in change && change.dragging === true);
+    for (const change of dragStartChanges) {
+      if (!dragStartPositionsRef.current.has(change.id)) {
+        const currentNode = xyflowNodesRef.current.find((n) => n.id === change.id);
+        if (currentNode) {
+          dragStartPositionsRef.current.set(change.id, {
+            x: currentNode.position.x,
+            y: currentNode.position.y
+          });
         }
-        return { ...prev, dimensionChanges: newDimensions };
-      });
+      }
     }
+    const positionChanges = changes.filter((change) => change.type === "position" && "id" in change && "position" in change && change.position !== void 0 && "dragging" in change && change.dragging === false);
     if (positionChanges.length > 0) {
+      const historyEntries = [];
+      for (const change of positionChanges) {
+        const beforePos = dragStartPositionsRef.current.get(change.id) ?? { x: 0, y: 0 };
+        historyEntries.push({
+          type: "position",
+          nodeId: change.id,
+          before: beforePos,
+          after: {
+            x: Math.round(change.position.x),
+            y: Math.round(change.position.y)
+          }
+        });
+        dragStartPositionsRef.current.delete(change.id);
+      }
+      pushHistory(historyEntries);
       updateEditState((prev) => {
         const newPositions = new Map(prev.positionChanges);
         for (const change of positionChanges) {
@@ -88051,7 +88289,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         return { ...prev, positionChanges: newPositions };
       });
     }
-  }, [editable, updateEditState, selectedNodeIds, draggableNodeIds]);
+  }, [editable, updateEditState, selectedNodeIds, draggableNodeIds, pushHistory]);
   const xyflowEdgesBase = useMemo(() => {
     const converted = convertToXYFlowEdges(edges, configuration, violations);
     const filtered = converted.filter((edge) => {
@@ -88104,6 +88342,13 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       setXyflowLocalEdges(xyflowEdgesBase);
     }
   }, [baseEdgesKey, xyflowEdgesBase]);
+  useEffect(() => {
+    resetVisualStateRef.current = () => {
+      setXyflowLocalNodes(xyflowNodesBase);
+      setXyflowLocalEdges(xyflowEdgesBase);
+      onPendingChangesChange == null ? void 0 : onPendingChangesChange(false);
+    };
+  }, [xyflowNodesBase, xyflowEdgesBase, onPendingChangesChange]);
   const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesBase;
   const handleEdgesChange = useCallback((changes) => {
     if (!editable)
@@ -88159,7 +88404,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, 150);
     return () => clearTimeout(timeoutId);
   }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView2, fitViewDuration, getNodes, fitBounds]);
-  return jsxs(Fragment, { children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
+  return jsxs(GraphEditProvider, { value: graphEditContextValue, children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
     var _a;
     const nodeData = node2.data;
     return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme2.colors.secondary;
@@ -88329,6 +88574,9 @@ const GraphRenderer = forwardRef((props2, ref) => {
   }, []);
   const canvasData = useCanvasToLegacy(canvas, library);
   const editStateRef = useRef(createEmptyEditState());
+  const resetVisualStateRef = useRef(null);
+  const { canUndo: canUndoState, canRedo: canRedoState, undo: undoFromStack, redo: redoFromStack, pushHistory, clearHistory } = useUndoRedo();
+  const undoRedoFunctionsRef = useRef(null);
   useImperativeHandle(ref, () => ({
     getPendingChanges: () => {
       const state = editStateRef.current;
@@ -88358,13 +88606,26 @@ const GraphRenderer = forwardRef((props2, ref) => {
       };
     },
     resetEditState: () => {
+      var _a;
       editStateRef.current = createEmptyEditState();
+      (_a = resetVisualStateRef.current) == null ? void 0 : _a.call(resetVisualStateRef);
+      clearHistory();
     },
     hasUnsavedChanges: () => {
       const state = editStateRef.current;
       return state.positionChanges.size > 0 || state.dimensionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
+    },
+    canUndo: () => canUndoState,
+    canRedo: () => canRedoState,
+    undo: () => {
+      var _a;
+      return (_a = undoRedoFunctionsRef.current) == null ? void 0 : _a.applyUndo();
+    },
+    redo: () => {
+      var _a;
+      return (_a = undoRedoFunctionsRef.current) == null ? void 0 : _a.applyRedo();
     }
-  }), []);
+  }), [canUndoState, canRedoState, clearHistory]);
   if (!canvasData) {
     return jsx("div", { className, style: {
       width,
@@ -88378,7 +88639,7 @@ const GraphRenderer = forwardRef((props2, ref) => {
   }
   const { configuration, nodes, edges } = canvasData;
   const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy } = props2;
-  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy }) }) }) });
+  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
 const DEFAULT_NODE_WIDTH = 200;
@@ -102070,10 +102331,11 @@ const TraceListPanel = ({
   const filteredTraces = React__default.useMemo(() => {
     return traces.filter((trace2) => {
       const hasScenarioMatches = trace2.scenarioMatches && trace2.scenarioMatches.length > 0;
-      if (traceFilterMode === "known" && !hasScenarioMatches) {
+      const isKnown = isTraceMatched(trace2);
+      if (traceFilterMode === "known" && !isKnown) {
         return false;
       }
-      if (traceFilterMode === "unknown" && hasScenarioMatches) {
+      if (traceFilterMode === "unknown" && isKnown) {
         return false;
       }
       if (!hasScenarioMatches) {