react-aiops 0.1.6 → 0.1.8

package/dist/index.js

@@ -1,11 +1,11 @@
 import { jsxs as d, jsx as e, Fragment as ve } from "react/jsx-runtime";
-import J, { createContext as je, useContext as we, useState as L, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
-const Tt = {
+import J, { createContext as je, useContext as we, useState as I, useEffect as Te, useMemo as Tt, useRef as ee } from "react";
+const At = {
   info: { color: "#00ff88", bg: "rgba(0, 255, 136, 0.1)", border: "#00ff88", icon: "✅" },
   warning: { color: "#ff8c00", bg: "rgba(255, 140, 0, 0.1)", border: "#ff8c00", icon: "⚠️" },
   critical: { color: "#ff2255", bg: "rgba(255, 34, 85, 0.1)", border: "#ff2255", icon: "🛑" }
 };
-function At({
+function It({
   name: t,
   status: n,
   dbSync: o = !0,
@@ -146,7 +146,7 @@ function At({
                 }
               ),
               c.map((p, f) => {
-                const y = Tt[p.level];
+                const g = At[p.level];
                 return /* @__PURE__ */ d(
                   "div",
                   {
@@ -154,15 +154,15 @@ function At({
                       display: "flex",
                       gap: 8,
                       alignItems: "flex-start",
-                      color: y.color,
+                      color: g.color,
                       fontSize: 12,
-                      background: y.bg,
+                      background: g.bg,
                       padding: "6px 10px",
                       borderRadius: 4,
-                      borderLeft: `2px solid ${y.border}`
+                      borderLeft: `2px solid ${g.border}`
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { children: y.icon }),
+                      /* @__PURE__ */ e("span", { children: g.icon }),
                       " ",
                       /* @__PURE__ */ e("span", { children: p.message })
                     ]
@@ -183,7 +183,7 @@ const w = {
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.55)" },
   offline: { color: "#1e3a5a", glow: "rgba(30,58,90,0.25)" }
 }, yi = "#00e5ff", mi = "#0055cc", Se = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", Qe = "linear-gradient(180deg, rgba(10,25,50,0.35) 0%, rgba(5,15,35,0.25) 60%, rgba(3,10,20,0.15) 100%)";
-function qe(t, n, o) {
+function Ge(t, n, o) {
   const i = {
     position: "absolute",
     overflow: "hidden",
@@ -234,7 +234,7 @@ function qe(t, n, o) {
   };
 }
 const Ve = "cubic-bezier(0.34, 1.56, 0.64, 1)", _e = "cubic-bezier(0.16, 1, 0.3, 1)";
-function st(t) {
+function ct(t) {
   return w[t]?.color ?? w.online.color;
 }
 function Lt(t, n, o) {
@@ -243,38 +243,38 @@ function Lt(t, n, o) {
 function Le(t, n, o, i) {
   return t === "offline" ? "offline" : t === "critical" && n >= i ? "critical" : (t === "critical" || t === "warning") && n >= o ? "warning" : "online";
 }
-function It({
+function Ot({
   component: t,
   onClose: n,
   visible: o,
   sceneWidth: i = 660,
   sceneHeight: r = 600
 }) {
-  const { type: a, name: s, status: l, ex: h, ey: c, context: p = {} } = t, f = st(l), y = h >= i / 2, u = c >= r / 2, g = {
+  const { type: a, name: s, status: l, ex: h, ey: c, context: p = {} } = t, f = ct(l), g = h >= i / 2, u = c >= r / 2, y = {
     position: "fixed",
-    ...y ? { right: 28 } : { left: 28 },
+    ...g ? { right: 28 } : { left: 28 },
     ...u ? { bottom: 110 } : { top: 72 }
-  }, m = y ? 40 : -40, x = u ? 30 : -30, v = t.dialogMetrics ?? p.dialogMetrics;
+  }, m = g ? 40 : -40, x = u ? 30 : -30, v = t.dialogMetrics ?? p.dialogMetrics;
   let $;
   if (v && v.length > 0)
-    $ = v.map((b, k) => {
-      const D = b.warnAt ?? 70, P = b.critAt ?? 85;
+    $ = v.map((b, R) => {
+      const D = b.warnAt ?? 70, C = b.critAt ?? 85;
       return {
         id: b.id,
         label: b.label,
         sublabel: b.sublabel,
         value: b.value,
         unit: b.unit ?? "%",
-        status: Le(l, b.value, D, P),
+        status: Le(l, b.value, D, C),
         icon: b.icon ?? "cpu",
-        delay: k,
+        delay: R,
         colorOverride: b.color,
         warnAt: D,
-        critAt: P
+        critAt: C
       };
     });
   else {
-    const b = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, D = p.capacity ?? 72, P = Le(l, b, 70, 85), E = Le(l, k, 75, 88), W = Le(l, D, 75, 90);
+    const b = p.cpuLoad ?? p.traffic ?? 50, R = p.memLoad ?? p.queueDepth ?? 60, D = p.capacity ?? 72, C = Le(l, b, 70, 85), T = Le(l, R, 75, 88), W = Le(l, D, 75, 90);
     $ = [
       {
         id: "cpu",
@@ -282,7 +282,7 @@ function It({
         sublabel: a === "dispatcher" ? "PORT LOAD" : a === "messageServer" ? "QUEUE DEPTH" : "PROCESSOR",
         value: b,
         unit: "%",
-        status: P,
+        status: C,
         icon: "cpu",
         delay: 0
       },
@@ -290,9 +290,9 @@ function It({
         id: "mem",
         label: "MEMORY",
         sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
-        value: k,
+        value: R,
         unit: "%",
-        status: E,
+        status: T,
         icon: "mem",
         delay: 1
       },
@@ -312,7 +312,7 @@ function It({
     "div",
     {
       style: {
-        ...g,
+        ...y,
         width: 420,
         background: "linear-gradient(170deg, rgba(2, 10, 22, 0.96) 0%, rgba(2, 6, 14, 0.98) 100%)",
         backdropFilter: "blur(20px)",
@@ -393,12 +393,12 @@ function It({
             borderRight: `2px solid ${f}66`,
             borderRadius: "0 0 14px 0"
           }
-        ].map((b, k) => /* @__PURE__ */ e(
+        ].map((b, R) => /* @__PURE__ */ e(
           "div",
           {
             style: { position: "absolute", width: 18, height: 18, pointerEvents: "none", ...b }
           },
-          k
+          R
         )),
         /* @__PURE__ */ d(
           "div",
@@ -519,7 +519,7 @@ function It({
               position: "relative",
               zIndex: 2
             },
-            children: $.map((b) => /* @__PURE__ */ e(Ot, { metric: b, visible: o, accentColor: f }, b.id))
+            children: $.map((b) => /* @__PURE__ */ e(Dt, { metric: b, visible: o, accentColor: f }, b.id))
           }
         ),
         /* @__PURE__ */ d(
@@ -568,7 +568,7 @@ function It({
     }
   );
 }
-function Ot({
+function Dt({
   metric: t,
   visible: n,
   accentColor: o
@@ -583,8 +583,8 @@ function Ot({
     delay: c,
     colorOverride: p,
     warnAt: f = 70,
-    critAt: y = 85
-  } = t, u = p ?? Lt(a, f, y), g = p ?? st(l);
+    critAt: g = 85
+  } = t, u = p ?? Lt(a, f, g), y = p ?? ct(l);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -604,8 +604,8 @@ function Ot({
               width: 52,
               height: 52,
               borderRadius: 12,
-              border: `1px solid ${g}44`,
-              background: `linear-gradient(135deg, ${g}0c 0%, ${g}04 100%)`,
+              border: `1px solid ${y}44`,
+              background: `linear-gradient(135deg, ${y}0c 0%, ${y}04 100%)`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -615,7 +615,7 @@ function Ot({
               animation: n ? `comp-dialog-icon-pop 0.5s ${Ve} ${0.35 + c * 0.12}s both` : "none"
             },
             children: [
-              /* @__PURE__ */ e(Dt, { type: h, color: g }),
+              /* @__PURE__ */ e(Wt, { type: h, color: y }),
               (l === "warning" || l === "critical") && /* @__PURE__ */ e(
                 "div",
                 {
@@ -626,8 +626,8 @@ function Ot({
                     width: 5,
                     height: 5,
                     borderRadius: "50%",
-                    background: g,
-                    boxShadow: `0 0 6px ${g}`,
+                    background: y,
+                    boxShadow: `0 0 6px ${y}`,
                     animation: "holo-led-blink 1.2s infinite"
                   }
                 }
@@ -736,7 +736,7 @@ function Ot({
                   {
                     style: {
                       position: "absolute",
-                      left: `${y}%`,
+                      left: `${g}%`,
                       top: 0,
                       bottom: 0,
                       width: 1,
@@ -780,7 +780,7 @@ function Ot({
               {
                 style: {
                   position: "absolute",
-                  left: `${y}%`,
+                  left: `${g}%`,
                   transform: "translateX(-50%)",
                   fontSize: 6,
                   color: "rgba(255,34,85,0.3)",
@@ -808,7 +808,7 @@ function Ot({
     }
   );
 }
-function Dt({ type: t, color: n }) {
+function Wt({ type: t, color: n }) {
   return t === "cpu" ? /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ e("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", stroke: n, strokeWidth: "1.5" }),
     /* @__PURE__ */ e(
@@ -893,14 +893,14 @@ function Dt({ type: t, color: n }) {
     /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: n, strokeWidth: "0.8" })
   ] });
 }
-const Ge = je(null), Ke = je({ index: 0 });
+const qe = je(null), Ke = je({ index: 0 });
 function xi() {
-  return we(Ge);
+  return we(qe);
 }
 function vi() {
   return we(Ke);
 }
-function Wt({
+function zt({
   children: t,
   logoUrl: n,
   viewState: o,
@@ -913,32 +913,32 @@ function Wt({
   componentScale: c = 0.35,
   drillZoom: p = 3.3,
   autoRotateCarousel: f = !0,
-  carouselSpeed: y = 6e-3,
+  carouselSpeed: g = 6e-3,
   width: u = 950,
-  height: g = 790,
+  height: y = 790,
   onSelectSystem: m,
   onBackgroundClick: x,
   onComponentClick: v,
   onCloseDrill: $,
   selectedSystemStatus: b = "online",
-  selectedSystemDbSync: k = !0,
+  selectedSystemDbSync: R = !0,
   selectedSystemMetrics: D,
-  selectedSystemAlerts: P
+  selectedSystemAlerts: C
 }) {
-  const [E, W] = L(0);
-  Ee(() => {
+  const [T, W] = I(0);
+  Te(() => {
     let z;
     if ((o === "compact" || o === "collapsing") && f) {
       const F = () => {
-        W((ne) => ne + y), z = requestAnimationFrame(F);
+        W((ne) => ne + g), z = requestAnimationFrame(F);
       };
       z = requestAnimationFrame(F);
     }
     return () => cancelAnimationFrame(z);
-  }, [o, f, y]);
-  const X = J.Children.toArray(t), j = X.length, N = Et(() => ({
+  }, [o, f, g]);
+  const X = J.Children.toArray(t), j = X.length, N = Tt(() => ({
     totalSystems: j,
-    carouselRotation: E,
+    carouselRotation: T,
     viewState: o,
     animPhase: i,
     selectedSystem: r,
@@ -952,7 +952,7 @@ function Wt({
     containerWidth: u
   }), [
     j,
-    E,
+    T,
     o,
     i,
     r,
@@ -965,8 +965,8 @@ function Wt({
     v,
     u
   ]), te = X.map((z, F) => /* @__PURE__ */ e(Ke.Provider, { value: { index: F }, children: z }, F)), ie = o === "expanded" || o === "expanding" && i >= 4;
-  return /* @__PURE__ */ d(Ge.Provider, { value: N, children: [
-    /* @__PURE__ */ d("div", { style: { position: "relative", width: u, height: g, margin: "0 auto", flexShrink: 0 }, children: [
+  return /* @__PURE__ */ d(qe.Provider, { value: N, children: [
+    /* @__PURE__ */ d("div", { style: { position: "relative", width: u, height: y, margin: "0 auto", flexShrink: 0 }, children: [
       n && (o === "compact" || o === "collapsing") && /* @__PURE__ */ e(
         "img",
         {
@@ -990,29 +990,29 @@ function Wt({
       te
     ] }),
     r && /* @__PURE__ */ e("div", { onClick: (z) => z.stopPropagation(), children: /* @__PURE__ */ e(
-      At,
+      It,
       {
         name: r,
         status: b,
-        dbSync: k,
+        dbSync: R,
         visible: ie && !a,
         metrics: D,
-        alerts: P
+        alerts: C
       }
     ) }),
     a && /* @__PURE__ */ e("div", { onClick: (z) => z.stopPropagation(), children: /* @__PURE__ */ e(
-      It,
+      Ot,
       {
         component: a,
         onClose: $,
         visible: s >= 0.3,
         sceneWidth: u,
-        sceneHeight: g
+        sceneHeight: y
       }
     ) })
   ] });
 }
-function zt({
+function Mt({
   x1: t,
   y1: n,
   x2: o,
@@ -1079,14 +1079,14 @@ function zt({
     ] })
   ] });
 }
-const Mt = [
+const Nt = [
   { scale: 1, op: 1, delay: "0.0s", bw: "2px", glow: 1 },
   { scale: 0.82, op: 0.88, delay: "0.5s", bw: "1.5px", glow: 0.7 },
   { scale: 0.64, op: 0.72, delay: "1.0s", bw: "1px", glow: 0.5 },
   { scale: 0.47, op: 0.58, delay: "1.5s", bw: "1px", glow: 0.35 },
   { scale: 0.3, op: 0.45, delay: "2.0s", bw: "1px", glow: 0.25 }
 ];
-function Nt({
+function Bt({
   children: t,
   size: n = 230,
   widthRatio: o = 1,
@@ -1252,7 +1252,7 @@ function Nt({
         background: `radial-gradient(ellipse, ${i}88 0%, ${i}33 40%, transparent 72%)`,
         filter: "blur(12px)"
       } }),
-      Mt.map((s, l) => /* @__PURE__ */ e("div", { style: {
+      Nt.map((s, l) => /* @__PURE__ */ e("div", { style: {
         position: "absolute",
         width: a * s.scale,
         height: n * s.scale,
@@ -1295,8 +1295,8 @@ function Nt({
     }, children: r })
   ] });
 }
-const ae = je(null), Bt = "cubic-bezier(0.34, 1.56, 0.64, 1)", it = 330, nt = 340, Ft = 660;
-function dt({
+const le = je(null), Ft = "cubic-bezier(0.34, 1.56, 0.64, 1)", ot = 330, rt = 340, Ht = 660;
+function pt({
   name: t,
   status: n = "online",
   connections: o = [],
@@ -1309,32 +1309,32 @@ function dt({
   _animPhase: c,
   _selectedSystem: p,
   _selectedComponent: f,
-  _rotateY: y,
+  _rotateY: g,
   _autoRotateComponents: u,
-  _componentScale: g,
+  _componentScale: y,
   _drillZoom: m,
   _onSelectSystem: x,
   _onComponentClick: v,
   _containerWidth: $
 }) {
-  const b = we(Ge), k = we(Ke), D = a ?? k.index, P = s ?? b?.totalSystems ?? 1, E = l ?? b?.carouselRotation ?? 0, W = h ?? b?.viewState ?? "compact", X = c ?? b?.animPhase ?? 0, j = p ?? b?.selectedSystem ?? null, N = f ?? b?.selectedComponent ?? null, te = y ?? b?.rotateY ?? 20, ie = u ?? b?.autoRotateComponents ?? !0, z = g ?? b?.componentScale ?? 0.35, F = m ?? b?.drillZoom ?? 3.3, ne = x ?? b?.onSelectSystem, $e = v ?? b?.onComponentClick, ke = $ ?? b?.containerWidth ?? 950, V = j === t, M = V && (W === "expanded" || W === "expanding" && X >= 1), R = !M, Re = (ke - Ft) / 2, oe = it + Re, le = D / P * Math.PI * 2 + E, Ne = 420, Te = 160, Pe = oe + Math.cos(le) * Ne, se = 450 + Math.sin(le) * Te, mt = Math.round(se), Be = !V && (W === "expanding" || W === "expanded"), xt = Be ? 0 : 1, Ce = R ? 0.3 + (Math.sin(le) + 1) * 0.1 : 1, vt = R ? Ce : z, Ae = W === "compact" || W === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", tt = V && N, Fe = tt ? F : 1, wt = N?.ex ?? 330, St = N?.ey ?? 300, { size: $t = 90, color: kt = "#00e5ff", widthRatio: Rt = 3 } = i ?? {}, Pt = {
+  const b = we(qe), R = we(Ke), D = a ?? R.index, C = s ?? b?.totalSystems ?? 1, T = l ?? b?.carouselRotation ?? 0, W = h ?? b?.viewState ?? "compact", X = c ?? b?.animPhase ?? 0, j = p ?? b?.selectedSystem ?? null, N = f ?? b?.selectedComponent ?? null, te = g ?? b?.rotateY ?? 20, ie = u ?? b?.autoRotateComponents ?? !0, z = y ?? b?.componentScale ?? 0.35, F = m ?? b?.drillZoom ?? 3.3, ne = x ?? b?.onSelectSystem, $e = v ?? b?.onComponentClick, ke = $ ?? b?.containerWidth ?? 950, V = j === t, M = V && (W === "expanded" || W === "expanding" && X >= 1), P = !M, Re = (ke - Ht) / 2, oe = ot + Re, se = D / C * Math.PI * 2 + T, Ne = 420, Ae = 160, Pe = oe + Math.cos(se) * Ne, de = 450 + Math.sin(se) * Ae, xt = Math.round(de), Be = !V && (W === "expanding" || W === "expanded"), vt = Be ? 0 : 1, Ce = P ? 0.3 + (Math.sin(se) + 1) * 0.1 : 1, wt = P ? Ce : z, Ie = W === "compact" || W === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", nt = V && N, Fe = nt ? F : 1, St = N?.ex ?? 330, $t = N?.ey ?? 300, { size: kt = 90, color: Rt = "#00e5ff", widthRatio: Pt = 3 } = i ?? {}, Ct = {
     name: t,
     isSelected: V,
     isExpandedPos: M,
-    isCompact: R,
+    isCompact: P,
     animPhase: X,
     compactCx: Pe,
-    compactCy: se,
+    compactCy: de,
     groupScale: Ce,
-    effectiveScale: vt,
-    transitionValue: Ae,
+    effectiveScale: wt,
+    transitionValue: Ie,
     rotateY: te,
     autoRotateComponents: ie,
     onComponentClick: $e,
     selectedComponentName: N?.name ?? null,
     expandedOffsetX: Re
   };
-  return /* @__PURE__ */ e(ae.Provider, { value: Pt, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(le.Provider, { value: Ct, children: /* @__PURE__ */ d(
     "div",
     {
       style: {
@@ -1344,21 +1344,21 @@ function dt({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: xt,
-        transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Bt}`,
-        filter: R && Math.sin(le) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
-        zIndex: V ? 500 : Be ? 0 : mt,
-        transformOrigin: `${oe}px ${nt}px`,
-        transform: tt ? `translate(${-(wt - it) * Fe}px, ${-(St - nt) * Fe}px) scale(${Fe})` : "none"
+        opacity: vt,
+        transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Ft}`,
+        filter: P && Math.sin(se) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
+        zIndex: V ? 500 : Be ? 0 : xt,
+        transformOrigin: `${oe}px ${rt}px`,
+        transform: nt ? `translate(${-(St - ot) * Fe}px, ${-($t - rt) * Fe}px) scale(${Fe})` : "none"
       },
       children: [
-        R && !Be && /* @__PURE__ */ e(
+        P && !Be && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
               left: Pe,
-              top: se,
+              top: de,
               width: 160,
               height: 180,
               transform: "translate(-50%, -80%)",
@@ -1371,13 +1371,13 @@ function dt({
             }
           }
         ),
-        R && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
+        P && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
               left: Pe,
-              top: se - 200,
+              top: de - 200,
               transform: `translate(-50%, -50%) scale(${Ce})`,
               zIndex: 110,
               pointerEvents: "none",
@@ -1425,12 +1425,12 @@ function dt({
             style: {
               position: "absolute",
               left: M ? oe : Pe,
-              top: M ? 48 : se - 180,
+              top: M ? 48 : de - 180,
               transform: `translate(-50%, -50%) scale(${M ? 1.2 : Ce * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
-              transition: Ae,
+              transition: Ie,
               fontSize: 36,
               fontWeight: 700,
               letterSpacing: "0.18em",
@@ -1455,10 +1455,10 @@ function dt({
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
-              transition: Ae
+              transition: Ie
             },
-            children: o.map((Q, Ct) => /* @__PURE__ */ e(
-              zt,
+            children: o.map((Q, Et) => /* @__PURE__ */ e(
+              Mt,
               {
                 x1: Q.from[0],
                 y1: Q.from[1],
@@ -1468,7 +1468,7 @@ function dt({
                 color: Q.color,
                 dur: Q.duration
               },
-              Ct
+              Et
             ))
           }
         ),
@@ -1478,12 +1478,12 @@ function dt({
             style: {
               position: "absolute",
               left: M ? oe : Pe,
-              top: M ? 570 : se + 70,
+              top: M ? 570 : de + 70,
               transform: `translate(-50%, -50%) scaleX(${M ? 1 : 0.4}) scaleY(${M ? 1 : 0.6}) scale(${M ? 1 : Ce})`,
-              transition: Ae,
+              transition: Ie,
               zIndex: 1
             },
-            children: /* @__PURE__ */ e(Nt, { size: $t, color: kt, widthRatio: Rt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
+            children: /* @__PURE__ */ e(Bt, { size: kt, color: Rt, widthRatio: Pt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
           }
         ),
         r
@@ -1491,7 +1491,7 @@ function dt({
     }
   ) });
 }
-function I({
+function L({
   ex: t,
   ey: n,
   status: o,
@@ -1503,20 +1503,20 @@ function I({
   align: h = "right",
   internalRef: c
 }) {
-  const p = we(ae), f = p?.expandedOffsetX ?? 0;
+  const p = we(le), f = p?.expandedOffsetX ?? 0;
   if (o === "online") return null;
-  const y = l && !!p?.isExpandedPos, u = w[o]?.color ?? w.warning.color, g = Math.abs(a) > Math.abs(s), m = t + f + (g ? Math.sign(a) * 45 : 0), x = n + (g ? 0 : Math.sign(s) * 40), v = t + f + a, $ = n + s;
+  const g = l && !!p?.isExpandedPos, u = w[o]?.color ?? w.warning.color, y = Math.abs(a) > Math.abs(s), m = t + f + (y ? Math.sign(a) * 45 : 0), x = n + (y ? 0 : Math.sign(s) * 40), v = t + f + a, $ = n + s;
   let b = "";
-  if (g) {
-    const E = m + (v - m) / 2;
-    b = `M ${m} ${x} L ${E} ${x} L ${E} ${$} L ${v} ${$}`;
+  if (y) {
+    const T = m + (v - m) / 2;
+    b = `M ${m} ${x} L ${T} ${x} L ${T} ${$} L ${v} ${$}`;
   } else {
-    const E = x + ($ - x) / 2;
-    b = `M ${m} ${x} L ${m} ${E} L ${v} ${E} L ${v} ${$}`;
+    const T = x + ($ - x) / 2;
+    b = `M ${m} ${x} L ${m} ${T} L ${v} ${T} L ${v} ${$}`;
   }
-  let k = "translate(0, -50%)";
-  h === "left" && (k = "translate(-100%, -50%)"), h === "top" && (k = "translate(-50%, -100%)"), h === "bottom" && (k = "translate(-50%, 0)");
-  const D = h === "left" ? -8 : h === "right" ? 8 : 0, P = h === "top" ? -8 : h === "bottom" ? 8 : 0;
+  let R = "translate(0, -50%)";
+  h === "left" && (R = "translate(-100%, -50%)"), h === "top" && (R = "translate(-50%, -100%)"), h === "bottom" && (R = "translate(-50%, 0)");
+  const D = h === "left" ? -8 : h === "right" ? 8 : 0, C = h === "top" ? -8 : h === "bottom" ? 8 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1527,7 +1527,7 @@ function I({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: y ? 1 : 0,
+        opacity: g ? 1 : 0,
         transition: "opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s",
         zIndex: 150
       },
@@ -1564,9 +1564,9 @@ function I({
               position: "absolute",
               left: v,
               top: $,
-              transform: k,
+              transform: R,
               marginLeft: D,
-              marginTop: P,
+              marginTop: C,
               background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px), rgba(2, 8, 16, 0.82)",
               border: `1px solid ${u}55`,
               borderLeft: `2px solid ${u}`,
@@ -1638,7 +1638,7 @@ function I({
     }
   );
 }
-function A({
+function k({
   ex: t,
   ey: n,
   compactOffset: o,
@@ -1651,11 +1651,11 @@ function A({
   componentInfo: c,
   visibleAtPhase: p = 0,
   fixedScale: f,
-  bare: y = !1,
+  bare: g = !1,
   alert: u
 }) {
-  const g = we(ae);
-  if (!g)
+  const y = we(le);
+  if (!y)
     throw new Error("ServiceNode must be used inside a <Service> component.");
   const {
     isExpandedPos: m,
@@ -1663,12 +1663,12 @@ function A({
     compactCx: v,
     compactCy: $,
     groupScale: b,
-    effectiveScale: k,
+    effectiveScale: R,
     transitionValue: D,
-    onComponentClick: P,
-    selectedComponentName: E,
+    onComponentClick: C,
+    selectedComponentName: T,
     expandedOffsetX: W
-  } = g, j = p === 0 || g.isSelected && x >= p ? 1 : 0, N = v + o.x, te = $ + o.y, ie = m ? t + W : N, z = m ? n : te, F = f !== void 0 ? f : g.isCompact ? b : k, ne = !!c && !!E && c.name === E, $e = c?.status ? w[c.status]?.color ?? a : a, ke = c?.status === "offline" ? "#4a6a8a" : $e, V = c && m && P ? () => P({
+  } = y, j = p === 0 || y.isSelected && x >= p ? 1 : 0, N = v + o.x, te = $ + o.y, ie = m ? t + W : N, z = m ? n : te, F = f !== void 0 ? f : y.isCompact ? b : R, ne = !!c && !!T && c.name === T, $e = c?.status ? w[c.status]?.color ?? a : a, ke = c?.status === "offline" ? "#4a6a8a" : $e, V = c && m && C ? () => C({
     type: c.type,
     name: c.name,
     status: c.status,
@@ -1678,7 +1678,7 @@ function A({
     dialogMetrics: c.dialogMetrics,
     subComponents: c.subComponents,
     graphSeries: c.graphSeries
-  }) : void 0, M = c?.status ?? "online", R = c?.name ?? s ?? "";
+  }) : void 0, M = c?.status ?? "online", P = c?.name ?? s ?? "";
   return /* @__PURE__ */ d(ve, { children: [
     /* @__PURE__ */ e(
       "div",
@@ -1693,15 +1693,15 @@ function A({
           transition: D || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
           pointerEvents: m && j >= 0.5 ? "auto" : "none"
         },
-        children: y ? r : /* @__PURE__ */ e(
-          Ht,
+        children: g ? r : /* @__PURE__ */ e(
+          Ut,
           {
             statusColor: ke,
             label: s,
             subLabel: l,
             delay: h,
             showLabels: m,
-            isCompact: g.isCompact,
+            isCompact: y.isCompact,
             onClick: V,
             isSelected: ne,
             children: r
@@ -1710,12 +1710,12 @@ function A({
       }
     ),
     u && /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: t,
         ey: n,
         status: M,
-        title: R,
+        title: P,
         msg: u.msg,
         offsetX: u.offsetX ?? 110,
         offsetY: u.offsetY ?? -30,
@@ -1726,7 +1726,7 @@ function A({
     )
   ] });
 }
-function Ht({
+function Ut({
   children: t,
   statusColor: n,
   label: o,
@@ -1737,13 +1737,13 @@ function Ht({
   onClick: l,
   isSelected: h = !1
 }) {
-  const [c, p] = L(!1), f = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
+  const [c, p] = I(!1), f = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
   return /* @__PURE__ */ d(
     "div",
     {
       className: `float-node${l ? " float-node--interactive" : ""}`,
-      onClick: (y) => {
-        l && (y.stopPropagation(), l());
+      onClick: (g) => {
+        l && (g.stopPropagation(), l());
       },
       style: {
         cursor: l ? "pointer" : void 0,
@@ -1787,7 +1787,7 @@ function Ht({
     }
   );
 }
-function ct({ synced: t, latencyMs: n }) {
+function ft({ synced: t, latencyMs: n }) {
   const o = t ? "#00ff88" : "#ff8c00";
   return /* @__PURE__ */ d("div", { className: "sync-bridge", children: [
     /* @__PURE__ */ d("div", { className: "sync-arrows", children: [
@@ -1822,8 +1822,8 @@ function ct({ synced: t, latencyMs: n }) {
     ] })
   ] });
 }
-const q = 140, H = 240, Z = 160, de = qe(q, H, Z);
-function Ut({
+const G = 140, H = 240, Z = 160, ce = Ge(G, H, Z);
+function Yt({
   cfg: t,
   name: n,
   cpuLoad: o,
@@ -1842,7 +1842,7 @@ function Ut({
     "div",
     {
       style: {
-        width: q,
+        width: G,
         height: H,
         background: a ? Se : Qe,
         position: "relative",
@@ -2005,7 +2005,7 @@ function Ut({
           }
         ),
         Array.from({ length: 3 }, (p, f) => {
-          const y = f < l;
+          const g = f < l;
           return /* @__PURE__ */ d(
             "div",
             {
@@ -2032,8 +2032,8 @@ function Ut({
                       height: 5,
                       borderRadius: "50%",
                       flexShrink: 0,
-                      background: y ? t.color : "#08142a",
-                      boxShadow: y ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
+                      background: g ? t.color : "#08142a",
+                      boxShadow: g ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
                     }
                   }
                 ),
@@ -2049,7 +2049,7 @@ function Ut({
                       position: "relative",
                       overflow: "hidden"
                     },
-                    children: y && /* @__PURE__ */ e(
+                    children: g && /* @__PURE__ */ e(
                       "div",
                       {
                         style: {
@@ -2235,12 +2235,12 @@ function Ut({
     }
   );
 }
-function Yt() {
+function Vt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: q,
+        width: G,
         height: H,
         background: "linear-gradient(180deg, #040c1a 0%, #030810 100%)",
         position: "relative",
@@ -2349,7 +2349,7 @@ function Yt() {
     }
   );
 }
-function ot({
+function at({
   side: t,
   color: n,
   brandLabel: o
@@ -2449,13 +2449,13 @@ function ot({
     }
   );
 }
-function Vt({ cpuLoad: t }) {
+function _t({ cpuLoad: t }) {
   const n = t / 100, o = n > 0.75 ? "rgba(255,34,85,0.16)" : n > 0.45 ? "rgba(255,140,0,0.12)" : "rgba(0,229,255,0.08)", i = Math.floor((Z - 18) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: q,
+        width: G,
         height: Z,
         background: "linear-gradient(180deg, #0c1c30 0%, #070f1e 40%, #040c1a 100%)",
         position: "relative",
@@ -2529,7 +2529,7 @@ function Vt({ cpuLoad: t }) {
     }
   );
 }
-function ue({
+function ae({
   rotateX: t = -22,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -2542,17 +2542,17 @@ function ue({
   brandLabel: c = "BUSAUD",
   _compact: p
 }) {
-  const [f, y] = L(n), u = ee(0), g = ee(0);
-  Ee(() => {
+  const [f, g] = I(n), u = ee(0), y = ee(0);
+  Te(() => {
     if (!r) {
-      y(n);
+      g(n);
       return;
     }
     const x = (v) => {
-      g.current && y(($) => $ + (v - g.current) * 0.027), g.current = v, u.current = requestAnimationFrame(x);
+      y.current && g(($) => $ + (v - y.current) * 0.027), y.current = v, u.current = requestAnimationFrame(x);
     };
     return u.current = requestAnimationFrame(x), () => {
-      cancelAnimationFrame(u.current), g.current = 0;
+      cancelAnimationFrame(u.current), y.current = 0;
     };
   }, [r, n]);
   const m = w[a] ?? w.online;
@@ -2560,7 +2560,7 @@ function ue({
     "div",
     {
       style: {
-        width: q * i,
+        width: G * i,
         height: H * i,
         position: "relative",
         display: "flex",
@@ -2613,7 +2613,7 @@ function ue({
           {
             style: {
               position: "absolute",
-              width: q * 1.4 * i,
+              width: G * 1.4 * i,
               height: H * 0.8 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(45 * i)}px)`,
@@ -2637,7 +2637,7 @@ function ue({
               "div",
               {
                 style: {
-                  width: q,
+                  width: G,
                   height: H,
                   position: "relative",
                   transformStyle: "preserve-3d",
@@ -2645,8 +2645,8 @@ function ue({
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: de.front, children: /* @__PURE__ */ e(
-                    Ut,
+                  /* @__PURE__ */ e("div", { style: ce.front, children: /* @__PURE__ */ e(
+                    Yt,
                     {
                       cfg: m,
                       name: s,
@@ -2657,15 +2657,15 @@ function ue({
                       brandLabel: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: de.back, children: /* @__PURE__ */ e(Yt, {}) }),
-                  /* @__PURE__ */ e("div", { style: de.left, children: /* @__PURE__ */ e(ot, { side: "left", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: de.right, children: /* @__PURE__ */ e(ot, { side: "right", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: de.top, children: /* @__PURE__ */ e(Vt, { cpuLoad: l }) }),
-                  /* @__PURE__ */ e("div", { style: de.bottom, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: ce.back, children: /* @__PURE__ */ e(Vt, {}) }),
+                  /* @__PURE__ */ e("div", { style: ce.left, children: /* @__PURE__ */ e(at, { side: "left", color: m.color, brandLabel: c }) }),
+                  /* @__PURE__ */ e("div", { style: ce.right, children: /* @__PURE__ */ e(at, { side: "right", color: m.color, brandLabel: c }) }),
+                  /* @__PURE__ */ e("div", { style: ce.top, children: /* @__PURE__ */ e(_t, { cpuLoad: l }) }),
+                  /* @__PURE__ */ e("div", { style: ce.bottom, children: /* @__PURE__ */ e(
                     "div",
                     {
                       style: {
-                        width: q,
+                        width: G,
                         height: Z,
                         background: "linear-gradient(180deg, #030710, #020508)"
                       }
@@ -2680,11 +2680,56 @@ function ue({
     }
   );
 }
-const Xe = 12, re = 55, _ = re * 2, he = 52, Ze = 10, He = 3 * he + 2 * Ze, ce = 2 * Math.PI * re / Xe, Ue = Array.from({ length: Xe }, (t, n) => n / Xe * 360);
+function wi({
+  ex: t,
+  ey: n,
+  compactOffset: o,
+  zIndex: i,
+  name: r = "SRV-01",
+  status: a = "online",
+  subLabel: s,
+  color: l,
+  delay: h,
+  visibleAtPhase: c,
+  cpuLoad: p,
+  memLoad: f,
+  brandLabel: g,
+  dialogMetrics: u,
+  subComponents: y,
+  graphSeries: m,
+  alert: x
+}) {
+  return /* @__PURE__ */ e(
+    k,
+    {
+      ex: t,
+      ey: n,
+      compactOffset: o,
+      zIndex: i,
+      label: r,
+      subLabel: s,
+      color: l,
+      delay: h,
+      visibleAtPhase: c,
+      componentInfo: {
+        type: "server",
+        name: r,
+        status: a,
+        context: { cpuLoad: p, memLoad: f },
+        dialogMetrics: u,
+        subComponents: y,
+        graphSeries: m
+      },
+      alert: x,
+      children: /* @__PURE__ */ e(ae, { status: a, cpuLoad: p, memLoad: f, brandLabel: g })
+    }
+  );
+}
+const Xe = 12, re = 55, _ = re * 2, ue = 52, Ze = 10, He = 3 * ue + 2 * Ze, pe = 2 * Math.PI * re / Xe, Ue = Array.from({ length: Xe }, (t, n) => n / Xe * 360);
 function Ye(t) {
   return Math.cos(t * Math.PI / 180) * 0.42 + 0.58;
 }
-function _t({
+function Xt({
   diskY: t,
   diskIdx: n,
   cfg: o,
@@ -2694,19 +2739,19 @@ function _t({
 }) {
   return /* @__PURE__ */ d(ve, { children: [
     Ue.map((s, l) => {
-      const h = Ye(s), c = l === 0, p = Math.round(4 + h * 9), f = Math.round(12 + h * 22), y = Math.round(28 + h * 44), u = Math.round(h * 0.55 * 255).toString(16).padStart(2, "0");
+      const h = Ye(s), c = l === 0, p = Math.round(4 + h * 9), f = Math.round(12 + h * 22), g = Math.round(28 + h * 44), u = Math.round(h * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: ce,
-            height: he,
-            left: (_ - ce) / 2,
+            width: pe,
+            height: ue,
+            left: (_ - pe) / 2,
             top: t,
             transform: `rotateY(${s}deg) translateZ(${re}px)`,
             backfaceVisibility: "hidden",
-            background: c ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${f},${y})`,
+            background: c ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${f},${g})`,
             borderLeft: `1px solid ${o.color}${u}`,
             boxShadow: c ? `inset 0 0 18px ${o.color}28` : "none"
           },
@@ -2827,7 +2872,7 @@ function _t({
           width: _ + 4,
           height: _ + 4,
           left: -2,
-          top: t + he - re,
+          top: t + ue - re,
           borderRadius: "50%",
           transform: "rotateX(-90deg)",
           backfaceVisibility: "hidden",
@@ -2858,10 +2903,10 @@ function _t({
         {
           style: {
             position: "absolute",
-            width: ce + 1.5,
+            width: pe + 1.5,
             height: 6,
-            left: (_ - ce - 1.5) / 2,
-            top: t + he - 3,
+            left: (_ - pe - 1.5) / 2,
+            top: t + ue - 3,
             transform: `rotateY(${s}deg) translateZ(${re + 1.5}px)`,
             backfaceVisibility: "hidden",
             background: o.color,
@@ -2879,10 +2924,10 @@ function _t({
         {
           style: {
             position: "absolute",
-            width: ce,
+            width: pe,
             height: Ze,
-            left: (_ - ce) / 2,
-            top: t + he,
+            left: (_ - pe) / 2,
+            top: t + ue,
             transform: `rotateY(${s}deg) translateZ(${re}px)`,
             backfaceVisibility: "hidden",
             background: `rgb(${c},${p},${f})`
@@ -2893,7 +2938,7 @@ function _t({
     })
   ] });
 }
-function Oe({
+function Ee({
   rotateX: t = -22,
   rotateY: n = -15,
   rotateZ: o = 0,
@@ -2905,20 +2950,20 @@ function Oe({
   // connections = 284,
   _compact: l
 }) {
-  const [h, c] = L(n), p = ee(0), f = ee(0);
-  Ee(() => {
+  const [h, c] = I(n), p = ee(0), f = ee(0);
+  Te(() => {
     if (!r) {
       c(n);
       return;
     }
-    const u = (g) => {
-      f.current && c((m) => m + (g - f.current) * 0.027), f.current = g, p.current = requestAnimationFrame(u);
+    const u = (y) => {
+      f.current && c((m) => m + (y - f.current) * 0.027), f.current = y, p.current = requestAnimationFrame(u);
     };
     return p.current = requestAnimationFrame(u), () => {
       cancelAnimationFrame(p.current), f.current = 0;
     };
   }, [r, n]);
-  const y = w[a] ?? w.online;
+  const g = w[a] ?? w.online;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -2986,7 +3031,7 @@ function Oe({
               position: "absolute",
               width: _ * 2.8 * i,
               height: He * 0.85 * i,
-              background: `radial-gradient(ellipse, ${y.glow} 0%, transparent 65%)`,
+              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * i)}px)`,
               pointerEvents: "none",
               top: "45%",
@@ -3016,11 +3061,11 @@ function Oe({
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [0, 1, 2].map((u) => /* @__PURE__ */ e(
-                  _t,
+                  Xt,
                   {
-                    diskY: u * (he + Ze),
+                    diskY: u * (ue + Ze),
                     diskIdx: u,
-                    cfg: y,
+                    cfg: g,
                     hasRingBelow: u < 2,
                     capacity: s,
                     compact: l
@@ -3035,8 +3080,186 @@ function Oe({
     }
   );
 }
-const G = 190, U = 72, be = 120, pe = qe(G, U, be);
-function Xt({
+function Si({
+  ex: t,
+  ey: n,
+  compactOffset: o,
+  zIndex: i,
+  name: r = "DB-01",
+  status: a = "online",
+  subLabel: s,
+  color: l,
+  delay: h,
+  visibleAtPhase: c,
+  capacity: p,
+  dialogMetrics: f,
+  subComponents: g,
+  graphSeries: u,
+  alert: y
+}) {
+  return /* @__PURE__ */ e(
+    k,
+    {
+      ex: t,
+      ey: n,
+      compactOffset: o,
+      zIndex: i,
+      label: r,
+      subLabel: s,
+      color: l,
+      delay: h,
+      visibleAtPhase: c,
+      componentInfo: {
+        type: "database",
+        name: r,
+        status: a,
+        context: { capacity: p },
+        dialogMetrics: f,
+        subComponents: g,
+        graphSeries: u
+      },
+      alert: y,
+      children: /* @__PURE__ */ e(Ee, { status: a, capacity: p })
+    }
+  );
+}
+function Je({ status: t = "online", scale: n = 1 }) {
+  const i = (w[t] ?? w.online).color;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        width: 80 * n,
+        height: 140 * n,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ d(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            fontFamily: "'Courier New', monospace",
+            userSelect: "none",
+            transform: `scale(${n})`,
+            transformOrigin: "center center"
+          },
+          children: [
+            /* @__PURE__ */ d("div", { style: { position: "relative", animation: "holo-float 4s ease-in-out infinite" }, children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: "1.5px",
+                    background: `linear-gradient(90deg, transparent 5%, ${i}cc 40%, #fff 50%, ${i}cc 60%, transparent 95%)`,
+                    boxShadow: `0 0 8px ${i}`,
+                    animation: "holo-scan 3.5s linear infinite",
+                    pointerEvents: "none",
+                    zIndex: 10
+                  }
+                }
+              ),
+              /* @__PURE__ */ d(
+                "svg",
+                {
+                  width: "70",
+                  height: "75",
+                  viewBox: "0 0 70 75",
+                  style: { display: "block", overflow: "visible" },
+                  children: [
+                    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("radialGradient", { id: `usr-glow-${t}`, cx: "50%", cy: "45%", r: "55%", children: [
+                      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: i, stopOpacity: "0.12" }),
+                      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: i, stopOpacity: "0" })
+                    ] }) }),
+                    /* @__PURE__ */ e("ellipse", { cx: "35", cy: "37", rx: "34", ry: "32", fill: `url(#usr-glow-${t})` }),
+                    /* @__PURE__ */ e(
+                      "circle",
+                      {
+                        cx: "35",
+                        cy: "20",
+                        r: "13",
+                        fill: i + "0a",
+                        stroke: i,
+                        strokeWidth: "1.5",
+                        style: { filter: `drop-shadow(0 0 6px ${i})` }
+                      }
+                    ),
+                    /* @__PURE__ */ e("circle", { cx: "35", cy: "20", r: "7", fill: "none", stroke: i + "30", strokeWidth: "0.5" }),
+                    /* @__PURE__ */ e("circle", { cx: "35", cy: "20", r: "3", fill: i + "18", stroke: "none" }),
+                    /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: "M7 71 Q7 47 20 39 Q27 35 35 35 Q43 35 50 39 Q63 47 63 71",
+                        fill: i + "08",
+                        stroke: i,
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        style: { filter: `drop-shadow(0 0 5px ${i})` }
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: "M16 65 Q16 51 26 44 Q30 42 35 42 Q40 42 44 44 Q54 51 54 65",
+                        fill: "none",
+                        stroke: i + "20",
+                        strokeWidth: "0.6",
+                        strokeDasharray: "4,5"
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: "M24 61 Q24 53 30 49 Q32 48 35 48 Q38 48 40 49 Q46 53 46 61",
+                        fill: "none",
+                        stroke: i + "18",
+                        strokeWidth: "0.5",
+                        strokeDasharray: "2,4"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { style: { height: 22 } })
+          ]
+        }
+      )
+    }
+  );
+}
+function $i({
+  ex: t,
+  ey: n,
+  compactOffset: o,
+  zIndex: i,
+  status: r = "online",
+  scale: a,
+  color: s,
+  visibleAtPhase: l
+}) {
+  return /* @__PURE__ */ e(
+    k,
+    {
+      ex: t,
+      ey: n,
+      compactOffset: o,
+      zIndex: i,
+      color: s,
+      visibleAtPhase: l,
+      children: /* @__PURE__ */ e(Je, { status: r, scale: a })
+    }
+  );
+}
+const q = 190, U = 72, be = 120, fe = Ge(q, U, be);
+function jt({
   cfg: t,
   name: n,
   traffic: o,
@@ -3048,7 +3271,7 @@ function Xt({
     "div",
     {
       style: {
-        width: G,
+        width: q,
         height: U,
         background: r ? Se : Qe,
         position: "relative",
@@ -3298,12 +3521,12 @@ function Xt({
     }
   );
 }
-function jt() {
+function Qt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: G,
+        width: q,
         height: U,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
@@ -3386,7 +3609,7 @@ function jt() {
     }
   );
 }
-function rt({ side: t, color: n }) {
+function lt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
@@ -3443,13 +3666,13 @@ function rt({ side: t, color: n }) {
     }
   );
 }
-function Qt({ traffic: t }) {
+function Gt({ traffic: t }) {
   const n = Math.floor((be - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: G,
+        width: q,
         height: be,
         background: "linear-gradient(180deg, #0c1c30 0%, #07101e 40%, #040c1a 100%)",
         position: "relative",
@@ -3502,7 +3725,7 @@ function Qt({ traffic: t }) {
     }
   );
 }
-function pt({
+function et({
   rotateX: t = -20,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -3514,25 +3737,25 @@ function pt({
   activeRoutes: h = 12,
   _compact: c
 }) {
-  const [p, f] = L(n), y = ee(0), u = ee(0);
-  Ee(() => {
+  const [p, f] = I(n), g = ee(0), u = ee(0);
+  Te(() => {
     if (!r) {
       f(n);
       return;
     }
     const m = (x) => {
-      u.current && f((v) => v + (x - u.current) * 0.027), u.current = x, y.current = requestAnimationFrame(m);
+      u.current && f((v) => v + (x - u.current) * 0.027), u.current = x, g.current = requestAnimationFrame(m);
     };
-    return y.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(y.current), u.current = 0;
+    return g.current = requestAnimationFrame(m), () => {
+      cancelAnimationFrame(g.current), u.current = 0;
     };
   }, [r, n]);
-  const g = w[a] ?? w.online;
+  const y = w[a] ?? w.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: G * i,
+        width: q * i,
         height: U * i,
         position: "relative",
         display: "flex",
@@ -3593,9 +3816,9 @@ function pt({
           {
             style: {
               position: "absolute",
-              width: G * 1.3 * i,
+              width: q * 1.3 * i,
               height: U * 2 * i,
-              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
+              background: `radial-gradient(ellipse, ${y.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
               top: "40%",
@@ -3617,7 +3840,7 @@ function pt({
               "div",
               {
                 style: {
-                  width: G,
+                  width: q,
                   height: U,
                   position: "relative",
                   transformStyle: "preserve-3d",
@@ -3625,21 +3848,21 @@ function pt({
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: pe.front, children: /* @__PURE__ */ e(
-                    Xt,
+                  /* @__PURE__ */ e("div", { style: fe.front, children: /* @__PURE__ */ e(
+                    jt,
                     {
-                      cfg: g,
+                      cfg: y,
                       name: s,
                       traffic: l,
                       activeRoutes: h,
                       compact: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: pe.back, children: /* @__PURE__ */ e(jt, {}) }),
-                  /* @__PURE__ */ e("div", { style: pe.left, children: /* @__PURE__ */ e(rt, { side: "left", color: g.color }) }),
-                  /* @__PURE__ */ e("div", { style: pe.right, children: /* @__PURE__ */ e(rt, { side: "right", color: g.color }) }),
-                  /* @__PURE__ */ e("div", { style: pe.top, children: /* @__PURE__ */ e(Qt, { traffic: l }) }),
-                  /* @__PURE__ */ e("div", { style: pe.bottom, children: /* @__PURE__ */ e("div", { style: { width: G, height: be, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: fe.back, children: /* @__PURE__ */ e(Qt, {}) }),
+                  /* @__PURE__ */ e("div", { style: fe.left, children: /* @__PURE__ */ e(lt, { side: "left", color: y.color }) }),
+                  /* @__PURE__ */ e("div", { style: fe.right, children: /* @__PURE__ */ e(lt, { side: "right", color: y.color }) }),
+                  /* @__PURE__ */ e("div", { style: fe.top, children: /* @__PURE__ */ e(Gt, { traffic: l }) }),
+                  /* @__PURE__ */ e("div", { style: fe.bottom, children: /* @__PURE__ */ e("div", { style: { width: q, height: be, background: "#020508" } }) })
                 ]
               }
             )
@@ -3649,7 +3872,51 @@ function pt({
     }
   );
 }
-const K = 190, Y = 72, ge = 120, fe = qe(K, Y, ge), at = {
+function ki({
+  ex: t,
+  ey: n,
+  compactOffset: o,
+  zIndex: i,
+  name: r = "WEB-DISP",
+  status: a = "online",
+  subLabel: s,
+  color: l,
+  delay: h,
+  visibleAtPhase: c,
+  traffic: p,
+  activeRoutes: f,
+  dialogMetrics: g,
+  subComponents: u,
+  graphSeries: y,
+  alert: m
+}) {
+  return /* @__PURE__ */ e(
+    k,
+    {
+      ex: t,
+      ey: n,
+      compactOffset: o,
+      zIndex: i,
+      label: r,
+      subLabel: s,
+      color: l,
+      delay: h,
+      visibleAtPhase: c,
+      componentInfo: {
+        type: "dispatcher",
+        name: r,
+        status: a,
+        context: { traffic: p, activeRoutes: f },
+        dialogMetrics: g,
+        subComponents: u,
+        graphSeries: y
+      },
+      alert: m,
+      children: /* @__PURE__ */ e(et, { status: a, traffic: p, activeRoutes: f })
+    }
+  );
+}
+const K = 190, Y = 72, ge = 120, he = Ge(K, Y, ge), st = {
   online: { color: "#bb55ff", glow: "rgba(187,85,255,0.50)" },
   warning: { color: "#ff8c00", glow: "rgba(255,140,0,0.50)" },
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.50)" },
@@ -3914,7 +4181,7 @@ function qt({
     }
   );
 }
-function Gt() {
+function Kt() {
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4002,7 +4269,7 @@ function Gt() {
     }
   );
 }
-function lt({ side: t, color: n }) {
+function dt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4059,7 +4326,7 @@ function lt({ side: t, color: n }) {
     }
   );
 }
-function Kt({ queueDepth: t, color: n }) {
+function Zt({ queueDepth: t, color: n }) {
   const o = Math.floor((ge - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
@@ -4118,7 +4385,7 @@ function Kt({ queueDepth: t, color: n }) {
     }
   );
 }
-function Zt({
+function ht({
   rotateX: t = -20,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -4131,20 +4398,20 @@ function Zt({
   instances: c = 3,
   _compact: p
 }) {
-  const [f, y] = L(n), u = ee(0), g = ee(0);
-  Ee(() => {
+  const [f, g] = I(n), u = ee(0), y = ee(0);
+  Te(() => {
     if (!r) {
-      y(n);
+      g(n);
       return;
     }
     const x = (v) => {
-      g.current && y(($) => $ + (v - g.current) * 0.027), g.current = v, u.current = requestAnimationFrame(x);
+      y.current && g(($) => $ + (v - y.current) * 0.027), y.current = v, u.current = requestAnimationFrame(x);
     };
     return u.current = requestAnimationFrame(x), () => {
-      cancelAnimationFrame(u.current), g.current = 0;
+      cancelAnimationFrame(u.current), y.current = 0;
     };
   }, [r, n]);
-  const m = at[a] ?? at.online;
+  const m = st[a] ?? st.online;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4242,7 +4509,7 @@ function Zt({
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: fe.front, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: he.front, children: /* @__PURE__ */ e(
                     qt,
                     {
                       cfg: m,
@@ -4253,11 +4520,11 @@ function Zt({
                       compact: p
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: fe.back, children: /* @__PURE__ */ e(Gt, {}) }),
-                  /* @__PURE__ */ e("div", { style: fe.left, children: /* @__PURE__ */ e(lt, { side: "left", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.right, children: /* @__PURE__ */ e(lt, { side: "right", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.top, children: /* @__PURE__ */ e(Kt, { queueDepth: l, color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.bottom, children: /* @__PURE__ */ e("div", { style: { width: K, height: ge, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: he.back, children: /* @__PURE__ */ e(Kt, {}) }),
+                  /* @__PURE__ */ e("div", { style: he.left, children: /* @__PURE__ */ e(dt, { side: "left", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: he.right, children: /* @__PURE__ */ e(dt, { side: "right", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: he.top, children: /* @__PURE__ */ e(Zt, { queueDepth: l, color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: he.bottom, children: /* @__PURE__ */ e("div", { style: { width: K, height: ge, background: "#020508" } }) })
                 ]
               }
             )
@@ -4267,119 +4534,60 @@ function Zt({
     }
   );
 }
-function ft({ status: t = "online", scale: n = 1 }) {
-  const i = (w[t] ?? w.online).color;
+function Ri({
+  ex: t,
+  ey: n,
+  compactOffset: o,
+  zIndex: i,
+  name: r = "MSG-SRV",
+  status: a = "online",
+  subLabel: s,
+  color: l,
+  delay: h,
+  visibleAtPhase: c,
+  queueDepth: p,
+  msgsPerSec: f,
+  instances: g,
+  dialogMetrics: u,
+  subComponents: y,
+  graphSeries: m,
+  alert: x
+}) {
   return /* @__PURE__ */ e(
-    "div",
+    k,
     {
-      style: {
-        width: 80 * n,
-        height: 140 * n,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
+      ex: t,
+      ey: n,
+      compactOffset: o,
+      zIndex: i,
+      label: r,
+      subLabel: s,
+      color: l,
+      delay: h,
+      visibleAtPhase: c,
+      componentInfo: {
+        type: "messageServer",
+        name: r,
+        status: a,
+        context: { queueDepth: p, msgsPerSec: f, instances: g },
+        dialogMetrics: u,
+        subComponents: y,
+        graphSeries: m
       },
-      children: /* @__PURE__ */ d(
-        "div",
+      alert: x,
+      children: /* @__PURE__ */ e(
+        ht,
         {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            fontFamily: "'Courier New', monospace",
-            userSelect: "none",
-            transform: `scale(${n})`,
-            transformOrigin: "center center"
-          },
-          children: [
-            /* @__PURE__ */ d("div", { style: { position: "relative", animation: "holo-float 4s ease-in-out infinite" }, children: [
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    height: "1.5px",
-                    background: `linear-gradient(90deg, transparent 5%, ${i}cc 40%, #fff 50%, ${i}cc 60%, transparent 95%)`,
-                    boxShadow: `0 0 8px ${i}`,
-                    animation: "holo-scan 3.5s linear infinite",
-                    pointerEvents: "none",
-                    zIndex: 10
-                  }
-                }
-              ),
-              /* @__PURE__ */ d(
-                "svg",
-                {
-                  width: "70",
-                  height: "75",
-                  viewBox: "0 0 70 75",
-                  style: { display: "block", overflow: "visible" },
-                  children: [
-                    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("radialGradient", { id: `usr-glow-${t}`, cx: "50%", cy: "45%", r: "55%", children: [
-                      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: i, stopOpacity: "0.12" }),
-                      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: i, stopOpacity: "0" })
-                    ] }) }),
-                    /* @__PURE__ */ e("ellipse", { cx: "35", cy: "37", rx: "34", ry: "32", fill: `url(#usr-glow-${t})` }),
-                    /* @__PURE__ */ e(
-                      "circle",
-                      {
-                        cx: "35",
-                        cy: "20",
-                        r: "13",
-                        fill: i + "0a",
-                        stroke: i,
-                        strokeWidth: "1.5",
-                        style: { filter: `drop-shadow(0 0 6px ${i})` }
-                      }
-                    ),
-                    /* @__PURE__ */ e("circle", { cx: "35", cy: "20", r: "7", fill: "none", stroke: i + "30", strokeWidth: "0.5" }),
-                    /* @__PURE__ */ e("circle", { cx: "35", cy: "20", r: "3", fill: i + "18", stroke: "none" }),
-                    /* @__PURE__ */ e(
-                      "path",
-                      {
-                        d: "M7 71 Q7 47 20 39 Q27 35 35 35 Q43 35 50 39 Q63 47 63 71",
-                        fill: i + "08",
-                        stroke: i,
-                        strokeWidth: "1.5",
-                        strokeLinecap: "round",
-                        style: { filter: `drop-shadow(0 0 5px ${i})` }
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      "path",
-                      {
-                        d: "M16 65 Q16 51 26 44 Q30 42 35 42 Q40 42 44 44 Q54 51 54 65",
-                        fill: "none",
-                        stroke: i + "20",
-                        strokeWidth: "0.6",
-                        strokeDasharray: "4,5"
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      "path",
-                      {
-                        d: "M24 61 Q24 53 30 49 Q32 48 35 48 Q38 48 40 49 Q46 53 46 61",
-                        fill: "none",
-                        stroke: i + "18",
-                        strokeWidth: "0.5",
-                        strokeDasharray: "2,4"
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e("div", { style: { height: 22 } })
-          ]
+          status: a,
+          queueDepth: p,
+          msgsPerSec: f,
+          instances: g
         }
       )
     }
   );
 }
-function C(t, n, o = 24) {
+function E(t, n, o = 24) {
   return Array.from({ length: o }, (i, r) => {
     const a = r / o;
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
@@ -4479,39 +4687,39 @@ function ti(t, n) {
   if (t === "server") {
     const o = n.cpuLoad ?? 50, i = n.memLoad ?? 60;
     return [
-      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: C(o, 15) },
-      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: C(o * 0.7, 12) },
-      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: C(i, 18) },
-      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: C(i * 0.85, 14) },
-      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: C(40, 25) },
-      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: C(35, 20) },
-      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: C(30, 22) },
-      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: C(55, 20) }
+      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: E(o, 15) },
+      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: E(o * 0.7, 12) },
+      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: E(i, 18) },
+      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: E(i * 0.85, 14) },
+      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: E(40, 25) },
+      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: E(35, 20) },
+      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: E(30, 22) },
+      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: E(55, 20) }
     ];
   }
   if (t === "dispatcher" || t === "messageServer") {
     const o = n.traffic ?? n.queueDepth ?? 50;
     return [
-      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: C(o, 20) },
-      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: C(60, 25) },
-      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: C(45, 20) },
-      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: C(70, 30) },
-      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: C(o * 0.9, 15) }
+      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: E(o, 20) },
+      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: E(60, 25) },
+      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: E(45, 20) },
+      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: E(70, 30) },
+      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: E(o * 0.9, 15) }
     ];
   }
   if (t === "database") {
     const o = n.capacity ?? 70;
     return [
-      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: C(40, 20) },
-      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: C(55, 25) },
-      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: C(35, 18) },
-      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: C(o, 15) },
-      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: C(75, 12) }
+      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: E(40, 20) },
+      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: E(55, 25) },
+      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: E(35, 18) },
+      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: E(o, 15) },
+      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: E(75, 12) }
     ];
   }
   return [];
 }
-function ht({
+function ut({
   w: t,
   h: n,
   color: o,
@@ -4818,7 +5026,7 @@ function ye({
   status: o = "online",
   activity: i = !1
 }) {
-  return /* @__PURE__ */ d(ht, { w: 56, h: 22, color: t, label: n, status: o, children: [
+  return /* @__PURE__ */ d(ut, { w: 56, h: 22, color: t, label: n, status: o, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -4851,7 +5059,7 @@ function ye({
     )
   ] });
 }
-function ut({
+function bt({
   color: t = "#00e5ff",
   label: n = "NET",
   status: o = "online"
@@ -4920,9 +5128,9 @@ function O({
   label: n = "THREAD",
   status: o = "online"
 }) {
-  return /* @__PURE__ */ e(ht, { w: 44, h: 28, color: t, label: n, status: o });
+  return /* @__PURE__ */ e(ut, { w: 44, h: 28, color: t, label: n, status: o });
 }
-function Ie({
+function Oe({
   color: t = "#ff8c00",
   label: n = "PLATTER-0",
   status: o = "online",
@@ -5180,7 +5388,7 @@ function ii(t, n, o, i) {
     }
   ] : [];
 }
-const T = "cubic-bezier(0.34, 1.56, 0.64, 1)", ni = "cubic-bezier(0.16, 1, 0.3, 1)";
+const A = "cubic-bezier(0.34, 1.56, 0.64, 1)", ni = "cubic-bezier(0.16, 1, 0.3, 1)";
 function oi({ items: t, revealPhase: n }) {
   return /* @__PURE__ */ e(
     "div",
@@ -5199,7 +5407,7 @@ function oi({ items: t, revealPhase: n }) {
           style: {
             opacity: n >= 0.2 + i * 0.06 ? 1 : 0,
             transform: `scale(${n >= 0.2 + i * 0.06 ? 1 : 0.6})`,
-            transition: `opacity 0.4s ${T} ${i * 0.06}s, transform 0.45s ${T} ${i * 0.06}s`
+            transition: `opacity 0.4s ${A} ${i * 0.06}s, transform 0.45s ${A} ${i * 0.06}s`
           },
           children: o.element
         },
@@ -5313,7 +5521,7 @@ function ri({
       {
         key: "net",
         delay: 8,
-        el: /* @__PURE__ */ e(ut, { color: a, label: "NET", status: i[8]?.status })
+        el: /* @__PURE__ */ e(bt, { color: a, label: "NET", status: i[8]?.status })
       }
     ];
     return /* @__PURE__ */ e(
@@ -5327,15 +5535,15 @@ function ri({
           alignItems: "center",
           padding: 24
         },
-        children: c.map(({ key: p, delay: f, el: y }) => /* @__PURE__ */ e(
+        children: c.map(({ key: p, delay: f, el: g }) => /* @__PURE__ */ e(
           "div",
           {
             style: {
               opacity: r >= 0.2 + f * 0.08 ? 1 : 0,
               transform: `scale(${r >= 0.2 + f * 0.08 ? 1 : 0.6})`,
-              transition: `opacity 0.4s ${T} ${f * 0.06}s, transform 0.45s ${T} ${f * 0.06}s`
+              transition: `opacity 0.4s ${A} ${f * 0.06}s, transform 0.45s ${A} ${f * 0.06}s`
             },
-            children: y
+            children: g
           },
           p
         ))
@@ -5351,7 +5559,7 @@ function ri({
           style: {
             opacity: r >= 0.25 + c * 0.04 ? 1 : 0,
             transform: `scale(${r >= 0.25 + c * 0.04 ? 1 : 0.5})`,
-            transition: `opacity 0.35s ${T} ${c * 0.04}s, transform 0.4s ${T} ${c * 0.04}s`
+            transition: `opacity 0.35s ${A} ${c * 0.04}s, transform 0.4s ${A} ${c * 0.04}s`
           },
           children: /* @__PURE__ */ e(B, { color: a, label: `PORT-${c + 1}`, status: p?.status })
         },
@@ -5377,7 +5585,7 @@ function ri({
                 style: {
                   opacity: r >= 0.7 ? 1 : 0,
                   transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${T} 0.3s`
+                  transition: `all 0.4s ${A} 0.3s`
                 },
                 children: /* @__PURE__ */ e(O, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
               }
@@ -5388,7 +5596,7 @@ function ri({
                 style: {
                   opacity: r >= 0.8 ? 1 : 0,
                   transform: `scale(${r >= 0.8 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${T} 0.4s`
+                  transition: `all 0.4s ${A} 0.4s`
                 },
                 children: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
               }
@@ -5417,7 +5625,7 @@ function ri({
               style: {
                 opacity: r >= 0.25 + l * 0.1 ? 1 : 0,
                 transform: `scale(${r >= 0.25 + l * 0.1 ? 1 : 0.6})`,
-                transition: `all 0.4s ${T} ${l * 0.08}s`
+                transition: `all 0.4s ${A} ${l * 0.08}s`
               },
               children: /* @__PURE__ */ e(B, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
             },
@@ -5429,7 +5637,7 @@ function ri({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${T} 0.25s`
+                transition: `all 0.4s ${A} 0.25s`
               },
               children: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
             }
@@ -5440,7 +5648,7 @@ function ri({
               style: {
                 opacity: r >= 0.7 + (l - 4) * 0.08 ? 1 : 0,
                 transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                transition: `all 0.4s ${T} ${0.35 + (l - 4) * 0.05}s`
+                transition: `all 0.4s ${A} ${0.35 + (l - 4) * 0.05}s`
               },
               children: /* @__PURE__ */ e(
                 O,
@@ -5476,10 +5684,10 @@ function ri({
               style: {
                 opacity: r >= 0.2 + h * 0.12 ? 1 : 0,
                 transform: `scale(${r >= 0.2 + h * 0.12 ? 1 : 0.5})`,
-                transition: `all 0.45s ${T} ${h * 0.1}s`
+                transition: `all 0.45s ${A} ${h * 0.1}s`
               },
               children: /* @__PURE__ */ e(
-                Ie,
+                Oe,
                 {
                   color: s,
                   label: `PLATTER-${h}`,
@@ -5496,7 +5704,7 @@ function ri({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${T} 0.3s`
+                transition: `all 0.4s ${A} 0.3s`
               },
               children: /* @__PURE__ */ e(O, { color: s, label: "CONN-POOL", status: i[3]?.status })
             }
@@ -5507,7 +5715,7 @@ function ri({
               style: {
                 opacity: r >= 0.75 ? 1 : 0,
                 transform: `scale(${r >= 0.75 ? 1 : 0.6})`,
-                transition: `all 0.4s ${T} 0.4s`
+                transition: `all 0.4s ${A} 0.4s`
               },
               children: /* @__PURE__ */ e(O, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
             }
@@ -5518,7 +5726,7 @@ function ri({
   }
   return null;
 }
-function wi({
+function Pi({
   type: t,
   name: n,
   status: o,
@@ -5528,7 +5736,7 @@ function wi({
   subComponents: s,
   graphSeries: l
 }) {
-  const h = ii(t, n, o, a), c = w[o]?.color ?? w.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", y = r >= 0.2 ? "50%" : "0%", u = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
+  const h = ii(t, n, o, a), c = w[o]?.color ?? w.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", g = r >= 0.2 ? "50%" : "0%", u = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -5540,7 +5748,7 @@ function wi({
         flexDirection: "row",
         pointerEvents: "auto"
       },
-      onClick: (g) => g.stopPropagation(),
+      onClick: (y) => y.stopPropagation(),
       children: [
         /* @__PURE__ */ e(
           "div",
@@ -5602,7 +5810,7 @@ function wi({
                           borderRight: `2px solid ${c}44`,
                           boxShadow: "4px 0 32px rgba(0,0,0,0.6)",
                           transform: `translateX(${f})`,
-                          transition: `transform 0.7s ${T}`
+                          transition: `transform 0.7s ${A}`
                         }
                       }
                     ),
@@ -5616,8 +5824,8 @@ function wi({
                           background: "linear-gradient(90deg, rgba(2, 12, 28, 0.95) 0%, rgba(2, 8, 20, 0.98) 100%)",
                           borderLeft: `2px solid ${c}44`,
                           boxShadow: "-4px 0 32px rgba(0,0,0,0.6)",
-                          transform: `translateX(${y})`,
-                          transition: `transform 0.7s ${T}`
+                          transform: `translateX(${g})`,
+                          transition: `transform 0.7s ${A}`
                         }
                       }
                     )
@@ -5640,7 +5848,7 @@ function wi({
                     display: "flex",
                     flexDirection: "column",
                     opacity: u >= 0.1 ? 1 : 0,
-                    transition: `opacity 0.5s ${T} 0.2s`
+                    transition: `opacity 0.5s ${A} 0.2s`
                   },
                   children: [
                     /* @__PURE__ */ d(
@@ -5749,7 +5957,7 @@ function wi({
     }
   );
 }
-function Si({
+function Ci({
   brandName: t = "BUSAUD AIOps",
   brandTag: n = "3D MONITOR",
   services: o = [],
@@ -5759,28 +5967,28 @@ function Si({
   fontFamily: s,
   children: l
 }) {
-  const [h] = L(20), [c] = L(!1), [p] = L(!0), [f] = L(0.45), [y] = L(3.3), [u, g] = L("compact"), [m, x] = L(0), [v, $] = L(null), [b, k] = L(null), [D, P] = L(0), E = (R) => {
-    u === "compact" && ($(R), g("expanding"), x(0), setTimeout(() => x(1), 50), setTimeout(() => x(2), 800), setTimeout(() => x(3), 1200), setTimeout(() => x(4), 1600), setTimeout(() => x(5), 2e3), setTimeout(() => {
-      x(6), g("expanded");
+  const [h] = I(20), [c] = I(!1), [p] = I(!0), [f] = I(0.45), [g] = I(3.3), [u, y] = I("compact"), [m, x] = I(0), [v, $] = I(null), [b, R] = I(null), [D, C] = I(0), T = (P) => {
+    u === "compact" && ($(P), y("expanding"), x(0), setTimeout(() => x(1), 50), setTimeout(() => x(2), 800), setTimeout(() => x(3), 1200), setTimeout(() => x(4), 1600), setTimeout(() => x(5), 2e3), setTimeout(() => {
+      x(6), y("expanded");
     }, 2400));
   }, W = () => {
-    b ? (k(null), P(0)) : u === "expanded" && (g("collapsing"), x(0), $(null), setTimeout(() => {
-      g((R) => R === "collapsing" ? "compact" : R);
+    b ? (R(null), C(0)) : u === "expanded" && (y("collapsing"), x(0), $(null), setTimeout(() => {
+      y((P) => P === "collapsing" ? "compact" : P);
     }, 1e3));
-  }, X = (R) => {
-    k(R), P(0);
+  }, X = (P) => {
+    R(P), C(0);
   };
   J.useEffect(() => {
     if (!b) return;
-    const R = performance.now(), Re = 1200, oe = () => {
-      const Ne = performance.now() - R, Te = Math.min(1, Ne / Re);
-      P(Te), Te < 1 && requestAnimationFrame(oe);
-    }, le = requestAnimationFrame(oe);
-    return () => cancelAnimationFrame(le);
+    const P = performance.now(), Re = 1200, oe = () => {
+      const Ne = performance.now() - P, Ae = Math.min(1, Ne / Re);
+      C(Ae), Ae < 1 && requestAnimationFrame(oe);
+    }, se = requestAnimationFrame(oe);
+    return () => cancelAnimationFrame(se);
   }, [b]);
   const j = () => {
-    k(null), P(0);
-  }, N = o.find((R) => R.name === v), te = N?.status ?? "online", ie = N?.dbSync ?? !0, z = N?.metrics, F = N?.alerts, ne = 330, $e = 340, ke = b ? 1.15 : 1, V = b ? -(b.ex - ne) * 0.06 : 0, M = b ? -(b.ey - $e) * 0.06 : 0;
+    R(null), C(0);
+  }, N = o.find((P) => P.name === v), te = N?.status ?? "online", ie = N?.dbSync ?? !0, z = N?.metrics, F = N?.alerts, ne = 330, $e = 340, ke = b ? 1.15 : 1, V = b ? -(b.ex - ne) * 0.06 : 0, M = b ? -(b.ey - $e) * 0.06 : 0;
   return /* @__PURE__ */ d("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
@@ -5816,7 +6024,7 @@ function Si({
         },
         onClick: W,
         children: /* @__PURE__ */ e(
-          Wt,
+          zt,
           {
             viewState: u,
             animPhase: m,
@@ -5826,11 +6034,11 @@ function Si({
             rotateY: h,
             autoRotateComponents: c,
             componentScale: f,
-            drillZoom: y,
+            drillZoom: g,
             autoRotateCarousel: p,
             carouselSpeed: a,
             logoUrl: r,
-            onSelectSystem: E,
+            onSelectSystem: T,
             onBackgroundClick: W,
             onComponentClick: X,
             onCloseDrill: j,
@@ -5851,11 +6059,11 @@ function S(t, n, o = 24) {
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
   });
 }
-function bt(t) {
+function gt(t) {
   return t === "critical" || t === "offline" ? "#ff2255" : t === "warning" ? "#ff8c00" : "#00e5ff";
 }
 function me(t, n, o) {
-  const i = t === "online" ? "online" : t, r = bt(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", h = i === "warning" && s > 85 ? "warning" : i === "critical" ? "critical" : "online", c = i === "critical" && n === "APP-03" ? "critical" : "online", p = i === "offline" ? "offline" : "online";
+  const i = t === "online" ? "online" : t, r = gt(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", h = i === "warning" && s > 85 ? "warning" : i === "critical" ? "critical" : "online", c = i === "critical" && n === "APP-03" ? "critical" : "online", p = i === "offline" ? "offline" : "online";
   return [
     { id: "cpu-0", label: "CPU-0", status: l, detail: i === "critical" ? "Core overload" : i === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(De, { color: r, label: "CPU-0", status: l, load: a }) },
     { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(De, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
@@ -5865,7 +6073,7 @@ function me(t, n, o) {
     { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
     { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-3", status: "online", activity: a > 50 }) },
     { id: "thread-pool", label: "THREAD-POOL", status: c, detail: c === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(O, { color: r, label: "THREAD-POOL", status: c }) },
-    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(ut, { color: r, label: "NET", status: p }) }
+    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(bt, { color: r, label: "NET", status: p }) }
   ];
 }
 function xe(t) {
@@ -5881,8 +6089,8 @@ function xe(t) {
     { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: S(55, 20) }
   ];
 }
-function gt(t, n, o) {
-  const i = t === "online" ? "online" : t, r = bt(t), a = i === "critical" || i === "offline" ? i : "online", s = i === "warning" ? "warning" : "online", l = i === "critical" ? "critical" : "online";
+function yt(t, n, o) {
+  const i = t === "online" ? "online" : t, r = gt(t), a = i === "critical" || i === "offline" ? i : "online", s = i === "warning" ? "warning" : "online", l = i === "critical" ? "critical" : "online";
   return [
     { id: "port-1", label: "PORT-1", status: "online", element: /* @__PURE__ */ e(B, { color: r, label: "PORT-1", status: "online" }) },
     { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(B, { color: r, label: "PORT-2", status: "online" }) },
@@ -5896,7 +6104,7 @@ function gt(t, n, o) {
     { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
   ];
 }
-function yt(t) {
+function mt(t) {
   const n = t?.traffic ?? 50;
   return [
     { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: S(n, 20) },
@@ -5931,9 +6139,9 @@ function li(t) {
 function ze(t, n, o) {
   const i = t === "online" ? "online" : t, r = "#ff8c00", a = o?.capacity ?? 72, s = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", l = i === "warning" && n === "DB-STB" ? "warning" : "online", h = i === "critical" ? "critical" : "online", c = i === "warning" ? "warning" : "online";
   return [
-    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Ie, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
-    { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Ie, { color: r, label: "PLATTER-1", status: s, capacityPercent: a }) },
-    { id: "platter-2", label: "PLATTER-2", status: l, detail: l === "warning" ? "Replication lag" : void 0, element: /* @__PURE__ */ e(Ie, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
+    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Oe, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
+    { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Oe, { color: r, label: "PLATTER-1", status: s, capacityPercent: a }) },
+    { id: "platter-2", label: "PLATTER-2", status: l, detail: l === "warning" ? "Replication lag" : void 0, element: /* @__PURE__ */ e(Oe, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
     { id: "conn-pool", label: "CONN-POOL", status: h, detail: h === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(O, { color: r, label: "CONN-POOL", status: h }) },
     { id: "query-cache", label: "QUERY-CACHE", status: c, detail: c === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(O, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
   ];
@@ -5948,7 +6156,7 @@ function Me(t) {
     { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: S(75, 12) }
   ];
 }
-function Je(t) {
+function tt(t) {
   const n = [
     t.wdStatus,
     t.msStatus,
@@ -5960,8 +6168,8 @@ function Je(t) {
   ];
   return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
-function $i(t) {
-  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
+function Ei(t) {
+  const n = tt(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
@@ -5982,8 +6190,8 @@ function $i(t) {
     }
   ];
 }
-function ki(t) {
-  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
+function Ti(t) {
+  const n = tt(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -6005,10 +6213,10 @@ const si = [
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
 function di({ config: t }) {
-  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: h, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
+  const n = J.useContext(le), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: h, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
   return /* @__PURE__ */ d(ve, { children: [
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 330,
         ey: 120,
@@ -6016,11 +6224,11 @@ function di({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(ft, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(Je, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 220,
         ey: 260,
@@ -6035,11 +6243,11 @@ function di({ config: t }) {
           name: "WEB-DISP",
           status: r,
           context: { traffic: 78 },
-          subComponents: gt(r),
-          graphSeries: yt({ traffic: 78 })
+          subComponents: yt(r),
+          graphSeries: mt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          pt,
+          et,
           {
             rotateY: o,
             autoRotate: i,
@@ -6053,7 +6261,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 440,
         ey: 260,
@@ -6072,7 +6280,7 @@ function di({ config: t }) {
           graphSeries: li({ queueDepth: 45 })
         },
         children: /* @__PURE__ */ e(
-          Zt,
+          ht,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6087,7 +6295,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 165,
         ey: 390,
@@ -6106,7 +6314,7 @@ function di({ config: t }) {
           graphSeries: xe({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          ue,
+          ae,
           {
             rotateY: o,
             autoRotate: i,
@@ -6120,7 +6328,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 330,
         ey: 390,
@@ -6139,7 +6347,7 @@ function di({ config: t }) {
           graphSeries: xe({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          ue,
+          ae,
           {
             rotateY: o,
             autoRotate: i,
@@ -6153,7 +6361,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 495,
         ey: 390,
@@ -6172,7 +6380,7 @@ function di({ config: t }) {
           graphSeries: xe({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          ue,
+          ae,
           {
             rotateY: o,
             autoRotate: i,
@@ -6186,7 +6394,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 200,
         ey: 520,
@@ -6205,7 +6413,7 @@ function di({ config: t }) {
           graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Oe,
+          Ee,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6219,7 +6427,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 460,
         ey: 520,
@@ -6238,7 +6446,7 @@ function di({ config: t }) {
           graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Oe,
+          Ee,
           {
             rotateY: o,
             autoRotate: i,
@@ -6252,7 +6460,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 330,
         ey: 520,
@@ -6261,17 +6469,17 @@ function di({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(ct, { synced: f, latencyMs: f ? 8 : 342 })
+        children: /* @__PURE__ */ e(ft, { synced: f, latencyMs: f ? 8 : 342 })
       }
     ),
     /* @__PURE__ */ e(ci, { config: t })
   ] });
 }
 function ci({ config: t }) {
-  const n = J.useContext(ae), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: h, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
+  const n = J.useContext(le), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: h, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 220,
         ey: 260,
@@ -6286,7 +6494,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 440,
         ey: 260,
@@ -6301,7 +6509,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 165,
         ey: 390,
@@ -6316,7 +6524,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 330,
         ey: 390,
@@ -6331,7 +6539,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 495,
         ey: 390,
@@ -6346,7 +6554,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 200,
         ey: 520,
@@ -6361,7 +6569,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 460,
         ey: 520,
@@ -6376,7 +6584,7 @@ function ci({ config: t }) {
       }
     ),
     !c && /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 330,
         ey: 520,
@@ -6392,19 +6600,19 @@ function ci({ config: t }) {
     )
   ] }) : null;
 }
-function Ri({ config: t, ...n }) {
+function Ai({ config: t, ...n }) {
   return /* @__PURE__ */ e(
-    dt,
+    pt,
     {
       name: t.name,
-      status: Je(t),
+      status: tt(t),
       connections: si,
       ...n,
       children: /* @__PURE__ */ e(di, { config: t })
     }
   );
 }
-function et(t) {
+function it(t) {
   const n = [
     t.dispStatus,
     t.srv1Status,
@@ -6415,8 +6623,8 @@ function et(t) {
   ];
   return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
-function Pi(t) {
-  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
+function Ii(t) {
+  const n = it(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
@@ -6437,8 +6645,8 @@ function Pi(t) {
     }
   ];
 }
-function Ci(t) {
-  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
+function Li(t) {
+  const n = it(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -6456,10 +6664,10 @@ const pi = [
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
 function fi({ config: t }) {
-  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: h, sdbStatus: c, dbSync: p } = t;
+  const n = J.useContext(le), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: h, sdbStatus: c, dbSync: p } = t;
   return /* @__PURE__ */ d(ve, { children: [
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 330,
         ey: 120,
@@ -6467,11 +6675,11 @@ function fi({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(ft, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(Je, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 330,
         ey: 260,
@@ -6486,11 +6694,11 @@ function fi({ config: t }) {
           name: "DISP-01",
           status: r,
           context: { traffic: 78 },
-          subComponents: gt(r),
-          graphSeries: yt({ traffic: 78 })
+          subComponents: yt(r),
+          graphSeries: mt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          pt,
+          et,
           {
             rotateY: o,
             autoRotate: i,
@@ -6504,7 +6712,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 165,
         ey: 390,
@@ -6523,7 +6731,7 @@ function fi({ config: t }) {
           graphSeries: xe({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          ue,
+          ae,
           {
             rotateY: o,
             autoRotate: i,
@@ -6537,7 +6745,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 330,
         ey: 390,
@@ -6556,7 +6764,7 @@ function fi({ config: t }) {
           graphSeries: xe({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          ue,
+          ae,
           {
             rotateY: o,
             autoRotate: i,
@@ -6570,7 +6778,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 495,
         ey: 390,
@@ -6589,7 +6797,7 @@ function fi({ config: t }) {
           graphSeries: xe({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          ue,
+          ae,
           {
             rotateY: o,
             autoRotate: i,
@@ -6603,7 +6811,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 200,
         ey: 520,
@@ -6622,7 +6830,7 @@ function fi({ config: t }) {
           graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Oe,
+          Ee,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6636,7 +6844,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 460,
         ey: 520,
@@ -6655,7 +6863,7 @@ function fi({ config: t }) {
           graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Oe,
+          Ee,
           {
             rotateY: o,
             autoRotate: i,
@@ -6669,7 +6877,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      k,
       {
         ex: 330,
         ey: 520,
@@ -6678,17 +6886,17 @@ function fi({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(ct, { synced: p, latencyMs: p ? 8 : 342 })
+        children: /* @__PURE__ */ e(ft, { synced: p, latencyMs: p ? 8 : 342 })
       }
     ),
     /* @__PURE__ */ e(hi, { config: t })
   ] });
 }
 function hi({ config: t }) {
-  const n = J.useContext(ae), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: h } = t, c = n?.isSelected && n?.isExpandedPos;
+  const n = J.useContext(le), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: h } = t, c = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 330,
         ey: 260,
@@ -6703,7 +6911,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 165,
         ey: 390,
@@ -6718,7 +6926,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 330,
         ey: 390,
@@ -6733,7 +6941,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 495,
         ey: 390,
@@ -6748,7 +6956,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 200,
         ey: 520,
@@ -6763,7 +6971,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 460,
         ey: 520,
@@ -6778,7 +6986,7 @@ function hi({ config: t }) {
       }
     ),
     !h && /* @__PURE__ */ e(
-      I,
+      L,
       {
         ex: 330,
         ey: 520,
@@ -6794,12 +7002,12 @@ function hi({ config: t }) {
     )
   ] }) : null;
 }
-function Ei({ config: t, ...n }) {
+function Oi({ config: t, ...n }) {
   return /* @__PURE__ */ e(
-    dt,
+    pt,
     {
       name: t.name,
-      status: et(t),
+      status: it(t),
       connections: pi,
       ...n,
       children: /* @__PURE__ */ e(fi, { config: t })
@@ -6807,57 +7015,62 @@ function Ei({ config: t, ...n }) {
   );
 }
 export {
-  Si as AIOPsDashboard,
+  Ci as AIOPsDashboard,
   De as CPU3D,
-  Wt as Carousel,
-  Ge as CarouselContext,
+  zt as Carousel,
+  qe as CarouselContext,
   Ke as CarouselItemContext,
-  It as ComponentDialog,
-  wi as ComponentDrillView,
-  Oe as Database3D,
+  Ot as ComponentDialog,
+  Pi as ComponentDrillView,
+  Ee as Database3D,
+  Si as DatabaseNode,
   ye as DriveBay3D,
   pi as EXCHANGE_CONNECTIONS,
-  Ei as ExchangeService,
+  Oi as ExchangeService,
   mi as HOLO_BLUE,
   yi as HOLO_CYAN,
   Qe as HOLO_GLASS,
   Se as HOLO_SURFACE,
   ei as HistoricalGraphPanel,
-  Nt as HoloBase,
-  ft as Human3D,
+  Bt as HoloBase,
+  Je as Human3D,
+  $i as HumanNode,
   We as Memory3D,
-  Zt as MessageServer3D,
-  ut as NetworkBlock3D,
-  I as NodeCallout,
-  Ie as Platter3D,
+  ht as MessageServer3D,
+  Ri as MessageServerNode,
+  bt as NetworkBlock3D,
+  L as NodeCallout,
+  Oe as Platter3D,
   B as Port3D,
-  Ri as SAPService,
+  Ai as SAPService,
   si as SAP_CONNECTIONS,
   w as STATUS_CFG,
-  ue as Server3D,
-  dt as Service,
-  ae as ServiceContext,
-  At as ServiceDialog,
-  A as ServiceNode,
-  zt as SvgConnection,
-  ct as SyncBridge,
+  ae as Server3D,
+  wi as ServerNode,
+  pt as Service,
+  le as ServiceContext,
+  It as ServiceDialog,
+  k as ServiceNode,
+  Mt as SvgConnection,
+  ft as SyncBridge,
   O as ThreadPool3D,
-  pt as WebDispatcher3D,
-  Ci as computeExchangeDialogAlerts,
-  Pi as computeExchangeDialogMetrics,
-  et as computeExchangeServiceStatus,
-  ki as computeSAPDialogAlerts,
-  $i as computeSAPDialogMetrics,
-  Je as computeSAPServiceStatus,
+  et as WebDispatcher3D,
+  ki as WebDispatcherNode,
+  Li as computeExchangeDialogAlerts,
+  Ii as computeExchangeDialogMetrics,
+  it as computeExchangeServiceStatus,
+  Ti as computeSAPDialogAlerts,
+  Ei as computeSAPDialogMetrics,
+  tt as computeSAPServiceStatus,
   Me as getDatabaseGraphSeries,
   ze as getDatabaseSubComponents,
-  yt as getDispatcherGraphSeries,
-  gt as getDispatcherSubComponents,
+  mt as getDispatcherGraphSeries,
+  yt as getDispatcherSubComponents,
   li as getMessageServerGraphSeries,
   ai as getMessageServerSubComponents,
   xe as getServerGraphSeries,
   me as getServerSubComponents,
-  qe as makeFaceStyles,
+  Ge as makeFaceStyles,
   xi as useCarouselContext,
   vi as useCarouselItemContext
 };