Every DiceBear style appears alongside Letter / Upload in one source-selection row; the variant grid then covers all styles, so choosing a variant changes the style just selected.
Settings · Agent and user identity
Avatar settings
Agent and user avatars share one AvatarPicker. Select one of three types, then use that type's controls. Generated variants belong only to the current DiceBear style.
Problem and boundaries
Type (Generated / Letter / Upload) is the sole entry point. For Generated, select a style, then choose a seed from that style's variants. Edit Letter characters and colors inside the picker.
AvatarConfig kind names (dicebear / letter / upload), persistence fields,Avatar rendering, Agent/User profile stores and the DiceBear dependency remain unchanged.
Unified data flow
1 · TYPEGenerated / Letter / Upload
Left-aligned segmented control, rather than a row of 16 style tiles
2 · STYLECurrent DiceBear style
Retain the current seed when changing style if possible; otherwise use the display name
3 · VARIANTSCurrent style only
Fixed 48px tracks wrap within the right-hand cluster without stretching
4 · SAVE
AvatarConfigGenerated writes kind: dicebear, the current style and seed
Layout
Each settings-card row has two parts: a non-stretching label on the left and content-sized controls on the right. Avatar follows Preview and Display name: the label stays left, and the picker groups naturally sized tiles on the right without filling the card. Letter characters and colors remain inside the picker instead of becoming separate card rows.
Decisions
| Option | Decision | Reason |
|---|---|---|
| Source selection = every style + Letter + Upload | Rejected | This mixes type and style at one level and requires editing Letter characters outside the card. |
| Variant grid spans all published styles | Rejected | Selecting a variant changes the current style, conflicting with selecting the style first. |
| Type → (style + same-style variants | letter fields | upload) | Adopted | The three paths are independent; Regenerate changes only the seed for the current style. |
Variant grid 1fr fills the card | Rejected | Tiles remain fixed at 48px and wrap in the right-hand cluster without stretching. |
| Separate implementations for agents and users | Rejected | Both settings entry points already share ProfileEditor and AvatarPicker. |
Acceptance contract
- Agent and user settings use the same picker.
- All variants belong to the current style; Regenerate does not change style.
- Selecting a variant writes
kind: "dicebear", the current style and that seed. - Letter characters and colors are edited in the picker and remain stored in the profile's
initial/color. - The variant grid uses fixed 48px tracks in the row's right-hand cluster, instead of
1frfilling the row. - Saved
AvatarConfigcontinues to render using the original kind / style / seed.
Implementation status
Implemented. AvatarPicker offers three types; Generated uses AVATAR_STYLES to select a style, andvariants.ts generates seeds only for the current style. Letter controls move from ProfileEditor into the picker. The settings card gives Avatar the same two-part layout as other rows: left label and naturally sized right picker.apps/web/tests/settings/avatar-randomization.test.mjs and theme-appearance.test.mjs verify same-style variants, unchanged style on Regenerate, Letter control placement and the fixed-track grid.