@iota-uz/sdk 0.4.23 → 0.4.24

package/dist/bichat/index.cjs

@@ -3303,12 +3303,151 @@ function useBranding() {
   }, [context.extensions?.branding, t]);
   return branding;
 }
-function ChatHeader({ session, onBack, readOnly, logoSlot, actionsSlot }) {
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+var colorPalette = [
+  { bg: "bg-blue-500", text: "text-white" },
+  { bg: "bg-green-500", text: "text-white" },
+  { bg: "bg-purple-500", text: "text-white" },
+  { bg: "bg-pink-500", text: "text-white" },
+  { bg: "bg-indigo-500", text: "text-white" },
+  { bg: "bg-teal-500", text: "text-white" },
+  { bg: "bg-orange-500", text: "text-white" },
+  { bg: "bg-cyan-500", text: "text-white" },
+  { bg: "bg-amber-500", text: "text-white" },
+  { bg: "bg-lime-500", text: "text-white" }
+];
+var sizeClasses = {
+  xs: "w-6 h-6 text-[10px]",
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-12 h-12 text-base"
+};
+function UserAvatar({
+  firstName,
+  lastName,
+  initials: providedInitials,
+  size = "md",
+  className = ""
+}) {
+  const derivedInitials = (() => {
+    const firstChar = firstName?.trim()?.charAt(0) || "";
+    const lastChar = lastName?.trim()?.charAt(0) || "";
+    const combined = `${firstChar}${lastChar}`.trim();
+    return combined || "U";
+  })();
+  const initials = (providedInitials?.trim() || derivedInitials).toUpperCase();
+  const fullName = `${firstName}${lastName}`;
+  const colorIndex = hashString(fullName) % colorPalette.length;
+  const colors = colorPalette[colorIndex];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `
+        ${sizeClasses[size]}
+        ${colors.bg}
+        ${colors.text}
+        ${className}
+        rounded-full
+        flex
+        items-center
+        justify-center
+        font-semibold
+        flex-shrink-0
+        select-none
+      `,
+      "aria-label": `${firstName} ${lastName}`,
+      title: `${firstName} ${lastName}`,
+      children: initials
+    }
+  );
+}
+var MemoizedUserAvatar = React.memo(UserAvatar);
+MemoizedUserAvatar.displayName = "UserAvatar";
+var overlapClasses = {
+  xs: "-ml-1.5",
+  sm: "-ml-2"
+};
+var badgeSizeClasses = {
+  xs: "w-6 h-6 text-[10px]",
+  sm: "w-8 h-8 text-xs"
+};
+function AvatarStackInner({
+  users,
+  max = 3,
+  size = "sm",
+  onClick,
+  className = ""
+}) {
+  const visible = users.slice(0, max);
+  const overflow = users.length - max;
+  const interactive = typeof onClick === "function";
+  const overlap = overlapClasses[size];
+  const badgeSize = badgeSizeClasses[size];
+  const handleKeyDown = (e) => {
+    if (interactive && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `inline-flex items-center ${interactive ? "cursor-pointer transition-opacity hover:opacity-80" : ""} ${className}`,
+      onClick: interactive ? onClick : void 0,
+      onKeyDown: interactive ? handleKeyDown : void 0,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      "aria-label": interactive ? `${users.length} members` : void 0,
+      children: [
+        visible.map((user, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${i > 0 ? overlap : ""} ring-2 ring-white dark:ring-gray-900 rounded-full`,
+            style: { zIndex: visible.length - i },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              MemoizedUserAvatar,
+              {
+                firstName: user.firstName,
+                lastName: user.lastName,
+                initials: user.initials,
+                size
+              }
+            )
+          },
+          `${user.firstName}-${user.lastName}-${i}`
+        )),
+        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `${overlap} ${badgeSize} rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-medium flex items-center justify-center flex-shrink-0 ring-2 ring-white dark:ring-gray-900`,
+            style: { zIndex: 0 },
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var AvatarStack = React.memo(AvatarStackInner);
+AvatarStack.displayName = "AvatarStack";
+function ChatHeader({ session, onBack, readOnly, logoSlot, actionsSlot, members, onMembersClick }) {
   const { t } = useTranslation();
   const branding = useBranding();
   const BackButton = onBack ? /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
+      type: "button",
       onClick: onBack,
       className: "cursor-pointer p-2 hover:bg-gray-100 dark:hover:bg-gray-700 active:bg-gray-200 dark:active:bg-gray-600 rounded-lg transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50",
       "aria-label": t("BiChat.Chat.GoBack"),
@@ -3327,23 +3466,42 @@ function ChatHeader({ session, onBack, readOnly, logoSlot, actionsSlot }) {
     ] }) });
   }
   const resolvedSessionTitle = session.title?.trim() || t("BiChat.Chat.NewChat");
+  const isGroupSession = Boolean(session.isGroup || session.memberCount && session.memberCount > 1);
+  const memberCount = session.memberCount ?? 0;
+  const stackUsers = members && members.length > 0 ? members : [];
   return /* @__PURE__ */ jsxRuntime.jsx("header", { className: "bichat-header border-b border-gray-200 dark:border-gray-700 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
       BackButton,
       Logo,
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-[var(--bichat-text)]", children: resolvedSessionTitle }),
-      session.pinned && /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          className: "w-4 h-4 text-[var(--bichat-primary)]",
-          fill: "currentColor",
-          viewBox: "0 0 20 20",
-          "aria-label": t("BiChat.Chat.Pinned"),
-          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1z" })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-[var(--bichat-text)] truncate", children: resolvedSessionTitle }),
+          session.pinned && /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-4 h-4 text-[var(--bichat-primary)] flex-shrink-0",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              role: "img",
+              "aria-label": t("BiChat.Chat.Pinned"),
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1z" })
+            }
+          ),
+          isGroupSession && stackUsers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            AvatarStack,
+            {
+              users: stackUsers,
+              max: 3,
+              size: "xs",
+              onClick: onMembersClick,
+              className: "flex-shrink-0"
+            }
+          )
+        ] }),
+        isGroupSession && memberCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400 mt-0.5", children: memberCount === 1 ? t("BiChat.Chat.OneMember") : t("BiChat.Chat.MemberCount").replace("{{count}}", String(memberCount)) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
       readOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 rounded", children: t("BiChat.Chat.ReadOnly") }),
       session.status === "archived" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded", children: t("BiChat.Chat.Archived") }),
       actionsSlot
@@ -4218,6 +4376,7 @@ function UserMessage({
   turn,
   turnId,
   initials = "U",
+  authorName,
   slots,
   classNames: classNameOverrides,
   onCopy,
@@ -4425,6 +4584,16 @@ function UserMessage({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.wrapper, children: [
+      authorName && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: `${turn.id}-author`,
+          role: "note",
+          "aria-label": authorName,
+          className: "mb-1 px-1 text-[11px] text-right text-gray-500 dark:text-gray-400",
+          children: authorName
+        }
+      ),
       normalizedAttachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.attachments, children: renderSlot(
         slots?.attachments,
         attachmentsSlotProps,
@@ -4436,20 +4605,28 @@ function UserMessage({
           }
         )
       ) }),
-      turn.content && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bubbleRef, className: classes.bubble, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.content, children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
-        EditForm,
+      turn.content && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          draftContent,
-          onDraftChange: handleDraftChange,
-          onSave: handleEditSave,
-          onCancel: handleEditCancel,
-          onKeyDown: handleEditKeyDown,
-          textareaRef: editTextareaRef,
-          disabled: false,
-          originalContent: turn.content,
-          t
+          ref: bubbleRef,
+          className: classes.bubble,
+          "aria-describedby": authorName ? `${turn.id}-author` : void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.content, children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+            EditForm,
+            {
+              draftContent,
+              onDraftChange: handleDraftChange,
+              onSave: handleEditSave,
+              onCancel: handleEditCancel,
+              onKeyDown: handleEditKeyDown,
+              textareaRef: editTextareaRef,
+              disabled: false,
+              originalContent: turn.content,
+              t
+            }
+          ) : renderSlot(slots?.content, contentSlotProps, turn.content) })
         }
-      ) : renderSlot(slots?.content, contentSlotProps, turn.content) }) }),
+      ),
       !hideActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classes.actions} ${isCopied ? "opacity-100" : ""}`, children: renderSlot(
         slots?.actions,
         actionsSlotProps,
@@ -4498,19 +4675,25 @@ function UserTurnView({
   turn,
   slots,
   classNames,
-  initials = "U",
+  initials,
   hideAvatar,
   hideActions,
   hideTimestamp,
-  allowEdit
+  allowEdit,
+  showAuthorName = false
 }) {
   const { handleEdit, handleCopy } = useChatMessaging();
+  const author = turn.userTurn.author;
+  const fullName = [author?.firstName || "", author?.lastName || ""].join(" ").trim();
+  const authorName = showAuthorName && fullName.length > 0 ? fullName : void 0;
+  const resolvedInitials = initials ?? author?.initials ?? "U";
   return /* @__PURE__ */ jsxRuntime.jsx(
     UserMessage,
     {
       turn: turn.userTurn,
       turnId: turn.id,
-      initials,
+      initials: resolvedInitials,
+      authorName,
       slots,
       classNames,
       onCopy: handleCopy,
@@ -8505,7 +8688,7 @@ function StreamingBubble({ content, normalizedContent }) {
 }
 function MessageList({ renderUserTurn, renderAssistantTurn, thinkingVerbs, readOnly }) {
   const { t } = useTranslation();
-  const { currentSessionId, fetching } = useChatSession();
+  const { session, currentSessionId, fetching } = useChatSession();
   const {
     turns,
     streamingContent,
@@ -8520,6 +8703,7 @@ function MessageList({ renderUserTurn, renderAssistantTurn, thinkingVerbs, readO
     () => streamingContent ? normalizeStreamingMarkdown(streamingContent) : "",
     [streamingContent]
   );
+  const showAuthorNames = Boolean(session?.isGroup);
   const showEphemeral = showActivityTrace || showTypingIndicator;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-h-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full overflow-y-auto overflow-x-hidden px-4 py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto space-y-6", children: [
@@ -8529,6 +8713,10 @@ function MessageList({ renderUserTurn, renderAssistantTurn, thinkingVerbs, readO
         const prevDate = index > 0 ? new Date(turns[index - 1].createdAt) : null;
         const showDateSeparator = !!prevDate && !dateFns.isSameDay(turnDate, prevDate);
         const isLast = index === turns.length - 1;
+        const userTurnProps = {
+          allowEdit: readOnly ? false : isLast,
+          showAuthorName: showAuthorNames
+        };
         return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
           showDateSeparator && /* @__PURE__ */ jsxRuntime.jsx(DateSeparator, { date: turnDate }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -8538,7 +8726,7 @@ function MessageList({ renderUserTurn, renderAssistantTurn, thinkingVerbs, readO
               isLastTurn: isLast,
               renderUserTurn,
               renderAssistantTurn,
-              userTurnProps: readOnly ? { allowEdit: false } : { allowEdit: isLast },
+              userTurnProps,
               assistantTurnProps: readOnly ? { allowRegenerate: false } : void 0
             }
           )
@@ -10744,71 +10932,689 @@ function SessionArtifactsPanel({
     }
   );
 }
+var DialogContext = React.createContext(null);
+var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function InlineDialog({ open, onClose, className, children }) {
+  const containerRef = React.useRef(null);
+  const previousFocusRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const getFocusable = () => Array.from(
+      container.querySelectorAll(FOCUSABLE_SELECTOR)
+    );
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") {
+        return;
+      }
+      const focusable = getFocusable();
+      if (focusable.length === 0) {
+        e.preventDefault();
+        container.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    (getFocusable()[0] ?? container)?.focus();
+    container.addEventListener("keydown", handler);
+    return () => {
+      container.removeEventListener("keydown", handler);
+      previousFocusRef.current?.focus();
+    };
+  }, [open, onClose]);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      onClick: onClose,
+      tabIndex: -1,
+      children
+    }
+  ) });
+}
+function InlineDialogBackdrop(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", ...props });
+}
+function InlineDialogPanel({
+  children,
+  onClick,
+  ...rest
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const target = ref.current.querySelector("[data-autofocus]") ?? ref.current.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    target?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function InlineDialogTitle(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h2", { ...props });
+}
+function InlineDialogDescription(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...props });
+}
 
-// ui/src/bichat/components/StreamError.tsx
+// ui/src/bichat/components/SessionMembersModal.tsx
 init_useTranslation();
-function StreamError({
-  error,
-  onRetry,
-  onRegenerate,
-  onDismiss,
-  compact = false
+init_useTranslation();
+function ConfirmModalBase({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmText,
+  cancelText,
+  isDanger = false
 }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 10 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -10 },
-      className: `flex items-start gap-3 ${compact ? "px-3 py-2.5" : "px-4 py-3"} bg-red-50 dark:bg-red-950/40 border border-red-200/80 dark:border-red-900/60 rounded-xl shadow-sm`,
-      role: "alert",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5 flex items-center justify-center w-7 h-7 rounded-full bg-red-100 dark:bg-red-900/40", children: /* @__PURE__ */ jsxRuntime.jsx(
-          react.Warning,
-          {
-            className: "w-4 h-4 text-red-600 dark:text-red-400",
-            weight: "fill"
-          }
-        ) }),
+  const resolvedConfirmText = confirmText?.trim() ? confirmText : t("BiChat.Common.Confirm");
+  const resolvedCancelText = cancelText?.trim() ? cancelText : t("BiChat.Common.Cancel");
+  return /* @__PURE__ */ jsxRuntime.jsxs(InlineDialog, { open: isOpen, onClose: onCancel, className: "relative z-40", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InlineDialogBackdrop, { className: "fixed inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm transition-opacity duration-200" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(InlineDialogPanel, { className: "bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/30 max-w-sm w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 pt-6 pb-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+        isDanger && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl bg-red-50 dark:bg-red-950/40 border border-red-200/60 dark:border-red-800/40", children: /* @__PURE__ */ jsxRuntime.jsx(react.WarningCircle, { size: 22, weight: "duotone", className: "text-red-600 dark:text-red-400" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 leading-snug", children: t("BiChat.Error.Generic") }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-red-600/80 dark:text-red-400/70 break-words leading-relaxed", children: error }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
-            onRetry && /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: onRetry,
-                className: "cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-red-600 hover:bg-red-700 active:bg-red-800 dark:bg-red-700 dark:hover:bg-red-600 rounded-lg transition-colors shadow-sm",
-                type: "button",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(react.ArrowClockwise, { className: "w-3.5 h-3.5" }),
-                  t("BiChat.StreamError.Retry")
-                ]
-              }
-            ),
-            onRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: onRegenerate,
-                className: "cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm",
-                type: "button",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(react.ArrowsCounterClockwise, { className: "w-3.5 h-3.5" }),
-                  t("BiChat.StreamError.Regenerate")
-                ]
-              }
-            )
-          ] })
-        ] }),
-        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(InlineDialogTitle, { className: "text-base font-semibold text-gray-900 dark:text-gray-100 leading-snug", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(InlineDialogDescription, { className: "mt-2 text-sm text-gray-600 dark:text-gray-400 leading-relaxed", children: message })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2.5 px-6 pb-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: onDismiss,
-            className: "cursor-pointer flex-shrink-0 mt-0.5 inline-flex items-center justify-center w-6 h-6 text-red-400 dark:text-red-500 hover:text-red-600 dark:hover:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-md transition-colors",
             type: "button",
-            "aria-label": t("BiChat.Chat.DismissNotification"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { className: "w-3.5 h-3.5" })
+            onClick: onCancel,
+            ...isDanger ? { "data-autofocus": true } : {},
+            className: "cursor-pointer px-4 py-2 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700/60 hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-250 dark:active:bg-gray-600 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800",
+            "data-testid": "confirm-modal-cancel",
+            children: resolvedCancelText
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            ...!isDanger ? { "data-autofocus": true } : {},
+            onClick: onConfirm,
+            className: [
+              "cursor-pointer px-4 py-2 text-sm font-medium rounded-xl text-white",
+              "transition-all duration-150 shadow-sm hover:shadow",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800",
+              isDanger ? "bg-red-600 hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500/50" : "bg-primary-600 hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500/50"
+            ].join(" "),
+            "data-testid": "confirm-modal-confirm",
+            children: resolvedConfirmText
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+var ConfirmModal = React.memo(ConfirmModalBase);
+ConfirmModal.displayName = "ConfirmModal";
+var ConfirmModal_default = ConfirmModal;
+var ROLES = ["editor", "viewer"];
+function RoleSegmentedControl({
+  value,
+  onChange,
+  disabled,
+  size = "md",
+  t
+}) {
+  const btnBase = size === "sm" ? "px-2 py-0.5 text-[11px]" : "px-3 py-1 text-xs";
+  const currentIndex = ROLES.indexOf(value);
+  const handleKeyDown = (e) => {
+    if (disabled) {
+      return;
+    }
+    let nextIndex = null;
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      nextIndex = currentIndex <= 0 ? ROLES.length - 1 : currentIndex - 1;
+    } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      nextIndex = currentIndex >= ROLES.length - 1 ? 0 : currentIndex + 1;
+    }
+    if (nextIndex !== null) {
+      const nextRole = ROLES[nextIndex];
+      onChange(nextRole);
+      const target = e.currentTarget.querySelector(`[data-role="${nextRole}"]`);
+      target?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": t("BiChat.Share.RoleLabel"),
+      className: "inline-flex rounded-lg border border-gray-200 dark:border-gray-700 p-0.5 bg-gray-50 dark:bg-gray-800/50",
+      onKeyDown: handleKeyDown,
+      children: ROLES.map((role) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": value === role,
+          tabIndex: value === role ? 0 : -1,
+          "data-role": role,
+          disabled,
+          onClick: () => onChange(role),
+          className: `${btnBase} cursor-pointer rounded-md font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:opacity-50 disabled:cursor-not-allowed ${value === role ? "bg-primary-600 text-white shadow-sm" : "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"}`,
+          children: role === "editor" ? t("BiChat.Share.RoleEditor") : t("BiChat.Share.RoleViewer")
+        },
+        role
+      ))
+    }
+  );
+}
+function MemberSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 rounded-xl px-3 py-2.5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse flex-shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-28 rounded bg-gray-200 dark:bg-gray-700 animate-pulse" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 w-16 rounded bg-gray-100 dark:bg-gray-800 animate-pulse" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-16 rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse" })
+  ] });
+}
+function SessionMembersModal({ isOpen, sessionId, dataSource, onClose }) {
+  const headingId = React.useId();
+  const { t } = useTranslation();
+  const statusTimerRef = React.useRef();
+  const [loading, setLoading] = React.useState(false);
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [users, setUsers] = React.useState([]);
+  const [members, setMembers] = React.useState([]);
+  const [selectedUser, setSelectedUser] = React.useState(null);
+  const [selectedRole, setSelectedRole] = React.useState("editor");
+  const [query, setQuery] = React.useState("");
+  const [confirmRemove, setConfirmRemove] = React.useState(null);
+  const [statusMessage, setStatusMessage] = React.useState(null);
+  const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const [dropdownHighlightIndex, setDropdownHighlightIndex] = React.useState(0);
+  const dropdownOptionRefs = React.useRef([]);
+  const canManageMembers = Boolean(
+    dataSource.listUsers && dataSource.listSessionMembers && dataSource.addSessionMember && dataSource.updateSessionMemberRole && dataSource.removeSessionMember
+  );
+  const refresh = React.useCallback(async () => {
+    if (!sessionId || !canManageMembers) {
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const [usersData, membersData] = await Promise.all([
+        dataSource.listUsers(),
+        dataSource.listSessionMembers(sessionId)
+      ]);
+      setUsers(usersData);
+      setMembers(membersData);
+    } catch {
+      setError(t("BiChat.Share.LoadFailed"));
+    } finally {
+      setLoading(false);
+    }
+  }, [canManageMembers, dataSource, sessionId, t]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    void refresh();
+  }, [isOpen, refresh]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setQuery("");
+      setSelectedUser(null);
+      setSelectedRole("editor");
+      setError(null);
+      setConfirmRemove(null);
+      setStatusMessage(null);
+      setDropdownOpen(false);
+      setDropdownHighlightIndex(0);
+    }
+  }, [isOpen]);
+  const memberIDs = React.useMemo(() => new Set(members.map((m) => m.user.id)), [members]);
+  const availableUsers = React.useMemo(
+    () => users.filter((user) => !memberIDs.has(user.id)),
+    [users, memberIDs]
+  );
+  const filteredUsers = React.useMemo(() => {
+    if (!query.trim()) {
+      return availableUsers;
+    }
+    const q = query.toLowerCase();
+    return availableUsers.filter(
+      (u) => u.firstName.toLowerCase().includes(q) || u.lastName.toLowerCase().includes(q) || `${u.firstName} ${u.lastName}`.toLowerCase().includes(q)
+    );
+  }, [availableUsers, query]);
+  React.useEffect(() => {
+    setDropdownHighlightIndex(
+      (i) => Math.min(Math.max(0, i), Math.max(0, filteredUsers.length - 1))
+    );
+  }, [filteredUsers.length]);
+  React.useEffect(() => () => clearTimeout(statusTimerRef.current), []);
+  const flashStatus = React.useCallback((msg) => {
+    clearTimeout(statusTimerRef.current);
+    setStatusMessage(msg);
+    statusTimerRef.current = setTimeout(() => setStatusMessage(null), 3e3);
+  }, []);
+  const handleAdd = React.useCallback(async () => {
+    if (!sessionId || !selectedUser || !dataSource.addSessionMember) {
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await dataSource.addSessionMember(sessionId, selectedUser.id, selectedRole);
+      setSelectedUser(null);
+      setQuery("");
+      flashStatus(t("BiChat.Share.MemberAdded"));
+      await refresh();
+    } catch {
+      setError(t("BiChat.Share.AddFailed"));
+    } finally {
+      setSaving(false);
+    }
+  }, [sessionId, selectedUser, selectedRole, dataSource.addSessionMember, refresh, t, flashStatus]);
+  const handleUpdateRole = React.useCallback(async (userId, role) => {
+    if (!sessionId || !dataSource.updateSessionMemberRole) {
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await dataSource.updateSessionMemberRole(sessionId, userId, role);
+      await refresh();
+    } catch {
+      setError(t("BiChat.Share.UpdateFailed"));
+    } finally {
+      setSaving(false);
+    }
+  }, [sessionId, dataSource.updateSessionMemberRole, refresh]);
+  const handleRemove = React.useCallback(async (userId) => {
+    if (!sessionId || !dataSource.removeSessionMember) {
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await dataSource.removeSessionMember(sessionId, userId);
+      flashStatus(t("BiChat.Share.MemberRemoved"));
+      await refresh();
+    } catch {
+      setError(t("BiChat.Share.RemoveFailed"));
+    } finally {
+      setSaving(false);
+    }
+  }, [sessionId, dataSource.removeSessionMember, refresh, flashStatus]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(InlineDialog, { open: isOpen, onClose, className: "relative z-40", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InlineDialogBackdrop, { className: "fixed inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm transition-opacity duration-200" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        InlineDialogPanel,
+        {
+          "aria-labelledby": headingId,
+          className: "bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/30 max-w-md w-full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 pt-5 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-9 h-9 rounded-xl bg-primary-50 dark:bg-primary-950/40 border border-primary-200/60 dark:border-primary-800/40", children: /* @__PURE__ */ jsxRuntime.jsx(react.UsersThree, { size: 18, weight: "duotone", className: "text-primary-600 dark:text-primary-400" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(InlineDialogTitle, { id: headingId, className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: t("BiChat.Share.Title") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "rounded-lg p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50",
+                  "aria-label": t("BiChat.Common.Close"),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 18 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-5 space-y-4", children: [
+              !canManageMembers && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs text-amber-700 dark:border-amber-800/60 dark:bg-amber-900/20 dark:text-amber-300", children: t("BiChat.Share.Unsupported") }),
+              error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 px-3 py-2.5 text-xs text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-300", children: error }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: statusMessage }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400", children: [
+                  t("BiChat.Share.Members"),
+                  !loading && members.length > 0 ? ` (${members.length})` : ""
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-y-auto -mx-1 px-1 space-y-1", children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(MemberSkeleton, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(MemberSkeleton, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(MemberSkeleton, {})
+                ] }) : members.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(react.UsersThree, { size: 32, weight: "thin", className: "mb-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: t("BiChat.Share.Empty") })
+                ] }) : members.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-3 rounded-xl px-3 py-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        MemoizedUserAvatar,
+                        {
+                          firstName: member.user.firstName,
+                          lastName: member.user.lastName,
+                          initials: member.user.initials,
+                          size: "sm"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate text-sm font-medium text-gray-900 dark:text-gray-100", children: [
+                        member.user.firstName,
+                        " ",
+                        member.user.lastName
+                      ] }) }),
+                      member.role === "owner" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-900/20 border border-amber-200/60 dark:border-amber-800/40 px-2.5 py-0.5 text-[11px] font-medium text-amber-700 dark:text-amber-300", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(react.Crown, { size: 12, weight: "duotone" }),
+                        t("BiChat.Share.RoleOwner")
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          RoleSegmentedControl,
+                          {
+                            value: member.role,
+                            onChange: (role) => handleUpdateRole(member.user.id, role),
+                            disabled: saving,
+                            size: "sm",
+                            t
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: saving,
+                            onClick: () => setConfirmRemove(member),
+                            className: "cursor-pointer rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/50",
+                            "aria-label": `${t("BiChat.Share.Remove")} ${member.user.firstName} ${member.user.lastName}`,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(react.Trash, { size: 14 })
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  member.user.id
+                )) })
+              ] }),
+              canManageMembers && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-gray-200 dark:border-gray-700 p-3 space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400", children: t("BiChat.Share.AddMember") }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "relative",
+                    onBlur: (e) => {
+                      if (!e.currentTarget.contains(e.relatedTarget)) {
+                        setDropdownOpen(false);
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          react.MagnifyingGlass,
+                          {
+                            size: 14,
+                            className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "text",
+                            className: "w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/60 pl-8 pr-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors focus:border-primary-400 dark:focus:border-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500/20",
+                            placeholder: t("BiChat.Share.SearchUsers"),
+                            value: selectedUser ? `${selectedUser.firstName} ${selectedUser.lastName}` : query,
+                            onFocus: () => {
+                              setDropdownOpen(true);
+                              setDropdownHighlightIndex(0);
+                              if (selectedUser) {
+                                setSelectedUser(null);
+                                setQuery("");
+                              }
+                            },
+                            onChange: (e) => {
+                              setQuery(e.target.value);
+                              setSelectedUser(null);
+                              setDropdownOpen(true);
+                              setDropdownHighlightIndex(0);
+                            },
+                            onKeyDown: (e) => {
+                              if (!dropdownOpen || filteredUsers.length === 0) {
+                                if (e.key === "Escape") {
+                                  setDropdownOpen(false);
+                                }
+                                return;
+                              }
+                              if (e.key === "Escape") {
+                                e.preventDefault();
+                                setDropdownOpen(false);
+                                setDropdownHighlightIndex(0);
+                                return;
+                              }
+                              if (e.key === "ArrowDown") {
+                                e.preventDefault();
+                                const next = (dropdownHighlightIndex + 1) % filteredUsers.length;
+                                setDropdownHighlightIndex(next);
+                                setTimeout(() => dropdownOptionRefs.current[next]?.focus(), 0);
+                                return;
+                              }
+                              if (e.key === "ArrowUp") {
+                                e.preventDefault();
+                                const next = dropdownHighlightIndex <= 0 ? filteredUsers.length - 1 : dropdownHighlightIndex - 1;
+                                setDropdownHighlightIndex(next);
+                                setTimeout(() => dropdownOptionRefs.current[next]?.focus(), 0);
+                                return;
+                              }
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                const user = filteredUsers[dropdownHighlightIndex];
+                                if (user) {
+                                  setSelectedUser(user);
+                                  setQuery("");
+                                  setDropdownOpen(false);
+                                }
+                              }
+                            }
+                          }
+                        )
+                      ] }),
+                      dropdownOpen && !selectedUser && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-10 mt-1 max-h-48 w-full overflow-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: filteredUsers.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 dark:text-gray-400", children: availableUsers.length === 0 ? t("BiChat.Share.NoUsersAvailable") : t("BiChat.Share.NoSearchResults") }) : filteredUsers.map((user, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          ref: (el) => {
+                            dropdownOptionRefs.current[index] = el;
+                          },
+                          className: `flex w-full items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors hover:bg-primary-50 dark:hover:bg-primary-900/20 ${index === dropdownHighlightIndex ? "bg-primary-50 dark:bg-primary-900/20" : ""}`,
+                          onMouseDown: (e) => e.preventDefault(),
+                          onClick: () => {
+                            setSelectedUser(user);
+                            setQuery("");
+                            setDropdownOpen(false);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              MemoizedUserAvatar,
+                              {
+                                firstName: user.firstName,
+                                lastName: user.lastName,
+                                initials: user.initials,
+                                size: "xs"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-900 dark:text-gray-100", children: [
+                              user.firstName,
+                              " ",
+                              user.lastName
+                            ] })
+                          ]
+                        },
+                        user.id
+                      )) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    RoleSegmentedControl,
+                    {
+                      value: selectedRole,
+                      onChange: setSelectedRole,
+                      disabled: saving,
+                      t
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleAdd,
+                      disabled: saving || !selectedUser,
+                      className: "inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-primary-600 px-3.5 py-2 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-primary-700 hover:shadow active:bg-primary-800 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(react.UserPlus, { size: 14 }),
+                        t("BiChat.Share.Add")
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmModal,
+      {
+        isOpen: !!confirmRemove,
+        isDanger: true,
+        title: t("BiChat.Share.RemoveConfirmTitle"),
+        message: confirmRemove ? t("BiChat.Share.RemoveConfirmMessage").replace(
+          "{{name}}",
+          `${confirmRemove.user.firstName} ${confirmRemove.user.lastName}`
+        ) : "",
+        confirmText: t("BiChat.Share.Remove"),
+        onConfirm: () => {
+          if (confirmRemove) {
+            void handleRemove(confirmRemove.user.id);
+          }
+          setConfirmRemove(null);
+        },
+        onCancel: () => setConfirmRemove(null)
+      }
+    )
+  ] });
+}
+
+// ui/src/bichat/components/StreamError.tsx
+init_useTranslation();
+function StreamError({
+  error,
+  onRetry,
+  onRegenerate,
+  onDismiss,
+  compact = false
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      className: `flex items-start gap-3 ${compact ? "px-3 py-2.5" : "px-4 py-3"} bg-red-50 dark:bg-red-950/40 border border-red-200/80 dark:border-red-900/60 rounded-xl shadow-sm`,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5 flex items-center justify-center w-7 h-7 rounded-full bg-red-100 dark:bg-red-900/40", children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.Warning,
+          {
+            className: "w-4 h-4 text-red-600 dark:text-red-400",
+            weight: "fill"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 leading-snug", children: t("BiChat.Error.Generic") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-red-600/80 dark:text-red-400/70 break-words leading-relaxed", children: error }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+            onRetry && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onRetry,
+                className: "cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-red-600 hover:bg-red-700 active:bg-red-800 dark:bg-red-700 dark:hover:bg-red-600 rounded-lg transition-colors shadow-sm",
+                type: "button",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(react.ArrowClockwise, { className: "w-3.5 h-3.5" }),
+                  t("BiChat.StreamError.Retry")
+                ]
+              }
+            ),
+            onRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onRegenerate,
+                className: "cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors shadow-sm",
+                type: "button",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(react.ArrowsCounterClockwise, { className: "w-3.5 h-3.5" }),
+                  t("BiChat.StreamError.Regenerate")
+                ]
+              }
+            )
+          ] })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onDismiss,
+            className: "cursor-pointer flex-shrink-0 mt-0.5 inline-flex items-center justify-center w-6 h-6 text-red-400 dark:text-red-500 hover:text-red-600 dark:hover:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-md transition-colors",
+            type: "button",
+            "aria-label": t("BiChat.Chat.DismissNotification"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { className: "w-3.5 h-3.5" })
           }
         )
       ]
@@ -10872,7 +11678,8 @@ function ChatSessionCore({
     updateQueueItem
   } = useChatInput();
   const isArchived = session?.status === "archived";
-  const effectiveReadOnly = Boolean(readOnly ?? isReadOnly) || isArchived;
+  const accessReadOnly = session?.access ? !session.access.canWrite : false;
+  const effectiveReadOnly = Boolean(readOnly ?? isReadOnly) || isArchived || accessReadOnly;
   const [restoring, setRestoring] = React.useState(false);
   const handleRestore = React.useCallback(async () => {
     if (!session?.id) {
@@ -10893,6 +11700,8 @@ function ChatSessionCore({
   const [artifactsPanelExpanded, setArtifactsPanelExpanded] = React.useState(
     artifactsPanelDefaultExpanded
   );
+  const [membersModalOpen, setMembersModalOpen] = React.useState(false);
+  const [headerMembers, setHeaderMembers] = React.useState(null);
   const [artifactsPanelWidth, setArtifactsPanelWidth] = React.useState(ARTIFACTS_PANEL_WIDTH_DEFAULT);
   const [isResizingArtifactsPanel, setIsResizingArtifactsPanel] = React.useState(false);
   const layoutContainerRef = React.useRef(null);
@@ -10927,6 +11736,25 @@ function ChatSessionCore({
     } catch {
     }
   }, [artifactsPanelStorageKey, showArtifactsPanel]);
+  React.useEffect(() => {
+    if (!session?.id || !dataSource.listSessionMembers) {
+      setHeaderMembers(null);
+      return;
+    }
+    let cancelled = false;
+    dataSource.listSessionMembers(session.id).then((members) => {
+      if (!cancelled) {
+        setHeaderMembers(members.map((m) => m.user));
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setHeaderMembers(null);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [session?.id, dataSource.listSessionMembers]);
   const handleArtifactsResizeStart = React.useCallback(() => {
     setIsResizingArtifactsPanel(true);
   }, []);
@@ -11016,8 +11844,26 @@ function ChatSessionCore({
       }
     }
   };
-  const headerActions = showArtifactsControls ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  const canShowShareButton = Boolean(
+    session?.access?.canManageMembers && dataSource.listUsers && dataSource.listSessionMembers && dataSource.addSessionMember && dataSource.updateSessionMemberRole && dataSource.removeSessionMember
+  );
+  const shareButton = canShowShareButton ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => setMembersModalOpen(true),
+      className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-gray-500 transition-all duration-150 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+      "aria-label": t("BiChat.Share.Title"),
+      title: t("BiChat.Share.Title"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.ShareNetwork, { className: "h-4 w-4" }),
+        t("BiChat.Share.Button")
+      ]
+    }
+  ) : null;
+  const headerActions = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    shareButton,
+    showArtifactsControls && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -11037,7 +11883,7 @@ function ChatSessionCore({
       }
     ),
     actionsSlot
-  ] }) : actionsSlot;
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "main",
     {
@@ -11050,7 +11896,9 @@ function ChatSessionCore({
             onBack,
             readOnly: effectiveReadOnly,
             logoSlot,
-            actionsSlot: headerActions
+            actionsSlot: headerActions,
+            members: headerMembers ?? (session?.owner ? [session.owner] : void 0),
+            onMembersClick: canShowShareButton ? () => setMembersModalOpen(true) : void 0
           }
         ),
         error && /* @__PURE__ */ jsxRuntime.jsx(
@@ -11247,6 +12095,15 @@ function ChatSessionCore({
               ) })
             ]
           }
+        ),
+        canShowShareButton && /* @__PURE__ */ jsxRuntime.jsx(
+          SessionMembersModal,
+          {
+            isOpen: membersModalOpen,
+            sessionId: session?.id,
+            dataSource,
+            onClose: () => setMembersModalOpen(false)
+          }
         )
       ]
     }
@@ -11269,7 +12126,7 @@ function ChatSession(props) {
 // ui/src/bichat/index.ts
 init_MarkdownRenderer();
 init_ChartCard();
-var sizeClasses = {
+var sizeClasses2 = {
   sm: {
     container: "py-6 px-3",
     title: "text-sm",
@@ -11294,7 +12151,7 @@ function EmptyState({
   className = "",
   size = "md"
 }) {
-  const sizes = sizeClasses[size];
+  const sizes = sizeClasses2[size];
   const prefersReducedMotion2 = framerMotion.useReducedMotion();
   const duration = prefersReducedMotion2 ? 0 : 0.4;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11354,7 +12211,7 @@ MemoizedEmptyState.displayName = "EmptyState";
 
 // ui/src/bichat/components/EditableText.tsx
 init_useTranslation();
-var sizeClasses2 = {
+var sizeClasses3 = {
   sm: "text-sm",
   md: "text-base",
   lg: "text-lg"
@@ -11425,7 +12282,7 @@ var EditableText = React.forwardRef(
     const handleBlur = () => {
       handleSave();
     };
-    const sizeClass = sizeClasses2[size];
+    const sizeClass = sizeClasses3[size];
     if (isEditing) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -11485,7 +12342,7 @@ var MemoizedEditableText = React.memo(EditableText);
 
 // ui/src/bichat/components/SearchInput.tsx
 init_useTranslation();
-var sizeClasses3 = {
+var sizeClasses4 = {
   sm: {
     container: "py-1.5 pl-8 pr-8 text-xs",
     icon: 14,
@@ -11518,7 +12375,7 @@ function SearchInput({
   const resolvedPlaceholder = placeholder ?? t("BiChat.Common.Search");
   const resolvedAriaLabel = ariaLabel ?? t("BiChat.Common.Search");
   const inputRef = React.useRef(null);
-  const sizes = sizeClasses3[size];
+  const sizes = sizeClasses4[size];
   React.useEffect(() => {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
@@ -11945,134 +12802,6 @@ function ToastContainer({ toasts, onDismiss, dismissLabel }) {
     }
   );
 }
-
-// ui/src/bichat/components/ConfirmModal.tsx
-init_useTranslation();
-function ConfirmModalBase({
-  isOpen,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-  confirmText,
-  cancelText,
-  isDanger = false
-}) {
-  const { t } = useTranslation();
-  const resolvedConfirmText = confirmText?.trim() ? confirmText : t("BiChat.Common.Confirm");
-  const resolvedCancelText = cancelText?.trim() ? cancelText : t("BiChat.Common.Cancel");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Dialog, { open: isOpen, onClose: onCancel, className: "relative z-40", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.DialogBackdrop, { className: "fixed inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm transition-opacity duration-200" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.DialogPanel, { className: "bg-white dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl dark:shadow-black/30 max-w-sm w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 pt-6 pb-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3.5", children: [
-        isDanger && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl bg-red-50 dark:bg-red-950/40 border border-red-200/60 dark:border-red-800/40", children: /* @__PURE__ */ jsxRuntime.jsx(react.WarningCircle, { size: 22, weight: "duotone", className: "text-red-600 dark:text-red-400" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.DialogTitle, { className: "text-base font-semibold text-gray-900 dark:text-gray-100 leading-snug", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Description, { className: "mt-2 text-sm text-gray-600 dark:text-gray-400 leading-relaxed", children: message })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2.5 px-6 pb-5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onCancel,
-            ...isDanger ? { "data-autofocus": true } : {},
-            className: "cursor-pointer px-4 py-2 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700/60 hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-250 dark:active:bg-gray-600 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800",
-            "data-testid": "confirm-modal-cancel",
-            children: resolvedCancelText
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            ...!isDanger ? { "data-autofocus": true } : {},
-            onClick: onConfirm,
-            className: [
-              "cursor-pointer px-4 py-2 text-sm font-medium rounded-xl text-white",
-              "transition-all duration-150 shadow-sm hover:shadow",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800",
-              isDanger ? "bg-red-600 hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500/50" : "bg-primary-600 hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500/50"
-            ].join(" "),
-            "data-testid": "confirm-modal-confirm",
-            children: resolvedConfirmText
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-}
-var ConfirmModal = React.memo(ConfirmModalBase);
-ConfirmModal.displayName = "ConfirmModal";
-var ConfirmModal_default = ConfirmModal;
-function hashString(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-  return Math.abs(hash);
-}
-var colorPalette = [
-  { bg: "bg-blue-500", text: "text-white" },
-  { bg: "bg-green-500", text: "text-white" },
-  { bg: "bg-purple-500", text: "text-white" },
-  { bg: "bg-pink-500", text: "text-white" },
-  { bg: "bg-indigo-500", text: "text-white" },
-  { bg: "bg-teal-500", text: "text-white" },
-  { bg: "bg-orange-500", text: "text-white" },
-  { bg: "bg-cyan-500", text: "text-white" },
-  { bg: "bg-amber-500", text: "text-white" },
-  { bg: "bg-lime-500", text: "text-white" }
-];
-var sizeClasses4 = {
-  sm: "w-8 h-8 text-xs",
-  md: "w-10 h-10 text-sm",
-  lg: "w-12 h-12 text-base"
-};
-function UserAvatar({
-  firstName,
-  lastName,
-  initials: providedInitials,
-  size = "md",
-  className = ""
-}) {
-  const derivedInitials = (() => {
-    const firstChar = firstName?.trim()?.charAt(0) || "";
-    const lastChar = lastName?.trim()?.charAt(0) || "";
-    const combined = `${firstChar}${lastChar}`.trim();
-    return combined || "U";
-  })();
-  const initials = (providedInitials?.trim() || derivedInitials).toUpperCase();
-  const fullName = `${firstName}${lastName}`;
-  const colorIndex = hashString(fullName) % colorPalette.length;
-  const colors = colorPalette[colorIndex];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `
-        ${sizeClasses4[size]}
-        ${colors.bg}
-        ${colors.text}
-        ${className}
-        rounded-full
-        flex
-        items-center
-        justify-center
-        font-semibold
-        flex-shrink-0
-        select-none
-      `,
-      "aria-label": `${firstName} ${lastName}`,
-      title: `${firstName} ${lastName}`,
-      children: initials
-    }
-  );
-}
-var MemoizedUserAvatar = React.memo(UserAvatar);
-MemoizedUserAvatar.displayName = "UserAvatar";
 function PermissionGuard({
   permissions,
   mode = "all",
@@ -12514,6 +13243,11 @@ var SessionItem = React.memo(
     const isTitleGenerating = !session.title?.trim();
     const displayTitle = isTitleGenerating ? t("BiChat.Common.Generating") : session.title ?? t("BiChat.Common.Untitled");
     const lastActivity = formatRelativeTime(session.updatedAt, t);
+    const accessRole = session.access?.role ?? "owner";
+    const roleLabel = accessRole === "editor" ? t("BiChat.Share.RoleEditor") : accessRole === "viewer" ? t("BiChat.Share.RoleViewer") : accessRole === "read_all" ? t("BiChat.Share.RoleReadOnly") : "";
+    const visibilityLabel = session.isGroup ? t("BiChat.Sidebar.GroupChat") : accessRole === "editor" || accessRole === "viewer" ? t("BiChat.Sidebar.SharedWithYou") : "";
+    const isGroupOrShared = Boolean(session.isGroup || session.memberCount && session.memberCount > 1);
+    const metaParts = [lastActivity, visibilityLabel, roleLabel].filter(Boolean);
     const { handlers: longPressHandlers } = useLongPress({
       delay: 500,
       onLongPress: (e) => {
@@ -12655,17 +13389,23 @@ var SessionItem = React.memo(
                     "data-testid": `${testIdPrefix}-session-${session.id}`,
                     ...longPressHandlers,
                     children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          MemoizedEditableText,
-                          {
-                            ref: editableTitleRef,
-                            value: displayTitle,
-                            onSave: (newTitle) => onRename?.(newTitle),
-                            isLoading: isTitleGenerating
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-gray-400 dark:text-gray-500 truncate mt-0.5", children: lastActivity })
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 min-w-0 flex-1", children: [
+                        isGroupOrShared && /* @__PURE__ */ jsxRuntime.jsx(react.UsersThree, { size: 14, weight: "duotone", className: "text-primary-500 dark:text-primary-400 mt-1 flex-shrink-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            MemoizedEditableText,
+                            {
+                              ref: editableTitleRef,
+                              value: displayTitle,
+                              onSave: (newTitle) => onRename?.(newTitle),
+                              isLoading: isTitleGenerating
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-gray-400 dark:text-gray-500 truncate mt-0.5", children: [
+                            metaParts.join(" \u2022 "),
+                            isGroupOrShared && session.memberCount && session.memberCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center ml-1 rounded-full bg-primary-50 dark:bg-primary-900/30 px-1.5 text-[10px] font-medium text-primary-600 dark:text-primary-400", children: session.memberCount })
+                          ] })
+                        ] })
                       ] }),
                       !isTouch && hasContextMenu && /* @__PURE__ */ jsxRuntime.jsxs(react$1.Menu, { children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
@@ -13019,24 +13759,23 @@ function AllChatsList({ dataSource, onSessionSelect, activeSessionId }) {
       setOffset((prev) => prev + limit);
     }
   }, [fetching, hasMore]);
-  const loadMoreRef = React.useCallback(
-    (node) => {
-      if (!node || fetching || !hasMore) {
-        return;
+  const loadMoreNodeRef = React.useRef(null);
+  const loadMoreRef = React.useCallback((node) => {
+    loadMoreNodeRef.current = node;
+  }, []);
+  React.useEffect(() => {
+    const node = loadMoreNodeRef.current;
+    if (!node || fetching || !hasMore) {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        handleLoadMore();
       }
-      const observer = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].isIntersecting) {
-            handleLoadMore();
-          }
-        },
-        { threshold: 0.1 }
-      );
-      observer.observe(node);
-      return () => observer.disconnect();
-    },
-    [fetching, hasMore, handleLoadMore]
-  );
+    }, { threshold: 0.1 });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [fetching, hasMore, handleLoadMore]);
   const derivedUsers = React.useMemo(() => {
     if (dataSource.listUsers) {
       return users;
@@ -13094,57 +13833,61 @@ function AllChatsList({ dataSource, onSessionSelect, activeSessionId }) {
               role: "list",
               "aria-label": t("BiChat.AllChats.OrganizationChatSessions"),
               children: [
-                chats.map((chat) => /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.motion.div,
-                  {
-                    initial: { opacity: 0, y: -10 },
-                    animate: { opacity: 1, y: 0 },
-                    exit: { opacity: 0, y: -10 },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        role: "link",
-                        tabIndex: 0,
-                        onClick: () => onSessionSelect(chat.id),
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            onSessionSelect(chat.id);
-                          }
-                        },
-                        className: `
+                chats.map((chat) => {
+                  const owner = chat.owner ?? {
+                    firstName: "",
+                    lastName: "",
+                    initials: "U"
+                  };
+                  const ownerName = [owner.firstName, owner.lastName].filter(Boolean).join(" ");
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      initial: { opacity: 0, y: -10 },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0, y: -10 },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          role: "link",
+                          tabIndex: 0,
+                          onClick: () => onSessionSelect(chat.id),
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              onSessionSelect(chat.id);
+                            }
+                          },
+                          className: `
                         block px-3 py-2 rounded-lg transition-smooth group cursor-pointer
                         ${chat.id === activeSessionId ? "bg-primary-50/50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 border-l-4 border-primary-400 dark:border-primary-600" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-l-4 border-transparent"}
                       `,
-                        "aria-current": chat.id === activeSessionId ? "page" : void 0,
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            MemoizedUserAvatar,
-                            {
-                              firstName: chat.owner.firstName,
-                              lastName: chat.owner.lastName,
-                              initials: chat.owner.initials,
-                              size: "sm"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: chat.title || t("BiChat.Common.Untitled") }),
-                            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: [
-                              chat.owner.firstName,
-                              " ",
-                              chat.owner.lastName
-                            ] }),
-                            chat.status === "archived" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 mt-1 px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full text-xs", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(react.Archive, { size: 12, className: "w-3 h-3" }),
-                              t("BiChat.Chat.Archived")
+                          "aria-current": chat.id === activeSessionId ? "page" : void 0,
+                          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              MemoizedUserAvatar,
+                              {
+                                firstName: owner.firstName,
+                                lastName: owner.lastName,
+                                initials: owner.initials,
+                                size: "sm"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: chat.title || t("BiChat.Common.Untitled") }),
+                              ownerName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: ownerName }),
+                              chat.status === "archived" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 mt-1 px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-full text-xs", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(react.Archive, { size: 12, className: "w-3 h-3" }),
+                                t("BiChat.Chat.Archived")
+                              ] })
                             ] })
                           ] })
-                        ] })
-                      }
-                    )
-                  },
-                  chat.id
-                )),
+                        }
+                      )
+                    },
+                    chat.id
+                  );
+                }),
                 hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: "py-4 text-center", children: fetching ? /* @__PURE__ */ jsxRuntime.jsx(SessionSkeleton, { count: 2 }) : /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -13914,19 +14657,22 @@ function Sidebar2({
                                 animate: "visible",
                                 role: "list",
                                 "aria-label": t("BiChat.Sidebar.PinnedChats"),
-                                children: pinnedSessions.map((session) => /* @__PURE__ */ jsxRuntime.jsx(
-                                  SessionItem_default,
-                                  {
-                                    session,
-                                    isActive: session.id === activeSessionId,
-                                    onSelect: () => handleSessionSelect(session.id),
-                                    onArchive: () => handleSessionArchive(session.id),
-                                    onPin: () => handleSessionPin(session.id, session.pinned),
-                                    onRename: (newTitle) => handleSessionRename(session.id, newTitle),
-                                    onRegenerateTitle: () => handleSessionRegenerateTitle(session.id)
-                                  },
-                                  session.id
-                                ))
+                                children: pinnedSessions.map((session) => {
+                                  const canWrite = session.access?.canWrite ?? true;
+                                  return /* @__PURE__ */ jsxRuntime.jsx(
+                                    SessionItem_default,
+                                    {
+                                      session,
+                                      isActive: session.id === activeSessionId,
+                                      onSelect: () => handleSessionSelect(session.id),
+                                      onArchive: canWrite ? () => handleSessionArchive(session.id) : void 0,
+                                      onPin: canWrite ? () => handleSessionPin(session.id, session.pinned) : void 0,
+                                      onRename: canWrite ? (newTitle) => handleSessionRename(session.id, newTitle) : void 0,
+                                      onRegenerateTitle: canWrite ? () => handleSessionRegenerateTitle(session.id) : void 0
+                                    },
+                                    session.id
+                                  );
+                                })
                               }
                             ),
                             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-gray-200 dark:border-gray-700 my-3" })
@@ -13948,19 +14694,22 @@ function Sidebar2({
                                 animate: "visible",
                                 role: "list",
                                 "aria-label": `${group.name} chats`,
-                                children: group.sessions.map((session) => /* @__PURE__ */ jsxRuntime.jsx(
-                                  SessionItem_default,
-                                  {
-                                    session,
-                                    isActive: session.id === activeSessionId,
-                                    onSelect: () => handleSessionSelect(session.id),
-                                    onArchive: () => handleSessionArchive(session.id),
-                                    onPin: () => handleSessionPin(session.id, session.pinned),
-                                    onRename: (newTitle) => handleSessionRename(session.id, newTitle),
-                                    onRegenerateTitle: () => handleSessionRegenerateTitle(session.id)
-                                  },
-                                  session.id
-                                ))
+                                children: group.sessions.map((session) => {
+                                  const canWrite = session.access?.canWrite ?? true;
+                                  return /* @__PURE__ */ jsxRuntime.jsx(
+                                    SessionItem_default,
+                                    {
+                                      session,
+                                      isActive: session.id === activeSessionId,
+                                      onSelect: () => handleSessionSelect(session.id),
+                                      onArchive: canWrite ? () => handleSessionArchive(session.id) : void 0,
+                                      onPin: canWrite ? () => handleSessionPin(session.id, session.pinned) : void 0,
+                                      onRename: canWrite ? (newTitle) => handleSessionRename(session.id, newTitle) : void 0,
+                                      onRegenerateTitle: canWrite ? () => handleSessionRegenerateTitle(session.id) : void 0
+                                    },
+                                    session.id
+                                  );
+                                })
                               }
                             )
                           ] }, group.name)),
@@ -16121,6 +16870,76 @@ function useScrollToBottom(items) {
     scrollToBottom
   };
 }
+function useHttpDataSourceConfigFromApplet(options) {
+  return React.useMemo(() => {
+    const ctx = typeof window !== "undefined" ? window.__APPLET_CONTEXT__ : void 0;
+    if (!ctx) {
+      throw new Error(
+        "Applet context not found. Ensure window.__APPLET_CONTEXT__ is injected by the backend."
+      );
+    }
+    const rpcEndpoint = ctx.config?.rpcUIEndpoint ?? "/rpc";
+    const streamEndpoint = ctx.config?.streamEndpoint ?? "/stream";
+    const csrfToken = ctx.session?.csrfToken ?? (typeof window !== "undefined" ? window.__CSRF_TOKEN__ : void 0) ?? "";
+    const isDev = typeof undefined?.DEV === "boolean" && undefined?.DEV;
+    if (!csrfToken && isDev) {
+      console.warn(
+        "[useHttpDataSourceConfigFromApplet] CSRF token is empty \u2014 requests may be rejected by the server."
+      );
+    }
+    return {
+      baseUrl: "",
+      rpcEndpoint,
+      streamEndpoint,
+      csrfToken,
+      timeout: options?.timeout ?? 12e4
+    };
+  }, [options?.timeout]);
+}
+var SESSION_PATH_REGEX = /\/session\/([^/]+)/;
+function useBichatRouter({
+  navigate,
+  pathname,
+  onNavigate
+}) {
+  const activeSessionId = React.useMemo(
+    () => pathname.match(SESSION_PATH_REGEX)?.[1],
+    [pathname]
+  );
+  const maybeClose = React.useCallback(() => {
+    onNavigate?.();
+  }, [onNavigate]);
+  const onSessionSelect = React.useCallback(
+    (sessionId) => {
+      if (sessionId) {
+        navigate(`/session/${sessionId}`);
+      } else {
+        navigate("/");
+      }
+      maybeClose();
+    },
+    [navigate, maybeClose]
+  );
+  const onNewChat = React.useCallback(() => {
+    navigate("/");
+    maybeClose();
+  }, [navigate, maybeClose]);
+  const onArchivedView = React.useCallback(() => {
+    navigate("/archived");
+    maybeClose();
+  }, [navigate, maybeClose]);
+  const onBack = React.useCallback(() => {
+    navigate("/");
+    maybeClose();
+  }, [navigate, maybeClose]);
+  return {
+    activeSessionId,
+    onSessionSelect,
+    onNewChat,
+    onArchivedView,
+    onBack
+  };
+}
 
 // ui/src/bichat/index.ts
 init_IotaContext();
@@ -16424,10 +17243,59 @@ function resolveArtifactName(artifact) {
   }
   return `${label} artifact`;
 }
+function mapSessionUser(rawUser) {
+  if (!isRecord2(rawUser)) {
+    return void 0;
+  }
+  const rawId = rawUser.id;
+  const id = readNonEmptyString(rawId) ?? (typeof rawId === "number" && Number.isFinite(rawId) ? String(rawId) : null);
+  if (!id) {
+    return void 0;
+  }
+  const firstName = readString2(rawUser.firstName);
+  const lastName = readString2(rawUser.lastName);
+  const initials = readNonEmptyString(rawUser.initials) || `${firstName.charAt(0)}${lastName.charAt(0)}`.trim().toUpperCase() || "U";
+  return {
+    id,
+    firstName,
+    lastName,
+    initials
+  };
+}
+function mapSessionAccess(rawAccess) {
+  if (!isRecord2(rawAccess)) {
+    return void 0;
+  }
+  const role = readString2(rawAccess.role).toLowerCase();
+  const source = readString2(rawAccess.source).toLowerCase();
+  const normalizedRole = role === "owner" || role === "editor" || role === "viewer" || role === "read_all" ? role : "none";
+  const normalizedSource = source === "owner" || source === "member" || source === "permission" ? source : "none";
+  const canRead = rawAccess.canRead === true || rawAccess.canRead === "true";
+  const canWrite = rawAccess.canWrite === true || rawAccess.canWrite === "true";
+  const canManageMembers = rawAccess.canManageMembers === true || rawAccess.canManageMembers === "true";
+  if (normalizedRole === "none" && normalizedSource === "none" && !canRead && !canWrite && !canManageMembers) {
+    return void 0;
+  }
+  return {
+    role: normalizedRole,
+    source: normalizedSource,
+    canRead,
+    canWrite,
+    canManageMembers
+  };
+}
 function toSession(session) {
   return {
-    ...session,
-    status: session.status === "archived" ? "archived" : "active"
+    id: readString2(session.id),
+    title: readString2(session.title),
+    status: session.status === "archived" ? "archived" : "active",
+    pinned: Boolean(session.pinned),
+    createdAt: readString2(session.createdAt),
+    updatedAt: readString2(session.updatedAt),
+    owner: mapSessionUser(session.owner),
+    isGroup: Boolean(session.isGroup),
+    memberCount: typeof session.memberCount === "number" ? session.memberCount : void 0,
+    access: mapSessionAccess(session.access)
   };
 }
 function toSessionArtifact(artifact) {
@@ -16701,6 +17569,7 @@ function sanitizeConversationTurn(rawTurn, index, fallbackSessionID) {
       id: userTurnID,
       content: readString2(rawTurn.userTurn.content),
       attachments: sanitizeUserAttachments(rawTurn.userTurn.attachments, turnID),
+      author: mapSessionUser(rawTurn.userTurn.author),
       createdAt: readString2(rawTurn.userTurn.createdAt, createdAt)
     },
     assistantTurn: sanitizeAssistantTurn(rawTurn.assistantTurn, createdAt, turnID),
@@ -17193,6 +18062,68 @@ async function clearSessionHistory(callRPC, sessionId) {
 async function compactSessionHistory(callRPC, sessionId) {
   return callRPC("bichat.session.compact", { id: sessionId });
 }
+async function listUsers(callRPC) {
+  const data = await callRPC("bichat.user.list", {});
+  return data.users.map((user) => ({
+    id: String(user.id),
+    firstName: user.firstName || "",
+    lastName: user.lastName || "",
+    initials: user.initials || ""
+  }));
+}
+async function listAllSessions(callRPC, options) {
+  const data = await callRPC("bichat.session.listAll", {
+    limit: options?.limit ?? 50,
+    offset: options?.offset ?? 0,
+    includeArchived: options?.includeArchived ?? false,
+    userId: options?.userId ?? null
+  });
+  return {
+    sessions: data.sessions.map(toSession),
+    total: typeof data.total === "number" ? data.total : data.sessions.length,
+    hasMore: Boolean(data.hasMore)
+  };
+}
+async function listSessionMembers(callRPC, sessionId) {
+  const data = await callRPC("bichat.session.members.list", { sessionId });
+  return data.members.map((member) => ({
+    user: {
+      id: String(member.user.id),
+      firstName: member.user.firstName,
+      lastName: member.user.lastName,
+      initials: member.user.initials
+    },
+    role: (() => {
+      const normalizedRole = (member.role || "").toLowerCase();
+      if (normalizedRole === "owner") {
+        return "owner";
+      }
+      if (normalizedRole === "editor") {
+        return "editor";
+      }
+      return "viewer";
+    })(),
+    createdAt: member.createdAt,
+    updatedAt: member.updatedAt
+  }));
+}
+async function addSessionMember(callRPC, sessionId, userId, role) {
+  await callRPC("bichat.session.members.add", {
+    sessionId,
+    userId,
+    role: role.toUpperCase()
+  });
+}
+async function updateSessionMemberRole(callRPC, sessionId, userId, role) {
+  await callRPC("bichat.session.members.updateRole", {
+    sessionId,
+    userId,
+    role: role.toUpperCase()
+  });
+}
+async function removeSessionMember(callRPC, sessionId, userId) {
+  await callRPC("bichat.session.members.remove", { sessionId, userId });
+}
 
 // ui/src/bichat/utils/sseParser.ts
 function* processDataLines(lines) {
@@ -17805,7 +18736,12 @@ async function uploadSessionArtifacts(callRPC, sessionId, files, uploadFileFn) {
   const data = await callRPC("bichat.session.uploadArtifacts", {
     sessionId,
     attachments: uploads.map((upload) => ({
-      uploadId: upload.id
+      id: String(upload.id),
+      filename: upload.name,
+      uploadId: upload.id,
+      mimeType: upload.mimetype || "application/octet-stream",
+      sizeBytes: upload.size,
+      url: upload.url
     }))
   });
   return {
@@ -17932,6 +18868,24 @@ var HttpDataSource = class {
   async compactSessionHistory(sessionId) {
     return compactSessionHistory(this.boundCallRPC, sessionId);
   }
+  async listUsers() {
+    return listUsers(this.boundCallRPC);
+  }
+  async listAllSessions(options) {
+    return listAllSessions(this.boundCallRPC, options);
+  }
+  async listSessionMembers(sessionId) {
+    return listSessionMembers(this.boundCallRPC, sessionId);
+  }
+  async addSessionMember(sessionId, userId, role) {
+    return addSessionMember(this.boundCallRPC, sessionId, userId, role);
+  }
+  async updateSessionMemberRole(sessionId, userId, role) {
+    return updateSessionMemberRole(this.boundCallRPC, sessionId, userId, role);
+  }
+  async removeSessionMember(sessionId, userId) {
+    return removeSessionMember(this.boundCallRPC, sessionId, userId);
+  }
   // -------------------------------------------------------------------------
   // Message transport (delegates to MessageTransport)
   // -------------------------------------------------------------------------
@@ -18067,6 +19021,7 @@ exports.AttachmentGrid = MemoizedAttachmentGrid;
 exports.AttachmentPreview = AttachmentPreview_default;
 exports.AttachmentUpload = AttachmentUpload_default;
 exports.Avatar = Avatar;
+exports.AvatarStack = AvatarStack;
 exports.BiChatLayout = BiChatLayout;
 exports.Bubble = Bubble;
 exports.CHART_VISUAL = CHART_VISUAL;
@@ -18110,6 +19065,7 @@ exports.SessionArtifactList = SessionArtifactList;
 exports.SessionArtifactPreview = SessionArtifactPreview;
 exports.SessionArtifactsPanel = SessionArtifactsPanel;
 exports.SessionItem = SessionItem_default;
+exports.SessionMembersModal = SessionMembersModal;
 exports.SessionSkeleton = SessionSkeleton;
 exports.Sidebar = Sidebar2;
 exports.Skeleton = MemoizedSkeleton;
@@ -18176,6 +19132,7 @@ exports.useActionButtonContext = useActionButtonContext;
 exports.useAttachments = useAttachments;
 exports.useAutoScroll = useAutoScroll;
 exports.useAvatarContext = useAvatarContext;
+exports.useBichatRouter = useBichatRouter;
 exports.useBubbleContext = useBubbleContext;
 exports.useChatInput = useChatInput;
 exports.useChatMessaging = useChatMessaging;
@@ -18183,6 +19140,7 @@ exports.useChatSession = useChatSession;
 exports.useConfig = useConfig;
 exports.useDataTable = useDataTable;
 exports.useFocusTrap = useFocusTrap;
+exports.useHttpDataSourceConfigFromApplet = useHttpDataSourceConfigFromApplet;
 exports.useImageGallery = useImageGallery;
 exports.useIotaContext = useIotaContext;
 exports.useKeyboardShortcuts = useKeyboardShortcuts;