Agent Status

Current agent state.

html

<span class="agent-status agent-status--running" style="--accent:#A8E6C1;">
  <span class="agent-status__dot agent-status__dot--pulse" aria-hidden="true"></span>
  <span class="agent-status__icon" aria-hidden="true"></span>
  <span class="agent-status__label">Research agent</span>
  <span class="agent-status__state">running</span>
</span>
<style>
.agent-status { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 system-ui, sans-serif; padding: 8px 12px; border-radius: 999px; background: #FAF7F2; border: 1.5px solid var(--accent); color: #241430; }
.agent-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
.agent-status__dot--pulse { animation: agent-status-pulse .22s ease-in-out infinite; }
}
@keyframes agent-status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
.agent-status__icon { flex: none; font-size: 11px; line-height: 1; }
.agent-status--running .agent-status__icon::before { content: "▶"; }
.agent-status--idle .agent-status__icon::before { content: "◇"; }
.agent-status--blocked .agent-status__icon::before { content: "⏸"; }
.agent-status--error .agent-status__icon::before { content: "✕"; }
.agent-status__state { text-transform: capitalize; color: #24143099; font-weight: 500; }
</style>

tailwind

<span class="agent-status-tw agent-status-tw--running inline-flex items-center gap-2 text-[13px] leading-none font-semibold px-3 py-2 rounded-full bg-[#FAF7F2] text-[#241430]" style="--accent:#A8E6C1;border:1.5px solid var(--accent);">
  <span class="agent-status-tw__dot agent-status-tw__dot--pulse w-2 h-2 rounded-full flex-none" style="background:var(--accent)" aria-hidden="true"></span>
  <span class="agent-status-tw__icon flex-none text-[11px] leading-none" aria-hidden="true"></span>
  <span>Research agent</span>
  <span class="capitalize text-[#24143099] font-medium">running</span>
</span>
<style>
@media (prefers-reduced-motion: no-preference) {
.agent-status-tw__dot--pulse { animation: agent-status-tw-pulse .22s ease-in-out infinite; }
}
@keyframes agent-status-tw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
.agent-status-tw--running .agent-status-tw__icon::before { content: "▶"; }
.agent-status-tw--idle .agent-status-tw__icon::before { content: "◇"; }
.agent-status-tw--blocked .agent-status-tw__icon::before { content: "⏸"; }
.agent-status-tw--error .agent-status-tw__icon::before { content: "✕"; }
</style>

react

export function AgentStatus({
  state = "running",
  label = "Research agent",
  accent = "#A8E6C1",
  pulse = true,
}) {
  const icon = { running: "▶", idle: "◇", blocked: "⏸", error: "✕" }[state] ?? "◇";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 600, fontSize: 13, lineHeight: 1,
      padding: "8px 12px", borderRadius: 999, background: "#FAF7F2", border: `1.5px solid ${accent}`, color: "#241430" }}>
      <span aria-hidden="true" className={pulse ? "as-pulse-dot" : undefined} style={{ width: 8, height: 8, borderRadius: "50%", background: accent, flex: "none" }} />
      <span aria-hidden="true" style={{ flex: "none", fontSize: 11, lineHeight: 1 }}>{icon}</span>
      <span>{label}</span>
      <span style={{ textTransform: "capitalize", color: "#24143099", fontWeight: 500 }}>{state}</span>
      <style>{`@media (prefers-reduced-motion: no-preference) { .as-pulse-dot { animation: agent-status-react-pulse .22s ease-in-out infinite; } } @keyframes agent-status-react-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }`}</style>
    </span>
  );
}