From 942588093bfdd9ca071a9e5912ce1832ddb508fa Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Mon, 30 Mar 2026 19:09:49 +0300
Subject: [PATCH] fix(graph): pause button as standalone icon left of View
 dropdown

---
 packages/agent-graph/src/ui/GraphControls.tsx | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/agent-graph/src/ui/GraphControls.tsx b/packages/agent-graph/src/ui/GraphControls.tsx
index 3bf4e39e..135d0acf 100644
--- a/packages/agent-graph/src/ui/GraphControls.tsx
+++ b/packages/agent-graph/src/ui/GraphControls.tsx
@@ -109,6 +109,19 @@ export function GraphControls({
       </div>
 
       <div className="absolute right-3 top-3 z-10 flex items-center gap-2 pointer-events-none">
+        <div
+          className="pointer-events-auto flex items-center rounded-lg px-1 py-0.5 backdrop-blur-sm"
+          style={{
+            background: 'rgba(8, 12, 24, 0.8)',
+            border: '1px solid rgba(100, 200, 255, 0.08)',
+          }}
+        >
+          <ToolbarButton
+            onClick={() => toggle('paused')}
+            icon={filters.paused ? <Play size={14} /> : <Pause size={14} />}
+          />
+        </div>
+
         <div ref={settingsRef} className="relative pointer-events-auto">
           <div
             className="flex items-center gap-0.5 rounded-lg px-1 py-0.5 backdrop-blur-sm"
@@ -154,14 +167,6 @@ export function GraphControls({
                 label="Edges"
                 block
               />
-              <div className="my-1 h-px bg-[rgba(100,200,255,0.08)]" />
-              <ToolbarToggle
-                active={!filters.paused}
-                onClick={() => toggle('paused')}
-                icon={filters.paused ? <Play size={13} /> : <Pause size={13} />}
-                label={filters.paused ? 'Resume' : 'Pause'}
-                block
-              />
             </div>
           )}
         </div>