diff --git a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css index dcd5a751..c9e6ded6 100644 --- a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css +++ b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.css @@ -53,3 +53,24 @@ padding-block-start: 0.75em; border-block-start: 1px solid var(--border); } + +/* The same chevron as a folded card's (`ui/disclosure/`): right while shut, + down while open, so the header reads as something that unfolds. */ +.ui-agent-card-chevron { + align-self: center; + width: 0.55em; + height: 0.55em; + flex: none; + border-right: 2px solid var(--muted); + border-bottom: 2px solid var(--muted); + transform: rotate(-45deg); + transition: transform 0.15s ease; +} +.ui-agent-card-row[aria-expanded="true"] .ui-agent-card-chevron { + transform: rotate(45deg); +} +@media (prefers-reduced-motion: reduce) { + .ui-agent-card-chevron { + transition: none; + } +} diff --git a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx index 9b1bde4e..bf0ce4c3 100644 --- a/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx +++ b/frontend/packages/swarm-ui/src/agent/roster/AgentCard.tsx @@ -35,7 +35,7 @@ export function AgentCard({ const error = actions.actionErrors.get(row.name); const toggle = () => setOpen((was) => !was); return ( - +
+