chordia-ui 3.4.0 → 3.4.2

package/dist/components/UpdatedInteractionDetails.es.js

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import me, { useState as M, useRef as xe } from "react";
-import { ShieldCheck as be, TrendingUp as Se, Lightbulb as ke, ThumbsUp as re, ExternalLink as le, FileSignal as se, ChevronUp as ae, ChevronDown as de, ScrollText as De, PlayCircle as We, Info as we, ArrowLeft as V, ClipboardList as Ce, CalendarDays as ze, PhoneIncoming as Fe, Headset as Ie, Repeat as _e, CircleUser as Y, History as Ae, ArrowRight as Ge } from "lucide-react";
-import { U as Q } from "../UpdatedInteractionRecording.es.js";
+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";
 const c = {
   strong: "var(--Grey-Strong, #2E3236)",
@@ -12,17 +12,17 @@ const c = {
   quoteLine: "var(--border-warm, #B2AEA8)",
   quoteText: "var(--text-subtle-warm, #767473)",
   iconBg: "var(--surface-hover, #F3F7F7)"
-}, He = {
+}, et = {
   effective: "Effective",
   strong: "Strong",
   needs_improvement: "Needs Improvement",
   mixed: "Mixed"
-}, K = "updated-coaching-synthesis-keyframes";
-function Me() {
-  if (typeof document > "u" || document.getElementById(K))
+}, de = "updated-coaching-synthesis-keyframes";
+function tt() {
+  if (typeof document > "u" || document.getElementById(de))
     return;
   const n = document.createElement("style");
-  n.id = K, n.textContent = `
+  n.id = de, n.textContent = `
     @keyframes updated-coaching-shimmer {
       0% { background-position: -200% 0; }
       100% { background-position: 200% 0; }
@@ -33,8 +33,8 @@ function Me() {
     }
   `, document.head.appendChild(n);
 }
-function Ee({ overall: n }) {
-  const i = He[n] || (n ? n.replace(/_/g, " ") : "");
+function nt({ overall: n }) {
+  const i = et[n] || (n ? n.replace(/_/g, " ") : "");
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     alignItems: "center",
@@ -53,7 +53,7 @@ function Ee({ overall: n }) {
       alignItems: "center",
       gap: 6
     }, children: [
-      /* @__PURE__ */ e(re, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+      /* @__PURE__ */ e(ue, { size: 14, color: c.strong, strokeWidth: 1.5 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 13,
         fontWeight: 600,
@@ -64,7 +64,7 @@ function Ee({ overall: n }) {
     ] })
   ] });
 }
-function Te({ item: 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;
   return /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
     /* @__PURE__ */ e("div", { style: {
@@ -98,7 +98,7 @@ function Te({ item: n }) {
     ] })
   ] });
 }
-function Z({ icon: n, label: i, items: o }) {
+function ce({ icon: n, label: i, items: o }) {
   return !o || o.length === 0 ? null : /* @__PURE__ */ t("div", { style: {
     flex: 1,
     display: "flex",
@@ -129,13 +129,13 @@ function Z({ icon: n, label: i, items: o }) {
         lineHeight: "normal"
       }, children: i })
     ] }),
-    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: o.map((a, p) => /* @__PURE__ */ e(Te, { item: a }, p)) })
+    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: o.map((d, g) => /* @__PURE__ */ e(it, { item: d }, g)) })
   ] });
 }
-const X = ({ data: n, loading: i, error: o }) => {
+const ot = ({ data: n, loading: i, error: o }) => {
   var y, u;
-  if (me.useEffect(() => {
-    Me();
+  if (Be.useEffect(() => {
+    tt();
   }, []), i)
     return /* @__PURE__ */ t("div", { style: {
       display: "flex",
@@ -184,7 +184,7 @@ const X = ({ data: n, loading: i, error: o }) => {
     }, children: "Unable to generate coaching summary." });
   if (!n)
     return null;
-  const a = n.strengths || [], p = n.improvements || [], h = 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 || [], 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) || "";
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -196,7 +196,7 @@ const X = ({ data: n, loading: i, error: o }) => {
       alignItems: "center",
       gap: 8
     }, children: [
-      /* @__PURE__ */ e(be, { size: 20, color: c.accent, strokeWidth: 2 }),
+      /* @__PURE__ */ e($e, { size: 20, color: c.accent, strokeWidth: 2 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 16,
         fontWeight: 600,
@@ -206,13 +206,13 @@ const X = ({ data: n, loading: i, error: o }) => {
         textTransform: "uppercase"
       }, children: "Coaching Summary" })
     ] }),
-    h && /* @__PURE__ */ e("div", { style: {
+    f && /* @__PURE__ */ e("div", { style: {
       fontSize: 14,
       fontWeight: 500,
       color: c.strong,
       fontFamily: "var(--font-sans)",
       lineHeight: 1.5
-    }, children: h }),
+    }, children: f }),
     /* @__PURE__ */ t("div", { style: {
       display: "flex",
       alignItems: "flex-start",
@@ -227,38 +227,38 @@ const X = ({ data: n, loading: i, error: o }) => {
         lineHeight: 1.5,
         flex: 1
       }, children: x }),
-      n.overall && /* @__PURE__ */ e(Ee, { overall: n.overall })
+      n.overall && /* @__PURE__ */ e(nt, { overall: n.overall })
     ] }),
-    (a.length > 0 || p.length > 0) && /* @__PURE__ */ t("div", { style: {
+    (d.length > 0 || g.length > 0) && /* @__PURE__ */ t("div", { style: {
       display: "flex",
       gap: 24,
       paddingTop: 24,
       borderTop: `1px solid ${c.absent}`
     }, children: [
       /* @__PURE__ */ e(
-        Z,
+        ce,
         {
-          icon: /* @__PURE__ */ e(Se, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(Pe, { size: 14, color: c.strong, strokeWidth: 1.5 }),
           label: "Key Strengths",
-          items: a
+          items: d
         }
       ),
       /* @__PURE__ */ e(
-        Z,
+        ce,
         {
-          icon: /* @__PURE__ */ e(ke, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(je, { size: 14, color: c.strong, strokeWidth: 1.5 }),
           label: "Improvements",
-          items: p
+          items: g
         }
       )
     ] })
   ] });
 };
-function Re(n) {
+function rt(n) {
   const i = Math.floor(n / 60), o = Math.round(n % 60);
   return `${i}:${o.toString().padStart(2, "0")}`;
 }
-const Le = {
+const lt = {
   display: "flex",
   justifyContent: "space-between",
   padding: "8px 8px 12px 8px",
@@ -269,34 +269,34 @@ const Le = {
   fontWeight: 400,
   lineHeight: "normal",
   borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
-}, J = {
+}, ge = {
   display: "flex",
   flexDirection: "column",
   flex: "1 0 0",
   gap: 12,
   minWidth: 0
-}, Be = ({
+}, st = ({
   meta: n = {},
   callPurpose: i = {},
   classification: o = {},
-  dimensions: a = [],
-  outcomeQuality: p = "Neutral",
-  onMoreDetails: h
+  dimensions: d = [],
+  outcomeQuality: g = "Neutral",
+  onMoreDetails: f
 }) => {
-  const x = n.duration_seconds != null ? Re(n.duration_seconds) : null, y = n.message_count, u = i.interaction_driver, k = o.interaction_paradigm, b = [
+  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 },
-    ...a.filter((r, g) => g % 2 === 0).map((r) => ({ label: r.label || r.key, value: r.value })),
-    { label: "Outcome Quality", value: p }
-  ].filter(Boolean), v = [
+    ...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 = [
     y != null && { label: "Messages", value: y },
     k != null && { label: "Paradigm", value: k },
-    ...a.filter((r, g) => g % 2 === 1).map((r) => ({ label: r.label || r.key, value: r.value })),
+    ...d.filter((r, p) => p % 2 === 1).map((r) => ({ label: r.label || r.key, value: r.value })),
     { label: "More Details", isLink: !0 }
   ].filter(Boolean), s = (r) => r.isLink ? /* @__PURE__ */ t(
     "div",
     {
-      onClick: h,
+      onClick: f,
       style: {
         display: "flex",
         alignItems: "center",
@@ -306,7 +306,7 @@ const Le = {
         fontFamily: "var(--font-sans)"
       },
       children: [
-        /* @__PURE__ */ e(le, { size: 16, color: "#808183", strokeWidth: 1.5 }),
+        /* @__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 })
       ]
     },
@@ -314,7 +314,7 @@ const Le = {
   ) : /* @__PURE__ */ t(
     "div",
     {
-      style: Le,
+      style: lt,
       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 })
@@ -332,8 +332,8 @@ const Le = {
         alignSelf: "stretch"
       },
       children: [
-        /* @__PURE__ */ e("div", { style: J, children: b.map((r) => s(r)) }),
-        /* @__PURE__ */ e("div", { style: J, children: v.map((r) => s(r)) })
+        /* @__PURE__ */ e("div", { style: ge, children: b.map((r) => s(r)) }),
+        /* @__PURE__ */ e("div", { style: ge, children: w.map((r) => s(r)) })
       ]
     }
   );
@@ -343,16 +343,16 @@ const Le = {
   absent: "var(--Grey-absent, #D9D9D9)",
   white: "var(--Grey-White, #FFF)",
   cardBg: "var(--surface-warm-40, rgba(243, 241, 229, 0.40))"
-}, m = 1.2, ee = 3, te = (n) => n != null ? Math.round(n * 100) + "%" : "—", ne = (n) => {
+}, m = 1.2, pe = 3, fe = (n) => n != null ? Math.round(n * 100) + "%" : "—", he = (n) => {
   if (n == null)
     return "—";
   const i = (n * 100).toFixed(1);
   return n > 0 ? `+${i}pp` : `${i}pp`;
-}, $e = ({ outcomeLift: n, driverLabels: i = [] }) => {
+}, at = ({ outcomeLift: n, driverLabels: i = [] }) => {
   var b;
   if (!n || n.lift == null)
     return null;
-  const o = n.p_expected, a = n.p_full, p = n.lift_raw ?? (a != null && o != null ? a - o : null), h = n.lift, x = (b = n.interpretation) != null && b.lift_band ? n.interpretation.lift_band.replace(/_/g, " ") : h >= 0 ? "Positive" : "Negative", y = x.charAt(0).toUpperCase() + x.slice(1), u = i.slice(0, ee), k = i.length - ee;
+  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;
   return /* @__PURE__ */ t(
     "div",
     {
@@ -403,7 +403,7 @@ const Le = {
                     },
                     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: ne(h) }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: l.strong, lineHeight: m }, children: he(f) }),
                       /* @__PURE__ */ t(
                         "div",
                         {
@@ -415,7 +415,7 @@ const Le = {
                             borderLeft: `1px solid ${l.absent}`
                           },
                           children: [
-                            /* @__PURE__ */ e(re, { size: 14, color: l.strong }),
+                            /* @__PURE__ */ e(ue, { size: 14, color: l.strong }),
                             /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: l.strong, lineHeight: m }, children: y })
                           ]
                         }
@@ -436,7 +436,7 @@ const Le = {
               },
               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: te(o) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: fe(o) }),
                   /* @__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" })
@@ -450,7 +450,7 @@ const Le = {
                   paddingLeft: 24,
                   borderLeft: `1px solid ${l.absent}`
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: ne(p) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: he(g) }),
                   /* @__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" })
@@ -464,7 +464,7 @@ const Le = {
                   paddingLeft: 24,
                   borderLeft: `1px solid ${l.absent}`
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: te(a) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: fe(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" })
@@ -489,7 +489,7 @@ const Le = {
             }
           ),
           /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: [
-            u.map((v, s) => /* @__PURE__ */ e(
+            u.map((w, s) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -515,7 +515,7 @@ const Le = {
                       textOverflow: "ellipsis",
                       maxWidth: 200
                     },
-                    children: v
+                    children: w
                   }
                 )
               },
@@ -557,15 +557,15 @@ const Le = {
       ]
     }
   );
-}, ie = ({ children: n, size: i = 28, onClick: o, title: a }) => {
-  const [p, h] = M(!1);
+}, ye = ({ children: n, size: i = 28, onClick: o, title: d }) => {
+  const [g, f] = A(!1);
   return /* @__PURE__ */ e(
     "div",
     {
-      title: a,
+      title: d,
       onClick: o,
-      onMouseEnter: () => h(!0),
-      onMouseLeave: () => h(!1),
+      onMouseEnter: () => f(!0),
+      onMouseLeave: () => f(!1),
       style: {
         display: "flex",
         alignItems: "center",
@@ -573,7 +573,7 @@ const Le = {
         width: i,
         height: i,
         borderRadius: 9999,
-        background: p ? "var(--surface-hover, #F3F7F7)" : "transparent",
+        background: g ? "var(--surface-hover, #F3F7F7)" : "transparent",
         cursor: "pointer",
         flexShrink: 0,
         transition: "background 0.15s"
@@ -581,24 +581,24 @@ const Le = {
       children: n
     }
   );
-}, oe = ({
+}, dt = ({
   signals: n = { signals: [], present_count: 0, total_signals_evaluated: 0 },
   expandedSignals: i = /* @__PURE__ */ new Set(),
   toggleSignal: o = () => {
   },
-  playEvidence: a = () => {
+  playEvidence: d = () => {
   },
-  highlightTurns: p = () => {
+  highlightTurns: g = () => {
   },
-  onShowInTranscript: h = () => {
+  onShowInTranscript: f = () => {
   },
   timelinePlaying: x = !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), g = Math.floor(s % 6e4 / 1e3);
-    return `${r.toString().padStart(2, "0")}:${g.toString().padStart(2, "0")}`;
-  }, v = (s) => x && s.start_ms != null && y * 1e3 >= s.start_ms && y * 1e3 <= (s.end_ms ?? s.start_ms + 5e3);
+    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);
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -622,7 +622,7 @@ const Le = {
         borderRadius: 9999,
         background: "var(--surface-hover, #F3F7F7)",
         flexShrink: 0
-      }, children: /* @__PURE__ */ e(se, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      }, children: /* @__PURE__ */ e(me, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
       /* @__PURE__ */ t("div", { style: {
         display: "flex",
         alignItems: "center",
@@ -657,12 +657,12 @@ const Le = {
         color: "var(--Grey-Muted, #808183)"
       }, children: "No signals detected." }),
       u.map((s, r) => {
-        var w, z, _;
-        const g = s.key ?? s.id ?? r, f = i.has(g), C = ((w = s.observations) == null ? void 0 : w.length) ?? 0;
+        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;
         return /* @__PURE__ */ t(
           "div",
           {
-            id: `signal-${g}`,
+            id: `signal-${p}`,
             style: {
               display: "flex",
               flexDirection: "column",
@@ -673,7 +673,7 @@ const Le = {
               /* @__PURE__ */ t(
                 "button",
                 {
-                  onClick: () => o(g),
+                  onClick: () => o(p),
                   style: {
                     display: "flex",
                     padding: "8px 0",
@@ -695,28 +695,28 @@ const Le = {
                       color: "var(--text-dark, #0B0A0A)",
                       lineHeight: 1.71
                     }, children: [
-                      s.display_name || ((z = s.key) == null ? void 0 : z.replace(/_/g, " ")),
-                      C > 0 && /* @__PURE__ */ t("span", { style: {
+                      s.display_name || ((I = s.key) == null ? void 0 : I.replace(/_/g, " ")),
+                      D > 0 && /* @__PURE__ */ t("span", { style: {
                         fontWeight: 600,
                         color: "var(--text-dark, #0B0A0A)",
                         marginLeft: 6
                       }, children: [
                         "(",
-                        C,
+                        D,
                         ")"
                       ] })
                     ] }),
-                    f ? /* @__PURE__ */ e(ae, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(de, { size: 20, color: "#767473" })
+                    h ? /* @__PURE__ */ e(xe, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(be, { size: 20, color: "#767473" })
                   ]
                 }
               ),
-              f && ((_ = s.observations) == null ? void 0 : _.length) > 0 && /* @__PURE__ */ e("div", { style: {
+              h && ((G = s.observations) == null ? void 0 : G.length) > 0 && /* @__PURE__ */ e("div", { style: {
                 display: "flex",
                 flexDirection: "column",
                 alignSelf: "stretch",
                 gap: 0
-              }, children: s.observations.map((F, E) => {
-                var H, T, A;
+              }, children: s.observations.map((C, L) => {
+                var H, M, R;
                 return /* @__PURE__ */ t(
                   "div",
                   {
@@ -740,8 +740,8 @@ const Le = {
                           fontWeight: 400,
                           color: "var(--text-subtle-warm, #767473)",
                           lineHeight: 1.5
-                        }, children: F.reason || F.explanation }),
-                        ((T = (H = F.evidence) == null ? void 0 : H[0]) == null ? void 0 : T.start_ms) != null && /* @__PURE__ */ t(
+                        }, children: C.reason || C.explanation }),
+                        ((M = (H = C.evidence) == null ? void 0 : H[0]) == null ? void 0 : M.start_ms) != null && /* @__PURE__ */ t(
                           "div",
                           {
                             style: {
@@ -752,14 +752,14 @@ const Le = {
                             },
                             children: [
                               /* @__PURE__ */ e(
-                                ie,
+                                ye,
                                 {
                                   size: 28,
                                   title: "Show in transcript",
-                                  onClick: (D) => {
-                                    D.stopPropagation(), h(F.evidence[0].start_ms);
+                                  onClick: (z) => {
+                                    z.stopPropagation(), f(C.evidence[0].start_ms);
                                   },
-                                  children: /* @__PURE__ */ e(De, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                                  children: /* @__PURE__ */ e(Oe, { size: 16, color: "#808183", strokeWidth: 1.5 })
                                 }
                               ),
                               /* @__PURE__ */ e("span", { style: {
@@ -768,19 +768,19 @@ const Le = {
                                 color: "var(--Grey-Muted, #808183)",
                                 lineHeight: 1.2,
                                 whiteSpace: "nowrap"
-                              }, children: b(F.evidence[0].start_ms) })
+                              }, children: b(C.evidence[0].start_ms) })
                             ]
                           }
                         )
                       ] }),
-                      (A = F.evidence) == null ? void 0 : A.map((D, R) => D.text && /* @__PURE__ */ t(
+                      (R = C.evidence) == null ? void 0 : R.map((z, B) => z.text && /* @__PURE__ */ t(
                         "div",
                         {
-                          onClick: (G) => {
-                            G.stopPropagation(), a(D);
+                          onClick: ($) => {
+                            $.stopPropagation(), d(z);
                           },
-                          onMouseEnter: () => p(D.turn_ids ?? []),
-                          onMouseLeave: () => p([]),
+                          onMouseEnter: () => g(z.turn_ids ?? []),
+                          onMouseLeave: () => g([]),
                           style: {
                             display: "flex",
                             alignItems: "center",
@@ -789,11 +789,11 @@ const Le = {
                             cursor: "pointer"
                           },
                           children: [
-                            /* @__PURE__ */ e(ie, { size: 28, children: /* @__PURE__ */ e(
-                              We,
+                            /* @__PURE__ */ e(ye, { size: 28, children: /* @__PURE__ */ e(
+                              Ue,
                               {
                                 size: 17,
-                                color: v(D) ? "var(--rail-orange, #C98A5A)" : "var(--Grey-Muted, #808183)",
+                                color: w(z) ? "var(--rail-orange, #C98A5A)" : "var(--Grey-Muted, #808183)",
                                 strokeWidth: 1
                               }
                             ) }),
@@ -804,21 +804,21 @@ const Le = {
                               lineHeight: 1.2
                             }, children: [
                               "“",
-                              D.text,
+                              z.text,
                               "”"
                             ] })
                           ]
                         },
-                        R
+                        B
                       ))
                     ]
                   },
-                  F.key ?? E
+                  C.key ?? L
                 );
               }) })
             ]
           },
-          g
+          p
         );
       })
     ] })
@@ -831,43 +831,43 @@ const Le = {
   accent: "var(--rail-orange, #C98A5A)",
   track: "var(--rail-surface-2, #E3E1D7)",
   infoIcon: "var(--color-input-border, #ACACAD)"
-}, Pe = ({ score: n = 4, maxScore: i = 10 }) => {
-  const k = Math.min(Math.round(n / i * 5), 5), b = 180 / 5, v = (g) => {
-    const f = g * Math.PI / 180;
+}, 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;
     return {
-      x: 121.5 + 85 * Math.cos(f),
-      y: 123 - 85 * Math.sin(f)
+      x: 121.5 + 85 * Math.cos(h),
+      y: 123 - 85 * Math.sin(h)
     };
-  }, s = (g, f) => {
-    const C = v(g), w = v(f), z = g - f > 180 ? 1 : 0;
-    return `M ${C.x} ${C.y} A 85 85 0 ${z} 1 ${w.x} ${w.y}`;
+  }, 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 }, (g, f) => {
-    const C = 180 - f * b - (f > 0 ? r / 2 : 0), w = 180 - (f + 1) * b + (f < 5 - 1 ? r / 2 : 0), z = f < k;
+  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;
     return /* @__PURE__ */ e(
       "path",
       {
-        d: s(C, w),
-        stroke: z ? S.strong : S.track,
+        d: s(D, W),
+        stroke: I ? S.strong : S.track,
         strokeWidth: 30,
         strokeLinecap: "butt",
         fill: "none"
       },
-      f
+      h
     );
   }) });
-}, je = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (o, a) => /* @__PURE__ */ e(
+}, gt = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (o, d) => /* @__PURE__ */ e(
   "div",
   {
     style: {
       width: 22,
       height: 6,
       borderRadius: 1,
-      background: a < n ? S.strong : S.track
+      background: d < n ? S.strong : S.track
     }
   },
-  a
-)) }), Oe = ({ label: n, value: i = 0, maxValue: o = 5 }) => /* @__PURE__ */ t("div", { style: {
+  d
+)) }), pt = ({ label: n, value: i = 0, maxValue: o = 5 }) => /* @__PURE__ */ t("div", { style: {
   display: "flex",
   flexDirection: "column",
   gap: 8,
@@ -886,16 +886,16 @@ const Le = {
       fontFamily: "var(--font-sans)",
       lineHeight: "normal"
     }, children: n }),
-    /* @__PURE__ */ e(we, { size: 14, color: S.infoIcon, strokeWidth: 1 })
+    /* @__PURE__ */ e(qe, { size: 14, color: S.infoIcon, strokeWidth: 1 })
   ] }),
-  /* @__PURE__ */ e(je, { value: i, maxValue: o })
-] }), Ue = ({
+  /* @__PURE__ */ e(gt, { value: i, maxValue: o })
+] }), ft = ({
   score: n = 83,
   maxScore: i = 100,
   predictedScore: o = 4,
-  predictedLabel: a = "Predicted Objective",
-  description: p = "",
-  legends: h = [
+  predictedLabel: d = "Predicted Objective",
+  description: g = "",
+  legends: f = [
     { label: "CSAT", value: 3 },
     { label: "Resolution", value: 4 },
     { label: "Process Adherence", value: 5 },
@@ -931,7 +931,7 @@ const Le = {
         color: S.muted,
         fontFamily: "var(--font-sans)",
         lineHeight: "normal"
-      }, children: p })
+      }, children: g })
     ] }),
     /* @__PURE__ */ t("div", { style: {
       display: "flex",
@@ -947,7 +947,7 @@ const Le = {
         alignItems: "center",
         flexShrink: 0
       }, children: [
-        /* @__PURE__ */ e(Pe, { score: n, maxScore: i }),
+        /* @__PURE__ */ e(ct, { 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)" })
@@ -990,15 +990,15 @@ const Le = {
             fontFamily: "var(--font-sans)",
             lineHeight: 1.43,
             textAlign: "center"
-          }, children: a })
+          }, children: d })
         ] }),
         /* @__PURE__ */ e("div", { style: {
           width: "100%",
           height: 1,
           background: S.absent
         } }),
-        h.map((y, u) => /* @__PURE__ */ e(
-          Oe,
+        f.map((y, u) => /* @__PURE__ */ e(
+          pt,
           {
             label: y.label,
             value: y.value
@@ -1008,52 +1008,78 @@ const Le = {
       ] })
     ] })
   ] });
-}, qe = [
+}, ht = [
   { key: "overview", label: "Overview" },
   { key: "coaching", label: "Coaching Summary" },
-  { key: "signals", label: "Signals & Guidance" },
+  { key: "signals", label: "Signals & Recording" },
   { key: "comments", label: "Comments" }
-], Ze = ({
+], bt = ({
   title: n = "Wheel Stud Replacement Enquiry",
   onBack: i,
   // Data props — all optional with defaults for demo
   data: o,
-  coachingData: a,
-  audioUrl: p,
+  coachingData: d,
+  audioUrl: g,
+  // 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,
+  timelinePlaying: y,
+  playbackRate: u,
+  timelineSegments: k,
+  onSeek: b,
+  onTogglePlay: w,
+  onSeekBack: s,
+  onSeekForward: r,
+  onSetPlaybackRate: p,
+  // Speaker names
+  agentName: h,
+  customerName: D,
+  // Transcript props — pass real transcript data from the host app
+  transcript: W,
+  activeTurnIndex: I,
+  turnObservations: G,
+  highlightedTurns: C,
+  onTurnPlayPause: L,
   // Footer navigation
-  prevSessionTitle: h,
-  prevSessionDesc: x,
-  nextSessionTitle: y,
-  nextSessionDesc: u,
-  onPreviousSession: k,
-  onNextSession: b
+  prevSessionTitle: H,
+  prevSessionDesc: M,
+  nextSessionTitle: R,
+  nextSessionDesc: z,
+  onPreviousSession: B,
+  onNextSession: $
 }) => {
-  var q, N;
-  const [v, s] = M("overview"), [r, g] = M(/* @__PURE__ */ new Set()), [f, C] = M(!1), [w, z] = M(null), _ = xe(null), F = [
+  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 = [
     { 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" }
-  ], E = (d) => {
-    var I;
-    const W = d / 1e3;
-    (I = _.current) != null && I.seekTo && _.current.seekTo(W);
-  }, H = (d) => {
-    g((W) => {
-      const I = new Set(W);
-      return I.has(d) ? I.delete(d) : I.add(d), I;
+  ], 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;
     });
-  }, T = (o == null ? void 0 : o.blocks) || [], A = (d) => {
-    var W;
-    return ((W = T.find((I) => I.block_id === d)) == null ? void 0 : W.payload) || {};
-  }, D = A("interaction-metadata"), R = A("interaction-context"), G = A("interaction-signals"), B = A("interaction-outcome-lift"), ce = R.call_purpose || {}, pe = R.classification || {}, L = { duration_seconds: 156, message_count: 25, ...D }, $ = { interaction_driver: "General Information", interaction_direction: "inbound", ...ce }, ge = { interaction_paradigm: "Informational", ...pe }, fe = { p_expected: 0.94, p_full: 0.83, lift_raw: -0.11, lift: 0.043, interpretation: { lift_band: "positive" }, ...B }, he = ((q = B.driver_signal_keys) == null ? void 0 : q.map((d) => d.replace(/^sig\./, "").replace(/_/g, " "))) || [
+  }, 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, " "))) || [
     "customer needs fully addressed",
     "call flow expectations set",
     "Opening expectations set",
     "Active listening demonstrated",
     "Resolution confirmed"
-  ], P = a || {
+  ], Re = 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: [
@@ -1066,7 +1092,7 @@ const Le = {
       { 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"
-  }, j = (N = G == null ? void 0 : G.signals) != null && N.length ? G : {
+  }, Ee = (le = T == null ? void 0 : T.signals) != null && le.length ? T : {
     present_count: 9,
     total_signals_evaluated: 146,
     signals: [
@@ -1092,7 +1118,7 @@ const Le = {
       { 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." }] }
     ]
-  }, ye = "David", O = "Sandra Bullock", U = 8, ue = D.evaluated_dt ? new Date(D.evaluated_dt).toLocaleString() : "3/29/2026, 8:30:00 AM", ve = $.interaction_direction === "inbound" ? "Inbound" : "Outbound";
+  }, 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";
   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(
@@ -1109,7 +1135,7 @@ const Le = {
             padding: 0,
             flexShrink: 0
           },
-          children: /* @__PURE__ */ e(V, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
+          children: /* @__PURE__ */ e(se, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
         }
       ),
       /* @__PURE__ */ e("div", { style: { width: 1, height: 28, background: "var(--Base-absent, #D9D9D9)" } }),
@@ -1129,10 +1155,10 @@ const Le = {
       borderBottom: "1px solid var(--Grey-Faint, #ACADAD)",
       padding: "0 24px",
       marginTop: 8
-    }, children: qe.map((d) => /* @__PURE__ */ e(
+    }, children: ht.map((a) => /* @__PURE__ */ e(
       "button",
       {
-        onClick: () => s(d.key),
+        onClick: () => We(a.key),
         style: {
           display: "flex",
           padding: 16,
@@ -1140,20 +1166,20 @@ const Le = {
           gap: 10,
           background: "none",
           border: "none",
-          borderBottom: v === d.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
+          borderBottom: P === a.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
           cursor: "pointer",
           fontSize: 15,
-          fontWeight: v === d.key ? 500 : 400,
-          color: v === d.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
+          fontWeight: P === a.key ? 500 : 400,
+          color: P === a.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
           whiteSpace: "nowrap",
           transition: "border-color 0.2s ease, color 0.2s ease"
         },
-        children: d.label
+        children: a.label
       },
-      d.key
+      a.key
     )) }),
     /* @__PURE__ */ t("div", { style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
-      v === "overview" && /* @__PURE__ */ t("div", { style: {
+      /* @__PURE__ */ t("div", { ref: Q, style: {
         display: "flex",
         flexDirection: "column",
         justifyContent: "flex-end",
@@ -1169,7 +1195,7 @@ const Le = {
           alignSelf: "stretch"
         }, children: [
           /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
-            /* @__PURE__ */ e(Ce, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
+            /* @__PURE__ */ e(Ne, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
             /* @__PURE__ */ e("span", { style: {
               fontSize: 16,
               fontWeight: 600,
@@ -1180,12 +1206,12 @@ const Le = {
           ] }),
           /* @__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(ze, { 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: ue })
+              /* @__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__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-              /* @__PURE__ */ e(Fe, { 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: ve })
+              /* @__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__ */ t("div", { style: {
               display: "flex",
@@ -1195,15 +1221,15 @@ const Le = {
               borderLeft: "1px solid var(--Grey-absent, #D9D9D9)"
             }, children: [
               /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-                /* @__PURE__ */ e(Ie, { 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: ye })
+                /* @__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(_e, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(Ke, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
               /* @__PURE__ */ t("div", { style: { position: "relative" }, children: [
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => C((d) => !d),
+                    onClick: () => we((a) => !a),
                     style: {
                       display: "flex",
                       alignItems: "center",
@@ -1214,18 +1240,18 @@ const Le = {
                       cursor: "pointer"
                     },
                     children: [
-                      /* @__PURE__ */ e(Y, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                      /* @__PURE__ */ e(ae, { 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: [
-                        O,
-                        " (",
                         U,
+                        " (",
+                        oe,
                         " Sessions)"
                       ] }),
-                      f ? /* @__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 })
+                      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 })
                     ]
                   }
                 ),
-                f && /* @__PURE__ */ t("div", { style: {
+                N && /* @__PURE__ */ t("div", { style: {
                   position: "absolute",
                   top: "100%",
                   right: 0,
@@ -1244,37 +1270,37 @@ const Le = {
                     gap: 8,
                     padding: 16
                   }, children: [
-                    /* @__PURE__ */ e(Y, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5, style: { marginTop: 2, flexShrink: 0 } }),
+                    /* @__PURE__ */ e(ae, { 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,
                         fontWeight: 600,
                         color: "var(--Grey-Strong, #2E3236)",
                         lineHeight: 1
-                      }, children: O }),
+                      }, children: U }),
                       /* @__PURE__ */ t("span", { style: {
                         fontSize: 13,
                         fontWeight: 400,
                         color: "var(--Grey-Muted, #808183)",
                         lineHeight: 1
                       }, children: [
-                        U,
+                        oe,
                         " Sessions in past"
                       ] })
                     ] })
                   ] }),
-                  F.map((d, W) => /* @__PURE__ */ t(
+                  Ce.map((a, v) => /* @__PURE__ */ t(
                     "div",
                     {
-                      onMouseEnter: () => z(W),
-                      onMouseLeave: () => z(null),
+                      onMouseEnter: () => Y(v),
+                      onMouseLeave: () => Y(null),
                       style: {
                         display: "flex",
                         width: 264,
                         padding: "12px 16px",
                         justifyContent: "space-between",
                         alignItems: "center",
-                        background: w === W ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                        background: V === v ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
                         borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
                         cursor: "pointer",
                         boxSizing: "border-box",
@@ -1287,18 +1313,18 @@ const Le = {
                             fontWeight: 400,
                             color: "var(--Grey-Strong, #2E3236)",
                             lineHeight: 1
-                          }, children: d.title }),
+                          }, children: a.title }),
                           /* @__PURE__ */ e("span", { style: {
                             fontSize: 12,
                             fontWeight: 400,
                             color: "var(--Grey-Muted, #808183)",
                             lineHeight: 1
-                          }, children: d.date })
+                          }, children: a.date })
                         ] }),
-                        w === W && /* @__PURE__ */ e(le, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
+                        V === v && /* @__PURE__ */ e(ve, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
                       ]
                     },
-                    W
+                    v
                   )),
                   /* @__PURE__ */ e("div", { style: {
                     padding: 16,
@@ -1317,7 +1343,7 @@ const Le = {
                     borderRadius: 10,
                     cursor: "pointer"
                   }, children: [
-                    /* @__PURE__ */ e(Ae, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                    /* @__PURE__ */ e(Ze, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
                     /* @__PURE__ */ e("span", { style: {
                       fontSize: 14,
                       fontWeight: 600,
@@ -1335,7 +1361,7 @@ const Le = {
           gap: 24,
           alignSelf: "stretch"
         }, children: [
-          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(Ue, {}) }),
+          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(ft, {}) }),
           /* @__PURE__ */ t("div", { style: {
             display: "flex",
             flexDirection: "column",
@@ -1346,99 +1372,92 @@ const Le = {
             minWidth: 0
           }, children: [
             /* @__PURE__ */ e(
-              Be,
+              st,
               {
-                meta: L,
-                callPurpose: $,
-                classification: ge,
+                meta: te,
+                callPurpose: ne,
+                classification: Ge,
                 outcomeQuality: "Neutral"
               }
             ),
             /* @__PURE__ */ e(
-              $e,
+              at,
               {
-                outcomeLift: fe,
-                driverLabels: he
+                outcomeLift: He,
+                driverLabels: Me
               }
             )
           ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { ref: K, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(ot, { data: Re }) }),
+      /* @__PURE__ */ t("div", { ref: Z, style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        alignSelf: "stretch",
+        paddingTop: 24
+      }, children: [
+        /* @__PURE__ */ t("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8
+        }, children: [
+          /* @__PURE__ */ e(me, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
+          /* @__PURE__ */ e("span", { style: {
+            fontSize: 16,
+            fontWeight: 600,
+            color: "var(--Grey-Strong, #2E3236)",
+            lineHeight: 1.2,
+            textTransform: "uppercase"
+          }, children: "Signals & Recording" })
         ] }),
-        /* @__PURE__ */ e(X, { data: P }),
         /* @__PURE__ */ t("div", { style: {
           display: "flex",
-          flexDirection: "column",
-          gap: 16,
-          alignSelf: "stretch"
+          alignItems: "flex-start",
+          gap: 24,
+          alignSelf: "stretch",
+          paddingTop: 16,
+          borderTop: "1px solid #D9D9D9"
         }, children: [
-          /* @__PURE__ */ t("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8
-          }, children: [
-            /* @__PURE__ */ e(se, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
-            /* @__PURE__ */ e("span", { style: {
-              fontSize: 16,
-              fontWeight: 600,
-              color: "var(--Grey-Strong, #2E3236)",
-              lineHeight: 1.2,
-              textTransform: "uppercase"
-            }, children: "Signals & Recording" })
-          ] }),
-          /* @__PURE__ */ t("div", { style: {
-            display: "flex",
-            alignItems: "flex-start",
-            gap: 24,
-            alignSelf: "stretch",
-            paddingTop: 16,
-            borderTop: "1px solid #D9D9D9"
-          }, children: [
-            /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-              oe,
-              {
-                signals: j,
-                expandedSignals: r,
-                toggleSignal: H,
-                onShowInTranscript: E
-              }
-            ) }),
-            /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-              Q,
-              {
-                ref: _,
-                audioUrl: p,
-                durationSeconds: L.duration_seconds,
-                currentTimeSeconds: 0
-              }
-            ) })
-          ] })
+          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
+            dt,
+            {
+              signals: Ee,
+              expandedSignals: ke,
+              toggleSignal: Fe,
+              onShowInTranscript: ze
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
+            Je,
+            {
+              ref: j,
+              audioUrl: g,
+              durationSeconds: te.duration_seconds,
+              audioRef: f,
+              agentName: ie,
+              customerName: U.split(" ")[0],
+              currentTimeSeconds: x,
+              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,
+              setExpandedSignals: q
+            }
+          ) })
         ] })
       ] }),
-      v === "coaching" && /* @__PURE__ */ e(X, { data: P }),
-      v === "signals" && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: /* @__PURE__ */ t("div", { style: {
-        display: "flex",
-        alignItems: "flex-start",
-        gap: 24
-      }, children: [
-        /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-          oe,
-          {
-            signals: j,
-            expandedSignals: r,
-            toggleSignal: H,
-            onShowInTranscript: E
-          }
-        ) }),
-        /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-          Q,
-          {
-            ref: _,
-            audioUrl: p,
-            durationSeconds: L.duration_seconds,
-            currentTimeSeconds: 0
-          }
-        ) })
-      ] }) }),
-      v === "comments" && /* @__PURE__ */ e("div", { style: { fontSize: 14, color: "var(--Grey-Muted, #808183)", fontFamily: "var(--font-sans)" }, children: "No comments yet." })
+      /* @__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__ */ t("div", { style: {
       display: "flex",
@@ -1449,7 +1468,7 @@ const Le = {
       /* @__PURE__ */ t(
         "button",
         {
-          onClick: k,
+          onClick: B,
           style: {
             display: "flex",
             alignItems: "center",
@@ -1461,7 +1480,7 @@ const Le = {
             cursor: "pointer"
           },
           children: [
-            /* @__PURE__ */ e(V, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 }),
+            /* @__PURE__ */ e(se, { 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,
@@ -1469,7 +1488,7 @@ const Le = {
                 color: "#000",
                 lineHeight: 1.2,
                 textAlign: "left"
-              }, children: h || "Previous Session Title" }),
+              }, children: H || "Previous Session Title" }),
               /* @__PURE__ */ e("span", { style: {
                 fontSize: 13,
                 fontWeight: 400,
@@ -1477,7 +1496,7 @@ const Le = {
                 lineHeight: 1.2,
                 opacity: 0.5,
                 textAlign: "left"
-              }, children: x || "Short description of the session" })
+              }, children: M || "Short description of the session" })
             ] })
           ]
         }
@@ -1485,7 +1504,7 @@ const Le = {
       /* @__PURE__ */ t(
         "button",
         {
-          onClick: b,
+          onClick: $,
           style: {
             display: "flex",
             alignItems: "center",
@@ -1505,7 +1524,7 @@ const Le = {
                 color: "#000",
                 lineHeight: 1.2,
                 textAlign: "left"
-              }, children: y || "Next Session Title" }),
+              }, children: R || "Next Session Title" }),
               /* @__PURE__ */ e("span", { style: {
                 fontSize: 13,
                 fontWeight: 400,
@@ -1513,9 +1532,9 @@ const Le = {
                 lineHeight: 1.2,
                 opacity: 0.5,
                 textAlign: "left"
-              }, children: u || "Short description of the session" })
+              }, children: z || "Short description of the session" })
             ] }),
-            /* @__PURE__ */ e(Ge, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 })
+            /* @__PURE__ */ e(Xe, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 })
           ]
         }
       )
@@ -1523,12 +1542,12 @@ const Le = {
   ] });
 };
 export {
-  X as UpdatedCoachingSynthesisCard,
-  Ue as UpdatedCompassScore,
-  Be as UpdatedInteractionContext,
-  Ze as UpdatedInteractionDetails,
-  Q as UpdatedInteractionRecording,
-  $e as UpdatedInteractionScores,
-  oe as UpdatedInteractionSignals
+  ot as UpdatedCoachingSynthesisCard,
+  ft as UpdatedCompassScore,
+  st as UpdatedInteractionContext,
+  bt as UpdatedInteractionDetails,
+  Je as UpdatedInteractionRecording,
+  at as UpdatedInteractionScores,
+  dt as UpdatedInteractionSignals
 };
 //# sourceMappingURL=UpdatedInteractionDetails.es.js.map