@nyaruka/temba-components 0.137.0 → 0.138.4

package/src/flow/Editor.ts

@@ -9,12 +9,31 @@ import {
   NodeUI
 } from '../store/flow-definition';
 import { getStore } from '../store/Store';
-import { AppState, fromStore, zustand } from '../store/AppState';
+import {
+  AppState,
+  fromStore,
+  zustand,
+  FLOW_SPEC_VERSION
+} from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType, Workspace } from '../interfaces';
-import { generateUUID, postJSON } from '../utils';
+import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
+
+interface Revision {
+  id: number;
+  user: {
+    id: number;
+    username: string;
+    first_name: string;
+    last_name: string;
+    name?: string;
+  };
+  created_on: string;
+  comment?: string;
+}
+
 import { ACTION_GROUP_METADATA } from './types';
 import { Checkbox } from '../form/Checkbox';
 
@@ -30,6 +49,7 @@ import {
   NodeBounds,
   nodesOverlap
 } from './utils';
+import { FloatingWindow } from '../layout/FloatingWindow';
 
 export function snapToGrid(value: number): number {
   const snapped = Math.round(value / 20) * 20;
@@ -186,6 +206,9 @@ export class Editor extends RapidElement {
   @state()
   private dragFromNodeId: string | null = null;
 
+  @state()
+  private originalConnectionTargetId: string | null = null;
+
   @state()
   private isValidTarget = true;
 
@@ -212,6 +235,23 @@ export class Editor extends RapidElement {
   @state()
   private autoTranslateError: string | null = null;
 
+  @state()
+  private revisionsWindowHidden = true;
+
+  @state()
+  private revisions: Revision[] = [];
+
+  @state()
+  private viewingRevision: Revision | null = null;
+
+  @state()
+  private isLoadingRevisions = false;
+
+  private preRevertState: {
+    definition: FlowDefinition;
+    dirtyDate: Date | null;
+  } | null = null;
+
   private translationCache = new Map<string, string>();
 
   // NodeEditor state - handles both node and action editing
@@ -249,6 +289,20 @@ export class Editor extends RapidElement {
   // Track previous target node to clear placeholder when moving between nodes
   private previousActionDragTargetNodeUuid: string | null = null;
 
+  // Connection placeholder state for dropping connections on empty canvas
+  @state()
+  private connectionPlaceholder: {
+    position: FlowPosition;
+    visible: boolean;
+  } | null = null;
+
+  // Track pending connection when dropping on canvas
+  private pendingCanvasConnection: {
+    fromNodeId: string;
+    exitId: string;
+    position: FlowPosition;
+  } | null = null;
+
   private canvasMouseDown = false;
 
   private getAvailableLanguages(): Array<{ code: string; name: string }> {
@@ -329,6 +383,29 @@ export class Editor extends RapidElement {
         transition: none !important;
       }
 
+      #canvas.viewing-revision {
+        pointer-events: none;
+      }
+
+      #canvas.read-only svg {
+        pointer-events: none;
+      }
+
+      #grid.viewing-revision {
+        background-color: #fff9fc;
+        background-image: radial-gradient(
+          circle,
+          rgba(166, 38, 164, 0.2) 1px,
+          transparent 1px
+        );
+      }
+
+      #grid.viewing-revision temba-flow-node,
+      #grid.viewing-revision svg.jtk-connector,
+      #grid.viewing-revision .activity-overlay {
+        opacity: 0.5;
+      }
+
       body .jtk-endpoint {
         width: initial;
         height: initial;
@@ -383,12 +460,28 @@ export class Editor extends RapidElement {
         stroke-width: 3px;
       }
 
+      body #canvas.read-only-connections svg.jtk-connector.jtk-hover path {
+        stroke: var(--color-connectors) !important;
+      }
+
       body .plumb-connector.jtk-hover .plumb-arrow {
         fill: var(--color-success) !important;
         stroke-width: 0px;
         z-index: 10;
       }
 
+      body
+        #canvas.read-only-connections
+        .plumb-connector.jtk-hover
+        .plumb-arrow {
+        fill: var(--color-connectors) !important;
+        ponter-events: none;
+      }
+
+      body #canvas.read-only-connections svg {
+        pointer-events: none;
+      }
+
       /* Activity overlays on connections */
       .jtk-overlay.activity-overlay {
         background: #f3f3f3;
@@ -677,6 +770,18 @@ export class Editor extends RapidElement {
         width: 100%;
       }
 
+      .revert-button {
+        background: var(--color-primary-dark);
+        border: none;
+        color: #fff;
+        padding: 6px 10px;
+        border-radius: var(--curvature);
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
       .auto-translate-button {
         background: var(--color-primary-dark);
         border: none;
@@ -747,36 +852,91 @@ export class Editor extends RapidElement {
       getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
     }
 
-    this.plumber.on('connection:drag', (info: Connection) => {
-      this.dragFromNodeId = document
-        .getElementById(info.sourceId)
-        .closest('.node').id;
-      this.sourceId = info.sourceId;
+    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.sourceId = connection.sourceId;
+      this.originalConnectionTargetId = connection.target.id;
     });
 
-    this.plumber.on('connection:abort', () => {
-      this.makeConnection();
+    this.plumber.on('connection:abort', (info) => {
+      // console.log('Connection aborted', info);
+      this.makeConnection(info);
     });
 
-    this.plumber.on('connection:detach', () => {
-      this.makeConnection();
+    this.plumber.on('connection:detach', (info) => {
+      // console.log('Connection detached', info);
+      this.makeConnection(info);
     });
   }
 
-  private makeConnection() {
+  private makeConnection(info) {
     if (this.sourceId && this.targetId && this.isValidTarget) {
-      this.plumber.connectIds(
-        this.dragFromNodeId,
-        this.sourceId,
-        this.targetId
-      );
-      getStore()
-        .getState()
-        .updateConnection(this.dragFromNodeId, this.sourceId, this.targetId);
+      // going to the same target, just put it back
+      if (info.target.id === this.targetId) {
+        this.plumber.connectIds(
+          this.dragFromNodeId,
+          this.sourceId,
+          this.targetId
+        );
+      }
+      // otherwise update the connection
+      else {
+        getStore()
+          .getState()
+          .updateConnection(this.dragFromNodeId, this.sourceId, this.targetId);
+      }
+    } else if (
+      this.connectionPlaceholder &&
+      this.connectionPlaceholder.visible &&
+      this.sourceId
+    ) {
+      // Snap the placeholder position to grid
+      const snappedPosition = {
+        left: snapToGrid(this.connectionPlaceholder.position.left),
+        top: snapToGrid(this.connectionPlaceholder.position.top)
+      };
+
+      // Update the placeholder to the snapped position
+      this.connectionPlaceholder.position = snappedPosition;
+
+      // Store the pending connection info
+      this.pendingCanvasConnection = {
+        fromNodeId: this.dragFromNodeId,
+        exitId: this.sourceId,
+        position: snappedPosition
+      };
+
+      // Show the context menu just below 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 canvasMenu = this.querySelector(
+          'temba-canvas-menu'
+        ) as CanvasMenu;
+        if (canvasMenu) {
+          canvasMenu.show(
+            menuX,
+            menuY,
+            {
+              x: snappedPosition.left,
+              y: snappedPosition.top
+            },
+            false
+          ); // Don't show sticky note option for connection drops
+        }
+      }
+
+      // Request update to render the connection line
+      this.requestUpdate();
 
-      setTimeout(() => {
-        this.plumber.repaintEverything();
-      }, 100);
+      // Don't clear placeholder or connection info yet - keep them for menu interaction
+      return;
     }
 
     // Clean up visual feedback
@@ -787,9 +947,12 @@ export class Editor extends RapidElement {
       );
     });
 
-    this.sourceId = null;
+    // Clear connection state (but keep sourceId/dragFromNodeId if we have a pending connection)
+    if (!this.pendingCanvasConnection) {
+      this.sourceId = null;
+      this.dragFromNodeId = null;
+    }
     this.targetId = null;
-    this.dragFromNodeId = null;
     this.isValidTarget = true;
   }
 
@@ -895,10 +1058,11 @@ export class Editor extends RapidElement {
     }, SAVE_QUIET_TIME);
   }
 
-  private saveChanges(): void {
+  private saveChanges(definitionOverride?: FlowDefinition): Promise<void> {
+    const definition = definitionOverride || this.definition;
     // post the flow definition to the server
-    getStore()
-      .postJSON(`/flow/revisions/${this.flow}/`, this.definition)
+    return getStore()
+      .postJSON(`/flow/revisions/${this.flow}/`, definition)
       .then((response) => {
         // Update flow info and revision with the response data
         if (response.json) {
@@ -911,6 +1075,11 @@ export class Editor extends RapidElement {
           if (response.json.revision?.revision !== undefined) {
             state.setRevision(response.json.revision.revision);
           }
+
+          // if the revisions window is open, refresh the list
+          if (!this.revisionsWindowHidden) {
+            this.fetchRevisions();
+          }
         }
       })
       .catch((error) => {
@@ -961,20 +1130,13 @@ export class Editor extends RapidElement {
       }
 
       this.activityTimer = window.setTimeout(() => {
-        this.fetchActivityData();
+        // this.fetchActivityData();
       }, this.activityInterval);
     });
   }
 
   private handleLanguageChange(languageCode: string): void {
     zustand.getState().setLanguageCode(languageCode);
-
-    // Repaint connections after language change since node sizes can change
-    if (this.plumber) {
-      requestAnimationFrame(() => {
-        this.plumber.repaintEverything();
-      });
-    }
   }
 
   disconnectedCallback(): void {
@@ -1043,6 +1205,16 @@ export class Editor extends RapidElement {
       }
     });
 
+    // Listen for canvas menu cancel (close without selection)
+    this.addEventListener(CustomEventType.Canceled, (event: CustomEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'TEMBA-CANVAS-MENU') {
+        this.handleCanvasMenuClosed();
+      } else if (target.tagName === 'TEMBA-NODE-TYPE-SELECTOR') {
+        this.handleNodeTypeSelectorClosed();
+      }
+    });
+
     // Listen for action drag events from nodes
     this.addEventListener(
       CustomEventType.DragExternal,
@@ -1073,6 +1245,8 @@ export class Editor extends RapidElement {
     // ignore right clicks
     if (event.button !== 0) return;
 
+    if (this.isReadOnly()) return;
+
     const element = event.currentTarget as HTMLElement;
     // Only start dragging if clicking on the element itself, not on exits or other interactive elements
     const target = event.target as HTMLElement;
@@ -1142,6 +1316,8 @@ export class Editor extends RapidElement {
   }
 
   private handleCanvasMouseDown(event: MouseEvent): void {
+    if (this.isReadOnly()) return;
+
     const target = event.target as HTMLElement;
     if (target.id === 'canvas' || target.id === 'grid') {
       // Ignore clicks on exits
@@ -1212,13 +1388,8 @@ export class Editor extends RapidElement {
   }
 
   private deleteNodes(uuids: string[]): void {
-    // Clean up jsPlumb connections for nodes before removing them
-    uuids.forEach((uuid) => {
-      this.plumber.removeNodeConnections(uuid);
-    });
-
-    // Now remove them from the definition
-    if (uuids.length > 0 && this.plumber) {
+    // Remove nodes from the definition - CanvasNode will handle plumber cleanup
+    if (uuids.length > 0) {
       getStore().getState().removeNodes(uuids);
     }
   }
@@ -1395,6 +1566,111 @@ export class Editor extends RapidElement {
     </div>`;
   }
 
+  private renderConnectionPlaceholder(): TemplateResult | string {
+    if (!this.connectionPlaceholder || !this.connectionPlaceholder.visible)
+      return '';
+
+    const { position } = 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}`;
+
+        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>
+        `;
+      }
+    }
+
+    return html`${svgPath}
+      <div
+        class="connection-placeholder"
+        style="position: absolute; left: ${position.left}px; top: ${position.top}px; opacity: 0.6; pointer-events: none; z-index: 10000;"
+      >
+        <div
+          class="node execute-actions"
+          style="outline: 3px dashed var(--color-primary, #3b82f6); outline-offset: 2px; border-radius: var(--curvature); min-width: 200px;"
+        >
+          <div class="empty-node-placeholder" style="height: 60px;"></div>
+          <div class="action-exits">
+            <div class="exit-wrapper">
+              <div class="exit"></div>
+            </div>
+          </div>
+        </div>
+      </div>`;
+  }
+
   /**
    * Checks for node collisions and reflows nodes as needed.
    * Nodes are only moved downward to resolve collisions.
@@ -1496,10 +1772,37 @@ export class Editor extends RapidElement {
         } else {
           targetNode.classList.add('connection-target-invalid');
         }
+
+        // Hide connection placeholder when over a node
+        this.connectionPlaceholder = null;
       } else {
         this.targetId = null;
         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
+
+          this.connectionPlaceholder = {
+            position: {
+              left: relativeX - placeholderWidth / 2,
+              top: relativeY + placeholderOffset
+            },
+            visible: true
+          };
+        }
       }
+
+      // Force update to show/hide placeholder
+      this.requestUpdate();
     }
 
     // Handle item dragging
@@ -1735,6 +2038,11 @@ export class Editor extends RapidElement {
   }
 
   private handleCanvasContextMenu(event: MouseEvent): void {
+    if (this.isReadOnly()) {
+      event.preventDefault();
+      return;
+    }
+
     // Check if we right-clicked on empty canvas space
     const target = event.target as HTMLElement;
     if (target.id !== 'canvas') {
@@ -1779,6 +2087,11 @@ export class Editor extends RapidElement {
         left: selection.position.x,
         top: selection.position.y
       });
+      // Clear all pending connection state and placeholder
+      this.pendingCanvasConnection = null;
+      this.connectionPlaceholder = null;
+      this.sourceId = null;
+      this.dragFromNodeId = null;
     } else {
       // Show node type selector
       const selector = this.querySelector(
@@ -1787,12 +2100,55 @@ export class Editor extends RapidElement {
       if (selector) {
         selector.show(selection.action, selection.position);
       }
+      // Note: we don't clear pendingCanvasConnection or placeholder here,
+      // they will be used in handleNodeTypeSelection
     }
   }
 
+  private cleanUpConnection(): void {
+    if (this.isCreatingNewNode) {
+      this.isCreatingNewNode = false;
+      this.pendingNodePosition = null;
+    }
+
+    // see if we need to put our connection back
+    if (this.originalConnectionTargetId) {
+      this.plumber.connectIds(
+        this.dragFromNodeId,
+        this.sourceId,
+        this.originalConnectionTargetId
+      );
+      this.originalConnectionTargetId = null;
+    }
+
+    // Menu closed without selection - clear placeholder and pending connection
+    if (this.pendingCanvasConnection) {
+      this.pendingCanvasConnection = null;
+      this.connectionPlaceholder = null;
+      this.sourceId = null;
+      this.dragFromNodeId = null;
+      this.originalConnectionTargetId = null;
+    }
+  }
+
+  private handleCanvasMenuClosed(): void {
+    this.cleanUpConnection();
+  }
+
+  private handleNodeTypeSelectorClosed(): void {
+    this.cleanUpConnection();
+  }
+
   private handleNodeTypeSelection(event: CustomEvent): void {
     const selection = event.detail as NodeTypeSelection;
 
+    // Check if we have a pending canvas connection (from dropping on empty canvas)
+    if (this.pendingCanvasConnection) {
+      // Don't clear the placeholder yet - keep it visible while editing
+      // The position is already stored in pendingCanvasConnection
+      // Fall through to normal node creation flow below
+    }
+
     // Check if we're adding an action to an existing node
     if (this.addActionToNodeUuid) {
       // Find the existing node
@@ -1867,20 +2223,24 @@ export class Editor extends RapidElement {
     }
 
     const tempNodeUI: NodeUI = {
-      position: {
-        left: selection.position.x,
-        top: selection.position.y
-      },
+      position: this.pendingCanvasConnection
+        ? this.pendingCanvasConnection.position
+        : {
+            left: selection.position.x,
+            top: selection.position.y
+          },
       type: nodeType as any,
       config: {}
     };
 
     // Mark that we're creating a new node and store the position
     this.isCreatingNewNode = true;
-    this.pendingNodePosition = {
-      left: selection.position.x,
-      top: selection.position.y
-    };
+    this.pendingNodePosition = this.pendingCanvasConnection
+      ? this.pendingCanvasConnection.position
+      : {
+          left: selection.position.x,
+          top: selection.position.y
+        };
 
     // Open the node editor with the temporary node
     this.editingNode = tempNode;
@@ -1988,6 +2348,23 @@ export class Editor extends RapidElement {
         // Add the node to the store
         store.getState().addNode(updatedNode, nodeUI);
 
+        // If we have a pending canvas connection, connect it to this new node
+        if (this.pendingCanvasConnection) {
+          store
+            .getState()
+            .updateConnection(
+              this.pendingCanvasConnection.fromNodeId,
+              this.pendingCanvasConnection.exitId,
+              updatedNode.uuid
+            );
+
+          // Clear the pending connection and placeholder
+          this.pendingCanvasConnection = null;
+          this.connectionPlaceholder = null;
+          this.sourceId = null;
+          this.dragFromNodeId = null;
+        }
+
         // Reset the creation flags
         this.isCreatingNewNode = false;
         this.pendingNodePosition = null;
@@ -1997,12 +2374,13 @@ export class Editor extends RapidElement {
           this.checkCollisionsAndReflow([updatedNode.uuid]);
         });
       } else {
+        const uuid = this.editingNode.uuid;
         // Update existing node in the store
-        getStore()?.getState().updateNode(this.editingNode.uuid, updatedNode);
+        getStore()?.getState().updateNode(uuid, updatedNode);
 
         // Check for collisions and reflow in case node size changed
         requestAnimationFrame(() => {
-          this.checkCollisionsAndReflow([this.editingNode.uuid]);
+          this.checkCollisionsAndReflow([uuid]);
         });
       }
     }
@@ -2017,10 +2395,7 @@ export class Editor extends RapidElement {
 
   private handleActionEditCanceled(): void {
     // If we were creating a new node, just discard it
-    if (this.isCreatingNewNode) {
-      this.isCreatingNewNode = false;
-      this.pendingNodePosition = null;
-    }
+    this.cleanUpConnection();
     this.closeNodeEditor();
   }
 
@@ -2042,6 +2417,23 @@ export class Editor extends RapidElement {
         // Add the node to the store
         store.getState().addNode(updatedNode, nodeUI);
 
+        // If we have a pending canvas connection, connect it to this new node
+        if (this.pendingCanvasConnection) {
+          store
+            .getState()
+            .updateConnection(
+              this.pendingCanvasConnection.fromNodeId,
+              this.pendingCanvasConnection.exitId,
+              updatedNode.uuid
+            );
+
+          // Clear the pending connection and placeholder
+          this.pendingCanvasConnection = null;
+          this.connectionPlaceholder = null;
+          this.sourceId = null;
+          this.dragFromNodeId = null;
+        }
+
         // Reset the creation flags
         this.isCreatingNewNode = false;
         this.pendingNodePosition = null;
@@ -2089,11 +2481,7 @@ export class Editor extends RapidElement {
   }
 
   private handleNodeEditCanceled(): void {
-    // If we were creating a new node, just discard it
-    if (this.isCreatingNewNode) {
-      this.isCreatingNewNode = false;
-      this.pendingNodePosition = null;
-    }
+    this.cleanUpConnection();
     this.closeNodeEditor();
   }
 
@@ -2468,7 +2856,7 @@ export class Editor extends RapidElement {
     const bundles: TranslationBundle[] = [];
 
     this.definition.nodes.forEach((node) => {
-      node.actions.forEach((action) => {
+      node.actions?.forEach((action) => {
         const config = ACTION_CONFIG[action.type];
         if (!config?.localizable || config.localizable.length === 0) {
           return;
@@ -2654,6 +3042,7 @@ export class Editor extends RapidElement {
     }
 
     this.localizationWindowHidden = false;
+    this.revisionsWindowHidden = true;
 
     const alreadySelected = languages.some(
       (lang) => lang.code === this.languageCode
@@ -2916,6 +3305,223 @@ export class Editor extends RapidElement {
     this.autoTranslating = false;
   }
 
+  private handleRevisionsTabClick(): void {
+    if (this.revisionsWindowHidden) {
+      this.fetchRevisions();
+      this.revisionsWindowHidden = false;
+      this.localizationWindowHidden = true; // Close other window
+    }
+  }
+
+  private handleRevisionsWindowClosed(): void {
+    this.resetRevisionsScroll();
+    this.revisionsWindowHidden = true;
+    if (this.viewingRevision) {
+      this.handleCancelRevisionView();
+    }
+  }
+
+  private resetRevisionsScroll() {
+    const list =
+      this.querySelector('#revisions-window').shadowRoot?.querySelector(
+        '.body'
+      );
+    if (list) {
+      list.scrollTop = 0;
+    }
+  }
+
+  private async fetchRevisions() {
+    this.isLoadingRevisions = true;
+    try {
+      const results = await fetchResults(
+        `/flow/revisions/${this.flow}/?version=${FLOW_SPEC_VERSION}`
+      );
+      this.revisions = results.slice(1);
+    } catch (e) {
+      console.error('Error fetching revisions', e);
+    } finally {
+      this.isLoadingRevisions = false;
+    }
+  }
+
+  private async handleRevisionClick(revision: Revision) {
+    if (this.viewingRevision?.id === revision.id) {
+      return;
+    }
+
+    if (!this.viewingRevision) {
+      // Save current state first
+      this.preRevertState = {
+        definition: this.definition,
+        dirtyDate: this.dirtyDate
+      };
+    }
+
+    this.viewingRevision = revision;
+    this.isLoadingRevisions = true;
+    this.plumber?.reset();
+
+    try {
+      await getStore()
+        .getState()
+        .fetchRevision(`/flow/revisions/${this.flow}`, revision.id.toString());
+    } catch (e) {
+      console.error('Error fetching revision details', e);
+      this.handleCancelRevisionView();
+    } finally {
+      this.isLoadingRevisions = false;
+    }
+  }
+
+  private handleCancelRevisionView() {
+    this.plumber?.reset();
+    if (this.preRevertState) {
+      const currentInfo = getStore().getState().flowInfo;
+      getStore().getState().setFlowContents({
+        definition: this.preRevertState.definition,
+        info: currentInfo
+      });
+      if (this.preRevertState.dirtyDate) {
+        getStore().getState().setDirtyDate(this.preRevertState.dirtyDate);
+      }
+    } else {
+      // Fallback if no pre-revert definition
+      getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+    }
+
+    this.viewingRevision = null;
+    this.preRevertState = null;
+  }
+
+  private async handleRevertClick() {
+    if (!this.viewingRevision || !this.preRevertState) return;
+    this.plumber?.reset();
+
+    // Use the content of the viewing revision (this.definition)
+    // but the revision number of the current head (preRevertState)
+    // so the server accepts it as a valid update
+    const definitionToSave = {
+      ...this.definition,
+      revision: this.preRevertState.definition.revision
+    };
+
+    await this.saveChanges(definitionToSave);
+    this.viewingRevision = null;
+    this.preRevertState = null;
+    this.revisionsWindowHidden = true;
+
+    const revisionsWindow = document.getElementById(
+      'revisions-window'
+    ) as FloatingWindow;
+    revisionsWindow.handleClose();
+
+    // Refresh revisions list to show the new one
+    this.fetchRevisions();
+
+    // Fetch the latest version of the flow to ensure the store is up to date
+    getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+  }
+
+  private renderRevisionsTab(): TemplateResult | string {
+    return html`
+      <temba-floating-tab
+        id="revisions-tab"
+        icon="revisions"
+        label="Revisions"
+        color="rgb(142, 94, 167)"
+        top="105"
+        .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
+        @temba-button-clicked=${this.handleRevisionsTabClick}
+      ></temba-floating-tab>
+    `;
+  }
+
+  private renderRevisionsWindow(): TemplateResult | string {
+    return html`
+      <temba-floating-window
+        id="revisions-window"
+        header="Revisions"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="rgb(142, 94, 167)"
+        .hidden=${this.revisionsWindowHidden}
+        @temba-dialog-hidden=${this.handleRevisionsWindowClosed}
+      >
+        <div class="localization-window-content">
+          <div
+            class="revisions-list"
+            style="display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding-bottom:10px;"
+          >
+            ${this.isLoadingRevisions && !this.revisions.length
+              ? html`<temba-loading></temba-loading>`
+              : this.revisions.map((rev) => {
+                  const isSelected = this.viewingRevision?.id === rev.id;
+                  return html`
+                    <div
+                      class="revision-item ${isSelected ? 'selected' : ''}"
+                      style="padding:8px; border-radius:4px; cursor:pointer; background:${
+                        isSelected
+                          ? '#f0f6ff' // Light blue bg for selected
+                          : '#f9fafb'
+                      }; border:1px solid ${
+                    isSelected ? '#a4cafe' : '#e5e7eb'
+                  }; transition: all 0.2s ease;"
+                      @click=${() => this.handleRevisionClick(rev)}
+                    >
+                      <div
+                        style="display:flex; justify-content:space-between; align-items:center;"
+                      >
+                        <div
+                          class="revision-header"
+                          style="margin-bottom: 2px;"
+                        >
+                          <div
+                            style="font-weight:600; font-size:13px; color:#111827;"
+                          >
+                            <temba-date value=${
+                              rev.created_on
+                            } display="duration"></temba-date>
+                            
+                          </div>
+                          <div style="font-size:11px; color:#6b7280;">
+                            ${rev.user.name || rev.user.username}
+                          </div>
+                        </div>
+                        ${
+                          isSelected
+                            ? html`<button
+                                class="revert-button"
+                                @click=${this.handleRevertClick}
+                              >
+                                Revert
+                              </button>`
+                            : html``
+                        }
+                        
+                        </button>
+                      </div>
+
+                      ${
+                        rev.comment
+                          ? html`<div
+                              style="font-size:12px; color:#4b5563; margin-top:4px;"
+                            >
+                              ${rev.comment}
+                            </div>`
+                          : ''
+                      }
+                      
+                    </div>
+                  `;
+                })}
+          </div>
+        </div>
+      </temba-floating-window>
+    `;
+  }
+
   private renderLocalizationWindow(): TemplateResult | string {
     const languages = this.getLocalizationLanguages();
     if (!languages.length) {
@@ -3167,6 +3773,10 @@ export class Editor extends RapidElement {
     });
   }
 
+  private isReadOnly(): boolean {
+    return this.viewingRevision !== null || this.isTranslating;
+  }
+
   public render(): TemplateResult {
     // we have to embed our own style since we are in light DOM
     const style = html`<style>
@@ -3176,20 +3786,30 @@ export class Editor extends RapidElement {
 
     const stickies = this.definition?._ui?.stickies || {};
 
-    return html`${style} ${this.renderLocalizationWindow()}
-      ${this.renderAutoTranslateDialog()}
+    return html`${style} ${this.renderRevisionsWindow()}
+      ${this.renderLocalizationWindow()} ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
+          class="${this.viewingRevision ? 'viewing-revision' : ''}"
           style="min-width:100%;width:${this.canvasSize.width}px; height:${this
             .canvasSize.height}px"
         >
-          <div id="canvas">
+          <div
+            id="canvas"
+            class="${getClasses({
+              'viewing-revision': !!this.viewingRevision,
+              'read-only-connections':
+                !!this.viewingRevision || this.isTranslating
+            })}"
+          >
             ${this.definition
               ? repeat(
-                  this.definition.nodes,
+                  [...this.definition.nodes].sort((a, b) =>
+                    a.uuid.localeCompare(b.uuid)
+                  ),
                   (node) => node.uuid,
-                  (node, index) => {
+                  (node) => {
                     const position = this.definition._ui?.nodes[node.uuid]
                       ?.position || {
                       left: 0,
@@ -3203,7 +3823,9 @@ export class Editor extends RapidElement {
                     const selected = this.selectedItems.has(node.uuid);
 
                     // first node is the flow start (nodes are sorted by position)
-                    const isFlowStart = index === 0;
+                    const isFlowStart =
+                      this.definition.nodes.length > 0 &&
+                      this.definition.nodes[0].uuid === node.uuid;
 
                     return html`<temba-flow-node
                       class="draggable ${dragging ? 'dragging' : ''} ${selected
@@ -3245,6 +3867,7 @@ export class Editor extends RapidElement {
               }
             )}
             ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
+            ${this.renderConnectionPlaceholder()}
           </div>
         </div>
       </div>
@@ -3263,10 +3886,12 @@ export class Editor extends RapidElement {
         : ''}
 
       <temba-canvas-menu></temba-canvas-menu>
-      <temba-node-type-selector
-        .flowType=${this.flowType}
-        .features=${this.features}
-      ></temba-node-type-selector>
-      ${this.renderLocalizationTab()} `;
+      ${!this.viewingRevision
+        ? html`<temba-node-type-selector
+            .flowType=${this.flowType}
+            .features=${this.features}
+          ></temba-node-type-selector>`
+        : ''}
+      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
   }
 }