pmx-canvas 0.4.7 → 0.5.0

package/src/client/canvas/Minimap.tsx

@@ -1,12 +1,25 @@
+import { agentIdentityHue } from '../../shared/agent-presence.js';
 import type { Signal } from '@preact/signals';
-import { useSignalEffect } from '@preact/signals';
-import { useCallback, useEffect, useRef } from 'preact/hooks';
-import { canvasTheme } from '../state/canvas-store';
-import { getCanvasTokens } from '../theme/tokens';
+import { useCallback, useRef } from 'preact/hooks';
+import { fenceRectFromNodes } from '../../shared/scope-fence.js';
+import { selectedNodeIds } from '../state/canvas-store';
+import { agentPresences, presenceWorldPosition } from '../state/presence-store';
+import { scopeFence } from '../state/session-store';
 import type { CanvasEdge, CanvasNodeState, ViewportState } from '../types';
-
-const MINIMAP_W = 180;
-const MINIMAP_H = 120;
+import { KIND_COLOR } from './kind-colors';
+
+/**
+ * Minimap v2 (rail-chrome-v2 phase 7, design item 19): a true-scale node map
+ * rendered from the store — each node a scaled rect in its kind color, groups
+ * and the scope fence as dashed outlines, the viewport frame with a grab
+ * cursor, the zoom % in the corner, selection outlines mirrored, and a pulsing
+ * violet dot where an attached agent is. 168×112 at rest; hovering magnifies
+ * the whole map ×1.7 from the bottom-right corner (CSS). Click jumps the
+ * viewport; dragging pans.
+ */
+
+export const MINIMAP_W = 168;
+export const MINIMAP_H = 112;
 const PADDING = 20;
 
 interface MinimapBounds {
@@ -21,39 +34,6 @@ interface MinimapFrame {
   scale: number;
 }
 
-function getNodeColors(): Record<CanvasNodeState['type'], string> {
-  const t = getCanvasTokens();
-  return {
-    markdown: t.accent,
-    'mcp-app': t.ok,
-    webpage: t.warn,
-    'json-render': t.ok,
-    graph: t.purple,
-    prompt: t.accent,
-    response: t.ok,
-    status: t.warn,
-    context: t.muted,
-    ledger: t.dim,
-    trace: t.purple,
-    file: t.accent,
-    diff: t.ok,
-    mermaid: t.purple,
-    image: t.ok,
-    html: t.warn,
-    group: t.dim,
-  };
-}
-
-function getEdgeColors(): Record<CanvasEdge['type'], string> {
-  const t = getCanvasTokens();
-  return {
-    relation: t.muted,
-    'depends-on': t.warn,
-    flow: t.accent,
-    references: t.dim,
-  };
-}
-
 export function computeMinimapFrame(
   nodeMap: Map<string, CanvasNodeState>,
   currentViewport: ViewportState,
@@ -110,139 +90,32 @@ interface MinimapProps {
   containerHeight: number;
 }
 
-export function Minimap({ viewport, nodes, edges, onNavigate, containerWidth, containerHeight }: MinimapProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
+export function Minimap({ viewport, nodes, onNavigate, containerWidth, containerHeight }: MinimapProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
   const isDragging = useRef(false);
-  const frameRef = useRef<MinimapFrame | null>(null);
-  const drawRafId = useRef<number | null>(null);
-
-  const draw = useCallback(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    const nodeMap = nodes.value;
-    const edgeMap = edges.value;
-    const currentViewport = viewport.value;
-
-    const dpr = window.devicePixelRatio || 1;
-    canvas.width = MINIMAP_W * dpr;
-    canvas.height = MINIMAP_H * dpr;
-    ctx.scale(dpr, dpr);
-
-    // Clear
-    ctx.clearRect(0, 0, MINIMAP_W, MINIMAP_H);
-    const t = getCanvasTokens();
-    ctx.fillStyle = t.panel + 'd9'; // panel color with ~85% alpha
-    ctx.fillRect(0, 0, MINIMAP_W, MINIMAP_H);
-
-    const frame = computeMinimapFrame(nodeMap, currentViewport, containerWidth, containerHeight);
-    frameRef.current = frame;
-    const { bounds, scale } = frame;
-
-    const toMiniX = (x: number) => (x - bounds.minX) * scale;
-    const toMiniY = (y: number) => (y - bounds.minY) * scale;
-
-    // Draw nodes
-    const all = Array.from(nodeMap.values());
-    const nodeColors = getNodeColors();
-    for (const n of all) {
-      ctx.fillStyle = nodeColors[n.type] ?? t.muted;
-      ctx.globalAlpha = 0.6;
-      ctx.fillRect(
-        toMiniX(n.position.x),
-        toMiniY(n.position.y),
-        Math.max(4, n.size.width * scale),
-        Math.max(3, n.size.height * scale),
-      );
-    }
-
-    const edgeColors = getEdgeColors();
-    for (const edge of edgeMap.values()) {
-      const fromNode = nodeMap.get(edge.from);
-      const toNode = nodeMap.get(edge.to);
-      if (!fromNode || !toNode) continue;
-      const fromCx = toMiniX(fromNode.position.x + fromNode.size.width / 2);
-      const fromCy = toMiniY(fromNode.position.y + fromNode.size.height / 2);
-      const toCx = toMiniX(toNode.position.x + toNode.size.width / 2);
-      const toCy = toMiniY(toNode.position.y + toNode.size.height / 2);
-      ctx.beginPath();
-      ctx.moveTo(fromCx, fromCy);
-      ctx.lineTo(toCx, toCy);
-      ctx.strokeStyle = edgeColors[edge.type] ?? t.muted;
-      ctx.globalAlpha = 0.3;
-      ctx.lineWidth = 0.5;
-      ctx.stroke();
-    }
-
-    // Draw viewport rectangle
-    const vpLeft = -currentViewport.x / currentViewport.scale;
-    const vpTop = -currentViewport.y / currentViewport.scale;
-    const vpW = containerWidth / currentViewport.scale;
-    const vpH = containerHeight / currentViewport.scale;
-
-    ctx.globalAlpha = 1;
-    ctx.strokeStyle = t.accent;
-    ctx.lineWidth = 1.5;
-    ctx.strokeRect(toMiniX(vpLeft), toMiniY(vpTop), vpW * scale, vpH * scale);
-  }, [nodes, edges, viewport, containerWidth, containerHeight]);
-
-  const drawRef = useRef(draw);
-  drawRef.current = draw;
-
-  const scheduleDraw = useCallback(() => {
-    if (drawRafId.current !== null) return;
-    drawRafId.current = window.requestAnimationFrame(() => {
-      drawRafId.current = null;
-      drawRef.current();
-    });
-  }, []);
 
-  // Redraw on state changes (including theme)
-  useSignalEffect(() => {
-    void canvasTheme.value;
-    void nodes.value;
-    void edges.value;
-    void viewport.value;
-    scheduleDraw();
-  });
-
-  useEffect(() => {
-    scheduleDraw();
-  }, [containerWidth, containerHeight, scheduleDraw]);
-
-  useEffect(
-    () => () => {
-      if (drawRafId.current !== null) {
-        window.cancelAnimationFrame(drawRafId.current);
-        drawRafId.current = null;
-      }
-    },
-    [],
-  );
+  const nodeMap = nodes.value;
+  const v = viewport.value;
+  const frame = computeMinimapFrame(nodeMap, v, containerWidth, containerHeight);
+  const { bounds, scale } = frame;
+  const toX = (x: number) => (x - bounds.minX) * scale;
+  const toY = (y: number) => (y - bounds.minY) * scale;
 
   const handleNavigateFromEvent = useCallback(
     (e: MouseEvent | PointerEvent) => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-
-      const rect = canvas.getBoundingClientRect();
-      const mx = e.clientX - rect.left;
-      const my = e.clientY - rect.top;
-
-      const frame =
-        frameRef.current ?? computeMinimapFrame(nodes.value, viewport.value, containerWidth, containerHeight);
-      frameRef.current = frame;
-      const { bounds, scale } = frame;
-
-      const v = viewport.value;
-      const vpW = containerWidth / v.scale;
-      const vpH = containerHeight / v.scale;
-
-      // Center viewport on clicked point
-      const worldX = mx / scale + bounds.minX;
-      const worldY = my / scale + bounds.minY;
-      onNavigate(-(worldX - vpW / 2) * v.scale, -(worldY - vpH / 2) * v.scale);
+      const map = mapRef.current;
+      if (!map) return;
+      // The map may be magnified (hover): read the rendered size, not the logical one.
+      const rect = map.getBoundingClientRect();
+      const mx = ((e.clientX - rect.left) / rect.width) * MINIMAP_W;
+      const my = ((e.clientY - rect.top) / rect.height) * MINIMAP_H;
+      const current = computeMinimapFrame(nodes.value, viewport.value, containerWidth, containerHeight);
+      const vp = viewport.value;
+      const vpW = containerWidth / vp.scale;
+      const vpH = containerHeight / vp.scale;
+      const worldX = mx / current.scale + current.bounds.minX;
+      const worldY = my / current.scale + current.bounds.minY;
+      onNavigate(-(worldX - vpW / 2) * vp.scale, -(worldY - vpH / 2) * vp.scale);
     },
     [nodes, viewport, containerWidth, containerHeight, onNavigate],
   );
@@ -250,50 +123,104 @@ export function Minimap({ viewport, nodes, edges, onNavigate, containerWidth, co
   const handlePointerDown = useCallback(
     (e: PointerEvent) => {
       e.stopPropagation();
+      e.preventDefault();
       isDragging.current = true;
       handleNavigateFromEvent(e);
-
       const onPointerMove = (ev: PointerEvent) => {
         if (isDragging.current) handleNavigateFromEvent(ev);
       };
-
       const onPointerUp = () => {
         isDragging.current = false;
         document.removeEventListener('pointermove', onPointerMove);
         document.removeEventListener('pointerup', onPointerUp);
       };
-
       document.addEventListener('pointermove', onPointerMove);
       document.addEventListener('pointerup', onPointerUp);
     },
     [handleNavigateFromEvent],
   );
 
+  const selected = selectedNodeIds.value;
+  const fence = scopeFence.value;
+  const fenceRect = fence
+    ? fenceRectFromNodes(
+        fence.nodeIds.map((id) => nodeMap.get(id)).filter((node): node is CanvasNodeState => node !== undefined),
+        fence.padding,
+      )
+    : null;
+  // Every live writer shows on the map — attached sessions, external writers,
+  // and fleet workers alike (amended presence contract): the minimap is where
+  // the human looks first to find WHERE an agent is working.
+  const presenceDots = agentPresences.value
+    .map((presence) => ({
+      id: presence.sessionId,
+      phase: presence.phase,
+      worker: presence.parentAgentId != null,
+      external: !presence.attached,
+      at: presenceWorldPosition(presence, (id) => nodeMap.get(id)),
+    }))
+    .filter((dot): dot is typeof dot & { at: { x: number; y: number } } => dot.at !== null);
+
+  const vpLeft = -v.x / v.scale;
+  const vpTop = -v.y / v.scale;
+
   return (
     <div
-      style={{
-        position: 'fixed',
-        bottom: '16px',
-        right: '16px',
-        zIndex: 9998,
-        border: '1px solid var(--c-line)',
-        borderRadius: 'var(--radius-sm)',
-        overflow: 'hidden',
-        boxShadow: '0 4px 16px var(--c-shadow)',
-      }}
+      ref={mapRef}
+      class="minimap"
+      data-testid="minimap"
+      title="Click to jump · drag the frame to pan"
+      onPointerDown={handlePointerDown}
     >
-      <canvas
-        ref={canvasRef}
-        width={MINIMAP_W}
-        height={MINIMAP_H}
+      {Array.from(nodeMap.values()).map((node) => {
+        const isGroup = node.type === 'group';
+        return (
+          <span
+            key={node.id}
+            class={`minimap-node${isGroup ? ' is-group' : ''}${selected.has(node.id) ? ' is-selected' : ''}`}
+            data-kind={node.type}
+            style={{
+              left: `${toX(node.position.x)}px`,
+              top: `${toY(node.position.y)}px`,
+              width: `${Math.max(isGroup ? 6 : 4, node.size.width * scale)}px`,
+              height: `${Math.max(isGroup ? 5 : 3, node.size.height * scale)}px`,
+              '--kind': KIND_COLOR[node.type],
+            }}
+          />
+        );
+      })}
+      {fenceRect && (
+        <span
+          class="minimap-fence"
+          style={{
+            left: `${toX(fenceRect.x)}px`,
+            top: `${toY(fenceRect.y)}px`,
+            width: `${fenceRect.width * scale}px`,
+            height: `${fenceRect.height * scale}px`,
+          }}
+        />
+      )}
+      {presenceDots.map((dot) => (
+        <span
+          key={dot.id}
+          class={`minimap-presence phase-${dot.phase}${dot.worker ? ' is-worker' : ''}${dot.external ? ' is-external' : ''}`}
+          style={{
+            left: `${toX(dot.at.x) - 4}px`,
+            top: `${toY(dot.at.y) - 4}px`,
+            '--identity-color': `hsl(${agentIdentityHue(dot.id)} 65% 62%)`,
+          }}
+        />
+      ))}
+      <span
+        class="minimap-frame"
         style={{
-          width: `${MINIMAP_W}px`,
-          height: `${MINIMAP_H}px`,
-          display: 'block',
-          cursor: 'pointer',
+          left: `${toX(vpLeft)}px`,
+          top: `${toY(vpTop)}px`,
+          width: `${(containerWidth / v.scale) * scale}px`,
+          height: `${(containerHeight / v.scale) * scale}px`,
         }}
-        onPointerDown={handlePointerDown}
       />
+      <span class="minimap-zoom">{Math.round(v.scale * 100)}%</span>
     </div>
   );
 }

package/src/client/canvas/ScopeFenceLayer.tsx

@@ -0,0 +1,38 @@
+import { fenceRectFromNodes } from '../../shared/scope-fence.js';
+import { nodes, viewport } from '../state/canvas-store';
+import { sessionActive } from '../state/presence-store';
+import { scopeFence } from '../state/session-store';
+
+/**
+ * Scope fence (rail-chrome-v2 phase 4, design item 4): the region the human
+ * granted the attached agent. Drawn in the world layer from the same geometry
+ * the server enforces (fenced nodes' bounding box + padding), so what the
+ * human sees is exactly what the agent is held to. Mounts only while a
+ * session is attached and a fence is set.
+ */
+export function ScopeFenceLayer() {
+  if (!sessionActive.value) return null;
+  const fence = scopeFence.value;
+  if (!fence) return null;
+  const nodeMap = nodes.value;
+  const fenced = fence.nodeIds.map((id) => nodeMap.get(id)).filter((node) => node !== undefined);
+  const rect = fenceRectFromNodes(fenced, fence.padding);
+  if (!rect) return null;
+  const counterScale = 1 / Math.max(0.05, viewport.value.scale);
+
+  return (
+    <div
+      class="scope-fence"
+      data-fenced-count={fenced.length}
+      style={{ transform: `translate(${rect.x}px, ${rect.y}px)`, width: `${rect.width}px`, height: `${rect.height}px` }}
+      aria-hidden="true"
+    >
+      <span class="scope-fence-pill scope-fence-pill-top" style={{ transform: `scale(${counterScale})` }}>
+        Agent scope · {fenced.length} node{fenced.length === 1 ? '' : 's'}
+      </span>
+      <span class="scope-fence-pill scope-fence-pill-bottom" style={{ transform: `scale(${counterScale})` }}>
+        writes outside are blocked · reads allowed
+      </span>
+    </div>
+  );
+}

package/src/client/canvas/SelectionBar.tsx

@@ -1,7 +1,26 @@
 import { useCallback } from 'preact/hooks';
-import { addContextPins, clearSelection, selectedNodeIds } from '../state/canvas-store';
-import { createEdgeFromClient, createGroupFromClient } from '../state/intent-bridge';
+import { IconArrange } from '../icons';
+import { attentionHistoryOpen } from '../state/attention-store';
+import {
+  addContextPins,
+  alignSelection,
+  arrangeSelection,
+  clearSelection,
+  contextPinnedNodeIds,
+  distributeSelection,
+  removeNode,
+  selectedNodeIds,
+} from '../state/canvas-store';
+import { createEdgeFromClient, createGroupFromClient, removeNodeFromClient } from '../state/intent-bridge';
+import { sessionActive } from '../state/presence-store';
+import { BarHint } from './BarHint';
 
+/**
+ * Floating bottom-center bar for a multi-selection (rail-chrome-v2 phase 7,
+ * design item 13): count, align left/top, distribute, auto-arrange, Group (G),
+ * Connect, Pin to agent context, delete. Restyle over the existing handlers —
+ * the geometry actions live in the store and persist like a drag does.
+ */
 export function SelectionBar() {
   const count = selectedNodeIds.value.size;
 
@@ -29,34 +48,167 @@ export function SelectionBar() {
     clearSelection();
   }, []);
 
+  const handleDelete = useCallback(() => {
+    const ids = Array.from(selectedNodeIds.value);
+    for (const id of ids) {
+      removeNode(id);
+      void removeNodeFromClient(id);
+    }
+    clearSelection();
+  }, []);
+
   if (count === 0) return null;
+  const many = count >= 2;
+  // The quiet board's pin bar shares the bottom-center slot (same rule as
+  // `ContextPinBar`'s own visibility) — sit above it rather than under it.
+  const abovePinBar = !sessionActive.value && contextPinnedNodeIds.value.size > 0 && !attentionHistoryOpen.value;
 
   return (
-    <div class="selection-bar">
+    <div class={`selection-bar${abovePinBar ? ' is-above-pin-bar' : ''}`} role="toolbar" aria-label="Selection">
       <span class="selection-bar-count">
-        {'\u2726'} {count} node{count !== 1 ? 's' : ''} selected
+        {count} node{count !== 1 ? 's' : ''} selected
       </span>
-      <button type="button" class="selection-bar-btn selection-bar-pin-ctx" onClick={handlePinContext}>
-        Pin as context
-      </button>
-      {count >= 2 && (
-        <button type="button" class="selection-bar-btn" onClick={handleGroup}>
-          Group
-        </button>
+      {many && (
+        <>
+          <span class="selection-bar-sep" />
+          <BarHint label="Align left" side="up">
+            <button
+              type="button"
+              class="selection-bar-icon"
+              aria-label="Align left"
+              onClick={() => alignSelection('left')}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <line x1="2.5" y1="2" x2="2.5" y2="14" />
+                <rect x="5" y="3.5" width="8" height="3.5" rx="1" />
+                <rect x="5" y="9" width="5" height="3.5" rx="1" />
+              </svg>
+            </button>
+          </BarHint>
+          <BarHint label="Align top" side="up">
+            <button
+              type="button"
+              class="selection-bar-icon"
+              aria-label="Align top"
+              onClick={() => alignSelection('top')}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <line x1="2" y1="2.5" x2="14" y2="2.5" />
+                <rect x="3.5" y="5" width="3.5" height="8" rx="1" />
+                <rect x="9" y="5" width="3.5" height="5" rx="1" />
+              </svg>
+            </button>
+          </BarHint>
+          <BarHint
+            label="Distribute horizontally"
+            body="Evens the gaps. A selection that cannot fit flows into a clean row instead of overlapping."
+            side="up"
+          >
+            <button
+              type="button"
+              class="selection-bar-icon"
+              aria-label="Distribute"
+              disabled={count < 3}
+              onClick={() => distributeSelection()}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                aria-hidden="true"
+              >
+                <rect x="1.5" y="5" width="3.5" height="6" rx="1" />
+                <rect x="6.25" y="5" width="3.5" height="6" rx="1" />
+                <rect x="11" y="5" width="3.5" height="6" rx="1" />
+              </svg>
+            </button>
+          </BarHint>
+          <BarHint label="Auto-arrange selection" side="up">
+            <button
+              type="button"
+              class="selection-bar-icon"
+              aria-label="Auto-arrange"
+              onClick={() => arrangeSelection()}
+            >
+              <IconArrange size={14} />
+            </button>
+          </BarHint>
+          <span class="selection-bar-sep" />
+          <BarHint label="Group the selection" shortcut="G" side="up">
+            <button type="button" class="selection-bar-action" onClick={handleGroup}>
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-dasharray="3 2.5"
+                aria-hidden="true"
+              >
+                <rect x="1.5" y="1.5" width="13" height="13" rx="2" />
+              </svg>
+              Group
+            </button>
+          </BarHint>
+          <BarHint label="Connect every pair" side="up">
+            <button type="button" class="selection-bar-action" onClick={handleConnect}>
+              Connect
+            </button>
+          </BarHint>
+        </>
       )}
-      {count >= 2 && (
-        <button type="button" class="selection-bar-btn" onClick={handleConnect}>
-          Connect
+      <BarHint label="Pin to agent context" side="up">
+        <button type="button" class="selection-bar-action is-pin" onClick={handlePinContext}>
+          <span aria-hidden="true">✦</span>
+          Pin as context
         </button>
-      )}
-      <button
-        type="button"
-        class="selection-bar-btn selection-bar-clear"
-        onClick={clearSelection}
-        title="Clear selection"
-      >
-        {'\u00d7'}
-      </button>
+      </BarHint>
+      <span class="selection-bar-sep" />
+      <BarHint label="Delete selection" side="up">
+        <button type="button" class="selection-bar-icon is-danger" aria-label="Delete selection" onClick={handleDelete}>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <path d="M2.5 4 H13.5" />
+            <path d="M5.5 4 V2.5 H10.5 V4" />
+            <path d="M4 4 L4.8 13.5 H11.2 L12 4" />
+          </svg>
+        </button>
+      </BarHint>
+      <BarHint label="Clear selection" shortcut="Esc" side="up">
+        <button type="button" class="selection-bar-icon" onClick={clearSelection} aria-label="Clear selection">
+          ×
+        </button>
+      </BarHint>
     </div>
   );
 }