sunpeak 0.13.5 → 0.13.7

package/dist/{index-BMqwRYBo.js → index-DqOCq5r8.js}

@@ -7527,8 +7527,7 @@ function Conversation({
   onRequestDisplayMode,
   appName = "Sunpeak",
   appIcon,
-  userMessage = "What have you got for me today?",
-  isTransitioning = false
+  userMessage = "What have you got for me today?"
 }) {
   const isDesktop = platform2 === "desktop";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
@@ -7650,12 +7649,6 @@ function Conversation({
                                         "div",
                                         {
                                           className: isPip ? "h-full w-full max-w-full overflow-auto bg-white dark:bg-[#212121]" : isFullscreen ? "h-full w-full max-w-full overflow-auto bg-surface" : "h-full w-full max-w-full bg-transparent",
-                                          style: {
-                                            opacity: isTransitioning ? 0 : 1,
-                                            // Only animate the reveal — the hide must be instant
-                                            // to prevent old content from being visible in the new layout.
-                                            transition: isTransitioning ? "none" : "opacity 100ms"
-                                          },
                                           children
                                         }
                                       )
@@ -14053,10 +14046,12 @@ class McpAppHost {
   _contentWindow = null;
   _fenceId = 0;
   _fenceCleanup = null;
+  _prevDisplayMode;
   _pendingToolInput = null;
   _pendingToolResult = null;
   constructor(options = {}) {
     this.options = options;
+    this._prevDisplayMode = options.hostContext?.displayMode;
     this.bridge = new j_(null, HOST_INFO, HOST_CAPABILITIES, {
       hostContext: options.hostContext
     });
@@ -14076,6 +14071,16 @@ class McpAppHost {
       if (this.options.onOpenLink) {
         this.options.onOpenLink(url);
       } else {
+        try {
+          const parsed = new URL(url);
+          if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+            console.warn("[MCP App] openLink blocked non-http(s) URL:", url);
+            return {};
+          }
+        } catch {
+          console.warn("[MCP App] openLink blocked invalid URL:", url);
+          return {};
+        }
         window.open(url, "_blank");
       }
       return {};
@@ -14157,6 +14162,7 @@ class McpAppHost {
     const id = ++this._fenceId;
     return new Promise((resolve) => {
       const handler = (event) => {
+        if (event.source !== win) return;
         if (event.data?.method === "sunpeak/fence-ack" && event.data.params?.fenceId === id) {
           cleanup();
           resolve();
@@ -14180,9 +14186,19 @@ class McpAppHost {
   }
   /**
    * Update the host context and notify the connected app.
+   * Automatically detects display mode changes and waits for the iframe
+   * to commit its DOM before firing onDisplayModeReady.
    */
   setHostContext(context) {
     this.bridge.setHostContext(context);
+    const currentMode = context.displayMode;
+    if (currentMode && currentMode !== this._prevDisplayMode) {
+      this._prevDisplayMode = currentMode;
+      const mode = currentMode;
+      this.waitForPaint().then(() => {
+        this.options.onDisplayModeReady?.(mode);
+      });
+    }
   }
   /**
    * Send tool input to the app.
@@ -14241,7 +14257,6 @@ class McpAppHost {
     }
     await this.bridge.close();
     this._initialized = false;
-    this._contentWindow = null;
   }
   /**
    * Debug: Inject state directly into the app's useAppState hook.
@@ -14298,7 +14313,21 @@ function isAllowedUrl(src) {
     return false;
   }
 }
+function extractResourceCSP(resource) {
+  const meta = resource._meta;
+  const ui2 = meta?.ui;
+  return ui2?.csp;
+}
 const SDK_RESOURCE_DOMAINS = ["https://cdn.openai.com"];
+function isValidCspSource(source) {
+  if (!source || /[\s;,']/.test(source) || source === "*") return false;
+  try {
+    const url = new URL(source);
+    return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "ws:" || url.protocol === "wss:";
+  } catch {
+    return false;
+  }
+}
 function generateCSP(csp, scriptSrc) {
   let scriptOrigin = "";
   try {
@@ -14316,14 +14345,26 @@ function generateCSP(csp, scriptSrc) {
   const connectSources = /* @__PURE__ */ new Set(["'self'"]);
   if (scriptOrigin) connectSources.add(scriptOrigin);
   if (csp?.connectDomains) {
-    for (const domain of csp.connectDomains) connectSources.add(domain);
+    for (const domain of csp.connectDomains) {
+      if (isValidCspSource(domain)) {
+        connectSources.add(domain);
+      } else {
+        console.warn("[IframeResource] Ignoring invalid CSP connect domain:", domain);
+      }
+    }
   }
   directives.push(`connect-src ${Array.from(connectSources).join(" ")}`);
   const resourceSources = /* @__PURE__ */ new Set(["'self'", "data:", "blob:"]);
   if (scriptOrigin) resourceSources.add(scriptOrigin);
   for (const domain of SDK_RESOURCE_DOMAINS) resourceSources.add(domain);
   if (csp?.resourceDomains) {
-    for (const domain of csp.resourceDomains) resourceSources.add(domain);
+    for (const domain of csp.resourceDomains) {
+      if (isValidCspSource(domain)) {
+        resourceSources.add(domain);
+      } else {
+        console.warn("[IframeResource] Ignoring invalid CSP resource domain:", domain);
+      }
+    }
   }
   const resourceList = Array.from(resourceSources).join(" ");
   directives.push(`img-src ${resourceList}`);
@@ -14331,11 +14372,29 @@ function generateCSP(csp, scriptSrc) {
   directives.push(`media-src ${resourceList}`);
   return directives.join("; ");
 }
+const PAINT_FENCE_SCRIPT = `window.addEventListener("message",function(e){
+if(e.data&&e.data.method==="sunpeak/fence"){
+var fid=e.data.params&&e.data.params.fenceId;
+requestAnimationFrame(function(){
+e.source.postMessage({jsonrpc:"2.0",method:"sunpeak/fence-ack",params:{fenceId:fid}},"*");
+});}});`;
+function injectPaintFence(iframe) {
+  try {
+    const doc = iframe.contentDocument;
+    if (!doc || doc.querySelector("script[data-sunpeak-fence]")) return;
+    const script = doc.createElement("script");
+    script.setAttribute("data-sunpeak-fence", "");
+    script.textContent = PAINT_FENCE_SCRIPT;
+    doc.head.appendChild(script);
+  } catch {
+  }
+}
 function generateScriptHtml(scriptSrc, theme, cspPolicy) {
   const safeScriptSrc = escapeHtml(scriptSrc);
   const safeCsp = escapeHtml(cspPolicy);
+  const safeTheme = escapeHtml(theme);
   return `<!DOCTYPE html>
-<html lang="en" data-theme="${theme}">
+<html lang="en" data-theme="${safeTheme}">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -14354,19 +14413,7 @@ function generateScriptHtml(scriptSrc, theme, cspPolicy) {
       color-scheme: dark light;
     }
   </style>
-  <script>
-    // Paint fence responder — allows the host to wait for this iframe to
-    // process pending messages and commit DOM updates before revealing content.
-    // Formatted as JSON-RPC 2.0 notifications to avoid PostMessageTransport parse errors.
-    window.addEventListener("message",function(e){
-      if(e.data&&e.data.method==="sunpeak/fence"){
-        var fid=e.data.params&&e.data.params.fenceId;
-        requestAnimationFrame(function(){
-          e.source.postMessage({jsonrpc:"2.0",method:"sunpeak/fence-ack",params:{fenceId:fid}},"*");
-        });
-      }
-    });
-  <\/script>
+  <script>${PAINT_FENCE_SCRIPT}<\/script>
 </head>
 <body>
   <div id="root"></div>
@@ -14384,14 +14431,13 @@ function IframeResource({
   csp,
   className,
   style,
-  onDisplayModeReady,
   debugInjectState
 }) {
   const iframeRef = useRef(null);
   const hostRef = useRef(null);
-  const prevDisplayModeRef = useRef(hostContext?.displayMode);
-  const onDisplayModeReadyRef = useRef(onDisplayModeReady);
-  onDisplayModeReadyRef.current = onDisplayModeReady;
+  const [readyDisplayMode, setReadyDisplayMode] = useState(
+    hostContext?.displayMode
+  );
   const resourceUrl = src ?? scriptSrc;
   const hasReceivedSizeRef = useRef(false);
   const host = useMemo(
@@ -14404,7 +14450,8 @@ function IframeResource({
           hasReceivedSizeRef.current = true;
           iframeRef.current.style.height = `${params.height}px`;
         }
-      }
+      },
+      onDisplayModeReady: (mode) => setReadyDisplayMode(mode)
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -14421,22 +14468,13 @@ function IframeResource({
     [host]
   );
   const handleLoad = useCallback(() => {
-    if (toolInput) host.sendToolInput(toolInput);
-    if (toolResult) host.sendToolResult(toolResult);
-  }, [host, toolInput, toolResult]);
+    if (src && iframeRef.current) {
+      injectPaintFence(iframeRef.current);
+    }
+  }, [src]);
   useEffect(() => {
     if (hostContext) {
       host.setHostContext(hostContext);
-      const currentMode = hostContext.displayMode;
-      if (currentMode !== prevDisplayModeRef.current) {
-        prevDisplayModeRef.current = currentMode;
-        if (currentMode) {
-          const mode = currentMode;
-          host.waitForPaint().then(() => {
-            onDisplayModeReadyRef.current?.(mode);
-          });
-        }
-      }
     }
   }, [host, hostContext]);
   useEffect(() => {
@@ -14472,6 +14510,7 @@ function IframeResource({
     const theme = hostContext?.theme ?? "dark";
     return generateScriptHtml(absoluteScriptSrc, theme, cspPolicy);
   }, [scriptSrc, isValidUrl, csp, hostContext?.theme]);
+  const isTransitioning = hostContext?.displayMode !== readyDisplayMode;
   if (src) {
     if (!isValidUrl) {
       console.error("[IframeResource] URL not allowed:", src);
@@ -14495,6 +14534,10 @@ function IframeResource({
           // Start with minHeight to prevent collapse, but allow auto-resize to set actual height.
           // Don't use height: 100% as it requires explicit height in parent chain.
           minHeight: "200px",
+          // Hide during display mode transitions; reveal with a short fade once
+          // the iframe has committed its DOM for the new mode.
+          opacity: isTransitioning ? 0 : 1,
+          transition: isTransitioning ? "none" : "opacity 100ms",
           ...style
         },
         title: "Resource Preview",
@@ -14518,6 +14561,8 @@ function IframeResource({
         // Start with minHeight to prevent collapse, but allow auto-resize to set actual height.
         // Don't use height: 100% as it requires explicit height in parent chain.
         minHeight: "200px",
+        opacity: isTransitioning ? 0 : 1,
+        transition: isTransitioning ? "none" : "opacity 100ms",
         ...style
       },
       title: "Resource Preview",
@@ -14643,12 +14688,6 @@ function ChatGPTSimulator({
       _setDisplayMode(mode);
     }
   };
-  const [readyDisplayMode, setReadyDisplayMode] = useState(
-    urlParams.displayMode ?? DEFAULT_DISPLAY_MODE
-  );
-  const handleDisplayModeReady = useCallback((mode) => {
-    setReadyDisplayMode(mode);
-  }, []);
   const hostContext = useMemo(
     () => ({
       theme,
@@ -14739,11 +14778,7 @@ function ChatGPTSimulator({
   }, [toolResult, modelContext]);
   const resourceUrl = selectedSim?.resourceUrl;
   const resourceScript = selectedSim?.resourceScript;
-  const resourceMeta = selectedSim?.resource._meta;
-  const resourceUi = resourceMeta?.ui;
-  const csp = resourceUi?.csp;
-  const hasIframeContent = !!(resourceUrl || resourceScript);
-  const isTransitioning = hasIframeContent && displayMode !== readyDisplayMode;
+  const csp = selectedSim ? extractResourceCSP(selectedSim.resource) : void 0;
   let content;
   if (resourceUrl) {
     content = /* @__PURE__ */ jsx(
@@ -14757,7 +14792,6 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
-        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -14775,7 +14809,6 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
-        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -15001,7 +15034,6 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage: selectedSim?.userMessage,
-          isTransitioning,
           children: content
         },
         selectedSimulationName
@@ -15062,6 +15094,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   buildSimulations,
   createResourceExports,
   createSimulatorUrl,
+  extractResourceCSP,
   extractResourceKey,
   extractSimulationKey,
   extractSimulationName,
@@ -15081,7 +15114,8 @@ export {
   ThemeProvider as T,
   createSimulatorUrl as a,
   clsx as c,
+  extractResourceCSP as e,
   index as i,
   useThemeContext as u
 };
-//# sourceMappingURL=index-BMqwRYBo.js.map
+//# sourceMappingURL=index-DqOCq5r8.js.map