pmx-canvas 0.10.0 → 0.11.0

package/src/client/nodes/TraceNode.tsx

@@ -17,7 +17,7 @@ const STATUS_ICONS: Record<string, string> = {
 };
 
 const STATUS_COLORS: Record<string, string> = {
-  running: 'var(--c-accent)',
+  running: 'var(--c-agent)',
   success: 'var(--c-ok)',
   failed: 'var(--c-danger)',
 };
@@ -71,9 +71,9 @@ export function TraceNode({ node }: { node: CanvasNodeState }) {
         <div
           style={{
             fontFamily: 'var(--font-code)',
-            fontSize: '11px',
-            fontWeight: 600,
-            color: catColor,
+            fontSize: 'var(--fs-ui)',
+            fontWeight: 500,
+            color: category === 'subagent' ? catColor : 'var(--c-text)',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
@@ -84,7 +84,7 @@ export function TraceNode({ node }: { node: CanvasNodeState }) {
         {summary && (
           <div
             style={{
-              fontSize: '10px',
+              fontSize: 'var(--fs-meta)',
               color: error ? 'var(--c-danger)' : 'var(--c-muted)',
               whiteSpace: 'nowrap',
               overflow: 'hidden',
@@ -101,10 +101,10 @@ export function TraceNode({ node }: { node: CanvasNodeState }) {
       {duration && (
         <span
           style={{
-            fontSize: '9px',
+            fontSize: 'var(--fs-meta)',
             padding: '1px 5px',
-            borderRadius: '3px',
-            background: 'rgba(255,255,255,0.06)',
+            borderRadius: 'var(--r-control)',
+            background: 'var(--c-surface-hover)',
             color: 'var(--c-muted)',
             flexShrink: 0,
             whiteSpace: 'nowrap',

package/src/client/nodes/ViewerFrame.tsx

@@ -0,0 +1,262 @@
+import type { JSX, RefObject } from 'preact';
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
+
+export const VIEWER_LOAD_DEADLINE_MS = 10_000;
+export type ViewerSource = { src?: string; srcdoc?: string; error?: boolean; retry?: () => void };
+type LoadDocument = (
+  frame: HTMLIFrameElement,
+  signal: AbortSignal,
+) => Promise<boolean | 'cancelled' | undefined> | undefined;
+type Entry = { key: string; source: ViewerSource; attempt: number; load?: LoadDocument };
+type MountFrame = (frame: HTMLIFrameElement, fail: () => void) => () => void;
+
+/** The document acknowledges mounting before its frame-gated paint signal. */
+export function waitForViewerPaint(frame: HTMLIFrameElement, token: string, signal: AbortSignal): Promise<boolean> {
+  if (signal.aborted) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    const finish = (ready: boolean) => {
+      clearTimeout(timer);
+      window.removeEventListener('message', receive);
+      signal.removeEventListener('abort', cancel);
+      resolve(ready);
+    };
+    const cancel = () => finish(false);
+    const receive = (event: MessageEvent) => {
+      if (
+        event.source !== frame.contentWindow ||
+        event.data?.source !== HTML_SURFACE_PUSH_SOURCE ||
+        event.data?.token !== token
+      )
+        return;
+      if (event.data.type === 'mounted') {
+        clearTimeout(timer);
+      }
+      if (event.data.type === 'ready') finish(true);
+    };
+    const timer = setTimeout(cancel, VIEWER_LOAD_DEADLINE_MS);
+    window.addEventListener('message', receive);
+    signal.addEventListener('abort', cancel, { once: true });
+    frame.contentWindow?.postMessage({ source: HTML_SURFACE_PUSH_SOURCE, type: 'check-ready', token }, '*');
+  });
+}
+
+/** Bind protocol adapters before document scripts run, once per document. */
+function ViewerDocument({
+  mount,
+  iframeRef,
+  ...attributes
+}: JSX.IntrinsicElements['iframe'] & {
+  mount?: (frame: HTMLIFrameElement) => () => void;
+  iframeRef?: RefObject<HTMLIFrameElement>;
+}) {
+  const frame = useRef<HTMLIFrameElement>(null);
+  useLayoutEffect(() => mount?.(frame.current!), []);
+  useLayoutEffect(() => {
+    if (iframeRef) iframeRef.current = frame.current;
+  }, [iframeRef]);
+  return <iframe {...attributes} ref={frame} />;
+}
+
+/** Preserve the painted document until its replacement restores and paints. */
+export function RefreshingViewerFrame({
+  source,
+  identity = '',
+  iframeRef,
+  onLoad = () => {},
+  onMount,
+  onOpen,
+  onDocumentLoad,
+  title,
+  className = 'mcp-app-frame',
+  sandbox = 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox',
+  allow = '',
+  tabIndex,
+  referrerPolicy,
+}: {
+  source: ViewerSource;
+  identity?: string;
+  iframeRef: RefObject<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMount?: MountFrame;
+  onOpen?: () => void;
+  onDocumentLoad?: LoadDocument;
+  title: string;
+  className?: string;
+  sandbox?: string;
+  allow?: string;
+  tabIndex?: number;
+  referrerPolicy?: JSX.IntrinsicElements['iframe']['referrerPolicy'];
+}) {
+  const documentSource = source.src ?? source.srcdoc ?? '';
+  const sourceKey = documentSource ? `${identity}\0${documentSource}` : '';
+  const [painted, setPainted] = useState<Entry>({ key: sourceKey, source, attempt: 0, load: onDocumentLoad });
+  const [pending, setPending] = useState<Entry | null>(null);
+  const [failure, setFailure] = useState<Entry | null>(null);
+  const [ready, setReady] = useState(false);
+  const promotion = useRef(0);
+  const readiness = useRef(new Map<AbortController, Entry>());
+  const currentEntries = useRef({ painted, pending });
+  currentEntries.current = { painted, pending };
+  const networkTimer = useRef<{ entry: Entry; timer: ReturnType<typeof setTimeout> }>();
+  const loadedEntries = useRef(new WeakSet<Entry>());
+
+  const fail = (entry: Entry) => {
+    const current = currentEntries.current;
+    if (entry === (current.pending ?? current.painted)) setFailure(entry);
+  };
+
+  useLayoutEffect(() => {
+    promotion.current += 1;
+    setFailure(null);
+    if (!sourceKey || sourceKey === painted.key) {
+      setPending(null);
+      return;
+    }
+    if (!painted.key) {
+      setPainted({ key: sourceKey, source, attempt: 0, load: onDocumentLoad });
+      return;
+    }
+    setPending({ key: sourceKey, source, attempt: 0, load: onDocumentLoad });
+  }, [sourceKey, painted.key]);
+
+  useLayoutEffect(() => {
+    // Retry retires an entry without changing its source key. Keep the retained
+    // foreground's first-paint wait, but cancel every removed document's work.
+    for (const [controller, entry] of readiness.current) {
+      if (entry === painted || entry === pending) continue;
+      controller.abort();
+      readiness.current.delete(controller);
+    }
+  }, [painted, pending]);
+
+  useLayoutEffect(() => {
+    const entry = pending ?? painted;
+    if (!entry.key || loadedEntries.current.has(entry)) return;
+    const timer = setTimeout(() => fail(entry), VIEWER_LOAD_DEADLINE_MS);
+    networkTimer.current = { entry, timer };
+    return () => clearTimeout(timer);
+  }, [pending, painted]);
+
+  useEffect(
+    () => () => {
+      promotion.current += 1;
+      for (const controller of readiness.current.keys()) controller.abort();
+      readiness.current.clear();
+    },
+    [],
+  );
+
+  const frame = (entry: Entry, isPending: boolean) =>
+    entry.key && (
+      <ViewerDocument
+        key={`${entry.key}:${entry.attempt}`}
+        iframeRef={isPending ? undefined : iframeRef}
+        mount={onMount ? (frame) => onMount(frame, () => fail(entry)) : undefined}
+        src={entry.source.src}
+        srcdoc={entry.source.srcdoc}
+        class={className}
+        sandbox={sandbox}
+        allow={allow}
+        tabIndex={tabIndex}
+        referrerPolicy={referrerPolicy}
+        inert={isPending}
+        aria-hidden={isPending ? true : undefined}
+        onError={() => fail(entry)}
+        onLoad={async (event) => {
+          loadedEntries.current.add(entry);
+          if (networkTimer.current?.entry === entry) clearTimeout(networkTimer.current.timer);
+          const token = isPending ? ++promotion.current : promotion.current;
+          const loadedFrame = event.currentTarget;
+          const controller = new AbortController();
+          readiness.current.set(controller, entry);
+          const result = entry.load?.(loadedFrame, controller.signal);
+          const loaded = result ? await result : undefined;
+          readiness.current.delete(controller);
+          const current = currentEntries.current;
+          if (
+            (isPending && promotion.current !== token) ||
+            (entry !== current.painted && entry !== current.pending) ||
+            loaded === 'cancelled' ||
+            controller.signal.aborted
+          )
+            return;
+          if (loaded === false) {
+            fail(entry);
+            return;
+          }
+          setFailure((failed) => (failed === entry ? null : failed));
+          if (!isPending) {
+            setReady(true);
+            onLoad();
+            return;
+          }
+          requestAnimationFrame(() =>
+            requestAnimationFrame(() => {
+              if (promotion.current !== token) return;
+              iframeRef.current = loadedFrame;
+              setPainted(entry);
+              setPending(null);
+              setReady(true);
+              onLoad();
+            }),
+          );
+        }}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          border: 0,
+          visibility: 'visible',
+          zIndex: isPending ? 0 : 1,
+          background: 'var(--c-panel)',
+        }}
+        title={title}
+      />
+    );
+
+  return (
+    <div class="mcp-app-frame-stack">
+      {frame(painted, false)}
+      {pending && frame(pending, true)}
+      {!ready && !failure && !source.error && (
+        <div class="viewer-fallback" role="status">
+          Loading viewer…
+        </div>
+      )}
+      {(failure || source.error) && (
+        <div class={`viewer-fallback${ready ? ' viewer-fallback-retained' : ''}`} role="status">
+          <span>Viewer could not load.{ready ? ' Keeping the last view.' : ''}</span>
+          <button
+            type="button"
+            onClick={() => {
+              if (source.error) {
+                source.retry?.();
+                return;
+              }
+              if (!failure) return;
+              const retry = { ...failure, attempt: failure.attempt + 1 };
+              setFailure(null);
+              if (pending) setPending(retry);
+              else setPainted(retry);
+            }}
+          >
+            Retry
+          </button>
+        </div>
+      )}
+      {onOpen && !failure && !source.error && (
+        <button
+          type="button"
+          class="ext-app-preview-catcher"
+          aria-label="Open full view to edit"
+          onClick={(event) => {
+            event.stopPropagation();
+            onOpen();
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/client/nodes/ViewerHost.tsx

@@ -0,0 +1,41 @@
+import type { ComponentChildren } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { expandNode } from '../state/canvas-store';
+import type { CanvasNodeState } from '../types';
+
+// Mount on first approach at any zoom, then retain the document's arbitrary
+// live state. A lifetime cap starves later regions of a populated board.
+export function ViewerHost({ node, children }: { node: CanvasNodeState; children: ComponentChildren }) {
+  const anchor = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    if (!anchor.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry!.isIntersecting) {
+          setMounted(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '200px' },
+    );
+    observer.observe(anchor.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={anchor} class="viewer-host" data-viewer-mounted={mounted}>
+      {mounted ? (
+        children
+      ) : (
+        <div class="viewer-placeholder">
+          <span>{String(node.data.title || node.type)}</span>
+          <button type="button" onClick={() => expandNode(node.id)}>
+            Open viewer
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/WebpageNode.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { refreshWebpageNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
+import { RefreshingViewerFrame } from './ViewerFrame';
 
 function formatHost(url: string): string {
   try {
@@ -35,6 +36,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
   const frameBlockedReason = typeof node.data.frameBlockedReason === 'string' ? node.data.frameBlockedReason : '';
   const [refreshing, setRefreshing] = useState(false);
   const [showEmbed, setShowEmbed] = useState(expanded);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
     if (expanded) {
@@ -63,9 +65,9 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
       <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '12px' }}>
         <div style={{ minWidth: 0, flex: 1 }}>
           <div style={{ fontSize: '12px', color: 'var(--c-muted)' }}>{formatHost(url)}</div>
-          <div style={{ fontSize: expanded ? '18px' : '15px', fontWeight: 700, color: 'var(--c-text)' }}>
-            {pageTitle || (node.data.title as string) || url}
-          </div>
+          {pageTitle && pageTitle !== node.data.title && (
+            <div style={{ fontSize: 'var(--fs-title)', fontWeight: 600, color: 'var(--c-text)' }}>{pageTitle}</div>
+          )}
           <a
             href={url}
             target="_blank"
@@ -82,7 +84,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
             gap: '6px',
             padding: '4px 8px',
             borderRadius: '999px',
-            background: 'rgba(255,255,255,0.04)',
+            background: 'var(--c-panel-soft)',
             color: statusTone,
             fontSize: '11px',
             textTransform: 'uppercase',
@@ -194,7 +196,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
               fontSize: '11px',
               color: 'var(--c-muted)',
               borderBottom: '1px solid var(--c-line)',
-              background: 'rgba(255,255,255,0.03)',
+              background: 'var(--c-panel)',
             }}
           >
             Live preview unavailable. This site refuses embedding, so PMX Canvas cannot show it inline.
@@ -216,9 +218,13 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
         <div
           style={{
             border: '1px solid var(--c-line)',
-            borderRadius: '12px',
+            borderRadius: 'var(--r-control)',
             overflow: 'hidden',
-            background: 'var(--c-panel-soft)',
+            background: 'var(--c-panel)',
+            height: '320px',
+            flexShrink: 0,
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
           <div
@@ -227,26 +233,20 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
               fontSize: '11px',
               color: 'var(--c-muted)',
               borderBottom: '1px solid var(--c-line)',
-              background: 'rgba(255,255,255,0.03)',
+              background: 'var(--c-panel)',
             }}
           >
             Live preview (best effort). If this stays blank, the site likely blocks framing. The cached text snapshot
             below still works.
           </div>
-          <iframe
-            class="webpage-node-iframe"
+          <RefreshingViewerFrame
+            iframeRef={iframeRef}
+            onLoad={() => {}}
+            className="webpage-node-iframe"
             title={pageTitle || (node.data.title as string) || url}
-            src={url}
-            loading="lazy"
+            source={{ src: url }}
             referrerPolicy="no-referrer"
             sandbox="allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts"
-            style={{
-              display: 'block',
-              width: '100%',
-              height: expanded ? '320px' : '180px',
-              border: 'none',
-              background: '#fff',
-            }}
           />
         </div>
       )}
@@ -266,10 +266,8 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
           flex: 1,
           minHeight: 0,
           overflow: 'auto',
-          border: '1px solid var(--c-line)',
-          borderRadius: '10px',
-          background: 'var(--c-panel-soft)',
-          padding: expanded ? '14px' : '10px',
+          borderTop: '1px solid var(--c-line)',
+          paddingTop: '12px',
         }}
       >
         {excerpt ? (

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

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { workbenchConnectionEpoch } from '../state/canvas-store';
 import { iframeMode } from '../state/iframe-mode';
-import { surfaceContentHash } from './surface-url';
 import { workbenchFetch } from '../state/workbench-transport';
+import { VIEWER_LOAD_DEADLINE_MS, type ViewerSource } from './ViewerFrame';
 
 interface FrameDocumentCreateResponse {
   ok: boolean;
@@ -21,11 +21,12 @@ function isFrameDocumentCreateResponse(value: unknown): value is FrameDocumentCr
   );
 }
 
-export async function createIframeDocumentUrl(html: string, sandbox: string): Promise<string> {
+export async function createIframeDocumentUrl(html: string, sandbox: string, signal?: AbortSignal): Promise<string> {
   const response = await workbenchFetch('/api/canvas/frame-documents', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ html, sandbox }),
+    signal,
   });
   const json = (await response.json()) as unknown;
   if (!response.ok || !isFrameDocumentCreateResponse(json) || !json.ok || typeof json.url !== 'string') {
@@ -38,32 +39,37 @@ export async function createIframeDocumentUrl(html: string, sandbox: string): Pr
   return json.url;
 }
 
-export function useIframeDocument(
-  html: string,
-  sandbox: string,
-): { attributes: { src?: string; srcdoc?: string }; ready: boolean; key: string } {
+export function useIframeDocument(html: string, sandbox: string): ViewerSource {
   // 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 [error, setError] = useState(false);
   const [remintNonce, setRemintNonce] = useState(0);
   const mintEpochRef = useRef(0);
 
   useEffect(() => {
-    setSrc(null);
+    setError(false);
     if (!html || mode !== 'src') return;
     let cancelled = false;
+    const controller = new AbortController();
+    const deadline = setTimeout(() => controller.abort(), VIEWER_LOAD_DEADLINE_MS);
     mintEpochRef.current = workbenchConnectionEpoch.value;
-    void createIframeDocumentUrl(html, sandbox)
+    void createIframeDocumentUrl(html, sandbox, controller.signal)
       .then((url) => {
         if (!cancelled) setSrc(url);
       })
       .catch((error) => {
+        if (cancelled) return;
         console.error('[iframe-document] failed to create frame document:', error);
-      });
+        setError(true);
+      })
+      .finally(() => clearTimeout(deadline));
     return () => {
       cancelled = true;
+      clearTimeout(deadline);
+      controller.abort();
     };
   }, [html, sandbox, mode, remintNonce]);
 
@@ -101,21 +107,8 @@ export function useIframeDocument(
     };
   }, [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, mode, html]);
+  if (!html || mode === null) return {};
+  // The host always supplies the sandbox, including on inline documents.
+  if (mode === 'srcdoc') return { srcdoc: html };
+  return { src: src ?? undefined, error, retry: () => setRemintNonce((value) => value + 1) };
 }

package/src/client/nodes/primitive-copy.ts

@@ -0,0 +1,97 @@
+import type { RefObject } from 'preact';
+import { useLayoutEffect } from 'preact/hooks';
+import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
+import { showToast } from '../state/attention-bridge';
+import type { CanvasNodeState } from '../types';
+
+type Owner = { nodeId: string; token: string; frame: RefObject<HTMLIFrameElement>; expanded: boolean };
+const owners = new Set<Owner>();
+
+export function canCopyPrimitiveJson(node: CanvasNodeState): boolean {
+  return (
+    node.type === 'html' && typeof node.data.htmlPrimitive === 'string' && node.data.htmlPrimitive !== 'presentation'
+  );
+}
+
+export function usePrimitiveJson(
+  node: CanvasNodeState,
+  token: string,
+  frame: RefObject<HTMLIFrameElement>,
+  expanded: boolean,
+): void {
+  const enabled = canCopyPrimitiveJson(node);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const owner = { nodeId: node.id, token, frame, expanded };
+    owners.add(owner);
+    return () => {
+      owners.delete(owner);
+    };
+  }, [enabled, node.id, token, expanded]);
+}
+
+function readCurrentJson(nodeId: string): Promise<string> {
+  // The expanded document, when present, owns the latest interactive state.
+  const connected = [...owners].filter((owner) => owner.nodeId === nodeId && owner.frame.current?.isConnected);
+  const owner = connected.find((owner) => owner.expanded) ?? connected[0];
+  const frame = owner?.frame.current;
+  if (!owner || !frame?.contentWindow) return Promise.reject(new Error('Open the viewer before copying JSON.'));
+  const requestId = crypto.randomUUID();
+  return new Promise((resolve, reject) => {
+    const finish = (json?: string) => {
+      clearTimeout(timer);
+      window.removeEventListener('message', receive);
+      frame.removeEventListener('load', changed);
+      if (json !== undefined) resolve(json);
+      else reject(new Error('The viewer is unavailable or changed. Wait for it to load, then try again.'));
+    };
+    const changed = () => finish();
+    const receive = (event: MessageEvent) => {
+      const message = event.data;
+      if (
+        event.source !== frame.contentWindow ||
+        event.origin !== 'null' ||
+        message?.source !== HTML_SURFACE_PUSH_SOURCE ||
+        message.type !== 'copy-json-result' ||
+        message.token !== owner.token ||
+        message.requestId !== requestId
+      )
+        return;
+      finish(
+        owners.has(owner) && owner.frame.current === frame && frame.isConnected && typeof message.json === 'string'
+          ? message.json
+          : undefined,
+      );
+    };
+    const timer = setTimeout(changed, 3000);
+    window.addEventListener('message', receive);
+    frame.addEventListener('load', changed, { once: true });
+    // Opaque-origin sandbox: exact source + per-document nonce bind the reply.
+    frame.contentWindow!.postMessage(
+      { source: HTML_SURFACE_PUSH_SOURCE, type: 'copy-json', token: owner.token, requestId },
+      '*',
+    );
+  });
+}
+
+export async function copyPrimitiveJson(nodeId: string): Promise<void> {
+  try {
+    if (!navigator.clipboard) throw new Error('Clipboard access is unavailable in this browser.');
+    const json = readCurrentJson(nodeId);
+    // Keep clipboard.write inside the user's activation, including WebKit. The
+    // iframe supplies bytes, never clipboard permission or a stale server export.
+    void json.catch(() => {});
+    if (typeof ClipboardItem !== 'undefined' && navigator.clipboard.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'text/plain': json.then((text) => new Blob([text], { type: 'text/plain' })) }),
+      ]);
+    } else {
+      await navigator.clipboard.writeText(await json);
+    }
+    showToast('context', 'JSON copied', '', [nodeId]);
+  } catch (error) {
+    showToast('remove', 'Could not copy JSON', error instanceof Error ? error.message : 'Clipboard access failed.', [
+      nodeId,
+    ]);
+  }
+}