fix(web): avoid resetting web search draft on config refetch (#2536)

web/frontend/src/components/agent/tools/tools-page.tsx

@@ -1,15 +1,15 @@
 import { IconSearch } from "@tabler/icons-react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { useEffect, useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
 import {
+  type ToolSupportItem,
+  type WebSearchConfigResponse,
   getTools,
   getWebSearchConfig,
   setToolEnabled,
-  type ToolSupportItem,
-  type WebSearchConfigResponse,
   updateWebSearchConfig,
 } from "@/api/tools"
 import { PageHeader } from "@/components/page-header"
@@ -54,14 +54,9 @@ export function ToolsPage() {
 
   const [searchQuery, setSearchQuery] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
-  const [webSearchDraft, setWebSearchDraft] =
+  const [webSearchDraftOverride, setWebSearchDraftOverride] =
     useState<WebSearchConfigResponse | null>(null)
-
+  const webSearchDraft = webSearchDraftOverride ?? webSearchData ?? null
-  useEffect(() => {
-    if (webSearchData) {
-      setWebSearchDraft(webSearchData)
-    }
-  }, [webSearchData])
 
   const toggleMutation = useMutation({
     mutationFn: async ({ name, enabled }: { name: string; enabled: boolean }) =>
@@ -87,9 +82,12 @@ export function ToolsPage() {
   const webSearchMutation = useMutation({
     mutationFn: updateWebSearchConfig,
     onSuccess: (updated) => {
-      setWebSearchDraft(updated)
+      queryClient.setQueryData(["tools", "web-search-config"], updated)
+      setWebSearchDraftOverride(null)
       toast.success(t("pages.agent.tools.web_search.save_success"))
-      void queryClient.invalidateQueries({ queryKey: ["tools", "web-search-config"] })
+      void queryClient.invalidateQueries({
+        queryKey: ["tools", "web-search-config"],
+      })
       void queryClient.invalidateQueries({ queryKey: ["tools"] })
       void refreshGatewayState({ force: true })
     },
@@ -148,7 +146,10 @@ export function ToolsPage() {
   const updateDraft = (
     updater: (current: WebSearchConfigResponse) => WebSearchConfigResponse,
   ) => {
-    setWebSearchDraft((current) => (current ? updater(current) : current))
+    setWebSearchDraftOverride((current) => {
+      const draft = current ?? webSearchData
+      return draft ? updater(draft) : current
+    })
   }
 
   return (
@@ -161,7 +162,9 @@ export function ToolsPage() {
             <Card className="border-destructive/50 bg-destructive/10 cursor-default">
               <CardHeader>
                 <CardTitle>{t("pages.agent.tools.web_search.title")}</CardTitle>
-                <CardDescription>{t("pages.agent.tools.web_search.load_error")}</CardDescription>
+                <CardDescription>
+                  {t("pages.agent.tools.web_search.load_error")}
+                </CardDescription>
               </CardHeader>
             </Card>
           ) : isWebSearchLoading || !webSearchDraft ? (
@@ -201,7 +204,10 @@ export function ToolsPage() {
                     <Select
                       value={webSearchDraft.provider}
                       onValueChange={(value) =>
-                        updateDraft((current) => ({ ...current, provider: value }))
+                        updateDraft((current) => ({
+                          ...current,
+                          provider: value,
+                        }))
                       }
                     >
                       <SelectTrigger>
@@ -254,21 +260,30 @@ export function ToolsPage() {
                 </div>
 
                 <div className="grid gap-4 lg:grid-cols-2">
-                  {Object.entries(webSearchDraft.settings).map(([providerId, settings]) => {
+                  {Object.entries(webSearchDraft.settings).map(
-                    const providerLabel = providerLabelMap.get(providerId) ?? providerId
+                    ([providerId, settings]) => {
+                      const providerLabel =
+                        providerLabelMap.get(providerId) ?? providerId
                       const apiKeyPlaceholder = maskedSecretPlaceholder(
                         settings.api_key_set ? `${providerId}-configured` : "",
                         t("pages.agent.tools.web_search.api_key_placeholder"),
                       )
 
                       return (
-                      <Card key={providerId} className="border-border/60 shadow-none">
+                        <Card
+                          key={providerId}
+                          className="border-border/60 shadow-none"
+                        >
                           <CardHeader className="pb-3">
                             <div className="flex items-center justify-between gap-3">
                               <div>
-                              <CardTitle className="text-base">{providerLabel}</CardTitle>
+                                <CardTitle className="text-base">
+                                  {providerLabel}
+                                </CardTitle>
                                 <CardDescription className="mt-1 text-xs">
-                                {t("pages.agent.tools.web_search.provider_hint")}
+                                  {t(
+                                    "pages.agent.tools.web_search.provider_hint",
+                                  )}
                                 </CardDescription>
                               </div>
                               <Switch
@@ -305,7 +320,8 @@ export function ToolsPage() {
                                       ...current.settings,
                                       [providerId]: {
                                         ...current.settings[providerId],
-                                      max_results: Number(e.target.value) || 0,
+                                        max_results:
+                                          Number(e.target.value) || 0,
                                       },
                                     },
                                   }))
@@ -334,7 +350,9 @@ export function ToolsPage() {
                                       },
                                     }))
                                   }
-                                placeholder={t("pages.agent.tools.web_search.base_url_placeholder")}
+                                  placeholder={t(
+                                    "pages.agent.tools.web_search.base_url_placeholder",
+                                  )}
                                 />
                               </div>
                             )}
@@ -368,7 +386,8 @@ export function ToolsPage() {
                           </CardContent>
                         </Card>
                       )
-                  })}
+                    },
+                  )}
                 </div>
 
                 <div className="flex justify-end">