pmx-canvas 0.7.2 → 0.7.3

package/src/client/canvas/FeedbackDialog.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'preact/hooks';
 import { useFocusTrap } from './use-focus-trap';
 import { IconExternalLink } from '../icons';
+import { ChoiceMenu } from './ChoiceMenu';
 
 /** Draft only: GitHub owns authentication and the final public submission. */
 export function FeedbackDialog({ onClose }: { onClose: () => void }) {
@@ -40,14 +41,15 @@ export function FeedbackDialog({ onClose }: { onClose: () => void }) {
           public. Only what you enter below is included; no board contents, workspace paths, screenshots, or logs are
           attached.
         </p>
-        <label>
-          Feedback type
-          <select class="text-prompt-input" value={kind} onChange={(e) => setKind(e.currentTarget.value)}>
-            <option>Bug report</option>
-            <option>Feature request</option>
-            <option>General feedback</option>
-          </select>
-        </label>
+        <div class="feedback-field">
+          <span>Feedback type</span>
+          <ChoiceMenu
+            label="Feedback type"
+            value={kind}
+            onChange={setKind}
+            options={['Bug report', 'Feature request', 'General feedback'].map((value) => ({ value, label: value }))}
+          />
+        </div>
         <label>
           Title
           <input

package/src/client/canvas/ToolRail.tsx

@@ -8,10 +8,7 @@ import {
   IconLogo,
   IconMinimap,
   IconMoon,
-  IconNodeFile,
   IconNodeGroup,
-  IconNodeHtml,
-  IconNodeImage,
   IconNodeMarkdown,
   IconNodeWebpage,
   IconPen,
@@ -177,37 +174,33 @@ export function ToolRail({
   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 [openMenu, setOpenMenu] = useState<null | 'theme'>(null);
+  const [menuAnchor, setMenuAnchor] = useState<{ bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
-  const documentInput = useRef<HTMLInputElement>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
 
-  const toggleMenu = (menu: 'theme' | 'annotate') => (e: MouseEvent) => {
+  const toggleMenu = (menu: 'theme') => (e: MouseEvent) => {
     if (openMenu === menu) {
       setOpenMenu(null);
       return;
     }
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    setMenuAnchor({ top: rect.top, bottom: rect.bottom, right: rect.right });
+    setMenuAnchor({ bottom: rect.bottom, right: rect.right });
     setOpenMenu(menu);
   };
 
   // The rail scrolls (overflow-y:auto), so an absolutely-positioned popover
   // would be clipped by it. Fixed positioning from the trigger's rect escapes
-  // the scroll container; the annotate menu top-aligns with its trigger, the
-  // theme menu (bottom cluster) bottom-aligns so it grows upward.
-  const sideMenuStyle = (alignBottom: boolean) =>
-    menuAnchor
-      ? alignBottom
-        ? {
-            position: 'fixed' as const,
-            left: `${menuAnchor.right + 8}px`,
-            bottom: `${window.innerHeight - menuAnchor.bottom}px`,
-            top: 'auto',
-            right: 'auto',
-          }
-        : { position: 'fixed' as const, left: `${menuAnchor.right + 8}px`, top: `${menuAnchor.top}px`, right: 'auto' }
-      : undefined;
+  // the scroll container; the theme menu bottom-aligns so it grows upward.
+  const sideMenuStyle = menuAnchor
+    ? {
+        position: 'fixed' as const,
+        left: `${menuAnchor.right + 8}px`,
+        bottom: `${window.innerHeight - menuAnchor.bottom}px`,
+        top: 'auto',
+        right: 'auto',
+      }
+    : undefined;
 
   useEffect(() => {
     if (!openMenu) return;
@@ -331,22 +324,20 @@ export function ToolRail({
         >
           <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="Attach document" onClick={() => documentInput.current?.click()}>
+        <RailButton
+          label="Attach files"
+          ariaLabel="Attach files"
+          detail="Images (PNG, JPEG, SVG…), Markdown and text/code files. PDF, Word, Excel, PowerPoint and OpenDocument use agent import with review."
+          onClick={() => fileInput.current?.click()}
+        >
           <IconUpload size={15} />
         </RailButton>
         <input
-          ref={documentInput}
+          ref={fileInput}
           type="file"
           hidden
           multiple
-          accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.odt,.ods,.odp"
-          aria-label="Attach documents"
+          aria-label="Attach files"
           onChange={(event) => {
             const area = canvasArea();
             const view = viewport.value;
@@ -361,17 +352,6 @@ export function ToolRail({
         <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"
@@ -383,61 +363,28 @@ export function ToolRail({
         >
           <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')}
-          >
-            {annotationTool === 'eraser' ? (
-              <IconEraser />
-            ) : annotationTool === 'text' ? (
-              <IconTextAnnotation />
-            ) : (
-              <IconPen />
-            )}
-          </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>
+        <RailButton
+          label="Draw"
+          shortcut="A"
+          active={annotationTool === 'pen'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen')}
+        >
+          <IconPen />
+        </RailButton>
+        <RailButton
+          label="Text note"
+          active={annotationTool === 'text'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'text' ? null : 'text')}
+        >
+          <IconTextAnnotation />
+        </RailButton>
+        <RailButton
+          label="Eraser"
+          active={annotationTool === 'eraser'}
+          onClick={() => onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser')}
+        >
+          <IconEraser />
+        </RailButton>
 
         <div class="rail-spacer" />
 
@@ -485,7 +432,7 @@ export function ToolRail({
             {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
           </RailButton>
           {openMenu === 'theme' && (
-            <div class="toolbar-menu" style={sideMenuStyle(true)} role="menu" aria-label="Theme">
+            <div class="toolbar-menu" style={sideMenuStyle} role="menu" aria-label="Theme">
               {CANVAS_THEMES.map((name) => (
                 <button
                   key={name}

package/src/client/nodes/McpAppNode.tsx

@@ -10,6 +10,7 @@ import { ExtAppFrame } from './ExtAppFrame';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
 import { useSurfaceFrame } from './use-surface-frame';
+import { restoreViewerRuntimeState } from './viewer-runtime-state';
 
 function withViewerParams(
   url: string,
@@ -19,6 +20,7 @@ function withViewerParams(
   axNodeId?: string,
   frameToken?: string,
   fitContent?: boolean,
+  stateToken?: string,
 ): string {
   if (!url) return url;
   try {
@@ -38,6 +40,7 @@ function withViewerParams(
     // Content-fit: report natural height (charts render intrinsic) so the node grows.
     if (frameToken) resolved.searchParams.set('frameToken', frameToken);
     if (fitContent) resolved.searchParams.set('fit', 'content');
+    if (stateToken) resolved.searchParams.set('stateToken', stateToken);
     return resolved.toString();
   } catch {
     return url;
@@ -68,6 +71,7 @@ export function RefreshingViewerFrame({
   source,
   iframeRef,
   onLoad,
+  onDocumentLoad,
   title,
   className = 'mcp-app-frame',
   sandbox = 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox',
@@ -77,6 +81,7 @@ export function RefreshingViewerFrame({
   source: ViewerFrameSource;
   iframeRef: RefObject<HTMLIFrameElement>;
   onLoad: () => void;
+  onDocumentLoad?: (frame: HTMLIFrameElement) => void;
   title: string;
   className?: string;
   sandbox?: string;
@@ -119,6 +124,9 @@ export function RefreshingViewerFrame({
       tabIndex={tabIndex}
       loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
       onLoad={(event) => {
+        // Seed runtime state while a replacement is still behind the painted
+        // frame, rather than mounting an empty viewer after promotion.
+        onDocumentLoad?.(event.currentTarget);
         if (!isPending) {
           onLoad();
           return;
@@ -214,6 +222,10 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
   useEffect(pushAxState, [isAxViewer, axToken, axStateValue]);
 
   const specVersion = typeof node.data.specVersion === 'number' ? node.data.specVersion : undefined;
+  const stateToken = useMemo(
+    () => (isJsonViewer ? `ui-${crypto.randomUUID()}` : ''),
+    [isJsonViewer, specVersion, node.data.url],
+  );
   const url = withViewerParams(
     (node.data.url as string) || '',
     expanded,
@@ -222,6 +234,7 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
     isAxViewer ? node.id : undefined,
     frameToken || undefined,
     contentFit,
+    stateToken || undefined,
   );
   // src vs fetch()+srcdoc, decided by the boot-wide embed probe (Amp portals).
   // External viewer URLs always stay src — the hook passes them through.
@@ -284,6 +297,9 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
       <RefreshingViewerFrame
         source={surfaceFrame}
         iframeRef={iframeRef}
+        onDocumentLoad={(frame) => {
+          if (stateToken && frame.contentWindow) restoreViewerRuntimeState(node.id, stateToken, frame.contentWindow);
+        }}
         onLoad={pushAxState}
         title={`MCP App: ${sourceServer}`}
       />

package/src/client/nodes/use-ax-surface-bridge.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'preact';
-import { useEffect } from 'preact/hooks';
+import { useLayoutEffect } from 'preact/hooks';
 import { AX_SURFACE_ACK_SOURCE, AX_SURFACE_EMIT_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { showToast } from '../state/attention-bridge';
 import { submitAxInteractionFromClient } from '../state/intent-bridge';
@@ -25,7 +25,9 @@ export function useAxSurfaceBridge(options: {
   iframeRef: RefObject<HTMLIFrameElement>;
 }): void {
   const { enabled, token, nodeId, sourceSurface, iframeRef } = options;
-  useEffect(() => {
+  // Register before paint: a fast iframe can accept input before passive effects
+  // run, and its first emit must not be lost in that gap.
+  useLayoutEffect(() => {
     if (!enabled || !token) return;
     function onAxMessage(event: MessageEvent) {
       // Bind to THIS node's own iframe; the nonce + nodeId are a second gate,

package/src/client/nodes/viewer-runtime-state.ts

@@ -0,0 +1,78 @@
+import { effect } from '@preact/signals';
+import { JSON_VIEWER_STATE_SOURCE } from '../../shared/ax-surface-protocol.js';
+import { canvasInteractionEpoch, nodes } from '../state/canvas-store';
+
+type Snapshot = {
+  epoch: number;
+  version: unknown;
+  documentUrl: unknown;
+  state: Record<string, unknown> | null;
+  owners: Array<{ token: string; source: Window }>;
+};
+
+// Tab-local UI state only: never persist form drafts in canvas data or AX. Keep
+// the receiver alive across the inline/expanded unmount so queued input messages
+// cannot fall into a gap between component effects. Two owners cover a handover;
+// removal, board navigation and authored spec changes discard the entire entry.
+const snapshots = new Map<string, Snapshot>();
+let listening = false;
+
+export function restoreViewerRuntimeState(nodeId: string, token: string, source: Window): void {
+  if (!listening) {
+    listening = true;
+    effect(() => {
+      const current = nodes.value;
+      const epoch = canvasInteractionEpoch.value;
+      for (const [id, snapshot] of snapshots) {
+        const node = current.get(id);
+        if (
+          !node ||
+          snapshot.epoch !== epoch ||
+          snapshot.version !== node.data.specVersion ||
+          snapshot.documentUrl !== node.data.url
+        )
+          snapshots.delete(id);
+      }
+    });
+    window.addEventListener('message', (event: MessageEvent) => {
+      const message = event.data as {
+        source?: string;
+        type?: string;
+        token?: string;
+        nodeId?: string;
+        state?: unknown;
+      } | null;
+      if (
+        !message ||
+        message.source !== JSON_VIEWER_STATE_SOURCE ||
+        message.type !== 'snapshot' ||
+        typeof message.nodeId !== 'string'
+      )
+        return;
+      const snapshot = snapshots.get(message.nodeId);
+      const ownerIndex =
+        snapshot?.owners.findIndex((owner) => owner.token === message.token && owner.source === event.source) ?? -1;
+      if (!snapshot || ownerIndex < 0) return;
+      if (!message.state || typeof message.state !== 'object' || Array.isArray(message.state)) return;
+      const { ax: _ax, ...state } = message.state as Record<string, unknown>;
+      snapshot.state = state;
+      // Once the replacement emits, the retired document cannot overwrite it.
+      snapshot.owners = snapshot.owners.slice(ownerIndex);
+    });
+  }
+  const node = nodes.value.get(nodeId);
+  if (!node) return;
+  let snapshot = snapshots.get(nodeId);
+  if (!snapshot) {
+    snapshot = {
+      epoch: canvasInteractionEpoch.value,
+      version: node.data.specVersion,
+      documentUrl: node.data.url,
+      state: null,
+      owners: [],
+    };
+    snapshots.set(nodeId, snapshot);
+  }
+  snapshot.owners = [...snapshot.owners.filter((owner) => owner.source !== source).slice(-1), { token, source }];
+  source.postMessage({ source: JSON_VIEWER_STATE_SOURCE, type: 'restore', token, state: snapshot.state }, '*');
+}

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

@@ -58,6 +58,8 @@ const EXCALIDRAW_CLOSE_MAX_WAIT_MS = 2500;
 
 // ── Pending edge connection (for context menu "Connect from") ─
 export const pendingConnection = signal<{ from: string } | null>(null);
+/** Invalidates in-flight interaction replies when board navigation resets the canvas. */
+export const canvasInteractionEpoch = signal(0);
 
 // ── Drag-to-connect (live edge preview) ─────────────────────
 export const draggingEdge = signal<{
@@ -151,6 +153,7 @@ export function resetCanvasInteractionState(): void {
     expandedCloseTimer = null;
   }
   batch(() => {
+    canvasInteractionEpoch.value += 1;
     activeNodeId.value = null;
     expandedNodeId.value = null;
     pendingExpandedNodeCloseId.value = null;

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

@@ -1,6 +1,8 @@
 import { canvasArea } from '../canvas/canvas-area';
 import { showToast } from './attention-bridge';
 import type { AgentPresenceSnapshot } from '../../shared/agent-presence.js';
+import type { CanvasEdge } from '../types';
+import { addEdge, canvasInteractionEpoch, nodes } from './canvas-store';
 function logRequestError(action: string, error: unknown): void {
   console.error(`[intent-bridge] ${action} failed`, error);
 }
@@ -261,14 +263,15 @@ export async function pushCanvasUpdate(
   });
 }
 
-/** Create a canvas edge via the server. */
+/** Render the server-confirmed edge immediately, without waiting for SSE/polling. */
 export async function createEdgeFromClient(
   from: string,
   to: string,
   type: string,
   label?: string,
 ): Promise<{ ok: boolean; id?: string }> {
-  return requestJson(
+  const epoch = canvasInteractionEpoch.value;
+  const result = await requestJson<({ ok: true } & CanvasEdge) | { ok: false; error?: string }>(
     'createEdgeFromClient',
     '/api/canvas/edge',
     { ok: false },
@@ -278,6 +281,15 @@ export async function createEdgeFromClient(
       body: JSON.stringify({ from, to, type, label }),
     },
   );
+  if (epoch === canvasInteractionEpoch.value && nodes.value.has(from) && nodes.value.has(to)) {
+    if (result.ok) {
+      const { ok, ...edge } = result;
+      addEdge(edge);
+    } else if (!result.error) {
+      showToast('remove', 'Connection not added', 'Could not reach the server. Try again.');
+    }
+  }
+  return result;
 }
 
 /** Create a canvas node via the server. Returns the new node ID. */