From 5541e3606b741d2363a7786749a2dcd3067dfd61 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Wed, 4 Nov 2026 17:11:33 +0100
Subject: [PATCH] swarm-ui: give the badge row its own stylesheet, imported
 where it is used

---
 .../packages/swarm-ui/src/agent/detail/AgentInference.tsx | 1 +
 .../packages/swarm-ui/src/agent/detail/AgentLimits.tsx    | 1 +
 .../packages/swarm-ui/src/agent/detail/AllowedDomains.tsx | 1 +
 .../swarm-ui/src/ui/badge-popover/BadgePopover.css        | 7 -------
 frontend/packages/swarm-ui/src/ui/badge-row/BadgeRow.css  | 8 ++++++++
 5 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 frontend/packages/swarm-ui/src/ui/badge-row/BadgeRow.css

diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx
index da8c43fb..e1ff907c 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentInference.tsx
@@ -20,6 +20,7 @@ import { Panel } from "../../ui/panel/Panel.js";
 import { SelectField } from "../../ui/select-field/SelectField.js";
 import { TextField } from "../../ui/text-field/TextField.js";
 import { Button } from "../../ui/button/Button.js";
+import "../../ui/badge-row/BadgeRow.css";
 import "./AgentInference.css";
 import { MAX_SUBAGENTS, maxSubagentsValue } from "./max-subagents.js";
 
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx
index 3444f22f..b8bfe011 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AgentLimits.tsx
@@ -20,6 +20,7 @@ import { Button } from "../../ui/button/Button.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { TextField } from "../../ui/text-field/TextField.js";
+import "../../ui/badge-row/BadgeRow.css";
 import "./AgentLimits.css";
 
 // The caps as the route carries them; both fields are optional.
diff --git a/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx b/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx
index 793f016f..d094d24f 100644
--- a/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx
+++ b/frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx
@@ -38,6 +38,7 @@ import {
   type AllowedDomain,
   type EntryGroup,
 } from "./allowed-domains.js";
+import "../../ui/badge-row/BadgeRow.css";
 import "./AgentLimits.css";
 
 interface Listing {
diff --git a/frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.css b/frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.css
index 1ab6620d..68701ea6 100644
--- a/frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.css
+++ b/frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.css
@@ -25,10 +25,3 @@
   display: grid;
   gap: 0.3em;
 }
-/* A line of badges that wraps when it runs out of room. */
-.ui-badge-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.4em;
-}
diff --git a/frontend/packages/swarm-ui/src/ui/badge-row/BadgeRow.css b/frontend/packages/swarm-ui/src/ui/badge-row/BadgeRow.css
new file mode 100644
index 00000000..52addc48
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/ui/badge-row/BadgeRow.css
@@ -0,0 +1,8 @@
+/* A line of badges that wraps when it runs out of room. Import this where the
+   class is used. */
+.ui-badge-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4em;
+}