Bug: Person avatars show identical colors when distinct IDs start with the same character

Bug Description

Bug description

In person lists around the Dashboard, when all person distinct IDs start with the same character (e.g., all start with '0'), all profile pictures/lettermarks display as identicaly colored circles with the same letter inside. This makes it difficult to visually distinguish between different users in the list.

Root cause: The Lettermark component supports 8 color variants via an index prop, but the PersonIcon component doesn't pass an index value to ProfilePicture. Without an index, all persons with the same first character get the same default color.

Expected behavior: Each unique person should get a distinct, consistent color based on a hash of their distinct_id or display name, similar to how GitHub, Slack, and other platforms generate stable avatar colors.

Current behavior: All persons whose IDs/names start with the same character get identical colored avatars.

Affected areas:

• All person lists throughout PostHog that use PersonIcon/PersonDisplay

How to reproduce

1. Navigate to LLM Analytics → Users tab
2. View the activity list where all identified persons have distinct IDs starting with '0'
3. Observe that all profile pictures are identical lilac circles with '0' inside
4. Note the difficulty in visually scanning and distinguishing between different persons

Additional context

From: https://posthoghelp.zendesk.com/agent/tickets/48500 (moved to PostHog: https://us.posthog.com/project/2/support/tickets/50630)

Debug info

Kind: support

Target area: logs

Report event: http://go/ticketByUUID/7ffe0a6a-3e06-474b-8da0-d1d7e2f17bb1

Session: https://us.posthog.com/project/sTMFPsFhdP1Ssg/replay/019bfea9-7811-7fa0-b370-a70f542110b1?t=169

Exceptions: https://us.posthog.com/project/2/error_tracking?filterGroup=%7B%22type%22%3A%22AND%22%2C%22values%22%3A%5B%7B%22type%22%3A%22AND%22%2C%22values%22%3A%5B%7B%22key%22%3A%22%24session_id%22%2C%22value%22%3A%5B%22019bfea9-7811-7fa0-b370-a70f542110b1%22%5D%2C%22operator%22%3A%22exact%22%2C%22type%22%3A%22event%22%7D%5D%7D%5D%7D

Location: https://eu.posthog.com/project/118536/activity/explore#q=%7B%22kind%22%3A%22DataTableNode%22%2C%22full%22%3Atrue%2C%22source%22%3A%7B%22kind%22%3A%22EventsQuery%22%2C%22select%22%3A%5B%22*%22%2C%22event%22%2C%22person_display_name%20--%20Person%22%2C%22timestamp%22%2C%22properties.sb_code%22%2C%22properties.sb_rating%22%2C%22properties.sb_reason%22%5D%2C%22after%22%3A%22-7d%22%2C%22orderBy%22%3A%5B%22timestamp%20DESC%22%5D%7D%2C%22propertiesViaUrl%22%3Atrue%2C%22showSavedQueries%22%3Atrue%2C%...&

Persons-on-events mode for project: person_id_override_properties_on_events

Locate the Lettermark, PersonIcon, and ProfilePicture components, then inspect how the index prop is handled in person lists. Implement stable color selection from the distinct ID or display name, and verify in the LLM Analytics Users tab that people with the same initial receive distinct, consistent avatar colors.