diff --git a/src/api/agents.js b/src/api/agents.js index 8652cf0..9972cb0 100644 --- a/src/api/agents.js +++ b/src/api/agents.js @@ -28,6 +28,7 @@ */ export const AGENTS = { ai_intake: { + icon: 'inspect', short: 'Intake', full: 'Intake & Attribution', initials: 'IA', @@ -44,6 +45,7 @@ export const AGENTS = { }, ai_engage: { + icon: 'chat', short: 'Engage', full: 'Engage', initials: 'EN', @@ -55,6 +57,7 @@ export const AGENTS = { }, ai_advisor: { + icon: 'shield', short: 'Advisor', full: 'Advisor', initials: 'AD', @@ -66,6 +69,7 @@ export const AGENTS = { }, ai_kyc: { + icon: 'id', short: 'KYC', full: 'KYC & Evidence', initials: 'KY', @@ -77,6 +81,7 @@ export const AGENTS = { }, ai_uw_referral: { + icon: 'scales', short: 'Referral', full: 'Underwriting Referral', initials: 'UW', diff --git a/src/components/AgentChip.css b/src/components/AgentChip.css index e3f2423..ed5002e 100644 --- a/src/components/AgentChip.css +++ b/src/components/AgentChip.css @@ -89,3 +89,8 @@ white-space: nowrap; border: 0; } + +/* Role icon fills most of the disc, leaving room for the AI spark at the + corner. Sized off the disc so it scales with .who--md. */ +.who__glyph { width: 60%; height: 60%; } +.who--md .who__glyph { width: 58%; height: 58%; } diff --git a/src/components/AgentChip.jsx b/src/components/AgentChip.jsx index fa6d81f..c1de47a 100644 --- a/src/components/AgentChip.jsx +++ b/src/components/AgentChip.jsx @@ -1,6 +1,39 @@ import { AGENTS, initialsOf } from '../api/agents.js' import './AgentChip.css' +/** + * ROLE ICONS — one per AI employee, true to what it does. + * + * 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. + */ +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 AgentGlyph({ name }) { + const g = ICONS[name] + if (!g) return null + return ( + + ) +} + /** * Who did this — as a face, not a slug. * @@ -30,7 +63,8 @@ export default function AgentChip({ agentKey, name, size = 'sm', showName = true Only agents get it. A trail where a human's disc also carried one would say nothing at all. */}