[jerelvelarde]

The problem

Two things looked wrong at desktop width in onboarding:

• "Bring the agents you already have" showed the brief demo left of centre, with the frame of frameworks under it offset to the right.
• "Pick a Bot or make your own" drew OpenDuet as its orb and every other Bot as a pink gradient disc. Next to OpenDuet those read as something from another product.

The approach

Centring. IllustrationFrame caps itself at max-w-lg. Placed straight in a step's centred column, it was centred by that column. But the capability demo wraps it in a full-width box, and there it sat at the box's left edge. The frame now centres itself (mx-auto).

The orb's colours. The mic orb now has the four colours the launch film's title uses, taken from launch-film/film/src/duet/micorb.ts:

• Ocean, OpenDuet's own;
• Ember, Lime and Graphite.

MicOrb takes a colour, and the palette carries the rim shade per colour. Every Bot other than the tenant's own now wears one of the other three, in both AbstractAvatar (roster, profiles, cards, hand-off) and the conversation list's ChannelAvatar.

The colour is picked from the Bot's id with FNV-1a, so a Bot is the same colour everywhere. FNV-1a replaced a running * 31 hash, which put your-agent and the onboarding roster's ids all on one colour. AbstractAvatar's seed is now optional and unused, because the conversation list only has the id.

What is not covered

• boring-avatars is no longer imported by the app. I left it in package.json to keep the lockfile out of this change.
• Graphite is the coolest of the three and the nearest to Ocean at small sizes. With FNV-1a, the onboarding roster's ids land on Ember and Lime.

Verification

• bun test app/tests: 2430 pass, 0 fail.
• tenant-bot-avatar.test.tsx checks that:
  • every other Bot is the orb in a non-Ocean colour, and the same colour every time;
  • the conversation list matches;
  • a group draws Ocean only for the tenant's Bot.
• bun run typecheck is clean, and Biome lint is clean.
• Rendered at 1100 px wide, dark theme: the brief and the frameworks frame share one centre line and width. The roster shows OpenDuet in Ocean and the other Bots as orbs in Ember and Lime.

[jerelvelarde]

Security review: no actionable findings. This is presentation only: a CSS centring fix and avatar drawing. No data, routes or permissions change.