@industry-theme/principal-view-panels 0.12.92 → 0.12.94

package/dist/panels.bundle.js

@@ -181946,6 +181946,304 @@ const GraphRenderer = forwardRef((props, ref) => {
   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, initialViewport, elkLayout, scenarioEdges, showSequenceLabels }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
+function extractNamespace(name2, strategy) {
+  if (typeof strategy === "function") {
+    return strategy(name2);
+  }
+  const segments = name2.split(".");
+  if (segments.length <= 1) {
+    return name2;
+  }
+  if (strategy === "first") {
+    return segments[0];
+  }
+  if (strategy === "all-but-last") {
+    return segments.slice(0, -1).join(".");
+  }
+  if (typeof strategy === "number") {
+    return segments.slice(0, strategy).join(".");
+  }
+  return segments.slice(0, -1).join(".");
+}
+function getParentNamespace(namespace2) {
+  const segments = namespace2.split(".");
+  if (segments.length <= 1) {
+    return void 0;
+  }
+  return segments.slice(0, -1).join(".");
+}
+function useSequenceLayout(events, sequenceEdges, options = {}) {
+  const { namespaceStrategy = "all-but-last", laneWidth = 200, laneGap = 50, eventSpacing = 80, headerHeight = 60, collapsedNamespaces = [], nodeWidth = 14, nodeHeight = 14 } = options;
+  return useMemo(() => {
+    if (events.length === 0) {
+      return {
+        nodes: [],
+        edges: [],
+        swimlanes: [],
+        totalWidth: 0,
+        totalHeight: 0
+      };
+    }
+    const eventNamespaces = /* @__PURE__ */ new Map();
+    const namespaceEvents = /* @__PURE__ */ new Map();
+    for (const event of events) {
+      const namespace2 = extractNamespace(event.name, namespaceStrategy);
+      eventNamespaces.set(event.id, namespace2);
+      if (!namespaceEvents.has(namespace2)) {
+        namespaceEvents.set(namespace2, []);
+      }
+      namespaceEvents.get(namespace2).push(event.id);
+    }
+    const allNamespaces = Array.from(namespaceEvents.keys()).sort();
+    const collapsedSet = new Set(collapsedNamespaces);
+    const visibleNamespaces = [];
+    const namespaceToVisible = /* @__PURE__ */ new Map();
+    for (const ns of allNamespaces) {
+      let visibleNs = ns;
+      let current = ns;
+      while (current) {
+        if (collapsedSet.has(current)) {
+          visibleNs = current;
+        }
+        current = getParentNamespace(current);
+      }
+      namespaceToVisible.set(ns, visibleNs);
+      if (!visibleNamespaces.includes(visibleNs)) {
+        visibleNamespaces.push(visibleNs);
+      }
+    }
+    const swimlanes = visibleNamespaces.map((namespace2, index2) => {
+      const x = index2 * (laneWidth + laneGap) + laneWidth / 2;
+      const eventIds = [];
+      for (const [eventId, eventNs] of eventNamespaces) {
+        if (namespaceToVisible.get(eventNs) === namespace2) {
+          eventIds.push(eventId);
+        }
+      }
+      const children2 = allNamespaces.filter((ns) => getParentNamespace(ns) === namespace2);
+      return {
+        namespace: namespace2,
+        label: namespace2.split(".").pop() || namespace2,
+        x,
+        parentNamespace: getParentNamespace(namespace2),
+        isCollapsed: collapsedSet.has(namespace2),
+        children: children2,
+        eventIds
+      };
+    });
+    const swimlaneByNamespace = /* @__PURE__ */ new Map();
+    for (const lane of swimlanes) {
+      swimlaneByNamespace.set(lane.namespace, lane);
+    }
+    const nodes = [];
+    const eventById = new Map(events.map((e) => [e.id, e]));
+    for (let i = 0; i < events.length; i++) {
+      const event = events[i];
+      const originalNamespace = eventNamespaces.get(event.id);
+      const visibleNamespace = namespaceToVisible.get(originalNamespace);
+      const lane = swimlaneByNamespace.get(visibleNamespace);
+      const y = headerHeight + i * eventSpacing;
+      nodes.push({
+        id: event.id,
+        type: "sequenceMarker",
+        position: {
+          x: lane.x - nodeWidth / 2,
+          y: y - nodeHeight / 2
+          // Center vertically on the time layer
+        },
+        data: {
+          label: event.label || event.name.split(".").pop() || event.name,
+          fullName: event.name,
+          namespace: originalNamespace,
+          visibleNamespace,
+          timeLayer: i,
+          ...event.data
+        },
+        style: {
+          width: nodeWidth,
+          height: nodeHeight
+        }
+      });
+    }
+    const edges = sequenceEdges.map((edge) => {
+      const sourceNamespace = eventNamespaces.get(edge.fromEvent);
+      const targetNamespace = eventNamespaces.get(edge.toEvent);
+      const crossesLanes = namespaceToVisible.get(sourceNamespace) !== namespaceToVisible.get(targetNamespace);
+      const targetEvent = eventById.get(edge.toEvent);
+      const edgeLabel = edge.label || (targetEvent == null ? void 0 : targetEvent.label) || (targetEvent == null ? void 0 : targetEvent.name.split(".").pop()) || "";
+      return {
+        id: edge.id,
+        source: edge.fromEvent,
+        target: edge.toEvent,
+        type: "sequenceArrow",
+        label: edgeLabel,
+        labelStyle: { fontSize: 12, fontWeight: 500 },
+        labelBgStyle: { fill: "white", fillOpacity: 0.8 },
+        data: {
+          crossesLanes,
+          sourceNamespace,
+          targetNamespace
+        }
+      };
+    });
+    const totalWidth = swimlanes.length * (laneWidth + laneGap) - laneGap + laneWidth;
+    const totalHeight = headerHeight + events.length * eventSpacing + eventSpacing;
+    return {
+      nodes,
+      edges,
+      swimlanes,
+      totalWidth,
+      totalHeight
+    };
+  }, [
+    events,
+    sequenceEdges,
+    namespaceStrategy,
+    laneWidth,
+    laneGap,
+    eventSpacing,
+    headerHeight,
+    nodeWidth,
+    nodeHeight,
+    collapsedNamespaces
+  ]);
+}
+function SequenceMarkerNode({ data }) {
+  return jsxs("div", { style: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "var(--sequence-marker-bg, #6495ED)",
+    borderRadius: "50%",
+    border: "2px solid var(--sequence-marker-border, #4169E1)",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+  }, title: data.fullName, children: [jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }), jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })] });
+}
+function SequenceArrowEdge({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, data }) {
+  const isSameLane = !(data == null ? void 0 : data.crossesLanes);
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: isSameLane ? 0.5 : 0.25
+  });
+  return jsxs(Fragment, { children: [jsx(BaseEdge, { id: id2, path: edgePath, style: {
+    stroke: "var(--sequence-arrow-color, #4169E1)",
+    strokeWidth: 2
+  }, markerEnd: "url(#sequence-arrow)" }), label && jsx(EdgeLabelRenderer, { children: jsx("div", { style: {
+    position: "absolute",
+    transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+    background: "var(--sequence-label-bg, rgba(255, 255, 255, 0.95))",
+    padding: "2px 8px",
+    borderRadius: 4,
+    fontSize: 12,
+    fontWeight: 500,
+    color: "var(--sequence-label-text, #333)",
+    border: "1px solid var(--sequence-label-border, #ddd)",
+    pointerEvents: "all",
+    whiteSpace: "nowrap"
+  }, className: "nodrag nopan", children: label }) })] });
+}
+const defaultSequenceNodeTypes = {
+  sequenceMarker: SequenceMarkerNode
+};
+const defaultSequenceEdgeTypes = {
+  sequenceArrow: SequenceArrowEdge
+};
+function SwimlaneLayer({ swimlanes, laneWidth, headerHeight, totalHeight, onToggleCollapse }) {
+  const { x, y, zoom: zoom2 } = useViewport();
+  const extendedHeight = Math.max(totalHeight, 2e3);
+  return jsxs("div", { style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    transformOrigin: "0 0",
+    transform: `translate(${x}px, ${y}px) scale(${zoom2})`,
+    pointerEvents: "none",
+    zIndex: -1
+  }, children: [swimlanes.map((lane, index2) => {
+    const isEven = index2 % 2 === 0;
+    return jsx("div", { style: {
+      position: "absolute",
+      left: lane.x - laneWidth / 2,
+      top: 0,
+      width: laneWidth,
+      height: extendedHeight,
+      backgroundColor: isEven ? "var(--sequence-lane-even, rgba(100, 149, 237, 0.08))" : "var(--sequence-lane-odd, rgba(100, 149, 237, 0.03))",
+      borderRight: "1px solid var(--sequence-lane-border, rgba(100, 149, 237, 0.2))"
+    } }, `bg-${lane.namespace}`);
+  }), swimlanes.map((lane) => {
+    const hasChildren = lane.children.length > 0;
+    return jsxs("div", { style: {
+      position: "absolute",
+      left: lane.x - laneWidth / 2,
+      top: 0,
+      width: laneWidth,
+      height: headerHeight,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "var(--sequence-header-bg, rgba(100, 149, 237, 0.15))",
+      borderBottom: "2px solid var(--sequence-header-border, rgba(100, 149, 237, 0.4))",
+      fontWeight: 600,
+      fontSize: 13,
+      color: "var(--sequence-header-text, #333)",
+      pointerEvents: "auto",
+      cursor: hasChildren ? "pointer" : "default",
+      userSelect: "none"
+    }, onClick: () => hasChildren && (onToggleCollapse == null ? void 0 : onToggleCollapse(lane.namespace)), children: [hasChildren && jsx("span", { style: { marginRight: 6, fontSize: 10 }, children: lane.isCollapsed ? "▶" : "▼" }), jsx("span", { children: lane.label }), lane.eventIds.length > 1 && jsxs("span", { style: { marginLeft: 6, fontSize: 11, opacity: 0.6 }, children: ["(", lane.eventIds.length, ")"] })] }, `header-${lane.namespace}`);
+  }), swimlanes.map((lane) => jsx("div", { style: {
+    position: "absolute",
+    left: lane.x,
+    top: headerHeight,
+    width: 2,
+    height: extendedHeight - headerHeight,
+    backgroundColor: "var(--sequence-lifeline, rgba(100, 149, 237, 0.3))",
+    transform: "translateX(-1px)"
+  } }, `lifeline-${lane.namespace}`))] });
+}
+function SequenceDiagramInner({
+  events,
+  edges: sequenceEdges,
+  layoutOptions = {},
+  nodeTypes: customNodeTypes,
+  edgeTypes: customEdgeTypes,
+  onToggleCollapse,
+  onNodeClick,
+  showControls = true,
+  showBackground = false
+  // Default to false since swimlanes provide visual structure
+}) {
+  const { laneWidth = 200, headerHeight = 60 } = layoutOptions;
+  const nodeTypes2 = useMemo(() => ({ ...defaultSequenceNodeTypes, ...customNodeTypes }), [customNodeTypes]);
+  const edgeTypes2 = useMemo(() => ({ ...defaultSequenceEdgeTypes, ...customEdgeTypes }), [customEdgeTypes]);
+  const { nodes, edges, swimlanes, totalHeight } = useSequenceLayout(events, sequenceEdges, layoutOptions);
+  const handleNodeClick2 = useCallback((_event, node2) => {
+    onNodeClick == null ? void 0 : onNodeClick(node2.id, _event);
+  }, [onNodeClick]);
+  return jsxs(index$2, { nodes, edges, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick: handleNodeClick2, fitView: true, fitViewOptions: {
+    padding: 0.2,
+    minZoom: 0.5,
+    maxZoom: 1.5
+  }, minZoom: 0.1, maxZoom: 2, nodesDraggable: false, nodesConnectable: false, elementsSelectable: true, panOnScroll: true, zoomOnScroll: true, children: [jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: jsx("defs", { children: jsx("marker", { id: "sequence-arrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "var(--sequence-arrow-color, #4169E1)" }) }) }) }), showBackground && jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }), showControls && jsx(Controls, {}), jsx(SwimlaneLayer, { swimlanes, laneWidth, headerHeight, totalHeight, onToggleCollapse }), swimlanes.some((s2) => s2.children.length > 0) && jsx(Panel$1, { position: "top-right", children: jsx("div", { style: {
+    background: "var(--sequence-panel-bg, rgba(255, 255, 255, 0.95))",
+    border: "1px solid var(--sequence-panel-border, #ddd)",
+    borderRadius: 4,
+    padding: "6px 10px",
+    fontSize: 11,
+    color: "#666"
+  }, children: "Click lane headers to expand/collapse" }) })] });
+}
+function SequenceDiagramRenderer(props) {
+  const { className, width = "100%", height = 600 } = props;
+  return jsx("div", { className, style: {
+    width,
+    height,
+    position: "relative"
+  }, children: jsx(ReactFlowProvider, { children: jsx(SequenceDiagramInner, { ...props }) }) });
+}
 const DEFAULT_NODE_WIDTH = 200;
 const DEFAULT_NODE_HEIGHT = 100;
 const GROUP_PADDING = 40;
@@ -206082,14 +206380,190 @@ class EmptyDataProvider {
     };
   }
 }
+function convertWorkflowToSequence(scenario) {
+  const templateEvents = scenario.template.events ?? {};
+  const eventNames = Object.keys(templateEvents);
+  const events = eventNames.map((name2, index2) => ({
+    id: `event-${index2}`,
+    name: name2,
+    label: name2.split(".").pop() ?? name2
+  }));
+  const edges = [];
+  for (let i = 0; i < events.length - 1; i++) {
+    edges.push({
+      id: `edge-${i}`,
+      fromEvent: events[i].id,
+      toEvent: events[i + 1].id
+    });
+  }
+  return { events, edges };
+}
+function SequenceDiagramModal({
+  sequence,
+  onClose,
+  onOpenCanvas,
+  theme: theme2
+}) {
+  const { events, edges } = useMemo(
+    () => convertWorkflowToSequence(sequence.scenario),
+    [sequence.scenario]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            backgroundColor: theme2.colors.background,
+            borderRadius: theme2.radii[2],
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
+            width: "90%",
+            maxWidth: 1200,
+            height: "80%",
+            maxHeight: 800,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: `${theme2.space[3]} ${theme2.space[4]}`,
+                  borderBottom: `1px solid ${theme2.colors.border}`,
+                  backgroundColor: theme2.colors.surface
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: theme2.fontSizes[4],
+                          fontWeight: 600,
+                          color: theme2.colors.text
+                        },
+                        children: sequence.workflow.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        style: {
+                          margin: `${theme2.space[1]} 0 0`,
+                          fontSize: theme2.fontSizes[1],
+                          color: theme2.colors.textSecondary
+                        },
+                        children: sequence.scenario.description
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: theme2.space[2] }, children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: onOpenCanvas,
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: theme2.space[1],
+                          padding: `${theme2.space[2]} ${theme2.space[3]}`,
+                          backgroundColor: theme2.colors.primary,
+                          color: theme2.colors.background,
+                          border: "none",
+                          borderRadius: theme2.radii[1],
+                          fontSize: theme2.fontSizes[1],
+                          fontWeight: 500,
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                          "Open in Canvas"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: 32,
+                          height: 32,
+                          backgroundColor: "transparent",
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[1],
+                          cursor: "pointer",
+                          color: theme2.colors.textSecondary
+                        },
+                        children: /* @__PURE__ */ jsx(X$2, { size: 18 })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0 }, children: events.length > 0 ? /* @__PURE__ */ jsx(
+              SequenceDiagramRenderer,
+              {
+                events,
+                edges,
+                height: "100%",
+                layoutOptions: {
+                  laneWidth: 220,
+                  laneGap: 60,
+                  eventSpacing: 100,
+                  namespaceStrategy: "all-but-last"
+                },
+                showControls: true
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: theme2.colors.textSecondary
+                },
+                children: "No events defined for this scenario"
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
 const DashboardPanel = ({
-  context: _context,
+  context: context2,
   actions,
   events,
   selectedDashboard,
   dataProvider,
-  storyboards,
-  workflows,
+  storyboards: storyboardsProp,
+  workflows: workflowsProp,
   onSourceClick,
   onMetricClick
 }) => {
@@ -206100,10 +206574,29 @@ const DashboardPanel = ({
   const [error, setError] = useState(null);
   const [timeRange, setTimeRange] = useState({ preset: "last_1h" });
   const [refreshInterval, setRefreshInterval] = useState("off");
+  const [selectedSequence, setSelectedSequence] = useState(null);
   gt("dashboard", events, () => {
     var _a2;
     return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
   });
+  const typedContext = context2;
+  const fileTreeSlice = typedContext == null ? void 0 : typedContext.fileTree;
+  const { storyboards: discoveredStoryboards, workflows: discoveredWorkflows } = useCanvasWorkflowData({
+    context: fileTreeSlice ? { fileTree: fileTreeSlice } : {
+      fileTree: {
+        data: null,
+        loading: false,
+        error: null,
+        scope: "repository",
+        name: "fileTree",
+        refresh: async () => {
+        }
+      }
+    },
+    actions
+  });
+  const storyboards = storyboardsProp ?? discoveredStoryboards;
+  const workflows = workflowsProp ?? discoveredWorkflows;
   useEffect(() => {
     if (!selectedDashboard) {
       setDashboard(null);
@@ -206136,7 +206629,6 @@ const DashboardPanel = ({
         onSourceClick(source2);
         return;
       }
-      if (!(events == null ? void 0 : events.emit)) return;
       const matchingStoryboard = storyboards == null ? void 0 : storyboards.find(
         (sb) => sb.basename === source2.storyboard || sb.name === source2.storyboard
       );
@@ -206148,6 +206640,44 @@ const DashboardPanel = ({
           const fullWorkflow = workflows == null ? void 0 : workflows.find(
             (wf) => wf.file.path === matchingWorkflowMeta.path
           );
+          if (fullWorkflow == null ? void 0 : fullWorkflow.template) {
+            const scenario = fullWorkflow.template.scenarios.find(
+              (s2) => {
+                var _a2;
+                return s2.id === source2.event || ((_a2 = s2.template.events) == null ? void 0 : _a2[source2.event ?? ""]);
+              }
+            ) ?? fullWorkflow.template.scenarios[0];
+            if (scenario) {
+              setSelectedSequence({
+                storyboard: matchingStoryboard,
+                workflowMeta: matchingWorkflowMeta,
+                workflow: fullWorkflow.template,
+                scenario,
+                source: source2
+              });
+              return;
+            }
+          }
+          if (events == null ? void 0 : events.emit) {
+            events.emit({
+              type: "custom",
+              source: "dashboard-panel",
+              timestamp: Date.now(),
+              payload: {
+                action: "openCanvas",
+                canvasId: matchingStoryboard.canvas.id,
+                canvas: matchingStoryboard.canvas,
+                workflowId: matchingWorkflowMeta.id,
+                workflow: fullWorkflow == null ? void 0 : fullWorkflow.template,
+                openMode: "detail",
+                sourceNodes: source2.nodes,
+                sourceEvent: source2.event
+              }
+            });
+          }
+          return;
+        }
+        if (events == null ? void 0 : events.emit) {
           events.emit({
             type: "custom",
             source: "dashboard-panel",
@@ -206156,43 +206686,48 @@ const DashboardPanel = ({
               action: "openCanvas",
               canvasId: matchingStoryboard.canvas.id,
               canvas: matchingStoryboard.canvas,
-              workflowId: matchingWorkflowMeta.id,
-              workflow: fullWorkflow == null ? void 0 : fullWorkflow.template,
-              openMode: "detail",
-              // Include source info for potential node/event highlighting
-              sourceNodes: source2.nodes,
-              sourceEvent: source2.event
+              openMode: "editor"
             }
           });
-          return;
         }
+        return;
+      }
+      if (events == null ? void 0 : events.emit) {
         events.emit({
-          type: "custom",
+          type: "dashboard:source-click",
           source: "dashboard-panel",
           timestamp: Date.now(),
           payload: {
-            action: "openCanvas",
-            canvasId: matchingStoryboard.canvas.id,
-            canvas: matchingStoryboard.canvas,
-            openMode: "editor"
+            source: source2,
+            storyboard: source2.storyboard,
+            workflow: source2.workflow,
+            nodes: source2.nodes
           }
         });
-        return;
       }
-      events.emit({
-        type: "dashboard:source-click",
-        source: "dashboard-panel",
-        timestamp: Date.now(),
-        payload: {
-          source: source2,
-          storyboard: source2.storyboard,
-          workflow: source2.workflow,
-          nodes: source2.nodes
-        }
-      });
     },
     [onSourceClick, events, storyboards, workflows]
   );
+  const handleOpenCanvas = useCallback(() => {
+    if (!selectedSequence || !(events == null ? void 0 : events.emit)) return;
+    const { storyboard, workflowMeta, workflow, source: source2 } = selectedSequence;
+    events.emit({
+      type: "custom",
+      source: "dashboard-panel",
+      timestamp: Date.now(),
+      payload: {
+        action: "openCanvas",
+        canvasId: storyboard.canvas.id,
+        canvas: storyboard.canvas,
+        workflowId: workflowMeta.id,
+        workflow,
+        openMode: "detail",
+        sourceNodes: source2.nodes,
+        sourceEvent: source2.event
+      }
+    });
+    setSelectedSequence(null);
+  }, [selectedSequence, events]);
   const handleMetricClick = useCallback(
     (metricId) => {
       if (onMetricClick) {
@@ -206291,7 +206826,7 @@ const DashboardPanel = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: panelRef,
@@ -206302,19 +206837,30 @@ const DashboardPanel = ({
         overflow: "auto",
         outline: "none"
       },
-      children: /* @__PURE__ */ jsx(
-        DashboardRenderer,
-        {
-          dashboard,
-          dataProvider: effectiveDataProvider,
-          timeRange,
-          onTimeRangeChange: setTimeRange,
-          refreshInterval,
-          onRefreshIntervalChange: setRefreshInterval,
-          onMetricClick: handleMetricClick,
-          onSourceClick: handleSourceClick
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          DashboardRenderer,
+          {
+            dashboard,
+            dataProvider: effectiveDataProvider,
+            timeRange,
+            onTimeRangeChange: setTimeRange,
+            refreshInterval,
+            onRefreshIntervalChange: setRefreshInterval,
+            onMetricClick: handleMetricClick,
+            onSourceClick: handleSourceClick
+          }
+        ),
+        selectedSequence && /* @__PURE__ */ jsx(
+          SequenceDiagramModal,
+          {
+            sequence: selectedSequence,
+            onClose: () => setSelectedSequence(null),
+            onOpenCanvas: handleOpenCanvas,
+            theme: theme2
+          }
+        )
+      ]
     }
   );
 };