pmx-canvas 0.6.3 → 0.6.5

package/src/client/canvas/ToolRail.tsx

@@ -34,6 +34,7 @@ import {
 import { saveCanvasTheme } from '../state/intent-bridge';
 import { createNodeInView } from './create-in-view';
 import { askText } from './TextPrompt';
+import { FeedbackDialog } from './FeedbackDialog';
 import { clearThemeOverride } from '../state/theme-override';
 import { invalidateTokenCache } from '../theme/tokens';
 import type { AnnotationTool } from '../types';
@@ -170,6 +171,7 @@ export function ToolRail({
   const isTraceOn = traceEnabled.value;
   const traceNodeCount = Array.from(nodes.value.values()).filter((n) => n.type === 'trace').length;
   const edgeCount = edges.value.size;
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
   const [openMenu, setOpenMenu] = useState<null | 'theme' | 'annotate'>(null);
   const [menuAnchor, setMenuAnchor] = useState<{ top: number; bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
@@ -236,212 +238,246 @@ export function ToolRail({
   };
 
   return (
-    <div class="tool-rail" ref={railRef} role="toolbar" aria-label="Canvas tools" aria-orientation="vertical">
-      <span class="rail-brand" title="PMX Canvas" aria-label="PMX Canvas">
-        <IconLogo size={22} />
-      </span>
-
-      <div class="rail-divider" />
+    <>
+      <div class="tool-rail" ref={railRef} role="toolbar" aria-label="Canvas tools" aria-orientation="vertical">
+        <span class="rail-brand" title="PMX Canvas" aria-label="PMX Canvas">
+          <IconLogo size={22} />
+        </span>
 
-      <RailButton label="Select" shortcut="V" active={tool === 'select'} onClick={() => (canvasTool.value = 'select')}>
-        <IconCursorTool />
-      </RailButton>
-      <RailButton label="Pan" shortcut="Space" active={tool === 'pan'} onClick={() => (canvasTool.value = 'pan')}>
-        <IconHandTool />
-      </RailButton>
-      <RailButton
-        label="Connect"
-        shortcut="C"
-        active={tool === 'connect'}
-        onClick={() => (canvasTool.value = 'connect')}
-      >
-        <svg
-          width="15"
-          height="15"
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          aria-hidden="true"
+        <RailButton
+          label="Bug and feedback"
+          menuOpen={feedbackOpen}
+          onClick={() => {
+            setOpenMenu(null);
+            setFeedbackOpen(true);
+          }}
         >
-          <circle cx="4" cy="4" r="2" />
-          <circle cx="12" cy="12" r="2" />
-          <path d="M5.5 5.5 C 8 8, 8 8, 10.5 10.5" />
-        </svg>
-      </RailButton>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="4.5" y="5" width="7" height="9" rx="3.5" />
+            <path d="M6 5V4a2 2 0 0 1 4 0v1M8 8v6M2 4l2.5 2M14 4l-2.5 2M1.5 9h3M11.5 9h3M2 14l2.5-2M14 14l-2.5-2" />
+          </svg>
+        </RailButton>
 
-      <div class="rail-divider" />
+        <div class="rail-divider" />
 
-      <RailButton
-        label="Markdown note"
-        shortcut="M"
-        onClick={() =>
-          void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 }).catch((error) =>
-            logRailError('create markdown', error),
-          )
-        }
-      >
-        <IconNodeMarkdown size={15} />
-      </RailButton>
-      <RailButton label="Image" shortcut="I" onClick={() => promptedCreate('image')}>
-        <IconNodeImage size={15} />
-      </RailButton>
-      <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
-        <IconNodeFile size={15} />
-      </RailButton>
-      <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
-        <IconNodeWebpage size={15} />
-      </RailButton>
-      <RailButton
-        label="HTML surface"
-        shortcut="H"
-        onClick={() =>
-          void createNodeInView({ type: 'html', title: 'HTML surface' }).catch((error) =>
-            logRailError('create html', error),
-          )
-        }
-      >
-        <IconNodeHtml />
-      </RailButton>
-      <RailButton
-        label="Group"
-        shortcut="G"
-        onClick={() =>
-          void createNodeInView({ type: 'group', title: 'Group' }).catch((error) => logRailError('create group', error))
-        }
-      >
-        <IconNodeGroup size={15} />
-      </RailButton>
-      <span class="toolbar-menu-anchor">
         <RailButton
-          label="Annotate"
-          shortcut="A"
-          detail="Draw · Text note · Eraser"
-          active={annotationTool !== null}
-          menuOpen={openMenu === 'annotate'}
-          onClick={toggleMenu('annotate')}
+          label="Select"
+          shortcut="V"
+          active={tool === 'select'}
+          onClick={() => (canvasTool.value = 'select')}
         >
-          {annotationTool === 'eraser' ? (
-            <IconEraser />
-          ) : annotationTool === 'text' ? (
-            <IconTextAnnotation />
-          ) : (
-            <IconPen />
-          )}
+          <IconCursorTool />
+        </RailButton>
+        <RailButton label="Pan" shortcut="Space" active={tool === 'pan'} onClick={() => (canvasTool.value = 'pan')}>
+          <IconHandTool />
+        </RailButton>
+        <RailButton
+          label="Connect"
+          shortcut="C"
+          active={tool === 'connect'}
+          onClick={() => (canvasTool.value = 'connect')}
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <circle cx="4" cy="4" r="2" />
+            <circle cx="12" cy="12" r="2" />
+            <path d="M5.5 5.5 C 8 8, 8 8, 10.5 10.5" />
+          </svg>
         </RailButton>
-        {openMenu === 'annotate' && (
-          <div class="toolbar-menu" style={sideMenuStyle(false)} role="menu" aria-label="Annotate">
-            <button
-              type="button"
-              class={`toolbar-menu-item${annotationTool === 'pen' ? ' active' : ''}`}
-              onClick={() => {
-                onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen');
-                setOpenMenu(null);
-              }}
-            >
-              <IconPen />
-              <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Draw (A)'}</span>
-            </button>
-            <button
-              type="button"
-              class={`toolbar-menu-item${annotationTool === 'text' ? ' active' : ''}`}
-              onClick={() => {
-                onSetAnnotationTool(annotationTool === 'text' ? null : 'text');
-                setOpenMenu(null);
-              }}
-            >
-              <IconTextAnnotation />
-              <span>{annotationTool === 'text' ? 'Stop text notes' : 'Text note'}</span>
-            </button>
-            <button
-              type="button"
-              class={`toolbar-menu-item${annotationTool === 'eraser' ? ' active' : ''}`}
-              onClick={() => {
-                onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser');
-                setOpenMenu(null);
-              }}
-            >
-              <IconEraser />
-              <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Eraser'}</span>
-            </button>
-          </div>
-        )}
-      </span>
 
-      <div class="rail-spacer" />
+        <div class="rail-divider" />
 
-      <RailButton label="Search & commands" shortcut={modChord('K')} onClick={onOpenPalette}>
-        <IconSearch />
-      </RailButton>
-      <RailButton
-        label="Arrange"
-        detail={edgeCount > 0 ? 'graph-aware' : 'grid'}
-        onClick={() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange())}
-      >
-        <IconArrange />
-      </RailButton>
-      <RailButton
-        label={isTraceOn ? 'Disable trace' : 'Enable trace'}
-        active={isTraceOn}
-        onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
-      >
-        <IconTrace />
-      </RailButton>
-      {(isTraceOn || traceNodeCount > 0) && (
-        <RailButton label="Clear trace" onClick={() => sendIntent('trace-clear')}>
-          <IconClearTrace />
+        <RailButton
+          label="Markdown note"
+          shortcut="M"
+          onClick={() =>
+            void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 }).catch((error) =>
+              logRailError('create markdown', error),
+            )
+          }
+        >
+          <IconNodeMarkdown size={15} />
+        </RailButton>
+        <RailButton label="Image" shortcut="I" onClick={() => promptedCreate('image')}>
+          <IconNodeImage size={15} />
+        </RailButton>
+        <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
+          <IconNodeFile size={15} />
+        </RailButton>
+        <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
+          <IconNodeWebpage size={15} />
+        </RailButton>
+        <RailButton
+          label="HTML surface"
+          shortcut="H"
+          onClick={() =>
+            void createNodeInView({ type: 'html', title: 'HTML surface' }).catch((error) =>
+              logRailError('create html', error),
+            )
+          }
+        >
+          <IconNodeHtml />
         </RailButton>
-      )}
-      <RailButton
-        label={minimapVisible ? 'Hide minimap' : 'Show minimap'}
-        active={minimapVisible}
-        onClick={onToggleMinimap}
-      >
-        <IconMinimap />
-      </RailButton>
-      <RailButton label="Snapshots" active={snapshotOpen} onClick={onToggleSnapshot} btnRef={snapshotBtnRef}>
-        <IconSnapshot />
-      </RailButton>
-      <span class="toolbar-menu-anchor">
         <RailButton
-          label="Theme"
-          detail={CANVAS_THEME_META[activeTheme].label}
-          menuOpen={openMenu === 'theme'}
-          ariaLabel="Choose theme"
-          active={openMenu === 'theme'}
-          onClick={toggleMenu('theme')}
+          label="Group"
+          shortcut="G"
+          onClick={() =>
+            void createNodeInView({ type: 'group', title: 'Group' }).catch((error) =>
+              logRailError('create group', error),
+            )
+          }
         >
-          {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
+          <IconNodeGroup size={15} />
         </RailButton>
-        {openMenu === 'theme' && (
-          <div class="toolbar-menu" style={sideMenuStyle(true)} role="menu" aria-label="Theme">
-            {CANVAS_THEMES.map((name) => (
+        <span class="toolbar-menu-anchor">
+          <RailButton
+            label="Annotate"
+            shortcut="A"
+            detail="Draw · Text note · Eraser"
+            active={annotationTool !== null}
+            menuOpen={openMenu === 'annotate'}
+            onClick={toggleMenu('annotate')}
+          >
+            {annotationTool === 'eraser' ? (
+              <IconEraser />
+            ) : annotationTool === 'text' ? (
+              <IconTextAnnotation />
+            ) : (
+              <IconPen />
+            )}
+          </RailButton>
+          {openMenu === 'annotate' && (
+            <div class="toolbar-menu" style={sideMenuStyle(false)} role="menu" aria-label="Annotate">
               <button
-                key={name}
                 type="button"
-                role="menuitemradio"
-                aria-checked={activeTheme === name}
-                class={`toolbar-menu-item${activeTheme === name ? ' active' : ''}`}
-                onClick={() => applyTheme(name)}
+                class={`toolbar-menu-item${annotationTool === 'pen' ? ' active' : ''}`}
+                onClick={() => {
+                  onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen');
+                  setOpenMenu(null);
+                }}
               >
-                <span class="theme-swatch" style={{ background: CANVAS_THEME_META[name].swatchBg }}>
-                  <span class="theme-swatch-dot" style={{ background: CANVAS_THEME_META[name].swatchAccent }} />
-                </span>
-                <span>{CANVAS_THEME_META[name].label}</span>
-                {activeTheme === name && (
-                  <span class="toolbar-menu-check" aria-hidden="true">
-                    ✓
-                  </span>
-                )}
+                <IconPen />
+                <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Draw (A)'}</span>
+              </button>
+              <button
+                type="button"
+                class={`toolbar-menu-item${annotationTool === 'text' ? ' active' : ''}`}
+                onClick={() => {
+                  onSetAnnotationTool(annotationTool === 'text' ? null : 'text');
+                  setOpenMenu(null);
+                }}
+              >
+                <IconTextAnnotation />
+                <span>{annotationTool === 'text' ? 'Stop text notes' : 'Text note'}</span>
               </button>
-            ))}
-          </div>
+              <button
+                type="button"
+                class={`toolbar-menu-item${annotationTool === 'eraser' ? ' active' : ''}`}
+                onClick={() => {
+                  onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser');
+                  setOpenMenu(null);
+                }}
+              >
+                <IconEraser />
+                <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Eraser'}</span>
+              </button>
+            </div>
+          )}
+        </span>
+
+        <div class="rail-spacer" />
+
+        <RailButton label="Search & commands" shortcut={modChord('K')} onClick={onOpenPalette}>
+          <IconSearch />
+        </RailButton>
+        <RailButton
+          label="Arrange"
+          detail={edgeCount > 0 ? 'graph-aware' : 'grid'}
+          onClick={() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange())}
+        >
+          <IconArrange />
+        </RailButton>
+        <RailButton
+          label={isTraceOn ? 'Disable trace' : 'Enable trace'}
+          active={isTraceOn}
+          onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
+        >
+          <IconTrace />
+        </RailButton>
+        {(isTraceOn || traceNodeCount > 0) && (
+          <RailButton label="Clear trace" onClick={() => sendIntent('trace-clear')}>
+            <IconClearTrace />
+          </RailButton>
         )}
-      </span>
-      <RailButton label="Shortcuts" shortcut="?" onClick={onOpenShortcuts}>
-        <IconShortcuts />
-      </RailButton>
-    </div>
+        <RailButton
+          label={minimapVisible ? 'Hide minimap' : 'Show minimap'}
+          active={minimapVisible}
+          onClick={onToggleMinimap}
+        >
+          <IconMinimap />
+        </RailButton>
+        <RailButton label="Snapshots" active={snapshotOpen} onClick={onToggleSnapshot} btnRef={snapshotBtnRef}>
+          <IconSnapshot />
+        </RailButton>
+        <span class="toolbar-menu-anchor">
+          <RailButton
+            label="Theme"
+            detail={CANVAS_THEME_META[activeTheme].label}
+            menuOpen={openMenu === 'theme'}
+            ariaLabel="Choose theme"
+            active={openMenu === 'theme'}
+            onClick={toggleMenu('theme')}
+          >
+            {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
+          </RailButton>
+          {openMenu === 'theme' && (
+            <div class="toolbar-menu" style={sideMenuStyle(true)} role="menu" aria-label="Theme">
+              {CANVAS_THEMES.map((name) => (
+                <button
+                  key={name}
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={activeTheme === name}
+                  class={`toolbar-menu-item${activeTheme === name ? ' active' : ''}`}
+                  onClick={() => applyTheme(name)}
+                >
+                  <span class="theme-swatch" style={{ background: CANVAS_THEME_META[name].swatchBg }}>
+                    <span class="theme-swatch-dot" style={{ background: CANVAS_THEME_META[name].swatchAccent }} />
+                  </span>
+                  <span>{CANVAS_THEME_META[name].label}</span>
+                  {activeTheme === name && (
+                    <span class="toolbar-menu-check" aria-hidden="true">
+                      ✓
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </span>
+        <RailButton label="Shortcuts" shortcut="?" onClick={onOpenShortcuts}>
+          <IconShortcuts />
+        </RailButton>
+      </div>
+      {feedbackOpen && <FeedbackDialog onClose={() => setFeedbackOpen(false)} />}
+    </>
   );
 }

package/src/client/canvas/TopBar.tsx

@@ -1,4 +1,5 @@
 import type { ComponentChildren } from 'preact';
+import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
 import { IconFitAll, IconZoomIn, IconZoomOut } from '../icons';
 import {
@@ -42,8 +43,19 @@ function AgentChip() {
   // bar and over the session panel, and the total was invisible): the most
   // active few wear their own chips and the rest fold into a census chip
   // that always names the total.
-  const sessions = attachedSessions.value;
-  if (sessions.length === 0) return null;
+  const allSessions = attachedSessions.value;
+  if (allSessions.length === 0) return null;
+  // Attached workers are represented by their orchestrator's roll-up, not a
+  // second top-level chip of their own. Orphans remain visible.
+  const sessions = allSessions.filter(
+    (session) =>
+      !session.parentAgentId ||
+      !allSessions.some(
+        (candidate) =>
+          candidate.sessionId !== session.sessionId &&
+          (candidate.sessionId === session.parentAgentId || candidate.source === session.parentAgentId),
+      ),
+  );
   const ranked = [...sessions].sort((a, b) => (AGENT_PHASE_RANK[a.phase] ?? 4) - (AGENT_PHASE_RANK[b.phase] ?? 4));
   const visible = ranked.slice(0, AGENT_CHIP_LIMIT);
   const overflow = ranked.slice(AGENT_CHIP_LIMIT);
@@ -318,6 +330,20 @@ export function TopBar() {
 
       <div class="top-bar-sep" />
 
+      <BarHint
+        label="Present board"
+        body="Arrow keys or Space step through stops; Esc exits. Without a saved tour, groups are read top-to-bottom, left-to-right."
+      >
+        <button
+          type="button"
+          class="present-button"
+          onClick={() => {
+            presenting.value = true;
+          }}
+        >
+          Present
+        </button>
+      </BarHint>
       <BarHint label="Zoom out" shortcut={modChord('\u2212')}>
         <button type="button" class="top-bar-btn" onClick={() => zoomByFactor(1 / 1.25)} aria-label="Zoom out">
           <IconZoomOut />

package/src/client/canvas/use-node-drag.ts

@@ -7,6 +7,7 @@ interface NodeDragOptions {
   viewport: Signal<ViewportState>;
   onMove: (id: string, x: number, y: number) => void;
   onDragEnd: () => void;
+  onClick?: () => void;
 }
 
 /**
@@ -14,7 +15,7 @@ interface NodeDragOptions {
  * Converts screen-space pointer delta to canvas-space position delta
  * (accounting for current viewport scale).
  */
-export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOptions) {
+export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd, onClick }: NodeDragOptions) {
   const isDragging = useRef(false);
   const startPointer = useRef({ x: 0, y: 0 });
   const startPosition = useRef({ x: 0, y: 0 });
@@ -30,6 +31,7 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
       startPosition.current = { x: currentX, y: currentY };
       let pendingPointer: { x: number; y: number } | null = null;
       let frameId: number | null = null;
+      let moved = false;
 
       const flushMove = () => {
         frameId = null;
@@ -44,12 +46,14 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
 
       const onPointerMove = (ev: PointerEvent) => {
         if (!isDragging.current) return;
+        if (!moved && Math.hypot(ev.clientX - e.clientX, ev.clientY - e.clientY) < 4) return;
+        moved = true;
         pendingPointer = { x: ev.clientX, y: ev.clientY };
         if (frameId !== null) return;
         frameId = window.requestAnimationFrame(flushMove);
       };
 
-      const finishDrag = () => {
+      const finishDrag = (ev: PointerEvent) => {
         if (frameId !== null) {
           window.cancelAnimationFrame(frameId);
           flushMove();
@@ -60,13 +64,14 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
         document.removeEventListener('pointerup', finishDrag);
         document.removeEventListener('pointercancel', finishDrag);
         onDragEnd();
+        if (!moved && ev.type === 'pointerup') onClick?.();
       };
 
       document.addEventListener('pointermove', onPointerMove);
       document.addEventListener('pointerup', finishDrag);
       document.addEventListener('pointercancel', finishDrag);
     },
-    [nodeId, viewport, onMove, onDragEnd],
+    [nodeId, viewport, onMove, onDragEnd, onClick],
   );
 
   return handlePointerDown;

package/src/client/mermaid-entry.ts

@@ -29,6 +29,41 @@ function showError(container: HTMLElement, message: string): void {
 
 let renderSeq = 0;
 
+function fitDiagram(container: HTMLElement): void {
+  const svg = container.querySelector('svg');
+  const box = svg?.viewBox.baseVal;
+  if (!svg || !box?.width || !box.height) return;
+  const source = document.querySelector<HTMLElement>('.mermaid-source');
+  // Only canvas frames carry a nonce. A standalone site may itself be inside
+  // a host browser pane's iframe; it must still offer natural-size viewing.
+  const token = source?.dataset.frameToken;
+  const embedded = !!token && window.parent !== window;
+  const contain = embedded && source?.dataset.fit !== 'none';
+  const width = document.documentElement.clientWidth;
+  const height = document.documentElement.clientHeight;
+  const scale = contain ? Math.min(1, width / box.width, height / box.height) : 1;
+  svg.style.maxWidth = 'none';
+  svg.style.width = `${box.width * scale}px`;
+  svg.style.height = `${box.height * scale}px`;
+  svg.style.display = 'block';
+  svg.style.margin = contain ? '0 auto' : '0';
+  svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+  // Report the unconstrained, width-fitted height, not the visually contained
+  // height. Auto-grow remains useful; strictSize/userResized keep their frame.
+  if (embedded && token) {
+    window.parent.postMessage(
+      {
+        source: 'pmx-canvas-frame',
+        type: 'content-height',
+        token,
+        height: box.height * (contain ? Math.min(1, width / box.width) : 1),
+      },
+      '*',
+    );
+  }
+}
+
 async function renderDiagram(source: string, container: HTMLElement): Promise<void> {
   const scheme = documentScheme();
   mermaid.initialize({
@@ -40,6 +75,7 @@ async function renderDiagram(source: string, container: HTMLElement): Promise<vo
   try {
     const { svg } = await mermaid.render(`pmx-mermaid-${renderSeq}`, source);
     container.innerHTML = svg;
+    fitDiagram(container);
   } catch (error) {
     // Never leave a blank/black frame: show the parse/render error instead.
     showError(container, error instanceof Error ? error.message : String(error));
@@ -51,7 +87,10 @@ function boot(): void {
   const source = sourceEl?.textContent ?? '';
   const container = document.createElement('div');
   container.className = 'mermaid-diagram';
+  document.body.style.margin = '0';
+  document.body.style.padding = '0';
   document.body.appendChild(container);
+  window.addEventListener('resize', () => fitDiagram(container));
   if (!source.trim()) {
     showError(container, 'Empty mermaid diagram');
     return;

package/src/client/nodes/HtmlNode.tsx

@@ -3,6 +3,7 @@ import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { axSurfaceState, canvasTheme } from '../state/canvas-store';
 import type { CanvasNodeState } from '../types';
 import { nodeSurfaceUrl, surfaceContentHash } from './surface-url';
+import { RefreshingViewerFrame } from './McpAppNode';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
 import { useSurfaceFrame } from './use-surface-frame';
@@ -148,23 +149,21 @@ export function HtmlNode({
   // standalone tab. The whole html-node tier assumes arbitrary author code runs
   // inside this exact sandbox.
   return (
-    <iframe
-      ref={iframeRef}
-      class={presentation ? 'html-node-frame html-node-frame-presentation' : 'html-node-frame'}
+    <RefreshingViewerFrame
+      source={surfaceFrame}
+      iframeRef={iframeRef}
+      className={
+        presentation
+          ? 'html-node-frame html-node-frame-presentation'
+          : expanded
+            ? 'html-node-frame html-node-frame-expanded'
+            : 'html-node-frame'
+      }
       title={typeof node.data.title === 'string' ? node.data.title : 'HTML node'}
       sandbox="allow-scripts"
-      {...surfaceFrame}
+      allow=""
       tabIndex={autoFocus ? 0 : undefined}
       onLoad={handleFrameLoad}
-      style={{
-        width: '100%',
-        height: '100%',
-        minHeight: presentation ? 0 : expanded ? '70vh' : '300px',
-        border: 'none',
-        background: 'var(--c-bg)',
-        borderRadius: presentation ? 0 : '6px',
-        display: 'block',
-      }}
     />
   );
 }