MaxRoster

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); 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).

Facts#

Group	Agents
Product	Max
Kind	Showcase page (tokens and patterns, not a single export)

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#