From af7beab488b1bdd675c94663595ad84ee070d553 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sun, 13 Sep 2026 21:32:49 -0400
Subject: [PATCH] fix(web): put the SSE badge on the status variant so it
 clears the a11y contrast gate (#2318)

The first story to render a long-lived GET entry tripped axe on the
filled orange badge (white on #f76707, 3.04:1); the light variant is no
better (3.03:1). ThemeBadge already pins status + orange to a mid amber
fill with black text for this reason.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APKSYHGxXBUpnR7ErFiLJn
Signed-off-by: cliffhall <cliff@futurescale.com>
---
 .../components/groups/NetworkEntry/NetworkEntry.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
index bec6b08c..8315db77 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
+++ b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
@@ -213,6 +213,17 @@ const SentinelTooltip = Tooltip.withProps({
   w: 280,
 });
 
+// The long-lived-stream marker on a GET entry, on the `status` variant like
+// the status chip beside it. Amber cannot clear WCAG AA as either a filled
+// (white on orange, 3.04:1) or a light (orange on tint, 3.03:1) badge at this
+// size; `ThemeBadge` pins `status` + orange to a mid amber fill with black
+// text for exactly that reason, which is what the a11y gate needs the moment a
+// story renders one (#2318 added the first).
+const StreamBadge = Badge.withProps({
+  color: "orange",
+  variant: "status",
+});
+
 const Base64Badge = Badge.withProps({
   size: "xs",
   color: "gray",
@@ -538,7 +549,7 @@ export function NetworkEntry({
       {entry.duration != null && (
         <DurationText>{formatDuration(entry.duration)}</DurationText>
       )}
-      {isLongLivedStreamEntry(entry) && <Badge color="orange">SSE</Badge>}
+      {isLongLivedStreamEntry(entry) && <StreamBadge>SSE</StreamBadge>}
       <Badge color={statusColor(entry)} variant="status">
         {statusLabel(entry)}
       </Badge>