feat: show avatars alongside usernames everywhere (#440)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

desktop/src/features/channels/ui/ChannelMemberInviteCard.tsx

@@ -12,6 +12,7 @@ import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Input } from "@/shared/ui/input";
 import { Textarea } from "@/shared/ui/textarea";
+import { UserAvatar } from "@/shared/ui/UserAvatar";
 
 function formatSearchUserName(user: UserSearchResult) {
   return (
@@ -179,6 +180,11 @@ export function ChannelMemberInviteCard({
                   data-testid={`selected-invitee-${invitee.pubkey}`}
                   key={invitee.pubkey}
                 >
+                  <UserAvatar
+                    avatarUrl={invitee.avatarUrl ?? null}
+                    displayName={formatSearchUserName(invitee)}
+                    size="xs"
+                  />
                   <span className="font-medium">
                     {formatSearchUserName(invitee)}
                   </span>
@@ -219,13 +225,20 @@ export function ChannelMemberInviteCard({
                       }}
                       type="button"
                     >
-                      <div className="min-w-0">
-                        <p className="truncate text-sm font-medium leading-5">
-                          {formatSearchUserName(result)}
-                        </p>
-                        <p className="truncate text-xs text-muted-foreground">
-                          {formatSearchUserSecondary(result)}
-                        </p>
+                      <div className="flex items-center gap-2 min-w-0">
+                        <UserAvatar
+                          avatarUrl={result.avatarUrl}
+                          displayName={formatSearchUserName(result)}
+                          size="xs"
+                        />
+                        <div className="min-w-0">
+                          <p className="truncate text-sm font-medium leading-5">
+                            {formatSearchUserName(result)}
+                          </p>
+                          <p className="truncate text-xs text-muted-foreground">
+                            {formatSearchUserSecondary(result)}
+                          </p>
+                        </div>
                       </div>
                       <span className="text-xs text-muted-foreground">Add</span>
                     </button>

desktop/src/features/channels/ui/ChannelPane.tsx

@@ -316,6 +316,7 @@ export const ChannelPane = React.memo(function ChannelPane({
             onCancelEdit={onCancelEdit}
             onEditSave={onEditSave}
             onSend={onSendMessage}
+            profiles={profiles}
             placeholder={
               activeChannel?.archivedAt
                 ? "Archived channels are read-only."

desktop/src/features/home/ui/FeedSection.tsx

@@ -20,6 +20,7 @@ import {
 import { resolveMentionNames } from "@/shared/lib/resolveMentionNames";
 import { Button } from "@/shared/ui/button";
 import { Markdown } from "@/shared/ui/markdown";
+import { UserAvatar } from "@/shared/ui/UserAvatar";
 
 const relativeTimeFormatter = new Intl.RelativeTimeFormat("en-US", {
   numeric: "auto",
@@ -190,7 +191,19 @@ export function FeedSection({
                   >
                     {feedHeadline(item)}
                   </span>
-                  <span className="text-[11px] text-muted-foreground">
+                  <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground">
+                    <UserAvatar
+                      avatarUrl={
+                        profiles?.[item.pubkey.toLowerCase()]?.avatarUrl ?? null
+                      }
+                      displayName={resolveUserLabel({
+                        pubkey: item.pubkey,
+                        currentPubkey,
+                        profiles,
+                        preferResolvedSelfLabel: true,
+                      })}
+                      size="xs"
+                    />
                     {resolveUserLabel({
                       pubkey: item.pubkey,
                       currentPubkey,

desktop/src/features/messages/lib/useMentions.ts

@@ -7,6 +7,7 @@ import {
 import { useChannelMembersQuery } from "@/features/channels/hooks";
 import type { MentionSuggestion } from "@/features/messages/ui/MentionAutocomplete";
 import type { ChannelMember } from "@/shared/api/types";
+import type { UserProfileLookup } from "@/features/profile/lib/identity";
 import { detectPrefixQuery } from "@/shared/lib/detectPrefixQuery";
 import { trimMapToSize } from "@/shared/lib/trimMapToSize";
 import { hasMention } from "./hasMention";
@@ -16,6 +17,7 @@ const MENTION_DEBOUNCE_MS = 120;
 export function useMentions(
   channelId: string | null,
   externalMembers?: ChannelMember[],
+  profiles?: UserProfileLookup,
 ) {
   const [mentionQuery, setMentionQuery] = React.useState<string | null>(null);
   const [mentionStartIndex, setMentionStartIndex] = React.useState(0);
@@ -152,10 +154,17 @@ export function useMentions(
       .map(({ member, label, personaName }) => ({
         pubkey: member.pubkey,
         displayName: label,
+        avatarUrl: profiles?.[member.pubkey.toLowerCase()]?.avatarUrl ?? null,
         role: member.role === "admin" ? "admin" : null,
         personaName,
       }));
-  }, [managedAgentNamesByPubkey, members, mentionQuery, personaNameByPubkey]);
+  }, [
+    managedAgentNamesByPubkey,
+    members,
+    mentionQuery,
+    personaNameByPubkey,
+    profiles,
+  ]);
 
   const isMentionOpen = mentionQuery !== null && suggestions.length > 0;
 

desktop/src/features/messages/ui/MentionAutocomplete.tsx

@@ -2,10 +2,12 @@ import * as React from "react";
 
 import { Badge } from "@/shared/ui/badge";
 import { cn } from "@/shared/lib/cn";
+import { UserAvatar } from "@/shared/ui/UserAvatar";
 
 export type MentionSuggestion = {
   pubkey: string;
   displayName: string;
+  avatarUrl?: string | null;
   role?: string | null;
   personaName?: string | null;
 };
@@ -63,6 +65,11 @@ export const MentionAutocomplete = React.memo(function MentionAutocomplete({
             tabIndex={-1}
             type="button"
           >
+            <UserAvatar
+              avatarUrl={suggestion.avatarUrl ?? null}
+              displayName={suggestion.displayName}
+              size="xs"
+            />
             <span className="truncate font-medium">
               {suggestion.displayName}
             </span>

desktop/src/features/messages/ui/MessageComposer.tsx

@@ -13,6 +13,7 @@ import {
   useMediaUpload,
 } from "@/features/messages/lib/useMediaUpload";
 import { useMentions } from "@/features/messages/lib/useMentions";
+import type { UserProfileLookup } from "@/features/profile/lib/identity";
 import {
   hasMentionClipboardHtml,
   normalizeMentionClipboardHtml,
@@ -49,6 +50,7 @@ type MessageComposerProps = {
     mediaTags?: string[][],
   ) => Promise<void>;
   placeholder?: string;
+  profiles?: UserProfileLookup;
   replyTarget?: {
     author: string;
     body: string;
@@ -70,6 +72,7 @@ export function MessageComposer({
   onEditSave,
   onSend,
   placeholder,
+  profiles,
   replyTarget = null,
   typingParentEventId = null,
   typingRootEventId = null,
@@ -91,7 +94,7 @@ export function MessageComposer({
   const effectiveDraftKey = draftKey ?? channelId;
   const previousDraftKeyRef = React.useRef<string | null>(null);
 
-  const mentions = useMentions(channelId);
+  const mentions = useMentions(channelId, undefined, profiles);
   const channelLinks = useChannelLinks();
   const emojiAutocomplete = useEmojiAutocomplete();
   const notifyTyping = useTypingBroadcast(

desktop/src/features/messages/ui/SystemMessageRow.tsx

@@ -13,6 +13,7 @@ import { Button } from "@/shared/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
 import { Spinner } from "@/shared/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import { UserAvatar } from "@/shared/ui/UserAvatar";
 import { MessageTimestamp } from "./MessageTimestamp";
 
 type SystemMessagePayload = {
@@ -43,36 +44,165 @@ function resolvePersonaSuffix(
   return personaName ? ` (${personaName})` : "";
 }
 
-function describeSystemEvent(
+function resolveAvatarUrl(
+  pubkey: string | undefined,
+  profiles: UserProfileLookup | undefined,
+): string | null {
+  if (!pubkey || !profiles) return null;
+  return profiles[pubkey.toLowerCase()]?.avatarUrl ?? null;
+}
+
+function UserChip({
+  pubkey,
+  currentPubkey,
+  profiles,
+  suffix,
+}: {
+  pubkey: string | undefined;
+  currentPubkey: string | undefined;
+  profiles: UserProfileLookup | undefined;
+  suffix?: string;
+}) {
+  const label = resolveLabel(pubkey, currentPubkey, profiles);
+  return (
+    <span className="inline-flex items-center gap-1">
+      <UserAvatar
+        avatarUrl={resolveAvatarUrl(pubkey, profiles)}
+        displayName={label}
+        size="xs"
+      />
+      <span className="font-medium">
+        {label}
+        {suffix}
+      </span>
+    </span>
+  );
+}
+
+function describeSystemEventStructured(
   payload: SystemMessagePayload,
   currentPubkey: string | undefined,
   profiles: UserProfileLookup | undefined,
   personaLookup?: Map<string, string>,
-): string | null {
-  const actor = resolveLabel(payload.actor, currentPubkey, profiles);
+): React.ReactNode | null {
+  const personaSuffix = resolvePersonaSuffix(payload.target, personaLookup);
 
   switch (payload.type) {
     case "member_joined": {
-      const target = resolveLabel(payload.target, currentPubkey, profiles);
-      const personaSuffix = resolvePersonaSuffix(payload.target, personaLookup);
       if (payload.actor === payload.target) {
-        return `${actor}${personaSuffix} joined the channel`;
+        return (
+          <span className="inline-flex flex-wrap items-center gap-1">
+            <UserChip
+              pubkey={payload.actor}
+              currentPubkey={currentPubkey}
+              profiles={profiles}
+              suffix={personaSuffix}
+            />
+            <span>joined the channel</span>
+          </span>
+        );
       }
-      return `${actor} added ${target}${personaSuffix} to the channel`;
-    }
-    case "member_left": {
-      return `${actor} left the channel`;
-    }
-    case "member_removed": {
-      const target = resolveLabel(payload.target, currentPubkey, profiles);
-      return `${actor} removed ${target} from the channel`;
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>added</span>
+          <UserChip
+            pubkey={payload.target}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+            suffix={personaSuffix}
+          />
+          <span>to the channel</span>
+        </span>
+      );
     }
+    case "member_left":
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>left the channel</span>
+        </span>
+      );
+    case "member_removed":
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>removed</span>
+          <UserChip
+            pubkey={payload.target}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>from the channel</span>
+        </span>
+      );
     case "topic_changed":
-      return `${actor} changed the topic to "${payload.topic}"`;
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>changed the topic to &ldquo;{payload.topic}&rdquo;</span>
+        </span>
+      );
     case "purpose_changed":
-      return `${actor} changed the purpose to "${payload.purpose}"`;
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>changed the purpose to &ldquo;{payload.purpose}&rdquo;</span>
+        </span>
+      );
     case "channel_created":
-      return `${actor} created this channel`;
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>created this channel</span>
+        </span>
+      );
+    case "channel_archived":
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>archived this channel</span>
+        </span>
+      );
+    case "channel_unarchived":
+      return (
+        <span className="inline-flex flex-wrap items-center gap-1">
+          <UserChip
+            pubkey={payload.actor}
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+          />
+          <span>unarchived this channel</span>
+        </span>
+      );
     default:
       return null;
   }
@@ -112,7 +242,7 @@ export const SystemMessageRow = React.memo(function SystemMessageRow({
     return null;
   }
 
-  const description = describeSystemEvent(
+  const description = describeSystemEventStructured(
     payload,
     currentPubkey,
     profiles,

desktop/src/features/search/ui/SearchDialog.tsx

@@ -26,6 +26,7 @@ import {
 import { Badge } from "@/shared/ui/badge";
 import { Input } from "@/shared/ui/input";
 import { Skeleton } from "@/shared/ui/skeleton";
+import { UserAvatar } from "@/shared/ui/UserAvatar";
 
 const MIN_QUERY_LENGTH = 2;
 
@@ -343,9 +344,17 @@ export function SearchDialog({
                             <Badge variant="secondary">
                               {describeSearchHit(hit)}
                             </Badge>
-                            <p className="text-xs text-muted-foreground">
+                            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                              <UserAvatar
+                                avatarUrl={
+                                  resultProfiles?.[hit.pubkey.toLowerCase()]
+                                    ?.avatarUrl ?? null
+                                }
+                                displayName={authorLabel}
+                                size="xs"
+                              />
                               {authorLabel}
-                            </p>
+                            </span>
                             <p className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
                               {formatRelativeTime(hit.createdAt)}
                             </p>

mobile/lib/features/activity/activity_page.dart

@@ -9,6 +9,7 @@ import '../../shared/widgets/frosted_scaffold.dart';
 import '../channels/channel.dart';
 import '../channels/channel_detail_page.dart';
 import '../channels/channels_provider.dart';
+import '../channels/small_avatar.dart';
 import '../profile/user_cache_provider.dart';
 import 'activity_provider.dart';
 import 'feed_item.dart';
@@ -240,9 +241,8 @@ class _FeedItemTile extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final profile = ref.watch(
-      userCacheProvider.select((cache) => cache[item.pubkey.toLowerCase()]),
-    );
+    final userCache = ref.watch(userCacheProvider);
+    final profile = userCache[item.pubkey.toLowerCase()];
     final authorLabel = profile?.label ?? _shortPubkey(item.pubkey);
 
     return InkWell(
@@ -274,6 +274,8 @@ class _FeedItemTile extends ConsumerWidget {
                         ),
                       ),
                       const SizedBox(width: Grid.xxs),
+                      SmallAvatar(pubkey: item.pubkey, userCache: userCache),
+                      const SizedBox(width: Grid.quarter),
                       Flexible(
                         child: Text(
                           authorLabel,

mobile/lib/features/channels/channel_detail_page.dart

@@ -599,19 +599,7 @@ class _SystemMessageRow extends ConsumerWidget {
           children: [
             Row(
               children: [
-                Container(
-                  width: 20,
-                  height: 20,
-                  decoration: BoxDecoration(
-                    color: context.colors.surfaceContainerHighest,
-                    shape: BoxShape.circle,
-                  ),
-                  child: Icon(
-                    LucideIcons.arrowLeftRight,
-                    size: 12,
-                    color: context.colors.onSurfaceVariant,
-                  ),
-                ),
+                _systemEventAvatar(context, systemEvent, userCache),
                 const SizedBox(width: Grid.xxs),
                 Expanded(
                   child: Text(
@@ -644,6 +632,54 @@ class _SystemMessageRow extends ConsumerWidget {
   }
 }
 
+Widget _systemEventAvatar(
+  BuildContext context,
+  SystemEvent event,
+  Map<String, UserProfile> userCache,
+) {
+  final hasTarget =
+      event.targetPubkey != null && event.targetPubkey != event.actorPubkey;
+
+  if (event.actorPubkey != null && hasTarget) {
+    // Two-avatar stack: actor + target (e.g. "Alice added Bob").
+    return SizedBox(
+      width: 32,
+      height: 20,
+      child: Stack(
+        children: [
+          SmallAvatar(pubkey: event.actorPubkey!, userCache: userCache),
+          Positioned(
+            left: 12,
+            child: SmallAvatar(
+              pubkey: event.targetPubkey!,
+              userCache: userCache,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  if (event.actorPubkey != null) {
+    return SmallAvatar(pubkey: event.actorPubkey!, userCache: userCache);
+  }
+
+  // Fallback: generic icon when no actor is available.
+  return Container(
+    width: 20,
+    height: 20,
+    decoration: BoxDecoration(
+      color: context.colors.surfaceContainerHighest,
+      shape: BoxShape.circle,
+    ),
+    child: Icon(
+      LucideIcons.arrowLeftRight,
+      size: 12,
+      color: context.colors.onSurfaceVariant,
+    ),
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Thread summary row (shown below messages that have replies)
 // ---------------------------------------------------------------------------
@@ -1022,18 +1058,45 @@ class _TypingIndicator extends ConsumerWidget {
       _ => '${names[0]} and ${names.length - 1} others are typing…',
     };
 
+    final visibleEntries = entries.take(3).toList();
+    final avatarCount = visibleEntries.length;
+
     return Container(
       width: double.infinity,
       padding: const EdgeInsets.symmetric(
         horizontal: Grid.xs,
         vertical: Grid.quarter + 2,
       ),
-      child: Text(
-        text,
-        style: context.textTheme.labelSmall?.copyWith(
-          color: context.colors.onSurfaceVariant,
-          fontStyle: FontStyle.italic,
-        ),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 20.0 + (avatarCount - 1) * 12.0,
+            height: 20,
+            child: Stack(
+              children: [
+                for (var i = 0; i < avatarCount; i++)
+                  Positioned(
+                    left: i * 12.0,
+                    child: SmallAvatar(
+                      pubkey: visibleEntries[i].pubkey,
+                      userCache: userCache,
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          const SizedBox(width: Grid.xxs),
+          Flexible(
+            child: Text(
+              text,
+              style: context.textTheme.labelSmall?.copyWith(
+                color: context.colors.outline,
+                fontStyle: FontStyle.italic,
+              ),
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ],
       ),
     );
   }

mobile/lib/features/channels/thread_detail_page.dart

@@ -477,18 +477,45 @@ class _ThreadTypingIndicator extends ConsumerWidget {
       _ => '${names[0]} and ${names.length - 1} others are typing...',
     };
 
+    final visibleEntries = entries.take(3).toList();
+    final avatarCount = visibleEntries.length;
+
     return Container(
       width: double.infinity,
       padding: const EdgeInsets.symmetric(
         horizontal: Grid.xs,
         vertical: Grid.quarter + 2,
       ),
-      child: Text(
-        text,
-        style: context.textTheme.labelSmall?.copyWith(
-          color: context.colors.onSurfaceVariant,
-          fontStyle: FontStyle.italic,
-        ),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 20.0 + (avatarCount - 1) * 12.0,
+            height: 20,
+            child: Stack(
+              children: [
+                for (var i = 0; i < avatarCount; i++)
+                  Positioned(
+                    left: i * 12.0,
+                    child: SmallAvatar(
+                      pubkey: visibleEntries[i].pubkey,
+                      userCache: userCache,
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          const SizedBox(width: Grid.xxs),
+          Flexible(
+            child: Text(
+              text,
+              style: context.textTheme.labelSmall?.copyWith(
+                color: context.colors.outline,
+                fontStyle: FontStyle.italic,
+              ),
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ],
       ),
     );
   }

mobile/lib/features/search/search_page.dart

@@ -10,6 +10,7 @@ import '../channels/channel.dart';
 import '../channels/channel_detail_page.dart';
 import '../channels/channel_management_provider.dart';
 import '../channels/channels_provider.dart';
+import '../channels/small_avatar.dart';
 import '../channels/date_formatters.dart';
 import '../forum/forum_thread_page.dart';
 import '../profile/profile_provider.dart';
@@ -335,6 +336,7 @@ class _MessagesSection extends ConsumerWidget {
           _MessageTile(
             hit: hit,
             authorProfile: profiles[hit.pubkey.toLowerCase()],
+            userCache: profiles,
             channel: channels.where((c) => c.id == hit.channelId).firstOrNull,
             currentPubkey: currentPubkey,
           ),
@@ -346,12 +348,14 @@ class _MessagesSection extends ConsumerWidget {
 class _MessageTile extends StatelessWidget {
   final SearchHit hit;
   final UserProfile? authorProfile;
+  final Map<String, UserProfile> userCache;
   final Channel? channel;
   final String? currentPubkey;
 
   const _MessageTile({
     required this.hit,
     required this.authorProfile,
+    required this.userCache,
     required this.channel,
     required this.currentPubkey,
   });
@@ -362,6 +366,7 @@ class _MessageTile extends StatelessWidget {
     final timeAgo = relativeTime(hit.createdAt);
 
     return ListTile(
+      leading: SmallAvatar(pubkey: hit.pubkey, userCache: userCache),
       title: Row(
         children: [
           Expanded(