chordia-ui 3.4.2 → 3.4.3

package/dist/components/UpdatedInteractionDetails.es.js

@@ -1,8 +1,7 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import Be, { useState as A, useRef as _ } from "react";
-import { ShieldCheck as $e, TrendingUp as Pe, Lightbulb as je, ThumbsUp as ue, ExternalLink as ve, FileSignal as me, ChevronUp as xe, ChevronDown as be, ScrollText as Oe, PlayCircle as Ue, Info as qe, ArrowLeft as se, ClipboardList as Ne, CalendarDays as Ve, PhoneIncoming as Ye, Headset as Qe, Repeat as Ke, CircleUser as ae, History as Ze, ArrowRight as Xe } from "lucide-react";
-import { U as Je } from "../UpdatedInteractionRecording.es.js";
-import "../Timeline.es.js";
+import Ye, { useState as _, useRef as H } from "react";
+import { ShieldCheck as Qe, TrendingUp as Ke, Lightbulb as Ze, ThumbsUp as ve, ExternalLink as me, FileSignal as xe, ChevronUp as be, ChevronDown as Se, ScrollText as Xe, PauseCircle as Je, PlayCircle as et, Info as tt, ArrowLeft as ae, ClipboardList as nt, CalendarDays as it, PhoneIncoming as ot, Headset as rt, Repeat as lt, CircleUser as de, History as st, ArrowRight as at } from "lucide-react";
+import { U as dt } from "../UpdatedInteractionRecording.es.js";
 const c = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
@@ -12,17 +11,17 @@ const c = {
   quoteLine: "var(--border-warm, #B2AEA8)",
   quoteText: "var(--text-subtle-warm, #767473)",
   iconBg: "var(--surface-hover, #F3F7F7)"
-}, et = {
+}, ct = {
   effective: "Effective",
   strong: "Strong",
   needs_improvement: "Needs Improvement",
   mixed: "Mixed"
-}, de = "updated-coaching-synthesis-keyframes";
-function tt() {
-  if (typeof document > "u" || document.getElementById(de))
+}, ce = "updated-coaching-synthesis-keyframes";
+function gt() {
+  if (typeof document > "u" || document.getElementById(ce))
     return;
   const n = document.createElement("style");
-  n.id = de, n.textContent = `
+  n.id = ce, n.textContent = `
     @keyframes updated-coaching-shimmer {
       0% { background-position: -200% 0; }
       100% { background-position: 200% 0; }
@@ -33,8 +32,8 @@ function tt() {
     }
   `, document.head.appendChild(n);
 }
-function nt({ overall: n }) {
-  const i = et[n] || (n ? n.replace(/_/g, " ") : "");
+function pt({ overall: n }) {
+  const i = ct[n] || (n ? n.replace(/_/g, " ") : "");
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     alignItems: "center",
@@ -53,7 +52,7 @@ function nt({ overall: n }) {
       alignItems: "center",
       gap: 6
     }, children: [
-      /* @__PURE__ */ e(ue, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+      /* @__PURE__ */ e(ve, { size: 14, color: c.strong, strokeWidth: 1.5 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 13,
         fontWeight: 600,
@@ -64,8 +63,8 @@ function nt({ overall: n }) {
     ] })
   ] });
 }
-function it({ item: n }) {
-  const i = typeof n == "string" ? n : (n == null ? void 0 : n.text) || "", o = typeof n == "object" ? n == null ? void 0 : n.quote : null;
+function ft({ item: n }) {
+  const i = typeof n == "string" ? n : (n == null ? void 0 : n.text) || "", r = typeof n == "object" ? n == null ? void 0 : n.quote : null;
   return /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
     /* @__PURE__ */ e("div", { style: {
       fontSize: 14,
@@ -74,7 +73,7 @@ function it({ item: n }) {
       fontFamily: "var(--font-sans)",
       lineHeight: 1.5
     }, children: i }),
-    o && /* @__PURE__ */ t("div", { style: {
+    r && /* @__PURE__ */ t("div", { style: {
       display: "flex",
       gap: 10
     }, children: [
@@ -92,14 +91,14 @@ function it({ item: n }) {
         lineHeight: 1.5
       }, children: [
         "“",
-        o,
+        r,
         "”"
       ] })
     ] })
   ] });
 }
-function ce({ icon: n, label: i, items: o }) {
-  return !o || o.length === 0 ? null : /* @__PURE__ */ t("div", { style: {
+function ge({ icon: n, label: i, items: r }) {
+  return !r || r.length === 0 ? null : /* @__PURE__ */ t("div", { style: {
     flex: 1,
     display: "flex",
     flexDirection: "column",
@@ -129,13 +128,13 @@ function ce({ icon: n, label: i, items: o }) {
         lineHeight: "normal"
       }, children: i })
     ] }),
-    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: o.map((d, g) => /* @__PURE__ */ e(it, { item: d }, g)) })
+    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: r.map((d, p) => /* @__PURE__ */ e(ft, { item: d }, p)) })
   ] });
 }
-const ot = ({ data: n, loading: i, error: o }) => {
-  var y, u;
-  if (Be.useEffect(() => {
-    tt();
+const ht = ({ data: n, loading: i, error: r }) => {
+  var y, m;
+  if (Ye.useEffect(() => {
+    gt();
   }, []), i)
     return /* @__PURE__ */ t("div", { style: {
       display: "flex",
@@ -160,31 +159,31 @@ const ot = ({ data: n, loading: i, error: o }) => {
           fontWeight: 500
         }, children: "Synthesizing coaching summary..." })
       ] }),
-      [180, 260, 220].map((k, b) => /* @__PURE__ */ e(
+      [180, 260, 220].map((w, S) => /* @__PURE__ */ e(
         "div",
         {
           style: {
             height: 10,
-            width: k,
+            width: w,
             maxWidth: "100%",
             borderRadius: 4,
             background: `linear-gradient(90deg, ${c.absent} 25%, var(--shimmer-mid, #ECECEC) 50%, ${c.absent} 75%)`,
             backgroundSize: "200% 100%",
             animation: "updated-coaching-shimmer 1.8s ease-in-out infinite",
-            animationDelay: `${b * 0.2}s`
+            animationDelay: `${S * 0.2}s`
           }
         },
-        b
+        S
       ))
     ] });
-  if (o)
+  if (r)
     return /* @__PURE__ */ e("div", { style: {
       fontSize: 14,
       color: c.muted
     }, children: "Unable to generate coaching summary." });
   if (!n)
     return null;
-  const d = n.strengths || [], g = n.improvements || [], f = typeof n.one_liner == "string" ? n.one_liner : ((y = n.one_liner) == null ? void 0 : y.text) || "", x = typeof n.context == "string" ? n.context : ((u = n.context) == null ? void 0 : u.text) || "";
+  const d = n.strengths || [], p = n.improvements || [], h = typeof n.one_liner == "string" ? n.one_liner : ((y = n.one_liner) == null ? void 0 : y.text) || "", v = typeof n.context == "string" ? n.context : ((m = n.context) == null ? void 0 : m.text) || "";
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -196,7 +195,7 @@ const ot = ({ data: n, loading: i, error: o }) => {
       alignItems: "center",
       gap: 8
     }, children: [
-      /* @__PURE__ */ e($e, { size: 20, color: c.accent, strokeWidth: 2 }),
+      /* @__PURE__ */ e(Qe, { size: 20, color: c.accent, strokeWidth: 2 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 16,
         fontWeight: 600,
@@ -206,59 +205,59 @@ const ot = ({ data: n, loading: i, error: o }) => {
         textTransform: "uppercase"
       }, children: "Coaching Summary" })
     ] }),
-    f && /* @__PURE__ */ e("div", { style: {
+    h && /* @__PURE__ */ e("div", { style: {
       fontSize: 14,
       fontWeight: 500,
       color: c.strong,
       fontFamily: "var(--font-sans)",
       lineHeight: 1.5
-    }, children: f }),
+    }, children: h }),
     /* @__PURE__ */ t("div", { style: {
       display: "flex",
       alignItems: "flex-start",
       gap: 16,
       justifyContent: "space-between"
     }, children: [
-      x && /* @__PURE__ */ e("div", { style: {
+      v && /* @__PURE__ */ e("div", { style: {
         fontSize: 14,
         fontWeight: 400,
         color: c.muted,
         fontFamily: "var(--font-sans)",
         lineHeight: 1.5,
         flex: 1
-      }, children: x }),
-      n.overall && /* @__PURE__ */ e(nt, { overall: n.overall })
+      }, children: v }),
+      n.overall && /* @__PURE__ */ e(pt, { overall: n.overall })
     ] }),
-    (d.length > 0 || g.length > 0) && /* @__PURE__ */ t("div", { style: {
+    (d.length > 0 || p.length > 0) && /* @__PURE__ */ t("div", { style: {
       display: "flex",
       gap: 24,
       paddingTop: 24,
       borderTop: `1px solid ${c.absent}`
     }, children: [
       /* @__PURE__ */ e(
-        ce,
+        ge,
         {
-          icon: /* @__PURE__ */ e(Pe, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(Ke, { size: 14, color: c.strong, strokeWidth: 1.5 }),
           label: "Key Strengths",
           items: d
         }
       ),
       /* @__PURE__ */ e(
-        ce,
+        ge,
         {
-          icon: /* @__PURE__ */ e(je, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(Ze, { size: 14, color: c.strong, strokeWidth: 1.5 }),
           label: "Improvements",
-          items: g
+          items: p
         }
       )
     ] })
   ] });
 };
-function rt(n) {
-  const i = Math.floor(n / 60), o = Math.round(n % 60);
-  return `${i}:${o.toString().padStart(2, "0")}`;
+function yt(n) {
+  const i = Math.floor(n / 60), r = Math.round(n % 60);
+  return `${i}:${r.toString().padStart(2, "0")}`;
 }
-const lt = {
+const ut = {
   display: "flex",
   justifyContent: "space-between",
   padding: "8px 8px 12px 8px",
@@ -269,34 +268,34 @@ const lt = {
   fontWeight: 400,
   lineHeight: "normal",
   borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
-}, ge = {
+}, pe = {
   display: "flex",
   flexDirection: "column",
   flex: "1 0 0",
   gap: 12,
   minWidth: 0
-}, st = ({
+}, vt = ({
   meta: n = {},
   callPurpose: i = {},
-  classification: o = {},
+  classification: r = {},
   dimensions: d = [],
-  outcomeQuality: g = "Neutral",
-  onMoreDetails: f
+  outcomeQuality: p = "Neutral",
+  onMoreDetails: h
 }) => {
-  const x = n.duration_seconds != null ? rt(n.duration_seconds) : null, y = n.message_count, u = i.interaction_driver, k = o.interaction_paradigm, b = [
-    x != null && { label: "Duration", value: x },
-    u != null && { label: "Driver", value: u },
-    ...d.filter((r, p) => p % 2 === 0).map((r) => ({ label: r.label || r.key, value: r.value })),
-    { label: "Outcome Quality", value: g }
-  ].filter(Boolean), w = [
+  const v = n.duration_seconds != null ? yt(n.duration_seconds) : null, y = n.message_count, m = i.interaction_driver, w = r.interaction_paradigm, S = [
+    v != null && { label: "Duration", value: v },
+    m != null && { label: "Driver", value: m },
+    ...d.filter((l, f) => f % 2 === 0).map((l) => ({ label: l.label || l.key, value: l.value })),
+    { label: "Outcome Quality", value: p }
+  ].filter(Boolean), W = [
     y != null && { label: "Messages", value: y },
-    k != null && { label: "Paradigm", value: k },
-    ...d.filter((r, p) => p % 2 === 1).map((r) => ({ label: r.label || r.key, value: r.value })),
+    w != null && { label: "Paradigm", value: w },
+    ...d.filter((l, f) => f % 2 === 1).map((l) => ({ label: l.label || l.key, value: l.value })),
     { label: "More Details", isLink: !0 }
-  ].filter(Boolean), s = (r) => r.isLink ? /* @__PURE__ */ t(
+  ].filter(Boolean), a = (l) => l.isLink ? /* @__PURE__ */ t(
     "div",
     {
-      onClick: f,
+      onClick: h,
       style: {
         display: "flex",
         alignItems: "center",
@@ -306,21 +305,21 @@ const lt = {
         fontFamily: "var(--font-sans)"
       },
       children: [
-        /* @__PURE__ */ e(ve, { size: 16, color: "#808183", strokeWidth: 1.5 }),
-        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", fontSize: 13, fontWeight: 400 }, children: r.label })
+        /* @__PURE__ */ e(me, { size: 16, color: "#808183", strokeWidth: 1.5 }),
+        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", fontSize: 13, fontWeight: 400 }, children: l.label })
       ]
     },
-    r.label
+    l.label
   ) : /* @__PURE__ */ t(
     "div",
     {
-      style: lt,
+      style: ut,
       children: [
-        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: r.label }),
-        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Muted, #808183)", textAlign: "right" }, children: r.value })
+        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", whiteSpace: "nowrap", flexShrink: 0 }, children: l.label }),
+        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Muted, #808183)", textAlign: "right" }, children: l.value })
       ]
     },
-    r.label
+    l.label
   );
   return /* @__PURE__ */ t(
     "div",
@@ -332,27 +331,27 @@ const lt = {
         alignSelf: "stretch"
       },
       children: [
-        /* @__PURE__ */ e("div", { style: ge, children: b.map((r) => s(r)) }),
-        /* @__PURE__ */ e("div", { style: ge, children: w.map((r) => s(r)) })
+        /* @__PURE__ */ e("div", { style: pe, children: S.map((l) => a(l)) }),
+        /* @__PURE__ */ e("div", { style: pe, children: W.map((l) => a(l)) })
       ]
     }
   );
-}, l = {
+}, s = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
   absent: "var(--Grey-absent, #D9D9D9)",
   white: "var(--Grey-White, #FFF)",
   cardBg: "var(--surface-warm-40, rgba(243, 241, 229, 0.40))"
-}, m = 1.2, pe = 3, fe = (n) => n != null ? Math.round(n * 100) + "%" : "—", he = (n) => {
+}, x = 1.2, fe = 3, he = (n) => n != null ? Math.round(n * 100) + "%" : "—", ye = (n) => {
   if (n == null)
     return "—";
   const i = (n * 100).toFixed(1);
   return n > 0 ? `+${i}pp` : `${i}pp`;
-}, at = ({ outcomeLift: n, driverLabels: i = [] }) => {
-  var b;
+}, mt = ({ outcomeLift: n, driverLabels: i = [] }) => {
+  var S;
   if (!n || n.lift == null)
     return null;
-  const o = n.p_expected, d = n.p_full, g = n.lift_raw ?? (d != null && o != null ? d - o : null), f = n.lift, x = (b = n.interpretation) != null && b.lift_band ? n.interpretation.lift_band.replace(/_/g, " ") : f >= 0 ? "Positive" : "Negative", y = x.charAt(0).toUpperCase() + x.slice(1), u = i.slice(0, pe), k = i.length - pe;
+  const r = n.p_expected, d = n.p_full, p = n.lift_raw ?? (d != null && r != null ? d - r : null), h = n.lift, v = (S = n.interpretation) != null && S.lift_band ? n.interpretation.lift_band.replace(/_/g, " ") : h >= 0 ? "Positive" : "Negative", y = v.charAt(0).toUpperCase() + v.slice(1), m = i.slice(0, fe), w = i.length - fe;
   return /* @__PURE__ */ t(
     "div",
     {
@@ -362,8 +361,8 @@ const lt = {
         padding: 24,
         gap: 24,
         borderRadius: 8,
-        border: `1px solid ${l.absent}`,
-        background: l.cardBg,
+        border: `1px solid ${s.absent}`,
+        background: s.cardBg,
         alignSelf: "stretch"
       },
       children: [
@@ -385,9 +384,9 @@ const lt = {
                     style: {
                       fontSize: 15,
                       fontWeight: 600,
-                      color: l.strong,
+                      color: s.strong,
                       fontFamily: "var(--font-sans)",
-                      lineHeight: m
+                      lineHeight: x
                     },
                     children: "Agent Lift Analysis"
                   }
@@ -402,8 +401,8 @@ const lt = {
                       fontFamily: "var(--font-sans)"
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.strong, lineHeight: m }, children: "vs. Average Agent:" }),
-                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: l.strong, lineHeight: m }, children: he(f) }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: s.strong, lineHeight: x }, children: "vs. Average Agent:" }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: s.strong, lineHeight: x }, children: ye(h) }),
                       /* @__PURE__ */ t(
                         "div",
                         {
@@ -412,11 +411,11 @@ const lt = {
                             alignItems: "center",
                             gap: 6,
                             paddingLeft: 8,
-                            borderLeft: `1px solid ${l.absent}`
+                            borderLeft: `1px solid ${s.absent}`
                           },
                           children: [
-                            /* @__PURE__ */ e(ue, { size: 14, color: l.strong }),
-                            /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: l.strong, lineHeight: m }, children: y })
+                            /* @__PURE__ */ e(ve, { size: 14, color: s.strong }),
+                            /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: s.strong, lineHeight: x }, children: y })
                           ]
                         }
                       )
@@ -436,10 +435,10 @@ const lt = {
               },
               children: [
                 /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: fe(o) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: s.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: he(r) }),
                   /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Expected Outcome" }),
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Based on call type & difficulty" })
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: s.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Expected Outcome" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: s.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Based on call type & difficulty" })
                   ] })
                 ] }),
                 /* @__PURE__ */ t("div", { style: {
@@ -448,12 +447,12 @@ const lt = {
                   gap: 16,
                   alignItems: "center",
                   paddingLeft: 24,
-                  borderLeft: `1px solid ${l.absent}`
+                  borderLeft: `1px solid ${s.absent}`
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: he(g) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: s.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: ye(p) }),
                   /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Agent Impact" }),
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Behavior-driven change" })
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: s.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Agent Impact" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: s.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Behavior-driven change" })
                   ] })
                 ] }),
                 /* @__PURE__ */ t("div", { style: {
@@ -462,12 +461,12 @@ const lt = {
                   gap: 16,
                   alignItems: "center",
                   paddingLeft: 24,
-                  borderLeft: `1px solid ${l.absent}`
+                  borderLeft: `1px solid ${s.absent}`
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: fe(d) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: s.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: he(d) }),
                   /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Predicted Outcome" }),
-                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: "With agent behaviors" })
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: s.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Predicted Outcome" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: s.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "With agent behaviors" })
                   ] })
                 ] })
               ]
@@ -481,15 +480,15 @@ const lt = {
               style: {
                 fontSize: 12,
                 fontWeight: 600,
-                color: l.strong,
+                color: s.strong,
                 fontFamily: "var(--font-sans)",
-                lineHeight: m
+                lineHeight: x
               },
               children: "Key Drivers"
             }
           ),
           /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: [
-            u.map((w, s) => /* @__PURE__ */ e(
+            m.map((W, a) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -498,8 +497,8 @@ const lt = {
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 4,
-                  border: `1px solid ${l.absent}`,
-                  background: l.white
+                  border: `1px solid ${s.absent}`,
+                  background: s.white
                 },
                 children: /* @__PURE__ */ e(
                   "span",
@@ -507,21 +506,21 @@ const lt = {
                     style: {
                       fontSize: 12,
                       fontWeight: 400,
-                      color: l.strong,
+                      color: s.strong,
                       fontFamily: "var(--font-sans)",
-                      lineHeight: m,
+                      lineHeight: x,
                       whiteSpace: "nowrap",
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       maxWidth: 200
                     },
-                    children: w
+                    children: W
                   }
                 )
               },
-              s
+              a
             )),
-            k > 0 && /* @__PURE__ */ e(
+            w > 0 && /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -530,8 +529,8 @@ const lt = {
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 4,
-                  border: `1px solid ${l.absent}`,
-                  background: l.white
+                  border: `1px solid ${s.absent}`,
+                  background: s.white
                 },
                 children: /* @__PURE__ */ t(
                   "span",
@@ -539,14 +538,14 @@ const lt = {
                     style: {
                       fontSize: 12,
                       fontWeight: 400,
-                      color: l.strong,
+                      color: s.strong,
                       fontFamily: "var(--font-sans)",
-                      lineHeight: m,
+                      lineHeight: x,
                       whiteSpace: "nowrap"
                     },
                     children: [
                       "+ ",
-                      k
+                      w
                     ]
                   }
                 )
@@ -557,15 +556,15 @@ const lt = {
       ]
     }
   );
-}, ye = ({ children: n, size: i = 28, onClick: o, title: d }) => {
-  const [g, f] = A(!1);
+}, ue = ({ children: n, size: i = 28, onClick: r, title: d }) => {
+  const [p, h] = _(!1);
   return /* @__PURE__ */ e(
     "div",
     {
       title: d,
-      onClick: o,
-      onMouseEnter: () => f(!0),
-      onMouseLeave: () => f(!1),
+      onClick: r,
+      onMouseEnter: () => h(!0),
+      onMouseLeave: () => h(!1),
       style: {
         display: "flex",
         alignItems: "center",
@@ -573,7 +572,7 @@ const lt = {
         width: i,
         height: i,
         borderRadius: 9999,
-        background: g ? "var(--surface-hover, #F3F7F7)" : "transparent",
+        background: p ? "var(--surface-hover, #F3F7F7)" : "transparent",
         cursor: "pointer",
         flexShrink: 0,
         transition: "background 0.15s"
@@ -581,24 +580,24 @@ const lt = {
       children: n
     }
   );
-}, dt = ({
+}, xt = ({
   signals: n = { signals: [], present_count: 0, total_signals_evaluated: 0 },
   expandedSignals: i = /* @__PURE__ */ new Set(),
-  toggleSignal: o = () => {
+  toggleSignal: r = () => {
   },
   playEvidence: d = () => {
   },
-  highlightTurns: g = () => {
+  highlightTurns: p = () => {
   },
-  onShowInTranscript: f = () => {
+  onShowInTranscript: h = () => {
   },
-  timelinePlaying: x = !1,
+  timelinePlaying: v = !1,
   currentTimeSeconds: y = 0
 }) => {
-  const u = (n == null ? void 0 : n.signals) ?? [], k = (n == null ? void 0 : n.present_count) ?? u.length, b = (s) => {
-    const r = Math.floor(s / 6e4), p = Math.floor(s % 6e4 / 1e3);
-    return `${r.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}`;
-  }, w = (s) => x && s.start_ms != null && y * 1e3 >= s.start_ms && y * 1e3 <= (s.end_ms ?? s.start_ms + 5e3);
+  const m = (n == null ? void 0 : n.signals) ?? [], w = (n == null ? void 0 : n.present_count) ?? m.length, S = (a) => {
+    const l = Math.floor(a / 6e4), f = Math.floor(a % 6e4 / 1e3);
+    return `${l.toString().padStart(2, "0")}:${f.toString().padStart(2, "0")}`;
+  }, W = (a) => v && a.start_ms != null && y * 1e3 >= a.start_ms && y * 1e3 <= (a.end_ms ?? a.start_ms + 5e3);
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -622,7 +621,7 @@ const lt = {
         borderRadius: 9999,
         background: "var(--surface-hover, #F3F7F7)",
         flexShrink: 0
-      }, children: /* @__PURE__ */ e(me, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      }, children: /* @__PURE__ */ e(xe, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
       /* @__PURE__ */ t("div", { style: {
         display: "flex",
         alignItems: "center",
@@ -639,7 +638,7 @@ const lt = {
           fontWeight: 500,
           color: "var(--Grey-Strong, #2E3236)"
         }, children: [
-          k,
+          w,
           " Signals Detected"
         ] })
       ] })
@@ -651,18 +650,18 @@ const lt = {
       background: "var(--Grey-White, #FFF)",
       gap: 8
     }, children: [
-      u.length === 0 && /* @__PURE__ */ e("div", { style: {
+      m.length === 0 && /* @__PURE__ */ e("div", { style: {
         padding: "8px 0",
         fontSize: 14,
         color: "var(--Grey-Muted, #808183)"
       }, children: "No signals detected." }),
-      u.map((s, r) => {
-        var W, I, G;
-        const p = s.key ?? s.id ?? r, h = i.has(p), D = ((W = s.observations) == null ? void 0 : W.length) ?? 0;
+      m.map((a, l) => {
+        var C, F, T;
+        const f = a.key ?? a.id ?? l, u = i.has(f), D = ((C = a.observations) == null ? void 0 : C.length) ?? 0;
         return /* @__PURE__ */ t(
           "div",
           {
-            id: `signal-${p}`,
+            id: `signal-${f}`,
             style: {
               display: "flex",
               flexDirection: "column",
@@ -673,7 +672,7 @@ const lt = {
               /* @__PURE__ */ t(
                 "button",
                 {
-                  onClick: () => o(p),
+                  onClick: () => r(f),
                   style: {
                     display: "flex",
                     padding: "8px 0",
@@ -695,7 +694,7 @@ const lt = {
                       color: "var(--text-dark, #0B0A0A)",
                       lineHeight: 1.71
                     }, children: [
-                      s.display_name || ((I = s.key) == null ? void 0 : I.replace(/_/g, " ")),
+                      a.display_name || ((F = a.key) == null ? void 0 : F.replace(/_/g, " ")),
                       D > 0 && /* @__PURE__ */ t("span", { style: {
                         fontWeight: 600,
                         color: "var(--text-dark, #0B0A0A)",
@@ -706,17 +705,17 @@ const lt = {
                         ")"
                       ] })
                     ] }),
-                    h ? /* @__PURE__ */ e(xe, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(be, { size: 20, color: "#767473" })
+                    u ? /* @__PURE__ */ e(be, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(Se, { size: 20, color: "#767473" })
                   ]
                 }
               ),
-              h && ((G = s.observations) == null ? void 0 : G.length) > 0 && /* @__PURE__ */ e("div", { style: {
+              u && ((T = a.observations) == null ? void 0 : T.length) > 0 && /* @__PURE__ */ e("div", { style: {
                 display: "flex",
                 flexDirection: "column",
                 alignSelf: "stretch",
                 gap: 0
-              }, children: s.observations.map((C, L) => {
-                var H, M, R;
+              }, children: a.observations.map((z, P) => {
+                var A, G, E;
                 return /* @__PURE__ */ t(
                   "div",
                   {
@@ -740,8 +739,8 @@ const lt = {
                           fontWeight: 400,
                           color: "var(--text-subtle-warm, #767473)",
                           lineHeight: 1.5
-                        }, children: C.reason || C.explanation }),
-                        ((M = (H = C.evidence) == null ? void 0 : H[0]) == null ? void 0 : M.start_ms) != null && /* @__PURE__ */ t(
+                        }, children: z.reason || z.explanation }),
+                        ((G = (A = z.evidence) == null ? void 0 : A[0]) == null ? void 0 : G.start_ms) != null && /* @__PURE__ */ t(
                           "div",
                           {
                             style: {
@@ -752,14 +751,14 @@ const lt = {
                             },
                             children: [
                               /* @__PURE__ */ e(
-                                ye,
+                                ue,
                                 {
                                   size: 28,
                                   title: "Show in transcript",
-                                  onClick: (z) => {
-                                    z.stopPropagation(), f(C.evidence[0].start_ms);
+                                  onClick: (I) => {
+                                    I.stopPropagation(), h(z.evidence[0].start_ms);
                                   },
-                                  children: /* @__PURE__ */ e(Oe, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                                  children: /* @__PURE__ */ e(Xe, { size: 16, color: "#808183", strokeWidth: 1.5 })
                                 }
                               ),
                               /* @__PURE__ */ e("span", { style: {
@@ -768,19 +767,19 @@ const lt = {
                                 color: "var(--Grey-Muted, #808183)",
                                 lineHeight: 1.2,
                                 whiteSpace: "nowrap"
-                              }, children: b(C.evidence[0].start_ms) })
+                              }, children: S(z.evidence[0].start_ms) })
                             ]
                           }
                         )
                       ] }),
-                      (R = C.evidence) == null ? void 0 : R.map((z, B) => z.text && /* @__PURE__ */ t(
+                      (E = z.evidence) == null ? void 0 : E.map((I, B) => I.text && /* @__PURE__ */ t(
                         "div",
                         {
                           onClick: ($) => {
-                            $.stopPropagation(), d(z);
+                            $.stopPropagation(), d(I);
                           },
-                          onMouseEnter: () => g(z.turn_ids ?? []),
-                          onMouseLeave: () => g([]),
+                          onMouseEnter: () => p(I.turn_ids ?? []),
+                          onMouseLeave: () => p([]),
                           style: {
                             display: "flex",
                             alignItems: "center",
@@ -789,11 +788,18 @@ const lt = {
                             cursor: "pointer"
                           },
                           children: [
-                            /* @__PURE__ */ e(ye, { size: 28, children: /* @__PURE__ */ e(
-                              Ue,
+                            /* @__PURE__ */ e(ue, { size: 28, children: W(I) ? /* @__PURE__ */ e(
+                              Je,
                               {
                                 size: 17,
-                                color: w(z) ? "var(--rail-orange, #C98A5A)" : "var(--Grey-Muted, #808183)",
+                                color: "var(--Grey-Muted, #808183)",
+                                strokeWidth: 1.5
+                              }
+                            ) : /* @__PURE__ */ e(
+                              et,
+                              {
+                                size: 17,
+                                color: "var(--Grey-Muted, #808183)",
                                 strokeWidth: 1
                               }
                             ) }),
@@ -804,7 +810,7 @@ const lt = {
                               lineHeight: 1.2
                             }, children: [
                               "“",
-                              z.text,
+                              I.text,
                               "”"
                             ] })
                           ]
@@ -813,17 +819,17 @@ const lt = {
                       ))
                     ]
                   },
-                  C.key ?? L
+                  z.key ?? P
                 );
               }) })
             ]
           },
-          p
+          f
         );
       })
     ] })
   ] });
-}, S = {
+}, k = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
   absent: "var(--Grey-absent, #D9D9D9)",
@@ -831,43 +837,43 @@ const lt = {
   accent: "var(--rail-orange, #C98A5A)",
   track: "var(--rail-surface-2, #E3E1D7)",
   infoIcon: "var(--color-input-border, #ACACAD)"
-}, ct = ({ score: n = 4, maxScore: i = 10 }) => {
-  const k = Math.min(Math.round(n / i * 5), 5), b = 180 / 5, w = (p) => {
-    const h = p * Math.PI / 180;
+}, bt = ({ score: n = 4, maxScore: i = 10 }) => {
+  const w = Math.min(Math.round(n / i * 5), 5), S = 180 / 5, W = (f) => {
+    const u = f * Math.PI / 180;
     return {
-      x: 121.5 + 85 * Math.cos(h),
-      y: 123 - 85 * Math.sin(h)
+      x: 121.5 + 85 * Math.cos(u),
+      y: 123 - 85 * Math.sin(u)
     };
-  }, s = (p, h) => {
-    const D = w(p), W = w(h), I = p - h > 180 ? 1 : 0;
-    return `M ${D.x} ${D.y} A 85 85 0 ${I} 1 ${W.x} ${W.y}`;
-  }, r = 2;
-  return /* @__PURE__ */ e("svg", { width: 243, height: 130, viewBox: "0 0 243 130", fill: "none", children: Array.from({ length: 5 }, (p, h) => {
-    const D = 180 - h * b - (h > 0 ? r / 2 : 0), W = 180 - (h + 1) * b + (h < 5 - 1 ? r / 2 : 0), I = h < k;
+  }, a = (f, u) => {
+    const D = W(f), C = W(u), F = f - u > 180 ? 1 : 0;
+    return `M ${D.x} ${D.y} A 85 85 0 ${F} 1 ${C.x} ${C.y}`;
+  }, l = 2;
+  return /* @__PURE__ */ e("svg", { width: 243, height: 130, viewBox: "0 0 243 130", fill: "none", children: Array.from({ length: 5 }, (f, u) => {
+    const D = 180 - u * S - (u > 0 ? l / 2 : 0), C = 180 - (u + 1) * S + (u < 5 - 1 ? l / 2 : 0), F = u < w;
     return /* @__PURE__ */ e(
       "path",
       {
-        d: s(D, W),
-        stroke: I ? S.strong : S.track,
+        d: a(D, C),
+        stroke: F ? k.strong : k.track,
         strokeWidth: 30,
         strokeLinecap: "butt",
         fill: "none"
       },
-      h
+      u
     );
   }) });
-}, gt = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (o, d) => /* @__PURE__ */ e(
+}, St = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (r, d) => /* @__PURE__ */ e(
   "div",
   {
     style: {
       width: 22,
       height: 6,
       borderRadius: 1,
-      background: d < n ? S.strong : S.track
+      background: d < n ? k.strong : k.track
     }
   },
   d
-)) }), pt = ({ label: n, value: i = 0, maxValue: o = 5 }) => /* @__PURE__ */ t("div", { style: {
+)) }), kt = ({ label: n, value: i = 0, maxValue: r = 5 }) => /* @__PURE__ */ t("div", { style: {
   display: "flex",
   flexDirection: "column",
   gap: 8,
@@ -882,34 +888,34 @@ const lt = {
     /* @__PURE__ */ e("span", { style: {
       fontSize: 12,
       fontWeight: 400,
-      color: S.strong,
+      color: k.strong,
       fontFamily: "var(--font-sans)",
       lineHeight: "normal"
     }, children: n }),
-    /* @__PURE__ */ e(qe, { size: 14, color: S.infoIcon, strokeWidth: 1 })
+    /* @__PURE__ */ e(tt, { size: 14, color: k.infoIcon, strokeWidth: 1 })
   ] }),
-  /* @__PURE__ */ e(gt, { value: i, maxValue: o })
-] }), ft = ({
+  /* @__PURE__ */ e(St, { value: i, maxValue: r })
+] }), wt = ({
   score: n = 83,
   maxScore: i = 100,
-  predictedScore: o = 4,
+  predictedScore: r = 4,
   predictedLabel: d = "Predicted Objective",
-  description: g = "",
-  legends: f = [
+  description: p = "",
+  legends: h = [
     { label: "CSAT", value: 3 },
     { label: "Resolution", value: 4 },
     { label: "Process Adherence", value: 5 },
     { label: "Communication", value: 3 }
   ]
 }) => {
-  const x = String(o).padStart(2, "0");
+  const v = String(r).padStart(2, "0");
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     flexDirection: "column",
     padding: 24,
     borderRadius: 8,
-    border: `1px solid ${S.absent}`,
-    background: S.white,
+    border: `1px solid ${k.absent}`,
+    background: k.white,
     alignSelf: "stretch",
     gap: 24
   }, children: [
@@ -921,17 +927,17 @@ const lt = {
       /* @__PURE__ */ e("span", { style: {
         fontSize: 15,
         fontWeight: 600,
-        color: S.strong,
+        color: k.strong,
         fontFamily: "var(--font-sans)",
         lineHeight: 1.2
       }, children: "Compass Score" }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 14,
         fontWeight: 400,
-        color: S.muted,
+        color: k.muted,
         fontFamily: "var(--font-sans)",
         lineHeight: "normal"
-      }, children: g })
+      }, children: p })
     ] }),
     /* @__PURE__ */ t("div", { style: {
       display: "flex",
@@ -947,7 +953,7 @@ const lt = {
         alignItems: "center",
         flexShrink: 0
       }, children: [
-        /* @__PURE__ */ e(ct, { score: n, maxScore: i }),
+        /* @__PURE__ */ e(bt, { score: n, maxScore: i }),
         /* @__PURE__ */ t("svg", { width: "34", height: "35", viewBox: "0 0 34 35", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginTop: -24 }, children: [
           /* @__PURE__ */ e("path", { d: "M16 25.2169C19.958 25.2169 23.1667 22.0083 23.1667 18.0503C23.1667 14.0922 19.958 10.8836 16 10.8836C12.042 10.8836 8.83334 14.0922 8.83334 18.0503C8.83334 22.0083 12.042 25.2169 16 25.2169Z", fill: "var(--rail-orange, #C98A5A)" }),
           /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.4791 11.2328L33.4351 0L21.6888 3.09113C19.9212 2.41855 18.0036 2.05025 16 2.05025C7.16344 2.05025 0 9.2137 0 18.0503C0 26.8868 7.16344 34.0503 16 34.0503C24.8366 34.0503 32 26.8868 32 18.0503C32 15.6119 31.4546 13.301 30.4791 11.2328ZM16 30.5503C22.9036 30.5503 28.5 24.9538 28.5 18.0503C28.5 11.1467 22.9036 5.55025 16 5.55025C9.09644 5.55025 3.5 11.1467 3.5 18.0503C3.5 24.9538 9.09644 30.5503 16 30.5503Z", fill: "var(--rail-orange, #C98A5A)" })
@@ -955,7 +961,7 @@ const lt = {
         /* @__PURE__ */ e("div", { style: {
           fontSize: 28,
           fontWeight: 400,
-          color: S.strong,
+          color: k.strong,
           fontFamily: "var(--font-sans)",
           lineHeight: 1,
           textAlign: "center",
@@ -978,15 +984,15 @@ const lt = {
           /* @__PURE__ */ e("div", { style: {
             fontSize: 28,
             fontWeight: 400,
-            color: S.strong,
+            color: k.strong,
             fontFamily: "var(--font-sans)",
             lineHeight: 1,
             textAlign: "center"
-          }, children: x }),
+          }, children: v }),
           /* @__PURE__ */ e("div", { style: {
             fontSize: 14,
             fontWeight: 400,
-            color: S.muted,
+            color: k.muted,
             fontFamily: "var(--font-sans)",
             lineHeight: 1.43,
             textAlign: "center"
@@ -995,91 +1001,108 @@ const lt = {
         /* @__PURE__ */ e("div", { style: {
           width: "100%",
           height: 1,
-          background: S.absent
+          background: k.absent
         } }),
-        f.map((y, u) => /* @__PURE__ */ e(
-          pt,
+        h.map((y, m) => /* @__PURE__ */ e(
+          kt,
           {
             label: y.label,
             value: y.value
           },
-          u
+          m
         ))
       ] })
     ] })
   ] });
-}, ht = [
+}, Wt = [
   { key: "overview", label: "Overview" },
   { key: "coaching", label: "Coaching Summary" },
   { key: "signals", label: "Signals & Recording" },
   { key: "comments", label: "Comments" }
-], bt = ({
+], _t = ({
   title: n = "Wheel Stud Replacement Enquiry",
   onBack: i,
   // Data props — all optional with defaults for demo
-  data: o,
+  data: r,
   coachingData: d,
-  audioUrl: g,
+  audioUrl: p,
   // 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: x,
+  audioRef: h,
+  currentTimeSeconds: v,
   timelinePlaying: y,
-  playbackRate: u,
-  timelineSegments: k,
-  onSeek: b,
-  onTogglePlay: w,
-  onSeekBack: s,
-  onSeekForward: r,
-  onSetPlaybackRate: p,
+  playbackRate: m,
+  timelineSegments: w,
+  onSeek: S,
+  onTogglePlay: W,
+  onSeekBack: a,
+  onSeekForward: l,
+  onSetPlaybackRate: f,
   // Speaker names
-  agentName: h,
+  agentName: u,
   customerName: D,
   // Transcript props — pass real transcript data from the host app
-  transcript: W,
-  activeTurnIndex: I,
-  turnObservations: G,
-  highlightedTurns: C,
-  onTurnPlayPause: L,
+  transcript: C,
+  activeTurnIndex: F,
+  turnObservations: T,
+  highlightedTurns: z,
+  onTurnPlayPause: P,
+  // Signal evidence playback — host app can provide to play audio segments from signals
+  onPlayEvidence: A,
+  onHighlightTurns: G,
   // Footer navigation
-  prevSessionTitle: H,
-  prevSessionDesc: M,
-  nextSessionTitle: R,
-  nextSessionDesc: z,
-  onPreviousSession: B,
-  onNextSession: $
+  prevSessionTitle: E,
+  prevSessionDesc: I,
+  nextSessionTitle: B,
+  nextSessionDesc: $,
+  onPreviousSession: ke,
+  onNextSession: we
 }) => {
-  var re, le;
-  const [P, Se] = A("overview"), [ke, q] = A(/* @__PURE__ */ new Set()), [N, we] = A(!1), [V, Y] = A(null), j = _(null), Q = _(null), K = _(null), Z = _(null), X = _(null), De = { overview: Q, coaching: K, signals: Z, comments: X }, We = (a) => {
-    Se(a);
-    const v = De[a];
-    v != null && v.current && v.current.scrollIntoView({ behavior: "smooth", block: "start" });
-  }, Ce = [
+  var le, se;
+  const [j, We] = _("overview"), [De, q] = _(/* @__PURE__ */ new Set()), [N, Ce] = _(!1), [V, Y] = _(null), [ze, Q] = _(!1), [Ie, Fe] = _(0), M = H(null), K = H(null), Z = H(null), X = H(null), J = H(null), _e = { overview: K, coaching: Z, signals: X, comments: J }, Ae = (o) => {
+    We(o);
+    const g = _e[o];
+    g != null && g.current && g.current.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, Ge = [
     { title: "Tire Repair Appointment", date: "11/12/2025, 2:30:00 PM" },
     { title: "Quote Confirmation", date: "10/1/2025, 9:00:00 AM" },
     { title: "Automative Repair Enquiry", date: "09/15/2025, 11:45:00 AM" },
     { title: "Vehicle Inspection Reminder", date: "07/20/2025, 1:00:00 PM" },
     { title: "Oil Change Service", date: "05/5/2025, 10:00:00 AM" }
-  ], ze = (a) => {
-    var F;
-    const v = a / 1e3;
-    (F = j.current) != null && F.seekTo && j.current.seekTo(v);
-  }, Fe = (a) => {
-    q((v) => {
-      const F = new Set(v);
-      return F.has(a) ? F.delete(a) : F.add(a), F;
+  ], Me = (o) => {
+    var b;
+    const g = o / 1e3;
+    (b = M.current) != null && b.seekTo && M.current.seekTo(g);
+  }, He = (o) => {
+    var g;
+    if (A)
+      A(o);
+    else {
+      const b = o.start_ms ?? o.startMs;
+      if (b != null && ((g = M.current) != null && g.seekTo)) {
+        M.current.seekTo(b / 1e3), Q(!0), Fe(b / 1e3);
+        const Ve = (o.end_ms ?? o.endMs ?? b + 5e3) - b;
+        setTimeout(() => Q(!1), Ve);
+      }
+    }
+  }, Te = (o) => {
+    G && G(o);
+  }, Ee = (o) => {
+    q((g) => {
+      const b = new Set(g);
+      return b.has(o) ? b.delete(o) : b.add(o), b;
     });
-  }, Ie = (o == null ? void 0 : o.blocks) || [], E = (a) => {
-    var v;
-    return ((v = Ie.find((F) => F.block_id === a)) == null ? void 0 : v.payload) || {};
-  }, O = E("interaction-metadata"), J = E("interaction-context"), T = E("interaction-signals"), ee = E("interaction-outcome-lift"), _e = J.call_purpose || {}, Ae = J.classification || {}, te = { duration_seconds: 156, message_count: 25, ...O }, ne = { interaction_driver: "General Information", interaction_direction: "inbound", ..._e }, Ge = { interaction_paradigm: "Informational", ...Ae }, He = { p_expected: 0.94, p_full: 0.83, lift_raw: -0.11, lift: 0.043, interpretation: { lift_band: "positive" }, ...ee }, Me = ((re = ee.driver_signal_keys) == null ? void 0 : re.map((a) => a.replace(/^sig\./, "").replace(/_/g, " "))) || [
+  }, Re = (r == null ? void 0 : r.blocks) || [], R = (o) => {
+    var g;
+    return ((g = Re.find((b) => b.block_id === o)) == null ? void 0 : g.payload) || {};
+  }, O = R("interaction-metadata"), ee = R("interaction-context"), L = R("interaction-signals"), te = R("interaction-outcome-lift"), Le = ee.call_purpose || {}, Pe = ee.classification || {}, ne = { duration_seconds: 156, message_count: 25, ...O }, ie = { interaction_driver: "General Information", interaction_direction: "inbound", ...Le }, Be = { interaction_paradigm: "Informational", ...Pe }, $e = { p_expected: 0.94, p_full: 0.83, lift_raw: -0.11, lift: 0.043, interpretation: { lift_band: "positive" }, ...te }, je = ((le = te.driver_signal_keys) == null ? void 0 : le.map((o) => o.replace(/^sig\./, "").replace(/_/g, " "))) || [
     "customer needs fully addressed",
     "call flow expectations set",
     "Opening expectations set",
     "Active listening demonstrated",
     "Resolution confirmed"
-  ], Re = d || {
+  ], Oe = d || {
     one_liner: "David provided the customer with information on wheel stud replacement and pricing, but did not secure an appointment.",
     context: "The customer was seeking information on wheel stud replacement for a 2013 Chevy Bolt and was unsure about doing the repair themselves.",
     strengths: [
@@ -1092,7 +1115,7 @@ const lt = {
       { text: "Frame solutions positively by leading with what can be done rather than limitations.", quote: "I don't have the alignment changeover the weekend." }
     ],
     overall: "effective"
-  }, Ee = (le = T == null ? void 0 : T.signals) != null && le.length ? T : {
+  }, Ue = (se = L == null ? void 0 : L.signals) != null && se.length ? L : {
     present_count: 9,
     total_signals_evaluated: 146,
     signals: [
@@ -1118,7 +1141,7 @@ const lt = {
       { key: "prototype_developed", display_name: "Prototype Developed", observations: [{ key: "obs8a", reason: "Prototype shared." }, { key: "obs8b", reason: "Testing initiated." }, { key: "obs8c", reason: "Feedback collected." }, { key: "obs8d", reason: "Iterations completed." }, { key: "obs8e", reason: "Usability tested." }, { key: "obs8f", reason: "Design finalized." }, { key: "obs8g", reason: "Stakeholder demo done." }] },
       { key: "user_testing", display_name: "User Testing Scheduled", observations: [{ key: "obs9a", reason: "Testing sessions planned." }, { key: "obs9b", reason: "Participants recruited." }, { key: "obs9c", reason: "Test scripts prepared." }, { key: "obs9d", reason: "Environment set up." }, { key: "obs9e", reason: "Accessibility testing included." }, { key: "obs9f", reason: "Results framework defined." }, { key: "obs9g", reason: "Timeline confirmed." }, { key: "obs9h", reason: "Backup plan discussed." }] }
     ]
-  }, ie = h || "Agent", U = D || "Customer", oe = 8, Te = O.evaluated_dt ? new Date(O.evaluated_dt).toLocaleString() : "3/29/2026, 8:30:00 AM", Le = ne.interaction_direction === "inbound" ? "Inbound" : "Outbound";
+  }, oe = u || "Agent", U = D || "Customer", re = 8, qe = O.evaluated_dt ? new Date(O.evaluated_dt).toLocaleString() : "3/29/2026, 8:30:00 AM", Ne = ie.interaction_direction === "inbound" ? "Inbound" : "Outbound";
   return /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", width: "100%", background: "var(--Grey-White, #FFF)" }, children: [
     /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "24px 24px 0" }, children: [
       /* @__PURE__ */ e(
@@ -1135,7 +1158,7 @@ const lt = {
             padding: 0,
             flexShrink: 0
           },
-          children: /* @__PURE__ */ e(se, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
+          children: /* @__PURE__ */ e(ae, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
         }
       ),
       /* @__PURE__ */ e("div", { style: { width: 1, height: 28, background: "var(--Base-absent, #D9D9D9)" } }),
@@ -1155,10 +1178,10 @@ const lt = {
       borderBottom: "1px solid var(--Grey-Faint, #ACADAD)",
       padding: "0 24px",
       marginTop: 8
-    }, children: ht.map((a) => /* @__PURE__ */ e(
+    }, children: Wt.map((o) => /* @__PURE__ */ e(
       "button",
       {
-        onClick: () => We(a.key),
+        onClick: () => Ae(o.key),
         style: {
           display: "flex",
           padding: 16,
@@ -1166,20 +1189,20 @@ const lt = {
           gap: 10,
           background: "none",
           border: "none",
-          borderBottom: P === a.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
+          borderBottom: j === o.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
           cursor: "pointer",
           fontSize: 15,
-          fontWeight: P === a.key ? 500 : 400,
-          color: P === a.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
+          fontWeight: j === o.key ? 500 : 400,
+          color: j === o.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
           whiteSpace: "nowrap",
           transition: "border-color 0.2s ease, color 0.2s ease"
         },
-        children: a.label
+        children: o.label
       },
-      a.key
+      o.key
     )) }),
     /* @__PURE__ */ t("div", { style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
-      /* @__PURE__ */ t("div", { ref: Q, style: {
+      /* @__PURE__ */ t("div", { ref: K, style: {
         display: "flex",
         flexDirection: "column",
         justifyContent: "flex-end",
@@ -1195,7 +1218,7 @@ const lt = {
           alignSelf: "stretch"
         }, children: [
           /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
-            /* @__PURE__ */ e(Ne, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
+            /* @__PURE__ */ e(nt, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
             /* @__PURE__ */ e("span", { style: {
               fontSize: 16,
               fontWeight: 600,
@@ -1206,12 +1229,12 @@ const lt = {
           ] }),
           /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 16, flexShrink: 0 }, children: [
             /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-              /* @__PURE__ */ e(Ve, { 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: Te })
+              /* @__PURE__ */ e(it, { 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: qe })
             ] }),
             /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-              /* @__PURE__ */ e(Ye, { 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: Le })
+              /* @__PURE__ */ e(ot, { 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: Ne })
             ] }),
             /* @__PURE__ */ t("div", { style: {
               display: "flex",
@@ -1221,15 +1244,15 @@ const lt = {
               borderLeft: "1px solid var(--Grey-absent, #D9D9D9)"
             }, children: [
               /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-                /* @__PURE__ */ e(Qe, { 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: ie })
+                /* @__PURE__ */ e(rt, { 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: oe })
               ] }),
-              /* @__PURE__ */ e(Ke, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(lt, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
               /* @__PURE__ */ t("div", { style: { position: "relative" }, children: [
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => we((a) => !a),
+                    onClick: () => Ce((o) => !o),
                     style: {
                       display: "flex",
                       alignItems: "center",
@@ -1240,14 +1263,14 @@ const lt = {
                       cursor: "pointer"
                     },
                     children: [
-                      /* @__PURE__ */ e(ae, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                      /* @__PURE__ */ e(de, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                       /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", lineHeight: 1.2 }, children: [
                         U,
                         " (",
-                        oe,
+                        re,
                         " Sessions)"
                       ] }),
-                      N ? /* @__PURE__ */ e(xe, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(be, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
+                      N ? /* @__PURE__ */ e(be, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(Se, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
                     ]
                   }
                 ),
@@ -1270,7 +1293,7 @@ const lt = {
                     gap: 8,
                     padding: 16
                   }, children: [
-                    /* @__PURE__ */ e(ae, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5, style: { marginTop: 2, flexShrink: 0 } }),
+                    /* @__PURE__ */ e(de, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5, style: { marginTop: 2, flexShrink: 0 } }),
                     /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
                       /* @__PURE__ */ e("span", { style: {
                         fontSize: 16,
@@ -1284,15 +1307,15 @@ const lt = {
                         color: "var(--Grey-Muted, #808183)",
                         lineHeight: 1
                       }, children: [
-                        oe,
+                        re,
                         " Sessions in past"
                       ] })
                     ] })
                   ] }),
-                  Ce.map((a, v) => /* @__PURE__ */ t(
+                  Ge.map((o, g) => /* @__PURE__ */ t(
                     "div",
                     {
-                      onMouseEnter: () => Y(v),
+                      onMouseEnter: () => Y(g),
                       onMouseLeave: () => Y(null),
                       style: {
                         display: "flex",
@@ -1300,7 +1323,7 @@ const lt = {
                         padding: "12px 16px",
                         justifyContent: "space-between",
                         alignItems: "center",
-                        background: V === v ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                        background: V === g ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
                         borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
                         cursor: "pointer",
                         boxSizing: "border-box",
@@ -1313,18 +1336,18 @@ const lt = {
                             fontWeight: 400,
                             color: "var(--Grey-Strong, #2E3236)",
                             lineHeight: 1
-                          }, children: a.title }),
+                          }, children: o.title }),
                           /* @__PURE__ */ e("span", { style: {
                             fontSize: 12,
                             fontWeight: 400,
                             color: "var(--Grey-Muted, #808183)",
                             lineHeight: 1
-                          }, children: a.date })
+                          }, children: o.date })
                         ] }),
-                        V === v && /* @__PURE__ */ e(ve, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
+                        V === g && /* @__PURE__ */ e(me, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
                       ]
                     },
-                    v
+                    g
                   )),
                   /* @__PURE__ */ e("div", { style: {
                     padding: 16,
@@ -1343,7 +1366,7 @@ const lt = {
                     borderRadius: 10,
                     cursor: "pointer"
                   }, children: [
-                    /* @__PURE__ */ e(Ze, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                    /* @__PURE__ */ e(st, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                     /* @__PURE__ */ e("span", { style: {
                       fontSize: 14,
                       fontWeight: 600,
@@ -1361,7 +1384,7 @@ const lt = {
           gap: 24,
           alignSelf: "stretch"
         }, children: [
-          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(ft, {}) }),
+          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(wt, {}) }),
           /* @__PURE__ */ t("div", { style: {
             display: "flex",
             flexDirection: "column",
@@ -1372,26 +1395,26 @@ const lt = {
             minWidth: 0
           }, children: [
             /* @__PURE__ */ e(
-              st,
+              vt,
               {
-                meta: te,
-                callPurpose: ne,
-                classification: Ge,
+                meta: ne,
+                callPurpose: ie,
+                classification: Be,
                 outcomeQuality: "Neutral"
               }
             ),
             /* @__PURE__ */ e(
-              at,
+              mt,
               {
-                outcomeLift: He,
-                driverLabels: Me
+                outcomeLift: $e,
+                driverLabels: je
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { ref: K, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(ot, { data: Re }) }),
-      /* @__PURE__ */ t("div", { ref: Z, style: {
+      /* @__PURE__ */ e("div", { ref: Z, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(ht, { data: Oe }) }),
+      /* @__PURE__ */ t("div", { ref: X, style: {
         display: "flex",
         flexDirection: "column",
         gap: 16,
@@ -1403,7 +1426,7 @@ const lt = {
           alignItems: "center",
           gap: 8
         }, children: [
-          /* @__PURE__ */ e(me, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
+          /* @__PURE__ */ e(xe, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
           /* @__PURE__ */ e("span", { style: {
             fontSize: 16,
             fontWeight: 600,
@@ -1421,43 +1444,47 @@ const lt = {
           borderTop: "1px solid #D9D9D9"
         }, children: [
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            dt,
+            xt,
             {
-              signals: Ee,
-              expandedSignals: ke,
-              toggleSignal: Fe,
-              onShowInTranscript: ze
+              signals: Ue,
+              expandedSignals: De,
+              toggleSignal: Ee,
+              playEvidence: He,
+              highlightTurns: Te,
+              onShowInTranscript: Me,
+              timelinePlaying: y || ze,
+              currentTimeSeconds: v ?? Ie
             }
           ) }),
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            Je,
+            dt,
             {
-              ref: j,
-              audioUrl: g,
-              durationSeconds: te.duration_seconds,
-              audioRef: f,
-              agentName: ie,
+              ref: M,
+              audioUrl: p,
+              durationSeconds: ne.duration_seconds,
+              audioRef: h,
+              agentName: oe,
               customerName: U.split(" ")[0],
-              currentTimeSeconds: x,
+              currentTimeSeconds: v,
               timelinePlaying: y,
-              playbackRate: u,
-              timelineSegments: k,
-              onSeek: b,
-              onTogglePlay: w,
-              onSeekBack: s,
-              onSeekForward: r,
-              onSetPlaybackRate: p,
-              transcript: W,
-              activeTurnIndex: I,
-              turnObservations: G,
-              highlightedTurns: C,
-              onTurnPlayPause: L,
+              playbackRate: m,
+              timelineSegments: w,
+              onSeek: S,
+              onTogglePlay: W,
+              onSeekBack: a,
+              onSeekForward: l,
+              onSetPlaybackRate: f,
+              transcript: C,
+              activeTurnIndex: F,
+              turnObservations: T,
+              highlightedTurns: z,
+              onTurnPlayPause: P,
               setExpandedSignals: q
             }
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { ref: X, style: { paddingTop: 24 }, children: /* @__PURE__ */ e("div", { style: { fontSize: 14, color: "var(--Grey-Muted, #808183)", fontFamily: "var(--font-sans)" }, children: "No comments yet." }) })
+      /* @__PURE__ */ e("div", { ref: J, style: { paddingTop: 24 }, children: /* @__PURE__ */ e("div", { style: { fontSize: 14, color: "var(--Grey-Muted, #808183)", fontFamily: "var(--font-sans)" }, children: "No comments yet." }) })
     ] }),
     /* @__PURE__ */ t("div", { style: {
       display: "flex",
@@ -1468,7 +1495,7 @@ const lt = {
       /* @__PURE__ */ t(
         "button",
         {
-          onClick: B,
+          onClick: ke,
           style: {
             display: "flex",
             alignItems: "center",
@@ -1480,7 +1507,7 @@ const lt = {
             cursor: "pointer"
           },
           children: [
-            /* @__PURE__ */ e(se, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 }),
+            /* @__PURE__ */ e(ae, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 }),
             /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
               /* @__PURE__ */ e("span", { style: {
                 fontSize: 14,
@@ -1488,7 +1515,7 @@ const lt = {
                 color: "#000",
                 lineHeight: 1.2,
                 textAlign: "left"
-              }, children: H || "Previous Session Title" }),
+              }, children: E || "Previous Session Title" }),
               /* @__PURE__ */ e("span", { style: {
                 fontSize: 13,
                 fontWeight: 400,
@@ -1496,7 +1523,7 @@ const lt = {
                 lineHeight: 1.2,
                 opacity: 0.5,
                 textAlign: "left"
-              }, children: M || "Short description of the session" })
+              }, children: I || "Short description of the session" })
             ] })
           ]
         }
@@ -1504,7 +1531,7 @@ const lt = {
       /* @__PURE__ */ t(
         "button",
         {
-          onClick: $,
+          onClick: we,
           style: {
             display: "flex",
             alignItems: "center",
@@ -1524,7 +1551,7 @@ const lt = {
                 color: "#000",
                 lineHeight: 1.2,
                 textAlign: "left"
-              }, children: R || "Next Session Title" }),
+              }, children: B || "Next Session Title" }),
               /* @__PURE__ */ e("span", { style: {
                 fontSize: 13,
                 fontWeight: 400,
@@ -1532,9 +1559,9 @@ const lt = {
                 lineHeight: 1.2,
                 opacity: 0.5,
                 textAlign: "left"
-              }, children: z || "Short description of the session" })
+              }, children: $ || "Short description of the session" })
             ] }),
-            /* @__PURE__ */ e(Xe, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 })
+            /* @__PURE__ */ e(at, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 })
           ]
         }
       )
@@ -1542,12 +1569,12 @@ const lt = {
   ] });
 };
 export {
-  ot as UpdatedCoachingSynthesisCard,
-  ft as UpdatedCompassScore,
-  st as UpdatedInteractionContext,
-  bt as UpdatedInteractionDetails,
-  Je as UpdatedInteractionRecording,
-  at as UpdatedInteractionScores,
-  dt as UpdatedInteractionSignals
+  ht as UpdatedCoachingSynthesisCard,
+  wt as UpdatedCompassScore,
+  vt as UpdatedInteractionContext,
+  _t as UpdatedInteractionDetails,
+  dt as UpdatedInteractionRecording,
+  mt as UpdatedInteractionScores,
+  xt as UpdatedInteractionSignals
 };
 //# sourceMappingURL=UpdatedInteractionDetails.es.js.map