@natoe/colab 0.1.16 → 0.1.18

package/dist/index.mjs

@@ -513,8 +513,6 @@ var SHADOW = {
   toast: "0 4px 12px rgba(0, 0, 0, 0.18)"
 };
 var Z_INDEX = {
-  /** Sticky day divider — above bubbles, below interactive popovers. */
-  sticky: 1,
   /** Toasts inside a panel. */
   toast: 20,
   /** Floating CollabPopup dialog. */
@@ -1446,6 +1444,31 @@ function DicomIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
+function OpenCaseIcon({
+  size = 18,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 4h6v6" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 4L11 13" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5" })
+      ]
+    }
+  );
+}
 function PeopleIcon({ size = 18, color = "currentColor" }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -1483,15 +1506,19 @@ function BackIcon({ size = 22, color = "currentColor" }) {
     }
   );
 }
+function stripOrderIdSuffix(name) {
+  return name.replace(/\s*-\s*\d{1,6}\s*$/, "").trim();
+}
 function resolveDisplayName(patientData, displayName) {
   const localComplete = !!patientData.labName && !!patientData.displayOrderId;
-  if (localComplete) return buildChannelName(patientData);
-  return cleanChannelName(displayName) || buildChannelName(patientData);
+  const raw = localComplete ? buildChannelName(patientData) : cleanChannelName(displayName) || buildChannelName(patientData);
+  return stripOrderIdSuffix(raw);
 }
 function PatientHeader({
   patientData,
   participants,
   onOpenDicom,
+  onOpenCase,
   onOpenSettings,
   onBack,
   hideName = false,
@@ -1499,29 +1526,58 @@ function PatientHeader({
   className
 }) {
   const hasDicom = !!(patientData.studyId && patientData.storageId);
-  const meta = [];
-  if (patientData.patientAge && patientData.patientSex) {
-    meta.push({
-      key: "ageSex",
-      label: "Age / Sex",
-      value: `${patientData.patientAge} \xB7 ${patientData.patientSex}`
-    });
-  } else if (patientData.patientAge) {
-    meta.push({ key: "age", label: "Age", value: String(patientData.patientAge) });
-  } else if (patientData.patientSex) {
-    meta.push({ key: "sex", label: "Sex", value: String(patientData.patientSex) });
-  }
-  if (patientData.studyType) {
-    meta.push({ key: "modality", label: "Modality", value: patientData.studyType });
-  }
+  const resolvedName = resolveDisplayName(patientData, displayName);
+  const metaParts = [];
+  if (patientData.patientAge) metaParts.push(String(patientData.patientAge));
+  if (patientData.patientSex) metaParts.push(String(patientData.patientSex));
+  if (patientData.studyType) metaParts.push(patientData.studyType);
   if (patientData.bodyParts && patientData.bodyParts.length > 0) {
-    meta.push({
-      key: "body",
-      label: "Body part",
-      value: patientData.bodyParts.join(", ")
-    });
+    metaParts.push(patientData.bodyParts.join(", "));
   }
-  const hasActions = hasDicom && onOpenDicom || onOpenSettings;
+  const hasPrimaryActions = hasDicom && onOpenDicom || onOpenCase;
+  const primaryActions = hasPrimaryActions ? /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+    hasDicom && onOpenDicom && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onOpenDicom,
+        style: styles.dicomButton,
+        type: "button",
+        "aria-label": "View DICOM study",
+        children: [
+          /* @__PURE__ */ jsx(DicomIcon, { size: 18, color: COLOR.primary }),
+          /* @__PURE__ */ jsx("span", { children: "View DICOM" })
+        ]
+      }
+    ),
+    onOpenCase && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onOpenCase,
+        style: styles.openCaseButton,
+        type: "button",
+        "aria-label": "Open case",
+        title: "Open case",
+        children: [
+          /* @__PURE__ */ jsx(OpenCaseIcon, { size: 18, color: COLOR.primary }),
+          /* @__PURE__ */ jsx("span", { children: "Open" })
+        ]
+      }
+    )
+  ] }) : null;
+  const settingsButton = onOpenSettings ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: onOpenSettings,
+      style: styles.settingsIconButton,
+      type: "button",
+      "aria-label": `Open channel settings (${participants.length} participants)`,
+      title: "Channel participants",
+      children: [
+        /* @__PURE__ */ jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
+        /* @__PURE__ */ jsx("span", { style: styles.participantCount, children: participants.length })
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
     !hideName && /* @__PURE__ */ jsxs("div", { style: styles.nameRow, children: [
       onBack && /* @__PURE__ */ jsx(
@@ -1532,45 +1588,19 @@ function PatientHeader({
           style: styles.backButton,
           "aria-label": "Back to conversations",
           title: "Back to conversations",
-          children: /* @__PURE__ */ jsx(BackIcon, { size: 22, color: COLOR.neutral800 })
+          children: /* @__PURE__ */ jsx(BackIcon, { size: 20, color: COLOR.neutral800 })
         }
       ),
-      /* @__PURE__ */ jsx("span", { style: styles.nameText, children: resolveDisplayName(patientData, displayName) })
+      /* @__PURE__ */ jsx("span", { style: styles.nameText, children: resolvedName }),
+      primaryActions
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles.caseCard, children: [
-      meta.length > 0 && /* @__PURE__ */ jsx("div", { style: styles.metaRow, children: meta.map((item) => /* @__PURE__ */ jsxs("div", { style: styles.metaCol, children: [
-        /* @__PURE__ */ jsx("span", { style: styles.metaLabel, children: item.label }),
-        /* @__PURE__ */ jsx("span", { style: styles.metaValue, children: item.value })
-      ] }, item.key)) }),
-      hasActions && /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
-        hasDicom && onOpenDicom && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: onOpenDicom,
-            style: styles.dicomButton,
-            type: "button",
-            "aria-label": "View DICOM study",
-            children: [
-              /* @__PURE__ */ jsx(DicomIcon, { size: 18, color: COLOR.primary }),
-              /* @__PURE__ */ jsx("span", { children: "View DICOM" })
-            ]
-          }
-        ),
-        onOpenSettings && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: onOpenSettings,
-            style: styles.settingsIconButton,
-            type: "button",
-            "aria-label": `Open channel settings (${participants.length} participants)`,
-            title: "Channel participants",
-            children: [
-              /* @__PURE__ */ jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
-              /* @__PURE__ */ jsx("span", { style: styles.participantCount, children: participants.length })
-            ]
-          }
-        )
-      ] })
+    !hideName && (metaParts.length > 0 || settingsButton) && /* @__PURE__ */ jsxs("div", { style: styles.metaRow, children: [
+      metaParts.length > 0 && /* @__PURE__ */ jsx("span", { style: styles.metaText, children: metaParts.join(" \xB7 ") }),
+      settingsButton && /* @__PURE__ */ jsx("div", { style: styles.metaRowEnd, children: settingsButton })
+    ] }),
+    hideName && (primaryActions || settingsButton) && /* @__PURE__ */ jsxs("div", { style: styles.actionsOnlyRow, children: [
+      primaryActions,
+      settingsButton
     ] })
   ] });
 }
@@ -1579,16 +1609,16 @@ var styles = {
     display: "flex",
     flexDirection: "column",
     backgroundColor: COLOR.primaryBg,
-    borderBottom: `1px solid ${COLOR.neutral200}`
+    borderBottom: `1px solid ${COLOR.neutral200}`,
+    padding: `${SPACE.S2} ${SPACE.S4}`,
+    gap: "2px"
   },
-  // Optional name row, only when `hideName` is false (compact-inbox path)
+  // Title row — back · name · actions in one horizontal line.
   nameRow: {
     display: "flex",
     alignItems: "center",
     gap: SPACE.S2,
-    padding: `${SPACE.S3} ${SPACE.S4} ${SPACE.S2}`,
-    borderBottom: `1px solid ${COLOR.neutral200}`,
-    backgroundColor: COLOR.white
+    minWidth: 0
   },
   backButton: {
     width: SIZE.controlIcon,
@@ -1604,57 +1634,51 @@ var styles = {
     flexShrink: 0
   },
   nameText: {
+    flex: 1,
+    minWidth: 0,
     fontSize: FONT_SIZE.lg,
     fontWeight: FONT_WEIGHT.bold,
     color: COLOR.neutral900,
     lineHeight: LINE_HEIGHT.tight,
     letterSpacing: "-0.01em",
-    minWidth: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
-  // Case card: meta columns flowing in a wrap-row, actions stacked
-  // below. Each meta column is a small label-above-value pair so the
-  // user can scan field names quickly without a legend.
-  caseCard: {
-    display: "flex",
-    flexDirection: "column",
-    gap: SPACE.S3,
-    padding: `${SPACE.S3} ${SPACE.S5}`
-  },
-  // Wrap-row of stacked label/value columns. Compact column gap keeps
-  // the row dense without crowding; row gap kicks in when columns
-  // wrap to a second line on narrow popups.
+  // Sub-row beneath the title — small muted meta on the left, the
+  // channel-settings pill on the right when present. Meta text can
+  // ellipsis on narrow widths; the settings pill stays its content
+  // width and hugs the trailing edge via `metaRowEnd`.
   metaRow: {
     display: "flex",
-    flexWrap: "wrap",
-    columnGap: SPACE.S5,
-    rowGap: SPACE.S2,
+    alignItems: "center",
+    gap: SPACE.S2,
+    paddingLeft: `calc(${SIZE.controlIcon} + ${SPACE.S2} - ${SPACE.S2})`,
     minWidth: 0
   },
-  metaCol: {
+  metaRowEnd: {
+    marginLeft: "auto",
+    flexShrink: 0
+  },
+  // When hideName=true (popup mode), only the actions render. The
+  // popup's own title bar carries the name + meta above this row, so
+  // the actions land flush-left here — pinning them to the right
+  // edge would leave the whole left half of the strip awkwardly
+  // empty (the meta that used to fill it now lives in the title bar).
+  actionsOnlyRow: {
     display: "flex",
-    flexDirection: "column",
-    gap: "2px",
+    justifyContent: "flex-start",
     minWidth: 0
   },
-  metaLabel: {
-    fontSize: "11px",
-    fontWeight: FONT_WEIGHT.bold,
-    letterSpacing: "0.06em",
-    textTransform: "uppercase",
-    color: COLOR.neutral500,
-    whiteSpace: "nowrap"
-  },
-  metaValue: {
+  metaText: {
     fontSize: FONT_SIZE.sm,
-    fontWeight: FONT_WEIGHT.semibold,
-    color: COLOR.neutral900,
-    whiteSpace: "nowrap",
+    fontWeight: FONT_WEIGHT.medium,
+    color: COLOR.neutral600,
+    lineHeight: LINE_HEIGHT.tight,
     overflow: "hidden",
     textOverflow: "ellipsis",
-    maxWidth: "180px"
+    whiteSpace: "nowrap",
+    minWidth: 0
   },
   actions: {
     display: "flex",
@@ -1666,7 +1690,24 @@ var styles = {
     alignItems: "center",
     gap: SPACE.S2,
     minHeight: SIZE.control,
-    padding: `${SPACE.S2} 14px`,
+    padding: `${SPACE.S1} ${SPACE.S3}`,
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.primary,
+    backgroundColor: COLOR.white,
+    border: `1.5px solid ${COLOR.primary}`,
+    borderRadius: RADIUS.lg,
+    cursor: "pointer"
+  },
+  // Sibling of the DICOM button — same shape so the two read as a pair.
+  // Click hands off to the host's `onOpenCase` callback (role-aware
+  // routing lives on the host side).
+  openCaseButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: SPACE.S2,
+    minHeight: SIZE.control,
+    padding: `${SPACE.S1} ${SPACE.S3}`,
     fontSize: FONT_SIZE.sm,
     fontWeight: FONT_WEIGHT.semibold,
     color: COLOR.primary,
@@ -1675,10 +1716,8 @@ var styles = {
     borderRadius: RADIUS.lg,
     cursor: "pointer"
   },
-  // Channel-info button: people icon + participant count. Click opens the
-  // channel settings overlay (kept on the same handler as before so hosts
-  // don't have to re-wire — the affordance just looks like a "members"
-  // pill now instead of a gear).
+  // Channel-info button: people icon + participant count. Opens the
+  // channel settings overlay.
   settingsIconButton: {
     minHeight: SIZE.control,
     display: "inline-flex",
@@ -1821,7 +1860,6 @@ var styles3 = {
     display: "flex",
     alignItems: "center",
     gap: SPACE.S1,
-    marginTop: "2px",
     fontSize: FONT_SIZE.xs,
     opacity: 0.85
   },
@@ -2158,6 +2196,62 @@ function AlertIcon({ size = 14, color = "currentColor" }) {
     }
   );
 }
+function RoleAvatarIcon({
+  role,
+  size = 18,
+  color = "currentColor",
+  className
+}) {
+  const common = {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 1.9,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    className
+  };
+  switch (role) {
+    case "radiologist":
+      return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+        /* @__PURE__ */ jsx("path", { d: "M7.5 8.5h9" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "9.5", r: "4" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7.5", r: "1", fill: color, stroke: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 21v-1.5a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5V21" })
+      ] });
+    case "lab":
+      return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 21V9l9-6 9 6v12" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 11v6" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 14h6" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 21v-3h2v3" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 21h18" })
+      ] });
+    case "physician":
+      return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+        /* @__PURE__ */ jsx("path", { d: "M7 3v5a4 4 0 0 0 8 0V3" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 3h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 3h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 12v3a5 5 0 0 0 5 5h0a5 5 0 0 0 5-5v-2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "21", cy: "11", r: "2" })
+      ] });
+    case "admin":
+      return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 2v3" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 19v3" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 12H2" }),
+        /* @__PURE__ */ jsx("path", { d: "M22 12h-3" }),
+        /* @__PURE__ */ jsx("path", { d: "M5.6 5.6l2 2" }),
+        /* @__PURE__ */ jsx("path", { d: "M16.4 16.4l2 2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5.6 18.4l2-2" }),
+        /* @__PURE__ */ jsx("path", { d: "M16.4 7.6l2-2" })
+      ] });
+  }
+}
 function Spinner({ size = 16, color = COLOR.neutral500, thickness = 2 }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -2246,12 +2340,11 @@ function MessageBubble({
                   ...styles5.authorAvatar,
                   backgroundColor: roleColor(message.senderRole)
                 },
-                "aria-hidden": "true",
-                children: computeInitials(message.senderName)
+                "aria-label": ROLE_LABELS[message.senderRole] ?? message.senderRole,
+                children: /* @__PURE__ */ jsx(RoleAvatarIcon, { role: message.senderRole, size: 20, color: COLOR.white })
               }
             ),
-            /* @__PURE__ */ jsx("span", { style: styles5.authorName, children: message.senderName }),
-            /* @__PURE__ */ jsx(RoleBadge, { role: message.senderRole })
+            /* @__PURE__ */ jsx("span", { style: styles5.authorName, children: message.senderName })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -2326,9 +2419,6 @@ function MessageBubble({
     }
   );
 }
-function computeInitials(name) {
-  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("") || "?";
-}
 function roleColor(role) {
   switch (role) {
     case "radiologist":
@@ -2413,9 +2503,6 @@ function SystemBubble({ message }) {
     /* @__PURE__ */ jsx("span", { style: styles5.systemTime, children: formatTime(message.insertedAt) })
   ] }) });
 }
-function RoleBadge({ role }) {
-  return /* @__PURE__ */ jsx("span", { style: { ...styles5.roleBadge, backgroundColor: roleColor(role) }, children: ROLE_LABELS[role] ?? role });
-}
 function formatTime(iso) {
   try {
     return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
@@ -2480,7 +2567,7 @@ var styles5 = {
     minWidth: 0
   },
   bubble: {
-    padding: `${SPACE.S3} ${SPACE.S4}`,
+    padding: `${SPACE.S2} ${SPACE.S4}`,
     borderRadius: "18px",
     wordBreak: "break-word",
     border: "1px solid transparent"
@@ -2517,16 +2604,6 @@ var styles5 = {
     color: "#fff4d6",
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   },
-  roleBadge: {
-    fontSize: "10px",
-    fontWeight: FONT_WEIGHT.bold,
-    padding: "2px 7px",
-    borderRadius: RADIUS.sm,
-    textTransform: "uppercase",
-    letterSpacing: "0.06em",
-    color: COLOR.white,
-    flexShrink: 0
-  },
   textBody: {
     margin: 0,
     fontSize: FONT_SIZE.md,
@@ -2537,7 +2614,7 @@ var styles5 = {
     alignItems: "center",
     justifyContent: "flex-end",
     gap: SPACE.S2,
-    marginTop: SPACE.S2,
+    marginTop: SPACE.S1,
     fontSize: "11px",
     opacity: 0.85
   },
@@ -2990,9 +3067,6 @@ var styles6 = {
     alignItems: "center",
     gap: SPACE.S3,
     margin: `${SPACE.S4} 0 ${SPACE.S3}`,
-    position: "sticky",
-    top: SPACE.S1,
-    zIndex: Z_INDEX.sticky,
     pointerEvents: "none"
   },
   dayHr: {
@@ -3007,11 +3081,7 @@ var styles6 = {
     color: COLOR.neutral500,
     textTransform: "uppercase",
     letterSpacing: "0.06em",
-    // Subtle pill background so the label is readable when it overlays
-    // bubbles passing under it during sticky scroll. Without this the
-    // hairlines visually run through the text on tinted backgrounds.
     padding: `2px ${SPACE.S2}`,
-    backgroundColor: COLOR.white,
     borderRadius: RADIUS.sm
   },
   bubbleSlot: {
@@ -3309,7 +3379,7 @@ function MessageInput({
           style: styles8.textarea
         }
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         "button",
         {
           onClick: handleSendText,
@@ -3321,10 +3391,7 @@ function MessageInput({
             opacity: text.trim() ? 1 : 0.5
           },
           type: "button",
-          children: [
-            /* @__PURE__ */ jsx(SendIcon, { size: 20, color: COLOR.white }),
-            /* @__PURE__ */ jsx("span", { style: styles8.sendLabel, children: "Send" })
-          ]
+          children: /* @__PURE__ */ jsx(SendIcon, { size: 20, color: COLOR.white })
         }
       )
     ] })
@@ -3422,29 +3489,33 @@ var styles8 = {
     fontFamily: "inherit",
     transition: "background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease"
   },
-  // Pill-shaped send: icon + "Send" label. Always labelled (never icon-
-  // only) so the affordance is obvious to first-time users.
+  // Square icon-only send button. The arrow inside an obvious input
+  // context is affordance enough; the word "Send" used to sit next to
+  // it but added clutter without disambiguating anything.
   sendButton: {
     display: "inline-flex",
     alignItems: "center",
-    gap: "6px",
-    minWidth: "48px",
+    justifyContent: "center",
+    width: "48px",
     height: "48px",
-    padding: `0 ${SPACE.S4}`,
     backgroundColor: COLOR.primary,
     color: COLOR.white,
     border: "none",
     borderRadius: "14px",
     cursor: "pointer",
     flexShrink: 0,
-    fontFamily: "inherit",
-    fontSize: "15px",
-    fontWeight: FONT_WEIGHT.semibold,
     transition: "opacity 120ms ease, background-color 120ms ease"
-  },
-  sendLabel: {
-    lineHeight: 1
   }};
+var ROLE_AVATAR_BG = {
+  radiologist: "#4f46e5",
+  // indigo
+  lab: "#2563eb",
+  // brand blue
+  physician: "#0284c7",
+  // sky
+  admin: "#64748b"
+  // slate
+};
 function ParticipantsList({
   participants,
   currentUserId,
@@ -3454,7 +3525,17 @@ function ParticipantsList({
 }) {
   return /* @__PURE__ */ jsx("div", { className, style: styles9.list, children: participants.map((participant) => /* @__PURE__ */ jsxs("div", { style: styles9.item, children: [
     /* @__PURE__ */ jsxs("div", { style: styles9.avatar, children: [
-      participant.avatar ? /* @__PURE__ */ jsx("img", { src: participant.avatar, alt: "", style: styles9.avatarImg }) : /* @__PURE__ */ jsx("span", { style: styles9.avatarFallback, children: (participant.userName ?? "?").charAt(0).toUpperCase() }),
+      participant.avatar ? /* @__PURE__ */ jsx("img", { src: participant.avatar, alt: "", style: styles9.avatarImg }) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...styles9.avatarFallback,
+            backgroundColor: ROLE_AVATAR_BG[participant.userRole]
+          },
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(RoleAvatarIcon, { role: participant.userRole, size: 18, color: COLOR.white })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "span",
         {
@@ -3470,7 +3551,7 @@ function ParticipantsList({
         participant.userName ?? fallbackName(participant.userRole),
         participant.userId === currentUserId && /* @__PURE__ */ jsx("span", { style: styles9.youBadge, children: " (you)" })
       ] }),
-      /* @__PURE__ */ jsx(RoleBadge2, { role: participant.userRole })
+      /* @__PURE__ */ jsx(RoleBadge, { role: participant.userRole })
     ] }),
     isAdmin && participant.userId !== currentUserId && /* @__PURE__ */ jsx(
       "button",
@@ -3498,7 +3579,7 @@ function fallbackName(role) {
       return "User";
   }
 }
-function RoleBadge2({ role }) {
+function RoleBadge({ role }) {
   const colors = {
     radiologist: { bg: "#eef2ff", text: "#4f46e5" },
     // indigo
@@ -3540,13 +3621,10 @@ var styles9 = {
     width: "32px",
     height: "32px",
     borderRadius: RADIUS.full,
-    backgroundColor: COLOR.neutral200,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: FONT_SIZE.sm,
-    fontWeight: FONT_WEIGHT.semibold,
-    color: COLOR.neutral500
+    color: COLOR.white
   },
   statusDot: {
     position: "absolute",
@@ -4138,13 +4216,19 @@ function CollabPanel({
   showSeenBy = true,
   onBack,
   hidePatientName = false,
+  hideOpenCase = false,
   onConversationChange,
   themeMode = "light",
+  showSettings: controlledShowSettings,
+  onSettingsChange,
   className,
   style
 }) {
   const { config } = useCollab();
-  const [showSettings, setShowSettings] = useState(false);
+  const isSettingsControlled = controlledShowSettings !== void 0 && onSettingsChange !== void 0;
+  const [internalShowSettings, setInternalShowSettings] = useState(false);
+  const showSettings = isSettingsControlled ? controlledShowSettings : internalShowSettings;
+  const updateShowSettings = isSettingsControlled ? onSettingsChange : setInternalShowSettings;
   const [toast, setToast] = useState(null);
   const messageListRef = useRef(null);
   const {
@@ -4180,6 +4264,7 @@ function CollabPanel({
       config.onOpenDicom(patientData.studyId, patientData.storageId);
     }
   };
+  const handleOpenCase = !hideOpenCase && config.onOpenCase ? () => config.onOpenCase?.(patientData.orderId, patientData.displayOrderId) : void 0;
   const handleJumpToMessage = (messageId) => {
     messageListRef.current?.scrollToMessage(messageId);
   };
@@ -4246,7 +4331,7 @@ function CollabPanel({
         onRemoveUser: channelSettings.removeUser,
         onLeaveChannel: channelSettings.leaveChannel,
         onDeleteChannel: channelSettings.deleteChannel,
-        onClose: () => setShowSettings(false)
+        onClose: () => updateShowSettings(false)
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -4255,7 +4340,8 @@ function CollabPanel({
           patientData,
           participants,
           onOpenDicom: handleOpenDicom,
-          onOpenSettings: () => setShowSettings(true),
+          onOpenCase: handleOpenCase,
+          onOpenSettings: hidePatientName ? void 0 : () => updateShowSettings(true),
           onBack,
           hideName: hidePatientName,
           displayName: conversation?.name
@@ -4398,6 +4484,7 @@ function CollabPopup({
   );
   const [isDragging, setIsDragging] = useState(false);
   const [isMinimized, setIsMinimized] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const [loadedConversation, setLoadedConversation] = useState(null);
   const dragOffset = useRef({ x: 0, y: 0 });
   const containerRef = useRef(null);
@@ -4509,16 +4596,32 @@ function CollabPopup({
           ),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleCenter, children: [
             /* @__PURE__ */ jsx("h2", { id: titleId, style: styles13.patientName, children: patientData.patientName || titleText }),
-            (patientData.labName || patientData.displayOrderId) && /* @__PURE__ */ jsxs("div", { style: styles13.subRow, children: [
-              patientData.labName && /* @__PURE__ */ jsx("span", { children: patientData.labName }),
-              patientData.labName && patientData.displayOrderId && /* @__PURE__ */ jsx("span", { style: styles13.subDot, "aria-hidden": "true", children: "\xB7" }),
-              patientData.displayOrderId && /* @__PURE__ */ jsxs("span", { style: styles13.mono, children: [
-                "#",
-                patientData.displayOrderId.slice(-4)
-              ] })
-            ] })
+            (() => {
+              const parts = [];
+              if (patientData.patientAge) parts.push(String(patientData.patientAge));
+              if (patientData.patientSex) parts.push(String(patientData.patientSex));
+              if (patientData.studyType) parts.push(patientData.studyType);
+              if (patientData.bodyParts && patientData.bodyParts.length > 0) {
+                parts.push(patientData.bodyParts.join(", "));
+              }
+              return parts.length > 0 ? /* @__PURE__ */ jsx("div", { style: styles13.subRow, children: /* @__PURE__ */ jsx("span", { style: styles13.metaText, children: parts.join(" \xB7 ") }) }) : null;
+            })()
           ] }),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
+            loadedConversation && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowSettings(true),
+                style: styles13.titleSettingsPill,
+                "aria-label": `Open channel settings (${loadedConversation.participants.length} participants)`,
+                title: "Channel participants",
+                children: [
+                  /* @__PURE__ */ jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
+                  /* @__PURE__ */ jsx("span", { style: styles13.titleParticipantCount, children: loadedConversation.participants.length })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -4553,7 +4656,9 @@ function CollabPopup({
             patientData,
             participantIds,
             hidePatientName: true,
-            onConversationChange: setLoadedConversation
+            onConversationChange: setLoadedConversation,
+            showSettings,
+            onSettingsChange: setShowSettings
           }
         ) })
       ]
@@ -4605,19 +4710,17 @@ var styles13 = {
   subRow: {
     display: "flex",
     alignItems: "center",
-    gap: SPACE.S2,
     fontSize: FONT_SIZE.sm,
     color: COLOR.neutral500,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
-  subDot: {
-    color: COLOR.neutral400
-  },
-  mono: {
-    fontFamily: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-    fontVariantNumeric: "tabular-nums"
+  metaText: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    minWidth: 0
   },
   titleActions: {
     display: "flex",
@@ -4637,6 +4740,29 @@ var styles13 = {
     color: COLOR.neutral700,
     flexShrink: 0
   },
+  // People-icon + participant-count pill in the title-actions row.
+  // Matches the in-panel settings button's shape (icon + count) so a
+  // user moving between popup mode and standalone mode (CollabInbox
+  // compact) sees the same control language.
+  titleSettingsPill: {
+    height: "36px",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: SPACE.S2,
+    padding: `0 ${SPACE.S3}`,
+    backgroundColor: COLOR.neutral100,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.md,
+    color: COLOR.neutral600,
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  titleParticipantCount: {
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700,
+    fontVariantNumeric: "tabular-nums"
+  },
   panelWrapper: {
     flex: 1,
     overflow: "hidden"
@@ -5430,7 +5556,7 @@ function ConversationListItem({
   const studyType = item.patientSnapshot?.studyType;
   const patientId = item.patientSnapshot?.patientId;
   const showStudyRow = !!(studyType || patientId);
-  const initials = computeInitials2(item.patientSnapshot?.patientName || displayName);
+  const initials = computeInitials(item.patientSnapshot?.patientName || displayName);
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -5525,7 +5651,7 @@ function previewText(message) {
     }
   }
 }
-function computeInitials2(name) {
+function computeInitials(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("") || "?";
 }
 var styles15 = {