# MaxRoster

> Max's 24 Digital Workers in their seven teams, each with its face (**AgentFace**) and accent dot.

## Facts

- **Product**: Max
- **Family**: Agents
- **Kind**: Showcase page (tokens and patterns)
- **Live preview**: /design/components/max-roster/preview.html
- **Page**: /design/components/max-roster

## Guidelines

**Teams** (from `agent-persona.dto.ts`): Leadership (Max Carter); Revenue intelligence (Sofia Rossi, Ezra Novak, Simon Keller, Amara Okafor, Luca Moretti, Ava Morgan); Outbound (Emma Laurent, Hugo Silva); Inbox (Iris Chen, Nolan Park, Axel Moreau); Meetings (Maya Brooks, Theo Kim, Clara Bennett, Olivia Grant); Close & expand (Priya Nair, Daniel Ortiz); Operations (Nova Lane, Nora Hale, Jade Lin, Leo Mercer, Victor Cole, Orion Reed).

**Faces**: 16 have a 4:5 studio portrait (`assets/Agents/*.webp`); the other 8 show initials on their accent tile. Accents come from 16 Tailwind hues (see [**AgentAccents**](/design/components/agent-accents.md)); some are shared (violet: Max Carter and Olivia Grant; indigo: Nora Hale, Ezra Novak, Ava Morgan).

**Use it for** rosters, helper pickers and anywhere a person chooses which agent to talk to. Hovering a card rings it in the agent's accent (`group-hover:border-<c>-500/40`).

Note the two Maxes: in the Max product "Max Carter, Head of Sales" wears violet; on Digital Crew surfaces the agent Max wears amber (`dc-max`).

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
var GROUPS = [
  ["Leadership", ["max_chat"]],
  ["Revenue intelligence", ["talk_search", "workspace_intelligence", "icp_writer", "signal_analyst", "account_researcher", "revenue_analyst"]],
  ["Outbound", ["campaign_writer", "workflow_generator"]],
  ["Inbox", ["reply_suggestions", "inbox_classifier", "inbox_reply"]],
  ["Meetings", ["meetings", "meeting_summarizer", "meeting_tasks", "meeting_feedback"]],
  ["Close & expand", ["proposal_builder", "customer_growth_analyst"]],
  ["Operations", ["page_navigator", "onboarding_chat", "action_prefill", "action_suggestions", "deal_owner_router", "agent_drafter"]]];
function Agent(s) {
  var id = DC.AGENT_IDENTITY[s];
  return h("div", { key: s, className: "group flex items-center gap-2.5 rounded-lg border bg-card p-2 transition-colors " + id.accent.ring },
    h(DC.AgentFace, { surface: s, size: "sm" }),
    h("div", { className: "grid min-w-0" },
      h("span", { className: "truncate text-sm font-medium" }, id.name),
      h("span", { className: "truncate text-xs text-muted-foreground" }, id.craft)),
    h("span", { className: "ml-auto size-2 shrink-0 rounded-full " + id.accent.dot }));
}
function App() {
  return h("div", { className: "grid gap-4" }, GROUPS.map(function (g) {
    return h("section", { key: g[0], className: "grid gap-2" },
      h("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground" }, g[0] + " · " + g[1].length),
      h("div", { className: "grid grid-cols-4 gap-2" }, g[1].map(Agent)));
  }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Agents

- [AgentAvatar](/design/components/agent-avatar.md): A Digital Worker's face as a muted, looping video in a rounded square, framed and glowing in the agent's brand colour, with an optional live dot.
- [AgentSkillTag](/design/components/agent-skill-tag.md): A tiny chip naming one of a Digital Worker's skills, tinted with that worker's colour.
- [AskMaxAction](/design/components/ask-max-action.md): A contextual "Ask Max" button.
- [CrewAgents](/design/components/crew-agents.md): The Digital Crew's eight agents, each one colour broken out of the ink: the palette ramp, the gradient, the role and the skills the public site gives them.
- [EquipmentBadge](/design/components/equipment-badge.md): A small chip showing one piece of a Digital Worker's desk equipment as an emoji, with or without its label.
- [OAuthRequestCard](/design/components/oauth-request-card.md): A "Connect HubSpot" or "Connect Notion" card that an agent drops into the chat.
- [ThinkingBox](/design/components/thinking-box.md): Max's thinking box: the running account of what he thought, which tools he called, what he sent and what came back.
- [ToolStatusIndicator](/design/components/tool-status-indicator.md): Compact dot, label and state rows that report tool activity in the onboarding and meetings chats.