@optimizely/ocp-local-env 1.0.0-beta.9 → 1.0.1

package/dist/src/ui/components/App.js

@@ -11,8 +11,13 @@ const JobsView_1 = __importDefault(require("./JobsView"));
 const TabbedConsole_1 = __importDefault(require("./TabbedConsole"));
 const DestinationsView_1 = require("./DestinationsView");
 const SourcesView_1 = require("./SourcesView");
+const OpalToolsView_1 = __importDefault(require("./OpalToolsView"));
+const ToolSettingsView_1 = __importDefault(require("./ToolSettingsView"));
+const OdpSchemaView_1 = __importDefault(require("./OdpSchemaView"));
 const useQueryParams_1 = require("../hooks/useQueryParams");
 const store_1 = require("../store");
+const axiom_icons_1 = require("@optimizely/axiom-icons");
+const DeployModal_1 = require("./DeployModal");
 const IFRAME_RESIZER_MESSAGES_PREFIX = "[iFrameSizer]app_directory_frame_directory";
 const IFRAME_RESIZER_READY_MESSAGE = `${IFRAME_RESIZER_MESSAGES_PREFIX}:8:false:false:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll:true`;
 // Ex.: [iFrameSizer]app_directory_frame_directory:7096:1955:mutationObserver
@@ -42,11 +47,27 @@ const App = () => {
     const [buildStatus, setBuildStatus] = (0, react_1.useState)(null);
     const [storeTimestamps, setStoreTimestamps] = (0, react_1.useState)(null);
     const [appInstalled, setAppInstalled] = (0, react_1.useState)(false);
+    // Install version counter - increments on each install to force UI refresh
+    const [installVersion, setInstallVersion] = (0, react_1.useState)(0);
     const [notificationCount, setNotificationCount] = (0, react_1.useState)(0);
     const [config, setConfig] = (0, react_1.useState)({
         showZaiusAdminSections: false
     });
-    const [bannerVisible, setBannerVisible] = (0, react_1.useState)(true);
+    const [permanentlyDisconnected, setPermanentlyDisconnected] = (0, react_1.useState)(false);
+    const [appChanged, setAppChanged] = (0, react_1.useState)(null);
+    const [sourceDataVersion, setSourceDataVersion] = (0, react_1.useState)(0);
+    const [sourceDataTotalEmitted, setSourceDataTotalEmitted] = (0, react_1.useState)(0);
+    const [notificationVersion, setNotificationVersion] = (0, react_1.useState)(0);
+    const [envVersion, setEnvVersion] = (0, react_1.useState)(0);
+    const [deployStatus, setDeployStatus] = (0, react_1.useState)({ deployInProgress: false, lastDeploySuccess: null });
+    const [deployLogs, setDeployLogs] = (0, react_1.useState)([]);
+    const [deployVersion, setDeployVersion] = (0, react_1.useState)(0);
+    const [showDeployModal, setShowDeployModal] = (0, react_1.useState)(false);
+    const [deployModalData, setDeployModalData] = (0, react_1.useState)(null);
+    // Reference to store disconnect timer for 30-second timeout
+    const disconnectTimerRef = (0, react_1.useRef)(null);
+    // Reference to store initial app info for change detection
+    const initialAppInfoRef = (0, react_1.useRef)(null);
     // Initialize Redux store with app name when appInfo is available
     (0, react_1.useEffect)(() => {
         if (appInfo?.name) {
@@ -55,9 +76,10 @@ const App = () => {
     }, [appInfo?.name]);
     // Reference to store polling interval IDs
     const pollingIntervals = (0, react_1.useRef)({
-        logs: null,
         status: null,
     });
+    // Reference to store EventSource for cleanup on page unload
+    const eventSourceRef = (0, react_1.useRef)(null);
     // Reference to the settings iframe
     const settingsIframeRef = (0, react_1.useRef)(null);
     const setIframeRef = (iframe) => {
@@ -83,7 +105,38 @@ const App = () => {
                                 }
                             }
                         })}`;
-                        settingsIframeRef.current.contentWindow.postMessage(userFeaturesMessage, "http://localhost:3000");
+                        settingsIframeRef.current.contentWindow.postMessage(userFeaturesMessage, window.location.origin);
+                        // Send prismContext with mock organization ID to prevent "Organization ID is missing" errors
+                        const prismContextMessage = `[iFrameSizer]message:${JSON.stringify({
+                            method: 'prismContext',
+                            params: {
+                                productName: 'local-dev',
+                                subProductName: 'ocp-local-env',
+                                trackerId: 'local-development-tracker-id',
+                                scope: 1,
+                                originalUser: {
+                                    id: 1,
+                                    email: 'local-dev@example.com',
+                                    name: 'Local Developer',
+                                    isOptiId: false,
+                                    isInternalUser: true,
+                                    optiIdAccessToken: 'local-dev-mock-token'
+                                },
+                                organization: {
+                                    id: 1,
+                                    name: 'Local Development Org',
+                                    masterCustomerId: 'local-master-customer',
+                                    turnstileOrganizationId: 'local-test-org'
+                                },
+                                account: {
+                                    id: 1,
+                                    name: 'Local Development Account',
+                                    instanceId: 'local-test-instance',
+                                    isOptiHub: false
+                                }
+                            }
+                        })}`;
+                        settingsIframeRef.current.contentWindow.postMessage(prismContextMessage, window.location.origin);
                         console.log("Sent ready event to iframe after 2 second delay");
                     }
                 }, 2000);
@@ -108,15 +161,19 @@ const App = () => {
     };
     // Set up polling on component mount
     (0, react_1.useEffect)(() => {
-        // Initial data load
+        // Don't set up new connections if permanently disconnected
+        if (permanentlyDisconnected) {
+            return;
+        }
+        // Initial data load (logs come via SSE initialLogs event)
         fetchConfig();
         fetchAppInfo();
         fetchStatus();
-        fetchConsoleLogs();
         fetchInstallationStatus();
         fetchNotificationCount();
         // Set up SSE connection for real-time build status updates
         const eventSource = new EventSource('/devserver/api/events');
+        eventSourceRef.current = eventSource;
         eventSource.onmessage = (event) => {
             const data = JSON.parse(event.data);
             switch (data.type) {
@@ -130,6 +187,10 @@ const App = () => {
                         lastBuildTimestamp: null,
                         lastBuildError: null
                     });
+                    // Reset deploy success status on code change (build start)
+                    if (!deployStatus.deployInProgress) {
+                        setDeployStatus(prev => ({ ...prev, lastDeploySuccess: null }));
+                    }
                     break;
                 case 'buildSuccess':
                     setBuildStatus({
@@ -138,8 +199,7 @@ const App = () => {
                         lastBuildTimestamp: data.timestamp,
                         lastBuildError: null
                     });
-                    // Refresh logs and store timestamps after build
-                    fetchConsoleLogs();
+                    // Refresh store timestamps after build (logs come via SSE)
                     fetchStatus();
                     break;
                 case 'buildError':
@@ -149,7 +209,6 @@ const App = () => {
                         lastBuildTimestamp: data.timestamp,
                         lastBuildError: data.error
                     });
-                    fetchConsoleLogs();
                     break;
                 case 'status':
                     // Initial status on connection
@@ -160,10 +219,112 @@ const App = () => {
                         lastBuildError: data.lastBuildError
                     });
                     break;
+                case 'log':
+                    // Append new log, keep last 500
+                    setLogs(prev => [...prev.slice(-499), data.entry]);
+                    break;
+                case 'initialLogs':
+                    setLogs(data.logs || []);
+                    // Handle app change detection (only compare app names, not paths)
+                    if (data.app && data.app.name) {
+                        if (!initialAppInfoRef.current) {
+                            initialAppInfoRef.current = { name: data.app.name, path: data.app.path };
+                        }
+                        else if (initialAppInfoRef.current.name !== data.app.name) {
+                            setAppChanged({ oldApp: initialAppInfoRef.current.name, newApp: data.app.name });
+                        }
+                    }
+                    break;
+                case 'logsCleared':
+                    setLogs([]);
+                    break;
+                case 'serverShutdown':
+                    // Server is shutting down - immediately show disconnect overlay
+                    eventSource.close();
+                    eventSourceRef.current = null;
+                    setPermanentlyDisconnected(true);
+                    // Update tab title to indicate disconnection
+                    document.title = '[DISCONNECTED] ' + document.title;
+                    break;
+                case 'connectionEvicted':
+                    // Connection evicted due to limit - show disconnect overlay
+                    eventSource.close();
+                    eventSourceRef.current = null;
+                    setPermanentlyDisconnected(true);
+                    // Update tab title to indicate disconnection
+                    document.title = '[DISCONNECTED] ' + document.title;
+                    break;
+                case 'sourceDataChanged':
+                    // Source data was emitted — increment version to trigger re-fetch in panel
+                    setSourceDataVersion(v => v + 1);
+                    setSourceDataTotalEmitted(data.totalEmitted ?? 0);
+                    break;
+                case 'notificationChanged':
+                    // Notification was created — increment version to trigger re-fetch in panel
+                    setNotificationVersion(v => v + 1);
+                    fetchNotificationCount();
+                    break;
+                case 'envChanged':
+                    setEnvVersion(v => v + 1);
+                    break;
+                case 'installSuccess':
+                    // App was installed via API - update state and increment version
+                    console.log('SSE: App installed via API');
+                    setAppInstalled(true);
+                    setInstallVersion(v => v + 1); // Increment to force UI refresh
+                    setConnected(true);
+                    break;
+                case 'uninstallSuccess':
+                    // App was uninstalled via API - update state
+                    console.log('SSE: App uninstalled via API');
+                    setAppInstalled(false);
+                    setConnected(false);
+                    break;
+                case 'deployStart':
+                    setDeployStatus({ deployInProgress: true, lastDeploySuccess: null });
+                    // Add a separator between deploy runs instead of clearing logs
+                    setDeployLogs(prev => prev.length > 0
+                        ? [...prev, '───────────────────────────────────────']
+                        : prev);
+                    setDeployVersion(v => v + 1);
+                    break;
+                case 'deployLog':
+                    setDeployLogs(prev => [...prev, data.line]);
+                    setDeployVersion(v => v + 1);
+                    break;
+                case 'deploySuccess':
+                    setDeployStatus({ deployInProgress: false, lastDeploySuccess: true });
+                    setDeployVersion(v => v + 1);
+                    // Refresh app info to update version display in nav
+                    fetchAppInfo();
+                    break;
+                case 'deployError':
+                    setDeployStatus({ deployInProgress: false, lastDeploySuccess: false });
+                    if (data.error) {
+                        setDeployLogs(prev => [...prev, `Error: ${data.error}`]);
+                    }
+                    setDeployVersion(v => v + 1);
+                    break;
+                case 'deployStatus':
+                    // Initial deploy status on connection
+                    setDeployStatus({
+                        deployInProgress: data.deployInProgress || false,
+                        lastDeploySuccess: data.lastDeploySuccess ?? null
+                    });
+                    break;
             }
         };
         eventSource.onerror = () => {
             setConnected(false);
+            // Start 30-second timer if not already started
+            if (!disconnectTimerRef.current && !permanentlyDisconnected) {
+                disconnectTimerRef.current = setTimeout(() => {
+                    // Permanently disconnect - close EventSource and show message
+                    eventSource.close();
+                    eventSourceRef.current = null;
+                    setPermanentlyDisconnected(true);
+                }, 30000);
+            }
             // Fallback to polling if SSE fails
             if (!pollingIntervals.current.status) {
                 pollingIntervals.current.status = setInterval(fetchStatus, 3000);
@@ -171,25 +332,43 @@ const App = () => {
         };
         eventSource.onopen = () => {
             setConnected(true);
+            // Clear disconnect timer if we reconnected in time
+            if (disconnectTimerRef.current) {
+                clearTimeout(disconnectTimerRef.current);
+                disconnectTimerRef.current = null;
+            }
+            // Check if app has changed (server restarted with different app)
+            // Only check if we had a previous app loaded
+            if (initialAppInfoRef.current) {
+                fetchAppInfo(true);
+            }
             // Stop fallback polling if it was started
             if (pollingIntervals.current.status) {
                 clearInterval(pollingIntervals.current.status);
                 pollingIntervals.current.status = null;
             }
         };
-        // Keep log polling (can be extended to SSE later if needed)
-        pollingIntervals.current.logs = setInterval(fetchConsoleLogs, 2000);
+        // Close SSE on page unload/refresh to prevent connection accumulation
+        // This is critical for Firefox which has a strict 6-connection limit per domain
+        const handleBeforeUnload = () => {
+            if (eventSourceRef.current) {
+                eventSourceRef.current.close();
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
         // Cleanup
         return () => {
-            eventSource.close();
-            if (pollingIntervals.current.logs) {
-                clearInterval(pollingIntervals.current.logs);
+            if (disconnectTimerRef.current) {
+                clearTimeout(disconnectTimerRef.current);
             }
+            eventSource.close();
+            eventSourceRef.current = null;
+            window.removeEventListener('beforeunload', handleBeforeUnload);
             if (pollingIntervals.current.status) {
                 clearInterval(pollingIntervals.current.status);
             }
         };
-    }, []);
+    }, [permanentlyDisconnected]);
     // Listen for events from the iframe
     (0, react_1.useEffect)(() => {
         const deserializeResizerMessage = (data) => {
@@ -223,11 +402,11 @@ const App = () => {
                 const message = deserializeResizerMessage(event.data);
                 // Handle getTracker message
                 if (message.method === "getTracker") {
-                    const message = serializeResizerMessage({
+                    const response = serializeResizerMessage({
                         method: "setTracker",
                         params: "local-development-tracker-id",
                     });
-                    settingsIframeRef.current?.contentWindow?.postMessage(message, event.origin);
+                    settingsIframeRef.current?.contentWindow?.postMessage(response, event.origin);
                     console.log("getTracker sent");
                 }
                 // Handle installation lifecycle events
@@ -238,6 +417,7 @@ const App = () => {
                             case "install_success":
                                 console.log("Installation successful, updating app state");
                                 setAppInstalled(true);
+                                setInstallVersion(v => v + 1); // Increment to force UI refresh
                                 setConnected(true);
                                 break;
                             case "uninstall_success":
@@ -269,11 +449,25 @@ const App = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // Fetch app info from the API
-    const fetchAppInfo = async () => {
+    const fetchAppInfo = async (checkForChanges = false) => {
         try {
             const response = await fetch("/devserver/api/app");
             if (response.ok) {
                 const data = await response.json();
+                // Store initial app info on first successful fetch
+                if (!initialAppInfoRef.current && data.name) {
+                    initialAppInfoRef.current = { name: data.name, path: data.path };
+                }
+                // Check if app has changed (different app being served) - only compare names
+                if (checkForChanges && initialAppInfoRef.current && data.name) {
+                    if (initialAppInfoRef.current.name !== data.name) {
+                        setAppChanged({
+                            oldApp: initialAppInfoRef.current.name,
+                            newApp: data.name
+                        });
+                        return; // Don't update appInfo - show the change notification instead
+                    }
+                }
                 setAppInfo(data);
                 setConnected(true);
             }
@@ -307,34 +501,11 @@ const App = () => {
             setConnected(false);
         }
     };
-    // Fetch console logs from the API
-    const fetchConsoleLogs = async () => {
-        try {
-            const response = await fetch("/devserver/api/console/logs?limit=50");
-            if (response.ok) {
-                const data = await response.json();
-                if (data.logs && data.logs.length > 0) {
-                    setLogs(data.logs); // Pass raw LogEntry[] directly
-                }
-                else {
-                    setLogs([]);
-                }
-                setConnected(true);
-            }
-            else {
-                setConnected(false);
-            }
-        }
-        catch (error) {
-            console.error("Error fetching console logs:", error);
-            setConnected(false);
-        }
-    };
     // Clear console logs
     const clearConsoleLogs = async () => {
         try {
             await fetch("/devserver/api/console/logs", { method: "DELETE" });
-            fetchConsoleLogs();
+            // SSE logsCleared event will update the UI
         }
         catch (error) {
             console.error("Error clearing logs:", error);
@@ -392,9 +563,8 @@ const App = () => {
                 },
             });
             if (response.ok) {
-                // Immediately fetch new status and logs
+                // Immediately fetch new status (logs come via SSE)
                 fetchStatus();
-                fetchConsoleLogs();
             }
             else {
                 console.error("Failed to trigger build");
@@ -404,14 +574,100 @@ const App = () => {
             console.error("Error triggering build:", error);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "app postman-layout", children: [bannerVisible && ((0, jsx_runtime_1.jsxs)("div", { className: "beta-banner", children: [(0, jsx_runtime_1.jsx)("span", { className: "beta-banner-icon", children: "\u26A0\uFE0F" }), (0, jsx_runtime_1.jsxs)("span", { className: "beta-banner-text", children: [(0, jsx_runtime_1.jsx)("strong", { children: "BETA:" }), " This tool is in beta - we welcome your", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/optimizely/ocp-developer-feedback/issues/new/choose", target: "_blank", rel: "noopener noreferrer", className: "beta-banner-link", children: "feedback" })] }), (0, jsx_runtime_1.jsx)("button", { className: "beta-banner-close", onClick: () => setBannerVisible(false), "aria-label": "Close banner", children: "\u2715" })] })), (0, jsx_runtime_1.jsxs)("header", { className: "top-nav", children: [(0, jsx_runtime_1.jsxs)("div", { className: "nav-left", children: [(0, jsx_runtime_1.jsx)("div", { className: "app-title", children: (0, jsx_runtime_1.jsx)("h1", { children: "OCP Local Environment" }) }), appInfo && ((0, jsx_runtime_1.jsxs)("div", { className: "app-info-nav", children: [(0, jsx_runtime_1.jsx)("span", { className: "app-name", children: appInfo.displayName || appInfo.name }), (0, jsx_runtime_1.jsxs)("span", { className: "app-version", children: ["v", appInfo.version] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "nav-right", children: [(0, jsx_runtime_1.jsxs)("button", { className: `rebuild-btn ${buildStatus?.buildInProgress ? 'building' :
+    // Compute deploy button CSS modifier class based on current deploy status
+    const getDeployStatusClass = () => {
+        if (deployStatus.deployInProgress)
+            return 'deploying';
+        if (deployStatus.lastDeploySuccess === true)
+            return 'deploy-success';
+        if (deployStatus.lastDeploySuccess === false)
+            return 'deploy-error';
+        return '';
+    };
+    // Append a deploy log message and increment the version counter
+    const appendDeployLog = (message) => {
+        setDeployLogs(prev => [...prev, message]);
+        setDeployVersion(v => v + 1);
+    };
+    // Trigger a deploy
+    const triggerDeploy = async () => {
+        try {
+            // First, resolve the version from Rivendell
+            const resolveResponse = await fetch("/devserver/api/deploy/resolve-version", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+            });
+            if (!resolveResponse.ok) {
+                const errorData = await resolveResponse.json().catch(() => ({}));
+                appendDeployLog(`Error resolving version: ${errorData.error || 'Unknown error'}`);
+                return;
+            }
+            const versionData = await resolveResponse.json();
+            if (versionData.searchError) {
+                appendDeployLog(`Warning: Rivendell search failed (${versionData.searchError}), bumping version locally`);
+            }
+            if (versionData.isDevVersion && (0, DeployModal_1.shouldSkipDevConfirmation)()) {
+                // Dev version with "do not show again" enabled: deploy immediately
+                startDeploy(versionData.suggestedVersion);
+            }
+            else {
+                // Show confirmation modal
+                setDeployModalData({
+                    currentVersion: versionData.currentVersion,
+                    suggestedVersion: versionData.suggestedVersion,
+                    isDevVersion: versionData.isDevVersion
+                });
+                setShowDeployModal(true);
+            }
+        }
+        catch (error) {
+            console.error("Error triggering deploy:", error);
+            appendDeployLog(`Error: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    // Start the deploy with a specific version
+    const startDeploy = async (version) => {
+        setShowDeployModal(false);
+        try {
+            const response = await fetch("/devserver/api/deploy/start", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ version }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                appendDeployLog(`Error starting deploy: ${errorData.error || 'Unknown error'}`);
+            }
+            // Success: SSE events will handle state updates
+        }
+        catch (error) {
+            console.error("Error starting deploy:", error);
+            appendDeployLog(`Error: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "app postman-layout", children: [(0, jsx_runtime_1.jsxs)("header", { className: "top-nav", children: [(0, jsx_runtime_1.jsx)("div", { className: "nav-left", children: (0, jsx_runtime_1.jsx)("div", { className: "app-title", children: (0, jsx_runtime_1.jsx)("h1", { children: "OCP Local Environment" }) }) }), appInfo && ((0, jsx_runtime_1.jsx)("div", { className: "nav-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "app-info-nav", children: [(0, jsx_runtime_1.jsx)("span", { className: "app-name", children: appInfo.displayName || appInfo.name }), (0, jsx_runtime_1.jsxs)("span", { className: "app-version", children: ["v", appInfo.version] })] }) })), (0, jsx_runtime_1.jsxs)("div", { className: "nav-right", children: [(0, jsx_runtime_1.jsxs)("button", { className: `deploy-btn ${getDeployStatusClass()}`, onClick: triggerDeploy, disabled: deployStatus.deployInProgress || !!buildStatus?.buildInProgress, title: "Deploy app version to OCP", children: [(0, jsx_runtime_1.jsx)("span", { className: "deploy-status-dot" }), deployStatus.deployInProgress ? "Deploying..." :
+                                        deployStatus.lastDeploySuccess === true ? "Deployed" : "Deploy"] }), (0, jsx_runtime_1.jsxs)("button", { className: `rebuild-btn ${buildStatus?.buildInProgress ? 'building' :
                                     buildStatus?.lastBuildSuccess === true ? 'success' :
-                                        buildStatus?.lastBuildSuccess === false ? 'error' : ''}`, onClick: triggerBuild, disabled: buildStatus?.buildInProgress, children: [(0, jsx_runtime_1.jsx)("span", { className: "rebuild-status-dot" }), buildStatus?.buildInProgress ? "Building..." : "Rebuild"] }), (0, jsx_runtime_1.jsx)("div", { className: "nav-separator-vertical" }), (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/optimizely/ocp-developer-feedback/issues/new/choose", target: "_blank", rel: "noopener noreferrer", className: "feedback-btn", title: "Provide Feedback", children: "\uD83D\uDCAC Feedback" }), (0, jsx_runtime_1.jsxs)("a", { href: "https://docs.developers.optimizely.com/optimizely-connect-platform/docs/local-testing-tool-ocp2", target: "_blank", rel: "noopener noreferrer", className: "docs-btn", title: "Documentation", children: [(0, jsx_runtime_1.jsx)("span", { className: "docs-icon", children: "\uD83D\uDCD6" }), " Docs"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "main-layout", children: [(0, jsx_runtime_1.jsx)("aside", { className: "sidebar", children: (0, jsx_runtime_1.jsxs)("nav", { className: "sidebar-nav", children: [(0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "settings" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/settings'), children: [(0, jsx_runtime_1.jsx)("span", { className: "nav-icon", children: "\u2699\uFE0F" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "App Settings" })] }), appInfo && appInfo.functions && appInfo.functions.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "functions" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/functions'), children: [(0, jsx_runtime_1.jsx)("span", { className: "nav-icon", children: "\u26A1" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Functions" })] })), appInfo && appInfo.jobs && appInfo.jobs.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "jobs" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/jobs'), children: [(0, jsx_runtime_1.jsx)("span", { className: "nav-icon", children: "\uD83D\uDCCB" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Jobs" })] })), appInfo && appInfo.destinations && appInfo.destinations.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "destinations" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/destinations'), children: [(0, jsx_runtime_1.jsx)("span", { className: "nav-icon", children: "\uD83D\uDCE4" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Destinations" })] })), appInfo && appInfo.sources && appInfo.sources.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "sources" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/sources'), children: [(0, jsx_runtime_1.jsx)("span", { className: "nav-icon", children: "\uD83D\uDCE5" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Sources" })] }))] }) }), (0, jsx_runtime_1.jsxs)("main", { className: "content-area", children: [(0, jsx_runtime_1.jsxs)("div", { className: "content-header", children: [(0, jsx_runtime_1.jsxs)("h2", { children: [activeView === "settings" && "App Settings", activeView === "functions" && "Functions", activeView === "jobs" && "Jobs", activeView === "destinations" && "Destinations", activeView === "sources" && "Sources"] }), appInfo && !appInfo.isValid && ((0, jsx_runtime_1.jsxs)("div", { className: "validation-errors-banner", children: [(0, jsx_runtime_1.jsx)("span", { className: "error-icon", children: "\u26A0\uFE0F" }), (0, jsx_runtime_1.jsx)("span", { children: "App has validation errors" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "content-body", children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/", element: (0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/settings", element: (0, jsx_runtime_1.jsxs)("div", { className: "settings-view", children: [appInfo && !appInfo.isValid && appInfo.errors && appInfo.errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "validation-errors", children: [(0, jsx_runtime_1.jsx)("h4", { children: "Validation Errors:" }), (0, jsx_runtime_1.jsx)("ul", { children: appInfo.errors.map((err, idx) => ((0, jsx_runtime_1.jsx)("li", { children: err }, idx))) })] })), buildStatus?.buildInProgress || (buildStatus?.lastBuildSuccess === null && buildStatus?.lastBuildTimestamp === null) ? ((0, jsx_runtime_1.jsx)("div", { className: "settings-loading-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "placeholder-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Building App..." }), (0, jsx_runtime_1.jsx)("p", { children: "Please wait while the app is being built." }), (0, jsx_runtime_1.jsx)("div", { className: "spinner" })] }) })) : buildStatus?.lastBuildSuccess === false ? ((0, jsx_runtime_1.jsx)("div", { className: "settings-loading-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "placeholder-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Build Failed" }), (0, jsx_runtime_1.jsx)("p", { children: "The app failed to build. Please check the console for errors." }), buildStatus.lastBuildError && ((0, jsx_runtime_1.jsx)("pre", { className: "error-details", children: buildStatus.lastBuildError }))] }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "settings-iframe-container", children: (0, jsx_runtime_1.jsx)("iframe", { id: "app_directory_frame", style: {
+                                        buildStatus?.lastBuildSuccess === false ? 'error' : ''}`, onClick: triggerBuild, disabled: buildStatus?.buildInProgress, children: [(0, jsx_runtime_1.jsx)("span", { className: "rebuild-status-dot" }), buildStatus?.buildInProgress ? "Building..." : "Rebuild"] }), config.hasSchemaFiles && ((0, jsx_runtime_1.jsxs)("div", { className: "odp-status-badge", children: [(0, jsx_runtime_1.jsx)("span", { className: `odp-status-dot ${config.odpKeyConfigured ? 'configured' : 'not-configured'}` }), "ODP/OCP", (0, jsx_runtime_1.jsx)("span", { className: "odp-tooltip", children: config.odpKeyConfigured
+                                            ? 'ODP API Key is configured'
+                                            : 'ODP API Key is not configured — set it in Tool Settings' })] })), (0, jsx_runtime_1.jsx)("div", { className: "nav-separator-vertical" }), (0, jsx_runtime_1.jsxs)("a", { href: "https://github.com/optimizely/ocp-developer-feedback/issues/new/choose", target: "_blank", rel: "noopener noreferrer", className: "feedback-btn", title: "Provide Feedback", children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconPenField, { size: "14" }), "Feedback"] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://docs.developers.optimizely.com/optimizely-connect-platform/docs/local-testing", target: "_blank", rel: "noopener noreferrer", className: "docs-btn", title: "Documentation", children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconBookOpen, { size: "14" }), " Docs"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "main-layout", children: [(0, jsx_runtime_1.jsx)("aside", { className: "sidebar", children: (0, jsx_runtime_1.jsxs)("nav", { className: "sidebar-nav", children: [(0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "settings" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/settings'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconGear, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "App Settings" })] }), appInfo && appInfo.functions && appInfo.functions.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "functions" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/functions'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconBolt, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Functions" })] })), appInfo && appInfo.jobs && appInfo.jobs.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "jobs" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/jobs'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconCubes, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Jobs" })] })), appInfo && appInfo.destinations && appInfo.destinations.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "destinations" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/destinations'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconUpload, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Destinations" })] })), appInfo && appInfo.sources && appInfo.sources.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "sources" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/sources'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconDownload, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Sources" })] })), appInfo && appInfo.opalTools && appInfo.opalTools.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "opal-tools" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/opal-tools'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconScrewdriverWrench, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Opal Tools" })] })), config.hasSchemaFiles && ((0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "odp-schema" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/odp-schema'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconMemoPad, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "ODP Schema" })] })), (0, jsx_runtime_1.jsx)("div", { className: "nav-separator", style: { height: '1px', background: '#3e3e42', margin: '4px 0' } }), (0, jsx_runtime_1.jsxs)("button", { className: `nav-item ${activeView === "tool-settings" ? "active" : ""}`, onClick: () => navigatePreservingConsole('/tool-settings'), children: [(0, jsx_runtime_1.jsx)(axiom_icons_1.IconGear, { size: "2xs" }), (0, jsx_runtime_1.jsx)("span", { className: "nav-label", children: "Tool Settings" })] })] }) }), (0, jsx_runtime_1.jsxs)("main", { className: "content-area", children: [activeView !== "jobs" && activeView !== "functions" && activeView !== "opal-tools" && activeView !== "destinations" && activeView !== "tool-settings" && activeView !== "odp-schema" && ((0, jsx_runtime_1.jsxs)("div", { className: "content-header", children: [(0, jsx_runtime_1.jsxs)("h2", { children: [activeView === "settings" && "App Settings", activeView === "sources" && "Sources"] }), appInfo && !appInfo.isValid && ((0, jsx_runtime_1.jsxs)("div", { className: "validation-errors-banner", children: [(0, jsx_runtime_1.jsx)("span", { className: "error-icon", children: "\u26A0\uFE0F" }), (0, jsx_runtime_1.jsx)("span", { children: "App has validation errors" })] }))] })), (0, jsx_runtime_1.jsx)("div", { className: "content-body", children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/", element: (0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/settings", element: (0, jsx_runtime_1.jsxs)("div", { className: "settings-view", children: [appInfo && !appInfo.isValid && appInfo.errors && appInfo.errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "validation-errors", children: [(0, jsx_runtime_1.jsx)("h4", { children: "Validation Errors:" }), (0, jsx_runtime_1.jsx)("ul", { children: appInfo.errors.map((err, idx) => ((0, jsx_runtime_1.jsx)("li", { children: err }, idx))) })] })), buildStatus?.buildInProgress || (buildStatus?.lastBuildSuccess === null && buildStatus?.lastBuildTimestamp === null) ? ((0, jsx_runtime_1.jsx)("div", { className: "settings-loading-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "placeholder-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Building App..." }), (0, jsx_runtime_1.jsx)("p", { children: "Please wait while the app is being built." }), (0, jsx_runtime_1.jsx)("div", { className: "spinner" })] }) })) : buildStatus?.lastBuildSuccess === false ? ((0, jsx_runtime_1.jsx)("div", { className: "settings-loading-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "placeholder-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Build Failed" }), (0, jsx_runtime_1.jsx)("p", { children: "The app failed to build. Please check the console for errors." }), buildStatus.lastBuildError && ((0, jsx_runtime_1.jsx)("pre", { className: "error-details", children: buildStatus.lastBuildError }))] }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "settings-iframe-container", children: (0, jsx_runtime_1.jsx)("iframe", { id: "app_directory_frame", style: {
                                                                 width: "100%",
                                                                 height: "100%",
                                                                 border: "none",
                                                                 overflow: "hidden",
-                                                            }, ref: setIframeRef, src: `${window.location.origin}/app/${appInfo?.name || "unknown"}`, onLoad: handleIframeLoad }) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/functions/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "functions-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.functions && appInfo.functions.length > 0 ? ((0, jsx_runtime_1.jsx)(FunctionsView_1.default, { appInstalled: appInstalled, buildStatus: buildStatus })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/jobs/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "jobs-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.jobs && appInfo.jobs.length > 0 ? ((0, jsx_runtime_1.jsx)(JobsView_1.default, { appInstalled: appInstalled, buildStatus: buildStatus })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/destinations/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "destinations-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.destinations && appInfo.destinations.length > 0 ? ((0, jsx_runtime_1.jsx)(DestinationsView_1.DestinationsView, { apiBaseUrl: "/devserver/api", appInstalled: appInstalled, buildStatus: buildStatus })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/sources/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "sources-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.sources && appInfo.sources.length > 0 ? ((0, jsx_runtime_1.jsx)(SourcesView_1.SourcesView, { apiBaseUrl: "/devserver/api", appInstalled: appInstalled, buildStatus: buildStatus })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: (0, jsx_runtime_1.jsxs)("div", { className: "not-found-view", style: {
+                                                            }, ref: setIframeRef, src: `${window.location.origin}/app/${appInfo?.name || "unknown"}`, onLoad: handleIframeLoad }) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/functions/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "functions-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.functions && appInfo.functions.length > 0 ? ((0, jsx_runtime_1.jsx)(FunctionsView_1.default, { appInstalled: appInstalled, buildStatus: buildStatus, installVersion: installVersion })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/jobs/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "jobs-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.jobs && appInfo.jobs.length > 0 ? ((0, jsx_runtime_1.jsx)(JobsView_1.default, { appInstalled: appInstalled, buildStatus: buildStatus })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/destinations/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "destinations-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.destinations && appInfo.destinations.length > 0 ? ((0, jsx_runtime_1.jsx)(DestinationsView_1.DestinationsView, { apiBaseUrl: "/devserver/api", appInstalled: appInstalled, buildStatus: buildStatus })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/sources/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "sources-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.sources && appInfo.sources.length > 0 ? ((0, jsx_runtime_1.jsx)(SourcesView_1.SourcesView, { apiBaseUrl: "/devserver/api", appInstalled: appInstalled, buildStatus: buildStatus })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/opal-tools/*", element: !appInfo ? ((0, jsx_runtime_1.jsx)("div", { className: "functions-view", children: (0, jsx_runtime_1.jsx)("div", { className: "placeholder-content", children: (0, jsx_runtime_1.jsx)("p", { children: "Loading..." }) }) })) : appInfo.opalTools && appInfo.opalTools.length > 0 ? ((0, jsx_runtime_1.jsx)(OpalToolsView_1.default, { appInstalled: appInstalled, buildStatus: buildStatus, installVersion: installVersion })) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/odp-schema", element: config.hasSchemaFiles ? ((0, jsx_runtime_1.jsx)(OdpSchemaView_1.default, {})) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Navigate, { to: "/settings", replace: true })) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tool-settings", element: (0, jsx_runtime_1.jsx)(ToolSettingsView_1.default, { odpApiKey: config.odpApiKey || '', onSave: async (odpApiKey) => {
+                                                    try {
+                                                        await fetch('/devserver/api/config/odp', {
+                                                            method: 'POST',
+                                                            headers: { 'Content-Type': 'application/json' },
+                                                            body: JSON.stringify({ odpApiKey }),
+                                                        });
+                                                        fetchConfig();
+                                                    }
+                                                    catch (error) {
+                                                        console.error('Error saving ODP config:', error);
+                                                    }
+                                                } }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: (0, jsx_runtime_1.jsxs)("div", { className: "not-found-view", style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     alignItems: 'center',
@@ -426,7 +682,7 @@ const App = () => {
                                                             color: 'white',
                                                             border: 'none',
                                                             borderRadius: '4px'
-                                                        }, children: "Go to Settings" })] }) })] }) })] })] }), (0, jsx_runtime_1.jsx)(TabbedConsole_1.default, { logs: logs, onClearLogs: clearConsoleLogs, storeTimestamps: storeTimestamps, onRefreshStores: fetchStatus, notificationCount: notificationCount })] }));
+                                                        }, children: "Go to Settings" })] }) })] }) })] })] }), (0, jsx_runtime_1.jsx)(TabbedConsole_1.default, { logs: logs, onClearLogs: clearConsoleLogs, storeTimestamps: storeTimestamps, onRefreshStores: fetchStatus, notificationCount: notificationCount, hasSources: !!(appInfo?.sources && appInfo.sources.length > 0), sourceDataVersion: sourceDataVersion, sourceDataTotalEmitted: sourceDataTotalEmitted, notificationVersion: notificationVersion, envVersion: envVersion, deployLogs: deployLogs, deployVersion: deployVersion, deployStatus: deployStatus }), (0, jsx_runtime_1.jsx)(DeployModal_1.DeployModal, { isOpen: showDeployModal, onClose: () => setShowDeployModal(false), currentVersion: deployModalData?.currentVersion || '', suggestedVersion: deployModalData?.suggestedVersion || '', isDevVersion: deployModalData?.isDevVersion || false, onDeploy: startDeploy }), permanentlyDisconnected && ((0, jsx_runtime_1.jsx)("div", { className: "disconnect-overlay", children: (0, jsx_runtime_1.jsxs)("div", { className: "disconnect-message", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Server Disconnected" }), (0, jsx_runtime_1.jsx)("p", { children: "The development server has been stopped or is unreachable." }), (0, jsx_runtime_1.jsx)("button", { onClick: () => window.location.reload(), children: "Reconnect" })] }) })), appChanged && ((0, jsx_runtime_1.jsx)("div", { className: "disconnect-overlay", children: (0, jsx_runtime_1.jsxs)("div", { className: "disconnect-message app-changed", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Different App Detected" }), (0, jsx_runtime_1.jsxs)("p", { children: ["The server is now running a different app.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("span", { className: "app-change-details", children: [(0, jsx_runtime_1.jsx)("strong", { children: appChanged.oldApp }), " \u2192 ", (0, jsx_runtime_1.jsx)("strong", { children: appChanged.newApp })] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => window.location.reload(), children: "Load New App" })] }) }))] }));
 };
 exports.default = App;
 //# sourceMappingURL=App.js.map