pmx-canvas 0.7.2 → 0.8.0

package/src/client/canvas/AgentPresenceLayer.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'preact/hooks';
-import { agentIdentityHue, agentPhaseLabel, type AgentPresence } from '../../shared/agent-presence.js';
+import { agentPhaseLabel, type AgentPresence } from '../../shared/agent-presence.js';
 import { nodes, viewport } from '../state/canvas-store';
-import { agentPresences, presenceWorldPosition } from '../state/presence-store';
+import { agentPresences, presenceWorldPosition, writerColor } from '../state/presence-store';
 
 /**
  * Agent presence layer (rail-chrome-v2 phase 3): one cursor + phase chip per
@@ -49,7 +49,7 @@ export function AgentPresenceLayer() {
           data-session-id={presence.sessionId}
           style={{
             transform: `translate(${position.x}px, ${position.y}px)`,
-            '--identity-color': `hsl(${agentIdentityHue(presence.sessionId)} 65% 62%)`,
+            '--identity-color': writerColor(presence.sessionId),
           }}
         >
           <div class="agent-cursor-inner" style={{ transform: `scale(${counterScale})` }}>

package/src/client/canvas/AnnotationLayer.tsx

@@ -23,7 +23,7 @@ export function AnnotationLayer({ annotations }: { annotations: CanvasAnnotation
               y={point.y}
               fill={color}
               font-size={annotation.width}
-              font-family="var(--font)"
+              font-family="var(--font-ui)"
               font-weight="700"
               opacity="0.95"
             >

package/src/client/canvas/CanvasNode.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { mutatingNodeIds, sessionActive } from '../state/presence-store';
-import { attentionPrimaryNodeIds, attentionPulseNodeIds, attentionSecondaryNodeIds } from '../state/attention-store';
+import { attentionPulseNodeIds } from '../state/attention-store';
+import { isAgentPin, NearPinMark, NodeContextMark } from './NodeContextMark';
+import { activityLensNodeIds } from '../state/session-store';
 import {
   activeNodeId,
   activeNeighborNodeIds,
@@ -34,20 +36,9 @@ import {
   ungroupFromClient,
   updateNodeFromClient,
 } from '../state/intent-bridge';
-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,
-  IconChevronRight,
-  IconChevronDown,
-  IconClose,
-  IconMore,
-  IconExternalLink,
-  IconExpand,
-  IconSparkle,
-} from '../icons';
+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';
@@ -137,8 +128,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const isActive = activeNodeId.value === node.id;
   const isSelected = selectedNodeIds.value.has(node.id);
   const isContextPinned = contextPinnedNodeIds.value.has(node.id);
-  const isAttentionPrimary = attentionPrimaryNodeIds.value.has(node.id);
-  const isAttentionSecondary = !isAttentionPrimary && attentionSecondaryNodeIds.value.has(node.id);
   const isAttentionPulse = attentionPulseNodeIds.value.has(node.id);
   const isNeighbor = !isActive && activeNeighborNodeIds.value.has(node.id);
   const searchSet = searchHighlightIds.value;
@@ -414,6 +403,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
@@ -427,8 +417,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isSearchDimmed ? 'search-dimmed' : '',
     isSelected ? 'selected' : '',
     isContextPinned ? 'context-pinned' : '',
-    isAttentionPrimary ? 'attention-focus-primary' : '',
-    isAttentionSecondary ? 'attention-focus-secondary' : '',
     isAttentionPulse ? 'attention-pulse' : '',
     isPinned ? 'pinned' : '',
     isTrace ? 'trace-node' : '',
@@ -436,6 +424,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isGroup ? 'group-node' : '',
     isStrictSize ? 'strict-size' : '',
     isAgentMutating ? 'agent-mutating' : '',
+    activityLensNodeIds.value && !activityLensNodeIds.value.has(node.id) ? 'lens-dimmed' : '',
   ]
     .filter(Boolean)
     .join(' ');
@@ -487,7 +476,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
             <div class="group-chip-name">{title}</div>
             <div class="group-chip-meta">
               {groupKindDots.map((kind) => (
-                <span key={kind} class="group-kind-dot" style={{ background: KIND_COLOR[kind] }} aria-hidden="true" />
+                <span key={kind} class="group-kind-dot" aria-hidden="true" />
               ))}
               <span class="group-chip-count">
                 {groupChildren.length} node{groupChildren.length === 1 ? '' : 's'}
@@ -515,13 +504,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) => {
@@ -531,234 +663,88 @@ 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"
-              >
-                <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()}>
+            <NearPinMark node={node} pinned={isContextPinned} />
+            <NodeContextMark node={node} pinned={isContextPinned} />
+            <div class="node-controls">
+              {isPinned && (
+                <span class="pin-indicator" title="Pinned">
+                  ⊙
+                </span>
+              )}
+              {/* Expand and the context pin always show; the rest sit behind ⋯ and ×
+              on hover (docs/design/Chrome.dc.html). */}
+              {EXPANDABLE_TYPES.has(node.type) && (
                 <button
                   type="button"
-                  role="menuitem"
                   onClick={(e) => {
                     e.stopPropagation();
-                    setGroupMenuOpen(false);
-                    setRenaming(true);
-                    requestAnimationFrame(() => renameRef.current?.focus());
+                    expandNode(node.id);
                   }}
+                  title="Expand (focus mode)"
                 >
-                  Rename
+                  <IconExpand size={14} />
                 </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"
-              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'}
-            >
-              <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"
+                class={`ctx-pin-btn${isContextPinned ? ' ctx-pin-active' : ''}`}
                 onClick={(e) => {
                   e.stopPropagation();
-                  void openNodeAsSite(node);
+                  toggleContextPin(node.id);
                 }}
-                title="Open as site"
+                title={isContextPinned ? 'Remove from context' : 'Add to context'}
+                aria-label={isContextPinned ? 'Remove from context' : 'Add to context'}
+                aria-pressed={isContextPinned}
               >
-                <IconExternalLink size={14} />
+                <span class="ctx-pin-mark">
+                  <IconPin />
+                  {isContextPinned && isAgentPin(node.id) && <span class="ctx-pin-agent-dot" aria-hidden="true" />}
+                </span>
               </button>
-            )}
-            {/* Expand — opens node as full-viewport overlay for focused work */}
-            {EXPANDABLE_TYPES.has(node.type) && (
               <button
                 type="button"
+                class="node-hover-control"
                 onClick={(e) => {
                   e.stopPropagation();
-                  expandNode(node.id);
+                  onContextMenu?.(e, node.id);
                 }}
-                title="Expand (focus mode)"
+                title="More actions"
+                aria-label="More actions"
               >
-                <IconExpand size={14} />
+                <IconMore size={14} />
               </button>
-            )}
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCollapsed(node.id);
-              }}
-              title={node.collapsed ? 'Expand' : 'Collapse'}
-            >
-              {node.collapsed ? <IconChevronRight size={14} /> : <IconChevronDown size={14} />}
-            </button>
-            {/* Report #64: status nodes get the same remove control as every other
+              {/* 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"
-            >
-              <IconClose size={14} />
-            </button>
+              <button
+                type="button"
+                class="node-hover-control"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void removeNodeFromClient(node.id);
+                }}
+                title="Close"
+              >
+                <IconClose size={14} />
+              </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)} />
       )}
@@ -781,8 +767,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

@@ -38,7 +38,6 @@ import {
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
 import type { AnnotationTool, CanvasAnnotation, CanvasNodeState } from '../types';
-import { FocusFieldLayer } from './FocusFieldLayer';
 import { importFiles } from './import-files';
 import { IntentLayer } from './IntentLayer';
 import { AgentPresenceLayer } from './AgentPresenceLayer';
@@ -652,12 +651,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]);
@@ -849,7 +854,6 @@ export function CanvasViewport({
           left: 0,
         }}
       >
-        <FocusFieldLayer />
         <ScopeFenceLayer />
         <IntentLayer />
         <AgentPresenceLayer />