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,13 +598,22 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
 }
 
 function SystemMessage({ message }: { message: MessageWithUser }) {
-  let text = '';
-  let icon = '';
+  let data: Record<string, unknown> = {};
+  try { data = JSON.parse(message.content ?? '{}'); } catch { /* fall through */ }
 
-  try {
-    const data = JSON.parse(message.content ?? '{}');
   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) {
     case 'member_added':
       icon = '\u2192'; // →
@@ -623,9 +633,6 @@ function SystemMessage({ message }: { message: MessageWithUser }) {
       text = `${data.newOwnerDisplayName} is now the group owner`;
       break;
     default:
-        text = 'Unknown event';
-    }
-  } catch {
       text = message.content ?? '';
   }