More symmetrie with basic host

halllo · halllo · commit 2dd3ba830e68 · 2026-04-13T22:39:26.000+02:00
diff --git a/examples/dotnet-angular-host/frontend/public/sandbox.html b/examples/dotnet-angular-host/frontend/public/sandbox.html
@@ -1,3 +1,5 @@
+<!-- Copy of examples/basic-host/sandbox.html -->
+ 
 <!doctype html>
 <html>
   <head>
diff --git a/examples/dotnet-angular-host/frontend/src/app/components/iframe-panel/iframe-panel.html b/examples/dotnet-angular-host/frontend/src/app/components/iframe-panel/iframe-panel.html
diff --git a/examples/dotnet-angular-host/frontend/src/app/components/iframe-panel/iframe-panel.scss b/examples/dotnet-angular-host/frontend/src/app/components/iframe-panel/iframe-panel.scss
@@ -3,7 +3,7 @@
 
   iframe {
     width: 100%;
-    height: 100px;
+    height: 200px;
     box-sizing: border-box;
     border: 3px dashed var(--color-border);
     border-radius: 4px;
diff --git a/examples/dotnet-angular-host/frontend/src/app/components/iframe-panel/iframe-panel.ts b/examples/dotnet-angular-host/frontend/src/app/components/iframe-panel/iframe-panel.ts
@@ -24,11 +24,11 @@ import { CollapsiblePanel } from '../collapsible-panel/collapsible-panel';
 
 @Component({
   selector: 'app-iframe-panel',
-  templateUrl: './app-iframe-panel.html',
-  styleUrl: './app-iframe-panel.scss',
+  templateUrl: './iframe-panel.html',
+  styleUrl: './iframe-panel.scss',
   imports: [CollapsiblePanel],
 })
-export class AppIframePanel implements AfterViewInit {
+export class IframePanel implements AfterViewInit {
   toolCallInfo = input.required<Required<ToolCallInfo>>();
   isDestroying = input(false);
 
diff --git a/examples/dotnet-angular-host/frontend/src/app/components/tool-call-info-panel/tool-call-info-panel.ts b/examples/dotnet-angular-host/frontend/src/app/components/tool-call-info-panel/tool-call-info-panel.ts
@@ -1,7 +1,7 @@
 import { Component, computed, input, output, signal } from '@angular/core';
 import { hasAppHtml, type ToolCallInfo } from '../../implementation';
 import { CollapsiblePanel } from '../collapsible-panel/collapsible-panel';
-import { AppIframePanel } from '../app-iframe-panel/app-iframe-panel';
+import { IframePanel } from '../iframe-panel/iframe-panel';
 import { ToolResultPanel } from '../tool-result-panel/tool-result-panel';
 
 export type ToolCallEntry = ToolCallInfo & { id: number };
@@ -10,7 +10,7 @@ export type ToolCallEntry = ToolCallInfo & { id: number };
   selector: 'app-tool-call-info-panel',
   templateUrl: './tool-call-info-panel.html',
   styleUrl: './tool-call-info-panel.scss',
-  imports: [CollapsiblePanel, AppIframePanel, ToolResultPanel],
+  imports: [CollapsiblePanel, IframePanel, ToolResultPanel],
 })
 export class ToolCallInfoPanel {
   toolCallInfo = input.required<ToolCallEntry>();
diff --git a/examples/dotnet-angular-host/frontend/src/app/host-styles.ts b/examples/dotnet-angular-host/frontend/src/app/host-styles.ts
@@ -1,5 +1,7 @@
+// Copy of examples/basic-host/src/host-styles.ts
+
 /**
- * MCP style variables for the dotnet-angular-host example.
+ * MCP style variables for the basic-host example.
  * These are passed to apps via hostContext.styles.variables.
  */
 import type { McpUiStyles } from '@modelcontextprotocol/ext-apps';
diff --git a/examples/dotnet-angular-host/frontend/src/app/implementation.ts b/examples/dotnet-angular-host/frontend/src/app/implementation.ts
@@ -1,3 +1,5 @@
+// Copy of examples/basic-host/src/implementation.ts
+
 import {
   RESOURCE_MIME_TYPE,
   getToolUiResourceUri,
@@ -318,7 +320,10 @@ export function newAppBridge(
 
   // Per spec, the host SHOULD notify the view when container dimensions
   // change. A ResizeObserver on the iframe covers window resize, layout
-  // shifts, and the inline↔fullscreen panel toggle.
+  // shifts, and the inline↔fullscreen panel toggle (which React applies
+  // a tick after onrequestdisplaymode returns — sending containerDimensions
+  // alongside displayMode there would race the layout). Height stays
+  // flexible (maxHeight) so the view can keep driving it via sendSizeChanged.
   const iframeResizeObserver = new ResizeObserver(([entry]) => {
     const width = Math.round(entry.contentRect.width);
     if (width > 0) {
@@ -366,16 +371,26 @@ export function newAppBridge(
   };
 
   appBridge.onsizechange = async ({ width, height }) => {
+    // The MCP App has requested a `width` and `height`, but if
+    // `box-sizing: border-box` is applied to the outer iframe element, then we
+    // must add border thickness to `width` and `height` to compute the actual
+    // necessary width and height (in order to prevent a resize feedback loop).
     const style = getComputedStyle(iframe);
     const isBorderBox = style.boxSizing === 'border-box';
 
+    // Animate the change for a smooth transition.
     const from: Keyframe = {};
     const to: Keyframe = {};
 
     if (width !== undefined) {
       if (isBorderBox) {
         width += parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
       }
+      // Use min-width instead of width to allow responsive growing.
+      // With auto-resize (the default), the app reports its minimum content
+      // width; we honor that as a floor but allow the iframe to expand when
+      // the host layout allows. And we use `min(..., 100%)` so that the iframe
+      // shrinks with its container.
       from['minWidth'] = `${iframe.offsetWidth}px`;
       iframe.style.minWidth = to['minWidth'] = `min(${width}px, 100%)`;
     }
@@ -394,7 +409,11 @@ export function newAppBridge(
   appBridge.onrequestdisplaymode = async (params) => {
     log.info('Display mode request from MCP App:', params);
     const newMode = params.mode === 'fullscreen' ? 'fullscreen' : 'inline';
-    appBridge.sendHostContextChange({ displayMode: newMode });
+    // Update host context and notify the app
+    appBridge.sendHostContextChange({
+      displayMode: newMode,
+    });
+    // Notify the host UI (via callback)
     callbacks?.onDisplayModeChange?.(newMode);
     return { mode: newMode };
   };
diff --git a/examples/dotnet-angular-host/frontend/src/app/theme.ts b/examples/dotnet-angular-host/frontend/src/app/theme.ts
@@ -1,5 +1,7 @@
+// Copy of examples/basic-host/src/theme.ts
+
 /**
- * Simple theme manager for the dotnet-angular-host example.
+ * Simple theme manager for the basic-host example.
  * Manages light/dark theme state and notifies listeners.
  */
 
diff --git a/examples/dotnet-angular-host/frontend/src/sandbox.ts b/examples/dotnet-angular-host/frontend/src/sandbox.ts
@@ -1,3 +1,5 @@
+// Copy of examples/basic-host/src/sandbox.ts
+
 import type {
   McpUiSandboxProxyReadyNotification,
   McpUiSandboxResourceReadyNotification,
@@ -45,7 +47,7 @@ try {
 // content. Per the specification, the Host and the Sandbox MUST have different
 // origins.
 const inner = document.createElement('iframe');
-inner.setAttribute('style', 'width:100%; height:100%; border:none;');
+inner.style = 'width:100%; height:100%; border:none;';
 inner.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
 // Note: allow attribute is set later when receiving sandbox-resource-ready notification
 // based on the permissions requested by the app
@@ -69,7 +71,7 @@ const PROXY_READY_NOTIFICATION: McpUiSandboxProxyReadyNotification['method'] =
 // intercepted here (not relayed) because the Sandbox uses it to configure and
 // load the inner iframe with the view HTML content.
 //
-// Security: CSP is enforced via HTTP headers on sandbox.html (set by the backend
+// Security: CSP is enforced via HTTP headers on sandbox.html (set by serve.ts
 // based on ?csp= query param). This is tamper-proof unlike meta tags.
 
 window.addEventListener('message', async (event) => {

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+<!-- Copy of examples/basic-host/sandbox.html -->`
	`2`	`+`
`1`	`3`	`<!doctype html>`
`2`	`4`	`<html>`
`3`	`5`	`<head>`