@industry-theme/principal-view-panels 0.1.28 → 0.1.30

package/dist/panels.bundle.js

@@ -3996,6 +3996,89 @@ function requireUmd() {
   })(umd$1, umd$1.exports);
   return umd$1.exports;
 }
+function isErrorSeverity(severity) {
+  if (severity === void 0)
+    return false;
+  if (typeof severity === "string") {
+    return severity === "ERROR" || severity === "FATAL";
+  }
+  return severity >= 17;
+}
+function isWarnSeverity(severity) {
+  if (severity === void 0)
+    return false;
+  if (typeof severity === "string") {
+    return severity === "WARN";
+  }
+  return severity >= 13 && severity <= 16;
+}
+function isExactMatch(op) {
+  return typeof op === "object" && "exact" in op;
+}
+function isGlobMatch(op) {
+  return typeof op === "object" && "glob" in op;
+}
+function isRegexMatch(op) {
+  return typeof op === "object" && "regex" in op;
+}
+function isExistsMatch(op) {
+  return typeof op === "object" && "exists" in op;
+}
+function isOneOfMatch(op) {
+  return typeof op === "object" && "oneOf" in op;
+}
+function isStringShorthand(op) {
+  return typeof op === "string";
+}
+function normalizeOperator(op) {
+  if (typeof op === "string") {
+    return { exact: op };
+  }
+  return op;
+}
+const DEFAULT_AUDIT_CONFIG = {
+  maxOrphanSignatures: 1e3,
+  maxSamplesPerOrphan: 5
+};
+function parseDuration(duration) {
+  const match = duration.match(/^(\d+(?:\.\d+)?)(ms|s|m|h|d)$/);
+  if (!match)
+    return null;
+  const value = parseFloat(match[1]);
+  const unit = match[2];
+  const multipliers = {
+    ms: 1,
+    s: 1e3,
+    m: 60 * 1e3,
+    h: 60 * 60 * 1e3,
+    d: 24 * 60 * 60 * 1e3
+  };
+  return value * multipliers[unit];
+}
+function createResourceSignature(resource) {
+  const signatureKeys = [
+    "service.name",
+    "service.namespace",
+    "deployment.environment",
+    "db.system",
+    "db.name",
+    "k8s.deployment.name",
+    "k8s.namespace.name",
+    "messaging.system",
+    "messaging.destination.name"
+  ];
+  const signature = {};
+  for (const key of signatureKeys) {
+    if (resource[key] !== void 0) {
+      signature[key] = resource[key];
+    }
+  }
+  return signature;
+}
+function signatureToKey(resource) {
+  const entries = Object.entries(resource).filter(([, v]) => v !== void 0).sort(([a2], [b]) => a2.localeCompare(b));
+  return entries.map(([k, v]) => `${k}=${v}`).join("|");
+}
 class ValidationEngine {
   constructor(rules) {
     this.violationCount = 0;
@@ -5304,19 +5387,19 @@ class CanvasConverter {
    * Convert a single canvas node to React Flow node
    */
   static convertNode(node, canvas) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const pv = node.pv;
     const color = resolveCanvasColor(node.color);
     let nodeName;
     switch (node.type) {
       case "text":
-        nodeName = node.text.split("\n")[0].replace(/^#+ /, "").substring(0, 50);
+        nodeName = ((_a = node.text) == null ? void 0 : _a.split("\n")[0].replace(/^#+ /, "").substring(0, 50)) || "Text";
         break;
       case "file":
-        nodeName = node.file.split("/").pop() || node.file;
+        nodeName = ((_b = node.file) == null ? void 0 : _b.split("/").pop()) || node.file || "File";
         break;
       case "link":
-        nodeName = node.url;
+        nodeName = node.url || "Link";
         break;
       case "group":
         nodeName = node.label || "Group";
@@ -5328,7 +5411,7 @@ class CanvasConverter {
       canvasType: node.type,
       shape: (pv == null ? void 0 : pv.shape) || "rectangle",
       icon: pv == null ? void 0 : pv.icon,
-      color: ((_b = (_a = pv == null ? void 0 : pv.states) == null ? void 0 : _a.idle) == null ? void 0 : _b.color) || color,
+      color: ((_d = (_c = pv == null ? void 0 : pv.states) == null ? void 0 : _c.idle) == null ? void 0 : _d.color) || color,
       width: node.width,
       height: node.height
     };
@@ -5400,7 +5483,7 @@ class CanvasConverter {
    * Convert Extended Canvas to internal NodeState/EdgeState format
    */
   static canvasToGraph(canvas) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e2;
     const nodes = [];
     const edges = [];
     const now2 = Date.now();
@@ -5411,16 +5494,16 @@ class CanvasConverter {
         let nodeDescription;
         switch (node.type) {
           case "text": {
-            const lines = node.text.split("\n");
-            nodeName = lines[0].replace(/^#+ /, "").substring(0, 50);
+            const lines = ((_a = node.text) == null ? void 0 : _a.split("\n")) || [];
+            nodeName = ((_b = lines[0]) == null ? void 0 : _b.replace(/^#+ /, "").substring(0, 50)) || "Text";
             nodeDescription = lines.slice(1).join("\n").trim() || void 0;
             break;
           }
           case "file":
-            nodeName = node.file.split("/").pop() || node.file;
+            nodeName = ((_c = node.file) == null ? void 0 : _c.split("/").pop()) || node.file || "File";
             break;
           case "link":
-            nodeName = node.url;
+            nodeName = node.url || "Link";
             break;
           case "group":
             nodeName = node.label || "Group";
@@ -5429,12 +5512,14 @@ class CanvasConverter {
             nodeName = (pv == null ? void 0 : pv.nodeType) || node.id;
             break;
         }
+        const finalName = (pv == null ? void 0 : pv.name) || nodeName;
+        const finalDescription = (pv == null ? void 0 : pv.description) || nodeDescription;
         nodes.push({
           id: node.id,
           type: (pv == null ? void 0 : pv.nodeType) || node.type,
-          name: nodeName,
+          name: finalName,
           data: {
-            description: nodeDescription,
+            description: finalDescription,
             shape: (pv == null ? void 0 : pv.shape) || "rectangle",
             icon: pv == null ? void 0 : pv.icon,
             // Color priority: pv.fill > node.color
@@ -5446,6 +5531,10 @@ class CanvasConverter {
             sources: (pv == null ? void 0 : pv.sources) || [],
             actions: (pv == null ? void 0 : pv.actions) || [],
             states: pv == null ? void 0 : pv.states,
+            // OTEL metadata for visualization
+            otel: pv == null ? void 0 : pv.otel,
+            // Resource matching for log association
+            resourceMatch: pv == null ? void 0 : pv.resourceMatch,
             canvasType: node.type,
             ...node.type === "text" ? { text: node.text } : {},
             ...node.type === "file" ? { file: node.file } : {},
@@ -5465,7 +5554,7 @@ class CanvasConverter {
     if (canvas.edges) {
       for (const edge of canvas.edges) {
         const pv = edge.pv;
-        const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_b = (_a = canvas.pv) == null ? void 0 : _a.edgeTypes) == null ? void 0 : _b[pv.edgeType] : void 0;
+        const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_e2 = (_d = canvas.pv) == null ? void 0 : _d.edgeTypes) == null ? void 0 : _e2[pv.edgeType] : void 0;
         edges.push({
           id: edge.id,
           type: (pv == null ? void 0 : pv.edgeType) || "default",
@@ -5952,7 +6041,7 @@ class EventRecorderService {
   /**
    * Handle single log message
    */
-  handleLog(message, connectionId) {
+  handleLog(message, _connectionId) {
     if (!this.isRecording) {
       return null;
     }
@@ -5978,7 +6067,7 @@ class EventRecorderService {
   /**
    * Handle batch log message
    */
-  handleLogBatch(message, connectionId) {
+  handleLogBatch(message, _connectionId) {
     if (!this.isRecording) {
       return null;
     }
@@ -11371,6 +11460,7 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   CanvasConverter,
   ConfigurationLoader,
   ConfigurationValidator,
+  DEFAULT_AUDIT_CONFIG,
   DEFAULT_EXCLUDE_PATTERNS,
   DEFAULT_INCLUDE_PATTERNS,
   EventProcessor,
@@ -11390,28 +11480,40 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   builtinRules,
   connectionTypeReferences,
   createDefaultRulesEngine,
+  createResourceSignature,
   createRulesEngine,
   deadEndStates,
   formatConfigErrors,
   getConfigNameFromFilename: getConfigNameFromFilename$1,
   getDefaultConfig,
   hasPVExtension,
+  isErrorSeverity,
+  isExactMatch,
+  isExistsMatch,
   isFileNode,
+  isGlobMatch,
   isGroupNode,
   isLinkNode,
+  isOneOfMatch,
+  isRegexMatch,
   isRuleDisabled,
+  isStringShorthand,
   isTextNode,
+  isWarnSeverity,
   isYamlFile,
   libraryNodeTypeMatch,
   mergeConfigs,
   minimumNodeSources,
   noUnknownFields,
+  normalizeOperator,
   normalizeSeverity,
   orphanedEdgeTypes,
   orphanedNodeTypes,
+  parseDuration,
   parseYaml,
   requiredMetadata,
   resolveCanvasColor,
+  signatureToKey,
   stateTransitionReferences,
   unreachableStates,
   validActionPatterns,
@@ -47083,6 +47185,119 @@ function requireIconResolver() {
   iconResolver.Icon = Icon2;
   return iconResolver;
 }
+var NodeTooltip = {};
+var hasRequiredNodeTooltip;
+function requireNodeTooltip() {
+  if (hasRequiredNodeTooltip) return NodeTooltip;
+  hasRequiredNodeTooltip = 1;
+  Object.defineProperty(NodeTooltip, "__esModule", { value: true });
+  NodeTooltip.NodeTooltip = void 0;
+  const jsx_runtime_1 = require$$0;
+  const react_1 = React2;
+  const react_dom_1 = require$$2;
+  const NodeTooltip$1 = ({ description, otel, visible, nodeRef }) => {
+    const [position, setPosition] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+      if (visible && (nodeRef == null ? void 0 : nodeRef.current)) {
+        const rect = nodeRef.current.getBoundingClientRect();
+        setPosition({
+          top: rect.bottom + 8,
+          // 8px below the node
+          left: rect.left + rect.width / 2
+          // centered horizontally
+        });
+      } else if (!nodeRef) {
+        setPosition({ top: 0, left: 0 });
+      }
+    }, [visible, nodeRef]);
+    if (!visible)
+      return null;
+    if (!description && !otel)
+      return null;
+    const usePortal = Boolean(nodeRef);
+    const getKindLabel = (kind) => {
+      switch (kind) {
+        case "type":
+          return "Type";
+        case "service":
+          return "Service";
+        case "instance":
+          return "Instance";
+        default:
+          return kind;
+      }
+    };
+    const getKindColor = (kind) => {
+      switch (kind) {
+        case "type":
+          return "#4A90E2";
+        // Blue
+        case "service":
+          return "#7ED321";
+        // Green
+        case "instance":
+          return "#9B59B6";
+        // Purple
+        default:
+          return "#888";
+      }
+    };
+    const tooltipContent = (0, jsx_runtime_1.jsxs)("div", { style: {
+      position: usePortal ? "fixed" : "absolute",
+      top: usePortal ? (position == null ? void 0 : position.top) ?? 0 : "100%",
+      left: usePortal ? (position == null ? void 0 : position.left) ?? 0 : "50%",
+      transform: "translateX(-50%)",
+      marginTop: usePortal ? 0 : "8px",
+      padding: "8px 12px",
+      backgroundColor: "rgba(0, 0, 0, 0.9)",
+      color: "white",
+      borderRadius: "6px",
+      fontSize: "11px",
+      maxWidth: "250px",
+      zIndex: 99999,
+      pointerEvents: "none",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
+      whiteSpace: "normal",
+      opacity: usePortal ? position ? 1 : 0 : 1
+    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      position: "absolute",
+      top: "-6px",
+      left: "50%",
+      transform: "translateX(-50%)",
+      width: 0,
+      height: 0,
+      borderLeft: "6px solid transparent",
+      borderRight: "6px solid transparent",
+      borderBottom: "6px solid rgba(0, 0, 0, 0.9)"
+    } }), otel && (0, jsx_runtime_1.jsxs)("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      marginBottom: description ? "6px" : 0
+    }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+      backgroundColor: getKindColor(otel.kind),
+      color: "white",
+      padding: "2px 6px",
+      borderRadius: "3px",
+      fontSize: "9px",
+      fontWeight: 600,
+      textTransform: "uppercase"
+    }, children: getKindLabel(otel.kind) }), otel.category && (0, jsx_runtime_1.jsx)("span", { style: { color: "rgba(255,255,255,0.7)", fontSize: "10px" }, children: otel.category }), otel.isNew && (0, jsx_runtime_1.jsx)("span", { style: {
+      backgroundColor: "#F5A623",
+      color: "white",
+      padding: "1px 4px",
+      borderRadius: "3px",
+      fontSize: "8px",
+      fontWeight: 600
+    }, children: "NEW" })] }), description && (0, jsx_runtime_1.jsx)("div", { style: { lineHeight: "1.4", color: "rgba(255,255,255,0.9)" }, children: description })] });
+    if (usePortal) {
+      return (0, react_dom_1.createPortal)(tooltipContent, document.body);
+    }
+    return tooltipContent;
+  };
+  NodeTooltip.NodeTooltip = NodeTooltip$1;
+  return NodeTooltip;
+}
 var hasRequiredCustomNode;
 function requireCustomNode() {
   if (hasRequiredCustomNode) return CustomNode;
@@ -47090,12 +47305,56 @@ function requireCustomNode() {
   Object.defineProperty(CustomNode, "__esModule", { value: true });
   CustomNode.CustomNode = void 0;
   const jsx_runtime_1 = require$$0;
-  const react_1 = /* @__PURE__ */ requireUmd();
+  const react_1 = React2;
+  const react_2 = /* @__PURE__ */ requireUmd();
   const iconResolver_1 = requireIconResolver();
+  const NodeTooltip_1 = requireNodeTooltip();
   const CustomNode$1 = ({ data, selected }) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2, _p, _q, _r, _s, _t2, _u;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2;
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const nodeRef = (0, react_1.useRef)(null);
     const nodeProps = data;
     const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false } = nodeProps;
+    const otelInfo = nodeData == null ? void 0 : nodeData.otel;
+    const description = nodeData == null ? void 0 : nodeData.description;
+    const getOtelBadgeColor = (kind) => {
+      switch (kind) {
+        case "type":
+          return "#4A90E2";
+        // Blue
+        case "service":
+          return "#7ED321";
+        // Green
+        case "instance":
+          return "#9B59B6";
+        // Purple
+        default:
+          return "#888";
+      }
+    };
+    const renderOtelBadge = () => {
+      if (!(otelInfo == null ? void 0 : otelInfo.kind))
+        return null;
+      const badgeColor = getOtelBadgeColor(otelInfo.kind);
+      const label = otelInfo.kind.charAt(0).toUpperCase();
+      return (0, jsx_runtime_1.jsx)("div", { style: {
+        position: "absolute",
+        top: -6,
+        right: -6,
+        width: 18,
+        height: 18,
+        borderRadius: "50%",
+        backgroundColor: badgeColor,
+        color: "white",
+        fontSize: "10px",
+        fontWeight: 700,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+        zIndex: 10
+      }, title: `${otelInfo.kind}${otelInfo.category ? ` (${otelInfo.category})` : ""}`, children: label });
+    };
     if (!typeDefinition) {
       return (0, jsx_runtime_1.jsx)("div", { style: { padding: "10px", border: "2px solid red", borderRadius: "4px" }, children: (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "red" }, children: "Error: Missing node type definition" }) });
     }
@@ -47126,7 +47385,6 @@ function requireCustomNode() {
     const animationClass = getAnimationClass();
     const isGroup = nodeData.canvasType === "group";
     const getShapeStyles = () => {
-      var _a2, _b2;
       const baseStyles = {
         padding: "12px 16px",
         backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : "white",
@@ -47137,8 +47395,9 @@ function requireCustomNode() {
         // Use 100% width/height to fill the node container (for resizing support)
         width: "100%",
         height: "100%",
-        minWidth: ((_a2 = typeDefinition.size) == null ? void 0 : _a2.width) || 80,
-        minHeight: ((_b2 = typeDefinition.size) == null ? void 0 : _b2.height) || 40,
+        // Use small absolute minimums - typeDefinition.size is the default, not the minimum
+        minWidth: 20,
+        minHeight: 20,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -47196,8 +47455,8 @@ function requireCustomNode() {
     const isHexagon = typeDefinition.shape === "hexagon";
     const isCircle = typeDefinition.shape === "circle";
     const keepAspectRatio = isCircle;
-    const minWidth = ((_g = typeDefinition.size) == null ? void 0 : _g.width) || 80;
-    const minHeight = ((_h = typeDefinition.size) == null ? void 0 : _h.height) || (isCircle ? minWidth : 40);
+    const minWidth = 40;
+    const minHeight = isCircle ? 40 : 30;
     const hexagonClipPath = "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)";
     const hexagonBorderWidth = 2;
     const hexagonBorderStyle = isHexagon ? {
@@ -47207,8 +47466,9 @@ function requireCustomNode() {
       // Use 100% to fill container for resizing support
       width: "100%",
       height: "100%",
-      minWidth: ((_i = typeDefinition.size) == null ? void 0 : _i.width) || 120,
-      minHeight: ((_j = typeDefinition.size) == null ? void 0 : _j.height) || 120,
+      // Use small absolute minimums - typeDefinition.size is the default, not the minimum
+      minWidth: 20,
+      minHeight: 20,
       boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
       transition: "box-shadow 0.2s ease",
       boxSizing: "border-box"
@@ -47238,8 +47498,9 @@ function requireCustomNode() {
       backgroundColor: hasViolations ? "#D0021B" : strokeColor,
       width: "100%",
       height: "100%",
-      minWidth: ((_k = typeDefinition.size) == null ? void 0 : _k.width) || 80,
-      minHeight: ((_l = typeDefinition.size) == null ? void 0 : _l.height) || 80,
+      // Use small absolute minimums - typeDefinition.size is the default, not the minimum
+      minWidth: 20,
+      minHeight: 20,
       boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
       transition: "box-shadow 0.2s ease",
       boxSizing: "border-box"
@@ -47281,7 +47542,7 @@ function requireCustomNode() {
       }
       return offsetStyle;
     };
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [editable && (0, jsx_runtime_1.jsx)(react_1.NodeResizer, { color: strokeColor, isVisible: selected, minWidth, minHeight, keepAspectRatio, handleStyle: {
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [editable && (0, jsx_runtime_1.jsx)(react_2.NodeResizer, { color: strokeColor, isVisible: selected, minWidth, minHeight, keepAspectRatio, handleStyle: {
       width: 8,
       height: 8,
       borderRadius: 2,
@@ -47289,29 +47550,29 @@ function requireCustomNode() {
     }, lineStyle: {
       borderWidth: 1,
       zIndex: 20
-    } }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle() }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    } }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "target", position: react_2.Position.Top, id: "top", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "target", position: react_2.Position.Bottom, id: "bottom", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "target", position: react_2.Position.Left, id: "left", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "target", position: react_2.Position.Right, id: "right", style: getHandleStyle() }), isHexagon ? (0, jsx_runtime_1.jsxs)("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderOtelBadge(), (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_m = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _m.label) || ((_o2 = (_n2 = typeDefinition.states) == null ? void 0 : _n2[state]) == null ? void 0 : _o2.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_g = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _g.label) || ((_i = (_h = typeDefinition.states) == null ? void 0 : _h[state]) == null ? void 0 : _i.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }) : isDiamond ? (0, jsx_runtime_1.jsx)("div", { style: diamondBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: diamondInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: isHovered, nodeRef })] }) : isDiamond ? (0, jsx_runtime_1.jsxs)("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderOtelBadge(), (0, jsx_runtime_1.jsx)("div", { style: diamondBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: diamondInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_p = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _p.label) || ((_r = (_q = typeDefinition.states) == null ? void 0 : _q[state]) == null ? void 0 : _r.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_j = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _j.label) || ((_l = (_k = typeDefinition.states) == null ? void 0 : _k[state]) == null ? void 0 : _l.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: isHovered, nodeRef })] }) : (0, jsx_runtime_1.jsxs)("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderOtelBadge(), (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
       ...isGroup ? { width: "100%" } : {}
     }, children: [isGroup ? (0, jsx_runtime_1.jsxs)("div", { style: {
       display: "flex",
@@ -47326,11 +47587,11 @@ function requireCustomNode() {
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_s = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _s.label) || ((_u = (_t2 = typeDefinition.states) == null ? void 0 : _t2[state]) == null ? void 0 : _u.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_m = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _m.label) || ((_o2 = (_n2 = typeDefinition.states) == null ? void 0 : _n2[state]) == null ? void 0 : _o2.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Top, id: "top-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Bottom, id: "bottom-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Left, id: "left-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Right, id: "right-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)("style", { children: `
+    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: isHovered, nodeRef })] }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Top, id: "top-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Bottom, id: "bottom-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Left, id: "left-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Right, id: "right-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)("style", { children: `
         /* Processing pulse - continuous breathing effect */
         .node-pulse {
           animation: node-pulse ease-in-out infinite;
@@ -48011,7 +48272,7 @@ function requireNodeInfoPanel() {
     "GitPullRequest"
   ];
   const NodeInfoPanel$1 = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate, onSourceClick }) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j;
     const { theme } = (0, industry_theme_1.useTheme)();
     const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.primary;
     const canEdit = Boolean(onUpdate);
@@ -48044,10 +48305,13 @@ function requireNodeInfoPanel() {
       "shape",
       "states",
       "actions",
-      "nodeType"
+      "nodeType",
+      "otel",
+      "resourceMatch"
     ];
+    const otelInfo = (_d = node.data) == null ? void 0 : _d.otel;
     const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key)) : [];
-    const sources = ((_d = node.data) == null ? void 0 : _d.sources) || [];
+    const sources = ((_e2 = node.data) == null ? void 0 : _e2.sources) || [];
     const handleTypeChange = (newType) => {
       if (onUpdate && newType !== node.type) {
         onUpdate(node.id, { type: newType });
@@ -48093,7 +48357,7 @@ function requireNodeInfoPanel() {
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => onSourceClick ? (0, jsx_runtime_1.jsx)("button", { onClick: () => onSourceClick(node.id, source), style: {
+    }, children: "×" })] }), ((_f = node.data) == null ? void 0 : _f.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => onSourceClick ? (0, jsx_runtime_1.jsx)("button", { onClick: () => onSourceClick(node.id, source), style: {
       fontSize: "11px",
       padding: "2px 8px",
       backgroundColor: theme.colors.muted,
@@ -48114,7 +48378,25 @@ function requireNodeInfoPanel() {
       backgroundColor: theme.colors.muted,
       borderRadius: "4px",
       color: theme.colors.textSecondary
-    }, children: source }, index2)) })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowDetails(!showDetails), style: {
+    }, children: source }, index2)) })] }), otelInfo && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "OpenTelemetry" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", alignItems: "center" }, children: [otelInfo.kind && (0, jsx_runtime_1.jsx)("span", { style: {
+      fontSize: "10px",
+      fontWeight: 600,
+      padding: "3px 8px",
+      borderRadius: "4px",
+      textTransform: "uppercase",
+      color: "white",
+      backgroundColor: otelInfo.kind === "type" ? "#4A90E2" : otelInfo.kind === "service" ? "#7ED321" : otelInfo.kind === "instance" ? "#9B59B6" : "#888"
+    }, children: otelInfo.kind }), otelInfo.category && (0, jsx_runtime_1.jsx)("span", { style: {
+      fontSize: "11px",
+      color: theme.colors.textSecondary
+    }, children: otelInfo.category }), otelInfo.isNew && (0, jsx_runtime_1.jsx)("span", { style: {
+      fontSize: "9px",
+      fontWeight: 600,
+      padding: "2px 6px",
+      borderRadius: "3px",
+      backgroundColor: "#F5A623",
+      color: "white"
+    }, children: "NEW" })] })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowDetails(!showDetails), style: {
       width: "100%",
       padding: "8px",
       backgroundColor: theme.colors.surface,
@@ -48191,11 +48473,11 @@ function requireNodeInfoPanel() {
     }, children: node.type })] }), node.state && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "State" }), (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "12px",
       padding: "4px 8px",
-      backgroundColor: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node.state]) == null ? void 0 : _g.color) || theme.colors.secondary,
+      backgroundColor: ((_h = (_g = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _g[node.state]) == null ? void 0 : _h.color) || theme.colors.secondary,
       color: theme.colors.background,
       borderRadius: "4px",
       display: "inline-block"
-    }, children: ((_i = (_h = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _h[node.state]) == null ? void 0 : _i.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_j = (_i = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _i[node.state]) == null ? void 0 : _j.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: theme.colors.textSecondary,
       marginBottom: "8px",
@@ -49368,7 +49650,7 @@ function requireDist() {
   hasRequiredDist = 1;
   (function(exports$1) {
     Object.defineProperty(exports$1, "__esModule", { value: true });
-    exports$1.resolveIcon = exports$1.Icon = exports$1.computeOptimalEdgeSides = exports$1.hasCycleBetweenNodes = exports$1.autoLayoutNodes = exports$1.convertToXYFlowEdges = exports$1.convertToXYFlowNodes = exports$1.CustomEdge = exports$1.GenericEdge = exports$1.CustomNode = exports$1.GenericNode = exports$1.ConfigurationSelector = exports$1.NodeInfoPanel = exports$1.EdgeInfoPanel = exports$1.MetricsDashboard = exports$1.EventLog = exports$1.GraphRenderer = void 0;
+    exports$1.resolveIcon = exports$1.Icon = exports$1.computeOptimalEdgeSides = exports$1.hasCycleBetweenNodes = exports$1.autoLayoutNodes = exports$1.convertToXYFlowEdges = exports$1.convertToXYFlowNodes = exports$1.NodeTooltip = exports$1.CustomEdge = exports$1.GenericEdge = exports$1.CustomNode = exports$1.GenericNode = exports$1.ConfigurationSelector = exports$1.NodeInfoPanel = exports$1.EdgeInfoPanel = exports$1.MetricsDashboard = exports$1.EventLog = exports$1.GraphRenderer = void 0;
     var GraphRenderer_1 = requireGraphRenderer();
     Object.defineProperty(exports$1, "GraphRenderer", { enumerable: true, get: function() {
       return GraphRenderer_1.GraphRenderer;
@@ -49409,6 +49691,10 @@ function requireDist() {
     Object.defineProperty(exports$1, "CustomEdge", { enumerable: true, get: function() {
       return CustomEdge_1.CustomEdge;
     } });
+    var NodeTooltip_1 = requireNodeTooltip();
+    Object.defineProperty(exports$1, "NodeTooltip", { enumerable: true, get: function() {
+      return NodeTooltip_1.NodeTooltip;
+    } });
     var graphConverter_1 = requireGraphConverter();
     Object.defineProperty(exports$1, "convertToXYFlowNodes", { enumerable: true, get: function() {
       return graphConverter_1.convertToXYFlowNodes;