Fallback to modal if elementId is not found during live preview

src/managers/preview-bar-manager.ts

@@ -237,9 +237,19 @@ function buildOverlayControls(settings: DisplaySettings, row: HTMLElement) {
   }
 }
 
+function validateSelectorInput(input: HTMLInputElement): void {
+  const selector = input.value.trim();
+  if (selector && !fetchElementBySelector(selector)) {
+    input.classList.add('gist-pb-input--invalid');
+  } else {
+    input.classList.remove('gist-pb-input--invalid');
+  }
+}
+
 function buildInlineControls(settings: DisplaySettings, row: HTMLElement) {
   const selectorInput = createInput('text', settings.elementSelector || '', '260px');
   selectorInput.placeholder = 'Element ID or selector';
+  validateSelectorInput(selectorInput);
   selectorInput.addEventListener('change', () => {
     const newSelector = selectorInput.value.trim();
     const prevSelector = currentSettings.elementSelector;
@@ -248,6 +258,7 @@ function buildInlineControls(settings: DisplaySettings, row: HTMLElement) {
     if (prevSelector && prevSelector !== newSelector) {
       restoreElementContent(prevSelector);
     }
+    validateSelectorInput(selectorInput);
   });
 
   const selectBtn = el('button', {

src/managers/preview-bar-styles.ts

@@ -93,6 +93,7 @@ export const PREVIEW_BAR_CSS = `
     font-size: 12px; color: #3F4E50; padding: 0 6px 0 2px;
     font-family: system-ui, -apple-system, sans-serif; flex-shrink: 0;
   }
+  .gist-pb-input--invalid { border-color: #941616; outline: 1px solid #941616; }
   .gist-pb-inline-row { display: flex; align-items: center; gap: 6px; }
   .gist-pb-select-elem-btn {
     height: 32px; padding: 0 12px;

src/managers/queue-manager.test.ts

@@ -1,9 +1,17 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { checkMessageQueue, stopSSEListener, pullMessagesFromQueue } from './queue-manager';
+import {
+  checkMessageQueue,
+  stopSSEListener,
+  pullMessagesFromQueue,
+  handleMessage,
+} from './queue-manager';
 import { getEligibleBroadcasts } from './message-broadcast-manager';
 import { getMessagesFromLocalStore } from './message-user-queue-manager';
-import { showMessage } from './message-manager';
+import { showMessage, embedMessage } from './message-manager';
+import { resolveMessageProperties } from './gist-properties-manager';
+import { findElement } from '../utilities/dom';
 import { settings } from '../services/settings';
+import Gist from '../gist';
 import type { GistMessage } from '../types';
 
 vi.mock('../utilities/log', () => ({ log: vi.fn() }));
@@ -82,12 +90,16 @@ vi.mock('../services/settings', () => ({
 vi.mock('../utilities/message-utils', () => ({
   applyDisplaySettings: vi.fn(),
 }));
+vi.mock('../utilities/dom', () => ({
+  findElement: vi.fn(() => null),
+}));
 vi.mock('../gist', () => ({
   default: {
     currentRoute: null,
     isDocumentVisible: true,
     currentMessages: [],
     overlayInstanceId: null,
+    config: {},
   },
 }));
 
@@ -147,4 +159,108 @@ describe('queue-manager', () => {
       expect(settings.setUseSSEFlag).toHaveBeenCalledWith(false);
     });
   });
+
+  describe('handleMessage – live preview with invalid elementId', () => {
+    it('falls back to showMessage when embedded element is not found in live preview', async () => {
+      vi.mocked(resolveMessageProperties).mockReturnValue({
+        isEmbedded: true,
+        elementId: 'nonexistent-element',
+        hasRouteRule: false,
+        routeRule: '',
+        position: '',
+        hasPosition: false,
+        tooltipPosition: '',
+        hasTooltipPosition: false,
+        tooltipArrowColor: '#fff',
+        shouldScale: false,
+        campaignId: null,
+        messageWidth: 414,
+        overlayColor: '#00000033',
+        persistent: false,
+        exitClick: false,
+        hasCustomWidth: false,
+      });
+      vi.mocked(findElement).mockReturnValue(null);
+      (Gist as unknown as Record<string, unknown>).config = { isPreviewSession: true };
+
+      const message: GistMessage = {
+        messageId: 'preview-msg',
+        queueId: 'q-preview',
+        properties: { gist: { livePreview: true, elementId: 'nonexistent-element' } },
+      };
+
+      await handleMessage(message);
+
+      expect(showMessage).toHaveBeenCalledWith(message);
+      expect(embedMessage).not.toHaveBeenCalled();
+    });
+
+    it('uses embedMessage when embedded element exists in live preview', async () => {
+      vi.mocked(resolveMessageProperties).mockReturnValue({
+        isEmbedded: true,
+        elementId: 'real-element',
+        hasRouteRule: false,
+        routeRule: '',
+        position: '',
+        hasPosition: false,
+        tooltipPosition: '',
+        hasTooltipPosition: false,
+        tooltipArrowColor: '#fff',
+        shouldScale: false,
+        campaignId: null,
+        messageWidth: 414,
+        overlayColor: '#00000033',
+        persistent: false,
+        exitClick: false,
+        hasCustomWidth: false,
+      });
+      vi.mocked(findElement).mockReturnValue(document.createElement('div'));
+      (Gist as unknown as Record<string, unknown>).config = { isPreviewSession: true };
+
+      const message: GistMessage = {
+        messageId: 'preview-msg-2',
+        queueId: 'q-preview-2',
+        properties: { gist: { livePreview: true, elementId: 'real-element' } },
+      };
+
+      await handleMessage(message);
+
+      expect(embedMessage).toHaveBeenCalledWith(message, 'real-element');
+      expect(showMessage).not.toHaveBeenCalled();
+    });
+
+    it('uses embedMessage when not in preview session even if element is missing', async () => {
+      vi.mocked(resolveMessageProperties).mockReturnValue({
+        isEmbedded: true,
+        elementId: 'missing-element',
+        hasRouteRule: false,
+        routeRule: '',
+        position: '',
+        hasPosition: false,
+        tooltipPosition: '',
+        hasTooltipPosition: false,
+        tooltipArrowColor: '#fff',
+        shouldScale: false,
+        campaignId: null,
+        messageWidth: 414,
+        overlayColor: '#00000033',
+        persistent: false,
+        exitClick: false,
+        hasCustomWidth: false,
+      });
+      vi.mocked(findElement).mockReturnValue(null);
+      (Gist as unknown as Record<string, unknown>).config = { isPreviewSession: false };
+
+      const message: GistMessage = {
+        messageId: 'normal-msg',
+        queueId: 'q-normal',
+        properties: { gist: { elementId: 'missing-element' } },
+      };
+
+      await handleMessage(message);
+
+      expect(embedMessage).toHaveBeenCalledWith(message, 'missing-element');
+      expect(showMessage).not.toHaveBeenCalled();
+    });
+  });
 });

src/managers/queue-manager.ts

@@ -25,6 +25,7 @@ import { updateInboxMessagesLocalStore } from './inbox-message-manager';
 import type { InboxMessage } from './inbox-message-manager';
 import { settings } from '../services/settings';
 import { applyDisplaySettings } from '../utilities/message-utils';
+import { findElement } from '../utilities/dom';
 import type { GistMessage, DisplaySettings } from '../types';
 
 const sleep = (time: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, time));
@@ -86,7 +87,7 @@ export async function checkCurrentMessagesAfterRouteChange(): Promise<void> {
 }
 
 // TODO: Move this to a utility and only return valid messages (from: getEligibleBroadcasts getMessagesFromLocalStore) & to handleMessage
-async function handleMessage(message: GistMessage): Promise<boolean> {
+export async function handleMessage(message: GistMessage): Promise<boolean> {
   let messageProperties = resolveMessageProperties(message);
   if (messageProperties.hasRouteRule) {
     let currentUrl = Gist.currentRoute;
@@ -135,7 +136,15 @@ async function handleMessage(message: GistMessage): Promise<boolean> {
   } else {
     let result: GistMessage | null = null;
     if (messageProperties.isEmbedded) {
-      result = embedMessage(message, messageProperties.elementId);
+      const isLivePreview = Gist.config.isPreviewSession && message.properties?.gist?.livePreview;
+      if (isLivePreview && !findElement(messageProperties.elementId)) {
+        log(
+          `Preview: element "${messageProperties.elementId}" not found, showing as overlay so placement can be changed`
+        );
+        result = await showMessage(message);
+      } else {
+        result = embedMessage(message, messageProperties.elementId);
+      }
     } else {
       result = await showMessage(message);
     }