pmx-canvas 0.11.0 → 0.12.1

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>();
@@ -821,6 +949,17 @@ 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';
 
@@ -903,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;
@@ -916,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
@@ -930,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; 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
@@ -966,12 +1137,11 @@ export function focusNode(id: string, options: { recordHistory?: boolean; persis
     300,
     options,
   );
-  bringToFront(id, options.persistStacking !== false);
 }
 
 // ── 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;

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

@@ -300,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',
@@ -490,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({
@@ -498,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 ─────────────────────────────────────────────────
@@ -612,6 +622,7 @@ export async function updateEdgeFromClient(
     style?: string;
     animated?: boolean;
   },
+  expectedBoardId = activeBoardId.value,
 ): Promise<{ ok: boolean }> {
   return requestJson(
     'updateEdgeFromClient',
@@ -620,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',
@@ -634,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 }),
     },
   );
 }

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

@@ -1,9 +1,123 @@
 import { computed, effect, signal } from '@preact/signals';
 import { relationKind, relationPreset, relationSourceEnd } from '../../shared/relations.js';
+import { memoryKey } from '../../shared/memory-graph.js';
 import { activeBoard, activeBoardId } from './boards-store';
-import { activeNodeId, edges, nodes, selectedNodeIds } from './canvas-store';
+import {
+  activeNodeId,
+  edges,
+  nodes,
+  selectedNodeIds,
+  focusNode,
+  collapseExpandedNode,
+  canvasInteractionEpoch,
+} from './canvas-store';
+import { cardQualification } from './knowledge-store';
+import type { CanvasEdge } from '../types';
 
 export const relationFilter = signal<{ boardId: string; kind: string } | null>(null);
+const inspection = signal<{ boardId: string; nodeId: string; mode: 'lineage' | 'connections'; epoch: number } | null>(
+  null,
+);
+
+export function showRelationsOnCanvas(nodeId: string, mode: 'lineage' | 'connections'): void {
+  const boardId = activeBoardId.value;
+  if (!boardId) return;
+  collapseExpandedNode();
+  selectedNodeIds.value = new Set();
+  relationFilter.value = null;
+  focusNode(nodeId, { recordHistory: false, persistStacking: false });
+  activeNodeId.value = nodeId;
+  inspection.value = { boardId, nodeId, mode, epoch: canvasInteractionEpoch.value };
+}
+
+effect(() => {
+  const value = inspection.value;
+  if (
+    value &&
+    (value.boardId !== activeBoardId.value ||
+      value.nodeId !== activeNodeId.value ||
+      value.epoch !== canvasInteractionEpoch.value ||
+      relationFilter.value)
+  )
+    inspection.value = null;
+});
+
+/** Only qualified dependency/lineage sources warn; citations and illustrated loops never do. */
+export function relationWarning(edge: CanvasEdge): string[] {
+  const boardId = activeBoardId.value;
+  const kind = relationKind(edge);
+  if (!boardId || !['depends-on', 'derived-from'].includes(kind)) return [];
+  const from = { boardId, cardId: edge.from };
+  const to = { boardId: edge.toBoardId ?? boardId, cardId: edge.to };
+  const source = relationSourceEnd(edge) === 'from' ? from : to;
+  const dependent = relationSourceEnd(edge) === 'from' ? to : from;
+  if (dependent.boardId !== boardId) return [];
+  return (
+    cardQualification(dependent.cardId)?.sourceWarnings?.[
+      JSON.stringify([boardId, edge.id, kind, memoryKey(source)])
+    ] ?? []
+  );
+}
+
+export const dependencyAnalysis = computed(() => {
+  const links = [...edges.value.values()].filter((edge) => !edge.toBoardId && relationKind(edge) === 'depends-on');
+  const forward = new Map<string, Set<string>>();
+  const reverse = new Map<string, Set<string>>();
+  for (const edge of links) {
+    if (!forward.has(edge.from)) forward.set(edge.from, new Set());
+    if (!forward.has(edge.to)) forward.set(edge.to, new Set());
+    if (!reverse.has(edge.from)) reverse.set(edge.from, new Set());
+    if (!reverse.has(edge.to)) reverse.set(edge.to, new Set());
+    forward.get(edge.from)!.add(edge.to);
+    reverse.get(edge.to)!.add(edge.from);
+  }
+  // Iterative strongly connected components: one count per cyclic dependency cluster.
+  const visited = new Set<string>();
+  const order: string[] = [];
+  for (const root of forward.keys()) {
+    const stack: Array<[string, boolean]> = [[root, false]];
+    while (stack.length) {
+      const [id, done] = stack.pop()!;
+      if (done) {
+        order.push(id);
+        continue;
+      }
+      if (visited.has(id)) continue;
+      visited.add(id);
+      stack.push([id, true]);
+      for (const next of forward.get(id) ?? []) if (!visited.has(next)) stack.push([next, false]);
+    }
+  }
+  const assigned = new Set<string>();
+  const cyclic = new Map<string, number>();
+  let cycles = 0;
+  for (const root of order.reverse()) {
+    if (assigned.has(root)) continue;
+    const component = new Set<string>([root]);
+    assigned.add(root);
+    for (const id of component)
+      for (const next of reverse.get(id) ?? []) {
+        if (assigned.has(next)) continue;
+        assigned.add(next);
+        component.add(next);
+      }
+    if (component.size > 1 || forward.get(root)?.has(root)) {
+      cycles++;
+      for (const id of component) cyclic.set(id, cycles);
+    }
+  }
+  const cycleEdges = new Set(
+    links
+      .filter((edge) => cyclic.has(edge.from) && cyclic.get(edge.from) === cyclic.get(edge.to))
+      .map((edge) => edge.id),
+  );
+  const roots = new Set(selectedNodeIds.value);
+  if (activeNodeId.value) roots.add(activeNodeId.value);
+  const affected = new Set(roots);
+  for (const id of affected) for (const next of reverse.get(id) ?? []) affected.add(next);
+  for (const id of roots) affected.delete(id);
+  return { cycles, cycleEdges, affected, focused: roots.size > 0, hasDependencies: links.length > 0 };
+});
 
 effect(() => {
   const filter = relationFilter.value;
@@ -40,6 +154,18 @@ export const relationHighlight = computed(() => {
     cards.add(edge.from);
     cards.add(edge.to);
   };
+  const view = inspection.value;
+  if (view && view.boardId === activeBoardId.value && view.nodeId === focus && !kind) {
+    if (view.mode === 'connections') {
+      for (const edge of list) if (edge.from === focus || edge.to === focus) add(edge);
+    } else {
+      for (const id of cards)
+        for (const edge of list)
+          if (['derived-from', 'depends-on'].includes(relationKind(edge)) && (edge.from === id || edge.to === id))
+            add(edge);
+    }
+    return { cards, links };
+  }
   if (!kind) for (const edge of list) if (focusedCards.has(edge.from) && focusedCards.has(edge.to)) add(edge);
   if (kind) {
     for (const edge of list) if (relationKind(edge) === kind) add(edge);