From 5597084871796335cf2ce68a0f7c3ca57cd4096d Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Wed, 25 Feb 2026 23:53:46 +0100
Subject: [PATCH 01/20] feat: Add live updates context and section to HomePage

---
 implementations/web-react/src/App.tsx         |  34 +++--
 .../web-react/src/config/entries.ts           |   2 +
 .../optimization/hooks/usePersonalization.ts  |  18 ++-
 .../liveUpdates/LiveUpdatesContext.tsx        |  42 ++++++
 .../web-react/src/pages/HomePage.tsx          |  41 +++++-
 .../src/sections/LiveUpdatesSection.tsx       | 134 ++++++++++++++++++
 6 files changed, 255 insertions(+), 16 deletions(-)
 create mode 100644 implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
 create mode 100644 implementations/web-react/src/sections/LiveUpdatesSection.tsx

diff --git a/implementations/web-react/src/App.tsx b/implementations/web-react/src/App.tsx
index f25cabb2..885ed53d 100644
--- a/implementations/web-react/src/App.tsx
+++ b/implementations/web-react/src/App.tsx
@@ -1,10 +1,11 @@
 import { type JSX, useEffect, useMemo, useState } from 'react'
 import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { AnalyticsEventDisplay } from './components/AnalyticsEventDisplay'
-import { ENTRY_IDS } from './config/entries'
+import { ENTRY_IDS, LIVE_UPDATES_ENTRY_ID } from './config/entries'
 import { HOME_PATH, PAGE_TWO_PATH } from './config/routes'
 import { useOptimization } from './optimization/hooks/useOptimization'
 import { useOptimizationState } from './optimization/hooks/useOptimizationState'
+import { LiveUpdatesProvider } from './optimization/liveUpdates/LiveUpdatesContext'
 import { HomePage } from './pages/HomePage'
 import { PageTwoPage } from './pages/PageTwoPage'
 import { fetchEntries, getContentfulConfigError } from './services/contentfulClient'
@@ -39,6 +40,7 @@ export default function App(): JSX.Element {
 
   const [entries, setEntries] = useState<ContentfulEntry[]>([])
   const [entriesError, setEntriesError] = useState<string | null>(null)
+  const [globalLiveUpdates, setGlobalLiveUpdates] = useState(false)
 
   useEffect(() => {
     if (!isReady || sdk === undefined) {
@@ -81,6 +83,7 @@ export default function App(): JSX.Element {
     () => (Array.isArray(personalizations) ? personalizations.length : 0),
     [personalizations],
   )
+  const liveUpdatesBaselineEntry = entriesById.get(LIVE_UPDATES_ENTRY_ID)
 
   const handleIdentify = (): void => {
     if (!isReady || sdk === undefined) {
@@ -122,6 +125,10 @@ export default function App(): JSX.Element {
     return <p>Loading entries...</p>
   }
 
+  if (!liveUpdatesBaselineEntry) {
+    return <p>Live updates baseline entry is missing from fetched entries.</p>
+  }
+
   return (
     <main style={{ display: 'grid', gap: 24 }}>
       <nav style={{ display: 'flex', gap: 12 }}>
@@ -137,15 +144,22 @@ export default function App(): JSX.Element {
         <Route
           path={HOME_PATH}
           element={
-            <HomePage
-              consent={consent}
-              entriesById={entriesById}
-              isIdentified={isIdentified}
-              personalizationCount={personalizationCount}
-              onConsentChange={handleConsent}
-              onIdentify={handleIdentify}
-              onReset={handleReset}
-            />
+            <LiveUpdatesProvider globalLiveUpdates={globalLiveUpdates}>
+              <HomePage
+                consent={consent}
+                entriesById={entriesById}
+                globalLiveUpdates={globalLiveUpdates}
+                isIdentified={isIdentified}
+                liveUpdatesBaselineEntry={liveUpdatesBaselineEntry}
+                personalizationCount={personalizationCount}
+                onConsentChange={handleConsent}
+                onIdentify={handleIdentify}
+                onReset={handleReset}
+                onToggleGlobalLiveUpdates={() => {
+                  setGlobalLiveUpdates((previous) => !previous)
+                }}
+              />
+            </LiveUpdatesProvider>
           }
         />
         <Route path={PAGE_TWO_PATH} element={<PageTwoPage />} />
diff --git a/implementations/web-react/src/config/entries.ts b/implementations/web-react/src/config/entries.ts
index f65df260..72962fff 100644
--- a/implementations/web-react/src/config/entries.ts
+++ b/implementations/web-react/src/config/entries.ts
@@ -13,3 +13,5 @@ export const MANUALLY_OBSERVED_ENTRY_IDS = [
 ] as const
 
 export const ENTRY_IDS = [...AUTO_OBSERVED_ENTRY_IDS, ...MANUALLY_OBSERVED_ENTRY_IDS] as const
+
+export const LIVE_UPDATES_ENTRY_ID = '2Z2WLOx07InSewC3LUB3eX' as const
diff --git a/implementations/web-react/src/optimization/hooks/usePersonalization.ts b/implementations/web-react/src/optimization/hooks/usePersonalization.ts
index 77856344..a3dc64be 100644
--- a/implementations/web-react/src/optimization/hooks/usePersonalization.ts
+++ b/implementations/web-react/src/optimization/hooks/usePersonalization.ts
@@ -5,14 +5,21 @@ import { useOptimization } from './useOptimization'
 type PersonalizationApi = Optimization['personalization']
 type BaselineEntry = Parameters<PersonalizationApi['personalizeEntry']>[0]
 type PersonalizeResult = ReturnType<PersonalizationApi['personalizeEntry']>
+export type PersonalizationSelection = Parameters<PersonalizationApi['personalizeEntry']>[1]
 type MergeTagTarget = Parameters<PersonalizationApi['getMergeTagValue']>[0]
 
 export interface UsePersonalizationResult {
-  resolveEntry: (baselineEntry: BaselineEntry) => PersonalizeResult
+  resolveEntry: (
+    baselineEntry: BaselineEntry,
+    selectedPersonalizations?: PersonalizationSelection,
+  ) => PersonalizeResult
   getMergeTagValue: (mergeTagEntry: MergeTagTarget) => string
 }
 
-function fallbackResolveEntry(baselineEntry: BaselineEntry): PersonalizeResult {
+function fallbackResolveEntry(
+  baselineEntry: BaselineEntry,
+  _selectedPersonalizations?: PersonalizationSelection,
+): PersonalizeResult {
   return { entry: baselineEntry }
 }
 
@@ -48,8 +55,11 @@ export function usePersonalization(): UsePersonalizationResult {
     }
 
     return {
-      resolveEntry: (baselineEntry: BaselineEntry): PersonalizeResult =>
-        sdk.personalization.personalizeEntry(baselineEntry),
+      resolveEntry: (
+        baselineEntry: BaselineEntry,
+        selectedPersonalizations?: PersonalizationSelection,
+      ): PersonalizeResult =>
+        sdk.personalization.personalizeEntry(baselineEntry, selectedPersonalizations),
 
       getMergeTagValue: (mergeTagEntry: MergeTagTarget): string =>
         toStringValue(sdk.personalization.getMergeTagValue(mergeTagEntry)),
diff --git a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
new file mode 100644
index 00000000..5f81fe48
--- /dev/null
+++ b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
@@ -0,0 +1,42 @@
+import {
+  createContext,
+  type JSX,
+  type PropsWithChildren,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+
+interface LiveUpdatesContextValue {
+  globalLiveUpdates: boolean
+  previewPanelVisible: boolean
+  setPreviewPanelVisible: (visible: boolean) => void
+}
+
+const LiveUpdatesContext = createContext<LiveUpdatesContextValue | undefined>(undefined)
+
+interface LiveUpdatesProviderProps extends PropsWithChildren {
+  globalLiveUpdates?: boolean
+}
+
+export function LiveUpdatesProvider({
+  children,
+  globalLiveUpdates = false,
+}: LiveUpdatesProviderProps): JSX.Element {
+  const [previewPanelVisible, setPreviewPanelVisible] = useState(false)
+
+  const value = useMemo<LiveUpdatesContextValue>(
+    () => ({
+      globalLiveUpdates,
+      previewPanelVisible,
+      setPreviewPanelVisible,
+    }),
+    [globalLiveUpdates, previewPanelVisible],
+  )
+
+  return <LiveUpdatesContext.Provider value={value}>{children}</LiveUpdatesContext.Provider>
+}
+
+export function useLiveUpdates(): LiveUpdatesContextValue | undefined {
+  return useContext(LiveUpdatesContext)
+}
diff --git a/implementations/web-react/src/pages/HomePage.tsx b/implementations/web-react/src/pages/HomePage.tsx
index 72e3b995..355ba6a6 100644
--- a/implementations/web-react/src/pages/HomePage.tsx
+++ b/implementations/web-react/src/pages/HomePage.tsx
@@ -1,17 +1,22 @@
 import type { JSX } from 'react'
 import { AUTO_OBSERVED_ENTRY_IDS, MANUALLY_OBSERVED_ENTRY_IDS } from '../config/entries'
+import { useLiveUpdates } from '../optimization/liveUpdates/LiveUpdatesContext'
 import { ContentEntry } from '../sections/ContentEntry'
+import { LiveUpdatesSection } from '../sections/LiveUpdatesSection'
 import { NestedContentEntry } from '../sections/NestedContentEntry'
 import type { ContentfulEntry } from '../types/contentful'
 
 interface HomePageProps {
   consent: boolean | undefined
   entriesById: Map<string, ContentfulEntry>
+  globalLiveUpdates: boolean
   isIdentified: boolean
+  liveUpdatesBaselineEntry: ContentfulEntry
   personalizationCount: number
   onConsentChange: (accepted: boolean) => void
   onIdentify: () => void
   onReset: () => void
+  onToggleGlobalLiveUpdates: () => void
 }
 
 function isConsentAccepted(consent: boolean | undefined): boolean {
@@ -21,12 +26,18 @@ function isConsentAccepted(consent: boolean | undefined): boolean {
 export function HomePage({
   consent,
   entriesById,
+  globalLiveUpdates,
   isIdentified,
+  liveUpdatesBaselineEntry,
   personalizationCount,
   onConsentChange,
   onIdentify,
   onReset,
+  onToggleGlobalLiveUpdates,
 }: HomePageProps): JSX.Element {
+  const liveUpdatesContext = useLiveUpdates()
+  const isPreviewPanelOpen = liveUpdatesContext?.previewPanelVisible === true
+
   return (
     <>
       <section id="utility-panel">
@@ -56,18 +67,44 @@ export function HomePage({
           )}
 
           {!isIdentified ? (
-            <button data-testid="identify-button" onClick={onIdentify} type="button">
+            <button data-testid="live-updates-identify-button" onClick={onIdentify} type="button">
               Identify
             </button>
           ) : (
-            <button data-testid="reset-button" onClick={onReset} type="button">
+            <button data-testid="live-updates-reset-button" onClick={onReset} type="button">
               Reset Profile
             </button>
           )}
+
+          <button
+            data-testid="toggle-global-live-updates-button"
+            onClick={onToggleGlobalLiveUpdates}
+            type="button"
+          >
+            {`Global: ${globalLiveUpdates ? 'ON' : 'OFF'}`}
+          </button>
+
+          <button
+            data-testid="simulate-preview-panel-button"
+            onClick={() => {
+              liveUpdatesContext?.setPreviewPanelVisible(!isPreviewPanelOpen)
+            }}
+            type="button"
+          >
+            {isPreviewPanelOpen ? 'Close Preview Panel' : 'Simulate Preview Panel'}
+          </button>
         </div>
 
         <p data-testid="consent-status">Consent: {String(consent)}</p>
         <p data-testid="personalizations-count">Personalizations: {personalizationCount}</p>
+        <p data-testid="identified-status">{isIdentified ? 'Yes' : 'No'}</p>
+        <p data-testid="global-live-updates-status">{globalLiveUpdates ? 'ON' : 'OFF'}</p>
+        <p data-testid="preview-panel-status">{isPreviewPanelOpen ? 'Open' : 'Closed'}</p>
+      </section>
+
+      <section>
+        <h2>Live Updates</h2>
+        <LiveUpdatesSection baselineEntry={liveUpdatesBaselineEntry} />
       </section>
 
       <section>
diff --git a/implementations/web-react/src/sections/LiveUpdatesSection.tsx b/implementations/web-react/src/sections/LiveUpdatesSection.tsx
new file mode 100644
index 00000000..8dcc8f96
--- /dev/null
+++ b/implementations/web-react/src/sections/LiveUpdatesSection.tsx
@@ -0,0 +1,134 @@
+import { type JSX, useEffect, useMemo, useState } from 'react'
+import { useOptimization } from '../optimization/hooks/useOptimization'
+import {
+  type PersonalizationSelection,
+  usePersonalization,
+} from '../optimization/hooks/usePersonalization'
+import { useLiveUpdates } from '../optimization/liveUpdates/LiveUpdatesContext'
+import type { ContentfulEntry } from '../types/contentful'
+
+interface LiveUpdatesSectionProps {
+  baselineEntry: ContentfulEntry
+}
+
+interface LiveUpdatesEntryDisplayProps {
+  entry: ContentfulEntry
+  testIdPrefix: string
+}
+
+function LiveUpdatesEntryDisplay({
+  entry,
+  testIdPrefix,
+}: LiveUpdatesEntryDisplayProps): JSX.Element {
+  const text = typeof entry.fields.text === 'string' ? entry.fields.text : 'No content'
+  const fullLabel = `${text} [Entry: ${entry.sys.id}]`
+
+  return (
+    <div data-testid={`${testIdPrefix}-container`}>
+      <p data-testid={`${testIdPrefix}-text`} aria-label={fullLabel}>
+        {text}
+      </p>
+      <p data-testid={`${testIdPrefix}-entry-id`}>Entry: {entry.sys.id}</p>
+    </div>
+  )
+}
+
+interface LiveUpdatesPersonalizationProps {
+  baselineEntry: ContentfulEntry
+  sectionId: string
+  testIdPrefix: string
+  title: string
+  description: string
+  liveUpdates?: boolean
+}
+
+function LiveUpdatesPersonalization({
+  baselineEntry,
+  sectionId,
+  testIdPrefix,
+  title,
+  description,
+  liveUpdates,
+}: LiveUpdatesPersonalizationProps): JSX.Element {
+  const { sdk, isReady } = useOptimization()
+  const { resolveEntry } = usePersonalization()
+  const liveUpdatesContext = useLiveUpdates()
+
+  const shouldLiveUpdate =
+    liveUpdatesContext?.previewPanelVisible === true ||
+    (liveUpdates ?? liveUpdatesContext?.globalLiveUpdates ?? false)
+
+  const [lockedPersonalizations, setLockedPersonalizations] = useState<
+    PersonalizationSelection | undefined
+  >(undefined)
+
+  useEffect(() => {
+    if (!isReady || sdk === undefined) {
+      setLockedPersonalizations(undefined)
+      return
+    }
+
+    const subscription = sdk.states.personalizations.subscribe((nextPersonalizations) => {
+      if (shouldLiveUpdate) {
+        setLockedPersonalizations(nextPersonalizations)
+        return
+      }
+
+      if (lockedPersonalizations === undefined && nextPersonalizations !== undefined) {
+        setLockedPersonalizations(nextPersonalizations)
+      }
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [isReady, lockedPersonalizations, sdk, shouldLiveUpdate])
+
+  const { entry: resolvedEntry } = useMemo(
+    () => resolveEntry(baselineEntry, lockedPersonalizations),
+    [baselineEntry, lockedPersonalizations, resolveEntry],
+  )
+
+  return (
+    <section data-testid={sectionId}>
+      <h3>{title}</h3>
+      <p>{description}</p>
+      <LiveUpdatesEntryDisplay entry={resolvedEntry} testIdPrefix={testIdPrefix} />
+    </section>
+  )
+}
+
+export function LiveUpdatesSection({
+  baselineEntry,
+}: LiveUpdatesSectionProps): JSX.Element {
+  const liveUpdatesContext = useLiveUpdates()
+  const remountKey = `${liveUpdatesContext?.globalLiveUpdates ?? false}-${liveUpdatesContext?.previewPanelVisible ?? false}`
+
+  return (
+    <div key={remountKey} style={{ display: 'grid', gap: 16 }}>
+      <LiveUpdatesPersonalization
+        baselineEntry={baselineEntry}
+        sectionId="default-personalization"
+        testIdPrefix="default"
+        title="Default Behavior (inherits global setting)"
+        description="No liveUpdates prop - inherits from OptimizationRoot (false)."
+      />
+      <LiveUpdatesPersonalization
+        baselineEntry={baselineEntry}
+        sectionId="live-personalization"
+        testIdPrefix="live"
+        title="Live Updates Enabled (liveUpdates=true)"
+        description="Always updates when personalization state changes."
+        liveUpdates={true}
+      />
+      <LiveUpdatesPersonalization
+        baselineEntry={baselineEntry}
+        sectionId="locked-personalization"
+        testIdPrefix="locked"
+        title="Locked (liveUpdates=false)"
+        description="Never updates - locks to first variant received."
+        liveUpdates={false}
+      />
+    </div>
+  )
+}

From 12e6136fc8ad3b0bb4d747b4f41756f346b45c72 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Wed, 25 Feb 2026 23:54:04 +0100
Subject: [PATCH 02/20] feat: Add Playwright tests for live updates behavior

---
 .../web-react/e2e/live-updates.spec.ts        | 121 ++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 implementations/web-react/e2e/live-updates.spec.ts

diff --git a/implementations/web-react/e2e/live-updates.spec.ts b/implementations/web-react/e2e/live-updates.spec.ts
new file mode 100644
index 00000000..6e5520a1
--- /dev/null
+++ b/implementations/web-react/e2e/live-updates.spec.ts
@@ -0,0 +1,121 @@
+import { type Locator, type Page, expect, test } from '@playwright/test'
+
+async function getEntryId(locator: Locator): Promise<string> {
+  const text = await locator.innerText()
+  return text.replace('Entry: ', '').trim()
+}
+
+async function identify(page: Page): Promise<void> {
+  await page.getByTestId('live-updates-identify-button').click()
+  await expect(page.getByTestId('identified-status')).toHaveText('Yes')
+}
+
+test.describe('live updates behavior', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.context().clearCookies()
+    await page.goto('/')
+    await page.waitForLoadState('domcontentloaded')
+    await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('personalizations-count').innerText()
+        const value = Number.parseInt(text.replace('Personalizations: ', ''), 10)
+        return Number.isNaN(value) ? 0 : value
+      })
+      .toBeGreaterThan(0)
+  })
+
+  test('default behavior locks to first value when global live updates is OFF', async ({
+    page,
+  }) => {
+    const initialDefaultEntryId = await getEntryId(page.getByTestId('default-entry-id'))
+
+    await identify(page)
+
+    await expect(page.getByTestId('default-entry-id')).toHaveText(`Entry: ${initialDefaultEntryId}`)
+  })
+
+  test('global live updates ON updates default component while locked component stays fixed', async ({
+    page,
+  }) => {
+    await page.getByTestId('toggle-global-live-updates-button').click()
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('ON')
+
+    const initialDefaultEntryId = await getEntryId(page.getByTestId('default-entry-id'))
+    const initialLockedEntryId = await getEntryId(page.getByTestId('locked-entry-id'))
+
+    await identify(page)
+
+    await expect
+      .poll(async () => await getEntryId(page.getByTestId('default-entry-id')))
+      .not.toBe(initialDefaultEntryId)
+    await expect(page.getByTestId('locked-entry-id')).toHaveText(`Entry: ${initialLockedEntryId}`)
+  })
+
+  test('per-component liveUpdates=true updates even when global live updates is OFF', async ({
+    page,
+  }) => {
+    const initialLiveEntryId = await getEntryId(page.getByTestId('live-entry-id'))
+
+    await identify(page)
+
+    await expect
+      .poll(async () => await getEntryId(page.getByTestId('live-entry-id')))
+      .not.toBe(initialLiveEntryId)
+  })
+
+  test('preview-panel override enables updates for locked components', async ({ page }) => {
+    const initialLockedEntryId = await getEntryId(page.getByTestId('locked-entry-id'))
+
+    await page.getByTestId('simulate-preview-panel-button').click()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Open')
+
+    await identify(page)
+
+    await expect
+      .poll(async () => await getEntryId(page.getByTestId('locked-entry-id')))
+      .not.toBe(initialLockedEntryId)
+  })
+
+  test('screen controls toggle global live updates and preview panel', async ({ page }) => {
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
+    await page.getByTestId('toggle-global-live-updates-button').click()
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('ON')
+    await page.getByTestId('toggle-global-live-updates-button').click()
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
+
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
+    await page.getByTestId('simulate-preview-panel-button').click()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Open')
+    await page.getByTestId('simulate-preview-panel-button').click()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
+  })
+
+  test('screen controls identify and reset user', async ({ page }) => {
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+    await page.getByTestId('live-updates-identify-button').click()
+    await expect(page.getByTestId('identified-status')).toHaveText('Yes')
+    await page.getByTestId('live-updates-reset-button').click()
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+  })
+
+  test('renders all three personalization sections and entry content', async ({ page }) => {
+    await expect(page.getByTestId('default-personalization')).toBeVisible()
+    await expect(page.getByTestId('live-personalization')).toBeVisible()
+    await expect(page.getByTestId('locked-personalization')).toBeVisible()
+
+    await expect(page.getByTestId('default-container')).toBeVisible()
+    await expect(page.getByTestId('live-container')).toBeVisible()
+    await expect(page.getByTestId('locked-container')).toBeVisible()
+
+    await expect(page.getByTestId('default-text')).toBeVisible()
+    await expect(page.getByTestId('live-text')).toBeVisible()
+    await expect(page.getByTestId('locked-text')).toBeVisible()
+    await expect(page.getByTestId('default-entry-id')).toBeVisible()
+    await expect(page.getByTestId('live-entry-id')).toBeVisible()
+    await expect(page.getByTestId('locked-entry-id')).toBeVisible()
+  })
+})

From d6c3136955d8ccbbc53d066048f2bd5b4a6ad000 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Wed, 25 Feb 2026 23:54:22 +0100
Subject: [PATCH 03/20] feat: Add e2e tests for common and user-specific
 variants

- Expand coverage for identified and unidentified users, and add browser
  testing on Firefox and Safari.
---
 .../displays-identified-user-variants.spec.ts | 30 ++++++++++++++-
 ...isplays-unidentified-user-variants.spec.ts | 38 ++++++++++++++++---
 .../web-react/playwright.config.mjs           |  8 ++++
 3 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
index 70c264d1..4ae5ad2a 100644
--- a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
@@ -15,11 +15,39 @@ test.describe('identified user', () => {
     await expect(page.getByRole('button', { name: 'Reset Profile' })).toBeVisible()
   })
 
+  test('displays common variants', async ({ page }) => {
+    await expect(
+      page.getByText(
+        'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
+      ),
+    ).toBeVisible()
+    await expect(
+      page.getByText('This is a variant content entry for visitors from Europe.'),
+    ).toBeVisible()
+    await expect(
+      page.getByText('This is a variant content entry for visitors using a desktop browser.'),
+    ).toBeVisible()
+  })
+
   test('renders identified variants', async ({ page }) => {
+    await expect(page.getByText('This is a level 0 nested variant entry.')).toBeVisible()
+    await expect(page.getByText('This is a level 1 nested variant entry.')).toBeVisible()
+    await expect(page.getByText('This is a level 2 nested variant entry.')).toBeVisible()
+
+    await expect(
+      page
+        .getByTestId('entry-text-2Z2WLOx07InSewC3LUB3eX')
+        .getByText('This is a variant content entry for return visitors.'),
+    ).toBeVisible()
+    await expect(
+      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
+    ).toBeVisible()
+    await expect(
+      page.getByText('This is a variant content entry for visitors with a custom event.'),
+    ).toBeVisible()
     await expect(
       page.getByText('This is a variant content entry for identified users.'),
     ).toBeVisible()
-    await expect(page.getByText('This is a level 0 nested variant entry.')).toBeVisible()
   })
 
   test('reset persists unidentified state across reload', async ({ page }) => {
diff --git a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
index 463a964b..86c78656 100644
--- a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
@@ -7,18 +7,46 @@ test.describe('unidentified user', () => {
     await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
   })
 
-  test('renders utility panel and entries', async ({ page }) => {
+  test('displays common variants', async ({ page }) => {
+    await expect(
+      page.getByText(
+        'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
+      ),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for visitors from Europe.'),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for visitors using a desktop browser.'),
+    ).toBeVisible()
+  })
+
+  test('displays unidentified user variants', async ({ page }) => {
     await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Auto Observed Entries' })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Manually Observed Entries' })).toBeVisible()
 
+    await expect(page.getByText('This is a level 0 nested baseline entry.')).toBeVisible()
+    await expect(page.getByText('This is a level 1 nested baseline entry.')).toBeVisible()
+    await expect(page.getByText('This is a level 2 nested baseline entry.')).toBeVisible()
+
+    await expect(
+      page
+        .getByTestId('entry-text-2Z2WLOx07InSewC3LUB3eX')
+        .getByText('This is a variant content entry for new visitors.'),
+    ).toBeVisible()
+    await expect(
+      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
+    ).toBeVisible()
     await expect(
       page.getByText(
-        'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
+        'This is a baseline content entry for all visitors with or without a custom event.',
       ),
     ).toBeVisible()
-
-    await expect(page.getByText('This is a level 0 nested baseline entry.')).toBeVisible()
-    await expect(page.getByText('This is a variant content entry for new visitors.')).toBeVisible()
+    await expect(
+      page.getByText('This is a baseline content entry for all identified or unidentified users.'),
+    ).toBeVisible()
   })
 })
diff --git a/implementations/web-react/playwright.config.mjs b/implementations/web-react/playwright.config.mjs
index 93f2153a..2e785bbf 100644
--- a/implementations/web-react/playwright.config.mjs
+++ b/implementations/web-react/playwright.config.mjs
@@ -25,5 +25,13 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
   ],
 })

From 327702607a39876f61867e1416ddfa0cb03f494f Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Thu, 26 Feb 2026 10:42:48 +0100
Subject: [PATCH 04/20] refactor: inline LiveUpdatesSection props for
 readability

---
 implementations/web-react/src/sections/LiveUpdatesSection.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/implementations/web-react/src/sections/LiveUpdatesSection.tsx b/implementations/web-react/src/sections/LiveUpdatesSection.tsx
index 8dcc8f96..5753a12e 100644
--- a/implementations/web-react/src/sections/LiveUpdatesSection.tsx
+++ b/implementations/web-react/src/sections/LiveUpdatesSection.tsx
@@ -98,9 +98,7 @@ function LiveUpdatesPersonalization({
   )
 }
 
-export function LiveUpdatesSection({
-  baselineEntry,
-}: LiveUpdatesSectionProps): JSX.Element {
+export function LiveUpdatesSection({ baselineEntry }: LiveUpdatesSectionProps): JSX.Element {
   const liveUpdatesContext = useLiveUpdates()
   const remountKey = `${liveUpdatesContext?.globalLiveUpdates ?? false}-${liveUpdatesContext?.previewPanelVisible ?? false}`
 

From 66fa63e99dd7083e4a74fd8a68477c5b6985420f Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Thu, 26 Feb 2026 14:36:32 +0100
Subject: [PATCH 05/20] feat: Add optimization-web-preview-panel package and
 export getter for client

---
 implementations/web-react/package.json                     | 4 +++-
 implementations/web-react/src/services/contentfulClient.ts | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/implementations/web-react/package.json b/implementations/web-react/package.json
index d49b0951..071dcdbf 100644
--- a/implementations/web-react/package.json
+++ b/implementations/web-react/package.json
@@ -27,6 +27,7 @@
     "@contentful/rich-text-react-renderer": "^16.1.6",
     "@contentful/rich-text-types": "^17.2.5",
     "@contentful/optimization-web": "0.0.0",
+    "@contentful/optimization-web-preview-panel": "0.0.0",
     "contentful": "^11.10.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -49,7 +50,8 @@
       "@contentful/optimization-api-client": "file:../../pkgs/contentful-optimization-api-client-0.0.0.tgz",
       "@contentful/optimization-api-schemas": "file:../../pkgs/contentful-optimization-api-schemas-0.0.0.tgz",
       "@contentful/optimization-core": "file:../../pkgs/contentful-optimization-core-0.0.0.tgz",
-      "@contentful/optimization-web": "file:../../pkgs/contentful-optimization-web-0.0.0.tgz"
+      "@contentful/optimization-web": "file:../../pkgs/contentful-optimization-web-0.0.0.tgz",
+      "@contentful/optimization-web-preview-panel": "file:../../pkgs/contentful-optimization-web-preview-panel-0.0.0.tgz"
     }
   }
 }
diff --git a/implementations/web-react/src/services/contentfulClient.ts b/implementations/web-react/src/services/contentfulClient.ts
index e25fb483..c086c3b2 100644
--- a/implementations/web-react/src/services/contentfulClient.ts
+++ b/implementations/web-react/src/services/contentfulClient.ts
@@ -30,6 +30,10 @@ function createContentfulClient(): ReturnType<typeof createClient> {
 
 const contentfulClient = createContentfulClient()
 
+export function getContentfulClient(): ReturnType<typeof createClient> {
+  return contentfulClient
+}
+
 export function getContentfulConfigError(): string | null {
   if (MISSING_ENV_ERROR.length === 0) {
     return null

From 3b3ffc545c6542abd7b5129a3fb66b47b7a0fc6c Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Thu, 26 Feb 2026 14:36:49 +0100
Subject: [PATCH 06/20] feat: Add preview panel integration and toggle
 functionality

---
 .../web-react/e2e/live-updates.spec.ts        |   1 +
 implementations/web-react/src/App.tsx         |  11 +-
 .../liveUpdates/LiveUpdatesContext.tsx        | 127 +++++++++++++++++-
 .../web-react/src/pages/HomePage.tsx          |   4 +-
 4 files changed, 136 insertions(+), 7 deletions(-)

diff --git a/implementations/web-react/e2e/live-updates.spec.ts b/implementations/web-react/e2e/live-updates.spec.ts
index 6e5520a1..31f02415 100644
--- a/implementations/web-react/e2e/live-updates.spec.ts
+++ b/implementations/web-react/e2e/live-updates.spec.ts
@@ -19,6 +19,7 @@ test.describe('live updates behavior', () => {
     await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
     await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
     await expect(page.getByTestId('identified-status')).toHaveText('No')
+    await expect(page.locator('ctfl-opt-preview-panel')).toHaveCount(1)
     await expect
       .poll(async () => {
         const text = await page.getByTestId('personalizations-count').innerText()
diff --git a/implementations/web-react/src/App.tsx b/implementations/web-react/src/App.tsx
index 885ed53d..28a0a9a2 100644
--- a/implementations/web-react/src/App.tsx
+++ b/implementations/web-react/src/App.tsx
@@ -8,7 +8,11 @@ import { useOptimizationState } from './optimization/hooks/useOptimizationState'
 import { LiveUpdatesProvider } from './optimization/liveUpdates/LiveUpdatesContext'
 import { HomePage } from './pages/HomePage'
 import { PageTwoPage } from './pages/PageTwoPage'
-import { fetchEntries, getContentfulConfigError } from './services/contentfulClient'
+import {
+  fetchEntries,
+  getContentfulClient,
+  getContentfulConfigError,
+} from './services/contentfulClient'
 import type { ContentfulEntry } from './types/contentful'
 
 function isIdentifiedProfile(profile: unknown): boolean {
@@ -144,7 +148,10 @@ export default function App(): JSX.Element {
         <Route
           path={HOME_PATH}
           element={
-            <LiveUpdatesProvider globalLiveUpdates={globalLiveUpdates}>
+            <LiveUpdatesProvider
+              globalLiveUpdates={globalLiveUpdates}
+              previewPanel={{ contentful: getContentfulClient(), optimization: sdk }}
+            >
               <HomePage
                 consent={consent}
                 entriesById={entriesById}
diff --git a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
index 5f81fe48..2111e606 100644
--- a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
+++ b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
@@ -1,37 +1,158 @@
+import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'
+import type { ContentfulClientApi } from 'contentful'
 import {
   createContext,
   type JSX,
   type PropsWithChildren,
+  useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react'
+import type { OptimizationInstance } from '../createOptimization'
 
 interface LiveUpdatesContextValue {
   globalLiveUpdates: boolean
   previewPanelVisible: boolean
   setPreviewPanelVisible: (visible: boolean) => void
+  togglePreviewPanel: () => void
 }
 
 const LiveUpdatesContext = createContext<LiveUpdatesContextValue | undefined>(undefined)
+type PreviewPanelContentful = Parameters<typeof attachOptimizationPreviewPanel>[0]['contentful']
+
+interface PreviewPanelConfig {
+  contentful: ContentfulClientApi<undefined>
+  optimization: OptimizationInstance
+}
 
 interface LiveUpdatesProviderProps extends PropsWithChildren {
-  globalLiveUpdates?: boolean
+  globalLiveUpdates: boolean
+  previewPanel: PreviewPanelConfig
+}
+
+const PREVIEW_PANEL_TAG = 'ctfl-opt-preview-panel'
+const PREVIEW_PANEL_TOGGLE_SELECTOR = 'button.toggle-drawer'
+
+const previewPanelAttachments = new WeakMap<OptimizationInstance, Promise<void>>()
+
+function getPreviewPanelToggleButton(): HTMLButtonElement | null {
+  const panelElement = document.querySelector(PREVIEW_PANEL_TAG)
+  if (!(panelElement instanceof HTMLElement)) {
+    return null
+  }
+
+  const toggleButton = panelElement.shadowRoot?.querySelector(PREVIEW_PANEL_TOGGLE_SELECTOR)
+  return toggleButton instanceof HTMLButtonElement ? toggleButton : null
+}
+
+function isPreviewPanelOpen(toggleButton: HTMLButtonElement): boolean {
+  return toggleButton.classList.contains('opened')
+}
+
+function toPreviewPanelContentful(client: ContentfulClientApi<undefined>): PreviewPanelContentful {
+  return client.withAllLocales.withoutLinkResolution.withoutUnresolvableLinks
+}
+
+async function attachPreviewPanel(previewPanel: PreviewPanelConfig): Promise<void> {
+  const existing = previewPanelAttachments.get(previewPanel.optimization)
+  if (existing) {
+    await existing
+    return
+  }
+
+  const attachment = attachOptimizationPreviewPanel({
+    contentful: toPreviewPanelContentful(previewPanel.contentful),
+    optimization: previewPanel.optimization,
+    nonce: undefined,
+  }).catch((error: unknown) => {
+    const message = error instanceof Error ? error.message : String(error)
+    if (message.includes('already been attached')) {
+      return
+    }
+
+    throw error
+  })
+
+  previewPanelAttachments.set(previewPanel.optimization, attachment)
+  await attachment
 }
 
 export function LiveUpdatesProvider({
   children,
-  globalLiveUpdates = false,
+  globalLiveUpdates,
+  previewPanel,
 }: LiveUpdatesProviderProps): JSX.Element {
   const [previewPanelVisible, setPreviewPanelVisible] = useState(false)
 
+  const togglePreviewPanel = useCallback((): void => {
+    const toggleButton = getPreviewPanelToggleButton()
+    if (toggleButton) {
+      toggleButton.click()
+      setPreviewPanelVisible(isPreviewPanelOpen(toggleButton))
+      return
+    }
+
+    setPreviewPanelVisible((previous) => !previous)
+  }, [])
+
+  useEffect(() => {
+    const observerRef: { current: MutationObserver | null } = { current: null }
+    const retryTimerRef: { current: ReturnType<typeof setInterval> | null } = { current: null }
+    const stoppedRef: { current: boolean } = { current: false }
+
+    const connect = (): void => {
+      const toggleButton = getPreviewPanelToggleButton()
+      if (!toggleButton) {
+        return
+      }
+
+      setPreviewPanelVisible(isPreviewPanelOpen(toggleButton))
+      observerRef.current = new MutationObserver(() => {
+        setPreviewPanelVisible(isPreviewPanelOpen(toggleButton))
+      })
+      observerRef.current.observe(toggleButton, { attributes: true, attributeFilter: ['class'] })
+    }
+
+    void attachPreviewPanel(previewPanel)
+      .then(() => {
+        if (stoppedRef.current) {
+          return
+        }
+
+        connect()
+        if (observerRef.current === null) {
+          retryTimerRef.current = setInterval(() => {
+            if (observerRef.current !== null || stoppedRef.current) {
+              return
+            }
+
+            connect()
+          }, 100)
+        }
+      })
+      .catch(() => {
+        setPreviewPanelVisible(false)
+      })
+
+    return () => {
+      stoppedRef.current = true
+      observerRef.current?.disconnect()
+      if (retryTimerRef.current !== null) {
+        clearInterval(retryTimerRef.current)
+      }
+    }
+  }, [previewPanel])
+
   const value = useMemo<LiveUpdatesContextValue>(
     () => ({
       globalLiveUpdates,
       previewPanelVisible,
       setPreviewPanelVisible,
+      togglePreviewPanel,
     }),
-    [globalLiveUpdates, previewPanelVisible],
+    [globalLiveUpdates, previewPanelVisible, togglePreviewPanel],
   )
 
   return <LiveUpdatesContext.Provider value={value}>{children}</LiveUpdatesContext.Provider>
diff --git a/implementations/web-react/src/pages/HomePage.tsx b/implementations/web-react/src/pages/HomePage.tsx
index 355ba6a6..1b5ab9f5 100644
--- a/implementations/web-react/src/pages/HomePage.tsx
+++ b/implementations/web-react/src/pages/HomePage.tsx
@@ -87,11 +87,11 @@ export function HomePage({
           <button
             data-testid="simulate-preview-panel-button"
             onClick={() => {
-              liveUpdatesContext?.setPreviewPanelVisible(!isPreviewPanelOpen)
+              liveUpdatesContext?.togglePreviewPanel()
             }}
             type="button"
           >
-            {isPreviewPanelOpen ? 'Close Preview Panel' : 'Simulate Preview Panel'}
+            {isPreviewPanelOpen ? 'Close Preview Panel' : 'Open Preview Panel'}
           </button>
         </div>
 

From 77b7be0aa67bddef2ec716b256a811137af42c34 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Thu, 26 Feb 2026 14:37:01 +0100
Subject: [PATCH 07/20] feat: update tests to use data-testid for
 identify/reset buttons

---
 .../e2e/displays-identified-user-variants.spec.ts    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
index 4ae5ad2a..a2ce029b 100644
--- a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
@@ -6,13 +6,13 @@ test.describe('identified user', () => {
     await page.waitForLoadState('domcontentloaded')
     await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
 
-    await page.getByRole('button', { name: 'Identify' }).click()
-    await expect(page.getByRole('button', { name: 'Reset Profile' })).toBeVisible()
+    await page.getByTestId('live-updates-identify-button').click()
+    await expect(page.getByTestId('live-updates-reset-button')).toBeVisible()
 
     await page.reload()
     await page.waitForLoadState('domcontentloaded')
     await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
-    await expect(page.getByRole('button', { name: 'Reset Profile' })).toBeVisible()
+    await expect(page.getByTestId('live-updates-reset-button')).toBeVisible()
   })
 
   test('displays common variants', async ({ page }) => {
@@ -51,14 +51,14 @@ test.describe('identified user', () => {
   })
 
   test('reset persists unidentified state across reload', async ({ page }) => {
-    await page.getByRole('button', { name: 'Reset Profile' }).click()
-    await expect(page.getByRole('button', { name: 'Identify' })).toBeVisible()
+    await page.getByTestId('live-updates-reset-button').click()
+    await expect(page.getByTestId('live-updates-identify-button')).toBeVisible()
 
     await page.reload()
     await page.waitForLoadState('domcontentloaded')
     await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
 
-    await expect(page.getByRole('button', { name: 'Identify' })).toBeVisible()
+    await expect(page.getByTestId('live-updates-identify-button')).toBeVisible()
     await expect(
       page.getByText('This is a baseline content entry for all identified or unidentified users.'),
     ).toBeVisible()

From 81425f901a851a143afc80bdd2406e1b80bf3f63 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Thu, 26 Feb 2026 14:47:13 +0100
Subject: [PATCH 08/20] refactor: personalizeEntry call to use updated SDK
 method

---
 .../web-react/src/optimization/hooks/usePersonalization.ts     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/implementations/web-react/src/optimization/hooks/usePersonalization.ts b/implementations/web-react/src/optimization/hooks/usePersonalization.ts
index a3dc64be..0698c29d 100644
--- a/implementations/web-react/src/optimization/hooks/usePersonalization.ts
+++ b/implementations/web-react/src/optimization/hooks/usePersonalization.ts
@@ -58,8 +58,7 @@ export function usePersonalization(): UsePersonalizationResult {
       resolveEntry: (
         baselineEntry: BaselineEntry,
         selectedPersonalizations?: PersonalizationSelection,
-      ): PersonalizeResult =>
-        sdk.personalization.personalizeEntry(baselineEntry, selectedPersonalizations),
+      ): PersonalizeResult => sdk.personalizeEntry(baselineEntry, selectedPersonalizations),
 
       getMergeTagValue: (mergeTagEntry: MergeTagTarget): string =>
         toStringValue(sdk.personalization.getMergeTagValue(mergeTagEntry)),

From 02eb68bf3f289de0170be4bf08cfbe8c7ac1a97d Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Thu, 26 Feb 2026 16:42:00 +0100
Subject: [PATCH 09/20] feat: Add LiveUpdatesExampleEntry component for live
 update demo

---
 .../src/sections/LiveUpdatesExampleEntry.tsx  | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 implementations/web-react/src/sections/LiveUpdatesExampleEntry.tsx

diff --git a/implementations/web-react/src/sections/LiveUpdatesExampleEntry.tsx b/implementations/web-react/src/sections/LiveUpdatesExampleEntry.tsx
new file mode 100644
index 00000000..9cd6208a
--- /dev/null
+++ b/implementations/web-react/src/sections/LiveUpdatesExampleEntry.tsx
@@ -0,0 +1,75 @@
+import { type JSX, useEffect, useMemo, useState } from 'react'
+import { useOptimization } from '../optimization/hooks/useOptimization'
+import {
+  type PersonalizationSelection,
+  usePersonalization,
+} from '../optimization/hooks/usePersonalization'
+import { useLiveUpdates } from '../optimization/liveUpdates/LiveUpdatesContext'
+import type { ContentfulEntry } from '../types/contentful'
+
+interface LiveUpdatesExampleEntryProps {
+  baselineEntry: ContentfulEntry
+  liveUpdates?: boolean
+  testIdPrefix: string
+}
+
+export function LiveUpdatesExampleEntry({
+  baselineEntry,
+  liveUpdates,
+  testIdPrefix,
+}: LiveUpdatesExampleEntryProps): JSX.Element {
+  const { sdk, isReady } = useOptimization()
+  const { resolveEntry } = usePersonalization()
+  const liveUpdatesContext = useLiveUpdates()
+  const [lockedPersonalizations, setLockedPersonalizations] = useState<
+    PersonalizationSelection | undefined
+  >(undefined)
+
+  const shouldLiveUpdate =
+    liveUpdatesContext?.previewPanelVisible === true ||
+    (liveUpdates ?? liveUpdatesContext?.globalLiveUpdates ?? false)
+
+  useEffect(() => {
+    if (!isReady || sdk === undefined) {
+      setLockedPersonalizations(undefined)
+      return
+    }
+
+    const subscription = sdk.states.personalizations.subscribe((nextPersonalizations) => {
+      if (shouldLiveUpdate) {
+        setLockedPersonalizations(nextPersonalizations)
+        return
+      }
+
+      setLockedPersonalizations((currentPersonalizations) => {
+        if (currentPersonalizations === undefined && nextPersonalizations !== undefined) {
+          return nextPersonalizations
+        }
+
+        return currentPersonalizations
+      })
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [isReady, sdk, shouldLiveUpdate])
+
+  const { entry: resolvedEntry } = useMemo(
+    () => resolveEntry(baselineEntry, lockedPersonalizations),
+    [baselineEntry, lockedPersonalizations, resolveEntry],
+  )
+
+  const text =
+    typeof resolvedEntry.fields.text === 'string' ? resolvedEntry.fields.text : 'No content'
+  const fullLabel = `${text} [Entry: ${resolvedEntry.sys.id}]`
+
+  return (
+    <div data-testid={`content-${testIdPrefix}`}>
+      <p data-testid={`entry-text-${testIdPrefix}`} aria-label={fullLabel}>
+        {text}
+      </p>
+      <p data-testid={`entry-id-${testIdPrefix}`}>Entry: {resolvedEntry.sys.id}</p>
+    </div>
+  )
+}

From 02a0cac9ecbcae7a57f17c2ea684a8ea232951a6 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Thu, 26 Feb 2026 16:42:38 +0100
Subject: [PATCH 10/20] refactor: live updates section to use
 LiveUpdatesExampleEntry

- Update tests and README to match new live updates examples structure
---
 implementations/web-react/README.md           |   3 +
 .../web-react/e2e/live-updates.spec.ts        |  55 ++++----
 .../web-react/src/pages/HomePage.tsx          |  34 ++++-
 .../src/sections/LiveUpdatesSection.tsx       | 132 ------------------
 4 files changed, 65 insertions(+), 159 deletions(-)
 delete mode 100644 implementations/web-react/src/sections/LiveUpdatesSection.tsx

diff --git a/implementations/web-react/README.md b/implementations/web-react/README.md
index 2b6a5557..7b5b2ee6 100644
--- a/implementations/web-react/README.md
+++ b/implementations/web-react/README.md
@@ -22,6 +22,9 @@ demonstrating:
 - SPA navigation tracking with React Router v7
 - Offline queue/recovery handling
 
+The live updates section demonstrates the same parity scenarios directly in-page (default, forced
+on, and locked), while keeping the main entry rendering flow customer-oriented.
+
 ## Prerequisites
 
 - Node.js >= 16.20.0
diff --git a/implementations/web-react/e2e/live-updates.spec.ts b/implementations/web-react/e2e/live-updates.spec.ts
index 31f02415..c5da98be 100644
--- a/implementations/web-react/e2e/live-updates.spec.ts
+++ b/implementations/web-react/e2e/live-updates.spec.ts
@@ -20,6 +20,7 @@ test.describe('live updates behavior', () => {
     await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
     await expect(page.getByTestId('identified-status')).toHaveText('No')
     await expect(page.locator('ctfl-opt-preview-panel')).toHaveCount(1)
+    await expect(page.getByTestId('live-updates-examples')).toBeVisible()
     await expect
       .poll(async () => {
         const text = await page.getByTestId('personalizations-count').innerText()
@@ -32,11 +33,13 @@ test.describe('live updates behavior', () => {
   test('default behavior locks to first value when global live updates is OFF', async ({
     page,
   }) => {
-    const initialDefaultEntryId = await getEntryId(page.getByTestId('default-entry-id'))
+    const initialDefaultEntryId = await getEntryId(page.getByTestId('entry-id-live-default'))
 
     await identify(page)
 
-    await expect(page.getByTestId('default-entry-id')).toHaveText(`Entry: ${initialDefaultEntryId}`)
+    await expect(page.getByTestId('entry-id-live-default')).toHaveText(
+      `Entry: ${initialDefaultEntryId}`,
+    )
   })
 
   test('global live updates ON updates default component while locked component stays fixed', async ({
@@ -45,31 +48,33 @@ test.describe('live updates behavior', () => {
     await page.getByTestId('toggle-global-live-updates-button').click()
     await expect(page.getByTestId('global-live-updates-status')).toHaveText('ON')
 
-    const initialDefaultEntryId = await getEntryId(page.getByTestId('default-entry-id'))
-    const initialLockedEntryId = await getEntryId(page.getByTestId('locked-entry-id'))
+    const initialDefaultEntryId = await getEntryId(page.getByTestId('entry-id-live-default'))
+    const initialLockedEntryId = await getEntryId(page.getByTestId('entry-id-live-locked'))
 
     await identify(page)
 
     await expect
-      .poll(async () => await getEntryId(page.getByTestId('default-entry-id')))
+      .poll(async () => await getEntryId(page.getByTestId('entry-id-live-default')))
       .not.toBe(initialDefaultEntryId)
-    await expect(page.getByTestId('locked-entry-id')).toHaveText(`Entry: ${initialLockedEntryId}`)
+    await expect(page.getByTestId('entry-id-live-locked')).toHaveText(
+      `Entry: ${initialLockedEntryId}`,
+    )
   })
 
   test('per-component liveUpdates=true updates even when global live updates is OFF', async ({
     page,
   }) => {
-    const initialLiveEntryId = await getEntryId(page.getByTestId('live-entry-id'))
+    const initialLiveEntryId = await getEntryId(page.getByTestId('entry-id-live-enabled'))
 
     await identify(page)
 
     await expect
-      .poll(async () => await getEntryId(page.getByTestId('live-entry-id')))
+      .poll(async () => await getEntryId(page.getByTestId('entry-id-live-enabled')))
       .not.toBe(initialLiveEntryId)
   })
 
   test('preview-panel override enables updates for locked components', async ({ page }) => {
-    const initialLockedEntryId = await getEntryId(page.getByTestId('locked-entry-id'))
+    const initialLockedEntryId = await getEntryId(page.getByTestId('entry-id-live-locked'))
 
     await page.getByTestId('simulate-preview-panel-button').click()
     await expect(page.getByTestId('preview-panel-status')).toHaveText('Open')
@@ -77,7 +82,7 @@ test.describe('live updates behavior', () => {
     await identify(page)
 
     await expect
-      .poll(async () => await getEntryId(page.getByTestId('locked-entry-id')))
+      .poll(async () => await getEntryId(page.getByTestId('entry-id-live-locked')))
       .not.toBe(initialLockedEntryId)
   })
 
@@ -103,20 +108,20 @@ test.describe('live updates behavior', () => {
     await expect(page.getByTestId('identified-status')).toHaveText('No')
   })
 
-  test('renders all three personalization sections and entry content', async ({ page }) => {
-    await expect(page.getByTestId('default-personalization')).toBeVisible()
-    await expect(page.getByTestId('live-personalization')).toBeVisible()
-    await expect(page.getByTestId('locked-personalization')).toBeVisible()
-
-    await expect(page.getByTestId('default-container')).toBeVisible()
-    await expect(page.getByTestId('live-container')).toBeVisible()
-    await expect(page.getByTestId('locked-container')).toBeVisible()
-
-    await expect(page.getByTestId('default-text')).toBeVisible()
-    await expect(page.getByTestId('live-text')).toBeVisible()
-    await expect(page.getByTestId('locked-text')).toBeVisible()
-    await expect(page.getByTestId('default-entry-id')).toBeVisible()
-    await expect(page.getByTestId('live-entry-id')).toBeVisible()
-    await expect(page.getByTestId('locked-entry-id')).toBeVisible()
+  test('renders default, enabled, and locked examples', async ({ page }) => {
+    await expect(page.getByTestId('live-updates-default')).toBeVisible()
+    await expect(page.getByTestId('live-updates-enabled')).toBeVisible()
+    await expect(page.getByTestId('live-updates-locked')).toBeVisible()
+
+    await expect(page.getByTestId('content-live-default')).toBeVisible()
+    await expect(page.getByTestId('content-live-enabled')).toBeVisible()
+    await expect(page.getByTestId('content-live-locked')).toBeVisible()
+
+    await expect(page.getByTestId('entry-text-live-default')).toBeVisible()
+    await expect(page.getByTestId('entry-text-live-enabled')).toBeVisible()
+    await expect(page.getByTestId('entry-text-live-locked')).toBeVisible()
+    await expect(page.getByTestId('entry-id-live-default')).toBeVisible()
+    await expect(page.getByTestId('entry-id-live-enabled')).toBeVisible()
+    await expect(page.getByTestId('entry-id-live-locked')).toBeVisible()
   })
 })
diff --git a/implementations/web-react/src/pages/HomePage.tsx b/implementations/web-react/src/pages/HomePage.tsx
index 1b5ab9f5..cde39171 100644
--- a/implementations/web-react/src/pages/HomePage.tsx
+++ b/implementations/web-react/src/pages/HomePage.tsx
@@ -2,7 +2,7 @@ import type { JSX } from 'react'
 import { AUTO_OBSERVED_ENTRY_IDS, MANUALLY_OBSERVED_ENTRY_IDS } from '../config/entries'
 import { useLiveUpdates } from '../optimization/liveUpdates/LiveUpdatesContext'
 import { ContentEntry } from '../sections/ContentEntry'
-import { LiveUpdatesSection } from '../sections/LiveUpdatesSection'
+import { LiveUpdatesExampleEntry } from '../sections/LiveUpdatesExampleEntry'
 import { NestedContentEntry } from '../sections/NestedContentEntry'
 import type { ContentfulEntry } from '../types/contentful'
 
@@ -104,7 +104,37 @@ export function HomePage({
 
       <section>
         <h2>Live Updates</h2>
-        <LiveUpdatesSection baselineEntry={liveUpdatesBaselineEntry} />
+        <p>
+          Toggle global live updates and identify the user to verify how entries update. Optional
+          per-component control is available through the <code>liveUpdates</code> prop.
+        </p>
+        <div data-testid="live-updates-examples" style={{ display: 'grid', gap: 16 }}>
+          <section data-testid="live-updates-default">
+            <h3>Default (inherits global setting)</h3>
+            <LiveUpdatesExampleEntry
+              baselineEntry={liveUpdatesBaselineEntry}
+              testIdPrefix="live-default"
+            />
+          </section>
+
+          <section data-testid="live-updates-enabled">
+            <h3>Always On (liveUpdates=true)</h3>
+            <LiveUpdatesExampleEntry
+              baselineEntry={liveUpdatesBaselineEntry}
+              liveUpdates={true}
+              testIdPrefix="live-enabled"
+            />
+          </section>
+
+          <section data-testid="live-updates-locked">
+            <h3>Locked (liveUpdates=false)</h3>
+            <LiveUpdatesExampleEntry
+              baselineEntry={liveUpdatesBaselineEntry}
+              liveUpdates={false}
+              testIdPrefix="live-locked"
+            />
+          </section>
+        </div>
       </section>
 
       <section>
diff --git a/implementations/web-react/src/sections/LiveUpdatesSection.tsx b/implementations/web-react/src/sections/LiveUpdatesSection.tsx
deleted file mode 100644
index 5753a12e..00000000
--- a/implementations/web-react/src/sections/LiveUpdatesSection.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { type JSX, useEffect, useMemo, useState } from 'react'
-import { useOptimization } from '../optimization/hooks/useOptimization'
-import {
-  type PersonalizationSelection,
-  usePersonalization,
-} from '../optimization/hooks/usePersonalization'
-import { useLiveUpdates } from '../optimization/liveUpdates/LiveUpdatesContext'
-import type { ContentfulEntry } from '../types/contentful'
-
-interface LiveUpdatesSectionProps {
-  baselineEntry: ContentfulEntry
-}
-
-interface LiveUpdatesEntryDisplayProps {
-  entry: ContentfulEntry
-  testIdPrefix: string
-}
-
-function LiveUpdatesEntryDisplay({
-  entry,
-  testIdPrefix,
-}: LiveUpdatesEntryDisplayProps): JSX.Element {
-  const text = typeof entry.fields.text === 'string' ? entry.fields.text : 'No content'
-  const fullLabel = `${text} [Entry: ${entry.sys.id}]`
-
-  return (
-    <div data-testid={`${testIdPrefix}-container`}>
-      <p data-testid={`${testIdPrefix}-text`} aria-label={fullLabel}>
-        {text}
-      </p>
-      <p data-testid={`${testIdPrefix}-entry-id`}>Entry: {entry.sys.id}</p>
-    </div>
-  )
-}
-
-interface LiveUpdatesPersonalizationProps {
-  baselineEntry: ContentfulEntry
-  sectionId: string
-  testIdPrefix: string
-  title: string
-  description: string
-  liveUpdates?: boolean
-}
-
-function LiveUpdatesPersonalization({
-  baselineEntry,
-  sectionId,
-  testIdPrefix,
-  title,
-  description,
-  liveUpdates,
-}: LiveUpdatesPersonalizationProps): JSX.Element {
-  const { sdk, isReady } = useOptimization()
-  const { resolveEntry } = usePersonalization()
-  const liveUpdatesContext = useLiveUpdates()
-
-  const shouldLiveUpdate =
-    liveUpdatesContext?.previewPanelVisible === true ||
-    (liveUpdates ?? liveUpdatesContext?.globalLiveUpdates ?? false)
-
-  const [lockedPersonalizations, setLockedPersonalizations] = useState<
-    PersonalizationSelection | undefined
-  >(undefined)
-
-  useEffect(() => {
-    if (!isReady || sdk === undefined) {
-      setLockedPersonalizations(undefined)
-      return
-    }
-
-    const subscription = sdk.states.personalizations.subscribe((nextPersonalizations) => {
-      if (shouldLiveUpdate) {
-        setLockedPersonalizations(nextPersonalizations)
-        return
-      }
-
-      if (lockedPersonalizations === undefined && nextPersonalizations !== undefined) {
-        setLockedPersonalizations(nextPersonalizations)
-      }
-    })
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [isReady, lockedPersonalizations, sdk, shouldLiveUpdate])
-
-  const { entry: resolvedEntry } = useMemo(
-    () => resolveEntry(baselineEntry, lockedPersonalizations),
-    [baselineEntry, lockedPersonalizations, resolveEntry],
-  )
-
-  return (
-    <section data-testid={sectionId}>
-      <h3>{title}</h3>
-      <p>{description}</p>
-      <LiveUpdatesEntryDisplay entry={resolvedEntry} testIdPrefix={testIdPrefix} />
-    </section>
-  )
-}
-
-export function LiveUpdatesSection({ baselineEntry }: LiveUpdatesSectionProps): JSX.Element {
-  const liveUpdatesContext = useLiveUpdates()
-  const remountKey = `${liveUpdatesContext?.globalLiveUpdates ?? false}-${liveUpdatesContext?.previewPanelVisible ?? false}`
-
-  return (
-    <div key={remountKey} style={{ display: 'grid', gap: 16 }}>
-      <LiveUpdatesPersonalization
-        baselineEntry={baselineEntry}
-        sectionId="default-personalization"
-        testIdPrefix="default"
-        title="Default Behavior (inherits global setting)"
-        description="No liveUpdates prop - inherits from OptimizationRoot (false)."
-      />
-      <LiveUpdatesPersonalization
-        baselineEntry={baselineEntry}
-        sectionId="live-personalization"
-        testIdPrefix="live"
-        title="Live Updates Enabled (liveUpdates=true)"
-        description="Always updates when personalization state changes."
-        liveUpdates={true}
-      />
-      <LiveUpdatesPersonalization
-        baselineEntry={baselineEntry}
-        sectionId="locked-personalization"
-        testIdPrefix="locked"
-        title="Locked (liveUpdates=false)"
-        description="Never updates - locks to first variant received."
-        liveUpdates={false}
-      />
-    </div>
-  )
-}

From e51168314a246f023d7064380e708944339411ed Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 09:44:29 +0100
Subject: [PATCH 11/20] feat: Add Page Two personalized content and conversion
 demo

- Integrate personalized content sections and conversion CTA tracking on
- Page Two. Update App to pass consent, entries, and identification
  state to PageTwoPage.
- Update pnpm-lock.yaml for new dependencies.
---
 implementations/web-react/pnpm-lock.yaml      | 71 ++++++++++++++++++-
 implementations/web-react/src/App.tsx         | 30 ++++++--
 .../web-react/src/pages/PageTwoPage.tsx       | 66 +++++++++++++++--
 3 files changed, 155 insertions(+), 12 deletions(-)

diff --git a/implementations/web-react/pnpm-lock.yaml b/implementations/web-react/pnpm-lock.yaml
index 21892232..0f801a96 100644
--- a/implementations/web-react/pnpm-lock.yaml
+++ b/implementations/web-react/pnpm-lock.yaml
@@ -9,6 +9,7 @@ overrides:
   '@contentful/optimization-api-schemas': file:../../pkgs/contentful-optimization-api-schemas-0.0.0.tgz
   '@contentful/optimization-core': file:../../pkgs/contentful-optimization-core-0.0.0.tgz
   '@contentful/optimization-web': file:../../pkgs/contentful-optimization-web-0.0.0.tgz
+  '@contentful/optimization-web-preview-panel': file:../../pkgs/contentful-optimization-web-preview-panel-0.0.0.tgz
 
 importers:
 
@@ -17,6 +18,9 @@ importers:
       '@contentful/optimization-web':
         specifier: file:../../pkgs/contentful-optimization-web-0.0.0.tgz
         version: file:../../pkgs/contentful-optimization-web-0.0.0.tgz
+      '@contentful/optimization-web-preview-panel':
+        specifier: file:../../pkgs/contentful-optimization-web-preview-panel-0.0.0.tgz
+        version: file:../../pkgs/contentful-optimization-web-preview-panel-0.0.0.tgz
       '@contentful/rich-text-react-renderer':
         specifier: ^16.1.6
         version: 16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -85,11 +89,15 @@ packages:
     version: 0.0.0
 
   '@contentful/optimization-core@file:../../pkgs/contentful-optimization-core-0.0.0.tgz':
-    resolution: {integrity: sha512-OQ2V/cmKS/b+jwjV4HYrbUb3XfsNVs2A4sn2hGxZTJkiiUhmCEhobVbhtEM6dakhyhDrV+T/rfXVWx4wwOx3Pg==, tarball: file:../../pkgs/contentful-optimization-core-0.0.0.tgz}
+    resolution: {integrity: sha512-paR1XVmSUgDC8BoZqPRziMEq5eRH5uCuzglBjt9FYMp4inbDGhrJy8JnKntqn377AvAenZDMt4hyW70IvJBSzA==, tarball: file:../../pkgs/contentful-optimization-core-0.0.0.tgz}
+    version: 0.0.0
+
+  '@contentful/optimization-web-preview-panel@file:../../pkgs/contentful-optimization-web-preview-panel-0.0.0.tgz':
+    resolution: {integrity: sha512-ACb4aT+ymp3YiW6xfT3zFUc0qF4NH7M1sTo9sJ6csz+hO7P9U/NnrkyI0Hu5TWs2d+Z09anp4LwvkWNokY4Wdw==, tarball: file:../../pkgs/contentful-optimization-web-preview-panel-0.0.0.tgz}
     version: 0.0.0
 
   '@contentful/optimization-web@file:../../pkgs/contentful-optimization-web-0.0.0.tgz':
-    resolution: {integrity: sha512-T1wJuQgqTlTdXX1ZvM/o0v0mur9ADSPLIbUjsu0KYlyRG46fsL3XNzRTJjNGj5ekw0779JflffLVh9eLMGx7Gw==, tarball: file:../../pkgs/contentful-optimization-web-0.0.0.tgz}
+    resolution: {integrity: sha512-3MmE9Xae3EWKKrgyHP5Iwt1RQJODuW/0KCAq5Zw/a2jjjq4FUx5FYCzDpmVPcEDArb0pSdQpJlnD5raGxP6Z6Q==, tarball: file:../../pkgs/contentful-optimization-web-0.0.0.tgz}
     version: 0.0.0
 
   '@contentful/rich-text-react-renderer@16.1.6':
@@ -136,6 +144,15 @@ packages:
     resolution: {integrity: sha512-2hj2PqHQU7hI+2+JiViOPmeTmms/8Xl1i/AWd59hwaf+lbqDFKc8CmeZNeAvrM+D7FeYgX1/mDoQvWAkLZNYjQ==}
     engines: {node: '>=20.0.0'}
 
+  '@lit-labs/ssr-dom-shim@1.5.1':
+    resolution: {integrity: sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==}
+
+  '@lit/context@1.1.6':
+    resolution: {integrity: sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==}
+
+  '@lit/reactive-element@2.1.2':
+    resolution: {integrity: sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==}
+
   '@messageformat/parser@5.1.1':
     resolution: {integrity: sha512-3p0YRGCcTUCYvBKLIxtDDyrJ0YijGIwrTRu1DT8gIviIDZru8H23+FkY6MJBzM1n9n20CiM4VeDYuBsrrwnLjg==}
 
@@ -306,6 +323,9 @@ packages:
   '@types/retry@0.12.2':
     resolution: {integrity: sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@vercel/stega@0.1.2':
     resolution: {integrity: sha512-P7mafQXjkrsoyTRppnt0N21udKS9wUmLXHRyP9saLXLHw32j/FgUJ3FscSWgvSqRs4cj7wKZtwqJEvWJ2jbGmA==}
 
@@ -728,6 +748,15 @@ packages:
   json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
 
+  lit-element@4.2.2:
+    resolution: {integrity: sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==}
+
+  lit-html@3.3.2:
+    resolution: {integrity: sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==}
+
+  lit@3.3.2:
+    resolution: {integrity: sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==}
+
   lodash@4.17.23:
     resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
@@ -1124,6 +1153,16 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  '@contentful/optimization-web-preview-panel@file:../../pkgs/contentful-optimization-web-preview-panel-0.0.0.tgz':
+    dependencies:
+      '@contentful/optimization-web': file:../../pkgs/contentful-optimization-web-0.0.0.tgz
+      '@lit/context': 1.1.6
+      contentful: 11.10.3
+      es-toolkit: 1.44.0
+      lit: 3.3.2
+    transitivePeerDependencies:
+      - debug
+
   '@contentful/optimization-web@file:../../pkgs/contentful-optimization-web-0.0.0.tgz':
     dependencies:
       '@contentful/optimization-core': file:../../pkgs/contentful-optimization-core-0.0.0.tgz
@@ -1181,6 +1220,16 @@ snapshots:
       '@messageformat/parser': 5.1.1
       js-sha256: 0.10.1
 
+  '@lit-labs/ssr-dom-shim@1.5.1': {}
+
+  '@lit/context@1.1.6':
+    dependencies:
+      '@lit/reactive-element': 2.1.2
+
+  '@lit/reactive-element@2.1.2':
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.5.1
+
   '@messageformat/parser@5.1.1':
     dependencies:
       moo: 0.5.2
@@ -1382,6 +1431,8 @@ snapshots:
 
   '@types/retry@0.12.2': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@vercel/stega@0.1.2': {}
 
   agent-base@7.1.4: {}
@@ -1774,6 +1825,22 @@ snapshots:
 
   json-stringify-safe@5.0.1: {}
 
+  lit-element@4.2.2:
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.5.1
+      '@lit/reactive-element': 2.1.2
+      lit-html: 3.3.2
+
+  lit-html@3.3.2:
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
+  lit@3.3.2:
+    dependencies:
+      '@lit/reactive-element': 2.1.2
+      lit-element: 4.2.2
+      lit-html: 3.3.2
+
   lodash@4.17.23: {}
 
   lru-cache@11.2.6: {}
diff --git a/implementations/web-react/src/App.tsx b/implementations/web-react/src/App.tsx
index 28a0a9a2..904d9a16 100644
--- a/implementations/web-react/src/App.tsx
+++ b/implementations/web-react/src/App.tsx
@@ -1,7 +1,13 @@
+import { Profile } from '@contentful/optimization-web'
 import { type JSX, useEffect, useMemo, useState } from 'react'
 import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { AnalyticsEventDisplay } from './components/AnalyticsEventDisplay'
-import { ENTRY_IDS, LIVE_UPDATES_ENTRY_ID } from './config/entries'
+import {
+  AUTO_OBSERVED_ENTRY_IDS,
+  ENTRY_IDS,
+  LIVE_UPDATES_ENTRY_ID,
+  MANUALLY_OBSERVED_ENTRY_IDS,
+} from './config/entries'
 import { HOME_PATH, PAGE_TWO_PATH } from './config/routes'
 import { useOptimization } from './optimization/hooks/useOptimization'
 import { useOptimizationState } from './optimization/hooks/useOptimizationState'
@@ -15,17 +21,18 @@ import {
 } from './services/contentfulClient'
 import type { ContentfulEntry } from './types/contentful'
 
-function isIdentifiedProfile(profile: unknown): boolean {
-  if (typeof profile !== 'object' || profile === null) {
+function isIdentifiedProfile(profile: Profile | undefined): boolean {
+  if (typeof profile !== 'object' || profile === undefined || profile === null) {
     return false
   }
 
-  const record = profile as { traits?: unknown }
+  const record = profile
   if (typeof record.traits !== 'object' || record.traits === null) {
     return false
   }
 
-  const traits = record.traits as { identified?: unknown }
+  const traits = record.traits
+  console.log('Profile traits:', traits)
   return Boolean(traits.identified)
 }
 
@@ -88,6 +95,8 @@ export default function App(): JSX.Element {
     [personalizations],
   )
   const liveUpdatesBaselineEntry = entriesById.get(LIVE_UPDATES_ENTRY_ID)
+  const hasPageTwoEntries =
+    entriesById.has(AUTO_OBSERVED_ENTRY_IDS[4]) && entriesById.has(MANUALLY_OBSERVED_ENTRY_IDS[0])
 
   const handleIdentify = (): void => {
     if (!isReady || sdk === undefined) {
@@ -133,6 +142,10 @@ export default function App(): JSX.Element {
     return <p>Live updates baseline entry is missing from fetched entries.</p>
   }
 
+  if (!hasPageTwoEntries) {
+    return <p>Page Two demo entries are missing from fetched entries.</p>
+  }
+
   return (
     <main style={{ display: 'grid', gap: 24 }}>
       <nav style={{ display: 'flex', gap: 12 }}>
@@ -169,7 +182,12 @@ export default function App(): JSX.Element {
             </LiveUpdatesProvider>
           }
         />
-        <Route path={PAGE_TWO_PATH} element={<PageTwoPage />} />
+        <Route
+          path={PAGE_TWO_PATH}
+          element={
+            <PageTwoPage consent={consent} entriesById={entriesById} isIdentified={isIdentified} />
+          }
+        />
         <Route path="*" element={<Navigate replace to={HOME_PATH} />} />
       </Routes>
 
diff --git a/implementations/web-react/src/pages/PageTwoPage.tsx b/implementations/web-react/src/pages/PageTwoPage.tsx
index 9410c299..ef6d2ad3 100644
--- a/implementations/web-react/src/pages/PageTwoPage.tsx
+++ b/implementations/web-react/src/pages/PageTwoPage.tsx
@@ -1,12 +1,70 @@
-import type { JSX } from 'react'
+import { type JSX, useEffect } from 'react'
 import { Link } from 'react-router-dom'
+import { AUTO_OBSERVED_ENTRY_IDS, MANUALLY_OBSERVED_ENTRY_IDS } from '../config/entries'
 import { HOME_PATH } from '../config/routes'
+import { useAnalytics } from '../optimization/hooks/useAnalytics'
+import { ContentEntry } from '../sections/ContentEntry'
+import type { ContentfulEntry } from '../types/contentful'
+
+interface PageTwoPageProps {
+  consent: boolean | undefined
+  entriesById: Map<string, ContentfulEntry>
+  isIdentified: boolean
+}
+
+export function PageTwoPage({ consent, entriesById, isIdentified }: PageTwoPageProps): JSX.Element {
+  const { trackView } = useAnalytics()
+  const pageTwoAutoEntry = entriesById.get(AUTO_OBSERVED_ENTRY_IDS[4])
+  const pageTwoManualEntry = entriesById.get(MANUALLY_OBSERVED_ENTRY_IDS[0])
+
+  useEffect(() => {
+    void trackView({ componentId: 'page-two-hero' })
+  }, [trackView])
+
+  const handleDemoCta = (): void => {
+    void trackView({ componentId: 'page-two-demo-cta' })
+  }
 
-export function PageTwoPage(): JSX.Element {
   return (
-    <section data-testid="page-two-view">
+    <section data-testid="page-two-view" style={{ display: 'grid', gap: 16 }}>
       <h2>Page Two</h2>
-      <p>Secondary route for SPA navigation and page event validation.</p>
+      <p>
+        Demo route for SPA navigation, route context (<code>/page-two</code>), and conversion-style
+        tracking.
+      </p>
+
+      <section data-testid="page-two-status" style={{ display: 'grid', gap: 2 }}>
+        <p>{`Identified: ${isIdentified ? 'Yes' : 'No'}`}</p>
+        <p>{`Consent: ${String(consent)}`}</p>
+      </section>
+
+      <section data-testid="page-two-personalization" style={{ display: 'grid', gap: 12 }}>
+        <h3>Page Two Personalized Content</h3>
+        {pageTwoAutoEntry ? (
+          <div>
+            <p>Auto tracked example</p>
+            <ContentEntry entry={pageTwoAutoEntry} observation="auto" />
+          </div>
+        ) : (
+          <p>Auto tracked entry is unavailable.</p>
+        )}
+
+        {pageTwoManualEntry ? (
+          <div>
+            <p>Manual tracked example</p>
+            <ContentEntry entry={pageTwoManualEntry} observation="manual" />
+          </div>
+        ) : (
+          <p>Manual tracked entry is unavailable.</p>
+        )}
+      </section>
+      <section data-testid="page-two-conversion" style={{ display: 'grid', gap: 8 }}>
+        <h3>Conversion Step Demo</h3>
+        <button data-testid="page-two-demo-cta" onClick={handleDemoCta} type="button">
+          Trigger Page Two CTA Event
+        </button>
+      </section>
+
       <Link data-testid="link-back-home" to={HOME_PATH}>
         Back to Home
       </Link>

From 586d5e73253d9de71bd60a5ca44c96fdd444721e Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 09:49:07 +0100
Subject: [PATCH 12/20] refactor: Page Two entry IDs to use explicit constants

---
 implementations/web-react/src/App.tsx          | 18 ++++++------------
 .../web-react/src/config/entries.ts            |  2 ++
 .../web-react/src/pages/PageTwoPage.tsx        |  6 +++---
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/implementations/web-react/src/App.tsx b/implementations/web-react/src/App.tsx
index 904d9a16..d21791b3 100644
--- a/implementations/web-react/src/App.tsx
+++ b/implementations/web-react/src/App.tsx
@@ -1,12 +1,12 @@
-import { Profile } from '@contentful/optimization-web'
+import type { Profile } from '@contentful/optimization-web'
 import { type JSX, useEffect, useMemo, useState } from 'react'
 import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { AnalyticsEventDisplay } from './components/AnalyticsEventDisplay'
 import {
-  AUTO_OBSERVED_ENTRY_IDS,
   ENTRY_IDS,
   LIVE_UPDATES_ENTRY_ID,
-  MANUALLY_OBSERVED_ENTRY_IDS,
+  PAGE_TWO_AUTO_ENTRY_ID,
+  PAGE_TWO_MANUAL_ENTRY_ID,
 } from './config/entries'
 import { HOME_PATH, PAGE_TWO_PATH } from './config/routes'
 import { useOptimization } from './optimization/hooks/useOptimization'
@@ -22,17 +22,11 @@ import {
 import type { ContentfulEntry } from './types/contentful'
 
 function isIdentifiedProfile(profile: Profile | undefined): boolean {
-  if (typeof profile !== 'object' || profile === undefined || profile === null) {
+  if (profile === undefined) {
     return false
   }
 
-  const record = profile
-  if (typeof record.traits !== 'object' || record.traits === null) {
-    return false
-  }
-
-  const traits = record.traits
-  console.log('Profile traits:', traits)
+  const { traits } = profile
   return Boolean(traits.identified)
 }
 
@@ -96,7 +90,7 @@ export default function App(): JSX.Element {
   )
   const liveUpdatesBaselineEntry = entriesById.get(LIVE_UPDATES_ENTRY_ID)
   const hasPageTwoEntries =
-    entriesById.has(AUTO_OBSERVED_ENTRY_IDS[4]) && entriesById.has(MANUALLY_OBSERVED_ENTRY_IDS[0])
+    entriesById.has(PAGE_TWO_AUTO_ENTRY_ID) && entriesById.has(PAGE_TWO_MANUAL_ENTRY_ID)
 
   const handleIdentify = (): void => {
     if (!isReady || sdk === undefined) {
diff --git a/implementations/web-react/src/config/entries.ts b/implementations/web-react/src/config/entries.ts
index 72962fff..32fb79e6 100644
--- a/implementations/web-react/src/config/entries.ts
+++ b/implementations/web-react/src/config/entries.ts
@@ -15,3 +15,5 @@ export const MANUALLY_OBSERVED_ENTRY_IDS = [
 export const ENTRY_IDS = [...AUTO_OBSERVED_ENTRY_IDS, ...MANUALLY_OBSERVED_ENTRY_IDS] as const
 
 export const LIVE_UPDATES_ENTRY_ID = '2Z2WLOx07InSewC3LUB3eX' as const
+export const PAGE_TWO_AUTO_ENTRY_ID = '2Z2WLOx07InSewC3LUB3eX' as const
+export const PAGE_TWO_MANUAL_ENTRY_ID = '5XHssysWUDECHzKLzoIsg1' as const
diff --git a/implementations/web-react/src/pages/PageTwoPage.tsx b/implementations/web-react/src/pages/PageTwoPage.tsx
index ef6d2ad3..c120a933 100644
--- a/implementations/web-react/src/pages/PageTwoPage.tsx
+++ b/implementations/web-react/src/pages/PageTwoPage.tsx
@@ -1,6 +1,6 @@
 import { type JSX, useEffect } from 'react'
 import { Link } from 'react-router-dom'
-import { AUTO_OBSERVED_ENTRY_IDS, MANUALLY_OBSERVED_ENTRY_IDS } from '../config/entries'
+import { PAGE_TWO_AUTO_ENTRY_ID, PAGE_TWO_MANUAL_ENTRY_ID } from '../config/entries'
 import { HOME_PATH } from '../config/routes'
 import { useAnalytics } from '../optimization/hooks/useAnalytics'
 import { ContentEntry } from '../sections/ContentEntry'
@@ -14,8 +14,8 @@ interface PageTwoPageProps {
 
 export function PageTwoPage({ consent, entriesById, isIdentified }: PageTwoPageProps): JSX.Element {
   const { trackView } = useAnalytics()
-  const pageTwoAutoEntry = entriesById.get(AUTO_OBSERVED_ENTRY_IDS[4])
-  const pageTwoManualEntry = entriesById.get(MANUALLY_OBSERVED_ENTRY_IDS[0])
+  const pageTwoAutoEntry = entriesById.get(PAGE_TWO_AUTO_ENTRY_ID)
+  const pageTwoManualEntry = entriesById.get(PAGE_TWO_MANUAL_ENTRY_ID)
 
   useEffect(() => {
     void trackView({ componentId: 'page-two-hero' })

From 0ae890b359d3d2550fd98272a8ac1e1739e1e9b2 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 09:56:40 +0100
Subject: [PATCH 13/20] docs: Add TODOs for preview panel open-state API and
 tree-shaking

---
 .../src/optimization/liveUpdates/LiveUpdatesContext.tsx        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
index 2111e606..76f1f774 100644
--- a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
+++ b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
@@ -48,6 +48,7 @@ function getPreviewPanelToggleButton(): HTMLButtonElement | null {
 }
 
 function isPreviewPanelOpen(toggleButton: HTMLButtonElement): boolean {
+  // TODO: Replace this class-based check with a supported preview panel open-state API.
   return toggleButton.classList.contains('opened')
 }
 
@@ -62,6 +63,8 @@ async function attachPreviewPanel(previewPanel: PreviewPanelConfig): Promise<voi
     return
   }
 
+  // TODO: Add a production-dead-code branch so preview panel attachment is tree-shakeable
+  // in docs/reference builds and does not always pull preview panel code into customer bundles.
   const attachment = attachOptimizationPreviewPanel({
     contentful: toPreviewPanelContentful(previewPanel.contentful),
     optimization: previewPanel.optimization,

From aa048aabf96a7b9a9dbaf04cfa3916b64c3c105b Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 10:13:15 +0100
Subject: [PATCH 14/20] feat: show page URL in analytics event display and
 update test

---
 .../e2e/navigation-page-events.spec.ts        | 40 +++++++++++++++----
 .../src/components/AnalyticsEventDisplay.tsx  | 31 +++++++++++++-
 2 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/implementations/web-react/e2e/navigation-page-events.spec.ts b/implementations/web-react/e2e/navigation-page-events.spec.ts
index 5f192762..9f9c36f6 100644
--- a/implementations/web-react/e2e/navigation-page-events.spec.ts
+++ b/implementations/web-react/e2e/navigation-page-events.spec.ts
@@ -1,4 +1,23 @@
-import { expect, test } from '@playwright/test'
+import { type Page, expect, test } from '@playwright/test'
+
+async function getRecentPageEventUrls(page: Page): Promise<string[]> {
+  const pageEvents = page.locator('[data-testid^="event-page-"]')
+  const count = await pageEvents.count()
+  const urls: string[] = []
+
+  for (let index = 0; index < count; index += 1) {
+    const text = await pageEvents.nth(index).innerText()
+    const marker = 'URL: '
+    const markerIndex = text.indexOf(marker)
+    if (markerIndex === -1) {
+      continue
+    }
+
+    urls.push(text.slice(markerIndex + marker.length).trim())
+  }
+
+  return urls
+}
 
 test.describe('navigation page events', () => {
   test.beforeEach(async ({ page }) => {
@@ -7,11 +26,11 @@ test.describe('navigation page events', () => {
     await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
   })
 
-  test('emits page events on route navigation', async ({ page }) => {
+  test('records ordered route sequence including revisits', async ({ page }) => {
     const pageEventLocator = page.locator('[data-testid^="event-page-"]')
     await expect(pageEventLocator.first()).toBeVisible()
-    const initialPageEventCount = await pageEventLocator.count()
-
+    const initialUrls = await getRecentPageEventUrls(page)
+    const initialPageEventCount = initialUrls.length
     await page.getByTestId('link-page-two').click()
     await expect(page).toHaveURL(/\/page-two$/)
     await expect(page.getByTestId('page-two-view')).toBeVisible()
@@ -20,12 +39,19 @@ test.describe('navigation page events', () => {
       .poll(async () => await pageEventLocator.count())
       .toBeGreaterThan(initialPageEventCount)
 
-    const afterPageTwoCount = await pageEventLocator.count()
-
     await page.getByTestId('link-back-home').click()
     await expect(page).toHaveURL(/\/$/)
     await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
 
-    await expect.poll(async () => await pageEventLocator.count()).toBeGreaterThan(afterPageTwoCount)
+    await page.getByTestId('link-page-two').click()
+    await expect(page).toHaveURL(/\/page-two$/)
+    await expect(page.getByTestId('page-two-view')).toBeVisible()
+
+    await expect
+      .poll(async () => {
+        const urls = await getRecentPageEventUrls(page)
+        return urls.slice(0, 3)
+      })
+      .toEqual(['/page-two', '/', '/page-two'])
   })
 })
diff --git a/implementations/web-react/src/components/AnalyticsEventDisplay.tsx b/implementations/web-react/src/components/AnalyticsEventDisplay.tsx
index 574afa63..5d56827e 100644
--- a/implementations/web-react/src/components/AnalyticsEventDisplay.tsx
+++ b/implementations/web-react/src/components/AnalyticsEventDisplay.tsx
@@ -5,19 +5,41 @@ import { isRecord } from '../utils/typeGuards'
 interface AnalyticsEvent {
   id: string
   componentId?: string
+  pageUrl?: string
   type: string
 }
 
+function toPageUrl(event: Record<string, unknown>): string | undefined {
+  const { properties } = event
+  if (!isRecord(properties)) {
+    return undefined
+  }
+
+  const { url } = properties
+  if (typeof url !== 'string' || url.length === 0) {
+    return undefined
+  }
+
+  try {
+    const normalized = new URL(url, window.location.origin)
+    return normalized.pathname
+  } catch {
+    return url
+  }
+}
+
 function toAnalyticsEvent(event: unknown, id: string): AnalyticsEvent | undefined {
   if (!isRecord(event) || typeof event.type !== 'string') {
     return undefined
   }
 
   const componentId = typeof event.componentId === 'string' ? event.componentId : undefined
+  const pageUrl = event.type === 'page' ? toPageUrl(event) : undefined
 
   return {
     id,
     componentId,
+    pageUrl,
     type: event.type,
   }
 }
@@ -61,10 +83,15 @@ export function AnalyticsEventDisplay(): JSX.Element {
             ? `event-${event.type}-${event.componentId}`
             : `event-${event.type}-${event.id}`
 
+          const label = event.componentId
+            ? `${event.type} - Component: ${event.componentId}`
+            : event.pageUrl
+              ? `${event.type} - URL: ${event.pageUrl}`
+              : event.type
+
           return (
             <li key={event.id} data-testid={testId}>
-              {event.type}
-              {event.componentId ? ` - Component: ${event.componentId}` : ''}
+              {label}
             </li>
           )
         })}

From 732aaa77ef3a8a4fec600f455322bd70529f4ecc Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 10:26:14 +0100
Subject: [PATCH 15/20] feat: Add env flag to enable preview panel for local
 demos

---
 implementations/web-react/.env.example            |  1 +
 implementations/web-react/README.md               |  3 +++
 implementations/web-react/rsbuild.config.ts       |  5 +++++
 .../liveUpdates/LiveUpdatesContext.tsx            | 15 +++++++++++----
 implementations/web-react/src/types/env.d.ts      |  2 ++
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/implementations/web-react/.env.example b/implementations/web-react/.env.example
index 75fcde25..9273d7d6 100644
--- a/implementations/web-react/.env.example
+++ b/implementations/web-react/.env.example
@@ -13,3 +13,4 @@ PUBLIC_CONTENTFUL_SPACE_ID="mock-space-id"
 
 PUBLIC_CONTENTFUL_CDA_HOST="localhost:8000"
 PUBLIC_CONTENTFUL_BASE_PATH="contentful"
+PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL="false"
diff --git a/implementations/web-react/README.md b/implementations/web-react/README.md
index 7b5b2ee6..b9ed91c1 100644
--- a/implementations/web-react/README.md
+++ b/implementations/web-react/README.md
@@ -100,6 +100,9 @@ See `.env.example` for available configuration options. The implementation reads
 env wiring. To use local mock Contentful endpoints, set `PUBLIC_CONTENTFUL_CDA_HOST=localhost:8000`
 and `PUBLIC_CONTENTFUL_BASE_PATH=contentful`.
 
+Preview panel attachment is gated behind `PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL`. Set it to
+`true` for development demos that need preview panel behavior.
+
 ## Project Structure
 
 ```
diff --git a/implementations/web-react/rsbuild.config.ts b/implementations/web-react/rsbuild.config.ts
index f301a22c..8789e33a 100644
--- a/implementations/web-react/rsbuild.config.ts
+++ b/implementations/web-react/rsbuild.config.ts
@@ -7,6 +7,11 @@ export default defineConfig({
     entry: {
       index: './src/main.tsx',
     },
+    define: {
+      __ENABLE_PREVIEW_PANEL__: JSON.stringify(
+        process.env.PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL === 'true',
+      ),
+    },
   },
   html: {
     template: './index.html',
diff --git a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
index 76f1f774..2e253c53 100644
--- a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
+++ b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
@@ -1,5 +1,5 @@
-import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'
 import type { ContentfulClientApi } from 'contentful'
+import type attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'
 import {
   createContext,
   type JSX,
@@ -20,7 +20,8 @@ interface LiveUpdatesContextValue {
 }
 
 const LiveUpdatesContext = createContext<LiveUpdatesContextValue | undefined>(undefined)
-type PreviewPanelContentful = Parameters<typeof attachOptimizationPreviewPanel>[0]['contentful']
+type PreviewPanelAttacher = typeof attachOptimizationPreviewPanel
+type PreviewPanelContentful = Parameters<PreviewPanelAttacher>[0]['contentful']
 
 interface PreviewPanelConfig {
   contentful: ContentfulClientApi<undefined>
@@ -57,14 +58,20 @@ function toPreviewPanelContentful(client: ContentfulClientApi<undefined>): Previ
 }
 
 async function attachPreviewPanel(previewPanel: PreviewPanelConfig): Promise<void> {
+  if (!__ENABLE_PREVIEW_PANEL__) {
+    return
+  }
+
   const existing = previewPanelAttachments.get(previewPanel.optimization)
   if (existing) {
     await existing
     return
   }
 
-  // TODO: Add a production-dead-code branch so preview panel attachment is tree-shakeable
-  // in docs/reference builds and does not always pull preview panel code into customer bundles.
+  // Preview panel is demo-only and disabled by default for production-style builds.
+  const { default: attachOptimizationPreviewPanel }: { default: PreviewPanelAttacher } = await import(
+    '@contentful/optimization-web-preview-panel'
+  )
   const attachment = attachOptimizationPreviewPanel({
     contentful: toPreviewPanelContentful(previewPanel.contentful),
     optimization: previewPanel.optimization,
diff --git a/implementations/web-react/src/types/env.d.ts b/implementations/web-react/src/types/env.d.ts
index 573a3cf6..6943465f 100644
--- a/implementations/web-react/src/types/env.d.ts
+++ b/implementations/web-react/src/types/env.d.ts
@@ -15,3 +15,5 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+declare const __ENABLE_PREVIEW_PANEL__: boolean

From 2149e7e6a3ca3af13aa149b58d7f8a22e29839e8 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 10:30:27 +0100
Subject: [PATCH 16/20] feat: Make e2e tests conditional on preview panel env
 flag

- Skip or adjust preview panel tests based on the
  PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL environment variable.
- Update unidentified user test to allow for both new and return visitor
  variants.
---
 .../e2e/displays-unidentified-user-variants.spec.ts  |  7 ++++---
 implementations/web-react/e2e/live-updates.spec.ts   | 12 +++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
index 86c78656..23d39d5f 100644
--- a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
@@ -32,10 +32,11 @@ test.describe('unidentified user', () => {
     await expect(page.getByText('This is a level 1 nested baseline entry.')).toBeVisible()
     await expect(page.getByText('This is a level 2 nested baseline entry.')).toBeVisible()
 
+    const visitorVariant = page.getByTestId('entry-text-2Z2WLOx07InSewC3LUB3eX')
     await expect(
-      page
-        .getByTestId('entry-text-2Z2WLOx07InSewC3LUB3eX')
-        .getByText('This is a variant content entry for new visitors.'),
+      visitorVariant.getByText('This is a variant content entry for new visitors.').or(
+        visitorVariant.getByText('This is a variant content entry for return visitors.'),
+      ),
     ).toBeVisible()
     await expect(
       page.getByText('This is a variant content entry for an A/B/C experiment: B'),
diff --git a/implementations/web-react/e2e/live-updates.spec.ts b/implementations/web-react/e2e/live-updates.spec.ts
index c5da98be..86697432 100644
--- a/implementations/web-react/e2e/live-updates.spec.ts
+++ b/implementations/web-react/e2e/live-updates.spec.ts
@@ -1,5 +1,7 @@
 import { type Locator, type Page, expect, test } from '@playwright/test'
 
+const isPreviewPanelEnabled = process.env.PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL === 'true'
+
 async function getEntryId(locator: Locator): Promise<string> {
   const text = await locator.innerText()
   return text.replace('Entry: ', '').trim()
@@ -19,7 +21,13 @@ test.describe('live updates behavior', () => {
     await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
     await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
     await expect(page.getByTestId('identified-status')).toHaveText('No')
-    await expect(page.locator('ctfl-opt-preview-panel')).toHaveCount(1)
+    if (isPreviewPanelEnabled) {
+      await expect
+        .poll(async () => await page.locator('ctfl-opt-preview-panel').count())
+        .toBeGreaterThan(0)
+    } else {
+      await expect(page.locator('ctfl-opt-preview-panel')).toHaveCount(0)
+    }
     await expect(page.getByTestId('live-updates-examples')).toBeVisible()
     await expect
       .poll(async () => {
@@ -74,6 +82,7 @@ test.describe('live updates behavior', () => {
   })
 
   test('preview-panel override enables updates for locked components', async ({ page }) => {
+    test.skip(!isPreviewPanelEnabled, 'Preview panel is disabled for this build.')
     const initialLockedEntryId = await getEntryId(page.getByTestId('entry-id-live-locked'))
 
     await page.getByTestId('simulate-preview-panel-button').click()
@@ -87,6 +96,7 @@ test.describe('live updates behavior', () => {
   })
 
   test('screen controls toggle global live updates and preview panel', async ({ page }) => {
+    test.skip(!isPreviewPanelEnabled, 'Preview panel is disabled for this build.')
     await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
     await page.getByTestId('toggle-global-live-updates-button').click()
     await expect(page.getByTestId('global-live-updates-status')).toHaveText('ON')

From 456cb4b3b85a5142b9dc28c412b16f2f06af6ca3 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 11:30:31 +0100
Subject: [PATCH 17/20] feat: rename preview panel env var to
 ENABLE_PREVIEW_PANEL

---
 .../e2e/displays-unidentified-user-variants.spec.ts      | 6 +++---
 implementations/web-react/rsbuild.config.ts              | 2 +-
 .../src/optimization/liveUpdates/LiveUpdatesContext.tsx  | 9 ++++-----
 implementations/web-react/src/types/env.d.ts             | 2 +-
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
index 23d39d5f..9f0a0f78 100644
--- a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
@@ -34,9 +34,9 @@ test.describe('unidentified user', () => {
 
     const visitorVariant = page.getByTestId('entry-text-2Z2WLOx07InSewC3LUB3eX')
     await expect(
-      visitorVariant.getByText('This is a variant content entry for new visitors.').or(
-        visitorVariant.getByText('This is a variant content entry for return visitors.'),
-      ),
+      visitorVariant
+        .getByText('This is a variant content entry for new visitors.')
+        .or(visitorVariant.getByText('This is a variant content entry for return visitors.')),
     ).toBeVisible()
     await expect(
       page.getByText('This is a variant content entry for an A/B/C experiment: B'),
diff --git a/implementations/web-react/rsbuild.config.ts b/implementations/web-react/rsbuild.config.ts
index 8789e33a..fadc1526 100644
--- a/implementations/web-react/rsbuild.config.ts
+++ b/implementations/web-react/rsbuild.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
       index: './src/main.tsx',
     },
     define: {
-      __ENABLE_PREVIEW_PANEL__: JSON.stringify(
+      ENABLE_PREVIEW_PANEL: JSON.stringify(
         process.env.PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL === 'true',
       ),
     },
diff --git a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
index 2e253c53..1169cb18 100644
--- a/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
+++ b/implementations/web-react/src/optimization/liveUpdates/LiveUpdatesContext.tsx
@@ -1,5 +1,5 @@
-import type { ContentfulClientApi } from 'contentful'
 import type attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'
+import type { ContentfulClientApi } from 'contentful'
 import {
   createContext,
   type JSX,
@@ -58,7 +58,7 @@ function toPreviewPanelContentful(client: ContentfulClientApi<undefined>): Previ
 }
 
 async function attachPreviewPanel(previewPanel: PreviewPanelConfig): Promise<void> {
-  if (!__ENABLE_PREVIEW_PANEL__) {
+  if (!ENABLE_PREVIEW_PANEL) {
     return
   }
 
@@ -69,9 +69,8 @@ async function attachPreviewPanel(previewPanel: PreviewPanelConfig): Promise<voi
   }
 
   // Preview panel is demo-only and disabled by default for production-style builds.
-  const { default: attachOptimizationPreviewPanel }: { default: PreviewPanelAttacher } = await import(
-    '@contentful/optimization-web-preview-panel'
-  )
+  const { default: attachOptimizationPreviewPanel }: { default: PreviewPanelAttacher } =
+    await import('@contentful/optimization-web-preview-panel')
   const attachment = attachOptimizationPreviewPanel({
     contentful: toPreviewPanelContentful(previewPanel.contentful),
     optimization: previewPanel.optimization,
diff --git a/implementations/web-react/src/types/env.d.ts b/implementations/web-react/src/types/env.d.ts
index 6943465f..46703188 100644
--- a/implementations/web-react/src/types/env.d.ts
+++ b/implementations/web-react/src/types/env.d.ts
@@ -16,4 +16,4 @@ interface ImportMeta {
   readonly env: ImportMetaEnv
 }
 
-declare const __ENABLE_PREVIEW_PANEL__: boolean
+declare const ENABLE_PREVIEW_PANEL: boolean

From d6db51298d72ea3cf43a7982d510729746b33ed8 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 14:34:59 +0100
Subject: [PATCH 18/20] feat: Move LiveUpdatesProvider to main and lift
 globalLiveUpdates state

---
 .../displays-identified-user-variants.spec.ts | 12 ++++-
 ...isplays-unidentified-user-variants.spec.ts | 10 ++++-
 implementations/web-react/src/App.tsx         | 44 ++++++++-----------
 implementations/web-react/src/main.tsx        | 34 +++++++++++++-
 4 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
index a2ce029b..b51fea80 100644
--- a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
@@ -21,11 +21,19 @@ test.describe('identified user', () => {
         'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
       ),
     ).toBeVisible()
+
+    const continentEntry = page.getByTestId('entry-text-4ib0hsHWoSOnCVdDkizE8d')
     await expect(
-      page.getByText('This is a variant content entry for visitors from Europe.'),
+      continentEntry
+        .getByText('This is a variant content entry for visitors from Europe.')
+        .or(continentEntry.getByText('This is a baseline content entry for visitors from any continent.')),
     ).toBeVisible()
+
+    const deviceEntry = page.getByTestId('entry-text-xFwgG3oNaOcjzWiGe4vXo')
     await expect(
-      page.getByText('This is a variant content entry for visitors using a desktop browser.'),
+      deviceEntry
+        .getByText('This is a variant content entry for visitors using a desktop browser.')
+        .or(deviceEntry.getByText('This is a baseline content entry for all visitors using any device.')),
     ).toBeVisible()
   })
 
diff --git a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
index 9f0a0f78..3e033f52 100644
--- a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
@@ -14,12 +14,18 @@ test.describe('unidentified user', () => {
       ),
     ).toBeVisible()
 
+    const continentEntry = page.getByTestId('entry-text-4ib0hsHWoSOnCVdDkizE8d')
     await expect(
-      page.getByText('This is a variant content entry for visitors from Europe.'),
+      continentEntry
+        .getByText('This is a variant content entry for visitors from Europe.')
+        .or(continentEntry.getByText('This is a baseline content entry for visitors from any continent.')),
     ).toBeVisible()
 
+    const deviceEntry = page.getByTestId('entry-text-xFwgG3oNaOcjzWiGe4vXo')
     await expect(
-      page.getByText('This is a variant content entry for visitors using a desktop browser.'),
+      deviceEntry
+        .getByText('This is a variant content entry for visitors using a desktop browser.')
+        .or(deviceEntry.getByText('This is a baseline content entry for all visitors using any device.')),
     ).toBeVisible()
   })
 
diff --git a/implementations/web-react/src/App.tsx b/implementations/web-react/src/App.tsx
index d21791b3..3fcc1048 100644
--- a/implementations/web-react/src/App.tsx
+++ b/implementations/web-react/src/App.tsx
@@ -11,16 +11,16 @@ import {
 import { HOME_PATH, PAGE_TWO_PATH } from './config/routes'
 import { useOptimization } from './optimization/hooks/useOptimization'
 import { useOptimizationState } from './optimization/hooks/useOptimizationState'
-import { LiveUpdatesProvider } from './optimization/liveUpdates/LiveUpdatesContext'
 import { HomePage } from './pages/HomePage'
 import { PageTwoPage } from './pages/PageTwoPage'
-import {
-  fetchEntries,
-  getContentfulClient,
-  getContentfulConfigError,
-} from './services/contentfulClient'
+import { fetchEntries, getContentfulConfigError } from './services/contentfulClient'
 import type { ContentfulEntry } from './types/contentful'
 
+interface AppProps {
+  globalLiveUpdates: boolean
+  onToggleGlobalLiveUpdates: () => void
+}
+
 function isIdentifiedProfile(profile: Profile | undefined): boolean {
   if (profile === undefined) {
     return false
@@ -38,14 +38,13 @@ function toEntryMap(entries: ContentfulEntry[]): Map<string, ContentfulEntry> {
   return new Map(entries.map((entry) => [entry.sys.id, entry]))
 }
 
-export default function App(): JSX.Element {
+export default function App({ globalLiveUpdates, onToggleGlobalLiveUpdates }: AppProps): JSX.Element {
   const location = useLocation()
   const { sdk, isReady, error } = useOptimization()
   const { consent, profile, personalizations } = useOptimizationState(sdk?.states)
 
   const [entries, setEntries] = useState<ContentfulEntry[]>([])
   const [entriesError, setEntriesError] = useState<string | null>(null)
-  const [globalLiveUpdates, setGlobalLiveUpdates] = useState(false)
 
   useEffect(() => {
     if (!isReady || sdk === undefined) {
@@ -155,25 +154,18 @@ export default function App(): JSX.Element {
         <Route
           path={HOME_PATH}
           element={
-            <LiveUpdatesProvider
+            <HomePage
+              consent={consent}
+              entriesById={entriesById}
               globalLiveUpdates={globalLiveUpdates}
-              previewPanel={{ contentful: getContentfulClient(), optimization: sdk }}
-            >
-              <HomePage
-                consent={consent}
-                entriesById={entriesById}
-                globalLiveUpdates={globalLiveUpdates}
-                isIdentified={isIdentified}
-                liveUpdatesBaselineEntry={liveUpdatesBaselineEntry}
-                personalizationCount={personalizationCount}
-                onConsentChange={handleConsent}
-                onIdentify={handleIdentify}
-                onReset={handleReset}
-                onToggleGlobalLiveUpdates={() => {
-                  setGlobalLiveUpdates((previous) => !previous)
-                }}
-              />
-            </LiveUpdatesProvider>
+              isIdentified={isIdentified}
+              liveUpdatesBaselineEntry={liveUpdatesBaselineEntry}
+              personalizationCount={personalizationCount}
+              onConsentChange={handleConsent}
+              onIdentify={handleIdentify}
+              onReset={handleReset}
+              onToggleGlobalLiveUpdates={onToggleGlobalLiveUpdates}
+            />
           }
         />
         <Route
diff --git a/implementations/web-react/src/main.tsx b/implementations/web-react/src/main.tsx
index e54713e1..362ea1a5 100644
--- a/implementations/web-react/src/main.tsx
+++ b/implementations/web-react/src/main.tsx
@@ -3,6 +3,38 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import { OptimizationProvider } from './optimization/OptimizationProvider'
+import { useOptimization } from './optimization/hooks/useOptimization'
+import { LiveUpdatesProvider } from './optimization/liveUpdates/LiveUpdatesContext'
+import { getContentfulClient } from './services/contentfulClient'
+
+function RootApp(): React.JSX.Element {
+  const { sdk, isReady } = useOptimization()
+  const [globalLiveUpdates, setGlobalLiveUpdates] = React.useState(false)
+
+  const handleToggleGlobalLiveUpdates = React.useCallback(() => {
+    setGlobalLiveUpdates((previous) => !previous)
+  }, [])
+
+  const app = (
+    <App
+      globalLiveUpdates={globalLiveUpdates}
+      onToggleGlobalLiveUpdates={handleToggleGlobalLiveUpdates}
+    />
+  )
+
+  if (!isReady || sdk === undefined) {
+    return app
+  }
+
+  return (
+    <LiveUpdatesProvider
+      globalLiveUpdates={globalLiveUpdates}
+      previewPanel={{ contentful: getContentfulClient(), optimization: sdk }}
+    >
+      {app}
+    </LiveUpdatesProvider>
+  )
+}
 
 function main(): void {
   const rootElement = document.getElementById('root')
@@ -15,7 +47,7 @@ function main(): void {
     <React.StrictMode>
       <BrowserRouter>
         <OptimizationProvider>
-          <App />
+          <RootApp />
         </OptimizationProvider>
       </BrowserRouter>
     </React.StrictMode>,

From dc8d3735ec70289507d96b32fa6380ad7d8c8ecc Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 14:43:04 +0100
Subject: [PATCH 19/20] feat: add e2e tests for offline queue and recovery
 scenarios

---
 .../e2e/offline-queue-recovery.spec.ts        | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 implementations/web-react/e2e/offline-queue-recovery.spec.ts

diff --git a/implementations/web-react/e2e/offline-queue-recovery.spec.ts b/implementations/web-react/e2e/offline-queue-recovery.spec.ts
new file mode 100644
index 00000000..b5194730
--- /dev/null
+++ b/implementations/web-react/e2e/offline-queue-recovery.spec.ts
@@ -0,0 +1,92 @@
+import { type BrowserContext, type Page, expect, test } from '@playwright/test'
+
+function parseEventsCount(text: string): number {
+  const match = /Events:\s*(\d+)/.exec(text)
+  return match?.[1] ? Number.parseInt(match[1], 10) : 0
+}
+
+async function getEventsCount(page: Page): Promise<number> {
+  const text = await page.getByTestId('events-count').innerText()
+  return parseEventsCount(text)
+}
+
+async function expectEventsToIncrease(page: Page, baselineCount: number): Promise<void> {
+  await expect
+    .poll(async () => await getEventsCount(page))
+    .toBeGreaterThan(baselineCount)
+}
+
+async function setOffline(context: BrowserContext, offline: boolean): Promise<void> {
+  await context.setOffline(offline)
+}
+
+async function waitForBaseUi(page: Page): Promise<void> {
+  await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
+  await expect(page.getByTestId('events-count')).toBeVisible()
+}
+
+test.describe('offline queue and recovery', () => {
+  test.beforeEach(async ({ context, page }) => {
+    await context.clearCookies()
+    await setOffline(context, false)
+    await page.goto('/')
+    await page.waitForLoadState('domcontentloaded')
+    await waitForBaseUi(page)
+  })
+
+  test.afterEach(async ({ context }) => {
+    await setOffline(context, false)
+  })
+
+  test('continues tracking analytics events while offline', async ({ context, page }) => {
+    const baselineCount = await getEventsCount(page)
+
+    await setOffline(context, true)
+    await page.getByTestId('link-page-two').click()
+    await expect(page.getByTestId('page-two-view')).toBeVisible()
+    await page.getByTestId('page-two-demo-cta').click()
+    await expectEventsToIncrease(page, baselineCount)
+  })
+
+  test('recovers gracefully when network is restored', async ({ context, page }) => {
+    await setOffline(context, true)
+    await page.getByTestId('link-page-two').click()
+    await expect(page.getByTestId('page-two-view')).toBeVisible()
+
+    await setOffline(context, false)
+    await page.getByTestId('link-back-home').click()
+    await waitForBaseUi(page)
+    await expect(page.getByTestId('live-updates-identify-button')).toBeVisible()
+  })
+
+  test('remains stable across rapid network state changes', async ({ context, page }) => {
+    await setOffline(context, true)
+    await setOffline(context, false)
+    await setOffline(context, true)
+    await setOffline(context, false)
+
+    await waitForBaseUi(page)
+    await expect(page.getByTestId('live-updates-identify-button')).toBeVisible()
+    const baselineCount = await getEventsCount(page)
+    await page.getByTestId('link-page-two').click()
+    await expect(page.getByTestId('page-two-view')).toBeVisible()
+    await page.getByTestId('page-two-demo-cta').click()
+    await expectEventsToIncrease(page, baselineCount)
+  })
+
+  test('queues identify event offline and flushes personalization state when online', async ({
+    context,
+    page,
+  }) => {
+    const baselineCount = await getEventsCount(page)
+
+    await setOffline(context, true)
+    await page.getByTestId('live-updates-identify-button').click()
+    await expectEventsToIncrease(page, baselineCount)
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+
+    await setOffline(context, false)
+    await expect(page.getByTestId('live-updates-reset-button')).toBeVisible()
+    await expect(page.getByTestId('identified-status')).toHaveText('Yes')
+  })
+})

From d6e903ad07a845a67a453bf3e19e6a61ad1a1fb7 Mon Sep 17 00:00:00 2001
From: Lotfi Arif <lotfi.arif@contentful.com>
Date: Fri, 27 Feb 2026 14:50:48 +0100
Subject: [PATCH 20/20] refactor: format code for readability in e2e tests and
 App component

---
 .../e2e/displays-identified-user-variants.spec.ts    | 12 ++++++++++--
 .../e2e/displays-unidentified-user-variants.spec.ts  | 12 ++++++++++--
 .../web-react/e2e/offline-queue-recovery.spec.ts     |  4 +---
 implementations/web-react/src/App.tsx                |  5 ++++-
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
index b51fea80..af40aa26 100644
--- a/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-identified-user-variants.spec.ts
@@ -26,14 +26,22 @@ test.describe('identified user', () => {
     await expect(
       continentEntry
         .getByText('This is a variant content entry for visitors from Europe.')
-        .or(continentEntry.getByText('This is a baseline content entry for visitors from any continent.')),
+        .or(
+          continentEntry.getByText(
+            'This is a baseline content entry for visitors from any continent.',
+          ),
+        ),
     ).toBeVisible()
 
     const deviceEntry = page.getByTestId('entry-text-xFwgG3oNaOcjzWiGe4vXo')
     await expect(
       deviceEntry
         .getByText('This is a variant content entry for visitors using a desktop browser.')
-        .or(deviceEntry.getByText('This is a baseline content entry for all visitors using any device.')),
+        .or(
+          deviceEntry.getByText(
+            'This is a baseline content entry for all visitors using any device.',
+          ),
+        ),
     ).toBeVisible()
   })
 
diff --git a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
index 3e033f52..85390937 100644
--- a/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
+++ b/implementations/web-react/e2e/displays-unidentified-user-variants.spec.ts
@@ -18,14 +18,22 @@ test.describe('unidentified user', () => {
     await expect(
       continentEntry
         .getByText('This is a variant content entry for visitors from Europe.')
-        .or(continentEntry.getByText('This is a baseline content entry for visitors from any continent.')),
+        .or(
+          continentEntry.getByText(
+            'This is a baseline content entry for visitors from any continent.',
+          ),
+        ),
     ).toBeVisible()
 
     const deviceEntry = page.getByTestId('entry-text-xFwgG3oNaOcjzWiGe4vXo')
     await expect(
       deviceEntry
         .getByText('This is a variant content entry for visitors using a desktop browser.')
-        .or(deviceEntry.getByText('This is a baseline content entry for all visitors using any device.')),
+        .or(
+          deviceEntry.getByText(
+            'This is a baseline content entry for all visitors using any device.',
+          ),
+        ),
     ).toBeVisible()
   })
 
diff --git a/implementations/web-react/e2e/offline-queue-recovery.spec.ts b/implementations/web-react/e2e/offline-queue-recovery.spec.ts
index b5194730..2cf5a743 100644
--- a/implementations/web-react/e2e/offline-queue-recovery.spec.ts
+++ b/implementations/web-react/e2e/offline-queue-recovery.spec.ts
@@ -11,9 +11,7 @@ async function getEventsCount(page: Page): Promise<number> {
 }
 
 async function expectEventsToIncrease(page: Page, baselineCount: number): Promise<void> {
-  await expect
-    .poll(async () => await getEventsCount(page))
-    .toBeGreaterThan(baselineCount)
+  await expect.poll(async () => await getEventsCount(page)).toBeGreaterThan(baselineCount)
 }
 
 async function setOffline(context: BrowserContext, offline: boolean): Promise<void> {
diff --git a/implementations/web-react/src/App.tsx b/implementations/web-react/src/App.tsx
index 3fcc1048..d41e0d6c 100644
--- a/implementations/web-react/src/App.tsx
+++ b/implementations/web-react/src/App.tsx
@@ -38,7 +38,10 @@ function toEntryMap(entries: ContentfulEntry[]): Map<string, ContentfulEntry> {
   return new Map(entries.map((entry) => [entry.sys.id, entry]))
 }
 
-export default function App({ globalLiveUpdates, onToggleGlobalLiveUpdates }: AppProps): JSX.Element {
+export default function App({
+  globalLiveUpdates,
+  onToggleGlobalLiveUpdates,
+}: AppProps): JSX.Element {
   const location = useLocation()
   const { sdk, isReady, error } = useOptimization()
   const { consent, profile, personalizations } = useOptimizationState(sdk?.states)