chore: add system docs, specs, and misc updates from other sessions

- Add complete docs/systems/ reference (18 system docs)
- Add federation relay status doc and prior spec/plan docs
- Remove superseded docs/federation-dm-s2s.md (replaced by docs/systems/federation.md)
- CLAUDE.md updates
- Minor fixes in social.ts, types.ts, AddDmMemberModal, NewDmModal, UserSettings

packages/web/src/components/modals/NewDmModal.tsx

@@ -6,6 +6,7 @@ import { useUIStore } from '../../stores/uiStore';
 import { useSpaceStore, getApiForOrigin, resolveUserOrigin } from '../../stores/spaceStore';
 import { api } from '../../api/client';
 import type { User } from '@backspace/shared';
+import { parseFederatedUsername } from '../../utils/identity';
 
 export function NewDmModal() {
   const [query, setQuery] = useState('');
@@ -103,21 +104,25 @@ export function NewDmModal() {
             <div className="py-4 text-center text-txt-tertiary text-[14px]">No users found</div>
           )}
 
-          {results.map((user) => (
-            <button
-              key={user.id}
-              onClick={() => handleSelectUser(user)}
-              className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left"
-            >
-              <Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} userId={user.homeUserId ?? user.id} />
-              <div className="flex-1 min-w-0">
-                <div className="text-[14px] font-medium text-txt-primary truncate">
-                  {user.displayName ?? user.username}
+          {results.map((user) => {
+            const { baseName } = parseFederatedUsername(user.username);
+            const displayName = user.displayName ?? baseName;
+            return (
+              <button
+                key={user.id}
+                onClick={() => handleSelectUser(user)}
+                className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left"
+              >
+                <Avatar src={user.avatar} name={displayName} size={36} status={user.status as any} userId={user.homeUserId ?? user.id} avatarColor={user.avatarColor} />
+                <div className="flex-1 min-w-0">
+                  <div className="text-[14px] font-medium text-txt-primary truncate">
+                    {displayName}
+                  </div>
+                  <div className="text-[12px] text-txt-tertiary truncate">@{user.username}</div>
                 </div>
-                <div className="text-[12px] text-txt-tertiary truncate">@{user.username}</div>
-              </div>
-            </button>
-          ))}
+              </button>
+            );
+          })}
         </div>
       </div>
     </Modal>