Agent mark

import { AgentMark, agentIcon, AGENT_ICONS } from "@/components/AgentMark";

Every agent family in AGENTS (in src/mocks/agentWorkflows.js) has an icon name and a colour. This file turns the name into a Phosphor icon, so a family shows the same glyph on the Agents grid, the workflow graph and the Recommendations page. It has three exports:

• AgentMark, the icon drawn filled in the family's colour, with a tooltip that names it.
• agentIcon(agentKey), which returns the icon component for a family, for when you draw it yourself.
• AGENT_ICONS, the map from icon name to component that agentIcon reads.

The familiesCopy Anchor Link

{Object.values(AGENTS).map((a) => (
  <span key={a.key}>
    <AgentMark agentKey={a.key} /> {a.label}
  </span>
))}

The colours and tints are set per family in AGENTS, not taken from the colour tokens. Only Measurement uses a token value (--color-primary-500). Keep these colours for agent families: do not reuse them for status, charts or anything else.

SizesCopy Anchor Link

size sets the icon's width and height in pixels. The default is 20. In the product the family icon is drawn at 11px in pills, 16px in lists, 18px on the workflow graph and 20px in page and drawer headers.

<AgentMark agentKey="measurement" size={14} />
<AgentMark agentKey="measurement" size={16} />
<AgentMark agentKey="measurement" />
<AgentMark agentKey="measurement" size={24} />

In a rowCopy Anchor Link

A workflow uses several families. Put their marks side by side with a 2px gap, next to the workflow's name. Each mark names its family on hover.

<span className="inline-flex items-center gap-0.5">
  <AgentMark agentKey="measurement" size={16} />
  <AgentMark agentKey="demand" size={16} />
  <AgentMark agentKey="conversion" size={16} />
</span>
<span>LinkedIn buyer-title targeting</span>

Drawing the icon yourselfCopy Anchor Link

When the family's name is already printed, as in the pill the Recommendations page puts on each step of an analysis, take the icon from agentIcon and skip the tooltip. Draw it with weight="fill" so it matches the mark.

const a = AGENTS[agentKey];
const Icon = agentIcon(agentKey);

<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[12px] font-medium" style={{ background: a.tint, color: a.color }}>
  <Icon size={11} weight="fill" />
  {deckFamilyOf(agentKey)}
</span>

PropsCopy Anchor Link

AgentMarkCopy Anchor Link

There is no className and no way to change the colour or weight: the mark is always filled, in the family's colour.

agentIconCopy Anchor Link

AccessibilityCopy Anchor Link

• The tooltip reads "Measurement agent" and so on: the family's label followed by "agent". It uses the Tooltip from @/ui. The mark is a plain <span> that cannot take focus, so the tooltip opens on hover only and keyboard users never see it.
• The wrapper <span> carries the same text as aria-label, but it has no role, so most screen readers ignore that label. Where the family matters to someone using a screen reader, print its name next to the mark.
• agentIcon returns a bare icon with no label. Use it only next to visible text.

Do and don'tCopy Anchor Link

• Do use AgentMark or agentIcon for a family. Never pick a Phosphor icon for a family by hand, or two pages will disagree.
• Do print the family name beside the icon when there is room. The tooltip is for rows of marks where there is not.
• Don't use a family colour for anything that is not that family.
• Don't add a family by editing this file. Add it to AGENTS, and add its icon to AGENT_ICONS only if the icon is new.

Where it is usedCopy Anchor Link

AgentMark itself has no callers in src/ today. Every page below takes the icon from agentIcon and colours it by hand.