diff --git a/src/components/AgentChip.jsx b/src/components/AgentChip.jsx index c1de47a..4c35ca0 100644 --- a/src/components/AgentChip.jsx +++ b/src/components/AgentChip.jsx @@ -1,35 +1,31 @@ -import { AGENTS, initialsOf } from '../api/agents.js' +import { AGENTS } from '../api/agents.js' import './AgentChip.css' /** - * ROLE ICONS — one per AI employee, true to what it does. + * TWO SYMBOLS, ONE CONTRAST: a sparkle for the machines, a person for the + * people. * - * People are shown by their initials; the machines are shown by a symbol. That - * contrast is the point: an operator can tell a human step from an autonomous - * one at a glance, before reading a name, and the symbol says which machine — - * the one that CHECKS a lead, the one that TALKS to the customer, the one that - * recommends COVER, the one that verifies IDENTITY, the one that prepares a - * REFERRAL. Monoline at disc size, so they stay legible on every hue. + * The sparkle is the settled 2026 signal for AI — the mark Claude, Gemini and + * Copilot all use — so an agent's disc reads as "made by AI" without a legend, + * in the agent's own colour. A person's disc carries a plain head-and-shoulders + * glyph, so a human step reads as human at the same glance. The contrast is the + * whole message: which of these did the machine do, and which did a person. + * Who exactly is said by the name beside the disc and by the colour. */ -const ICONS = { - // a magnifier — Intake checks the lead is real and scores it - inspect: <>, - // a speech bubble — Engage talks to the customer - chat: , - // a shield — the Advisor recommends the cover that protects them - shield: , - // an ID badge — KYC verifies identity - id: <>, - // balance scales — the Referral prepares a file for a human to weigh - scales: , +function SparkleGlyph() { + return ( + + ) } -function AgentGlyph({ name }) { - const g = ICONS[name] - if (!g) return null +function PersonGlyph() { return ( - {showName ? {label} : null} {a ? (AI) : null}