(null);
+ const [refreshStatus, setRefreshStatus] = useState<{ providerId: string; type: "success" | "error"; message: string } | null>(null);
const loadProviders = useCallback(async () => {
setLoading(true);
@@ -274,6 +277,46 @@ export function CustomProvidersSection({ embedded = false, onProviderChange }: C
[loadProviders, onProviderChange, t],
);
+ const handleRefreshProviderModels = useCallback(
+ async (provider: CustomProvider) => {
+ setRefreshingProviderId(provider.id);
+ setRefreshStatus(null);
+ setError(null);
+ try {
+ const result = await refreshProviderModels(provider.id);
+ setProviders((current) => current.map((candidate) => (
+ candidate.id === provider.id ? result.provider : candidate
+ )));
+ if (editingProvider?.id === provider.id) {
+ /*
+ FNXC:CustomProviders 2026-06-30-00:00:
+ Manual refresh can run while a provider edit form is open. Keep that form's model input synchronized with the persisted refresh result so saving unrelated edits cannot overwrite newly discovered models with the pre-refresh list.
+ */
+ const refreshedModels = (result.provider.models ?? []).map((model) => model.id).join(", ");
+ setModels(refreshedModels);
+ setEditingProvider((current) => current?.id === provider.id
+ ? { ...current, models: result.provider.models ?? [] }
+ : current);
+ }
+ onProviderChange?.();
+ setRefreshStatus({
+ providerId: provider.id,
+ type: "success",
+ message: t("providers.refreshModelsSuccess", "Refreshed {{count}} model(s).", { count: result.modelsRefreshed }),
+ });
+ } catch (refreshError) {
+ setRefreshStatus({
+ providerId: provider.id,
+ type: "error",
+ message: refreshError instanceof Error ? refreshError.message : t("providers.refreshModelsFailed", "Failed to refresh models."),
+ });
+ } finally {
+ setRefreshingProviderId(null);
+ }
+ },
+ [editingProvider?.id, onProviderChange, t],
+ );
+
const sectionContent = (
<>
{embedded ? null : loading ? (
@@ -294,6 +337,8 @@ export function CustomProvidersSection({ embedded = false, onProviderChange }: C
{providers.map((provider) => {
const isEditingThisProvider = isFormOpen && editingProvider?.id === provider.id;
+ const isRefreshingThisProvider = refreshingProviderId === provider.id;
+ const providerRefreshStatus = refreshStatus?.providerId === provider.id ? refreshStatus : null;
return (
@@ -305,6 +350,16 @@ export function CustomProvidersSection({ embedded = false, onProviderChange }: C
+
+ {providerRefreshStatus ? (
+
+ {providerRefreshStatus.type === "error" ?
: null}
+
{providerRefreshStatus.message}
+
+ ) : null}
+
{isEditingThisProvider ? (
@@ -392,7 +454,7 @@ export function CustomProvidersSection({ embedded = false, onProviderChange }: C
/>
-
+
-
+