deepspace 0.26.0 → 0.26.1

package/features/messaging/feature.json

@@ -2,8 +2,8 @@
   "id": "messaging",
   "name": "Messaging",
   "category": "data",
-  "description": "Real-time chat with channels, threads, reactions, and multi-channel support",
-  "details": "Complete messaging system with single-channel chat (ChatPage) and multi-channel Slack-like interface (ChatMultiPage). Includes message threads, reactions, read receipts, user profile popovers, channel management (create, browse, settings), DMs, invitations, and member management. Uses SDK messaging hooks (useChannels, useMessages, useReadReceipts).",
+  "description": "Public real-time chat with threads and reactions",
+  "details": "A focused public-channel chat page with threads, reactions, presence, read receipts, and optional confirmed channel membership hooks. Viewers can read public chat without joining; private groups and DMs are deliberately excluded because client-side membership checks do not provide server-side record isolation.",
   "files": [
     {
       "src": "src/messaging-schema.ts",
@@ -13,10 +13,6 @@
       "src": "src/ChatPage.tsx",
       "dest": "src/pages/chat.tsx"
     },
-    {
-      "src": "src/ChatMultiPage.tsx",
-      "dest": "src/pages/chat-multi.tsx"
-    },
     {
       "src": "src/hooks/useChatChannel.ts",
       "dest": "src/components/messaging/hooks/useChatChannel.ts"
@@ -25,10 +21,6 @@
       "src": "src/hooks/useLongPress.ts",
       "dest": "src/components/messaging/hooks/useLongPress.ts"
     },
-    {
-      "src": "src/hooks/useMultiChannel.ts",
-      "dest": "src/components/messaging/hooks/useMultiChannel.ts"
-    },
     {
       "src": "src/components/chat/ChatHeader.tsx",
       "dest": "src/components/messaging/chat/ChatHeader.tsx"
@@ -56,38 +48,6 @@
     {
       "src": "src/components/chat/MessageActionSheet.tsx",
       "dest": "src/components/messaging/chat/MessageActionSheet.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/ChannelSidebar.tsx",
-      "dest": "src/components/messaging/chat-multi/ChannelSidebar.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/ChannelListItem.tsx",
-      "dest": "src/components/messaging/chat-multi/ChannelListItem.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/CreateGroupModal.tsx",
-      "dest": "src/components/messaging/chat-multi/CreateGroupModal.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/NewMessageModal.tsx",
-      "dest": "src/components/messaging/chat-multi/NewMessageModal.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/BrowseGroupsModal.tsx",
-      "dest": "src/components/messaging/chat-multi/BrowseGroupsModal.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/ChannelSettingsPanel.tsx",
-      "dest": "src/components/messaging/chat-multi/ChannelSettingsPanel.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/AddMemberModal.tsx",
-      "dest": "src/components/messaging/chat-multi/AddMemberModal.tsx"
-    },
-    {
-      "src": "src/components/chat-multi/InvitationList.tsx",
-      "dest": "src/components/messaging/chat-multi/InvitationList.tsx"
     }
   ],
   "schema": {
@@ -101,7 +61,7 @@
   },
   "requires": [],
   "instructions": [
-    "Optionally add a nav entry for /chat-multi (the multi-channel view). Its route is created automatically from the bundled page file — only the nav link is manual."
+    "The included schemas and UI are for public channels. Add server-enforced tenant or participant scoping before implementing private groups or direct messages."
   ],
   "patterns": []
 }

package/features/messaging/src/ChatPage.tsx

@@ -5,8 +5,7 @@
 
 import { useEffect, useRef } from 'react'
 import { useChatChannel } from '../components/messaging/hooks/useChatChannel'
-import { useReadReceipts } from 'deepspace'
-import { RecordScope } from 'deepspace'
+import { RecordScope, useReadReceipts, useUser, isWriterRole } from 'deepspace'
 import type { CollectionSchema } from 'deepspace/schema'
 import { messagingSchemas } from '../schemas/messaging-schema'
 import { ChatHeader } from '../components/messaging/chat/ChatHeader'
@@ -23,18 +22,20 @@ export default function ChatPage({
   channelName = 'general',
   className,
 }: ChatPageProps) {
-  const { channelId, status, isMember, join } = useChatChannel(channelName)
+  const { channelId, status } = useChatChannel(channelName)
   const { markAsRead } = useReadReceipts()
+  const { user } = useUser()
   const lastMarkedRef = useRef<string | null>(null)
+  const canTrackReadState = isWriterRole(user?.role)
 
   useEffect(() => {
-    if (!channelId || !isMember) return
+    if (!channelId || !canTrackReadState) return
     if (lastMarkedRef.current === channelId) return
     lastMarkedRef.current = channelId
     markAsRead(channelId)
-  }, [channelId, isMember, markAsRead])
+  }, [canTrackReadState, channelId, markAsRead])
 
-  if (status !== 'ready' || !channelId) {
+  if (status !== 'ready') {
     // data-testid lets tests (and humans reading a trace) distinguish "stuck
     // waiting for the default channel" from "route never mounted".
     return (
@@ -47,20 +48,15 @@ export default function ChatPage({
     )
   }
 
-  if (!isMember) {
+  if (!channelId) {
     return (
       <div className={`flex flex-col h-full ${className ?? ''}`} data-testid="chat-page">
-        <ChatHeader channelId={channelId} />
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center">
-            <p className="text-foreground mb-3">You're not a member of this channel</p>
-            <button
-              data-testid="join-channel-btn"
-              onClick={join}
-              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
-            >
-              Join Channel
-            </button>
+            <p className="text-foreground">No public channel exists yet.</p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              A member or admin can create the first channel.
+            </p>
           </div>
         </div>
       </div>

package/features/messaging/src/components/chat/ChatHeader.tsx

@@ -1,10 +1,9 @@
 /**
- * ChatHeader -- Channel header showing name, description, and member count.
+ * ChatHeader -- Channel header showing the public channel name and description.
  * Generic styling (no Slack-specific prefixes like #).
  */
 
 import { useChannels } from 'deepspace'
-import { useChannelMembers } from 'deepspace'
 import type { Channel } from 'deepspace'
 import type { RecordData } from 'deepspace'
 
@@ -16,7 +15,6 @@ interface ChatHeaderProps {
 
 export function ChatHeader({ channelId, onToggleThread, threadOpen }: ChatHeaderProps) {
   const { channels } = useChannels()
-  const { members } = useChannelMembers(channelId)
 
   const channel = channels.find((c: RecordData<Channel>) => c.recordId === channelId)
 
@@ -42,14 +40,8 @@ export function ChatHeader({ channelId, onToggleThread, threadOpen }: ChatHeader
         )}
       </div>
 
-      <div className="flex items-center gap-2 shrink-0">
-        <span
-          className="text-xs text-muted-foreground"
-          data-testid="chat-header-member-count"
-        >
-          {members.length} {members.length === 1 ? 'member' : 'members'}
-        </span>
-        {onToggleThread && (
+      {onToggleThread && (
+        <div className="flex items-center gap-2 shrink-0">
           <button
             data-testid="toggle-thread-btn"
             onClick={onToggleThread}
@@ -69,8 +61,8 @@ export function ChatHeader({ channelId, onToggleThread, threadOpen }: ChatHeader
               />
             </svg>
           </button>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   )
 }

package/features/messaging/src/components/chat/MessageItem.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useUserLookup } from 'deepspace'
+import { useUserLookup, isWriterRole } from 'deepspace'
 import { useUser } from 'deepspace'
 import { usePresence } from 'deepspace'
 import type { Message } from 'deepspace'
@@ -43,7 +43,6 @@ interface MessageItemProps {
   forceEdit?: boolean
   onEditDone?: () => void
   isHighlighted?: boolean
-  onStartDM?: (userId: string) => void
 }
 
 export function MessageItem({
@@ -59,7 +58,6 @@ export function MessageItem({
   forceEdit = false,
   onEditDone,
   isHighlighted = false,
-  onStartDM,
 }: MessageItemProps) {
   const { getUser } = useUserLookup()
   const { user: currentUser } = useUser()
@@ -74,11 +72,12 @@ export function MessageItem({
   const authorId = message.data.authorId || message.createdBy
   const author = getUser(authorId)
   const isOwn = currentUser?.id === authorId || currentUser?.id === message.createdBy
+  const canWrite = isWriterRole(currentUser?.role)
   const online = isOnline(authorId)
 
   const longPressHandlers = useLongPress(
     () => {
-      if (!contentRef.current) return
+      if (!canWrite || !contentRef.current) return
       const rect = contentRef.current.getBoundingClientRect()
       onLongPress?.({
         top: rect.top,
@@ -198,9 +197,7 @@ export function MessageItem({
       {/* Avatar column */}
       <div className="shrink-0 w-10">
         {isFirstInGroup ? (
-          <UserProfilePopover userId={authorId} onStartDM={onStartDM}>
-            {avatar}
-          </UserProfilePopover>
+          <UserProfilePopover userId={authorId}>{avatar}</UserProfilePopover>
         ) : (
           <span className="w-full pt-1 flex justify-center text-[10px] text-muted-foreground/0 group-hover:text-muted-foreground/70 transition-colors select-none">
             {timeStr}
@@ -212,7 +209,7 @@ export function MessageItem({
       <div ref={contentRef} className={`flex-1 min-w-0 ${isHighlighted ? 'invisible' : ''}`}>
         {isFirstInGroup && (
           <div className="flex items-baseline gap-2 mb-0.5">
-            <UserProfilePopover userId={authorId} onStartDM={onStartDM}>
+            <UserProfilePopover userId={authorId}>
               <span className="text-sm font-semibold text-foreground hover:underline cursor-pointer">
                 {author?.name ?? 'Unknown'}
               </span>
@@ -289,6 +286,7 @@ export function MessageItem({
                 key={r.emoji}
                 data-testid={`reaction-${message.recordId}-${r.emoji}`}
                 onClick={() => onToggleReaction(r.emoji)}
+                disabled={!canWrite}
                 className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border transition-colors ${
                   r.currentUserReacted
                     ? 'bg-primary/15 border-primary/30 text-primary'
@@ -315,7 +313,7 @@ export function MessageItem({
       </div>
 
       {/* Desktop hover toolbar */}
-      {!isEditing && (
+      {!isEditing && canWrite && (
         <div
           data-testid={`hover-toolbar-${message.recordId}`}
           className="absolute -top-3 right-5 flex items-center gap-0.5 bg-card border border-border/60 rounded-lg shadow-sm p-0.5 transition-all duration-100 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"

package/features/messaging/src/components/chat/MessageList.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import { useMessages } from 'deepspace'
+import { useMessages, isWriterRole } from 'deepspace'
 import { useReactions } from 'deepspace'
 import { useUser } from 'deepspace'
 import type { Message } from 'deepspace'
@@ -17,7 +17,6 @@ import { ThreadPanel } from './ThreadPanel'
 
 interface MessageListProps {
   channelId: string
-  onStartDM?: (userId: string) => void
 }
 
 interface ActionSheetState {
@@ -39,7 +38,9 @@ function isFirstInGroup(msgs: RecordData<Message>[], i: number): boolean {
   const prev = msgs[i - 1]
   const curr = msgs[i]
   if (getAuthorId(prev) !== getAuthorId(curr)) return true
-  return new Date(curr.createdAt).getTime() - new Date(prev.createdAt).getTime() >= GROUP_THRESHOLD_MS
+  return (
+    new Date(curr.createdAt).getTime() - new Date(prev.createdAt).getTime() >= GROUP_THRESHOLD_MS
+  )
 }
 
 function formatTime(date: Date): string {
@@ -53,14 +54,19 @@ function getSeparatorLabel(date: Date): string {
 
   if (date.toDateString() === today.toDateString()) return `Today ${formatTime(date)}`
   if (date.toDateString() === yesterday.toDateString()) return `Yesterday ${formatTime(date)}`
-  return date.toLocaleDateString(undefined, {
-    weekday: 'long',
-    month: 'long',
-    day: 'numeric',
-  }) + ` ${formatTime(date)}`
+  return (
+    date.toLocaleDateString(undefined, {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+    }) + ` ${formatTime(date)}`
+  )
 }
 
-function shouldShowSeparator(current: RecordData<Message>, prev: RecordData<Message> | undefined): boolean {
+function shouldShowSeparator(
+  current: RecordData<Message>,
+  prev: RecordData<Message> | undefined,
+): boolean {
   if (!prev) return true
   const curDate = new Date(current.createdAt)
   const prevDate = new Date(prev.createdAt)
@@ -68,10 +74,11 @@ function shouldShowSeparator(current: RecordData<Message>, prev: RecordData<Mess
   return curDate.getTime() - prevDate.getTime() >= TIME_SEPARATOR_GAP_MS
 }
 
-export function MessageList({ channelId, onStartDM }: MessageListProps) {
+export function MessageList({ channelId }: MessageListProps) {
   const { messages, status, send, edit, softDelete } = useMessages(channelId)
   const { getReactionsForMessage, toggle: toggleReaction } = useReactions(channelId)
   const { user: currentUser } = useUser()
+  const canWrite = isWriterRole(currentUser?.role)
   const bottomRef = useRef<HTMLDivElement>(null)
   const feedRef = useRef<HTMLDivElement>(null)
   const isInitialMount = useRef(true)
@@ -85,17 +92,14 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
       messages
         .filter((m: RecordData<Message>) => !m.data.parentMessageId)
         .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),
-    [messages]
+    [messages],
   )
 
   const threadCounts = useMemo(() => {
     const counts = new Map<string, number>()
     for (const m of messages) {
       if (m.data.parentMessageId) {
-        counts.set(
-          m.data.parentMessageId,
-          (counts.get(m.data.parentMessageId) ?? 0) + 1
-        )
+        counts.set(m.data.parentMessageId, (counts.get(m.data.parentMessageId) ?? 0) + 1)
       }
     }
     return counts
@@ -127,6 +131,7 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
 
   const handleLongPress = useCallback(
     (msg: RecordData<Message>, rect: MessageRect) => {
+      if (!canWrite) return
       const authorId = msg.data.authorId || msg.createdBy
       const isOwn = currentUser?.id === authorId || currentUser?.id === msg.createdBy
       setActionSheet({
@@ -136,7 +141,7 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
         rect,
       })
     },
-    [currentUser]
+    [canWrite, currentUser],
   )
 
   if (status === 'loading') {
@@ -163,12 +168,18 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
   return (
     <div className="flex flex-1 min-h-0">
       <div className={`flex flex-col flex-1 min-w-0 ${threadOpen ? 'hidden md:flex' : 'flex'}`}>
-        <div ref={feedRef} className="flex-1 overflow-y-auto overflow-x-hidden flex flex-col" data-testid="messages-feed">
+        <div
+          ref={feedRef}
+          className="flex-1 overflow-y-auto overflow-x-hidden flex flex-col"
+          data-testid="messages-feed"
+        >
           {topLevelMessages.length === 0 ? (
             <div className="flex items-center justify-center flex-1">
               <div className="text-center text-muted-foreground">
                 <p className="text-lg mb-1">No messages yet</p>
-                <p className="text-sm">Be the first to send a message!</p>
+                <p className="text-sm">
+                  {canWrite ? 'Be the first to send a message!' : 'There are no messages yet.'}
+                </p>
               </div>
             </div>
           ) : (
@@ -181,7 +192,10 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
                 return (
                   <div key={msg.recordId}>
                     {showSeparator && (
-                      <div className="relative flex items-center justify-center my-2 mx-4" data-testid="date-separator">
+                      <div
+                        className="relative flex items-center justify-center my-2 mx-4"
+                        data-testid="date-separator"
+                      >
                         <div className="absolute inset-0 flex items-center">
                           <div className="w-full border-t border-border" />
                         </div>
@@ -203,7 +217,6 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
                       forceEdit={editingMessageId === msg.recordId}
                       onEditDone={() => setEditingMessageId(null)}
                       isHighlighted={actionSheet?.messageId === msg.recordId}
-                      onStartDM={onStartDM}
                     />
                   </div>
                 )
@@ -213,7 +226,9 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
           )}
         </div>
 
-        <MessageInput onSend={(content) => send(content)} placeholder="Type a message..." />
+        {canWrite && (
+          <MessageInput onSend={(content) => send(content)} placeholder="Type a message..." />
+        )}
       </div>
 
       {threadMessageId && (
@@ -224,25 +239,27 @@ export function MessageList({ channelId, onStartDM }: MessageListProps) {
         />
       )}
 
-      <MessageActionSheet
-        visible={!!actionSheet}
-        onClose={() => setActionSheet(null)}
-        isOwn={actionSheet?.isOwn ?? false}
-        onReaction={(emoji) => {
-          if (actionSheet) toggleReaction(actionSheet.messageId, emoji)
-        }}
-        onEdit={() => {
-          if (actionSheet) setEditingMessageId(actionSheet.messageId)
-        }}
-        onDelete={() => {
-          if (actionSheet) softDelete(actionSheet.messageId)
-        }}
-        onReply={() => {
-          if (actionSheet) setThreadMessageId(actionSheet.messageId)
-        }}
-        messageContent={actionSheet?.content ?? ''}
-        messageRect={actionSheet?.rect ?? null}
-      />
+      {canWrite && (
+        <MessageActionSheet
+          visible={!!actionSheet}
+          onClose={() => setActionSheet(null)}
+          isOwn={actionSheet?.isOwn ?? false}
+          onReaction={(emoji) => {
+            if (actionSheet) toggleReaction(actionSheet.messageId, emoji)
+          }}
+          onEdit={() => {
+            if (actionSheet) setEditingMessageId(actionSheet.messageId)
+          }}
+          onDelete={() => {
+            if (actionSheet) softDelete(actionSheet.messageId)
+          }}
+          onReply={() => {
+            if (actionSheet) setThreadMessageId(actionSheet.messageId)
+          }}
+          messageContent={actionSheet?.content ?? ''}
+          messageRect={actionSheet?.rect ?? null}
+        />
+      )}
     </div>
   )
 }

package/features/messaging/src/components/chat/ThreadPanel.tsx

@@ -4,9 +4,10 @@
  */
 
 import { useEffect, useRef } from 'react'
-import { useMessages } from 'deepspace'
+import { useMessages, isWriterRole } from 'deepspace'
 import { useReactions } from 'deepspace'
 import { useUserLookup } from 'deepspace'
+import { useUser } from 'deepspace'
 import type { Message } from 'deepspace'
 import type { RecordData } from 'deepspace'
 import { MessageItem } from './MessageItem'
@@ -20,16 +21,21 @@ interface ThreadPanelProps {
 
 export function ThreadPanel({ channelId, parentMessageId, onClose }: ThreadPanelProps) {
   const { messages: allMessages } = useMessages(channelId)
-  const { messages: replies, send, edit, remove } = useMessages(channelId, {
+  const {
+    messages: replies,
+    send,
+    edit,
+    remove,
+  } = useMessages(channelId, {
     parentMessageId,
   })
   const { getReactionsForMessage, toggle: toggleReaction } = useReactions(channelId)
   const { getUser } = useUserLookup()
+  const { user } = useUser()
+  const canWrite = isWriterRole(user?.role)
   const bottomRef = useRef<HTMLDivElement>(null)
 
-  const parentMessage = allMessages.find(
-    (m: RecordData<Message>) => m.recordId === parentMessageId
-  )
+  const parentMessage = allMessages.find((m: RecordData<Message>) => m.recordId === parentMessageId)
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
@@ -58,7 +64,13 @@ export function ThreadPanel({ channelId, parentMessageId, onClose }: ThreadPanel
           onClick={onClose}
           className="p-1 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
         >
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
@@ -72,7 +84,10 @@ export function ThreadPanel({ channelId, parentMessageId, onClose }: ThreadPanel
             </span>
             <span className="text-xs text-muted-foreground">{parentTime}</span>
           </div>
-          <p className="text-sm text-foreground/90 whitespace-pre-wrap break-words" data-testid="thread-parent-content">
+          <p
+            className="text-sm text-foreground/90 whitespace-pre-wrap break-words"
+            data-testid="thread-parent-content"
+          >
             {parentMessage.data.content}
           </p>
           <div className="mt-1.5 text-xs text-muted-foreground">
@@ -98,10 +113,9 @@ export function ThreadPanel({ channelId, parentMessageId, onClose }: ThreadPanel
         <div ref={bottomRef} />
       </div>
 
-      <MessageInput
-        onSend={(content) => send(content, parentMessageId)}
-        placeholder="Reply..."
-      />
+      {canWrite && (
+        <MessageInput onSend={(content) => send(content, parentMessageId)} placeholder="Reply..." />
+      )}
     </div>
   )
 }

package/features/messaging/src/components/chat/UserProfilePopover.tsx

@@ -5,13 +5,11 @@
 
 import { useState, useRef, useEffect, useCallback, type ReactNode } from 'react'
 import { useUserLookup } from 'deepspace'
-import { useUser } from 'deepspace'
 import { usePresence } from 'deepspace'
 
 interface UserProfilePopoverProps {
   userId: string
   children: ReactNode
-  onStartDM?: (userId: string) => void
 }
 
 function formatLastSeen(lastSeenAt: string | undefined): string {
@@ -28,9 +26,8 @@ function formatLastSeen(lastSeenAt: string | undefined): string {
 
 const POPOVER_HEIGHT_ESTIMATE = 180
 
-export function UserProfilePopover({ userId, children, onStartDM }: UserProfilePopoverProps) {
+export function UserProfilePopover({ userId, children }: UserProfilePopoverProps) {
   const { getUser } = useUserLookup()
-  const { user: currentUser } = useUser()
   const { isOnline, users } = usePresence()
   const [open, setOpen] = useState(false)
   const [placement, setPlacement] = useState<'below' | 'above'>('below')
@@ -49,9 +46,7 @@ export function UserProfilePopover({ userId, children, onStartDM }: UserProfileP
         const rect = triggerRef.current.getBoundingClientRect()
         const spaceBelow = window.innerHeight - rect.bottom
         const inBottomHalf = rect.top > window.innerHeight / 2
-        setPlacement(
-          spaceBelow < POPOVER_HEIGHT_ESTIMATE || inBottomHalf ? 'above' : 'below'
-        )
+        setPlacement(spaceBelow < POPOVER_HEIGHT_ESTIMATE || inBottomHalf ? 'above' : 'below')
       }
       return !prev
     })
@@ -61,8 +56,10 @@ export function UserProfilePopover({ userId, children, onStartDM }: UserProfileP
     if (!open) return
     function handleClickOutside(e: MouseEvent) {
       if (
-        popoverRef.current && !popoverRef.current.contains(e.target as Node) &&
-        triggerRef.current && !triggerRef.current.contains(e.target as Node)
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target as Node)
       ) {
         close()
       }
@@ -81,9 +78,7 @@ export function UserProfilePopover({ userId, children, onStartDM }: UserProfileP
     }
   }, [open, close])
 
-  const positionClass = placement === 'above'
-    ? 'bottom-full mb-2 left-0'
-    : 'top-full mt-2 left-0'
+  const positionClass = placement === 'above' ? 'bottom-full mb-2 left-0' : 'top-full mt-2 left-0'
 
   return (
     <span className="relative inline-flex">
@@ -118,7 +113,9 @@ export function UserProfilePopover({ userId, children, onStartDM }: UserProfileP
               />
             </div>
             <div className="flex-1 min-w-0">
-              <p className="text-sm font-semibold text-foreground truncate">{user.name ?? 'Unknown'}</p>
+              <p className="text-sm font-semibold text-foreground truncate">
+                {user.name ?? 'Unknown'}
+              </p>
               {roomUser?.role && (
                 <span className="inline-block mt-0.5 px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
                   {roomUser.role}
@@ -135,22 +132,6 @@ export function UserProfilePopover({ userId, children, onStartDM }: UserProfileP
               {online ? 'Online' : `Last seen ${formatLastSeen(roomUser?.lastSeenAt)}`}
             </p>
           </div>
-
-          {onStartDM && currentUser?.id !== userId && (
-            <button
-              data-testid={`dm-from-profile-${userId}`}
-              onClick={() => {
-                onStartDM(userId)
-                close()
-              }}
-              className="mt-3 w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
-            >
-              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-              </svg>
-              Message
-            </button>
-          )}
         </div>
       )}
     </span>