AgentFace

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) with a border hairline. Portraits live in assets/Agents/.

Facts#

API#

TypeScript declarations emitted from src/features/settings/agents/ui/agent-face.tsx (the module also exports AgentFace, AgentPortrait).

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#

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