pmx-canvas 0.4.0 → 0.4.2

package/src/client/nodes/ExtAppFrame.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../shared/ax-surface-protocol.js';
 import { extAppToolResultsMatch } from '../../shared/ext-app-tool-result.js';
 import { DEFAULT_EXT_APP_SANDBOX } from '../../shared/surface.js';
+import { canvasThemeScheme } from '../../shared/themes.js';
 import {
   canvasTheme,
   collapseExpandedNode,
@@ -520,7 +521,8 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     [],
   );
 
-  const toMcpTheme = (theme: string): McpUiTheme => (theme === 'light' ? 'light' : 'dark');
+  // MCP apps only understand dark/light — collapse named themes to their scheme.
+  const toMcpTheme = (theme: string): McpUiTheme => canvasThemeScheme(theme);
   const isExpanded = expanded || expandedNodeId.value === nodeId;
 
   latestToolInputRef.current = toolInput;
@@ -579,6 +581,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     if (!iframe) return;
     let disposed = false;
     let fallbackTimer: ReturnType<typeof setTimeout> | null = null;
+    let repaintNudgeTimer: ReturnType<typeof setTimeout> | null = null;
     let hostContextResizeObserver: ResizeObserver | null = null;
     let hostContextRaf: number | null = null;
     let readyNudgeRaf: number | null = null;
@@ -654,6 +657,32 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         });
       };
 
+      // Finding N best-effort: WKWebView can keep compositing a stale (black)
+      // texture for the doubly-nested app iframe even after a genuine settled
+      // boot — the user-proven unstick is enlarge+close, i.e. a layout-size
+      // change. Mimic the cheap half of that after the scene draw: bounce the
+      // iframe's height by 1px for two frames so WebKit must re-rasterize the
+      // layer. No reload, no app state loss; a healthy frame repaints
+      // identically. Scheduled past the remount queue's settle pause so it
+      // lands after the app has actually drawn.
+      const scheduleWebkitRepaintNudge = () => {
+        if (!isWebKitOnlyHost(navigator.userAgent)) return;
+        if (repaintNudgeTimer) clearTimeout(repaintNudgeTimer);
+        repaintNudgeTimer = setTimeout(() => {
+          repaintNudgeTimer = null;
+          const frame = iframeRef.current;
+          if (disposed || !frame) return;
+          const previous = frame.style.height;
+          frame.style.height = 'calc(100% - 1px)';
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              frame.style.height = previous;
+              extAppRecoveryLog(nodeId, 'repaint-nudge');
+            });
+          });
+        }, WEBKIT_REMOUNT_SETTLE_MS + 200);
+      };
+
       const bridge = new AppBridge(
         null,
         { name: 'PMX Canvas', version: '1.0.0' },
@@ -805,6 +834,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
             extAppRecoveryLog(nodeId, 'settled');
             for (const waiter of bootWaitersRef.current.splice(0)) waiter();
             nudgeHostContextAfterLayout();
+            scheduleWebkitRepaintNudge();
           })
           .catch((err) => {
             const msg = err instanceof Error ? err.message : String(err);
@@ -831,6 +861,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
             setStatus(bootstrapToolResult ? 'done' : 'ready');
             setError(null);
             nudgeHostContextAfterLayout();
+            scheduleWebkitRepaintNudge();
           })
           .catch((err) => {
             const msg = err instanceof Error ? err.message : String(err);
@@ -878,6 +909,10 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     return () => {
       disposed = true;
       clearFallbackTimer();
+      if (repaintNudgeTimer) {
+        clearTimeout(repaintNudgeTimer);
+        repaintNudgeTimer = null;
+      }
       hostContextResizeObserver?.disconnect();
       hostContextResizeObserver = null;
       if (hostContextRaf !== null) {

package/src/client/nodes/HtmlNode.tsx

@@ -5,6 +5,7 @@ import type { CanvasNodeState } from '../types';
 import { nodeSurfaceUrl, surfaceContentHash } from './surface-url';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
+import { useSurfaceFrame } from './use-surface-frame';
 
 export function shouldShowPresentationControls(node: CanvasNodeState): boolean {
   return node.type === 'html' && node.data.presentation === true;
@@ -60,6 +61,9 @@ export function HtmlNode({
     [html, presentation, presentationExitToken, themeToken, v, node.id, axToken, frameToken],
   );
 
+  // src vs fetch()+srcdoc, decided by the boot-wide embed probe (Amp portals).
+  const surfaceFrame = useSurfaceFrame(surfaceSrc);
+
   // Grow the node to fit the surface's reported content height (grow-only, gated).
   // Never in the expanded overlay — there the surface fills the large overlay frame.
   useIframeContentHeight(node, iframeRef, expanded ? '' : frameToken);
@@ -149,7 +153,7 @@ export function HtmlNode({
       class={presentation ? 'html-node-frame html-node-frame-presentation' : 'html-node-frame'}
       title={typeof node.data.title === 'string' ? node.data.title : 'HTML node'}
       sandbox="allow-scripts"
-      src={surfaceSrc}
+      {...surfaceFrame}
       tabIndex={autoFocus ? 0 : undefined}
       onLoad={handleFrameLoad}
       style={{

package/src/client/nodes/McpAppNode.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useMemo, useRef } from 'preact/hooks';
 import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
+import { canvasThemeScheme } from '../../shared/themes.js';
 import type { CanvasNodeState } from '../types';
 import { axSurfaceState, canvasTheme } from '../state/canvas-store';
 import { shouldContentFitIframeNode } from '../canvas/auto-fit';
 import { ExtAppFrame } from './ExtAppFrame';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
+import { useSurfaceFrame } from './use-surface-frame';
 
 function withViewerParams(
   url: string,
@@ -19,7 +21,9 @@ function withViewerParams(
   if (!url) return url;
   try {
     const resolved = new URL(url, window.location.origin);
-    resolved.searchParams.set('theme', canvasTheme.value === 'light' ? 'light' : 'dark');
+    // The json-render viewer + artifacts understand dark/light — collapse named
+    // themes (sepia → light, midnight/arctic/ember/forest → dark) to a scheme.
+    resolved.searchParams.set('theme', canvasThemeScheme(canvasTheme.value));
     if (expanded) resolved.searchParams.set('display', 'expanded');
     // Streaming json-render nodes bump specVersion as patches accumulate; including
     // it in the src reloads the iframe so it re-reads the latest accumulated spec.
@@ -117,6 +121,9 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
     frameToken || undefined,
     contentFit,
   );
+  // src vs fetch()+srcdoc, decided by the boot-wide embed probe (Amp portals).
+  // External viewer URLs always stay src — the hook passes them through.
+  const surfaceFrame = useSurfaceFrame(url);
   const sourceServer = (node.data.sourceServer as string) || '';
   const hostMode = (node.data.hostMode as string) || 'hosted';
   const fallbackReason = node.data.fallbackReason as string | undefined;
@@ -174,7 +181,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
           app/host RPC and broader capabilities. */}
       <iframe
         ref={iframeRef}
-        src={url}
+        {...surfaceFrame}
         class="mcp-app-frame"
         sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
         allow="clipboard-read; clipboard-write"

package/src/client/nodes/iframe-document-url.ts

@@ -1,4 +1,7 @@
-import { useEffect, useMemo, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { workbenchConnectionEpoch } from '../state/canvas-store';
+import { iframeMode } from '../state/iframe-mode';
+import { surfaceContentHash } from './surface-url';
 
 interface FrameDocumentCreateResponse {
   ok: boolean;
@@ -37,13 +40,20 @@ export async function createIframeDocumentUrl(html: string, sandbox: string): Pr
 export function useIframeDocument(
   html: string,
   sandbox: string,
-): { attributes: { src?: string }; ready: boolean; key: string } {
+): { attributes: { src?: string; srcdoc?: string }; ready: boolean; key: string } {
+  // Boot-wide embed probe (state/iframe-mode.ts): srcdoc mode means src-URL
+  // iframes are blocked here (nested-iframe hosts like Amp orb portals), so the
+  // frame-documents round-trip would produce a URL the browser refuses to load.
+  const mode = iframeMode.value;
   const [src, setSrc] = useState<string | null>(null);
+  const [remintNonce, setRemintNonce] = useState(0);
+  const mintEpochRef = useRef(0);
 
   useEffect(() => {
     setSrc(null);
-    if (!html) return;
+    if (!html || mode !== 'src') return;
     let cancelled = false;
+    mintEpochRef.current = workbenchConnectionEpoch.value;
     void createIframeDocumentUrl(html, sandbox)
       .then((url) => {
         if (!cancelled) setSrc(url);
@@ -54,14 +64,57 @@ export function useIframeDocument(
     return () => {
       cancelled = true;
     };
-  }, [html, sandbox]);
+  }, [html, sandbox, mode, remintNonce]);
 
-  return useMemo(
-    () => ({
+  // Finding S: frame documents live in server memory, so a daemon restart turns
+  // this mount's URL into a 404 while the panel keeps showing the dead frame.
+  // Every reconnect frame (SSE reconnect or poll snapshot reset) revalidates the
+  // minted URL and re-mints a fresh document when the server no longer has it —
+  // no full workbench reload required.
+  const epoch = workbenchConnectionEpoch.value;
+  useEffect(() => {
+    if (mode !== 'src' || epoch === mintEpochRef.current) return;
+    if (!src) {
+      // A previous mint failed outright (e.g. the daemon flapped down between
+      // the HEAD 404 and the re-mint POST). A fresh connection epoch means the
+      // server is reachable again — retry the mint instead of stranding the
+      // tile until a manual reload.
+      setRemintNonce((n) => n + 1);
+      return;
+    }
+    let cancelled = false;
+    void fetch(src, { method: 'HEAD' })
+      .then((res) => {
+        if (cancelled) return;
+        if (res.ok) {
+          mintEpochRef.current = epoch;
+          return;
+        }
+        setRemintNonce((n) => n + 1);
+      })
+      .catch(() => {
+        // Transient network failure — the next reconnect epoch retries.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [epoch, src, mode]);
+
+  return useMemo(() => {
+    if (mode === 'srcdoc' && html) {
+      // The document already lives client-side, so serve it inline. Consumers
+      // always render the iframe `sandbox` attribute, which supplies the
+      // sandboxing the frame-document CSP header would have.
+      return {
+        attributes: { srcdoc: html },
+        ready: true,
+        key: `srcdoc-${surfaceContentHash(html)}`,
+      };
+    }
+    return {
       attributes: src ? { src } : {},
       ready: Boolean(src),
       key: src ?? '',
-    }),
-    [src],
-  );
+    };
+  }, [src, mode, html]);
 }

package/src/client/nodes/use-surface-frame.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'preact/hooks';
+import { iframeMode } from '../state/iframe-mode';
+
+function isSameOriginUrl(url: string): boolean {
+  try {
+    return new URL(url, window.location.origin).origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Attributes for a surface iframe, honoring the boot-wide iframe mode
+ * (state/iframe-mode.ts): `src` by default, fetch() + `srcdoc` when src-URL
+ * iframes are blocked by the embedding context (nested-iframe hosts like Amp
+ * orb portals). Cross-origin URLs always stay `src` — they cannot be fetched
+ * from here. While the probe is pending, same-origin frames stay empty rather
+ * than loading a src that may show the broken placeholder; a failed srcdoc
+ * fetch falls back to `src` (no worse than before).
+ */
+export function useSurfaceFrame(url: string): { src?: string; srcdoc?: string } {
+  const mode = iframeMode.value;
+  const [doc, setDoc] = useState<{ url: string; html: string } | null>(null);
+  const sameOrigin = Boolean(url) && isSameOriginUrl(url);
+  const wantsSrcdoc = mode === 'srcdoc' && sameOrigin;
+
+  useEffect(() => {
+    if (!wantsSrcdoc) return;
+    let cancelled = false;
+    void fetch(url, { credentials: 'same-origin' })
+      .then((res) => (res.ok ? res.text() : Promise.reject(new Error(`HTTP ${res.status}`))))
+      .then((html) => {
+        if (!cancelled) setDoc({ url, html });
+      })
+      .catch((error) => {
+        console.error('[surface-frame] srcdoc fetch failed, falling back to src:', url, error);
+        // Empty html marks the src fallback below.
+        if (!cancelled) setDoc({ url, html: '' });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [wantsSrcdoc, url]);
+
+  if (!url) return {};
+  if (!wantsSrcdoc) {
+    return mode === null && sameOrigin ? {} : { src: url };
+  }
+  // Keep the previous document visible while a newer URL is being fetched —
+  // same UX as src mode, where the old document stays until the new one loads.
+  if (doc) return doc.html ? { srcdoc: doc.html } : { src: doc.url };
+  return {};
+}

package/src/client/state/canvas-store.ts

@@ -22,6 +22,11 @@ export const edges = signal<Map<string, CanvasEdge>>(new Map());
 export const annotations = signal<Map<string, CanvasAnnotation>>(new Map());
 export const activeNodeId = signal<string | null>(null);
 export const connectionStatus = signal<ConnectionStatus>('connecting');
+// Bumped on every processed `connected` frame (SSE reconnects and poll snapshot
+// resets alike). Consumers holding server-minted URLs revalidate on change —
+// a server restart invalidates in-memory resources like frame documents
+// (Finding S) while the browser keeps the stale URLs alive.
+export const workbenchConnectionEpoch = signal<number>(0);
 export const sessionId = signal<string>('');
 export const traceEnabled = signal<boolean>(false);
 export const canvasTheme = signal<string>('dark');

package/src/client/state/iframe-mode.ts

@@ -0,0 +1,118 @@
+/**
+ * Nested-iframe embedding detection (Amp orb portals).
+ *
+ * When the canvas page itself runs inside an iframe (ampcode.com embeds the
+ * portal URL on *.onamp.dev), Chrome refuses to load child iframes from `src`
+ * URLs — even same-origin relative ones — leaving every iframe-backed node a
+ * gray "refused to connect" placeholder. Inline documents (`srcdoc`) still
+ * render. This module probes the real behavior once per boot: a hidden 1px
+ * iframe navigates to the tiny /api/canvas/iframe-probe document; if `load`
+ * fires the host is normal (`src` mode), otherwise same-origin surfaces fall
+ * back to fetch() + `srcdoc` (see nodes/use-surface-frame.ts and
+ * nodes/iframe-document-url.ts).
+ *
+ * `src` stays the default everywhere it works: URL-loaded surfaces keep real
+ * document URLs, and the frame-document transport exists precisely because
+ * attribute-sized srcdoc documents were the worse default (v0.1.24). srcdoc is
+ * the blocked-embed fallback, not the new normal.
+ *
+ * Force a mode with `?iframe-mode=srcdoc` (or `=src`) for debugging.
+ */
+import { signal } from '@preact/signals';
+
+export type IframeMode = 'src' | 'srcdoc';
+
+export const IFRAME_PROBE_PATH = '/api/canvas/iframe-probe';
+const PROBE_TIMEOUT_MS = 3000;
+
+/** Boot-wide iframe transport mode; null until the probe (or override) resolves. */
+export const iframeMode = signal<IframeMode | null>(null);
+
+export function forcedIframeMode(): IframeMode | null {
+  const value = new URLSearchParams(window.location.search).get('iframe-mode');
+  return value === 'srcdoc' || value === 'src' ? value : null;
+}
+
+/**
+ * Probe whether `src`-URL iframes load in this embedding context. Resolves true
+ * when the hidden probe iframe fires `load`; false on error or timeout. The
+ * blocked-portal case shows its placeholder without reliably firing either
+ * event, so the timeout is the real signal there — and a false negative is
+ * safe, because srcdoc rendering works in normal hosts too.
+ */
+export function probeSrcIframes(timeoutMs = PROBE_TIMEOUT_MS): Promise<boolean> {
+  return new Promise((resolve) => {
+    const test = document.createElement('iframe');
+    test.setAttribute('data-pmx-iframe-probe', '');
+    test.style.cssText = 'position:fixed;width:1px;height:1px;left:-9999px;border:none';
+    test.setAttribute('sandbox', 'allow-scripts');
+    const done = (ok: boolean) => {
+      window.clearTimeout(timer);
+      test.remove();
+      resolve(ok);
+    };
+    const timer = window.setTimeout(() => done(false), timeoutMs);
+    test.addEventListener('load', () => done(true));
+    test.addEventListener('error', () => done(false));
+    test.src = IFRAME_PROBE_PATH;
+    (document.body ?? document.documentElement).appendChild(test);
+  });
+}
+
+let pending: Promise<IframeMode> | null = null;
+
+function isEmbeddedDocument(): boolean {
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Amp orb services run with AMP_ORB=1 and the server stamps that into the page
+ * as window.__PMX_AMP_ORB (see canvasSpaHtml). The orb portal's nested-iframe
+ * embed blocks src-URL child iframes, but the probe is unreliable there — a
+ * tiny probe iframe sometimes loads even though node-sized ones will not — so
+ * a known orb host must skip the probe and go straight to srcdoc.
+ */
+function isAmpOrbHost(): boolean {
+  return (window as Window & { __PMX_AMP_ORB?: unknown }).__PMX_AMP_ORB === true;
+}
+
+/**
+ * Resolve the boot-wide iframe mode once; all surface hooks share the result.
+ * The blocked-src condition only exists when the canvas page itself runs
+ * inside an iframe, so top-level documents resolve `src` synchronously — the
+ * normal path pays zero probe latency before surfaces mount. Only embedded
+ * documents run the probe (`embedded` is overridable for tests).
+ */
+export function resolveIframeMode(opts: { embedded?: boolean; ampOrb?: boolean } = {}): Promise<IframeMode> {
+  if (iframeMode.value) return Promise.resolve(iframeMode.value);
+  if (pending) return pending;
+  const forced = forcedIframeMode();
+  if (forced) {
+    iframeMode.value = forced;
+    return Promise.resolve(forced);
+  }
+  if (!(opts.embedded ?? isEmbeddedDocument())) {
+    iframeMode.value = 'src';
+    return Promise.resolve('src');
+  }
+  if (opts.ampOrb ?? isAmpOrbHost()) {
+    iframeMode.value = 'srcdoc';
+    return Promise.resolve('srcdoc');
+  }
+  pending = probeSrcIframes().then((srcWorks) => {
+    const mode: IframeMode = srcWorks ? 'src' : 'srcdoc';
+    iframeMode.value = mode;
+    return mode;
+  });
+  return pending;
+}
+
+/** Test hook: clear the memoized probe so each test starts unresolved. */
+export function resetIframeModeForTests(): void {
+  iframeMode.value = null;
+  pending = null;
+}

package/src/client/state/sse-bridge.ts

@@ -23,6 +23,7 @@ import {
   sessionId,
   traceEnabled,
   updateNodeData,
+  workbenchConnectionEpoch,
 } from './canvas-store';
 import { fetchAxSurfaceState } from './intent-bridge';
 import { DEFAULT_POSITIONS, makeNodeState } from './node-factory';
@@ -30,6 +31,7 @@ import { invalidateTokenCache } from '../theme/tokens';
 import { resetAttentionBridge, syncAttentionFromSse } from './attention-bridge';
 import { dissolveIntent, resetIntents, settleIntent, upsertIntent } from './intent-store';
 import type { PmxAxIntent } from '../../shared/ax-intent.js';
+import { isCanvasTheme } from '../../shared/themes.js';
 
 let eventSource: EventSource | null = null;
 let savedLayout: Map<string, Partial<CanvasNodeState>> | null = null;
@@ -274,8 +276,10 @@ function ensureLedgerNode(summary: Record<string, unknown>): void {
 }
 
 function applyCanvasTheme(theme: string): void {
-  const valid = theme === 'dark' || theme === 'light' || theme === 'high-contrast';
-  if (!valid) return;
+  // Registry-driven: this is the ONLY path a server-side theme reaches the
+  // browser (connected snapshot + theme-changed events) — a hardcoded subset
+  // here silently drops themes on reload and breaks cross-tab sync.
+  if (!isCanvasTheme(theme)) return;
   document.documentElement.setAttribute('data-theme', theme);
   invalidateTokenCache();
   if (canvasTheme.value !== theme) canvasTheme.value = theme;
@@ -393,6 +397,8 @@ function parseCanvasAnnotation(raw: Record<string, unknown>): CanvasAnnotation |
 function handleConnected(data: Record<string, unknown>): void {
   sessionId.value = (data.sessionId as string) || '';
   connectionStatus.value = 'connected';
+  // Reconnect marker for holders of server-minted URLs (Finding S).
+  workbenchConnectionEpoch.value += 1;
   if (typeof data.theme === 'string') {
     applyCanvasTheme(data.theme);
   }