Agent

AI system capable of performing multi-step tasks.

html

<div class="agent-card" style="--accent:#A8E6C1;border-radius:14px;">
  <div class="agent-card__header">
    <span class="agent-card__avatar" aria-hidden="true">&#129302;</span>
    <div class="agent-card__who">
      <p class="agent-card__name">Inbox Triage</p>
      <span class="agent-card__badge agent-card__badge--active">active</span>
    </div>
  </div>
  <p class="agent-card__goal"><span class="agent-card__goal-label">Goal:</span> Sort unread mail into folders and flag anything urgent</p>
</div>
<style>
.agent-card { font: 14px/1.5 system-ui, sans-serif; max-width: 360px; padding: 16px 18px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143022; box-sizing: border-box; }
.agent-card__header { display: flex; align-items: center; gap: 12px; }
.agent-card__avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); font-size: 18px; flex-shrink: 0; }
.agent-card__who { flex: 1; min-width: 0; }
.agent-card__name { margin: 0 0 4px; font-weight: 700; font-size: 15px; }
.agent-card__badge { display: inline-block; text-transform: capitalize; font-size: 11px; font-weight: 700; padding: .25em .7em; border-radius: 999px; border: 1.5px solid var(--accent); }
.agent-card__badge--active { background: var(--accent); color: #241430; }
.agent-card__badge--paused { background: transparent; color: var(--accent); }
.agent-card__badge--done { background: transparent; color: #24143066; border-color: #24143033; }
.agent-card__goal { margin: 12px 0 0; font-size: 13px; color: #241430cc; }
.agent-card__goal-label { font-weight: 600; color: #241430; }
</style>

tailwind

<div class="max-w-sm p-4 bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] box-border" style="--accent:#A8E6C1;border-radius:14px;">
  <div class="flex items-center gap-3">
    <span class="flex items-center justify-center w-9.5 h-9.5 rounded-full text-lg flex-shrink-0" style="background:var(--accent)" aria-hidden="true">&#129302;</span>
    <div class="flex-1 min-w-0">
      <p class="m-0 mb-1 font-bold text-[15px]">Inbox Triage</p>
      <span class="agent-card-tw__badge agent-card-tw__badge--active inline-block capitalize text-[11px] font-bold px-2.5 py-1 rounded-full border-[1.5px]" style="border-color:var(--accent)">active</span>
    </div>
  </div>
  <p class="mt-3 mb-0 text-[13px] text-[#241430]/80"><span class="font-semibold text-[#241430]">Goal:</span> Sort unread mail into folders and flag anything urgent</p>
</div>
<style>
.agent-card-tw__badge--active { background: var(--accent); color: #241430; }
.agent-card-tw__badge--paused { background: transparent; color: var(--accent); }
.agent-card-tw__badge--done { background: transparent; color: #24143066; border-color: #24143033 !important; }
</style>

react

export function Agent({
  name = "Inbox Triage",
  goal = "Sort unread mail into folders and flag anything urgent",
  status = "active",
  accent = "#A8E6C1",
  radius = 14,
}) {
  const badge = {
    active: { background: accent, color: "#241430", borderColor: accent },
    paused: { background: "transparent", color: accent, borderColor: accent },
    done: { background: "transparent", color: "#24143066", borderColor: "#24143033" },
  }[status] ?? {};
  return (
    <div style={{ maxWidth: 360, padding: "16px 18px", background: "#FAF7F2", color: "#241430",
      border: "1.5px solid #24143022", borderRadius: radius, boxSizing: "border-box", fontFamily: "system-ui, sans-serif" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span aria-hidden="true" style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 38,
          height: 38, borderRadius: "50%", background: accent, fontSize: 18, flexShrink: 0 }}>&#129302;</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <p style={{ margin: "0 0 4px", fontWeight: 700, fontSize: 15 }}>{name}</p>
          <span style={{ display: "inline-block", textTransform: "capitalize", fontSize: 11, fontWeight: 700,
            padding: "0.25em 0.7em", borderRadius: 999, border: "1.5px solid", ...badge }}>{status}</span>
        </div>
      </div>
      <p style={{ margin: "12px 0 0", fontSize: 13, color: "#241430cc" }}>
        <span style={{ fontWeight: 600, color: "#241430" }}>Goal:</span> {goal}
      </p>
    </div>
  );
}