ahs-cti 0.0.5 → 0.0.7

package/dist/{liveStatus-F6AKCC27.mjs → liveStatus-YSBYSVOO.mjs}

@@ -1,26 +1,29 @@
 import {
   useCallMonitoring
-} from "./chunk-QPOHVXUK.mjs";
+} from "./chunk-U2UDKXMB.mjs";
 import {
   SDKPermissionGuard
-} from "./chunk-YFW47Y76.mjs";
+} from "./chunk-3J7KQNEU.mjs";
 import {
   SDKProvider,
   useToast
-} from "./chunk-6ICPXSN6.mjs";
+} from "./chunk-VVDJLUYT.mjs";
 import {
   END_POINT,
   SDK_PERMISSIONS,
   axios_default
-} from "./chunk-Q7FIRWF2.mjs";
+} from "./chunk-LHE4QGJJ.mjs";
 import {
+  Box_default,
+  CircularProgress_default,
   __spreadProps,
-  __spreadValues
-} from "./chunk-UB5HSUGK.mjs";
+  __spreadValues,
+  keyframes,
+  styled_default
+} from "./chunk-Q6G3MPS7.mjs";
 
 // call-control-sdk/lib/pages/liveStatus/index.tsx
 import React, { useCallback as useCallback2, useState as useState2, useEffect as useEffect2 } from "react";
-import { Box as Box2, CircularProgress } from "@mui/material";
 
 // call-control-sdk/lib/pages/liveStatus/useLiveStatus.ts
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -164,8 +167,6 @@ function useLiveStatus() {
 }
 
 // call-control-sdk/lib/pages/liveStatus/styles.ts
-import { Box, styled } from "@mui/material";
-import { keyframes } from "@mui/material/styles";
 var pulse = keyframes`
   0%, 100% { transform: scale(1); opacity: 1; }
   50% { transform: scale(1.6); opacity: 0.3; }
@@ -227,7 +228,7 @@ var STATUS_COLORS = {
   "s-break": { bg: "#ffebee", border: "rgba(204,42,42,.3)", bar: "#e53935", text: "#c62828" },
   "s-idle": { bg: "#e8f5e9", border: "rgba(46,125,50,.25)", bar: "#2e7d32", text: "#1b5e20" }
 };
-var WallboardRoot = styled(Box, {
+var WallboardRoot = styled_default(Box_default, {
   shouldForwardProp: (prop) => prop !== "isTv"
 })(({ theme, isTv }) => ({
   display: "grid",
@@ -242,7 +243,7 @@ var WallboardRoot = styled(Box, {
     overflow: "hidden"
   }
 }));
-var TopBar = styled(Box)(({ theme }) => ({
+var TopBar = styled_default(Box_default)(({ theme }) => ({
   background: C.navy,
   display: "flex",
   alignItems: "center",
@@ -255,7 +256,7 @@ var TopBar = styled(Box)(({ theme }) => ({
   gap: 4,
   [theme.breakpoints.up("sm")]: { padding: "0 14px", flexWrap: "nowrap" }
 }));
-var BrandLogo = styled(Box)({
+var BrandLogo = styled_default(Box_default)({
   width: 22,
   height: 22,
   borderRadius: 4,
@@ -265,7 +266,7 @@ var BrandLogo = styled(Box)({
   justifyContent: "center",
   overflow: "hidden"
 });
-var LiveBadge = styled(Box)({
+var LiveBadge = styled_default(Box_default)({
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -279,7 +280,7 @@ var LiveBadge = styled(Box)({
   color: "#0ef5a8",
   textTransform: "uppercase"
 });
-var PulseDot = styled("span")({
+var PulseDot = styled_default("span")({
   width: 5,
   height: 5,
   borderRadius: "50%",
@@ -287,7 +288,7 @@ var PulseDot = styled("span")({
   display: "inline-block",
   animation: `${pulse} 1.5s ease infinite`
 });
-var KpiStrip = styled(Box)(({ theme }) => ({
+var KpiStrip = styled_default(Box_default)(({ theme }) => ({
   display: "grid",
   gridTemplateColumns: "repeat(auto-fit, minmax(72px, 1fr))",
   background: "transparent",
@@ -296,7 +297,7 @@ var KpiStrip = styled(Box)(({ theme }) => ({
     gridTemplateColumns: "repeat(14, 1fr)"
   }
 }));
-var KpiCell = styled(Box)(({ accentColor }) => ({
+var KpiCell = styled_default(Box_default)(({ accentColor }) => ({
   padding: "4px 0 3px 8px",
   borderRight: `1px solid ${C.b1}`,
   borderBottom: `1px solid ${C.b1}`,
@@ -314,7 +315,7 @@ var KpiCell = styled(Box)(({ accentColor }) => ({
   },
   "@media (min-width: 960px)": { padding: "5px 0 4px 6px" }
 }));
-var KpiValue = styled("div")(({ kcolor, theme }) => ({
+var KpiValue = styled_default("div")(({ kcolor, theme }) => ({
   fontFamily: "'Poppins', Arial, sans-serif",
   fontSize: 15,
   fontWeight: 800,
@@ -323,7 +324,7 @@ var KpiValue = styled("div")(({ kcolor, theme }) => ({
   [theme.breakpoints.up("md")]: { fontSize: 17 },
   [theme.breakpoints.up("lg")]: { fontSize: 20 }
 }));
-var KpiLabel = styled("div")({
+var KpiLabel = styled_default("div")({
   fontSize: 8,
   letterSpacing: 0.8,
   textTransform: "uppercase",
@@ -331,7 +332,7 @@ var KpiLabel = styled("div")({
   fontWeight: 600,
   marginTop: 1
 });
-var BodyGrid = styled(Box)(({ theme }) => ({
+var BodyGrid = styled_default(Box_default)(({ theme }) => ({
   display: "grid",
   gridTemplateColumns: "1fr",
   marginTop: 0,
@@ -340,7 +341,7 @@ var BodyGrid = styled(Box)(({ theme }) => ({
   [theme.breakpoints.up("md")]: { gridTemplateColumns: "2fr 1fr" },
   [theme.breakpoints.up("lg")]: { gridTemplateColumns: "2fr 1fr", overflow: "hidden" }
 }));
-var Panel = styled(Box)(({ theme }) => ({
+var Panel = styled_default(Box_default)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   overflow: "auto",
@@ -348,7 +349,7 @@ var Panel = styled(Box)(({ theme }) => ({
   borderRight: `1px solid ${C.b1}`,
   [theme.breakpoints.up("lg")]: { overflow: "hidden" }
 }));
-var PanelHeader = styled(Box)({
+var PanelHeader = styled_default(Box_default)({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -357,7 +358,7 @@ var PanelHeader = styled(Box)({
   borderBottom: `1px solid ${C.b1}`,
   flexShrink: 0
 });
-var PhTitle = styled("span")({
+var PhTitle = styled_default("span")({
   fontFamily: "'Poppins', Arial, sans-serif",
   fontSize: 10,
   fontWeight: 700,
@@ -365,7 +366,7 @@ var PhTitle = styled("span")({
   textTransform: "uppercase",
   color: C.t2
 });
-var Badge = styled("span")(({ bg, color, border }) => ({
+var Badge = styled_default("span")(({ bg, color, border }) => ({
   fontFamily: "'JetBrains Mono', monospace",
   fontSize: 9,
   fontWeight: 700,
@@ -376,19 +377,19 @@ var Badge = styled("span")(({ bg, color, border }) => ({
   color,
   border: `1px solid ${border}`
 }));
-var StatusDot = styled("span")(({ dotColor, animated }) => __spreadValues({
+var StatusDot = styled_default("span")(({ dotColor, animated }) => __spreadValues({
   width: 5,
   height: 5,
   borderRadius: "50%",
   flexShrink: 0,
   background: dotColor
 }, animated ? { animation: `${pulse} 1.3s ease infinite` } : {}));
-var AgentTable = styled("table")({
+var AgentTable = styled_default("table")({
   width: "100%",
   borderCollapse: "collapse",
   tableLayout: "auto"
 });
-var AgTh = styled("th")({
+var AgTh = styled_default("th")({
   padding: "4px 8px",
   fontSize: 8,
   letterSpacing: 0.8,
@@ -403,13 +404,13 @@ var AgTh = styled("th")({
   top: 0,
   zIndex: 1
 });
-var AgTd = styled("td")({
+var AgTd = styled_default("td")({
   padding: "4px 8px",
   fontSize: 11,
   borderBottom: `1px solid ${C.b1}`,
   verticalAlign: "middle"
 });
-var PageInfo = styled(Box)({
+var PageInfo = styled_default(Box_default)({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -420,27 +421,27 @@ var PageInfo = styled(Box)({
   flexShrink: 0,
   borderTop: `1px solid ${C.b1}`
 });
-var QName = styled("span")({
+var QName = styled_default("span")({
   fontWeight: 600,
   color: C.t1,
   fontFamily: "'Poppins', Arial, sans-serif",
   fontSize: 11,
   "@media (min-width: 1280px)": { fontSize: 12 }
 });
-var QNum = styled("span")(({ numColor }) => ({
+var QNum = styled_default("span")(({ numColor }) => ({
   fontFamily: "'JetBrains Mono', monospace",
   fontWeight: 700,
   fontSize: 11,
   color: numColor || C.t1
 }));
-var QBar = styled(Box)({ height: 4, background: C.bg3, borderRadius: 2, overflow: "hidden", width: 56 });
-var QBarFill = styled(Box)(({ w, barColor }) => ({
+var QBar = styled_default(Box_default)({ height: 4, background: C.bg3, borderRadius: 2, overflow: "hidden", width: 56 });
+var QBarFill = styled_default(Box_default)(({ w, barColor }) => ({
   height: "100%",
   borderRadius: 3,
   width: `${w}%`,
   background: barColor
 }));
-var SbHeader = styled(Box)({
+var SbHeader = styled_default(Box_default)({
   padding: "7px 12px",
   display: "flex",
   alignItems: "center",
@@ -448,14 +449,14 @@ var SbHeader = styled(Box)({
   background: C.bg2,
   borderBottom: `1px solid ${C.b1}`
 });
-var SbTitle = styled("span")({
+var SbTitle = styled_default("span")({
   fontSize: 9,
   fontWeight: 700,
   letterSpacing: 1.5,
   textTransform: "uppercase",
   color: C.t3
 });
-var NoDataBox = styled(Box)({
+var NoDataBox = styled_default(Box_default)({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -466,7 +467,7 @@ var NoDataBox = styled(Box)({
   letterSpacing: 0.5,
   fontFamily: "'Poppins', Arial, sans-serif"
 });
-var Footer = styled(Box)({
+var Footer = styled_default(Box_default)({
   background: C.navy,
   borderTop: "1px solid rgba(255,255,255,.08)",
   display: "flex",
@@ -478,7 +479,7 @@ var Footer = styled(Box)({
   bottom: 0,
   zIndex: 5
 });
-var TickerLabel = styled("div")({
+var TickerLabel = styled_default("div")({
   flexShrink: 0,
   padding: "0 8px",
   fontSize: 7,
@@ -489,13 +490,13 @@ var TickerLabel = styled("div")({
   borderRight: "1px solid rgba(255,255,255,.1)",
   whiteSpace: "nowrap"
 });
-var TickerTrack = styled(Box)({ flex: 1, overflow: "hidden", position: "relative" });
-var TickerInner = styled(Box)({
+var TickerTrack = styled_default(Box_default)({ flex: 1, overflow: "hidden", position: "relative" });
+var TickerInner = styled_default(Box_default)({
   display: "flex",
   animation: `${ticker} 50s linear infinite`,
   whiteSpace: "nowrap"
 });
-var TickerSpan = styled("span")(({ isWarn, isGood }) => ({
+var TickerSpan = styled_default("span")(({ isWarn, isGood }) => ({
   fontSize: 9,
   color: "rgba(255,255,255,.55)",
   padding: "0 16px",
@@ -505,7 +506,7 @@ var TickerSpan = styled("span")(({ isWarn, isGood }) => ({
     fontWeight: 600
   }
 }));
-var MonitorBtn = styled("button")(({ variant }) => {
+var MonitorBtn = styled_default("button")(({ variant }) => {
   const colors = {
     listen: { bg: "#e3f2fd", color: "#1976d2", hoverBg: "#bbdefb" },
     whisper: { bg: "#fff3e0", color: "#ef6c00", hoverBg: "#ffe0b2" },
@@ -530,7 +531,7 @@ var MonitorBtn = styled("button")(({ variant }) => {
     "&:disabled": { opacity: 0.5, cursor: "not-allowed" }
   };
 });
-var MonitorCard = styled(Box)({
+var MonitorCard = styled_default(Box_default)({
   position: "fixed",
   bottom: 20,
   right: 20,
@@ -560,21 +561,21 @@ var AgentTableRow = React.memo(({
   const statusColor = isOnCall ? agent.callDirection === "OUTBOUND" ? C.blue : C.green : sc.text;
   const durColor = isLong ? C.red : statusColor;
   return /* @__PURE__ */ jsxs("tr", { style: { background: isLong ? "rgba(204,42,42,.07)" : sc.bg, transition: "background 0.3s" }, children: [
-    /* @__PURE__ */ jsx(AgTd, { sx: { borderLeft: `2px solid ${sc.bar}`, pl: "8px", maxWidth: 160 }, children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-      /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 11, fontWeight: 700, color: C.t1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: agent.agentName }),
-      isLong && /* @__PURE__ */ jsx(Box2, { component: "span", sx: { fontSize: 7, fontWeight: 700, color: C.red, letterSpacing: 0.3, flexShrink: 0 }, children: "!7m" })
+    /* @__PURE__ */ jsx(AgTd, { sx: { borderLeft: `2px solid ${sc.bar}`, pl: "8px", maxWidth: 160 }, children: /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+      /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 11, fontWeight: 700, color: C.t1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: agent.agentName }),
+      isLong && /* @__PURE__ */ jsx(Box_default, { component: "span", sx: { fontSize: 7, fontWeight: 700, color: C.red, letterSpacing: 0.3, flexShrink: 0 }, children: "!7m" })
     ] }) }),
-    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: agent.extension || "\u2014" }) }),
-    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "4px", flexWrap: "nowrap" }, children: [
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: agent.extension || "\u2014" }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: "4px", flexWrap: "nowrap" }, children: [
       /* @__PURE__ */ jsx(StatusDot, { dotColor: statusColor, animated: isOnCall }),
-      /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 8, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase", color: statusColor, whiteSpace: "nowrap" }, children: agent.status })
+      /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 8, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase", color: statusColor, whiteSpace: "nowrap" }, children: agent.status })
     ] }) }),
-    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: durColor, whiteSpace: "nowrap" }, children: fmtDur(durSecs) }) }),
-    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: agent.activeCallerNumber || "\u2014" }) }),
-    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 9, color: C.t3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 110 }, children: agent.queueNames || "\u2014" }) }),
-    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700, color: C.t2 }, children: agent.callsToday }) }),
-    onMonitor !== void 0 && /* @__PURE__ */ jsx(AgTd, { children: isOnCall && onMonitor && /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", gap: "3px", flexWrap: "nowrap", alignItems: "center" }, children: isBeingMonitored ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 7, color: C.green, fontWeight: 600, display: "flex", alignItems: "center", gap: "2px", whiteSpace: "nowrap" }, children: [
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: durColor, whiteSpace: "nowrap" }, children: fmtDur(durSecs) }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: agent.activeCallerNumber || "\u2014" }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 9, color: C.t3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 110 }, children: agent.queueNames || "\u2014" }) }),
+    /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700, color: C.t2 }, children: agent.callsToday }) }),
+    onMonitor !== void 0 && /* @__PURE__ */ jsx(AgTd, { children: isOnCall && onMonitor && /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", gap: "3px", flexWrap: "nowrap", alignItems: "center" }, children: isBeingMonitored ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Box_default, { sx: { fontSize: 7, color: C.green, fontWeight: 600, display: "flex", alignItems: "center", gap: "2px", whiteSpace: "nowrap" }, children: [
         /* @__PURE__ */ jsx(StatusDot, { dotColor: C.green, animated: true }),
         activeMonitoring == null ? void 0 : activeMonitoring.mode.toUpperCase()
       ] }),
@@ -689,7 +690,7 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
     good: q.waitingCalls === 0
   }));
   if (isLoading) {
-    return /* @__PURE__ */ jsxs(Box2, { sx: {
+    return /* @__PURE__ */ jsxs(Box_default, { sx: {
       height: "100vh",
       display: "flex",
       flexDirection: "column",
@@ -698,31 +699,31 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
       background: "transparent",
       gap: 2
     }, children: [
-      /* @__PURE__ */ jsx(CircularProgress, { size: 48, sx: { color: C.blue } }),
-      /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 16, fontWeight: 600, color: C.t2, letterSpacing: 1, textTransform: "uppercase" }, children: "Loading Live Status..." })
+      /* @__PURE__ */ jsx(CircularProgress_default, { size: 48, sx: { color: C.blue } }),
+      /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 16, fontWeight: 600, color: C.t2, letterSpacing: 1, textTransform: "uppercase" }, children: "Loading Live Status..." })
     ] });
   }
   return /* @__PURE__ */ jsxs(WallboardRoot, { isTv: isTvDashboard, children: [
     isTvDashboard && /* @__PURE__ */ jsxs(TopBar, { children: [
-      /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+      /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: "10px" }, children: [
         /* @__PURE__ */ jsx(BrandLogo, { children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 26 26", fill: "none", width: 16, height: 16, children: [
           /* @__PURE__ */ jsx("rect", { width: "26", height: "26", rx: "5", fill: "#1A5F6C" }),
           /* @__PURE__ */ jsx("path", { d: "M5 18 Q5 8 13 8 Q21 8 21 18", stroke: "#1565c8", strokeWidth: "2.5", fill: "none", strokeLinecap: "round" }),
           /* @__PURE__ */ jsx("path", { d: "M9 18 Q9 12 13 12 Q17 12 17 18", stroke: "#0a9a62", strokeWidth: "2", fill: "none", strokeLinecap: "round" }),
           /* @__PURE__ */ jsx("circle", { cx: "13", cy: "19", r: "2", fill: "#1565c8" })
         ] }) }),
-        /* @__PURE__ */ jsxs(Box2, { sx: { color: "#fff" }, children: [
-          /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 13, fontWeight: 800, letterSpacing: 1.2, lineHeight: 1 }, children: "AHS" }),
-          /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 7.5, letterSpacing: 1, color: "rgba(255,255,255,.45)", textTransform: "uppercase" }, children: "Supervisor Wallboard" })
+        /* @__PURE__ */ jsxs(Box_default, { sx: { color: "#fff" }, children: [
+          /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 13, fontWeight: 800, letterSpacing: 1.2, lineHeight: 1 }, children: "AHS" }),
+          /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 7.5, letterSpacing: 1, color: "rgba(255,255,255,.45)", textTransform: "uppercase" }, children: "Supervisor Wallboard" })
         ] }),
         /* @__PURE__ */ jsxs(LiveBadge, { children: [
           /* @__PURE__ */ jsx(PulseDot, {}),
           "LIVE"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs(Box2, { sx: { textAlign: "right" }, children: [
-        /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700, color: "#fff", letterSpacing: 1.5, lineHeight: 1 }, children: clockStr }),
-        /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 7.5, color: "rgba(255,255,255,.4)", letterSpacing: 0.5, mt: "1px" }, children: dateStr })
+      /* @__PURE__ */ jsxs(Box_default, { sx: { textAlign: "right" }, children: [
+        /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700, color: "#fff", letterSpacing: 1.5, lineHeight: 1 }, children: clockStr }),
+        /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 7.5, color: "rgba(255,255,255,.4)", letterSpacing: 0.5, mt: "1px" }, children: dateStr })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(KpiStrip, { children: [
@@ -782,7 +783,7 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
     /* @__PURE__ */ jsxs(BodyGrid, { children: [
       /* @__PURE__ */ jsxs(Panel, { children: [
         /* @__PURE__ */ jsxs(PanelHeader, { children: [
-          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             /* @__PURE__ */ jsx(PhTitle, { children: "Agent Status" }),
             /* @__PURE__ */ jsxs(Badge, { bg: C.amberLt, color: C.amber, border: C.amberBd, children: [
               oncallCount,
@@ -797,12 +798,12 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
               " Long"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 8, color: C.t3 }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { fontSize: 8, color: C.t3 }, children: [
             agents.length,
             " agents"
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Box2, { sx: {
+        /* @__PURE__ */ jsx(Box_default, { sx: {
           overflowX: "auto",
           overflowY: "auto",
           flex: 1,
@@ -847,20 +848,20 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
       ] }),
       /* @__PURE__ */ jsxs(Panel, { sx: { borderRight: `1px solid ${C.b1}`, maxHeight: { xs: "none", lg: "calc(100vh - 96px)" } }, children: [
         /* @__PURE__ */ jsxs(PanelHeader, { children: [
-          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             /* @__PURE__ */ jsx(PhTitle, { children: "Queue Performance" }),
             /* @__PURE__ */ jsx(Badge, { bg: C.greenLt, color: C.green, border: C.greenBd, children: "All Healthy" })
           ] }),
           /* @__PURE__ */ jsx(Badge, { bg: C.bg2, color: C.t3, border: C.b2, children: "Live SLA" })
         ] }),
-        /* @__PURE__ */ jsxs(Box2, { sx: {
+        /* @__PURE__ */ jsxs(Box_default, { sx: {
           flex: 1,
           minHeight: 0,
           "&::-webkit-scrollbar": { width: 3 },
           "&::-webkit-scrollbar-track": { background: C.bg2, borderRadius: 2 },
           "&::-webkit-scrollbar-thumb": { background: C.t4, borderRadius: 2, "&:hover": { background: C.t3 } }
         }, children: [
-          /* @__PURE__ */ jsx(Box2, { sx: { overflowX: "auto", "&::-webkit-scrollbar": { height: 3 }, "&::-webkit-scrollbar-track": { background: C.bg2, borderRadius: 2 }, "&::-webkit-scrollbar-thumb": { background: C.t4, borderRadius: 2 } }, children: /* @__PURE__ */ jsxs(AgentTable, { children: [
+          /* @__PURE__ */ jsx(Box_default, { sx: { overflowX: "auto", "&::-webkit-scrollbar": { height: 3 }, "&::-webkit-scrollbar-track": { background: C.bg2, borderRadius: 2 }, "&::-webkit-scrollbar-thumb": { background: C.t4, borderRadius: 2 } }, children: /* @__PURE__ */ jsxs(AgentTable, { children: [
             /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
               /* @__PURE__ */ jsx(AgTh, { children: "Queue" }),
               /* @__PURE__ */ jsx(AgTh, { children: "Agents" }),
@@ -875,15 +876,15 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
               const loadColor = q.loadPct > 50 ? C.red : q.loadPct > 25 ? C.amber : C.green;
               const slaColor = q.slaPct >= 95 ? C.green : q.slaPct >= 85 ? C.amber : C.red;
               const isWaitingHigh = q.waitingCalls > WAITING_THRESHOLD;
-              return /* @__PURE__ */ jsxs(Box2, { component: "tr", sx: isWaitingHigh ? { animation: `${rowBlink} 1s ease infinite` } : q.slaPct < 90 ? { background: "rgba(204,42,42,.04)" } : {}, children: [
+              return /* @__PURE__ */ jsxs(Box_default, { component: "tr", sx: isWaitingHigh ? { animation: `${rowBlink} 1s ease infinite` } : q.slaPct < 90 ? { background: "rgba(204,42,42,.04)" } : {}, children: [
                 /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QName, { children: q.queueName }) }),
                 /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: C.blue, children: q.totalAgents }) }),
                 /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: C.amber, children: q.activeAgents }) }),
                 /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: isWaitingHigh ? C.red : q.waitingCalls > 0 ? C.red : C.green, children: q.waitingCalls }) }),
                 /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsx(QNum, { numColor: C.green, children: q.avgWaitFormatted }) }),
-                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "5px" }, children: [
+                /* @__PURE__ */ jsx(AgTd, { children: /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: "5px" }, children: [
                   /* @__PURE__ */ jsx(QBar, { children: /* @__PURE__ */ jsx(QBarFill, { w: q.loadPct, barColor: loadColor }) }),
-                  /* @__PURE__ */ jsxs(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: C.t3 }, children: [
+                  /* @__PURE__ */ jsxs(Box_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: C.t3 }, children: [
                     q.loadPct,
                     "%"
                   ] })
@@ -896,26 +897,26 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
               ] }, q.queueId);
             }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(AgTd, { colSpan: 8, children: /* @__PURE__ */ jsx(NoDataBox, { children: "No data available" }) }) }) })
           ] }) }),
-          /* @__PURE__ */ jsxs(Box2, { sx: { borderTop: `1px solid ${C.b1}` }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { borderTop: `1px solid ${C.b1}` }, children: [
             /* @__PURE__ */ jsxs(SbHeader, { children: [
-              /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "7px" }, children: [
+              /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: "7px" }, children: [
                 /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M1 8h2l2-5 2 9 2-7 2 5 1-2h3", stroke: C.blue, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }),
                 /* @__PURE__ */ jsx(SbTitle, { children: "Queue Pulse" })
               ] }),
               /* @__PURE__ */ jsx(Badge, { bg: C.greenLt, color: C.green, border: C.greenBd, children: "Live" })
             ] }),
-            /* @__PURE__ */ jsx(Box2, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", borderBottom: `1px solid ${C.b1}` }, children: [
+            /* @__PURE__ */ jsx(Box_default, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", borderBottom: `1px solid ${C.b1}` }, children: [
               { label: "In Queue", value: (_o = queuePulse == null ? void 0 : queuePulse.runningInQueue) != null ? _o : 0, color: C.amber, bg: C.amberLt },
               { label: "Ready", value: (_p = queuePulse == null ? void 0 : queuePulse.readyAgents) != null ? _p : 0, color: C.green, bg: C.greenLt },
               { label: "Avg Wait", value: (_q = queuePulse == null ? void 0 : queuePulse.avgWaitFormatted) != null ? _q : "--:--", color: C.blue, bg: C.blueLt }
-            ].map((s) => /* @__PURE__ */ jsxs(Box2, { sx: { p: "12px", borderRight: `1px solid ${C.b1}`, "&:last-child": { borderRight: "none" }, background: s.bg }, children: [
-              /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 20, fontWeight: 800, color: s.color, lineHeight: 1 }, children: s.value }),
-              /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 8, letterSpacing: 0.8, textTransform: "uppercase", color: s.color, mt: "4px", fontWeight: 600, opacity: 0.75 }, children: s.label })
+            ].map((s) => /* @__PURE__ */ jsxs(Box_default, { sx: { p: "12px", borderRight: `1px solid ${C.b1}`, "&:last-child": { borderRight: "none" }, background: s.bg }, children: [
+              /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'Poppins', Arial, sans-serif", fontSize: 20, fontWeight: 800, color: s.color, lineHeight: 1 }, children: s.value }),
+              /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 8, letterSpacing: 0.8, textTransform: "uppercase", color: s.color, mt: "4px", fontWeight: 600, opacity: 0.75 }, children: s.label })
             ] }, s.label)) })
           ] }),
-          /* @__PURE__ */ jsxs(Box2, { children: [
+          /* @__PURE__ */ jsxs(Box_default, { children: [
             /* @__PURE__ */ jsxs(SbHeader, { children: [
-              /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "7px" }, children: [
+              /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: "7px" }, children: [
                 /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", children: [
                   /* @__PURE__ */ jsx("path", { d: "M8 1.5a5 5 0 0 1 5 5v2.5l1 2H2l1-2V6.5a5 5 0 0 1 5-5z", stroke: alerts.length > 0 ? C.amber : C.t3, strokeWidth: "1.4", strokeLinejoin: "round" }),
                   /* @__PURE__ */ jsx("path", { d: "M6.5 13a1.5 1.5 0 0 0 3 0", stroke: alerts.length > 0 ? C.amber : C.t3, strokeWidth: "1.4", strokeLinecap: "round" })
@@ -924,7 +925,7 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
               ] }),
               /* @__PURE__ */ jsx(Badge, { bg: alerts.length > 0 ? C.amberLt : C.bg2, color: alerts.length > 0 ? C.amber : C.t3, border: alerts.length > 0 ? C.amberBd : C.b2, children: alerts.length })
             ] }),
-            /* @__PURE__ */ jsx(Box2, { sx: {
+            /* @__PURE__ */ jsx(Box_default, { sx: {
               overflowY: "auto",
               maxHeight: 220,
               "&::-webkit-scrollbar": { width: 3 },
@@ -939,15 +940,15 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
                 blue: { bg: C.blueLt, color: C.blue }
               };
               const ac = (_c2 = ALERT_COLORS[sk]) != null ? _c2 : ALERT_COLORS.blue;
-              return /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", gap: "10px", px: "12px", py: "9px", borderBottom: `1px solid ${C.b1}`, background: i % 2 === 0 ? "transparent" : C.bg2 }, children: [
-                /* @__PURE__ */ jsx(Box2, { sx: { width: 8, height: 8, borderRadius: "50%", background: ac.color, flexShrink: 0, mt: "3px" } }),
-                /* @__PURE__ */ jsxs(Box2, { sx: { flex: 1, minWidth: 0 }, children: [
-                  /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 11, fontWeight: 600, color: C.t1, mb: "2px" }, children: a.alertTitle }),
-                  /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 9, color: C.t3, lineHeight: 1.4 }, children: a.alertMessage })
+              return /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", gap: "10px", px: "12px", py: "9px", borderBottom: `1px solid ${C.b1}`, background: i % 2 === 0 ? "transparent" : C.bg2 }, children: [
+                /* @__PURE__ */ jsx(Box_default, { sx: { width: 8, height: 8, borderRadius: "50%", background: ac.color, flexShrink: 0, mt: "3px" } }),
+                /* @__PURE__ */ jsxs(Box_default, { sx: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 11, fontWeight: 600, color: C.t1, mb: "2px" }, children: a.alertTitle }),
+                  /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 9, color: C.t3, lineHeight: 1.4 }, children: a.alertMessage })
                 ] }),
-                /* @__PURE__ */ jsxs(Box2, { sx: { flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
-                  /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 7, fontWeight: 700, px: "5px", py: "1px", borderRadius: "3px", background: ac.bg, color: ac.color, textTransform: "uppercase", letterSpacing: 0.5 }, children: a.severity }),
-                  /* @__PURE__ */ jsx(Box2, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: (() => {
+                /* @__PURE__ */ jsxs(Box_default, { sx: { flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [
+                  /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 7, fontWeight: 700, px: "5px", py: "1px", borderRadius: "3px", background: ac.bg, color: ac.color, textTransform: "uppercase", letterSpacing: 0.5 }, children: a.severity }),
+                  /* @__PURE__ */ jsx(Box_default, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: C.t3 }, children: (() => {
                     try {
                       const [h, m] = a.alertTime.split(":");
                       const hr = parseInt(h, 10);
@@ -975,50 +976,50 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
       };
       const m = modeConfig[selectedMode];
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Box2, { onClick: handleCloseMonitorModal, sx: { position: "fixed", inset: 0, zIndex: 1e3 } }),
+        /* @__PURE__ */ jsx(Box_default, { onClick: handleCloseMonitorModal, sx: { position: "fixed", inset: 0, zIndex: 1e3 } }),
         /* @__PURE__ */ jsxs(MonitorCard, { children: [
-          /* @__PURE__ */ jsx(Box2, { sx: { height: 3, background: m.accent } }),
-          /* @__PURE__ */ jsxs(Box2, { sx: { p: "12px 14px" }, children: [
-            /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1.5 }, children: [
-              /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ jsx(Box2, { sx: { width: 32, height: 32, borderRadius: "10px", background: m.accentLt, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: m.icon }),
-                /* @__PURE__ */ jsxs(Box2, { children: [
-                  /* @__PURE__ */ jsx(Box2, { sx: { fontWeight: 700, fontSize: 13, color: C.t1, lineHeight: 1.2 }, children: "Monitor Call" }),
-                  /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 10, color: C.t3 }, children: [
+          /* @__PURE__ */ jsx(Box_default, { sx: { height: 3, background: m.accent } }),
+          /* @__PURE__ */ jsxs(Box_default, { sx: { p: "12px 14px" }, children: [
+            /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1.5 }, children: [
+              /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx(Box_default, { sx: { width: 32, height: 32, borderRadius: "10px", background: m.accentLt, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: m.icon }),
+                /* @__PURE__ */ jsxs(Box_default, { children: [
+                  /* @__PURE__ */ jsx(Box_default, { sx: { fontWeight: 700, fontSize: 13, color: C.t1, lineHeight: 1.2 }, children: "Monitor Call" }),
+                  /* @__PURE__ */ jsxs(Box_default, { sx: { fontSize: 10, color: C.t3 }, children: [
                     selectedAgent.agentName,
                     " \xB7 ext ",
                     selectedAgent.extension || ""
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx(Box2, { component: "button", onClick: handleCloseMonitorModal, sx: { border: "none", background: "none", cursor: "pointer", color: C.t4, fontSize: 18, lineHeight: 1, p: 0, "&:hover": { color: C.t2 } }, children: "\xD7" })
+              /* @__PURE__ */ jsx(Box_default, { component: "button", onClick: handleCloseMonitorModal, sx: { border: "none", background: "none", cursor: "pointer", color: C.t4, fontSize: 18, lineHeight: 1, p: 0, "&:hover": { color: C.t2 } }, children: "\xD7" })
             ] }),
-            /* @__PURE__ */ jsx(Box2, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 0", background: C.bg2, borderRadius: "8px", p: "8px 10px", mb: 1.5 }, children: [
+            /* @__PURE__ */ jsx(Box_default, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 0", background: C.bg2, borderRadius: "8px", p: "8px 10px", mb: 1.5 }, children: [
               ["Customer", selectedAgent.activeCallerNumber || "\u2014"],
               ["Duration", fmtDur(durations[selectedAgent.agentId] || 0)]
             ].map(([label, value]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 10, color: C.t3, fontWeight: 500 }, children: label }),
-              /* @__PURE__ */ jsx(Box2, { sx: { fontSize: 10, fontWeight: 600, color: C.t1, textAlign: "right" }, children: value })
+              /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 10, color: C.t3, fontWeight: 500 }, children: label }),
+              /* @__PURE__ */ jsx(Box_default, { sx: { fontSize: 10, fontWeight: 600, color: C.t1, textAlign: "right" }, children: value })
             ] }, label)) }),
-            /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", gap: "6px", mb: 1.5 }, children: ["listen", "whisper", "barge"].map((mode) => {
+            /* @__PURE__ */ jsx(Box_default, { sx: { display: "flex", gap: "6px", mb: 1.5 }, children: ["listen", "whisper", "barge"].map((mode) => {
               const mc = modeConfig[mode];
               const active = selectedMode === mode;
-              return /* @__PURE__ */ jsxs(Box2, { onClick: () => setSelectedMode(mode), sx: { flex: 1, textAlign: "center", py: "5px", borderRadius: "20px", fontSize: 9, fontWeight: 700, letterSpacing: 0.4, cursor: "pointer", textTransform: "uppercase", transition: "all 0.15s", background: active ? mc.accent : C.bg2, color: active ? "#fff" : C.t3, border: `1px solid ${active ? mc.accent : "transparent"}`, "&:hover": { background: active ? mc.accent : C.bg3 } }, children: [
+              return /* @__PURE__ */ jsxs(Box_default, { onClick: () => setSelectedMode(mode), sx: { flex: 1, textAlign: "center", py: "5px", borderRadius: "20px", fontSize: 9, fontWeight: 700, letterSpacing: 0.4, cursor: "pointer", textTransform: "uppercase", transition: "all 0.15s", background: active ? mc.accent : C.bg2, color: active ? "#fff" : C.t3, border: `1px solid ${active ? mc.accent : "transparent"}`, "&:hover": { background: active ? mc.accent : C.bg3 } }, children: [
                 mc.icon,
                 " ",
                 mc.label
               ] }, mode);
             }) }),
-            /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 10, color: m.accentText, background: m.accentLt, borderRadius: "6px", px: 1.25, py: 0.75, mb: 1.5, display: "flex", alignItems: "center", gap: 0.5 }, children: [
+            /* @__PURE__ */ jsxs(Box_default, { sx: { fontSize: 10, color: m.accentText, background: m.accentLt, borderRadius: "6px", px: 1.25, py: 0.75, mb: 1.5, display: "flex", alignItems: "center", gap: 0.5 }, children: [
               /* @__PURE__ */ jsx("span", { style: { fontSize: 11 }, children: "\u2139\uFE0F" }),
               " ",
               m.desc,
               " \xB7 Your dialer will ring to connect."
             ] }),
-            monitoringError && /* @__PURE__ */ jsx(Box2, { sx: { mb: 1.5, px: 1.25, py: 0.75, background: C.redLt, borderRadius: "6px", color: C.red, fontSize: 11 }, children: monitoringError }),
-            /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", gap: "8px" }, children: [
-              /* @__PURE__ */ jsx(Box2, { component: "button", onClick: handleCloseMonitorModal, sx: { flex: 1, py: "7px", border: `1px solid ${C.b2}`, borderRadius: "8px", cursor: "pointer", fontSize: 11, fontWeight: 500, background: "transparent", color: C.t2, "&:hover": { background: C.bg2 } }, children: "Cancel" }),
-              /* @__PURE__ */ jsx(Box2, { component: "button", onClick: handleStartMonitoring, disabled: monitoringLoading, sx: { flex: 2, py: "7px", border: "none", borderRadius: "8px", cursor: monitoringLoading ? "not-allowed" : "pointer", fontSize: 11, fontWeight: 700, background: m.accent, color: "#fff", opacity: monitoringLoading ? 0.7 : 1, transition: "opacity 0.15s", "&:hover": { opacity: monitoringLoading ? 0.7 : 0.88 } }, children: monitoringLoading ? "Starting\u2026" : `\u25B6 Start ${m.label}` })
+            monitoringError && /* @__PURE__ */ jsx(Box_default, { sx: { mb: 1.5, px: 1.25, py: 0.75, background: C.redLt, borderRadius: "6px", color: C.red, fontSize: 11 }, children: monitoringError }),
+            /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", gap: "8px" }, children: [
+              /* @__PURE__ */ jsx(Box_default, { component: "button", onClick: handleCloseMonitorModal, sx: { flex: 1, py: "7px", border: `1px solid ${C.b2}`, borderRadius: "8px", cursor: "pointer", fontSize: 11, fontWeight: 500, background: "transparent", color: C.t2, "&:hover": { background: C.bg2 } }, children: "Cancel" }),
+              /* @__PURE__ */ jsx(Box_default, { component: "button", onClick: handleStartMonitoring, disabled: monitoringLoading, sx: { flex: 2, py: "7px", border: "none", borderRadius: "8px", cursor: monitoringLoading ? "not-allowed" : "pointer", fontSize: 11, fontWeight: 700, background: m.accent, color: "#fff", opacity: monitoringLoading ? 0.7 : 1, transition: "opacity 0.15s", "&:hover": { opacity: monitoringLoading ? 0.7 : 0.88 } }, children: monitoringLoading ? "Starting\u2026" : `\u25B6 Start ${m.label}` })
             ] })
           ] })
         ] })
@@ -1032,27 +1033,27 @@ function LiveStatusPageInner({ isTvDashboard = false }) {
         barge: { icon: "\u{1F4E2}", accent: "#c2185b", accentLt: "#fce4ec", label: "Barge" }
       };
       const sm = (_a2 = sessionModeConfig[monitoringSession.mode]) != null ? _a2 : sessionModeConfig.listen;
-      return /* @__PURE__ */ jsxs(Box2, { sx: { position: "fixed", bottom: 20, right: 20, width: 268, background: "#fff", borderRadius: "14px", boxShadow: "0 8px 28px rgba(13,30,53,0.16), 0 2px 6px rgba(13,30,53,0.08)", zIndex: 999, overflow: "hidden", animation: `${slideUp} 0.22s cubic-bezier(.22,.68,0,1.2)` }, children: [
-        /* @__PURE__ */ jsx(Box2, { sx: { height: 3, background: sm.accent } }),
-        /* @__PURE__ */ jsxs(Box2, { sx: { p: "10px 12px" }, children: [
-          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: "8px", mb: 1 }, children: [
-            /* @__PURE__ */ jsx(Box2, { sx: { width: 8, height: 8, borderRadius: "50%", background: C.green, flexShrink: 0, animation: `${pulse} 1.6s ease infinite` } }),
-            /* @__PURE__ */ jsxs(Box2, { sx: { fontWeight: 700, fontSize: 11, color: C.t1, textTransform: "uppercase", letterSpacing: 0.6 }, children: [
+      return /* @__PURE__ */ jsxs(Box_default, { sx: { position: "fixed", bottom: 20, right: 20, width: 268, background: "#fff", borderRadius: "14px", boxShadow: "0 8px 28px rgba(13,30,53,0.16), 0 2px 6px rgba(13,30,53,0.08)", zIndex: 999, overflow: "hidden", animation: `${slideUp} 0.22s cubic-bezier(.22,.68,0,1.2)` }, children: [
+        /* @__PURE__ */ jsx(Box_default, { sx: { height: 3, background: sm.accent } }),
+        /* @__PURE__ */ jsxs(Box_default, { sx: { p: "10px 12px" }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", alignItems: "center", gap: "8px", mb: 1 }, children: [
+            /* @__PURE__ */ jsx(Box_default, { sx: { width: 8, height: 8, borderRadius: "50%", background: C.green, flexShrink: 0, animation: `${pulse} 1.6s ease infinite` } }),
+            /* @__PURE__ */ jsxs(Box_default, { sx: { fontWeight: 700, fontSize: 11, color: C.t1, textTransform: "uppercase", letterSpacing: 0.6 }, children: [
               sm.icon,
               " ",
               sm.label,
               " Active"
             ] }),
-            /* @__PURE__ */ jsx(Box2, { sx: { ml: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, color: sm.accent }, children: fmtDur(Math.floor((Date.now() - monitoringSession.startTime) / 1e3)) })
+            /* @__PURE__ */ jsx(Box_default, { sx: { ml: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600, color: sm.accent }, children: fmtDur(Math.floor((Date.now() - monitoringSession.startTime) / 1e3)) })
           ] }),
-          /* @__PURE__ */ jsxs(Box2, { sx: { fontSize: 11, color: C.t2, mb: 1, pl: "16px" }, children: [
+          /* @__PURE__ */ jsxs(Box_default, { sx: { fontSize: 11, color: C.t2, mb: 1, pl: "16px" }, children: [
             monitoringSession.agentName,
-            /* @__PURE__ */ jsx(Box2, { component: "span", sx: { color: C.t4, mx: 0.5 }, children: "\xB7" }),
+            /* @__PURE__ */ jsx(Box_default, { component: "span", sx: { color: C.t4, mx: 0.5 }, children: "\xB7" }),
             "ext ",
             monitoringSession.agentExt
           ] }),
-          /* @__PURE__ */ jsx(Box2, { sx: { borderTop: `1px solid ${C.b1}`, mb: 1 } }),
-          /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", gap: "5px" }, children: [
+          /* @__PURE__ */ jsx(Box_default, { sx: { borderTop: `1px solid ${C.b1}`, mb: 1 } }),
+          /* @__PURE__ */ jsxs(Box_default, { sx: { display: "flex", gap: "5px" }, children: [
             ["listen", "whisper", "barge"].filter((m) => m !== monitoringSession.mode).map((mode) => {
               const mc = sessionModeConfig[mode];
               return /* @__PURE__ */ jsxs(MonitorBtn, { variant: mode, onClick: () => handleChangeMode(mode), style: { flex: 1, justifyContent: "center", padding: "4px 0", fontSize: 9, borderRadius: 4 }, children: [
@@ -1074,4 +1075,4 @@ function LiveStatusPage(props) {
 export {
   LiveStatusPage as default
 };
-//# sourceMappingURL=liveStatus-F6AKCC27.mjs.map
+//# sourceMappingURL=liveStatus-YSBYSVOO.mjs.map