diff --git a/frontend/packages/swarm-ui/src/agent/picker/AgentPicker.css b/frontend/packages/swarm-ui/src/agent/picker/AgentPicker.css
index 52a427ea6..13e0fed72 100644
--- a/frontend/packages/swarm-ui/src/agent/picker/AgentPicker.css
+++ b/frontend/packages/swarm-ui/src/agent/picker/AgentPicker.css
@@ -49,3 +49,17 @@
 .ui-agent-picker-state-up {
   color: var(--green);
 }
+/* The loading twin's card (a skeleton the caller renders in the same grid):
+   not a control, so no pointer. */
+.ui-agent-picker-card-loading {
+  cursor: default;
+}
+/* Its name and state lines take the height of a line of text, so the card is
+   the height of a real one. */
+.ui-agent-picker-card-loading .ui-agent-picker-name,
+.ui-agent-picker-card-loading .ui-agent-picker-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.6em;
+}
diff --git a/frontend/packages/swarm-ui/src/pages/ArchetypePicker.css b/frontend/packages/swarm-ui/src/pages/ArchetypePicker.css
index 7803732e8..adaa16721 100644
--- a/frontend/packages/swarm-ui/src/pages/ArchetypePicker.css
+++ b/frontend/packages/swarm-ui/src/pages/ArchetypePicker.css
@@ -1,5 +1,5 @@
-/* The archetype tiles, laid out and styled like the broadcast screen's agent
-   tiles (`.ui-broadcast-grid`, `.ui-broadcast-agent`). */
+/* The archetype tiles, laid out and styled like the agent tiles of the agent
+   picker (`.ui-agent-picker`, `.ui-agent-picker-card`). */
 .ui-archetype-picker {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
diff --git a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css
index 379616637..8318c0371 100644
--- a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css
+++ b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css
@@ -106,16 +106,3 @@
 .ui-broadcast-fail .ui-broadcast-outcome-name {
   color: var(--fg);
 }
-/* The loading twin's chip: not a control, so no pointer. */
-.ui-broadcast-agent-loading {
-  cursor: default;
-}
-/* Its name and state lines take the height of a line of text, so the chip is
-   the height of a real one. */
-.ui-broadcast-agent-loading .ui-broadcast-name,
-.ui-broadcast-agent-loading .ui-broadcast-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 1.6em;
-}
diff --git a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx
index 571673417..7a636a753 100644
--- a/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx
+++ b/frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx
@@ -61,20 +61,20 @@ function storedFilter(): AgentFilter {
   }
 }
 
-// The twin of the agent grid while the roster loads: the same grid and the
+// The twin of the agent grid while the agents load: the same grid and the
 // same chip (border, icon, name, state) with a placeholder in each slot.
 function RosterSkeleton({ count = 6 }: { count?: number }) {
   return (
     <SkeletonRegion label="the agents">
-      <ul class="ui-broadcast-grid" aria-hidden="true">
+      <ul class="ui-agent-picker" aria-hidden="true">
         {Array.from({ length: count }, (_, i) => (
           <li key={i}>
-            <div class="ui-broadcast-agent ui-broadcast-agent-loading">
+            <div class="ui-agent-picker-card ui-agent-picker-card-loading">
               <Skeleton shape="block" width="5em" height="5em" />
-              <span class="ui-broadcast-name">
+              <span class="ui-agent-picker-name">
                 <Skeleton width="4em" />
               </span>
-              <span class="ui-broadcast-state">
+              <span class="ui-agent-picker-state">
                 <Skeleton width="3.5em" />
               </span>
             </div>