From 73f2ea9d9aaeb3681d3f1edce06f094f940e3071 Mon Sep 17 00:00:00 2001 From: Taylor Ho Date: Thu, 3 Sep 2026 15:26:28 -0700 Subject: [PATCH 01/22] fix(avatars): scale agent squircles from normalized paths Co-authored-by: Carl Signed-off-by: Taylor Ho --- .../agents/ui/AgentCreationPreview.tsx | 6 +- .../CompactMessageSummary.tsx | 2 +- .../agents/ui/IdentityInitialsAvatar.tsx | 2 +- .../features/agents/ui/TeamIdentityCard.tsx | 6 +- .../UserMessageBubble.tsx | 2 +- .../src/features/home/ui/InboxListPane.tsx | 2 +- .../src/features/home/ui/InboxMessageRow.tsx | 2 +- .../huddle/components/ParticipantList.tsx | 4 +- .../src/features/messages/ui/MessageRow.tsx | 2 +- .../messages/ui/SystemMessageAvatars.tsx | 4 +- .../messages/ui/TypingIndicatorRow.tsx | 2 +- .../src/features/profile/ui/ProfileAvatar.tsx | 2 +- .../profile/ui/SelectedRecipientChip.tsx | 4 +- .../projects/ui/IssueAssigneesRow.tsx | 8 +- .../src/features/projects/ui/ProjectCards.tsx | 2 +- .../projects/ui/ProjectEntityListRow.tsx | 4 +- .../projects/ui/ProjectsActivityFeed.tsx | 2 +- .../projects/ui/ProjectsOverviewRail.tsx | 2 +- desktop/src/main.tsx | 2 + desktop/src/shared/styles/globals.css | 1 + .../shared/styles/globals/agent-avatar.css | 5 + desktop/src/shared/ui/AvatarClipPaths.tsx | 27 +++++ desktop/src/shared/ui/UserAvatar.tsx | 2 +- desktop/tests/e2e/messaging.spec.ts | 44 ++++++++ .../channels/channel_detail_page.dart | 1 + .../channels/channel_detail_page/app_bar.dart | 51 +++++---- .../huddle_call_avatar.dart | 101 +++++++++++------- .../huddle_participant_overlay.dart | 64 +++++++---- .../lib/features/channels/small_avatar.dart | 10 +- .../features/profile/user_profile_sheet.dart | 8 +- .../shared/widgets/agent_avatar_squircle.dart | 44 ++++++++ mobile/lib/shared/widgets/avatar_image.dart | 7 +- .../channels/channel_detail_page_test.dart | 67 +++++++----- .../shared/widgets/avatar_image_test.dart | 21 +++- 34 files changed, 360 insertions(+), 153 deletions(-) create mode 100644 desktop/src/shared/styles/globals/agent-avatar.css create mode 100644 desktop/src/shared/ui/AvatarClipPaths.tsx create mode 100644 mobile/lib/shared/widgets/agent_avatar_squircle.dart diff --git a/desktop/src/features/agents/ui/AgentCreationPreview.tsx b/desktop/src/features/agents/ui/AgentCreationPreview.tsx index 2856f56e789..ca3af3e30fd 100644 --- a/desktop/src/features/agents/ui/AgentCreationPreview.tsx +++ b/desktop/src/features/agents/ui/AgentCreationPreview.tsx @@ -724,7 +724,7 @@ export function AgentCreationPreview({ ? isCompact ? "rounded-2xl" : "rounded-[2rem]" - : "rounded-[30%]", + : "agent-avatar-squircle", )} role="img" style={{ backgroundColor: emojiAvatarPreview.color }} @@ -936,7 +936,7 @@ export function AgentCreationPreview({ {emojiAvatarPreview ? (
{ event.preventDefault(); diff --git a/desktop/src/features/agents/ui/IdentityInitialsAvatar.tsx b/desktop/src/features/agents/ui/IdentityInitialsAvatar.tsx index 7b09ca5caf6..7b8139259b4 100644 --- a/desktop/src/features/agents/ui/IdentityInitialsAvatar.tsx +++ b/desktop/src/features/agents/ui/IdentityInitialsAvatar.tsx @@ -39,7 +39,7 @@ export function IdentityInitialsAvatar({ return ( -
+
@@ -142,7 +142,7 @@ function TeamAvatarRow({ className={visiblePersonas.length > 0 ? "-ml-5" : ""} style={{ zIndex: stackItemCount }} > - + +{overflowCount}
@@ -163,7 +163,7 @@ function TeamAvatarItem({ return (
0 ? "-ml-5" : ""}`} + className={`relative h-14 w-14 before:absolute before:-inset-0.5 before:agent-avatar-squircle-border before:bg-card before:content-[''] ${index > 0 ? "-ml-5" : ""}`} data-team-member-avatar="avatar" style={{ zIndex: index + 1, diff --git a/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx b/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx index 470dd1b894e..8d7697e3562 100644 --- a/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx +++ b/desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx @@ -103,7 +103,7 @@ export function UserMessageBubble({ aria-label={`Open ${authorLabel} profile`} 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", + authorProfile?.isAgent ? "agent-avatar-squircle" : "rounded-full", )} onClick={(event) => { event.preventDefault(); diff --git a/desktop/src/features/home/ui/InboxListPane.tsx b/desktop/src/features/home/ui/InboxListPane.tsx index f0ed262a41c..d24e7746999 100644 --- a/desktop/src/features/home/ui/InboxListPane.tsx +++ b/desktop/src/features/home/ui/InboxListPane.tsx @@ -388,7 +388,7 @@ export function InboxListPane({ diff --git a/desktop/src/features/home/ui/InboxMessageRow.tsx b/desktop/src/features/home/ui/InboxMessageRow.tsx index 5377410ca07..4a01c90f2c8 100644 --- a/desktop/src/features/home/ui/InboxMessageRow.tsx +++ b/desktop/src/features/home/ui/InboxMessageRow.tsx @@ -202,7 +202,7 @@ export function InboxMessageRow({ @@ -452,7 +452,7 @@ function ParticipantAvatar({ diff --git a/desktop/src/features/messages/ui/TypingIndicatorRow.tsx b/desktop/src/features/messages/ui/TypingIndicatorRow.tsx index 5f73ef0725b..a7c30711495 100644 --- a/desktop/src/features/messages/ui/TypingIndicatorRow.tsx +++ b/desktop/src/features/messages/ui/TypingIndicatorRow.tsx @@ -102,7 +102,7 @@ export function TypingIndicatorRow({ key={pubkey} className={cn( "relative shrink-0 ring-1 ring-background", - profile?.isAgent ? "rounded-[30%]" : "rounded-full", + profile?.isAgent ? "agent-avatar-squircle" : "rounded-full", isActivityVariant ? "h-4 w-4" : "h-5 w-5", index > 0 && "-ml-1.5", )} diff --git a/desktop/src/features/profile/ui/ProfileAvatar.tsx b/desktop/src/features/profile/ui/ProfileAvatar.tsx index d8d22eaa76a..72a1eca72e6 100644 --- a/desktop/src/features/profile/ui/ProfileAvatar.tsx +++ b/desktop/src/features/profile/ui/ProfileAvatar.tsx @@ -108,7 +108,7 @@ export function ProfileAvatar({