chordia-ui 3.3.8 → 3.3.9

package/dist/components/UpdatedInteractionDetails.es.js

@@ -1,12 +1,1534 @@
-import { U as e, a as d, b as n, c as o, d as s, e as r } from "../UpdatedInteractionDetails.es.js";
-import { U as i } from "../UpdatedInteractionRecording.es.js";
+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 "../Timeline.es.js";
+const c = {
+  strong: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  absent: "var(--Grey-absent, #D9D9D9)",
+  accent: "var(--rail-orange, #C98A5A)",
+  itemText: "var(--text-item, #3F3F3F)",
+  quoteLine: "var(--border-warm, #B2AEA8)",
+  quoteText: "var(--text-subtle-warm, #767473)",
+  iconBg: "var(--surface-hover, #F3F7F7)"
+}, He = {
+  effective: "Effective",
+  strong: "Strong",
+  needs_improvement: "Needs Improvement",
+  mixed: "Mixed"
+}, K = "updated-coaching-synthesis-keyframes";
+function Me() {
+  if (typeof document > "u" || document.getElementById(K))
+    return;
+  const n = document.createElement("style");
+  n.id = K, n.textContent = `
+    @keyframes updated-coaching-shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+    @keyframes updated-coaching-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+  `, document.head.appendChild(n);
+}
+function Ee({ overall: n }) {
+  const i = He[n] || (n ? n.replace(/_/g, " ") : "");
+  return /* @__PURE__ */ t("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 0
+  }, children: [
+    /* @__PURE__ */ e("span", { style: {
+      fontSize: 13,
+      fontWeight: 400,
+      color: c.strong,
+      fontFamily: "var(--font-sans)",
+      lineHeight: 1.2
+    }, children: "Overall:" }),
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 6
+    }, children: [
+      /* @__PURE__ */ e(re, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+      /* @__PURE__ */ e("span", { style: {
+        fontSize: 13,
+        fontWeight: 600,
+        color: c.strong,
+        fontFamily: "var(--font-sans)",
+        lineHeight: 1.2
+      }, children: i })
+    ] })
+  ] });
+}
+function Te({ 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: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: c.itemText,
+      fontFamily: "var(--font-sans)",
+      lineHeight: 1.5
+    }, children: i }),
+    o && /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      gap: 10
+    }, children: [
+      /* @__PURE__ */ e("div", { style: {
+        width: 1,
+        flexShrink: 0,
+        alignSelf: "stretch",
+        background: c.quoteLine
+      } }),
+      /* @__PURE__ */ t("div", { style: {
+        fontSize: 14,
+        fontWeight: 400,
+        color: c.quoteText,
+        fontFamily: "var(--font-sans)",
+        lineHeight: 1.5
+      }, children: [
+        "“",
+        o,
+        "”"
+      ] })
+    ] })
+  ] });
+}
+function Z({ icon: n, label: i, items: o }) {
+  return !o || o.length === 0 ? null : /* @__PURE__ */ t("div", { style: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: 16,
+    borderRadius: 12
+  }, children: [
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 16
+    }, children: [
+      /* @__PURE__ */ e("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 24,
+        height: 24,
+        borderRadius: 9999,
+        background: c.iconBg,
+        flexShrink: 0
+      }, children: n }),
+      /* @__PURE__ */ e("span", { style: {
+        fontSize: 16,
+        fontWeight: 600,
+        color: c.strong,
+        fontFamily: "var(--font-sans)",
+        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)) })
+  ] });
+}
+const X = ({ data: n, loading: i, error: o }) => {
+  var y, u;
+  if (me.useEffect(() => {
+    Me();
+  }, []), i)
+    return /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 12
+    }, children: [
+      /* @__PURE__ */ t("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8
+      }, children: [
+        /* @__PURE__ */ e("div", { style: {
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          background: c.accent,
+          animation: "updated-coaching-pulse 1.5s ease-in-out infinite"
+        } }),
+        /* @__PURE__ */ e("span", { style: {
+          fontSize: 14,
+          color: c.muted,
+          fontWeight: 500
+        }, children: "Synthesizing coaching summary..." })
+      ] }),
+      [180, 260, 220].map((k, b) => /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            height: 10,
+            width: k,
+            maxWidth: "100%",
+            borderRadius: 4,
+            background: `linear-gradient(90deg, ${c.absent} 25%, var(--shimmer-mid, #ECECEC) 50%, ${c.absent} 75%)`,
+            backgroundSize: "200% 100%",
+            animation: "updated-coaching-shimmer 1.8s ease-in-out infinite",
+            animationDelay: `${b * 0.2}s`
+          }
+        },
+        b
+      ))
+    ] });
+  if (o)
+    return /* @__PURE__ */ e("div", { style: {
+      fontSize: 14,
+      color: c.muted
+    }, 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) || "";
+  return /* @__PURE__ */ t("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 16,
+    background: "#FFF"
+  }, children: [
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8
+    }, children: [
+      /* @__PURE__ */ e(be, { size: 20, color: c.accent, strokeWidth: 2 }),
+      /* @__PURE__ */ e("span", { style: {
+        fontSize: 16,
+        fontWeight: 600,
+        color: c.strong,
+        fontFamily: "var(--font-sans)",
+        lineHeight: 1.2,
+        textTransform: "uppercase"
+      }, children: "Coaching Summary" })
+    ] }),
+    h && /* @__PURE__ */ e("div", { style: {
+      fontSize: 14,
+      fontWeight: 500,
+      color: c.strong,
+      fontFamily: "var(--font-sans)",
+      lineHeight: 1.5
+    }, children: h }),
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 16,
+      justifyContent: "space-between"
+    }, children: [
+      x && /* @__PURE__ */ e("div", { style: {
+        fontSize: 14,
+        fontWeight: 400,
+        color: c.muted,
+        fontFamily: "var(--font-sans)",
+        lineHeight: 1.5,
+        flex: 1
+      }, children: x }),
+      n.overall && /* @__PURE__ */ e(Ee, { overall: n.overall })
+    ] }),
+    (a.length > 0 || p.length > 0) && /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      gap: 24,
+      paddingTop: 24,
+      borderTop: `1px solid ${c.absent}`
+    }, children: [
+      /* @__PURE__ */ e(
+        Z,
+        {
+          icon: /* @__PURE__ */ e(Se, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          label: "Key Strengths",
+          items: a
+        }
+      ),
+      /* @__PURE__ */ e(
+        Z,
+        {
+          icon: /* @__PURE__ */ e(ke, { size: 14, color: c.strong, strokeWidth: 1.5 }),
+          label: "Improvements",
+          items: p
+        }
+      )
+    ] })
+  ] });
+};
+function Re(n) {
+  const i = Math.floor(n / 60), o = Math.round(n % 60);
+  return `${i}:${o.toString().padStart(2, "0")}`;
+}
+const Le = {
+  display: "flex",
+  justifyContent: "space-between",
+  padding: "8px 8px 12px 8px",
+  alignItems: "center",
+  gap: 24,
+  fontFamily: "var(--font-sans)",
+  fontSize: 13,
+  fontWeight: 400,
+  lineHeight: "normal",
+  borderBottom: "1px solid var(--Grey-absent, #D9D9D9)"
+}, J = {
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 0 0",
+  gap: 12,
+  minWidth: 0
+}, Be = ({
+  meta: n = {},
+  callPurpose: i = {},
+  classification: o = {},
+  dimensions: a = [],
+  outcomeQuality: p = "Neutral",
+  onMoreDetails: h
+}) => {
+  const x = n.duration_seconds != null ? Re(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 = [
+    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 })),
+    { label: "More Details", isLink: !0 }
+  ].filter(Boolean), s = (r) => r.isLink ? /* @__PURE__ */ t(
+    "div",
+    {
+      onClick: h,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "8px 0 8px 0",
+        cursor: "pointer",
+        fontFamily: "var(--font-sans)"
+      },
+      children: [
+        /* @__PURE__ */ e(le, { size: 16, color: "#808183", strokeWidth: 1.5 }),
+        /* @__PURE__ */ e("span", { style: { color: "var(--Grey-Strong, #2E3236)", fontSize: 13, fontWeight: 400 }, children: r.label })
+      ]
+    },
+    r.label
+  ) : /* @__PURE__ */ t(
+    "div",
+    {
+      style: Le,
+      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 })
+      ]
+    },
+    r.label
+  );
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 24,
+        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)) })
+      ]
+    }
+  );
+}, l = {
+  strong: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  absent: "var(--Grey-absent, #D9D9D9)",
+  white: "var(--Grey-White, #FFF)",
+  cardBg: "var(--surface-warm-40, rgba(243, 241, 229, 0.40))"
+}, m = 1.2, ee = 3, te = (n) => n != null ? Math.round(n * 100) + "%" : "—", ne = (n) => {
+  if (n == null)
+    return "—";
+  const i = (n * 100).toFixed(1);
+  return n > 0 ? `+${i}pp` : `${i}pp`;
+}, $e = ({ 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;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        padding: 24,
+        gap: 24,
+        borderRadius: 8,
+        border: `1px solid ${l.absent}`,
+        background: l.cardBg,
+        alignSelf: "stretch"
+      },
+      children: [
+        /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 24,
+                alignSelf: "stretch"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 15,
+                      fontWeight: 600,
+                      color: l.strong,
+                      fontFamily: "var(--font-sans)",
+                      lineHeight: m
+                    },
+                    children: "Agent Lift Analysis"
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      fontFamily: "var(--font-sans)"
+                    },
+                    children: [
+                      /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.strong, lineHeight: m }, children: "vs. Average Agent:" }),
+                      /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 600, color: l.strong, lineHeight: m }, children: ne(h) }),
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6,
+                            paddingLeft: 8,
+                            borderLeft: `1px solid ${l.absent}`
+                          },
+                          children: [
+                            /* @__PURE__ */ e(re, { size: 14, color: l.strong }),
+                            /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: l.strong, lineHeight: m }, children: y })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "flex-end",
+                gap: 24
+              },
+              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__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Expected Outcome" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Based on call type & difficulty" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ t("div", { style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 16,
+                  alignItems: "center",
+                  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__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.strong, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Agent Impact" }),
+                    /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 400, color: l.muted, fontFamily: "var(--font-sans)", lineHeight: m }, children: "Behavior-driven change" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ t("div", { style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 16,
+                  alignItems: "center",
+                  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__ */ 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" })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        i.length > 0 && /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignSelf: "stretch" }, children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              style: {
+                fontSize: 12,
+                fontWeight: 600,
+                color: l.strong,
+                fontFamily: "var(--font-sans)",
+                lineHeight: m
+              },
+              children: "Key Drivers"
+            }
+          ),
+          /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: [
+            u.map((v, s) => /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  padding: 8,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 4,
+                  border: `1px solid ${l.absent}`,
+                  background: l.white
+                },
+                children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12,
+                      fontWeight: 400,
+                      color: l.strong,
+                      fontFamily: "var(--font-sans)",
+                      lineHeight: m,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      maxWidth: 200
+                    },
+                    children: v
+                  }
+                )
+              },
+              s
+            )),
+            k > 0 && /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  padding: 8,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 4,
+                  border: `1px solid ${l.absent}`,
+                  background: l.white
+                },
+                children: /* @__PURE__ */ t(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12,
+                      fontWeight: 400,
+                      color: l.strong,
+                      fontFamily: "var(--font-sans)",
+                      lineHeight: m,
+                      whiteSpace: "nowrap"
+                    },
+                    children: [
+                      "+ ",
+                      k
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}, ie = ({ children: n, size: i = 28, onClick: o, title: a }) => {
+  const [p, h] = M(!1);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      title: a,
+      onClick: o,
+      onMouseEnter: () => h(!0),
+      onMouseLeave: () => h(!1),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: i,
+        height: i,
+        borderRadius: 9999,
+        background: p ? "var(--surface-hover, #F3F7F7)" : "transparent",
+        cursor: "pointer",
+        flexShrink: 0,
+        transition: "background 0.15s"
+      },
+      children: n
+    }
+  );
+}, oe = ({
+  signals: n = { signals: [], present_count: 0, total_signals_evaluated: 0 },
+  expandedSignals: i = /* @__PURE__ */ new Set(),
+  toggleSignal: o = () => {
+  },
+  playEvidence: a = () => {
+  },
+  highlightTurns: p = () => {
+  },
+  onShowInTranscript: h = () => {
+  },
+  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);
+  return /* @__PURE__ */ t("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    alignSelf: "stretch",
+    width: "100%",
+    gap: 16
+  }, children: [
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 16,
+      width: "100%"
+    }, children: [
+      /* @__PURE__ */ e("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 34,
+        height: 34,
+        borderRadius: 9999,
+        background: "var(--surface-hover, #F3F7F7)",
+        flexShrink: 0
+      }, children: /* @__PURE__ */ e(se, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      /* @__PURE__ */ t("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flex: 1
+      }, children: [
+        /* @__PURE__ */ e("span", { style: {
+          fontSize: 15,
+          fontWeight: 500,
+          color: "var(--Grey-Strong, #2E3236)"
+        }, children: "Signals" }),
+        /* @__PURE__ */ t("span", { style: {
+          fontSize: 14,
+          fontWeight: 500,
+          color: "var(--Grey-Strong, #2E3236)"
+        }, children: [
+          k,
+          " Signals Detected"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      alignSelf: "stretch",
+      background: "var(--Grey-White, #FFF)",
+      gap: 8
+    }, children: [
+      u.length === 0 && /* @__PURE__ */ e("div", { style: {
+        padding: "8px 0",
+        fontSize: 14,
+        color: "var(--Grey-Muted, #808183)"
+      }, children: "No signals detected." }),
+      u.map((s, r) => {
+        var w, z, _;
+        const g = s.key ?? s.id ?? r, f = i.has(g), C = ((w = s.observations) == null ? void 0 : w.length) ?? 0;
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            id: `signal-${g}`,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              width: "100%",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  onClick: () => o(g),
+                  style: {
+                    display: "flex",
+                    padding: "8px 0",
+                    alignItems: "center",
+                    gap: 12,
+                    alignSelf: "stretch",
+                    width: "100%",
+                    background: "none",
+                    border: "none",
+                    borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ t("span", { style: {
+                      flex: 1,
+                      textAlign: "left",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      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: {
+                        fontWeight: 600,
+                        color: "var(--text-dark, #0B0A0A)",
+                        marginLeft: 6
+                      }, children: [
+                        "(",
+                        C,
+                        ")"
+                      ] })
+                    ] }),
+                    f ? /* @__PURE__ */ e(ae, { size: 20, color: "#767473" }) : /* @__PURE__ */ e(de, { size: 20, color: "#767473" })
+                  ]
+                }
+              ),
+              f && ((_ = s.observations) == null ? void 0 : _.length) > 0 && /* @__PURE__ */ e("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                alignSelf: "stretch",
+                gap: 0
+              }, children: s.observations.map((F, E) => {
+                var H, T, A;
+                return /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignSelf: "stretch",
+                      gap: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ t("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 12,
+                        padding: "8px 0",
+                        justifyContent: "space-between"
+                      }, children: [
+                        /* @__PURE__ */ e("span", { style: {
+                          flex: 1,
+                          fontSize: 14,
+                          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(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 8,
+                              flexShrink: 0
+                            },
+                            children: [
+                              /* @__PURE__ */ e(
+                                ie,
+                                {
+                                  size: 28,
+                                  title: "Show in transcript",
+                                  onClick: (D) => {
+                                    D.stopPropagation(), h(F.evidence[0].start_ms);
+                                  },
+                                  children: /* @__PURE__ */ e(De, { size: 16, color: "#808183", strokeWidth: 1.5 })
+                                }
+                              ),
+                              /* @__PURE__ */ e("span", { style: {
+                                fontSize: 13,
+                                fontWeight: 400,
+                                color: "var(--Grey-Muted, #808183)",
+                                lineHeight: 1.2,
+                                whiteSpace: "nowrap"
+                              }, children: b(F.evidence[0].start_ms) })
+                            ]
+                          }
+                        )
+                      ] }),
+                      (A = F.evidence) == null ? void 0 : A.map((D, R) => D.text && /* @__PURE__ */ t(
+                        "div",
+                        {
+                          onClick: (G) => {
+                            G.stopPropagation(), a(D);
+                          },
+                          onMouseEnter: () => p(D.turn_ids ?? []),
+                          onMouseLeave: () => p([]),
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            padding: "8px 0",
+                            cursor: "pointer"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(ie, { size: 28, children: /* @__PURE__ */ e(
+                              We,
+                              {
+                                size: 17,
+                                color: v(D) ? "var(--rail-orange, #C98A5A)" : "var(--Grey-Muted, #808183)",
+                                strokeWidth: 1
+                              }
+                            ) }),
+                            /* @__PURE__ */ t("span", { style: {
+                              fontSize: 13,
+                              fontWeight: 400,
+                              color: "var(--Grey-Strong, #2E3236)",
+                              lineHeight: 1.2
+                            }, children: [
+                              "“",
+                              D.text,
+                              "”"
+                            ] })
+                          ]
+                        },
+                        R
+                      ))
+                    ]
+                  },
+                  F.key ?? E
+                );
+              }) })
+            ]
+          },
+          g
+        );
+      })
+    ] })
+  ] });
+}, S = {
+  strong: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  absent: "var(--Grey-absent, #D9D9D9)",
+  white: "var(--Grey-White, #FFF)",
+  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;
+    return {
+      x: 121.5 + 85 * Math.cos(f),
+      y: 123 - 85 * Math.sin(f)
+    };
+  }, 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}`;
+  }, 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(
+      "path",
+      {
+        d: s(C, w),
+        stroke: z ? S.strong : S.track,
+        strokeWidth: 30,
+        strokeLinecap: "butt",
+        fill: "none"
+      },
+      f
+    );
+  }) });
+}, je = ({ value: n = 0, maxValue: i = 5 }) => /* @__PURE__ */ e("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: i }, (o, a) => /* @__PURE__ */ e(
+  "div",
+  {
+    style: {
+      width: 22,
+      height: 6,
+      borderRadius: 1,
+      background: a < n ? S.strong : S.track
+    }
+  },
+  a
+)) }), Oe = ({ label: n, value: i = 0, maxValue: o = 5 }) => /* @__PURE__ */ t("div", { style: {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  padding: 8,
+  alignItems: "center"
+}, children: [
+  /* @__PURE__ */ t("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  }, children: [
+    /* @__PURE__ */ e("span", { style: {
+      fontSize: 12,
+      fontWeight: 400,
+      color: S.strong,
+      fontFamily: "var(--font-sans)",
+      lineHeight: "normal"
+    }, children: n }),
+    /* @__PURE__ */ e(we, { size: 14, color: S.infoIcon, strokeWidth: 1 })
+  ] }),
+  /* @__PURE__ */ e(je, { value: i, maxValue: o })
+] }), Ue = ({
+  score: n = 83,
+  maxScore: i = 100,
+  predictedScore: o = 4,
+  predictedLabel: a = "Predicted Objective",
+  description: p = "",
+  legends: h = [
+    { label: "CSAT", value: 3 },
+    { label: "Resolution", value: 4 },
+    { label: "Process Adherence", value: 5 },
+    { label: "Communication", value: 3 }
+  ]
+}) => {
+  const x = String(o).padStart(2, "0");
+  return /* @__PURE__ */ t("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    padding: 24,
+    borderRadius: 8,
+    border: `1px solid ${S.absent}`,
+    background: S.white,
+    alignSelf: "stretch",
+    gap: 24
+  }, children: [
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 8
+    }, children: [
+      /* @__PURE__ */ e("span", { style: {
+        fontSize: 15,
+        fontWeight: 600,
+        color: S.strong,
+        fontFamily: "var(--font-sans)",
+        lineHeight: 1.2
+      }, children: "Compass Score" }),
+      /* @__PURE__ */ e("span", { style: {
+        fontSize: 14,
+        fontWeight: 400,
+        color: S.muted,
+        fontFamily: "var(--font-sans)",
+        lineHeight: "normal"
+      }, children: p })
+    ] }),
+    /* @__PURE__ */ t("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 48,
+      flex: 1
+    }, children: [
+      /* @__PURE__ */ t("div", { style: {
+        display: "flex",
+        width: 243,
+        flexDirection: "column",
+        alignItems: "center",
+        flexShrink: 0
+      }, children: [
+        /* @__PURE__ */ e(Pe, { 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("div", { style: {
+          fontSize: 28,
+          fontWeight: 400,
+          color: S.strong,
+          fontFamily: "var(--font-sans)",
+          lineHeight: 1,
+          textAlign: "center",
+          marginTop: 8
+        }, children: n })
+      ] }),
+      /* @__PURE__ */ t("div", { style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1
+      }, children: [
+        /* @__PURE__ */ t("div", { style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center"
+        }, children: [
+          /* @__PURE__ */ e("div", { style: {
+            fontSize: 28,
+            fontWeight: 400,
+            color: S.strong,
+            fontFamily: "var(--font-sans)",
+            lineHeight: 1,
+            textAlign: "center"
+          }, children: x }),
+          /* @__PURE__ */ e("div", { style: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: S.muted,
+            fontFamily: "var(--font-sans)",
+            lineHeight: 1.43,
+            textAlign: "center"
+          }, children: a })
+        ] }),
+        /* @__PURE__ */ e("div", { style: {
+          width: "100%",
+          height: 1,
+          background: S.absent
+        } }),
+        h.map((y, u) => /* @__PURE__ */ e(
+          Oe,
+          {
+            label: y.label,
+            value: y.value
+          },
+          u
+        ))
+      ] })
+    ] })
+  ] });
+}, qe = [
+  { key: "overview", label: "Overview" },
+  { key: "coaching", label: "Coaching Summary" },
+  { key: "signals", label: "Signals & Guidance" },
+  { key: "comments", label: "Comments" }
+], Ze = ({
+  title: n = "Wheel Stud Replacement Enquiry",
+  onBack: i,
+  // Data props — all optional with defaults for demo
+  data: o,
+  coachingData: a,
+  audioUrl: p,
+  // Footer navigation
+  prevSessionTitle: h,
+  prevSessionDesc: x,
+  nextSessionTitle: y,
+  nextSessionDesc: u,
+  onPreviousSession: k,
+  onNextSession: b
+}) => {
+  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 = [
+    { 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;
+    });
+  }, 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, " "))) || [
+    "customer needs fully addressed",
+    "call flow expectations set",
+    "Opening expectations set",
+    "Active listening demonstrated",
+    "Resolution confirmed"
+  ], P = a || {
+    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: [
+      { text: "Anthony effectively scheduled the appointment and confirmed the details clearly.", quote: "Alright. That is all set up for Saturday, the twenty eighth, at 12:00." },
+      { text: "Handled customer objections well by explaining the need for a separate appointment for alignment.", quote: "I don't have the alignment changeover the weekend. So I would have to set up a separate appointment for the alignment." },
+      { text: "Demonstrated courtesy and professionalism throughout the call.", quote: "Have a great day." }
+    ],
+    improvements: [
+      { text: "Close the loop by restating the plan and confirming next steps to ensure customer certainty.", quote: "Alright. That is all set up for Saturday, the twenty eighth, at 12:00." },
+      { 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 : {
+    present_count: 9,
+    total_signals_evaluated: 146,
+    signals: [
+      {
+        key: "price_estimate_provided",
+        display_name: "Price Estimate Provided",
+        observations: [
+          {
+            key: "obs1",
+            reason: "Evidence shows a price estimate or quote was provided.",
+            evidence: [
+              { start_ms: 92e3, end_ms: 97e3, text: "From Casper, you're probably looking at, like, a half hour labor plus a stud, so you'd probably be somewhere around $90 or something.", turn_ids: [8] }
+            ]
+          }
+        ]
+      },
+      { key: "fee_or_cost_discussed", display_name: "Fee or Cost Discussed", observations: [{ key: "obs2", reason: "Agent discussed pricing details with the customer." }] },
+      { key: "engagement_budget", display_name: "Engagement Budget Discussed", observations: [{ key: "obs3a", reason: "Budget expectations were set." }, { key: "obs3b", reason: "Customer confirmed budget range." }] },
+      { key: "projected_revenue", display_name: "Projected Revenue Discussed", observations: [{ key: "obs4a", reason: "Revenue projection shared." }, { key: "obs4b", reason: "Timeline for revenue discussed." }, { key: "obs4c", reason: "Quarterly targets mentioned." }] },
+      { key: "market_analysis", display_name: "Market Analysis Completed", observations: [{ key: "obs5a", reason: "Market analysis referenced." }, { key: "obs5b", reason: "Competitive landscape discussed." }, { key: "obs5c", reason: "Market trends mentioned." }, { key: "obs5d", reason: "Regional analysis provided." }] },
+      { key: "target_audience", display_name: "Target Audience Defined", observations: [{ key: "obs6a", reason: "Target audience identified." }, { key: "obs6b", reason: "Demographics discussed." }, { key: "obs6c", reason: "Audience segmentation reviewed." }, { key: "obs6d", reason: "Persona mapping completed." }, { key: "obs6e", reason: "Channel preferences noted." }] },
+      { key: "concept_approval", display_name: "Concept Approval Received", observations: [{ key: "obs7a", reason: "Concept approved by stakeholder." }, { key: "obs7b", reason: "Feedback incorporated." }, { key: "obs7c", reason: "Sign-off confirmed." }, { key: "obs7d", reason: "Revisions requested." }, { key: "obs7e", reason: "Final version accepted." }, { key: "obs7f", reason: "Timeline approved." }] },
+      { 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";
+  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(
+        "button",
+        {
+          onClick: i,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: 0,
+            flexShrink: 0
+          },
+          children: /* @__PURE__ */ e(V, { 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: qe.map((d) => /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => s(d.key),
+        style: {
+          display: "flex",
+          padding: 16,
+          alignItems: "center",
+          gap: 10,
+          background: "none",
+          border: "none",
+          borderBottom: v === d.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)",
+          whiteSpace: "nowrap",
+          transition: "border-color 0.2s ease, color 0.2s ease"
+        },
+        children: d.label
+      },
+      d.key
+    )) }),
+    /* @__PURE__ */ t("div", { style: { padding: 24, flex: 1, overflowY: "auto" }, children: [
+      v === "overview" && /* @__PURE__ */ t("div", { style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end",
+        alignItems: "flex-start",
+        gap: 24,
+        alignSelf: "stretch"
+      }, children: [
+        /* @__PURE__ */ t("div", { style: {
+          display: "flex",
+          height: 40,
+          alignItems: "center",
+          gap: 16,
+          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("span", { style: {
+              fontSize: 16,
+              fontWeight: 600,
+              color: "var(--Grey-Strong, #2E3236)",
+              lineHeight: 1.2,
+              textTransform: "uppercase"
+            }, children: "Overview" })
+          ] }),
+          /* @__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__ */ 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__ */ t("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 16,
+              paddingLeft: 16,
+              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(_e, { 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),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      padding: "8px 0",
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer"
+                    },
+                    children: [
+                      /* @__PURE__ */ e(Y, { 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,
+                        " 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 })
+                    ]
+                  }
+                ),
+                f && /* @__PURE__ */ t("div", { style: {
+                  position: "absolute",
+                  top: "100%",
+                  right: 0,
+                  marginTop: 4,
+                  width: 264,
+                  background: "var(--Grey-White, #FFF)",
+                  borderRadius: 4,
+                  border: "1px solid var(--Grey-absent, #D9D9D9)",
+                  boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+                  zIndex: 50,
+                  overflow: "hidden"
+                }, children: [
+                  /* @__PURE__ */ t("div", { style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: 8,
+                    padding: 16
+                  }, children: [
+                    /* @__PURE__ */ e(Y, { 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 }),
+                      /* @__PURE__ */ t("span", { style: {
+                        fontSize: 13,
+                        fontWeight: 400,
+                        color: "var(--Grey-Muted, #808183)",
+                        lineHeight: 1
+                      }, children: [
+                        U,
+                        " Sessions in past"
+                      ] })
+                    ] })
+                  ] }),
+                  F.map((d, W) => /* @__PURE__ */ t(
+                    "div",
+                    {
+                      onMouseEnter: () => z(W),
+                      onMouseLeave: () => z(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)",
+                        borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
+                        cursor: "pointer",
+                        boxSizing: "border-box",
+                        transition: "background 0.15s"
+                      },
+                      children: [
+                        /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+                          /* @__PURE__ */ e("span", { style: {
+                            fontSize: 13,
+                            fontWeight: 400,
+                            color: "var(--Grey-Strong, #2E3236)",
+                            lineHeight: 1
+                          }, children: d.title }),
+                          /* @__PURE__ */ e("span", { style: {
+                            fontSize: 12,
+                            fontWeight: 400,
+                            color: "var(--Grey-Muted, #808183)",
+                            lineHeight: 1
+                          }, children: d.date })
+                        ] }),
+                        w === W && /* @__PURE__ */ e(le, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1, style: { flexShrink: 0 } })
+                      ]
+                    },
+                    W
+                  )),
+                  /* @__PURE__ */ e("div", { style: {
+                    padding: 16,
+                    borderTop: "1px solid var(--Grey-absent, #D9D9D9)",
+                    display: "flex",
+                    justifyContent: "center"
+                  }, children: /* @__PURE__ */ t("button", { style: {
+                    display: "flex",
+                    height: 32,
+                    padding: "16px 16px 16px 12px",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    gap: 6,
+                    background: "var(--Grey-White, #FFF)",
+                    border: "1px solid var(--Grey-absent, #D9D9D9)",
+                    borderRadius: 10,
+                    cursor: "pointer"
+                  }, children: [
+                    /* @__PURE__ */ e(Ae, { size: 16, color: "var(--Grey-Muted, #808183)", strokeWidth: 1.5 }),
+                    /* @__PURE__ */ e("span", { style: {
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "var(--Grey-Strong, #2E3236)"
+                    }, children: "View All Sessions" })
+                  ] }) })
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 24,
+          alignSelf: "stretch"
+        }, children: [
+          /* @__PURE__ */ e("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(Ue, {}) }),
+          /* @__PURE__ */ t("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            justifyContent: "flex-end",
+            gap: 24,
+            flex: 1,
+            minWidth: 0
+          }, children: [
+            /* @__PURE__ */ e(
+              Be,
+              {
+                meta: L,
+                callPurpose: $,
+                classification: ge,
+                outcomeQuality: "Neutral"
+              }
+            ),
+            /* @__PURE__ */ e(
+              $e,
+              {
+                outcomeLift: fe,
+                driverLabels: he
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e(X, { data: P }),
+        /* @__PURE__ */ t("div", { style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          alignSelf: "stretch"
+        }, 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
+              }
+            ) })
+          ] })
+        ] })
+      ] }),
+      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__ */ t("div", { style: {
+      display: "flex",
+      position: "sticky",
+      bottom: 0,
+      zIndex: 10
+    }, children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: k,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 30,
+            padding: "12px 28px",
+            flex: 1,
+            background: "var(--Grey-White, #FFF)",
+            border: "1px solid var(--Grey-absent, #D9D9D9)",
+            cursor: "pointer"
+          },
+          children: [
+            /* @__PURE__ */ e(V, { 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,
+                fontWeight: 400,
+                color: "#000",
+                lineHeight: 1.2,
+                textAlign: "left"
+              }, children: h || "Previous Session Title" }),
+              /* @__PURE__ */ e("span", { style: {
+                fontSize: 13,
+                fontWeight: 400,
+                color: "#000",
+                lineHeight: 1.2,
+                opacity: 0.5,
+                textAlign: "left"
+              }, children: x || "Short description of the session" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: b,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            gap: 30,
+            padding: "12px 28px",
+            flex: 1,
+            background: "var(--Grey-White, #FFF)",
+            border: "1px solid var(--Grey-absent, #D9D9D9)",
+            cursor: "pointer"
+          },
+          children: [
+            /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+              /* @__PURE__ */ e("span", { style: {
+                fontSize: 14,
+                fontWeight: 400,
+                color: "#000",
+                lineHeight: 1.2,
+                textAlign: "left"
+              }, children: y || "Next Session Title" }),
+              /* @__PURE__ */ e("span", { style: {
+                fontSize: 13,
+                fontWeight: 400,
+                color: "#000",
+                lineHeight: 1.2,
+                opacity: 0.5,
+                textAlign: "left"
+              }, children: u || "Short description of the session" })
+            ] }),
+            /* @__PURE__ */ e(Ge, { size: 24, color: "var(--Grey-Muted, #808183)", strokeWidth: 2 })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 export {
-  e as UpdatedCoachingSynthesisCard,
-  d as UpdatedCompassScore,
-  n as UpdatedInteractionContext,
-  o as UpdatedInteractionDetails,
-  i as UpdatedInteractionRecording,
-  s as UpdatedInteractionScores,
-  r as UpdatedInteractionSignals
+  X as UpdatedCoachingSynthesisCard,
+  Ue as UpdatedCompassScore,
+  Be as UpdatedInteractionContext,
+  Ze as UpdatedInteractionDetails,
+  Q as UpdatedInteractionRecording,
+  $e as UpdatedInteractionScores,
+  oe as UpdatedInteractionSignals
 };
 //# sourceMappingURL=UpdatedInteractionDetails.es.js.map