relayouts the graph using Dagre when a replace change causes node intersections (#461)

Author: dimaMachina

.changeset/tricky-cycles-hide.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": patch
+---
+
+Add `⌘ + S` / `Ctrl + S` (windows) shortcut to save changes

agents-manage-ui/src/components/graph/toolbar/toolbar.tsx

@@ -2,6 +2,8 @@ import { Play, Settings } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useEffect, useRef } from 'react';
+import { isMacOs } from '@/lib/utils';
 
 interface ToolbarProps {
   onSubmit: () => void;
@@ -17,6 +19,7 @@ export function Toolbar({
   setShowPlayground,
 }: ToolbarProps) {
   const dirty = useGraphStore((state) => state.dirty);
+  const saveButtonRef = useRef<HTMLButtonElement>(null!);
   const PreviewButton = (
     <Button
       disabled={dirty || isPreviewDisabled}
@@ -29,6 +32,21 @@ export function Toolbar({
     </Button>
   );
 
+  useEffect(() => {
+    function handleSaveShortcut(event: KeyboardEvent) {
+      const isShortcutPressed = (isMacOs() ? event.metaKey : event.ctrlKey) && event.key === 's';
+      if (!isShortcutPressed) return;
+      event.preventDefault();
+      // Using button ref instead onSubmit to respect button's disabled state
+      saveButtonRef.current.click();
+    }
+
+    window.addEventListener('keydown', handleSaveShortcut);
+    return () => {
+      window.removeEventListener('keydown', handleSaveShortcut);
+    };
+  }, []);
+
   return (
     <div className="flex gap-2">
       {dirty || isPreviewDisabled ? (
@@ -49,6 +67,7 @@ export function Toolbar({
         onClick={onSubmit}
         variant={dirty ? 'default' : 'outline'}
         disabled={!dirty && !isPreviewDisabled}
+        ref={saveButtonRef}
       >
         {isPreviewDisabled ? 'Save' : 'Save changes'}
       </Button>

agents-manage-ui/src/lib/utils.ts

@@ -1,6 +1,10 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
+export function isMacOs() {
+  return typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');
+}
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }