@open-mercato/core 0.6.4-develop.4199.1.86677441c2 → 0.6.4-develop.4217.1.c9aa050183

package/src/modules/catalog/backend/catalog/products/MerchandisingAssistantSheet.tsx

@@ -45,6 +45,7 @@ import { ChatPaneTabs } from '@open-mercato/ui/ai/ChatPaneTabs'
 import '../../../components/CatalogStatsCard'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import {
   Dialog,
@@ -387,7 +388,7 @@ export function MerchandisingAssistantSheet({
 
   return (
     <>
-      <div className={cn('inline-flex items-center', className)}>
+      <ButtonGroup className={className}>
         <Button
           type="button"
           variant="outline"
@@ -395,10 +396,7 @@ export function MerchandisingAssistantSheet({
           data-ai-merchandising-trigger=""
           aria-label={triggerLabel}
           title={triggerLabel}
-          className={cn(
-            'relative',
-            agents.length > 1 && 'rounded-r-none border-r-0',
-          )}
+          className="relative"
         >
           <AiIcon className="size-4" />
           <span>{labelText}</span>
@@ -417,10 +415,8 @@ export function MerchandisingAssistantSheet({
               <IconButton
                 type="button"
                 variant="outline"
-                size="lg"
                 aria-label={moreAgentsLabel}
                 title={moreAgentsLabel}
-                className="rounded-l-none"
                 data-ai-merchandising-picker=""
               >
                 <ChevronDown className="size-4" aria-hidden />
@@ -454,7 +450,7 @@ export function MerchandisingAssistantSheet({
             </PopoverContent>
           </Popover>
         ) : null}
-      </div>
+      </ButtonGroup>
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent
           className={cn(

package/src/modules/customers/components/detail/ActivityCard.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { Calendar, Check, ExternalLink, ListTodo, Mail, MoreHorizontal, Phone, StickyNote, Users } from 'lucide-react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -10,7 +11,6 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
 import type { InteractionSummary } from './types'
 import { ActivityAiActions } from './ActivityAiActions'
-import { getInitials } from './utils'
 
 type GuardedMutationRunner = <T,>(
   operation: () => Promise<T>,
@@ -199,9 +199,7 @@ export function ActivityCard({ activity, onOpen, onChanged, runMutation }: Activ
         ) : null}
 
         <div className="mt-3 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-          <span className="inline-flex size-5 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground">
-            {getInitials(actorLabel)}
-          </span>
+          <Avatar label={actorLabel} size="xs" variant="monochrome" />
           <span className="font-medium text-foreground">{actorLabel}</span>
           {target && direction ? (
             <>

package/src/modules/customers/components/detail/AssignRoleDialog.tsx

@@ -3,7 +3,9 @@
 import * as React from 'react'
 import Link from 'next/link'
 import { Search, Check, CheckCheck, Settings2 } from 'lucide-react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { StepIndicator, type StepIndicatorStep } from '@open-mercato/ui/primitives/step-indicator'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
@@ -18,7 +20,6 @@ import {
 import type { DictionaryEntryOption } from '@open-mercato/core/modules/dictionaries/lib/clientEntries'
 import type { RoleAssignment } from './RoleAssignmentRow'
 import { fetchAssignableStaffMembersPage } from './assignableStaff'
-import { getInitials } from './utils'
 
 const MANAGE_ROLE_TYPES_HREF = '/backend/config/customers'
 
@@ -297,9 +298,11 @@ export function AssignRoleDialog({
           {t('customers.roles.dialog.preview', 'Assignment preview')}
         </p>
         <div className="mt-3 flex items-center gap-3">
-          <div className="flex size-12 items-center justify-center rounded-full bg-background text-sm font-semibold text-foreground">
-            {getInitials(selectedUser.displayName)}
-          </div>
+          <Avatar
+            label={selectedUser.displayName}
+            size="lg"
+            className="bg-background text-foreground"
+          />
           <div className="min-w-0">
             <div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-foreground">
               <span>{selectedUser.displayName}</span>
@@ -350,25 +353,26 @@ export function AssignRoleDialog({
         </DialogHeader>
 
         <div className="border-b border-border/70 px-6 py-4">
-          <div className="flex items-center justify-center gap-3 text-xs">
-            <StepBadge
-              step={1}
-              currentStep={step}
-              label={t('customers.roles.dialog.step1', 'Role type')}
-            />
-            <div className="h-px w-10 bg-border" />
-            <StepBadge
-              step={2}
-              currentStep={step}
-              label={t('customers.roles.dialog.step2', 'Select person')}
-            />
-            <div className="h-px w-10 bg-border" />
-            <StepBadge
-              step={3}
-              currentStep={step}
-              label={t('customers.roles.dialog.step3', 'Confirm')}
-            />
-          </div>
+          <StepIndicator
+            className="justify-center"
+            steps={[
+              {
+                id: '1',
+                label: t('customers.roles.dialog.step1', 'Role type'),
+                status: step > 1 ? 'complete' : step === 1 ? 'current' : 'pending',
+              },
+              {
+                id: '2',
+                label: t('customers.roles.dialog.step2', 'Select person'),
+                status: step > 2 ? 'complete' : step === 2 ? 'current' : 'pending',
+              },
+              {
+                id: '3',
+                label: t('customers.roles.dialog.step3', 'Confirm'),
+                status: step === 3 ? 'current' : 'pending',
+              },
+            ] satisfies StepIndicatorStep[]}
+          />
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto">
@@ -550,9 +554,7 @@ export function AssignRoleDialog({
                               : 'border-border/70 bg-background hover:bg-accent/40'
                           }`}
                         >
-                          <div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground">
-                            {getInitials(user.displayName)}
-                          </div>
+                          <Avatar label={user.displayName} size="lg" variant="monochrome" />
                           <div className="min-w-0 flex-1">
                             <div className="flex flex-wrap items-center gap-2">
                               <span className="text-sm font-semibold text-foreground">
@@ -672,32 +674,3 @@ export function AssignRoleDialog({
   )
 }
 
-function StepBadge({
-  step,
-  currentStep,
-  label,
-}: {
-  step: StepId
-  currentStep: StepId
-  label: string
-}) {
-  const isComplete = currentStep > step
-  const isCurrent = currentStep === step
-
-  return (
-    <div className="flex items-center gap-2">
-      <span
-        className={`flex size-5 items-center justify-center rounded-full border text-xs font-semibold ${
-          isComplete || isCurrent
-            ? 'border-foreground bg-foreground text-background'
-            : 'border-border bg-background text-muted-foreground'
-        }`}
-      >
-        {isComplete ? <Check className="size-3" /> : step}
-      </span>
-      <span className={isCurrent ? 'font-semibold text-foreground' : 'text-muted-foreground'}>
-        {label}
-      </span>
-    </div>
-  )
-}

package/src/modules/customers/components/detail/ChangelogEntryRow.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import * as React from 'react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Settings2, SquarePen, Plus, Trash2, UserRoundPlus, ArrowRight } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { getInitials } from './utils'
 
 type ChangelogActionType = 'create' | 'edit' | 'delete' | 'assign' | 'system'
 type ChangelogSource = 'ui' | 'api' | 'system'
@@ -84,9 +84,11 @@ export function ChangelogEntryRow({ entry }: ChangelogEntryRowProps) {
       </div>
 
       <div className="flex items-start gap-2">
-        <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
-          {entry.actorUserId ? getInitials(actorLabel) : <Settings2 className="size-3.5" />}
-        </div>
+        {entry.actorUserId ? (
+          <Avatar label={actorLabel} size="sm" variant="monochrome" />
+        ) : (
+          <Avatar label="" icon={<Settings2 />} size="sm" variant="monochrome" />
+        )}
         <span className="truncate pt-1 text-sm text-foreground">{actorLabel}</span>
       </div>
 

package/src/modules/customers/components/detail/CompanyDetailHeader.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Phone, Mail, Trash2, Building2, Globe, Pencil, MapPin } from 'lucide-react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
@@ -103,9 +104,12 @@ export function CompanyDetailHeader({
       {/* Top row: avatar + company info + account manager + actions */}
       <div className="flex flex-col gap-4 px-6 pt-6 pb-3 sm:flex-row sm:items-start sm:gap-5">
         {/* Avatar */}
-        <div className="flex size-18 shrink-0 items-center justify-center rounded-full bg-muted">
-          <Building2 className="size-7 text-muted-foreground" />
-        </div>
+        <Avatar
+          label=""
+          icon={<Building2 />}
+          size="xl"
+          variant="monochrome"
+        />
 
         {/* Company info */}
         <div className="min-w-0 flex-1">

package/src/modules/customers/components/detail/DealLinkedEntitiesTab.tsx

@@ -2,10 +2,11 @@
 
 import * as React from 'react'
 import Link from 'next/link'
-import { ArrowLeft, ArrowRight, Link2 } from 'lucide-react'
+import { Link2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
 import { LinkEntityDialog, type LinkEntityAdapter, type LinkEntityOption } from '../linking/LinkEntityDialog'
 
 type LinkedEntityOption = {
@@ -54,49 +55,6 @@ function applyFilter(items: LinkedEntityOption[], query: string): LinkedEntityOp
   })
 }
 
-function Pagination({
-  page,
-  totalPages,
-  onPageChange,
-}: {
-  page: number
-  totalPages: number
-  onPageChange: (page: number) => void
-}) {
-  if (totalPages <= 1) return null
-  return (
-    <div className="flex items-center justify-between border-t border-border/70 pt-3 text-sm text-muted-foreground">
-      <span>
-        Page {page} of {totalPages}
-      </span>
-      <div className="flex items-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="h-8 rounded-lg px-3 text-xs"
-          onClick={() => onPageChange(Math.max(1, page - 1))}
-          disabled={page <= 1}
-        >
-          <ArrowLeft className="mr-1.5 size-3.5" />
-          Previous
-        </Button>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="h-8 rounded-lg px-3 text-xs"
-          onClick={() => onPageChange(Math.min(totalPages, page + 1))}
-          disabled={page >= totalPages}
-        >
-          Next
-          <ArrowRight className="ml-1.5 size-3.5" />
-        </Button>
-      </div>
-    </div>
-  )
-}
-
 export function DealLinkedEntitiesTab({
   entityLabel,
   entityLabelPlural,
@@ -313,11 +271,15 @@ export function DealLinkedEntitiesTab({
                 </div>
               </Link>
             ))}
-            <Pagination
-              page={visiblePage}
-              totalPages={visibleTotalPages}
-              onPageChange={setPage}
-            />
+            {visibleTotalPages > 1 ? (
+              <Pagination
+                className="border-t border-border/70 pt-3"
+                page={visiblePage}
+                pageSize={PAGE_SIZE}
+                total={visibleTotalPages * PAGE_SIZE}
+                onPageChange={setPage}
+              />
+            ) : null}
           </div>
         ) : remoteLinkedLoading ? (
           <div className="rounded-lg border border-border bg-muted/20 px-5 py-5 text-sm text-muted-foreground">

package/src/modules/customers/components/detail/DetailTabsLayout.tsx

@@ -63,7 +63,7 @@ export function DetailTabsLayout<TId extends string = string>({
               className={cn(
                 'h-auto rounded-none border-b-2 px-0 py-1',
                 activeTab === tab.id
-                  ? 'border-primary text-foreground hover:bg-transparent'
+                  ? 'border-accent-indigo text-foreground hover:bg-transparent'
                   : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-transparent'
               )}
             >

package/src/modules/customers/components/detail/ManageTagsDialog.tsx

@@ -42,8 +42,11 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { ColorPicker } from '@open-mercato/ui/primitives/color-picker'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
 import {
   Dialog,
   DialogContent,
@@ -421,23 +424,12 @@ function SortableEntryRow({
       </div>
 
       {/* Color picker */}
-      <div className="flex w-[80px] shrink-0 items-center gap-1.5 rounded-md border border-input px-2 py-1.5">
-        <label className="relative size-4 shrink-0 cursor-pointer">
-          <span
-            className="block size-full rounded-sm"
-            style={{ backgroundColor: normalizeColor(entry.color) }}
-          />
-          <input
-            type="color"
-            value={normalizeColor(entry.color)}
-            onChange={(e) => onColorChange(normalizeColor(e.target.value))}
-            className="absolute inset-0 size-full cursor-pointer opacity-0"
-          />
-        </label>
-        <span className="text-xs font-medium text-muted-foreground">
-          {normalizeColor(entry.color)}
-        </span>
-      </div>
+      <ColorPicker
+        value={normalizeColor(entry.color)}
+        onChange={(next) => onColorChange(normalizeColor(next))}
+        size="sm"
+        className="shrink-0"
+      />
 
       {/* Delete */}
       <IconButton
@@ -1065,12 +1057,12 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
             ) : null}
 
             {/* Tab bar */}
-            <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-1.5">
+            <div className="flex shrink-0 items-end gap-2 border-b border-input px-4 pt-1.5">
               <IconButton
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="size-8 shrink-0 rounded-full"
+                className="size-8 shrink-0 self-center rounded-full"
                 onClick={() => scrollCategoryRail('left')}
                 disabled={!canScrollLeft}
                 aria-label={t('customers.tags.manage.scrollLeft', 'Scroll categories left')}
@@ -1079,7 +1071,7 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
               </IconButton>
               <div
                 ref={categoryRailRef}
-                className="min-w-0 flex-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                className="scrollbar-hide min-w-0 flex-1 overflow-x-auto"
               >
                 <div className="flex items-end gap-0.5">
                   {translatedCategories.map((category) => {
@@ -1096,10 +1088,10 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
                           setActiveTab(category.kind)
                           setSearchValue('')
                         }}
-                        className={`flex h-auto shrink-0 items-center gap-1.5 rounded-none border-b-2 px-2.5 py-2 hover:bg-transparent ${
+                        className={`flex h-auto shrink-0 items-center gap-1.5 rounded-none border-b-2 px-2.5 py-2 hover:bg-transparent -mb-px ${
                           isActive
-                            ? '-mb-px border-foreground text-foreground'
-                            : '-mb-px border-transparent text-muted-foreground'
+                            ? 'border-accent-indigo text-foreground'
+                            : 'border-transparent text-muted-foreground'
                         }`}
                       >
                         <Icon className="size-3.5" />
@@ -1120,7 +1112,7 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="size-8 shrink-0 rounded-full"
+                className="size-8 shrink-0 self-center rounded-full"
                 onClick={() => scrollCategoryRail('right')}
                 disabled={!canScrollRight}
                 aria-label={t('customers.tags.manage.scrollRight', 'Scroll categories right')}
@@ -1130,7 +1122,8 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
             </div>
 
             {/* Content */}
-            <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-6 py-3.5">
+            <ScrollArea className="min-h-0 flex-1" viewportClassName="px-6 py-3.5">
+              <div className="flex flex-col gap-3">
               {activeMeta ? (
                 <>
                   {/* Category header + search */}
@@ -1141,18 +1134,15 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
                           {activeMeta.shortLabel}
                         </span>
                         {(activeMeta.badges ?? []).map((badge) => (
-                          <span
+                          <Badge
                             key={badge}
-                            className={`rounded-sm px-2 py-0.5 text-overline font-bold ${
-                              badge === 'required'
-                                ? 'bg-status-warning-bg text-status-warning-text'
-                                : 'bg-muted text-muted-foreground'
-                            }`}
+                            variant={badge === 'required' ? 'warning' : 'muted'}
+                            size="sm"
                           >
                             {badge === 'required'
                               ? t('customers.tags.manage.badge.required', 'REQUIRED')
                               : t('customers.tags.manage.badge.system', 'SYSTEM')}
-                          </span>
+                          </Badge>
                         ))}
                       </div>
                       <div className="flex items-center gap-1.5">
@@ -1178,17 +1168,17 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
                   <div className="flex items-center gap-3 px-3 py-1.5">
                     <div className="w-[18px] shrink-0" />
                     <div className="min-w-0 flex-1">
-                      <span className="text-overline font-bold uppercase text-muted-foreground">
+                      <span className="text-overline font-medium uppercase tracking-wider text-muted-foreground">
                         {t('customers.tags.manage.columns.label', 'LABEL')}
                       </span>
                     </div>
                     <div className="w-[140px] shrink-0">
-                      <span className="text-overline font-bold uppercase text-muted-foreground">
+                      <span className="text-overline font-medium uppercase tracking-wider text-muted-foreground">
                         {t('customers.tags.manage.columns.slug', 'SLUG')}
                       </span>
                     </div>
                     <div className="w-[80px] shrink-0">
-                      <span className="text-overline font-bold uppercase text-muted-foreground">
+                      <span className="text-overline font-medium uppercase tracking-wider text-muted-foreground">
                         {t('customers.tags.manage.columns.color', 'COLOR')}
                       </span>
                     </div>
@@ -1283,7 +1273,8 @@ export function ManageTagsDialog({ open, onClose }: ManageTagsDialogProps) {
                   {t('customers.tags.manage.noDictionaries', 'No tag categories found.')}
                 </div>
               )}
-            </div>
+              </div>
+            </ScrollArea>
 
             {/* Separator */}
             <div className="h-px shrink-0 bg-border" />

package/src/modules/customers/components/detail/PersonCard.tsx

@@ -7,10 +7,11 @@ import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
 import type { CompanyPersonSummary } from './CompanyPeopleSection'
-import { formatDate, formatFallbackLabel, getInitials } from './utils'
+import { formatDate, formatFallbackLabel } from './utils'
 
 const sourceColorMap: Record<string, string> = {
   linkedin: 'border-status-info-icon text-status-info-icon',
@@ -70,9 +71,7 @@ export function PersonCard({ person, isStarred, onToggleStar, onUnlink }: Person
     <div className="min-w-0 overflow-hidden rounded-lg border bg-card p-4">
       <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 flex-1 items-start gap-3">
-          <div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-bold text-muted-foreground">
-            {getInitials(person.displayName)}
-          </div>
+          <Avatar label={person.displayName} size="lg" variant="monochrome" />
           <div className="min-w-0 flex-1 space-y-1">
             <div className="flex min-w-0 flex-wrap items-center gap-1.5">
               <span className="min-w-0 break-words text-sm font-bold leading-5 text-foreground">{person.displayName}</span>

package/src/modules/customers/components/detail/PersonDetailHeader.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { Phone, Mail, Building2, Trash2, Pencil } from 'lucide-react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
@@ -18,7 +19,7 @@ import type { TagSummary } from './types'
 import type { TagsSectionController } from '@open-mercato/ui/backend/detail'
 import type { PersonOverview } from '../formConfig'
 import type { CustomerDictionaryMap } from '@open-mercato/core/modules/customers/lib/dictionaries'
-import { getInitials, formatFallbackLabel } from './utils'
+import { formatFallbackLabel } from './utils'
 
 const HEADER_ICON_BUTTON_CLASS = 'size-8 rounded-md'
 
@@ -125,9 +126,7 @@ export function PersonDetailHeader({
     <div className="rounded-lg border bg-card px-6 py-5">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:gap-5">
         {/* Avatar */}
-        <div className="flex size-18 shrink-0 items-center justify-center rounded-full bg-muted text-xl font-bold text-muted-foreground">
-          {getInitials(displayName)}
-        </div>
+        <Avatar label={displayName} size="xl" variant="monochrome" />
 
         {/* Person info */}
         <div className="min-w-0 flex-1">

package/src/modules/customers/components/detail/RoleAssignmentRow.tsx

@@ -7,11 +7,11 @@ import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs/LookupSelect'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { fetchAssignableStaffMembers } from './assignableStaff'
-import { getInitials } from './utils'
 
 export interface RoleAssignment {
   id: string
@@ -136,9 +136,8 @@ export function RoleAssignmentRow({
     [role.userEmail, role.userId, role.userName],
   )
 
-  const initials = React.useMemo(() => {
-    const name = role.userName ?? role.userEmail ?? ''
-    return getInitials(name || '?')
+  const userLabel = React.useMemo(() => {
+    return role.userName ?? role.userEmail ?? '?'
   }, [role.userEmail, role.userName])
 
   const displayName = role.userName ?? role.userEmail ?? role.userId
@@ -165,9 +164,7 @@ export function RoleAssignmentRow({
         </div>
 
         <div className="mt-4 flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start">
-          <div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-bold text-muted-foreground">
-            {initials}
-          </div>
+          <Avatar label={userLabel} size="lg" variant="monochrome" />
           <div className="min-w-0 flex-1">
             <div className="break-all text-sm font-semibold leading-5 text-foreground">{displayName}</div>
             {role.userEmail ? (

package/src/modules/customers/components/detail/utils.ts

@@ -148,13 +148,6 @@ export function createDictionarySelectLabels(
   }
 }
 
-export function getInitials(name: string): string {
-  const words = name.trim().split(/\s+/)
-  if (words.length === 0 || !words[0]) return '?'
-  if (words.length === 1) return words[0].charAt(0).toUpperCase()
-  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase()
-}
-
 export function formatCurrency(amount: number, currency?: string | null): string {
   try {
     return new Intl.NumberFormat(undefined, {

package/src/modules/customers/widgets/injection/ai-assistant-trigger/widget.client.tsx

@@ -24,6 +24,7 @@ import { useAiDock } from '@open-mercato/ui/ai/AiDock'
 import { useAiChatSessions } from '@open-mercato/ui/ai/AiChatSessions'
 import { ChatPaneTabs } from '@open-mercato/ui/ai/ChatPaneTabs'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import {
   Dialog,
@@ -525,7 +526,7 @@ export default function AiAssistantTriggerWidget({ context }: AiAssistantTrigger
 
   return (
     <>
-      <div className="inline-flex items-center">
+      <ButtonGroup>
         <Button
           type="button"
           variant="outline"
@@ -533,11 +534,7 @@ export default function AiAssistantTriggerWidget({ context }: AiAssistantTrigger
           data-ai-customers-inject-trigger=""
           aria-label={triggerLabel}
           title={triggerLabel}
-          className={cn(
-            'relative',
-            'hover:bg-brand-violet/10',
-            agents.length > 1 && 'rounded-r-none border-r-0',
-          )}
+          className={cn('relative', 'hover:bg-brand-violet/10')}
         >
           <AiIcon className="size-4" />
           <span>{labelText}</span>
@@ -556,10 +553,8 @@ export default function AiAssistantTriggerWidget({ context }: AiAssistantTrigger
               <IconButton
                 type="button"
                 variant="outline"
-                size="lg"
                 aria-label={moreAgentsLabel}
                 title={moreAgentsLabel}
-                className="rounded-l-none"
                 data-ai-customers-inject-picker=""
               >
                 <ChevronDown className="size-4" aria-hidden />
@@ -593,7 +588,7 @@ export default function AiAssistantTriggerWidget({ context }: AiAssistantTrigger
             </PopoverContent>
           </Popover>
         ) : null}
-      </div>
+      </ButtonGroup>
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent
           className={cn(