fix(web): prevent mock data from overwriting real widget data in production (#464)

The widget redesign in #429 removed the isMockEnvironment guard from
setTimeout calls that update toolOutput with mock data. In OpenAI's
production environment, window.openai always exists, so the mock data
setTimeout would fire after 2s and overwrite real search results / run
data with hardcoded mock actors.

Also adds https://apify.com to the widget CSP resource_domains.

Author: MQ37

src/resources/widgets.ts

@@ -14,6 +14,7 @@ const OPENAI_WIDGET_CSP = {
         'https://images.apifyusercontent.com',
         'https://apify-image-uploads-prod.s3.us-east-1.amazonaws.com',
         'https://apify-image-uploads-prod.s3.amazonaws.com',
+        'https://apify.com',
     ],
 } as const;
 

src/web/src/widgets/actor-run-widget.tsx

@@ -16,7 +16,9 @@ const mockRunData = {
 // Simulate 5-second loading delay to test skeleton
 const LOADING_DELAY_MS = 2000;
 
-// Set up mock window.openai for local development
+// Set up mock window.openai for local development (no-ops when window.openai already exists)
+const isMockEnvironment = typeof window !== "undefined" && !window.openai;
+
 setupMockOpenAi({
     toolOutput: mockRunData, // Start with basic data (no dataset) to show header immediately
     initialWidgetState: {
@@ -191,69 +193,71 @@ setupMockOpenAi({
     },
 });
 
-// Simulate loading delay - update toolOutput after 5 seconds to add dataset
-setTimeout(() => {
-    if (window.openai) {
-        // Update the toolOutput with dataset to show results
-        window.openai.toolOutput = {
-            ...mockRunData,
-            status: "SUCCEEDED",
-            finishedAt: new Date().toISOString(),
-            dataset: {
-                datasetId: "test_dataset_456",
-                itemCount: 15,
-                previewItems: [
-                    {
-                        title: "Example Page 1",
-                        url: "https://example.com/page-1",
-                        description: "This is a long description that should test text overflow and ellipsis in table cells",
-                        category: "Technology",
-                        price: "$29.99",
-                        rating: "4.5/5",
-                        date: "2026-02-10"
-                    },
-                    {
-                        title: "Example Page 2",
-                        url: "https://example.com/page-2",
-                        description: "Another lengthy description to ensure we can test horizontal scrolling properly",
-                        category: "Business",
-                        price: "$49.99",
-                        rating: "4.8/5",
-                        date: "2026-02-09"
-                    },
-                    {
-                        title: "Example Page 3",
-                        url: "https://example.com/page-3",
-                        description: "Third item with even more text content for testing purposes",
-                        category: "Science",
-                        price: "$39.99",
-                        rating: "4.2/5",
-                        date: "2026-02-08"
-                    },
-                    {
-                        title: "Example Page 4",
-                        url: "https://example.com/page-4",
-                        description: "Fourth item in the dataset to test vertical scrolling",
-                        category: "Health",
-                        price: "$19.99",
-                        rating: "4.7/5",
-                        date: "2026-02-07"
-                    },
-                    {
-                        title: "Example Page 5",
-                        url: "https://example.com/page-5",
-                        description: "Fifth item with more content to fill the table",
-                        category: "Education",
-                        price: "$59.99",
-                        rating: "4.9/5",
-                        date: "2026-02-06"
-                    },
-                ],
-            },
-        } as any;
-        // Trigger a re-render by dispatching an event
-        window.dispatchEvent(new Event('openai:set_globals'));
-    }
-}, LOADING_DELAY_MS);
+// Simulate loading delay - update toolOutput after delay to add dataset (only in local dev)
+if (isMockEnvironment) {
+    setTimeout(() => {
+        if (window.openai) {
+            // Update the toolOutput with dataset to show results
+            window.openai.toolOutput = {
+                ...mockRunData,
+                status: "SUCCEEDED",
+                finishedAt: new Date().toISOString(),
+                dataset: {
+                    datasetId: "test_dataset_456",
+                    itemCount: 15,
+                    previewItems: [
+                        {
+                            title: "Example Page 1",
+                            url: "https://example.com/page-1",
+                            description: "This is a long description that should test text overflow and ellipsis in table cells",
+                            category: "Technology",
+                            price: "$29.99",
+                            rating: "4.5/5",
+                            date: "2026-02-10"
+                        },
+                        {
+                            title: "Example Page 2",
+                            url: "https://example.com/page-2",
+                            description: "Another lengthy description to ensure we can test horizontal scrolling properly",
+                            category: "Business",
+                            price: "$49.99",
+                            rating: "4.8/5",
+                            date: "2026-02-09"
+                        },
+                        {
+                            title: "Example Page 3",
+                            url: "https://example.com/page-3",
+                            description: "Third item with even more text content for testing purposes",
+                            category: "Science",
+                            price: "$39.99",
+                            rating: "4.2/5",
+                            date: "2026-02-08"
+                        },
+                        {
+                            title: "Example Page 4",
+                            url: "https://example.com/page-4",
+                            description: "Fourth item in the dataset to test vertical scrolling",
+                            category: "Health",
+                            price: "$19.99",
+                            rating: "4.7/5",
+                            date: "2026-02-07"
+                        },
+                        {
+                            title: "Example Page 5",
+                            url: "https://example.com/page-5",
+                            description: "Fifth item with more content to fill the table",
+                            category: "Education",
+                            price: "$59.99",
+                            rating: "4.9/5",
+                            date: "2026-02-06"
+                        },
+                    ],
+                },
+            } as any;
+            // Trigger a re-render by dispatching an event
+            window.dispatchEvent(new Event('openai:set_globals'));
+        }
+    }, LOADING_DELAY_MS);
+}
 
 renderWidget(ActorRun);

src/web/src/widgets/search-actors-widget.tsx

@@ -89,7 +89,9 @@ const mockActors = [
     },
 ];
 
-// Set up mock window.openai for local development
+// Set up mock window.openai for local development (no-ops when window.openai already exists)
+const isMockEnvironment = typeof window !== "undefined" && !window.openai;
+
 setupMockOpenAi({
     toolOutput: {
         actors: [], // Start with empty to show loading state
@@ -101,18 +103,20 @@ setupMockOpenAi({
     },
 });
 
-// Simulate async data loading
-setTimeout(() => {
-    updateMockOpenAiState({
-        toolOutput: {
-            actors: mockActors,
-            query: "web scraping",
-        },
-        widgetState: {
-            loadingDetails: null,
-            isLoading: false,
-        },
-    });
-}, 2000);
+// Simulate async data loading (only in local dev, never in production OpenAI environment)
+if (isMockEnvironment) {
+    setTimeout(() => {
+        updateMockOpenAiState({
+            toolOutput: {
+                actors: mockActors,
+                query: "web scraping",
+            },
+            widgetState: {
+                loadingDetails: null,
+                isLoading: false,
+            },
+        });
+    }, 2000);
+}
 
 renderWidget(ActorSearch);