feat(web): SystemMessage dispatches space_invite to SpaceInviteCard

packages/web/src/components/chat/MessageList.tsx

@@ -10,7 +10,8 @@ import { Avatar } from '../ui/Avatar';
 import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import { isSelf, parseFederatedUsername } from '../../utils/identity';
 import { useDelayedLoading } from '../../hooks/useDelayedLoading';
-import type { MessageWithUser } from '@backspace/shared';
+import type { MessageWithUser, SpaceInviteSystemPayload } from '@backspace/shared';
+import { SpaceInviteCard } from './SpaceInviteCard';
 
 const EMPTY_MESSAGES: MessageWithUser[] = [];
 
@@ -597,36 +598,42 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
 }
 
 function SystemMessage({ message }: { message: MessageWithUser }) {
+  let data: Record<string, unknown> = {};
+  try { data = JSON.parse(message.content ?? '{}'); } catch { /* fall through */ }
+
+  const actorName = message.user?.displayName ?? message.user?.username ?? 'Someone';
+
+  if (data.event === 'space_invite') {
+    return (
+      <div className="px-4 py-1">
+        <SpaceInviteCard payload={data as unknown as SpaceInviteSystemPayload} senderName={actorName} />
+      </div>
+    );
+  }
+
+  // Legacy inline-text events
   let text = '';
   let icon = '';
-
+  switch (data.event) {
-  try {
+    case 'member_added':
-    const data = JSON.parse(message.content ?? '{}');
+      icon = '\u2192'; // →
-    const actorName = message.user?.displayName ?? message.user?.username ?? 'Someone';
+      text = `${actorName} added ${data.targetDisplayName} to the group`;
-
+      break;
-    switch (data.event) {
+    case 'member_removed':
-      case 'member_added':
+      if (data.reason === 'leave') {
-        icon = '\u2192'; // →
+        icon = '\u2190'; // ←
-        text = `${actorName} added ${data.targetDisplayName} to the group`;
+        text = `${data.targetDisplayName} left the group`;
-        break;
+      } else {
-      case 'member_removed':
+        icon = '\u2190';
-        if (data.reason === 'leave') {
+        text = `${actorName} removed ${data.targetDisplayName} from the group`;
-          icon = '\u2190'; // ←
+      }
-          text = `${data.targetDisplayName} left the group`;
+      break;
-        } else {
+    case 'owner_changed':
-          icon = '\u2190';
+      icon = '\u265B'; // ♛
-          text = `${actorName} removed ${data.targetDisplayName} from the group`;
+      text = `${data.newOwnerDisplayName} is now the group owner`;
-        }
+      break;
-        break;
+    default:
-      case 'owner_changed':
+      text = message.content ?? '';
-        icon = '\u265B'; // ♛
-        text = `${data.newOwnerDisplayName} is now the group owner`;
-        break;
-      default:
-        text = 'Unknown event';
-    }
-  } catch {
-    text = message.content ?? '';
   }
 
   return (