Update pause button styling to use blue ring instead of gray

- Changed background from gray to blue (bg-blue-500/20)
- Updated ring color to blue with higher opacity (ring-blue-400/50)
- Maintains better visibility while using a more vibrant color scheme

frontend/src/components/features/controls/agent-control-bar.tsx

@@ -39,6 +39,11 @@ export function AgentControlBar() {
             : AgentState.PAUSED
         }
         handleAction={handleAction}
+        className={
+          curAgentState === AgentState.RUNNING
+            ? "bg-blue-500/20 ring-2 ring-blue-400/50"
+            : ""
+        }
       >
         {curAgentState === AgentState.PAUSED ? <PlayIcon /> : <PauseIcon />}
       </ActionButton>

frontend/src/components/shared/buttons/action-button.tsx

@@ -6,6 +6,7 @@ interface ActionButtonProps {
   content: string;
   action: AgentState;
   handleAction: (action: AgentState) => void;
+  className?: string;
 }
 
 export function ActionButton({
@@ -13,6 +14,7 @@ export function ActionButton({
   content,
   action,
   handleAction,
+  className = "",
   children,
 }: React.PropsWithChildren<ActionButtonProps>) {
   return (
@@ -20,7 +22,7 @@ export function ActionButton({
       <button
         onClick={() => handleAction(action)}
         disabled={isDisabled}
-        className="relative overflow-visible cursor-default hover:cursor-pointer group disabled:cursor-not-allowed transition-colors duration-300 ease-in-out border border-transparent hover:border-red-400/40 rounded-full p-1"
+        className={`relative overflow-visible cursor-default hover:cursor-pointer group disabled:cursor-not-allowed transition-colors duration-300 ease-in-out border border-transparent hover:border-red-400/40 rounded-full p-1 ${className}`}
         type="button"
       >
         <span className="relative group-hover:filter group-hover:drop-shadow-[0_0_5px_rgba(255,64,0,0.4)]">