From 8b8eebcf9b5443d5563d64f33c71a0d0530ef1cf Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Fri, 10 Oct 2025 11:03:49 -0400
Subject: [PATCH] use badges for yes/no in browser sessions listing (#3680)

---
 .../browserSessions/BrowserSessions.tsx       | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/skyvern-frontend/src/routes/browserSessions/BrowserSessions.tsx b/skyvern-frontend/src/routes/browserSessions/BrowserSessions.tsx
index fd7d15d6..43e13de1 100644
--- a/skyvern-frontend/src/routes/browserSessions/BrowserSessions.tsx
+++ b/skyvern-frontend/src/routes/browserSessions/BrowserSessions.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { ProxyLocation } from "@/api/types";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Drawer,
@@ -63,6 +64,18 @@ function sessionIsOpen(browserSession: BrowserSession): boolean {
   );
 }
 
+const No = () => (
+  <Badge className="flex h-7 w-12 justify-center bg-gray-800 text-orange-50 hover:bg-gray-900">
+    No
+  </Badge>
+);
+
+const Yes = () => (
+  <Badge className="flex h-7 w-12 justify-center bg-green-900 text-green-50 hover:bg-green-900/80">
+    Yes
+  </Badge>
+);
+
 function BrowserSessions() {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -233,19 +246,9 @@ function BrowserSessions() {
                           />
                         </div>
                       </TableCell>
+                      <TableCell>{isOpen ? <Yes /> : <No />}</TableCell>
                       <TableCell>
-                        {isOpen ? (
-                          "Yes"
-                        ) : (
-                          <span className="opacity-50">No</span>
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        {browserSession.runnable_id ? (
-                          "Yes"
-                        ) : (
-                          <span className="opacity-50">No</span>
-                        )}
+                        {browserSession.runnable_id ? <Yes /> : <No />}
                       </TableCell>
                       <TableCell
                         title={