@proteos/ui 0.50.1 → 0.51.1

package/dist/index.cjs

@@ -610,7 +610,7 @@ function IconPicker({
   const [query, setQuery] = react.useState("");
   const [limit, setLimit] = react.useState(GRID_PAGE);
   const triggerRef = react.useRef(null);
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const selectedName = resolveLucideIconName(value);
   const SelectedIcon = selectedName ? lucideReact.icons[selectedName] : null;
   const matches2 = react.useMemo(() => {
@@ -655,7 +655,7 @@ function IconPicker({
         onClick: () => open(!isOpen),
         "data-invalid": isInvalid || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles3.box(),
+          styles4.box(),
           "flex shrink-0 items-center justify-center cursor-pointer",
           appearance === "cell" ? "size-[29px]" : COMPACT_SIZE[size],
           "disabled:cursor-not-allowed disabled:opacity-45"
@@ -676,8 +676,8 @@ function IconPicker({
         className: chunkMWAXK66H_cjs.cn(
           // box carries no padding by contract — content is what gives a
           // single-element control its interior (padding, font, text-size).
-          styles3.box(),
-          styles3.content(),
+          styles4.box(),
+          styles4.content(),
           "flex w-full items-center gap-2 text-left cursor-pointer",
           "disabled:cursor-not-allowed disabled:opacity-45"
         ),
@@ -809,9 +809,7 @@ var badgeStyles = tailwindVariants.tv({
   base: [
     "inline-flex items-center gap-1.5",
     "font-mono text-[11.5px] tracking-[-0.005em]",
-    "px-2.5 py-0.5 rounded-pill border",
-    // Leading dot
-    'before:content-[""] before:block before:size-1.5 before:rounded-full'
+    "px-2.5 py-0.5 border"
   ],
   variants: {
     variant: {
@@ -845,9 +843,18 @@ var badgeStyles = tailwindVariants.tv({
         "border-[color-mix(in_oklab,var(--badge-color)_35%,var(--color-rule))]",
         "bg-[color-mix(in_oklab,var(--badge-color)_12%,var(--color-surface))]"
       ]
+    },
+    shape: {
+      pill: "rounded-pill",
+      rounded: "rounded-chip"
+    },
+    // Leading dot — its color comes from the register's `before:bg-*`.
+    hasDot: {
+      true: 'before:content-[""] before:block before:size-1.5 before:rounded-full',
+      false: ""
     }
   },
-  defaultVariants: { variant: "default" }
+  defaultVariants: { variant: "default", shape: "pill", hasDot: true }
 });
 var ICON_TONE = {
   default: "text-ink-4",
@@ -858,16 +865,31 @@ var ICON_TONE = {
   danger: "text-danger",
   custom: "text-[var(--badge-color)]"
 };
-function Badge({ variant, color, icon, className, style, children, ...props }) {
+function Badge({
+  variant,
+  shape,
+  hasDot,
+  color,
+  icon,
+  className,
+  style,
+  children,
+  ...props
+}) {
   const Icon = icon ? resolveLucideIcon(icon) : null;
   const register2 = color ? "custom" : variant ?? "default";
   const mergedStyle = color ? { ...style, "--badge-color": color } : style;
+  const showDot = hasDot !== false && !Icon;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       ...props,
       style: mergedStyle,
-      className: chunkMWAXK66H_cjs.cn(badgeStyles({ variant: register2 }), Icon ? "before:hidden" : null, className),
+      className: chunkMWAXK66H_cjs.cn(
+        badgeStyles({ variant: register2, shape, hasDot }),
+        showDot ? null : "before:hidden",
+        className
+      ),
       children: [
         Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, className: chunkMWAXK66H_cjs.cn("size-3 shrink-0", ICON_TONE[register2]) }) : null,
         children
@@ -878,6 +900,8 @@ function Badge({ variant, color, icon, className, style, children, ...props }) {
 function badgeChrome(option) {
   return {
     ...option.variant ? { variant: option.variant } : {},
+    ...option.shape ? { shape: option.shape } : {},
+    ...option.hasDot !== void 0 ? { hasDot: option.hasDot } : {},
     ...option.color ? { color: option.color } : {},
     ...option.icon ? { icon: option.icon } : {}
   };
@@ -898,7 +922,7 @@ function BadgeMultiSelect({
   autoFocus = false,
   className
 }) {
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
   const [isOpen, setIsOpen] = react.useState(false);
@@ -938,7 +962,7 @@ function BadgeMultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles3.box(),
+          styles4.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -1024,13 +1048,11 @@ function BadgeMultiSelect({
 }
 function RemovableBadge({
   children,
-  variant,
-  color,
-  icon,
   onRemove,
-  isDisabled
+  isDisabled,
+  ...chrome
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { ...badgeChrome({ variant, color, icon }), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { ...badgeChrome(chrome), children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1384,7 +1406,7 @@ function ColorInput({
   }, [committed]);
   const isDraftInvalid = draft.trim() !== "" && normalizeHexColor(draft) === null;
   const invalid = isInvalid || isDraftInvalid;
-  const styles3 = fieldControlStyles({ size, invalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const edit = (next) => {
     setDraft(next);
@@ -1425,7 +1447,7 @@ function ColorInput({
           {
             "data-disabled": isDisabled || void 0,
             className: chunkMWAXK66H_cjs.cn(
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-2",
               size === "sm" ? "pl-2" : "pl-2.5",
               focusWithin
@@ -1472,7 +1494,7 @@ function ColorInput({
                   spellCheck: false,
                   autoComplete: "off",
                   className: chunkMWAXK66H_cjs.cn(
-                    styles3.content(),
+                    styles4.content(),
                     "min-w-0 flex-1 bg-transparent font-mono outline-none",
                     "pl-0",
                     fieldTextStyles[size]
@@ -1505,7 +1527,7 @@ function Combobox({
   allowsEmptyCollection = true,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.ComboBox,
@@ -1524,7 +1546,7 @@ function Combobox({
             className: chunkMWAXK66H_cjs.cn(
               // Box chrome on the wrapper; the inner <input> carries the padding
               // + font so the chevron button sits inside the same border + ring.
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-1 pr-2",
               focusWithin,
               inputWrapperClassName
@@ -1536,7 +1558,7 @@ function Combobox({
                   placeholder,
                   className: chunkMWAXK66H_cjs.cn(
                     "flex-1 min-w-0 bg-transparent outline-none",
-                    styles3.content(),
+                    styles4.content(),
                     inputClassName
                   )
                 }
@@ -1904,46 +1926,532 @@ function Command({ combo, target, className, children }) {
     discoveryActive ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        "aria-hidden": true,
-        className: "absolute -inset-2 rounded-md bg-[color-mix(in_oklab,var(--color-ink)_28%,transparent)] pointer-events-none transition-opacity z-40",
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-2.5 -left-2 pointer-events-none z-50", children: /* @__PURE__ */ jsxRuntime.jsx(CommandHint, { combo, tone: "prominent" }) })
+        "aria-hidden": true,
+        className: "absolute -inset-2 rounded-md bg-[color-mix(in_oklab,var(--color-ink)_28%,transparent)] pointer-events-none transition-opacity z-40",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-2.5 -left-2 pointer-events-none z-50", children: /* @__PURE__ */ jsxRuntime.jsx(CommandHint, { combo, tone: "prominent" }) })
+      }
+    ) : null
+  ] });
+}
+var stack = [];
+var listenerInstalled2 = false;
+function onWindowKeyDown2(event) {
+  if (event.key !== "Escape") return;
+  if (isEditableTarget(event.target)) return;
+  const top = stack[stack.length - 1];
+  if (!top) return;
+  top.handler(event);
+}
+function ensureListener2() {
+  if (listenerInstalled2) return;
+  if (typeof window === "undefined") return;
+  window.addEventListener("keydown", onWindowKeyDown2, { capture: true });
+  listenerInstalled2 = true;
+}
+function useEscapeKey(handler, options) {
+  const enabled = options?.enabled ?? true;
+  const handlerRef = react.useRef(handler);
+  react.useEffect(() => {
+    handlerRef.current = handler;
+  });
+  react.useEffect(() => {
+    if (!enabled) return void 0;
+    ensureListener2();
+    const entry = {
+      handler: (event) => handlerRef.current(event)
+    };
+    stack.push(entry);
+    return () => {
+      const idx = stack.lastIndexOf(entry);
+      if (idx >= 0) stack.splice(idx, 1);
+    };
+  }, [enabled]);
+}
+var conversationBriefCardStyles = tailwindVariants.tv({
+  slots: {
+    root: [
+      "flex items-center gap-2.5 rounded-md border border-accent/40 px-3 py-2",
+      "bg-[color-mix(in_oklab,var(--color-accent)_6%,var(--color-surface))]"
+    ],
+    icon: [
+      "grid size-8 shrink-0 place-items-center rounded-full text-accent",
+      "bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]"
+    ],
+    body: "min-w-0 flex-1",
+    eyebrow: "font-mono text-[10px] uppercase tracking-[0.08em] text-accent",
+    title: "truncate text-[13px] font-medium text-ink",
+    summary: "truncate text-[12px] text-ink-3",
+    action: [
+      "shrink-0 cursor-pointer rounded-sm border border-accent/50 px-2.5 py-1",
+      "font-mono text-[11px] text-accent outline-none",
+      "hover:bg-[color-mix(in_oklab,var(--color-accent)_12%,transparent)]",
+      "focus-visible:shadow-[var(--shadow-focus)]",
+      "disabled:cursor-default disabled:opacity-50"
+    ],
+    outcome: "shrink-0 font-mono text-[11px] text-ink-3"
+  }
+});
+var styles = conversationBriefCardStyles();
+var CONVERSATION_BRIEF_OUTCOME_LABEL = {
+  used: "Call held",
+  discarded: "Discarded"
+};
+function ConversationBriefCard({
+  title,
+  summary,
+  eyebrow = "Conversation brief \u2014 prepared",
+  openLabel = "Open Brief",
+  outcome,
+  onOpen,
+  isOpenDisabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon(), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { className: "size-4", "aria-hidden": true }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.eyebrow(), children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.title(), children: title }),
+      summary ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.summary(), children: summary }) : null
+    ] }),
+    outcome ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.outcome(), children: CONVERSATION_BRIEF_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Button,
+      {
+        onPress: onOpen ?? (() => {
+        }),
+        isDisabled: isOpenDisabled,
+        className: styles.action(),
+        children: openLabel
+      }
+    )
+  ] });
+}
+function Select({
+  label,
+  description,
+  errorMessage,
+  placeholder = "Select\u2026",
+  options,
+  renderItem,
+  size,
+  appearance,
+  triggerClassName,
+  popoverClassName,
+  className,
+  ...props
+}) {
+  const styles4 = fieldControlStyles({ size, appearance });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Select,
+    {
+      ...props,
+      className: (renderProps) => chunkMWAXK66H_cjs.cn(
+        "grid grid-cols-1 gap-1.5",
+        typeof className === "function" ? className(renderProps) : className
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.Button,
+          {
+            className: chunkMWAXK66H_cjs.cn(
+              styles4.box(),
+              styles4.content(),
+              "flex items-center justify-between gap-3 text-left cursor-pointer",
+              triggerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, { className: "truncate", children: ({ defaultChildren, isPlaceholder }) => isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-4", children: placeholder }) : defaultChildren }),
+              /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {})
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
+        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: fieldErrorStyles, children: errorMessage }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.Popover,
+          {
+            offset: 6,
+            className: chunkMWAXK66H_cjs.cn(
+              // Match the trigger width exactly (RAC exposes --trigger-width on
+              // the Popover when anchored to a Select button).
+              "w-[var(--trigger-width)]",
+              // Float above modals + full-screen editors (e.g. agent-studio's
+              // .as-editor z-1000 / a raised modal overlay), matching Menu's z-[1200].
+              "z-[1300]",
+              "rounded-md border border-rule bg-surface p-1",
+              "shadow-[var(--shadow-raised)]",
+              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
+              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1",
+              popoverClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.ListBox, { className: "outline-none max-h-72 overflow-auto", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                SelectItem,
+                {
+                  id: option.id,
+                  ...option.textValue ? { textValue: option.textValue } : {},
+                  ...option.isDisabled ? { isDisabled: true } : {},
+                  children: renderItem ? renderItem(option) : option.label
+                },
+                option.id
+              )) }),
+              options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("px-3 py-2", fieldHintStyles), children: placeholder }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectItem(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ListBoxItem,
+    {
+      ...props,
+      className: chunkMWAXK66H_cjs.cn(
+        "flex items-center justify-between gap-3",
+        "rounded-[6px] px-3 py-2 text-[14px] text-ink-2",
+        "cursor-pointer outline-none select-none",
+        "data-[hovered]:bg-surface-2 data-[hovered]:text-ink",
+        "data-[focused]:bg-surface-2 data-[focused]:text-ink",
+        "data-[selected]:bg-surface-3 data-[selected]:text-ink",
+        "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
+      )
+    }
+  );
+}
+
+// src/components/conversation-brief-card/types.ts
+function conversationBriefOutcomeFor(status) {
+  if (status === "used" || status === "discarded") return status;
+  return null;
+}
+function isDialableConversationBrief(brief) {
+  return !brief.channel || brief.channel === "phone";
+}
+function contactPhoneNumbers(contact) {
+  const numbers = [];
+  for (const address of contact?.addresses ?? []) {
+    if (address.kind !== "phone" || !address.value) continue;
+    if (!numbers.includes(address.value)) numbers.push(address.value);
+  }
+  return numbers;
+}
+function ConversationBriefPreview({
+  brief,
+  contacts,
+  onCall,
+  isCallDisabled = false,
+  callDisabledReason,
+  controls,
+  isCallButtonHidden = false,
+  onSelectionChange,
+  callLabel = "Call",
+  className,
+  contentClassName,
+  renderContent,
+  onEdit,
+  editor
+}) {
+  const [pickedContactId, setPickedContactId] = react.useState("");
+  const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null;
+  const numbers = react.useMemo(() => contactPhoneNumbers(contact), [contact]);
+  const [pickedNumber, setPickedNumber] = react.useState("");
+  const phoneNumber = numbers.includes(pickedNumber) ? pickedNumber : numbers[0] || "";
+  const isOpen = brief.status === "prepared";
+  const names = contacts.map((entry) => entry.name).filter(Boolean).join(", ");
+  const onSelectionChangeRef = react.useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  react.useEffect(() => {
+    onSelectionChangeRef.current?.(contact, phoneNumber);
+  }, [contact, phoneNumber]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[14px] font-semibold text-ink", children: brief.subject || names || "Prepared conversation" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10.5px] text-ink-4", children: [
+        brief.subject ? names : "",
+        brief.channel ? `Channel ${brief.channel}` : "Any channel",
+        brief.type_key ? `Type ${brief.type_key}` : "",
+        brief.status === "prepared" ? "Prepared" : brief.status === "used" ? "Call held" : "Discarded"
+      ].filter(Boolean).join(" \xB7 ") })
+    ] }),
+    editor ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/brief-content relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: chunkMWAXK66H_cjs.cn(
+            "rounded-md border border-rule-2 bg-surface-2/60 px-3 py-2.5",
+            "text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]",
+            renderContent ? null : "whitespace-pre-wrap",
+            contentClassName
+          ),
+          children: renderContent ? renderContent(brief.content) : brief.content
+        }
+      ),
+      onEdit ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Button,
+        {
+          "aria-label": "Edit brief",
+          onPress: onEdit,
+          className: chunkMWAXK66H_cjs.cn(
+            "absolute right-1.5 top-1.5 inline-flex size-7 cursor-pointer items-center justify-center",
+            "rounded-md bg-surface/80 text-ink-3 outline-none transition-opacity",
+            "opacity-0 group-hover/brief-content:opacity-100 focus-visible:opacity-100",
+            "data-[hovered]:bg-surface-3 data-[hovered]:text-ink",
+            "focus-visible:shadow-[var(--shadow-focus)]"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "size-3.5", "aria-hidden": true })
+        }
+      ) : null
+    ] }),
+    onCall ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 border-t border-rule-2 pt-3", children: [
+      contacts.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+        Select,
+        {
+          "aria-label": "Who to call",
+          selectedKey: contact?.id ?? "",
+          onSelectionChange: (key) => {
+            setPickedContactId(String(key));
+            setPickedNumber("");
+          },
+          options: contacts.map((entry) => ({ id: entry.id, label: entry.name || entry.id }))
+        }
+      ) : null,
+      numbers.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+        Select,
+        {
+          "aria-label": "Number to call",
+          selectedKey: phoneNumber,
+          onSelectionChange: (key) => setPickedNumber(String(key)),
+          options: numbers.map((number) => ({ id: number, label: number }))
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[12px] text-ink-3", children: phoneNumber || (contact ? "This contact has no phone number on file." : "No contact to call.") }),
+      controls,
+      callDisabledReason ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-warning", children: callDisabledReason }) : null,
+      isCallButtonHidden ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        chunkMWAXK66H_cjs.Button,
+        {
+          isDisabled: isCallDisabled || !isOpen || phoneNumber === "" || !contact,
+          onPress: () => contact && onCall(contact, phoneNumber),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { className: "size-3.5", "aria-hidden": true }),
+            callLabel
+          ]
+        }
+      ) })
+    ] }) : null
+  ] });
+}
+function Modal(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DialogTrigger, { ...props });
+}
+function ModalContent({
+  children,
+  className,
+  modalClassName,
+  isDismissable = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ModalOverlay,
+    {
+      isDismissable,
+      ...props,
+      className: (renderProps) => chunkMWAXK66H_cjs.cn(
+        "fixed inset-0 z-50 flex items-center justify-center p-4",
+        // Warm ink scrim — stays in the Proteos palette (no pure black).
+        "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
+        "entering:animate-in entering:fade-in-0 entering:duration-150",
+        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        typeof className === "function" ? className(renderProps) : className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Modal,
+        {
+          className: chunkMWAXK66H_cjs.cn(
+            "w-full max-w-lg",
+            // Cap the panel at the viewport (minus the overlay's p-4) and lay it
+            // out as a column so a tall body scrolls instead of overflowing the
+            // screen. Short modals are unaffected — height still tracks content.
+            "flex flex-col max-h-[calc(100dvh-2rem)]",
+            "bg-surface border border-rule rounded-lg",
+            "shadow-[var(--shadow-float)]",
+            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
+            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
+            modalClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
+        }
+      )
+    }
+  );
+}
+function ModalHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: chunkMWAXK66H_cjs.cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Heading,
+    {
+      slot: "title",
+      ...props,
+      className: chunkMWAXK66H_cjs.cn(
+        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
+        className
+      )
+    }
+  );
+}
+function ModalDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, className: chunkMWAXK66H_cjs.cn("text-[14px] leading-[1.55] text-ink-3", className) });
+}
+function ModalBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: chunkMWAXK66H_cjs.cn(
+        // The scroll region: caps at the panel's spare height and scrolls when
+        // the content is taller, leaving header + footer pinned.
+        "min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3 text-[14px] text-ink-2",
+        className
+      )
+    }
+  );
+}
+function ModalFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: chunkMWAXK66H_cjs.cn("shrink-0 flex justify-end items-center gap-2", "px-5 pt-3 pb-5", className)
+    }
+  );
+}
+function ConversationBriefReview({
+  conversationBriefId,
+  client,
+  onOpenCall,
+  onCall,
+  isCallDisabled = false,
+  callDisabledReason,
+  onOutcome,
+  onLoadError,
+  modalTitle = "Prepared conversation",
+  modalClassName = "max-w-2xl",
+  overlayClassName,
+  openLabel,
+  className,
+  renderContent
+}) {
+  const [brief, setBrief] = react.useState(null);
+  const [contacts, setContacts] = react.useState([]);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [outcome, setOutcome] = react.useState(null);
+  const onOutcomeRef = react.useRef(onOutcome);
+  onOutcomeRef.current = onOutcome;
+  const onLoadErrorRef = react.useRef(onLoadError);
+  onLoadErrorRef.current = onLoadError;
+  const hasSettledRef = react.useRef(false);
+  const settle = react.useCallback((next, settled) => {
+    setOutcome(next);
+    setIsOpen(false);
+    if (hasSettledRef.current) return;
+    hasSettledRef.current = true;
+    onOutcomeRef.current?.(next, settled);
+  }, []);
+  react.useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const loaded = await client.getConversationBrief(conversationBriefId);
+        if (cancelled) return;
+        setBrief(loaded);
+        const terminal = conversationBriefOutcomeFor(loaded.status);
+        if (terminal) settle(terminal, loaded);
+        const people = await Promise.all(
+          loaded.contact_ids.map((contactId) => client.getContact(contactId).catch(() => null))
+        );
+        if (!cancelled) setContacts(people.filter((person) => person !== null));
+      } catch (error) {
+        if (cancelled) return;
+        onLoadErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, conversationBriefId, settle]);
+  const open = () => {
+    if (onOpenCall) {
+      onOpenCall(conversationBriefId);
+      return;
+    }
+    setIsOpen(true);
+  };
+  if (!brief) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConversationBriefCard,
+      {
+        title: brief.subject || namesOf(contacts) || "Prepared conversation",
+        summary: summaryFor(brief, contacts),
+        outcome,
+        onOpen: open,
+        ...openLabel !== void 0 ? { openLabel } : {},
+        ...className !== void 0 ? { className } : {}
+      }
+    ),
+    onOpenCall ? null : /* @__PURE__ */ jsxRuntime.jsxs(
+      ModalContent,
+      {
+        isOpen,
+        onOpenChange: setIsOpen,
+        modalClassName,
+        ...overlayClassName !== void 0 ? { className: overlayClassName } : {},
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: modalTitle }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ModalBody, { className: "min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ConversationBriefPreview,
+            {
+              brief,
+              contacts,
+              contentClassName: "max-h-[50dvh]",
+              isCallDisabled,
+              ...callDisabledReason !== void 0 ? { callDisabledReason } : {},
+              ...renderContent !== void 0 ? { renderContent } : {},
+              ...onCall && isDialableConversationBrief(brief) ? {
+                onCall: (contact, phoneNumber) => {
+                  setIsOpen(false);
+                  onCall(brief, contact, phoneNumber);
+                }
+              } : {}
+            }
+          ) })
+        ]
       }
-    ) : null
+    )
   ] });
 }
-var stack = [];
-var listenerInstalled2 = false;
-function onWindowKeyDown2(event) {
-  if (event.key !== "Escape") return;
-  if (isEditableTarget(event.target)) return;
-  const top = stack[stack.length - 1];
-  if (!top) return;
-  top.handler(event);
+function namesOf(contacts) {
+  return contacts.map((contact) => contact.name).filter(Boolean).join(", ");
 }
-function ensureListener2() {
-  if (listenerInstalled2) return;
-  if (typeof window === "undefined") return;
-  window.addEventListener("keydown", onWindowKeyDown2, { capture: true });
-  listenerInstalled2 = true;
+function summaryFor(brief, contacts) {
+  const firstLine = brief.content.split("\n").find((line) => line.trim() !== "")?.trim() ?? "";
+  return [
+    brief.subject ? namesOf(contacts) : "",
+    brief.channel ?? "",
+    brief.type_key ?? "",
+    firstLine
+  ].filter(Boolean).join(" \xB7 ");
 }
-function useEscapeKey(handler, options) {
-  const enabled = options?.enabled ?? true;
-  const handlerRef = react.useRef(handler);
-  react.useEffect(() => {
-    handlerRef.current = handler;
-  });
-  react.useEffect(() => {
-    if (!enabled) return void 0;
-    ensureListener2();
-    const entry = {
-      handler: (event) => handlerRef.current(event)
-    };
-    stack.push(entry);
-    return () => {
-      const idx = stack.lastIndexOf(entry);
-      if (idx >= 0) stack.splice(idx, 1);
-    };
-  }, [enabled]);
+
+// src/components/conversation-brief-card/create-conversation-brief-client.ts
+function createConversationBriefClient(conversation) {
+  return {
+    getConversationBrief: (conversationBriefId) => conversation.conversationBriefs.get(conversationBriefId),
+    getContact: (contactId) => conversation.contacts.get(contactId)
+  };
 }
 function CurrencyInput({
   value,
@@ -1976,16 +2484,16 @@ function CurrencyInput({
     onChange({ amount: nextAmount, currency_code: nextCode });
   };
   const selectedSymbol = currencyOptions.find((option) => option.code === code)?.symbol ?? code;
-  const styles3 = fieldControlStyles({ size, appearance, ...isInvalid ? { invalid: true } : {} });
+  const styles4 = fieldControlStyles({ size, appearance, ...isInvalid ? { invalid: true } : {} });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles3.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles4.box(), "flex items-center gap-1 pr-1", focusWithin), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           className: chunkMWAXK66H_cjs.cn(
             "min-w-0 flex-1 bg-transparent text-ink outline-none tabular-nums",
-            styles3.content(),
+            styles4.content(),
             // Sit a touch lower than a standard field by trimming the vertical
             // padding (cell mode keeps the fixed 29px row-editor height).
             appearance === "cell" ? "" : size === "sm" ? "py-1" : "py-1.5"
@@ -2651,7 +3159,9 @@ function DataTable({
   selectionMode = "none",
   selectedIds,
   onSelectionChange,
-  columnBorders = false
+  columnBorders = false,
+  groupBy,
+  groupHeaderHeight
 }) {
   const rows = react.useMemo(() => {
     const pages = query.data?.pages;
@@ -2770,6 +3280,24 @@ function DataTable({
   });
   const tableRows = table.getRowModel().rows;
   const tableRowCount = tableRows.length;
+  const listItems = react.useMemo(() => {
+    if (!groupBy) {
+      return tableRows.map((row, dataIndex) => ({ kind: "row", row, dataIndex }));
+    }
+    const items = [];
+    let currentGroupId = null;
+    tableRows.forEach((row, dataIndex) => {
+      const group = groupBy(row.original);
+      if (group && group.id !== currentGroupId) {
+        currentGroupId = group.id;
+        items.push({ kind: "group", id: group.id, label: group.label });
+      } else if (!group) {
+        currentGroupId = null;
+      }
+      items.push({ kind: "row", row, dataIndex });
+    });
+    return items;
+  }, [tableRows, groupBy]);
   const scrollerRef = react.useRef(null);
   react.useEffect(() => {
     scrollerRef.current?.scrollTo({ top: 0 });
@@ -2780,10 +3308,11 @@ function DataTable({
     const top = listRef.current?.offsetTop ?? 0;
     setListOffset((prev) => prev === top ? prev : top);
   });
+  const headingHeight = groupHeaderHeight ?? rowHeight;
   const virtualizer = reactVirtual.useVirtualizer({
-    count: tableRowCount,
+    count: listItems.length,
     getScrollElement: () => scrollerRef.current,
-    estimateSize: () => rowHeight,
+    estimateSize: (index) => listItems[index]?.kind === "group" ? headingHeight : rowHeight,
     overscan,
     scrollMargin: listOffset
   });
@@ -2890,8 +3419,8 @@ function DataTable({
               role: "presentation",
               style: { height: totalSize, position: "relative", width: "100%" },
               children: virtualItems.map((vRow) => {
-                const row = tableRows[vRow.index];
-                if (!row) return null;
+                const item = listItems[vRow.index];
+                if (!item) return null;
                 const rowStyle = {
                   // Items' `start` includes the virtualizer's scrollMargin
                   // (the list's offset below the sticky header); subtract
@@ -2899,18 +3428,21 @@ function DataTable({
                   transform: `translateY(${vRow.start - listOffset}px)`,
                   height: vRow.size
                 };
+                if (item.kind === "group") {
+                  return /* @__PURE__ */ jsxRuntime.jsx(GroupHeaderRow, { style: rowStyle, children: item.label }, `group:${item.id}`);
+                }
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   DataRow,
                   {
-                    row,
-                    index: vRow.index,
+                    row: item.row,
+                    index: item.dataIndex,
                     zebra,
                     onRowClick,
                     style: rowStyle,
                     columnBorders,
                     ...rowWrapper ? { rowWrapper } : {}
                   },
-                  row.id
+                  item.row.id
                 );
               })
             }
@@ -2924,6 +3456,20 @@ function DataTable({
     }
   );
 }
+function GroupHeaderRow({ style, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableRow,
+    {
+      absolute: true,
+      style,
+      className: chunkMWAXK66H_cjs.cn(
+        "bg-surface-2 border-b border-rule",
+        "font-mono text-[11px] uppercase tracking-[0.06em] text-ink-3"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "gap-2 text-inherit", children })
+    }
+  );
+}
 function DataRow({
   row,
   index,
@@ -3156,7 +3702,7 @@ function DatePicker({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.DatePicker,
@@ -3174,7 +3720,7 @@ function DatePicker({
             className: chunkMWAXK66H_cjs.cn(
               // Box chrome on the wrapper; the DateInput inside carries padding +
               // font so the calendar trigger sits inside the same border + ring.
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -3184,7 +3730,7 @@ function DatePicker({
                 {
                   className: chunkMWAXK66H_cjs.cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles3.content(),
+                    styles4.content(),
                     // Tabular alignment for date segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -3306,7 +3852,7 @@ function DateTimePicker({
   shouldCloseOnSelect = false,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const timeGranularity = granularity === "day" ? "minute" : granularity;
   const { hourCycle } = props;
@@ -3329,7 +3875,7 @@ function DateTimePicker({
             className: chunkMWAXK66H_cjs.cn(
               // Box chrome on the wrapper; the DateInput inside carries padding +
               // font so the calendar trigger sits inside the same border + ring.
-              styles3.box(),
+              styles4.box(),
               "flex items-center gap-1 pr-1",
               focusWithin
             ),
@@ -3339,7 +3885,7 @@ function DateTimePicker({
                 {
                   className: chunkMWAXK66H_cjs.cn(
                     "flex-1 flex items-center min-w-0 text-ink",
-                    styles3.content(),
+                    styles4.content(),
                     // Tabular alignment for date/time segments — overrides content's
                     // font-sans on purpose.
                     "font-mono"
@@ -3423,7 +3969,7 @@ var draftMessageCardStyles = tailwindVariants.tv({
     outcome: "shrink-0 font-mono text-[11px] text-ink-3"
   }
 });
-var styles = draftMessageCardStyles();
+var styles2 = draftMessageCardStyles();
 var DRAFT_OUTCOME_LABEL = {
   sent: "Sent",
   rejected: "Rejected",
@@ -3440,23 +3986,23 @@ function DraftMessageCard({
   isPreviewDisabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles.root(), className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon(), children: /* @__PURE__ */ jsxRuntime.jsx(ChannelIcon, { channel }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.eyebrow(), children: eyebrow }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.title(), children: title }),
-      recipients && recipients.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles.recipients(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.icon(), children: /* @__PURE__ */ jsxRuntime.jsx(ChannelIcon, { channel }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.body(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.eyebrow(), children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.title(), children: title }),
+      recipients && recipients.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles2.recipients(), children: [
         "To ",
         recipients.join(", ")
       ] }) : null
     ] }),
-    outcome ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.outcome(), children: DRAFT_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    outcome ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.outcome(), children: DRAFT_OUTCOME_LABEL[outcome] }) : /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Button,
       {
         onPress: onPreview ?? (() => {
         }),
         isDisabled: isPreviewDisabled,
-        className: styles.action(),
+        className: styles2.action(),
         children: previewLabel
       }
     )
@@ -3531,7 +4077,7 @@ function MultiSelect({
   appearance,
   className
 }) {
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
   const [isOpen, setIsOpen] = react.useState(false);
@@ -3578,7 +4124,7 @@ function MultiSelect({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles3.box(),
+          styles4.box(),
           "flex flex-wrap items-center gap-1.5 cursor-pointer",
           minHeight,
           fieldChipPadding[size],
@@ -3814,101 +4360,6 @@ function RecipientSelect({
     }
   );
 }
-function Select({
-  label,
-  description,
-  errorMessage,
-  placeholder = "Select\u2026",
-  options,
-  renderItem,
-  size,
-  appearance,
-  triggerClassName,
-  popoverClassName,
-  className,
-  ...props
-}) {
-  const styles3 = fieldControlStyles({ size, appearance });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactAriaComponents.Select,
-    {
-      ...props,
-      className: (renderProps) => chunkMWAXK66H_cjs.cn(
-        "grid grid-cols-1 gap-1.5",
-        typeof className === "function" ? className(renderProps) : className
-      ),
-      children: [
-        label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          reactAriaComponents.Button,
-          {
-            className: chunkMWAXK66H_cjs.cn(
-              styles3.box(),
-              styles3.content(),
-              "flex items-center justify-between gap-3 text-left cursor-pointer",
-              triggerClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, { className: "truncate", children: ({ defaultChildren, isPlaceholder }) => isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-4", children: placeholder }) : defaultChildren }),
-              /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {})
-            ]
-          }
-        ),
-        description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
-        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: fieldErrorStyles, children: errorMessage }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          reactAriaComponents.Popover,
-          {
-            offset: 6,
-            className: chunkMWAXK66H_cjs.cn(
-              // Match the trigger width exactly (RAC exposes --trigger-width on
-              // the Popover when anchored to a Select button).
-              "w-[var(--trigger-width)]",
-              // Float above modals + full-screen editors (e.g. agent-studio's
-              // .as-editor z-1000 / a raised modal overlay), matching Menu's z-[1200].
-              "z-[1300]",
-              "rounded-md border border-rule bg-surface p-1",
-              "shadow-[var(--shadow-raised)]",
-              "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
-              "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1",
-              popoverClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.ListBox, { className: "outline-none max-h-72 overflow-auto", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-                SelectItem,
-                {
-                  id: option.id,
-                  ...option.textValue ? { textValue: option.textValue } : {},
-                  ...option.isDisabled ? { isDisabled: true } : {},
-                  children: renderItem ? renderItem(option) : option.label
-                },
-                option.id
-              )) }),
-              options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("px-3 py-2", fieldHintStyles), children: placeholder }) : null
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function SelectItem(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ListBoxItem,
-    {
-      ...props,
-      className: chunkMWAXK66H_cjs.cn(
-        "flex items-center justify-between gap-3",
-        "rounded-[6px] px-3 py-2 text-[14px] text-ink-2",
-        "cursor-pointer outline-none select-none",
-        "data-[hovered]:bg-surface-2 data-[hovered]:text-ink",
-        "data-[focused]:bg-surface-2 data-[focused]:text-ink",
-        "data-[selected]:bg-surface-3 data-[selected]:text-ink",
-        "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
-      )
-    }
-  );
-}
 var MAX_COMPOSER_ATTACHMENT_BYTES = 25 * 1024 * 1024;
 var messageComposerStyles = tailwindVariants.tv({
   base: [
@@ -4275,7 +4726,7 @@ var draftMessageComposerStyles = tailwindVariants.tv({
     error: "px-[18px] font-mono text-[11px] text-danger"
   }
 });
-var styles2 = draftMessageComposerStyles();
+var styles3 = draftMessageComposerStyles();
 function sendRecipientsFromMessage(message, role) {
   return (message.recipients ?? []).filter((recipient) => recipient.role === role && !!recipient.external_id).map((recipient) => ({
     kind: "contact-address",
@@ -4491,10 +4942,10 @@ function DraftMessageComposer({
     [message?.attachments]
   );
   if (phase === "loading") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.terminal(), children: "Loading draft\u2026" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles3.root(), className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles3.terminal(), children: "Loading draft\u2026" }) });
   }
   if (phase === "load-error") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles2.terminal(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles3.root(), className), children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles3.terminal(), children: [
       loadError ?? "Loading the draft failed.",
       " ",
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4509,12 +4960,12 @@ function DraftMessageComposer({
   }
   if (phase === "terminal" || !message) {
     const line = terminalKind === "sent" ? "This draft was sent." : terminalKind === "rejected" ? "This draft was rejected." : terminalKind === "failed" ? `Sending failed${message?.error ? ` \u2014 ${message.error}` : ""}.` : "This message is not a reviewable draft.";
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.terminal(), children: line }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn(styles3.root(), className), "data-draft-terminal": terminalKind, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles3.terminal(), children: line }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles2.root(), className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.header(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.badge(), children: "Draft \xB7 awaiting review" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.sender(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles3.root(), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.header(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.badge(), children: "Draft \xB7 awaiting review" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles3.sender(), children: [
         "from ",
         message.sender.name
       ] })
@@ -4545,11 +4996,11 @@ function DraftMessageComposer({
         showSendButton: showActions
       }
     ),
-    actionError ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles2.error(), children: [
+    actionError ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles3.error(), children: [
       actionError,
       " \u2014 your edits are kept."
     ] }) : null,
-    showActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.actions(), children: [
+    showActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.actions(), children: [
       isConfirmingReject ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12.5px] text-ink-3", children: "Reject draft?" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4586,92 +5037,6 @@ function DraftMessageComposer({
     ] }) : null
   ] });
 }
-function Modal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DialogTrigger, { ...props });
-}
-function ModalContent({
-  children,
-  className,
-  modalClassName,
-  isDismissable = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ModalOverlay,
-    {
-      isDismissable,
-      ...props,
-      className: (renderProps) => chunkMWAXK66H_cjs.cn(
-        "fixed inset-0 z-50 flex items-center justify-center p-4",
-        // Warm ink scrim — stays in the Proteos palette (no pure black).
-        "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
-        "entering:animate-in entering:fade-in-0 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
-        typeof className === "function" ? className(renderProps) : className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactAriaComponents.Modal,
-        {
-          className: chunkMWAXK66H_cjs.cn(
-            "w-full max-w-lg",
-            // Cap the panel at the viewport (minus the overlay's p-4) and lay it
-            // out as a column so a tall body scrolls instead of overflowing the
-            // screen. Short modals are unaffected — height still tracks content.
-            "flex flex-col max-h-[calc(100dvh-2rem)]",
-            "bg-surface border border-rule rounded-lg",
-            "shadow-[var(--shadow-float)]",
-            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
-            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
-            modalClassName
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
-        }
-      )
-    }
-  );
-}
-function ModalHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: chunkMWAXK66H_cjs.cn("shrink-0 px-5 pt-5 pb-3 flex flex-col gap-1.5", className) });
-}
-function ModalTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Heading,
-    {
-      slot: "title",
-      ...props,
-      className: chunkMWAXK66H_cjs.cn(
-        "font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink",
-        className
-      )
-    }
-  );
-}
-function ModalDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, className: chunkMWAXK66H_cjs.cn("text-[14px] leading-[1.55] text-ink-3", className) });
-}
-function ModalBody({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      className: chunkMWAXK66H_cjs.cn(
-        // The scroll region: caps at the panel's spare height and scrolls when
-        // the content is taller, leaving header + footer pinned.
-        "min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3 text-[14px] text-ink-2",
-        className
-      )
-    }
-  );
-}
-function ModalFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      className: chunkMWAXK66H_cjs.cn("shrink-0 flex justify-end items-center gap-2", "px-5 pt-3 pb-5", className)
-    }
-  );
-}
 function DraftMessageReview({
   messageId,
   client,
@@ -4817,12 +5182,12 @@ function EmptyState({
   size,
   className
 }) {
-  const styles3 = emptyStateStyles({ size });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles3.root(), className), children: [
-    icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.art(), children: icon }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.title(), children: title }),
-    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.description(), children: description }) : null,
-    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.actions(), children: action }) : null
+  const styles4 = emptyStateStyles({ size });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn(styles4.root(), className), children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.art(), children: icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.title(), children: title }),
+    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.description(), children: description }) : null,
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.actions(), children: action }) : null
   ] });
 }
 function ErrorAnimation({ className }) {
@@ -5063,7 +5428,7 @@ function Input({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance, hasFocusRing });
+  const styles4 = fieldControlStyles({ size, appearance, hasFocusRing });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.TextField,
     {
@@ -5079,7 +5444,7 @@ function Input({
           {
             ...inputProps,
             placeholder: placeholder ?? "",
-            className: chunkMWAXK66H_cjs.cn(styles3.box(), styles3.content(), inputClassName)
+            className: chunkMWAXK66H_cjs.cn(styles4.box(), styles4.content(), inputClassName)
           }
         ),
         description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
@@ -5589,6 +5954,8 @@ function ChipItem({
       Badge,
       {
         variant: option?.variant,
+        shape: "rounded",
+        hasDot: false,
         ...option?.color ? { color: option.color } : {},
         ...option?.icon ? { icon: option.icon } : {},
         children: option?.label ?? value
@@ -5665,7 +6032,7 @@ function SegmentedControl({
   orientation = "horizontal",
   ...props
 }) {
-  const styles3 = segmentedControlStyles({ size });
+  const styles4 = segmentedControlStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.RadioGroup,
     {
@@ -5673,14 +6040,14 @@ function SegmentedControl({
       orientation,
       value: String(value),
       onChange: (next) => onChange(next),
-      className: chunkMWAXK66H_cjs.cn(styles3.group(), className),
+      className: chunkMWAXK66H_cjs.cn(styles4.group(), className),
       children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
         reactAriaComponents.Radio,
         {
           value: String(option.id),
           ...option.isDisabled ? { isDisabled: true } : {},
           ...autoFocus && option.id === value ? { autoFocus: true } : {},
-          className: styles3.segment(),
+          className: styles4.segment(),
           children: option.label
         },
         String(option.id)
@@ -5703,7 +6070,7 @@ function TagInput({
   autoFocus = false,
   className
 }) {
-  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
   const inputRef = react.useRef(null);
@@ -5744,7 +6111,7 @@ function TagInput({
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.cn(
-          styles3.box(),
+          styles4.box(),
           "flex flex-wrap items-center gap-1",
           minHeight,
           fieldChipPadding[size],
@@ -7494,45 +7861,45 @@ var tabsStyles = tailwindVariants.tv({
   defaultVariants: { size: "md" }
 });
 function Root({ size, className, children, ...props }) {
-  const styles3 = tabsStyles({ size });
+  const styles4 = tabsStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Tabs,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles3.root(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles4.root(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function List({ size, className, children, ...props }) {
-  const styles3 = tabsStyles({ size });
+  const styles4 = tabsStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TabList,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles3.list(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles4.list(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Trigger({ size, className, children, ...props }) {
-  const styles3 = tabsStyles({ size });
+  const styles4 = tabsStyles({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Tab,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles3.trigger(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles4.trigger(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
 }
 function Panel({ className, children, ...props }) {
-  const styles3 = tabsStyles({});
+  const styles4 = tabsStyles({});
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TabPanel,
     {
       ...props,
-      className: (rp) => chunkMWAXK66H_cjs.cn(styles3.panel(), typeof className === "function" ? className(rp) : className),
+      className: (rp) => chunkMWAXK66H_cjs.cn(styles4.panel(), typeof className === "function" ? className(rp) : className),
       children
     }
   );
@@ -7556,7 +7923,7 @@ function Textarea({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.TextField,
     {
@@ -7576,8 +7943,8 @@ function Textarea({
             className: chunkMWAXK66H_cjs.cn(
               // Same hairline chrome as Input, but allow vertical resize and set a
               // sensible minimum height so short content doesn't collapse.
-              styles3.box(),
-              styles3.content(),
+              styles4.box(),
+              styles4.content(),
               "min-h-[100px] resize-y",
               textareaClassName
             )
@@ -7598,7 +7965,7 @@ function TimeField({
   className,
   ...props
 }) {
-  const styles3 = fieldControlStyles({ size, appearance });
+  const styles4 = fieldControlStyles({ size, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.TimeField,
@@ -7614,8 +7981,8 @@ function TimeField({
           reactAriaComponents.DateInput,
           {
             className: chunkMWAXK66H_cjs.cn(
-              styles3.box(),
-              styles3.content(),
+              styles4.box(),
+              styles4.content(),
               "flex items-center min-w-0 text-ink",
               // Tabular alignment for time segments — overrides content's
               // font-sans on purpose.
@@ -7771,6 +8138,7 @@ exports.BadgeMultiSelect = BadgeMultiSelect;
 exports.BooleanCell = BooleanCell;
 exports.Breadcrumbs = Breadcrumbs;
 exports.COLUMN_DRAG_KIND = COLUMN_DRAG_KIND;
+exports.CONVERSATION_BRIEF_OUTCOME_LABEL = CONVERSATION_BRIEF_OUTCOME_LABEL;
 exports.Card = Card;
 exports.CardBody = CardBody;
 exports.CardContent = CardContent;
@@ -7787,6 +8155,9 @@ exports.ColorInput = ColorInput;
 exports.Combobox = Combobox;
 exports.Command = Command;
 exports.CommandHint = CommandHint;
+exports.ConversationBriefCard = ConversationBriefCard;
+exports.ConversationBriefPreview = ConversationBriefPreview;
+exports.ConversationBriefReview = ConversationBriefReview;
 exports.CurrencyInput = CurrencyInput;
 exports.DRAFT_OUTCOME_LABEL = DRAFT_OUTCOME_LABEL;
 exports.DataTable = DataTable;
@@ -7887,7 +8258,11 @@ exports.avatarStyles = avatarStyles;
 exports.badgeStyles = badgeStyles;
 exports.cardStyles = cardStyles2;
 exports.channelIcon = channelIcon;
+exports.contactPhoneNumbers = contactPhoneNumbers;
+exports.conversationBriefCardStyles = conversationBriefCardStyles;
+exports.conversationBriefOutcomeFor = conversationBriefOutcomeFor;
 exports.countLeaves = countLeaves;
+exports.createConversationBriefClient = createConversationBriefClient;
 exports.createDraftMessageClient = createDraftMessageClient;
 exports.createToastQueue = createToastQueue;
 exports.defaultValueFor = defaultValueFor;
@@ -7907,12 +8282,14 @@ exports.iconForContentType = iconForContentType;
 exports.imageAttachmentStyles = imageAttachmentStyles;
 exports.imageLightboxStyles = imageLightboxStyles;
 exports.isColumnDragData = isColumnDragData;
+exports.isDialableConversationBrief = isDialableConversationBrief;
 exports.isDraftReviewOutcome = isDraftReviewOutcome;
 exports.isEditableTarget = isEditableTarget;
 exports.isPreviewableImageName = isPreviewableImageName;
 exports.joinFieldLabel = joinFieldLabel;
 exports.makeActionsColumn = makeActionsColumn;
 exports.messageComposerStyles = messageComposerStyles;
+exports.namesOf = namesOf;
 exports.navItemStyles = navItemStyles;
 exports.normalizeHexColor = normalizeHexColor;
 exports.operatorById = operatorById;
@@ -7931,6 +8308,7 @@ exports.resolveLucideIconName = resolveLucideIconName;
 exports.segmentedControlStyles = segmentedControlStyles;
 exports.setJoiner = setJoiner;
 exports.subscribeDraftMessageOutcome = subscribeDraftMessageOutcome;
+exports.summaryFor = summaryFor;
 exports.tableCellStyles = tableCellStyles;
 exports.tableHeaderCellStyles = tableHeaderCellStyles;
 exports.tabsStyles = tabsStyles;