@nyaruka/temba-components 0.138.6 → 0.140.0

package/src/flow/Editor.ts

@@ -11,6 +11,7 @@ import {
 import { getStore } from '../store/Store';
 import {
   AppState,
+  FlowIssue,
   fromStore,
   zustand,
   FLOW_SPEC_VERSION
@@ -19,6 +20,13 @@ import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType, Workspace } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
+import {
+  formatIssueMessage,
+  getNodeBounds,
+  calculateReflowPositions,
+  NodeBounds,
+  snapToGrid
+} from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 
 interface Revision {
@@ -37,25 +45,20 @@ interface Revision {
 import { ACTION_GROUP_METADATA } from './types';
 import { Checkbox } from '../form/Checkbox';
 
-import { Plumber } from './Plumber';
+import {
+  Plumber,
+  calculateFlowchartPath,
+  ARROW_LENGTH,
+  ARROW_HALF_WIDTH,
+  CURSOR_GAP
+} from './Plumber';
 import { CanvasNode } from './CanvasNode';
 import { Dialog } from '../layout/Dialog';
-import { Connection } from '@jsplumb/browser-ui';
+
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
-import {
-  getNodeBounds,
-  calculateReflowPositions,
-  NodeBounds,
-  nodesOverlap
-} from './utils';
 import { FloatingWindow } from '../layout/FloatingWindow';
 
-export function snapToGrid(value: number): number {
-  const snapped = Math.round(value / 20) * 20;
-  return Math.max(snapped, 0);
-}
-
 export function findNodeForExit(
   definition: FlowDefinition,
   exitUuid: string
@@ -122,7 +125,7 @@ const DROP_PREVIEW_OFFSET_X = 20;
 const DROP_PREVIEW_OFFSET_Y = 20;
 
 export class Editor extends RapidElement {
-  // unfortunately, jsplumb requires that we be in light DOM
+  // connection SVGs are appended directly to the canvas, so we need light DOM
   createRenderRoot() {
     return this;
   }
@@ -172,6 +175,9 @@ export class Editor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.getCurrentActivity())
   private activityData!: any;
 
+  @fromStore(zustand, (state: AppState) => state.flowInfo?.issues || [])
+  private flowIssues!: FlowIssue[];
+
   // Drag state
   @state()
   private isDragging = false;
@@ -212,6 +218,13 @@ export class Editor extends RapidElement {
   @state()
   private isValidTarget = true;
 
+  // Canvas-relative source exit position (set at drag start)
+  private connectionSourceX: number | null = null;
+  private connectionSourceY: number | null = null;
+
+  @state()
+  private issuesWindowHidden = true;
+
   @state()
   private localizationWindowHidden = true;
 
@@ -264,6 +277,8 @@ export class Editor extends RapidElement {
   @state()
   private editingAction: Action | null = null;
 
+  private dialogOrigin: { x: number; y: number } | null = null;
+
   @state()
   private isCreatingNewNode = false;
 
@@ -294,6 +309,7 @@ export class Editor extends RapidElement {
   private connectionPlaceholder: {
     position: FlowPosition;
     visible: boolean;
+    dragUp?: boolean;
   } | null = null;
 
   // Track pending connection when dropping on canvas
@@ -351,6 +367,10 @@ export class Editor extends RapidElement {
         -webkit-font-smoothing: antialiased;
       }
 
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       #grid {
         position: relative;
         background-color: #f9f9f9;
@@ -401,100 +421,56 @@ export class Editor extends RapidElement {
       }
 
       #grid.viewing-revision temba-flow-node,
-      #grid.viewing-revision svg.jtk-connector,
-      #grid.viewing-revision .activity-overlay {
+      #grid.viewing-revision svg.plumb-connector {
         opacity: 0.5;
       }
 
-      body .jtk-endpoint {
-        width: initial;
-        height: initial;
-      }
-
-      .jtk-endpoint {
-        z-index: 600;
-        opacity: 0;
-      }
-
-      .plumb-source {
-        z-index: 600;
-        cursor: pointer;
-        opacity: 0;
-      }
-
-      .plumb-source.connected {
-        border-radius: 50%;
-        pointer-events: none;
+      svg.plumb-connector {
+        z-index: 10;
       }
 
-      .plumb-source circle {
-        fill: purple;
+      svg.plumb-connector path {
+        stroke: var(--color-connectors);
+        stroke-width: 3px;
       }
 
-      .plumb-target {
-        z-index: 600;
-        opacity: 0;
-        cursor: pointer;
-        fill: transparent;
+      svg.plumb-connector .plumb-arrow {
+        fill: var(--color-connectors);
+        stroke: none;
       }
 
-      body svg.jtk-connector.plumb-connector path {
-        stroke: var(--color-connectors) !important;
-        stroke-width: 3px;
+      svg.plumb-connector.hover path {
+        stroke: var(--color-success);
       }
 
-      body .plumb-connector {
-        z-index: 10 !important;
+      svg.plumb-connector.hover .plumb-arrow {
+        fill: var(--color-success);
       }
 
-      body .plumb-connector .plumb-arrow {
-        fill: var(--color-connectors);
+      #canvas.read-only-connections svg.plumb-connector.hover path {
         stroke: var(--color-connectors);
-        stroke-width: 0px !important;
-        margin-top: 6px;
-        z-index: 10;
       }
 
-      body svg.jtk-connector.jtk-hover path {
-        stroke: var(--color-success) !important;
-        stroke-width: 3px;
-      }
-
-      body #canvas.read-only-connections svg.jtk-connector.jtk-hover path {
-        stroke: var(--color-connectors) !important;
+      #canvas.read-only-connections svg.plumb-connector.hover .plumb-arrow {
+        fill: var(--color-connectors);
       }
 
-      body .plumb-connector.jtk-hover .plumb-arrow {
-        fill: var(--color-success) !important;
-        stroke-width: 0px;
-        z-index: 10;
+      #canvas.read-only-connections svg.plumb-connector,
+      #canvas.read-only-connections svg.plumb-connector * {
+        pointer-events: none !important;
+        cursor: default !important;
       }
 
-      body
-        #canvas.read-only-connections
-        .plumb-connector.jtk-hover
-        .plumb-arrow {
-        fill: var(--color-connectors) !important;
-        ponter-events: none;
+      svg.plumb-connector.removing path {
+        stroke: var(--color-error);
       }
 
-      body #canvas.read-only-connections svg {
-        pointer-events: none;
+      svg.plumb-connector.removing .plumb-arrow {
+        fill: var(--color-error);
       }
 
-      /* Activity overlays on connections */
-      .jtk-overlay.activity-overlay {
-        background: #f3f3f3;
-        border: 1px solid #d9d9d9;
-        color: #333;
-        border-radius: 4px;
-        padding: 2px 4px;
-        font-size: 10px;
-        font-weight: 600;
-        line-height: 0.9;
-        cursor: pointer;
-        z-index: 500;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      svg.plumb-connector.dragging {
+        z-index: 99999;
       }
 
       /* Active contact count on nodes */
@@ -516,6 +492,30 @@ export class Editor extends RapidElement {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
       }
 
+      /* Activity overlay badges on connection exit stubs */
+      .activity-overlay {
+        position: absolute;
+        background: #f3f3f3;
+        border: 1px solid #d9d9d9;
+        color: #333;
+        border-radius: 4px;
+        padding: 2px 4px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 0.9;
+        cursor: pointer;
+        z-index: 10;
+        pointer-events: auto;
+        white-space: nowrap;
+        user-select: none;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      #grid.viewing-revision .activity-overlay {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
       /* Recent contacts popup */
       @keyframes popupBounceIn {
         0% {
@@ -585,7 +585,6 @@ export class Editor extends RapidElement {
 
       .recent-contacts-popup .contact-name:hover {
         text-decoration: underline;
-        color: var(--color-link-primary, #1d4ed8);
       }
 
       .recent-contacts-popup .contact-operand {
@@ -601,17 +600,6 @@ export class Editor extends RapidElement {
         color: #999;
       }
 
-      /* Connection dragging feedback */
-      body svg.jtk-connector.jtk-dragging {
-        z-index: 99999 !important;
-      }
-
-      .katavorio-drag-no-select svg.jtk-connector path,
-      .katavorio-drag-no-select svg.jtk-endpoint path {
-        pointer-events: none !important;
-        border: 1px solid purple;
-      }
-
       /* Connection target feedback */
       temba-flow-node.connection-target-valid {
         outline: 3px solid var(--color-success, #22c55e) !important;
@@ -641,10 +629,6 @@ export class Editor extends RapidElement {
         border-radius: var(--curvature);
       }
 
-      .jtk-floating-endpoint {
-        pointer-events: none;
-      }
-
       .localization-window-content {
         display: flex;
         flex-direction: column;
@@ -835,6 +819,26 @@ export class Editor extends RapidElement {
         color: #9ca3af;
         white-space: nowrap;
       }
+
+      .issue-list-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #333;
+      }
+
+      .issue-list-item:hover {
+        background: #fff5f5;
+      }
+
+      .issue-list-item temba-icon {
+        color: tomato;
+        flex-shrink: 0;
+      }
     `;
   }
 
@@ -852,17 +856,15 @@ export class Editor extends RapidElement {
       getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
     }
 
-    this.plumber.on('connection:drag', (connection: Connection) => {
-      // console.log('connection:drag', connection);
-      this.dragFromNodeId =
-        connection.data.nodeId ||
-        document.getElementById(connection.sourceId).closest('.node').id;
+    this.plumber.on('connection:drag', (connection: any) => {
+      this.dragFromNodeId = connection.data.nodeId;
       this.sourceId = connection.sourceId;
+      this.connectionSourceX = connection.sourceX;
+      this.connectionSourceY = connection.sourceY;
       this.originalConnectionTargetId = connection.target.id;
     });
 
     this.plumber.on('connection:abort', (info) => {
-      // console.log('Connection aborted', info);
       this.makeConnection(info);
     });
 
@@ -898,6 +900,7 @@ export class Editor extends RapidElement {
         left: snapToGrid(this.connectionPlaceholder.position.left),
         top: snapToGrid(this.connectionPlaceholder.position.top)
       };
+      const isDragUp = !!this.connectionPlaceholder.dragUp;
 
       // Update the placeholder to the snapped position
       this.connectionPlaceholder.position = snappedPosition;
@@ -909,12 +912,14 @@ export class Editor extends RapidElement {
         position: snappedPosition
       };
 
-      // Show the context menu just below the placeholder
+      // Show the context menu near the placeholder
       const canvas = this.querySelector('#canvas');
       if (canvas) {
         const canvasRect = canvas.getBoundingClientRect();
-        const menuX = canvasRect.left + snappedPosition.left - 40; // center horizontally
-        const menuY = canvasRect.top + snappedPosition.top + 80; // just below placeholder
+        const menuX = canvasRect.left + snappedPosition.left - 40;
+        const menuY = isDragUp
+          ? canvasRect.top + snappedPosition.top + 74 // just below placeholder bottom
+          : canvasRect.top + snappedPosition.top + 80; // just below placeholder
 
         const canvasMenu = this.querySelector(
           'temba-canvas-menu'
@@ -950,6 +955,8 @@ export class Editor extends RapidElement {
     // Clear connection state (but keep sourceId/dragFromNodeId if we have a pending connection)
     if (!this.pendingCanvasConnection) {
       this.sourceId = null;
+      this.connectionSourceX = null;
+      this.connectionSourceY = null;
       this.dragFromNodeId = null;
     }
     this.targetId = null;
@@ -1130,7 +1137,7 @@ export class Editor extends RapidElement {
       }
 
       this.activityTimer = window.setTimeout(() => {
-        // this.fetchActivityData();
+        this.fetchActivityData();
       }, this.activityInterval);
     });
   }
@@ -1246,6 +1253,7 @@ export class Editor extends RapidElement {
     if (event.button !== 0) return;
 
     if (this.isReadOnly()) return;
+    this.blurActiveContentEditable();
 
     const element = event.currentTarget as HTMLElement;
     // Only start dragging if clicking on the element itself, not on exits or other interactive elements
@@ -1315,8 +1323,22 @@ export class Editor extends RapidElement {
     this.handleCanvasMouseDown(event);
   }
 
+  private blurActiveContentEditable(): void {
+    let active: Element | null = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+      active = active.shadowRoot.activeElement;
+    }
+    if (
+      active instanceof HTMLElement &&
+      active.getAttribute('contenteditable') === 'true'
+    ) {
+      active.blur();
+    }
+  }
+
   private handleCanvasMouseDown(event: MouseEvent): void {
     if (this.isReadOnly()) return;
+    this.blurActiveContentEditable();
 
     const target = event.target as HTMLElement;
     if (target.id === 'canvas' || target.id === 'grid') {
@@ -1570,86 +1592,71 @@ export class Editor extends RapidElement {
     if (!this.connectionPlaceholder || !this.connectionPlaceholder.visible)
       return '';
 
-    const { position } = this.connectionPlaceholder;
+    const { position, dragUp } = this.connectionPlaceholder;
 
     // Render connection line when we have a pending connection (after drop)
     let svgPath = null;
-    if (this.sourceId && this.dragFromNodeId && this.pendingCanvasConnection) {
-      const sourceElement = document.getElementById(this.sourceId);
-      if (sourceElement) {
-        const sourceRect = sourceElement.getBoundingClientRect();
-        const canvas = this.querySelector('#canvas');
-        const canvasRect = canvas.getBoundingClientRect();
-
-        // Source point (bottom center of exit)
-        const sourceX =
-          sourceRect.left + sourceRect.width / 2 - canvasRect.left;
-        const sourceY = sourceRect.bottom - canvasRect.top;
-
-        // Target point (top center of placeholder)
-        const targetX = position.left + 100; // 100 is half the placeholder width (200px)
-        const targetY = position.top;
-
-        // Use jsPlumb FlowchartConnector parameters: stub [20, 10], cornerRadius 5
-        const stubStart = 20;
-        const stubEnd = 10;
-        const cornerRadius = 5;
-
-        // Calculate flowchart path with corners
-        const verticalStart = sourceY + stubStart;
-        const verticalEnd = targetY - stubEnd;
-        const midY = (verticalStart + verticalEnd) / 2;
-
-        // Build path with rounded corners (flowchart style)
-        let pathData = `M ${sourceX} ${sourceY} L ${sourceX} ${verticalStart}`;
-
-        if (sourceX !== targetX) {
-          // Horizontal segment needed
-          if (Math.abs(verticalEnd - verticalStart) > cornerRadius * 2) {
-            // Enough space for corners
-            pathData += ` L ${sourceX} ${midY - cornerRadius}`;
-            pathData += ` Q ${sourceX} ${midY}, ${
-              sourceX + (targetX > sourceX ? cornerRadius : -cornerRadius)
-            } ${midY}`;
-            pathData += ` L ${
-              targetX - (targetX > sourceX ? cornerRadius : -cornerRadius)
-            } ${midY}`;
-            pathData += ` Q ${targetX} ${midY}, ${targetX} ${
-              midY + cornerRadius
-            }`;
-            pathData += ` L ${targetX} ${verticalEnd}`;
-          } else {
-            // Direct horizontal transition
-            pathData += ` L ${targetX} ${verticalStart}`;
-            pathData += ` L ${targetX} ${verticalEnd}`;
-          }
-        } else {
-          // Straight vertical line
-          pathData += ` L ${targetX} ${verticalEnd}`;
-        }
-
-        pathData += ` L ${targetX} ${targetY}`;
+    if (
+      this.sourceId &&
+      this.dragFromNodeId &&
+      this.pendingCanvasConnection &&
+      this.connectionSourceX != null &&
+      this.connectionSourceY != null
+    ) {
+      const sourceX = this.connectionSourceX;
+      const sourceY = this.connectionSourceY;
+      const targetX = position.left + 100;
+      // When dragging up, connect to the placeholder bottom; otherwise to the top
+      const targetY = dragUp ? position.top + 64 : position.top;
+
+      const routeFace: 'top' | 'left' | 'right' = dragUp
+        ? targetX < sourceX
+          ? 'left'
+          : 'right'
+        : 'top';
+
+      const pathData = calculateFlowchartPath(
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        20,
+        dragUp ? 0 : 10,
+        5,
+        routeFace
+      );
 
-        svgPath = html`
-          <svg
-            style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"
-          >
-            <path
-              d="${pathData}"
-              fill="none"
-              stroke="var(--color-connectors, #ccc)"
-              stroke-width="3"
-              class="plumb-connector"
-            />
-            <polygon
-              points="${targetX},${targetY} ${targetX - 6.5},${targetY -
-              13} ${targetX + 6.5},${targetY - 13}"
-              fill="var(--color-connectors, #ccc)"
-              class="plumb-arrow"
-            />
-          </svg>
-        `;
+      const aw = ARROW_HALF_WIDTH;
+      const al = ARROW_LENGTH;
+      let arrowPoints: string;
+      if (dragUp) {
+        // Arrow tip pointing up, base at placeholder bottom
+        arrowPoints = `${targetX},${targetY - al} ${targetX - aw},${targetY} ${
+          targetX + aw
+        },${targetY}`;
+      } else {
+        // Arrow pointing down into top of placeholder
+        arrowPoints = `${targetX},${targetY} ${targetX - aw},${targetY - al} ${
+          targetX + aw
+        },${targetY - al}`;
       }
+
+      svgPath = html`
+        <svg
+          style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"
+        >
+          <path
+            d="${pathData}"
+            fill="none"
+            stroke="var(--color-connectors, #ccc)"
+            stroke-width="3"
+          />
+          <polygon
+            points="${arrowPoints}"
+            fill="var(--color-connectors, #ccc)"
+          />
+        </svg>
+      `;
     }
 
     return html`${svgPath}
@@ -1673,22 +1680,13 @@ export class Editor extends RapidElement {
 
   /**
    * Checks for node collisions and reflows nodes as needed.
-   * Nodes are only moved downward to resolve collisions.
-   *
-   * @param movedNodeUuids - UUIDs of nodes that were just moved/dropped
-   * @param droppedNodeUuid - UUID of the specific node that was dropped (if applicable)
-   * @param dropTargetBounds - Bounds of the node that was dropped onto (if applicable)
+   * Sacred nodes (just moved/dropped) keep their positions while
+   * other nodes are moved in the least-disruptive direction.
    */
-  private checkCollisionsAndReflow(
-    movedNodeUuids: string[],
-    droppedNodeUuid: string | null = null,
-    dropTargetBounds: NodeBounds | null = null
-  ): void {
+  private checkCollisionsAndReflow(sacredNodeUuids: string[]): void {
     if (!this.definition) return;
 
-    // Get all node bounds (only for actual nodes, not stickies)
     const allBounds: NodeBounds[] = [];
-
     for (const node of this.definition.nodes) {
       const nodeUI = this.definition._ui?.nodes[node.uuid];
       if (!nodeUI?.position) continue;
@@ -1699,45 +1697,17 @@ export class Editor extends RapidElement {
       }
     }
 
-    // Check if we need to determine midpoint priority for a dropped node
-    let targetHasPriority = false;
-    if (droppedNodeUuid && dropTargetBounds) {
-      const droppedBounds = allBounds.find((b) => b.uuid === droppedNodeUuid);
-      if (droppedBounds) {
-        // Check if the bottom of the dropped node is below the midpoint of the target
-        // If bottom is above midpoint, dropped node gets preference (targetHasPriority = false)
-        // If bottom is below midpoint, target gets preference (targetHasPriority = true)
-        const droppedBottom = droppedBounds.bottom;
-        const targetMidpoint =
-          dropTargetBounds.top + dropTargetBounds.height / 2;
-        targetHasPriority = droppedBottom > targetMidpoint;
-      }
-    }
-
-    // Calculate reflow positions for each moved node
-    const allReflowPositions: { [uuid: string]: FlowPosition } = {};
-
-    for (const movedUuid of movedNodeUuids) {
-      const movedBounds = allBounds.find((b) => b.uuid === movedUuid);
-      if (!movedBounds) continue;
-
-      // Calculate reflow for this moved node
-      const reflowPositions = calculateReflowPositions(
-        movedUuid,
-        movedBounds,
-        allBounds,
-        droppedNodeUuid === movedUuid ? targetHasPriority : false
-      );
+    const reflowPositions = calculateReflowPositions(
+      sacredNodeUuids,
+      allBounds
+    );
 
-      // Merge into all reflow positions
+    if (reflowPositions.size > 0) {
+      const positions: { [uuid: string]: FlowPosition } = {};
       for (const [uuid, position] of reflowPositions.entries()) {
-        allReflowPositions[uuid] = position;
+        positions[uuid] = position;
       }
-    }
-
-    // If there are positions to update, apply them
-    if (Object.keys(allReflowPositions).length > 0) {
-      getStore().getState().updateCanvasPositions(allReflowPositions);
+      getStore().getState().updateCanvasPositions(positions);
     }
   }
 
@@ -1780,23 +1750,41 @@ export class Editor extends RapidElement {
         this.isValidTarget = true;
 
         // Show connection placeholder when over empty canvas
-        // Calculate position: horizontally centered at mouse, vertically just below mouse
         const canvas = this.querySelector('#canvas');
         if (canvas) {
           const canvasRect = canvas.getBoundingClientRect();
           const relativeX = event.clientX - canvasRect.left;
           const relativeY = event.clientY - canvasRect.top;
 
-          // offset the placeholder so it's centered horizontally and just below the mouse
-          const placeholderWidth = 200; // approximate node width
-          const placeholderOffset = 20; // distance below mouse cursor
+          const placeholderWidth = 200;
+          const placeholderHeight = 64;
+          const arrowLength = ARROW_LENGTH;
+          const cursorGap = CURSOR_GAP;
+
+          // Determine if cursor is above the source exit using stored sourceY
+          const dragUp =
+            this.connectionSourceY != null
+              ? relativeY < this.connectionSourceY
+              : false;
+
+          let top: number;
+          if (dragUp) {
+            // Arrow points up: tip at cy + cursorGap.
+            // Placeholder bottom should sit just above the arrow tip.
+            top = relativeY + cursorGap - placeholderHeight;
+          } else {
+            // Arrow points down: tip at cy - cursorGap + arrowLength.
+            // Placeholder top sits just below the arrow tip.
+            top = relativeY - cursorGap + arrowLength;
+          }
 
           this.connectionPlaceholder = {
             position: {
               left: relativeX - placeholderWidth / 2,
-              top: relativeY + placeholderOffset
+              top
             },
-            visible: true
+            visible: true,
+            dragUp
           };
         }
       }
@@ -1924,49 +1912,7 @@ export class Editor extends RapidElement {
         if (nodeUuids.length > 0) {
           // Allow DOM to update before checking collisions
           setTimeout(() => {
-            // If only one node was moved, detect which node it might have been dropped onto
-            let droppedNodeUuid: string | null = null;
-            let dropTargetBounds: NodeBounds | null = null;
-
-            if (nodeUuids.length === 1) {
-              droppedNodeUuid = nodeUuids[0];
-              const droppedNodeUI = this.definition._ui?.nodes[droppedNodeUuid];
-
-              if (droppedNodeUI?.position) {
-                const droppedBounds = getNodeBounds(
-                  droppedNodeUuid,
-                  droppedNodeUI.position
-                );
-
-                if (droppedBounds) {
-                  // Find which node (if any) the dropped node overlaps with
-                  for (const node of this.definition.nodes) {
-                    if (node.uuid === droppedNodeUuid) continue;
-
-                    const nodeUI = this.definition._ui?.nodes[node.uuid];
-                    if (!nodeUI?.position) continue;
-
-                    const targetBounds = getNodeBounds(
-                      node.uuid,
-                      nodeUI.position
-                    );
-                    if (
-                      targetBounds &&
-                      nodesOverlap(droppedBounds, targetBounds)
-                    ) {
-                      dropTargetBounds = targetBounds;
-                      break; // Use the first overlapping node
-                    }
-                  }
-                }
-              }
-            }
-
-            this.checkCollisionsAndReflow(
-              nodeUuids,
-              droppedNodeUuid,
-              dropTargetBounds
-            );
+            this.checkCollisionsAndReflow(nodeUuids);
           }, 0);
         } else {
           // No nodes moved, just repaint connections
@@ -2091,6 +2037,8 @@ export class Editor extends RapidElement {
       this.pendingCanvasConnection = null;
       this.connectionPlaceholder = null;
       this.sourceId = null;
+      this.connectionSourceX = null;
+      this.connectionSourceY = null;
       this.dragFromNodeId = null;
     } else {
       // Show node type selector
@@ -2126,6 +2074,8 @@ export class Editor extends RapidElement {
       this.pendingCanvasConnection = null;
       this.connectionPlaceholder = null;
       this.sourceId = null;
+      this.connectionSourceX = null;
+      this.connectionSourceY = null;
       this.dragFromNodeId = null;
       this.originalConnectionTargetId = null;
     }
@@ -2259,6 +2209,10 @@ export class Editor extends RapidElement {
   private handleActionEditRequested(event: CustomEvent): void {
     // For action editing, we set the action and find the corresponding node
     this.editingAction = event.detail.action;
+    this.dialogOrigin =
+      event.detail.originX != null
+        ? { x: event.detail.originX, y: event.detail.originY }
+        : null;
 
     // Find the node that contains this action
     const nodeUuid = event.detail.nodeUuid;
@@ -2304,6 +2258,10 @@ export class Editor extends RapidElement {
   private handleNodeEditRequested(event: CustomEvent): void {
     this.editingNode = event.detail.node;
     this.editingNodeUI = event.detail.nodeUI;
+    this.dialogOrigin =
+      event.detail.originX != null
+        ? { x: event.detail.originX, y: event.detail.originY }
+        : null;
   }
 
   private handleNodeDeleted(event: CustomEvent): void {
@@ -2362,6 +2320,8 @@ export class Editor extends RapidElement {
           this.pendingCanvasConnection = null;
           this.connectionPlaceholder = null;
           this.sourceId = null;
+          this.connectionSourceX = null;
+          this.connectionSourceY = null;
           this.dragFromNodeId = null;
         }
 
@@ -2391,6 +2351,7 @@ export class Editor extends RapidElement {
     this.editingNode = null;
     this.editingNodeUI = null;
     this.editingAction = null;
+    this.dialogOrigin = null;
   }
 
   private handleActionEditCanceled(): void {
@@ -2431,6 +2392,8 @@ export class Editor extends RapidElement {
           this.pendingCanvasConnection = null;
           this.connectionPlaceholder = null;
           this.sourceId = null;
+          this.connectionSourceX = null;
+          this.connectionSourceY = null;
           this.dragFromNodeId = null;
         }
 
@@ -3043,6 +3006,7 @@ export class Editor extends RapidElement {
 
     this.localizationWindowHidden = false;
     this.revisionsWindowHidden = true;
+    this.issuesWindowHidden = true;
 
     const alreadySelected = languages.some(
       (lang) => lang.code === this.languageCode
@@ -3305,11 +3269,47 @@ export class Editor extends RapidElement {
     this.autoTranslating = false;
   }
 
+  private handleIssuesTabClick(): void {
+    this.issuesWindowHidden = false;
+    this.revisionsWindowHidden = true;
+    this.localizationWindowHidden = true;
+  }
+
+  private handleIssuesWindowClosed(): void {
+    this.issuesWindowHidden = true;
+  }
+
+  private handleIssueItemClick(issue: FlowIssue): void {
+    const issuesWindow = document.getElementById(
+      'issues-window'
+    ) as FloatingWindow;
+    issuesWindow?.handleClose();
+    this.issuesWindowHidden = true;
+
+    this.focusNode(issue.node_uuid);
+
+    const node = this.definition.nodes.find((n) => n.uuid === issue.node_uuid);
+    if (!node) return;
+
+    if (issue.action_uuid) {
+      const action = node.actions?.find((a) => a.uuid === issue.action_uuid);
+      if (action) {
+        this.editingAction = action;
+        this.editingNode = node;
+        this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+      }
+    } else {
+      this.editingNode = node;
+      this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+    }
+  }
+
   private handleRevisionsTabClick(): void {
     if (this.revisionsWindowHidden) {
       this.fetchRevisions();
       this.revisionsWindowHidden = false;
-      this.localizationWindowHidden = true; // Close other window
+      this.issuesWindowHidden = true;
+      this.localizationWindowHidden = true;
     }
   }
 
@@ -3423,6 +3423,51 @@ export class Editor extends RapidElement {
     getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
   }
 
+  private renderIssuesTab(): TemplateResult | string {
+    if (!this.flowIssues?.length) return '';
+    return html`
+      <temba-floating-tab
+        id="issues-tab"
+        icon="alert_warning"
+        label="Flow Issues"
+        color="tomato"
+        order="1"
+        .hidden=${!this.issuesWindowHidden}
+        @temba-button-clicked=${this.handleIssuesTabClick}
+      ></temba-floating-tab>
+    `;
+  }
+
+  private renderIssuesWindow(): TemplateResult | string {
+    if (!this.flowIssues?.length) return '';
+    return html`
+      <temba-floating-window
+        id="issues-window"
+        header="Flow Issues"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="tomato"
+        .hidden=${this.issuesWindowHidden}
+        @temba-dialog-hidden=${this.handleIssuesWindowClosed}
+      >
+        <div style="display:flex; flex-direction:column; gap:2px;">
+          ${this.flowIssues.map(
+            (issue) => html`
+              <div
+                class="issue-list-item"
+                @click=${() => this.handleIssueItemClick(issue)}
+              >
+                <temba-icon name="alert_warning" size="1.2"></temba-icon>
+                <span>${formatIssueMessage(issue)}</span>
+              </div>
+            `
+          )}
+        </div>
+      </temba-floating-window>
+    `;
+  }
+
   private renderRevisionsTab(): TemplateResult | string {
     return html`
       <temba-floating-tab
@@ -3430,7 +3475,7 @@ export class Editor extends RapidElement {
         icon="revisions"
         label="Revisions"
         color="rgb(142, 94, 167)"
-        top="105"
+        order="2"
         .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
         @temba-button-clicked=${this.handleRevisionsTabClick}
       ></temba-floating-tab>
@@ -3728,7 +3773,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
-        top="180"
+        order="3"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -3786,8 +3831,9 @@ export class Editor extends RapidElement {
 
     const stickies = this.definition?._ui?.stickies || {};
 
-    return html`${style} ${this.renderRevisionsWindow()}
-      ${this.renderLocalizationWindow()} ${this.renderAutoTranslateDialog()}
+    return html`${style} ${this.renderIssuesWindow()}
+      ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
@@ -3877,6 +3923,7 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
+            .dialogOrigin=${this.dialogOrigin}
             @temba-node-saved=${(e: CustomEvent) =>
               this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e: CustomEvent) =>
@@ -3892,6 +3939,7 @@ export class Editor extends RapidElement {
             .features=${this.features}
           ></temba-node-type-selector>`
         : ''}
-      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
+      ${this.renderIssuesTab()} ${this.renderRevisionsTab()}
+      ${this.renderLocalizationTab()} `;
   }
 }