From 62e5afa04d7dfd10329b5f3c3c175eff49115b51 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Sat, 27 Jun 2026 15:29:12 +0700
Subject: [PATCH] perf(settings/provider): scope provider-name watch out of the
 main form

The provider `name` field was watched at the top of SettingsProvider but only
fed the delete dialog's itemName, so every keystroke re-rendered the whole form
tree (Accordion + 12 agent configs + resizable panels). Move the watch into a
small DeleteProviderDialog wrapper that subscribes on its own. Measured: typing
10 chars now re-renders SettingsProvider 2x (the one-time isDirty flip) instead
of once per keystroke; the per-keystroke re-renders land on the tiny dialog.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/pages/settings/settings-provider.tsx  | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/settings/settings-provider.tsx b/frontend/src/pages/settings/settings-provider.tsx
index 0cc0d6a4..26bda000 100644
--- a/frontend/src/pages/settings/settings-provider.tsx
+++ b/frontend/src/pages/settings/settings-provider.tsx
@@ -16,7 +16,7 @@ import {
     Trash2,
     XCircle,
 } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { type ComponentProps, useEffect, useMemo, useState } from 'react';
 import {
     type Control,
     type FieldPath,
@@ -1065,6 +1065,29 @@ const extractAgentTypes = (agents: unknown): null | string[] => {
     return types.length > 0 ? types : null;
 };
 
+interface DeleteProviderDialogProps
+    extends Pick<ComponentProps<typeof ConfirmationDialog>, 'handleConfirm' | 'handleOpenChange' | 'isOpen'> {
+    control: Control<FormInput>;
+}
+
+// Subscribes to the `name` field on its own so a keystroke in the provider-name
+// input re-renders only this dialog, not the whole SettingsProvider form tree.
+function DeleteProviderDialog({ control, handleConfirm, handleOpenChange, isOpen }: DeleteProviderDialogProps) {
+    const providerName = useWatch({ control, name: 'name' });
+
+    return (
+        <ConfirmationDialog
+            cancelText="Cancel"
+            confirmText="Delete"
+            handleConfirm={handleConfirm}
+            handleOpenChange={handleOpenChange}
+            isOpen={isOpen}
+            itemName={providerName}
+            itemType="provider"
+        />
+    );
+}
+
 function SettingsProvider() {
     const { providerId } = useParams<{ providerId: string }>();
     const navigate = useNavigate();
@@ -1107,8 +1130,6 @@ function SettingsProvider() {
 
     const selectedType = useWatch({ control, name: 'type' });
 
-    const providerName = useWatch({ control, name: 'name' });
-
     const formQueryParams = useMemo(
         () => ({
             id: searchParams.get('id'),
@@ -1880,14 +1901,11 @@ function SettingsProvider() {
                 results={testResults}
             />
 
-            <ConfirmationDialog
-                cancelText="Cancel"
-                confirmText="Delete"
+            <DeleteProviderDialog
+                control={control}
                 handleConfirm={handleConfirmDelete}
                 handleOpenChange={setIsDeleteDialogOpen}
                 isOpen={isDeleteDialogOpen}
-                itemName={providerName}
-                itemType="provider"
             />
 
             <UnsavedChangesDialog