chordia-ui 3.7.0 → 3.7.2

package/dist/components/UpdatedInteractionDetails.es.js

@@ -1,7 +1,8 @@
-import { jsxs as n, Fragment as an, jsx as e } from "react/jsx-runtime";
-import ae, { useState as z, useRef as $, useEffect as Te, useMemo as Me } from "react";
-import { ShieldCheck as sn, TrendingUp as dn, Lightbulb as vt, ThumbsUp as xt, ChevronUp as Re, ChevronDown as _e, Pencil as cn, ThumbsDown as fn, FileSignal as bt, ScrollText as St, PauseCircle as kt, PlayCircle as wt, Info as Ct, MessagesSquare as at, Check as gn, CircleCheck as hn, Ellipsis as pn, X as st, CornerDownRight as un, ArrowLeft as Ee, ArrowRight as dt, ClipboardList as yn, CalendarDays as mn, PhoneIncoming as vn, Headset as xn, Repeat as bn, CircleUser as He, ExternalLink as Sn, History as kn } from "lucide-react";
-import { U as wn } from "../UpdatedInteractionRecording.es.js";
+import { jsxs as n, Fragment as fn, jsx as e } from "react/jsx-runtime";
+import ae, { useState as G, useRef as $, useEffect as _e, useMemo as He } from "react";
+import { ShieldCheck as gn, TrendingUp as hn, Lightbulb as xt, ThumbsUp as bt, ChevronUp as St, ChevronDown as kt, Pencil as pn, ThumbsDown as un, FileSignal as wt, ScrollText as Ct, PauseCircle as Ft, PlayCircle as Wt, Info as It, MessagesSquare as lt, Check as yn, CircleCheck as mn, Ellipsis as vn, X as ot, CornerDownRight as xn, ArrowLeft as Te, ArrowRight as at, ClipboardList as bn, CalendarDays as st, PhoneIncoming as Sn, Headset as dt, CircleUser as Re, ChevronRight as ct, 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";
 const L = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
@@ -11,17 +12,17 @@ const L = {
   quoteLine: "var(--border-warm, #B2AEA8)",
   quoteText: "var(--text-subtle-warm, #767473)",
   iconBg: "var(--surface-hover, #F3F7F7)"
-}, Cn = {
+}, Wn = {
   effective: "Effective",
   strong: "Strong",
   needs_improvement: "Needs Improvement",
   mixed: "Mixed"
-}, ct = "updated-coaching-synthesis-keyframes";
-function Fn() {
-  if (typeof document > "u" || document.getElementById(ct))
+}, ft = "updated-coaching-synthesis-keyframes";
+function In() {
+  if (typeof document > "u" || document.getElementById(ft))
     return;
   const t = document.createElement("style");
-  t.id = ct, t.textContent = `
+  t.id = ft, t.textContent = `
     @keyframes updated-coaching-shimmer {
       0% { background-position: -200% 0; }
       100% { background-position: 200% 0; }
@@ -32,8 +33,8 @@ function Fn() {
     }
   `, document.head.appendChild(t);
 }
-function Wn({ overall: t }) {
-  const r = Cn[t] || (t ? t.replace(/_/g, " ") : "");
+function zn({ overall: t }) {
+  const r = Wn[t] || (t ? t.replace(/_/g, " ") : "");
   return /* @__PURE__ */ n("div", { style: {
     display: "flex",
     alignItems: "center",
@@ -52,7 +53,7 @@ function Wn({ overall: t }) {
       alignItems: "center",
       gap: 6
     }, children: [
-      /* @__PURE__ */ e(xt, { size: 14, color: L.strong, strokeWidth: 1.5 }),
+      /* @__PURE__ */ e(bt, { size: 14, color: L.strong, strokeWidth: 1.5 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 13,
         fontWeight: 600,
@@ -63,7 +64,7 @@ function Wn({ overall: t }) {
     ] })
   ] });
 }
-function In({ item: t }) {
+function Dn({ 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: {
@@ -97,7 +98,7 @@ function In({ item: t }) {
     ] })
   ] });
 }
-function ft({ icon: t, label: r, items: i }) {
+function gt({ icon: t, label: r, items: i }) {
   return !i || i.length === 0 ? null : /* @__PURE__ */ n("div", { style: {
     flex: 1,
     display: "flex",
@@ -128,15 +129,15 @@ function ft({ icon: t, label: r, items: i }) {
         lineHeight: "normal"
       }, children: r })
     ] }),
-    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: i.map((s, l) => /* @__PURE__ */ e(In, { item: s }, l)) })
+    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: i.map((s, o) => /* @__PURE__ */ e(Dn, { item: s }, o)) })
   ] });
 }
-const Dn = ({ data: t, loading: r, error: i }) => {
-  var h, u;
+const Gn = ({ data: t, loading: r, error: i }) => {
+  var p, u;
   if (ae.useEffect(() => {
-    Fn();
+    In();
   }, []), r)
-    return /* @__PURE__ */ n(an, { children: [
+    return /* @__PURE__ */ n(fn, { children: [
       /* @__PURE__ */ e("style", { children: `
           @keyframes coaching-spinner-spin {
             from { transform: rotate(0deg); }
@@ -206,7 +207,7 @@ const Dn = ({ data: t, loading: r, error: i }) => {
     }, children: "Unable to generate coaching summary." });
   if (!t)
     return null;
-  const s = t.strengths || [], l = t.improvements || [], a = typeof t.one_liner == "string" ? t.one_liner : ((h = t.one_liner) == null ? void 0 : h.text) || "", f = typeof t.context == "string" ? t.context : ((u = t.context) == null ? void 0 : u.text) || "";
+  const s = t.strengths || [], o = t.improvements || [], a = typeof t.one_liner == "string" ? t.one_liner : ((p = t.one_liner) == null ? void 0 : p.text) || "", g = typeof t.context == "string" ? t.context : ((u = t.context) == null ? void 0 : u.text) || "";
   return /* @__PURE__ */ n("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -218,7 +219,7 @@ const Dn = ({ data: t, loading: r, error: i }) => {
       alignItems: "center",
       gap: 8
     }, children: [
-      /* @__PURE__ */ e(sn, { size: 20, color: L.accent, strokeWidth: 2 }),
+      /* @__PURE__ */ e(gn, { size: 20, color: L.accent, strokeWidth: 2 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 16,
         fontWeight: 600,
@@ -241,46 +242,46 @@ const Dn = ({ data: t, loading: r, error: i }) => {
       gap: 16,
       justifyContent: "space-between"
     }, children: [
-      f && /* @__PURE__ */ e("div", { style: {
+      g && /* @__PURE__ */ e("div", { style: {
         fontSize: 14,
         fontWeight: 400,
         color: L.muted,
         fontFamily: "var(--font-sans)",
         lineHeight: 1.5,
         flex: 1
-      }, children: f }),
-      t.overall && /* @__PURE__ */ e(Wn, { overall: t.overall })
+      }, children: g }),
+      t.overall && /* @__PURE__ */ e(zn, { overall: t.overall })
     ] }),
-    (s.length > 0 || l.length > 0) && /* @__PURE__ */ n("div", { style: {
+    (s.length > 0 || o.length > 0) && /* @__PURE__ */ n("div", { style: {
       display: "flex",
       gap: 24,
       paddingTop: 24,
       borderTop: `1px solid ${L.absent}`
     }, children: [
       /* @__PURE__ */ e(
-        ft,
+        gt,
         {
-          icon: /* @__PURE__ */ e(dn, { size: 14, color: L.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(hn, { size: 14, color: L.strong, strokeWidth: 1.5 }),
           label: "Key Strengths",
           items: s
         }
       ),
       /* @__PURE__ */ e(
-        ft,
+        gt,
         {
-          icon: /* @__PURE__ */ e(vt, { size: 14, color: L.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(xt, { size: 14, color: L.strong, strokeWidth: 1.5 }),
           label: "Improvements",
-          items: l
+          items: o
         }
       )
     ] })
   ] });
 };
-function zn(t) {
+function Mn(t) {
   const r = Math.floor(t / 60), i = Math.round(t % 60);
   return `${r}:${i.toString().padStart(2, "0")}`;
 }
-const Gn = {
+const En = {
   display: "flex",
   justifyContent: "space-between",
   padding: "8px 8px 12px 8px",
@@ -291,62 +292,62 @@ const Gn = {
   fontWeight: 400,
   lineHeight: "normal",
   borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
-}, gt = {
+}, ht = {
   display: "flex",
   flexDirection: "column",
   flex: "1 0 0",
   gap: 0,
   minWidth: 0
-}, Mn = ({
+}, Hn = ({
   meta: t = {},
   callPurpose: r = {},
   classification: i = {},
   dimensions: s = [],
-  outcomeQuality: l = "Neutral",
+  outcomeQuality: o = "Neutral",
   onMoreDetails: a,
-  moreDetails: f = [],
-  resolutionOutcome: h,
+  moreDetails: g = [],
+  resolutionOutcome: p,
   customerIntent: u,
   canShowEditButton: W = !1,
   onEditInteraction: v
 }) => {
-  const [S, d] = z(!1), x = $(null), k = t.duration_seconds != null ? zn(t.duration_seconds) : null, w = t.message_count, G = r.interaction_driver, R = i.interaction_paradigm, b = (g) => s.find((A) => (A.key || "").toLowerCase().includes(g)), I = b("resolution_outcome"), E = b("customer_intent"), B = b("outcome_quality"), _ = (g) => g ? g.replace(/_/g, " ").replace(/\b\w/g, (A) => A.toUpperCase()) : null, P = l !== "Neutral" ? l : B ? _(B.value) : l, m = h ?? (I ? _(I.value) : null), y = u ?? (E ? _(E.value) : null), c = new Set(["resolution_outcome", "customer_intent", "outcome_quality"].map((g) => `dim.${g}`)), D = s.filter((g) => !c.has(g.key)), Z = [], Q = [
+  const [S, d] = G(!1), x = $(null), k = t.duration_seconds != null ? Mn(t.duration_seconds) : null, w = t.message_count, M = r.interaction_driver, R = i.interaction_paradigm, b = (h) => s.find((A) => (A.key || "").toLowerCase().includes(h)), I = b("resolution_outcome"), E = b("customer_intent"), B = b("outcome_quality"), _ = (h) => h ? h.replace(/_/g, " ").replace(/\b\w/g, (A) => A.toUpperCase()) : null, P = o !== "Neutral" ? o : B ? _(B.value) : o, m = p ?? (I ? _(I.value) : null), y = u ?? (E ? _(E.value) : null), c = new Set(["resolution_outcome", "customer_intent", "outcome_quality"].map((h) => `dim.${h}`)), z = s.filter((h) => !c.has(h.key)), Z = [], Q = [
     [
       k != null ? { label: "Duration", value: k } : null,
       w != null ? { label: "Messages", value: w } : null
     ],
     [
-      G != null ? { label: "Driver", value: G } : null,
+      M != null ? { label: "Driver", value: M } : null,
       R != null ? { label: "Paradigm", value: R } : null
     ]
   ];
-  for (let g = 0; g < D.length; g += 2) {
-    const A = D[g] ? { label: D[g].display_name || D[g].label || D[g].key, value: _(D[g].value) } : null, U = D[g + 1] ? { label: D[g + 1].display_name || D[g + 1].label || D[g + 1].key, value: _(D[g + 1].value) } : null;
+  for (let h = 0; h < z.length; h += 2) {
+    const A = z[h] ? { label: z[h].display_name || z[h].label || z[h].key, value: _(z[h].value) } : null, U = z[h + 1] ? { label: z[h + 1].display_name || z[h + 1].label || z[h + 1].key, value: _(z[h + 1].value) } : null;
     Q.push([A, U]);
   }
   Q.push([
     { label: "Outcome Quality", value: P },
     { isMoreDetails: !0 }
-  ]), Q.forEach((g) => Z.push(g));
+  ]), Q.forEach((h) => Z.push(h));
   const J = [
     m != null && { label: "Resolution Outcome", value: m },
     y != null && { label: "Customer Intent", value: y },
-    ...f || []
+    ...g || []
   ].filter(Boolean);
-  Te(() => {
+  _e(() => {
     if (!S)
       return;
-    const g = (A) => {
+    const h = (A) => {
       x.current && !x.current.contains(A.target) && d(!1);
     };
-    return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
+    return document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
   }, [S]);
-  const X = (g) => /* @__PURE__ */ n(
+  const X = (h) => /* @__PURE__ */ n(
     "div",
     {
-      style: Gn,
+      style: En,
       children: [
-        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: g.label }),
+        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: h.label }),
         /* @__PURE__ */ e("span", { style: {
           color: "var(--Grey-Muted, #808183)",
           textAlign: "right",
@@ -354,11 +355,11 @@ const Gn = {
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           minWidth: 0
-        }, children: g.value })
+        }, children: h.value })
       ]
     },
-    g.label
-  ), oe = () => /* @__PURE__ */ n(
+    h.label
+  ), le = () => /* @__PURE__ */ n(
     "div",
     {
       style: {
@@ -368,14 +369,15 @@ const Gn = {
         gap: 12,
         padding: "8px 8px 12px 8px",
         fontFamily: "var(--font-sans)",
-        borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
+        borderBottom: "none",
+        minHeight: 33
       },
       children: [
         /* @__PURE__ */ n(
           "button",
           {
             onClick: () => {
-              d((g) => !g), a && !S && a();
+              d((h) => !h), a && !S && a();
             },
             style: {
               display: "flex",
@@ -389,11 +391,13 @@ const Gn = {
               fontSize: 13,
               fontWeight: 500,
               lineHeight: "normal",
-              fontFamily: "var(--font-sans)"
+              fontFamily: "var(--font-sans)",
+              whiteSpace: "nowrap",
+              flexShrink: 0
             },
             children: [
               /* @__PURE__ */ e("span", { children: "More Details" }),
-              S ? /* @__PURE__ */ e(Re, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(_e, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
+              S ? /* @__PURE__ */ e(St, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(kt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
             ]
           }
         ),
@@ -419,7 +423,7 @@ const Gn = {
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ e(cn, { 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" })
             ]
           }
@@ -441,20 +445,21 @@ const Gn = {
         overflow: "visible"
       },
       children: [
-        Z.map((g, A) => {
+        Z.map((h, A) => {
           var U;
           return /* @__PURE__ */ n(
             "div",
             {
               style: {
                 display: "flex",
-                alignItems: "flex-start",
+                alignItems: "center",
                 gap: 24,
-                alignSelf: "stretch"
+                alignSelf: "stretch",
+                flexWrap: "nowrap"
               },
               children: [
-                /* @__PURE__ */ e("div", { style: gt, children: g[0] && !g[0].isMoreDetails ? X(g[0]) : /* @__PURE__ */ e("div", { style: { flex: 1 } }) }),
-                /* @__PURE__ */ e("div", { style: gt, children: g[1] && !g[1].isMoreDetails ? X(g[1]) : (U = g[1]) != null && U.isMoreDetails ? oe() : /* @__PURE__ */ e("div", { style: { flex: 1 } }) })
+                /* @__PURE__ */ e("div", { style: ht, children: h[0] && !h[0].isMoreDetails ? X(h[0]) : /* @__PURE__ */ e("div", { style: { flex: 1 } }) }),
+                /* @__PURE__ */ e("div", { style: ht, children: h[1] && !h[1].isMoreDetails ? X(h[1]) : (U = h[1]) != null && U.isMoreDetails ? le() : /* @__PURE__ */ e("div", { style: { flex: 1 } }) })
               ]
             },
             A
@@ -489,7 +494,7 @@ const Gn = {
                 borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
                 alignSelf: "stretch"
               }, children: "More details" }),
-              J.map((g) => /* @__PURE__ */ n(
+              J.map((h) => /* @__PURE__ */ n(
                 "div",
                 {
                   style: {
@@ -505,7 +510,7 @@ const Gn = {
                     alignSelf: "stretch"
                   },
                   children: [
-                    /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: g.label }),
+                    /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: h.label }),
                     /* @__PURE__ */ e("span", { style: {
                       color: "var(--Grey-Muted, #808183)",
                       fontSize: 13,
@@ -513,10 +518,10 @@ const Gn = {
                       fontWeight: 400,
                       lineHeight: "120%",
                       textAlign: "right"
-                    }, children: g.value })
+                    }, children: h.value })
                   ]
                 },
-                g.label
+                h.label
               ))
             ]
           }
@@ -530,16 +535,16 @@ const Gn = {
   absent: "var(--Grey-absent, #D9D9D9)",
   white: "var(--Grey-White, #FFF)",
   cardBg: "var(--surface-warm-40, rgba(243, 241, 229, 0.40))"
-}, N = 1.2, ht = 3, pt = (t) => t != null ? Math.round(t * 100) + "%" : "—", ut = (t) => {
+}, N = 1.2, pt = 3, ut = (t) => t != null ? Math.round(t * 100) + "%" : "—", yt = (t) => {
   if (t == null)
     return "—";
   const r = (t * 100).toFixed(1);
   return t > 0 ? `+${r}pp` : `${r}pp`;
-}, En = ({ outcomeLift: t, driverLabels: r = [] }) => {
+}, Tn = ({ outcomeLift: t, driverLabels: r = [] }) => {
   var d;
   if (!t || t.lift == null)
     return null;
-  const i = t.p_expected, s = t.p_full, l = t.lift_raw ?? (s != null && i != null ? s - i : null), a = t.lift, f = (d = t.interpretation) != null && d.lift_band ? t.interpretation.lift_band.replace(/_/g, " ") : a >= 0 ? "Positive" : "Negative", h = f.charAt(0).toUpperCase() + f.slice(1), W = /negative/i.test(f) ? fn : xt, v = r.slice(0, ht), S = r.length - ht;
+  const i = t.p_expected, s = t.p_full, o = t.lift_raw ?? (s != null && i != null ? s - i : null), a = t.lift, g = (d = t.interpretation) != null && d.lift_band ? t.interpretation.lift_band.replace(/_/g, " ") : a >= 0 ? "Positive" : "Negative", p = g.charAt(0).toUpperCase() + g.slice(1), W = /negative/i.test(g) ? un : bt, v = r.slice(0, pt), S = r.length - pt;
   return /* @__PURE__ */ n(
     "div",
     {
@@ -590,7 +595,7 @@ const Gn = {
                     },
                     children: [
                       /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: F.strong, lineHeight: N }, children: "vs. Average Agent:" }),
-                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: F.strong, lineHeight: N }, children: ut(a) }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: F.strong, lineHeight: N }, children: yt(a) }),
                       /* @__PURE__ */ n(
                         "div",
                         {
@@ -603,7 +608,7 @@ const Gn = {
                           },
                           children: [
                             /* @__PURE__ */ e(W, { size: 14, color: F.strong }),
-                            /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: F.strong, lineHeight: N }, children: h })
+                            /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: F.strong, lineHeight: N }, children: p })
                           ]
                         }
                       )
@@ -622,7 +627,7 @@ const Gn = {
               },
               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: F.muted, fontFamily: "var(--font-sans)", lineHeight: N }, children: pt(i) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: F.muted, fontFamily: "var(--font-sans)", lineHeight: N }, children: ut(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: F.strong, fontFamily: "var(--font-sans)", lineHeight: N, whiteSpace: "nowrap" }, children: "Expected Outcome" }),
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: F.muted, fontFamily: "var(--font-sans)", lineHeight: N, textAlign: "left" }, children: "Based on call type & difficulty" })
@@ -638,7 +643,7 @@ const Gn = {
                   flex: 1,
                   minWidth: 0
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: F.muted, fontFamily: "var(--font-sans)", lineHeight: N }, children: ut(l) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: F.muted, fontFamily: "var(--font-sans)", lineHeight: N }, children: yt(o) }),
                   /* @__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: F.strong, fontFamily: "var(--font-sans)", lineHeight: N, whiteSpace: "nowrap" }, children: "Agent Impact" }),
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: F.muted, fontFamily: "var(--font-sans)", lineHeight: N, textAlign: "left" }, children: "Behavior-driven change" })
@@ -654,7 +659,7 @@ const Gn = {
                   flex: 1,
                   minWidth: 0
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: F.strong, fontFamily: "var(--font-sans)", lineHeight: N }, children: pt(s) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: F.strong, fontFamily: "var(--font-sans)", lineHeight: N }, children: ut(s) }),
                   /* @__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: F.strong, fontFamily: "var(--font-sans)", lineHeight: N, whiteSpace: "nowrap" }, children: "Predicted Outcome" }),
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: F.muted, fontFamily: "var(--font-sans)", lineHeight: N, textAlign: "left" }, children: "With agent behaviors" })
@@ -747,8 +752,8 @@ const Gn = {
       ]
     }
   );
-}, yt = ({ children: t, size: r = 28, onClick: i, title: s }) => {
-  const [l, a] = z(!1);
+}, mt = ({ children: t, size: r = 28, onClick: i, title: s }) => {
+  const [o, a] = G(!1);
   return /* @__PURE__ */ e(
     "div",
     {
@@ -763,7 +768,7 @@ const Gn = {
         width: r,
         height: r,
         borderRadius: 9999,
-        background: l ? "var(--surface-hover, #F3F7F7)" : "transparent",
+        background: o ? "var(--surface-hover, #F3F7F7)" : "transparent",
         cursor: "pointer",
         flexShrink: 0,
         transition: "background 0.15s"
@@ -771,24 +776,24 @@ const Gn = {
       children: t
     }
   );
-}, Hn = ({
+}, Rn = ({
   signals: t = { signals: [], present_count: 0, total_signals_evaluated: 0 },
   expandedSignals: r = /* @__PURE__ */ new Set(),
   toggleSignal: i = () => {
   },
   playEvidence: s = () => {
   },
-  highlightTurns: l = () => {
+  highlightTurns: o = () => {
   },
   onShowInTranscript: a = () => {
   },
-  timelinePlaying: f = !1,
-  currentTimeSeconds: h = 0
+  timelinePlaying: g = !1,
+  currentTimeSeconds: p = 0
 }) => {
   const u = (t == null ? void 0 : t.signals) ?? [], W = (t == null ? void 0 : t.present_count) ?? u.length, v = (d) => {
     const x = Math.floor(d / 6e4), k = Math.floor(d % 6e4 / 1e3);
     return `${x.toString().padStart(2, "0")}:${k.toString().padStart(2, "0")}`;
-  }, S = (d) => f && d.start_ms != null && h * 1e3 >= d.start_ms && h * 1e3 <= (d.end_ms ?? d.start_ms + 5e3);
+  }, S = (d) => g && d.start_ms != null && p * 1e3 >= d.start_ms && p * 1e3 <= (d.end_ms ?? d.start_ms + 5e3);
   return /* @__PURE__ */ n("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -812,7 +817,7 @@ const Gn = {
         borderRadius: 9999,
         background: "var(--surface-hover, #F3F7F7)",
         flexShrink: 0
-      }, children: /* @__PURE__ */ e(bt, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      }, children: /* @__PURE__ */ e(wt, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
       /* @__PURE__ */ n("div", { style: {
         display: "flex",
         alignItems: "center",
@@ -848,7 +853,7 @@ const Gn = {
       }, children: "No signals detected." }),
       u.map((d, x) => {
         var R, b, I;
-        const k = d.key ?? d.id ?? x, w = r.has(k), G = ((R = d.observations) == null ? void 0 : R.length) ?? 0;
+        const k = d.key ?? d.id ?? x, w = r.has(k), M = ((R = d.observations) == null ? void 0 : R.length) ?? 0;
         return /* @__PURE__ */ n(
           "div",
           {
@@ -886,17 +891,17 @@ const Gn = {
                       lineHeight: 1.71
                     }, children: [
                       d.display_name || ((b = d.key) == null ? void 0 : b.replace(/_/g, " ")),
-                      G > 0 && /* @__PURE__ */ n("span", { style: {
+                      M > 0 && /* @__PURE__ */ n("span", { style: {
                         fontWeight: 600,
                         color: "var(--text-dark, #0B0A0A)",
                         marginLeft: 6
                       }, children: [
                         "(",
-                        G,
+                        M,
                         ")"
                       ] })
                     ] }),
-                    w ? /* @__PURE__ */ e(Re, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(_e, { size: 20, color: "#767473" })
+                    w ? /* @__PURE__ */ e(St, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(kt, { size: 20, color: "#767473" })
                   ]
                 }
               ),
@@ -942,14 +947,14 @@ const Gn = {
                             },
                             children: [
                               /* @__PURE__ */ e(
-                                yt,
+                                mt,
                                 {
                                   size: 28,
                                   title: "Show in transcript",
                                   onClick: (y) => {
                                     y.stopPropagation(), a(E.evidence[0].start_ms);
                                   },
-                                  children: /* @__PURE__ */ e(St, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                                  children: /* @__PURE__ */ e(Ct, { size: 16, color: "#808183", strokeWidth: 1.5 })
                                 }
                               ),
                               /* @__PURE__ */ e("span", { style: {
@@ -964,32 +969,32 @@ const Gn = {
                         )
                       ] }),
                       (m = E.evidence) == null ? void 0 : m.map((y, c) => {
-                        const D = y.start_ms != null && y.end_ms != null;
+                        const z = y.start_ms != null && y.end_ms != null;
                         return y.text && /* @__PURE__ */ n(
                           "div",
                           {
                             onClick: (Z) => {
-                              Z.stopPropagation(), D && s(y);
+                              Z.stopPropagation(), z && s(y);
                             },
-                            onMouseEnter: () => l(y.turn_ids ?? []),
-                            onMouseLeave: () => l([]),
+                            onMouseEnter: () => o(y.turn_ids ?? []),
+                            onMouseLeave: () => o([]),
                             style: {
                               display: "flex",
                               alignItems: "center",
                               gap: 8,
                               padding: "8px 0",
-                              cursor: D ? "pointer" : "default"
+                              cursor: z ? "pointer" : "default"
                             },
                             children: [
-                              D && /* @__PURE__ */ e(yt, { size: 28, children: S(y) ? /* @__PURE__ */ e(
-                                kt,
+                              z && /* @__PURE__ */ e(mt, { size: 28, children: S(y) ? /* @__PURE__ */ e(
+                                Ft,
                                 {
                                   size: 17,
                                   color: "var(--Grey-Muted, #808183)",
                                   strokeWidth: 1.5
                                 }
                               ) : /* @__PURE__ */ e(
-                                wt,
+                                Wt,
                                 {
                                   size: 17,
                                   color: "var(--Grey-Muted, #808183)",
@@ -1031,7 +1036,7 @@ const Gn = {
   accent: "var(--rail-orange, #C98A5A)",
   track: "var(--rail-surface-2, #E3E1D7)",
   infoIcon: "var(--color-input-border, #ACACAD)"
-}, Tn = ({ score: t = 4, minScore: r = 0, maxScore: i = 5 }) => {
+}, _n = ({ score: t = 4, minScore: r = 0, maxScore: i = 5 }) => {
   const v = Number(t), S = Number.isFinite(v) ? Math.min(Math.max(v, r), i) : r, d = i > r ? (S - r) / (i - r) * 5 : 0, x = 180 / 5, k = (R) => {
     const b = R * Math.PI / 180;
     return {
@@ -1041,9 +1046,9 @@ const Gn = {
   }, w = (R, b) => {
     const I = k(R), E = k(b), B = R - b > 180 ? 1 : 0;
     return `M ${I.x} ${I.y} A 85 85 0 ${B} 1 ${E.x} ${E.y}`;
-  }, G = 2;
+  }, M = 2;
   return /* @__PURE__ */ e("svg", { width: "100%", viewBox: "0 0 243 130", fill: "none", style: { maxWidth: 243 }, children: Array.from({ length: 5 }, (R, b) => {
-    const I = 180 - b * x - (b > 0 ? G / 2 : 0), E = 180 - (b + 1) * x + (b < 5 - 1 ? G / 2 : 0), B = Math.max(0, Math.min(1, d - b)), _ = w(I, E);
+    const I = 180 - b * x - (b > 0 ? M / 2 : 0), E = 180 - (b + 1) * x + (b < 5 - 1 ? M / 2 : 0), B = Math.max(0, Math.min(1, d - b)), _ = w(I, E);
     return /* @__PURE__ */ n("g", { children: [
       /* @__PURE__ */ e(
         "path",
@@ -1069,10 +1074,10 @@ const Gn = {
       )
     ] }, b);
   }) });
-}, Rn = ({ value: t = 0, maxValue: r = 5 }) => {
+}, An = ({ 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 }, (l, a) => {
-    const f = Math.max(0, Math.min(1, s - a));
+  return /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: r }, (o, a) => {
+    const g = Math.max(0, Math.min(1, s - a));
     return /* @__PURE__ */ e(
       "div",
       {
@@ -1083,11 +1088,11 @@ const Gn = {
           background: O.track,
           overflow: "hidden"
         },
-        children: f > 0 && /* @__PURE__ */ e(
+        children: g > 0 && /* @__PURE__ */ e(
           "div",
           {
             style: {
-              width: `${f * 100}%`,
+              width: `${g * 100}%`,
               height: "100%",
               background: O.strong
             }
@@ -1097,22 +1102,22 @@ const Gn = {
       a
     );
   }) });
-}, _n = {
+}, Ln = {
   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"
-}, An = ({ text: t, children: r }) => {
-  const [i, s] = z(!1), l = $(null), [a, f] = z({ top: 0, left: 0 });
+}, Bn = ({ text: t, children: r }) => {
+  const [i, s] = G(!1), o = $(null), [a, g] = G({ top: 0, left: 0 });
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: l,
+      ref: o,
       style: { position: "relative", display: "inline-flex" },
       onMouseEnter: () => {
-        if (l.current) {
-          const u = l.current.getBoundingClientRect();
-          f({
+        if (o.current) {
+          const u = o.current.getBoundingClientRect();
+          g({
             top: u.top - 8,
             left: u.left + u.width / 2
           });
@@ -1146,7 +1151,7 @@ const Gn = {
       ]
     }
   );
-}, Ln = ({ label: t, value: r = 0, maxValue: i = 5 }) => /* @__PURE__ */ n("div", { style: {
+}, jn = ({ label: t, value: r = 0, maxValue: i = 5 }) => /* @__PURE__ */ n("div", { style: {
   display: "flex",
   flexDirection: "column",
   gap: 8,
@@ -1165,24 +1170,24 @@ const Gn = {
       fontFamily: "var(--font-sans)",
       lineHeight: "normal"
     }, children: t }),
-    /* @__PURE__ */ e(An, { text: _n[t] || t, children: /* @__PURE__ */ e(Ct, { size: 14, color: O.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
+    /* @__PURE__ */ e(Bn, { text: Ln[t] || t, children: /* @__PURE__ */ e(It, { size: 14, color: O.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
   ] }),
-  /* @__PURE__ */ e(Rn, { value: r, maxValue: i })
-] }), Bn = ({
+  /* @__PURE__ */ e(An, { value: r, maxValue: i })
+] }), Nn = ({
   score: t = 4,
   minScore: r = 0,
   maxScore: i = 5,
   predictedScore: s = 4,
-  predictedLabel: l = "Predicted Objective",
+  predictedLabel: o = "Predicted Objective",
   description: a = "",
-  legends: f = [
+  legends: g = [
     { label: "CSAT", value: 3 },
     { label: "Resolution", value: 4 },
     { label: "Process Adherence", value: 5 },
     { label: "Communication", value: 3 }
   ]
 }) => {
-  const h = Number(t), u = Number.isFinite(h) ? Math.min(Math.max(h, r), i) : r, W = u.toFixed(1);
+  const p = Number(t), u = Number.isFinite(p) ? Math.min(Math.max(p, r), i) : r, W = u.toFixed(1);
   return /* @__PURE__ */ n("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -1231,7 +1236,7 @@ const Gn = {
         alignItems: "center",
         display: "flex"
       }, children: [
-        /* @__PURE__ */ e(Tn, { score: t, minScore: r, maxScore: i }),
+        /* @__PURE__ */ e(_n, { score: t, minScore: r, maxScore: i }),
         (() => {
           const d = -(180 - (i > r ? (u - r) / (i - r) : 0) * 180 - 45);
           return /* @__PURE__ */ n(
@@ -1294,8 +1299,8 @@ const Gn = {
           height: 1,
           background: O.absent
         } }),
-        f.map((v, S) => /* @__PURE__ */ e(
-          Ln,
+        g.map((v, S) => /* @__PURE__ */ e(
+          jn,
           {
             label: v.label,
             value: v.value
@@ -1305,13 +1310,13 @@ const Gn = {
       ] })
     ] })
   ] });
-}, Ft = (t) => {
+}, zt = (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;
-}, jn = (t) => {
-  var s, l, a, f, h, u;
+}, $n = (t) => {
+  var s, o, a, g, p, u;
   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;
@@ -1321,14 +1326,14 @@ const Gn = {
     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) ?? ((l = t.user) == null ? void 0 : l.userRole) ?? ((a = t.user) == null ? void 0 : a.user_role) ?? ((f = t.profile) == null ? void 0 : f.role) ?? ((h = t.profile) == null ? void 0 : h.userRole) ?? ((u = t.profile) == null ? void 0 : u.user_role);
+  const i = ((s = t.user) == null ? void 0 : s.role) ?? ((o = t.user) == null ? void 0 : o.userRole) ?? ((a = t.user) == null ? void 0 : a.user_role) ?? ((g = t.profile) == null ? void 0 : g.role) ?? ((p = t.profile) == null ? void 0 : p.userRole) ?? ((u = t.profile) == null ? void 0 : u.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) => {
+}, Dt = (t) => {
   if (!t)
     return "#6B7C93";
-  const r = jn(t);
-  return Ft(r) || t.color || "#6B7C93";
-}, ke = (t) => (t || "").split(" ").map((r) => r[0]).join("").toUpperCase() || "U", Nn = (t) => {
+  const r = $n(t);
+  return zt(r) || t.color || "#6B7C93";
+}, we = (t) => (t || "").split(" ").map((r) => r[0]).join("").toUpperCase() || "U", On = (t) => {
   if (!t || t === "Just now")
     return !0;
   if (/^\d{4}-\d{2}-\d{2}T/.test(t))
@@ -1340,7 +1345,7 @@ const Gn = {
     }
   const r = t.match(/^(\d+)\s*min/);
   return r ? parseInt(r[1], 10) < 15 : !(/\d+\s*h/.test(t) || /\d+\s*day/.test(t));
-}, $n = (t) => {
+}, Pn = (t) => {
   if (!t)
     return "";
   if (!/^\d{4}-\d{2}-\d{2}T/.test(t))
@@ -1349,26 +1354,26 @@ const Gn = {
     const r = /Z$|[+-]\d{2}:\d{2}$/.test(t) ? t : t + "Z", i = new Date(r);
     if (Number.isNaN(i.getTime()))
       return t;
-    const l = (/* @__PURE__ */ new Date()).getTime() - i.getTime(), a = Math.floor(l / 6e4), f = Math.floor(l / 36e5);
+    const o = (/* @__PURE__ */ new Date()).getTime() - i.getTime(), a = Math.floor(o / 6e4), g = Math.floor(o / 36e5);
     if (a < 1)
       return "Just now";
     if (a < 60)
       return `${a} min`;
-    if (f < 24)
-      return `${f} h`;
-    const h = Math.floor(f / 24);
-    return h === 1 ? "1 day" : `${h} days`;
+    if (g < 24)
+      return `${g} h`;
+    const p = Math.floor(g / 24);
+    return p === 1 ? "1 day" : `${p} days`;
   } catch {
     return t;
   }
-}, It = ({ name: t, initials: r, color: i, avatar: s, size: l = 36 }) => s ? /* @__PURE__ */ e(
+}, Gt = ({ name: t, initials: r, color: i, avatar: s, size: o = 36 }) => s ? /* @__PURE__ */ e(
   "img",
   {
     src: s,
     alt: t,
     style: {
-      width: l,
-      height: l,
+      width: o,
+      height: o,
       borderRadius: "50%",
       objectFit: "cover",
       flexShrink: 0
@@ -1378,57 +1383,57 @@ const Gn = {
   "div",
   {
     style: {
-      width: l,
-      height: l,
+      width: o,
+      height: o,
       borderRadius: "50%",
       background: i || "#6B7C93",
       color: "#FFF",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      fontSize: l <= 32 ? "10px" : "11px",
+      fontSize: o <= 32 ? "10px" : "11px",
       fontWeight: 650,
       flexShrink: 0,
       fontFamily: "var(--default-font-family)",
       letterSpacing: "0.02em"
     },
     title: t,
-    children: r || ke(t)
+    children: r || we(t)
   }
-), On = ({
+), Yn = ({
   comment: t,
   isReply: r = !1,
   isConsecutive: i = !1,
   onReply: s,
-  onSendReply: l,
+  onSendReply: o,
   onEdit: a,
-  onDelete: f,
-  onMenuClick: h,
+  onDelete: g,
+  onMenuClick: p,
   showReply: u = !0
 }) => {
-  var he, pe;
-  const [W, v] = z(!1), [S, d] = z(!1), [x, k] = z(!1), [w, G] = z(""), [R, b] = z(!1), [I, E] = z(""), [B, _] = z(!1), P = $(null), m = $(null), y = $(null), c = t.author || {}, D = c.name || t.author_name || "Unknown", Z = c.initials || ke(D), Q = c.role || t.author_role, J = c.color || Ft(Q) || "#6B7C93", X = c.avatar || t.avatar, oe = t.timestamp || t.created_at, g = $n(oe), A = Nn(oe), U = !!(t.isEdited || t.is_edited || t.edited), we = Array.isArray(t.content) ? t.content : [t.content || t.text || ""];
+  var pe, ue;
+  const [W, v] = G(!1), [S, d] = G(!1), [x, k] = G(!1), [w, M] = G(""), [R, b] = G(!1), [I, E] = G(""), [B, _] = G(!1), P = $(null), m = $(null), y = $(null), c = t.author || {}, z = c.name || t.author_name || "Unknown", Z = c.initials || we(z), Q = c.role || t.author_role, J = c.color || zt(Q) || "#6B7C93", X = c.avatar || t.avatar, le = t.timestamp || t.created_at, h = Pn(le), A = On(le), U = !!(t.isEdited || t.is_edited || t.edited), Ce = Array.isArray(t.content) ? t.content : [t.content || t.text || ""];
   return ae.useEffect(() => {
     if (!S)
       return;
-    const o = (K) => {
+    const l = (K) => {
       P.current && !P.current.contains(K.target) && d(!1);
     };
-    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+    return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
   }, [S]), ae.useEffect(() => {
-    const o = m.current;
-    if (!o)
+    const l = m.current;
+    if (!l)
       return;
-    o.style.height = "auto";
+    l.style.height = "auto";
     const K = 140;
-    o.style.height = Math.min(o.scrollHeight, K) + "px", o.style.overflowY = o.scrollHeight > K ? "auto" : "hidden";
+    l.style.height = Math.min(l.scrollHeight, K) + "px", l.style.overflowY = l.scrollHeight > K ? "auto" : "hidden";
   }, [w, x]), ae.useEffect(() => {
-    const o = y.current;
-    if (!o)
+    const l = y.current;
+    if (!l)
       return;
-    o.style.height = "auto";
+    l.style.height = "auto";
     const K = 140;
-    o.style.height = Math.min(o.scrollHeight, K) + "px", o.style.overflowY = o.scrollHeight > K ? "auto" : "hidden";
+    l.style.height = Math.min(l.scrollHeight, K) + "px", l.style.overflowY = l.scrollHeight > K ? "auto" : "hidden";
   }, [I, R]), /* @__PURE__ */ n(
     "div",
     {
@@ -1444,9 +1449,9 @@ const Gn = {
       },
       children: [
         i ? /* @__PURE__ */ e("div", { style: { width: 36, flexShrink: 0 } }) : /* @__PURE__ */ e(
-          It,
+          Gt,
           {
-            name: D,
+            name: z,
             initials: Z,
             color: J,
             avatar: X
@@ -1474,7 +1479,7 @@ const Gn = {
                         lineHeight: "150%",
                         fontFamily: "var(--default-font-family)"
                       },
-                      children: D
+                      children: z
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -1487,7 +1492,7 @@ const Gn = {
                         lineHeight: "150%",
                         fontFamily: "var(--default-font-family)"
                       },
-                      children: g
+                      children: h
                     }
                   ),
                   U && /* @__PURE__ */ e(
@@ -1509,7 +1514,7 @@ const Gn = {
                     "button",
                     {
                       type: "button",
-                      onClick: () => d((o) => !o),
+                      onClick: () => d((l) => !l),
                       style: {
                         padding: 2,
                         border: "none",
@@ -1523,7 +1528,7 @@ const Gn = {
                         transition: "opacity 0.15s",
                         flexShrink: 0
                       },
-                      children: /* @__PURE__ */ e(pn, { size: 24, color: "var(--Grey-Muted, #808183)" })
+                      children: /* @__PURE__ */ e(vn, { size: 24, color: "var(--Grey-Muted, #808183)" })
                     }
                   ),
                   S && /* @__PURE__ */ n(
@@ -1568,11 +1573,11 @@ const Gn = {
                               lineHeight: "150%",
                               textAlign: "left"
                             },
-                            onMouseEnter: (o) => {
-                              o.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
+                            onMouseEnter: (l) => {
+                              l.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
                             },
-                            onMouseLeave: (o) => {
-                              o.currentTarget.style.background = "transparent";
+                            onMouseLeave: (l) => {
+                              l.currentTarget.style.background = "transparent";
                             },
                             children: "Reply"
                           }
@@ -1586,9 +1591,9 @@ const Gn = {
                               if (!A)
                                 return;
                               d(!1);
-                              const o = Array.isArray(t.content) ? t.content.join(`
+                              const l = Array.isArray(t.content) ? t.content.join(`
 `) : t.content || t.text || "";
-                              E(o), b(!0), k(!1);
+                              E(l), b(!0), k(!1);
                             },
                             style: {
                               display: "flex",
@@ -1606,16 +1611,16 @@ const Gn = {
                               textAlign: "left",
                               opacity: A ? 1 : 0.5
                             },
-                            onMouseEnter: (o) => {
-                              A && (o.currentTarget.style.background = "var(--surface-hover, #F3F7F7)");
+                            onMouseEnter: (l) => {
+                              A && (l.currentTarget.style.background = "var(--surface-hover, #F3F7F7)");
                             },
-                            onMouseLeave: (o) => {
-                              o.currentTarget.style.background = "transparent";
+                            onMouseLeave: (l) => {
+                              l.currentTarget.style.background = "transparent";
                             },
                             children: "Edit"
                           }
                         ),
-                        f && /* @__PURE__ */ e(
+                        g && /* @__PURE__ */ e(
                           "button",
                           {
                             type: "button",
@@ -1637,11 +1642,11 @@ const Gn = {
                               lineHeight: "150%",
                               textAlign: "left"
                             },
-                            onMouseEnter: (o) => {
-                              o.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
+                            onMouseEnter: (l) => {
+                              l.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
                             },
-                            onMouseLeave: (o) => {
-                              o.currentTarget.style.background = "transparent";
+                            onMouseLeave: (l) => {
+                              l.currentTarget.style.background = "transparent";
                             },
                             children: "Delete"
                           }
@@ -1695,7 +1700,7 @@ const Gn = {
                           children: [
                             "“",
                             " ",
-                            ((he = t.author) == null ? void 0 : he.name) || "Unknown"
+                            ((pe = t.author) == null ? void 0 : pe.name) || "Unknown"
                           ]
                         }
                       ),
@@ -1713,7 +1718,7 @@ const Gn = {
                             cursor: "pointer",
                             padding: 0
                           },
-                          children: /* @__PURE__ */ e(st, { size: 20, color: "var(--Grey-Muted, #808183)" })
+                          children: /* @__PURE__ */ e(ot, { size: 20, color: "var(--Grey-Muted, #808183)" })
                         }
                       )
                     ]
@@ -1734,14 +1739,14 @@ const Gn = {
                         {
                           ref: y,
                           value: I,
-                          onChange: (o) => E(o.target.value),
-                          onKeyDown: (o) => {
-                            if (o.key === "Enter") {
-                              if (o.metaKey || o.ctrlKey || o.shiftKey)
+                          onChange: (l) => E(l.target.value),
+                          onKeyDown: (l) => {
+                            if (l.key === "Enter") {
+                              if (l.metaKey || l.ctrlKey || l.shiftKey)
                                 return;
-                              o.preventDefault(), I.trim() && (a == null || a({ ...t, content: I.trim(), isEdited: !0 }), b(!1));
+                              l.preventDefault(), I.trim() && (a == null || a({ ...t, content: I.trim(), isEdited: !0 }), b(!1));
                             }
-                            o.key === "Escape" && b(!1);
+                            l.key === "Escape" && b(!1);
                           },
                           autoFocus: !0,
                           rows: 1,
@@ -1799,7 +1804,7 @@ const Gn = {
             }
           ) : (
             /* Message bubbles — stacked, gap: 4px, fit content */
-            /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start" }, children: we.map((o, K) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start" }, children: Ce.map((l, K) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -1813,7 +1818,7 @@ const Gn = {
                   borderRadius: 8,
                   wordBreak: "break-word"
                 },
-                children: o
+                children: l
               },
               K
             )) })
@@ -1836,7 +1841,7 @@ const Gn = {
                   {
                     type: "button",
                     onClick: () => {
-                      _(!1), f == null || f(t);
+                      _(!1), g == null || g(t);
                     },
                     style: {
                       background: "var(--grey-light, #e9e8e8a1)",
@@ -1850,11 +1855,11 @@ const Gn = {
                       borderRadius: 6,
                       transition: "background 0.15s"
                     },
-                    onMouseEnter: (o) => {
-                      o.currentTarget.style.background = "var(--Grey-absent, #D9D9D9)";
+                    onMouseEnter: (l) => {
+                      l.currentTarget.style.background = "var(--Grey-absent, #D9D9D9)";
                     },
-                    onMouseLeave: (o) => {
-                      o.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
+                    onMouseLeave: (l) => {
+                      l.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
                     },
                     children: "Delete"
                   }
@@ -1876,11 +1881,11 @@ const Gn = {
                       borderRadius: 6,
                       transition: "background 0.15s"
                     },
-                    onMouseEnter: (o) => {
-                      o.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
+                    onMouseEnter: (l) => {
+                      l.currentTarget.style.background = "var(--grey-light, #e9e8e8a1)";
                     },
-                    onMouseLeave: (o) => {
-                      o.currentTarget.style.background = "none";
+                    onMouseLeave: (l) => {
+                      l.currentTarget.style.background = "none";
                     },
                     children: "Cancel"
                   }
@@ -1911,7 +1916,7 @@ const Gn = {
                 transition: "color 0.15s"
               },
               children: [
-                /* @__PURE__ */ e(un, { size: 20, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                /* @__PURE__ */ e(xn, { size: 20, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                 "Reply"
               ]
             }
@@ -1959,7 +1964,7 @@ const Gn = {
                             children: [
                               "“",
                               " ",
-                              ((pe = t.author) == null ? void 0 : pe.name) || "Unknown"
+                              ((ue = t.author) == null ? void 0 : ue.name) || "Unknown"
                             ]
                           }
                         ),
@@ -1968,7 +1973,7 @@ const Gn = {
                           {
                             type: "button",
                             onClick: () => {
-                              G(""), k(!1);
+                              M(""), k(!1);
                             },
                             style: {
                               display: "flex",
@@ -1979,7 +1984,7 @@ const Gn = {
                               cursor: "pointer",
                               padding: 0
                             },
-                            children: /* @__PURE__ */ e(st, { size: 20, color: "var(--Grey-Muted, #808183)" })
+                            children: /* @__PURE__ */ e(ot, { size: 20, color: "var(--Grey-Muted, #808183)" })
                           }
                         )
                       ]
@@ -2033,14 +2038,14 @@ const Gn = {
                         {
                           ref: m,
                           value: w,
-                          onChange: (o) => G(o.target.value),
-                          onKeyDown: (o) => {
-                            if (o.key === "Enter") {
-                              if (o.metaKey || o.ctrlKey || o.shiftKey)
+                          onChange: (l) => M(l.target.value),
+                          onKeyDown: (l) => {
+                            if (l.key === "Enter") {
+                              if (l.metaKey || l.ctrlKey || l.shiftKey)
                                 return;
-                              o.preventDefault(), w.trim() && (l == null || l({ content: w.trim(), parentId: t.id }), G(""), k(!1));
+                              l.preventDefault(), w.trim() && (o == null || o({ content: w.trim(), parentId: t.id }), M(""), k(!1));
                             }
-                            o.key === "Escape" && (G(""), k(!1));
+                            l.key === "Escape" && (M(""), k(!1));
                           },
                           autoFocus: !0,
                           placeholder: "Add a reply",
@@ -2069,7 +2074,7 @@ const Gn = {
                         {
                           type: "button",
                           onClick: () => {
-                            w.trim() && (l == null || l({ content: w.trim(), parentId: t.id }), G(""), k(!1));
+                            w.trim() && (o == null || o({ content: w.trim(), parentId: t.id }), M(""), k(!1));
                           },
                           disabled: !w.trim(),
                           style: {
@@ -2102,29 +2107,29 @@ const Gn = {
       ]
     }
   );
-}, Pn = ({ currentUser: t, onSubmit: r }) => {
-  const [i, s] = z(""), [l, a] = z(!1), f = $(null);
-  Te(() => {
-    const d = f.current;
+}, Kn = ({ currentUser: t, onSubmit: r }) => {
+  const [i, s] = G(""), [o, a] = G(!1), g = $(null);
+  _e(() => {
+    const d = g.current;
     if (!d)
       return;
     d.style.height = "auto";
     const x = 140;
     d.style.height = Math.min(d.scrollHeight, x) + "px", d.style.overflowY = d.scrollHeight > x ? "auto" : "hidden";
   }, [i]);
-  const h = () => {
+  const p = () => {
     const d = i.trim();
     d && (r == null || r(d), s(""));
   }, u = (d) => {
     if (d.key === "Enter") {
       if (d.metaKey || d.ctrlKey || d.shiftKey)
         return;
-      d.preventDefault(), h();
+      d.preventDefault(), p();
     }
-  }, W = (t == null ? void 0 : t.initials) || ke(t == null ? void 0 : t.name), v = Wt(t), S = t == null ? void 0 : t.avatar;
+  }, W = (t == null ? void 0 : t.initials) || we(t == null ? void 0 : t.name), v = Dt(t), S = t == null ? void 0 : t.avatar;
   return /* @__PURE__ */ n("div", { style: { display: "flex", gap: 16, alignItems: "flex-start" }, children: [
     /* @__PURE__ */ e(
-      It,
+      Gt,
       {
         name: t == null ? void 0 : t.name,
         initials: W,
@@ -2144,7 +2149,7 @@ const Gn = {
           alignItems: "flex-start",
           gap: 24,
           borderRadius: 8,
-          border: l ? "1px solid var(--Grey-Strong, #2E3236)" : "1px solid var(--Grey-absent, #D9D9D9)",
+          border: o ? "1px solid var(--Grey-Strong, #2E3236)" : "1px solid var(--Grey-absent, #D9D9D9)",
           background: "var(--Grey-White, #FFF)",
           transition: "border-color 0.15s"
         },
@@ -2161,7 +2166,7 @@ const Gn = {
               /* @__PURE__ */ e(
                 "textarea",
                 {
-                  ref: f,
+                  ref: g,
                   value: i,
                   onChange: (d) => s(d.target.value),
                   onFocus: () => a(!0),
@@ -2191,7 +2196,7 @@ const Gn = {
                 "button",
                 {
                   type: "button",
-                  onClick: h,
+                  onClick: p,
                   disabled: !i.trim(),
                   style: {
                     display: "flex",
@@ -2219,52 +2224,52 @@ const Gn = {
       }
     )
   ] });
-}, Dt = ({ comment: t, depth: r = 0, isConsecutive: i = !1, onReply: s, onSendReply: l, onEdit: a, onDelete: f, onMenuClick: h }) => {
+}, Mt = ({ comment: t, depth: r = 0, isConsecutive: i = !1, onReply: s, onSendReply: o, onEdit: a, onDelete: g, onMenuClick: p }) => {
   const u = t.replies && t.replies.length > 0, W = !u;
   return /* @__PURE__ */ n(ae.Fragment, { children: [
     /* @__PURE__ */ e("div", { style: { paddingLeft: r > 0 ? Math.min(r * 32, 128) : 0 }, children: /* @__PURE__ */ e(
-      On,
+      Yn,
       {
         comment: t,
         isReply: r > 0,
         isConsecutive: i,
         onReply: s,
-        onSendReply: l,
+        onSendReply: o,
         onEdit: a,
-        onDelete: f,
-        onMenuClick: h,
+        onDelete: g,
+        onMenuClick: p,
         showReply: W
       }
     ) }),
     u && t.replies.map((v) => /* @__PURE__ */ e(
-      Dt,
+      Mt,
       {
         comment: v,
         depth: r + 1,
         onReply: s,
-        onSendReply: l,
+        onSendReply: o,
         onEdit: a,
-        onDelete: f,
-        onMenuClick: h
+        onDelete: g,
+        onMenuClick: p
       },
       v.id
     ))
   ] });
-}, Yn = ({
+}, Vn = ({
   comments: t = [],
   totalComments: r,
   children: i,
   onSendComment: s,
-  onReply: l,
+  onReply: o,
   onSendReply: a,
-  onEdit: f,
-  onDelete: h,
+  onEdit: g,
+  onDelete: p,
   onMenuClick: u,
   onMarkResolved: W,
   currentUser: v,
   isResolved: S = !1
 }) => {
-  const [d, x] = z([]), [k, w] = z(!1), G = Me(() => {
+  const [d, x] = G([]), [k, w] = G(!1), M = He(() => {
     const m = new Set(t.map((c) => c.id)), y = d.filter((c) => !m.has(c.id));
     return [...t, ...y];
   }, [t, d]);
@@ -2272,10 +2277,10 @@ const Gn = {
     const m = new Set(t.map((y) => y.id));
     x((y) => y.filter((c) => !m.has(c.id)));
   }, [t]);
-  const R = Me(() => {
+  const R = He(() => {
     if (!v)
       return { name: "You", initials: "YO", color: "#6B7C93" };
-    const m = v.name || "You", y = v.initials || ke(m), c = Wt(v);
+    const m = v.name || "You", y = v.initials || we(m), c = Dt(v);
     return { ...v, name: m, initials: y, color: c };
   }, [v]), b = async ({ content: m, parentId: y }) => {
     if (a) {
@@ -2294,7 +2299,7 @@ const Gn = {
         parentId: y,
         isOptimistic: !0
       };
-      x((D) => [...D, c]);
+      x((z) => [...z, c]);
     }
   }, I = async (m) => {
     if (s) {
@@ -2317,20 +2322,20 @@ const Gn = {
   }, E = (m) => {
     x(
       (y) => y.map((c) => c.id === m.id ? { ...c, content: m.content, isEdited: !0 } : c)
-    ), f == null || f(m);
+    ), g == null || g(m);
   }, B = (m) => {
-    x((y) => y.filter((c) => c.id !== m.id)), h == null || h(m);
-  }, _ = Me(() => {
+    x((y) => y.filter((c) => c.id !== m.id)), p == null || p(m);
+  }, _ = He(() => {
     const m = {};
-    G.forEach((c) => {
+    M.forEach((c) => {
       c.parentId && (m[c.parentId] || (m[c.parentId] = []), m[c.parentId].push(c));
     });
     const y = (c) => ({
       ...c,
       replies: (m[c.id] || []).map(y)
     });
-    return G.filter((c) => !c.parentId).map(y);
-  }, [G]), P = r ?? G.length;
+    return M.filter((c) => !c.parentId).map(y);
+  }, [M]), P = r ?? M.length;
   return /* @__PURE__ */ n(
     "div",
     {
@@ -2355,7 +2360,7 @@ const Gn = {
               alignSelf: "stretch"
             },
             children: [
-              /* @__PURE__ */ e(at, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(lt, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 1.5 }),
               /* @__PURE__ */ e(
                 "span",
                 {
@@ -2407,7 +2412,7 @@ const Gn = {
                             justifyContent: "center",
                             flexShrink: 0
                           },
-                          children: /* @__PURE__ */ e(at, { style: { width: 20, height: 20, flexShrink: 0 }, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 })
+                          children: /* @__PURE__ */ e(lt, { style: { width: 20, height: 20, flexShrink: 0 }, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 })
                         }
                       ),
                       /* @__PURE__ */ e(
@@ -2454,7 +2459,7 @@ const Gn = {
                             flexShrink: 0
                           },
                           children: [
-                            /* @__PURE__ */ e(gn, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 2 }),
+                            /* @__PURE__ */ e(yn, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 2 }),
                             /* @__PURE__ */ e(
                               "span",
                               {
@@ -2493,7 +2498,7 @@ const Gn = {
                             flexShrink: 0
                           },
                           children: [
-                            /* @__PURE__ */ e(hn, { 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"
                           ]
                         }
@@ -2501,7 +2506,7 @@ const Gn = {
                     ]
                   }
                 ),
-                G.length > 0 && /* @__PURE__ */ e(
+                M.length > 0 && /* @__PURE__ */ e(
                   "div",
                   {
                     style: {
@@ -2510,18 +2515,18 @@ const Gn = {
                       gap: 0,
                       marginBottom: 24,
                       maxHeight: 600,
-                      overflowY: G.length > 6 ? "auto" : "visible"
+                      overflowY: M.length > 6 ? "auto" : "visible"
                     },
                     children: _.map((m, y) => {
                       var J, X;
-                      const c = y > 0 ? _[y - 1] : null, D = ((J = c == null ? void 0 : c.author) == null ? void 0 : J.name) || (c == null ? void 0 : c.author_name), Z = ((X = m.author) == null ? void 0 : X.name) || m.author_name, Q = c && D === Z && (!c.replies || c.replies.length === 0);
+                      const c = y > 0 ? _[y - 1] : null, z = ((J = c == null ? void 0 : c.author) == null ? void 0 : J.name) || (c == null ? void 0 : c.author_name), Z = ((X = m.author) == null ? void 0 : X.name) || m.author_name, Q = c && z === Z && (!c.replies || c.replies.length === 0);
                       return /* @__PURE__ */ e(
-                        Dt,
+                        Mt,
                         {
                           comment: m,
                           depth: 0,
                           isConsecutive: !!Q,
-                          onReply: l,
+                          onReply: o,
                           onSendReply: b,
                           onEdit: E,
                           onDelete: B,
@@ -2532,7 +2537,7 @@ const Gn = {
                     })
                   }
                 ),
-                G.length > 0 && /* @__PURE__ */ n(
+                M.length > 0 && /* @__PURE__ */ n(
                   "div",
                   {
                     style: {
@@ -2543,7 +2548,7 @@ const Gn = {
                       marginLeft: 48
                     },
                     children: [
-                      /* @__PURE__ */ e(Ct, { size: 16, color: "var(--Grey-Muted, #808183)" }),
+                      /* @__PURE__ */ e(It, { size: 16, color: "var(--Grey-Muted, #808183)" }),
                       /* @__PURE__ */ e(
                         "span",
                         {
@@ -2598,7 +2603,7 @@ const Gn = {
                     ]
                   }
                 ),
-                /* @__PURE__ */ e(Pn, { currentUser: R, onSubmit: I })
+                /* @__PURE__ */ e(Kn, { currentUser: R, onSubmit: I })
               ] }),
               /* @__PURE__ */ e(
                 "div",
@@ -2616,8 +2621,8 @@ const Gn = {
       ]
     }
   );
-}, mt = ({ children: t, size: r = 28, onClick: i, title: s }) => {
-  const [l, a] = z(!1);
+}, vt = ({ children: t, size: r = 28, onClick: i, title: s }) => {
+  const [o, a] = G(!1);
   return /* @__PURE__ */ e(
     "div",
     {
@@ -2632,7 +2637,7 @@ const Gn = {
         width: r,
         height: r,
         borderRadius: 9999,
-        background: l ? "var(--surface-hover, #F3F7F7)" : "transparent",
+        background: o ? "var(--surface-hover, #F3F7F7)" : "transparent",
         cursor: "pointer",
         flexShrink: 0,
         transition: "background 0.15s"
@@ -2640,15 +2645,15 @@ const Gn = {
       children: t
     }
   );
-}, Kn = (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")}`;
-}, Vn = ({ item: t, isLast: r, onPlayEvidence: i, onShowInTranscript: s, timelinePlaying: l, currentTimeSeconds: a }) => {
+}, Zn = ({ item: t, isLast: r, onPlayEvidence: i, onShowInTranscript: s, timelinePlaying: o, currentTimeSeconds: a }) => {
   var d;
-  const f = (d = t.signal_refs) == null ? void 0 : d.map((x) => {
+  const g = (d = t.signal_refs) == null ? void 0 : d.map((x) => {
     const k = x.display_name || x.signal_key || "", w = x.confidence != null ? ` (${Math.round(x.confidence * 100)}%)` : "";
     return k + w;
-  }).join(", "), h = t.start_ms ?? t.startMs, u = t.end_ms ?? t.endMs, W = h != null, v = (a ?? 0) * 1e3, S = l && W && v >= h && v <= (u ?? h + 5e3);
+  }).join(", "), p = t.start_ms ?? t.startMs, u = t.end_ms ?? t.endMs, W = p != null, v = (a ?? 0) * 1e3, S = o && W && v >= p && v <= (u ?? p + 5e3);
   return /* @__PURE__ */ n(
     "div",
     {
@@ -2682,7 +2687,7 @@ const Gn = {
               gap: 8
             },
             children: [
-              f && /* @__PURE__ */ e(
+              g && /* @__PURE__ */ e(
                 "span",
                 {
                   style: {
@@ -2694,7 +2699,7 @@ const Gn = {
                     flex: 1,
                     minWidth: 0
                   },
-                  children: f
+                  children: g
                 }
               ),
               W && /* @__PURE__ */ n(
@@ -2708,23 +2713,23 @@ const Gn = {
                   },
                   children: [
                     /* @__PURE__ */ e(
-                      mt,
+                      vt,
                       {
                         size: 28,
                         title: S ? "Pause" : "Play evidence",
                         onClick: () => i == null ? void 0 : i({
-                          start_ms: h,
+                          start_ms: p,
                           end_ms: u
                         }),
                         children: S ? /* @__PURE__ */ e(
-                          kt,
+                          Ft,
                           {
                             size: 17,
                             color: "var(--Grey-Strong, #2E3236)",
                             strokeWidth: 1
                           }
                         ) : /* @__PURE__ */ e(
-                          wt,
+                          Wt,
                           {
                             size: 17,
                             color: "var(--Grey-Muted, #808183)",
@@ -2734,12 +2739,12 @@ const Gn = {
                       }
                     ),
                     /* @__PURE__ */ e(
-                      mt,
+                      vt,
                       {
                         size: 28,
                         title: "Show in transcript",
-                        onClick: () => s == null ? void 0 : s(h),
-                        children: /* @__PURE__ */ e(St, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                        onClick: () => s == null ? void 0 : s(p),
+                        children: /* @__PURE__ */ e(Ct, { size: 16, color: "#808183", strokeWidth: 1.5 })
                       }
                     ),
                     /* @__PURE__ */ e(
@@ -2752,7 +2757,7 @@ const Gn = {
                           lineHeight: 1.2,
                           whiteSpace: "nowrap"
                         },
-                        children: Kn(h)
+                        children: qn(p)
                       }
                     )
                   ]
@@ -2764,16 +2769,16 @@ const Gn = {
       ]
     }
   );
-}, qn = ({
+}, Qn = ({
   items: t = [],
   guidanceCount: r,
   loading: i = !1,
   onPlayEvidence: s,
-  onShowInTranscript: l,
+  onShowInTranscript: o,
   timelinePlaying: a = !1,
-  currentTimeSeconds: f = 0
+  currentTimeSeconds: g = 0
 }) => {
-  const h = r ?? t.length;
+  const p = r ?? t.length;
   return /* @__PURE__ */ n(
     "div",
     {
@@ -2809,7 +2814,7 @@ const Gn = {
                     flexShrink: 0
                   },
                   children: /* @__PURE__ */ e(
-                    vt,
+                    xt,
                     {
                       style: { width: 20, height: 20, flexShrink: 0 },
                       color: "var(--Grey-Strong, #2E3236)",
@@ -2841,9 +2846,9 @@ const Gn = {
                     marginLeft: "auto"
                   },
                   children: [
-                    h,
+                    p,
                     " Item",
-                    h !== 1 ? "s" : ""
+                    p !== 1 ? "s" : ""
                   ]
                 }
               )
@@ -2851,14 +2856,14 @@ const Gn = {
           }
         ),
         t.map((u, W) => /* @__PURE__ */ e(
-          Vn,
+          Zn,
           {
             item: u,
             isLast: W === t.length - 1,
             onPlayEvidence: s,
-            onShowInTranscript: l,
+            onShowInTranscript: o,
             timelinePlaying: a,
-            currentTimeSeconds: f
+            currentTimeSeconds: g
           },
           W
         ))
@@ -2866,16 +2871,16 @@ const Gn = {
     }
   );
 }, re = ({ text: t, children: r }) => {
-  const [i, s] = z(!1), l = $(null), [a, f] = z({ top: 0, left: 0 });
+  const [i, s] = G(!1), o = $(null), [a, g] = G({ top: 0, left: 0 });
   return t ? /* @__PURE__ */ n(
     "div",
     {
-      ref: l,
+      ref: o,
       style: { position: "relative", display: "inline-flex" },
       onMouseEnter: () => {
-        if (l.current) {
-          const u = l.current.getBoundingClientRect();
-          f({
+        if (o.current) {
+          const u = o.current.getBoundingClientRect();
+          g({
             top: u.bottom + 6,
             left: u.left + u.width / 2
           });
@@ -2908,24 +2913,24 @@ const Gn = {
       ]
     }
   ) : r;
-}, Zn = [
+}, Jn = [
   { key: "overview", label: "Overview" },
   { key: "coaching", label: "Coaching Summary" },
   { key: "signals", label: "Signals & Recording" },
   { key: "comments", label: "Feedback" }
-], ni = ({
+], li = ({
   title: t = "Wheel Stud Replacement Enquiry",
   onBack: r,
   // Data props — all optional with defaults for demo
   data: i,
   coachingData: s,
-  coachingLoading: l = !1,
+  coachingLoading: o = !1,
   audioUrl: a,
   // Audio/playback props — pass these when the host app manages audio externally
   // (like InteractionDetailPanel does). If omitted, UpdatedInteractionRecording
   // manages its own audio element internally.
-  audioRef: f,
-  currentTimeSeconds: h,
+  audioRef: g,
+  currentTimeSeconds: p,
   timelinePlaying: u,
   playbackRate: W,
   timelineSegments: v,
@@ -2935,7 +2940,7 @@ const Gn = {
   onSeekForward: k,
   onSetPlaybackRate: w,
   // Speaker names
-  agentName: G,
+  agentName: M,
   agentFullName: R,
   customerName: b,
   customerFullName: I,
@@ -2949,24 +2954,24 @@ const Gn = {
   onPlayEvidence: y,
   onHighlightTurns: c,
   // Context props — pass from host app to override block-derived defaults
-  callPurpose: D,
+  callPurpose: z,
   classification: Z,
   outcomeQuality: Q,
   // Context "More Details" expandable section
   resolutionOutcome: J,
   customerIntent: X,
-  interactionId: oe,
-  moreDetails: g,
+  interactionId: le,
+  moreDetails: h,
   // Compass score props
   compassScore: A,
   // gauge meter value — compass_score, range 0.5-5
   compassMaxScore: U = 5,
-  predictedCsat: we,
+  predictedCsat: Ce,
   // predicted objective number (e.g. compass_score) — shown as "03" top-right
-  predictedLabel: he = "Predicted Objective",
-  compassLegends: pe,
-  // Customer session dropdown
-  customerSessions: o,
+  predictedLabel: pe = "Predicted Objective",
+  compassLegends: ue,
+  // Customer session history drawer
+  customerSessions: l,
   customerSessionCount: K,
   onSessionClick: Ae,
   onViewAllSessions: Le,
@@ -2975,131 +2980,131 @@ const Gn = {
   prevSessionDisabled: ee = !1,
   nextSessionDesc: je,
   nextSessionDisabled: te = !1,
-  onPreviousSession: ue,
-  onNextSession: ye,
+  onPreviousSession: ye,
+  onNextSession: me,
   // Comments
   comments: Ne = [],
-  guidance: zt = [],
+  guidance: Et = [],
   currentUser: j,
-  onSendComment: Gt,
-  onSendReply: Mt,
-  onReply: Et,
-  onEdit: Ht,
-  onEditInteraction: Tt,
-  onDelete: Rt,
-  onMenuClick: _t,
-  onMarkResolved: At,
-  commentsResolved: Lt
+  onSendComment: Ht,
+  onSendReply: Tt,
+  onReply: Rt,
+  onEdit: _t,
+  onEditInteraction: At,
+  onDelete: Lt,
+  onMenuClick: Bt,
+  onMarkResolved: jt,
+  commentsResolved: Nt
 }) => {
-  var ot;
-  const [Ce, me] = z("overview"), [Bt, $e] = z(/* @__PURE__ */ new Set()), [Oe, Fe] = z(!1), [Pe, Ye] = z(null), [Ke, Ve] = z(!1), [qe, jt] = z(0), [Ze, Nt] = z(!1), ne = $(null), ve = $(null), We = $(null), se = $(null), Ie = $(null), $t = { overview: ve, coaching: We, signals: se, comments: Ie }, de = $(null), De = $(!1);
-  Te(() => {
-    const p = de.current;
-    if (!p)
+  var it;
+  const [Fe, ve] = G("overview"), [$t, $e] = G(/* @__PURE__ */ new Set()), [Ot, se] = G(!1), [Oe, Pe] = G(null), [Ye, Ke] = G(!1), [Ve, Pt] = G(0), [qe, Yt] = G(!1), ne = $(null), xe = $(null), We = $(null), de = $(null), Ie = $(null), Kt = { overview: xe, coaching: We, signals: de, comments: Ie }, ce = $(null), ze = $(!1);
+  _e(() => {
+    const f = ce.current;
+    if (!f)
       return;
-    const M = ["overview", "coaching", "signals", "comments"], H = [ve, We, se, Ie], T = ((Y) => {
+    const D = ["overview", "coaching", "signals", "comments"], H = [xe, We, de, Ie], T = ((Y) => {
       let ie = Y.parentElement;
       for (; ie; ) {
-        const { overflow: Se, overflowY: le } = window.getComputedStyle(ie);
-        if (/(auto|scroll)/.test(Se + le))
+        const { overflow: ke, overflowY: oe } = window.getComputedStyle(ie);
+        if (/(auto|scroll)/.test(ke + oe))
           return ie;
         ie = ie.parentElement;
       }
       return null;
-    })(p), q = () => {
-      var Se;
-      if (De.current)
+    })(f), q = () => {
+      var ke;
+      if (ze.current)
         return;
-      let Y = M[0];
-      for (let le = H.length - 1; le >= 0; le--) {
-        const lt = H[le].current;
-        if (!lt)
+      let Y = D[0];
+      for (let oe = H.length - 1; oe >= 0; oe--) {
+        const rt = H[oe].current;
+        if (!rt)
           continue;
-        if (lt.getBoundingClientRect().top <= 150) {
-          Y = M[le];
+        if (rt.getBoundingClientRect().top <= 150) {
+          Y = D[oe];
           break;
         }
       }
-      me(Y);
-      const ie = ((Se = ve.current) == null ? void 0 : Se.getBoundingClientRect().top) ?? Number.POSITIVE_INFINITY;
-      Nt(ie <= 150);
+      ve(Y);
+      const ie = ((ke = xe.current) == null ? void 0 : ke.getBoundingClientRect().top) ?? Number.POSITIVE_INFINITY;
+      Yt(ie <= 150);
     };
-    return p.addEventListener("scroll", q, { passive: !0 }), T && T !== p && T.addEventListener("scroll", q, { passive: !0 }), window.addEventListener("scroll", q, { passive: !0, capture: !0 }), q(), () => {
-      p.removeEventListener("scroll", q), T && T !== p && T.removeEventListener("scroll", q), window.removeEventListener("scroll", q, { capture: !0 });
+    return f.addEventListener("scroll", q, { passive: !0 }), T && T !== f && T.addEventListener("scroll", q, { passive: !0 }), window.addEventListener("scroll", q, { passive: !0, capture: !0 }), q(), () => {
+      f.removeEventListener("scroll", q), T && T !== f && T.removeEventListener("scroll", q), window.removeEventListener("scroll", q, { capture: !0 });
     };
   }, []);
-  const Qe = $(null), Ot = (p) => {
+  const Ze = $(null), Vt = (f) => {
     var H;
-    me(p), De.current = !0, Qe.current = p;
-    const M = (H = $t[p]) == null ? void 0 : H.current;
-    if (M) {
-      const C = de.current;
+    ve(f), ze.current = !0, Ze.current = f;
+    const D = (H = Kt[f]) == null ? void 0 : H.current;
+    if (D) {
+      const C = ce.current;
       if (C && C.scrollHeight > C.clientHeight) {
-        const T = C.getBoundingClientRect().top, Y = M.getBoundingClientRect().top - T + C.scrollTop - 16;
+        const T = C.getBoundingClientRect().top, Y = D.getBoundingClientRect().top - T + C.scrollTop - 16;
         C.scrollTo({ top: Y, behavior: "smooth" });
       } else {
-        const T = M.getBoundingClientRect().top + window.scrollY - 120;
+        const T = D.getBoundingClientRect().top + window.scrollY - 120;
         window.scrollTo({ top: T, behavior: "smooth" });
       }
     }
     setTimeout(() => {
-      De.current = !1, Qe.current = null;
+      ze.current = !1, Ze.current = null;
     }, 1200);
-  }, Je = o || [], Xe = (p) => {
-    me("signals");
-    const M = se.current;
-    if (M) {
-      const C = de.current;
+  }, De = l || [], Ge = De.length > 1, Qe = (f) => {
+    ve("signals");
+    const D = de.current;
+    if (D) {
+      const C = ce.current;
       if (C && C.scrollHeight > C.clientHeight) {
-        const T = C.getBoundingClientRect().top, Y = M.getBoundingClientRect().top - T + C.scrollTop - 16;
+        const T = C.getBoundingClientRect().top, Y = D.getBoundingClientRect().top - T + C.scrollTop - 16;
         C.scrollTo({ top: Y, behavior: "smooth" });
       } else {
-        const T = M.getBoundingClientRect().top + window.scrollY - 120;
+        const T = D.getBoundingClientRect().top + window.scrollY - 120;
         window.scrollTo({ top: T, behavior: "smooth" });
       }
     }
-    const H = p / 1e3;
+    const H = f / 1e3;
     setTimeout(() => {
       var C;
       (C = ne.current) != null && C.scrollToTranscript && ne.current.scrollToTranscript(H);
     }, 220);
-  }, Ue = (p) => {
-    me("signals");
-    const M = se.current;
-    if (M) {
-      const C = de.current;
+  }, Je = (f) => {
+    ve("signals");
+    const D = de.current;
+    if (D) {
+      const C = ce.current;
       if (C && C.scrollHeight > C.clientHeight) {
-        const T = C.getBoundingClientRect().top, Y = M.getBoundingClientRect().top - T + C.scrollTop - 16;
+        const T = C.getBoundingClientRect().top, Y = D.getBoundingClientRect().top - T + C.scrollTop - 16;
         C.scrollTo({ top: Y, behavior: "smooth" });
       } else {
-        const T = M.getBoundingClientRect().top + window.scrollY - 120;
+        const T = D.getBoundingClientRect().top + window.scrollY - 120;
         window.scrollTo({ top: T, behavior: "smooth" });
       }
     }
-    const H = (p == null ? void 0 : p.start_ms) ?? (p == null ? void 0 : p.startMs);
+    const H = (f == null ? void 0 : f.start_ms) ?? (f == null ? void 0 : f.startMs);
     setTimeout(() => {
       var C, T;
       if (H != null && ((C = ne.current) != null && C.scrollToTranscript) && ne.current.scrollToTranscript(H / 1e3), y)
-        y(p);
+        y(f);
       else if (H != null && ((T = ne.current) != null && T.seekTo)) {
-        ne.current.seekTo(H / 1e3), Ve(!0), jt(H / 1e3);
-        const Y = (p.end_ms ?? p.endMs ?? H + 5e3) - H;
-        setTimeout(() => Ve(!1), Y);
+        ne.current.seekTo(H / 1e3), Ke(!0), Pt(H / 1e3);
+        const Y = (f.end_ms ?? f.endMs ?? H + 5e3) - H;
+        setTimeout(() => Ke(!1), Y);
       }
     }, 220);
-  }, Pt = (p) => {
-    c && c(p);
-  }, Yt = (p) => {
-    $e((M) => {
-      const H = new Set(M);
-      return H.has(p) ? H.delete(p) : H.add(p), H;
+  }, qt = (f) => {
+    c && c(f);
+  }, Zt = (f) => {
+    $e((D) => {
+      const H = new Set(D);
+      return H.has(f) ? H.delete(f) : H.add(f), H;
     });
-  }, Kt = (i == null ? void 0 : i.blocks) || [], ce = (p) => {
-    var M;
-    return ((M = Kt.find((H) => H.block_id === p)) == null ? void 0 : M.payload) || {};
-  }, V = ce("interaction-metadata"), fe = ce("interaction-context"), xe = ce("interaction-signals"), Vt = ce("interaction-outcome-lift"), qt = ce("interaction-dimensions").dimensions || [], Zt = fe.call_purpose || {}, Qt = fe.classification || {}, et = V || {}, tt = D || Zt || {}, Jt = Z || Qt || {}, nt = Vt || {}, Xt = (nt.driver_signal_keys || []).map((p) => p.replace(/^sig\./, "").replace(/_/g, " ")), Ut = s || null, en = (ot = xe == null ? void 0 : xe.signals) != null && ot.length ? xe : { present_count: 0, total_signals_evaluated: 0, signals: [] }, it = zt || [], ze = G || V.agent_name || V.agent || fe.agent_name || "Agent", tn = R || V.agent_full_name || V.agent_name || ze, ge = b || V.customer_name || V.customer || fe.customer_name || "Customer", rt = I || V.customer_full_name || V.customer_name || ge, nn = String(
+  }, Qt = (i == null ? void 0 : i.blocks) || [], fe = (f) => {
+    var D;
+    return ((D = Qt.find((H) => H.block_id === f)) == null ? void 0 : D.payload) || {};
+  }, V = fe("interaction-metadata"), ge = fe("interaction-context"), be = fe("interaction-signals"), Jt = fe("interaction-outcome-lift"), Xt = fe("interaction-dimensions").dimensions || [], Ut = ge.call_purpose || {}, en = ge.classification || {}, Xe = V || {}, Ue = z || Ut || {}, tn = Z || en || {}, et = Jt || {}, nn = (et.driver_signal_keys || []).map((f) => f.replace(/^sig\./, "").replace(/_/g, " ")), rn = s || null, ln = (it = be == null ? void 0 : be.signals) != null && it.length ? be : { present_count: 0, total_signals_evaluated: 0, signals: [] }, tt = Et || [], Me = M || V.agent_name || V.agent || ge.agent_name || "Agent", on = R || V.agent_full_name || V.agent_name || Me, he = b || V.customer_name || V.customer || ge.customer_name || "Customer", nt = I || V.customer_full_name || V.customer_name || he, 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(), rn = /(admin|superadmin|administrator)/.test(nn), Ge = K ?? Je.length, be = V.created_dt || (i == null ? void 0 : i.created_dt) || fe.created_dt || "", on = be ? new Date(/Z$|[+-]\d{2}:\d{2}$/.test(be) ? be : be + "Z").toLocaleString() : "", ln = tt.interaction_direction === "inbound" ? "Inbound" : "Outbound";
+  ).toLowerCase(), sn = /(admin|superadmin|administrator)/.test(an), Ee = K ?? De.length, Se = V.created_dt || (i == null ? void 0 : i.created_dt) || ge.created_dt || "", dn = Se ? new Date(/Z$|[+-]\d{2}:\d{2}$/.test(Se) ? Se : Se + "Z").toLocaleString() : "", cn = Ue.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(
@@ -3116,7 +3121,7 @@ const Gn = {
             padding: 0,
             flexShrink: 0
           },
-          children: /* @__PURE__ */ e(Ee, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
+          children: /* @__PURE__ */ e(Te, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
         }
       ),
       /* @__PURE__ */ e("div", { style: { width: 1, height: 28, background: "var(--Base-absent, #D9D9D9)" } }),
@@ -3129,11 +3134,11 @@ const Gn = {
         margin: 0,
         flex: 1
       }, children: t }),
-      (ue || ye) && !Ze && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
+      (ye || me) && !qe && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
         /* @__PURE__ */ e(re, { text: Be, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: ee ? void 0 : ue,
+            onClick: ee ? void 0 : ye,
             disabled: ee,
             style: {
               display: "flex",
@@ -3146,7 +3151,7 @@ const Gn = {
               opacity: ee ? 0.4 : 1
             },
             children: [
-              /* @__PURE__ */ e(Ee, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(Te, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
               /* @__PURE__ */ e("span", { style: {
                 color: "var(--Neutral-800, #323232)",
                 fontSize: 13,
@@ -3167,7 +3172,7 @@ const Gn = {
         /* @__PURE__ */ e(re, { text: je, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: te ? void 0 : ye,
+            onClick: te ? void 0 : me,
             disabled: te,
             style: {
               display: "flex",
@@ -3188,7 +3193,7 @@ const Gn = {
                 fontFamily: "var(--default-font-family)",
                 whiteSpace: "nowrap"
               }, children: "Next Session" }),
-              /* @__PURE__ */ e(dt, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
+              /* @__PURE__ */ e(at, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
             ]
           }
         ) })
@@ -3204,10 +3209,10 @@ const Gn = {
       padding: "0 24px",
       marginTop: 8
     }, children: [
-      /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "flex-start", minWidth: 0 }, children: Zn.map((p) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "flex-start", minWidth: 0 }, children: Jn.map((f) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => Ot(p.key),
+          onClick: () => Vt(f.key),
           style: {
             display: "flex",
             padding: 16,
@@ -3215,23 +3220,23 @@ const Gn = {
             gap: 10,
             background: "none",
             border: "none",
-            borderBottom: Ce === p.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
+            borderBottom: Fe === f.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
             cursor: "pointer",
             fontSize: 15,
-            fontWeight: Ce === p.key ? 500 : 400,
-            color: Ce === p.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
+            fontWeight: Fe === f.key ? 500 : 400,
+            color: Fe === f.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
             whiteSpace: "nowrap",
             transition: "border-color 0.2s ease, color 0.2s ease"
           },
-          children: p.label
+          children: f.label
         },
-        p.key
+        f.key
       )) }),
-      (ue || ye) && Ze && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
+      (ye || me) && qe && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: [
         /* @__PURE__ */ e(re, { text: Be, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: ee ? void 0 : ue,
+            onClick: ee ? void 0 : ye,
             disabled: ee,
             style: {
               display: "flex",
@@ -3244,7 +3249,7 @@ const Gn = {
               opacity: ee ? 0.4 : 1
             },
             children: [
-              /* @__PURE__ */ e(Ee, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(Te, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 }),
               /* @__PURE__ */ e("span", { style: {
                 color: "var(--Neutral-800, #323232)",
                 fontSize: 13,
@@ -3265,7 +3270,7 @@ const Gn = {
         /* @__PURE__ */ e(re, { text: je, children: /* @__PURE__ */ n(
           "button",
           {
-            onClick: te ? void 0 : ye,
+            onClick: te ? void 0 : me,
             disabled: te,
             style: {
               display: "flex",
@@ -3286,14 +3291,14 @@ const Gn = {
                 fontFamily: "var(--default-font-family)",
                 whiteSpace: "nowrap"
               }, children: "Next Session" }),
-              /* @__PURE__ */ e(dt, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
+              /* @__PURE__ */ e(at, { size: 16, color: "var(--Neutral-800, #323232)", strokeWidth: 1.5 })
             ]
           }
         ) })
       ] })
     ] }) }),
-    /* @__PURE__ */ n("div", { ref: de, style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
-      /* @__PURE__ */ n("div", { ref: ve, style: {
+    /* @__PURE__ */ n("div", { ref: ce, style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
+      /* @__PURE__ */ n("div", { ref: xe, style: {
         display: "flex",
         flexDirection: "column",
         justifyContent: "flex-end",
@@ -3309,7 +3314,7 @@ const Gn = {
           alignSelf: "stretch"
         }, children: [
           /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
-            /* @__PURE__ */ e(yn, { 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,
@@ -3320,12 +3325,12 @@ const Gn = {
           ] }),
           /* @__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(mn, { 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: on })
+              /* @__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: dn })
             ] }),
             /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-              /* @__PURE__ */ e(vn, { 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: ln })
+              /* @__PURE__ */ e(Sn, { 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",
@@ -3334,153 +3339,65 @@ const Gn = {
               paddingLeft: 16,
               borderLeft: "1px solid var(--Grey-absent, #D9D9D9)"
             }, children: [
-              /* @__PURE__ */ e(re, { text: tn, children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0", cursor: "pointer" }, children: [
-                /* @__PURE__ */ e(xn, { 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: ze })
+              /* @__PURE__ */ e(re, { text: on, 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: Me })
               ] }) }),
-              /* @__PURE__ */ e(bn, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
-              Ge > 1 ? /* @__PURE__ */ n("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ e(re, { text: rt, children: /* @__PURE__ */ n(
-                  "button",
-                  {
-                    onClick: () => Fe((p) => !p),
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 4,
-                      padding: "8px 0",
-                      background: "none",
-                      border: "none",
-                      cursor: "pointer"
-                    },
-                    children: [
-                      /* @__PURE__ */ e(He, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
-                      /* @__PURE__ */ n("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2 }, children: [
-                        ge,
-                        " (",
-                        Ge,
-                        " Sessions)"
-                      ] }),
-                      Oe ? /* @__PURE__ */ e(Re, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(_e, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
-                    ]
-                  }
-                ) }),
-                Oe && /* @__PURE__ */ n("div", { style: {
-                  position: "absolute",
-                  top: "100%",
-                  right: 0,
-                  marginTop: 4,
-                  width: 264,
-                  background: "var(--Grey-White, #FFF)",
-                  borderRadius: 4,
-                  border: "1px solid var(--Grey-absent, #D9D9D9)",
-                  boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
-                  zIndex: 50,
-                  overflow: "hidden"
-                }, children: [
-                  /* @__PURE__ */ n("div", { style: {
+              Ee > 1 ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(re, { text: nt, children: /* @__PURE__ */ n(
+                "button",
+                {
+                  onClick: () => se(!0),
+                  style: {
                     display: "flex",
-                    alignItems: "flex-start",
-                    gap: 8,
-                    padding: 16
-                  }, children: [
-                    /* @__PURE__ */ e(He, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5, style: { marginTop: 2, flexShrink: 0 } }),
-                    /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-                      /* @__PURE__ */ e("span", { style: {
-                        fontSize: 16,
-                        fontWeight: 600,
-                        color: "var(--Grey-Strong, #2E3236)",
-                        lineHeight: 1
-                      }, children: ge }),
-                      /* @__PURE__ */ n("span", { style: {
-                        fontSize: 13,
-                        fontWeight: 400,
-                        color: "var(--Grey-Muted, #808183)",
-                        lineHeight: 1
-                      }, children: [
-                        Ge,
-                        " Sessions in past"
+                    alignItems: "center",
+                    gap: 16,
+                    padding: "0 16px",
+                    height: 34,
+                    borderRadius: 8,
+                    background: "var(--Rail-Surface-2, #E3E1D7)",
+                    border: "none",
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 4, minWidth: 0 }, children: [
+                      /* @__PURE__ */ e(Re, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
+                      /* @__PURE__ */ n("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2, whiteSpace: "nowrap" }, children: [
+                        /* @__PURE__ */ e("span", { style: { fontWeight: 600 }, children: he }),
+                        " ",
+                        /* @__PURE__ */ n("span", { children: [
+                          "(",
+                          Ee,
+                          " Sessions)"
+                        ] })
                       ] })
-                    ] })
-                  ] }),
-                  Je.slice(0, 5).map((p, M) => /* @__PURE__ */ n(
-                    "div",
-                    {
-                      onClick: () => {
-                        Ae && Ae(p), Fe(!1);
-                      },
-                      onMouseEnter: () => Ye(M),
-                      onMouseLeave: () => Ye(null),
-                      style: {
-                        display: "flex",
-                        width: 264,
-                        padding: "12px 16px",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        background: Pe === M ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
-                        borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
-                        cursor: "pointer",
-                        boxSizing: "border-box",
-                        transition: "background 0.15s"
-                      },
-                      children: [
-                        /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
-                          /* @__PURE__ */ e("span", { style: {
-                            fontSize: 13,
-                            fontWeight: 400,
-                            color: "var(--Grey-Strong, #2E3236)",
-                            lineHeight: 1
-                          }, children: p.title }),
-                          /* @__PURE__ */ e("span", { style: {
-                            fontSize: 12,
-                            fontWeight: 400,
-                            color: "var(--Grey-Muted, #808183)",
-                            lineHeight: 1
-                          }, children: p.date })
-                        ] }),
-                        Pe === M && /* @__PURE__ */ e(Sn, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
-                      ]
-                    },
-                    p.id || M
-                  )),
-                  /* @__PURE__ */ e("div", { style: {
-                    padding: 16,
-                    borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
+                    ] }),
+                    /* @__PURE__ */ e(ct, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.7 })
+                  ]
+                }
+              ) }) }) : /* @__PURE__ */ e(re, { text: nt, children: /* @__PURE__ */ n(
+                "button",
+                {
+                  onClick: () => se(!0),
+                  style: {
                     display: "flex",
-                    justifyContent: "center"
-                  }, children: /* @__PURE__ */ n(
-                    "button",
-                    {
-                      onClick: () => {
-                        Le && Le(), Fe(!1);
-                      },
-                      style: {
-                        display: "flex",
-                        height: 32,
-                        padding: "16px 16px 16px 12px",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        gap: 6,
-                        background: "var(--Grey-White, #FFF)",
-                        border: "1px solid var(--Grey-absent, #D9D9D9)",
-                        borderRadius: 10,
-                        cursor: "pointer"
-                      },
-                      children: [
-                        /* @__PURE__ */ e(kn, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
-                        /* @__PURE__ */ e("span", { style: {
-                          fontSize: 14,
-                          fontWeight: 600,
-                          color: "var(--Grey-Strong, #2E3236)"
-                        }, children: "View All Sessions" })
-                      ]
-                    }
-                  ) })
-                ] })
-              ] }) : /* @__PURE__ */ e(re, { text: rt, children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 0", cursor: "pointer" }, children: [
-                /* @__PURE__ */ e(He, { 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: ge })
-              ] }) })
+                    alignItems: "center",
+                    gap: 16,
+                    padding: "0 16px",
+                    height: 34,
+                    borderRadius: 8,
+                    background: "var(--Rail-Surface-2, #E3E1D7)",
+                    border: "none",
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 4, minWidth: 0 }, children: [
+                      /* @__PURE__ */ e(Re, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.5 }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2, whiteSpace: "nowrap" }, children: he })
+                    ] }),
+                    /* @__PURE__ */ e(ct, { size: 16, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.7 })
+                  ]
+                }
+              ) })
             ] })
           ] })
         ] }),
@@ -3491,14 +3408,14 @@ const Gn = {
           alignSelf: "stretch"
         }, children: [
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0, display: "flex" }, children: /* @__PURE__ */ e(
-            Bn,
+            Nn,
             {
               score: A ?? 0.5,
               minScore: 0,
               maxScore: U,
-              predictedScore: we ?? 0.5,
-              predictedLabel: he,
-              legends: pe
+              predictedScore: Ce ?? 0.5,
+              predictedLabel: pe,
+              legends: ue
             }
           ) }),
           /* @__PURE__ */ n("div", { style: {
@@ -3511,33 +3428,33 @@ const Gn = {
             minWidth: 0
           }, children: [
             /* @__PURE__ */ e(
-              Mn,
+              Hn,
               {
-                meta: et,
-                callPurpose: tt,
-                classification: Jt,
+                meta: Xe,
+                callPurpose: Ue,
+                classification: tn,
                 outcomeQuality: Q || "Neutral",
-                dimensions: qt,
+                dimensions: Xt,
                 resolutionOutcome: J,
                 customerIntent: X,
-                interactionId: oe ?? V.interaction_id,
-                moreDetails: g,
-                canShowEditButton: rn,
-                onEditInteraction: Tt
+                interactionId: le ?? V.interaction_id,
+                moreDetails: h,
+                canShowEditButton: sn,
+                onEditInteraction: At
               }
             ),
             /* @__PURE__ */ e(
-              En,
+              Tn,
               {
-                outcomeLift: nt,
-                driverLabels: Xt
+                outcomeLift: et,
+                driverLabels: nn
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { ref: We, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(Dn, { data: l ? null : Ut, loading: l }) }),
-      /* @__PURE__ */ n("div", { ref: se, style: {
+      /* @__PURE__ */ e("div", { ref: We, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(Gn, { data: o ? null : rn, loading: o }) }),
+      /* @__PURE__ */ n("div", { ref: de, style: {
         display: "flex",
         flexDirection: "column",
         gap: 16,
@@ -3549,7 +3466,7 @@ const Gn = {
           alignItems: "center",
           gap: 8
         }, children: [
-          /* @__PURE__ */ e(bt, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
+          /* @__PURE__ */ e(wt, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
           /* @__PURE__ */ e("span", { style: {
             fontSize: 16,
             fontWeight: 600,
@@ -3567,28 +3484,28 @@ const Gn = {
           borderTop: "1px solid #D9D9D9"
         }, children: [
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            Hn,
+            Rn,
             {
-              signals: en,
-              expandedSignals: Bt,
-              toggleSignal: Yt,
-              playEvidence: Ue,
-              highlightTurns: Pt,
-              onShowInTranscript: Xe,
-              timelinePlaying: u || Ke,
-              currentTimeSeconds: h ?? qe
+              signals: ln,
+              expandedSignals: $t,
+              toggleSignal: Zt,
+              playEvidence: Je,
+              highlightTurns: qt,
+              onShowInTranscript: Qe,
+              timelinePlaying: u || Ye,
+              currentTimeSeconds: p ?? Ve
             }
           ) }),
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            wn,
+            Cn,
             {
               ref: ne,
               audioUrl: a,
-              durationSeconds: et.duration_seconds,
-              audioRef: f,
-              agentName: ze,
-              customerName: ge,
-              currentTimeSeconds: h,
+              durationSeconds: Xe.duration_seconds,
+              audioRef: g,
+              agentName: Me,
+              customerName: he,
+              currentTimeSeconds: p,
               timelinePlaying: u,
               playbackRate: W,
               timelineSegments: v,
@@ -3608,51 +3525,183 @@ const Gn = {
         ] })
       ] }),
       /* @__PURE__ */ e("div", { ref: Ie, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(
-        Yn,
+        Vn,
         {
           comments: Ne,
           totalComments: Ne.length,
           currentUser: j,
-          onSendComment: Gt || (() => {
+          onSendComment: Ht || (() => {
           }),
-          onSendReply: Mt || (() => {
+          onSendReply: Tt || (() => {
           }),
-          onReply: Et || (() => {
+          onReply: Rt || (() => {
           }),
-          onEdit: Ht || (() => {
+          onEdit: _t || (() => {
           }),
-          onDelete: Rt || (() => {
+          onDelete: Lt || (() => {
           }),
-          onMenuClick: _t || (() => {
+          onMenuClick: Bt || (() => {
           }),
-          onMarkResolved: At || (() => {
+          onMarkResolved: jt || (() => {
           }),
-          isResolved: Lt,
+          isResolved: Nt,
           children: /* @__PURE__ */ e(
-            qn,
+            Qn,
             {
-              items: it,
-              guidanceCount: it.length,
-              onPlayEvidence: Ue,
-              onShowInTranscript: Xe,
-              timelinePlaying: u || Ke,
-              currentTimeSeconds: h ?? qe
+              items: tt,
+              guidanceCount: tt.length,
+              onPlayEvidence: Je,
+              onShowInTranscript: Qe,
+              timelinePlaying: u || Ye,
+              currentTimeSeconds: p ?? Ve
             }
           )
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ e(
+      Fn,
+      {
+        open: Ot,
+        onClose: () => se(!1),
+        title: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
+          /* @__PURE__ */ e("div", { style: {
+            width: 34,
+            height: 34,
+            borderRadius: "50%",
+            background: "var(--surface-hover, #F3F7F7)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          }, children: /* @__PURE__ */ e(Re, { size: 20, color: "var(--Grey-Strong, #2E3236)", strokeWidth: 1.7 }) }),
+          /* @__PURE__ */ e("div", { style: { minWidth: 0 }, children: /* @__PURE__ */ e("div", { style: {
+            fontSize: 16,
+            fontWeight: 600,
+            color: "var(--Grey-Strong, #2E3236)",
+            lineHeight: 1.2,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }, children: he }) })
+        ] }),
+        subtitle: Ge ? /* @__PURE__ */ n("span", { style: {
+          fontSize: 13,
+          fontWeight: 400,
+          color: "var(--Grey-Muted, #808183)",
+          lineHeight: 1.5
+        }, children: [
+          Ee,
+          " Sessions in Past"
+        ] }) : null,
+        width: 470,
+        height: "100vh",
+        topOffset: 70,
+        footer: Ge ? /* @__PURE__ */ e("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ n(
+          "button",
+          {
+            onClick: () => {
+              Le && Le(), se(!1);
+            },
+            style: {
+              display: "flex",
+              height: 32,
+              padding: "0 16px 0 12px",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 6,
+              background: "var(--Grey-White, #FFF)",
+              border: "1px solid var(--Grey-absent, #D9D9D9)",
+              borderRadius: 10,
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ e(kn, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: "var(--Grey-Strong, #2E3236)" }, children: "View All Sessions" })
+            ]
+          }
+        ) }) : null,
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
+              maxHeight: "100%",
+              overflowY: "auto"
+            },
+            children: Ge ? De.map((f, D) => /* @__PURE__ */ n(
+              "div",
+              {
+                onClick: () => {
+                  Ae && Ae(f), se(!1);
+                },
+                onMouseEnter: () => Pe(D),
+                onMouseLeave: () => Pe(null),
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  gap: 12,
+                  padding: "16px 12px",
+                  borderTop: D === 0 ? "none" : "1px solid var(--Grey-absent, #D9D9D9)",
+                  background: Oe === D ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                  cursor: "pointer",
+                  transition: "background 0.15s"
+                },
+                children: [
+                  /* @__PURE__ */ n("div", { style: { minWidth: 0 }, children: [
+                    /* @__PURE__ */ e("div", { style: { fontSize: 14, display: "flex", alignItems: "center", gap: 6, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2, marginBottom: 8, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: f.title }),
+                    f.status && /* @__PURE__ */ n("div", { style: { fontSize: 13, color: "var(--Grey-Strong, #2E3236)", marginBottom: 12, lineHeight: 1.2 }, children: [
+                      /* @__PURE__ */ e("span", { style: { fontWeight: 400 }, children: "Status: " }),
+                      /* @__PURE__ */ e("span", { style: { fontWeight: 400, color: "var(--Grey-Muted, #808183)" }, children: f.status })
+                    ] }),
+                    /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }, children: [
+                      /* @__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 }),
+                        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(dt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.8 }),
+                        f.agent || f.agent_name
+                      ] })
+                    ] })
+                  ] }),
+                  Oe === D && /* @__PURE__ */ e(wn, { size: 20, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.7, style: { flexShrink: 0 } })
+                ]
+              },
+              f.id || D
+            )) : /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  minHeight: 140,
+                  padding: "24px 12px",
+                  color: "var(--Grey-Muted, #808183)",
+                  fontSize: 14,
+                  fontStyle: "italic",
+                  textAlign: "center"
+                },
+                children: "No previous sessions available"
+              }
+            )
+          }
+        )
+      }
+    )
   ] });
 };
 export {
-  Dn as UpdatedCoachingSynthesisCard,
-  Bn as UpdatedCompassScore,
-  qn as UpdatedGuidance,
-  Mn as UpdatedInteractionContext,
-  ni as UpdatedInteractionDetails,
-  wn as UpdatedInteractionRecording,
-  En as UpdatedInteractionScores,
-  Hn as UpdatedInteractionSignals,
-  Yn as UpdatedThreads
+  Gn as UpdatedCoachingSynthesisCard,
+  Nn as UpdatedCompassScore,
+  Qn as UpdatedGuidance,
+  Hn as UpdatedInteractionContext,
+  li as UpdatedInteractionDetails,
+  Cn as UpdatedInteractionRecording,
+  Tn as UpdatedInteractionScores,
+  Rn as UpdatedInteractionSignals,
+  Vn as UpdatedThreads
 };
 //# sourceMappingURL=UpdatedInteractionDetails.es.js.map