pmx-canvas 0.7.1 → 0.7.3

package/src/client/canvas/CanvasNode.tsx

@@ -38,7 +38,16 @@ import { KIND_COLOR } from './kind-colors';
 import { reportHumanGrab, takeOverNode, yieldedNodes } from '../state/human-store';
 import { AxStepControls } from '../nodes/AxStepControls';
 import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
-import { getNodeIcon } from '../icons';
+import {
+  getNodeIcon,
+  IconChevronRight,
+  IconChevronDown,
+  IconClose,
+  IconMore,
+  IconExternalLink,
+  IconExpand,
+  IconSparkle,
+} from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 import { AUTO_FIT_TITLEBAR_HEIGHT, computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
@@ -405,6 +414,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     height: node.collapsed ? 'auto' : `${node.size.height}px`,
     zIndex: node.zIndex,
     '--node-chrome-scale': chromeScale.toFixed(3),
+    '--node-port-scale': (1 / viewportScale).toFixed(3),
     ...(groupColor ? { '--group-color': groupColor } : {}),
   };
   // Shimmer while an attached agent is mutating this node (rail-chrome-v2
@@ -472,7 +482,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               toggleCollapsed(node.id);
             }}
           >
-            ▸
+            <IconChevronRight size={14} />
           </button>
           <div class="group-chip-text">
             <div class="group-chip-name">{title}</div>
@@ -506,13 +516,156 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
       }}
       onDblClick={handleDblClick}
     >
-      {isGroup && (
-        <div class="node-titlebar group-edge-row" onPointerDown={handleTitlePointerDown}>
-          <span class="group-name-pill">
+      <div class="node-content">
+        {isGroup && (
+          <div class="node-titlebar group-edge-row" onPointerDown={handleTitlePointerDown}>
+            <span class="group-name-pill">
+              {renaming ? (
+                <input
+                  ref={renameRef}
+                  class="node-title-input group-title-input"
+                  value={title}
+                  onBlur={(e) => commitRename((e.target as HTMLInputElement).value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') commitRename((e.target as HTMLInputElement).value);
+                    if (e.key === 'Escape') setRenaming(false);
+                  }}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              ) : (
+                <span class="group-name" title={title}>
+                  {title}
+                </span>
+              )}
+              <span class="group-count">{groupChildren.length}</span>
+            </span>
+            <span class="group-edge-spacer" />
+            <span class="group-actions" role="toolbar" aria-label={`${title} actions`}>
+              <button
+                type="button"
+                class="group-action"
+                title="Auto-arrange children"
+                aria-label="Auto-arrange children"
+                disabled={groupChildren.length === 0}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void addToGroupFromClient(node.id, groupChildren, 'grid');
+                }}
+              >
+                <svg
+                  width="11"
+                  height="11"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  aria-hidden="true"
+                >
+                  <rect x="1.5" y="1.5" width="5" height="5" rx="1" />
+                  <rect x="9.5" y="1.5" width="5" height="5" rx="1" />
+                  <rect x="1.5" y="9.5" width="5" height="5" rx="1" />
+                  <rect x="9.5" y="9.5" width="5" height="5" rx="1" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="group-action"
+                title="Collapse group"
+                aria-label="Collapse group"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleCollapsed(node.id);
+                }}
+              >
+                <svg
+                  width="11"
+                  height="11"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M3 10 L8 5 L13 10" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="group-action"
+                title="Rename · Ungroup · Pin all to context"
+                aria-label="Group menu"
+                aria-expanded={groupMenuOpen}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setGroupMenuOpen((open) => !open);
+                }}
+              >
+                <IconMore size={14} />
+              </button>
+              {groupMenuOpen && (
+                <div class="group-menu" role="menu" onPointerDown={(e) => e.stopPropagation()}>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setGroupMenuOpen(false);
+                      setRenaming(true);
+                      requestAnimationFrame(() => renameRef.current?.focus());
+                    }}
+                  >
+                    Rename
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setGroupMenuOpen(false);
+                      // Dissolve — the same op an agent's ungroup runs.
+                      removeNode(node.id);
+                      void ungroupFromClient(node.id);
+                    }}
+                  >
+                    Ungroup
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    disabled={groupChildren.length === 0}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setGroupMenuOpen(false);
+                      addContextPins(groupChildren);
+                    }}
+                  >
+                    Pin all to context
+                  </button>
+                </div>
+              )}
+            </span>
+          </div>
+        )}
+        {!isGroup && (
+          <div class="node-titlebar" onPointerDown={handleTitlePointerDown}>
+            <span class="node-type-icon" aria-hidden="true">
+              {(() => {
+                const NodeIcon = getNodeIcon(node.type);
+                return <NodeIcon size={Math.round(14 * chromeScale)} />;
+              })()}
+            </span>
+            {/* The kind-colored icon says what type this is (rail-chrome-v2 card
+            shell: icon · title · controls, no type badge). Only the AX status
+            chip joins it, and only when there is a status to show. */}
+            {typeof node.data.axWorkStatus === 'string' && (
+              <span class={`node-ax-status node-ax-status-${node.data.axWorkStatus}`}>{node.data.axWorkStatus}</span>
+            )}
             {renaming ? (
               <input
                 ref={renameRef}
-                class="node-title-input group-title-input"
+                class="node-title-input"
                 value={title}
                 onBlur={(e) => commitRename((e.target as HTMLInputElement).value)}
                 onKeyDown={(e) => {
@@ -522,234 +675,93 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 onClick={(e) => e.stopPropagation()}
               />
             ) : (
-              <span class="group-name" title={title}>
+              <span class="node-title" title={title}>
                 {title}
               </span>
             )}
-            <span class="group-count">{groupChildren.length}</span>
-          </span>
-          <span class="group-edge-spacer" />
-          <span class="group-actions" role="toolbar" aria-label={`${title} actions`}>
-            <button
-              type="button"
-              class="group-action"
-              title="Auto-arrange children"
-              aria-label="Auto-arrange children"
-              disabled={groupChildren.length === 0}
-              onClick={(e) => {
-                e.stopPropagation();
-                void addToGroupFromClient(node.id, groupChildren, 'grid');
-              }}
-            >
-              <svg
-                width="11"
-                height="11"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                aria-hidden="true"
-              >
-                <rect x="1.5" y="1.5" width="5" height="5" rx="1" />
-                <rect x="9.5" y="1.5" width="5" height="5" rx="1" />
-                <rect x="1.5" y="9.5" width="5" height="5" rx="1" />
-                <rect x="9.5" y="9.5" width="5" height="5" rx="1" />
-              </svg>
-            </button>
-            <button
-              type="button"
-              class="group-action"
-              title="Collapse group"
-              aria-label="Collapse group"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCollapsed(node.id);
-              }}
-            >
-              <svg
-                width="11"
-                height="11"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
+            <div class="node-controls">
+              {isPinned && (
+                <span class="pin-indicator" title="Pinned">
+                  ⊙
+                </span>
+              )}
+              <button
+                type="button"
+                class={`ctx-pin-btn${isContextPinned ? ' ctx-pin-active' : ''}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleContextPin(node.id);
+                }}
+                title={isContextPinned ? 'Remove from context' : 'Add to context'}
               >
-                <path d="M3 10 L8 5 L13 10" />
-              </svg>
-            </button>
-            <button
-              type="button"
-              class="group-action"
-              title="Rename · Ungroup · Pin all to context"
-              aria-label="Group menu"
-              aria-expanded={groupMenuOpen}
-              onClick={(e) => {
-                e.stopPropagation();
-                setGroupMenuOpen((open) => !open);
-              }}
-            >
-              ⋯
-            </button>
-            {groupMenuOpen && (
-              <div class="group-menu" role="menu" onPointerDown={(e) => e.stopPropagation()}>
-                <button
-                  type="button"
-                  role="menuitem"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setGroupMenuOpen(false);
-                    setRenaming(true);
-                    requestAnimationFrame(() => renameRef.current?.focus());
-                  }}
-                >
-                  Rename
-                </button>
+                <IconSparkle size={14} />
+              </button>
+              {/* Open as site — full-page standalone view of this node's surface,
+              served from /api/canvas/surface/:id (same document as the canvas
+              iframe). Opens via the system browser so embedded hosts do not trap
+              it in their own webview. */}
+              {canOpenAsSite(node) && (
                 <button
                   type="button"
-                  role="menuitem"
                   onClick={(e) => {
                     e.stopPropagation();
-                    setGroupMenuOpen(false);
-                    // Dissolve — the same op an agent's ungroup runs.
-                    removeNode(node.id);
-                    void ungroupFromClient(node.id);
+                    void openNodeAsSite(node);
                   }}
+                  title="Open as site"
                 >
-                  Ungroup
+                  <IconExternalLink size={14} />
                 </button>
+              )}
+              {/* Expand — opens node as full-viewport overlay for focused work */}
+              {EXPANDABLE_TYPES.has(node.type) && (
                 <button
                   type="button"
-                  role="menuitem"
-                  disabled={groupChildren.length === 0}
                   onClick={(e) => {
                     e.stopPropagation();
-                    setGroupMenuOpen(false);
-                    addContextPins(groupChildren);
+                    expandNode(node.id);
                   }}
+                  title="Expand (focus mode)"
                 >
-                  Pin all to context
+                  <IconExpand size={14} />
                 </button>
-              </div>
-            )}
-          </span>
-        </div>
-      )}
-      {!isGroup && (
-        <div class="node-titlebar" onPointerDown={handleTitlePointerDown}>
-          <span class="node-type-icon" aria-hidden="true">
-            {(() => {
-              const NodeIcon = getNodeIcon(node.type);
-              return <NodeIcon size={Math.round(14 * chromeScale)} />;
-            })()}
-          </span>
-          {/* The kind-colored icon says what type this is (rail-chrome-v2 card
-            shell: icon · title · controls, no type badge). Only the AX status
-            chip joins it, and only when there is a status to show. */}
-          {typeof node.data.axWorkStatus === 'string' && (
-            <span class={`node-ax-status node-ax-status-${node.data.axWorkStatus}`}>{node.data.axWorkStatus}</span>
-          )}
-          {renaming ? (
-            <input
-              ref={renameRef}
-              class="node-title-input"
-              value={title}
-              onBlur={(e) => commitRename((e.target as HTMLInputElement).value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') commitRename((e.target as HTMLInputElement).value);
-                if (e.key === 'Escape') setRenaming(false);
-              }}
-              onClick={(e) => e.stopPropagation()}
-            />
-          ) : (
-            <span class="node-title" title={title}>
-              {title}
-            </span>
-          )}
-          <div class="node-controls">
-            {isPinned && (
-              <span class="pin-indicator" title="Pinned">
-                ⊙
-              </span>
-            )}
-            <button
-              type="button"
-              class={`ctx-pin-btn${isContextPinned ? ' ctx-pin-active' : ''}`}
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleContextPin(node.id);
-              }}
-              title={isContextPinned ? 'Remove from context' : 'Add to context'}
-            >
-              {'\u2726'}
-            </button>
-            {/* Open as site — full-page standalone view of this node's surface,
-              served from /api/canvas/surface/:id (same document as the canvas
-              iframe). Opens via the system browser so embedded hosts do not trap
-              it in their own webview. */}
-            {canOpenAsSite(node) && (
+              )}
               <button
                 type="button"
                 onClick={(e) => {
                   e.stopPropagation();
-                  void openNodeAsSite(node);
+                  toggleCollapsed(node.id);
                 }}
-                title="Open as site"
+                title={node.collapsed ? 'Expand' : 'Collapse'}
               >
-                ↗
+                {node.collapsed ? <IconChevronRight size={14} /> : <IconChevronDown size={14} />}
               </button>
-            )}
-            {/* Expand — opens node as full-viewport overlay for focused work */}
-            {EXPANDABLE_TYPES.has(node.type) && (
+              {/* Report #64: status nodes get the same remove control as every other
+              node type (backend removal + undo/history handle status uniformly). */}
               <button
                 type="button"
                 onClick={(e) => {
                   e.stopPropagation();
-                  expandNode(node.id);
+                  void removeNodeFromClient(node.id);
                 }}
-                title="Expand (focus mode)"
+                title="Close"
               >
-                ⤢
+                <IconClose size={14} />
               </button>
-            )}
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCollapsed(node.id);
-              }}
-              title={node.collapsed ? 'Expand' : 'Collapse'}
-            >
-              {node.collapsed ? '▸' : '▾'}
-            </button>
-            {/* Report #64: status nodes get the same remove control as every other
-              node type (backend removal + undo/history handle status uniformly). */}
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                void removeNodeFromClient(node.id);
-              }}
-              title="Close"
-            >
-              ×
-            </button>
+            </div>
           </div>
-        </div>
-      )}
-      {!node.collapsed && (
-        <div ref={bodyRef} class="node-body">
-          {children}
-          {/* AX flow step controls — rendered here rather than in a node renderer
+        )}
+        {!node.collapsed && (
+          <div ref={bodyRef} class="node-body">
+            {children}
+            {/* AX flow step controls — rendered here rather than in a node renderer
               because a materialized step can be ANY node type, and because the
               body is what auto-fit measures (a footer outside it would be clipped
               on a content-fitted node). Renders nothing unless the node carries a
               `data.axStep` stamp. */}
-          <AxStepControls node={node} />
-        </div>
-      )}
+            <AxStepControls node={node} />
+          </div>
+        )}
+      </div>
       {!node.collapsed && (
         <div class="node-resize-handle" onPointerDown={(e) => startResize(e, node.size.width, node.size.height)} />
       )}
@@ -772,8 +784,10 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
             key={side}
             class={`node-port node-port-${side}`}
             onPointerDown={(e) => {
+              if (e.button !== 0) return;
               e.stopPropagation();
               e.preventDefault();
+              e.currentTarget.setPointerCapture(e.pointerId);
               const cx = node.position.x + node.size.width / 2;
               const cy = node.position.y + node.size.height / 2;
               const hw = node.size.width / 2;

package/src/client/canvas/CanvasViewport.tsx

@@ -652,12 +652,18 @@ export function CanvasViewport({
       }
     }
 
+    function handleCancel() {
+      draggingEdge.value = null;
+    }
+
     document.addEventListener('pointermove', handleMove);
     document.addEventListener('pointerup', handleUp);
+    document.addEventListener('pointercancel', handleCancel);
     document.addEventListener('keydown', handleKey);
     return () => {
       document.removeEventListener('pointermove', handleMove);
       document.removeEventListener('pointerup', handleUp);
+      document.removeEventListener('pointercancel', handleCancel);
       document.removeEventListener('keydown', handleKey);
     };
   }, [containerRef]);

package/src/client/canvas/ChoiceMenu.tsx

@@ -0,0 +1,122 @@
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { IconChevronDown } from '../icons';
+
+/** Themed single-choice menu shared by the feedback form and steering composer. */
+export function ChoiceMenu({
+  label,
+  value,
+  options,
+  onChange,
+  className = '',
+  above = false,
+}: {
+  label: string;
+  value: string;
+  options: Array<{ value: string; label: string; disabled?: boolean }>;
+  onChange: (value: string) => void;
+  className?: string;
+  above?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const menu = useRef<HTMLDivElement>(null);
+  const close = () => {
+    setOpen(false);
+    trigger.current?.focus();
+  };
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const selected = menu.current?.querySelector<HTMLButtonElement>('[aria-checked="true"]:not(:disabled)');
+    (selected ?? menu.current?.querySelector<HTMLButtonElement>('button:not(:disabled)'))?.focus();
+    const outside = (event: PointerEvent) => {
+      if (event.target instanceof Node && !root.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', outside);
+    return () => document.removeEventListener('pointerdown', outside);
+  }, [open]);
+
+  return (
+    <div
+      ref={root}
+      class={`choice-menu ${className}`}
+      onBlur={(e) => {
+        if (e.relatedTarget instanceof Node && !root.current?.contains(e.relatedTarget)) setOpen(false);
+      }}
+      onKeyDown={(e) => {
+        // Menu typing/navigation must not trigger canvas tool shortcuts.
+        // Tab still reaches modal focus traps; closed Escape reaches the dialog.
+        if (e.key !== 'Tab' && (e.key !== 'Escape' || open)) e.stopPropagation();
+        if (e.key === 'Escape' && open) {
+          e.preventDefault();
+          e.stopPropagation();
+          close();
+        }
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!open) {
+            setOpen(true);
+            return;
+          }
+          const items = [...(menu.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ?? [])];
+          if (!items.length) return;
+          const index = items.findIndex((item) => item === document.activeElement);
+          const next =
+            e.key === 'Home'
+              ? 0
+              : e.key === 'End'
+                ? items.length - 1
+                : (index + (e.key === 'ArrowUp' ? -1 : 1) + items.length) % items.length;
+          items[next]?.focus();
+        }
+      }}
+    >
+      <button
+        ref={trigger}
+        type="button"
+        class="choice-menu-trigger"
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+      >
+        <span>{options.find((option) => option.value === value)?.label ?? label}</span>
+        <IconChevronDown size={14} />
+      </button>
+      {open && (
+        <div
+          ref={menu}
+          role="menu"
+          aria-label={label}
+          class={`toolbar-menu choice-menu-options${above ? ' opens-above' : ''}`}
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              role="menuitemradio"
+              class={`toolbar-menu-item${option.value === value ? ' active' : ''}`}
+              aria-checked={option.value === value}
+              disabled={option.disabled}
+              tabIndex={-1}
+              data-value={option.value}
+              onClick={() => {
+                onChange(option.value);
+                close();
+              }}
+            >
+              <span>{option.label}</span>
+              {option.value === value && (
+                <span class="toolbar-menu-check" aria-hidden="true">
+                  ✓
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}