fix(dm): render system messages in sidebar preview instead of raw JSON

DmLastMessagePreview lacked a `type` field, so the sidebar rendered
`lastMessage.content` verbatim — surfacing JSON like
`{"event":"space_invite",...}` for space invites and member-add events.

Adds `type` to the preview payload (populated server-side from
`dm_messages.type`) and routes all sidebar call sites through a single
`formatDmSidebarPreview` helper that renders human-readable text for
each system event and skips the group `Sender:` prefix on system rows.

packages/server/src/routes/dm.ts

@@ -439,7 +439,7 @@ export async function dmRoutes(app: FastifyInstance): Promise<void> {
       .groupBy(schema.dmMessages.dmChannelId)
       .all();
 
-    const lastMessageMap = new Map<string, { id: string; dmChannelId: string; userId: string; content: string | null; createdAt: number }>();
+    const lastMessageMap = new Map<string, { id: string; dmChannelId: string; userId: string; content: string | null; createdAt: number; type: 'user' | 'system' }>();
     if (maxTimestamps.length > 0) {
       // Build conditions to fetch the actual message rows matching max timestamps
       const conditions = maxTimestamps.map(t =>
@@ -455,6 +455,7 @@ export async function dmRoutes(app: FastifyInstance): Promise<void> {
           lastMessageMap.set(m.dmChannelId, {
             id: m.id, dmChannelId: m.dmChannelId, userId: m.userId,
             content: m.content, createdAt: m.createdAt,
+            type: m.type === 'system' ? 'system' : 'user',
           });
         }
       }
@@ -502,6 +503,7 @@ export async function dmRoutes(app: FastifyInstance): Promise<void> {
           userId: lastMsg.userId,
           content: lastMsg.content,
           createdAt: lastMsg.createdAt,
+          type: lastMsg.type,
           attachments: lastMsgAttachmentMap.get(lastMsg.id) ?? [],
         } : null,
       });
@@ -621,6 +623,7 @@ export async function dmRoutes(app: FastifyInstance): Promise<void> {
             userId: lastMsg.userId,
             content: lastMsg.content,
             createdAt: lastMsg.createdAt,
+            type: lastMsg.type === 'system' ? 'system' : 'user',
           } : null,
         };
 
@@ -1145,6 +1148,7 @@ export async function dmRoutes(app: FastifyInstance): Promise<void> {
         userId: lastMsg.userId,
         content: lastMsg.content,
         createdAt: lastMsg.createdAt,
+        type: lastMsg.type === 'system' ? 'system' : 'user',
       } : null,
     };
 

packages/server/src/ws/handler.ts

@@ -1328,6 +1328,7 @@ function buildReadyPayload(userId: string): {
           userId: last.userId,
           content: last.content,
           createdAt: last.createdAt,
+          type: last.type === 'system' ? 'system' : 'user',
           attachments: dmLastMsgAttachmentMap.get(last.id) ?? [],
         } : null,
       });

packages/shared/src/types.ts

@@ -294,6 +294,12 @@ export interface DmLastMessagePreview {
   userId: string;
   content: string | null;
   createdAt: number;
+  /**
+   * 'system' for membership/lifecycle JSON payloads (member_added, member_removed,
+   * owner_changed, space_invite). 'user' (or omitted) for normal user-authored
+   * messages. The sidebar renderer relies on this to avoid showing raw JSON.
+   */
+  type?: 'user' | 'system';
   attachments?: Array<{ type: string; filename: string }>;
 }
 

packages/web/src/components/layout/DmListItem.tsx

@@ -2,7 +2,7 @@ import type { DmChannel, User } from '@backspace/shared';
 import { Avatar } from '../ui/Avatar';
 import { Tooltip } from '../ui/Tooltip';
 import { parseFederatedUsername, isSelf } from '../../utils/identity';
-import { formatDmTimestamp, formatDmPreview } from '../../utils/dmFormatters';
+import { formatDmTimestamp, formatDmSidebarPreview } from '../../utils/dmFormatters';
 import { getRejectedPeerOrigins, getAwaitingApprovalPeerOrigins } from '../../hooks/useWebSocket';
 
 function isMemberUnreachable(homeInstance: string | null | undefined): boolean {
@@ -98,19 +98,11 @@ export function DmListItem({ dm, isActive, isUnread, user, onSelect, onClose, on
   } text-txt-tertiary hover:text-txt-primary transition-opacity flex-shrink-0 ml-1`;
 
   // ── Preview text ──────────────────────────────────────────────────────
-  const preview = formatDmPreview(dm.lastMessage ?? null);
-  let previewText: string | null = null;
-  if (isGroup) {
-    const lastMsg = dm.lastMessage;
-    const senderName = (lastMsg && 'user' in lastMsg ? lastMsg.user?.displayName : undefined)
-      ?? dm.members.find(m => m.id === lastMsg?.userId)?.displayName
-      ?? 'Unknown';
-    previewText = preview
-      ? `${senderName}: ${preview}`
-      : `${dm.members.length} Members`;
-  } else {
-    previewText = preview;
-  }
+  // formatDmSidebarPreview handles user/system messages and applies the
+  // sender prefix for group user-messages. We only need to provide the
+  // empty-group fallback ourselves.
+  const preview = formatDmSidebarPreview(dm, user);
+  const previewText = preview ?? (isGroup ? `${dm.members.length} Members` : null);
 
   const itemJsx = (
     <div

packages/web/src/components/layout/MobileDmsScreen.tsx

@@ -10,6 +10,7 @@ import { Mascot } from '../ui/Mascot';
 import { resolveAssetUrl } from '../../utils/assetUrls';
 import { useNavigate } from 'react-router-dom';
 import { parseFederatedUsername } from '../../utils/identity';
+import { formatDmSidebarPreview } from '../../utils/dmFormatters';
 
 export function MobileDmsScreen() {
   const pushMobileScreen = useUIStore((s) => s.pushMobileScreen);
@@ -151,11 +152,10 @@ export function MobileDmsScreen() {
           const readState = readStates.get(dm.id);
           const isUnread = lastMsgId && (!readState || readState < lastMsgId);
 
-          const preview = dm.lastMessage?.content;
+          // formatDmSidebarPreview returns the full preview line (system messages
+          // get human-readable text; group user-messages get the "Sender: " prefix).
+          const preview = formatDmSidebarPreview(dm, authUser ?? null);
           const previewTime = dm.lastMessage?.createdAt;
-          const previewSender = dm.lastMessage
-            ? dm.members.find(m => m.id === dm.lastMessage!.userId)
-            : null;
 
           const mainUser = otherMembers[0];
           const avatarUrl = mainUser?.avatar
@@ -206,9 +206,7 @@ export function MobileDmsScreen() {
                 })()}
                 {preview && (
                   <p className={`text-xs truncate mt-0.5 ${isUnread ? 'text-txt-secondary font-medium' : 'text-txt-tertiary'}`}>
-                    {previewSender && previewSender.id !== authUser?.id
-                      ? `${previewSender.displayName ?? parseFederatedUsername(previewSender.username).baseName}: ${preview}`
-                      : preview}
+                    {preview}
                   </p>
                 )}
               </div>

packages/web/src/utils/dmFormatters.ts

@@ -1,3 +1,6 @@
+import type { DmChannel, DmMessageWithUser, DmLastMessagePreview, User, SpaceInviteSystemPayload } from '@backspace/shared';
+import { parseFederatedUsername, isSelf } from './identity';
+
 // ─── DM Preview Formatting ────────────────────────────────────────────────────
 
 /**
@@ -50,7 +53,7 @@ function getUnifiedAttachmentIcon(attachments: PreviewAttachment[]): string {
 }
 
 /**
- * Format a DM lastMessage into a sidebar preview string.
+ * Format a DM lastMessage's user-authored content into a sidebar preview string.
  * Returns null if there is nothing displayable.
  *
  * Handles:
@@ -58,6 +61,10 @@ function getUnifiedAttachmentIcon(attachments: PreviewAttachment[]): string {
  *  - Attachment only (single) → "📷 Image", "🎬 Video", "🎵 Audio", "📎 filename.ext"
  *  - Attachment only (multiple) → "📎 N files"
  *  - Text + attachments → "text 📷" (appends unified icon)
+ *
+ * NOTE: This helper does NOT understand system messages — for those, use
+ * `formatDmSidebarPreview` which inspects `type` and routes to a system-message
+ * renderer. Calling this directly on a system message would surface raw JSON.
  */
 export function formatDmPreview(lastMessage: PreviewMessage | null | undefined): string | null {
   if (!lastMessage) return null;
@@ -85,6 +92,117 @@ export function formatDmPreview(lastMessage: PreviewMessage | null | undefined):
   return `${content} ${icon}`;
 }
 
+// ─── System Message Preview Formatting ───────────────────────────────────────
+
+interface SystemEventPayload {
+  event?: unknown;
+  targetUserId?: unknown;
+  targetDisplayName?: unknown;
+  newOwnerId?: unknown;
+  newOwnerDisplayName?: unknown;
+  reason?: unknown;
+  // space_invite payload
+  snapshot?: { spaceName?: unknown };
+}
+
+function asString(v: unknown): string | null {
+  return typeof v === 'string' && v.length > 0 ? v : null;
+}
+
+function resolveDisplayName(user: User | null | undefined): string {
+  if (!user) return 'Unknown';
+  if (user.displayName) return user.displayName;
+  return parseFederatedUsername(user.username ?? '').baseName || 'Unknown';
+}
+
+/**
+ * Format a system DM message (member_added, member_removed, owner_changed,
+ * space_invite) into a human-readable sidebar preview. Falls back to a generic
+ * label for unknown event shapes so we never leak raw JSON to the sidebar.
+ */
+function formatSystemPreview(content: string | null, actor: User | null | undefined): string {
+  let data: SystemEventPayload = {};
+  if (content) {
+    try { data = JSON.parse(content) as SystemEventPayload; } catch { /* malformed → generic fallback */ }
+  }
+  const event = asString(data.event);
+  const actorName = resolveDisplayName(actor);
+
+  switch (event) {
+    case 'space_invite': {
+      const spaceName = asString((data as Partial<SpaceInviteSystemPayload>).snapshot?.spaceName);
+      return spaceName
+        ? `📨 Sent invite to ${spaceName}`
+        : '📨 Sent a space invite';
+    }
+    case 'member_added': {
+      const target = asString(data.targetDisplayName) ?? 'someone';
+      return `${actorName} added ${target}`;
+    }
+    case 'member_removed': {
+      const target = asString(data.targetDisplayName) ?? 'someone';
+      const reason = asString(data.reason);
+      if (reason === 'leave') return `${target} left the group`;
+      return `${actorName} removed ${target}`;
+    }
+    case 'owner_changed': {
+      const newOwner = asString(data.newOwnerDisplayName) ?? 'A member';
+      return `${newOwner} is now the group owner`;
+    }
+    default:
+      return 'System message';
+  }
+}
+
+// ─── Unified Sidebar Preview ─────────────────────────────────────────────────
+
+type LastMessageLike = DmLastMessagePreview | DmMessageWithUser;
+
+function isSystemMessage(m: LastMessageLike): boolean {
+  return m.type === 'system';
+}
+
+/**
+ * Produce the full sidebar preview line for a DM channel. Handles:
+ *  - User messages → text/attachment formatting (with `Sender: ` prefix in groups
+ *    when the author is not the current user)
+ *  - System messages → human-readable rendering with no sender prefix (the system
+ *    text already incorporates the actor where appropriate)
+ *  - Empty state → null (caller decides the fallback, e.g. "N Members")
+ */
+export function formatDmSidebarPreview(
+  dm: Pick<DmChannel, 'lastMessage' | 'ownerId' | 'members'>,
+  currentUser: { id: string; username: string } | null,
+): string | null {
+  const lastMessage = dm.lastMessage ?? null;
+  if (!lastMessage) return null;
+
+  // Resolve the message author from the channel members. Falls back to the
+  // user object embedded in DmMessageWithUser if the member roster doesn't
+  // include them (e.g. a remote actor in federation bootstrap).
+  const actor: User | null = (
+    dm.members.find(m => m.id === lastMessage.userId)
+    ?? ('user' in lastMessage ? lastMessage.user : null)
+    ?? null
+  );
+
+  if (isSystemMessage(lastMessage)) {
+    return formatSystemPreview(lastMessage.content ?? null, actor);
+  }
+
+  const text = formatDmPreview(lastMessage);
+  if (!text) return null;
+
+  const isGroup = !!dm.ownerId;
+  if (!isGroup) return text;
+
+  // Group user messages: prefix with sender display name unless it's the current user.
+  const authoredBySelf = currentUser ? isSelf({ id: lastMessage.userId, username: actor?.username ?? '', homeInstance: actor?.homeInstance ?? null }, currentUser) : false;
+  if (authoredBySelf) return text;
+
+  return `${resolveDisplayName(actor)}: ${text}`;
+}
+
 // ─── DM Timestamp Formatting ─────────────────────────────────────────────────
 
 /**