feat(live-preview): add sticky interstitial splash for surprise-me

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -997,6 +997,15 @@
         if(thisGeneration !== _loadGeneration) {
             return; // A newer _loadPreview call has been made; this one is stale
         }
+        if (_interstitialActive) {
+            // The interstitial is sticky — any LP refresh while it's up
+            // (design-mode toggle, focus change, the user's already-open
+            // previewable file, etc.) keeps the splash on screen. It's
+            // only dismissed via an explicit hideInterstitial() call,
+            // which the caller fires when its prepared content is ready.
+            _paintInterstitial();
+            return;
+        }
         if(urlPinned && !force) {
             return;
         }
@@ -1663,8 +1672,46 @@
         }
     });
 
+    // Transient splash shown in the live preview iframe while something off-screen
+    // (the AI surprise-me flow) is preparing content. Reuses the no-preview.html
+    // template — the next `_loadPreview` call for a real previewable file
+    // automatically dismisses the interstitial. The state flag is consulted from
+    // inside _loadPreview so async LP refreshes (design-mode toggles, focus
+    // changes, etc.) don't paint the default "Nothing to preview!" page over our
+    // splash while the AI is still working.
+    let _interstitialActive = false;
+    let _interstitialHeading = "";
+    let _interstitialDetails = "";
+    function _paintInterstitial() {
+        if (!$iframe || !$iframe[0]) { return; }
+        if ($mdviewrIframe && $iframe[0] === $mdviewrIframe[0]) {
+            let newIframe = $(LIVE_PREVIEW_IFRAME_HTML);
+            $mdviewrIframe.after(newIframe);
+            $iframe = newIframe;
+        }
+        const url = StaticServer.getNoPreviewURL(
+            _interstitialHeading, _interstitialDetails);
+        $iframe.removeAttr('srcdoc');
+        $iframe.attr('src', url);
+    }
+    function showInterstitial(heading, details) {
+        _interstitialActive = true;
+        _interstitialHeading = heading;
+        _interstitialDetails = details || "";
+        _paintInterstitial();
+    }
+    function hideInterstitial() {
+        if (!_interstitialActive) { return; }
+        _interstitialActive = false;
+        _interstitialHeading = "";
+        _interstitialDetails = "";
+        _loadPreview(true);
+    }
+
     // private API to be used inside phoenix codebase only
     exports.LIVE_PREVIEW_PANEL_ID = LIVE_PREVIEW_PANEL_ID;
+    exports.showInterstitial = showInterstitial;
+    exports.hideInterstitial = hideInterstitial;
 });
 
 

src/nls/root/strings.js

@@ -2170,6 +2170,9 @@ define({
     // AI CHAT PANEL
     "AI_CHAT_TITLE": "Claude Code",
     "AI_CHAT_SURPRISE_ME_USER_MSG": "Surprise me!",
+    "AI_CHAT_SURPRISE_ME_LP_HEADING_1": "Setting the stage…",
+    "AI_CHAT_SURPRISE_ME_LP_HEADING_2": "Warming the canvas…",
+    "AI_CHAT_SURPRISE_ME_LP_HEADING_3": "Almost there…",
     "AI_CHAT_NEW_SESSION_TITLE": "Start a new conversation",
     "AI_CHAT_NEW_BTN": "New",
     "AI_CHAT_THINKING": "Thinking...",

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "79aeedfe7690aa5a166dd8e5b988900f6bf71468"
+    "commitID": "2265944a6d1803ba301c4348baa8dd85b14ee652"
   }
 }