feat(web): add /api/avatar resolver and use it in UserAvatar

Adds a new `/api/avatar?email=<email>` endpoint that resolves an email
to either the matching Sourcebot user's profile image (302 redirect with
short cache) or a deterministic minidenticon SVG (long-lived immutable
cache). Falls back to the identicon on auth or lookup failure so avatars
never break for anonymous viewers.

Updates `UserAvatar` to compute its src from this resolver instead of
generating an inline minidenticon data URI client-side. Every existing
call site automatically picks up real profile pictures where the email
matches a Sourcebot user — no consumer changes needed.

Also swaps Radix's `<AvatarImage>` for a raw `<img>`. AvatarImage delays
painting until its internal `new Image().onload` fires (async even from
HTTP cache), which manifests as a flicker every time the avatar mounts
under aggressive churn (e.g., in a CodeMirror gutter). The browser
paints cached `<img>` synchronously.

Adds a native `title` tooltip to the displayed avatars in
`AuthorsAvatarGroup` and removes the unused `MessageAvatar` wrapper.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: brendan-kellam

packages/web/src/app/(app)/browse/components/commitParts.tsx

@@ -24,6 +24,7 @@ export const AuthorsAvatarGroup = ({ authors, className }: AuthorsAvatarGroupPro
                 <UserAvatar
                     key={a.email}
                     email={a.email}
+                    title={a.email}
                     className="h-5 w-5"
                 />
             ))}

packages/web/src/app/api/(server)/avatar/route.ts

@@ -0,0 +1,51 @@
+'use server';
+
+import { minidenticon } from 'minidenticons';
+import { NextRequest } from 'next/server';
+import { apiHandler } from '@/lib/apiHandler';
+import { isServiceError } from '@/lib/utils';
+import { withOptionalAuth } from '@/middleware/withAuth';
+
+// Resolves an email to an avatar image. If the email belongs to a Sourcebot
+// user in the requester's org and that user has a profile image set, the
+// request is redirected to that URL. Otherwise a minidenticon SVG is returned.
+//
+// We never 4xx on this endpoint — even if the requester is unauthenticated or
+// the user isn't found, we serve the identicon so the avatar visually renders.
+export const GET = apiHandler(async (request: NextRequest) => {
+    const email = request.nextUrl.searchParams.get('email');
+    if (!email) {
+        return new Response('Missing email parameter', { status: 400 });
+    }
+
+    const lookup = await withOptionalAuth(async ({ org, prisma }) => {
+        return prisma.user.findFirst({
+            where: {
+                email,
+                orgs: { some: { orgId: org.id } },
+            },
+            select: { image: true },
+        });
+    });
+
+    if (!isServiceError(lookup) && lookup?.image) {
+        return new Response(null, {
+            status: 302,
+            headers: {
+                'Location': lookup.image,
+                'Cache-Control': 'public, max-age=300',
+            },
+        });
+    }
+
+    // Fallback: identicons are deterministic from the email so they can be
+    // cached aggressively.
+    const svg = minidenticon(email, 50, 50);
+    return new Response(svg, {
+        status: 200,
+        headers: {
+            'Content-Type': 'image/svg+xml',
+            'Cache-Control': 'public, max-age=31536000, immutable',
+        },
+    });
+}, { track: false });

packages/web/src/components/userAvatar.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { minidenticon } from 'minidenticons';
 import { ComponentPropsWithoutRef, forwardRef, useMemo } from 'react';
-import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { Avatar } from '@/components/ui/avatar';
 import { cn } from '@/lib/utils';
 
 interface UserAvatarProps extends ComponentPropsWithoutRef<typeof Avatar> {
@@ -12,16 +11,31 @@ interface UserAvatarProps extends ComponentPropsWithoutRef<typeof Avatar> {
 
 export const UserAvatar = forwardRef<HTMLSpanElement, UserAvatarProps>(
     ({ email, imageUrl, className, ...rest }, ref) => {
-        const identiconUri = useMemo(() => {
+        const resolverUri = useMemo(() => {
             if (!email) {
                 return undefined;
             }
-            return 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(email, 50, 50));
+            return `/api/avatar?email=${encodeURIComponent(email)}`;
         }, [email]);
 
+        const src = imageUrl ?? resolverUri;
+
         return (
             <Avatar ref={ref} className={cn("bg-muted", className)} {...rest}>
-                <AvatarImage src={imageUrl ?? identiconUri} />
+                {/*
+                  We render a raw <img> instead of Radix's <AvatarImage>. AvatarImage
+                  delays painting until its internal `new Image().onload` fires —
+                  which is async even when the URL is in HTTP cache — and that
+                  one-frame gap manifests as a flicker every time a marker mounts
+                  (e.g., on scroll). The browser paints cached <img> synchronously.
+                */}
+                {src && (
+                    <img
+                        src={src}
+                        alt=""
+                        className="aspect-square h-full w-full"
+                    />
+                )}
             </Avatar>
         );
     }