pmx-canvas 0.10.0 → 0.12.0

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

@@ -1,13 +1,15 @@
 import { effect } from '@preact/signals';
 import { JSON_VIEWER_STATE_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { canvasInteractionEpoch, nodes } from '../state/canvas-store';
+import type { CanvasNodeState } from '../types';
+import { VIEWER_LOAD_DEADLINE_MS } from './ViewerFrame';
 
 type Snapshot = {
   epoch: number;
   version: unknown;
   documentUrl: unknown;
   state: Record<string, unknown> | null;
-  owners: Array<{ token: string; source: Window; mounted: () => void; ready: () => void; cancel: () => void }>;
+  owners: Array<{ token: string; source: Window }>;
 };
 
 // Tab-local UI state only: never persist form drafts in canvas data or AX. Keep
@@ -18,11 +20,12 @@ const snapshots = new Map<string, Snapshot>();
 let listening = false;
 
 export function restoreViewerRuntimeState(
-  nodeId: string,
+  authored: CanvasNodeState,
   token: string,
   source: Window,
   signal?: AbortSignal,
 ): Promise<boolean | 'cancelled'> {
+  const nodeId = authored.id;
   if (!listening) {
     listening = true;
     effect(() => {
@@ -36,7 +39,6 @@ export function restoreViewerRuntimeState(
           snapshot.version !== node.data.specVersion ||
           snapshot.documentUrl !== node.data.url
         ) {
-          for (const owner of snapshot.owners) owner.cancel();
           snapshots.delete(id);
         }
       }
@@ -54,57 +56,61 @@ export function restoreViewerRuntimeState(
       const ownerIndex =
         snapshot?.owners.findIndex((owner) => owner.token === message.token && owner.source === event.source) ?? -1;
       if (!snapshot || ownerIndex < 0) return;
-      if (message.type === 'mounted') {
-        snapshot.owners[ownerIndex]!.mounted();
-        return;
-      }
-      if (message.type === 'ready') {
-        snapshot.owners[ownerIndex]!.ready();
-        return;
-      }
       if (message.type !== 'snapshot') 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.
-      const retired = snapshot.owners.slice(0, ownerIndex);
       snapshot.owners = snapshot.owners.slice(ownerIndex);
-      for (const owner of retired) owner.cancel();
     });
   }
   const node = nodes.value.get(nodeId);
   if (!node || signal?.aborted) return Promise.resolve('cancelled');
-  const snapshot: Snapshot = snapshots.get(nodeId) ?? {
-    epoch: canvasInteractionEpoch.value,
-    version: node.data.specVersion,
-    documentUrl: node.data.url,
-    state: null,
-    owners: [],
-  };
-  snapshots.set(nodeId, snapshot);
+  // A retained document may load after its authored spec was replaced. It can
+  // still acknowledge paint, but cannot own or restore the new spec's drafts.
+  const current = node.data.specVersion === authored.data.specVersion && node.data.url === authored.data.url;
+  const snapshot: Snapshot | undefined = current
+    ? (snapshots.get(nodeId) ?? {
+        epoch: canvasInteractionEpoch.value,
+        version: authored.data.specVersion,
+        documentUrl: authored.data.url,
+        state: null,
+        owners: [],
+      })
+    : undefined;
+  if (snapshot) snapshots.set(nodeId, snapshot);
   const ready = new Promise<boolean | 'cancelled'>((resolve) => {
     const finish = (loaded: boolean | 'cancelled') => {
       clearTimeout(timer);
-      signal?.removeEventListener('abort', owner.cancel);
-      if (loaded !== true) snapshot.owners = snapshot.owners.filter((entry) => entry !== owner);
+      window.removeEventListener('message', receive);
+      signal?.removeEventListener('abort', cancel);
+      if (loaded !== true && snapshot) snapshot.owners = snapshot.owners.filter((entry) => entry !== owner);
       resolve(loaded);
     };
-    const owner = {
-      token,
-      source,
-      mounted: () => clearTimeout(timer),
-      ready: () => finish(true),
-      cancel: () => finish('cancelled'),
+    const cancel = () => finish('cancelled');
+    const receive = (event: MessageEvent) => {
+      if (
+        event.source !== source ||
+        event.data?.source !== JSON_VIEWER_STATE_SOURCE ||
+        event.data?.token !== token ||
+        event.data?.nodeId !== nodeId
+      )
+        return;
+      if (event.data.type === 'mounted') clearTimeout(timer);
+      if (event.data.type === 'ready') finish(true);
     };
+    const owner = { token, source };
     // A missing runtime fails, but a healthy offscreen document can wait for
     // paint indefinitely. Its synchronous mount acknowledgement ends the deadline;
     // only the later frame-gated ready message may promote it.
-    const timer = setTimeout(() => finish(false), 10_000);
-    for (const previous of snapshot.owners.filter((entry) => entry.source === source)) previous.cancel();
-    while (snapshot.owners.length > 1) snapshot.owners[0]!.cancel();
-    snapshot.owners.push(owner);
-    signal?.addEventListener('abort', owner.cancel, { once: true });
+    const timer = setTimeout(() => finish(false), VIEWER_LOAD_DEADLINE_MS);
+    if (snapshot) {
+      snapshot.owners = snapshot.owners.filter((entry) => entry.source !== source).slice(-1);
+      snapshot.owners.push(owner);
+    }
+    window.addEventListener('message', receive);
+    signal?.addEventListener('abort', cancel, { once: true });
   });
-  source.postMessage({ source: JSON_VIEWER_STATE_SOURCE, type: 'restore', token, state: snapshot.state }, '*');
+  source.postMessage({ source: JSON_VIEWER_STATE_SOURCE, type: 'restore', token, state: snapshot?.state ?? null }, '*');
   return ready;
 }

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

@@ -9,6 +9,7 @@ import {
   type SseMessage,
 } from '../../shared/semantic-attention.js';
 import {
+  attentionHistoryOpen,
   pushAttentionHistory,
   resetAttentionState,
   setAttentionPulse,
@@ -291,6 +292,10 @@ function entryFromEvent(event: SemanticWatchEvent): AttentionEntry | null {
 }
 
 function flushToastQueue(): void {
+  if (attentionHistoryOpen.value) {
+    toastQueue = [];
+    return;
+  }
   if (toastTimer !== null) return;
   const next = toastQueue.shift() ?? null;
   if (!next) {

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

@@ -26,6 +26,7 @@ export function resetAttentionState(): void {
 }
 
 export function openAttentionHistory(): void {
+  attentionToast.value = null;
   attentionHistoryOpen.value = true;
   attentionHistoryUnread.value = 0;
 }

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

@@ -1,4 +1,4 @@
-import { batch, computed, signal } from '@preact/signals';
+import { batch, computed, effect, signal } from '@preact/signals';
 import {
   isExcalidrawNode,
   type CanvasAnnotation,
@@ -159,6 +159,7 @@ export function resetCanvasInteractionState(): void {
   }
   batch(() => {
     canvasInteractionEpoch.value += 1;
+    groupPath.value = [];
     contextPinsRevision++;
     contextPinsPendingWrites = 0;
     activeNodeId.value = null;
@@ -226,13 +227,14 @@ export function trackDragMembership(nodeId: string): void {
   const cy = node.position.y + node.size.height / 2;
   let candidate: CanvasNodeState | null = null;
   for (const other of nodes.value.values()) {
+    if (groupContents.value && !groupContents.value.has(other.id)) continue;
     if (other.type !== 'group' || other.id === parentId || other.collapsed) continue;
     if (contains(other, cx, cy)) candidate = other;
   }
   if (!dropSuppressedForDrag) {
     const next = candidate
       ? { nodeId, groupId: candidate.id, mode: 'add' as const }
-      : parent && fullyOutside(node, parent)
+      : parent && parent.id !== groupPath.value.at(-1)?.id && fullyOutside(node, parent)
         ? { nodeId, groupId: parent.id, mode: 'remove' as const }
         : null;
     const current = dragDropTarget.value;
@@ -266,9 +268,14 @@ export const hiddenByCollapsedGroup = computed(() => {
   const hidden = new Map<string, string>();
   for (const node of nodes.value.values()) {
     if (node.type !== 'group' || !node.collapsed) continue;
-    const children = Array.isArray(node.data.children) ? node.data.children : [];
-    for (const childId of children) {
-      if (typeof childId === 'string') hidden.set(childId, node.id);
+    if (groupContents.value && !groupContents.value.has(node.id)) continue;
+    const pending = new Set(Array.isArray(node.data.children) ? node.data.children : []);
+    for (const childId of pending) {
+      if (typeof childId !== 'string' || childId === node.id) continue;
+      hidden.set(childId, node.id);
+      const child = nodes.value.get(childId);
+      if (child?.type === 'group' && Array.isArray(child.data.children))
+        for (const descendant of child.data.children) pending.add(descendant);
     }
   }
   return hidden;
@@ -276,10 +283,131 @@ export const hiddenByCollapsedGroup = computed(() => {
 
 /** The node that stands in for `id` on the canvas: itself, or its collapsed group's chip. */
 export function visibleNodeFor(id: string): CanvasNodeState | undefined {
-  const chipId = hiddenByCollapsedGroup.value.get(id);
-  return nodes.value.get(chipId ?? id);
+  const visited = new Set<string>();
+  while (hiddenByCollapsedGroup.value.has(id) && !visited.has(id)) {
+    visited.add(id);
+    id = hiddenByCollapsedGroup.value.get(id)!;
+  }
+  return nodes.value.get(id);
+}
+
+interface GroupVisit {
+  id: string;
+  parent: unknown;
+  viewport: ViewportState;
+  selection: Set<string>;
+  active: string | null;
 }
 
+/** Human navigation only. The canonical node/edge maps and agent reads remain whole-board. */
+export const groupPath = signal<GroupVisit[]>([]);
+export const groupContents = computed(() => {
+  const id = groupPath.value.at(-1)?.id;
+  if (!id) return null;
+  const ids = new Set<string>();
+  const pending = [id];
+  const visited = new Set<string>();
+  for (const parent of pending) {
+    if (visited.has(parent)) continue;
+    visited.add(parent);
+    const node = nodes.value.get(parent);
+    if (node?.type !== 'group' || !Array.isArray(node.data.children)) continue;
+    for (const child of node.data.children) {
+      if (typeof child !== 'string' || child === id || !nodes.value.has(child)) continue;
+      ids.add(child);
+      pending.push(child);
+    }
+  }
+  return ids;
+});
+
+/** The drawing's outside endpoints are view-only stubs, never inserted into nodes. */
+export const groupViewNodes = computed(() => {
+  const inside = groupContents.value;
+  if (!inside) return nodes.value;
+  const view = new Map([...nodes.value].filter(([id]) => inside.has(id)));
+  const outside = new Set<string>();
+  for (const edge of edges.value.values()) {
+    if (edge.toBoardId || inside.has(edge.from) === inside.has(edge.to)) continue;
+    outside.add(inside.has(edge.from) ? edge.to : edge.from);
+  }
+  const root = nodes.value.get(groupPath.value.at(-1)!.id);
+  const bounds = [...view.values()];
+  const left = bounds.length ? Math.min(...bounds.map((node) => node.position.x)) : (root?.position.x ?? 0);
+  const bottom = bounds.length
+    ? Math.max(...bounds.map((node) => node.position.y + node.size.height))
+    : (root?.position.y ?? 0) + 80;
+  [...outside].sort().forEach((id, index) => {
+    const node = nodes.value.get(id);
+    if (node)
+      view.set(id, {
+        ...node,
+        position: { x: left + (index % 3) * 194, y: bottom + 88 + Math.floor(index / 3) * 84 },
+        size: { width: 170, height: 60 },
+        collapsed: false,
+      });
+  });
+  return view;
+});
+
+export function leaveGroup(depth = groupPath.value.length - 1): void {
+  const visit = groupPath.value[depth];
+  if (!visit) return;
+  cancelViewportAnimation();
+  batch(() => {
+    groupPath.value = groupPath.value.slice(0, depth);
+    viewport.value = visit.viewport;
+    selectedNodeIds.value = filterNodeIdSet(visit.selection, nodes.value);
+    activeNodeId.value = visit.active && nodes.value.has(visit.active) ? visit.active : null;
+    selectedEdgeId.value = null;
+  });
+  void updateViewportFromClient(visit.viewport, { recordHistory: false });
+}
+
+export function openGroup(id: string, fit = true): void {
+  const node = nodes.value.get(id);
+  if (node?.type !== 'group' || groupPath.value.some((visit) => visit.id === id)) return;
+  if (groupContents.value && !groupContents.value.has(id)) leaveGroup(0);
+  cancelViewportAnimation();
+  batch(() => {
+    groupPath.value = [
+      ...groupPath.value,
+      {
+        id,
+        parent: node.data.parentGroup,
+        viewport: { ...viewport.value },
+        selection: new Set(selectedNodeIds.value),
+        active: activeNodeId.value,
+      },
+    ];
+    clearSelection();
+    activeNodeId.value = null;
+  });
+  // Wait for the breadcrumb/legend to paint before measuring their screen insets.
+  if (!fit) return;
+  afterGroupView(() => {
+    const area = canvasArea();
+    fitAll(area.width, area.height);
+  });
+}
+
+effect(() => {
+  const path = groupPath.value;
+  const map = nodes.value;
+  const invalid = path.findIndex((visit) => {
+    const node = map.get(visit.id);
+    return node?.type !== 'group' || node.data.parentGroup !== visit.parent;
+  });
+  if (invalid >= 0) leaveGroup(invalid);
+  const inside = groupContents.value;
+  if (inside) {
+    const selected = selectedNodeIds.value;
+    if ([...selected].some((id) => !inside.has(id)))
+      selectedNodeIds.value = new Set([...selected].filter((id) => inside.has(id)));
+    if (activeNodeId.value && !inside.has(activeNodeId.value)) activeNodeId.value = null;
+  }
+});
+
 /** Collapsed groups render as a chip; children keep their positions for restore. */
 export function groupsOfSelection(): string[] {
   const ids = new Set<string>();
@@ -637,18 +765,22 @@ export function resizeNode(id: string, size: { width: number; height: number }):
   updateNode(id, { size });
 }
 
-export function bringToFront(id: string): void {
+export function bringToFront(id: string, persist = true): void {
   const existing = nodes.value.get(id);
   if (!existing) return;
-  batch(() => {
-    updateNode(id, { zIndex: maxZ++ });
-    // A group is a frame: it must never stack above its own children.
-    if (existing.type === 'group' && Array.isArray(existing.data.children)) {
-      for (const childId of existing.data.children) {
-        if (typeof childId === 'string' && nodes.value.has(childId)) updateNode(childId, { zIndex: maxZ++ });
-      }
+  const updates = [{ id, zIndex: maxZ++ }];
+  // A group is a frame: it must never stack above its own children.
+  if (existing.type === 'group' && Array.isArray(existing.data.children)) {
+    for (const childId of existing.data.children) {
+      if (typeof childId === 'string' && nodes.value.has(childId)) updates.push({ id: childId, zIndex: maxZ++ });
     }
+  }
+  batch(() => {
+    for (const update of updates) updateNode(update.id, { zIndex: update.zIndex });
   });
+  // Title-bar gestures commit stacking with geometry at pointer-up. A separate
+  // drag-start write would broadcast an old layout over the in-progress move.
+  if (persist) void pushCanvasUpdate(updates, { recordHistory: false });
   activeNodeId.value = id;
 }
 
@@ -817,17 +949,31 @@ export function cancelViewportAnimation(): void {
   }
 }
 
+/** Share the camera slot so newer navigation and direct gestures cancel queued fits. */
+function afterGroupView(action: () => void): void {
+  cancelViewportAnimation();
+  const epoch = canvasInteractionEpoch.value;
+  const path = groupPath.value;
+  animationId = requestAnimationFrame(() => {
+    animationId = null;
+    if (epoch === canvasInteractionEpoch.value && path === groupPath.value) action();
+  });
+}
+
 // ── Persistence ───────────────────────────────────────────────
 const STORAGE_KEY = 'pmx-canvas-layout';
 
-export function persistLayout(options: { recordHistory?: boolean } = {}): void {
+export function persistLayout(options: { recordHistory?: boolean; raisedNodeId?: string } = {}): void {
   try {
     const allNodes = Array.from(nodes.value.values());
+    const raised = options.raisedNodeId ? nodes.value.get(options.raisedNodeId) : undefined;
+    const raisedChildren = raised?.type === 'group' && Array.isArray(raised.data.children) ? raised.data.children : [];
     const nodeUpdates = allNodes.map((n) => ({
       id: n.id,
       position: n.position,
       size: n.size,
       collapsed: n.collapsed,
+      ...(n.id === raised?.id || raisedChildren.includes(n.id) ? { zIndex: n.zIndex } : {}),
     }));
     const layout = {
       viewport: viewport.value,
@@ -896,7 +1042,9 @@ export function restoreLayout(): Map<string, Partial<CanvasNodeState>> | null {
 
 // ── Fit all ───────────────────────────────────────────────────
 export function fitAll(containerW: number, containerH: number): void {
-  const all = Array.from(nodes.value.values());
+  const all = Array.from(groupViewNodes.value.values());
+  const group = nodes.value.get(groupPath.value.at(-1)?.id ?? '');
+  if (!all.length && group) all.push(group);
   if (all.length === 0) return;
 
   let minX = Number.POSITIVE_INFINITY;
@@ -909,6 +1057,12 @@ export function fitAll(containerW: number, containerH: number): void {
     maxX = Math.max(maxX, n.position.x + n.size.width);
     maxY = Math.max(maxY, n.position.y + n.size.height);
   }
+  if (groupPath.value.length) {
+    minX -= 24;
+    minY -= 40;
+    maxX += 24;
+    maxY += 24;
+  }
 
   // Screen-space fit (architecture rule 9): the margins that must clear the
   // floating chrome are SCREEN constants. The old world-space PAD shrank with
@@ -923,17 +1077,41 @@ export function fitAll(containerW: number, containerH: number): void {
   const cx = (minX + maxX) / 2;
   const cy = (minY + maxY) / 2;
 
-  animateViewport({
-    x: insets.left + usableW / 2 - cx * scale,
-    y: insets.top + usableH / 2 - cy * scale,
-    scale,
-  });
+  animateViewport(
+    {
+      x: insets.left + usableW / 2 - cx * scale,
+      y: insets.top + usableH / 2 - cy * scale,
+      scale,
+    },
+    300,
+    { recordHistory: groupPath.value.length === 0 },
+  );
 }
 
 // ── Focus node ────────────────────────────────────────────────
-export function focusNode(id: string, options: { recordHistory?: boolean } = {}): void {
+export function focusNode(id: string, options: { recordHistory?: boolean; persistStacking?: boolean } = {}): void {
   const node = nodes.value.get(id);
   if (!node) return;
+  cancelViewportAnimation();
+  const previousPath = groupPath.value;
+  if (groupContents.value && !groupContents.value.has(id)) leaveGroup(0);
+  // Reveal collapsed targets through view state, without changing authored collapse flags.
+  const ancestors: string[] = [];
+  let parent = node.data.parentGroup;
+  while (typeof parent === 'string' && !ancestors.includes(parent)) {
+    ancestors.push(parent);
+    parent = nodes.value.get(parent)?.data.parentGroup;
+  }
+  for (const ancestor of ancestors.reverse()) {
+    if (nodes.value.get(ancestor)?.collapsed && !groupPath.value.some((visit) => visit.id === ancestor))
+      openGroup(ancestor, false);
+  }
+  bringToFront(id, options.persistStacking !== false);
+  if (groupPath.value.length || previousPath !== groupPath.value) afterGroupView(() => focusNodeCamera(node, options));
+  else focusNodeCamera(node, options);
+}
+
+function focusNodeCamera(node: CanvasNodeState, options: { recordHistory?: boolean }): void {
   const v = viewport.value;
   // Same screen-space frame as fitAll: viewport x/y are CONTAINER-relative
   // (screen = world*scale + viewport inside the canvas region), so the centre
@@ -959,17 +1137,15 @@ export function focusNode(id: string, options: { recordHistory?: boolean } = {})
     300,
     options,
   );
-  bringToFront(id);
 }
 
 // ── Cycle focus ───────────────────────────────────────────────
 export function cycleActiveNode(direction: 1 | -1 = 1): void {
-  const all = Array.from(nodes.value.keys());
+  const all = Array.from(nodes.value.keys()).filter((id) => !groupContents.value || groupContents.value.has(id));
   if (all.length === 0) return;
   const currentIdx = activeNodeId.value ? all.indexOf(activeNodeId.value) : -1;
   const nextIdx = (currentIdx + direction + all.length) % all.length;
   const nextId = all[nextIdx];
-  bringToFront(nextId);
   focusNode(nextId);
 }
 

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

@@ -1,6 +1,7 @@
 import { computed, signal } from '@preact/signals';
 import {
   HUMAN_CURSOR_THROTTLE_MS,
+  HUMAN_NAME_MAX_LENGTH,
   type HumanPresence,
   type HumanPresenceSnapshot,
 } from '../../shared/human-presence.js';
@@ -34,12 +35,12 @@ export const humanClientId = sessionScoped(
 
 function resolveName(): string {
   try {
-    const fromQuery = new URLSearchParams(window.location.search).get('name')?.trim();
+    const fromQuery = new URLSearchParams(window.location.search).get('name')?.trim().slice(0, HUMAN_NAME_MAX_LENGTH);
     if (fromQuery) {
       window.localStorage.setItem('pmx-canvas-human-name', fromQuery);
       return fromQuery;
     }
-    const stored = window.localStorage.getItem('pmx-canvas-human-name')?.trim();
+    const stored = window.localStorage.getItem('pmx-canvas-human-name')?.trim().slice(0, HUMAN_NAME_MAX_LENGTH);
     if (stored) return stored;
   } catch {
     // storage unavailable: fall through to a generated name
@@ -51,6 +52,25 @@ export const humanName = signal<string>(resolveName());
 export const humans = signal<HumanPresence[]>([]);
 export const otherHumans = computed(() => humans.value.filter((human) => human.clientId !== humanClientId));
 
+/** Change the display label, never the per-tab identity or anyone's access. */
+export function setHumanName(name: string): void {
+  const value = name.trim().slice(0, HUMAN_NAME_MAX_LENGTH);
+  if (!value) return;
+  humanName.value = value;
+  try {
+    window.localStorage.setItem('pmx-canvas-human-name', value);
+  } catch {
+    // Storage can be blocked in embedded panes; the current tab still has its name.
+  }
+  // A link's initial name must not undo an explicit rename on reload.
+  const url = new URL(window.location.href);
+  if (url.searchParams.has('name')) {
+    url.searchParams.delete('name');
+    window.history.replaceState(window.history.state, '', url);
+  }
+  post({ cursor: lastCursor, grabbingNodeId: grabbingNodeId.value });
+}
+
 /** Nodes a human took over mid-edit → that human's name, shown as the yield pill for a moment. */
 export const yieldedNodes = signal<Map<string, string>>(new Map());
 

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

@@ -250,6 +250,7 @@ export async function pushCanvasUpdate(
     position?: { x: number; y: number };
     size?: { width: number; height: number };
     collapsed?: boolean;
+    zIndex?: number;
   }>,
   options: { recordHistory?: boolean } = {},
 ): Promise<void> {
@@ -299,11 +300,13 @@ export async function createNodeFromClient(opts: {
   type?: string;
   title?: string;
   content?: string;
+  data?: Record<string, unknown>;
   x?: number;
   y?: number;
   width?: number;
   height?: number;
   boardId?: string;
+  expectedBoardId?: string;
 }): Promise<{ ok: boolean; id?: string }> {
   return requestJson(
     'createNodeFromClient',
@@ -489,7 +492,7 @@ export async function reportClientViewportSize(): Promise<void> {
   if (isHostedWorkbench() && !boardsLoaded.value) return;
   const size = clientWindowSize();
   if (!('clientWidth' in size)) return;
-  await requestBestEffort('reportClientViewportSize', '/api/canvas/viewport', {
+  const init: RequestInit = {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
@@ -497,7 +500,15 @@ export async function reportClientViewportSize(): Promise<void> {
       ...(boardsLoaded.value ? { expectedBoardId: activeBoardId.value } : {}),
       recordHistory: false,
     }),
-  });
+  };
+  try {
+    const res = await workbenchFetch('/api/canvas/viewport', withWorkbenchMarker(init));
+    // Resize observations can cross a board switch. Discard that stale report,
+    // without telling the human an edit failed; actual camera writes still report refusals.
+    if (!res.ok && res.status !== 409) reportRefusedWrite(res, init, await readJsonBody(res));
+  } catch (error) {
+    logRequestError('reportClientViewportSize', error);
+  }
 }
 
 // ── Group API ─────────────────────────────────────────────────
@@ -611,6 +622,7 @@ export async function updateEdgeFromClient(
     style?: string;
     animated?: boolean;
   },
+  expectedBoardId = activeBoardId.value,
 ): Promise<{ ok: boolean }> {
   return requestJson(
     'updateEdgeFromClient',
@@ -619,13 +631,16 @@ export async function updateEdgeFromClient(
     {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(patch),
+      body: JSON.stringify({ ...patch, expectedBoardId }),
     },
   );
 }
 
 /** Remove a canvas edge via the server. */
-export async function removeEdgeFromClient(edgeId: string): Promise<{ ok: boolean }> {
+export async function removeEdgeFromClient(
+  edgeId: string,
+  expectedBoardId = activeBoardId.value,
+): Promise<{ ok: boolean }> {
   return requestJson(
     'removeEdgeFromClient',
     '/api/canvas/edge',
@@ -633,7 +648,7 @@ export async function removeEdgeFromClient(edgeId: string): Promise<{ ok: boolea
     {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ edge_id: edgeId }),
+      body: JSON.stringify({ edge_id: edgeId, expectedBoardId }),
     },
   );
 }