F1: the bug was the color never reaching the DOM (Mantine Avatar's --avatar-bg
overrode it); the pure agentGlyphBackground always returned distinct colors, so
the existing unit tests would pass even against the broken Avatar. Add a
data-testid on the glyph Box and two render tests: one asserts the emoji glyph's
applied inline background equals agentGlyphBackground(name); one asserts two
palette-distinct agents reach the DOM as different backgrounds. React applies
styles via the CSSOM (hsl→rgb), so the assertion normalizes both sides through
the same path and compares against the real function output (no frozen literal).
Fails against the pre-fix Avatar (no inline background / no glyph testid).
F2: the top-level AgentAvatarStack JSDoc and two test titles still described the
old z-order (agent glyph in front, human behind); the PR flipped it (human
launcher badge in front, zIndex 2 > glyph 1). Updated the JSDoc + both titles to
match.
vitest: 10 passed (+2).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The per-agent glyph color never showed: the circle was a Mantine
`Avatar variant="filled"` whose background was overridden by Mantine's
`--avatar-bg`, so every agent fell back to the theme's violet. Also raw
`hue = hash % 360` put many names in the same "purple" arc.
- Render the emoji/sparkles circle as a plain Box with an explicit
background — the color is now guaranteed.
- Pick the color from a curated palette of categorically-distinct dark
hues (red/orange/green/teal/blue/violet/magenta/slate) by name hash, so
different agents read as different colors, not shades of one violet.
- Bring the launcher (human) badge ABOVE the agent glyph (zIndex) so it is
fully visible at the top-right instead of half-hidden behind the circle.
client tsc clean, tests pass (added a color-distinctness assertion).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
claude code agent 227