From 569b3b3f5b7c4d512d4cdefd8daf8c2a7cdb3571 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Sat, 28 Mar 2026 15:44:33 +0200
Subject: [PATCH] fix(agent-graph): remove borders from toggle buttons, add gap
 between groups

Replace border-based active state with background-only indication.
Add gap-3 between toolbar groups for better visual separation.
---
 packages/agent-graph/src/ui/GraphControls.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/agent-graph/src/ui/GraphControls.tsx b/packages/agent-graph/src/ui/GraphControls.tsx
index f9f7222e..8cbed4fc 100644
--- a/packages/agent-graph/src/ui/GraphControls.tsx
+++ b/packages/agent-graph/src/ui/GraphControls.tsx
@@ -63,7 +63,7 @@ export function GraphControls({
   const nameColor = teamColor ?? '#aaeeff';
 
   return (
-    <div className="absolute top-2 left-20 right-3 flex items-center justify-between pointer-events-none z-10">
+    <div className="absolute top-2 left-20 right-3 flex items-center justify-between pointer-events-none z-10 gap-3">
       {/* Left: team name + status indicator */}
       <div className="flex items-center pointer-events-auto">
         <div
@@ -191,10 +191,10 @@ function ToolbarToggle({
   return (
     <button
       onClick={onClick}
-      className={`flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[11px] font-mono transition-all cursor-pointer border
+      className={`flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[11px] font-mono transition-all cursor-pointer
         ${active
-          ? 'text-[#aaeeffcc] bg-[rgba(100,200,255,0.08)] border-[rgba(100,200,255,0.12)]'
-          : 'text-[#66ccff40] bg-transparent border-transparent hover:text-[#66ccff70] hover:border-[rgba(100,200,255,0.08)]'
+          ? 'text-[#aaeeffc0] bg-[rgba(100,200,255,0.1)]'
+          : 'text-[#66ccff40] bg-transparent hover:text-[#66ccff70] hover:bg-[rgba(100,200,255,0.05)]'
         }`}
     >
       {icon}