feat(client-federation): user-view cache for cross-instance DM render

Fixes a render bug where a federated user (e.g. axel@nova) appeared with
the federation globe icon and a broken avatar when viewed on his own home
instance. Root cause: `populateFromReady` is first-wins by federatedId and
discards the entire skipped DM payload — including its `members` array —
so when a sibling instance's ready arrived first, the home instance's view
of every shared user was dropped on the floor.

Adds a render-only `userViews` cache that mirrors the `dmAlternatives`
philosophy: information from skipped ready payloads is preserved for
rendering. Every wire surface that delivers a User upserts into the cache
regardless of dedup outcome; render sites read through a Zustand selector
hook to surface the home view when one is loaded. The DM channel ingestion
race is left untouched — the existing no-flapping invariant on origin
reconnect is intentional and load-bearing for failover.

Layered changes:

- `identity.ts`: `normalizeOriginToHost`, `canonicalUserKey`,
  `isDeliveryFromHome`, `isFederationGlobeApplicable` — single helpers
  for origin/host normalization and the home/stub tier decision.
- `spaceStore.ts`: `userViews` Map, `UserViewEntry` type, `upsertUserView`
  action with the home-wins preference rule, prune by `deliveredBy` in
  `removeInstanceSpaces` (mirrors `dmAlternatives` cleanup), `reset`
  clears.
- `userViewLookup.ts`: `useCanonicalUserView` (Zustand selector hook for
  React) + `getCanonicalUserView` (sync getter for non-React paths).
  Render reactivity is structural via the selector, not coincidence on
  legacy update paths.
- `populateFromReady` upsert pass runs BEFORE the federatedId dedup so
  members of skipped DMs still reach the cache.
- WS handlers (dm_message_*, message_*, user_updated, member_joined,
  friend_request_*, dm_channel_created, dm_member_added) and REST
  hydrators (socialStore, discoverStore, mutuals) feed the cache with
  their delivering origin.
- Render-site routing through `useCanonicalUserView` at every audited
  user-rendering site (sidebar, header, search, message bubble, reply
  chips, profile popout/modal, group settings, voice tiles, mention
  chips, member lists, friends, invites). Self-rendering sites compose
  alongside via existing `isSelf`/`resolveDisplayIdentity`.
- Globe predicate hoisted to `isFederationGlobeApplicable` and applied
  at three sites, gating on `domain !== window.location.host` so we
  never show the globe for users whose home IS our own.

Tests: 31 new unit tests across `identity`, `userViews` store, and
`userViewLookup`. Full suite 276/276.

Docs: `client-federation.md` §3 gains a "User View Cache" section
parallel to "DM Origin Failover"; `dm-system.md` notes the new store
action and WS handler upserts.

Bug 3 (federation profile-sync gap — orbit's stale profile data on
nova-Axel after a clear/color-change on nova never propagated)
remains open. The user-view cache routes around it for the common case
(home instance is connected), but the underlying S2S relay gap is its
own diagnosis and follows in a separate branch.

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

@@ -5,9 +5,76 @@ import { Avatar } from '../ui/Avatar';
 import { useUIStore } from '../../stores/uiStore';
 import { useSpaceStore } from '../../stores/spaceStore';
 import { useAuthStore } from '../../stores/authStore';
-import { useSocialStore } from '../../stores/socialStore';
+import { useSocialStore, type TaggedFriend } from '../../stores/socialStore';
 import { api } from '../../api/client';
 import { isSelf, parseFederatedUsername } from '../../utils/identity';
+import { useCanonicalUserView } from '../../utils/userViewLookup';
+import type { User } from '@backspace/shared';
+
+function AddDmFriendRow({
+  friend,
+  isInDm,
+  isSelected,
+  atCapacity,
+  isAdding,
+  onToggle,
+}: {
+  friend: TaggedFriend;
+  isInDm: boolean;
+  isSelected: boolean;
+  atCapacity: boolean;
+  isAdding: boolean;
+  onToggle: (id: string) => void;
+}) {
+  const canonical = useCanonicalUserView(friend as unknown as User);
+  const { baseName } = parseFederatedUsername(canonical.username);
+  const friendDisplayName = canonical.displayName ?? baseName;
+  return (
+    <button
+      onClick={() => onToggle(friend.id)}
+      disabled={isInDm || isAdding || atCapacity}
+      className={`w-full flex items-center gap-3 px-3 py-2 rounded-[4px] transition-colors text-left ${
+        isInDm
+          ? 'opacity-40 cursor-not-allowed'
+          : isSelected
+            ? 'bg-accent-mint/[0.08]'
+            : 'hover:bg-interactive-hover'
+      } ${atCapacity && !isInDm ? 'opacity-50 cursor-not-allowed' : ''}`}
+    >
+      <Avatar
+        src={canonical.avatar}
+        name={friendDisplayName}
+        size={30}
+        status={canonical.status as any}
+        userId={canonical.homeUserId ?? canonical.id}
+        avatarColor={canonical.avatarColor}
+      />
+      <div className="flex-1 min-w-0">
+        <div className="text-[13px] font-medium text-txt-primary truncate">
+          {friendDisplayName}
+        </div>
+        <div className="text-[11px] text-txt-tertiary truncate">
+          {isInDm ? 'Already in this DM' : `@${canonical.username}`}
+        </div>
+      </div>
+      {!isInDm && (
+        <div
+          className={`w-[18px] h-[18px] rounded flex-shrink-0 flex items-center justify-center ${
+            isSelected
+              ? 'bg-accent-mint'
+              : 'border-2 border-border-hard'
+          }`}
+        >
+          {isSelected && (
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="text-surface-base">
+              <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          )}
+        </div>
+      )}
+    </button>
+  );
+}
 
 export function AddDmMemberModal() {
   const [query, setQuery] = useState('');
@@ -197,54 +264,16 @@ export function AddDmMemberModal() {
             const isInDm = currentMemberIds.has(friend.id);
             const isSelected = selected.has(friend.id);
             const atCapacity = !isSelected && selected.size >= remainingSlots;
-            const { baseName, domain } = parseFederatedUsername(friend.username);
-            const friendDisplayName = friend.displayName ?? baseName;
-
             return (
-              <button
+              <AddDmFriendRow
                 key={friend.id}
-                onClick={() => toggleFriend(friend.id)}
-                disabled={isInDm || isAdding || atCapacity}
-                className={`w-full flex items-center gap-3 px-3 py-2 rounded-[4px] transition-colors text-left ${
-                  isInDm
-                    ? 'opacity-40 cursor-not-allowed'
-                    : isSelected
-                      ? 'bg-accent-mint/[0.08]'
-                      : 'hover:bg-interactive-hover'
-                } ${atCapacity && !isInDm ? 'opacity-50 cursor-not-allowed' : ''}`}
-              >
-                <Avatar
-                  src={friend.avatar}
-                  name={friendDisplayName}
-                  size={30}
-                  status={friend.status as any}
-                  userId={friend.homeUserId ?? friend.id}
-                  avatarColor={friend.avatarColor}
-                />
-                <div className="flex-1 min-w-0">
-                  <div className="text-[13px] font-medium text-txt-primary truncate">
-                    {friendDisplayName}
-                  </div>
-                  <div className="text-[11px] text-txt-tertiary truncate">
-                    {isInDm ? 'Already in this DM' : `@${friend.username}`}
-                  </div>
-                </div>
-                {!isInDm && (
-                  <div
-                    className={`w-[18px] h-[18px] rounded flex-shrink-0 flex items-center justify-center ${
-                      isSelected
-                        ? 'bg-accent-mint'
-                        : 'border-2 border-border-hard'
-                    }`}
-                  >
-                    {isSelected && (
-                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="text-surface-base">
-                        <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                      </svg>
-                    )}
-                  </div>
-                )}
-              </button>
+                friend={friend}
+                isInDm={isInDm}
+                isSelected={isSelected}
+                atCapacity={atCapacity}
+                isAdding={isAdding}
+                onToggle={toggleFriend}
+              />
             );
           })}
         </div>