chordia-ui 0.1.0

package/dist/pages/interactionDetails.es.js

@@ -0,0 +1,2126 @@
+import { S as ze, D as K, T as He, C as Pe, f as Le, j as Fe, o as Oe } from "../Timeline.es.js";
+import { a as kt, M as zt, O as wt, d as Ct, e as Tt, g as _t, h as It, i as Dt } from "../Timeline.es.js";
+import { jsx as e, jsxs as n, Fragment as we } from "react/jsx-runtime";
+import Ie, { useMemo as me, useState as k, useRef as pe, useEffect as ve } from "react";
+import { UserCheck as Ae, User as $e, Play as je, ScrollText as Ke, TrendingUp as De, Lightbulb as Se, Building as Me, MessageSquareQuote as Ne, ChevronDown as be, MessageSquare as Ge, Zap as ke, Scale as Ve, FileText as qe, Target as Be, CheckCircle as Re, CornerDownRight as Ue, Clock as Ye, Send as Ze, ChevronRight as Je } from "lucide-react";
+function Qe(t) {
+  return `${Math.floor(t / 6e4)}:${String(Math.floor(t % 6e4 / 1e3)).padStart(2, "0")}`;
+}
+function Ee({ ev: t, onPlay: a, onHighlight: c }) {
+  var r;
+  const l = t.actor === "agent" ? /* @__PURE__ */ e(Ae, { size: 11 }) : /* @__PURE__ */ e($e, { size: 11 });
+  return /* @__PURE__ */ n("div", { style: {
+    fontSize: "var(--text-sm)",
+    padding: "6px 10px",
+    borderRadius: "var(--radius-sm)",
+    background: "var(--paper-elevated)",
+    border: "1px solid var(--border)",
+    marginTop: 4
+  }, children: [
+    /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 5, marginBottom: 3 }, children: [
+      /* @__PURE__ */ e("span", { style: { color: "var(--text-muted)" }, children: l }),
+      t.source && /* @__PURE__ */ e("span", { style: { color: "var(--text-muted)", fontWeight: 500 }, children: t.source }),
+      /* @__PURE__ */ n("span", { style: { marginLeft: "auto", display: "flex", gap: 4, alignItems: "center" }, children: [
+        t.start_ms != null && /* @__PURE__ */ e(ze, { variant: "ghost", size: "sm", onClick: () => a(t.start_ms, t.end_ms), title: "Play audio", children: /* @__PURE__ */ e(je, { size: 10 }) }),
+        ((r = t.turn_ids) == null ? void 0 : r.length) > 0 && /* @__PURE__ */ e(ze, { variant: "ghost", size: "sm", onClick: () => c(t.turn_ids), title: "Show in transcript", children: /* @__PURE__ */ e(Ke, { size: 10 }) }),
+        t.start_ms != null && /* @__PURE__ */ e("span", { style: { fontSize: "var(--text-xs)", color: "var(--text-faint)" }, children: Qe(t.start_ms) })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { style: { color: "var(--text-base)", fontStyle: "italic", lineHeight: 1.4 }, children: [
+      '"',
+      (t.text || "").slice(0, 200),
+      '"'
+    ] })
+  ] });
+}
+function Xe({ outcomeLift: t }) {
+  var m, y;
+  if (t.lift == null) return null;
+  const a = t.p_expected, c = t.p_full, l = t.lift_raw ?? (c != null && a != null ? c - a : null), r = t.lift, p = (g) => g != null ? Math.round(g * 100) + "%" : "—", s = (g) => {
+    if (g == null) return "—";
+    const u = (g * 100).toFixed(1);
+    return g > 0 ? `+${u}pp` : `${u}pp`;
+  }, d = (g) => g > 0 ? "var(--state-present)" : g < 0 ? "#f87171" : "var(--text-muted)";
+  return /* @__PURE__ */ n(K, { title: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+    /* @__PURE__ */ e(De, { size: 12 }),
+    " Agent Lift Analysis"
+  ] }), children: [
+    /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }, children: [
+      /* @__PURE__ */ n("div", { style: { textAlign: "center", flex: 1 }, children: [
+        /* @__PURE__ */ e("div", { style: { fontSize: 20, fontWeight: 600, color: "var(--text-faint)" }, children: p(a) }),
+        /* @__PURE__ */ e("div", { style: { fontSize: 10, color: "var(--text-faint)", marginTop: 2 }, children: "Expected Outcome" }),
+        /* @__PURE__ */ e("div", { style: { fontSize: 9, color: "var(--text-faint)", marginTop: 1 }, children: "Based on call type & difficulty" })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { fontSize: 16, color: "var(--text-faint)", fontWeight: 300 }, children: "+" }),
+      /* @__PURE__ */ n("div", { style: { textAlign: "center", flex: 1 }, children: [
+        /* @__PURE__ */ e("div", { style: { fontSize: 20, fontWeight: 700, color: d(l) }, children: s(l) }),
+        /* @__PURE__ */ e("div", { style: { fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: "Agent Impact" }),
+        /* @__PURE__ */ e("div", { style: { fontSize: 9, color: "var(--text-faint)", marginTop: 1 }, children: "Behavior-driven change" })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { fontSize: 16, color: "var(--text-faint)", fontWeight: 300 }, children: "=" }),
+      /* @__PURE__ */ n("div", { style: { textAlign: "center", flex: 1 }, children: [
+        /* @__PURE__ */ e("div", { style: { fontSize: 20, fontWeight: 600, color: "var(--text-ink)" }, children: p(c) }),
+        /* @__PURE__ */ e("div", { style: { fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: "Predicted Outcome" }),
+        /* @__PURE__ */ e("div", { style: { fontSize: 9, color: "var(--text-faint)", marginTop: 1 }, children: "With agent behaviors" })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      padding: "8px 12px",
+      borderRadius: 6,
+      background: "var(--surface-raised, #f5f5f5)",
+      marginBottom: 12
+    }, children: [
+      /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-muted)" }, children: "vs. Average Agent:" }),
+      /* @__PURE__ */ n("span", { style: {
+        fontSize: 14,
+        fontWeight: 700,
+        color: d(r),
+        display: "flex",
+        alignItems: "center",
+        gap: 4
+      }, children: [
+        s(r),
+        /* @__PURE__ */ e("svg", { width: "10", height: "7", children: r > 0 ? /* @__PURE__ */ e("path", { d: "M5 0 L9 6 L1 6 Z", fill: "var(--state-present)" }) : r < 0 ? /* @__PURE__ */ e("path", { d: "M5 6 L9 0 L1 0 Z", fill: "#f87171" }) : /* @__PURE__ */ e("rect", { x: "1", y: "2.5", width: "8", height: "1", fill: "var(--text-muted)" }) })
+      ] }),
+      ((m = t.interpretation) == null ? void 0 : m.lift_band) && /* @__PURE__ */ e("span", { style: {
+        fontSize: 9,
+        fontWeight: 600,
+        color: d(r),
+        textTransform: "capitalize"
+      }, children: t.interpretation.lift_band.replace(/_/g, " ") })
+    ] }),
+    ((y = t.driver_signal_keys) == null ? void 0 : y.length) > 0 && /* @__PURE__ */ n("div", { children: [
+      /* @__PURE__ */ e("div", { style: { fontSize: 9, fontWeight: 600, color: "var(--text-muted)", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.04em" }, children: "Key Drivers" }),
+      /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: t.driver_signal_keys.map((g, u) => /* @__PURE__ */ e(He, { variant: "default", size: "xs", children: g.replace(/^sig\./, "").replace(/_/g, " ") }, u)) })
+    ] })
+  ] });
+}
+const Ce = "coaching-synthesis-keyframes";
+function et() {
+  if (typeof document > "u" || document.getElementById(Ce)) return;
+  const t = document.createElement("style");
+  t.id = Ce, t.textContent = `
+    @keyframes coaching-shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+    @keyframes coaching-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+  `, document.head.appendChild(t);
+}
+function tt({ data: t, loading: a, error: c }) {
+  var m, y;
+  if (Ie.useEffect(() => {
+    et();
+  }, []), a)
+    return /* @__PURE__ */ n("div", { style: {
+      padding: "20px 0",
+      display: "flex",
+      flexDirection: "column",
+      gap: 12
+    }, children: [
+      /* @__PURE__ */ n("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8
+      }, children: [
+        /* @__PURE__ */ e("div", { style: {
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          background: "var(--rail-tone)",
+          animation: "coaching-pulse 1.5s ease-in-out infinite"
+        } }),
+        /* @__PURE__ */ e("span", { style: {
+          fontSize: "var(--text-base)",
+          color: "var(--rail-tone)",
+          fontFamily: "var(--font-sans)",
+          fontWeight: 500
+        }, children: "Compass is synthesizing coaching insights…" })
+      ] }),
+      [180, 260, 220].map((g, u) => /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            height: 10,
+            width: g,
+            maxWidth: "100%",
+            borderRadius: 4,
+            background: "linear-gradient(90deg, var(--hover-warm-subtle) 25%, var(--hover-warm) 50%, var(--hover-warm-subtle) 75%)",
+            backgroundSize: "200% 100%",
+            animation: "coaching-shimmer 1.8s ease-in-out infinite",
+            animationDelay: `${u * 0.2}s`
+          }
+        },
+        u
+      ))
+    ] });
+  if (c)
+    return /* @__PURE__ */ e("div", { style: {
+      padding: "16px 0",
+      fontSize: "var(--text-base)",
+      color: "var(--text-faint)",
+      fontFamily: "var(--font-sans)"
+    }, children: "Unable to generate coaching summary." });
+  if (!t) return null;
+  const l = t.strengths || [], r = t.improvements || [], p = t.organizational || t.organizational_insights || [], s = typeof t.one_liner == "string" ? t.one_liner : ((m = t.one_liner) == null ? void 0 : m.text) || "", d = typeof t.context == "string" ? t.context : ((y = t.context) == null ? void 0 : y.text) || "";
+  return /* @__PURE__ */ n("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 14,
+    fontFamily: "var(--font-sans)"
+  }, children: [
+    s && /* @__PURE__ */ e("div", { style: {
+      fontSize: "var(--text-lg)",
+      fontWeight: 600,
+      color: "var(--text-strong)",
+      lineHeight: 1.4
+    }, children: s }),
+    d && /* @__PURE__ */ e("div", { style: {
+      fontSize: "var(--text-base)",
+      color: "var(--text-muted)",
+      lineHeight: 1.45
+    }, children: d }),
+    l.length > 0 && /* @__PURE__ */ e(
+      ye,
+      {
+        icon: /* @__PURE__ */ e(De, { size: 13 }),
+        label: "Strengths",
+        color: "var(--rail-discovery)",
+        items: l
+      }
+    ),
+    r.length > 0 && /* @__PURE__ */ e(
+      ye,
+      {
+        icon: /* @__PURE__ */ e(Se, { size: 13 }),
+        label: "Improvements",
+        color: "var(--rail-compliance)",
+        items: r
+      }
+    ),
+    p.length > 0 && /* @__PURE__ */ e(
+      ye,
+      {
+        icon: /* @__PURE__ */ e(Me, { size: 13 }),
+        label: "Organizational",
+        color: "var(--rail-outcome)",
+        items: p
+      }
+    ),
+    t.overall && /* @__PURE__ */ n("div", { style: {
+      fontSize: "var(--text-base)",
+      color: "var(--text-faint)",
+      fontStyle: "italic",
+      marginTop: 2
+    }, children: [
+      "Overall: ",
+      t.overall.replace(/_/g, " ")
+    ] })
+  ] });
+}
+function ye({ icon: t, label: a, color: c, items: l }) {
+  return /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ n("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 5,
+      marginBottom: 6,
+      color: c,
+      fontSize: "var(--text-base)",
+      fontWeight: 650,
+      letterSpacing: "0.04em"
+    }, children: [
+      t,
+      a
+    ] }),
+    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: l.map((r, p) => {
+      const s = typeof r == "string" ? r : (r == null ? void 0 : r.text) || "", d = typeof r == "object" ? r == null ? void 0 : r.quote : null;
+      return /* @__PURE__ */ n("div", { style: { paddingLeft: 14 }, children: [
+        /* @__PURE__ */ n("div", { style: {
+          fontSize: "var(--text-base)",
+          color: "var(--text-base)",
+          lineHeight: 1.4
+        }, children: [
+          "• ",
+          s
+        ] }),
+        d && /* @__PURE__ */ n("div", { style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 4,
+          marginTop: 3,
+          paddingLeft: 8
+        }, children: [
+          /* @__PURE__ */ e(
+            Ne,
+            {
+              size: 10,
+              style: {
+                color: "var(--text-faint)",
+                flexShrink: 0,
+                marginTop: 2
+              }
+            }
+          ),
+          /* @__PURE__ */ n("span", { style: {
+            fontSize: "var(--text-base)",
+            color: "var(--text-muted)",
+            fontStyle: "italic",
+            lineHeight: 1.35
+          }, children: [
+            '"',
+            d,
+            '"'
+          ] })
+        ] })
+      ] }, p);
+    }) })
+  ] });
+}
+function nt(t) {
+  const a = Math.floor(t / 60), c = Math.round(t % 60);
+  return `${a}:${c.toString().padStart(2, "0")}`;
+}
+function rt({ title: t, meta: a, callPurpose: c, classification: l, dimensions: r }) {
+  const p = c || {}, s = l || {};
+  return /* @__PURE__ */ n(Pe, { variant: "elevated", padding: "sm", children: [
+    /* @__PURE__ */ e("div", { style: { fontSize: "var(--text-md)", fontWeight: 550, color: "var(--text-strong)", lineHeight: 1.375, marginBottom: 6 }, children: t }),
+    /* @__PURE__ */ n("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "4px 12px", fontSize: 11, color: "var(--text-muted)" }, children: [
+      a.evaluated_dt && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: "Date" }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: new Date(a.evaluated_dt).toLocaleString() })
+      ] }),
+      a.duration_seconds != null && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: "Duration" }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: nt(a.duration_seconds) })
+      ] }),
+      a.message_count && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: "Messages" }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: a.message_count })
+      ] }),
+      p.interaction_direction && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: "Direction" }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: p.interaction_direction })
+      ] }),
+      p.interaction_driver && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: "Driver" }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: p.interaction_driver })
+      ] }),
+      p.customer_intent && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: "Intent" }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: p.customer_intent })
+      ] }),
+      s.interaction_paradigm && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: "Paradigm" }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: s.interaction_paradigm })
+      ] }),
+      r.map((d, m) => /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-faint)" }, children: d.label || d.key }),
+        /* @__PURE__ */ e("div", { style: { color: "var(--text-base)" }, children: d.value })
+      ] }, m))
+    ] }),
+    a.session_id && /* @__PURE__ */ e("div", { style: { fontSize: 9, color: "var(--text-faint)", fontFamily: "var(--font-mono)", marginTop: 4, userSelect: "all" }, children: a.session_id })
+  ] });
+}
+function it({ scores: t }) {
+  return t != null && t.length ? /* @__PURE__ */ e(K, { title: "Scores", children: /* @__PURE__ */ e("div", { style: { display: "flex", gap: 24, flexWrap: "wrap" }, children: t.map((a, c) => {
+    const l = a.value != null ? Math.round(a.value) : null;
+    return /* @__PURE__ */ n("div", { style: { textAlign: "center", minWidth: 48 }, children: [
+      /* @__PURE__ */ e("div", { style: { fontSize: 20, fontWeight: 700, color: "var(--text-ink)" }, children: l ?? "—" }),
+      /* @__PURE__ */ e("div", { style: { fontSize: "var(--text-sm)", color: "var(--text-muted)", marginTop: 2 }, children: a.label || a.key })
+    ] }, c);
+  }) }) }) : null;
+}
+const Te = {
+  outcome: { label: "Outcome", icon: /* @__PURE__ */ e(Be, { size: 12 }), color: "var(--rail-outcome)" },
+  process: { label: "Process & Protocol", icon: /* @__PURE__ */ e(qe, { size: 12 }), color: "var(--rail-discovery)" },
+  compliance: { label: "Compliance", icon: /* @__PURE__ */ e(Ve, { size: 12 }), color: "var(--rail-compliance)" },
+  customer_friction: { label: "Customer Friction", icon: /* @__PURE__ */ e(ke, { size: 12 }), color: "var(--rail-coral)" },
+  experience: { label: "Experience", icon: /* @__PURE__ */ e(Ge, { size: 12 }), color: "var(--rail-teal)" }
+}, ot = {
+  risk: { icon: /* @__PURE__ */ e(ke, { size: 10 }), color: "var(--rail-signal-churn)" },
+  opportunity: { icon: /* @__PURE__ */ e(Se, { size: 10 }), color: "var(--state-unknown)" },
+  excellence: { icon: /* @__PURE__ */ e(Re, { size: 10 }), color: "var(--rail-teal)" }
+};
+function at({ signals: t, expandedSignals: a, toggleSignal: c, playAudio: l, highlightTurns: r }) {
+  var s;
+  if (!((s = t == null ? void 0 : t.signals) != null && s.length)) return null;
+  const p = me(() => {
+    const d = {};
+    for (const m of t.signals) {
+      const y = m.group || "experience";
+      d[y] || (d[y] = []), d[y].push(m);
+    }
+    return d;
+  }, [t]);
+  return /* @__PURE__ */ e(K, { title: `Signals (${t.present_count} present / ${t.total_signals_evaluated} evaluated)`, children: Object.entries(p).map(([d, m]) => {
+    const y = Te[d] || Te.experience;
+    return /* @__PURE__ */ n("div", { style: { marginBottom: 10 }, children: [
+      /* @__PURE__ */ n(Le, { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+        y.icon,
+        /* @__PURE__ */ e("span", { children: y.label })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { marginTop: 4, display: "flex", flexDirection: "column", gap: 6 }, children: m.map((g, u) => {
+        var w, T, _;
+        const z = g.display_name || g.key || "", C = (w = g.baseline) == null ? void 0 : w.delta, S = ((T = g.observations) == null ? void 0 : T.length) > 0, b = a.has(g.key);
+        return /* @__PURE__ */ n(
+          "div",
+          {
+            id: `signal-${g.key}`,
+            style: {
+              border: "1px solid var(--border)",
+              borderRadius: "var(--radius-md)",
+              background: "var(--paper)",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: (B) => {
+                    S && (c(g.key), B.currentTarget.blur());
+                  },
+                  style: {
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "6px 10px",
+                    background: "transparent",
+                    border: "none",
+                    cursor: S ? "pointer" : "default"
+                  },
+                  title: [
+                    g.confidence != null ? `Confidence: ${Math.round(g.confidence * 100)}%` : "",
+                    C != null ? `Δ baseline: ${C > 0 ? "+" : ""}${(C * 100).toFixed(1)}%` : ""
+                  ].filter(Boolean).join(" · "),
+                  children: [
+                    /* @__PURE__ */ n(
+                      "span",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 6,
+                          whiteSpace: "nowrap"
+                        },
+                        children: [
+                          (_ = ot[g.kind]) == null ? void 0 : _.icon,
+                          /* @__PURE__ */ e("span", { children: z }),
+                          S && /* @__PURE__ */ n(
+                            "span",
+                            {
+                              style: {
+                                marginLeft: 4,
+                                fontSize: 10,
+                                opacity: 0.6
+                              },
+                              children: [
+                                "(",
+                                g.observations.length,
+                                ")"
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    S && /* @__PURE__ */ e(
+                      be,
+                      {
+                        size: 14,
+                        style: {
+                          color: "var(--text-muted)",
+                          flexShrink: 0,
+                          transform: b ? "rotate(180deg)" : "rotate(0deg)",
+                          transition: "transform 0.16s ease"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              b && g.observations && /* @__PURE__ */ e("div", { style: { width: "100%", margin: "0 0 6px" }, children: g.observations.map((B, P) => {
+                var F;
+                return /* @__PURE__ */ n("div", { style: {
+                  fontSize: "var(--text-sm)",
+                  color: "var(--text-muted)",
+                  padding: "8px 12px",
+                  background: "var(--paper)",
+                  borderLeft: `3px solid ${y.color}`,
+                  marginBottom: 6,
+                  borderRadius: "0 var(--radius-sm) var(--radius-sm) 0"
+                }, children: [
+                  /* @__PURE__ */ e("div", { style: { fontWeight: 600, color: "var(--text-base)", marginBottom: 3, fontSize: "var(--text-base)" }, children: B.key || "" }),
+                  /* @__PURE__ */ e("div", { style: { marginBottom: 6, lineHeight: 1.4 }, children: B.reason || B.explanation || "" }),
+                  (F = B.evidence) == null ? void 0 : F.map((W, M) => /* @__PURE__ */ e(Ee, { ev: W, onPlay: l, onHighlight: r }, M))
+                ] }, P);
+              }) })
+            ]
+          },
+          u
+        );
+      }) })
+    ] }, d);
+  }) });
+}
+const _e = {
+  risk: { icon: /* @__PURE__ */ e(ke, { size: 10 }), color: "var(--rail-signal-churn)" },
+  opportunity: { icon: /* @__PURE__ */ e(Se, { size: 10 }), color: "var(--state-unknown)" },
+  excellence: { icon: /* @__PURE__ */ e(Re, { size: 10 }), color: "var(--rail-teal)" }
+};
+function lt({ guidance: t, playAudio: a, highlightTurns: c }) {
+  var l;
+  return (l = t == null ? void 0 : t.items) != null && l.length ? /* @__PURE__ */ e(K, { title: `Guidance (${t.total_items} items)`, children: /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: t.items.map((r, p) => {
+    var m;
+    const s = _e[r.guidance_kind] || _e.excellence, d = r.owner === "organization" ? { bg: "color-mix(in srgb, var(--rail-discovery) 15%, transparent)", color: "var(--rail-discovery)", text: "ORG" } : r.owner === "shared" ? { bg: "color-mix(in srgb, var(--state-unknown) 15%, transparent)", color: "var(--state-unknown)", text: "SHARED" } : { bg: "color-mix(in srgb, var(--rail-teal) 10%, transparent)", color: "var(--rail-teal)", text: "AGENT" };
+    return /* @__PURE__ */ n("div", { style: {
+      padding: "10px 12px",
+      borderRadius: "var(--radius)",
+      background: "var(--paper)",
+      borderLeft: `3px solid ${s.color}`
+    }, children: [
+      /* @__PURE__ */ n("div", { style: { fontSize: "var(--text-base)", color: "var(--text-strong)", display: "flex", alignItems: "center", gap: 5, fontWeight: 550 }, children: [
+        s.icon,
+        " ",
+        r.title || "",
+        /* @__PURE__ */ e("span", { style: {
+          fontSize: 9,
+          padding: "1px 6px",
+          borderRadius: 8,
+          marginLeft: 4,
+          background: d.bg,
+          color: d.color,
+          fontWeight: 600
+        }, children: d.text })
+      ] }),
+      r.detail && /* @__PURE__ */ e("div", { style: { fontSize: "var(--text-sm)", color: "var(--text-muted)", marginTop: 4, lineHeight: 1.4 }, children: r.detail }),
+      (m = r.signal_refs) == null ? void 0 : m.map((y, g) => {
+        var u;
+        return /* @__PURE__ */ n("div", { style: { marginTop: 6 }, children: [
+          /* @__PURE__ */ n("div", { style: { fontSize: 10, color: "var(--text-muted)", fontWeight: 600, marginBottom: 3, display: "flex", alignItems: "center", gap: 3 }, children: [
+            /* @__PURE__ */ e(Ue, { size: 10 }),
+            " ",
+            y.display_name || y.signal_key,
+            y.confidence != null && /* @__PURE__ */ n("span", { style: { fontWeight: 400, opacity: 0.7 }, children: [
+              " (",
+              Math.round(y.confidence * 100),
+              "%)"
+            ] })
+          ] }),
+          (u = y.evidence) == null ? void 0 : u.map((z, C) => /* @__PURE__ */ e(Ee, { ev: z, onPlay: a, onHighlight: c }, C))
+        ] }, g);
+      })
+    ] }, p);
+  }) }) }) : null;
+}
+function st({ nba: t }) {
+  const a = (t == null ? void 0 : t.recommendations) || (t == null ? void 0 : t.actions) || [];
+  return a.length ? /* @__PURE__ */ e(K, { title: "Next Best Actions", children: /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: a.slice(0, 8).map((c, l) => /* @__PURE__ */ n("div", { style: { fontSize: 11, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 4 }, children: [
+    /* @__PURE__ */ e(Be, { size: 12 }),
+    " ",
+    /* @__PURE__ */ e("strong", { style: { color: "var(--text-base)" }, children: c.action || c.title || "" }),
+    c.rationale && ` — ${c.rationale}`
+  ] }, l)) }) }) : null;
+}
+function ct({
+  audioUrl: t,
+  timelineSegments: a,
+  durationSeconds: c,
+  currentTimeSeconds: l,
+  timelinePlaying: r,
+  playbackRate: p,
+  onSeek: s,
+  onTogglePlay: d,
+  onSeekBack: m,
+  onSeekForward: y,
+  onSetPlaybackRate: g,
+  audioRef: u
+}) {
+  return t ? /* @__PURE__ */ n(K, { title: "Recording", children: [
+    /* @__PURE__ */ e(
+      Fe,
+      {
+        segments: a,
+        durationSeconds: c || 0,
+        currentTimeSeconds: l,
+        onSeek: s,
+        showControls: !0,
+        hasRecording: !0,
+        timelinePlaying: r,
+        playbackRate: p,
+        onTogglePlay: d,
+        onSeekBack: m,
+        onSeekForward: y,
+        onSetPlaybackRate: g
+      }
+    ),
+    /* @__PURE__ */ e("audio", { ref: u, preload: "none", style: { display: "none" }, children: /* @__PURE__ */ e("source", { src: t, type: "audio/mpeg" }) })
+  ] }) : null;
+}
+function dt({
+  transcript: t,
+  audioUrl: a,
+  highlightedTurns: c,
+  activeTurnIndex: l,
+  timelinePlaying: r,
+  turnObservations: p,
+  setExpandedSignals: s,
+  onTurnPlayPause: d
+}) {
+  var g;
+  if (!((g = t == null ? void 0 : t.messages) != null && g.length)) return null;
+  const m = (u, z) => {
+    if (u == null) return;
+    const C = (w) => {
+      const T = Math.floor(w / 6e4), _ = Math.floor(w % 6e4 / 1e3);
+      return `${T.toString().padStart(2, "0")}:${_.toString().padStart(2, "0")}`;
+    }, S = C(u), b = z != null ? C(z) : S;
+    return `${S}–${b}`;
+  }, y = t.messages.map((u, z) => {
+    var C, S;
+    return {
+      actor: u.actor === "agent" ? ((C = t.actor_map) == null ? void 0 : C.agent) || "Agent" : ((S = t.actor_map) == null ? void 0 : S.customer) || "Customer",
+      actorType: u.actor === "agent" ? "agent" : "customer",
+      text: u.text || "",
+      timeRange: m(u.start ?? u.start_ms, u.end ?? u.end_ms),
+      isHighlighted: c.has(z),
+      highlightColor: r && l === z ? u.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
+      observations: (p[z] || []).map((b) => ({
+        ...b,
+        onClick: () => {
+          s((w) => /* @__PURE__ */ new Set([...w, b.signalKey])), setTimeout(() => {
+            const w = document.getElementById(`signal-${b.signalKey}`);
+            w && w.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          }, 100);
+        }
+      }))
+    };
+  });
+  return /* @__PURE__ */ e("div", { id: "transcript-container", children: /* @__PURE__ */ e(
+    Oe,
+    {
+      turns: y,
+      audioUrl: a,
+      activeTurnIndex: l,
+      autoScrollActiveTurn: r,
+      isExternalPlaying: r,
+      onTurnPlayPause: d
+    }
+  ) });
+}
+const xe = {
+  padding: 0,
+  border: "none",
+  background: "transparent",
+  fontSize: "12px",
+  fontWeight: 500,
+  color: "rgba(30, 33, 37, 0.65)",
+  cursor: "pointer",
+  fontFamily: "inherit"
+};
+function pt({
+  sessionTitle: t,
+  sessionSubtitle: a,
+  threadLabel: c,
+  messages: l = [],
+  onSendMessage: r,
+  onReplyMessage: p,
+  onEditMessage: s,
+  onDeleteMessage: d,
+  onCreateNewThread: m,
+  // optional: host can handle new thread creation
+  currentUser: y,
+  isLoading: g = !1
+}) {
+  const [u, z] = k(""), [C, S] = k(!1), [b, w] = k(l), [T, _] = k(!1), [B, P] = k(null), [F, W] = k(null), [M, I] = k(""), [q, N] = k(null), [ge, O] = k(""), [U, G] = k(null), [ue, V] = k(!1), [A, Y] = k(""), [L, te] = k(!1), Z = pe(null), J = pe(null), Q = y || {
+    name: "You",
+    initials: "YO",
+    color: "#6B7C93"
+  }, ne = c || t || a, he = F ? b.find((i) => i.id === F) : null;
+  ve(() => {
+    w(l);
+  }, [l]), ve(() => {
+    Z.current && (!b || b.length === 0 || Z.current.scrollIntoView({ behavior: "smooth" }));
+  }, [b]);
+  const X = async () => {
+    const i = A.trim();
+    if (i) {
+      te(!0);
+      try {
+        await (m == null ? void 0 : m(i)), Y(""), V(!1);
+      } finally {
+        te(!1);
+      }
+    }
+  }, re = () => {
+    V(!1), Y("");
+  }, ee = async () => {
+    const i = u.trim();
+    if (!i) return;
+    const h = i;
+    z("");
+    const $ = `temp-${Date.now()}`, de = {
+      id: $,
+      author: Q,
+      content: h,
+      timestamp: "Just now",
+      type: "comment",
+      isOptimistic: !0
+    };
+    if (w((o) => [...o, de]), r) {
+      _(!0);
+      try {
+        await r(h), w(
+          (o) => o.map(
+            (x) => x.id === $ ? { ...x, isOptimistic: !1 } : x
+          )
+        );
+      } catch {
+        w((o) => o.filter((x) => x.id !== $));
+      } finally {
+        _(!1);
+      }
+      return;
+    }
+    w(
+      (o) => o.map(
+        (x) => x.id === $ ? { ...x, isOptimistic: !1 } : x
+      )
+    );
+  }, ie = (i) => {
+    i.key === "Enter" && !i.shiftKey && (i.preventDefault(), ee());
+  }, oe = (i) => {
+    W(i.id), I(""), N(null), O(""), P(null), p == null || p(i);
+  }, ae = async (i) => {
+    const h = M.trim();
+    if (h) {
+      _(!0);
+      try {
+        await (r == null ? void 0 : r(h, i)), W(null), I("");
+      } finally {
+        _(!1);
+      }
+    }
+  }, le = (i) => {
+    N(i.id), O(i.content || ""), W(null), I(""), P(null), s == null || s(i);
+  }, se = async () => {
+    const i = ge.trim();
+    !i || !q || (await (s == null ? void 0 : s({ id: q, content: i })), N(null), O(""));
+  }, ce = (i) => {
+    G(i), P(null);
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: "rgba(255, 255, 255, 0.98)",
+        border: "1px solid rgba(52, 58, 64, 0.12)",
+        borderRadius: "12px",
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: [
+        U && /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              zIndex: 50,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(30, 33, 37, 0.35)",
+              borderRadius: "12px"
+            },
+            onClick: () => G(null),
+            children: /* @__PURE__ */ n(
+              "div",
+              {
+                style: {
+                  background: "white",
+                  borderRadius: "12px",
+                  padding: "20px 24px",
+                  boxShadow: "0 8px 24px rgba(30, 33, 37, 0.15)",
+                  maxWidth: "320px",
+                  width: "90%"
+                },
+                onClick: (i) => i.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ e(
+                    "p",
+                    {
+                      style: {
+                        margin: 0,
+                        marginBottom: "20px",
+                        fontSize: "14px",
+                        fontWeight: 500,
+                        color: "rgba(30, 33, 37, 0.9)",
+                        lineHeight: 1.45
+                      },
+                      children: "Do you really want to delete?"
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: "10px",
+                        justifyContent: "flex-end"
+                      },
+                      children: [
+                        /* @__PURE__ */ e(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => G(null),
+                            style: {
+                              padding: "8px 16px",
+                              fontSize: "12px",
+                              fontWeight: 600,
+                              color: "rgba(30, 33, 37, 0.45)",
+                              background: "rgba(30, 33, 37, 0.1)",
+                              border: "none",
+                              borderRadius: "6px",
+                              cursor: "pointer"
+                            },
+                            children: "Cancel"
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: async () => {
+                              if (!U) return;
+                              const i = U;
+                              G(null), await (d == null ? void 0 : d(i));
+                            },
+                            style: {
+                              padding: "8px 16px",
+                              fontSize: "12px",
+                              fontWeight: 600,
+                              color: "white",
+                              background: "#5e88b0",
+                              border: "none",
+                              borderRadius: "6px",
+                              cursor: "pointer"
+                            },
+                            children: "Delete"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        ne && /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              padding: "14px 16px",
+              borderBottom: "1px solid rgba(52, 58, 64, 0.12)",
+              background: "rgba(255, 255, 255, 0.98)"
+            },
+            children: /* @__PURE__ */ n(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  gap: "8px"
+                },
+                children: [
+                  /* @__PURE__ */ n("div", { children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          fontWeight: 600,
+                          color: "rgba(30, 33, 37, 0.95)",
+                          marginBottom: "4px"
+                        },
+                        children: c || "Session Discussion"
+                      }
+                    ),
+                    (t || a) && /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          color: "rgba(30, 33, 37, 0.52)"
+                        },
+                        children: t || a
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ n(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        V((i) => !i);
+                      },
+                      style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        padding: "6px 12px",
+                        fontSize: "13px",
+                        fontWeight: 500,
+                        color: "rgba(30, 33, 37, 0.75)",
+                        background: "transparent",
+                        border: "1px solid rgba(30, 33, 37, 0.12)",
+                        borderRadius: "6px",
+                        cursor: "pointer",
+                        transition: "background 0.15s ease, color 0.15s ease"
+                      },
+                      onMouseEnter: (i) => {
+                        i.currentTarget.style.background = "rgba(231, 212, 162, 0.12)", i.currentTarget.style.color = "rgba(30, 33, 37, 0.9)";
+                      },
+                      onMouseLeave: (i) => {
+                        i.currentTarget.style.background = "transparent", i.currentTarget.style.color = "rgba(30, 33, 37, 0.75)";
+                      },
+                      title: "Start a new discussion thread",
+                      children: [
+                        /* @__PURE__ */ e(
+                          "span",
+                          {
+                            style: {
+                              fontSize: 16,
+                              lineHeight: 1,
+                              marginTop: -1
+                            },
+                            children: "+"
+                          }
+                        ),
+                        "New thread"
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "16px"
+            },
+            children: [
+              ue && /* @__PURE__ */ n(
+                "div",
+                {
+                  style: {
+                    marginBottom: "16px",
+                    padding: "12px",
+                    background: "rgba(30, 33, 37, 0.04)",
+                    border: "1px solid rgba(52, 58, 64, 0.14)",
+                    borderRadius: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "textarea",
+                      {
+                        value: A,
+                        onChange: (i) => Y(i.target.value),
+                        onKeyDown: (i) => {
+                          i.key === "Enter" && !i.shiftKey && (i.preventDefault(), X());
+                        },
+                        placeholder: "Start a new thread...",
+                        disabled: L,
+                        style: {
+                          width: "100%",
+                          minHeight: "64px",
+                          padding: "8px 12px",
+                          fontSize: "13px",
+                          color: "rgba(30, 33, 37, 0.88)",
+                          background: "white",
+                          border: "1px solid rgba(52, 58, 64, 0.16)",
+                          borderRadius: "6px",
+                          resize: "vertical",
+                          outline: "none",
+                          fontFamily: "inherit",
+                          lineHeight: 1.5,
+                          marginBottom: "10px"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ n("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" }, children: [
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: re,
+                          disabled: L,
+                          style: {
+                            padding: "6px 14px",
+                            fontSize: "12px",
+                            fontWeight: 500,
+                            color: "rgba(30, 33, 37, 0.7)",
+                            background: "rgba(30, 33, 37, 0.08)",
+                            border: "none",
+                            borderRadius: "6px",
+                            cursor: L ? "not-allowed" : "pointer"
+                          },
+                          children: "Cancel"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: X,
+                          disabled: !A.trim() || L,
+                          style: {
+                            padding: "6px 14px",
+                            fontSize: "12px",
+                            fontWeight: 600,
+                            color: "white",
+                            background: A.trim() && !L ? "#5e88b0" : "rgba(30, 33, 37, 0.25)",
+                            border: "none",
+                            borderRadius: "6px",
+                            cursor: A.trim() && !L ? "pointer" : "not-allowed"
+                          },
+                          children: L ? "Sending..." : "Send"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              g ? /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "40px",
+                    color: "rgba(30, 33, 37, 0.42)"
+                  },
+                  children: "Loading messages..."
+                }
+              ) : b.length === 0 ? /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "40px",
+                    color: "rgba(30, 33, 37, 0.42)"
+                  },
+                  children: "No messages yet. Start the conversation!"
+                }
+              ) : b.map((i) => /* @__PURE__ */ n(
+                "div",
+                {
+                  onMouseEnter: () => i.type !== "system" && P(i.id),
+                  onMouseLeave: () => P(null),
+                  style: {
+                    display: "flex",
+                    gap: "12px",
+                    opacity: i.type === "system" ? 0.75 : 1,
+                    padding: "4px 0",
+                    margin: "0 -4px",
+                    borderRadius: "8px"
+                  },
+                  children: [
+                    i.type !== "system" ? /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: "36px",
+                          height: "36px",
+                          borderRadius: "50%",
+                          background: i.author.color,
+                          color: "white",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: "11px",
+                          fontWeight: 650,
+                          flexShrink: 0
+                        },
+                        children: i.author.initials
+                      }
+                    ) : /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: "36px",
+                          height: "36px",
+                          borderRadius: "50%",
+                          background: "rgba(30, 33, 37, 0.1)",
+                          color: "rgba(30, 33, 37, 0.55)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ e(Ye, { size: 16 })
+                      }
+                    ),
+                    /* @__PURE__ */ n("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ n(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "baseline",
+                            flexWrap: "wrap",
+                            gap: "8px",
+                            marginBottom: "6px",
+                            justifyContent: "space-between"
+                          },
+                          children: [
+                            /* @__PURE__ */ n(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "baseline",
+                                  flexWrap: "wrap",
+                                  gap: "8px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ e(
+                                    "span",
+                                    {
+                                      style: {
+                                        fontSize: "13px",
+                                        fontWeight: 650,
+                                        color: "rgba(30, 33, 37, 0.9)"
+                                      },
+                                      children: i.author.name
+                                    }
+                                  ),
+                                  /* @__PURE__ */ e(
+                                    "span",
+                                    {
+                                      style: {
+                                        fontSize: "10px",
+                                        fontFamily: "var(--default-mono-font-family)",
+                                        color: "rgba(30, 33, 37, 0.5)"
+                                      },
+                                      children: i.timestamp
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            i.type !== "system" && B === i.id && /* @__PURE__ */ n(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "12px",
+                                  flexShrink: 0
+                                },
+                                children: [
+                                  p && /* @__PURE__ */ e(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: (h) => {
+                                        h.preventDefault(), h.stopPropagation(), oe(i);
+                                      },
+                                      style: xe,
+                                      children: "Reply"
+                                    }
+                                  ),
+                                  s && /* @__PURE__ */ e(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: (h) => {
+                                        h.preventDefault(), h.stopPropagation(), le(i);
+                                      },
+                                      style: xe,
+                                      children: "Edit"
+                                    }
+                                  ),
+                                  d && /* @__PURE__ */ e(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: (h) => {
+                                        h.preventDefault(), h.stopPropagation(), ce(i);
+                                      },
+                                      style: {
+                                        ...xe,
+                                        color: "rgba(198, 99, 99, 0.9)"
+                                      },
+                                      children: "Delete"
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      q === i.id ? /* @__PURE__ */ e("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ e(
+                        "textarea",
+                        {
+                          value: ge,
+                          onChange: (h) => O(h.target.value),
+                          onKeyDown: (h) => {
+                            h.key === "Enter" && !h.shiftKey && (h.preventDefault(), se()), h.key === "Escape" && (N(null), O(""));
+                          },
+                          placeholder: "Edit message...",
+                          autoFocus: !0,
+                          style: {
+                            width: "100%",
+                            minHeight: "64px",
+                            padding: "8px 12px",
+                            fontSize: "13px",
+                            color: "rgba(30, 33, 37, 0.88)",
+                            background: "white",
+                            border: "1px solid rgba(52, 58, 64, 0.2)",
+                            borderRadius: "6px",
+                            resize: "vertical",
+                            outline: "none",
+                            fontFamily: "inherit",
+                            lineHeight: 1.5,
+                            marginBottom: "8px"
+                          }
+                        }
+                      ) }) : /* @__PURE__ */ e(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "13px",
+                            color: "rgba(30, 33, 37, 0.88)",
+                            lineHeight: 1.55
+                          },
+                          children: i.content
+                        }
+                      ),
+                      F === i.id && /* @__PURE__ */ e("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ e(
+                        "textarea",
+                        {
+                          value: M,
+                          onChange: (h) => I(h.target.value),
+                          onKeyDown: (h) => {
+                            h.key === "Enter" && !h.shiftKey && (h.preventDefault(), ae(i.id)), h.key === "Escape" && (W(null), I(""));
+                          },
+                          placeholder: "Type your reply...",
+                          disabled: T,
+                          autoFocus: !0,
+                          style: {
+                            width: "100%",
+                            minHeight: "64px",
+                            padding: "8px 12px",
+                            fontSize: "13px",
+                            color: "rgba(30, 33, 37, 0.88)",
+                            background: "white",
+                            border: "1px solid rgba(52, 58, 64, 0.16)",
+                            borderRadius: "6px",
+                            resize: "vertical",
+                            outline: "none",
+                            fontFamily: "inherit",
+                            lineHeight: 1.5,
+                            marginBottom: "10px"
+                          }
+                        }
+                      ) })
+                    ] })
+                  ]
+                },
+                i.id
+              )),
+              /* @__PURE__ */ e("div", { ref: Z })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              borderTop: "1px solid rgba(52, 58, 64, 0.12)",
+              background: "rgba(255, 255, 255, 0.95)"
+            },
+            children: /* @__PURE__ */ n(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  gap: "8px",
+                  alignItems: "flex-end"
+                },
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      style: {
+                        width: "36px",
+                        height: "36px",
+                        borderRadius: "50%",
+                        background: Q.color,
+                        color: "white",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: "11px",
+                        fontWeight: 650,
+                        flexShrink: 0
+                      },
+                      children: Q.initials
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "8px"
+                      },
+                      children: [
+                        /* @__PURE__ */ e(
+                          "textarea",
+                          {
+                            ref: J,
+                            value: u,
+                            onChange: (i) => z(i.target.value),
+                            onKeyDown: ie,
+                            onFocus: () => S(!0),
+                            onBlur: () => S(!1),
+                            placeholder: he ? "Type your reply..." : "Add a comment...",
+                            style: {
+                              width: "100%",
+                              minHeight: "38px",
+                              maxHeight: "120px",
+                              padding: "8px 12px",
+                              fontSize: "13px",
+                              color: "rgba(30, 33, 37, 0.85)",
+                              background: "white",
+                              border: `1px solid ${C ? "rgba(94, 136, 176, 0.35)" : "rgba(52, 58, 64, 0.16)"}`,
+                              borderRadius: "8px",
+                              resize: "vertical",
+                              outline: "none",
+                              transition: "border-color 0.15s ease",
+                              fontFamily: "inherit",
+                              lineHeight: 1.5
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "flex-end"
+                            },
+                            children: /* @__PURE__ */ e(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: ee,
+                                disabled: !u.trim() || T,
+                                style: {
+                                  padding: "8px 16px",
+                                  background: u.trim() && !T ? "#5e88b0" : "rgba(30, 33, 37, 0.1)",
+                                  border: "none",
+                                  borderRadius: "6px",
+                                  color: u.trim() && !T ? "white" : "rgba(30, 33, 37, 0.45)",
+                                  fontSize: "12px",
+                                  fontWeight: 600,
+                                  cursor: u.trim() && !T ? "pointer" : "not-allowed",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "6px",
+                                  transition: "all 0.15s ease"
+                                },
+                                children: T ? /* @__PURE__ */ n(we, { children: [
+                                  /* @__PURE__ */ e(
+                                    "div",
+                                    {
+                                      style: {
+                                        width: "14px",
+                                        height: "14px",
+                                        border: "2px solid rgba(255, 255, 255, 0.3)",
+                                        borderTopColor: "white",
+                                        borderRadius: "50%",
+                                        animation: "spin 0.6s linear infinite"
+                                      }
+                                    }
+                                  ),
+                                  "Sending..."
+                                ] }) : /* @__PURE__ */ n(we, { children: [
+                                  /* @__PURE__ */ e(Ze, { size: 14 }),
+                                  "Send"
+                                ] })
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function E(t, a) {
+  return t.find((c) => c.block_id === a);
+}
+function gt({ data: t, audioUrl: a, coachingData: c, coachingLoading: l, coachingError: r }) {
+  var re, ee, ie, oe, ae, le, se, ce, fe, i, h, $, de;
+  const p = t.blocks || [];
+  t.evidence_index;
+  const s = pe(null), d = pe(null), [m, y] = k(/* @__PURE__ */ new Set()), [g, u] = k(/* @__PURE__ */ new Set()), [z, C] = k(0), [S, b] = k(!1), [w, T] = k(1), _ = ((re = E(p, "interaction-metadata")) == null ? void 0 : re.payload) || {}, B = ((ee = E(p, "interaction-context")) == null ? void 0 : ee.payload) || {}, P = ((ie = E(p, "interaction-summary")) == null ? void 0 : ie.payload) || {}, F = ((oe = E(p, "interaction-scores")) == null ? void 0 : oe.payload) || {}, W = ((ae = E(p, "interaction-signals")) == null ? void 0 : ae.payload) || {}, M = ((le = E(p, "interaction-guidance")) == null ? void 0 : le.payload) || {}, I = ((se = E(p, "interaction-transcript")) == null ? void 0 : se.payload) || {}, q = ((ce = E(p, "interaction-message-thread")) == null ? void 0 : ce.payload) || {}, N = ((fe = E(p, "interaction-nba")) == null ? void 0 : fe.payload) || {}, O = ((((i = E(p, "interaction-dimensions")) == null ? void 0 : i.payload) || {}).dimensions || []).filter((o) => o.value), U = ((h = E(p, "interaction-outcome-lift")) == null ? void 0 : h.payload) || {}, G = me(() => {
+    var f;
+    const o = {}, x = {
+      outcome: { color: "var(--rail-outcome)" },
+      process: { color: "var(--rail-discovery)" },
+      compliance: { color: "var(--rail-compliance)" },
+      customer_friction: { color: "var(--rail-coral)" },
+      experience: { color: "var(--rail-teal)" }
+    };
+    for (const v of W.signals || []) {
+      const D = x[v.group] || {};
+      for (const R of v.observations || [])
+        for (const H of R.evidence || [])
+          if ((f = H.turn_ids) != null && f.length)
+            for (const j of H.turn_ids)
+              o[j] || (o[j] = []), o[j].some((We) => We.label === (R.key || v.display_name || v.key)) || o[j].push({
+                label: R.key || v.display_name || v.key,
+                reason: R.reason || R.explanation || "",
+                color: D.color || "var(--state-present)",
+                signalKey: v.key
+              });
+    }
+    return o;
+  }, [W.signals]), ue = (($ = I.messages) == null ? void 0 : $.map((o, x) => {
+    var H, j;
+    const f = o.start ?? o.start_ms ? (o.start ?? o.start_ms) / 1e3 : 0, v = o.end ?? o.end_ms ? (o.end ?? o.end_ms) / 1e3 : f + 1, D = o.actor === "agent", R = D ? ((H = I.actor_map) == null ? void 0 : H.agent) || "Agent" : ((j = I.actor_map) == null ? void 0 : j.customer) || "Customer";
+    return {
+      startTime: f,
+      endTime: v,
+      actor: R,
+      actorColor: D ? "var(--rail-outcome)" : "var(--rail-discovery)"
+    };
+  })) || [], V = me(() => {
+    if (!S && z === 0) return -1;
+    const o = I.messages || [], x = z * 1e3;
+    for (let f = o.length - 1; f >= 0; f--) {
+      const v = o[f].start ?? o[f].start_ms;
+      if (v != null && x >= v) return f;
+    }
+    return -1;
+  }, [z, S, I.messages]), A = (o) => {
+    s.current && (s.current.currentTime = o, C(o));
+  }, Y = () => {
+    if (s.current)
+      if (S)
+        s.current.pause(), b(!1);
+      else {
+        const o = s.current.play();
+        o !== void 0 && o.catch(() => {
+        }), b(!0);
+      }
+  }, L = () => {
+    s.current && (s.current.currentTime = Math.max(0, s.current.currentTime - 15));
+  }, te = () => {
+    if (s.current) {
+      const o = _.duration_seconds || s.current.duration || 0;
+      s.current.currentTime = Math.min(o, s.current.currentTime + 15);
+    }
+  }, Z = (o) => {
+    s.current && (s.current.playbackRate = o, T(o));
+  };
+  ve(() => {
+    const o = s.current;
+    if (!o) return;
+    const x = () => C(o.currentTime), f = () => b(!0), v = () => b(!1), D = () => b(!1);
+    return o.addEventListener("timeupdate", x), o.addEventListener("play", f), o.addEventListener("pause", v), o.addEventListener("ended", D), () => {
+      o.removeEventListener("timeupdate", x), o.removeEventListener("play", f), o.removeEventListener("pause", v), o.removeEventListener("ended", D);
+    };
+  }, [a]);
+  const J = (o, x) => {
+    const f = s.current;
+    if (!f) return;
+    const v = o / 1e3;
+    f.currentTime = v, C(v);
+    const D = f.play();
+    if (D !== void 0 && D.catch(() => {
+    }), d.current && (f.removeEventListener("timeupdate", d.current), d.current = null), x != null) {
+      const R = x / 1e3, H = () => {
+        f.currentTime >= R && (f.pause(), d.current && (f.removeEventListener("timeupdate", d.current), d.current = null));
+      };
+      d.current = H, f.addEventListener("timeupdate", H);
+    }
+  }, Q = (o, x) => {
+    const v = (I.messages || [])[x], D = s.current;
+    if (!v || !D) return;
+    const R = v.start ?? v.start_ms, H = v.end ?? v.end_ms;
+    if (S && V === x) {
+      D.pause();
+      return;
+    }
+    R != null && J(R, H);
+  }, ne = (o) => {
+    y(new Set(o));
+    const x = document.getElementById("transcript-container");
+    x && x.scrollIntoView({ behavior: "smooth", block: "nearest" }), setTimeout(() => y(/* @__PURE__ */ new Set()), 5e3);
+  }, he = (o) => {
+    u((x) => {
+      const f = new Set(x);
+      return f.has(o) ? f.delete(o) : f.add(o), f;
+    });
+  }, X = ((de = B.call_purpose) == null ? void 0 : de.interaction_driver) || P.one_liner || "Interaction Detail";
+  return /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ e(
+      rt,
+      {
+        title: X,
+        meta: _,
+        callPurpose: B.call_purpose,
+        classification: B.classification,
+        dimensions: O
+      }
+    ),
+    /* @__PURE__ */ e(it, { scores: F.scores }),
+    /* @__PURE__ */ e(Xe, { outcomeLift: U }),
+    (l || c || r) && /* @__PURE__ */ e(K, { title: "Coaching Summary", children: /* @__PURE__ */ e(
+      tt,
+      {
+        data: c,
+        loading: l,
+        error: r
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      at,
+      {
+        signals: W,
+        expandedSignals: g,
+        toggleSignal: he,
+        playAudio: J,
+        highlightTurns: ne
+      }
+    ),
+    /* @__PURE__ */ e(
+      lt,
+      {
+        guidance: M,
+        playAudio: J,
+        highlightTurns: ne
+      }
+    ),
+    /* @__PURE__ */ e(st, { nba: N }),
+    /* @__PURE__ */ e(
+      ct,
+      {
+        audioUrl: a,
+        timelineSegments: ue,
+        durationSeconds: _.duration_seconds,
+        currentTimeSeconds: z,
+        timelinePlaying: S,
+        playbackRate: w,
+        onSeek: A,
+        onTogglePlay: Y,
+        onSeekBack: L,
+        onSeekForward: te,
+        onSetPlaybackRate: Z,
+        audioRef: s
+      }
+    ),
+    /* @__PURE__ */ e(
+      dt,
+      {
+        transcript: I,
+        audioUrl: a,
+        highlightedTurns: m,
+        activeTurnIndex: V,
+        timelinePlaying: S,
+        turnObservations: G,
+        setExpandedSignals: u,
+        onTurnPlayPause: Q
+      }
+    ),
+    /* @__PURE__ */ e(
+      pt,
+      {
+        messageThread: q,
+        sessionTitle: X,
+        messages: []
+      }
+    )
+  ] });
+}
+class ut extends Ie.Component {
+  constructor(a) {
+    super(a), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(a, c) {
+    console.error("InteractionDetailPanel render error:", a, c == null ? void 0 : c.componentStack);
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+function mt(t) {
+  return /* @__PURE__ */ e(ut, { fallback: /* @__PURE__ */ e("div", { style: { padding: 16, color: "var(--state-unknown)", fontSize: 12 }, children: "Error rendering detail." }), children: /* @__PURE__ */ e(gt, { ...t }) });
+}
+function vt({ pattern: t }) {
+  const [a, c] = k(!1), l = {
+    name: "Customer Escalation Likelihood",
+    description: "Based on observed patterns, this session shows indicators consistent with potential escalation.",
+    technicalKey: "signal.escalation_likelihood",
+    probability: 0.68,
+    confidence: 0.81,
+    observations: 3
+  };
+  return t === "text-link" ? /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        position: "relative",
+        background: "rgba(255, 255, 255, 0.82)",
+        border: "1px solid rgba(52, 58, 64, 0.12)",
+        borderRadius: "12px",
+        overflow: "hidden",
+        boxShadow: "0 2px 4px rgba(30, 33, 37, 0.06)"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: "5px",
+              background: "#6B7C93",
+              opacity: 0.6
+            }
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              padding: "14px 16px 14px 21px"
+            },
+            children: [
+              /* @__PURE__ */ e("div", { style: { marginBottom: "4px" }, children: /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: 680,
+                    color: "rgba(30, 33, 37, 0.92)",
+                    lineHeight: 1.2
+                  },
+                  children: l.name
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "12px",
+                    color: "rgba(30, 33, 37, 0.65)",
+                    lineHeight: 1.4,
+                    marginBottom: "6px"
+                  },
+                  children: l.description
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "rgba(30, 33, 37, 0.42)",
+                    fontFamily: "ui-monospace, monospace",
+                    marginBottom: "8px"
+                  },
+                  children: l.technicalKey
+                }
+              ),
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    fontSize: "11.5px",
+                    marginBottom: "10px"
+                  },
+                  children: [
+                    /* @__PURE__ */ e("span", { style: { color: "rgba(139, 157, 127, 0.65)" }, children: "prob" }),
+                    /* @__PURE__ */ e("strong", { style: { color: "rgba(139, 157, 127, 0.85)" }, children: l.probability.toFixed(2) }),
+                    /* @__PURE__ */ e("span", { style: { color: "rgba(30, 33, 37, 0.24)" }, children: "·" }),
+                    /* @__PURE__ */ e("span", { style: { color: "rgba(184, 156, 106, 0.65)" }, children: "conf" }),
+                    /* @__PURE__ */ e("strong", { style: { color: "rgba(184, 156, 106, 0.85)" }, children: l.confidence.toFixed(2) }),
+                    /* @__PURE__ */ e("span", { style: { color: "rgba(30, 33, 37, 0.24)" }, children: "·" }),
+                    /* @__PURE__ */ n("span", { style: { color: "rgba(30, 33, 37, 0.52)" }, children: [
+                      l.observations,
+                      " observations"
+                    ] })
+                  ]
+                }
+              ),
+              !a && /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => c(!0),
+                  style: {
+                    fontSize: "12px",
+                    color: "rgba(30, 33, 37, 0.56)",
+                    background: "none",
+                    border: "none",
+                    padding: 0,
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                    textDecorationColor: "rgba(30, 33, 37, 0.2)"
+                  },
+                  onMouseEnter: (r) => {
+                    r.currentTarget.style.color = "rgba(30, 33, 37, 0.78)", r.currentTarget.style.textDecorationColor = "rgba(30, 33, 37, 0.4)";
+                  },
+                  onMouseLeave: (r) => {
+                    r.currentTarget.style.color = "rgba(30, 33, 37, 0.56)", r.currentTarget.style.textDecorationColor = "rgba(30, 33, 37, 0.2)";
+                  },
+                  children: "View contributing observations"
+                }
+              )
+            ]
+          }
+        ),
+        a && /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid rgba(52, 58, 64, 0.08)",
+              background: "rgba(244, 241, 230, 0.25)",
+              padding: "16px 16px 16px 21px"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "10px",
+                    fontWeight: 650,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    color: "rgba(30, 33, 37, 0.52)",
+                    marginBottom: "8px"
+                  },
+                  children: "Contributing Observations"
+                }
+              ),
+              /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "rgba(30, 33, 37, 0.62)" }, children: "[Observations would appear here]" }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => c(!1),
+                  style: {
+                    marginTop: "10px",
+                    fontSize: "12px",
+                    color: "rgba(30, 33, 37, 0.56)",
+                    background: "none",
+                    border: "none",
+                    padding: 0,
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                    textDecorationColor: "rgba(30, 33, 37, 0.2)"
+                  },
+                  onMouseEnter: (r) => {
+                    r.currentTarget.style.color = "rgba(30, 33, 37, 0.78)", r.currentTarget.style.textDecorationColor = "rgba(30, 33, 37, 0.4)";
+                  },
+                  onMouseLeave: (r) => {
+                    r.currentTarget.style.color = "rgba(30, 33, 37, 0.56)", r.currentTarget.style.textDecorationColor = "rgba(30, 33, 37, 0.2)";
+                  },
+                  children: "Hide observations"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : t === "rotating-chevron" ? /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        position: "relative",
+        background: "rgba(255, 255, 255, 0.82)",
+        border: "1px solid rgba(52, 58, 64, 0.12)",
+        borderRadius: "12px",
+        overflow: "hidden",
+        boxShadow: "0 2px 4px rgba(30, 33, 37, 0.06)"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: "5px",
+              background: "#6B7C93",
+              opacity: 0.6
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => c(!a),
+            style: {
+              width: "100%",
+              padding: "14px 16px 14px 21px",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              textAlign: "left",
+              transition: "background 0.15s ease"
+            },
+            onMouseEnter: (r) => {
+              r.currentTarget.style.background = "rgba(231, 212, 162, 0.08)";
+            },
+            onMouseLeave: (r) => {
+              r.currentTarget.style.background = "transparent";
+            },
+            children: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [
+              /* @__PURE__ */ n("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ e("div", { style: { marginBottom: "4px" }, children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: 680,
+                      color: "rgba(30, 33, 37, 0.92)",
+                      lineHeight: 1.2
+                    },
+                    children: l.name
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "rgba(30, 33, 37, 0.65)",
+                      lineHeight: 1.4,
+                      marginBottom: "6px"
+                    },
+                    children: l.description
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      color: "rgba(30, 33, 37, 0.42)",
+                      fontFamily: "ui-monospace, monospace",
+                      marginBottom: "8px"
+                    },
+                    children: l.technicalKey
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "12px",
+                      fontSize: "11.5px"
+                    },
+                    children: [
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(139, 157, 127, 0.65)" }, children: "prob" }),
+                      /* @__PURE__ */ e("strong", { style: { color: "rgba(139, 157, 127, 0.85)" }, children: l.probability.toFixed(2) }),
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(30, 33, 37, 0.24)" }, children: "·" }),
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(184, 156, 106, 0.65)" }, children: "conf" }),
+                      /* @__PURE__ */ e("strong", { style: { color: "rgba(184, 156, 106, 0.85)" }, children: l.confidence.toFixed(2) }),
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(30, 33, 37, 0.24)" }, children: "·" }),
+                      /* @__PURE__ */ n("span", { style: { color: "rgba(30, 33, 37, 0.52)" }, children: [
+                        l.observations,
+                        " observations"
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    paddingTop: "2px",
+                    color: "rgba(30, 33, 37, 0.42)",
+                    flexShrink: 0,
+                    transition: "transform 0.2s ease"
+                  },
+                  children: /* @__PURE__ */ e(
+                    be,
+                    {
+                      size: 18,
+                      style: {
+                        transform: a ? "rotate(180deg)" : "rotate(0deg)",
+                        transition: "transform 0.2s ease"
+                      }
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        a && /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid rgba(52, 58, 64, 0.08)",
+              background: "rgba(244, 241, 230, 0.25)",
+              padding: "16px 16px 16px 21px"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "10px",
+                    fontWeight: 650,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    color: "rgba(30, 33, 37, 0.52)",
+                    marginBottom: "8px"
+                  },
+                  children: "Contributing Observations"
+                }
+              ),
+              /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "rgba(30, 33, 37, 0.62)" }, children: "[Observations would appear here]" })
+            ]
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        position: "relative",
+        background: "rgba(255, 255, 255, 0.82)",
+        border: "1px solid rgba(52, 58, 64, 0.12)",
+        borderRadius: "12px",
+        overflow: "hidden",
+        boxShadow: "0 2px 4px rgba(30, 33, 37, 0.06)"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: "5px",
+              background: "#6B7C93",
+              opacity: 0.6
+            }
+          }
+        ),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: () => c(!a),
+            style: {
+              width: "100%",
+              padding: "14px 16px 14px 21px",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              textAlign: "left",
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "12px",
+              transition: "background 0.15s ease"
+            },
+            onMouseEnter: (r) => {
+              r.currentTarget.style.background = "rgba(231, 212, 162, 0.08)";
+            },
+            onMouseLeave: (r) => {
+              r.currentTarget.style.background = "transparent";
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    paddingTop: "2px",
+                    color: "rgba(30, 33, 37, 0.42)",
+                    flexShrink: 0
+                  },
+                  children: a ? /* @__PURE__ */ e(be, { size: 16 }) : /* @__PURE__ */ e(Je, { size: 16 })
+                }
+              ),
+              /* @__PURE__ */ n("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ e("div", { style: { marginBottom: "4px" }, children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: 680,
+                      color: "rgba(30, 33, 37, 0.92)",
+                      lineHeight: 1.2
+                    },
+                    children: l.name
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "rgba(30, 33, 37, 0.65)",
+                      lineHeight: 1.4,
+                      marginBottom: "6px"
+                    },
+                    children: l.description
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      color: "rgba(30, 33, 37, 0.42)",
+                      fontFamily: "ui-monospace, monospace",
+                      marginBottom: "8px"
+                    },
+                    children: l.technicalKey
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "12px",
+                      fontSize: "11.5px"
+                    },
+                    children: [
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(139, 157, 127, 0.65)" }, children: "prob" }),
+                      /* @__PURE__ */ e("strong", { style: { color: "rgba(139, 157, 127, 0.85)" }, children: l.probability.toFixed(2) }),
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(30, 33, 37, 0.24)" }, children: "·" }),
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(184, 156, 106, 0.65)" }, children: "conf" }),
+                      /* @__PURE__ */ e("strong", { style: { color: "rgba(184, 156, 106, 0.85)" }, children: l.confidence.toFixed(2) }),
+                      /* @__PURE__ */ e("span", { style: { color: "rgba(30, 33, 37, 0.24)" }, children: "·" }),
+                      /* @__PURE__ */ n("span", { style: { color: "rgba(30, 33, 37, 0.52)" }, children: [
+                        l.observations,
+                        " observations"
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        a && /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid rgba(52, 58, 64, 0.08)",
+              background: "rgba(244, 241, 230, 0.25)",
+              padding: "16px 16px 16px 21px"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "10px",
+                    fontWeight: 650,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    color: "rgba(30, 33, 37, 0.52)",
+                    marginBottom: "8px"
+                  },
+                  children: "Contributing Observations"
+                }
+              ),
+              /* @__PURE__ */ e("div", { style: { fontSize: "12px", color: "rgba(30, 33, 37, 0.62)" }, children: "[Observations would appear here]" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Xe as AgentLiftCard,
+  tt as CoachingSynthesisCard,
+  kt as ConditionCard,
+  Ee as EvidenceItem,
+  vt as ExpandPatternComparison,
+  rt as InteractionContext,
+  mt as InteractionDetailPanel,
+  lt as InteractionGuidance,
+  st as InteractionNBA,
+  ct as InteractionRecording,
+  it as InteractionScores,
+  at as InteractionSignals,
+  dt as InteractionTranscript,
+  zt as ModelScoreCard,
+  wt as ObservationCard,
+  Ct as ScoreDriverCard,
+  Tt as ScoreDriverCardVariant,
+  _t as SignalCard,
+  It as SmallObservationCard,
+  Dt as SummarySection
+};
+//# sourceMappingURL=interactionDetails.es.js.map