From 3de7d63ea9223a03bf62ae23b517b106e92abddb Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Fri, 20 Mar 2026 06:27:52 -0500
Subject: [PATCH] fix: use standard toggle component for permission controls

Replace the button ("Enabled"/"Disabled") for "Can create new agents" and
the custom oversized switch for "Can assign tasks" with the same toggle
style (h-5 w-9, bg-green-600/bg-muted) used throughout Run Policy.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/AgentDetail.tsx | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx
index 3e238e5e..37ac5cf5 100644
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@@ -1434,10 +1434,14 @@ function ConfigurationTab({
                 Lets this agent create or hire agents and implicitly assign tasks.
               </p>
             </div>
-            <Button
-              variant={canCreateAgents ? "default" : "outline"}
-              size="sm"
-              className="h-7 px-2.5 text-xs"
+            <button
+              type="button"
+              role="switch"
+              aria-checked={canCreateAgents}
+              className={cn(
+                "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",
+                canCreateAgents ? "bg-green-600" : "bg-muted",
+              )}
               onClick={() =>
                 updatePermissions.mutate({
                   canCreateAgents: !canCreateAgents,
@@ -1446,8 +1450,13 @@ function ConfigurationTab({
               }
               disabled={updatePermissions.isPending}
             >
-              {canCreateAgents ? "Enabled" : "Disabled"}
-            </Button>
+              <span
+                className={cn(
+                  "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+                  canCreateAgents ? "translate-x-4.5" : "translate-x-0.5",
+                )}
+              />
+            </button>
           </div>
           <div className="flex items-center justify-between gap-4 text-sm">
             <div className="space-y-1">
@@ -1461,10 +1470,8 @@ function ConfigurationTab({
               role="switch"
               aria-checked={canAssignTasks}
               className={cn(
-                "relative inline-flex h-6 w-11 shrink-0 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                canAssignTasks
-                  ? "bg-green-500 focus-visible:ring-green-500/70"
-                  : "bg-input/50 focus-visible:ring-ring",
+                "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",
+                canAssignTasks ? "bg-green-600" : "bg-muted",
               )}
               onClick={() =>
                 updatePermissions.mutate({
@@ -1476,8 +1483,8 @@ function ConfigurationTab({
             >
               <span
                 className={cn(
-                  "inline-block h-4 w-4 transform rounded-full bg-background transition-transform",
-                  canAssignTasks ? "translate-x-6" : "translate-x-1",
+                  "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+                  canAssignTasks ? "translate-x-4.5" : "translate-x-0.5",
                 )}
               />
             </button>