Enhance pause button visibility with gray circle background

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

@@ -40,7 +40,13 @@ export function AgentControlBar() {
         }
         handleAction={handleAction}
       >
-        {curAgentState === AgentState.PAUSED ? <PlayIcon /> : <PauseIcon />}
+        {curAgentState === AgentState.PAUSED ? (
+          <PlayIcon />
+        ) : (
+          <div className="bg-gray-200 p-2 rounded-full">
+            <PauseIcon />
+          </div>
+        )}
       </ActionButton>
     </div>
   );

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

@@ -23,7 +23,7 @@ export function ActionButton({
         className="relative overflow-visible cursor-default hover:cursor-pointer group disabled:cursor-not-allowed transition-all duration-300 ease-in-out"
         type="button"
       >
-        <span className="relative group-hover:filter group-hover:drop-shadow-[0_0_5px_rgba(255,64,0,0.4)]">
+        <span className="relative flex items-center justify-center group-hover:filter group-hover:drop-shadow-[0_0_5px_rgba(255,64,0,0.4)]">
           {children}
         </span>
         <span className="absolute -inset-[5px] border-2 border-red-400/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out" />