chordia-ui 3.4.4 → 3.4.6

package/dist/components/UpdatedInteractionDetails.es.js

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import et, { useState as _, useRef as M } from "react";
-import { ShieldCheck as tt, TrendingUp as nt, Lightbulb as it, ThumbsUp as Se, ExternalLink as ke, FileSignal as we, ChevronUp as De, ChevronDown as Ce, ScrollText as ot, PauseCircle as rt, PlayCircle as lt, Info as st, ArrowLeft as pe, ClipboardList as at, CalendarDays as dt, PhoneIncoming as ct, Headset as gt, Repeat as pt, CircleUser as fe, History as ft, ArrowRight as ht } from "lucide-react";
-import { U as yt } from "../UpdatedInteractionRecording.es.js";
+import at, { useState as _, useRef as R } from "react";
+import { ShieldCheck as dt, TrendingUp as ct, Lightbulb as gt, ThumbsUp as We, ExternalLink as Ce, FileSignal as De, ChevronUp as Fe, ChevronDown as ze, ScrollText as pt, PauseCircle as ft, PlayCircle as ht, Info as yt, ArrowLeft as ye, ClipboardList as ut, CalendarDays as mt, PhoneIncoming as vt, Headset as xt, Repeat as bt, CircleUser as ue, History as St, ArrowRight as kt } from "lucide-react";
+import { U as wt } from "../UpdatedInteractionRecording.es.js";
 const c = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
@@ -11,17 +11,17 @@ const c = {
   quoteLine: "var(--border-warm, #B2AEA8)",
   quoteText: "var(--text-subtle-warm, #767473)",
   iconBg: "var(--surface-hover, #F3F7F7)"
-}, ut = {
+}, Wt = {
   effective: "Effective",
   strong: "Strong",
   needs_improvement: "Needs Improvement",
   mixed: "Mixed"
-}, he = "updated-coaching-synthesis-keyframes";
-function vt() {
-  if (typeof document > "u" || document.getElementById(he))
+}, me = "updated-coaching-synthesis-keyframes";
+function Ct() {
+  if (typeof document > "u" || document.getElementById(me))
     return;
   const n = document.createElement("style");
-  n.id = he, n.textContent = `
+  n.id = me, n.textContent = `
     @keyframes updated-coaching-shimmer {
       0% { background-position: -200% 0; }
       100% { background-position: 200% 0; }
@@ -32,8 +32,8 @@ function vt() {
     }
   `, document.head.appendChild(n);
 }
-function mt({ overall: n }) {
-  const i = ut[n] || (n ? n.replace(/_/g, " ") : "");
+function Dt({ overall: n }) {
+  const i = Wt[n] || (n ? n.replace(/_/g, " ") : "");
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     alignItems: "center",
@@ -52,7 +52,7 @@ function mt({ overall: n }) {
       alignItems: "center",
       gap: 6
     }, children: [
-      /* @__PURE__ */ e(Se, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+      /* @__PURE__ */ e(We, { size: 14, color: c.strong, strokeWidth: 1.5 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 13,
         fontWeight: 600,
@@ -63,7 +63,7 @@ function mt({ overall: n }) {
     ] })
   ] });
 }
-function xt({ item: n }) {
+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: {
@@ -97,7 +97,7 @@ function xt({ item: n }) {
     ] })
   ] });
 }
-function ye({ icon: n, label: i, items: r }) {
+function ve({ icon: n, label: i, items: r }) {
   return !r || r.length === 0 ? null : /* @__PURE__ */ t("div", { style: {
     flex: 1,
     display: "flex",
@@ -128,13 +128,13 @@ function ye({ icon: n, label: i, items: r }) {
         lineHeight: "normal"
       }, children: i })
     ] }),
-    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: r.map((s, p) => /* @__PURE__ */ e(xt, { item: s }, p)) })
+    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: r.map((s, p) => /* @__PURE__ */ e(Ft, { item: s }, p)) })
   ] });
 }
-const bt = ({ data: n, loading: i, error: r }) => {
-  var y, m;
-  if (et.useEffect(() => {
-    vt();
+const zt = ({ data: n, loading: i, error: r }) => {
+  var f, u;
+  if (at.useEffect(() => {
+    Ct();
   }, []), i)
     return /* @__PURE__ */ t("div", { style: {
       display: "flex",
@@ -159,21 +159,21 @@ const bt = ({ data: n, loading: i, error: r }) => {
           fontWeight: 500
         }, children: "Synthesizing coaching summary..." })
       ] }),
-      [180, 260, 220].map((w, S) => /* @__PURE__ */ e(
+      [180, 260, 220].map((b, k) => /* @__PURE__ */ e(
         "div",
         {
           style: {
             height: 10,
-            width: w,
+            width: b,
             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: `${S * 0.2}s`
+            animationDelay: `${k * 0.2}s`
           }
         },
-        S
+        k
       ))
     ] });
   if (r)
@@ -183,7 +183,7 @@ const bt = ({ data: n, loading: i, error: r }) => {
     }, children: "Unable to generate coaching summary." });
   if (!n)
     return null;
-  const s = 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) || "";
+  const s = n.strengths || [], p = n.improvements || [], y = typeof n.one_liner == "string" ? n.one_liner : ((f = n.one_liner) == null ? void 0 : f.text) || "", v = typeof n.context == "string" ? n.context : ((u = n.context) == null ? void 0 : u.text) || "";
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -195,7 +195,7 @@ const bt = ({ data: n, loading: i, error: r }) => {
       alignItems: "center",
       gap: 8
     }, children: [
-      /* @__PURE__ */ e(tt, { size: 20, color: c.accent, strokeWidth: 2 }),
+      /* @__PURE__ */ e(dt, { size: 20, color: c.accent, strokeWidth: 2 }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 16,
         fontWeight: 600,
@@ -205,13 +205,13 @@ const bt = ({ data: n, loading: i, error: r }) => {
         textTransform: "uppercase"
       }, children: "Coaching Summary" })
     ] }),
-    h && /* @__PURE__ */ e("div", { style: {
+    y && /* @__PURE__ */ e("div", { style: {
       fontSize: 14,
       fontWeight: 500,
       color: c.strong,
       fontFamily: "var(--font-sans)",
       lineHeight: 1.5
-    }, children: h }),
+    }, children: y }),
     /* @__PURE__ */ t("div", { style: {
       display: "flex",
       alignItems: "flex-start",
@@ -226,7 +226,7 @@ const bt = ({ data: n, loading: i, error: r }) => {
         lineHeight: 1.5,
         flex: 1
       }, children: v }),
-      n.overall && /* @__PURE__ */ e(mt, { overall: n.overall })
+      n.overall && /* @__PURE__ */ e(Dt, { overall: n.overall })
     ] }),
     (s.length > 0 || p.length > 0) && /* @__PURE__ */ t("div", { style: {
       display: "flex",
@@ -235,17 +235,17 @@ const bt = ({ data: n, loading: i, error: r }) => {
       borderTop: `1px solid ${c.absent}`
     }, children: [
       /* @__PURE__ */ e(
-        ye,
+        ve,
         {
-          icon: /* @__PURE__ */ e(nt, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(ct, { size: 14, color: c.strong, strokeWidth: 1.5 }),
           label: "Key Strengths",
           items: s
         }
       ),
       /* @__PURE__ */ e(
-        ye,
+        ve,
         {
-          icon: /* @__PURE__ */ e(it, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          icon: /* @__PURE__ */ e(gt, { size: 14, color: c.strong, strokeWidth: 1.5 }),
           label: "Improvements",
           items: p
         }
@@ -253,11 +253,11 @@ const bt = ({ data: n, loading: i, error: r }) => {
     ] })
   ] });
 };
-function St(n) {
+function It(n) {
   const i = Math.floor(n / 60), r = Math.round(n % 60);
   return `${i}:${r.toString().padStart(2, "0")}`;
 }
-const kt = {
+const _t = {
   display: "flex",
   justifyContent: "space-between",
   padding: "8px 8px 12px 8px",
@@ -268,34 +268,34 @@ const kt = {
   fontWeight: 400,
   lineHeight: "normal",
   borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
-}, ue = {
+}, xe = {
   display: "flex",
   flexDirection: "column",
   flex: "1 0 0",
   gap: 12,
   minWidth: 0
-}, wt = ({
+}, At = ({
   meta: n = {},
   callPurpose: i = {},
   classification: r = {},
   dimensions: s = [],
   outcomeQuality: p = "Neutral",
-  onMoreDetails: h
+  onMoreDetails: y
 }) => {
-  const v = n.duration_seconds != null ? St(n.duration_seconds) : null, y = n.message_count, m = i.interaction_driver, w = r.interaction_paradigm, S = [
+  const v = n.duration_seconds != null ? It(n.duration_seconds) : null, f = n.message_count, u = i.interaction_driver, b = r.interaction_paradigm, k = [
     v != null && { label: "Duration", value: v },
-    m != null && { label: "Driver", value: m },
-    ...s.filter((l, f) => f % 2 === 0).map((l) => ({ label: l.label || l.key, value: l.value })),
+    u != null && { label: "Driver", value: u },
+    ...s.filter((l, h) => h % 2 === 0).map((l) => ({ label: l.label || l.key, value: l.value })),
     { label: "Outcome Quality", value: p }
-  ].filter(Boolean), D = [
-    y != null && { label: "Messages", value: y },
-    w != null && { label: "Paradigm", value: w },
-    ...s.filter((l, f) => f % 2 === 1).map((l) => ({ label: l.label || l.key, value: l.value })),
-    { label: "More Details", isLink: !0 }
+  ].filter(Boolean), C = [
+    f != null && { label: "Messages", value: f },
+    b != null && { label: "Paradigm", value: b },
+    ...s.filter((l, h) => h % 2 === 1).map((l) => ({ label: l.label || l.key, value: l.value }))
+    // { label: 'More Details', isLink: true },
   ].filter(Boolean), d = (l) => l.isLink ? /* @__PURE__ */ t(
     "div",
     {
-      onClick: h,
+      onClick: y,
       style: {
         display: "flex",
         alignItems: "center",
@@ -305,7 +305,7 @@ const kt = {
         fontFamily: "var(--font-sans)"
       },
       children: [
-        /* @__PURE__ */ e(ke, { size: 16, color: "#808183", strokeWidth: 1.5 }),
+        /* @__PURE__ */ e(Ce, { size: 16, color: "#808183", strokeWidth: 1.5 }),
         /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", fontSize: 13, fontWeight: 400 }, children: l.label })
       ]
     },
@@ -313,7 +313,7 @@ const kt = {
   ) : /* @__PURE__ */ t(
     "div",
     {
-      style: kt,
+      style: _t,
       children: [
         /* @__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 })
@@ -331,8 +331,8 @@ const kt = {
         alignSelf: "stretch"
       },
       children: [
-        /* @__PURE__ */ e("div", { style: ue, children: S.map((l) => d(l)) }),
-        /* @__PURE__ */ e("div", { style: ue, children: D.map((l) => d(l)) })
+        /* @__PURE__ */ e("div", { style: xe, children: k.map((l) => d(l)) }),
+        /* @__PURE__ */ e("div", { style: xe, children: C.map((l) => d(l)) })
       ]
     }
   );
@@ -342,16 +342,16 @@ const kt = {
   absent: "var(--Grey-absent, #D9D9D9)",
   white: "var(--Grey-White, #FFF)",
   cardBg: "var(--surface-warm-40, rgba(243, 241, 229, 0.40))"
-}, x = 1.2, ve = 3, me = (n) => n != null ? Math.round(n * 100) + "%" : "—", xe = (n) => {
+}, x = 1.2, be = 3, Se = (n) => n != null ? Math.round(n * 100) + "%" : "—", ke = (n) => {
   if (n == null)
     return "—";
   const i = (n * 100).toFixed(1);
   return n > 0 ? `+${i}pp` : `${i}pp`;
-}, Dt = ({ outcomeLift: n, driverLabels: i = [] }) => {
-  var S;
+}, Gt = ({ outcomeLift: n, driverLabels: i = [] }) => {
+  var k;
   if (!n || n.lift == null)
     return null;
-  const r = n.p_expected, s = n.p_full, p = n.lift_raw ?? (s != null && r != null ? s - 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, ve), w = i.length - ve;
+  const r = n.p_expected, s = n.p_full, p = n.lift_raw ?? (s != null && r != null ? s - r : null), y = n.lift, v = (k = n.interpretation) != null && k.lift_band ? n.interpretation.lift_band.replace(/_/g, " ") : y >= 0 ? "Positive" : "Negative", f = v.charAt(0).toUpperCase() + v.slice(1), u = i.slice(0, be), b = i.length - be;
   return /* @__PURE__ */ t(
     "div",
     {
@@ -402,7 +402,7 @@ const kt = {
                     },
                     children: [
                       /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.strong, lineHeight: x }, children: "vs. Average Agent:" }),
-                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: a.strong, lineHeight: x }, children: xe(h) }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: a.strong, lineHeight: x }, children: ke(y) }),
                       /* @__PURE__ */ t(
                         "div",
                         {
@@ -414,8 +414,8 @@ const kt = {
                             borderLeft: `1px solid ${a.absent}`
                           },
                           children: [
-                            /* @__PURE__ */ e(Se, { size: 14, color: a.strong }),
-                            /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: a.strong, lineHeight: x }, children: y })
+                            /* @__PURE__ */ e(We, { size: 14, color: a.strong }),
+                            /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: a.strong, lineHeight: x }, children: f })
                           ]
                         }
                       )
@@ -435,7 +435,7 @@ const kt = {
               },
               children: [
                 /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: me(r) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: Se(r) }),
                   /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Expected Outcome" }),
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Based on call type & difficulty" })
@@ -449,7 +449,7 @@ const kt = {
                   paddingLeft: 24,
                   borderLeft: `1px solid ${a.absent}`
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: xe(p) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: ke(p) }),
                   /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Agent Impact" }),
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Behavior-driven change" })
@@ -463,7 +463,7 @@ const kt = {
                   paddingLeft: 24,
                   borderLeft: `1px solid ${a.absent}`
                 }, children: [
-                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: me(s) }),
+                  /* @__PURE__ */ e("span", { style: { fontSize: 28, fontWeight: 400, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: Se(s) }),
                   /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: a.strong, fontFamily: "var(--font-sans)", lineHeight: x }, children: "Predicted Outcome" }),
                     /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: a.muted, fontFamily: "var(--font-sans)", lineHeight: x }, children: "With agent behaviors" })
@@ -488,7 +488,7 @@ const kt = {
             }
           ),
           /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: [
-            m.map((D, d) => /* @__PURE__ */ e(
+            u.map((C, d) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -514,13 +514,13 @@ const kt = {
                       textOverflow: "ellipsis",
                       maxWidth: 200
                     },
-                    children: D
+                    children: C
                   }
                 )
               },
               d
             )),
-            w > 0 && /* @__PURE__ */ e(
+            b > 0 && /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -545,7 +545,7 @@ const kt = {
                     },
                     children: [
                       "+ ",
-                      w
+                      b
                     ]
                   }
                 )
@@ -556,15 +556,15 @@ const kt = {
       ]
     }
   );
-}, be = ({ children: n, size: i = 28, onClick: r, title: s }) => {
-  const [p, h] = _(!1);
+}, we = ({ children: n, size: i = 28, onClick: r, title: s }) => {
+  const [p, y] = _(!1);
   return /* @__PURE__ */ e(
     "div",
     {
       title: s,
       onClick: r,
-      onMouseEnter: () => h(!0),
-      onMouseLeave: () => h(!1),
+      onMouseEnter: () => y(!0),
+      onMouseLeave: () => y(!1),
       style: {
         display: "flex",
         alignItems: "center",
@@ -580,7 +580,7 @@ const kt = {
       children: n
     }
   );
-}, Ct = ({
+}, Mt = ({
   signals: n = { signals: [], present_count: 0, total_signals_evaluated: 0 },
   expandedSignals: i = /* @__PURE__ */ new Set(),
   toggleSignal: r = () => {
@@ -589,15 +589,15 @@ const kt = {
   },
   highlightTurns: p = () => {
   },
-  onShowInTranscript: h = () => {
+  onShowInTranscript: y = () => {
   },
   timelinePlaying: v = !1,
-  currentTimeSeconds: y = 0
+  currentTimeSeconds: f = 0
 }) => {
-  const m = (n == null ? void 0 : n.signals) ?? [], w = (n == null ? void 0 : n.present_count) ?? m.length, S = (d) => {
-    const l = Math.floor(d / 6e4), f = Math.floor(d % 6e4 / 1e3);
-    return `${l.toString().padStart(2, "0")}:${f.toString().padStart(2, "0")}`;
-  }, D = (d) => v && d.start_ms != null && y * 1e3 >= d.start_ms && y * 1e3 <= (d.end_ms ?? d.start_ms + 5e3);
+  const u = (n == null ? void 0 : n.signals) ?? [], b = (n == null ? void 0 : n.present_count) ?? u.length, k = (d) => {
+    const l = Math.floor(d / 6e4), h = Math.floor(d % 6e4 / 1e3);
+    return `${l.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}`;
+  }, C = (d) => v && d.start_ms != null && f * 1e3 >= d.start_ms && f * 1e3 <= (d.end_ms ?? d.start_ms + 5e3);
   return /* @__PURE__ */ t("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -621,7 +621,7 @@ const kt = {
         borderRadius: 9999,
         background: "var(--surface-hover, #F3F7F7)",
         flexShrink: 0
-      }, children: /* @__PURE__ */ e(we, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      }, children: /* @__PURE__ */ e(De, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
       /* @__PURE__ */ t("div", { style: {
         display: "flex",
         alignItems: "center",
@@ -638,7 +638,7 @@ const kt = {
           fontWeight: 500,
           color: "var(--Grey-Strong, #2E3236)"
         }, children: [
-          w,
+          b,
           " Signals Detected"
         ] })
       ] })
@@ -650,18 +650,18 @@ const kt = {
       background: "var(--Grey-White, #FFF)",
       gap: 8
     }, children: [
-      m.length === 0 && /* @__PURE__ */ e("div", { style: {
+      u.length === 0 && /* @__PURE__ */ e("div", { style: {
         padding: "8px 0",
         fontSize: 14,
         color: "var(--Grey-Muted, #808183)"
       }, children: "No signals detected." }),
-      m.map((d, l) => {
-        var W, F, E;
-        const f = d.key ?? d.id ?? l, u = i.has(f), C = ((W = d.observations) == null ? void 0 : W.length) ?? 0;
+      u.map((d, l) => {
+        var F, I, P;
+        const h = d.key ?? d.id ?? l, m = i.has(h), D = ((F = d.observations) == null ? void 0 : F.length) ?? 0;
         return /* @__PURE__ */ t(
           "div",
           {
-            id: `signal-${f}`,
+            id: `signal-${h}`,
             style: {
               display: "flex",
               flexDirection: "column",
@@ -672,7 +672,7 @@ const kt = {
               /* @__PURE__ */ t(
                 "button",
                 {
-                  onClick: () => r(f),
+                  onClick: () => r(h),
                   style: {
                     display: "flex",
                     padding: "8px 0",
@@ -694,28 +694,28 @@ const kt = {
                       color: "var(--text-dark, #0B0A0A)",
                       lineHeight: 1.71
                     }, children: [
-                      d.display_name || ((F = d.key) == null ? void 0 : F.replace(/_/g, " ")),
-                      C > 0 && /* @__PURE__ */ t("span", { style: {
+                      d.display_name || ((I = d.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,
                         ")"
                       ] })
                     ] }),
-                    u ? /* @__PURE__ */ e(De, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(Ce, { size: 20, color: "#767473" })
+                    m ? /* @__PURE__ */ e(Fe, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(ze, { size: 20, color: "#767473" })
                   ]
                 }
               ),
-              u && ((E = d.observations) == null ? void 0 : E.length) > 0 && /* @__PURE__ */ e("div", { style: {
+              m && ((P = d.observations) == null ? void 0 : P.length) > 0 && /* @__PURE__ */ e("div", { style: {
                 display: "flex",
                 flexDirection: "column",
                 alignSelf: "stretch",
                 gap: 0
-              }, children: d.observations.map((z, P) => {
-                var A, G, T;
+              }, children: d.observations.map((z, j) => {
+                var G, M, L;
                 return /* @__PURE__ */ t(
                   "div",
                   {
@@ -740,7 +740,7 @@ const kt = {
                           color: "var(--text-subtle-warm, #767473)",
                           lineHeight: 1.5
                         }, children: z.reason || z.explanation }),
-                        ((G = (A = z.evidence) == null ? void 0 : A[0]) == null ? void 0 : G.start_ms) != null && /* @__PURE__ */ t(
+                        ((M = (G = z.evidence) == null ? void 0 : G[0]) == null ? void 0 : M.start_ms) != null && /* @__PURE__ */ t(
                           "div",
                           {
                             style: {
@@ -751,14 +751,14 @@ const kt = {
                             },
                             children: [
                               /* @__PURE__ */ e(
-                                be,
+                                we,
                                 {
                                   size: 28,
                                   title: "Show in transcript",
-                                  onClick: (I) => {
-                                    I.stopPropagation(), h(z.evidence[0].start_ms);
+                                  onClick: (W) => {
+                                    W.stopPropagation(), y(z.evidence[0].start_ms);
                                   },
-                                  children: /* @__PURE__ */ e(ot, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                                  children: /* @__PURE__ */ e(pt, { size: 16, color: "#808183", strokeWidth: 1.5 })
                                 }
                               ),
                               /* @__PURE__ */ e("span", { style: {
@@ -767,69 +767,72 @@ const kt = {
                                 color: "var(--Grey-Muted, #808183)",
                                 lineHeight: 1.2,
                                 whiteSpace: "nowrap"
-                              }, children: S(z.evidence[0].start_ms) })
+                              }, children: k(z.evidence[0].start_ms) })
                             ]
                           }
                         )
                       ] }),
-                      (T = z.evidence) == null ? void 0 : T.map((I, B) => I.text && /* @__PURE__ */ t(
-                        "div",
-                        {
-                          onClick: ($) => {
-                            $.stopPropagation(), s(I);
-                          },
-                          onMouseEnter: () => p(I.turn_ids ?? []),
-                          onMouseLeave: () => p([]),
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 8,
-                            padding: "8px 0",
-                            cursor: "pointer"
+                      (L = z.evidence) == null ? void 0 : L.map((W, O) => {
+                        const A = W.start_ms != null && W.end_ms != null;
+                        return W.text && /* @__PURE__ */ t(
+                          "div",
+                          {
+                            onClick: (Y) => {
+                              Y.stopPropagation(), A && s(W);
+                            },
+                            onMouseEnter: () => p(W.turn_ids ?? []),
+                            onMouseLeave: () => p([]),
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 8,
+                              padding: "8px 0",
+                              cursor: A ? "pointer" : "default"
+                            },
+                            children: [
+                              A && /* @__PURE__ */ e(we, { size: 28, children: C(W) ? /* @__PURE__ */ e(
+                                ft,
+                                {
+                                  size: 17,
+                                  color: "var(--Grey-Muted, #808183)",
+                                  strokeWidth: 1.5
+                                }
+                              ) : /* @__PURE__ */ e(
+                                ht,
+                                {
+                                  size: 17,
+                                  color: "var(--Grey-Muted, #808183)",
+                                  strokeWidth: 1
+                                }
+                              ) }),
+                              /* @__PURE__ */ t("span", { style: {
+                                fontSize: 13,
+                                fontWeight: 400,
+                                color: "var(--Grey-Strong, #2E3236)",
+                                lineHeight: 1.2
+                              }, children: [
+                                "“",
+                                W.text,
+                                "”"
+                              ] })
+                            ]
                           },
-                          children: [
-                            /* @__PURE__ */ e(be, { size: 28, children: D(I) ? /* @__PURE__ */ e(
-                              rt,
-                              {
-                                size: 17,
-                                color: "var(--Grey-Muted, #808183)",
-                                strokeWidth: 1.5
-                              }
-                            ) : /* @__PURE__ */ e(
-                              lt,
-                              {
-                                size: 17,
-                                color: "var(--Grey-Muted, #808183)",
-                                strokeWidth: 1
-                              }
-                            ) }),
-                            /* @__PURE__ */ t("span", { style: {
-                              fontSize: 13,
-                              fontWeight: 400,
-                              color: "var(--Grey-Strong, #2E3236)",
-                              lineHeight: 1.2
-                            }, children: [
-                              "“",
-                              I.text,
-                              "”"
-                            ] })
-                          ]
-                        },
-                        B
-                      ))
+                          O
+                        );
+                      })
                     ]
                   },
-                  z.key ?? P
+                  z.key ?? j
                 );
               }) })
             ]
           },
-          f
+          h
         );
       })
     ] })
   ] });
-}, k = {
+}, w = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
   absent: "var(--Grey-absent, #D9D9D9)",
@@ -837,48 +840,48 @@ const kt = {
   accent: "var(--rail-orange, #C98A5A)",
   track: "var(--rail-surface-2, #E3E1D7)",
   infoIcon: "var(--color-input-border, #ACACAD)"
-}, Wt = ({ score: n = 4, maxScore: i = 10 }) => {
-  const w = Math.min(Math.round(n / i * 5), 5), S = 180 / 5, D = (f) => {
-    const u = f * Math.PI / 180;
+}, Ht = ({ score: n = 4, maxScore: i = 10 }) => {
+  const b = Math.min(Math.round(n / i * 5), 5), k = 180 / 5, C = (h) => {
+    const m = h * Math.PI / 180;
     return {
-      x: 121.5 + 85 * Math.cos(u),
-      y: 123 - 85 * Math.sin(u)
+      x: 121.5 + 85 * Math.cos(m),
+      y: 123 - 85 * Math.sin(m)
     };
-  }, d = (f, u) => {
-    const C = D(f), W = D(u), F = f - u > 180 ? 1 : 0;
-    return `M ${C.x} ${C.y} A 85 85 0 ${F} 1 ${W.x} ${W.y}`;
+  }, d = (h, m) => {
+    const D = C(h), F = C(m), I = h - m > 180 ? 1 : 0;
+    return `M ${D.x} ${D.y} A 85 85 0 ${I} 1 ${F.x} ${F.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 C = 180 - u * S - (u > 0 ? l / 2 : 0), W = 180 - (u + 1) * S + (u < 5 - 1 ? l / 2 : 0), F = u < w;
+  return /* @__PURE__ */ e("svg", { width: "100%", viewBox: "0 0 243 130", fill: "none", style: { maxWidth: 243 }, children: Array.from({ length: 5 }, (h, m) => {
+    const D = 180 - m * k - (m > 0 ? l / 2 : 0), F = 180 - (m + 1) * k + (m < 5 - 1 ? l / 2 : 0), I = m < b;
     return /* @__PURE__ */ e(
       "path",
       {
-        d: d(C, W),
-        stroke: F ? k.strong : k.track,
+        d: d(D, F),
+        stroke: I ? w.strong : w.track,
         strokeWidth: 30,
         strokeLinecap: "butt",
         fill: "none"
       },
-      u
+      m
     );
   }) });
-}, zt = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (r, s) => /* @__PURE__ */ e(
+}, Et = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (r, s) => /* @__PURE__ */ e(
   "div",
   {
     style: {
       width: 22,
       height: 6,
       borderRadius: 1,
-      background: s < n ? k.strong : k.track
+      background: s < n ? w.strong : w.track
     }
   },
   s
-)) }), It = {
+)) }), Tt = {
   CSAT: "Predicted Customer Satisfaction",
   Resolution: "Predicted Resolution: was the issue fully resolved?",
   "Process Adherence": "Process Adherence: Did the agent follow procedures?",
   Communication: "Predicted Communication Quality: Clarity, Empathy, Professionalism"
-}, Ft = ({ text: n, children: i }) => {
+}, Rt = ({ text: n, children: i }) => {
   const [r, s] = _(!1);
   return /* @__PURE__ */ t(
     "div",
@@ -915,7 +918,7 @@ const kt = {
       ]
     }
   );
-}, _t = ({ label: n, value: i = 0, maxValue: r = 5 }) => /* @__PURE__ */ t("div", { style: {
+}, Pt = ({ label: n, value: i = 0, maxValue: r = 5 }) => /* @__PURE__ */ t("div", { style: {
   display: "flex",
   flexDirection: "column",
   gap: 8,
@@ -930,20 +933,20 @@ const kt = {
     /* @__PURE__ */ e("span", { style: {
       fontSize: 12,
       fontWeight: 400,
-      color: k.strong,
+      color: w.strong,
       fontFamily: "var(--font-sans)",
       lineHeight: "normal"
     }, children: n }),
-    /* @__PURE__ */ e(Ft, { text: It[n] || n, children: /* @__PURE__ */ e(st, { size: 14, color: k.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
+    /* @__PURE__ */ e(Rt, { text: Tt[n] || n, children: /* @__PURE__ */ e(yt, { size: 14, color: w.infoIcon, strokeWidth: 1, style: { cursor: "pointer" } }) })
   ] }),
-  /* @__PURE__ */ e(zt, { value: i, maxValue: r })
-] }), At = ({
+  /* @__PURE__ */ e(Et, { value: i, maxValue: r })
+] }), Lt = ({
   score: n = 83,
   maxScore: i = 100,
   predictedScore: r = 4,
   predictedLabel: s = "Predicted Objective",
   description: p = "",
-  legends: h = [
+  legends: y = [
     { label: "CSAT", value: 3 },
     { label: "Resolution", value: 4 },
     { label: "Process Adherence", value: 5 },
@@ -956,9 +959,10 @@ const kt = {
     flexDirection: "column",
     padding: 24,
     borderRadius: 8,
-    border: `1px solid ${k.absent}`,
-    background: k.white,
+    border: `1px solid ${w.absent}`,
+    background: w.white,
     alignSelf: "stretch",
+    flex: 1,
     gap: 24
   }, children: [
     /* @__PURE__ */ t("div", { style: {
@@ -969,14 +973,14 @@ const kt = {
       /* @__PURE__ */ e("span", { style: {
         fontSize: 15,
         fontWeight: 600,
-        color: k.strong,
+        color: w.strong,
         fontFamily: "var(--font-sans)",
         lineHeight: 1.2
       }, children: "Compass Score" }),
       /* @__PURE__ */ e("span", { style: {
         fontSize: 14,
         fontWeight: 400,
-        color: k.muted,
+        color: w.muted,
         fontFamily: "var(--font-sans)",
         lineHeight: "normal"
       }, children: p })
@@ -985,25 +989,46 @@ const kt = {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: 48,
-      flex: 1
+      gap: 24,
+      flex: 1,
+      overflow: "hidden"
     }, children: [
       /* @__PURE__ */ t("div", { style: {
-        display: "flex",
-        width: 243,
+        position: "relative",
+        maxWidth: 243,
+        minWidth: 160,
+        flex: "0 1 243px",
         flexDirection: "column",
         alignItems: "center",
-        flexShrink: 0
+        display: "flex"
       }, children: [
-        /* @__PURE__ */ e(Wt, { 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)" })
-        ] }),
+        /* @__PURE__ */ e(Ht, { score: n, maxScore: i }),
+        (() => {
+          const b = -(180 - (i > 0 ? Math.min(n / i, 1) : 0) * 180 - 45);
+          return /* @__PURE__ */ t(
+            "svg",
+            {
+              width: "34",
+              height: "35",
+              viewBox: "0 0 34 35",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              style: {
+                marginTop: -24,
+                transform: `rotate(${b}deg)`,
+                transformOrigin: "center center"
+              },
+              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)" })
+              ]
+            }
+          );
+        })(),
         /* @__PURE__ */ e("div", { style: {
           fontSize: 28,
           fontWeight: 400,
-          color: k.strong,
+          color: w.strong,
           fontFamily: "var(--font-sans)",
           lineHeight: 1,
           textAlign: "center",
@@ -1026,7 +1051,7 @@ const kt = {
           /* @__PURE__ */ e("div", { style: {
             fontSize: 28,
             fontWeight: 400,
-            color: k.strong,
+            color: w.strong,
             fontFamily: "var(--font-sans)",
             lineHeight: 1,
             textAlign: "center"
@@ -1034,7 +1059,7 @@ const kt = {
           /* @__PURE__ */ e("div", { style: {
             fontSize: 14,
             fontWeight: 400,
-            color: k.muted,
+            color: w.muted,
             fontFamily: "var(--font-sans)",
             lineHeight: 1.43,
             textAlign: "center"
@@ -1043,25 +1068,25 @@ const kt = {
         /* @__PURE__ */ e("div", { style: {
           width: "100%",
           height: 1,
-          background: k.absent
+          background: w.absent
         } }),
-        h.map((y, m) => /* @__PURE__ */ e(
-          _t,
+        y.map((f, u) => /* @__PURE__ */ e(
+          Pt,
           {
-            label: y.label,
-            value: y.value
+            label: f.label,
+            value: f.value
           },
-          m
+          u
         ))
       ] })
     ] })
   ] });
-}, Gt = [
+}, Bt = [
   { key: "overview", label: "Overview" },
   { key: "coaching", label: "Coaching Summary" },
   { key: "signals", label: "Signals & Recording" },
   { key: "comments", label: "Comments" }
-], Lt = ({
+], Nt = ({
   title: n = "Wheel Stud Replacement Enquiry",
   onBack: i,
   // Data props — all optional with defaults for demo
@@ -1071,82 +1096,93 @@ const kt = {
   // 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: h,
+  audioRef: y,
   currentTimeSeconds: v,
-  timelinePlaying: y,
-  playbackRate: m,
-  timelineSegments: w,
-  onSeek: S,
-  onTogglePlay: D,
+  timelinePlaying: f,
+  playbackRate: u,
+  timelineSegments: b,
+  onSeek: k,
+  onTogglePlay: C,
   onSeekBack: d,
   onSeekForward: l,
-  onSetPlaybackRate: f,
+  onSetPlaybackRate: h,
   // Speaker names
-  agentName: u,
-  customerName: C,
+  agentName: m,
+  customerName: D,
   // Transcript props — pass real transcript data from the host app
-  transcript: W,
-  activeTurnIndex: F,
-  turnObservations: E,
+  transcript: F,
+  activeTurnIndex: I,
+  turnObservations: P,
   highlightedTurns: z,
-  onTurnPlayPause: P,
+  onTurnPlayPause: j,
   // Signal evidence playback — host app can provide to play audio segments from signals
-  onPlayEvidence: A,
-  onHighlightTurns: G,
+  onPlayEvidence: G,
+  onHighlightTurns: M,
+  // Context props — pass from host app to override block-derived defaults
+  callPurpose: L,
+  classification: W,
+  outcomeQuality: O,
   // Compass score props
-  compassScore: T,
-  predictedCsat: I,
+  compassScore: A,
+  // gauge meter value (e.g. outcomeLift.p_full) — drives meter fill, range 1-10
+  compassMaxScore: Y = 10,
+  predictedCsat: Ie,
+  // predicted objective number (e.g. compass_score) — shown as "03" top-right
+  predictedLabel: _e = "Predicted Objective",
+  compassLegends: Ae,
   // Customer session dropdown
-  customerSessions: B,
-  customerSessionCount: $,
-  onSessionClick: N,
-  onViewAllSessions: Y,
+  customerSessions: Ge,
+  customerSessionCount: Me,
+  onSessionClick: V,
+  onViewAllSessions: K,
   // Footer navigation
-  prevSessionTitle: We,
-  prevSessionDesc: ze,
-  nextSessionTitle: Ie,
-  nextSessionDesc: Fe,
-  onPreviousSession: _e,
-  onNextSession: Ae
+  prevSessionTitle: He,
+  prevSessionDesc: Ee,
+  prevSessionDisabled: H = !1,
+  nextSessionTitle: Te,
+  nextSessionDesc: Re,
+  nextSessionDisabled: E = !1,
+  onPreviousSession: Pe,
+  onNextSession: Le
 }) => {
-  var ce, ge;
-  const [j, Ge] = _("overview"), [He, Q] = _(/* @__PURE__ */ new Set()), [V, O] = _(!1), [K, X] = _(null), [Me, Z] = _(!1), [Ee, Te] = _(0), H = M(null), J = M(null), ee = M(null), te = M(null), ne = M(null), Re = { overview: J, coaching: ee, signals: te, comments: ne }, Le = (o) => {
-    Ge(o);
-    const g = Re[o];
+  var fe, he;
+  const [U, Be] = _("overview"), [$e, X] = _(/* @__PURE__ */ new Set()), [Z, q] = _(!1), [J, ee] = _(null), [je, te] = _(!1), [Oe, Ue] = _(0), T = R(null), ne = R(null), ie = R(null), oe = R(null), re = R(null), qe = { overview: ne, coaching: ie, signals: oe, comments: re }, Ne = (o) => {
+    Be(o);
+    const g = qe[o];
     g != null && g.current && g.current.scrollIntoView({ behavior: "smooth", block: "start" });
-  }, ie = B || [], Pe = (o) => {
-    var b;
+  }, le = Ge || [], Qe = (o) => {
+    var S;
     const g = o / 1e3;
-    (b = H.current) != null && b.seekTo && H.current.seekTo(g);
-  }, Be = (o) => {
+    (S = T.current) != null && S.seekTo && T.current.seekTo(g);
+  }, Ye = (o) => {
     var g;
-    if (A)
-      A(o);
+    if (G)
+      G(o);
     else {
-      const b = o.start_ms ?? o.startMs;
-      if (b != null && ((g = H.current) != null && g.seekTo)) {
-        H.current.seekTo(b / 1e3), Z(!0), Te(b / 1e3);
-        const Je = (o.end_ms ?? o.endMs ?? b + 5e3) - b;
-        setTimeout(() => Z(!1), Je);
+      const S = o.start_ms ?? o.startMs;
+      if (S != null && ((g = T.current) != null && g.seekTo)) {
+        T.current.seekTo(S / 1e3), te(!0), Ue(S / 1e3);
+        const st = (o.end_ms ?? o.endMs ?? S + 5e3) - S;
+        setTimeout(() => te(!1), st);
       }
     }
-  }, $e = (o) => {
-    G && G(o);
-  }, je = (o) => {
-    Q((g) => {
-      const b = new Set(g);
-      return b.has(o) ? b.delete(o) : b.add(o), b;
+  }, Ve = (o) => {
+    M && M(o);
+  }, Ke = (o) => {
+    X((g) => {
+      const S = new Set(g);
+      return S.has(o) ? S.delete(o) : S.add(o), S;
     });
-  }, Oe = (r == null ? void 0 : r.blocks) || [], R = (o) => {
+  }, Xe = (r == null ? void 0 : r.blocks) || [], B = (o) => {
     var g;
-    return ((g = Oe.find((b) => b.block_id === o)) == null ? void 0 : g.payload) || {};
-  }, U = R("interaction-metadata"), oe = R("interaction-context"), L = R("interaction-signals"), re = R("interaction-outcome-lift"), Ue = oe.call_purpose || {}, qe = oe.classification || {}, le = { duration_seconds: 156, message_count: 25, ...U }, se = { interaction_driver: "General Information", interaction_direction: "inbound", ...Ue }, Ne = { interaction_paradigm: "Informational", ...qe }, Ye = { p_expected: 0.94, p_full: 0.83, lift_raw: -0.11, lift: 0.043, interpretation: { lift_band: "positive" }, ...re }, Qe = ((ce = re.driver_signal_keys) == null ? void 0 : ce.map((o) => o.replace(/^sig\./, "").replace(/_/g, " "))) || [
+    return ((g = Xe.find((S) => S.block_id === o)) == null ? void 0 : g.payload) || {};
+  }, N = B("interaction-metadata"), se = B("interaction-context"), $ = B("interaction-signals"), ae = B("interaction-outcome-lift"), Ze = se.call_purpose || {}, Je = se.classification || {}, de = { duration_seconds: 156, message_count: 25, ...N }, ce = { interaction_driver: "General Information", interaction_direction: "inbound", ...Ze }, et = { interaction_paradigm: "Informational", ...Je }, tt = { p_expected: 0.94, p_full: 0.83, lift_raw: -0.11, lift: 0.043, interpretation: { lift_band: "positive" }, ...ae }, nt = ((fe = ae.driver_signal_keys) == null ? void 0 : fe.map((o) => o.replace(/^sig\./, "").replace(/_/g, " "))) || [
     "customer needs fully addressed",
     "call flow expectations set",
     "Opening expectations set",
     "Active listening demonstrated",
     "Resolution confirmed"
-  ], Ve = s || {
+  ], it = s || {
     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: [
@@ -1159,7 +1195,7 @@ const kt = {
       { 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"
-  }, Ke = (ge = L == null ? void 0 : L.signals) != null && ge.length ? L : {
+  }, ot = (he = $ == null ? void 0 : $.signals) != null && he.length ? $ : {
     present_count: 9,
     total_signals_evaluated: 146,
     signals: [
@@ -1185,68 +1221,70 @@ const kt = {
       { 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." }] }
     ]
-  }, ae = u || "Agent", q = C || "Customer", de = $ ?? ie.length, Xe = U.evaluated_dt ? new Date(U.evaluated_dt).toLocaleString() : "3/29/2026, 8:30:00 AM", Ze = se.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(
+  }, ge = m || "Agent", Q = D || "Customer", pe = Me ?? le.length, rt = N.evaluated_dt ? new Date(N.evaluated_dt).toLocaleString() : "3/29/2026, 8:30:00 AM", lt = ce.interaction_direction === "inbound" ? "Inbound" : "Outbound";
+  return /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", width: "100%", height: "100%", background: "var(--Grey-White, #FFF)" }, children: [
+    /* @__PURE__ */ t("div", { style: { position: "sticky", top: 0, zIndex: 20, background: "var(--Grey-White, #FFF)" }, children: [
+      /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "24px 24px 0" }, children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: i,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 0,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ e(ye, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
+          }
+        ),
+        /* @__PURE__ */ e("div", { style: { width: 1, height: 28, background: "var(--Base-absent, #D9D9D9)" } }),
+        /* @__PURE__ */ e("h1", { style: {
+          color: "var(--Grey-Strong, #2E3236)",
+          fontSize: 24,
+          fontStyle: "normal",
+          fontWeight: 400,
+          lineHeight: "normal",
+          margin: 0
+        }, children: n })
+      ] }),
+      /* @__PURE__ */ e("div", { style: {
+        display: "flex",
+        alignItems: "flex-start",
+        background: "var(--Grey-White, #FFF)",
+        borderBottom: "1px solid var(--Grey-Faint, #ACADAD)",
+        padding: "0 24px",
+        marginTop: 8
+      }, children: Bt.map((o) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: i,
+          onClick: () => Ne(o.key),
           style: {
             display: "flex",
+            padding: 16,
             alignItems: "center",
-            justifyContent: "center",
+            gap: 10,
             background: "none",
             border: "none",
+            borderBottom: U === o.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
             cursor: "pointer",
-            padding: 0,
-            flexShrink: 0
+            fontSize: 15,
+            fontWeight: U === o.key ? 500 : 400,
+            color: U === o.key ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)",
+            whiteSpace: "nowrap",
+            transition: "border-color 0.2s ease, color 0.2s ease"
           },
-          children: /* @__PURE__ */ e(pe, { size: 24, color: "var(--Grey-Strong, #2E3236)" })
-        }
-      ),
-      /* @__PURE__ */ e("div", { style: { width: 1, height: 28, background: "var(--Base-absent, #D9D9D9)" } }),
-      /* @__PURE__ */ e("h1", { style: {
-        color: "var(--Grey-Strong, #2E3236)",
-        fontSize: 24,
-        fontStyle: "normal",
-        fontWeight: 400,
-        lineHeight: "normal",
-        margin: 0
-      }, children: n })
-    ] }),
-    /* @__PURE__ */ e("div", { style: {
-      display: "flex",
-      alignItems: "flex-start",
-      background: "var(--Grey-White, #FFF)",
-      borderBottom: "1px solid var(--Grey-Faint, #ACADAD)",
-      padding: "0 24px",
-      marginTop: 8
-    }, children: Gt.map((o) => /* @__PURE__ */ e(
-      "button",
-      {
-        onClick: () => Le(o.key),
-        style: {
-          display: "flex",
-          padding: 16,
-          alignItems: "center",
-          gap: 10,
-          background: "none",
-          border: "none",
-          borderBottom: j === o.key ? "3px solid var(--Grey-Strong, #2E3236)" : "3px solid transparent",
-          cursor: "pointer",
-          fontSize: 15,
-          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: o.label
         },
-        children: o.label
-      },
-      o.key
-    )) }),
+        o.key
+      )) })
+    ] }),
     /* @__PURE__ */ t("div", { style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
-      /* @__PURE__ */ t("div", { ref: J, style: {
+      /* @__PURE__ */ t("div", { ref: ne, style: {
         display: "flex",
         flexDirection: "column",
         justifyContent: "flex-end",
@@ -1262,7 +1300,7 @@ const kt = {
           alignSelf: "stretch"
         }, children: [
           /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
-            /* @__PURE__ */ e(at, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
+            /* @__PURE__ */ e(ut, { size: 24, color: "var(--rail-orange, #C98A5A)", strokeWidth: 2 }),
             /* @__PURE__ */ e("span", { style: {
               fontSize: 16,
               fontWeight: 600,
@@ -1273,12 +1311,12 @@ const kt = {
           ] }),
           /* @__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(dt, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
-              /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: Xe })
+              /* @__PURE__ */ e(mt, { 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: rt })
             ] }),
             /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-              /* @__PURE__ */ e(ct, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
-              /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Strong, #2E3236)", fontFamily: "var(--font-sans)", lineHeight: 1.2 }, children: Ze })
+              /* @__PURE__ */ e(vt, { 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: lt })
             ] }),
             /* @__PURE__ */ t("div", { style: {
               display: "flex",
@@ -1288,15 +1326,15 @@ const kt = {
               borderLeft: "1px solid var(--Grey-absent, #D9D9D9)"
             }, children: [
               /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 0" }, children: [
-                /* @__PURE__ */ e(gt, { 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: ae })
+                /* @__PURE__ */ e(xt, { 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: ge })
               ] }),
-              /* @__PURE__ */ e(pt, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
+              /* @__PURE__ */ e(bt, { size: 16, color: "var(--color-input-border, #ACACAD)", strokeWidth: 1.5 }),
               /* @__PURE__ */ t("div", { style: { position: "relative" }, children: [
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => O((o) => !o),
+                    onClick: () => q((o) => !o),
                     style: {
                       display: "flex",
                       alignItems: "center",
@@ -1307,18 +1345,18 @@ const kt = {
                       cursor: "pointer"
                     },
                     children: [
-                      /* @__PURE__ */ e(fe, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                      /* @__PURE__ */ e(ue, { 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: [
-                        q,
+                        Q,
                         " (",
-                        de,
+                        pe,
                         " Sessions)"
                       ] }),
-                      V ? /* @__PURE__ */ e(De, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(Ce, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
+                      Z ? /* @__PURE__ */ e(Fe, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }) : /* @__PURE__ */ e(ze, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 })
                     ]
                   }
                 ),
-                V && /* @__PURE__ */ t("div", { style: {
+                Z && /* @__PURE__ */ t("div", { style: {
                   position: "absolute",
                   top: "100%",
                   right: 0,
@@ -1337,40 +1375,40 @@ const kt = {
                     gap: 8,
                     padding: 16
                   }, children: [
-                    /* @__PURE__ */ e(fe, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5, style: { marginTop: 2, flexShrink: 0 } }),
+                    /* @__PURE__ */ e(ue, { 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: q }),
+                      }, children: Q }),
                       /* @__PURE__ */ t("span", { style: {
                         fontSize: 13,
                         fontWeight: 400,
                         color: "var(--Grey-Muted, #808183)",
                         lineHeight: 1
                       }, children: [
-                        de,
+                        pe,
                         " Sessions in past"
                       ] })
                     ] })
                   ] }),
-                  ie.map((o, g) => /* @__PURE__ */ t(
+                  le.slice(0, 5).map((o, g) => /* @__PURE__ */ t(
                     "div",
                     {
                       onClick: () => {
-                        N && N(o), O(!1);
+                        V && V(o), q(!1);
                       },
-                      onMouseEnter: () => X(g),
-                      onMouseLeave: () => X(null),
+                      onMouseEnter: () => ee(g),
+                      onMouseLeave: () => ee(null),
                       style: {
                         display: "flex",
                         width: 264,
                         padding: "12px 16px",
                         justifyContent: "space-between",
                         alignItems: "center",
-                        background: K === g ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                        background: J === g ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
                         borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
                         cursor: "pointer",
                         boxSizing: "border-box",
@@ -1391,7 +1429,7 @@ const kt = {
                             lineHeight: 1
                           }, children: o.date })
                         ] }),
-                        K === g && /* @__PURE__ */ e(ke, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
+                        J === g && /* @__PURE__ */ e(Ce, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
                       ]
                     },
                     o.id || g
@@ -1405,7 +1443,7 @@ const kt = {
                     "button",
                     {
                       onClick: () => {
-                        Y && Y(), O(!1);
+                        K && K(), q(!1);
                       },
                       style: {
                         display: "flex",
@@ -1420,7 +1458,7 @@ const kt = {
                         cursor: "pointer"
                       },
                       children: [
-                        /* @__PURE__ */ e(ft, { 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,
@@ -1436,17 +1474,18 @@ const kt = {
         ] }),
         /* @__PURE__ */ t("div", { style: {
           display: "flex",
-          alignItems: "flex-start",
+          alignItems: "stretch",
           gap: 24,
           alignSelf: "stretch"
         }, children: [
-          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            At,
+          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0, display: "flex" }, children: /* @__PURE__ */ e(
+            Lt,
             {
-              score: T ?? 0,
+              score: A != null ? Math.round(A * 100) : 0,
               maxScore: 100,
-              predictedScore: I ?? 0,
-              predictedLabel: "Predicted Objective"
+              predictedScore: Ie ?? 0,
+              predictedLabel: _e,
+              legends: Ae
             }
           ) }),
           /* @__PURE__ */ t("div", { style: {
@@ -1459,26 +1498,26 @@ const kt = {
             minWidth: 0
           }, children: [
             /* @__PURE__ */ e(
-              wt,
+              At,
               {
-                meta: le,
-                callPurpose: se,
-                classification: Ne,
-                outcomeQuality: "Neutral"
+                meta: de,
+                callPurpose: L || ce,
+                classification: W || et,
+                outcomeQuality: O || "Neutral"
               }
             ),
             /* @__PURE__ */ e(
-              Dt,
+              Gt,
               {
-                outcomeLift: Ye,
-                driverLabels: Qe
+                outcomeLift: tt,
+                driverLabels: nt
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { ref: ee, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(bt, { data: Ve }) }),
-      /* @__PURE__ */ t("div", { ref: te, style: {
+      /* @__PURE__ */ e("div", { ref: ie, style: { paddingTop: 24 }, children: /* @__PURE__ */ e(zt, { data: it }) }),
+      /* @__PURE__ */ t("div", { ref: oe, style: {
         display: "flex",
         flexDirection: "column",
         gap: 16,
@@ -1490,7 +1529,7 @@ const kt = {
           alignItems: "center",
           gap: 8
         }, children: [
-          /* @__PURE__ */ e(we, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
+          /* @__PURE__ */ e(De, { size: 24, color: "#C98A5A", strokeWidth: 2 }),
           /* @__PURE__ */ e("span", { style: {
             fontSize: 16,
             fontWeight: 600,
@@ -1508,47 +1547,47 @@ const kt = {
           borderTop: "1px solid #D9D9D9"
         }, children: [
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            Ct,
+            Mt,
             {
-              signals: Ke,
-              expandedSignals: He,
-              toggleSignal: je,
-              playEvidence: Be,
-              highlightTurns: $e,
-              onShowInTranscript: Pe,
-              timelinePlaying: y || Me,
-              currentTimeSeconds: v ?? Ee
+              signals: ot,
+              expandedSignals: $e,
+              toggleSignal: Ke,
+              playEvidence: Ye,
+              highlightTurns: Ve,
+              onShowInTranscript: Qe,
+              timelinePlaying: f || je,
+              currentTimeSeconds: v ?? Oe
             }
           ) }),
           /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-            yt,
+            wt,
             {
-              ref: H,
+              ref: T,
               audioUrl: p,
-              durationSeconds: le.duration_seconds,
-              audioRef: h,
-              agentName: ae,
-              customerName: q.split(" ")[0],
+              durationSeconds: de.duration_seconds,
+              audioRef: y,
+              agentName: ge,
+              customerName: Q.split(" ")[0],
               currentTimeSeconds: v,
-              timelinePlaying: y,
-              playbackRate: m,
-              timelineSegments: w,
-              onSeek: S,
-              onTogglePlay: D,
+              timelinePlaying: f,
+              playbackRate: u,
+              timelineSegments: b,
+              onSeek: k,
+              onTogglePlay: C,
               onSeekBack: d,
               onSeekForward: l,
-              onSetPlaybackRate: f,
-              transcript: W,
-              activeTurnIndex: F,
-              turnObservations: E,
+              onSetPlaybackRate: h,
+              transcript: F,
+              activeTurnIndex: I,
+              turnObservations: P,
               highlightedTurns: z,
-              onTurnPlayPause: P,
-              setExpandedSignals: Q
+              onTurnPlayPause: j,
+              setExpandedSignals: X
             }
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { ref: ne, 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: re, 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",
@@ -1559,7 +1598,8 @@ const kt = {
       /* @__PURE__ */ t(
         "button",
         {
-          onClick: _e,
+          onClick: H ? void 0 : Pe,
+          disabled: H,
           style: {
             display: "flex",
             alignItems: "center",
@@ -1568,10 +1608,12 @@ const kt = {
             flex: 1,
             background: "var(--Grey-White, #FFF)",
             border: "1px solid var(--Grey-absent, #D9D9D9)",
-            cursor: "pointer"
+            cursor: H ? "default" : "pointer",
+            opacity: H ? 0.4 : 1,
+            pointerEvents: H ? "none" : "auto"
           },
           children: [
-            /* @__PURE__ */ e(pe, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 }),
+            /* @__PURE__ */ e(ye, { 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,
@@ -1579,7 +1621,7 @@ const kt = {
                 color: "#000",
                 lineHeight: 1.2,
                 textAlign: "left"
-              }, children: We || "Previous Session Title" }),
+              }, children: He || "Previous Session Title" }),
               /* @__PURE__ */ e("span", { style: {
                 fontSize: 13,
                 fontWeight: 400,
@@ -1587,7 +1629,7 @@ const kt = {
                 lineHeight: 1.2,
                 opacity: 0.5,
                 textAlign: "left"
-              }, children: ze || "Short description of the session" })
+              }, children: Ee || "Short description of the session" })
             ] })
           ]
         }
@@ -1595,7 +1637,8 @@ const kt = {
       /* @__PURE__ */ t(
         "button",
         {
-          onClick: Ae,
+          onClick: E ? void 0 : Le,
+          disabled: E,
           style: {
             display: "flex",
             alignItems: "center",
@@ -1605,7 +1648,9 @@ const kt = {
             flex: 1,
             background: "var(--Grey-White, #FFF)",
             border: "1px solid var(--Grey-absent, #D9D9D9)",
-            cursor: "pointer"
+            cursor: E ? "default" : "pointer",
+            opacity: E ? 0.4 : 1,
+            pointerEvents: E ? "none" : "auto"
           },
           children: [
             /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
@@ -1615,7 +1660,7 @@ const kt = {
                 color: "#000",
                 lineHeight: 1.2,
                 textAlign: "left"
-              }, children: Ie || "Next Session Title" }),
+              }, children: Te || "Next Session Title" }),
               /* @__PURE__ */ e("span", { style: {
                 fontSize: 13,
                 fontWeight: 400,
@@ -1623,9 +1668,9 @@ const kt = {
                 lineHeight: 1.2,
                 opacity: 0.5,
                 textAlign: "left"
-              }, children: Fe || "Short description of the session" })
+              }, children: Re || "Short description of the session" })
             ] }),
-            /* @__PURE__ */ e(ht, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 })
+            /* @__PURE__ */ e(kt, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 })
           ]
         }
       )
@@ -1633,12 +1678,12 @@ const kt = {
   ] });
 };
 export {
-  bt as UpdatedCoachingSynthesisCard,
-  At as UpdatedCompassScore,
-  wt as UpdatedInteractionContext,
-  Lt as UpdatedInteractionDetails,
-  yt as UpdatedInteractionRecording,
-  Dt as UpdatedInteractionScores,
-  Ct as UpdatedInteractionSignals
+  zt as UpdatedCoachingSynthesisCard,
+  Lt as UpdatedCompassScore,
+  At as UpdatedInteractionContext,
+  Nt as UpdatedInteractionDetails,
+  wt as UpdatedInteractionRecording,
+  Gt as UpdatedInteractionScores,
+  Mt as UpdatedInteractionSignals
 };
 //# sourceMappingURL=UpdatedInteractionDetails.es.js.map