Update onsizechange to onheightchange

martinalong · martinalong · commit ac1d83ce5623 · 2025-12-14T19:41:30.000-08:00
diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx
@@ -638,20 +638,19 @@ Host MUST send this notification if the tool execution was cancelled, for any re
 Host MUST send this notification before tearing down the UI resource, for any reason, including user action, resource re-allocation, etc. The Host MAY specify the reason.
 Host SHOULD wait for a response before tearing down the resource (to prevent data loss).
 
-`ui/notifications/size-changed` - UI’s size changed
+`ui/notifications/height-changed` - UI's height changed
 
 ```typescript
 {
   jsonrpc: "2.0",
-  method: "ui/notifications/size-changed",
+  method: "ui/notifications/height-changed",
   params: {
-    width: number,   // Viewport width in pixels
-    height: number   // Viewport height in pixels
+    height: number   // Content height in pixels
   }
 }
 ```
 
-Guest UI SHOULD send this notification when rendered content body size changes (e.g. using ResizeObserver API to report up to date size).
+Guest UI SHOULD send this notification when rendered content height changes (e.g. using ResizeObserver API to report up to date height). This allows the host to dynamically resize the iframe to fit the content.
 
 `ui/notifications/host-context-changed` - Host context has changed
 
@@ -780,7 +779,7 @@ sequenceDiagram
       H --> UI: resources/read response
     end
     opt UI notifications
-      UI ->> H: notifications (e.g., ui/notifications/size-changed)
+      UI ->> H: notifications (e.g., ui/notifications/height-changed)
     end
     opt Host notifications
       H ->> UI: notifications (e.g., ui/notifications/host-context-changed)
diff --git a/src/app-bridge.test.ts b/src/app-bridge.test.ts
@@ -403,16 +403,16 @@ describe("App <-> AppBridge integration", () => {
       await bridge.connect(bridgeTransport);
     });
 
-    it("app.sendSizeChanged triggers bridge.onsizechange", async () => {
-      const receivedSizes: unknown[] = [];
-      bridge.onsizechange = (params) => {
-        receivedSizes.push(params);
+    it("app.sendHeightChanged triggers bridge.onheightchange", async () => {
+      const receivedHeights: unknown[] = [];
+      bridge.onheightchange = (params) => {
+        receivedHeights.push(params);
       };
 
       await app.connect(appTransport);
-      await app.sendSizeChanged({ width: 400, height: 600 });
+      await app.sendHeightChanged({ height: 600 });
 
-      expect(receivedSizes).toEqual([{ width: 400, height: 600 }]);
+      expect(receivedHeights).toEqual([{ height: 600 }]);
     });
 
     it("app.sendLog triggers bridge.onloggingmessage", async () => {
diff --git a/src/app-bridge.ts b/src/app-bridge.ts
@@ -44,7 +44,7 @@ import {
   type AppRequest,
   type AppResult,
   type McpUiSandboxResourceReadyNotification,
-  type McpUiSizeChangedNotification,
+  type McpUiHeightChangedNotification,
   type McpUiToolCancelledNotification,
   type McpUiToolInputNotification,
   type McpUiToolInputPartialNotification,
@@ -70,7 +70,7 @@ import {
   McpUiResourceTeardownResultSchema,
   McpUiSandboxProxyReadyNotification,
   McpUiSandboxProxyReadyNotificationSchema,
-  McpUiSizeChangedNotificationSchema,
+  McpUiHeightChangedNotificationSchema,
 } from "./types";
 export * from "./types";
 export { RESOURCE_URI_META_KEY, RESOURCE_MIME_TYPE } from "./app";
@@ -294,34 +294,26 @@ export class AppBridge extends Protocol<
   onping?: (params: PingRequest["params"], extra: RequestHandlerExtra) => void;
 
   /**
-   * Register a handler for size change notifications from the Guest UI.
+   * Register a handler for height change notifications from the Guest UI.
    *
-   * The Guest UI sends `ui/notifications/size-changed` when its rendered content
-   * size changes, typically via ResizeObserver. Set this callback to dynamically
-   * adjust the iframe container dimensions based on the Guest UI's content.
-   *
-   * Note: This is for Guest UI → Host communication. To notify the Guest UI of
-   * host viewport changes, use {@link app.App.sendSizeChanged}.
+   * The Guest UI sends `ui/notifications/height-changed` when its rendered content
+   * height changes, typically via ResizeObserver. Set this callback to dynamically
+   * adjust the iframe height based on the Guest UI's content.
    *
    * @example
    * ```typescript
-   * bridge.onsizechange = ({ width, height }) => {
-   *   if (width != null) {
-   *     iframe.style.width = `${width}px`;
-   *   }
-   *   if (height != null) {
-   *     iframe.style.height = `${height}px`;
-   *   }
+   * bridge.onheightchange = ({ height }) => {
+   *   iframe.style.height = `${height}px`;
    * };
    * ```
    *
-   * @see {@link McpUiSizeChangedNotification} for the notification type
-   * @see {@link app.App.sendSizeChanged} for Host → Guest UI size notifications
+   * @see {@link McpUiHeightChangedNotification} for the notification type
+   * @see {@link app.App.sendHeightChanged} for the Guest UI method
    */
-  set onsizechange(
-    callback: (params: McpUiSizeChangedNotification["params"]) => void,
+  set onheightchange(
+    callback: (params: McpUiHeightChangedNotification["params"]) => void,
   ) {
-    this.setNotificationHandler(McpUiSizeChangedNotificationSchema, (n) =>
+    this.setNotificationHandler(McpUiHeightChangedNotificationSchema, (n) =>
       callback(n.params),
     );
   }
diff --git a/src/app.ts b/src/app.ts
@@ -33,7 +33,7 @@ import {
   McpUiResourceTeardownRequest,
   McpUiResourceTeardownRequestSchema,
   McpUiResourceTeardownResult,
-  McpUiSizeChangedNotification,
+  McpUiHeightChangedNotification,
   McpUiToolCancelledNotification,
   McpUiToolCancelledNotificationSchema,
   McpUiToolInputNotification,
@@ -94,10 +94,10 @@ export const RESOURCE_MIME_TYPE = "text/html;profile=mcp-app";
  */
 type AppOptions = ProtocolOptions & {
   /**
-   * Automatically report size changes to the host using ResizeObserver.
+   * Automatically report height changes to the host using ResizeObserver.
    *
    * When enabled, the App monitors `document.body` and `document.documentElement`
-   * for size changes and automatically sends `ui/notifications/size-changed`
+   * for size changes and automatically sends `ui/notifications/height-changed`
    * notifications to the host.
    *
    * @default true
@@ -840,37 +840,34 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
   }
 
   /**
-   * Notify the host of UI size changes.
+   * Notify the host of UI height change.
    *
-   * Apps can manually report size changes to help the host adjust the container.
+   * Apps can manually report height changes to help the host adjust the iframe.
    * If `autoResize` is enabled (default), this is called automatically.
    *
-   * @param params - New width and height in pixels
+   * @param params - New height in pixels
    *
-   * @example Manually notify host of size change
+   * @example Manually notify host of height change
    * ```typescript
-   * app.sendSizeChanged({
-   *   width: 400,
-   *   height: 600
-   * });
+   * app.sendHeightChanged({ height: 600 });
    * ```
    *
    * @returns Promise that resolves when the notification is sent
    *
-   * @see {@link McpUiSizeChangedNotification} for notification structure
+   * @see {@link McpUiHeightChangedNotification} for notification structure
    */
-  sendSizeChanged(params: McpUiSizeChangedNotification["params"]) {
-    return this.notification(<McpUiSizeChangedNotification>{
-      method: "ui/notifications/size-changed",
+  sendHeightChanged(params: McpUiHeightChangedNotification["params"]) {
+    return this.notification(<McpUiHeightChangedNotification>{
+      method: "ui/notifications/height-changed",
       params,
     });
   }
 
   /**
-   * Set up automatic size change notifications using ResizeObserver.
+   * Set up automatic height change notifications using ResizeObserver.
    *
    * Observes both `document.documentElement` and `document.body` for size changes
-   * and automatically sends `ui/notifications/size-changed` notifications to the host.
+   * and automatically sends `ui/notifications/height-changed` notifications to the host.
    * The notifications are debounced using requestAnimationFrame to avoid duplicates.
    *
    * Note: This method is automatically called by `connect()` if the `autoResize`
@@ -885,18 +882,17 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * await app.connect(transport);
    *
    * // Later, enable auto-resize manually
-   * const cleanup = app.setupSizeChangedNotifications();
+   * const cleanup = app.setupHeightChangedNotifications();
    *
    * // Clean up when done
    * cleanup();
    * ```
    */
-  setupSizeChangedNotifications() {
+  setupHeightChangedNotifications() {
     let scheduled = false;
-    let lastWidth = 0;
     let lastHeight = 0;
 
-    const sendBodySizeChanged = () => {
+    const sendBodyHeightChanged = () => {
       if (scheduled) {
         return;
       }
@@ -905,36 +901,27 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
         scheduled = false;
         const html = document.documentElement;
 
-        // Measure actual content size by temporarily setting html to fit-content.
+        // Measure actual content height by temporarily setting html to fit-content.
         // This shrinks html to fit body (including body margins), giving us the
-        // true minimum size needed by the content.
-        const originalWidth = html.style.width;
+        // true minimum height needed by the content.
         const originalHeight = html.style.height;
-        html.style.width = "fit-content";
         html.style.height = "fit-content";
         const rect = html.getBoundingClientRect();
-        html.style.width = originalWidth;
         html.style.height = originalHeight;
 
-        // Compensate for scrollbar width on Linux/Windows where scrollbars consume space.
-        // On systems with overlay scrollbars (macOS), this will be 0.
-        const scrollbarWidth = window.innerWidth - html.clientWidth;
-
-        const width = Math.ceil(rect.width + scrollbarWidth);
         const height = Math.ceil(rect.height);
 
-        // Only send if size actually changed (prevents feedback loops from style changes)
-        if (width !== lastWidth || height !== lastHeight) {
-          lastWidth = width;
+        // Only send if height actually changed (prevents feedback loops from style changes)
+        if (height !== lastHeight) {
           lastHeight = height;
-          this.sendSizeChanged({ width, height });
+          this.sendHeightChanged({ height });
         }
       });
     };
 
-    sendBodySizeChanged();
+    sendBodyHeightChanged();
 
-    const resizeObserver = new ResizeObserver(sendBodySizeChanged);
+    const resizeObserver = new ResizeObserver(sendBodyHeightChanged);
     // Observe both html and body to catch all size changes
     resizeObserver.observe(document.documentElement);
     resizeObserver.observe(document.body);
@@ -950,7 +937,7 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * 2. Sends `ui/initialize` request with app info and capabilities
    * 3. Receives host capabilities and context in response
    * 4. Sends `ui/notifications/initialized` notification
-   * 5. Sets up auto-resize using {@link setupSizeChangedNotifications} if enabled (default)
+   * 5. Sets up auto-resize using {@link setupHeightChangedNotifications} if enabled (default)
    *
    * If initialization fails, the connection is automatically closed and an error
    * is thrown.
@@ -1012,7 +999,7 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
       });
 
       if (this.options?.autoResize) {
-        this.setupSizeChangedNotifications();
+        this.setupHeightChangedNotifications();
       }
     } catch (error) {
       // Disconnect if initialization fails.
diff --git a/src/generated/schema.json b/src/generated/schema.json
@@ -46,6 +46,29 @@
         }
       ]
     },
+    "McpUiHeightChangedNotification": {
+      "$schema": "https://json-schema.org/draft/2020-12/schema",
+      "type": "object",
+      "properties": {
+        "method": {
+          "type": "string",
+          "const": "ui/notifications/height-changed"
+        },
+        "params": {
+          "type": "object",
+          "properties": {
+            "height": {
+              "description": "New height in pixels.",
+              "type": "number"
+            }
+          },
+          "required": ["height"],
+          "additionalProperties": false
+        }
+      },
+      "required": ["method", "params"],
+      "additionalProperties": false
+    },
     "McpUiHostCapabilities": {
       "$schema": "https://json-schema.org/draft/2020-12/schema",
       "type": "object",
@@ -1632,32 +1655,6 @@
       "required": ["method", "params"],
       "additionalProperties": false
     },
-    "McpUiSizeChangedNotification": {
-      "$schema": "https://json-schema.org/draft/2020-12/schema",
-      "type": "object",
-      "properties": {
-        "method": {
-          "type": "string",
-          "const": "ui/notifications/size-changed"
-        },
-        "params": {
-          "type": "object",
-          "properties": {
-            "width": {
-              "description": "New width in pixels.",
-              "type": "number"
-            },
-            "height": {
-              "description": "New height in pixels.",
-              "type": "number"
-            }
-          },
-          "additionalProperties": false
-        }
-      },
-      "required": ["method", "params"],
-      "additionalProperties": false
-    },
     "McpUiTheme": {
       "$schema": "https://json-schema.org/draft/2020-12/schema",
       "description": "Color theme preference for the host environment.",
diff --git a/src/generated/schema.test.ts b/src/generated/schema.test.ts
@@ -39,8 +39,8 @@ export type McpUiSandboxResourceReadyNotificationSchemaInferredType = z.infer<
   typeof generated.McpUiSandboxResourceReadyNotificationSchema
 >;
 
-export type McpUiSizeChangedNotificationSchemaInferredType = z.infer<
-  typeof generated.McpUiSizeChangedNotificationSchema
+export type McpUiHeightChangedNotificationSchemaInferredType = z.infer<
+  typeof generated.McpUiHeightChangedNotificationSchema
 >;
 
 export type McpUiToolInputNotificationSchemaInferredType = z.infer<
@@ -137,11 +137,11 @@ expectType<spec.McpUiSandboxResourceReadyNotification>(
 expectType<McpUiSandboxResourceReadyNotificationSchemaInferredType>(
   {} as spec.McpUiSandboxResourceReadyNotification,
 );
-expectType<spec.McpUiSizeChangedNotification>(
-  {} as McpUiSizeChangedNotificationSchemaInferredType,
+expectType<spec.McpUiHeightChangedNotification>(
+  {} as McpUiHeightChangedNotificationSchemaInferredType,
 );
-expectType<McpUiSizeChangedNotificationSchemaInferredType>(
-  {} as spec.McpUiSizeChangedNotification,
+expectType<McpUiHeightChangedNotificationSchemaInferredType>(
+  {} as spec.McpUiHeightChangedNotification,
 );
 expectType<spec.McpUiToolInputNotification>(
   {} as McpUiToolInputNotificationSchemaInferredType,
diff --git a/src/generated/schema.ts b/src/generated/schema.ts
@@ -109,16 +109,15 @@ export const McpUiSandboxResourceReadyNotificationSchema = z.object({
 });
 
 /**
- * @description Notification of UI size changes (bidirectional: Guest <-> Host).
- * @see {@link app.App.sendSizeChanged} for the method to send this from Guest UI
+ * @description Notification of UI height change (Guest -> Host).
+ * Sent when the Guest UI's content height changes, allowing the host to resize the iframe.
+ * @see {@link app.App.sendHeightChanged} for the method to send this from Guest UI
  */
-export const McpUiSizeChangedNotificationSchema = z.object({
-  method: z.literal("ui/notifications/size-changed"),
+export const McpUiHeightChangedNotificationSchema = z.object({
+  method: z.literal("ui/notifications/height-changed"),
   params: z.object({
-    /** @description New width in pixels. */
-    width: z.number().optional().describe("New width in pixels."),
     /** @description New height in pixels. */
-    height: z.number().optional().describe("New height in pixels."),
+    height: z.number().describe("New height in pixels."),
   }),
 });
 
diff --git a/src/react/useAutoResize.ts b/src/react/useAutoResize.ts
diff --git a/src/spec.types.ts b/src/spec.types.ts
diff --git a/src/types.ts b/src/types.ts
