@tldiagram/core-ui 1.87.0

package/src/crossBranch/resolve.ts

@@ -0,0 +1,643 @@
+import type { Connector, PlacedElement } from '../types'
+import { CROSS_BRANCH_DEPTH_ALL } from './types'
+import type {
+  AggregatedProxyConnector,
+  CrossBranchContextSettings,
+  GraphPlacementRef,
+  ProxyConnectorDetails,
+  ProxyConnectorLeaf,
+  ProxyContextNode,
+  ProxyEndpoint,
+  WorkspaceGraphSnapshot,
+} from './types'
+import { allConnectors, findLowestCommonAncestorViewId, isDescendantView, relativeOwnerElementPath, viewName } from './graph'
+
+function firstPlacementForElement(snapshot: WorkspaceGraphSnapshot, elementId: number): GraphPlacementRef | null {
+  return snapshot.placementsByElementId[elementId]?.[0] ?? null
+}
+
+function placementInView(snapshot: WorkspaceGraphSnapshot, viewId: number | null, elementId: number): GraphPlacementRef | null {
+  if (viewId == null) return null
+  return snapshot.placementsByElementId[elementId]?.find((placement) => placement.viewId === viewId) ?? null
+}
+
+function elementDisplayPlacement(snapshot: WorkspaceGraphSnapshot, elementId: number, preferredViewId: number | null = null): GraphPlacementRef | null {
+  return placementInView(snapshot, preferredViewId, elementId) ?? firstPlacementForElement(snapshot, elementId)
+}
+
+function ancestorDepth(snapshot: WorkspaceGraphSnapshot, viewId: number | null | undefined): number {
+  if (viewId == null) return 0
+  return snapshot.ancestorsByViewId[viewId]?.length ?? 0
+}
+
+function pathDistance(snapshot: WorkspaceGraphSnapshot, leftViewId: number, rightViewId: number): number {
+  const lca = findLowestCommonAncestorViewId(snapshot, leftViewId, rightViewId)
+  if (lca == null) return Number.MAX_SAFE_INTEGER
+  const lcaDepth = ancestorDepth(snapshot, lca)
+  return (ancestorDepth(snapshot, leftViewId) - lcaDepth) + (ancestorDepth(snapshot, rightViewId) - lcaDepth)
+}
+
+function appendElementToPath(path: number[], elementId: number): number[] {
+  if (path[path.length - 1] === elementId) return path
+  return [...path, elementId]
+}
+
+function explicitOffViewContextPath(
+  snapshot: WorkspaceGraphSnapshot,
+  currentViewId: number,
+  currentVisibleElementIds: Set<number>,
+  chosenPlacementViewId: number,
+  elementId: number,
+): number[] {
+  if (isDescendantView(snapshot, chosenPlacementViewId, currentViewId)) {
+    const owners = relativeOwnerElementPath(snapshot, currentViewId, chosenPlacementViewId)
+    const lastVisibleOwnerIndex = owners.reduce((bestIndex, ownerElementId, index) => (
+      currentVisibleElementIds.has(ownerElementId) ? index : bestIndex
+    ), -1)
+    return appendElementToPath(owners.slice(lastVisibleOwnerIndex + 1), elementId)
+  }
+
+  const commonAncestorViewId = findLowestCommonAncestorViewId(snapshot, currentViewId, chosenPlacementViewId)
+  const owners = commonAncestorViewId == null
+    ? []
+    : relativeOwnerElementPath(snapshot, commonAncestorViewId, chosenPlacementViewId)
+  return appendElementToPath(owners, elementId)
+}
+
+function chooseBestPlacement(snapshot: WorkspaceGraphSnapshot, elementId: number, focusViewId: number, ownerViewId: number): GraphPlacementRef | null {
+  const candidates = snapshot.placementsByElementId[elementId] ?? []
+  if (candidates.length === 0) return null
+
+  const score = (placement: GraphPlacementRef) => {
+    if (placement.viewId === focusViewId) return 0
+    if (placement.viewId === ownerViewId) return 10
+    if (isDescendantView(snapshot, placement.viewId, focusViewId)) {
+      return 50 + Math.max(0, ancestorDepth(snapshot, placement.viewId) - ancestorDepth(snapshot, focusViewId))
+    }
+
+    const lca = findLowestCommonAncestorViewId(snapshot, focusViewId, placement.viewId)
+    const lcaDepth = ancestorDepth(snapshot, lca)
+    const focusDistance = pathDistance(snapshot, focusViewId, placement.viewId)
+    const ownerDistance = pathDistance(snapshot, ownerViewId, placement.viewId)
+    return 200 + focusDistance * 10 + ownerDistance * 2 - lcaDepth
+  }
+
+  return [...candidates].sort((left, right) => {
+    const delta = score(left) - score(right)
+    if (delta !== 0) return delta
+    return left.viewId - right.viewId
+  })[0]
+}
+
+function buildProxyEndpoint(
+  snapshot: WorkspaceGraphSnapshot,
+  currentViewId: number,
+  currentVisibleElementIds: Set<number>,
+  ownerViewId: number,
+  elementId: number,
+): ProxyEndpoint | null {
+  const chosenPlacement = chooseBestPlacement(snapshot, elementId, currentViewId, ownerViewId)
+  if (!chosenPlacement) return null
+
+  const actualPlacement = elementDisplayPlacement(snapshot, elementId, chosenPlacement.viewId)
+  const actualName = actualPlacement?.element.name ?? `Element ${elementId}`
+  const forceExplicitOffViewContext = ownerViewId === currentViewId && chosenPlacement.viewId !== currentViewId
+
+  if (forceExplicitOffViewContext) {
+    const contextPathElementIds = explicitOffViewContextPath(
+      snapshot,
+      currentViewId,
+      currentVisibleElementIds,
+      chosenPlacement.viewId,
+      elementId,
+    )
+    const mergeAncestorElementId = contextPathElementIds[0] ?? null
+    const commonAncestorViewId = findLowestCommonAncestorViewId(snapshot, currentViewId, chosenPlacement.viewId)
+    const currentBranchElementId = commonAncestorViewId == null
+      ? null
+      : commonAncestorViewId === currentViewId
+        ? (relativeOwnerElementPath(snapshot, currentViewId, chosenPlacement.viewId)[0] ?? null)
+        : (relativeOwnerElementPath(snapshot, commonAncestorViewId, currentViewId)[0] ?? null)
+
+    return {
+      actualElementId: elementId,
+      actualElementName: actualName,
+      anchorElementId: elementId,
+      anchorElementName: actualName,
+      anchorViewId: chosenPlacement.viewId,
+      anchorViewName: chosenPlacement.viewName,
+      placementViewId: chosenPlacement.viewId,
+      placementViewName: chosenPlacement.viewName,
+      depth: Math.max(1, pathDistance(snapshot, currentViewId, chosenPlacement.viewId)),
+      externalToView: true,
+      currentBranchElementId,
+      commonAncestorViewId,
+      commonAncestorViewName: viewName(snapshot, commonAncestorViewId),
+      mergeAncestorElementId,
+      contextPathElementIds,
+    }
+  }
+
+  if (chosenPlacement.viewId === currentViewId || isDescendantView(snapshot, chosenPlacement.viewId, currentViewId)) {
+    const descendantDepth = chosenPlacement.viewId === currentViewId
+      ? 0
+      : Math.max(1, ancestorDepth(snapshot, chosenPlacement.viewId) - ancestorDepth(snapshot, currentViewId))
+    const owners = chosenPlacement.viewId === currentViewId
+      ? []
+      : relativeOwnerElementPath(snapshot, currentViewId, chosenPlacement.viewId)
+
+    const candidateIds = [elementId, ...owners.slice().reverse()]
+    const visibleAnchorId = candidateIds.find((candidate) => currentVisibleElementIds.has(candidate))
+    if (visibleAnchorId == null) return null
+    const visibleAnchorPlacement = elementDisplayPlacement(snapshot, visibleAnchorId, currentViewId)
+
+    return {
+      actualElementId: elementId,
+      actualElementName: actualName,
+      anchorElementId: visibleAnchorId,
+      anchorElementName: visibleAnchorPlacement?.element.name ?? actualName,
+      anchorViewId: currentViewId,
+      anchorViewName: viewName(snapshot, currentViewId),
+      placementViewId: chosenPlacement.viewId,
+      placementViewName: chosenPlacement.viewName,
+      depth: descendantDepth,
+      externalToView: false,
+      currentBranchElementId: null,
+      commonAncestorViewId: currentViewId,
+      commonAncestorViewName: viewName(snapshot, currentViewId),
+      mergeAncestorElementId: null,
+      contextPathElementIds: [],
+    }
+  }
+
+  const commonAncestorViewId = findLowestCommonAncestorViewId(snapshot, currentViewId, chosenPlacement.viewId)
+  const externalOwners = commonAncestorViewId == null
+    ? []
+    : relativeOwnerElementPath(snapshot, commonAncestorViewId, chosenPlacement.viewId)
+  const anchorElementId = commonAncestorViewId == null
+    ? elementId
+    : commonAncestorViewId === chosenPlacement.viewId
+      ? elementId
+      : (externalOwners[0] ?? elementId)
+  const anchorPlacement = elementDisplayPlacement(snapshot, anchorElementId, commonAncestorViewId)
+  const currentBranchElementId = commonAncestorViewId == null || commonAncestorViewId === currentViewId
+    ? null
+    : (relativeOwnerElementPath(snapshot, commonAncestorViewId, currentViewId)[0] ?? null)
+
+  return {
+    actualElementId: elementId,
+    actualElementName: actualName,
+    anchorElementId,
+    anchorElementName: anchorPlacement?.element.name ?? actualName,
+    anchorViewId: commonAncestorViewId == null ? chosenPlacement.viewId : commonAncestorViewId,
+    anchorViewName: commonAncestorViewId == null ? chosenPlacement.viewName : viewName(snapshot, commonAncestorViewId),
+    placementViewId: chosenPlacement.viewId,
+    placementViewName: chosenPlacement.viewName,
+    depth: Math.max(1, externalOwners.length || 1),
+    externalToView: true,
+    currentBranchElementId,
+    commonAncestorViewId,
+    commonAncestorViewName: viewName(snapshot, commonAncestorViewId),
+    mergeAncestorElementId: null,
+    contextPathElementIds: [],
+  }
+}
+
+function proxyDisplayLabel(connectors: ProxyConnectorLeaf[]): string {
+  if (connectors.length === 1) {
+    const [leaf] = connectors
+    return leaf.connector.label?.trim() || leaf.connector.relationship?.trim() || 'Cross-branch'
+  }
+  const labels = new Set(connectors.map((leaf) => leaf.connector.label?.trim()).filter(Boolean))
+  if (labels.size === 1) return `${connectors.length} × ${Array.from(labels)[0]}`
+  return `${connectors.length} connectors`
+}
+
+function contextNodeKey(endpoint: ProxyEndpoint): string {
+  return [
+    'ctx',
+    endpoint.anchorViewId ?? 'none',
+    endpoint.anchorElementId,
+    endpoint.commonAncestorViewId ?? 'none',
+    endpoint.currentBranchElementId ?? 'none',
+  ].join(':')
+}
+
+function visibleNodeKey(elementId: number): string {
+  return String(elementId)
+}
+
+function displayNodeId(endpoint: ProxyEndpoint): string {
+  return endpoint.externalToView ? contextNodeKey(endpoint) : visibleNodeKey(endpoint.anchorElementId)
+}
+
+function canonicalPairIds(leftId: string, rightId: string): [string, string] {
+  return leftId <= rightId ? [leftId, rightId] : [rightId, leftId]
+}
+
+function canonicalPairElements(leftId: number, rightId: number): [number, number] {
+  return leftId <= rightId ? [leftId, rightId] : [rightId, leftId]
+}
+
+function proxyDisplayGroupKey(leftId: string, rightId: string): string {
+  const [first, second] = canonicalPairIds(leftId, rightId)
+  return [first, second].join('::')
+}
+
+function ownerViewsFromLeaves(leaves: ProxyConnectorLeaf[]) {
+  const ownerViews = new Map<number, string>()
+  for (const leaf of leaves) {
+    ownerViews.set(leaf.ownerViewId, leaf.ownerViewName)
+  }
+  return {
+    ownerViewIds: Array.from(ownerViews.keys()),
+    ownerViewNames: Array.from(ownerViews.values()),
+  }
+}
+
+function collapseEndpointToAncestor(
+  snapshot: WorkspaceGraphSnapshot,
+  currentViewId: number,
+  currentVisibleElementIds: Set<number>,
+  ownerViewId: number,
+  endpoint: ProxyEndpoint,
+  collapseCounts: Map<number, number>,
+): ProxyEndpoint {
+  if (!endpoint.externalToView) {
+    return endpoint
+  }
+
+  const collapseAncestorElementId = [...(endpoint.contextPathElementIds ?? [])]
+    .reverse()
+    .find((elementId) => (collapseCounts.get(elementId) ?? 0) >= 2)
+
+  if (collapseAncestorElementId == null) {
+    return endpoint
+  }
+
+  const visibleAncestorPlacement = placementInView(snapshot, currentViewId, collapseAncestorElementId)
+  if (visibleAncestorPlacement && currentVisibleElementIds.has(collapseAncestorElementId)) {
+    return {
+      ...endpoint,
+      anchorElementId: collapseAncestorElementId,
+      anchorElementName: visibleAncestorPlacement.element.name,
+      anchorViewId: currentViewId,
+      anchorViewName: viewName(snapshot, currentViewId),
+      placementViewId: currentViewId,
+      placementViewName: viewName(snapshot, currentViewId),
+      externalToView: false,
+      currentBranchElementId: null,
+      commonAncestorViewId: currentViewId,
+      commonAncestorViewName: viewName(snapshot, currentViewId),
+    }
+  }
+
+  const ancestorPlacement = chooseBestPlacement(snapshot, collapseAncestorElementId, currentViewId, ownerViewId)
+    ?? firstPlacementForElement(snapshot, collapseAncestorElementId)
+  const commonAncestorViewId = findLowestCommonAncestorViewId(
+    snapshot,
+    currentViewId,
+    ancestorPlacement?.viewId ?? endpoint.anchorViewId ?? endpoint.placementViewId,
+  )
+  const currentBranchElementId = commonAncestorViewId == null || commonAncestorViewId === currentViewId
+    ? null
+    : (relativeOwnerElementPath(snapshot, commonAncestorViewId, currentViewId)[0] ?? null)
+
+  return {
+    ...endpoint,
+    anchorElementId: collapseAncestorElementId,
+    anchorElementName: ancestorPlacement?.element.name ?? endpoint.anchorElementName,
+    anchorViewId: ancestorPlacement?.viewId ?? endpoint.anchorViewId,
+    anchorViewName: ancestorPlacement?.viewName ?? endpoint.anchorViewName,
+    placementViewId: ancestorPlacement?.viewId ?? endpoint.placementViewId,
+    placementViewName: ancestorPlacement?.viewName ?? endpoint.placementViewName,
+    currentBranchElementId,
+    commonAncestorViewId,
+    commonAncestorViewName: viewName(snapshot, commonAncestorViewId),
+  }
+}
+
+function isNativeCurrentViewConnector(connector: Connector, currentViewId: number, currentVisibleElementIds: Set<number>): boolean {
+  return connector.view_id === currentViewId &&
+    currentVisibleElementIds.has(connector.source_element_id) &&
+    currentVisibleElementIds.has(connector.target_element_id)
+}
+
+export interface ViewProxyGraphResult {
+  proxyNodes: ProxyContextNode[]
+  proxyConnectors: AggregatedProxyConnector[]
+  proxyConnectorDetailsByKey: Record<string, ProxyConnectorDetails>
+}
+
+export function resolveViewProxyGraph(
+  snapshot: WorkspaceGraphSnapshot | null,
+  currentViewId: number | null,
+  currentViewElements: PlacedElement[],
+  settings: CrossBranchContextSettings,
+): ViewProxyGraphResult {
+  if (!snapshot || currentViewId == null || !settings.enabled) {
+    return { proxyNodes: [], proxyConnectors: [], proxyConnectorDetailsByKey: {} }
+  }
+
+  const currentVisibleElementIds = new Set(currentViewElements.map((element) => element.element_id))
+  const currentVisibleElementsById = new Map(currentViewElements.map((element) => [element.element_id, element]))
+
+  const connectorLeaves: ProxyConnectorLeaf[] = []
+  for (const connector of allConnectors(snapshot)) {
+    if (isNativeCurrentViewConnector(connector, currentViewId, currentVisibleElementIds)) continue
+
+    const source = buildProxyEndpoint(snapshot, currentViewId, currentVisibleElementIds, connector.view_id, connector.source_element_id)
+    const target = buildProxyEndpoint(snapshot, currentViewId, currentVisibleElementIds, connector.view_id, connector.target_element_id)
+    if (!source || !target) continue
+    if (source.externalToView && target.externalToView) continue
+
+    const maxDepth = Math.max(source.depth, target.depth)
+    if (settings.depth < CROSS_BRANCH_DEPTH_ALL && maxDepth > settings.depth) continue
+
+    const sourceAnchorId = displayNodeId(source)
+    const targetAnchorId = displayNodeId(target)
+    if (sourceAnchorId === targetAnchorId) continue
+    if (!source.externalToView && !target.externalToView && connector.view_id === currentViewId) continue
+
+    connectorLeaves.push({
+      connector,
+      ownerViewId: connector.view_id,
+      ownerViewName: viewName(snapshot, connector.view_id) ?? `View ${connector.view_id}`,
+      source,
+      target,
+    })
+  }
+
+  const collapseAncestorElements = new Map<number, Set<number>>()
+  for (const leaf of connectorLeaves) {
+    for (const endpoint of [leaf.source, leaf.target]) {
+      for (const ancestorElementId of endpoint.contextPathElementIds ?? []) {
+        const elements = collapseAncestorElements.get(ancestorElementId) ?? new Set<number>()
+        elements.add(endpoint.actualElementId)
+        collapseAncestorElements.set(ancestorElementId, elements)
+      }
+    }
+  }
+  const collapseCounts = new Map(
+    Array.from(collapseAncestorElements.entries()).map(([ancestorElementId, elements]) => [ancestorElementId, elements.size]),
+  )
+
+  const collapsedConnectorLeaves = connectorLeaves.flatMap((leaf) => {
+    const source = collapseEndpointToAncestor(
+      snapshot,
+      currentViewId,
+      currentVisibleElementIds,
+      leaf.ownerViewId,
+      leaf.source,
+      collapseCounts,
+    )
+    const target = collapseEndpointToAncestor(
+      snapshot,
+      currentViewId,
+      currentVisibleElementIds,
+      leaf.ownerViewId,
+      leaf.target,
+      collapseCounts,
+    )
+    if (displayNodeId(source) === displayNodeId(target)) {
+      return []
+    }
+    return [{ ...leaf, source, target }]
+  })
+
+  const grouped = new Map<string, ProxyConnectorLeaf[]>()
+  for (const leaf of collapsedConnectorLeaves) {
+    const key = proxyDisplayGroupKey(displayNodeId(leaf.source), displayNodeId(leaf.target))
+    const group = grouped.get(key)
+    if (group) group.push(leaf)
+    else grouped.set(key, [leaf])
+  }
+
+  const proxyNodesMap = new Map<string, ProxyContextNode>()
+  const proxyConnectorDetailsByKey: Record<string, ProxyConnectorDetails> = {}
+  const proxyConnectors: AggregatedProxyConnector[] = []
+
+  for (const [key, leaves] of grouped) {
+    const [first] = leaves
+    const { ownerViewIds, ownerViewNames } = ownerViewsFromLeaves(leaves)
+    const [canonicalSourceAnchorId, canonicalTargetAnchorId] = canonicalPairIds(
+      displayNodeId(first.source),
+      displayNodeId(first.target),
+    )
+    const canonicalFirstIsSource = canonicalSourceAnchorId === displayNodeId(first.source)
+    const details: ProxyConnectorDetails = {
+      key,
+      label: proxyDisplayLabel(leaves),
+      count: leaves.length,
+      sourceAnchorId: canonicalSourceAnchorId,
+      targetAnchorId: canonicalTargetAnchorId,
+      sourceAnchorName: canonicalFirstIsSource ? first.source.anchorElementName : first.target.anchorElementName,
+      targetAnchorName: canonicalFirstIsSource ? first.target.anchorElementName : first.source.anchorElementName,
+      ownerViewIds,
+      ownerViewNames,
+      connectors: leaves,
+    }
+    proxyConnectorDetailsByKey[key] = details
+
+    for (const endpoint of [first.source, first.target]) {
+      if (!endpoint.externalToView) continue
+      const nodeId = displayNodeId(endpoint)
+      const endpointSortLevel = ancestorDepth(snapshot, endpoint.placementViewId ?? endpoint.anchorViewId ?? endpoint.commonAncestorViewId)
+      const existingNode = proxyNodesMap.get(nodeId)
+      if (existingNode) {
+        const mergedOwners = new Map<number, string>()
+        existingNode.ownerViewIds.forEach((ownerViewId, index) => {
+          mergedOwners.set(ownerViewId, existingNode.ownerViewNames[index] ?? `View ${ownerViewId}`)
+        })
+        details.ownerViewIds.forEach((ownerViewId, index) => {
+          mergedOwners.set(ownerViewId, details.ownerViewNames[index] ?? `View ${ownerViewId}`)
+        })
+        existingNode.ownerViewIds = Array.from(mergedOwners.keys())
+        existingNode.ownerViewNames = Array.from(mergedOwners.values())
+        existingNode.connectorCount += details.count
+        existingNode.sortLevel = Math.min(existingNode.sortLevel, endpointSortLevel)
+        continue
+      }
+      const anchorPlacement = elementDisplayPlacement(snapshot, endpoint.anchorElementId, endpoint.anchorViewId)
+      proxyNodesMap.set(nodeId, {
+        id: nodeId,
+        anchorElementId: endpoint.anchorElementId,
+        name: endpoint.anchorElementName,
+        sortLevel: endpointSortLevel,
+        placementViewId: endpoint.placementViewId ?? endpoint.anchorViewId ?? null,
+        kind: anchorPlacement?.element.kind ?? null,
+        description: anchorPlacement?.element.description ?? null,
+        technology: anchorPlacement?.element.technology ?? null,
+        logoUrl: anchorPlacement?.element.logo_url ?? null,
+        technologyConnectors: anchorPlacement?.element.technology_connectors ?? [],
+        ownerViewIds: [...details.ownerViewIds],
+        ownerViewNames: [...details.ownerViewNames],
+        commonAncestorViewId: endpoint.commonAncestorViewId,
+        commonAncestorViewName: endpoint.commonAncestorViewName,
+        currentBranchElementId: endpoint.currentBranchElementId,
+        connectorCount: details.count,
+      })
+    }
+
+    const sourceElement = first.source.externalToView ? null : currentVisibleElementsById.get(first.source.anchorElementId) ?? null
+    const targetElement = first.target.externalToView ? null : currentVisibleElementsById.get(first.target.anchorElementId) ?? null
+
+    proxyConnectors.push({
+      key,
+      sourceAnchorId: canonicalSourceAnchorId,
+      targetAnchorId: canonicalTargetAnchorId,
+      direction: 'merged',
+      style: first.connector.style || 'bezier',
+      label: details.label,
+      count: details.count,
+      sourceElementId: sourceElement?.element_id ?? null,
+      targetElementId: targetElement?.element_id ?? null,
+      details,
+    })
+  }
+
+  return {
+    proxyNodes: [...proxyNodesMap.values()],
+    proxyConnectors,
+    proxyConnectorDetailsByKey,
+  }
+}
+
+export interface ZUIResolvedConnector {
+  key: string
+  sourceElementId: number
+  targetElementId: number
+  sourceAnchorElementId: number
+  targetAnchorElementId: number
+  sourceNodeId: string
+  targetNodeId: string
+  direction: string
+  style: string
+  label: string
+  details: ProxyConnectorDetails
+}
+
+function endpointPathForOwnerView(snapshot: WorkspaceGraphSnapshot, ownerViewId: number, elementId: number): number[] {
+  const placement = chooseBestPlacement(snapshot, elementId, ownerViewId, ownerViewId)
+  if (!placement) return [elementId]
+  const owners = relativeOwnerElementPath(snapshot, snapshot.ancestorsByViewId[placement.viewId]?.[0] ?? placement.viewId, placement.viewId)
+  const path = [...owners]
+  if (path[path.length - 1] !== elementId) path.push(elementId)
+  return path.length > 0 ? path : [elementId]
+}
+
+export function resolveZUIProxyConnectors(
+  snapshot: WorkspaceGraphSnapshot | null,
+  visibleNodeIdsByElementId: Map<number, string>,
+  settings: CrossBranchContextSettings,
+): ZUIResolvedConnector[] {
+  if (!snapshot || !settings.enabled || visibleNodeIdsByElementId.size === 0) return []
+
+  const visibleElements = new Set(visibleNodeIdsByElementId.keys())
+  const grouped = new Map<string, ProxyConnectorLeaf[]>()
+
+  for (const connector of allConnectors(snapshot)) {
+    const sourcePath = endpointPathForOwnerView(snapshot, connector.view_id, connector.source_element_id)
+    const targetPath = endpointPathForOwnerView(snapshot, connector.view_id, connector.target_element_id)
+
+    const sourceAnchorElementId = [...sourcePath].reverse().find((elementId) => visibleElements.has(elementId))
+    const targetAnchorElementId = [...targetPath].reverse().find((elementId) => visibleElements.has(elementId))
+    if (sourceAnchorElementId == null || targetAnchorElementId == null) continue
+    if (sourceAnchorElementId === targetAnchorElementId) continue
+    // If both real endpoints are already visible, the normal edge renderer will
+    // draw this connector in-place. Only keep connectors that need anchoring to
+    // an ancestor/summary node.
+    if (
+      sourceAnchorElementId === connector.source_element_id &&
+      targetAnchorElementId === connector.target_element_id
+    ) continue
+
+    const sourceDepth = Math.max(0, sourcePath.length - 1 - sourcePath.indexOf(sourceAnchorElementId))
+    const targetDepth = Math.max(0, targetPath.length - 1 - targetPath.indexOf(targetAnchorElementId))
+    if (settings.depth < CROSS_BRANCH_DEPTH_ALL && Math.max(sourceDepth, targetDepth) > settings.depth) continue
+
+    const sourceEndpoint: ProxyEndpoint = {
+      actualElementId: connector.source_element_id,
+      actualElementName: firstPlacementForElement(snapshot, connector.source_element_id)?.element.name ?? `Element ${connector.source_element_id}`,
+      anchorElementId: sourceAnchorElementId,
+      anchorElementName: firstPlacementForElement(snapshot, sourceAnchorElementId)?.element.name ?? `Element ${sourceAnchorElementId}`,
+      anchorViewId: firstPlacementForElement(snapshot, sourceAnchorElementId)?.viewId ?? connector.view_id,
+      anchorViewName: firstPlacementForElement(snapshot, sourceAnchorElementId)?.viewName ?? viewName(snapshot, connector.view_id),
+      placementViewId: connector.view_id,
+      placementViewName: viewName(snapshot, connector.view_id),
+      depth: sourceDepth,
+      externalToView: sourceAnchorElementId !== connector.source_element_id,
+      currentBranchElementId: null,
+      commonAncestorViewId: null,
+      commonAncestorViewName: null,
+    }
+    const targetEndpoint: ProxyEndpoint = {
+      actualElementId: connector.target_element_id,
+      actualElementName: firstPlacementForElement(snapshot, connector.target_element_id)?.element.name ?? `Element ${connector.target_element_id}`,
+      anchorElementId: targetAnchorElementId,
+      anchorElementName: firstPlacementForElement(snapshot, targetAnchorElementId)?.element.name ?? `Element ${targetAnchorElementId}`,
+      anchorViewId: firstPlacementForElement(snapshot, targetAnchorElementId)?.viewId ?? connector.view_id,
+      anchorViewName: firstPlacementForElement(snapshot, targetAnchorElementId)?.viewName ?? viewName(snapshot, connector.view_id),
+      placementViewId: connector.view_id,
+      placementViewName: viewName(snapshot, connector.view_id),
+      depth: targetDepth,
+      externalToView: targetAnchorElementId !== connector.target_element_id,
+      currentBranchElementId: null,
+      commonAncestorViewId: null,
+      commonAncestorViewName: null,
+    }
+
+    const leaf: ProxyConnectorLeaf = {
+      connector,
+      ownerViewId: connector.view_id,
+      ownerViewName: viewName(snapshot, connector.view_id) ?? `View ${connector.view_id}`,
+      source: sourceEndpoint,
+      target: targetEndpoint,
+    }
+
+    const [leftAnchorElementId, rightAnchorElementId] = canonicalPairElements(sourceAnchorElementId, targetAnchorElementId)
+    const key = [leftAnchorElementId, rightAnchorElementId].join('::')
+    const existing = grouped.get(key)
+    if (existing) existing.push(leaf)
+    else grouped.set(key, [leaf])
+  }
+
+  const resolved: ZUIResolvedConnector[] = []
+  for (const [key, leaves] of grouped) {
+    const [first] = leaves
+    const { ownerViewIds, ownerViewNames } = ownerViewsFromLeaves(leaves)
+    const [canonicalSourceAnchorElementId, canonicalTargetAnchorElementId] = canonicalPairElements(
+      first.source.anchorElementId,
+      first.target.anchorElementId,
+    )
+    const canonicalFirstIsSource = canonicalSourceAnchorElementId === first.source.anchorElementId
+    const details: ProxyConnectorDetails = {
+      key,
+      label: proxyDisplayLabel(leaves),
+      count: leaves.length,
+      sourceAnchorId: visibleNodeKey(canonicalSourceAnchorElementId),
+      targetAnchorId: visibleNodeKey(canonicalTargetAnchorElementId),
+      sourceAnchorName: canonicalFirstIsSource ? first.source.anchorElementName : first.target.anchorElementName,
+      targetAnchorName: canonicalFirstIsSource ? first.target.anchorElementName : first.source.anchorElementName,
+      ownerViewIds,
+      ownerViewNames,
+      connectors: leaves,
+    }
+
+    resolved.push({
+      key,
+      sourceElementId: canonicalFirstIsSource ? first.source.actualElementId : first.target.actualElementId,
+      targetElementId: canonicalFirstIsSource ? first.target.actualElementId : first.source.actualElementId,
+      sourceAnchorElementId: canonicalSourceAnchorElementId,
+      targetAnchorElementId: canonicalTargetAnchorElementId,
+      sourceNodeId: visibleNodeIdsByElementId.get(canonicalSourceAnchorElementId) ?? '',
+      targetNodeId: visibleNodeIdsByElementId.get(canonicalTargetAnchorElementId) ?? '',
+      direction: 'merged',
+      style: first.connector.style || 'bezier',
+      label: details.label,
+      details,
+    })
+  }
+
+  return resolved.filter((connector) => connector.sourceNodeId && connector.targetNodeId)
+}