From 6a3e989a6d9690becc3d991be0e4a38420ab5add Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 21 Aug 2026 12:21:09 +0200
Subject: [PATCH] feat(extension): add beta badge to Agents tab

---
 .../entrypoints/sidepanel/agents-mode-switch.tsx      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/extension/entrypoints/sidepanel/agents-mode-switch.tsx b/apps/extension/entrypoints/sidepanel/agents-mode-switch.tsx
index 72f16e6d967..d8ca449f2c4 100644
--- a/apps/extension/entrypoints/sidepanel/agents-mode-switch.tsx
+++ b/apps/extension/entrypoints/sidepanel/agents-mode-switch.tsx
@@ -2,11 +2,15 @@ import type { JSX } from 'react';
 import type { SidePanelMode } from '@/src/shared/side-panel-mode';
 
 const tabBaseClassName =
-  'relative h-9 shrink-0 rounded-md px-3 type-label transition outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background';
+  'relative flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-md px-3 type-label transition outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-ring ring-offset-2 ring-offset-surface-background';
 
 const tabActiveClassName = `${tabBaseClassName} bg-surface-selected text-foreground font-medium`;
 const tabInactiveClassName = `${tabBaseClassName} text-foreground-muted hover:bg-surface-hover`;
 
+// Same pill vocabulary as the session status badges, in the brand tint.
+const betaBadgeClassName =
+  'rounded-full bg-brand-primary/15 px-1.5 py-0.5 type-eyebrow uppercase tracking-wide text-brand-primary';
+
 export const AgentsModeSwitch = ({
   mode,
   onModeChange,
@@ -32,7 +36,7 @@ export const AgentsModeSwitch = ({
       Browser
     </button>
     <button
-      aria-label="Agents"
+      aria-label="Agents beta"
       aria-selected={mode === 'agents'}
       className={mode === 'agents' ? tabActiveClassName : tabInactiveClassName}
       onClick={() => {
@@ -42,6 +46,9 @@ export const AgentsModeSwitch = ({
       type="button"
     >
       Agents
+      <span aria-hidden="true" className={betaBadgeClassName}>
+        Beta
+      </span>
     </button>
   </div>
 );