fix(avatars): scale agent squircles from normalized paths

[tellaho]

Overview

Category: fix

User Impact: Agent avatars and empty agent-team placeholders now keep the same intentional squircle silhouette at every size on desktop, while human avatars remain circular.

Problem: Desktop agent avatars used percentage-rounded rectangles, which made the silhouette vary by surface and required each avatar implementation to recreate the shape. Empty team placeholders also drew a regular CSS border inside the clip, leaving straight inset edges that looked like a cropped square. Solution: Reuse one normalized SVG clip path across desktop artwork. Empty team placeholders use a separately clipped squircle outline behind the clipped surface, so both the fill and outline follow the canonical silhouette.

Scope correction: Mobile is deferred from this PR because a real Flutter capture could not be obtained reliably in the current build environment. Previously attached mobile images were hand-composed synthetic layouts, not captures from the running app; they have been removed and must not be treated as validation. The mobile implementation is being reverted in one follow-up commit so it can be reapplied and verified separately.

Related issue

Follow-up to #7106.

Changes

File changes

desktop/src/features/agents/ui/AgentCreationPreview.tsx
Applies the shared squircle clip to agent creation preview images and fallbacks.

desktop/src/features/agents/ui/AgentSessionToolItem/CompactMessageSummary.tsx
Uses the shared agent-avatar silhouette in compact session summaries.

desktop/src/features/agents/ui/IdentityInitialsAvatar.tsx
Clips agent initials with the normalized squircle instead of a percentage radius.

desktop/src/features/agents/ui/TeamIdentityCard.tsx
Uses the shared squircle for agent identities and gives empty teams a separately clipped squircle outline instead of a regular inset border.

desktop/src/features/agents/ui/activityRenderClasses/UserMessageBubble.tsx
Keeps agent avatars in activity message bubbles on the canonical silhouette.

desktop/src/features/home/ui/InboxListPane.tsx
Applies the shared clip to agent avatars in the inbox list.

desktop/src/features/home/ui/InboxMessageRow.tsx
Applies the shared clip to agent avatars in inbox message rows.

desktop/src/features/huddle/components/ParticipantList.tsx
Uses the normalized squircle for agent participants while preserving circular human avatars.

desktop/src/features/messages/ui/MessageRow.tsx
Clips agent message avatars through the shared definition.

desktop/src/features/messages/ui/SystemMessageAvatars.tsx
Uses the canonical agent shape in system-message avatar groups.

desktop/src/features/messages/ui/TypingIndicatorRow.tsx
Uses the canonical agent shape in typing indicators.

desktop/src/features/profile/ui/ProfileAvatar.tsx
Scales the same squircle to the larger agent profile avatar.

desktop/src/features/profile/ui/SelectedRecipientChip.tsx
Uses the shared shape for selected agent recipients.

desktop/src/features/projects/ui/IssueAssigneesRow.tsx
Applies the agent squircle to issue assignees without changing human avatar geometry.

desktop/src/features/projects/ui/ProjectCards.tsx
Uses the canonical shape for agent avatars on project cards.

desktop/src/features/projects/ui/ProjectEntityListRow.tsx
Uses the canonical shape for agent identities in project entity lists.

desktop/src/features/projects/ui/ProjectsActivityFeed.tsx
Uses the shared clip for agent avatars in project activity.

desktop/src/features/projects/ui/ProjectsOverviewRail.tsx
Uses the shared clip for agent avatars in the project overview rail.

desktop/src/main.tsx
Mounts the single shared SVG clip-path definition once for the desktop application.

desktop/src/shared/lib/cn.ts
Registers rounded-squircle in the border-radius class group so shadcn-style cn(...) composition resolves it against rounded-full by normal last-class precedence.

desktop/src/shared/styles/globals/utilities.css
Registers the reusable Tailwind rounded-squircle utility and references the normalized SVG clip path without agent-specific CSS selectors.

desktop/src/shared/ui/AvatarClipPaths.tsx
Owns the reusable normalized object-bounding-box rounded-squircle path so all desktop sizes reuse one definition.

desktop/src/shared/ui/UserAvatar.tsx
Routes the existing squircle shape option through the shared SVG clip.

desktop/tests/e2e/agents.spec.ts
Verifies team facepile and empty-team placeholder surfaces/outlines use the canonical clip without a rectangular border.

desktop/tests/e2e/messaging.spec.ts
Verifies agent message and profile avatars reuse one clip definition and scale across rendered sizes.

Reproduction steps

1. Run the desktop app and open a channel containing both agent and human messages.
2. Compare agent avatars in the message list, inbox, huddle participants, projects, and profile panel. Agent images and fallbacks should share one smooth squircle silhouette at each size; human avatars should remain circular.
3. Open Agents and inspect an empty agent-team card. Its placeholder fill and outline should both be smooth squircles, with no straight inset cropped-square edges.
4. Open an agent profile from a message and confirm the larger profile avatar keeps the same proportions as the smaller message avatar.

Testing

• Desktop Biome check passed for the changed empty-team component and Agents E2E spec.
• Desktop typecheck and differential file-size check passed.
• Full desktop unit suite passed: 6,453 tests.
• Full Agents integration spec passed: 37/37, including the empty-team outline regression.
• Post-rebase pre-push gates passed at 304b159a2: desktop checks, TypeScript typecheck, differential file-size gate, and all 6,453 desktop unit tests.
• The shadcn-aligned rounded-squircle registration passed changed-file Biome, desktop TypeScript/build, and pre-push desktop checks at 27e0c12d3; the full desktop unit suite passed 6,459/6,459.

Screenshots

Screenshots are temporarily omitted. The previous captures used the desktop E2E mock bridge and were not evidence from a live running app, so they were removed.