pmx-canvas 0.10.0 → 0.11.0

package/src/client/canvas/CanvasNode.tsx

@@ -1,4 +1,4 @@
-import { boardList } from '../state/boards-store';
+import { activeBoard, boardList } from '../state/boards-store';
 import { cardQualification, effectiveLifecycleFilter as lifecycleFilter } from '../state/knowledge-store';
 import { knowledgeLifecycleEnabled } from '../state/workspace-settings';
 import { relationHighlight } from '../state/relation-store';
@@ -50,7 +50,7 @@ import { AxStepControls } from '../nodes/AxStepControls';
 import { getNodeIcon, IconChevronRight, IconClose, IconMore, IconExpand, IconPin } from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
-import { AUTO_FIT_TITLEBAR_HEIGHT, computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
+import { computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
 import { activeGuides, buildSnapCache, clearSnapCache, snapToGuides } from './snap-guides';
 import { useNodeDrag } from './use-node-drag';
 import { useNodeResize } from './use-node-resize';
@@ -89,44 +89,6 @@ export function nearestNodeInDirection(
   return best;
 }
 
-/** Fraction of a node's height the title bar may occupy before it starts
- *  crowding out the content it is labelling. */
-const MAX_TITLEBAR_HEIGHT_RATIO = 0.4;
-/** Fraction of a node's width the fixed title-bar chrome may occupy before it
- *  starts eating the node's NAME. */
-const MAX_TITLEBAR_CHROME_WIDTH_RATIO = 0.55;
-/** Unscaled width of everything in the bar that is not the title: type icon,
- *  status/type pill, the control cluster, and the gaps between them. */
-const TITLEBAR_CHROME_BASE_WIDTH = 175;
-
-/**
- * How much to enlarge node chrome (title bar, badges, icons) when zoomed out so
- * it stays legible. Full inverse compensation is capped at 2.2x — but the cap
- * alone ignored the node it is drawn on, so on SHORT nodes the growing bar ate
- * the body: a 116px-tall section label at 46% zoom gave the title bar 72% of the
- * node and left 14px for text that needed 41, so the markdown was simply cut off.
- * The scale is therefore also bounded by the node's own height, keeping the bar
- * under MAX_TITLEBAR_HEIGHT_RATIO of it. Tall nodes are unaffected (their height
- * never binds); pass height 0 for collapsed/auto-height nodes to skip the bound.
- */
-export function nodeChromeScale(viewportScale: number, nodeHeight: number, nodeWidth = 0): number {
-  if (!Number.isFinite(viewportScale) || viewportScale >= 1) return 1;
-  const zoomScale = Math.min(2.2, 1 / Math.max(viewportScale, 0.01));
-  let bounded = zoomScale;
-  if (Number.isFinite(nodeHeight) && nodeHeight > 0) {
-    bounded = Math.min(bounded, (nodeHeight * MAX_TITLEBAR_HEIGHT_RATIO) / AUTO_FIT_TITLEBAR_HEIGHT);
-  }
-  // Width matters as much as height: the icon, pill and control cluster are all
-  // flex-shrink: 0, so the NAME is the only thing that gives way. Unbounded, a
-  // 360px step node at 52% zoom spent 100 of 187 bar pixels on controls alone and
-  // the title collapsed to nothing. Bound the scale so the fixed chrome can never
-  // take more than MAX_TITLEBAR_CHROME_WIDTH_RATIO of the node.
-  if (Number.isFinite(nodeWidth) && nodeWidth > 0) {
-    bounded = Math.min(bounded, (nodeWidth * MAX_TITLEBAR_CHROME_WIDTH_RATIO) / TITLEBAR_CHROME_BASE_WIDTH);
-  }
-  return Math.max(1, bounded);
-}
-
 /** A header title keeps at least this much room, or all of it when shorter (HeaderMarks.dc.html). */
 const TITLE_MIN_WIDTH = 140;
 
@@ -217,7 +179,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
       document.removeEventListener('keydown', escListener.current);
       escListener.current = null;
     }
-    persistLayout();
+    persistLayout({ raisedNodeId: node.id });
     // Membership changes ONLY here, and only while the pill was showing.
     const target = dragDropTarget.value;
     endDropTracking();
@@ -308,7 +270,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         toggleSelected(node.id);
         return;
       }
-      bringToFront(node.id);
+      bringToFront(node.id, false);
       // User wins (phase 8): hold the node for the drag; an agent mid-edit yields.
       reportHumanGrab(node.id);
       noteNearAtGrab(node.id);
@@ -359,6 +321,15 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     (e: KeyboardEvent) => {
       const target = e.target as HTMLElement | null;
       if (target && target !== e.currentTarget && target.closest('input, textarea, [contenteditable="true"]')) return;
+      if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
+        const more = shellRef.current?.querySelector<HTMLButtonElement>('.node-hover-control[aria-haspopup="menu"]');
+        if (more) {
+          e.preventDefault();
+          e.stopPropagation();
+          more.click();
+        }
+        return;
+      }
       const dir = ARROW_DIRS[e.key];
       if (dir) {
         e.preventDefault();
@@ -445,10 +416,14 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const isTrace = node.type === 'trace';
   const isTraceRunning = isTrace && node.data.status === 'running';
   const isGroup = node.type === 'group';
+  const isHeading = node.type === 'markdown' && node.data.display === 'heading';
+  const graphType = (node.data.graphConfig as { graphType?: string } | undefined)?.graphType;
   const isStrictSize = node.data.strictSize === true;
   const viewportScale = Math.max(viewport.value.scale, 0.01);
-  const chromeScale = nodeChromeScale(viewportScale, node.collapsed ? 0 : node.size.height, node.size.width);
-  const chipFold = useHeaderFold(titleRef, headerChip(node, isContextPinned), title, node.size.width, chromeScale);
+  // Text alone may grow within the fixed header line. Enlarging the whole bar
+  // resizes embedded viewports and reflows their content while zooming.
+  const titleScale = Math.min(1.2, Math.max(1, 1 / viewportScale));
+  const chipFold = useHeaderFold(titleRef, headerChip(node, isContextPinned), title, node.size.width, titleScale);
 
   const groupColor = isGroup && node.data.color ? (node.data.color as string) : undefined;
   const nodeStyle: Record<string, string | number> = {
@@ -457,7 +432,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     width: `${node.size.width}px`,
     height: node.collapsed ? 'auto' : `${node.size.height}px`,
     zIndex: node.zIndex,
-    '--node-chrome-scale': chromeScale.toFixed(3),
+    '--node-title-scale': titleScale.toFixed(3),
     '--node-port-scale': (1 / viewportScale).toFixed(3),
     ...(groupColor ? { '--group-color': groupColor } : {}),
   };
@@ -477,6 +452,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isTrace ? 'trace-node' : '',
     isTraceRunning ? 'trace-running' : '',
     isGroup ? 'group-node' : '',
+    isHeading ? 'heading-node' : '',
     isStrictSize ? 'strict-size' : '',
     isAgentMutating ? 'agent-mutating' : '',
     sessionChromeActive.value && sessionEditedIds.value.has(node.id) ? 'session-edited' : '',
@@ -623,7 +599,9 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 ) : (
                   <span class="group-name">{title}</span>
                 )}
-                <span class="group-count">{groupChildren.length}</span>
+                <span class="group-count">
+                  {groupChildren.length} {groupChildren.length === 1 ? 'node' : 'nodes'}
+                </span>
               </span>
               <span class="group-edge-spacer" />
               <span class="group-actions" role="toolbar" aria-label={`${title} actions`}>
@@ -740,7 +718,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               <NodeTypeIcon node={node} pinned={isContextPinned} title={title} fold={chipFold}>
                 {(() => {
                   const NodeIcon = getNodeIcon(node.type);
-                  return <NodeIcon size={Math.round(14 * chromeScale)} />;
+                  return <NodeIcon size={14} />;
                 })()}
               </NodeTypeIcon>
               {/* The kind-colored icon says what type this is (rail-chrome-v2 card
@@ -766,6 +744,14 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                   {title}
                 </span>
               )}
+              {activeBoard()?.readmeNodeId === node.id && <span class="node-readme-mark">README</span>}
+              {node.type === 'graph' && graphType && <span class="node-header-meta">{graphType}</span>}
+              {node.type === 'file' && <div class="node-file-toolbar" data-file-toolbar={node.id} />}
+              {node.type === 'status' && typeof node.data.updatedAt === 'string' && (
+                <time class="node-header-meta" dateTime={node.data.updatedAt}>
+                  {new Date(node.data.updatedAt).toLocaleTimeString()}
+                </time>
+              )}
               <NearPinMark node={node} pinned={isContextPinned} fold={chipFold} />
               <NodeContextMark node={node} pinned={isContextPinned} fold={chipFold} />
               <div class="node-controls">
@@ -827,6 +813,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                     onContextMenu?.(e, node.id);
                   }}
                   aria-label="More actions"
+                  aria-haspopup="menu"
                 >
                   <IconMore size={14} />
                 </button>

package/src/client/canvas/CanvasViewport.tsx

@@ -17,6 +17,7 @@ import { HtmlNode } from '../nodes/HtmlNode';
 import { PromptNode } from '../nodes/PromptNode';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
+import { ViewerHost } from '../nodes/ViewerHost';
 import {
   activeNodeId,
   cancelViewportAnimation,
@@ -111,9 +112,10 @@ class WorldNode extends Component<{
 
   render() {
     const { node, onContextMenu } = this.props;
+    const viewer = ['html', 'mcp-app', 'json-render', 'graph', 'webpage', 'mermaid'].includes(node.type);
     return (
       <CanvasNode node={node} onContextMenu={onContextMenu}>
-        {renderNodeContent(node)}
+        {viewer ? <ViewerHost node={node}>{renderNodeContent(node)}</ViewerHost> : renderNodeContent(node)}
       </CanvasNode>
     );
   }
@@ -873,9 +875,8 @@ export function CanvasViewport({
                   : 'default',
       }}
     >
-      {/* D4: CSS matrix(a,b,c,d,tx,ty) — scale uniformly (a=d=scale, b=c=0)
-          then translate (tx=v.x, ty=v.y). transformOrigin: '0 0' ensures
-          the scale pivot is the top-left corner of the world layer. */}
+      {/* Scale the complete spatial world proportionally, including iframe
+          contents. CSS zoom changes embedded viewport semantics in WebKit. */}
       <div
         ref={worldRef}
         class="canvas-world"
@@ -894,9 +895,7 @@ export function CanvasViewport({
         <IntentLayer />
         <AgentPresenceLayer />
         <HumanPresenceLayer />
-        <EdgeLayer nodes={nodes} edges={edges} part="lines" />
-        <EdgeLayer nodes={nodes} edges={edges} part="pills" />
-        <EdgeLayer nodes={nodes} edges={edges} part="pill-hits" />
+        <EdgeLayer nodes={nodes} edges={edges} />
         {draggingEdge.value && (
           <div
             class="edge-hint-pill"

package/src/client/canvas/ContextMenu.tsx

@@ -1,6 +1,6 @@
 import type { ComponentChildren } from 'preact';
 import { knowledgeLifecycleEnabled } from '../state/workspace-settings';
-import { useCallback, useLayoutEffect, useState } from 'preact/hooks';
+import { useCallback, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import {
   contextPinnedNodeIds,
   edges,
@@ -28,8 +28,9 @@ import {
   updateNodeFromClient,
 } from '../state/intent-bridge';
 import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
+import { canCopyPrimitiveJson, copyPrimitiveJson } from '../nodes/primitive-copy';
 import { askText } from './TextPrompt';
-import { activeBoard, boardIncarnation } from '../state/boards-store';
+import { activeBoard, boardIncarnation, setBoardReadme } from '../state/boards-store';
 import { openLifecycle } from '../state/knowledge-store';
 import { RELATION_KINDS, relationKind } from '../../shared/relations.js';
 import { EXPANDABLE_TYPES } from '../types';
@@ -62,7 +63,9 @@ export function useContextMenu() {
   const openNodeMenu = useCallback((e: MouseEvent, nodeId: string) => {
     e.preventDefault();
     e.stopPropagation();
-    setMenu({ kind: 'node', x: e.clientX, y: e.clientY, nodeId });
+    const trigger = e.detail === 0 && e.target instanceof Element ? e.target.closest('button') : null;
+    const bounds = trigger?.getBoundingClientRect();
+    setMenu({ kind: 'node', x: bounds?.left ?? e.clientX, y: bounds?.bottom ?? e.clientY, nodeId });
   }, []);
 
   const openCanvasMenu = useCallback((e: MouseEvent, canvasX: number, canvasY: number) => {
@@ -113,6 +116,21 @@ const GROUP_COLOR_PRESETS = [
 ] as const;
 
 export function ContextMenu({ menu, onClose }: ContextMenuProps) {
+  const root = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const element = root.current;
+    const trigger = document.activeElement;
+    element?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
+    return () => {
+      if (element?.contains(document.activeElement) && trigger instanceof HTMLElement && trigger.isConnected) {
+        // Card controls hide when the menu takes focus. Reveal the opener
+        // through its card before restoring focus to the button itself.
+        trigger.closest<HTMLElement>('.canvas-node')?.focus({ preventScroll: true });
+        trigger.focus({ preventScroll: true });
+      }
+    };
+  }, [menu]);
+
   let items: MenuItem[];
   if (menu.kind === 'node') {
     const node = nodes.value.get(menu.nodeId);
@@ -215,6 +233,9 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
 
   return (
     <div
+      ref={root}
+      role="menu"
+      aria-label={menu.kind === 'node' ? 'Node actions' : menu.kind === 'edge' ? 'Edge actions' : 'Canvas actions'}
       class="context-menu"
       style={{
         position: 'fixed',
@@ -224,6 +245,27 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
       }}
       onPointerDown={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
+      onBlur={(e) => {
+        if (e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget)) onClose();
+      }}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          onClose();
+        } else if (e.target instanceof HTMLButtonElement && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
+          e.preventDefault();
+          const controls = [...e.currentTarget.querySelectorAll<HTMLElement>('button:not(:disabled), input, select')];
+          const index = controls.indexOf(e.target);
+          const next =
+            e.key === 'Home'
+              ? 0
+              : e.key === 'End'
+                ? controls.length - 1
+                : (index + (e.key === 'ArrowUp' ? -1 : 1) + controls.length) % controls.length;
+          controls[next]?.focus();
+        }
+      }}
     >
       {items.map((item) => {
         const baseKey = item.separator
@@ -251,6 +293,8 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
           <button
             key={itemKey}
             type="button"
+            role="menuitem"
+            disabled={!item.action}
             class={`context-menu-item${item.danger ? ' is-danger' : ''}`}
             onClick={() => {
               item.action?.();
@@ -622,6 +666,22 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   items.push({ separator: true });
 
   // Type-specific
+  if (canCopyPrimitiveJson(node)) {
+    items.push({ label: 'Copy JSON', action: () => void copyPrimitiveJson(node.id) });
+  }
+  if (node.type === 'markdown') {
+    items.push({
+      label: node.data.display === 'heading' ? 'Display as card' : 'Display as heading',
+      action: () =>
+        void updateNodeFromClient(node.id, { data: { display: node.data.display === 'heading' ? 'card' : 'heading' } }),
+    });
+    const board = activeBoard();
+    if (board)
+      items.push({
+        label: board.readmeNodeId === node.id ? 'Remove as README' : 'Set as README',
+        action: () => void setBoardReadme(board.id, board.readmeNodeId === node.id ? null : node.id),
+      });
+  }
   if ((node.type === 'markdown' || node.type === 'file' || node.type === 'image') && localPath) {
     items.push({
       label: 'Open in browser',