pmx-canvas 0.3.4 → 0.4.1

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,103 @@
+/**
+ * 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;
+  }
+}
+
+/**
+ * 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 } = {}): 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');
+  }
+  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/node-factory.ts

@@ -0,0 +1,72 @@
+import type { CanvasNodeState } from '../types';
+
+// ── Client node-creation defaults (plan-009 H5, client half) ──
+// Single source of truth for the frame (position/size/zIndex/flags) a NEW
+// client-created node gets when its creating event carries no explicit
+// geometry. Extracted from sse-bridge, which kept one `makeNode` helper plus
+// three inline node literals (ext-app open, prompt, response) duplicating
+// these defaults.
+//
+// Divergences found during extraction — documented, NOT silently unified:
+// - `canvas-store.ts` holds no node-creation defaults today. Human-created
+//   nodes go through `createNodeFromClient` (intent-bridge → POST
+//   /api/canvas/node) and get the SERVER's `defaultNodeSize`
+//   (src/server/operations/ops/nodes.ts), which differs from this table for
+//   most types (e.g. its fallback is 360x200). The server half of H5
+//   (`syncEventToCanvasState`, `ensureDefaultDockedNodes`) is deliberately
+//   deferred — do not "fix" that mismatch from this file.
+// - The server seeds `status-main`/`context-main` docked AND collapsed
+//   (`ensureDefaultDockedNodes` in src/server/server.ts); the SSE bridge
+//   creates the same ids expanded, with `context-main` undocked. Client
+//   behavior is preserved as-is.
+// - sse-bridge's prompt literal hardcoded `height: 400` beside a table entry
+//   of the same value; both now read the table (no rendering change).
+
+export const DEFAULT_POSITIONS: Record<CanvasNodeState['type'], { x: number; y: number; w: number; h: number }> &
+  Record<'prompt' | 'response', { x: number; y: number; w: number; h: number }> = {
+  status: { x: 40, y: 80, w: 300, h: 120 },
+  markdown: { x: 380, y: 80, w: 720, h: 600 },
+  context: { x: 1130, y: 80, w: 320, h: 400 },
+  'mcp-app': { x: 380, y: 720, w: 960, h: 600 },
+  webpage: { x: 380, y: 80, w: 520, h: 420 },
+  'json-render': { x: 380, y: 720, w: 840, h: 620 },
+  graph: { x: 380, y: 720, w: 760, h: 520 },
+  ledger: { x: 1130, y: 520, w: 320, h: 280 },
+  trace: { x: 40, y: 900, w: 200, h: 56 },
+  file: { x: 380, y: 80, w: 720, h: 600 },
+  image: { x: 380, y: 80, w: 720, h: 520 },
+  html: { x: 380, y: 80, w: 720, h: 640 },
+  group: { x: 220, y: 60, w: 840, h: 560 },
+  prompt: { x: 380, y: 1260, w: 520, h: 400 },
+  response: { x: 380, y: 1480, w: 720, h: 400 },
+};
+
+/**
+ * Build a canvas node with the shared client defaults. `position`/`size`
+ * default to the type's DEFAULT_POSITIONS entry; callers that compute
+ * placement (auto-placement, event-supplied geometry) pass explicit values.
+ * Status nodes sit at zIndex 0 (background chrome), everything else at 1.
+ */
+export function makeNodeState(
+  id: string,
+  type: CanvasNodeState['type'],
+  data: Record<string, unknown>,
+  options: {
+    position?: { x: number; y: number };
+    size?: { width: number; height: number };
+    dockPosition?: 'left' | 'right' | null;
+  } = {},
+): CanvasNodeState {
+  const defaults = DEFAULT_POSITIONS[type];
+  return {
+    id,
+    type,
+    position: options.position ?? { x: defaults.x, y: defaults.y },
+    size: options.size ?? { width: defaults.w, height: defaults.h },
+    zIndex: type === 'status' ? 0 : 1,
+    collapsed: false,
+    pinned: false,
+    dockPosition: options.dockPosition ?? null,
+    data,
+  };
+}