chordia-ui 3.8.2 → 3.8.3

package/dist/components/UpdatedInteractionDetails.es.js

@@ -1,8 +1,8 @@
-import { jsxs as n, Fragment as cn, jsx as e } from "react/jsx-runtime";
-import ce, { useState as D, useRef as N, useEffect as _e, useMemo as He } from "react";
-import { ShieldCheck as fn, TrendingUp as gn, Lightbulb as yt, ThumbsUp as mt, ChevronUp as vt, ChevronDown as xt, Pencil as hn, ThumbsDown as pn, FileSignal as bt, ScrollText as St, PauseCircle as kt, PlayCircle as wt, Info as Ct, MessagesSquare as rt, Check as un, CircleCheck as yn, Ellipsis as mn, X as lt, CornerDownRight as vn, ArrowLeft as Te, ArrowRight as ot, ClipboardList as xn, CalendarDays as at, PhoneIncoming as bn, Headset as st, CircleUser as Re, ChevronRight as Sn, History as kn, ExternalLink as wn } from "lucide-react";
-import { U as Cn } from "../UpdatedInteractionRecording.es.js";
-import { S as Fn } from "../SideDrawer.es.js";
+import { jsxs as n, Fragment as fn, jsx as e } from "react/jsx-runtime";
+import ce, { useState as D, useRef as N, useEffect as Ae, useMemo as Te } from "react";
+import { ShieldCheck as gn, TrendingUp as hn, Lightbulb as mt, ThumbsUp as vt, ChevronUp as xt, ChevronDown as bt, Pencil as pn, ThumbsDown as un, FileSignal as St, ScrollText as kt, PauseCircle as wt, PlayCircle as Ct, Info as Ft, MessagesSquare as rt, Check as yn, CircleCheck as mn, Ellipsis as vn, X as ot, CornerDownRight as xn, ArrowLeft as _e, ArrowRight as lt, ClipboardList as bn, CalendarDays as at, PhoneIncoming as st, Headset as dt, CircleUser as Re, ChevronRight as Sn, History as kn, ExternalLink as wn, PhoneOutgoing as Cn } from "lucide-react";
+import { U as Fn } from "../UpdatedInteractionRecording.es.js";
+import { S as Wn } from "../SideDrawer.es.js";
 const A = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
@@ -12,17 +12,17 @@ const A = {
   quoteLine: "var(--border-warm, #B2AEA8)",
   quoteText: "var(--text-subtle-warm, #767473)",
   iconBg: "var(--surface-hover, #F3F7F7)"
-}, Wn = {
+}, In = {
   effective: "Effective",
   strong: "Strong",
   needs_improvement: "Needs Improvement",
   mixed: "Mixed"
-}, dt = "updated-coaching-synthesis-keyframes";
-function In() {
-  if (typeof document > "u" || document.getElementById(dt))
+}, ct = "updated-coaching-synthesis-keyframes";
+function Dn() {
+  if (typeof document > "u" || document.getElementById(ct))
     return;
   const t = document.createElement("style");
-  t.id = dt, t.textContent = `
+  t.id = ct, t.textContent = `
     @keyframes updated-coaching-shimmer {
       0% { background-position: -200% 0; }
       100% { background-position: 200% 0; }
@@ -33,8 +33,8 @@ function In() {
     }
   `, document.head.appendChild(t);
 }
-function Dn({ overall: t }) {
-  const r = Wn[t] || (t ? t.replace(/_/g, " ") : "");
+function zn({ overall: t }) {
+  const r = In[t] || (t ? t.replace(/_/g, " ") : "");
   return /* @__PURE__ */ n("div", { style: {
     display: "flex",
     alignItems: "center",
@@ -53,7 +53,7 @@ function Dn({ overall: t }) {
       alignItems: "center",
       gap: 6
     }, children: [
-      /* @__PURE__ */ e(mt, { size: 14, color: A.strong, strokeWidth: 1.5 }),
+      /* @__PURE__ */ e(vt, { size: 14, color: A.strong, strokeWidth: 1.5 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 13,
         fontWeight: 600,
@@ -64,7 +64,7 @@ function Dn({ overall: t }) {
     ] })
   ] });
 }
-function zn({ item: t }) {
+function Gn({ item: t }) {
   const r = typeof t == "string" ? t : (t == null ? void 0 : t.text) || "", i = typeof t == "object" ? t == null ? void 0 : t.quote : null;
   return /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
     /* @__PURE__ */ e("div", { style: {
@@ -98,7 +98,7 @@ function zn({ item: t }) {
     ] })
   ] });
 }
-function ct({ icon: t, label: r, items: i }) {
+function ft({ icon: t, label: r, items: i }) {
   return !i || i.length === 0 ? null : /* @__PURE__ */ n("div", { style: {
     flex: 1,
     display: "flex",
@@ -129,15 +129,15 @@ function ct({ icon: t, label: r, items: i }) {
         lineHeight: "normal"
       }, children: r })
     ] }),
-    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: i.map((s, o) => /* @__PURE__ */ e(zn, { item: s }, o)) })
+    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: i.map((l, a) => /* @__PURE__ */ e(Gn, { item: l }, a)) })
   ] });
 }
-const Gn = ({ data: t, loading: r, error: i }) => {
+const Mn = ({ data: t, loading: r, error: i }) => {
   var p, y;
   if (ce.useEffect(() => {
-    In();
+    Dn();
   }, []), r)
-    return /* @__PURE__ */ n(cn, { children: [
+    return /* @__PURE__ */ n(fn, { children: [
       /* @__PURE__ */ e("style", { children: `
           @keyframes coaching-spinner-spin {
             from { transform: rotate(0deg); }
@@ -207,7 +207,7 @@ const Gn = ({ data: t, loading: r, error: i }) => {
     }, children: "Unable to generate coaching summary." });
   if (!t)
     return null;
-  const s = t.strengths || [], o = t.improvements || [], d = typeof t.one_liner == "string" ? t.one_liner : ((p = t.one_liner) == null ? void 0 : p.text) || "", g = typeof t.context == "string" ? t.context : ((y = t.context) == null ? void 0 : y.text) || "";
+  const l = t.strengths || [], a = t.improvements || [], d = typeof t.one_liner == "string" ? t.one_liner : ((p = t.one_liner) == null ? void 0 : p.text) || "", g = typeof t.context == "string" ? t.context : ((y = t.context) == null ? void 0 : y.text) || "";
   return /* @__PURE__ */ n("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -219,7 +219,7 @@ const Gn = ({ data: t, loading: r, error: i }) => {
       alignItems: "center",
       gap: 8
     }, children: [
-      /* @__PURE__ */ e(fn, { size: 20, color: A.accent, strokeWidth: 2 }),
+      /* @__PURE__ */ e(gn, { size: 20, color: A.accent, strokeWidth: 2 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 16,
         fontWeight: 600,
@@ -250,38 +250,38 @@ const Gn = ({ data: t, loading: r, error: i }) => {
         lineHeight: 1.5,
         flex: 1
       }, children: g }),
-      t.overall && /* @__PURE__ */ e(Dn, { overall: t.overall })
+      t.overall && /* @__PURE__ */ e(zn, { overall: t.overall })
     ] }),
-    (s.length > 0 || o.length > 0) && /* @__PURE__ */ n("div", { style: {
+    (l.length > 0 || a.length > 0) && /* @__PURE__ */ n("div", { style: {
       display: "flex",
       gap: 24,
       paddingTop: 24,
       borderTop: `1px solid ${A.absent}`
     }, children: [
       /* @__PURE__ */ e(
-        ct,
+        ft,
         {
-          icon: /* @__PURE__ */ e(gn, { size: 14, color: A.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(hn, { size: 14, color: A.strong, strokeWidth: 1.5 }),
           label: "Key Strengths",
-          items: s
+          items: l
         }
       ),
       /* @__PURE__ */ e(
-        ct,
+        ft,
         {
-          icon: /* @__PURE__ */ e(yt, { size: 14, color: A.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(mt, { size: 14, color: A.strong, strokeWidth: 1.5 }),
           label: "Improvements",
-          items: o
+          items: a
         }
       )
     ] })
   ] });
 };
-function Mn(t) {
+function En(t) {
   const r = Math.floor(t / 60), i = Math.round(t % 60);
   return `${r}:${i.toString().padStart(2, "0")}`;
 }
-const En = {
+const Hn = {
   display: "flex",
   justifyContent: "space-between",
   padding: "8px 8px 12px 8px",
@@ -292,18 +292,18 @@ const En = {
   fontWeight: 400,
   lineHeight: "normal",
   borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
-}, ft = {
+}, gt = {
   display: "flex",
   flexDirection: "column",
   flex: "1 0 0",
   gap: 0,
   minWidth: 0
-}, Hn = ({
+}, Tn = ({
   meta: t = {},
   callPurpose: r = {},
   classification: i = {},
-  dimensions: s = [],
-  outcomeQuality: o = "Neutral",
+  dimensions: l = [],
+  outcomeQuality: a = "Neutral",
   onMoreDetails: d,
   moreDetails: g = [],
   resolutionOutcome: p,
@@ -312,42 +312,44 @@ const En = {
   canShowEditButton: x = !1,
   onEditInteraction: I
 }) => {
-  const [a, b] = D(!1), w = N(null), C = t.duration_seconds != null ? Mn(t.duration_seconds) : null, z = t.message_count, T = r.interaction_driver, S = i.interaction_paradigm, F = (h) => s.find(($) => ($.key || "").toLowerCase().includes(h)), E = F("resolution_outcome"), L = F("customer_intent"), _ = F("location"), O = F("outcome_quality"), u = (h) => h ? h.replace(/_/g, " ").replace(/\b\w/g, ($) => $.toUpperCase()) : null, m = o !== "Neutral" ? o : O ? u(O.value) : o, c = p ?? (E ? u(E.value) : null), B = y ?? (L ? u(L.value) : null), J = W ?? (_ ? u(_.value) : null), ie = new Set(["resolution_outcome", "customer_intent", "location", "outcome_quality"].map((h) => `dim.${h}`)), R = s.filter((h) => !ie.has(h.key)), X = [], ee = [
+  const [s, b] = D(!1), w = N(null), C = t.duration_seconds != null ? En(t.duration_seconds) : null, z = t.message_count, T = r.interaction_driver, S = i.interaction_paradigm, F = (h) => l.find(($) => ($.key || "").toLowerCase().includes(h)), H = F("resolution_outcome"), L = F("customer_intent"), R = F("location"), O = F("outcome_quality"), u = (h) => h ? h.replace(/_/g, " ").replace(/\b\w/g, ($) => $.toUpperCase()) : null, m = a !== "Neutral" ? a : O ? u(O.value) : a, c = p ?? (H ? u(H.value) : null), B = y ?? (L ? u(L.value) : null), J = W ?? (R ? u(R.value) : null), X = S != null ? u(S) : null, U = new Set(["resolution_outcome", "customer_intent", "location", "outcome_quality"].map((h) => `dim.${h}`)), _ = l.filter((h) => !U.has(h.key)), ne = [], ie = [
     [
       C != null ? { label: "Duration", value: C } : null,
       z != null ? { label: "Messages", value: z } : null
     ],
     [
       T != null ? { label: "Driver", value: T } : null,
-      S != null ? { label: "Paradigm", value: S } : null
+      // paradigm != null ? { label: 'Paradigm', value: paradigm } : null,
+      J != null ? { label: "Location", value: J } : null
     ]
   ];
-  for (let h = 0; h < R.length; h += 2) {
-    const $ = R[h] ? { label: R[h].display_name || R[h].label || R[h].key, value: u(R[h].value) } : null, U = R[h + 1] ? { label: R[h + 1].display_name || R[h + 1].label || R[h + 1].key, value: u(R[h + 1].value) } : null;
-    ee.push([$, U]);
+  for (let h = 0; h < _.length; h += 2) {
+    const $ = _[h] ? { label: _[h].display_name || _[h].label || _[h].key, value: u(_[h].value) } : null, o = _[h + 1] ? { label: _[h + 1].display_name || _[h + 1].label || _[h + 1].key, value: u(_[h + 1].value) } : null;
+    ie.push([$, o]);
   }
-  ee.push([
+  ie.push([
     { label: "Outcome Quality", value: m },
     { isMoreDetails: !0 }
-  ]), ee.forEach((h) => X.push(h));
-  const ae = [
+  ]), ie.forEach((h) => ne.push(h));
+  const Z = [
     c != null && { label: "Resolution Outcome", value: c },
     B != null && { label: "Customer Intent", value: B },
-    J != null && { label: "Location", value: J },
+    // resolvedLocation != null && { label: 'Location', value: resolvedLocation },
+    X != null && { label: "Paradigm", value: X },
     ...g || []
   ].filter(Boolean);
-  _e(() => {
-    if (!a)
+  Ae(() => {
+    if (!s)
       return;
     const h = ($) => {
       w.current && !w.current.contains($.target) && b(!1);
     };
     return document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
-  }, [a]);
-  const q = (h) => /* @__PURE__ */ n(
+  }, [s]);
+  const ae = (h) => /* @__PURE__ */ n(
     "div",
     {
-      style: En,
+      style: Hn,
       children: [
         /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: h.label }),
         /* @__PURE__ */ e("span", { style: {
@@ -379,7 +381,7 @@ const En = {
           "button",
           {
             onClick: () => {
-              b((h) => !h), d && !a && d();
+              b((h) => !h), d && !s && d();
             },
             style: {
               display: "flex",
@@ -399,7 +401,7 @@ const En = {
             },
             children: [
               /* @__PURE__ */ e("span", { children: "More Details" }),
-              a ? /* @__PURE__ */ e(vt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(xt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
+              s ? /* @__PURE__ */ e(xt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(bt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
             ]
           }
         ),
@@ -425,7 +427,7 @@ const En = {
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ e(hn, { size: 15, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(pn, { size: 15, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
               /* @__PURE__ */ e("span", { style: { fontSize: 13, lineHeight: "normal" }, children: "Edit" })
             ]
           }
@@ -447,8 +449,8 @@ const En = {
         overflow: "visible"
       },
       children: [
-        X.map((h, $) => {
-          var U;
+        ne.map((h, $) => {
+          var o;
           return /* @__PURE__ */ n(
             "div",
             {
@@ -460,14 +462,14 @@ const En = {
                 flexWrap: "nowrap"
               },
               children: [
-                /* @__PURE__ */ e("div", { style: ft, children: h[0] && !h[0].isMoreDetails ? q(h[0]) : /* @__PURE__ */ e("div", { style: { flex: 1 } }) }),
-                /* @__PURE__ */ e("div", { style: ft, children: h[1] && !h[1].isMoreDetails ? q(h[1]) : (U = h[1]) != null && U.isMoreDetails ? fe() : /* @__PURE__ */ e("div", { style: { flex: 1 } }) })
+                /* @__PURE__ */ e("div", { style: gt, children: h[0] && !h[0].isMoreDetails ? ae(h[0]) : /* @__PURE__ */ e("div", { style: { flex: 1 } }) }),
+                /* @__PURE__ */ e("div", { style: gt, children: h[1] && !h[1].isMoreDetails ? ae(h[1]) : (o = h[1]) != null && o.isMoreDetails ? fe() : /* @__PURE__ */ e("div", { style: { flex: 1 } }) })
               ]
             },
             $
           );
         }),
-        a && ae.length > 0 && /* @__PURE__ */ n(
+        s && Z.length > 0 && /* @__PURE__ */ n(
           "div",
           {
             style: {
@@ -496,7 +498,7 @@ const En = {
                 borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
                 alignSelf: "stretch"
               }, children: "More details" }),
-              ae.map((h) => /* @__PURE__ */ n(
+              Z.map((h) => /* @__PURE__ */ n(
                 "div",
                 {
                   style: {
@@ -531,22 +533,22 @@ const En = {
       ]
     }
   );
-}, M = {
+}, E = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
   absent: "var(--Grey-absent, #D9D9D9)",
   white: "var(--Grey-White, #FFF)",
   cardBg: "var(--surface-warm-40, rgba(243, 241, 229, 0.40))"
-}, P = 1.2, gt = 3, ht = (t) => t != null ? Math.round(t * 100) + "%" : "—", Tn = (t) => {
+}, P = 1.2, ht = 3, pt = (t) => t != null ? Math.round(t * 100) + "%" : "—", _n = (t) => {
   if (t == null)
     return "—";
   const r = (t * 100).toFixed(1);
   return t > 0 ? `+${r}pp` : `${r}pp`;
 }, Rn = ({ outcomeLift: t, driverLabels: r = [] }) => {
-  var a;
+  var s;
   if (!t || t.lift == null)
     return null;
-  const i = t.p_expected, s = t.p_full, o = t.lift_raw ?? (s != null && i != null ? s - i : null), d = t.lift, g = (a = t.interpretation) != null && a.lift_band ? t.interpretation.lift_band.replace(/_/g, " ") : d >= 0 ? "Positive" : "Negative", p = g.charAt(0).toUpperCase() + g.slice(1), W = /negative/i.test(g) ? pn : mt, x = r.slice(0, gt), I = r.length - gt;
+  const i = t.p_expected, l = t.p_full, a = t.lift_raw ?? (l != null && i != null ? l - i : null), d = t.lift, g = (s = t.interpretation) != null && s.lift_band ? t.interpretation.lift_band.replace(/_/g, " ") : d >= 0 ? "Positive" : "Negative", p = g.charAt(0).toUpperCase() + g.slice(1), W = /negative/i.test(g) ? un : vt, x = r.slice(0, ht), I = r.length - ht;
   return /* @__PURE__ */ n(
     "div",
     {
@@ -556,8 +558,8 @@ const En = {
         padding: 24,
         gap: 24,
         borderRadius: 8,
-        border: `1px solid ${M.absent}`,
-        background: M.cardBg,
+        border: `1px solid ${E.absent}`,
+        background: E.cardBg,
         alignSelf: "stretch"
       },
       children: [
@@ -579,7 +581,7 @@ const En = {
                     style: {
                       fontSize: 15,
                       fontWeight: 600,
-                      color: M.strong,
+                      color: E.strong,
                       fontFamily: "var(--font-sans)",
                       lineHeight: P
                     },
@@ -606,8 +608,8 @@ const En = {
                           // borderLeft: `1px solid ${COLORS.absent}`,
                         },
                         children: [
-                          /* @__PURE__ */ e(W, { size: 14, color: M.strong }),
-                          /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: M.strong, lineHeight: P }, children: p })
+                          /* @__PURE__ */ e(W, { size: 14, color: E.strong }),
+                          /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: E.strong, lineHeight: P }, children: p })
                         ]
                       }
                     )
@@ -625,10 +627,10 @@ const En = {
               },
               children: [
                 /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start", flex: 1, minWidth: 0 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: M.muted, fontFamily: "var(--font-sans)", lineHeight: P }, children: ht(i) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: E.muted, fontFamily: "var(--font-sans)", lineHeight: P }, children: pt(i) }),
                   /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start", minHeight: 48 }, children: [
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: M.strong, fontFamily: "var(--font-sans)", lineHeight: P, whiteSpace: "nowrap" }, children: "Expected Outcome" }),
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: M.muted, fontFamily: "var(--font-sans)", lineHeight: P, textAlign: "left" }, children: "Based on call type & difficulty" })
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: E.strong, fontFamily: "var(--font-sans)", lineHeight: P, whiteSpace: "nowrap" }, children: "Expected Outcome" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: E.muted, fontFamily: "var(--font-sans)", lineHeight: P, textAlign: "left" }, children: "Based on call type & difficulty" })
                   ] })
                 ] }),
                 /* @__PURE__ */ n("div", { style: {
@@ -637,14 +639,14 @@ const En = {
                   gap: 16,
                   alignItems: "flex-start",
                   paddingLeft: 24,
-                  borderLeft: `1px solid ${M.absent}`,
+                  borderLeft: `1px solid ${E.absent}`,
                   flex: 1,
                   minWidth: 0
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: M.muted, fontFamily: "var(--font-sans)", lineHeight: P }, children: Tn(o) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: E.muted, fontFamily: "var(--font-sans)", lineHeight: P }, children: _n(a) }),
                   /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start", minHeight: 48 }, children: [
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: M.strong, fontFamily: "var(--font-sans)", lineHeight: P, whiteSpace: "nowrap" }, children: "Agent Impact" }),
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: M.muted, fontFamily: "var(--font-sans)", lineHeight: P, textAlign: "left" }, children: "Behavior-driven change" })
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: E.strong, fontFamily: "var(--font-sans)", lineHeight: P, whiteSpace: "nowrap" }, children: "Agent Impact" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: E.muted, fontFamily: "var(--font-sans)", lineHeight: P, textAlign: "left" }, children: "Behavior-driven change" })
                   ] })
                 ] }),
                 /* @__PURE__ */ n("div", { style: {
@@ -653,14 +655,14 @@ const En = {
                   gap: 16,
                   alignItems: "flex-start",
                   paddingLeft: 24,
-                  borderLeft: `1px solid ${M.absent}`,
+                  borderLeft: `1px solid ${E.absent}`,
                   flex: 1,
                   minWidth: 0
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: M.strong, fontFamily: "var(--font-sans)", lineHeight: P }, children: ht(s) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: E.strong, fontFamily: "var(--font-sans)", lineHeight: P }, children: pt(l) }),
                   /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start", minHeight: 48 }, children: [
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: M.strong, fontFamily: "var(--font-sans)", lineHeight: P, whiteSpace: "nowrap" }, children: "Outcome" }),
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: M.muted, fontFamily: "var(--font-sans)", lineHeight: P, textAlign: "left" }, children: "With agent behaviors" })
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: E.strong, fontFamily: "var(--font-sans)", lineHeight: P, whiteSpace: "nowrap" }, children: "Outcome" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: E.muted, fontFamily: "var(--font-sans)", lineHeight: P, textAlign: "left" }, children: "With agent behaviors" })
                   ] })
                 ] })
               ]
@@ -674,7 +676,7 @@ const En = {
               style: {
                 fontSize: 12,
                 fontWeight: 600,
-                color: M.strong,
+                color: E.strong,
                 fontFamily: "var(--font-sans)",
                 lineHeight: P
               },
@@ -691,8 +693,8 @@ const En = {
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 4,
-                  border: `1px solid ${M.absent}`,
-                  background: M.white
+                  border: `1px solid ${E.absent}`,
+                  background: E.white
                 },
                 children: /* @__PURE__ */ e(
                   "span",
@@ -700,7 +702,7 @@ const En = {
                     style: {
                       fontSize: 12,
                       fontWeight: 400,
-                      color: M.strong,
+                      color: E.strong,
                       fontFamily: "var(--font-sans)",
                       lineHeight: P,
                       whiteSpace: "nowrap",
@@ -723,8 +725,8 @@ const En = {
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 4,
-                  border: `1px solid ${M.absent}`,
-                  background: M.white
+                  border: `1px solid ${E.absent}`,
+                  background: E.white
                 },
                 children: /* @__PURE__ */ n(
                   "span",
@@ -732,7 +734,7 @@ const En = {
                     style: {
                       fontSize: 12,
                       fontWeight: 400,
-                      color: M.strong,
+                      color: E.strong,
                       fontFamily: "var(--font-sans)",
                       lineHeight: P,
                       whiteSpace: "nowrap"
@@ -750,12 +752,12 @@ const En = {
       ]
     }
   );
-}, pt = ({ children: t, size: r = 28, onClick: i, title: s }) => {
-  const [o, d] = D(!1);
+}, ut = ({ children: t, size: r = 28, onClick: i, title: l }) => {
+  const [a, d] = D(!1);
   return /* @__PURE__ */ e(
     "div",
     {
-      title: s,
+      title: l,
       onClick: i,
       onMouseEnter: () => d(!0),
       onMouseLeave: () => d(!1),
@@ -766,7 +768,7 @@ const En = {
         width: r,
         height: r,
         borderRadius: 9999,
-        background: o ? "var(--surface-hover, #F3F7F7)" : "transparent",
+        background: a ? "var(--surface-hover, #F3F7F7)" : "transparent",
         cursor: "pointer",
         flexShrink: 0,
         transition: "background 0.15s"
@@ -774,24 +776,24 @@ const En = {
       children: t
     }
   );
-}, _n = ({
+}, An = ({
   signals: t = { signals: [], present_count: 0, total_signals_evaluated: 0 },
   expandedSignals: r = /* @__PURE__ */ new Set(),
   toggleSignal: i = () => {
   },
-  playEvidence: s = () => {
+  playEvidence: l = () => {
   },
-  highlightTurns: o = () => {
+  highlightTurns: a = () => {
   },
   onShowInTranscript: d = () => {
   },
   timelinePlaying: g = !1,
   currentTimeSeconds: p = 0
 }) => {
-  const y = (t == null ? void 0 : t.signals) ?? [], W = (t == null ? void 0 : t.present_count) ?? y.length, x = (a) => {
-    const b = Math.floor(a / 6e4), w = Math.floor(a % 6e4 / 1e3);
+  const y = (t == null ? void 0 : t.signals) ?? [], W = (t == null ? void 0 : t.present_count) ?? y.length, x = (s) => {
+    const b = Math.floor(s / 6e4), w = Math.floor(s % 6e4 / 1e3);
     return `${b.toString().padStart(2, "0")}:${w.toString().padStart(2, "0")}`;
-  }, I = (a) => g && a.start_ms != null && p * 1e3 >= a.start_ms && p * 1e3 <= (a.end_ms ?? a.start_ms + 5e3);
+  }, I = (s) => g && s.start_ms != null && p * 1e3 >= s.start_ms && p * 1e3 <= (s.end_ms ?? s.start_ms + 5e3);
   return /* @__PURE__ */ n("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -815,7 +817,7 @@ const En = {
         borderRadius: 9999,
         background: "var(--surface-hover, #F3F7F7)",
         flexShrink: 0
-      }, children: /* @__PURE__ */ e(bt, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      }, children: /* @__PURE__ */ e(St, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
       /* @__PURE__ */ n("div", { style: {
         display: "flex",
         alignItems: "center",
@@ -849,9 +851,9 @@ const En = {
         fontSize: 14,
         color: "var(--Grey-Muted, #808183)"
       }, children: "No signals detected." }),
-      y.map((a, b) => {
+      y.map((s, b) => {
         var T, S, F;
-        const w = a.key ?? a.id ?? b, C = r.has(w), z = ((T = a.observations) == null ? void 0 : T.length) ?? 0;
+        const w = s.key ?? s.id ?? b, C = r.has(w), z = ((T = s.observations) == null ? void 0 : T.length) ?? 0;
         return /* @__PURE__ */ n(
           "div",
           {
@@ -888,7 +890,7 @@ const En = {
                       color: "var(--text-dark, #0B0A0A)",
                       lineHeight: 1.71
                     }, children: [
-                      a.display_name || ((S = a.key) == null ? void 0 : S.replace(/_/g, " ")),
+                      s.display_name || ((S = s.key) == null ? void 0 : S.replace(/_/g, " ")),
                       z > 0 && /* @__PURE__ */ n("span", { style: {
                         fontWeight: 600,
                         color: "var(--text-dark, #0B0A0A)",
@@ -899,17 +901,17 @@ const En = {
                         ")"
                       ] })
                     ] }),
-                    C ? /* @__PURE__ */ e(vt, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(xt, { size: 20, color: "#767473" })
+                    C ? /* @__PURE__ */ e(xt, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(bt, { size: 20, color: "#767473" })
                   ]
                 }
               ),
-              C && ((F = a.observations) == null ? void 0 : F.length) > 0 && /* @__PURE__ */ e("div", { style: {
+              C && ((F = s.observations) == null ? void 0 : F.length) > 0 && /* @__PURE__ */ e("div", { style: {
                 display: "flex",
                 flexDirection: "column",
                 alignSelf: "stretch",
                 gap: 0
-              }, children: a.observations.map((E, L) => {
-                var _, O, u;
+              }, children: s.observations.map((H, L) => {
+                var R, O, u;
                 return /* @__PURE__ */ n(
                   "div",
                   {
@@ -933,8 +935,8 @@ const En = {
                           fontWeight: 400,
                           color: "var(--text-subtle-warm, #767473)",
                           lineHeight: 1.5
-                        }, children: E.reason || E.explanation }),
-                        ((O = (_ = E.evidence) == null ? void 0 : _[0]) == null ? void 0 : O.start_ms) != null && /* @__PURE__ */ n(
+                        }, children: H.reason || H.explanation }),
+                        ((O = (R = H.evidence) == null ? void 0 : R[0]) == null ? void 0 : O.start_ms) != null && /* @__PURE__ */ n(
                           "div",
                           {
                             style: {
@@ -945,14 +947,14 @@ const En = {
                             },
                             children: [
                               /* @__PURE__ */ e(
-                                pt,
+                                ut,
                                 {
                                   size: 28,
                                   title: "Show in transcript",
                                   onClick: (m) => {
-                                    m.stopPropagation(), d(E.evidence[0].start_ms);
+                                    m.stopPropagation(), d(H.evidence[0].start_ms);
                                   },
-                                  children: /* @__PURE__ */ e(St, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                                  children: /* @__PURE__ */ e(kt, { size: 16, color: "#808183", strokeWidth: 1.5 })
                                 }
                               ),
                               /* @__PURE__ */ e("span", { style: {
@@ -961,21 +963,21 @@ const En = {
                                 color: "var(--Grey-Muted, #808183)",
                                 lineHeight: 1.2,
                                 whiteSpace: "nowrap"
-                              }, children: x(E.evidence[0].start_ms) })
+                              }, children: x(H.evidence[0].start_ms) })
                             ]
                           }
                         )
                       ] }),
-                      (u = E.evidence) == null ? void 0 : u.map((m, c) => {
+                      (u = H.evidence) == null ? void 0 : u.map((m, c) => {
                         const B = m.start_ms != null && m.end_ms != null;
                         return m.text && /* @__PURE__ */ n(
                           "div",
                           {
                             onClick: (J) => {
-                              J.stopPropagation(), B && s(m);
+                              J.stopPropagation(), B && l(m);
                             },
-                            onMouseEnter: () => o(m.turn_ids ?? []),
-                            onMouseLeave: () => o([]),
+                            onMouseEnter: () => a(m.turn_ids ?? []),
+                            onMouseLeave: () => a([]),
                             style: {
                               display: "flex",
                               alignItems: "center",
@@ -984,15 +986,15 @@ const En = {
                               cursor: B ? "pointer" : "default"
                             },
                             children: [
-                              B && /* @__PURE__ */ e(pt, { size: 28, children: I(m) ? /* @__PURE__ */ e(
-                                kt,
+                              B && /* @__PURE__ */ e(ut, { size: 28, children: I(m) ? /* @__PURE__ */ e(
+                                wt,
                                 {
                                   size: 17,
                                   color: "var(--Grey-Muted, #808183)",
                                   strokeWidth: 1.5
                                 }
                               ) : /* @__PURE__ */ e(
-                                wt,
+                                Ct,
                                 {
                                   size: 17,
                                   color: "var(--Grey-Muted, #808183)",
@@ -1016,7 +1018,7 @@ const En = {
                       })
                     ]
                   },
-                  E.key ?? L
+                  H.key ?? L
                 );
               }) })
             ]
@@ -1034,24 +1036,24 @@ const En = {
   accent: "var(--rail-orange, #C98A5A)",
   track: "var(--rail-surface-2, #E3E1D7)",
   infoIcon: "var(--color-input-border, #ACACAD)"
-}, An = ({ score: t = 4, minScore: r = 0, maxScore: i = 5 }) => {
-  const x = Number(t), I = Number.isFinite(x) ? Math.min(Math.max(x, r), i) : r, a = i > r ? (I - r) / (i - r) * 5 : 0, b = 180 / 5, w = (T) => {
+}, Ln = ({ score: t = 4, minScore: r = 0, maxScore: i = 5 }) => {
+  const x = Number(t), I = Number.isFinite(x) ? Math.min(Math.max(x, r), i) : r, s = i > r ? (I - r) / (i - r) * 5 : 0, b = 180 / 5, w = (T) => {
     const S = T * Math.PI / 180;
     return {
       x: 121.5 + 85 * Math.cos(S),
       y: 123 - 85 * Math.sin(S)
     };
   }, C = (T, S) => {
-    const F = w(T), E = w(S), L = T - S > 180 ? 1 : 0;
-    return `M ${F.x} ${F.y} A 85 85 0 ${L} 1 ${E.x} ${E.y}`;
+    const F = w(T), H = w(S), L = T - S > 180 ? 1 : 0;
+    return `M ${F.x} ${F.y} A 85 85 0 ${L} 1 ${H.x} ${H.y}`;
   }, z = 2;
   return /* @__PURE__ */ e("svg", { width: "100%", viewBox: "0 0 243 130", fill: "none", style: { maxWidth: 243 }, children: Array.from({ length: 5 }, (T, S) => {
-    const F = 180 - S * b - (S > 0 ? z / 2 : 0), E = 180 - (S + 1) * b + (S < 5 - 1 ? z / 2 : 0), L = Math.max(0, Math.min(1, a - S)), _ = C(F, E);
+    const F = 180 - S * b - (S > 0 ? z / 2 : 0), H = 180 - (S + 1) * b + (S < 5 - 1 ? z / 2 : 0), L = Math.max(0, Math.min(1, s - S)), R = C(F, H);
     return /* @__PURE__ */ n("g", { children: [
       /* @__PURE__ */ e(
         "path",
         {
-          d: _,
+          d: R,
           stroke: Y.track,
           strokeWidth: 30,
           strokeLinecap: "butt",
@@ -1061,7 +1063,7 @@ const En = {
       L > 0 && /* @__PURE__ */ e(
         "path",
         {
-          d: _,
+          d: R,
           stroke: Y.strong,
           strokeWidth: 30,
           strokeLinecap: "butt",
@@ -1072,10 +1074,10 @@ const En = {
       )
     ] }, S);
   }) });
-}, Ln = ({ value: t = 0, maxValue: r = 5 }) => {
-  const i = Number(t), s = Number.isFinite(i) ? Math.min(Math.max(i, 0), r) : 0;
-  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: r }, (o, d) => {
-    const g = Math.max(0, Math.min(1, s - d));
+}, Bn = ({ value: t = 0, maxValue: r = 5 }) => {
+  const i = Number(t), l = Number.isFinite(i) ? Math.min(Math.max(i, 0), r) : 0;
+  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: r }, (a, d) => {
+    const g = Math.max(0, Math.min(1, l - d));
     return /* @__PURE__ */ e(
       "div",
       {
@@ -1100,29 +1102,29 @@ const En = {
       d
     );
   }) });
-}, Bn = {
+}, jn = {
   CSAT: "Predicted Customer Satisfaction",
   Resolution: "Predicted Resolution: was the issue fully resolved?",
   "Process Adherence": "Process Adherence: Did the agent follow procedures?",
   Communication: "Predicted Communication Quality: Clarity, Empathy, Professionalism"
-}, jn = ({ text: t, children: r }) => {
-  const [i, s] = D(!1), o = N(null), [d, g] = D({ top: 0, left: 0 });
+}, Nn = ({ text: t, children: r }) => {
+  const [i, l] = D(!1), a = N(null), [d, g] = D({ top: 0, left: 0 });
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: o,
+      ref: a,
       style: { position: "relative", display: "inline-flex" },
       onMouseEnter: () => {
-        if (o.current) {
-          const y = o.current.getBoundingClientRect();
+        if (a.current) {
+          const y = a.current.getBoundingClientRect();
           g({
             top: y.top - 8,
             left: y.left + y.width / 2
           });
         }
-        s(!0);
+        l(!0);
       },
-      onMouseLeave: () => s(!1),
+      onMouseLeave: () => l(!1),
       children: [
         r,
         i && /* @__PURE__ */ e("div", { style: {
@@ -1149,7 +1151,7 @@ const En = {
       ]
     }
   );
-}, Nn = ({ label: t, value: r = 0, maxValue: i = 5 }) => /* @__PURE__ */ n("div", { style: {
+}, On = ({ label: t, value: r = 0, maxValue: i = 5 }) => /* @__PURE__ */ n("div", { style: {
   display: "flex",
   flexDirection: "column",
   gap: 8,
@@ -1168,15 +1170,15 @@ const En = {
       fontFamily: "var(--font-sans)",
       lineHeight: "normal"
     }, children: t }),
-    /* @__PURE__ */ e(jn, { text: Bn[t] || t, children: /* @__PURE__ */ e(Ct, { size: 14, color: Y.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
+    /* @__PURE__ */ e(Nn, { text: jn[t] || t, children: /* @__PURE__ */ e(Ft, { size: 14, color: Y.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
   ] }),
-  /* @__PURE__ */ e(Ln, { value: r, maxValue: i })
-] }), On = ({
+  /* @__PURE__ */ e(Bn, { value: r, maxValue: i })
+] }), $n = ({
   score: t = 4,
   minScore: r = 0,
   maxScore: i = 5,
-  predictedScore: s = 4,
-  predictedLabel: o = "Predicted Objective",
+  predictedScore: l = 4,
+  predictedLabel: a = "Predicted Objective",
   description: d = "",
   legends: g = [
     { label: "CSAT", value: 3 },
@@ -1234,9 +1236,9 @@ const En = {
         alignItems: "center",
         display: "flex"
       }, children: [
-        /* @__PURE__ */ e(An, { score: t, minScore: r, maxScore: i }),
+        /* @__PURE__ */ e(Ln, { score: t, minScore: r, maxScore: i }),
         (() => {
-          const a = -(180 - (i > r ? (y - r) / (i - r) : 0) * 180 - 45);
+          const s = -(180 - (i > r ? (y - r) / (i - r) : 0) * 180 - 45);
           return /* @__PURE__ */ n(
             "svg",
             {
@@ -1247,7 +1249,7 @@ const En = {
               xmlns: "http://www.w3.org/2000/svg",
               style: {
                 marginTop: -24,
-                transform: `rotate(${a}deg)`,
+                transform: `rotate(${s}deg)`,
                 transformOrigin: "center center"
               },
               children: [
@@ -1298,7 +1300,7 @@ const En = {
           background: Y.absent
         } }),
         g.map((x, I) => /* @__PURE__ */ e(
-          Nn,
+          On,
           {
             label: x.label,
             value: x.value
@@ -1308,13 +1310,13 @@ const En = {
       ] })
     ] })
   ] });
-}, Ft = (t) => {
+}, Wt = (t) => {
   if (!t)
     return null;
   const i = String(t).trim().toLowerCase().split(/[^a-z]+/).filter(Boolean);
   return i.includes("supervisor") ? "var(--rail-compliance, #C98A5A)" : i.includes("admin") || i.includes("administrator") || i.includes("superadmin") ? "var(--rail-discovery, #5E88B0)" : i.includes("agent") ? "var(--rail-outcome, #6B7C93)" : null;
-}, $n = (t) => {
-  var s, o, d, g, p, y;
+}, Pn = (t) => {
+  var l, a, d, g, p, y;
   if (!t)
     return null;
   const r = t.role ?? t.userRole ?? t.user_role ?? t.author_role ?? t.roleName ?? t.role_name ?? t.userType ?? t.user_type ?? t.type;
@@ -1324,26 +1326,26 @@ const En = {
     return r.join(" ");
   if (r && typeof r == "object")
     return r.name || r.value || r.label || null;
-  const i = ((s = t.user) == null ? void 0 : s.role) ?? ((o = t.user) == null ? void 0 : o.userRole) ?? ((d = t.user) == null ? void 0 : d.user_role) ?? ((g = t.profile) == null ? void 0 : g.role) ?? ((p = t.profile) == null ? void 0 : p.userRole) ?? ((y = t.profile) == null ? void 0 : y.user_role);
+  const i = ((l = t.user) == null ? void 0 : l.role) ?? ((a = t.user) == null ? void 0 : a.userRole) ?? ((d = t.user) == null ? void 0 : d.user_role) ?? ((g = t.profile) == null ? void 0 : g.role) ?? ((p = t.profile) == null ? void 0 : p.userRole) ?? ((y = t.profile) == null ? void 0 : y.user_role);
   return typeof i == "string" ? i : Array.isArray(i) ? i.join(" ") : i && typeof i == "object" && (i.name || i.value || i.label) || null;
-}, Wt = (t) => {
+}, It = (t) => {
   if (!t)
     return "#6B7C93";
-  const r = $n(t);
-  return Ft(r) || t.color || "#6B7C93";
-}, Ce = (t) => (t || "").split(" ").map((r) => r[0]).join("").toUpperCase() || "U", Pn = (t) => {
+  const r = Pn(t);
+  return Wt(r) || t.color || "#6B7C93";
+}, Ce = (t) => (t || "").split(" ").map((r) => r[0]).join("").toUpperCase() || "U", Yn = (t) => {
   if (!t || t === "Just now")
     return !0;
   if (/^\d{4}-\d{2}-\d{2}T/.test(t))
     try {
-      const i = /Z$|[+-]\d{2}:\d{2}$/.test(t) ? t : t + "Z", s = new Date(i);
-      return Number.isNaN(s.getTime()) ? !1 : Date.now() - s.getTime() < 15 * 60 * 1e3;
+      const i = /Z$|[+-]\d{2}:\d{2}$/.test(t) ? t : t + "Z", l = new Date(i);
+      return Number.isNaN(l.getTime()) ? !1 : Date.now() - l.getTime() < 15 * 60 * 1e3;
     } catch {
       return !1;
     }
   const r = t.match(/^(\d+)\s*min/);
   return r ? parseInt(r[1], 10) < 15 : !(/\d+\s*h/.test(t) || /\d+\s*day/.test(t));
-}, Yn = (t) => {
+}, Kn = (t) => {
   if (!t)
     return "";
   if (!/^\d{4}-\d{2}-\d{2}T/.test(t))
@@ -1352,7 +1354,7 @@ const En = {
     const r = /Z$|[+-]\d{2}:\d{2}$/.test(t) ? t : t + "Z", i = new Date(r);
     if (Number.isNaN(i.getTime()))
       return t;
-    const o = (/* @__PURE__ */ new Date()).getTime() - i.getTime(), d = Math.floor(o / 6e4), g = Math.floor(o / 36e5);
+    const a = (/* @__PURE__ */ new Date()).getTime() - i.getTime(), d = Math.floor(a / 6e4), g = Math.floor(a / 36e5);
     if (d < 1)
       return "Just now";
     if (d < 60)
@@ -1364,14 +1366,14 @@ const En = {
   } catch {
     return t;
   }
-}, It = ({ name: t, initials: r, color: i, avatar: s, size: o = 36 }) => s ? /* @__PURE__ */ e(
+}, Dt = ({ name: t, initials: r, color: i, avatar: l, size: a = 36 }) => l ? /* @__PURE__ */ e(
   "img",
   {
-    src: s,
+    src: l,
     alt: t,
     style: {
-      width: o,
-      height: o,
+      width: a,
+      height: a,
       borderRadius: "50%",
       objectFit: "cover",
       flexShrink: 0
@@ -1381,15 +1383,15 @@ const En = {
   "div",
   {
     style: {
-      width: o,
-      height: o,
+      width: a,
+      height: a,
       borderRadius: "50%",
       background: i || "#6B7C93",
       color: "#FFF",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      fontSize: o <= 32 ? "10px" : "11px",
+      fontSize: a <= 32 ? "10px" : "11px",
       fontWeight: 650,
       flexShrink: 0,
       fontFamily: "var(--default-font-family)",
@@ -1398,40 +1400,40 @@ const En = {
     title: t,
     children: r || Ce(t)
   }
-), Kn = ({
+), Vn = ({
   comment: t,
   isReply: r = !1,
   isConsecutive: i = !1,
-  onReply: s,
-  onSendReply: o,
+  onReply: l,
+  onSendReply: a,
   onEdit: d,
   onDelete: g,
   onMenuClick: p,
   showReply: y = !0
 }) => {
-  var $, U;
-  const [W, x] = D(!1), [I, a] = D(!1), [b, w] = D(!1), [C, z] = D(""), [T, S] = D(!1), [F, E] = D(""), [L, _] = D(!1), O = N(null), u = N(null), m = N(null), c = t.author || {}, B = c.name || t.author_name || "Unknown", J = c.initials || Ce(B), ie = c.role || t.author_role, R = c.color || Ft(ie) || "#6B7C93", X = c.avatar || t.avatar, ee = t.timestamp || t.created_at, ae = Yn(ee), q = Pn(ee), fe = !!(t.isEdited || t.is_edited || t.edited), h = Array.isArray(t.content) ? t.content : [t.content || t.text || ""];
+  var h, $;
+  const [W, x] = D(!1), [I, s] = D(!1), [b, w] = D(!1), [C, z] = D(""), [T, S] = D(!1), [F, H] = D(""), [L, R] = D(!1), O = N(null), u = N(null), m = N(null), c = t.author || {}, B = c.name || t.author_name || "Unknown", J = c.initials || Ce(B), X = c.role || t.author_role, U = c.color || Wt(X) || "#6B7C93", _ = c.avatar || t.avatar, ne = t.timestamp || t.created_at, ie = Kn(ne), Z = Yn(ne), ae = !!(t.isEdited || t.is_edited || t.edited), fe = Array.isArray(t.content) ? t.content : [t.content || t.text || ""];
   return ce.useEffect(() => {
     if (!I)
       return;
-    const l = (Z) => {
-      O.current && !O.current.contains(Z.target) && a(!1);
+    const o = (Q) => {
+      O.current && !O.current.contains(Q.target) && s(!1);
     };
-    return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
   }, [I]), ce.useEffect(() => {
-    const l = u.current;
-    if (!l)
+    const o = u.current;
+    if (!o)
       return;
-    l.style.height = "auto";
-    const Z = 140;
-    l.style.height = Math.min(l.scrollHeight, Z) + "px", l.style.overflowY = l.scrollHeight > Z ? "auto" : "hidden";
+    o.style.height = "auto";
+    const Q = 140;
+    o.style.height = Math.min(o.scrollHeight, Q) + "px", o.style.overflowY = o.scrollHeight > Q ? "auto" : "hidden";
   }, [C, b]), ce.useEffect(() => {
-    const l = m.current;
-    if (!l)
+    const o = m.current;
+    if (!o)
       return;
-    l.style.height = "auto";
-    const Z = 140;
-    l.style.height = Math.min(l.scrollHeight, Z) + "px", l.style.overflowY = l.scrollHeight > Z ? "auto" : "hidden";
+    o.style.height = "auto";
+    const Q = 140;
+    o.style.height = Math.min(o.scrollHeight, Q) + "px", o.style.overflowY = o.scrollHeight > Q ? "auto" : "hidden";
   }, [F, T]), /* @__PURE__ */ n(
     "div",
     {
@@ -1447,12 +1449,12 @@ const En = {
       },
       children: [
         i ? /* @__PURE__ */ e("div", { style: { width: 36, flexShrink: 0 } }) : /* @__PURE__ */ e(
-          It,
+          Dt,
           {
             name: B,
             initials: J,
-            color: R,
-            avatar: X
+            color: U,
+            avatar: _
           }
         ),
         /* @__PURE__ */ n("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -1490,10 +1492,10 @@ const En = {
                         lineHeight: "150%",
                         fontFamily: "var(--default-font-family)"
                       },
-                      children: ae
+                      children: ie
                     }
                   ),
-                  fe && /* @__PURE__ */ e(
+                  ae && /* @__PURE__ */ e(
                     "span",
                     {
                       style: {
@@ -1512,7 +1514,7 @@ const En = {
                     "button",
                     {
                       type: "button",
-                      onClick: () => a((l) => !l),
+                      onClick: () => s((o) => !o),
                       style: {
                         padding: 2,
                         border: "none",
@@ -1526,7 +1528,7 @@ const En = {
                         transition: "opacity 0.15s",
                         flexShrink: 0
                       },
-                      children: /* @__PURE__ */ e(mn, { size: 24, color: "var(--Grey-Muted, #808183)" })
+                      children: /* @__PURE__ */ e(vn, { size: 24, color: "var(--Grey-Muted, #808183)" })
                     }
                   ),
                   I && /* @__PURE__ */ n(
@@ -1549,12 +1551,12 @@ const En = {
                         overflow: "hidden"
                       },
                       children: [
-                        s && /* @__PURE__ */ e(
+                        l && /* @__PURE__ */ e(
                           "button",
                           {
                             type: "button",
                             onClick: () => {
-                              a(!1), S(!1), w(!0);
+                              s(!1), S(!1), w(!0);
                             },
                             style: {
                               display: "flex",
@@ -1571,11 +1573,11 @@ const En = {
                               lineHeight: "150%",
                               textAlign: "left"
                             },
-                            onMouseEnter: (l) => {
-                              l.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
+                            onMouseEnter: (o) => {
+                              o.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
                             },
-                            onMouseLeave: (l) => {
-                              l.currentTarget.style.background = "transparent";
+                            onMouseLeave: (o) => {
+                              o.currentTarget.style.background = "transparent";
                             },
                             children: "Reply"
                           }
@@ -1584,14 +1586,14 @@ const En = {
                           "button",
                           {
                             type: "button",
-                            disabled: !q,
+                            disabled: !Z,
                             onClick: () => {
-                              if (!q)
+                              if (!Z)
                                 return;
-                              a(!1);
-                              const l = Array.isArray(t.content) ? t.content.join(`
+                              s(!1);
+                              const o = Array.isArray(t.content) ? t.content.join(`
 `) : t.content || t.text || "";
-                              E(l), S(!0), w(!1);
+                              H(o), S(!0), w(!1);
                             },
                             style: {
                               display: "flex",
@@ -1600,20 +1602,20 @@ const En = {
                               alignItems: "center",
                               border: "none",
                               background: "transparent",
-                              cursor: q ? "pointer" : "not-allowed",
+                              cursor: Z ? "pointer" : "not-allowed",
                               fontSize: 13,
                               fontWeight: 400,
-                              color: q ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
+                              color: Z ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
                               fontFamily: "var(--default-font-family)",
                               lineHeight: "150%",
                               textAlign: "left",
-                              opacity: q ? 1 : 0.5
+                              opacity: Z ? 1 : 0.5
                             },
-                            onMouseEnter: (l) => {
-                              q && (l.currentTarget.style.background = "var(--surface-hover, #F3F7F7)");
+                            onMouseEnter: (o) => {
+                              Z && (o.currentTarget.style.background = "var(--surface-hover, #F3F7F7)");
                             },
-                            onMouseLeave: (l) => {
-                              l.currentTarget.style.background = "transparent";
+                            onMouseLeave: (o) => {
+                              o.currentTarget.style.background = "transparent";
                             },
                             children: "Edit"
                           }
@@ -1623,7 +1625,7 @@ const En = {
                           {
                             type: "button",
                             onClick: () => {
-                              a(!1), _(!0);
+                              s(!1), R(!0);
                             },
                             style: {
                               display: "flex",
@@ -1640,11 +1642,11 @@ const En = {
                               lineHeight: "150%",
                               textAlign: "left"
                             },
-                            onMouseEnter: (l) => {
-                              l.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
+                            onMouseEnter: (o) => {
+                              o.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
                             },
-                            onMouseLeave: (l) => {
-                              l.currentTarget.style.background = "transparent";
+                            onMouseLeave: (o) => {
+                              o.currentTarget.style.background = "transparent";
                             },
                             children: "Delete"
                           }
@@ -1698,7 +1700,7 @@ const En = {
                           children: [
                             "“",
                             " ",
-                            (($ = t.author) == null ? void 0 : $.name) || "Unknown"
+                            ((h = t.author) == null ? void 0 : h.name) || "Unknown"
                           ]
                         }
                       ),
@@ -1716,7 +1718,7 @@ const En = {
                             cursor: "pointer",
                             padding: 0
                           },
-                          children: /* @__PURE__ */ e(lt, { size: 20, color: "var(--Grey-Muted, #808183)" })
+                          children: /* @__PURE__ */ e(ot, { size: 20, color: "var(--Grey-Muted, #808183)" })
                         }
                       )
                     ]
@@ -1737,14 +1739,14 @@ const En = {
                         {
                           ref: m,
                           value: F,
-                          onChange: (l) => E(l.target.value),
-                          onKeyDown: (l) => {
-                            if (l.key === "Enter") {
-                              if (l.metaKey || l.ctrlKey || l.shiftKey)
+                          onChange: (o) => H(o.target.value),
+                          onKeyDown: (o) => {
+                            if (o.key === "Enter") {
+                              if (o.metaKey || o.ctrlKey || o.shiftKey)
                                 return;
-                              l.preventDefault(), F.trim() && (d == null || d({ ...t, content: F.trim(), isEdited: !0 }), S(!1));
+                              o.preventDefault(), F.trim() && (d == null || d({ ...t, content: F.trim(), isEdited: !0 }), S(!1));
                             }
-                            l.key === "Escape" && S(!1);
+                            o.key === "Escape" && S(!1);
                           },
                           autoFocus: !0,
                           rows: 1,
@@ -1802,7 +1804,7 @@ const En = {
             }
           ) : (
             /* Message bubbles — stacked, gap: 4px, fit content */
-            /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start" }, children: h.map((l, Z) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start" }, children: fe.map((o, Q) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -1817,9 +1819,9 @@ const En = {
                   wordBreak: "break-word",
                   whiteSpace: "pre-wrap"
                 },
-                children: l
+                children: o
               },
-              Z
+              Q
             )) })
           ),
           L && /* @__PURE__ */ n(
@@ -1840,7 +1842,7 @@ const En = {
                   {
                     type: "button",
                     onClick: () => {
-                      _(!1), g == null || g(t);
+                      R(!1), g == null || g(t);
                     },
                     style: {
                       background: "var(--grey-light, #e9e8e8a1)",
@@ -1854,11 +1856,11 @@ const En = {
                       borderRadius: 6,
                       transition: "background 0.15s"
                     },
-                    onMouseEnter: (l) => {
-                      l.currentTarget.style.background = "var(--Grey-absent, #D9D9D9)";
+                    onMouseEnter: (o) => {
+                      o.currentTarget.style.background = "var(--Grey-absent, #D9D9D9)";
                     },
-                    onMouseLeave: (l) => {
-                      l.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
+                    onMouseLeave: (o) => {
+                      o.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
                     },
                     children: "Delete"
                   }
@@ -1867,7 +1869,7 @@ const En = {
                   "button",
                   {
                     type: "button",
-                    onClick: () => _(!1),
+                    onClick: () => R(!1),
                     style: {
                       background: "none",
                       border: "none",
@@ -1880,11 +1882,11 @@ const En = {
                       borderRadius: 6,
                       transition: "background 0.15s"
                     },
-                    onMouseEnter: (l) => {
-                      l.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
+                    onMouseEnter: (o) => {
+                      o.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
                     },
-                    onMouseLeave: (l) => {
-                      l.currentTarget.style.background = "none";
+                    onMouseLeave: (o) => {
+                      o.currentTarget.style.background = "none";
                     },
                     children: "Cancel"
                   }
@@ -1892,7 +1894,7 @@ const En = {
               ]
             }
           ),
-          y && s && !b && !L && /* @__PURE__ */ n(
+          y && l && !b && !L && /* @__PURE__ */ n(
             "button",
             {
               type: "button",
@@ -1915,7 +1917,7 @@ const En = {
                 transition: "color 0.15s"
               },
               children: [
-                /* @__PURE__ */ e(vn, { size: 20, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                /* @__PURE__ */ e(xn, { size: 20, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                 "Reply"
               ]
             }
@@ -1963,7 +1965,7 @@ const En = {
                             children: [
                               "“",
                               " ",
-                              ((U = t.author) == null ? void 0 : U.name) || "Unknown"
+                              (($ = t.author) == null ? void 0 : $.name) || "Unknown"
                             ]
                           }
                         ),
@@ -1983,7 +1985,7 @@ const En = {
                               cursor: "pointer",
                               padding: 0
                             },
-                            children: /* @__PURE__ */ e(lt, { size: 20, color: "var(--Grey-Muted, #808183)" })
+                            children: /* @__PURE__ */ e(ot, { size: 20, color: "var(--Grey-Muted, #808183)" })
                           }
                         )
                       ]
@@ -2037,14 +2039,14 @@ const En = {
                         {
                           ref: u,
                           value: C,
-                          onChange: (l) => z(l.target.value),
-                          onKeyDown: (l) => {
-                            if (l.key === "Enter") {
-                              if (l.metaKey || l.ctrlKey || l.shiftKey)
+                          onChange: (o) => z(o.target.value),
+                          onKeyDown: (o) => {
+                            if (o.key === "Enter") {
+                              if (o.metaKey || o.ctrlKey || o.shiftKey)
                                 return;
-                              l.preventDefault(), C.trim() && (o == null || o({ content: C.trim(), parentId: t.id }), z(""), w(!1));
+                              o.preventDefault(), C.trim() && (a == null || a({ content: C.trim(), parentId: t.id }), z(""), w(!1));
                             }
-                            l.key === "Escape" && (z(""), w(!1));
+                            o.key === "Escape" && (z(""), w(!1));
                           },
                           autoFocus: !0,
                           placeholder: "Add a reply",
@@ -2073,7 +2075,7 @@ const En = {
                         {
                           type: "button",
                           onClick: () => {
-                            C.trim() && (o == null || o({ content: C.trim(), parentId: t.id }), z(""), w(!1));
+                            C.trim() && (a == null || a({ content: C.trim(), parentId: t.id }), z(""), w(!1));
                           },
                           disabled: !C.trim(),
                           style: {
@@ -2106,29 +2108,29 @@ const En = {
       ]
     }
   );
-}, Vn = ({ currentUser: t, onSubmit: r }) => {
-  const [i, s] = D(""), [o, d] = D(!1), g = N(null);
-  _e(() => {
-    const a = g.current;
-    if (!a)
+}, qn = ({ currentUser: t, onSubmit: r }) => {
+  const [i, l] = D(""), [a, d] = D(!1), g = N(null);
+  Ae(() => {
+    const s = g.current;
+    if (!s)
       return;
-    a.style.height = "auto";
+    s.style.height = "auto";
     const b = 140;
-    a.style.height = Math.min(a.scrollHeight, b) + "px", a.style.overflowY = a.scrollHeight > b ? "auto" : "hidden";
+    s.style.height = Math.min(s.scrollHeight, b) + "px", s.style.overflowY = s.scrollHeight > b ? "auto" : "hidden";
   }, [i]);
   const p = () => {
-    const a = i.trim();
-    a && (r == null || r(a), s(""));
-  }, y = (a) => {
-    if (a.key === "Enter") {
-      if (a.metaKey || a.ctrlKey || a.shiftKey)
+    const s = i.trim();
+    s && (r == null || r(s), l(""));
+  }, y = (s) => {
+    if (s.key === "Enter") {
+      if (s.metaKey || s.ctrlKey || s.shiftKey)
         return;
-      a.preventDefault(), p();
+      s.preventDefault(), p();
     }
-  }, W = (t == null ? void 0 : t.initials) || Ce(t == null ? void 0 : t.name), x = Wt(t), I = t == null ? void 0 : t.avatar;
+  }, W = (t == null ? void 0 : t.initials) || Ce(t == null ? void 0 : t.name), x = It(t), I = t == null ? void 0 : t.avatar;
   return /* @__PURE__ */ n("div", { style: { display: "flex", gap: 16, alignItems: "flex-start" }, children: [
     /* @__PURE__ */ e(
-      It,
+      Dt,
       {
         name: t == null ? void 0 : t.name,
         initials: W,
@@ -2148,7 +2150,7 @@ const En = {
           alignItems: "flex-start",
           gap: 24,
           borderRadius: 8,
-          border: o ? "1px solid var(--Grey-Strong, #2E3236)" : "1px solid var(--Grey-absent, #D9D9D9)",
+          border: a ? "1px solid var(--Grey-Strong, #2E3236)" : "1px solid var(--Grey-absent, #D9D9D9)",
           background: "var(--Grey-White, #FFF)",
           transition: "border-color 0.15s"
         },
@@ -2167,7 +2169,7 @@ const En = {
                 {
                   ref: g,
                   value: i,
-                  onChange: (a) => s(a.target.value),
+                  onChange: (s) => l(s.target.value),
                   onFocus: () => d(!0),
                   onBlur: () => d(!1),
                   onKeyDown: y,
@@ -2223,17 +2225,17 @@ const En = {
       }
     )
   ] });
-}, Dt = ({ comment: t, depth: r = 0, isConsecutive: i = !1, onReply: s, onSendReply: o, onEdit: d, onDelete: g, onMenuClick: p }) => {
+}, zt = ({ comment: t, depth: r = 0, isConsecutive: i = !1, onReply: l, onSendReply: a, onEdit: d, onDelete: g, onMenuClick: p }) => {
   const y = t.replies && t.replies.length > 0, W = !y;
   return /* @__PURE__ */ n(ce.Fragment, { children: [
     /* @__PURE__ */ e("div", { style: { paddingLeft: r > 0 ? Math.min(r * 32, 128) : 0 }, children: /* @__PURE__ */ e(
-      Kn,
+      Vn,
       {
         comment: t,
         isReply: r > 0,
         isConsecutive: i,
-        onReply: s,
-        onSendReply: o,
+        onReply: l,
+        onSendReply: a,
         onEdit: d,
         onDelete: g,
         onMenuClick: p,
@@ -2241,12 +2243,12 @@ const En = {
       }
     ) }),
     y && t.replies.map((x) => /* @__PURE__ */ e(
-      Dt,
+      zt,
       {
         comment: x,
         depth: r + 1,
-        onReply: s,
-        onSendReply: o,
+        onReply: l,
+        onSendReply: a,
         onEdit: d,
         onDelete: g,
         onMenuClick: p
@@ -2254,12 +2256,12 @@ const En = {
       x.id
     ))
   ] });
-}, qn = ({
+}, Zn = ({
   comments: t = [],
   totalComments: r,
   children: i,
-  onSendComment: s,
-  onReply: o,
+  onSendComment: l,
+  onReply: a,
   onSendReply: d,
   onEdit: g,
   onDelete: p,
@@ -2268,18 +2270,18 @@ const En = {
   currentUser: x,
   isResolved: I = !1
 }) => {
-  const [a, b] = D([]), [w, C] = D(!1), z = He(() => {
-    const u = new Set(t.map((c) => c.id)), m = a.filter((c) => !u.has(c.id));
+  const [s, b] = D([]), [w, C] = D(!1), z = Te(() => {
+    const u = new Set(t.map((c) => c.id)), m = s.filter((c) => !u.has(c.id));
     return [...t, ...m];
-  }, [t, a]);
+  }, [t, s]);
   ce.useEffect(() => {
     const u = new Set(t.map((m) => m.id));
     b((m) => m.filter((c) => !u.has(c.id)));
   }, [t]);
-  const T = He(() => {
+  const T = Te(() => {
     if (!x)
       return { name: "You", initials: "YO", color: "#6B7C93" };
-    const u = x.name || "You", m = x.initials || Ce(u), c = Wt(x);
+    const u = x.name || "You", m = x.initials || Ce(u), c = It(x);
     return { ...x, name: u, initials: m, color: c };
   }, [x]), S = async ({ content: u, parentId: m }) => {
     if (d) {
@@ -2301,10 +2303,10 @@ const En = {
       b((B) => [...B, c]);
     }
   }, F = async (u) => {
-    if (s) {
+    if (l) {
       C(!0);
       try {
-        await s(u);
+        await l(u);
       } finally {
         C(!1);
       }
@@ -2318,13 +2320,13 @@ const En = {
       };
       b((c) => [...c, m]);
     }
-  }, E = (u) => {
+  }, H = (u) => {
     b(
       (m) => m.map((c) => c.id === u.id ? { ...c, content: u.content, isEdited: !0 } : c)
     ), g == null || g(u);
   }, L = (u) => {
     b((m) => m.filter((c) => c.id !== u.id)), p == null || p(u);
-  }, _ = He(() => {
+  }, R = Te(() => {
     const u = {};
     z.forEach((c) => {
       c.parentId && (u[c.parentId] || (u[c.parentId] = []), u[c.parentId].push(c));
@@ -2458,7 +2460,7 @@ const En = {
                             flexShrink: 0
                           },
                           children: [
-                            /* @__PURE__ */ e(un, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 2 }),
+                            /* @__PURE__ */ e(yn, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 2 }),
                             /* @__PURE__ */ e(
                               "span",
                               {
@@ -2497,7 +2499,7 @@ const En = {
                             flexShrink: 0
                           },
                           children: [
-                            /* @__PURE__ */ e(yn, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
+                            /* @__PURE__ */ e(mn, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
                             "Mark as Resolved"
                           ]
                         }
@@ -2516,18 +2518,18 @@ const En = {
                       maxHeight: 600,
                       overflowY: z.length > 6 ? "auto" : "visible"
                     },
-                    children: _.map((u, m) => {
-                      var R, X;
-                      const c = m > 0 ? _[m - 1] : null, B = ((R = c == null ? void 0 : c.author) == null ? void 0 : R.name) || (c == null ? void 0 : c.author_name), J = ((X = u.author) == null ? void 0 : X.name) || u.author_name, ie = c && B === J && (!c.replies || c.replies.length === 0);
+                    children: R.map((u, m) => {
+                      var U, _;
+                      const c = m > 0 ? R[m - 1] : null, B = ((U = c == null ? void 0 : c.author) == null ? void 0 : U.name) || (c == null ? void 0 : c.author_name), J = ((_ = u.author) == null ? void 0 : _.name) || u.author_name, X = c && B === J && (!c.replies || c.replies.length === 0);
                       return /* @__PURE__ */ e(
-                        Dt,
+                        zt,
                         {
                           comment: u,
                           depth: 0,
-                          isConsecutive: !!ie,
-                          onReply: o,
+                          isConsecutive: !!X,
+                          onReply: a,
                           onSendReply: S,
-                          onEdit: E,
+                          onEdit: H,
                           onDelete: L,
                           onMenuClick: y
                         },
@@ -2547,7 +2549,7 @@ const En = {
                       marginLeft: 48
                     },
                     children: [
-                      /* @__PURE__ */ e(Ct, { size: 16, color: "var(--Grey-Muted, #808183)" }),
+                      /* @__PURE__ */ e(Ft, { size: 16, color: "var(--Grey-Muted, #808183)" }),
                       /* @__PURE__ */ e(
                         "span",
                         {
@@ -2602,7 +2604,7 @@ const En = {
                     ]
                   }
                 ),
-                /* @__PURE__ */ e(Vn, { currentUser: T, onSubmit: F })
+                /* @__PURE__ */ e(qn, { currentUser: T, onSubmit: F })
               ] }),
               /* @__PURE__ */ e(
                 "div",
@@ -2620,12 +2622,12 @@ const En = {
       ]
     }
   );
-}, ut = ({ children: t, size: r = 28, onClick: i, title: s }) => {
-  const [o, d] = D(!1);
+}, yt = ({ children: t, size: r = 28, onClick: i, title: l }) => {
+  const [a, d] = D(!1);
   return /* @__PURE__ */ e(
     "div",
     {
-      title: s,
+      title: l,
       onClick: i,
       onMouseEnter: () => d(!0),
       onMouseLeave: () => d(!1),
@@ -2636,7 +2638,7 @@ const En = {
         width: r,
         height: r,
         borderRadius: 9999,
-        background: o ? "var(--surface-hover, #F3F7F7)" : "transparent",
+        background: a ? "var(--surface-hover, #F3F7F7)" : "transparent",
         cursor: "pointer",
         flexShrink: 0,
         transition: "background 0.15s"
@@ -2644,15 +2646,15 @@ const En = {
       children: t
     }
   );
-}, Zn = (t) => {
+}, Qn = (t) => {
   const r = Math.floor(t / 6e4), i = Math.floor(t % 6e4 / 1e3);
   return `${r.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`;
-}, Qn = ({ item: t, isLast: r, onPlayEvidence: i, onShowInTranscript: s, timelinePlaying: o, currentTimeSeconds: d }) => {
-  var a;
-  const g = (a = t.signal_refs) == null ? void 0 : a.map((b) => {
+}, Jn = ({ item: t, isLast: r, onPlayEvidence: i, onShowInTranscript: l, timelinePlaying: a, currentTimeSeconds: d }) => {
+  var s;
+  const g = (s = t.signal_refs) == null ? void 0 : s.map((b) => {
     const w = b.display_name || b.signal_key || "", C = b.confidence != null ? ` (${Math.round(b.confidence * 100)}%)` : "";
     return w + C;
-  }).join(", "), p = t.start_ms ?? t.startMs, y = t.end_ms ?? t.endMs, W = p != null, x = (d ?? 0) * 1e3, I = o && W && x >= p && x <= (y ?? p + 5e3);
+  }).join(", "), p = t.start_ms ?? t.startMs, y = t.end_ms ?? t.endMs, W = p != null, x = (d ?? 0) * 1e3, I = a && W && x >= p && x <= (y ?? p + 5e3);
   return /* @__PURE__ */ n(
     "div",
     {
@@ -2712,7 +2714,7 @@ const En = {
                   },
                   children: [
                     /* @__PURE__ */ e(
-                      ut,
+                      yt,
                       {
                         size: 28,
                         title: I ? "Pause" : "Play evidence",
@@ -2721,14 +2723,14 @@ const En = {
                           end_ms: y
                         }),
                         children: I ? /* @__PURE__ */ e(
-                          kt,
+                          wt,
                           {
                             size: 17,
                             color: "var(--Grey-Strong, #2E3236)",
                             strokeWidth: 1
                           }
                         ) : /* @__PURE__ */ e(
-                          wt,
+                          Ct,
                           {
                             size: 17,
                             color: "var(--Grey-Muted, #808183)",
@@ -2738,12 +2740,12 @@ const En = {
                       }
                     ),
                     /* @__PURE__ */ e(
-                      ut,
+                      yt,
                       {
                         size: 28,
                         title: "Show in transcript",
-                        onClick: () => s == null ? void 0 : s(p),
-                        children: /* @__PURE__ */ e(St, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                        onClick: () => l == null ? void 0 : l(p),
+                        children: /* @__PURE__ */ e(kt, { size: 16, color: "#808183", strokeWidth: 1.5 })
                       }
                     ),
                     /* @__PURE__ */ e(
@@ -2756,7 +2758,7 @@ const En = {
                           lineHeight: 1.2,
                           whiteSpace: "nowrap"
                         },
-                        children: Zn(p)
+                        children: Qn(p)
                       }
                     )
                   ]
@@ -2768,12 +2770,12 @@ const En = {
       ]
     }
   );
-}, Jn = ({
+}, Xn = ({
   items: t = [],
   guidanceCount: r,
   loading: i = !1,
-  onPlayEvidence: s,
-  onShowInTranscript: o,
+  onPlayEvidence: l,
+  onShowInTranscript: a,
   timelinePlaying: d = !1,
   currentTimeSeconds: g = 0
 }) => {
@@ -2813,7 +2815,7 @@ const En = {
                     flexShrink: 0
                   },
                   children: /* @__PURE__ */ e(
-                    yt,
+                    mt,
                     {
                       style: { width: 20, height: 20, flexShrink: 0 },
                       color: "var(--Grey-Strong, #2E3236)",
@@ -2855,12 +2857,12 @@ const En = {
           }
         ),
         t.map((y, W) => /* @__PURE__ */ e(
-          Qn,
+          Jn,
           {
             item: y,
             isLast: W === t.length - 1,
-            onPlayEvidence: s,
-            onShowInTranscript: o,
+            onPlayEvidence: l,
+            onShowInTranscript: a,
             timelinePlaying: d,
             currentTimeSeconds: g
           },
@@ -2869,24 +2871,24 @@ const En = {
       ]
     }
   );
-}, oe = ({ text: t, children: r }) => {
-  const [i, s] = D(!1), o = N(null), [d, g] = D({ top: 0, left: 0 });
+}, le = ({ text: t, children: r }) => {
+  const [i, l] = D(!1), a = N(null), [d, g] = D({ top: 0, left: 0 });
   return t ? /* @__PURE__ */ n(
     "div",
     {
-      ref: o,
+      ref: a,
       style: { position: "relative", display: "inline-flex" },
       onMouseEnter: () => {
-        if (o.current) {
-          const y = o.current.getBoundingClientRect();
+        if (a.current) {
+          const y = a.current.getBoundingClientRect();
           g({
             top: y.bottom + 6,
             left: y.left + y.width / 2
           });
         }
-        s(!0);
+        l(!0);
       },
-      onMouseLeave: () => s(!1),
+      onMouseLeave: () => l(!1),
       children: [
         r,
         i && /* @__PURE__ */ e("div", { style: {
@@ -2912,18 +2914,26 @@ const En = {
       ]
     }
   ) : r;
-}, Xn = [
+}, Un = [
   { key: "overview", label: "Overview" },
   { key: "coaching", label: "Coaching Summary" },
   { key: "signals", label: "Signals & Recording" },
   { key: "comments", label: "Feedback" }
-], oi = ({
+];
+function ei(t, r) {
+  const i = (t == null ? void 0 : t.direction) ?? (t == null ? void 0 : t.interaction_direction) ?? (t == null ? void 0 : t.call_direction) ?? r;
+  if (i == null || i === "")
+    return null;
+  const l = String(i).toLowerCase().trim();
+  return l === "outbound" || l.startsWith("outbound") ? "outbound" : l === "inbound" || l.startsWith("inbound") ? "inbound" : null;
+}
+const si = ({
   title: t = "Wheel Stud Replacement Enquiry",
   onBack: r,
   // Data props — all optional with defaults for demo
   data: i,
-  coachingData: s,
-  coachingLoading: o = !1,
+  coachingData: l,
+  coachingLoading: a = !1,
   audioUrl: d,
   // Audio/playback props — pass these when the host app manages audio externally
   // (like InteractionDetailPanel does). If omitted, UpdatedInteractionRecording
@@ -2934,7 +2944,7 @@ const En = {
   playbackRate: W,
   timelineSegments: x,
   onSeek: I,
-  onTogglePlay: a,
+  onTogglePlay: s,
   onSeekBack: b,
   onSeekForward: w,
   onSetPlaybackRate: C,
@@ -2944,9 +2954,9 @@ const En = {
   customerName: S,
   customerFullName: F,
   // Transcript props — pass real transcript data from the host app
-  transcript: E,
+  transcript: H,
   activeTurnIndex: L,
-  turnObservations: _,
+  turnObservations: R,
   highlightedTurns: O,
   onTurnPlayPause: u,
   // Signal evidence playback — host app can provide to play audio segments from signals
@@ -2955,112 +2965,112 @@ const En = {
   // Context props — pass from host app to override block-derived defaults
   callPurpose: B,
   classification: J,
-  outcomeQuality: ie,
+  outcomeQuality: X,
   // Context "More Details" expandable section
-  resolutionOutcome: R,
-  customerIntent: X,
-  location: ee,
-  interactionId: ae,
-  moreDetails: q,
+  resolutionOutcome: U,
+  customerIntent: _,
+  location: ne,
+  interactionId: ie,
+  moreDetails: Z,
   // Compass score props
-  compassScore: fe,
+  compassScore: ae,
   // gauge meter value — compass_score, range 0.5-5
-  compassMaxScore: h = 5,
-  predictedCsat: $,
+  compassMaxScore: fe = 5,
+  predictedCsat: h,
   // predicted objective number (e.g. compass_score) — shown as "03" top-right
-  predictedLabel: U = "Predicted Objective",
-  compassLegends: l,
+  predictedLabel: $ = "Predicted Objective",
+  compassLegends: o,
   // Customer session history drawer
-  customerSessions: Z,
-  customerSessionCount: zt,
-  onSessionClick: Ae,
-  onViewAllSessions: Le,
+  customerSessions: Q,
+  customerSessionCount: Gt,
+  onSessionClick: Le,
+  onViewAllSessions: Be,
   // Footer navigation
-  prevSessionDesc: Be,
-  prevSessionDisabled: te = !1,
-  nextSessionDesc: je,
-  nextSessionDisabled: ne = !1,
+  prevSessionDesc: je,
+  prevSessionDisabled: ee = !1,
+  nextSessionDesc: Ne,
+  nextSessionDisabled: te = !1,
   onPreviousSession: ye,
   onNextSession: me,
   // Comments
-  comments: Ne = [],
-  guidance: Gt = [],
+  comments: Oe = [],
+  guidance: Mt = [],
   currentUser: j,
-  onSendComment: Mt,
-  onSendReply: Et,
-  onReply: Ht,
-  onEdit: Tt,
+  onSendComment: Et,
+  onSendReply: Ht,
+  onReply: Tt,
+  onEdit: _t,
   onEditInteraction: Rt,
-  onDelete: _t,
-  onMenuClick: At,
-  onMarkResolved: Lt,
-  commentsResolved: Bt
+  onDelete: At,
+  onMenuClick: Lt,
+  onMarkResolved: Bt,
+  commentsResolved: jt
 }) => {
   var nt;
-  const [Fe, ve] = D("overview"), [jt, Oe] = D(/* @__PURE__ */ new Set()), [Nt, xe] = D(!1), [Ot, $e] = D(null), [Pe, Ye] = D(!1), [Ke, $t] = D(0), [Ve, Pt] = D(!1), re = N(null), be = N(null), We = N(null), ge = N(null), Ie = N(null), Yt = { overview: be, coaching: We, signals: ge, comments: Ie }, he = N(null), De = N(!1);
-  _e(() => {
+  const [Fe, ve] = D("overview"), [Nt, $e] = D(/* @__PURE__ */ new Set()), [Ot, xe] = D(!1), [$t, Pe] = D(null), [Ye, Ke] = D(!1), [Ve, Pt] = D(0), [qe, Yt] = D(!1), re = N(null), be = N(null), We = N(null), ge = N(null), Ie = N(null), Kt = { overview: be, coaching: We, signals: ge, comments: Ie }, he = N(null), De = N(!1);
+  Ae(() => {
     const f = he.current;
     if (!f)
       return;
-    const G = ["overview", "coaching", "signals", "comments"], v = [be, We, ge, Ie], H = ((V) => {
-      let le = V.parentElement;
-      for (; le; ) {
-        const { overflow: we, overflowY: de } = window.getComputedStyle(le);
+    const G = ["overview", "coaching", "signals", "comments"], v = [be, We, ge, Ie], M = ((q) => {
+      let oe = q.parentElement;
+      for (; oe; ) {
+        const { overflow: we, overflowY: de } = window.getComputedStyle(oe);
         if (/(auto|scroll)/.test(we + de))
-          return le;
-        le = le.parentElement;
+          return oe;
+        oe = oe.parentElement;
       }
       return null;
-    })(f), Q = () => {
+    })(f), V = () => {
       var we;
       if (De.current)
         return;
-      let V = G[0];
+      let q = G[0];
       for (let de = v.length - 1; de >= 0; de--) {
         const it = v[de].current;
         if (!it)
           continue;
         if (it.getBoundingClientRect().top <= 150) {
-          V = G[de];
+          q = G[de];
           break;
         }
       }
-      ve(V);
-      const le = ((we = be.current) == null ? void 0 : we.getBoundingClientRect().top) ?? Number.POSITIVE_INFINITY;
-      Pt(le <= 150);
+      ve(q);
+      const oe = ((we = be.current) == null ? void 0 : we.getBoundingClientRect().top) ?? Number.POSITIVE_INFINITY;
+      Yt(oe <= 150);
     };
-    return f.addEventListener("scroll", Q, { passive: !0 }), H && H !== f && H.addEventListener("scroll", Q, { passive: !0 }), window.addEventListener("scroll", Q, { passive: !0, capture: !0 }), Q(), () => {
-      f.removeEventListener("scroll", Q), H && H !== f && H.removeEventListener("scroll", Q), window.removeEventListener("scroll", Q, { capture: !0 });
+    return f.addEventListener("scroll", V, { passive: !0 }), M && M !== f && M.addEventListener("scroll", V, { passive: !0 }), window.addEventListener("scroll", V, { passive: !0, capture: !0 }), V(), () => {
+      f.removeEventListener("scroll", V), M && M !== f && M.removeEventListener("scroll", V), window.removeEventListener("scroll", V, { capture: !0 });
     };
   }, []);
-  const qe = N(null), Kt = (f) => {
+  const Ze = N(null), Vt = (f) => {
     var v;
-    ve(f), De.current = !0, qe.current = f;
-    const G = (v = Yt[f]) == null ? void 0 : v.current;
+    ve(f), De.current = !0, Ze.current = f;
+    const G = (v = Kt[f]) == null ? void 0 : v.current;
     if (G) {
       const k = he.current;
       if (k && k.scrollHeight > k.clientHeight) {
-        const H = k.getBoundingClientRect().top, V = G.getBoundingClientRect().top - H + k.scrollTop - 16;
-        k.scrollTo({ top: V, behavior: "smooth" });
+        const M = k.getBoundingClientRect().top, q = G.getBoundingClientRect().top - M + k.scrollTop - 16;
+        k.scrollTo({ top: q, behavior: "smooth" });
       } else {
-        const H = G.getBoundingClientRect().top + window.scrollY - 120;
-        window.scrollTo({ top: H, behavior: "smooth" });
+        const M = G.getBoundingClientRect().top + window.scrollY - 120;
+        window.scrollTo({ top: M, behavior: "smooth" });
       }
     }
     setTimeout(() => {
-      De.current = !1, qe.current = null;
+      De.current = !1, Ze.current = null;
     }, 1200);
-  }, ze = Z || [], Ge = ze.length > 1, Ze = (f) => {
+  }, ze = Q || [], Ge = ze.length > 1, Qe = (f) => {
     ve("signals");
     const G = ge.current;
     if (G) {
       const k = he.current;
       if (k && k.scrollHeight > k.clientHeight) {
-        const H = k.getBoundingClientRect().top, V = G.getBoundingClientRect().top - H + k.scrollTop - 16;
-        k.scrollTo({ top: V, behavior: "smooth" });
+        const M = k.getBoundingClientRect().top, q = G.getBoundingClientRect().top - M + k.scrollTop - 16;
+        k.scrollTo({ top: q, behavior: "smooth" });
       } else {
-        const H = G.getBoundingClientRect().top + window.scrollY - 120;
-        window.scrollTo({ top: H, behavior: "smooth" });
+        const M = G.getBoundingClientRect().top + window.scrollY - 120;
+        window.scrollTo({ top: M, behavior: "smooth" });
       }
     }
     const v = f / 1e3;
@@ -3068,43 +3078,43 @@ const En = {
       var k;
       (k = re.current) != null && k.scrollToTranscript && re.current.scrollToTranscript(v);
     }, 220);
-  }, Qe = (f) => {
+  }, Je = (f) => {
     ve("signals");
     const G = ge.current;
     if (G) {
       const k = he.current;
       if (k && k.scrollHeight > k.clientHeight) {
-        const H = k.getBoundingClientRect().top, V = G.getBoundingClientRect().top - H + k.scrollTop - 16;
-        k.scrollTo({ top: V, behavior: "smooth" });
+        const M = k.getBoundingClientRect().top, q = G.getBoundingClientRect().top - M + k.scrollTop - 16;
+        k.scrollTo({ top: q, behavior: "smooth" });
       } else {
-        const H = G.getBoundingClientRect().top + window.scrollY - 120;
-        window.scrollTo({ top: H, behavior: "smooth" });
+        const M = G.getBoundingClientRect().top + window.scrollY - 120;
+        window.scrollTo({ top: M, behavior: "smooth" });
       }
     }
     const v = (f == null ? void 0 : f.start_ms) ?? (f == null ? void 0 : f.startMs);
     setTimeout(() => {
-      var k, H;
+      var k, M;
       if (v != null && ((k = re.current) != null && k.scrollToTranscript) && re.current.scrollToTranscript(v / 1e3), m)
         m(f);
-      else if (v != null && ((H = re.current) != null && H.seekTo)) {
-        re.current.seekTo(v / 1e3), Ye(!0), $t(v / 1e3);
-        const V = (f.end_ms ?? f.endMs ?? v + 5e3) - v;
-        setTimeout(() => Ye(!1), V);
+      else if (v != null && ((M = re.current) != null && M.seekTo)) {
+        re.current.seekTo(v / 1e3), Ke(!0), Pt(v / 1e3);
+        const q = (f.end_ms ?? f.endMs ?? v + 5e3) - v;
+        setTimeout(() => Ke(!1), q);
       }
     }, 220);
-  }, Vt = (f) => {
-    c && c(f);
   }, qt = (f) => {
-    Oe((G) => {
+    c && c(f);
+  }, Zt = (f) => {
+    $e((G) => {
       const v = new Set(G);
       return v.has(f) ? v.delete(f) : v.add(f), v;
     });
-  }, Zt = (i == null ? void 0 : i.blocks) || [], pe = (f) => {
+  }, Qt = (i == null ? void 0 : i.blocks) || [], pe = (f) => {
     var G;
-    return ((G = Zt.find((v) => v.block_id === f)) == null ? void 0 : G.payload) || {};
-  }, K = pe("interaction-metadata"), se = pe("interaction-context"), Se = pe("interaction-signals"), Qt = pe("interaction-outcome-lift"), Jt = pe("interaction-dimensions").dimensions || [], Xt = se.call_purpose || {}, Ut = se.classification || {}, Je = K || {}, Xe = B || Xt || {}, en = J || Ut || {}, Ue = Qt || {}, tn = (Ue.driver_signal_keys || []).map((f) => f.replace(/^sig\./, "").replace(/_/g, " ")), nn = s || null, rn = (nt = Se == null ? void 0 : Se.signals) != null && nt.length ? Se : { present_count: 0, total_signals_evaluated: 0, signals: [] }, et = Gt || [], Me = z || K.agent_name || K.agent || se.agent_name || "Agent", ln = T || K.agent_full_name || K.agent_name || Me, ue = S || K.customer_name || K.customer || se.customer_name || "Customer", tt = F || K.customer_full_name || K.customer_name || ue, on = String(
+    return ((G = Qt.find((v) => v.block_id === f)) == null ? void 0 : G.payload) || {};
+  }, K = pe("interaction-metadata"), se = pe("interaction-context"), Se = pe("interaction-signals"), Jt = pe("interaction-outcome-lift"), Xt = pe("interaction-dimensions").dimensions || [], Ut = se.call_purpose || {}, en = se.classification || {}, Xe = K || {}, Me = B || Ut || {}, tn = J || en || {}, Ue = Jt || {}, nn = (Ue.driver_signal_keys || []).map((f) => f.replace(/^sig\./, "").replace(/_/g, " ")), rn = l || null, on = (nt = Se == null ? void 0 : Se.signals) != null && nt.length ? Se : { present_count: 0, total_signals_evaluated: 0, signals: [] }, et = Mt || [], Ee = z || K.agent_name || K.agent || se.agent_name || "Agent", ln = T || K.agent_full_name || K.agent_name || Ee, ue = S || K.customer_name || K.customer || se.customer_name || "Customer", tt = F || K.customer_full_name || K.customer_name || ue, an = String(
     (j == null ? void 0 : j.role) ?? (j == null ? void 0 : j.userRole) ?? (j == null ? void 0 : j.user_role) ?? (j == null ? void 0 : j.roleName) ?? (j == null ? void 0 : j.role_name) ?? ""
-  ).toLowerCase(), an = /(admin|superadmin|administrator)/.test(on), Ee = zt ?? ze.length, ke = K.created_dt || (i == null ? void 0 : i.created_dt) || se.created_dt || "", sn = ke ? new Date(/Z$|[+-]\d{2}:\d{2}$/.test(ke) ? ke : ke + "Z").toLocaleString() : "", dn = Xe.interaction_direction === "inbound" ? "Inbound" : "Outbound";
+  ).toLowerCase(), sn = /(admin|superadmin|administrator)/.test(an), He = Gt ?? ze.length, ke = K.created_dt || (i == null ? void 0 : i.created_dt) || se.created_dt || "", dn = ke ? new Date(/Z$|[+-]\d{2}:\d{2}$/.test(ke) ? ke : ke + "Z").toLocaleString() : "", cn = Me.interaction_direction === "inbound" ? "Inbound" : "Outbound";
   return /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", width: "100%", height: "100%", background: "var(--Grey-White, #FFF)" }, children: [
     /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "18px 24px 0" }, children: [
       /* @__PURE__ */ e(
@@ -3121,7 +3131,7 @@ const En = {
             padding: 0,
             flexShrink: 0
           },
-          children: /* @__PURE__ */ e(Te, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
+          children: /* @__PURE__ */ e(_e, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
         }
       ),
       /* @__PURE__ */ e("div", { style: { width: 1, height: 28, background: "var(--Base-absent, #D9D9D9)" } }),
@@ -3134,12 +3144,12 @@ const En = {
         margin: 0,
         flex: 1
       }, children: t }),
-      (ye || me) && !Ve && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
-        /* @__PURE__ */ e(oe, { text: Be, children: /* @__PURE__ */ n(
+      (ye || me) && !qe && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
+        /* @__PURE__ */ e(le, { text: je, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: te ? void 0 : ye,
-            disabled: te,
+            onClick: ee ? void 0 : ye,
+            disabled: ee,
             style: {
               display: "flex",
               alignItems: "center",
@@ -3147,11 +3157,11 @@ const En = {
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: te ? "default" : "pointer",
-              opacity: te ? 0.4 : 1
+              cursor: ee ? "default" : "pointer",
+              opacity: ee ? 0.4 : 1
             },
             children: [
-              /* @__PURE__ */ e(Te, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(_e, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
               /* @__PURE__ */ e("span", { style: {
                 color: "var(--Neutral-800, #323232)",
                 fontSize: 13,
@@ -3169,11 +3179,11 @@ const En = {
           background: "var(--Grey-absent, #D9D9D9)",
           flexShrink: 0
         } }),
-        /* @__PURE__ */ e(oe, { text: je, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ e(le, { text: Ne, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: ne ? void 0 : me,
-            disabled: ne,
+            onClick: te ? void 0 : me,
+            disabled: te,
             style: {
               display: "flex",
               alignItems: "center",
@@ -3181,8 +3191,8 @@ const En = {
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: ne ? "default" : "pointer",
-              opacity: ne ? 0.4 : 1
+              cursor: te ? "default" : "pointer",
+              opacity: te ? 0.4 : 1
             },
             children: [
               /* @__PURE__ */ e("span", { style: {
@@ -3193,7 +3203,7 @@ const En = {
                 fontFamily: "var(--default-font-family)",
                 whiteSpace: "nowrap"
               }, children: "Next Interaction" }),
-              /* @__PURE__ */ e(ot, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
+              /* @__PURE__ */ e(lt, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
             ]
           }
         ) })
@@ -3209,10 +3219,10 @@ const En = {
       padding: "0 24px",
       marginTop: 8
     }, children: [
-      /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "flex-start", minWidth: 0 }, children: Xn.map((f) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "flex-start", minWidth: 0 }, children: Un.map((f) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => Kt(f.key),
+          onClick: () => Vt(f.key),
           style: {
             display: "flex",
             padding: 16,
@@ -3232,12 +3242,12 @@ const En = {
         },
         f.key
       )) }),
-      (ye || me) && Ve && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
-        /* @__PURE__ */ e(oe, { text: Be, children: /* @__PURE__ */ n(
+      (ye || me) && qe && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
+        /* @__PURE__ */ e(le, { text: je, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: te ? void 0 : ye,
-            disabled: te,
+            onClick: ee ? void 0 : ye,
+            disabled: ee,
             style: {
               display: "flex",
               alignItems: "center",
@@ -3245,11 +3255,11 @@ const En = {
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: te ? "default" : "pointer",
-              opacity: te ? 0.4 : 1
+              cursor: ee ? "default" : "pointer",
+              opacity: ee ? 0.4 : 1
             },
             children: [
-              /* @__PURE__ */ e(Te, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(_e, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
               /* @__PURE__ */ e("span", { style: {
                 color: "var(--Neutral-800, #323232)",
                 fontSize: 13,
@@ -3267,11 +3277,11 @@ const En = {
           background: "var(--Grey-absent, #D9D9D9)",
           flexShrink: 0
         } }),
-        /* @__PURE__ */ e(oe, { text: je, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ e(le, { text: Ne, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: ne ? void 0 : me,
-            disabled: ne,
+            onClick: te ? void 0 : me,
+            disabled: te,
             style: {
               display: "flex",
               alignItems: "center",
@@ -3279,8 +3289,8 @@ const En = {
               padding: "4px 12px",
               background: "none",
               border: "none",
-              cursor: ne ? "default" : "pointer",
-              opacity: ne ? 0.4 : 1
+              cursor: te ? "default" : "pointer",
+              opacity: te ? 0.4 : 1
             },
             children: [
               /* @__PURE__ */ e("span", { style: {
@@ -3291,7 +3301,7 @@ const En = {
                 fontFamily: "var(--default-font-family)",
                 whiteSpace: "nowrap"
               }, children: "Next Interaction" }),
-              /* @__PURE__ */ e(ot, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
+              /* @__PURE__ */ e(lt, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
             ]
           }
         ) })
@@ -3314,7 +3324,7 @@ const En = {
           alignSelf: "stretch"
         }, children: [
           /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
-            /* @__PURE__ */ e(xn, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
+            /* @__PURE__ */ e(bn, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
             /* @__PURE__ */ e("span", { style: {
               fontSize: 16,
               fontWeight: 600,
@@ -3326,11 +3336,11 @@ const En = {
           /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 16, flexShrink: 0 }, children: [
             /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
               /* @__PURE__ */ e(at, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
-              /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: sn })
+              /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: dn })
             ] }),
             /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-              /* @__PURE__ */ e(bn, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
-              /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: dn })
+              /* @__PURE__ */ e(st, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: cn })
             ] }),
             /* @__PURE__ */ n("div", { style: {
               display: "flex",
@@ -3339,11 +3349,11 @@ const En = {
               paddingLeft: 16,
               borderLeft: "1px solid var(--Grey-absent, #D9D9D9)"
             }, children: [
-              /* @__PURE__ */ e(oe, { text: ln, children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0", cursor: "pointer" }, children: [
-                /* @__PURE__ */ e(st, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
-                /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: Me })
+              /* @__PURE__ */ e(le, { text: ln, children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0", cursor: "pointer" }, children: [
+                /* @__PURE__ */ e(dt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: Ee })
               ] }) }),
-              Ee > 1 ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(oe, { text: tt, children: /* @__PURE__ */ n(
+              He > 1 ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(le, { text: tt, children: /* @__PURE__ */ n(
                 "button",
                 {
                   onClick: () => xe(!0),
@@ -3366,7 +3376,7 @@ const En = {
                         " ",
                         /* @__PURE__ */ n("span", { children: [
                           "(",
-                          Ee,
+                          He,
                           " Interactions)"
                         ] })
                       ] })
@@ -3374,7 +3384,7 @@ const En = {
                     /* @__PURE__ */ e(Sn, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.7 })
                   ]
                 }
-              ) }) }) : /* @__PURE__ */ e(oe, { text: tt, children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 0", cursor: "pointer" }, children: [
+              ) }) }) : /* @__PURE__ */ e(le, { text: tt, children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 0", cursor: "pointer" }, children: [
                 /* @__PURE__ */ e(Re, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                 /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2 }, children: ue })
               ] }) })
@@ -3388,14 +3398,14 @@ const En = {
           alignSelf: "stretch"
         }, children: [
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0, display: "flex" }, children: /* @__PURE__ */ e(
-            On,
+            $n,
             {
-              score: fe ?? 0.5,
+              score: ae ?? 0.5,
               minScore: 0,
-              maxScore: h,
-              predictedScore: $ ?? 0.5,
-              predictedLabel: U,
-              legends: l
+              maxScore: fe,
+              predictedScore: h ?? 0.5,
+              predictedLabel: $,
+              legends: o
             }
           ) }),
           /* @__PURE__ */ n("div", { style: {
@@ -3408,19 +3418,19 @@ const En = {
             minWidth: 0
           }, children: [
             /* @__PURE__ */ e(
-              Hn,
+              Tn,
               {
-                meta: Je,
-                callPurpose: Xe,
-                classification: en,
-                outcomeQuality: ie || "Neutral",
-                dimensions: Jt,
-                resolutionOutcome: R,
-                customerIntent: X,
-                location: ee ?? K.location ?? K.location_name ?? se.location,
-                interactionId: ae ?? K.interaction_id,
-                moreDetails: q,
-                canShowEditButton: an,
+                meta: Xe,
+                callPurpose: Me,
+                classification: tn,
+                outcomeQuality: X || "Neutral",
+                dimensions: Xt,
+                resolutionOutcome: U,
+                customerIntent: _,
+                location: ne ?? K.location ?? K.location_name ?? se.location,
+                interactionId: ie ?? K.interaction_id,
+                moreDetails: Z,
+                canShowEditButton: sn,
                 onEditInteraction: Rt
               }
             ),
@@ -3428,13 +3438,13 @@ const En = {
               Rn,
               {
                 outcomeLift: Ue,
-                driverLabels: tn
+                driverLabels: nn
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { ref: We, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(Gn, { data: o ? null : nn, loading: o }) }),
+      /* @__PURE__ */ e("div", { ref: We, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(Mn, { data: a ? null : rn, loading: a }) }),
       /* @__PURE__ */ n("div", { ref: ge, style: {
         display: "flex",
         flexDirection: "column",
@@ -3447,7 +3457,7 @@ const En = {
           alignItems: "center",
           gap: 8
         }, children: [
-          /* @__PURE__ */ e(bt, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
+          /* @__PURE__ */ e(St, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
           /* @__PURE__ */ e("span", { style: {
             fontSize: 16,
             fontWeight: 600,
@@ -3465,85 +3475,85 @@ const En = {
           borderTop: "1px solid #D9D9D9"
         }, children: [
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            _n,
+            An,
             {
-              signals: rn,
-              expandedSignals: jt,
-              toggleSignal: qt,
-              playEvidence: Qe,
-              highlightTurns: Vt,
-              onShowInTranscript: Ze,
-              timelinePlaying: y || Pe,
-              currentTimeSeconds: p ?? Ke
+              signals: on,
+              expandedSignals: Nt,
+              toggleSignal: Zt,
+              playEvidence: Je,
+              highlightTurns: qt,
+              onShowInTranscript: Qe,
+              timelinePlaying: y || Ye,
+              currentTimeSeconds: p ?? Ve
             }
           ) }),
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            Cn,
+            Fn,
             {
               ref: re,
               audioUrl: d,
-              durationSeconds: Je.duration_seconds,
+              durationSeconds: Xe.duration_seconds,
               audioRef: g,
-              agentName: Me,
+              agentName: Ee,
               customerName: ue,
               currentTimeSeconds: p,
               timelinePlaying: y,
               playbackRate: W,
               timelineSegments: x,
               onSeek: I,
-              onTogglePlay: a,
+              onTogglePlay: s,
               onSeekBack: b,
               onSeekForward: w,
               onSetPlaybackRate: C,
-              transcript: E,
+              transcript: H,
               activeTurnIndex: L,
-              turnObservations: _,
+              turnObservations: R,
               highlightedTurns: O,
               onTurnPlayPause: u,
-              setExpandedSignals: Oe
+              setExpandedSignals: $e
             }
           ) })
         ] })
       ] }),
       /* @__PURE__ */ e("div", { ref: Ie, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(
-        qn,
+        Zn,
         {
-          comments: Ne,
-          totalComments: Ne.length,
+          comments: Oe,
+          totalComments: Oe.length,
           currentUser: j,
-          onSendComment: Mt || (() => {
+          onSendComment: Et || (() => {
           }),
-          onSendReply: Et || (() => {
+          onSendReply: Ht || (() => {
           }),
-          onReply: Ht || (() => {
+          onReply: Tt || (() => {
           }),
-          onEdit: Tt || (() => {
+          onEdit: _t || (() => {
           }),
-          onDelete: _t || (() => {
+          onDelete: At || (() => {
           }),
-          onMenuClick: At || (() => {
+          onMenuClick: Lt || (() => {
           }),
-          onMarkResolved: Lt || (() => {
+          onMarkResolved: Bt || (() => {
           }),
-          isResolved: Bt,
+          isResolved: jt,
           children: /* @__PURE__ */ e(
-            Jn,
+            Xn,
             {
               items: et,
               guidanceCount: et.length,
-              onPlayEvidence: Qe,
-              onShowInTranscript: Ze,
-              timelinePlaying: y || Pe,
-              currentTimeSeconds: p ?? Ke
+              onPlayEvidence: Je,
+              onShowInTranscript: Qe,
+              timelinePlaying: y || Ye,
+              currentTimeSeconds: p ?? Ve
             }
           )
         }
       ) })
     ] }),
     /* @__PURE__ */ e(
-      Fn,
+      Wn,
       {
-        open: Nt,
+        open: Ot,
         onClose: () => xe(!1),
         title: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
           /* @__PURE__ */ e("div", { style: {
@@ -3572,7 +3582,7 @@ const En = {
           color: "var(--Grey-Muted, #808183)",
           lineHeight: 1.5
         }, children: [
-          Ee,
+          He,
           " Interactions"
         ] }) : null,
         width: 470,
@@ -3582,7 +3592,7 @@ const En = {
           "button",
           {
             onClick: () => {
-              Le && Le(), xe(!1);
+              Be && Be(), xe(!1);
             },
             style: {
               display: "flex",
@@ -3611,15 +3621,18 @@ const En = {
               overflowY: "auto"
             },
             children: Ge ? ze.map((f, G) => {
-              const v = !!f.isCurrent, k = !v && Ot === G;
+              const v = !!f.isCurrent, k = !v && $t === G, M = ei(
+                f,
+                Me.interaction_direction
+              );
               return /* @__PURE__ */ n(
                 "div",
                 {
                   onClick: v ? void 0 : () => {
-                    Ae && Ae(f), xe(!1);
+                    Le && Le(f), xe(!1);
                   },
-                  onMouseEnter: v ? void 0 : () => $e(G),
-                  onMouseLeave: v ? void 0 : () => $e(null),
+                  onMouseEnter: v ? void 0 : () => Pe(G),
+                  onMouseLeave: v ? void 0 : () => Pe(null),
                   "aria-current": v ? "page" : void 0,
                   style: {
                     display: "flex",
@@ -3634,7 +3647,7 @@ const En = {
                   },
                   children: [
                     /* @__PURE__ */ n("div", { style: { minWidth: 0 }, children: [
-                      /* @__PURE__ */ e(
+                      /* @__PURE__ */ n(
                         "div",
                         {
                           style: {
@@ -3650,7 +3663,29 @@ const En = {
                             overflow: "hidden",
                             textOverflow: "ellipsis"
                           },
-                          children: f.title
+                          children: [
+                            M && /* @__PURE__ */ e(
+                              M === "outbound" ? Cn : st,
+                              {
+                                size: 16,
+                                color: "var(--Grey-Muted, #808183)",
+                                strokeWidth: 1.5,
+                                style: { flexShrink: 0 },
+                                "aria-hidden": !0
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  minWidth: 0
+                                },
+                                children: f.title
+                              }
+                            )
+                          ]
                         }
                       ),
                       f.status && /* @__PURE__ */ n("div", { style: { fontSize: 13, color: "var(--Grey-Strong, #2E3236)", marginBottom: 12, lineHeight: 1.2 }, children: [
@@ -3663,7 +3698,7 @@ const En = {
                           f.date
                         ] }),
                         (f.agent || f.agent_name) && /* @__PURE__ */ n("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.1 }, children: [
-                          /* @__PURE__ */ e(st, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.8 }),
+                          /* @__PURE__ */ e(dt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.8 }),
                           f.agent || f.agent_name
                         ] })
                       ] })
@@ -3697,14 +3732,14 @@ const En = {
   ] });
 };
 export {
-  Gn as UpdatedCoachingSynthesisCard,
-  On as UpdatedCompassScore,
-  Jn as UpdatedGuidance,
-  Hn as UpdatedInteractionContext,
-  oi as UpdatedInteractionDetails,
-  Cn as UpdatedInteractionRecording,
+  Mn as UpdatedCoachingSynthesisCard,
+  $n as UpdatedCompassScore,
+  Xn as UpdatedGuidance,
+  Tn as UpdatedInteractionContext,
+  si as UpdatedInteractionDetails,
+  Fn as UpdatedInteractionRecording,
   Rn as UpdatedInteractionScores,
-  _n as UpdatedInteractionSignals,
-  qn as UpdatedThreads
+  An as UpdatedInteractionSignals,
+  Zn as UpdatedThreads
 };
 //# sourceMappingURL=UpdatedInteractionDetails.es.js.map