swarm-ui: an agent card shows a chevron, and no select highlight

The card header gets the same chevron a folded card has, right while shut and
down while open. The outline for an opened card goes: the sections say it is
open.

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;
+  }
+}

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 (
-    <Card selected={open}>
+    <Card>
       <div
         class="ui-agent-card-row"
         role="button"
@@ -122,6 +122,7 @@ export function AgentCard({
             {row.snapshot?.status_text ?? "—"}
           </div>
         </div>
+        <span class="ui-agent-card-chevron" aria-hidden="true" />
       </div>
       {open ? (
         <div class="ui-agent-card-detail">