From 8aa351b02a8930fe9253041b2271c2ad76ef9a90 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sun, 5 Apr 2026 08:29:57 +0700
Subject: [PATCH] fix(ui): refresh providers on dialog open and unblock agent
 creation

- Refresh provider list when AgentCreateDialog, HeartbeatConfigDialog,
  and AgentAdvancedDialog open (fixes stale cache from 60s staleTime)
- Remove verify-blocking from agent creation flow; verify remains as
  optional manual check but no longer gates the Create button
- Aligns with existing pattern in TeamCreateDialog
---
 .../src/pages/agents/agent-create-dialog.tsx  | 23 +++++--------------
 .../agent-detail/agent-advanced-dialog.tsx    |  3 ++-
 .../agent-detail/heartbeat-config-dialog.tsx  |  3 ++-
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/ui/web/src/pages/agents/agent-create-dialog.tsx b/ui/web/src/pages/agents/agent-create-dialog.tsx
index 235b5a19..32ea07a3 100644
--- a/ui/web/src/pages/agents/agent-create-dialog.tsx
+++ b/ui/web/src/pages/agents/agent-create-dialog.tsx
@@ -28,7 +28,7 @@ interface AgentCreateDialogProps {
 export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateDialogProps) {
   const { t } = useTranslation("agents");
   const agentPresets = useAgentPresets();
-  const { providers } = useProviders();
+  const { providers, refresh: refreshProviders } = useProviders();
   const [loading, setLoading] = useState(false);
   const [submitError, setSubmitError] = useState("");
 
@@ -67,12 +67,14 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
   useEffect(() => { resetVerify(); }, [provider, model, resetVerify]);
 
   useEffect(() => {
-    if (!open) {
+    if (open) {
+      refreshProviders();
+    } else {
       reset();
       setSubmitError("");
       resetVerify();
     }
-  }, [open, reset, resetVerify]);
+  }, [open, reset, resetVerify, refreshProviders]);
 
   const handleVerify = async () => {
     if (!selectedProviderId || !model.trim()) return;
@@ -103,12 +105,6 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
     }
   };
 
-  const handleVerifyAndCreate = async () => {
-    if (!selectedProviderId || !model.trim()) return;
-    const res = await verify(selectedProviderId, model.trim());
-    if (res?.valid) await handleSubmitForm(form.getValues());
-  };
-
   const handleProviderChange = (value: string) => {
     setValue("provider", value, { shouldValidate: true });
     setValue("model", "", { shouldValidate: false });
@@ -146,15 +142,8 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
           </Button>
           {loading ? (
             <Button disabled>{t("create.creating")}</Button>
-          ) : !verifyResult?.valid && selectedProviderId && model.trim() ? (
-            <Button onClick={handleVerifyAndCreate} disabled={verifying || !canCreate}>
-              {verifying ? t("create.checking") : t("create.checkAndCreate")}
-            </Button>
           ) : (
-            <Button
-              onClick={handleSubmit(handleSubmitForm)}
-              disabled={!canCreate || !verifyResult?.valid || loading}
-            >
+            <Button onClick={handleSubmit(handleSubmitForm)} disabled={!canCreate || loading}>
               {t("create.create")}
             </Button>
           )}
diff --git a/ui/web/src/pages/agents/agent-detail/agent-advanced-dialog.tsx b/ui/web/src/pages/agents/agent-detail/agent-advanced-dialog.tsx
index 16202a66..57ad3f8f 100644
--- a/ui/web/src/pages/agents/agent-detail/agent-advanced-dialog.tsx
+++ b/ui/web/src/pages/agents/agent-detail/agent-advanced-dialog.tsx
@@ -42,7 +42,7 @@ interface AgentAdvancedDialogProps {
 
 export function AgentAdvancedDialog({ open, onOpenChange, agent, onUpdate }: AgentAdvancedDialogProps) {
   const { t } = useTranslation("agents");
-  const { providers, loading: providersLoading } = useProviders();
+  const { providers, loading: providersLoading, refresh: refreshProviders } = useProviders();
   const providerByName = new Map(providers.map((provider) => [provider.name, provider]));
   const currentProvider = providerByName.get(agent.provider);
   const { models: providerModels, loading: providerModelsLoading } = useProviderModels(
@@ -113,6 +113,7 @@ export function AgentAdvancedDialog({ open, onOpenChange, agent, onUpdate }: Age
   // Re-sync local state when dialog opens (picks up latest agent data from React Query)
   useEffect(() => {
     if (!open) return;
+    refreshProviders();
     const s = deriveState(agent);
     setReasoningMode(s.reasoningMode);
     setThinkingLevel(s.thinkingLevel);
diff --git a/ui/web/src/pages/agents/agent-detail/heartbeat-config-dialog.tsx b/ui/web/src/pages/agents/agent-detail/heartbeat-config-dialog.tsx
index ae7990e9..6a965b79 100644
--- a/ui/web/src/pages/agents/agent-detail/heartbeat-config-dialog.tsx
+++ b/ui/web/src/pages/agents/agent-detail/heartbeat-config-dialog.tsx
@@ -45,7 +45,7 @@ export function HeartbeatConfigDialog({
 }: HeartbeatConfigDialogProps) {
   const { t } = useTranslation("agents");
   const { channels: availableChannels } = useChannels();
-  const { providers } = useProviders();
+  const { providers, refresh: refreshProviders } = useProviders();
   const channelNames = Object.keys(availableChannels);
   const userTz = useUiStore((s) => s.timezone);
   const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -112,6 +112,7 @@ export function HeartbeatConfigDialog({
 
   useEffect(() => {
     if (!open) return;
+    refreshProviders();
     if (config) {
       form.reset({
         enabled: config.enabled,