Edit Agent Status

Name

Also known as (comma separated)

Brief definition Current agent state.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "state", "type": "select", "label": "State", "default": "running", "options": [ "running", "idle", "blocked", "error" ] }, { "id": "label", "type": "text", "label": "Label", "default": "Research agent" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "pulse", "type": "toggle", "label": "Pulse indicator", "default": true } ]

Templates (JSON object keyed by format) { "html": "<span class=\"agent-status agent-status--{{state}}\" style=\"--accent:{{accent}};\">\n <span class=\"agent-status__dot{{#if pulse}} agent-status__dot--pulse{{/if}}\" aria-hidden=\"true\"></span>\n <span class=\"agent-status__icon\" aria-hidden=\"true\"></span>\n <span class=\"agent-status__label\">{{label}}</span>\n <span class=\"agent-status__state\">{{state}}</span>\n</span>\n<style>\n.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; }\n.agent-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }\n@media (prefers-reduced-motion: no-preference) {\n.agent-status__dot--pulse { animation: agent-status-pulse .22s ease-in-out infinite; }\n}\n@keyframes agent-status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }\n.agent-status__icon { flex: none; font-size: 11px; line-height: 1; }\n.agent-status--running .agent-status__icon::before { content: \"▶\"; }\n.agent-status--idle .agent-status__icon::before { content: \"◇\"; }\n.agent-status--blocked .agent-status__icon::before { content: \"⏸\"; }\n.agent-status--error .agent-status__icon::before { content: \"✕\"; }\n.agent-status__state { text-transform: capitalize; color: #24143099; font-weight: 500; }\n</style>", "tailwind": "<span class=\"agent-status-tw agent-status-tw--{{state}} inline-flex items-center gap-2 text-[13px] leading-none font-semibold px-3 py-2 rounded-full bg-[#FAF7F2] text-[#241430]\" style=\"--accent:{{accent}};border:1.5px solid var(--accent);\">\n <span class=\"agent-status-tw__dot{{#if pulse}} agent-status-tw__dot--pulse{{/if}} w-2 h-2 rounded-full flex-none\" style=\"background:var(--accent)\" aria-hidden=\"true\"></span>\n <span class=\"agent-status-tw__icon flex-none text-[11px] leading-none\" aria-hidden=\"true\"></span>\n <span>{{label}}</span>\n <span class=\"capitalize text-[#24143099] font-medium\">{{state}}</span>\n</span>\n<style>\n@media (prefers-reduced-motion: no-preference) {\n.agent-status-tw__dot--pulse { animation: agent-status-tw-pulse .22s ease-in-out infinite; }\n}\n@keyframes agent-status-tw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }\n.agent-status-tw--running .agent-status-tw__icon::before { content: \"▶\"; }\n.agent-status-tw--idle .agent-status-tw__icon::before { content: \"◇\"; }\n.agent-status-tw--blocked .agent-status-tw__icon::before { content: \"⏸\"; }\n.agent-status-tw--error .agent-status-tw__icon::before { content: \"✕\"; }\n</style>", "react": "export function AgentStatus({\n state = \"{{state}}\",\n label = \"{{label}}\",\n accent = \"{{accent}}\",\n pulse = {{pulse}},\n}) {\n const icon = { running: \"▶\", idle: \"◇\", blocked: \"⏸\", error: \"✕\" }[state] ?? \"◇\";\n return (\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, fontWeight: 600, fontSize: 13, lineHeight: 1,\n padding: \"8px 12px\", borderRadius: 999, background: \"#FAF7F2\", border: `1.5px solid ${accent}`, color: \"#241430\" }}>\n <span aria-hidden=\"true\" className={pulse ? \"as-pulse-dot\" : undefined} style={{ width: 8, height: 8, borderRadius: \"50%\", background: accent, flex: \"none\" }} />\n <span aria-hidden=\"true\" style={{ flex: \"none\", fontSize: 11, lineHeight: 1 }}>{icon}</span>\n <span>{label}</span>\n <span style={{ textTransform: \"capitalize\", color: \"#24143099\", fontWeight: 500 }}>{state}</span>\n <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>\n </span>\n );\n}" }