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. */}
- {initials}
+ {/* A machine wears its role icon; a person wears their initials. */}
+ {a && a.icon ? : initials}
{a ? (