import type { AgentRole } from "@paperclipai/shared"; /** * Agent role → color class mapping. * * [nexus] Migrated to design system tokens — see MIGRATION-PLAN.md §6. * * DESIGN.md §2 restricts the palette to "black, neon, green, gray". This file * is the one sanctioned exception: a controlled 5-hue "chart palette" so * agent-mesh views can differentiate roles at a glance. * * The 5 hues are defined as CSS variables in `ui/src/index.css` * (`--chart-role-1` .. `--chart-role-5`) and exposed as Tailwind utilities via * `@theme inline` (`text-chart-role-1` .. `text-chart-role-5`). Each hue is * verified to pass WCAG AA for normal text on both the dark canvas (#000) and * light canvas (#fafafa). * * We have 11 agent roles but only 5 slots — we cycle with modular arithmetic. * Collisions past 5 roles are accepted (role identity is also carried by * labels, icons, and names — color is a secondary signal). */ // Ordered list of role → slot assignments. The order is intentional: // - generalist/pm get the brand anchor (volt in dark / olive in light) // - leadership (ceo/cto/cmo/cfo) spread across the other 4 slots // - engineering/design/qa/devops/research reuse the cycle // This is mechanical mod-5 over the AGENT_ROLES array order, but declared // explicitly so future role additions get a deterministic slot. const ROLE_SLOT: Record = { // Slot 1 — volt / olive (brand anchor, generalist) general: 1, pm: 1, // Slot 2 — teal (ops) devops: 2, cto: 2, // Slot 3 — violet (creative) designer: 3, cmo: 3, // Slot 4 — amber (data / leadership) ceo: 4, cfo: 4, researcher: 4, // Slot 5 — gray (support) engineer: 5, qa: 5, }; function slotClass(slot: 1 | 2 | 3 | 4 | 5): string { // `text-chart-role-N` is a valid Tailwind utility because `--color-chart-role-N` // is declared in the `@theme inline` block in index.css. return `text-chart-role-${slot}`; } export const agentRoleColors: Record = { pm: slotClass(ROLE_SLOT.pm), engineer: slotClass(ROLE_SLOT.engineer), ceo: slotClass(ROLE_SLOT.ceo), general: slotClass(ROLE_SLOT.general), designer: slotClass(ROLE_SLOT.designer), qa: slotClass(ROLE_SLOT.qa), researcher: slotClass(ROLE_SLOT.researcher), devops: slotClass(ROLE_SLOT.devops), cto: slotClass(ROLE_SLOT.cto), cmo: slotClass(ROLE_SLOT.cmo), cfo: slotClass(ROLE_SLOT.cfo), }; export const agentRoleColorDefault = "text-muted-foreground";