From a3628bd9cebef8d2221bb0f7993f6af2896f0fe0 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sun, 1 Nov 2026 01:29:47 +0100
Subject: [PATCH] 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.
---
 .../swarm-ui/src/agent/roster/AgentCard.css   | 21 +++++++++++++++++++
 .../swarm-ui/src/agent/roster/AgentCard.tsx   |  3 ++-
 2 files changed, 23 insertions(+), 1 deletion(-)

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 (
-    <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">