# AgentFace

> A Digital Worker's face: its approved portrait, or its initials on its accent tile.

## Facts

- **Product**: Max
- **Family**: Data display
- **Global**: `window.DigitalCrew.AgentFace`
- **Source**: `max-agent: src/features/settings/agents/ui/agent-face.tsx`
- **Import in the app**: `import { AgentFace } from "@/features/settings/agents/ui/agent-face";`
- **Live preview**: /design/components/agent-face/preview.html
- **Page**: /design/components/agent-face

## Guidelines

**Use it for** every place an agent appears — roster, chat headers, task executors, helper stacks. Always show the agent's name beside it; the image itself is decorative.

**What you provide**: `surface` (the agent's surface key, e.g. `max_chat`, `campaign_writer`), `size` (`xs` 28px rounded-lg, `sm` 44px round, `md` 56px and `lg` 80px rounded-2xl) and `className`. `AgentPortrait` is the full-bleed roster version.

**Anatomy**: portraits crop with `object-cover` at 50% 28% (Max at 50% 22%); without one, initials in semibold on the agent's accent tile (see [**AgentAccents**](/design/components/agent-accents.md)) with a `border` hairline. Portraits live in `assets/Agents/`.

## API

```ts
declare const SIZES: {
    readonly xs: {
        readonly box: "size-7 rounded-lg";
        readonly image: "28px";
    };
    readonly sm: {
        readonly box: "size-11 rounded-full";
        readonly image: "44px";
    };
    readonly md: {
        readonly box: "size-14 rounded-2xl";
        readonly image: "56px";
    };
    readonly lg: {
        readonly box: "size-20 rounded-2xl";
        readonly image: "80px";
    };
};
export declare function AgentFace({ surface, size, className, }: {
    surface: AgentSurface;
    size?: keyof typeof SIZES;
    className?: string;
}): JSX.Element;
/** Full-bleed portrait used by the human-first roster cards. */
export declare function AgentPortrait({ surface, className, }: {
    surface: AgentSurface;
    className?: string;
}): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
var SURFACES = ["max_chat", "onboarding_chat", "campaign_writer", "workflow_generator", "reply_suggestions", "meeting_summarizer", "page_navigator", "deal_owner_router"];
function App() {
  return h("div", { className: "grid gap-6" },
    h("div", { className: "flex items-end gap-4" },
      h(DC.AgentFace, { surface: "max_chat", size: "lg" }),
      h(DC.AgentFace, { surface: "max_chat", size: "md" }),
      h(DC.AgentFace, { surface: "max_chat", size: "sm" }),
      h(DC.AgentFace, { surface: "max_chat", size: "xs" })),
    h("div", { className: "flex flex-wrap gap-4" }, SURFACES.map(function (s) {
      var id = DC.AGENT_IDENTITY[s];
      return h("div", { key: s, className: "flex items-center gap-2" }, h(DC.AgentFace, { surface: s, size: "sm" }),
        h("div", { className: "grid" }, h("span", { className: "text-sm font-medium" }, id.name), h("span", { className: "text-xs text-muted-foreground" }, id.craft)));
    })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Data display

- [AnimateDigits](/design/components/animate-digits.md): A number whose digits spring in and out as it changes (motion), direction following the change.
- [Avatar](/design/components/avatar.md): A round image with an initials fallback (Radix Avatar), 32px by default.
- [CampaignStatusBadge](/design/components/campaign-status-badge.md): The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.
- [ChannelBadge](/design/components/channel-badge.md): Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).
- [EmailVerificationBadge](/design/components/email-verification-badge.md): The deliverability verdict for an email address, with an icon and an optional score.
- [HeroMetric](/design/components/hero-metric.md): One big number with its previous-period comparison, a trend pill and a pacing bar.
- [KpiCard](/design/components/kpi-card.md): A KPI tile — label, value, trend — and `KpiSection`, the glass panel that groups them.
- [MaxIconSet](/design/components/max-icon-set.md): Max's own SVG icons, exported as `DC.MaxIcons`: integration and channel logos, message delivery states, and the appearance-picker tiles.
- [MetricTile](/design/components/metric-tile.md): A compact glass tile for a scored metric: label, value toned by score band, hint.
- [ProspectAvatar](/design/components/prospect-avatar.md): A prospect's photo, or a gradient disc hashed from their name, with an optional unread halo.
- [Snippet](/design/components/snippet.md): A monospace command block with a copy button whose icon turns into a check after copying.
- [TimeLens](/design/components/time-lens.md): Max's agenda: hour marks, ticks and tasks in one scrolling column, read through a fixed lens that shows the time under it.
- [WorldGlobe](/design/components/world-globe.md): An interactive d3-geo globe on canvas with avatar markers that merge into heat-coloured count bubbles.