block · mahanti · Aug 31, 2026 · Aug 31, 2026 · Aug 31, 2026 · Aug 31, 2026
@@ -191,6 +191,7 @@ export function AddTeamToChannelDialog({
                         avatarUrl={persona.avatarUrl}
                         className="h-5 w-5 text-2xs"
                         label={persona.displayName}
+                        shape="squircle"
                       />
                       <span className="text-xs font-medium">
                         {persona.displayName}

@@ -3,7 +3,6 @@ import Picker from "@emoji-mart/react";
 import * as React from "react";
 import { Link2, Pencil, Plus, UploadCloud } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-
 import { MaskedAvatarBadgeFrame } from "@/features/profile/ui/MaskedAvatarBadgeFrame";
 import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
 import {
@@ -44,7 +43,6 @@ import {
   type EmojiMartEmoji,
   isAvatarFileDrag,
 } from "./AgentCreationPreview.utils";
-
 export function AgentCreationPreview({
   assetLabel = "avatar",
   avatarUrl,
@@ -127,12 +125,10 @@ export function AgentCreationPreview({
     },
     processImage,
   });
-
   useEmojiMartStyles(
     emojiPickerContainerRef,
     isAvatarMenuOpen && activeTab === "emoji",
   );
-
   // Emoji Mart mounts its search input inside a shadow root. Wait for it
   // before focusing so the surrounding Radix popover cannot win the race.
   React.useEffect(() => {
@@ -728,7 +724,7 @@ export function AgentCreationPreview({
                     ? isCompact
                       ? "rounded-2xl"
                       : "rounded-[2rem]"
-                    : "rounded-full",
+                    : "rounded-[30%]",
                 )}
                 role="img"
                 style={{ backgroundColor: emojiAvatarPreview.color }}
@@ -754,6 +750,7 @@ export function AgentCreationPreview({
             ) : (
               <ProfileAvatar
                 avatarUrl={avatarUrl}
+                shape="squircle"
                 className={cn(
                   "h-full w-full",
                   isCompact ? "text-base" : "text-4xl",
@@ -927,6 +924,7 @@ export function AgentCreationPreview({
                   }
                   className={isCompact ? "h-16 w-16" : "h-36 w-36"}
                   clipTestId={`${testIdPrefix}-mask`}
+                  cornerRadius={(isCompact ? 64 : 144) * 0.3}
                   cutout={
                     isCompact
                       ? { cx: 58, cy: 58, r: 16.5 }
@@ -938,7 +936,7 @@ export function AgentCreationPreview({
                   {emojiAvatarPreview ? (
                     <div
                       aria-label={`${label} ${assetLabel}`}
-                      className="relative flex h-full w-full shrink-0 items-center justify-center overflow-hidden rounded-full shadow-xs transition-[background-color] duration-200 ease-out"
+                      className="relative flex h-full w-full shrink-0 items-center justify-center overflow-hidden rounded-[30%] shadow-xs transition-[background-color] duration-200 ease-out"
                       role="img"
                       style={{
                         backgroundColor: emojiAvatarPreview.color,
@@ -964,6 +962,7 @@ export function AgentCreationPreview({
                   ) : (
                     <ProfileAvatar
                       avatarUrl={avatarUrl}
+                      shape="squircle"
                       className={cn(
                         "h-full w-full transition-shadow duration-150",
                         isCompact ? "text-base" : "text-4xl",
@@ -986,7 +985,7 @@ export function AgentCreationPreview({
                         ? isCompact
                           ? "rounded-2xl"
                           : "rounded-[2rem]"
-                        : "rounded-full",
+                        : "rounded-[30%]",
                       isDragOverAvatar &&
                         !isAvatarMenuOpen &&
                         "border-primary/70 bg-primary/5 ring-2 ring-primary/15",

@@ -53,6 +53,7 @@ export function AgentIdentityCard({
                 className="h-full w-full border-[3px] border-background bg-muted shadow-none"
                 iconClassName="h-8 w-8"
                 label={label}
+                shape="squircle"
               />
             ) : (
               <IdentityInitialsAvatar

@@ -229,6 +229,7 @@ export function AgentRuntimeAvatarControl({
               : "bg-primary",
       )}
       className="h-24 w-24"
+      cornerRadius={AGENT_AVATAR_SIZE * 0.3}
       curve={showRunningDot ? STATUS_DOT_MASK_CURVE : ACTION_MASK_CURVE}
       cutout={badge.cutout}
       cutoutWidth={actionCutoutWidth}
@@ -241,6 +242,7 @@ export function AgentRuntimeAvatarControl({
           className="h-full w-full bg-muted shadow-none"
           iconClassName="h-8 w-8"
           label={label}
+          shape="squircle"
         />
       ) : (
         <IdentityInitialsAvatar

@@ -106,7 +106,7 @@ export function CompactMessageSummary({
             aria-label={`Open ${displayName} profile`}
             className={cn(
               avatarClassName,
-              "pointer-events-auto rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "pointer-events-auto rounded-[30%] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             )}
             onClick={(event) => {
               event.preventDefault();
@@ -119,6 +119,7 @@ export function CompactMessageSummary({
               avatarUrl={avatarUrl}
               className="size-full text-xs"
               displayName={displayName}
+              shape="squircle"
               size="sm"
               testId="transcript-agent-sent-avatar"
             />
@@ -131,6 +132,7 @@ export function CompactMessageSummary({
               isCompactPreview ? "text-3xs" : "text-xs",
             )}
             displayName={displayName}
+            shape="squircle"
             size="sm"
             testId="transcript-agent-sent-avatar"
           />

@@ -39,7 +39,7 @@ export function IdentityInitialsAvatar({
   return (
     <span
       className={cn(
-        "flex h-full w-full items-center justify-center rounded-full border-[3px] border-background font-semibold shadow-sm",
+        "flex h-full w-full items-center justify-center rounded-[30%] border-[3px] border-background font-semibold shadow-sm",
         colorClassName,
         textSizeClassName,
         className,

@@ -419,6 +419,7 @@ function AllowlistPicker({
                       <UserAvatar
                         avatarUrl={result.avatarUrl}
                         displayName={formatSearchUserName(result)}
+                        shape={result.isAgent ? "squircle" : "circle"}
                         size="xs"
                       />
                       <div className="min-w-0">

@@ -295,6 +295,7 @@ export function TeamDialog({
                             avatarUrl={persona.avatarUrl}
                             className="h-6 w-6 text-2xs"
                             label={persona.displayName}
+                            shape="squircle"
                           />
                           <span className="text-sm">{persona.displayName}</span>
                           {persona.isBuiltIn ? (

@@ -120,7 +120,7 @@ function TeamAvatarRow({
   if (visiblePersonas.length === 0 && overflowCount === 0) {
     return (
       <div className="absolute inset-x-4 top-0 bottom-12 flex items-center justify-center">
-        <div className="flex h-24 w-24 items-center justify-center rounded-full border border-border/65 bg-background/80 text-muted-foreground shadow-xs">
+        <div className="flex h-24 w-24 items-center justify-center rounded-[30%] border border-border/65 bg-background/80 text-muted-foreground shadow-xs">
           <Users className="h-9 w-9" />
         </div>
       </div>
@@ -135,19 +135,14 @@ function TeamAvatarRow({
         role="img"
       >
         {visiblePersonas.map((persona, index) => (
-          <TeamAvatarItem
-            index={index}
-            isFollowedByAnother={index < stackItemCount - 1}
-            key={persona.id}
-            persona={persona}
-          />
+          <TeamAvatarItem index={index} key={persona.id} persona={persona} />
         ))}
         {overflowCount > 0 ? (
           <div
             className={visiblePersonas.length > 0 ? "-ml-5" : ""}
             style={{ zIndex: stackItemCount }}
           >
-            <span className="flex h-14 w-14 items-center justify-center rounded-full bg-card text-sm font-semibold text-muted-foreground">
+            <span className="flex h-14 w-14 items-center justify-center rounded-[30%] bg-card text-sm font-semibold text-muted-foreground ring-2 ring-card">
               +{overflowCount}
             </span>
           </div>
@@ -159,44 +154,40 @@ function TeamAvatarRow({
 
 function TeamAvatarItem({
   index,
-  isFollowedByAnother,
   persona,
 }: {
   index: number;
-  isFollowedByAnother: boolean;
   persona: AgentPersona;
 }) {
   const avatarUrl = persona.avatarUrl?.trim() ?? null;
 
   return (
     <div
-      className={`h-14 w-14 ${index > 0 ? "-ml-5" : ""}`}
+      className={`relative h-14 w-14 before:absolute before:-inset-0.5 before:rounded-[calc(30%+2px)] before:bg-card before:content-[''] ${index > 0 ? "-ml-5" : ""}`}
       data-team-member-avatar="avatar"
       style={{
         zIndex: index + 1,
-        ...(isFollowedByAnother && {
-          mask: "radial-gradient(circle 32px at calc(100% + 8px) 50%, transparent 99%, #fff 100%)",
-          WebkitMask:
-            "radial-gradient(circle 32px at calc(100% + 8px) 50%, transparent 99%, #fff 100%)",
-        }),
       }}
     >
-      {avatarUrl ? (
-        <ProfileAvatar
-          avatarUrl={avatarUrl}
-          className="h-full w-full bg-muted shadow-none"
-          iconClassName="h-6 w-6"
-          label={persona.displayName}
-          testId={`team-member-avatar-${persona.id}`}
-        />
-      ) : (
-        <IdentityInitialsAvatar
-          className="border-0 shadow-none"
-          colorIndex={index}
-          label={persona.displayName}
-          size={56}
-        />
-      )}
+      <div className="relative z-10 h-full w-full">
+        {avatarUrl ? (
+          <ProfileAvatar
+            avatarUrl={avatarUrl}
+            className="h-full w-full bg-muted shadow-none"
+            iconClassName="h-6 w-6"
+            label={persona.displayName}
+            shape="squircle"
+            testId={`team-member-avatar-${persona.id}`}
+          />
+        ) : (
+          <IdentityInitialsAvatar
+            className="border-0 shadow-none"
+            colorIndex={index}
+            label={persona.displayName}
+            size={56}
+          />
+        )}
+      </div>
     </div>
   );
 }

@@ -101,7 +101,10 @@ export function UserMessageBubble({
       {isCompactPreview ? null : item.authorPubkey && openProfilePanel ? (
         <button
           aria-label={`Open ${authorLabel} profile`}
-          className="pointer-events-auto order-last ml-2 mt-1 size-7 shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className={cn(
+            "pointer-events-auto order-last ml-2 mt-1 size-7 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            authorProfile?.isAgent ? "rounded-[30%]" : "rounded-full",
+          )}
           onClick={(event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -115,6 +118,7 @@ export function UserMessageBubble({
             avatarUrl={authorProfile?.avatarUrl ?? null}
             className="size-full text-xs"
             displayName={authorLabel}
+            shape={authorProfile?.isAgent ? "squircle" : "circle"}
             size="sm"
           />
         </button>
@@ -123,6 +127,7 @@ export function UserMessageBubble({
           avatarUrl={authorProfile?.avatarUrl ?? null}
           className="order-last ml-2 mt-1 size-7 shrink-0 text-xs"
           displayName={authorLabel}
+          shape={authorProfile?.isAgent ? "squircle" : "circle"}
           size="sm"
         />
       )}

@@ -14,6 +14,7 @@ export type DmParticipantDisplay = {
 export type DirectMessageIntroParticipant = {
   avatarUrl: string | null;
   displayName: string;
+  isAgent?: boolean;
   pubkey: string;
 };
 
@@ -95,6 +96,7 @@ export function buildDirectMessageIntro({
         profiles,
         pubkey: participant.pubkey,
       }),
+      ...(profile?.isAgent === true ? { isAgent: true } : {}),
       pubkey: participant.pubkey,
     };
   });

@@ -38,6 +38,7 @@ function AgentRow({
         className="h-9 w-9 shrink-0 text-xs"
         iconClassName="h-5 w-5"
         label={persona.displayName}
+        shape="squircle"
       />
       <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
         {persona.displayName}

@@ -161,6 +161,7 @@ export function AddChannelBotTeamsSection({
                               avatarUrl={persona.avatarUrl}
                               className="h-4 w-4 text-3xs bg-secondary-foreground/20 text-secondary-foreground"
                               label={persona.displayName}
+                              shape="squircle"
                               testId="team-tooltip-persona-avatar"
                             />
                             <span className="text-2xs text-secondary-foreground">

@@ -46,6 +46,7 @@ export function AddMemberSearchResultRow({
         avatarUrl={user.avatarUrl}
         className="pointer-events-none relative z-10 h-8 w-8 text-xs shadow-none"
         displayName={formatAddCandidateName(user)}
+        shape={user.isAgent ? "squircle" : "circle"}
         size="sm"
       />
       <div className="pointer-events-none relative z-10 min-w-0 flex-1">

@@ -422,6 +422,7 @@ export function AgentSessionThreadPanel({
           avatarUrl={agentProfile?.avatarUrl ?? null}
           className="size-9"
           label={agentLabel}
+          shape="squircle"
           testId="agent-session-agent-avatar"
         />
         <div className="min-w-0 flex-1">

@@ -191,6 +191,7 @@ export function BotActivityComposerAction({
                   isInline ? "!h-4.5 !w-4.5 text-3xs" : "shrink-0",
                 )}
                 displayName={agent.name}
+                shape="squircle"
                 fallbackDelayMs={isInline ? 0 : undefined}
                 key={agent.pubkey}
                 size="xs"
@@ -259,6 +260,7 @@ export function BotActivityComposerAction({
                   avatarUrl={agentAvatarUrl(agent)}
                   className="shrink-0"
                   displayName={agent.name}
+                  shape="squircle"
                   size="sm"
                 />
                 <span className="min-w-0 flex-1 truncate">{agent.name}</span>

@@ -56,6 +56,7 @@ export function ChannelMemberAvatarStack({
               className="!h-8 !w-8 border-2 border-background text-2xs"
               displayName={label}
               fallbackDelayMs={0}
+              shape={profile?.isAgent ? "squircle" : "circle"}
             />
           </span>
         );

@@ -206,6 +206,7 @@ export function ChannelMemberInviteCard({
                   <UserAvatar
                     avatarUrl={invitee.avatarUrl ?? null}
                     displayName={formatSearchUserName(invitee)}
+                    shape={invitee.isAgent ? "squircle" : "circle"}
                     size="xs"
                   />
                   <span className="font-medium">
@@ -297,6 +298,7 @@ export function ChannelMemberInviteCard({
                         <UserAvatar
                           avatarUrl={result.avatarUrl}
                           displayName={formatSearchUserName(result)}
+                          shape={result.isAgent ? "squircle" : "circle"}
                           size="xs"
                         />
                         <p className="truncate text-sm font-medium leading-5">