@industry-theme/principal-view-panels 0.1.29 → 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;
@@ -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 } : {},
@@ -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;
+    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" }) });
     }
@@ -47283,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,
@@ -47291,7 +47550,7 @@ 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",
@@ -47302,7 +47561,7 @@ function requireCustomNode() {
       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",
@@ -47313,7 +47572,7 @@ function requireCustomNode() {
       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",
@@ -47332,7 +47591,7 @@ function requireCustomNode() {
       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;
@@ -48013,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);
@@ -48046,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 });
@@ -48095,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,
@@ -48116,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,
@@ -48193,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",
@@ -49370,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;
@@ -49411,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;