From 22b38b19564b857a8238cc5a31563c9935240471 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Fri, 20 Mar 2026 06:09:04 -0500
Subject: [PATCH] Use toggle for task assignment permission control

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

diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx
index 9c2a66a3..3e238e5e 100644
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@@ -1456,10 +1456,16 @@ function ConfigurationTab({
                 {taskAssignHint}
               </p>
             </div>
-            <Button
-              variant={canAssignTasks ? "default" : "outline"}
-              size="sm"
-              className="h-7 px-2.5 text-xs"
+            <button
+              type="button"
+              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",
+              )}
               onClick={() =>
                 updatePermissions.mutate({
                   canCreateAgents,
@@ -1468,8 +1474,13 @@ function ConfigurationTab({
               }
               disabled={updatePermissions.isPending || taskAssignLocked}
             >
-              {canAssignTasks ? "Enabled" : "Disabled"}
-            </Button>
+              <span
+                className={cn(
+                  "inline-block h-4 w-4 transform rounded-full bg-background transition-transform",
+                  canAssignTasks ? "translate-x-6" : "translate-x-1",
+                )}
+              />
+            </button>
           </div>
         </div>
       </div>