dashboard: move Ctrl+S event listener from <Toolbar /> component to useAgentShortcuts() hook

.changeset/slimy-hoops-check.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": minor
+---
+
+move `Ctrl+S` event listener from `<Toolbar />` component to `useAgentShortcuts()` hook

agents-manage-ui/cypress/support/e2e.ts

@@ -20,7 +20,8 @@ Cypress.on('uncaught:exception', (err) => {
   if (
     // Promise from monaco-editor
     err.message.includes('  > Canceled') ||
-    err.message.includes('  > ResizeObserver loop completed with undelivered notifications.')
+    err.message.includes('  > ResizeObserver loop completed with undelivered notifications.') ||
+    err.message.includes('  > TextModelPart is disposed!')
   ) {
     return false;
   }

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

@@ -1,9 +1,8 @@
 import { Play, Settings } from 'lucide-react';
-import { type ComponentProps, useEffect, useRef } from 'react';
+import type { ComponentProps } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
-import { isMacOs } from '@/lib/utils';
 import { ShipModal } from '../ship/ship-modal';
 
 type MaybePromise<T> = T | Promise<T>;
@@ -22,7 +21,6 @@ export function Toolbar({
   setShowPlayground,
 }: ToolbarProps) {
   const dirty = useAgentStore((state) => state.dirty);
-  const saveButtonRef = useRef<HTMLButtonElement>(null);
 
   const commonProps = {
     className: 'backdrop-blur-3xl',
@@ -41,21 +39,6 @@ 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 flex-wrap justify-end content-start">
       {!inPreviewDisabled && <ShipModal buttonClassName={commonProps.className} />}
@@ -82,7 +65,7 @@ export function Toolbar({
         onClick={onSubmit}
         variant={dirty ? 'default' : 'outline'}
         disabled={!dirty && !inPreviewDisabled}
-        ref={saveButtonRef}
+        id="save-agent"
       >
         {inPreviewDisabled ? 'Save' : 'Save changes'}
       </Button>

agents-manage-ui/src/features/agent/ui/use-agent-shortcuts.ts

@@ -1,41 +1,45 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useAgentActions } from '@/features/agent/state/use-agent-store';
+import { isMacOs } from '@/lib/utils';
 
 export function useAgentShortcuts() {
   const { undo, redo, deleteSelected } = useAgentActions();
 
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (!(e.target as HTMLElement)?.classList.contains('react-flow__node')) return;
-      const meta = e.metaKey || e.ctrlKey;
-      if (meta && e.key.toLowerCase() === 'z') {
+  useEffect(() => {
+    const isMac = isMacOs();
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const meta = isMac ? e.metaKey : e.ctrlKey;
+
+      if (meta && e.key === 's') {
         e.preventDefault();
-        if (e.shiftKey) {
-          redo();
-        } else {
-          undo();
-        }
+        const el = document.querySelector<HTMLButtonElement>('button#save-agent');
+        el?.click();
+        return;
+      }
+
+      const el = e.target;
+      const isHtmlElement = el instanceof HTMLElement;
+
+      if (!isHtmlElement || !el.classList.contains('react-flow__node')) {
+        return;
+      }
+
+      if (meta && e.key === 'z') {
+        e.preventDefault();
+        const action = e.shiftKey ? redo : undo;
+        action();
         return;
       }
       if (e.key === 'Delete' || e.key === 'Backspace') {
-        // Let inputs handle backspace/delete
-        const target = e.target as HTMLElement | null;
-        const isEditable =
-          target &&
-          (target.tagName === 'INPUT' ||
-            target.tagName === 'TEXTAREA' ||
-            (target as any).isContentEditable);
-        if (!isEditable) {
-          e.preventDefault();
-          deleteSelected();
-        }
+        e.preventDefault();
+        deleteSelected();
       }
-    },
-    [undo, redo, deleteSelected]
-  );
+    };
 
-  useEffect(() => {
     window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [onKeyDown]);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [deleteSelected, redo, undo]);
 }

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

@@ -2,7 +2,7 @@ import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function isMacOs() {
-  return navigator?.userAgent.includes('Mac');
+  return navigator.userAgent.includes('Mac');
 }
 
 export function cn(...inputs: ClassValue[]) {