Offer fullscreen in the panel, and hold images in inserted HTML

Where the host offers fullscreen, an Expand button asks for it; the page
fills the room it is given. Images in markup the app inserts as HTML
text now wait for their files instead of requesting the panel host's
site, which ended the mic.svg and Cesium credit 404s.

src/app/globePanelRuntime.js

@@ -13,6 +13,7 @@
 export function panelRuntime(config) {
   const status = document.getElementById('status');
   const open = document.getElementById('open');
+  const expand = document.getElementById('expand');
   const say = (text) => {
     if (status.isConnected) status.textContent = text;
   };
@@ -340,6 +341,40 @@ export function panelRuntime(config) {
     };
     window.Worker.prototype = NativeWorker.prototype;
 
+    // Markup the app adds as HTML text would request its images from this
+    // page's site at once; hold their addresses until the files are here.
+    const htmlWithHeldImages = (html) =>
+      String(html).replace(
+        /(<(?:img|source)\b[^>]*?\s)src=(["'])([^"']*)\2/gi,
+        (tag, before, quote, value) =>
+          appPath(value) === null
+            ? tag
+            : `${before}data-gev-src=${quote}${value}${quote}`,
+      );
+    const fillHeldImages = (root) => {
+      for (const element of root?.querySelectorAll?.('[data-gev-src]') ?? []) {
+        const path = appPath(element.getAttribute('data-gev-src'));
+        element.removeAttribute('data-gev-src');
+        appObjectUrl(path).then((url) => element.setAttribute('src', url));
+      }
+    };
+    const innerHtml = Object.getOwnPropertyDescriptor(
+      Element.prototype,
+      'innerHTML',
+    );
+    Object.defineProperty(Element.prototype, 'innerHTML', {
+      ...innerHtml,
+      set(value) {
+        innerHtml.set.call(this, htmlWithHeldImages(value));
+        fillHeldImages(this);
+      },
+    });
+    const insertHtml = Element.prototype.insertAdjacentHTML;
+    Element.prototype.insertAdjacentHTML = function (position, html) {
+      insertHtml.call(this, position, htmlWithHeldImages(html));
+      fillHeldImages(this.parentNode ?? this);
+    };
+
     // Markup and styles the app adds later name app files too.
     new MutationObserver((records) => {
       for (const record of records)
@@ -545,6 +580,26 @@ export function panelRuntime(config) {
       return;
     }
     if (message.method === 'ui/notifications/tool-result') show(message.params);
+    if (message.method === 'ui/notifications/host-context-changed')
+      showDisplayMode(message.params);
+  });
+
+  // Fullscreen, where the host offers it: the globe gets the room, and some
+  // hosts only keep a panel on screen up to date outside the conversation.
+  let displayMode = 'inline';
+  const showDisplayMode = (context) => {
+    if (context?.displayMode) displayMode = context.displayMode;
+    if (context?.availableDisplayModes)
+      expand.hidden = !context.availableDisplayModes.includes('fullscreen');
+    expand.textContent = displayMode === 'fullscreen' ? 'Collapse' : 'Expand';
+  };
+  expand.addEventListener('click', () => {
+    request('ui/request-display-mode', {
+      mode: displayMode === 'fullscreen' ? 'inline' : 'fullscreen',
+    }).then(
+      (result) => showDisplayMode({ displayMode: result?.mode }),
+      () => {},
+    );
   });
 
   open.addEventListener('click', () => {
@@ -565,7 +620,8 @@ export function panelRuntime(config) {
     },
     protocolVersion: config.protocolVersion,
   }).then(
-    () => {
+    (result) => {
+      showDisplayMode(result?.hostContext);
       send({ method: 'ui/notifications/initialized' });
       notify('ui/notifications/size-changed', {
         width: document.body.clientWidth,

src/tools/globePanel.js

@@ -75,18 +75,22 @@ function panelHtml(runtime) {
 <meta charset="utf-8">
 <title>God's Eye View</title>
 <style>
-  html, body { margin: 0; height: ${PANEL_HEIGHT_PX}px; background: #05070a; color: #b8c4cc;
-    font: 13px/1.4 system-ui, sans-serif; overflow: hidden; }
+  html, body { margin: 0; height: 100%; min-height: ${PANEL_HEIGHT_PX}px; background: #05070a;
+    color: #b8c4cc; font: 13px/1.4 system-ui, sans-serif; overflow: hidden; }
   #status { position: absolute; inset: 0; z-index: 10000; display: flex; align-items: center;
     justify-content: center; padding: 0 24px; text-align: center; }
-  #open { position: absolute; right: 10px; top: 10px; z-index: 10001; padding: 6px 10px; border: 1px solid #3a4a55;
-    border-radius: 6px; background: rgba(5, 7, 10, 0.75); color: #dfe8ee; font: inherit; cursor: pointer; }
-  #open[hidden] { display: none; }
+  #actions { position: absolute; right: 10px; top: 10px; z-index: 10001; display: flex; gap: 6px; }
+  #actions button { padding: 6px 10px; border: 1px solid #3a4a55; border-radius: 6px;
+    background: rgba(5, 7, 10, 0.75); color: #dfe8ee; font: inherit; cursor: pointer; }
+  #actions button[hidden] { display: none; }
 </style>
 </head>
 <body>
 <div id="status">Waiting for a view…</div>
+<div id="actions">
+<button id="expand" type="button" hidden>Expand</button>
 <button id="open" type="button" hidden>Open in God's Eye View</button>
+</div>
 <script>${script}</script>
 </body>
 </html>

src/tools/globePanel.test.mjs

@@ -31,6 +31,9 @@ test('the globe panel is an MCP Apps resource that loads the app through its ser
   // The MCP Apps SDK's initialize parameters; hosts reject anything else.
   assert.match(resource.text, /appInfo: \{/);
   assert.doesNotMatch(resource.text, /clientInfo/);
+  // Fullscreen where the host offers it.
+  assert.match(resource.text, /'ui\/request-display-mode'/);
+  assert.match(resource.text, /<button id="expand" type="button" hidden>/);
   assert.doesNotMatch(resource.text, /<iframe|createElement\('base'\)/);
   const script = resource.text.match(/<script>([\s\S]*)<\/script>/)[1];
   assert.doesNotThrow(() => new Function(script));