ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

package/core/modules/steps/steps.js

@@ -1,1567 +1,1567 @@
-/**
- * ProcessStepsPage Component
- *
- * - Manages a multi-step, time-tracked process workflow.
- * - Dynamically renders step-specific components based on configuration.
- * - Tracks step and process durations with local persistence support.
- * - Supports step navigation (next, previous, skip, breadcrumb, keyboard).
- * - Touchscreen support: horizontal swipe gestures navigate between steps
- *   and transient left/right arrow buttons fade in on touch for discovery.
- * - Handles process submission and optional chaining to the next process.
- * - Renders a single active step view with compact breadcrumb controls.
- */
-import { ArrowLeftOutlined, ArrowRightOutlined, CompressOutlined, ExpandOutlined, SoundOutlined } from '@ant-design/icons';
-import { Empty, Select, Spin, message } from 'antd';
-import moment from 'moment';
-import { useEffect, useRef, useState } from 'react';
-import { ExternalWindow } from '../../components';
-import { Dashboard } from '../../models';
-import * as genericComponents from './../../lib';
-import { Button, Card, Location } from './../../lib';
-import {
-  base64AudioToBlob,
-  buildGuestStepGuide,
-  extractGeminiAudio,
-  getElevenLabsApiKey,
-  getGeminiApiKey,
-  getOpenAIApiKey,
-  getSarvamApiKey,
-} from './narration';
-import { createOpenAIRealtimeSession, hasOpenAIRealtimeCredentials } from './openai-realtime';
-import { clearProgressEntry, readProgressEntry, sweepStaleProgressKeys, writeProgressEntry } from './progress-storage';
-import './steps.scss';
-
-const TOUCH_NAV_HIDE_DELAY = 2800;
-const SWIPE_DISTANCE_THRESHOLD = 60;
-const SWIPE_VERTICAL_TOLERANCE = 80;
-
-/**
- * First-step CTA labels keyed by normalized process name.
- * - Keys are the lowercased/trimmed process name returned by the backend.
- * - Missing keys fall back to the generic 'Next' label at the call site.
- * - Frozen so accidental mutation during render doesn't leak across renders.
- */
-const FIRST_STEP_LABELS = Object.freeze({
-  verification: 'Verify Profile',
-  consultation: 'Start Consultation',
-});
-
-const VOICE_PROVIDER_OPTIONS = [
-  { label: 'Gemini', value: 'gemini' },
-  { label: 'ElevenLabs', value: 'elevenlabs' },
-  { label: 'OpenAI', value: 'openai' },
-];
-
-const GEMINI_VOICE_OPTIONS = [{ label: 'Kore', value: 'Kore' }];
-const DEFAULT_GEMINI_TTS_VOICE = process.env.GEMINI_TTS_VOICE || process.env.REACT_APP_GEMINI_TTS_VOICE || GEMINI_VOICE_OPTIONS[0].value;
-const OPENAI_TTS_VOICE_OPTIONS = [
-  { label: 'Alloy', value: 'alloy' },
-  { label: 'Ash', value: 'ash' },
-  { label: 'Coral', value: 'coral' },
-  { label: 'Echo', value: 'echo' },
-  { label: 'Fable', value: 'fable' },
-  { label: 'Nova', value: 'nova' },
-  { label: 'Onyx', value: 'onyx' },
-  { label: 'Sage', value: 'sage' },
-  { label: 'Shimmer', value: 'shimmer' },
-];
-const DEFAULT_OPENAI_TTS_VOICE =
-  process.env.OPENAI_TTS_VOICE ||
-  process.env.REACT_APP_OPENAI_TTS_VOICE ||
-  process.env.OPENAI_REALTIME_VOICE ||
-  process.env.REACT_APP_OPENAI_REALTIME_VOICE ||
-  OPENAI_TTS_VOICE_OPTIONS[0].value;
-
-const ELEVENLABS_VOICE_OPTIONS = [
-  { label: 'Rachel', value: '21m00Tcm4TlvDq8ikWAM' },
-  { label: 'Adam', value: 'pNInz6obpgDQGcFmaJgB' },
-  { label: 'Bella', value: 'EXAVITQu4vr4xnSDxMaL' },
-  { label: 'Antoni', value: 'ErXwobaYiN019PkySvjV' },
-  { label: 'Josh', value: 'TxGEqnHWrfWFTfGW9XjX' },
-];
-const DEFAULT_ELEVENLABS_VOICE_ID =
-  process.env.ELEVENLABS_VOICE_ID ||
-  process.env.ELEVEN_LABS_VOICE_ID ||
-  process.env.REACT_APP_ELEVENLABS_VOICE_ID ||
-  ELEVENLABS_VOICE_OPTIONS[0].value;
-
-const SARVAM_VOICE_OPTIONS = [
-  { label: 'Anushka', value: 'anushka' },
-  { label: 'Manisha', value: 'manisha' },
-  { label: 'Vidya', value: 'vidya' },
-  { label: 'Arya', value: 'arya' },
-  { label: 'Karun', value: 'karun' },
-  { label: 'Hitesh', value: 'hitesh' },
-];
-
-const ELEVENLABS_TTS_API_BASE_URL =
-  process.env.ELEVENLABS_TTS_API_BASE_URL || process.env.REACT_APP_ELEVENLABS_TTS_API_BASE_URL || 'https://api.elevenlabs.io/v1/text-to-speech';
-const ELEVENLABS_MODEL_ID = process.env.ELEVENLABS_MODEL_ID || process.env.REACT_APP_ELEVENLABS_MODEL_ID || 'eleven_multilingual_v2';
-const ELEVENLABS_OUTPUT_FORMAT = process.env.ELEVENLABS_OUTPUT_FORMAT || process.env.REACT_APP_ELEVENLABS_OUTPUT_FORMAT || 'mp3_44100_128';
-const GEMINI_TTS_MODEL = process.env.GEMINI_TTS_MODEL || process.env.REACT_APP_GEMINI_TTS_MODEL || 'gemini-2.5-flash-preview-tts';
-const GEMINI_TTS_API_BASE_URL =
-  process.env.GEMINI_API_BASE_URL || process.env.REACT_APP_GEMINI_API_BASE_URL || 'https://generativelanguage.googleapis.com/v1beta';
-const OPENAI_TTS_ENDPOINT = process.env.OPENAI_TTS_ENDPOINT || process.env.REACT_APP_OPENAI_TTS_ENDPOINT || 'https://api.openai.com/v1/audio/speech';
-const OPENAI_TTS_MODEL = process.env.OPENAI_TTS_MODEL || process.env.REACT_APP_OPENAI_TTS_MODEL || 'gpt-4o-mini-tts';
-const OPENAI_TTS_FORMAT = process.env.OPENAI_TTS_FORMAT || process.env.REACT_APP_OPENAI_TTS_FORMAT || 'mp3';
-const SARVAM_TTS_ENDPOINT = process.env.SARVAM_TTS_ENDPOINT || process.env.REACT_APP_SARVAM_TTS_ENDPOINT || 'https://api.sarvam.ai/text-to-speech';
-const SARVAM_TTS_MODEL = process.env.SARVAM_TTS_MODEL || process.env.REACT_APP_SARVAM_TTS_MODEL || 'bulbul:v2';
-const SARVAM_TARGET_LANGUAGE_CODE = process.env.SARVAM_TARGET_LANGUAGE_CODE || process.env.REACT_APP_SARVAM_TARGET_LANGUAGE_CODE || 'en-IN';
-const SARVAM_OUTPUT_AUDIO_CODEC = process.env.SARVAM_OUTPUT_AUDIO_CODEC || process.env.REACT_APP_SARVAM_OUTPUT_AUDIO_CODEC || 'wav';
-const NARRATION_CONTROLS_ENABLED = false;
-
-export default function ProcessStepsPage({ match, CustomComponents = {}, ...props }) {
-  const allComponents = { ...genericComponents, ...CustomComponents };
-  const GuestInfoComponent = allComponents.EntryInfo;
-
-  const [loading, setLoading] = useState(false);
-  const [steps, setSteps] = useState([]);
-  const [processName, setProcessName] = useState(null);
-  const [activeStep, setActiveStep] = useState(0);
-  const [resumableStep, setResumableStep] = useState(null);
-  const [isStepCompleted, setIsStepCompleted] = useState(false);
-
-  const [nextProcessId, setNextProcessId] = useState(null);
-  const [previousProcessId, setPreviousProcessId] = useState(null);
-  const [stepStartTime, setStepStartTime] = useState(null);
-  const [processStartTime, setProcessStartTime] = useState(null);
-  const [processTimings, setProcessTimings] = useState([]);
-  const [showExternalWindow, setShowExternalWindow] = useState(false);
-  const [externalWin, setExternalWin] = useState(null);
-  const [autoNarration, setAutoNarration] = useState(NARRATION_CONTROLS_ENABLED);
-  const [voiceProvider, setVoiceProvider] = useState(
-    process.env.REACT_APP_STEP_TTS_PROVIDER && process.env.REACT_APP_STEP_TTS_PROVIDER !== 'browser'
-      ? process.env.REACT_APP_STEP_TTS_PROVIDER
-      : 'gemini'
-  );
-  const [browserVoiceOptions, setBrowserVoiceOptions] = useState([]);
-  const [voiceSelections, setVoiceSelections] = useState({
-    browser: process.env.REACT_APP_STEP_BROWSER_VOICE || process.env.REACT_APP_STEP_TTS_VOICE || '',
-    gemini: DEFAULT_GEMINI_TTS_VOICE,
-    elevenlabs: DEFAULT_ELEVENLABS_VOICE_ID,
-    openai: DEFAULT_OPENAI_TTS_VOICE,
-    sarvam: process.env.REACT_APP_SARVAM_SPEAKER || SARVAM_VOICE_OPTIONS[0].value,
-  });
-  const [stepSlideDirection, setStepSlideDirection] = useState('forward');
-  const [showNextProcessAction, setShowNextProcessAction] = useState(false);
-  const [isStepFullscreen, setIsStepFullscreen] = useState(false);
-  const [realtimeStatus, setRealtimeStatus] = useState('idle');
-  const [isTouchDevice, setIsTouchDevice] = useState(false);
-  const [touchNavVisible, setTouchNavVisible] = useState(false);
-
-  const narrationUtteranceRef = useRef(null);
-  const narrationAudioRef = useRef(null);
-  const narrationAudioUrlRef = useRef(null);
-  const narrationFallbackNoticeRef = useRef(false);
-  const realtimeSessionRef = useRef(null);
-  const fullscreenViewportRef = useRef(null);
-  const touchStartRef = useRef(null);
-  const touchNavHideTimeoutRef = useRef(null);
-
-  const urlParams = Location.search();
-  const isConsultationMode = String(urlParams?.consultation).toLowerCase() === 'true';
-  let processId = urlParams.processId;
-  const [currentProcessId, setCurrentProcessId] = useState(processId);
-
-  /**
-   * Storage scope for per-guest progress.
-   * - The localStorage keys combine the process and the guest reference so
-   *   guest A's resume marker cannot appear for guest B.
-   * - Sources tried in order: query params (`opb_id`, `reference_id`, `opno`,
-   *   `reference_number`), then React Router `match.params`, then the final
-   *   pathname segment. Only when none produce a non-empty value does the
-   *   scope collapse to `anonymous` — which is the symptom of "stores step
-   *   but not per guest" because all guests then share one key.
-   */
-  const guestReference = (() => {
-    const fromQuery = urlParams?.opb_id || urlParams?.reference_id || urlParams?.opno || urlParams?.reference_number;
-    if (fromQuery) return String(fromQuery);
-
-    const params = match?.params || {};
-    const paramCandidates = [params.opb_id, params.reference_id, params.opno, params.reference_number, params.id];
-    const fromRoute = paramCandidates.find((value) => value != null && value !== '');
-    if (fromRoute) return String(fromRoute);
-
-    if (typeof window !== 'undefined' && window.location?.pathname) {
-      const segments = window.location.pathname.split('/').filter(Boolean);
-      const last = segments[segments.length - 1];
-      if (last) return String(last);
-    }
-
-    return 'anonymous';
-  })();
-  const timingsStorageKey = `processTimings_${currentProcessId}_${guestReference}`;
-  const activeStepStorageKey = `processActiveStep_${currentProcessId}_${guestReference}`;
-
-  // Load process details based on the current process ID
-  useEffect(() => {
-    sweepStaleProgressKeys();
-
-    loadProcess(currentProcessId);
-
-    /**
-     * Both the key AND the stored value are scoped to the guest. A read is
-     * only accepted when the value's `guestRef` matches the current guest;
-     * any mismatch (or a legacy unwrapped value from before this change) is
-     * treated as "no saved progress" so guest A's data can never appear for
-     * guest B even if a key collision somehow occurred.
-     */
-    const savedTimingsEntry = readProgressEntry(timingsStorageKey);
-    const savedTimings =
-      savedTimingsEntry && savedTimingsEntry.guestRef === guestReference && Array.isArray(savedTimingsEntry.timings) ? savedTimingsEntry.timings : [];
-    setProcessTimings(savedTimings);
-
-    const savedStepEntry = readProgressEntry(activeStepStorageKey);
-    const parsedStep = savedStepEntry && savedStepEntry.guestRef === guestReference ? Number(savedStepEntry.step) : NaN;
-    const savedActiveStep = Number.isFinite(parsedStep) && parsedStep > 0 ? parsedStep : 0;
-    setResumableStep(savedActiveStep > 0 ? savedActiveStep : null);
-
-    setProcessStartTime(Date.now());
-    setStepStartTime(Date.now());
-    setShowNextProcessAction(false);
-    setActiveStep(0);
-  }, [currentProcessId, guestReference]);
-
-  /**
-   * The active step is persisted inline in `gotoStep` rather than via a
-   * useEffect — running it as an effect captured `activeStepStorageKey` from
-   * a closure that could go stale during URL changes, allowing one guest's
-   * progress to be written under another guest's key. Writing in `gotoStep`
-   * happens synchronously with the user action using the current render's
-   * key, so it can never target a different guest than the one interacting.
-   */
-
-  /**
-   * Sync the loaded process name into the address bar.
-   * - Mirrors `processName` into a `process` query parameter so deep-links and
-   *   refreshes carry the human-readable process label.
-   * - Uses `window.history.replaceState` to avoid a navigation event, which
-   *   keeps React Router state and component instances stable.
-   * - Removes the param when `processName` is null/empty so stale values do
-   *   not linger after a process clears.
-   */
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const params = new URLSearchParams(window.location.search);
-    let changed = false;
-
-    const trimmedName = typeof processName === 'string' ? processName.trim() : '';
-    if (trimmedName) {
-      if (params.get('process') !== trimmedName) {
-        params.set('process', trimmedName);
-        changed = true;
-      }
-    } else if (params.has('process')) {
-      params.delete('process');
-      changed = true;
-    }
-
-    /**
-     * Mirror `currentProcessId` to the `processId` query param so previous /
-     * next process navigation reflects in the URL (e.g. when jumping from
-     * Verification → Consultation, the address bar should switch from
-     * `processId=1` to `processId=2`). Without this, deep-links and refreshes
-     * would still resolve to the originally loaded process.
-     */
-    const processIdString = currentProcessId != null ? String(currentProcessId) : '';
-    if (processIdString) {
-      if (params.get('processId') !== processIdString) {
-        params.set('processId', processIdString);
-        changed = true;
-      }
-    } else if (params.has('processId')) {
-      params.delete('processId');
-      changed = true;
-    }
-
-    if (!changed) {
-      return;
-    }
-
-    const search = params.toString();
-    const newUrl = `${window.location.pathname}${search ? `?${search}` : ''}${window.location.hash || ''}`;
-    window.history.replaceState(window.history.state, '', newUrl);
-  }, [processName, currentProcessId]);
-
-  //// Reset step start time whenever the active step changes
-
-  useEffect(() => {
-    setStepStartTime(Date.now());
-  }, [activeStep]);
-
-  // Check whether the current step is completed or mandatory
-  useEffect(() => {
-    if (steps.length > 0) {
-      setIsStepCompleted(steps[activeStep]?.is_mandatory !== true);
-    }
-  }, [activeStep, steps]);
-
-  useEffect(() => {
-    if (steps[activeStep]?.order_seqtype !== 'E') {
-      setShowNextProcessAction(false);
-    }
-  }, [activeStep, steps]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined' || !window.speechSynthesis) {
-      return undefined;
-    }
-
-    const updateBrowserVoices = () => {
-      const voices = window.speechSynthesis
-        .getVoices()
-        .map((voice) => ({
-          label: `${voice.name} (${voice.lang})`,
-          value: voice.voiceURI || voice.name,
-        }))
-        .sort((voiceA, voiceB) => voiceA.label.localeCompare(voiceB.label));
-
-      setBrowserVoiceOptions(voices);
-
-      if (voices.length) {
-        setVoiceSelections((oldSelections) => {
-          if (oldSelections.browser) {
-            return oldSelections;
-          }
-
-          return {
-            ...oldSelections,
-            browser: voices[0].value,
-          };
-        });
-      }
-    };
-
-    updateBrowserVoices();
-    if (typeof window.speechSynthesis.addEventListener === 'function') {
-      window.speechSynthesis.addEventListener('voiceschanged', updateBrowserVoices);
-    } else {
-      window.speechSynthesis.onvoiceschanged = updateBrowserVoices;
-    }
-
-    return () => {
-      if (typeof window.speechSynthesis.removeEventListener === 'function') {
-        window.speechSynthesis.removeEventListener('voiceschanged', updateBrowserVoices);
-      } else if (window.speechSynthesis.onvoiceschanged === updateBrowserVoices) {
-        window.speechSynthesis.onvoiceschanged = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    narrationFallbackNoticeRef.current = false;
-  }, [voiceProvider]);
-
-  useEffect(() => {
-    const isSupportedProvider = VOICE_PROVIDER_OPTIONS.some((option) => option.value === voiceProvider);
-
-    if (!isSupportedProvider) {
-      setVoiceProvider('gemini');
-    }
-  }, [voiceProvider]);
-
-  useEffect(() => {
-    stopNarration();
-  }, [voiceProvider, voiceSelections.browser, voiceSelections.gemini, voiceSelections.elevenlabs, voiceSelections.openai, voiceSelections.sarvam]);
-
-  useEffect(() => {
-    const providerVoices =
-      voiceProvider === 'gemini'
-        ? GEMINI_VOICE_OPTIONS
-        : voiceProvider === 'elevenlabs'
-          ? ELEVENLABS_VOICE_OPTIONS
-          : voiceProvider === 'openai'
-            ? OPENAI_TTS_VOICE_OPTIONS
-            : SARVAM_VOICE_OPTIONS;
-
-    if (!providerVoices.length) {
-      return;
-    }
-
-    setVoiceSelections((oldSelections) => {
-      if (oldSelections[voiceProvider]) {
-        return oldSelections;
-      }
-
-      return {
-        ...oldSelections,
-        [voiceProvider]: providerVoices[0].value,
-      };
-    });
-  }, [voiceProvider, browserVoiceOptions]);
-
-  // Save updated process timings to state and localStorage
-  const saveTimings = (updated) => {
-    const safeTimings = Array.isArray(updated) ? updated : [];
-    setProcessTimings(safeTimings);
-    writeProgressEntry(timingsStorageKey, { guestRef: guestReference, timings: safeTimings });
-  };
-  // Record time spent on the current step
-
-  const recordStepTime = (status = 'completed') => {
-    // Exit if step start time or step data is missing
-
-    if (!stepStartTime || !steps[activeStep]) return processTimings;
-    // Capture end time and calculate duration
-
-    const endTime = Date.now();
-    const duration = endTime - stepStartTime;
-    const stepId = steps[activeStep].step_id;
-    // Clone existing timings
-
-    const previousTimings = Array.isArray(processTimings) ? processTimings : [];
-    const updated = [...previousTimings];
-    const index = updated.findIndex((t) => t.step_id === stepId);
-    // Create timing entry for the step
-
-    const entry = {
-      step_id: stepId,
-      start_time: moment(stepStartTime).format('DD-MM-YYYY HH:mm:ss'),
-      end_time: moment(endTime).format('DD-MM-YYYY HH:mm:ss'),
-      duration,
-      status,
-    };
-    // Update existing entry or add a new one
-    if (index > -1) {
-      updated[index] = { ...updated[index], ...entry, duration: updated[index].duration + duration };
-    } else {
-      updated.push(entry);
-    }
-
-    return updated;
-  };
-
-  /**
-   * @param {*} processId
-   *
-   * Process Loading
-   * - Fetches process details and step configuration using the process ID.
-   * - Manages loading state during the API call.
-   * - Stores step data and prepares next process details if available.
-   * - Handles API errors and maintains UI stability.
-   */
-  async function loadProcess(processId) {
-    setLoading(true);
-    setNextProcessId(null);
-    setPreviousProcessId(null);
-
-    try {
-      const result = await Dashboard.loadProcess(processId);
-
-      setSteps(result?.data?.steps || []);
-      setProcessName(result?.data?.process_name ?? null);
-      if (result?.data?.next_process_id) setNextProcessId(result.data);
-      if (result?.data?.previous_process_id) setPreviousProcessId(result.data);
-    } catch (e) {
-      console.error('Error loading process steps:', e);
-    } finally {
-      setLoading(false);
-    }
-  }
-  /**
-   * @param {*} finalTimings
-   *
-   * Process Submission
-   * - Builds payload with process metadata, reference details, and step timings.
-   * - Submits process completion data to the backend.
-   * - Clears stored timings on successful submission.
-   * - Persists timing data locally if submission fails.
-   */
-  const handleProcessSubmit = async (finalTimings) => {
-    const payload = {
-      process_id: currentProcessId,
-      status: 'completed',
-      reference_id: urlParams?.opb_id || urlParams?.reference_id,
-      reference_number: urlParams?.opno || urlParams?.reference_number,
-      mode: urlParams?.mode,
-      process: {
-        process_start_time: moment(processStartTime).format('DD-MM-YYYY HH:mm'),
-        process_end_time: moment().format('DD-MM-YYYY HH:mm'),
-        steps: finalTimings,
-      },
-    };
-
-    try {
-      const response = await Dashboard.processLog(payload);
-
-      if (response.success) {
-        clearProgressEntry(timingsStorageKey);
-        clearProgressEntry(activeStepStorageKey);
-        setProcessTimings([]);
-        setResumableStep(null);
-        return true;
-      }
-    } catch (e) {
-      console.error('Error:', e);
-      saveTimings(finalTimings);
-    }
-    return false;
-  };
-  /**
-   * @param {number} index
-   * @param {string} status
-   *
-   * Step Navigation
-   * - Records time spent on the current step.
-   * - Saves updated step timing data.
-   * - Navigates to the specified step index.
-   */
-  const gotoStep = (index, status = 'completed') => {
-    if (!steps.length) {
-      return;
-    }
-
-    const nextIndex = Math.max(0, Math.min(index, steps.length - 1));
-
-    if (nextIndex === activeStep) {
-      return;
-    }
-
-    setStepSlideDirection(nextIndex > activeStep ? 'forward' : 'backward');
-
-    const updated = recordStepTime(status);
-    saveTimings(updated);
-    setActiveStep(nextIndex);
-
-    /**
-     * Persist the resume marker synchronously here, not in a useEffect. The
-     * current render's `activeStepStorageKey` is guaranteed to belong to the
-     * guest the user is interacting with, so the write cannot leak to a
-     * different guest's key. Step 0 is the entry point — clear any marker
-     * so a returning visitor at step 0 does not see a stale banner.
-     */
-    if (nextIndex > 0 && currentProcessId) {
-      writeProgressEntry(activeStepStorageKey, { guestRef: guestReference, step: nextIndex });
-    } else if (nextIndex === 0) {
-      clearProgressEntry(activeStepStorageKey);
-    }
-  };
-  /**
-   * Navigate to the next step
-   * - Records timing data and advances step index by one.
-   */
-  const handleNext = () => gotoStep(activeStep + 1);
-  /**
-   * Navigate to the previous step
-   * - Records timing data and moves to the previous step.
-   */
-  const handlePrevious = () => gotoStep(activeStep - 1);
-  /**
-   * Skip current step
-   * - Records timing with skipped status.
-   * - Moves to the next step.
-   */
-  const handleSkip = () => gotoStep(activeStep + 1, 'skipped');
-  /**
-   * Breadcrumb Navigation
-   * - Navigates directly to the selected step.
-   * - Records timing data for the current step.
-   */
-  const handleTimelineClick = (i) => gotoStep(i);
-  /**
-   * Resume Handlers
-   * - `handleResume` jumps to the persisted step (clamped to current step
-   *   range) so a returning user picks up where they left off.
-   * - `dismissResume` discards the saved marker so the banner does not appear
-   *   again for this process.
-   */
-  const handleResume = () => {
-    if (resumableStep == null || !steps.length) {
-      return;
-    }
-    const target = Math.max(0, Math.min(resumableStep, steps.length - 1));
-    setResumableStep(null);
-    if (target !== activeStep) {
-      gotoStep(target);
-    }
-  };
-  const dismissResume = () => {
-    setResumableStep(null);
-    try {
-      clearProgressEntry(activeStepStorageKey);
-    } catch (error) {
-      console.warn('Unable to clear resume marker from local storage.', error);
-    }
-  };
-  /**
-   * Process Completion
-   * - Records final step timing.
-   * - Submits process completion data.
-   * - Navigates back on successful completion.
-   */
-  const handleFinish = async () => {
-    const final = recordStepTime();
-    const success = await handleProcessSubmit(final);
-    if (success && !nextProcessId) props.history?.goBack();
-    return success;
-  };
-  /**
-   * Start Next Process
-   * - Records final timing of the current process.
-   * - Submits current process data.
-   * - Loads and initializes the next linked process.
-   */
-  const handleStartNextProcess = async () => {
-    const final = recordStepTime();
-    if (await handleProcessSubmit(final)) {
-      await loadProcess(nextProcessId.next_process_id);
-      setCurrentProcessId(nextProcessId.next_process_id);
-      setActiveStep(0);
-      setShowExternalWindow(true);
-    }
-  };
-  /**
-   * Go Back to Previous Process
-   * - Loads the previously linked process for the current guest.
-   * - Does NOT submit the current process; this is a "go back" navigation,
-   *   not a completion. Step timings collected so far stay in localStorage
-   *   under the current process's scoped key in case the user returns.
-   * - Updates `currentProcessId` which triggers the load effect to refresh
-   *   process data, reset `activeStep` to 0, and re-derive storage scope.
-   */
-  const handleStartPreviousProcess = async () => {
-    if (!previousProcessId?.previous_process_id) {
-      return;
-    }
-    await loadProcess(previousProcessId.previous_process_id);
-    setCurrentProcessId(previousProcessId.previous_process_id);
-    setActiveStep(0);
-  };
-
-  function clearNarrationAudio() {
-    if (narrationAudioRef.current) {
-      narrationAudioRef.current.pause();
-      narrationAudioRef.current.src = '';
-      narrationAudioRef.current = null;
-    }
-
-    if (narrationAudioUrlRef.current && typeof window !== 'undefined' && window.URL) {
-      window.URL.revokeObjectURL(narrationAudioUrlRef.current);
-      narrationAudioUrlRef.current = null;
-    }
-  }
-
-  function stopNarration() {
-    clearNarrationAudio();
-
-    if (typeof window !== 'undefined' && window.speechSynthesis) {
-      window.speechSynthesis.cancel();
-    }
-
-    narrationUtteranceRef.current = null;
-  }
-
-  function buildRealtimeInstructions() {
-    const step = steps[activeStep];
-    const stepName = step?.step_name || `Step ${activeStep + 1}`;
-    const stepDescription = step?.step_description || 'No additional description.';
-
-    return [
-      'You are a warm, concise healthcare concierge assisting a guest during a guided process.',
-      `Current step: ${stepName}.`,
-      `Step description: ${stepDescription}.`,
-      'Answer in short, helpful sentences and keep the guest calm and informed.',
-      'Avoid medical diagnosis or treatment advice.',
-    ].join(' ');
-  }
-
-  async function startRealtimeConversation() {
-    if (realtimeSessionRef.current) {
-      return;
-    }
-
-    const session = createOpenAIRealtimeSession({
-      instructions: buildRealtimeInstructions(),
-      onStatus: (status) => {
-        setRealtimeStatus(status);
-      },
-      onError: (error) => {
-        console.error('OpenAI Realtime error:', error);
-        message.error(error?.message || 'OpenAI Realtime connection failed.');
-      },
-    });
-
-    realtimeSessionRef.current = session;
-    try {
-      await session.connect();
-    } catch (error) {
-      realtimeSessionRef.current = null;
-    }
-  }
-
-  function stopRealtimeConversation() {
-    if (realtimeSessionRef.current) {
-      realtimeSessionRef.current.disconnect();
-      realtimeSessionRef.current = null;
-    }
-    setRealtimeStatus('idle');
-  }
-
-  function playAudioBlob(audioBlob) {
-    return new Promise((resolve, reject) => {
-      if (typeof window === 'undefined' || !window.Audio || !window.URL) {
-        reject(new Error('Audio playback is not available.'));
-        return;
-      }
-
-      const audioUrl = window.URL.createObjectURL(audioBlob);
-      const audio = new window.Audio(audioUrl);
-
-      narrationAudioRef.current = audio;
-      narrationAudioUrlRef.current = audioUrl;
-
-      const cleanup = () => {
-        if (narrationAudioRef.current === audio) {
-          narrationAudioRef.current = null;
-        }
-
-        if (narrationAudioUrlRef.current === audioUrl) {
-          window.URL.revokeObjectURL(audioUrl);
-          narrationAudioUrlRef.current = null;
-        }
-      };
-
-      audio.onended = () => {
-        cleanup();
-        resolve();
-      };
-
-      audio.onpause = () => {
-        cleanup();
-        resolve();
-      };
-
-      audio.onerror = () => {
-        cleanup();
-        reject(new Error('Audio playback failed.'));
-      };
-
-      audio.play().catch((error) => {
-        cleanup();
-        reject(error);
-      });
-    });
-  }
-
-  function speakWithBrowser(text) {
-    return new Promise((resolve, reject) => {
-      if (typeof window === 'undefined' || !window.speechSynthesis || !window.SpeechSynthesisUtterance) {
-        reject(new Error('Speech synthesis is not available.'));
-        return;
-      }
-
-      const utterance = new window.SpeechSynthesisUtterance(text);
-      utterance.lang = process.env.REACT_APP_STEP_TTS_LANG || 'en-US';
-
-      const rate = Number(process.env.REACT_APP_STEP_TTS_RATE || 1);
-      const pitch = Number(process.env.REACT_APP_STEP_TTS_PITCH || 1);
-
-      utterance.rate = Number.isFinite(rate) ? rate : 1;
-      utterance.pitch = Number.isFinite(pitch) ? pitch : 1;
-
-      const selectedBrowserVoice = voiceSelections.browser;
-      if (selectedBrowserVoice) {
-        const browserVoice = window.speechSynthesis.getVoices().find((voice) => (voice.voiceURI || voice.name) === selectedBrowserVoice);
-
-        if (browserVoice) {
-          utterance.voice = browserVoice;
-        }
-      }
-
-      utterance.onend = () => {
-        if (narrationUtteranceRef.current === utterance) {
-          narrationUtteranceRef.current = null;
-        }
-        resolve();
-      };
-
-      utterance.onerror = () => {
-        if (narrationUtteranceRef.current === utterance) {
-          narrationUtteranceRef.current = null;
-        }
-        reject(new Error('Browser narration failed.'));
-      };
-
-      narrationUtteranceRef.current = utterance;
-      window.speechSynthesis.speak(utterance);
-    });
-  }
-
-  async function synthesizeGeminiAudio(text) {
-    const apiKey = getGeminiApiKey();
-
-    if (!apiKey) {
-      throw new Error('Gemini API key is missing.');
-    }
-
-    const selectedVoiceName = voiceSelections.gemini || DEFAULT_GEMINI_TTS_VOICE;
-    const endpoint = `${GEMINI_TTS_API_BASE_URL}/models/${GEMINI_TTS_MODEL}:generateContent?key=${encodeURIComponent(apiKey)}`;
-    const response = await fetch(endpoint, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        contents: [
-          {
-            role: 'user',
-            parts: [{ text }],
-          },
-        ],
-        generationConfig: {
-          responseModalities: ['AUDIO'],
-          speechConfig: {
-            voiceConfig: {
-              prebuiltVoiceConfig: {
-                voiceName: selectedVoiceName,
-              },
-            },
-          },
-        },
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`Gemini TTS request failed with status ${response.status}.`);
-    }
-
-    const payload = await response.json();
-    const audio = extractGeminiAudio(payload);
-
-    if (!audio || !audio.data) {
-      throw new Error('Gemini did not return audio data.');
-    }
-
-    return base64AudioToBlob(audio.data, audio.mimeType || 'audio/wav');
-  }
-
-  async function synthesizeOpenAIAudio(text) {
-    const apiKey = getOpenAIApiKey();
-
-    if (!apiKey) {
-      throw new Error('OpenAI API key is missing.');
-    }
-
-    const selectedVoice = voiceSelections.openai || DEFAULT_OPENAI_TTS_VOICE;
-    const response = await fetch(OPENAI_TTS_ENDPOINT, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${apiKey}`,
-      },
-      body: JSON.stringify({
-        model: OPENAI_TTS_MODEL,
-        voice: selectedVoice,
-        input: text,
-        response_format: OPENAI_TTS_FORMAT,
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`OpenAI TTS request failed with status ${response.status}.`);
-    }
-
-    return response.blob();
-  }
-
-  async function synthesizeElevenLabsAudio(text) {
-    const apiKey = getElevenLabsApiKey();
-
-    if (!apiKey) {
-      throw new Error('ElevenLabs API key is missing.');
-    }
-
-    const selectedVoiceId = voiceSelections.elevenlabs || DEFAULT_ELEVENLABS_VOICE_ID;
-    const endpoint = `${ELEVENLABS_TTS_API_BASE_URL}/${encodeURIComponent(selectedVoiceId)}/stream?output_format=${encodeURIComponent(
-      ELEVENLABS_OUTPUT_FORMAT
-    )}`;
-    const response = await fetch(endpoint, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'audio/mpeg',
-        'xi-api-key': apiKey,
-      },
-      body: JSON.stringify({
-        text,
-        model_id: ELEVENLABS_MODEL_ID,
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`ElevenLabs TTS request failed with status ${response.status}.`);
-    }
-
-    return response.blob();
-  }
-
-  async function synthesizeSarvamAudio(text) {
-    const apiKey = getSarvamApiKey();
-
-    if (!apiKey) {
-      throw new Error('Sarvam API key is missing.');
-    }
-
-    const selectedSpeaker = voiceSelections.sarvam || SARVAM_VOICE_OPTIONS[0].value;
-    const response = await fetch(SARVAM_TTS_ENDPOINT, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'api-subscription-key': apiKey,
-      },
-      body: JSON.stringify({
-        text,
-        target_language_code: SARVAM_TARGET_LANGUAGE_CODE,
-        model: SARVAM_TTS_MODEL,
-        speaker: selectedSpeaker,
-        output_audio_codec: SARVAM_OUTPUT_AUDIO_CODEC,
-      }),
-    });
-
-    const payload = await response.json().catch(() => null);
-
-    if (!response.ok) {
-      throw new Error(`Sarvam TTS request failed with status ${response.status}.`);
-    }
-
-    const audioBase64 = payload?.audios?.[0];
-    if (!audioBase64) {
-      throw new Error('Sarvam did not return any audio data.');
-    }
-
-    const codec = (SARVAM_OUTPUT_AUDIO_CODEC || '').toLowerCase();
-    const mimeType = codec === 'mp3' ? 'audio/mpeg' : 'audio/wav';
-
-    return base64AudioToBlob(audioBase64, mimeType);
-  }
-
-  async function speakText(text) {
-    if (!text || typeof window === 'undefined') {
-      return;
-    }
-
-    stopNarration();
-
-    if (voiceProvider === 'gemini') {
-      const geminiAudio = await synthesizeGeminiAudio(text);
-      await playAudioBlob(geminiAudio);
-      return;
-    }
-
-    if (voiceProvider === 'elevenlabs') {
-      const elevenLabsAudio = await synthesizeElevenLabsAudio(text);
-      await playAudioBlob(elevenLabsAudio);
-      return;
-    }
-
-    if (voiceProvider === 'openai') {
-      const openAiAudio = await synthesizeOpenAIAudio(text);
-      await playAudioBlob(openAiAudio);
-      return;
-    }
-
-    if (voiceProvider === 'sarvam') {
-      const sarvamAudio = await synthesizeSarvamAudio(text);
-      await playAudioBlob(sarvamAudio);
-      return;
-    }
-
-    throw new Error('Browser narration is disabled. Use Gemini, ElevenLabs, or OpenAI.');
-  }
-
-  async function speakCurrentStep() {
-    const step = steps[activeStep];
-    const guide = buildGuestStepGuide(step, activeStep, steps.length);
-
-    try {
-      await speakText(guide.narration);
-    } catch (error) {
-      if (!narrationFallbackNoticeRef.current) {
-        const providerLabel =
-          voiceProvider === 'gemini'
-            ? 'Gemini'
-            : voiceProvider === 'elevenlabs'
-              ? 'ElevenLabs'
-              : voiceProvider === 'openai'
-                ? 'OpenAI'
-                : 'Selected provider';
-        message.warning(`${providerLabel} narration failed.`);
-        narrationFallbackNoticeRef.current = true;
-      }
-
-      message.error(error?.message || 'Unable to play narration for this step.');
-    }
-  }
-
-  async function toggleStepFullscreen() {
-    if (typeof document === 'undefined') {
-      return;
-    }
-
-    const targetElement = fullscreenViewportRef.current;
-
-    if (!targetElement || !targetElement.requestFullscreen) {
-      return;
-    }
-
-    try {
-      if (document.fullscreenElement === targetElement) {
-        await document.exitFullscreen();
-        return;
-      }
-
-      if (document.fullscreenElement) {
-        await document.exitFullscreen();
-      }
-
-      await targetElement.requestFullscreen();
-    } catch (error) {
-      console.error('Failed to toggle step fullscreen mode:', error);
-    }
-  }
-  /**
-   * Dynamic Step Renderer
-   * - Resolves and renders step-specific components dynamically.
-   * - Passes configuration, parameters, and handlers to the component.
-   * - Handles missing steps or components gracefully.
-   */
-  /**
-   * Render the active step's dynamic component.
-   *
-   * Intentionally a plain function (not a component) called inline as
-   * `{renderDynamicStep()}`. Defining it as a component inside the parent's
-   * render body creates a fresh component *type* on every re-render — React
-   * then unmounts and remounts the step component on every parent state
-   * change (touchNavVisible, stepSlideDirection, activeStep timer, etc.),
-   * which caused visible re-render/jitter during swipe navigation. Evaluating
-   * it as a function just yields JSX for the real step Component, whose type
-   * is stable, so React reconciles in place.
-   */
-  const renderDynamicStep = () => {
-    const step = steps[activeStep];
-    if (!step) return <Empty description="No step selected" />;
-
-    const Component = allComponents[step.related_page];
-    if (!Component) return <Empty description={`Component "${step.related_page}" not found`} />;
-
-    return <Component {...step.config} {...props} step={step} params={urlParams} onStepComplete={() => setIsStepCompleted(true)} />;
-  };
-
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === 'ArrowLeft' && activeStep > 0) {
-        handlePrevious();
-      }
-
-      if (event.key === 'ArrowRight' && activeStep < steps.length - 1) {
-        handleNext();
-      }
-    };
-
-    // main window (document!)
-    document.addEventListener('keydown', handleKeyDown);
-
-    // external window (document!)
-    if (externalWin && externalWin.document) {
-      externalWin.document.addEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-
-      if (externalWin && externalWin.document) {
-        externalWin.document.removeEventListener('keydown', handleKeyDown);
-      }
-    };
-  }, [activeStep, steps, externalWin]);
-
-  /**
-   * Touch-device detection.
-   * - Runs once on mount.
-   * - Uses `matchMedia('(pointer: coarse)')` as the primary signal because it
-   *   targets the actual input hardware (covers touch laptops correctly) and
-   *   falls back to `ontouchstart` / `navigator.maxTouchPoints` for older
-   *   browsers.
-   * - When neither signal matches, the effect bails out and `isTouchDevice`
-   *   stays false so desktop renders without any touch-only UI.
-   */
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return undefined;
-    }
-
-    const hasCoarsePointer = typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
-    const hasTouch = 'ontouchstart' in window || (typeof navigator !== 'undefined' && navigator.maxTouchPoints > 0);
-
-    if (!hasCoarsePointer && !hasTouch) {
-      return undefined;
-    }
-
-    setIsTouchDevice(true);
-  }, []);
-
-  /**
-   * Show the floating prev/next arrow buttons and reset their auto-hide timer.
-   * - Any pending hide timeout is cleared so a rapid sequence of touches keeps
-   *   the arrows on-screen continuously instead of flickering.
-   * - A fresh timeout is scheduled for TOUCH_NAV_HIDE_DELAY so the arrows fade
-   *   away once the user stops interacting, keeping the step content clear.
-   */
-  const revealTouchNav = () => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    setTouchNavVisible(true);
-
-    if (touchNavHideTimeoutRef.current) {
-      window.clearTimeout(touchNavHideTimeoutRef.current);
-    }
-
-    touchNavHideTimeoutRef.current = window.setTimeout(() => {
-      setTouchNavVisible(false);
-      touchNavHideTimeoutRef.current = null;
-    }, TOUCH_NAV_HIDE_DELAY);
-  };
-
-  /**
-   * onTouchStart for the stage body.
-   * - Records the initial touch position so handleStageTouchEnd can measure
-   *   the swipe delta.
-   * - Also reveals the side arrows immediately, giving the user a visible
-   *   navigation affordance as soon as they touch the screen.
-   */
-  const handleStageTouchStart = (event) => {
-    if (!isTouchDevice || !event.touches || !event.touches.length) {
-      return;
-    }
-
-    const touch = event.touches[0];
-    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
-    revealTouchNav();
-  };
-
-  /**
-   * onTouchEnd for the stage body.
-   * - Computes the horizontal/vertical delta against the stored touch origin.
-   * - Ignores gestures that are vertical-dominant or below the distance
-   *   threshold, so normal scrolling and short taps are not hijacked.
-   * - A left swipe advances to the next step (subject to the same
-   *   `isStepCompleted` / final-step rules as the visible Next button); a
-   *   right swipe goes back. Each successful swipe re-reveals the arrows so
-   *   the user can continue tapping if they prefer.
-   */
-  const handleStageTouchEnd = (event) => {
-    const start = touchStartRef.current;
-    touchStartRef.current = null;
-
-    if (!start || !event.changedTouches || !event.changedTouches.length) {
-      return;
-    }
-
-    const touch = event.changedTouches[0];
-    const deltaX = touch.clientX - start.x;
-    const deltaY = touch.clientY - start.y;
-
-    if (Math.abs(deltaY) > Math.abs(deltaX)) {
-      return;
-    }
-    if (Math.abs(deltaX) < SWIPE_DISTANCE_THRESHOLD) {
-      return;
-    }
-    if (Math.abs(deltaY) > SWIPE_VERTICAL_TOLERANCE) {
-      return;
-    }
-
-    if (deltaX < 0) {
-      const isFinalStep = steps[activeStep]?.order_seqtype === 'E';
-      if (!isFinalStep && isStepCompleted && activeStep < steps.length - 1) {
-        handleNext();
-        revealTouchNav();
-      }
-    } else if (activeStep > 0) {
-      handlePrevious();
-      revealTouchNav();
-    }
-  };
-
-  /**
-   * Cleanup any pending auto-hide timeout on unmount so the callback cannot
-   * fire against a stale component and emit a React warning.
-   */
-  useEffect(() => {
-    return () => {
-      if (typeof window !== 'undefined' && touchNavHideTimeoutRef.current) {
-        window.clearTimeout(touchNavHideTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (typeof document === 'undefined') {
-      return undefined;
-    }
-
-    const handleFullscreenChange = () => {
-      setIsStepFullscreen(document.fullscreenElement === fullscreenViewportRef.current);
-    };
-
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-    handleFullscreenChange();
-
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!NARRATION_CONTROLS_ENABLED || !autoNarration) {
-      return;
-    }
-
-    if (loading || !steps.length || !steps[activeStep]) {
-      return;
-    }
-
-    speakCurrentStep();
-  }, [
-    activeStep,
-    steps,
-    loading,
-    autoNarration,
-    voiceProvider,
-    voiceSelections.browser,
-    voiceSelections.elevenlabs,
-    voiceSelections.openai,
-    voiceSelections.sarvam,
-  ]);
-
-  useEffect(() => {
-    const session = realtimeSessionRef.current;
-    if (!session || session.status !== 'connected') {
-      return;
-    }
-
-    session.sendEvent({
-      type: 'session.update',
-      session: {
-        instructions: buildRealtimeInstructions(),
-      },
-    });
-  }, [activeStep, steps]);
-
-  useEffect(() => {
-    return () => {
-      stopNarration();
-      stopRealtimeConversation();
-    };
-  }, []);
-
-  /**
-   * Renders the main process UI including breadcrumb, step details,
-   * and action buttons. This content is reused in both normal view
-   * and external window view.
-   */
-  const renderContent = () => {
-    const currentStep = steps[activeStep];
-    const isFinalStep = currentStep?.order_seqtype === 'E';
-    const currentVoiceOptions =
-      voiceProvider === 'gemini'
-        ? GEMINI_VOICE_OPTIONS
-        : voiceProvider === 'elevenlabs'
-          ? ELEVENLABS_VOICE_OPTIONS
-          : voiceProvider === 'openai'
-            ? OPENAI_TTS_VOICE_OPTIONS
-            : SARVAM_VOICE_OPTIONS;
-    const currentVoiceValue = voiceSelections[voiceProvider] || undefined;
-    const openAiTokenEndpoint = process.env.OPENAI_REALTIME_TOKEN_ENDPOINT || process.env.REACT_APP_OPENAI_REALTIME_TOKEN_ENDPOINT;
-    const canStartRealtime = hasOpenAIRealtimeCredentials(openAiTokenEndpoint);
-
-    return (
-      <div className="process-steps-page">
-        <div ref={fullscreenViewportRef} className="steps-viewport">
-          <Card className="steps-main-card">
-            {/* {activeStep > 0 && GuestInfoComponent && (
-              <div className="steps-patient-bar">
-                <GuestInfoComponent params={urlParams} />
-              </div>
-            )} */}
-
-            <div className="steps-top-bar">
-              <div className="steps-breadcrumb-strip">
-                {steps.length ? (
-                  steps.map((stepItem, stepIndex) => {
-                    const isActiveBreadcrumb = stepIndex === activeStep;
-                    const isCompletedBreadcrumb = stepIndex < activeStep;
-
-                    return (
-                      <button
-                        key={stepItem.step_id || `${stepItem.step_name || 'step'}_${stepIndex}`}
-                        type="button"
-                        className={`steps-breadcrumb-item${isActiveBreadcrumb ? ' active' : ''}${isCompletedBreadcrumb ? ' completed' : ''}`}
-                        onClick={() => handleTimelineClick(stepIndex)}
-                      >
-                        <span className="steps-breadcrumb-index">{stepIndex + 1}</span>
-                        <span className="steps-breadcrumb-label">{stepItem.step_name || `Step ${stepIndex + 1}`}</span>
-                      </button>
-                    );
-                  })
-                ) : (
-                  <span className="steps-breadcrumb-empty">No steps loaded</span>
-                )}
-              </div>
-
-              <div className="steps-nav-actions">
-                <Button type="dashed" icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />} onClick={toggleStepFullscreen}>
-                  {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
-                </Button>
-
-                {/*
-                  Previous-process button.
-                  - Only relevant at the start of a process (`activeStep === 0`)
-                    AND when the backend signalled a `previous_process_id`. Mid-
-                    process the in-step Back button handles intra-process
-                    navigation, so showing this here would be ambiguous.
-                */}
-                {activeStep === 0 && previousProcessId?.previous_process_id && (
-                  <Button type="default" icon={<ArrowLeftOutlined />} onClick={handleStartPreviousProcess}>
-                    {previousProcessId.previous_process_name ? `Back to ${previousProcessId.previous_process_name}` : 'Previous Process'}
-                  </Button>
-                )}
-
-                {activeStep > 0 && (
-                  <Button type="default" icon={<ArrowLeftOutlined />} onClick={handlePrevious}>
-                    Back
-                  </Button>
-                )}
-
-                {/* {activeStep > 0 && !isFinalStep && (
-                  <Button type="default" onClick={handleSkip}>
-                    Skip
-                  </Button>
-                )} */}
-
-                {isFinalStep ? (
-                  <>
-                    {!showNextProcessAction && (
-                      <Button
-                        type="primary"
-                        onClick={async () => {
-                          const success = await handleFinish();
-                          if (success && nextProcessId?.next_process_id) {
-                            setShowNextProcessAction(true);
-                          }
-                        }}
-                      >
-                        Finish
-                      </Button>
-                    )}
-                    {showNextProcessAction && nextProcessId?.next_process_id && (
-                      <Button type="primary" onClick={handleStartNextProcess}>
-                        Start {nextProcessId.next_process_name} <ArrowRightOutlined />
-                      </Button>
-                    )}
-                  </>
-                ) : (
-                  <Button type="primary" disabled={!isStepCompleted} onClick={handleNext}>
-                    {/*
-                      First-step label is resolved via FIRST_STEP_LABELS using
-                      the process name (lowercased + trimmed) as the key. Known
-                      processes get a tailored CTA (e.g. "Verify Profile",
-                      "Start Consultation"); unknown processes fall back to the
-                      generic "Next" label. All non-first steps always render
-                      "Next".
-                    */}
-                    {activeStep === 0 ? (FIRST_STEP_LABELS[processName?.trim().toLowerCase()] ?? 'Next') : 'Next'} <ArrowRightOutlined />
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {/*
-              Resume banner.
-              - Renders only when a saved active step is ahead of the current
-                position, so it stays out of the way during normal navigation
-                and only surfaces when the user returns after an unexpected
-                exit (refresh, tab close, navigation away).
-              - Resuming clamps to the current step range; dismissing clears
-                the persisted marker so the banner does not return for this
-                process.
-            */}
-            {resumableStep != null && resumableStep > activeStep && resumableStep < steps.length ? (
-              <div className="steps-resume-banner" role="status">
-                <span className="steps-resume-banner-text">
-                  You left at Step {resumableStep + 1}
-                  {steps[resumableStep]?.step_name ? ` — ${steps[resumableStep].step_name}` : ''}.
-                </span>
-                <div className="steps-resume-banner-actions">
-                  <Button type="primary" size="small" onClick={handleResume}>
-                    Resume
-                  </Button>
-                  <Button type="text" size="small" onClick={dismissResume}>
-                    Dismiss
-                  </Button>
-                </div>
-              </div>
-            ) : null}
-
-            <div className={`steps-content-panel${isStepFullscreen ? ' is-fullscreen' : ''}`}>
-              {/*
-                Stage body:
-                - `is-swipe-enabled` applies `touch-action: pan-y` so horizontal
-                  gestures reach our handlers while vertical scrolling remains
-                  native.
-                - Touch handlers are only attached on touch devices to keep
-                  desktop event trees untouched.
-              */}
-              <div
-                className={`steps-stage-body${isTouchDevice ? ' is-swipe-enabled' : ''}`}
-                onTouchStart={isTouchDevice ? handleStageTouchStart : undefined}
-                onTouchEnd={isTouchDevice ? handleStageTouchEnd : undefined}
-              >
-                {/*
-                  Floating prev/next arrow buttons.
-                  - Rendered only on touch devices; `is-visible` class drives
-                    the fade-in/out via CSS transitions.
-                  - Disabled states mirror the visible Next/Back buttons in the
-                    top bar: previous disabled on the first step; next disabled
-                    on the last/final step or when the current step still
-                    requires user completion (isStepCompleted === false).
-                  - Clicking either button reveals the arrows again so the
-                    auto-hide timer restarts after every interaction.
-                */}
-                {isTouchDevice ? (
-                  <>
-                    <button
-                      type="button"
-                      className={`steps-touch-nav steps-touch-nav-left${touchNavVisible ? ' is-visible' : ''}`}
-                      aria-label="Previous step"
-                      disabled={activeStep === 0}
-                      onClick={() => {
-                        revealTouchNav();
-                        if (activeStep > 0) handlePrevious();
-                      }}
-                    >
-                      <ArrowLeftOutlined />
-                    </button>
-                    <button
-                      type="button"
-                      className={`steps-touch-nav steps-touch-nav-right${touchNavVisible ? ' is-visible' : ''}`}
-                      aria-label="Next step"
-                      disabled={activeStep >= steps.length - 1 || steps[activeStep]?.order_seqtype === 'E' || !isStepCompleted}
-                      onClick={() => {
-                        revealTouchNav();
-                        const isFinalStep = steps[activeStep]?.order_seqtype === 'E';
-                        if (!isFinalStep && isStepCompleted && activeStep < steps.length - 1) {
-                          handleNext();
-                        }
-                      }}
-                    >
-                      <ArrowRightOutlined />
-                    </button>
-                  </>
-                ) : null}
-                <div
-                  key={`${currentProcessId}_${activeStep}`}
-                  className={`steps-chat-step-card ${stepSlideDirection === 'backward' ? 'slide-backward' : 'slide-forward'}`}
-                >
-                  {/* <div className="steps-chat-step-top">
-                    <span className="steps-index-pill">
-                      Step {Math.min(activeStep + 1, steps.length || 1)} of {steps.length || 1}
-                    </span>
-                    <h2 className="steps-title">{currentStep?.step_name || 'No step selected'}</h2>
-                    {currentStep?.step_description ? <p className="steps-description">{currentStep.step_description}</p> : null}
-                  </div> */}
-
-                  <div className="steps-chat-step-component">
-                    {loading ? (
-                      <div className="steps-chat-loading">
-                        <Spin />
-                      </div>
-                    ) : null}
-                    {!loading ? renderDynamicStep() : null}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {NARRATION_CONTROLS_ENABLED ? (
-              <div className="steps-bottom-nav steps-narration-bar">
-                <Select
-                  className="steps-voice-provider-select"
-                  value={voiceProvider}
-                  options={VOICE_PROVIDER_OPTIONS}
-                  onChange={(value) => setVoiceProvider(value)}
-                />
-                <Select
-                  className="steps-voice-select"
-                  value={currentVoiceValue}
-                  options={currentVoiceOptions}
-                  onChange={(value) =>
-                    setVoiceSelections((oldSelections) => ({
-                      ...oldSelections,
-                      [voiceProvider]: value,
-                    }))
-                  }
-                  placeholder="Select Voice"
-                  optionFilterProp="label"
-                  showSearch
-                  disabled={!currentVoiceOptions.length}
-                />
-                <Button icon={<SoundOutlined />} onClick={speakCurrentStep} disabled={!currentStep}>
-                  Read Step
-                </Button>
-                <Button
-                  type={realtimeStatus === 'connected' ? 'default' : 'primary'}
-                  disabled={!canStartRealtime}
-                  onClick={() => {
-                    if (realtimeStatus === 'connected' || realtimeStatus === 'connecting') {
-                      stopRealtimeConversation();
-                      return;
-                    }
-                    startRealtimeConversation();
-                  }}
-                >
-                  {realtimeStatus === 'connected' ? 'Stop Conversation' : realtimeStatus === 'connecting' ? 'Connecting...' : 'Start Conversation'}
-                </Button>
-                <Button onClick={() => setAutoNarration((oldValue) => !oldValue)}>Auto Narration: {autoNarration ? 'On' : 'Off'}</Button>
-              </div>
-            ) : null}
-          </Card>
-        </div>
-      </div>
-    );
-  };
-  /**
-   * Renders content in both the main window and an external window
-   * when external window mode is enabled.
-   */
-  if (showExternalWindow && props.showExternalWindow) {
-    return (
-      <>
-        <ExternalWindow
-          onWindowReady={(win) => {
-            setExternalWin(win);
-            win.focus();
-          }}
-          title={steps[activeStep]?.step_name || 'Process Step'}
-          onClose={() => setShowExternalWindow(false)}
-          // left={window.screenX + window.outerWidth}
-          // top={window.screenY}
-          width={props.ExternalWindowWidth || 1000}
-          height={props.ExternalWindowHeight || 1000}
-        >
-          {renderContent(false)}
-        </ExternalWindow>
-        {renderContent(true)}
-      </>
-    );
-  }
-  /**
-   * Default render when external window mode is disabled.
-   */
-  return renderContent();
-}
+/**
+ * ProcessStepsPage Component
+ *
+ * - Manages a multi-step, time-tracked process workflow.
+ * - Dynamically renders step-specific components based on configuration.
+ * - Tracks step and process durations with local persistence support.
+ * - Supports step navigation (next, previous, skip, breadcrumb, keyboard).
+ * - Touchscreen support: horizontal swipe gestures navigate between steps
+ *   and transient left/right arrow buttons fade in on touch for discovery.
+ * - Handles process submission and optional chaining to the next process.
+ * - Renders a single active step view with compact breadcrumb controls.
+ */
+import { ArrowLeftOutlined, ArrowRightOutlined, CompressOutlined, ExpandOutlined, SoundOutlined } from '@ant-design/icons';
+import { Empty, Select, Spin, message } from 'antd';
+import moment from 'moment';
+import { useEffect, useRef, useState } from 'react';
+import { ExternalWindow } from '../../components';
+import { Dashboard } from '../../models';
+import * as genericComponents from './../../lib';
+import { Button, Card, Location } from './../../lib';
+import {
+  base64AudioToBlob,
+  buildGuestStepGuide,
+  extractGeminiAudio,
+  getElevenLabsApiKey,
+  getGeminiApiKey,
+  getOpenAIApiKey,
+  getSarvamApiKey,
+} from './narration';
+import { createOpenAIRealtimeSession, hasOpenAIRealtimeCredentials } from './openai-realtime';
+import { clearProgressEntry, readProgressEntry, sweepStaleProgressKeys, writeProgressEntry } from './progress-storage';
+import './steps.scss';
+
+const TOUCH_NAV_HIDE_DELAY = 2800;
+const SWIPE_DISTANCE_THRESHOLD = 60;
+const SWIPE_VERTICAL_TOLERANCE = 80;
+
+/**
+ * First-step CTA labels keyed by normalized process name.
+ * - Keys are the lowercased/trimmed process name returned by the backend.
+ * - Missing keys fall back to the generic 'Next' label at the call site.
+ * - Frozen so accidental mutation during render doesn't leak across renders.
+ */
+const FIRST_STEP_LABELS = Object.freeze({
+  verification: 'Verify Profile',
+  consultation: 'Start Consultation',
+});
+
+const VOICE_PROVIDER_OPTIONS = [
+  { label: 'Gemini', value: 'gemini' },
+  { label: 'ElevenLabs', value: 'elevenlabs' },
+  { label: 'OpenAI', value: 'openai' },
+];
+
+const GEMINI_VOICE_OPTIONS = [{ label: 'Kore', value: 'Kore' }];
+const DEFAULT_GEMINI_TTS_VOICE = process.env.GEMINI_TTS_VOICE || process.env.REACT_APP_GEMINI_TTS_VOICE || GEMINI_VOICE_OPTIONS[0].value;
+const OPENAI_TTS_VOICE_OPTIONS = [
+  { label: 'Alloy', value: 'alloy' },
+  { label: 'Ash', value: 'ash' },
+  { label: 'Coral', value: 'coral' },
+  { label: 'Echo', value: 'echo' },
+  { label: 'Fable', value: 'fable' },
+  { label: 'Nova', value: 'nova' },
+  { label: 'Onyx', value: 'onyx' },
+  { label: 'Sage', value: 'sage' },
+  { label: 'Shimmer', value: 'shimmer' },
+];
+const DEFAULT_OPENAI_TTS_VOICE =
+  process.env.OPENAI_TTS_VOICE ||
+  process.env.REACT_APP_OPENAI_TTS_VOICE ||
+  process.env.OPENAI_REALTIME_VOICE ||
+  process.env.REACT_APP_OPENAI_REALTIME_VOICE ||
+  OPENAI_TTS_VOICE_OPTIONS[0].value;
+
+const ELEVENLABS_VOICE_OPTIONS = [
+  { label: 'Rachel', value: '21m00Tcm4TlvDq8ikWAM' },
+  { label: 'Adam', value: 'pNInz6obpgDQGcFmaJgB' },
+  { label: 'Bella', value: 'EXAVITQu4vr4xnSDxMaL' },
+  { label: 'Antoni', value: 'ErXwobaYiN019PkySvjV' },
+  { label: 'Josh', value: 'TxGEqnHWrfWFTfGW9XjX' },
+];
+const DEFAULT_ELEVENLABS_VOICE_ID =
+  process.env.ELEVENLABS_VOICE_ID ||
+  process.env.ELEVEN_LABS_VOICE_ID ||
+  process.env.REACT_APP_ELEVENLABS_VOICE_ID ||
+  ELEVENLABS_VOICE_OPTIONS[0].value;
+
+const SARVAM_VOICE_OPTIONS = [
+  { label: 'Anushka', value: 'anushka' },
+  { label: 'Manisha', value: 'manisha' },
+  { label: 'Vidya', value: 'vidya' },
+  { label: 'Arya', value: 'arya' },
+  { label: 'Karun', value: 'karun' },
+  { label: 'Hitesh', value: 'hitesh' },
+];
+
+const ELEVENLABS_TTS_API_BASE_URL =
+  process.env.ELEVENLABS_TTS_API_BASE_URL || process.env.REACT_APP_ELEVENLABS_TTS_API_BASE_URL || 'https://api.elevenlabs.io/v1/text-to-speech';
+const ELEVENLABS_MODEL_ID = process.env.ELEVENLABS_MODEL_ID || process.env.REACT_APP_ELEVENLABS_MODEL_ID || 'eleven_multilingual_v2';
+const ELEVENLABS_OUTPUT_FORMAT = process.env.ELEVENLABS_OUTPUT_FORMAT || process.env.REACT_APP_ELEVENLABS_OUTPUT_FORMAT || 'mp3_44100_128';
+const GEMINI_TTS_MODEL = process.env.GEMINI_TTS_MODEL || process.env.REACT_APP_GEMINI_TTS_MODEL || 'gemini-2.5-flash-preview-tts';
+const GEMINI_TTS_API_BASE_URL =
+  process.env.GEMINI_API_BASE_URL || process.env.REACT_APP_GEMINI_API_BASE_URL || 'https://generativelanguage.googleapis.com/v1beta';
+const OPENAI_TTS_ENDPOINT = process.env.OPENAI_TTS_ENDPOINT || process.env.REACT_APP_OPENAI_TTS_ENDPOINT || 'https://api.openai.com/v1/audio/speech';
+const OPENAI_TTS_MODEL = process.env.OPENAI_TTS_MODEL || process.env.REACT_APP_OPENAI_TTS_MODEL || 'gpt-4o-mini-tts';
+const OPENAI_TTS_FORMAT = process.env.OPENAI_TTS_FORMAT || process.env.REACT_APP_OPENAI_TTS_FORMAT || 'mp3';
+const SARVAM_TTS_ENDPOINT = process.env.SARVAM_TTS_ENDPOINT || process.env.REACT_APP_SARVAM_TTS_ENDPOINT || 'https://api.sarvam.ai/text-to-speech';
+const SARVAM_TTS_MODEL = process.env.SARVAM_TTS_MODEL || process.env.REACT_APP_SARVAM_TTS_MODEL || 'bulbul:v2';
+const SARVAM_TARGET_LANGUAGE_CODE = process.env.SARVAM_TARGET_LANGUAGE_CODE || process.env.REACT_APP_SARVAM_TARGET_LANGUAGE_CODE || 'en-IN';
+const SARVAM_OUTPUT_AUDIO_CODEC = process.env.SARVAM_OUTPUT_AUDIO_CODEC || process.env.REACT_APP_SARVAM_OUTPUT_AUDIO_CODEC || 'wav';
+const NARRATION_CONTROLS_ENABLED = false;
+
+export default function ProcessStepsPage({ match, CustomComponents = {}, ...props }) {
+  const allComponents = { ...genericComponents, ...CustomComponents };
+  const GuestInfoComponent = allComponents.EntryInfo;
+
+  const [loading, setLoading] = useState(false);
+  const [steps, setSteps] = useState([]);
+  const [processName, setProcessName] = useState(null);
+  const [activeStep, setActiveStep] = useState(0);
+  const [resumableStep, setResumableStep] = useState(null);
+  const [isStepCompleted, setIsStepCompleted] = useState(false);
+
+  const [nextProcessId, setNextProcessId] = useState(null);
+  const [previousProcessId, setPreviousProcessId] = useState(null);
+  const [stepStartTime, setStepStartTime] = useState(null);
+  const [processStartTime, setProcessStartTime] = useState(null);
+  const [processTimings, setProcessTimings] = useState([]);
+  const [showExternalWindow, setShowExternalWindow] = useState(false);
+  const [externalWin, setExternalWin] = useState(null);
+  const [autoNarration, setAutoNarration] = useState(NARRATION_CONTROLS_ENABLED);
+  const [voiceProvider, setVoiceProvider] = useState(
+    process.env.REACT_APP_STEP_TTS_PROVIDER && process.env.REACT_APP_STEP_TTS_PROVIDER !== 'browser'
+      ? process.env.REACT_APP_STEP_TTS_PROVIDER
+      : 'gemini'
+  );
+  const [browserVoiceOptions, setBrowserVoiceOptions] = useState([]);
+  const [voiceSelections, setVoiceSelections] = useState({
+    browser: process.env.REACT_APP_STEP_BROWSER_VOICE || process.env.REACT_APP_STEP_TTS_VOICE || '',
+    gemini: DEFAULT_GEMINI_TTS_VOICE,
+    elevenlabs: DEFAULT_ELEVENLABS_VOICE_ID,
+    openai: DEFAULT_OPENAI_TTS_VOICE,
+    sarvam: process.env.REACT_APP_SARVAM_SPEAKER || SARVAM_VOICE_OPTIONS[0].value,
+  });
+  const [stepSlideDirection, setStepSlideDirection] = useState('forward');
+  const [showNextProcessAction, setShowNextProcessAction] = useState(false);
+  const [isStepFullscreen, setIsStepFullscreen] = useState(false);
+  const [realtimeStatus, setRealtimeStatus] = useState('idle');
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const [touchNavVisible, setTouchNavVisible] = useState(false);
+
+  const narrationUtteranceRef = useRef(null);
+  const narrationAudioRef = useRef(null);
+  const narrationAudioUrlRef = useRef(null);
+  const narrationFallbackNoticeRef = useRef(false);
+  const realtimeSessionRef = useRef(null);
+  const fullscreenViewportRef = useRef(null);
+  const touchStartRef = useRef(null);
+  const touchNavHideTimeoutRef = useRef(null);
+
+  const urlParams = Location.search();
+  const isConsultationMode = String(urlParams?.consultation).toLowerCase() === 'true';
+  let processId = urlParams.processId;
+  const [currentProcessId, setCurrentProcessId] = useState(processId);
+
+  /**
+   * Storage scope for per-guest progress.
+   * - The localStorage keys combine the process and the guest reference so
+   *   guest A's resume marker cannot appear for guest B.
+   * - Sources tried in order: query params (`opb_id`, `reference_id`, `opno`,
+   *   `reference_number`), then React Router `match.params`, then the final
+   *   pathname segment. Only when none produce a non-empty value does the
+   *   scope collapse to `anonymous` — which is the symptom of "stores step
+   *   but not per guest" because all guests then share one key.
+   */
+  const guestReference = (() => {
+    const fromQuery = urlParams?.opb_id || urlParams?.reference_id || urlParams?.opno || urlParams?.reference_number;
+    if (fromQuery) return String(fromQuery);
+
+    const params = match?.params || {};
+    const paramCandidates = [params.opb_id, params.reference_id, params.opno, params.reference_number, params.id];
+    const fromRoute = paramCandidates.find((value) => value != null && value !== '');
+    if (fromRoute) return String(fromRoute);
+
+    if (typeof window !== 'undefined' && window.location?.pathname) {
+      const segments = window.location.pathname.split('/').filter(Boolean);
+      const last = segments[segments.length - 1];
+      if (last) return String(last);
+    }
+
+    return 'anonymous';
+  })();
+  const timingsStorageKey = `processTimings_${currentProcessId}_${guestReference}`;
+  const activeStepStorageKey = `processActiveStep_${currentProcessId}_${guestReference}`;
+
+  // Load process details based on the current process ID
+  useEffect(() => {
+    sweepStaleProgressKeys();
+
+    loadProcess(currentProcessId);
+
+    /**
+     * Both the key AND the stored value are scoped to the guest. A read is
+     * only accepted when the value's `guestRef` matches the current guest;
+     * any mismatch (or a legacy unwrapped value from before this change) is
+     * treated as "no saved progress" so guest A's data can never appear for
+     * guest B even if a key collision somehow occurred.
+     */
+    const savedTimingsEntry = readProgressEntry(timingsStorageKey);
+    const savedTimings =
+      savedTimingsEntry && savedTimingsEntry.guestRef === guestReference && Array.isArray(savedTimingsEntry.timings) ? savedTimingsEntry.timings : [];
+    setProcessTimings(savedTimings);
+
+    const savedStepEntry = readProgressEntry(activeStepStorageKey);
+    const parsedStep = savedStepEntry && savedStepEntry.guestRef === guestReference ? Number(savedStepEntry.step) : NaN;
+    const savedActiveStep = Number.isFinite(parsedStep) && parsedStep > 0 ? parsedStep : 0;
+    setResumableStep(savedActiveStep > 0 ? savedActiveStep : null);
+
+    setProcessStartTime(Date.now());
+    setStepStartTime(Date.now());
+    setShowNextProcessAction(false);
+    setActiveStep(0);
+  }, [currentProcessId, guestReference]);
+
+  /**
+   * The active step is persisted inline in `gotoStep` rather than via a
+   * useEffect — running it as an effect captured `activeStepStorageKey` from
+   * a closure that could go stale during URL changes, allowing one guest's
+   * progress to be written under another guest's key. Writing in `gotoStep`
+   * happens synchronously with the user action using the current render's
+   * key, so it can never target a different guest than the one interacting.
+   */
+
+  /**
+   * Sync the loaded process name into the address bar.
+   * - Mirrors `processName` into a `process` query parameter so deep-links and
+   *   refreshes carry the human-readable process label.
+   * - Uses `window.history.replaceState` to avoid a navigation event, which
+   *   keeps React Router state and component instances stable.
+   * - Removes the param when `processName` is null/empty so stale values do
+   *   not linger after a process clears.
+   */
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    let changed = false;
+
+    const trimmedName = typeof processName === 'string' ? processName.trim() : '';
+    if (trimmedName) {
+      if (params.get('process') !== trimmedName) {
+        params.set('process', trimmedName);
+        changed = true;
+      }
+    } else if (params.has('process')) {
+      params.delete('process');
+      changed = true;
+    }
+
+    /**
+     * Mirror `currentProcessId` to the `processId` query param so previous /
+     * next process navigation reflects in the URL (e.g. when jumping from
+     * Verification → Consultation, the address bar should switch from
+     * `processId=1` to `processId=2`). Without this, deep-links and refreshes
+     * would still resolve to the originally loaded process.
+     */
+    const processIdString = currentProcessId != null ? String(currentProcessId) : '';
+    if (processIdString) {
+      if (params.get('processId') !== processIdString) {
+        params.set('processId', processIdString);
+        changed = true;
+      }
+    } else if (params.has('processId')) {
+      params.delete('processId');
+      changed = true;
+    }
+
+    if (!changed) {
+      return;
+    }
+
+    const search = params.toString();
+    const newUrl = `${window.location.pathname}${search ? `?${search}` : ''}${window.location.hash || ''}`;
+    window.history.replaceState(window.history.state, '', newUrl);
+  }, [processName, currentProcessId]);
+
+  //// Reset step start time whenever the active step changes
+
+  useEffect(() => {
+    setStepStartTime(Date.now());
+  }, [activeStep]);
+
+  // Check whether the current step is completed or mandatory
+  useEffect(() => {
+    if (steps.length > 0) {
+      setIsStepCompleted(steps[activeStep]?.is_mandatory !== true);
+    }
+  }, [activeStep, steps]);
+
+  useEffect(() => {
+    if (steps[activeStep]?.order_seqtype !== 'E') {
+      setShowNextProcessAction(false);
+    }
+  }, [activeStep, steps]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.speechSynthesis) {
+      return undefined;
+    }
+
+    const updateBrowserVoices = () => {
+      const voices = window.speechSynthesis
+        .getVoices()
+        .map((voice) => ({
+          label: `${voice.name} (${voice.lang})`,
+          value: voice.voiceURI || voice.name,
+        }))
+        .sort((voiceA, voiceB) => voiceA.label.localeCompare(voiceB.label));
+
+      setBrowserVoiceOptions(voices);
+
+      if (voices.length) {
+        setVoiceSelections((oldSelections) => {
+          if (oldSelections.browser) {
+            return oldSelections;
+          }
+
+          return {
+            ...oldSelections,
+            browser: voices[0].value,
+          };
+        });
+      }
+    };
+
+    updateBrowserVoices();
+    if (typeof window.speechSynthesis.addEventListener === 'function') {
+      window.speechSynthesis.addEventListener('voiceschanged', updateBrowserVoices);
+    } else {
+      window.speechSynthesis.onvoiceschanged = updateBrowserVoices;
+    }
+
+    return () => {
+      if (typeof window.speechSynthesis.removeEventListener === 'function') {
+        window.speechSynthesis.removeEventListener('voiceschanged', updateBrowserVoices);
+      } else if (window.speechSynthesis.onvoiceschanged === updateBrowserVoices) {
+        window.speechSynthesis.onvoiceschanged = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    narrationFallbackNoticeRef.current = false;
+  }, [voiceProvider]);
+
+  useEffect(() => {
+    const isSupportedProvider = VOICE_PROVIDER_OPTIONS.some((option) => option.value === voiceProvider);
+
+    if (!isSupportedProvider) {
+      setVoiceProvider('gemini');
+    }
+  }, [voiceProvider]);
+
+  useEffect(() => {
+    stopNarration();
+  }, [voiceProvider, voiceSelections.browser, voiceSelections.gemini, voiceSelections.elevenlabs, voiceSelections.openai, voiceSelections.sarvam]);
+
+  useEffect(() => {
+    const providerVoices =
+      voiceProvider === 'gemini'
+        ? GEMINI_VOICE_OPTIONS
+        : voiceProvider === 'elevenlabs'
+          ? ELEVENLABS_VOICE_OPTIONS
+          : voiceProvider === 'openai'
+            ? OPENAI_TTS_VOICE_OPTIONS
+            : SARVAM_VOICE_OPTIONS;
+
+    if (!providerVoices.length) {
+      return;
+    }
+
+    setVoiceSelections((oldSelections) => {
+      if (oldSelections[voiceProvider]) {
+        return oldSelections;
+      }
+
+      return {
+        ...oldSelections,
+        [voiceProvider]: providerVoices[0].value,
+      };
+    });
+  }, [voiceProvider, browserVoiceOptions]);
+
+  // Save updated process timings to state and localStorage
+  const saveTimings = (updated) => {
+    const safeTimings = Array.isArray(updated) ? updated : [];
+    setProcessTimings(safeTimings);
+    writeProgressEntry(timingsStorageKey, { guestRef: guestReference, timings: safeTimings });
+  };
+  // Record time spent on the current step
+
+  const recordStepTime = (status = 'completed') => {
+    // Exit if step start time or step data is missing
+
+    if (!stepStartTime || !steps[activeStep]) return processTimings;
+    // Capture end time and calculate duration
+
+    const endTime = Date.now();
+    const duration = endTime - stepStartTime;
+    const stepId = steps[activeStep].step_id;
+    // Clone existing timings
+
+    const previousTimings = Array.isArray(processTimings) ? processTimings : [];
+    const updated = [...previousTimings];
+    const index = updated.findIndex((t) => t.step_id === stepId);
+    // Create timing entry for the step
+
+    const entry = {
+      step_id: stepId,
+      start_time: moment(stepStartTime).format('DD-MM-YYYY HH:mm:ss'),
+      end_time: moment(endTime).format('DD-MM-YYYY HH:mm:ss'),
+      duration,
+      status,
+    };
+    // Update existing entry or add a new one
+    if (index > -1) {
+      updated[index] = { ...updated[index], ...entry, duration: updated[index].duration + duration };
+    } else {
+      updated.push(entry);
+    }
+
+    return updated;
+  };
+
+  /**
+   * @param {*} processId
+   *
+   * Process Loading
+   * - Fetches process details and step configuration using the process ID.
+   * - Manages loading state during the API call.
+   * - Stores step data and prepares next process details if available.
+   * - Handles API errors and maintains UI stability.
+   */
+  async function loadProcess(processId) {
+    setLoading(true);
+    setNextProcessId(null);
+    setPreviousProcessId(null);
+
+    try {
+      const result = await Dashboard.loadProcess(processId);
+
+      setSteps(result?.data?.steps || []);
+      setProcessName(result?.data?.process_name ?? null);
+      if (result?.data?.next_process_id) setNextProcessId(result.data);
+      if (result?.data?.previous_process_id) setPreviousProcessId(result.data);
+    } catch (e) {
+      console.error('Error loading process steps:', e);
+    } finally {
+      setLoading(false);
+    }
+  }
+  /**
+   * @param {*} finalTimings
+   *
+   * Process Submission
+   * - Builds payload with process metadata, reference details, and step timings.
+   * - Submits process completion data to the backend.
+   * - Clears stored timings on successful submission.
+   * - Persists timing data locally if submission fails.
+   */
+  const handleProcessSubmit = async (finalTimings) => {
+    const payload = {
+      process_id: currentProcessId,
+      status: 'completed',
+      reference_id: urlParams?.opb_id || urlParams?.reference_id,
+      reference_number: urlParams?.opno || urlParams?.reference_number,
+      mode: urlParams?.mode,
+      process: {
+        process_start_time: moment(processStartTime).format('DD-MM-YYYY HH:mm'),
+        process_end_time: moment().format('DD-MM-YYYY HH:mm'),
+        steps: finalTimings,
+      },
+    };
+
+    try {
+      const response = await Dashboard.processLog(payload);
+
+      if (response.success) {
+        clearProgressEntry(timingsStorageKey);
+        clearProgressEntry(activeStepStorageKey);
+        setProcessTimings([]);
+        setResumableStep(null);
+        return true;
+      }
+    } catch (e) {
+      console.error('Error:', e);
+      saveTimings(finalTimings);
+    }
+    return false;
+  };
+  /**
+   * @param {number} index
+   * @param {string} status
+   *
+   * Step Navigation
+   * - Records time spent on the current step.
+   * - Saves updated step timing data.
+   * - Navigates to the specified step index.
+   */
+  const gotoStep = (index, status = 'completed') => {
+    if (!steps.length) {
+      return;
+    }
+
+    const nextIndex = Math.max(0, Math.min(index, steps.length - 1));
+
+    if (nextIndex === activeStep) {
+      return;
+    }
+
+    setStepSlideDirection(nextIndex > activeStep ? 'forward' : 'backward');
+
+    const updated = recordStepTime(status);
+    saveTimings(updated);
+    setActiveStep(nextIndex);
+
+    /**
+     * Persist the resume marker synchronously here, not in a useEffect. The
+     * current render's `activeStepStorageKey` is guaranteed to belong to the
+     * guest the user is interacting with, so the write cannot leak to a
+     * different guest's key. Step 0 is the entry point — clear any marker
+     * so a returning visitor at step 0 does not see a stale banner.
+     */
+    if (nextIndex > 0 && currentProcessId) {
+      writeProgressEntry(activeStepStorageKey, { guestRef: guestReference, step: nextIndex });
+    } else if (nextIndex === 0) {
+      clearProgressEntry(activeStepStorageKey);
+    }
+  };
+  /**
+   * Navigate to the next step
+   * - Records timing data and advances step index by one.
+   */
+  const handleNext = () => gotoStep(activeStep + 1);
+  /**
+   * Navigate to the previous step
+   * - Records timing data and moves to the previous step.
+   */
+  const handlePrevious = () => gotoStep(activeStep - 1);
+  /**
+   * Skip current step
+   * - Records timing with skipped status.
+   * - Moves to the next step.
+   */
+  const handleSkip = () => gotoStep(activeStep + 1, 'skipped');
+  /**
+   * Breadcrumb Navigation
+   * - Navigates directly to the selected step.
+   * - Records timing data for the current step.
+   */
+  const handleTimelineClick = (i) => gotoStep(i);
+  /**
+   * Resume Handlers
+   * - `handleResume` jumps to the persisted step (clamped to current step
+   *   range) so a returning user picks up where they left off.
+   * - `dismissResume` discards the saved marker so the banner does not appear
+   *   again for this process.
+   */
+  const handleResume = () => {
+    if (resumableStep == null || !steps.length) {
+      return;
+    }
+    const target = Math.max(0, Math.min(resumableStep, steps.length - 1));
+    setResumableStep(null);
+    if (target !== activeStep) {
+      gotoStep(target);
+    }
+  };
+  const dismissResume = () => {
+    setResumableStep(null);
+    try {
+      clearProgressEntry(activeStepStorageKey);
+    } catch (error) {
+      console.warn('Unable to clear resume marker from local storage.', error);
+    }
+  };
+  /**
+   * Process Completion
+   * - Records final step timing.
+   * - Submits process completion data.
+   * - Navigates back on successful completion.
+   */
+  const handleFinish = async () => {
+    const final = recordStepTime();
+    const success = await handleProcessSubmit(final);
+    if (success && !nextProcessId) props.history?.goBack();
+    return success;
+  };
+  /**
+   * Start Next Process
+   * - Records final timing of the current process.
+   * - Submits current process data.
+   * - Loads and initializes the next linked process.
+   */
+  const handleStartNextProcess = async () => {
+    const final = recordStepTime();
+    if (await handleProcessSubmit(final)) {
+      await loadProcess(nextProcessId.next_process_id);
+      setCurrentProcessId(nextProcessId.next_process_id);
+      setActiveStep(0);
+      setShowExternalWindow(true);
+    }
+  };
+  /**
+   * Go Back to Previous Process
+   * - Loads the previously linked process for the current guest.
+   * - Does NOT submit the current process; this is a "go back" navigation,
+   *   not a completion. Step timings collected so far stay in localStorage
+   *   under the current process's scoped key in case the user returns.
+   * - Updates `currentProcessId` which triggers the load effect to refresh
+   *   process data, reset `activeStep` to 0, and re-derive storage scope.
+   */
+  const handleStartPreviousProcess = async () => {
+    if (!previousProcessId?.previous_process_id) {
+      return;
+    }
+    await loadProcess(previousProcessId.previous_process_id);
+    setCurrentProcessId(previousProcessId.previous_process_id);
+    setActiveStep(0);
+  };
+
+  function clearNarrationAudio() {
+    if (narrationAudioRef.current) {
+      narrationAudioRef.current.pause();
+      narrationAudioRef.current.src = '';
+      narrationAudioRef.current = null;
+    }
+
+    if (narrationAudioUrlRef.current && typeof window !== 'undefined' && window.URL) {
+      window.URL.revokeObjectURL(narrationAudioUrlRef.current);
+      narrationAudioUrlRef.current = null;
+    }
+  }
+
+  function stopNarration() {
+    clearNarrationAudio();
+
+    if (typeof window !== 'undefined' && window.speechSynthesis) {
+      window.speechSynthesis.cancel();
+    }
+
+    narrationUtteranceRef.current = null;
+  }
+
+  function buildRealtimeInstructions() {
+    const step = steps[activeStep];
+    const stepName = step?.step_name || `Step ${activeStep + 1}`;
+    const stepDescription = step?.step_description || 'No additional description.';
+
+    return [
+      'You are a warm, concise healthcare concierge assisting a guest during a guided process.',
+      `Current step: ${stepName}.`,
+      `Step description: ${stepDescription}.`,
+      'Answer in short, helpful sentences and keep the guest calm and informed.',
+      'Avoid medical diagnosis or treatment advice.',
+    ].join(' ');
+  }
+
+  async function startRealtimeConversation() {
+    if (realtimeSessionRef.current) {
+      return;
+    }
+
+    const session = createOpenAIRealtimeSession({
+      instructions: buildRealtimeInstructions(),
+      onStatus: (status) => {
+        setRealtimeStatus(status);
+      },
+      onError: (error) => {
+        console.error('OpenAI Realtime error:', error);
+        message.error(error?.message || 'OpenAI Realtime connection failed.');
+      },
+    });
+
+    realtimeSessionRef.current = session;
+    try {
+      await session.connect();
+    } catch (error) {
+      realtimeSessionRef.current = null;
+    }
+  }
+
+  function stopRealtimeConversation() {
+    if (realtimeSessionRef.current) {
+      realtimeSessionRef.current.disconnect();
+      realtimeSessionRef.current = null;
+    }
+    setRealtimeStatus('idle');
+  }
+
+  function playAudioBlob(audioBlob) {
+    return new Promise((resolve, reject) => {
+      if (typeof window === 'undefined' || !window.Audio || !window.URL) {
+        reject(new Error('Audio playback is not available.'));
+        return;
+      }
+
+      const audioUrl = window.URL.createObjectURL(audioBlob);
+      const audio = new window.Audio(audioUrl);
+
+      narrationAudioRef.current = audio;
+      narrationAudioUrlRef.current = audioUrl;
+
+      const cleanup = () => {
+        if (narrationAudioRef.current === audio) {
+          narrationAudioRef.current = null;
+        }
+
+        if (narrationAudioUrlRef.current === audioUrl) {
+          window.URL.revokeObjectURL(audioUrl);
+          narrationAudioUrlRef.current = null;
+        }
+      };
+
+      audio.onended = () => {
+        cleanup();
+        resolve();
+      };
+
+      audio.onpause = () => {
+        cleanup();
+        resolve();
+      };
+
+      audio.onerror = () => {
+        cleanup();
+        reject(new Error('Audio playback failed.'));
+      };
+
+      audio.play().catch((error) => {
+        cleanup();
+        reject(error);
+      });
+    });
+  }
+
+  function speakWithBrowser(text) {
+    return new Promise((resolve, reject) => {
+      if (typeof window === 'undefined' || !window.speechSynthesis || !window.SpeechSynthesisUtterance) {
+        reject(new Error('Speech synthesis is not available.'));
+        return;
+      }
+
+      const utterance = new window.SpeechSynthesisUtterance(text);
+      utterance.lang = process.env.REACT_APP_STEP_TTS_LANG || 'en-US';
+
+      const rate = Number(process.env.REACT_APP_STEP_TTS_RATE || 1);
+      const pitch = Number(process.env.REACT_APP_STEP_TTS_PITCH || 1);
+
+      utterance.rate = Number.isFinite(rate) ? rate : 1;
+      utterance.pitch = Number.isFinite(pitch) ? pitch : 1;
+
+      const selectedBrowserVoice = voiceSelections.browser;
+      if (selectedBrowserVoice) {
+        const browserVoice = window.speechSynthesis.getVoices().find((voice) => (voice.voiceURI || voice.name) === selectedBrowserVoice);
+
+        if (browserVoice) {
+          utterance.voice = browserVoice;
+        }
+      }
+
+      utterance.onend = () => {
+        if (narrationUtteranceRef.current === utterance) {
+          narrationUtteranceRef.current = null;
+        }
+        resolve();
+      };
+
+      utterance.onerror = () => {
+        if (narrationUtteranceRef.current === utterance) {
+          narrationUtteranceRef.current = null;
+        }
+        reject(new Error('Browser narration failed.'));
+      };
+
+      narrationUtteranceRef.current = utterance;
+      window.speechSynthesis.speak(utterance);
+    });
+  }
+
+  async function synthesizeGeminiAudio(text) {
+    const apiKey = getGeminiApiKey();
+
+    if (!apiKey) {
+      throw new Error('Gemini API key is missing.');
+    }
+
+    const selectedVoiceName = voiceSelections.gemini || DEFAULT_GEMINI_TTS_VOICE;
+    const endpoint = `${GEMINI_TTS_API_BASE_URL}/models/${GEMINI_TTS_MODEL}:generateContent?key=${encodeURIComponent(apiKey)}`;
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        contents: [
+          {
+            role: 'user',
+            parts: [{ text }],
+          },
+        ],
+        generationConfig: {
+          responseModalities: ['AUDIO'],
+          speechConfig: {
+            voiceConfig: {
+              prebuiltVoiceConfig: {
+                voiceName: selectedVoiceName,
+              },
+            },
+          },
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Gemini TTS request failed with status ${response.status}.`);
+    }
+
+    const payload = await response.json();
+    const audio = extractGeminiAudio(payload);
+
+    if (!audio || !audio.data) {
+      throw new Error('Gemini did not return audio data.');
+    }
+
+    return base64AudioToBlob(audio.data, audio.mimeType || 'audio/wav');
+  }
+
+  async function synthesizeOpenAIAudio(text) {
+    const apiKey = getOpenAIApiKey();
+
+    if (!apiKey) {
+      throw new Error('OpenAI API key is missing.');
+    }
+
+    const selectedVoice = voiceSelections.openai || DEFAULT_OPENAI_TTS_VOICE;
+    const response = await fetch(OPENAI_TTS_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        model: OPENAI_TTS_MODEL,
+        voice: selectedVoice,
+        input: text,
+        response_format: OPENAI_TTS_FORMAT,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`OpenAI TTS request failed with status ${response.status}.`);
+    }
+
+    return response.blob();
+  }
+
+  async function synthesizeElevenLabsAudio(text) {
+    const apiKey = getElevenLabsApiKey();
+
+    if (!apiKey) {
+      throw new Error('ElevenLabs API key is missing.');
+    }
+
+    const selectedVoiceId = voiceSelections.elevenlabs || DEFAULT_ELEVENLABS_VOICE_ID;
+    const endpoint = `${ELEVENLABS_TTS_API_BASE_URL}/${encodeURIComponent(selectedVoiceId)}/stream?output_format=${encodeURIComponent(
+      ELEVENLABS_OUTPUT_FORMAT
+    )}`;
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'audio/mpeg',
+        'xi-api-key': apiKey,
+      },
+      body: JSON.stringify({
+        text,
+        model_id: ELEVENLABS_MODEL_ID,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`ElevenLabs TTS request failed with status ${response.status}.`);
+    }
+
+    return response.blob();
+  }
+
+  async function synthesizeSarvamAudio(text) {
+    const apiKey = getSarvamApiKey();
+
+    if (!apiKey) {
+      throw new Error('Sarvam API key is missing.');
+    }
+
+    const selectedSpeaker = voiceSelections.sarvam || SARVAM_VOICE_OPTIONS[0].value;
+    const response = await fetch(SARVAM_TTS_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'api-subscription-key': apiKey,
+      },
+      body: JSON.stringify({
+        text,
+        target_language_code: SARVAM_TARGET_LANGUAGE_CODE,
+        model: SARVAM_TTS_MODEL,
+        speaker: selectedSpeaker,
+        output_audio_codec: SARVAM_OUTPUT_AUDIO_CODEC,
+      }),
+    });
+
+    const payload = await response.json().catch(() => null);
+
+    if (!response.ok) {
+      throw new Error(`Sarvam TTS request failed with status ${response.status}.`);
+    }
+
+    const audioBase64 = payload?.audios?.[0];
+    if (!audioBase64) {
+      throw new Error('Sarvam did not return any audio data.');
+    }
+
+    const codec = (SARVAM_OUTPUT_AUDIO_CODEC || '').toLowerCase();
+    const mimeType = codec === 'mp3' ? 'audio/mpeg' : 'audio/wav';
+
+    return base64AudioToBlob(audioBase64, mimeType);
+  }
+
+  async function speakText(text) {
+    if (!text || typeof window === 'undefined') {
+      return;
+    }
+
+    stopNarration();
+
+    if (voiceProvider === 'gemini') {
+      const geminiAudio = await synthesizeGeminiAudio(text);
+      await playAudioBlob(geminiAudio);
+      return;
+    }
+
+    if (voiceProvider === 'elevenlabs') {
+      const elevenLabsAudio = await synthesizeElevenLabsAudio(text);
+      await playAudioBlob(elevenLabsAudio);
+      return;
+    }
+
+    if (voiceProvider === 'openai') {
+      const openAiAudio = await synthesizeOpenAIAudio(text);
+      await playAudioBlob(openAiAudio);
+      return;
+    }
+
+    if (voiceProvider === 'sarvam') {
+      const sarvamAudio = await synthesizeSarvamAudio(text);
+      await playAudioBlob(sarvamAudio);
+      return;
+    }
+
+    throw new Error('Browser narration is disabled. Use Gemini, ElevenLabs, or OpenAI.');
+  }
+
+  async function speakCurrentStep() {
+    const step = steps[activeStep];
+    const guide = buildGuestStepGuide(step, activeStep, steps.length);
+
+    try {
+      await speakText(guide.narration);
+    } catch (error) {
+      if (!narrationFallbackNoticeRef.current) {
+        const providerLabel =
+          voiceProvider === 'gemini'
+            ? 'Gemini'
+            : voiceProvider === 'elevenlabs'
+              ? 'ElevenLabs'
+              : voiceProvider === 'openai'
+                ? 'OpenAI'
+                : 'Selected provider';
+        message.warning(`${providerLabel} narration failed.`);
+        narrationFallbackNoticeRef.current = true;
+      }
+
+      message.error(error?.message || 'Unable to play narration for this step.');
+    }
+  }
+
+  async function toggleStepFullscreen() {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const targetElement = fullscreenViewportRef.current;
+
+    if (!targetElement || !targetElement.requestFullscreen) {
+      return;
+    }
+
+    try {
+      if (document.fullscreenElement === targetElement) {
+        await document.exitFullscreen();
+        return;
+      }
+
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+
+      await targetElement.requestFullscreen();
+    } catch (error) {
+      console.error('Failed to toggle step fullscreen mode:', error);
+    }
+  }
+  /**
+   * Dynamic Step Renderer
+   * - Resolves and renders step-specific components dynamically.
+   * - Passes configuration, parameters, and handlers to the component.
+   * - Handles missing steps or components gracefully.
+   */
+  /**
+   * Render the active step's dynamic component.
+   *
+   * Intentionally a plain function (not a component) called inline as
+   * `{renderDynamicStep()}`. Defining it as a component inside the parent's
+   * render body creates a fresh component *type* on every re-render — React
+   * then unmounts and remounts the step component on every parent state
+   * change (touchNavVisible, stepSlideDirection, activeStep timer, etc.),
+   * which caused visible re-render/jitter during swipe navigation. Evaluating
+   * it as a function just yields JSX for the real step Component, whose type
+   * is stable, so React reconciles in place.
+   */
+  const renderDynamicStep = () => {
+    const step = steps[activeStep];
+    if (!step) return <Empty description="No step selected" />;
+
+    const Component = allComponents[step.related_page];
+    if (!Component) return <Empty description={`Component "${step.related_page}" not found`} />;
+
+    return <Component {...step.config} {...props} step={step} params={urlParams} onStepComplete={() => setIsStepCompleted(true)} />;
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === 'ArrowLeft' && activeStep > 0) {
+        handlePrevious();
+      }
+
+      if (event.key === 'ArrowRight' && activeStep < steps.length - 1) {
+        handleNext();
+      }
+    };
+
+    // main window (document!)
+    document.addEventListener('keydown', handleKeyDown);
+
+    // external window (document!)
+    if (externalWin && externalWin.document) {
+      externalWin.document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+
+      if (externalWin && externalWin.document) {
+        externalWin.document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [activeStep, steps, externalWin]);
+
+  /**
+   * Touch-device detection.
+   * - Runs once on mount.
+   * - Uses `matchMedia('(pointer: coarse)')` as the primary signal because it
+   *   targets the actual input hardware (covers touch laptops correctly) and
+   *   falls back to `ontouchstart` / `navigator.maxTouchPoints` for older
+   *   browsers.
+   * - When neither signal matches, the effect bails out and `isTouchDevice`
+   *   stays false so desktop renders without any touch-only UI.
+   */
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const hasCoarsePointer = typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
+    const hasTouch = 'ontouchstart' in window || (typeof navigator !== 'undefined' && navigator.maxTouchPoints > 0);
+
+    if (!hasCoarsePointer && !hasTouch) {
+      return undefined;
+    }
+
+    setIsTouchDevice(true);
+  }, []);
+
+  /**
+   * Show the floating prev/next arrow buttons and reset their auto-hide timer.
+   * - Any pending hide timeout is cleared so a rapid sequence of touches keeps
+   *   the arrows on-screen continuously instead of flickering.
+   * - A fresh timeout is scheduled for TOUCH_NAV_HIDE_DELAY so the arrows fade
+   *   away once the user stops interacting, keeping the step content clear.
+   */
+  const revealTouchNav = () => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    setTouchNavVisible(true);
+
+    if (touchNavHideTimeoutRef.current) {
+      window.clearTimeout(touchNavHideTimeoutRef.current);
+    }
+
+    touchNavHideTimeoutRef.current = window.setTimeout(() => {
+      setTouchNavVisible(false);
+      touchNavHideTimeoutRef.current = null;
+    }, TOUCH_NAV_HIDE_DELAY);
+  };
+
+  /**
+   * onTouchStart for the stage body.
+   * - Records the initial touch position so handleStageTouchEnd can measure
+   *   the swipe delta.
+   * - Also reveals the side arrows immediately, giving the user a visible
+   *   navigation affordance as soon as they touch the screen.
+   */
+  const handleStageTouchStart = (event) => {
+    if (!isTouchDevice || !event.touches || !event.touches.length) {
+      return;
+    }
+
+    const touch = event.touches[0];
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+    revealTouchNav();
+  };
+
+  /**
+   * onTouchEnd for the stage body.
+   * - Computes the horizontal/vertical delta against the stored touch origin.
+   * - Ignores gestures that are vertical-dominant or below the distance
+   *   threshold, so normal scrolling and short taps are not hijacked.
+   * - A left swipe advances to the next step (subject to the same
+   *   `isStepCompleted` / final-step rules as the visible Next button); a
+   *   right swipe goes back. Each successful swipe re-reveals the arrows so
+   *   the user can continue tapping if they prefer.
+   */
+  const handleStageTouchEnd = (event) => {
+    const start = touchStartRef.current;
+    touchStartRef.current = null;
+
+    if (!start || !event.changedTouches || !event.changedTouches.length) {
+      return;
+    }
+
+    const touch = event.changedTouches[0];
+    const deltaX = touch.clientX - start.x;
+    const deltaY = touch.clientY - start.y;
+
+    if (Math.abs(deltaY) > Math.abs(deltaX)) {
+      return;
+    }
+    if (Math.abs(deltaX) < SWIPE_DISTANCE_THRESHOLD) {
+      return;
+    }
+    if (Math.abs(deltaY) > SWIPE_VERTICAL_TOLERANCE) {
+      return;
+    }
+
+    if (deltaX < 0) {
+      const isFinalStep = steps[activeStep]?.order_seqtype === 'E';
+      if (!isFinalStep && isStepCompleted && activeStep < steps.length - 1) {
+        handleNext();
+        revealTouchNav();
+      }
+    } else if (activeStep > 0) {
+      handlePrevious();
+      revealTouchNav();
+    }
+  };
+
+  /**
+   * Cleanup any pending auto-hide timeout on unmount so the callback cannot
+   * fire against a stale component and emit a React warning.
+   */
+  useEffect(() => {
+    return () => {
+      if (typeof window !== 'undefined' && touchNavHideTimeoutRef.current) {
+        window.clearTimeout(touchNavHideTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+
+    const handleFullscreenChange = () => {
+      setIsStepFullscreen(document.fullscreenElement === fullscreenViewportRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    handleFullscreenChange();
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!NARRATION_CONTROLS_ENABLED || !autoNarration) {
+      return;
+    }
+
+    if (loading || !steps.length || !steps[activeStep]) {
+      return;
+    }
+
+    speakCurrentStep();
+  }, [
+    activeStep,
+    steps,
+    loading,
+    autoNarration,
+    voiceProvider,
+    voiceSelections.browser,
+    voiceSelections.elevenlabs,
+    voiceSelections.openai,
+    voiceSelections.sarvam,
+  ]);
+
+  useEffect(() => {
+    const session = realtimeSessionRef.current;
+    if (!session || session.status !== 'connected') {
+      return;
+    }
+
+    session.sendEvent({
+      type: 'session.update',
+      session: {
+        instructions: buildRealtimeInstructions(),
+      },
+    });
+  }, [activeStep, steps]);
+
+  useEffect(() => {
+    return () => {
+      stopNarration();
+      stopRealtimeConversation();
+    };
+  }, []);
+
+  /**
+   * Renders the main process UI including breadcrumb, step details,
+   * and action buttons. This content is reused in both normal view
+   * and external window view.
+   */
+  const renderContent = () => {
+    const currentStep = steps[activeStep];
+    const isFinalStep = currentStep?.order_seqtype === 'E';
+    const currentVoiceOptions =
+      voiceProvider === 'gemini'
+        ? GEMINI_VOICE_OPTIONS
+        : voiceProvider === 'elevenlabs'
+          ? ELEVENLABS_VOICE_OPTIONS
+          : voiceProvider === 'openai'
+            ? OPENAI_TTS_VOICE_OPTIONS
+            : SARVAM_VOICE_OPTIONS;
+    const currentVoiceValue = voiceSelections[voiceProvider] || undefined;
+    const openAiTokenEndpoint = process.env.OPENAI_REALTIME_TOKEN_ENDPOINT || process.env.REACT_APP_OPENAI_REALTIME_TOKEN_ENDPOINT;
+    const canStartRealtime = hasOpenAIRealtimeCredentials(openAiTokenEndpoint);
+
+    return (
+      <div className="process-steps-page">
+        <div ref={fullscreenViewportRef} className="steps-viewport">
+          <Card className="steps-main-card">
+            {/* {activeStep > 0 && GuestInfoComponent && (
+              <div className="steps-patient-bar">
+                <GuestInfoComponent params={urlParams} />
+              </div>
+            )} */}
+
+            <div className="steps-top-bar">
+              <div className="steps-breadcrumb-strip">
+                {steps.length ? (
+                  steps.map((stepItem, stepIndex) => {
+                    const isActiveBreadcrumb = stepIndex === activeStep;
+                    const isCompletedBreadcrumb = stepIndex < activeStep;
+
+                    return (
+                      <button
+                        key={stepItem.step_id || `${stepItem.step_name || 'step'}_${stepIndex}`}
+                        type="button"
+                        className={`steps-breadcrumb-item${isActiveBreadcrumb ? ' active' : ''}${isCompletedBreadcrumb ? ' completed' : ''}`}
+                        onClick={() => handleTimelineClick(stepIndex)}
+                      >
+                        <span className="steps-breadcrumb-index">{stepIndex + 1}</span>
+                        <span className="steps-breadcrumb-label">{stepItem.step_name || `Step ${stepIndex + 1}`}</span>
+                      </button>
+                    );
+                  })
+                ) : (
+                  <span className="steps-breadcrumb-empty">No steps loaded</span>
+                )}
+              </div>
+
+              <div className="steps-nav-actions">
+                <Button type="dashed" icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />} onClick={toggleStepFullscreen}>
+                  {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+                </Button>
+
+                {/*
+                  Previous-process button.
+                  - Only relevant at the start of a process (`activeStep === 0`)
+                    AND when the backend signalled a `previous_process_id`. Mid-
+                    process the in-step Back button handles intra-process
+                    navigation, so showing this here would be ambiguous.
+                */}
+                {activeStep === 0 && previousProcessId?.previous_process_id && (
+                  <Button type="default" icon={<ArrowLeftOutlined />} onClick={handleStartPreviousProcess}>
+                    {previousProcessId.previous_process_name ? `Back to ${previousProcessId.previous_process_name}` : 'Previous Process'}
+                  </Button>
+                )}
+
+                {activeStep > 0 && (
+                  <Button type="default" icon={<ArrowLeftOutlined />} onClick={handlePrevious}>
+                    Back
+                  </Button>
+                )}
+
+                {/* {activeStep > 0 && !isFinalStep && (
+                  <Button type="default" onClick={handleSkip}>
+                    Skip
+                  </Button>
+                )} */}
+
+                {isFinalStep ? (
+                  <>
+                    {!showNextProcessAction && (
+                      <Button
+                        type="primary"
+                        onClick={async () => {
+                          const success = await handleFinish();
+                          if (success && nextProcessId?.next_process_id) {
+                            setShowNextProcessAction(true);
+                          }
+                        }}
+                      >
+                        Finish
+                      </Button>
+                    )}
+                    {showNextProcessAction && nextProcessId?.next_process_id && (
+                      <Button type="primary" onClick={handleStartNextProcess}>
+                        Start {nextProcessId.next_process_name} <ArrowRightOutlined />
+                      </Button>
+                    )}
+                  </>
+                ) : (
+                  <Button type="primary" disabled={!isStepCompleted} onClick={handleNext}>
+                    {/*
+                      First-step label is resolved via FIRST_STEP_LABELS using
+                      the process name (lowercased + trimmed) as the key. Known
+                      processes get a tailored CTA (e.g. "Verify Profile",
+                      "Start Consultation"); unknown processes fall back to the
+                      generic "Next" label. All non-first steps always render
+                      "Next".
+                    */}
+                    {activeStep === 0 ? (FIRST_STEP_LABELS[processName?.trim().toLowerCase()] ?? 'Next') : 'Next'} <ArrowRightOutlined />
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/*
+              Resume banner.
+              - Renders only when a saved active step is ahead of the current
+                position, so it stays out of the way during normal navigation
+                and only surfaces when the user returns after an unexpected
+                exit (refresh, tab close, navigation away).
+              - Resuming clamps to the current step range; dismissing clears
+                the persisted marker so the banner does not return for this
+                process.
+            */}
+            {resumableStep != null && resumableStep > activeStep && resumableStep < steps.length ? (
+              <div className="steps-resume-banner" role="status">
+                <span className="steps-resume-banner-text">
+                  You left at Step {resumableStep + 1}
+                  {steps[resumableStep]?.step_name ? ` — ${steps[resumableStep].step_name}` : ''}.
+                </span>
+                <div className="steps-resume-banner-actions">
+                  <Button type="primary" size="small" onClick={handleResume}>
+                    Resume
+                  </Button>
+                  <Button type="text" size="small" onClick={dismissResume}>
+                    Dismiss
+                  </Button>
+                </div>
+              </div>
+            ) : null}
+
+            <div className={`steps-content-panel${isStepFullscreen ? ' is-fullscreen' : ''}`}>
+              {/*
+                Stage body:
+                - `is-swipe-enabled` applies `touch-action: pan-y` so horizontal
+                  gestures reach our handlers while vertical scrolling remains
+                  native.
+                - Touch handlers are only attached on touch devices to keep
+                  desktop event trees untouched.
+              */}
+              <div
+                className={`steps-stage-body${isTouchDevice ? ' is-swipe-enabled' : ''}`}
+                onTouchStart={isTouchDevice ? handleStageTouchStart : undefined}
+                onTouchEnd={isTouchDevice ? handleStageTouchEnd : undefined}
+              >
+                {/*
+                  Floating prev/next arrow buttons.
+                  - Rendered only on touch devices; `is-visible` class drives
+                    the fade-in/out via CSS transitions.
+                  - Disabled states mirror the visible Next/Back buttons in the
+                    top bar: previous disabled on the first step; next disabled
+                    on the last/final step or when the current step still
+                    requires user completion (isStepCompleted === false).
+                  - Clicking either button reveals the arrows again so the
+                    auto-hide timer restarts after every interaction.
+                */}
+                {isTouchDevice ? (
+                  <>
+                    <button
+                      type="button"
+                      className={`steps-touch-nav steps-touch-nav-left${touchNavVisible ? ' is-visible' : ''}`}
+                      aria-label="Previous step"
+                      disabled={activeStep === 0}
+                      onClick={() => {
+                        revealTouchNav();
+                        if (activeStep > 0) handlePrevious();
+                      }}
+                    >
+                      <ArrowLeftOutlined />
+                    </button>
+                    <button
+                      type="button"
+                      className={`steps-touch-nav steps-touch-nav-right${touchNavVisible ? ' is-visible' : ''}`}
+                      aria-label="Next step"
+                      disabled={activeStep >= steps.length - 1 || steps[activeStep]?.order_seqtype === 'E' || !isStepCompleted}
+                      onClick={() => {
+                        revealTouchNav();
+                        const isFinalStep = steps[activeStep]?.order_seqtype === 'E';
+                        if (!isFinalStep && isStepCompleted && activeStep < steps.length - 1) {
+                          handleNext();
+                        }
+                      }}
+                    >
+                      <ArrowRightOutlined />
+                    </button>
+                  </>
+                ) : null}
+                <div
+                  key={`${currentProcessId}_${activeStep}`}
+                  className={`steps-chat-step-card ${stepSlideDirection === 'backward' ? 'slide-backward' : 'slide-forward'}`}
+                >
+                  {/* <div className="steps-chat-step-top">
+                    <span className="steps-index-pill">
+                      Step {Math.min(activeStep + 1, steps.length || 1)} of {steps.length || 1}
+                    </span>
+                    <h2 className="steps-title">{currentStep?.step_name || 'No step selected'}</h2>
+                    {currentStep?.step_description ? <p className="steps-description">{currentStep.step_description}</p> : null}
+                  </div> */}
+
+                  <div className="steps-chat-step-component">
+                    {loading ? (
+                      <div className="steps-chat-loading">
+                        <Spin />
+                      </div>
+                    ) : null}
+                    {!loading ? renderDynamicStep() : null}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {NARRATION_CONTROLS_ENABLED ? (
+              <div className="steps-bottom-nav steps-narration-bar">
+                <Select
+                  className="steps-voice-provider-select"
+                  value={voiceProvider}
+                  options={VOICE_PROVIDER_OPTIONS}
+                  onChange={(value) => setVoiceProvider(value)}
+                />
+                <Select
+                  className="steps-voice-select"
+                  value={currentVoiceValue}
+                  options={currentVoiceOptions}
+                  onChange={(value) =>
+                    setVoiceSelections((oldSelections) => ({
+                      ...oldSelections,
+                      [voiceProvider]: value,
+                    }))
+                  }
+                  placeholder="Select Voice"
+                  optionFilterProp="label"
+                  showSearch
+                  disabled={!currentVoiceOptions.length}
+                />
+                <Button icon={<SoundOutlined />} onClick={speakCurrentStep} disabled={!currentStep}>
+                  Read Step
+                </Button>
+                <Button
+                  type={realtimeStatus === 'connected' ? 'default' : 'primary'}
+                  disabled={!canStartRealtime}
+                  onClick={() => {
+                    if (realtimeStatus === 'connected' || realtimeStatus === 'connecting') {
+                      stopRealtimeConversation();
+                      return;
+                    }
+                    startRealtimeConversation();
+                  }}
+                >
+                  {realtimeStatus === 'connected' ? 'Stop Conversation' : realtimeStatus === 'connecting' ? 'Connecting...' : 'Start Conversation'}
+                </Button>
+                <Button onClick={() => setAutoNarration((oldValue) => !oldValue)}>Auto Narration: {autoNarration ? 'On' : 'Off'}</Button>
+              </div>
+            ) : null}
+          </Card>
+        </div>
+      </div>
+    );
+  };
+  /**
+   * Renders content in both the main window and an external window
+   * when external window mode is enabled.
+   */
+  if (showExternalWindow && props.showExternalWindow) {
+    return (
+      <>
+        <ExternalWindow
+          onWindowReady={(win) => {
+            setExternalWin(win);
+            win.focus();
+          }}
+          title={steps[activeStep]?.step_name || 'Process Step'}
+          onClose={() => setShowExternalWindow(false)}
+          // left={window.screenX + window.outerWidth}
+          // top={window.screenY}
+          width={props.ExternalWindowWidth || 1000}
+          height={props.ExternalWindowHeight || 1000}
+        >
+          {renderContent(false)}
+        </ExternalWindow>
+        {renderContent(true)}
+      </>
+    );
+  }
+  /**
+   * Default render when external window mode is disabled.
+   */
+  return renderContent();
+}