feat: add skybridge integration

.gitignore

@@ -49,6 +49,7 @@ web_modules/
 
 # PNPM
 .pnpm-store/
+.pnpm-home/
 
 # TypeScript cache
 *.tsbuildinfo

pnpm-workspace.yaml

@@ -1,5 +1,6 @@
 packages:
-  # all packages in subdirs of sdks/typescript/
-  - 'sdks/typescript/*'
-  - 'examples/*'
-  - 'docs'
+  - sdks/typescript/*
+  - examples/*
+  - docs
+onlyBuiltDependencies:
+  - esbuild

sdks/typescript/client/scripts/proxy/index.html

@@ -47,27 +47,42 @@
       if (contentType === 'rawhtml') {
         // Double-iframe raw HTML mode (HTML sent via postMessage)
         const inner = document.createElement('iframe');
+        let pendingHtml = null;
+        const renderHtmlInIframe = (markup) => {
+          const doc = inner.contentDocument || inner.contentWindow?.document;
+          if (!doc) return false;
+          try {
+            doc.open();
+            doc.write(markup);
+            doc.close();
+            return true;
+          } catch (error) {
+            return false;
+          }
+        };
+        inner.addEventListener('load', () => {
+          if (pendingHtml !== null && renderHtmlInIframe(pendingHtml)) {
+            pendingHtml = null;
+          }
+        });
         inner.style = 'width:100%; height:100%; border:none;';
-        // sandbox will be set from postMessage payload; default minimal before html arrives
-        inner.setAttribute('sandbox', 'allow-scripts');
+        // Default sandbox ensures same-origin access for DOM writing; parent may override
+        inner.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+        inner.src = 'about:blank';
         document.body.appendChild(inner);
 
         // Wait for HTML content from parent
         window.addEventListener('message', (event) => {
-          if (event.source === window.parent) {
-            if (event.data && event.data.type === 'ui-html-content') {
-              const payload = event.data.payload || {};
-              const html = payload.html;
-              const sandbox = payload.sandbox;
-              if (typeof sandbox === 'string') {
-                inner.setAttribute('sandbox', sandbox);
-              }
-              if (typeof html === 'string') {
-                inner.srcdoc = html;
-              }
-            } else {
-              if (inner && inner.contentWindow) {
-                inner.contentWindow.postMessage(event.data, '*');
+          if (event.source === window.parent && event.data && event.data.type === 'ui-html-content') {
+            const payload = event.data.payload || {};
+            const html = payload.html;
+            const sandbox = payload.sandbox;
+            if (typeof sandbox === 'string') {
+              inner.setAttribute('sandbox', sandbox);
+            }
+            if (typeof html === 'string') {
+              if (!renderHtmlInIframe(html)) {
+                pendingHtml = html;
               }
             }
           } else if (event.source === inner.contentWindow) {

sdks/typescript/client/src/components/HTMLResourceRenderer.tsx

@@ -10,6 +10,9 @@ export type HTMLResourceRendererProps = {
   style?: React.CSSProperties;
   proxy?: string;
   iframeRenderData?: Record<string, unknown>;
+  toolInput?: Record<string, unknown>;
+  toolName?: string;
+  toolResponseMetadata?: Record<string, unknown>;
   autoResizeIframe?: boolean | { width?: boolean; height?: boolean };
   sandboxPermissions?: string;
   iframeProps?: Omit<React.HTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc' | 'style'> & {
@@ -43,18 +46,16 @@ export const HTMLResourceRenderer = ({
   style,
   proxy,
   iframeRenderData,
+  toolInput,
+  toolName,
+  toolResponseMetadata,
   autoResizeIframe,
   sandboxPermissions,
   iframeProps,
 }: HTMLResourceRendererProps) => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   useImperativeHandle(iframeProps?.ref, () => iframeRef.current as HTMLIFrameElement);
 
-  const { error, iframeSrc, iframeRenderMode, htmlString } = useMemo(
-    () => processHTMLResource(resource, proxy),
-    [resource, proxy],
-  );
-
   const uiMetadata = useMemo(() => getUIResourceMetadata(resource), [resource]);
   const preferredFrameSize = uiMetadata[UIMetadataKey.PREFERRED_FRAME_SIZE] ?? ['100%', '100%'];
   const metadataInitialRenderData = uiMetadata[UIMetadataKey.INITIAL_RENDER_DATA] ?? undefined;
@@ -69,6 +70,20 @@ export const HTMLResourceRenderer = ({
     };
   }, [iframeRenderData, metadataInitialRenderData]);
 
+  const { error, iframeSrc, iframeRenderMode, htmlString } = useMemo(
+    () =>
+      processHTMLResource(
+        resource,
+        proxy,
+        initialRenderData,
+        toolInput,
+        toolName,
+        toolResponseMetadata
+      ),
+    [resource, proxy]
+  );
+
+
   const iframeSrcToRender = useMemo(() => {
     if (iframeSrc && initialRenderData) {
       const iframeUrl = new URL(iframeSrc);

sdks/typescript/client/src/components/UIResourceRenderer.tsx

@@ -22,6 +22,9 @@ function getContentType(
   if (resource.mimeType === 'text/html') {
     return 'rawHtml';
   }
+  if (resource.mimeType === 'text/html+skybridge') {
+    return 'skybridge';
+  }
   if (resource.mimeType === 'text/uri-list') {
     return 'externalUrl';
   }
@@ -40,6 +43,7 @@ export const UIResourceRenderer = (props: UIResourceRendererProps) => {
 
   switch (contentType) {
     case 'rawHtml':
+    case 'skybridge':
     case 'externalUrl': {
       return <HTMLResourceRenderer resource={resource} onUIAction={onUIAction} {...htmlProps} />;
     }

sdks/typescript/client/src/types.ts

@@ -3,7 +3,12 @@ import React from 'react';
 
 export type UIActionType = 'tool' | 'prompt' | 'link' | 'intent' | 'notify';
 
-export const ALL_RESOURCE_CONTENT_TYPES = ['rawHtml', 'externalUrl', 'remoteDom'] as const;
+export const ALL_RESOURCE_CONTENT_TYPES = [
+  'rawHtml',
+  'externalUrl',
+  'remoteDom',
+  'skybridge',
+] as const;
 export type ResourceContentType = (typeof ALL_RESOURCE_CONTENT_TYPES)[number];
 
 type GenericActionMessage = {